/* ═══ Skyfall UI — CEL PLATES design system ══════════════════════════════════
   One language everywhere: chamfered ink plates cut with clip-path, hard
   offset shadows (filter: drop-shadow so the chamfer keeps them), skewed
   accent ribbons, Anton display type, slam-in motion. Sections:
     1. tokens & reset          5. HUD chrome (boards, feed)
     2. overlays & primitives   6. combat reticles & alerts
     3. start page              7. bottom bar & stats
     4. death card              8. stage flow (title, clock, ceremony)
                                9. touch & small screens                    */

@font-face {
  font-family: 'Anton';
  src: url('../fonts/anton.woff2') format('woff2');
  font-display: swap;
}

:root {
  --cyan: #7fd6ff;
  --gold: #ffc857;
  --danger: #ff5a5a;
  --text: #eaf4fa;
  --ink: #0a141d;
  --plate: linear-gradient(178deg, #17293c, #0b1826 65%);
  --plate-line: inset 0 0 0 2px rgba(127, 214, 255, 0.22), inset 0 2px 0 rgba(255, 255, 255, 0.1);
  --gold-grad: linear-gradient(135deg, #ffc857, #ff9d3c 60%, #ffb84d);
  --display: 'Anton', system-ui, sans-serif;
  --font: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  color: var(--text);
  background: #0a2233;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
input { user-select: text; -webkit-user-select: text; touch-action: auto; }

#gl, #gl canvas { position: fixed; inset: 0; display: block; }

.hidden { display: none !important; }

/* ── 2. Overlays & shared primitives ─────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 30;
}
.overlay.dim { background: rgba(4, 12, 20, 0.55); backdrop-filter: blur(3px); }

@keyframes cardSlam {
  0% { opacity: 0; transform: translateY(34px) scale(0.92) skewX(-3deg); }
  55% { opacity: 1; transform: translateY(-6px) scale(1.03) skewX(1deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes burstSpin { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes blink { 50% { opacity: 0.25; } }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Hero plates: the menu card and the death card's plate share the treatment.
   Hard offset shadows always ride a drop-shadow FILTER — an outer box-shadow
   would be cut away by the chamfer clip-path. */
.menuCard, .dcPlate {
  position: relative;
  background: var(--plate);
  box-shadow: var(--plate-line);
  clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px);
}
.menuCard {
  animation: cardSlam 0.4s cubic-bezier(0.2, 1.2, 0.35, 1);
  filter: drop-shadow(14px 14px 0 rgba(3, 8, 13, 0.55));
}
/* Screen-texture scanlines over every hero plate */
.menuCard::after, .dcPlate::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg,
    rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 4px);
  pointer-events: none;
  z-index: 5;
}
/* Signal edge along the top of the plate */
.menuCard::before, .dcPlate::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, transparent, rgba(127, 214, 255, 0.85) 30%,
    rgba(127, 214, 255, 0.85) 70%, transparent);
  z-index: 4;
}
.dcPlate::before {
  background: linear-gradient(90deg, transparent, rgba(255, 90, 90, 0.85) 30%,
    rgba(255, 90, 90, 0.85) 70%, transparent);
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  border-radius: 0;
  font-weight: 800;
  letter-spacing: 2px;
}
#playBtn, #respawnBtn {
  position: relative;
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 4px;
  color: #04121d;
  background: linear-gradient(180deg, #6fd0ff, #1f8fd6);
  padding: 14px 44px;
  transform: skewX(-6deg);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45);
  filter: drop-shadow(6px 6px 0 rgba(3, 8, 13, 0.5));
  transition: transform 0.12s ease, filter 0.12s ease;
  overflow: hidden;
}
#playBtn::after, #respawnBtn::after {
  content: '';
  position: absolute; top: -20%; bottom: -20%; width: 34px;
  left: -60px;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  animation: btnSheen 2.8s ease-in-out infinite;
}
@keyframes btnSheen {
  0%, 55% { left: -60px; }
  85%, 100% { left: calc(100% + 30px); }
}
#playBtn:hover, #respawnBtn:hover {
  transform: skewX(-6deg) translateY(-2px);
  filter: drop-shadow(8px 8px 0 rgba(3, 8, 13, 0.5)) brightness(1.08);
}
#playBtn:active, #respawnBtn:active {
  transform: skewX(-6deg) translateY(1px) scale(0.98);
  filter: drop-shadow(3px 3px 0 rgba(3, 8, 13, 0.5));
}
/* FLY is locked until a callsign is entered. */
#playBtn:disabled, #playBtn:disabled:hover {
  cursor: not-allowed;
  transform: skewX(-6deg);
  filter: grayscale(0.8) brightness(0.6) drop-shadow(4px 4px 0 rgba(3, 8, 13, 0.5));
}
#playBtn:disabled::after { display: none; } /* stop the sheen sweep while locked */

.kbd {
  background: rgba(255, 255, 255, 0.2); border-radius: 4px;
  padding: 2px 8px; font-size: 13px; margin-left: 10px; letter-spacing: 1px;
  font-family: var(--font); font-weight: 800;
}
body.touch .kbd { display: none; }

/* ── 3. Start page ───────────────────────────────────────────────────────── */
#menu {
  background: radial-gradient(ellipse at 50% 38%,
    rgba(5, 13, 22, 0.12), rgba(4, 10, 18, 0.66) 84%);
  overflow-y: auto;
  padding: 28px 0;
}

/* Backdrop scene: drifting toon clouds and a contrailing flyby jet */
.menuScene {
  position: fixed; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.msCloud { position: absolute; color: rgba(255, 255, 255, 0.075); }
.msCloud svg { display: block; width: 100%; height: auto; }
.msCloud.c1 { top: 9%; width: 480px; animation: cloudDrift 95s linear infinite; animation-delay: -30s; }
.msCloud.c2 { top: 66%; width: 360px; color: rgba(255, 255, 255, 0.055); animation: cloudDrift 140s linear infinite; animation-delay: -95s; }
@keyframes cloudDrift {
  from { transform: translateX(-36vw); }
  to { transform: translateX(112vw); }
}
.msFlyby {
  position: absolute; top: 18%;
  display: flex; align-items: center;
  transform-origin: left center;
  animation: flyby 27s linear infinite;
  animation-delay: -9s;
}
.msTrail {
  width: 24vw; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55));
  margin-right: -4px;
}
.msJet { width: 24px; color: rgba(234, 244, 250, 0.9); transform: rotate(90deg); }
@keyframes flyby {
  from { transform: translate(-32vw, 3vh) rotate(-4deg); }
  to { transform: translate(114vw, -4vh) rotate(-4deg); }
}

