/* ============================================================
   bdjoy.click — layer system (mobile-first, bn-BD)
   Prefix: shell4f34e-
   Palette: #333333 / #228B22 / #80CBC4 / #7FFF00 / #00FF7F
   Direction: edge-aligned header / full-height menu layer /
              segmented action grid / containerized symbol tile /
              slight lift active state / sliding indicator
   ============================================================ */

:root{
  --shell4f34e-bg-deep:#0d1f17;
  --shell4f34e-bg-base:#142a20;
  --shell4f34e-bg-card:#1b3a2b;
  --shell4f34e-bg-elev:#234736;
  --shell4f34e-tone-dark:#333333;
  --shell4f34e-green:#228B22;
  --shell4f34e-teal:#80CBC4;
  --shell4f34e-chart:#7FFF00;
  --shell4f34e-spring:#00FF7F;
  --shell4f34e-ink:#eafff4;
  --shell4f34e-ink-mute:#9cc7b6;
  --shell4f34e-line:rgba(128,203,196,0.18);
  --shell4f34e-line-strong:rgba(127,255,0,0.35);
  --shell4f34e-shadow:0 6px 18px rgba(0,0,0,0.45);
  --shell4f34e-r-sm:8px;
  --shell4f34e-r-md:14px;
  --shell4f34e-r-lg:20px;
  --shell4f34e-r-pill:999px;
  --shell4f34e-touch:44px;
  --shell4f34e-max:430px;
  --shell4f34e-bottom-h:62px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
html{background:#04090a;}
body{
  font-family:"SolaimanLipi","Noto Sans Bengali","Hind Siliguri","Roboto",system-ui,sans-serif;
  color:var(--shell4f34e-ink);
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(127,255,0,0.10), transparent 60%),
    radial-gradient(90% 50% at 90% 0%, rgba(0,255,127,0.08), transparent 55%),
    linear-gradient(180deg, var(--shell4f34e-bg-deep), var(--shell4f34e-bg-base) 40%, #0a160f 100%);
  min-height:100vh;
  line-height:1.6;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* phone canvas + centered on wide screens */
.shell4f34e-page{
  width:100%;
  max-width:var(--shell4f34e-max);
  margin:0 auto;
  position:relative;
  background:transparent;
  padding-bottom:calc(var(--shell4f34e-bottom-h) + 28px);
}
@media (min-width:431px){
  body{background:#04090a;}
  .shell4f34e-page{
    box-shadow:0 0 0 1px rgba(127,255,0,0.05), 0 30px 80px rgba(0,0,0,0.6);
    background:
      radial-gradient(120% 60% at 50% -10%, rgba(127,255,0,0.10), transparent 60%),
      linear-gradient(180deg, var(--shell4f34e-bg-deep), var(--shell4f34e-bg-base) 40%, #0a160f 100%);
  }
}

img{display:block;max-width:100%;}
a{color:var(--shell4f34e-spring);text-decoration:none;}
a:focus-visible,button:focus-visible{outline:2px solid var(--shell4f34e-chart);outline-offset:2px;border-radius:6px;}

/* ============================================================
   HEADER — edge-aligned functional top
   ============================================================ */
.shell4f34e-header{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  background:linear-gradient(180deg, rgba(13,31,23,0.96), rgba(13,31,23,0.82));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--shell4f34e-line);
}
.shell4f34e-brand{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.shell4f34e-brand-badge{
  width:40px;
  height:40px;
  border-radius:12px;
  overflow:hidden;
  background:radial-gradient(circle at 30% 30%, var(--shell4f34e-chart), var(--shell4f34e-green) 70%);
  box-shadow:0 0 0 1px var(--shell4f34e-line-strong), inset 0 0 12px rgba(0,0,0,0.35);
  flex-shrink:0;
}
.shell4f34e-brand-badge img{width:100%;height:100%;object-fit:cover;}
.shell4f34e-brand-name{
  font-weight:800;
  letter-spacing:0.4px;
  font-size:19px;
  line-height:1;
  color:var(--shell4f34e-ink);
  text-shadow:0 1px 0 rgba(0,0,0,0.4);
}
.shell4f34e-brand-name em{
  font-style:normal;
  color:var(--shell4f34e-chart);
}
.shell4f34e-header-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.shell4f34e-btn{
  -webkit-appearance:none;
  appearance:none;
  border:0;
  cursor:pointer;
  font-family:inherit;
  font-weight:700;
  font-size:13.5px;
  padding:0 16px;
  height:38px;
  border-radius:var(--shell4f34e-r-pill);
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  min-height:var(--shell4f34e-touch);
}
.shell4f34e-btn-register{
  background:linear-gradient(135deg, var(--shell4f34e-chart), var(--shell4f34e-spring) 55%, var(--shell4f34e-green));
  color:#06210f;
  box-shadow:0 4px 14px rgba(127,255,0,0.28), inset 0 1px 0 rgba(255,255,255,0.35);
}
.shell4f34e-btn-login{
  background:transparent;
  color:var(--shell4f34e-teal);
  border:1px solid var(--shell4f34e-line-strong);
  padding:0 14px;
}
.shell4f34e-btn:active{transform:translateY(1px) scale(0.98);}
.shell4f34e-btn-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  padding:0;
  justify-content:center;
  background:var(--shell4f34e-bg-elev);
  border:1px solid var(--shell4f34e-line);
  color:var(--shell4f34e-teal);
}
.shell4f34e-btn-icon .shell4f34e-bars{
  width:18px;height:14px;position:relative;
}
.shell4f34e-btn-icon .shell4f34e-bars::before,
.shell4f34e-btn-icon .shell4f34e-bars::after,
.shell4f34e-btn-icon .shell4f34e-bars span{
  content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;
  background:currentColor;
}
.shell4f34e-btn-icon .shell4f34e-bars::before{top:0;}
.shell4f34e-btn-icon .shell4f34e-bars span{top:6px;display:block;}
.shell4f34e-btn-icon .shell4f34e-bars::after{bottom:0;}

/* ============================================================
   FULL-HEIGHT MENU LAYER
   ============================================================ */
.shell4f34e-menu{
  position:fixed;
  top:0;right:0;
  height:100vh;
  height:100dvh;
  width:min(86vw, 360px);
  background:linear-gradient(180deg, #0b1c14, #122a1e 60%, #0a1812);
  z-index:80;
  transform:translateX(105%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow:-18px 0 40px rgba(0,0,0,0.55);
  display:flex;
  flex-direction:column;
  border-left:1px solid var(--shell4f34e-line-strong);
}
.shell4f34e-menu[data-open="true"]{transform:translateX(0);}
.shell4f34e-menu-scrim{
  position:fixed;
  inset:0;
  background:rgba(4,9,10,0.65);
  z-index:70;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.shell4f34e-menu-scrim[data-open="true"]{opacity:1;pointer-events:auto;}
.shell4f34e-menu-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 16px 12px;
  border-bottom:1px solid var(--shell4f34e-line);
}
.shell4f34e-menu-head h2{
  margin:0;font-size:16px;color:var(--shell4f34e-chart);font-weight:800;letter-spacing:.5px;
}
.shell4f34e-menu-close{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--shell4f34e-line);
  background:transparent;color:var(--shell4f34e-teal);font-size:20px;line-height:1;cursor:pointer;
}
.shell4f34e-menu-nav{
  list-style:none;margin:0;padding:8px 10px 24px;overflow-y:auto;flex:1;
}
.shell4f34e-menu-nav li{
  margin:2px 0;
}
.shell4f34e-menu-nav a{
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;
  border-radius:12px;
  color:var(--shell4f34e-ink);
  font-size:15px;font-weight:600;
  border:1px solid transparent;
  position:relative;
}
.shell4f34e-menu-nav a::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--shell4f34e-green);
  box-shadow:0 0 8px var(--shell4f34e-spring);
  flex-shrink:0;
}
.shell4f34e-menu-nav a:active{
  background:rgba(127,255,0,0.10);
  border-color:var(--shell4f34e-line-strong);
}
.shell4f34e-menu-nav a[aria-current="page"]{
  background:linear-gradient(90deg, rgba(127,255,0,0.18), transparent);
  border-color:var(--shell4f34e-line-strong);
  color:var(--shell4f34e-chart);
}
.shell4f34e-menu-foot{
  padding:14px 16px 22px;border-top:1px solid var(--shell4f34e-line);
  display:flex;flex-direction:column;gap:10px;
}
.shell4f34e-menu-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:46px;border-radius:14px;font-weight:800;font-size:15px;
  background:linear-gradient(135deg, var(--shell4f34e-chart), var(--shell4f34e-green));
  color:#06210f;border:0;cursor:pointer;width:100%;
  box-shadow:0 6px 18px rgba(127,255,0,0.25);
}

/* ============================================================
   MAIN / SECTIONS
   ============================================================ */
.shell4f34e-main{padding:0 0 8px;}
.shell4f34e-section{
  padding:18px 12px 6px;
}
.shell4f34e-section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  margin-bottom:12px;
  position:relative;
  padding-left:12px;
}
.shell4f34e-section-head::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;
  background:linear-gradient(180deg, var(--shell4f34e-chart), var(--shell4f34e-green));
  border-radius:4px;
}
.shell4f34e-section-title{
  margin:0;font-size:18px;font-weight:800;color:var(--shell4f34e-ink);line-height:1.25;
}
.shell4f34e-section-title em{font-style:normal;color:var(--shell4f34e-spring);}
.shell4f34e-section-sub{
  font-size:12.5px;color:var(--shell4f34e-ink-mute);margin-top:2px;
}
.shell4f34e-section-link{
  font-size:12.5px;color:var(--shell4f34e-teal);font-weight:700;white-space:nowrap;
}
.shell4f34e-section-link::after{content:" ›";color:var(--shell4f34e-chart);}

