/*!
 * Sing the Interval v2 — the cover's sky over the same game (with js/kid-kit.js).
 * From covers/sing-the-interval/scene.js: sky #8fd6f4, hills #a9dbc4 / #9dd25f,
 * E (yellow) the hero, the staff on white, the voice ribbon in the target's
 * colour. Flat: no gradients, no blur. The staff itself is the Compose
 * renderer's and is never restyled (the music must stay right).
 */
html:has(body.is-v2), body.is-v2 { background: #8fd6f4; }
.v2-world { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.v2-world .kk-scene { position: absolute; inset: 0; }
body.is-v2 #game { position: relative; z-index: 1; }

/* the game's own menu 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 .si-menu { visibility: hidden; }

.kk-stone.kk-nope { animation: v2-nope 0.36s ease-in-out; }
@keyframes v2-nope { 25% { translate: calc(-50% - 6px) -50%; } 75% { translate: calc(-50% + 6px) -50%; } }
.kk-btn .kk-ico svg { filter: drop-shadow(0 3px 0 rgba(27, 35, 62, 0.18)); }

/* ── Play: light pills and white cards on the sky ───────────────────────── */
body.is-v2 .si-hud { flex-wrap: wrap; }
/* above 901px the column starts at the top, under the chrome's Menu pill and pause button: step the HUD in */
@media (min-width: 901px) { body.is-v2 .si-hud { padding: 0 66px 0 104px; } }
body.is-v2 .si-quit, body.is-v2 .si-progress {
  background: rgba(255, 255, 255, 0.92); border-radius: 999px; color: #1b233e;
  min-height: 40px; padding: 0 16px; display: inline-flex; align-items: center;
  box-shadow: 0 3px 0 rgba(27, 35, 62, 0.12);
}
body.is-v2 .si-dots:not(:empty) { background: rgba(255, 255, 255, 0.92); border-radius: 999px; padding: 9px 12px; box-shadow: 0 3px 0 rgba(27, 35, 62, 0.12); }
body.is-v2 .si-dots i { width: 11px; height: 11px; }

body.is-v2 .si-ask {
  width: fit-content; max-width: 100%; margin: 0 auto 6px;
  background: #fff; border-radius: 26px; padding: 8px 22px 9px;
  box-shadow: 0 4px 0 rgba(27, 35, 62, 0.12); color: #1b233e;
}
body.is-v2 .si-ask b { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; color: var(--target, #1b233e); text-shadow: 0 1px 0 rgba(27, 35, 62, 0.25); }
body.is-v2 .si-anyoctave { color: #1b233e; opacity: 0.75; }

body.is-v2 .si-staffcard, body.is-v2 .si-mic, body.is-v2 .si-rail {
  background: #fff; border: 0; border-radius: 26px; box-shadow: 0 5px 0 rgba(27, 35, 62, 0.12);
}
/* the rail keeps its note-coloured ring: the target's colour is the lesson */
body.is-v2 .si-rail { box-shadow: 0 0 0 4px var(--target, #e3e8f2), 0 9px 0 rgba(27, 35, 62, 0.12); }
body.is-v2 .si-rail-note { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; text-shadow: 0 0.06em 0 rgba(27, 35, 62, 0.2); }
body.is-v2 .si-mystery { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; color: #7B569E; opacity: 0.7; }
body.is-v2 .si-mic-head h2, body.is-v2 .si-rail-label { color: #8a93ad; }
body.is-v2 .si-lane { background: #f6f8fc; border: 2px solid #e3e8f2; border-radius: 18px; }
body.is-v2 .si-lane.is-in-tune { border-color: var(--target, #6ab845); }
body.is-v2 .si-mic-cta { background: rgba(246, 248, 252, 0.9); }
body.is-v2 .si-start-mic {
  gap: 10px; padding: 14px 30px 14px 24px; min-height: 60px;
  background: #009999; box-shadow: 0 6px 0 #007474;
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-size: 22px;
  text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.28);
  animation: kk-float 3s ease-in-out infinite;
}
body.is-v2 .si-start-mic svg { width: 26px; height: 26px; }
body.is-v2 .si-start-mic:hover:not(:disabled) { box-shadow: 0 8px 0 #007474; }
body.is-v2 .si-start-mic:active:not(:disabled) { box-shadow: 0 2px 0 #007474; }
body.is-v2 .si-mic-hint, body.is-v2 .si-status { color: #1b233e; }
body.is-v2 .si-mic-hint { opacity: 0.7; }
body.is-v2 .si-hold-track { background: #e3e8f2; }
body.is-v2 .si-rail-btn { border: 2px solid #e3e8f2; border-radius: 16px; color: #1b233e; min-height: 44px; font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-size: 15px; box-shadow: 0 3px 0 rgba(27, 35, 62, 0.1); }
body.is-v2 .si-rail-btn.primary { background: #009999; border-color: #009999; color: #fff; box-shadow: 0 4px 0 #007474; }

/* the rail's bell is the living rig (the picture stays as the fallback) */
body.is-v2 .si-bell-btn { position: relative; width: 112px; height: 112px; }
body.is-v2 .si-bell-btn .si-bell-img { width: 100%; height: 100%; }
body.is-v2 .si-bell-btn.v2-rigged .si-bell-img { visibility: hidden; }
.v2-rail-rig { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
@media (max-width: 859px) { body.is-v2 .si-bell-btn { width: 84px; height: 84px; } }

body.is-v2 .si-feedback { background: #fff; width: fit-content; max-width: 100%; margin: 16px auto 0; padding: 8px 20px; border-radius: 22px; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.12); }
body.is-v2 .si-feedback:empty { visibility: hidden; }
body.is-v2 .si-feedback.is-right b { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; }
body.is-v2 .si-btn { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-size: 20px; border-radius: 20px; background: #6AB845; box-shadow: 0 6px 0 #4c8f30; padding: 14px 30px; }
body.is-v2 .si-btn.ghost { background: #fff; color: #1b233e; border: 2px solid #e3e8f2; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.14); font-size: 17px; }

/* ── Results: E cheers, the title in the brand face, one white card ────── */
body.is-v2 .si-results .si-eyebrow { color: #1b233e; opacity: 0.7; }
body.is-v2 .si-result-head {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps;
  font-size: clamp(36px, 8vw, 56px); line-height: 1; letter-spacing: 0; color: #fff;
  text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.32);
}
body.is-v2 .si-scorecard { background: #fff; border: 0; border-radius: 30px; box-shadow: 0 6px 0 rgba(27, 35, 62, 0.12); }
body.is-v2 .si-big { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; color: #1b233e; }
body.is-v2 .si-stars.big i { font-size: 44px; color: #e3e8f2; }
body.is-v2 .si-stars.big i.on { color: #ffd25b; text-shadow: 0 3px 0 #e0a92a; }
.v2-cheer { width: 150px; height: 150px; margin: -10px auto 0; }
.v2-cheer > * { width: 100%; height: 100%; display: block; }

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