/* Sing mode: extra styles on top of the game's style.css */
.game { display: grid; gap: 20px; }
.miccheck { display: grid; gap: 14px; justify-items: start; border-top: 2px solid var(--sky-light); padding-top: 18px; }
.miccheck p { margin: 0; }
.micmeter { display: flex; align-items: center; gap: 22px; }
.heard { font-family: var(--display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: 44px; line-height: 1;
  color: var(--blue); min-width: 3ch; }
.levelbar { width: 220px; height: 12px; border-radius: 6px; background: var(--sky-pale); border: 1.5px solid var(--sky-light); overflow: hidden; }
.levelbar i { display: block; height: 100%; width: 0; background: var(--sky); }
.good { color: var(--ok); font-weight: 700; }

.liverow { display: flex; align-items: center; gap: 10px; }
.liverow b { min-width: 2.4ch; }
.needle { position: relative; width: 140px; height: 16px; border-radius: 8px; background: var(--sky-pale); border: 1.5px solid var(--sky-light); }
.needle::before { content: ""; position: absolute; left: 50%; top: 1px; bottom: 1px; width: 2px; margin-left: -1px; background: var(--sky-light); }
.needle i { position: absolute; top: 1px; bottom: 1px; width: 8px; margin-left: -4px; border-radius: 4px; background: var(--blue); left: 50%; transition: left .2s; }
.liverow .muted { min-width: 4ch; font-variant-numeric: tabular-nums; }

/* One size for every cue, so the music never shifts */
.cuebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 52px; }
.cue { font-family: var(--display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: 34px; line-height: 1.2;
  color: var(--deep); font-variant-numeric: tabular-nums; }

/* Results on the music */
.judge { position: absolute; border-radius: 6px; border: 2px solid; cursor: pointer; }
.judge.ok { background: rgba(30,138,79,.15); border-color: var(--ok); }
.judge.bad { background: rgba(211,58,58,.15); border-color: var(--bad); }
.rtag { position: absolute; transform: translateX(-50%); text-align: center; line-height: 1.1; pointer-events: none; white-space: nowrap; }
.rtag b { display: block; font: 700 15px var(--body); }
.rtag small { font: 600 12px var(--body); color: #4d7a9c; }
.rtag.ok b { color: var(--ok); }
.rtag.bad b { color: var(--bad); }

.result { gap: 4px; }
.plot { width: 100%; height: 240px; display: block; background: #fff; border: 2px solid var(--sky-light); margin-top: 12px; }
.result audio { width: 100%; margin-top: 6px; }

/* Small × to hide live pitch, and the quiet link that brings it back */
.xbtn { border: 0; background: none; color: var(--blue); font: 700 15px var(--body); line-height: 1; padding: 0 4px; cursor: pointer; border-radius: 50%; }
.xbtn:hover { background: var(--sky-pale); }
.linkbtn { border: 0; background: none; color: var(--blue); font: 600 13px var(--body); text-decoration: underline; cursor: pointer; padding: 0; align-self: end; }

/* Count-in: every word shown, each lights up on its click */
.countin { display: inline-flex; gap: .55em; flex-wrap: wrap; }
.countin span { color: var(--sky-light); transition: color .08s; }
.countin span.on { color: var(--deep); }
.countin span.on:last-child { color: var(--blue); }

.judge.none { border-color: transparent; background: transparent; }
.rtag.none b, .rtag.none small { color: #9bb5c8; }

#metro[aria-pressed="true"] { background: var(--blue); color: #fff; }

/* What was sung, drawn over the music */
.sungline { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.sungline path { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; opacity: .8; }

/* Review bands on the music (replace boxes), reset button, answers with Show solfège */
.judge { border: 0; border-radius: 4px; }
.judge.ok { background: rgba(30,138,79,.25); }
.judge.bad { background: rgba(211,58,58,.25); }
.judge.none { background: rgba(140,203,234,.25); }
.rtag i { display: block; font: 700 15px var(--body); font-style: normal; color: var(--deep); }

/* Simple review view: a red box on wrong notes only (other notes stay tappable) */
.judge.box { border: 2px solid transparent; border-radius: 6px; background: transparent; }
.judge.box.bad { border-color: var(--bad); background: rgba(211,58,58,.12); }
#solfBtn[aria-pressed="true"] { background: var(--blue); color: #fff; }
.graphtoggle { justify-self: start; margin-top: 10px; }