/* Global Styles */
span {
  color: inherit;
  opacity: 1;
  visibility: visible;
}

:root {
  --primary-red: #ff5555;
  --glow-cyan: #00ffff;
  --glow-yellow: #ffff00;
  --glow-green: #00ff00;
  --glow-red: #ff0000;
  --glow-magenta: #ff00ff;
  --bg-dark: rgba(0, 0, 0, 0.7);
  --text-shadow: 0 0 4px rgba(0, 255, 255, 0.5);
}

@font-face {
  font-family: 'MyCustomFont';
  src: url('assets/fonts/my-custom-font.otf') format('opentype');
  font-display: inline;
}

* {
  font-family: 'MyCustomFont', Arial, sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #0d0b09;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  transition: background 0.5s ease;
}

body.game-active {
  background: url('assets/game-background.png') no-repeat center/cover;
}

body.game-active.big-win {
  animation: background-flash 0.5s ease;
}

body.game-active.frenzy {
  animation: frenzy-pulse 1s infinite ease-in-out;
}

#game-screen, #game-screen * {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#game-screen img {
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Welcome Screen */
#welcome-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
  background: url('assets/welcome-background.png') no-repeat center/contain;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: auto !important;
}

#welcome-screen.active {
  opacity: 1;
  visibility: visible;
}

#welcome-screen .centered-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  z-index: 3;
  pointer-events: auto !important;
}

#welcome-screen h1 {
  font-size: 48px;
  color: var(--primary-red);
  text-shadow: 0 0 8px var(--primary-red), 0 0 16px var(--glow-cyan);
  margin-bottom: 16px;
  animation: casino-title 2s infinite ease-in-out;
}

#connect-btn, #battle-progress-btn, #how-to-play-btn, #phantom-wallet-btn, .twitter-button, #connect-message {
  z-index: 4;
}

#connect-btn, #battle-progress-btn, #how-to-play-btn, #phantom-wallet-btn, .twitter-button {
  padding: 8px 16px;
  font-size: 16px;
  background: var(--bg-dark);
  color: #fff;
  border: 1px solid var(--primary-red);
  border-radius: 4px;
  cursor: pointer;
  text-shadow: var(--text-shadow);
  transition: background 0.2s ease, transform 0.1s ease;
  pointer-events: auto !important;
}

#connect-btn:hover, #battle-progress-btn:hover, #how-to-play-btn:hover, #phantom-wallet-btn:hover, .twitter-button:hover {
  background: rgba(255, 85, 85, 0.7);
}

#connect-btn:focus, #battle-progress-btn:focus, #how-to-play-btn:focus, #phantom-wallet-btn:focus, .twitter-button:focus {
  outline: 2px solid var(--glow-cyan);
  outline-offset: 2px;
}

#connect-btn:active, #battle-progress-btn:active, #how-to-play-btn:active, #phantom-wallet-btn:active, .twitter-button:active {
  transform: scale(0.95);
}

.twitter-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.twitter-button {
  text-decoration: none;
  display: inline-block;
}

@supports not (gap: 1rem) {
  #welcome-screen .centered-container > * + * {
    margin-top: 16px;
  }

  .twitter-links > * + * {
    margin-top: 8px;
  }

  #pal-selection > * + * {
    margin-top: 20px;
  }

  .user-input-dialog > * + * {
    margin-top: 10px;
  }

  #high-score > * + * {
    margin-top: 8px;
  }
}


#connect-message {
  font-size: 18px;
  color: var(--primary-red);
  text-shadow: 1px 1px 2px rgba(0, 255, 255, 0.5);
}

#connect-message.blinking-queue {
  animation: blinkQueue 0.8s infinite;
}

#connect-message.blinking-connected {
  animation: blinkQueue 0.8s infinite;
}

/* Pal Selection */
#pal-selection {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  background: var(--bg-dark);
  padding: 20px;
  z-index: 10000;
  width: 80%;
  max-width: 600px;
  border-radius: 8px;
  border: 2px solid var(--glow-magenta);
  box-shadow: 0 0 20px var(--glow-magenta);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#pal-selection.visible {
  display: flex;
  opacity: 1;
  visibility: visible;
}

#pal-selection h2 {
  color: #fff;
  font-size: 20px;
  text-shadow: 0 0 8px var(--glow-yellow);
}

#pal-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, 120px);
  gap: 12px;
  justify-content: center;
  max-height: 300px;
  overflow-y: auto;
  padding: 15px;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--glow-cyan);
  border-radius: 8px;
}

#pal-options::-webkit-scrollbar {
  width: 8px;
}

#pal-options::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
}

#pal-options::-webkit-scrollbar-thumb {
  background: var(--glow-magenta);
  border-radius: 4px;
}

#pal-options::-webkit-scrollbar-thumb:hover {
  background: var(--glow-yellow);
}

.pal-option {
  width: 120px;
  height: 120px;
  position: relative;
  cursor: pointer;
  border: 4px solid #444;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease;
}

.pal-option.unavailable {
  cursor: not-allowed;
  filter: grayscale(100%);
}

