/* Direction: sunny cartoon arcade — sky blue, chunky navy outlines, orange play button */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #bfe3fb;
  --surface: #e2f2fd;
  --surface-2: #b7d9ef;
  --border: #a9c6d8;
  --border-strong: #91a5b1;
  --ink: #14214d;
  --muted: #455672;
  --accent: #ff8a1f;
  --accent-hover: #d9751a;
  --accent-ink: #241304;
  --accent-text: #9b3f00;
  --accent-strong: #844710;
  --accent-soft: #c8d7dc;
  --accent-border: #dcbb98;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #abd7e4;
  --success-strong: #106430;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #bed2de;
  --warning-strong: #8d4006;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #becbe0;
  --danger-strong: #9c1818;
  --chart-1: #b96316;
  --chart-2: #788212;
  --chart-3: #147663;
  --chart-4: #1983b4;
  --chart-5: #6a4fa7;
  --chart-6: #c15c87;

  --font-display: "Lilita One", "Baloo 2", system-ui, sans-serif;
  --font-body: "Baloo 2", system-ui, sans-serif;
  --radius-card: 24px;
  --radius-btn: 999px;
  --x-navy: #14214d;
  --x-orange: #ff8a1f;
  --x-orange-light: #ffb347;
  --x-orange-dark: #d9650b;
  --x-yellow: #ffd23f;
  --x-cream: #fff6dd;
  --x-sky: #5bb8ff;
  --x-blue: #2f8cff;
  --x-teal: #19b5a5;
  --x-gold: #ffc61a;
  --x-on-photo: #ffffff;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Baloo 2", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #100903;
  --surface: #28221c;
  --surface-2: #1c1510;
  --border: #312b26;
  --border-strong: #58534f;
  --ink: #bfe3fb;
  --muted: #798c98;
  --accent: #ff8a1f;
  --accent-hover: #ff9c41;
  --accent-ink: #241304;
  --accent-text: #ff8a1f;
  --accent-strong: #ff8a1f;
  --accent-soft: #452509;
  --accent-border: #7c4310;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #112310;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #341904;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #350d09;
  --danger-strong: #d16969;
  --chart-1: #ff8a1f;
  --chart-2: #baca1d;
  --chart-3: #29ab91;
  --chart-4: #6cc9fe;
  --chart-5: #9c76f0;
  --chart-6: #fd9bc1;
}

html, body { height: 100%; overscroll-behavior: none; }
body {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--x-navy);
}
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---------- screens ---------- */
.screen {
  position: fixed; inset: 0; display: none; flex-direction: column; align-items: center;
  padding: max(20px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  pointer-events: none; z-index: 10; overflow: hidden;
}
.screen > *, .hud > * { pointer-events: auto; }
body:not([data-mode]) #start, body[data-mode="menu"] #start { display: flex; }
body[data-mode="pause"] #pause { display: flex; justify-content: center; }
body[data-mode="over"] #over { display: flex; justify-content: center; }
.scrim { background: color-mix(in srgb, var(--x-navy) 38%, transparent); pointer-events: auto; }
.grow { flex: 1; }

.hud { position: fixed; z-index: 9; inset: 0 0 auto 0; display: none; align-items: flex-start; justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) 14px 0; pointer-events: none; }
body[data-mode="play"] .hud, body[data-mode="pause"] .hud { display: flex; }

/* ---------- logo ---------- */
.logo { display: flex; flex-direction: column; align-items: center; line-height: .82; margin-top: 2vh; transform: rotate(-5deg);
  font-family: var(--font-display); font-weight: 400; letter-spacing: .02em; }
.logo-metro, .logo-rush {
  font-size: clamp(64px, 17vw, 150px);
  -webkit-text-stroke: clamp(8px, 1.6vw, 14px) var(--x-navy);
  paint-order: stroke fill;
  text-shadow: 0 .06em 0 var(--x-navy), 0 .1em 0 var(--x-navy);
}
.logo-metro { color: var(--x-on-photo); }
.logo-rush { color: var(--x-yellow); font-size: clamp(76px, 21vw, 184px); margin-top: .02em; transform: translateX(.04em); }
.tagline {
  margin-top: clamp(14px, 3vh, 26px); font-size: clamp(18px, 4.4vw, 26px); font-weight: 800; text-align: center;
  color: var(--x-navy); background: var(--x-cream); border: 3px solid var(--x-navy); border-radius: 999px; padding: 2px 18px 0;
  box-shadow: 0 4px 0 var(--x-navy);
}
.start-bottom { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 520px; }

