/* 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}}
.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)}}

.slide-viz{position:absolute;right:4%;top:50%;transform:translateY(-58%);
  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 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))}
/* 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)}
.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)}
.ico.wide{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}

  /* 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}
  .bubble{max-width:calc(100vw - 24px);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 small,
     not left, because there is no horizontal room to give away. */
  .cold-jefe.aside{
    left:auto;right:6px;width:40%;max-width:158px;height:min(20vh,168px);
    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. */
  .slide-viz{
    left:0;right:0;top:auto;width:100%;
    bottom:calc(var(--dlg-h,240px) + min(20vh,168px) + 20px);
    transform:none;padding:8px 12px}
  .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}
}

/* ══ 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}
}