.pal-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pal-option .pal-info {
  display: none;
}

.pal-option:hover .pal-info,
.pal-option:focus .pal-info {
  display: block;
}

.pal-option .pal-info p {
  text-align: center;
  margin-top: 5px;
  color: #fff;
  text-shadow: var(--text-shadow);
  font-size: 14px;
  background: rgba(255, 0, 0, 0.5);
  padding: 5px;
}

/* Hide pal info by default */
.pal-option .pal-info {
  display: none;
}

#select-pal-btn {
  font-size: 14px;
}

.pal-option:hover,
.pal-option:focus,
.pal-option.focused {
  border-color: var(--glow-yellow);
}

/* Reveal pal info on hover or keyboard focus */
.pal-option:hover .pal-info,
.pal-option:focus .pal-info,
.pal-option.focused .pal-info {
  display: block;
}

.pal-option.selected {
  border-color: var(--glow-cyan);
}

.pal-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.pal-option:hover .pal-info,
.pal-option:focus .pal-info {
  opacity: 1;
}

.pal-option.hidden {
  display: none;
}

#select-pal-btn {
  padding: 8px 16px;
  font-size: 16px;
  background: var(--bg-dark);
  color: #fff;
  border: 1px solid var(--primary-red);
  border-radius: 4px;
  cursor: pointer;
  text-shadow: var(--text-shadow);
  transition: background 0.2s ease, transform 0.1s ease;
}

#select-pal-btn:hover {
  background: rgba(255, 85, 85, 0.7);
}

#select-pal-btn:focus {
  outline: 2px solid var(--glow-cyan);
  outline-offset: 2px;
}

#select-pal-btn:active {
  transform: scale(0.95);
}

/* Game Screen */
#game-screen {
  display: none;
  position: relative;
  width: 960px;
  height: 640px;
  overflow: visible;
  pointer-events: auto;
  z-index: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#game-screen.active {
  opacity: 1;
  visibility: visible;
}

/* Music Toggle */
#music-toggle {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2600;
}

#music-toggle button {
  padding: 8px 16px;
  font-size: 12px;
  background: var(--bg-dark);
  color: #fff;
  border: 1px solid var(--primary-red);
  border-radius: 4px;
  cursor: pointer;
  text-shadow: var(--text-shadow);
  transition: background 0.2s ease, transform 0.1s ease;
}

#music-toggle button:hover {
  background: rgba(255, 85, 85, 0.7);
}

#music-toggle button:focus {
  outline: 2px solid var(--glow-cyan);
  outline-offset: 2px;
}

#music-toggle button:active {
  transform: scale(0.95);
}

/* Cycle Timer */
#cycle-timer-game {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.5rem;
  color: #fff;
  font-family: 'MyCustomFont', Arial, sans-serif;
  font-weight: bold;
  padding: 8px 16px;
  line-height: 40px;
  white-space: nowrap;
  border: 1px solid #fff;
  outline: 2px solid var(--glow-yellow);
  background: var(--bg-dark);
  text-shadow: 1px 1px 2px rgba(0, 255, 255, 0.5);
  z-index: 1700;
  display: none;
  transition: opacity 0.3s ease;
}

#cycle-timer-game.active {
  display: block;
  opacity: 1;
}

#cycle-timer-game.dramatic {
  color: var(--glow-red);
  text-shadow: 1px 1px 2px rgba(0, 255, 255, 0.5), 0 0 6px var(--glow-red), 0 0 12px var(--primary-red);
  animation: dramatic-pulse 0.5s infinite;
}

/* Arcade Container */
#arcade {
  width: 100%;
  height: 100%;
  background: url('assets/arcade.png') no-repeat center/contain;
  position: relative;
  pointer-events: auto;
  animation: neon-glow 4s infinite ease-in-out;
}

#arcade:focus {
  outline: 2px solid var(--glow-cyan);
  outline-offset: 4px;
}

#arcade.shake {
  animation: shake 0.3s ease;
}

#arcade.big-win {
  animation: big-win-flash 0.7s ease 4;
}

/* Arcade Screen */
#arcade-screen {
  position: absolute;
  top: 37px;
  left: 245px;
  width: 470px;
  height: 294px;
  z-index: 4;
  pointer-events: none;
}

#arcade-screen.static-visible {
  z-index: 2;
}

#arcade-screen > * {
  pointer-events: none;
}

#coin-container {
  position: absolute;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
}

#coin-container > * {
  pointer-events: auto;
}

#arcade-screen.frenzy {
  animation: screen-warp 1.5s infinite ease-in-out;
}

#arcade-screen.health-loss.warning {
  animation: health-loss 0.5s infinite;
}

#arcade-screen.game-over {
  animation: game-over-flash 0.5s 3;
}

#arcade-screen.coin-catch-flash {
  animation: coin-catch-flash 0.3s ease;
}

#arcade-screen.bad-coin-flash {
  animation: bad-coin-flash 0.3s ease;
}

#arcade-screen.keyboard-flash {
  animation: keyboard-flash 0.1s ease;
}

