/* Minehood landing — every colour below is a palette.hex entry (alpha only on palette colours). */
@font-face { font-family: 'Minehood Pixel'; src: url(assets/font/minehood-pixel.ttf?v=f45b8487a2) format('truetype'); font-display: swap; }

:root {
  --ink: #0e0e1a; --night: #13131c; --slate: #1c1f29; --line: #3b3f53; --line-hi: #56576a;
  --text: #f2eadb; --muted: #b9aa99; --dim: #8f826e;
  --gold: #ddbd6f; --gold-hi: #ffe5af; --gold-mid: #b19835; --gold-lo: #936a00; --gold-deep: #624000;
  --sky: #91cbfd; --blue: #85b8dc; --violet: #c790fa; --cyan: #93e2e3; --lava: #f95d36;
  --px: 'Minehood Pixel', ui-monospace, monospace;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --gut: 16px;
  --depth: 0;
}
@media (min-width: 760px) { :root { --gut: 32px; } }
@media (min-width: 1200px) { :root { --gut: 6vw; } }

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; background: var(--ink); color: var(--text); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 17px/1.6 var(--sans); background: var(--ink); overflow-x: hidden; }
.reduce, .reduce * { scroll-behavior: auto !important; }
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--gold-hi); }
:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 50; background: var(--gold); color: var(--night); padding: 10px 14px; font-family: var(--px); font-size: 13px; }
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- scene layers */
#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; z-index: 0; background: var(--ink); }
.nogl #scene { display: none; }
.vignette { position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(7, 6, 16, .55) 100%); opacity: calc(.35 + var(--depth) * .65); }
/* static strata when WebGL is unavailable (or on save-data): sky + meadow, then every mine's own rock (pre-rendered
   from the game's terrain atlas into --rock-1..6 / --grass by main.ts), the lava floor under the waitlist */
