/* ESCAPE FROM HOLLOWAY SYSTEMS — corporate wayfinding as an arcade cabinet */
:root{
  --navy:#17243a;
  --paper:#f6f8fb;
  --excel:#1e8e4e;
  --excel-lt:#2ecc71;
  --holloway:#2d6cdf;
  --holloway-lt:#5f97f0;
  --amber:#f5a623;
  --cyan:#22d3ee;
  --red:#e6484b;
  --font:"Segoe UI","Inter",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  /* The overlay screens live out here rather than inside the stage, so they
     need a container for their cqw type scale. inline-size, not size: body's
     height is the viewport's and containing it buys nothing. */
  container-type:inline-size;
  background:#0a111d;
  background-image:radial-gradient(120% 90% at 50% 0%,#1b2c49 0%,#0b1322 62%,#060a12 100%);
  font-family:var(--font);
  color:var(--paper);
  display:grid;place-items:center;
  overflow:hidden;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* ---- stage: fixed 16:10 window onto the floor, letterboxed into any viewport ---- */
.stage{
  position:relative;
  width:min(100vw, calc(100vh * 1.6));
  height:min(100vh, calc(100vw / 1.6));
  aspect-ratio:960/600;
  overflow:hidden;
  container-type:size;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.07);
}
@media (min-width:1100px) and (min-height:760px){ .stage{ border-radius:14px } }
canvas{display:block;width:100%;height:100%;cursor:crosshair}

/* ---- HUD ---- */
.hud{
  position:absolute;inset:0 0 auto 0;isolation:isolate;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:2.0% 2.6% 0;
  pointer-events:none;
  opacity:0;transition:opacity .25s ease;
  font-variant-numeric:tabular-nums;
}
.hud.on{opacity:1}
.hud::before{
  content:"";position:absolute;inset:0 0 auto 0;height:190%;
  background:linear-gradient(180deg,rgba(7,12,21,.7) 0%,rgba(7,12,21,.34) 45%,rgba(7,12,21,0) 100%);
  pointer-events:none;z-index:-1;
}
.stat{display:flex;flex-direction:column;line-height:1}
.stat--right{align-items:flex-end}
.stat-label{
  font-size:clamp(8px,1.28cqw,13px);letter-spacing:.20em;font-weight:700;
  color:#9fb4d4;text-shadow:0 1px 0 rgba(0,0,0,.6);
}
.stat-value{
  font-size:clamp(22px,4.6cqw,46px);font-weight:800;letter-spacing:-.02em;margin-top:.1em;
  color:#fff;text-shadow:0 3px 0 var(--navy),0 6px 14px rgba(0,0,0,.45);
  transition:transform .09s ease;
}
.stat-value.pop{transform:scale(1.14)}
.health{display:flex;gap:.38em;margin-top:.5em}
.health i{
  width:clamp(13px,2.0cqw,22px);height:clamp(13px,2.0cqw,22px);
  border-radius:4px;display:block;
  background:var(--excel-lt);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.28),0 0 0 2px var(--navy);
  transition:background .18s,transform .18s,opacity .18s;
}
.health i.lost{background:#41506a;opacity:.55;transform:scale(.8)}

/* ---- full resets: the one resource the player is managing ---- */
.resets{display:flex;flex-direction:column;margin-top:.75em;line-height:1}
.resets-label{
  font-size:clamp(8px,1.2cqw,12px);letter-spacing:.18em;font-weight:800;
  color:#9ff6ff;text-shadow:0 1px 0 rgba(0,0,0,.6);
}
.reset-pips{display:flex;gap:.4em;margin-top:.45em}
.reset-pips i{
  width:clamp(13px,2.1cqw,23px);height:clamp(13px,2.1cqw,23px);
  border-radius:50%;display:block;
  background:radial-gradient(circle at 36% 32%,#bdf7ff,#22d3ee 62%,#0e93ad);
  box-shadow:0 0 0 2px var(--navy),0 0 10px rgba(34,211,238,.55);
  transition:background .18s,box-shadow .18s,transform .18s,opacity .18s;
}
/* A spent reset stays in place as an empty socket — three sockets, however
   many are left, so the cost of the last one is always visible. */
.reset-pips i.spent{
  background:none;opacity:.75;transform:scale(.86);
  box-shadow:inset 0 0 0 2px rgba(159,246,255,.32),0 0 0 2px var(--navy);
}
/* A reset coming back. Brief, so the restored pip is seen and then forgotten. */
.resets.gained .resets-label{color:#8ef0bd}
.resets.gained .reset-pips i:not(.spent){animation:pipGained .7s ease}
@keyframes pipGained{
  0%{transform:scale(1)}
  28%{transform:scale(1.34);box-shadow:0 0 0 2px var(--navy),0 0 20px rgba(142,240,189,.95)}
  100%{transform:scale(1)}
}
.resets.deny{animation:denyShake .42s ease}
.resets.deny .resets-label{color:var(--red)}
.resets.deny .reset-pips i{box-shadow:inset 0 0 0 2px rgba(230,72,75,.75),0 0 0 2px var(--navy)}
@keyframes denyShake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-5px)}
  35%{transform:translateX(5px)}
  55%{transform:translateX(-3px)}
  78%{transform:translateX(3px)}
}
.hud-right{display:flex;flex-direction:column;align-items:flex-end}
.objective{display:flex;flex-direction:column;align-items:flex-end;margin-top:.55em;line-height:1.25}
.objective-label{
  font-size:clamp(8px,1.24cqw,13px);letter-spacing:.18em;font-weight:800;
  color:#8ef0bd;text-shadow:0 1px 0 rgba(0,0,0,.6);
}
.objective-zone{
  font-size:clamp(8px,1.16cqw,12px);letter-spacing:.16em;font-weight:700;color:#9fb4d4;
}

