/* REALLIONAIRE: THE BLACK DIAMOND HEIST
   Everything is either material (black, heavy, lit) or line (thin struck gold).
   Two voices: an engraved currency serif, and a condensed industrial grotesque.
   No glass. No rounded cards. No gradient washes. */

@font-face {
  font-family: 'RAserif';
  src: url('../fonts/LiberationSerif-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'RAserif';
  src: url('../fonts/LiberationSerif-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'RAgrot';
  src: url('../fonts/DejaVuSansCondensed-Bold.ttf') format('truetype');
  font-weight: 400 900; font-display: swap;
}
@font-face {
  font-family: 'RAmono';
  src: url('../fonts/DejaVuSansMono-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}

:root {
  --void: #050506;
  --pitch: #0A0B0D;
  --obsidian: #131519;
  --gunmetal: #1D2026;
  --slate: #2B2F36;
  --gold: #B0872F;
  --gold-hot: #F7DC8C;
  --gold-deep: #6E5320;
  --silver: #C9CFD6;
  --steel: #7F8894;
  --silver-blue: #9CAEBE;
  --hazard: #FF4B1F;
  --holo: #B8F2EE;
  --violet: #8A4DFF;

  --rule: rgba(176, 135, 47, 0.42);
  --rule-soft: rgba(176, 135, 47, 0.20);
  --heat: 0;
  --pad: clamp(8px, 1.6vmin, 20px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: var(--void);
  color: var(--silver);
  font-family: 'RAgrot', 'Arial Narrow', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
}

#app { position: fixed; inset: 0; overflow: hidden; }

#stage { position: absolute; inset: 0; }
#stage canvas { display: block; }

/* film grain and a vignette: black areas must never read as dead space */
#grain {
  position: absolute; inset: -50%; pointer-events: none; z-index: 4; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainmove 0.6s steps(3) infinite;
}
@keyframes grainmove {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-2%, 1%); }
  66% { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}
#vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.9) 100%);
}

.layer { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.hidden { display: none !important; }

/* ============ the bezel: a certificate rule around the whole frame ======= */
.bezel {
  position: absolute;
  inset: calc(var(--pad) + var(--safe-t)) calc(var(--pad) + var(--safe-r)) calc(var(--pad) + var(--safe-b)) calc(var(--pad) + var(--safe-l));
  border: 1px solid var(--rule-soft);
  pointer-events: none;
}
.bezel::after {
  content: ''; position: absolute; inset: 3px; border: 1px solid rgba(176,135,47,0.10);
}
.bezel .tick { position: absolute; width: 14px; height: 14px; border: 0 solid var(--gold); opacity: 0.75; }
.bezel .tick.tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.bezel .tick.tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.bezel .tick.bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.bezel .tick.br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

/* ============ HUD ======================================================== */
.hud-top {
  position: absolute;
  top: calc(var(--pad) + var(--safe-t) + 6px);
  left: calc(var(--pad) + var(--safe-l) + 8px);
  right: calc(var(--pad) + var(--safe-r) + 8px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  gap: clamp(6px, 1.4vw, 26px);
  align-items: start;
}
.hud-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* the operator plate. A hairline gold rule like every other framed thing here,
   no fill of its own beyond the black the portrait is drawn on. */
.op-row { display: flex; align-items: flex-start; gap: clamp(6px, 1vw, 12px); min-width: 0; }
.op-stats { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.op-card {
  flex: 0 0 auto;
  /* bounded by the WIDTH of the screen as well as its height: on a phone held
     upright the left column is only about a third of the screen, and a plate
     sized off the height alone ate most of it */
  width: clamp(44px, min(10.5vh, 12vw), 74px);
  border: 1px solid rgba(176,135,47,0.45);
  background: #050506;
  padding: 1px;
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
}
.op-card canvas { display: block; width: 100%; height: auto; }
/* the name is the one label in this HUD that is sized by its own box rather
   than by the viewport, because it has to fit inside the plate */
.op-card .lbl.op-name { font-size: clamp(5px, 0.95vh, 7px); letter-spacing: 0.08em; color: rgba(247,220,140,0.72); padding-bottom: 1px; text-align: center; }

/* Held upright, the left column is about a third of the screen and the plate
   beside the stats pushes BLACK DIAMONDS under the zone name. So upright the
   plate takes the corner on its own and the readout starts under it. Sideways
   there is room for both, and sideways is where this is played. */
@media (max-aspect-ratio: 1/1) {
  .op-row { flex-direction: column; align-items: flex-start; gap: 5px; }
  .op-card { width: 56px; }
}
.op-card.painted { border-color: rgba(247,220,140,0.70); box-shadow: 0 0 14px rgba(247,220,140,0.16); }
.hud-cell.right { align-items: flex-end; text-align: right; }
.hud-cell.center { align-items: center; text-align: center; padding-top: 1px; }

.lbl {
  font-size: clamp(7px, 0.62rem, 10px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(201,207,214,0.52);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}
.val { font-family: 'RAgrot', sans-serif; font-weight: 700; color: var(--silver); line-height: 1; }
.val.big {
  font-size: clamp(20px, 2.5rem, 40px);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.01em;
  color: #E9EEF4;
  text-shadow: 0 0 18px rgba(201,207,214,0.16);
}
.val.sm { font-size: clamp(10px, 0.95rem, 16px); color: rgba(201,207,214,0.85); }
.tab { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

#hud-gems { color: var(--gold-hot); text-shadow: 0 0 22px rgba(247,220,140,0.34); }
.stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat.r { align-items: flex-end; }

.stat-row {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: 2px; white-space: nowrap;
}
.stat-row .lbl { color: rgba(201,207,214,0.42); }
.stat-row .val.sm { color: var(--gold-hot); }

.bag { display: grid; grid-template-columns: auto minmax(18px, 78px) auto; align-items: center; gap: 6px; margin-top: 2px; min-width: 0; }
.bag-bar { height: 4px; background: rgba(201,207,214,0.13); position: relative; overflow: hidden; }
.bag-bar i { position: absolute; inset: 0 auto 0 0; width: 0%; background: linear-gradient(90deg, var(--gold-deep), var(--gold) 60%, var(--gold-hot)); transition: width 0.16s linear; }
.bag.over .bag-bar i { background: linear-gradient(90deg, #7a2410, var(--hazard)); box-shadow: 0 0 12px rgba(255,75,31,0.6); }
.bag.over .val.sm { color: var(--hazard); }

.zone-sub { color: rgba(201,207,214,0.42); padding-left: 0.5em; font-size: 0.72em; letter-spacing: 0.14em; }
.zone {
  font-family: 'RAserif', Georgia, serif;
  font-size: clamp(9px, 1.05rem, 18px);
  letter-spacing: clamp(0.08em, 0.9vw, 0.22em);
  color: var(--gold);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 20px rgba(176,135,47,0.35);
}
.mult { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin-top: -2px; }
.mult-num {
  font-size: clamp(26px, 3.6rem, 58px);
  font-weight: 700; line-height: 0.94;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  color: var(--gold-hot);
  text-shadow: 0 0 calc(14px + var(--heat) * 34px) rgba(247,220,140, calc(0.22 + var(--heat) * 0.55)),
               0 0 4px rgba(255,255,255,0.25);
  transition: text-shadow 0.2s linear;
}
.mult-x {
  font-size: clamp(12px, 1.5rem, 24px); color: var(--gold); font-weight: 700;
  opacity: calc(0.55 + var(--heat) * 0.45);
}
.mult.pulse .mult-num { animation: multbeat calc(0.72s - var(--heat) * 0.34s) ease-in-out infinite; }
@keyframes multbeat {
  0%, 100% { transform: scale(1); }
  42% { transform: scale(1.055); }
  58% { transform: scale(1.02); }
}
.mult-cap { font-size: clamp(6px, 0.55rem, 9px); letter-spacing: 0.3em; color: rgba(201,207,214,0.35); font-weight: 700; }

.minibtns { display: flex; gap: 4px; margin-bottom: 2px; }
.mb {
  pointer-events: auto;
  width: clamp(22px, 2rem, 30px); height: clamp(22px, 2rem, 30px);
  display: grid; place-items: center;
  background: rgba(10,11,13,0.75);
  border: 1px solid var(--rule-soft);
  color: rgba(201,207,214,0.7);
  font-family: 'RAgrot', sans-serif; font-size: 11px; font-weight: 700;
  cursor: pointer; padding: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.mb:hover, .mb:focus-visible { border-color: var(--gold); color: var(--gold-hot); background: rgba(19,21,25,0.9); outline: none; }
.mb.off { color: rgba(201,207,214,0.25); }

.artifacts { align-items: flex-end; }
.pips { display: flex; gap: 3px; margin-top: 3px; }
.pips i {
  width: 6px; height: 9px; display: block;
  border: 1px solid var(--rule); transform: skewX(-12deg);
  background: transparent;
}
.pips i.on { background: linear-gradient(160deg, var(--gold-hot), var(--gold) 52%, var(--gold-deep)); border-color: var(--gold-hot); box-shadow: 0 0 8px rgba(247,220,140,0.5); }

/* alarm: a struck rule that fills with heat.
   In the flow of the left column, under the stats, so no font size or window
   height can make it land on them. */
.meters {
  width: min(54vw, 360px);
  max-width: 100%;
  display: flex; flex-direction: column; gap: 7px;
  margin-top: 3px;
}
.meter { display: flex; align-items: center; gap: 8px; }
.alarm-lbl { font-size: clamp(6px, 0.55rem, 9px); letter-spacing: 0.28em; font-weight: 700; color: rgba(201,207,214,0.42); min-width: 5.4em; }
.alarm { position: relative; flex: 1; height: 3px; background: rgba(201,207,214,0.10); overflow: hidden; }
.alarm.hp i { background: linear-gradient(90deg, #6b5316, var(--gold) 55%, var(--gold-hot)); }
.alarm.hp i.crit { background: linear-gradient(90deg, #7a2410, var(--hazard) 70%, #ffb08a); box-shadow: 0 0 14px rgba(255,75,31,0.7); }
.shield-pips { display: flex; gap: 2px; min-width: 0; }
.shield-pips i { width: 7px; height: 7px; border: 1px solid var(--gold); background: rgba(247,220,140,0.75); transform: rotate(45deg); display: block; }
.alarm i { position: absolute; inset: 0 auto 0 0; width: 0%; background: linear-gradient(90deg, var(--gold-deep), var(--gold) 55%, var(--gold-hot)); transition: width 0.25s linear, background 0.4s; }
.alarm.hot i { background: linear-gradient(90deg, #7a2410, var(--hazard) 70%, #ffb08a); box-shadow: 0 0 14px rgba(255,75,31,0.7); }
.alarm-ticks { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, transparent 0 19px, rgba(0,0,0,0.65) 19px 20px); }

/* ============ bottom: the decision, and nothing else ===================== */
.hud-bottom {
  position: absolute;
  left: calc(var(--pad) + var(--safe-l) + 8px);
  right: calc(var(--pad) + var(--safe-r) + 8px);
  bottom: calc(var(--pad) + var(--safe-b) + 8px);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(4px, 0.9vh, 10px);
}
.obj {
  font-size: clamp(8px, 0.68rem, 11px);
  letter-spacing: 0.2em; font-weight: 700; text-transform: uppercase;
  color: rgba(201,207,214,0.5);
  text-align: center;
  text-shadow: 0 1px 8px #000;
  min-height: 1.2em;
}
.obj.live { color: var(--gold-hot); }

.decision { display: flex; gap: clamp(8px, 1.6vw, 20px); align-items: stretch; }
.dec {
  pointer-events: auto;
  position: relative;
  min-width: clamp(120px, 20vw, 230px);
  padding: clamp(7px, 1.4vh, 14px) clamp(14px, 2.4vw, 30px);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 1px solid var(--rule);
  cursor: pointer;
  font-family: 'RAgrot', sans-serif;
  transition: transform 0.12s, box-shadow 0.2s, filter 0.2s, border-color 0.2s;
  overflow: hidden;
}
.dec .dec-k { font-size: clamp(10px, 1.05rem, 17px); letter-spacing: 0.2em; font-weight: 700; }
.dec .dec-v { font-size: clamp(8px, 0.8rem, 13px); letter-spacing: 0.1em; opacity: 0.85; }
.dec:disabled { cursor: default; filter: grayscale(1) brightness(0.5); opacity: 0.45; }
.dec:not(:disabled):hover { transform: translateY(-2px); }
.dec:not(:disabled):active { transform: translateY(0); }

/* CASH OUT: brushed silver, cool, closed, the metal of a receipt */
.dec.cash {
  color: #0b0d10;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.055) 0 1px, rgba(0,0,0,0.045) 1px 2px),
    linear-gradient(168deg, #f2f5f9 0%, #b9c1ca 24%, #7d858f 52%, #adb5bf 74%, #5d646c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -2px 6px rgba(0,0,0,0.45), 0 6px 18px rgba(0,0,0,0.6);
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
}
.dec.cash:not(:disabled) { border-color: var(--silver); }
.dec.cash.armed { animation: cashglow 1.4s ease-in-out infinite; }
@keyframes cashglow {
  0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -2px 6px rgba(0,0,0,0.45), 0 6px 18px rgba(0,0,0,0.6), 0 0 0 rgba(201,207,214,0); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -2px 6px rgba(0,0,0,0.45), 0 6px 18px rgba(0,0,0,0.6), 0 0 26px rgba(201,207,214,0.42); }
}

/* GO DEEPER: black diamond facet texture, iridescent, open, hungry.
   The iridescence is gold, holo and steel. Violet belongs to NEURALUX and to
   nothing else, so no facet of a button is allowed to catch it. */
.dec.deep {
  color: var(--gold-hot);
  background:
    conic-gradient(from 210deg at 32% 28%, rgba(247,220,140,0.26), rgba(184,242,238,0.15) 18%, rgba(176,135,47,0.32) 34%, rgba(10,11,13,0.9) 52%, rgba(247,220,140,0.26) 68%, rgba(156,174,190,0.20) 86%, rgba(10,11,13,0.9)),
    linear-gradient(180deg, #1b1e26, #07080b);
  border-color: rgba(247,220,140,calc(0.35 + var(--heat) * 0.5));
  box-shadow: inset 0 0 30px rgba(0,0,0,0.85),
              0 0 calc(8px + var(--heat) * 40px) rgba(247,220,140, calc(0.12 + var(--heat) * 0.5));
  text-shadow: 0 0 12px rgba(247,220,140,0.5);
}
.dec.deep.armed { animation: deepbreathe calc(1.5s - var(--heat) * 0.9s) ease-in-out infinite; }
@keyframes deepbreathe {
  0%,100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.035); filter: brightness(1.28); }
}

/* dash: the one extra thumb control */
.dash {
  pointer-events: auto;
  position: absolute; right: 0; bottom: 0;
  width: clamp(54px, 12vmin, 84px); height: clamp(54px, 12vmin, 84px);
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 36% 32%, rgba(201,207,214,0.16), rgba(10,11,13,0.8) 62%);
  border: 1px solid var(--rule-soft);
  color: rgba(201,207,214,0.75);
  font-family: 'RAgrot', sans-serif; font-size: clamp(8px, 0.7rem, 11px); letter-spacing: 0.18em; font-weight: 700;
  cursor: pointer; overflow: hidden;
  transition: border-color 0.15s, color 0.15s, transform 0.1s;
}
.dash:active { transform: scale(0.94); }
.dash.ready { border-color: var(--gold); color: var(--gold-hot); box-shadow: 0 0 22px rgba(176,135,47,0.28); }
.dash i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(0,0,0,0.72) 0turn calc(var(--cd) * 1turn), transparent calc(var(--cd) * 1turn) 1turn); }
.dash span { position: relative; z-index: 1; }

/* ============ compass to the lift ======================================= */
#compass {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  display: none; z-index: 12; pointer-events: none;
}
#compass i.cn {
  position: absolute; left: -8px; top: calc(-1 * var(--cr, 130px) - 8px);
  width: 16px; height: 16px; display: block;
  background: linear-gradient(180deg, var(--gold-hot), var(--gold));
  clip-path: polygon(50% 0%, 100% 100%, 50% 78%, 0% 100%);
  filter: drop-shadow(0 0 9px rgba(247,220,140,0.75));
}
#compass span {
  position: absolute; left: -34px; top: calc(-1 * var(--cr, 130px) + 14px);
  width: 68px; text-align: center;
  font-size: clamp(7px, 0.6rem, 10px); letter-spacing: 0.18em; font-weight: 700;
  color: rgba(247,220,140,0.72); white-space: nowrap;
}

/* ============ R.S.B. ===================================================== */
#rsb {
  display: flex; justify-content: flex-start; align-items: flex-start;
  padding: calc(var(--pad) + var(--safe-t) + clamp(136px, 14.8rem, 202px)) 0 0 calc(var(--pad) + var(--safe-l) + 10px);
}
/* A thin gold rule with the voice inside it. Not a panel and not a bubble:
   the line-work is the container, so there is no fill behind the words. */
.rsb-box {
  /* Narrow on purpose. The operator stands at the middle of the screen and a
     wide rule across the top-left reaches him: at 62vw the R.S.B. line was
     drawn straight across the man it is talking to, at the one moment the line
     and the man are both new. A third of the width keeps the rule on its own
     side of him in both shapes, and a tall thin rule of wide-tracked caps is
     closer to what this district sounds like anyway. */
  max-width: min(46ch, 34vw);
  border: 1px solid rgba(176,135,47,0.55);
  padding: 6px 10px;
  font-size: clamp(8px, 0.72rem, 12px);
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--holo);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s, transform 0.25s;
  position: relative;
}
.rsb-box::before {
  content: 'R.S.B.'; position: absolute; top: -7px; left: 8px;
  background: var(--void); padding: 0 5px;
  font-size: 7px; letter-spacing: 0.3em; color: var(--gold);
}
.rsb-box.show { opacity: 1; transform: translateY(0); }
.rsb-box.warn { color: #ffd0b8; border-color: rgba(255,75,31,0.5); }
.rsb-box.warn::before { color: var(--hazard); }

/* ============ toasts ===================================================== */
#toasts {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; pointer-events: none;
}
.toast {
  font-size: clamp(10px, 1.1rem, 20px); letter-spacing: 0.22em; font-weight: 700;
  color: var(--gold-hot); text-transform: uppercase;
  text-shadow: 0 0 20px rgba(247,220,140,0.55), 0 2px 10px #000;
  animation: toastup 1.5s ease-out forwards;
  white-space: nowrap;
}
.toast.bad { color: var(--hazard); text-shadow: 0 0 20px rgba(255,75,31,0.6), 0 2px 10px #000; }
.toast.cool { color: var(--holo); text-shadow: 0 0 20px rgba(184,242,238,0.55), 0 2px 10px #000; }
.toast.violet { color: #cbb4ff; text-shadow: 0 0 22px rgba(138,77,255,0.7), 0 2px 10px #000; }
@keyframes toastup {
  0% { opacity: 0; transform: translateY(14px) scale(0.96); }
  18% { opacity: 1; transform: translateY(0) scale(1); }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-22px); }
}
.toast.big { font-size: clamp(16px, 2.4rem, 40px); }

/* ============ full screens ============================================== */
/* prose is set in the engraved serif: the two voices are the billboard and the ledger */
.fine, .up .line, .codex p, .art-meta p, .help-body .v, .title-foot, .r-note, .r-end .r-endline, .pause-body p {
  font-family: 'RAserif', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.015em;
}

.screen {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 45%, rgba(5,5,6,0.945) 0%, rgba(5,5,6,0.985) 60%, #050506 100%);
  padding: calc(var(--pad) + var(--safe-t) + 10px) calc(var(--pad) + var(--safe-r) + 10px) calc(var(--pad) + var(--safe-b) + 10px) calc(var(--pad) + var(--safe-l) + 10px);
  pointer-events: auto;
  overflow-y: auto;
  animation: fadein 0.3s ease-out;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ============ the film ================================================== */
/* The film is a backdrop in both places it goes, so each screen it sits in
   keeps its own scrim on top of it: the wordmark and the fragment copy never
   fight the picture. The scrim is a pseudo-element and not a background
   because the video is a real element, and it has to sit under the scrim and
   over the district rather than in front of both. */
.film {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  pointer-events: none;
  opacity: 0.46;
  filter: saturate(0.88) contrast(1.05) brightness(0.92);
}
.film.gone { display: none; }
#screen-title, #screen-artifact, #screen-descent { background: none; }
/* the descent card: the film runs under it and the scrim over it is heaviest
   at the edges, so the picture reads around the words rather than through them */
/* The scrim here is heavier than either menu scrim, and the film brighter
   under it, because there is a whole HUD and a lit floor behind this card and
   a faint readout ghosting through it looks like a fault rather than a
   backdrop. The picture is pushed up and the district is pushed down. */
#screen-descent::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 50%, rgba(5,5,6,0.62) 0%, rgba(5,5,6,0.90) 52%, rgba(5,5,6,0.99) 100%);
}
#screen-descent .film { opacity: 0.72; }
.desc-wrap { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 1vh, 12px); text-align: center; }
.desc-k { font-size: clamp(8px, 1.5vh, 12px); letter-spacing: 0.5em; text-transform: uppercase; color: rgba(201,207,214,0.55); font-weight: 700; padding-left: 0.5em; }
.desc-zone {
  margin: 0; font-family: 'RAserif', Georgia, serif; font-weight: 700;
  font-size: clamp(20px, 6.4vh, 62px); line-height: 1.02;
  letter-spacing: clamp(0.06em, 1.1vw, 0.20em);
  color: var(--gold-hot); text-shadow: 0 0 34px rgba(247,220,140,0.30);
}
.desc-rule { width: clamp(90px, 26vw, 340px); height: 1px; background: linear-gradient(90deg, transparent, rgba(176,135,47,0.85), transparent); }
.desc-sub { font-size: clamp(8px, 1.6vh, 13px); letter-spacing: 0.34em; text-transform: uppercase; color: rgba(201,207,214,0.62); font-weight: 700; }
#screen-title::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,5,6,0.80) 0%, rgba(5,5,6,0.44) 32%, rgba(5,5,6,0.74) 66%, rgba(5,5,6,0.95) 100%);
}
/* ============ the fragment reveal is a PANEL, not a takeover ===========
   It was a full screen card with the film running behind the whole of it,
   which meant that for as long as it was up the page was a painting and some
   type: a frame taken during a run showed a menu, and none of the district,
   the operator or the film could be seen in it. Now the card is bounded and
   set against one edge, the film is a pane inside the card rather than a
   curtain over everything, and the floor the operator is standing on is on
   screen the whole time the fragment is. The scrim follows the card: dark
   where the card is, nearly clear where the district is. */
#screen-artifact { align-items: center; justify-content: flex-end; }
#screen-artifact::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(270deg, rgba(5,5,6,0.95) 0%, rgba(5,5,6,0.88) 30%, rgba(5,5,6,0.34) 62%, rgba(5,5,6,0.08) 100%);
}
#screen-artifact .art-wrap { max-width: min(46vw, 430px); gap: clamp(7px, 1.5vh, 14px); }
/* The painting is capped off the HEIGHT as well as the width, because the card
   has to clear the bottom of the play field: the operator stands in the middle
   of it and a card that reaches the middle is a card standing on top of him. */
#screen-artifact .art-frame { max-width: min(29vw, min(235px, 44vh)); }
#screen-artifact .art-film { height: clamp(42px, 11vh, 82px); }
/* the film inside the card: it fills its pane and takes the pane's crop */
#screen-artifact .film {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-position: 50% 42%; opacity: 0.95;
  filter: saturate(0.95) contrast(1.06) brightness(0.98);
}
.art-film {
  position: relative; overflow: hidden;
  width: 100%; height: clamp(46px, 12vh, 92px);
  background: #050506; margin-top: 6px;
  border-top: 2px solid var(--gold);
}
.title-wrap, .art-wrap { position: relative; z-index: 2; }

/* a screen is a place: while one is open the instrument readout steps back */
#hud, #rsb, #toasts { transition: opacity 0.18s ease-out; }
body.panel-open #hud { opacity: 0.10; }
body.panel-open #rsb, body.panel-open #toasts { opacity: 0; }
body.panel-open #compass { display: none !important; }

.title-wrap {
  display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2vh, 26px);
  text-align: center; max-width: 720px;
}
.mark { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mark-r {
  font-family: 'RAserif', Georgia, serif; font-weight: 700;
  font-size: clamp(30px, 8.2vw, 96px);
  letter-spacing: clamp(0.06em, 1.4vw, 0.22em);
  line-height: 0.96;
  background: linear-gradient(172deg, #f7dc8c 0%, #b0872f 32%, #6e5320 48%, #f7dc8c 62%, #8a6a24 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.9)) drop-shadow(0 0 26px rgba(176,135,47,0.5));
}
/* The stone rotates behind these lines, so the small caps carry their own
   contact shading. It is a shadow on the glyph, not a panel behind it. */
.scrimmed, .mark-s, .title-hint, .title-stats .lbl, .title-stats b,
.zone, .zone-sub, .mult-cap, .obj, .alarm-lbl, .stat .lbl {
  text-shadow: 0 0 3px rgba(5,5,6,0.95), 0 0 12px rgba(5,5,6,0.85), 0 1px 2px rgba(0,0,0,0.9);
}
.mark-s {
  font-size: clamp(8px, 1.25vw, 15px); letter-spacing: clamp(0.28em, 1vw, 0.52em);
  font-weight: 700; color: var(--silver); text-transform: uppercase;
  padding-left: 0.3em;
}
.title-hint {
  font-size: clamp(9px, 0.86rem, 13px); letter-spacing: 0.28em; font-weight: 700;
  color: var(--gold-hot); animation: blink 1.7s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }

.title-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 3vw, 34px); }
.title-stats > div { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.title-stats b { font-size: clamp(14px, 1.5rem, 26px); color: var(--silver); font-weight: 700; }
.title-stats b.hot { color: var(--gold-hot); }

/* the ledger: line-work only, the same voice as the rest of the instrument.
   No panel, no fill, two gold rules and the names between them. */
.title-board {
  width: min(430px, 84vw);
  border-top: 1px solid rgba(176,135,47,0.42);
  border-bottom: 1px solid rgba(176,135,47,0.42);
  padding: 5px 2px;
  display: flex; flex-direction: column; gap: 3px;
}
.tb-head {
  display: flex; justify-content: space-between;
  font-size: clamp(6px, 0.52rem, 9px); letter-spacing: 0.26em; font-weight: 700;
  color: rgba(201,207,214,0.34);
}
.tb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tb-list li {
  display: grid; grid-template-columns: 1.5em minmax(0, 1fr) auto;
  align-items: baseline; gap: 8px;
  font-size: clamp(8px, 0.7rem, 11px); letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  color: rgba(201,207,214,0.62);
  /* the title centres everything; a board is read in columns, so the row
     opts back out of that and lines up under the ranks and the figures. */
  text-align: left;
}
.tb-n { justify-self: start; }
.tb-v { justify-self: end; }
.tb-list a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(176,135,47,0.28); }
.tb-list a:hover { color: var(--gold-hot); border-bottom-color: var(--gold-hot); }
.tb-list .tb-r { color: rgba(201,207,214,0.3); }
.tb-list .tb-v { color: var(--silver); font-weight: 700; }
.tb-list li.mine .tb-v { color: var(--gold-hot); }
.tb-list li.mine .tb-n { color: var(--gold-hot); }

.title-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.cta {
  pointer-events: auto;
  font-family: 'RAgrot', sans-serif; font-weight: 700;
  font-size: clamp(10px, 0.95rem, 15px); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--void);
  background: linear-gradient(170deg, #f7dc8c, #b0872f 45%, #6e5320 100%);
  border: 1px solid var(--gold-hot);
  padding: clamp(9px, 1.5vh, 15px) clamp(16px, 3vw, 34px);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform 0.12s, filter 0.15s;
}
.cta:hover { filter: brightness(1.12); transform: translateY(-1px); }
.cta:active { transform: translateY(0); }
.cta.ghost { background: transparent; color: var(--gold); border-color: var(--rule); box-shadow: none; }
.cta.ghost:hover { color: var(--gold-hot); border-color: var(--gold); }
.cta.danger { color: #ff9a78; border-color: rgba(255,75,31,0.4); }
.cta:disabled { opacity: 0.4; filter: grayscale(1); cursor: default; }
.title-foot { font-size: clamp(7px, 0.62rem, 10px); letter-spacing: 0.2em; color: rgba(201,207,214,0.34); text-transform: uppercase; max-width: 60ch; }

/* ============ panels ==================================================== */
.panel-wrap {
  width: min(940px, 100%);
  display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 18px);
}
.panel-wrap.small { width: min(520px, 100%); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
.panel-head h2 {
  font-family: 'RAserif', Georgia, serif; font-weight: 700; margin: 0;
  font-size: clamp(18px, 2.2rem, 34px); letter-spacing: 0.16em; color: var(--gold-hot);
}
.purse { display: flex; flex-direction: column; align-items: flex-end; }
.purse b { font-size: clamp(16px, 1.8rem, 28px); color: var(--silver); }

.up-grid {
  display: grid; gap: clamp(6px, 1vw, 12px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  overflow-y: auto; max-height: 58vh; padding-right: 2px;
}
.up {
  border: 1px solid var(--rule-soft);
  background: linear-gradient(180deg, rgba(19,21,25,0.9), rgba(5,5,6,0.9));
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 5px;
  position: relative; overflow: hidden;
}
.up::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--rule); }
.up.owned::before { background: var(--gold); }
.up.maxed::before { background: var(--gold-hot); box-shadow: 0 0 12px rgba(247,220,140,0.6); }
.up h3 { margin: 0; font-size: clamp(11px, 1rem, 15px); letter-spacing: 0.14em; color: var(--silver); font-weight: 700; }
.up .line { font-size: clamp(9px, 0.76rem, 12px); color: rgba(201,207,214,0.5); line-height: 1.35; }
.up .eff { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: clamp(9px, 0.72rem, 11px); letter-spacing: 0.12em; }
.up .eff .lbl { color: rgba(201,207,214,0.45); }
.up .eff b { color: var(--gold-hot); font-size: clamp(11px, 0.95rem, 14px); }
.up .pips i { width: 12px; height: 5px; transform: none; }
.buy {
  margin-top: 3px; pointer-events: auto; cursor: pointer;
  font-family: 'RAgrot', sans-serif; font-weight: 700; font-size: clamp(9px, 0.78rem, 12px);
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 7px 10px; border: 1px solid var(--rule);
  background: rgba(176,135,47,0.10); color: var(--gold-hot);
  transition: background 0.15s, border-color 0.15s;
}
.buy:hover:not(:disabled) { background: rgba(176,135,47,0.24); border-color: var(--gold-hot); }
.buy:disabled { opacity: 0.4; cursor: default; }

.panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--rule-soft); padding-top: 10px; flex-wrap: wrap; }
.fine { font-size: clamp(8px, 0.66rem, 11px); color: rgba(201,207,214,0.4); letter-spacing: 0.08em; margin: 0; max-width: 62ch; line-height: 1.5; }