/* ============================================================
   HERO CAROUSEL
   ============================================================ */
.shell4f34e-hero{
  padding:14px 12px 4px;
}
.shell4f34e-carousel{
  position:relative;
  border-radius:var(--shell4f34e-r-lg);
  overflow:hidden;
  background:#08130d;
  box-shadow:var(--shell4f34e-shadow);
  border:1px solid var(--shell4f34e-line);
}
.shell4f34e-track{
  display:flex;
  transition:transform .42s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.shell4f34e-slide{
  flex:0 0 100%;
  position:relative;
  min-height:172px;
}
.shell4f34e-slide-img{
  width:100%;
  height:200px;
  object-fit:cover;
  filter:saturate(1.08);
}
.shell4f34e-slide-overlay{
  position:absolute;left:14px;right:14px;bottom:12px;
  background:linear-gradient(180deg, transparent, rgba(4,12,8,0.88));
  padding:24px 14px 12px;
  border-radius:0 0 var(--shell4f34e-r-lg) var(--shell4f34e-r-lg);
}
.shell4f34e-slide-tag{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.5px;
  padding:3px 10px;border-radius:var(--shell4f34e-r-pill);
  background:rgba(127,255,0,0.18);color:var(--shell4f34e-chart);
  border:1px solid var(--shell4f34e-line-strong);
  margin-bottom:6px;
}
.shell4f34e-slide-title{
  margin:0;font-size:18px;font-weight:800;color:#fff;line-height:1.25;
}
.shell4f34e-slide-cta{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  height:36px;padding:0 16px;border-radius:var(--shell4f34e-r-pill);
  background:linear-gradient(135deg, var(--shell4f34e-chart), var(--shell4f34e-green));
  color:#06210f;font-weight:800;font-size:13px;border:0;cursor:pointer;
}
.shell4f34e-carousel-dots{
  position:absolute;right:12px;bottom:10px;display:flex;gap:6px;z-index:5;
}
.shell4f34e-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,0.35);border:0;padding:0;cursor:pointer;
  transition:all .25s ease;
}
.shell4f34e-dot[data-active="true"]{
  background:var(--shell4f34e-chart);width:22px;border-radius:6px;
}