/* The hangar card: action column left, hall of aces right */
.menuCard {
  display: flex;
  align-items: stretch;
  width: min(1080px, 94vw);
  text-align: left;
  z-index: 1;
  margin: auto;
}
.mcLeft {
  position: relative;
  flex: 1.25;
  min-width: 0;
  padding: 44px 48px 34px;
  overflow: hidden;
}
.mcRight {
  position: relative;
  flex: 0 0 350px;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 22px;
  background: rgba(6, 14, 22, 0.55);
  border-left: 2px solid rgba(127, 214, 255, 0.14);
}

/* Sunburst glowing behind the wordmark */
.mcBurst {
  position: absolute;
  top: -70px; left: 50%;
  width: 720px; height: 380px;
  transform: translateX(-50%);
  background: repeating-conic-gradient(from 0deg at 50% 40%,
    rgba(127, 214, 255, 0.07) 0deg 5deg, transparent 5deg 16deg);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 0%, transparent 66%);
  mask-image: radial-gradient(ellipse at 50% 40%, black 0%, transparent 66%);
  animation: burstSpin 26s linear infinite;
  pointer-events: none;
}

.logoBlock { position: relative; }
.logoJet {
  position: absolute;
  top: -18px; right: 4px;
  width: 76px;
  color: var(--cyan);
  filter: drop-shadow(4px 4px 0 rgba(3, 8, 13, 0.45));
  animation: jetFloat 3.6s ease-in-out infinite alternate;
}
@keyframes jetFloat {
  from { transform: translate(0, 0); }
  to { transform: translate(6px, -8px); }
}
/* Contrail sweeping back off the logo jet */
.logoBlock::before {
  content: '';
  position: absolute;
  top: 34px; right: 66px;
  width: 180px; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(127, 214, 255, 0.5));
  transform: rotate(-40deg);
  transform-origin: right center;
  pointer-events: none;
}

h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 86px;
  line-height: 1;
  letter-spacing: 4px;
  color: #fff;
  transform: skewX(-6deg);
  transform-origin: left bottom;
  text-shadow: 6px 6px 0 rgba(31, 143, 214, 0.85), 0 0 46px rgba(127, 214, 255, 0.35);
}
h1 span { color: var(--cyan); }

.tagline {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 24px;
  font-size: 12px; font-weight: 800;
  letter-spacing: 3px;
  color: rgba(234, 244, 250, 0.7);
}
.tagline em { font-style: normal; white-space: nowrap; }
.tagline i { font-style: normal; font-size: 8px; color: var(--cyan); }

/* IN THE SKY NOW: the live round strip */
.menuNow {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  padding: 12px 20px 12px 24px;
  background: linear-gradient(178deg, #0e1e2e, #0a1622);
  box-shadow: inset 0 0 0 2px rgba(127, 214, 255, 0.18);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.menuNow::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--cyan);
  opacity: 0.75;
}
.mnLeft { min-width: 0; }
.mnLabel {
  font: 800 10px/1 var(--font); letter-spacing: 3px;
  color: rgba(234, 244, 250, 0.55);
}
.mnStage {
  font-family: var(--display); font-size: 25px; letter-spacing: 2px;
  transform: skewX(-6deg); transform-origin: left center;
  margin-top: 5px;
  text-shadow: 2px 2px 0 rgba(3, 8, 13, 0.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mnMeta { font-size: 12px; opacity: 0.65; margin-top: 4px; }
.mnClock {
  font-family: var(--display); font-size: 42px; color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 3px 3px 0 rgba(31, 143, 214, 0.55);
}
.menuNow.break::before { background: var(--gold); }
.menuNow.break { box-shadow: inset 0 0 0 2px rgba(255, 200, 87, 0.35); }
.menuNow.break .mnClock { color: var(--gold); text-shadow: 3px 3px 0 rgba(140, 96, 10, 0.6); }

.joinRow { display: flex; gap: 14px; margin-top: 22px; }
#nameInput {
  flex: 1;
  min-width: 0;
  background: rgba(4, 11, 18, 0.75);
  border: none;
  box-shadow: inset 0 0 0 2px rgba(127, 214, 255, 0.25), inset 0 3px 8px rgba(0, 0, 0, 0.45);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  padding: 13px 20px;
  outline: none;
  letter-spacing: 2px;
}
#nameInput::placeholder { color: rgba(234, 244, 250, 0.35); letter-spacing: 3px; }
#nameInput:focus { box-shadow: inset 0 0 0 2px var(--cyan), inset 0 3px 8px rgba(0, 0, 0, 0.45); }
/* No callsign entered — flash the field and shake it (kept after :focus so the
   danger outline wins while the field is focused). */
#nameInput.invalid,
#nameInput.invalid:focus {
  box-shadow: inset 0 0 0 2px var(--danger), inset 0 3px 8px rgba(0, 0, 0, 0.45);
  animation: callsignShake 0.4s ease;
}
@keyframes callsignShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

.sensRow {
  display: flex; gap: 12px; align-items: center;
  margin-top: 18px; font-size: 12.5px; opacity: 0.85;
}
.sensRow input[type="range"] { flex: 1; max-width: 200px; accent-color: var(--cyan); }
#sensVal { min-width: 36px; color: var(--cyan); font-weight: 700; }

.controlsHint {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px 14px;
  margin-top: 20px;
  font-size: 12.5px;
  color: rgba(234, 244, 250, 0.75);
}
.controlsHint span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.controlsHint b {
  display: inline-block;
  background: rgba(127, 214, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(159, 220, 255, 0.32);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  padding: 2px 8px;
  margin-right: 4px;
  font-weight: 700;
  color: var(--cyan);
}

/* Discord: a blurple-accented chamfered plate under the controls */
#discordBtn {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  margin-top: 20px;
  padding: 12px 20px;
  background: rgba(88, 101, 242, 0.14);
  box-shadow: inset 0 0 0 2px rgba(122, 133, 245, 0.5);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  color: #c3c9ff;
  font-size: 13px; font-weight: 800; letter-spacing: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}
#discordBtn svg { width: 22px; height: 22px; flex: 0 0 auto; }
#discordBtn:hover {
  background: #5865f2;
  box-shadow: inset 0 0 0 2px #7a85f5, 5px 5px 0 rgba(3, 8, 13, 0.45);
  color: #fff;
  transform: translate(-1px, -1px);
}
#discordBtn:active { transform: translate(2px, 2px); box-shadow: inset 0 0 0 2px #7a85f5; }

