/*!
 * Metronome — look.
 *
 * Prodigies paper, like the Tuner and Bells: it is an instrument you keep open
 * beside something else, so it stays calm and the two things a hand reaches for
 * — Start and TAP — are the biggest targets on the page.
 */

:root {
  --paper: #f5f5f3;
  --paper-light: #fbfbf9;
  --ink: #1f1d1a;
  --ink-soft: #4a463f;
  --ink-faded: #8a8478;
  --rule: #d8d4cb;
  --teal: #009999;
  --teal-edge: #00706f;
  --green: #6abb4a;
  --green-edge: #4f9636;
  --red: #e72829;
  --red-edge: #b81f20;
  --gold: #ffd25b;
  --purple: #7b569e;
  --navy: #1b233e;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Nunito', 'Avenir Next Rounded', 'Trebuchet MS', sans-serif;
}

.mt-screen {
  max-width: 520px;
  margin: 0 auto;
  padding: 20px 18px 46px;
  display: grid;
  gap: 16px;
  justify-items: center;
}

.mt-head { text-align: center; }
.mt-eyebrow {
  margin: 0 0 4px;
  font-size: 10px; font-weight: 900; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--teal);
}
.mt-title {
  margin: 0;
  font-size: clamp(28px, 8vw, 40px); font-weight: 900; color: var(--navy);
  letter-spacing: -0.5px;
}

/* ── The stage: the Beet, the beat dots, the count ── */
.mt-stage {
  width: 100%;
  background: var(--paper-light);
  border: 2px solid var(--rule); border-radius: 22px;
  padding: 18px 16px 14px;
  display: grid; justify-items: center; gap: 10px;
}

.mt-beet {
  position: relative;
  width: clamp(96px, 30vw, 140px);
  display: grid; justify-items: center;
  /* The lean pivots at the bottom, like a real pendulum arm. */
  transform-origin: 50% 92%;
}
.mt-beet img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 4px 4px rgba(31, 29, 26, 0.18));
}
.mt-beet-shadow {
  position: absolute; left: 50%; bottom: 2px;
  width: 54%; height: 8px; margin-left: -27%;
  border-radius: 50%;
  background: rgba(31, 29, 26, 0.16);
}

/* Three leans: left, right, and a bigger squash on the downbeat. Short
   durations — a metronome's motion has to land ON the beat, not after it. */
.mt-beet.is-left  { animation: mt-lean-l 0.18s ease-out; }
.mt-beet.is-right { animation: mt-lean-r 0.18s ease-out; }
.mt-beet.is-down  { animation: mt-down 0.22s ease-out; }
@keyframes mt-lean-l {
  0% { transform: rotate(0deg); }
  55% { transform: rotate(-9deg); }
  100% { transform: rotate(0deg); }
}
@keyframes mt-lean-r {
  0% { transform: rotate(0deg); }
  55% { transform: rotate(9deg); }
  100% { transform: rotate(0deg); }
}
@keyframes mt-down {
  0% { transform: scale(1, 1) translateY(0); }
  45% { transform: scale(1.09, 0.9) translateY(4px); }
  100% { transform: scale(1, 1) translateY(0); }
}

.mt-beats { display: flex; align-items: center; gap: 9px; min-height: 22px; }
.mt-dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--rule);
  transition: background 0.08s, transform 0.08s;
}
.mt-dot.is-accent { width: 18px; height: 18px; }
.mt-dot.is-now { background: var(--teal); transform: scale(1.25); }
.mt-dot.is-accent.is-now { background: var(--red); }

.mt-count {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 700; color: var(--ink-soft);
  min-height: 28px; line-height: 1.2;
}

/* ── Tempo readout ── */
.mt-tempo { display: flex; align-items: center; gap: 14px; }
.mt-step {
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--rule); background: #fff;
  font: inherit; font-size: 24px; font-weight: 900; color: var(--ink-soft);
  cursor: pointer; line-height: 1;
}
.mt-step:hover { border-color: var(--ink-faded); color: var(--ink); }
.mt-step:active { transform: translateY(2px); }

.mt-readout { text-align: center; min-width: 128px; }
.mt-readout b {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(44px, 13vw, 60px); font-weight: 800; line-height: 1;
  color: var(--navy);
}
.mt-readout small {
  display: block; margin-top: 1px;
  font-size: 9px; font-weight: 900; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink-faded);
}
.mt-mark {
  display: block; margin-top: 3px;
  font-size: 13px; font-weight: 800; font-style: italic; color: var(--teal);
}

.mt-slider {
  width: 100%; max-width: 380px;
  accent-color: var(--teal);
}

/* ── Start and TAP: the two things a hand reaches for ── */
.mt-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  width: 100%; max-width: 380px;
}
.mt-play, .mt-tap {
  display: grid; justify-items: center; align-content: center; gap: 3px;
  min-height: 74px;
  border: none; border-radius: 20px;
  font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mt-play {
  background: var(--green); box-shadow: 0 5px 0 var(--green-edge);
  color: #fff; font-size: 18px; font-weight: 900;
}
.mt-play:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--green-edge); }
.mt-play.is-running { background: var(--red); box-shadow: 0 5px 0 var(--red-edge); }
.mt-play-icon {
  width: 0; height: 0;
  border-left: 15px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.mt-play.is-running .mt-play-icon {
  width: 15px; height: 16px; border: none; background: #fff; border-radius: 2px;
}

.mt-tap {
  background: #fff; border: 2px solid var(--rule);
  color: var(--ink-soft);
}
.mt-tap b { font-size: 19px; font-weight: 900; letter-spacing: 1.5px; color: var(--navy); }
.mt-tap small { font-size: 10.5px; font-weight: 700; color: var(--ink-faded); }
.mt-tap:hover { border-color: var(--purple); }
.mt-tap.is-hit { animation: mt-tap-hit 0.18s ease-out; }
@keyframes mt-tap-hit {
  0% { transform: scale(1); background: #fff; }
  40% { transform: scale(0.97); background: #f3edf8; }
  100% { transform: scale(1); background: #fff; }
}

/* ── Time signature + mute ── */
.mt-meters { display: flex; gap: 7px; }
.mt-meter {
  min-width: 54px; padding: 9px 12px;
  border: 2px solid var(--rule); border-radius: 12px; background: #fff;
  font: inherit; font-family: 'JetBrains Mono', monospace;
  font-size: 14px; font-weight: 700; color: var(--ink-soft); cursor: pointer;
}
.mt-meter:hover { border-color: var(--ink-faded); }
.mt-meter.is-on { background: var(--teal); border-color: var(--teal); color: #fff; }

.mt-mute {
  border: 2px solid var(--rule); border-radius: 999px; background: #fff;
  padding: 8px 18px;
  font: inherit; font-size: 12.5px; font-weight: 900; color: var(--ink-soft);
  cursor: pointer;
}
.mt-mute.is-muted { color: var(--red); border-color: var(--red); }

.mt-note {
  margin: 0; max-width: 42ch; text-align: center;
  font-size: 11.5px; font-weight: 700; color: var(--ink-faded); line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .mt-beet.is-left, .mt-beet.is-right, .mt-beet.is-down, .mt-tap.is-hit {
    animation: none;
  }
  /* The dots still change colour, so the beat is never invisible. */
  .mt-dot { transition: background 0.01ms; }
}