/*!
 * Bell Run v2 — the cover's flat world over the same game (with js/kid-kit.js).
 * Colours from the cover (covers/bell-run/scene.js): sky #8fd6f4, hills
 * #a9dbc4 / #9dd25f, grass #6abb4a / #4e9e3a, dirt #8a5a34. The level is drawn
 * by the canvas (BELLRUN_SKIN = "v2").
 */
body.is-v2.bellrun-page { background: #8fd6f4; }
.v2-world { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.v2-world .kk-scene { position: absolute; inset: 0; }

/* the game's own start screen 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; }

/* ── the front: your bell on Play, a tiny world on Levels, three bells on Bells */
.v2-bell-ico { height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(27, 35, 62, 0.25)); }
.kk-btn .kk-ico:has(.v2-bell-ico) { height: 52%; margin-bottom: 2px; }
.kk-ico:has(.v2-bells-ico) { position: relative; }
.v2-bells-ico { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.v2-bells-ico img { height: 64%; width: auto; min-width: 0; filter: drop-shadow(0 3px 0 rgba(27, 35, 62, 0.25)); }
.v2-bells-ico img:nth-child(2) { height: 100%; margin: 0 -10%; position: relative; z-index: 1; }

/* ── the Bells view: the game's own wheel, big, with Play under it ──────── */
.kk-menu[data-view="bells"] .kk-front,
.kk-menu[data-view="bells"] .kk-hero { display: none; }
.v2-bells { display: none; }
.kk-menu[data-view="bells"] .v2-bells {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(8px, 3vh, 30px); padding: 70px 16px 40px;
}
.v2-wheel-slot { width: min(760px, 100%); }
.v2-bells .bell-wheel { width: 100%; height: 230px; margin: 0; }
.v2-bells .bw-track { inset: 0 64px; }
.v2-bells .bw-item { width: 190px; height: 190px; top: 100px; }
.v2-bells .bw-arrow { width: 64px; height: 64px; background: #fff; box-shadow: 0 5px 0 rgba(27, 35, 62, 0.15); }
.v2-bells .bw-arrow svg { width: 32px; height: 32px; }
.v2-bells .v2-bells-go { width: clamp(150px, 22vw, 220px); }
@media (max-height: 520px) {
  .kk-menu[data-view="bells"] .v2-bells { flex-direction: row; padding: 64px 20px 16px; }
  .v2-wheel-slot { width: min(520px, 62vw); }
  .v2-bells .bell-wheel { height: 190px; }
  .v2-bells .bw-item { width: 150px; height: 150px; top: 86px; }
  .v2-bells .v2-bells-go { width: 160px; }
}
@media (max-width: 520px) {
  .v2-bells .bell-wheel { height: 190px; }
  .v2-bells .bw-track { inset: 0 50px; }
  .v2-bells .bw-item { width: 150px; height: 150px; top: 86px; }
  .v2-bells .bw-arrow { width: 52px; height: 52px; }
}

/* ── the map: one stone per world, wearing its own picture ──────────────── */
.kk-map .kk-stone {
  width: var(--v2-stone, clamp(76px, 10vw, 118px)); border-width: 5px;
  background: var(--c) var(--shot, none) center / cover no-repeat;
  justify-content: flex-end; padding-bottom: calc(var(--v2-stone, 90px) * 0.1);
}
.kk-map .kk-num {
  font-size: calc(var(--v2-stone, 90px) * 0.24);
  min-width: 1.6em; padding: 0.12em 0.35em 0.02em; border-radius: 999px;
  background: #fff; color: #1b233e; text-shadow: none; line-height: 1;
}
.kk-map .kk-stone .kk-stars { font-size: calc(var(--v2-stone, 90px) * 0.13); background: rgba(27, 35, 62, 0.55); border-radius: 999px; padding: 0 0.4em; }
.kk-map .kk-stone:not(.is-done) .kk-stars { display: none; }
.kk-map .kk-stone.is-done { border-color: #ffd25b; }
.kk-map .kk-stone .kk-lock { position: absolute; top: 8%; width: 28px; height: 28px; }
.kk-map .kk-stone.is-locked { filter: saturate(0.5) brightness(0.95); }
.kk-map .kk-go { width: 38px; height: 38px; right: -12px; top: -12px; }

/* the sheet's list: a long name wraps beside its number, stars on the right */
.kk-sheet .kk-list li { align-items: flex-start; }
.kk-sheet .kk-list li > span:first-of-type { flex: 1; }
@media (max-width: 700px) {
  .kk-menu[data-view="sheet"] .kk-sheet { top: calc(env(safe-area-inset-top) + 70px); translate: -50% 0; max-height: calc(100svh - 86px - env(safe-area-inset-top)); }
}

/* ── Play: the stage in a white frame on the sky, the HUD as light pills ── */
body.is-v2 .stage { border-radius: 22px; box-shadow: 0 0 0 6px #fff, 0 10px 30px 6px rgba(27, 35, 62, 0.18); }
body.is-v2 .hud { text-shadow: none; font-size: 18px; color: #1b233e; gap: 8px; }
body.is-v2 .hud > span {
  background: #fff; border-radius: 999px; padding: 5px 14px 4px;
  box-shadow: 0 4px 0 rgba(27, 35, 62, 0.14);
}
body.is-v2 .hud > span { white-space: nowrap; }
@media (max-width: 600px) { body.is-v2 .hud { font-size: 14px; gap: 5px; } body.is-v2 .hud > span { padding: 4px 9px 3px; } }
body.is-v2 .hud-notes, body.is-v2 .hud-golden { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; letter-spacing: 0.5px; }
body.is-v2 .ready-title {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-size: clamp(20px, 4.6vw, 36px); letter-spacing: 0.5px; text-align: center;
  text-shadow: 0 0.07em 0 #1b233e, 0 0.12em 0.25em rgba(27, 35, 62, 0.3);
}
body.is-v2 .ready-sub { max-width: 92%; text-align: center; background: #fff; color: #1b233e; text-shadow: none; border-radius: 999px; padding: 6px 16px; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.14); }
body.is-v2 .ready-sub kbd { background: #e8edf7; color: #1b233e; }
/* touch: white rounds with navy arrows, JUMP the meadow green */
body.is-v2 .touch-btn { background: rgba(255, 255, 255, 0.85); color: #1b233e; box-shadow: 0 5px 0 rgba(27, 35, 62, 0.16); backdrop-filter: none; -webkit-backdrop-filter: none; }
body.is-v2 .touch-btn.is-down { background: #fff; transform: translateY(3px); box-shadow: 0 2px 0 rgba(27, 35, 62, 0.16); }
body.is-v2 .touch-jump { background: #6AB845; color: #fff; font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-size: 24px; box-shadow: 0 6px 0 #4c8f30; }
body.is-v2 .touch-jump.is-down { background: #6AB845; box-shadow: 0 2px 0 #4c8f30; }
body.is-v2 .touch-down { background: #ffd25b; }

/* ── Results: a soft white card, the big words in Grobold ──────────────── */
body.is-v2 .panel { background: #fdfbf6; border: 0; border-radius: 30px; box-shadow: 0 20px 50px rgba(15, 12, 40, 0.35); backdrop-filter: none; -webkit-backdrop-filter: none; }
body.is-v2 .panel h2 { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps; font-size: 32px; letter-spacing: 0.5px; }
body.is-v2 .stat-row { background: #fff; border: 2px solid #eef1f7; }
body.is-v2 .stat-row dd { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; letter-spacing: 0.5px; }
body.is-v2 .panel .action-btn { border-radius: 999px; }
body.is-v2 .new-best { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; letter-spacing: 0.5px; }