@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Outfit:wght@400;600;800;900&family=Russo+One&display=swap');

:root {
  --color-curly: #00e5ff;
  --color-curly-glow: rgba(0, 229, 255, 0.7);
  --color-curly-dark: #004d73;
  --color-mustache: #ff2a2a;
  --color-mustache-glow: rgba(255, 42, 42, 0.7);
  --color-mustache-dark: #7a1410;
  --color-gold: #ffd700;
  --color-gold-shadow: #b38600;
  --color-dark-bg: #07090e;
  --color-card-bg: rgba(14, 18, 28, 0.94);
  --color-border: #ffd700;
  --font-retro: 'Press Start 2P', cursive;
  --font-arcade: 'Press Start 2P', 'Russo One', sans-serif;
  --font-ui: 'Outfit', sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-dark-bg);
  font-family: var(--font-ui);
  color: #ffffff;
}

/* CRT Scanline & Retro Glass Screen Effect */
.crt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999;
  background:
    repeating-linear-gradient(
      rgba(0, 0, 0, 0) 0px,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0.32) 3px,
      rgba(0, 0, 0, 0.32) 4px
    ),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.65) 100%);
  opacity: 1;
  transition: opacity 0.3s;
}

body:not(.crt-active) .crt-overlay {
  opacity: 0;
}

#game-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #151a28 0%, #080a0f 100%);
  overflow: hidden;
}

/* Canvas Viewport */
#canvas-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
}

/* Title / Loading Screen Overlay */
.screen-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  background: #000;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.screen-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#title-screen {
  background: #060910;
  overflow: hidden;
}

/* Background Container & Images */
.title-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

/* Background blur filler for ultrawide or vertical screens */
.title-bg-blur {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  object-fit: cover;
  filter: blur(25px) brightness(0.45);
  transform: scale(1.1);
  pointer-events: none;
}

/* Main crystal-clear poster image */
.title-bg-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0 35px rgba(0, 0, 0, 0.95)) brightness(1.05);
  pointer-events: none;
  animation: posterBreathe 8s infinite ease-in-out;
}

/* Animated Particles Canvas Overlay */
.title-particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* Neon Edge Glows */
.neon-edge-glow-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 212, 255, 0.4) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
  animation: neonPulseLeft 3s infinite alternate ease-in-out;
}

.neon-edge-glow-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 100%;
  background: linear-gradient(-90deg, rgba(255, 59, 48, 0.4) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
  animation: neonPulseRight 3s infinite alternate ease-in-out;
}

/* Title UI Content */
.title-content {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: 24px 20px;
  pointer-events: none;
}

.title-top-badge {
  pointer-events: auto;
  background: rgba(8, 12, 20, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 204, 0, 0.35);
  padding: 8px 24px;
  border-radius: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 15px rgba(255, 204, 0, 0.2);
}

/* Retro Marquee & Header */
.retro-marquee {
  pointer-events: auto;
  background: #000;
  border: 3px solid var(--color-gold);
  padding: 10px 24px;
  border-radius: 4px;
  box-shadow: 4px 4px 0 #000, 0 0 20px rgba(255, 215, 0, 0.4);
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-retro);
  font-size: clamp(0.72rem, 1.6vw, 0.95rem);
  letter-spacing: 2px;
}

.retro-blink-text {
  color: #ffea00;
  text-shadow: 2px 2px 0 #000, 0 0 10px #ffcc00;
  animation: retroBlink 0.8s steps(1) infinite;
}

.retro-sub-tag {
  color: #00e5ff;
  border-left: 2px solid #555;
  border-right: 2px solid #555;
  padding: 0 12px;
}

.title-bottom-actions {
  pointer-events: auto !important;
  z-index: 100 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

#play-btn, .retro-start-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 101 !important;
}

/* Retro Push Start Button */
.retro-start-btn {
  font-family: var(--font-retro);
  font-size: clamp(1rem, 2.5vw, 1.45rem);
  padding: 20px 42px;
  letter-spacing: 2px;
  color: #fff;
  background: #d63031;
  border: 4px solid #fff;
  border-radius: 4px;
  box-shadow:
    inset 4px 4px 0 #ff7675,
    inset -4px -4px 0 #8c1010,
    6px 6px 0 #000,
    0 0 30px rgba(255, 42, 42, 0.8);
  animation: retroStartPulse 1.2s steps(2) infinite;
  cursor: pointer;
}

