@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   hitclub walchum — mobile-first base surface
   prefix: shell6f124-
   design tone: monospace accent over regular vietnamese body,
                stroke-led restrained corners, horizontal
                icon-name game bars, step-progression rhythm,
                restrained fade-in feedback, compact dual CTAs.
   ============================================================ */

:root{
  /* palette */
  --shell6f124-slate:#34495E;
  --shell6f124-slate-deep:#2a3b4d;
  --shell6f124-slate-darker:#1d2935;
  --shell6f124-slate-line:#3e556c;
  --shell6f124-orange:#FFB347;
  --shell6f124-mint:#B2DFDB;
  --shell6f124-teal:#20B2AA;
  --shell6f124-gold:#FFAA00;
  --shell6f124-ink:#eaf6f4;
  --shell6f124-ink-muted:#9db3c4;
  --shell6f124-ink-soft:#7e94a6;
  --shell6f124-line:rgba(178,223,219,.16);
  --shell6f124-line-strong:rgba(178,223,219,.32);
  --shell6f124-shadow:0 14px 30px rgba(0,0,0,.28);

  /* type */
  --shell6f124-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;
  --shell6f124-body:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* shape */
  --shell6f124-canvas:430px;
  --shell6f124-radius:6px;
  --shell6f124-radius-lg:10px;
  --shell6f124-stroke:1px;
  --shell6f124-stroke-strong:2px;

  /* spacing */
  --shell6f124-gap:14px;
  --shell6f124-pad:16px;
  --shell6f124-top-h:60px;
  --shell6f124-dock-h:64px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--shell6f124-body);
  background:#16212c;
  color:var(--shell6f124-ink);
  line-height:1.6;
  font-size:15px;
  min-height:100vh;
  background-image:
    radial-gradient(1200px 600px at 50% -10%, rgba(32,178,170,.07), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(178,223,219,.018) 23px 24px);
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
:focus-visible{outline:2px solid var(--shell6f124-orange);outline-offset:2px;border-radius:3px;}

