/*!
 * Melody Memory v2 — the cover's day over the same game (with js/kid-kit.js).
 * Colours from the cover (covers/melody-memory/scene.js): sky #8fd6f4, hills
 * #a9dbc4 / #9dd25f, the thought bubble white over a #dbe9f4 shade, navy ink
 * #1b233e. Flat: no gradients, hard drop shadows. Every rule is scoped to
 * body.is-v2 or to v2's own .mm2-* pieces, so index.html never sees it.
 */
/* ── The world: sky and hills behind everything ─────────────────────────── */
body.is-v2,
body.is-v2 .app,
body.is-v2 #gameScreen,
body.is-v2 #duelScreen.mm-duel { background: transparent; }
html:has(body.is-v2), body.is-v2 { background: #8fd6f4; }
.mm2-world { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.mm2-world .kk-scene { position: absolute; inset: 0; }
/* positioned but NOT a stacking context: the game's own cards (z 116+) must still open over the kit menu (z 115) */
body.is-v2 .app { position: relative; }
/* 480–899px: the old "phone card" (a 430px column with a radius, floating on
   grey) gives way to the world; the column just widens a little */
@media (min-width: 480px) {
  body.is-v2 { background: #8fd6f4; }
  body.is-v2 .app { max-width: min(100%, 720px); border-radius: 0; box-shadow: none; }
}
@media (min-width: 900px) {
  body.is-v2 { background: #8fd6f4; }
  body.is-v2 .app { max-width: none; }
}
body.is-v2 .bank-dock::before { background: transparent; }
@media (orientation: portrait) {
  body.is-v2 #duelScreen.mm-duel,
  body.is-v2 #duelScreen.mm-duel.won-p1,
  body.is-v2 #duelScreen.mm-duel.won-p2 { background: transparent; }
}

/* the boot loader: a white pill on the sky (the game screen waits behind it) */
body.is-v2 .boot-loader { background: transparent; }
body.is-v2 .boot-loader:not([hidden]) ~ #gameScreen { visibility: hidden; }
body.is-v2 .boot-loader-text { background: #fff; color: #1b233e; padding: 10px 18px; border-radius: 999px; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.12); }

/* ── The kit menu over the game's own title card ────────────────────────── */
/* the title card stays in the page (the kit presses its buttons, and the kit
   watches it) but is never seen */
body.is-v2 #introOverlay { visibility: hidden; }
/* above the game's dock and floats (≤ 90), below its own cards (daily 116,
   set 117, overlays 118+), so the duel picker, How to Play and the Daily
   card open OVER the menu exactly as they opened over the title card */
body.is-v2 .kk-menu { z-index: 115; }
html.kk-menu-on body.is-v2 .pgc-root { z-index: 2147482500; }
html.kk-menu-on body.is-v2 [data-coin-purse] { z-index: 2147482000; }
html.kk-menu-on body.is-v2 { overflow: hidden; }
/* the arcade's Menu pill and coin purse sit on top, so the grown-ups sheet
   starts below their row (its × must never hide under the purse) */
@media (min-width: 701px), (orientation: landscape) {
  body.is-v2 .kk-menu[data-view="sheet"] .kk-sheet { top: calc(50% + 34px); max-height: calc(100svh - 100px); }
}

/* picture icons from the game's own art: the C-E-G trio and two racers */
.mm2-sp {
  display: block; position: absolute; inset: 0;
  background-repeat: no-repeat; background-size: 700% 100%; background-position-y: 0;
}
.mm2-ico { position: relative; display: block; width: 100%; height: 100%; }
.mm2-trio .mm2-sp, .mm2-duo .mm2-sp { inset: auto; bottom: -20%; width: 84%; aspect-ratio: 1; }
.mm2-trio .mm2-sp:nth-child(2) { left: -34%; }
.mm2-trio .mm2-sp:nth-child(3) { left: 8%; bottom: -14%; z-index: 1; }
.mm2-trio .mm2-sp:nth-child(4) { left: 50%; }
.mm2-duo .mm2-sp { width: 96%; }
.mm2-duo .mm2-sp:nth-child(2) { left: -38%; }
.mm2-duo .mm2-sp:nth-child(3) { left: 42%; }
.mm2-flip { transform: scaleX(-1); }
/* the bells stand in a little white thought (Play) or on a white step (2 Players), so a teal G reads on a teal button */
.kk-ico .mm2-ico-cloud { position: absolute; left: -40%; top: -32%; width: 180%; height: 138%; overflow: visible; }
.mm2-ico-pill { position: absolute; left: -26%; right: -26%; bottom: -4%; height: 40%; border-radius: 999px; background: #fff; }

/* three big buttons and Grandma share a 4:3 iPad: the buttons narrow a touch
   and she stands a little further into her corner. The kit hides the hero
   beside three buttons below 1200px; here she measured clear on a 1024x768
   iPad (her badge 40px under 2 Players), so she stays from 1000x740 up. */
.kk-big:has(.kk-btn:nth-child(3)) .kk-btn { width: clamp(150px, 21vw, 240px); }
.kk-menu .kk-hero { width: clamp(220px, 26vw, 420px); bottom: -9%; }
@media (min-width: 1000px) and (min-height: 740px) {
  .kk-menu[data-view="front"]:has(.kk-btn:nth-child(3)) .kk-hero,
  .kk-menu[data-view="sheet"]:has(.kk-btn:nth-child(3)) .kk-hero { display: block; }
}
@media (orientation: portrait) and (max-width: 700px) {
  .kk-big:has(.kk-btn:nth-child(3)) .kk-btn { width: min(29vw, 150px); }
}

/* the Levels button's star count */
.kk-btn .kk-sub { font-size: 15px; letter-spacing: 1px; opacity: 1; color: #fff3b0; }

/* the Daily chip under the big buttons */
.mm2-daily {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 52px; padding: 8px 18px 8px 10px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.94); color: #1b233e;
  font: 900 18px/1 "Grobold", Nunito, system-ui, sans-serif;
  box-shadow: 0 5px 0 rgba(27, 35, 62, 0.15);
  margin-top: -6px;
}
.mm2-daily svg { width: 34px; height: 34px; }
.mm2-daily b { font-weight: 400; }
.mm2-daily:active { transform: scale(0.95); }
.mm2-streak { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: #F39422; color: #fff; font: 900 14px/1 Nunito, system-ui, sans-serif; }

/* Grandma's thought on the menu: C, E and G (the cover's melody), wide screens */
.mm2-think { display: none; }
@media (min-width: 1180px) and (min-height: 760px) {
  .mm2-think {
    --hw: clamp(240px, 30vw, 440px);
    display: block; position: absolute; z-index: 1; pointer-events: none;
    right: calc(var(--hw) * 0.7); bottom: calc(var(--hw) * 0.86);
    width: calc(var(--hw) * 0.66); aspect-ratio: 300 / 170;
    animation: mm2-bob 4s ease-in-out infinite;
  }
  .kk-menu:not([data-view="front"]) .mm2-think { display: none; }
}
.mm2-think-cloud { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mm2-think-bells { position: absolute; left: 16%; right: 22%; top: 4%; bottom: 14%; }
.mm2-think-bells .mm2-sp { inset: auto; bottom: -24%; width: 58%; aspect-ratio: 1; }
.mm2-think-bells .mm2-sp:nth-child(1) { left: -14%; bottom: -30%; }
.mm2-think-bells .mm2-sp:nth-child(2) { left: 21%; bottom: -14%; }
.mm2-think-bells .mm2-sp:nth-child(3) { left: 56%; bottom: 0%; }
@keyframes mm2-bob { 50% { translate: 0 -5px; } }

/* the map: seven stones a hill; arrows and dots to the next seven */
/* bottom-RIGHT, so they never sit beside the kit's own back arrow (bottom-left),
   and navy-filled, so "next seven" never reads as "back" */
.mm2-pages {
  position: fixed; z-index: 6; right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px;
}
.mm2-pages .kk-round { position: relative; width: 60px; height: 60px; background: #1b233e; color: #fff; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.3); }
.mm2-pages .mm2-next svg { transform: scaleX(-1); }
.mm2-pages .kk-round:disabled { opacity: 0.35; cursor: default; }
.mm2-dots { display: flex; gap: 7px; padding: 9px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); }
.mm2-dots i { width: 12px; height: 12px; border-radius: 50%; background: #c5d6e6; }
.mm2-dots i.on { background: #1b233e; }
.kk-map.mm2-turn-r .kk-stone { animation: mm2-in-r 0.32s ease-out both; }
.kk-map.mm2-turn-l .kk-stone { animation: mm2-in-l 0.32s ease-out both; }
.kk-map.mm2-turn-r .kk-stone.is-next, .kk-map.mm2-turn-l .kk-stone.is-next { animation: kk-hop 1.1s ease-in-out infinite; }
@keyframes mm2-in-r { from { opacity: 0; margin-left: 40px; } }
@keyframes mm2-in-l { from { opacity: 0; margin-left: -40px; } }
.kk-stone.kk-nope { animation: mm2-nope 0.36s ease-in-out; }
@keyframes mm2-nope { 25% { translate: calc(-50% - 6px) -50%; } 75% { translate: calc(-50% + 6px) -50%; } }

/* the game's rows, moved into the grown-ups sheet, wear the kit's pills */
.kk-sheet .setting-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.kk-sheet .setting-label { min-width: 84px; font-size: 12px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #8a93ad; }
.kk-sheet .mode-toggle { display: flex; flex-wrap: wrap; gap: 8px; background: none; padding: 0; border: 0; }
.kk-sheet .mode-btn {
  appearance: none; flex: none; border: 2px solid #d5dced; background: #fff; color: #1b233e;
  font: 900 14px/1 Nunito, system-ui, sans-serif; padding: 10px 16px; border-radius: 999px; min-height: 44px; cursor: pointer; box-shadow: none;
}
.kk-sheet .mode-btn.active { background: #1b233e; border-color: #1b233e; color: #fff; }
.kk-sheet .mm2-modes { margin: 4px 0 6px; }

/* ── Playing: the HUD as light pieces on the sky ────────────────────────── */
body.is-v2 .app-title-top {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps;
  letter-spacing: 0; color: #fff; text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.32);
}
body.is-v2 .hud-panel {
  background: rgba(255, 255, 255, 0.94); border: 0; border-radius: 24px;
  box-shadow: 0 5px 0 rgba(27, 35, 62, 0.1);
}
/* Tablet and up: the scoreboard is ONE strip (Level, Tries, the round track,
   My score), not three stacked rows, so the cards in the cloud keep their
   size above the Listen button. Same elements, same ids, same disclosure. */
@media (min-width: 700px) {
  body.is-v2 .hud-panel { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 18px; max-width: 780px; padding: 8px 20px; }
  body.is-v2 .hud-panel .hud-stats-row { flex: 0 0 auto; gap: 16px; }
  body.is-v2 .hud-panel .hud-stats-row .hud-stat { flex: 0 0 auto; min-width: 54px; }
  body.is-v2 .hud-panel .hud-progress-row { flex: 1 1 240px; order: 2; }
  body.is-v2 .hud-panel .memory-score-details { flex: 0 0 auto; order: 3; margin: 0; }
  body.is-v2 .hud-panel .memory-score-details[open] { flex-basis: 100%; order: 4; }
}
body.is-v2 .tool-icon-btn {
  background: rgba(255, 255, 255, 0.94); border: 0; border-radius: 50%;
  box-shadow: 0 4px 0 rgba(27, 35, 62, 0.14);
}
body.is-v2 .question-prompt[data-turn] {
  background: #fff; border-radius: 999px; color: #1b233e;
  box-shadow: 0 4px 0 rgba(27, 35, 62, 0.12);
  position: relative; z-index: 2;
}
body.is-v2 .question-prompt[data-turn="play"] { color: #2f6b1d; }
/* The message line holds ONE thing at a time. A burst ("You nailed that
   melody!", "Level 2", the stars) is the prompt chip's twin and stands in its
   place while it shows; the prompt steps aside; the points pop off the score
   card instead of flying through the line (.mm2-plus, melody-memory-v2.js). */
body.is-v2 .bonus-burst { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; }
body.is-v2 .bonus-burst .burst-text {
  display: inline-block; padding: 8px 20px; border-radius: 999px; background: #fff;
  color: #1b233e; font-size: 1.15rem; letter-spacing: 0.02em; text-shadow: none;
  box-shadow: 0 4px 0 rgba(27, 35, 62, 0.12);
}
body.is-v2 .bonus-burst .burst-text:empty,
body.is-v2 .bonus-burst.is-fly-active:not(.is-entering) .burst-text { visibility: hidden; }
body.is-v2 .bonus-burst.is-combo .burst-text { color: #007373; }
body.is-v2 .bonus-burst.is-finish .burst-text { color: #e0a800; font-size: 1.4rem; letter-spacing: 3px; }
body.is-v2 .bonus-burst.is-gameover .burst-text { color: #b4421f; }
body.is-v2 .score-fly,
body.is-v2 .bonus-fly { visibility: hidden; }
.mm2-plus {
  position: fixed; z-index: 2147481000; pointer-events: none; translate: -50% 0;
  padding: 4px 14px; border-radius: 999px; background: #009999; color: #fff;
  font: 400 1.35rem/1.1 "Grobold", "Nunito", system-ui, sans-serif;
  box-shadow: 0 4px 0 #006f6f; white-space: nowrap;
  animation: mm2-plus 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.mm2-plus.is-bonus { background: #F39422; box-shadow: 0 4px 0 #bf6b10; }
@keyframes mm2-plus {
  0% { opacity: 0; transform: translateY(6px) scale(0.6); }
  18% { opacity: 1; transform: translateY(-14px) scale(1.12); }
  70% { opacity: 1; transform: translateY(-22px) scale(1); }
  100% { opacity: 0; transform: translateY(-30px) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) { .mm2-plus { animation-duration: 0.9s; } }
body.is-v2 .question-wrap .question-grid.melody-stack { translate: 0 calc(-1 * var(--mm2-up, 0px)); }
/* the prompt stays put under the scoreboard: re-centring the wrap round a
   smaller fan walked the prompt down into the space the cards needed */
body.is-v2 #gameScreen .question-wrap { justify-content: flex-start; }
/* cards capped to clear Listen (sizes set by melody-memory-v2.js per window and card count) */
body.is-v2 .question-wrap.mm2-fit-2 .question-grid.melody-stack.slots-2 { --tile-size: var(--mm2-t2); }
body.is-v2 .question-wrap.mm2-fit-3 .question-grid.melody-stack.slots-3 { --tile-size: var(--mm2-t3); }
body.is-v2 .question-wrap.mm2-fit-4 .question-grid.melody-stack.slots-4 { --tile-size: var(--mm2-t4); }
body.is-v2 .question-wrap.mm2-fit-5 .question-grid.melody-stack.slots-5 { --tile-size: var(--mm2-t5); }

/* Listen: the kit's flat button, a hard drop instead of a blur */
body.is-v2 .bank-dock .toolbar.arch-listen .transport-btn {
  border-radius: 999px; background: #6AB845;
  box-shadow: 0 6px 0 #4c8f30;
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-size: 1.2rem;
  text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.28);
}
body.is-v2 .bank-dock .toolbar.arch-listen .transport-btn:hover { box-shadow: 0 8px 0 #4c8f30; }
body.is-v2 .bank-dock .toolbar.arch-listen .transport-btn:active { box-shadow: 0 2px 0 #4c8f30; }

/* ── The melody: memory cards in Grandma's thought bubble ───────────────── */
.mm2-bubble { position: absolute; z-index: 0; pointer-events: none; display: none; }
.mm2-bubble svg { display: block; }
body.is-v2 .question-grid { z-index: 1; }
body.is-v2 .question-card {
  border: 3px solid #d9e8f5; border-radius: 22px; background: #fff;
}
body.is-v2 .melody-stack .question-card { box-shadow: 0 6px 0 rgba(27, 35, 62, 0.1); }
body.is-v2 .question-face-front {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400;
  color: #7cc3ea; font-size: calc(var(--tile-size) * 0.42);
  text-shadow: 0 0.06em 0 #cfe6f6;
}
/* the card that is ringing lifts and darkens, in no note's colour (colour IS the answer) */
body.is-v2 .question-slot.playing .question-card { border-color: #3fa3dd; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9), 0 10px 0 rgba(27, 35, 62, 0.12); }
body.is-v2 .question-slot.playing .question-face-front { color: #1b233e; text-shadow: none; }
/* a revealed card: the flat bell standing on its note's colour */
body.is-v2 .question-note.mm2-dressed { background: #fff; border-width: 3px; overflow: hidden; }
body.is-v2 .question-note.mm2-dressed::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: var(--note-color); opacity: 0.2;
}
body.is-v2 .question-note.mm2-dressed .note-art { visibility: hidden; }
.mm2-card-bell { position: absolute; left: 50%; bottom: -14%; width: 132%; aspect-ratio: 1; translate: -50% 0; }
.mm2-card-bell .mm2-sp-ring { opacity: 0; }
.note-playing .mm2-card-bell .mm2-sp-ring { opacity: 1; }
.note-playing .mm2-card-bell .mm2-sp-rest { opacity: 0; }
body.is-v2 .question-note.mm2-dressed .note-label {
  z-index: 2; bottom: 6px; padding: 2px 9px; border-radius: 999px; background: #fff; color: #1b233e; text-shadow: none;
  box-shadow: 0 0 0 2px var(--note-color);
}

/* Grandma Low B beside the game (placed by melody-memory-v2.js) */
.mm2-gran { position: fixed; z-index: 5; pointer-events: none; display: none; }
.mm2-gran.is-on { display: block; }
.mm2-gran > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mm2-gran::before {                     /* her contact shadow */
  content: ""; position: absolute; left: 18%; right: 18%; bottom: 0.5%; height: 6%;
  border-radius: 50%; background: rgba(27, 35, 62, 0.16);
}

/* ── The living bells: a rig in each of the game's own buttons ──────────── */
body.is-v2 .bank-note.mm2-has-rig .note-art { visibility: hidden; }
.bank-note .mm2-rig { position: absolute; left: -10%; bottom: 0; width: 120%; height: 120%; overflow: visible; pointer-events: none; z-index: 2; }
/* (no contact shadow: Rob, 2026-10-09, "the undershadow circles on the bells always get weird") */
body.is-v2 .bank-note.mm2-has-rig .bell-composite::before { display: none;
  content: ""; position: absolute; z-index: 1; left: 16%; right: 16%; bottom: -4px; height: 10px;
  border-radius: 50%; background: rgba(27, 35, 62, 0.16);
}
/* the label: a white pill rimmed in the note's colour */
body.is-v2 .bank-note.mm2-has-rig .note-label {
  padding: 3px 8px; border-radius: 999px; background: #fff; color: #1b233e;
  text-shadow: none; box-shadow: 0 0 0 2px var(--note-color); font-weight: 900;
}
/* the rig dings and hops by itself; the button's own jumps would double it */
body.is-v2 .bank-note.mm2-has-rig.note-playing,
body.is-v2 .bank-grid.c-major-strip .bank-note.mm2-has-rig.note-playing,
body.is-v2 .bank-grid.c-major-strip .bank-note.mm2-has-rig:active { transform: translateY(-3px); filter: none; }
body.is-v2 .bank-note.mm2-has-rig.note-correct-pop,
body.is-v2 .bank-note.mm2-has-rig.note-celebrate { animation: none; }
/* the first-note hint: a halo of the bell's colour behind it, not a box */
body.is-v2 .bank-note.mm2-has-rig.first-note-hint-key { box-shadow: none; border-color: transparent; }
body.is-v2 .bank-note.mm2-has-rig.first-note-hint-key .bell-composite::after {
  /* the hint: a little yellow arrow pointing down at the bell to play (Rob, 2026-10-09: not a circle behind it) */
  content: ""; position: absolute; z-index: 4; left: 50%; top: -52px; width: 30px; height: 30px; translate: -50% 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M10 3h10v11h7L15 27 3 14h7z' fill='%23ffd25b' stroke='%231b233e' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: mm2-point 0.9s ease-in-out infinite;
}
@keyframes mm2-point { 50% { translate: -50% 6px; } }

/* ── Cards over the game: results, level up, daily, duel ────────────────── */
body.is-v2 .intro-overlay:not(#introOverlay) { background: rgba(143, 214, 244, 0.94); }
body.is-v2 .intro-card { border: 0; border-radius: 30px; background: #fff; box-shadow: 0 10px 0 rgba(27, 35, 62, 0.12), 0 24px 50px rgba(15, 40, 70, 0.22); }
body.is-v2 .intro-title {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps;
  letter-spacing: 0; color: #1b233e;
}
body.is-v2 .intro-play-btn {
  border: 0; border-radius: 999px; background: #009999; color: #fff;
  box-shadow: 0 6px 0 #006f6f; font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-size: 1.2rem;
  text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.25);
}
body.is-v2 .intro-play-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #006f6f; }
body.is-v2 .intro-settings-btn { border-radius: 999px; }
body.is-v2 .reward-pill { border: 0; border-radius: 20px; background: #eef7fd; }
body.is-v2 .set-complete-stars .set-star.earned { color: #ffd25b; text-shadow: 0 3px 0 #e0a800; }
/* level up: a white card on the sky, the number in Grobold with a flat drop */
body.is-v2 .level-transition-overlay { background: rgba(143, 214, 244, 0.7); }
body.is-v2 .level-transition-card {
  min-width: 220px; padding: 22px 48px 26px; border-radius: 34px; background: #fff;
  box-shadow: 0 10px 0 rgba(27, 35, 62, 0.12), 0 24px 50px rgba(15, 40, 70, 0.2);
}
body.is-v2 .level-transition-label { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; color: #8a93ad; letter-spacing: 0.2em; font-size: 1.3rem; }
body.is-v2 .level-transition-num { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; color: #009999; text-shadow: 0 0.06em 0 #006f6f; font-size: 8rem; }
/* a burst ("You nailed that melody!", "Level 2") speaks for the prompt chip while it shows: one line, not three on top of each other */
body.is-v2 .bonus-burst { z-index: 3; }
body.is-v2 .mm2-line:has(.bonus-burst.is-entering) .question-prompt { opacity: 0; transition: opacity 0.15s; }

/* the duel: two white halves on the sky */
body.is-v2 .mm-duel-card { border-radius: 16px; }
body.is-v2 .mm-duel-banner { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
  .mm2-think, .mm2-dots i, body.is-v2 .bank-note.mm2-has-rig.first-note-hint-key .bell-composite::after { animation: none; }
  .kk-map.mm2-turn-r .kk-stone, .kk-map.mm2-turn-l .kk-stone { animation: none; }
}

/* ══ Play screen, round 2 (Rob, 2026-10-09) ══════════════════════════════════
   "BIGGER MELODY CARDS AND MOVE OTHER STUFF ELSEWHERE": one corner row (a round
   back arrow; gear + pause on the right; the title small between them), a slim
   one-line scoreboard, ONE message line in Nunito (not Grobold), no ✕ (the back
   arrow does it), no labels under the bells, no Grandma standing beside the
   game. From 700px wide Listen is a big circle to the RIGHT of the cloud and
   the cards fill the height (sizes from melody-memory-v2.js). */
body.is-v2 #quitBtn { display: none; }
body.is-v2 #gameScreen { padding-top: calc(10px + env(safe-area-inset-top)); }
body.is-v2 #gameScreen .top-ui { min-height: 52px; margin: 0; pointer-events: none; }
body.is-v2 .app-title-top { font-size: clamp(22px, 3.4vw, 30px); }
html:not(.mm2-ingame) .pgc-right #settingsBtn,
html.kk-menu-on .pgc-right #settingsBtn { display: none !important; }
.pgc-right #settingsBtn {
  width: 52px; height: 52px; min-width: 52px; padding: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.94); border: 0; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.14); color: #1b233e;
  transform: none !important; display: grid; place-items: center;
}
.pgc-right #settingsBtn .settings-glyph { font-size: 26px; line-height: 1; }
body.is-v2 .settings-panel { position: fixed; top: calc(70px + env(safe-area-inset-top)); right: 16px; left: auto; z-index: 2147482600; }

/* the scoreboard: one slim line of pieces (label beside value), wrapping to two on a phone */
body.is-v2 .hud-panel {
  flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 16px; width: min(720px, calc(100% - 8px)); max-width: none; margin: 4px auto 0; padding: 6px 18px;
  border-radius: 999px; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.08);
}
body.is-v2 .hud-panel .hud-stats-row { flex: 0 0 auto; gap: 14px; align-items: center; }
body.is-v2 .hud-panel .hud-stat { flex-direction: row; align-items: center; gap: 7px; min-width: 0; }
body.is-v2 .hud-panel .hud-label { font-size: 11px; }
body.is-v2 .hud-panel .hud-value { font-size: 18px; line-height: 1; }
body.is-v2 .hud-panel .hud-progress-row { flex: 1 1 200px; order: 2; min-width: 170px; }
body.is-v2 .hud-panel .memory-score-details { flex: 0 0 auto; order: 3; margin: 0; }
body.is-v2 .hud-panel .memory-score-details[open] { flex-basis: 100%; order: 4; }
@media (max-width: 699px) {
  /* a phone: Level · Tries · My score on one line, the round track under it */
  body.is-v2 .hud-panel { border-radius: 22px; gap: 4px 12px; padding: 6px 14px; }
  body.is-v2 .hud-panel .hud-stats-row { flex-basis: 100%; justify-content: center; }
  body.is-v2 .hud-panel .hud-progress-row { flex: 1 1 0; min-width: 0; order: 2; }
  body.is-v2 .hud-panel .memory-score-details { order: 3; }
  body.is-v2 .hud-panel .memory-score-details[open] { order: 4; }
  body.is-v2 .hud-panel .hud-divider { display: none; }
}
/* the corner row is too narrow on a phone for the title as well: the game's
   name is on the menu, the row keeps the back arrow and the gear */
@media (max-width: 599px) { body.is-v2 #gameScreen .app-title-wrap { visibility: hidden; } }

/* ONE message line: the prompt and the burst share it (one shows at a time) */
.mm2-line { position: relative; display: grid; place-items: center; min-height: 44px; z-index: 3; }
.mm2-line > * { grid-area: 1 / 1; }
body.is-v2 .mm2-line .bonus-burst { min-height: 0; padding: 0; margin: 0; }
body.is-v2 .question-prompt[data-turn],
body.is-v2 .bonus-burst,
body.is-v2 .bonus-burst .burst-text {
  font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-variant-caps: normal; letter-spacing: 0;
}
body.is-v2 .question-prompt[data-turn] { font-size: 17px; padding: 8px 18px; }
body.is-v2 .bonus-burst .burst-text { font-size: 17px; padding: 8px 18px; }
body.is-v2 .bonus-burst.is-finish .burst-text { font-size: 18px; letter-spacing: 0; }

/* no labels under the bells (the bells ARE the labels); the dock stops reserving room for them */
body.is-v2 #bankGrid .bank-note .note-label { display: none; }
body.is-v2 #gameScreen .bank-dock { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

/* Grandma no longer stands beside the game; she rolls by on the far hill now and then */
.mm2-gran, .mm2-gran.is-on { display: none; }
.mm2-roll {
  position: absolute; left: 0; width: 92px; height: 92px; z-index: 1; pointer-events: none;
  animation: mm2-roll-across 16s linear forwards;
}
.mm2-roll.is-back { animation-name: mm2-roll-back; }
.mm2-roll.is-back .mm2-roll-body { scale: -1 1; }
.mm2-roll-body { position: absolute; inset: 0; transform-origin: 50% 92%; animation: mm2-rock 0.7s ease-in-out infinite alternate; }
.mm2-roll .mm2-sp { position: absolute; inset: 0; background-size: 700% 100%; }
@keyframes mm2-roll-across { from { translate: -90px 0; } to { translate: calc(100vw + 90px) 0; } }
@keyframes mm2-roll-back { from { translate: calc(100vw + 90px) 0; } to { translate: -90px 0; } }
@keyframes mm2-rock { from { rotate: -5deg; translate: 0 0; } to { rotate: 5deg; translate: 0 -4px; } }

/* ── From 700px wide: Listen is a circle to the RIGHT of the cloud ── */
@media (min-width: 700px) and (min-height: 500px) and (orientation: landscape) {
  /* the cloud sits in the middle (equal room each side); Listen tucks against its right edge */
  html.mm2-side body.is-v2 #gameScreen .question-wrap { padding: 4px 124px 8px 124px; justify-content: center; }
  html.mm2-side body.is-v2 .mm2-line { position: absolute; left: 0; right: 0; top: 0; }
  html.mm2-side body.is-v2 #gameScreen .question-wrap { padding-top: 56px; }
  html.mm2-side body.is-v2 .question-wrap > .toolbar.arch-listen {
    position: absolute; left: auto; right: auto; bottom: auto; top: 55%;
    width: auto; transform: translateY(-50%); translate: none; margin: 0; z-index: 4;
  }
  html.mm2-side body.is-v2 .question-wrap > .toolbar.arch-listen .transport-btn {
    width: clamp(112px, 12vw, 140px); height: clamp(112px, 12vw, 140px); min-height: 0; padding: 0;
    border-radius: 50%; border: 6px solid #fff; flex-direction: column; gap: 4px;
    background: #6AB845; color: #fff; box-shadow: 0 8px 0 #4c8f30;
    font-family: "Nunito", system-ui, sans-serif; font-weight: 900; font-size: 16px; text-shadow: none;
  }
  html.mm2-side body.is-v2 .question-wrap > .toolbar.arch-listen .transport-btn:active { transform: translateY(4px); box-shadow: 0 4px 0 #4c8f30; }
  html.mm2-side body.is-v2 .question-wrap > .toolbar.arch-listen .play-triangle {
    border-left: 34px solid #fff; border-top: 21px solid transparent; border-bottom: 21px solid transparent; margin-left: 8px;
  }
  /* the bells no longer have a Listen band over them */
  html.mm2-side body.is-v2 #gameScreen .bank-dock { padding-top: clamp(70px, 12vh, 120px); }
}
/* phones keep Listen under the cloud, as a pill in Nunito */
body.is-v2 .bank-dock .toolbar.arch-listen .transport-btn { font-family: "Nunito", system-ui, sans-serif; font-weight: 900; text-shadow: none; }
/* in play the title shares the corner row with the back arrow and the gear,
   so the game starts at the top of the screen (Classic pushes it 44px down) */
body.is-v2 .app:has(> #gameScreen:not([hidden])) { margin-top: 0; height: 100dvh; }
/* upright: the fan is centred between the message line and Listen (padding set by melody-memory-v2.js) */
@media (orientation: portrait) { body.is-v2 #gameScreen .question-wrap > .question-grid.melody-stack { margin-top: auto; margin-bottom: auto; } }

/* Listen: the play triangle only, no word (Rob, 2026-10-09: "remove txt from play button"); its aria-label still says Listen */
body.is-v2 #replayBtn .transport-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 699px), (orientation: portrait) {
  body.is-v2 #gameScreen .bank-dock .toolbar.arch-listen .transport-btn { width: 76px !important; min-width: 0; height: 76px; min-height: 0; padding: 0; border-radius: 50%; border: 5px solid #fff; justify-content: center; margin: 0 auto; }
  body.is-v2 #gameScreen .bank-dock .toolbar.arch-listen { width: auto; }
  body.is-v2 .bank-dock .toolbar.arch-listen .play-triangle { border-left: 24px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; margin-left: 6px; }
}

/* ══ HUD round 3 (Rob, 2026-10-09) ══════════════════════════════════════════
   "hide the Melody Memory title … move Level Tries Round My Score into lighter,
   less pill-dependent elements on the LEFT, going vertical … keep just the round
   progress horizontal up top middle … more room for the game, fewer collisions."
   The scoreboard leaves the page flow: the round track sits in the corner row
   where the title was; Level, Tries, Score, Streak and the 2x meter stack down
   the left gutter as light labels (the score is always shown, no disclosure). */
body.is-v2 #gameScreen .app-title-wrap { visibility: hidden; }
body.is-v2 .hud-panel {
  position: static; display: contents; background: none; box-shadow: none; padding: 0; margin: 0; border: 0;
}
body.is-v2 .hud-panel .hud-progress-row {
  position: fixed; z-index: 6; top: calc(18px + env(safe-area-inset-top)); left: 50%; translate: -50% 0;
  width: min(380px, calc(100vw - 220px)); margin: 0; padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.72); box-shadow: none;
}
body.is-v2 .hud-panel .hud-progress-label { display: none; }
body.is-v2 .mm2-stats {
  position: fixed; z-index: 6; left: max(14px, env(safe-area-inset-left)); top: calc(84px + env(safe-area-inset-top));
  display: flex; flex-direction: column; gap: 12px; width: 92px; pointer-events: none;
}
body.is-v2 .mm2-stats .hud-stats-row { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 0; }
body.is-v2 .mm2-stats .hud-stat { display: grid; justify-items: start; gap: 1px; padding: 0 0 0 10px; border-left: 3px solid rgba(255, 255, 255, 0.85); min-width: 0; }
body.is-v2 .mm2-stats .hud-label { font-size: 10px; letter-spacing: 0.08em; color: rgba(27, 35, 62, 0.55); }
body.is-v2 .mm2-stats .hud-value { font-size: 22px; line-height: 1; }
body.is-v2 .mm2-stats .hud-divider { display: none; }
body.is-v2 .mm2-stats .memory-score-details { display: contents; }
body.is-v2 .mm2-stats .memory-score-details > summary { display: none; }
body.is-v2 .mm2-stats .hud-meter-row { display: grid; gap: 4px; padding-left: 10px; border-left: 3px solid rgba(255, 255, 255, 0.85); }
body.is-v2 .mm2-stats .bonus-meter { width: 72px; }
body.is-v2 .mm2-stats .tries-value { gap: 4px; }
/* the game gets the room the scoreboard used */
body.is-v2 #gameScreen .question-wrap { margin-top: 0; }
/* a phone: the round track in the corner row, the stats as one light row under it */
@media (max-width: 699px) {
  /* between the back arrow (left) and the gear + pause (right) */
  body.is-v2 .hud-panel .hud-progress-row { left: 76px; translate: none; width: calc(100vw - 232px); padding: 6px 10px; }
  body.is-v2 .hud-panel .outcome-track-value { display: none; }
  /* one light row under the corner row: Level, Tries, Score (streak and 2x stay off a phone) */
  body.is-v2 .mm2-stats { flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-end; left: 50%; translate: -50% 0; top: calc(74px + env(safe-area-inset-top)); width: calc(100vw - 32px); gap: 16px; }
  body.is-v2 .mm2-stats .hud-stats-row { flex-direction: row; gap: 16px; }
  body.is-v2 .mm2-stats .hud-value { font-size: 17px; }
  body.is-v2 .mm2-stats .memory-score-details .hud-stat:nth-child(2),
  body.is-v2 .mm2-stats .hud-meter-row { display: none; }
  body.is-v2 #gameScreen .question-wrap { margin-top: 46px; }
}

/* no cloud behind the cards for now (Rob, 2026-10-10: "lets try without a round"; it may come back) */
.mm2-bubble { display: none !important; }
/* a phone: the hint arrow sits in front of the round Listen button rather than behind it */
@media (max-width: 699px) { body.is-v2 .bank-note.mm2-has-rig.first-note-hint-key { z-index: 30; } }