.codex { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: 60vh; }
.codex h3 { margin: 0; font-family: 'RAserif', serif; letter-spacing: 0.14em; color: var(--gold); font-size: clamp(12px, 1.1rem, 18px); }
.codex p { margin: 0; font-size: clamp(9px, 0.78rem, 12px); line-height: 1.6; color: rgba(201,207,214,0.62); }
.codex .entry { border-left: 2px solid var(--rule-soft); padding-left: 10px; }
.codex .entry.locked { opacity: 0.45; }
/* the operator: drawn on the same plate the rest of this page is drawn on */
.codex .entry.op { display: flex; gap: 14px; align-items: flex-start; }
.op-plate { flex: 0 0 auto; width: clamp(92px, 24vw, 170px); border: 1px solid var(--rule-soft); background: #050506; }
.op-plate canvas { display: block; width: 100%; height: auto; }
.op-copy { min-width: 0; }
.op-copy p { margin-top: 6px; }
@media (max-width: 520px) {
  .codex .entry.op { flex-direction: column; }
  .op-plate { width: min(54vw, 190px); }
}

/* ============ artifact reveal ========================================== */
.art-wrap {
  display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2.2vh, 22px);
  max-width: 620px; text-align: center;
}
.art-frame {
  border: 2px solid var(--gold);
  padding: 7px;
  background: linear-gradient(160deg, #f7dc8c, #6e5320 40%, #b0872f 60%, #3a2c12);
  box-shadow: 0 0 50px rgba(176,135,47,0.4), 0 20px 60px rgba(0,0,0,0.8);
  max-width: min(74vw, 340px);
}
.art-frame img { display: block; width: 100%; height: auto; filter: saturate(1.05); }
.art-meta { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 46ch; }
.art-meta h3 { font-family: 'RAserif', serif; margin: 0; letter-spacing: 0.14em; color: var(--gold-hot); font-size: clamp(14px, 1.5rem, 24px); }
.art-meta p { margin: 0; font-size: clamp(9px, 0.8rem, 13px); line-height: 1.6; color: rgba(201,207,214,0.66); }
.art-total { display: flex; gap: 10px; align-items: baseline; }

/* ============ receipt =================================================== */
.receipt {
  width: min(460px, 100%);
  background: #08090b;
  border: 1px solid var(--rule-soft);
  padding: clamp(14px, 3vh, 26px) clamp(14px, 3vw, 26px);
  font-family: 'RAmono', monospace;
  box-shadow: 0 20px 70px rgba(0,0,0,0.9);
  max-height: 92vh; overflow-y: auto;
  position: relative;
}
.receipt::after {
  content: ''; position: absolute; inset: 4px; border: 1px solid rgba(176,135,47,0.10); pointer-events: none;
}
.r-head { text-align: center; border-bottom: 1px dashed rgba(201,207,214,0.3); padding-bottom: 10px; margin-bottom: 12px; }
.r-head .r-title { font-family: 'RAserif', serif; font-size: clamp(14px, 1.5rem, 22px); letter-spacing: 0.2em; color: var(--gold-hot); }
.r-head .r-sub { font-size: 9px; letter-spacing: 0.28em; color: rgba(201,207,214,0.45); margin-top: 4px; }
.r-line { display: flex; justify-content: space-between; gap: 10px; font-size: clamp(9px, 0.76rem, 12px); padding: 3px 0; color: var(--silver); }
.r-line .k { color: rgba(201,207,214,0.55); letter-spacing: 0.06em; }
.r-line .v { color: #dfe5ec; }
.r-line.total { border-top: 1px solid var(--rule); margin-top: 8px; padding-top: 8px; font-size: clamp(11px, 0.95rem, 15px); }
.r-line.total .v { color: var(--gold-hot); }
.r-cols { display: flex; flex-direction: column; gap: 2px; }
.r-note { font-size: 9px; line-height: 1.6; color: rgba(201,207,214,0.42); margin-top: 12px; border-top: 1px dashed rgba(201,207,214,0.2); padding-top: 10px; letter-spacing: 0.05em; }
.r-stamp {
  position: absolute; right: 14px; top: 12px;
  font-family: 'RAserif', serif; font-size: 11px; letter-spacing: 0.18em;
  color: var(--hazard); border: 1px solid rgba(255,75,31,0.55);
  padding: 3px 7px; transform: rotate(6deg); opacity: 0.85;
}
.r-stamp.win { color: var(--gold-hot); border-color: var(--gold); }
.r-btns { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.r-end { text-align: center; margin: 12px 0 4px; }
.r-end .r-endname { font-family: 'RAserif', serif; font-size: clamp(16px, 2rem, 30px); letter-spacing: 0.14em; color: var(--gold-hot); }
.r-end .r-endline { font-size: clamp(9px, 0.78rem, 12px); color: rgba(201,207,214,0.6); margin-top: 6px; line-height: 1.6; }

.pause-btns, .help-body { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 56vh; }
.help-body .row { display: flex; gap: 12px; align-items: baseline; font-size: clamp(9px, 0.78rem, 12px); }
.help-body .row .k { min-width: 8em; color: var(--gold-hot); letter-spacing: 0.14em; font-weight: 700; }
.help-body .row .v { color: rgba(201,207,214,0.66); line-height: 1.5; }
.help-body h3 { font-family: 'RAserif', serif; color: var(--gold); letter-spacing: 0.14em; margin: 8px 0 0; font-size: clamp(11px, 0.95rem, 15px); }

/* ============ boot ====================================================== */
#boot {
  position: absolute; inset: 0; z-index: 60; background: var(--void);
  display: grid; place-items: center; transition: opacity 0.5s;
}
#boot.gone { opacity: 0; pointer-events: none; }
.boot-in { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.boot-in i {
  width: 26px; height: 26px; border: 1px solid var(--rule);
  border-top-color: var(--gold-hot); border-radius: 50%;
  animation: spin 0.9s linear infinite; display: block;
}
@keyframes spin { to { transform: rotate(360deg); } }
.boot-in span { font-size: 10px; letter-spacing: 0.32em; color: var(--gold); }
.boot-bar {
  display: block; width: clamp(120px, 26vw, 220px); height: 2px; margin-top: 4px;
  background: rgba(201,207,214,0.14); overflow: hidden;
}
.boot-bar i {
  display: block; width: 0%; height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-hot));
  box-shadow: 0 0 8px rgba(247,220,140,0.55);
  transition: width 0.18s linear;
}
.boot-in em {
  font-style: normal; font-size: 9px; letter-spacing: 0.22em;
  color: rgba(201,207,214,0.55); font-variant-numeric: tabular-nums;
}

/* ============ narrow / portrait tuning ================================= */
@media (max-aspect-ratio: 1/1) {
  /* Held upright the card is a bottom sheet rather than a side panel, and it
     is kept under half the screen. The operator stands at the middle of the
     frame, so a sheet that reaches up past the middle puts itself on top of
     him and the reveal is a menu again by the back door. */
  #screen-artifact { align-items: flex-end; justify-content: center; }
  #screen-artifact::before {
    background: linear-gradient(0deg, rgba(5,5,6,0.95) 0%, rgba(5,5,6,0.88) 30%, rgba(5,5,6,0.30) 62%, rgba(5,5,6,0.06) 100%);
  }
  /* Held upright the card is a bottom sheet, and it is a ROW rather than a
     column: stacked, the painting, the film and five lines of copy came to
     about forty four per cent of the screen and the continue button sat on
     the bottom edge with the operator just above it. Side by side the card is
     about a third of the screen, so there is floor between him and it. */
  #screen-artifact .art-wrap {
    flex-direction: row; align-items: center; text-align: left;
    gap: 9px; max-width: 100%;
  }
  #screen-artifact .art-frame { max-width: min(40vw, 158px); }
  #screen-artifact .art-film { height: clamp(38px, 8vh, 58px); }
  #screen-artifact .art-meta { align-items: flex-start; gap: 4px; max-width: none; }
  #screen-artifact .art-meta h3 { font-size: clamp(13px, 5.2vw, 19px); line-height: 1.15; }
  #screen-artifact .art-meta p { font-size: clamp(9px, 3.1vw, 12px); line-height: 1.45; }
  /* the button sits in a column about half the screen wide up here, and at the
     full tracking "CONTINUE THE HEIST" broke over two lines */
  #screen-artifact .art-meta .cta { font-size: clamp(10px, 3.5vw, 13px); letter-spacing: 0.10em; }
  /* It was 76vw up here, which is wider than the middle of the screen: on a
     phone the rule reached across the operator as a matter of course. A tall
     thin rule on its own side of him is also what this district sounds like. */
  .rsb-box { max-width: 44vw; }
  .val.big { font-size: clamp(18px, 7.4vw, 30px); }
  .mult-num { font-size: clamp(22px, 9.4vw, 42px); }
  .lbl { letter-spacing: 0.10em; font-size: clamp(6px, 2.05vw, 9px); }
  .val.sm { font-size: clamp(9px, 3vw, 14px); }
  .zone { font-size: clamp(7px, 2.5vw, 11px); }
  .hud-cell { gap: 2px; }
  .zone { letter-spacing: 0.05em; }
  /* the three mini-buttons are 30px each with a 4px gap, which is 98px: wider
     than the column they sit in on a 320px screen, so flex-end pushed them out
     of their own cell and over the zone name. They shrink instead of spilling. */
  .mb { width: clamp(24px, 7.4vw, 28px); height: clamp(24px, 7.4vw, 28px); font-size: 10px; }
  .minibtns { gap: 3px; }
  /* on a narrow column the label alone is wider than the row, which left the
     alarm beside it about a pixel of bar. Stacked, the bar gets the whole
     column and the label keeps its own line. */
  .meter { flex-direction: column; align-items: stretch; gap: 2px; }
  .meter .alarm-lbl { min-width: 0; }
  /* flex:1 means flex-basis:0, which on a column axis is a zero-height bar.
     Stacked, the alarm is sized by its own height instead. */
  .alarm { flex: none; height: 5px; }
  .shield-pips { align-self: flex-start; }
  .zone-sub { display: none; }
  .dec .dec-k { font-size: clamp(10px, 3.5vw, 15px); letter-spacing: 0.14em; }
  .mult-cap { display: none; }
  .decision { flex-direction: row; }
  .dec { min-width: clamp(96px, 30vw, 168px); }
  .hud-bottom { padding-right: calc(clamp(58px, 16vmin, 78px) + 10px); }
  .decision { justify-content: flex-start; }
  .dash { width: clamp(58px, 16vmin, 78px); height: clamp(58px, 16vmin, 78px); }
  .title-stats { gap: 12px; }
}
@media (max-width: 560px) {
  .lbl { letter-spacing: 0.16em; }
  .hud-top { gap: 6px; }
  .up-grid { max-height: 52vh; }
}
/* a phone on its side: keep the HUD thin so the field stays open */
@media (orientation: landscape) and (max-height: 460px) {
  .val.big { font-size: clamp(16px, 2rem, 26px); }
  .mult-num { font-size: clamp(20px, 2.6rem, 34px); }
  .dash { width: clamp(46px, 11vh, 64px); height: clamp(46px, 11vh, 64px); }
  .dec { padding: 5px 12px; }
  .zone { font-size: clamp(9px, 0.85rem, 13px); }
  .meters { width: min(46vw, 300px); gap: 5px; }
  #rsb { padding-top: calc(var(--pad) + var(--safe-t) + 150px); }
  .art-frame { max-width: min(40vw, 240px); }
  .art-wrap { flex-direction: row; align-items: center; text-align: left; max-width: 92vw; }
  .art-meta { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  #grain { animation: none; }
  .title-hint, .dec.deep.armed, .dec.cash.armed, .mult.pulse .mult-num { animation: none; }
}