/* ============================================================
   Infinite Tower Climber — Styles
   Neon sky gradient, pixel-retro aesthetic
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  --cyan: #06D6A0;
  --pink: #F72585;
  --purple: #7B2FF7;
  --gold: #FFD166;
  --bg: #0A0A1A;
  --text: #E0E0F0;
  --text-dim: rgba(224,224,240,0.5);
  --font: 'Press Start 2P', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); overflow: hidden; font-family: var(--font); color: var(--text); }

#game-canvas { display: block; width: 100vw; height: 100vh; }

#hud { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 1rem; font-size: 0.6rem; z-index: 5; pointer-events: none; }
#hud-score { color: var(--gold); }
#hud-height { color: var(--cyan); }
.combo { color: var(--pink); font-size: 0.7rem; transition: transform 0.15s; }
.combo.pop { transform: scale(1.3); }

.overlay { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(10,10,26,0.85); backdrop-filter: blur(6px); }
.overlay.hidden { display: none; }
.overlay-content { text-align: center; max-width: 340px; }
.overlay-content h1 { font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--cyan); }
.overlay-content h2 { font-size: 0.9rem; margin-bottom: 0.75rem; }
.tag { font-size: 0.5rem; color: var(--text-dim); margin-bottom: 1.5rem; font-family: var(--font); }

.btn { display: block; width: 100%; padding: 0.6rem; background: var(--cyan); color: var(--bg); font-family: var(--font); font-size: 0.6rem; border: none; border-radius: 6px; cursor: pointer; margin-bottom: 0.5rem; font-weight: 700; }
.btn:hover { transform: scale(1.02); }
.btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,0.1); color: var(--text-dim); }

.stats { font-size: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 0.8rem; text-align: left; margin-bottom: 1rem; color: var(--text-dim); }
.stats .val { color: var(--gold); font-weight: 700; }

#scores-list { font-size: 0.45rem; max-height: 200px; overflow-y: auto; margin-bottom: 0.75rem; }
.score-row { display: flex; justify-content: space-between; padding: 0.2rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); }

/* Touch Controls */
#touch-controls { position: fixed; bottom: 1rem; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 1.5rem; z-index: 8; }
.touch-btn { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.15); color: var(--text); font-size: 1.2rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.touch-btn:active { background: rgba(255,255,255,0.2); }

.hidden { display: none !important; }

@media (max-width: 480px) {
  #hud { font-size: 0.5rem; }
}