/* Hall of aces: header, podium, chase list, today's ace */
.lbHead {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: 4px;
  color: var(--gold);
  text-shadow: 2px 2px 0 rgba(3, 8, 13, 0.6);
}
.lbHead i { font-style: normal; font-size: 11px; color: rgba(127, 214, 255, 0.7); }
.lbHead span { transform: skewX(-6deg); }

.lbPodium {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.pod {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  position: relative;
}
.pod.vacant { opacity: 0.4; }
.podCrown {
  position: absolute; top: -26px;
  font-size: 20px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
  animation: jetFloat 2.8s ease-in-out infinite alternate;
}
.podAva {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  font-family: var(--display);
  font-size: 22px;
  color: #16202c;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55);
}
.pod.p1 .podAva {
  width: 58px; height: 58px; font-size: 28px;
  background: linear-gradient(160deg, #ffe9a8, #ffc857 45%, #ff9d3c);
}
.pod.p2 .podAva { background: linear-gradient(160deg, #f2f7fd, #cfdae7 45%, #9fb2c6); }
.pod.p3 .podAva { background: linear-gradient(160deg, #f2c9a2, #d99c66 45%, #b97a4b); }
.podName {
  margin-top: 8px;
  max-width: 100%;
  font-size: 12.5px; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pod.p1 .podName { font-size: 13.5px; color: var(--gold); }
.podPts {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 1px;
  color: rgba(234, 244, 250, 0.85);
  margin-top: 2px;
}
.pod.p1 .podPts { font-size: 17px; color: var(--gold); }
.podPlinth {
  width: 100%;
  margin-top: 8px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(178deg, #1b3044, #0d1c2b 80%);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 100%, 0 100%);
  font-family: var(--display);
  font-size: 24px;
  color: rgba(234, 244, 250, 0.22);
}
.pod.p1 .podPlinth { height: 66px; box-shadow: inset 0 3px 0 rgba(255, 200, 87, 0.75); }
.pod.p2 .podPlinth { height: 44px; box-shadow: inset 0 3px 0 rgba(207, 218, 231, 0.6); }
.pod.p3 .podPlinth { height: 30px; box-shadow: inset 0 3px 0 rgba(217, 156, 102, 0.6); }
.podPlinth span { transform: skewX(-6deg); }

.lbEmpty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 26px;
  padding: 26px 12px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(159, 220, 255, 0.15);
  font-size: 12px; font-weight: 800; letter-spacing: 3px;
  color: rgba(234, 244, 250, 0.55);
  text-align: center;
}
.lbEmpty b { color: var(--cyan); font-size: 14px; }

.mbRows {
  margin-top: 16px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(159, 220, 255, 0.1);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.mbRow {
  display: flex; gap: 10px; align-items: center;
  padding: 5px 4px;
  font-size: 13.5px;
}
.mbRow + .mbRow { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.mbRow .rank {
  flex: 0 0 22px;
  height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(127, 214, 255, 0.1);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  font-family: var(--display);
  font-size: 12px;
  color: rgba(234, 244, 250, 0.75);
}
.mbRow .name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbRow .pts { font-family: var(--display); font-size: 14px; color: var(--gold); letter-spacing: 0.5px; }

.mbDaily {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px;
  padding: 9px 16px;
  background: var(--gold-grad);
  color: #1a1206;
  transform: skewX(-6deg);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  filter: drop-shadow(5px 5px 0 rgba(3, 8, 13, 0.4));
}
.mbDaily .mdLabel { font: 800 9.5px/1 var(--font); letter-spacing: 2.5px; opacity: 0.7; }
.mbDaily b { flex: 1; min-width: 0; font-family: var(--display); font-weight: 400; font-size: 16px; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbDaily .mdPts { font-family: var(--display); font-size: 16px; }

.lbFoot {
  margin-top: auto;
  padding-top: 18px;
  text-align: center;
  font-size: 10px; font-weight: 700; letter-spacing: 2px;
  color: rgba(234, 244, 250, 0.45);
}
.lbFoot b {
  color: var(--cyan);
  background: rgba(127, 214, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(159, 220, 255, 0.3);
  padding: 1px 6px;
}

/* ── 4. Death card: red ribbon riding above a chamfered plate ────────────── */
.deathCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(14px 14px 0 rgba(3, 8, 13, 0.55));
  animation: cardSlam 0.4s cubic-bezier(0.2, 1.2, 0.35, 1);
  text-align: center;
}
.deathCard h2 {
  z-index: 6;
  display: inline-block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 21px;
  letter-spacing: 1.5px;
  color: #fff;
  background: linear-gradient(135deg, #ff5a5a, #cf3434);
  padding: 12px 30px;
  transform: skewX(-6deg) translateY(14px);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  text-shadow: 2px 2px 0 rgba(90, 10, 10, 0.7);
}
.dcPlate {
  width: min(560px, 92vw);
  padding: 40px 52px 30px;
}
.deathScoreWrap { position: relative; padding: 4px 0 2px; }
.dsBurst {
  position: absolute;
  top: -60px; left: 50%;
  width: 520px; height: 280px;
  transform: translateX(-50%);
  background: repeating-conic-gradient(from 0deg at 50% 45%,
    rgba(255, 200, 87, 0.13) 0deg 5deg, transparent 5deg 16deg);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, black 0%, transparent 66%);
  mask-image: radial-gradient(ellipse at 50% 45%, black 0%, transparent 66%);
  animation: burstSpin 18s linear infinite;
  pointer-events: none;
}
.deathScoreLabel {
  position: relative;
  font-size: 11px; letter-spacing: 4px; opacity: 0.6;
}
#deathScore {
  position: relative;
  font-family: var(--display);
  font-weight: 400;
  font-size: 88px;
  line-height: 1.05;
  color: #fff;
  text-shadow: 6px 6px 0 rgba(178, 128, 16, 0.9);
  font-variant-numeric: tabular-nums;
}
#deathBest { position: relative; font-size: 13.5px; opacity: 0.75; margin-top: 6px; }
#deathBest.record {
  display: inline-block;
  background: var(--gold-grad);
  color: #1a1206;
  font-weight: 800;
  letter-spacing: 1px;
  opacity: 1;
  padding: 5px 16px;
  transform: skewX(-6deg);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  filter: drop-shadow(4px 4px 0 rgba(3, 8, 13, 0.4));
  animation: pulse 0.9s infinite alternate;
}
.deathGoal {
  position: relative;
  margin-top: 16px;
  padding: 10px 18px;
  font-size: 13.5px;
  color: var(--gold);
  background: rgba(255, 200, 87, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 87, 0.3);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.taunt { font-style: italic; opacity: 0.55; margin: 12px 0 22px; font-size: 14px; }

/* ── Connecting / toast ──────────────────────────────────────────────────── */
#connecting { flex-direction: column; gap: 14px; font-size: 18px; letter-spacing: 2px; }
.spinner {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid rgba(127, 214, 255, 0.25);
  border-top-color: var(--cyan);
  animation: spin 0.8s linear infinite;
}

/* Slides in below the stage-clock plate / ceremony strip, never over them */
#toast {
  position: fixed; top: 70px; left: 50%;
  transform: translate(-50%, -160px) skewX(-6deg);
  background: var(--plate);
  box-shadow: inset 0 0 0 2px rgba(127, 214, 255, 0.25);
  filter: drop-shadow(5px 5px 0 rgba(3, 8, 13, 0.4));
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  padding: 10px 24px; font-size: 15px; font-weight: 700; z-index: 40;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  pointer-events: none;
}
#toast.show { transform: translate(-50%, 0) skewX(-6deg); }

/* ── 5. HUD chrome ───────────────────────────────────────────────────────── */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 20; }

.panel {
  background: var(--plate);
  box-shadow: inset 0 0 0 2px rgba(127, 214, 255, 0.16);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

/* Same pseudo-element shadow trick as #bottomBar — rows rewrite on every
   board tick, so no filter here either */
#liveBoard {
  position: absolute; top: 16px; left: 16px;
  padding: 12px 16px; min-width: 200px; font-size: 13.5px;
  z-index: 0;
  background: none; box-shadow: none; clip-path: none;
}
#liveBoard::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--plate);
  box-shadow: inset 0 0 0 2px rgba(127, 214, 255, 0.16);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
#liveBoard::after {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  transform: translate(6px, 6px);
  background: rgba(3, 8, 13, 0.35);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.boardTitle {
  position: relative;
  font-family: var(--display);
  font-size: 11px; letter-spacing: 3px;
  color: rgba(234, 244, 250, 0.8);
  padding-bottom: 7px;
  margin-bottom: 6px;
}
.boardTitle::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 44px; height: 3px;
  background: var(--cyan);
  transform: skewX(-30deg);
}
.liveRow { display: flex; gap: 8px; padding: 2px 0; align-items: baseline; }
.liveRow .rank { width: 18px; opacity: 0.55; font-variant-numeric: tabular-nums; }
.liveRow .name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.liveRow .pts { color: var(--gold); font-variant-numeric: tabular-nums; }
.liveRow.me { color: var(--cyan); font-weight: 700; }
.liveRow.me .pts { color: var(--cyan); }
.liveRow.lead .name { color: var(--gold); font-weight: 700; }
.liveRow.lead .rank { opacity: 1; }
.liveRow.below {
  border-top: 1px solid rgba(159, 220, 255, 0.18);
  margin-top: 3px; padding-top: 4px;
}

#bestLine {
  position: absolute; top: 16px; right: 68px;
  display: flex; align-items: center; gap: 7px;
  font-size: 13px;
  background: var(--plate);
  box-shadow: inset 0 0 0 2px rgba(127, 214, 255, 0.16);
  filter: drop-shadow(4px 4px 0 rgba(3, 8, 13, 0.3));
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  padding: 8px 16px;
}
#bestLine .blCrown { font-size: 13px; }
#bestLine .blLabel { font: 800 9px/1 var(--font); letter-spacing: 2px; opacity: 0.55; }
#bestLine b { color: var(--gold); font-weight: 700; }

#killfeed {
  position: absolute; top: 64px; right: 68px;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
}
.feedRow {
  font-size: 13px;
  background: rgba(6, 18, 28, 0.62);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  padding: 4px 12px;
  animation: feedIn 0.25s ease-out;
  opacity: 0.92;
}
.feedRow.mine { border-left: 3px solid var(--cyan); }
.feedRow.me { border-left: 3px solid var(--danger); }
@keyframes feedIn { from { opacity: 0; transform: translateX(24px); } }

/* ── Banners & popups ────────────────────────────────────────────────────── */
.banner {
  position: absolute; top: 24%; left: 50%; transform: translateX(-50%) scale(0.8);
  font-family: var(--display);
  font-size: 42px; font-weight: 400; letter-spacing: 3px;
  opacity: 0; transition: all 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.35);
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.5);
}
.banner.show { opacity: 1; transform: translateX(-50%) scale(1); }
.banner.level { color: var(--gold); }
.banner.streak { color: var(--danger); }
.banner.go { color: var(--cyan); }
.subBanner {
  position: absolute; top: calc(24% + 52px); left: 50%; transform: translateX(-50%);
  font-size: 15px; letter-spacing: 3px; opacity: 0; transition: opacity 0.3s;
}
.subBanner.show { opacity: 0.8; }

/* Sits BELOW the stage-clock plate — both are top-centred */
#streakTag {
  position: absolute; top: 46px; left: 50%; transform: translateX(-50%);
  font-size: 14px; font-weight: 800; letter-spacing: 2px; color: var(--danger);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

#popups { position: absolute; inset: 0; overflow: hidden; }
.popup {
  position: absolute; top: 44%;
  font-size: 22px; font-weight: 800; color: var(--gold);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  animation: popupRise 1.05s ease-out forwards;
}
.popup.close {
  font-size: 15px; color: var(--cyan); letter-spacing: 2px;
  animation-duration: 0.85s;
}
.popup.healed { color: #6ee7a0; letter-spacing: 2px; }
.popup.msl { color: #ff9a8a; letter-spacing: 2px; }
.popup.chf { color: #dfeffc; letter-spacing: 2px; }

.dmgNum {
  position: absolute;
  font-size: 16px; font-weight: 800;
  color: #ffd0a0; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  font-variant-numeric: tabular-nums;
  animation: dmgRise 0.7s ease-out forwards;
  pointer-events: none;
}
@keyframes dmgRise {
  from { opacity: 1; transform: translateY(0) scale(1.1); }
  to { opacity: 0; transform: translateY(-34px) scale(0.9); }
}
@keyframes popupRise {
  from { opacity: 0; transform: translateY(10px) scale(0.7); }
  20% { opacity: 1; transform: translateY(0) scale(1.15); }
  to { opacity: 0; transform: translateY(-56px) scale(1); }
}

#warning {
  position: absolute; top: 34%; left: 50%; transform: translateX(-50%);
  font-size: 26px; font-weight: 800; letter-spacing: 6px; color: var(--danger);
  animation: blink 0.5s steps(2) infinite;
  text-shadow: 0 0 22px rgba(255, 90, 90, 0.6);
}

/* ── 6. Combat reticles & alerts ─────────────────────────────────────────── */
#crosshair {
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0; will-change: transform;
}
#crosshair .dot {
  position: absolute; left: -2px; top: -2px; width: 4px; height: 4px;
  background: var(--cyan); border-radius: 50%;
}
#crosshair .ring {
  position: absolute; left: -13px; top: -13px; width: 26px; height: 26px;
  border: 1.5px solid rgba(127, 214, 255, 0.7); border-radius: 50%;
  opacity: 0.45; /* steering cursor stays subtle next to the boresight */
}

/* Boresight: where the guns actually point */
#aimSight {
  position: absolute; top: 0; left: 0;
  width: 0; height: 0; will-change: transform;
  pointer-events: none;
}
#aimSight .ring {
  position: absolute; left: -17px; top: -17px; width: 34px; height: 34px;
  border: 1.8px solid rgba(240, 250, 255, 0.9); border-radius: 50%;
  box-shadow: 0 0 8px rgba(127, 214, 255, 0.35), inset 0 0 6px rgba(127, 214, 255, 0.2);
}
#aimSight .pip {
  position: absolute; left: -2px; top: -2px; width: 4px; height: 4px;
  background: #fff; border-radius: 50%;
}
#aimSight .tick {
  position: absolute; background: rgba(240, 250, 255, 0.9); width: 2px; height: 7px;
}
#aimSight .tick.t { left: -1px; top: -25px; }
#aimSight .tick.b { left: -1px; top: 18px; }
#aimSight .tick.l { left: -25px; top: -1px; width: 7px; height: 2px; }
#aimSight .tick.r { left: 18px; top: -1px; width: 7px; height: 2px; }

