/* INCA GOLD INC. — broadcast HUD.
   Palette and typographic voice carried over from the brochure build: Vegas
   neon over Andean night, gold on deep violet. Rewritten Aug 2026 for the
   radical simplification (docs/UI2.md): ONE screen — the mine — with a strip
   of four numbers and a verb on its bottom edge. No rail, no tabs, no dock.

   Colour law: gold is the Company's voice and the BUY button, nothing else.
   Jade is up/buys, red is down/sells. P&L is NEVER gold — the moment profit
   and the house share a colour, the page is lying about whose money is whose. */
:root{
  --night:#0a0518; --felt:#1b0b33; --panel:#1e0d38; --panel-2:#2a1249; --ink:#06030e;
  --gold:#ffc93c; --gold-hi:#fff3b0; --gold-lo:#c98700; --gold-deep:#7a4f00;
  --pink:#ff2d95; --cyan:#00e5ff; --jade:#16d6c1; --red:#ff3b5c;
  --txt:#f3e6c8; --dim:#a892c9;
  /* The HUD's own three: company gold, up, down. The louder legacy trio above
     stays for the cold open and dialogue, which were approved as they are. */
  --co:#f2b23c; --up:#35d0a5; --dn:#e0564f; --cream:#f6e9cf;
  --disp:'Arial Black','Arial Bold',Impact,system-ui,sans-serif;
  --serif:'Hoefler Text','Iowan Old Style',Georgia,serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --bar:46px;
}
/* ── THE PIXEL FACE ───────────────────────────────────────────────────────
   Press Start 2P, SIL OFL 1.1, vendored (6.6KB latin subset) rather than
   linked: the site deploys as plain files with no build step and no external
   requests, and a webfont that 404s silently falls back to something that is
   not a pixel font at all — which is worse than not having one.
   `swap` so the bubble is readable during the ~0ms this actually takes. */
@font-face{
  font-family:'PixelFace';
  src:url('vendor/pressstart.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
:root{--pixel:'PixelFace',ui-monospace,'SF Mono',Menlo,monospace}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ink);color:var(--txt);font-family:var(--serif);font-size:16px;
  line-height:1.55;-webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none}
body.booting{background:#000}
button{font:inherit;cursor:pointer}
.hint{font-size:11.5px;color:var(--dim);line-height:1.5;margin:8px 0 0}
.hint b{color:var(--gold)}
[hidden]{display:none!important}

/* ══ COLD OPEN ═══════════════════════════════════════════════════════════ */
.cold{position:fixed;inset:0;z-index:300;background:#000;display:grid;place-items:center;
  overflow:hidden;transition:opacity .8s ease}
.cold.out{opacity:0;pointer-events:none}
.cold-sky{position:absolute;inset:0;opacity:0;transition:opacity 2.4s ease;
  background:radial-gradient(ellipse 70% 55% at 50% 62%,rgba(255,201,60,.20),transparent 70%),
             radial-gradient(ellipse 40% 40% at 22% 30%,rgba(255,45,149,.14),transparent 70%),
             radial-gradient(ellipse 40% 40% at 78% 34%,rgba(0,229,255,.12),transparent 70%)}
.cold.lit .cold-sky{opacity:1}
.cold-jefe{position:absolute;left:50%;bottom:0;width:min(78vh,92vw);max-width:760px;
  transform:translate(-50%,6%) scale(1.06);opacity:0;filter:brightness(0) drop-shadow(0 0 60px rgba(255,201,60,.4));
  transition:opacity 2.2s ease,filter 2.6s ease,transform 9s cubic-bezier(.2,.6,.3,1)}
.cold.lit .cold-jefe{opacity:1;filter:brightness(1) drop-shadow(0 0 70px rgba(255,201,60,.5));
  transform:translate(-50%,4%) scale(1.13)}
.cold.talking .cold-jefe{animation:jefe-talk 2.6s ease-in-out infinite}
@keyframes jefe-talk{0%,100%{transform:translate(-50%,4%) scale(1.13)}50%{transform:translate(-50%,3.2%) scale(1.138)}}

.press-start{position:relative;z-index:2;background:none;border:0;color:var(--gold-hi);
  display:grid;gap:9px;justify-items:center;padding:26px 34px}
.ps-k{font-family:var(--disp);font-size:clamp(20px,4.4vw,34px);letter-spacing:.24em;
  text-shadow:0 0 6px #fff,0 0 22px var(--gold),0 0 54px var(--gold-lo);animation:ps 1.5s steps(1) infinite}
.ps-s{font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
@keyframes ps{0%,55%{opacity:1}56%,100%{opacity:.18}}
.press-start:hover .ps-k{animation:none;opacity:1}

/* ══ DIALOGUE BOX ════════════════════════════════════════════════════════
   Deliberately old: a hard-edged plate, a name tag welded to its top-left, a
   blinking advance arrow, and text that arrives one character at a time. */
.dlg{position:fixed;inset:0;z-index:320;display:grid;align-items:end;justify-items:center;
  padding:0 16px 22px;pointer-events:auto;background:linear-gradient(180deg,transparent 40%,rgba(4,2,10,.72))}
.dlg.center{align-items:center;background:rgba(5,2,12,.86);backdrop-filter:blur(6px)}
.dlg-box{position:relative;width:min(860px,100%);background:linear-gradient(180deg,#241041,#150a28);
  border:3px solid var(--gold);border-radius:6px;padding:26px 24px 22px;
  box-shadow:0 0 0 3px var(--ink),0 0 34px rgba(255,201,60,.28),0 26px 70px rgba(0,0,0,.85);
  animation:dlg-in .18s steps(3)}
@keyframes dlg-in{from{transform:scaleY(.2);opacity:.4}to{transform:none;opacity:1}}
/* ── EL JEFE, IN THE CONVERSATION ─────────────────────────────────────────
   Hidden by default and shown only on `.dlg.center`, which is precisely the
   set of conversations that happen over the app rather than over the cold open
   — ASK EL JEFE, the muster roll, the sell warning, the RPC error. The cold
   open has the full-size mascot behind the box already, so showing this there
   would put two of him on screen.

   It is anchored to the BOX, not to the viewport: `.dlg.center` centres the
   box vertically, so its top edge is at 50% minus half its height, and
   --dlg-h is published by dialogue.js on every change (a line, a choice list,
   an input all resize it). Anchoring to a guess is what buried the mascot
   behind the box on the phone cold open, and this is the same trap.

   `cover` on a band wider than it is tall crops the LOWER body — which is the
   part nobody needs — and the cut lands flush against the box's top edge, so
   it reads as him leaning over the text rather than as a rectangle. */
.dlg-bust{display:none;position:absolute;left:50%;
  /* THE BOX MOVES, SO THE ANCHOR HAS TO FOLLOW IT. The dialogue sits at the
     BOTTOM by default (ASK EL JEFE, the cold open) and is CENTRED for the
     modal scenes, so the bust needs both offsets — and both are expressed
     against --dlg-h, which dialogue.js republishes every time the box grows a
     line, a choice list or an input. */
  bottom:calc(var(--dlg-h,150px) + 26px);
  transform:translateX(-50%);
  width:min(340px,68vw);height:min(24vh,210px);
  object-fit:cover;object-position:center 8%;
  pointer-events:none;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.75)) drop-shadow(0 0 44px rgba(255,201,60,.34))}
.dlg.center .dlg-bust{bottom:calc(50% + (var(--dlg-h,150px) / 2) - 4px)}
@keyframes bust-in{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translateX(-50%)}}
/* He bobs while the box is up. Translate only — a scale on an element already
   two thirds of a phone's width clips his ears on every cycle. */
.dlg.has-bust .dlg-bust{display:block;
  animation:bust-in .34s cubic-bezier(.2,1.2,.4,1) both,
  bust-bob 2.6s ease-in-out .34s infinite}
@keyframes bust-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-6px)}}
@media (max-width:560px){
  .dlg-bust{width:min(300px,84vw);height:min(20vh,170px)}
}

.dlg-plate{position:absolute;top:-15px;left:16px;display:flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));color:#2a1a04;border:2px solid var(--ink);
  border-radius:4px;padding:3px 12px 3px 4px;font-family:var(--disp);font-size:12px;letter-spacing:.14em}
.dlg-plate img{width:26px;height:26px;object-fit:contain}
.dlg-text{font-size:clamp(16px,2.1vw,20px);line-height:1.62;min-height:5.2em;color:#fff6e2;
  text-shadow:0 2px 0 rgba(0,0,0,.5)}
.dlg-text b{color:var(--gold-hi)}
.dlg-text em{color:var(--cyan);font-style:italic}
.dlg-text .cursor{opacity:.9}
.dlg-next{position:absolute;right:18px;bottom:12px;color:var(--gold);font-size:15px;
  animation:bounce .9s ease-in-out infinite;text-shadow:0 0 10px var(--gold)}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.dlg-choices{display:grid;gap:7px;margin-top:16px}
.dlg-choices button{background:rgba(0,0,0,.45);border:2px solid rgba(255,201,60,.4);border-radius:4px;
  color:var(--txt);text-align:left;padding:12px 14px 12px 34px;font-size:15px;position:relative;
  transition:.12s;font-family:var(--serif)}
