/* Color Rush Raceway — bright Festival Toybox layer.
   racer_deluxe.css remains intact underneath so a future neon theme can be
   restored by removing the racer-fun/festival-toybox body classes. */
body.racer-fun {
  --racer-ink: #17315b;
  --racer-blue: #1677ff;
  --racer-red: #ff4057;
  --racer-yellow: #ffd52f;
  --racer-green: #35c76f;
  --racer-orange: #ff8a2b;
  --racer-violet: #8d55e8;
  background: #55c7ff !important;
  color: var(--racer-ink) !important;
}

body.racer-fun canvas#game {
  filter: saturate(1.18) contrast(1.1) brightness(1.03) !important;
}

body.racer-fun .racer-vignette,
body.racer-fun .racer-scanlines,
body.racer-fun .menu-aurora { display: none !important; }

body.racer-fun .racer-speed-lines {
  opacity: 0 !important;
  background:
    linear-gradient(102deg, transparent 0 42%, rgba(255,255,255,.75) 43% 43.35%, transparent 44% 100%),
    linear-gradient(78deg, transparent 0 59%, rgba(255,213,47,.7) 60% 60.3%, transparent 61% 100%);
  mix-blend-mode: screen;
}
body.racer-fun.is-racing .racer-speed-lines { opacity: .26 !important; }

body.racer-fun #crash-flash {
  background: radial-gradient(circle at center, rgba(255,255,255,.98), rgba(255,64,87,.58) 27%, transparent 67%) !important;
}

body.racer-fun #race-announcer {
  border: 4px solid #fff !important;
  border-radius: 20px !important;
  color: #fff !important;
  background: var(--racer-red) !important;
  box-shadow: 0 8px 0 #b51e33, 0 18px 34px rgba(23,49,91,.24) !important;
  clip-path: none !important;
  text-shadow: 0 3px 0 rgba(23,49,91,.22) !important;
}
body.racer-fun #announce-kicker {
  color: var(--racer-ink) !important;
  background: var(--racer-yellow) !important;
  border-radius: 999px;
  padding: 4px 10px;
}
body.racer-fun #announce-title { color: #fff !important; }

