/*!
 * Whack-a-Bell v2 — the cover's field of holes over the same game (with js/kid-kit.js).
 * Colours from the cover (covers/whack-a-bell/scene.js): sky #8fd6f4, far hill
 * #a9dbc4, the field #9dd25f, pods: sand rim #ead8b0 / rim shade #c9b48a /
 * hole #5b4636, mallet head C red with E yellow bands on a #c98a4b handle.
 */
body.is-v2 {
  --wb-grass: #9dd25f;
  --wb-sky1: #8fd6f4; --wb-sky2: #8fd6f4;
  background: #8fd6f4;
}
body.is-v2 .wb-scenery .kk-scene { position: absolute; inset: 0; }

/* the game's own menu stays in the page (the kit presses its buttons) but is never seen */
html.kk-menu-on body.is-v2 { overflow: hidden; }
body.is-v2 #wbMenu { visibility: hidden; }
body.is-v2 #wbMenu .wb-field-deco { display: none; }

/* the menu's field gets the cover's holes (decoration only) */
body.is-v2 .kk-menu::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("./menu-holes.svg") center bottom / cover no-repeat;
}
body.is-v2 .kk-menu[data-view="map"]::after { display: none; }

/* the mallet on the Whack! button: the cover's toy mallet (a code stand-in until Rob's art) */
.v2-mallet-ico { display: grid; place-items: center; width: 100%; height: 100%; }
.v2-mallet-ico svg { height: 96%; translate: 0 -6%; width: auto; filter: drop-shadow(0 4px 0 rgba(27, 35, 62, 0.25)); }
.kk-btn .kk-ico svg path, .kk-btn .kk-ico svg circle { vector-effect: none; }

/* a locked stone that isn't reached yet: a little "not yet" shake */
.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%; } }

