/* Chirp Hero — a stage at night: one lit board in Clone Hero's lane colours, chirp's
   instrument-panel chrome at the edges, big tabular numerals for the score. The four-colour
   lane strip is the motif (under the wordmark, on the pad tiles, in the progress bar). */

:root,
[data-theme="ember"],
[data-theme="ice"] {
  --hero-red: #ff4848;
  --hero-yellow: #ffd23b;
  --hero-blue: #3d8eff;
  --hero-green: #2fd36b;
  --hero-kick: #ff8a1f;
  --hero-stage: #08080b;
  --hero-board: #15151c;
  --hero-rail: #44445a;
  --hero-beat: #262634;
  --hero-text: #d8d8e2;
  --hero-miss: #5a5a66;
}

[data-theme="ice"] {
  --hero-stage: #060a10;
  --hero-board: #101824;
  --hero-rail: #3a5068;
  --hero-beat: #1e2a3a;
}

[data-theme="paper"] {
  --hero-red: #e8343a;
  --hero-yellow: #f2bd1c;
  --hero-blue: #2f78e8;
  --hero-green: #23b45a;
  --hero-kick: #f07a12;
  --hero-stage: #1c1a17;
  --hero-board: #29261f;
  --hero-rail: #6a6252;
  --hero-beat: #3a362e;
  --hero-text: #f2ede2;
  --hero-miss: #6e675a;
}

.lanes-strip,
.hero-mark::after {
  background: linear-gradient(
    90deg,
    var(--hero-red) 0 25%,
    var(--hero-yellow) 25% 50%,
    var(--hero-blue) 50% 75%,
    var(--hero-green) 75% 100%
  );
}

/* ── mode: Hero takes the work area; the deck and the console stay ───── */

body[data-mode="hero"] > .work {
  display: none;
}

body[data-mode="hero"] > .hero {
  grid-row: 2;
}

body[data-mode="hero"] > .console {
  grid-row: 3;
}

#to-hero[aria-pressed="true"] {
  color: var(--accent);
}

.hero {
  display: grid;
  grid-template-rows: 34px minmax(0, 1fr);
  min-height: 0;
  background: var(--hero-stage);
  border-bottom: 1px solid var(--line);
}

.hero[hidden] {
  display: none;
}

/* ── rail ─────────────────────────────────────────────── */

.hero-rail {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.hero-mark {
  position: relative;
  font: 800 13px/1 var(--sans);
  letter-spacing: 0.32em;
  color: var(--text);
  padding-bottom: 4px;
}

.hero-mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.32em;
  bottom: 0;
  height: 3px;
}

