:root {
  color-scheme: dark;
  --ground: #09090a;
  --card: #131316;
  --raised: #1b1b1f;
  --raised-hi: #242429;
  --line: #232328;
  --line-hi: #3d3d44;
  --text: #f4f4f5;
  --muted: #8d8d94;
  --faint: #5c5c63;
  --accent: #b18cff; /* set from the palette */
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --left-w: 272px;
  --right-w: 312px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--ground); color: var(--text); font: 14px/1.45 var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .4; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
p { margin: 0; }
svg { flex: none; }

/* ---------- Layout ---------- */
.app {
  display: grid; height: 100%; height: 100dvh; gap: 10px; padding: 10px 10px 0;
  grid-template-columns: var(--left-w) minmax(0, 1fr) var(--right-w);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "left stage right" "player player player";
}
/* Collapsing panels is a wide-screen feature; narrower screens use drawers instead (below). */
@media (min-width: 1101px) {
  .app.hide-left { grid-template-columns: minmax(0, 1fr) var(--right-w); grid-template-areas: "stage right" "player player"; }
  .app.hide-right { grid-template-columns: var(--left-w) minmax(0, 1fr); grid-template-areas: "left stage" "player player"; }
  .app.hide-left.hide-right { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "player"; }
  .app.hide-left .side.left, .app.hide-right .side.right { display: none; }
  .app.hide-left [data-reveal="left"], .app.hide-right [data-reveal="right"] { display: grid; }
}

.side { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding-bottom: 10px; }
.left { grid-area: left; }
.right { grid-area: right; }
.side-head { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding: 0 4px 0 6px; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; letter-spacing: .14em; }
.logo svg { width: 16px; height: 16px; color: var(--accent); }
.logo-accent { color: var(--accent); }

.icon-btn { display: grid; place-items: center; width: 32px; height: 32px; flex: none; padding: 0; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--muted); }
.icon-btn:hover:not(:disabled) { color: var(--text); background: var(--raised); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn.glass { background: rgba(18,18,22,.55); border-color: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--text); }
.icon-btn.glass:hover { background: rgba(30,30,36,.8); }

/* ---------- Cards ---------- */
.card { flex: none; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.card-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.card-title.caps { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.card-head .card-title { margin-bottom: 0; }
.card-head.spaced { align-items: center; margin-bottom: 12px; }
.card-head.spaced:has(+ [hidden]) { margin-bottom: 0; }
.switch { position: relative; width: 36px; height: 20px; flex: none; padding: 0; border-radius: 999px; border: 0; background: var(--line-hi); transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--text); transition: transform .15s; }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(16px); background: var(--ground); }
.card-meta { font-size: 12px; color: var(--muted); }
.card-desc { margin: -4px 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.yt-mark { width: 16px; height: 16px; color: #ff4d4d; }

/* Visualizer tiles */
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; height: 70px; padding: 0 4px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 11.5px; }
.tile svg { width: 19px; height: 19px; }
.tile:hover { color: var(--text); border-color: var(--line-hi); }
.tile[aria-checked="true"] { color: var(--text); background: var(--raised); border-color: rgba(255,255,255,.55); }

/* Sync to the music: shares the tab's audio so the visuals follow the beat. An accent-tinted
   banner while off (the visuals can't hear YouTube yet); a calm one once it's on. */
.viz-sync { margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 14%, var(--card)); transition: background .2s, border-color .2s; }
.viz-sync-head { display: flex; align-items: center; gap: 9px; }
.viz-sync-icon { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--accent); color: var(--ground); }
.viz-sync-icon svg { width: 13px; height: 13px; }
.viz-sync-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; }
.viz-sync-note { margin-top: 6px; font-size: 12px; line-height: 1.45; color: color-mix(in srgb, var(--text) 72%, transparent); }
.viz-sync:has(.switch[aria-checked="true"]) { border-color: var(--line); background: var(--raised); }
.viz-sync:has(.switch[aria-checked="true"]) .viz-sync-note { color: var(--muted); }
.viz-sync:has(.switch:disabled) { border-color: var(--line); background: var(--raised); }
.viz-sync:has(.switch:disabled) .viz-sync-icon { background: var(--raised-hi); color: var(--muted); }

/* Palettes */
/* One row of colour dots; the selected one gets a ring. */
.palette-grid { display: flex; justify-content: space-between; gap: 4px; }
.swatch { display: grid; place-items: center; width: 28px; height: 28px; flex: none; padding: 0; border-radius: 50%; border: 0; background: transparent; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .15s; }
.swatch:hover { box-shadow: inset 0 0 0 1.5px var(--line-hi); }
.swatch[aria-checked="true"] { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.75); }
.swatch-dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }

