/*!
 * Bell Breaker v2 — the cover's day sky over the same game (with js/kid-kit.js).
 * Colours from the cover (covers/bell-breaker/scene.js): sky #8fd6f4, hills
 * #a9dbc4 / #9dd25f, the teal paddle #099695, bricks in the bell colours with
 * a same-hue shade. The board is drawn by the canvas (BREAKER_SKIN = "v2").
 */
body.is-v2.breaker-page { background: #8fd6f4; color: #1b233e; }
.v2-world { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.v2-world .kk-scene { position: absolute; inset: 0; }
body.is-v2 .app { position: relative; z-index: 1; }

/* the game's own level select stays in the page (the kit presses its cards) but is never seen */
html.kk-menu-on body.is-v2 { overflow: hidden; }
body.is-v2 #selectScreen { visibility: hidden; }

/* ── the cover's brick walls, framing the title on the kit's front ────────── */
.v2-frame { position: fixed; inset: 0; z-index: 41; pointer-events: none; }
.kk-menu.is-off ~ .v2-frame,
.kk-menu:not([data-view="front"]) ~ .v2-frame { display: none; }
.v2-wall { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 64px); height: auto; overflow: visible; }
.v2-wall-l { left: 0; width: clamp(150px, 20vw, 250px); }
.v2-wall-r { right: 0; top: calc(max(10px, env(safe-area-inset-top)) + 132px); width: clamp(140px, 19vw, 236px); }
.v2-shard { animation: v2-shard 2.6s ease-in-out infinite alternate; }
.v2-flynote { animation: v2-float 2.2s ease-in-out infinite alternate; }
@keyframes v2-shard { to { translate: 3px 5px; } }
@keyframes v2-float { to { translate: 4px -6px; } }
.v2-wall-t { display: none; }
/* a phone: the title fills the width, so the side walls step aside; upright, a strip of bricks sits above the title */
@media (max-width: 760px) { .v2-wall-l, .v2-wall-r { display: none; } }
@media (max-width: 760px) and (orientation: portrait) {
  .v2-wall-t { display: block; left: 0; width: 100%; top: calc(max(10px, env(safe-area-inset-top)) + 136px); }
}
@media (max-height: 520px) { .v2-wall-l { width: clamp(120px, 15vw, 170px); } .v2-wall-r { display: none; } }

/* ── the map: many stones, laid out as rows by bell-breaker-v2.js ────────── */
.kk-map .kk-stone { width: var(--v2-stone, clamp(76px, 10vw, 118px)); border-width: 5px; }
.kk-map .kk-num { font-size: calc(var(--v2-stone, 90px) * 0.4); }
.kk-map .kk-stone .kk-stars { font-size: calc(var(--v2-stone, 90px) * 0.14); }
.kk-map .kk-go { width: 38px; height: 38px; right: -12px; top: -12px; }
.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'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; }
.kk-sheet .kk-list .kk-hint { font-size: 12px; }

/* The sheet clears the chrome (Menu pill, coins) on a tall phone. */
@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 board in a white frame on the sky, the HUD as light pills ─── */
body.is-v2 .game-screen { background: none; }
/* a phone: the board steps in from the edges so its white ring shows */
body.is-v2 .stage-wrap { width: calc(100% - 20px); }
/* the frame is a ring drawn outside the canvas: the canvas keeps the size the game gives it */
body.is-v2 #gameCanvas { border-radius: 20px; box-shadow: 0 0 0 6px #fff, 0 8px 24px 6px rgba(27, 35, 62, 0.16); }
body.is-v2 .hud { gap: 8px; }
body.is-v2 .hud-left > div, body.is-v2 .hud-right > div:first-child, body.is-v2 .hud-level-name {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: #1b233e; border-radius: 999px; padding: 6px 14px;
  box-shadow: 0 4px 0 rgba(27, 35, 62, 0.12);
}
body.is-v2 .led-label { display: inline; font-size: 10px; letter-spacing: 0.12em; color: #8a93ad; }
body.is-v2 .led {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; letter-spacing: 0.5px;
  font-size: 20px; color: #1b233e; background: none; border: 0; padding: 0;
}
body.is-v2 .hud-level-name { font-size: 13px; font-weight: 900; color: #1b233e; }
body.is-v2 .balls-dots { color: #009999; font-size: 16px; letter-spacing: 2px; }
body.is-v2 .balls-dots .spent { color: #d5dced; }
body.is-v2 .speed-btn { background: #fff; border: 0; color: #1b233e; border-radius: 999px; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.12); }
body.is-v2 .speed-btn:hover { background: #fff; }
body.is-v2 .speed-btn.is-on { background: #009999; color: #fff; box-shadow: 0 4px 0 #006f6f; }
/* a narrow phone: the level name gives way so the pills keep one row */
@media (max-width: 560px) { body.is-v2 .hud-center { display: none; } body.is-v2 .led-label { display: none; } }

/* toasts: Grobold words with a navy drop, gold for the big ones */
body.is-v2 .toast {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; color: #fff;
  text-shadow: 0 0.07em 0 #1b233e, 0 0.12em 0.25em rgba(27, 35, 62, 0.3);
}
body.is-v2 .toast.big { color: #ffd25b; }
body.is-v2 .toast .toast-sub { font-family: "Nunito", system-ui, sans-serif; font-weight: 900; color: #fff; }

/* ── Results and pause: a white card, the big words in Grobold ──────────── */
body.is-v2 .panel-veil { background: rgba(27, 35, 62, 0.4); }
body.is-v2 .panel { background: #fdfbf6; color: #1b233e; border: 0; border-radius: 30px; box-shadow: 0 20px 50px rgba(15, 12, 40, 0.35); }
body.is-v2 .panel h2 { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps; font-size: 34px; letter-spacing: 0.5px; color: #1b233e; }
body.is-v2 .panel .panel-sub { color: #6a7392; }
body.is-v2 .star-row .off { color: #e3e7f1; }
body.is-v2 .star-row { color: #f2b72b; }
body.is-v2 .panel .led-row { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
body.is-v2 .panel .led { font-size: 30px; }
body.is-v2 .panel .notes-played { color: #1b233e; }
body.is-v2 .panel .notes-played .music-note { color: #009999; }
body.is-v2 .panel .stat-row { color: #6a7392; }
body.is-v2 .pause-panel h2 { color: #1b233e; }
body.is-v2 .action-btn { border-radius: 999px; background: #fff; color: #1b233e; box-shadow: 0 5px 0 #d5dced; border: 2px solid #d5dced; }
body.is-v2 .action-btn.primary { background: #6AB845; color: #fff; border-color: #6AB845; box-shadow: 0 5px 0 #4c8f30; }
body.is-v2 .action-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #d5dced; }
body.is-v2 .action-btn.primary:active { box-shadow: 0 2px 0 #4c8f30; }
@media (prefers-reduced-motion: reduce) { .v2-shard, .v2-flynote { animation: none; } }