* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 -webkit-tap-highlight-color: transparent;
 }

 :root {
 --arcade-font: "Press Start 2P", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
 --arcade-menu-font: "Audiowide", "Press Start 2P", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
 }

 html {
 height: 100%;
 height: -webkit-fill-available;
 }

 body {
 font-family: var(--arcade-font);
 background: linear-gradient(180deg, #87CEEB 0%, #E0F6FF 100%);
 overflow: hidden;
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 min-height: 100dvh;
 min-height: -webkit-fill-available;
 touch-action: none;
 }

 #gameContainer {
 position: relative;
 width: 400px;
 height: 600px;
 max-width: 100vw;
 max-height: 100vh;
 background: linear-gradient(180deg, #B0E0E6 0%, #F0F8FF 100%);
 border: 4px solid #333;
 border-radius: 10px;
 overflow: hidden;
 box-shadow: 0 10px 30px rgba(0,0,0,0.3);
 }

@media (max-width: 420px) {
 body {
  justify-content: flex-start;
  align-items: stretch;
  min-height: 100dvh;
  min-height: 100svh;
  height: 100dvh;
  height: 100svh;
 }
 #gameContainer {
 width: 100vw;
 height: 100dvh;
 height: 100svh;
 max-width: none;
 max-height: none;
  border-radius: 0;
  border: none;
 }
}

 canvas {
 display: block;
 background: linear-gradient(180deg, #B0E0E6 0%, #D3D3D3 100%);
 width: 100%;
 height: 100%;
 }

#ui{
  position: absolute;
  top: calc(env(safe-area-inset-top) + 52px);
  right: 12px;
  bottom: auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;

  color: #E8F6FF;
  z-index: 20;
  pointer-events: none;
  opacity: 1;

  text-align: right;
  line-height: 1.25;

  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

 #pauseBtn {
 position: absolute;
 top: 10px;
 right: 10px;
 background: rgba(255, 255, 255, 0.48);
 border: 3px solid #333;
 border-radius: 9px;
 width: 34px;
 height: 34px;
 font-size: 14px;
 line-height: 1;
 letter-spacing: 0;
 display: none;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 z-index: 15;
 box-shadow: 0 3px 8px rgba(0,0,0,0.3);
 opacity: 0.82;
 }

 #musicToggle {
 position: absolute;
 top: 10px;
 right: 50px;
 left: auto;
 width: 34px;
 height: 34px;
 padding: 0;
 background: rgba(255, 255, 255, 0.28);
 color: #f8fbff;
 border: 1px solid rgba(255, 255, 255, 0.35);
 border-radius: 999px;
 font-size: 18px;
 line-height: 1;
 font-family: var(--arcade-font);
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 z-index: 16;
 backdrop-filter: blur(1px);
 box-shadow: 0 2px 8px rgba(0,0,0,0.22);
 opacity: 0.82;
 }

 #musicToggle:hover {
 background: rgba(255, 255, 255, 0.26);
 }

 #pauseBtn:hover {
 background: rgba(220, 220, 220, 0.9);
 transform: scale(1.05);
 }

 #pauseBtn:active {
 transform: scale(0.95);
 }

 #pauseBtn.show {
 display: flex;
 }

 #adminBtn {
 position: absolute;
 top: 10px;
 right: 50px;
 background: linear-gradient(180deg, #FFEFAE 0%, #FFD869 52%, #F2A92E 100%);
 border: 2px solid #5A3200;
 border-radius: 9px;
  min-width: 56px;
  height: 34px;
  padding: 0 8px;
  font-size: 9px;
  font-family: var(--arcade-font);
  color: #2A1400;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  line-height: 1;
  letter-spacing: 0;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 21;
  box-shadow:
  0 3px 0 #7A4609,
  0 0 0 1px rgba(255, 249, 207, 0.45) inset,
  0 0 10px rgba(255, 203, 74, 0.55);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
  }

  #adminBtn.show {
  display: flex;
  }

 #adminBtn:hover {
  filter: brightness(1.06) saturate(1.08);
  box-shadow:
  0 3px 0 #7A4609,
  0 0 0 1px rgba(255, 249, 207, 0.5) inset,
  0 0 14px rgba(255, 203, 74, 0.72);
 }

 #adminBtn:active {
  transform: translateY(1px);
  box-shadow:
  0 2px 0 #7A4609,
  0 0 0 1px rgba(255, 249, 207, 0.42) inset,
  0 0 8px rgba(255, 203, 74, 0.45);
 }