/* Apply power-up animation only to the user sprite */
#current-sprite.power-up-active {
  animation: power-up-glow 1s infinite ease-in-out;
}

/* Coin Styles */
.coin-catch {
  width: 100px;
  height: 100px;
  cursor: pointer;
  transition: transform 0.1s ease;
  z-index: 10001;
  outline: 1px solid var(--glow-green);
  touch-action: manipulation;
  will-change: transform;
}

.coin-catch:not(.bad-coin):not(.power-up-coin):not(.pump-coin) {
  animation: spin 1s linear infinite, neon-glow-green 1s infinite;
}

.coin-catch:hover {
  transform: scale(1.2);
}

.coin-catch.clicked {
  animation: coin-click 0.2s ease;
}

.coin-catch.bad-coin {
  animation: bad-pulse 0.5s infinite, neon-glow-red 1s infinite;
  outline: 1px solid var(--glow-red);
}

.coin-catch.power-up-coin {
  animation: power-up-spin 0.8s linear infinite, neon-glow-green 1s infinite;
  outline: 2px solid var(--glow-magenta);
  filter: brightness(1.5);
}

.coin-catch.pump-coin {
  animation: power-up-spin 1s linear infinite, neon-glow-green 1s infinite;
  outline: 2px solid var(--glow-yellow);
  filter: brightness(1.8);
}

/* Particle Effects */
.sparkle-burst {
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, var(--glow-yellow) 20%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 900;
  animation: sparkle-burst 0.8s ease-out forwards;
}

.coin-burst-orb {
  position: absolute;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, var(--glow-cyan) 30%, var(--glow-yellow));
  border-radius: 50%;
  pointer-events: none;
  z-index: 10002;
  animation: coin-burst 0.7s ease-out forwards;
}

.score-particle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, var(--glow-yellow) 30%, var(--glow-green));
  border-radius: 50%;
  pointer-events: none;
  z-index: 1100;
  animation: particle-burst 0.6s ease-out forwards;
}

.score-particle.confetti {
  width: 15px;
  height: 15px;
  background: radial-gradient(circle, var(--glow-yellow) 30%, var(--glow-magenta));
  animation: confetti-fall 2s ease-out forwards;
}

.health-spark {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--glow-green);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1601;
  animation: spark-trail 0.8s linear forwards;
}

.button-sparkle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, var(--glow-cyan) 30%, transparent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1100;
  animation: sparkle-burst 0.6s ease-out forwards;
}

.shockwave {
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, var(--glow-cyan) 20%, transparent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  animation: shockwave-pulse 0.5s ease-out forwards;
}

/* Video Elements */
#tv-static,
#gameplay-loop {
  position: absolute;
  top: 37px;
  left: 245px;
  width: 470px;
  height: 294px;
  object-fit: cover;
  display: none;
  z-index: 3;
  background: #333;
  transition: opacity 0.3s ease;
}

#arcade.static-visible #tv-static {
  display: block;
  z-index: 6;
}

#gameplay-loop {
  background: #000;
}

#arcade-screen.static-visible #current-sprite,
#arcade-screen.static-visible #villain-sprite,
#arcade-screen.static-visible #streak-message,
#arcade-screen.static-visible #notification-message,
#arcade-screen.static-visible #health-bar-container,
#arcade-screen.static-visible #villain-health-bar-container,
#arcade-screen.static-visible #level-progress-container,
#arcade-screen.static-visible #score-display,
#arcade-screen.static-visible #cycle-timer-game {
  display: none;
}

/* Sprites */
#current-sprite,
#villain-sprite {
  max-width: 250px;
  max-height: 250px;
  display: none;
  position: absolute;
  top: 50px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(255, 255, 255, 0.2) inset;
  transition: transform 0.2s ease, opacity 0.3s ease;
  z-index: 7;
  animation: idle-sway 3s ease-in-out infinite;
}

#current-sprite {
  left: 20px;
}

#villain-sprite {
  left: 200px;
}

#current-sprite.visible,
#villain-sprite.visible {
  display: block;
  opacity: 1;
}

#current-sprite.hit-effect,
#villain-sprite.hit-effect {
  animation: hit-effect 0.3s ease;
}

#current-sprite.victory-pose,
#villain-sprite.victory-pose {
  animation: victory-pose 1s ease forwards;
}

#current-sprite.streak-aura,
#villain-sprite.streak-aura {
  animation: streak-glow 1s infinite ease-in-out;
}

#current-sprite.big-win,
#villain-sprite.big-win {
  animation: big-win-flash 0.7s ease 4;
}

#villain-sprite.defeat-pulse {
  animation: defeat-pulse 0.5s ease;
}

#villain-sprite.villain-taunt {
  animation: villain-taunt 0.5s ease;
}

#current-sprite.critical,
#villain-sprite.critical {
  animation: critical-pulse 0.5s infinite;
}

#current-sprite::after,
#villain-sprite::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%) rotateX(60deg);
  width: 60%;
  height: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  filter: blur(4px);
  z-index: -1;
}

