@import url('./appearance.css');
@import url('./subsong-browser.css');
@import url('./typography.css');
/* Layout/legacy component rules stay lower priority than shared appearance. */
@layer components {
:root, [data-appearance-scope] {
  color-scheme: dark;
  --bg: var(--page);
  --panel: var(--surface);
  --panel-2: var(--surface-secondary);
  --line: var(--border);
  --ink: var(--text);
  --muted: var(--text-muted);
  --yellow: var(--accent);
  --green: var(--control-accent);
  --red: var(--judgment-miss);
  --blue: var(--chart-secondary);
  --shadow: 0 22px 60px rgb(0 0 0 / 34%);
}

.analysis-panel { padding: 16px; border: 1px solid var(--line); background: var(--panel); }
.analysis-panel p, .analysis-panel output { display: block; margin: 10px 0; }
.analysis-panel label { display: block; margin: 10px 0 4px; }
.analysis-panel input[type="range"] { width: 100%; }
.analysis-panel canvas { width: 100%; height: 90px; display: block; cursor: crosshair; }
.analysis-panel canvas[hidden] { display: none; }
.analysis-panel pre { margin-top: 12px; }

.jump-note span { outline: 3px solid var(--yellow); }
.jump-label { color: var(--yellow); position: absolute; top: -18px; left: 30%; font-size: 11px; }
.wayfarer-tap.face-target span, .wayfarer-hold.face-target span { background: var(--prompt-generic); font-size: 12px; border-radius: 12px; text-align: center; }
.wayfarer-tap.direction-target span, .wayfarer-hold.direction-target span { background: var(--prompt-down); }
.wayfarer-hold.face-target, .wayfarer-hold.direction-target { transform: translate(0, -50%); }
.game-panel { align-self: start; }
.game-panel .steppin-stage, .game-panel .wayfarer-stage { height: clamp(480px, 70vh, 640px); }
.wayfarer-stage .wayfarer-note-layer { z-index: 4; }
.wayfarer-receptor strong { align-self: start; margin-top: 6px; font-size: 11px; }
.wayfarer-hold span small { display: block; font-size: 10px; }
[data-input-help] { margin: 12px 0; color: var(--yellow); }

* {
  box-sizing: border-box;
}

html,
body,
#app {
  min-height: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--control-accent) 10%, transparent), transparent 32%),
    linear-gradient(20deg, color-mix(in srgb, var(--chart-secondary) 10%, transparent), transparent 42%),
    var(--bg);
  color: var(--ink);
}

button,
input,
select {
  font: inherit;
}

button,
select,
.bind-button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--ink);
}

button {
  min-height: 42px;
  padding: 0 14px;
  cursor: pointer;
  font-weight: 800;
}

button:hover:not(:disabled) {
  border-color: var(--yellow);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

select {
  min-height: 42px;
  padding: 0 10px;
}

.app-shell {
  width: min(1320px, calc(100% - 28px));
  min-height: 100dvh;
  margin: 0 auto;
  padding: 22px 0;
  display: grid;
  grid-template-rows: none;
  align-content: start;
  gap: 16px;
}

.app-header,
.chart-panel,
.game-panel {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: var(--shadow);
}

.app-header {
  min-height: 78px;
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--green);
  font-weight: 900;
  font-size: 0.76rem;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: clamp(1.55rem, 4vw, 2.7rem);
  line-height: 0.96;
  letter-spacing: 0;
}

h2 {
  font-size: 1rem;
}

.status-chip {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 13px;
  color: var(--yellow);
  white-space: nowrap;
}

.game-panel,
.chart-panel {
  border-radius: 8px;
}

.dropzone {
  min-height: 168px;
  border: 1px dashed color-mix(in srgb, var(--green), var(--line) 35%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--control-accent) 8%, transparent);
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px;
  cursor: pointer;
}

.dropzone.dragging {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: var(--yellow);
}

.dropzone input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.drop-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--yellow);
  color: var(--accent-text);
  font-size: 1.6rem;
  font-weight: 900;
}

.dropzone strong {
  font-size: 1.05rem;
}

.dropzone small,
.readout small,
.chart-panel p,
.field label,
.stats-grid span,
.hud-strip span,
.key-map span {
  color: var(--muted);
}

.field {
  display: grid;
  gap: 6px;
}

.hidden {
  display: none !important;
}

