/* ============================================================
   $COAL — landing site (pixel-game skin)
   Immersive mine world. Stone/wood frames, gold studs, flora deco.
   ============================================================ */
.site{ overflow-x:clip; }
html:has(.site-body), html.site-html{ height:auto; overflow:visible; }
body.site-body{ height:auto; min-height:100%; overflow-x:clip; overflow-y:visible; background:var(--void); }

/* ---------- nav ---------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:60; height:60px; display:flex; align-items:center; gap:22px; padding:0 22px;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.13) 0 38px, rgba(0,0,0,0) 38px 40px), linear-gradient(180deg,#3a2817,#1d1308);
  border-bottom:3px solid #0d0a06; box-shadow:inset 0 2px 0 rgba(255,255,255,.06), 0 4px 0 #0d0a06, 0 8px 20px rgba(0,0,0,.5); }
.nav.solid{ box-shadow:inset 0 2px 0 rgba(255,255,255,.06), 0 4px 0 #0d0a06, 0 10px 26px rgba(0,0,0,.7); }
.nav-logo{ height:32px; cursor:pointer; filter:drop-shadow(0 2px 3px rgba(0,0,0,.8)); }
.nav-links{ display:flex; gap:20px; margin-left:14px; }
.nav-links a{ font-family:var(--f-ui); font-weight:600; font-size:14.5px; color:var(--bone); text-decoration:none; transition:color .15s; white-space:nowrap; text-shadow:0 1px 0 rgba(0,0,0,.5); }
.nav-links a:hover{ color:var(--gold-bright); }
.nav-cta{ margin-left:auto; display:flex; gap:10px; align-items:center; }
@media (max-width:820px){ .nav-links{ display:none; } }

/* ---------- section scaffold ---------- */
.sec{ position:relative; padding:104px 26px; }
.wrap{ max-width:1180px; margin:0 auto; position:relative; z-index:2; }
.sec-kicker{ display:inline-flex; align-items:center; gap:9px; margin-bottom:16px;
  background:rgba(8,6,4,.5); border:2px solid var(--frame-edge); border-radius:20px; padding:6px 13px; }
.sec-kicker .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold); }
.sec-kicker .label{ color:var(--gold-bright); font-size:9px; }
.sec-h{ font-family:var(--f-display); font-weight:400; letter-spacing:.01em; line-height:.98;
  font-size:clamp(38px,5.6vw,68px); color:var(--bone); text-shadow:0 3px 0 #2a2018, 0 4px 2px rgba(0,0,0,.4); }
.sec-h .gold{ color:var(--gold-bright); text-shadow:0 3px 0 #6b3f1a, 0 4px 2px rgba(0,0,0,.4); }
.sec-h .gem{ color:var(--diamond-glow); text-shadow:0 3px 0 #1c6b6b, 0 4px 2px rgba(0,0,0,.4); }
.sec-lead{ font-family:var(--f-ui); font-size:clamp(15px,1.5vw,18px); color:var(--bone-dim); line-height:1.55; max-width:620px; margin-top:16px; }

/* reveal: transform only (capture-safe) */
.rv{ opacity:1; }
.rv.pre{ transform:translateY(24px); transition:transform .62s cubic-bezier(.2,.7,.3,1); }
.rv.pre.in{ transform:none; }
.rv.pre.d1{ transition-delay:.07s } .rv.pre.d2{ transition-delay:.14s } .rv.pre.d3{ transition-delay:.21s } .rv.pre.d4{ transition-delay:.28s }
@media (prefers-reduced-motion:reduce){ .rv.pre{ transform:none } }

/* ---------- decorative sprites ---------- */
.deco{ position:absolute; pointer-events:none; z-index:1; filter:drop-shadow(0 6px 7px rgba(0,0,0,.5)); }
.deco.glow{ filter:drop-shadow(0 0 16px rgba(245,140,40,.5)) drop-shadow(0 4px 5px rgba(0,0,0,.5)); }
.deco.gem-glow{ filter:drop-shadow(0 0 16px rgba(143,247,247,.6)) drop-shadow(0 4px 5px rgba(0,0,0,.5)); }
.deco.sway{ animation:swayy 4s ease-in-out infinite; transform-origin:bottom center; }
.deco.bob{ animation:bobup 3.4s ease-in-out infinite; }

/* ---------- HERO ---------- */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; padding:120px 26px 70px; overflow:hidden; }
.hero-bg2{ position:absolute; inset:0; background:url('assets/home/town_iso.webp') center/cover no-repeat; z-index:0; }
.hero-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-veil{ position:absolute; inset:0; z-index:1;
  background:radial-gradient(56% 44% at 50% 44%, rgba(8,6,4,.5), transparent 70%),
    linear-gradient(180deg, rgba(10,7,4,.18) 0%, rgba(10,7,4,0) 30%, rgba(10,7,4,.28) 80%, var(--void) 100%); }
.town-strip{ position:absolute; left:0; right:0; bottom:0; height:230px; z-index:2; pointer-events:none; }
.town-strip::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent, rgba(10,7,4,.7)); }
.town-spr{ position:absolute; bottom:-14px; filter:drop-shadow(0 10px 14px rgba(0,0,0,.7)) brightness(.92) saturate(1.05); }
.hero-wrap{ position:relative; z-index:3; max-width:1180px; margin:0 auto; width:100%; text-align:center; }
.hero-pill{ display:inline-flex; align-items:center; gap:9px; padding:7px 15px; border-radius:24px;
  background:rgba(8,6,4,.6); border:2px solid var(--frame-edge);
  font-family:var(--f-pixel); font-size:9px; letter-spacing:.05em; color:var(--gold-bright); text-transform:uppercase; }
