/*!
 * Musical Pipes v2 — the cover's meadow over the same game (with js/kid-kit.js).
 * Colours from the cover (covers/musical-pipes/scene.js): sky #8fd6f4, far hill
 * #a9dbc4, near hill #9dd25f, tiles in the note colours with ivory pipes
 * (#fdf8ee), white caps and the blue water (#37c6ff). Rob's brand pipes
 * ("Pipes 2022": note-coloured pipes, white rounded caps) dress the menu.
 */
body.pipes-page.is-v2 { background: #8fd6f4; color: #1b233e; }
body.is-v2 .v2-scenery { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
body.is-v2 .v2-scenery .kk-scene { position: absolute; inset: 0; }
body.is-v2 .app { position: relative; z-index: 1; }

/* the game's own level grid 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 menu: Rob's climbing pipes in the meadow, High C popping out of a pipe ── */
.v2-mp-menu::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: 3%; bottom: -1px; width: min(48vw, 560px); aspect-ratio: 1629.43 / 465.35;
  background: url("./pipes-2022.svg") left bottom / contain no-repeat;
}
/* High C stands IN a pipe (Rob's "PipesCMajor"): the hero is lifted off the
   corner and a pipe rises from the ground to its chin, in front of it */
.v2-mp-menu { --h: clamp(240px, 30vw, 440px); }
.v2-mp-menu .kk-hero { bottom: 5%; }
.v2-mp-menu::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  right: calc(-2% + var(--h) * 0.05); bottom: 0; width: calc(var(--h) * 0.9); height: calc(5% + var(--h) * 0.3);
  background: url("./hero-pipe.svg") center top / 100% auto no-repeat;
}
.v2-mp-menu[data-view="map"]::before, .v2-mp-menu[data-view="map"]::after { display: none; }
@media (max-width: 900px) { .v2-mp-menu::after { display: none; } }
@media (orientation: portrait) and (max-width: 700px) {
  .v2-mp-menu::before { left: 4%; width: 92vw; }
}
/* short landscape phones: the pipes would sit under the buttons */
@media (max-height: 520px) { .v2-mp-menu::before { display: none; } }

.v2-tile-ico { display: grid; place-items: center; width: 100%; height: 100%; }
.v2-tile-ico svg { height: 86%; width: auto; translate: 0 -6%; }

/* twelve boards: smaller stones so neighbours never overlap */
.v2-mp-menu .kk-map { inset: 96px 2.5% 100px; }
.v2-mp-menu .kk-stone { width: clamp(50px, 5.8vw, 80px); border-width: 4px; }
.v2-mp-menu .kk-num { font-size: clamp(22px, 2.6vw, 32px); }
.v2-mp-menu .kk-stone .kk-stars { font-size: clamp(9px, 1vw, 12px); letter-spacing: 0; }
.v2-mp-menu .kk-stone .kk-lock { width: 24px; height: 24px; }
.v2-mp-menu .kk-stone .kk-lock svg { width: 16px; height: 16px; }
.v2-mp-menu .kk-go { width: 30px; height: 30px; right: -18px; top: -16px; border-width: 3px; }
.v2-mp-menu .kk-go svg { width: 13px; height: 13px; }
@media (orientation: portrait) and (max-width: 700px) {
  .v2-mp-menu .kk-map { inset: 110px 8% 90px; }
}

/* a stone not 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%; } }

/* ── Play: the board on the meadow ──────────────────────────────────────── */
body.is-v2 .hud-level {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps;
  color: #1b233e; font-size: clamp(26px, 4.4vw, 36px); letter-spacing: 0.3px; text-shadow: 0 0.07em 0 rgba(255, 255, 255, 0.55);
}
/* an upright phone: the board in the middle of the meadow, not stuck to the top */
@media (orientation: portrait) {
  body.is-v2 .game-screen:not([hidden]) { flex: 1; justify-content: center; padding-bottom: 8vh; }
  body.is-v2 .toolbar { margin-top: 22px; }   /* clear of the START label */
}
body.is-v2 .hud-moves { background: rgba(255, 255, 255, 0.94); color: #1b233e; border-radius: 999px; padding: 5px 16px; box-shadow: 0 3px 0 rgba(27, 35, 62, 0.12); }
body.is-v2 .hud-moves b { color: #009999; }
body.is-v2 .hud-blurb { color: #1b233e; opacity: 0.78; font-weight: 800; }

/* the board: a soft white tray (no dark slab), tiles with a flat drop like the cover */
body.is-v2 .board { background: rgba(255, 255, 255, 0.5); border: 0; border-radius: 24px; box-shadow: none; gap: 8px; padding: 10px; }
body.is-v2 .tile { border-radius: 16px; overflow: hidden; box-shadow: inset 0 -7px 0 rgba(27, 35, 62, 0.14), 0 5px 0 rgba(27, 35, 62, 0.16); }
body.is-v2 .tile.flow-lit { box-shadow: inset 0 0 0 4px #fff, inset 0 -7px 0 rgba(27, 35, 62, 0.14), 0 5px 0 rgba(27, 35, 62, 0.16); }
/* Rob's pipes wear WHITE rounded caps (v1 tints them with the note) */
body.is-v2 .tile { --cap: #ffffff !important; }
body.is-v2 .tile .note-tag { font-size: clamp(14px, 2.8vw, 19px); text-shadow: 0 1px 0 rgba(27, 35, 62, 0.35); }

/* START / FINISH: white pills on the sky */
body.is-v2 .spout .spout-label { background: #fff; color: #1b233e; border-radius: 999px; padding: 3px 9px; box-shadow: 0 2px 0 rgba(27, 35, 62, 0.14); }
body.is-v2 .spout .spout-arrow { filter: drop-shadow(0 2px 0 rgba(27, 35, 62, 0.25)); }
body.is-v2 .spout .spout-pipe { filter: drop-shadow(0 3px 0 rgba(27, 35, 62, 0.16)); }

/* the toolbar: light pills */
body.is-v2 .toolbar .action-btn { background: #fff; color: #1b233e; border-radius: 999px; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.14); padding: 11px 20px; min-height: 48px; }

/* ── the win card: white, Grobold, the cover's colours ──────────────────── */
body.is-v2 .panel-veil { background: rgba(27, 35, 62, 0.4); }
body.is-v2 .panel { background: #fdfbf6; border: 0; border-radius: 30px; color: #1b233e; box-shadow: 0 20px 50px rgba(15, 12, 40, 0.3); }
body.is-v2 .panel h2 {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps; text-transform: capitalize;
  font-size: 34px; line-height: 1.05; color: #009999; text-shadow: 0 3px 0 #007372;
}
body.is-v2 .panel .panel-sub, body.is-v2 .panel .stat-row { color: #4a5470; }
body.is-v2 .panel .stat-row b { color: #1b233e; }
body.is-v2 .star-row { color: #ffc93c; text-shadow: 0 3px 0 #e0a21c; }
body.is-v2 .star-row .off { color: #dfe4ef; text-shadow: none; }
body.is-v2 .panel-actions .next-big { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; background: #6AB845; box-shadow: 0 6px 0 #4c8f30; border-radius: 999px; }
body.is-v2 .panel-actions .action-btn.small { background: #fff; color: #1b233e; border: 2px solid #d5dced; box-shadow: none; border-radius: 999px; }
body.is-v2 .quiet-link { color: #4a5470; }
body.is-v2 .panel .pgc-exit { color: #4a5470; }