/*!
 * What Note Is It? v2 — the cover's hill over the same game (with js/kid-kit.js).
 * Colours from the cover (covers/what-note-is-it/scene.js): sky #8fd6f4, far
 * hill #a9dbc4, near hill #9dd25f, the mystery bell navy #1b233e with a white
 * badge, white sound arcs. The hills are the bells' floor (one floor).
 */
body.is-v2 { background: #8fd6f4; }
body.is-v2 .screen { background: transparent; }
body.is-v2 .v2-scenery { position: fixed; inset: 0; pointer-events: none; }
body.is-v2 .v2-scenery .kk-scene { position: absolute; inset: 0; }
body.is-v2 .boot-loader { background: rgba(143, 214, 244, 0.92); }

/* this game's global `button` rule would pad the kit's round buttons */
body.is-v2 .kk-round, body.is-v2 .kk-x, body.is-v2 .kk-stone { padding: 0; }
body.is-v2 .kk-btn { padding: 0; }

/* the start gate holds the kit until the first tap: only the kit is seen */
.pgc-gate.v2-gate { background: #8fd6f4; padding: 0; }
.pgc-gate.v2-gate .pgc-gate-card { visibility: hidden; }
.pgc-gate.v2-gate .v2-home { position: fixed; z-index: 120; left: max(12px, env(safe-area-inset-left)); top: calc(max(10px, env(safe-area-inset-top)) + 6px); width: 52px; height: 52px; }
/* the third title row, like the cover: "Is It?" in Nunito Black */
.v2-wn-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);
}
.v2-wn-menu .kk-ico { width: 64%; }
/* back from play the kit sits on the page: above the game's fixed dock (z 70), below the chrome */
.kk-menu.v2-wn-menu { z-index: 100; }

/* the game's own setting 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 10px; margin: 0 0 12px; }
.kk-sheet .setting-label { min-width: 84px; font-size: 12px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #8a93ad; }
.kk-sheet .mode-groups { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.kk-sheet .mode-group { display: flex; align-items: center; gap: 8px; }
.kk-sheet .mode-group-label { font-size: 12px; font-weight: 900; color: #8a93ad; }
.kk-sheet .mode-toggle { display: flex; flex-wrap: wrap; gap: 8px; }
.kk-sheet .mode-btn {
  appearance: 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; }

/* ── Play ───────────────────────────────────────────────────────────────── */
/* the menu chooses the mode and the gear holds the settings, so the game's own
   toggle bar and settings button step aside (they stay in the page: the kit presses them) */
body.is-v2 .wn-play-mode, body.is-v2 #settingsBtn { display: none !important; }
body.is-v2 .top-ui { min-height: 0; }
/* the title is the menu's; in play it only steals room from the mystery bell
   (v1's Listen overlapped the card at 1024×768). Tall screens keep it. */
body.is-v2 .app-title-top { display: none; }
@media (min-height: 900px) { body.is-v2 .app-title-top { display: block; } }
body.is-v2 .app-title-top {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps;
  color: #fff; font-size: clamp(28px, 4.6vw, 40px); letter-spacing: 0.5px;
  text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.3);
}
body.is-v2 .v2-note { font-weight: 400; }
body.is-v2 .v2-note i { font-style: normal; text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.38); }