.button-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.primary {
  background: var(--yellow);
  color: var(--accent-text);
  border-color: transparent;
}

.stats-grid,
.hud-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.stats-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stats-grid div,
.hud-strip div,
.readout,
.key-map div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  padding: 10px;
}

.stats-grid strong,
.hud-strip strong {
  display: block;
  margin-top: 2px;
  font-size: 1.35rem;
  line-height: 1;
  overflow-wrap: anywhere;
}

.readout {
  display: grid;
  gap: 6px;
}

.readout span {
  font-weight: 900;
  overflow-wrap: anywhere;
}

.key-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
}

.bind-button {
  min-height: 70px;
  padding: 9px;
  display: grid;
  gap: 5px;
  text-align: left;
}

.bind-button.binding {
  border-color: var(--yellow);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.bind-button span {
  font-size: 0.82rem;
}

.key-map div {
  display: grid;
  gap: 5px;
}

kbd {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-secondary);
  padding: 5px 6px;
  font-size: 0.78rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.game-panel {
  min-height: 0;
  padding: 14px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}

.game-root {
  min-height: 0;
}

.empty-stage,
.steppin-stage,
.wayfarer-stage {
  height: 100%;
  min-height: 480px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--gameplay-target) 6%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--gameplay-target) 5%, transparent) 1px, transparent 1px),
    var(--gameplay-background);
  background-size: 25% 44px;
  overflow: hidden;
  position: relative;
}

.steppin-stage {
  --lane-count: 4;
  background-size: calc(100% / var(--lane-count)) 44px;
}

.wayfarer-stage {
  --lane-count: 4;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent calc((100% / var(--lane-count)) - 1px), color-mix(in srgb, var(--gameplay-target) 12%, transparent) calc((100% / var(--lane-count)) - 1px), color-mix(in srgb, var(--gameplay-target) 12%, transparent) calc(100% / var(--lane-count))),
    linear-gradient(90deg, transparent 0 15.7%, color-mix(in srgb, var(--accent) 42%, transparent) 15.7% 16.3%, transparent 16.3%),
    var(--gameplay-background);
}

.empty-stage {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 18px;
  text-align: center;
}

.empty-stage span {
  max-width: 560px;
  color: var(--muted);
  line-height: 1.45;
}

.steppin-stage:focus,
.wayfarer-stage:focus {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.steppin-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent calc((100% / var(--lane-count)) - 1px), color-mix(in srgb, var(--gameplay-target) 10%, transparent) calc((100% / var(--lane-count)) - 1px), color-mix(in srgb, var(--gameplay-target) 10%, transparent) calc(100% / var(--lane-count))),
    linear-gradient(90deg, transparent calc(50% - 2px), color-mix(in srgb, var(--accent) 34%, transparent) calc(50% - 2px), color-mix(in srgb, var(--accent) 34%, transparent) calc(50% + 2px), transparent calc(50% + 2px));
  pointer-events: none;
}

.receptor-row {
  position: absolute;
  z-index: 3;
  top: 14%;
  left: 0;
  right: 0;
  height: 62px;
  display: grid;
  grid-template-columns: repeat(var(--lane-count), minmax(0, 1fr));
  transform: translateY(-50%);
  border-top: 2px solid color-mix(in srgb, var(--accent) 52%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 52%, transparent);
  background: rgb(0 0 0 / 30%);
}

.receptor {
  display: grid;
  gap: 1px;
  place-items: center;
  align-content: center;
  font-size: clamp(0.9rem, 2.1vw, 1.55rem);
  font-weight: 900;
  color: color-mix(in srgb, var(--text) 74%, transparent);
  text-shadow: 0 2px 14px rgb(0 0 0 / 70%);
}

.receptor small {
  color: var(--muted);
  font-size: 0.57rem;
  line-height: 1;
  text-transform: uppercase;
}

.receptor strong {
  line-height: 1;
  overflow-wrap: anywhere;
}

.receptor.pressed {
  color: var(--prompt-ink);
  background: var(--yellow);
}

.note-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.tap-note,
.hold-note {
  position: absolute;
  display: grid;
  place-items: start center;
}

