/* The Chord Bridge (js/theory/gauntlet.js): #gauntlet-screen / #gb-root.
   One column over the standard overlay: control bar, the canvas, the time
   bar, the key hint. The scene itself is painted on the canvas. */
#gb-root { width: min(1290px, 97vw); display: flex; flex-direction: column; gap: 8px; }
/* scene left, the engraved sheet right (Lionel, 2026-09-01: over the canvas
   it was hard to see what was going on); on a narrow window the sheet wraps
   under the scene */
.gb-main { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.gb-main .gb-stagewrap { flex: 1 1 700px; min-width: 0; }
.gb-sheet {
  flex: 0 0 250px; display: flex; flex-direction: column; gap: 8px;
  background: #f6f0df; border: 1px solid #cbbf9d; border-radius: 12px; padding: 10px;
}
.gb-sh-title {
  font: 700 11px "Segoe UI", sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: #8d7c52; margin: 0 0 2px 2px;
}
.gb-sh-svg { min-height: 30px; }
.gb-sh-svg svg { display: block; }
.gb-sh-letters { font: 700 17px Georgia, serif; color: #332414; padding: 4px 2px; letter-spacing: .12em; }
/* the replaying dress: the run's controls step back */
.gb-replaying .gb-bar select, .gb-replaying .gb-chk, .gb-replaying #gb-replay,
.gb-replaying #gb-replays-btn { pointer-events: none; opacity: .45; }
.gb-btn:disabled { opacity: .45; pointer-events: none; }
.gb-bar {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
  color: #9aa3b8; font-size: 12px;
}
.gb-bar label { display: inline-flex; align-items: center; gap: 5px; }
.gb-bar select {
  background: #1a1f2b; color: #e8ecf6; border: 1px solid #2a3145;
  border-radius: 7px; padding: 4px 7px; font: inherit;
}
.gb-btn {
  background: #1a1f2b; color: #e8ecf6; border: 1px solid #2a3145;
  border-radius: 8px; padding: 5px 10px; font: inherit; cursor: pointer;
}
.gb-btn:hover { border-color: #e7b54a; }
.gb-title { font-weight: 700; color: #f3ecd8; font-size: 15px; }
.gb-chk { cursor: pointer; }
.gb-stats { margin-left: auto; color: #9aa3b8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gb-stats b { color: #e7b54a; }
.gb-lives { color: #ff7b8a; letter-spacing: 2px; }
/* the canvas and the results card share one stacking context: the run's last
   frame stays painted (dimmed by the canvas itself) under the card */
.gb-stagewrap { position: relative; }
#gb-stage {
  display: block; width: 100%; border-radius: 12px;
  border: 1px solid #2a3145; background: #000;
}
/* the engraved notes over the stage (gauntlet.js renderStage): canvas units,
   fitted to the canvas's content box by JS; each nested <svg> is one Verovio
   snippet whose furniture is hidden — the staff lines by visibility so they
   can still be measured for the alignment */
.gb-overlay { position: absolute; left: 1px; top: 1px; width: 100%; height: auto; pointer-events: none; color: #332414; overflow: visible; }
.gb-overlay svg { overflow: visible; }
.gb-overlay g.staff > path { visibility: hidden; }
.gb-overlay g.clef, .gb-overlay g.keySig, .gb-overlay g.meterSig, .gb-overlay g.barLine, .gb-overlay g.grpSym, .gb-overlay g.rest, .gb-overlay g.mRest { display: none; }
.gb-overlay[data-state="paused"] { opacity: .45; }
.gb-overlay[data-state="ready"], .gb-overlay[data-state="over"] { opacity: 0; }
.gb-sh-hint { color: #8d7c52; font-size: 12.5px; line-height: 1.4; padding: 2px; }
.gb-result {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.gb-rcard {
  width: min(430px, 86%); background: #171c27; border: 1px solid #39415a;
  border-radius: 14px; padding: 16px 20px 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.gb-rhead { text-align: center; }
.gb-rcard h2 { margin: 0; font: 700 21px Georgia, serif; color: #f3ecd8; }
.gb-rsub { color: #8d94a8; font-size: 12px; margin-top: 2px; }
.gb-rscore { text-align: center; margin: 10px 0 12px; }
.gb-rscore b { font: 800 42px/1 "Segoe UI", sans-serif; color: #e7b54a; }
.gb-rlabel { color: #8d94a8; font-size: 12px; margin-left: 6px; }
.gb-rbadge {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: #35b06a; color: #06210f; font: 800 10px "Segoe UI", sans-serif; letter-spacing: .08em;
  vertical-align: middle;
}
.gb-rgrid { display: flex; flex-direction: column; gap: 1px; background: #232a3b; border-radius: 8px; overflow: hidden; }
.gb-rrow { display: flex; justify-content: space-between; gap: 12px; padding: 6px 11px; background: #1a1f2b; font-size: 13px; }
.gb-rrow span { color: #9aa3b8; }
.gb-rrow b { color: #e8ecf6; font-variant-numeric: tabular-nums; }
.gb-ractions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.gb-ractions .gb-btn { flex: 1 1 40%; padding: 9px 10px; font-weight: 600; white-space: nowrap; }
.gb-rplist { max-height: 250px; overflow-y: auto; }
.gb-rprow { align-items: center; }
.gb-rpbtns { display: flex; gap: 6px; }
.gb-rpbtns .gb-btn { padding: 3px 8px; }
.gb-btn.gb-primary { background: #2b3550; border-color: #e7b54a; color: #f3ecd8; }
.gb-timebar { height: 6px; border-radius: 3px; background: #232a3b; overflow: hidden; }
.gb-timebar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #35b06a, #e7b54a); }
.gb-help { color: #7f8aa5; font-size: 12px; line-height: 1.5; }
.gb-help b { color: #c9d1e4; font-family: ui-monospace, monospace; font-weight: 600; }
@media (max-height: 700px) { .gb-help { display: none; } }

/* ---- the pitch-class pad (js/theory/pcpad.js): one octave of DOM keys under
   the stage, the phone's instrument for the Bridge and the Conductor. Black
   keys are absolute over a 7-column grid of whites: white i spans
   [i/7, (i+1)/7], and a black key after white `--after` is centred on that
   boundary at 62% of a white's width. Every key clears 44px. */
.gb-padhost:empty { display: none; }
.pcpad { padding: 2px 0 2px; }
.pcpad.hidden { display: none; }
.pcpad-keys {
  position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
  height: clamp(96px, 17vh, 132px); touch-action: none; user-select: none; -webkit-user-select: none;
}
.pcpad-w, .pcpad-b {
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px;
  border-radius: 0 0 8px 8px; cursor: pointer; font: 700 13px "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent; transition: background .06s;
}
.pcpad-w { background: #f3ecd8; color: #4d4638; border: 1px solid #b8ad8e; }
.pcpad-b {
  position: absolute; top: 0; height: 58%; z-index: 2; width: calc(100% / 7 * .62);
  left: calc((var(--after) + 1) * (100% / 7) - (100% / 7 * .31));
  background: #1a1f2b; color: #c9d1e4; border: 1px solid #39415a; font-size: 11px;
}
.pcpad-w.lit, .pcpad-b.lit, .pcpad-w:active, .pcpad-b:active { background: #e7b54a; color: #1c1406; }
.gb-btn.on { border-color: #e7b54a; color: #e7b54a; }
/* a phone folds the setup controls behind ⚙ Setup and drops the key hint;
   `display: contents` keeps the wrapper invisible to the bar's flex layout
   on a desktop, where the controls stay where they always were */
.gb-setup { display: contents; }
.gb-setup-btn { display: none; }
@media (max-width: 700px) {
  .gb-setup-btn { display: inline-block; }
  .gb-setup { display: none; }
  .gb-setup-open .gb-setup { display: contents; }
  .gb-help { display: none; }
  .gb-stats { margin-left: 0; width: 100%; font-size: 11.5px; }
  .gb-title { font-size: 13.5px; }
}
@media (pointer: coarse) { .gb-help { display: none; } }