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

/* =============================================================
   RUBBER HOSE PALETTE — shared by splash + all overlay screens
   ============================================================= */
:root {
  --th-cream:     #F4E4C1;
  --th-ink:       #1A1410;
  --th-red:       #E85A4D;
  --th-red-dark:  #6A1F15;
  --th-gold:      #F4C74A;
  --th-highlight: #FFF8E7;
  --th-green:     #7AC555;
  --th-parchment: #E8D4A8;
}

/* =============================================================
   Z-INDEX SCALE — keep stacked elements coherent across the UI
   =============================================================
   1–2      base layers, inset sub-elements
   45       #score-popups (floats over game, under overlays)
   50–60    in-game mobile controls (joystick, fire, cam button)
   100      .overlay modal (menus, game over, victory, leaderboard)
   150      #fullscreen-btn
   300      #splash (first-click pre-menu)
   309      misc floating layer (below sound toggle, above overlay)
   310      #sound-toggle
   320      #orientation-gate (above splash + sound toggle)
   400      #toast-stack (auto-dismissing — top of the stack)
   ============================================================= */

/* =============================================================
   SPLASH — Rubber hose / 1930s-cartoon intro screen
   Dark-theater palette + inline SVG mascot + CSS animations
   ============================================================= */
#splash {
  position: fixed;
  inset: 0;
  z-index: 300;
  background:
    radial-gradient(ellipse at 50% 48%, #3A2A1F 0%, #1A110B 45%, #080504 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  font-family: 'Titan One', 'Impact', 'Arial Black', system-ui, sans-serif;
  color: var(--th-highlight);
  -webkit-tap-highlight-color: transparent;
}

/* Film grain overlay — SVG turbulence as data URI, no network request */
#splash::before {
  content: '';
  position: absolute;
  inset: -4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  opacity: 0.11;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

/* Warm inner spotlight — keeps the vintage-film "halo" feel on dark bg */
#splash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at center, rgba(244, 199, 74, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

#splash.hidden { display: none; }

.splash-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2.5vh, 28px);
  padding: clamp(16px, 4vh, 32px);
  max-width: 100%;
}

/* ---------- Title ---------- */
.splash-title {
  font-size: clamp(2.6rem, 10vw, 6rem);
  line-height: 1;
  margin: 0;
  display: flex;
  gap: 0.02em;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--th-red);
  text-shadow:
    -2px -2px 0 var(--th-ink),
     2px -2px 0 var(--th-ink),
    -2px  2px 0 var(--th-ink),
     2px  2px 0 var(--th-ink),
     4px  4px 0 #6A1F15,
     7px  7px 0 var(--th-ink);
  user-select: none;
}

.splash-title span {
  display: inline-block;
  animation: titleWobble 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 70ms);
  transform-origin: 50% 100%;
}

.splash-title .splash-title-gap {
  width: 0.5em;
  animation: none;
}

/* ---------- Mascot ---------- */
.mascot {
  width: clamp(200px, 45vw, 380px);
  height: auto;
  filter: drop-shadow(0 8px 0 rgba(26, 20, 16, 0.10));
}

/* Body group: bouncy driving motion (tracks stay grounded — they're outside this group) */
.mascot-body {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: mascotDrive 1.2s ease-in-out infinite;
}

.mascot-antenna {
  transform-box: fill-box;
  transform-origin: 236px 128px;
  animation: antennaSway 1.8s ease-in-out infinite alternate;
}

/* ---------- Prompt ---------- */
.splash-prompt {
  font-family: 'Titan One', 'Impact', 'Arial Black', system-ui, sans-serif;
  font-size: clamp(0.95rem, 2.6vw, 1.4rem);
  letter-spacing: clamp(2px, 0.7vw, 5px);
  color: var(--th-gold);
  text-shadow: 2px 2px 0 #0A0604;
  margin: 0;
  animation: promptBob 1.1s ease-in-out infinite;
  text-transform: uppercase;
  user-select: none;
}

/* ---------- Loading state (class toggled from JS on click) ---------- */
#splash.is-loading .mascot-antenna  { animation-duration: 0.45s; }
#splash.is-loading .mascot-body     { animation-duration: 0.9s; }

/* ---------- Keyframes ---------- */
@keyframes antennaSway {
  0%   { transform: rotate(-5deg); }
  100% { transform: rotate(5deg); }
}
@keyframes titleWobble {
  0%, 100% { transform: rotate(-3deg) translateY(-2px); }
  50%      { transform: rotate(3deg)  translateY(2px); }
}
@keyframes promptBob {
  0%, 100% { transform: translateY(0);   opacity: 0.78; }
  50%      { transform: translateY(-3px); opacity: 1; }
}
/* ---------- Landscape phone: mascot left of stacked title+prompt ---------- */
@media (max-height: 460px) and (orientation: landscape) {
  .splash-stage {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "mascot title"
      "mascot prompt";
    column-gap: clamp(16px, 4vw, 36px);
    row-gap: 6px;
    align-items: center;
  }
  .splash-stage .mascot        { grid-area: mascot; width: clamp(140px, 34vh, 240px); }
  .splash-stage .splash-title  { grid-area: title;  font-size: clamp(2rem, 8vh, 4.5rem); }
  .splash-stage .splash-prompt { grid-area: prompt; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  #splash *, #splash *::before, #splash *::after {
    animation: none !important;
  }
}

/* Persistent sound toggle — visible on splash + menu, hidden during gameplay */
#sound-toggle {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 310;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 3px solid var(--th-ink);
  background: var(--th-cream);
  color: var(--th-ink);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 3px 3px 0 var(--th-ink);
  transition: transform 80ms ease, box-shadow 80ms ease, background 120ms ease;
}
#sound-toggle:hover { background: var(--th-highlight); }
#sound-toggle:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--th-ink);
  background: var(--th-gold);
}
#sound-toggle.hidden { display: none; }
#sound-toggle svg.hidden { display: none; }

