@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');

:root {
  --p1-color: #00f5ff;
  --p2-color: #ff2d78;
  --bg-dark: #030712;
  --neon-yellow: #f0ff00;
  --neon-green: #39ff14;
  --grid-color: rgba(0, 245, 255, 0.06);
  --panel-bg: rgba(3, 7, 18, 0.85);
}

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

body {
  background: var(--bg-dark);
  font-family: 'Orbitron', monospace;
  overflow: hidden;
  width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* SCREENS */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 50;
}
.screen.hidden { display: none !important; }

/* TOP BAR */
.top-bar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  z-index: 60; gap: 8px;
}
.top-bar-left, .top-bar-right { display: flex; gap: 8px; align-items: center; }
.icon-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.8);
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; letter-spacing: 1px;
  padding: 7px 10px; border-radius: 6px;
  cursor: pointer; transition: all .15s;
}
.icon-btn:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.25); }
.icon-btn:active { transform: scale(0.97); }

/* START SCREEN */
#startScreen {
  background: #030712;
  overflow: hidden;
}
.start-bg {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 39px, var(--grid-color) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, var(--grid-color) 40px);
  animation: gridScroll 8s linear infinite;
  pointer-events: none;
}
@keyframes gridScroll {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 80px, 0 0; }
}
.start-glow {
  position: absolute; top: 30%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 300px;
  background: radial-gradient(ellipse, rgba(0, 245, 255, 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.start-title {
  position: relative; text-align: center; z-index: 2;
  line-height: 1;
}
.start-title .sub {
  font-size: 13px; letter-spacing: 8px;
  color: var(--p2-color); margin-bottom: 8px;
  font-family: 'Share Tech Mono', monospace;
  animation: flicker 3s infinite;
}
.start-title h1 {
  font-size: clamp(42px, 8vw, 88px);
  font-weight: 900;
  background: linear-gradient(135deg, var(--p1-color) 0%, #fff 40%, var(--p2-color) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 30px rgba(0, 245, 255, 0.5));
  letter-spacing: 4px;
}
.start-title .year {
  font-size: 14px; letter-spacing: 12px;
  color: rgba(255, 255, 255, 0.3); margin-top: 6px;
  font-family: 'Share Tech Mono', monospace;
}
@keyframes flicker {
  0%, 100% { opacity: 1 } 92% { opacity: 1 } 93% { opacity: 0.4 } 94% { opacity: 1 } 96% { opacity: 0.7 } 97% { opacity: 1 }
}
.vs-fighters {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; gap: 56px;
  margin: 28px 0 20px;
}
.start-fighter {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.start-fighter-sprite {
  width: 60px; height: 90px;
  position: relative;
}
.start-fighter-label {
  font-size: 11px; letter-spacing: 3px; font-family: 'Share Tech Mono', monospace;
}
.start-fighter-label.p1 { color: var(--p1-color); }
.start-fighter-label.p2 { color: var(--p2-color); }
.vs-text {
  font-size: 40px; font-weight: 900; color: var(--neon-yellow);
  text-shadow: 0 0 20px var(--neon-yellow), 0 0 40px rgba(240, 255, 0, 0.4);
  align-self: center; margin-bottom: 20px;
  animation: vsPulse 0.8s ease-in-out infinite alternate;
}
@keyframes vsPulse { from { transform: scale(1) } to { transform: scale(1.15) } }

.controls-hint {
  position: relative; z-index: 2;
  display: flex; gap: 18px; margin-bottom: 22px;
  flex-wrap: wrap; justify-content: center;
  max-width: 92vw;
}
.ctrl-panel {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px; padding: 12px 16px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; line-height: 1.8;
}
.ctrl-panel.p1 { border-color: rgba(0, 245, 255, 0.3); color: rgba(0, 245, 255, 0.8); }
.ctrl-panel.p2 { border-color: rgba(255, 45, 120, 0.3); color: rgba(255, 45, 120, 0.8); }
.ctrl-panel strong { display: block; letter-spacing: 3px; margin-bottom: 4px; font-size: 10px; opacity: 0.7; }

.start-actions { position: relative; z-index: 3; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; pointer-events: auto; }
.diff-pills { position: relative; z-index: 3; display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 10px; pointer-events: auto; }
.diff-pills.hidden { display: none !important; }
.diff-pill {
  position: relative; z-index: 3; pointer-events: auto;
  font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 1px;
  padding: 8px 12px; border-radius: 20px; cursor: pointer;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.7);
  transition: all .15s;
}
.diff-pill:hover { background: rgba(255,255,255,0.10); color:#fff; }
.diff-pill.active { background: var(--neon-yellow); color:#000; border-color: var(--neon-yellow); box-shadow: 0 0 12px rgba(240,255,0,0.5); font-weight:700; }
.diff-pill.active.easy { background:#39ff14; border-color:#39ff14; }
.diff-pill.active.normal { background: var(--neon-yellow); border-color: var(--neon-yellow); }
.diff-pill.active.hard { background: var(--p2-color); border-color: var(--p2-color); color:#fff; box-shadow: 0 0 12px rgba(255,45,120,0.5); }
.mode-badge {
  position: absolute; top: 74px; left: 50%; transform: translateX(-50%);
  font-family:'Share Tech Mono',monospace; font-size:8px; letter-spacing:2px;
  padding:4px 8px; border-radius:12px; pointer-events:none; z-index:12; opacity:.85;
}
.mode-badge.easy { background: rgba(57,255,20,0.14); border:1px solid rgba(57,255,20,0.35); color:#39ff14; }
.mode-badge.normal { background: rgba(240,255,0,0.14); border:1px solid rgba(240,255,0,0.35); color:var(--neon-yellow); }
.mode-badge.hard { background: rgba(255,45,120,0.14); border:1px solid rgba(255,45,120,0.35); color:var(--p2-color); }
.mode-badge.hidden { display:none !important; }

.btn-start {
  position: relative; z-index: 10;
  background: transparent;
  border: 2px solid var(--neon-yellow);
  color: var(--neon-yellow);
  font-family: 'Orbitron', monospace;
  font-size: 14px; font-weight: 700;
  letter-spacing: 5px; padding: 14px 36px;
  cursor: pointer;
  text-shadow: 0 0 10px var(--neon-yellow);
  box-shadow: 0 0 20px rgba(240, 255, 0, 0.2), inset 0 0 20px rgba(240, 255, 0, 0.05);
  transition: all 0.2s;
  border-radius: 8px;
  pointer-events: auto;
}
.btn-start:hover {
  background: rgba(240, 255, 0, 0.1);
  box-shadow: 0 0 40px rgba(240, 255, 0, 0.4), inset 0 0 20px rgba(240, 255, 0, 0.1);
  transform: translateY(-2px);
}
.btn-start:active { transform: translateY(0); }
.btn-ghost {
  position: relative; z-index: 3; pointer-events: auto;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.75);
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px; letter-spacing: 2px;
  padding: 12px 16px; border-radius: 8px; cursor: pointer;
}
.btn-ghost:hover { background: rgba(255,255,255,0.09); color: #fff; }
.btn-start:focus-visible, .btn-restart:focus-visible, .icon-btn:focus-visible, .btn-ghost:focus-visible {
  outline: 2px solid var(--neon-yellow);
  outline-offset: 3px;
}

/* GAME SCREEN */
#gameScreen {
  background: #030712;
  z-index: 1;
  overflow: hidden;
}
#stageBg {
  filter: saturate(1.05) contrast(1.05);
  transition: opacity .35s;
}
#gameCanvas {
  display: block;
  image-rendering: pixelated;
  background: transparent;
}

/* HUD overlay */
#hud {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 42px 14px 0;
  display: flex; align-items: flex-start; gap: 10px;
  pointer-events: none; z-index: 10;
}
.hud-player {
  flex: 1; display: flex; flex-direction: column; gap: 5px;
}
.hud-player.p2 { align-items: flex-end; }
.player-name {
  font-size: 10px; letter-spacing: 3px;
  font-family: 'Share Tech Mono', monospace;
}
.player-name.p1 { color: var(--p1-color); }
.player-name.p2 { color: var(--p2-color); }
.health-track {
  width: 100%; height: 18px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative; overflow: hidden;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}
.hud-player.p2 .health-track {
  clip-path: polygon(0% 0%, calc(100% - 6px) 0%, 100% 100%, 6px 100%);
}
.health-fill {
  position: absolute; top: 0; bottom: 0;
  transition: width 0.15s ease-out;
}
.hud-player.p1 .health-fill {
  left: 0;
  background: linear-gradient(90deg, #00c4cc, var(--p1-color));
  box-shadow: 0 0 8px var(--p1-color);
}
.hud-player.p2 .health-fill {
  right: 0;
  background: linear-gradient(270deg, #cc0044, var(--p2-color));
  box-shadow: 0 0 8px var(--p2-color);
}
.health-text {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 9px; letter-spacing: 1px;
  font-family: 'Share Tech Mono', monospace;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 4px #000;
}
.hud-player.p1 .health-text { right: 6px; }
.hud-player.p2 .health-text { left: 6px; }

.hud-center {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 84px;
}
#timerDisplay {
  font-size: 30px; font-weight: 900; line-height: 1;
  color: #fff;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}
#timerDisplay.low { color: var(--p2-color); animation: timerPulse 0.5s infinite alternate; }
@keyframes timerPulse { from { text-shadow: 0 0 10px var(--p2-color) } to { text-shadow: 0 0 30px var(--p2-color), 0 0 60px rgba(255, 45, 120, 0.4) } }
.round-label {
  font-size: 8px; letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.4);
  font-family: 'Share Tech Mono', monospace;
}

/* combo */
.combo-badge {
  position: absolute; top: 74px; font-family: 'Orbitron', monospace;
  font-weight: 900; font-size: 11px; letter-spacing: 2px;
  padding: 6px 10px; border-radius: 6px;
  opacity: 0; transform: translateY(-6px); transition: all .2s;
  pointer-events: none; z-index: 12;
}
.combo-badge.show { opacity: 1; transform: translateY(0); }
.combo-badge.p1 { left: 14px; background: rgba(0,245,255,0.14); border: 1px solid rgba(0,245,255,0.35); color: var(--p1-color); text-shadow: 0 0 10px var(--p1-color); }
.combo-badge.p2 { right: 14px; background: rgba(255,45,120,0.14); border: 1px solid rgba(255,45,120,0.35); color: var(--p2-color); text-shadow: 0 0 10px var(--p2-color); }

/* CRT subtle */
.crt::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,0.015) 3px);
  pointer-events: none; mix-blend-mode: overlay;
}

/* PAUSE */
#pauseScreen {
  background: rgba(3,7,18,0.88);
  backdrop-filter: blur(6px);
}
.pause-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px; padding: 24px 22px;
  text-align: center; min-width: 300px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.pause-card h2 { letter-spacing: 6px; font-size: 22px; margin-bottom: 6px; color: #fff; }
.pause-card p { font-family: 'Share Tech Mono', monospace; font-size: 10px; color: rgba(255,255,255,0.6); letter-spacing: 2px; margin-bottom: 16px; }
.pause-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* RESULT SCREEN */
#resultScreen {
  background: rgba(3, 7, 18, 0.95);
  backdrop-filter: blur(4px);
}
.result-bg {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 39px, var(--grid-color) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, var(--grid-color) 40px);
}
.result-content { position: relative; z-index: 2; text-align: center; }
.result-ko {
  font-size: clamp(60px, 12vw, 120px);
  font-weight: 900; letter-spacing: 8px;
  background: linear-gradient(135deg, var(--neon-yellow), #ff8c00);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 30px rgba(240, 255, 0, 0.6));
  animation: koSlam 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes koSlam { from { transform: scale(3); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.result-winner {
  font-size: 18px; letter-spacing: 6px; margin-top: 8px;
  font-family: 'Share Tech Mono', monospace;
  animation: fadeInUp 0.5s 0.3s both;
}
.result-winner.p1 { color: var(--p1-color); text-shadow: 0 0 20px var(--p1-color); }
.result-winner.p2 { color: var(--p2-color); text-shadow: 0 0 20px var(--p2-color); }
.result-winner.draw { color: var(--neon-yellow); text-shadow: 0 0 20px var(--neon-yellow); }
@keyframes fadeInUp { from { transform: translateY(20px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.btn-restart {
  margin-top: 28px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Orbitron', monospace;
  font-size: 13px; font-weight: 700;
  letter-spacing: 5px; padding: 14px 36px;
  cursor: pointer; transition: all 0.2s;
  animation: fadeInUp 0.5s 0.6s both;
  border-radius: 8px;
  pointer-events: auto;
}
.btn-restart:hover {
  border-color: var(--neon-yellow); color: var(--neon-yellow);
  box-shadow: 0 0 30px rgba(240, 255, 0, 0.3);
}

/* COMBO / HIT TEXT */
.hit-text {
  position: absolute;
  font-family: 'Orbitron', monospace;
  font-weight: 900; pointer-events: none;
  animation: hitPop 0.6s forwards;
  z-index: 20; text-shadow: 0 2px 8px #000;
}
@keyframes hitPop {
  0%  { transform: scale(0.5) translateY(0); opacity: 1; }
  50% { transform: scale(1.2) translateY(-20px); opacity: 1; }
  100%{ transform: scale(1)   translateY(-50px); opacity: 0; }
}

/* MODALS */
.modal {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  z-index: 70; padding: 20px;
}
.modal.hidden { display: none !important; }
.modal-card {
  width: min(520px, 92vw);
  background: #0a0e1e;
  border: 1px solid rgba(0,245,255,0.18);
  border-radius: 16px; padding: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.modal-card h3 { letter-spacing: 4px; font-size: 14px; margin-bottom: 12px; color: #fff; }
.modal-card .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-family: 'Share Tech Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.85); }
.modal-card .row:last-child { border-bottom: none; }
.modal-card label { display:flex; align-items:center; gap:8px; cursor:pointer; }
.modal-card select, .modal-card input[type="checkbox"] { accent-color: var(--p1-color); }
.modal-card select { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #fff; border-radius: 6px; padding: 6px 8px; font-family: 'Share Tech Mono', monospace; }

.wins { font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:2px; color:var(--neon-yellow); }
.wins-mini { font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:2px; color:rgba(255,255,255,0.6); margin-top:4px; }
.rebind-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 10px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.09); border-radius:8px; font-family:'Share Tech Mono',monospace; font-size:11px; color: rgba(255,255,255,0.92); }
.rebind-row span { color: rgba(255,255,255,0.92); }
.rebind-key { min-width:96px; text-align:center; padding:6px 8px; border-radius:6px; background:rgba(0,245,255,0.08); border:1px solid rgba(0,245,255,0.22); color:#fff; cursor:pointer; }
.rebind-key.listening { background:var(--neon-yellow); color:#000; border-color:var(--neon-yellow); animation: pulse 0.6s infinite alternate; }
@keyframes pulse { from{box-shadow:0 0 0 rgba(240,255,0,0)} to{box-shadow:0 0 12px rgba(240,255,0,0.6)} }

/* CAMPAIGN GRID */
.campaign-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr));
  gap: 8px; overflow: auto; max-height: 56vh; padding: 4px;
}
.map-tile {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 8px; text-align: left; cursor: pointer;
  font-family: 'Share Tech Mono', monospace; color: rgba(255,255,255,0.8);
  transition: all .15s; min-height: 64px; display: flex; flex-direction: column; justify-content: center; gap: 3px;
  overflow: hidden;
}
.map-tile:hover:not(:disabled) { background: rgba(255,255,255,0.08); border-color: rgba(0,245,255,0.35); transform: translateY(-1px); }
.map-tile.done { border-color: rgba(57,255,20,0.35); background: rgba(57,255,20,0.06); }
.map-tile.current { border-color: var(--neon-yellow); background: rgba(240,255,0,0.08); box-shadow: 0 0 12px rgba(240,255,0,0.2); }
.map-tile.boss { border-color: rgba(255,45,120,0.45); }
.map-tile.boss.done { border-color: rgba(255,45,120,0.6); }
.map-tile.locked { opacity: 0.35; cursor: not-allowed; }
.map-lv { font-size: 11px; letter-spacing: 2px; color: var(--neon-yellow); font-weight: 700; }
.map-name { font-size: 9px; letter-spacing: 1px; color: #fff; line-height: 1.2; min-height: 18px; }
.map-status { font-size: 8px; letter-spacing: 1px; opacity: 0.6; }

/* SKILL HUD */
.skill-hud {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; align-items: center; justify-content: center;
  font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 1px;
  color: rgba(255,255,255,0.85); z-index: 11; pointer-events: none;
  background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.08); padding: 6px 10px; border-radius: 20px;
  flex-wrap: wrap;
}
.skill-slot { padding: 3px 7px; border-radius: 10px; background: rgba(0,245,255,0.12); border: 1px solid rgba(0,245,255,0.22); }
.skill-slot.cd { opacity: 0.45; background: rgba(255,255,255,0.06); }

/* TOUCH CONTROLS — on-screen overlay, only when touch */
.touch-controls {
  position: absolute; inset: 0;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
  gap: 12px;
  z-index: 20;
  pointer-events: none;
  transition: opacity 0.2s;
}
.touch-controls.hidden { display: none !important; }
.touch-cluster {
  display: flex; align-items: flex-end; gap: clamp(8px, 2vw, 12px);
  pointer-events: auto;
}
.touch-left { flex-shrink: 0; }
.touch-right { flex-direction: column; align-items: flex-end; gap: 8px; }
.touch-dpad-mid {
  display: flex; flex-direction: column; gap: clamp(6px, 1.5vw, 10px);
}
.touch-action-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(6px, 1.8vw, 10px);
}
.touch-skills {
  display: flex; gap: 6px; justify-content: flex-end;
}
.touch-btn {
  min-width: clamp(48px, 13vw, 64px);
  min-height: clamp(48px, 13vw, 64px);
  width: clamp(48px, 13vw, 64px);
  height: clamp(48px, 13vw, 64px);
  display: grid; place-items: center;
  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(9px, 2.2vw, 11px);
  font-weight: 700; letter-spacing: 1px;
  color: rgba(255,255,255,0.92);
  background: rgba(7, 14, 30, 0.62);
  border: 1px solid rgba(0, 245, 255, 0.22);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.06), 0 0 12px rgba(0,245,255,0.08);
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform 0.06s, background 0.12s, border-color 0.12s, box-shadow 0.12s;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.touch-btn:active, .touch-btn.active {
  background: rgba(0, 245, 255, 0.18);
  border-color: rgba(0, 245, 255, 0.55);
  box-shadow: 0 0 16px rgba(0,245,255,0.35), inset 0 0 12px rgba(0,245,255,0.12);
  transform: scale(0.96);
  color: #fff;
}
.touch-btn.dpad {
  font-size: clamp(16px, 4vw, 20px);
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
}
.touch-btn.dpad:active, .touch-btn.dpad.active {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.35);
}
.touch-btn.action { min-width: clamp(54px, 14vw, 68px); }
.touch-btn.touch-punch { border-color: rgba(0,245,255,0.32); }
.touch-btn.touch-kick { border-color: rgba(255,45,120,0.32); }
.touch-btn.touch-punch:active, .touch-btn.touch-punch.active { border-color: var(--p1-color); box-shadow: 0 0 14px rgba(0,245,255,0.45); }
.touch-btn.touch-kick:active, .touch-btn.touch-kick.active { border-color: var(--p2-color); box-shadow: 0 0 14px rgba(255,45,120,0.45); }
.touch-btn.skill {
  min-width: clamp(36px, 9vw, 44px);
  min-height: clamp(36px, 9vw, 44px);
  width: clamp(36px, 9vw, 44px);
  height: clamp(36px, 9vw, 44px);
  font-size: 10px;
  border-radius: 10px;
  background: rgba(240,255,0,0.08);
  border-color: rgba(240,255,0,0.22);
}
.touch-btn.skill:active, .touch-btn.skill.active {
  background: rgba(240,255,0,0.16);
  border-color: var(--neon-yellow);
}
@media (max-width: 380px) {
  .touch-btn { min-width: 44px; min-height: 44px; width: 44px; height: 44px; font-size: 9px; }
  .touch-btn.dpad { font-size: 16px; }
}
@media (pointer: fine) {
  .touch-controls { display: none !important; }
}

/* FOOTER */
.site-footer {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px; letter-spacing: 2px;
  color: rgba(255,255,255,0.25);
  pointer-events: none; z-index: 5; text-align: center; width: 92vw;
}

/* Responsive */
@media (max-width: 720px) {
  .controls-hint { gap: 10px; }
  .ctrl-panel { padding: 10px 12px; font-size: 9px; }
  #hud { padding: 46px 10px 0; }
  .top-bar { padding: 8px 10px; }
  .vs-fighters { gap: 28px; }
}
@media (max-height: 600px) {
  .start-title h1 { font-size: clamp(36px, 10vw, 64px); }
  .vs-fighters { margin: 14px 0 12px; }
  .controls-hint { margin-bottom: 12px; }
}