/* Radar: screen-edge chevrons towards off-screen enemies */
.radarArrow {
  position: absolute; top: 0; left: 0;
  width: 0; height: 0; will-change: transform;
  pointer-events: none;
}
.radarArrow .tri {
  position: absolute; left: -8px; top: -14px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 13px solid rgba(255, 92, 92, 0.9);
  filter: drop-shadow(0 0 6px rgba(255, 92, 92, 0.5));
}
.radarArrow .dist {
  position: absolute; left: -22px; top: 4px; width: 44px;
  text-align: center; font-size: 10px; font-weight: 700;
  color: rgba(255, 160, 160, 0.95); letter-spacing: 0.5px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  transform: rotate(calc(var(--unrot, 0) * 1rad));
}

/* Missile lock bracket: corners close in with progress, redden when locked */
#lockBox {
  position: absolute; top: 0; left: 0; width: 0; height: 0;
  --spread: 46px;
  will-change: transform;
  pointer-events: none;
}
#lockBox .c {
  position: absolute; width: 12px; height: 12px;
  border: 2.2px solid rgba(255, 200, 87, 0.95);
}
#lockBox .c.tl { left: calc(var(--spread) * -1); top: calc(var(--spread) * -1); border-right: none; border-bottom: none; }
#lockBox .c.tr { left: calc(var(--spread) - 12px); top: calc(var(--spread) * -1); border-left: none; border-bottom: none; }
#lockBox .c.bl { left: calc(var(--spread) * -1); top: calc(var(--spread) - 12px); border-right: none; border-top: none; }
#lockBox .c.br { left: calc(var(--spread) - 12px); top: calc(var(--spread) - 12px); border-left: none; border-top: none; }
#lockBox .cap {
  position: absolute; left: -60px; top: 30px; width: 120px;
  text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 2px;
  color: var(--gold); opacity: 0.9; text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}
