/* public/stage.css - Песенник (слайд-панель как #musicPanel) и Сцена (оверлей караоке/танца).
   Цвета, шрифт и радиус берутся из темы (--bg/--panel/--ink/--accent/--radius), своё здесь только
   палитра партий: приглушённые тона, читаемые на всех пяти тёмных темах Сада. Творец = --accent. */
:root {
  --sb-c0: #e39bb0; --sb-c1: #8cc7a6; --sb-c2: #8fb8e0; --sb-c3: #e3a07c; --sb-c4: #7fc2bf; --sb-c5: #d8c27a;
  --sb-dim: color-mix(in srgb, var(--ink) 42%, transparent);
}

/* ===== Песенник ===== */
#songbookPanel { position: fixed; right: 0; top: 0; height: 100vh; height: 100dvh; width: 400px; max-width: 94vw; background: var(--panel-2); border-left: 1px solid var(--border);
  transform: translateX(100%); transition: transform .22s ease; z-index: 30; display: flex; flex-direction: column; font-size: var(--fz-sm); }
#songbookPanel:not(.collapsed) { transform: translateX(0); box-shadow: -8px 0 24px rgba(0, 0, 0, .4); }
#songbookPanel .tech-head button { background: none; border: none; color: var(--muted); font-size: 22px; cursor: pointer; }
.sb-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.sb-body input, .sb-body textarea { width: 100%; box-sizing: border-box; padding: 7px 9px; background: var(--panel); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: var(--fz-sm); }
.sb-body input:focus, .sb-body textarea:focus { outline: none; border-color: var(--accent); }
.sb-body textarea { resize: vertical; font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.5; }

.sb-btn { padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); color: var(--ink); font: inherit; font-size: var(--fz-sm); cursor: pointer;
  transition: background var(--motion), border-color var(--motion); }
.sb-btn:hover { background: rgba(var(--accent-rgb), .16); border-color: rgba(var(--accent-rgb), .55); }
.sb-btn:active { transform: translateY(1px); }
.sb-btn:focus-visible, .sb-row:focus-visible, .sb-line:focus-visible, .sbs-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sb-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; background: var(--panel); border-color: var(--border); }
.sb-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.sb-btn.primary:hover { filter: brightness(1.08); }
.sb-btn.sm { padding: 3px 9px; font-size: var(--fz-xs); }

.sb-tools { display: flex; flex-direction: column; gap: var(--space-2); }
.sb-status { margin: 0; color: var(--accent); font-size: var(--fz-xs); }
.sb-empty, .sb-hint { margin: 0; color: var(--muted); font-size: var(--fz-xs); line-height: 1.5; }
.sb-warn { margin: 0; color: var(--ink); font-size: var(--fz-xs); }
.sb-note { margin: 0; color: var(--muted); font-size: 11px; }
.sb-hint kbd { padding: 0 4px; border: 1px solid var(--border); border-radius: 3px; font-size: 11px; }

.sb-list { display: flex; flex-direction: column; gap: 4px; }
.sb-row { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-3); text-align: left; background: var(--panel); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius); font: inherit; cursor: pointer; transition: border-color var(--motion); }
.sb-row:hover { border-color: rgba(var(--accent-rgb), .55); }
.sb-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sb-row-main b, .sb-row-main small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-row-main small, .sb-song-head small { color: var(--muted); font-size: var(--fz-xs); }
.sb-row-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.sb-dot { color: var(--muted); font-size: 11px; }
.sb-dot.on { color: var(--accent); }
.sb-nim { color: var(--muted); font-size: var(--fz-xs); min-width: 1em; text-align: center; }
.sb-nim.ok { color: var(--sb-c1); font-weight: 700; }
.sb-nim.doubt { color: var(--sb-c3); font-weight: 700; }
.sb-sung { color: var(--muted); font-size: 11px; white-space: nowrap; }