/* Icon sizing consistent across splash + menu */
#sound-toggle svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.6;
}

#minimap {
  position: fixed;
  top: 12px;
  left: 60px;           /* right of #sound-toggle (12 + 40 + 8 gap) */
  width: 150px;
  height: 150px;
  z-index: 309;         /* below sound-toggle, above overlay */
  border: 4px solid var(--th-ink);
  background: var(--th-cream);
  box-shadow: 3px 3px 0 var(--th-ink);
  border-radius: 6px;
  pointer-events: none;
}
#minimap.hidden { display: none; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #111;
  font-family: 'Courier New', monospace;
  color: #eee;
}

#game-wrapper {
  display: flex;
  width: 100%;
  height: 100vh;  /* fallback */
  height: 100dvh; /* dynamic viewport — iOS URL-bar collapse handled automatically */
}

#gameCanvas {
  display: block;
  flex: 1;
  height: 100%;
  min-width: 0;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Mobile touch controls */
#mobile-controls {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 60;
  pointer-events: none;
}

#mobile-controls.hidden {
  display: none;
}

#joystick-zone {
  position: absolute;
  left: env(safe-area-inset-left, 0);
  top: 0;
  width: 40%; height: 100%;
  pointer-events: auto;
}

#fire-btn {
  position: absolute;
  right: max(30px, env(safe-area-inset-right, 30px));
  bottom: max(50px, env(safe-area-inset-bottom, 50px));
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(255, 80, 40, 0.4);
  border: 3px solid rgba(255, 100, 60, 0.65);
  color: #fff;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

#fire-btn.pressed {
  background: rgba(255, 120, 60, 0.7);
  transform: scale(0.92);
}

#cam-btn {
  position: absolute;
  right: max(30px, env(safe-area-inset-right, 30px));
  bottom: calc(max(50px, env(safe-area-inset-bottom, 50px)) + 95px);
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(80, 160, 255, 0.3);
  border: 3px solid rgba(100, 180, 255, 0.6);
  color: #fff;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

#cam-btn.pressed {
  background: rgba(100, 180, 255, 0.6);
  transform: scale(0.92);
}

/* Sidebar HUD — brushed metal panel */
/* Rubber-hose sidebar — parchment panel, thick ink border, hard drop shadow. */
#sidebar {
  position: relative;
  width: 135px;
  background: var(--th-parchment);
  border-left: 4px solid var(--th-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 10px;
  gap: 10px;
  flex-shrink: 0;
  z-index: 50;
  box-shadow: -3px 3px 0 var(--th-ink);
}

#sidebar.hidden {
  display: none;
}

/* Each sub-section is a cream card with an ink border + hard drop shadow. */
.sb-section {
  background: var(--th-cream);
  border: 2px solid var(--th-ink);
  border-radius: 7px;
  padding: 7px 6px;
  box-shadow: 2px 2px 0 var(--th-ink);
  width: 100%;
  box-sizing: border-box;
}

/* ---- Toast notifications (auto-dismissing bottom-center) ---- */
#toast-stack {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 400;
  pointer-events: none;
}
.toast {
  background: var(--th-cream);
  color: var(--th-ink);
  border: 3px solid var(--th-ink);
  box-shadow: 3px 3px 0 var(--th-ink);
  padding: 10px 18px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  letter-spacing: 0.5px;
  max-width: 80vw;
  text-align: center;
  animation: toast-fade 3s ease-out forwards;
}
.toast--error {
  background: var(--th-red);
  color: var(--th-highlight);
}
@keyframes toast-fade {
  0%   { opacity: 0; transform: translateY(10px); }
  10%  { opacity: 1; transform: translateY(0); }
  85%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}

/* ---- Score popups (cartoon burst + number) ---- */
#score-popups {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 45;
}
.score-popup-wrap {
  position: absolute;
  width: 78px;
  height: 78px;
  margin-left: -39px;
  margin-top: -39px;
  pointer-events: none;
  will-change: transform, opacity;
  animation: score-pop 1s ease-out forwards;
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,0.55));
}
/* Cartoon starburst — 12-point jagged burst.
   Outer layer is solid black to form a thick outline around the inner gradient burst. */
