:root {
  --ink: #f3e6cf;
  --gold: #e9b949;
  --bg: #0b0709;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: radial-gradient(ellipse at center, #1c1015 0%, var(--bg) 70%); color: var(--ink); font-family: "Noto Serif SC", "Songti SC", serif; overflow: hidden; }

#player { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 2vh 2vw; }
#stage {
  position: relative; width: min(96vw, calc((100vh - 70px) * 16 / 9)); aspect-ratio: 16 / 9;
  border-radius: 10px; overflow: hidden; background: #000;
  box-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(233,185,73,.15);
}
#stage:fullscreen { width: 100vw; height: 100vh; border-radius: 0; aspect-ratio: auto; }
#screen { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* 字幕 */
#subtitle { position: absolute; left: 0; right: 0; bottom: 8.5%; text-align: center; pointer-events: none; padding: 0 8%; }
#subtitle span {
  display: inline-block; font-size: clamp(14px, 2.1vw, 28px); font-weight: 600; letter-spacing: .08em; line-height: 1.6;
  color: #fbf1dc; text-shadow: 0 2px 6px rgba(0,0,0,.9), 0 0 24px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s;
}
#subtitle span.on { opacity: 1; transform: none; }

/* 海报 */
#poster {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  background: radial-gradient(ellipse at center, rgba(20,8,14,0), rgba(8,4,6,.55));
  align-items: end; padding-bottom: 7%;
  transition: opacity .8s, visibility .8s; z-index: 5;
}
#poster.hide { opacity: 0; visibility: hidden; }
.poster-kicker { letter-spacing: .5em; font-size: clamp(12px, 1.3vw, 17px); color: rgba(243,230,207,.7); }
#poster h1 { font-family: "Ma Shan Zheng", "STKaiti", "KaiTi", serif; font-weight: 400; font-size: clamp(44px, 8vw, 118px); color: var(--ink); letter-spacing: .12em; margin: .15em 0 .3em; text-shadow: 0 0 40px rgba(233,185,73,.35); }
#bigPlay { background: none; border: 0; cursor: pointer; width: clamp(64px, 8vw, 104px); transition: transform .3s; }
#bigPlay:hover { transform: scale(1.1); }
#bigPlay svg { width: 100%; display: block; filter: drop-shadow(0 0 18px rgba(233,185,73,.55)); }
#bigPlay circle { fill: rgba(233,185,73,.12); stroke: var(--gold); stroke-width: 2; }
#bigPlay path { fill: var(--gold); }
.poster-note { margin-top: 1.2em; font-size: clamp(11px, 1.1vw, 14px); color: rgba(243,230,207,.5); letter-spacing: .2em; }

/* 控制条 */
#controls {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 26px 16px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.75)); opacity: 0; transition: opacity .4s; z-index: 4;
}
#stage:hover #controls, #stage.paused #controls { opacity: 1; }
.ctl { background: none; border: 0; color: var(--ink); cursor: pointer; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 6px; flex-shrink: 0; }
.ctl:hover { background: rgba(255,255,255,.1); }
.ctl svg { width: 22px; height: 22px; fill: currentColor; }
.ctl.text { width: auto; padding: 0 10px; font-family: inherit; font-size: 13px; letter-spacing: .1em; opacity: .45; border: 1px solid rgba(243,230,207,.35); height: 28px; }
.ctl.text.on { opacity: 1; border-color: var(--gold); color: var(--gold); }
.ctl .i-pause { display: none; }
#stage.playing .ctl .i-pause { display: block; }
#stage.playing .ctl .i-play { display: none; }
#time { font-size: 13px; font-variant-numeric: tabular-nums; min-width: 92px; opacity: .85; }
#bar { position: relative; flex: 1; height: 18px; cursor: pointer; }
#bar::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 3px; background: rgba(255,255,255,.2); border-radius: 2px; }
#fill { position: absolute; left: 0; top: 8px; height: 3px; background: var(--gold); border-radius: 2px; width: 0; }
#knob { position: absolute; top: 3px; width: 13px; height: 13px; margin-left: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px var(--gold); left: 0; }
#chapters i { position: absolute; top: 0; width: 12px; height: 18px; margin-left: -6px; }
#chapters i::before { content: ""; position: absolute; left: 5px; top: 5px; width: 2px; height: 9px; background: rgba(255,255,255,.45); }
#chapters i::after { content: attr(data-t); position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-style: normal; color: var(--ink); opacity: 0; transition: opacity .2s; pointer-events: none; background: rgba(0,0,0,.7); padding: 2px 6px; border-radius: 4px; }
#chapters i:hover::after { opacity: .95; }

.credit { font-size: 12px; color: rgba(243,230,207,.4); letter-spacing: .08em; text-align: center; }