/* ---- the Friday checklist ---- */
.objective-label.ready{color:#ffe0a8}
.checklist{
  list-style:none;margin:.5em 0 0;padding:0;
  display:flex;flex-direction:column;align-items:flex-end;gap:.22em;
  font-size:clamp(8px,1.16cqw,12px);font-weight:700;letter-spacing:.06em;
}
.checklist li{
  display:flex;align-items:center;gap:.45em;
  color:#cfe0f7;text-shadow:0 1px 0 rgba(0,0,0,.6);
  transition:color .2s,opacity .2s;
}
.checklist li i{font-style:normal;width:1em;text-align:center;color:#9fb4d4}
.checklist li.done{color:#8ef0bd;opacity:.72}
.checklist li.done i{color:#8ef0bd}
.checklist li.done span{text-decoration:line-through;text-decoration-thickness:1px}
.checklist li.locked{color:#7f8fa8}
.checklist li.locked i{filter:grayscale(1);opacity:.7}
.checklist li.go{color:#ffe0a8}
.checklist li.go i{color:#ffe0a8}

/* ---- checklist complete: the moment it turns into an escape ---- */
.done-banner{
  position:absolute;left:50%;top:38%;transform:translate(-50%,0);
  pointer-events:none;opacity:0;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.15em;
}
.done-banner strong{
  font-size:clamp(14px,3.2cqw,34px);font-weight:800;letter-spacing:.14em;
  color:#ffe0a8;text-shadow:0 4px 0 rgba(9,16,28,.6),0 10px 30px rgba(0,0,0,.5);
  white-space:nowrap;
}
.done-banner em{
  font-style:normal;font-size:clamp(18px,4.4cqw,48px);font-weight:800;letter-spacing:.22em;
  color:#8ef0bd;text-shadow:0 4px 0 rgba(9,16,28,.6),0 10px 30px rgba(0,0,0,.5);
}
.done-banner.on{animation:doneIn 2.6s ease forwards}
@keyframes doneIn{
  0%{opacity:0;transform:translate(-50%,12px) scale(.95)}
  12%{opacity:1;transform:translate(-50%,0) scale(1)}
  78%{opacity:1}
  100%{opacity:0}
}

/* ---- room announcement ---- */
.zone-banner{
  position:absolute;left:50%;top:31%;transform:translate(-50%,0);
  pointer-events:none;opacity:0;
  font-size:clamp(18px,4.6cqw,48px);font-weight:800;letter-spacing:.16em;
  color:rgba(232,242,255,.92);
  text-shadow:0 4px 0 rgba(9,16,28,.6),0 10px 30px rgba(0,0,0,.5);
  white-space:nowrap;
}
.zone-banner.on{animation:zoneIn 1.8s ease forwards}
@keyframes zoneIn{
  0%{opacity:0;transform:translate(-50%,10px) scale(.96);letter-spacing:.34em}
  18%{opacity:1;transform:translate(-50%,0) scale(1);letter-spacing:.16em}
  72%{opacity:1}
  100%{opacity:0}
}

/* ---- Karen ---- */
.karen{
  position:absolute;left:50%;top:15%;transform:translate(-50%,-14px) scale(.94);
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s cubic-bezier(.2,1.6,.4,1);
  width:max-content;max-width:90%;
}
.karen.on{opacity:1;transform:translate(-50%,0) scale(1)}
.karen-inner{
  display:flex;align-items:center;gap:.8em;
  background:linear-gradient(180deg,#fff5e0,#ffe4b0);
  color:#4a2d00;
  border:3px solid var(--navy);border-radius:10px;
  padding:.6em 1.1em .6em .8em;
  box-shadow:0 8px 0 -1px rgba(23,36,58,.55),0 18px 40px rgba(0,0,0,.45);
}
.karen-icon{width:clamp(26px,4.4cqw,46px);height:auto;flex:0 0 auto}
.karen-icon[hidden]{display:none}
.karen-text{display:flex;flex-direction:column;line-height:1.15}
.karen-text strong{font-size:clamp(12px,2.3cqw,24px);font-weight:800;letter-spacing:.02em;white-space:nowrap}
.karen-text em{font-size:clamp(8px,1.3cqw,13px);font-style:normal;opacity:.72;font-weight:600;white-space:nowrap}

/* ---- martin ----
   Same slot and same shape as Karen's banner so the player reads it without
   learning anything new, but cool and clipped rather than warm: Karen has
   sent you something, Martin is still talking. */
.martin{
  position:absolute;left:50%;top:15%;transform:translate(-50%,-14px) scale(.94);
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s cubic-bezier(.2,1.6,.4,1);
  width:max-content;max-width:90%;
}
.martin.on{opacity:1;transform:translate(-50%,0) scale(1)}
.martin-inner{
  display:flex;align-items:center;gap:.8em;
  background:linear-gradient(180deg,#ffd9c9,#f3ad90);
  color:#4a1d08;
  border:3px solid var(--navy);border-radius:10px;
  padding:.6em 1.1em;
  box-shadow:0 8px 0 -1px rgba(23,36,58,.55),0 18px 40px rgba(0,0,0,.45);
}
.martin-text{display:flex;flex-direction:column;line-height:1.15}
.martin-text strong{font-size:clamp(12px,2.3cqw,24px);font-weight:800;letter-spacing:.02em;white-space:nowrap}
.martin-text em{font-size:clamp(8px,1.3cqw,13px);font-style:normal;opacity:.76;font-weight:600;white-space:nowrap}

/* Act 2: the panels that can no longer change are taken off the screen. */
.hud.carpark .health,
.hud.carpark .resets{display:none}
.hud.carpark .objective-label{color:#6ef7b2}

/* ---- toast feed ---- */
.toasts{
  position:absolute;left:2.6%;bottom:2.4%;display:flex;flex-direction:column;gap:.35em;
  pointer-events:none;align-items:flex-start;
}
.toast{
  font-size:clamp(8px,1.22cqw,13px);font-weight:700;letter-spacing:.04em;
  background:rgba(12,20,34,.75);border-left:3px solid var(--cyan);
  color:#cfe0f7;padding:.3em .6em;border-radius:3px;
  animation:toastIn .2s ease, toastOut .4s ease 2.7s forwards;
  white-space:nowrap;
}
@keyframes toastIn{from{opacity:0;transform:translateX(-8px)}}
@keyframes toastOut{to{opacity:0;transform:translateX(-8px)}}

/* ---- screens ----
   Fixed to the viewport, not to the letterboxed stage. On a phone in portrait
   the stage is a 16:10 slot barely 240px tall; a results screen or a
   leaderboard inside it would be unreadable, and the stage's size containment
   would clip it rather than let it scroll. */
.screen{
  position:fixed;inset:0;z-index:5;display:grid;place-items:center;
  background:rgba(6,11,20,.86);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s;
  padding:4%;
}
.screen.on{opacity:1;visibility:visible}
.panel{
  text-align:center;max-width:88%;max-height:94%;overflow:auto;overscroll-behavior:contain;
  background:linear-gradient(180deg,#22375a,#16233c);
  border:3px solid #0d1626;border-radius:14px;
  padding:clamp(16px,3.2cqw,38px) clamp(18px,4cqw,54px);
  box-shadow:0 14px 0 -2px rgba(0,0,0,.5),0 30px 70px rgba(0,0,0,.55);
}
.panel--bad{background:linear-gradient(180deg,#4d2230,#2a1622);border-color:#160a10}
.panel--good{background:linear-gradient(180deg,#1d5742,#10302a);border-color:#09201a}

/* Holloway Systems' own lock-up: the mark, then the name. Restrained. */
.brandline{
  display:flex;align-items:center;justify-content:center;gap:.6em;
  margin:0 0 1em;
  font-size:clamp(8px,1.3cqw,13px);letter-spacing:.3em;font-weight:800;
  color:rgba(197,216,244,.7);
}
.mark{
  width:clamp(16px,2.4cqw,24px);height:clamp(16px,2.4cqw,24px);flex:0 0 auto;
  background:
    linear-gradient(var(--holloway),var(--holloway)) 0 8%/86% 22% no-repeat,
    linear-gradient(var(--holloway-lt),var(--holloway-lt)) 14% 43%/72% 22% no-repeat,
    linear-gradient(var(--holloway),var(--holloway)) 4% 78%/82% 22% no-repeat;
}
.kicker{
  margin:0 0 .35em;font-size:clamp(8px,1.3cqw,13px);letter-spacing:.28em;
  text-transform:uppercase;font-weight:700;color:#8fa8cd;
}
.panel h1{
  margin:0;font-size:clamp(20px,4.9cqw,50px);line-height:1.02;font-weight:800;
  letter-spacing:-.01em;color:#fff;text-shadow:0 4px 0 #0d1626,0 10px 26px rgba(0,0,0,.5);
}
.panel h1 span{display:block;color:var(--holloway-lt)}
.panel h2{
  margin:0;font-size:clamp(16px,3.5cqw,36px);line-height:1.12;font-weight:800;
  color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.45);
}
.when{
  margin:.9em 0 0;font-size:clamp(9px,1.5cqw,15px);font-weight:800;letter-spacing:.22em;
  color:#c9d8ef;
}
.objective-big{
  margin:.7em auto 0;display:inline-block;
  font-size:clamp(9px,1.6cqw,16px);font-weight:800;letter-spacing:.18em;
  color:#8ef0bd;border:2px solid rgba(142,240,189,.35);border-radius:6px;
  padding:.42em 1em;
}
.blurb{
  margin:1em auto 1.2em;max-width:32em;
  font-size:clamp(10px,1.58cqw,17px);line-height:1.55;color:#c9d8ef;
}
.blurb b{color:#fff}
.stats{
  display:flex;gap:clamp(12px,2.6cqw,36px);justify-content:center;
  margin:1.2em 0 1em;flex-wrap:wrap;
}
/* ---- the escape result: one number, then everything else ---- */
.panel--result{padding-top:clamp(12px,2.4cqw,30px);padding-bottom:clamp(12px,2.4cqw,30px)}
.panel--result .accolade{margin:.6em 0 .3em}
.panel--result .signoff{margin:.5em 0 0}

/* The time IS the result. Nothing else on the screen competes with it. */
.hero-time{
  margin:.28em 0 0;
  font-size:clamp(44px,10cqw,104px);line-height:1;font-weight:800;
  letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;
  text-shadow:0 5px 0 rgba(0,0,0,.4),0 14px 30px rgba(0,0,0,.5);
}
.pb-flag{
  margin:.5em 0 0;display:inline-block;
  font-size:clamp(9px,1.6cqw,16px);font-weight:800;letter-spacing:.2em;
  color:#07140d;background:linear-gradient(180deg,#a9f7cd,#46e08a);
  border:2px solid #09201a;border-radius:6px;padding:.35em 1em;
  animation:pbIn .45s cubic-bezier(.2,1.7,.4,1);
}
.pb-flag[hidden]{display:none}
@keyframes pbIn{from{opacity:0;transform:scale(.82)}}

.splits{
  display:flex;justify-content:center;gap:clamp(16px,4cqw,54px);
  margin:.9em 0 0;
}
.splits div{display:flex;flex-direction:column;gap:.2em}
.splits em{
  font-size:clamp(7px,1.05cqw,12px);font-style:normal;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#8fc9ac;
}
.splits span{
  font-size:clamp(14px,2.5cqw,26px);font-weight:800;color:#e6f7ee;
  font-variant-numeric:tabular-nums;
}

/* The competitive line: where that time puts you. */
.standings{
  display:flex;justify-content:center;gap:clamp(10px,2.6cqw,34px);
  margin:1.1em auto 0;padding:.7em clamp(10px,2.4cqw,28px);
  background:rgba(6,20,15,.42);border:2px solid rgba(139,240,190,.22);border-radius:10px;
  width:fit-content;max-width:100%;
}
.standings div{display:flex;flex-direction:column;gap:.25em;min-width:0}
.standings em{
  font-size:clamp(7px,1.02cqw,11px);font-style:normal;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#89ad9c;white-space:nowrap;
}
.standings span{
  font-size:clamp(13px,2.3cqw,24px);font-weight:800;color:#8ef0bd;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* The performance review. Deliberately quieter than the escape time: a tier
   and one sentence, in HR's own paper colour, never competing with the clock. */
.review{
  margin:.9em auto 0;padding:.6em clamp(10px,2.2cqw,24px) .65em;
  background:rgba(12,20,32,.5);border:2px solid rgba(150,178,214,.26);border-radius:10px;
  width:fit-content;max-width:100%;text-align:center;
}
.review-label{
  margin:0;font-size:clamp(7px,1.02cqw,11px);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#8aa0c2;
}
.review-tier{
  margin:.25em 0 0;font-size:clamp(11px,1.9cqw,20px);font-weight:800;letter-spacing:.14em;
  color:#dbe7f7;
}
.review-line{
  margin:.3em 0 0;font-size:clamp(8px,1.22cqw,13px);font-weight:600;font-style:italic;
  color:#9fb2cc;max-width:38ch;
}

.actions{
  display:flex;justify-content:center;align-items:center;gap:clamp(8px,1.8cqw,18px);
  margin:1.2em 0 0;flex-wrap:wrap;flex:0 0 auto;
}

/* Everything the run recorded, kept and demoted. */
.run-details{margin:1.1em 0 0;text-align:center}
.run-details>summary{
  cursor:pointer;list-style:none;display:inline-block;
  font-size:clamp(8px,1.2cqw,13px);font-weight:800;letter-spacing:.2em;
  color:#9fd7bb;padding:.35em .9em;border:2px solid rgba(139,240,190,.25);border-radius:7px;
}
.run-details>summary::-webkit-details-marker{display:none}
.run-details>summary::after{content:' \25B8';opacity:.7}
.run-details[open]>summary::after{content:' \25BE'}
.run-details>summary:hover{color:#d9f7e8;border-color:rgba(139,240,190,.5)}
.run-details>summary:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.stats--mini{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.75em clamp(8px,1.6cqw,20px);margin:1em 0 0;
}
.stats--mini div{align-items:center;text-align:center;min-width:0}
.stats--mini span{font-size:clamp(12px,1.9cqw,20px)}
.stats--mini span.word{font-size:clamp(9px,1.25cqw,13px);padding-top:.5em;line-height:1.2}
.stats--mini em{font-size:clamp(6px,.92cqw,10px);letter-spacing:.08em;margin-top:.3em;color:#8fb7a5}
.challenge-note{
  margin:1em 0 0;font-size:clamp(7px,1cqw,11px);color:#79a692;letter-spacing:.05em;font-weight:600;
}
.challenge-note b{color:#a9d8c3;font-weight:800}

/* ---- leaderboard ----
   A corporate internal system that has somehow become competitive: the same
   navy panel, the same type, ruled rows like a report nobody asked for. */
/* One row, definitely sized, so the panel's percentage height resolves — a
   grid item centred in an auto row cannot use one. */
.screen--board{z-index:6;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
/* A column: everything fixed except the rankings, which are the only thing
   allowed to scroll. The tabs and the way out are never off the bottom. */
.panel--board{
  width:min(760px,100%);max-width:100%;
  /* Hugs its content, up to whatever room the viewport has. The rankings are
     the only part allowed to grow, and the only part allowed to scroll. */
  height:auto;max-height:min(100%,820px);overflow:hidden;
  justify-self:center;
  display:flex;flex-direction:column;
  padding:clamp(12px,2.4cqw,30px) clamp(14px,3cqw,40px);
}
.panel--board .brandline{margin-bottom:.6em}
.panel--board .kicker{flex:0 0 auto}
.panel--board h2{flex:0 0 auto}
.board{min-height:0}

/* A short stage (a laptop in a small window, a phone in landscape) spends its
   height on the rankings rather than on the letterhead. */
@media (max-height:700px){
  .panel--board .brandline{display:none}
  .panel--board .kicker{margin-bottom:.15em}
  .prize{margin-top:.7em;padding:.5em .9em;gap:.1em}
}
@media (max-height:520px){
  .panel--board h2{font-size:clamp(14px,2.8cqw,24px)}
  .panel--board .kicker{display:none}
  .prize strong{display:none}
  .prize em{font-size:clamp(9px,1.4cqw,14px)}
  .board-foot{display:none}
}
/* A phone held sideways. Every pixel not showing a ranking is a wasted one. */
@media (max-height:430px){
  .panel--board{padding:10px clamp(12px,2.6cqw,28px)}
  .panel--board h2{font-size:16px;margin-bottom:.1em}
  .prize{margin-top:.4em;padding:.3em .7em;border-width:1px}
  .prize small{display:none}
  .prize em{font-size:11px;line-height:1.2}
  .tabs{margin-top:.5em}
  .tab{padding:.4em 1em;font-size:10px}
  .board-head{margin:.55em 0 .2em;padding-bottom:.3em}
  .board .row,.you-strip .row{padding:.3em clamp(6px,1.2cqw,14px);font-size:12px}
  .actions{margin-top:.6em}
  .actions .btn{padding:.45em 1.2em;font-size:13px}
  .panel--result .hero-time{font-size:clamp(30px,7cqw,52px)}
  .panel--result h2{font-size:15px}
  .panel--result .brandline{display:none}
  .panel--result .signoff{font-size:12px;margin:.4em 0 0}
}
.prize{
  flex:0 0 auto;
  display:flex;flex-direction:column;gap:.3em;align-items:center;
  margin:.9em 0 0;padding:.7em 1em;
  background:linear-gradient(180deg,rgba(245,166,35,.16),rgba(245,166,35,.06));
  border:2px solid rgba(245,166,35,.42);border-radius:10px;
}
.prize[hidden]{display:none}
.prize strong{font-size:clamp(8px,1.2cqw,13px);font-weight:800;letter-spacing:.26em;color:#f5c56a}
.prize em{
  font-size:clamp(10px,1.75cqw,18px);font-style:normal;font-weight:800;
  letter-spacing:.06em;color:#ffe0a8;line-height:1.3;
}
.prize small{font-size:clamp(7px,1cqw,11px);color:#c0a875;letter-spacing:.04em;font-weight:600}

.tabs{display:flex;justify-content:center;gap:.5em;margin:1em 0 0;flex:0 0 auto}
.tab{
  font-family:inherit;cursor:pointer;
  font-size:clamp(8px,1.24cqw,13px);font-weight:800;letter-spacing:.18em;
  color:#93a9c9;background:rgba(10,18,31,.5);
  border:2px solid rgba(150,180,225,.22);border-radius:8px;
  padding:.6em 1.3em;transition:color .15s,border-color .15s,background .15s;
}
.tab:hover{color:#dce9fb;border-color:rgba(150,180,225,.5)}
.tab.is-on{color:#0c1a12;background:linear-gradient(180deg,#8ef0bd,#46e08a);border-color:#0d1626}
.tab:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

.board-head,.board .row,.you-strip .row{
  display:grid;grid-template-columns:clamp(26px,4cqw,44px) minmax(0,1fr) auto;
  align-items:center;gap:clamp(6px,1.4cqw,16px);
}
.board-head{
  flex:0 0 auto;margin:1em 0 .3em;padding:0 clamp(6px,1.2cqw,14px) .5em;
  border-bottom:2px solid rgba(150,180,225,.2);
  font-size:clamp(7px,1cqw,11px);font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:#7f95b6;
}
.board-head span:nth-child(2){text-align:left}
.board-head span:last-child{text-align:right}
.board{
  list-style:none;margin:0;padding:0;
  flex:0 1 auto;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;
}
.board .row{
  padding:.5em clamp(6px,1.2cqw,14px);
  border-bottom:1px solid rgba(150,180,225,.1);
  font-size:clamp(10px,1.6cqw,17px);
}
.board .row:last-child{border-bottom:0}
.board .pos{
  font-size:clamp(9px,1.3cqw,14px);font-weight:800;color:#7f95b6;
  font-variant-numeric:tabular-nums;
}
.board .who{
  font-weight:700;color:#dce9fb;text-align:left;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.board .ms{font-weight:800;color:#fff;font-variant-numeric:tabular-nums;text-align:right}

/* Top three: a little more weight, nothing more. No medals, no gold rush. */
.board .row--podium{background:rgba(150,180,225,.05)}
.board .row--podium .pos{color:#8ef0bd}
.board .row--podium .who{color:#fff;font-weight:800}
.board .row--1 .who{font-size:1.08em}
.board .row--1 .ms{color:#8ef0bd}

.board .row--you{
  background:rgba(70,224,138,.13);
  border-left:3px solid #46e08a;
  border-bottom-color:rgba(70,224,138,.25);
}
.board .row--you .pos,.board .row--you .who,.board .row--you .ms{color:#bff5d8}
.board .row--you .who{font-weight:800;letter-spacing:.06em}
.board .gap{
  padding:.3em 0;text-align:center;color:#5c6f8c;letter-spacing:.5em;font-size:11px;
}
.you-strip{
  flex:0 0 auto;list-style:none;margin:.35em 0 0;padding:0;
  border-top:2px solid rgba(70,224,138,.3);
}
.you-strip[hidden]{display:none}
.you-strip .row{
  padding:.5em clamp(6px,1.2cqw,14px);
  font-size:clamp(10px,1.6cqw,17px);
  background:rgba(70,224,138,.13);border-left:3px solid #46e08a;
}
.you-strip .pos,.you-strip .who,.you-strip .ms{color:#bff5d8;font-variant-numeric:tabular-nums}
.you-strip .pos{font-size:clamp(9px,1.3cqw,14px);font-weight:800}
.you-strip .who{
  font-weight:800;letter-spacing:.06em;text-align:left;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.you-strip .ms{font-weight:800;text-align:right}

.board-foot{
  flex:0 0 auto;margin:.55em 0 0;font-size:clamp(7px,1.05cqw,12px);color:#7f95b6;
  letter-spacing:.06em;font-weight:600;line-height:1.5;
}

@media (max-width:640px){
  .stats--mini{grid-template-columns:repeat(3,minmax(0,1fr))}
  .standings{gap:clamp(8px,2cqw,18px);padding:.6em .8em}
}
@media (max-width:430px){
  .stats--mini{grid-template-columns:repeat(2,minmax(0,1fr))}
  .splits{gap:1.4em}
  .actions{flex-direction:column;gap:.55em}
  .panel--result .actions .btn,.panel--board .actions .btn{width:100%}
}
.stats div{display:flex;flex-direction:column;line-height:1.1}
.stats span{font-size:clamp(18px,3.6cqw,38px);font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.stats span.word{font-size:clamp(11px,2cqw,20px);align-self:center;padding-top:.4em}
.stats em{font-size:clamp(8px,1.18cqw,12px);font-style:normal;letter-spacing:.13em;
  text-transform:uppercase;color:#a9bcd8;font-weight:700;margin-top:.35em}
.accolade{
  margin:.2em 0 .5em;font-size:clamp(9px,1.5cqw,15px);font-weight:800;letter-spacing:.2em;
  color:#0d1b14;background:linear-gradient(180deg,#8ef0bd,#46e08a);
  border:2px solid #09201a;border-radius:6px;
  display:inline-block;padding:.35em .9em;
}
.accolade[hidden]{display:none}
.rank{margin:0 0 .2em}
.rank span{
  font-size:clamp(10px,1.7cqw,18px);font-weight:800;letter-spacing:.12em;color:#8ef0bd;
}
.signoff{
  margin:.8em 0 1.2em;font-size:clamp(11px,2.1cqw,22px);font-weight:800;letter-spacing:.26em;
  color:rgba(233,246,239,.82);
}
.btn{
  font-family:inherit;cursor:pointer;
  font-size:clamp(12px,2.1cqw,22px);font-weight:800;letter-spacing:.1em;
  color:#0d1b14;background:linear-gradient(180deg,#46e08a,#21b765);
  border:3px solid #0d1626;border-radius:10px;
  padding:.62em 1.5em;
  box-shadow:0 6px 0 -1px #0d1626,0 12px 24px rgba(0,0,0,.4);
  transition:transform .08s ease,box-shadow .08s ease,filter .15s;
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 -1px #0d1626,0 6px 14px rgba(0,0,0,.4)}
.btn:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
/* The second choice on a screen. Declared after .btn so it really does beat
   the filled gradient rather than losing to it on source order. */
.btn--ghost{
  color:#dff3e8;background:none;background-color:transparent;
  border:3px solid rgba(160,220,190,.5);
  box-shadow:0 6px 0 -1px rgba(8,24,18,.5);
}
.btn--ghost:hover{background-color:rgba(160,220,190,.12);filter:none}
#screenMenu .btn--ghost{color:#d8e6fb;border-color:rgba(150,185,235,.5)}
#screenMenu .btn--ghost:hover{background-color:rgba(150,185,235,.12)}
.controls{margin:1.1em 0 0;font-size:clamp(8px,1.26cqw,13px);color:#8fa8cd;letter-spacing:.06em;font-weight:600}
/* `.rotate-hint` and its portrait media query are gone with the element they
   styled: the "turn your phone sideways" line on the start screen is now the
   portrait gate (.rotate-gate) plus the touch control hint below, which key
   off (pointer:coarse) rather than off a viewport width — a narrow desktop
   window is not a phone and should keep the keyboard hints. */

.mute{
  position:absolute;right:1.4%;bottom:2.4%;
  width:clamp(24px,3.4cqw,36px);height:clamp(24px,3.4cqw,36px);
  display:grid;place-items:center;cursor:pointer;
  font-size:clamp(12px,1.9cqw,19px);line-height:1;
  color:#cfe0f7;background:rgba(12,20,34,.6);
  border:2px solid rgba(255,255,255,.16);border-radius:8px;
  font-family:inherit;transition:color .15s,border-color .15s,opacity .15s;
}
.mute:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.mute.muted{color:#6d7f9b;opacity:.75}
.mute.muted::after{
  content:"";position:absolute;width:78%;height:2px;background:currentColor;
  transform:rotate(-45deg);border-radius:2px;
}

/* ── Touch controls ──────────────────────────────────────────────────────────
   Pointer-precise devices keep E / F / SPACE and never see any of this: the
   whole cluster is display:none until (pointer:coarse) matches.

   The cluster is anchored to the safe area, not to the raw viewport edge, so
   the home indicator, a notch in landscape and rounded corners take space away
   from the padding rather than from the buttons. Targets are floored at 48px
   regardless of how small the viewport gets. */

.touch-actions{
  position:absolute;display:none;
  right:max(3%,calc(env(safe-area-inset-right,0px) + 10px));
  bottom:max(7%,calc(env(safe-area-inset-bottom,0px) + 10px));
  align-items:flex-end;gap:clamp(8px,1.6cqw,14px);
  touch-action:none;
}
@media (pointer:coarse){ .touch-actions{display:flex} }

/* USE and FOB. Smaller than the Full Reset and inboard of it: the Full Reset
   is the panic control and keeps the thumb's resting position. */
.act-btn{
  width:max(48px,clamp(48px,7.6cqw,66px));height:max(48px,clamp(48px,7.6cqw,66px));
  display:grid;place-items:center;
  font-size:clamp(10px,1.5cqw,13px);letter-spacing:.06em;line-height:1;
  font-family:inherit;font-weight:800;
  color:#eaf4ff;background:rgba(12,20,34,.66);
  border:3px solid rgba(255,255,255,.28);border-radius:50%;
  box-shadow:0 5px 0 -1px rgba(8,16,28,.75),0 10px 22px rgba(0,0,0,.4);
  touch-action:none;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .06s ease,box-shadow .06s ease,filter .1s;
}
.act-btn.held{
  transform:translateY(4px);filter:brightness(1.25);
  box-shadow:0 1px 0 -1px rgba(8,16,28,.75),0 5px 12px rgba(0,0,0,.4);
}

/* Touch fire control. Pointer-precise devices use Space and never see this. */
.fire-btn{
  position:relative;
  width:max(56px,clamp(58px,11cqw,92px));height:max(56px,clamp(58px,11cqw,92px));
  display:none;place-items:center;
  font-size:clamp(20px,3.4cqw,30px);line-height:1;font-family:inherit;
  color:#062028;background:radial-gradient(circle at 38% 32%,#7ff0ff,#22d3ee 62%,#0e9cb8);
  border:3px solid var(--navy);border-radius:50%;
  box-shadow:0 5px 0 -1px var(--navy),0 12px 26px rgba(0,0,0,.45);
  touch-action:none;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .06s ease,box-shadow .06s ease,filter .1s;
}
@media (pointer:coarse){ .fire-btn{display:grid} }
.fire-btn.held{
  transform:translateY(4px);filter:brightness(1.12);
  box-shadow:0 1px 0 -1px var(--navy),0 6px 14px rgba(0,0,0,.45);
}

/* touch joystick */
.stick{position:absolute;pointer-events:none;opacity:0;transition:opacity .12s}
.stick.on{opacity:.9}

/* The gameplay surface only. Scoping this to the stage is deliberate: a
   global `touch-action:none` would also kill scrolling on the results panel,
   the leaderboard and the sign-in steps, which are ordinary documents people
   need to scroll and select in. */
.stage{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.stage canvas{touch-action:none}

/* Portrait gate. Covers everything, including a run in progress. */
.rotate-gate{
  position:fixed;inset:0;z-index:60;
  display:grid;place-items:center;text-align:center;
  padding:calc(env(safe-area-inset-top,0px) + 18px) 22px calc(env(safe-area-inset-bottom,0px) + 18px);
  background:rgba(6,11,20,.96);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.rotate-gate[hidden]{display:none}
.rotate-inner{max-width:22em}
.rotate-head{
  margin:1.1em 0 .3em;font-size:clamp(20px,6.4vw,30px);font-weight:800;
  letter-spacing:.06em;color:#eaf4ff;
}
.rotate-sub{margin:0;font-size:clamp(12px,3.6vw,16px);color:#9fc9ff;letter-spacing:.03em}

/* The start screen's two control hints: one per input class, never both. */
.controls--touch{display:none}
@media (pointer:coarse){
  .controls{display:none}
  .controls--touch{display:block}
}

/* The premise on the start screen. Three short lines, deliberately quiet
   under the wordmark. */
.premise{
  margin:1.1em 0 0;font-size:clamp(12px,2.1cqw,20px);line-height:1.7;
  color:#cfe0f7;letter-spacing:.02em;font-weight:600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCOUNTS — the three approved additions, and nothing rearranged:
   SAVE MY TIME, VERIFICATION PENDING, and the account line on the board.
   ═══════════════════════════════════════════════════════════════════════════ */

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* A held result reads as a held result: calm, not an alarm. */
.standings.is-pending span,
.standings.is-refused span{font-size:clamp(10px,1.55cqw,16px);letter-spacing:.12em}
.standings.is-pending span{color:#f5c56a}
.standings.is-refused span{color:#ffb4a2}
.standings div[hidden]{display:none}

.save{
  margin:1.1em auto 0;max-width:min(460px,100%);
  padding:.9em clamp(10px,2.4cqw,22px) .8em;
  background:rgba(6,20,15,.5);
  border:2px solid rgba(139,240,190,.35);border-radius:10px;
  text-align:center;
}
.save[hidden]{display:none}
.save-head{margin:0;font-size:clamp(9px,1.35cqw,14px);font-weight:800;letter-spacing:.18em;color:#8ef0bd}
.save-sub{margin:.35em 0 .7em;font-size:clamp(9px,1.3cqw,14px);color:#cfe7da;font-weight:600}
.save-step{display:flex;gap:.5em;align-items:stretch}
.save-step[hidden]{display:none}
.save-step input{
  flex:1 1 auto;min-width:0;
  font:inherit;font-size:16px;              /* 16px stops iOS zooming the page on focus */
  font-weight:700;color:#0d1b14;
  background:#eafbf1;border:2px solid #0d1626;border-radius:8px;
  padding:.55em .7em;
}
.save-step input:focus-visible{outline:3px solid var(--cyan);outline-offset:1px}
#saveCode{letter-spacing:.45em;text-align:center;font-variant-numeric:tabular-nums}
.btn--small{font-size:clamp(11px,1.5cqw,15px);padding:.5em 1em;box-shadow:0 4px 0 -1px #0d1626;white-space:nowrap}
.save-msg{min-height:1.2em;margin:.55em 0 0;font-size:clamp(9px,1.25cqw,13px);color:#b9dccb;font-weight:600}
.save-msg.is-error{color:#ffb4a2}
.save-fine{margin:.45em 0 0;font-size:clamp(7px,1cqw,11px);color:#79a692}
.save.is-busy{opacity:.75}

.linkish{
  font:inherit;cursor:pointer;background:none;border:0;padding:.2em .3em;
  font-size:clamp(9px,1.2cqw,13px);font-weight:700;color:#9fd7bb;
  text-decoration:underline;text-underline-offset:3px;
}
.linkish:hover{color:#dff7ea}
.linkish:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.linkish[hidden]{display:none}
.linkish--quiet{color:#8fa0bb}

.account{
  flex:0 0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.2em .8em;
  margin:.8em 0 0;font-size:clamp(9px,1.2cqw,13px);color:#9fb3d1;font-weight:600;
}
.account[hidden]{display:none}
.panel--board .linkish{color:#a9c1e4}
.panel--board .linkish--quiet{color:#7f95b6}

.delete-confirm{
  flex:0 0 auto;margin:.8em 0 0;padding:.8em 1em;text-align:left;
  background:rgba(77,34,48,.55);border:2px solid rgba(255,180,162,.35);border-radius:10px;
  font-size:clamp(9px,1.3cqw,14px);color:#f3d9d2;line-height:1.45;
}
.delete-confirm[hidden]{display:none}
.delete-confirm p{margin:0 0 .5em}
.delete-confirm .actions{margin-top:.6em}
.btn--danger{color:#fff;background:linear-gradient(180deg,#e6484b,#b8292d)}

@media (max-width:430px){
  .save-step{flex-direction:column}
  .save-step .btn{width:100%}
}