:root { --runner-void:#060914; --runner-ink:#f3f1e8; --runner-cyan:#5cf2dc; --runner-gold:#ffd166; --runner-line:rgba(243,241,232,.18); }
html, body { background:var(--runner-void); color:var(--runner-ink); font-family:Manrope,sans-serif; }
#gameContainer { background:#060914 !important; transition:none; }
#hud { gap:6px; align-items:center; right:max(12px,env(safe-area-inset-right)); left:max(12px,env(safe-area-inset-left)); top:max(12px,env(safe-area-inset-top)); }
.hud-pill { min-height:38px; padding:7px 10px; gap:6px; border:1px solid var(--runner-line); border-radius:3px; background:rgba(6,9,20,.9); color:var(--runner-ink); box-shadow:none; font:800 13px Manrope,sans-serif; }
.stat-label { font-size:9px; font-weight:700; letter-spacing:.1em; color:#9ba7b5; }
#scorePill { color:var(--runner-gold); }
#coinPill { display:none; }
#livesPill { padding:7px; }
#livesContainer { gap:4px; }
.life-heart { width:12px; height:12px; background:#ff4f86; }
.life-heart.empty { background:#35415a; }
#difficultyPill { background:rgba(6,9,20,.9); color:var(--runner-cyan); font-size:11px; }
.difficulty-mark { display:none; }
.combo-pill { position:relative; min-width:52px; overflow:hidden; color:var(--runner-gold); }
.combo-clock { position:absolute; inset:auto 0 0; height:3px; background:#26354a; }
.combo-clock i { display:block; width:100%; height:100%; background:var(--runner-gold); transform-origin:left; }
#shieldPill { background:#102b37; color:var(--runner-cyan); font-size:10px; }
.sound-button { width:38px; height:38px; color:var(--runner-ink); border:1px solid var(--runner-line); border-radius:3px; background:rgba(6,9,20,.9); box-shadow:none; }
.sound-button svg { width:23px; height:23px; }
.sound-button.music-playing:not(.muted) svg { animation:none; }
.pause-button { font:800 18px Manrope,sans-serif; }
.overlay-screen { background:rgba(6,9,20,.84); }
.panel { width:min(540px,calc(100vw - 28px)); max-width:none; padding:28px; background:#0b1325; border:1px solid var(--runner-line); border-radius:4px; box-shadow:none; color:var(--runner-ink); text-align:left; }
#startScreen .panel { display:block; }
.signal-kicker { margin:0 0 12px; color:var(--runner-cyan); font:800 10px Manrope,sans-serif; letter-spacing:.15em; }
.game-title { margin:0; color:var(--runner-ink); font:800 italic clamp(38px,8vw,60px)/.95 'Barlow Condensed',sans-serif; letter-spacing:-.025em; text-shadow:none; -webkit-text-stroke:0; text-transform:uppercase; }
.title-run { color:var(--runner-gold); }
.subtitle { color:#9ba7b5; font:600 13px/1.6 Manrope,sans-serif; }
.canonical-avatar { float:right; width:64px; height:64px; background:url('/assets/chaos/player/player-idle.webp') 0 0 / 256px 64px no-repeat; }
.customizer, .legend { display:none; }
.tutorial-box { margin:18px 0; padding:12px 14px; border:1px solid var(--runner-line); border-left:3px solid var(--runner-cyan); border-radius:0; background:#081020; color:#bac7d8; }
.tutorial-box p, #startScreen .tutorial-box p { margin:6px 0; color:#bac7d8; font:500 11px/1.5 Manrope,sans-serif; }
.tutorial-box b { display:inline-block; min-width:118px; color:var(--runner-ink); font-size:10px; letter-spacing:.06em; }
.big-button { padding:14px 20px; border:0; border-radius:0; color:#06131b; background:var(--runner-cyan); box-shadow:none; font:800 15px Manrope,sans-serif; letter-spacing:.06em; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.big-button:hover { background:#a4ffef; }
.big-button:active { transform:translateY(2px); box-shadow:none; }
.secondary-button, .score-submit { background:#24344b; color:var(--runner-ink); }
.replay-button { width:100%; margin:14px 0; background:var(--runner-cyan); }
.final-stats { margin:18px 0 4px; padding:0; border:0; background:none; border-radius:0; color:var(--runner-ink); }
.result-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.result-grid p { padding:12px; border-radius:0; background:#07101f; border:1px solid var(--runner-line); color:#9ba7b5; font:700 10px/1.5 Manrope,sans-serif; text-transform:uppercase; letter-spacing:.08em; }
.result-grid p:first-child { border-color:var(--runner-gold); }
.result-grid b { color:var(--runner-ink); font:800 28px 'Barlow Condensed',sans-serif; }
.result-grid p:first-child b { color:var(--runner-gold); font-size:42px; }
.result-grid p:last-child { grid-column:1 / -1; padding:8px 12px; }
.result-secondary { display:none; }
.score-form, .leaderboard-card { color:#9ba7b5; }
.score-form label { color:#9ba7b5; font-size:11px; }
.score-form input { color:var(--runner-ink); background:#07101f; border:1px solid var(--runner-line); border-radius:0; font:600 14px Manrope,sans-serif; }
.leaderboard-card { margin:14px 0; background:#07101f; border:1px solid var(--runner-line); border-radius:0; padding:12px; }
.leaderboard-card h2 { color:var(--runner-gold); font:700 12px Manrope,sans-serif; }
.leaderboard-list li, .leaderboard-list li:nth-child(odd) { background:#101b2c; border-radius:0; color:#9ba7b5; }
.leaderboard-name, .leaderboard-empty { color:#9ba7b5; font:500 11px Manrope,sans-serif; }
.leaderboard-score { color:var(--runner-ink); font:800 12px Manrope,sans-serif; }
.controls-hint, .creator-credit, .start-status { color:#9ba7b5; font:500 10px/1.6 Manrope,sans-serif; }
.game-control.jump-control { width:76px; height:60px; color:#06131b; border:1px solid var(--runner-cyan); border-radius:4px; background:var(--runner-cyan); box-shadow:none; }
.game-control.pressed { background:var(--runner-gold); transform:scale(.96); box-shadow:none; }
#respawnPrompt { color:var(--runner-gold); background:#07101f; font:700 11px Manrope,sans-serif; }
@media (max-width:600px) {
  #hud { gap:4px; }
  .hud-pill { padding:6px 7px; min-height:34px; font-size:12px; }
  #bestPill { order:8; }
  #livesPill { order:7; }
  #difficultyPill { order:6; }
  #shieldPill { order:9; }
  .sound-button { width:36px; height:36px; }
  .panel { padding:20px; }
  .tutorial-box b { min-width:106px; }
}
@media (max-height:460px) {
  .overlay-screen { align-items:flex-start; padding:12px 0; }
  .panel { padding:18px 24px; }
  #startScreen .leaderboard-card { display:none; }
  #startScreen .tutorial-box { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 16px; margin:12px 0; }
  #gameOverScreen .panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px 18px; width:min(760px,calc(100vw - 28px)); max-width:760px; max-height:calc(var(--app-height,100vh) - 24px); }
  #gameOverScreen .signal-kicker, #gameOverScreen .over-title { grid-column:1; }
  #gameOverScreen .signal-kicker { grid-row:1; margin:0; font-size:9px; }
  #gameOverScreen .over-title { grid-row:2; font-size:38px; }
  #gameOverScreen .final-stats { grid-column:1; grid-row:3 / 8; margin:0; }
  #gameOverScreen .replay-button { grid-column:2; grid-row:1 / 3; margin:0; align-self:center; }
  #gameOverScreen .score-form { grid-column:2; grid-row:3; margin:0; }
  #gameOverScreen .score-status { grid-column:2; margin:0; }
  #gameOverScreen .leaderboard-card { grid-column:2; margin:0; }
  #gameOverScreen .creator-credit { grid-column:2; margin:0; }
  .result-grid { gap:4px; }
  .result-grid p { padding:5px 10px; margin:0; }
  .result-grid p:first-child b { font-size:32px; }
  #gameOverScreen .result-grid p { margin:0; }
}
@media (prefers-reduced-motion:reduce) {
  .combo-pill.hot, .hud-pill.score-punch, .big-button, .game-control { animation:none; transition:none; }
}