/* Lyrics card */
.field-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; margin-bottom: 6px; }
.field-label { font-size: 12.5px; color: var(--muted); }
.seg { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 9px; background: var(--raised); }
.seg button { width: 34px; height: 26px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; }
.seg button:hover { color: var(--text); }
.seg button[aria-checked="true"] { background: var(--ground); color: var(--text); border-color: var(--line); }
.switch-row { margin: 10px 0 0; }

/* Lyric timing: a slider centred on 0, filled from the middle out */
.timing { margin: 4px 0 10px; }
/* Sized to match the Size control above: 32px tall, 9px corners. */
.timing-head { display: flex; align-items: center; justify-content: space-between; min-height: 36px; }
.timing-val { width: 66px; height: 32px; border: 0; border-radius: 9px; padding: 0 8px; background: var(--raised); color: var(--text); font: 12.5px var(--mono); font-variant-numeric: tabular-nums; text-align: center; outline: none; cursor: text; }
.timing-val:hover { box-shadow: inset 0 0 0 1px var(--line-hi); }
.timing-val.wide { width: 80px; }
.timing-val:focus { background: var(--ground); box-shadow: inset 0 0 0 1.5px var(--accent); }
.timing-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.timing-row button { flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: var(--raised); color: var(--muted); font: 15px var(--mono); }
.timing-row button:hover { color: var(--text); background: var(--ground); }
/* --z is where 0 sits on the slider (the middle for Timing, a third along for Audio delay);
   the fill runs from there to the thumb, between --a and --b. */
.timing-row input[type="range"] { --a: 50%; --b: 50%; --z: 50%; }
.timing-row input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(var(--muted), var(--muted)) var(--z) 50% / 2px 100% no-repeat,
    linear-gradient(90deg, var(--line-hi) var(--a), var(--accent) var(--a), var(--accent) var(--b), var(--line-hi) var(--b));
}
.timing-row input[type="range"]::-moz-range-track {
  background: linear-gradient(90deg, var(--line-hi) var(--a), var(--accent) var(--a), var(--accent) var(--b), var(--line-hi) var(--b));
}
/* Same columns as .timing-row (button, slider, button), so Earlier and Later sit centred under
   − and +. They're wider than the buttons and spill evenly into the gaps around them. */