/* centered mobile canvas, persists on wide screens */
.shell6f124-canvas{
  position:relative;
  max-width:var(--shell6f124-canvas);
  margin:0 auto;
  background:linear-gradient(180deg,#324a60 0%, var(--shell6f124-slate) 18%, var(--shell6f124-slate) 100%);
  min-height:100vh;
  box-shadow:0 0 60px rgba(0,0,0,.5);
  overflow:hidden;
}
.shell6f124-skip{
  position:absolute;left:-999px;top:8px;z-index:200;
  background:var(--shell6f124-gold);color:#1d2935;
  padding:8px 12px;border-radius:4px;font-weight:600;
}
.shell6f124-skip:focus{left:12px;}

/* ============ asymmetric brand header ============ */
.shell6f124-topbar{
  position:sticky;top:0;z-index:90;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  padding:10px var(--shell6f124-pad);
  min-height:var(--shell6f124-top-h);
  background:linear-gradient(100deg,#243648 0%, #2c4359 60%, #2a3f54 100%);
  border-bottom:var(--shell6f124-stroke) solid var(--shell6f124-line-strong);
}
.shell6f124-brand{
  display:flex;align-items:center;gap:9px;
  border:var(--shell6f124-stroke) solid var(--shell6f124-line);
  border-radius:var(--shell6f124-radius);
  padding:5px 10px 5px 5px;
  background:rgba(29,41,53,.45);
}
.shell6f124-brand-logo{
  width:38px;height:38px;
  border-radius:5px;
  border:var(--shell6f124-stroke) solid var(--shell6f124-orange);
  object-fit:cover;
  flex:0 0 auto;
  background:#0f1722;
}
.shell6f124-brand-name{
  font-weight:800;
  font-size:15px;
  letter-spacing:.2px;
  color:var(--shell6f124-ink);
  line-height:1.05;
  font-family:var(--shell6f124-mono);
  text-transform:lowercase;
}
.shell6f124-brand-name b{color:var(--shell6f124-orange);font-weight:800;}

/* compact dual CTA group */
.shell6f124-actions{display:flex;align-items:center;gap:7px;}
.shell6f124-btn{
  font-family:var(--shell6f124-body);
  font-weight:600;
  font-size:13px;
  letter-spacing:.2px;
  padding:9px 14px;
  min-height:40px;
  border-radius:var(--shell6f124-radius);
  border:var(--shell6f124-stroke) solid transparent;
  transition:transform .14s ease, background .14s ease, border-color .14s ease;
  white-space:nowrap;
}
.shell6f124-btn--register{
  background:linear-gradient(180deg,var(--shell6f124-gold),#e89800);
  color:#1d2935;
  border-color:#ffd680;
  box-shadow:0 4px 0 #a76a00;
}
.shell6f124-btn--login{
  background:transparent;
  color:var(--shell6f124-mint);
  border:var(--shell6f124-stroke-strong) solid var(--shell6f124-teal);
}
.shell6f124-btn:active{transform:translateY(2px);}
.shell6f124-btn--register:active{box-shadow:0 1px 0 #a76a00;}

.shell6f124-menu-btn{
  width:40px;height:40px;
  display:grid;place-items:center;
  border:var(--shell6f124-stroke) solid var(--shell6f124-line-strong);
  border-radius:var(--shell6f124-radius);
  background:rgba(29,41,53,.5);
}
.shell6f124-menu-btn span{
  display:block;width:18px;height:2px;background:var(--shell6f124-mint);
  border-radius:2px;margin:3px 0;transition:.2s;
}
.shell6f124-menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.shell6f124-menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0;}
.shell6f124-menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

/* ============ full-height menu layer ============ */
.shell6f124-menu{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  max-width:var(--shell6f124-canvas);
  margin:0 auto;
  background:linear-gradient(160deg,#1d2935 0%, #243a4e 100%);
  z-index:120;
  transform:translateY(-100%);
  transition:transform .26s cubic-bezier(.2,.7,.2,1);
  display:flex;flex-direction:column;
  overflow-y:auto;
}
.shell6f124-menu[data-open="true"]{transform:translateY(0);}
.shell6f124-menu-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px var(--shell6f124-pad);
  border-bottom:var(--shell6f124-stroke) solid var(--shell6f124-line);
}
.shell6f124-menu-head h2{
  font-family:var(--shell6f124-mono);
  font-size:13px;font-weight:500;
  color:var(--shell6f124-ink-muted);
  letter-spacing:2px;text-transform:uppercase;
}
.shell6f124-menu-close{
  width:40px;height:40px;
  display:grid;place-items:center;
  border:var(--shell6f124-stroke) solid var(--shell6f124-line-strong);
  border-radius:var(--shell6f124-radius);
  color:var(--shell6f124-mint);font-size:22px;line-height:1;
}
.shell6f124-menu-list{list-style:none;padding:8px var(--shell6f124-pad) 24px;}
.shell6f124-menu-item{
  display:flex;align-items:center;gap:14px;
  padding:15px 12px;
  border-bottom:var(--shell6f124-stroke) dashed var(--shell6f124-line);
  color:var(--shell6f124-ink);
  transition:background .14s, padding .14s;
}
.shell6f124-menu-item:active{background:rgba(32,178,170,.1);padding-left:18px;}
.shell6f124-menu-num{
  font-family:var(--shell6f124-mono);
  font-size:12px;color:var(--shell6f124-teal);
  min-width:30px;
}
.shell6f124-menu-label{flex:1;font-weight:600;font-size:15px;}
.shell6f124-menu-arrow{color:var(--shell6f124-ink-soft);font-family:var(--shell6f124-mono);font-size:14px;}
.shell6f124-menu-cta{
  margin:18px var(--shell6f124-pad) 8px;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.shell6f124-menu-foot{
  padding:18px var(--shell6f124-pad);
  font-size:12px;color:var(--shell6f124-ink-soft);
  border-top:var(--shell6f124-stroke) solid var(--shell6f124-line);
  font-family:var(--shell6f124-mono);letter-spacing:.4px;
}

/* ============ stage / carousel ============ */
.shell6f124-stage{
  position:relative;
  margin:14px var(--shell6f124-pad) 4px;
  border:var(--shell6f124-stroke) solid var(--shell6f124-line-strong);
  border-radius:var(--shell6f124-radius-lg);
  overflow:hidden;
  background:#0f1722;
}
.shell6f124-stage-track{
  display:flex;
  transition:transform .42s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
.shell6f124-slide{
  flex:0 0 100%;
  position:relative;
  display:block;
}
.shell6f124-slide img{
  width:100%;height:190px;object-fit:cover;
  filter:saturate(1.05);
}
.shell6f124-slide-cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:28px 14px 12px;
  background:linear-gradient(0deg, rgba(13,20,28,.92) 0%, rgba(13,20,28,.4) 70%, transparent 100%);
  display:flex;flex-direction:column;gap:4px;
}
.shell6f124-slide-tick{
  font-family:var(--shell6f124-mono);font-size:10px;
  color:var(--shell6f124-gold);letter-spacing:2px;
  text-transform:uppercase;
}
.shell6f124-slide-title{font-size:15px;font-weight:700;color:#fff;line-height:1.25;}
.shell6f124-slide-sub{font-size:12px;color:var(--shell6f124-mint);}
.shell6f124-stage-ctrl{
  position:absolute;top:10px;right:10px;
  display:flex;gap:6px;align-items:center;
  background:rgba(13,20,28,.6);
  border:var(--shell6f124-stroke) solid var(--shell6f124-line);
  border-radius:30px;padding:4px 9px;
  font-family:var(--shell6f124-mono);font-size:10px;color:var(--shell6f124-mint);
}
.shell6f124-stage-dots{
  display:flex;gap:6px;justify-content:center;
  padding:10px 0 4px;
}
.shell6f124-stage-dot{
  width:18px;height:4px;border-radius:3px;
  background:var(--shell6f124-slate-line);
  transition:background .2s, width .2s;
  border:none;padding:0;
}
.shell6f124-stage-dot[aria-current="true"]{background:var(--shell6f124-gold);width:26px;}

/* ============ hero quick panel ============ */
.shell6f124-hero-panel{
  margin:8px var(--shell6f124-pad) 4px;
  border:var(--shell6f124-stroke) solid var(--shell6f124-line);
  border-left:3px solid var(--shell6f124-orange);
  border-radius:var(--shell6f124-radius);
  padding:12px 14px;
  background:rgba(29,41,53,.5);
}
.shell6f124-hero-panel p{font-size:13px;color:var(--shell6f124-ink-muted);line-height:1.55;}
.shell6f124-hero-panel strong{color:var(--shell6f124-mint);}
.shell6f124-hero-cta{
  margin-top:10px;display:flex;gap:8px;
}
.shell6f124-hero-cta .shell6f124-btn{flex:1;font-size:12.5px;padding:8px 10px;}

/* ============ main ============ */
.shell6f124-main{
  padding:6px var(--shell6f124-pad) calc(var(--shell6f124-dock-h) + 28px);
}
.shell6f124-h1{
  font-size:22px;font-weight:800;line-height:1.22;
  margin:14px 0 4px;color:var(--shell6f124-ink);
  letter-spacing:-.2px;
}
.shell6f124-h1 em{font-style:normal;color:var(--shell6f124-orange);}
.shell6f124-lede{font-size:13.5px;color:var(--shell6f124-ink-muted);margin-bottom:8px;}

/* ============ section frame ============ */
.shell6f124-section{margin:22px 0 6px;}
.shell6f124-sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  margin-bottom:11px;
  padding-bottom:8px;
  border-bottom:var(--shell6f124-stroke) dashed var(--shell6f124-line-strong);
}
.shell6f124-sec-head-l{display:flex;flex-direction:column;gap:2px;}
.shell6f124-sec-tick{
  font-family:var(--shell6f124-mono);font-size:11px;
  color:var(--shell6f124-teal);letter-spacing:2px;text-transform:uppercase;
}
.shell6f124-sec-title{
  font-size:17px;font-weight:700;color:var(--shell6f124-ink);
  letter-spacing:.1px;
}
.shell6f124-sec-title a{border-bottom:2px solid transparent;transition:.15s;}
.shell6f124-sec-title a:hover{border-color:var(--shell6f124-orange);}
.shell6f124-sec-more{
  font-family:var(--shell6f124-mono);font-size:11px;
  color:var(--shell6f124-gold);
  border:var(--shell6f124-stroke) solid var(--shell6f124-gold);
  padding:5px 8px;border-radius:4px;
  white-space:nowrap;
}
.shell6f124-sec-meta{
  font-family:var(--shell6f124-mono);font-size:10px;
  color:var(--shell6f124-ink-soft);letter-spacing:1px;
}

/* ============ game grid: horizontal icon-name bars (2-col) ============ */
.shell6f124-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}
.shell6f124-game{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px;
  border:var(--shell6f124-stroke) solid var(--shell6f124-line);
  border-left:3px solid var(--shell6f124-teal);
  border-radius:var(--shell6f124-radius);
  background:linear-gradient(100deg,rgba(29,41,53,.7),rgba(29,41,53,.35));
  transition:transform .14s, border-color .14s, background .14s;
  min-height:54px;
}
.shell6f124-game:active{
  transform:translateY(-2px);
  border-left-color:var(--shell6f124-orange);
  background:rgba(32,178,170,.12);
}
.shell6f124-game-ico{
  flex:0 0 40px;width:40px;height:40px;
  border-radius:5px;overflow:hidden;
  border:var(--shell6f124-stroke) solid var(--shell6f124-line-strong);
  background:#0f1722;
}
.shell6f124-game-ico img{width:100%;height:100%;object-fit:cover;}
.shell6f124-game-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.shell6f124-game-name{
  font-size:12px;font-weight:600;color:var(--shell6f124-ink);
  line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.shell6f124-game-tag{
  font-family:var(--shell6f124-mono);font-size:9px;
  color:var(--shell6f124-teal);letter-spacing:1px;text-transform:uppercase;
}
.shell6f124-game-arrow{
  font-family:var(--shell6f124-mono);font-size:14px;color:var(--shell6f124-gold);
  flex:0 0 auto;
}

/* compact chips row for category navigation */
.shell6f124-chips{
  display:flex;gap:7px;overflow-x:auto;
  padding:4px 0 10px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.shell6f124-chips::-webkit-scrollbar{display:none;}
.shell6f124-chip{
  flex:0 0 auto;
  font-family:var(--shell6f124-mono);font-size:11px;
  color:var(--shell6f124-mint);letter-spacing:.5px;
  border:var(--shell6f124-stroke) solid var(--shell6f124-line-strong);
  border-radius:30px;padding:6px 12px;
  background:rgba(29,41,53,.5);
  white-space:nowrap;
}
.shell6f124-chip[data-active="true"]{
  background:var(--shell6f124-gold);color:#1d2935;border-color:var(--shell6f124-gold);font-weight:700;
}

/* ============ content modules (step-progression rhythm) ============ */
.shell6f124-block{
  margin:18px 0 4px;
  border:var(--shell6f124-stroke) solid var(--shell6f124-line);
  border-radius:var(--shell6f124-radius-lg);
  background:rgba(29,41,53,.45);
  overflow:hidden;
}
.shell6f124-block-head{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;
  border-bottom:var(--shell6f124-stroke) solid var(--shell6f124-line);
  background:linear-gradient(100deg,rgba(32,178,170,.1),transparent);
}
.shell6f124-block-num{
  font-family:var(--shell6f124-mono);font-size:11px;font-weight:600;
  color:#1d2935;background:var(--shell6f124-gold);
  padding:3px 7px;border-radius:3px;letter-spacing:1px;
}
.shell6f124-block-title{font-size:15px;font-weight:700;color:var(--shell6f124-ink);}
.shell6f124-block-body{padding:12px 14px 14px;font-size:13.5px;color:var(--shell6f124-ink-muted);line-height:1.62;}
.shell6f124-block-body p{margin-bottom:8px;}
.shell6f124-block-body p:last-child{margin-bottom:0;}
.shell6f124-block-body strong{color:var(--shell6f124-mint);}
.shell6f124-block-body a{color:var(--shell6f124-orange);border-bottom:1px dashed var(--shell6f124-orange);}

.shell6f124-steps{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:4px;}
.shell6f124-steps li{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  padding:9px 10px;border:var(--shell6f124-stroke) dashed var(--shell6f124-line);border-radius:5px;
}
.shell6f124-steps b{font-family:var(--shell6f124-mono);color:var(--shell6f124-teal);font-size:12px;font-weight:600;}
.shell6f124-steps span{font-size:13px;color:var(--shell6f124-ink-muted);line-height:1.5;}

.shell6f124-stat-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0;
}
.shell6f124-stat{
  border:var(--shell6f124-stroke) solid var(--shell6f124-line);border-radius:5px;
  padding:9px 6px;text-align:center;background:rgba(13,20,28,.4);
}
.shell6f124-stat-num{font-family:var(--shell6f124-mono);font-size:16px;font-weight:600;color:var(--shell6f124-orange);}
.shell6f124-stat-lbl{font-size:10px;color:var(--shell6f124-ink-soft);letter-spacing:.5px;margin-top:2px;}

/* testimonial rows */
.shell6f124-quote{
  border:var(--shell6f124-stroke) solid var(--shell6f124-line);
  border-left:3px solid var(--shell6f124-orange);
  border-radius:5px;
  padding:10px 12px;margin-top:10px;
  background:rgba(13,20,28,.35);
}
.shell6f124-quote-text{font-size:13px;color:var(--shell6f124-ink);line-height:1.55;font-style:italic;}
.shell6f124-quote-by{font-family:var(--shell6f124-mono);font-size:10px;color:var(--shell6f124-teal);margin-top:5px;letter-spacing:1px;}

/* faq */
.shell6f124-faq{list-style:none;}
.shell6f124-faq li{
  border-bottom:var(--shell6f124-stroke) dashed var(--shell6f124-line);
  padding:10px 0;
}
.shell6f124-faq li:last-child{border-bottom:none;}
.shell6f124-faq summary{
  font-weight:600;font-size:13.5px;color:var(--shell6f124-mint);cursor:pointer;
  list-style:none;position:relative;padding-left:20px;line-height:1.4;
}
.shell6f124-faq summary::-webkit-details-marker{display:none;}
.shell6f124-faq summary::before{
  content:">";position:absolute;left:0;top:0;
  font-family:var(--shell6f124-mono);color:var(--shell6f124-orange);font-size:13px;
}
.shell6f124-faq details[open] summary::before{content:"v";}
.shell6f124-faq p{font-size:12.5px;color:var(--shell6f124-ink-muted);margin-top:6px;padding-left:20px;line-height:1.55;}

/* requirements checklist */
.shell6f124-check{list-style:none;}
.shell6f124-check li{
  display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;
  padding:7px 0;border-bottom:var(--shell6f124-stroke) dotted var(--shell6f124-line);
  font-size:13px;color:var(--shell6f124-ink-muted);line-height:1.5;
}
.shell6f124-check li:last-child{border-bottom:none;}
.shell6f124-check li::before{
  content:"[ ]";font-family:var(--shell6f124-mono);color:var(--shell6f124-teal);font-size:12px;
}

/* inline promo link inside body */
.shell6f124-link{
  color:var(--shell6f124-orange);
  border-bottom:1px dashed var(--shell6f124-orange);
  font-weight:600;
}

/* ============ extended footer ============ */
.shell6f124-ext{
  margin:24px 0 6px;
  border-top:var(--shell6f124-stroke-strong) solid var(--shell6f124-teal);
  padding-top:16px;
}
.shell6f124-ext-block{margin-bottom:18px;}
.shell6f124-ext-h{
  font-family:var(--shell6f124-mono);font-size:11px;font-weight:600;
  color:var(--shell6f124-teal);letter-spacing:2px;text-transform:uppercase;
  margin-bottom:8px;display:flex;align-items:center;gap:7px;
}
.shell6f124-ext-h::before{content:"";width:14px;height:2px;background:var(--shell6f124-gold);display:inline-block;}
.shell6f124-ext-promos{
  display:grid;grid-template-columns:1fr;gap:8px;
}
.shell6f124-ext-promo{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  border:var(--shell6f124-stroke) solid var(--shell6f124-line);
  border-radius:var(--shell6f124-radius);
  padding:10px 12px;background:rgba(29,41,53,.55);
  transition:transform .14s, border-color .14s;
}
.shell6f124-ext-promo:active{transform:translateY(-1px);border-color:var(--shell6f124-orange);}
.shell6f124-ext-promo-num{font-family:var(--shell6f124-mono);font-size:11px;color:var(--shell6f124-gold);}
.shell6f124-ext-promo-txt{font-size:13px;color:var(--shell6f124-ink);font-weight:600;line-height:1.3;}
.shell6f124-ext-promo-txt small{display:block;font-size:11px;color:var(--shell6f124-ink-soft);font-weight:400;margin-top:1px;}
.shell6f124-ext-promo-go{font-family:var(--shell6f124-mono);font-size:13px;color:var(--shell6f124-mint);}

.shell6f124-ext-brand{font-size:13px;color:var(--shell6f124-ink-muted);line-height:1.6;}
.shell6f124-ext-brand strong{color:var(--shell6f124-mint);}

.shell6f124-dir{
  display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;
  list-style:none;
}
.shell6f124-dir li a{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--shell6f124-mint);
  padding:5px 0;border-bottom:var(--shell6f124-stroke) dotted var(--shell6f124-line);
}
.shell6f124-dir li a::before{
  content:"->";font-family:var(--shell6f124-mono);color:var(--shell6f124-gold);font-size:11px;
}
.shell6f124-ext-disc{
  border:var(--shell6f124-stroke) dashed var(--shell6f124-line);
  border-radius:5px;padding:10px 12px;
  font-size:11.5px;color:var(--shell6f124-ink-soft);line-height:1.55;
  font-family:var(--shell6f124-mono);
}

/* ============ generic footer ============ */
.shell6f124-foot{
  border-top:var(--shell6f124-stroke) solid var(--shell6f124-line-strong);
  padding:14px var(--shell6f124-pad) 8px;
  text-align:center;
}
.shell6f124-foot-copy{
  font-family:var(--shell6f124-mono);font-size:11px;
  color:var(--shell6f124-ink-soft);letter-spacing:.5px;
}

/* ============ mobile dock (5 roles) ============ */
.shell6f124-dock{
  position:fixed;
  left:50%;transform:translateX(-50%);
  bottom:0;
  width:100%;max-width:var(--shell6f124-canvas);
  height:var(--shell6f124-dock-h);
  z-index:95;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:stretch;
  background:linear-gradient(180deg,#233446 0%, #1a2837 100%);
  border-top:var(--shell6f124-stroke-strong) solid var(--shell6f124-gold);
  box-shadow:0 -6px 18px rgba(0,0,0,.32);
}
.shell6f124-dock-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;
  padding:6px 2px 4px;
  color:var(--shell6f124-ink-muted);
  position:relative;
  transition:transform .14s, color .14s;
}
.shell6f124-dock-item:active{transform:translateY(-2px);}
.shell6f124-dock-item[aria-current="page"]{color:var(--shell6f124-gold);}
.shell6f124-dock-item[aria-current="page"]::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:24px;height:3px;background:var(--shell6f124-gold);border-radius:0 0 3px 3px;
}
.shell6f124-dock-ico{
  width:26px;height:26px;display:grid;place-items:center;
}
.shell6f124-dock-ico svg{width:22px;height:22px;display:block;}
.shell6f124-dock-lbl{font-size:10px;font-weight:600;letter-spacing:.2px;line-height:1;}
.shell6f124-dock-item--promo .shell6f124-dock-lbl{color:var(--shell6f124-orange);}
.shell6f124-dock-badge{
  position:absolute;top:4px;right:50%;margin-right:-16px;
  background:var(--shell6f124-orange);color:#1d2935;
  font-family:var(--shell6f124-mono);font-size:8px;font-weight:700;
  border-radius:8px;padding:1px 4px;letter-spacing:.5px;
}

/* ============ animations ============ */
@keyframes shell6f124-rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.shell6f124-rise{opacity:0;animation:shell6f124-rise .5s ease forwards;}
.shell6f124-rise[data-delay="1"]{animation-delay:.06s;}
.shell6f124-rise[data-delay="2"]{animation-delay:.12s;}
.shell6f124-rise[data-delay="3"]{animation-delay:.18s;}
.shell6f124-rise[data-delay="4"]{animation-delay:.24s;}

@keyframes shell6f124-pulse{0%,100%{opacity:1;}50%{opacity:.45;}}
.shell6f124-live{font-family:var(--shell6f124-mono);font-size:10px;color:var(--shell6f124-gold);letter-spacing:1px;}
.shell6f124-live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--shell6f124-orange);margin-right:5px;vertical-align:middle;animation:shell6f124-pulse 1.4s infinite;}