.dlg-choices button::before{content:"▸";position:absolute;left:13px;color:var(--gold);opacity:0}
.dlg-choices button:hover,.dlg-choices button:focus-visible{border-color:var(--gold);
  background:rgba(255,201,60,.13);outline:0;color:#fff}
.dlg-choices button:hover::before,.dlg-choices button:focus-visible::before{opacity:1}
.dlg-choices button.warn{border-color:rgba(255,59,92,.5);color:#ffb3c0}
.dlg-choices button.warn:hover{border-color:var(--red);background:rgba(255,59,92,.14)}
.dlg-input{display:flex;gap:8px;margin-top:15px;flex-wrap:wrap}
.dlg-input input{flex:1 1 240px;min-width:0;background:rgba(0,0,0,.6);border:2px solid rgba(255,201,60,.4);
  border-radius:4px;color:var(--gold-hi);font-family:var(--mono);font-size:14px;padding:12px 13px}
.dlg-input input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 14px rgba(255,201,60,.3)}
.dlg-input button{background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));border:2px solid var(--ink);
  border-radius:4px;color:#2a1a04;font-family:var(--disp);font-size:12px;letter-spacing:.12em;padding:0 20px}
.dlg-err{color:var(--red);font-family:var(--mono);font-size:11.5px;margin-top:9px;min-height:15px}
.dlg-skip{position:fixed;top:14px;right:16px;background:rgba(0,0,0,.5);border:1px solid rgba(255,201,60,.3);
  border-radius:4px;color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.2em;padding:8px 13px}
.dlg-skip:hover{color:var(--gold);border-color:var(--gold)}

/* ══ SLIDE LAYER ═════════════════════════════════════════════════════════
   Sits between the black and the mascot. When a slide is up El Jefe steps to
   the left third and shrinks — every plate is composed with that third left
   deliberately empty, so he lands in dead space rather than on the subject. */
.slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none}
.slide.on{opacity:1}
.slide-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s ease;transform:scale(1.04);animation:ken 26s ease-in-out infinite alternate}
.slide-art.on{opacity:.82}
@keyframes ken{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.12) translate(-1.4%,-1%)}}
/* the plates are lit for a cinema, not for text on top of them */
.slide-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,3,14,.55) 0%,rgba(6,3,14,.12) 30%,rgba(6,3,14,.72) 78%,rgba(6,3,14,.94) 100%),
             linear-gradient(90deg,rgba(6,3,14,.86) 0%,rgba(6,3,14,.3) 34%,transparent 60%)}

.cold-jefe.aside{left:20%;width:min(46vh,44vw);
  transform:translate(-50%,4%) scale(1);animation:none}
.cold.talking .cold-jefe.aside{animation:jefe-talk-aside 2.6s ease-in-out infinite}
@keyframes jefe-talk-aside{0%,100%{transform:translate(-50%,4%) scale(1)}50%{transform:translate(-50%,3.2%) scale(1.012)}}

/* ANCHORED ABOVE THE DIALOGUE BOX, not centred against a guess.
   This used to be `top:50%; translateY(-58%)`, a magic offset tuned against a
   two-line box. The box is not a fixed height — it grows with a long line and
   again with a choice list — so on the tallest state (text plus three choices)
   the diagram slid underneath it and lost its bottom rows. On the pit-check
   slide the bottom row is the "THE LIST IS THE ENTRY, NOT THE COIN" warning,
   i.e. the one line on the whole slide that must never be the one that gets
   covered.

   --dlg-h is published by dialogue.js on every change for exactly this, and
   the mobile rule below has always used it. This is the desktop catching up. */
.slide-viz{position:absolute;right:4%;top:auto;bottom:calc(var(--dlg-h,150px) + 44px);
  width:min(560px,52%);opacity:0;transition:opacity .5s ease;padding:22px 20px;border-radius:14px}
/* The plates are busy by design, so a diagram laid straight over one loses its
   thin strokes and small labels. A soft own-shadow behind the figure, not a
   card — a hard panel would read as a slide deck pasted onto a painting. */
.slide-viz::before{content:"";position:absolute;inset:-6% -4%;border-radius:50%;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(6,3,14,.88) 0%,rgba(6,3,14,.7) 45%,transparent 72%)}
.slide-viz.on{opacity:1}
.slide-cap{position:absolute;left:0;right:0;top:5%;text-align:center;font-family:var(--mono);
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-lo);
  opacity:0;transition:opacity .5s ease}
.slide-cap.on{opacity:1}

/* ── diagram: the fee split ── */
.viz-split{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center}
.donut{width:min(230px,46%);flex:0 0 auto;filter:drop-shadow(0 8px 28px rgba(0,0,0,.7))}
.donut .arc{animation:arc-in .8s cubic-bezier(.2,.9,.3,1) both}
@keyframes arc-in{from{stroke-dasharray:0 9999}}
.donut text{text-anchor:middle;font-family:var(--mono);fill:var(--gold-hi)}
.donut .d-c1{font-size:26px;font-weight:700}
.donut .d-c2{font-size:8px;letter-spacing:.16em;fill:var(--dim)}
.viz-legend{display:grid;gap:9px;flex:1 1 190px;min-width:0}
.lg-row{display:flex;align-items:baseline;gap:9px;animation:slide-in .5s ease both}
.lg-row i{width:11px;height:11px;border-radius:3px;flex:0 0 11px;align-self:center}
.lg-row b{font-family:var(--mono);font-size:19px;color:var(--gold-hi);min-width:2.6em}
.lg-row span{font-size:13px;color:var(--txt)}
@keyframes slide-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* ── diagram: the crew rule ── */
.viz-crew{text-align:center}
.vc-h{font-family:var(--mono);font-size:15px;letter-spacing:.16em;color:var(--gold-hi)}
.coins{display:flex;gap:5px;justify-content:center;margin:12px 0}
.coin{width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));
  box-shadow:0 0 12px rgba(255,201,60,.55),inset 0 2px 3px rgba(255,255,255,.7);
  animation:coin-in .4s cubic-bezier(.2,1.5,.4,1) both}
@keyframes coin-in{from{opacity:0;transform:translateY(-16px) scale(.4)}to{opacity:1;transform:none}}
.vc-arrow{color:var(--gold);font-size:22px;animation:bounce 1.1s ease-in-out infinite}
.vc-worker{width:96px;height:96px;animation:pop-in .5s cubic-bezier(.2,1.5,.4,1) .95s both;
  filter:drop-shadow(0 0 16px rgba(255,201,60,.6))}
@keyframes pop-in{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.vc-f{font-family:var(--disp);font-size:17px;color:var(--gold-hi);letter-spacing:.06em;margin-top:6px;
  animation:slide-in .5s ease 1.15s both}
.vc-s{font-size:12.5px;color:var(--dim);font-style:italic;margin-top:5px;
  animation:slide-in .5s ease 1.3s both}

/* ── diagram: the draw ──
   A hundred workers arriving in a stagger. They do NOT swing: the floor
   diagram's crew is working and this one has not started yet, and animating
   them as if they were already down there would be the picture claiming
   something the page spends its whole length refusing to claim. */
.viz-draw{text-align:center}
.vd-h{font-family:var(--mono);font-size:14px;letter-spacing:.16em;color:var(--gold-hi);margin-bottom:4px}
.viz-draw svg{width:100%;filter:drop-shadow(0 8px 24px rgba(0,0,0,.6))}
.viz-draw .wk.drawn{animation:pop-in .34s cubic-bezier(.2,1.5,.4,1) both;
  transform-box:fill-box;transform-origin:50% 88%;filter:drop-shadow(0 0 4px rgba(255,201,60,.5))}
.vd-f{font-family:var(--disp);font-size:17px;color:var(--gold-hi);letter-spacing:.06em;margin-top:8px;
  animation:slide-in .5s ease 1.5s both}
.vd-s{font-size:12.5px;color:var(--dim);font-style:italic;margin-top:5px;
  animation:slide-in .5s ease 1.65s both}

/* ── diagram: the pit check ── */
.viz-tag{display:flex;align-items:center;gap:20px;justify-content:center;flex-wrap:wrap}
.vt-img{width:min(168px,34%);height:auto;flex:0 0 auto;
  animation:pop-in .55s cubic-bezier(.2,1.5,.4,1) both;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(255,201,60,.35))}
/* The office plate is a lit window and a lamp, so this text lands on the
   busiest quarter of the busiest slide. The layer's radial scrim is tuned for
   line art on dark ground and is not enough for small italics here — hence the
   hard shadow and the lift off --dim, which is a colour chosen for reading on
   a panel rather than on a painting. */
.vt-txt{flex:1 1 190px;min-width:0;text-shadow:0 2px 6px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.8)}
/* The exchange rate is the headline, because it is the mechanic. */
.vt-rate{font-family:var(--disp);font-size:15px;color:var(--cream);letter-spacing:.05em;line-height:1.4;
  animation:slide-in .5s ease .45s both}
.vt-rate b{font-family:var(--mono);font-size:24px;color:var(--gold-hi);vertical-align:-1px}
.vt-eq{color:var(--gold);margin:0 3px}
.vt-s{font-size:12.5px;color:var(--cream);opacity:.85;font-style:italic;margin-top:5px;
  animation:slide-in .5s ease .6s both}
/* Jade, not red. This box used to carry a warning that buying the coin bought
   you nothing — the opposite of how the draw works. It now says the true
   thing, which is an invitation, so it wears the up colour. */
.vt-w{margin-top:11px;display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  line-height:1.7;color:#8ff0d8;border:1px solid rgba(53,208,165,.5);border-radius:4px;padding:6px 10px;
  animation:slide-in .5s ease .78s both}

.fl-foot{flex:1 0 100%;text-align:center;font-family:var(--mono);font-size:10.5px;color:var(--dim);
  letter-spacing:.1em;margin-top:10px;animation:slide-in .5s ease .9s both}

