:root{
  --bg:#0E1519; --panel:#152128; --panel2:#1B2A32; --line:#273B45;
  --ink:#E4EEF0; --ink2:#A9C0C7; --muted:#7A949D;
  --accent:#3FC3BE; --accent-dim:#1D4A50; --signal:#E6905F;
  --radius:8px;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --sans:"Hiragino Kaku Gothic ProN","Yu Gothic UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:14px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
h1,h2{margin:0; font-weight:700; line-height:1.35}
p{margin:0}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---------------- header ---------------- */
.head{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:14px 20px; border-bottom:1px solid var(--line); background:var(--panel);
}
.head__l{display:flex; align-items:center; gap:12px}
.head__r{display:flex; align-items:center; gap:10px}
.head h1{font-size:16px}
.tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--accent);
  border:1px solid var(--accent-dim); border-radius:99px; padding:2px 9px;
}
.badge{font-family:var(--mono); font-size:11px; padding:3px 10px; border-radius:99px; border:1px solid var(--line); color:var(--muted)}
.badge--ok{color:var(--accent); border-color:var(--accent-dim)}
.badge--warn{color:var(--signal); border-color:#4A3325}
.seg{display:flex; border:1px solid var(--line); border-radius:6px; overflow:hidden}
.seg button{
  background:transparent; border:0; color:var(--muted); font-size:12px;
  padding:5px 12px; cursor:pointer; min-height:32px;
}
.seg button.is-on{background:var(--accent-dim); color:var(--ink)}

/* ---------------- layout ---------------- */
.grid{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.85fr);
  gap:18px; padding:18px 20px 40px; align-items:start;
}
.col{display:flex; flex-direction:column; gap:12px; min-width:0}
.col--side{gap:12px; position:sticky; top:18px}
@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  .col--side{position:static}
}

/* ---------------- stage ---------------- */
.stage-wrap{width:100%}
.stage{
  position:relative; width:100%; aspect-ratio:16/9; background:#050B0D;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  /* 画面の中の文字は、画面（vw）ではなくステージ幅を基準にする。
     カードや丸枠は % で置いているので、文字だけ vw だと全画面で
     文字だけ取り残されて小さく見える。1cqw = ステージ幅の 1% */
  container-type:inline-size;
}
.vid{
  /* 資料は切り取ってはいけない。端に文字が入るので contain。
     ステージが 16:9 で素材も 16:9 なら見た目は変わらない */
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; pointer-events:none;
}
.vid.is-active{opacity:1}

.chrome{position:absolute; inset:0; pointer-events:none}
.chrome__top{position:absolute; top:10px; left:12px; display:flex; gap:6px; align-items:center}
.chip{
  font-family:var(--mono); font-size:max(11px, 1.22cqw); background:rgba(5,11,13,.72); color:var(--ink);
  border:1px solid rgba(255,255,255,.16); border-radius:99px; padding:2px 9px; backdrop-filter:blur(4px);
}
.chip--name{font-family:var(--sans); font-weight:700}

.presenter{position:absolute; z-index:3}
.presenter__av{
  width:100%; aspect-ratio:1; border-radius:50%; background:rgba(5,11,13,.6);
  border:2px solid rgba(255,255,255,.75); display:grid; place-items:center;
  font-weight:700; font-size:max(14px, 2.67cqw); color:#fff; backdrop-filter:blur(2px);
}

/* 担当者の名札（部署・役職 / 氏名）。
 *
 * テレビの下部テロップと同じ考えで、シーンの頭で数秒だけ出して消す。
 * 誰が話しているかは最初に分かればよく、出しっぱなしにすると資料と
 * カードの邪魔になる。丸枠のあたりに指やカーソルが来れば出し直す。
 *
 * 丸枠の外に出てよい代わりに幅を 28cqw で止め、各行は 1 行で切る。
 * 長い部署名で名札が画面を横切るのを防ぐため。
 */