.score-popup,
.score-popup-inner {
  position: absolute;
  clip-path: polygon(
    50%   0%,   61%  18%,  82%  12%,
    78%  33%,  100%  38%,  82%  52%,
   100%  67%,  78%  70%,  88%  92%,
    65%  80%,  60% 100%,  50%  82%,
    40% 100%,  35%  80%,  12%  92%,
    22%  70%,   0%  67%,  18%  52%,
     0%  38%,  22%  33%,  18%  12%,
    39%  18%
  );
}
.score-popup {
  inset: 0;
  background: #000;
}
.score-popup-inner {
  inset: 6px;
  background:
    radial-gradient(circle at 42% 38%,
      #fff8a8 0%,
      #ffd94a 22%,
      #ff9e1a 55%,
      #e85500 90%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.score-popup-inner span {
  font-family: 'Courier New', monospace;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 1px;
  color: #fff;
  -webkit-text-stroke: 2px #000;
  text-shadow:
    1px 1px 0 #000,
    -1px -1px 0 #000,
    0 2px 3px rgba(0,0,0,0.5);
  transform: rotate(-6deg);
}
@keyframes score-pop {
  0%   { transform: scale(0.2) rotate(-12deg); opacity: 0; }
  18%  { transform: scale(1.35) rotate(6deg);  opacity: 1; }
  32%  { transform: scale(1.0)  rotate(0deg);  opacity: 1; }
  70%  { transform: scale(1.0)  rotate(-2deg); opacity: 1; }
  100% { transform: translate(0, -55px) scale(0.9) rotate(0deg); opacity: 0; }
}

/* PIU! shot popup — smaller, quicker, yellow starburst with cartoon text */
.shot-popup-wrap {
  position: absolute;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  margin-top: -28px;
  pointer-events: none;
  will-change: transform, opacity;
  animation: shot-pop 0.75s ease-out forwards;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.5));
}
.shot-popup,
.shot-popup-inner {
  position: absolute;
  clip-path: polygon(
    50%   0%,   61%  18%,  82%  12%,
    78%  33%,  100%  38%,  82%  52%,
   100%  67%,  78%  70%,  88%  92%,
    65%  80%,  60% 100%,  50%  82%,
    40% 100%,  35%  80%,  12%  92%,
    22%  70%,   0%  67%,  18%  52%,
     0%  38%,  22%  33%,  18%  12%,
    39%  18%
  );
}
.shot-popup {
  inset: 0;
  background: #1A1410;
}
.shot-popup-inner {
  inset: 4px;
  background:
    radial-gradient(circle at 42% 38%,
      #ffffff 0%,
      #f2f2f2 55%,
      #cfcfcf 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.shot-popup-inner span {
  font-family: 'Titan One', 'Impact', 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: #1A1410;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  transform: rotate(-6deg);
  white-space: nowrap;
}
@keyframes shot-pop {
  0%   { transform: scale(0.2) rotate(-14deg); opacity: 0; }
  20%  { transform: scale(1.25) rotate(8deg);  opacity: 1; }
  40%  { transform: scale(0.95) rotate(-2deg); opacity: 1; }
  100% { transform: translate(0, -38px) scale(0.8) rotate(0deg); opacity: 0; }
}

/* Mobile: shrink shot + score popups so they don't dominate the small viewport */
@media (max-height: 480px), (max-width: 768px) {
  .score-popup-wrap {
    width: 52px;
    height: 52px;
    margin-left: -26px;
    margin-top: -26px;
  }
  .score-popup-inner span {
    font-size: 11px;
    letter-spacing: 0.5px;
    -webkit-text-stroke: 1.5px #000;
  }
  .shot-popup-wrap {
    width: 38px;
    height: 38px;
    margin-left: -19px;
    margin-top: -19px;
  }
  .shot-popup {
    /* thinner outer ring on mobile so the small burst still reads */
  }
  .shot-popup-inner {
    inset: 3px;
  }
  .shot-popup-inner span {
    font-size: 9px;
  }
}

/* Death popup — big flaming starburst on player death */
.death-popup-wrap {
  position: absolute;
  width: 150px;
  height: 150px;
  margin-left: -75px;
  margin-top: -75px;
  pointer-events: none;
  will-change: transform, opacity;
  animation: death-pop 1.1s ease-out forwards;
  filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.65));
}
.death-popup,
.death-popup-inner {
  position: absolute;
  clip-path: polygon(
    50%   0%,   61%  18%,  82%  12%,
    78%  33%,  100%  38%,  82%  52%,
   100%  67%,  78%  70%,  88%  92%,
    65%  80%,  60% 100%,  50%  82%,
    40% 100%,  35%  80%,  12%  92%,
    22%  70%,   0%  67%,  18%  52%,
     0%  38%,  22%  33%,  18%  12%,
    39%  18%
  );
}
.death-popup {
  inset: 0;
  background: #1A1410;
}
.death-popup-inner {
  inset: 8px;
  background:
    radial-gradient(circle at 44% 36%,
      #fff2a8 0%,
      #ffc84a 18%,
      #ff7a1a 45%,
      #e8341a 72%,
      #8c1410 100%);
}
/* Text overlay — NOT clipped by the starburst, so long words stay fully visible */
.death-popup-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Titan One', 'Impact', 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 1px;
  color: #fff2d8;
  -webkit-text-stroke: 3px #1A1410;
  paint-order: stroke fill;
  text-shadow:
    2px 3px 0 #1A1410,
    -1px -1px 0 #1A1410;
  transform: rotate(-6deg);
  white-space: nowrap;
}
@keyframes death-pop {
  0%   { transform: scale(0.1) rotate(-22deg); opacity: 0; }
  12%  { transform: scale(1.55) rotate(10deg); opacity: 1; }
  25%  { transform: scale(1.15) rotate(-4deg); opacity: 1; }
  55%  { transform: scale(1.05) rotate(2deg);  opacity: 1; }
  100% { transform: scale(1.3) rotate(0deg);   opacity: 0; }
}

/* Gravestone + ghost popup — shown when the player runs out of lives */
.grave-popup-wrap {
  position: absolute;
  width: 140px;
  height: 240px;
  margin-left: -70px;
  margin-top: -230px; /* anchors the stone base at the death point */
  pointer-events: none;
  z-index: 50;
}
.grave-popup-stone {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -60px;
  width: 120px;
  height: 140px;
  transform-origin: 50% 100%;
  animation: grave-stone-appear 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  filter: drop-shadow(2px 4px 0 rgba(0,0,0,0.5));
}
.grave-popup-ghost {
  position: absolute;
  bottom: 60px; /* starts behind the stone's headstone area */
  left: 50%;
  margin-left: -40px;
  width: 80px;
  height: 90px;
  opacity: 0;
  animation: grave-ghost-rise 2.1s ease-out 0.35s forwards;
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,0.35));
}

@keyframes grave-stone-appear {
  0%   { transform: scale(0.1) translateY(30px); opacity: 0; }
  60%  { transform: scale(1.15) translateY(0);   opacity: 1; }
  100% { transform: scale(1) translateY(0);      opacity: 1; }
}

