/* ============================================
   Saint James Electronic — TRANSMISSION (game.css)
   ============================================ */

/* === SECTION WRAPPER === */
.transmission {
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.transmission::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--ember-glow) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}
.transmission .container { position: relative; z-index: 1; }

/* === GAME CONSOLE === */
/* Override the global .container max-width FOR THIS SECTION ONLY so the
   transmission console fills more of the page on large 4K screens. */
.transmission .container {
  max-width: 1900px;
}
.transmission-console {
  background: var(--bg-2);
  border: 1px solid var(--grid);
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.transmission-console::before {
  content: '';
  position: absolute; top: -50px; left: -50px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, var(--ember-glow) 0%, transparent 70%);
  filter: blur(40px); pointer-events: none;
}

/* === HUD top bar ===
   Refactored into a flex layout instead of a rigid grid so the player/SFX/pause
   buttons don't get stretched into giant cells. The 5 stat items stay grouped
   left, the music + utility buttons stay grouped right. */
.tg-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--grid);
  position: relative;
  z-index: 1;
}
/* All stat items keep their natural width */
.tg-hud-item {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
/* "Now Playing" can grow but is capped, others stay tight */
.tg-hud-item .hud-now-playing {
  max-width: 200px;
}
/* Push everything from the SFX button onwards to the right edge */
.btn-sfx {
  margin-left: auto;
}
.tg-hud-item { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }
.tg-hud-label { display: block; color: var(--ink-3); margin-bottom: 4px; font-size: 9px; font-family: 'JetBrains Mono', monospace; }
.tg-hud-value { color: var(--ink); font-size: 14px; font-family: 'JetBrains Mono', monospace; display: block; }
.tg-hud-value.ember { color: var(--ember); }
.powerup-indicator {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #ffdc99;
  text-shadow: 0 0 8px rgba(255, 220, 153, 0.5);
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  min-height: 12px;
}
.powerup-indicator.empty { color: transparent; text-shadow: none; }
.btn-sfx {
  background: var(--bg-3);
  border: 1px solid var(--grid);
  color: var(--ember);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.25em;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
}
.btn-sfx:hover { border-color: var(--ember); }
.btn-sfx.off { color: var(--ink-3); }

/* === CANVAS WRAP === */
.tg-canvas-wrap {
  position: relative;
  background: #000;
  border: 1px solid var(--grid);
  overflow: hidden;
  /* 16:9 to match the logical canvas resolution (1280×720) — keeps the canvas
     filling the full width on desktop with no letterboxing */
  aspect-ratio: 16 / 9;
}
.tg-canvas-wrap canvas { width: 100%; height: 100%; display: block; }

/* === Overlays === */
.tg-overlay {
  position: absolute; inset: 0;
  background: rgba(10, 9, 8, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 32px;
  z-index: 10;
}
.tg-overlay.hidden { display: none; }
.tg-ov-tag {
  font-size: 10px; letter-spacing: 0.4em; color: var(--ember); text-transform: uppercase;
  margin-bottom: 12px;
  font-family: 'JetBrains Mono', monospace;
}
.tg-ov-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(36px, 5vw, 72px); line-height: 1;
  text-transform: uppercase; margin-bottom: 16px;
  /* Allow italic accent's overshoot to render without being clipped by overlay padding */
  padding: 0 0.4em;
}
.tg-ov-title .accent {
  display: inline-block;
  background: linear-gradient(90deg, #ffb347 0%, #ff7a3d 35%, #ff4d1a 75%, #d63a0f 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
  /* Add real horizontal room so the slanted right side of the last glyph isn't clipped */
  padding: 0 0.25em 0 0;
  margin-right: 0;
  /* Force the box to contain the italic overhang */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.tg-ov-desc {
  font-size: 12px; letter-spacing: 0.15em; color: var(--ink-2); text-transform: uppercase;
  max-width: 480px; line-height: 1.7; margin-bottom: 32px;
  font-family: 'JetBrains Mono', monospace;
}
.tg-ov-controls {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 12px 24px;
  margin-bottom: 32px;
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
}
.tg-ov-ctrl-key {
  background: var(--bg-3);
  border: 1px solid var(--grid);
  padding: 4px 10px;
  color: var(--ember);
  text-align: center;
  min-width: 60px;
  border-radius: 2px;
}
.tg-ov-btn {
  background: var(--ember);
  color: var(--bg);
  border: none;
  padding: 16px 32px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.tg-ov-btn:hover { background: var(--ember-2); transform: translateY(-2px); box-shadow: 0 8px 24px var(--ember-glow); }

/* === Audio status bar below canvas === */
.tg-audio-bar {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--bg-3);
  border: 1px solid var(--grid);
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2);
  font-family: 'JetBrains Mono', monospace;
}
.audio-status { color: var(--ember); white-space: nowrap; }
.tg-audio-hint {
  flex-basis: 100%;
  font-size: 10px; letter-spacing: 0.15em; color: var(--ink-3); text-transform: uppercase;
  line-height: 1.5;
}

/* === MOBILE TOUCH CONTROLS === */
.touch-controls {
  position: absolute;
  inset: auto 0 0 0;
  display: none;
  justify-content: space-between;
  align-items: flex-end;
  padding: 16px;
  pointer-events: none;
  z-index: 5;
}
.touch-controls.visible { display: flex; }
.touch-pad {
  position: relative;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: rgba(20, 18, 16, 0.6);
  border: 1px solid rgba(255, 77, 26, 0.4);
  pointer-events: auto;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.touch-stick {
  position: absolute;
  top: 50%; left: 50%;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--ember);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 14px rgba(255, 77, 26, 0.6);
  pointer-events: none;
}
.touch-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}
.touch-btn {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: rgba(255, 77, 26, 0.85);
  color: var(--bg);
  border: 1px solid var(--ember-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(255, 77, 26, 0.4);
  display: flex; align-items: center; justify-content: center;
  font-weight: 500;
  position: relative;
}
.touch-btn:active { background: var(--ember-2); transform: scale(0.94); }
.touch-btn.thrust {
  background: rgba(20, 18, 16, 0.7);
  color: var(--ember);
  border: 1px solid var(--ember);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: none;
}
.touch-btn.thrust:active { background: rgba(255, 77, 26, 0.2); }
.touch-btn.bomb {
  background: radial-gradient(circle at 30% 30%, rgba(255, 200, 100, 0.4), rgba(255, 77, 26, 0.85));
  color: var(--bg);
  border: 1.5px solid var(--ember-2);
  box-shadow: 0 0 22px rgba(255, 77, 26, 0.6), inset 0 0 14px rgba(255, 200, 100, 0.3);
  overflow: hidden;
}
.touch-btn.bomb.disabled {
  background: rgba(40, 36, 30, 0.7);
  color: var(--ink-3);
  border-color: var(--grid);
  box-shadow: none;
  cursor: not-allowed;
}
.touch-btn.bomb:active:not(.disabled) {
  transform: scale(0.9);
  box-shadow: 0 0 40px rgba(255, 200, 100, 0.9);
}
.bomb-label {
  position: relative;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
}
.bomb-cooldown {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  transform: rotate(-90deg);
}
.bomb-cooldown-track {
  fill: none;
  stroke: rgba(0, 0, 0, 0.3);
  stroke-width: 4;
}
.bomb-cooldown-fill {
  fill: none;
  stroke: rgba(10, 9, 8, 0.85);
  stroke-width: 8;
  stroke-dasharray: 289.03;
  stroke-dashoffset: 289.03;
  transition: stroke-dashoffset 0.1s linear;
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
  /* HUD stays flex but wraps onto multiple lines on small screens.
     We must NOT use grid-template-columns here — the base layout is flex. */
  .tg-hud {
    gap: 12px;
    row-gap: 14px;
  }
  .tg-hud-item {
    font-size: 9px;
  }
  .tg-hud-label { font-size: 8px; }
  .tg-hud-value { font-size: 12px; }
  /* SFX button stops being right-aligned; let it flow naturally */
  .tg-hud .btn-sfx { margin-left: 0; }
  /* Now Playing label tighter on small screens */
  .tg-hud-item .hud-now-playing { max-width: 120px; }
  /* Canvas keeps a sensible visible height (no aspect-ratio gymnastics).
     Using explicit min-height ensures the wrap is never collapsed by flex/grid
     parents — which is what was hiding the canvas on iPhone. */
  .tg-canvas-wrap {
    aspect-ratio: auto;
    width: 100%;
    height: 500px;
    min-height: 500px;
  }
  .tg-ov-title { font-size: 36px; }
  .tg-ov-controls { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
  .tg-hud { gap: 8px; row-gap: 12px; }
  .tg-hud-value { font-size: 12px; }
  .transmission-console { padding: 14px; }
  .tg-canvas-wrap {
    aspect-ratio: auto;
    width: 100%;
    height: 500px;
    min-height: 500px;
  }
  .touch-pad { width: 90px; height: 90px; }
  .touch-stick { width: 36px; height: 36px; }
  .touch-btn { width: 64px; height: 64px; }
}

/* === v13 — MOBILE / LANDSCAPE FIXES === */

/* Portrait detection: small viewports in portrait → suggest rotation */
.tg-rotate-prompt {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 8, 0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  gap: 20px;
}
.tg-rotate-icon {
  width: 64px;
  height: 64px;
  border: 2px solid var(--ember);
  border-radius: 8px;
  position: relative;
  animation: rotateIcon 2s ease-in-out infinite;
}
.tg-rotate-icon::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid var(--ember-2);
  border-radius: 4px;
}
@keyframes rotateIcon {
  0%, 30% { transform: rotate(0deg); }
  50%, 80% { transform: rotate(-90deg); }
  100% { transform: rotate(-90deg); }
}
.tg-rotate-title {
  font-family: 'Anton', sans-serif;
  font-size: 28px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.tg-rotate-desc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-2);
  max-width: 320px;
  line-height: 1.7;
}
.tg-rotate-play-anyway {
  margin-top: 8px;
  background: transparent;
  border: 1px solid var(--ink-3);
  color: var(--ink-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 8px 16px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.tg-rotate-play-anyway:hover {
  color: var(--ember);
  border-color: var(--ember);
}

/* Show rotate prompt only when in portrait + narrow viewport */
@media (max-width: 900px) and (orientation: portrait) {
  .tg-rotate-prompt:not(.dismissed) {
    display: flex;
  }
}

/* Compact game console on mobile */
@media (max-width: 760px) {
  .transmission-console {
    padding: 12px;
  }
  /* HUD stacks vertically on narrow screens for readability */
  .tg-hud {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    font-size: 11px;
  }
  .tg-hud-item .tg-hud-label {
    font-size: 8px;
  }
  .tg-hud-item .tg-hud-value {
    font-size: 13px;
  }
  .btn-sfx {
    grid-column: span 3;
    justify-self: end;
    font-size: 10px;
    padding: 4px 8px;
  }
  .tg-hud-volume {
    grid-column: span 3;
    justify-self: end;
  }
  /* Canvas aspect ratio more square on portrait, wider on landscape */
  .tg-canvas-wrap {
    aspect-ratio: 4 / 3;
  }
}

/* Landscape phones: prioritize horizontal space for the canvas */
@media (max-height: 500px) and (orientation: landscape) {
  .transmission-console {
    padding: 6px;
  }
  /* HUD ultra-compact: single horizontal row, minimal padding */
  .tg-hud {
    grid-template-columns: repeat(6, auto);
    gap: 8px;
    padding-bottom: 4px;
    margin-bottom: 4px;
    font-size: 9px;
    overflow-x: auto;
    border-bottom: 1px solid var(--grid);
    flex-wrap: nowrap;
  }
  .tg-hud-item {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  }
  .tg-hud-item .tg-hud-label { font-size: 7px; letter-spacing: 0.1em; }
  .tg-hud-item .tg-hud-value { font-size: 10px; }
  .btn-sfx { font-size: 8px; padding: 2px 5px; letter-spacing: 0.1em; }
  .tg-hud-volume { padding: 1px 5px; gap: 4px; margin-left: 4px; }
  .tg-hud-volume .tg-hud-label { font-size: 7px; }
  .tg-hud-volume .sfx-volume { width: 45px; height: 3px; }
  .tg-hud-volume .sfx-volume-label { font-size: 8px; min-width: 24px; }
  .powerup-indicator { font-size: 8px; }
  /* Canvas: take ~80% of available viewport height after HUD */
  .tg-canvas-wrap {
    aspect-ratio: auto;
    /* Available height ≈ 100vh - (HUD ~30px + console padding 12px + audio bar ~40px + section padding) */
    height: calc(100vh - 110px);
    min-height: 200px;
  }
  /* Audio bar compact too */
  .tg-audio-bar {
    margin-top: 6px;
    padding: 4px 8px;
    font-size: 8px;
    gap: 6px;
  }
  .tg-audio-hint { display: none; }
  /* Overlay typography smaller in landscape phone */
  .tg-ov-title { font-size: 28px !important; }
  .tg-ov-desc { font-size: 10px; margin-bottom: 16px; }
  .tg-ov-controls { font-size: 9px; gap: 8px; }
  .tg-ov-btn { font-size: 11px; padding: 10px 20px; }
}

/* === v15 — FULLSCREEN BUTTON + CSS FULLSCREEN MODE === */

/* Fullscreen toggle button in HUD */
.btn-fullscreen {
  background: transparent;
  border: 1px solid var(--ember);
  color: var(--ember);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
}
.btn-fullscreen:hover {
  background: var(--ember);
  color: var(--bg);
  transform: scale(1.05);
}
.btn-fullscreen.active {
  background: var(--ember);
  color: var(--bg);
}
/* Icon swap: ⛶ when not fullscreen, ✕ when in fullscreen */
.btn-fullscreen::before {
  content: '⛶';
  font-size: 16px;
}
.btn-fullscreen.active::before {
  content: '✕';
}

/* CSS-only fullscreen fallback (iOS) — promote the console to full viewport */
.transmission-console.tg-css-fullscreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  /* Use SMALL viewport height — this is what we get when Safari's URL bar is
     HIDDEN, which is the state we're aiming for via the scrollTo trick. Using
     100svh means our layout is sized for the no-bar state, so when Safari
     hides the bar, the console fits exactly. */
  height: 100svh;
  z-index: 9999;
  padding: 8px;
  display: flex;
  flex-direction: column;
  border: none;
}
.transmission-console.tg-css-fullscreen .tg-canvas-wrap {
  flex: 1;
  height: auto;
  aspect-ratio: auto;
  max-height: none;
  min-height: 0;
}
/* When CSS-fullscreen is active, hide EVERYTHING else on the page so iOS
   Safari doesn't render or scroll the rest of the page underneath. */
body.tg-css-fullscreen-active {
  overflow: hidden;
  /* Fix the body in place — prevents any rubber-band scroll that could
     re-trigger Safari's URL bar */
  position: fixed;
  width: 100%;
}
body.tg-css-fullscreen-active > nav,
body.tg-css-fullscreen-active > footer,
body.tg-css-fullscreen-active > section:not(.transmission) {
  display: none !important;
}
body.tg-css-fullscreen-active > section.transmission > .container > *:not(.transmission-console) {
  display: none !important;
}
body.tg-css-fullscreen-active > section.transmission {
  padding: 0;
  margin: 0;
  background: var(--bg);
}

/* Native fullscreen — apply same compact layout */
.transmission-console:fullscreen,
.transmission-console:-webkit-full-screen {
  padding: 8px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.transmission-console:fullscreen .tg-canvas-wrap,
.transmission-console:-webkit-full-screen .tg-canvas-wrap {
  flex: 1;
  height: auto;
  aspect-ratio: auto;
  max-height: none;
}
/* Compact HUD when in fullscreen (any orientation) */
.transmission-console:fullscreen .tg-hud,
.transmission-console:-webkit-full-screen .tg-hud,
.transmission-console.tg-css-fullscreen .tg-hud {
  font-size: 10px;
  gap: 8px;
  padding-bottom: 6px;
  margin-bottom: 6px;
}
.transmission-console:fullscreen .tg-audio-bar,
.transmission-console:-webkit-full-screen .tg-audio-bar,
.transmission-console.tg-css-fullscreen .tg-audio-bar {
  display: none;
}

/* Rotate prompt — when forced (e.g. fullscreen in portrait), override
   the default `display: none` and make it impossible to dismiss */
.tg-rotate-prompt.force-show {
  display: flex !important;
}
.tg-rotate-prompt.force-show .tg-rotate-play-anyway {
  display: none;
}

/* === v15 — PLAYER CONTROLS + PAUSE + MOBILE COMPACT FULLSCREEN === */

/* Common style for HUD action buttons (pause, prev, play, next, fullscreen) */
.btn-pause,
.btn-prev-track,
.btn-play-track,
.btn-next-track {
  background: transparent;
  border: 1px solid var(--grid);
  color: var(--ink-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
}
.btn-pause:hover,
.btn-prev-track:hover,
.btn-play-track:hover,
.btn-next-track:hover {
  border-color: var(--ember);
  color: var(--ember);
  transform: scale(1.05);
}
.btn-pause.active {
  background: var(--ember);
  color: var(--bg);
  border-color: var(--ember);
}

/* Now-playing label in HUD — truncate if track title too long */
.hud-now-playing {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ember);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  display: inline-block;
  vertical-align: middle;
}

/* Group of player track buttons (prev/play/next) — keep them tight together */
.tg-hud-player-controls {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

/* === MOBILE FULLSCREEN: compact HUD ===
   When in fullscreen on a small viewport, hide non-essential HUD items
   and shrink everything for max canvas real estate. */
@media (max-height: 500px) and (orientation: landscape),
       (max-width: 700px) {
  .transmission-console:fullscreen .tg-hud,
  .transmission-console:-webkit-full-screen .tg-hud,
  .transmission-console.tg-css-fullscreen .tg-hud {
    grid-template-columns: auto auto auto 1fr auto auto auto auto;
    gap: 6px;
    font-size: 9px;
    padding-bottom: 4px;
    margin-bottom: 4px;
  }
  /* Hide labels in fullscreen — values only */
  .transmission-console:fullscreen .tg-hud-label,
  .transmission-console:-webkit-full-screen .tg-hud-label,
  .transmission-console.tg-css-fullscreen .tg-hud-label {
    display: none;
  }
  /* Hide Lives, Survive, Bomb labels but keep values */
  .transmission-console:fullscreen .tg-hud-item,
  .transmission-console:-webkit-full-screen .tg-hud-item,
  .transmission-console.tg-css-fullscreen .tg-hud-item {
    font-size: 10px;
  }
  .transmission-console:fullscreen .tg-hud-item .tg-hud-value,
  .transmission-console:-webkit-full-screen .tg-hud-item .tg-hud-value,
  .transmission-console.tg-css-fullscreen .tg-hud-item .tg-hud-value {
    font-size: 11px;
  }
  /* In fullscreen mobile we keep the player controls (prev/play/next) so the
     pilot can change tracks during gameplay. Only the bulkier elements get
     hidden to free up HUD width. */
  .transmission-console:fullscreen .hud-now-playing,
  .transmission-console:-webkit-full-screen .hud-now-playing,
  .transmission-console.tg-css-fullscreen .hud-now-playing,
  .transmission-console:fullscreen .btn-sfx,
  .transmission-console:-webkit-full-screen .btn-sfx,
  .transmission-console.tg-css-fullscreen .btn-sfx,
  .transmission-console:fullscreen .tg-hud-volume,
  .transmission-console:-webkit-full-screen .tg-hud-volume,
  .transmission-console.tg-css-fullscreen .tg-hud-volume {
    display: none;
  }
  /* Player controls stay visible but smaller */
  .transmission-console:fullscreen .tg-hud-player-controls,
  .transmission-console:-webkit-full-screen .tg-hud-player-controls,
  .transmission-console.tg-css-fullscreen .tg-hud-player-controls {
    gap: 2px;
  }
  .transmission-console:fullscreen .btn-prev-track,
  .transmission-console:fullscreen .btn-play-track,
  .transmission-console:fullscreen .btn-next-track,
  .transmission-console:-webkit-full-screen .btn-prev-track,
  .transmission-console:-webkit-full-screen .btn-play-track,
  .transmission-console:-webkit-full-screen .btn-next-track,
  .transmission-console.tg-css-fullscreen .btn-prev-track,
  .transmission-console.tg-css-fullscreen .btn-play-track,
  .transmission-console.tg-css-fullscreen .btn-next-track {
    min-width: 26px;
    height: 24px;
    font-size: 11px;
    padding: 2px 5px;
  }
  /* Compact buttons */
  .transmission-console:fullscreen .btn-pause,
  .transmission-console:fullscreen .btn-fullscreen,
  .transmission-console:-webkit-full-screen .btn-pause,
  .transmission-console:-webkit-full-screen .btn-fullscreen,
  .transmission-console.tg-css-fullscreen .btn-pause,
  .transmission-console.tg-css-fullscreen .btn-fullscreen {
    min-width: 26px;
    height: 24px;
    font-size: 12px;
    padding: 2px 6px;
  }
}

/* === v17 — LEADERBOARD === */

/* Score entry block injected into death/victory overlays */
.score-entry {
  background: rgba(20, 18, 16, 0.5);
  border: 1px solid var(--ember);
  border-radius: 2px;
  padding: 20px 24px;
  margin-bottom: 20px;
  max-width: 520px;
  width: 100%;
  position: relative; /* so the close button can absolute-position */
}
.score-entry-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--grid);
  color: var(--ink-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
  padding: 0;
}
.score-entry-close:hover {
  border-color: var(--ember);
  color: var(--ember);
  transform: scale(1.1);
}
.score-entry-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 8px;
}
.score-entry-prompt {
  font-family: 'Fraunces', serif;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 14px;
}
.score-entry-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 12px;
}
.score-entry-input {
  flex: 1;
  background: rgba(10, 9, 8, 0.7);
  border: 1px solid var(--grid);
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  padding: 10px 14px;
  letter-spacing: 0.08em;
  outline: none;
  transition: border-color 0.2s;
}
.score-entry-input:focus {
  border-color: var(--ember);
}
.score-entry-submit {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 10px 18px;
  font-size: 12px;
}
.score-entry-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.score-entry-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--ink-2);
  min-height: 16px;
  text-transform: uppercase;
}
.score-entry-status .ember { color: var(--ember); }
.score-entry-leaderboard {
  margin-top: 16px;
}