.speech-bubble {
  position: absolute;
  padding: 4px 8px;
  border-radius: 8px;
  border: 2px solid #000;
  background: #fff;
  color: #000;
  font-size: 14px;
  white-space: nowrap;
  /* Ensure speech bubbles appear above other arcade screen elements */
  z-index: 1700;
  pointer-events: none;
}

.speech-bubble.hero {
  background: #e0f7fa;
  border-color: #00838f;
}

.speech-bubble.villain {
  background: #ffe0e0;
  border-color: #c62828;
}

.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

.speech-bubble.hero::after {
  border-color: #e0f7fa transparent transparent transparent;
}

.speech-bubble.villain::after {
  border-color: #ffe0e0 transparent transparent transparent;
}

/* Health Bar */
#health-bar-container {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 460px;
  height: 16px;
  background: #333;
  border: 2px solid var(--primary-red);
  z-index: 1600;
  outline: 1px solid var(--glow-green);
  display: none;
}

#health-bar {
  height: 100%;
  overflow: hidden;
}

#health-bar.warning {
  animation: warning-flash 0.5s infinite;
}

#health-bar.health-recover {
  animation: health-recover 0.5s ease;
}

#health-bar > div.health-bar-inner {
  height: 100%;
  background: linear-gradient(90deg, var(--glow-green), var(--glow-red));
  transition: width 0.5s ease;
  width: 0;
}

#health-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: var(--glow-green);
  text-shadow: 0 0 6px var(--glow-green);
  z-index: 1601;
  white-space: nowrap;
}

#health-bar-label {
  position: absolute;
  top: 17px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--glow-green);
  text-shadow: 0 0 6px var(--glow-green);
  z-index: 1601;
  white-space: nowrap;
}

/* Villain Health Bar */
#villain-health-bar-container {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 460px;
  height: 16px;
  background: #333;
  border: 2px solid var(--glow-magenta);
  z-index: 1600;
  outline: 1px solid var(--glow-yellow);
  display: none;
}

#villain-health-bar {
  height: 100%;
  overflow: hidden;
}

#villain-health-bar.warning {
  animation: warning-flash 0.5s infinite;
}

#villain-health-bar > div.villain-health-bar-inner {
  height: 100%;
  background: linear-gradient(90deg, var(--glow-magenta), var(--glow-yellow));
  transition: width 0.5s ease;
  width: 0;
}

#villain-health-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: var(--glow-yellow);
  text-shadow: 0 0 6px var(--glow-yellow);
  z-index: 1601;
  white-space: nowrap;
}

#villain-health-bar-label {
  position: absolute;
  top: 17px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--glow-magenta);
  text-shadow: 0 0 6px var(--glow-magenta);
  z-index: 1601;
  white-space: nowrap;
}

/* Level Progress Bar */
#level-progress-container {
  position: absolute;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  width: 460px;
  height: 12px;
  background: #333;
  border: 2px solid var(--glow-yellow);
  z-index: 1600;
  outline: 1px solid var(--glow-cyan);
  display: none;
}

#level-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--glow-cyan), var(--glow-yellow));
  transition: width 0.5s ease;
  width: 0;
  display: none;
}

#level-text {
  position: absolute;
  top: 60px;
  left: 10px;
  font-size: 14px;
  color: var(--glow-yellow);
  text-shadow: 0 0 6px var(--glow-yellow);
  background: var(--bg-dark);
  padding: 2px 4px;
  border-radius: 4px;
  z-index: 1601;
  white-space: nowrap;
}

#xp-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  color: var(--glow-cyan);
  text-shadow: 0 0 6px var(--glow-cyan);
  background: transparent;
  padding: 0;
  border-radius: 0;
  z-index: 1601;
  white-space: nowrap;
}

/* Power-Up Timer */
#power-up-timer {
  position: fixed;
  top: 150px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--glow-magenta);
  text-shadow: 0 0 6px var(--glow-magenta), 1px 1px 2px rgba(0, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.7);
  padding: 2px 4px;
  border-radius: 4px;
  z-index: 1600;
  display: none;
}

/* Score Display */
#score-display {
  position: absolute;
  top: 60px;
  right: 10px;
  font-size: 14px;
  color: var(--glow-yellow);
  text-shadow: 0 0 6px var(--glow-yellow), 1px 1px 2px rgba(0, 255, 255, 0.5);
  background: var(--bg-dark);
  padding: 2px 4px;
  border-radius: 4px;
  z-index: 1601;
  white-space: nowrap;
}

#score-display.ticker {
  animation: ticker-flash 0.5s ease 3;
}

/* Streak and Notification Messages */
#streak-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  color: var(--glow-green);
  text-shadow: 0 0 6px var(--glow-green), 1px 1px 2px rgba(0, 255, 255, 0.5);
  z-index: 10;
  text-align: center;
  transition: opacity 0.3s ease;
}

#streak-message.combo-pulse {
  animation: combo-pulse 0.5s ease-in-out infinite;
}

#notification-message {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--primary-red);
  text-shadow: 1px 1px 2px rgba(0, 255, 255, 0.5);
  border: 1px solid var(--primary-red);
  padding: 2px 4px;
  border-radius: 4px;
  max-width: 90%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  z-index: 1000;
  cursor: pointer;
  display: none;
  transition: opacity 0.3s ease;
}

