/* ══════════════════════════════════════════════
   第 04 屏 · 一箸入魂 · 味觉特写
   ───────────────────────────────────────────────
   复用工程 .vwrap / .vplay（与第 03 屏同一套视频窗骨架），
   这里把比例改成 2.26:1 的影院宽幅，并叠上取景器语言：
   录制态红点 / CLIP 编号 / 时间码 / 四角取景框 / 扫描线 / 参数条。
   ══════════════════════════════════════════════ */

/* ── 影院宽幅视频窗 ── */
#s04 .ts-wrap{margin:0}
#s04 .ts-wrap video{aspect-ratio:800/352}

/* 顶条：录制态 + 片号 + 出处 + 时间码 */
#s04 .ts-top{
  display:flex;align-items:center;gap:7px;padding:6px 11px;
  border-bottom:1px solid rgba(255,206,120,.18);
  background:linear-gradient(90deg,rgba(255,214,120,.10),transparent 66%);
  font-family:var(--sans);font-size:9.5px;letter-spacing:.13em;
  color:rgba(255,224,160,.82);white-space:nowrap;
}
#s04 .ts-top i{
  flex:none;width:6px;height:6px;border-radius:50%;background:#FF4B33;
  box-shadow:0 0 8px #FF4B33;animation:tsRec 1.7s ease-in-out infinite;
}
#s04 .ts-top b{font-weight:700;color:var(--gold-bright);letter-spacing:.16em}
#s04 .ts-top span{overflow:hidden;text-overflow:ellipsis;opacity:.74;letter-spacing:.05em}
#s04 .ts-top em{
  margin-left:auto;flex:none;font-style:normal;color:var(--cyan);
  font-variant-numeric:tabular-nums;letter-spacing:.1em;
}
@keyframes tsRec{0%,100%{opacity:1}50%{opacity:.22}}

/* 画面区：取景器四角（.vplay 由工程样式提供） */
#s04 .ts-body{position:relative;background:#120200;overflow:hidden}
#s04 .cnr{
  position:absolute;width:13px;height:13px;border:1.5px solid rgba(23,209,224,.62);
  pointer-events:none;z-index:3;
}
#s04 .cnr.tl{top:6px;left:6px;border-right:0;border-bottom:0}
#s04 .cnr.tr{top:6px;right:6px;border-left:0;border-bottom:0}
#s04 .cnr.bl{bottom:6px;left:6px;border-right:0;border-top:0}
#s04 .cnr.br{bottom:6px;right:6px;border-left:0;border-top:0}

/* 底条：转码参数（等宽数字，仪表感） */
#s04 .ts-bot{
  display:flex;align-items:center;gap:6px;padding:5px 11px;
  border-top:1px solid rgba(255,206,120,.16);
  font-family:var(--sans);font-size:9px;letter-spacing:.09em;
  color:rgba(255,224,160,.58);font-variant-numeric:tabular-nums;white-space:nowrap;
}
#s04 .ts-bot span{padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.055)}
#s04 .ts-bot u{
  margin-left:auto;text-decoration:none;color:rgba(23,209,224,.8);letter-spacing:.12em;
}

/* ── 味觉指纹：把「味道」量化为数据 ── */
#s04 .ts-fp{
  margin-top:7px;padding:9px 12px 10px;border-radius:13px;
  border:1px solid rgba(23,209,224,.2);
  background:linear-gradient(168deg,rgba(9,30,38,.6),rgba(5,14,20,.78));
  box-shadow:inset 0 1px 0 rgba(255,231,206,.07);
}
#s04 .ts-fp h4{
  display:flex;align-items:center;gap:7px;margin-bottom:8px;
  font-family:var(--serif);font-size:11.8px;letter-spacing:.15em;color:var(--cyan);
}
#s04 .ts-fp h4::before{
  content:"";flex:none;width:3px;height:11px;border-radius:2px;
  background:var(--cyan);box-shadow:0 0 8px var(--cyan);
}
#s04 .ts-bars{display:flex;align-items:flex-end;gap:7px;height:58px}
#s04 .ts-b{
  flex:1 1 0;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;gap:4px;
}
#s04 .ts-b i{
  display:block;width:100%;max-width:32px;height:var(--h);border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,var(--cyan),rgba(23,209,224,.28));
  box-shadow:0 0 12px rgba(23,209,224,.32);
  transform-origin:bottom;animation:tsBar .85s cubic-bezier(.2,.9,.3,1) both;
  animation-delay:var(--d,0s);
}
#s04 .ts-b:nth-child(odd) i{
  background:linear-gradient(180deg,var(--gold-bright),rgba(255,214,107,.3));
  box-shadow:0 0 12px rgba(255,214,107,.3);
}
#s04 .ts-b b{font-family:var(--serif);font-size:11.4px;color:var(--ink);line-height:1}
#s04 .ts-b em{
  font-style:normal;font-size:9.3px;line-height:1;color:rgba(255,224,160,.6);
  font-variant-numeric:tabular-nums;
}
@keyframes tsBar{from{transform:scaleY(.05);opacity:.35}to{transform:scaleY(1);opacity:1}}
#s04 .ts-fp p{
  margin-top:7px;padding-top:6px;border-top:1px dashed rgba(23,209,224,.18);
  font-size:11.3px;line-height:1.72;color:rgba(255,238,216,.84);
}
#s04 .ts-fp p b{color:var(--gold-bright);font-weight:700}
#s04 .ts-fp p i{font-style:normal;color:var(--cyan)}

/* ── 名菜索引：把赣菜代表菜编号上架（与味觉指纹互补：一个讲维度、一个讲具体） ── */
#s04 .ts-idx{margin-top:7px}
#s04 .ts-idx h4{
  display:flex;align-items:center;gap:7px;margin-bottom:7px;
  font-family:var(--serif);font-size:11.8px;letter-spacing:.15em;color:var(--gold-bright);
}
#s04 .ts-idx h4::before{
  content:"";flex:none;width:3px;height:11px;border-radius:2px;
  background:var(--gold-bright);box-shadow:0 0 8px var(--gold-bright);
}
#s04 .ts-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#s04 .ts-d{
  position:relative;overflow:hidden;padding:6px 9px 6px 11px;border-radius:9px;
  border:1px solid rgba(255,206,120,.17);
  background:linear-gradient(168deg,rgba(255,214,120,.075),rgba(255,214,120,.02));
}
#s04 .ts-d::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--gold-bright),rgba(255,214,107,.18));
}
#s04 .ts-d b{display:block;font-family:var(--serif);font-size:11.9px;line-height:1.2;color:var(--ink)}
#s04 .ts-d em{
  display:block;margin-top:2px;font-style:normal;font-size:8.6px;line-height:1.2;
  letter-spacing:.1em;color:var(--cyan);font-variant-numeric:tabular-nums;
}
#s04 .ts-d span{display:block;margin-top:3px;font-size:9.5px;line-height:1.44;color:rgba(255,238,216,.68)}