/*!
 * What Interval Is It? v2 — the cover's world over the same game (with js/kid-kit.js).
 * Colours from the cover (covers/what-interval-is-it/scene.js): sky #8fd6f4, far
 * hill #a9dbc4, near hill #9dd25f, steps = pastel fronts with the note colour on
 * top, numbers in Grobold brown #512d1b, navy #1b233e for words.
 */
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 menu stays in the page (the kit presses its buttons) but is never seen */
body.is-v2 .wi-menu { 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-wi-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);
}
/* 16 stones: a locked one that isn't reached yet shakes "not yet" */
.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%; } }
.v2-wi-menu .kk-list li > span.v2-lv { flex: 1; min-width: 0; display: grid; }
.v2-wi-menu .kk-list li > span.v2-lv small { font-size: 12px; font-weight: 700; color: #6a7392; }

/* ── Every screen: light pills, flat cards, Grobold for the big words ── */
body.is-v2 .wi-quit, body.is-v2 .wi-progress, body.is-v2 .wi-streak:not(:empty) {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  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 .wi-quit:hover { color: #1b233e; background: #fff; }
body.is-v2 .wi-streak:not(:empty) { font-size: 16px; letter-spacing: 0; font-weight: 900; }
body.is-v2 .wi-hud { gap: 8px; }
body.is-v2 .wi-quit, body.is-v2 .wi-progress { white-space: nowrap; }
body.is-v2 .wi-progress { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 40px; }
@media (max-width: 420px) { body.is-v2 .wi-quit, body.is-v2 .wi-progress { font-size: 11px; letter-spacing: 0.6px; padding: 0 12px; } }
body.is-v2 .wi-dots {
  width: fit-content; max-width: 100%; margin: 0 auto 12px; padding: 8px 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 .wi-dots i { width: 11px; height: 11px; background: #dfe5f0; }
body.is-v2 .wi-dots i.hit { background: #6ab845; }
body.is-v2 .wi-dots i.miss { background: #ffc21c; }
body.is-v2 .wi-dots i.now { background: #1b233e; }

/* the staff: a white card, no hairline, flat drop */
body.is-v2 .wi-staff { border: 0; border-radius: 28px; box-shadow: 0 6px 0 rgba(27, 35, 62, 0.12); }
body.is-v2 .wi-mystery {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400;
  color: #1b233e; opacity: 0.72; text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.18);
}

/* Play Again: a big round-ended pill, Grobold */
body.is-v2 .wi-listen {
  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 .wi-listen:hover { box-shadow: 0 8px 0 #4e9636; }
body.is-v2 .wi-listen:active { box-shadow: 0 2px 0 #4e9636; }

/* ── The bells stand on the cover's hill (one floor) ─────────────────── */
body.is-v2 .wi-bells { position: relative; isolation: isolate; padding-top: 80px; }   /* v1 left ~40px of sky above the heads */
@media (min-width: 900px) { body.is-v2 .wi-bells { padding-top: 92px; } }
body.is-v2 .wi-bells::before {           /* the ground: from the stages' feet to the bottom of the page
                                            (border-image outset paints below without adding scroll) */
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 30px;
  border-image: conic-gradient(#9dd25f 0 0) fill 0 / / 0 0 100vh 0;
}
body.is-v2 .wi-bells::after {            /* its rolling top edge, and the far hill behind it */
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 28px; height: 70px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140 L0 58 C 240 20 420 30 640 52 C 880 76 1100 18 1440 40 L1440 140Z' fill='%23a9dbc4'/%3E%3Cpath d='M0 140 L0 92 C 300 60 520 108 760 96 C 1000 84 1200 70 1440 88 L1440 140Z' fill='%239dd25f'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
body.is-v2 .wi-bell-label { color: #1b233e; font-size: 14px; }
/* never in lockstep: each bell sways at its own tempo about its foot */
body.is-v2 .wi-bell-body { transform-origin: 50% 100%; animation: v2-sway var(--t, 2.6s) ease-in-out infinite alternate; animation-delay: var(--d, 0s); }   /* the body, never the stage: the floor stays flat */
body.is-v2 .wi-bell:nth-child(8n+1) { --t: 2.3s; --d: -0.4s; --a: 1.6deg; }
body.is-v2 .wi-bell:nth-child(8n+2) { --t: 2.9s; --d: -1.9s; --a: 2.2deg; }
body.is-v2 .wi-bell:nth-child(8n+3) { --t: 2.1s; --d: -0.9s; --a: 1.2deg; }
body.is-v2 .wi-bell:nth-child(8n+4) { --t: 3.3s; --d: -2.6s; --a: 2deg; }
body.is-v2 .wi-bell:nth-child(8n+5) { --t: 2.6s; --d: -0.2s; --a: 1.5deg; }
body.is-v2 .wi-bell:nth-child(8n+6) { --t: 3.1s; --d: -1.4s; --a: 1.4deg; }
body.is-v2 .wi-bell:nth-child(8n+7) { --t: 2.4s; --d: -2.1s; --a: 2.3deg; }
body.is-v2 .wi-bell:nth-child(8n+8) { --t: 2.8s; --d: -0.7s; --a: 1.3deg; }
@keyframes v2-sway { from { rotate: calc(var(--a, 2deg) * -1); } to { rotate: var(--a, 2deg); } }
body.is-v2 .wi-bell:disabled { opacity: 0.45; }
body.is-v2 .wi-bell:disabled .wi-bell-body { animation-play-state: paused; }
body.is-v2 .wi-bell.is-right { filter: none; }
/* the right bell rings: white sound arcs, like the cover's mystery bell */
body.is-v2 .v2-arcs { position: absolute; inset: 0; pointer-events: none; }
body.is-v2 .v2-arcs i {
  position: absolute; left: 50%; top: 56%; 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; animation: v2-ring 1.3s ease-out 1 both;
}
body.is-v2 .v2-arcs i:nth-child(1) { --s: 112%; --w: 7px; }
body.is-v2 .v2-arcs i:nth-child(2) { --s: 140%; --w: 5px; animation-delay: 0.1s; }
body.is-v2 .v2-arcs i:nth-child(3) { --s: 168%; --w: 4px; animation-delay: 0.2s; }
@keyframes v2-ring { 0% { opacity: 0; scale: 0.9; } 20% { opacity: 0.95; } 100% { opacity: 0; scale: 1.08; } }

/* ── Name answers: flat cards, each interval in its scale step's colour ─ */
body.is-v2 .wi-name-btn {
  --c: #009999;
  border: 0; border-radius: 24px; background: var(--c); color: #fff;
  box-shadow: 0 6px 0 rgba(27, 35, 62, 0.22);
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-size: clamp(17px, 3.8vw, 22px); letter-spacing: 0.3px;
  text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.28); padding: 18px 12px;
}
body.is-v2 .wi-name-btn.v2-dark { color: #1b233e; text-shadow: none; }
body.is-v2 .wi-name-btn:hover:not(:disabled) { border-color: transparent; transform: translateY(-3px); }
body.is-v2 .wi-name-btn:disabled { opacity: 0.35; }
body.is-v2 .wi-name-btn.is-right { background: var(--c); border: 0; color: inherit; opacity: 1; box-shadow: 0 0 0 5px #fff, 0 6px 0 5px rgba(27, 35, 62, 0.18); }
body.is-v2 .wi-name-btn.is-right:not(.v2-dark) { color: #fff; }

/* ── The answer: the interval's name, then the cover's counting steps ── */
/* the ground under the bells is a positioned layer: what follows it must stack above it */
body.is-v2 .wi-feedback, body.is-v2 .wi-next { position: relative; z-index: 1; color: #1b233e; }
body.is-v2 .wi-feedback:not(.is-right) {
  width: fit-content; max-width: 100%; margin: 30px auto 0; padding: 8px 20px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94); box-shadow: 0 3px 0 rgba(27, 35, 62, 0.12);
}
body.is-v2 .wi-feedback.is-right {
  width: fit-content; max-width: 100%; margin: 30px auto 0; padding: 12px 22px 14px; border-radius: 26px;
  background: #fff; color: #1b233e; box-shadow: 0 5px 0 rgba(27, 35, 62, 0.12);
}
body.is-v2 .wi-interval-big {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps;
  letter-spacing: 0.5px; color: #1b233e; font-size: clamp(1.9rem, 6vw, 2.7rem);
}
body.is-v2 .v2-count { display: flex; justify-content: center; align-items: flex-end; gap: 3px; margin: 10px auto 0; }
body.is-v2 .v2-step {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  width: 34px; height: var(--h); background: var(--t); border-top: 6px solid var(--c); border-radius: 4px 4px 0 0; transform-origin: 50% 100%;
  animation: v2-step-in 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: var(--d);
}
body.is-v2 .v2-step b { font: 400 17px/1.25 "Grobold", "Nunito", system-ui, sans-serif; color: #512d1b; }
body.is-v2 .v2-step em { position: absolute; top: 100%; margin-top: 3px; font: 900 11px/1 "Nunito", system-ui, sans-serif; font-style: normal; color: #6a7392; }
body.is-v2 .v2-step.is-end em { color: #1b233e; font-size: 12px; }
body.is-v2 .v2-count { padding-bottom: 16px; }
/* wide: the name and its sentence on the left, the steps beside them (one card, less height) */
@media (min-width: 560px) {
  body.is-v2 .wi-feedback.is-right { display: grid; grid-template-columns: auto auto; column-gap: 22px; align-items: center; text-align: left; }
  body.is-v2 .wi-feedback.is-right .wi-interval-big, body.is-v2 .wi-feedback.is-right .wi-interval-line { grid-column: 1; text-align: left; }
  body.is-v2 .wi-feedback.is-right .v2-count { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}
/* the round is a little taller than v1 (pills, the steps): give the staff card back some height */
body.is-v2 .wi-hud { margin-bottom: 8px; }
body.is-v2 .wi-dots { margin-bottom: 10px; padding: 6px 12px; }
@media (min-width: 620px) { body.is-v2 .wi-staff svg { max-height: 200px; } }
@keyframes v2-step-in { from { translate: 0 10px; scale: 1 0.6; } }   /* no fade: a step is never invisible, even mid-pop */

/* Next / the results buttons: round-ended, Grobold */
body.is-v2 .wi-btn {
  border-radius: 999px; padding: 14px 28px; 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 .wi-btn.ghost { background: #fff; color: #1b233e; border: 0; box-shadow: 0 5px 0 rgba(27, 35, 62, 0.14); }

/* ── Results: G cheers, a Grobold headline on the sky, a white card ─── */
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 .wi-eyebrow { color: #1b233e; opacity: 0.7; }
body.is-v2 .wi-result-head {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps;
  color: #fff; font-size: clamp(34px, 8vw, 54px); letter-spacing: 0.5px; text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.32);
}
body.is-v2 .wi-scorecard { background: #fff; border: 0; border-radius: 28px; box-shadow: 0 6px 0 rgba(27, 35, 62, 0.12); }
body.is-v2 .wi-big { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; color: #1b233e; }
body.is-v2 .wi-results > .wi-mini-title { color: #1b233e; opacity: 0.7; }
body.is-v2 .wi-practised { background: #fff; border-radius: 22px; padding: 4px 16px; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.1); }
body.is-v2 .wi-practised li:first-child { border-top: 0; }

/* ── Practice Mode and the Quiz Rush setup: the game's own forms, on a white sheet ── */
body.is-v2 .wi-practice {
  background: #fdfbf6; border-radius: 30px; box-shadow: 0 8px 0 rgba(27, 35, 62, 0.12);
  margin: calc(70px + env(safe-area-inset-top)) auto 28px; padding: 22px max(20px, env(safe-area-inset-right)) 26px max(20px, env(safe-area-inset-left));
  width: calc(100% - 24px);
}
@media (min-width: 901px) { body.is-v2 .wi-practice { margin-top: 72px; padding: 26px 30px 30px; } }
body.is-v2 .wi-practice .wi-title.small { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; color: #1b233e; letter-spacing: 0.4px; }
body.is-v2 .wi-practice .wi-quit { box-shadow: none; background: rgba(27, 35, 62, 0.07); margin-bottom: 14px; }
body.is-v2 .wi-seg-btn, body.is-v2 .wi-check, body.is-v2 .wi-preset { border-radius: 999px; min-height: 44px; }

/* the coach marks keep their own look; the bubble's button wears Grobold */
body.is-v2 .wi-coach-skip { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; letter-spacing: 0.4px; }

@media (prefers-reduced-motion: reduce) {
  body.is-v2 .wi-bell-body, body.is-v2 .v2-arcs i, body.is-v2 .v2-step { animation: none; }
}
/* Next sits on the green ground: teal, so it never melts into the grass */
body.is-v2 .wi-next .wi-btn { background: #009999; box-shadow: 0 6px 0 #007372; }

/* ── A phone held sideways (≤ 520 px tall): the three-row title and the
   buttons both fit, and the round keeps its bells in view ─────────────── */
@media (orientation: landscape) and (max-height: 520px) {
  .v2-wi-menu .kk-front { padding-top: 54px; padding-bottom: 18px; gap: 12px; }
  .v2-wi-menu .kk-kicker { font-size: 30px; }
  .v2-wi-menu .kk-word { font-size: 62px; }
  .v2-wi-menu .kk-title::after { font-size: 24px; }
  .v2-wi-menu .kk-btn { width: 168px; }
  .v2-wi-menu .kk-btn b { font-size: 24px; }
  body.is-v2 .wi-listen { padding: 10px 20px; font-size: 19px; }
  body.is-v2 .wi-controls { margin-bottom: 8px; }
  body.is-v2 .wi-bells { padding-top: 74px; }
}