#notification-message.multiplier-up {
  background: linear-gradient(45deg, var(--glow-green), #55ff55);
  color: #000;
  text-shadow: 0 0 6px var(--glow-green);
  border: 1px solid var(--glow-green);
}

/* User Input Dialog */
.user-input-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  padding: 20px;
  border-radius: 8px;
  z-index: 1000;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: inherit;
}

/* Button Containers */
.button-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 5;
}

#wham-btn {
  top: 340px;
  left: 200px;
  width: 130px;
  height: 130px;
}

#select-btn {
  top: 340px;
  left: 425px;
  width: 125px;
  height: 130px;
}

#blam-btn {
  top: 340px;
  left: 620px;
  width: 130px;
  height: 130px;
}

.button-img {
  width: 100%;
  height: 100%;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.3s ease, opacity 0.3s ease;
  touch-action: manipulation;
  will-change: transform, filter, opacity;
}

.button-img:not(.disabled):hover {
  transform: scale(1.1);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 12px var(--glow-cyan);
  filter: brightness(1.2);
}

.button-img.disabled {
  filter: brightness(0.5) grayscale(0.8);
  cursor: not-allowed;
  opacity: 0.7;
  pointer-events: none;
}

.button-img.active {
  animation: neon-glow 1.5s infinite ease-in-out;
  opacity: 1;
  filter: brightness(1);
}

.button-img.streak-glow {
  animation: streak-glow 1s infinite ease-in-out;
}

.button-img.correct-glow {
  animation: correct-glow 0.5s ease;
}

#select-btn .button-img.ready {
  animation: blink 0.5s 3;
}

#select-btn .button-img.cooldown {
  animation: cooldown 5s linear forwards;
}

#select-btn .button-img.cooldown-complete {
  animation: cooldown-complete 0.5s ease-in-out;
}

.button-img.pressed {
  animation: press 0.3s ease;
}

.button-img.clicked {
  animation: buttonClick 0.4s ease;
}

.button-label {
  font-size: 12px;
  color: #fff;
  text-shadow: var(--text-shadow);
  margin-top: 4px;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.button-label.hidden {
  display: none;
}

.number-label {
  font-size: 16px;
  color: var(--glow-yellow);
  text-shadow: 0 0 6px var(--glow-yellow), 1px 1px 2px rgba(0, 255, 255, 0.8);
  margin-top: 2px;
  pointer-events: none;
  animation: number-glow 1.5s infinite ease-in-out;
}

.cooldown-timer {
  font-size: 12px;
  color: var(--glow-yellow);
  text-shadow: 0 0 6px var(--glow-yellow), 1px 1px 2px rgba(0, 255, 255, 0.8);
  margin-top: 2px;
  pointer-events: none;
  display: none;
}

.number-label.active {
  animation: number-pulse 0.5s infinite;
}

/* Countdown Overlay */
#countdown-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: var(--primary-red);
  font-size: 96px;
  font-weight: 700;
  text-shadow: 0 0 24px var(--primary-red);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  animation: countdown-pulse 0.3s infinite;
}

/* Custom Alert */
#custom-alert {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
  text-align: center;
  z-index: 2100;
  animation: popOut 1s infinite;
}

#custom-alert-message {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 8px #000;
}

#custom-alert-score {
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 8px #000;
  margin-top: 8px;
}

/* High Score Overlay */
#high-score-overlay {
  display: none;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2500;
  text-align: center;
  background: transparent;
  gap: 10px;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#high-score-overlay.active {
  display: flex;
  opacity: 1;
  visibility: visible;
}

#high-score {
  background: var(--bg-dark);
  padding: 16px;
  border-radius: 8px;
  max-height: 400px;
  overflow-y: auto;
  width: 300px;
  text-align: center;
  animation: fade-in 0.5s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#high-score-message {
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(45deg, var(--primary-red), var(--glow-yellow));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 8px var(--primary-red), 0 0 16px var(--glow-yellow);
  margin-bottom: 0;
}

#high-score-value {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 12px var(--glow-yellow), 0 0 20px var(--primary-red);
  animation: count-up 2s ease-out forwards;
  margin: 0;
}

#high-score-rank {
  font-size: 16px;
  color: #fff;
  text-shadow: 0 0 8px var(--glow-yellow);
  margin: 0;
}

#high-score-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

#high-score-list li {
  font-size: 14px;
  text-shadow: 1px 1px 2px rgba(0, 255, 255, 0.5);
  margin: 5px 0;
  animation: typewriter 0.5s ease forwards;
  animation-delay: calc(var(--index) * 0.2s);
  text-align: center;
}

#high-score-list li.current-player {
  background: linear-gradient(45deg, var(--primary-red), var(--glow-yellow));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-weight: bold;
}

/* Battle Progress Overlay */
#battle-progress-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 2600;
}

#battle-progress-modal {
  background: var(--bg-dark);
  padding: 16px;
  border-radius: 8px;
  text-align: center;
}

#battle-progress-villain-image {
  max-width: 100px;
  margin-bottom: 8px;
}

