/*!
 * Beet Jumper v2 — the cover's flat day over the same game (with js/kid-kit.js).
 * Colours from the cover (covers/bell-jump): sky #8fd6f4, far hill #a9dbc4,
 * near hill #9dd25f, platforms in the bell colours with brown ink on yellow E.
 * The canvas itself is drawn by jump-v1.js when window.BEET_SKIN = "v2".
 */
body.jump-page.is-v2 { background: #8fd6f4; color: #1b233e; }
body.is-v2 .v2-scenery { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
body.is-v2 .v2-scenery .kk-scene { position: absolute; inset: 0; }
body.is-v2 .app { position: relative; z-index: 1; }

/* 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 #selectScreen { visibility: hidden; }

/* Rob's vector Beet on the Jump! button and in the hero corner */
.v2-beet-ico { position: relative; display: block; width: 100%; height: 100%; }
.v2-beet-ico img { position: absolute; inset: -14% 0 0; width: 100%; height: 114%; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(27, 35, 62, 0.22)); }
.kk-hero.v2-beet-hero { width: clamp(150px, 15vw, 230px); aspect-ratio: 100 / 188; bottom: -12%; right: 3%; }
.kk-hero.v2-beet-hero img { width: 100%; height: 100%; object-fit: contain; }
.kk-menu[data-view="map"] .v2-beet-hero { display: 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 sheet starts below the shared chrome (Menu pill, Pause/coins): on an
   upright phone the kit's centred sheet put its close button under it. */
body.is-v2 .kk-menu[data-view="sheet"] .kk-sheet {
  top: calc(50% + 32px + env(safe-area-inset-top) / 2);
  max-height: calc(100svh - 88px - env(safe-area-inset-top));
}
.kk-sheet .kk-list li { flex-wrap: wrap; row-gap: 0; }
.kk-sheet .v2-best { font-size: 15px; color: #1b233e; }

/* An upright phone: Jump! is the one big button across the top, Climbs and
   Endless side by side under it. */
@media (orientation: portrait) and (max-width: 700px) {
  body.is-v2 .kk-big { display: grid; grid-template-columns: 1fr 1fr; width: min(88vw, 420px); }
  body.is-v2 .kk-big:has(.kk-btn:nth-child(3)):not(:has(.kk-btn:nth-child(4))) .kk-btn { width: 100%; border-radius: 28px; }
  body.is-v2 .kk-big:has(.kk-btn:nth-child(3)):not(:has(.kk-btn:nth-child(4))) .kk-btn:first-child { grid-column: span 2; aspect-ratio: 1.9 / 1; }
  body.is-v2 .kk-big:has(.kk-btn:nth-child(3)):not(:has(.kk-btn:nth-child(4))) .kk-btn b { font-size: 26px; }
  body.is-v2 .kk-big:has(.kk-btn:nth-child(3)):not(:has(.kk-btn:nth-child(4))) .kk-btn:first-child b { font-size: 34px; }
  body.is-v2 .kk-word { font-size: clamp(64px, 16vw, 116px); }
  body.is-v2 .kk-kicker { font-size: clamp(38px, 10vw, 58px); }
}

/* ── Play: the cover's day around a white-framed canvas ────────────────── */
body.is-v2 .game-screen { background: none; }
body.is-v2 #gameCanvas { border-radius: 24px; box-shadow: 0 0 0 5px #fff, 0 14px 30px rgba(27, 35, 62, 0.18); }
body.is-v2 .hud-float {
  padding: 5px 14px 4px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94); color: #1b233e; text-shadow: none;
  box-shadow: 0 3px 0 rgba(27, 35, 62, 0.14);
}
body.is-v2 #hudHeight { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-size: 26px; text-align: center; min-width: 76px; }
body.is-v2 #hudHeight .hud-label { font-family: "Nunito", system-ui, sans-serif; font-weight: 900; font-size: 9px; color: #8a93ad; opacity: 1; }
body.is-v2 #hudNotes { font-size: 19px; }
body.is-v2 .toast {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400;
  color: #fff; text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.4), 0 0 14px rgba(27, 35, 62, 0.2);
}
body.is-v2 .toast.big { color: #ffd25b; text-shadow: 0 0.07em 0 #b07d00, 0 0 14px rgba(27, 35, 62, 0.25); }
body.is-v2 .toast .toast-sub { font-family: "Nunito", system-ui, sans-serif; font-weight: 900; color: #fff; }

/* ── Results: white cards, Grobold words ───────────────────────────────── */
body.is-v2 .panel-veil { background: rgba(27, 35, 62, 0.35); }
body.is-v2 .panel {
  background: #fdfbf6; color: #1b233e; border: 0; border-radius: 30px;
  box-shadow: 0 20px 50px rgba(27, 35, 62, 0.3);
}
body.is-v2 .panel h2, body.is-v2 .pause-panel h2[style] {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps;
  text-transform: lowercase; letter-spacing: 0; font-size: 38px; line-height: 1;
  color: #7b569e !important; text-shadow: 0 0.07em 0 #4b3466; margin-bottom: 8px;
}
body.is-v2 .panel h2::first-letter { text-transform: uppercase; }
body.is-v2 .panel .panel-sub, body.is-v2 .panel .stat-row { color: #6a7392; }
body.is-v2 .star-row { color: #ffc21c; text-shadow: 0 3px 0 #c98f00; }
body.is-v2 .star-row .off { color: #d5dced; text-shadow: none; }
body.is-v2 .panel .big-stat { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; }
body.is-v2 .panel .big-stat .hud-label { font-family: "Nunito", system-ui, sans-serif; font-weight: 900; color: #8a93ad; }
body.is-v2 .panel .notes-played .music-note { color: #7b569e; }
body.is-v2 .action-btn {
  border-radius: 999px; min-height: 52px; padding: 13px 26px;
  background: #fff; color: #1b233e; border: 2px solid #d5dced; box-shadow: 0 4px 0 #d5dced;
}
body.is-v2 .action-btn.primary { background: #6ab845; border-color: #6ab845; color: #fff; box-shadow: 0 5px 0 #4c8f30; }

/* Twelve climbs: smaller stones than the kit's (sized for eight), so the arch never overlaps */
body.is-v2 .kk-stone { width: clamp(56px, 6.6vw, 86px); border-width: 5px; }
body.is-v2 .kk-stone .kk-num { font-size: clamp(22px, 2.9vw, 34px); }
body.is-v2 .kk-stone .kk-stars { font-size: clamp(9px, 1vw, 12px); letter-spacing: 0; }
body.is-v2 .kk-stone .kk-lock { width: 24px; height: 24px; }
body.is-v2 .kk-stone .kk-lock svg { width: 15px; height: 15px; }
body.is-v2 .kk-stone .kk-go { width: 36px; height: 36px; right: -12px; top: -12px; }

/* A phone on its side: the results card fits (or scrolls), the stones fit the arch */
@media (max-height: 500px) {
  body.is-v2 .panel-veil { overflow-y: auto; place-items: start center; padding: 10px 18px; }
  body.is-v2 .panel { padding: 14px 18px 14px; width: min(520px, 94vw); }
  body.is-v2 .panel h2, body.is-v2 .pause-panel h2[style] { font-size: 28px; margin-bottom: 2px; }
  body.is-v2 .star-row { font-size: 30px; margin: 0 0 2px; }
  body.is-v2 .panel .big-stat { font-size: 28px; }
  body.is-v2 .panel .notes-played { font-size: 17px; margin: 4px 0 0; }
  body.is-v2 .panel-actions { margin-top: 10px; flex-wrap: nowrap; }
  body.is-v2 .action-btn { min-height: 46px; padding: 10px 18px; font-size: 16px; }
  body.is-v2 .kk-stone { width: 50px; border-width: 4px; }
  body.is-v2 .kk-stone .kk-num { font-size: 20px; }
  body.is-v2 .kk-stone .kk-stars { font-size: 8px; }
  body.is-v2 .kk-stone .kk-lock { width: 20px; height: 20px; }
  body.is-v2 .kk-stone .kk-lock svg { width: 12px; height: 12px; }
}