#adminPanel {
position: absolute;
 top: calc(env(safe-area-inset-top) + 48px);
 right: 8px;
 width: min(58vw, 222px);
 max-height: min(76vh, 520px);
 overflow-y: auto;
 padding: 9px;
 border-radius: 12px;
 background: linear-gradient(180deg, rgba(8, 20, 38, 0.97) 0%, rgba(7, 16, 30, 0.96) 100%);
 border: 2px solid rgba(103, 232, 249, 0.7);
 display: none;
 pointer-events: auto;
 z-index: 22;
 box-shadow: 0 10px 24px rgba(0,0,0,0.45);
 }

 #adminPanel.show {
 display: block;
 }

 #adminPanel .admin-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 7px;
 }

 #adminPanel .admin-section {
 grid-column: 1 / -1;
 margin-top: 3px;
 padding: 3px 5px;
 font-size: 7px;
 letter-spacing: 0.55px;
 color: #BDF7FF;
 border-bottom: 1px solid rgba(103, 232, 249, 0.35);
 text-transform: uppercase;
 }

#adminPanel button {
min-height: 30px;
padding: 5px 6px;
font-size: 7px;
letter-spacing: 0.25px;
 border-radius: 7px;
 border: 1px solid rgba(103, 232, 249, 0.25);
 background: rgba(15, 40, 65, 0.78);
 color: #EAFBFF;
 font-family: var(--arcade-font);
 text-transform: uppercase;
 }

#adminPanel button:active {
transform: translateY(1px);
}

#adminPanel button:hover {
 background: rgba(21, 54, 84, 0.86);
 border-color: rgba(103, 232, 249, 0.46);
}

#adminPanel .admin-wide {
 grid-column: 1 / -1;
}

#adminPanel .admin-status {
 grid-column: 1 / -1;
 min-height: 16px;
 padding: 3px 5px;
 border-radius: 6px;
 border: 1px solid rgba(103, 232, 249, 0.42);
 background: rgba(10, 30, 52, 0.72);
 color: #BDF7FF;
 font-family: var(--arcade-font);
 font-size: 6px;
 letter-spacing: 0.2px;
 line-height: 1.35;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: 100%;
}

#adminPanel [data-admin-action="toggle-audio-log"] {
 min-height: 24px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

#adminPanel [data-admin-action="toggle-player-walk"].is-on {
 background: rgba(33, 84, 52, 0.82);
 border-color: rgba(138, 255, 168, 0.6);
 color: #E9FFEE;
}

#adminPanel [data-admin-action="toggle-player-run"].is-on {
 background: rgba(92, 54, 18, 0.84);
 border-color: rgba(255, 206, 128, 0.72);
 color: #FFF5E8;
}