.sb-song { display: flex; flex-direction: column; gap: var(--space-3); }
.sb-back { align-self: flex-start; background: none; border: none; color: var(--muted); font: inherit; font-size: var(--fz-xs); cursor: pointer; padding: 0; }
.sb-back:hover { color: var(--ink); }
.sb-song-head { display: flex; align-items: flex-start; gap: var(--space-2); }
.sb-song-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sb-song-head b { font-size: var(--fz-base); }
.sb-play { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.sb-play .sb-btn { padding: 9px 12px; font-size: var(--fz-base); }
.sb-sec { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.sb-sec h4 { margin: 0; font-size: var(--fz-sm); color: var(--accent); font-weight: 600; }
.sb-sec h4 small { color: var(--muted); font-weight: 400; }
.sb-sec .sb-btn:not(.primary) { background: var(--panel-2); }
.sb-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-offset { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fz-xs); }
.sb-offset b { color: var(--ink); min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; }
.sb-cands { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.sb-cand { display: flex; align-items: center; gap: var(--space-2); padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-2); }
.sb-cand-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sb-cand-main b, .sb-cand-main small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-cand-main small { color: var(--muted); font-size: 11px; }
.sb-lrc { display: flex; flex-direction: column; gap: 6px; }

.sb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border: 1px solid var(--chip); border-radius: var(--radius); color: var(--chip); font-size: var(--fz-xs); }
.sb-chip:not(:has(button)) { padding-right: 8px; }
.sb-chip button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.sb-chip button:hover { color: var(--ink); }
.sb-add { display: flex; gap: 6px; }

.sb-lines { display: flex; flex-direction: column; max-height: 46vh; overflow-y: auto; margin: 0 calc(-1 * var(--space-2)); }
.sb-line { display: grid; grid-template-columns: 54px 1fr auto; gap: var(--space-2); align-items: baseline; width: 100%; padding: 5px var(--space-2); background: none; border: none;
  border-radius: var(--radius); color: var(--ink); font: inherit; font-size: var(--fz-sm); text-align: left; cursor: pointer; }
.sb-line:hover { background: rgba(var(--accent-rgb), .1); }
.sb-lt { color: var(--muted); font-size: 11px; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.sb-ltx { min-width: 0; overflow-wrap: anywhere; }
.sb-ltx small { display: block; color: var(--muted); font-size: 11px; }
.sb-who { color: var(--chip); font-size: 11px; white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }

.sb-tap { text-align: center; }
.sb-tap .sb-acts { justify-content: center; }
.sb-tap-prev { color: var(--muted); font-size: var(--fz-xs); min-height: 1.4em; }
.sb-tap-cur { font-size: var(--fz-lg); line-height: 1.35; padding: var(--space-4) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.sb-tap-n { color: var(--muted); font-size: var(--fz-xs); font-variant-numeric: tabular-nums; }
.sb-tap-btn { min-width: 120px; padding: 10px 16px; font-size: var(--fz-base); }

/* ===== Сцена ===== */
body.sb-stage-on { overflow: hidden; }
body.sb-stage-on #hardReload { display: none; } /* z 9999 в правом верхнем углу легла бы на «стоп» сцены */
.sb-stage { position: fixed; inset: 0; z-index: 45; display: grid; grid-template-rows: auto auto auto 1fr auto; background: var(--bg); color: var(--ink); font-family: var(--font); --beat: 0; }
.sb-stage.hidden, .sb-mini.hidden { display: none; }
.sbs-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--bg), color-mix(in srgb, var(--bg) 70%, transparent) 40%, var(--bg)), var(--sb-cover, none);
  background-size: cover; background-position: center; opacity: .5; }
.sb-stage > *:not(.sbs-bg) { position: relative; z-index: 1; }
.sbs-top { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); background: var(--panel-2); }
.sbs-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sbs-title b, .sbs-title small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbs-title small { color: var(--muted); font-size: var(--fz-xs); }
.sbs-top-b { display: flex; gap: 6px; }
.sbs-b { min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); color: var(--ink); font: inherit; font-size: var(--fz-base); cursor: pointer;
  transition: background var(--motion), border-color var(--motion); }
.sbs-b:hover { background: rgba(var(--accent-rgb), .16); border-color: rgba(var(--accent-rgb), .55); }
.sbs-b:active { transform: translateY(1px); }