#lockBox.locked .c { border-color: #ff5a5a; box-shadow: 0 0 8px rgba(255, 90, 90, 0.6); }
#lockBox.locked .cap { opacity: 1; color: #ff5a5a; animation: blink 0.4s steps(2) infinite; }
#lockBox.fail .c { border-color: rgba(255, 255, 255, 0.35); box-shadow: none; }
#lockBox.fail .cap { opacity: 1; color: rgba(255, 255, 255, 0.75); }

/* Inbound missile arc: like the threat arc but persistent and brighter */
#missileArc {
  position: absolute; top: 50%; left: 50%;
  width: 110px; height: 110px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 4.5px solid transparent;
  border-top-color: #ff3b3b;
  animation: blink 0.35s steps(2) infinite;
  pointer-events: none;
}

/* Inbound missile popup: sweeping marker into the green CHAFF NOW window */
#missileAlert {
  position: absolute; top: 22%; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 18px 12px;
  background: linear-gradient(178deg, rgba(38, 12, 14, 0.92), rgba(22, 8, 10, 0.94));
  box-shadow: inset 0 0 0 2px rgba(255, 59, 59, 0.65);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  filter: drop-shadow(7px 7px 0 rgba(3, 8, 13, 0.5));
  pointer-events: none;
}
#missileAlert::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg,
    rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px);
  pointer-events: none;
}
#missileAlert .maTitle {
  font-family: var(--display);
  font-size: 17px; font-weight: 400;
  letter-spacing: 4px;
  color: #ff5a5a;
  animation: blink 0.4s steps(2) infinite;
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}
#missileAlert .maBar {
  position: relative; width: 250px; height: 12px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  overflow: hidden;
}
#missileAlert .maZone {
  position: absolute; top: 0; right: 0; height: 100%;
  width: 30%;
  background: rgba(88, 214, 118, 0.55);
  box-shadow: inset 0 0 8px rgba(88, 214, 118, 0.8);
}
#missileAlert .maMarker {
  position: absolute; top: -2px; height: 16px; width: 5px;
  left: 0;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 1), -6px 0 14px rgba(255, 255, 255, 0.5);
  will-change: transform;
}
#missileAlert .maCap {
  font: 700 12.5px/1 var(--font);
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}
#missileAlert.now { box-shadow: inset 0 0 0 2px rgba(88, 214, 118, 0.8); }
#missileAlert.now .maCap { color: #58d676; font-size: 14px; animation: blink 0.25s steps(2) infinite; }

#leadReticle {
  position: absolute; top: 0; left: 0;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border: 1.6px solid var(--gold);
  opacity: 0.85;
  will-change: transform;
  box-shadow: 0 0 10px rgba(255, 200, 87, 0.4);
}

#hitmarker {
  position: absolute; top: 50%; left: 50%; width: 0; height: 0; opacity: 0;
}
#hitmarker::before, #hitmarker::after {
  content: ''; position: absolute; width: 18px; height: 2.5px;
  background: #fff; left: -9px; top: -1px;
}
#hitmarker::before { transform: rotate(45deg); }
#hitmarker::after { transform: rotate(-45deg); }
#hitmarker.show { animation: hitPop 0.22s ease-out; }
#hitmarker.kill::before, #hitmarker.kill::after {
  background: var(--gold);
  width: 26px; left: -13px; height: 3px;
  box-shadow: 0 0 12px rgba(255, 200, 87, 0.8);
}
#hitmarker.kill.show { animation: hitPop 0.34s ease-out; }
@keyframes hitPop {
  from { opacity: 1; transform: scale(1.5); }
  to { opacity: 0; transform: scale(0.8); }
}