/* ── diagram: the seniority curve ── */
.viz-sen{text-align:center}
.curve{width:100%;max-width:420px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.6))}
.curve .ax{stroke:rgba(255,201,60,.3);stroke-width:1.5}
.curve .ax.dash{stroke-dasharray:5 5;stroke:rgba(22,214,193,.5)}
.curve .tk{font-family:var(--mono);font-size:11px;fill:var(--dim);text-anchor:end}
.curve .tk.mid{text-anchor:middle}
.curve .ln{fill:none;stroke:var(--gold);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 8px var(--gold-lo));
  stroke-dasharray:1000;stroke-dashoffset:1000;animation:draw 1.6s ease .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.curve .cap{fill:var(--jade);animation:pop-in .4s cubic-bezier(.2,1.5,.4,1) 1.5s both}
.vs-f{font-family:var(--disp);font-size:17px;color:var(--jade);letter-spacing:.06em;margin-top:4px;
  text-shadow:0 0 14px rgba(22,214,193,.5);animation:slide-in .5s ease 1.6s both}
.vs-s{font-size:12.5px;color:var(--dim);margin-top:5px;animation:slide-in .5s ease 1.75s both}
.vs-s b{color:#ffb3c0}

/* ── diagram: the loop ── */
.viz-flow{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}
.fl-n{flex:0 0 auto;text-align:center;border:2px solid var(--c);border-radius:8px;padding:11px 13px;
  background:rgba(6,3,14,.7);min-width:88px;animation:pop-in .45s cubic-bezier(.2,1.4,.4,1) both;
  box-shadow:0 0 20px color-mix(in srgb,var(--c) 30%,transparent)}
.fl-n b{display:block;font-family:var(--disp);font-size:13px;color:var(--c);letter-spacing:.08em}
.fl-n span{display:block;font-size:11px;color:var(--dim);margin-top:2px}
.fl-p{flex:0 0 34px;height:2px;background:rgba(255,201,60,.3);position:relative;
  animation:slide-in .4s ease both}
.fl-p i{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 10px var(--gold);animation:travel 1.6s linear infinite}
@keyframes travel{from{left:-4px;opacity:0}12%{opacity:1}88%{opacity:1}to{left:30px;opacity:0}}

/* ── diagram: the floor ── */
.viz-floor{text-align:center}
.viz-floor svg{width:100%;filter:drop-shadow(0 8px 24px rgba(0,0,0,.6))}
.viz-floor .wk{animation:swing 1.3s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 88%}
.viz-floor .wk.them{opacity:.42;filter:saturate(.35)}
.viz-floor .wk.mine{filter:drop-shadow(0 0 6px var(--gold))}
.vf-k{display:flex;gap:16px;justify-content:center;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;margin-top:6px}
.vf-k .mine{color:var(--gold)}
.vf-k .them{color:var(--dim)}
.vf-f{font-family:var(--disp);font-size:14px;color:var(--gold-hi);letter-spacing:.07em;margin-top:8px}

/* ══ APP SHELL ═══════════════════════════════════════════════════════════
   THE MINE IS THE SCREEN. The canvas fills the viewport and every piece of
   chrome floats over it on a scrim, so the page reads as one scene with a HUD
   rather than boxes sharing a window. A grid that gives the canvas a *column*
   spends the whole budget on chrome — measured on the old build: 244px of
   floor out of an 844px phone. */
.app{position:relative;height:100dvh;overflow:hidden;background:var(--night);
  opacity:0;transition:opacity .7s ease}
.app.on{opacity:1}

.stage{position:absolute;inset:0;z-index:1;overflow:hidden;background:#0b0618;isolation:isolate}
#mine{position:absolute;inset:0;width:100%;height:100%;display:block;outline:0;touch-action:none}
.stage-fallback{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;
  padding:20px;text-align:center;background:radial-gradient(ellipse 60% 60% at 50% 70%,#1d0f36,#0b0618 70%);
  transition:opacity .6s ease}
.stage-fallback.gone{opacity:0;pointer-events:none}
.stage-fallback img{width:min(180px,34vw);filter:drop-shadow(0 0 26px rgba(255,201,60,.45));
  animation:bob 3.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.stage-fallback p{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);margin:0}
.crew2d{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;max-width:340px;font-size:18px}
.crew2d span{animation:swing 1.1s ease-in-out infinite;transform-origin:50% 90%}
@keyframes swing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}

/* El Jefe's speech bubble, floating on the scene above the strip. */
.ov{position:absolute;z-index:3;pointer-events:none}
/* ── EL JEFE'S SPEECH BUBBLE ──────────────────────────────────────────────
   Hung off the SPRITE, not parked in a corner. js/hud.js reads his screen
   position from the mine each frame and writes --bub-x / --bub-y, so the words
   come out of the llama you are watching. It falls back to the bottom-left
   corner when the mine is not up (WebGL missing, or before boot) — the message
   still matters even when there is nobody on screen to say it.

   Pixel face, and BIG. It was 14px in the page's serif, which read as a caption
   about the game rather than as the mascot talking. */
.bubble{
  left:var(--bub-x,14px);top:var(--bub-y,auto);
  transform:translate(-50%,-100%);
  max-width:min(340px,78vw);
  background:linear-gradient(180deg,#fff8e2,#f0dda6);color:#2a1a04;
  padding:14px 16px 15px;border-radius:4px;
  font-family:var(--pixel);font-size:12px;line-height:1.85;letter-spacing:.02em;
  /* Hard pixel-game chrome: a flat dark keyline and a blocky drop, no blur —
     a soft 30px shadow under a pixel font is two eras in one object. */
  box-shadow:0 0 0 3px var(--ink),0 6px 0 0 rgba(0,0,0,.55),0 14px 34px rgba(0,0,0,.5);
  opacity:0;transition:opacity .2s steps(2)}
.bubble.on{opacity:1}
.bubble b{color:#8a2c00}
/* the tail, pointing down at him */
.bubble::after{content:"";position:absolute;left:50%;bottom:-13px;margin-left:-8px;
  width:0;height:0;border:8px solid transparent;border-top-color:#f0dda6;
  filter:drop-shadow(0 3px 0 var(--ink))}
/* FLIPPED UNDER HIM. Used only when there is no headroom above his hat, which
   on a phone is most of the upper third of the drift. The transform's vertical
   origin swaps, so --bub-y is the bubble's TOP in this state, and the tail
   moves to the top edge and points UP at him. Without the tail moving too, a
   bubble under his feet reads as belonging to whatever is below it. */
.bubble.below{transform:translate(-50%,0)}
.bubble.below::after{bottom:auto;top:-13px;
  border-top-color:transparent;border-bottom-color:#fff8e2;
  filter:drop-shadow(0 -3px 0 var(--ink))}

/* No sprite to point at — sit in the corner and drop the tail. */
.bubble.loose{left:14px;top:auto;bottom:calc(env(safe-area-inset-bottom) + 118px);
  transform:none;max-width:min(420px,72%)}
.bubble.loose::after{display:none}

/* ── top bar: a chip, a name, two buttons. That is all it gets. ── */
.topbar{position:absolute;top:0;left:0;right:0;z-index:6;height:var(--bar);
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 12px;
  padding-top:env(safe-area-inset-top,0);
  background:linear-gradient(180deg,rgba(13,6,32,.92),rgba(13,6,32,.55) 70%,transparent);
  backdrop-filter:blur(3px)}
.tb-l,.tb-r{display:flex;align-items:center;gap:10px;min-width:0}
.onair{display:flex;align-items:center;gap:6px;font-family:var(--disp);font-size:11px;letter-spacing:.2em;
  color:#fff;background:var(--dn);padding:4px 9px;border-radius:3px;box-shadow:0 0 16px rgba(224,86,79,.6)}
.onair i{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
/* STANDBY breathes slower than LIVE pulses: alive, but with nothing to report.
   Motion pre-launch belongs to the scene and the CTA, never to the numbers. */
.onair.off{background:#4a2540;box-shadow:none;color:var(--dim)}
.onair.off i{animation-duration:3.2s;background:var(--dim)}
/* HIRING is its own state, between the two. The mine is not live, so it must
   not wear the red — but something IS happening here and STANDBY's grey says
   the opposite. Gold, at LIVE's tempo. */
.onair.off.hiring{background:linear-gradient(180deg,#b07d13,#7a4f00);color:#fff8de;
  box-shadow:0 0 16px rgba(242,178,60,.5)}
.onair.off.hiring i{animation-duration:1.6s;background:#fff8de}
.chan{font-family:var(--disp);font-size:14px;color:#fff6d8;letter-spacing:.02em;white-space:nowrap;
  text-shadow:0 0 4px #fff,0 0 12px var(--gold),0 0 28px var(--gold-lo)}
.chan b{color:#ffe9f6;text-shadow:0 0 4px #fff,0 0 12px var(--pink),0 0 26px var(--pink)}
.scene{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ASK EL JEFE — his face on the button. Gold-lit rather than the flat chrome
   the other controls get, because it is the only one that starts a
   conversation and it should not read as a third settings icon. */
.ico.jefe{display:flex;align-items:center;gap:7px;padding-left:5px;border-color:rgba(242,178,60,.5);
  background:linear-gradient(180deg,rgba(242,178,60,.20),rgba(242,178,60,.07));color:var(--gold-hi)}
.ico.jefe img{width:22px;height:22px;object-fit:contain;flex:0 0 22px}
.ico.jefe:hover{border-color:var(--gold);background:rgba(242,178,60,.28)}
.ico{height:30px;min-width:30px;display:grid;place-items:center;background:rgba(242,178,60,.08);
  border:1px solid rgba(242,178,60,.3);border-radius:5px;color:var(--co);font-size:13px;transition:.15s}
.ico:hover{background:rgba(242,178,60,.2);border-color:var(--co)}
.ico[aria-pressed="false"]{color:#6d5a8c;border-color:rgba(242,178,60,.14)}
/* FLEX, NOT THE INHERITED GRID, and nowrap on top of it. Two separate bugs
   land on this one rule:
   · `.ico` is display:grid, so the moment PROSPECTUS's label was wrapped in a
     span for the phone to hide, the glyph and the word became two GRID ITEMS
     and stacked into two rows inside a 30px button.
   · Without nowrap, "ASK EL JEFE" breaks across three lines at 390px and the
     top bar becomes 60px of stacked fragments over the mine. */
.ico.wide{display:flex;align-items:center;justify-content:center;white-space:nowrap;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;padding:0 11px}

/* ══ THE STRIP — four numbers, a band, and a verb ═════════════════════════
   The hero is YOUR P&L; unlinked, its slot is the one next action. Everything
   is big enough to read at arm's length on a phone, and nothing else on the
   page is a number. If a stat wants in, a stat in here has to die first. */
.strip{position:absolute;left:0;right:0;bottom:0;z-index:7;display:flex;gap:1px;
  background:rgba(246,233,207,.14);backdrop-filter:blur(6px);
  padding-bottom:env(safe-area-inset-bottom)}
.cell{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  justify-content:center;padding:12px 16px 13px;background:rgba(12,7,26,.88);border:0;
  text-align:left;font:inherit;color:inherit;transition:background .15s}
button.cell:hover{background:rgba(27,16,48,.94)}
.cell .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--co);opacity:.85;
  text-transform:uppercase;white-space:nowrap}
.cell .v{font-family:var(--mono);font-size:28px;font-weight:700;color:var(--cream);
  font-variant-numeric:tabular-nums;line-height:1.05;white-space:nowrap}
.cell .s{font-family:var(--mono);font-size:10.5px;color:var(--dim);font-style:normal;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  font-variant-numeric:tabular-nums}
.cell .v.up,.cell .s.up{color:var(--up)}
.cell .v.dn,.cell .s.dn{color:var(--dn)}

.cell.hero{flex:1.8 1 0;background:linear-gradient(180deg,rgba(28,16,50,.94),rgba(12,7,26,.94))}
.cell.hero .v{font-size:44px;letter-spacing:-.01em}
.cell.hero .s{font-size:12px}
/* When the hero is the CTA rather than a figure it glows — the one next action
   is allowed exactly this much motion pre-launch, the numbers none. */
.cell.hero.cta .v{color:var(--co);animation:cta 2.2s ease-in-out infinite}
@keyframes cta{0%,100%{text-shadow:0 0 4px rgba(242,178,60,0)}50%{text-shadow:0 0 22px rgba(242,178,60,.75)}}

.cell.buy{flex:.9 1 0;align-items:center;background:linear-gradient(180deg,#b07d13,#7a4f00);
  position:relative;overflow:hidden}
.cell.buy .v{color:#1c1002;font-size:30px;font-family:var(--disp);letter-spacing:.1em}
.cell.buy .s{color:#3a2606}
.cell.buy:hover{background:linear-gradient(180deg,#d09a1e,#8f5d00)}
/* A slow sheen, live only: cheap, continuous, honest — it advertises the
   button, not activity that did not happen. */
.cell.buy::after{content:"";position:absolute;inset:0;transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,243,176,.45),transparent);width:55%}
body:not(.prelaunch) .cell.buy::after{animation:sheen 3.4s ease-in-out infinite}
@keyframes sheen{0%,55%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(320%) skewX(-18deg)}}
body.prelaunch .cell.buy{background:rgba(12,7,26,.88);cursor:default}
body.prelaunch .cell.buy .v{color:var(--gold-deep)}
body.prelaunch .cell.buy .s{color:var(--dim)}

/* the flow band: buys from the left in jade, sells the rest in red */
.flowband{position:absolute;left:0;right:0;top:-6px;height:6px;background:var(--dn)}
.flowband i{display:block;height:100%;width:0;background:var(--up);transition:width .8s ease}
.fb-lab{position:absolute;right:10px;top:-24px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;padding:3px 8px;border-radius:999px;background:rgba(6,3,14,.8);
  color:var(--up);font-variant-numeric:tabular-nums}
.fb-lab.dn{color:var(--dn)}

/* the value tick: a change lifts, brightens and drops back. Driven by a class
   toggle from hud.js — text content has no CSS transition, which is exactly
   why silent swaps are so easy to ship. */
@keyframes tick-up{0%{transform:translateY(6px) scale(1.05);filter:brightness(2)}100%{transform:none;filter:none}}
@keyframes tick-dn{0%{transform:translateY(-6px) scale(1.05);filter:brightness(2)}100%{transform:none;filter:none}}
.v.tick-up{animation:tick-up .45s cubic-bezier(.2,1.5,.4,1)}
.v.tick-dn{animation:tick-dn .45s cubic-bezier(.2,1.5,.4,1)}
/* the hero also washes the whole cell, visible from across a room */
@keyframes wash-up{0%{box-shadow:inset 0 0 0 999px rgba(53,208,165,.34)}100%{box-shadow:none}}
@keyframes wash-dn{0%{box-shadow:inset 0 0 0 999px rgba(224,86,79,.34)}100%{box-shadow:none}}
.cell.hero.wash-up{animation:wash-up .7s ease-out}
.cell.hero.wash-dn{animation:wash-dn .7s ease-out}

/* the phone's screen-flip pill, riding the strip's top edge so it stays put
   whatever height the strip takes. Hidden on desktop. */
/* Anchored to the BOTTOM, above the strip. It used to be `top:-18px` with a
   -100% Y translate, which resolves against #app and parked it ~54px above the
   viewport — permanently off-screen, on the one control that is the sole route
   to screen two on a phone. --strip-h is measured and published by hud.js
   because the strip is one row on the floor screen and three on the numbers. */
.panel-tab{position:absolute;left:50%;bottom:calc(var(--strip-h,118px) + 12px);
  transform:translateX(-50%);z-index:8;
  display:none;align-items:center;gap:7px;padding:11px 20px;border-radius:999px;
  min-height:44px;                    /* thumb target, not a 36px sliver */
  /* Opaque, not .9 alpha: screen two scrolls UNDER this control, so a
     translucent pill lands on top of body text and both become unreadable. */
  background:#0b0518;border:1px solid rgba(242,178,60,.38);color:var(--co);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  box-shadow:0 6px 22px rgba(0,0,0,.55)}
/* A scrim under the pill so text scrolling beneath it fades out rather than
   running into its edge. Pointer-transparent — it must never eat the tap. */
.panel-tab::before{content:"";position:absolute;left:-40px;right:-40px;top:-14px;bottom:-14px;
  z-index:-1;pointer-events:none;border-radius:999px;
  background:radial-gradient(ellipse at center,rgba(8,4,20,.97) 45%,transparent 75%)}

/* ══ THE PANEL ═══════════════════════════════════════════════════════════
   Desktop: display:contents — the tape and the file card float on the stage.
   Phone: screen two, a full-viewport slide-over (media block below). */
.panel{display:contents}

/* THE TAPE — frameless prints, fading upward. Ambient, not a terminal. */
.tape{position:absolute;right:12px;bottom:calc(env(safe-area-inset-bottom) + 116px);z-index:4;
  width:230px;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 38%);
  mask-image:linear-gradient(180deg,transparent,#000 38%)}
.tape-b{display:flex;flex-direction:column;gap:2px}
.tp{display:grid;grid-template-columns:38px 1fr auto;gap:8px;align-items:baseline;
  font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums;
  padding:2px 8px;border-radius:4px;background:rgba(6,3,14,.55)}
.tp.b .side{color:var(--up)} .tp.s .side{color:var(--dn)}
.tp .side{font-weight:700;letter-spacing:.06em}
.tp .w{color:var(--dim);overflow:hidden;text-overflow:ellipsis}
.tp .amt{color:var(--cream)}
.tp.fresh{animation:print-in .35s cubic-bezier(.2,1.2,.4,1)}
@keyframes print-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── THE OPERATION — the big descriptive numbers ──────────────────────────
   Reading size, not glance size. The strip's four numbers are for the returning
   holder; these six are for the person who just arrived and wants to know what
   the Company actually does. Hidden on desktop, where the mine itself and the
   prospectus already carry it — putting a six-cell board back on the desktop
   stage is how the right rail UI2 deleted grows back. */
.op{display:none}
/* Both boards are OFF everywhere by default and switched on only by the two
   surfaces that own them: the prospectus (one tap behind a button) and the
   broadcast rail. The player's main screen shows five numbers and nothing else. */
.sheet-b .op,.sheet-b .sm{display:block;margin-top:22px}
.op-h{font-family:var(--disp);font-size:12px;letter-spacing:.18em;color:var(--gold-hi);
  margin:0 0 12px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.op-pre{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--dim);
  border:1px solid rgba(168,146,201,.35);border-radius:3px;padding:2px 7px;font-weight:400}
.op-grid{display:grid;gap:1px;background:rgba(246,233,207,.1);border:1px solid rgba(246,233,207,.1);
  border-radius:8px;overflow:hidden}
.op-c{background:linear-gradient(180deg,rgba(30,13,56,.96),rgba(18,9,36,.96));padding:13px 14px 15px}
.op-k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;color:var(--co);opacity:.9}
/* The number itself: tabular so a changing digit cannot shift the ones beside
   it, and big enough to read without leaning in. */
.op-v{display:block;font-family:var(--mono);font-size:clamp(32px,8.5vw,42px);font-weight:700;
  line-height:1.05;color:var(--cream);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  margin:5px 0 1px}
.op-u{display:block;font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.04em}
.op-d{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--txt);opacity:.78}

/* ── THE SHAFT — the seam cross-section ───────────────────────────────────
   Read top to bottom as a hole in the ground: surface at the top, the working
   face lit, unbroken rock below it going dark. The left gutter is one
   continuous line so the rows read as depths on a single shaft rather than as
   a list of options — the mine is one hole, and the control must not imply
   there is somewhere else to send the crew. */
/* Hidden on the desktop player page for the same reason .op is: the stage and
   the prospectus already carry it, and a permanent board on the desktop stage
   is how the right rail UI2 deleted grows back. The BROADCAST overrides this —
   stream.html is a status board and the shaft is the point of it. */
.sm{display:none;--sm-line:rgba(242,178,60,.28)}
.sm-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.sm-h b{font-family:var(--disp);font-size:12px;letter-spacing:.18em;color:var(--gold-hi)}
.sm-h span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dim)}
.sm-surface{font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--dim);
  padding-left:26px;position:relative}
.sm-surface::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,var(--sm-line),transparent)}
.sm-rows{display:flex;flex-direction:column}

.sm-r{position:relative;display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;
  background:none;border:0;padding:11px 10px 11px 0;color:inherit;font:inherit}
/* the shaft wall: one unbroken line down the gutter, every row */
.sm-r::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;
  background:var(--sm-line)}
.sm-r:last-child::before{background:linear-gradient(180deg,var(--sm-line),transparent)}
/* the marker sitting on the wall at this depth */
.sm-g{position:relative;z-index:1;flex:0 0 18px;height:18px;margin-top:2px;border-radius:3px;
  border:2px solid var(--sm-line);background:var(--ink)}
.sm-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.sm-t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sm-t b{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--co)}
.sm-n{font-family:var(--serif);font-size:15px;color:var(--cream)}
.sm-s{font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.02em}

/* worked out — the ground is behind you, so it is stated, not sold */
.sm-spent .sm-g{background:var(--gold-deep);border-color:var(--gold-deep)}
.sm-spent .sm-n{color:var(--dim)}

/* the face: the only lit row on the page */
.sm-working .sm-g{background:var(--gold);border-color:var(--gold-hi);
  box-shadow:0 0 12px rgba(255,201,60,.6);animation:sm-face 2.4s ease-in-out infinite}
@keyframes sm-face{0%,100%{box-shadow:0 0 12px rgba(255,201,60,.55)}50%{box-shadow:0 0 20px rgba(255,201,60,.85)}}
.sm-working .sm-n{color:var(--gold-hi)}
.sm-working .sm-s{color:var(--co)}

/* unbroken rock — dimmer the deeper it goes, and never named */
.sm-locked{opacity:.5}
.sm-locked .sm-g{background:transparent;border-style:dashed}
.sm-locked .sm-n{color:var(--dim);letter-spacing:.2em}
.sm-pending .sm-g{background:transparent;border-style:dashed}

.sm-r.on{background:linear-gradient(90deg,rgba(242,178,60,.10),transparent 70%)}
.sm-r:hover .sm-n{color:#fff}
.sm-r:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:4px}
.sm-foot{margin-top:10px;font-size:12px;line-height:1.5;color:var(--txt);opacity:.62;
  border-top:1px solid rgba(246,233,207,.1);padding-top:9px}

/* ── YOUR FILE — the one personal surface, one tap behind the hero ── */
.file{position:absolute;top:calc(var(--bar) + 12px);right:12px;z-index:9;
  width:min(370px,calc(100vw - 24px));max-height:calc(100dvh - var(--bar) - 140px);
  overflow-y:auto;display:none;
  background:linear-gradient(180deg,rgba(30,13,56,.97),rgba(21,10,40,.97));
  border:2px solid var(--gold-lo);border-radius:10px;padding:14px 16px 16px;
  box-shadow:0 0 0 3px var(--ink),0 24px 70px rgba(0,0,0,.8);
  scrollbar-width:thin;scrollbar-color:var(--gold-deep) transparent}
/* `.on`, matching what hud.js actually sets. This read `.file.open` while every
   call site used `classList.add('on')`, so the hero cell's tap-through — the
   only door to YOUR FILE on desktop — opened nothing at all. */
.file.on{display:block;animation:pop .22s cubic-bezier(.2,1.3,.4,1)}
.file-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.file-h b{font-family:var(--disp);font-size:13px;color:var(--gold-hi);letter-spacing:.08em}
.file-h button{background:none;border:0;color:var(--dim);font-size:15px;padding:2px 6px}
.file-h button:hover{color:var(--gold)}

.link p{color:var(--dim);font-size:13px;margin:0 0 12px}
.ir{display:flex;gap:7px;flex-wrap:wrap}
.ir input{flex:1 1 150px;min-width:0;background:rgba(0,0,0,.55);border:1px solid rgba(255,201,60,.34);
  border-radius:5px;color:var(--gold-hi);font-family:var(--mono);font-size:12px;padding:11px 12px}
.ir input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 12px rgba(255,201,60,.3)}
.ir button{background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));border:0;border-radius:5px;
  color:#2a1a04;font-family:var(--disp);font-size:11px;letter-spacing:.1em;padding:0 16px}
.err{color:var(--red);font-family:var(--mono);font-size:11px;margin-top:8px;min-height:14px}
.note{font-size:11px;color:var(--dim);line-height:1.5;margin:12px 0 0}
.note b{color:var(--gold)}
.rec{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--mono);
  font-size:8.5px;letter-spacing:.15em;color:var(--dim);padding-bottom:9px;
  border-bottom:1px solid rgba(255,201,60,.22);margin-bottom:12px}
.rec b{color:var(--gold-hi)}
.bar-wrap{margin-top:12px}
.bar-lab{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:5px;gap:8px}
.bar-lab b{color:var(--gold)}
.prog{height:13px;border-radius:7px;background:rgba(0,0,0,.55);border:1px solid rgba(255,201,60,.3);
  overflow:hidden}
.prog.sm{height:8px}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-lo),var(--gold),var(--gold-hi));
  box-shadow:0 0 14px rgba(255,201,60,.6);transition:width .9s cubic-bezier(.3,1,.4,1);position:relative}
