/*!
 * What Song Is It? v2 — the cover's world over the same game (with js/kid-kit.js).
 * Colours from the cover (covers/what-song-is-it/scene.js): sky #8fd6f4, far hill
 * #a9dbc4, near hill #9dd25f, navy #1b233e, B's pink #EA6BA3. The answer cards
 * take the note colours by POSITION (first card red, second teal, ...), never
 * by right or wrong.
 */
html, body.is-v2 { background: #8fd6f4; }
body.is-v2 .v2-world { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
body.is-v2 .v2-world .kk-scene { position: absolute; inset: 0; }
body.is-v2 #game { position: relative; z-index: 1; }

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

/* the family's third title row, like the cover: "Is It?" in Nunito Black */
.v2-ws-menu .kk-title::after {
  content: "Is It?"; display: block; margin-top: 0.08em;
  font: 900 clamp(26px, 5.6vw, 46px)/1 "Nunito", system-ui, sans-serif; color: #fff;
  text-shadow: 0 0.06em 0 rgba(27, 35, 62, 0.32);
}
/* the Play picture: three songbook pictures, fanned like a hand of cards */
.v2-fan { position: relative; display: block; width: 100%; height: 100%; }
.v2-fan i {
  position: absolute; top: 50%; left: 50%; height: 78%; aspect-ratio: 1; translate: -50% -50%;
  background: #fff; border-radius: 22%; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.22);
  display: grid; place-items: center;
}
.v2-fan i:nth-child(1) { left: 22%; rotate: -12deg; }
.v2-fan i:nth-child(3) { left: 78%; rotate: 12deg; }
.v2-fan i:nth-child(2) { z-index: 1; top: 44%; }
.v2-fan img { width: 84%; height: 84%; object-fit: contain; }

/* the sheet: the game's own best scores, and the songbook with its pictures */
.kk-sheet .ws-bests { display: flex; gap: 22px; margin: 0 0 6px; }
.kk-sheet .ws-bests div { display: grid; gap: 1px; }
.kk-sheet .ws-bests dt { font-size: 10px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; color: #8a93ad; }
.kk-sheet .ws-bests dd { margin: 0; font-size: 20px; font-weight: 900; color: #1b233e; }
.v2-book { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 10px; }
.v2-book li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: #1b233e; }
.v2-book img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.v2-book li.is-locked { opacity: 0.55; }
.v2-book .kk-lock { width: 22px; height: 22px; flex: none; margin-left: auto; background: rgba(27, 35, 62, 0.08); }
.v2-book .kk-lock svg { width: 13px; height: 13px; }

/* ── The round: light pills, flat cards, Grobold for the big words ───── */
body.is-v2 .ws-hud { gap: 8px; }
body.is-v2 .ws-quit, body.is-v2 .ws-progress, body.is-v2 .ws-score {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; white-space: nowrap;
  background: rgba(255, 255, 255, 0.94); border-radius: 999px; color: #1b233e;
  box-shadow: 0 3px 0 rgba(27, 35, 62, 0.12); font-size: 12px; letter-spacing: 1.2px;
}
body.is-v2 .ws-score { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-size: 18px; letter-spacing: 0.5px; min-width: 56px; justify-content: center; }
body.is-v2 .ws-dots {
  width: fit-content; max-width: 100%; margin: 0 auto 12px; padding: 7px 14px;
  background: rgba(255, 255, 255, 0.94); border-radius: 999px; box-shadow: 0 3px 0 rgba(27, 35, 62, 0.12);
}
body.is-v2 .ws-dots i { width: 11px; height: 11px; background: #dfe5f0; }
body.is-v2 .ws-dots i.got { background: #6ab845; }
body.is-v2 .ws-dots i.missed { background: #ffc21c; }   /* amber, not red: a miss is not a failure */
body.is-v2 .ws-dots i.now { background: #1b233e; }

/* the staff: a white card, no hairline, flat drop; B watches from its corner */
body.is-v2 .ws-staffcard { border: 0; border-radius: 30px; box-shadow: 0 6px 0 rgba(27, 35, 62, 0.12); }
body.is-v2 .v2-singer { display: none; }
@media (min-width: 820px) and (min-height: 600px) {
  body.is-v2 .v2-singer {
    display: block; position: absolute; right: -14px; bottom: -8px; width: 150px; height: 150px; pointer-events: none;
    transform-origin: 50% 94%; rotate: -5deg;
  }
  body.is-v2 .v2-singer > * { width: 100%; height: 100%; display: block; }
}
body.is-v2 .ws-listen {
  padding: 12px 30px; box-shadow: 0 6px 0 #00706f;
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-size: 21px; letter-spacing: 0.4px;
}
body.is-v2 .ws-listen svg { width: 18px; height: 18px; }

/* ── The answers: flat cards in the note colours, the picture in a white window ── */
/* centred, whatever the count (the free tier deals three) */
body.is-v2 .ws-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
body.is-v2 .ws-choice { flex: 0 1 calc(50% - 6px); }
@media (min-width: 720px) { body.is-v2 .ws-choice { flex: 0 1 calc(25% - 9px); } }
body.is-v2 .ws-choice {
  --c: #E72829; --s: #b31d1e;
  position: relative; border: 0; border-radius: 26px; background: var(--c); padding: 12px 10px 14px; gap: 8px;
  box-shadow: 0 6px 0 var(--s);
}
body.is-v2 .ws-choice:nth-child(4n+2) { --c: #009999; --s: #007372; }
body.is-v2 .ws-choice:nth-child(4n+3) { --c: #7B569E; --s: #5c3f78; }
body.is-v2 .ws-choice:nth-child(4n+4) { --c: #F39422; --s: #c46f10; }
body.is-v2 .ws-choice:hover:not(:disabled) { border-color: transparent; transform: translateY(-3px); }
body.is-v2 .ws-choice-art {
  width: clamp(64px, 17vw, 92px); padding: 8%; box-sizing: border-box; aspect-ratio: 1; object-fit: contain;
  background: #fff; border-radius: 22px;
}
body.is-v2 .ws-choice-name { color: #fff; font-size: 13.5px; text-shadow: 0 1px 0 rgba(27, 35, 62, 0.25); }
/* after the pick: the right one stays lit with a white ring and a tick, the rest step back */
body.is-v2 .ws-choice:disabled:not(.is-right):not(.is-wrong) { opacity: 0.4; }
body.is-v2 .ws-choice.is-right { background: var(--c); border: 0; box-shadow: 0 0 0 5px #fff, 0 6px 0 5px rgba(27, 35, 62, 0.16); }
body.is-v2 .ws-choice.is-right::after {
  content: ""; position: absolute; top: -12px; right: -12px; width: 38px; height: 38px; border-radius: 50%;
  background: #6ab845 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
  border: 3px solid #fff; box-shadow: 0 3px 0 rgba(27, 35, 62, 0.2);
}
body.is-v2 .ws-choice.is-wrong { background: var(--c); border: 0; opacity: 0.62; animation: v2-shake 0.4s ease; }
@keyframes v2-shake { 25% { translate: -6px 0; } 60% { translate: 5px 0; } 80% { translate: -2px 0; } }

body.is-v2 .ws-feedback:not(:empty) {
  width: fit-content; max-width: 100%; margin: 16px auto 0; padding: 8px 22px; border-radius: 999px;
  background: #fff; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.12); color: #1b233e;
}
body.is-v2 .ws-feedback.is-right, body.is-v2 .ws-feedback.is-wrong { color: #1b233e; }
body.is-v2 .ws-feedback b { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; letter-spacing: 0.3px; }

/* ── Results: B cheers, a Grobold headline on the sky, white cards ──── */
body.is-v2 .v2-cheer { width: 160px; height: 160px; margin: -10px auto -6px; }
body.is-v2 .v2-cheer > * { width: 100%; height: 100%; display: block; }
body.is-v2 .ws-eyebrow { color: #1b233e; opacity: 0.7; }
body.is-v2 .ws-result-head {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps;
  color: #fff; font-size: clamp(40px, 9vw, 60px); letter-spacing: 0.5px; text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.32);
}
body.is-v2 .ws-stars.big { display: inline-flex; gap: 2px; padding: 6px 16px; background: #fff; border-radius: 999px; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.12); }
body.is-v2 .ws-stars i { color: #dfe5f0; }
body.is-v2 .ws-stars i.on { color: #ffc21c; }
body.is-v2 .ws-result-score { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; color: #1b233e; }
body.is-v2 .ws-missed { background: #fff; border: 0; border-radius: 26px; box-shadow: 0 5px 0 rgba(27, 35, 62, 0.12); }
body.is-v2 .ws-perfect { display: inline-block; padding: 8px 20px; background: #fff; border-radius: 999px; color: #1b233e; }
body.is-v2 .ws-play-btn {
  background: #009999; box-shadow: 0 6px 0 #00706f; padding: 14px 34px;
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-size: 21px; letter-spacing: 0.4px;
}
body.is-v2 .ws-ghost-btn {
  border: 0; background: #fff; color: #1b233e; box-shadow: 0 5px 0 rgba(27, 35, 62, 0.14); padding: 13px 26px;
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-size: 18px; letter-spacing: 0.4px;
}

/* ── A phone held sideways (≤ 520 px tall): title and buttons both fit ── */
@media (orientation: landscape) and (max-height: 520px) {
  .v2-ws-menu .kk-front { padding-top: 54px; padding-bottom: 18px; gap: 12px; }
  .v2-ws-menu .kk-kicker { font-size: 30px; }
  .v2-ws-menu .kk-word { font-size: 64px; }
  .v2-ws-menu .kk-title::after { font-size: 24px; }
  .v2-ws-menu .kk-btn { width: 168px; }
}
@media (max-width: 420px) {
  body.is-v2 .ws-quit, body.is-v2 .ws-progress { font-size: 11px; letter-spacing: 0.6px; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  body.is-v2 .ws-choice.is-wrong { animation: none; }
}