:root { --paper: #f4f1e9; --ink: #183b4a; --muted: #718080; --gold: #d5a44e; --line: #d9dcd1; }
*, *::before, *::after { box-sizing: border-box; -webkit-touch-callout: none !important; }
html { margin: 0; padding: 0; touch-action: manipulation; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: radial-gradient(ellipse at 95% 10%, #e6ede4 0, transparent 45%), var(--paper); font-family: 'Avenir Next', 'Trebuchet MS', sans-serif; -webkit-touch-callout: none !important; touch-action: manipulation; -webkit-text-size-adjust: 100%; }
button, a { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none !important; touch-action: manipulation; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .4; }
button:focus-visible, a:focus-visible, canvas:focus-visible { outline: 3px solid #ba8131; outline-offset: 4px; }
.wrap { max-width: 1480px; padding: 0 4.5%; margin: auto; }
.masthead { min-height: 94px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); gap: 20px; }
.wordmark { color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 800; letter-spacing: 2px; display: grid; grid-template-columns: 42px auto; }
.brand-star { grid-row: span 2; font-size: 36px; color: var(--gold); line-height: 38px; }
.edition { font-size: 8px; font-weight: 500; letter-spacing: 2.9px; margin-top: 5px; }
.header-note { font: italic 16px Georgia, serif; color: #6f7b71; }
.intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 43px 0 34px; }
.eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 2px; margin: 0 0 13px; display: block; }
h1 { font: 500 clamp(35px, 3.9vw, 58px)/1.1 Georgia, 'Times New Roman', serif; letter-spacing: -2px; margin: 0 0 13px; }
h1 em { color: #457466; font-weight: 400; }
.subtitle { color: #687974; font-size: 13px; line-height: 1.7; margin: 0; }
.intro-stamp { border: 1px solid #c8cfbc; outline: 1px solid #c8cfbc; outline-offset: -6px; border-radius: 50%; width: 98px; height: 98px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 7px; letter-spacing: 1.3px; transform: rotate(8deg); flex-shrink: 0; color: #67816d; }
.intro-stamp span { font: italic 44px Georgia, serif; line-height: 50px; }
.arcade-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 26px; align-items: start; }
.arcade { background: #fffdf6; border: 1px solid #c7d1ce; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 40px #173a4710; }
.game-toolbar { min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 9px 18px; gap: 10px; }
.location { font-size: 9px; font-weight: 800; letter-spacing: 1.2px; display: flex; align-items: center; gap: 8px; }
.live-dot { width: 6px; height: 6px; background: #719577; border-radius: 50%; flex-shrink: 0; }
.toolbar-actions { display: flex; gap: 5px; }
.toolbar-actions button { border: 1px solid #dde2d9; color: #4a6669; font-size: 10px; border-radius: 5px; padding: 6px 8px; background: transparent; }
.toolbar-actions button:hover:enabled { background: #eaf0e7; }
.stage { position: relative; background: #132f46; touch-action: none; -webkit-touch-callout: none !important; }
#game { display: block; width: 100%; aspect-ratio: 16/9; touch-action: none !important; -webkit-touch-callout: none !important; -webkit-user-select: none !important; user-select: none !important; -webkit-user-drag: none !important; }
.stage-caption { min-height: 38px; padding: 9px 18px; display: flex; align-items: center; gap: 16px; color: #d6e4df; background: #16394b; font-size: 11px; }
.stage-caption > span:first-child { font-size: 8px; letter-spacing: 1.5px; color: #b2cccd; flex-shrink: 0; }
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(6, 17, 26, 0.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 100; }
.overlay[hidden] { display: none; }

/* ============================================================
   Opening Splash Screen: Hero Background & audio/splash.mp3
   ============================================================ */
.splash-screen {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #03080e;
  background-image:
    radial-gradient(ellipse at 50% 32%, rgba(10, 24, 38, 0.42) 0%, rgba(6, 17, 27, 0.78) 60%, rgba(2, 6, 11, 0.94) 100%),
    linear-gradient(to bottom, rgba(3, 10, 18, 0.72) 0%, rgba(3, 10, 18, 0.22) 32%, rgba(2, 7, 13, 0.82) 75%, #02060b 100%),
    url('images/david.jpg');
  background-size: cover;
  background-position: center 25%;
  background-repeat: no-repeat;
  color: #fff8e7;
  padding: clamp(14px, 3.5vw, 28px);
  box-sizing: border-box;
  animation: splashFadeIn 0.5s ease-out forwards;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
  overflow: hidden;
}

.splash-screen[hidden],
.splash-screen.splash-hidden,
#splash-screen[hidden],
#splash-screen.splash-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.splash-screen.splash-exit {
  opacity: 0;
  transform: scale(1.025);
  pointer-events: none;
}

@keyframes splashFadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.splash-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.08) 0%, transparent 70%);
}

.splash-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 680px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: clamp(8px, 2vw, 16px) 0;
  box-sizing: border-box;
  text-align: center;
}

.splash-topbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.splash-badge {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #ffd700;
  text-transform: uppercase;
  background: rgba(4, 14, 22, 0.75);
  border: 1px solid rgba(255, 215, 0, 0.4);
  padding: 4px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.splash-audio-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(4, 14, 22, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  color: #cbe3ea;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.splash-audio-icon {
  font-size: 12px;
}

.splash-audio-text {
  font-weight: 700;
  color: #ffd700;
  font-size: 10.5px;
}

.btn-splash-sound {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-splash-sound:hover {
  background: rgba(255, 215, 0, 0.25);
  border-color: #ffd700;
  color: #ffd700;
}

.splash-audio-badge.needs-gesture {
  border-color: rgba(255, 215, 0, 0.75) !important;
  background: rgba(255, 215, 0, 0.16) !important;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.35);
  animation: pulse-audio-badge 2s infinite ease-in-out;
  cursor: pointer;
}

.splash-audio-badge.needs-gesture .btn-splash-sound {
  background: rgba(255, 215, 0, 0.35);
  border-color: #ffd700;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
  animation: pulse-button 1.5s infinite ease-in-out;
}

@keyframes pulse-audio-badge {
  0%, 100% { border-color: rgba(255, 215, 0, 0.45); }
  50% { border-color: rgba(255, 215, 0, 0.95); box-shadow: 0 0 18px rgba(255, 215, 0, 0.55); }
}

@keyframes pulse-button {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.splash-audio-prompt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(14, 38, 56, 0.88);
  border: 1.5px solid rgba(255, 215, 0, 0.75);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), 0 0 16px rgba(255, 215, 0, 0.35);
  border-radius: 20px;
  padding: 6px 16px;
  margin: 0 0 12px;
  font-size: clamp(11.5px, 1.8vw, 13px);
  font-weight: 700;
  color: #ffe8aa;
  letter-spacing: 0.3px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  user-select: none;
  animation: pulse-prompt 2s infinite ease-in-out;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.splash-audio-prompt .prompt-icon {
  font-size: 14px;
  animation: bounce-icon 0.8s infinite alternate ease-in-out;
}

@keyframes pulse-prompt {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), 0 0 14px rgba(255, 215, 0, 0.3); }
  50% { transform: scale(1.03); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 24px rgba(255, 215, 0, 0.65); border-color: #ffd700; }
}

@keyframes bounce-icon {
  0% { transform: translateY(0); }
  100% { transform: translateY(-3px); }
}

.splash-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto 0;
}

.splash-hero-emblem {
  font-size: 26px;
  color: #ffd700;
  text-shadow: 0 0 16px rgba(255, 215, 0, 0.6);
  margin-bottom: 2px;
}

.splash-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(32px, 6.5vw, 54px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: clamp(1px, 0.6vw, 2.5px);
  margin: 0 0 4px;
  background: linear-gradient(180deg, #ffffff 0%, #fff0b8 40%, #ffd700 80%, #d49a1d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 24px rgba(255, 215, 0, 0.35));
}

.splash-subtitle {
  font-size: clamp(12px, 2.2vw, 16px);
  font-weight: 800;
  letter-spacing: 2.5px;
  color: #f7cf74;
  text-transform: uppercase;
  margin: 0 0 10px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.splash-subtitle em {
  font-style: italic;
  color: #fff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}

.splash-tagline {
  font-size: clamp(11.5px, 1.8vw, 13.5px);
  color: #d2ecf4;
  line-height: 1.55;
  max-width: 480px;
  margin: 0 0 10px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.splash-dedication {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: clamp(11px, 1.8vw, 13px);
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #ffe8aa;
  background: rgba(14, 38, 56, 0.76);
  border: 1px solid rgba(255, 215, 0, 0.45);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.55), 0 0 16px rgba(255, 215, 0, 0.15);
  border-radius: 20px;
  padding: 5px 15px;
  margin: 0 0 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

.splash-dedication strong {
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-shadow: 0 0 8px rgba(255, 230, 160, 0.7);
}

.dedication-candle {
  font-size: 13px;
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.75));
}

.splash-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  max-width: 540px;
}

.splash-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 11px;
  border-radius: 14px;
  background: rgba(6, 20, 32, 0.72);
  border: 1px solid rgba(255, 215, 0, 0.35);
  color: #ffe8aa;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.splash-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.btn-splash-start {
  border: 0;
  background: linear-gradient(135deg, #fff2b2 0%, #ffd700 45%, #f5a623 100%);
  color: #1a1600;
  font-size: clamp(14px, 2.4vw, 18px);
  font-weight: 900;
  letter-spacing: 1px;
  padding: clamp(12px, 2vw, 16px) clamp(28px, 5vw, 48px);
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 6px 0 #9e6d0a, 0 0 35px rgba(255, 215, 0, 0.55), 0 10px 24px rgba(0, 0, 0, 0.6);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  animation: splashPulse 2.4s ease-in-out infinite;
}

.btn-splash-start * {
  pointer-events: none;
}

.btn-splash-start:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #9e6d0a, 0 0 45px rgba(255, 215, 0, 0.75), 0 12px 28px rgba(0, 0, 0, 0.7);
}

.btn-splash-start:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 #9e6d0a, 0 0 22px rgba(255, 215, 0, 0.4);
}

@keyframes splashPulse {
  0%, 100% {
    box-shadow: 0 6px 0 #9e6d0a, 0 0 30px rgba(255, 215, 0, 0.5), 0 10px 24px rgba(0, 0, 0, 0.6);
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 6px 0 #9e6d0a, 0 0 46px rgba(255, 215, 0, 0.8), 0 10px 28px rgba(0, 0, 0, 0.7);
    transform: translateY(-1px);
  }
}

.splash-play-icon {
  font-size: 14px;
}

.splash-play-arrow {
  font-size: 18px;
  transition: transform 0.15s ease;
}

.btn-splash-start:hover .splash-play-arrow {
  transform: translateX(4px);
}

.splash-hint {
  font-size: 10.5px;
  color: #a4c7cf;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.splash-hint kbd {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: inherit;
  font-size: 9.5px;
  color: #fff;
}

/* Secondary Pause Menu Button Group */
.overlay-button-group {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.btn-overlay-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e2f1f5;
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-overlay-secondary:hover {
  background: rgba(255, 215, 0, 0.18);
  border-color: rgba(255, 215, 0, 0.5);
  color: #ffd700;
  transform: translateY(-1px);
}

/* Dynamic Per-Level Menu Card */
.overlay-card {
  --menu-accent: #f7cf74;
  --menu-border: rgba(247, 207, 116, 0.45);
  --menu-glow: rgba(247, 207, 116, 0.22);
  --menu-bg-1: #1a384df2;
  --menu-bg-2: #0e2233f8;
  --btn-bg-1: #ffd782;
  --btn-bg-2: #f7cf74;
  --btn-shadow: #b3852b;
  --btn-color: #17333d;

  text-align: center;
  color: #fff5d9;
  padding: clamp(18px, 4vw, 26px) clamp(16px, 4vw, 32px);
  border-radius: 20px;
  background: radial-gradient(circle at 50% 0%, var(--menu-bg-1) 0%, var(--menu-bg-2) 100%);
  border: 1.5px solid var(--menu-border);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7), 0 0 32px var(--menu-glow), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  width: min(90%, 420px);
  max-height: 94vh;
  overflow-y: auto;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Level Badge */
.menu-level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--menu-border);
  margin-bottom: 10px;
  color: var(--menu-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.overlay-card .eyebrow {
  color: var(--menu-accent);
  font-size: 9.5px;
  letter-spacing: 2px;
  margin-bottom: 6px;
  transition: color 0.3s ease;
}

.overlay-card h2 {
  font: clamp(26px, 5.5vw, 36px)/1.15 Georgia, serif;
  letter-spacing: -1px;
  margin: 0 0 10px;
  transition: color 0.3s ease;
}

.overlay-card h2 em {
  color: var(--menu-accent);
  font-style: italic;
  text-shadow: 0 0 12px var(--menu-glow);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Feature Pills */
.menu-feature-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 14px;
}

.menu-pill {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 3px 9px;
  border-radius: 12px;
  background: rgba(8, 22, 34, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e2f1f5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  white-space: nowrap;
}

.overlay-card p {
  color: #c5dcde;
  font-size: 12px;
  line-height: 1.7;
  margin: 0 0 16px;
}

.primary-button {
  border: 0;
  background: linear-gradient(135deg, var(--btn-bg-1) 0%, var(--btn-bg-2) 100%);
  border-radius: 10px;
  color: var(--btn-color);
  padding: 13px 28px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 0 var(--btn-shadow), 0 0 20px var(--menu-glow);
  min-width: 170px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.primary-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 5px 0 var(--btn-shadow), 0 0 26px var(--menu-glow);
}

.primary-button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--btn-shadow), 0 0 14px var(--menu-glow);
}

.primary-button span {
  display: inline-block;
  transition: transform 0.15s ease;
  margin-left: 4px;
}

.primary-button:hover span {
  transform: translateX(3px);
}

/* Theme 1: The Lantern Quarter - Warm Gold & Amber */
.overlay-card.overlay-theme-1 {
  --menu-accent: #f7cf74;
  --menu-border: rgba(247, 207, 116, 0.45);
  --menu-glow: rgba(247, 207, 116, 0.28);
  --menu-bg-1: #243e50f4;
  --menu-bg-2: #0e202ef8;
  --btn-bg-1: #ffd782;
  --btn-bg-2: #f7cf74;
  --btn-shadow: #b3852b;
  --btn-color: #17333d;
}

/* Theme 2: Snowfall Lane - Frosty Blizzard Cyan */
.overlay-card.overlay-theme-2 {
  --menu-accent: #6de5ff;
  --menu-border: rgba(109, 229, 255, 0.48);
  --menu-glow: rgba(109, 229, 255, 0.32);
  --menu-bg-1: #1a394ef4;
  --menu-bg-2: #081827f8;
  --btn-bg-1: #a4f2ff;
  --btn-bg-2: #4ec8e8;
  --btn-shadow: #1b6d85;
  --btn-color: #062330;
}

/* Theme 3: The Market Walk - Festive Bazaar Tangerine & Magenta */
.overlay-card.overlay-theme-3 {
  --menu-accent: #ffb05c;
  --menu-border: rgba(255, 176, 92, 0.48);
  --menu-glow: rgba(255, 140, 66, 0.32);
  --menu-bg-1: #381e3ff4;
  --menu-bg-2: #160d21f8;
  --btn-bg-1: #ffb861;
  --btn-bg-2: #ff8c42;
  --btn-shadow: #a84b16;
  --btn-color: #2b1104;
}

/* Theme 4: Bluebird Square - Aurora Emerald & Speed Cyan */
.overlay-card.overlay-theme-4 {
  --menu-accent: #4affd6;
  --menu-border: rgba(74, 255, 214, 0.52);
  --menu-glow: rgba(62, 230, 182, 0.35);
  --menu-bg-1: #13383bf4;
  --menu-bg-2: #07191df8;
  --btn-bg-1: #6dffd9;
  --btn-bg-2: #2bd4a2;
  --btn-shadow: #117859;
  --btn-color: #04271d;
}

/* Theme 5: The Old Bakery - Terracotta Fire & Sizzling Embers */
.overlay-card.overlay-theme-5 {
  --menu-accent: #ff9364;
  --menu-border: rgba(255, 147, 100, 0.5);
  --menu-glow: rgba(255, 123, 66, 0.32);
  --menu-bg-1: #401f19f4;
  --menu-bg-2: #180907f8;
  --btn-bg-1: #ffa26a;
  --btn-bg-2: #ff6838;
  --btn-shadow: #993110;
  --btn-color: #2b0c03;
}

/* Theme 6: Starlight Gardens - Celestial Cosmic Indigo & Glass Mint */
.overlay-card.overlay-theme-6 {
  --menu-accent: #7df9ff;
  --menu-border: rgba(125, 249, 255, 0.5);
  --menu-glow: rgba(125, 249, 255, 0.34);
  --menu-bg-1: #162c47f4;
  --menu-bg-2: #060e1bf8;
  --btn-bg-1: #a6faff;
  --btn-bg-2: #48d8e8;
  --btn-shadow: #18717d;
  --btn-color: #052028;
}

/* Theme 7: The Golden Bridge - Brass Suspensions & Misty River */
.overlay-card.overlay-theme-7 {
  --menu-accent: #ffd166;
  --menu-border: rgba(255, 209, 102, 0.5);
  --menu-glow: rgba(255, 209, 102, 0.3);
  --menu-bg-1: #2a3d46f4;
  --menu-bg-2: #101c23f8;
  --btn-bg-1: #ffe08a;
  --btn-bg-2: #f4be47;
  --btn-shadow: #9c7117;
  --btn-color: #261b04;
}

/* Theme 8: The Festival of Lights - Royal Amethyst & Fireworks Gold */
.overlay-card.overlay-theme-8 {
  --menu-accent: #ffd700;
  --menu-border: rgba(255, 215, 0, 0.58);
  --menu-glow: rgba(255, 215, 0, 0.42);
  --menu-bg-1: #3b1752f4;
  --menu-bg-2: #14051ff8;
  --btn-bg-1: #ffe785;
  --btn-bg-2: #ffd700;
  --btn-shadow: #ad8200;
  --btn-color: #2b1f00;
}

/* Theme Custom: Hero Maker Workshop Gold & Circuit Cyan */
.overlay-card.overlay-theme-custom {
  --menu-accent: #ffd700;
  --menu-border: rgba(255, 215, 0, 0.5);
  --menu-glow: rgba(255, 215, 0, 0.32);
  --menu-bg-1: #1a3a4df4;
  --menu-bg-2: #071724f8;
  --btn-bg-1: #ffe082;
  --btn-bg-2: #ffd54f;
  --btn-shadow: #ab8414;
  --btn-color: #201a05;
}

.overlay-note { display: block; margin-top: 17px; color: #98b9bd; font-size: 9px; }
.night-selector {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.night-selector-label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #e3bd74;
}
.night-chips {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.night-chip {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(18, 52, 69, 0.85);
  border: 1px solid rgba(227, 189, 116, 0.35);
  color: #d8edf0;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.night-chip:hover {
  background: rgba(35, 85, 112, 0.95);
  border-color: #f2d18d;
  color: #fff;
  transform: translateY(-1px);
}
.night-chip:active,
.night-chip.active {
  background: #f2d18d;
  border-color: #d5a44e;
  color: #143745;
  box-shadow: 0 0 12px rgba(242, 209, 141, 0.6);
  font-weight: 900;
}
.night-chip-custom {
  background: linear-gradient(135deg, rgba(213, 164, 78, 0.3) 0%, rgba(18, 52, 69, 0.9) 100%);
  border-color: var(--gold);
  color: var(--gold);
  font-size: 15px;
}
.night-chip-custom:hover {
  background: linear-gradient(135deg, rgba(213, 164, 78, 0.5) 0%, rgba(35, 85, 112, 0.95) 100%);
  color: #fff;
  border-color: #ffe0a1;
}
.night-chip-custom.active {
  background: radial-gradient(circle at center, #ffd700 0%, #d5a44e 100%);
  color: #102636;
  border-color: #ffd700;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.8);
}
.editor-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(213, 164, 78, 0.15);
  border: 1px solid rgba(213, 164, 78, 0.45);
  color: var(--gold);
  font-size: 10px;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 6px;
  text-decoration: none;
  letter-spacing: 0.8px;
  transition: all 0.15s ease;
}
.editor-link-btn:hover {
  background: var(--gold);
  color: #102636;
  border-color: var(--gold);
  transform: translateY(-1px);
}
.btn-insert-map-overlay {
  background: transparent;
  border: 1px dashed rgba(227, 189, 116, 0.45);
  color: #e3bd74;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 6px;
  letter-spacing: 0.5px;
  transition: all 0.12s ease;
  touch-action: manipulation;
}
.btn-insert-map-overlay:hover {
  background: rgba(227, 189, 116, 0.15);
  border-color: #ffd88a;
  color: #fff;
}

.overlay-music-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  color: #a0c2d4;
  margin: 6px auto 8px auto;
  max-width: 90%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.overlay-music-bar strong {
  color: var(--gold);
  font-weight: 700;
}
.btn-change-this-music {
  background: rgba(213, 164, 78, 0.22);
  border: 1px solid rgba(213, 164, 78, 0.45);
  color: #fff;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.12s ease;
  font-family: inherit;
  letter-spacing: 0.3px;
}
.btn-change-this-music:hover {
  background: var(--gold);
  color: #102636;
  border-color: var(--gold);
  transform: translateY(-1px);
}

.music-row-highlight {
  animation: pulse-music-row 1.6s ease;
}
@keyframes pulse-music-row {
  0% { box-shadow: 0 0 0 0 rgba(213, 164, 78, 0.8); border-color: var(--gold); }
  50% { box-shadow: 0 0 16px 4px rgba(213, 164, 78, 0.6); border-color: #ffe08a; background: rgba(213, 164, 78, 0.15); }
  100% { box-shadow: none; }
}

/* Custom Map Inserter Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 12, 18, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 16px;
}
.modal-backdrop[hidden] {
  display: none !important;
}

.modal-box {
  background: #102636;
  border: 1px solid #224a64;
  border-radius: 14px;
  width: min(92%, 480px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  color: #e2eff2;
}

.modal-header {
  padding: 14px 18px;
  border-bottom: 1px solid #224a64;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: #8aa9b5;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}
.modal-close-btn:hover { color: #fff; }

.modal-body {
  padding: 16px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 12px;
  line-height: 1.6;
}

.file-drop-target {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px dashed #306584;
  border-radius: 8px;
  padding: 16px 12px;
  text-align: center;
  background: rgba(18, 52, 69, 0.4);
  cursor: pointer;
  transition: all 0.15s ease;
  color: #b0d4de;
}
.file-drop-target:hover,
.file-drop-target.dragover {
  border-color: #ffd88a;
  background: rgba(227, 189, 116, 0.12);
  color: #fff;
}
.file-drop-target .drop-icon {
  font-size: 24px;
}

.modal-body textarea {
  width: 100%;
  height: 110px;
  background: #091722;
  border: 1px solid #224a64;
  border-radius: 6px;
  color: #a4d2df;
  font-family: monospace;
  font-size: 11px;
  padding: 8px;
  resize: vertical;
}
.modal-body textarea:focus {
  outline: none;
  border-color: #d5a44e;
}

.modal-footer {
  padding: 12px 18px;
  border-top: 1px solid #224a64;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  background: rgba(0, 0, 0, 0.2);
  flex-wrap: wrap;
}

.modal-footer-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.12s ease;
}
.modal-footer-btn.btn-primary {
  background: #d5a44e;
  color: #102636;
  border-color: #b88636;
  font-weight: 800;
}
.modal-footer-btn.btn-primary:hover {
  background: #eec16e;
}
.modal-footer-btn.btn-secondary {
  background: #183c50;
  border-color: #275d7b;
  color: #e2eff2;
}
.modal-footer-btn.btn-secondary:hover {
  background: #235470;
  color: #fff;
}
.controls-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 17px 18px; color: #6d7d79; font-size: 10px; }
.controls-label { font-size: 8px; letter-spacing: 1.3px; font-weight: 800; color: var(--ink); }
kbd { font: 9px 'Avenir Next', sans-serif; background: #f0f1e9; border: 1px solid #d9dfd4; border-bottom-width: 2px; border-radius: 4px; display: inline-block; padding: 4px 6px; color: #4c6868; margin-right: 3px; }
.journey { padding: 11px 0 0; }
.journey-header .eyebrow { color: #7e8a74; font-size: 9px; }
.journey h2 { font: 24px/1.2 Georgia, serif; letter-spacing: -.6px; margin: 0 0 9px; }
.journey-header p { color: #7a847b; font-size: 12px; line-height: 1.8; margin: 0; }
.candle-tracker { display: flex; justify-content: space-between; gap: 7px; margin: 20px 0 12px; }
.candle-slot { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #9ca69b; font-size: 8px; flex: 1; }
.candle-icon { height: 33px; width: 11px; border-radius: 3px 3px 1px 1px; background: repeating-linear-gradient(160deg,#dbe0d4 0 8px,#e6e8df 8px 11px); position: relative; margin-top: 13px; }
.candle-icon::before { content: ''; position: absolute; width: 6px; height: 9px; border: 1px solid #c4cbbd; border-radius: 80% 10% 70% 40%; top: -13px; left: 2px; transform: rotate(-30deg); }
.candle-slot.lit .candle-icon { background: repeating-linear-gradient(160deg,#527b88 0 8px,#8faeae 8px 11px); }
.candle-slot.lit .candle-icon::before { background: #e9b359; border-color: #e9b359; box-shadow: 0 0 12px #e5b866; }
.candle-slot.current { color: #315f63; font-weight: 800; }
.candle-total { display: flex; align-items: center; gap: 12px; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
.candle-total strong { font: 24px Georgia, serif; }
.candle-total strong span { color: #a1aa9c; font-size: 18px; }
.candle-total > span { font-size: 8px; letter-spacing: 1px; color: #7f8d7b; }
.stats { padding: 11px 0; border-bottom: 1px solid var(--line); }
.stats > div { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 11px; color: #697e77; }
.stats strong { color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.health { display: flex; gap: 5px; }.heart { color: #ce785c; font-size: 16px; }.heart.empty { color: #d3dacf; }
.mission { margin-top: 20px; background: #e8ece0; border: 1px solid #dfe4d7; border-radius: 8px; padding: 16px; }
.mission .eyebrow { color: #627d65; font-size: 8px; letter-spacing: 1.6px; margin-bottom: 8px; }
.mission p { color: #5f746a; font-size: 11px; line-height: 1.75; margin: 0 0 15px; }
.route { height: 4px; background: #d3ddcb; border-radius: 3px; overflow: hidden; }.route span { display: block; height: 100%; width: 0; background: #7b9b76; transition: width .15s; }
#route-label { color: #7d8d76; font-size: 9px; display: block; margin-top: 7px; }
blockquote { text-align: center; font: italic 20px Georgia, serif; color: #698277; margin: 22px 0 0; }blockquote span { display: block; font: 7px 'Avenir Next', sans-serif; letter-spacing: 1.2px; margin-top: 9px; color: #8c9a89; }
footer { display: flex; justify-content: space-between; gap: 15px; border-top: 1px solid var(--line); margin: 32px 0 0; padding: 22px 0; font-size: 8px; letter-spacing: 1.5px; color: #899080; }footer > span:last-child { font: italic 12px Georgia, serif; letter-spacing: 0; }footer > span:last-child span { color: var(--gold); padding-left: 8px; }
/* Mobile Arcade Gamepad & iPhone Controls */
.mobile-gamepad {
  display: none;
  background: linear-gradient(180deg, #102636 0%, #0c1c28 100%);
  border-top: 1px solid #1f475e;
  padding: 12px 18px max(14px, env(safe-area-inset-bottom, 14px));
  flex-direction: column;
  gap: 10px;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.gamepad-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
  font-size: 11px;
}

.gamepad-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gamepad-badge-level {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--gold);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(213, 164, 78, 0.4);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
button.gamepad-badge-level:active {
  background: rgba(213, 164, 78, 0.25);
  border-color: #ffd88a;
  transform: scale(0.96);
}

.gamepad-badge-stats {
  font-size: 11px;
  color: #a6c8c5;
}

.gamepad-actions {
  display: flex;
  gap: 6px;
}

.gamepad-btn-sm {
  background: #173b4e;
  border: 1px solid #275570;
  border-radius: 6px;
  color: #d6e8e5;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 9px;
  cursor: pointer;
  touch-action: manipulation;
}

.gamepad-btn-sm:active {
  background: #255d7e;
  transform: translateY(1px);
}

.gamepad-deck {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 2px 2px;
}

.gamepad-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Directional Sliding Rocker */
.rocker-pad {
  width: 168px;
  height: 72px;
  background: linear-gradient(180deg, #1b3d52 0%, #122a3a 100%);
  border: 2px solid #2d5d79;
  border-radius: 36px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.16);
  display: flex;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.rocker-half {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8bb6cb;
  transition: all 0.08s ease;
  touch-action: none;
  background: transparent;
  border: 0;
  outline: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  user-select: none;
  -webkit-user-select: none;
}

.rocker-icon {
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.rocker-divider {
  width: 2px;
  height: 36px;
  background: #264e66;
  align-self: center;
  border-radius: 1px;
}

.rocker-pad[data-active="left"] .rocker-left,
.rocker-half:active[data-direction="left"],
.rocker-half.active[data-direction="left"] {
  background: radial-gradient(circle at 45% 50%, #357396 0%, #1a4159 100%);
  color: #ffd88a;
  box-shadow: inset 2px 2px 8px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 216, 138, 0.35);
}

.rocker-pad[data-active="right"] .rocker-right,
.rocker-half:active[data-direction="right"],
.rocker-half.active[data-direction="right"] {
  background: radial-gradient(circle at 55% 50%, #357396 0%, #1a4159 100%);
  color: #ffd88a;
  box-shadow: inset -2px 2px 8px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 216, 138, 0.35);
}

.rocker-label {
  display: block;
  text-align: center;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.3px;
  color: #638a9d;
  margin-top: 6px;
}

/* Action Buttons Cluster */
.action-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
}

.action-btn {
  border: 0;
  outline: none;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  transition: transform 0.06s ease, box-shadow 0.06s ease, filter 0.06s ease;
  -webkit-tap-highlight-color: transparent;
}

.action-jump {
  width: 72px;
  height: 72px;
  background: radial-gradient(circle at 35% 28%, #f8d58c 0%, #dca443 65%, #ad7622 100%);
  color: #1a383f;
  box-shadow: 0 5px 0 #784c0c, 0 8px 18px rgba(0, 0, 0, 0.4);
}

.action-jump .action-text {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
  margin-top: 5px;
}

.action-jump .jump-sub {
  position: absolute;
  top: 10px;
  font-size: 9px;
  font-weight: 900;
  color: #7b4c09;
  letter-spacing: 0.5px;
}

.action-jump:active,
.action-jump.active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #784c0c, 0 3px 6px rgba(0, 0, 0, 0.5);
  filter: brightness(1.08);
}

.action-throw {
  width: 58px;
  height: 58px;
  margin-bottom: 0;
  background: radial-gradient(circle at 35% 28%, #64a1b5 0%, #366d80 70%, #1e4757 100%);
  box-shadow: 0 4px 0 #122d37, 0 6px 14px rgba(0, 0, 0, 0.35);
  color: #f1f9f9;
}

.action-throw .action-star {
  font-size: 15px;
  color: #ffd88a;
  line-height: 1;
}

.action-throw .action-text {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

.action-throw:active,
.action-throw.active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #122d37, 0 2px 5px rgba(0, 0, 0, 0.45);
  filter: brightness(1.12);
}

.action-swap {
  width: 50px;
  height: 50px;
  margin-bottom: 0;
  background: radial-gradient(circle at 35% 28%, #4f9d8f 0%, #2f685d 70%, #173f38 100%);
  box-shadow: 0 4px 0 #0d2722, 0 6px 14px rgba(0, 0, 0, 0.35);
  color: #f1f9f9;
}

.action-swap .swap-sub {
  font-size: 13px;
  line-height: 1;
  color: #ffd88a;
  font-weight: 900;
}

.action-swap .action-text {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.action-swap:active,
.action-swap.active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #0d2722, 0 2px 5px rgba(0, 0, 0, 0.45);
  filter: brightness(1.15);
}

#weapon-display {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(30, 75, 87, 0.12);
  border: 1px solid rgba(80, 140, 155, 0.25);
  padding: 2px 7px;
  border-radius: 6px;
  transition: all 0.15s ease;
  font-size: 13px;
}

#weapon-display:hover {
  background: rgba(30, 75, 87, 0.25);
  border-color: rgba(244, 197, 66, 0.5);
  transform: translateY(-1px);
}

/* Media Queries & Fullscreen Layouts */
@media (pointer: coarse), (hover: none), (max-width: 950px) {
  html, body {
    overflow: hidden !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #091722 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .wrap {
    padding: 0 !important;
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  .masthead, .intro, .journey, footer, .controls-bar, .stage-caption, .game-toolbar {
    display: none !important;
  }
  .arcade-layout {
    grid-template-columns: 1fr !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .arcade {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #091722 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .stage {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    display: flex !important;
    background: radial-gradient(circle at 50% 40%, #173d56 0%, #0a1b28 100%) !important;
    overflow: hidden !important;
  }
  #game {
    display: block !important;
    aspect-ratio: 16/9 !important;
    object-fit: contain !important;
  }
  @media (orientation: portrait) {
    .stage {
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start !important;
      padding-top: max(48px, env(safe-area-inset-top, 48px)) !important;
    }
    #game {
      width: 100vw !important;
      max-width: 100vw !important;
      height: auto !important;
      max-height: 55vh !important;
    }
  }
  @media (orientation: landscape) {
    .stage {
      align-items: center !important;
      justify-content: center !important;
      padding: 0 !important;
    }
    #game {
      width: auto !important;
      height: 100vh !important;
      height: 100dvh !important;
      max-width: 100vw !important;
    }
  }
  /* Floating Overlay Gamepad */
  .mobile-gamepad {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    pointer-events: none !important;
    z-index: 50 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
  .gamepad-topbar {
    position: absolute !important;
    top: max(8px, env(safe-area-inset-top, 8px)) !important;
    left: max(14px, env(safe-area-inset-left, 14px)) !important;
    right: max(14px, env(safe-area-inset-right, 14px)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    pointer-events: auto !important;
    border: none !important;
    padding: 0 !important;
  }
  .gamepad-info, .gamepad-actions {
    background: rgba(14, 38, 56, 0.42) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  }
  .gamepad-info {
    padding: 5px 12px !important;
  }
  .gamepad-actions {
    padding: 3px 6px !important;
  }
  .gamepad-deck {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .gamepad-left-zone {
    position: absolute !important;
    bottom: max(6px, env(safe-area-inset-bottom, 6px)) !important;
    left: max(8px, env(safe-area-inset-left, 8px)) !important;
    pointer-events: auto !important;
    opacity: 0.68;
    transition: opacity 0.15s ease;
  }
  .gamepad-right-zone {
    position: absolute !important;
    bottom: max(6px, env(safe-area-inset-bottom, 6px)) !important;
    right: max(10px, env(safe-area-inset-right, 10px)) !important;
    pointer-events: auto !important;
    opacity: 0.68;
    transition: opacity 0.15s ease;
  }
  .gamepad-left-zone:active,
  .gamepad-left-zone:focus-within,
  .gamepad-left-zone.active,
  .gamepad-right-zone:active,
  .gamepad-right-zone:focus-within,
  .gamepad-right-zone.active {
    opacity: 0.98 !important;
  }
  .action-cluster {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .rocker-pad {
    background: rgba(12, 32, 48, 0.32) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.26) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
  }
  .rocker-divider {
    background: rgba(255, 255, 255, 0.18) !important;
  }
  .rocker-icon {
    color: rgba(255, 255, 255, 0.82) !important;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85)) !important;
  }
  .rocker-pad[data-active="left"] .rocker-left,
  .rocker-half:active[data-direction="left"],
  .rocker-half.active[data-direction="left"],
  .rocker-pad[data-active="right"] .rocker-right,
  .rocker-half:active[data-direction="right"],
  .rocker-half.active[data-direction="right"] {
    background: rgba(53, 115, 150, 0.55) !important;
    color: #ffd88a !important;
    box-shadow: inset 0 0 12px rgba(255, 216, 138, 0.45) !important;
  }
  .rocker-label {
    color: rgba(160, 205, 225, 0.75) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important;
    margin-top: 2px !important;
    font-size: 7px !important;
  }
  .action-jump {
    width: 76px !important;
    height: 76px !important;
    background: radial-gradient(circle at 35% 28%, rgba(248, 213, 140, 0.4) 0%, rgba(220, 164, 67, 0.35) 65%, rgba(173, 118, 34, 0.28) 100%) !important;
    border: 2px solid rgba(255, 215, 0, 0.65) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95) !important;
    margin-bottom: 0 !important;
  }
  .action-jump .jump-sub {
    color: #ffe082 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important;
  }
  .action-jump .action-text {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95) !important;
  }
  .action-throw {
    width: 64px !important;
    height: 64px !important;
    background: radial-gradient(circle at 35% 28%, rgba(100, 161, 181, 0.4) 0%, rgba(54, 109, 128, 0.35) 70%, rgba(30, 71, 87, 0.28) 100%) !important;
    border: 2px solid rgba(135, 206, 235, 0.6) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95) !important;
    margin-bottom: 0 !important;
  }
  .action-throw .action-star {
    color: #ffd88a !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important;
  }
  .action-throw .action-text {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95) !important;
  }
  .action-swap {
    width: 52px !important;
    height: 52px !important;
    background: radial-gradient(circle at 35% 28%, rgba(79, 157, 143, 0.4) 0%, rgba(47, 104, 93, 0.35) 70%, rgba(23, 63, 56, 0.28) 100%) !important;
    border: 2px solid rgba(120, 220, 180, 0.6) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95) !important;
    margin-bottom: 0 !important;
  }
  .action-swap .swap-sub {
    color: #ffd88a !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important;
  }
  .action-swap .action-text {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95) !important;
  }
  .action-btn:active,
  .action-btn.active {
    transform: scale(0.92) !important;
    filter: brightness(1.25) contrast(1.1) !important;
  }
  .action-jump:active,
  .action-jump.active {
    background: radial-gradient(circle at 35% 28%, rgba(255, 225, 150, 0.85) 0%, rgba(230, 175, 75, 0.8) 65%, rgba(185, 130, 40, 0.75) 100%) !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.95), 0 2px 4px rgba(0, 0, 0, 0.6) !important;
  }
  .action-throw:active,
  .action-throw.active {
    background: radial-gradient(circle at 35% 28%, rgba(120, 185, 210, 0.85) 0%, rgba(65, 125, 145, 0.8) 70%, rgba(40, 85, 100, 0.75) 100%) !important;
    box-shadow: 0 0 20px rgba(100, 200, 255, 0.95), 0 2px 4px rgba(0, 0, 0, 0.6) !important;
  }
  .action-swap:active,
  .action-swap.active {
    background: radial-gradient(circle at 35% 28%, rgba(95, 180, 165, 0.85) 0%, rgba(55, 120, 110, 0.8) 70%, rgba(30, 75, 68, 0.75) 100%) !important;
    box-shadow: 0 0 16px rgba(79, 210, 160, 0.95), 0 2px 4px rgba(0, 0, 0, 0.6) !important;
  }
}

/* Hide mobile gamepad completely while opening splash screen is active */
body.splash-active .mobile-gamepad,
body:has(#splash-screen:not([hidden]):not(.splash-hidden)) .mobile-gamepad {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Ensure mobile gamepad shows in fullscreen on mobile/touch when game is playing */
body.fullscreen-mode.touch-device:not(.splash-active) .mobile-gamepad,
body.fullscreen-mode:not(.splash-active) .mobile-gamepad {
  display: flex !important;
}

/* Fullscreen Mode for Desktop Toggle */
body.fullscreen-mode {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  background: #091722 !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.fullscreen-mode * {
  touch-action: none !important;
}
body.fullscreen-mode .wrap {
  padding: 0 !important;
  max-width: 100vw !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
}
body.fullscreen-mode .masthead,
body.fullscreen-mode .intro,
body.fullscreen-mode .journey,
body.fullscreen-mode footer,
body.fullscreen-mode .controls-bar,
body.fullscreen-mode .stage-caption,
body.fullscreen-mode .game-toolbar {
  display: none !important;
}
body.fullscreen-mode .arcade-layout {
  grid-template-columns: 1fr !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  gap: 0 !important;
}
body.fullscreen-mode .arcade {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #091722 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
}
body.fullscreen-mode .stage {
  position: absolute !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  display: flex !important;
  background: radial-gradient(circle at 50% 40%, #173d56 0%, #0a1b28 100%) !important;
  overflow: hidden !important;
}
body.fullscreen-mode #game {
  aspect-ratio: 16/9 !important;
  object-fit: contain !important;
}

@media (orientation: portrait) {
  body.fullscreen-mode .stage {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: max(48px, env(safe-area-inset-top, 48px)) !important;
  }
  body.fullscreen-mode #game {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: 55vh !important;
  }
}

@media (orientation: landscape) {
  body.fullscreen-mode .stage {
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  body.fullscreen-mode #game {
    width: auto !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100vw !important;
  }
}

.rotate-hint {
  display: none;
}
@media (pointer: coarse) and (orientation: portrait), (max-width: 800px) and (orientation: portrait) {
  .rotate-hint {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    padding: 7px 16px;
    background: rgba(14, 38, 56, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    color: #e5c478;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    animation: rotate-tip-pulse 3s ease-in-out infinite;
  }
  @keyframes rotate-tip-pulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.03); }
  }
}
@media (orientation: landscape) {
  .rotate-hint {
    display: none !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .intro, .arcade-layout {
    animation: arrive 0.65s ease-out both;
  }
  .arcade-layout {
    animation-delay: 0.1s;
  }
  @keyframes arrive {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* Custom Voice Clip Modal Styles */
.audio-balance-card {
  background: rgba(14, 38, 56, 0.55);
  border: 1px solid rgba(213, 164, 78, 0.35);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.audio-balance-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
}
.audio-balance-title {
  font-weight: 800;
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.3px;
}
.audio-ducking-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.audio-ducking-toggle input[type="checkbox"] {
  accent-color: var(--gold);
  cursor: pointer;
}
.audio-sliders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 500px) {
  .audio-sliders-grid {
    grid-template-columns: 1fr;
  }
}
.audio-slider-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.audio-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.audio-slider-labels span:last-child {
  color: var(--gold);
  font-family: monospace;
  font-size: 12px;
}
.audio-slider-group input[type="range"] {
  width: 100%;
  accent-color: var(--gold);
  cursor: pointer;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.15);
}

.voice-clip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
}
.voice-clip-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.voice-clip-title {
  font-weight: 800;
  font-size: 13px;
  color: #fff;
}
.voice-clip-status {
  font-size: 11px;
  color: var(--text-muted);
}
.voice-clip-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.btn-voice-action,
.btn-voice-upload,
.btn-voice-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 11px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  transition: all 0.15s ease;
  font-family: inherit;
  user-select: none;
}
.btn-voice-upload {
  background: rgba(213, 164, 78, 0.22);
  border-color: var(--gold);
  color: #fff;
}
.btn-voice-upload:hover,
.btn-voice-action:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
}
.btn-voice-reset {
  background: rgba(226, 109, 92, 0.15);
  color: #e26d5c;
  border-color: rgba(226, 109, 92, 0.4);
}
.btn-voice-reset:hover {
  border-color: #e26d5c;
  background: rgba(226, 109, 92, 0.25);
}

