/*!
 * Note Racers — look.
 *
 * Bell Valley: a flat gold sky, olive hills and a clean grey road, straight off
 * the reference painting. The chrome around the canvas stays quiet and navy so
 * that the only saturated colour on the screen is the note colours — the cars,
 * the tokens and the gates. Colour IS the note here as everywhere else, so
 * nothing else is allowed to compete with it.
 */

:root {
  --nr-navy: #1b233e;
  --nr-ink: #1f1d1a;
  --nr-ink-soft: #4a463f;
  --nr-paper: #fdfbf6;
  --nr-gold: #e9b93a;
  --nr-gold-deep: #d7a52c;
  --nr-teal: #009999;
  --nr-teal-edge: #00706f;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; }

body {
  font-family: 'Nunito', 'Avenir Next Rounded', 'Trebuchet MS', sans-serif;
  color: var(--nr-ink);
  background: linear-gradient(180deg, var(--nr-gold) 0%, #f0c95c 46%, var(--nr-gold-deep) 100%);
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.nr-app {
  position: relative;
  width: min(1120px, 100%);
  min-width: 0;
  margin: 0 auto;
  padding: 14px 14px calc(20px + env(safe-area-inset-bottom));
  min-height: calc(100svh - 49px);
  display: grid;
  align-content: start;
}

.nr-mute {
  position: fixed;
  top: calc(54px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  z-index: 40;
  width: 42px; height: 42px;
  border: 0; border-radius: 999px;
  background: rgba(27, 35, 62, 0.55);
  color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.nr-mute svg { width: 22px; height: 22px; }
.nr-mute .icon-off { display: none; }
.nr-mute.is-muted .icon-on { display: none; }
.nr-mute.is-muted .icon-off { display: block; }

.nr-btn:focus-visible,
.nr-mode:focus-visible,
.nr-car:focus-visible,
.nr-mute:focus-visible { outline: 3px solid var(--nr-navy); outline-offset: 3px; }

/* ── Select screen ───────────────────────────────────────────────────────── */
.nr-select { display: grid; gap: 14px; justify-items: center; padding-top: 6px; }

.nr-head { text-align: center; }
.nr-title {
  margin: 0;
  font-size: clamp(32px, 7vw, 56px); font-weight: 900; color: var(--nr-navy);
  letter-spacing: -1.5px; line-height: 1;
}
.nr-sub {
  margin: 4px 0 0;
  font-size: clamp(13px, 2.6vw, 17px); font-weight: 800; color: #6a5417;
}

.nr-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: min(560px, 100%); }
.nr-mode {
  border: 0; cursor: pointer; font-family: inherit;
  background: var(--nr-paper); border-radius: 18px;
  padding: 12px 10px 11px;
  display: grid; gap: 2px; justify-items: center;
  box-shadow: 0 5px 0 rgba(27, 35, 62, 0.16), 0 10px 22px rgba(27, 35, 62, 0.12);
  transition: transform 0.12s cubic-bezier(.3, 1.4, .4, 1);
}
.nr-mode:hover { transform: translateY(-3px); }
.nr-mode:active { transform: translateY(1px); }
.nr-mode-emoji { font-size: 26px; line-height: 1; }
.nr-mode-name { font-size: 16px; font-weight: 900; color: var(--nr-navy); }
.nr-mode-blurb { font-size: 11.5px; font-weight: 700; color: var(--nr-ink-soft); }
.nr-mode.is-on { outline: 3px solid var(--nr-teal); outline-offset: -3px; }

.nr-pick-label {
  margin: 2px 0 0;
  font-size: 11px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase;
  color: #6a5417;
}

/* One row per octave-ish; wraps down to two-per-row on a phone. */
.nr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
  width: min(1000px, 100%);
}
.nr-car {
  position: relative;
  border: 0; cursor: pointer; font-family: inherit;
  background: var(--nr-paper); border-radius: 16px;
  padding: 8px 6px 6px;
  display: grid; justify-items: center; gap: 2px;
  box-shadow: 0 4px 0 rgba(27, 35, 62, 0.14), 0 8px 18px rgba(27, 35, 62, 0.10);
  transition: transform 0.12s cubic-bezier(.3, 1.4, .4, 1);
}
.nr-car:hover { transform: translateY(-3px); }
.nr-car:active { transform: translateY(1px); }
.nr-car canvas { width: 100%; height: auto; display: block; }
.nr-car-name { font-size: 13px; font-weight: 900; color: var(--nr-navy); line-height: 1.1; }
.nr-car.is-on { outline: 3px solid var(--nr-teal); outline-offset: -3px; }
.nr-car.is-on::after {
  content: "✓"; position: absolute; top: 5px; right: 7px;
  font-size: 13px; font-weight: 900; color: var(--nr-teal);
}

.nr-actions { display: grid; justify-items: center; gap: 6px; padding-bottom: 8px; }
.nr-btn {
  font-family: inherit; font-weight: 900; font-size: 16px;
  padding: 12px 26px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--nr-paper); color: var(--nr-navy);
  box-shadow: 0 4px 0 rgba(27, 35, 62, 0.18);
}
.nr-btn-primary { background: var(--nr-teal); color: #fff; box-shadow: 0 4px 0 var(--nr-teal-edge); }
.nr-btn-quiet { background: transparent; box-shadow: none; font-size: 14px; text-decoration: underline; }
.nr-btn:active { transform: translateY(2px); box-shadow: none; }
.nr-hint { margin: 0; font-size: 13px; font-weight: 700; color: #6a5417; text-align: center; }
.nr-hint strong { color: var(--nr-navy); letter-spacing: 0.5px; }

/* ── Race screen ─────────────────────────────────────────────────────────── */
/* width:100% matters: without it the section is sized BY the stage inside it,
   so measuring it to size the stage reads back the stage's own width and the
   canvas can only ever grow. */
.nr-game {
  display: grid; justify-items: center; align-content: center;
  width: 100%; min-width: 0;
  /* On a tall tablet the stage is capped by its aspect, so without this it
     pins to the top and leaves the bottom half of the screen empty. */
  min-height: calc(100svh - 120px);
}
.nr-stage {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: var(--nr-gold);
  box-shadow: 0 10px 30px rgba(27, 35, 62, 0.22);
  touch-action: none;                 /* the whole stage is the button */
  cursor: pointer;
}
.nr-stage canvas { display: block; width: 100%; height: 100%; }

/* HUD */
/* The right inset clears the fixed mute button, which floats over this corner. */
.nr-hud {
  position: absolute; inset: 8px 58px auto 10px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  pointer-events: none;
}
.nr-hud-left { display: flex; gap: 6px; flex-wrap: wrap; }
.nr-hud-right { display: grid; gap: 5px; justify-items: end; }

.nr-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  background: rgba(27, 35, 62, 0.62); color: #fff;
  border-radius: 999px; padding: 5px 11px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.nr-chip b { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.nr-chip small { font-size: 10px; font-weight: 800; opacity: 0.8; letter-spacing: 0.5px; }
.nr-chip-dist b { font-size: 21px; }

.nr-meter { display: grid; gap: 2px; justify-items: end; }
.nr-meter-label {
  font-size: 9px; font-weight: 900; letter-spacing: 1.6px; color: #fff;
  text-shadow: 0 1px 3px rgba(27, 35, 62, 0.6);
}
.nr-bar {
  width: clamp(90px, 18vw, 150px); height: 10px; border-radius: 999px;
  background: rgba(27, 35, 62, 0.45); overflow: hidden;
}
.nr-bar i { display: block; height: 100%; width: 0%; background: #fff; border-radius: 999px; transition: width 0.1s linear; }
.nr-bar-rainbow i {
  background: linear-gradient(90deg, #e72829, #f39422, #f1e606, #6abb4a, #099695, #7b569e, #ea6ba3);
}
.nr-meter-boost.is-full .nr-bar { box-shadow: 0 0 0 2px #fff, 0 0 14px rgba(255, 255, 255, 0.8); }

/* Overlays */
.nr-overlay {
  position: absolute; inset: 0;
  display: grid; align-content: center; justify-items: center; gap: 6px;
  background: rgba(27, 35, 62, 0.30);
  text-align: center; padding: 20px;
  pointer-events: none;
}
.nr-overlay-big {
  font-size: clamp(28px, 6vw, 46px); font-weight: 900; color: #fff;
  letter-spacing: -0.5px; text-shadow: 0 4px 14px rgba(27, 35, 62, 0.5);
}
.nr-overlay-small { font-size: clamp(12px, 2.4vw, 15px); font-weight: 800; color: #fff; opacity: 0.95; }
.nr-overlay-small em { font-style: normal; text-decoration: underline; }

.nr-boost-flash {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none;
}
.nr-boost-flash span {
  font-size: clamp(22px, 5vw, 40px); font-weight: 900; color: #fff;
  letter-spacing: 1px; text-shadow: 0 4px 16px rgba(27, 35, 62, 0.55);
  animation: nr-pop 900ms ease-out forwards;
}
@keyframes nr-pop {
  0% { transform: scale(0.6); opacity: 0; }
  25% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1.2); opacity: 0; }
}

/* Results */
.nr-veil {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(27, 35, 62, 0.55); padding: 12px;
}
/* The card is taller than the stage once the class-code widget is in it, so
   the CARD scrolls rather than the veil — otherwise "Race Again" ends up
   below the canvas with nothing to scroll it into view. */
.nr-card {
  background: var(--nr-paper); border-radius: 22px;
  padding: 16px 18px 18px; width: min(420px, 100%);
  max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  text-align: center; display: grid; gap: 9px; align-content: start;
  box-shadow: 0 18px 44px rgba(27, 35, 62, 0.35);
}
.nr-card h2 { margin: 0; font-size: 24px; font-weight: 900; color: var(--nr-navy); letter-spacing: -0.5px; }
.nr-res-car { display: flex; align-items: center; justify-content: center; gap: 8px; }
.nr-res-car img { width: 46px; height: 46px; object-fit: contain; }
.nr-res-car span { font-size: 17px; font-weight: 900; color: var(--nr-ink-soft); }
.nr-big { display: grid; gap: 0; }
.nr-big span { font-size: 46px; font-weight: 900; color: var(--nr-teal); line-height: 1; font-variant-numeric: tabular-nums; }
.nr-big small { font-size: 11px; font-weight: 900; letter-spacing: 2.4px; color: var(--nr-ink-soft); }
.nr-best-badge {
  justify-self: center; background: #ffd25b; color: #6a5417;
  font-size: 12px; font-weight: 900; letter-spacing: 1px;
  padding: 5px 14px; border-radius: 999px;
}
.nr-res-stats { margin: 0; display: grid; gap: 4px; }
.nr-res-stats > div { display: flex; justify-content: space-between; font-size: 14px; }
.nr-res-stats dt { font-weight: 800; color: var(--nr-ink-soft); margin: 0; }
.nr-res-stats dd { margin: 0; font-weight: 900; color: var(--nr-navy); font-variant-numeric: tabular-nums; }
.nr-card-actions { display: grid; gap: 7px; justify-items: center; }
.nr-card-actions .nr-btn { width: 100%; }

@media (max-width: 520px) {
  .nr-modes { grid-template-columns: 1fr; }
  .nr-grid { grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); }
  .nr-hud-right { display: none; }   /* the world speeding up IS the speedo */
}

@media (prefers-reduced-motion: reduce) {
  .nr-boost-flash span { animation-duration: 1ms; }
  .nr-mode, .nr-car { transition: none; }
}