.sbs-cast { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-5) var(--space-4) 0; }
.sbs-face { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px; opacity: .55; transition: opacity var(--motion-slow) var(--ease-out); }
.sbs-face img, .sbs-face .sb-ph { width: 64px; height: 64px; border-radius: var(--radius); object-fit: cover; box-shadow: 0 0 0 2px var(--border); transition: box-shadow var(--motion-slow) var(--ease-out); }
.sbs-face .sb-ph { display: grid; place-items: center; background: var(--panel); color: var(--sb-ring); font-size: 26px; font-weight: 600; }
.sbs-face .sb-nm { font-size: var(--fz-xs); color: var(--muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbs-face.on { opacity: 1; }
.sbs-face.on img, .sbs-face.on .sb-ph { box-shadow: 0 0 0 3px var(--sb-ring); }
.sbs-face.on .sb-nm { color: var(--sb-ring); }

.sbs-part { text-align: center; color: var(--muted); font-size: var(--fz-xs); letter-spacing: .04em; min-height: 1.6em; padding-top: var(--space-3); }
.sbs-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-4) max(var(--space-5), calc(50% - 560px)); text-align: center; min-height: 0; }
.sbs-cue { color: var(--accent); font-size: var(--fz-sm); font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity var(--motion) , transform var(--motion); }
.sbs-cue.on { opacity: 1; transform: none; }
.sbs-line { font-size: clamp(26px, 4.6vw, 52px); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; min-height: 1.25em; overflow-wrap: anywhere; color: var(--sb-dim); }
/* ромадзи - чтобы подпевать: не мельче ~60% основной строки и светлее её незалитой части */
.sbs-roma { font-size: clamp(18px, 2.9vw, 32px); line-height: 1.35; min-height: 1.35em; font-weight: 500; letter-spacing: .01em; color: color-mix(in srgb, var(--ink) 66%, transparent); }
/* «ромадзи крупно»: латиница становится основной строкой, кана мелко сверху */
.sb-stage.roma-big .sbs-line { font-size: clamp(15px, 1.9vw, 22px); font-weight: 500; }
.sb-stage.roma-big .sbs-roma { font-size: clamp(26px, 4.6vw, 52px); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--sb-dim); }
.sb-stage.roma-big .sbs-roma-t { background: rgba(var(--accent-rgb), .22); border-color: var(--accent); }
.sb-stage > .sbs-bigplay { display: none; position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); width: 112px; height: 112px; border-radius: 50%;
  border: 2px solid var(--accent); background: color-mix(in srgb, var(--panel) 88%, transparent); color: var(--accent); font-size: 46px; cursor: pointer; box-shadow: 0 8px 32px rgba(0, 0, 0, .45); }
.sb-stage.wait-tap > .sbs-bigplay { display: grid; place-items: center; }
.sb-stage.wait-tap .sbs-main { opacity: .35; }
.sbs-next { font-size: clamp(16px, 2.2vw, 24px); line-height: 1.4; min-height: 1.4em; color: color-mix(in srgb, var(--sb-fill) 45%, transparent); }