.timing-scale { display: grid; grid-template-columns: 28px 1fr 28px; gap: 8px; margin-top: 7px; font-size: 11px; color: var(--faint); }
.timing-scale > span { justify-self: center; white-space: nowrap; }
.timing-scale #syncMark { color: var(--accent); }
.timing-actions { display: flex; align-items: center; gap: 6px; }
.tap-btn { height: 32px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line-hi); background: transparent; color: var(--text); font-size: 12.5px; font-weight: 500; }
.tap-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.tap-panel { margin-top: 8px; padding: 12px; border-radius: 11px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--raised)); }
.tap-label { font-size: 12px; color: var(--muted); }
.tap-label b { color: var(--text); font-weight: 600; }
.tap-line { margin: 4px 0 10px; font-size: 14px; font-weight: 600; line-height: 1.35; }
.tap-panel .card-note { margin-top: 8px; }
/* While tap-syncing, the stage holds on the line to tap on. */
.line.target { opacity: 1; transform: scale(1); color: var(--text); text-decoration: underline 3px var(--accent); text-underline-offset: .22em; }
.card-note { margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.5; }
/* Where the lyrics came from, and the other versions, boxed together. */
.lyrics-source { margin: 2px 0 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--raised); }
.lyrics-status { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.lyrics-status b { color: var(--text); font-weight: 500; }

/* Lyrics versions: the other LRCLIB entries for this song, best match first */
.versions { margin-top: 6px; }
.versions-toggle { display: flex; align-items: center; gap: 4px; padding: 2px 0; border: 0; background: none; color: var(--accent); font-size: 12.5px; font-weight: 500; }
.versions-toggle svg { width: 13px; height: 13px; transition: transform .15s; }
.versions-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.versions .card-note { margin: 4px 0 8px; }
.version-list { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.version { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; width: 100%; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--muted); text-align: left; font-size: 12px; line-height: 1.35; }
.version:hover { border-color: var(--line-hi); color: var(--text); }
.version[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--text); }
.version-name { display: flex; align-items: center; min-width: 0; color: var(--text); font-weight: 500; }
.version-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.version-album { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; }
.version-shift { justify-self: end; font: 11.5px var(--mono); font-variant-numeric: tabular-nums; }
.version-meta { justify-self: end; font: 11px var(--mono); color: var(--faint); }
.version-meta .match { color: var(--accent); }
.version-badge { flex: none; margin-left: 5px; padding: 0 5px; border-radius: 4px; background: var(--raised-hi); color: var(--muted); font-size: 10px; font-weight: 500; vertical-align: 1px; }
.version-badge.word { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.word-flag { padding: 0 6px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: 11.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.word-flag:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* Buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--line); background: var(--raised); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.btn:hover:not(:disabled) { background: var(--raised-hi); }
.btn.primary { background: var(--text); color: var(--ground); border-color: var(--text); }
.btn.primary:hover { background: #fff; }
.btn.sm { height: 34px; padding: 0 12px; }
.btn svg { width: 15px; height: 15px; }
.btn.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.btn.file:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* YouTube search */
.search { display: flex; gap: 6px; }
.search input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--raised); outline: none; font-size: 13px; }
.search input:focus { border-color: var(--line-hi); }
.search input::placeholder { color: var(--faint); }
.search input::-webkit-search-cancel-button { filter: invert(.6); }
.key-btn { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid var(--line); border-radius: 9px; background: var(--raised); color: var(--muted); }
.key-btn:hover { color: var(--text); background: var(--raised-hi); }
.key-btn svg { width: 14px; height: 14px; }
.results { display: grid; gap: 2px; margin-top: 10px; max-height: 360px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.result-row { position: relative; }
.result-alt { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: var(--raised-hi); color: var(--text); opacity: 0; }
.result-alt svg { width: 14px; height: 14px; }
.result-row:hover .result-alt, .result-alt:focus-visible, .result:focus-visible + .result-alt { opacity: 1; }
.result-alt:hover { background: var(--accent); color: var(--ground); }
.result-row:hover .result { padding-right: 40px; }
.result { display: flex; gap: 10px; align-items: center; width: 100%; padding: 6px; border: 0; border-radius: 9px; background: transparent; text-align: left; }
.result:hover, .result:focus-visible { background: var(--raised); outline: none; }
.result img { width: 72px; height: 40px; flex: none; border-radius: 6px; object-fit: cover; background: var(--raised); }
.result-text { display: grid; gap: 2px; min-width: 0; }
.result-title { font-size: 12.5px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.result-meta { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.results-status { padding: 8px 4px; color: var(--muted); font-size: 12.5px; }

/* Songs */
/* The playlist card fills the rest of the right panel, level with the bottom of the stage,
   and the list scrolls inside it. */
@media (min-width: 1101px) { .side.right { padding-bottom: 0; } } /* drawers keep their padding */
.playlist-card { flex: 1 0 200px; display: flex; flex-direction: column; min-height: 200px; }
.songs { list-style: none; margin: 12px -4px 0; padding: 0 4px; display: grid; align-content: start; gap: 4px; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.songs:empty::before { content: "Songs you play show up here."; display: block; padding: 6px 2px; font-size: 12.5px; color: var(--faint); }
.song { position: relative; }
.songs { -webkit-user-select: none; user-select: none; }
/* Grip: stands in for the number on hover (and always on touch screens). */
.song-grip { position: absolute; left: 9px; top: 50%; width: 30px; height: 30px; transform: translateY(-50%); display: grid; place-items: center; color: var(--muted); cursor: grab; opacity: 0; touch-action: none; }
.song-grip svg { width: 10px; height: 16px; }
.song:hover .song-grip { opacity: 1; }
.song:hover .song-num { opacity: 0; }
@media (hover: none) { .song-grip { opacity: 1; } .song-num { opacity: 0; } }
@media (hover: hover) { .song-grip { pointer-events: none; } } /* mice drag the whole row */
.songs.sorting, .songs.sorting * { cursor: grabbing !important; }
.songs.sorting .song:not(.dragging) { transition: transform .16s ease; }
.songs.sorting .song-btn:hover { background: transparent; }
.songs.sorting .song-remove { opacity: 0; }
.song.dragging { z-index: 2; }
.song.dragging .song-btn, .songs.sorting .song.dragging .song-btn { background: var(--raised-hi); border-color: var(--line-hi); box-shadow: 0 10px 28px rgba(0,0,0,.5); }
.song.dragging .song-grip { opacity: 1; }
.song.dragging .song-num { opacity: 0; }
.song-btn { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; padding: 9px 34px 9px 8px; border-radius: 12px; border: 1px solid transparent; background: transparent; text-align: left; }
.song-btn:hover { background: var(--raised); }
.song.current .song-btn { border-color: rgba(255,255,255,.5); background: var(--raised); }
.song-num { display: grid; place-items: center; font: 12px var(--mono); color: var(--muted); }
.song-num svg { width: 14px; height: 14px; color: var(--text); }
.song-text { display: grid; min-width: 0; }
.song-title { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-tag { justify-self: start; margin-top: 3px; padding: 0 6px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: 10.5px; font-weight: 600; line-height: 16px; }
.song-remove { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); opacity: 0; }
.song-remove svg { width: 12px; height: 12px; }
.song:hover .song-remove, .song-remove:focus-visible { opacity: 1; }
.song-remove:hover { color: var(--text); background: var(--raised-hi); }
.eq { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
/* Heights follow the music, set from the frame loop (a looping CSS animation would keep the
   page repainting at the display's full rate, ignoring the frame-rate setting). */
.eq i { width: 3px; height: 100%; border-radius: 1px; background: var(--accent); transform-origin: bottom; transform: scaleY(var(--l, .4)); }

/* ---------- Stage ---------- */
.stage { grid-area: stage; position: relative; overflow: hidden; min-height: 0; border-radius: 18px; border: 1px solid var(--line); background: var(--ground); container-type: inline-size; }
.stage:fullscreen { border-radius: 0; border: 0; }
/* "Full screen" while the tab's audio is shared: the stage covers the whole window instead
   (see setStageMax in main.js). */
.app.stage-max .stage { position: fixed; inset: 0; z-index: 40; border-radius: 0; border: 0; }
.app.stage-max .stage-tools [data-panel] { display: none; } /* the panels would open underneath */
#viz { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Darkens the visualizer behind the lyric column so text stays readable in any mode. */
.stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 62% 46% at 50% 50%, rgba(9,9,10,.82), rgba(9,9,10,.5) 60%, rgba(9,9,10,.08)); }
.lyrics, .empty, .drop-hint { z-index: 2; }
/* Lyrics off: drop the text and the dark backing behind it so the visuals show in full. */
.stage.no-lyrics .lyrics, .stage.no-lyrics::before { display: none; }
.lyrics { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.lyrics-track { position: absolute; left: 0; right: 0; top: 50%; padding: 0 24px; transition: transform .45s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.line { display: block; width: fit-content; max-width: min(900px, 100%); margin: 0 auto; padding: 8px 12px; border: 0; background: none; text-align: center; pointer-events: auto;
  font: 600 calc(clamp(20px, 4.4cqi, 46px) * var(--lyric-scale, 1))/1.2 var(--sans); letter-spacing: -0.02em; color: var(--faint);
  transition: color .3s, opacity .3s, transform .3s; opacity: .35; transform: scale(.94); border-radius: 8px; text-wrap: balance; }
.line:hover { color: var(--muted); }
.line.active { opacity: 1; transform: scale(1); color: rgba(244,244,245,.32); }
/* Each word fills on its own, so a line that wraps fills in reading order: the first
   row finishes before the second starts, rather than both rows sweeping side by side. */
.line.active .w { color: transparent;
  background: linear-gradient(90deg, var(--text) var(--p, 0%), rgba(244,244,245,.32) var(--p, 0%));
  -webkit-background-clip: text; background-clip: text; }
.line.gap { font-family: var(--mono); letter-spacing: .3em; }

.empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 24px; gap: 6px; }
.empty-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.empty-sub { color: var(--muted); max-width: 40ch; }
.drop-hint { position: absolute; inset: 14px; display: grid; place-items: center; border: 1.5px dashed var(--accent); border-radius: 12px; background: rgba(9,9,10,.75); font: 500 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); opacity: 0; pointer-events: none; transition: opacity .15s; }
.stage.dragging .drop-hint { opacity: 1; }

.stage-tools { position: absolute; top: 12px; z-index: 4; display: flex; gap: 6px; }
.stage-tools.at-left { left: 12px; }
.stage-tools.at-right { right: 12px; }
[data-reveal] { display: none; }


/* Beat debug chart (?debug or Shift+D). */
.beat-debug { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; width: calc(100% - 24px); height: 150px; border-radius: 12px; background: rgba(9,9,10,.82); box-shadow: 0 0 0 1px rgba(255,255,255,.08); pointer-events: none; }

/* YouTube requires the player to stay visible and at least 200 × 200 px. */
.yt-card { position: absolute; right: 12px; top: 56px; z-index: 3; width: 356px; height: 200px; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 20px 50px rgba(0,0,0,.5); }
.yt-card iframe { display: block; width: 100%; height: 100%; border: 0; }
/* "Hidden" video: moved off-screen at full size, because YouTube won't play embeds that
   are display:none or shrunk below 200 × 200. Note its terms require the player to be visible. */
.yt-card.tucked { left: -10000px; right: auto; opacity: 0; pointer-events: none; }
.icon-btn.glass[aria-pressed="true"] { background: var(--text); color: var(--ground); }

/* ---------- Player bar ---------- */
.player { grid-area: player; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 560px) minmax(0, 1fr); align-items: center; gap: 24px; min-height: 80px; margin: 0 -10px; padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--ground); }
.np { display: flex; align-items: center; gap: 12px; min-width: 0; }
.np-thumb { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 10px; overflow: hidden; background: var(--raised); color: var(--muted); }
.np-thumb svg { width: 18px; height: 18px; }
.np-thumb img { width: 100%; height: 100%; object-fit: cover; }
.np-text { min-width: 0; }
.np-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.controls { display: grid; gap: 4px; justify-items: center; }
.buttons { display: flex; align-items: center; gap: 18px; }
.icon-btn.plain svg { width: 17px; height: 17px; }
.play { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 0; background: var(--text); color: var(--ground); }
.play:hover:not(:disabled) { background: #fff; transform: scale(1.04); }
.play svg { width: 15px; height: 15px; }
.seek-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.time { font: 11.5px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 4.2ch; }
#cur { text-align: right; }
.vol { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
#mute .x { display: none; }
#mute.muted .x { display: inline; }
#mute.muted .wave { display: none; }

input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 60px; height: 18px; background: transparent; margin: 0; --p: 0%; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--text) var(--p), var(--line-hi) var(--p)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--text) var(--p), var(--line-hi) var(--p)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--text); border: 0; box-shadow: 0 0 0 3px rgba(0,0,0,.35); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--text); border: 0; }
input[type="range"]:disabled { opacity: .4; cursor: not-allowed; }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent); }
.vol input[type="range"] { flex: 0 1 110px; min-width: 70px; }