.tap-note span,
.hold-note span {
  width: min(52px, 82%);
  aspect-ratio: 1;
  border: 2px solid color-mix(in srgb, var(--gameplay-target) 80%, transparent);
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--blue);
  box-shadow: 0 10px 26px rgb(0 0 0 / 42%);
  color: var(--prompt-ink);
  font-size: clamp(0.85rem, 2.1vw, 1.55rem);
  font-weight: 900;
}

.hold-note {
  align-items: stretch;
  justify-items: center;
}

.hold-note::before {
  content: "";
  width: min(34px, 45%);
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--control-accent) 88%, transparent), color-mix(in srgb, var(--chart-secondary) 72%, transparent));
  border: 1px solid color-mix(in srgb, var(--gameplay-target) 38%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--control-accent) 22%, transparent);
}

.hold-note span {
  position: absolute;
  top: 0;
  background: var(--green);
}

.hold-note.holding::before,
.hold-note.holding span {
  filter: brightness(1.35);
}

.chart-panel {
  min-height: 148px;
  padding: 14px;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 14px;
}

pre {
  margin: 0;
  min-width: 0;
  max-height: 190px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-secondary);
  padding: 12px;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .app-shell {
    grid-template-rows: auto auto auto;
  }

  .app-header,
  .chart-panel {
    grid-template-columns: 1fr;
  }

  .app-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .empty-stage,
  .steppin-stage,
  .wayfarer-stage {
    min-height: 560px;
  }
}

@media (max-width: 560px) {
  .app-shell {
    width: min(100% - 16px, 1320px);
    padding: 8px 0;
  }

  .button-row,
  .hud-strip {
    grid-template-columns: 1fr 1fr;
  }

  .status-chip {
    width: 100%;
    white-space: normal;
  }
}

/* TrackMaster v2.1: make holds visually distinct from taps. */
.hold-note .hold-head {
  background: var(--green);
  border-color: color-mix(in srgb, var(--gameplay-target) 92%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--control-accent) 38%, transparent), 0 10px 26px rgb(0 0 0 / 42%);
}

.hold-note .hold-tail {
  position: absolute;
  bottom: 8px;
  width: auto;
  min-width: 44px;
  height: 22px;
  aspect-ratio: auto;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gameplay-target) 55%, transparent);
  background: color-mix(in srgb, var(--surface-secondary) 86%, transparent);
  color: color-mix(in srgb, var(--text) 90%, transparent);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  box-shadow: 0 6px 18px rgb(0 0 0 / 30%);
}

.wayfarer-hit-zone {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 11%;
  width: 10%;
  min-width: 80px;
  display: grid;
  grid-template-rows: repeat(var(--lane-count), minmax(0, 1fr));
  border-left: 2px solid color-mix(in srgb, var(--accent) 74%, transparent);
  border-right: 2px solid color-mix(in srgb, var(--accent) 74%, transparent);
  background: rgb(0 0 0 / 24%);
}

.wayfarer-receptor {
  display: grid;
  place-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--gameplay-target) 12%, transparent);
  color: color-mix(in srgb, var(--text) 78%, transparent);
  font-weight: 900;
  font-size: clamp(1rem, 2.4vw, 1.55rem);
  text-shadow: 0 2px 14px rgb(0 0 0 / 70%);
}

.wayfarer-receptor.pressed {
  color: var(--prompt-ink);
  background: var(--yellow);
}

.wayfarer-note-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.wayfarer-tap,
.wayfarer-hold {
  position: absolute;
  transform: translate(-50%, -50%);
}

.wayfarer-tap span,
.wayfarer-hold span {
  width: clamp(42px, 7vw, 68px);
  aspect-ratio: 1;
  border: 2px solid color-mix(in srgb, var(--gameplay-target) 82%, transparent);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--green);
  color: var(--prompt-ink);
  font-weight: 900;
  font-size: clamp(1rem, 2.6vw, 1.65rem);
  box-shadow: 0 10px 26px rgb(0 0 0 / 42%);
}

.wayfarer-hold {
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--control-accent) 88%, transparent), color-mix(in srgb, var(--chart-secondary) 72%, transparent));
  border: 1px solid color-mix(in srgb, var(--gameplay-target) 38%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--control-accent) 22%, transparent);
}

.wayfarer-hold span {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
}

.wayfarer-hold.holding,
.wayfarer-hold.holding span {
  filter: brightness(1.35);
}