#scrapArrow {
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 11px solid rgba(255, 200, 87, 0.85);
  filter: drop-shadow(0 0 6px rgba(255, 200, 87, 0.5));
  pointer-events: none;
  will-change: transform;
}

#threatArc {
  position: absolute; top: 50%; left: 50%;
  width: 92px; height: 92px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3.5px solid transparent;
  border-top-color: rgba(255, 90, 90, 0.95);
  opacity: 0;
  pointer-events: none;
}
#threatArc.show { animation: threatFade 0.7s ease-out; }
@keyframes threatFade {
  from { opacity: 1; }
  to { opacity: 0; }
}

#vignette {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(255, 40, 40, 0.45) 100%);
}
#vignette.show { animation: vign 0.4s ease-out; }
@keyframes vign { from { opacity: 1; } to { opacity: 0; } }

/* Low hull: the edges of the screen breathe red until you heal */
#vignette.lowHull { animation: lowHull 1.15s ease-in-out infinite; }
@keyframes lowHull {
  0%, 100% { box-shadow: inset 0 0 90px rgba(255, 60, 50, 0.0); }
  35% { box-shadow: inset 0 0 130px rgba(255, 60, 50, 0.38); }
}

/* ── 7. Bottom bar & stats ───────────────────────────────────────────────── */
/* The plate and its hard shadow live on pseudo-elements, NOT a drop-shadow
   filter: the meter fills repaint every frame, and a filter here would force
   the whole subtree through an extra composite pass per frame (steering
   smoothness > fancy paint). Same visual, static layers. */
#bottomBar {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 26px; align-items: flex-end;
  padding: 14px 26px;
}
#bottomBar::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--plate);
  box-shadow: inset 0 0 0 2px rgba(127, 214, 255, 0.16), inset 0 2px 0 rgba(255, 255, 255, 0.08);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
#bottomBar::after {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  transform: translate(8px, 8px);
  background: rgba(3, 8, 13, 0.4);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.barBlock { width: 190px; }