@media (max-width: 480px) {
 #adminPanel {
  width: min(72vw, 248px);
  right: 6px;
  top: calc(env(safe-area-inset-top) + 44px);
 }
}

 #perfNextBtn {
 position: absolute;
 bottom: 126px;
 left: 8px;
 min-width: 112px;
 height: 28px;
 padding: 0 8px;
 border-radius: 8px;
 border: 2px solid #2f5a79;
 background: rgba(12, 36, 58, 0.94);
 color: #EAFBFF;
 font-family: var(--arcade-font);
 font-size: 7px;
 display: none;
 align-items: center;
 justify-content: center;
 z-index: 23;
 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
 }

 #perfNextBtn.show {
 display: flex;
 }

 #perfNextBtn:disabled {
 opacity: 0.55;
 filter: grayscale(0.2);
 }

 #perfRetryBtn {
 position: absolute;
 bottom: 126px;
 left: 126px;
 min-width: 112px;
 height: 26px;
 padding: 0 8px;
 border-radius: 8px;
 border: 2px solid #6b4f21;
 background: rgba(58, 34, 12, 0.94);
 color: #FFE7B8;
 font-family: var(--arcade-font);
 font-size: 7px;
 display: none;
 align-items: center;
 justify-content: center;
 z-index: 23;
 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
 }

 #perfRetryBtn.show {
 display: flex;
 }

 #perfStepActionBtn {
 position: absolute;
 bottom: 160px;
 left: 8px;
 min-width: 172px;
 height: 26px;
 padding: 0 10px;
 border-radius: 8px;
 border: 2px solid #2a6a5a;
 background: rgba(8, 50, 44, 0.94);
 color: #BFFFEF;
 font-family: var(--arcade-font);
 font-size: 7px;
 display: none;
 align-items: center;
 justify-content: center;
 z-index: 23;
 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
 }

 #perfStepActionBtn.show {
 display: flex;
 }

 #perfFreezeOverlay {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 width: min(92vw, 360px);
 padding: 10px 12px;
 border-radius: 10px;
 border: 2px solid #67E8F9;
 background: rgba(4, 14, 30, 0.94);
 color: #EAFBFF;
 font-family: var(--arcade-font);
 font-size: 8px;
 line-height: 1.45;
 z-index: 40;
 display: none;
 box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
 pointer-events: none;
 text-align: left;
 white-space: pre-line;
 }

 #perfFreezeOverlay.show {
 display: block;
 }

 #perfInstructionBox {
 position: absolute;
 left: 8px;
 bottom: 8px;
 width: min(92vw, 380px);
 padding: 8px 10px;
 border-radius: 9px;
 border: 2px solid #67E8F9;
 background: rgba(6, 20, 38, 0.92);
 color: #EAFBFF;
 font-family: var(--arcade-font);
 font-size: 7px;
 line-height: 1.5;
 z-index: 31;
 display: none;
 white-space: pre-line;
 pointer-events: none;
 }

 #perfInstructionBox.show {
 display: block;
 }

#score{
  font-size: 12px;
  margin: 0;
  font-weight: 700;
  color: #EAFBFF;
  opacity: 0.9;
  min-width: 96px;
  justify-content: center;
}

#heartsHud{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
  opacity: 0.76;
}

#ammoRail{
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  pointer-events: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: rgba(6, 25, 46, 0.62);
  border: 1px solid rgba(103, 232, 249, 0.3);
  border-radius: 9px;
  padding: 5px 4px;
  min-width: 26px;
  opacity: 0.74;
}

.ui-rail-label{
  font-size: 6px;
  color: #CFEFFF;
  opacity: 0.84;
  letter-spacing: 0.45px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

.ui-rail-value{
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
  font-family: "Audiowide", "Segoe UI", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ui-rail-icon{
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  opacity: 0.96;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
}

.ui-rail-icon svg{
  width: 100%;
  height: 100%;
  display: block;
}

#slaps{
  font-size: 10px;
  margin: 0;
  color: #FFD7DF;
  opacity: 0.9;
}

#raincheck{
  font-size: 9px;
  margin: 4px 0 0 0;
  color: #FFE4B5;
  opacity: 0.8;
}

#floatingCounters{
  position: absolute;
  top: calc(env(safe-area-inset-top) + 8px);
  left: 6px;
  z-index: 20;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ui-item{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  background: rgba(6, 25, 46, 0.7);
  border: 1px solid rgba(103, 232, 249, 0.38);
  border-radius: 10px;
  padding: 5px 9px;
  min-width: 74px;
}

.ui-icon{
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  opacity: 0.98;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
}

.ui-icon svg{
  width: 100%;
  height: 100%;
  display: block;
}

.ui-label{
  font-size: 8px;
  color: #d7f4ff;
  opacity: 0.88;
}