/* Custom Level Music Modal Styles */
.music-track-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 14px;
  transition: all 0.15s ease;
}
.music-track-row:hover {
  background: rgba(0, 0, 0, 0.38);
  border-color: rgba(213, 164, 78, 0.35);
}
.music-track-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.music-track-title {
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music-track-status {
  font-size: 11px;
  color: #8aa9b5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music-track-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.btn-music-action,
.btn-music-upload,
.btn-music-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 11px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #173b4e;
  color: #d6e8e5;
  transition: all 0.15s ease;
  font-family: inherit;
  user-select: none;
}
.btn-music-action {
  background: rgba(35, 85, 112, 0.6);
  border-color: #35728f;
  color: #c7ebf2;
}
.btn-music-action.playing {
  background: rgba(226, 109, 92, 0.3);
  border-color: #e26d5c;
  color: #ff9d90;
}
.btn-music-upload {
  background: rgba(213, 164, 78, 0.22);
  border-color: var(--gold);
  color: #fff;
}
.btn-music-upload:hover,
.btn-music-action:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
}
.btn-music-reset {
  background: rgba(226, 109, 92, 0.15);
  color: #e26d5c;
  border-color: rgba(226, 109, 92, 0.4);
}
.btn-music-reset:hover {
  border-color: #e26d5c;
  background: rgba(226, 109, 92, 0.25);
}
.link-modal-switch {
  background: none;
  border: none;
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  display: inline;
}
.link-modal-switch:hover {
  color: #ffe0a1;
}

