/* BLACK DIAMOND: THE GLITCH CROWN
   ui.css -- the interface is INSTRUMENTATION, not glass.
   No frosted panels, no blurred rounded cards, no glowing borders. Thin plates
   with real edge thickness, hairline chrome rules, engraved uppercase labels,
   tick marks, hallmarks, serial numbers. The HUD earns its keep by being dark,
   so the board is never hidden behind fog. */

@font-face{font-family:'Bodoni Moda';src:url('../fonts/bodoni-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Bodoni Moda';src:url('../fonts/bodoni-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Bodoni Moda';src:url('../fonts/bodoni-900.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jbmono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jbmono-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --void:#01020a;
  --plate:#07080d;
  --plate2:#0b0d13;
  --chrome:#c9ced8;
  --chrome-dim:rgba(201,206,216,.42);
  --chrome-faint:rgba(201,206,216,.16);
  --rule:rgba(201,206,216,.22);
  --gold:#c9a35e;
  --gold-bright:#e8c98a;
  --bd:#e8eef4;
  --en:#b9a8ff;
  --ar:#e8c98a;
  --gk:#8ef0a8;
  --cf:#ffffff;
  --bad:#ff4d5e;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:'Bodoni Moda',Georgia,'Times New Roman',serif;
  --tick:repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px 7px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--void);color:var(--chrome);
  font-family:var(--mono);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overscroll-behavior:none;touch-action:none}
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}

/* the frame around the plate: a machined bezel, not a border */
#frame{position:fixed;inset:0;pointer-events:none;z-index:6;
  box-shadow:inset 0 0 0 1px rgba(201,206,216,.10), inset 0 0 120px rgba(0,0,0,.85), inset 0 0 0 8px rgba(0,0,0,.35)}
#frame .corner{position:absolute;width:16px;height:16px;border:1px solid var(--chrome-dim);opacity:.55}
#frame .corner.tl{top:8px;left:8px;border-right:0;border-bottom:0}
#frame .corner.tr{top:8px;right:8px;border-left:0;border-bottom:0}
#frame .corner.bl{bottom:8px;left:8px;border-right:0;border-top:0}
#frame .corner.br{bottom:8px;right:8px;border-left:0;border-top:0}

/* the kit arrives with the stone: nothing is on screen until there is a game */
#hud{transition:opacity .9s ease}
#hud.loading{opacity:0;pointer-events:none}

.k{font-size:8.5px;letter-spacing:.20em;text-transform:uppercase;color:var(--chrome-dim)}
.mono{font-family:var(--mono)}
.dim{opacity:.5}
.hidden{display:none !important}

/* ------------------------------------------------------------- the plate */
.plate,.rail,.log,.actions,.band,.coach{
  position:fixed;z-index:8;pointer-events:auto;
  background:
    linear-gradient(180deg,rgba(255,255,255,.030),rgba(255,255,255,0) 42%),
    linear-gradient(180deg,var(--plate2),var(--plate));
  border:1px solid rgba(201,206,216,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.9),
    0 10px 26px rgba(0,0,0,.72);
}
.plate::after,.band::after{content:'';position:absolute;left:6px;right:6px;bottom:3px;height:3px;background:var(--tick);opacity:.30;pointer-events:none}
.plate{padding:9px 12px 12px}