[data-chart-workbench] {display:block;}
[data-chart-workbench] canvas {width:100%;margin-top:12px;cursor:crosshair;}
[data-chart-workbench] label {display:inline-block;margin:8px;}
[data-chart-workbench] pre {max-height:320px;overflow:auto;}

/* Workbench usability: controls, timeline, then readable selection details. */
.wb-controls {padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;margin:12px 0;}
.wb-row {display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.wb-layout {display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);gap:18px;align-items:start;}
.wb-editor,.wb-inspector {min-width:0;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;}
.wb-note {color:var(--text-muted);font-size:.88rem;line-height:1.5;}
.wb-inspector dl {display:grid;grid-template-columns:95px 1fr;gap:7px;margin:12px 0;font-size:.9rem;}
.wb-inspector dt {color:var(--text-muted);}.wb-inspector dd {margin:0;overflow-wrap:anywhere;}
.wb-decision {padding:10px;background:var(--surface-secondary);border-radius:5px;}
.wb-edit-block {padding:12px 0;border-top:1px solid var(--border);margin-top:12px;}
.wb-edit-block p {font-size:.9rem;color:var(--text-muted);}
.wb-inspector h4 {margin:10px 0 6px;}.wb-inspector p {line-height:1.5;overflow-wrap:anywhere;}
.wb-inspector details {margin-top:14px;}.wb-inspector pre {font-size:.75rem;}
.wb-legend {display:flex;gap:12px;flex-wrap:wrap;font-size:.8rem;margin-bottom:10px;color:var(--text-muted);}
.wb-legend .kept {color:var(--control-accent);}.wb-legend .removed {color:var(--judgment-miss);}.wb-legend .selected {color:var(--accent);}.wb-legend .dropped {color:var(--judgment-miss);}
[data-chart-workbench] input[type=number] {width:110px;padding:7px;color:inherit;background:var(--prompt-ink);border:1px solid var(--border);border-radius:4px;}
[data-chart-workbench] select {max-width:100%;}[data-chart-workbench] label {margin:6px 0;}
[data-chart-workbench] [hidden] {display:none !important;}
[data-error] {color:var(--judgment-miss);} .rhythm-status {color:var(--text-muted);line-height:1.5;margin:8px 0;}
details.chart-panel {display:block;}details.analysis-panel>summary,details.chart-panel>summary {cursor:pointer;font-weight:600;}
@media(max-width:1000px){.wb-layout {grid-template-columns:1fr;}}

/* Playfield width is mode-specific within the full-width player. */
.game-panel .steppin-stage {
  width: min(100%, 272px);
  margin-inline: auto;
}
.game-panel .wayfarer-stage {
  height: 320px;
  min-height: 320px;
}
.wayfarer-tap span, .wayfarer-hold span { width: 60px; }
.wayfarer-hit-zone {
  left: calc(max(70px, 16%) - 40px);
  width: 80px;
}
.lane-order-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lane-order-fields label { display: grid; gap: 4px; font-size: .85rem; }
[data-lane-order][hidden] { display: none; }
.wayfarer-tap.paired-target span, .wayfarer-hold.paired-target span {
  outline: 3px solid var(--yellow);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 65%, transparent);
}
.pair-label { position: absolute; left: 0; right: 0; top: -18px; text-align: center; color: var(--yellow); font-size: 10px; font-weight: 900; }

.steppin-stage .trigger-icon { width: min(52px, 82%); height: auto; }
.wayfarer-stage .trigger-icon { width: 60px; height: 60px; }
.steppin-stage .tap-note .trigger-icon { transform: translateY(-50%); }
.steppin-stage .hold-note .trigger-icon { top: 0; transform: translateY(-50%); }
.steppin-stage .hold-note .hold-end { top: 100%; }
.steppin-stage .hold-note::before { background: var(--prompt-color); opacity: .7; }
.wayfarer-stage .wayfarer-hold { background: var(--prompt-color); }
.wayfarer-stage .wayfarer-hold .hold-end { left: 100%; }
.receptor { color: var(--prompt-color); }
.receptor.pressed { color: var(--prompt-ink); background: var(--prompt-color); }
.prompt-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-block: 10px; }
.prompt-colors label { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.prompt-colors input[type=color] { width: 38px; height: 32px; padding: 2px; }
.prompt-colors label[hidden] { display: none; }
.header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.info-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto; padding: 28px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.info-dialog::backdrop { background: rgb(0 0 0 / 75%); }
.info-dialog p { line-height: 1.55; color: var(--muted); }
.info-dialog h1 { margin-top: 0; }
.info-dialog .button-row { margin-top: 20px; }
.help-header { position: sticky; top: -28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--panel); padding-block: 12px; z-index: 1; }
.help-header h2 { margin: 0; }
.help-drawer section { border-top: 1px solid var(--line); margin-top: 18px; }
.settings-section { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); min-width: 0; }


