/*
  ============================================================
  TOBY'S TURBO TRACK — GAME STYLES
  ============================================================
  Loaded after styles.css (color tokens/buttons) and game-shell.css
  (shared chrome: topbar, sound toggle, .completion-overlay/
  .completion-card used for every screen here, the shared char-*
  keyframe library, .game-progress). This file adds: the race HUD,
  the canvas + mobile touch-control layer, the track-select cards,
  the countdown screen, and Toby's racing-specific reaction states
  (char-driving/steering/turbo/star/collision/jump/finish -- none of
  the shared idle/looking/happy/etc. states fit a racing kart, so this
  game defines its own small set instead of reusing the shared ones,
  the same "add game-specific states" pattern every other game's CSS
  already uses, just larger here since none of the shared states apply).
  ============================================================
*/

.race-stage{ background:#6FBE5E; overflow:hidden; }
#raceCanvas{ position:absolute; inset:0; z-index:1; display:block; touch-action:none; }

/* ---------- MINIMAP (top-down overview, dash-cam is the main view) ---------- */
.race-minimap{
  position:absolute; top:10px; right:10px; z-index:8;
  width:104px; height:104px; border-radius:50%;
  border:3px solid rgba(255,255,255,0.9);
  box-shadow:0 3px 10px rgba(0,0,0,0.28);
  background:rgba(255,255,255,0.28);
  pointer-events:none;
}
.race-minimap[hidden]{ display:none; }
@media (max-width:520px){
  .race-minimap{ width:76px; height:76px; top:6px; right:6px; border-width:2px; }
}

/* ---------- HUD ---------- */
.race-hud{
  position:relative; z-index:20; display:flex; align-items:center; justify-content:center;
  gap:10px; flex-wrap:wrap; padding:0 10px 6px; font-weight:800; font-size:0.85rem; color:var(--ink-soft);
}
.race-hud[hidden]{ display:none; }
.race-hud-item{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; background:rgba(255,255,255,0.75); border-radius:999px; padding:3px 10px; }
.race-hud-position{ color:var(--ink); font-size:0.95rem; background:#FFE8B8; }
.race-turbo-meter{
  display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,0.75); border-radius:999px; padding:3px 10px 3px 6px;
}
.race-turbo-bar{ width:56px; height:10px; border-radius:999px; background:#dfe6f0; overflow:hidden; }
.race-turbo-fill{ height:100%; width:100%; background:linear-gradient(90deg,#1595DE,#7A46E0); transition:width .1s linear; }
.race-turbo-fill.is-active{ background:linear-gradient(90deg,#FFC22E,#FF6B00); }
.race-pause-btn{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:999px; background:var(--surface); border:2px solid var(--line); cursor:pointer;
  font-size:0.95rem; box-shadow:0 3px 0 var(--line);
}

.race-progress-wrap{ position:relative; z-index:20; padding:0 14px 4px; }
.race-progress-track{ position:relative; height:8px; border-radius:999px; background:rgba(255,255,255,0.55); }
.race-progress-dot{ position:absolute; top:50%; left:0; width:14px; height:14px; border-radius:50%; background:#E4572E; border:2px solid #fff; transform:translate(-50%,-50%); transition:left .1s linear; }
.race-progress-track::after{ content:"🏁"; position:absolute; right:-4px; top:50%; transform:translateY(-50%); font-size:0.8rem; }

/* ---------- Toby (DOM overlay, shown only on non-canvas screens) ---------- */
.race-stage .game-character{ width:120px; height:120px; position:absolute; left:50%; bottom:6%; z-index:9; transform:translateX(-50%); pointer-events:none; }
.race-stage .game-character img{ width:100%; height:100%; object-fit:contain; }
.race-stage .game-character[hidden]{ display:none; }

.char-driving img{ animation:toby-driving 1.2s ease-in-out infinite; }
@keyframes toby-driving{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-4px);} }
.char-steering img{ animation:toby-steering .3s ease; }
@keyframes toby-steering{ 0%{ transform:rotate(0);} 50%{ transform:rotate(-6deg);} 100%{ transform:rotate(0);} }
.char-turbo img{ animation:toby-turbo .5s ease; }
@keyframes toby-turbo{ 0%{ transform:scale(1);} 40%{ transform:scale(1.15) translateX(6px);} 100%{ transform:scale(1);} }
.char-star img{ animation:toby-star .42s ease; }
@keyframes toby-star{ 0%{ transform:scale(1) rotate(0);} 50%{ transform:scale(1.2) rotate(8deg);} 100%{ transform:scale(1) rotate(0);} }
.char-collision img{ animation:toby-collision .6s ease; }
@keyframes toby-collision{ 0%{ transform:rotate(0) translateX(0);} 25%{ transform:rotate(-8deg) translateX(-6px);} 60%{ transform:rotate(6deg) translateX(4px);} 100%{ transform:rotate(0) translateX(0);} }
.char-jump img{ animation:toby-jump .5s ease; }
@keyframes toby-jump{ 0%{ transform:translateY(0) scale(1);} 40%{ transform:translateY(-24px) scale(1.08);} 100%{ transform:translateY(0) scale(1);} }
.char-finish img, .char-celebrate img{ animation:toby-finish 1.4s ease; }
@keyframes toby-finish{ 0%,100%{ transform:scale(1) rotate(0);} 20%{ transform:scale(1.15) rotate(-5deg);} 40%{ transform:scale(1.1) rotate(5deg);} 60%{ transform:scale(1.15) rotate(-4deg);} 80%{ transform:scale(1.05) rotate(3deg);} }
@media (prefers-reduced-motion:reduce){
  .char-driving img, .char-steering img, .char-turbo img, .char-star img, .char-collision img, .char-jump img, .char-finish img, .char-celebrate img{ animation:none; }
}

/* ---------- mobile touch controls ---------- */
.race-mobile-controls{
  position:absolute; inset:0; z-index:15; pointer-events:none;
}
.race-mobile-controls[hidden]{ display:none; }
.race-ctrl-btn{
  position:absolute; pointer-events:auto; -webkit-tap-highlight-color:transparent; touch-action:none; user-select:none;
  display:flex; align-items:center; justify-content:center; border-radius:50%; border:none;
  background:rgba(255,255,255,0.55); color:var(--ink); font-size:1.6rem; font-weight:800;
  box-shadow:0 4px 10px rgba(0,0,0,0.18); transition:transform .08s ease, background .08s ease;
}
.race-ctrl-btn.is-pressed{ background:rgba(255,255,255,0.9); transform:scale(0.92); }
.race-ctrl-steer{ width:64px; height:64px; bottom:18px; }
#btnLeft{ left:16px; }
#btnRight{ left:88px; }
.race-ctrl-accelbrake{ width:56px; height:56px; bottom:18px; }
#btnAccel{ right:88px; background:rgba(180,255,180,0.6); }
#btnBrake{ right:16px; bottom:84px; background:rgba(255,200,180,0.6); }
.race-ctrl-turbo{
  width:72px; height:72px; right:16px; bottom:18px;
  background:linear-gradient(160deg,#FFC22E,#FF6B00); color:#fff; font-size:1.9rem;
}

/* ---------- track-select cards ---------- */
.track-select-card{ max-width:520px; width:92vw; }
.track-cards{ display:flex; flex-direction:column; gap:12px; margin:14px 0 20px; }
.track-card{
  display:flex; align-items:stretch; gap:12px; text-align:left; border:2px solid var(--line); border-radius:16px;
  background:var(--surface); padding:0; overflow:hidden; cursor:pointer; font:inherit; color:inherit;
}
.track-card:disabled{ cursor:not-allowed; opacity:0.55; }
.track-card.is-completed{ border-color:#5FA85C; }
.track-card-art{ flex:none; width:72px; display:flex; align-items:center; justify-content:center; font-size:1.6rem; }
.track-card-art.env-meadow{ background:linear-gradient(160deg,#BEE7B0,#6FBE5E); }
.track-card-art.env-jungle{ background:linear-gradient(160deg,#7FCB93,#2E8F5C); }
.track-card-art.env-rainbow{ background:linear-gradient(160deg,#B39DFF,#5A4E8A); }
.track-card-body{ padding:10px 12px 10px 0; display:flex; flex-direction:column; gap:2px; justify-content:center; }
.track-card-name{ font-weight:800; font-size:1rem; color:var(--ink); }
.track-card-diff{ font-size:0.78rem; font-weight:700; color:var(--ink-soft); }
.track-card-desc{ font-size:0.82rem; color:var(--ink-soft); }

/* ---------- countdown ---------- */
.countdown-card{ background:transparent; box-shadow:none; border:none; display:flex; align-items:center; justify-content:center; }
.countdown-number{ font-size:6rem; font-weight:900; color:#fff; text-shadow:0 4px 0 rgba(0,0,0,0.25); }
.countdown-pop{ animation:countdown-pop .8s ease; }
@keyframes countdown-pop{ 0%{ transform:scale(0.4); opacity:0;} 30%{ transform:scale(1.2); opacity:1;} 100%{ transform:scale(1); opacity:0.85;} }

/* ---------- results / stats ---------- */
.race-stats{
  display:flex; flex-direction:column; gap:6px; margin:0 0 20px; font-weight:800; color:var(--ink);
  background:var(--surface-alt); border-radius:16px; padding:14px 18px;
}
.race-stats-row{ display:flex; justify-content:space-between; gap:16px; font-size:0.92rem; }
.race-stats-row span:last-child{ color:var(--coral-ink); }

.race-start-card{ max-width:380px; }
.race-start-toby{ width:120px; height:auto; margin:0 auto 10px; display:block; filter:drop-shadow(0 8px 10px rgba(0,0,0,0.25)); }
.race-howto-card{ max-width:440px; text-align:left; }
.race-howto-list{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:10px; }
.race-howto-list li{ display:flex; align-items:flex-start; gap:10px; font-weight:700; font-size:0.92rem; line-height:1.35; }
.race-howto-icon{ flex:none; font-size:1.1rem; }

@media (max-width:600px){
  .race-hud{ font-size:0.72rem; gap:6px; padding:0 8px 4px; }
  .race-hud-item{ padding:2px 8px; }
  .race-stage .game-character{ width:90px; height:90px; }
  .countdown-number{ font-size:4.2rem; }
}
@media (max-height:700px){
  .race-hud{ padding:0 8px 3px; }
}