/*!
 * Pitch Trainer v2 — the cover's twilight over the same bundle (with js/kid-kit.js).
 * From covers/pitch-trainer/scene.js: lilac sky #a9b4ec, dusk hills #8b84cc /
 * #6c64b2, a cream moon and stars, High C the hero. The bundle's three skins
 * keep their idea (Quest twilight, Island sun and sand, Lab night) as flat
 * scenes; every panel becomes a white card. No gradients, no blur.
 */
html:has(body.is-v2), body.is-v2 { background: #a9b4ec; }
html:has(body.is-v2[data-v2-skin="island"]), body.is-v2[data-v2-skin="island"] { background: #8fd6f4; }
html:has(body.is-v2[data-v2-skin="lab"]), body.is-v2[data-v2-skin="lab"] { background: #173a57; }
.v2-world { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.v2-scene { position: absolute; inset: 0; display: none; }
.v2-scene .kk-scene { position: absolute; inset: 0; }
/* behind the game the moon would sit under the title (top left): the stars keep the twilight */
.v2-scene .kk-moon { display: none; }
body.is-v2:not([data-v2-skin]) .v2-scene[data-v2-skin="quest"],
body.is-v2[data-v2-skin="quest"] .v2-scene[data-v2-skin="quest"],
body.is-v2[data-v2-skin="island"] .v2-scene[data-v2-skin="island"],
body.is-v2[data-v2-skin="lab"] .v2-scene[data-v2-skin="lab"] { display: block; }
body.is-v2 #root { position: relative; z-index: 1; }
html.kk-menu-on body.is-v2 { overflow: hidden; }

.kk-btn .kk-ico svg { filter: drop-shadow(0 3px 0 rgba(27, 35, 62, 0.18)); }
/* the twilight front: the stones' road in cream */
.kk-theme-night .kk-road path { stroke: #fff6d8; }

/* ── The skins, flat: white cards on the scene ──────────────────────────── */
body.is-v2 .app[data-skin] {
  --skin-bg: transparent; --skin-scenery: none;
  --skin-panel: #fff; --skin-panel-border: transparent;
  --skin-title: #fff; --skin-ink: #1b233e; --skin-caption: #6a7392;
  --skin-track: rgba(255, 255, 255, 0.6); --skin-veil: rgba(246, 248, 252, 0.9);
}
body.is-v2 .app[data-skin="quest"] { --skin-accent: #ea6ba3; }
body.is-v2 .app[data-skin="island"] { --skin-accent: #6abb4a; }
body.is-v2 .app[data-skin="lab"] { --skin-accent: #009999; }

body.is-v2 .app[data-skin] .app-bar-title h1 {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps;
  font-size: clamp(30px, 4.4vw, 44px); letter-spacing: 0; line-height: 1;
  text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.3);
}
body.is-v2 .app[data-skin] .app-bar-sub {
  display: inline-block; margin-top: 6px; padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); color: #1b233e; box-shadow: 0 3px 0 rgba(27, 35, 62, 0.12);
}
body.is-v2 .menu-trigger, body.is-v2 .app[data-skin] .done-btn {
  border: 0; border-radius: 999px; background: #fff; color: #1b233e; min-height: 46px; padding: 0 16px;
  box-shadow: 0 4px 0 rgba(27, 35, 62, 0.14);
}
body.is-v2 .menu-trigger.is-open { background: #1b233e; color: #fff; }
body.is-v2 .menu-panel { border: 0; border-radius: 22px; box-shadow: 0 16px 40px rgba(27, 35, 62, 0.3); }

body.is-v2 .app[data-skin] .score-block, body.is-v2 .app[data-skin] .streak-block {
  border: 0; border-radius: 20px; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.12);
}
body.is-v2 .app[data-skin] .score-value, body.is-v2 .app[data-skin] .streak-value { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; }
body.is-v2 .app[data-skin] .streak-block.is-hot { background: #fff6ed; }
body.is-v2 .app[data-skin] .level-progress { border-radius: 999px; }
body.is-v2 .app[data-skin] .level-progress-fill { border-radius: 999px; }

body.is-v2 .app[data-skin] .mic-panel { border: 0; border-radius: 26px; box-shadow: 0 5px 0 rgba(27, 35, 62, 0.12); }
body.is-v2 .app[data-skin] .target-rail { border-radius: 26px; box-shadow: 0 5px 0 rgba(27, 35, 62, 0.12); }
body.is-v2 .app[data-skin] .mic-status,
body.is-v2 .app[data-skin] .hold-count { color: #1b233e; }
body.is-v2 .app[data-skin] .panel-head h2,
body.is-v2 .app[data-skin] .rail-label { color: #8a93ad; }
/* the lane: light; the bundle's own in-tune tint (inline) still wins */
body.is-v2 .app[data-skin] .pitch-lane { background: #f6f8fc; border: 2px solid #e3e8f2; border-radius: 18px; }
body.is-v2 .app[data-skin] .mic-cta-hint { color: #6a7392; }
body.is-v2 .start-mic-btn {
  gap: 12px; padding: 16px 34px 16px 28px;
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-size: clamp(22px, 2.6vw, 28px);
  text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.28);
  box-shadow: 0 6px 0 #007474;
  animation: kk-float 3s ease-in-out infinite;
}
body.is-v2 .start-mic-btn:active { box-shadow: 0 2px 0 #007474; }
body.is-v2 .start-mic-icon { width: 28px; height: 28px; }
body.is-v2 .mic-stop { border-radius: 999px; }
/* the note name stays in Nunito: Grobold has no proper # (the labels read "G#/Ab") */
body.is-v2 .rail-note { font-weight: 900; font-size: 1.6rem; }
body.is-v2 .rail-btn { border-radius: 16px; min-height: 44px; font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-size: 15px; color: #1b233e; border-color: #e3e8f2; box-shadow: 0 3px 0 rgba(27, 35, 62, 0.1); }
body.is-v2 .rail-btn.primary { color: #fff; box-shadow: 0 4px 0 #007474; }

/* the rail's bell is the living rig (React's picture stays underneath as the fallback) */
body.is-v2 .bell-button { position: relative; }
body.is-v2 .bell-button.v2-rigged .bell-image { visibility: hidden; }
.v2-rail-rig { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* ── Cards over the game: a session's end and a level's end ─────────────── */
body.is-v2 .session-veil { background: rgba(27, 35, 62, 0.42); }
body.is-v2 .session-card, body.is-v2 .level-celebration-card { border: 0; border-radius: 30px; background: #fdfbf6; box-shadow: 0 20px 50px rgba(15, 12, 40, 0.35); }
body.is-v2 .session-card h2, body.is-v2 .level-celebration-card h2 {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps; text-transform: lowercase;
  font-size: clamp(30px, 6vw, 40px); line-height: 1; letter-spacing: 0; color: #E72829; text-shadow: 0 0.07em 0 #b31d1e;
}
body.is-v2 .session-card h2::first-letter, body.is-v2 .level-celebration-card h2::first-letter { text-transform: uppercase; }
body.is-v2 .session-primary { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; border-radius: 18px; }
body.is-v2 .completion-banner, body.is-v2 .note-suggestion { background: #fff; border: 0; border-radius: 22px; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.12); }

@media (prefers-reduced-motion: reduce) {
  body.is-v2 .start-mic-btn { animation: none; }
}