/* ============================================================
   三体 · 像素歌剧  —  剧院样式
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  --gold:#c9a96e;
  --gold-dim:rgba(201,169,110,.45);
  --velvet:#7a0e1e;
  --velvet-dark:#4a0812;
  --bg:#050507;
  --fg:#e8e3d8;
  --muted:#8a8577;
}

html,body{height:100%}
body{
  background:
    radial-gradient(ellipse at 50% -10%, #14100a 0%, transparent 55%),
    radial-gradient(ellipse at 50% 115%, #0d0a06 0%, transparent 55%),
    var(--bg);
  color:var(--fg);
  font-family:"Courier New","SimSun",monospace;
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;
  overflow:hidden;
  user-select:none;
}

#theater{width:min(96vw,1180px)}

/* ---------- 舞台拱框 ---------- */
#proscenium{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border:6px solid #2a2118;
  outline:1px solid var(--gold-dim);
  outline-offset:3px;
  box-shadow:
    0 0 0 2px #0a0805,
    0 30px 80px rgba(0,0,0,.85),
    inset 0 0 60px rgba(0,0,0,.6);
  background:#000;
  overflow:hidden;
}

#screen-wrap{position:absolute;inset:0;background:#000}

#stage{
  width:100%;height:100%;
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

/* 暗角 */
#vignette{
  position:absolute;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(0,0,0,.5) 100%);
}
/* 舞台顶光 */
#vignette::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(255,240,210,.06) 0%, transparent 22%);
}

/* 全屏闪光 */
#flash{
  position:absolute;inset:0;pointer-events:none;z-index:6;
  background:#fff;opacity:0;
  transition:opacity .45s ease-out;
}

/* ---------- 幕布 ---------- */
.curtain{
  position:absolute;top:0;bottom:0;width:52%;z-index:20;
  background:
    repeating-linear-gradient(90deg,
      var(--velvet-dark) 0px,
      var(--velvet) 14px,
      #9c1a2c 22px,
      var(--velvet) 30px,
      var(--velvet-dark) 44px);
  box-shadow:inset 0 -30px 40px rgba(0,0,0,.6);
  transition:transform 1.8s cubic-bezier(.7,0,.25,1);
}
.curtain.left{left:0;transform-origin:left;border-right:3px solid rgba(201,169,110,.55)}
.curtain.right{right:0;transform-origin:right;border-left:3px solid rgba(201,169,110,.55)}
.curtain::after{ /* 底部褶皱穗边 */
  content:'';position:absolute;left:0;right:0;bottom:0;height:14px;
  background:radial-gradient(circle at 8px -4px, transparent 12px, var(--gold) 13px, #8a6d3a 15px, transparent 16px);
  background-size:22px 14px;background-repeat:repeat-x;
  opacity:.8;
}
.curtain.left.open{transform:translateX(-94%)}
.curtain.right.open{transform:translateX(94%)}

/* 顶部帷幕 */
#valance{
  position:absolute;top:0;left:0;right:0;height:9%;z-index:21;
  background:
    repeating-linear-gradient(90deg,
      var(--velvet-dark) 0px,var(--velvet) 16px,#9c1a2c 26px,var(--velvet) 36px,var(--velvet-dark) 50px);
  box-shadow:0 8px 18px rgba(0,0,0,.75);
  pointer-events:none;
}
#valance::after{
  content:'';position:absolute;left:0;right:0;bottom:-9px;height:10px;
  background:radial-gradient(circle at 11px -3px, transparent 11px, var(--velvet) 12px, var(--velvet-dark) 14px, transparent 15px);
  background-size:28px 10px;background-repeat:repeat-x;
}

/* 脚灯 */
#footlights{
  position:absolute;left:0;right:0;bottom:0;height:10px;z-index:22;
  display:flex;justify-content:space-around;align-items:flex-end;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.8));
  pointer-events:none;
}
#footlights i{
  width:8px;height:8px;border-radius:50%;
  background:#ffd9a0;
  box-shadow:0 0 12px 3px rgba(255,200,120,.55), 0 -14px 30px 8px rgba(255,190,110,.12);
  animation:foot 3s ease-in-out infinite;
}
#footlights i:nth-child(odd){animation-delay:1.4s}
@keyframes foot{0%,100%{opacity:.75}50%{opacity:1}}