.presenter__id{
  position:absolute; left:50%; transform:translateX(-50%);
  top:calc(100% + 6px);
  display:flex; flex-direction:column; align-items:center; gap:1px;
  max-width:28cqw; padding:3px 9px; border-radius:8px;
  background:rgba(5,11,13,.72); backdrop-filter:blur(4px);
  text-align:center; pointer-events:none;
  transition:opacity .45s ease;
}
/* 丸枠を下寄せに置いたときは、名札を丸枠の上へ回す */
.presenter--above .presenter__id{top:auto; bottom:calc(100% + 6px)}
.presenter__id[hidden]{display:none}
.presenter__id.is-dim{opacity:0}
.presenter__role{
  font-size:max(9.5px, 1.0cqw); line-height:1.4; color:rgba(228,238,240,.66);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.presenter__role:empty{display:none}
.presenter__nm{
  font-size:max(11.5px, 1.28cqw); line-height:1.4; font-weight:700; color:#fff;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.presenter__nm:empty{display:none}
@media (prefers-reduced-motion:reduce){ .presenter__id{transition:none} }

/* 狭い画面では丸枠自体が小さい。2 行だと潰れるので氏名だけ残す */
@container (max-width: 699px){
  .presenter__role{display:none}
  .presenter__id{padding:2px 7px}
}

/* 旧い静的な字幕。ナレーション字幕を入れたシーンでは文字が入らないが、
   空でも背景と余白だけが黒い箱として残っていた */
.caption:empty{display:none}
.caption{
  position:absolute; left:3%; bottom:30%; max-width:46%;
  background:rgba(5,11,13,.74); border-radius:6px; padding:8px 11px;
  font-size:max(12px, 1.55cqw); line-height:1.6; backdrop-filter:blur(4px);
}

/* ---------------- overlay elements ---------------- */
.overlay{position:absolute; inset:0; pointer-events:none}
.ov{
  position:absolute; pointer-events:auto; display:flex; align-items:center; gap:8px;
  min-height:44px; /* タッチターゲットの下限 */
  border-radius:6px; cursor:pointer; text-align:left; text-decoration:none;
  /* 出方はシーンごとに切り替える（下の .ov-in--*）。既定は「順番に出る」 */
  animation:pop .22s ease both;
  animation-delay:var(--ov-delay, 0ms);
}
@keyframes pop{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

/* ---------------- カードの出方（3 種類）----------------
   **3 つしか用意しない。** 資料アニメーションで「動きの種類を増やすと
   落ち着かなくなる」と決めた方針に揃えている。

   ずらす時間は JS が --ov-delay に入れる（cards.js の delayFor）。
   **枚数が増えても頭打ち**にしてあるので、5 枚でも最後は 0.48 秒後に出る。 */

/* 順番に出る（既定）。1 枚ずつずれることで「選ぶもの」だと伝わる */
.ov-in--stagger .ov{animation-name:pop}

/* 迫り上がる。決めどころ用。下から大きめに動く */
.ov-in--rise .ov{animation:ovRise .3s cubic-bezier(.2,.9,.3,1) both; animation-delay:var(--ov-delay,0ms)}
@keyframes ovRise{
  from{opacity:0; transform:translateY(18px) scale(.96)}
  to{opacity:1; transform:none}
}

/* そっと出る。資料を邪魔したくないとき。**位置を動かさない** */
.ov-in--fade .ov{animation:ovFade .34s ease both; animation-delay:var(--ov-delay,0ms)}
@keyframes ovFade{from{opacity:0}to{opacity:1}}

/* ---------------- 押した手ごたえ ----------------
   押したカードだけが残り、他が引く。**逆にすると、自分が選んだものが
   画面から消えてしまう。** 0.25 秒で次のシーンへ移る（cards.js の CHOSEN_MS）。 */
.ov.is-chosen{
  animation:none;
  transform:translateY(1px) scale(.985);
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(63,195,190,.45), 0 6px 18px rgba(0,0,0,.35);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ov.is-dropped{
  animation:none;
  opacity:0; transform:translateY(6px) scale(.97);
  transition:opacity .22s ease, transform .22s ease;
}
/* 押したあとは、見た目が変わるだけで押せなくする（二度押し防止は JS 側） */
.ov[disabled]{cursor:default}

/* ---------------- 選んだ言葉を、次のシーンの頭に出す ----------------
   **横型だけ。** 縦型は字幕・反応ボタン・カードで下が埋まっており、
   ここに足すと 3 段になって映像が隠れる。 */
.ov-echo{
  position:absolute; left:2.2cqw; top:2.2cqw; z-index:6; pointer-events:none;
  display:inline-flex; align-items:center; gap:6px;
  padding:.5cqw .9cqw; border-radius:999px;
  background:rgba(9,18,21,.78); backdrop-filter:blur(6px);
  border:1px solid rgba(63,195,190,.5);
  color:var(--ink); font-size:max(10.5px, 1.15cqw); font-weight:700;
  animation:ovEcho 1.5s ease both;
}
.ov-echo::before{content:"↳"; color:var(--accent); font-weight:400}
@keyframes ovEcho{
  0%{opacity:0; transform:translateY(-4px)}
  12%,72%{opacity:1; transform:none}
  100%{opacity:0; transform:translateY(-4px)}
}

/* ---------------- 質問カードの上に出す一言 ----------------
   **なぜ聞かれているのかが分からないと押されない。** */
.ov-qlead{
  grid-column:1/-1; margin:0 0 .5cqw;
  color:var(--ink2); font-size:max(10.5px, 1.15cqw); font-weight:600;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}

/* 動きを減らす設定の人には、出方も手ごたえも出さない。
   **消すのは動きだけで、見え方（何を選んだか）は残す。** */
@media (prefers-reduced-motion:reduce){
  .ov, .ov-in--rise .ov, .ov-in--fade .ov{animation:none}
  .ov.is-chosen{transition:none}
  .ov.is-dropped{transition:none; opacity:0}
  .ov-echo{animation:none}
}

.ov--choice{
  background:rgba(9,18,21,.82); color:var(--ink); border:1px solid rgba(63,195,190,.55);
  padding:0.9cqw 1.1cqw; font-size:max(11.5px, 1.5cqw); font-weight:700; backdrop-filter:blur(6px);
}
.ov--choice:hover{background:rgba(29,74,80,.92); border-color:var(--accent)}
.ov__key{
  flex:0 0 auto; font-family:var(--mono); font-size:max(10px, 1.1cqw); color:var(--accent);
  border:1px solid var(--accent-dim); border-radius:4px; padding:0 5px;
}
.ov__label{flex:1 1 auto; line-height:1.35}

.ov--linkcard{
  flex-direction:column; align-items:flex-start; justify-content:center; gap:2px;
  background:var(--signal); color:#1B0F07; border:0; padding:10px 14px;
}
.ov__title{font-weight:700; font-size:max(12px, 1.67cqw)}
.ov__sub{font-size:max(10px, 1.33cqw); opacity:.85}

.countdown{
  position:absolute; left:3%; bottom:21%; font-family:var(--mono); font-size:max(12px, 1.33cqw);
  color:var(--signal); background:rgba(5,11,13,.8); padding:3px 9px; border-radius:99px;
}

/* ---------------- 視聴者向けの操作バー ---------------- */
.ctrl{
  position:absolute; left:0; right:0; bottom:0; pointer-events:auto;
  display:flex; align-items:center; gap:8px; padding:8px 12px 9px;
  background:linear-gradient(to top, rgba(3,8,10,.88), rgba(3,8,10,0));
}
.ctrl__btn{
  flex:0 0 auto; width:32px; height:32px; display:grid; place-items:center;
  background:none; border:0; color:#fff; cursor:pointer; border-radius:6px; padding:0;
}
.ctrl__btn:hover{background:rgba(255,255,255,.14)}
.ctrl__btn svg{width:19px; height:19px; fill:currentColor}
.ctrl__btn[hidden]{display:none}

.ctrl__t{
  flex:0 0 auto; font-family:var(--mono); font-size:11.5px; color:#fff;
  font-variant-numeric:tabular-nums; min-width:3.1em;
}
.ctrl__t--dur{color:rgba(255,255,255,.62); text-align:right}

.ctrl__seek{
  position:relative; flex:1 1 auto; height:26px; cursor:pointer;
  display:flex; align-items:center; touch-action:none;
}
.ctrl__track,.ctrl__fill{
  position:absolute; left:0; height:4px; border-radius:99px; pointer-events:none;
  transition:height .12s ease;
}
.ctrl__track{right:0; background:rgba(255,255,255,.26)}
.ctrl__fill{width:0; background:var(--accent)}
.ctrl__seek:hover .ctrl__track,.ctrl__seek:hover .ctrl__fill,
.ctrl__seek.is-dragging .ctrl__track,.ctrl__seek.is-dragging .ctrl__fill{height:6px}
.ctrl__marks{position:absolute; inset:0; pointer-events:none}
.ctrl__knob{
  position:absolute; left:0; top:50%; width:12px; height:12px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.35); pointer-events:none;
  /* left は毎フレーム変わるので、変形はレイアウトを起こさない transform で行う */
  transform:translate(-50%,-50%); transition:width .12s ease, height .12s ease;
  will-change:left;
}
.ctrl__seek:hover .ctrl__knob,.ctrl__seek.is-dragging .ctrl__knob{width:15px; height:15px}
.ctrl__seek:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

/* 分岐ポイントの印 */
.mark{
  position:absolute; top:50%; width:3px; height:13px; transform:translate(-50%,-50%);
  background:var(--signal); border-radius:2px; box-shadow:0 0 0 1px rgba(3,8,10,.6);
}
.mark__zone{
  position:absolute; top:50%; height:4px; margin-top:-2px; border-radius:99px;
  background:rgba(230,144,95,.4);
}

/* ---------------- gate ---------------- */
.gate{
  position:absolute; inset:0; z-index:5;
  /* ポスターを敷くので、幕そのものは色を持たない。
     暗さは ::after の暗幕で作る（画像が無いときも同じ濃さに見えるよう、
     .stage の地の色がそのまま透ける） */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
/* display 指定は hidden 属性より強いので、明示的に打ち消す */
.gate[hidden]{display:none}

/* 最初のコマ。動画と同じ contain で置く。
   cover にすると、一覧のサムネイルや再生後の見え方と食い違う */
.gate__poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  z-index:0; pointer-events:none;
  /* わずかにぼかす。**資料のスライドが最初のコマだと、その見出しや箇条書きが
     こちらの文字と正面からぶつかる。** 少し奥へ退かせると、色と構図（人が写って
     いるか、資料か）は残したまま、読むべき文字が 1 つに絞れる */
  filter:blur(2.5px) saturate(.92);
  transform:scale(1.03);   /* ぼかしの端に出る透明な縁を隠す */
}
/* 暗幕。真ん中を濃くして、ボタンまわりの文字を確実に読ませる。
   一様に暗くすると、読みやすくするほどポスターが黒く潰れていく */
.gate::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 78% 62% at 50% 48%,
    rgba(5,11,13,.9) 0%, rgba(5,11,13,.82) 45%, rgba(5,11,13,.66) 100%);
}
/* 再生前は、動画の上物を出さない。
   以前の幕は一様に濃く（.9＋ぼかし）、結果として操作バーも丸枠も隠していた。
   ポスターを見せるために幕を薄くしたので、**0:00 のままの操作バーや
   まだ始まっていない丸枠が透けて見える**ようになった。
   display ではなく visibility なのは、chrome の大きさを測る処理
   （syncChromeBox）が 0 を掴まないようにするため */
.stage:has(> .gate:not([hidden])) .chrome{visibility:hidden}

.gate__mid{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:14px; padding:0 16px;
}
.gate__msg{font-family:var(--mono); font-size:12.5px; color:var(--ink2); text-align:center; padding:0 20px}
.gate__msg:empty{display:none}

/* 押す理由。ボタンより先に読まれる位置に置くので、
   ボタンと張り合わない明るさにしておく */
.gate__lead{
  margin:0; text-align:center; color:var(--ink);
  font-size:max(14px, 1.75cqw); font-weight:700; line-height:1.6;
  text-shadow:0 1px 10px rgba(5,11,13,.9);
}
.gate__btn{
  background:var(--accent); color:#06181A; border:0; border-radius:99px;
  font-size:16px; font-weight:700; padding:13px 32px; min-height:48px; cursor:pointer;
}

/* 「最初から見る」。**続きがあるときだけ**こちらが控えめになる。
   主役は「続きから」。ただし消さない（前回どこで止めたか覚えていない人が困る） */
.gate__btn--sub{
  background:transparent; color:var(--ink2);
  border:1px solid var(--line); font-weight:normal; margin-top:8px;
}
.gate__btn--sub:hover{color:var(--ink); border-color:var(--accent-line)}
.gate__mute{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; cursor:pointer}

/* 作り手。隅に置き、押す邪魔をしない明るさに落とす */
.gate__mark{
  position:absolute; right:12px; bottom:10px; z-index:2; margin:0;
  display:flex; align-items:baseline; gap:7px;
  font-size:10.5px; color:rgba(169,192,199,.5); letter-spacing:.02em; white-space:nowrap;
}
.gate__mark b{
  font-family:var(--mono); font-weight:700; letter-spacing:.1em;
  color:rgba(169,192,199,.72);
}
/* 狭いと隅の一文はただの邪魔になる。名前だけ残す。
   .stage は container なので、画面幅ではなく枠の幅で決まる */
@container (max-width: 520px){
  .gate__mark span{display:none}
  /* 構成の説明も落とす。狭い画面では断り書きだけで 2 行になり、
     **折り返した 2 行目が隅の名前とぶつかる。**
     「選んで見られます」は上の一行が既に伝えているので、ここは省いてよい */
  .gate__meta{display:none}
  /* 断り書きが隅の名前の下に潜り込まないよう、その分だけ空ける */
  .gate__mid{padding-bottom:24px}
}

/* ---------------- controls ---------------- */
.bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.btn{
  background:var(--panel2); color:var(--ink); border:1px solid var(--line);
  border-radius:6px; padding:7px 14px; font-size:12.5px; min-height:36px; cursor:pointer;
}
.btn:hover{border-color:var(--accent-dim)}
.hint{font-size:12px; color:var(--muted)}
.note{
  font-size:12.5px; color:var(--ink2); line-height:1.8;
  background:rgba(230,144,95,.09); border-left:2px solid var(--signal);
  padding:11px 14px; border-radius:0 6px 6px 0;
}
.note code{font-family:var(--mono); font-size:.92em; background:rgba(255,255,255,.06); padding:1px 5px; border-radius:4px}

/* ---------------- panels ---------------- */
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; display:flex; flex-direction:column; gap:9px;
}
.panel h2{font-size:13.5px}
.panel__sub{font-size:11.5px; color:var(--muted); line-height:1.6}
.list{display:flex; flex-direction:column; gap:6px}