.retro-start-btn:hover {
  background: #e17055;
  box-shadow:
    inset 4px 4px 0 #fab1a0,
    inset -4px -4px 0 #a33820,
    6px 6px 0 #000,
    0 0 45px rgba(255, 120, 0, 1);
  transform: translate(-2px, -2px);
}

.retro-start-btn:active {
  transform: translate(3px, 3px);
  box-shadow:
    inset 3px 3px 0 #631010,
    3px 3px 0 #000;
}

.retro-tap-hint {
  font-family: var(--font-retro);
  font-size: 0.75rem;
  letter-spacing: 2px;
  color: #00e5ff;
  text-shadow: 2px 2px 0 #000, 0 0 8px #00e5ff;
  animation: retroBlink 1.4s steps(1) infinite;
}

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

@keyframes retroStartPulse {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.03); filter: brightness(1.2); }
}

/* Common Retro Arcade Button Styles */
.arcade-btn {
  position: relative;
  font-family: var(--font-retro);
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  padding: 16px 24px;
  border: 3px solid #000;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  transition: transform 0.08s, filter 0.08s;
  box-shadow: inset 3px 3px 0 rgba(255,255,255,0.7), inset -3px -3px 0 rgba(0,0,0,0.7), 4px 4px 0 #000;
}

.arcade-btn:active {
  transform: translate(2px, 2px);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.8), 2px 2px 0 #000;
}

.btn-primary {
  background: #d63031;
  border-color: #ffcc00;
  box-shadow: inset 3px 3px 0 #ff7675, inset -3px -3px 0 #780d0d, 4px 4px 0 #000;
  text-shadow: 1px 1px 0 #000;
}

.btn-primary:hover {
  filter: brightness(1.2);
  transform: translate(-1px, -1px);
  box-shadow: inset 3px 3px 0 #ff9999, inset -3px -3px 0 #780d0d, 5px 5px 0 #000;
}

.btn-blue {
  background: #0984e3;
  border-color: #00e5ff;
  box-shadow: inset 3px 3px 0 #74b9ff, inset -3px -3px 0 #064b85, 4px 4px 0 #000;
  text-shadow: 1px 1px 0 #000;
}

.btn-blue:hover {
  filter: brightness(1.2);
  transform: translate(-1px, -1px);
  box-shadow: inset 3px 3px 0 #a0cfff, inset -3px -3px 0 #064b85, 5px 5px 0 #000;
}

.btn-secondary {
  background: #2d3436;
  border-color: #b2bec3;
  box-shadow: inset 3px 3px 0 #636e72, inset -3px -3px 0 #1e272e, 4px 4px 0 #000;
  color: #dfe6e9;
  text-shadow: 1px 1px 0 #000;
}

.btn-secondary:hover {
  background: #4b6584;
  color: #fff;
  transform: translate(-1px, -1px);
  box-shadow: inset 3px 3px 0 #778ca3, inset -3px -3px 0 #2c3e50, 5px 5px 0 #000;
}

.btn-small {
  font-size: 0.72rem;
  padding: 10px 16px;
}
/* Retro Arcade Modals & Dialogs */
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(4px);
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  padding: 16px;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-card {
  position: relative;
  background: #0d111a;
  border: 4px solid var(--color-gold);
  border-radius: 4px;
  width: 100%;
  max-width: 680px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 28px 24px;
  box-shadow:
    inset 0 0 25px rgba(0, 0, 0, 0.9),
    8px 8px 0 #000,
    0 0 35px rgba(255, 215, 0, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: retroModalPop 0.2s steps(4);
}

.modal-title {
  font-family: var(--font-retro);
  font-size: clamp(1rem, 2.3vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 24px;
  text-align: center;
  color: #ffea00;
  text-shadow: 3px 3px 0 #000, -2px -2px 0 #8c6d00, 0 0 15px #ffcc00;
  border-bottom: 3px dashed #ffd700;
  padding-bottom: 12px;
  width: 100%;
}

.modal-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  margin-bottom: 24px;
}

@media (max-width: 580px) {
  .modal-options-grid {
    grid-template-columns: 1fr;
  }
}

.choice-card {
  position: relative;
  background: #141a29;
  border: 3px solid #3d4a68;
  border-radius: 4px;
  padding: 18px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 4px 4px 0 #000;
  transition: transform 0.1s, border-color 0.1s, background 0.1s;
}

.choice-card:hover {
  background: #1f273d;
  border-color: #00e5ff;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #000;
}

.choice-card.selected {
  border-color: var(--color-gold);
  background: #252317;
  box-shadow: inset 0 0 15px rgba(255, 215, 0, 0.4), 4px 4px 0 #000;
}

.choice-card.curly-theme.selected {
  border-color: var(--color-curly);
  background: #0c2638;
  box-shadow: inset 0 0 15px var(--color-curly-glow), 4px 4px 0 #000;
}

.choice-card.mustache-theme.selected {
  border-color: var(--color-mustache);
  background: #381212;
  box-shadow: inset 0 0 15px var(--color-mustache-glow), 4px 4px 0 #000;
}

.choice-icon {
  width: 68px;
  height: 68px;
  border-radius: 4px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: #000;
  border: 2px solid #555;
  overflow: hidden;
  box-shadow: 2px 2px 0 #000;
}

.choice-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.choice-title {
  font-family: var(--font-retro);
  font-size: 0.82rem;
  letter-spacing: 1px;
  margin-bottom: 8px;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
}

.choice-desc {
  font-size: 0.85rem;
  color: #aaa;
  line-height: 1.4;
  font-family: var(--font-ui);
}

.map-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #000;
  border: 1px solid var(--color-gold);
  color: #ffea00;
  padding: 2px 6px;
  border-radius: 2px;
  font-family: var(--font-retro);
  font-size: 0.6rem;
}