/* ---------- 开幕界面 ---------- */
#overture{
  position:absolute;inset:0;z-index:30;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(30,22,12,.9), rgba(2,2,4,.97) 75%),
    #020204;
  transition:opacity 1.2s ease;
}
#overture.gone{opacity:0;pointer-events:none}
.ov-frame{
  text-align:center;
  border:1px solid var(--gold-dim);
  padding:46px 70px;
  position:relative;
  background:rgba(0,0,0,.35);
}
.ov-frame::before,.ov-frame::after{
  content:'';position:absolute;width:18px;height:18px;
  border:1px solid var(--gold);
}
.ov-frame::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.ov-frame::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.ov-top{font-size:11px;letter-spacing:.55em;color:var(--muted);margin-bottom:22px}
.ov-title{
  font-family:"SimSun","STSong",serif;
  font-size:clamp(56px,9vw,110px);
  font-weight:400;letter-spacing:.18em;
  color:var(--fg);
  text-shadow:0 0 34px rgba(201,169,110,.35);
}
.ov-title span{color:var(--gold);font-size:.5em;vertical-align:.35em}
.ov-en{margin-top:10px;font-size:12px;letter-spacing:.5em;color:var(--gold)}
.ov-desc{margin-top:22px;font-size:11px;letter-spacing:.3em;color:var(--muted)}
#btnStart{
  margin-top:34px;
  font-family:inherit;font-size:14px;letter-spacing:.45em;text-indent:.45em;
  color:var(--gold);background:transparent;
  border:1px solid var(--gold);
  padding:15px 44px;cursor:pointer;
  transition:all .35s ease;
}
#btnStart:hover{background:var(--gold);color:#120c05;box-shadow:0 0 30px rgba(201,169,110,.45)}
.ov-hint{margin-top:20px;font-size:10px;letter-spacing:.25em;color:#57534a}

/* ---------- 幕间标题卡 ---------- */
#actcard{
  position:absolute;inset:0;z-index:25;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(2,2,4,.88);
  opacity:1;transition:opacity .8s ease;
  pointer-events:none;
}
#actcard.hidden{opacity:0}
.ac-num{font-size:15px;letter-spacing:.7em;text-indent:.7em;color:var(--gold)}
.ac-rule{width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:18px 0}
.ac-title{
  font-family:"SimSun","STSong",serif;
  font-size:clamp(34px,5vw,58px);letter-spacing:.3em;text-indent:.3em;
  text-shadow:0 0 26px rgba(201,169,110,.3);
}
.ac-sub{margin-top:16px;font-size:11px;letter-spacing:.4em;color:var(--muted)}

/* ---------- 字幕 ---------- */
#subtitle{
  position:absolute;left:0;right:0;bottom:6.5%;z-index:15;
  text-align:center;pointer-events:none;
  padding:0 8%;
  transition:opacity .4s ease;
}
#subtitle.hidden{opacity:0}
#speaker{color:var(--gold);margin-right:.8em;font-size:clamp(11px,1.35vw,16px)}
#speaker::before{content:'【'}
#speaker::after{content:'】'}
#speaker:empty{display:none}
#line{
  color:#f2ede0;
  font-size:clamp(13px,1.6vw,19px);
  letter-spacing:.12em;
  text-shadow:0 1px 3px #000, 0 0 14px rgba(0,0,0,.9);
}

/* ---------- 控制台 ---------- */
#controls{
  margin-top:14px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 16px;
  border:1px solid rgba(201,169,110,.25);
  background:linear-gradient(180deg,#14100b,#0b0906);
}
#controls button{
  font-family:inherit;
  background:transparent;color:var(--gold);
  border:1px solid rgba(201,169,110,.4);
  width:34px;height:28px;cursor:pointer;font-size:12px;
  transition:all .25s ease;
}
#controls button:hover{background:var(--gold);color:#120c05}
#controls button.off{color:#57534a;border-color:#33302a;text-decoration:line-through}
.ctl-left{display:flex;gap:8px}
#actlist{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
#actlist button{
  width:auto;padding:0 10px;font-size:11px;letter-spacing:.1em;
  color:var(--muted);
}
#actlist button:hover{color:#120c05}
#actlist button.now{
  background:var(--gold);color:#120c05;
  box-shadow:0 0 14px rgba(201,169,110,.4);
}
.ctl-right{font-size:10px;letter-spacing:.3em;color:#57534a;white-space:nowrap}

@media(max-width:760px){
  .ctl-right{display:none}
  .ov-frame{padding:30px 26px}
}