.prog i::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.26) 0 8px,transparent 8px 16px);
  animation:crawl 1.1s linear infinite}
@keyframes crawl{to{transform:translateX(16px)}}
.rows{margin-top:14px}
.row{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;gap:10px;
  border-bottom:1px dotted rgba(255,201,60,.18);font-size:13px}
.row .l{color:var(--dim)}
.row .v{font-family:var(--mono);color:var(--gold-hi);font-variant-numeric:tabular-nums;text-align:right}
.row.big{padding-top:11px;margin-top:4px;border-top:2px solid var(--gold-lo);border-bottom:0}
.row.big .l{color:var(--txt)}
.row.big .v{font-size:19px;text-shadow:0 0 12px var(--gold-lo)}
.pnl-up{color:var(--up)!important}
.pnl-dn{color:var(--dn)!important}
.badge{display:inline-block;font-family:var(--mono);font-size:7.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:1px 5px;border-radius:3px;border:1px solid;margin-left:5px}
.b-live{color:var(--jade);border-color:var(--jade)}
.b-est{color:var(--dim);border-color:var(--dim)}
.basis{margin-top:14px;padding:12px;border-radius:7px;background:rgba(0,0,0,.3);
  border:1px dashed rgba(255,201,60,.3)}
.basis label{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;color:var(--dim);
  margin-bottom:7px}