/* Room Code & Input */
.lobby-input-group {
  width: 100%;
  display: flex;
  gap: 12px;
  margin: 16px 0;
}

.lobby-input {
  flex: 1;
  background: #000;
  border: 3px solid #00e5ff;
  border-radius: 4px;
  padding: 14px 18px;
  font-family: var(--font-retro);
  font-size: 1rem;
  color: #00e5ff;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  outline: none;
  box-shadow: 4px 4px 0 #000;
}

.room-display-box {
  width: 100%;
  background: #000;
  border: 3px dashed var(--color-curly);
  border-radius: 4px;
  padding: 18px;
  text-align: center;
  margin: 16px 0;
  box-shadow: 4px 4px 0 #000;
}

.room-id-label {
  font-family: var(--font-retro);
  font-size: 0.72rem;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.room-id-value {
  font-family: var(--font-retro);
  font-size: 1.8rem;
  letter-spacing: 4px;
  color: var(--color-curly);
  margin: 12px 0;
  text-shadow: 3px 3px 0 #000, 0 0 15px var(--color-curly-glow);
}

.status-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  font-family: var(--font-retro);
  font-size: 0.75rem;
  color: #ffea00;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #ffea00;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* =========================================
   IN-GAME RETRO ARCADE HUD
   ========================================= */
#hud-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 20px;
}

.hud-top-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.fighter-hud {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 42%;
}

.fighter-hud.p2-hud {
  flex-direction: row-reverse;
}

.retro-tag-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.retro-player-tag {
  font-family: var(--font-retro);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 6px;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 2px 2px 0 #000;
  margin-bottom: 4px;
}

.tag-1p {
  background: #00e5ff;
  color: #000;
}

.tag-2p {
  background: #ff2a2a;
  color: #fff;
}

.hud-avatar {
  width: 64px;
  height: 64px;
  border-radius: 4px;
  overflow: hidden;
  border: 3px solid #fff;
  flex-shrink: 0;
  box-shadow: 4px 4px 0 #000;
  background: #000;
}

.p1-hud .hud-avatar {
  border-color: var(--color-curly);
  box-shadow: 0 0 15px var(--color-curly-glow), 4px 4px 0 #000;
}

.p2-hud .hud-avatar {
  border-color: var(--color-mustache);
  box-shadow: 0 0 15px var(--color-mustache-glow), 4px 4px 0 #000;
}