#battle-progress-health-bar {
  width: 300px;
  height: 16px;
  background: #333;
  border: 2px solid var(--glow-magenta);
  margin: 8px auto;
  position: relative;
}

#battle-progress-health-bar .inner {
  height: 100%;
  background: linear-gradient(90deg, var(--glow-magenta), var(--glow-yellow));
  width: 0;
}

#battle-progress-health-text {
  margin-top: 4px;
  color: var(--glow-yellow);
  text-shadow: 0 0 6px var(--glow-yellow);
}

#battle-progress-high-scores {
  margin-top: 12px;
  text-align: center;
}

#battle-progress-high-score-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

#battle-progress-high-score-list li {
  font-size: 14px;
  margin: 4px 0;
  text-shadow: 1px 1px 2px rgba(0, 255, 255, 0.5);
  text-align: center;
}

/* How to Play Overlay */
#how-to-play-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 2600;
}

#how-to-play-modal {
  background: var(--bg-dark);
  padding: 16px;
  border-radius: 8px;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  color: #fff;
}

#how-to-play-modal ul {
  text-align: left;
  padding-left: 20px;
}

#how-to-play-modal li {
  margin-bottom: 8px;
}

#twitter-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 2600;
}

#twitter-modal {
  background: var(--bg-dark);
  padding: 16px;
  border-radius: 8px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

#pumpfun-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 2600;
}

#pumpfun-modal {
  background: var(--bg-dark);
  padding: 16px;
  border-radius: 8px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

#phantom-wallet-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 2600;
}

#phantom-wallet-modal {
  background: var(--bg-dark);
  padding: 16px;
  border-radius: 8px;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  color: #fff;
  text-align: left;
}

#phantom-wallet-modal p {
  margin-bottom: 8px;
}

/* Animation Effects */
.point-animation {
  position: absolute;
  font-size: 16px;
  font-weight: 700;
  color: var(--glow-green);
  text-shadow: 0 0 8px var(--glow-green), 0 0 16px var(--glow-green), 1px 1px 2px rgba(0, 255, 255, 0.5);
  animation: jumpSparkle 2s ease-out forwards;
  pointer-events: none;
  z-index: 1100;
}

.negative-animation {
  position: absolute;
  font-size: 16px;
  font-weight: 700;
  color: var(--glow-red);
  text-shadow: 0 0 8px var(--glow-red), 0 0 16px var(--primary-red), 1px 1px 2px rgba(0, 255, 255, 0.5);
  animation: jumpSparkle 2s ease-out forwards;
  pointer-events: none;
  z-index: 1100;
}

.health-animation {
  position: absolute;
  font-size: 16px;
  font-weight: 700;
  color: var(--glow-red);
  text-shadow: 0 0 8px var(--glow-red), 0 0 16px var(--primary-red), 1px 1px 2px rgba(0, 255, 255, 0.5);
  animation: jumpSparkle 2s ease-out forwards;
  pointer-events: none;
  z-index: 1100;
}

.health-animation.positive {
  color: var(--glow-green);
  text-shadow: 0 0 8px var(--glow-green), 0 0 16px var(--glow-green), 1px 1px 2px rgba(0, 255, 255, 0.5);
}

/* Animations */
@keyframes casino-title {
  0% { color: var(--primary-red); text-shadow: 0 0 8px var(--primary-red), 0 0 16px var(--glow-cyan); }
  50% { color: var(--glow-yellow); text-shadow: 0 0 8px var(--glow-yellow), 0 0 16px var(--glow-magenta); }
  100% { color: var(--primary-red); text-shadow: 0 0 8px var(--primary-red), 0 0 16px var(--glow-cyan); }
}

@keyframes shake {
  0% { transform: translateX(-8px) rotate(-2deg); }
  25% { transform: translateX(8px) rotate(2deg); }
  50% { transform: translateX(-8px) rotate(-2deg); }
  75% { transform: translateX(8px) rotate(2deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

@keyframes big-win-flash {
  0% { border: 2px solid var(--glow-red); box-shadow: 0 0 12px var(--glow-red); }
  33% { border: 2px solid var(--glow-green); box-shadow: 0 0 12px var(--glow-green); }
  66% { border: 2px solid #0000ff; box-shadow: 0 0 12px #0000ff; }
  100% { border: 2px solid var(--glow-red); box-shadow: 0 0 12px var(--glow-red); }
}

@keyframes background-flash {
  0% { background-color: rgba(255, 255, 0, 0.3); }
  100% { background-color: transparent; }
}

@keyframes frenzy-pulse {
  0% { background-color: rgba(255, 0, 0, 0.2); }
  50% { background-color: rgba(255, 0, 0, 0.4); }
  100% { background-color: rgba(255, 0, 0, 0.2); }
}

@keyframes health-loss {
  0% { background: rgba(255, 0, 0, 0.5); }
  50% { background: rgba(255, 0, 0, 0.3); }
  100% { background: transparent; }
}

@keyframes health-recover {
  0% { background: var(--glow-green); }
  50% { background: rgba(0, 255, 0, 0.5); }
  100% { background: transparent; }
}

@keyframes sparkle-burst {
  0% { transform: scale(0.1) translate(0, 0); opacity: 1; }
  100% { transform: scale(2) translate(var(--dx), var(--dy)); opacity: 0; }
}

@keyframes coin-burst {
  0% { transform: scale(1) translate(0, 0); opacity: 1; }
  100% { transform: scale(1.5) translate(var(--dx), var(--dy)); opacity: 0; }
}

@keyframes particle-burst {
  0% { transform: scale(1) translate(0, 0); opacity: 1; }
  100% { transform: scale(0.5) translate(var(--dx), var(--dy)); opacity: 0; }
}

@keyframes confetti-fall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(360deg); opacity: 0; }
}

@keyframes spark-trail {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(460px); opacity: 0; }
}

@keyframes shockwave-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(10); opacity: 0; }
}