.ghost{display:block;width:100%;margin-top:12px;background:none;border:0;color:var(--dim);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;padding:9px}
.ghost:hover{color:var(--gold)}
#btn-sell:hover{color:var(--red)}

.mintbar{margin-top:14px}
.mf-row{display:flex;gap:5px;flex-wrap:wrap}
.mf-k{font-family:var(--mono);font-size:8px;letter-spacing:.11em;text-transform:uppercase;padding:3px 7px;
  border-radius:3px;border:1px solid rgba(255,201,60,.34);color:var(--gold-lo)}
.mf-k.mf-warn{color:#ffb3c0;border-color:rgba(255,59,92,.6);background:rgba(255,59,92,.09)}
.mf-haz{margin:9px 0 0;padding:10px 12px 10px 26px;list-style:disc;background:rgba(255,59,92,.08);
  border:1px solid rgba(255,59,92,.4);border-radius:7px;font-size:12px;color:#ffd6dd;line-height:1.5}
.mf-haz b{color:#fff}

/* ══ SHEET — the prospectus ══════════════════════════════════════════════ */
.sheet{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:18px;
  background:rgba(5,2,12,.88);backdrop-filter:blur(6px)}
.sheet-card{width:min(760px,100%);max-height:86dvh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--panel-2),var(--felt));border:2px solid var(--gold-lo);
  border-radius:11px;overflow:hidden;box-shadow:0 0 0 4px var(--ink),0 30px 90px rgba(0,0,0,.85);
  animation:pop .24s cubic-bezier(.2,1.3,.4,1)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.sheet-h{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;
  border-bottom:1px solid rgba(255,201,60,.28);background:rgba(0,0,0,.3)}
.sheet-h b{font-family:var(--disp);font-size:14px;color:var(--gold-hi);letter-spacing:.08em}
.sheet-h button{background:none;border:0;color:var(--dim);font-size:16px;padding:2px 6px}
.sheet-h button:hover{color:var(--gold)}
.sheet-b{padding:20px;overflow-y:auto;font-size:14.5px}
.sheet-b .lede{color:var(--dim);font-style:italic;margin-top:0}
.sheet-b h5{font-family:var(--disp);font-size:12px;letter-spacing:.14em;color:var(--gold);
  margin:22px 0 6px}
.sheet-b .steps{padding-left:20px;margin:14px 0}
.sheet-b .steps li{margin-bottom:9px}
.sheet-b .steps b{color:var(--gold-hi)}
.split-vis{margin:18px 0;background:rgba(0,0,0,.34);border:1px solid rgba(255,201,60,.26);
  border-radius:9px;padding:16px}
.split-vis .bar{display:flex;height:34px;border-radius:6px;overflow:hidden;border:1px solid rgba(255,201,60,.4)}
.split-vis .bar div{display:grid;place-items:center;font-family:var(--disp);font-size:11px;color:#2a1a04;
  white-space:nowrap;overflow:hidden}
.b-gold{flex:70;background:linear-gradient(180deg,var(--gold-hi),var(--gold))}
.b-burn{flex:20;background:linear-gradient(180deg,#ff8a9f,var(--red));color:#3a0008}
.b-ops{flex:10;background:linear-gradient(180deg,#8fe9ff,var(--cyan))}
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:11px;margin-top:13px}
.legend div{font-size:12px;color:var(--dim);line-height:1.5}
.legend b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:3px}
.legend .lg{color:var(--gold)}.legend .lb{color:var(--red)}.legend .lo{color:var(--cyan)}
.warn{background:rgba(255,59,92,.07);border:1px solid rgba(255,59,92,.38);border-left:4px solid var(--red);
  border-radius:7px;padding:16px 18px;margin-top:22px}
.warn h4{margin:0 0 7px;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:#ff8a9f}
.warn p{margin:0 0 8px;font-size:13px;color:var(--dim);line-height:1.55}
.warn p:last-child{margin-bottom:0}
.sheet-b details{border-bottom:1px solid rgba(255,201,60,.18)}
.sheet-b summary{padding:14px 2px;cursor:pointer;font-size:15px;color:var(--gold-hi);list-style:none;
  display:flex;justify-content:space-between;gap:12px}
.sheet-b summary::-webkit-details-marker{display:none}
.sheet-b summary::after{content:"▼";font-size:8px;color:var(--pink);transition:.2s}
.sheet-b details[open] summary::after{transform:rotate(180deg)}
.sheet-b .a{padding:0 2px 16px;color:var(--dim);font-size:13.5px}
.sheet-b .fine{font-size:10.5px;color:#7d6b99;line-height:1.6;margin-top:22px;
  border-top:1px solid rgba(255,201,60,.16);padding-top:14px}

/* the record, inside the sheet */
.explog{background:rgba(0,0,0,.3);border:1px solid rgba(255,201,60,.22);border-radius:7px;overflow:hidden;
  margin-bottom:14px}
.exp{display:flex;gap:10px;padding:10px 11px;border-bottom:1px solid rgba(255,201,60,.11);align-items:center}
.exp:last-child{border-bottom:0}
.exp img{width:28px;height:28px;flex:0 0 28px;object-fit:contain;filter:drop-shadow(0 0 6px var(--gold-lo))}
.exp .m{flex:1;min-width:0}
.exp .city{font-family:var(--disp);font-size:11.5px;color:var(--gold-hi)}
.exp .note{font-size:11.5px;color:var(--dim);margin:0}
.exp .haul{font-family:var(--mono);font-size:12px;color:var(--jade);text-align:right;white-space:nowrap}
.exp .haul small{display:block;color:var(--dim);font-size:9px}
.scroll-x{overflow-x:auto}
table.led{width:100%;border-collapse:collapse;font-size:12px}
table.led th{font-family:var(--mono);font-size:7.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);text-align:left;padding:8px 6px;border-bottom:2px solid var(--gold-lo);font-weight:400}
table.led td{padding:9px 6px;border-bottom:1px solid rgba(255,201,60,.11)}
table.led .w{font-family:var(--mono);font-size:10.5px}
table.led .num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.stamp{font-family:var(--mono);font-size:7px;letter-spacing:.1em;padding:2px 5px;border:1px solid;
  border-radius:3px;text-transform:uppercase;white-space:nowrap}
.s-des{color:var(--red);border-color:var(--red);display:inline-block;transform:rotate(-3deg)}
.s-fnd{color:var(--jade);border-color:var(--jade)}
.empty{color:var(--dim);font-style:italic;font-size:12.5px;padding:16px 11px}

/* ══ MOBILE — TWO SCREENS, BOTH FULL SIZE ════════════════════════════════
   Screen 1 is the floor at the full viewport with exactly one number (the
   hero) and one verb (BUY) on its bottom edge. Screen 2 is THE NUMBERS: the
   panel slides over the floor and the strip regrows into a card grid — every
   Tier-1 number on screen at once, no scrolling, no tabs. Same DOM as
   desktop; a second markup tree is how the two layouts drift apart. */
@media (max-width:900px){
  .scene{display:none}
  .chan{font-size:12px}
  .panel-tab{display:flex}
  /* Three controls, a channel name and a status badge do not fit across a
     390px bar at desktop sizes. Everything shrinks together rather than one
     element being sacrificed, because each of the three is the only door to
     what is behind it. */
  .topbar{padding:0 8px;gap:6px}
  .tb-l,.tb-r{gap:6px}
  .ico.wide{font-size:8.5px;letter-spacing:.08em;padding:0 7px}
  .ico.wide .lbl{display:none}
  .ico.jefe{gap:5px;padding-left:4px}
  .ico.jefe img{width:18px;height:18px;flex:0 0 18px}
  .onair{font-size:9.5px;letter-spacing:.14em;padding:3px 6px}

  /* The recruiting verb is a WORD, where the live strip's is "BUY". At the
     live cell's flex ratio "YOUR ROLL" renders wider than the box and clips to
     "YOUR ROLI", so the pre strip's verb gets more of the row and a smaller
     face. It is the one control on the page that has to work. */
  .strip.pre .cell.buy{flex:1.25 1 0}
  .strip.pre .cell.buy .v{font-size:20px;letter-spacing:.06em}

  /* floor screen: hero + BUY only */
  .cell{padding:10px 12px 11px}
  .cell.hero .v{font-size:30px}
  .cell.buy .v{font-size:24px}
  #c-bag,#c-acc,#c-gold,#c-crew{display:none}
  /* WIDTH ONLY. This used to set `bottom` on .bubble as well, which is a
     stretch: the base rule already sets `top` from --bub-y, and an absolutely
     positioned box with BOTH offsets and height:auto is stretched to fill the
     gap between them. So every speech bubble on every phone was a 229px slab
     with three lines of text at the top and empty cream below — measured, not
     guessed. The `bottom` belonged to the corner fallback all along, and
     .bubble.loose (which sets top:auto) already has its own. */
  .bubble{max-width:calc(100vw - 24px)}
  .bubble.loose{bottom:calc(env(safe-area-inset-bottom) + 128px)}
  .tape{display:none}

  /* screen two: the panel slides up under the strip.
     Scoped to #panel, NOT .panel: the screen-two state class used to be `panel`
     too, so this rule also matched <body class="panel"> and gave the BODY
     position:absolute + translateY(100%) — the whole page dropped one viewport
     and screen two rendered as an empty rectangle. The state class is now
     `numbers`; keeping the selector on the id means a future state class can
     never collide with it again. */
  #panel{display:block;position:absolute;inset:0;z-index:5;
    background:rgba(8,4,20,.97);backdrop-filter:blur(10px);
    padding:calc(var(--bar) + 10px) 12px calc(env(safe-area-inset-bottom) + 300px);
    overflow-y:auto;
    transform:translateY(100%);transition:transform .32s cubic-bezier(.3,.9,.3,1)}
  body.numbers #panel{transform:translateY(0)}

  /* Screen two, five numbers: P&L spans the top as the hero, then the two
     personal figures, then the Company's output beside your crew, then BUY
     across the foot. Reading order is deliberately yours-first. */
  body.numbers #c-bag,body.numbers #c-acc,
  body.numbers #c-gold,body.numbers #c-crew{display:flex}
  body.numbers .strip{display:grid;grid-template-columns:1fr 1fr;
    grid-template-areas:"hero hero" "bag acc" "crew gold" "buy buy"}
  body.numbers #c-pnl{grid-area:hero}
  body.numbers #c-bag{grid-area:bag}
  body.numbers #c-acc{grid-area:acc}
  body.numbers #c-crew{grid-area:crew}
  body.numbers #c-gold{grid-area:gold}
  body.numbers #v-buy{grid-area:buy}
  body.numbers .cell .v{font-size:26px}
  body.numbers .cell.hero .v{font-size:44px}
  body.numbers .cell.buy .v{font-size:26px}

  /* the tape rejoins the flow on screen two, newest at the top of a short list */
  body.numbers .tape{display:block;position:static;width:auto;margin-top:14px;
    -webkit-mask-image:none;mask-image:none;pointer-events:auto}

  /* THE OPERATION and THE SHAFT are NOT on screen two any more — they live in
     the prospectus, which turns them on with .sheet-b .op / .sheet-b .sm. The
     mandate for screen two is five numbers and your file. */

  /* the file card is simply screen two's content, always present */
  .file{display:block;position:static;width:auto;max-height:none;overflow:visible;
    animation:none}
  .file-h button{display:none}

  /* ══ THE COLD OPEN, RE-COMPOSED FOR A PHONE ═════════════════════════════
     Desktop puts the mascot and the diagram SIDE BY SIDE — he steps to the
     left third, the plate's right half carries the figures. At 393px that
     composition fails twice over: the diagram gets ~200px of width and loses
     its labels, and the mascot ends up behind the dialogue box with only his
     hat showing above it.

     So the phone stacks instead. Bottom to top: text box, mascot, diagram.
     Everything measures against --dlg-h, published by dialogue.js, because the
     box grows with a long line or a list of choices and a hardcoded offset is
     precisely what buried him. */

  .dlg{padding:0 10px 12px}
  .dlg-box{padding:20px 15px 18px}
  /* 6.4em reserved almost half the screen for text that is usually two lines,
     and every pixel of it came out of the mascot's head. */
  .dlg-text{min-height:4.3em;font-size:16px;line-height:1.55}

  /* HIS BUST, IN FULL, ABOVE THE TEXT.
     `cover` with a top anchor rather than a width: the art is a square with the
     figure running nearly its full height, so scaling it to fit width left him
     tiny, and scaling to fill height clipped both his shoulders off. Filling a
     band that is wider than it is tall crops the LOWER body instead — which is
     the part nobody needs — and puts the hat, the glasses and the chain at full
     screen width. */
  .cold-jefe{
    left:0;right:0;top:auto;
    bottom:calc(var(--dlg-h,240px) + 10px);
    width:100%;max-width:none;height:min(34vh,290px);
    object-fit:cover;object-position:center 12%;
    transform:none}
  .cold.lit .cold-jefe{transform:none}
  .cold.talking .cold-jefe{animation:jefe-talk-m 2.6s ease-in-out infinite}
  /* A BOB, NOT A ZOOM. He is already the full width of the screen here, so the
     desktop breathe — scale(1.13) there, 1.022 even trimmed back — pushed him
     4px past each edge and clipped his ears on every cycle. Translating costs
     no width. */
  @keyframes jefe-talk-m{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

  /* With a slide up he steps aside — but on a phone "aside" is DOWN and to the
     right, not left, because there is no horizontal room to give away.

     HIS HEIGHT IS A SHARED CONSTANT, so it is a variable. The diagram sits in
     the band above him and has to know how tall he is; the number was written
     out longhand in both places, which is an invitation for one to be bumped
     and the other forgotten — and the symptom of that is the diagram landing
     on his hat. Change --jefe-m and both move together. */
  .cold{--jefe-m:min(28vh,235px)}
  .cold-jefe.aside{
    left:auto;right:6px;width:min(54%,215px);max-width:none;height:var(--jefe-m);
    object-position:center 10%;transform:none;animation:none}
  .cold.talking .cold-jefe.aside{animation:jefe-talk-m 2.6s ease-in-out infinite}

  /* The diagram takes the FULL WIDTH of the band above him. It was pinned to
     the right at 52% — an unreadable 200px column on this screen.

     `top` IS A HARD CEILING, not a position. The layer is bottom-anchored and
     grows upward, so a tall diagram — the hundred-worker draw is the worst of
     them — climbs into the top of the screen and lands underneath the SKIP
     chip, which is fixed at 14px. Bounding the top turns the band into a fixed
     box; the rules under it are what make the contents fit that box instead of
     spilling out of it. */
  .slide-viz{
    left:0;right:0;width:100%;
    top:calc(env(safe-area-inset-top,0px) + 52px);
    bottom:calc(var(--dlg-h,240px) + var(--jefe-m) + 20px);
    transform:none;padding:6px 12px;
    display:flex;flex-direction:column;justify-content:center}
  .slide-viz > div{max-height:100%;min-height:0}
  /* An SVG with an intrinsic aspect ratio scales to FIT a max-height, so this
     shrinks the big figures rather than cropping them. */
  .viz-draw svg,.viz-floor svg,.viz-sen svg{max-height:100%;height:auto}
  /* The pit check is a row of picture + three lines of text, and at this width
     the text wraps enough to make the row taller than the band. Everything in
     it comes down a size together. */
  .vt-img{width:104px}
  .vt-rate{font-size:13px}
  .vt-rate b{font-size:20px}
  .vt-s{font-size:11.5px}
  .vt-w{font-size:9px;padding:5px 8px;margin-top:8px}
  .viz-tag{gap:12px}
  .vd-f,.vc-f,.vf-f,.vs-f{font-size:14px}
  .vd-s,.vc-s,.vs-s{font-size:11px}
  .slide-viz::before{inset:-8% -6%}
  .slide-cap{top:calc(env(safe-area-inset-top,0px) + 12px);font-size:9px;letter-spacing:.2em}
  /* The plate is lit for a wide frame; on a tall one the character sits over
     its lower half, so the scrim has to be strongest there instead of at 90deg. */
  .slide-scrim{background:linear-gradient(180deg,rgba(6,3,14,.62) 0%,rgba(6,3,14,.28) 26%,rgba(6,3,14,.86) 70%,rgba(6,3,14,.96) 100%)}
}

/* Landscape phone: the panel's grid would eat the whole short axis; let the
   panel content scroll and keep the strip to one row of hero+buy. */
@media (max-height:520px) and (orientation:landscape) and (max-width:900px){
  body.numbers .strip{display:flex}
  body.numbers #c-bag,body.numbers #c-acc,
  body.numbers #c-gold,body.numbers #c-crew{display:flex}
  body.numbers .cell .v{font-size:20px}
  body.numbers .cell.hero .v{font-size:24px}
}

/* ══ THE MUSTER ROLL ═════════════════════════════════════════════════════
   The pre-launch surface: the recruiting strip that stands in for the live
   one, and the card behind it.

   THE RECRUITING STRIP'S BUY CELL MUST BE ALIVE. `body.prelaunch .cell.buy`
   deliberately kills the live BUY button — dark, no sheen, cursor:default —
   because before launch there is nothing to buy. SIGN ON is in the same slot,
   in the same class, during exactly that state, and it is the one thing on the
   page that DOES work. So it takes the gold back, explicitly, and re-arms the
   sheen the prelaunch rule switched off. */
.strip.pre .cell.buy{background:linear-gradient(180deg,#b07d13,#7a4f00);cursor:pointer}
.strip.pre .cell.buy .v{color:#1c1002}
.strip.pre .cell.buy .s{color:#3a2606}
.strip.pre .cell.buy:hover{background:linear-gradient(180deg,#d09a1e,#8f5d00)}
body.prelaunch .strip.pre .cell.buy::after{animation:sheen 3.4s ease-in-out infinite}
.strip.pre .cell .k b{color:var(--gold-hi)}
/* Your own entry, once you have one: the only jade thing on the strip, because
   it is the only cell that reports something true about you. */
.strip.pre .cell .v.on{color:var(--up)}
.strip.pre .cell .s.on{color:var(--up)}

/* The roll card in the panel — screen two on a phone. YOUR FILE is a form for
   a token balance that cannot exist before launch, so while the drive runs it
   is hidden outright rather than left standing as a second address box. */
body.hiring #file{display:none!important}
.rollcard{background:linear-gradient(180deg,rgba(30,13,56,.96),rgba(16,8,32,.96));
  border:2px solid var(--gold);border-radius:8px;padding:14px 15px 15px;
  box-shadow:0 0 0 2px var(--ink),0 14px 40px rgba(0,0,0,.7)}
.rc-num{font-family:var(--mono);font-size:30px;color:var(--up);font-variant-numeric:tabular-nums;
  line-height:1.1;margin-bottom:8px}
.rc-p{margin:0 0 9px;font-size:13.5px;color:var(--txt);line-height:1.6}
.rc-p b{color:var(--gold-hi)}
.rc-p.dim{color:var(--dim);font-size:12.5px}
.rc-wl{margin:0 0 10px;font-size:12px;color:var(--dim);font-family:var(--mono)}
.rc-wl b{color:var(--gold-hi)}
.rc-go{width:100%;background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));
  border:2px solid var(--ink);border-radius:5px;color:#2a1a04;font-family:var(--disp);
  font-size:13px;letter-spacing:.12em;padding:13px 16px}
.rc-go:hover{background:linear-gradient(180deg,#fff8d4,#d89b00)}
/* On desktop the panel is display:contents and its children float on the
   stage; the file card is absolutely positioned and hidden until opened, so
   this takes the same corner rather than landing in the middle of the mine. */
@media (min-width:901px){
  .rollcard{position:absolute;top:calc(var(--bar) + 12px);right:12px;z-index:9;width:300px}
}

.muster{position:fixed;inset:0;z-index:330;background:rgba(4,2,10,.86);backdrop-filter:blur(7px);
  display:grid;place-items:center;padding:16px;overflow-y:auto;
  opacity:0;transition:opacity .2s ease}
.muster.on{opacity:1}
.muster-card{position:relative;width:min(680px,100%);margin:auto;
  background:linear-gradient(180deg,#241041,#150a28);border:3px solid var(--gold);border-radius:6px;
  padding:30px 26px 24px;box-shadow:0 0 0 3px var(--ink),0 0 40px rgba(255,201,60,.26),0 30px 80px rgba(0,0,0,.85)}
.muster-x{position:absolute;top:8px;right:10px;background:none;border:0;color:var(--dim);font-size:17px;
  padding:4px 8px;line-height:1}
.muster-x:hover{color:var(--gold)}

.mu-head{text-align:center;margin-bottom:20px}
.mu-kick{font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:var(--dim);text-transform:uppercase}
.mu-head h2{font-family:var(--disp);font-size:clamp(26px,5.4vw,40px);letter-spacing:.05em;margin:7px 0 10px;
  color:var(--gold-hi);text-shadow:0 0 18px rgba(255,201,60,.45),0 3px 0 rgba(0,0,0,.6)}
.mu-lede{margin:0;font-size:15.5px;color:var(--txt);line-height:1.6}
.mu-lede b{color:var(--gold-hi)}

/* The prize, said three ways because it is the whole offer and a visitor
   should not have to do the multiplication to see the size of it. */
.mu-prize{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,201,60,.22);
  border:1px solid rgba(255,201,60,.3);border-radius:5px;overflow:hidden;margin-bottom:20px}
.mu-prize div{background:rgba(8,4,18,.75);padding:13px 10px;text-align:center;display:grid;gap:4px}
.mu-prize b{font-family:var(--mono);font-size:22px;color:var(--gold-hi);font-variant-numeric:tabular-nums;
  line-height:1.05}
.mu-prize span{font-family:var(--mono);font-size:9.5px;line-height:1.4;color:var(--dim)}

/* THE MECHANIC, above the form rather than in the fine print. The ticket is a
   coin and the coin is tradeable — that is the design, so it is stated where
   somebody decides, not where they scroll past. */
.mu-ticket{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px;padding:13px 14px;
  border:1px solid rgba(255,201,60,.34);border-radius:6px;background:rgba(255,201,60,.06)}
.mu-tk-img{width:64px;height:64px;flex:0 0 64px;object-fit:contain;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.6))}
.mu-ticket b{display:block;color:var(--gold-hi);font-size:15px;line-height:1.45}
.mu-ticket p{margin:5px 0 0;font-size:13px;color:var(--dim);line-height:1.55}
.mu-ticket em{color:var(--cyan);font-style:normal}
.mu-open.buy{border-color:rgba(53,208,165,.55);color:var(--up)}
.mu-open.buy:hover{background:rgba(53,208,165,.14);border-color:var(--up)}

/* The entry count on your record — the number the draw actually reads. */
.mu-ent{display:block;font-family:var(--mono);font-size:19px;color:var(--up);letter-spacing:.04em}
.mu-ent b{font-size:26px;color:var(--up)}
.mu-ent-s{display:block;font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:4px}
.mu-snap{margin:0 0 12px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--co)}
.mu-snap b{color:var(--gold-hi)}
.mu-buy{display:inline-flex;align-items:center;background:linear-gradient(180deg,#2ee0b4,#12a184);
  border:2px solid var(--ink);border-radius:5px;color:#04231c;font-family:var(--disp);font-size:11px;
  letter-spacing:.12em;padding:11px 15px;text-decoration:none}
.mu-buy:hover{background:linear-gradient(180deg,#54f0c8,#16b895)}

.mu-steps{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:13px}
.mu-steps li{display:flex;gap:12px;align-items:flex-start}
.mu-n{flex:0 0 26px;height:26px;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));color:#2a1a04;
  font-family:var(--disp);font-size:13px;margin-top:1px}
.mu-steps b{display:flex;align-items:center;gap:6px;color:var(--gold-hi);font-family:var(--serif);
  font-size:15.5px;font-weight:700}
.mu-x{vertical-align:-2px;opacity:.95}
.mu-steps p{margin:3px 0 0;font-size:13px;color:var(--dim);line-height:1.55}
.mu-steps em{color:var(--cyan);font-style:normal}
.mu-open{display:inline-block;margin-top:7px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  color:var(--gold);border:1px solid rgba(255,201,60,.45);border-radius:4px;padding:6px 11px;
  text-decoration:none}
.mu-open:hover{background:rgba(255,201,60,.14);border-color:var(--gold)}

.mu-form{display:grid;gap:6px}
.mu-form label{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--co);
  text-transform:uppercase;margin-top:6px}
.mu-form input{background:rgba(0,0,0,.6);border:2px solid rgba(255,201,60,.36);border-radius:4px;
  color:var(--gold-hi);font-family:var(--mono);font-size:13.5px;padding:12px 13px;width:100%}
.mu-form input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 14px rgba(255,201,60,.28)}
.mu-form input::placeholder{color:#6d5a8c}
.mu-go{margin-top:14px;background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));
  border:2px solid var(--ink);border-radius:5px;color:#2a1a04;font-family:var(--disp);font-size:15px;
  letter-spacing:.14em;padding:15px 20px;position:relative;overflow:hidden}
.mu-go:hover{background:linear-gradient(180deg,#fff8d4,#d89b00)}
.mu-go:disabled{opacity:.55;cursor:default}
.mu-err{color:var(--red);font-family:var(--mono);font-size:11.5px;min-height:16px;line-height:1.45}
.mu-err.ok{color:var(--up)}

.mu-closed{border:1px solid rgba(255,201,60,.3);border-radius:5px;padding:14px;font-size:13.5px;
  color:var(--dim);background:rgba(0,0,0,.35)}
.mu-closed b{color:var(--gold-hi)}

/* YOUR RECORD — a docket, not a toast. It has a number on it and it is stamped. */
.mu-done{position:relative;border:2px solid rgba(53,208,165,.5);border-radius:6px;padding:18px 16px 16px;
  background:rgba(6,26,22,.5)}
.mu-stamp{position:absolute;top:-11px;left:14px;background:var(--up);color:#04231c;
  font-family:var(--disp);font-size:11px;letter-spacing:.16em;padding:3px 10px;border:2px solid var(--ink);
  border-radius:3px;transform:rotate(-1.5deg)}
.mu-rec{display:grid;gap:4px;margin-bottom:14px}
.mu-rec-k{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
.mu-rec b{font-family:var(--mono);font-size:26px;color:var(--up);font-variant-numeric:tabular-nums;
  line-height:1.1;margin-bottom:8px}
.mu-rec code{font-family:var(--mono);font-size:11.5px;color:var(--cream);word-break:break-all;
  background:rgba(0,0,0,.4);border-radius:4px;padding:7px 9px;line-height:1.5}
.mu-rec-x{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--cyan);
  text-decoration:none;margin-top:6px}
.mu-rec-x:hover{text-decoration:underline}

.mu-wl{font-size:12.5px;line-height:1.6;border-radius:5px;padding:11px 12px;margin-bottom:12px}
.mu-wl.pending{background:rgba(255,201,60,.1);border:1px solid rgba(255,201,60,.3);color:var(--txt)}
.mu-wl.sent{background:rgba(53,208,165,.11);border:1px solid rgba(53,208,165,.36);color:var(--txt)}
.mu-wl b{color:var(--gold-hi)}
.mu-wl.sent b{color:var(--up)}
.mu-wl a{color:var(--cyan)}
.mu-note{margin:0 0 14px;font-size:13px;color:var(--dim);line-height:1.6}

.mu-acts{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.mu-share{display:inline-flex;align-items:center;gap:8px;background:#000;border:1px solid #3d3d45;
  border-radius:5px;color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  padding:11px 15px;text-decoration:none}
.mu-share:hover{border-color:#fff}

/* ── WHERE TO FIND THE COMPANY ────────────────────────────────────────────
   One row, three doors, and each one hides itself when its URL is unset. Black
   chips rather than brand colours: X is black, Telegram is blue and the tag is
   brass, and three different brand palettes side by side reads as a link farm.
   One neutral chip each, with the mark doing the identifying. */
.mu-social{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;
  padding-top:16px;border-top:1px solid rgba(255,201,60,.18)}
.soc{display:inline-flex;align-items:center;gap:8px;background:rgba(0,0,0,.55);
  border:1px solid rgba(255,201,60,.28);border-radius:5px;color:var(--txt);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;padding:10px 13px;
  text-decoration:none;transition:.14s}
.soc:hover{border-color:var(--gold);background:rgba(255,201,60,.12);color:#fff}
.soc img{opacity:.95;flex:0 0 auto}
/* The tag gets the gold treatment: it is the only one of the three that is a
   thing you can act on rather than a place to follow. */
.soc.coin{border-color:rgba(255,201,60,.5);color:var(--gold-hi)}
.soc.coin:hover{background:rgba(255,201,60,.18)}
@media (max-width:560px){
  .soc{font-size:9px;letter-spacing:.1em;padding:9px 10px;gap:6px}
}

.mu-founder{margin:18px 0 0;font-size:12.5px;color:var(--dim);line-height:1.6;
  border-left:2px solid rgba(255,201,60,.4);padding-left:12px}
.mu-founder b{color:var(--gold-hi)}
.mu-fine{margin:16px 0 0;font-size:10.5px;color:#8a76a8;line-height:1.65}
.mu-fine b{color:var(--dim)}

@media (max-width:560px){
  .muster{padding:10px;align-items:start}
  .muster-card{padding:26px 16px 20px}
  .mu-prize{grid-template-columns:1fr;}
  .mu-prize div{display:flex;align-items:baseline;gap:9px;text-align:left;padding:10px 12px}
  .mu-prize b{font-size:18px}
  .mu-rec b{font-size:22px}
}

/* Phone, recruiting: screen one is YOUR ENTRY and the verb, and nothing else —
   the same shape the live strip takes, for the same reason. Three cells at
   390px means the verb loses half its width and reads "OUR ROL". The two
   reference figures are on screen two, where there is room to read them. */
@media (max-width:900px){
  #c-sign,#c-prize{display:none}
  body.numbers #c-sign,body.numbers #c-prize{display:flex}
  body.numbers .strip.pre{display:grid;grid-template-columns:1fr 1fr;
    grid-template-areas:"hero hero" "signed prize" "verb verb"}
  body.numbers #c-entry{grid-area:hero}
  body.numbers #c-sign{grid-area:signed}
  body.numbers #c-prize{grid-area:prize}
  body.numbers #v-sign{grid-area:verb}
}

/* ══ MODES ═══════════════════════════════════════════════════════════════ */
/* ?clean=1 — for pointing OBS at. Drops every control the audience cannot
   press anyway and gives the whole frame to the mine. */
body.clean .strip,body.clean .panel-tab,body.clean .tb-r,body.clean .tape,body.clean .file{display:none}

/* ?crew=/?floor= is on. Say so, loudly and permanently, over the picture. */
body.simulated .stage::after{content:"SIMULATED FLOOR · NOT REAL HOLDERS";position:absolute;
  z-index:9;left:50%;top:40%;transform:translate(-50%,-50%) rotate(-13deg);
  font-family:var(--mono);font-size:clamp(13px,2.4vw,26px);letter-spacing:.24em;
  color:rgba(255,59,92,.5);border:3px solid rgba(255,59,92,.4);padding:10px 20px;border-radius:8px;
  pointer-events:none;white-space:nowrap}

@media (hover:none){.ico:hover{background:rgba(242,178,60,.08)}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
}