/* /eyecatch 単独ページ専用の「ページchrome」スタイル。
 *
 * eyecatch.css（シーン本体=.ec-shake配下。台本再生画面にも読み込まれる共有
 * スタイル）から、このページだけが使うbody全体のレイアウト・見出し・操作
 * パネル・ステージの外枠(1280x720固定ピクセル空間を外側だけscaleする仕組み)
 * を分離したもの。/eyecatch単独ページだけがこのファイルを読み込む。
 *
 * ⚠️ 台本再生画面(index.html)は絶対にこのファイルを読み込まないこと。
 * body/* のような広いセレクタを持つため、読み込むとプレイヤー画面全体の
 * 背景色・フォント・パディングが壊れる（doc/devlog参照）。
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: #050506;
  color: var(--ec-ink);
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
  padding: 24px 16px 60px;
}

.ec-page {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ec-hero {
  text-align: center;
}
.ec-hero h1 {
  font-size: 22px;
  margin: 0 0 4px;
}
.ec-hero p {
  margin: 0;
  color: #9a93a6;
  font-size: 13px;
}

/* ---------- ステージの外枠（1280x720固定ピクセル空間） ---------- */
/* 台本再生画面はplayer.cssの既存.stage-outer/.stageが同じ仕組みを既に持っている
   ため、このページだけがこの外枠を自前で用意する（シーン本体(eyecatch.css)は
   どちらの外枠の中にも同じ見た目で収まるよう、座標を1280x720の内部空間に
   対する相対値だけで組んである）。 */

.ec-stage-outer {
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
  position: relative;
  background: var(--ec-bg-bottom);
}

.ec-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 720px;
  transform-origin: top left;
  /* scale()は<number>しか受け付けないため、calc(100cqw / 1280)（結果は<length>）
   * を渡すとこの宣言自体が無効化され、スケールが一切効かない
   * （player.cssの.stageと同じバグ。詳しい理由はplayer.css冒頭のコメント参照）。
   * tan(atan2(a, b))で2つの長さの比を無単位数に変換してから渡す。 */
  transform: scale(tan(atan2(100cqw, 1280px)));
  overflow: hidden;
}

/* ---------- 操作パネル ---------- */

.ec-panel {
  background: #121016;
  border: 1px solid #2a2530;
  border-radius: 12px;
  padding: 14px 16px;
}
.ec-controls-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
#ecBtnPlay {
  background: var(--ec-gold);
  color: #1a1610;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
#ecBtnPlay:hover { filter: brightness(1.08); }
#ecBtnPlay:disabled { opacity: .5; cursor: default; }
.ec-status {
  font-size: 13px;
  color: #a79bc0;
}
.ec-hint {
  margin-top: 10px;
  font-size: 12px;
  color: #776f88;
  line-height: 1.6;
}
.ec-hint code {
  color: #cbb6e8;
}

/* ?clean=1 のとき: 見出し・パネルを隠してステージだけを画面いっぱいに表示する
   （画面録画用）。 */
body.ec-clean { padding: 0; background: var(--ec-bg-bottom); }
body.ec-clean .ec-page { max-width: none; gap: 0; }
body.ec-clean .ec-hero,
body.ec-clean .ec-panel { display: none; }
body.ec-clean .ec-stage-outer { border-radius: 0; box-shadow: none; }