.hero-now {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.hero-now b {
  font: 700 14px/1 var(--sans);
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-now span {
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-midi {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--dim);
  white-space: nowrap;
}

.hero-midi .lamp {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint);
}

.hero-midi.on .lamp {
  background: var(--ok);
  box-shadow: 0 0 6px var(--ok);
}

.hero-midi.on {
  color: var(--text);
}

.hero-midi.err .lamp {
  background: var(--error);
}

.hero-midi.pulse .lamp {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

/* ── stage ────────────────────────────────────────────── */

.hero-stage {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 0;
}

.hero-songs {
  grid-column: 1;
  grid-row: 1;
  width: 300px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: 10px 0 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
  min-height: 0;
}

.hero-songs[hidden] {
  display: none;
}

.hero-songs input {
  margin: 0 10px;
}

.hero-song-list {
  overflow-y: auto;
  padding-bottom: 12px;
}

.hero-album {
  padding: 12px 12px 4px;
  font: 600 10px/1.3 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

.hero-song {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  padding: 5px 12px;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  text-align: left;
  color: var(--text);
}

.hero-song:hover {
  background: var(--raise);
}

.hero-song[aria-selected="true"] {
  background: var(--sel);
  border-left-color: var(--accent);
}

.hero-song .no {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.hero-song .t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--sans);
}

.hero-song .meta {
  color: var(--dim);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hero-song .meta .best {
  color: var(--accent);
}

.hero-song.none .t {
  color: var(--dim);
}

/* ── play area ────────────────────────────────────────── */

.hero-play {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.hero-highway {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-hud[hidden] {
  display: none;
}

.hero-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hud-mult {
  position: absolute;
  left: calc(var(--board-l, 22%) - 116px);
  top: calc(var(--strike-y, 82%) - 150px);
  width: 76px;
  height: 76px;
}

.hud-score {
  position: absolute;
  left: calc(var(--board-r, 78%) + 34px);
  top: calc(var(--strike-y, 82%) - 170px);
  display: grid;
  gap: 2px;
  color: var(--hero-text);
}

.hud-mult svg {
  width: 76px;
  height: 76px;
  transform: rotate(-90deg);
}

.hud-mult circle {
  fill: none;
  stroke-width: 6;
}

.hud-mult .ring-bg {
  stroke: rgba(255, 255, 255, 0.08);
}

.hud-mult .ring {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 169.6;
  stroke-dashoffset: 169.6;
  transition: stroke-dashoffset 80ms linear;
}

.hud-mult[data-x="2"] .ring {
  stroke: var(--hero-green);
}

.hud-mult[data-x="3"] .ring {
  stroke: var(--hero-blue);
}

.hud-mult[data-x="4"] .ring {
  stroke: var(--hero-kick);
}

.hud-mult b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 800 22px/1 var(--sans);
  color: var(--hero-text);
  font-variant-numeric: tabular-nums;
}

.hud-mult.broke {
  animation: hud-shake 220ms;
}

@keyframes hud-shake {
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

.hud-score b {
  font: 800 34px/1 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.hud-score span {
  color: #9a9aa8;
  font-variant-numeric: tabular-nums;
}

.hud-score output {
  color: var(--hero-text);
}

.hud-timing {
  position: relative;
  width: 96px;
  height: 6px;
  margin-top: 6px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    rgba(61, 142, 255, 0.35),
    rgba(255, 255, 255, 0.08) 45% 55%,
    rgba(255, 138, 31, 0.35)
  );
}

.hud-timing::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  width: 1px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
}

.hud-timing i {
  position: absolute;
  top: -1px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--hero-text);
  transition: left 120ms;
}

.hero-count {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  font: 800 96px/1 var(--sans);
  color: var(--hero-text);
  text-shadow: 0 0 24px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.hero-empty {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 18px 26px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r);
  color: #8c8c9a;
  font: 600 13px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  pointer-events: none;
}

.hero-empty.go {
  pointer-events: auto;
  color: var(--hero-text);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.hero-empty.go:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}

.hero-toast {
  position: absolute;
  left: 50%;
  top: 48px;
  transform: translateX(-50%);
  padding: 6px 14px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.hero-toast[hidden] {
  display: none;
}

.hero-empty svg {
  width: 48px;
  height: 48px;
  opacity: 0.6;
}

.hero-empty[hidden] {
  display: none;
}

/* ── results ──────────────────────────────────────────── */

.hero-results {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: min(420px, 90%);
  display: grid;
  gap: 14px;
  padding: 20px 22px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--r);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.hero-results[hidden] {
  display: none;
}

.res-head {
  display: grid;
  gap: 4px;
}

.res-head b {
  font: 800 44px/1 var(--sans);
  font-variant-numeric: tabular-nums;
}

.res-head span {
  color: var(--dim);
}

.res-head .new {
  color: var(--accent);
}

.res-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 12px;
  margin: 0;
}

.res-facts div {
  display: grid;
  gap: 2px;
}

.res-facts dt {
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

.res-facts dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}

.res-hist {
  width: 100%;
  height: 64px;
}

.res-pads {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}

.res-pads div {
  display: grid;
  gap: 3px;
  justify-items: center;
  font-size: 10px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.res-pads i {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--raise);
  overflow: hidden;
}

.res-pads i::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--p, 0%);
  background: var(--c, var(--accent));
}

.res-actions {
  display: flex;
  gap: 8px;
}

.hero-btn {
  height: 28px;
  padding: 0 12px;
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
}

.hero-btn:hover {
  border-color: var(--beat);
}

.hero-btn.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: 700;
}

.hero-btn[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── settings panel ───────────────────────────────────── */

.hero-panel {
  grid-column: 3;
  grid-row: 1;
  width: 420px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--panel);
  border-left: 1px solid var(--line);
  min-height: 0;
}

.hero-panel[hidden] {
  display: none;
}

.hero-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
}

.hero-tabs button {
  flex: 1;
  height: 34px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--dim);
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-tabs button[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.hero-tab {
  overflow-y: auto;
  padding: 12px;
  display: grid;
  align-content: start;
  gap: 12px;
}

.hero-tab[hidden] {
  display: none;
}

.hero-tab .row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-tab .row span {
  flex: 1;
  color: var(--dim);
}

.hero-tab .row.check span {
  color: var(--text);
}

.hero-tab .row input[type="number"] {
  width: 64px;
}

.hero-tab .row input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
}