.settings-section h3 { margin: 0; font-size: 1rem; }
details.settings-section { display: block; }
.settings-section summary, .advanced-panel>summary { cursor: pointer; font-weight: 700; }
details.settings-section[open]>summary { margin-bottom: 14px; }
details.settings-section[open]>.field, details.settings-section[open]>small, details.settings-section[open]>p { margin-block: 12px; }
.toggle-row, .analysis-panel label.toggle-row { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; margin-block: 12px; }
.toggle-row input[type=checkbox] { flex: 0 0 auto; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--yellow); }
/* Theme Editor override: remove checkbox offset margin */
[data-theme-editor] .toggle-row input[type=checkbox] { margin: 0; flex-shrink: 0; }
/* Fix checkbox offset: override appearance.css grid layout and constrain label width */
[data-theme-editor] .toggle-row, [data-theme-editor] .prompt-appearance.toggle-row { display: flex !important; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; }
[data-theme-editor] .toggle-row label, [data-theme-editor] .prompt-appearance.toggle-row label { max-width: 100%; display: flex !important; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-section small { display: block; color: var(--muted); line-height: 1.45; }
.settings-section input[type=number] { max-width: 100%; width: 120px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--ink); }
.duration-fields { display:flex; flex-wrap:wrap; align-items:end; gap:8px; }
.duration-fields label { display:flex; align-items:center; gap:5px; }
.duration-fields input[type=number] { width:72px; }
.advanced-panel { margin-top: 16px; }
.advanced-panel>summary { padding-block: 4px; }
details.chart-panel:not([open]) { min-height: 0; }
.game-panel, .wb-editor, .wb-inspector { min-width: 0; }
.wb-row label { max-width: 100%; }
.wb-row select { min-width: 0; max-width: 100%; }
@media(max-width:560px) { .wb-controls .button-row, .wb-editor .button-row { grid-template-columns: repeat(2,minmax(0,1fr)); } .wb-row { align-items: stretch; } }

/* Passive song progress belongs to the HUD's bottom edge. */
.hud-strip { position: relative; padding-bottom: 8px; }
.hud-strip .song-progress { position:absolute; inset:auto 0 0; height:4px; padding:0; border:0; border-radius:0; background:color-mix(in srgb, var(--gameplay-target) 12%, transparent); pointer-events:none; }
.song-progress i { display:block; height:100%; background:var(--yellow); transform:scaleX(0); transform-origin:left; }
.track-feedback { position:absolute; z-index:4; transform:translate(-50%,-50%); font-size:10px; font-weight:900; color:var(--yellow); pointer-events:none; animation-duration:700ms; animation-fill-mode:forwards; }
.track-feedback[hidden] { display:none; }
@keyframes feedback-a { 0%,55% { opacity:1; } 100% { opacity:0; } }
@keyframes feedback-b { 0%,55% { opacity:1; } 100% { opacity:0; } }

