/* Connect Rally – big-screen shell.
   Sized in rem against a 1920×1080 reference (1rem = 16px there) so everything
   scales with the screen and stays readable from 3–4 metres. */

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/shared/ibm-plex-sans-upright.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #0D27F5;
  --blue-deep: #091AAB;
  --ink: #1A1B2D;
  --ink-2: #11122A;
  --night: #0A0B1E;
  --mint: #70FAD8;
  --lime: #DCF36C;
  --light: #F2F5FE;
  --mid: #D5E0FD;
  --white: #FFFFFF;
  --caution: #D89A2E;
  --coral: #FF7A59;
  --danger: #FF5A6E;
  --glass: rgba(18, 20, 52, 0.62);
  --glass-line: rgba(213, 224, 253, 0.16);
  --text-dim: rgba(242, 245, 254, 0.68);
  --text-faint: rgba(242, 245, 254, 0.42);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: min(calc(100vw / 120), calc(100vh / 67.5));
  background: var(--night);
}

html, body { width: 100%; height: 100%; overflow: hidden; }

body {
  font-family: var(--font);
  color: var(--light);
  background:
    radial-gradient(80rem 50rem at 15% 10%, rgba(13, 39, 245, 0.45), transparent 60%),
    radial-gradient(60rem 40rem at 90% 100%, rgba(112, 250, 216, 0.10), transparent 60%),
    var(--night);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum' 0;
  user-select: none;
  cursor: default;
}

body.cursor-hidden, body.cursor-hidden * { cursor: none !important; }

button { font: inherit; color: inherit; background: none; border: 0; }

/* ---------- Stage (engine canvas) ---------- */

#stage { position: fixed; inset: 0; z-index: 0; }
#stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#stage canvas.is-entering { animation: stage-in 1.2s var(--ease-out) both; }
@keyframes stage-in { from { opacity: 0; } to { opacity: 1; } }

#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; }

#app { position: fixed; inset: 0; z-index: 10; }

/* ---------- Screens ---------- */

.screen {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .7s var(--ease-out), visibility 0s linear .7s;
}
.screen.is-active { opacity: 1; visibility: visible; transition: opacity .7s var(--ease-out), visibility 0s; }

.scrim { position: absolute; inset: 0; pointer-events: none; }
.scrim-attract {
  background:
    linear-gradient(90deg, rgba(8, 10, 32, 0.94) 0%, rgba(8, 10, 32, 0.82) 36%, rgba(8, 10, 32, 0.28) 58%, rgba(8, 10, 32, 0.50) 72%, rgba(8, 10, 32, 0.86) 100%),
    linear-gradient(0deg, rgba(8, 10, 32, 0.85) 0%, transparent 30%),
    radial-gradient(70rem 50rem at 0% 0%, rgba(13, 39, 245, 0.42), transparent 70%);
}
.scrim-lobby {
  background:
    radial-gradient(90rem 60rem at 50% 45%, rgba(13, 39, 245, 0.30), transparent 70%),
    linear-gradient(180deg, rgba(8, 10, 32, 0.80), rgba(8, 10, 32, 0.92));
}
.scrim-results {
  background:
    radial-gradient(80rem 50rem at 50% 30%, rgba(13, 39, 245, 0.45), transparent 70%),
    linear-gradient(180deg, rgba(8, 10, 32, 0.84), rgba(8, 10, 32, 0.95));
  backdrop-filter: blur(6px);
}

.glass {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 1.75rem;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---------- Boot ---------- */

.boot { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2.5rem; }
.boot-mark { width: 7rem; height: 7rem; display: grid; place-items: center; border-radius: 2rem; background: rgba(255,255,255,.06); animation: breathe 2.4s ease-in-out infinite; }
.boot-mark img { width: 4.5rem; }
.boot-text { font-size: 2rem; color: var(--text-dim); max-width: 70rem; text-align: center; line-height: 1.4; }
.boot-error { color: var(--white); background: rgba(255, 90, 110, .14); border: 1px solid rgba(255, 90, 110, .5); padding: 1.5rem 2.5rem; border-radius: 1.25rem; }
@keyframes breathe { 50% { transform: scale(1.06); background: rgba(255,255,255,.1); } }

/* ---------- Brand bar ---------- */

.brandbar { display: flex; align-items: center; gap: 1.75rem; }
.logo { height: 3.4rem; display: flex; align-items: center; }
.logo svg { height: 100%; width: auto; display: block; }
.logo .logo-fallback { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; }
.event-chip {
  font-size: 1.35rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: .55rem 1.2rem; border-radius: 99rem;
  color: var(--ink); background: var(--mint);
}
.brand-game { font-size: 1.6rem; font-weight: 600; color: var(--text-dim); padding-left: 1.75rem; border-left: 2px solid var(--glass-line); }

/* ---------- Attract ---------- */

.attract-layout {
  position: absolute; inset: 3.25rem 4rem 3.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36rem;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "brand brand" "hero board" "howto board";
  gap: 1.5rem 6rem;
}
.attract-layout .brandbar { grid-area: brand; }

.hero { grid-area: hero; align-self: center; display: flex; flex-direction: column; gap: 1.25rem; }

.title {
  font-weight: 700; font-size: 10.5rem; line-height: .86; letter-spacing: -0.045em;
  display: flex; flex-direction: column;
  text-shadow: 0 .5rem 3rem rgba(0, 0, 0, .35);
}
.title .t-line { display: block; }
.title .t-accent {
  background: linear-gradient(100deg, var(--mint) 0%, var(--lime) 45%, #FFFFFF 50%, var(--lime) 55%, var(--mint) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 7s ease-in-out infinite;
  padding-bottom: .08em;
}
@keyframes sheen { 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0% 0; } }

.tagline { font-size: 2.6rem; font-weight: 500; color: var(--light); letter-spacing: -0.01em; margin-bottom: 1.75rem; }

.join-card { display: flex; align-items: center; gap: 2.75rem; }
.qr-frame {
  position: relative; width: 18.5rem; height: 18.5rem; flex: none;
  border-radius: 2rem; padding: .45rem;
  background: conic-gradient(from var(--spin, 0deg), var(--mint), var(--lime), var(--blue), var(--mint));
  animation: spin 6s linear infinite;
  box-shadow: 0 0 4rem rgba(112, 250, 216, .28);
}
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --spin: 360deg; } }
.qr-inner { width: 100%; height: 100%; border-radius: 1.6rem; background: #fff; display: grid; place-items: center; padding: 1.1rem; overflow: hidden; }
.qr { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; display: block; }
.qr-inner.is-missing .qr { display: none; }
.qr-inner.is-missing::after { content: 'Connecting…'; color: var(--ink); font-size: 1.6rem; font-weight: 600; }

.join-copy { display: flex; flex-direction: column; gap: .9rem; }
.scan {
  font-size: 5.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: .95; color: var(--lime);
  display: flex; align-items: center; gap: 1.5rem;
}
.scan::before {
  content: ''; width: 3.2rem; height: 3.2rem; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: nudge 1.6s var(--ease-out) infinite;
}
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-.8rem); } }
.join-sub { font-size: 1.85rem; color: var(--text-dim); max-width: 32rem; line-height: 1.3; }
.join-url { font-size: 1.35rem; color: var(--text-faint); font-weight: 500; letter-spacing: .01em; }