@keyframes grave-ghost-rise {
  0%   { transform: translate(0, 0) rotate(-3deg);     opacity: 0; }
  12%  { transform: translate(0, -10px) rotate(3deg);  opacity: 1; }
  28%  { transform: translate(-10px, -35px) rotate(-4deg); opacity: 1; }
  48%  { transform: translate(10px, -75px) rotate(4deg);   opacity: 1; }
  68%  { transform: translate(-8px, -115px) rotate(-3deg); opacity: 0.85; }
  88%  { transform: translate(6px, -150px) rotate(2deg);   opacity: 0.4; }
  100% { transform: translate(0, -180px) rotate(0deg);     opacity: 0; }
}

/* Score readout (top of sidebar) */
#sb-score {
  width: 100%;
  text-align: center;
  padding: 4px 2px;
}
.sb-score-label {
  font-family: 'Titan One', Impact, sans-serif;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--th-ink);
  margin-bottom: 1px;
}
#sb-score-value {
  font-family: 'Titan One', Impact, sans-serif;
  font-size: 13px;
  color: var(--th-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  transition: transform 0.15s ease-out;
}
#sb-score-value.bump {
  transform: scale(1.18);
}

/* Enemy icon grid */
#sb-enemies {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  justify-items: center;
  align-items: center;
  margin-bottom: auto;
}

/* Top-down tank icons (background-image set by JS) */
.enemy-icon {
  width: 22px;
  height: 22px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.enemy-icon.enemy-heavy {
  width: 26px;
  height: 26px;
}

/* Status section — rank + active power-ups */
#sb-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

#sb-rank {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

#sb-rank-icon {
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#sb-rank-stars {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.sb-star {
  width: 12px;
  height: 12px;
  background-size: contain;
  background-repeat: no-repeat;
}

#sb-timers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
}

.sb-timer {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  justify-content: center;
}

.sb-timer-icon {
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.sb-timer-text {
  font-family: 'Courier New', monospace;
  font-size: 9px;
  font-weight: bold;
  color: var(--th-ink);
}

/* Player sections */
#sb-players {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.sb-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.sb-player-label {
  font-family: 'Titan One', Impact, sans-serif;
  font-size: 9px;
  color: var(--th-ink);
  letter-spacing: 1px;
}

.sb-player-info {
  display: flex;
  align-items: center;
  gap: 2px;
}

.sb-tank-icon {
  width: 26px;
  height: 26px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.sb-lives-x {
  font-family: 'Courier New', monospace;
  font-size: 9px;
  font-weight: bold;
  color: var(--th-ink);
}

.sb-player-info span {
  font-family: 'Titan One', Impact, sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: var(--th-ink);
}

.sb-player.hidden {
  display: none;
}

/* Stage flag */
#sb-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.sb-flag {
  width: 30px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#sb-stage-num {
  font-family: 'Titan One', Impact, sans-serif;
  font-size: 10px;
  color: var(--th-ink);
  letter-spacing: 1px;
}

/* Power-up indicators */
#sb-powerup {
  font-family: 'Courier New', monospace;
  font-size: 9px;
  color: var(--th-ink);
  text-align: center;
  line-height: 1.3;
  min-height: 12px;
}

/* ---- Mobile HUD overlay (visible only on touch devices in any camera mode) ---- */
#mobile-hud { display: none; }

.mhud-chip {
  background: var(--th-cream);
  color: var(--th-ink);
  border: 2px solid var(--th-ink);
  box-shadow: 2px 2px 0 var(--th-ink);
  border-radius: 6px;
  padding: 4px 8px;
  font-family: 'Titan One', Impact, sans-serif;
  font-size: 12px;
  letter-spacing: 0.5px;
  pointer-events: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
#mhud-stars { letter-spacing: 1px; color: var(--th-gold); -webkit-text-stroke: 0.6px var(--th-ink); font-size: 14px; }
#mhud-lives-p2 { color: var(--th-ink); }

/* Mobile: hide the desktop sidebar, render the mobile HUD as three top groups:
   left chips, center stars chip, right chips. Fullscreen-btn stays at far right.
   `pointer: coarse` catches touch devices regardless of viewport width so the
   rule fires on phones in landscape (where width is 844–926 px and the old
   `max-width: 768px` threshold would miss entirely). */
@media (pointer: coarse), (max-width: 768px) {
  #sidebar { display: none !important; }

  #mobile-hud { display: contents; }
  #mobile-hud.hidden > * { display: none; }

  #mhud-left-group,
  #mhud-right-group {
    position: fixed;
    top: max(14px, env(safe-area-inset-top, 14px));
    display: flex;
    flex-direction: row;
    gap: 6px;
    z-index: 309;
    pointer-events: none;
  }
  #mhud-left-group  { left: max(14px, env(safe-area-inset-left, 14px)); }
  #mhud-right-group { right: calc(max(14px, env(safe-area-inset-right, 14px)) + 58px); }

  /* Stars floats at the middle of the top bar, independent of left/right groups. */
  #mhud-stars {
    position: fixed;
    top: max(14px, env(safe-area-inset-top, 14px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 309;
    flex: none;
  }

  /* When the minimap is showing top-left (3D/Cockpit + minimapEnabled),
     slide the left chip group past the minimap's right edge. */
  #mobile-hud.with-minimap #mhud-left-group { left: 185px; }

  .mhud-chip.hidden { display: none; }
}

@media (pointer: coarse) and (max-height: 460px), (max-width: 768px) and (max-height: 460px) {
  .mhud-chip    { font-size: 10px; padding: 3px 6px; }
  #mhud-stars   { font-size: 12px; }
}

/* =============================================================
   OVERLAY — rubber hose theater backdrop for all menu screens
   ============================================================= */
.overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 48%, #3A2A1F 0%, #1A110B 45%, #080504 100%);
  z-index: 100;
  overflow: hidden;
  font-family: 'Titan One', 'Impact', 'Arial Black', system-ui, sans-serif;
  color: var(--th-highlight);
  -webkit-tap-highlight-color: transparent;
}