/* ---------- buttons ---------- */
.btn-play, .btn-big, .btn-alt, .hud-pause {
  font-family: var(--font-display); cursor: pointer; border: 5px solid var(--x-navy);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-play {
  font-size: clamp(40px, 10vw, 62px); letter-spacing: .05em; color: var(--x-on-photo); line-height: 1;
  background: linear-gradient(var(--x-orange-light), var(--x-orange) 60%, var(--x-orange-dark));
  border-radius: 999px; padding: .18em 1.5em .26em; box-shadow: 0 8px 0 var(--x-navy);
  text-shadow: 0 3px 0 var(--x-navy); -webkit-text-stroke: 2px var(--x-navy); paint-order: stroke fill;
  animation: playPulse 1.6s ease-in-out infinite;
}
@keyframes playPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.btn-play:hover, .btn-big:hover, .btn-alt:hover { filter: brightness(1.06); }
.btn-play:active, .btn-big:active, .btn-alt:active { transform: translateY(6px) scale(1); box-shadow: 0 2px 0 var(--x-navy); animation: none; }
.btn-play:focus-visible, .btn-big:focus-visible, .btn-alt:focus-visible, .hud-pause:focus-visible, .snd:focus-visible, .btn-link:focus-visible {
  outline: 4px solid var(--x-yellow); outline-offset: 3px;
}
.btn-big, .btn-alt {
  font-size: 30px; border-radius: 999px; padding: .12em 1.2em .2em; width: 100%; line-height: 1.1; box-shadow: 0 6px 0 var(--x-navy);
}
.btn-big { color: var(--x-on-photo); background: linear-gradient(var(--x-orange-light), var(--x-orange) 60%, var(--x-orange-dark)); text-shadow: 0 2px 0 var(--x-navy); }
.btn-alt { color: var(--x-navy); background: var(--x-yellow); }
.btn-link {
  font-family: var(--font-body); font-weight: 800; font-size: 20px; color: var(--x-navy); background: transparent; border: 0;
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer; padding: 4px 10px;
}
.btn-link:hover { color: var(--x-orange-dark); }

.best-pill {
  font-size: 22px; font-weight: 800; background: var(--x-cream); border: 3px solid var(--x-navy); border-radius: 999px; padding: 0 18px;
  box-shadow: 0 4px 0 var(--x-navy);
}
.best-pill b { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--x-orange-dark); }

/* ---------- sound switch ---------- */
.snd { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; background: var(--x-cream); color: var(--x-navy);
  border: 3px solid var(--x-navy); border-radius: 999px; padding: 3px 16px 3px 6px; font-size: 18px; font-weight: 800; box-shadow: 0 4px 0 var(--x-navy); }
.snd-track { width: 46px; height: 26px; border-radius: 999px; background: var(--x-teal); border: 3px solid var(--x-navy); position: relative; transition: background .15s; }
.snd-knob { position: absolute; top: 50%; left: 100%; width: 18px; height: 18px; border-radius: 50%; background: var(--x-cream);
  border: 3px solid var(--x-navy); transform: translate(calc(-100% - 1px), -50%); transition: left .15s, transform .15s; box-sizing: border-box; }
.snd[aria-pressed="false"] .snd-track { background: var(--x-cream); }
.snd[aria-pressed="false"] .snd-knob { left: 0; transform: translate(1px, -50%); }

/* ---------- controls bar ---------- */
.controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 14px; font-weight: 800; color: var(--x-navy);
  background: color-mix(in srgb, var(--x-cream) 88%, transparent); border: 3px solid var(--x-navy); border-radius: 18px; padding: 4px 14px; }
.controls kbd { display: inline-block; min-width: 22px; text-align: center; font-family: var(--font-display); font-size: 14px; margin-right: 3px;
  background: var(--x-yellow); border: 2px solid var(--x-navy); border-radius: 6px; padding: 0 5px; }
.touch-hint { color: var(--x-orange-dark); }

