/* ============================================================
   DEEP-SPACE BEACON · promo.css —— 宣传动画放映台
   画面几何全在 promo.js 生成的 SVG 里，本文件只管两件事：
   1) 舞台(16:9 遮幅、居中、暗房留白) 与控制台外观
   2) SVG 各层的配色/字体 —— 一律引用 style.css 的令牌，
      调色板改了，宣传片自动跟着改。
   ============================================================ */

/* ---------- 1. 舞台 ---------- */
.promo-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.promo-hud .promo-flag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--muted);
  text-transform: uppercase;
}
.promo-hud .promo-back {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ice);
}
.promo-hud .promo-back:hover { color: var(--parchment); }

.reel-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px var(--gutter) 8px;
}
/* 遮幅：宽度受视口高限制，保证一屏看完整片 + 控制台 */
.reel-frame {
  width: 100%;
  max-width: min(1280px, calc((100vh - 240px) * 1.7778));
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  background: var(--void);
  border: 1px solid var(--line-strong);
  box-shadow: 0 0 0 1px rgba(96, 110, 130, .06), 0 30px 70px -40px rgba(0, 0, 0, .95);
  overflow: hidden;
}
.reel-svg { display: block; width: 100%; height: 100%; }

.reel-console {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  max-width: min(1280px, calc((100vh - 240px) * 1.7778));
  margin: 14px auto 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--muted);
}
.rc-btn {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  padding: 7px 13px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.rc-btn:hover { border-color: var(--ice-dim); color: var(--parchment); }
.rc-scrub { flex: 1; min-width: 160px; height: 2px; accent-color: var(--ice); cursor: ew-resize; }
.rc-time { min-width: 132px; }
.rc-loop { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.rc-loop input { accent-color: var(--phos); }

.reel-note {
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px 0 44px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
.reel-note code { font-family: var(--mono); font-size: 12px; color: var(--parchment); }

/* 定帧/录制模式：整屏只剩画面本身 */
.reel-stage.chromeless {
  position: fixed;
  inset: 0;
  padding: 0;
}
.reel-stage.chromeless .reel-frame {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  border: 0;
  box-shadow: none;
}

/* ---------- 2. SVG 画面层 ----------
   画面配色与字体规则在 promo.js 里内联进 <svg> 自身（外部 CSS
   不会随 SVG 一起序列化，导出静帧会丢样式）。本文件只留舞台。 */

/* ---------- 3. 窄屏减量 ---------- */
@media (max-width: 768px) {
  .reel-frame, .reel-console { max-width: 100%; }
  .reel-frame { aspect-ratio: 16 / 9; }
  .reel-stage { padding-top: 16px; }
  .reel-note { font-size: 12px; }
}

/* ---------- 4. 分幕轨 ---------- */
.reel-chapters{
  display: flex; gap: 8px; flex-wrap: wrap;
  width: 100%; max-width: min(1280px, calc((100vh - 240px) * 1.7778));
  margin: 16px auto 0;
}
.rc-ch{
  flex: 1 1 150px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: transparent; color: var(--muted); text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-left: 2px solid var(--line-strong); border-radius: var(--radius);
  padding: 8px 12px; transition: border-color .25s, color .25s, background .25s;
}
.rc-ch:hover{ border-color: var(--ice-dim); color: var(--ink); }
.rc-ch.on{ border-left-color: var(--parchment); background: rgba(168,154,124,.05); color: var(--ink); }
.rc-ch-no{ font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--ice-dim); }
.rc-ch.on .rc-ch-no{ color: var(--parchment); }
.rc-ch-zh{ font-family: var(--tech); font-size: 14px; letter-spacing: .06em; }
.rc-ch-en{ font-family: var(--mono); font-size: 9px; letter-spacing: .22em; opacity: .65; }
.rc-dl{ text-decoration: none; display: inline-flex; align-items: center; }
@media (max-width: 768px){ .reel-chapters{ max-width: 100%; } .rc-ch{ flex: 1 1 45%; } }