/* Film grain overlay (same SVG turbulence pattern as the splash) */
.overlay::before {
  content: '';
  position: fixed;
  inset: -4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  opacity: 0.10;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

/* Warm gold inner halo */
.overlay::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at center, rgba(244, 199, 74, 0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.overlay.hidden {
  display: none;
}

.overlay-box {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: clamp(20px, 4vh, 40px) clamp(20px, 5vw, 48px);
  background: transparent;
  border: none;
  max-width: 680px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

/* Stacked-column menu layout — default for desktop + portrait. Splits into
   two columns only on short screens (phones in landscape, see the
   max-height:480px block below) so the menu fits without scrolling. */
.menu-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}
.menu-grid .menu-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  width: 240px;
  max-width: 100%;
}
.menu-grid .menu-col .menu-btn {
  width: 100%;
  min-width: 0;
}
.menu-grid .option-label {
  margin-bottom: 6px;
  text-align: left;
}
/* Spacer that only reserves vertical space when the grid is in 2-column
   mode — used to push lobby CREATE ROOM down one row to line up with the
   first mode button. Hidden on stacked desktop so it doesn't leave a gap. */
.menu-grid .grid-spacer {
  display: none;
}

/* Tighter padding on short screens (phones in landscape) */
@media (max-height: 480px) {
  .overlay-box {
    padding: 18px 28px;
  }
  .overlay-box h1 {
    font-size: 1.6em;
    margin-bottom: 8px;
  }
  .overlay-box h2 {
    font-size: 1.15em;
    margin-bottom: 6px;
  }
  .overlay-box p {
    font-size: 0.85em;
    margin-bottom: 4px;
  }
  .menu-buttons {
    margin-top: 12px;
    gap: 6px;
  }
  .menu-btn {
    font-size: 0.92em;
    padding: 9px 22px;
    min-width: 170px;
    box-shadow: 3px 3px 0 var(--th-ink);
  }
  .menu-btn:active,
  .menu-btn.pressed {
    box-shadow: 1px 1px 0 var(--th-ink);
  }
  .menu-btn--hero {
    font-size: 1.15em !important;
    padding: 10px 28px !important;
    min-width: 200px !important;
    box-shadow: 4px 4px 0 var(--th-ink);
  }
  .menu-grid {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    margin-top: 10px;
    gap: 14px 18px;
  }
  .menu-grid .menu-col {
    flex: 1 1 220px;
    width: auto;
    max-width: 280px;
    min-width: 0;
    gap: 6px;
  }
  .menu-grid .grid-spacer {
    display: block;
    visibility: hidden;
  }
  .overlay-box .stats {
    margin-top: 8px;
  }
  .rh-mascot-small { width: clamp(52px, 9vh, 78px); }
  .rh-title { font-size: clamp(1.4rem, 6vh, 2rem); }
  .rh-tagline, .rh-stats { margin: 0 !important; }
  .rh-secondary-grid {
    gap: 8px;
    max-width: 440px;
  }
  .ctrl-btn {
    font-size: 0.72em;
    padding: 6px 12px;
    box-shadow: 2px 2px 0 var(--th-ink);
  }
  .ctrl-btn:active { box-shadow: 0 0 0 var(--th-ink); }

  /* Leaderboard: compact for landscape phones so 5 rows + pagination + BACK all fit */
  .overlay-box.leaderboard h2        { margin-bottom: 2px !important; }
  .overlay-box.leaderboard .option-group { margin: 2px 0 !important; }
  .overlay-box.leaderboard #lb-body  { max-height: 42vh !important; min-height: 80px !important; }
  .overlay-box.leaderboard .lb-table { font-size: 0.85em; }
  .overlay-box.leaderboard .lb-table .lb-head th { padding: 3px 10px; font-size: 0.7em; }
  .overlay-box.leaderboard .lb-table tbody .lb-row td { padding: 2px 10px; }
  .overlay-box.leaderboard .lb-pagination { margin-top: 4px; gap: 10px; }
  .overlay-box.leaderboard .menu-buttons { margin-top: 4px; gap: 4px; }
}

.overlay-box h1 {
  font-family: 'Titan One', 'Impact', 'Arial Black', system-ui, sans-serif;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--th-red);
  text-shadow:
    -2px -2px 0 var(--th-ink),
     2px -2px 0 var(--th-ink),
    -2px  2px 0 var(--th-ink),
     2px  2px 0 var(--th-ink),
     4px  4px 0 var(--th-red-dark),
     7px  7px 0 var(--th-ink);
}

.overlay-box h2 {
  font-family: 'Titan One', 'Impact', 'Arial Black', system-ui, sans-serif;
  font-size: clamp(1.3rem, 3.5vw, 1.8rem);
  margin-bottom: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--th-gold);
  text-shadow: 3px 3px 0 var(--th-ink);
}

.overlay-box p {
  font-family: 'Courier New', monospace;
  font-size: 1em;
  margin-bottom: 8px;
  color: var(--th-cream);
  line-height: 1.45;
}

.overlay-box .action {
  margin-top: 24px;
  font-family: 'Titan One', 'Impact', 'Arial Black', system-ui, sans-serif;
  font-size: 1.1em;
  letter-spacing: 2px;
  color: var(--th-gold);
  text-shadow: 2px 2px 0 var(--th-ink);
  animation: blink 1s infinite;
}

@keyframes blink {
  50% { opacity: 0.4; }
}

.overlay-box .stats {
  margin-top: 12px;
  font-size: 0.85em;
  color: var(--th-parchment);
  opacity: 0.75;
}

/* Controls toggle */
.controls-toggle {
  margin: 20px 0 8px;
}