body.nogl { background: #0e0e1a; }
.nogl .surface { background:
    var(--grass, none) left bottom / 192px 64px repeat-x,
    linear-gradient(#4473ce, #61a0ec 27%, #91cbfd 51%, #b7e3ff 82%) top / 100% calc(100% - 64px) no-repeat,
    #415f4e; }
.nogl .surface .title-text { text-shadow: 0 4px 0 var(--gold-lo), 0 8px 0 var(--gold-deep), 0 12px 0 #272247; }
/* fallback: the town stays on the surface (meadow under the 2D street), the rock starts at the descent */
.nogl .town { background: linear-gradient(rgba(14, 14, 26, .2), rgba(14, 14, 26, .5)), var(--grass, #415f4e) repeat; background-size: auto, 192px 32px; }
.nogl .descent { background: linear-gradient(rgba(14, 14, 26, .35), rgba(14, 14, 26, .6)), var(--rock-1, #512e24); background-size: auto, 192px; }
.nogl .mine { background: linear-gradient(rgba(14, 14, 26, .2), rgba(14, 14, 26, .5)), var(--rock) repeat; background-size: auto, 192px; box-shadow: inset 0 14px 0 #070610, inset 0 16px 0 #3b3f53; }
.nogl .show, .nogl .eco, .nogl .road, .nogl .faq, .nogl .finale { background: linear-gradient(rgba(7, 6, 16, .6), rgba(7, 6, 16, .72)), var(--rock-6, #13131c); background-size: auto, 192px; }
.nogl .finale { position: relative; padding-bottom: calc(10vh + 56px); background:
    linear-gradient(transparent 55%, rgba(249, 93, 54, .22) 92%, rgba(249, 93, 54, .35)),
    linear-gradient(rgba(7, 6, 16, .6), rgba(7, 6, 16, .72)), var(--rock-6, #13131c); background-size: auto, auto, 192px; }
.nogl .finale::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 48px;
  background: linear-gradient(#ffd28b 0 4px, #ff984c 4px 12px, #f95d36 12px 26px, #c62b57 26px 38px, #820f44 38px); }
.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; }

main, .nav, .gauge { position: relative; z-index: 2; }

/* ---------------------------------------------------------------- nav */
.nav { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 20px; padding: 12px var(--gut); z-index: 20;
  transition: background .3s, box-shadow .3s, backdrop-filter .3s; }
.nav.solid { background: rgba(14, 14, 26, .78); backdrop-filter: blur(8px); box-shadow: 0 2px 0 var(--line); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 26px/1 var(--px); letter-spacing: 1px; margin-right: auto; }
.coin { width: 50px; height: 50px; background: var(--coin-bg, none); /* the M coin of the treasury monument, placed by main.ts from frames.json */ flex: none; filter: drop-shadow(2px 2px 0 rgba(7, 6, 16, .6)); }
.nav ul { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.nav nav a { color: var(--text); text-decoration: none; font: 13px/1 var(--px); letter-spacing: 1px; text-transform: uppercase; padding: 8px 2px; border-bottom: 2px solid transparent; }
.nav nav a:hover { border-color: var(--gold); }
/* over the open sky a drifting cloud sat right behind the white links (1440 wide: MINES HEROES vanished); the links
   get the same ink plate as the buttons beside them, so any cloud passes behind a readable strip. The solid bar below
   the hero already is that plate */
.nav nav ul { align-items: center; min-height: 40px; padding: 0 14px; margin-bottom: 4px; transition: background .3s, box-shadow .3s; }
.nav:not(.solid) nav ul { background: rgba(28, 31, 41, .82); box-shadow: 0 0 0 2px #3b3f53, 0 4px 0 2px #070610; }
@media (max-width: 1279px) { .nav nav { display: none; } }
@media (max-width: 759px) { .brand-word { font-size: 26px; } .nav { gap: 10px; } }
@media (max-width: 400px) { .brand-word { display: none; } }
.lang { display: flex; flex: none; box-shadow: 0 0 0 2px #3b3f53, 0 4px 0 2px #070610; margin-bottom: 4px; }
.lang button { all: unset; box-sizing: border-box; min-width: 44px; min-height: 40px; display: grid; place-items: center; padding: 0 10px; cursor: pointer;
  font: 13px/1 var(--px); letter-spacing: 1px; color: var(--muted); background: #1c1f29; }
.lang button + button { box-shadow: -2px 0 0 #3b3f53; }
.lang button:hover { color: var(--text); background: #272639; }
.lang button[aria-pressed='true'] { color: #272639; background: var(--gold); box-shadow: inset 0 2px 0 var(--gold-hi), inset 0 -2px 0 var(--gold-lo); }
.lang button:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; }

/* ---------------------------------------------------------------- buttons (pixel keycaps) */
.btn { --b: var(--gold); --bh: var(--gold-hi); --bl: var(--gold-lo); --bd: var(--gold-deep); --fg: #272639;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 28px;
  font: 26px/1 var(--px); letter-spacing: 1px; text-transform: uppercase; text-decoration: none; color: var(--fg); background: var(--b); border: 0; cursor: pointer;
  box-shadow: inset 0 3px 0 var(--bh), inset 3px 0 0 var(--bh), inset 0 -3px 0 var(--bl), inset -3px 0 0 var(--bl), 0 0 0 3px #272639, 0 6px 0 3px var(--bd);
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
  margin: 3px 3px 9px; transition: transform .08s, filter .15s; }
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn:active { transform: translateY(4px); box-shadow: inset 0 3px 0 var(--bh), inset 3px 0 0 var(--bh), inset 0 -3px 0 var(--bl), inset -3px 0 0 var(--bl), 0 0 0 3px #272639, 0 2px 0 3px var(--bd); }
.btn { clip-path: none; }
.btn-ghost { --b: #1c1f29; --bh: #3b3f53; --bl: #0e0e1a; --bd: #070610; --fg: var(--text); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 13px; margin-bottom: 7px; box-shadow: inset 0 2px 0 var(--bh), inset 2px 0 0 var(--bh), inset 0 -2px 0 var(--bl), inset -2px 0 0 var(--bl), 0 0 0 2px #272639, 0 4px 0 2px var(--bd); }
.btn-ico { width: 18px; height: 20px; background: #272639; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.cta-row { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }

/* ---------------------------------------------------------------- hero / surface */
.surface { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 96px var(--gut) 120px; text-align: center; position: relative; }
.surface-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.eyebrow { font: 13px/1.4 var(--px); letter-spacing: 3px; text-transform: uppercase; color: var(--gold-hi); margin: 0;
  padding: 6px 12px; background: #0e101f; box-shadow: 0 0 0 1px #3c465c; }
.title { margin: 6px 0 8px; width: min(1000px, 92vw); height: clamp(120px, 17vw, 210px); display: grid; place-items: center; }
.title-text { font: clamp(52px, 11vw, 130px)/1 var(--px); color: var(--gold); letter-spacing: 2px;
  text-shadow: 0 4px 0 var(--gold-lo), 0 8px 0 var(--gold-deep), 0 12px 0 #272247, 0 0 40px rgba(221, 189, 111, .25); }
.gl .title-text { color: transparent; text-shadow: none; }
@media (max-aspect-ratio: 9/10) { .title { height: clamp(150px, 42vw, 300px); } }
.lede { font: 26px/1.35 var(--px); color: var(--text); margin: 0 0 22px; max-width: 32ch; text-wrap: balance;
  background: #0e101f; padding: 10px 16px; box-shadow: 0 0 0 1px #3c465c, 0 0 0 3px #0e101f, 0 5px 0 3px rgba(7, 6, 16, .5); }
@media (max-width: 759px) { .lede { font-size: 26px; } }
.scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text); text-decoration: none; font: 13px/1 var(--px); letter-spacing: 2px; text-transform: uppercase; }
.scroll-cue > span:last-child { background: #0e101f; padding: 6px 10px; box-shadow: 0 0 0 1px #3c465c; }
.scroll-cue .pick { display: block; image-rendering: pixelated; transform-origin: 70% 70%; filter: drop-shadow(2px 2px 0 #13131c); }
.js:not(.reduce) .scroll-cue .pick { animation: swing 1.1s steps(1) infinite; }
@keyframes swing { 0% { transform: rotate(-35deg); } 35% { transform: rotate(-10deg); } 55% { transform: rotate(25deg) translateY(2px); } 80% { transform: rotate(0deg); } }

/* ---------------------------------------------------------------- panels */
.panel { position: relative; background: rgba(14, 14, 26, .8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 28px; box-shadow: 0 0 0 2px var(--line), inset 0 2px 0 rgba(86, 87, 106, .6), 0 12px 0 -2px rgba(7, 6, 16, .45); }
.panel::before, .panel::after { content: ''; position: absolute; width: 8px; height: 8px; background: var(--acc, var(--gold)); }
.panel::before { left: -2px; top: -2px; } .panel::after { right: -2px; bottom: -2px; }
.panel h2 { font: 39px/1.1 var(--px); margin: 0 0 12px; color: var(--text); letter-spacing: 1px; }
@media (max-width: 759px) { .panel h2 { font-size: 26px; } .panel { padding: 22px 18px; } }
.panel p { margin: 0 0 14px; color: var(--muted); }
.js:not(.reduce) .reveal, .js:not(.reduce) .panel { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.js .reveal.in, .js .panel.in { opacity: 1; transform: none; }

.descent { min-height: 120vh; display: grid; place-items: center; padding: 20vh var(--gut); }
.panel-intro { max-width: 620px; text-align: center; }
.facts { display: flex; justify-content: center; gap: 12px; list-style: none; padding: 0; margin: 20px 0 0; }
.facts li { display: flex; flex-direction: column; align-items: center; flex: 1 1 0; min-width: 0; max-width: 130px; padding: 12px 8px; background: rgba(28, 31, 41, .9); box-shadow: 0 0 0 2px var(--line); }
.facts b { font: 39px/1 var(--px); color: var(--gold); }
.facts span { font: 13px/1.4 var(--px); color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }

/* ---------------------------------------------------------------- mines (a spacer per mine; its tablet is a world plaque) */
.mine { position: relative; min-height: 230vh; padding: 30vh var(--gut) 30vh; display: flex; flex-direction: column; gap: 34vh; }
@media (max-width: 759px) { .mine { min-height: 240vh; } }
.chip { font: 13px/1 var(--px); letter-spacing: 2px; text-transform: uppercase; color: #13131c; background: var(--acc); padding: 7px 10px; }
.depth { font: 13px/1 var(--px); color: var(--acc); letter-spacing: 1px; }
.req { font: 13px/1.6 var(--px); color: var(--gold-hi) !important; letter-spacing: .5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.req .muted, .muted { color: var(--muted); }
.ico { display: block; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(7, 6, 16, .6)); }
.rar { font: 13px/1 var(--px); letter-spacing: 1px; text-transform: uppercase; padding: 5px 8px; box-shadow: 0 0 0 2px currentColor; white-space: nowrap; display: inline-block; }
.r-common { color: var(--muted); } .r-rare { color: var(--blue); } .r-veryRare { color: var(--violet); } .r-guaranteed { color: var(--cyan); }
.bt { font: 13px/1 var(--px); letter-spacing: 2px; text-transform: uppercase; color: var(--acc); }

/* ---------------------------------------------------------------- showcase (heroes, bosses) */
.show { min-height: 100vh; padding: 16vh var(--gut) 10vh; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.show-head { max-width: 640px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.show-head .eyebrow { margin-bottom: 14px; }
.stage { position: relative; width: min(1480px, 100%); padding-top: 40px;
  background: radial-gradient(55% 60% at 50% 88%, rgba(255, 152, 76, .2), transparent 70%), linear-gradient(rgba(7, 6, 16, .82), rgba(7, 6, 16, .9)), var(--rock-5, #13131c);
  background-size: auto, auto, 96px; box-shadow: 0 0 0 2px #070610, inset 0 0 0 2px #272639, 0 14px 0 -4px rgba(7, 6, 16, .5); }
.stage-bosses { background: radial-gradient(60% 65% at 50% 92%, rgba(249, 93, 54, .26), transparent 72%), linear-gradient(rgba(7, 6, 16, .84), rgba(7, 6, 16, .92)), var(--rock-6, #13131c);
  background-size: auto, auto, 96px; }
.stage-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #56576a transparent; scroll-snap-type: x proximity; }
.stage-row { position: relative; list-style: none; margin: 0 auto; padding: 0 44px 104px; display: flex; align-items: flex-end; justify-content: safe center;
  gap: 30px; width: max-content; min-width: 100%; }
/* the ledge they stand on: a stone lip, then the rock face (the mine's own texture) */
.stage-row::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 104px; z-index: 0;
  background: linear-gradient(#b4bfc8 0 2px, #73808e 2px 6px, #3a404e 6px 10px, #13131c 10px 12px, transparent 12px),
    linear-gradient(rgba(7, 6, 16, .25), rgba(7, 6, 16, .78)), var(--rock-3, #1c1f29);
  background-size: auto, auto, 96px; box-shadow: 0 -1px 0 #070610; }
.stage-bosses .stage-row::after { background: linear-gradient(#dfc9d1 0 2px, #6d514c 2px 6px, #371f22 6px 10px, #070610 10px 12px, transparent 12px),
    linear-gradient(90deg, transparent, rgba(249, 93, 54, .16) 50%, transparent), linear-gradient(rgba(7, 6, 16, .25), rgba(7, 6, 16, .8)), var(--rock-6, #13131c);
  background-size: auto, auto, auto, 96px; }
.stage-heroes .stage-row { gap: 0; padding-left: 24px; padding-right: 24px; }
/* the crop covers every swing; at rest their tools do not touch, so the lineup may tuck in a little */
.stage-heroes .actor { margin: 0 -12px; }
.stage-bosses .stage-row { gap: 22px; padding-left: 20px; padding-right: 20px; }
.stage-bosses .plaque { white-space: normal; width: max-content; max-width: 150px; text-align: center; }
.actor { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; scroll-snap-align: center; }
.actor canvas { display: block; position: relative; z-index: 1; image-rendering: pixelated;
  filter: drop-shadow(-2px 0 0 rgba(255, 210, 139, .28)) drop-shadow(2px 0 0 rgba(7, 6, 16, .35)); }
.actor .shadow { position: absolute; left: 50%; bottom: -5px; width: 74%; height: 10px; translate: -50% 0; z-index: 0; background: rgba(7, 6, 16, .62);
  clip-path: polygon(12% 0, 88% 0, 100% 40%, 100% 60%, 88% 100%, 12% 100%, 0 60%, 0 40%); }
.plaque { position: absolute; left: 50%; top: calc(100% + 22px); translate: -50% 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 10px 7px; white-space: nowrap; background: #38160e; box-shadow: 0 0 0 2px #13131c, inset 0 2px 0 #885e3a, inset 0 -2px 0 #1c0906, 0 4px 0 2px rgba(7, 6, 16, .5); }
.plaque b { font: 400 13px/1 var(--px); color: #ffe5af; letter-spacing: .5px; }
.plaque em { font: 13px/1 var(--px); font-style: normal; color: #13131c; background: var(--acc, var(--gold)); padding: 3px 6px; letter-spacing: 1px; text-transform: uppercase; }
.plaque i { font: 13px/1.2 var(--px); font-style: normal; color: #d2c8b3; }
.stage-heroes .plaque b { text-transform: uppercase; letter-spacing: 1px; min-width: 8ch; text-align: center; }
.stage-torch { position: absolute; bottom: 118px; z-index: 2; width: 16px; height: 32px; background: var(--torch0); transform: scale(2); transform-origin: bottom center; }
.stage-torch.l { left: 10px; } .stage-torch.r { right: 10px; }
.js:not(.reduce) .stage-torch { animation: torch .42s steps(1) infinite; }
@media (max-width: 759px) { .stage-torch { display: none; } .stage-row { padding: 0 24px 104px; gap: 22px; } .plaque i { display: none; } }

/* ---------------------------------------------------------------- waitlist + tasks */
.finale { min-height: 100vh; display: grid; place-items: center; padding: 14vh var(--gut) 10vh; }
.wl-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; width: min(1080px, 100%); align-items: start; }
@media (max-width: 899px) { .wl-grid { grid-template-columns: 1fr; } }
.wl-panel .eyebrow { display: inline-block; margin-bottom: 14px; }
#wl-form { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.field { display: flex; flex-direction: column; gap: 8px; font: 13px/1 var(--px); color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.field input { font: 26px/1 var(--px); color: var(--text); background: #0e101f; border: 0; padding: 12px 14px; width: 100%; min-width: 0;
  box-shadow: 0 0 0 1px #3c465c, inset 0 3px 0 rgba(7, 6, 16, .6); outline: none; text-transform: none; letter-spacing: 0; }
.field input:focus-visible { box-shadow: 0 0 0 2px var(--gold-hi), inset 0 3px 0 rgba(7, 6, 16, .6); }
.field input[aria-invalid='true'] { box-shadow: 0 0 0 2px #f86c54, inset 0 3px 0 rgba(7, 6, 16, .6); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#wl-form .btn { align-self: flex-start; }
.wl-msg { min-height: 1.4em; margin: 0 !important; font: 13px/1.5 var(--px); }
.wl-msg.ok { color: #b0dda1; } .wl-msg.err { color: #ffa287; }
.tasks-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tasks h3 { font: 39px/1.1 var(--px); margin: 0; }
@media (max-width: 759px) { .tasks h3 { font-size: 26px; } }
.tasks-progress { font: 26px/1 var(--px); color: var(--gold-hi); }
.tasks-bar { height: 8px; margin: 14px 0 18px; background: #0e101f; box-shadow: 0 0 0 1px #3c465c; }
.tasks-bar i { display: block; height: 100%; background: var(--gold); box-shadow: inset 0 2px 0 var(--gold-hi); transform-origin: left; transform: scaleX(0); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: t; }
.task { counter-increment: t; display: grid; grid-template-columns: 34px 1fr auto; grid-template-areas: 'n label actions' 'n status status'; align-items: center; gap: 4px 12px;
  padding: 12px; background: #0e101f; box-shadow: 0 0 0 1px #3c465c; transition: box-shadow .2s; }
.task-n { grid-area: n; width: 34px; height: 34px; display: grid; place-items: center; font: 13px/1 var(--px); color: #13131c; background: #717b89; }
.task-n::before { content: counter(t); }
.task.done .task-n { background: #40ac60; } .task.done .task-n::before { content: '✓'; }
.task.checking { box-shadow: 0 0 0 1px var(--gold); }
/* (.task.nudge: a shake in whole pixels, played by waitlist.ts with Web Animations over the board's entrance) */
.task-label { grid-area: label; font: 13px/1.4 var(--px); color: var(--text); }
.task-actions { grid-area: actions; display: flex; gap: 6px; }
.task-actions .btn { margin: 2px 2px 6px; }
.task-status { grid-area: status; font: 13px/1.3 var(--px); color: var(--muted); min-height: 0; }
.task-status:empty { display: none; }
.task.checking .task-status { color: var(--gold-hi); } .task.done .task-status { color: #b0dda1; }
.task.done .task-actions { opacity: .45; }
/* Follow once done: a clean compact card, the check, the label and Done (no keys left to press) */
.task.done:not(.task-post) .task-actions { display: none; }
.task.done:not(.task-post) { grid-template-areas: 'n label' 'n status'; grid-template-columns: 34px 1fr; }
.btn[disabled] { filter: grayscale(.6) brightness(.8); cursor: default; transform: none; }
@media (max-width: 479px) { .task { grid-template-columns: 34px 1fr; grid-template-areas: 'n label' 'n actions' 'n status'; } }

/* ---------------------------------------------------------------- footer */
.foot { position: relative; z-index: 2; padding: 0 var(--gut) calc(36px + env(safe-area-inset-bottom)); background: #070610;
  box-shadow: 0 -2px 0 #272639, 0 -4px 0 #070610; }
/* a strip of the deepest rock caps the footer, so the page ends in the mine instead of on a flat bar */
.foot::before { content: ''; display: block; height: 24px; margin: 0 calc(var(--gut) * -1) 28px;
  background: linear-gradient(rgba(7, 6, 16, .35), rgba(7, 6, 16, .8)), var(--rock-6, #1c1f29); background-size: auto, 96px; box-shadow: inset 0 -2px 0 #3b3f53; }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.foot .brand { margin: 0; }
.foot .brand-word { display: inline; }
.foot-community { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.foot-h { margin: 0; font: 13px/1 var(--px); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.soc { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; font: 13px/1 var(--px); letter-spacing: 1px;
  color: var(--text); text-decoration: none; background: #1c1f29; box-shadow: 0 0 0 2px #3b3f53, inset 0 2px 0 #56576a, 0 4px 0 2px #070610; }
a.soc { color: var(--gold-hi); }
a.soc:hover { background: #272639; box-shadow: 0 0 0 2px var(--gold-lo), inset 0 2px 0 #56576a, 0 4px 0 2px #070610; }
a.soc:hover .px-ico { color: var(--gold-hi); }
.soc .px-ico { flex: none; color: var(--gold); }
.soc-soon { color: var(--muted); background: #13131c; box-shadow: 0 0 0 2px #272639, 0 4px 0 2px #070610; cursor: default; }
.soc-soon .px-ico { color: #717b89; }
.soc-soon em { font: 13px/1 var(--px); font-style: normal; letter-spacing: 1px; text-transform: uppercase; color: #13131c; background: #b9aa99; padding: 4px 6px; }
.foot-base { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; box-shadow: 0 -2px 0 #1c1f29; }
.foot-safe { display: flex; align-items: center; gap: 10px; margin: 0; font: 13px/1.5 var(--px); color: var(--text); }
.shield { flex: none; width: 14px; height: 16px; background: var(--gold); clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); box-shadow: inset 0 0 0 3px var(--gold-lo); }
.foot-rights { margin: 0; font: 13px/1.5 var(--px); color: var(--muted); }
/* header: live social links as small pixel keycaps */
.nav-social { display: flex; gap: 8px; flex: none; margin-bottom: 4px; }
.nav-soc { display: grid; place-items: center; width: 40px; height: 40px; color: var(--gold); background: #1c1f29; font: 13px/1 var(--px); text-decoration: none;
  box-shadow: 0 0 0 2px #3b3f53, 0 4px 0 2px #070610; }
.nav-soc:hover { color: var(--gold-hi); background: #272639; }

/* ---------------------------------------------------------------- depth gauge */
.gauge { position: fixed; inset: 0; z-index: 5; pointer-events: none; transition: opacity .4s; overflow: hidden; }
.gauge-rail { position: absolute; right: 18px; top: 22vh; height: 56vh; width: 4px; background: rgba(59, 63, 83, .7); box-shadow: 0 0 0 2px rgba(7, 6, 16, .6); }
.gauge-fill { position: absolute; inset: 0; background: linear-gradient(var(--gold-hi), var(--gold)); transform-origin: top; transform: scaleY(0); }
.gauge-marks { list-style: none; margin: 0; padding: 0; }
.gauge-marks li { position: absolute; left: -5px; width: 12px; height: 4px; background: var(--acc); }
.gauge-marks span { position: absolute; right: 20px; top: -5px; font: 13px/1 var(--px); color: var(--muted); text-shadow: 2px 2px 0 #070610; }
.gauge-read { position: absolute; left: 50%; top: 88px; display: flex; flex-direction: row; align-items: baseline; gap: 12px; white-space: nowrap;
  padding: 8px 14px 9px; background: rgba(14, 14, 26, .86); box-shadow: 0 0 0 2px var(--line), inset 0 2px 0 rgba(86, 87, 106, .6), 0 6px 0 rgba(7, 6, 16, .5);
  transform: translateX(-50%); transition: opacity .35s, transform .35s, top .5s cubic-bezier(.2, .8, .2, 1); }
/* during the ride the header is gone, so the readout rises to the very top, well above the lift */
body.riding .gauge-read, body.ascending .gauge-read { top: 12px; }
.gauge-m { display: flex; align-items: baseline; gap: 6px; }
.gauge-m b { font: 400 39px/1 var(--px); color: var(--gold-hi); text-shadow: 0 3px 0 #624000; font-variant-numeric: tabular-nums; }
.gauge-m i { font: 26px/1 var(--px); font-style: normal; color: var(--gold); }
.gauge-cap { font: 13px/1.2 var(--px); color: var(--text); letter-spacing: .5px; }
.gauge-name { font: 13px/1.3 var(--px); color: var(--muted); letter-spacing: .5px; text-transform: uppercase; }
body:not(.deep) .gauge-read, body.finale-on .gauge-read, body.foot-on .gauge-read { opacity: 0; transform: translate(-50%, -8px); }
.gauge-rail { transition: opacity .35s; }
body:not(.deep) .gauge-rail, body.foot-on .gauge-rail, body.finale-on .gauge-rail { opacity: 0; }
@media (max-width: 1279px) { .gauge-m b { font-size: 26px; } .gauge-m i { font-size: 13px; } }
@media (max-width: 1023px) { .gauge-name { display: none; } }
@media (max-width: 759px) {
  .gauge-rail { display: none; }
  .gauge-read, body.riding .gauge-read, body.ascending .gauge-read { left: auto; right: 8px; top: auto; bottom: calc(10px + env(safe-area-inset-bottom)); transform: none; flex-direction: column; align-items: flex-end; max-width: 132px; gap: 3px; padding: 6px 8px; opacity: .92; }
  body.riding .gauge-read, .ride-on .gauge-read { bottom: calc(58px + env(safe-area-inset-bottom)); }
  .gauge-cap { font-size: 13px; }
  body.riding .gauge-read { opacity: .92; }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------- central hub strip */
.town { padding: 16vh 0 12vh; display: flex; flex-direction: column; align-items: center; gap: 30px; }
/* with WebGL the town is the back of the 3D meadow: the section is only its text, high in the sky, and the street
   shows through underneath (one world, one sky, one ground line; the camera just sinks a little) */
.gl .town { min-height: 100vh; min-height: 100svh; padding: 11vh 0 0; justify-content: flex-start; }
.town-head { max-width: 700px; margin: 0 var(--gut); text-align: center; display: flex; flex-direction: column; align-items: center; }
.town-head .eyebrow { margin-bottom: 14px; }
.chips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chips li { font: 13px/1.2 var(--px); color: var(--gold-hi); background: #0e101f; box-shadow: 0 0 0 1px #3c465c; padding: 7px 10px; letter-spacing: .5px; }
/* the 2D street (fallback only): no frame beams, it fades into the page above and below */
.town-view { display: none; position: relative; width: 100%; height: var(--town-h, 332px); overflow: hidden;
  background: linear-gradient(#4473ce, #61a0ec 24%, #91cbfd 46%, #b7e3ff 79%);
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); }
.nogl .town-view { display: block; }
.town-view canvas { display: block; width: 100%; height: var(--town-h, 332px); }
.town-tags { position: absolute; inset: 0; pointer-events: none; }
.npc-tag { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 9px 5px; white-space: nowrap;
  background: rgba(14, 14, 26, .88); box-shadow: 0 0 0 2px #3b3f53, 0 4px 0 rgba(7, 6, 16, .45); will-change: transform; transform: translate3d(-9999px, 0, 0); }
/* plates hang UNDER the feet (caret points up at the character), so they never sit on a roof */
.npc-tag::after { content: ''; position: absolute; left: 50%; top: -8px; width: 8px; height: 6px; margin-left: -4px; background: #3b3f53; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.npc-tag.world { opacity: 0; transition: opacity .35s; }
/* the Great Crystal's plate hangs beside the crystal (caret pointing left at it) */
.npc-tag.world.crystal { translate: 0 -50%; }
.npc-tag.world.crystal::after { left: -8px; top: 50%; margin: -4px 0 0; width: 6px; height: 8px; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.npc-tag.world.on { opacity: 1; }
.npc-tag b { font: 13px/1 var(--px); color: var(--gold-hi); font-weight: 400; letter-spacing: .5px; }
.npc-tag i { font: 13px/1 var(--px); color: var(--muted); font-style: normal; }
.npc-tag.crystal b { color: var(--cyan); }
@media (max-width: 899px) { .npc-tag i { display: none; } .npc-tag { padding: 5px 7px 4px; } }

/* ---------------------------------------------------------------- economy */
.eco, .road, .faq { padding: 16vh var(--gut) 8vh; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.eco .show-head p, .road .show-head p { margin-bottom: 0; }
.panel h3 { font: 26px/1.15 var(--px); color: var(--text); margin: 0 0 14px; letter-spacing: .5px; }
.eco-flow { width: min(1180px, 100%); text-align: center; }
.rail { position: relative; height: 56px; margin: 4px 0 18px;
  background: linear-gradient(transparent 0 34px, #8f826e 34px 36px, #675c4d 36px 38px, transparent 38px 46px, #8f826e 46px 48px, #675c4d 48px 50px, transparent 50px),
    repeating-linear-gradient(90deg, transparent 0 10px, #663826 10px 22px, transparent 22px 32px) 0 32px / 100% 20px no-repeat; }
.rail-coin { position: absolute; left: 0; top: 0; }
.js:not(.reduce) .rail-coin { animation: roll 9s steps(90) infinite; }
@keyframes roll { 0% { left: 0; } 48% { left: calc(100% - 48px); } 50% { left: calc(100% - 48px); } 98% { left: 0; } 100% { left: 0; } }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.flow-st { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 18px 20px;
  background: rgba(14, 16, 31, .92); box-shadow: 0 0 0 2px var(--line), inset 0 2px 0 rgba(86, 87, 106, .6), 0 6px 0 rgba(7, 6, 16, .5); }
.flow-st + .flow-st::before { content: ''; position: absolute; left: -24px; top: 50%; width: 16px; height: 22px; margin-top: -11px; background: var(--gold); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.flow-ico { height: 76px; display: grid; place-items: center; }
.flow-st h4 { margin: 0; font: 26px/1 var(--px); color: var(--text); font-weight: 400; }
.flow-st p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.fee-chip { margin-top: auto; font: 13px/1.2 var(--px); color: var(--gold-hi); padding: 7px 10px; background: #0e101f; box-shadow: 0 0 0 2px var(--gold-lo); }
.loop { margin: 20px 0 0 !important; font: 13px/1.5 var(--px); color: var(--gold-hi) !important; }
@media (max-width: 759px) {
  .flow { grid-template-columns: 1fr; gap: 26px; }
  .flow-st + .flow-st::before { left: 50%; top: -22px; margin: 0 0 0 -11px; width: 22px; height: 16px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
}
.eco-grid { width: min(1180px, 100%); display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: start; }
.eco-side { display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 899px) { .eco-grid { grid-template-columns: 1fr; } }
.board table { width: 100%; border-collapse: collapse; }
.board th, .board td { padding: 11px 6px; text-align: left; vertical-align: top; border-bottom: 2px solid #272639; }
.board thead th { font: 13px/1 var(--px); color: var(--muted); letter-spacing: 1px; text-transform: uppercase; font-weight: 400; padding-top: 0; }
.board thead th:last-child, .board td { text-align: right; }
.board tbody th { font-weight: 400; color: var(--text); font-size: 16px; }
.board td { font: 26px/1 var(--px); color: var(--gold-hi); white-space: nowrap; }
.board tbody tr:last-child th, .board tbody tr:last-child td { border-bottom: 0; }
.lv { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lv li { display: flex; gap: 6px; font: 13px/1 var(--px); color: var(--muted); background: #0e101f; box-shadow: 0 0 0 1px #3c465c; padding: 5px 7px; }
.lv b { color: var(--gold-hi); font-weight: 400; }
.split-bar { list-style: none; margin: 0 0 14px; padding: 0; display: flex; gap: 6px; }
.seg { min-width: 0; min-height: 96px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px 10px;
  background: #1c1f29; box-shadow: 0 0 0 2px #3b3f53, inset 0 4px 0 var(--c, var(--gold)); }
.seg.tba { background: repeating-linear-gradient(135deg, #1c1f29 0 8px, #272639 8px 16px); }
.seg-pool { --c: #85b8dc; } .seg-treasury { --c: #ddbd6f; } .seg-burn { --c: #f95d36; }
.seg span { font: 13px/1.2 var(--px); color: var(--muted); }
.seg b { font: 26px/1 var(--px); color: var(--c); font-weight: 400; }
.small { font-size: 15px; margin: 0 !important; }
.tfacts dl { margin: 0; display: flex; flex-direction: column; }
.tfacts dl div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 10px 0; border-bottom: 2px solid #272639; }
.tfacts dl div:last-child { border-bottom: 0; }
.tfacts dt { font: 13px/1.5 var(--px); color: var(--muted); letter-spacing: .5px; text-transform: uppercase; }
.tfacts dd { margin: 0; color: var(--text); font-size: 16px; }
@media (max-width: 479px) { .tfacts dl div { grid-template-columns: 1fr; gap: 4px; } }
.eco-note { margin: 0; max-width: 64ch; text-align: center; font: 13px/1.6 var(--px); color: var(--muted); background: #0e101f; padding: 10px 14px; box-shadow: 0 0 0 1px #3c465c; }

/* ---------------------------------------------------------------- roadmap (docs page): three columns of phases, no vein line */
.road-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
@media (max-width: 899px) { .road-grid { grid-template-columns: 1fr; } }
.road-col { --st: #40ac60; --st-hi: #b0dda1; }
.road-col.st-digging { --st: #ddbd6f; --st-hi: #ffe5af; }
.road-col.st-ahead { --st: #717b89; --st-hi: #b9aa99; }
.road-col-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 26px/1.1 var(--px); color: var(--st-hi); font-weight: 400; }
.road-col-h .dot { width: 14px; height: 14px; background: var(--st); box-shadow: inset 0 3px 0 var(--st-hi); }
.road-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.road-card { padding: 16px 18px 18px; background: rgba(14, 14, 26, .88); box-shadow: 0 0 0 2px var(--line), inset 4px 0 0 var(--st), inset 0 2px 0 rgba(86, 87, 106, .6), 0 8px 0 -2px rgba(7, 6, 16, .45); }
.road-card h4 { margin: 0 0 6px; font: 26px/1.15 var(--px); font-weight: 400; color: var(--text); }
.st-ahead .road-card h4 { color: var(--muted); }
.road-card p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.road-card .st-tag { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.road-card .chip { background: var(--st); }
.st-state { font: 13px/1 var(--px); color: var(--st-hi); letter-spacing: .5px; text-transform: uppercase; }

/* ---------------------------------------------------------------- faq */
.faq-list { width: min(880px, 100%); display: flex; flex-direction: column; gap: 14px; }
.qa { background: rgba(14, 14, 26, .88); box-shadow: 0 0 0 2px var(--line), inset 0 2px 0 rgba(86, 87, 106, .6), 0 8px 0 -2px rgba(7, 6, 16, .45); }
.qa[open] { box-shadow: 0 0 0 2px var(--gold-lo), inset 0 2px 0 rgba(86, 87, 106, .6), 0 8px 0 -2px rgba(7, 6, 16, .45); }
.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover .q { color: var(--gold-hi); }
.qa summary:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; }
.q { font: 26px/1.2 var(--px); color: var(--text); }
.pm { position: relative; flex: none; width: 22px; height: 22px; background: linear-gradient(var(--gold), var(--gold)) center / 22px 6px no-repeat, linear-gradient(var(--gold), var(--gold)) center / 6px 22px no-repeat; }
.qa[open] .pm { background: linear-gradient(var(--gold-hi), var(--gold-hi)) center / 22px 6px no-repeat; }
.qa .a p { margin: 0; padding: 0 20px 20px; color: var(--muted); max-width: 70ch; }
.js:not(.reduce) .qa[open] .a { animation: qa .35s ease; }
@keyframes qa { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 759px) { .qa summary { padding: 16px; } .qa .a p { padding: 0 16px 18px; } }

/* ---------------------------------------------------------------- sound toggle */
.sound-btn { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 40px; height: 40px; flex: none; cursor: pointer; margin-bottom: 4px;
  color: var(--muted); background: #1c1f29; box-shadow: 0 0 0 2px #3b3f53, 0 4px 0 2px #070610; }
.sound-btn:hover { color: var(--text); background: #272639; }
.sound-btn:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; }
.sound-btn[aria-pressed='true'] { color: var(--gold); }
.sound-btn .snd-on { display: none; } .sound-btn[aria-pressed='true'] .snd-on { display: inline; } .sound-btn[aria-pressed='true'] .snd-off { display: none; }
@media (max-width: 400px) { .nav-social { display: none; } }

/* ---------------------------------------------------------------- lift landing (top of the waitlist section) */
.finale { place-items: start center; grid-template-rows: auto auto; padding-top: 0; }
.lift-stage { position: relative; width: 100%; height: 42vh; min-height: 220px; }
.up-ico { width: 18px; height: 14px; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.lift-static { display: none; }
.nogl .lift-static { display: block; position: absolute; left: 50%; bottom: 96px; width: 64px; height: 192px; margin-left: -32px; }
.nogl .lift-static .cage { display: block; width: 32px; height: 96px; background: var(--lift); transform: scale(2); transform-origin: top left; filter: drop-shadow(0 3px 0 rgba(7, 6, 16, .6)); }
.nogl .lift-static::before { content: ''; position: absolute; left: 31px; bottom: 100%; width: 2px; height: 44vh; background: #56576a; }


/* ---------------------------------------------------------------- wallet field note */
.wl-note { display: flex; gap: 10px; align-items: flex-start; margin: -6px 0 0 !important; font: 13px/1.5 var(--px); color: var(--muted) !important; }
.wl-note .shield { margin-top: 2px; }
.field input::placeholder { color: #717b89; }

/* ---------------------------------------------------------------- banter bubbles */
.bubbles { position: fixed; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.bubble { position: absolute; left: 0; top: 0; max-width: min(300px, 70vw); padding: 8px 11px 9px; background: #f2eadb; color: #13131c;
  box-shadow: 0 0 0 2px #13131c, 0 5px 0 2px rgba(7, 6, 16, .55); font: 13px/1.45 var(--px); opacity: 0; transition: opacity .25s;
  margin-top: -14px; translate: -50% -100%; will-change: transform; }
.bubble.on { opacity: 1; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 8px; margin-left: -6px; background: #f2eadb;
  clip-path: polygon(0 0, 100% 0, 30% 100%); filter: drop-shadow(0 2px 0 #13131c); }
.bubble b { display: block; font-weight: 400; color: #624000; letter-spacing: .5px; margin-bottom: 2px; }

/* ---------------------------------------------------------------- ride HUD */
.ride-hud { position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 21; display: flex; align-items: center; gap: 8px;
  padding: 4px 4px 4px 10px; background: rgba(14, 14, 26, .9); box-shadow: 0 0 0 2px var(--line), 0 4px 0 rgba(7, 6, 16, .5); white-space: nowrap; }
.ride-hud[hidden] { display: none; }
.ride-state { font: 13px/1 var(--px); color: var(--gold-hi); letter-spacing: .5px; }
.ride-hud .btn { min-height: 30px; padding: 0 10px; font-size: 13px; margin: 2px 2px 5px; }
.ride-hint { font: 13px/1 var(--px); color: var(--muted); letter-spacing: .5px; padding-left: 10px; box-shadow: -2px 0 0 #272639; }
.ride-hint:empty { display: none; }
.ride-x { font: 13px/1 var(--px); color: #13131c; background: var(--gold); padding: 5px 6px 4px; box-shadow: inset 0 2px 0 var(--gold-hi), inset 0 -2px 0 var(--gold-lo); font-variant-numeric: tabular-nums; }
.ride-x:empty { display: none; }
.ride-hud.fast { box-shadow: 0 0 0 2px var(--gold-lo), 0 4px 0 rgba(7, 6, 16, .5); }
@media (max-width: 759px) {
  .ride-hud { display: grid; grid-template-columns: auto auto auto; justify-items: center; row-gap: 2px; width: max-content; max-width: calc(100vw - 24px); }
  .ride-hint { grid-column: 1 / -1; grid-row: 2; padding: 0 0 4px; box-shadow: none; }
  body.riding .gauge-read { bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* the waitlist waits for the landing scene, then rises in */
.wl-grid { transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.wl-grid.wl-wait { opacity: 0; transform: translateY(28px); visibility: hidden; transition: opacity .3s, transform .3s, visibility 0s .3s; }

/* ---------------------------------------------------------------- world plaques (lift signage) */
.plaque-sign { position: absolute; left: 0; top: 0; translate: -50% -100%; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 5px 9px 6px; background: #38160e; box-shadow: 0 0 0 2px #13131c, inset 0 2px 0 #885e3a, inset 0 -2px 0 #1c0906, 0 4px 0 2px rgba(7, 6, 16, .5);
  opacity: 0; transition: opacity .2s; will-change: transform; }
.plaque-sign.on { opacity: 1; }
.plaque-sign b { font: 400 13px/1 var(--px); color: #ffe5af; letter-spacing: 1px; text-transform: uppercase; }
.plaque-sign i { font: 13px/1 var(--px); font-style: normal; color: #d2c8b3; }
.plaque-sign::before, .plaque-sign::after { content: ''; position: absolute; top: 4px; width: 3px; height: 3px; background: #70707e; }
.plaque-sign::before { left: 3px; } .plaque-sign::after { right: 3px; }

/* world plaques sit between the 3D scene and the page panels (banter bubbles stay on top) */
.bubbles.signs { z-index: 1; }

/* during the ride the header slides away (only the Pause bar stays); on the way up the page content fades out too */
.nav { transition: background .3s, box-shadow .3s, backdrop-filter .3s, transform .5s cubic-bezier(.2, .8, .2, 1); }
body.riding .nav, body.ascending .nav { transform: translateY(-110%); }
.foot { transition: opacity .6s ease; }
body.ascending main > *:not(#mines), body.ascending .foot { opacity: 0; pointer-events: none; }
main > * { transition: opacity .6s ease; }
body.ascending .gauge-rail { opacity: 0; }
.bubble.below { margin-top: 0; }
.bubble.below::after { top: -8px; bottom: auto; clip-path: polygon(30% 0, 100% 100%, 0 100%); filter: drop-shadow(0 -2px 0 #13131c); }
/* phones: the mine panels are full width and would sit right on top of the lift, so while the lift moves the page
   content steps aside (it is all back on Pause and at the landing) */
@media (max-width: 759px) {
  body.riding main > *:not(#waitlist):not(#mines), body.riding .foot { opacity: 0; pointer-events: none; }
  main > * { transition: opacity .5s ease; }
}

/* ---------------------------------------------------------------- world plaques (plaques.ts)
   Set into the rock beside the shaft: a stone tablet per mine, painted wooden mine signs (economy), ore slabs
   (roadmap) and bolted iron plates (wallet safety, the guide). With the 3D scene main.ts pins each one to its world
   row; without it they stand in the page flow on each mine's rock. Every colour is a palette.hex entry. */
.wp { position: relative; isolation: isolate; width: min(388px, 100%); margin: 0; color: var(--text); font: 13px/1.5 var(--px); letter-spacing: .3px; }
.wp.side-l { align-self: flex-start; } .wp.side-r { align-self: flex-end; }
.wp-group { display: contents; }
.gl .wp { position: fixed; left: 0; top: 0; z-index: 3; opacity: 0; visibility: hidden; pointer-events: none; will-change: transform, opacity;
  transition: opacity .35s ease, visibility 0s linear .35s; }
.gl .wp.on { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.gl .wp .wp-link { pointer-events: auto; }
.wp-face { position: relative; padding: 16px 18px 17px; }
.wp-h { margin: 0 0 6px; font: 400 26px/1.1 var(--px); color: #ffe5af; letter-spacing: .5px; text-wrap: balance; text-shadow: 0 2px 0 #070610; }
.wp-p { margin: 0; color: #f2eadb; text-wrap: pretty; }
/* torchlight: a warm pool on the rock around every plaque, and the torch itself on the outer side */
.wp::before { content: ''; position: absolute; z-index: -1; left: -70px; right: -70px; top: -60px; bottom: -60px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 152, 76, .2), rgba(249, 93, 54, .07) 60%, transparent); }
.js:not(.reduce) .wp::before { animation: torchglow 1.26s steps(3) infinite; }
@keyframes torchglow { 33% { opacity: .82; } 66% { opacity: .94; } }
/* the torch: the same mine torch as the ones on the shaft walls (props torch_*), fixed to the rock beside the note, its
   flame level with the heading. With the 3D scene its flame IS the note's world anchor: main.ts places it (inline
   left/top from noteplace.ts torchBox) and sets --ts on the root to the CSS px per art pixel of a back-wall torch in
   the frame just drawn (scene.ts torchScale), so it is exactly as big as the world's torches, smaller while the
   landing zoom pulls back. Without the scene, 2 px per pixel in the page flow (--fw = where the words end). */
.wp-torch { position: absolute; top: calc(var(--ty, 20px) - 13px); width: calc(16px * var(--ts, 2)); height: calc(32px * var(--ts, 2)); pointer-events: none; }
.wp.side-l .wp-torch { left: -40px; } .wp.side-r .wp-torch { left: calc(var(--fw, 100%) + 8px); }
/* (without the scene nothing measures the heading: a tablet's name sits under its tag line) */
.wp-tablet { --ty: 57px; }
/* without the scene the notes stand in the page flow: room for the torch inside the gutter, and its glow never
   widens the page */
.nogl .mine { overflow-x: clip; }
@media (min-width: 760px) { .nogl .wp.side-l { margin-left: 40px; } .nogl .wp.side-r { margin-right: 40px; } }
/* portrait phones keep their own column beside the shaft, without torches (main.ts .notes-col) */
.notes-col .wp-torch { display: none; }
/* the sprite (props torch_*), nearest neighbour at the world torches' own scale; no shadow (the scene's have none) */
.wp-torch::after { content: ''; position: absolute; left: 0; top: 0; width: 16px; height: 32px; background: var(--torch0);
  transform: scale(var(--ts, 2)); transform-origin: 0 0; image-rendering: pixelated; }
/* soot blackening the rock above the flame (7 art px over the sprite's top), and the warm pool its light throws on
   the rock around the flame (6.5 art px down) */
.wp-torch::before { content: ''; position: absolute; z-index: -1; left: -80px; right: -80px; top: -90px; bottom: -40px;
  background: radial-gradient(10px 30px at 50% calc(90px - 7px * var(--ts, 2)), rgba(7, 6, 16, .6), rgba(7, 6, 16, .3) 55%, transparent),
    radial-gradient(92px 84px at 50% calc(90px + 6.5px * var(--ts, 2)), rgba(255, 152, 76, .3), rgba(249, 93, 54, .1) 55%, transparent); }
.js:not(.reduce) .wp-torch::after { animation: torch .42s steps(1) infinite; }
.js:not(.reduce) .wp-torch::before { animation: torchglow 1.26s steps(3) infinite; }

/* stone tablet (one per mine): a slab of the mine's own rock with a chiselled rim, the name engraved in its colour */
.wp-tablet .wp-face { padding: 18px 20px 16px;
  background: linear-gradient(rgba(58, 64, 78, .86), rgba(28, 31, 41, .92)), var(--rock, #3a404e); background-size: auto, 96px;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  box-shadow: inset 0 0 0 2px #070610, inset 4px 4px 0 #73808e, inset -4px -4px 0 #1c1f29, inset 6px 6px 0 #3a404e, inset -6px -6px 0 #13131c; }
.wp-tablet { filter: drop-shadow(0 6px 0 rgba(7, 6, 16, .6)); }
.wp-tablet .wp-h { color: var(--acc); font-size: 39px; margin-bottom: 4px; text-shadow: 0 2px 0 #070610, 0 -1px 0 rgba(7, 6, 16, .5); }
.wp-tag { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.wp-tag .chip { padding: 5px 8px; box-shadow: inset 0 -2px 0 rgba(7, 6, 16, .35); }
.wp-tag .depth { color: #d2c8b3; }
.wp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; padding-top: 10px; box-shadow: 0 -2px 0 rgba(7, 6, 16, .45), 0 -4px 0 rgba(115, 128, 142, .25); }
.ores { display: flex; gap: 4px; }
.ore { display: grid; place-items: center; width: 30px; height: 30px; background: rgba(7, 6, 16, .55); box-shadow: inset 0 2px 0 rgba(7, 6, 16, .6), 0 1px 0 rgba(180, 191, 200, .25); }
.wp-req { display: inline-flex; align-items: center; gap: 6px; color: #ffe5af; }
.wp-boss { color: #d2c8b3; }

/* painted wooden mine sign (economy): planks, a frame, nails, hung from two iron brackets */
.wp-sign .wp-face { padding: 18px 20px 17px;
  background: linear-gradient(90deg, transparent 0 31%, rgba(28, 9, 6, .35) 31% 32%, transparent 32% 67%, rgba(28, 9, 6, .35) 67% 68%, transparent 68%),
    repeating-linear-gradient(180deg, #663826 0 3px, #5d2e24 3px 20px, #663826 20px 23px, #38160e 23px 26px);
  box-shadow: inset 0 0 0 2px #1c0906, inset 0 4px 0 #885e3a, inset 0 -4px 0 #38160e, inset 4px 0 0 #71493a, inset -4px 0 0 #38160e, 0 0 0 2px #070610; }
.wp-sign { filter: drop-shadow(0 6px 0 rgba(7, 6, 16, .6)); }
.wp-sign .wp-face::before, .wp-sign .wp-face::after { content: ''; position: absolute; top: 8px; width: 4px; height: 4px; background: #9da5b0; box-shadow: 0 2px 0 #3f4353, 0 calc(100% + 0px) 0 transparent; }
.wp-sign .wp-face::before { left: 8px; } .wp-sign .wp-face::after { right: 8px; }
/* two iron hangers bolting the sign to the rock above it */
.wp-sign::after { content: ''; position: absolute; left: 24px; right: 24px; top: -14px; height: 16px; z-index: -1;
  background: linear-gradient(90deg, #070610 0 2px, #5b6475 2px 6px, #3f4353 6px 8px, #070610 8px 10px, transparent 10px calc(100% - 10px), #070610 calc(100% - 10px) calc(100% - 8px), #5b6475 calc(100% - 8px) calc(100% - 4px), #3f4353 calc(100% - 4px) calc(100% - 2px), #070610 calc(100% - 2px)); }
.wp-sign .wp-h { color: #ffe5af; }
.wp-sign .wp-p { color: #f0e3c9; }
.wp-coin { float: right; margin: -4px -4px 4px 10px; }

/* ore slab (roadmap): dark basalt with the phase's vein running down its edge (green dug, gold digging, grey ahead) */
.wp-vein { --st: #40ac60; --st-hi: #b0dda1; --st-lo: #00581b; }
.wp-vein[data-state='digging'] { --st: #ddbd6f; --st-hi: #ffe5af; --st-lo: #936a00; }
.wp-vein[data-state='ahead'] { --st: #717b89; --st-hi: #b9aa99; --st-lo: #3c465c; }
/* the vein: a band of ore down the slab's edge, studded with nuggets that catch the torchlight */
.wp-vein .wp-face { padding: 16px 20px 17px 34px;
  background: repeating-linear-gradient(180deg, transparent 0 9px, var(--st-hi) 9px 13px, var(--st) 13px 15px, transparent 15px 31px) 6px 0 / 6px 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 21px, var(--st-lo) 21px 25px, transparent 25px 36px) 14px 0 / 4px 100% no-repeat,
    linear-gradient(90deg, #070610 0 2px, var(--st-lo) 2px 6px, var(--st) 6px 12px, var(--st-lo) 12px 14px, rgba(7, 6, 16, .6) 14px 16px, transparent 16px),
    linear-gradient(rgba(28, 31, 41, .62), rgba(14, 14, 26, .84)), var(--rock-3, #1c1f29); background-size: 6px 100%, 4px 100%, auto, auto, 96px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  box-shadow: inset 0 0 0 2px #070610, inset 0 3px 0 #3f4353, inset -3px 0 0 #0f0e17; }
.wp-vein { filter: drop-shadow(0 6px 0 rgba(7, 6, 16, .6)); }
.wp-state { margin: 0 0 8px; }
.wp-state span { display: inline-block; font: 13px/1 var(--px); letter-spacing: 1px; text-transform: uppercase; color: #13131c; background: var(--st); padding: 5px 8px 4px; box-shadow: inset 0 2px 0 var(--st-hi), inset 0 -2px 0 var(--st-lo); }
.wp-vein[data-state='ahead'] .wp-h { color: #d2c8b3; }
.js:not(.reduce) .wp-vein[data-state='digging'] .wp-state span { animation: nodeglow 1.6s steps(4) infinite; }
@keyframes nodeglow { 50% { filter: brightness(1.2); } }

/* bolted iron plate (wallet safety, the guide) */
.wp-iron .wp-face { padding: 18px 22px 18px;
  background: linear-gradient(#3f4353, #272a38);
  box-shadow: inset 0 0 0 2px #070610, inset 0 4px 0 #5b6475, inset 0 -4px 0 #1f212d, inset 4px 0 0 #444150, inset -4px 0 0 #1f212d; }
.wp-iron { filter: drop-shadow(0 6px 0 rgba(7, 6, 16, .6)); }
.wp-iron .wp-face::before { content: ''; position: absolute; inset: 8px; pointer-events: none;
  background: radial-gradient(circle at 2px 2px, #9da5b0 0 2px, transparent 2.5px) 0 0 / 100% 100% no-repeat, radial-gradient(circle at calc(100% - 2px) 2px, #9da5b0 0 2px, transparent 2.5px),
    radial-gradient(circle at 2px calc(100% - 2px), #9da5b0 0 2px, transparent 2.5px), radial-gradient(circle at calc(100% - 2px) calc(100% - 2px), #9da5b0 0 2px, transparent 2.5px); }
.wp-iron .shield { float: left; margin: 4px 12px 0 0; width: 21px; height: 24px; }
.wp-link { margin: 12px 3px 7px; }

@media (max-width: 759px) {
  .wp { font-size: 13px; line-height: 1.4; }
  .wp-face, .wp-tablet .wp-face, .wp-sign .wp-face, .wp-iron .wp-face { padding: 10px 10px 11px; }
  .wp-vein .wp-face { padding: 10px 10px 11px 24px; }
  .wp-h, .wp-tablet .wp-h { font-size: 13px; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 4px; }
  .wp-tablet .wp-h { font-size: 26px; text-transform: none; }
  .wp-coin, .wp-torch, .wp-iron .shield, .wp-sign .wp-face::before, .wp-sign .wp-face::after, .wp-tag .depth, .wp-boss { display: none; }
  .wp-tag { margin-bottom: 6px; } .wp-tag .chip { padding: 4px 6px; letter-spacing: 1px; }
  .wp-meta { margin-top: 8px; padding-top: 6px; gap: 6px; }
  .wp-link { min-height: 32px; padding: 0 8px; }
  .wp::before { left: -30px; right: -30px; }
}
/* no 3D scene: the plaques stand in the page flow on each mine's rock */
.nogl .wp::before { display: none; }

/* ---------------------------------------------------------------- docs page (docs.html) */
.docs-page { background: #0e0e1a; }
.docs-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 50% at 50% 0, rgba(255, 152, 76, .08), transparent 70%), linear-gradient(rgba(7, 6, 16, .8), rgba(7, 6, 16, .9)), var(--rock-6, #13131c);
  background-size: auto, auto, 96px; }
.docs-page .nav { background: rgba(14, 14, 26, .9); box-shadow: 0 2px 0 var(--line); backdrop-filter: blur(8px); }
.docs-page .nav nav { display: block; }
.docs-page .nav nav a[aria-current] { border-color: var(--gold); color: var(--gold-hi); }
@media (max-width: 899px) { .docs-page .nav nav { display: none; } }
.docs-main { position: relative; z-index: 2; max-width: 1480px; margin: 0 auto; padding: 132px clamp(16px, 4vw, 56px) 96px; }
.docs-hero { max-width: 780px; margin: 0 0 48px; }
.docs-hero .eyebrow { display: inline-block; margin-bottom: 16px; }
.docs-hero h1 { margin: 0 0 14px; font: 400 52px/1.05 var(--px); color: var(--gold); text-shadow: 0 4px 0 var(--gold-deep); letter-spacing: 1px; }
.docs-hero p { margin: 0; color: var(--muted); font-size: 19px; max-width: 60ch; }
@media (max-width: 759px) { .docs-main { padding-top: 104px; } .docs-hero h1 { font-size: 39px; } .docs-hero p { font-size: 17px; } }
.docs-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
.docs-toc { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 12px; }
.docs-toc-h { margin: 0; font: 13px/1 var(--px); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.docs-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.docs-toc a { display: block; padding: 9px 12px; font: 13px/1.2 var(--px); letter-spacing: 1px; text-transform: uppercase; color: var(--text); text-decoration: none; background: rgba(14, 14, 26, .7); box-shadow: inset 2px 0 0 #272639; }
.docs-toc a:hover { color: var(--gold-hi); box-shadow: inset 2px 0 0 var(--gold-lo); }
.docs-toc a[aria-current] { color: #13131c; background: var(--gold); box-shadow: inset 0 2px 0 var(--gold-hi), inset 0 -2px 0 var(--gold-lo); }
.docs-toc .docs-back { align-self: flex-start; margin-top: 8px; display: inline-flex; padding: 0 16px; background: var(--b); color: var(--fg); box-shadow: inset 0 2px 0 var(--bh), inset 2px 0 0 var(--bh), inset 0 -2px 0 var(--bl), inset -2px 0 0 var(--bl), 0 0 0 2px #272639, 0 4px 0 2px var(--bd); }
@media (max-width: 1023px) {
  .docs-layout { grid-template-columns: 1fr; gap: 28px; }
  .docs-toc { position: static; }
  .docs-toc ol { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .docs-toc .docs-back { display: none; }
}
.docs-body { display: flex; flex-direction: column; gap: 88px; min-width: 0; }
.docs-body > section { scroll-margin-top: 96px; padding: 0; display: flex; flex-direction: column; gap: 24px; align-items: stretch; }
.doc-head { max-width: 760px; }
.doc-head .eyebrow { display: inline-block; margin-bottom: 14px; }
.doc-head h2 { margin: 0 0 12px; font: 400 39px/1.1 var(--px); color: var(--text); letter-spacing: 1px; }
.doc-head p { margin: 0; color: var(--muted); max-width: 64ch; }
@media (max-width: 759px) { .doc-head h2 { font-size: 26px; } }
.docs-body .eco-flow, .docs-body .eco-grid, .docs-body .faq-list { width: 100%; }
.docs-body .eco-note { align-self: flex-start; text-align: left; }
.doc-mine-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1099px) { .doc-mine-list { grid-template-columns: 1fr; } }
.doc-mine { display: flex; flex-direction: column; gap: 14px; padding: 22px; background: rgba(14, 14, 26, .88);
  box-shadow: 0 0 0 2px var(--line), inset 0 4px 0 var(--acc), inset 0 6px 0 rgba(7, 6, 16, .5), 0 10px 0 -2px rgba(7, 6, 16, .45); }
.doc-mine header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.doc-mine h3 { margin: 0; font: 400 26px/1.1 var(--px); color: var(--acc); }
.doc-mine > p { margin: 0; color: var(--muted); }
.doc-mine .req { margin: 0; }
.doc-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.doc-stats li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; background: rgba(28, 31, 41, .9); box-shadow: 0 0 0 2px var(--line); text-align: center; }
.doc-stats b { font: 400 26px/1 var(--px); color: var(--text); }
.doc-stats span { font: 13px/1.2 var(--px); color: var(--muted); }
@media (max-width: 479px) { .doc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.doc-table { overflow-x: auto; }
.doc-table table { width: 100%; border-collapse: collapse; }
.doc-table th, .doc-table td { padding: 9px 6px; text-align: left; vertical-align: middle; border-bottom: 2px solid #272639; font: 13px/1.4 var(--px); color: var(--text); }
.doc-table thead th { color: var(--muted); letter-spacing: 1px; text-transform: uppercase; font-weight: 400; padding-top: 0; }
.doc-table tbody th { font-weight: 400; white-space: nowrap; }
.doc-table tbody th .ico { display: inline-block; vertical-align: middle; margin-right: 8px; }
.doc-table td:last-child { color: #d2c8b3; }
.doc-table tbody tr:last-child > * { border-bottom: 0; }
.doc-ores .lbl { margin: 0 0 8px; font: 13px/1 var(--px); color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.doc-ores ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.doc-ores li { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; background: rgba(28, 31, 41, .9); box-shadow: 0 0 0 2px var(--line); font: 13px/1 var(--px); color: var(--text); }
.doc-boss { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 12px 14px; background: rgba(7, 6, 16, .55); box-shadow: 0 0 0 2px #272639; font: 13px/1.5 var(--px); color: var(--text); }
.doc-boss b { font: 400 26px/1 var(--px); color: #ffe5af; }

/* ---------------------------------------------------------------- intro (intro.ts): a miner digs through the screen */
html.intro-pending body::after { content: ''; position: fixed; inset: 0; z-index: 70; background: #070610; }
.intro { position: fixed; inset: 0; z-index: 70; overflow: hidden; transition: opacity .4s ease; }
.intro canvas { position: absolute; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; will-change: transform; }
.intro.out { opacity: 0; pointer-events: none; }
.intro-skip { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 2; }
.intro-bubble { z-index: 5; max-width: min(320px, 80vw); }
.intro-skip { z-index: 6; }
body.intro-on { overflow: hidden; }
/* the header docs icon only stands in for the text "Docs" link while the text nav is collapsed */
@media (min-width: 1280px) { .nav-soc.soc-docs { display: none; } }
.docs-page .nav-soc.soc-docs { display: none; }
/* intro gate: the gesture that lets the sound in */
.intro-gate { position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 14px;
  transition: opacity .3s ease, transform .3s ease; }
.intro-gate.gone { opacity: 0; transform: translate(-50%, -46%); pointer-events: none; visibility: hidden; transition: opacity .3s ease, transform .3s ease, visibility 0s .3s; }
.intro-enter { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 16px 24px 17px;
  font: 26px/1 var(--px); letter-spacing: 1px; color: #ffe5af; background: rgba(14, 14, 26, .82);
  box-shadow: 0 0 0 2px #070610, inset 0 0 0 2px #3a404e, inset 0 4px 0 #575f6f, 0 6px 0 2px rgba(7, 6, 16, .6), 0 0 36px rgba(255, 152, 76, .18); }
.intro-enter .px-ico { color: #ddbd6f; flex: none; }
.intro-enter:hover, .intro-enter:focus-visible { color: #f9f1e4; box-shadow: 0 0 0 2px #070610, inset 0 0 0 2px #936a00, inset 0 4px 0 #ddbd6f, 0 6px 0 2px rgba(7, 6, 16, .6), 0 0 44px rgba(255, 152, 76, .3); outline: none; }
.js:not(.reduce) .intro-enter { animation: gatepulse 1.6s steps(8) infinite; }
.js:not(.reduce) .intro-enter .px-ico { animation: gatewave 1.6s steps(1) infinite; }
@keyframes gatepulse { 50% { transform: translateY(-2px); box-shadow: 0 0 0 2px #070610, inset 0 0 0 2px #3a404e, inset 0 4px 0 #575f6f, 0 8px 0 2px rgba(7, 6, 16, .6), 0 0 56px rgba(255, 152, 76, .3); } }
@keyframes gatewave { 50% { color: #ffe5af; } }
@media (max-width: 759px) { .intro-enter { font-size: 13px; padding: 14px 18px; gap: 12px; } .intro-enter .px-ico { width: 24px; height: 24px; } }

/* desktop showcase: the row fits (main.ts fitStages), so no scrollbar and nothing cut at the frame */
@media (min-width: 900px) { .stage.fits .stage-scroll { overflow-x: hidden; } .stage-bosses .stage-row { gap: 14px; } }

/* showcase halves: one row on phones / without WebGL; with the 3D scene on desktop two halves around an open gap
   (--shaft-gap, set from the live world scale) where the lift rides, the stage box itself cut open there too */
.stage-half, .stage-half > ul { display: contents; list-style: none; margin: 0; padding: 0; }
.stage-gap { display: none; }
@media (min-width: 900px) {
  .gl .stage-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--shaft-gap, 320px) minmax(0, 1fr); width: 100%; min-width: 0; gap: 0; padding-left: 12px; padding-right: 12px; }
  .gl .stage-half { display: block; min-width: 0; }
  .gl .stage-half > ul { display: flex; align-items: flex-end; gap: 14px; overflow: hidden; }
  .gl .stage-half.l > ul { justify-content: flex-end; } .gl .stage-half.r > ul { justify-content: flex-start; }
  .gl .stage-heroes .stage-half > ul { gap: 0; }
  .gl .stage-gap { display: block; }
  .gl .stage { --g: calc(var(--shaft-gap, 320px) / 2);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(50% - var(--g)), transparent calc(50% - var(--g)), transparent calc(50% + var(--g)), #000 calc(50% + var(--g)));
    mask-image: linear-gradient(90deg, #000 calc(50% - var(--g)), transparent calc(50% - var(--g)), transparent calc(50% + var(--g)), #000 calc(50% + var(--g))); }
  /* the section heads step aside to the left column, clear of the shaft */
  .gl .show { align-items: stretch; --hw: min(560px, calc(50vw - var(--shaft-gap, 320px) / 2 - var(--gut) - 24px)); }
  .gl .show-head { align-self: flex-start; width: var(--hw); max-width: var(--hw); margin-left: calc(50% - var(--shaft-gap, 320px) / 2 - 24px - var(--hw)); text-align: left; align-items: flex-start; }
  .gl .show .stage { align-self: center; }
}

/* ---------------------------------------------------------------- the landing (waitlist) in the lava cavern
   The camera frames the cavern (cage, miner, Xar) in the top 40% (scene.ts LAND_Y), so the form and the task board
   start right under the lava, on the bedrock: no void, nothing to hunt for. */
.finale { min-height: 100vh; padding: 0 var(--gut) 8vh; }
.wl-grid { gap: 20px; margin-top: 18px; }
@media (min-width: 900px) { .wl-grid { grid-template-columns: 1.1fr 1fr; width: min(1120px, 100%); } }
/* the form: a slab of the deepest rock, chiselled rim, iron bolts, lit from above by the lava, set into the bedrock */
.wl-panel { padding: 24px 28px 22px;
  background: linear-gradient(#9da5b0, #9da5b0) 12px 12px / 6px 6px no-repeat, linear-gradient(#9da5b0, #9da5b0) calc(100% - 12px) 12px / 6px 6px no-repeat,
    linear-gradient(#9da5b0, #9da5b0) 12px calc(100% - 12px) / 6px 6px no-repeat, linear-gradient(#9da5b0, #9da5b0) calc(100% - 12px) calc(100% - 12px) / 6px 6px no-repeat,
    linear-gradient(rgba(249, 93, 54, .22), transparent 30%),
    linear-gradient(rgba(28, 31, 41, .7), rgba(19, 19, 28, .86)), var(--rock-6, #1c1f29);
  background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px, auto, auto, 96px;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  box-shadow: inset 0 0 0 2px #070610, inset 4px 4px 0 #575f6f, inset -4px -4px 0 #0e0e1a, inset 6px 6px 0 #3a404e; backdrop-filter: none; }
.wl-panel::before, .wl-panel::after { display: none; }
.wl-panel .field input { background: rgba(7, 6, 16, .82); box-shadow: 0 0 0 2px #070610, inset 0 3px 0 rgba(7, 6, 16, .8), 0 2px 0 #3a404e; }
.wl-panel h2 { font-size: 39px; color: #ffe5af; text-shadow: 0 3px 0 #070610; margin-bottom: 8px; }
.wl-panel > p { margin-bottom: 8px; }
#wl-form { gap: 12px; }
.field input { padding: 10px 12px; }
/* the tasks: a wooden quest board with pinned notes */
.tasks { padding: 20px 22px 22px;
  background: linear-gradient(90deg, transparent 0 24%, rgba(28, 9, 6, .4) 24% 25%, transparent 25% 50%, rgba(28, 9, 6, .4) 50% 51%, transparent 51% 76%, rgba(28, 9, 6, .4) 76% 77%, transparent 77%),
    repeating-linear-gradient(180deg, #5d2e24 0 3px, #663826 3px 26px, #5d2e24 26px 29px, #38160e 29px 31px);
  box-shadow: 0 0 0 2px #070610, inset 0 0 0 3px #38160e, inset 0 5px 0 #885e3a, inset 0 -5px 0 #1c0906; backdrop-filter: none; }
.tasks::before, .tasks::after { width: 6px; height: 6px; background: #9da5b0; box-shadow: 0 2px 0 #3f4353; }
.tasks::before { left: 10px; top: 10px; } .tasks::after { right: 10px; top: 10px; bottom: auto; }
.tasks h3 { color: #ffe5af; text-shadow: 0 3px 0 #1c0906; }
.tasks-progress { color: #ffe5af; text-shadow: 0 2px 0 #1c0906; }
.tasks-bar { background: #1c0906; box-shadow: 0 0 0 2px #38160e; }
.task { position: relative; background: #f0e3c9; box-shadow: 0 0 0 2px #38160e, 0 4px 0 rgba(7, 6, 16, .45); transform: rotate(var(--tilt, 0deg)); }
.task:nth-child(2) { --tilt: .4deg; } .task:nth-child(3) { --tilt: -.3deg; } .task:nth-child(4) { --tilt: .25deg; }
.task::before { content: ''; position: absolute; left: 50%; top: -5px; width: 8px; height: 8px; margin-left: -4px; background: #c15c37; box-shadow: inset 0 2px 0 #ff984c, 0 2px 0 #1c0906; }
.task-label { color: #13131c; }
.task-status { color: #5d2e24; }
.task.checking .task-status { color: #936a00; } .task.done .task-status { color: #00581b; }
.task.checking { box-shadow: 0 0 0 2px #936a00, 0 4px 0 rgba(7, 6, 16, .45); }
.task-n { background: #5d2e24; color: #f0e3c9; }
/* Confirm counts down inside its own box: the seconds, and a bar under them that drains a step a second */
.task.checking .task-confirm[disabled] { filter: none; position: relative; font-variant-numeric: tabular-nums; }
.task.checking .task-confirm::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: 5px; height: 4px; background: #624000;
  transform-origin: left; transform: scaleX(var(--left, 1)); transition: transform .25s steps(3, end); }

/* "Back to the surface": a lift call panel on the landing wall beside the cage (main.ts pins it to the world) */
.lift-call { all: unset; box-sizing: border-box; position: absolute; left: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; cursor: pointer;
  opacity: 0; transition: opacity .3s; will-change: transform; }
.lift-call.placed { opacity: 1; }
.nogl .lift-call, .reduce .lift-call:not(.placed) { opacity: 1; left: calc(50% + 48px); top: auto; bottom: 120px; }
.lc-arm { width: 18px; height: 6px; background: #3f4353; box-shadow: 0 2px 0 #070610, inset 0 2px 0 #5b6475; margin-right: -10px; }
.lc-box { position: relative; width: 56px; height: 72px; flex: none; background: linear-gradient(#3f4353, #272a38);
  box-shadow: 0 0 0 2px #070610, inset 0 3px 0 #5b6475, inset 0 -3px 0 #1f212d, 0 6px 0 rgba(7, 6, 16, .55); }
.lc-box::before, .lc-box::after { content: ''; position: absolute; top: 4px; width: 4px; height: 4px; background: #9da5b0; }
.lc-box::before { left: 4px; } .lc-box::after { right: 4px; }
.lc-lamp { position: absolute; left: 50%; top: 8px; width: 8px; height: 6px; margin-left: -4px; background: #40ac60; box-shadow: 0 0 10px rgba(176, 221, 161, .7), inset 0 2px 0 #b0dda1; }
.js:not(.reduce) .lc-lamp { animation: nodeglow 1.2s steps(2) infinite; }
.lc-knob { position: absolute; left: 50%; top: 22px; width: 36px; height: 36px; margin-left: -18px; display: grid; place-items: center; color: #624000;
  background: #ddbd6f; box-shadow: inset 0 4px 0 #ffe5af, inset 0 -4px 0 #936a00, 0 4px 0 #1c0906;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); transition: transform .08s; }
.lc-knob .up-ico { width: 14px; height: 11px; }
.lc-grille { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 6px; background: repeating-linear-gradient(90deg, #070610 0 2px, transparent 2px 4px); }
.lc-label { font: 26px/1.1 var(--px); letter-spacing: 1px; text-transform: uppercase; color: #ffe5af; padding: 7px 10px 6px; white-space: nowrap;
  background: #38160e; box-shadow: 0 0 0 2px #070610, inset 0 2px 0 #885e3a, inset 0 -2px 0 #1c0906, 0 4px 0 rgba(7, 6, 16, .5); }
.lift-call:hover .lc-knob, .lift-call:focus-visible .lc-knob { filter: brightness(1.12); }
.lift-call:hover .lc-label, .lift-call:focus-visible .lc-label { color: #f9f1e4; box-shadow: 0 0 0 2px #070610, inset 0 2px 0 #885e3a, inset 0 -2px 0 #1c0906, 0 4px 0 rgba(7, 6, 16, .5), 0 0 22px rgba(255, 152, 76, .55); }
.lift-call:hover .lc-box { box-shadow: 0 0 0 2px #070610, inset 0 3px 0 #5b6475, inset 0 -3px 0 #1f212d, 0 6px 0 rgba(7, 6, 16, .55), 0 0 22px rgba(255, 229, 175, .35); }
.lift-call:active .lc-knob { transform: translateY(3px); box-shadow: inset 0 2px 0 #ffe5af, inset 0 -2px 0 #936a00, 0 1px 0 #1c0906; }
.lift-call:focus-visible { outline: 3px solid #ffe5af; outline-offset: 4px; }
@media (max-width: 759px) { .lift-call { gap: 6px; } .lc-arm { display: none; } .lc-label { white-space: normal; max-width: 104px; font-size: 13px; } .lc-box { width: 44px; height: 58px; } .lc-knob { top: 18px; width: 28px; height: 28px; margin-left: -14px; } .lc-label { font-size: 13px; padding: 6px 8px 5px; } }

/* ---------------------------------------------------------------- plaque mounting (M5 QA): set INTO the rock, not floating
   tablets sit in a cut niche (dark depth above/left, lit lip below/right) with iron bolts; signs hang on chains from
   bolts in the rock; slabs and plates are bolted on and cast a shadow onto the wall; dust and a little moss gather
   at the base of each one. */
.wp-tablet { filter: none; }
.wp-tablet .wp-face { clip-path: none;
  background: linear-gradient(rgba(58, 64, 78, .55), rgba(28, 31, 41, .78)), var(--rock, #3a404e); background-size: auto, 96px;
  box-shadow: inset 0 3px 0 #575f6f, inset 3px 0 0 #3a404e, inset 0 -3px 0 #13131c, inset -3px 0 0 #1c1f29,
    0 0 0 2px #070610, -3px -4px 0 2px #070610, 3px 4px 0 2px #3a404e, 0 0 0 9px rgba(7, 6, 16, .45); }
.wp-tablet .wp-h { text-shadow: 0 -1px 0 #070610, 0 2px 0 rgba(115, 128, 142, .35); }
.wp-face::before { content: ''; position: absolute; inset: 6px; pointer-events: none;
  background: linear-gradient(#9da5b0, #9da5b0) 0 0 / 4px 4px no-repeat, linear-gradient(#9da5b0, #9da5b0) 100% 0 / 4px 4px no-repeat,
    linear-gradient(#9da5b0, #9da5b0) 0 100% / 4px 4px no-repeat, linear-gradient(#9da5b0, #9da5b0) 100% 100% / 4px 4px no-repeat; }
.wp-sign .wp-face::before, .wp-sign .wp-face::after { display: none; }
.wp-iron .wp-face::before { background: linear-gradient(#9da5b0, #9da5b0) 0 0 / 5px 5px no-repeat, linear-gradient(#9da5b0, #9da5b0) 100% 0 / 5px 5px no-repeat,
    linear-gradient(#9da5b0, #9da5b0) 0 100% / 5px 5px no-repeat, linear-gradient(#9da5b0, #9da5b0) 100% 100% / 5px 5px no-repeat; }
.wp-sign, .wp-vein, .wp-iron { filter: drop-shadow(5px 7px 0 rgba(7, 6, 16, .6)); }
/* signs hang on two chains from bolts driven into the rock */
.wp-sign::after { content: ''; position: absolute; z-index: -1; left: 26px; right: 26px; top: -30px; height: 30px;
  background: linear-gradient(#9da5b0, #9da5b0) 0 0 / 6px 6px no-repeat, linear-gradient(#9da5b0, #9da5b0) 100% 0 / 6px 6px no-repeat,
    repeating-linear-gradient(180deg, #5b6475 0 4px, #1f212d 4px 5px, transparent 5px 7px) 2px 6px / 2px calc(100% - 6px) no-repeat,
    repeating-linear-gradient(180deg, #5b6475 0 4px, #1f212d 4px 5px, transparent 5px 7px) calc(100% - 2px) 6px / 2px calc(100% - 6px) no-repeat; }
/* dust and a little moss at the base */
.wp-tablet::after, .wp-vein::after, .wp-iron::after { content: ''; position: absolute; z-index: 1; left: 10px; right: 10px; bottom: -5px; height: 5px; pointer-events: none;
  background: repeating-linear-gradient(90deg, #675c4d 0 6px, transparent 6px 11px, #8f826e 11px 14px, transparent 14px 23px, #3e7b41 23px 27px, transparent 27px 37px) 0 2px / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 3px, #675c4d 3px 5px, transparent 5px 17px, #577a43 17px 19px, transparent 19px 31px) 0 0 / 100% 2px no-repeat; }
@media (max-width: 759px) { .wp-sign::after { top: -22px; height: 22px; left: 14px; right: 14px; } }

/* ---------------------------------------------------------------- 15th pass: the copy is CARVED INTO THE WALL
   (user: "the info boxes should be written on the rock behind, like a real mine"). No slab, no plank, no plate, no
   frame: the letters are cut into the rock face itself. Carved groove = a dark lip on top (the chisel's shadow) and a
   lit lower edge (torchlight catching the cut); the body line is chalk, the way miners mark a working face. A soft
   soot shadow (never a rectangle) keeps it readable over the busy rock. Overrides every earlier plaque skin. */
.wp-tablet .wp-face, .wp-sign .wp-face, .wp-vein .wp-face, .wp-iron .wp-face, .wp-face {
  background: none; box-shadow: none; clip-path: none; padding: 6px 4px 8px; }
/* the text block is only as wide as its longest line (a right-hand torch hangs beside the words, not the box) */
.wp-face { width: fit-content; max-width: 100%; }
.wp-tablet, .wp-sign, .wp-vein, .wp-iron { filter: none; }
.wp-face::before, .wp-iron .wp-face::before, .wp-sign::after, .wp-tablet::after, .wp-vein::after, .wp-iron::after { display: none; }
/* soot on the rock around the words (a soft ellipse, no edge anywhere); the torchlight comes from the torch
   (.wp-torch::before), and phones, which hide the torch, keep a warm tint on the outer side instead */
.wp::before { left: -90px; right: -90px; top: -70px; bottom: -70px;
  background: radial-gradient(closest-side, rgba(7, 6, 16, .5), rgba(7, 6, 16, .3) 55%, transparent); }
.js:not(.reduce) .wp::before { animation: none; }
@media (max-width: 759px) {
  .wp::before { background: radial-gradient(closest-side, rgba(7, 6, 16, .5), rgba(7, 6, 16, .3) 55%, transparent),
    radial-gradient(40% 55% at var(--tx, 0%) 50%, rgba(255, 152, 76, .16), transparent 70%); }
  .wp.at-r::before, .wp.side-r::before { --tx: 100%; }
  .js:not(.reduce) .wp::before { animation: torchglow 1.26s steps(3) infinite; }
}
.wp-h, .wp-tablet .wp-h, .wp-sign .wp-h, .wp-vein[data-state='ahead'] .wp-h {
  color: #d1be97; text-shadow: 0 -2px 0 #070610, 0 -1px 0 #070610, 0 2px 0 #8f826e, 1px 0 0 rgba(7, 6, 16, .6), -1px 0 0 rgba(7, 6, 16, .6); }
.wp-tablet .wp-h { color: var(--acc); text-shadow: 0 -2px 0 #070610, 0 -1px 0 #070610, 0 2px 0 rgba(242, 234, 219, .28), 1px 0 0 rgba(7, 6, 16, .7), -1px 0 0 rgba(7, 6, 16, .7); }
.wp-p, .wp-sign .wp-p { color: #f2eadb; text-shadow: 1px 1px 0 #070610, -1px 1px 0 #070610, 1px -1px 0 #070610, -1px -1px 0 #070610, 0 2px 0 #070610; }
/* the small tags become chalk marks / painted strokes on the rock, not boxes */
.wp-tag .chip { background: none; box-shadow: none; padding: 0; color: var(--acc); letter-spacing: 2px; text-shadow: 1px 1px 0 #070610, -1px -1px 0 #070610, 0 2px 0 #070610; }
.wp-tag .depth { color: #d2c8b3; text-shadow: 1px 1px 0 #070610, -1px -1px 0 #070610; }
.wp-tag .chip::after { content: ''; display: inline-block; width: 22px; height: 2px; margin: 0 0 4px 10px; vertical-align: middle; background: var(--acc); opacity: .7; }
.wp-meta { box-shadow: none; padding-top: 4px; margin-top: 8px; }
.ore { background: none; box-shadow: none; width: 26px; height: 26px; filter: drop-shadow(0 2px 0 #070610); }
.wp-req, .wp-boss { text-shadow: 1px 1px 0 #070610, -1px -1px 0 #070610, 0 2px 0 #070610; }
.wp-state span { background: none; box-shadow: none; padding: 0; color: var(--st-hi); letter-spacing: 2px; text-shadow: 1px 1px 0 #070610, -1px -1px 0 #070610, 0 2px 0 #070610; }
.wp-state span::before { content: ''; display: inline-block; width: 10px; height: 10px; margin: 0 8px 1px 0; vertical-align: middle; background: var(--st); box-shadow: inset 2px 2px 0 var(--st-hi), inset -2px -2px 0 var(--st-lo), 0 0 0 2px #070610; }
.wp-coin { filter: drop-shadow(0 2px 0 #070610); }
@media (max-width: 759px) { .wp-face, .wp-tablet .wp-face, .wp-sign .wp-face, .wp-iron .wp-face, .wp-vein .wp-face { padding: 4px 2px 6px; } .wp::before { left: -40px; right: -40px; top: -40px; bottom: -40px; } }

/* ---------------------------------------------------------------- 15th pass: the landing
   The camera frames the cavern (Xar on his island, the cage, the miner, the lift call) in the top 56% of the screen
   (scene.ts LAND_Y); the form and the task board start RIGHT under the lava, on the bedrock, and from there the rock
   scrolls with the page (no frozen picture, no empty void). They are visible from the first landed frame. */
.gl .lift-stage { height: 56vh; min-height: 300px; }
.gl .finale { padding-top: 0; }
.gl .wl-grid { margin-top: 14px; }
/* "Back to the surface" only once the cage has landed and the miner is out (main.ts adds .ready) */
.gl .lift-call { opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s linear .35s; }
.gl .lift-call.placed.ready { opacity: 1; visibility: visible; transition: opacity .45s .15s; }

/* the name carved under each boss den (main.ts pocketTick) */
.den-tag { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 2px 10px 4px;
  font: 13px/1.2 var(--px); text-align: center; white-space: nowrap; opacity: 0; transition: opacity .3s; will-change: transform; pointer-events: none; }
.den-tag.on { opacity: 1; }
.den-tag::before { content: ''; position: absolute; z-index: -1; left: -26px; right: -26px; top: -10px; bottom: -10px;
  background: radial-gradient(closest-side, rgba(7, 6, 16, .6), rgba(7, 6, 16, .3) 60%, transparent); }
.den-tag i { font-style: normal; color: #d2c8b3; letter-spacing: 2px; text-transform: uppercase; text-shadow: 1px 1px 0 #070610, -1px -1px 0 #070610, 0 2px 0 #070610; }
.den-tag b { font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--acc); text-shadow: 0 -2px 0 #070610, 0 -1px 0 #070610, 0 2px 0 rgba(242, 234, 219, .28), 1px 0 0 rgba(7, 6, 16, .7), -1px 0 0 rgba(7, 6, 16, .7); }
.den-tag em { font-style: normal; color: #f2eadb; text-shadow: 1px 1px 0 #070610, -1px -1px 0 #070610, 0 2px 0 #070610; }
@media (max-width: 759px) { .den-tag b { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; } .den-tag i { font-size: 13px; letter-spacing: 1px; } .den-tag em { display: none; } }
.wp-h-sm { font-size: 26px !important; }
/* no 3D scene: the captions carry the lineup (with the scene the figures are set in the rock instead) */
.wp-cast { display: flex; flex-wrap: nowrap; align-items: flex-end; margin-top: 12px; padding-right: 10px; }
/* one row, shoulder to shoulder like a crew photo (the sprites' own margins overlap, never the figures' faces) */
.wp-cast canvas { flex: none; margin-right: -6px; }
.wp-cast.cast-bosses canvas { margin-right: -14px; }
.gl .wp-cast { display: none; }
/* the form fades in the moment the cage touches down (main.ts .wl-hold during the last metres of the descent) */
.wl-grid { transition: opacity .45s ease, visibility 0s; }
.wl-grid.wl-hold, .wl-tabs.wl-hold { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
/* fixed chrome that cannot step aside fades while a figure or a note passes behind it (main.ts yieldChrome; the ride bar stays put, main.ts placeHud) */
.gauge-read.yield { opacity: 0 !important; pointer-events: none; transition: opacity .25s; }
/* a bubble slid aside (main.ts bubbleTick) keeps its tail on the speaker */
.bubble::after { left: calc(50% + var(--tail, 0px)); }
/* the way up: the form and the task board leave at once (the camera turns to the cavern and the miner walks where the
   form was) */
body.ascending .wl-grid { opacity: 0 !important; visibility: hidden; transition: none; }
.ride-hud { transition: none; }
.bubble.cut { transition: none; }

/* ---------------------------------------------------------------- 15th pass (2): the landing is the LAST screen
   (user: "the waitlist and the tasks stay fixed at the bottom"). With the 3D scene the finale is one screen minus the
   footer: the cavern window takes what is left, the form and the task board sit under the lava, the footer closes the
   page. Landing on it = the end of the page, nothing scrolls away. main.ts measures --foot-h and frames the cavern. */
.gl .finale { display: flex; flex-direction: column; align-items: center; min-height: calc(100vh - var(--foot-h, 180px)); padding: 0 var(--gut) 16px; }
.gl .lift-stage { flex: 1 1 auto; height: auto; min-height: 260px; width: 100%; }
.gl .wl-grid { flex: none; margin-top: 12px; }
.gl .foot { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.gl .foot::before { height: 16px; margin-bottom: 16px; }
.gl .foot-base { margin-top: 12px; padding-top: 10px; }
@media (min-width: 900px) {
  /* compact form: the X account and the name side by side, the wallet under them, the note and the button */
  .gl .wl-panel { padding: 18px 24px 16px; }
  .gl .wl-panel .eyebrow { margin-bottom: 8px; }
  .gl .wl-panel h2 { font-size: 26px; margin-bottom: 4px; }
  .gl .wl-panel > p { font-size: 15px; line-height: 1.45; margin-bottom: 2px; }
  .gl #wl-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 6px; }
  .gl #wl-form > .field-x, .gl #wl-form > .field-wallet, .gl #wl-form > .wl-note, .gl #wl-form > .wl-msg { grid-column: 1 / -1; }
  .gl #wl-form > .btn { grid-column: 1 / -1; justify-self: start; white-space: nowrap; }
  .gl .field { gap: 6px; }
  .gl .field input { padding: 7px 10px; }
  .gl .wl-note { margin: 0 !important; }
  /* compact task board: slimmer pinned notes */
  .gl .tasks { padding: 16px 20px 18px; }
  .gl .tasks h3 { font-size: 26px; }
  .gl .tasks-progress { font-size: 26px; }
  .gl .tasks-bar { margin: 10px 0 14px; }
  .gl .task-list { gap: 10px; }
  .gl .task { padding: 8px 10px; gap: 2px 10px; }
  .gl .task-actions .btn { min-height: 34px; }
}
/* narrow screens: Waitlist | Tasks tabs on one panel */
.wl-tabs { display: none; }
@media (max-width: 899px) {
  .wl-tabs { display: flex; gap: 0; width: min(560px, 100%); margin-top: 10px; box-shadow: 0 0 0 2px #070610; }
  .wl-tabs [role='tab'] { all: unset; box-sizing: border-box; flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; cursor: pointer;
    font: 13px/1 var(--px); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); background: #13131c; box-shadow: inset 0 -3px 0 #070610; }
  .wl-tabs [role='tab'][aria-selected='true'] { color: #13131c; background: var(--gold); box-shadow: inset 0 2px 0 var(--gold-hi), inset 0 -3px 0 var(--gold-lo); }
  .wl-tabs [role='tab']:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; }
  .wl-tabs .tab-n { font-weight: 400; }
  .wl-grid[data-tab='wl'] > .tasks, .wl-grid[data-tab='tasks'] > .wl-panel { display: none; }
  .gl .wl-grid { margin-top: 0; width: min(560px, 100%); }
}

/* ---- 15th pass: the way up is always the full lift ride ---------------------------------------------------------- */
/* the moment the ride up starts, the footer and the lift call are gone (no fade under the ride bar) */
body.ascending .foot { opacity: 0; visibility: hidden; transition: none; }
body.riding .lift-call, body.ascending .lift-call { opacity: 0 !important; visibility: hidden !important; transition: none !important; }
/* the title takes focus for screen readers when the miner is back on the grass: no ring around the logo */
#title:focus { outline: none; }
/* the lift call on the cavern's right wall (user: "Surface? on the wall"): a painted wooden sign nailed to the rock
   above an iron call box bolted to the same rock; both pinned to the wall by main.ts (sceneApi.callAt) */
.lift-call { flex-direction: column; align-items: center; gap: 6px; }
.lift-call .lc-label { position: relative; font-size: 20px; line-height: 1; padding: 7px 14px 6px; white-space: nowrap; max-width: none; }
.lift-call .lc-label::before, .lift-call .lc-label::after { content: ''; position: absolute; top: 50%; width: 4px; height: 4px; margin-top: -2px;
  background: #9da5b0; box-shadow: 0 1px 0 #070610; }
.lift-call .lc-label::before { left: 4px; } .lift-call .lc-label::after { right: 4px; }
@media (max-width: 759px) { .lift-call { gap: 4px; } .lift-call .lc-label { font-size: 13px; padding: 6px 10px 5px; } }
/* portrait phones: a taller cavern window at the landing (bigger characters, less zoom-out; the form scrolls below) */
@media (max-aspect-ratio: 4/5) { .gl .lift-stage { min-height: 44vh; } }

/* ---------------------------------------------------------------- 16th pass: motion (docs/art/ARASTIRMA.md §4r)
   Entrances ease out in 200 to 300 ms, exits are shorter and ease in, nothing moves linearly. Moves on pixel art go in
   whole pixel steps (keyframes held with steps(1, end), spaced like an ease-out curve), so nothing blurs on the way.
   prefers-reduced-motion: the global rule above drops every animation, only the opacity changes stay. */
@property --bs { syntax: '<number>'; inherits: false; initial-value: 1; }
@keyframes mh-rise { 0% { translate: 0 10px; } 20% { translate: 0 5px; } 40% { translate: 0 2px; } 60% { translate: 0 1px; } 80%, 100% { translate: 0 0; } }
@keyframes mh-fade { from { opacity: 0; } }
@keyframes mh-pin { 0% { translate: 0 -8px; } 25% { translate: 0 -3px; } 50% { translate: 0 1px; } 75%, 100% { translate: 0 0; } }
/* the landing: tabs, form and task board rise into place one after the other the moment the cage touches down; the
   pinned task notes drop onto the board after them */
.wl-grid { transition: opacity .2s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.wl-grid.wl-hold, .wl-tabs.wl-hold { transition: opacity .15s cubic-bezier(.4, 0, 1, 1), visibility 0s .15s; }
.gl .wl-tabs:not(.wl-hold), .gl .wl-grid:not(.wl-hold) > .wl-panel, .gl .wl-grid:not(.wl-hold) > .tasks {
  animation: mh-rise .26s steps(1, end) both, mh-fade .26s cubic-bezier(.22, 1, .36, 1) both; }
.gl .wl-grid:not(.wl-hold) > .wl-panel { animation-delay: 60ms; }
.gl .wl-grid:not(.wl-hold) > .tasks { animation-delay: 120ms; }
.gl .wl-grid:not(.wl-hold) .task { animation: mh-pin .24s steps(1, end) both, mh-fade .2s cubic-bezier(.22, 1, .36, 1) both; animation-delay: 220ms; }
.gl .wl-grid:not(.wl-hold) .task:nth-child(2) { animation-delay: 270ms; }
.gl .wl-grid:not(.wl-hold) .task:nth-child(3) { animation-delay: 320ms; }
.gl .wl-grid:not(.wl-hold) .task:nth-child(4) { animation-delay: 370ms; }
/* "Surface?": the sign drops onto its nails and settles, the call box follows, then its lamp lights up; a press
   pushes the knob and the box into the wall */
@keyframes lc-drop { 0% { translate: 0 -14px; } 20% { translate: 0 -6px; } 40% { translate: 0 -1px; } 55% { translate: 0 2px; } 75% { translate: 0 1px; } 90%, 100% { translate: 0 0; } }
@keyframes lc-settle { 0% { translate: 0 -6px; } 30% { translate: 0 -2px; } 55% { translate: 0 1px; } 80%, 100% { translate: 0 0; } }
@keyframes lc-lamp-on { 0% { background: #00581b; box-shadow: inset 0 2px 0 #368626; } 100% { background: #40ac60; } }
.gl .lift-call.ready .lc-label { animation: lc-drop .3s steps(1, end) .15s both; }
.gl .lift-call.ready .lc-box { animation: lc-settle .24s steps(1, end) .24s both; }
.gl .lift-call.ready .lc-lamp { animation: lc-lamp-on .52s steps(1, end) both, nodeglow 1.2s steps(2) .52s infinite; }
.lift-call .lc-box, .lift-call .lc-label { transition: translate .06s; }
.lift-call:active .lc-box { translate: 0 2px; }
.lift-call:active .lc-label { translate: 0 1px; }
/* speech bubbles open from the tail (0.9 to 1, a small overshoot) and close quicker, easing in */
.bubble { --bs: .9; transform-origin: calc(50% + var(--tail, 0px)) calc(100% + 8px);
  transition: opacity .12s cubic-bezier(.4, 0, 1, 1), --bs .12s cubic-bezier(.4, 0, 1, 1); }
.bubble.below { transform-origin: calc(50% + var(--tail, 0px)) -8px; }
.intro-bubble { transform-origin: 50% calc(100% + 8px); }
.bubble.on { --bs: 1; transition: opacity .18s cubic-bezier(.22, 1, .36, 1), --bs .18s cubic-bezier(.34, 1.56, .64, 1); }
.bubble.cut { transition: none; }
/* the wall notes are carved in: the words are cut from left to right and the fresh cut glows for a moment; they fade
   out quicker than they came */
@keyframes wp-cut { from { filter: brightness(1.7); } }
.gl .wp { transition: opacity .15s cubic-bezier(.4, 0, 1, 1), visibility 0s linear .15s; }
.gl .wp.on { transition: opacity .3s cubic-bezier(.22, 1, .36, 1); }
.js:not(.reduce).gl .wp .wp-face { clip-path: inset(-16px 100% -16px -16px); transition: clip-path 0s .15s; }
.js:not(.reduce).gl .wp.on .wp-face { clip-path: inset(-16px -16px -16px -16px); transition: clip-path .36s cubic-bezier(.22, 1, .36, 1); }
.js:not(.reduce).gl .wp.on .wp-h { animation: wp-cut .5s cubic-bezier(.22, 1, .36, 1) .1s both; }
/* the torch belongs to the carving: it never shows before the words. It is revealed by the same kind of transition as
   the words (a clip-path, flame first, top down), started after the words' cut, so both run on the same clock and the
   torch can never get ahead (an opacity animation runs on the compositor and showed the torch while a busy main thread
   still held the words' clip). A left-hand torch lights just after the cut starts, a right-hand one once the cut has
   reached the end of the words; the flare is a brightness pulse on what the clip already shows. It goes out with the
   note (the note's own fade), and the clip closes again after it */
@keyframes wp-lit { from { filter: brightness(1.7); } }
.js:not(.reduce).gl .wp .wp-torch { clip-path: inset(0 0 100% 0); transition: clip-path 0s .15s; }
.js:not(.reduce).gl .wp.on .wp-torch { clip-path: inset(-100px -90px -50px -90px); transition: clip-path .26s cubic-bezier(.22, 1, .36, 1) .08s; animation: wp-lit .4s cubic-bezier(.22, 1, .36, 1) .08s both; }
.js:not(.reduce).gl .wp.on.t-r .wp-torch { transition-delay: .22s; animation-delay: .22s; }
/* the ride bar rises from the bottom edge (220 ms, ease out) and sinks away quicker (150 ms, ease in; main.ts .leaving) */
@keyframes hud-in { 0% { translate: 0 16px; opacity: 0; } 25% { translate: 0 8px; } 50% { translate: 0 3px; } 75% { translate: 0 1px; } 100% { translate: 0 0; opacity: 1; } }
.ride-hud:not([hidden]) { animation: hud-in .22s steps(1, end) both; }
.ride-hud.leaving { animation: none; translate: 0 12px; opacity: 0; transition: translate .15s cubic-bezier(.4, 0, 1, 1), opacity .15s cubic-bezier(.4, 0, 1, 1); }
/* narrow screens: the gold marker slides under the chosen tab, the other panel rises in */
@media (max-width: 899px) {
  .wl-tabs { position: relative; background: #13131c; }
  .wl-tabs::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: var(--gold);
    box-shadow: inset 0 2px 0 var(--gold-hi), inset 0 -3px 0 var(--gold-lo); transition: translate .22s cubic-bezier(.22, 1, .36, 1); }
  .wl-tabs[data-sel='tasks']::before { translate: 100% 0; }
  .wl-tabs [role='tab'], .wl-tabs [role='tab'][aria-selected='true'] { position: relative; z-index: 1; background: transparent; box-shadow: none; transition: color .15s; }
  .wl-tabs [role='tab'][aria-selected='false'] { box-shadow: inset 0 -3px 0 #070610; }
  .gl .wl-grid:not(.wl-hold) > .wl-panel, .gl .wl-grid:not(.wl-hold) > .tasks { animation-duration: .2s; animation-delay: 40ms; }
}

/* ---------------------------------------------------------------- Connect X (waitlist.ts renderX): the identity of a
   joiner is their X account. X asks that a signed in visitor sees their @handle, picture and the X logo, and an easy
   Sign out; the picture arrives as a data: URL (the CSP keeps images to our origin). Before: a dark X key, "New to X?"
   (X also asks for a way to create an account). Not set up yet: the same key, quiet, with a "Soon" tag. */
.x-priv { color: var(--gold); text-decoration: none; white-space: nowrap; }
.x-priv:hover, .x-priv:focus-visible { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; }
.x-box { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 46px; text-transform: none; letter-spacing: 0; }
.x-connect { --b: #13131c; --bh: #3b3f53; --bl: #070610; --bd: #070610; --fg: #f0e3c9; min-height: 40px; padding: 0 14px; gap: 10px; font-size: 13px; margin: 2px 2px 6px;
  box-shadow: inset 0 2px 0 var(--bh), inset 2px 0 0 var(--bh), inset 0 -2px 0 var(--bl), inset -2px 0 0 var(--bl), 0 0 0 2px #272639, 0 4px 0 2px var(--bd);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), filter .2s ease-out, opacity .25s ease-out; }
.x-connect:active { transform: translateY(3px) scale(.98); transition-duration: .08s; transition-timing-function: ease-in; }
.x-connect .px-ico { flex: none; width: 20px; height: 20px; }
.x-connect.is-wait { opacity: .55; pointer-events: none; }
.x-connect.is-off, .x-connect.is-off:hover, .x-connect.is-off:active { cursor: default; transform: none; filter: grayscale(.5) brightness(.8); }
.x-connect em { font-style: normal; color: #13131c; background: #b9aa99; padding: 4px 6px; letter-spacing: 1px; }
.x-new { font: 13px/1.3 var(--px); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.x-new:hover, .x-new:focus-visible { color: var(--gold-hi); }
.x-trust { flex: 1 1 100%; margin: 2px 0 0; font: 11px/1.45 var(--px); color: var(--muted); max-width: 46ch; }
.x-chip { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; min-height: 44px; padding: 4px 12px 4px 4px;
  font: 13px/1 var(--px); color: var(--text); background: rgba(7, 6, 16, .82); box-shadow: 0 0 0 2px #070610, inset 0 3px 0 rgba(7, 6, 16, .8), 0 2px 0 #3a404e;
  animation: xin .26s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes xin { from { opacity: 0; transform: translateY(4px); } }
.x-av { width: 36px; height: 36px; flex: none; object-fit: cover; box-shadow: 0 0 0 2px #3c465c; }
.x-av-none { display: grid; place-items: center; font: 13px/1 var(--px); color: #f0e3c9; background: #3b3f53; }
.x-at { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-chip .px-ico { flex: none; width: 20px; height: 20px; color: #f0e3c9; }
.x-out { all: unset; cursor: pointer; padding: 6px 2px; font: 13px/1.3 var(--px); color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.x-out:hover { color: var(--gold-hi); }
.x-out:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; }
.reduce .x-chip { animation: none; }
/* joined: the X account, the points and the message. On the one screen landing (desktop) the points take the place of
   the name, the wallet, the note and the button, which stay in the layout unseen: the panel keeps its height and the
   panels stay right under the lava (no band of empty rock opens between them). Phones scroll the finale: there the
   fields simply go. */
.wl-points { display: none; }
#wl-form.joined > .field-wallet, #wl-form.joined > .wl-note, #wl-form.joined > button[type='submit'] { display: none; }
@media (min-width: 900px) {
  .gl #wl-form.joined > .field-wallet, .gl #wl-form.joined > .wl-note, .gl #wl-form.joined > button[type='submit'] { display: flex; visibility: hidden; }
  .gl #wl-form.joined > .field-x { grid-area: 1 / 1 / 2 / 3; }
  .gl #wl-form.joined > .field-wallet { grid-area: 2 / 1 / 3 / 3; }
  .gl #wl-form.joined > .wl-note { grid-area: 3 / 1 / 4 / 3; }
  .gl #wl-form.joined > button[type='submit'] { grid-area: 4 / 1; }
  .gl #wl-form.joined > .wl-msg { grid-area: 5 / 1 / 6 / 3; }
  .gl #wl-form.joined > .wl-points { grid-area: 2 / 1 / 5 / 3; }
}
/* the points: a tally cut into the slab, lit from above by the lava; the number in lava gold, a pip per point under it
   (dark pips: tasks still open on the board) */
#wl-form.joined > .wl-points { display: grid; }
.wl-points { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'n t' 'pips pips'; align-content: center; align-items: center;
  gap: 14px 20px; min-width: 0; padding: 14px 20px;
  background: linear-gradient(rgba(249, 93, 54, .16), transparent 55%), rgba(7, 6, 16, .62);
  box-shadow: 0 0 0 2px #070610, inset 0 3px 0 rgba(7, 6, 16, .8), inset 0 -2px 0 #3a404e, 0 2px 0 #3a404e; animation: xin .26s cubic-bezier(.2, .8, .2, 1) both; }
.wl-pts-n { grid-area: n; min-width: 2ch; font: 52px/1 var(--px); color: var(--gold-hi); text-align: center; text-shadow: 0 4px 0 #1c0906; }
.wl-pts-t { grid-area: t; display: flex; flex-direction: column; gap: 6px; min-width: 0; font: 13px/1.45 var(--px); color: var(--muted); }
.wl-pts-t b { font: 20px/1 var(--px); color: #ffe5af; letter-spacing: 1px; text-transform: uppercase; }
.wl-pips { grid-area: pips; display: flex; flex-wrap: wrap; gap: 6px; }
.wl-pips:empty { display: none; }
.wl-pips i { width: 10px; height: 10px; background: #13131c; box-shadow: 0 0 0 2px #070610, inset 0 2px 0 #272639; }
.wl-pips i.on { background: var(--gold); box-shadow: 0 0 0 2px #070610, inset 0 2px 0 var(--gold-hi), inset 0 -2px 0 var(--gold-lo); }
@media (min-width: 900px) { .gl .wl-pts-n { font-size: 78px; } }
.reduce .wl-points { animation: none; }
/* the card (sharecard.ts, owner 08.10.2026): on the list, under the X account, the visitor's card with Download and
   Share. waitlist.ts shows it once drawn; it rises in (240 ms, ease out, whole pixel steps) and the keys press like
   every key on the site. The preview is the 1200 × 675 PNG at a quarter (300 px: at 1×, 2× and 3× screens every card
   pixel is a whole number of device pixels); narrow phones show it at the panel's width (snapped by waitlist.ts fitCard
   to a whole number of screen pixels per scene pixel) with the keys under it.
   Desktop landing: it takes the row under the X account, the points slab and the unseen fields move one row down. */
.wl-card { display: none; }
#wl-form.joined > .wl-card:not([hidden]) { display: flex; animation: mh-rise .24s steps(1, end) both, mh-fade .24s cubic-bezier(.22, 1, .36, 1) both; }
.wl-card { flex-wrap: wrap; align-items: center; gap: 16px; min-width: 0; }
.wl-card-pic { position: relative; flex: none; width: 300px; line-height: 0; background: #070610; box-shadow: 0 0 0 2px #070610, 0 4px 0 2px rgba(7, 6, 16, .55); }
.wl-card-pic canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.wl-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.wl-card-tag { font: 13px/1 var(--px); color: #13131c; background: #ffe5af; box-shadow: 0 0 0 2px #38160e; padding: 5px 7px; text-transform: uppercase; }
.wl-card-tag[hidden] { display: none; }
.wl-card-side { flex: 1 1 200px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; } /* (a narrow form: under the preview) */
.wl-card-h { font: 26px/1 var(--px); color: #ffe5af; letter-spacing: 2px; text-transform: uppercase; }
.wl-card-p { font: 13px/1.45 var(--px); color: var(--muted); }
.wl-card-acts { display: flex; flex-wrap: wrap; gap: 0 6px; margin-top: 4px; }
#wl-form .wl-card-acts .btn { margin: 2px 2px 7px; gap: 8px; }
.wl-card-acts .px-ico { flex: none; width: 16px; height: 16px; }
.wl-card-alt { all: unset; box-sizing: border-box; cursor: pointer; padding: 4px 0; font: 13px/1.3 var(--px); color: var(--gold); text-decoration: underline; text-underline-offset: 3px; transition: translate .06s; }
.wl-card-alt:hover { color: var(--gold-hi); }
.wl-card-alt:active { translate: 0 1px; }
.wl-card-alt:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; }
.wl-card-note { font: 13px/1.45 var(--px); color: var(--gold-hi); }
.wl-card-note:empty { display: none; }
@media (max-width: 579px) {
  #wl-form.joined > .wl-card:not([hidden]) { flex-direction: column; align-items: stretch; }
  .wl-card-pic { width: 100%; }
}
@media (min-width: 900px) {
  /* (the unseen fields only kept the panel from shrinking; with the card the panel is taller anyway, so they go) */
  .gl #wl-form.joined.carded > .field-wallet, .gl #wl-form.joined.carded > .wl-note, .gl #wl-form.joined.carded > button[type='submit'] { display: none; }
  .gl #wl-form.joined.carded > .wl-card { grid-area: 2 / 1 / 3 / 3; }
  .gl #wl-form.joined.carded > .wl-points { grid-area: 3 / 1 / 4 / 3; }
  .gl #wl-form.joined.carded > .wl-msg { grid-area: 4 / 1 / 5 / 3; }
}
.reduce #wl-form.joined > .wl-card { animation: none; }
/* phones: once every task is done, a key on the task board leads back to the form tab */
.tasks-next { display: none; margin-top: 14px; }
@media (max-width: 899px) { .tasks-next:not([hidden]) { display: inline-flex; } }
#wl-form.x-off > button[type='submit'] { filter: grayscale(.5) brightness(.8); }
/* post rows of the task board (owner 04.10.2026): one row per action (like, reply, repost), each with its own Go and
   Confirm; a Go that was opened gets a green dot. With more than one post a small label heads each post's rows. */
.task-actions { flex-wrap: wrap; justify-content: flex-end; }
.task-group { font: 13px/1 var(--px); color: #ffe5af; text-shadow: 0 2px 0 #1c0906; margin: 6px 0 -4px; }
.task-group:first-child { margin-top: 0; }
.task-empty { font: 13px/1.5 var(--px); color: #ffe5af; text-shadow: 0 2px 0 #1c0906; padding: 10px 2px; }
.tasks-preview { font: 11px/1 var(--px); color: #13131c; background: #ffe5af; box-shadow: 0 0 0 2px #38160e; padding: 5px 7px; margin-right: auto; align-self: center; text-transform: uppercase; }
.tasks-preview[hidden] { display: none; }
/* the break of a confirmed post row (taskbreak.ts): one canvas over the board for the miner, cracks and chips */
.task-break { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; image-rendering: pixelated; }
.task.breaking { pointer-events: none; overflow: hidden; }
.task-go.went::after { content: ''; position: absolute; right: -4px; top: -4px; width: 8px; height: 8px; background: #40ac60; box-shadow: 0 0 0 2px #13131c; }
.task-label { overflow-wrap: anywhere; }
@media (max-width: 479px) { .task-actions { justify-content: flex-start; } }

/* tasks first (owner decision 03.10.2026): Join stays readable but dimmed until X is connected and the join tasks are
   confirmed; it can still be pressed, a press points at the next join task. The notice under it is calm (lava gold, not
   the error red), the next join row wears a gold frame and a gold number. */
#wl-form > button[type='submit'].is-locked { filter: grayscale(.5) brightness(.8); cursor: default; }
#wl-form > button[type='submit'].is-locked:hover { filter: grayscale(.5) brightness(.85); transform: none; }
.wl-msg.calm { color: var(--gold-hi); }
.task.next:not(.checking) { box-shadow: 0 0 0 2px var(--gold), 0 4px 0 rgba(7, 6, 16, .45); }
.task.next:not(.checking) .task-n { background: var(--gold-lo); color: var(--gold-hi); }
@media (max-width: 899px) {
  .wl-tabs [role='tab'].point:not([aria-selected='true']) { color: var(--gold-hi); box-shadow: inset 0 0 0 2px var(--gold), inset 0 -3px 0 #070610; }
}
/* phones: the locked Join pressed opens the Tasks tab; the same calm notice heads the board (enters 240 ms, whole px) */
.tasks-msg { margin: -6px 0 14px; font: 13px/1.5 var(--px); color: var(--gold-hi); animation: tasks-msg-in .24s steps(4) both; }
.tasks-msg[hidden] { display: none; }
@media (min-width: 900px) { .tasks-msg { display: none; } }
@keyframes tasks-msg-in { from { opacity: 0; transform: translateY(-4px); } }
.reduce .tasks-msg { animation: none; }
/* +N: the points an open row still brings (gone once the row is done) */
.task-pts { display: inline-block; margin-left: 8px; padding: 3px 5px 2px; font: 13px/1 var(--px); color: var(--gold-hi); background: #5d2e24;
  box-shadow: 0 2px 0 #1c0906; vertical-align: 1px; white-space: nowrap; }
.task-pts[hidden] { display: none; }

/* ---------------------------------------------------------------- Play loader (loader.ts; play.ts PLAY_OPENS 'game') */
body.loading { overflow: hidden; }
.loader { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--gut);
  background: rgba(7, 6, 16, .0); transition: background .35s; }
.loader[hidden] { display: none; }
.loader.on { background: rgba(7, 6, 16, .92); }
.loader-card { width: min(920px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .35s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.loader.on .loader-card { opacity: 1; transform: none; }
.loader.done .loader-card { opacity: 0; transform: scale(1.03); transition-delay: .1s; }
.loader-card h2 { font: 39px/1.1 var(--px); margin: 0; }
@media (max-width: 759px) { .loader-card h2 { font-size: 26px; } }
.loader-bar { width: 100%; display: flex; justify-content: center; padding: 10px 0; }
#loader-canvas { box-shadow: 0 0 0 3px #272639, 0 0 0 5px var(--line), 0 18px 40px rgba(7, 6, 16, .8); background: #13131c; }
.loader-pct { font: 39px/1 var(--px); color: var(--gold-hi); margin: 0; }
.loader-tip { font: 13px/1.6 var(--px); color: var(--muted); margin: 0 0 8px; min-height: 2em; max-width: 52ch; }

/* ---------------------------------------------------------------- Play: "still digging" (digscene.ts, 03.10.2026)
   A full screen scene over the site: the canvas (the gallery and the close miner), his speech bubble, the two choices
   and the close button. In: a 240 ms ease out fade; out: 150 ms ease in. The bubble opens from its tail (0.9 to 1),
   the choices rise in whole pixel steps one after the other. Reduced motion: the global rule above drops the
   animations, the still is drawn by the script. */
.dig { position: fixed; inset: 0; z-index: 65; overflow: hidden; background: #070610; opacity: 0; transition: opacity .24s cubic-bezier(.22, 1, .36, 1); }
.dig.on { opacity: 1; }
.dig.out { opacity: 0; pointer-events: none; transition: opacity .15s cubic-bezier(.4, 0, 1, 1); }
.dig:focus { outline: none; }
.dig canvas { position: absolute; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; }
body.dig-on { overflow: hidden; }
.dig-bubble { z-index: 3; translate: none; margin-top: 0; padding: 12px 16px 14px; font-size: 26px; line-height: 1.3; letter-spacing: .5px;
  box-shadow: 0 0 0 3px #13131c, 0 7px 0 3px rgba(7, 6, 16, .55); transform: scale(var(--bs, 1)); overflow-wrap: break-word; }
/* the tail: a dark triangle (the outline) under a cream one, so its edges carry the bubble's 3 px line */
.dig-bubble::before, .dig-bubble::after { content: ''; position: absolute; filter: none; margin: 0; }
.dig-bubble::before { left: calc(50% + var(--tail, 0px) - 13px); bottom: -18px; width: 26px; height: 18px; background: #13131c; clip-path: polygon(0 0, 100% 0, 23% 100%); }
.dig-bubble::after { left: calc(50% + var(--tail, 0px) - 9px); bottom: -12px; width: 18px; height: 12px; background: #f2eadb; clip-path: polygon(0 0, 100% 0, 22% 100%); }
.dig-bubble.big { font-size: 39px; line-height: 1.2; padding: 14px 20px 17px; }
/* wide screens: the bubble sits to the right of the miner, clear of his widest pose; its tail runs back to just short
   of his face at the height of his eyes, in 3 px steps (digscene.ts tailPolys: the outline and the fill one step
   inside it, which opens the bubble's line where the tail joins). The bubble opens from the tail's tip. */
.dig-bubble.side { transform-origin: calc(-1 * var(--tl, 18px)) var(--tailY, 50%); }
.dig-bubble.side::before, .dig-bubble.side::after { left: calc(-1 * var(--tl, 18px)); top: 0; bottom: auto; width: calc(var(--tl, 18px) + 6px); height: 100%; }
.dig-bubble.side::before { clip-path: var(--tail-o, polygon(0 0, 0 0, 0 0)); }
.dig-bubble.side::after { clip-path: var(--tail-i, polygon(0 0, 0 0, 0 0)); }
/* no art (a failed request): the bubble alone in the middle, no tail */
.dig-bubble.solo::before, .dig-bubble.solo::after { display: none; }
.dig-acts { position: absolute; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.dig-acts[hidden] { display: none; }
.dig-acts > .btn { animation: mh-rise .26s steps(1, end) both, mh-fade .24s cubic-bezier(.22, 1, .36, 1) both; }
.dig-acts > .btn + .btn { animation-delay: 70ms; }
.dig-acts.stack { right: 16px; flex-direction: column; align-items: stretch; gap: 6px; }
.dig-acts.stack > .btn { width: auto; }
.dig-x { all: unset; box-sizing: border-box; position: absolute; z-index: 4; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right));
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; color: #f2eadb; background: #1c1f29;
  box-shadow: inset 0 2px 0 #3b3f53, inset 2px 0 0 #3b3f53, inset 0 -2px 0 #0e0e1a, inset -2px 0 0 #0e0e1a, 0 0 0 2px #272639, 0 4px 0 2px #070610; transition: transform .08s; }
.dig-x:hover { color: #ffe5af; }
.dig-x:active { transform: translateY(3px); box-shadow: inset 0 2px 0 #3b3f53, inset 2px 0 0 #3b3f53, inset 0 -2px 0 #0e0e1a, inset -2px 0 0 #0e0e1a, 0 0 0 2px #272639, 0 1px 0 2px #070610; }
.dig-x:focus-visible { outline: 3px solid #ffe5af; outline-offset: 3px; }
@media (max-width: 759px) { .dig-bubble { font-size: 26px; padding: 10px 13px 12px; } }
/* (no transition on the text: under reduced motion the global rule above would ease its size for .01 ms, and the
   bubble is measured right after its size class changes) */
.dig-bubble span { transition: none !important; }
/* every sentence or clause is its own line (a paragraph each: a forced break would switch "pretty" off); one that has
   to wrap keeps a lone word off its last line (TR on a short landscape phone: "gel." on its own), and the script
   then fits the bubble to its longest line. The part not typed yet takes its place already, hidden, so the breaks
   never move while the line is typed */
.dig-seg { display: block; }
.dig-bubble { text-wrap: pretty; }
.dig-rest { visibility: hidden; }

/* ---- operator page (ops.html) ---- */
.ops-main { max-width: 860px; }
.ops-app { display: grid; gap: 28px; }
.ops-card { padding: 24px 28px 22px; }
.ops-card h2 { font-size: 26px; margin-bottom: 14px; }
.ops-wait { font: 16px/1.5 var(--px); color: var(--muted); }
.ops-row, .ops-head { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.ops-head { justify-content: space-between; margin-bottom: 18px; font: 15px/1.4 var(--px); color: var(--muted); }
.ops-form { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; margin-bottom: 14px; }
.ops-form .field input { font-size: 18px; }
.ops-inline { margin: 0 0 0 10px; vertical-align: middle; }
.ops-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; }
.ops-stats dt { font: 13px/1.3 var(--px); color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.ops-stats dd { margin: 6px 0 0; font: 39px/1 var(--px); color: var(--gold-hi); text-shadow: 0 3px 0 #070610; }
.ops-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ops-post { --st: #40ac60; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 10px 12px;
  background: rgba(7, 6, 16, .55); box-shadow: inset 4px 0 0 var(--st); }
.ops-post[data-st='wait'] { --st: #ddbd6f; }
.ops-post[data-st='hidden'] { --st: #717b89; opacity: .82; }
.ops-post[data-st='err'] { --st: #ffa287; }
.ops-auto { margin: 0 0 16px; }
.ops-auto + .wl-msg { margin: -8px 0 16px !important; }
.ops-post .btn { margin-bottom: 4px; }
.ops-pill { font: 12px/1 var(--px); color: #13131c; background: var(--st); padding: 5px 8px; letter-spacing: 1px; text-transform: uppercase; }
.ops-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 14px/1.4 var(--px); color: var(--muted); min-width: 0; }
.ops-meta a { color: var(--sky); }
.ops-src { color: var(--dim); }
.ops-none { color: var(--muted); }
@media (max-width: 759px) {
  .ops-card { padding: 20px 16px 18px; }
  .ops-form { grid-template-columns: 1fr; }
  .ops-post { grid-template-columns: 1fr auto; }
  .ops-meta { grid-column: 1 / -1; grid-row: 2; }
}

/* ---- XP rank under the points (waitlist, once on the list) ---- */
.wl-rank { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; color: var(--sky); text-decoration: none; font: 13px/1.4 var(--px); }
.wl-rank b { color: #ffe5af; font: 16px/1 var(--px); letter-spacing: 1px; }
.wl-rank b[hidden] { display: none; }
.wl-rank span { text-decoration: underline; text-underline-offset: 3px; }
.wl-rank:hover span { color: #ffe5af; }

/* ---- leaderboard page (leaderboard.html) ---- */
.lb-main { max-width: 980px; }
.lb-card { padding: 24px 28px 26px; }
.lb-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.panel h2.lb-top-h { font-size: 26px; margin: 0; }
.lb-total { font: 13px/1.3 var(--px); color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.lb-you { margin: 0 0 16px !important; padding: 10px 14px; font: 15px/1.4 var(--px); color: #ffe5af !important; background: rgba(98, 64, 0, .35); box-shadow: inset 4px 0 0 var(--gold); }
.lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lb-row { --m: #3c465c; --mh: #717b89; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px 10px 10px;
  background: rgba(7, 6, 16, .6); box-shadow: inset 0 0 0 2px #1c1f29; }
.lb-badge { display: grid; place-items: center; width: 40px; height: 40px; font: 16px/1 var(--px); color: var(--text); background: var(--m); box-shadow: inset 0 3px 0 var(--mh), inset 0 -3px 0 rgba(7, 6, 16, .5); }
.lb-m1 { --m: #b19835; --mh: #ffe5af; } .lb-m2 { --m: #717b89; --mh: #f2eadb; } .lb-m3 { --m: #936a00; --mh: #ddbd6f; }
.lb-m1 .lb-badge, .lb-m2 .lb-badge, .lb-m3 .lb-badge { color: #13131c; }
.lb-m1 { box-shadow: inset 0 0 0 2px #624000; }
.lb-who { display: grid; gap: 7px; min-width: 0; }
.lb-who a { font: 18px/1.15 var(--px); color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-who a:hover { color: #ffe5af; }
.lb-you-tag { justify-self: start; margin-top: -2px; font: 11px/1 var(--px); color: #13131c; background: var(--sky); padding: 3px 6px; letter-spacing: 1px; text-transform: uppercase; }
.lb-bar { display: block; height: 6px; background: #1c1f29; }
.lb-bar i { display: block; height: 100%; background: var(--m); box-shadow: inset 0 2px 0 var(--mh); }
.lb-row:not(.lb-m1):not(.lb-m2):not(.lb-m3) .lb-bar i { background: #3c465c; box-shadow: inset 0 2px 0 #56576a; }
.lb-xp { font: 22px/1 var(--px); color: #ffe5af; text-shadow: 0 3px 0 #070610; white-space: nowrap; text-align: right; }
.lb-xp small { font-size: 13px; color: var(--muted); text-shadow: none; }
.lb-me { box-shadow: inset 0 0 0 2px var(--sky); background: rgba(28, 31, 41, .9); }
.lb-ghost span { display: block; height: 18px; background: #1c1f29; }
.lb-ghost span:first-child { width: 40px; height: 40px; }
.js:not(.reduce) .lb-ghost span { animation: lb-pulse 1.2s steps(4, end) infinite alternate; }
@keyframes lb-pulse { to { background: #3b3f53; } }
.lb-note { margin: 16px 0 14px !important; font: 13px/1.5 var(--px); color: var(--muted) !important; }
.lb-note:empty { display: none; }
.lb-cta { justify-self: start; }
@media (max-width: 759px) {
  .lb-card { padding: 20px 14px 22px; }
  .lb-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px 8px 8px; }
  .lb-badge { width: 34px; height: 34px; font-size: 14px; }
  .lb-who a { font-size: 15px; }
  .lb-xp { font-size: 18px; }
}
.ops-pill { justify-self: start; }
.ops-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ops-table-wrap { overflow-x: auto; max-height: 560px; overflow-y: auto; box-shadow: inset 0 0 0 2px #1c1f29; }
.ops-table { width: 100%; border-collapse: collapse; font: 13px/1.35 var(--px); color: var(--text); }
.ops-table th { position: sticky; top: 0; background: #13131c; color: var(--muted); text-align: left; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; }
.ops-table th, .ops-table td { padding: 8px 10px; white-space: nowrap; border-bottom: 1px solid #1c1f29; }
.ops-table td.ops-w { font-family: ui-monospace, monospace; font-size: 12px; color: #93e2e3; }
.ops-table td.ops-n { text-align: right; color: #ffe5af; }
/* the leaderboard is one tap from the task board (phones have no header links) */
.tasks-lb { margin-left: auto; font: 13px/1 var(--px); color: #ffe5af; letter-spacing: 1px; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.tasks-lb:hover { color: #fff; }
.tasks-head .tasks-progress { margin-left: 4px; }
/* operator page: sign in, accounts, log */
.ops-narrow { max-width: 520px; }
.ops-stack { display: grid; gap: 14px; margin: 6px 0 12px; }
.ops-stack .btn { justify-self: start; }
.ops-form3 { grid-template-columns: 1fr 1fr auto; }
.field select { font: 16px/1 var(--px); color: var(--text); background: #0e101f; border: 0; padding: 12px 10px; width: 100%; min-width: 0; box-shadow: 0 0 0 2px #070610, inset 0 3px 0 rgba(7, 6, 16, .6); }
.field select:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--gold-hi); }
.field input[type='password'] { font-family: var(--sans); font-size: 20px; letter-spacing: 2px; }
.ops-remove { margin: 4px 0 16px; padding: 14px; background: rgba(93, 46, 36, .45); box-shadow: inset 4px 0 0 #c15c37; max-width: 560px; }
.ops-remove h3 { margin: 0; font: 16px/1.3 var(--px); color: #ffe5af; } .ops-remove p { margin: 0; }
.ops-check { display: flex; gap: 10px; align-items: center; font: 13px/1.4 var(--px); color: var(--text); }
.ops-check input { width: 18px; height: 18px; accent-color: #c15c37; }
.ops-secret { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 4px 0 16px; padding: 12px 14px; background: rgba(98, 64, 0, .35); box-shadow: inset 4px 0 0 var(--gold); font: 14px/1.4 var(--px); color: #ffe5af; }
.ops-secret code { font: 18px/1.2 ui-monospace, monospace; color: #fff; background: #070610; padding: 6px 10px; user-select: all; letter-spacing: 1px; }
.ops-secret .btn { margin-bottom: 4px; }
.ops-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font: 13px/1.45 var(--px); color: var(--text); max-height: 420px; overflow-y: auto; }
.ops-log b { color: #ffe5af; font-weight: 400; }
@media (max-width: 759px) { .ops-form3 { grid-template-columns: 1fr; } }
.ops-pill.ops-name { text-transform: none; letter-spacing: .5px; }
.ops-head + .wl-msg { margin-bottom: 14px !important; }