.ui-value{
  display: inline-block;
  min-width: 20px;
  color: #ffffff;
  font-family: "Audiowide", "Segoe UI", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ui-emoji{
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
}

.heart{
  display: inline-block;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 20px;
  line-height: 1;
  opacity: 0.95;
}

.heart.lost{
  filter: grayscale(1) brightness(0.5);
  opacity: 0.45;
}

.life-1{
  margin: 0;
}

.life-2{
  margin: 0;
}

.life-3{
  margin: 0;
}

 #gameOver {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background: linear-gradient(135deg, rgba(102, 126, 234, 0.97) 0%, rgba(118, 75, 162, 0.97) 100%);
 padding: 26px;
 border-radius: 15px;
 border: 3px solid #67E8F9;
 text-align: center;
 display: none;
 box-shadow: 0 12px 28px rgba(0,0,0,0.48), 0 0 18px rgba(103, 232, 249, 0.34);
 z-index: 20;
 width: min(92vw, 360px);
 }

 #gameOver h1 {
 color: #FFD700;
 margin-bottom: 14px;
 font-size: 18px;
 line-height: 1.3;
 text-shadow: 3px 3px 7px rgba(0,0,0,0.65);
 }

 #gameOver p {
 margin: 10px 0;
 font-size: 12px;
 line-height: 1.5;
 color: #F7F5FF;
 }
 #finalScore {
 margin: 8px 0 10px;
 font-size: 13px;
 font-weight: 700;
 color: #FFF2BE;
 text-shadow: 1px 1px 3px rgba(0,0,0,0.45);
 }
 #gameOverStats {
 display: grid;
 gap: 8px;
 margin: 10px 0 8px;
 }
 .gameover-stat {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 padding: 8px 10px;
 border: 1px solid rgba(255, 255, 255, 0.45);
 border-radius: 10px;
 background: rgba(8, 18, 44, 0.45);
 text-align: left;
 }
 .gameover-stat-label {
 font-size: 11px;
 color: #F6EEFF;
 opacity: 0.92;
 }
 .gameover-stat-value {
 font-size: 12px;
 font-weight: 800;
 color: #FFE27A;
 white-space: nowrap;
 text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
 }
 #gameOverCredit {
 margin-top: 8px;
 font-size: 9px;
 color: rgba(255, 255, 255, 0.8);
 letter-spacing: 0.3px;
 }

 #restartBtn {
 margin-top: 16px;
 padding: 12px 18px;
 font-size: 12px;
 background: #4CAF50;
 color: white;
 border: 2px solid rgba(255, 255, 255, 0.38);
 border-radius: 10px;
 cursor: pointer;
 font-weight: 700;
 box-shadow: 0 5px 15px rgba(0,0,0,0.32);
 font-family: var(--arcade-font);
 transition: all 0.3s;
 }

 #restartBtn:hover {
 background: #45a049;
 transform: translateY(-2px);
 box-shadow: 0 7px 20px rgba(0,0,0,0.4);
 }

 #startScreen {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 color: white;
 z-index: 30;
 padding: 44px 18px 18px;
 text-align: center;
 overflow: hidden;
 }

 #titleMusicLoopToggle {
 position: absolute;
 top: 12px;
 left: 12px;
 width: 34px;
 height: 34px;
 padding: 0;
 background: rgba(255, 255, 255, 0.16);
 color: #f8fbff;
 border: 1px solid rgba(255, 255, 255, 0.35);
 border-radius: 999px;
 font-size: 18px;
 line-height: 1;
 font-family: var(--arcade-font);
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 z-index: 40;
 backdrop-filter: blur(1px);
 box-shadow: 0 2px 8px rgba(0,0,0,0.22);
 opacity: 0.92;
 }

 #titleMusicLoopToggle:hover {
 background: rgba(255, 255, 255, 0.26);
 }

 #startScreen h1 {
 font-size: 22px;
 margin-bottom: 8px;
 color: #FFD700;
 text-shadow: 4px 4px 8px rgba(0,0,0,0.8);
 animation: pulse 2s ease-in-out infinite;
 line-height: 1.35;
 }

 #startScreen .coverArt {
 width: min(292px, 76vw);
 height: auto;
 max-height: min(46vh, 280px);
 margin-bottom: 12px;
 border: 3px solid rgba(255, 215, 0, 0.85);
 border-radius: 14px;
 box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
 object-fit: contain;
 display: block;
 max-width: 100%;
 box-sizing: border-box;
 background: rgba(7, 15, 28, 0.34);
 }

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

 .tagline-pill {
 font-family: var(--arcade-menu-font);
 font-size: 11px;
 color: #FFE18A;
 line-height: 1.6;
 padding: 8px 14px;
 border: 2px solid rgba(255, 215, 0, 0.72);
 border-radius: 999px;
 background: rgba(7, 15, 28, 0.42);
 box-shadow: 0 6px 14px rgba(0, 0, 0, 0.34), 0 0 12px rgba(255, 215, 0, 0.2);
 letter-spacing: 0.35px;
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
 }

 #startScreen .subtitle {
 font-size: 10px;
 margin-bottom: 18px;
 opacity: 0.95;
 color: #FFD700;
 }

 #startScreen .subtitle .shush {
 font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
 font-size: 14px;
 line-height: 1;
 }

 #gameOverMsg {
 margin-top: 10px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 }

 #startScreen .subtitle .shush {
 display: inline-block;
 margin: 0 6px;
 filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
 animation: shushFloat 1.8s ease-in-out infinite;
 }

 #startScreen .subtitle .shush.right {
 animation-delay: 0.25s;
 }

 @keyframes shushFloat {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-2px); }
 }

 #startScreen .controls {
 background: rgba(7, 15, 28, 0.96);
 padding: 20px 18px 16px;
 border-radius: 14px;
 text-align: left;
 font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif;
 width: min(92vw, 360px);
 max-height: min(74vh, 460px);
 overflow-y: auto;
 display: none;
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 z-index: 40;
 border: 3px solid #67E8F9;
 box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55), 0 0 12px rgba(103, 232, 249, 0.22);
 }

 #startScreen .controls.show {
 display: block;
 animation: instructionsPop 180ms ease-out;
 }

 #startScreen.instructions-open .coverArt,
 #startScreen.instructions-open h1,
 #startScreen.instructions-open .subtitle,
 #startScreen.instructions-open #startBtn,
