/*!
 * Bell Shark v2 — the cover's flat sea over the same game (with js/kid-kit.js).
 * Colours from the cover (covers/bell-shark/scene.js): water #8fd3ea, surface
 * #b4e4f3, far sand #a9d8cf, sand #ecd9a8, coral #eeb0a4 / #d88f86, kelp
 * #5fb98a / #4aa77a. The canvas reef is drawn by bell-shark-v1.js when
 * window.SHARK_SKIN = "v2".
 */
html:has(body.is-v2), body.is-v2 { background: #8fd3ea; }
body.is-v2 .bk-play { background: #8fd3ea; }

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

/* the cover's reef inside the kit's scene: shafts across the top, coral bottom-left */
.kk-scene svg.v2-shafts { position: absolute; inset: 0; width: 100%; height: 100%; }
.kk-scene svg.v2-coral { position: absolute; inset: auto auto -2% -1%; width: clamp(170px, 24vw, 330px); height: auto; aspect-ratio: 1; }

/* the hero is the cover's shark (a picture): it swims, it doesn't sway like a bell */
body.is-v2 .kk-hero { width: clamp(260px, 30vw, 540px); bottom: 2%; right: -8%; transform-origin: 50% 50%; animation: v2-swim 4.2s ease-in-out infinite; }
@keyframes v2-swim { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: -10px -12px; rotate: -2deg; } }
@media (prefers-reduced-motion: reduce) { body.is-v2 .kk-hero { animation: none; } }

/* the C fish on the Chomp! button */
.kk-btn .kk-ico svg { filter: drop-shadow(0 4px 0 rgba(27, 35, 62, 0.18)); }

/* 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%; } }
.kk-sheet .kk-list li { flex-wrap: wrap; row-gap: 0; }

/* The sheet starts below the shared chrome (Menu pill, coins). */
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));
}

/* ── Play: light pills on the sea ─────────────────────────────────────── */
body.is-v2 .bk-count {
  flex-direction: row; align-items: baseline; gap: 8px;
  padding: 8px 18px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94); box-shadow: 0 4px 0 rgba(27, 35, 62, 0.14);
}
body.is-v2 .bk-count b { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-size: 28px; color: #1b233e; }
body.is-v2 .bk-count small { color: #6a7392; }
body.is-v2 .bk-prompt-line { box-shadow: 0 4px 0 rgba(27, 35, 62, 0.14); color: #1b233e; }
body.is-v2 .bk-hear { background: #009999; box-shadow: 0 5px 0 #007272; }
body.is-v2 .bk-hear:active { box-shadow: 0 2px 0 #007272; }
body.is-v2 .bk-toast { background: rgba(255, 255, 255, 0.96); color: #1b233e; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.14); }
body.is-v2 .bk-banner {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps;
  letter-spacing: 0; text-shadow: 0 0.07em 0 rgba(13, 51, 85, 0.35);
}

/* ── Results: a white card, a Grobold title ───────────────────────────── */
body.is-v2 .bk-veil { background: rgba(13, 51, 85, 0.35); }
body.is-v2 .bk-card { border-radius: 30px; box-shadow: 0 20px 50px rgba(13, 51, 85, 0.35); background: #fdfbf6; }
body.is-v2 .bk-card h2 {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps;
  font-size: 36px; line-height: 1; color: #009999; text-shadow: 0 0.07em 0 #005f5f;
}
body.is-v2 .bk-stars { color: #ffc21c; text-shadow: 0 3px 0 #c98f00; }
body.is-v2 .bk-stars .off { color: #dfe5ee; text-shadow: none; }
body.is-v2 .bk-big span { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; color: #1b233e; }
body.is-v2 .bk-next { background: #6ab845; box-shadow: 0 5px 0 #4c8f30; }
body.is-v2 .bk-next:hover { background: #5fac3c; }
body.is-v2 .bk-again { background: #fff; color: #1b233e; border: 2px solid #d5dced; box-shadow: 0 4px 0 #d5dced; }
body.is-v2 .bk-menu-btn { color: #45607a; }

/* A phone on its side: the title and buttons shrink so both fit above the fold. */
@media (max-height: 500px) and (orientation: landscape) {
  body.is-v2 .kk-front { padding: 54px 16px 22px; gap: 10px; }
  body.is-v2 .kk-word { font-size: clamp(48px, 18vh, 80px); }
  body.is-v2 .kk-kicker { font-size: clamp(26px, 8vh, 40px); }
  body.is-v2 .kk-btn { width: clamp(130px, 19vw, 176px); border-radius: 26px; }
  body.is-v2 .kk-btn b { font-size: 22px; }
}