.controls-toggle p {
  margin-bottom: 10px;
  color: #aaa;
}

.ctrl-btn {
  font-family: 'Titan One', 'Impact', 'Arial Black', system-ui, sans-serif;
  font-size: 0.8em;
  letter-spacing: 1px;
  padding: 8px 18px;
  margin: 0 2px;
  background: var(--th-cream);
  color: var(--th-red-dark);
  border: 2.5px solid var(--th-ink);
  border-radius: 8px;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--th-ink);
  transition: transform 80ms ease, box-shadow 80ms ease, background 120ms ease, color 120ms ease;
}

.ctrl-btn:hover {
  background: var(--th-highlight);
  color: var(--th-red);
}

.ctrl-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--th-ink);
}

.ctrl-btn.active {
  background: var(--th-red);
  color: var(--th-highlight);
  text-shadow: 1px 1px 0 var(--th-red-dark);
}
.ctrl-btn.active:hover {
  background: #F16A5D;
  color: var(--th-highlight);
}

.ctrl-btn:disabled,
.ctrl-btn[disabled] {
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 3px 3px 0 var(--th-ink) !important;
}

/* Menu buttons */
.menu-buttons {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.menu-btn {
  font-family: 'Titan One', 'Impact', 'Arial Black', system-ui, sans-serif;
  font-size: 0.92em;
  padding: 10px 24px;
  min-width: 190px;
  background: var(--th-cream);
  color: var(--th-red-dark);
  border: 3px solid var(--th-ink);
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--th-ink);
  transition: transform 80ms ease, box-shadow 80ms ease, background 120ms ease, color 120ms ease;
}

.menu-btn:hover {
  background: var(--th-highlight);
  color: var(--th-red);
}

.menu-btn:active,
.menu-btn.pressed {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--th-ink);
}

.menu-btn:disabled,
.menu-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 4px 4px 0 var(--th-ink) !important;
}

/* Red hero variant — used for primary call-to-action (START GAME, RETRY) */
.menu-btn--hero {
  font-size: 1.35em;
  padding: 14px 42px;
  min-width: 240px;
  background: var(--th-red);
  color: var(--th-highlight);
  border-width: 4px;
  box-shadow: 5px 5px 0 var(--th-ink);
  text-shadow: 2px 2px 0 var(--th-red-dark);
  letter-spacing: 2.5px;
  animation: heroBreathe 1.8s ease-in-out infinite;
}

.menu-btn--hero:hover {
  background: #F16A5D;
  color: var(--th-highlight);
}

.menu-btn--hero:active,
.menu-btn--hero.pressed {
  transform: translate(4px, 4px);
  box-shadow: 1px 1px 0 var(--th-ink);
}

/* Active toggle variant — used in Options radios, Leaderboard tabs */
.menu-btn--active {
  background: var(--th-red);
  color: var(--th-highlight);
  text-shadow: 1px 1px 0 var(--th-red-dark);
}
.menu-btn--active:hover {
  background: #F16A5D;
  color: var(--th-highlight);
}

@keyframes heroBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .menu-btn--hero { animation: none; }
}

/* Options screen */
.option-group {
  margin: 20px 0;
  text-align: center;
}

.option-label {
  font-family: 'Titan One', 'Impact', 'Arial Black', system-ui, sans-serif;
  font-size: 0.95em;
  color: var(--th-gold);
  margin-bottom: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--th-ink);
}

.option-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.volume-row {
  align-items: center;
  gap: 12px;
}
.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 200px;
  height: 8px;
  background: var(--th-ink);
  border: 2px solid var(--th-ink);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--th-gold);
  border: 3px solid var(--th-ink);
  box-shadow: 2px 2px 0 var(--th-ink);
  cursor: pointer;
}
.volume-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--th-gold);
  border: 3px solid var(--th-ink);
  box-shadow: 2px 2px 0 var(--th-ink);
  cursor: pointer;
}
.volume-pct {
  font-family: 'Titan One', 'Impact', 'Arial Black', system-ui, sans-serif;
  font-size: 0.95em;
  color: var(--th-gold);
  min-width: 44px;
  text-align: right;
  text-shadow: 1px 1px 0 var(--th-ink);
}

/* Screen accents — stay rubber-hose palette-aligned */
.game-over h1 {
  color: var(--th-red);
  text-shadow:
    -2px -2px 0 var(--th-ink), 2px -2px 0 var(--th-ink),
    -2px  2px 0 var(--th-ink), 2px  2px 0 var(--th-ink),
     5px  5px 0 var(--th-red-dark),
     9px  9px 0 var(--th-ink);
  font-size: clamp(2.4rem, 7vw, 3.6rem);
}
.base-lost {
  color: var(--th-gold);
  font-family: 'Titan One', 'Impact', 'Arial Black', system-ui, sans-serif;
  font-size: 1.1em;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 var(--th-ink);
}
.level-complete h1 {
  color: var(--th-green);
  text-shadow:
    -2px -2px 0 var(--th-ink), 2px -2px 0 var(--th-ink),
    -2px  2px 0 var(--th-ink), 2px  2px 0 var(--th-ink),
     4px  4px 0 #2D4A22,
     7px  7px 0 var(--th-ink);
}
.victory h1 {
  color: var(--th-gold);
  text-shadow:
    -2px -2px 0 var(--th-ink), 2px -2px 0 var(--th-ink),
    -2px  2px 0 var(--th-ink), 2px  2px 0 var(--th-ink),
     5px  5px 0 #A87B18,
     9px  9px 0 var(--th-ink);
  font-size: clamp(2.4rem, 7vw, 3.6rem);
}

/* How to Play screen */
.overlay-box.help {
  max-width: 580px;
}

#help-body {
  max-height: 58vh;
  overflow-y: auto;
  text-align: left;
  padding: 4px 14px 4px 10px;
  margin-top: 10px;
}