.hud-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hud-stats {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.p2-hud .hud-stats {
  align-items: flex-end;
}

.hud-nameplate {
  font-family: var(--font-retro);
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.p1-hud .hud-nameplate {
  color: var(--color-curly);
  text-shadow: 2px 2px 0 #000;
}

.p2-hud .hud-nameplate {
  color: var(--color-mustache);
  text-shadow: 2px 2px 0 #000;
}

.round-wins {
  display: flex;
  gap: 5px;
}

.win-dot {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: #111;
  border: 2px solid #555;
  box-shadow: 1px 1px 0 #000;
}

.win-dot.active {
  background: #ffea00;
  border-color: #fff;
  box-shadow: 0 0 8px #ffea00, 1px 1px 0 #000;
}

/* Retro Chunky Segmented Health Bar (Capcom / SNK Arcade Style) */
.retro-health-frame {
  position: relative;
  width: 100%;
  height: 24px;
  background: #000;
  border: 3px solid var(--color-gold);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 2px #000, 4px 4px 0 rgba(0, 0, 0, 0.8);
}

.health-bar-damage {
  position: absolute;
  top: 0;
  height: 100%;
  background: #ff2a2a;
  transition: width 0.35s ease;
}

.p1-hud .health-bar-damage {
  left: 0;
}

.p2-hud .health-bar-damage {
  right: 0;
}

.health-bar-fill {
  position: absolute;
  top: 0;
  height: 100%;
  transition: width 0.1s ease-out;
  background: linear-gradient(180deg, #ffea00 0%, #ff8800 60%, #e65100 100%);
  box-shadow: 0 0 10px #ffea00;
}

.p1-hud .health-bar-fill {
  left: 0;
}

.p2-hud .health-bar-fill {
  right: 0;
}

/* Center KO Medallion & Retro Timer */
.hud-center-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
}

.retro-ko-badge {
  font-family: var(--font-retro);
  font-size: 0.95rem;
  background: linear-gradient(180deg, #fff700 0%, #ff6600 100%);
  color: #000;
  padding: 3px 8px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #000, 0 0 15px rgba(255, 215, 0, 0.9);
  border-radius: 3px;
  margin-bottom: 4px;
  text-shadow: 1px 1px 0 #fff;
  animation: koMedallionPulse 1.2s infinite alternate ease-in-out;
}

.retro-timer-box {
  width: 58px;
  height: 46px;
  background: #000;
  border: 3px solid var(--color-gold);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-retro);
  font-size: 1.5rem;
  color: #ffea00;
  text-shadow: 2px 2px 0 #000, 0 0 10px #ffcc00;
  box-shadow: 0 0 0 2px #000, 3px 3px 0 rgba(0, 0, 0, 0.8);
}

.round-label {
  font-family: var(--font-retro);
  font-size: 0.65rem;
  letter-spacing: 1px;
  color: #fff;
  margin-top: 4px;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #000;
}

/* Retro Announcement Banner (Round 1, FIGHT!, K.O.!) */
.retro-banner {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-family: var(--font-retro);
  font-size: clamp(2rem, 6vw, 4.5rem);
  text-transform: uppercase;
  letter-spacing: 4px;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  z-index: 60;
  transition: transform 0.2s steps(4), opacity 0.2s ease;
  opacity: 0;
  padding: 8px 24px;
  background: rgba(0, 0, 0, 0.7);
  border: 4px solid #fff;
  box-shadow: 0 0 0 3px #000, 0 0 40px rgba(255, 215, 0, 0.8);
}

.retro-banner.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.retro-banner.fight-anim {
  color: #ff2a2a;
  border-color: #ff2a2a;
  text-shadow: 4px 4px 0 #000, 0 0 30px #ff0000;
}

.retro-banner.ko-anim {
  color: #ffea00;
  border-color: #ffea00;
  text-shadow: 4px 4px 0 #000, 0 0 40px #ffea00;
}

@keyframes koMedallionPulse {
  0% { transform: scale(1); filter: brightness(1); }
  100% { transform: scale(1.08); filter: brightness(1.3); }
}

@keyframes retroModalPop {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Mobile On-Screen Controls */
#mobile-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 180px;
  pointer-events: none;
  z-index: 70;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 24px 20px 24px;
}

.mobile-dpad-left {
  display: flex;
  gap: 16px;
  pointer-events: auto;
}

.mobile-actions-right {
  display: flex;
  gap: 16px;
  pointer-events: auto;
}

/* Retro Arcade Cabinet Pushbuttons */
.touch-btn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #1e272e;
  border: 4px solid #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  box-shadow:
    inset 3px 3px 0 rgba(255, 255, 255, 0.4),
    inset -3px -3px 0 rgba(0, 0, 0, 0.8),
    4px 4px 0 #000;
  transition: transform 0.08s;
}

.touch-btn:active, .touch-btn.active {
  transform: translate(2px, 2px) scale(0.96);
  box-shadow:
    inset 2px 2px 0 rgba(0, 0, 0, 0.9),
    2px 2px 0 #000;
}

.touch-btn svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.touch-btn-label {
  font-family: var(--font-retro);
  font-size: 0.6rem;
  margin-top: 3px;
  letter-spacing: 1px;
}

.touch-btn-punch {
  width: 86px;
  height: 86px;
  background: radial-gradient(circle at 35% 35%, #ff7675 0%, #d63031 60%, #8c1010 100%);
  border-color: #ffd700;
  box-shadow:
    inset 4px 4px 0 rgba(255, 255, 255, 0.6),
    inset -4px -4px 0 #570000,
    5px 5px 0 #000,
    0 0 20px rgba(255, 42, 42, 0.6);
}

.touch-btn-punch:active, .touch-btn-punch.active {
  background: radial-gradient(circle at 50% 50%, #c0292b 0%, #750808 100%);
  box-shadow:
    inset 3px 3px 0 #3d0000,
    2px 2px 0 #000;
}

.touch-btn-jump {
  width: 82px;
  height: 82px;
  background: radial-gradient(circle at 35% 35%, #74b9ff 0%, #0984e3 60%, #064b85 100%);
  border-color: #00e5ff;
  box-shadow:
    inset 4px 4px 0 rgba(255, 255, 255, 0.6),
    inset -4px -4px 0 #042e54,
    5px 5px 0 #000,
    0 0 20px rgba(0, 229, 255, 0.5);
}

.touch-btn-jump:active, .touch-btn-jump.active {
  background: radial-gradient(circle at 50% 50%, #076bbb 0%, #033663 100%);
  box-shadow:
    inset 3px 3px 0 #021f38,
    2px 2px 0 #000;
}

/* Floating Quick Controls (Audio, Fullscreen, CRT) */
.hud-corner-tools {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 998;
  display: flex;
  gap: 8px;
  pointer-events: auto;
}

.retro-icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 4px;
  background: #111;
  border: 2px solid var(--color-gold);
  color: #ffea00;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  font-family: var(--font-retro);
  font-size: 0.68rem;
  box-shadow: 3px 3px 0 #000;
  transition: transform 0.08s, background 0.08s;
}

.retro-icon-btn:hover {
  background: #252836;
  color: #fff;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #000;
}

.retro-icon-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #000;
}

.retro-icon-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Retro Keyboard Hints Pill */
.retro-hint-pill {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  border: 2px solid var(--color-gold);
  border-radius: 4px;
  padding: 8px 18px;
  font-family: var(--font-retro);
  font-size: 0.68rem;
  color: #ffea00;
  display: flex;
  gap: 16px;
  pointer-events: none;
  z-index: 40;
  box-shadow: 4px 4px 0 #000;
}

.retro-hint-pill kbd {
  background: #222;
  border: 1px solid #ffd700;
  border-radius: 2px;
  padding: 2px 6px;
  font-weight: 700;
  color: #fff;
  font-size: 0.65rem;
}

/* Animations */
@keyframes logoPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 15px rgba(255, 100, 0, 0.5));
  }
  50% {
    transform: scale(1.03);
    filter: drop-shadow(0 0 35px rgba(255, 120, 0, 0.9));
  }
}

