/* ═══════════════════════════════════════════════════════════
   speech.css —— 5 分钟演讲模式
   布局：纵向 flex（顶栏 / 主区 / 底部控制栏），不再用绝对定位叠层，
         避免主区内容被提词器遮挡。
   ═══════════════════════════════════════════════════════════ */

#speechLayer{
  position:fixed; inset:0; z-index:90;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(201,162,39,.16), transparent 60%),
    linear-gradient(170deg,#0B1424,#101B30 55%,#080F1C);
  display:none;
}
#speechLayer.on{ display:flex; flex-direction:column; }

/* ── 顶栏 ── */
.sp-top{
  position:relative; flex:none; height:64px; z-index:3;
  display:flex; align-items:center; gap:18px; padding:0 26px;
  border-bottom:1px solid rgba(201,162,39,.28);
  background:linear-gradient(180deg,rgba(9,16,29,.94),rgba(9,16,29,.6));
}
.sp-step{
  font-family:var(--f-num); font-size:15px; letter-spacing:.14em; color:var(--c-gold);
  padding:5px 13px; border:1px solid rgba(201,162,39,.44); border-radius:999px; flex:none;
}
.sp-zone{
  font-family:var(--f-serif); font-size:16px; letter-spacing:.15em; color:var(--c-paper);
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sp-who{
  display:flex; align-items:center; gap:8px; flex:none;
  font-size:13px; letter-spacing:.1em; color:var(--c-gold-pale);
}
.sp-who::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--c-red-bright); animation:recPulse 1.8s infinite;
}

/* ── 主区（占满剩余高度，不会被下方的控制栏压住） ── */
.sp-body{
  position:relative; flex:1 1 auto; min-height:0;
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  gap:clamp(20px,3vw,52px);
  padding:clamp(16px,2.4vh,32px) clamp(26px,4vw,64px) clamp(8px,1.2vh,16px);
  align-items:stretch;
}
.sp-left{
  min-width:0; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; justify-content:center;
}
.sp-left::-webkit-scrollbar{ width:6px; }
.sp-left::-webkit-scrollbar-thumb{ background:rgba(201,162,39,.4); border-radius:6px; }