body.racer-fun #hud {
  border: 4px solid var(--racer-blue) !important;
  border-radius: 20px !important;
  color: var(--racer-ink) !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 8px 0 #0959be, 0 18px 34px rgba(23,49,91,.22) !important;
  backdrop-filter: none !important;
}
body.racer-fun .hud-brand { border-right-color: #bdd9f2 !important; }
body.racer-fun .hud-brand-mark {
  border: 0 !important;
  border-radius: 7px !important;
  background: conic-gradient(from 45deg, var(--racer-red), var(--racer-yellow), var(--racer-green), var(--racer-blue), var(--racer-violet), var(--racer-red)) !important;
  box-shadow: inset 0 0 0 3px #fff, 0 3px 0 rgba(23,49,91,.18) !important;
  transform: rotate(8deg);
}
body.racer-fun .hud-brand strong { color: var(--racer-red) !important; }
body.racer-fun .hud-brand small,
body.racer-fun .hud-metric small,
body.racer-fun .hud-flow small { color: #637894 !important; }
body.racer-fun .hud-speed {
  border-color: var(--racer-red) !important;
  border-radius: 13px !important;
  background: #fff0f2 !important;
  clip-path: none !important;
}
body.racer-fun .hud-speed strong { color: var(--racer-red) !important; text-shadow: none !important; }
body.racer-fun .hud-speed span { color: var(--racer-blue) !important; }
body.racer-fun .hud-speed i { background: linear-gradient(90deg,var(--racer-blue),var(--racer-green),var(--racer-yellow),var(--racer-red)) !important; box-shadow: none !important; }
body.racer-fun .hud-metrics { border-color: #c9ddec !important; background: #f5fbff !important; }
body.racer-fun .hud-metric strong { color: var(--racer-ink) !important; }
body.racer-fun .hud-metric:nth-child(2) { background: #edf8ff; }
body.racer-fun .hud-metric:nth-child(3) { background: #fff8c9; }
body.racer-fun .hud-metric:nth-child(4) { background: #fff0f2; }
body.racer-fun .hud-lives strong { color: var(--racer-red) !important; text-shadow: none !important; }
body.racer-fun .hud-flow strong { color: var(--racer-violet) !important; }
body.racer-fun .hud-flow > span { background: #dbe9f3 !important; }
body.racer-fun .hud-flow > span i { background: linear-gradient(90deg,var(--racer-green),var(--racer-yellow),var(--racer-orange),var(--racer-red)) !important; box-shadow: none !important; }

body.racer-fun #hint {
  border: 3px solid #e2ac00 !important;
  border-radius: 999px !important;
  color: var(--racer-ink) !important;
  background: rgba(255,249,201,.97) !important;
  box-shadow: 0 5px 0 #a97f00 !important;
  backdrop-filter: none !important;
}
body.racer-fun #hint span { color: var(--racer-red) !important; }
body.racer-fun #hint kbd { border: 2px solid var(--racer-blue) !important; color: var(--racer-ink) !important; background: #fff !important; }
body.racer-fun #hint em,
body.racer-fun #hint b { color: #536a88 !important; }

body.racer-fun #menu {
  background:
    radial-gradient(circle at 12% 13%, #fff 0 5%, transparent 5.2%),
    radial-gradient(circle at 87% 11%, rgba(255,255,255,.92) 0 7%, transparent 7.2%),
    linear-gradient(180deg, #4dbbff 0 63%, #35c76f 63.2% 100%) !important;
  backdrop-filter: none !important;
}
body.racer-fun #menu .panel {
  border: 5px solid var(--racer-blue) !important;
  border-radius: 26px !important;
  color: var(--racer-ink) !important;
  background: rgba(255,255,255,.985) !important;
  box-shadow: 0 10px 0 #0959be, 0 28px 52px rgba(23,49,91,.25) !important;
  clip-path: none !important;
  scrollbar-color: var(--racer-blue) #dff4ff !important;
}
body.racer-fun #menu .panel::before {
  inset: 0 0 auto 0 !important;
  width: auto !important;
  height: 9px !important;
  background: linear-gradient(90deg,var(--racer-blue) 0 18%,var(--racer-red) 18% 36%,var(--racer-yellow) 36% 54%,var(--racer-green) 54% 72%,var(--racer-violet) 72% 100%) !important;
  box-shadow: none !important;
}
body.racer-fun #menu .panel::after { display: none !important; }
body.racer-fun .menu-eyebrow { color: var(--racer-violet) !important; }
body.racer-fun .menu-eyebrow i { height: 4px !important; border-radius: 999px; background: linear-gradient(90deg,var(--racer-blue),var(--racer-green),var(--racer-yellow),var(--racer-red)) !important; }
body.racer-fun #menu h1 { filter: none !important; }
body.racer-fun #menu h1 span {
  color: var(--racer-blue) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 4px 0 #a7d0ff !important;
}
body.racer-fun #menu h1 strong { color: var(--racer-red) !important; text-shadow: 0 4px 0 #ffc1c9 !important; }
body.racer-fun .menu-lead { color: #536a88 !important; }
body.racer-fun .menu-specs {
  border: 3px solid var(--racer-blue) !important;
  border-radius: 15px !important;
  background: #edf8ff !important;
  box-shadow: 0 5px 0 #9ebed7 !important;
}
body.racer-fun .menu-specs span + span { border-left-color: #bdd9f2 !important; }
body.racer-fun .menu-specs small { color: #637894 !important; }
body.racer-fun .menu-specs b { color: var(--racer-ink) !important; }
body.racer-fun .driver-heading { border-bottom-color: #bdd9f2 !important; }
body.racer-fun .driver-heading small { color: var(--racer-violet) !important; }
body.racer-fun .driver-heading strong { color: var(--racer-ink) !important; }
body.racer-fun .driver-heading > span { color: #637894 !important; }

body.racer-fun #character-grid > .char-card {
  border: 3px solid var(--racer-blue) !important;
  border-radius: 17px !important;
  color: var(--racer-ink) !important;
  background: #edf8ff !important;
  box-shadow: 0 6px 0 #9ebed7 !important;
  clip-path: none !important;
}
body.racer-fun #character-grid > .char-card::before { display: none !important; }
body.racer-fun #character-grid > .char-card:nth-child(6n + 2) { border-color: var(--racer-red) !important; background: #fff0f2 !important; box-shadow: 0 6px 0 #e8a4ae !important; }
body.racer-fun #character-grid > .char-card:nth-child(6n + 3) { border-color: #e2ac00 !important; background: #fff8c9 !important; box-shadow: 0 6px 0 #dfc76e !important; }
body.racer-fun #character-grid > .char-card:nth-child(6n + 4) { border-color: var(--racer-green) !important; background: #ecfff2 !important; box-shadow: 0 6px 0 #9dd9b1 !important; }
body.racer-fun #character-grid > .char-card:nth-child(6n + 5) { border-color: var(--racer-orange) !important; background: #fff0df !important; box-shadow: 0 6px 0 #e3b98f !important; }
body.racer-fun #character-grid > .char-card:nth-child(6n) { border-color: var(--racer-violet) !important; background: #f3edff !important; box-shadow: 0 6px 0 #beace0 !important; }
body.racer-fun #character-grid .char-card img { filter: drop-shadow(0 6px 7px rgba(23,49,91,.22)) saturate(1.1) !important; }
body.racer-fun #character-grid .char-card span { color: var(--racer-ink) !important; text-align: left; }
body.racer-fun #character-grid > .char-card:hover,
body.racer-fun #character-grid > .char-card:focus-visible { outline: 4px solid var(--racer-yellow) !important; outline-offset: 2px !important; transform: translateY(-4px) rotate(-1deg) !important; }

body.racer-fun .chip,
body.racer-fun button.chip,
body.racer-fun a.chip {
  border: 3px solid var(--racer-blue) !important;
  border-radius: 999px !important;
  color: var(--racer-ink) !important;
  background: #fff !important;
  box-shadow: 0 5px 0 #9ebed7 !important;
  clip-path: none !important;
  text-shadow: none !important;
}
body.racer-fun .chip:hover,
body.racer-fun .chip:focus-visible { color: var(--racer-ink) !important; border-color: var(--racer-red) !important; box-shadow: 0 5px 0 #e8a4ae !important; }
body.racer-fun #toggle-sfx { border-color: #e2ac00 !important; background: #fff8c9 !important; }
body.racer-fun #toggle-music { border-color: var(--racer-green) !important; background: #ecfff2 !important; }
body.racer-fun #result { border: 3px solid var(--racer-red) !important; color: var(--racer-ink) !important; background: #fff0f2 !important; }
body.racer-fun #end-controls .chip-primary { border-color: var(--racer-red) !important; color: #fff !important; background: var(--racer-red) !important; box-shadow: 0 6px 0 #b51e33 !important; }
body.racer-fun .menu-footer { border-top-color: #bdd9f2 !important; }
body.racer-fun .menu-footer > span { color: #637894 !important; }

body.racer-fun #dmg-top-actions .dmg-btn,
body.racer-fun #dmg-global-controls .dmg-ctl-btn {
  border: 3px solid var(--racer-blue) !important;
  color: var(--racer-ink) !important;
  background: #fff !important;
  box-shadow: 0 5px 0 #0959be !important;
  text-shadow: none !important;
}
body.racer-fun #dmg-pause-overlay { background: rgba(82,190,235,.62) !important; backdrop-filter: blur(8px) !important; }
body.racer-fun #dmg-pause-overlay .dmg-pause-card,
body.racer-fun #dmg-pause-overlay .card { border-color: var(--racer-blue) !important; color: var(--racer-ink) !important; background: #fff !important; box-shadow: 0 8px 0 #0959be !important; }

@media (max-width: 720px) {
  body.racer-fun #hud { border-width: 3px !important; border-radius: 14px !important; }
  body.racer-fun #menu .panel { border-width: 4px !important; border-radius: 18px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.racer-fun .racer-speed-lines { display: none !important; }
}