.hero-tab input[type="checkbox"] {
  accent-color: var(--accent);
}

.hero-tab .live {
  color: var(--dim);
  min-height: 19px;
}

/* kit */

.kit-midi {
  display: grid;
  gap: 6px;
}

.kit-midi .inputs {
  display: grid;
  gap: 2px;
}

.kit-midi label {
  display: flex;
  gap: 8px;
  align-items: center;
}

.kit-midi .heard {
  color: var(--dim);
  min-height: 19px;
  font-variant-numeric: tabular-nums;
}

.kit-midi .heard b {
  color: var(--text);
}

.kit-pads {
  display: grid;
  gap: 3px;
}

.kit-head,
.pad-tile {
  display: grid;
  grid-template-columns: 18px 96px minmax(0, 1fr) 58px 44px 44px;
  align-items: center;
  gap: 6px;
}

.kit-head {
  padding: 0 8px 2px 11px;
  font: 600 9px/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

.kit-head span:nth-child(1) {
  grid-column: 3;
}

.pad-tile {
  --c: var(--accent);
  position: relative;
  min-height: 34px;
  padding: 4px 8px 4px 8px;
  background: var(--raise);
  border: 1px solid var(--line);
  border-left: 3px solid var(--c);
  border-radius: var(--r);
}

.pad-tile.learning {
  border-color: var(--c);
  box-shadow:
    0 0 0 1px var(--c),
    0 0 18px color-mix(in srgb, var(--c) 40%, transparent);
}

.pad-tile.struck {
  background: color-mix(in srgb, var(--c) 22%, var(--raise));
}

.pad-tile .name {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 12px/1.1 var(--sans);
  min-width: 0;
}

.pad-tile .name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gem {
  flex: none;
  width: 18px;
  height: 10px;
  background: var(--c);
}

.gem.tom {
  border-radius: 50%;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.35);
}

.gem.cym {
  height: 8px;
  border-radius: 50% 50% 40% 40% / 100% 100% 30% 30%;
}

.gem.kick {
  width: 18px;
  height: 5px;
  border-radius: 3px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
}

.chip {
  height: 20px;
  padding: 0 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.chip:hover {
  border-color: var(--error);
  color: var(--error);
}

.chip.fresh {
  border-color: var(--c);
}

.pad-tile .learn {
  height: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--dim);
  font-size: 11px;
}

.pad-tile .learn[aria-pressed="true"] {
  color: var(--accent-ink);
  background: var(--c);
  border-color: var(--c);
}

.pad-tile input[type="number"] {
  width: 100%;
  min-width: 0;
  padding: 1px 3px;
  font-size: 11px;
}

.pad-tile .vel {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--c);
  transition: width 60ms;
}

.pad-tile kbd {
  margin-left: auto;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--dim);
  font: 10px/14px var(--mono);
}

.kit-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.kit-bulk > button {
  height: 22px;
  padding: 0 6px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--dim);
  font-size: 11px;
}

.kit-bulk label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--dim);
}

.kit-bulk input {
  width: 52px;
}

.kit-actions {
  display: flex;
  gap: 6px;
}

.kit-unmapped {
  color: var(--dim);
}

.kit-unmapped .chip {
  border-style: dashed;
}

/* calibration */

.cal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
}

.cal-plot {
  width: 100%;
  height: 40px;
}

.cal-out {
  grid-column: 1 / -1;
  min-height: 19px;
  font-variant-numeric: tabular-nums;
}

.cal-out.ok {
  color: var(--ok);
}

.cal-out.bad {
  color: var(--warn);
}

/* parts */

.parts {
  display: grid;
  gap: 10px;
}

.part-row {
  display: grid;
  gap: 3px;
}