.sp-title{
  font-family:var(--f-serif); font-weight:700; letter-spacing:.04em;
  font-size:clamp(24px,3.3vw,48px); line-height:1.22; margin:0 0 12px;
  background:linear-gradient(172deg,#FFF8E4,var(--c-gold-light) 46%,var(--c-gold) 78%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sp-one{
  font-family:var(--f-serif); font-size:clamp(15px,1.75vw,25px); line-height:1.66;
  color:var(--c-paper); margin:0 0 16px; letter-spacing:.02em;
}
.sp-one em{ font-style:normal; color:var(--c-gold-light); }

/* 巨大数据 */
.sp-stat{ display:flex; align-items:baseline; gap:12px; margin-bottom:6px; }
.sp-stat-n{
  font-family:var(--f-num); font-size:clamp(36px,5.4vw,78px); line-height:1;
  color:var(--c-gold-light); letter-spacing:-.01em;
  text-shadow:0 0 38px rgba(201,162,39,.44);
}
.sp-stat-u{ font-family:var(--f-serif); font-size:clamp(14px,1.7vw,22px); color:var(--c-gold); }
.sp-stat-l{ font-size:13px; color:var(--c-text-mute); margin:0 0 14px; line-height:1.7; }

.sp-facts{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.sp-facts li{
  position:relative; padding-left:20px;
  font-size:clamp(12.5px,1.25vw,15.5px); line-height:1.72; color:var(--c-text-mute);
}
.sp-facts li::before{ content:"◆"; position:absolute; left:0; top:1px; font-size:10px; color:var(--c-gold); }

/* ── 右侧：主图 + 佐证图条 ── */
.sp-right{
  min-width:0; min-height:0;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(8px,1.2vh,14px);
}
.sp-fig{
  position:relative; flex:1 1 auto; min-height:120px; width:100%; overflow:hidden;
  border:1px solid rgba(201,162,39,.44); border-radius:3px;
  background:#0B1424;
  box-shadow:0 18px 54px rgba(0,0,0,.62), 0 0 0 8px rgba(245,241,232,.05);
}
.sp-fig img{ width:100%; height:100%; object-fit:cover; }
.sp-fig .ph{ position:absolute; inset:0; }

/* 无配图的站：用徽章/钥匙做视觉主体 */
.sp-visual{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  gap:clamp(10px,2.4vw,30px); flex-wrap:wrap; padding:22px;
  background:radial-gradient(circle at 50% 42%, rgba(201,162,39,.20), rgba(11,20,36,.96) 70%);
}
.sp-visual .key{ width:clamp(66px,7vw,92px); }
.sp-visual--badge .merge-badge{ width:clamp(130px,15vw,180px); }

.sp-credit{ font-size:11px; color:var(--c-text-mute); text-align:center; margin:0; letter-spacing:.04em; flex:none; }

/* 佐证图条：口播提到的点都有图 */
.sp-shots{
  flex:none; display:flex; gap:9px; width:100%;
  overflow-x:auto; padding:2px 2px 6px;
}
.sp-shots::-webkit-scrollbar{ height:5px; }
.sp-shots::-webkit-scrollbar-thumb{ background:rgba(201,162,39,.4); border-radius:5px; }
.sp-shot{
  flex:1 1 0; min-width:74px; padding:0; overflow:hidden; text-align:left;
  background:rgba(9,16,29,.72);
  border:1px solid rgba(201,162,39,.28); border-radius:5px;
  transition:all .22s var(--ease);
}
.sp-shot img{
  width:100%; height:clamp(42px,5vh,64px); object-fit:cover;
  opacity:.76; transition:opacity .22s var(--ease);
}
.sp-shot span{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  padding:5px 7px 6px; font-size:10.5px; line-height:1.42; color:var(--c-text-mute);
}
.sp-shot:hover{ border-color:var(--c-gold); transform:translateY(-2px); }
.sp-shot:hover img{ opacity:1; }
.sp-shot.on{ border-color:var(--c-gold-light); box-shadow:0 0 16px rgba(201,162,39,.45); }
.sp-shot.on img{ opacity:1; }
.sp-shot.on span{ color:var(--c-gold-pale); }

/* ── 底部控制栏：提词器 + 翻页按钮 + 倒计时环 ── */
.sp-foot{
  position:relative; flex:none; z-index:6;
  display:flex; align-items:flex-end; gap:clamp(16px,2vw,34px);
  padding:clamp(10px,1.6vh,20px) clamp(26px,4vw,64px) clamp(14px,2vh,24px);
  background:linear-gradient(0deg, rgba(6,11,20,.98) 48%, rgba(6,11,20,.9) 80%, rgba(6,11,20,.72));
  border-top:1px solid rgba(201,162,39,.3);
}
.sp-cue{ flex:1 1 auto; min-width:0; }
.sp-cue[hidden]{ display:none; }
.sp-cue-h{
  display:flex; align-items:center; gap:10px; margin:0 0 9px;
  font-size:11px; letter-spacing:.24em; color:var(--c-gold);
}
.sp-cue-h::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,rgba(201,162,39,.5),transparent); }
.sp-cue ol{ margin:0; padding:0; list-style:none; display:grid; gap:7px; counter-reset:c; }
.sp-cue li{
  position:relative; padding-left:30px; counter-increment:c;
  font-family:var(--f-serif);
  font-size:clamp(15px,1.9vw,27px); line-height:1.58; letter-spacing:.02em;
  color:#FFF6DE; text-shadow:0 2px 14px rgba(0,0,0,.9);
}
.sp-cue li::before{
  content:counter(c); position:absolute; left:0; top:.3em;
  width:19px; height:19px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--f-num); font-size:11px;
  color:var(--c-ink); background:var(--c-gold);
}
.sp-cue li.cur{ color:#fff; }
.sp-cue li.cur::before{ background:var(--c-red-bright); color:#fff; box-shadow:0 0 14px rgba(217,58,47,.9); }

/* 右下角 HUD：翻页按钮 + 倒计时环 */
.sp-hud{
  flex:none; display:flex; align-items:center; gap:clamp(10px,1.2vw,18px);
}
.sp-nav{ display:flex; gap:9px; }
.sp-nav button{
  display:flex; align-items:center; gap:7px;
  padding:12px 18px; border-radius:8px; white-space:nowrap;
  font-size:14px; letter-spacing:.06em;
  color:var(--c-gold-pale); background:rgba(9,16,29,.9);
  border:1px solid rgba(201,162,39,.46);
  box-shadow:0 4px 18px rgba(0,0,0,.5);
  transition:all .2s var(--ease);
}
.sp-nav button:hover:not(:disabled){
  background:rgba(201,162,39,.24); color:#fff;
  border-color:var(--c-gold-light); transform:translateY(-2px);
}
.sp-nav button:active:not(:disabled){ transform:translateY(0); }
.sp-nav button:disabled{ opacity:.28; cursor:not-allowed; }
.sp-nav button.primary{
  color:#fff; font-weight:600;
  background:linear-gradient(135deg,var(--c-red),var(--c-red-deep));
  border-color:rgba(232,199,102,.62);
}
.sp-nav button.primary:hover{
  background:linear-gradient(135deg,#D03A2E,#8E1713);
  box-shadow:0 6px 24px rgba(184,34,28,.6);
}

.sp-timer{ position:relative; flex:none; width:clamp(72px,7.2vw,98px); aspect-ratio:1; }
.sp-timer svg{ width:100%; height:100%; transform:rotate(-90deg); }
.sp-timer .trk{ fill:none; stroke:rgba(255,255,255,.13); stroke-width:5; }
.sp-timer .bar{
  fill:none; stroke:var(--c-gold); stroke-width:5; stroke-linecap:round;
  transition:stroke-dashoffset .95s linear, stroke .5s;
}
.sp-timer.warn .bar{ stroke:#E8A33D; }
.sp-timer.danger .bar{ stroke:var(--c-red-bright); }
.sp-timer.danger{ animation:recPulse 1s infinite; }
.sp-timer-txt{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.sp-timer-txt b{
  display:block; font-family:var(--f-num); font-size:clamp(17px,1.9vw,23px);
  color:var(--c-gold-light); line-height:1; letter-spacing:.02em;
}
.sp-timer-txt span{ display:block; font-size:10px; letter-spacing:.18em; color:var(--c-text-mute); margin-top:3px; }
.sp-timer.warn .sp-timer-txt b{ color:#E8A33D; }
.sp-timer.danger .sp-timer-txt b{ color:var(--c-red-bright); }

/* ── 顶部右侧控制 ── */
.sp-ctrl{ position:absolute; top:74px; right:20px; z-index:7; display:flex; gap:8px; }
.sp-ctrl button{
  width:38px; height:38px; border-radius:50%; font-size:15px;
  display:grid; place-items:center;
  color:var(--c-gold-pale);
  background:rgba(6,11,20,.94);                 /* 压住浅色图片，避免按钮看不见 */
  border:1px solid rgba(201,162,39,.55);
  box-shadow:0 3px 14px rgba(0,0,0,.66);
  backdrop-filter:blur(6px);
  transition:all .22s var(--ease);
}
.sp-ctrl button:hover{ background:rgba(201,162,39,.85); color:var(--c-ink); transform:scale(1.08); }
.sp-ctrl button.off{ opacity:.5; }

/* ── 进度条 ── */
.sp-bar{
  position:absolute; left:0; right:0; bottom:0; height:3px; z-index:8;
  background:rgba(255,255,255,.09);
}
.sp-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--c-red),var(--c-gold)); transition:width .6s var(--ease-out); }

/* ── 结束页 ── */
.sp-end{ flex:1 1 auto; display:grid; place-items:center; text-align:center; padding:40px; }
.sp-end h2{
  font-family:var(--f-serif); font-size:clamp(26px,4vw,50px); letter-spacing:.1em;
  color:var(--c-gold-light); margin:0 0 14px;
}
.sp-end p{ color:var(--c-text-mute); margin:0 0 8px; }
.sp-end .big{ font-family:var(--f-num); font-size:clamp(40px,6vw,74px); color:var(--c-paper); }

/* ══════ 响应式 ══════ */
@media (max-width:1000px){
  .sp-body{
    grid-template-columns:1fr; align-content:start; align-items:start;
    overflow-y:auto; gap:16px;
  }
  .sp-left{ overflow:visible; }
  .sp-right{ order:-1; }
  .sp-fig{ flex:none; height:clamp(140px,24vh,240px); }
  .sp-shot span{ display:none; }
  .sp-shot img{ height:42px; }
  .sp-cue li{ font-size:clamp(14px,3.2vw,20px); }
  .sp-foot{ gap:10px; padding-left:14px; padding-right:14px; }
  .sp-hud{ gap:8px; }
  .sp-nav button{ padding:10px 12px; font-size:0; gap:0; }
  .sp-nav button span{ font-size:16px; }
  .sp-timer{ width:62px; }
}
@media (max-width:640px){
  .sp-zone{ font-size:13px; }
  .sp-stat-n{ font-size:clamp(32px,10vw,54px); }
}
/* 矮屏（教室投影常见 768p 以下）压缩纵向留白 */
@media (max-height:780px){
  .sp-top{ height:56px; }
  .sp-title{ font-size:clamp(22px,2.8vw,38px); margin-bottom:8px; }
  .sp-one{ font-size:clamp(14px,1.5vw,21px); margin-bottom:12px; }
  .sp-stat-n{ font-size:clamp(32px,4.6vw,62px); }
  .sp-fig{ min-height:100px; }
  .sp-cue li{ font-size:clamp(14px,1.6vw,22px); }
  .sp-foot{ padding-top:8px; padding-bottom:12px; }
}