.stats{display:flex; gap:8px}
.stat{
  flex:1; background:var(--panel2); border:1px solid var(--line); border-radius:6px;
  padding:8px 11px; display:flex; flex-direction:column; gap:1px;
}
.stat__k{font-size:11px; color:var(--muted)}
.stat__v{font-family:var(--mono); font-size:17px; font-weight:500; font-variant-numeric:tabular-nums}

.lat{display:grid; grid-template-columns:1fr auto auto; gap:9px; align-items:center; font-size:12px}
.lat__name{color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lat__hit{font-family:var(--mono); font-size:10px; padding:1px 6px; border-radius:99px; border:1px solid var(--line)}
.lat__hit.is-hit{color:var(--accent); border-color:var(--accent-dim)}
.lat__hit.is-miss{color:var(--signal); border-color:#4A3325}
.lat__ms{font-family:var(--mono); font-variant-numeric:tabular-nums; min-width:4.5em; text-align:right}

.score{display:grid; grid-template-columns:4.5em 1fr 2em; gap:8px; align-items:center; font-size:12.5px}
.score__track{height:5px; background:var(--line); border-radius:99px; overflow:hidden}
.score__fill{display:block; height:100%; background:var(--accent); border-radius:99px}
.score__fill.is-top{background:var(--signal)}
.score__v{font-family:var(--mono); font-size:11px; color:var(--muted); text-align:right}

.panel--grow .log{
  display:flex; flex-direction:column; gap:5px; max-height:270px; overflow-y:auto;
  font-family:var(--mono); font-size:11.5px; line-height:1.55; color:var(--ink2);
}
.logline{display:flex; gap:9px}
.logline__t{color:var(--muted); flex:0 0 auto; font-variant-numeric:tabular-nums}
.logline__hot{color:var(--signal)}
.logline__err{color:#FF8A80; font-weight:500}
.lat__note{font-family:var(--mono); font-size:9.5px; color:var(--muted); margin-left:6px}

.mock{position:absolute; inset:0; width:100%; height:100%; display:block}
.mock[hidden]{display:none}

/* ---------------- 狭い画面での選択肢（スマホ） ---------------- */
.overlay.is-stacked{
  display:flex; flex-direction:column; justify-content:flex-end;
  gap:6px; padding:0 3% 48px;
}
.overlay.is-stacked .ov{position:static; width:100%; animation:none}
.overlay.is-stacked .ov--choice{font-size:13px; padding:10px 12px}
.overlay.is-stacked .ov--linkcard{font-size:13px}
/* 選択肢が出ている間、狭い画面では字幕を隠して重なりを防ぐ */
.stage.has-overlay .overlay.is-stacked ~ .caption,
.stage.has-overlay .caption:has(~ .overlay.is-stacked){display:none}
.stage.has-overlay .overlay.is-stacked ~ .countdown,
.stage.has-overlay .countdown:has(~ .overlay.is-stacked){bottom:auto; top:34px}

/* 全画面。
   画面いっぱいに広げると、画面の縦横比が 16:9 でない環境（3:2 や 16:10 の
   ノート PC など）で資料の左右が切れる。ステージは 16:9 のまま中央に置き、
   余った分は黒で埋める。カードや丸枠の座標はステージ基準なので、
   これで全部そのまま合う */
#stage:fullscreen{
  aspect-ratio:auto; border:0; border-radius:0;
  width:min(100vw, calc(100vh * 16 / 9));
  height:min(100vh, calc(100vw * 9 / 16));
  inset:0; margin:auto;
}
#stage:fullscreen::backdrop{background:#000}
#stage:fullscreen .ctrl{padding:14px 20px 18px}

/* ---------------- 営業ナレーション層（丸枠） ---------------- */
.narr{
  position:absolute; aspect-ratio:1; border-radius:50%; overflow:hidden;
  border:2px solid rgba(255,255,255,.8);
  background:#050B0D; z-index:2;
  /* 話している音量。player.js が 0〜1 を入れる。
     円そのものは動かさず、外側の光だけを広げる。
     box-shadow なので再レイアウトが起きず、カードや字幕の位置に影響しない */
  --lvl:0;
  box-shadow:
    0 4px 18px -6px rgba(0,0,0,.7),
    0 0 0 calc(var(--lvl) * 11px) rgba(63,195,190,.42),
    0 0 calc(var(--lvl) * 30px) calc(var(--lvl) * 5px) rgba(63,195,190,.3);
}
/* 視差効果を減らす設定の人には光らせない */
@media (prefers-reduced-motion:reduce){
  .narr{box-shadow:0 4px 18px -6px rgba(0,0,0,.7)}
}
.narr[hidden]{display:none}
.narr__vid{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; pointer-events:none;
}
.narr__vid.is-active{opacity:1}

/* ---------------- 視聴ページ（配信先が開く画面） ---------------- */
body.viewer{
  background:#050B0D; display:grid; place-items:center; min-height:100vh; padding:16px;
}
/* 上限は素材の実寸（1920px）まで。**それを超えると引き伸ばしになる。**
   高さからも抑えるので、縦の短い画面でははみ出さない。
   もとは 960px 固定で、1440x900 の画面でも高さの 60% しか使っていなかった。
   営業動画は見せるものなので、大きいほうが伝わる。 */
body.viewer .stage-wrap{width:100%; max-width:min(1920px, calc((100vh - 32px) * 16 / 9))}
body.viewer .stage{border-radius:10px}

/* ---------------- サイトに埋め込まれたとき ----------------
   枠（iframe）の大きさは相手のページが決める。こちらが余白や上限幅を
   持つと、**枠の中でさらに小さくなって二重の額縁になる**ので、全部外す。
   角も丸めない。丸めるのは相手のページの仕事 */
body.viewer--embed{padding:0; background:#050B0D}
body.viewer--embed .stage-wrap{max-width:none}
body.viewer--embed .stage{border-radius:0}


/* ---------------- 狭い画面: 選択肢を動画の下に置く ---------------- */
.overlay-below{
  display:flex; flex-direction:column; gap:8px; padding:10px 0 0;
}
.overlay-below:empty{display:none}

/* 横向きのおすすめ。
   **動画の下の余っている場所**に置く。横型をスマホの縦持ちで見ると
   画面の 4 割が黒いまま余るので、そこを案内に使う。
   絵にも字幕にもカードにもかからないので、出ても何かが隠れることはない。
   出し入れは player.js が決める（横に倒す・閉じるで消える）。 */
/* 「社内で共有したい」を押したあとの受け皿。
   **動画の下の余っている場所**に出すので、絵にも字幕にもかからない */
.fwd{
  position:relative; margin:12px 12px 0; padding:12px 34px 12px 12px;
  border:1px solid var(--accent-dim); border-radius:8px;
  background:rgba(63,195,190,.06); color:var(--ink);
}
.fwd[hidden]{display:none}
.fwd__lead{margin:0 0 8px; font-size:13px}
.fwd__row{display:flex; gap:8px}
.fwd__url{
  flex:1 1 auto; min-width:0; padding:8px 10px; font-size:12px;
  border:1px solid var(--line); border-radius:6px;
  background:var(--bg); color:var(--ink2); font-family:inherit;
}
.fwd__copy{
  flex:0 0 auto; padding:8px 14px; border:0; border-radius:6px; cursor:pointer;
  background:var(--accent); color:var(--bg); font-weight:bold; font-family:inherit; font-size:13px;
}
.fwd__note{margin:8px 0 0; font-size:11.5px; color:var(--muted); line-height:1.5}
.fwd__x{
  position:absolute; top:6px; right:6px; width:26px; height:26px;
  background:none; border:0; color:var(--muted); font-size:15px; cursor:pointer; border-radius:5px;
}
.fwd__x:hover{color:var(--ink); background:rgba(255,255,255,.06)}

/* ================= 映像の中を直接押させる札（透明カード） =================
   **当たり判定と目印を分ける。** 押せる範囲は広く透明に、見えるものは小さく。
   完全に透明にすると押せることが伝わらず、全員が既定の枝へ流れる。
   動きは弱くする。強い点滅は広告に見え、営業資料の品位を損なう。 */
.ov--hotspot{
  position:absolute; padding:0; border:0; background:transparent;
  cursor:pointer; border-radius:8px; min-width:44px; min-height:44px;  /* 指で押せる最小 */
}
.ov--hotspot .hot__mark{position:absolute; inset:0; pointer-events:none}
/* キーボードで辿れることを見えるようにする（透明でも迷子にしない） */
.ov--hotspot:focus-visible{outline:3px solid var(--accent); outline-offset:3px}

/* ① 脈打つ丸。中心で静かに拡がって消える */
.ov--hint-pulse .hot__mark::before,
.ov--hint-pulse .hot__mark::after{
  content:""; position:absolute; left:50%; top:50%; width:18px; height:18px;
  margin:-9px 0 0 -9px; border-radius:50%; border:2px solid var(--accent);
  animation:hotPulse 2.4s ease-out infinite;
}
.ov--hint-pulse .hot__mark::after{animation-delay:1.2s}
@keyframes hotPulse{
  0%{transform:scale(.6); opacity:.9}
  70%{opacity:.25}
  100%{transform:scale(2.6); opacity:0}
}

/* ② 角の括弧。対象を四隅で囲む。絵をいちばん隠さない */
.ov--hint-bracket .hot__mark::before,
.ov--hint-bracket .hot__mark::after{
  content:""; position:absolute; width:20px; height:20px; border:2px solid var(--accent);
  animation:hotBreathe 2.6s ease-in-out infinite;
}
.ov--hint-bracket .hot__mark::before{left:0; top:0; border-right:0; border-bottom:0; border-radius:6px 0 0 0}
.ov--hint-bracket .hot__mark::after{right:0; bottom:0; border-left:0; border-top:0; border-radius:0 0 6px 0}
@keyframes hotBreathe{0%,100%{opacity:.45} 50%{opacity:1}}

/* ③ 薄い縁。広い範囲を指すとき */
.ov--hint-edge .hot__mark{
  border:2px solid var(--accent); border-radius:8px;
  background:rgba(63,195,190,.06);
  animation:hotBreathe 2.6s ease-in-out infinite;
}

/* ④ 番号。複数を同時に示すとき、順番が要るなら */
.ov--hint-number .hot__n{
  position:absolute; left:8px; top:8px; width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--accent); color:var(--bg);
  font-size:14px; font-weight:700; pointer-events:none;
}
.ov--hint-number .hot__mark{border:2px dashed var(--accent-line); border-radius:8px; opacity:.7}

/* 押せることを、近づいたときにもう一段はっきりさせる */
.ov--hotspot:hover .hot__mark{filter:brightness(1.35)}

/* **動きを減らす設定の人には動かさない。** 止めても見え方は残す */
@media (prefers-reduced-motion:reduce){
  .ov--hint-pulse .hot__mark::before,
  .ov--hint-pulse .hot__mark::after,
  .ov--hint-bracket .hot__mark::before,
  .ov--hint-bracket .hot__mark::after,
  .ov--hint-edge .hot__mark{animation:none; opacity:.8}
}

/* 気づかなかった人へ出す選択肢。**静かに現れる**（急に出ると驚かせる） */
.overlay-below.is-rescue .ov{animation:hotRescue .45s ease-out both}
@keyframes hotRescue{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.rotate{
  display:flex; align-items:center; gap:8px;
  margin:14px 12px 0; padding:9px 10px 9px 12px;
  border:1px solid var(--line); border-radius:8px;
  background:rgba(255,255,255,.03); color:var(--ink2);
  font-size:13px; line-height:1.4;
}
.rotate[hidden]{display:none}
.rotate__ico{display:flex; color:var(--accent); flex:0 0 auto}
.rotate__txt{flex:1 1 auto; min-width:0}
.rotate__x{
  flex:0 0 auto; width:30px; height:30px; margin:-6px -4px -6px 0;
  background:none; border:0; color:var(--muted);
  font-size:17px; line-height:1; cursor:pointer; border-radius:6px;
}
.rotate__x:hover{color:var(--ink); background:rgba(255,255,255,.06)}

.overlay-below .ov{
  position:static; width:100%; min-height:48px; animation:none;
  font-size:14px; padding:12px 14px;
}
.overlay-below .ov--choice{
  background:var(--panel); border:1px solid var(--accent-line); backdrop-filter:none;
}
.overlay-below .ov--choice:hover{background:var(--accent-dim)}
.overlay-below .ov--linkcard{background:var(--signal); color:#1B0F07}

/* 丸枠を出さないシーン。再生は続けるので display:none にはしない */
.narr.is-hidden{opacity:0; pointer-events:none}

/* ---------------- 目次 ---------------- */
/* ボタンはシーン名チップの並びに置く。新しい場所を奪わずに済む */
.chrome__top{pointer-events:none}
.chip--index{
  pointer-events:auto; display:inline-flex; align-items:center; gap:5px;
  cursor:pointer; font-family:var(--sans); font-weight:700;
  border-color:rgba(63,195,190,.55); color:var(--accent);
  transition:opacity .5s ease, background .15s ease, border-color .15s ease;
}
.chip--index svg{width:11px; height:11px}
.chip--index:hover,.chip--index:focus-visible{background:rgba(29,74,80,.92); border-color:var(--accent)}
.chip--index[hidden]{display:none}
/* 数秒で薄くなる。見ている間ずっと視界に居座らせない */
.chrome__top.is-dim .chip--index{opacity:.28}
.chrome__top.is-dim .chip--index:hover,
.chrome__top.is-dim .chip--index:focus-visible{opacity:1}

.toc{
  position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center;
  background:rgba(3,8,10,.78); backdrop-filter:blur(5px); padding:4% 4% 9%;
  pointer-events:auto; animation:tocIn .16s ease both;
}
.toc[hidden]{display:none}
@keyframes tocIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.toc{animation:none}}

.toc__box{
  width:min(560px,100%); max-height:100%; display:flex; flex-direction:column;
  background:var(--panel,#152128); border:1px solid rgba(255,255,255,.13); border-radius:10px;
  overflow:hidden; box-shadow:0 24px 60px -20px rgba(0,0,0,.9);
}
.toc__head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.1); flex:0 0 auto;
}
.toc__ttl{font-weight:700; font-size:max(13.5px, 1.5cqw)}
.toc__x{
  background:none; border:0; color:var(--muted,#7A949D); font-family:inherit; font-size:12px;
  cursor:pointer; padding:4px 6px; border-radius:5px;
}
.toc__x:hover{color:var(--ink,#E4EEF0); background:rgba(255,255,255,.08)}
.toc__list{overflow-y:auto; flex:1 1 auto; -webkit-overflow-scrolling:touch}
.toc__foot{
  margin:0; padding:9px 14px; border-top:1px solid rgba(255,255,255,.1);
  font-size:11px; color:var(--muted,#7A949D); flex:0 0 auto;
}

.toc__row{
  display:grid; grid-template-columns:64px 1fr auto; gap:12px; align-items:center; width:100%;
  padding:8px 14px; background:none; border:0; border-bottom:1px solid rgba(255,255,255,.07);
  color:var(--ink,#E4EEF0); font-family:inherit; text-align:left; cursor:pointer;
  min-height:56px; /* タッチターゲット */
}
.toc__row:last-child{border-bottom:none}
.toc__row:hover,.toc__row:focus-visible{background:rgba(63,195,190,.1)}
.toc__row[disabled]{cursor:default}
.toc__row.is-here{background:rgba(63,195,190,.14)}
.toc__row.is-here .toc__nm{color:var(--accent)}
.toc__row.is-seen .toc__nm{color:var(--muted,#7A949D); font-weight:400}
.toc__th{
  width:64px; aspect-ratio:16/9; border-radius:4px; overflow:hidden; background:#000;
  border:1px solid rgba(255,255,255,.12);
}
.toc__th img{width:100%; height:100%; object-fit:cover; display:block}
.toc__nm{font-weight:700; font-size:max(13.5px, 1.5cqw); line-height:1.4}
.toc__meta{font-family:var(--mono); font-size:max(10.5px, 1.17cqw); color:var(--muted,#7A949D); white-space:nowrap}

/* 縦画面では下から出るシートにする。選択肢を下に置くのと同じ考え方。
   縦持ちだと 16:9 の動画は高さ 200px ほどしかなく、その中に収めると
   一覧が 2 行しか見えない。画面いっぱいまで使えるよう fixed にする */
@media (max-aspect-ratio:1/1){
  .toc{position:fixed; inset:0; align-items:flex-end; padding:0; z-index:60}
  .toc__box{width:100%; max-height:74vh; border-radius:12px 12px 0 0; border-bottom:0}
  .toc__list{max-height:none}
}

/* ---------------- ナレーション字幕 ---------------- */
/* 縁取りではなく半透明の帯。資料の細い罫線と干渉させない */
.cap{
  position:absolute; left:14%; right:14%; bottom:12%;
  display:flex; justify-content:center; pointer-events:none; z-index:3;
}
.cap[hidden]{display:none}
.cap span{
  background:rgba(3,8,10,.82); color:#F2F7F8; border-radius:6px;
  padding:6px 14px; text-align:center; line-height:1.55;
  font-size:max(13px, 1.9cqw); font-weight:500;
  backdrop-filter:blur(4px); max-width:100%;
  /* 2 行を超えると視線が資料から離れすぎる */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
/* 字幕は操作バーのすぐ上に固定する。位置は player.js が実寸で入れる。
   ここは JS が動く前の初期値 */
@media (prefers-reduced-motion:reduce){.cap{transition:none}}

.ctrl__btn--cc[aria-pressed="true"]{color:var(--accent)}
.ctrl__btn--cc[aria-pressed="true"] rect{fill:rgba(63,195,190,.16)}

/* 狭い画面では動画の下へ出す。重ねると資料がほぼ隠れる。
   .stage は overflow:hidden なので、受け皿はその外側（#capBelow）に置く */
.cap-below{padding:10px 12px 0; display:flex; justify-content:center}
.cap-below[hidden]{display:none}
.cap-below span{
  background:rgba(3,8,10,.6); color:#F2F7F8; border-radius:6px;
  padding:8px 14px; text-align:center; line-height:1.65; font-size:14px; font-weight:500;
  width:100%; min-height:3.3em;
}

/* ---------------- 資料カード ---------------- */
.ov--document{
  background:rgba(9,18,21,.86); color:var(--ink); border:1px solid rgba(169,192,199,.45);
  padding:0.9cqw 1.2cqw; font-size:max(11.5px, 1.5cqw); font-weight:700; backdrop-filter:blur(6px);
}
.ov--document:hover{border-color:rgba(169,192,199,.85); background:rgba(26,42,49,.92)}
.ov__ic{flex:0 0 auto; font-size:max(15px, 1.67cqw); color:var(--ink2); line-height:1}
.ov__meta{
  flex:0 0 auto; margin-left:auto; font-family:var(--mono); font-size:max(10px, 1.1cqw);
  color:var(--muted); font-weight:400;
}

/* ---------------- 質問カード ---------------- */
/* 押しても進まない。押したことが分かるように見た目を変える */
.ov--question{
  background:rgba(9,18,21,.86); color:var(--signal);
  border:1px dashed rgba(230,144,95,.7);
  padding:0.9cqw 1.1cqw; font-size:max(11.5px, 1.5cqw); font-weight:700; backdrop-filter:blur(6px);
}
.ov--question .ov__key{color:var(--signal); border-color:rgba(230,144,95,.45)}
.ov--question:hover{background:rgba(44,30,23,.92); border-color:var(--signal)}
.ov--question.is-picked{
  background:var(--signal); color:#1B0F07; border-style:solid; border-color:transparent;
}
.ov--question.is-picked .ov__key{color:#1B0F07; border-color:rgba(27,15,7,.35)}
.ov--question.is-dimmed{opacity:.4}

.ov-thanks{
  position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%);
  background:rgba(3,8,10,.9); color:var(--ink); border-radius:99px; padding:3px 11px;
  font-size:11px; font-weight:400; white-space:nowrap; pointer-events:none;
  animation:thanks 1.6s ease both;
}
@keyframes thanks{
  0%{opacity:0; transform:translate(-50%,4px)}
  12%,72%{opacity:1; transform:translate(-50%,0)}
  100%{opacity:0; transform:translate(-50%,-3px)}
}
@media (prefers-reduced-motion:reduce){.ov-thanks{animation:none}}

/* ---------------- 視聴者のリアクション ---------------- */
.ctrl__btn--rx[hidden]{display:none}
.ctrl__btn--rx svg{fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round}
.ctrl__btn--rx[aria-expanded="true"]{background:rgba(255,255,255,.16)}
.ctrl__btn--rx.is-done{color:var(--accent)}

/* 操作バーのすぐ上に開く。カードの帯（下 24%）には掛からない */
.rxbar{
  position:absolute; left:3%; right:3%; bottom:12%; z-index:4;
  transition:bottom .28s cubic-bezier(.4,0,.2,1);
  display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;
  pointer-events:auto; animation:rxIn .16s ease both;
}
.rxbar[hidden]{display:none}
/* 位置は player.js が字幕とカードを見て決める */
@media (prefers-reduced-motion:reduce){.rxbar{transition:none}}
@keyframes rxIn{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.rxbar{animation:none}}

.rx{
  display:inline-flex; align-items:center; gap:6px; border-radius:99px;
  padding:0.7cqw 1.2cqw 0.7cqw 1cqw; font-size:max(11.5px, 1.4cqw); font-weight:700;
  font-family:var(--sans); cursor:pointer; white-space:nowrap;
  background:rgba(9,18,21,.92); color:#C7D6DA; border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(6px); min-height:38px;
}
.rx svg{width:1.35em; height:1.35em; flex:0 0 auto; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.rx--pos{border-color:rgba(63,195,190,.5); color:#7FE0DA}
.rx--neg{border-color:rgba(230,144,95,.5); color:#E6A47F}
.rx--pos:hover,.rx--pos.is-on{background:rgba(29,74,80,.92); border-color:var(--accent); color:#BFF0EC}
.rx--neg:hover,.rx--neg.is-on{background:rgba(58,34,20,.92); border-color:var(--signal); color:#F5CDB3}
.rx.is-on{box-shadow:0 0 0 2px rgba(255,255,255,.14)}

.rxthanks{
  position:absolute; left:0; right:0; bottom:20%; z-index:5; text-align:center;
  pointer-events:none; font-size:max(12px, 1.5cqw); font-weight:700; color:#BFF0EC;
  animation:rxThx 1.5s ease both;
}
.rxthanks[hidden]{display:none}
@keyframes rxThx{
  0%{opacity:0; transform:translateY(8px)}
  18%{opacity:1; transform:none}
  75%{opacity:1}
  100%{opacity:0; transform:translateY(-6px)}
}
@media (prefers-reduced-motion:reduce){.rxthanks{animation:none}}

/* 狭い画面では文字を優先。アイコンだけには切り詰めない */
@media (max-aspect-ratio:1/1){
  .rxbar{left:2%; right:2%; bottom:14%; justify-content:center}
  .rx{font-size:12.5px; padding:8px 12px}
}

/* ---------------- 記録の告知 ---------------- */
.gate__note{
  margin:14px 0 0; font-size:11.5px; color:var(--muted); line-height:1.7; text-align:center;
}
.gate__link{
  background:none; border:0; color:var(--accent); font-family:inherit; font-size:11.5px;
  cursor:pointer; text-decoration:underline; text-underline-offset:2px; padding:0 2px;
}
.notice__body{padding:16px 18px; display:flex; flex-direction:column; gap:11px; overflow-y:auto}
.notice__body p{margin:0; font-size:13px; line-height:1.8; color:var(--ink2)}
.notice__body strong{color:var(--ink)}
.notice__keep{font-family:var(--mono); font-size:12px; color:var(--muted)}
.notice__stop{
  background:transparent; border:1px solid var(--line); border-radius:6px; color:var(--ink2);
  font-family:inherit; font-size:12.5px; padding:8px 14px; cursor:pointer;
}
.notice__stop:hover{border-color:var(--signal); color:var(--signal)}
.notice__hint{display:block; margin-top:6px; font-size:11px; color:var(--muted)}
.notice__done{color:var(--accent); font-weight:700}

/* ================= 縦型（スマホ向け）=================
   横型の経路には一切触らない。すべて body.viewer--portrait の下に置く。
   既定は横型なので、この節が効くのは向きを縦で作ったものだけ。

   縦型は横型の「縮小版」ではなく、別の画面設計になる。
     ・話す人が画面いっぱい。丸枠は使わない（同じ人を二重に出す意味がない）
     ・選択肢は親指の届く下の帯に、全幅で積む
     ・字幕は下の帯の上。下四分の一は操作の場所なので明け渡す
   ==================================================== */

/* ステージの形。高さで頭打ちにするのは、9:16 を幅で決めると
   PC では画面から溢れるため。88vh は操作バーと余白の分を残した値 */
body.viewer--portrait .stage{aspect-ratio:9/16}
body.viewer--portrait .stage-wrap{max-width:min(430px, calc(88vh * 9 / 16))}

/* 素材そのものが 9:16 なので cover でも contain でも同じだが、
   万一 16:9 の素材を混ぜたとき（カットイン）に切り取らない contain のまま */

/* 丸枠は出さない。**縦型では話す人が画面いっぱいに映っている**ので、
   その上にもう一度小さい丸で顔を出す理由がない。
   名札だけは残す（誰が話しているかは伝えたい） */
body.viewer--portrait #narr,
body.viewer--portrait .presenter__av{display:none}
/* 縦型の名札は、**上の帯に固定する。**
   もとは下に積まれたものの上へ逃がしていたが、逃げ先に上限がなく、
   選択肢が 2 枚出ると 53% まで上がって**映像に焼き込んだ文字と重なった**
   （選択肢 0 枚なら 79%、2 枚で 53%。状況で 26% も動いていた）。
   上の帯はシーン名の並びだけで、映像は y 200〜1250 に収めてあるので空いている。
   固定なので、選択肢の枚数にも字幕にも左右されない。
   「誰が話しているか」は識別の情報で、上の帯は識別の場所でもある。 */
body.viewer--portrait .presenter{
  position:absolute; left:auto; right:12px; top:10px; bottom:auto; width:auto;
  max-width:52%; z-index:5;
}
body.viewer--portrait .presenter__id{
  position:static; transform:none; margin:0; align-items:flex-end; text-align:right;
  background:rgba(5,11,13,.72); border:1px solid rgba(255,255,255,.16);
  border-radius:99px; padding:2px 10px; backdrop-filter:blur(4px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 上の帯は狭い。**役職や部署まで出すと、シーン名にぶつかる。**
   氏名だけを出し、詳しくは横型のときに見せる */
body.viewer--portrait .presenter__role{display:none}

/* 選択肢は下の帯に全幅で積む。**指が届くのは画面の下半分**なので、
   横型のように中ほどへ散らすと押しにくい */
body.viewer--portrait .overlay{
  position:absolute; left:4%; right:4%; bottom:13%; top:auto;
  display:flex; flex-direction:column; gap:8px; z-index:4;
}
body.viewer--portrait .overlay .ov{
  position:static !important; width:auto !important; min-height:52px;
  font-size:max(14px, 3.6cqw); padding:12px 14px;
}
body.viewer--portrait .ov--choice{border-width:1.5px}

/* 字幕は選択肢の上。実際の位置は placeCaption() がカードの高さを測って入れる
   （枚数で帯の高さが変わるため、割合の決め打ちだとぶつかる）。ここは初期値 */
body.viewer--portrait .cap{left:4%; right:4%; bottom:26%}
body.viewer--portrait .cap span{font-size:max(13px, 3.2cqw); -webkit-line-clamp:3}

/* 反応語は右下ではなく中央。片手持ちで届く範囲に */
body.viewer--portrait .rxbar{left:4%; right:4%; bottom:13%; justify-content:center}

/* 目次は下から出るシート（横型の縦持ちと同じ考え方） */
body.viewer--portrait .toc{position:fixed; inset:0; align-items:flex-end; padding:0; z-index:60}
body.viewer--portrait .toc__box{width:100%; max-height:74vh; border-radius:12px 12px 0 0; border-bottom:0}

/* PC で見たとき。縦の動画を画面いっぱいに引き伸ばさず、
   中央に置いて周りを沈める（縦動画を PC で見せる一般的な形） */
@media (min-width:760px){
  body.viewer--portrait{background:#03080A}
  body.viewer--portrait .stage{box-shadow:0 0 0 1px var(--line), 0 18px 60px rgba(0,0,0,.55)}
}

/* 埋め込みのときは枠にぴったり収める */
body.viewer--portrait.viewer--embed .stage-wrap{max-width:min(430px, calc(100vh * 9 / 16))}

/* ---------------- 素材が未設定のシーン ----------------
   下書きの下見でだけ出る。作りかけでも最後まで通せるように、
   落ちるのではなく板を出して次へ進む */
.blank{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:repeating-linear-gradient(45deg, #0C161A, #0C161A 12px, #0F1B20 12px, #0F1B20 24px);
  color:var(--ink2); text-align:center; padding:0 20px;
}
.blank[hidden]{display:none}
.blank__n{font-size:max(12px,1.5cqw); color:var(--muted); font-family:var(--mono)}
.blank__t{font-size:max(15px,2.2cqw); font-weight:700; color:var(--ink)}
.blank__s{font-size:max(11px,1.3cqw); color:var(--muted)}

/* ---------------- 「このシーンだけ」の終わり ----------------
   次へ進まずここで止める。配置と字幕を繰り返し見たいときのため */
.solo{
  position:absolute; inset:0; z-index:6;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:rgba(5,11,13,.86); backdrop-filter:blur(3px);
}
.solo[hidden]{display:none}
.solo__t{color:var(--ink); font-size:max(14px,1.9cqw); font-weight:700}
.solo__b{
  background:var(--accent); color:#06181A; border:0; border-radius:99px;
  font-family:inherit; font-size:max(13px,1.6cqw); font-weight:700;
  padding:11px 26px; min-height:44px; cursor:pointer;
}

/* 作り手のロゴ。**文字と同じ行に、同じ高さで並べる** */
.gate__marklogo{height:1.5em; width:auto; vertical-align:-0.35em; margin-right:6px; opacity:.9}
.gate__marklogo[hidden]{display:none}

/* ---------------- 日本語の折り返し ----------------
   既定のままだと、日本語はどの文字の間でも折り返せる扱いになる。
   その結果 **「分かれてい / ませんか。」** のように動詞の途中で切れる。
   縦型は字幕の幅が狭いぶん、これが毎行のように起きる。

   word-break:auto-phrase は文節の切れ目で折り返す。
     現状      … 電話とLINEとWebで、予約の台帳が3つに分かれてい / ませんか。
     auto-phrase … 電話とLINEとWebで、予約の台帳が3つに / 分かれていませんか。

   対応していない環境（Safari など）では無視され、いまと同じ挙動に戻るだけ。
   **text-wrap:balance は使わない。** 行の長さは揃うが「予約の / 台帳が」のように
   語の途中で切れることがあり、目的と逆になる。 */
.cap span, .cap-below span, .caption, .ov__label, .ov__title, .ov__sub{
  word-break:auto-phrase;
}

/* ---------------- 質問の受け口 ----------------
   **画面の下には何も足さない。** 選択肢（bottom:13%）・字幕・反応語・
   名札で既に埋まっていて、もう 1 段積めばどれかが隠れる。
   操作バーのボタン 1 つに収め、押したときだけ下からシートを出す。
   縦でも横でも同じ形になるので、向きごとの調整が要らない。 */
.ask{
  position:absolute; inset:0; z-index:60; display:flex;
  align-items:flex-end; justify-content:center;
  background:rgba(3,8,10,.62); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.ask[hidden]{display:none}
.ask__box{
  width:100%; max-width:560px; box-sizing:border-box;
  background:var(--panel); border:1px solid var(--line); border-bottom:0;
  border-radius:12px 12px 0 0; padding:18px 18px 16px;
  animation:asksheet .2s ease both;
  /*
   * **プレイヤーからはみ出させない。**
   *
   * 質問の受け口は入力欄 1 つだったので収まっていた。
   * フォームで項目が 4 つになると、箱は簡単にプレイヤーより背が高くなる。
   * 16:9 の埋め込みは 400px 前後しか高さが無く、**上下にはみ出して切れた**
   * （2026-10-04 に本番で起きた）。
   *
   * 項目の数は作る人が決めるので、**何個でも収まる形**にしておく。
   */
  max-height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
}
@keyframes asksheet{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ask__box{animation:none}}
.ask__box h3{margin:0 0 6px; font-size:max(15px, 1.6cqw); color:var(--ink)}
.ask__note{margin:0 0 12px; font-size:max(11.5px, 1.25cqw); line-height:1.7; color:var(--muted)}
.ask__box textarea{
  width:100%; box-sizing:border-box; resize:vertical;
  background:var(--bg2); color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:10px 12px;
  font-family:inherit; font-size:max(13px, 1.4cqw); line-height:1.7;
}
.ask__box textarea:focus{outline:none; border-color:var(--accent)}
.ask__foot{display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap}
.ask__count{font-family:var(--mono); font-size:max(10.5px, 1.1cqw); color:var(--muted)}
.ask__msg{margin:10px 0 0; font-size:max(12px, 1.3cqw); line-height:1.7; color:var(--accent)}
.ask__msg[hidden]{display:none}
.ask__msg.is-err{color:var(--signal)}

/* 縦型では画面が狭いので、余白を詰めて字を大きめに */
body.viewer--portrait .ask__box{padding:16px 14px 14px}
body.viewer--portrait .ask__box textarea{font-size:max(14px, 3.4cqw)}
body.viewer--portrait .ask__note{font-size:max(12px, 2.9cqw)}

/* ---------------- 狭い画面の操作バー ----------------
   ボタンと時刻を 1 行に並べると、**残りがシークに回る**作りだった。
   幅 341px のスマホでは、固定の要素で 312px を使い切り、
   シークは 30px（全体の 9%）しか残らない。指で掴める幅ではない。
   質問ボタンを足せば、さらに削られて 0 になる。

   スマホの動画再生でよくある形にする。**シークを独立した 1 行**にして
   全幅を与え、その下にボタンを並べる。行が 1 つ増えるが、
   縦型は下に余白があり、横型でも操作バーは元から重なっている。

   縦型だけでなく「狭い画面」全体に掛ける。**横型の動画をスマホで見ても
   同じことが起きる**ので、向きで分けない。 */
@media (max-width:560px){
  .ctrl{flex-wrap:wrap; gap:6px; row-gap:0; padding:6px 10px 8px}
  /* order:-1 で、ボタンより上の行へ回す */
  .ctrl__seek{order:-1; flex:1 0 100%; height:22px}
  /* 時刻は隣り合うので、間に区切りを入れる（0:07 / 0:12） */
  .ctrl__t--dur::before{content:"/"; opacity:.45; margin-right:4px}
  /* 時刻のあとを空けて、ボタンを右へ寄せる */
  .ctrl__t--dur{margin-right:auto}
}
body.viewer--portrait .ctrl{flex-wrap:wrap; gap:6px; row-gap:0}
body.viewer--portrait .ctrl__seek{order:-1; flex:1 0 100%; height:22px}
body.viewer--portrait .ctrl__t--dur::before{content:"/"; opacity:.45; margin-right:4px}
body.viewer--portrait .ctrl__t--dur{margin-right:auto}

/* ---------------- 狭い画面いっぱいに使う ----------------
   もとは PC 向けの余白 16px がスマホにもそのまま効いていて、
   左右 32px が削られていた。**9:16 なので、幅を 32px 失うと
   高さは 57px 縮む。** 390x704 の画面で 348x620（幅 89%）だった。

   高さは dvh（いま見えている高さ）で測る。iOS の Safari では
   100vh が「ツールバーが隠れたときの高さ」を指すため、そのまま使うと
   はみ出す。それを避けて 88vh に抑えてあったが、**安全に倒したぶん
   常に 12% を捨てていた。** dvh なら逃げが要らない。

   dvh を知らない端末では、この節が丸ごと効かず、上の 88vh が残る。
   枠（角丸と細い線）は残す。**画面いっぱいにして枠を消すと、
   動画とブラウザの境目が分からなくなる。** */
@media (max-width:560px){
  body.viewer{padding:8px 6px}
}
@supports (height:100dvh){
  @media (max-width:560px){
    body.viewer{min-height:100dvh}
    body.viewer--portrait .stage-wrap{max-width:min(430px, calc((100dvh - 16px) * 9 / 16))}
  }
}

/* 自動で引っ込んだあと、まだ押せることを知らせる印。
   **残っていることに気づけない**ので、直後だけ光らせる。
   6 秒で消える（点滅し続けると、ただの飾りとして無視される） */
.ctrl__btn--rx.is-hint{color:var(--accent)}
.ctrl__btn--rx.is-hint::after{
  content:""; position:absolute; top:4px; right:4px;
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  animation:rxhint 1.4s ease-in-out infinite;
}
.ctrl__btn{position:relative}
@keyframes rxhint{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.ctrl__btn--rx.is-hint::after{animation:none}}

/* 止まる場面の印。**「選べる」と「止まる」は意味が違う**ので色を分ける。
   同じ色だと、止まったときに何が起きたのか視聴者に分からない。
   選べる＝橙（--signal）、止まる＝青緑（ブランド色）で、
   色覚に頼らずに済むよう印そのものも太くしてある */
.mark--hold{
  width:5px; height:16px;
  background:var(--accent);
  box-shadow:0 0 0 1px rgba(3,8,10,.7), 0 0 6px rgba(63,195,190,.7);
}
.mark__zone.mark--hold{
  width:auto; height:5px; margin-top:-2.5px;
  background:rgba(63,195,190,.45); box-shadow:none;
}

/* ==================== フォーム ====================
   **動画を離れずに名乗ってもらう。** 質問の受け口と同じ形で出す。
   凝った見た目にしない ── 入力欄は、迷いなく打てることだけが大事。 */
.fm__box{max-width:min(520px, 92vw)}
.fm__f{display:block; margin-bottom:10px}
.fm__f > span{
  display:block; font-size:max(11.5px, 1.2cqw); color:var(--muted);
  margin-bottom:4px; line-height:1.5;
}
.fm__f input,
.fm__f textarea,
.fm__f select{
  width:100%; border:1px solid var(--line); border-radius:7px;
  background:var(--panel2); color:var(--ink);
  padding:9px 11px; font-size:max(13px, 1.35cqw); font-family:inherit; line-height:1.6;
}
.fm__f textarea{resize:vertical; min-height:64px}
.fm__f input:focus,
.fm__f textarea:focus,
.fm__f select:focus{outline:none; border-color:var(--accent)}

/* **同意は必ず見える場所に置く。** 小さくしすぎない */
.fm__agree{
  display:flex; gap:9px; align-items:flex-start; margin:12px 0 4px;
  font-size:max(11.5px, 1.2cqw); line-height:1.7; color:var(--ink2); cursor:pointer;
}
.fm__agree input{
  flex:0 0 auto; margin-top:3px; width:16px; height:16px; accent-color:var(--accent);
}
.fm__agree a{color:var(--accent)}

/* カードのほう。**選択肢と見分けがつく形にする**（押すと入力が始まるので） */
.ov--form{border-color:var(--accent-line)}
.ov--form .ov__ic{color:var(--accent)}

/* ==================== 重ねて開くカード ====================
   **別タブへ飛ばさず、動画の上に重ねる。** 閉じれば続きから再生される。
   読ませる場所ではなく、続きを見てもらうための一押し。 */
.pop__box{max-width:min(640px, 94vw); position:relative; padding-top:18px}
.pop__box h3{margin:0 0 10px; padding-right:34px}
.pop__x{
  position:absolute; top:10px; right:12px;
  border:1px solid var(--line); background:var(--panel2); color:var(--muted);
  border-radius:999px; width:28px; height:28px; cursor:pointer;
  font-size:max(12px, 1.2cqw); line-height:1; font-family:inherit;
}
.pop__x:hover{color:var(--ink); border-color:var(--accent-line)}
/* **画像は大きくしすぎない。** 説明とボタンが画面の外へ出ると押されない */
.pop__img{
  display:block; width:100%; max-height:46cqh; object-fit:contain;
  border:1px solid var(--line); border-radius:8px; background:var(--screen);
  margin:0 0 12px;
}
.pop__body{
  margin:0; font-size:max(13px, 1.35cqw); line-height:1.85; color:var(--ink2);
  white-space:pre-wrap;
}

/* カードのほう。**別タブで開くものと見分けがつくように** */
.ov--inline{border-color:var(--accent-line)}

/* ---- フォームが背の高いとき ----
   箱の中でスクロールするので、**ボタンが流れて見えなくなる。**
   送信とあとでは、下に貼り付けて常に見えるようにする。 */
.fm__box .ask__foot{
  position:sticky; bottom:0; z-index:1;
  margin-top:12px; padding:10px 0 0;
  background:var(--panel);
  box-shadow:0 -10px 12px -8px var(--panel);
}
/* 少しだけ詰める。**上限を超えにくくする**（詰めすぎると押しにくい） */
.fm__f{margin-bottom:9px}
.fm__f > span{margin-bottom:3px}