.barBlock.right { text-align: right; }
.barLabel { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; opacity: 0.65; margin: 3px 0; }
.barLabel.dim { opacity: 0.45; }
.bar {
  position: relative;
  height: 11px;
  overflow: hidden;
  background: rgba(4, 11, 18, 0.8);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55);
  transform: skewX(-14deg);
}
.bar.slim { height: 7px; }
/* Segment ticks over every meter — reads as a gauge, not a web progress bar */
.bar::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    transparent 0 15px, rgba(4, 11, 18, 0.75) 15px 17px);
  pointer-events: none;
}
.fill {
  height: 100%;
  transition: width 0.18s ease-out;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35);
}
.fill.hp { background: linear-gradient(90deg, #59d98c, #2fbf71); }
.fill.hp.low { background: linear-gradient(90deg, #ff7a5a, #ff4d4d); }
.fill.boost { background: linear-gradient(90deg, #7fd6ff, #38b6ff); }
.fill.scrap { background: linear-gradient(90deg, #ffd97a, #ffc857); }
.fill.heat { background: #ffb14d; transition: width 60ms linear; }
.fill.heat.hot { background: #ff7a3d; }
.fill.heat.jam { background: #ff3b3b; animation: blink 0.3s steps(2) infinite; }
#gunsLabel.jam { color: #ff5a5a; animation: blink 0.3s steps(2) infinite; }
#gunsLabel.mk2 { color: #ffc857; text-shadow: 0 0 8px rgba(255, 200, 87, 0.4); }
#gunsLabel.mk3 { color: #c9a6ff; text-shadow: 0 0 8px rgba(201, 166, 255, 0.5); }

#ammoRow {
  display: flex; gap: 8px; align-items: center; margin-top: 7px;
}
#mslPips i, #chfPips i {
  display: inline-block; margin-right: 3px;
  background: rgba(255, 255, 255, 0.14);
  transform: skewX(-14deg);
}
#mslPips i { width: 16px; height: 7px; clip-path: polygon(0 50%, 25% 0, 100% 0, 100% 100%, 25% 100%); }
#chfPips i { width: 8px; height: 8px; }
#mslPips i.full { background: #ff8a5a; box-shadow: 0 0 6px rgba(255, 138, 90, 0.5); }
#chfPips i.full { background: #8fd8ff; box-shadow: 0 0 6px rgba(143, 216, 255, 0.5); }

#flightData { text-align: center; min-width: 150px; }
#score {
  font-family: var(--display);
  font-size: 34px; font-weight: 400;
  color: var(--gold);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums; line-height: 1.05;
  text-shadow: 3px 3px 0 rgba(120, 78, 8, 0.55);
}
.fdRow { font-size: 13px; opacity: 0.85; font-variant-numeric: tabular-nums; }
#bestTag { font-size: 10.5px; letter-spacing: 1.5px; opacity: 0.6; min-height: 13px; }
#bestTag.beating { color: var(--gold); opacity: 1; animation: pulse 0.8s infinite alternate; }
.zoneTag { font-size: 10px; letter-spacing: 3px; margin-top: 3px; }
.zoneTag.clear { color: rgba(234, 244, 250, 0.55); }
.zoneTag.edge { color: var(--gold); }
#levelName { color: var(--cyan); opacity: 0.95; }

/* ── First-run hints ─────────────────────────────────────────────────────── */
#hint {
  position: absolute; bottom: 160px; left: 50%; transform: translate(-50%, 8px);
  background: var(--plate);
  box-shadow: inset 0 0 0 2px rgba(127, 214, 255, 0.2);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  padding: 9px 22px; font-size: 14px; letter-spacing: 0.4px;
  opacity: 0; transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
#hint.show { opacity: 0.95; transform: translate(-50%, 0); }

/* ── Hold-Tab boards: ribbon header over a three-column plate ────────────── */
#boards {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  filter: drop-shadow(12px 12px 0 rgba(3, 8, 13, 0.5));
  animation: cardIn 0.18s ease-out;
  max-width: 94vw;
}
@keyframes cardIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
.boardsHead {
  z-index: 2;
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 4px;
  color: #1a1206;
  background: var(--gold-grad);
  padding: 10px 36px;
  transform: skewX(-6deg) translateY(14px);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.boardsCols {
  display: flex; gap: 30px; justify-content: center;
  background: var(--plate);
  box-shadow: var(--plate-line);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  padding: 30px 34px 24px;
}
.boardsCol { min-width: 225px; }
.boardsCol h3 {
  position: relative; padding-bottom: 8px; margin-bottom: 10px;
  font-family: var(--display); font-weight: 400;
  font-size: 13px; letter-spacing: 3px; opacity: 0.92;
  text-align: center;
}
.boardsCol h3::after {
  content: ''; position: absolute; left: 28%; right: 28%; bottom: 0;
  height: 3px; transform: skewX(-30deg);
}
.boardsCol h3.round::after { background: var(--cyan); }
.boardsCol h3.daily::after { background: #58d676; }
.boardsCol h3.alltime::after { background: var(--gold); }
.boardsRow {
  display: flex; gap: 10px; padding: 4px 8px; font-size: 14.5px; align-items: baseline;
}
.boardsRow:nth-child(even) { background: rgba(255, 255, 255, 0.035); }
.boardsRow:first-child { background: rgba(255, 200, 87, 0.09); }
.boardsRow:first-child .name { color: var(--gold); font-weight: 700; }
.boardsRow .rank { width: 26px; }
.boardsRow .name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boardsRow .pts { color: var(--gold); font-variant-numeric: tabular-nums; }
.boardsRow.me { color: var(--cyan); font-weight: 700; }
.boardsRow.me .name { color: var(--cyan); }
.boardsRow.empty { opacity: 0.5; justify-content: center; background: none; }
.botTag {
  font-style: normal; font-size: 9px; letter-spacing: 1px; opacity: 0.5;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0 4px; margin-left: 5px; vertical-align: 1px;
}

/* ── Touch controls ──────────────────────────────────────────────────────── */
.touchBtn {
  position: absolute; bottom: 118px;
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(10, 26, 38, 0.4);
  border: 1.5px solid rgba(159, 220, 255, 0.22);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; letter-spacing: 2px;
  color: rgba(234, 244, 250, 0.85);
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.touchBtn:active { background: rgba(127, 214, 255, 0.25); }
#btnFire { right: 26px; }
#btnBoost { left: 26px; }

/* ── Minimap & mute ──────────────────────────────────────────────────────── */
#minimap {
  position: absolute; bottom: 18px; right: 16px;
  border-radius: 50%;
  border: 1px solid rgba(159, 220, 255, 0.22);
  background: rgba(6, 18, 28, 0.4);
  backdrop-filter: blur(6px);
}
#muteBtn {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 34px;
  pointer-events: auto;
  background: var(--plate);
  box-shadow: inset 0 0 0 2px rgba(127, 214, 255, 0.2);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  font-size: 16px;
}

/* ── 8. Stage flow: clock tag, title wipe, ceremony ──────────────────────── */
#stageTag {
  position: absolute; top: 12px; left: 50%;
  font-family: var(--display);
  font-weight: 400;
  font-size: 13px;
  transform: translateX(-50%) skewX(-6deg);
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(8, 18, 28, 0.78);
  box-shadow: inset 0 0 0 1px rgba(127, 214, 255, 0.25), 4px 4px 0 rgba(3, 8, 13, 0.35);
  padding: 6px 14px;
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
#stageTag.closing { color: var(--gold); animation: blink 0.5s steps(2) infinite; }
/* The ceremony (full card or compact strip) carries its own countdown, so the
   clock and streak tags stand down and the compact strip takes the top slot.
   Sibling selector, not :has() — #hud's DOM churns every hit and :has()
   invalidation there is a style-recalc tax. */
#stageOver:not(.hidden) ~ #stageTag,
#stageOver:not(.hidden) ~ #streakTag { display: none; }

/* Stage title: full-width ribbon wipe on every arena change */
#stageTitle {
  position: absolute; top: 26%; left: 0; right: 0;
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none;
  text-align: center;
}
#stageTitle .stTop {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 8px;
  color: rgba(255, 255, 255, 0.75);
  animation: stFade 3s ease-out forwards;
}
#stageTitle .stName {
  font-family: var(--display);
  font-weight: 400;
  font-size: 62px;
  letter-spacing: 4px;
  color: #fff;
  width: 100%;
  padding: 8px 34px;
  transform: skewX(-8deg);
  background: linear-gradient(90deg, transparent 0%, rgba(6, 14, 22, 0.82) 16%,
    rgba(6, 14, 22, 0.82) 84%, transparent 100%);
  animation: stSlam 3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
}
@keyframes stSlam {
  0% { opacity: 0; transform: translateX(-38vw) skewX(-8deg); }
  10% { opacity: 1; transform: translateX(1.5vw) skewX(-8deg); }
  14% { transform: translateX(0) skewX(-8deg); }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translateX(10vw) skewX(-8deg); }
}
#stageTitle .stRule {
  height: 4px; border-radius: 2px;
  background: var(--stage-accent, var(--gold));
  box-shadow: 0 0 14px var(--stage-accent, var(--gold));
  animation: stRule 3s ease-out forwards;
}
#stageTitle .stSub {
  font: 600 12.5px/1 var(--font);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  animation: stFade 3s ease-out forwards;
}
@keyframes stFade {
  0% { opacity: 0; } 12% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes stRule {
  0% { width: 0; opacity: 0; }
  16% { width: 260px; opacity: 1; }
  80% { opacity: 1; }
  100% { width: 260px; opacity: 0; }
}

/* End-of-round ceremony: gold ribbon + burst + victory plate */
#stageOver {
  position: absolute; top: 30%; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  filter: drop-shadow(12px 12px 0 rgba(3, 8, 13, 0.5));
  animation: cardSlam 0.45s cubic-bezier(0.2, 1.2, 0.35, 1);
  pointer-events: none;
  text-align: center;
  transition: top 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
}
#stageOver .soRibbon {
  z-index: 2;
  transform: skewX(-6deg) translateY(12px);
}
#stageOver .soTitle {
  display: inline-block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 3px;
  color: #1a1206;
  background: var(--gold-grad);
  padding: 12px 38px;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  box-shadow: 6px 6px 0 rgba(3, 8, 13, 0.45);
}
#stageOver .soPlate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 460px;
  padding: 34px 46px 24px;
  background: var(--plate);
  box-shadow: inset 0 0 0 2px rgba(255, 200, 87, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.1);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  overflow: hidden;
}
#stageOver .soBurst {
  position: absolute;
  top: -40px; left: 50%;
  width: 560px; height: 300px;
  transform: translateX(-50%);
  background: repeating-conic-gradient(from 0deg at 50% 40%,
    rgba(255, 200, 87, 0.14) 0deg 5deg, transparent 5deg 16deg);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 0%, transparent 68%);
  mask-image: radial-gradient(ellipse at 50% 40%, black 0%, transparent 68%);
  animation: burstSpin 14s linear infinite;
  pointer-events: none;
}
#stageOver #stageWinner {
  position: relative;
  font-family: var(--display);
  font-weight: 400;
  font-size: 36px;
  letter-spacing: 1px;
  color: #ffd97a;
  text-shadow: 4px 4px 0 rgba(120, 70, 0, 0.55);
}
#stageOver #stageWinScore {
  position: relative;
  font-family: var(--display);
  font-size: 17px;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 2px;
}
#stageOver #stagePodium {
  position: relative;
  display: flex; gap: 12px; margin-top: 4px;
  font: 600 13px/1.5 var(--font); color: rgba(255,255,255,0.75);
}
#stageOver #stagePodium div {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  padding: 8px 18px;
  min-width: 110px;
  transform: skewX(-6deg);
  font-weight: 700;
}
#stageOver #stagePodium .p1 {
  background: rgba(255, 200, 87, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 87, 0.5);
}
#stageOver #stagePodium .medal { font-size: 18px; margin: 0; }
#stageOver #stagePodium .pName {
  font-weight: 800; max-width: 130px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#stageOver #stagePodium .pPts {
  font-variant-numeric: tabular-nums; color: var(--gold); font-size: 12.5px;
}
#stageOver #stageYou {
  position: relative;
  font: 700 13.5px/1 var(--font); color: var(--cyan);
  letter-spacing: 1px; margin-top: 4px;
}
/* Round medals: skewed honour chips under the podium */
#stageOver #stageMedals {
  position: relative;
  display: flex; gap: 10px; margin-top: 6px;
}
#stageOver #stageMedals:empty { display: none; }
#stageOver .medalChip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transform: skewX(-6deg);
  font: 600 11px/1.25 var(--font); color: rgba(255, 255, 255, 0.8);
}
#stageOver .medalChip.topgun { box-shadow: inset 0 0 0 1px rgba(255, 138, 90, 0.55); }
#stageOver .medalChip.untouchable { box-shadow: inset 0 0 0 1px rgba(127, 214, 255, 0.5); }
#stageOver .medalChip.magnet { box-shadow: inset 0 0 0 1px rgba(255, 200, 87, 0.5); }
#stageOver .medalChip .mIcon { font-size: 17px; }
#stageOver .medalChip .mBody { display: flex; flex-direction: column; }
#stageOver .medalChip .mBody b { letter-spacing: 1.5px; font-size: 10px; color: rgba(255,255,255,0.65); }
#stageOver .medalChip .mBody i {
  font-style: normal; font-weight: 800; font-size: 12.5px;
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#stageOver .medalChip .mVal {
  font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 700; font-size: 11px;
}
/* Persistent per-stage record line */
#stageOver #stageRecordLine {
  position: relative;
  font: 700 10.5px/1 var(--font); letter-spacing: 2px;
  color: rgba(255, 217, 122, 0.72);
  margin-top: 5px;
}
#stageOver #stageRecordLine.newRecord {
  color: #ffd97a; font-size: 12.5px;
  text-shadow: 2px 2px 0 rgba(120, 70, 0, 0.55);
  animation: recordPop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes recordPop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