@keyframes neon-glow {
  0% { box-shadow: 0 0 20px var(--primary-red), 0 0 40px var(--primary-red); }
  33% { box-shadow: 0 0 20px var(--glow-green), 0 0 40px var(--glow-green); }
  66% { box-shadow: 0 0 20px var(--glow-cyan), 0 0 40px var(--glow-cyan); }
  100% { box-shadow: 0 0 20px var(--primary-red), 0 0 40px var(--primary-red); }
}

@keyframes streak-glow {
  0% { box-shadow: 0 0 8px var(--glow-cyan); }
  50% { box-shadow: 0 0 16px var(--glow-cyan); }
  100% { box-shadow: 0 0 8px var(--glow-cyan); }
}

@keyframes correct-glow {
  0% { box-shadow: 0 0 5px var(--glow-green); }
  50% { box-shadow: 0 0 15px var(--glow-green), 0 0 25px var(--glow-green); }
  100% { box-shadow: 0 0 5px var(--glow-green); }
}

@keyframes screen-warp {
  0% { filter: blur(0px) hue-rotate(0deg); transform: scale(1); }
  50% { filter: blur(1px) hue-rotate(30deg); transform: scale(1.02); }
  100% { filter: blur(0px) hue-rotate(0deg); transform: scale(1); }
}

@keyframes coin-catch-flash {
  0% { background: rgba(0, 255, 0, 0.5); }
  100% { background: transparent; }
}

@keyframes bad-coin-flash {
  0% { background: rgba(255, 0, 0, 0.5); }
  100% { background: transparent; }
}

@keyframes keyboard-flash {
  0% { background: rgba(255, 255, 0, 0.3); }
  100% { background: transparent; }
}

@keyframes power-up-glow {
  0% { box-shadow: 0 0 10px var(--glow-magenta), 0 0 20px var(--glow-magenta); }
  50% { box-shadow: 0 0 20px var(--glow-magenta), 0 0 40px var(--glow-magenta); }
  100% { box-shadow: 0 0 10px var(--glow-magenta), 0 0 20px var(--glow-magenta); }
}