.help-section {
  margin-bottom: 20px;
}

.help-section .option-label {
  text-align: center;
  margin-bottom: 10px;
}

.help-section p {
  font-family: 'Courier New', monospace;
  font-size: 0.92em;
  line-height: 1.55;
  margin-bottom: 6px;
  color: var(--th-cream);
}

.help-section p b {
  font-family: 'Titan One', 'Impact', 'Arial Black', system-ui, sans-serif;
  color: var(--th-gold);
  letter-spacing: 1px;
}

.help-story {
  font-style: italic;
  color: var(--th-parchment) !important;
  opacity: 0.85;
}

.powerup-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Courier New', monospace;
  font-size: 0.92em;
  color: var(--th-cream);
}

.pu-item b {
  font-family: 'Titan One', 'Impact', 'Arial Black', system-ui, sans-serif;
  color: var(--th-gold);
  letter-spacing: 1px;
}

.pu-dot {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--th-ink);
  box-shadow: 2px 2px 0 var(--th-ink);
  flex-shrink: 0;
}

/* ============================================================
   First-time tutorial overlay — used by startTutorial() in main.js
   ============================================================ */
.overlay-box.tutorial {
  max-width: 560px;
}

.tut-body {
  margin: 14px 0 18px;
  text-align: left;
}

.tut-body p {
  font-family: 'Courier New', monospace;
  font-size: 0.95em;
  line-height: 1.55;
  margin-bottom: 8px;
  color: var(--th-cream);
}

.tut-body p b {
  font-family: 'Titan One', 'Impact', 'Arial Black', system-ui, sans-serif;
  color: var(--th-gold);
  letter-spacing: 1px;
}

.tut-body .help-story {
  font-style: italic;
  color: var(--th-parchment);
  opacity: 0.9;
  text-align: center;
  font-size: 1em;
}

.tut-body .option-label {
  text-align: left;
}

.tut-progress {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 6px 0 0;
}

.tut-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--th-ink);
  background: var(--th-cream);
  opacity: 0.4;
  transition: opacity 120ms ease, background 120ms ease;
}

.tut-dot.active {
  opacity: 1;
  background: var(--th-gold);
}

.tut-skip {
  margin-top: 4px;
  background: transparent;
  color: var(--th-cream);
  border: none;
  font-family: 'Courier New', monospace;
  font-size: 0.82em;
  letter-spacing: 1px;
  opacity: 0.55;
  cursor: pointer;
  text-transform: none;
  padding: 4px 8px;
}

.tut-skip:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ============================================================
   Leaderboard table
   ============================================================ */
.lb-empty {
  opacity: 0.7;
  margin: 24px 0 !important;
  font-family: 'Courier New', monospace !important;
  color: var(--th-parchment) !important;
}
.lb-table {
  margin: 8px auto;
  border-collapse: collapse;
  font-size: 0.95em;
  min-width: 360px;
  border: 3px solid var(--th-ink);
  background: rgba(244, 228, 193, 0.04);
}
.lb-table thead .lb-head {
  background: var(--th-ink);
}
.lb-table .lb-head th {
  font-family: 'Titan One', 'Impact', 'Arial Black', system-ui, sans-serif;
  font-size: 0.75em;
  letter-spacing: 2px;
  color: var(--th-gold);
  padding: 8px 12px;
  text-transform: uppercase;
}
.lb-table .lb-head th.lb-name { text-align: left; }
.lb-table .lb-head th.lb-rank,
.lb-table .lb-head th.lb-score,
.lb-table .lb-head th.lb-detail { text-align: right; }
.lb-table tbody .lb-row:nth-child(odd)  { background: rgba(255, 248, 231, 0.04); }
.lb-table tbody .lb-row:nth-child(even) { background: rgba(255, 248, 231, 0.09); }
.lb-table tbody .lb-row td {
  padding: 5px 12px;
  font-family: 'Courier New', monospace;
  color: var(--th-cream);
}
.lb-table .lb-rank   { text-align: right; opacity: 0.65; width: 30px; }
.lb-table .lb-name   { text-align: left;  color: var(--th-highlight); font-weight: bold; }
.lb-table .lb-score  { text-align: right; }
.lb-table .lb-detail { text-align: right; opacity: 0.75; }
.lb-table .lb-top {
  background: rgba(244, 199, 74, 0.18) !important;
}
.lb-table .lb-top td {
  color: var(--th-gold);
}
.lb-table .lb-top .lb-name {
  color: var(--th-gold);
  text-shadow: 1px 1px 0 var(--th-ink);
}

.lb-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}
.lb-pagination .ctrl-btn {
  min-width: 48px;
  padding: 6px 14px;
  font-size: 1em;
  line-height: 1;
}
.lb-pagination .ctrl-btn[disabled] {
  opacity: 0.35;
  pointer-events: none;
}
.lb-page-info {
  font-family: 'Titan One', 'Impact', 'Arial Black', system-ui, sans-serif;
  color: var(--th-gold);
  text-shadow: 1px 1px 0 var(--th-ink);
  letter-spacing: 1.5px;
  font-size: 0.95em;
  min-width: 56px;
  text-align: center;
}

/* ============================================================
   .rh-* — main menu layout (title row + mascot + hero + grid)
   ============================================================ */
.rh-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vh, 20px);
}

.rh-title-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
  flex-wrap: wrap;
}

.rh-mascot-small {
  width: clamp(68px, 11vw, 100px);
  height: auto;
  animation: mascotDrive 1.1s ease-in-out infinite;
  transform-origin: 50% 100%;
}