/* ============================================================
   QUICK STATS STRIP
   ============================================================ */
.shell4f34e-stats{
  margin:6px 12px 0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}
.shell4f34e-stat{
  background:linear-gradient(180deg, var(--shell4f34e-bg-card), var(--shell4f34e-bg-elev));
  border:1px solid var(--shell4f34e-line);
  border-radius:var(--shell4f34e-r-md);
  padding:10px 8px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.shell4f34e-stat::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, var(--shell4f34e-chart), var(--shell4f34e-spring), transparent);
}
.shell4f34e-stat-num{
  display:block;font-size:18px;font-weight:800;color:var(--shell4f34e-chart);line-height:1.1;
}
.shell4f34e-stat-lbl{
  display:block;font-size:11px;color:var(--shell4f34e-ink-mute);margin-top:2px;
}

/* ============================================================
   GAME GRID — dense thumbnail directory
   320px: 4 cols / 375-430px: 4 cols stable (compact tiles)
   ============================================================ */
.shell4f34e-game-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
}
.shell4f34e-game-tile{
  -webkit-appearance:none;appearance:none;
  background:transparent;border:0;padding:0;margin:0;
  font-family:inherit;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;gap:5px;
  color:inherit;
}
.shell4f34e-game-thumb{
  position:relative;
  aspect-ratio:1/1;
  border-radius:var(--shell4f34e-r-md);
  overflow:hidden;
  background:#0a1812;
  border:1px solid var(--shell4f34e-line);
  box-shadow:0 4px 10px rgba(0,0,0,0.35);
}
.shell4f34e-game-thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .3s ease;
}
.shell4f34e-game-tile:active .shell4f34e-game-thumb img{transform:scale(1.06);}
.shell4f34e-game-tile:active .shell4f34e-game-thumb{
  border-color:var(--shell4f34e-chart);
  box-shadow:0 0 0 2px rgba(127,255,0,0.35);
}
.shell4f34e-game-thumb-tag{
  position:absolute;top:4px;left:4px;
  font-size:9.5px;font-weight:800;letter-spacing:.3px;
  background:linear-gradient(135deg, var(--shell4f34e-chart), var(--shell4f34e-green));
  color:#06210f;padding:2px 6px;border-radius:var(--shell4f34e-r-pill);
}
.shell4f34e-game-thumb-rt{
  position:absolute;bottom:4px;right:4px;
  font-size:9px;font-weight:700;
  background:rgba(4,9,10,0.78);color:var(--shell4f34e-teal);
  padding:1px 5px;border-radius:5px;
  border:1px solid var(--shell4f34e-line);
}
.shell4f34e-game-name{
  font-size:11.5px;line-height:1.25;font-weight:600;color:var(--shell4f34e-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:28px;
}
.shell4f34e-cat-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:18px 12px 10px;
  padding:9px 12px;
  background:linear-gradient(90deg, rgba(127,255,0,0.10), rgba(34,139,34,0.04) 60%, transparent);
  border-left:3px solid var(--shell4f34e-chart);
  border-radius:0 12px 12px 0;
}
.shell4f34e-cat-head h2{
  margin:0;font-size:16px;font-weight:800;color:var(--shell4f34e-ink);
}
.shell4f34e-cat-head h2 em{font-style:normal;color:var(--shell4f34e-spring);}
.shell4f34e-cat-head .shell4f34e-cat-count{
  font-size:11.5px;color:var(--shell4f34e-teal);font-weight:700;
}