@keyframes modalPop {
  0% {
    transform: scale(0.92);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Responsiveness */
@media (max-width: 768px) {
  #hud-overlay {
    padding: 10px 14px;
  }
  .hud-avatar {
    width: 48px;
    height: 48px;
    border-radius: 10px;
  }
  .hud-nameplate {
    font-size: 0.95rem;
  }
  .timer-box {
    width: 50px;
    height: 42px;
    font-size: 1.5rem;
  }
  .health-bar-container {
    height: 16px;
  }
  .keyboard-hint-pill {
    display: none;
  }
  #mobile-controls {
    height: 160px;
    padding: 0 14px 14px 14px;
  }
  .touch-btn {
    width: 62px;
    height: 62px;
  }
  .touch-btn-punch {
    width: 72px;
    height: 72px;
  }
  .touch-btn-jump {
    width: 68px;
    height: 68px;
  }
}

/* Retro Player Tag Badges (1P / 2P) */
.retro-player-tag {
  font-family: var(--font-retro);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 #000;
  box-shadow: 2px 2px 0 #000, 0 0 8px rgba(0,0,0,0.8);
  white-space: nowrap;
  user-select: none;
}

.tag-1p {
  background: #00e5ff;
  color: #05141e;
  border: 1.5px solid #ffffff;
  text-shadow: none;
}

.tag-2p {
  background: #ff3344;
  color: #ffffff;
  border: 1.5px solid #ffffff;
}

.tag-you {
  box-shadow: 0 0 12px #ffea00, 2px 2px 0 #000;
  animation: tagPulse 1.2s infinite alternate ease-in-out;
}

@keyframes tagPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); filter: brightness(1.2); }
}