/* ------------------------------------------------------------ turn plate */
.plate-turn{top:14px;left:14px;min-width:132px}
.plate-turn .rule{position:absolute;left:8px;right:8px;top:6px;height:1px;background:var(--rule)}
.plate-turn .plate-body{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.plate-turn .v{font-size:22px;font-weight:700;letter-spacing:.02em;line-height:1;color:var(--chrome)}
.plate-turn .v.dim{font-size:13px;opacity:.45}
.plate-turn .ticker{margin-top:7px;border-top:1px solid var(--chrome-faint);padding-top:5px;
  font-size:10px;letter-spacing:.20em;text-transform:uppercase;color:var(--chrome)}
.plate-turn.ai .ticker{color:var(--gold-bright)}

/* ------------------------------------------------------- objective plate */
.plate-objective{top:14px;left:14px;transform:translateY(126px);max-width:min(320px,58vw)}
.plate-objective,.plate-turn{padding-right:12px}
.plate-objective .obj-text{font-family:var(--disp);font-size:15px;line-height:1.25;color:#e6eaf2;margin:5px 0 7px}
.plate-objective .obj-meter{height:3px;background:rgba(255,255,255,.07);position:relative;overflow:hidden}
.plate-objective .obj-meter i{position:absolute;inset:0 100% 0 0;background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  transition:right .5s cubic-bezier(.2,.8,.2,1)}
.plate-objective.done .obj-text{color:var(--cf)}

/* ---------------------------------------------------------------- rail */
.rail{padding:7px 8px;display:flex;gap:6px;flex-direction:row;align-items:stretch}
.rail .res{position:relative;min-width:62px;padding:5px 8px 6px;border:1px solid rgba(201,206,216,.13);
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(0,0,0,.34));text-align:left}
.rail .res .rk{font-size:7.5px;letter-spacing:.16em;color:var(--chrome-dim);display:block}
.rail .res .rv{font-size:17px;font-weight:700;line-height:1.05;display:block;margin-top:1px}
.rail .res .rg{position:absolute;right:5px;top:5px;font-size:9px;opacity:.6}
.rail .res.pulse{animation:resPulse .55s ease-out}
@keyframes resPulse{0%{box-shadow:inset 0 0 0 0 rgba(255,255,255,0);background-color:rgba(255,255,255,.10)}
  100%{box-shadow:inset 0 0 0 0 rgba(255,255,255,0)}}
.rail .res.gain .rv{color:#fff}
.rail .res.loss .rv{color:var(--bad)}
/* BLACK DIAMOND ENERGY LEADS. It is the only resource that is refined rather
   than collected, it is what the endgame is priced in, and the rail says so
   before it says anything else. */
.rail .res[data-res="bde"]{border-color:rgba(223,230,238,.34);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(0,0,0,.42))}
.rail .res[data-res="bde"] .rv{color:#fff;text-shadow:0 0 16px rgba(220,232,255,.42)}
.rail .res[data-res="bde"] .rk{color:rgba(223,230,238,.72)}
.rail .res[data-res="bde"] .rg{color:#dfe6ee !important;opacity:.95}
.rail .res[data-res="bde"].gain .rv{color:#fff;text-shadow:0 0 22px rgba(255,255,255,.85)}

/* ----------------------------------------------------------- combo plate */
.plate-combo{right:14px;top:50%;transform:translateY(-50%);width:82px;text-align:left}
.combo-track{margin:6px 0 5px;height:64px;width:8px;background:rgba(255,255,255,.06);position:relative;
  border:1px solid rgba(201,206,216,.13)}
.combo-track i{position:absolute;left:0;right:0;bottom:0;height:0%;
  background:linear-gradient(0deg,rgba(201,206,216,.35),#fff);transition:height .35s ease}
.combo-name{font-size:8.5px;line-height:1.3;letter-spacing:.10em;color:var(--chrome);opacity:.75;margin-top:4px}
.combo-chain{margin-top:5px;font-size:9px;letter-spacing:.12em;color:var(--gold-bright);min-height:11px}
.plate-combo.hot .combo-name{color:#fff;opacity:1;text-shadow:0 0 12px rgba(255,255,255,.5)}

/* ------------------------------------------------------------ boss plate */
.plate-boss{right:14px;top:14px;width:min(240px,52vw)}
.boss-name{font-family:var(--disp);font-size:17px;color:#e9edf4;margin:4px 0 6px;letter-spacing:.02em}
.boss-track{height:4px;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
.boss-track i{position:absolute;inset:0 0 0 auto;background:linear-gradient(90deg,#3a4150,#8d93a6);width:100%;
  transition:width .4s ease}
.boss-note{font-size:9px;letter-spacing:.06em;color:var(--chrome-dim);margin-top:6px;line-height:1.4}

/* =========================================== the band: floor, ground, case */
/* Three readouts that change every turn and that a player checks constantly.
   They share ONE hairline plate so that the board keeps the screen: three
   separate plates would be three more dark rectangles over the stone. */
.band{display:flex;align-items:stretch;padding:0;max-width:min(620px,44vw)}
.band-cell{padding:8px 11px 10px;min-width:0;border-right:1px solid var(--chrome-faint)}
.band-cell:last-child{border-right:0}
.band-floor{flex:0 1 auto}
.band-hold{flex:0 1 auto}
.band-case{flex:1 1 auto;min-width:96px}

.bf-row{display:flex;align-items:baseline;gap:7px;margin-top:3px}
.bf-n{font-size:17px;font-weight:700;color:#fff;line-height:1;letter-spacing:.01em}
.bf-name{font-family:var(--disp);font-size:12px;color:#e2e7ef;letter-spacing:.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.bf-rule{font-size:8px;line-height:1.35;color:var(--chrome-dim);margin-top:4px;max-width:22ch}
.band-floor.major .bf-name{color:var(--cf)}
.band-floor.major .bf-n{text-shadow:0 0 18px rgba(255,255,255,.6)}

.bh-row{display:flex;align-items:baseline;gap:6px;margin-top:3px;flex-wrap:wrap}
.bh-n{font-size:17px;font-weight:700;color:#eef2f8;line-height:1}
.bh-row u{text-decoration:none;font-size:7.5px;letter-spacing:.14em;color:var(--chrome-dim);margin-right:4px}
.bh-inc{font-size:13px;font-weight:700;color:var(--gold-bright);line-height:1}
.bh-meter{height:3px;background:rgba(255,255,255,.07);margin-top:6px;position:relative;overflow:hidden}
.bh-meter i{position:absolute;inset:0 100% 0 0;background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  transition:right .5s cubic-bezier(.2,.8,.2,1)}

.case-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.case-chip{pointer-events:auto;cursor:pointer;display:flex;align-items:center;gap:5px;
  padding:3px 6px 4px;border:1px solid rgba(201,206,216,.16);background:rgba(0,0,0,.38);
  font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:var(--chrome);transition:border-color .15s}
.case-chip:hover{border-color:rgba(201,206,216,.5)}
.case-chip .cm2{font-size:10px;line-height:1;color:var(--ar)}
.case-chip .cnm{max-width:11ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.case-chip .clv{font-size:8px;color:var(--chrome-dim)}
.case-chip.raised{border-color:rgba(232,201,138,.55)}
.case-chip.raised .clv{color:var(--gold-bright)}
.case-chip.empty{cursor:default;opacity:.34;border-style:dashed}
.case-chip.empty:hover{border-color:rgba(201,206,216,.16)}

/* the chain: the second half of the combo plate. A named combo wants you to
   SWITCH class; a chain wants you to STAY. The plate shows both at once. */
.plate-combo .chain-row{display:flex;align-items:baseline;gap:6px;margin-top:7px;
  border-top:1px solid var(--chrome-faint);padding-top:6px}
.chain-school{font-size:8.5px;letter-spacing:.10em;color:var(--gold-bright);margin-left:auto}
.chain-next{font-size:8px;line-height:1.4;color:var(--chrome-dim);margin-top:3px}
.plate-combo.chaining .chain-school{color:#fff;text-shadow:0 0 10px rgba(232,201,138,.6)}

/* ================================================== the coach: the appraiser */
/* A strategist standing behind your chair. It reads the board and says what
   it would do and why. Collapsed it is one line; WHY opens the reasoning. */
.coach{z-index:9;padding:8px 10px 9px;max-width:min(380px,34vw)}
.coach-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.coach-tools{display:flex;gap:5px}
/* THE FIVE QUESTIONS. R.S.B. is a bot you can ask, so the asking is the row of
   buttons and not a sentence you have to find. Hairline chrome, no fills,
   matching the rest of the kit; the one you pressed takes the gold. */
.coach-modes{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.coach-modes .mini{font-size:7px;letter-spacing:.18em;padding:4px 7px;opacity:.72}
.coach-modes .mini:hover{opacity:1}
.coach-modes .mini.on{opacity:1;color:var(--gold-bright);border-color:rgba(232,201,138,.62);
  background:linear-gradient(180deg,rgba(232,201,138,.14),rgba(0,0,0,.42))}
.coach-title{font-family:var(--disp);font-size:13px;line-height:1.25;color:#eef2f8;margin-top:3px;letter-spacing:.01em}
.coach[data-tone="crown"] .coach-title{color:var(--cf);text-shadow:0 0 18px rgba(255,255,255,.45)}
.coach[data-tone="warn"] .coach-title{color:#ffd0d5}
.coach[data-tone="good"] .coach-title{color:var(--gold-bright)}
.coach-body{display:none}
.coach.open .coach-body{display:block}
.coach-why{font-size:8.5px;line-height:1.5;color:var(--chrome-dim);margin-top:6px}
.coach-chain{font-size:8.5px;line-height:1.5;color:var(--gold-bright);margin-top:6px;
  border-left:1px solid rgba(232,201,138,.35);padding-left:7px}
.coach-chain:empty{display:none}
.coach-steps{list-style:none;counter-reset:cs;margin:7px 0 0;padding:0}
.coach-steps:empty{display:none}
.coach-steps li{counter-increment:cs;position:relative;padding:4px 0 4px 17px;font-size:8.5px;
  line-height:1.45;color:#ccd3df;border-top:1px dashed rgba(201,206,216,.10)}
.coach-steps li::before{content:counter(cs);position:absolute;left:0;top:4px;font-size:7.5px;
  color:var(--gold);letter-spacing:.06em}
.coach-opts{margin-top:7px;border-top:1px solid var(--chrome-faint);padding-top:6px}
.coach-opt{display:flex;align-items:baseline;gap:7px;padding:3px 0;font-size:8.5px;line-height:1.4}
.coach-opt b{font-weight:400;letter-spacing:.12em;color:var(--chrome);flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.coach-opt em{font-style:normal;font-family:var(--mono);font-size:8px;color:var(--chrome-dim);white-space:nowrap}
.coach-opt.off{opacity:.42}
.coach-opt.off b{color:var(--chrome-dim)}
.coach-opt .adv{color:var(--gold-bright)}
.coach-opt.open{cursor:pointer}
.coach-opt.open:hover b{color:#fff}
.coach[data-min="1"] .coach-body{display:none !important}
.coach-min{font-size:8.5px;letter-spacing:.14em;color:var(--chrome-dim);margin-top:4px}

/* ------------------------------------------------------ the crown action */
.act-crown{border-color:rgba(255,255,255,.62);color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(0,0,0,.5));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 34px rgba(220,235,255,.22),0 6px 16px rgba(0,0,0,.6)}
.act-crown em{font-style:normal;font-size:12px;font-weight:700;color:#fff;min-width:24px;text-align:center}
.act-crown:hover{border-color:#fff}

/* ------------------------------------------------------------- actions */
.actions{display:flex;gap:8px;padding:8px;background:none;border:0;box-shadow:none}
.act{position:relative;pointer-events:auto;cursor:pointer;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--chrome);
  padding:11px 14px;border:1px solid rgba(201,206,216,.22);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.008) 45%,rgba(0,0,0,.45));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 6px 16px rgba(0,0,0,.6);
  display:flex;align-items:center;gap:9px;transition:border-color .15s,transform .08s,background .15s}
.act:active{transform:translateY(1px)}
.act:hover{border-color:rgba(201,206,216,.5)}
.act[disabled]{opacity:.45;cursor:default;border-color:rgba(201,206,216,.10)}
.act-end{border-color:rgba(232,201,138,.4)}
.act-end em{font-style:normal;font-size:13px;font-weight:700;color:var(--gold-bright);min-width:11px;text-align:center}
.act-vault{border-color:rgba(255,214,148,.55);color:#ffe3b0;
  box-shadow:inset 0 1px 0 rgba(255,225,170,.16),0 0 22px rgba(255,190,110,.16),0 6px 16px rgba(0,0,0,.6)}
.act-cancel{border-color:rgba(255,77,94,.45);color:#ffb9c0}

/* ------------------------------------------------------------------ log */
.log{padding:0;width:min(340px,64vw)}
.log-head{display:flex;align-items:center;justify-content:space-between;padding:6px 9px 5px;border-bottom:1px solid var(--chrome-faint)}
.log-list{list-style:none;margin:0;padding:5px 9px 7px;max-height:26vh;overflow:hidden;display:flex;flex-direction:column}
.log-list li{font-size:9.5px;line-height:1.45;padding:3px 0;border-bottom:1px dashed rgba(201,206,216,.07);color:var(--chrome-dim)}
.log-list li:last-child{border-bottom:0}
.log-list li b{display:block;font-weight:400;letter-spacing:.14em;text-transform:uppercase;font-size:8.5px;color:var(--chrome);margin-bottom:1px}
.log-list li.combo b{color:#fff}
.log-list li.legendary b{color:var(--cf)}
.log-list li.boss b{color:#9aa1b0}
.log-list li.crown b{color:var(--cf)}
.log-list li.glitch b{color:var(--gk)}
.log-list li.shadow b{color:#9fb0ff}
.log-list li.vault b{color:var(--gold-bright)}
.log-list li.event b{color:var(--gold)}
/* the coin is the one thing in this room that is currency, so its line in
   the ticker is the only one struck in metal rather than printed in ink */
.log-list li.coin b{color:var(--co)}
.log.expanded .log-list{max-height:44vh;overflow-y:auto}

/* ------------------------------------------------------------- brief line */
.brief-line{position:fixed;z-index:8;pointer-events:none;text-align:center;
  font-size:9.5px;letter-spacing:.20em;text-transform:uppercase;color:rgba(232,238,247,.72);
  text-shadow:0 2px 10px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,1)}
.brief-line.alert{color:#ffd9a0}

/* --------------------------------------------------------------- buttons */
.mini{pointer-events:auto;cursor:pointer;font-family:var(--mono);font-size:8px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(201,206,216,.66);background:rgba(255,255,255,.03);
  border:1px solid rgba(201,206,216,.20);padding:4px 7px;transition:color .15s,border-color .15s}
.mini:hover{color:var(--chrome);border-color:rgba(201,206,216,.45)}
/* a control you cannot press still has to say what it would do */
.mini:disabled{color:rgba(201,206,216,.34);border-color:rgba(201,206,216,.12);cursor:default}
.mini-ghost{background:none;border-color:rgba(201,206,216,.18)}
/* the sound switch rides with the actions so it is reachable by thumb and
   never lands on top of a readout */
.mini-sound{align-self:center;flex:0 0 auto}

/* ================================================================ overlays */
.overlay{position:fixed;inset:0;z-index:20;pointer-events:none}
/* `safe center` matters: a screen taller than the window still starts at its
   top edge, so nothing is clipped off the top and out of reach. */
.screen{position:absolute;inset:0;display:none;align-items:safe center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
  pointer-events:auto;overflow-y:auto;overscroll-behavior:contain;
  background:radial-gradient(120% 80% at 50% 45%,rgba(2,3,10,.72),rgba(1,2,8,.95) 70%,rgba(0,0,3,.985))}
.screen.on{display:flex}
.screen-tutorial,.screen-vault{background:radial-gradient(120% 80% at 50% 45%,rgba(2,3,10,.55),rgba(1,2,8,.92))}
/* the market is a room you are standing in, not a pane over the board: the
   HUD must not read through the felt */
.screen-market{background:radial-gradient(120% 80% at 50% 45%,rgba(2,3,10,.93),rgba(1,2,8,.975) 68%,rgba(0,0,3,.99))}
/* the brief is a document and it is read, not glanced at: the board behind it
   is the thing it describes, and its own HUD was printing through the
   paragraphs. Same rule as the market room. */
.screen-brief{background:radial-gradient(120% 80% at 50% 45%,rgba(2,3,10,.94),rgba(1,2,8,.978) 68%,rgba(0,0,3,.992))}
/* the appraiser walks you through a live board: the world stays touchable */
/* THE WALKTHROUGH IS A VOICE, NOT A SHUTTER. It used to dim the whole frame to
   almost black to make its own panel read, and the first thing anybody saw of
   this game was a dark rectangle with a paragraph on it. The panel is a plate
   with its own background and needs none of that: what is left is a soft
   vignette at the edges, and the board the lesson is about stays lit behind it. */
.screen-tutorial{pointer-events:none;background:radial-gradient(120% 90% at 50% 78%,rgba(2,3,10,.10),rgba(1,2,8,.30) 72%,rgba(0,0,3,.52))}
.screen-tutorial .appraiser{pointer-events:auto;align-self:flex-start;margin-top:min(10vh,90px)}

/* ----------------------------------------------------------------- title */
.title-wrap{text-align:center;max-width:820px;width:100%;padding:8px 0}
.title-mark{margin:0 auto 4px;width:96px;height:96px}
.title-mark canvas{width:100%;height:100%;display:block}
.title{font-family:var(--disp);font-weight:900;font-size:clamp(34px,9.2vw,86px);line-height:.94;
  letter-spacing:.03em;margin:2px 0 0;color:#f4f7fc;
  text-shadow:0 0 60px rgba(190,215,255,.24),0 0 4px rgba(255,255,255,.5)}
.subtitle{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 0 18px;
  font-size:clamp(9px,1.9vw,13px);letter-spacing:.46em;text-transform:uppercase;color:var(--gold-bright)}
.subtitle .bar{height:1px;width:clamp(24px,8vw,90px);background:linear-gradient(90deg,transparent,var(--gold))}
.subtitle .bar:last-child{background:linear-gradient(90deg,var(--gold),transparent)}
.blurb{font-family:var(--disp);font-size:clamp(13px,2.1vw,17px);line-height:1.55;color:#c8cfdc;
  max-width:640px;margin:0 auto 22px}
.choose{margin:0 auto 20px;max-width:760px}
.avatars{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:9px}
.av{pointer-events:auto;cursor:pointer;width:min(150px,44vw);text-align:left;padding:9px 11px 10px;
  border:1px solid rgba(201,206,216,.16);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.4));
  transition:border-color .15s,background .15s}
.av:hover{border-color:rgba(201,206,216,.42)}
.av.sel{border-color:var(--gold);background:linear-gradient(180deg,rgba(232,201,138,.10),rgba(0,0,0,.45))}
.av .avn{font-family:var(--disp);font-size:15px;color:#eef2f8;margin-bottom:3px}
.av .avl{font-size:8.5px;line-height:1.45;color:var(--chrome-dim);letter-spacing:.03em}
.av .avp{font-size:8.5px;line-height:1.45;color:var(--gold-bright);margin-top:5px;letter-spacing:.03em}
.av .chip{width:22px;height:3px;background:var(--chrome);margin-bottom:7px}

.start-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.cta{pointer-events:auto;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:#f6f9ff;padding:15px 30px;
  border:1px solid rgba(232,201,138,.55);
  background:linear-gradient(180deg,rgba(232,201,138,.14),rgba(0,0,0,.5));
  box-shadow:inset 0 1px 0 rgba(255,232,190,.2),0 0 30px rgba(220,180,110,.13),0 8px 22px rgba(0,0,0,.7);
  transition:border-color .15s,transform .08s}
.cta:hover{border-color:rgba(255,232,190,.9)}
.cta:active{transform:translateY(1px)}
.cta-ghost{border-color:rgba(201,206,216,.30);color:var(--chrome);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(0,0,0,.5));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.6)}
.hint{margin-top:14px;font-size:8.5px;letter-spacing:.30em;color:var(--chrome-dim)}

/* ------------------------------------------------------------- appraiser */
.appraiser{display:flex;gap:16px;max-width:720px;width:100%;align-items:flex-start;
  padding:18px;border:1px solid rgba(201,206,216,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(0,0,0,.55));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 20px 50px rgba(0,0,0,.8)}
.appraiser-face{flex:0 0 84px;width:84px;height:84px;border:1px solid rgba(201,206,216,.22);
  background:radial-gradient(60% 60% at 50% 40%,rgba(255,220,170,.10),rgba(0,0,0,.6));position:relative}
.appraiser-face canvas{width:100%;height:100%;display:block}
.appraiser-body{flex:1;min-width:0}
.appraiser-text{font-family:var(--disp);font-size:clamp(15px,2.4vw,20px);line-height:1.5;color:#e7ecf4;margin:8px 0 14px;min-height:3em}
.appraiser-foot{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.appraiser-foot .mono{margin-right:auto;font-size:9px}

/* ----------------------------------------------------------------- vault */
.vault-panel{width:100%;max-width:860px;padding:20px 20px 18px;border:1px solid rgba(232,201,138,.28);
  background:linear-gradient(180deg,rgba(255,222,160,.045),rgba(0,0,0,.66));
  box-shadow:inset 0 1px 0 rgba(255,232,190,.10),0 0 90px rgba(255,190,110,.10),0 24px 60px rgba(0,0,0,.85)}
.vault-panel.small{max-width:560px}
.vault-title{font-family:var(--disp);font-weight:700;font-size:clamp(21px,4.4vw,38px);margin:6px 0 10px;color:#fdf6e8;letter-spacing:.02em}
.vault-line{font-family:var(--disp);font-size:clamp(13px,2.1vw,16px);line-height:1.5;color:#cbd0da;margin:0 0 16px}
.vault-odds{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px;margin-bottom:16px}
.odds-cell{padding:9px 11px;border:1px solid rgba(201,206,216,.14);background:rgba(0,0,0,.4)}
.odds-cell .k{display:block;margin-bottom:4px}
.odds-cell .big{font-size:22px;font-weight:700;color:#fff;letter-spacing:.01em}
.contracts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:16px}
.contract{pointer-events:auto;cursor:pointer;text-align:left;padding:13px 14px 14px;
  border:1px solid rgba(201,206,216,.18);background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(0,0,0,.5));
  transition:border-color .15s,background .15s}
.contract:hover{border-color:rgba(255,214,148,.7);background:linear-gradient(180deg,rgba(255,214,148,.09),rgba(0,0,0,.5))}
.contract[disabled]{opacity:.34;cursor:default;border-color:rgba(201,206,216,.10)}
.contract .cn{font-family:var(--disp);font-size:19px;color:#fdf6e8;margin:4px 0 2px}
.contract .cs{font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--chrome-dim)}
.contract .cm{display:flex;gap:14px;margin-top:11px;align-items:baseline}
.contract .cm span{font-size:19px;font-weight:700}
.contract .cm u{text-decoration:none;font-size:8px;letter-spacing:.14em;color:var(--chrome-dim);display:block;margin-top:2px}
.contract .cl{font-size:9px;line-height:1.5;color:var(--chrome-dim);margin-top:10px}
.vault-foot{display:flex;gap:14px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--chrome-faint);padding-top:13px}
.key-toggle{display:flex;gap:8px;align-items:center;cursor:pointer;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--chrome-dim)}
.key-toggle input{appearance:none;width:14px;height:14px;border:1px solid var(--chrome-dim);background:rgba(0,0,0,.5);cursor:pointer;position:relative}
.key-toggle input:checked{background:var(--gk);border-color:var(--gk)}
.key-toggle input:checked::after{content:'';position:absolute;inset:3px;background:#04120a}

/* ------------------------------------------------------------------- end */
.end-panel{width:100%;max-width:820px;text-align:center;padding:24px 20px;
  border:1px solid rgba(201,206,216,.18);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.6));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 60px rgba(0,0,0,.85)}
.end-title{font-family:var(--disp);font-weight:900;font-size:clamp(24px,6vw,58px);margin:8px 0 12px;color:#fff;letter-spacing:.02em;
  text-shadow:0 0 60px rgba(200,220,255,.3)}
.end-line{font-family:var(--disp);font-size:clamp(14px,2.3vw,19px);line-height:1.55;color:#c9cfdb;max-width:600px;margin:0 auto 22px}
.end-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:18px}
.end-log{max-height:22vh;overflow-y:auto;text-align:left;font-size:9.5px;line-height:1.6;color:var(--chrome-dim);
  border-top:1px solid var(--chrome-faint);padding-top:12px;margin-bottom:18px}
.end-log b{color:var(--chrome);font-weight:400;letter-spacing:.12em;text-transform:uppercase;margin-right:.9em}

.start-row-2{margin-top:8px}
/* the replay options are the second row of the same door: DESCEND AGAIN is
   the run you already know, and these are the room it is kept in. */
.end-panel .start-row{gap:8px;flex-wrap:wrap;justify-content:center}

/* ------------------------------------------------- collection + the deck */
.screen-collection,.screen-cards{align-items:center;background:radial-gradient(120% 80% at 50% 45%,rgba(2,3,10,.955),rgba(1,2,8,.985) 70%,rgba(0,0,3,.995))}
.col-line{font-family:var(--disp);font-size:13px;line-height:1.5;color:var(--chrome-dim);margin:0 0 16px}
.odds-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin-bottom:16px}
.col-case{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.col-chip{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 7px 4px;border:1px solid var(--chrome-faint);color:var(--chrome-dim);background:rgba(0,0,0,.4)}
.col-chip.on{border-color:rgba(232,201,138,.5);color:var(--gold-bright)}

/* THE DECK DOES NOT PUSH THE DOOR OFF THE SCREEN. Fifty five ingots two
   across is five thousand pixels of scroll, and a BACK button at the bottom of
   that is a room you cannot leave. The panel takes the height of the frame,
   the deck scrolls inside it, and the way out is always where it was. */
.screen-collection .brief-panel,.screen-cards .brief-panel{display:flex;flex-direction:column;
  max-height:calc(100vh - 28px);min-height:0}
.screen-collection .brief-panel>.start-row,.screen-cards .brief-panel>.start-row{flex:0 0 auto}
.cv-filter{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 14px;flex:0 0 auto}
.cv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:7px;
  margin-bottom:14px;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch}
.col-case{flex:0 0 auto}
.cv-card{border:1px solid rgba(201,206,216,.14);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.5));
  padding:8px 9px 9px;text-align:left}
.cv-card.undrawn{opacity:.46}
.cv-card .cvt{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
.cv-card .cvt .nm{font-family:var(--disp);font-size:12.5px;color:#e6ebf4;letter-spacing:.04em;flex:1;min-width:0}
.cv-card .cvt .co{font-family:var(--mono);font-size:10px;color:var(--gold-bright)}
.cv-card .cvm{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:7.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--chrome-dim);margin-bottom:5px}
.cv-card .cvm .sw{width:8px;height:8px;flex:0 0 8px;display:inline-block}
.cv-card .cvd{font-family:var(--disp);font-size:11.5px;line-height:1.42;color:#b6bdcb;margin:0}
.cv-card .cvu{font-family:var(--mono);font-size:7px;letter-spacing:.16em;color:rgba(201,206,216,.45);margin-top:5px}

/* ---------------------------------------------------------------- brief */
.brief-panel{width:100%;max-width:960px;padding:22px 22px 20px;border:1px solid rgba(201,206,216,.20);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.66));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 60px rgba(0,0,0,.85)}
.brief-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px 22px;margin:14px 0 20px}
.brief-grid h3{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-bright);
  margin:0 0 6px;font-weight:400}
.brief-grid p{font-family:var(--disp);font-size:14px;line-height:1.5;color:#c2c9d6;margin:0}

/* ---------------------------------------------------------------- toast */
.toast{position:fixed;z-index:30;left:50%;top:16%;transform:translate(-50%,-10px);pointer-events:none;
  opacity:0;transition:opacity .25s,transform .25s;text-align:center;max-width:86vw}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast .tt{font-family:var(--disp);font-size:clamp(20px,4.5vw,38px);color:#fff;letter-spacing:.04em;
  text-shadow:0 0 40px rgba(190,215,255,.5),0 3px 18px rgba(0,0,0,.9)}
.toast .ts{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-bright);margin-top:5px}
.toast.warn .tt{color:#ffd0d5}

/* ============================================================ the pitch */
/* The public face of the piece. The film runs in a gate on the left, and the
   case for playing it is made on the right: what it is, what you do in it,
   and one button that starts it. The film is the argument; the words are the
   caption. Neither is decoration. */
/* the case for playing is made over a board that is still running, and words
   laid on a lit board are words nobody finishes. The landing screen gets more
   dark than the others, centred on the two columns, so the object is visible
   around them and never through them. */
.screen-title{background:radial-gradient(118% 88% at 50% 46%,rgba(3,4,10,.89),rgba(1,2,8,.955) 58%,rgba(0,0,3,.985))}
.pitch{display:flex;gap:clamp(16px,3.4vw,44px);align-items:center;justify-content:center;
  max-width:1120px;width:100%;text-align:left}
.pitch-film{position:relative;flex:0 0 auto;width:min(252px,26vw);aspect-ratio:648/1058;
  background:#000;overflow:hidden;
  box-shadow:0 0 0 1px rgba(233,191,70,.34),0 0 0 7px rgba(6,6,9,.92),0 0 0 8px rgba(201,206,216,.13),
             0 40px 110px rgba(0,0,0,.92)}
.pitch-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:contrast(1.16) saturate(.62) brightness(.96)}
.pitch-film .pitch-grade{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.62;
  background:linear-gradient(184deg,#ffd98a 0%,#8a5a12 34%,#160d02 68%,#000 100%)}
.pitch-film .pitch-scan{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.20;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.30) 0 1px,transparent 1px 3px)}
.pitch-film .pitch-frame{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(233,191,70,.10),transparent 22%,transparent 74%,rgba(0,0,0,.72))}
/* top left, opposite the two controls: the foot of the frame is where the film
   burns in its own line, and a label set over it is two captions arguing */
.pitch-tag{white-space:nowrap;position:absolute;left:9px;top:9px;z-index:2;font-size:7.5px;letter-spacing:.24em;
  color:#ffd98a;text-shadow:0 2px 10px rgba(0,0,0,1),0 0 14px rgba(233,191,70,.5)}
.pitch-controls{position:absolute;right:7px;top:7px;z-index:3;display:flex;gap:5px;
  flex-direction:column;align-items:flex-end}
.pitch-controls .mini{background:rgba(3,4,8,.76);backdrop-filter:none}

.pitch-body{flex:1 1 400px;min-width:270px;max-width:660px}
.pitch-body .title-mark{width:66px;height:66px;margin:0 0 8px}
.pitch-body .title{font-size:clamp(30px,5.2vw,60px);margin:0}
.pitch-body .subtitle{justify-content:flex-start;margin:8px 0 10px;
  font-size:clamp(8px,1.15vw,11px);letter-spacing:.34em}
.kicker{font-size:8.5px;letter-spacing:.26em;color:var(--gold-bright);margin-bottom:12px}
.pitch-body .blurb{font-size:clamp(12px,1.5vw,15px);line-height:1.5;margin:0 0 14px;max-width:600px}
.pitch-points{list-style:none;margin:0 0 16px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:7px 18px;max-width:640px}
.pitch-points li{position:relative;padding-left:13px;font-size:9.5px;line-height:1.5;
  color:rgba(201,206,216,.64);letter-spacing:.03em}
.pitch-points li::before{content:'';position:absolute;left:0;top:7px;width:5px;height:1px;background:var(--gold)}
.pitch-points li b{color:#e6ebf3;font-weight:400;letter-spacing:.10em;text-transform:uppercase;
  font-size:9px;display:block;margin-bottom:1px}
.pitch-body .choose{text-align:left;margin:0 0 14px;max-width:none}
.pitch-body .avatars{justify-content:flex-start}
.pitch-body .start-row{justify-content:flex-start;margin-top:0}
.cta-big{font-size:12.5px;letter-spacing:.30em;padding:17px 34px}
.title-read{display:flex;gap:14px;align-items:center;margin-top:15px;flex-wrap:wrap}
.title-read .hint{margin:0}
/* a thumb has no space bar: the key hint is for the machine that has one */
@media (pointer:coarse){.title-read .hint{display:none}}
/* A LAPTOP WINDOW AND A PHONE ON ITS SIDE ARE THE SAME PROBLEM HERE. Four
   operator cards wrapping into two rows of two measured 218px, which put PLAY
   NOW at 439 on a 390 tall frame: the page opened on a menu of prose with no
   way in. One row of four, with the flavour line dropped and the perk kept,
   lands the button above the fold on both. */
@media (min-aspect-ratio:4/3) and (max-height:860px){
  .pitch-body .avatars{flex-wrap:nowrap;gap:6px}
  .pitch-body .av{width:auto;flex:1 1 0;min-width:0;padding:7px 9px 8px}
  .pitch-body .av .avn{font-size:13px;margin-bottom:2px}
  .pitch-body .av .avl{display:none}
  .pitch-body .av .avp{font-size:8px;line-height:1.35;margin-top:2px}
  .pitch-body .av .chip{margin-bottom:5px}
  .pitch-body .choose{margin:0 0 10px}
  .pitch-body .cta-big{padding:12px 22px;font-size:11px}
}
body.tall .title-read{margin-top:9px}

/* the phone: the film is the hook and the button has to be on the same screen
   as it, so every block here is sized to land the call to action above the
   fold on a 390x844 handset rather than one flick below it */
body.tall .pitch{flex-direction:column;gap:9px;text-align:center}
body.tall .pitch-film{width:min(150px,40vw);order:0}
body.tall .pitch-body{flex:0 0 auto;width:100%;max-width:none;order:1}
body.tall .pitch-body .title-mark{display:none}
body.tall .pitch-body .title{font-size:clamp(26px,9.5vw,46px)}
body.tall .pitch-body .subtitle{justify-content:center;margin:5px 0 6px}
body.tall .pitch-body .blurb{font-size:11.5px;line-height:1.45;margin:0 auto 9px;max-width:44ch}
body.tall .pitch-points{text-align:left;margin:0 auto 10px;max-width:48ch;grid-template-columns:1fr 1fr;gap:4px 12px}
body.tall .pitch-points li{font-size:9px;line-height:1.4;padding-left:11px}
body.tall .kicker{font-size:7.5px;letter-spacing:.20em;margin-bottom:7px}
body.tall .pitch-body .choose{text-align:center;margin:0 0 8px}
body.tall .pitch-body .avatars{justify-content:center;margin-top:6px;gap:6px}
body.tall .av{width:min(150px,45vw);padding:7px 9px 8px}
body.tall .av .avn{font-size:13px;margin-bottom:2px}
/* the phone keeps the name and the perk, which is what the choice is about,
   and drops the flavour line: four operators have to fit above the button */
body.tall .av .avl{display:none}
body.tall .av .avp{font-size:8px;line-height:1.35;margin-top:0}
body.tall .av .chip{margin-bottom:5px}
body.tall .pitch-body .start-row{justify-content:center}
body.tall .title-read{justify-content:center}
body.tall .cta-big{padding:15px 26px;font-size:11px;margin-top:6px}
@media (max-height:760px){
  body.tall .pitch-film{width:min(120px,32vw)}
  body.tall .pitch-body .blurb{display:none}
  body.tall .pitch-body .title{font-size:clamp(24px,8.5vw,40px)}
}
@media (max-height:600px){
  body.tall .pitch-film{display:none}
}

/* ========================================================== the market */
.market-panel{width:100%;max-width:1000px;padding:20px 20px 18px;border:1px solid rgba(201,206,216,.20);
  background:linear-gradient(180deg,rgba(10,12,18,.94),rgba(0,0,0,.90));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 60px rgba(0,0,0,.85)}
.market-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:0 0 16px}
.lot{pointer-events:auto;cursor:pointer;text-align:left;padding:12px 13px 13px;
  border:1px solid rgba(201,206,216,.18);background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(0,0,0,.5));
  transition:border-color .15s,background .15s}
.lot:hover:not(:disabled){border-color:rgba(232,201,138,.7);background:linear-gradient(180deg,rgba(232,201,138,.08),rgba(0,0,0,.5))}
/* a lot you cannot afford is still a lot you have to be able to read: the
   price and the effect are the decision */
.lot:disabled{opacity:.6;cursor:default}
.lot:disabled .lc span{color:var(--chrome-dim)}
.lot .lm{font-size:15px;color:var(--ar);line-height:1}
.lot .ln{font-family:var(--disp);font-size:17px;color:#f2f5fa;margin:5px 0 3px}
.lot .lp{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--chrome-dim)}
.lot .lc{display:flex;gap:14px;align-items:baseline;margin-top:9px}
.lot .lc>div{display:flex;align-items:baseline;gap:4px}
/* a relic can cost two currencies; they are added, not listed */
.lot .lc>div+div::before{content:'+';font-size:10px;color:var(--chrome-dim);margin-right:1px}
.lot .lc span{font-size:16px;font-weight:700;color:#fff}
.lot .lc u{text-decoration:none;font-size:7.5px;letter-spacing:.14em;color:var(--chrome-dim)}
.lot .ll{font-size:8.5px;line-height:1.45;color:var(--chrome-dim);margin-top:9px}
.market-bench{margin-top:4px;border-top:1px solid var(--chrome-faint);padding-top:11px}
.bench-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:9px;margin-top:8px}
.bench{padding:10px 11px 11px;border:1px solid rgba(201,206,216,.16);background:rgba(0,0,0,.4)}
.bench .bn{font-family:var(--disp);font-size:15px;color:#edf1f7;margin:3px 0 2px}
.bench .bl{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--chrome-dim)}
.bench .bc{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.bench .bc .mini{flex:1 1 auto;text-align:center;padding:7px 8px}
.bench.empty{opacity:.4}

/* ==================================================== the floor change */
/* A descent has eleven floors and each one changes the rules. The change is
   announced as a title card over the board, not as a line in the ticker. */
.floor-card{position:fixed;inset:0;z-index:34;display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;transition:opacity .7s ease;
  background:radial-gradient(90% 60% at 50% 50%,rgba(2,3,9,.72),rgba(0,0,4,.94) 78%)}
.floor-card.on{opacity:1}
.floor-inner{text-align:center;width:min(760px,92vw)}
.fc-n{font-size:10px;letter-spacing:.72em;color:var(--gold-bright);text-transform:uppercase}
.fc-name{font-family:var(--disp);font-weight:900;font-size:clamp(28px,7vw,68px);line-height:1;margin:10px 0 6px;
  color:#fff;letter-spacing:.01em;text-shadow:0 0 70px rgba(210,230,255,.42),0 6px 40px rgba(0,0,0,1)}
.fc-sub{font-size:9px;letter-spacing:.44em;text-transform:uppercase;color:rgba(232,238,247,.72);margin-bottom:16px}
.fc-line{font-family:var(--disp);font-size:clamp(13px,2.1vw,19px);line-height:1.55;color:#c9cfdb;
  max-width:620px;margin:0 auto 12px}
.fc-hazard{font-size:9px;letter-spacing:.20em;text-transform:uppercase;color:#ffd9a0;
  max-width:620px;margin:0 auto;text-shadow:0 0 18px rgba(255,190,110,.35)}
.fc-rule{height:1px;width:min(420px,70vw);margin:14px auto;background:linear-gradient(90deg,transparent,var(--co-dim),transparent)}
.floor-card.major .fc-name{color:#fff;text-shadow:0 0 100px rgba(255,255,255,.7),0 6px 40px rgba(0,0,0,1)}
.floor-card.major .fc-hazard{color:#ffb9c0;text-shadow:0 0 18px rgba(255,77,94,.45)}

/* ----------------------------------------------------------------- boot */
.boot{position:fixed;inset:0;z-index:40;background:var(--void);display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease}
.boot.gone{opacity:0;pointer-events:none}
.boot-inner{text-align:center;width:min(300px,70vw)}
.boot-bar{margin-top:12px;height:1px;background:rgba(201,206,216,.18);position:relative;overflow:hidden}
.boot-bar i{position:absolute;inset:0 100% 0 0;background:linear-gradient(90deg,var(--gold),#fff);transition:right .3s ease}

/* ================================================================ layouts */

/* wide: the rail runs down the left, the log sits along the bottom left.
   The band takes the top centre, which was the one stretch of the frame
   nothing was using, and the appraiser tucks in above the action bar. */
body.wide .rail{left:14px;top:50%;transform:translateY(-24%);flex-direction:column;width:96px}
body.wide .band{left:50%;transform:translateX(-50%);top:14px}
body.wide .plate-boss{z-index:9}
body.wide .coach{left:auto;right:14px;bottom:calc(14px + 84px);transform:none;width:min(330px,30vw)}
body.wide .brief-line{left:14px;right:auto;transform:none;bottom:auto;top:216px;text-align:left;max-width:30vw}
body.wide .actions{right:14px;bottom:14px;flex-wrap:wrap;justify-content:flex-end;max-width:52vw}
body.wide .log{left:14px;bottom:14px;width:min(300px,34vw)}
body.wide .plate-combo{right:14px}

/* square: rail goes across the top, everything tightens */
body.square .rail{left:50%;transform:translateX(-50%);top:12px;flex-direction:row}
body.square .band{left:50%;transform:translateX(-50%);top:62px;max-width:min(560px,68vw)}
body.square .plate-turn{top:12px;left:12px}
body.square .plate-objective{top:12px;left:12px;transform:none;margin-top:140px}
body.square .plate-boss{right:12px;top:12px;z-index:9}
body.square .coach{left:auto;right:12px;bottom:calc(12px + 80px);transform:none;width:min(300px,32vw)}
body.square .brief-line{left:12px;right:auto;transform:none;top:auto;bottom:calc(12px + 78px);
  text-align:left;max-width:42vw}
body.square .plate-combo{right:12px;top:auto;bottom:150px;transform:none;width:74px}
body.square .actions{right:12px;bottom:12px;flex-wrap:wrap;justify-content:flex-end;max-width:56vw}
body.square .log{left:12px;bottom:12px;width:min(300px,46vw)}

/* tall: the phone held upright. The HUD reflows rather than asking for a rotate. */
body.tall .rail{left:10px;right:10px;top:10px;transform:none;flex-direction:row;justify-content:space-between;gap:5px;padding:6px}
body.tall .rail .res{min-width:0;flex:1;padding:4px 6px 5px}
body.tall .rail .res .rv{font-size:14px}
body.tall .rail .res .rk{font-size:7px;letter-spacing:.10em}
body.tall .rail .res .rg{display:none}
body.tall .plate{padding:6px 8px 7px}
/* THE PORTRAIT COLUMN IS BUILT SIDEWAYS. Stacked, the descent, the objective
   and the band ran from the top of the frame to better than half way down it,
   and the board, which is the thing the game is played on, was left a strip
   one hundred and fifty pixels tall behind the appraiser on a first turn. The
   readouts are the same readouts; they are two to a row now, and the board
   gets the middle of the screen back. */
body.tall .plate-turn{top:62px;left:10px;min-width:88px;padding:5px 8px 6px}
body.tall .plate-turn .v{font-size:14px}
body.tall .plate-turn .ticker{display:none}
body.tall .plate-objective{top:62px;left:10px;right:10px;transform:none;margin-top:0;
  margin-left:146px;max-width:none}
body.tall .plate-objective .obj-text{font-size:12px;margin:3px 0 0}
body.tall .plate-objective .obj-meter{display:none}
body.tall .plate-objective .mini{padding:3px 6px;font-size:7.5px}
body.tall .plate-boss{top:62px;right:10px;left:auto;width:min(178px,48vw)}
body.tall .boss-name{font-size:14px}
/* the band on a phone: two readouts across and the case on its own line.
   Three cells across 390px wraps every label into a column of single words,
   and the case is the one that has to stay readable. */
body.tall .band{left:10px;right:10px;top:132px;transform:none;max-width:none;padding:0;
  display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"floor hold" "case case"}
body.tall .band-floor{grid-area:floor}
body.tall .band-hold{grid-area:hold}
body.tall .band-case{grid-area:case;border-top:1px solid var(--chrome-faint)}
body.tall .band-case .k{white-space:nowrap}
body.tall .case-row{flex-wrap:wrap;margin-top:4px}
body.tall .band-cell{padding:6px 8px 8px}
body.tall .bf-n{font-size:14px}
body.tall .bf-name{font-size:11px}
body.tall .bf-rule{display:none}
body.tall .bh-n{font-size:14px}
body.tall .bh-row u{font-size:7px;margin-right:2px}
body.tall .bh-inc{font-size:11px}
body.tall .bh-meter{margin-top:4px}
body.tall .case-chip{padding:2px 5px 3px;font-size:7.5px}
body.tall .case-chip .cnm{max-width:7ch}
/* the chain runs across the strip under the case rather than down the side of
   the board, which in portrait is where the pieces and the hand already are */
body.tall .plate-combo{left:10px;right:10px;top:auto;bottom:auto;transform:none;width:auto;margin:0;
  display:flex;align-items:center;gap:9px;padding:5px 9px 6px;top:240px}
body.tall .plate-combo .combo-track{display:none}
body.tall .plate-combo .combo-name{font-size:8.5px;letter-spacing:.08em;margin:0}
body.tall .plate-combo .combo-chain{font-size:8px;margin:0}
body.tall .plate-combo .chain-row{margin:0 0 0 auto;border:0;padding:0;gap:5px}
body.tall .plate-combo .chain-school{font-size:8.5px}
body.tall .plate-combo .chain-next{display:none}
/* The plates sit right above the buttons on a phone, so the row of actions
   gets a floor of its own to stand on rather than being read through them. */
body.tall .actions{background:linear-gradient(180deg,transparent,rgba(2,3,8,.86) 34%,rgba(2,3,8,.96))}
body.tall .act{background:linear-gradient(180deg,rgba(28,32,42,.92),rgba(9,11,17,.95))}
/* the bar measures itself into --act-h (hud.js), so the panel stands on top of
   whatever buttons the floor has actually put there rather than on a guess */
body.tall .coach{z-index:10;left:10px;right:10px;
  bottom:calc(max(10px,env(safe-area-inset-bottom)) + 4px + var(--act-h,66px) + 6px);
  transform:none;max-width:none}
body.tall .coach-why,body.tall .coach-steps li,body.tall .coach-chain,body.tall .coach-opt{font-size:8px}
/* opened on a phone it is a bounded panel, not a takeover: the hand stays in
   sight at the bottom and the reasoning scrolls inside it */
body.tall .coach-body{max-height:40vh;overflow-y:auto;overscroll-behavior:contain}
body.tall .actions{left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));justify-content:center;
  flex-wrap:wrap;gap:6px;max-width:none}
body.tall .actions .act{padding:12px 12px;font-size:9px;flex:1 1 auto;justify-content:center}
/* the ticker keeps to its own strip between the chain and the hand: three
   lines of it, and EXPAND opens it over the board when somebody wants the
   whole descent */
body.tall .log{left:10px;right:10px;bottom:auto;top:274px;width:auto}
body.tall .log .log-list{max-height:58px;
  -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent);
  mask-image:linear-gradient(180deg,#000 74%,transparent)}
body.tall .log.expanded{top:180px;z-index:12}
body.tall .log.expanded .log-list{max-height:38vh}
/* the instruction goes in the clear strip between the ticker and the hand
   rather than across the card faces */
body.tall .brief-line{bottom:auto;top:372px;left:50%;transform:translateX(-50%);
  max-width:92vw;font-size:8.5px;letter-spacing:.14em}
/* THE WALKTHROUGH TAKES A STRIP OF ITS OWN. Centred, it lands straight on top
   of the descent and the objective, and a first-time player reading it cannot
   see what it is telling them about. So on a phone it moves down into the
   ticker's slot, and the ticker and the one-line brief step aside for the
   seven steps: both are already saying what the appraiser is saying. */
body.tall.walk .log,
body.tall.walk .brief-line{display:none}
body.tall .screen-tutorial .appraiser{position:fixed;left:10px;right:10px;top:296px;
  margin-top:0;max-width:none;padding:12px;gap:12px;
  background:linear-gradient(180deg,rgba(8,10,16,.94),rgba(2,3,8,.96))}
body.tall .screen-tutorial .appraiser-face{flex:0 0 62px;width:62px;height:62px}
body.tall .screen-tutorial .appraiser-text{font-size:14px;line-height:1.42;margin:6px 0 10px;min-height:0}
body.tall .screen-tutorial .appraiser-body{max-height:34vh;overflow-y:auto;overscroll-behavior:contain}
/* the 3D hand occupies the lower third in portrait; keep the HUD clear of it */
body.tall .actions{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 4px)}

@media (max-width:420px){
  /* the ending is nineteen readouts on a 360 wide screen: two across put the
     buttons five scrolls down. Three across costs nothing and halves it. */
  .end-grid{grid-template-columns:repeat(3,1fr);gap:6px}
  .end-grid .big{font-size:17px}
  .end-grid .odds-cell{padding:7px 8px}
  .end-title{font-size:clamp(22px,7vw,40px)}
  body.tall .plate-objective{max-width:64vw}
  body.tall .plate-objective .obj-text{font-size:12px}
  body.tall .log{width:min(200px,50vw)}
  body.tall .bf-name{font-size:10px}
  body.tall .case-chip .cnm{display:none}
}
@media (max-height:430px){
  body.wide .log .log-list{max-height:18vh}
  /* a frame this short has the log along its foot, where a list of five lines
     would run into the objective above it: one line and the EXPAND button */
  body.wide .log .log-list{max-height:22px}
  body.wide .plate-objective .obj-text{font-size:13px}
  body.wide .brief-line{display:none}
}
@media (max-height:640px){
  /* A SHORT PHONE HAS NO ROOM FOR THE LONG FORM OF ANYTHING. At 640 tall the
     band sat above the action bar and the log sat at half the frame, which is
     where the band and the appraiser already were: three panels printed on one
     another, and the hand behind all three. Measured on a 360 by 640 handset
     the band was drawn straight through the appraiser's title. So on a short
     frame the band stands on the appraiser's measured height rather than on a
     guess, its three cells run as one row, and the log keeps a single line. */
  /* and the band stays in the top stack rather than standing on the appraiser:
     anchored to the bottom it took the middle of the frame, which is the only
     stretch of a short portrait screen the board has, so the readouts moved up
     into the column with the rest of them and the board kept the gap. */
  /* a 360 wide frame has no room for a third readout beside the other two,
     and the rail is already carrying the relic count: FLOOR and TERRITORY
     keep the row and the case steps out of it */
  body.tall .band{top:196px;left:10px;right:10px;display:flex;gap:5px}
  body.tall .band-case{display:none}
  body.tall .band-cell{flex:1 1 0;min-width:0;border-top:0;padding:4px 7px 5px}
  body.tall .band .bf-rule,body.tall .band .bh-meter,body.tall .band .case-row{display:none}
  body.tall .band-case .case-chip{display:none}
  body.tall .bf-n,body.tall .bh-n{font-size:12px}
  body.tall .bf-name,body.tall .bh-inc{font-size:8.5px}
  body.tall .log{top:134px;margin-top:0;width:100%;left:10px;right:10px}
  body.tall .log .log-list{max-height:20px}
  body.tall .log-list li:not(:last-child){display:none}
  /* the combo strip rides on a margin above a band whose position is measured,
     which is no longer a relationship, so it takes the row under the band */
  body.tall .plate-combo{top:254px;margin-top:0;bottom:auto}
  /* the appraiser is the last panel between the hand and the bar, so on a short
     frame he goes on a diet: the name, the five questions and one line */
  body.tall .coach-head .k{font-size:7px;letter-spacing:.10em}
  body.tall .coach-modes .mini{padding:3px 6px;font-size:7.5px}
  body.tall .coach-body{font-size:11.5px;line-height:1.3}
  body.tall .coach-body .coach-line{font-size:12.5px}
}
@media (max-height:740px){
  /* A PHONE ON ITS SIDE IS NOT A SMALL LAPTOP, and neither is a short window. The landscape layout is built
     for a frame with height to spare: the rail is a column of seven resources
     three hundred and forty pixels tall, so on a frame of three hundred and
     ninety it ran off the bottom and printed through the objective and the log,
     and the combo plate and the appraiser collided on the right. None of that
     is a size problem, it is a shape problem: on a short frame there is width
     to spare and no height at all, so the rail lies along the bottom instead of
     down the side, the objective and the log stack where the rail was, the
     combo becomes a strip across the top right and the boss lands under it. */
  body.wide .plate{padding:6px 9px 8px}
  body.wide .plate-turn{top:8px;left:10px;min-width:110px}
  body.wide .plate-turn .v{font-size:16px}
  body.wide .plate-turn .ticker{font-size:8px;margin-top:4px;padding-top:3px}
  body.wide .plate-objective{top:170px;left:10px;transform:none;margin-top:0;max-width:min(210px,26vw)}
  body.wide .plate-objective .obj-text{font-size:11.5px;line-height:1.3;margin:4px 0 5px}
  /* the rail stands under the turn plate rather than along the bottom, because
     the bottom of a landscape frame is where the hand is drawn */
  body.wide .rail{left:10px;right:auto;top:122px;bottom:auto;transform:none;
    flex-direction:row;width:auto;padding:3px 4px}
  body.wide .rail .res{min-width:0;padding:3px 6px 4px}
  body.wide .rail .res .rk{font-size:6px;letter-spacing:.08em}
  body.wide .rail .res .rv{font-size:13px}
  body.wide .rail .res .rg{display:none}
  body.wide .log{left:10px;top:auto;bottom:max(8px,env(safe-area-inset-bottom));
    width:min(210px,26vw)}
  body.wide .log .log-list{max-height:44px}
  body.wide .actions{right:10px;bottom:max(8px,env(safe-area-inset-bottom));max-width:54vw}
  body.wide .coach{left:auto;right:10px;transform:none;width:min(300px,34vw);max-width:none;
    bottom:calc(max(8px,env(safe-area-inset-bottom)) + var(--act-h,66px) + 6px)}
  body.wide .plate-combo{right:10px;top:8px;bottom:auto;transform:none;width:auto;
    max-width:min(200px,24vw);padding:5px 9px 6px;text-align:right}
  body.wide .plate-combo .k,body.wide .plate-combo .combo-track,
  body.wide .plate-combo .chain-next{display:none}
  body.wide .plate-combo .combo-name{margin:0;font-size:9px}
  body.wide .plate-combo .combo-chain{margin:2px 0 0;font-size:9px}
  body.wide .plate-combo .chain-row{margin-top:3px;gap:5px}
  body.wide .plate-boss{right:10px;top:66px;width:min(210px,30vw)}
  body.wide .brief-line{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.06s !important}
}

/* ================================================================== coin */
/* The one warm object in the piece. Everywhere else the palette is chrome
   on stone; the coin is struck gold and is allowed to say so. */
:root{ --co:#e9bf46; --co-dim:rgba(233,191,70,.46); --co-faint:rgba(233,191,70,.18); }

.rail .res[data-res="co"]{border-color:var(--co-faint)}
.rail .res[data-res="co"] .rv{color:var(--co)}
.rail .res[data-res="co"] .rg{opacity:.85;color:var(--co)}
.rail .res[data-res="co"].gain .rv{color:#fff2bd;text-shadow:0 0 18px rgba(233,191,70,.8)}
.rail .res[data-res="co"].pulse{animation:coPulse .7s ease-out}
@keyframes coPulse{
  0%{box-shadow:0 0 0 0 rgba(233,191,70,.55);border-color:rgba(233,191,70,.9)}
  100%{box-shadow:0 0 0 14px rgba(233,191,70,0);border-color:var(--co-faint)}
}

/* the caption under the held object: an engraved plate, never a card */
.coin-plate{
  position:fixed;z-index:22;left:50%;bottom:clamp(14px,4.5vh,52px);transform:translateX(-50%);
  width:min(620px,92vw);pointer-events:none;text-align:center;
  opacity:0;transition:opacity .5s ease;
}
/* the plate has to be read while an object turns in front of it, so it
   carries its own darkness the way an engraved plaque carries its own edge */
.coin-plate::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:150%;height:340%;pointer-events:none;
  background:radial-gradient(44% 32% at 50% 52%,rgba(2,3,8,.94) 0%,rgba(2,3,8,.72) 46%,transparent 84%)}
.coin-plate > *{position:relative}
.coin-plate.in{animation:coinPlate 5.4s ease forwards}
@keyframes coinPlate{ 0%{opacity:0} 8%{opacity:1} 84%{opacity:1} 100%{opacity:0} }
.coin-plate .cp-rule{height:1px;background:linear-gradient(90deg,transparent,var(--co-dim) 18%,var(--co-dim) 82%,transparent)}
.coin-plate .cp-row{display:flex;align-items:baseline;justify-content:center;gap:14px;padding:8px 0 3px}
.coin-plate .cp-k{font-size:9px;letter-spacing:.42em;text-transform:uppercase;color:var(--co)}
.coin-plate .cp-n{font-size:22px;font-weight:700;color:#fff2bd;text-shadow:0 0 22px rgba(233,191,70,.75)}
.coin-plate .cp-held{font-size:9px;letter-spacing:.26em;color:rgba(232,238,247,.82);
  text-shadow:0 2px 10px rgba(0,0,0,1)}
.coin-plate .cp-line{font-family:var(--disp);font-size:clamp(13px,2.3vw,19px);color:#fff;
  letter-spacing:.01em;padding-bottom:8px;text-shadow:0 2px 14px rgba(0,0,0,1)}

/* while the object is held up, the kit stands back: the room is still there,
   it just stops competing with the thing you were handed */
#hud{transition:opacity .55s ease}
body.coining .plate-turn,body.coining .plate-objective,body.coining .rail,
body.coining .plate-combo,body.coining .plate-boss,body.coining .actions,
body.coining .band,body.coining .coach,
body.coining .log,body.coining .brief-line{
  opacity:0;transition:opacity .5s ease}
body.coining #frame{opacity:0;transition:opacity .5s ease}

/* the vault's fourth lever */
.coin-toggle{padding:0;border:0}
.burn-btn{font-family:var(--mono);font-size:9px;letter-spacing:.20em;text-transform:uppercase;
  padding:7px 12px;background:transparent;color:var(--co-dim);border:1px solid var(--co-faint);
  cursor:pointer;transition:color .18s,border-color .18s,background .18s}
.burn-btn:hover:not(:disabled){color:var(--co);border-color:var(--co-dim)}
.burn-btn.armed{color:#0a0803;background:var(--co);border-color:var(--co);font-weight:700}
.burn-btn:disabled{opacity:.34;cursor:default}
.odds-cell .big.coin{color:var(--co)}

/* ================================================================= film */
/* THE OPENING. The clip is portrait and the frame is whatever the window
   is, so the film is shown through an aperture rather than stretched or
   cropped to fit: a gate with real thickness, gold spill on the stone
   around it, and the scanner of a projector crossing the gate. */
.intro{position:fixed;inset:0;z-index:38;background:transparent;overflow:hidden;
  transition:opacity .85s ease}
.intro.out{opacity:0;pointer-events:none}
.intro-vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 78% at 50% 46%,rgba(1,2,6,.52) 26%,rgba(0,0,0,.90) 100%)}
.intro-spill{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(38% 42% at 50% 48%,rgba(233,191,70,.20),transparent 72%)}

.intro-aperture{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,3.4vh,44px)}
.intro-gate{position:relative;height:100%;max-width:100%;
  aspect-ratio:648/1058;background:#000;
  box-shadow:0 0 0 1px rgba(233,191,70,.30), 0 0 0 7px rgba(6,6,9,.9), 0 0 0 8px rgba(201,206,216,.13),
             0 40px 120px rgba(0,0,0,.9);
  animation:gateIn 1.5s cubic-bezier(.16,.9,.24,1) both}
@keyframes gateIn{
  0%{clip-path:inset(50% 0 50% 0);opacity:0}
  100%{clip-path:inset(0 0 0 0);opacity:1}
}
/* The clip is graded into this room rather than played as it arrived: the
   saturation comes down, the contrast goes up, and a warm pass lays gold
   into the highlights so the film and the stone are lit by the same lamp. */
.intro-gate video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:contrast(1.16) saturate(.62) brightness(.96)}
.intro-grade{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.62;
  background:linear-gradient(184deg,#ffd98a 0%,#8a5a12 34%,#160d02 68%,#000 100%)}
.intro-grade2{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.34;
  background:radial-gradient(72% 62% at 50% 44%,transparent 40%,rgba(2,3,12,.95) 100%)}
.intro-scan{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.20;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.30) 0 1px,transparent 1px 3px)}
.intro-frame{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(233,191,70,.10),transparent 22%,transparent 78%,rgba(0,0,0,.5))}
/* the wall breaking. The gate takes the blow and swells with it. */
.intro-gate.burst{animation:gateBurst 1.15s cubic-bezier(.12,.9,.2,1) both}
@keyframes gateBurst{
  0%{transform:scale(1)}
  14%{transform:scale(1.075)}
  30%{transform:scale(1.012)}
  100%{transform:scale(1)}
}
.intro-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:#fff5dd;
  mix-blend-mode:screen;z-index:3}
.intro-gate.burst .intro-flash{animation:gateFlash .5s ease-out both}
@keyframes gateFlash{0%{opacity:.70}100%{opacity:0}}
.intro-corner{position:absolute;width:14px;height:14px;border:1px solid var(--co-dim)}
.intro-corner.tl{top:-8px;left:-8px;border-right:0;border-bottom:0}
.intro-corner.tr{top:-8px;right:-8px;border-left:0;border-bottom:0}
.intro-corner.bl{bottom:-8px;left:-8px;border-right:0;border-top:0}
.intro-corner.br{bottom:-8px;right:-8px;border-left:0;border-top:0}

.intro-plate{position:absolute;left:50%;bottom:clamp(52px,11vh,120px);transform:translateX(-50%);
  width:min(760px,94vw);text-align:center;pointer-events:none}
/* the title has to be read over a moving picture, so it carries its own
   darkness with it rather than hoping the frame behind it stays quiet */
.intro-plate::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:132%;height:250%;pointer-events:none;
  background:radial-gradient(46% 40% at 50% 50%,rgba(2,3,8,.86) 0%,rgba(2,3,8,.62) 48%,transparent 82%)}
.intro-plate .ip-rule{position:relative;height:1px;
  background:linear-gradient(90deg,transparent,var(--co-dim) 12%,rgba(255,240,200,.85) 50%,var(--co-dim) 88%,transparent)}
.intro-plate .ip-top{position:relative;font-size:9px;letter-spacing:.56em;text-transform:uppercase;
  color:#ffd98a;padding:10px 0 6px;
  text-shadow:0 0 18px rgba(233,191,70,.55),0 2px 14px rgba(0,0,0,1)}
.intro-plate{opacity:0;transition:opacity .9s ease}
.intro-plate.in{opacity:1}
.intro-plate .ip-title{position:relative;font-family:var(--disp);font-weight:900;margin:0;
  font-size:clamp(26px,7.2vw,76px);line-height:.98;color:#fff;
  text-shadow:0 0 90px rgba(233,191,70,.50),0 6px 40px rgba(0,0,0,1),0 1px 0 rgba(0,0,0,1)}
/* struck, not typed: the letters arrive out of a wide tracking and settle */
.intro-plate.in .ip-title{animation:titleStrike 1.5s cubic-bezier(.14,.86,.2,1) both}
@keyframes titleStrike{
  0%{letter-spacing:.30em;opacity:0;filter:blur(9px)}
  38%{opacity:1;filter:blur(0)}
  100%{letter-spacing:.015em;opacity:1;filter:blur(0)}
}
.intro-plate .ip-sub{position:relative;font-size:9px;letter-spacing:.44em;text-transform:uppercase;
  color:rgba(232,238,247,.86);padding:10px 0 11px;text-shadow:0 2px 14px rgba(0,0,0,1)}

.intro-skip{position:absolute;right:clamp(12px,3vw,34px);bottom:clamp(12px,3vh,34px);
  font-family:var(--mono);font-size:9px;letter-spacing:.28em;padding:9px 15px;
  background:rgba(3,4,8,.72);color:var(--chrome-dim);border:1px solid var(--chrome-faint);
  cursor:pointer;transition:color .2s,border-color .2s}
.intro-skip:hover{color:var(--chrome);border-color:var(--rule)}
.intro-bar{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(201,206,216,.10)}
.intro-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--co),#fff2bd)}
.intro.shut .intro-gate{animation:gateOut .8s cubic-bezier(.6,0,.9,.4) both}
@keyframes gateOut{
  0%{clip-path:inset(0 0 0 0);opacity:1}
  100%{clip-path:inset(50% 0 50% 0);opacity:0}
}
/* portrait phones: the gate fills the width, the plate tucks under it */
body.tall .intro-aperture{padding:8px}
body.tall .intro-plate{bottom:clamp(46px,9vh,86px)}
body.tall .intro-plate .ip-title{font-size:clamp(22px,8vw,40px)}


/* ==================================================================== */
/* THE REALLIONAIRE MARK                                                 */
/* The opening's own identity, struck before the film. A struck coin on   */
/* black: the mark is the object, and the object is lit like one.        */
/* ==================================================================== */
.sting{position:absolute;inset:0;z-index:4;display:none;align-items:center;justify-content:center;
  background:radial-gradient(60% 50% at 50% 45%,#0b0a06 0%,#01020a 58%,#000 100%)}
.sting.on{display:flex}
.sting.out{animation:stingOut .52s ease-in both}
@keyframes stingOut{0%{opacity:1}100%{opacity:0}}
.sting-inner{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.4vh,16px);
  padding:0 18px;text-align:center;animation:stingIn .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes stingIn{
  0%{opacity:0;transform:scale(1.14) rotate(-6deg)}
  60%{opacity:1}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
#stingCoin{width:clamp(150px,26vh,290px);height:clamp(150px,26vh,290px);display:block;
  filter:drop-shadow(0 18px 56px rgba(0,0,0,.95)) drop-shadow(0 0 26px rgba(255,206,110,.20));
  animation:coinSpin .95s cubic-bezier(.16,.86,.24,1) both}
@keyframes coinSpin{
  0%{transform:perspective(900px) rotateY(-92deg) scale(.82)}
  100%{transform:perspective(900px) rotateY(0) scale(1)}
}
.sting-word{font-family:var(--disp);font-weight:900;font-size:clamp(22px,7.4vw,62px);line-height:.98;
  letter-spacing:.16em;color:#f6f2e6;text-indent:.16em;
  text-shadow:0 2px 30px rgba(0,0,0,1),0 0 34px rgba(255,206,110,.18);
  animation:wordIn .8s .25s cubic-bezier(.2,.7,.2,1) both}
@keyframes wordIn{0%{opacity:0;letter-spacing:.52em}100%{opacity:1;letter-spacing:.16em}}
.sting-rule{width:clamp(160px,42vw,380px);height:1px;background:rgba(201,206,216,.16);position:relative;
  animation:wordIn .7s .42s both}
.sting-rule i{position:absolute;inset:0 100% 0 0;background:linear-gradient(90deg,transparent,var(--gold),#fff2bd);
  animation:sweep 1.5s .5s cubic-bezier(.3,.7,.2,1) both}
@keyframes sweep{0%{inset:0 100% 0 0}100%{inset:0 0 0 0}}
.sting-sub{font-size:clamp(8px,1.5vw,10.5px);letter-spacing:.42em;color:var(--gold-bright);
  animation:wordIn .7s .5s both}
.sting-tag{font-size:clamp(6.5px,1.1vw,8px);letter-spacing:.36em;color:var(--chrome-dim);
  animation:wordIn .7s .62s both}
.sting-skip{position:absolute;right:clamp(12px,3vw,34px);bottom:clamp(12px,3vh,34px);
  font-family:var(--mono);font-size:9px;letter-spacing:.28em;padding:9px 15px;
  background:rgba(3,4,8,.72);color:var(--chrome-dim);border:1px solid var(--chrome-faint);cursor:pointer;
  transition:color .2s,border-color .2s}
.sting-skip:hover{color:var(--chrome);border-color:var(--rule)}