/*
 * そろえる の見た目。
 *
 * **暗い配色しか持たない。** 明るい配色を用意していないのは好みではなく、
 * 動画を並べて見る道具だから ── 白い下地は映像の色を狂わせるし、
 * 画面の大半が動画で埋まるので、周りは沈んでいるほうが見やすい。
 * `<meta name="color-scheme" content="dark">` を入れてあるので、
 * ブラウザの部品（シークバー・入力欄）も暗いほうで描かれる。
 *
 * 押せるものは 44px 以上。文字と下地の明暗差は本文 4.5:1 を下回らせない。
 * 320px でも横スクロールを出さない。
 */

:root {
  --bg: #0e1014;
  --bg-raise: #171a21;
  --bg-card: #1c2029;
  --line: #2c313d;
  --line-strong: #3d4453;

  --fg: #eef1f6;
  --fg-mid: #b6becd; /* 下地 #0e1014 に対して 8.6:1 */
  --fg-dim: #8d97a8; /* 同 5.4:1。これより暗くしない */

  --accent: #4dd0c7; /* 青緑。YouTube の赤と喧嘩しない */
  --accent-strong: #6fe3da;
  --on-accent: #04231f; /* accent に載せる文字。白は 2.4:1 しかないので使わない */
  --warn: #ffcf6b;
  --on-warn: #2a1f05;
  --danger: #ff8f8f;

  /* 画面の中の小さな押しもの。**44px にすると札だらけになって映像が潰れる。**
     WCAG 2.2 の最低（24px）は余裕で超えている。下の帯の主な操作は 44px のまま */
  --chip-h: 44px;

  --radius: 10px;
  --gap: 12px;
  --head-h: 56px;
  /* 下の操作帯の背の低いときの高さ。**`.transport` にはこちらを使う。**
     測った値（--foot-h）を min-height に使うと、いちど高くなった帯が
     二度と縮まなくなる（自分の高さを自分の下限にしてしまう） */
  --foot-min: 60px;
  /* 下の操作帯の実際の高さ。**app.js が測って入れ直す。** 本文の余白用 */
  --foot-h: 60px;

  --cols: 2;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

/* **`body` に `height: 100%` を付けないこと。**
   `* { box-sizing: border-box }` と合わさると、下の `padding-bottom` が
   「高さの内側」に食い込むだけになり、**下端に余白を作らなくなる。**
   その結果、下の操作帯が最後の画面の「ずれ」の欄を隠していた
   （1440px で 54px、390px で 104px 隠れていた。2026-09-07） */
body {
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    'Hiragino Kaku Gothic ProN',
    'Noto Sans JP',
    Meiryo,
    sans-serif;
  font-size: 15px;
  line-height: 1.6;
  /* `--foot-h` は下の操作帯の実際の高さ。**app.js が測って入れ直す。**
     折り返して 2 段になると 60px では足りない（390px で 115px あった） */
  padding-bottom: calc(var(--foot-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ────────────────────────────── 見出しの帯 ────────────────────────────── */

.head {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: var(--head-h);
  padding: calc(8px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-left)) 8px max(12px, env(safe-area-inset-right));
  background: var(--bg-raise);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.head-title {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: var(--accent-strong);
  white-space: nowrap;
}

.head-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

/* ────────────────────────────── 押しもの ────────────────────────────── */

.btn {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover:not(:disabled) {
  background: #232833;
  border-color: var(--fg-dim);
}

.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.45;
  cursor: default;
}

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

.btn-primary:hover:not(:disabled) {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.btn-quiet {
  background: transparent;
  color: var(--fg-mid);
}

.btn-big {
  min-height: 52px;
  padding: 0 26px;
  font-size: 16px;
}

.btn-play {
  min-width: 52px;
  font-size: 18px;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* ────────────────────────────── お知らせ ────────────────────────────── */

.notice {
  margin: 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border-left: 4px solid var(--accent);
  background: #14262a;
  color: var(--fg);
  font-size: 14px;
}

.notice-warn {
  border-left-color: var(--warn);
  background: #2a2412;
}

/* ────────────────────────── 合わせている最中の帯 ────────────────────────── */

.align-bar {
  position: sticky;
  top: var(--head-h);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;
  margin: 0;
  padding: 10px max(10px, env(safe-area-inset-left));
  background: #2a2412;
  border-bottom: 1px solid var(--warn);
}

.align-bar-text {
  margin: 0;
  flex: 1 1 260px;
  font-size: 14px;
  color: var(--fg);
}

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

/* ────────────────────────────── 画面の並び ────────────────────────────── */

.stage {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gap);
  padding: var(--gap) max(var(--gap), env(safe-area-inset-left)) var(--gap)
    max(var(--gap), env(safe-area-inset-right));
}

.stage:empty {
  padding: 0;
}

.stage.has-spot .screen.is-spot {
  grid-column: 1 / -1;
  order: -1 !important;
}

/* ── スクロールせずに 1 画面へ収める ────────────────────────────
   並べて見るアプリなので、**送らないと全部見えないなら並べた意味が無い。**
   列数とタイルの幅は `app.js` の `fitStage()` が窓の大きさから決めて、
   `--cols` と `--tile-w` に入れてくる。
   **携帯（700px 以下）と、小さくなりすぎるときは、縦に送る形へ戻す。** */
body.is-fit {
  overflow: hidden;
  padding-bottom: 0;
}

body.is-fit .stage {
  grid-template-columns: repeat(var(--cols), var(--tile-w));
  justify-content: center;
  align-content: start;
  /* 縦も真ん中に置く。**上に寄せると下だけが大きく空いて落ち着かない**
     （3 画面を横 1 列に並べたときに、画面の下半分が丸ごと余った）。
     `min-height` で中央寄せにすると、**収まったかどうかを測れなくなる**ので、
     余ったぶんの半分を `app.js` が上の余白として入れる */
  margin-top: var(--stage-lift, 0px);
}

/* 「大きく」しているとき ── 上に 1 つ、下に残り全部 */
body.is-fit .stage.has-spot .screen.is-spot {
  grid-column: 1 / -1;
  justify-self: center;
  width: var(--spot-w);
}

/* タイルが細いときは、「ずれ」の欄を詰めて 1 行に収める。
   **押しものは減らさない。** 消すのは説明の札だけ */
.stage.is-tight .sync-auto {
  display: none;
}

.stage.is-tight .screen-sync,
.stage.is-tight .screen-align {
  gap: 4px;
  padding: 5px 6px;
}

.stage.is-tight .nudge {
  min-width: 34px;
  padding: 0 3px;
}

.stage.is-tight .sync-input {
  width: 4.2em;
}

/* 単位の「秒」を消す。**ずれの値が「+7秒」と出ているので、無くても読める。**
   置いたままだと 1 行に収まらず、折り返したぶんだけ映像が小さくなる */
.stage.is-tight .sync-unit {
  display: none;
}

.stage.is-tight .sync-value {
  min-width: 3.6em;
}

.stage.is-tight .screen-bar {
  padding: 4px 6px;
}

.stage.is-tight .chip {
  padding: 0 8px;
}

/* もっと細いとき。**±1 と単位を隠す。**
   数の欄が残っているので、大きく動かしたいときはそこへ書ける */
.stage.is-tiny .nudge[data-step='1'] {
  display: none;
}

.stage.is-tiny .sync-input {
  width: 3.6em;
}

.stage.is-tiny .screen-title {
  font-size: 12px;
}

.screen {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
  overflow: hidden;
}

.screen.is-audio {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.screen.is-failed {
  border-color: var(--danger);
}

/* 上の帯 */

.screen-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--bg-raise);
  min-width: 0;
}

.screen-no {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--line-strong);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
}

.screen.is-audio .screen-no {
  background: var(--accent);
  color: var(--on-accent);
}

.screen-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: var(--fg-mid);
}

.chip {
  flex: none;
  min-height: var(--chip-h);
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--fg-mid);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

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

.chip:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.chip-move {
  /* 押しやすさの下限（32px）を割らないこと。試験が見張っている */
  min-width: 32px;
  padding: 0 6px;
  font-size: 11px;
  line-height: 1;
}

.chip-move:disabled {
  opacity: 0.3;
  cursor: default;
}

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

/* 映像 */

.screen-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

/* **プレイヤーだけを指すこと。** `> div` と書くと、映像の上に重ねている
   音量つまみまで映像いっぱいに広がり、**画面を押しても反応しなくなる**
   （ふたの真ん中に音量つまみが居座っていた。2026-09-08）。
   YT は用意ができると `.screen-mount` の div を iframe に置き換える */
.screen-video > iframe,
.screen-video > .screen-mount {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Twitch は、置き場所の div の中に枠を足してくる（YouTube は div ごと置き換える） */
.screen-mount > iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* 透明なふた。**消さないこと。**
   これが無いと、動画をクリックした 1 本だけが勝手に止まり、揃いが崩れる */
.screen-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.screen-cover:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

/* 合わせている最中は、ふたをどける（画面ごとに触りたいので） */
.stage.is-aligning .screen-cover {
  pointer-events: none;
}

/* **こちらから再生を始められなかった画面は、ふたをどける。**
   人がプレイヤーそのものを押さないと始まらないため */
.screen.needs-click .screen-cover {
  pointer-events: none;
}

.screen-hint {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(42, 36, 18, 0.94);
  border: 1px solid var(--warn);
  color: var(--warn);
  font-size: 12px;
  text-align: center;
  pointer-events: none;
}

/* 音量。**映像の上に重ねてある。**
   札の外に置くと、そのぶん縦を食って映像が小さくなる
   （PC では 1 画面に収める作りなので、1px でも映像に回したい）。
   `.screen-cover`（透明なふた）より前に置くこと。そうしないと押せない */
.screen-vol {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px 0 2px;
  border-radius: 999px;
  background: rgba(8, 10, 14, 0.74);
  opacity: 0.6;
}

.screen-vol:hover,
.screen-vol:focus-within,
.screen.is-audio .screen-vol {
  opacity: 1;
}

.vol-mute {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fg);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.vol-mute:focus-visible,
.vol-range:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

.vol-range {
  width: 74px;
  height: 32px;
  accent-color: var(--accent);
  cursor: pointer;
}

.stage.is-tight .vol-range {
  width: 54px;
}

.screen-waiting {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 3;
  display: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--warn);
  font-size: 12px;
}

.screen.is-waiting .screen-waiting {
  display: block;
}

/* **透かさないこと。** 下の YouTube のエラー画面と字が重なって読めなくなる */
.screen-fail {
  position: absolute;
  inset: 0;
  z-index: 4;
  margin: 0;
  display: grid;
  place-content: center;
  padding: 16px 16px 56px;
  background: #0a0c10;
  color: var(--danger);
  font-size: 13px;
  text-align: center;
}

.screen-open {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 5;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--fg);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

.screen-open:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.screen-open:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* 下の帯（ずれ） */

.screen-sync,
.screen-align {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  padding: 7px 8px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--fg-dim);
}

.sync-label {
  color: var(--fg-dim);
}

.sync-value {
  min-width: 4.5em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.nudge {
  min-width: 42px;
  min-height: var(--chip-h);
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg-raise);
  color: var(--fg);
  font: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.nudge:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.nudge:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.sync-input {
  width: 5.5em;
  min-height: var(--chip-h);
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.sync-unit {
  margin-left: -2px;
}

.sync-auto {
  padding: 2px 7px;
  border-radius: 999px;
  background: #14262a;
  color: var(--accent-strong);
  font-size: 11px;
  white-space: nowrap;
}

.screen-align {
  background: #241f10;
  border-top-color: var(--warn);
}

.align-range {
  flex: 1 1 120px;
  min-width: 90px;
  accent-color: var(--warn);
}

.align-time {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.align-btns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* ────────────────────────────── 何も無いとき ────────────────────────────── */

.empty {
  max-width: 640px;
  margin: 40px auto;
  padding: 0 20px;
  text-align: center;
  color: var(--fg-mid);
}

.empty h2 {
  margin: 0 0 12px;
  font-size: 22px;
  color: var(--fg);
}

.empty p {
  margin: 0 0 12px;
  font-size: 14px;
}

.empty strong {
  color: var(--fg);
}

.empty .btn-big {
  margin-top: 12px;
}

/* ────────────────────────────── 下の操作帯 ────────────────────────────── */

.transport {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-height: var(--foot-min);
  padding: 8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  background: var(--bg-raise);
  border-top: 1px solid var(--line);
}

/* **2 つの塊。** 狭いと下の塊が次の行へ回る。
   1 行に押し込むと、320px で右端のものが枠から出た（試験が拾った）。
   いまの右端は「まちのホームページ屋」への案内 */
.transport-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
  min-width: 0;
}

.transport-side {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* 始めるときの待ち合わせの札。**押しものではない**ので 44px は要らない */
.hold-badge {
  flex: none;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg-mid);
  font-size: 13px;
  line-height: 32px;
}

/* このアプリを作ったところへの案内。**再生の操作の右に置く。**
   `.transport-main` が伸び縮みするので、そのぶん再生バーが左へ寄る */
.credit {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--accent-strong);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

.credit:hover,
.credit:focus-visible {
  border-color: var(--accent);
  text-decoration: underline;
}

.credit-lead {
  color: var(--fg-mid);
  font-size: 12px;
}

.time {
  flex: none;
  min-width: 3.6em;
  color: var(--fg-mid);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.seek {
  flex: 1 1 auto;
  min-width: 60px;
  height: 44px;
  accent-color: var(--accent);
}

.rate {
  min-height: 44px;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
}

/* ────────────────────────────── 窓 ────────────────────────────── */

.dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 40px);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--bg-card);
  color: var(--fg);
}

.dialog::backdrop {
  background: rgba(0, 0, 0, 0.65);
}

.dialog-body {
  padding: 20px;
  overflow-y: auto;
  max-height: calc(100vh - 44px);
}

.dialog-body h2 {
  margin: 0 0 14px;
  font-size: 19px;
}

.dialog-body h3 {
  margin: 20px 0 6px;
  font-size: 15px;
  color: var(--accent-strong);
}

.dialog-body p {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--fg-mid);
}

