/*!
 * Pumpkin Slicer v2 — the cover's evening over the same game (with js/kid-kit.js).
 * Colours from the cover (covers/pumpkin-slicer/scene.js), the Halloween
 * family's one evening: sky #2f2862, sunset #e9874f, far hills #251e4f, the
 * patch #4c9a47. The canvas draws the patch in play (SLICER_SKIN = "v2").
 */
body.is-v2 {
  --pz-sky1: #2f2862; --pz-sky2: #2f2862; --pz-sky3: #2f2862;
  --pz-grass: #4c9a47; --pz-grass-dark: #4c9a47;
  background: #2f2862;
}
/* the world behind play: Rob's castle and the patch (../../assets/pumpkins/patch-v2.*) */
body.is-v2 .pz-scenery { background: #0e062d; }
/* the canvas draws the patch now (a wavy hill, not a hard band) */
body.is-v2 .pz-play { background: none; }

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

/* Slice!: Ti cut in two along a white blade (the cover's picture) */
.v2-slice-ico { position: relative; display: block; width: 100%; height: 100%; }
.v2-half { position: absolute; inset: 0; display: grid; place-items: center; }
.v2-half svg { height: 100%; width: auto; filter: drop-shadow(0 4px 0 rgba(27, 35, 62, 0.25)); }
.v2-half-a { clip-path: polygon(0 0, 100% 0, 100% 34%, 0 72%); translate: -4% -12%; }
.v2-half-b { clip-path: polygon(0 72%, 100% 34%, 100% 100%, 0 100%); translate: 4% 10%; }
.v2-blade { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 0 rgba(27, 35, 62, 0.2)); }

/* 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 row, moved into the grown-ups sheet, wears the kit's pills */
.kk-sheet .pz-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; justify-content: flex-start; }
.kk-sheet .pz-pill {
  appearance: none; border: 2px solid #d5dced; background: #fff; color: #1b233e;
  font: 900 14px/1 Nunito, system-ui, sans-serif; padding: 10px 16px; border-radius: 999px; min-height: 44px; cursor: pointer; box-shadow: none;
}
.kk-sheet .pz-pill[aria-pressed="true"] { background: #1b233e; border-color: #1b233e; color: #fff; }

/* ── Play: the HUD, ticket and words as light pills on the evening ───────── */
body.is-v2 .pz-hearts,
body.is-v2 .pz-count,
body.is-v2 .pz-ticket { background: #fff; box-shadow: 0 4px 0 rgba(15, 12, 40, 0.28); }
body.is-v2 .pz-count { border-radius: 22px; }
body.is-v2 .pz-count small { color: #6a7392; }
body.is-v2 .pz-toast { background: #fff; color: #1b233e; box-shadow: 0 4px 0 rgba(15, 12, 40, 0.28); }
body.is-v2 .pz-banner {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; letter-spacing: 0.5px;
  text-shadow: 0 0.07em 0 #1b233e, 0 0.12em 0.2em rgba(15, 12, 40, 0.35);
}

/* ── Results: a soft white card, the big words in Grobold ─────────────────── */
body.is-v2 .pz-veil { background: rgba(15, 12, 40, 0.45); }
body.is-v2 .pz-card { border-radius: 30px; box-shadow: 0 20px 50px rgba(15, 12, 40, 0.4); }
body.is-v2 .pz-card 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 .pz-big span { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; color: #e7731f; }
body.is-v2 .pz-card button { border-radius: 999px; }
body.is-v2 .pz-next { background: #009999; box-shadow: 0 5px 0 #006f6f; }
body.is-v2 .pz-again { background: #fff1e3; box-shadow: 0 5px 0 #f0d9bf; }
body.is-v2 .pz-menu-btn { box-shadow: none; }
@media (max-height: 500px) { body.is-v2 .pz-card h2 { font-size: 26px; } }

/* nine progress dots stay on one row on a phone */
@media (orientation: portrait) and (max-width: 700px) { .kk-btn .kk-dots { gap: 3px; } .kk-btn .kk-dots i { width: 8px; height: 8px; } }

/* The sheet clears the chrome (Menu pill, coins) on a tall phone, where the
   kit centres a full-height sheet under them (suggested as a kit fix). */
@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)); }
}