/* Desk K2 games: count (note values), tap (rhythm in time), key (key signatures), interval.
   Builds on app.css (.question, .staff-card, .letter-pad, .key-btn, .hint-line, .under-pad); colours only from its
   tokens. Reduced motion: the same timings, colour changes only. P2-92, 29 Oct 2026. */

/* ---- Count and interval: five answers sit in one row where they fit */
.letter-pad.n5 { grid-template-columns: repeat(5, minmax(0, 7rem)); justify-content: center; }
@media (max-width: 420px) { .letter-pad.n5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.k2-keys .key-name, .k2-numbers .key-name { white-space: nowrap; }
.letter-pad.k2-keys { grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr)); }
.letter-pad.k2-keys.n2, .letter-pad.k2-keys.n3 { grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 11rem)); justify-content: center; }

/* ---- Key: the sign that decides the key, marked after the answer (the hint names it in words) */
.staff-sign.key use.k2-deciding { color: var(--current); fill: var(--current); }
.k2-key .staff-svg, .k2-value .staff-svg { max-height: 12rem; }

/* ---- Tap: the rhythm, counting words and results under the notes */
.k2-rhythm { padding-bottom: .75rem; }
.k2-rhythm .staff-svg { max-height: 13rem; }
.k2-under { position: relative; height: 1.75rem; }
.k2-under:empty { height: 0; }
.k2-at { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; display: inline-flex; align-items: center; gap: .2rem;
  font-size: .95rem; line-height: 1.75rem; }
.k2-counts .k2-at { font: 600 .95rem/1.75rem var(--serif); color: var(--ink-soft); }
.k2-counts .k2-at.rest { font-weight: 400; color: var(--ink-soft); }
.k2-counts.faded { opacity: .45; transition: opacity var(--fade); }
.k2-mark { font-weight: 700; }
.k2-mark .icon { width: 1.1em; height: 1.1em; }
.k2-mark.right { color: var(--good); }
.k2-mark.early, .k2-mark.late, .k2-mark.missed { color: var(--bad); }
.k2-legend { display: none; justify-content: center; flex-wrap: wrap; gap: .25rem 1rem; font-size: .9rem; margin-top: .25rem; }
.k2-marks.compact + .k2-legend:not(:empty) { display: flex; }
.k2-legend .k2-mark { display: inline-flex; align-items: center; gap: .2rem; }
.k2-marks.compact .k2-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Beat dots: the count-in and every beat of the bar, lit as each click is heard */
.k2-beats { display: flex; justify-content: center; gap: .75rem; }
.k2-dot { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; font: 600 1.15rem var(--serif);
  color: var(--ink-soft); background: var(--card); border: 2px solid var(--line);
  transition: background-color var(--fade), color var(--fade), border-color var(--fade), transform var(--fade); }
.k2-dot.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); transform: scale(1.12); }
.k2-dot.count.on { background: var(--accent); border-color: var(--accent); }
.k2-status { min-height: 1.5em; text-align: center; color: var(--ink-soft); font-weight: 650; margin-top: -.25rem; }

/* The tap pad: one big target; pointerdown taps, so it never waits for a click */
.k2-pad { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; width: 100%; max-width: 32rem;
  min-height: 8.5rem; margin: 0 auto; padding: 1rem; border-radius: var(--r); border: 2px solid var(--line); background: var(--card); color: var(--ink);
  cursor: pointer; box-shadow: var(--lift); touch-action: manipulation; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color 90ms ease-out, border-color var(--fade); }
.k2-pad-big { font: 600 clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem)/1.1 var(--serif); }
.k2-pad-small { font-size: .95rem; color: var(--ink-soft); text-align: center; }
.k2-pad-small:empty { display: none; }
.k2-pad.is-idle { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.k2-pad.is-idle .k2-pad-small { color: var(--on-ink); opacity: .8; }
.k2-pad.is-count, .k2-pad.is-take { border-color: var(--accent); }
.k2-pad.is-take { background: var(--accent-bg); }
.k2-pad.hit { transform: translate(3px, 3px); box-shadow: var(--lift-down); background: var(--accent); color: var(--on-ink); }
.k2-pad.hit .k2-pad-small { color: var(--on-ink); }
.k2-pad:disabled { cursor: default; opacity: .6; box-shadow: none; }
.k2-pad.is-done:disabled { opacity: .45; }
.k2-under-pad { gap: .5rem; flex-wrap: wrap; }
.k2-tip { justify-content: center; }

/* Calibration */
.k2-cal { text-align: center; align-items: stretch; }
.k2-cal-text { max-width: 32rem; margin: 0 auto; color: var(--ink-soft); }
.k2-cal-result:empty { display: none; }
.k2-cal-ok, .k2-cal-bad { display: flex; gap: .5rem; align-items: flex-start; justify-content: center; max-width: 34rem; margin: 0 auto; font-weight: 600; }
.k2-cal-ok { color: var(--good); }
.k2-cal-ok .icon, .k2-cal-bad .icon { margin-top: .1em; }
.k2-cal-bad .icon { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .k2-dot, .k2-dot.on { transform: none; }
  .k2-pad.hit { transform: none; }
}