.dialog-body strong {
  color: var(--fg);
}

.dialog-body code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--bg);
  font-size: 12px;
}

.keys {
  margin: 0 0 10px;
  padding-left: 20px;
  font-size: 14px;
  color: var(--fg-mid);
}

kbd {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--bg);
  color: var(--fg);
  font-size: 12px;
  text-align: center;
}

.field {
  display: block;
  margin: 0 0 8px;
}

.field-label {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  color: var(--fg-mid);
}

.field-input {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 15px;
}

.field-input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

.field-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--fg-dim);
}

.field-error {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: #2e1717;
  color: var(--danger);
  font-size: 13px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* ────────────────────────────── 幅で変わるところ ────────────────────────────── */

/* 狭い端末では、並べても読めないので 1 列に落とす */
@media (max-width: 700px) {
  .stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .stage.has-spot .screen:not(.is-spot) {
    /* 大きくしている画面があるときは、残りを 2 列にたたむ */
    grid-column: auto;
  }

  .head-title {
    font-size: 16px;
  }

  .btn {
    padding: 0 10px;
    font-size: 13px;
  }
}

@media (max-width: 400px) {
  .head-actions {
    width: 100%;
    margin-left: 0;
  }
}

/* 動きを減らす設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* 視聴時は映像を広く、調整時は操作をまとめて見せる。 */
.btn[aria-pressed='true'], .chip[aria-pressed='true'] {
  border-color: var(--accent);
  color: var(--accent-strong);
}
.stage:not(.is-editing) .screen-bar { padding: 4px 8px; }
.screen-bar { flex-wrap: wrap; }
.screen-title { flex-basis: 40%; }
.screen-no { width: 24px; height: 24px; }
.chip-move, .vol-mute { min-width: 44px; min-height: 44px; }
.vol-range { height: 44px; }
.screen-vol { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .screen-vol { opacity: 0; transition: opacity .15s; }
  .screen:hover .screen-vol, .screen:focus-within .screen-vol { opacity: 1; }
  .screen.is-audio .screen-vol { opacity: 0; }
  .screen.is-audio:hover .screen-vol, .screen.is-audio:focus-within .screen-vol { opacity: 1; }
}
.empty { max-width: 600px; margin: clamp(32px, 10vh, 120px) auto; text-align: left; }
.empty h2 { font-size: clamp(32px, 5vw, 48px); line-height: 1.35; letter-spacing: .02em; margin-bottom: 24px; }
.empty .empty-eyebrow { color: var(--accent-strong); margin-bottom: 16px; }
.empty p { font-size: 16px; }
.field-input { resize: vertical; }
.transport-side { flex-wrap: wrap; }
.rate { font-size: 16px; }
.stage.is-tight .screen-bar { gap: 4px; }
@media (max-width: 700px) {
  .head { position: relative; }
  .head-actions { gap: 8px; }
  .stage.has-spot:not(.is-editing):not(.is-aligning) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage.has-spot:not(.is-editing):not(.is-aligning) .screen:not(.is-spot) .screen-title { display: none; }
  .stage.has-spot:not(.is-editing):not(.is-aligning) .screen:not(.is-spot) .screen-bar { justify-content: space-between; }
  .stage.has-spot:not(.is-editing):not(.is-aligning) .screen:not(.is-spot) .vol-range { width: 44px; }
  .transport-main { flex-basis: 100%; }
  .transport-side { width: 100%; justify-content: center; gap: 8px; }
  .transport-side .btn { padding-inline: 8px; }
  /* 狭い端末では案内も 1 行を丸ごと使う。**操作の邪魔をしない場所へ回す。**
     枠を外して背を詰める ── この帯が高くなったぶんは、そのまま映像の小ささになる */
  .credit {
    width: 100%;
    justify-content: center;
    min-height: 32px;
    padding: 0;
    border: 0;
  }
}

.columns-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-mid);
  font-size: 14px;
}
/* 多列を指定した狭い画面では、ページ全体ではなく動画一覧だけを横送りにする。 */
body:not(.is-fit) .stage.custom-columns {
  grid-template-columns: repeat(var(--cols), minmax(180px, 1fr));
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* Twitchの表示領域には操作や案内を重ねない。 */
/* **音量つまみは、Twitch が混じる一覧では「全画面」帯の中へ出す。**
   Twitch の札だけ出すと、その札の帯だけが高くなり（1920px で 56px 対 110px）、
   YouTube と Twitch とで映像の頭も「ずれ」の欄も段違いになる
   （2026-09-09 に本番で出た）。置き換えは `app.js` の `placeVolume()`。 */
.stage.has-twitch .screen-vol {
  position: static;
  opacity: 1 !important;
  margin-left: auto;
}

/* **帯を折り返させない。** 折り返すと 54px が丸ごと映像から削られる。
   折り返しは「入り切らない」ときに起きるので、題名の取り分
   （`flex-basis: 40%`）を 0 にして、余ったぶんだけ広がる形にする */
.stage.has-twitch .screen-bar .screen-title { flex-basis: 0; }
.screen-twitch .screen-waiting,
.screen-twitch .screen-hint {
  position: static;
  margin: 8px;
}

/* **Twitch の 400×300 は、飾りではなく再生の条件。**
   2026-09-09 に実測した ── 約 373×210 では、枠が画面に全部見えていても
   **PAUSED のまま一度も再生に入らない。** 400×300 を割らせない。
   **YouTube の札もこの大きさに合わせる**（映像の中に余白が出てよい）。
   合わせないと、同じ行に並べたときに映像の高さが揃わない。
   `app.js` の `planStage()` も、この 300px を織り込んで収まりを測る。 */
.stage.has-twitch .screen-video { min-height: 300px; }
/* 収まらないときは送る形になる。**そのとき幅を `1fr` で膨らませない。**
   膨らませると窓の半分（1440px で 702px）まで広がってページが 1262px になり、
   **固定の再生バーが映像の上に乗る**（2026-09-09 に本番で出た）。左右は余白でよい。 */
body:not(.is-fit) .stage.has-twitch {
  grid-template-columns: repeat(var(--cols), minmax(402px, 640px));
  justify-content: safe center;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}