/* ============================================================
   CONTENT MODULES — text-first blocks
   ============================================================ */
.shell4f34e-block{
  margin:14px 12px 0;
  background:linear-gradient(180deg, var(--shell4f34e-bg-card), rgba(27,58,43,0.6));
  border:1px solid var(--shell4f34e-line);
  border-radius:var(--shell4f34e-r-lg);
  padding:16px;
  position:relative;
}
.shell4f34e-block::before{
  content:"";position:absolute;top:-1px;left:18px;right:18px;height:2px;
  background:linear-gradient(90deg, transparent, var(--shell4f34e-chart), transparent);
}
.shell4f34e-block-head{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
}
.shell4f34e-block-mark{
  width:30px;height:30px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 30%, var(--shell4f34e-chart), var(--shell4f34e-green) 75%);
  color:#06210f;font-weight:900;font-size:14px;
  box-shadow:0 0 0 1px var(--shell4f34e-line-strong);
}
.shell4f34e-block h3{
  margin:0;font-size:15.5px;font-weight:800;color:var(--shell4f34e-ink);line-height:1.3;
}
.shell4f34e-block h3 em{font-style:normal;color:var(--shell4f34e-spring);}
.shell4f34e-block p{
  margin:8px 0 0;font-size:13.5px;color:var(--shell4f34e-ink-mute);line-height:1.65;
}
.shell4f34e-block p strong{color:var(--shell4f34e-teal);font-weight:700;}
.shell4f34e-block ul{margin:8px 0 0;padding-left:18px;font-size:13.5px;color:var(--shell4f34e-ink-mute);}
.shell4f34e-block ul li{margin:4px 0;}
.shell4f34e-block a.inline-link{color:var(--shell4f34e-chart);border-bottom:1px dashed rgba(127,255,0,0.5);font-weight:700;}