/* Setup and results follow the player; secondary surfaces overlay this flow. */
.song-setup { padding: 12px 0; }
.song-row { display:flex; align-items:center; gap:20px; }
.song-row .dropzone { min-height:112px; min-width:240px; padding:14px; }
.song-row .readout { flex:1; min-width:0; padding:0; border:0; background:none; overflow-wrap:anywhere; }
.song-row .readout span { font-weight:800; }
.song-loaded .dropzone { min-height:64px; grid-template-columns:auto 1fr; gap:4px 10px; }
.song-loaded .dropzone .drop-icon { grid-row:1 / 3; width:32px; height:32px; }
.song-loaded .dropzone small { grid-column:2; max-width:240px; }
.gameplay-setup { display:flex; align-items:end; flex-wrap:wrap; gap:12px 20px; margin-top:16px; }
.gameplay-setup h3 { margin:0; align-self:center; }
.gameplay-setup .field { min-width:160px; margin:0; }
.gameplay-setup > small { flex-basis:100%; color:var(--muted); }
.game-panel { padding:0; border:0; box-shadow:none; background:none; grid-template-rows:auto auto auto; }
.player-transport { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; padding:4px 0; }
.player-transport h3 { margin:0; }
.player-transport small, .player-results > small { color:var(--muted); }
.player-results { padding:12px 0; border-top:1px solid var(--line); }
.player-results h3 { margin:0 0 10px; }
.player-results .stats-grid { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:10px; }
.drawer-backdrop { position:fixed; inset:0; background:rgb(0 0 0 / 55%); z-index:100; }
.secondary-drawer { position:fixed; inset:0 0 0 auto; width:min(480px,100%); height:100dvh; overflow:auto; padding:20px; background:var(--panel); color:var(--ink); border-left:1px solid var(--line); box-shadow:var(--shadow); z-index:101; overscroll-behavior:contain; }
.secondary-drawer[hidden], .drawer-backdrop[hidden] { display:none; }
.drawer-header, .help-header { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.drawer-header h2, .help-header h2 { flex:1; }
.secondary-drawer p { line-height:1.55; color:var(--muted); }
.secondary-drawer .settings-section { padding-block:16px; }
.secondary-drawer input[type="number"] { max-width:100%; }
/* Preview drawers leave part of the real application visible on small screens. */
@media (max-width:700px) {
 .secondary-drawer[aria-modal="false"] { inset:auto 0 0; width:100%; height:60dvh; border-left:0; border-top:1px solid var(--line); }
}
@media(max-width:600px) {
 .song-row { flex-direction:column; align-items:stretch; gap:12px; }
 .song-loaded .dropzone { min-width:0; }
 .gameplay-setup .field { flex:1; min-width:120px; }
 .gameplay-setup h3 { flex-basis:100%; }
 .player-transport small { flex-basis:100%; }
 .player-results .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .secondary-drawer { padding:16px; }
}
/* Compact, centered positional field; decorative game space stays full width. */
.slide-stage {position:relative;width:min(100%,340px);height:420px;margin:auto;overflow:hidden;outline:none;background:var(--gameplay-background);--slide-lanes:3;}
.slide-lanes {position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--slide-lanes),1fr);}
.slide-lanes span {border-inline:1px solid var(--border);text-align:center;padding-top:10px;color:var(--text-muted);}
.slide-bar {position:absolute;left:0;right:0;bottom:64px;height:3px;background:var(--gameplay-target);}
.slide-slider {position:absolute;bottom:53px;width:calc(100% / var(--slide-lanes));height:24px;background:var(--control-accent);border:3px solid var(--gameplay-target);border-radius:5px;box-sizing:border-box;}
.slide-prompt {position:absolute;color:var(--prompt-generic);font-size:30px;line-height:30px;transform:translate(-50%,-50%);}
[data-slide-options][hidden], [data-holds-options][hidden] {display:none !important;}
}


/* Music Source drawer positioning. */
.music-drawer { inset:0 auto 0 0; border-left:0; border-right:1px solid var(--line); }
.music-drawer[hidden], .drawer-backdrop[hidden] { display:none; }
.music-entry-list { list-style:none; padding:0; margin:0; }
.music-entry { padding:8px 12px; border-bottom:1px solid var(--border); cursor:pointer; }
.music-entry:hover { background:var(--surface-hover); }
.music-entry.selected { background:var(--accent); }
.music-entry.unavailable { opacity:0.7; }
.music-entry-title { font-weight:bold; }
.music-entry-meta { color:var(--text-muted); font-size:14px; }
@media(max-width:700px) { .music-drawer[aria-modal="false"] { inset:auto 0 0; width:100%; height:60dvh; border-right:0; border-top:1px solid var(--line); } }

.music-unavailable { color:var(--text-muted); font-style:italic; }

.music-entry-row { padding:8px 12px; border-bottom:1px solid var(--border); cursor:pointer; }
.music-entry-row { display:block; width:100%; text-align:left; }
.music-entry-row.selected { border-color:var(--accent); box-shadow:inset 4px 0 var(--accent); }
[data-import-summary] { overflow-wrap:anywhere; }
.music-drawer label { display:block; margin:12px 0; }
.music-drawer input[type="search"] { display:block; width:100%; margin-top:6px; }