/*!
 * Bell Train v2 — the cover's flat day over the same game (with js/kid-kit.js).
 * Colours from the cover (covers/bell-train/scene.js): sky #8fd6f4, hills
 * #a9dbc4 / #9dd25f, track bed #8cc63f, ties #8a6a4a, rail #98a2ac. The
 * scene's strips are re-painted by bell-train-v2.js (one rule per hour).
 */
html:has(body.is-v2), body.bell-train-page.is-v2 { background: #8fd6f4; }
body.is-v2 .v2-world { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
body.is-v2 .v2-world .kk-scene { position: absolute; inset: 0; }
body.is-v2 .app { position: relative; z-index: 1; }

/* ── the kit inside the start gate (until the first tap only the kit is seen) ── */
.pgc-gate.v2-gate { background: #8fd6f4; padding: 0; }
.pgc-gate.v2-gate .pgc-gate-card { visibility: hidden; }
.pgc-gate.v2-gate .v2-home { position: fixed; z-index: 120; left: max(12px, env(safe-area-inset-left)); top: calc(max(10px, env(safe-area-inset-top)) + 6px); width: 52px; height: 52px; }
html.kk-menu-on body.is-v2 { overflow: hidden; }

/* the kit's stones are neutral (a stone is a GROUP, not a note): its three notes ride on it as beads */
.v2-train-menu .kk-stone { gap: 3px; }
.v2-beads { display: inline-flex; gap: 3px; }
.v2-beads i { width: clamp(8px, calc(var(--kk-sz, 96px) * 0.13), 13px); aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff; }
.kk-sheet .kk-list .v2-beads { margin-right: 2px; }
.kk-sheet .kk-list .v2-beads i { width: 10px; }
.kk-sheet .kk-list li { flex-wrap: wrap; row-gap: 0; }
.kk-sheet .kk-list li > i { background: #1b233e; }

/* Go!'s picture is the game's own engine, Beet driving */
.v2-engine-ico { display: grid; place-items: center; width: 118%; height: 100%; }
.v2-engine-ico svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 0 rgba(27, 35, 62, 0.22)); }

/* ── the cover's train along the bottom of the front ───────────────────── */
@media (min-width: 701px) { .v2-train-menu .kk-btn { width: clamp(150px, 21vw, 220px); } }
.v2-train-menu .kk-front { padding-bottom: calc(min(720px, 92vw) * 0.27 + 12px); }
.v2-kit-train {
  position: absolute; z-index: 1; left: 50%; bottom: 0; translate: -50% 0;
  width: min(720px, 92vw); pointer-events: none;
}
.v2-kit-train .train { position: relative; z-index: 1; margin-bottom: 2.4%; }
.v2-kit-train .car .cargo { cursor: default; filter: none; }
.v2-kit-train .cargo svg { width: 100%; height: 100%; display: block; overflow: visible; }
.v2-track {
  position: absolute; left: -50vw; right: -50vw; bottom: 0; height: 9%;
  background: #8cc63f;
  border-top: max(5px, 0.9vw) solid #98a2ac;
}
.kk-menu[data-view="map"] .v2-kit-train { display: none; }
@media (max-height: 560px) {
  .v2-kit-train { display: none; }
  .v2-train-menu .kk-front { padding-bottom: 22px; }
}

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

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

/* ── Play: the header on the sky, the scene in a white frame ───────────── */
body.is-v2 .app-title {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps;
  font-size: clamp(30px, 6vw, 44px); line-height: 1; color: #fff; letter-spacing: 0;
  text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.32);
}
body.is-v2 .app-title .v2-word i { font-style: normal; text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.38); }
body.is-v2 .prompt {
  min-height: 0; padding: 8px 18px; border-radius: 999px; width: fit-content; max-width: min(46ch, 100%);
  background: rgba(255, 255, 255, 0.94); color: #1b233e; box-shadow: 0 4px 0 rgba(27, 35, 62, 0.12);
}
/* the group chips: the kit's map does this job now (they stay in the page, pressed by the kit) */
body.is-v2 .train-note-options { display: none; }
body.is-v2 .scene { border-radius: 26px; box-shadow: 0 0 0 5px #fff, 0 14px 30px rgba(27, 35, 62, 0.18); }
body.is-v2 .coach { box-shadow: 0 4px 0 rgba(27, 35, 62, 0.14); }
body.is-v2 .status-bar {
  width: auto; min-width: min(560px, 100%); padding: 6px 8px 6px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94); box-shadow: 0 4px 0 rgba(27, 35, 62, 0.12); margin-top: 6px;
}
body.is-v2 .stop-name { color: #1b233e; }
body.is-v2 .status-bar .tool-btn { border-radius: 999px; }

/* ── The end-of-round card: a Grobold title ────────────────────────────── */
body.is-v2 .win-card { border: 0; border-radius: 30px; background: #fdfbf6; box-shadow: 0 20px 50px rgba(27, 35, 62, 0.3); }
body.is-v2 .win-card h2 {
  font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-variant-caps: small-caps;
  letter-spacing: 0; line-height: 1; color: #6ab845; text-shadow: 0 0.07em 0 #4c8f30;
}
body.is-v2 .win-actions .v2-trains-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
body.is-v2 .v2-trains-btn svg { width: 26px; height: 26px; }
body.is-v2 .v2-trains-btn svg path[stroke="#fff"] { stroke: #1b233e; }
body.is-v2 .win-card h2 { font-size: clamp(28px, 5vw, 38px); }
body.is-v2 .win-stars span { color: #dfe5ee; filter: none; font-size: 2.4rem; }
body.is-v2 .win-stars span.on { color: #ffc21c; text-shadow: 0 3px 0 #c98f00; }

/* a phone on its side: a compact header so the scene starts higher */
@media (max-height: 500px) and (orientation: landscape) {
  body.is-v2 .screen { gap: 8px; padding-top: calc(8px + env(safe-area-inset-top)); }
  body.is-v2 .app-title { font-size: 28px; }
  body.is-v2 .game-head { gap: 4px; }
  body.is-v2 .prompt { padding: 4px 14px; font-size: 0.85rem; }
}