/*!
 * Metronome v2 — the cover's flat world and the brand (with kid-kit.css).
 */
html, body.is-v2 { background: #8fd6f4; }
.v2-world { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.v2-world .kk-scene { position: absolute; inset: 0; }
body.is-v2 #game { position: relative; z-index: 1; }
body.is-v2 .mt-screen { max-width: 620px; padding-top: 64px; }
body.is-v2 .mt-eyebrow { display: none; }
body.is-v2 .mt-title.kk-title { font-weight: 400; letter-spacing: 0; }
body.is-v2 .mt-title .kk-word { font-size: clamp(48px, 11vw, 84px); }

/* the stage: Beet big on the open sky, no box */
body.is-v2 .mt-stage { background: none; border: 0; padding: 4px 0 0; }
body.is-v2 .mt-beet { width: clamp(150px, 34vw, 220px); }
/* art pass 2026-10-13: no shadow ellipse or drop shadow under Beet (house rule) */
body.is-v2 .mt-beet-shadow { display: none; }
body.is-v2 .mt-beet img { filter: none; }

/* the beats wear the bells' colours: beat 1 is Do */
body.is-v2 .mt-dot { width: 18px; height: 18px; background: rgba(255, 255, 255, 0.7); box-shadow: 0 2px 0 rgba(27, 35, 62, 0.12); }
body.is-v2 .mt-dot:nth-child(8n+1) { --on: #E72829; } body.is-v2 .mt-dot:nth-child(8n+2) { --on: #F39422; }
body.is-v2 .mt-dot:nth-child(8n+3) { --on: #F1E606; } body.is-v2 .mt-dot:nth-child(8n+4) { --on: #6AB845; }
body.is-v2 .mt-dot:nth-child(8n+5) { --on: #009999; } body.is-v2 .mt-dot:nth-child(8n+6) { --on: #7B569E; }
body.is-v2 .mt-dot:nth-child(8n+7) { --on: #EA6BA3; } body.is-v2 .mt-dot:nth-child(8n+8) { --on: #E72829; }
body.is-v2 .mt-dot.is-on, body.is-v2 .mt-dot.is-hit, body.is-v2 .mt-dot.is-now { background: var(--on); transform: scale(1.35); }
body.is-v2 .mt-count { font-family: "Grobold", "Nunito", system-ui, sans-serif; color: #fff; text-shadow: 0 0.07em 0 rgba(27, 35, 62, 0.3); }

/* the tempo: big friendly numbers, round chunky steppers */
body.is-v2 .mt-readout b { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; color: #fff; text-shadow: 0 0.06em 0 rgba(27, 35, 62, 0.3); }
body.is-v2 .mt-readout small, body.is-v2 .mt-mark { color: #1b233e; }
body.is-v2 .mt-step { width: 58px; height: 58px; border: 0; background: #fff; color: #1b233e; box-shadow: 0 5px 0 rgba(27, 35, 62, 0.15); }

/* Start and TAP: the kit's chunky picture-button style */
body.is-v2 .mt-play, body.is-v2 .mt-tap { min-height: 88px; border-radius: 28px; }
body.is-v2 .mt-play { background: #009999; box-shadow: 0 7px 0 #007474; font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; font-size: 26px; }
body.is-v2 .mt-play.is-running { background: #E72829; box-shadow: 0 7px 0 #b51f20; }
body.is-v2 .mt-tap { background: #7B569E; border: 0; box-shadow: 0 7px 0 #5c3f79; color: #fff; }
body.is-v2 .mt-tap b { font-family: "Grobold", "Nunito", system-ui, sans-serif; font-weight: 400; color: #fff; font-size: 26px; letter-spacing: 0; }
body.is-v2 .mt-tap small { color: rgba(255, 255, 255, 0.85); }
body.is-v2 .mt-meter, body.is-v2 .mt-mute { border: 0; background: #fff; border-radius: 999px; box-shadow: 0 3px 0 rgba(27, 35, 62, 0.12); }
body.is-v2 .mt-meter.is-on { background: #1b233e; color: #fff; }
body.is-v2 .mt-note { color: #1b233e; opacity: 0.75; }

/* ── One screen, sideways (2026-10-21) ────────────────────────────────────
   The app is landscape only, and the controls sat 460px below a phone's fold
   under a big title and Beet. Now: no title (the arcade card already said
   "Metronome"), Beet and the beat dots on the left, tempo / Start / TAP / time
   signature / sound on the right. The page is pinned and never scrolls. */
html:has(body.is-v2), body.is-v2 { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.is-v2 #game { height: 100%; }
body.is-v2 .mt-screen.is-side {
  max-width: 1100px; height: 100%; height: 100dvh; margin: 0 auto; box-sizing: border-box;
  /* the top 64px belong to the back arrow and the pause button */
  padding: calc(64px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; justify-items: center; gap: 0 24px;
}
body.is-v2 .mt-screen.is-side .mt-head { display: none; }
body.is-v2 .mt-screen.is-side .mt-stage { width: auto; gap: 8px; padding: 0; }
body.is-v2 .mt-screen.is-side .mt-beet { width: clamp(110px, 40dvh, 240px); }
body.is-v2 .mt-screen.is-side .mt-count { font-size: 30px; min-height: 36px; line-height: 1.2; }
body.is-v2 .mt-screen.is-side .mt-dot { width: 22px; height: 22px; }
body.is-v2 .mt-panel { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 2.4dvh, 22px); }
body.is-v2 .mt-panel .mt-tempo { gap: 18px; }
body.is-v2 .mt-panel .mt-readout { min-width: 120px; }
body.is-v2 .mt-panel .mt-readout b { font-size: clamp(48px, 11dvh, 72px); }
body.is-v2 .mt-panel .mt-readout small { display: none; }
body.is-v2 .mt-panel .mt-mark { font-size: 16px; margin-top: 4px; }
body.is-v2 .mt-panel .mt-slider { width: 100%; max-width: none; height: 36px; margin: 0; }
body.is-v2 .mt-panel .mt-actions { width: 100%; max-width: none; }
body.is-v2 .mt-panel .mt-play { width: 100%; min-height: clamp(64px, 15dvh, 96px); margin: 0; background: #009999; box-shadow: 0 7px 0 #007474;
  display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 28px; }
body.is-v2 .mt-panel .mt-play.is-running { background: #E72829; box-shadow: 0 7px 0 #b51f20; }
body.is-v2 .mt-row { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: nowrap; }
body.is-v2 .mt-row .mt-tap { min-height: 52px; min-width: 84px; margin: 0; padding: 0 14px; border-radius: 999px; display: grid; place-items: center; }
body.is-v2 .mt-row .mt-tap b { font-size: 20px; }
body.is-v2 .mt-row .mt-tap small { display: none; }
body.is-v2 .mt-row .mt-meters { gap: 6px; }
body.is-v2 .mt-row .mt-meter { min-width: 0; min-height: 52px; padding: 0 12px; font: 900 17px/1 "Nunito", system-ui, sans-serif; }
/* sound on/off: a speaker picture, not words (the label stays for VoiceOver via aria-pressed + text) */
body.is-v2 .mt-row .mt-mute { flex: none; width: 52px; height: 52px; min-height: 52px; padding: 0; font-size: 0; color: transparent; position: relative; }
body.is-v2 .mt-row .mt-mute::before { content: ""; position: absolute; inset: 13px; background: #1b233e; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z' fill='%23000'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7M19 6a8.5 8.5 0 0 1 0 12'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z' fill='%23000'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7M19 6a8.5 8.5 0 0 1 0 12'/%3E%3C/svg%3E") center / contain no-repeat; }
body.is-v2 .mt-row .mt-mute.is-muted::before { background: #E72829; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z' fill='%23000'/%3E%3Cpath d='M16 9l5 6M21 9l-5 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z' fill='%23000'/%3E%3Cpath d='M16 9l5 6M21 9l-5 6'/%3E%3C/svg%3E"); }
@media (max-width: 760px) {
  body.is-v2 .mt-row { gap: 6px; }
  body.is-v2 .mt-row .mt-meter { padding: 0 9px; font-size: 15px; }
  body.is-v2 .mt-row .mt-meter { padding: 0 7px; }
  body.is-v2 .mt-row .mt-tap { min-width: 56px; padding: 0 8px; }
  body.is-v2 .mt-row .mt-tap b { font-size: 17px; }
  body.is-v2 .mt-row .mt-mute { width: 48px; height: 48px; min-height: 48px; }
  body.is-v2 .mt-panel .mt-step { width: 52px; height: 52px; }
}
/* iPad: everything grows into the room */
@media (min-height: 700px) and (min-width: 1000px) {
  body.is-v2 .mt-screen.is-side .mt-beet { width: clamp(110px, 40dvh, 330px); }
  body.is-v2 .mt-screen.is-side .mt-dot { width: 30px; height: 30px; }
  body.is-v2 .mt-screen.is-side .mt-beats { gap: 14px; }
  body.is-v2 .mt-screen.is-side .mt-count { font-size: 40px; min-height: 48px; }
  body.is-v2 .mt-panel { max-width: 540px; }
  body.is-v2 .mt-panel .mt-readout b { font-size: clamp(48px, 11dvh, 104px); }
  body.is-v2 .mt-panel .mt-mark { font-size: 20px; }
  body.is-v2 .mt-panel .mt-step { width: 76px; height: 76px; font-size: 30px; }
  body.is-v2 .mt-panel .mt-play { font-size: 34px; }
  body.is-v2 .mt-row { gap: 12px; }
  body.is-v2 .mt-row .mt-tap, body.is-v2 .mt-row .mt-meter { min-height: 68px; }
  body.is-v2 .mt-row .mt-tap { min-width: 110px; } body.is-v2 .mt-row .mt-tap b { font-size: 26px; }
  body.is-v2 .mt-row .mt-meter { padding: 0 16px; font-size: 21px; }
  body.is-v2 .mt-row .mt-mute { width: 68px; height: 68px; min-height: 68px; }
  body.is-v2 .mt-row .mt-mute::before { inset: 17px; }
}