/* пословная заливка: копия слова поверх, обрезанная по --p (0..1) */
/* inline-block: у строчного спана ::after встаёт по content-area и съезжает на пару пикселей от слова */
.sbw { position: relative; display: inline-block; white-space: pre; --p: 0; }
.sbw::after { content: attr(data-w); position: absolute; left: 0; top: 0; width: 100%; height: 100%; white-space: pre; color: var(--sb-fill); clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0); pointer-events: none; }
.together .sbw::after { background: var(--sb-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.sbs-warn { margin: 0; color: var(--muted); font-size: var(--fz-sm); }
.sbs-sheet { width: 100%; max-width: 720px; max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) 0; }
.sbs-sheet p { margin: 0; font-size: var(--fz-lg); line-height: 1.5; color: var(--sb-fill); }
.sbs-sheet small { display: block; color: var(--muted); font-size: var(--fz-sm); }

.sbs-ctl { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) max(var(--space-5), calc(50% - 560px)) calc(var(--space-4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--panel-2); }
.sbs-secs { display: flex; gap: 2px; min-height: 0; }
.sbs-secs:empty { display: none; }
.sbs-secs span { min-width: 0; padding: 2px 4px; border-radius: 2px; background: var(--panel); color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; transition: background var(--motion), color var(--motion); }
.sbs-secs span.on { background: rgba(var(--accent-rgb), .22); color: var(--ink); }
.sbs-seek { width: 100%; accent-color: var(--accent); margin: 0; }
.sbs-row { display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.sbs-time, .sbs-dur { color: var(--muted); font-size: var(--fz-xs); font-variant-numeric: tabular-nums; min-width: 40px; }
.sbs-time { text-align: right; }
.sbs-play { min-width: 56px; }

/* танец: портреты крупнее, текст мелко, пульс по биту */
.sb-stage.dance .sbs-cast { flex: 0; padding-top: var(--space-6); gap: var(--space-6); }
.sb-stage.dance .sbs-face { width: 120px; opacity: 1; }
.sb-stage.dance .sbs-face img, .sb-stage.dance .sbs-face .sb-ph { width: 112px; height: 112px; transform: scale(calc(1 + var(--beat) * .07)); box-shadow: 0 0 0 calc(2px + var(--beat) * 4px) var(--sb-ring); }
.sb-stage.dance .sbs-part { font-size: var(--fz-lg); color: var(--ink); letter-spacing: 0; }
.sb-stage.dance .sbs-line { font-size: clamp(18px, 2.4vw, 26px); }
.sb-stage.dance .sbs-roma, .sb-stage.dance .sbs-next { font-size: var(--fz-sm); }
.sb-stage.dance .sbs-bg { opacity: calc(.35 + var(--beat) * .3); }
.sb-stage.dance::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; box-shadow: inset 0 0 0 calc(var(--beat) * 6px) rgba(var(--accent-rgb), .35); }

/* мини-панель над полем ввода */
/* flex: none - в колонке #main лента забирает всё место, и без этого плашку сжимало до полоски в 8 px */
.sb-mini { flex: none; width: calc(100% - 24px); display: grid; grid-template-columns: 1fr auto; gap: 4px var(--space-3); align-items: center; max-width: 1150px; margin: 6px auto; padding: 6px 12px 0; box-sizing: border-box;
  border: 1px solid rgba(var(--accent-rgb), .3); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.sbm-txt { min-width: 0; }
.sbm-line { font-size: var(--fz-base); font-weight: 600; color: var(--sb-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.4em; }
.sbm-next { font-size: var(--fz-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.3em; }
/* «ромадзи крупно» в мини-панели: латиница - основная строка, кана мелко над ней */
.sbm-kana { font-size: var(--fz-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbm-kana:empty { display: none; }
.sb-mini.roma-big .sbm-line { font-size: calc(var(--fz-base) * 1.2); }
.sbm-b { display: flex; gap: 4px; }
.sbm-b .sbs-b { min-width: 34px; height: 32px; font-size: 14px; }
.sbm-prog { grid-column: 1 / -1; height: 3px; margin: 2px -12px 0; background: var(--border); }
.sbm-prog i { display: block; height: 100%; width: 0; background: var(--accent); }
/* плашка из сюжета / выбор после стопа - та же мини-панель, без полосы прогресса */
.sb-offer { padding-bottom: 6px; }
.sbo-t { font-size: var(--fz-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-offer .sbm-b { align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* песенник: поиск новой песни, настройка, «отыграть текстом» */
.sb-findbar { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.sb-allrun { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fz-xs); }
.sb-allprog { flex: 1; }
.sb-pref { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); color: var(--muted); font-size: var(--fz-xs); }
.sb-pref select { padding: 4px 6px; background: var(--panel); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: var(--fz-xs); }
.sb-textplay { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fz-xs); }
.sb-textplay span { flex: 1; }
.sb-fcols { display: flex; flex-direction: column; gap: var(--space-3); }
.sb-fr { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: 6px 8px; text-align: left; background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius); font: inherit; cursor: pointer; }
.sb-fr img, .sb-fr-noimg { flex: 0 0 auto; width: 56px; height: 32px; object-fit: cover; border-radius: 2px; background: var(--panel); }
.sb-fr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sb-fr-main b, .sb-fr-main small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-fr-main small { color: var(--muted); font-size: 11px; }
.sb-fr.pair { border-left: 3px solid var(--sb-c1); }
.sb-fr.match { background: color-mix(in srgb, var(--sb-c1) 14%, var(--panel-2)); }
.sb-fr.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

@media (max-width: 760px) {
  #songbookPanel { width: 100vw; max-width: 100vw; }
  .sbs-top { padding: var(--space-2) var(--space-3); padding-top: calc(var(--space-2) + env(safe-area-inset-top)); }
  .sbs-cast { gap: var(--space-2); padding-top: var(--space-3); }
  .sbs-face { width: 60px; }
  .sbs-face img, .sbs-face .sb-ph { width: 48px; height: 48px; font-size: 20px; }
  .sb-stage.dance .sbs-face { width: 88px; }
  .sb-stage.dance .sbs-face img, .sb-stage.dance .sbs-face .sb-ph { width: 80px; height: 80px; }
  .sbs-main { padding: var(--space-3); }
  .sbs-ctl { padding-left: var(--space-3); padding-right: var(--space-3); }
  .sbs-b { min-width: 44px; height: 44px; }
  .sb-mini { margin: 6px 8px; }
  .sb-line { grid-template-columns: 46px 1fr auto; }
}

@media (prefers-reduced-motion: reduce) {
  #songbookPanel, .sbs-face, .sbs-face img, .sbs-cue, .sbs-secs span { transition: none; }
  .sb-stage.dance .sbs-face img, .sb-stage.dance .sbs-face .sb-ph { transform: none; box-shadow: 0 0 0 3px var(--sb-ring); }
  .sb-stage.dance .sbs-bg { opacity: .4; }
  .sb-stage.dance::after { display: none; }
}