#stageNote {
  position: relative;
  font: 700 10.5px/1 var(--font); letter-spacing: 2px;
  color: rgba(234, 244, 250, 0.5);
  margin-top: 2px;
}
#stageOver #stageNext {
  position: relative;
  font-family: var(--display);
  letter-spacing: 2px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 6px;
}
#stageCountdown {
  position: relative;
  width: 300px; height: 8px;
  margin-top: 8px;
  transform: skewX(-30deg);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
#stageCountdownFill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #ffc857, #ff9d3c);
}

/* Ceremony compact mode: slim strip while the warm-up flies */
#stageOver.compact { top: 12px; }
#stageOver.compact .soRibbon,
#stageOver.compact .soBurst,
#stageOver.compact #stagePodium,
#stageOver.compact #stageMedals,
#stageOver.compact #stageRecordLine,
#stageOver.compact #stageYou,
#stageOver.compact #stageNote,
#stageOver.compact #stageWinScore { display: none; }
#stageOver.compact .soPlate {
  flex-direction: row; align-items: center; gap: 16px;
  min-width: 0; padding: 10px 26px;
}
#stageOver.compact #stageWinner {
  font-size: 17px;
  text-shadow: 2px 2px 0 rgba(120, 70, 0, 0.5);
}
#stageOver.compact #stageNext { font-size: 12px; margin-top: 0; }
#stageOver.compact #stageCountdown { width: 150px; margin-top: 0; }

/* Ceremony confetti: DOM pieces raining over the stage-complete card */
#confetti {
  position: fixed; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 25;
}
.confettiPiece {
  position: absolute; top: -20px;
  width: 9px; height: 13px;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0.4; }
}

/* ── 9. Touch & small screens ────────────────────────────────────────────── */

/* Touch phones: slim the bottom bar so FIRE/BOOST thumbs never cover it */
body.touch .barBlock.right { display: none; }
body.touch #bottomBar {
  transform: translateX(-50%) scale(0.85);
  transform-origin: bottom center;
  gap: 18px; padding: 10px 16px;
}
body.touch #flightData { min-width: 120px; }

/* Narrow screens: the hangar card stacks, leaderboard below the action */
@media (max-width: 1020px) {
  .menuCard { flex-direction: column; width: min(620px, 94vw); }
  .mcLeft { padding: 36px 34px 26px; }
  .mcRight {
    flex: none;
    border-left: none;
    border-top: 2px solid rgba(127, 214, 255, 0.14);
    padding: 24px 28px 20px;
  }
  .lbFoot { margin-top: 16px; }
  h1 { font-size: 64px; }
  .logoJet { width: 58px; top: -14px; }
  .logoBlock::before { top: 26px; right: 50px; width: 120px; }
  .controlsHint { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Short desktop windows: scale the hero cards to fit */
@media (max-height: 810px) and (min-width: 1021px) {
  .menuCard { transform: scale(0.88); margin: -20px auto; }
}

/* Short screens (phones landscape): shrink the minimap clear of the buttons */
@media (max-height: 500px) {
  #minimap { width: 110px; height: 110px; }
  #btnFire { right: 132px; bottom: 24px; }
  #btnBoost { left: 24px; bottom: 24px; }
  #liveBoard { font-size: 11.5px; min-width: 150px; }
  #bottomBar { transform: translateX(-50%) scale(0.85); transform-origin: bottom; }
  .menuCard { transform: scale(0.8); margin: -30px auto; }
}