/* the scoreboard: a light pill-card, no hairlines */
body.is-v2 .hud-panel { background: rgba(255, 255, 255, 0.94); border: 0; border-radius: 24px; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.12); }
body.is-v2 .outcome-track-rail::before { background: #e3e9f4; }

/* the question: the cover's mystery bell, ringing (white arcs) while it plays */
body.is-v2 .question-card { background: transparent; border: 0; box-shadow: none; }
body.is-v2 .question-slot.playing .question-card { border: 0; }
body.is-v2 .question-face-front { font-size: 0 !important; color: transparent !important; overflow: visible; }
body.is-v2 .v2-mystery { position: absolute; left: 6%; top: 2%; width: 88%; height: 88%; overflow: visible; }
body.is-v2 .v2-arcs { position: absolute; inset: 0; pointer-events: none; }
body.is-v2 .v2-arcs i {
  position: absolute; left: 50%; top: 66%; translate: -50% -50%;
  width: var(--s); aspect-ratio: 1; border-radius: 50%;
  border: var(--w) solid transparent; border-left-color: #fff; border-right-color: #fff;
  opacity: 0; transition: opacity 0.2s ease;
}
body.is-v2 .v2-arcs i:nth-child(1) { --s: 112%; --w: 9px; }
body.is-v2 .v2-arcs i:nth-child(2) { --s: 138%; --w: 7px; }
body.is-v2 .v2-arcs i:nth-child(3) { --s: 164%; --w: 5px; }
body.is-v2 .question-slot.v2-ringing .v2-arcs i { animation: v2-ring 1.2s ease-out 1 both; }
body.is-v2 .question-slot.v2-ringing .v2-arcs i:nth-child(2) { animation-delay: 0.1s; }
body.is-v2 .question-slot.v2-ringing .v2-arcs i:nth-child(3) { animation-delay: 0.2s; }
@keyframes v2-ring { 0% { opacity: 0; scale: 0.9; } 20% { opacity: 0.95; } 100% { opacity: 0; scale: 1.08; } }
/* the answer: the real bell on a white spotlight card */
body.is-v2 .question-face-back { background: #fff; border-radius: 26px; box-shadow: 0 6px 0 rgba(27, 35, 62, 0.12); }

body.is-v2 .question-prompt { color: #1b233e; font-weight: 900; }
body.is-v2 .message {
  width: fit-content; margin: 4px auto 8px; padding: 6px 20px; border-radius: 999px;
  background: #fff; color: #1b233e; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.12);
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-size: 1.15rem; letter-spacing: 0.3px;
}
body.is-v2 .message:empty { visibility: hidden; }

/* Listen sits in the flow right under the mystery bell (v1 pinned it above the
   dock, where it covered the card whenever the scoreboard grew), and the bell
   takes a little less height so it all fits above the bells */
body.is-v2.single-note-game .play-center { position: static; transform: none; inset: auto; width: 100%; margin: 14px auto 0; }
body.is-v2 .question-grid.slots-1 { --tile-size: clamp(130px, min(25vh, 28vw), 230px); }
/* Listen: a big round-ended pill */
body.is-v2.single-note-game #replayBtn {
  background: #009999; color: #fff; border-radius: 999px; box-shadow: 0 6px 0 #007372;
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400;
}
body.is-v2 #replayBtn .transport-label { font-family: inherit; font-weight: 400; font-size: 1.3em; letter-spacing: 0.5px; }

/* the floor: two flat hills under the bells (the dock's own band, recoloured) */
body.is-v2 .bank-dock::before { background: #9dd25f; z-index: -1; }
body.is-v2 .bank-dock::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none;
  bottom: calc(var(--dock-bg-height) + env(safe-area-inset-bottom) - 2px); height: clamp(48px, 8vh, 80px);
  background: url("./hills.svg") center bottom / 100% 100% no-repeat;
}
body.is-v2 .note-label { color: #1b233e; }

/* bells never in lockstep: each sways at its own tempo */
body.is-v2 .bank-note .note-art-bell { transform-origin: 50% 96%; animation: v2-sway var(--v2-t, 2.6s) ease-in-out infinite alternate; animation-delay: var(--v2-d, 0s); }
body.is-v2 .bank-note:nth-child(8n+1) { --v2-t: 2.3s; --v2-d: -0.4s; --v2-a: 1.8deg; }
body.is-v2 .bank-note:nth-child(8n+2) { --v2-t: 2.9s; --v2-d: -1.9s; --v2-a: 2.4deg; }
body.is-v2 .bank-note:nth-child(8n+3) { --v2-t: 2.1s; --v2-d: -0.9s; --v2-a: 1.3deg; }
body.is-v2 .bank-note:nth-child(8n+4) { --v2-t: 3.3s; --v2-d: -2.6s; --v2-a: 2.1deg; }
body.is-v2 .bank-note:nth-child(8n+5) { --v2-t: 2.6s; --v2-d: -0.2s; --v2-a: 1.6deg; }
body.is-v2 .bank-note:nth-child(8n+6) { --v2-t: 3.1s; --v2-d: -1.4s; --v2-a: 1.5deg; }
body.is-v2 .bank-note:nth-child(8n+7) { --v2-t: 2.4s; --v2-d: -2.1s; --v2-a: 2.5deg; }
body.is-v2 .bank-note:nth-child(8n+8) { --v2-t: 2.8s; --v2-d: -0.7s; --v2-a: 1.4deg; }
@keyframes v2-sway { from { rotate: calc(var(--v2-a, 2deg) * -1); } to { rotate: var(--v2-a, 2deg); } }

@media (prefers-reduced-motion: reduce) {
  body.is-v2 .bank-note .note-art-bell, body.is-v2 .question-slot.v2-ringing .v2-arcs i { animation: none; }
  body.is-v2 .question-slot.playing .v2-arcs i { opacity: 0.9; }
}

/* ── Playtest 2026-10-09 ────────────────────────────────────────────────── */
/* "Your turn" is the one cue that says go: a navy pill with white words (it was
   a white pill on the sky, flashed for 800ms and mostly seen mid-fade). Same
   size as the other messages, so nothing below it jumps. */
body.is-v2 .message.is-turn { background: #1b233e; color: #fff; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.25); }
body.is-v2 .message.is-turn.show { animation: v2-turn-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes v2-turn-pop { from { scale: 0.7; } to { scale: 1; } }

/* Three bells get the room under Listen. The bell (stage card included) is one
   square, --v2-bell, sized by the screen; the dock is exactly that bell plus its
   label, so it never reaches up over Listen (at 375x667 the old fixed 236px dock
   covered Listen's lower edge). The beginner note box is 72px tall
   (kindergarten.css), so the bell stands var(--v2-bell) - 72px proud of it and the
   tap area (::before) stretches over the whole drawn bell. */
body.is-v2.wn-beginner #gameScreen {
  --v2-bell: clamp(96px, min(36vw, 26vh), 200px);
  --dock-height: calc(var(--v2-bell) + 46px);
}
body.is-v2.wn-beginner #gameScreen .bank-dock { padding-top: calc(var(--v2-bell) - 72px); }
body.is-v2.wn-beginner #bankGrid { width: min(100%, calc(var(--v2-bell) * 3.3)); max-width: none; gap: 0 4px; }
body.is-v2.wn-beginner .bank-grid.c-major-strip .bank-note .bell-composite { width: var(--v2-bell); height: var(--v2-bell); margin-top: 0; }
body.is-v2.wn-beginner .bank-grid.c-major-strip .bank-note::before { inset: calc(72px - var(--v2-bell)) 0 0 0; }
body.is-v2.wn-beginner .bank-grid.c-major-strip .bank-note .note-label { font-size: 0.85rem; }
/* each bell fills its third of the row, so it centres in it (a 74px note box
   pinned the big bell to the left edge), and its stage card stays under it */
body.is-v2.wn-beginner #bankGrid .bank-note { width: 100%; min-width: 0; justify-self: stretch; }
body.is-v2.wn-beginner .bank-grid.c-major-strip .bank-note .note-art-stage { left: 12%; width: 76%; height: calc(var(--v2-bell) * 0.34); }

@media (prefers-reduced-motion: reduce) {
  body.is-v2 .message.is-turn.show { animation: none; }
}