/*!
 * Note Racers v2 — the cover's raceway over the same game (with js/kid-kit.js).
 * Colours from the cover (covers/note-racers/scene.js): sky #8fd6f4, hills
 * #a9dbc4 / #f2c869, road #3b4257 with white dashes, field #e6b44a. The engine
 * draws the race in the same palette (window.NR_SKIN = "v2").
 */
body.is-v2 { background: #8fd6f4; }
.nr-v2-scenery { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.nr-v2-scenery .kk-scene { position: absolute; inset: 0; }
body.is-v2 .nr-app { z-index: 1; }

/* the game's own racer select stays in the page (the kit presses its buttons) but is never seen */
html.kk-menu-on body.is-v2 { overflow: hidden; }
body.is-v2 #nrSelect { visibility: hidden; }

/* the Cars button shows your car (the game's own sprite) */
body.is-v2 .kk-btn { container-type: inline-size; }
body.is-v2 .kk-ico:has(.v2-car-ico) { width: 80%; height: auto; }
body.is-v2 .kk-ico .v2-car-ico { width: 100%; max-width: none; height: auto; filter: drop-shadow(0 4px 0 rgba(27, 35, 62, 0.22)); }

/* three big buttons fill a tablet's width: your racer's bell leans in only
   where there is room beside them (the kit's hero is wide screens only too) */
@media (max-width: 1179px) { body.is-v2 .v2-hero { display: none; } }
/* an upright phone: three buttons in one row */
@media (orientation: portrait) and (max-width: 700px) {
  body.is-v2 .kk-big { gap: 10px; flex-wrap: nowrap; }
  body.is-v2 .kk-big:has(.kk-btn:nth-child(3)) .kk-btn { width: min(28vw, 150px); }
}

/* ── the Cars view: 13 racers as big picture tiles ──────────────────────── */
.kk-menu .v2-cars { display: none; }
.kk-menu[data-view="cars"] .kk-front,
.kk-menu[data-view="cars"] .kk-hero { display: none; }
.kk-menu[data-view="cars"] .v2-cars {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  position: absolute; inset: 70px 12px 84px; z-index: 2;
}
.v2-cars-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 16px);
  width: min(1040px, 100%);
}
.v2-car {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  aspect-ratio: 1 / 0.92; padding: 6px; border: 0; border-radius: 22px; cursor: pointer;
  background: rgba(255, 255, 255, 0.94); color: #1b233e; font: inherit;
  box-shadow: 0 6px 0 rgba(27, 35, 62, 0.14);
  transition: transform 0.12s ease;
}
.v2-car:active { transform: scale(0.95); }
.v2-car.is-on { box-shadow: 0 0 0 5px #1b233e, 0 6px 0 rgba(27, 35, 62, 0.14); }
.v2-car-pic { width: 100%; height: auto; display: block; }
.v2-car b { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-size: clamp(14px, 1.9vw, 22px); line-height: 1; }
.v2-cars-go {
  display: grid; place-items: center; width: 92px; height: 92px; border: 0; border-radius: 50%; cursor: pointer;
  background: #e72829; box-shadow: 0 7px 0 #b51d1e; animation: kk-float 3s ease-in-out infinite;
}
.v2-cars-go svg { width: 44px; height: 44px; margin-left: 6px; }
.v2-cars-go:active { transform: scale(0.95); }
@media (max-width: 900px) {
  .v2-cars-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (orientation: portrait) and (max-width: 700px) {
  .kk-menu[data-view="cars"] .v2-cars { inset: 110px 12px 90px; }
  .v2-cars-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v2-car { border-radius: 18px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .kk-menu[data-view="cars"] .v2-cars { inset: 62px 84px 12px; gap: 10px; flex-direction: row; }
  .v2-cars-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .v2-car { border-radius: 14px; padding: 3px; }
  .v2-cars-go { width: 72px; height: 72px; flex: none; }
}

/* ── Race: the stage as a window on the raceway ─────────────────────────── */
body.is-v2 .nr-stage { background: #8fd6f4; border: 5px solid #fff; border-radius: 28px; box-shadow: 0 8px 0 rgba(27, 35, 62, 0.14); }

/* light HUD pills instead of dark slabs */
body.is-v2 .nr-chip {
  background: rgba(255, 255, 255, 0.94); color: #1b233e;
  box-shadow: 0 3px 0 rgba(27, 35, 62, 0.12);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.is-v2 .nr-chip b { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; }
body.is-v2 .nr-chip small { color: #6a7392; opacity: 1; }
body.is-v2 .nr-hud-right { padding: 6px 10px 7px; border-radius: 16px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 3px 0 rgba(27, 35, 62, 0.12); }
body.is-v2 .nr-meter-label { color: #6a7392; text-shadow: none; }
body.is-v2 .nr-bar { background: #e3e8f2; }
body.is-v2 .nr-bar i { background: #1b233e; }
/* the boost meter: the bells' colours as flat stripes */
body.is-v2 .nr-bar-rainbow i {
  background: linear-gradient(90deg, #e72829 0 14.3%, #f39422 0 28.6%, #f1e606 0 42.9%, #6abb4a 0 57.1%, #099695 0 71.4%, #7b569e 0 85.7%, #ea6ba3 0);
}

/* big words in Grobold small caps, like the title */
body.is-v2 .nr-overlay { background: rgba(27, 35, 62, 0.18); }
body.is-v2 .nr-overlay-big,
body.is-v2 .nr-boost-flash span {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400;
  font-variant-caps: small-caps; letter-spacing: 0; text-transform: lowercase;
  text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.4);
}
body.is-v2 .nr-overlay-big::first-letter,
body.is-v2 .nr-boost-flash span::first-letter { text-transform: uppercase; }
body.is-v2 .nr-overlay-small { text-shadow: 0 1px 0 rgba(27, 35, 62, 0.4); }

/* ── Results: a soft card, a Grobold title, chunky buttons ──────────────── */
body.is-v2 .nr-veil { background: rgba(27, 35, 62, 0.34); }
body.is-v2 .nr-card { border-radius: 30px; box-shadow: 0 20px 50px rgba(27, 35, 62, 0.3); }
body.is-v2 .nr-card h2 {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400;
  font-variant-caps: small-caps; text-transform: lowercase; letter-spacing: 0;
  font-size: clamp(28px, 6vw, 36px); color: #e72829; text-shadow: 0 0.07em 0 #b51d1e;
}
body.is-v2 .nr-card h2::first-letter { text-transform: uppercase; }
body.is-v2 .nr-big span { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; color: #009999; }
body.is-v2 .nr-card .nr-btn { min-height: 50px; }
body.is-v2 .nr-btn-primary { background: #6ab845; box-shadow: 0 5px 0 #4c8f30; }
body.is-v2 .nr-card-actions .nr-btn:not(.nr-btn-primary):not(.nr-btn-quiet) { background: #7b569e; color: #fff; box-shadow: 0 5px 0 #5d3f7c; }

/* the results cover the whole screen, not just the stage, so an upright phone
   (where the stage is a short strip) still shows the whole card */
body.is-v2 .nr-veil { position: fixed; z-index: 30; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
body.is-v2 .nr-card { max-height: calc(100svh - 32px); }

/* a phone held sideways: the card goes two columns (the result left, the buttons right) */
@media (max-height: 500px) and (orientation: landscape) {
  body.is-v2 .nr-card {
    width: min(640px, 100%); padding: 12px 18px 10px; gap: 6px 18px;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "t t" "b a" "n a" "s a" "x x" "e e";
  }
  body.is-v2 .nr-card h2 { grid-area: t; font-size: 28px; }
  body.is-v2 .nr-res-car { display: none; }
  body.is-v2 .nr-big { grid-area: b; }
  body.is-v2 .nr-best-badge { grid-area: n; }
  body.is-v2 .nr-res-stats { grid-area: s; align-self: start; }
  body.is-v2 #nrScoreSlot { grid-area: x; }
  body.is-v2 .nr-card-actions { grid-area: a; align-content: start; }
  body.is-v2 .nr-card .pgc-exit { grid-area: e; }
  body.is-v2 .nr-card .nr-btn { min-height: 46px; padding: 10px 16px; }
}