/* RTP table */
.shell4f34e-rtp-table{
  width:100%;border-collapse:collapse;margin-top:10px;font-size:12.5px;
}
.shell4f34e-rtp-table th,.shell4f34e-rtp-table td{
  padding:7px 8px;border-bottom:1px solid var(--shell4f34e-line);text-align:left;
}
.shell4f34e-rtp-table th{
  color:var(--shell4f34e-chart);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.5px;
}
.shell4f34e-rtp-table td{color:var(--shell4f34e-ink);}
.shell4f34e-rtp-table td.num{color:var(--shell4f34e-spring);font-weight:800;text-align:right;}
.shell4f34e-rtp-bar{
  display:inline-block;height:6px;border-radius:3px;
  background:linear-gradient(90deg, var(--shell4f34e-green), var(--shell4f34e-spring));
  vertical-align:middle;
}

/* Tricks list */
.shell4f34e-trick{
  display:flex;gap:10px;padding:10px 0;border-bottom:1px dashed var(--shell4f34e-line);
}
.shell4f34e-trick:last-child{border-bottom:0;}
.shell4f34e-trick-num{
  width:24px;height:24px;border-radius:7px;flex-shrink:0;
  background:var(--shell4f34e-bg-elev);border:1px solid var(--shell4f34e-line-strong);
  color:var(--shell4f34e-chart);font-weight:800;font-size:12px;
  display:flex;align-items:center;justify-content:center;
}
.shell4f34e-trick-body h4{margin:0;font-size:13.5px;color:var(--shell4f34e-ink);font-weight:700;}
.shell4f34e-trick-body p{margin:2px 0 0;font-size:12.5px;color:var(--shell4f34e-ink-mute);line-height:1.55;}

/* Winners */
.shell4f34e-winners{
  margin-top:10px;display:flex;flex-direction:column;gap:8px;
}
.shell4f34e-winner{
  display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;
  padding:8px 10px;border-radius:10px;
  background:rgba(127,255,0,0.05);border:1px solid var(--shell4f34e-line);
}
.shell4f34e-winner-av{
  width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--shell4f34e-teal), var(--shell4f34e-green));
  display:flex;align-items:center;justify-content:center;
  color:#06210f;font-weight:900;font-size:13px;
}
.shell4f34e-winner-meta{min-width:0;}
.shell4f34e-winner-meta strong{display:block;font-size:12.5px;color:var(--shell4f34e-ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.shell4f34e-winner-meta span{font-size:11px;color:var(--shell4f34e-ink-mute);}
.shell4f34e-winner-amt{font-size:13px;font-weight:800;color:var(--shell4f34e-spring);}

/* Entity relationship */
.shell4f34e-entity{
  display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px;
}
.shell4f34e-entity-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;
  padding:8px 10px;border-radius:10px;
  background:rgba(128,203,196,0.06);border:1px solid var(--shell4f34e-line);
}
.shell4f34e-entity-key{
  font-size:11px;font-weight:800;color:var(--shell4f34e-chart);
  padding:3px 8px;border-radius:6px;background:rgba(127,255,0,0.10);
}
.shell4f34e-entity-val{font-size:12.5px;color:var(--shell4f34e-ink);font-weight:600;}
.shell4f34e-entity-rel{font-size:11px;color:var(--shell4f34e-teal);}

/* Direct answer callout */
.shell4f34e-direct{
  margin:14px 12px 0;
  padding:16px;
  border-radius:var(--shell4f34e-r-lg);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(127,255,0,0.18), transparent 60%),
    linear-gradient(135deg, #14332299, #1b3a2b);
  border:1px solid var(--shell4f34e-line-strong);
}
.shell4f34e-direct-label{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.5px;
  color:var(--shell4f34e-chart);margin-bottom:6px;
}
.shell4f34e-direct p{margin:0;font-size:14px;color:var(--shell4f34e-ink);line-height:1.7;}

/* ============================================================
   EXTENDED FOOTER (home-only, two-column directory)
   ============================================================ */
.shell4f34e-ext{
  margin:18px 12px 4px;
  padding:16px;
  border-radius:var(--shell4f34e-r-lg);
  background:linear-gradient(180deg, #0d2017, #0a1812);
  border:1px solid var(--shell4f34e-line);
}
.shell4f34e-ext-intro{
  margin:0 0 14px;font-size:13px;color:var(--shell4f34e-ink-mute);line-height:1.65;
  padding-bottom:12px;border-bottom:1px dashed var(--shell4f34e-line);
}
.shell4f34e-ext-intro strong{color:var(--shell4f34e-spring);font-weight:800;}
.shell4f34e-ext-cols{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.shell4f34e-ext-col h4{
  margin:0 0 8px;font-size:12px;color:var(--shell4f34e-chart);
  text-transform:uppercase;letter-spacing:.8px;font-weight:800;
}
.shell4f34e-ext-col ul{list-style:none;margin:0;padding:0;}
.shell4f34e-ext-col li{margin:5px 0;}
.shell4f34e-ext-col a{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--shell4f34e-teal);font-weight:600;line-height:1.3;
}
.shell4f34e-ext-col a::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--shell4f34e-spring);flex-shrink:0;
}
.shell4f34e-ext-col a.promo{color:var(--shell4f34e-chart);font-weight:800;}
.shell4f34e-ext-promos{
  margin-top:14px;padding-top:12px;border-top:1px dashed var(--shell4f34e-line);
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.shell4f34e-ext-promo-btn{
  height:42px;border-radius:11px;border:1px solid var(--shell4f34e-line-strong);
  background:linear-gradient(135deg, rgba(127,255,0,0.16), rgba(34,139,34,0.10));
  color:var(--shell4f34e-chart);font-weight:800;font-size:12.5px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;
}
.shell4f34e-ext-promo-btn:active{transform:translateY(1px);}
.shell4f34e-ext-disclaimer{
  margin-top:14px;font-size:11px;color:var(--shell4f34e-ink-mute);line-height:1.55;
  padding:10px;border-radius:10px;background:rgba(51,51,51,0.35);
  border-left:3px solid var(--shell4f34e-green);
}

/* ============================================================
   COMMON FOOTER
   ============================================================ */
.shell4f34e-footer{
  padding:18px 14px 12px;
  border-top:1px solid var(--shell4f34e-line);
  background:linear-gradient(180deg, transparent, rgba(4,12,8,0.6));
}
.shell4f34e-foot-copy{
  text-align:center;font-size:11.5px;color:var(--shell4f34e-ink-mute);margin:0;line-height:1.6;
}
.shell4f34e-foot-copy strong{color:var(--shell4f34e-teal);}
.shell4f34e-foot-links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 12px;margin-top:8px;
}
.shell4f34e-foot-links a{
  font-size:11.5px;color:var(--shell4f34e-ink-mute);font-weight:600;
}