.howto { grid-area: howto; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.howto li {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.1rem 1.25rem; border-radius: 1.25rem;
  background: rgba(255, 255, 255, .055); border: 1px solid var(--glass-line);
}
.howto .hi { width: 3.4rem; height: 3.4rem; flex: none; border-radius: 1rem; display: grid; place-items: center; background: rgba(112, 250, 216, .14); color: var(--mint); }
.howto .hi svg { width: 2.2rem; height: 2.2rem; }
.howto b { display: block; font-size: 1.6rem; font-weight: 700; }
.howto span { display: block; font-size: 1.2rem; color: var(--text-dim); line-height: 1.25; margin-top: .15rem; }

/* Floating coin sparkles behind the hero copy */
.sparkles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sparkles i {
  position: absolute; bottom: -4rem; width: var(--s, 1.4rem); height: var(--s, 1.4rem); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--lime) 30%, #B9D23F 70%);
  box-shadow: 0 0 1.2rem rgba(220, 243, 108, .55);
  opacity: 0; animation: rise var(--d, 14s) linear var(--delay, 0s) infinite;
}
@keyframes rise {
  0% { transform: translate3d(0, 0, 0) rotateY(0deg); opacity: 0; }
  10% { opacity: var(--o, .55); }
  85% { opacity: var(--o, .55); }
  100% { transform: translate3d(var(--x, 2rem), -75rem, 0) rotateY(720deg); opacity: 0; }
}

/* ---------- Leaderboard ---------- */

.board { grid-area: board; align-self: stretch; display: flex; flex-direction: column; padding: 1.75rem 1.75rem 1.25rem; min-height: 0; }
.board-tabs { display: flex; gap: .5rem; margin-bottom: 1.1rem; }
.board-tab {
  position: relative; overflow: hidden;
  font-size: 1.4rem; font-weight: 600; padding: .7rem 1.2rem; border-radius: 99rem;
  color: var(--text-dim); background: rgba(255,255,255,.04);
  transition: color .4s, background .4s;
}
.board-tab.is-on { color: var(--ink); background: var(--light); }
.board-tab i { position: absolute; left: 0; bottom: 0; height: .22rem; width: 0; background: var(--blue); }
.board-tab.is-on i { animation: tabprogress var(--rotate, 9s) linear forwards; }
@keyframes tabprogress { to { width: 100%; } }

.board-list { list-style: none; display: flex; flex-direction: column; gap: .4rem; flex: 1; min-height: 0; }
.board-row {
  display: grid; grid-template-columns: 3rem 1.1rem minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  padding: .62rem 1rem; border-radius: 1rem;
  font-size: 1.65rem;
  animation: row-in .6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms);
}
.board-row:nth-child(odd) { background: rgba(255, 255, 255, .035); }
@keyframes row-in { from { opacity: 0; transform: translateX(2rem); } to { opacity: 1; transform: none; } }
.board-rank { font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; text-align: right; }
.board-row.r1 .board-rank { color: var(--lime); }
.board-row.r2 .board-rank { color: var(--mint); }
.board-row.r3 .board-rank { color: var(--mid); }
.board-dot { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--kart, var(--mint)); box-shadow: 0 0 0 .2rem rgba(255,255,255,.1); }
.board-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.board-co { color: var(--text-faint); font-weight: 500; margin-left: .7rem; font-size: .8em; letter-spacing: .04em; }
/* Company livery (logo from the player's email domain) on a white rounded plate, so every logo reads
   on the dark boards, the kart-coloured cards and the HUD alike. */
