/*!
 * Flappy Bell v2 — the cover's flat day over the same game (with js/kid-kit.js).
 * Colours from the cover (covers/flappy-bell): sky #8fd6f4, far hill #a9dbc4,
 * near hill #9dd25f; Rob's pastel pipes (SVG Dump/Pipes 2022.svg) are drawn on
 * the canvas by flappy-bell-v1.js when window.FLAPPY_SKIN = "v2".
 */
body.flappy-page.is-v2 { background: #8fd6f4; color: #1b233e; }
/* the classic night sky's CSS starfield gives way to the flat world */
body.flappy-page.is-v2::before, body.flappy-page.is-v2::after { display: none; }
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; }

/* 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; }

/* the chosen bell on the Fly! button is the game's own art */
.v2-bell-ico { position: relative; display: block; width: 100%; height: 100%; }
.v2-bell-ico img { position: absolute; inset: -8% 0 0; width: 100%; height: 108%; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(27, 35, 62, 0.22)); }
/* "Flappy" has descenders (p p y): give the big word room, as the cover does */
body.is-v2 .kk-title .kk-word { margin-top: 0.12em; }

/* 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, on the sheet's light paper ── */
.kk-sheet .v2-wheel-slot { position: relative; }
.kk-sheet .bell-wheel { margin: 0 auto; max-width: 440px; height: 128px; }
.kk-sheet .bw-item { width: 92px; height: 92px; top: 56px; }
.kk-sheet .bw-item img { filter: drop-shadow(0 4px 0 rgba(27, 35, 62, 0.12)); }
.kk-sheet .bw-arrow { background: #1b233e; color: #fff; }
.kk-sheet .bw-name { margin: 4px auto 0; }
.kk-sheet .tune-grid, .kk-sheet .mode-grid { margin: 0; }
.kk-sheet .tune-card, .kk-sheet .mode-card {
  background: #fff; color: #1b233e; border: 2px solid #d5dced; box-shadow: none;
}
.kk-sheet .tune-card:hover, .kk-sheet .mode-card:hover { background: #f3f6fb; }
.kk-sheet .tune-card .tune-card-notes, .kk-sheet .mode-card small { color: #6a7392; }
.kk-sheet .tune-card.is-selected, .kk-sheet .mode-card.is-on { background: #1b233e; border-color: #1b233e; color: #fff; }
.kk-sheet .tune-card.is-selected .tune-card-notes, .kk-sheet .mode-card.is-on small { color: rgba(255, 255, 255, 0.8); }
.kk-sheet .tune-blurb { margin: 6px 0 0; color: #6a7392; font-size: 12.5px; font-weight: 700; text-align: left; }
.kk-sheet .kk-list li { flex-wrap: wrap; row-gap: 0; }

/* ── Play: the cover's day around a white-framed stage ─────────────────── */
body.is-v2 .stage { border-radius: 26px; box-shadow: 0 0 0 5px #fff, 0 14px 30px rgba(27, 35, 62, 0.18); }
body.is-v2 .score-hud {
  top: calc(12px + env(safe-area-inset-top));
  min-width: 76px; padding: 6px 20px 4px; border-radius: 999px; text-align: center;
  background: rgba(255, 255, 255, 0.94); color: #1b233e; text-shadow: none;
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-size: 40px; line-height: 1.05;
  box-shadow: 0 4px 0 rgba(27, 35, 62, 0.14);
}
body.is-v2 .harmony-hud {
  top: calc(74px + env(safe-area-inset-top));
  background: rgba(255, 255, 255, 0.94); color: #1b233e; text-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 3px 0 rgba(27, 35, 62, 0.12);
}
body.is-v2 .harmony-hud span[aria-hidden] { color: #7b569e; }
body.is-v2 .ready-hint { top: 22%; }
body.is-v2 .ready-title {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps;
  font-size: 46px; color: #fff; text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.32);
}
body.is-v2 .ready-hint .ready-sub {
  padding: 4px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); color: #1b233e;
}

/* ── Results: white cards, Grobold words ───────────────────────────────── */
body.is-v2 .game-over-panel {
  background: #fdfbf6; color: #1b233e; border: 0; border-radius: 30px;
  box-shadow: 0 20px 50px rgba(27, 35, 62, 0.3);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.is-v2 .game-over-panel h2, body.is-v2 .clear-name {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps;
  letter-spacing: 0; color: #e72829; font-size: 38px; line-height: 1;
  text-shadow: 0 0.07em 0 #8c1718;
}
body.is-v2 .clear-eyebrow { color: #8a93ad; }
body.is-v2 .clear-stars i, body.is-v2 .flight-stars i { color: #d5dced; }
body.is-v2 .clear-stars i { font-size: 44px; }
body.is-v2 .clear-stars i.on { color: #ffc21c; text-shadow: 0 3px 0 #c98f00; }
body.is-v2 .clear-harmony { color: #6a7392; }
body.is-v2 .clear-harmony b { color: #7b569e; }
body.is-v2 .go-score-row { background: #eef3f9; }
body.is-v2 .go-score-row dt, body.is-v2 .save-score-label, body.is-v2 .leaderboard-title, body.is-v2 .lb-empty { color: #8a93ad; }
body.is-v2 .go-score-row dd { color: #1b233e; }
body.is-v2 .go-harmony-row dd { color: #7b569e; }
body.is-v2 .go-bell img { filter: drop-shadow(0 4px 0 rgba(27, 35, 62, 0.15)); }
body.is-v2 .new-best { color: #fff; }
body.is-v2 .save-score-row { background: #eef3f9; }
body.is-v2 .save-score-controls input { background: #fff; color: #1b233e; border-color: #d5dced; }
body.is-v2 .save-score-controls input::placeholder { color: #8a93ad; }
body.is-v2 .lb-row { background: #eef3f9; }
body.is-v2 .lb-row.is-new { background: rgba(9, 150, 149, 0.16); }
body.is-v2 .lb-rank { color: #f39422; }
body.is-v2 .action-btn {
  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; }
body.is-v2 .action-btn.save-btn { background: #009999; border-color: #009999; color: #fff; box-shadow: 0 4px 0 #007272; }

/* The sheet starts below the shared chrome (Menu pill, coins): on an upright
   phone the kit's centred sheet put its own close button under the coin purse. */
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));
}

/* An upright phone: Fly! is the one big button across the top, Flights and
   Forever side by side under it (three in a row came out ~110px each). */
@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(72px, 19vw, 116px); }
  body.is-v2 .kk-kicker { font-size: clamp(38px, 10vw, 58px); }
}
/* A phone on its side: a smaller HUD, and "Tap to Fly!" below the harmony pill. */
@media (max-height: 500px) {
  body.is-v2 .score-hud { top: 8px; min-width: 56px; padding: 4px 14px 2px; font-size: 28px; }
  body.is-v2 .harmony-hud { top: 50px; padding: 2px 12px; font-size: 15px; }
  body.is-v2 .ready-hint { top: 36%; }
  body.is-v2 .ready-title { font-size: 34px; }
}

/* Three big buttons: a smaller hero so C never sits on Forever */
body.is-v2 .kk-hero { width: clamp(220px, 22vw, 320px); }