/* Cosmos Dash · neon city */
:root {
  color-scheme: light;
  --ink: #192640;
  --muted: #536580;
  --mint: #61eadb;
  --peach: #ffc775;
  --paper: #edf4fb;
  --navy: #233b65;
  --purple: #604ce1;
  --shadow: 0 16px 44px #324b7420;
  font-family: 'Trebuchet MS', Arial, Helvetica, system-ui, sans-serif;
}
body {
  background: radial-gradient(ellipse at 10% 0%, #d9fbff 0, transparent 48%),
    radial-gradient(ellipse at 95% 5%, #eae2ff 0, transparent 43%), #edf4fb;
  color: var(--ink);
}
.shell { max-width: 1280px; padding-top: 16px; }
.topbar { padding: 0 2px 12px; margin-bottom: 12px; border-bottom: 1px solid #cbdcea; }
.brand { gap: 11px; }
.lca {
  background: #233b65; color: #fff; border-radius: 10px; transform: none;
  box-shadow: inset 0 1px 0 #ffffff30, 0 3px 0 #b7cbdc;
}
.brand-title { font-weight: 900; letter-spacing: 1.3px; color: #263752; }
.brand-title b { color: #6650d4; }
.quiet {
  background: #ffffffcc; border: 1px solid #c7d7e7; border-radius: 11px;
  color: #293d60; box-shadow: 0 2px 0 #dbe5ee;
}
.quiet span { background: #e7eefb; color: #6350c8; }
.game {
  background: #5b76ba; border: 3px solid #fff; border-radius: 24px;
  box-shadow: 0 0 0 1px #c5d6e8, 0 18px 50px #42659a24;
}
body[data-phase="home"] .game { min-height: 560px; }
.start-screen {
  min-height: 560px; padding: 24px;
  background: linear-gradient(90deg, #dff7ff45 0%, #dbeaff13 43%, transparent 68%);
}
.start-card {
  width: 370px; max-width: 100%; padding: 22px; margin: 0;
  background: linear-gradient(145deg, #fffffffa, #f3f8ffed);
  border: 1px solid #fff; border-radius: 22px;
  box-shadow: 0 15px 44px #14396635, inset 0 0 0 1px #c1e2f44d;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.setup-kicker {
  display: flex; gap: 7px; align-items: center; margin: 0 0 8px;
  color: #436180; font-size: 10px; font-weight: 900; letter-spacing: 1.6px;
}
.setup-kicker::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #0eb7b2; box-shadow: 0 0 0 3px #54e2df26;
}
.start-card h1 {
  color: #1c2b48; font-size: 32px; line-height: 1.1;
  font-weight: 900; letter-spacing: -1.3px; margin: 0 0 8px;
}
.start-card h1 em { font-style: normal; color: #6550d8; white-space: nowrap; }
.start-card .intro { color: #5b6b85; font-size: 12px; line-height: 1.5; margin: 0 0 16px; }
.start-card fieldset { margin-bottom: 13px; }
.start-card legend { color: #30415e; font-size: 12px; margin-bottom: 7px; }
.start-card .table-options { gap: 5px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.start-card .table-options button {
  color: #3c506c; background: #fff; border: 1px solid #d2deeb;
  border-radius: 9px; min-height: 39px; padding: 5px 0; font-size: 15px;
  box-shadow: 0 2px 0 #e1e8f2;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.start-card .table-options button:last-child { grid-column: span 2; font-size: 12px; }
.start-card .table-options button[aria-pressed="true"] {
  color: #064e62; background: #aaf6ee; border-color: #1aabae;
  box-shadow: 0 2px 0 #47b9bc, inset 0 1px 0 #ffffff90;
}
.start-card .table-options button:hover:not(:disabled) { background: #e8f8fc; border-color: #68becb; filter: none; }
.start-card .table-options button[aria-pressed="true"]:hover { background: #aaf6ee; }
.runner-picker {
  grid-template-columns: 90px minmax(0, 1fr); gap: 12px;
  min-height: 100px; padding: 0 13px 0 0; margin-bottom: 14px;
  background: radial-gradient(ellipse at 13% 42%, #bff8ff 0, transparent 48%),
    linear-gradient(110deg, #e9f7ff, #f0edff);
  border: 1px solid #cedeed; border-radius: 15px;
}
#runnerPreview {
  display: block; width: 90px; height: 100px; border-radius: 14px;
  background: transparent; touch-action: auto;
}
.runner-picker .runner-label { color: #455a78; font-size: 11px; gap: 7px; }
.runner-picker select, .runner-label select {
  color: #263c60; background: #fffffff2; border: 1px solid #bdcfe3;
  border-radius: 9px; min-height: 41px; max-width: 100%;
  font-family: inherit; font-size: 13px; font-weight: 800; padding: 7px;
  box-shadow: 0 2px 0 #d9e1f0;
}
.primary, .start-card .start-button {
  background: linear-gradient(105deg, #6657e8, #5143ce); color: #fff;
  border: 1px solid #5141c7; border-top-color: #8d80f4; border-radius: 12px;
  box-shadow: 0 4px 0 #3a32a1, 0 7px 18px #6550d322;
}
.start-card .start-button { min-height: 48px; font-size: 17px; padding: 11px 16px; }
.start-button span { color: #b8fff5; }
.primary:active, .start-card .start-button:active { transform: translateY(3px); box-shadow: 0 1px 0 #3a32a1; }
.run-options { margin-top: 14px; border-top: 1px solid #cfdeec; padding-top: 4px; }
.run-options > summary { color: #354c6a; min-height: 35px; font-size: 12px; }
.run-options > summary span { color: #61728b; font-size: 10px; }
.run-options > summary::after { color: #6a57cd; font-weight: 600; }
.options-body { padding-top: 9px; }
.start-card .modes button {
  color: #334b69; background: #fff; border: 1px solid #c6d7e7; border-radius: 10px;
}
.start-card .modes button[aria-pressed="true"] { color: #174863; background: #ddf9fa; border-color: #50b7c7; }
.start-card .locker-button {
  color: #4b4580; background: #eae8fa; border: 1px solid #ccc8e9;
  border-radius: 10px; box-shadow: none;
}
.start-card .locker-button span:nth-child(1) { color: #947018; }
.start-card .small-note, .small-note { color: #5c6e86; }

/* High-contrast glass overlays; do not alter the compact equation geometry. */
.hud-cell {
  color: #21334e; background: #f7fbfff2; border-color: #fff; border-radius: 13px;
  box-shadow: 0 3px 13px #17376125;
}
.hud-label { color: #576c87; }
.hud-cell.coins strong { color: #92620b; }
#shields { color: #148699; }
.pause {
  background: #f9fbff; color: #4f44a1; border: 1px solid #fff; border-radius: 12px;
  box-shadow: 0 3px 13px #17376125;
}
.equation-bar {
  color: #192c4b; background: #fbfdfff5; border-color: #fff;
  box-shadow: 0 4px 16px #15305630;
}
.equation-label { color: #546888; }
.equation-bar strong { color: #293b68; }
.gate-choices { color: #526b86; }
.bonus-badge { background: #e6ecfc; border-color: #c9d5ef; color: #526788; }
.bonus-badge b { color: #56649c; }
.bonus-badge.active { background: #bff8eb; border-color: #45ad97; box-shadow: 0 0 15px #4ee9cf30; }
.bonus-badge.active b { color: #116b60; }
.bonus-badge.active span { color: #276657; }
.toast { background: #fff; color: #2b4664; border: 1px solid #a0e5e5; border-radius: 12px; box-shadow: 0 4px 18px #173f6530; }
.checkpoint { background: #f7fbfff2; color: #2f4668; border-color: #fff; border-radius: 11px; box-shadow: 0 3px 14px #17376125; }
.checkpoint #distance { color: #293e64; }
.checkpoint #paceLabel { color: #5a708d; }
.run-controls .steer-group button {
  background: #fff; color: #284267; border-color: #c7d8e9; border-radius: 13px;
  box-shadow: 0 3px 0 #b7cadd;
}
.run-controls .steer-group:last-child button {
  background: #e9e5ff; color: #4d42a3; border-color: #c6beee; box-shadow: 0 3px 0 #b3a9df;
}
.run-controls p { color: #334b6a; }
.run-controls p span { color: #63758c; }
.bottom-bar { color: #5b6d85; border-top: 1px solid #cadce9; margin-top: 12px; padding-top: 12px; }
.play-settings .motion-setting { color: #435873; }
.motion-setting input { accent-color: #6351d5; }

/* Shared dialogs, results, colours, and recovery notice. */
.end-screen { background: #273b716e; backdrop-filter: blur(5px); }
.results-card, dialog {
  color: #233651; background: #fbfdff; border: 1px solid #fff; border-radius: 22px;
  box-shadow: 0 20px 80px #142e6645;
}
.eyebrow { color: #6b58bc; }
.results-card > p, .dialog-inner > p { color: #5b6d86; }
.result-stats div { background: #eaf1fc; border: 1px solid #d8e3f2; border-radius: 13px; }
.result-stats strong { color: #3b5482; }
.result-stats span { color: #5b6f8b; }
.practice-summary { color: #256154 !important; background: #dcf7ef; border: 1px solid #b3decd; border-radius: 11px; }
.results-card details { border-color: #cedcea; }
.results-card li { color: #546b86; }
.secondary { color: #3f557a; background: #e8eef9; border: 1px solid #cedbf0; border-radius: 12px; }
.help-steps p { color: #556985; background: #edf3fa; border-radius: 12px; }
.help-steps b { color: #2c4668; }
.suit { color: #385275; background: #edf4fb; border-color: #cbddec; border-radius: 14px; }
.suit[aria-pressed="true"] { background: #e2faf3; border-color: #29a68e; }
.suit-swatch { border-color: #fff; box-shadow: 0 0 0 2px #afc9db; }
.text-button { color: #5c5b91; }
.danger { color: #93395a; background: #ffedf3; border: 1px solid #e9bbcc; border-radius: 12px; }
.graphics-notice { background: #fff7df; color: #73591b; border-color: #dfc582; }
.graphics-notice button { background: #ffedbd; color: #685016; border-color: #d5bb78; }
dialog::backdrop { background: #15284894; backdrop-filter: blur(7px); }

button:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, .runner-label select:focus-visible, #world:focus-visible {
  outline: 3px solid #5437bc; outline-offset: 4px;
}
button:hover:not(:disabled) { filter: brightness(1.045); }
button:disabled { cursor: not-allowed; }

@media (max-width: 850px) {
  .start-screen { padding: 20px; }
  .start-card { width: 350px; padding: 20px; }
}
@media (max-width: 700px) {
  body[data-phase="home"] .game { min-height: 0; }
  .start-screen { min-height: 0; padding: 18px; background: linear-gradient(90deg, #d7efff50, transparent); }
}
@media (max-width: 600px) {
  .shell { padding: 10px 8px; }
  .topbar { padding: 0 3px 9px; margin-bottom: 10px; }
  .brand-title { letter-spacing: .8px; }
  .game { border-radius: 18px; }
  .start-card { width: 340px; border-radius: 19px; }
  .start-screen { padding: 15px; }
  .start-card h1 { font-size: 30px; }
  .hud-cell { border-radius: 10px; }
  .pause { border-radius: 10px; }
  .bottom-bar { margin-top: 10px; }
  .results-card, dialog { border-radius: 18px; }
}
@media (max-width: 420px) {
  .shell { padding: 8px; }
  .topbar { padding-bottom: 8px; }
  .brand { gap: 7px; }
  .brand-title { font-size: 12px; letter-spacing: .6px; }
  .lca { font-size: 11px; padding: 8px; border-radius: 8px; }
  .quiet { font-size: 11px; padding: 8px; min-height: 36px; }
  .start-screen { padding: 10px; }
  .start-card { width: 100%; padding: 15px; border-radius: 16px; }
  .setup-kicker { margin-bottom: 7px; font-size: 9px; letter-spacing: 1.2px; }
  .start-card h1 { font-size: 28px; margin-bottom: 12px; letter-spacing: -1.1px; }
  .start-card .intro { display: none; }
  .start-card fieldset { margin-bottom: 12px; }
  .start-card legend { font-size: 11px; margin-bottom: 7px; }
  .start-card .table-options { gap: 4px; }
  .start-card .table-options button { min-height: 36px; font-size: 13px; border-radius: 7px; }
  .start-card .table-options button:last-child { font-size: 10px; }
  .runner-picker { grid-template-columns: 76px minmax(0, 1fr); gap: 8px; min-height: 84px; padding-right: 9px; margin-bottom: 12px; border-radius: 12px; }
  #runnerPreview { width: 76px; height: 84px; }
  .runner-picker .runner-label { font-size: 10px; gap: 5px; }
  .runner-picker select { min-height: 37px; font-size: 12px; padding: 5px; border-radius: 8px; }
  .start-card .start-button { min-height: 46px; font-size: 16px; border-radius: 10px; }
  .run-options { margin-top: 12px; }
  .run-options > summary { min-height: 32px; font-size: 11px; }
  .run-options > summary span { font-size: 10px; }
  .start-card .modes button { padding: 9px 7px; }
  .start-card .modes button b { font-size: 11px; }
  .start-card .modes button small { font-size: 10px; }
  .start-card .small-note { font-size: 10px; }
  .steer-group { gap: 5px; }
  .run-controls { gap: 6px; padding-left: 0; padding-right: 0; }
  .run-controls .steer-group button { width: 49px; }
  .run-controls p { font-size: 10px; max-width: 81px; }
}
@media (prefers-reduced-motion: reduce) {
  .start-screen, .start-card, .runner-picker { animation: none; }
  .start-card button { transition: none; }
}
body[data-motion="less"] .start-screen,
body[data-motion="less"] .start-card,
body[data-motion="less"] .runner-picker { animation: none; }
@media (forced-colors: active) {
  button, .game, .start-card, .runner-picker, .hud-cell, .equation-bar,
  .checkpoint, .results-card, dialog { border: 2px solid CanvasText; }
  .primary, .pause { forced-color-adjust: auto; }
  .table-options button[aria-pressed="true"], .modes button[aria-pressed="true"],
  .suit[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: -3px; }
}

/* Lane cues use the same neutral styling; selection never reveals correctness. */
#laneReadout{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:5px}#laneReadout[hidden]{display:none}#laneReadout span{font-size:11px;white-space:nowrap;text-align:center;padding:6px 4px;border:1px solid #839bbc;border-radius:6px;background:#eaf1ff;color:#17315c}#laneReadout span[data-selected="true"]{outline:2px solid #146b92;background:#caf6ff}#gateTiming,#masteryStatus{display:block;font-size:9px;font-weight:750;letter-spacing:.3px;margin-top:4px;color:#34527a}.equation-bar{width:min(430px,calc(100% - 24px))}.gate-choices{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.toast{top:auto;bottom:100px;pointer-events:none}#gateTiming:empty{display:none}@media(max-width:600px){#laneReadout span{font-size:9px;padding:5px 2px}#masteryStatus{font-size:8px}.toast{bottom:88px;max-width:90%}}

.voice-options{position:relative;font-size:12px}.voice-options summary{cursor:pointer;font-weight:750}.voice-panel{position:absolute;bottom:28px;right:0;z-index:30;display:grid;gap:8px;width:min(290px,80vw);padding:16px;background:#edf7ff;border:1px solid #76a4bc;border-radius:12px;box-shadow:0 10px 35px #19385944;color:#203b61}.voice-panel select,.voice-panel button{width:100%;padding:8px}.voice-panel small{line-height:1.4}.voice-panel input[type="range"]{width:100%}.play-settings{flex-wrap:wrap}