@keyframes combo-pulse {
  0% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(var(--pulse-scale, 1.2)); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes bad-pulse {
  0% { transform: scale(1); box-shadow: 0 0 8px var(--glow-red); }
  50% { transform: scale(1.1); box-shadow: 0 0 12px var(--glow-red); }
  100% { transform: scale(1); box-shadow: 0 0 8px var(--glow-red); }
}

@keyframes power-up-spin {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

@keyframes idle-sway {
  0% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-2px) rotate(1deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-2px) rotate(-1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes victory-pose {
  0% { transform: translateY(0) scale(1); filter: brightness(1); }
  25% { transform: translateY(-10px) scale(1.1); filter: brightness(1.2) drop-shadow(0 0 8px var(--glow-yellow)); }
  50% { transform: translateY(0) scale(1); filter: brightness(1); }
  75% { transform: translateY(-5px) scale(1.05); filter: brightness(1.1); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes hit-effect {
  0% { filter: brightness(1.5) drop-shadow(0 0 8px var(--glow-yellow)); }
  100% { filter: brightness(1); }
}

@keyframes defeat-pulse {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(0.9); filter: brightness(0.8) drop-shadow(0 0 8px var(--glow-red)); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes villain-taunt {
  0% { transform: translateX(0) scale(1); }
  25% { transform: translateX(-5px) scale(1.05); }
  50% { transform: translateX(5px) scale(1.05); }
  75% { transform: translateX(-5px) scale(1.05); }
  100% { transform: translateX(0) scale(1); }
}

@keyframes critical-pulse {
  0% { filter: brightness(1) drop-shadow(0 0 8px var(--glow-red)); }
  50% { filter: brightness(1.2) drop-shadow(0 0 12px var(--glow-red)); }
  100% { filter: brightness(1) drop-shadow(0 0 8px var(--glow-red)); }
}

@keyframes blinkQueue {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes warning-flash {
  0%, 100% { background: var(--glow-red); }
  50% { background: #ffffff; }
}

@keyframes ticker-flash {
  0%, 100% { border: 1px solid var(--glow-yellow); transform: translateX(-50%) scale(1); }
  50% { border: 1px solid var(--primary-red); transform: translateX(-50%) scale(1.1); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes press {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

@keyframes number-glow {
  0% { color: var(--glow-yellow); text-shadow: 0 0 6px var(--glow-yellow); }
  50% { color: var(--glow-magenta); text-shadow: 0 0 6px var(--glow-magenta); }
  100% { color: var(--glow-yellow); text-shadow: 0 0 6px var(--glow-yellow); }
}

@keyframes number-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes jumpSparkle {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-16px) scale(1.2); opacity: 0.8; }
  100% { transform: translateY(-32px) scale(1); opacity: 0; }
}

@keyframes countdown-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes popOut {
  0% { transform: translate(-50%, -50%) scale(0.8); }
  50% { transform: translate(-50%, -50%) scale(1.2); }
  100% { transform: translate(-50%, -50%) scale(0.8); }
}

@keyframes count-up {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes dramatic-pulse {
  0% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.2); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes cooldown {
  0% { filter: brightness(0.5) grayscale(0.8); }
  100% { filter: brightness(1) grayscale(0); }
}

@keyframes cooldown-complete {
  0% { transform: scale(1); box-shadow: 0 0 0 var(--glow-cyan); }
  50% { transform: scale(1.2); box-shadow: 0 0 20px var(--glow-cyan); }
  100% { transform: scale(1); box-shadow: 0 0 10px var(--glow-cyan); }
}

@keyframes fade-in {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes coin-click {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(0); }
}

@keyframes spin {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

@keyframes typewriter {
  0% { opacity: 0; transform: translateX(-10px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes buttonClick {
  0% { transform: scale(1); box-shadow: 0 0 0 var(--glow-cyan); }
  50% { transform: scale(0.7); box-shadow: 0 0 15px var(--glow-cyan); }
  100% { transform: scale(1.2); box-shadow: 0 0 5px var(--glow-cyan); }
}

@keyframes neon-glow-green {
  0%, 100% { box-shadow: 0 0 5px var(--glow-green), 0 0 10px var(--glow-green); }
  50% { box-shadow: 0 0 10px var(--glow-green), 0 0 20px var(--glow-green); }
}

@keyframes neon-glow-red {
  0%, 100% { box-shadow: 0 0 5px var(--glow-red), 0 0 10px var(--glow-red); }
  50% { box-shadow: 0 0 10px var(--glow-red), 0 0 20px var(--glow-red); }
}

@keyframes vibrate {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

.vibrate {
  animation: vibrate 0.2s linear;
}

.health-boost {
  cursor: pointer;
}

@keyframes health-boost-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 0.8; }
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
  #game-screen {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }
  #arcade {
    width: 100%;
    height: 100%;
    margin: 0;
  }
  #arcade-screen {
    top: 7%;
    left: 25.5%;
    width: 49%;
    height: 46%;
  }
  #tv-static, #gameplay-loop {
    top: 7%;
    left: 25.5%;
    width: 49%;
    height: 46%;
  }
  #health-bar-container, #villain-health-bar-container {
    width: 90%;
    top: 2%;
  }
  #level-progress-container {
    width: 90%;
    top: 7%;
  }
  #level-text {
    top: 10%;
    left: 2%;
    font-size: 10px;
  }
  #score-display {
    top: 10%;
    right: 2%;
    font-size: 12px;
  }
  #xp-display {
    font-size: 10px;
  }
  #villain-health-text {
    font-size: 10px;
  }
  #notification-message {
    font-size: 8px;
    bottom: 4px;
  }
  #streak-message {
    font-size: 10px;
    top: 50%;
  }
  #current-sprite,
  #villain-sprite {
    max-height: 100px;
    max-width: 100px;
    top: 10%;
  }
  #current-sprite {
    left: 5%;
  }
  #villain-sprite {
    left: 75%;
  }
  #high-score-overlay {
    width: 90%;
    gap: 8px;
  }
  #high-score {
    width: 90%;
    max-width: 250px;
    gap: 8px;
  }
  #high-score-message {
    font-size: 20px;
  }
  #high-score-value {
    font-size: 24px;
  }
  #high-score-rank {
    font-size: 14px;
  }
  #high-score-list li {
    font-size: 12px;
    margin: 4px 0;
  }
  #music-toggle {
    bottom: -20px;
  }
  #cycle-timer-game {
    top: -35px;
    font-size: 1.5rem;
    padding: 4px 8px;
    text-shadow: 1px 1px 2px rgba(0, 255, 255, 0.5);
    white-space: nowrap;
  }
  #countdown-overlay {
    width: 100%;
    height: 100%;
  }
  #custom-alert {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #power-up-timer {
    top: 80px;
    font-size: 10px;
  }
}

@media (max-width: 400px) {
  #cycle-timer-game {
    font-size: 1.2rem;
    top: -30px;
    padding: 3px 6px;
  }
}

#scrolling-text {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: var(--bg-dark);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  z-index: 2000;
}

#scrolling-text span {
  display: inline-block;
  padding-left: 100%;
  animation: scroll-left 15s linear infinite;
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}