/* ============================================================
   BOTTOM NAV — segmented action grid (5 roles)
   ============================================================ */
.shell4f34e-bottom{
  position:fixed;
  left:50%;transform:translateX(-50%);
  bottom:0;
  width:100%;max-width:var(--shell4f34e-max);
  height:var(--shell4f34e-bottom-h);
  background:linear-gradient(180deg, rgba(13,31,23,0.96), rgba(8,18,13,0.99));
  backdrop-filter:blur(10px);
  border-top:1px solid var(--shell4f34e-line-strong);
  z-index:60;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  padding:6px 4px;
  gap:2px;
}
.shell4f34e-nav-item{
  -webkit-appearance:none;appearance:none;
  background:transparent;border:0;padding:4px 2px;margin:0;
  font-family:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--shell4f34e-ink-mute);
  border-radius:10px;
  position:relative;
  min-height:var(--shell4f34e-touch);
  transition:color .15s ease, transform .15s ease;
}
.shell4f34e-nav-item span.lbl{font-size:10px;font-weight:700;line-height:1;}
.shell4f34e-nav-ico{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;font-weight:900;font-size:13px;
  background:rgba(128,203,196,0.08);
  color:var(--shell4f34e-teal);
}
.shell4f34e-nav-item[data-active="true"]{
  color:var(--shell4f34e-chart);
  transform:translateY(-2px);
}
.shell4f34e-nav-item[data-active="true"] .shell4f34e-nav-ico{
  background:linear-gradient(135deg, var(--shell4f34e-chart), var(--shell4f34e-green));
  color:#06210f;
  box-shadow:0 4px 10px rgba(127,255,0,0.30);
}
.shell4f34e-nav-item[data-active="true"]::before{
  content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:22px;height:3px;border-radius:3px;background:var(--shell4f34e-chart);
}
.shell4f34e-nav-item.promo .shell4f34e-nav-ico{
  background:linear-gradient(135deg, rgba(127,255,0,0.18), rgba(34,139,34,0.10));
  color:var(--shell4f34e-chart);
}

