/* 辩论对战页 · 复用 style.css 的明亮色变量与 topic-card / chips / toast */

.topbar .nav { display: flex; align-items: center; gap: 14px; }
.link { color: var(--accent); font-size: 12px; text-decoration: none; white-space: nowrap; }
.link:hover { text-decoration: underline; }

.grp.col { flex-direction: column; align-items: stretch; }
select.grow, .grp select.grow { flex: 1; min-width: 260px; max-width: 720px; }

/* ---------------- 出场阵容 ---------------- */
.lineup { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lu {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
  border: 1px solid var(--line); border-radius: 20px; padding: 3px 10px 3px 8px; background: var(--field);
}
.lu i { font-style: normal; font-weight: 700; }
.lu .v { color: var(--dim); }
.lu .tier { font-size: 10px; padding: 0 4px; border-radius: 3px; background: var(--accent-soft); color: var(--info-ink); }
.lu .tier.t48 { background: var(--ok-soft); color: var(--ok); }
.lu.pro { border-color: #bfe3d1; } .lu.pro i { color: var(--pro); }
.lu.con { border-color: #f0cbdb; } .lu.con i { color: var(--con); }
.lu.neutral { border-color: #c9dcf5; } .lu.neutral i { color: var(--accent); }

/* ---------------- 开跑条 ---------------- */
.run-bar { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
button.big { padding: 8px 20px; font-size: 13px; }
.chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--dim); cursor: pointer; white-space: nowrap; }
.chk input { accent-color: var(--accent); cursor: pointer; }

/* ---------------- 进度条 ---------------- */
.bar { height: 6px; border-radius: 3px; background: var(--panel2); border: 1px solid var(--line); overflow: hidden; margin-top: 8px; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--ok)); transition: width .4s; }

/* ---------------- 对战实录时间轴 ---------------- */
.timeline { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.empty { color: var(--dim); font-size: 12px; padding: 16px 4px; }

.seg {
  display: grid; grid-template-columns: 34px 1fr; gap: 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--field); padding: 9px 11px; box-shadow: var(--shadow);
}
.seg.pro { border-left: 3px solid var(--pro); }
.seg.con { border-left: 3px solid var(--con); }
.seg.neutral { border-left: 3px solid var(--accent); }
.seg .no { color: var(--dim); font-size: 11px; text-align: right; padding-top: 2px; }
.seg .head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seg .stage { font-size: 11px; color: var(--dim); border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; }
.seg .who { font-weight: 700; font-size: 12px; }
.seg.pro .who { color: var(--pro); }
.seg.con .who { color: var(--con); }
.seg.neutral .who { color: var(--accent); }
.seg .meta { color: var(--dim); font-size: 11px; margin-left: auto; white-space: nowrap; }
.seg .body { margin-top: 5px; font-size: 13px; line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.seg .body.dim { color: var(--dim); font-style: italic; }

.seg.running { border-color: var(--accent); }
.seg.running .body::after { content: '▌'; color: var(--accent); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.seg.pending { opacity: .55; }
.seg.error { border-color: var(--err); background: var(--err-soft); }
.seg.error .body { color: #8f2a21; }
.seg.playing { border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok-soft) inset; }
.seg .go { cursor: pointer; }
.seg .go:hover { color: var(--accent); }

/* ---------------- 历史对战 ---------------- */
.hist { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.h-row {
  display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--field); cursor: pointer;
}
.h-row:hover { border-color: var(--accent); background: var(--accent-soft); }
.h-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-row .s { font-size: 11px; color: var(--dim); white-space: nowrap; }
.badge { font-size: 10px; padding: 0 6px; border-radius: 10px; border: 1px solid var(--line); color: var(--dim); }
.badge.done { color: var(--ok); border-color: #bfe3d1; background: var(--ok-soft); }
.badge.running, .badge.pending { color: var(--info-ink); border-color: #c9dcf5; background: var(--accent-soft); }
.badge.error, .badge.stopped { color: var(--err); border-color: #f0c8c4; background: var(--err-soft); }
.badge.partial { color: #a2641b; border-color: #f0d9b5; background: #fff6e3; }

/* ---------------- 容错记录（模型/音色不可用时自动切换） ---------------- */
.ev-list {
  margin-top: 8px; padding: 6px 10px 7px; border: 1px solid #f0d9b5;
  border-radius: 8px; background: #fff9ec;
}
.ev-list .ev-h { font-size: 11px; font-weight: 700; color: #8a6d1f; margin-bottom: 2px; }
.ev-list .ev { display: flex; gap: 8px; align-items: baseline; font-size: 11.5px; line-height: 1.7; color: #6b5320; }
.ev-list .ev i { font-style: normal; font-size: 10px; color: var(--dim); white-space: nowrap; }
.ev-list .ev.skip { color: #a03a2c; font-weight: 700; }
.quota .evn { color: #a2641b; }
.seg .meta .over { color: var(--err); font-weight: 700; }

/* ---------------- 随机出题：三选一候选卡（样式在 style.css 的 .cands/.cand，两页共用） ---------------- */

/* ---------------- 折叠块（实录 / 历史） ---------------- */
.panel > details > summary {
  cursor: pointer; font-weight: 700; font-size: 13px; color: var(--fg); padding: 2px 0;
  list-style: none;
}
.panel > details > summary::-webkit-details-marker { display: none; }
.panel > details > summary::before { content: '▸ '; color: var(--dim); }
.panel > details[open] > summary::before { content: '▾ '; }

/* ---------------- 舞台面板 ---------------- */
.stage-panel { padding-bottom: 12px; }

/* ---------------- 底部播放条 ---------------- */
.playbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; background: #ffffffee; border-top: 1px solid var(--line); box-shadow: 0 -2px 12px rgba(24, 38, 60, .07); backdrop-filter: blur(6px);
}
.playbar button { min-width: 30px; }
.playbar .pplay { background: var(--accent); border-color: var(--accent-ink); color: #fff; font-size: 14px; }
.playbar .pplay:hover { background: var(--accent-ink); color: #fff; }
.playbar .cur { font-size: 12px; color: var(--dim); max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playbar .spacer { flex: 1; }
.playbar .time { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.playbar input[type=range] { width: 90px; accent-color: var(--accent); }
/* 手机：底部调节栏换行成多层，避免控件被挤到屏幕外又无法横向滚动 */
@media (max-width: 760px) {
  .playbar { flex-wrap: wrap; gap: 6px 8px; padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); max-height: 46vh; overflow-y: auto; }
  .playbar .cur { max-width: 100%; }
  .playbar .spacer { display: none; }
  body { padding-bottom: 150px; }
}

/* ---------------- 舞台全屏（原生 Fullscreen + iOS 伪全屏共用） ---------------- */
/* 目标元素 = #stagePanel；进入后标题栏在上、#stage 撞满中间、底部留空给播放条 */
.stage-panel:fullscreen,
.stage-panel:-webkit-full-screen,
.fs-on .stage-panel {
  display: flex; flex-direction: column;
  margin: 0; border: 0; border-radius: 0; background: #060a12;
  padding: 8px 14px 76px; overflow: hidden;
}
/* iOS 伪全屏：手动把面板撑满视口并盖住顶栏（原生全屏已隔离，无需 fixed） */
.fs-on .stage-panel { position: fixed; inset: 0; z-index: 2147483000; }
/* 舞台主体撞满剩余高度（覆盖基准 470px / 竖屏 560px） */
.stage-panel:fullscreen #stage,
.stage-panel:-webkit-full-screen #stage,
.fs-on .stage-panel #stage { flex: 1 1 auto; min-height: 0; height: auto; margin-top: 10px; }
/* 搬进来的播放条：贴着全屏底部、盖在内容之上 */
.stage-panel:fullscreen #playbar,
.stage-panel:-webkit-full-screen #playbar,
.fs-on #playbar { left: 0; right: 0; bottom: 0; z-index: 2147483001; }
/* 全屏：调节栏默认隐身，点/触屏舞台唤出、几秒后自动隐（伪全屏路径；桌面原生全屏不受影响） */
.fs-on #playbar { transform: translateY(140%); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .25s ease; }
.fs-on.fs-bar #playbar { transform: none; opacity: 1; pointer-events: auto; }
/* 全屏时隐藏长提示文案，把空间留给舞台（手机上尤其拥挤） */
.stage-panel:fullscreen .sec-head .hint,
.stage-panel:-webkit-full-screen .sec-head .hint,
.fs-on .stage-panel .sec-head .hint { display: none; }
/* 全屏时控制按钮：只留图标、微透明，悬停才变实，不抢全屏观感 */
.stage-panel:fullscreen .sec-head .btn-t,
.stage-panel:-webkit-full-screen .sec-head .btn-t,
.fs-on .stage-panel .sec-head .btn-t { display: none; }
.stage-panel:fullscreen #btnPlayAll,
.stage-panel:fullscreen #btnStopPlay,
.stage-panel:fullscreen #btnFull,
.stage-panel:-webkit-full-screen #btnPlayAll,
.stage-panel:-webkit-full-screen #btnStopPlay,
.stage-panel:-webkit-full-screen #btnFull,
.fs-on .stage-panel #btnPlayAll,
.fs-on .stage-panel #btnStopPlay,
.fs-on .stage-panel #btnFull {
  min-width: 34px; padding: 4px 10px; font-size: 15px; line-height: 1;
  background: rgba(18, 26, 44, .42); border: 1px solid rgba(150, 190, 255, .22);
  color: #dbe8ff; opacity: .5; border-radius: 9px; backdrop-filter: blur(3px);
  transition: opacity .15s, background .15s;
}
.stage-panel:fullscreen #btnPlayAll:hover,
.stage-panel:fullscreen #btnStopPlay:hover,
.stage-panel:fullscreen #btnFull:hover,
.stage-panel:-webkit-full-screen #btnPlayAll:hover,
.stage-panel:-webkit-full-screen #btnStopPlay:hover,
.stage-panel:-webkit-full-screen #btnFull:hover,
.fs-on .stage-panel #btnPlayAll:hover,
.fs-on .stage-panel #btnStopPlay:hover,
.fs-on .stage-panel #btnFull:hover { opacity: 1; background: rgba(30, 44, 72, .74); }

body { padding-bottom: 66px; }

@media (max-width: 720px) {
  .seg { grid-template-columns: 26px 1fr; }
  .playbar .cur { max-width: 26vw; }
}