.part-row > label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.part-row > label .n {
  margin-left: auto;
  color: var(--dim);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.part-src {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 104px;
  align-items: center;
  gap: 6px;
  padding-left: 22px;
}

.part-src .who {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.part-src .who i {
  color: var(--dim);
  font-style: normal;
}

.part-src .n {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.part-src select {
  width: 104px;
}

.part-src.chosen select {
  border-color: var(--accent);
}

.part-src.left .who {
  color: var(--warn);
}

.part-row.off .part-src {
  opacity: 0.45;
}

/* ── narrow screens ───────────────────────────────────── */

@media (max-width: 900px) {
  .hero-songs,
  .hero-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 5;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
  }
  .hero-songs {
    left: 0;
  }
  .hero-panel {
    right: 0;
    width: min(372px, 100vw);
  }
  .hero-progress {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hud-mult.broke {
    animation: none;
  }
  .hud-mult .ring,
  .hud-timing i {
    transition: none;
  }
}

/* ── zoom ─────────────────────────────────────────────── */

.hero-zoom {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 24px;
  padding: 0 2px;
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.hero-zoom button {
  width: 22px;
  height: 20px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: var(--dim);
  font: 600 14px/1 var(--sans);
}

.hero-zoom button:hover {
  color: var(--text);
}

.hero-zoom output {
  min-width: 34px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ── stage overlays ───────────────────────────────────── */

:root {
  --hero-cool: #3a5cff;
  --hero-warm: #ff9a3c;
}

.hero-judge i {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  font: 800 15px/1 var(--sans);
  letter-spacing: 0.14em;
  font-style: normal;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

.hero-judge i.go {
  animation: hero-judge 620ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.hero-judge .perfect {
  color: #fff;
  text-shadow:
    0 0 10px #ffd86a,
    0 0 22px #ff9a3c;
}

.hero-judge .great {
  color: #9fe8ff;
  text-shadow: 0 0 12px #3d8eff;
}

.hero-judge .early {
  color: #7fb2ff;
}

.hero-judge .late {
  color: #ffb36a;
}

.hero-judge .bad {
  color: #ff5a5a;
  font-size: 20px;
  text-shadow: 0 0 12px #ff2020;
}

@keyframes hero-judge {
  0% {
    opacity: 0;
    transform: translate(-50%, -30%) scale(0.7);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -60%) scale(1.12);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -110%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -150%) scale(0.96);
  }
}

.hero-banner {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  font: 900 46px/1 var(--sans);
  letter-spacing: 0.16em;
  color: transparent;
  background: linear-gradient(
    90deg,
    var(--hero-red),
    var(--hero-yellow),
    var(--hero-blue),
    var(--hero-green)
  );
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 18px rgba(255, 210, 60, 0.45));
  opacity: 0;
  pointer-events: none;
}

.hero-banner.go {
  animation: hero-banner 1500ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes hero-banner {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, -54%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -64%) scale(1.02);
  }
}

.hero-section {
  position: absolute;
  left: 22px;
  top: 18px;
  font: 700 12px/1 var(--sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--hero-text);
  opacity: 0;
  pointer-events: none;
}

.hero-section.go {
  animation: hero-section 4s ease forwards;
}

@keyframes hero-section {
  0% {
    opacity: 0;
    transform: translateX(-12px);
  }
  10%,
  80% {
    opacity: 0.8;
    transform: none;
  }
  100% {
    opacity: 0.35;
  }
}

.hero-card {
  position: absolute;
  left: 0;
  top: 24%;
  display: grid;
  gap: 6px;
  padding: 14px 28px 14px 22px;
  background: linear-gradient(90deg, rgba(8, 8, 12, 0.85), rgba(8, 8, 12, 0));
  border-left: 4px solid var(--accent);
  opacity: 0;
  transform: translateX(-40px);
  pointer-events: none;
}

.hero-card b {
  font: 800 30px/1.05 var(--sans);
  color: var(--hero-text);
  letter-spacing: -0.01em;
}

.hero-card span {
  color: #a8a8b8;
  font: 500 13px/1 var(--sans);
  letter-spacing: 0.06em;
}

.hero-card.go {
  animation: hero-card 3.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes hero-card {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }
  12%,
  80% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateX(-20px);
  }
}

/* HUD life */

.hud-score span.pop output {
  display: inline-block;
  animation: hud-pop 260ms ease;
}

@keyframes hud-pop {
  40% {
    transform: scale(1.45);
    color: var(--accent);
  }
}

.hud-mult[data-x="4"] {
  filter: drop-shadow(0 0 10px var(--hero-kick));
}

.hud-mult[data-x="4"] b {
  color: #fff;
  text-shadow: 0 0 12px var(--hero-kick);
}

/* ── navigator ────────────────────────────────────────── */

.hero-nav {
  position: absolute;
  inset: 6% 8% 10%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 14px;
  background: rgba(10, 10, 16, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.hero-nav[hidden] {
  display: none;
}

.hero-nav-list {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
  min-height: 0;
}

.hero-nav .col {
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 2px;
  opacity: 0.55;
  transition: opacity 140ms;
}

.hero-nav .col.focus {
  opacity: 1;
}

.hero-nav .col button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 9px 12px;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 3px;
  text-align: left;
  color: #d8d8e2;
  font-family: var(--sans);
}

.hero-nav .col:first-child button {
  grid-template-columns: minmax(0, 1fr) auto;
}

.hero-nav .col button b {
  font-weight: 600;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-nav .col button span {
  color: #8a8a99;
  font-variant-numeric: tabular-nums;
}

.hero-nav .col button .best {
  color: var(--accent);
}

.hero-nav .col button.none b {
  color: #6a6a78;
}

.hero-nav .col button:hover {
  background: rgba(255, 255, 255, 0.04);
}

.hero-nav .col button.on {
  background: linear-gradient(
    90deg,
    rgba(255, 196, 92, 0.18),
    rgba(255, 196, 92, 0.02)
  );
  border-left-color: var(--accent);
  color: #fff;
}

.hero-nav .col.focus button.on b {
  font-size: 17px;
}

.hero-nav-keys {
  display: flex;
  justify-content: center;
  gap: 22px;
  color: #9a9aa8;
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-nav-keys span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-nav-keys .k {
  width: 14px;
  height: 8px;
  border-radius: 50%;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35);
}

.hero-nav-keys .k.r {
  background: var(--hero-red);
}

.hero-nav-keys .k.y {
  background: var(--hero-yellow);
}

.hero-nav-keys .k.b {
  background: var(--hero-blue);
}

.hero-nav-keys .k.g {
  background: var(--hero-green);
}

/* ── mix ──────────────────────────────────────────────── */

.hero-tab .row select {
  flex: 1;
}

.hero-tab .row output {
  min-width: 48px;
  text-align: right;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.hero-hits-row[hidden],
.hero-real-row[hidden],
.hero-real-stems[hidden] {
  display: none;
}

.mix-tracks {
  display: grid;
  gap: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.mix-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
}

.mix-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mix-row input {
  accent-color: var(--accent);
}

.mix-row output {
  text-align: right;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.mix-row.drum span {
  color: var(--dim);
}

.mix-row.drum span::after {
  content: " · muted";
  color: var(--faint);
}

@media (prefers-reduced-motion: reduce) {
  .hero-judge i.go,
  .hero-banner.go,
  .hero-card.go,
  .hero-section.go {
    animation-duration: 1ms;
  }
}

.hero-judge {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* results: grade, songs */

.hero-results {
  backdrop-filter: blur(8px);
  width: min(460px, 92%);
}

.res-head {
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 14px;
}

.res-head .res-grade {
  grid-row: span 2;
  font: 900 58px/1 var(--sans);
  font-style: normal;
  color: var(--accent);
  text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 50%, transparent);
}

.res-grade[data-grade="S"] {
  color: #ffe37a;
}

.res-grade[data-grade="C"],
.res-grade[data-grade="D"] {
  color: var(--dim);
  text-shadow: none;
}

.res-songs {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.res-songs:empty {
  display: none;
}

.res-songs li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 44px 36px;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

.res-songs span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--sans);
}

.res-songs i {
  font-style: normal;
  color: var(--dim);
  text-align: right;
}

.res-songs em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

#res-again::before,
#res-songs::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: 1px;
}

#res-again::before {
  background: var(--hero-green);
}

#res-songs::before {
  background: var(--hero-red);
}

.fx-sliders {
  display: grid;
  gap: 8px;
}

.fx-sliders input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
}

.fx-sliders.off {
  opacity: 0.4;
  pointer-events: none;
}

/* The visualiser background: its setting for songs without a programme, and what draws. */
.fx-vis {
  display: grid;
  gap: 4px;
}

.fx-vis-now {
  margin: 0;
  font-size: 0.8em;
  color: var(--hero-text);
  opacity: 0.7;
  min-height: 1.2em;
}

.fx-vis-now.bad {
  color: var(--hero-red);
  opacity: 1;
}

/* The stage alone, fullscreen: Hero's rail, the board and its panels fill the screen. */
.hero:fullscreen {
  width: 100vw;
  height: 100vh;
  border: 0;
}

.hero:fullscreen .hero-rail {
  background: color-mix(in srgb, var(--panel) 85%, transparent);
}

/* ── section strip: jump, repeat ──────────────────────── */

.hero-strip {
  --head: 0%;
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  width: min(720px, 70%);
  height: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  z-index: 2;
}

.hero-strip[hidden] {
  display: none;
}

.hero-strip .bar {
  position: relative;
  height: 18px;
}

.hero-strip .segs {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  cursor: pointer;
}

.hero-strip .segs button {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-left: 1px;
  padding: 0 5px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
  border: 0;
  border-radius: 2px;
  color: rgba(230, 230, 240, 0.7);
  font: 600 9px/18px var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hero-strip .segs button:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.hero-strip .loop {
  position: absolute;
  top: -3px;
  bottom: -3px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  pointer-events: none;
}

.hero-strip .loop[hidden] {
  display: none;
}

.hero-strip .head {
  position: absolute;
  left: var(--head);
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
  pointer-events: none;
}

.hero-strip #hero-repeat[aria-pressed="true"] {
  color: var(--accent);
}

.hero-strip output {
  min-width: 70px;
  color: rgba(220, 220, 232, 0.75);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

/* The multiplier steps up. */
.hud-mult.up {
  animation: hud-up 520ms cubic-bezier(0.2, 0.9, 0.3, 1.3);
}

@keyframes hud-up {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.32);
    filter: drop-shadow(0 0 18px var(--accent));
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hud-mult.up {
    animation: none;
  }
}

.hero-real-v {
  display: block;
  font-size: 12px;
  color: var(--dim);
  margin: -2px 0 6px;
  min-height: 1em;
}

.hero-real-stems {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 6px;
  font-size: 12.5px;
}

.hero-real-stems label {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* ── touch drums: lanes to tap on a phone (cymbal above, tom below) ───── */

#hero-touch-toggle[aria-pressed="true"] {
  color: var(--accent);
}

.hero-touch {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  pointer-events: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Touch drums: quick taps on the stage are a roll, not a double-tap zoom. */
body.touch-drums .hero-play {
  touch-action: manipulation;
}

.hero-touch[hidden] {
  display: none;
}

.hero-touch .tl {
  position: absolute;
  top: 0;
  bottom: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  padding: 0 2px 4px;
}

.hero-touch .tl[data-lane="red"] {
  grid-template-rows: 1fr;
}

.hero-touch .tl[data-lane="red"] {
  --lane: var(--hero-red);
}
.hero-touch .tl[data-lane="yellow"] {
  --lane: var(--hero-yellow);
}
.hero-touch .tl[data-lane="blue"] {
  --lane: var(--hero-blue);
}
.hero-touch .tl[data-lane="green"] {
  --lane: var(--hero-green);
}

.hero-touch .tz {
  pointer-events: auto;
  position: relative;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--lane) 55%, transparent);
  background: color-mix(in srgb, var(--lane) 10%, transparent);
  transition: background 0.06s;
}