/* ---------- Dialog, toast ---------- */
dialog { width: min(480px, calc(100% - 32px)); padding: 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--text); }
dialog::backdrop { background: rgba(4,4,5,.7); }
dialog h2 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
dialog p, dialog ol { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.55; }
dialog ol { padding-left: 18px; display: grid; gap: 6px; }
dialog b { color: var(--text); font-weight: 500; }
dialog a { color: var(--accent); }
dialog code { font: 12px var(--mono); color: var(--text); background: var(--raised); padding: 1px 5px; border-radius: 4px; }
dialog label { display: block; margin: 4px 0 6px; font: 12px var(--mono); color: var(--muted); }
.field { width: 100%; height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--raised); font: 13px var(--mono); outline: none; }
.field:focus { border-color: var(--line-hi); }
dialog .hint { margin: 8px 0 18px; font-size: 12px; }
.dialog-actions { display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: 8px; }

#toast { position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 8px); padding: 9px 14px; border-radius: 10px; background: var(--text); color: var(--ground); font-size: 13px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; max-width: min(520px, calc(100% - 32px)); text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

.drawer-scrim { display: none; }

/* ---------- Narrower screens: side panels become drawers ---------- */
@media (max-width: 1100px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "player"; }
  .side { display: flex; position: fixed; top: 10px; bottom: 96px; z-index: 30; width: min(320px, calc(100vw - 40px)); padding: 10px; border-radius: 18px; border: 1px solid var(--line); background: var(--ground); box-shadow: 0 30px 80px rgba(0,0,0,.6); transition: transform .25s cubic-bezier(.2,.7,.2,1), visibility .25s; visibility: hidden; }
  .left { left: 10px; transform: translateX(calc(-100% - 20px)); }
  .right { right: 10px; transform: translateX(calc(100% + 20px)); }
  .app.open-left .left, .app.open-right .right { transform: none; visibility: visible; }
  .drawer-scrim { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .app.open-left .drawer-scrim, .app.open-right .drawer-scrim { opacity: 1; pointer-events: auto; }
  [data-reveal] { display: grid; }
}
@media (max-width: 720px) {
  .player { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "np buttons" "seek seek"; gap: 8px 12px; }
  .np { grid-area: np; }
  .controls { display: contents; }
  .buttons { grid-area: buttons; gap: 8px; }
  .seek-row { grid-area: seek; }
  .vol { display: none; }
  .side { bottom: 118px; }
  .yt-card { left: 12px; right: 12px; width: auto; }
  /* Stack the video above the lyrics instead of over them. */
  .stage.has-video .lyrics, .stage.has-video::before { top: 268px; }
}
@media (prefers-reduced-motion: reduce) {
  .lyrics-track, .line, #toast, .side, .switch, .switch::after { transition: none; }
}