/* Note Checker */
/* the title: the kit's .game-title (shared/ui-kit.css) in the tool's cyan */
.game-title{color:var(--cyan-hi);text-shadow:var(--glow-cyan)}
.lede{max-width:52ch;margin:8px 0 18px}
.startrow{display:flex;justify-content:center;margin:16px 0 0}
.readout{display:grid;grid-template-columns:auto 1fr;gap:18px 26px;align-items:center;margin:20px 0}
@media (max-width:560px){.readout{grid-template-columns:1fr}}
.bignote{min-width:150px;text-align:center}
.bignote b{display:block;font-family:var(--display),var(--music);font-weight:400;font-size:88px;line-height:1;color:var(--bone)}
.bignote b.hit{color:var(--gold);text-shadow:var(--glow-yellow)}
.bignote span{font-size:15px;color:var(--mist)}
.meter svg{width:100%;height:auto;display:block}
.meter .m-zone{fill:rgba(255,225,77,.16)}
.meter .m-tick{stroke:var(--text-dim)}
.meter .m-label{fill:var(--text-lo)}
.meter .m-needle{stroke:var(--yellow-hi)}
.meter .m-hub{fill:var(--yellow)}
.meter .verdict{text-align:center;font-weight:700;font-size:18px;min-height:27px;margin-top:4px}
.found{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin:8px 0 18px}
.found b{font-size:18px}
/* MIC SENSITIVITY: the tool's own block (the same setting as the shared Settings panel), with the kit's heading,
   labels and level meter (.ui-section, .ui-label, .ui-meter in shared/ui-kit.css) */
.sens{display:grid;gap:8px;background:var(--floor-2);border:1px solid var(--floor-3);border-radius:var(--r);padding:14px 16px}
.sens .ui-section{justify-self:start;margin-bottom:4px}
.sens .ui-label{margin:4px 0 0}
.sens .ui-howto{margin:0;font-size:15px}
.sens-row{display:flex;align-items:center;gap:14px;font-size:14px}
.tu-room{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;font-size:14px;margin-top:4px}
.tu-room .btn{margin-left:auto}
.sens input{flex:1;accent-color:var(--cyan);min-height:44px}

/* the seven modes: the kit's option toggle (.ui-seg) */
.modes{margin:14px 0 4px}

/* full range and scales (the instrument question, "Playing: … change" are shared styles in theme.css) */
.full-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:0 0 10px}
.full-stage{padding:6px 8px 0}
.full-stage .staff+.staff{margin-top:-6px;border-top:1px dashed var(--screen-2)}
/* the note being heard right now: a glowing outline on the staff */
#fullStaff .hearing .head{stroke:var(--cyan-ink);stroke-width:6px;stroke-opacity:.85;paint-order:stroke}
#fullStaff .hearing .ncap{fill:var(--cyan-ink)}
/* ?demo: the note Space will play */
#fullStaff .demo-cursor .ncap{text-decoration:underline;fill:var(--pink-ink)}
.octave-hint{min-height:27px;margin:8px 0 0;font-weight:700;color:var(--text-hi)}

.full-head .playing{margin:0}

/* ---------- ARTICULATION: the attack counter ---------- */
.art-box{display:flex;align-items:center;justify-content:center;gap:22px;margin:8px 0 4px;padding:14px;border-radius:20px;background:var(--floor-2);border:2px solid var(--cyan);box-shadow:var(--glow-cyan)}
.art-count{min-width:2.2ch;text-align:center;font-family:var(--display);font-size:clamp(84px,18vw,150px);line-height:1;color:var(--cyan-hi);text-shadow:var(--glow-cyan);font-variant-numeric:tabular-nums}
.art-count.flash{animation:art-flash .35s ease-out}
@keyframes art-flash{0%{color:var(--yellow);text-shadow:var(--glow-yellow);transform:scale(1.12)}100%{transform:none}}
.art-side p{margin:0}
.art-label{font-family:var(--display);font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-lo)}
.art-note{font-family:var(--display);font-size:clamp(30px,6vw,46px);color:var(--yellow);min-height:1.2em}
.art-rate{color:var(--text-lo);font-weight:700;min-height:1.3em}
.art-tip{margin:6px 0;text-align:center;font-weight:700;font-size:18px;color:var(--text-hi)}
@media (prefers-reduced-motion:reduce){.art-count.flash{animation:none;color:var(--yellow)}}