@keyframes mascotDrive {
  0%   { transform: translateY(0)    rotate(-1.5deg) scaleY(0.97) scaleX(1.03); }
  22%  { transform: translateY(-6px)  rotate(2deg)    scaleY(1.02) scaleX(0.98); }
  45%  { transform: translateY(-2px)  rotate(-1deg)   scaleY(0.99) scaleX(1.01); }
  68%  { transform: translateY(-8px)  rotate(2.5deg)  scaleY(1.03) scaleX(0.97); }
  90%  { transform: translateY(-1px)  rotate(-2deg)   scaleY(0.97) scaleX(1.03); }
  100% { transform: translateY(0)    rotate(-1.5deg) scaleY(0.97) scaleX(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .rh-mascot-small { animation: none; }
}

.rh-title {
  font-family: 'Titan One', 'Impact', 'Arial Black', system-ui, sans-serif;
  font-size: clamp(2rem, 6vw, 3.6rem);
  line-height: 1;
  margin: 0;
  display: flex;
  gap: 0.02em;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--th-red);
  text-shadow:
    -2px -2px 0 var(--th-ink),
     2px -2px 0 var(--th-ink),
    -2px  2px 0 var(--th-ink),
     2px  2px 0 var(--th-ink),
     4px  4px 0 var(--th-red-dark),
     7px  7px 0 var(--th-ink);
  user-select: none;
}
.rh-title span {
  display: inline-block;
  animation: titleWobble 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 70ms);
  transform-origin: 50% 100%;
}
.rh-title-gap {
  width: 0.5em;
  animation: none !important;
}

.rh-tagline {
  font-family: 'Courier New', monospace !important;
  font-size: clamp(0.95rem, 2.2vw, 1.1rem) !important;
  color: var(--th-cream) !important;
  margin: 0 0 4px !important;
}

.rh-stats {
  font-family: 'Courier New', monospace !important;
  font-size: clamp(0.78rem, 1.8vw, 0.9rem) !important;
  color: var(--th-parchment) !important;
  opacity: 0.75 !important;
  margin: 0 0 12px !important;
}

.rh-secondary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  margin-top: 6px;
  max-width: 520px;
  width: 100%;
}
.rh-secondary-grid .menu-btn {
  min-width: 0;
  width: 100%;
}

/* Portrait phones — collapse secondary grid to one column */
@media (max-width: 480px) {
  .rh-secondary-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
  }
  .menu-btn--hero {
    font-size: 1.3em;
    padding: 14px 32px;
    min-width: 240px;
  }
}

/* Orientation gate — shown only in portrait on touch devices.
   z-index 320 puts it above splash (300) and sound toggle (310). */
#orientation-gate {
  position: fixed;
  inset: 0;
  z-index: 320;
  background: radial-gradient(ellipse at 50% 48%, #3A2A1F 0%, #1A110B 45%, #080504 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  overflow: hidden;
  font-family: 'Titan One', 'Impact', 'Arial Black', system-ui, sans-serif;
  color: var(--th-highlight);
  -webkit-tap-highlight-color: transparent;
}
#orientation-gate::before {
  content: '';
  position: absolute;
  inset: -4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  opacity: 0.10;
  mix-blend-mode: screen;
  pointer-events: none;
}
#orientation-gate::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at center, rgba(244, 199, 74, 0.10) 0%, transparent 70%);
  pointer-events: none;
}
#orientation-gate.hidden { display: none; }
.og-inner {
  position: relative;
  z-index: 2;
  max-width: 340px;
}
.og-phone {
  width: 84px;
  height: 144px;
  margin: 0 auto 28px;
  border: 4px solid var(--th-ink);
  border-radius: 14px;
  background: var(--th-cream);
  box-shadow: 5px 5px 0 var(--th-ink);
  animation: og-rotate 2.4s ease-in-out infinite;
  position: relative;
}
.og-phone::before {
  /* phone screen */
  content: '';
  position: absolute;
  inset: 10px 8px 14px;
  background: var(--th-ink);
  border-radius: 4px;
}
.og-phone::after {
  /* little green tank stamp on the screen */
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 20px;
  transform: translate(-50%, -50%);
  background: var(--th-green);
  border: 2px solid var(--th-ink);
  border-radius: 4px;
  box-shadow: 0 6px 0 -1px var(--th-cream);
}
.og-title {
  font-family: 'Titan One', 'Impact', 'Arial Black', system-ui, sans-serif;
  font-size: clamp(1.4rem, 5vw, 2rem);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--th-red);
  text-shadow:
    -2px -2px 0 var(--th-ink),
     2px -2px 0 var(--th-ink),
    -2px  2px 0 var(--th-ink),
     2px  2px 0 var(--th-ink),
     4px  4px 0 var(--th-red-dark),
     7px  7px 0 var(--th-ink);
  margin-bottom: 14px;
}
.og-subtitle {
  font-family: 'Courier New', monospace;
  font-size: 0.95em;
  color: var(--th-cream);
  letter-spacing: 1px;
  line-height: 1.45;
}
@keyframes og-rotate {
  0%, 25%  { transform: rotate(0deg); }
  50%, 75% { transform: rotate(-90deg); }
  100%     { transform: rotate(0deg); }
}

/* Fullscreen toggle (touch + Fullscreen API only) */
#fullscreen-btn {
  position: fixed;
  top: max(14px, env(safe-area-inset-top, 14px));
  right: max(14px, env(safe-area-inset-right, 14px));
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 3px solid var(--th-ink);
  background: var(--th-cream);
  box-shadow: 3px 3px 0 var(--th-ink);
  color: var(--th-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 150; /* above mobile controls, below orientation gate */
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  font-family: 'Titan One', 'Impact', 'Arial Black', system-ui, sans-serif;
  transition: transform 80ms ease, box-shadow 80ms ease, background 120ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#fullscreen-btn.hidden { display: none; }
#fullscreen-btn:hover { background: var(--th-highlight); }
#fullscreen-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--th-ink);
  background: var(--th-gold);
}