/* Hero Spotlight Card (Side Panel) */
.hero-spotlight-card {
  margin: 14px 0 16px;
  background: linear-gradient(135deg, rgba(16, 38, 54, 0.95), rgba(26, 56, 78, 0.92));
  border: 1px solid rgba(213, 164, 78, 0.4);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.hero-spotlight-card:hover {
  border-color: var(--gold);
  box-shadow: 0 8px 24px rgba(213, 164, 78, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}
.hero-spotlight-img-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16 / 9;
  background: #091522;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.hero-spotlight-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 25%;
  display: block;
  transition: transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.hero-spotlight-img-wrap:hover .hero-spotlight-img {
  transform: scale(1.06);
}
.hero-spotlight-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--gold);
  color: #102636;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.8px;
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.hero-spotlight-zoom {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background 0.15s ease;
}
.hero-spotlight-img-wrap:hover .hero-spotlight-zoom {
  background: rgba(213, 164, 78, 0.9);
  color: #102636;
}
.hero-spotlight-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-spotlight-title {
  font-family: Georgia, serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
}
.hero-spotlight-desc {
  font-size: 10px;
  color: #9cb5c1;
  line-height: 1.4;
}

/* Overlay Card Hero Avatar */
.overlay-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  text-align: left;
}
.overlay-hero-avatar-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--gold);
  box-shadow: 0 0 12px rgba(213, 164, 78, 0.45);
  flex-shrink: 0;
  cursor: pointer;
  background: #091522;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.overlay-hero-avatar-wrap:hover {
  transform: scale(1.1);
  box-shadow: 0 0 18px rgba(213, 164, 78, 0.7);
}
.overlay-hero-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
}
.overlay-header-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.overlay-header-text .menu-level-badge {
  margin-bottom: 0;
}