/* Leaderboard table (used both in score entry and HoF overlay) */
.lb-row {
  display: grid;
  grid-template-columns: 32px 1fr 36px 90px;
  gap: 12px;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(255, 77, 26, 0.08);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}
.lb-row-head {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--grid);
  padding-bottom: 8px;
  margin-bottom: 4px;
}
.lb-row-me {
  background: rgba(255, 77, 26, 0.08);
  color: var(--ember);
  font-weight: 500;
}
.lb-row-victory .lb-rank,
.lb-row-victory .lb-name,
.lb-row-victory .lb-score {
  color: var(--ember);
}
.lb-rank { color: var(--ink-3); text-align: center; }
.lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0.05em; }
.lb-sector { text-align: center; font-size: 10px; color: var(--ink-3); }
.lb-score { text-align: right; color: var(--ember); }
.lb-row-head .lb-score { color: var(--ink-3); }
.lb-badge {
  display: inline-block;
  margin-left: 6px;
  color: var(--ember);
  font-size: 11px;
}
.lb-empty, .lb-loading {
  padding: 24px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* Hall of Fame overlay */
.overlay-hof {
  /* Inherits .tg-overlay positioning */
}
.overlay-hof .hof-leaderboard {
  width: 100%;
  max-width: 520px;
  margin: 20px 0 24px;
}

/* Hall of Fame button in HUD */
.btn-hof {
  background: transparent;
  border: 1px solid var(--grid);
  color: var(--ink-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1;
  padding: 5px 10px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn-hof:hover {
  border-color: var(--ember);
  color: var(--ember);
  transform: scale(1.05);
}
.btn-hof::before {
  content: '★';
  font-size: 12px;
}

/* Mobile / fullscreen: hide HoF button (player can still see it via end-of-game overlay) */
@media (max-height: 500px) and (orientation: landscape) {
  .transmission-console:fullscreen .btn-hof,
  .transmission-console:-webkit-full-screen .btn-hof,
  .transmission-console.tg-css-fullscreen .btn-hof {
    display: none;
  }
}