.co-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; background: #fff; border-radius: .4em; padding: .16em .42em; vertical-align: middle; box-shadow: 0 .1em .5em rgba(10, 12, 40, .25); }
.co-logo img { display: block; height: 1em; width: auto; max-width: 5.2em; object-fit: contain; }
.co-logo.is-board { margin-left: .7rem; font-size: .95em; vertical-align: -.2em; }
.co-logo.is-pcard { margin-top: 1rem; font-size: 2.4rem; }
.co-logo.is-hud { margin-left: .2rem; font-size: 1.5rem; }
.co-logo.is-rcard { margin-left: auto; font-size: 2.1rem; letter-spacing: 0; }
.rcard-name { display: flex; align-items: center; gap: 1.2rem; }
.rcard-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.board-score { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.board-row.is-you { background: linear-gradient(90deg, rgba(220, 243, 108, .26), rgba(220, 243, 108, .08)); box-shadow: inset 0 0 0 2px rgba(220, 243, 108, .65); }
.board-row.is-you .board-name::after { content: 'You'; margin-left: .8rem; font-size: .7em; font-weight: 700; color: var(--ink); background: var(--lime); padding: .1rem .55rem; border-radius: .5rem; vertical-align: .15em; }
.board-gap { text-align: center; color: var(--text-faint); font-size: 1.6rem; line-height: 1; padding: .2rem; list-style: none; }
.board-empty { margin: auto; text-align: center; color: var(--text-dim); font-size: 1.8rem; line-height: 1.4; padding: 2rem; }
.board-empty b { display: block; color: var(--lime); font-size: 2.4rem; margin-bottom: .5rem; }

/* ---------- Lobby ---------- */

.lobby-layout { position: absolute; inset: 3.25rem 4rem 3.5rem; display: flex; flex-direction: column; }
.lobby-title { margin-top: 3.25rem; text-align: center; font-size: 6.5rem; font-weight: 700; letter-spacing: -0.04em; }
.lobby-row { flex: 1; display: grid; grid-template-columns: 1fr 26rem 1fr; align-items: center; gap: 3rem; padding: 0 2rem; }
.pcard-slot { display: flex; justify-content: center; }
.lobby-foot { text-align: center; font-size: 2.1rem; color: var(--text-dim); min-height: 3rem; }
.lobby-foot b { color: var(--lime); }

.pcard {
  position: relative; width: 36rem; height: 40rem; border-radius: 2rem; overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, color-mix(in srgb, var(--kart) 34%, #12143a) 0%, #12143a 62%);
  border: 2px solid color-mix(in srgb, var(--kart) 70%, transparent);
  box-shadow: 0 2rem 6rem rgba(0,0,0,.45), 0 0 5rem color-mix(in srgb, var(--kart) 30%, transparent);
  animation: card-in .8s var(--ease-spring) both;
}
@keyframes card-in { from { opacity: 0; transform: translateY(3rem) scale(.94); } to { opacity: 1; transform: none; } }
.pcard-tag { position: absolute; top: 1.6rem; left: 1.75rem; font-size: 1.3rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: var(--kart); padding: .4rem .9rem; border-radius: .6rem; }
.pcard-kart { flex: 1; display: grid; place-items: center; padding: 4.5rem 2.5rem 0; }
.pcard-kart svg { width: 100%; height: auto; filter: drop-shadow(0 1.5rem 2rem rgba(0,0,0,.45)); animation: idle-bob 1.8s ease-in-out infinite; }
@keyframes idle-bob { 50% { transform: translateY(-.5rem); } }
.pcard-body { padding: 0 2.25rem 2.25rem; }
.pcard-name { font-size: 3.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-driver { margin-top: .6rem; font-size: 1.8rem; color: var(--text-dim); }
.pcard-driver b { color: var(--kart); font-weight: 700; }

.pcard.is-empty {
  background: rgba(255, 255, 255, .04);
  border: 2px dashed rgba(213, 224, 253, .35);
  box-shadow: none; align-items: center; justify-content: center; gap: 1.6rem; text-align: center; padding: 2rem;
  animation: card-in .8s var(--ease-spring) both, wait-pulse 2.4s ease-in-out infinite 1s;
}
@keyframes wait-pulse { 50% { border-color: rgba(112, 250, 216, .75); } }
.pcard.is-empty .qr-inner { width: 17rem; height: 17rem; border-radius: 1.4rem; padding: .9rem; }
.pcard-wait { font-size: 2.3rem; font-weight: 700; line-height: 1.15; }
.pcard-wait span { display: block; color: var(--mint); }
.pcard-url { font-size: 1.2rem; color: var(--text-faint); }

.lobby-centre { display: grid; place-items: center; }
.ring { position: relative; width: 24rem; height: 24rem; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 10; }
.ring-fill { fill: none; stroke: var(--mint); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 552.92; stroke-dashoffset: 0; transition: stroke .4s; filter: drop-shadow(0 0 .6rem rgba(112, 250, 216, .6)); }
.ring.is-urgent .ring-fill { stroke: var(--lime); }
.ring-inner { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-num { font-size: 8.5rem; font-weight: 700; letter-spacing: -0.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.ring-label { font-size: 1.5rem; color: var(--text-dim); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-top: .6rem; }
.ring.is-vs .ring-fill { stroke: var(--lime); stroke-dashoffset: 0 !important; animation: vs-glow 1.4s ease-in-out infinite; }
.ring.is-vs .ring-num { color: var(--lime); }
@keyframes vs-glow { 50% { filter: drop-shadow(0 0 1.6rem rgba(220, 243, 108, .9)); } }

/* Track choice: the lobby makes room for two big panels under the grid (cards, ring and QR shrink a little). */
#screen-lobby .lobby-title { margin-top: .9rem; font-size: 4.4rem; }
#screen-lobby .lobby-row { min-height: 0; }
#screen-lobby .pcard { width: 33rem; height: 28.5rem; }
#screen-lobby .pcard-kart { padding: 3.6rem 3rem 0; }
#screen-lobby .pcard-kart svg { width: 88%; }
#screen-lobby .pcard-body { padding: 0 2.25rem 1.9rem; }
#screen-lobby .pcard-name { font-size: 3.2rem; }
#screen-lobby .pcard.is-empty { gap: 1.1rem; padding: 1.5rem; }
#screen-lobby .pcard.is-empty .qr-inner { width: 14.5rem; height: 14.5rem; }
#screen-lobby .pcard-wait { font-size: 2.1rem; }
#screen-lobby .ring { width: 20rem; height: 20rem; }
#screen-lobby .ring-num { font-size: 7.2rem; }
#screen-lobby .lobby-foot { font-size: 1.9rem; min-height: 2.6rem; }

.lobby-tracks { margin: 1.4rem 0 1rem; padding: 0 2rem; }
.lobby-tracks-hint { text-align: center; font-size: 1.9rem; font-weight: 600; color: var(--text-dim); margin-bottom: 1rem; }
.lobby-tracks-hint::before { content: ''; display: inline-block; width: 1.1rem; height: 1.9rem; margin-right: .8rem; vertical-align: -.3rem; border: .22rem solid var(--mint); border-radius: .35rem; }
.track-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.track-panel {
  position: relative; display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); gap: 2.4rem; align-items: center;
  padding: 1.5rem 2.6rem 1.5rem 2rem; border-radius: 2rem;
  background: rgba(255, 255, 255, .04); border: 3px solid rgba(213, 224, 253, .16);
  opacity: .55; filter: saturate(.6); transform: scale(.965);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-spring), border-color .3s, background .3s, box-shadow .3s, filter .45s;
}
.track-panel.is-on {
  opacity: 1; filter: none; transform: none;
  background: linear-gradient(120deg, rgba(112, 250, 216, .16), rgba(13, 39, 245, .14));
  border-color: var(--mint);
  box-shadow: 0 0 4.5rem rgba(112, 250, 216, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.track-panel.is-on.bump { animation: track-pop .6s var(--ease-spring); }
@keyframes track-pop { 0% { transform: scale(.94); } 60% { transform: scale(1.025); } 100% { transform: none; } }
.tp-art { height: 13.5rem; display: grid; place-items: center; }
.tp-art svg { width: 100%; height: 100%; filter: drop-shadow(0 .8rem 1.4rem rgba(0, 0, 0, .45)); }
.tp-text { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.tp-level {
  align-self: flex-start; font-size: 1.5rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: .35rem 1rem; border-radius: .6rem; color: var(--ink); background: var(--mint);
}
.track-panel[data-track="hard"] .tp-level { background: var(--lime); }
.tp-name { font-size: 3.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.tp-blurb { font-size: 1.6rem; line-height: 1.3; color: var(--text-dim); }
.tp-tick {
  position: absolute; top: 1.2rem; right: 1.4rem; font-size: 1.25rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); background: var(--mint); padding: .35rem .9rem; border-radius: 99rem; opacity: 0; transform: scale(.8);
  transition: opacity .3s, transform .4s var(--ease-spring);
}
.track-panel.is-on .tp-tick { opacity: 1; transform: none; }
.keyhints b { color: var(--light); }

/* ---------- Race HUD ---------- */

.hud { position: absolute; inset: 0; }
.hud-view { position: absolute; top: 0; bottom: 0; padding: 2.5rem 3rem; }
.hud-view.is-left { left: 0; width: 50%; }
.hud-view.is-right { right: 0; width: 50%; }
.hud-view.is-full { left: 0; right: 0; }
.hud.is-split::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - 2px); width: 4px; background: linear-gradient(180deg, var(--mint), var(--blue), var(--lime)); box-shadow: 0 0 1.5rem rgba(13, 39, 245, .8); }

.hud-tl, .hud-tr, .hud-bl, .hud-br, .hud-tc { position: absolute; }
.hud-tl { top: 2.25rem; left: 2.75rem; }
.hud-tr { top: 2.25rem; right: 2.75rem; text-align: right; }
.hud-bl { bottom: 2.5rem; left: 2.75rem; }
.hud-br { bottom: 2.5rem; right: 2.75rem; }
.hud-tc { top: 2.4rem; left: 50%; transform: translateX(-50%); }

.hud-chip { background: rgba(10, 11, 30, .55); border: 1px solid rgba(255,255,255,.14); border-radius: 1.4rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.hud-pos { display: flex; align-items: flex-start; line-height: .82; text-shadow: 0 .4rem 1.6rem rgba(0,0,0,.6); -webkit-text-stroke: 2px rgba(10, 11, 30, .55); paint-order: stroke fill; }
.hud-pos b { font-size: 11rem; font-weight: 700; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.hud-pos sup { font-size: 4rem; font-weight: 700; margin: .6rem 0 0 .35rem; letter-spacing: -0.02em; }
.hud-pos[data-pos="1"] { color: var(--lime); }
.hud-pos[data-pos="2"] { color: var(--mint); }
.hud-of { margin-top: .6rem; font-size: 1.5rem; font-weight: 600; color: var(--text-dim); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 .2rem .8rem rgba(0,0,0,.7); }

.hud-lap { padding: 1rem 1.5rem; }
.hud-lap small { display: block; font-size: 1.3rem; font-weight: 700; letter-spacing: .14em; color: var(--text-dim); text-transform: uppercase; }
.hud-lap b { font-size: 4.6rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.hud-lap b span { color: var(--text-faint); font-size: .62em; }
.hud-lap.is-final { border-color: var(--lime); box-shadow: 0 0 2rem rgba(220, 243, 108, .4); }
.hud-lap.is-final small { color: var(--lime); }

.hud-name { display: flex; align-items: center; gap: .8rem; padding: .55rem 1.2rem .55rem .7rem; font-size: 1.7rem; font-weight: 700; white-space: nowrap; }
.hud-name i { width: 1.6rem; height: 1.6rem; border-radius: .5rem; background: var(--kart); box-shadow: 0 0 1rem var(--kart); }

.hud-coins { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.6rem .9rem 1rem; }
.hud-coins .coin { width: 4rem; height: 4rem; }
.hud-coins b { font-size: 4.2rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1; }
.hud-coins small { display: block; font-size: 1.2rem; font-weight: 700; color: var(--text-dim); letter-spacing: .12em; text-transform: uppercase; }
.hud-plus { position: absolute; left: 4rem; top: -1rem; font-size: 2.4rem; font-weight: 700; color: var(--lime); animation: plus-up .9s var(--ease-out) forwards; pointer-events: none; text-shadow: 0 .2rem 1rem rgba(0,0,0,.6); }
@keyframes plus-up { from { opacity: 1; transform: translateY(0) scale(.8); } to { opacity: 0; transform: translateY(-4rem) scale(1.2); } }

.hud-item { display: flex; align-items: center; gap: 1.2rem; padding: .9rem 1.5rem .9rem .9rem; }
.hud-item .slot { width: 6.4rem; height: 6.4rem; border-radius: 1.2rem; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 2px dashed rgba(255,255,255,.22); color: var(--text-faint); }
.hud-item .slot svg { width: 3.8rem; height: 3.8rem; }
.hud-item.has-item .slot { border: 2px solid var(--mint); background: linear-gradient(160deg, rgba(112, 250, 216, .3), rgba(13, 39, 245, .45)); color: var(--white); box-shadow: 0 0 2rem rgba(112, 250, 216, .45); }
.hud-item b { display: block; font-size: 2.2rem; font-weight: 700; line-height: 1.05; }
.hud-item small { display: block; font-size: 1.25rem; color: var(--text-dim); font-weight: 600; margin-top: .2rem; }
.hud-item:not(.has-item) b { color: var(--text-faint); font-size: 1.7rem; }

.bump { animation: bump .45s var(--ease-spring); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 100% { transform: scale(1); } }

.hud-banner {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  font-size: 6.5rem; font-weight: 700; letter-spacing: -0.04em; white-space: nowrap;
  color: var(--white); text-shadow: 0 .5rem 2.5rem rgba(0,0,0,.6);
  pointer-events: none; opacity: 0;
}
.hud-banner.is-on { animation: banner 1.8s var(--ease-out) forwards; }
.hud-banner.tone-lime { color: var(--lime); }
.hud-banner.tone-mint { color: var(--mint); }
.hud-banner.tone-danger { color: var(--danger); }
@keyframes banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  25% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(1); }
}

.hud-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.hud-flash.hit { background: radial-gradient(ellipse at center, transparent 45%, rgba(255, 60, 90, .55) 100%); animation: flash .6s ease-out; }
.hud-flash.boost { background: radial-gradient(ellipse at center, transparent 50%, rgba(112, 250, 216, .45) 100%); animation: flash .8s ease-out; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }
.hud-view.shake { animation: shake .45s linear; }
@keyframes shake { 20% { transform: translate(-.8rem, .3rem); } 40% { transform: translate(.7rem, -.4rem); } 60% { transform: translate(-.5rem, .2rem); } 80% { transform: translate(.3rem, 0); } }

.hud-finish {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: .5rem;
  background: radial-gradient(ellipse at center, rgba(8, 10, 32, .72) 0%, rgba(8, 10, 32, .2) 70%);
  opacity: 0; transition: opacity .5s; pointer-events: none;
}
.hud-view.is-finished .hud-finish { opacity: 1; }
.hud-finish small { font-size: 2rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--mint); }
.hud-finish b { font-size: 13rem; font-weight: 700; letter-spacing: -0.06em; line-height: .9; color: var(--lime); }
.hud-finish b sup { font-size: .35em; vertical-align: top; position: relative; top: .3em; }
.hud-finish span { font-size: 2rem; color: var(--text-dim); }
.hud-view.is-finished .hud-finish b { animation: card-in .9s var(--ease-spring) both; }

.race-clock {
  position: absolute; left: 50%; bottom: 2.5rem; transform: translateX(-50%);
  font-size: 2.2rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em;
  padding: .5rem 1.3rem; border-radius: 1rem; background: rgba(10, 11, 30, .6); border: 1px solid rgba(255,255,255,.14);
  opacity: 0; transition: opacity .4s;
}
.race-clock.is-on { opacity: 1; }
.hud.is-split ~ .race-clock { bottom: 4rem; }

/* Countdown */
.countdown { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.cd-intro { text-align: center; animation: card-in .7s var(--ease-out) both; }
.cd-intro small { display: block; font-size: 2rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--mint); }
.cd-intro b { display: block; font-size: 7.5rem; font-weight: 700; letter-spacing: -0.04em; margin-top: .5rem; text-shadow: 0 .5rem 3rem rgba(0,0,0,.6); }
.cd-intro span { display: block; font-size: 2.2rem; color: var(--text-dim); margin-top: .8rem; }
.cd-num {
  font-size: 30rem; font-weight: 700; letter-spacing: -0.06em; line-height: 1;
  color: var(--white); text-shadow: 0 1rem 5rem rgba(0,0,0,.55);
  -webkit-text-stroke: .35rem rgba(10, 11, 30, .4); paint-order: stroke fill;
  animation: cd-pop 1s var(--ease-out) forwards;
}
.cd-num.is-go { color: var(--lime); font-size: 26rem; animation: cd-go 1.1s var(--ease-out) forwards; }
@keyframes cd-pop { 0% { transform: scale(1.8); opacity: 0; } 18% { transform: scale(1); opacity: 1; } 75% { opacity: 1; } 100% { transform: scale(.82); opacity: 0; } }
@keyframes cd-go { 0% { transform: scale(.5); opacity: 0; } 20% { transform: scale(1.08); opacity: 1; } 60% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.cd-ring { position: absolute; width: 34rem; height: 34rem; border-radius: 50%; border: .5rem solid var(--mint); animation: cd-ring 1s var(--ease-out) forwards; }
.cd-ring.is-go { border-color: var(--lime); }
@keyframes cd-ring { from { transform: scale(.5); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }

/* ---------- Results ---------- */

.results-layout { position: absolute; inset: 3.25rem 4rem 3.5rem; display: flex; flex-direction: column; }
.results-phase { position: absolute; inset: 6.5rem 0 0; display: flex; flex-direction: column; align-items: center; opacity: 0; visibility: hidden; transition: opacity .8s var(--ease-out), visibility 0s .8s, transform .8s var(--ease-out); transform: translateY(2rem); }
.results-phase.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .8s var(--ease-out), visibility 0s, transform .8s var(--ease-out); }
.results-title { font-size: 5rem; font-weight: 700; letter-spacing: -0.04em; text-align: center; }
.results-title span { color: var(--text-faint); font-weight: 500; font-size: .5em; letter-spacing: 0; margin-left: 1rem; vertical-align: .35em; }

.podium { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 5rem; width: 100%; }
.pod { display: flex; flex-direction: column; align-items: center; width: 40rem; animation: card-in .9s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 180ms); }
.rcard {
  width: 100%; border-radius: 2rem 2rem 0 0; padding: 2rem 2.25rem 2rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--kart) 30%, #14163e) 0%, #14163e 55%);
  border: 2px solid color-mix(in srgb, var(--kart) 65%, transparent); border-bottom: 0;
  box-shadow: 0 0 5rem color-mix(in srgb, var(--kart) 25%, transparent);
}
.rcard-top { display: flex; justify-content: space-between; align-items: center; font-size: 1.3rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.rcard-top .tag { color: var(--ink); background: var(--kart); padding: .35rem .8rem; border-radius: .6rem; }
.rcard-name { margin-top: 1rem; font-size: 3.4rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breakdown { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .3rem; }
.breakdown > div { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.75rem; padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.08); opacity: 0; animation: row-in .5s var(--ease-out) forwards; }
.breakdown dt { color: var(--text-dim); font-weight: 500; }
.breakdown dt em { font-style: normal; color: var(--text-faint); margin-left: .6rem; font-size: .85em; }
.breakdown dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.breakdown .total { border-bottom: 0; padding-top: 1rem; }
.breakdown .total dt { color: var(--light); font-weight: 700; font-size: 2rem; align-self: center; }
.breakdown .total dd { font-size: 5.4rem; color: var(--lime); letter-spacing: -0.04em; line-height: 1; }
.rcard-rank { margin-top: 1rem; display: flex; align-items: center; gap: 1rem; font-size: 2.3rem; font-weight: 700; min-height: 3.2rem; opacity: 0; animation: row-in .5s var(--ease-out) forwards; }
.rcard-rank .badge { font-size: 1.3rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--lime); padding: .4rem .9rem; border-radius: .6rem; animation: chip-pulse 1.6s ease-in-out infinite; }
.rcard-note { margin-top: .6rem; font-size: 1.45rem; color: var(--mint); font-weight: 600; opacity: 0; animation: row-in .5s var(--ease-out) forwards; }
.rcard-note.is-dim { color: var(--text-faint); }
.pedestal {
  width: 100%; display: grid; place-items: center; border-radius: 0 0 1.2rem 1.2rem;
  background: linear-gradient(180deg, var(--kart), color-mix(in srgb, var(--kart) 55%, #0a0b1e));
  color: var(--ink); font-weight: 700; font-size: 5.5rem; letter-spacing: -0.04em; line-height: 1;
  box-shadow: 0 2rem 4rem rgba(0,0,0,.4);
}
.pedestal sup { font-size: .45em; vertical-align: top; position: relative; top: .2em; margin-left: .1em; }

.results-board .board-wide { width: 72rem; margin-top: 2.5rem; padding: 2rem 2.25rem; flex: none; }
.board-wide .board-row { font-size: 2rem; padding: .7rem 1.2rem; grid-template-columns: 4rem 1.3rem minmax(0, 1fr) auto; }

/* ---------- Operator chrome ---------- */

#chrome { position: fixed; inset: 0; z-index: 50; pointer-events: none; }

.net { position: absolute; left: 1.4rem; bottom: 1.1rem; display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; font-weight: 600; color: var(--text-faint); opacity: .75; }
.net i { width: .85rem; height: .85rem; border-radius: 50%; background: var(--caution); box-shadow: 0 0 .6rem currentColor; }
.net[data-state="online"] i { background: var(--mint); }
.net[data-state="online"] span { display: none; }
.net[data-state="connecting"] i { background: var(--caution); animation: blink 1s steps(2) infinite; }
.net[data-state="offline"] i { background: var(--danger); }
.net[data-state="local"] i { background: var(--mid); }
@keyframes blink { 50% { opacity: .25; } }

kbd { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .45rem; border-radius: .45rem; border: 1px solid rgba(255,255,255,.3); border-bottom-width: 2px; font: 700 1rem var(--font); color: var(--light); margin-right: .25rem; }
.keyhints, .race-keys { position: absolute; right: 1.6rem; bottom: 1.1rem; display: flex; gap: 1.6rem; font-size: 1.05rem; font-weight: 600; color: var(--text-faint); opacity: 0; transition: opacity .5s; }
body[data-screen="attract"] .keyhints { opacity: .6; }
body[data-screen="race"] .race-keys { opacity: .35; }

.sound-hint {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
  font-size: 1.2rem; font-weight: 600; color: var(--light);
  padding: .55rem 1.2rem; border-radius: 99rem; background: rgba(13, 39, 245, .55); border: 1px solid rgba(255,255,255,.2);
  opacity: 0; transition: opacity .6s;
}
.sound-hint.is-on { opacity: .85; animation: hint-pulse 3s ease-in-out infinite; }
@keyframes hint-pulse { 50% { opacity: .55; } }

.muted-flag { position: absolute; top: 1.2rem; right: 1.4rem; font-size: 1.05rem; font-weight: 600; color: var(--text-faint); display: flex; align-items: center; gap: .5rem; }
.muted-flag[hidden] { display: none; }

.engine-alert {
  position: absolute; top: 1.2rem; left: 50%; transform: translateX(-50%); max-width: 70rem;
  font-size: 1.3rem; font-weight: 600; line-height: 1.35; color: var(--white);
  background: rgba(120, 18, 38, .88); border: 1px solid rgba(255, 90, 110, .7);
  padding: .9rem 1.4rem; border-radius: 1rem; text-align: center;
}
.engine-alert[hidden] { display: none; }
.engine-alert code { font-family: ui-monospace, Menlo, monospace; font-size: .9em; opacity: .85; }
body[data-screen="race"] .engine-alert, body[data-screen="results"] .engine-alert { display: none; }

.toast {
  position: absolute; left: 50%; top: 1.4rem; transform: translate(-50%, -150%);
  font-size: 1.5rem; font-weight: 600; padding: .8rem 1.4rem; border-radius: 1rem;
  background: rgba(10, 11, 30, .9); border: 1px solid var(--glass-line);
  transition: transform .45s var(--ease-out);
}
.toast.is-on { transform: translate(-50%, 0); }
.toast.is-error { border-color: rgba(255, 90, 110, .8); }

.fatal { position: fixed; inset: 0; display: grid; place-items: center; font-size: 2rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- ARCA additions: Beat the booth, Sector Cup, pause ---------- */

.board-col { grid-area: board; display: flex; flex-direction: column; gap: 1.25rem; min-height: 0; }
.board-col .board { flex: 1; }
.btb {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem 1.75rem; border-radius: 1.5rem;
  background: linear-gradient(110deg, rgba(220, 243, 108, .22), rgba(220, 243, 108, .06));
  border: 2px solid rgba(220, 243, 108, .7);
  box-shadow: 0 0 3rem rgba(220, 243, 108, .18);
}
.btb-label { font-size: 1.5rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.btb-score { font-size: 4.2rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--white); }
.btb-score.bump { color: var(--lime); }

.sector-row { grid-template-columns: 3rem minmax(0, 1fr) auto; }
.sector-row .board-name small { display: block; font-size: .72em; font-weight: 500; color: var(--text-faint); margin-top: .1rem; }
.sector-bar { grid-column: 2 / 4; height: .4rem; border-radius: 1rem; background: rgba(255,255,255,.07); overflow: hidden; margin-top: .3rem; }
.sector-bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--lime)); animation: grow 1.1s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 200ms); }
@keyframes grow { from { width: 0; } }

.scrim-pause { background: radial-gradient(90rem 60rem at 50% 40%, rgba(13, 39, 245, .55), transparent 70%), linear-gradient(180deg, rgba(8, 10, 32, .82), rgba(8, 10, 32, .95)); }
.pause { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 2rem; }
.pause-mark { width: 10rem; height: 10rem; border-radius: 2.75rem; display: grid; place-items: center; background: rgba(255,255,255,.07); border: 1px solid var(--glass-line); animation: breathe 3s ease-in-out infinite; }
.pause-mark img { width: 6.5rem; }
.pause-line { font-size: 7rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.pause-sub { font-size: 2.6rem; font-weight: 600; color: var(--mint); letter-spacing: .02em; }

.rcard-rank .badge.is-btb { background: var(--mint); }
.board-tab { white-space: nowrap; }
.board-heading { font-size: 1.5rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 .9rem .3rem; }

/* ?static: freeze transitions so screenshots taken from a background tab show settled screens. */
html.static *, html.static *::before, html.static *::after { transition: none !important; animation-delay: 0s !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }

/* Results sizing: keep podium + pedestals inside 1080p. */
.results-phase { inset: 5.5rem 0 0; }
.results-title { font-size: 4.4rem; }
.podium { min-height: 0; padding-top: 1.5rem; }
.rcard { padding: 1.5rem 2rem 1.4rem; }
.rcard-name { margin-top: .6rem; font-size: 3rem; }
.breakdown { margin-top: 1rem; gap: 0; }
.breakdown > div { font-size: 1.55rem; padding: .4rem 0; }
.breakdown .total { padding-top: .7rem; }
.breakdown .total dd { font-size: 4.6rem; }
.rcard-rank { margin-top: .5rem; font-size: 2rem; min-height: 2.8rem; }
.rcard-note { margin-top: .3rem; font-size: 1.35rem; }
.pedestal { font-size: 4.4rem; }
.results-board .board-wide { align-self: center; }
.pedestal { display: flex; align-items: center; justify-content: center; }
.results-board .board-wide { margin-top: 1.5rem; padding: 1.4rem 1.75rem; }
.board-wide .board-list { gap: .25rem; }
.board-wide .board-row { font-size: 1.8rem; padding: .5rem 1.2rem; }
.race-clock { bottom: auto; top: 7.2rem; font-size: 1.9rem; }
.hud.is-split ~ .race-clock { top: auto; bottom: 4rem; }
.countdown > * { grid-area: 1 / 1; }

/* Queue, lobby Beat-the-booth chip, pause logo */
.queue-chip { align-self: flex-start; margin-top: .4rem; font-size: 1.6rem; font-weight: 700; color: var(--ink); background: var(--mint); padding: .45rem 1.1rem; border-radius: 99rem; animation: chip-pulse 2.4s ease-in-out infinite; }
.queue-chip[hidden] { display: none; }
.btb-chip { margin-left: auto; font-size: 1.4rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); padding: .5rem 1.2rem; border-radius: 99rem; border: 2px solid rgba(220, 243, 108, .6); background: rgba(220, 243, 108, .08); }
.btb-chip b { color: var(--white); letter-spacing: 0; font-size: 1.15em; margin-left: .4rem; font-variant-numeric: tabular-nums; }
.btb-chip[hidden] { display: none; }
.pause-logo { height: 7rem; margin-bottom: 1.5rem; }

/* Countdown grid intro: the CPU rivals with their lines */
.countdown { grid-template-rows: 1fr auto; }
.cd-stage { grid-area: 1 / 1; display: grid; place-items: center; }
.cd-stage > * { grid-area: 1 / 1; }
.countdown > .cd-grid { grid-area: 2 / 1; }
.cd-grid { margin: 0 auto 13rem; text-align: center; transition: opacity .5s, transform .5s var(--ease-out); }
.cd-grid.is-out { opacity: 0; transform: translateY(2rem); }
.cd-grid-title { font-size: 1.4rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 1rem; text-shadow: 0 .2rem 1rem rgba(0,0,0,.8); }
.cd-grid ul { list-style: none; display: flex; gap: 1.2rem; justify-content: center; }
.cd-grid li {
  width: 24rem; display: flex; gap: 1rem; align-items: flex-start; text-align: left;
  padding: 1rem 1.2rem; border-radius: 1.2rem; background: rgba(10, 11, 30, .72); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: card-in .7s var(--ease-spring) both; animation-delay: calc(var(--i) * 120ms + 200ms);
}
.cd-grid li i { flex: none; width: 1.4rem; height: 3.6rem; border-radius: .5rem; background: var(--kart); }
.cd-grid li b { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1.15; }
.cd-grid li span { display: block; font-size: 1.3rem; color: var(--text-dim); line-height: 1.3; margin-top: .2rem; }
.hud.is-split ~ .countdown .cd-grid li { width: 21rem; }
.pcard-tag, .rcard-top .tag, .pedestal { color: var(--on-kart, var(--ink)); }
.hud-wrongway { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-size: 5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); background: var(--lime); padding: .6rem 2rem; border-radius: 1.2rem; opacity: 0; transition: opacity .3s; pointer-events: none; white-space: nowrap; }
.hud-view.is-wrong-way .hud-wrongway { opacity: 1; animation: ww-pulse 1s ease-in-out infinite; }
@keyframes ww-pulse { 50% { opacity: .55; } }
@keyframes chip-pulse { 50% { transform: scale(1.05); } }

/* Fact-find checklist (above the coins), document pop, completion banner */
.hud-bl { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.hud-bl .hud-coins { position: relative; } /* keeps the +N coin pop on the coins chip */
.hud-docs { position: relative; padding: .8rem 1.1rem .9rem; min-width: 19rem; transition: border-color .4s, box-shadow .4s; }
.hud-docs-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; font-size: 1.2rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: .45rem; }
.hud-docs-head b { font-size: 1.6rem; color: var(--white); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.hud-docs ul { list-style: none; display: flex; flex-direction: column; gap: .3rem; }
.hud-docs li { display: flex; align-items: center; gap: .7rem; font-size: 1.6rem; font-weight: 600; color: var(--text-faint); transition: color .3s; }
.hud-docs li i { flex: none; width: 2.1rem; height: 2.1rem; border-radius: .55rem; display: grid; place-items: center; border: 2px solid var(--doc); background: rgba(255,255,255,.04); color: transparent; outline: 1px solid rgba(255,255,255,.22); transition: background .25s, color .25s; }
.hud-docs li i svg { width: 1.45rem; height: 1.45rem; }
.hud-docs li.is-have { color: var(--white); }
.hud-docs li.is-have i { background: var(--doc); color: var(--on-doc); box-shadow: 0 0 1rem var(--doc); }
.hud-docs li.is-lost { animation: shake .45s linear; }
.hud-docs li.is-lost span { color: var(--danger); }
.hud-docs.is-done { border-color: var(--lime); box-shadow: 0 0 2.2rem rgba(220, 243, 108, .45); }
.hud-docs.is-done .hud-docs-head span { color: var(--lime); }
.hud-docpop {
  position: absolute; left: 1rem; bottom: 100%; margin-bottom: .6rem; display: flex; align-items: center; gap: .5rem; white-space: nowrap;
  font-size: 2rem; font-weight: 700; color: var(--on-doc); background: var(--doc); padding: .35rem 1rem .35rem .6rem; border-radius: 99rem;
  box-shadow: 0 .4rem 1.6rem rgba(0,0,0,.45); animation: doc-pop 1.3s var(--ease-out) forwards; pointer-events: none;
}
.hud-docpop i { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; }
.hud-docpop i svg { width: 100%; height: 100%; }
@keyframes doc-pop { 0% { opacity: 0; transform: translateY(1rem) scale(.7); } 15% { opacity: 1; transform: translateY(0) scale(1.08); } 25% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-2.5rem); } }
.hud-banner.tone-file {
  color: var(--ink); background: linear-gradient(90deg, var(--mint), var(--lime)); padding: .4rem 2.4rem .6rem; border-radius: 99rem;
  text-shadow: none; box-shadow: 0 .6rem 3rem rgba(112, 250, 216, .55); font-size: 5.6rem;
}
.hud-banner.tone-file.is-on { animation-duration: 2.6s; }
.hud-view.is-left .hud-banner.tone-file, .hud-view.is-right .hud-banner.tone-file { font-size: 4.2rem; }
.breakdown > div.is-file dt { color: var(--lime); font-weight: 700; }
.breakdown > div.is-file dd { color: var(--lime); }

/* Claimed kart number next to the name chip. */
.hud-num { color: var(--kart); filter: brightness(1.25); margin-left: -.3rem; }

/* Cloud mode: one-time display key prompt (operator only). */
.keygate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(26, 27, 45, .92); color: #fff; font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.keygate form { display: flex; flex-direction: column; gap: 12px; width: min(420px, calc(100vw - 32px)); }
.keygate h2 { margin: 0; font-size: 1.6rem; }
.keygate p { margin: 0; color: #D5E0FD; line-height: 1.4; }
.keygate input { font: inherit; font-size: 1.2rem; padding: 12px 14px; border-radius: 12px; border: 2px solid #D5E0FD; background: #fff; color: #1A1B2D; }
.keygate button { font: inherit; font-weight: 700; padding: 12px 14px; border-radius: 12px; border: 0; background: #0D27F5; color: #fff; cursor: pointer; }
.keygate .err { color: #FF9AA8; min-height: 1.2em; }

/* minimap: the circuit drawn as the Connect chain-link mark, a dot per kart */
.hud-map { position: absolute; right: 2.75rem; bottom: 13rem; width: 17rem; height: 17rem; padding: 0; border-radius: 1.6rem; pointer-events: none; }