@import "../../styles/result-partners.css";
@import "../../styles/rank-award.css";
@import "../../styles/scrollbars.css";

:root {
  color-scheme: light;
  --paper: #fffaf0;
  --ink: #211d25;
  --yellow: #f5ce48;
  --blue: #86c9e3;
  --pink: #f1abc9;
  --green: #c3dba0;
  --muted: #625c63;
  --shadow: #211d25;
  --display: 'Bangers', Impact, 'Arial Narrow', sans-serif;
  font-family: Arial, sans-serif;
  color: var(--ink);
}
:root[data-theme="dark"] { color-scheme: dark; --paper: #34303b; --ink: #fff8e8; --muted: #d1c8d5; --shadow: #100e15; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; background: #a4c9c8; }
button, input { font: inherit; }
button { cursor: pointer; pointer-events: auto; touch-action: manipulation; }
button:focus-visible, input:focus-visible, .sponsor-list a:focus-visible { outline: 3px solid #7143a3; outline-offset: 5px; }
#gameCanvas { display: block; touch-action: none; outline: none; }
#gameCanvas:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 100; }
#startScreen { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; padding: 70px clamp(20px, 5vw, 64px) 25px; background: #211d251c; }
#startScreen.hidden { display: none; }
.intro-panel { position: relative; width: min(460px, 100%); padding: clamp(22px, 3vw, 38px); background: var(--paper); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 7px 8px 0 var(--shadow); }
.intro-panel::after { content: '× + ÷'; position: absolute; top: -20px; right: 18px; padding: 5px 15px; background: var(--blue); color: #211d25; border: 2px solid #211d25; border-radius: 5px; font: 28px/1 var(--display); transform: rotate(5deg); }
h1 { font-family: var(--display); font-size: clamp(48px, 6vw, 76px); line-height: .98; letter-spacing: .025em; font-weight: 400; }
h1 span { display: inline-block; }
.intro-panel p { margin-top: 18px; line-height: 1.6; font-size: clamp(14px, 1.5vw, 17px); color: var(--muted); }
#startBtn, #restartBtn, .save-score { min-height: 48px; margin-top: 22px; padding: 13px 25px; border: 2px solid #211d25; border-radius: 7px; background: var(--yellow); color: #211d25; font-weight: 800; font-size: 16px; box-shadow: 4px 4px 0 var(--shadow); transition: transform .15s, box-shadow .15s, background .15s; }
#startBtn { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; }
#startBtn span { font-size: 18px; }
#startBtn:hover, #restartBtn:hover, .save-score:hover { background: #ffe27b; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--shadow); }
#startBtn:active, #restartBtn:active, .save-score:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--shadow); }
#startBtn:disabled { opacity: .55; cursor: wait; transform: none; }
#loadStatus { display: block; color: var(--muted); font-size: 11px; text-align: center; margin-top: 12px; }
.intro-controls { display: flex; align-items: center; justify-content: center; gap: 7px; padding-top: 18px; margin-top: 18px; border-top: 1px solid color-mix(in srgb,var(--ink) 20%, transparent); color: var(--muted); font-size: 12px; flex-wrap: wrap; }
.intro-controls > span { flex-basis: 100%; text-align: center; padding-top: 3px; }
kbd { display: inline-grid; place-items: center; width: 26px; height: 26px; background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 4px; box-shadow: 1px 2px 0 var(--shadow); font: 15px Arial, sans-serif; }
#distanceMeter, #stats-container { position: absolute; top: 14px; border: 2px solid #211d25; border-radius: 8px; box-shadow: 3px 4px 0 var(--shadow); }
#distanceMeter { left: 50%; transform: translateX(-50%); text-align: center; padding: 8px 22px; min-width: 110px; color: #211d25; background: var(--yellow); }
.stat-label { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
#distanceValue { font: 36px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.unit { margin-left: 5px; font-size: 14px; font-weight: 700; }
#stats-container { right: 14px; padding: 10px 14px; min-width: 166px; background: var(--paper); }
.team-stat { display: flex; gap: 18px; align-items: center; justify-content: space-between; }
#armyCount { color: #211d25; background: var(--blue); border: 1.5px solid #211d25; border-radius: 5px; min-width: 43px; text-align: center; padding: 1px 7px; font: 32px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.race-meta { display: flex; align-items: center; gap: 14px; margin-top: 7px; }
#levelIndicator { font-size: 10px; font-weight: 800; }
#enemyIndicator { font-size: 10px; font-weight: 700; }
#enemyIndicator[data-threat="low"] { color: #28623a; }
#enemyIndicator[data-threat="med"] { color: #8d4b12; }
#enemyIndicator[data-threat="high"], #enemyIndicator[data-threat="max"] { color: #a32b3c; }
:root[data-theme="dark"] #enemyIndicator { color: #ffdc8d; }
#instructions { display: none; position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); padding: 9px 14px; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--shadow); border-radius: 7px; white-space: nowrap; font-size: 12px; font-weight: 700; }
#instructions kbd { margin-right: 5px; width: 23px; height: 23px; }
#instructions > span { margin-left: 8px; }
.touch-hint { color: var(--muted); font-weight: 400; }
[hidden] { display: none !important; }
#gameOver { display: none; position: absolute; top: calc(50% + 24px); left: 50%; transform: translate(-50%, -50%); width: min(680px, calc(100% - 24px)); max-height: calc(100% - 80px); overflow-y: auto; padding: 16px 20px; border: 3px solid var(--ink); border-radius: 12px; background: var(--paper); box-shadow: 7px 8px 0 var(--shadow); pointer-events: auto; }
.result-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
#gameOverText { font: 28px/1.05 var(--display); letter-spacing: .015em; }
#recordBadge { padding: 7px 9px; border: 2px solid #211d25; border-radius: 5px; color: #211d25; background: var(--green); font-size: 12px; font-weight: 800; transform: rotate(4deg); white-space: nowrap; }
.result-bib { position: relative; display: flex; justify-content: center; align-items: center; gap: 14px; padding: 8px 16px; border: 2px solid #211d25; border-radius: 8px; background: var(--yellow); color: #211d25; }
.result-bib::before, .result-bib::after { content: ''; position: absolute; width: 7px; height: 7px; border: 1px solid #211d25; background: var(--paper); border-radius: 50%; top: 8px; }
.result-bib::before { left: 8px; } .result-bib::after { right: 8px; }
.result-medal { width: 40px; flex-shrink: 0; transform: rotate(-9deg); }
#resultLabel { font-size: 12px; font-weight: 700; }
.result-distance { display: flex; align-items: baseline; gap: 8px; }
#distanceResult { font: 48px/1.05 var(--display); font-variant-numeric: tabular-nums; }
.result-distance > span { font: 28px var(--display); }
#resultNote { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 8px 0; }
.result-stats { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.result-stats dt { color: var(--muted); font-size: 11px; line-height: 1.35; min-height: 30px; }
.result-stats dd { font: 22px/1.2 var(--display); margin-top: 4px; }
#scoreForm { text-align: left; }
#nicknameLabel { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.score-entry { display: flex; align-items: stretch; gap: 10px; }
#nicknameInput { min-width: 0; width: 100%; padding: 10px 12px; font-size: 16px; border: 2px solid var(--ink); border-radius: 6px; background: var(--paper); color: var(--ink); }
.save-score { margin: 0; background: var(--blue); font-size: 13px; padding: 10px 13px; white-space: nowrap; box-shadow: 3px 3px 0 var(--shadow); }
.save-score:disabled { opacity: .6; cursor: wait; }
#scoreHint { color: var(--muted); font-size: 11px; margin-top: 9px; }
#validationMsg { color: #ad3142; font-size: 12px; line-height: 1.4; margin-top: 5px; }
:root[data-theme="dark"] #validationMsg { color: #ffb8c5; }
#restartBtn { width: 100%; margin-top: 18px; }
.score-success { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 18px; border: 2px solid #211d25; border-radius: 7px; background: var(--green); color: #211d25; }
#savedName { display: block; font-size: 12px; margin-bottom: 5px; }
#rankLabel { font-size: 14px; }
#rankValue { font: 48px/1 var(--display); }
#adsSeenContainer { margin-top: 12px; }
#battleStatus { position: absolute; top: 112px; left: 50%; transform: translateX(-50%); width: 230px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 8px; box-shadow: 3px 4px 0 var(--shadow); background: var(--paper); text-align: center; }
#battleLabel { font: 24px/1 var(--display); }
.battle-powers { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 7px; }
.battle-powers b { font: 27px/1.1 var(--display); }
.battle-powers b:first-child { color: #2c718f; } .battle-powers b:last-child { color: #a53950; }
.battle-powers > span { color: var(--muted); font: 15px var(--display); }
.battle-track { height: 5px; overflow: hidden; border-radius: 3px; margin-top: 9px; background: color-mix(in srgb,var(--ink) 12%,transparent); }
.battle-track i { display: block; width: 100%; height: 100%; transform-origin: left; background: var(--pink); }
#battleStatus[data-state="won"] { background: var(--green); color: #211d25; }
#battleStatus[data-state="won"] .battle-powers { justify-content: center; }
#battleStatus[data-state="won"] .battle-powers > span, #battleStatus[data-state="won"] #battleEnemy, #battleStatus[data-state="won"] .battle-track { display: none; }
#battleStatus[data-state="won"] #battlePlayer { color: #211d25; font: 14px Arial,sans-serif; }
@media (max-width: 600px) {
  #gameOver { padding: 12px; }
  #gameOverText { font-size: 26px; }
  #recordBadge { font-size: 10px; }
  .result-bib { gap: 12px; padding: 8px 12px; }
  #distanceResult { font-size: 44px; }
  .result-medal { width: 36px; }
  .result-stats { gap: 8px; }
  #battleStatus { top: 126px; width: 190px; }
}
body #game-audio-controls { top: 14px; left: 14px; height: 42px; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--shadow); border-radius: 7px; opacity: 1; }
body #game-audio-controls:hover, body #game-audio-controls:focus-within { background: var(--paper); }
body #game-audio-controls button { color: var(--ink); }
body #game-audio-controls button:hover { background: var(--yellow); color: #211d25; }
body #game-audio-controls input { accent-color: #7143a3; }
@media (max-width: 600px) {
  #startScreen { padding: 110px 20px 25px; justify-content: center; overflow-y: auto; }
  .intro-panel { padding: 25px 20px; }
  h1 { font-size: clamp(42px, 12vw, 58px); }
  #distanceMeter { top: 64px; left: 12px; transform: none; min-width: 80px; padding: 5px 12px; }
  #distanceValue { font-size: 28px; }
  #stats-container { right: 12px; top: 12px; min-width: 144px; padding: 8px 10px; }
  #armyCount { font-size: 28px; }
  #instructions { bottom: 12px; }
  .touch-hint { display: none; }
  body #game-audio-controls { top: 12px; left: 12px; height: 38px; gap: 4px; padding: 0 6px; }
  body #game-audio-controls input { width: 48px; }
  body #game-audio-controls output { min-width: 25px; font-size: 10px; }
}
/* Keep audio and race stats in separate rows inside narrow phone iframes. */
@media (max-width: 400px) {
  #distanceMeter { top: 62px; }
  #stats-container { top: 62px; min-width: 0; width: calc(100% - 116px); }
  .team-stat { gap: 6px; }
  .team-stat .stat-label { min-width: 0; font-size: 9px; overflow-wrap: anywhere; }
  .race-meta { flex-wrap: wrap; gap: 4px 8px; }
  #startScreen { padding: 162px 16px 24px; align-items: flex-start; }
  #battleStatus { top: 156px; }
  .score-entry { flex-direction: column; }
}
@media (max-height: 560px) {
  #startScreen { padding: 62px 18px 18px; align-items: flex-start; overflow-y: auto; }
  @media (max-width: 400px) { #startScreen { padding-top: 162px; } }
  .intro-panel { padding: 18px; max-width: 380px; }
  h1 { font-size: 40px; }
  h1 br { display: none; }
  .intro-panel p { margin-top: 10px; font-size: 13px; }
  #startBtn { margin-top: 12px; padding: 9px 20px; min-height: 44px; }
  .intro-controls { margin-top: 12px; padding-top: 12px; }
  .intro-controls > span { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

.intro-controls > .keyboard-hint { flex-basis: auto; padding-top: 0; }
h1 { white-space: pre-line; }