/* ---------- HUD ---------- */
.hud-coins {
  display: flex; align-items: center; gap: 8px; min-width: 84px; font-family: var(--font-display); font-size: 28px; line-height: 1;
  background: var(--x-cream); border: 4px solid var(--x-navy); border-radius: 999px; padding: 5px 16px 5px 8px; box-shadow: 0 4px 0 var(--x-navy);
}
.coin-ico { width: 28px; height: 28px; fill: var(--x-gold); stroke: var(--x-navy); stroke-width: 1.6; stroke-linejoin: round; }
.hud-mid { position: absolute; left: 50%; top: max(8px, env(safe-area-inset-top)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hud-score { font-family: var(--font-display); font-size: clamp(48px, 12vw, 76px); line-height: 1; color: var(--x-on-photo);
  -webkit-text-stroke: 8px var(--x-navy); paint-order: stroke fill; text-shadow: 0 5px 0 var(--x-navy); }
.hud-score small { font-size: .42em; margin-left: 4px; }
.hud-shield { display: none; align-items: center; gap: 6px; font-size: 18px; font-weight: 800; color: var(--x-on-photo);
  background: var(--x-blue); border: 3px solid var(--x-navy); border-radius: 999px; padding: 0 14px 0 8px; box-shadow: 0 3px 0 var(--x-navy); }
.hud-shield.on { display: inline-flex; animation: shieldPulse 1s ease-in-out infinite; }
.hud-shield .icon { width: 20px; height: 20px; }
@keyframes shieldPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.hud-pause { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--x-on-photo);
  background: linear-gradient(var(--x-orange-light), var(--x-orange)); box-shadow: 0 4px 0 var(--x-navy); padding: 0; }
.hud-pause .icon { width: 26px; height: 26px; stroke-width: 3; }
.hud-pause:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--x-navy); }

/* ---------- panels ---------- */
.panel {
  align-self: center; margin: auto 0; width: min(92vw, 400px); background: var(--x-cream); border: 5px solid var(--x-navy); border-radius: 30px;
  box-shadow: 0 10px 0 var(--x-navy); padding: 26px 22px 22px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  animation: panelIn .28s ease-out;
}
@keyframes panelIn { from { transform: translateY(24px) scale(.96); } to { transform: none; } }
.panel-title { font-family: var(--font-display); font-weight: 400; font-size: 46px; line-height: 1; letter-spacing: .03em; }
.panel-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }

.ribbon { position: relative; margin: -50px 0 4px; transform: rotate(-3deg); }
.ribbon span {
  display: block; position: relative; z-index: 2; font-family: var(--font-display); font-size: clamp(34px, 9vw, 46px); letter-spacing: .05em; line-height: 1;
  color: var(--x-on-photo); background: linear-gradient(var(--x-orange-light), var(--x-orange)); border: 5px solid var(--x-navy);
  padding: 8px 26px 10px; text-shadow: 0 3px 0 var(--x-navy); box-shadow: 0 6px 0 var(--x-navy);
}
.ribbon::before, .ribbon::after {
  content: ""; position: absolute; top: 14px; width: 44px; height: 100%; background: var(--x-orange-dark); border: 5px solid var(--x-navy); z-index: 1;
}
.ribbon::before { left: -26px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 28% 50%); }
.ribbon::after { right: -26px; clip-path: polygon(0 0, 100% 0, 72% 50%, 100% 100%, 0 100%); }
.newbest {
  display: none; font-family: var(--font-display); font-size: 22px; letter-spacing: .04em; color: var(--x-navy); background: var(--x-yellow);
  border: 4px solid var(--x-navy); border-radius: 999px; padding: 2px 18px 4px; transform: rotate(2deg); box-shadow: 0 4px 0 var(--x-navy);
  animation: badgePop .8s ease-in-out infinite alternate;
}
.newbest.on { display: block; }
@keyframes badgePop { from { transform: rotate(2deg) scale(1); } to { transform: rotate(-2deg) scale(1.08); } }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.stat { background: var(--x-on-photo); border: 3px solid var(--x-navy); border-radius: 18px; padding: 4px 8px 6px; text-align: center; line-height: 1.05; }
.stat small { display: block; font-size: 15px; font-weight: 800; color: var(--x-orange-dark); text-transform: uppercase; letter-spacing: .08em; }
.stat b { font-family: var(--font-display); font-weight: 400; font-size: 30px; }
.stat-main { grid-column: 1 / -1; background: var(--x-sky); }
.stat-main small { color: var(--x-navy); }
.stat-main b { font-size: 54px; color: var(--x-on-photo); -webkit-text-stroke: 6px var(--x-navy); paint-order: stroke fill; text-shadow: 0 4px 0 var(--x-navy); }

@media (max-height: 640px) {
  .logo-metro { font-size: 56px; } .logo-rush { font-size: 68px; }
  .controls { display: none; }
}
html.reduced-motion .btn-play, html.reduced-motion .hud-shield.on, html.reduced-motion .newbest, html.reduced-motion .panel { animation: none; }