/*!
 * Major or Minor v2 — the cover's day and night over the same game (with js/kid-kit.js).
 * Colours from the cover (covers/major-or-minor/scene.js): day #8fd6f4 with hills
 * #a9dbc4 / #9dd25f and the sun #ffd25b; night navy #1b233e with hills #2b3d5c /
 * #2f5450, the moon and stars #fdf3da. The answers keep the game's own pairing:
 * Major = the day card (left), minor = the night card (right), always, so the
 * colour names the CHOICE and never marks the right one.
 */
html { background: #8fd6f4; }
body.is-v2 { background: transparent; }
/* behind everything at z -1 (not a z-index on #game: the game's own members wall
   lives inside #game and must stay above the kit) */
body.is-v2 .v2-world { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.v2-mm-world { position: absolute; inset: 0; overflow: hidden; background: #8fd6f4; }
.v2-mm-world svg { position: absolute; display: block; }
.v2-mm-sky { inset: 0; width: 100%; height: 100%; }
.v2-mm-sun { left: max(14px, 3vw); top: calc(max(10px, env(safe-area-inset-top)) + 70px); width: clamp(70px, 10vw, 130px); height: auto; aspect-ratio: 1; }
.v2-mm-moon { right: max(18px, 4vw); top: calc(max(10px, env(safe-area-inset-top)) + 136px); width: clamp(54px, 7vw, 96px); height: auto; aspect-ratio: 1; }
.v2-mm-sun g { transform-origin: 0 0; animation: v2-spin 40s linear infinite; }
@keyframes v2-spin { to { rotate: 360deg; } }
.v2-mm-stars path { animation: kk-twinkle 3.2s ease-in-out infinite alternate; }
.v2-mm-stars path:nth-child(2n) { animation-delay: -1.1s; }
.v2-mm-stars path:nth-child(3n) { animation-delay: -2.3s; }

/* the kit's menu wears the same world (scene: false + onRender) */
.v2-mm-menu .v2-mm-world { z-index: 0; }
.v2-mm-menu .kk-front, .v2-mm-menu .kk-map { z-index: 1; }
/* the game's own menu stays in the page (the kit presses its buttons) but is never seen */
body.is-v2 .mm-menu { visibility: hidden; }
html.kk-menu-on, html.kk-menu-on body.is-v2 { overflow: hidden; }
.v2-mm-menu .kk-list li > span.v2-lv { flex: 1; min-width: 0; display: grid; }
.v2-mm-menu .kk-list li > span.v2-lv small { font-size: 12px; font-weight: 700; color: #6a7392; }
.v2-mm-menu .v2-lock { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(27, 35, 62, 0.08); }
.v2-mm-menu .v2-lock svg { width: 14px; height: 14px; }

/* ── The round: light pills, flat cards, Grobold for the big words ───── */
body.is-v2 .mm-hud { gap: 8px; }
body.is-v2 .mm-quit, body.is-v2 .mm-progress, body.is-v2 .mm-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.14); font-size: 12px; letter-spacing: 1.2px;
}
body.is-v2 .mm-score { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-size: 18px; letter-spacing: 0.5px; }
body.is-v2 .mm-score b { font-weight: 400; }
body.is-v2 .mm-mult { font-family: "Nunito", system-ui, sans-serif; }
body.is-v2 .mm-dots {
  width: fit-content; margin: 0 auto 14px; padding: 7px 14px;
  background: rgba(255, 255, 255, 0.94); border-radius: 999px; box-shadow: 0 3px 0 rgba(27, 35, 62, 0.14);
}
body.is-v2 .mm-dots i { background: #dfe5f0; }
body.is-v2 .mm-dots i.hit { background: #6ab845; }
body.is-v2 .mm-dots i.miss { background: #ffc21c; }   /* amber, not red: a miss is not a failure */
body.is-v2 .mm-dots i.now { background: #1b233e; }

/* the staff: a white card (the notation stays exactly as Compose draws it) */
body.is-v2 .mm-staff { border: 0; border-radius: 28px; box-shadow: 0 6px 0 rgba(27, 35, 62, 0.16); }
/* the ??? card before the answer: the cover's day | night, flat, with a seam */
body.is-v2 .mm-cover {
  border: 6px solid #fff; border-radius: 28px; box-shadow: 0 6px 0 rgba(27, 35, 62, 0.16);   /* white frame: it sits on the same day and night */
  background: #8fd6f4; overflow: hidden;
}
body.is-v2 .mm-cover::before { content: ""; position: absolute; inset: 0; background: #1b233e; clip-path: polygon(var(--seam-t, 54%) 0, 100% 0, 100% 100%, var(--seam-b, 46%) 100%); }
body.is-v2 .mm-cover span { position: relative; }
body.is-v2 .mm-cover span {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; color: #fff;
  text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.35);
}
body.is-v2 .mm-replay-corner { border: 0; background: #fff; box-shadow: 0 3px 0 rgba(27, 35, 62, 0.16); color: #1b233e; }
/* B♭ watches the staff from its corner (wide screens with room) */
body.is-v2 .v2-hero { display: none; }
@media (min-width: 820px) and (min-height: 600px) {
  body.is-v2 .v2-hero {
    display: block; position: absolute; z-index: 4; right: -26px; bottom: -14px; width: 150px; height: 150px; pointer-events: none;
    transform-origin: 50% 94%; rotate: -5deg;
  }
  body.is-v2 .v2-hero > * { width: 100%; height: 100%; display: block; }
}

/* Play the chord / Next: a big round-ended pill, Grobold */
body.is-v2 .mm-listen, body.is-v2 .mm-listen.is-next {
  border-radius: 999px; box-shadow: 0 6px 0 #4e9636;
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-size: 22px; letter-spacing: 0.4px;
}
body.is-v2 .mm-listen.is-next { background: #009999; box-shadow: 0 6px 0 #007372; }
body.is-v2 .mm-listen.is-again {
  background: #fff; color: #1b233e; border: 0; box-shadow: 0 5px 0 rgba(27, 35, 62, 0.16); font-size: 19px;
}

/* ── The answers: a day card and a night card ───────────────────────── */
body.is-v2 .mm-answers { gap: 14px; }
body.is-v2 .mm-answer {
  position: relative; overflow: hidden; border-radius: 28px; padding: 16px 12px 18px;
  border: 5px solid #fff; box-shadow: 0 6px 0 rgba(27, 35, 62, 0.22);
}
body.is-v2 .mm-major { background: #8fd6f4; color: #1b233e; }
body.is-v2 .mm-minor { background: #1b233e; color: #fdf3da; }
body.is-v2 .mm-major:hover:not(:disabled), body.is-v2 .mm-minor:hover:not(:disabled) { box-shadow: 0 9px 0 rgba(27, 35, 62, 0.22); }
body.is-v2 .mm-answer-word {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; letter-spacing: 0.4px; font-size: clamp(24px, 6vw, 34px);
}
body.is-v2 .mm-major .mm-answer-word { text-shadow: 0 0.07em 0 rgba(255, 255, 255, 0.5); }
body.is-v2 .mm-minor .mm-answer-word { text-shadow: 0 0.07em 0 rgba(0, 0, 0, 0.35); }
body.is-v2 .v2-mm-ico { width: 1.25em; height: 1.25em; flex: none; }
body.is-v2 .mm-answer-hint { font-size: 13px; opacity: 0.85; }
body.is-v2 .mm-answer:disabled { opacity: 0.55; }
/* after the answer: the right one keeps its colour, ringed and ticked; the other steps back */
body.is-v2 .mm-answers.is-done .mm-answer { opacity: 0.4; }
body.is-v2 .mm-answers.is-done .mm-answer.is-right { opacity: 1; overflow: visible; box-shadow: 0 0 0 5px #6ab845, 0 6px 0 5px rgba(27, 35, 62, 0.18); }
body.is-v2 .mm-answers.is-done .mm-answer.is-right::after {
  content: ""; position: absolute; top: -18px; right: -14px; 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;
}
body.is-v2 .mm-answers.is-done .mm-answer.is-wrong { opacity: 0.7; box-shadow: 0 6px 0 rgba(27, 35, 62, 0.22); }

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

/* ── Results: B♭ cheers, a Grobold headline, white cards ──────────── */
body.is-v2 .v2-cheer { width: 150px; height: 150px; margin: -12px auto -6px; }
body.is-v2 .v2-cheer > * { width: 100%; height: 100%; display: block; }
body.is-v2 .mm-eyebrow { display: inline-block; padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); color: #1b233e; }
body.is-v2 .mm-result-head {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps;
  color: #fff; font-size: clamp(36px, 8vw, 56px); letter-spacing: 0.5px; text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.4);
}
body.is-v2 .mm-scorecard { background: #fff; border: 0; border-radius: 28px; box-shadow: 0 6px 0 rgba(27, 35, 62, 0.16); }
body.is-v2 .mm-big { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; color: #1b233e; }
body.is-v2 .mm-missed { background: #fff; border-radius: 24px; padding: 14px 18px 6px; box-shadow: 0 5px 0 rgba(27, 35, 62, 0.14); }
body.is-v2 .mm-missed li:first-child { border-top: 0; }
body.is-v2 .mm-btn {
  border-radius: 999px; padding: 14px 30px; box-shadow: 0 6px 0 #4e9636;
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-size: 19px; letter-spacing: 0.4px;
}
body.is-v2 .mm-btn.ghost { background: #fff; color: #1b233e; border: 0; box-shadow: 0 5px 0 rgba(27, 35, 62, 0.16); }

/* ── A phone held sideways (≤ 520 px tall): title and buttons both fit ── */
@media (orientation: landscape) and (max-height: 520px) {
  .v2-mm-menu .kk-front { padding-top: 54px; padding-bottom: 18px; gap: 12px; }
  .v2-mm-menu .kk-kicker { font-size: 30px; }
  .v2-mm-menu .kk-word { font-size: 66px; }
  .v2-mm-menu .kk-btn { width: 168px; }
  .v2-mm-sun { top: 64px; width: 64px; }
  .v2-mm-moon { top: 120px; width: 48px; }
}
/* an upright phone mid-round: the sun and moon would sit behind the HUD pills, so they wait for the menu */
@media (max-width: 700px) { body.is-v2.v2-playing .v2-world .v2-mm-sun, body.is-v2.v2-playing .v2-world .v2-mm-moon { display: none; } }
@media (max-width: 420px) {
  body.is-v2 .mm-quit, body.is-v2 .mm-progress { font-size: 11px; letter-spacing: 0.6px; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-mm-sun g, .v2-mm-stars path { animation: none; }
}

/* ── 2026-10-11 (Rob's notes) ───────────────────────────────────────── */
/* less meta up top: the dots already count the chords, and the corner back arrow leaves */
body.is-v2 .mm-quit, body.is-v2 .mm-progress { display: none; }
body.is-v2 .mm-hud { justify-content: flex-end; }
/* the day | night seam runs down the gap between the answers (placeSeam in the JS), so give it room */
body.is-v2 .mm-answers { column-gap: clamp(36px, 6vw, 56px); }
/* Next chord: green, and once the answer and its replay are done it grows and shrinks to say "tap me" */
body.is-v2 .mm-listen.is-next { background: #6ab845; box-shadow: 0 6px 0 #4e9636; animation: v2-next-pulse 1.5s ease-in-out 2.2s infinite; }
@keyframes v2-next-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { body.is-v2 .mm-listen.is-next { animation: none; } }
/* a narrow card: leave the replay button its own corner instead of sitting on the chord's top note */
@media (max-width: 560px) { body.is-v2 .mm-staff { padding: 12px 52px 12px 10px; } }
/* the whole round sits a little higher: the dots share the score's row (Rob, 2026-10-11) */
body.is-v2 .mm-hud { margin-bottom: 0; min-height: 40px; }
body.is-v2 .mm-dots { margin-top: -40px; margin-bottom: 14px; min-height: 40px; box-sizing: border-box; display: flex; align-items: center; }
/* and Next / Play gets room above the answer cards */
body.is-v2 .mm-answers { margin-top: 24px; }
/* upright screens centre the round; sit it a little above centre, where the empty sky is */
@media (max-width: 900px) and (orientation: portrait) { body.is-v2 .mm-screen.mm-play { padding-bottom: max(48px, 13vh); } }