/* Desk K3 · playing and speed: Play it, A short tune, Flash, Note rush (web/js/games/play.js, melody.js, flash.js,
   rush.js). Builds on app.css (.question, .staff-card, .letter-pad, .key-btn, .piano, .timer, .meter, .beat-dot).
   Notes stay ink; colour marks state, always with text. Reduce Motion: the same timings as fades. P2-92, desk K3. */

.k3-center { text-align: center; }

/* What the microphone heard, or what a key said: under the staff, space kept so the keyboard never jumps. */
.k3-heard { display: flex; gap: .5rem; align-items: flex-start; justify-content: center; min-height: 1.6em; text-align: center;
  color: var(--ink-soft); font-size: 1.05rem; font-weight: 600; }
.k3-heard .icon { margin-top: .1em; color: var(--accent); }
.k3-heard.is-wrong { color: var(--bad); }
.k3-heard.is-wrong .icon { color: var(--bad); }
.k3-heard.is-right, .k3-heard.is-right .icon { color: var(--good); }

/* The microphone line: a button before the first use, then "Listening" with a level meter. */
.k3-mic { display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; }
.k3-mic .btn .icon { color: var(--accent); }
.k3-mic-status { display: flex; gap: .45rem; align-items: center; justify-content: center; color: var(--ink-soft); font-weight: 600; max-width: 36rem; }
.k3-mic-status .icon { color: var(--accent); }
.k3-mic.on { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: .4rem .75rem; }
.k3-mic.on .k3-mic-status .icon { color: var(--good); }
.k3-mic.off .k3-mic-status { align-items: flex-start; text-align: left; }
.k3-mic.off .k3-mic-status .icon { color: var(--bad); margin-top: .15em; }
.k3-meter { width: 7rem; }

/* A wrong note on the staff: a small shake (a blink with Reduce Motion), then back to ink. */
.note.k3-shake { animation: k3-shake 400ms ease both; transform-box: fill-box; }
@keyframes k3-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes k3-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Labels under notes (early, late, missed, a letter). */
.k3-marks { position: relative; height: 1.7rem; margin-top: .15rem; }
.k3-marks:empty { display: none; }
.k3-mark { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; font-size: .9rem; font-weight: 700;
  color: var(--ink-soft); animation: fade var(--fade) ease both; }
.k3-mark.is-wrong { color: var(--bad); }
.k3-mark.is-off { color: var(--warm); }
.k3-mark.is-right { color: var(--good); }

/* Tunes: notes that vanish once played ('ahead'), the count-in row. */
.k3-melody .note, .k3-flash .note { transition: opacity var(--fade) ease; }
.note.k3-gone { opacity: 0; }
.k3-start { gap: 1rem; }

/* Flash: the notes are veiled before and after their moment; numbered answer slots. */
.k3-veiled .note { opacity: 0; }
.k3-slots { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.k3-slot { position: relative; width: 3.25rem; height: 3.75rem; border-radius: 12px; border: 1px dashed var(--line); background: var(--card);
  display: grid; place-items: center; }
.k3-slot-n { position: absolute; top: .2rem; left: .4rem; font-size: .75rem; font-weight: 700; color: var(--ink-soft); }
.k3-slot-l { font: 600 1.5rem var(--serif); padding-top: .55rem; }
.k3-slot.is-next { border: 2px solid var(--accent); }
.k3-slot.is-correct { border: 2px solid var(--good); background: var(--good-bg); color: var(--good); }
.k3-slot.is-wrong { border: 2px solid var(--bad); background: var(--bad-bg); color: var(--bad); }

/* Note rush: score beside the title, a calm bar, the note dimmed before the start and at the end. */
.k3-rush-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.k3-rush-head .prompt { text-align: left; margin: 0; }
.k3-score { color: var(--ink-soft); font-weight: 600; }
.k3-score strong { font: 600 1.8rem var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.k3-rush-timer { height: .6rem; }
.timer.paused span { animation-play-state: paused; }
.k3-rush-staff { transition: opacity var(--fade) ease; }
.k3-rush-staff.k3-dim { opacity: .35; }
.k3-rush-intro { display: flex; flex-direction: column; gap: .6rem; align-items: center; }
.k3-rush-intro p:first-child { font-size: 1.15rem; font-weight: 600; }

/* Keyboard: middle C says "middle" on a second line while its key is wide enough. */
.k3-play .pk.white, .k3-melody .pk.white { container-type: inline-size; }
.k3-pk-sub { display: block; max-width: 100%; font-size: .7rem; font-weight: 600; overflow-wrap: anywhere; text-align: center; }
@container (max-width: 3rem) { .k3-pk-sub { display: none; } }

@media (max-width: 560px) {
  .k3-play .piano, .k3-melody .piano { height: 8rem; }
  .k3-slot { width: 2.9rem; }
}

/* Short screens (iPad landscape): a smaller staff so the keyboard stays in view without scrolling. */
@media (orientation: landscape) and (max-height: 900px) {
  .k3-play .staff-card .staff-svg, .k3-melody .staff-card .staff-svg { max-height: 9.5rem; }
  .k3-play .staff-card, .k3-melody .staff-card { padding-block: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .note.k3-shake { animation-name: k3-blink; }
}