#startScreen.instructions-open #instructionsBtn,
#startScreen.instructions-open #trailerBtn {
opacity: 0.22;
filter: blur(1px);
pointer-events: none;
}

#startScreen.title-locked .coverArt,
#startScreen.title-locked h1,
#startScreen.title-locked .subtitle,
#startScreen.title-locked #startBtn,
#startScreen.title-locked #instructionsBtn,
#startScreen.title-locked #trailerBtn {
 opacity: 0;
 filter: blur(8px);
 pointer-events: none;
}

#startScreen.title-locked::after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(145deg, rgba(70, 84, 162, 0.9) 0%, rgba(57, 34, 88, 0.9) 100%);
 z-index: 34;
}

 #startScreen.instructions-open::after {
 content: "";
 position: absolute;
 inset: 0;
 background: rgba(0, 0, 0, 0.35);
 z-index: 35;
 }

 @keyframes instructionsPop {
 0% {
 transform: translate(-50%, -42%) scale(0.94);
 opacity: 0;
 }
 100% {
 transform: translate(-50%, -50%) scale(1);
 opacity: 1;
 }
 }

 #startScreen .controls p {
 margin: 10px 0;
 font-size: 13px;
 line-height: 1.5;
 letter-spacing: 0;
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
 color: #F3F8FF;
 }

 #startScreen .controls strong {
 font-family: var(--arcade-menu-font);
 font-size: 10px;
 letter-spacing: 0.3px;
 color: #FFE18A;
 }

 #startScreen .controls .powerup-row {
 display: flex;
 align-items: center;
 gap: 8px;
 }

 #startScreen .controls .powerup-icon {
 width: 16px;
 height: 16px;
 flex: 0 0 16px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 }

 #startScreen .controls .powerup-icon svg {
 width: 16px;
 height: 16px;
 display: block;
 }

#titleUnlockOverlay {
position: absolute;
inset: 0;
z-index: 55;
 display: flex;
 align-items: center;
 justify-content: center;
text-align: center;
padding: 24px;
background:
 radial-gradient(120% 90% at 50% 12%, rgba(255, 225, 138, 0.18) 0%, rgba(255, 225, 138, 0) 58%),
 linear-gradient(145deg, rgba(24, 34, 74, 0.84) 0%, rgba(20, 14, 38, 0.88) 100%);