/* the game's rows, moved into the grown-ups sheet, wear the kit's pills */
.kk-sheet .wb-optrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; justify-content: flex-start; }
.kk-sheet .wb-optlabel { min-width: 74px; font-size: 12px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #8a93ad; opacity: 1; }
.kk-sheet .wb-opt {
  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 .wb-opt.is-on { background: #1b233e; border-color: #1b233e; color: #fff; }

/* ── Play: a second, farther hill behind the field, like the cover ─────── */
body.is-v2 .wb-field::before {
  content: ""; position: absolute; z-index: -2;
  left: 50%; transform: translateX(-50%);
  width: 100vw; top: -34px; height: 96px;
  background: url("./back-hill.svg") center / 100% 100% no-repeat;
}
/* more sky than v1 on tall screens, like the cover (the field still meets the pods) */
@media (min-height: 720px) and (orientation: landscape) {
  body.is-v2 .wb-field { padding-top: clamp(56px, 8vh, 130px); }
  body.is-v2 .wb-wave { height: clamp(58px, 7vh, 100px); }
  body.is-v2 .wb-field::after { top: clamp(52px, 6.6vh, 94px); }
  body.is-v2 .wb-field::before { top: calc(clamp(0px, 0.6vh, 8px) - 40px); height: clamp(96px, 12vh, 150px); }
}

/* ── the pods: the cover's holes (sand rim, dark hole, a front lip over the bell) */
body.is-v2 .wb-pod-back,
body.is-v2 .wb-pod-front {
  left: 2%; right: 2%; bottom: 0; height: 30%;
  border-radius: 0; box-shadow: none; background-color: transparent;
  background-position: center; background-size: 100% 100%; background-repeat: no-repeat;
}
body.is-v2 .wb-pod-back { background-image: url("./pod-back.svg"); }
body.is-v2 .wb-pod-front { background-image: url("./pod-front.svg"); }
body.is-v2 .wb-bell { width: 70%; }

/* bells never in lockstep: those that rise together (Find's choices, Echo's
   row) rise one by one, and each sways at its own tempo */
body.is-v2 .wb-pod.is-held .wb-bell { animation: wb-pop 0.2s cubic-bezier(.2,1.5,.5,1) both; transform: none; }
body.is-v2 .wb-pod:nth-child(1) { --v2-d: 0.04s; --v2-t: 2.3s; --v2-a: 1.6deg; }
body.is-v2 .wb-pod:nth-child(2) { --v2-d: 0.17s; --v2-t: 2.9s; --v2-a: 2.2deg; }
body.is-v2 .wb-pod:nth-child(3) { --v2-d: 0.09s; --v2-t: 2.1s; --v2-a: 1.2deg; }
body.is-v2 .wb-pod:nth-child(4) { --v2-d: 0.24s; --v2-t: 3.3s; --v2-a: 2deg; }
body.is-v2 .wb-pod:nth-child(5) { --v2-d: 0.13s; --v2-t: 2.6s; --v2-a: 1.8deg; }
body.is-v2 .wb-pod:nth-child(6) { --v2-d: 0s;    --v2-t: 3.1s; --v2-a: 1.4deg; }
body.is-v2 .wb-pod:nth-child(7) { --v2-d: 0.2s;  --v2-t: 2.4s; --v2-a: 2.4deg; }
body.is-v2 .wb-pod:nth-child(8) { --v2-d: 0.07s; --v2-t: 2.8s; --v2-a: 1.5deg; }
body.is-v2 .wb-pod.is-held .wb-bell { animation-delay: var(--v2-d, 0s); }
/* a wrong tap wobbles the bell itself, so the rise above never re-runs */
body.is-v2 .wb-pod.is-wrong .wb-bell svg.wb-rig,
body.is-v2 .wb-pod.is-wrong .wb-bell img { transform-origin: 50% 96%; animation: v2-wobble 0.4s ease-in-out; }
@keyframes v2-wobble { 25% { rotate: -8deg; } 75% { rotate: 8deg; } }
body.is-v2 .wb-bell svg.wb-rig {
  transform-origin: 50% 96%;
  animation: v2-sway var(--v2-t, 2.6s) ease-in-out infinite alternate;
  animation-delay: calc(var(--v2-d, 0s) * -7);
}
@keyframes v2-sway { from { rotate: calc(var(--v2-a, 2deg) * -1); } to { rotate: var(--v2-a, 2deg); } }

/* the mallet's bonk, over the tapped pod (look only, never a target) */
.v2-bonk {
  position: absolute; z-index: 3; pointer-events: none;
  left: 28%; top: -28%; width: 62%; aspect-ratio: 1;
  transform-origin: 70% 92%;
  animation: v2-bonk 0.4s cubic-bezier(.3, 1.4, .5, 1) forwards;
}
.v2-bonk svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 0 rgba(27, 35, 62, 0.2)); }
.v2-bonk.is-flip { left: auto; right: 28%; transform-origin: 30% 92%; scale: -1 1; }
@keyframes v2-bonk {
  0%   { rotate: 34deg; opacity: 0; }
  25%  { rotate: -16deg; opacity: 1; }
  45%  { rotate: -6deg; }
  80%  { rotate: -10deg; opacity: 1; }
  100% { rotate: 6deg; opacity: 0; }
}

/* ── HUD and prompt: light pills on the sky ─────────────────────────────── */
body.is-v2 .wb-chip { background: rgba(255, 255, 255, 0.94); color: #1b233e; border-radius: 999px; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.14); }
body.is-v2 .wb-chip b { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; }
body.is-v2 .wb-chip small { color: #6a7392; opacity: 1; }
body.is-v2 .wb-ask { border-radius: 999px; background: #fff; padding: 8px 22px; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.14); }
body.is-v2 .wb-ask .wb-ask-note { display: inline-block; min-width: 1.3em; text-align: center; border-radius: 999px; padding: 0 0.35em;
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; }
body.is-v2 .wb-hear { border-radius: 999px; box-shadow: 0 4px 0 #007372; }

/* ── big words in Grobold: countdown, streak toasts, results ────────────── */
body.is-v2 .wb-count b { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; color: #fff; text-shadow: 0 6px 0 rgba(27, 35, 62, 0.3); }
body.is-v2 .wb-toast { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; letter-spacing: 0.5px; }
body.is-v2 .wb-veil { background: rgba(27, 35, 62, 0.35); }
body.is-v2 .wb-card { border: 0; border-radius: 30px; box-shadow: 0 20px 50px rgba(15, 12, 40, 0.3); }
body.is-v2 .wb-card h2 {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps;
  font-size: 40px; letter-spacing: 0; color: #E72829; text-shadow: 0 3px 0 #b11d1e; text-transform: capitalize;
}
body.is-v2 .wb-big { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; color: #009999; font-size: 64px; text-shadow: 0 4px 0 #007372; }
body.is-v2 .wb-big small { font-family: "Nunito", system-ui, sans-serif; font-weight: 900; text-shadow: none; margin-top: 6px; }
body.is-v2 .wb-again { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; background: #6AB845; box-shadow: 0 6px 0 #4c8f30; }

/* a phone on its side: v1 left the pods thumbnail-small under a two-row
   header. Here the prompt joins the HUD row and the garden takes the room. */
@media (orientation: landscape) and (max-height: 520px) {
  body.is-v2 .wb-hud { padding-top: 14px; }
  body.is-v2 .wb-chip { min-width: 84px; padding: 5px 12px 6px; }
  body.is-v2 .wb-chip b { font-size: 20px; }
  body.is-v2 .wb-prompt { position: absolute; top: 12px; right: 70px; padding: 0; min-height: 0; flex-wrap: nowrap; }
  body.is-v2 .wb-ask { font-size: 20px; padding: 6px 16px; }
  body.is-v2 .wb-hear { padding: 10px 14px; font-size: 14px; }
  body.is-v2 .wb-garden { --wb-chrome: 150px; margin-top: 0; padding-top: 0; }
  body.is-v2 .wb-field { padding-top: 34px; padding-bottom: 8px; }
  body.is-v2 .wb-wave { height: 40px; }
  body.is-v2 .wb-field::after { top: 36px; }
  body.is-v2 .wb-field::before { top: -22px; height: 64px; }
  /* the results card fits the short screen (it ran off the bottom at 390 tall) */
  body.is-v2 .wb-veil { padding: 10px 18px; }
  body.is-v2 .wb-card { padding: 22px 22px 10px; gap: 4px; }
  body.is-v2 .wb-card h2 { line-height: 1.1; }
  body.is-v2 .wb-card h2 { font-size: 30px; }
  body.is-v2 .wb-big { font-size: 46px; }
  body.is-v2 .wb-again { padding: 12px 40px; margin-top: 2px; }
}
/* an upright phone: three picture buttons in one row (the kit's gap is a hair too wide at 390) */
@media (orientation: portrait) and (max-width: 700px) {
  body.is-v2 .kk-big:has(.kk-btn:nth-child(3)) { gap: 10px; flex-wrap: nowrap; }
  body.is-v2 .kk-big:has(.kk-btn:nth-child(3)) .kk-btn { width: min(28vw, 150px); }
}

@media (prefers-reduced-motion: reduce) {
  body.is-v2 .wb-bell svg.wb-rig { animation: none; }
  body.is-v2 .wb-pod.is-held .wb-bell { animation: none; transform: translate(-50%, 0); }
}