/* A cymbal zone carries a domed cymbal mark; a tom zone a drum shell. */
.hero-touch .tz::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  max-width: 46px;
  aspect-ratio: 3 / 1;
  transform: translate(-50%, -50%);
  border: 2px solid color-mix(in srgb, var(--lane) 70%, transparent);
  opacity: 0.8;
}

.hero-touch .tz.cym::after {
  border-radius: 50% / 70% 70% 30% 30%;
  border-bottom-width: 1px;
}

.hero-touch .tz.tom::after {
  aspect-ratio: 2 / 1;
  border-radius: 40% / 30%;
}

.hero-touch .tz.down {
  background: color-mix(in srgb, var(--lane) 48%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--lane) 60%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .hero-touch .tz {
    transition: none;
  }
}

/* Touch drums on a phone: the stage gets the console's room; the deck keeps its transport. */
@media (max-width: 900px), (pointer: coarse) {
  body.touch-drums[data-mode="hero"] {
    grid-template-rows: auto minmax(0, 1fr) 0;
  }
  body.touch-drums[data-mode="hero"] > .console {
    display: none;
  }
}

@media (max-width: 900px) {
  body.touch-drums[data-mode="hero"] .deck .source,
  body.touch-drums[data-mode="hero"] .deck .tempo,
  body.touch-drums[data-mode="hero"] .deck .clock,
  body.touch-drums[data-mode="hero"] .deck .meter {
    display: none;
  }
  body.touch-drums[data-mode="hero"] #hero-midi-text {
    display: none;
  }
}