backdrop-filter: blur(16px) saturate(0.95);
-webkit-backdrop-filter: blur(16px) saturate(0.95);
cursor: pointer;
}

 #titleUnlockOverlay.hidden {
 display: none;
 }

 #titleUnlockOverlay .prompt {
 max-width: min(92vw, 340px);
 padding: 14px 16px;
 border: 2px solid rgba(255, 215, 0, 0.82);
 border-radius: 12px;
 background: rgba(10, 16, 36, 0.84);
 color: #ffe27a;
 font-size: 10px;
 line-height: 1.8;
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
 animation: unlockPulse 1.3s ease-in-out infinite;
 }

 @keyframes unlockPulse {
 0%, 100% { transform: scale(1); }
 50% { transform: scale(1.02); }
 }

 #closeInstructions {
 position: absolute;
 top: 10px;
 right: 10px;
 background: #ff4444;
 color: white;
 border: none;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 cursor: pointer;
 font-size: 18px;
 font-weight: bold;
 line-height: 1;
 font-family: var(--arcade-font);
 }

 #closeInstructions:hover {
 background: #cc0000;
 }

 #startBtn {
 padding: 16px 26px;
 font-size: 14px;
 background: #4CAF50;
 color: white;
 border: none;
 border-radius: 12px;
 cursor: pointer;
 font-weight: 700;
 margin: 7px;
 box-shadow: 0 5px 15px rgba(0,0,0,0.3);
 transition: all 0.3s;
 font-family: var(--arcade-menu-font);
 letter-spacing: 0.4px;
 -webkit-font-smoothing: antialiased;
 text-rendering: geometricPrecision;
 }

 #startBtn:hover {
 background: #45a049;
 transform: translateY(-2px);
 box-shadow: 0 7px 20px rgba(0,0,0,0.4);
 }

 #instructionsBtn {
 padding: 12px 18px;
 font-size: 12px;
 background: #2196F3;
 color: white;
 border: none;
 border-radius: 10px;
 cursor: pointer;
 font-weight: 700;
 margin: 7px;
 box-shadow: 0 3px 10px rgba(0,0,0,0.3);
 transition: all 0.3s;
 font-family: var(--arcade-menu-font);
 letter-spacing: 0.35px;
 -webkit-font-smoothing: antialiased;
 text-rendering: geometricPrecision;
 }

 #instructionsBtn:hover {
 background: #0b7dda;
 transform: translateY(-2px);
 }

 #trailerBtn {
 padding: 12px 18px;
 font-size: 11px;
 background: #8f4ac8;
 color: white;
 border: none;
 border-radius: 10px;
 cursor: pointer;
 font-weight: 700;
 margin: 7px;
 box-shadow: 0 3px 10px rgba(0,0,0,0.3);
 transition: all 0.3s;
 font-family: var(--arcade-menu-font);
 letter-spacing: 0.35px;
 -webkit-font-smoothing: antialiased;
 text-rendering: geometricPrecision;
 }

 #trailerBtn:hover {
 background: #7a32b6;
 transform: translateY(-2px);
 }

 #pauseMenu {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background: rgba(0, 0, 0, 0.95);
 padding: 28px;
 border-radius: 16px;
 border: 3px solid #67E8F9;
 text-align: center;
 display: none;
 box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 12px rgba(103, 232, 249, 0.22);
 z-index: 25;
 color: white;
 width: min(92vw, 360px);
 }

 #pauseMenu h2 {
 color: #FFD700;
 margin-bottom: 18px;
 font-size: 18px;
 line-height: 1.3;
 }

 #pauseMenu button {
 margin: 10px;
 padding: 12px 18px;
 font-size: 12px;
 background: #4CAF50;
 color: white;
 border: none;
 border-radius: 10px;
 cursor: pointer;
 font-weight: 700;
 box-shadow: 0 3px 10px rgba(0,0,0,0.3);
 transition: all 0.3s;
 font-family: var(--arcade-font);
 }

 #pauseMenu button:hover {
 background: #45a049;
 transform: translateY(-2px);
 }

 #pauseMenu button.secondary {
 background: #2196F3;
 }

 #pauseMenu button.secondary:hover {
 background: #0b7dda;
 }

 #pauseMenu button.danger {
 background: #f44336;
 }

 #pauseMenu button.danger:hover {
 background: #da190b;
 }

#trailerModal {
position: absolute;
inset: 0;
z-index: 60;
display: none;
align-items: center;
justify-content: center;
background: rgba(4, 8, 18, 0.86);
padding: 16px;
}

#trailerModal.show {
display: flex;
}

#trailerModal .trailer-frame {
position: relative;
width: min(92vw, 360px);
aspect-ratio: 16 / 9;
border: 2px solid rgba(255, 215, 0, 0.8);
border-radius: 12px;
background: #000;
box-shadow: 0 12px 24px rgba(0,0,0,0.5);
overflow: hidden;
}

#trailerEmbedFrame {
width: 100%;
height: 100%;
border: 0;
display: block;
}

#closeTrailerModal {
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
z-index: 1;
border: none;
border-radius: 999px;
background: rgba(0, 0, 0, 0.68);
color: #fff;
font-size: 14px;
font-weight: 700;
cursor: pointer;
line-height: 1;
}