/* ============ help-page additions ============ */
.shell6f124-help-intro{
  margin:14px 0 18px;padding:14px;
  border:var(--shell6f124-stroke) solid var(--shell6f124-line-strong);
  border-top:3px solid var(--shell6f124-orange);
  background:linear-gradient(135deg,rgba(29,41,53,.72),rgba(32,178,170,.08));
}
.shell6f124-help-intro p{font-size:13.5px;color:var(--shell6f124-ink-muted);margin-top:7px;}
.shell6f124-answer{
  padding:13px 14px;margin:14px 0;
  border-left:4px solid var(--shell6f124-gold);
  background:rgba(13,20,28,.48);
  color:var(--shell6f124-mint);font-size:13.5px;line-height:1.62;
}
.shell6f124-action-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0;}
.shell6f124-action-pair .shell6f124-btn{width:100%;min-height:44px;padding:8px 6px;}
.shell6f124-path{counter-reset:shell6f124-path;display:flex;flex-direction:column;gap:12px;list-style:none;}
.shell6f124-path li{counter-increment:shell6f124-path;position:relative;padding:12px 12px 12px 48px;border:1px solid var(--shell6f124-line);background:rgba(29,41,53,.5);min-height:58px;}
.shell6f124-path li::before{content:counter(shell6f124-path,decimal-leading-zero);position:absolute;left:10px;top:12px;font-family:var(--shell6f124-mono);font-size:12px;color:#1d2935;background:var(--shell6f124-orange);padding:4px 5px;border-radius:3px;}
.shell6f124-path li::after{content:"";position:absolute;left:25px;bottom:-13px;width:1px;height:12px;background:var(--shell6f124-teal);}
.shell6f124-path li:last-child::after{display:none;}
.shell6f124-path strong{display:block;color:var(--shell6f124-ink);font-size:13.5px;margin-bottom:3px;}
.shell6f124-path span{display:block;color:var(--shell6f124-ink-muted);font-size:12.5px;line-height:1.55;}
.shell6f124-matrix{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0;}
.shell6f124-matrix article{border:1px solid var(--shell6f124-line);padding:10px;background:rgba(13,20,28,.34);}
.shell6f124-matrix h3{font-family:var(--shell6f124-mono);font-size:11px;color:var(--shell6f124-orange);margin-bottom:5px;}
.shell6f124-matrix p{font-size:12px!important;margin:0!important;line-height:1.5;}
.shell6f124-callout{display:flex;gap:10px;align-items:flex-start;padding:11px;margin:10px 0;border:1px dashed var(--shell6f124-line-strong);background:rgba(32,178,170,.06);}
.shell6f124-callout-mark{font-family:var(--shell6f124-mono);font-weight:700;color:var(--shell6f124-gold);flex:0 0 auto;}
.shell6f124-tip-rail{display:flex;gap:9px;overflow-x:auto;padding:3px 0 10px;scroll-snap-type:x mandatory;scrollbar-width:none;}
.shell6f124-tip-rail::-webkit-scrollbar{display:none;}
.shell6f124-tip-card{flex:0 0 78%;scroll-snap-align:start;border:1px solid var(--shell6f124-line);border-top:3px solid var(--shell6f124-teal);padding:12px;background:rgba(29,41,53,.62);}
.shell6f124-tip-card b{display:block;color:var(--shell6f124-orange);font-family:var(--shell6f124-mono);font-size:11px;margin-bottom:6px;}
.shell6f124-tip-card p{font-size:12.5px;color:var(--shell6f124-ink-muted);line-height:1.55;}
.shell6f124-do-dont{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.shell6f124-do-dont section{padding:10px;border:1px solid var(--shell6f124-line);background:rgba(13,20,28,.35);}
.shell6f124-do-dont h3{font-family:var(--shell6f124-mono);font-size:11px;margin-bottom:7px;}
.shell6f124-do-dont section:first-child h3{color:var(--shell6f124-teal);}
.shell6f124-do-dont section:last-child h3{color:var(--shell6f124-orange);}
.shell6f124-do-dont ul{list-style:none;display:flex;flex-direction:column;gap:7px;}
.shell6f124-do-dont li{font-size:12px;color:var(--shell6f124-ink-muted);line-height:1.45;padding-left:12px;position:relative;}
.shell6f124-do-dont li::before{content:"·";position:absolute;left:0;color:var(--shell6f124-gold);}
.shell6f124-promo-line{width:100%;min-height:44px;margin:9px 0;padding:10px 12px;text-align:left;border:1px solid var(--shell6f124-orange);background:rgba(255,179,71,.08);color:var(--shell6f124-orange);font-weight:600;font-size:13px;}
.shell6f124-promo-line::after{content:"  ›";font-family:var(--shell6f124-mono);}
.shell6f124-compact-note{font-size:11.5px;color:var(--shell6f124-ink-soft);font-family:var(--shell6f124-mono);line-height:1.55;margin:10px 0;}

/* visibility helper for JS */
.shell6f124-hidden{display:none !important;}

/* responsive fine-tune, always inside 430 canvas */
@media (max-width:360px){
  .shell6f124-grid{gap:6px;}
  .shell6f124-game-ico{flex-basis:36px;width:36px;height:36px;}
  .shell6f124-game-name{font-size:11.5px;}
  .shell6f124-h1{font-size:20px;}
  .shell6f124-stat-row{grid-template-columns:1fr 1fr 1fr;}
}
@media (min-width:375px){
  .shell6f124-slide img{height:208px;}
  .shell6f124-grid{gap:9px;}
  .shell6f124-dir{grid-template-columns:1fr 1fr;}
}

/* keep wide screens honest: canvas stays centered, sides dimmed */
@media (min-width:480px){
  body::before{
    content:"";position:fixed;inset:0;
    background:radial-gradient(800px 500px at 50% 0%, rgba(32,178,170,.05), transparent 60%);
    pointer-events:none;z-index:0;
  }
  .shell6f124-canvas{border-left:1px solid rgba(0,0,0,.3);border-right:1px solid rgba(0,0,0,.3);}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
  .shell6f124-rise{opacity:1;}
}