/* Help-page layouts use a different reading rhythm from the home directory. */
.shell4f34e-help-intro{padding:18px 14px 6px;}
.shell4f34e-help-intro h1{margin:0;color:var(--shell4f34e-ink);font-size:22px;line-height:1.2;letter-spacing:-.3px;}
.shell4f34e-help-intro p{margin:10px 0 0;color:var(--shell4f34e-ink-mute);font-size:14px;line-height:1.7;}
.shell4f34e-answer{margin:12px 12px 0;padding:15px 16px;border-left:4px solid var(--shell4f34e-chart);background:rgba(127,255,0,.08);border-radius:0 var(--shell4f34e-r-md) var(--shell4f34e-r-md) 0;}
.shell4f34e-answer strong{display:block;color:var(--shell4f34e-chart);font-size:13px;margin-bottom:4px;}
.shell4f34e-answer p{margin:0;color:var(--shell4f34e-ink);font-size:14px;line-height:1.7;}
.shell4f34e-split{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px;}
.shell4f34e-note{padding:11px;border:1px solid var(--shell4f34e-line);background:rgba(128,203,196,.06);border-radius:10px;}
.shell4f34e-note h3{margin:0 0 4px;font-size:13px;color:var(--shell4f34e-teal);line-height:1.3;}
.shell4f34e-note p{margin:0;font-size:12.5px;color:var(--shell4f34e-ink-mute);line-height:1.55;}
.shell4f34e-steps{counter-reset:helpstep;list-style:none;padding:0;margin:10px 0 0;}
.shell4f34e-steps li{counter-increment:helpstep;display:grid;grid-template-columns:29px 1fr;gap:9px;padding:10px 0;border-bottom:1px dashed var(--shell4f34e-line);}
.shell4f34e-steps li::before{content:counter(helpstep);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--shell4f34e-chart);color:#06210f;font-weight:900;font-size:12px;}
.shell4f34e-steps strong{display:block;color:var(--shell4f34e-ink);font-size:13.5px;line-height:1.35;}
.shell4f34e-steps span{display:block;color:var(--shell4f34e-ink-mute);font-size:12.5px;line-height:1.55;margin-top:3px;}
.shell4f34e-question-list{margin:0;padding:0;list-style:none;}
.shell4f34e-question-list li{padding:12px 0;border-bottom:1px solid var(--shell4f34e-line);}
.shell4f34e-question-list li:last-child{border-bottom:0;}
.shell4f34e-question-list strong{display:block;color:var(--shell4f34e-teal);font-size:13.5px;line-height:1.45;}
.shell4f34e-question-list p{margin:5px 0 0;color:var(--shell4f34e-ink-mute);font-size:13px;line-height:1.65;}
.shell4f34e-checklist{display:grid;gap:7px;margin-top:10px;}
.shell4f34e-check{display:flex;gap:8px;align-items:flex-start;padding:9px 10px;border-radius:9px;background:rgba(0,255,127,.05);border:1px solid var(--shell4f34e-line);color:var(--shell4f34e-ink-mute);font-size:12.8px;line-height:1.5;}
.shell4f34e-check::before{content:"✓";color:var(--shell4f34e-chart);font-weight:900;flex:0 0 auto;}
.shell4f34e-alert{margin-top:11px;padding:11px 12px;border:1px solid rgba(255,180,80,.35);background:rgba(160,90,20,.12);border-radius:10px;color:#f4d3a0;font-size:12.5px;line-height:1.6;}
.shell4f34e-promo-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
.shell4f34e-promo-row button{min-height:44px;border:1px solid var(--shell4f34e-line-strong);border-radius:10px;background:rgba(127,255,0,.08);color:var(--shell4f34e-chart);font:700 12px inherit;cursor:pointer;padding:6px;}
.shell4f34e-breadcrumb{margin:4px 12px 0;color:var(--shell4f34e-ink-mute);font-size:11.5px;}
.shell4f34e-breadcrumb a{color:var(--shell4f34e-teal);}
@media (max-width:360px){.shell4f34e-split{grid-template-columns:1fr;}.shell4f34e-help-intro h1{font-size:20px;}}

/* utility */
.shell4f34e-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* compact breakpoint — stable canvas up to 430px */
@media (max-width:430px){
  .shell4f34e-slide-img{height:188px;}
}
@media (max-width:360px){
  body{font-size:14px;}
  .shell4f34e-game-grid{gap:6px;}
  .shell4f34e-game-name{font-size:10.5px;}
  .shell4f34e-section-title{font-size:16px;}
}