/* Hero Artwork Lightbox Modal */
.modal-hero-art-box {
  width: min(94%, 780px);
  max-height: 92vh;
}
.modal-hero-art-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal-hero-art-frame {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(213, 164, 78, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  background: #060e15;
}
.modal-hero-art-img {
  width: 100%;
  height: auto;
  display: block;
}
.modal-hero-art-caption {
  font-size: 12px;
  line-height: 1.6;
  color: #c0d8e2;
  background: rgba(16, 38, 54, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 14px;
}
.modal-hero-art-caption strong {
  color: var(--gold);
}

/* Voice Filenames Reference Table */
.voice-filenames-card {
  background: rgba(10, 26, 38, 0.7);
  border: 1px solid rgba(213, 164, 78, 0.35);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.voice-filenames-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gold);
}
.voice-filenames-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}
.voice-filenames-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.voice-filenames-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  text-align: left;
}
.voice-filenames-table th {
  background: rgba(22, 53, 73, 0.9);
  color: #dbeaf0;
  font-weight: 700;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}
.voice-filenames-table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #a8c4cc;
}
.voice-filenames-table tr:last-child td {
  border-bottom: none;
}
.voice-filenames-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}
.voice-filenames-table code {
  color: #f7cf74;
  background: rgba(0, 0, 0, 0.3);
  padding: 1px 4px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 10.5px;
}