.hero-pill i{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 7px var(--green); }
.hero-logo{ height:clamp(80px,13vw,156px); width:auto; margin:24px auto 8px; filter:drop-shadow(0 10px 26px rgba(0,0,0,.7)); }
.hero-h1{ font-family:var(--f-display); font-weight:400; letter-spacing:.01em; line-height:.95;
  font-size:clamp(40px,6.4vw,80px); color:var(--bone); text-shadow:0 4px 0 #2a2018, 0 6px 8px rgba(0,0,0,.6); }
.hero-h1 .gold{ color:var(--gold-bright); text-shadow:0 4px 0 #6b3f1a, 0 6px 8px rgba(0,0,0,.6); }
.hero-sub{ font-family:var(--f-ui); font-size:clamp(15px,1.7vw,19px); color:var(--bone-dim); line-height:1.55; max-width:600px; margin:18px auto 0; }
.hero-btns{ display:flex; gap:14px; justify-content:center; margin-top:28px; flex-wrap:wrap; }
.hero-btns .pbtn{ padding:14px 26px; font-size:16px; }

.ticker{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:38px auto 0; max-width:780px; }
.ticker-item{ flex:1; min-width:150px; padding:13px 16px; text-align:center;
  background:linear-gradient(180deg,#2a2418,#16110a); border:2px solid var(--frame-edge); border-radius:6px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.06), 0 4px 0 var(--frame-edge); }
.ticker-val{ font-family:var(--f-ui); font-size:23px; font-weight:700; color:var(--gold-bright); line-height:1; }
.ticker-val.gem{ color:var(--diamond-glow); }
.ticker-lbl{ font-family:var(--f-pixel); font-size:8px; letter-spacing:.05em; color:var(--muted); text-transform:uppercase; margin-top:7px; }
.hero-scroll{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:3;
  font-family:var(--f-pixel); font-size:8px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px; animation:bobup 2s ease-in-out infinite; }
.hero-scroll::after{ content:""; width:2px; height:22px; background:linear-gradient(var(--gold),transparent); }

/* ---------- manifesto band ---------- */
.manifest{ position:relative; min-height:78vh; display:flex; align-items:center; padding:90px 26px; overflow:hidden; }
.manifest-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.manifest-veil{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, var(--void) 0%, rgba(10,7,4,.42) 30%, rgba(10,7,4,.56) 70%, var(--void) 100%); }
.manifest .wrap{ text-align:center; }
.manifest-h{ font-family:var(--f-display); font-weight:400; line-height:1.02; letter-spacing:.01em;
  font-size:clamp(34px,5.2vw,62px); color:var(--bone); text-shadow:0 4px 0 #1a120b, 0 6px 10px rgba(0,0,0,.8); max-width:940px; margin:0 auto; }
.manifest-h .gold{ color:var(--gold-bright); text-shadow:0 4px 0 #6b3f1a, 0 6px 10px rgba(0,0,0,.8); }
.manifest-steps{ display:flex; justify-content:center; gap:12px; margin-top:36px; flex-wrap:wrap; }
.mstep{ display:flex; align-items:center; gap:11px; padding:12px 18px; border-radius:6px;
  background:rgba(8,6,4,.7); border:2px solid var(--frame-edge); box-shadow:0 4px 0 var(--frame-edge); }
.mstep b{ font-family:var(--f-ui); color:var(--gold-bright); font-size:15px; font-weight:700; }
.mstep span{ font-family:var(--f-ui); font-size:15px; color:var(--bone); font-weight:600; }
.mstep .ar{ color:var(--muted); }

/* ---------- pixel card (shared) ---------- */
.pcard{ position:relative; background:linear-gradient(180deg,var(--frame-face),var(--frame-face-2));
  border:3px solid var(--frame-edge); border-radius:var(--r);
  box-shadow:inset 0 0 0 2px var(--frame-bevel), inset 0 3px 0 rgba(255,255,255,.05), 0 5px 0 var(--frame-edge), var(--pit); }
.pcard::before{ content:""; position:absolute; inset:3px; pointer-events:none; border-radius:2px;
  background:
    linear-gradient(135deg,var(--stud),var(--stud-d)) left top/12px 12px no-repeat,
    linear-gradient(225deg,var(--stud),var(--stud-d)) right top/12px 12px no-repeat,
    linear-gradient(45deg,var(--stud),var(--stud-d)) left bottom/12px 12px no-repeat,
    linear-gradient(315deg,var(--stud),var(--stud-d)) right bottom/12px 12px no-repeat; }
.pcard > *{ position:relative; z-index:1; }

/* ---------- two ways ---------- */
.two-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:46px; }
@media (max-width:820px){ .two-grid{ grid-template-columns:1fr; } }
.way{ padding:28px; min-height:320px; display:flex; flex-direction:column; overflow:hidden; }
.way-tag{ font-family:var(--f-pixel); font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:var(--gold-bright); }
.way.tools .way-tag{ color:var(--diamond); }
.way-h{ font-family:var(--f-display); font-size:34px; color:var(--bone); margin:8px 0 2px; }
.way-role{ font-family:var(--f-ui); font-size:14px; color:var(--muted); font-style:italic; margin-bottom:15px; }
.way-desc{ font-family:var(--f-ui); font-size:15px; color:var(--bone-dim); line-height:1.6; flex:1; }
.way-meta{ display:flex; gap:16px; margin-top:18px; padding-top:16px; border-top:2px solid rgba(245,166,35,.14); }
.way-meta div{ flex:1; }
.way-meta b{ font-family:var(--f-ui); font-size:16px; color:var(--bone); display:block; font-weight:700; }
.way-meta span{ font-family:var(--f-pixel); font-size:8px; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; }
.way-sprite{ position:absolute; right:14px; top:20px; height:128px; opacity:.95; z-index:0; filter:drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
.way-punch{ text-align:center; font-family:var(--f-display); font-size:clamp(24px,3vw,38px); color:var(--bone); margin-top:38px; line-height:1.15; }
.way-punch .gold{ color:var(--gold-bright); text-shadow:0 3px 0 #6b3f1a; }

/* ---------- flywheel ---------- */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:46px; }
@media (max-width:820px){ .flow{ grid-template-columns:1fr 1fr; } }
.flow-card{ position:relative; padding:22px 18px; }
.flow-num{ font-family:var(--f-ui); font-weight:700; font-size:15px; color:#2a1a06; background:linear-gradient(180deg,var(--gold-pale),var(--ochre));
  width:30px; height:30px; border-radius:5px; display:flex; align-items:center; justify-content:center; margin-bottom:13px; border:2px solid #5e3a12; }
.flow-h{ font-family:var(--f-display); font-size:21px; color:var(--bone); margin-bottom:6px; }
.flow-d{ font-family:var(--f-ui); font-size:13.5px; color:var(--bone-dim); line-height:1.5; }
.flow-card::after{ content:"➜"; position:absolute; right:-13px; top:42px; color:var(--gold); font-size:16px; z-index:3; }
.flow-card:last-child::after{ content:"↺"; right:50%; bottom:-30px; top:auto; transform:translateX(50%); }
@media (max-width:820px){ .flow-card::after{ display:none } }
.flow-note{ text-align:center; font-family:var(--f-ui); font-size:15px; color:var(--bone-dim); margin-top:32px; line-height:1.6; }
.flow-note b{ color:var(--gold-bright); }

/* ---------- tokenomics ---------- */
.tok-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:18px; margin-top:46px; align-items:start; }
@media (max-width:900px){ .tok-grid{ grid-template-columns:1fr; } }
.tax{ padding:26px; }
.tax-h{ font-family:var(--f-display); font-size:24px; color:var(--bone); margin-bottom:3px; }
.tax-sub{ font-family:var(--f-ui); font-size:13px; color:var(--muted); margin-bottom:20px; }
.tax-bar{ display:flex; height:56px; border-radius:5px; overflow:hidden; border:2px solid var(--frame-edge); }
.tax-seg{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.tax-seg.wages{ flex:1; background:linear-gradient(180deg,var(--gold-pale),var(--ochre)); color:#2a1a06; }
.tax-seg.team{ flex:1; background:linear-gradient(180deg,#5a4a32,#3a2e1c); color:var(--bone); }
.tax-seg b{ font-family:var(--f-ui); font-size:19px; font-weight:700; }
.tax-seg span{ font-family:var(--f-pixel); font-size:8px; letter-spacing:.03em; text-transform:uppercase; }
.tax-rows{ margin-top:18px; display:flex; flex-direction:column; gap:11px; }
.tax-row{ display:flex; gap:11px; font-family:var(--f-ui); font-size:13.5px; color:var(--bone-dim); line-height:1.45; }
.tax-row b{ color:var(--gold-bright); flex:none; font-weight:700; }
.assets{ display:flex; flex-direction:column; gap:12px; }
.asset{ display:flex; gap:13px; padding:15px 17px; align-items:center; }
.asset-ic{ width:50px; height:50px; flex:none; border-radius:3px;
  background:radial-gradient(circle at 50% 32%, #2c2519, #120d07); border:2px solid var(--slot-edge);
  box-shadow:inset 0 3px 7px rgba(0,0,0,.75), inset 0 0 0 1px #3a3024; display:flex; align-items:center; justify-content:center; }
.asset-ic img{ width:74%; height:74%; object-fit:contain; filter:drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.asset-ic img[src*="pickaxe_one"]{ width:88%; height:88%; border-radius:2px; filter:brightness(1.55) saturate(1.12) drop-shadow(0 2px 2px rgba(0,0,0,.55)); }
.asset-h{ font-family:var(--f-display); font-size:20px; color:var(--bone); display:flex; align-items:center; gap:8px; }
.asset-h .erc{ font-family:var(--f-pixel); font-size:7.5px; color:var(--diamond); border:2px solid rgba(143,247,247,.3); padding:3px 5px; border-radius:3px; letter-spacing:.03em; }
.asset-d{ font-family:var(--f-ui); font-size:13px; color:var(--bone-dim); line-height:1.5; margin-top:3px; }
.vocab{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:38px; }
.vocab-chip{ display:flex; align-items:center; gap:8px; padding:9px 15px; border-radius:24px;
  background:rgba(8,6,4,.6); border:2px solid var(--frame-edge); font-family:var(--f-ui); font-size:14px; color:var(--bone); }
.vocab-chip b{ font-family:var(--f-pixel); font-size:9px; color:var(--gold-bright); text-transform:uppercase; }
.vocab-chip .eq{ color:var(--muted); }

/* ---------- seasons ---------- */
.season-flow{ display:flex; align-items:stretch; gap:0; margin-top:46px; flex-wrap:wrap; }
.sphase{ flex:1; min-width:150px; position:relative; padding:22px 16px; text-align:center; }
.sphase:not(:last-child)::after{ content:"›"; position:absolute; right:-6px; top:24px; color:var(--gold); font-size:22px; z-index:3; }
.sphase-ic{ width:46px; height:46px; object-fit:contain; display:block; margin:0 auto 10px; filter:drop-shadow(0 4px 5px rgba(0,0,0,.5)); }
.sphase-h{ font-family:var(--f-pixel); font-size:10px; letter-spacing:.03em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:8px; }
.sphase-d{ font-family:var(--f-ui); font-size:13px; color:var(--bone-dim); line-height:1.5; }
.season-note{ margin-top:38px; padding:24px 28px; text-align:center; }
.season-note b{ color:var(--diamond); }
.season-note .big{ font-family:var(--f-display); font-size:clamp(24px,3vw,34px); color:var(--bone); display:block; margin-bottom:8px; }

/* ---------- three feet from gold ---------- */
.meme{ position:relative; padding:118px 26px; overflow:hidden; text-align:center; background:linear-gradient(180deg,var(--void),#160d08 50%,var(--void)); }
.meme-room{ position:absolute; inset:0; z-index:0; background:url('assets/home/briefing_shack.webp') center/cover no-repeat; opacity:.72; }
.meme-glow{ position:absolute; inset:0; z-index:1; background:radial-gradient(50% 50% at 50% 60%, rgba(224,86,58,.16), transparent 70%); }
.meme-miner{ height:200px; margin:0 auto 18px; transform:scaleX(-1) rotate(3deg); filter:grayscale(.25) drop-shadow(0 14px 24px rgba(0,0,0,.7)); }
.meme-h{ font-family:var(--f-display); font-weight:400; line-height:1; letter-spacing:.01em; font-size:clamp(38px,6vw,74px); color:var(--bone); text-shadow:0 4px 0 #1a120b; }
.meme-h .red{ color:var(--danger); text-shadow:0 4px 0 #5c1c10; }
.meme-lead{ font-family:var(--f-ui); font-size:clamp(15px,1.6vw,18px); color:var(--bone-dim); line-height:1.55; max-width:560px; margin:18px auto 0; }
.meme-card{ display:inline-flex; flex-direction:column; gap:4px; margin-top:32px; padding:20px 28px; }
.meme-card .depth{ font-family:var(--f-display); font-size:38px; color:var(--bone); }
.meme-card .cap{ font-family:var(--f-ui); font-size:13px; color:var(--danger); font-weight:600; }

/* ---------- final CTA ---------- */
.cta{ position:relative; min-height:82vh; display:flex; align-items:center; padding:100px 26px; overflow:hidden; }
.cta-bg{ position:absolute; inset:0; background:url('assets/rooms/crystal.webp') center/cover no-repeat; }
.cta-bg::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(54% 50% at 50% 56%, rgba(143,247,247,.14), transparent 64%),
    radial-gradient(60% 60% at 50% 80%, rgba(245,166,35,.12), transparent 60%),
    linear-gradient(180deg, var(--void), rgba(10,7,4,.42) 40%, rgba(10,7,4,.5) 78%, var(--void)); }
.cta .wrap{ text-align:center; }
.cta-h{ font-family:var(--f-display); font-weight:400; line-height:1; letter-spacing:.01em; font-size:clamp(40px,6vw,76px); color:var(--bone); text-shadow:0 4px 0 #1a120b, 0 6px 8px rgba(0,0,0,.7); }
.cta-h .gold{ color:var(--gold-bright); text-shadow:0 4px 0 #6b3f1a, 0 6px 8px rgba(0,0,0,.7); }
.cta-sub{ font-family:var(--f-ui); font-size:clamp(15px,1.6vw,18px); color:var(--bone-dim); margin:16px auto 0; max-width:520px; line-height:1.55; }
.cta-btns{ display:flex; gap:14px; justify-content:center; margin-top:30px; flex-wrap:wrap; }
.cta-btns .pbtn{ padding:15px 28px; font-size:16px; }

/* ---------- footer ---------- */
.foot{ position:relative; z-index:2; padding:42px 26px 34px; border-top:3px solid var(--frame-edge); background:#16110b; }
.foot-wrap{ max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap; gap:22px; align-items:center; }
.foot-logo{ height:26px; }
.foot-links{ display:flex; gap:20px; flex-wrap:wrap; }
.foot-links a{ font-family:var(--f-ui); font-size:14px; color:var(--bone-dim); text-decoration:none; }
.foot-links a:hover{ color:var(--gold-bright); }
.foot-contract{ margin-left:auto; font-family:var(--f-ui); font-size:12px; color:var(--muted); background:rgba(0,0,0,.3); padding:7px 11px; border-radius:5px; border:2px solid var(--frame-edge); }
.foot-disc{ max-width:1180px; margin:22px auto 0; font-family:var(--f-ui); font-size:11.5px; color:var(--muted-d); line-height:1.6; }

/* ---------- strata divider ---------- */
.strata-div{ height:16px; background:repeating-linear-gradient(90deg,#1a1714 0 16px,#221b14 16px 32px),linear-gradient(180deg,#2a2018,#14100b);
  border-top:2px solid rgba(245,166,35,.08); border-bottom:3px solid #000; }

/* ---------- journey: isometric room backdrops behind sections ---------- */
.sec[data-room]{ background-color:#100c08; background-size:cover; background-position:center; }
.sec[data-room]::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; }
.sec[data-room="surface"]{ background-image:url('assets/rooms/surface.webp'); }
.sec[data-room="coal"]{ background-image:url('assets/rooms/coal.webp'); }
.sec[data-room="deepcoal"]{ background-image:url('assets/rooms/deepcoal.webp'); }
.sec[data-room="crystal"]{ background-image:url('assets/rooms/crystal.webp'); }
.sec[data-room="camp"]{ background-image:url('assets/rooms/camp.webp'); }
.sec[data-room="diorama"]{ background-image:url('assets/rooms/diorama.webp'); }

/* ---------- video section backdrops ---------- */
.sec-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.sec-veil{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, var(--void) 0%, rgba(12,9,6,.58) 18%, rgba(12,9,6,.5) 82%, var(--void) 100%); }
.sec-veil.gem{ background:linear-gradient(180deg, var(--void) 0%, rgba(8,10,14,.58) 18%, rgba(8,10,14,.5) 82%, var(--void) 100%); }

/* ---------- Coal Town (the hub street) ---------- */
.townsec{ position:relative; padding:120px 0 90px; overflow:hidden; min-height:100vh; display:flex; flex-direction:column; justify-content:center; }
.townsec-bg{ position:absolute; inset:0; background:url('assets/home/town_row.webp') center top/cover no-repeat; }
.townsec-veil{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 46% at 50% 34%, rgba(10,7,4,.52), transparent 68%), linear-gradient(180deg, rgba(10,7,4,.3) 0%, rgba(10,7,4,.05) 26%, rgba(10,7,4,.3) 74%, var(--void) 100%); }
.townsec .wrap{ text-align:center; z-index:3; padding:0 26px; }
.townsec .sec-lead{ text-shadow:0 1px 4px rgba(0,0,0,.9), 0 0 14px rgba(0,0,0,.5); color:var(--bone); }
.critter{ z-index:2; }

/* storefront stations — each protocol piece is a building on the street */
.street{ position:relative; z-index:3; max-width:1180px; margin:64px auto 0; padding:0 26px; width:100%;
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:end; }
@media (max-width:920px){ .street{ grid-template-columns:1fr 1fr; gap:14px; } }
.stall{ position:relative; display:flex; flex-direction:column; align-items:center; text-decoration:none;
  transition:transform .18s ease; }
.stall:hover{ transform:translateY(-6px); }
.stall-spr{ height:142px; object-fit:contain; margin-bottom:-12px; z-index:1;
  filter:drop-shadow(0 12px 14px rgba(0,0,0,.6)); transition:filter .18s; }
@media (max-width:920px){ .stall-spr{ height:110px; } }
.stall:hover .stall-spr{ filter:drop-shadow(0 12px 14px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(245,166,35,.5)); }
.stall-plaque{ width:100%; text-align:center; padding:16px 12px 12px; border-radius:var(--r);
  background:linear-gradient(180deg,var(--frame-face),var(--frame-face-2)); border:3px solid var(--frame-edge);
  box-shadow:inset 0 0 0 2px var(--frame-bevel), 0 5px 0 var(--frame-edge), var(--pit); }
.stall-plaque.gold{ box-shadow:inset 0 0 0 2px rgba(245,166,35,.55), 0 5px 0 var(--frame-edge), var(--pit); }
.stall-name{ font-size:22px; color:var(--gold-bright); text-shadow:0 2px 0 #6b3f1a; }
.stall-desc{ font-family:var(--f-ui); font-size:13px; color:var(--bone-dim); margin-top:4px; }
.stall-go{ font-size:8px; color:var(--muted); margin-top:9px; letter-spacing:.08em; transition:color .15s; }
.stall:hover .stall-go{ color:var(--gold-bright); }

/* a minecart trundles across the street */
.street-cart{ position:absolute; left:0; right:0; bottom:6px; height:64px; z-index:2; pointer-events:none; overflow:hidden; }
.cartwalk{ position:absolute; bottom:0; width:118px; height:62px;
  background:url('assets/sprites/minecart.webp') center/contain no-repeat;
  filter:drop-shadow(0 8px 9px rgba(0,0,0,.6)); animation:cartcross 30s linear infinite; }
@keyframes cartcross{ from{ transform:translateX(-140px) } to{ transform:translateX(calc(100vw + 160px)) } }
@media (prefers-reduced-motion:reduce){ .cartwalk{ display:none } }

/* ---------- DESCENT threshold ---------- */
.descend{ position:relative; min-height:86vh; display:flex; align-items:center; padding:110px 26px; overflow:hidden; }
.descend-bg{ position:absolute; inset:0; background:url('assets/home/mine_entrance.webp') center/cover no-repeat; }
.descend-veil{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, var(--void) 0%, rgba(10,7,4,.22) 32%, rgba(10,7,4,.34) 70%, #070503 100%); }
.descend .wrap{ text-align:center; }
.descend-arrow{ margin-top:30px; font-size:26px; color:var(--gold); animation:bobup 1.6s ease-in-out infinite;
  text-shadow:0 0 18px rgba(245,166,35,.65); }

/* ---------- strata bands (earth between levels) ---------- */
.strata-band{ height:120px; background:url('assets/bg/strata.webp') center/cover no-repeat;
  border-top:3px solid #000; border-bottom:3px solid #000;
  box-shadow:inset 0 16px 28px rgba(0,0,0,.6), inset 0 -16px 28px rgba(0,0,0,.6); }
.strata-band.thin{ height:62px; }

/* ---------- the underground ---------- */
.under{ position:relative; background:#0a0705; }
.under-sec[data-room]::before{ display:none; }
.under-sec .sec-veil{ background:linear-gradient(180deg, rgba(10,7,4,.9) 0%, rgba(12,9,6,.46) 16%, rgba(12,9,6,.42) 84%, rgba(10,7,4,.9) 100%); }
.under-sec .sec-veil.gem{ background:linear-gradient(180deg, rgba(8,10,14,.9) 0%, rgba(8,10,14,.48) 16%, rgba(8,10,14,.44) 84%, rgba(8,10,14,.9) 100%); }
.under-sec .sec-lead{ text-shadow:0 1px 3px rgba(0,0,0,.85); }

/* level plaque (matches the dashboard's room tag) */
.lvl-plaque{ position:absolute; top:24px; left:26px; z-index:5; display:flex; align-items:center; gap:11px;
  background:rgba(8,6,4,.68); border:2px solid var(--frame-edge); border-radius:6px; padding:8px 14px;
  box-shadow:0 4px 0 rgba(0,0,0,.35); backdrop-filter:blur(3px); }
.lvl-plaque .lvl-no{ font-size:22px; color:var(--gold-bright); text-shadow:0 2px 0 #6b3f1a; line-height:1; }
.lvl-plaque .pixel{ font-size:8px; color:var(--bone-dim); }
.lvl-plaque.gem .lvl-no{ color:var(--diamond-glow); text-shadow:0 2px 0 #1c6b6b; }

/* fixed depth HUD — ticks feet while you scroll the underground */
.depth-hud{ position:fixed; right:18px; top:50%; transform:translateY(-50%) translateX(16px); z-index:55;
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 11px;
  background:rgba(10,7,4,.8); border:2px solid var(--frame-edge); border-radius:8px;
  box-shadow:inset 0 0 0 1px rgba(245,166,35,.18), 0 4px 0 rgba(0,0,0,.4); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .35s, transform .35s; }
.depth-hud.on{ opacity:1; transform:translateY(-50%) translateX(0); }
.dh-cap{ font-size:8px; color:var(--gold-bright); }
.dh-track{ position:relative; width:7px; height:148px; background:#120d07; border:2px solid var(--frame-edge); border-radius:4px; }
.dh-knob{ position:absolute; left:50%; top:0; transform:translate(-50%,-50%) rotate(45deg); width:10px; height:10px;
  background:linear-gradient(180deg,var(--gold-pale),var(--ochre)); border:2px solid #5e3a12; border-radius:2px; box-shadow:0 0 8px var(--gold); }
.dh-num{ font-size:15px; font-weight:700; color:var(--gold-bright); white-space:nowrap; }
.dh-lvl{ font-size:7.5px; color:var(--bone-dim); white-space:nowrap; }
@media (max-width:980px){ .depth-hud{ display:none; } }

/* dig crews working the level edges (same 4-frame strip as the dashboard) */
.digcrew{ position:absolute; left:0; right:0; bottom:0; height:0; z-index:4; pointer-events:none; }
.ldep{ position:absolute; bottom:24px; }
.ldep img{ width:calc(58px * var(--sc,1)); filter:drop-shadow(0 4px 5px rgba(0,0,0,.6)); }
.lminer{ position:absolute; bottom:0; left:50%; height:calc(96px * var(--sc,1)); aspect-ratio:835/948;
  transform:translateX(-50%) scaleX(var(--flip,1)); margin-left:calc(-60px * var(--sc,1) * var(--flip,1));
  background:url('assets/strips/swing_empty.webp') no-repeat; background-size:400% 100%;
  animation:coalSwingL var(--dur,.95s) steps(4,jump-none) infinite; animation-delay:var(--delay,0s);
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.55)); }
@keyframes coalSwingL{ from{background-position:0% 0} to{background-position:100% 0} }
@media (max-width:760px){ .digcrew{ display:none; } }

/* drifting dust motes */
.mote{ position:absolute; width:4px; height:4px; border-radius:50%; background:rgba(245,200,120,.32);
  box-shadow:0 0 6px rgba(245,200,120,.38); pointer-events:none; z-index:3; animation:moteFloat 9s ease-in-out infinite; }
@keyframes moteFloat{ 0%,100%{ transform:translate(0,0); opacity:.12 } 30%{ opacity:.45 } 50%{ transform:translate(14px,-28px); opacity:.3 } 80%{ opacity:.45 } }

/* sprite icon inside a pixel button */
.btn-ic{ height:18px; width:18px; object-fit:contain; filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); }

/* ---------- parallax backdrop layer (created by JS for data-room sections) ---------- */
.room-bg{ position:absolute; inset:-40px 0; z-index:0; background-size:cover; background-position:center; will-change:transform; pointer-events:none; }
.townsec-bg, .descend-bg, .cta-bg, .meme-room{ will-change:transform; }

/* ---------- tap-to-dig ---------- */
.dig-try{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:34px; }
.dig-rock{ position:relative; width:190px; height:150px; cursor:pointer; border:none; background:none; padding:0;
  -webkit-tap-highlight-color:transparent; }
.dig-ore{ width:150px; margin:0 auto; filter:drop-shadow(0 12px 14px rgba(0,0,0,.65)) drop-shadow(0 0 16px rgba(245,166,35,.18)); transition:filter .15s; }
.dig-rock:hover .dig-ore{ filter:drop-shadow(0 12px 14px rgba(0,0,0,.65)) drop-shadow(0 0 22px rgba(245,166,35,.4)); }
.dig-rock.hit .dig-ore{ animation:digHit .16s ease; }
@keyframes digHit{ 0%{ transform:translate(0,0) } 30%{ transform:translate(-3px,2px) scale(.97) } 65%{ transform:translate(2px,-1px) } 100%{ transform:translate(0,0) } }
.dig-hint{ display:block; margin-top:10px; font-size:8px; color:var(--gold-bright); letter-spacing:.08em; animation:flicker 2.8s ease-in-out infinite; }
.dig-read{ display:flex; align-items:baseline; gap:9px; background:rgba(8,6,4,.66); border:2px solid var(--frame-edge); border-radius:6px; padding:7px 14px; box-shadow:0 4px 0 rgba(0,0,0,.35); }
.dig-count{ font-size:21px; font-weight:700; color:var(--gold-bright); }
.dig-lbl{ font-size:8px; color:var(--muted); }
.chip{ position:absolute; width:7px; height:7px; border-radius:2px; pointer-events:none; z-index:3;
  background:linear-gradient(135deg,#3a332b,#15110c); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 4px rgba(0,0,0,.5); }
.dig-pitch{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-top:4px; padding:11px 16px;
  background:rgba(8,6,4,.8); border:2px solid rgba(245,166,35,.4); border-radius:6px; box-shadow:0 4px 0 rgba(0,0,0,.35), 0 0 24px rgba(245,166,35,.15);
  font-family:var(--f-ui); font-size:14px; color:var(--bone-dim); opacity:0; transform:translateY(8px); transition:opacity .5s, transform .5s; }
.dig-pitch b{ color:var(--gold-bright); }
.dig-pitch.show{ opacity:1; transform:none; }