:root {
  --ink: #202630;
  --paper: #fffaf0;
  --gold: #d8b56d;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; padding: 24px; display: grid; place-items: center;
  color: var(--paper); background: radial-gradient(ellipse at 50% 10%, #34404d, #151a21 68%);
  font-family: "Noto Serif SC", "Microsoft YaHei", serif;
}
.shell { width: min(1180px, 100%); }
.topbar { height: 55px; display:flex; align-items:center; justify-content:space-between; padding:0 4px 12px; }
.brand { display:flex; align-items:center; gap:10px; color:#f2e8d3; text-decoration:none; letter-spacing:.09em; font-size:14px; }
.seal { width:27px; height:27px; border:1px solid var(--gold); color:var(--gold); display:grid; place-items:center; border-radius:50%; }
.top-actions { display:flex; gap:16px; align-items:center; color:#c6c3bc; font-size:12px; }
.chapter-tag { letter-spacing:.08em; }
.version-note { color:#aeb3ba; font-size:11px; }
.stage {
  position:relative; overflow:hidden; isolation:isolate; width:100%; aspect-ratio:16/9; min-height:450px;
  border:1px solid #ffffff22; border-radius:10px; background:#252b31; box-shadow:0 22px 70px #0009;
}
.stage { background:#5b6570; }
.scene-photo { position:absolute; inset:0; z-index:0; background:url("classroom-day.png") center 48%/cover no-repeat; filter:saturate(.9); transition:background-image .25s; }
.stage.evening .scene-photo { background-image:url("classroom-night.png"); }
.scene-vignette {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,#10192340 0%,transparent 45%,transparent 75%,#10192325),
    linear-gradient(0deg,#0b111790 0%,#0b111720 28%,transparent 55%),linear-gradient(180deg,#0c111725,transparent 25%);
}
.stage.day .scene-vignette { background:linear-gradient(90deg,#10192325 0%,transparent 48%,transparent 76%,#10192312),linear-gradient(0deg,#0b111770 0%,#0b111710 26%,transparent 52%); }
.scene-note { position:absolute; z-index:3; top:22px; left:25px; display:flex; align-items:center; gap:8px; color:#fffaf0; font-size:12px; text-shadow:0 2px 5px #000; }
.note-dot { width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold); }
.sprites { position:absolute; z-index:2; inset:0; pointer-events:none; }
.sprite {
  position:absolute; left:4%; top:6%; width:44%; height:66%; overflow:hidden;
  filter:drop-shadow(0 10px 18px #0006); animation:rise .25s both;
}
.sprite.leizi { left:3%; top:auto; bottom:2%; width:45%; height:auto; max-width:none; overflow:visible; object-fit:contain; object-position:center; }
.sprite img { position:absolute; left:0; top:0; width:100%; height:200%; object-fit:cover; object-position:center top; }
.chapter-card {
  position:absolute; z-index:4; left:7%; top:12%; width:min(440px,47%); padding:clamp(22px,4vw,48px); color:var(--ink);
  background:linear-gradient(145deg,#fffdf6f4,#f7eeddf2); border:1px solid #ffffffd9; box-shadow:0 18px 55px #0005;
  backdrop-filter:blur(10px); animation:rise .7s both;
}
.eyebrow { font-size:11px; letter-spacing:.17em; color:#9a7541; }
.chapter-card h1 { font-size:clamp(27px,3.6vw,46px); line-height:1.2; margin:15px 0 9px; letter-spacing:.035em; }
.lead { font-size:12px; letter-spacing:.1em; color:#7b7164; }
.intro { font-size:14px; line-height:1.9; color:#5f5c56; margin:20px 0 22px; }
.primary-button { border:0; background:#27333d; color:white; padding:13px 20px; font:600 13px "Noto Serif SC", "Microsoft YaHei", serif; letter-spacing:.06em; cursor:pointer; transition:.2s; }
.primary-button:hover { background:#43535e; transform:translateY(-2px); }
.primary-button span { color:var(--gold); margin-left:30px; font-size:17px; }
.chapter-links { display:flex; gap:8px; margin-top:27px; border-top:1px solid #d9d0bf; padding-top:16px; }
.chapter-links button { border:0; background:none; text-align:left; color:#786e5f; font:600 11px "Noto Serif SC", "Microsoft YaHei", serif; cursor:pointer; padding:4px 8px; }
.chapter-links button:hover { color:#b8574d; }
.chapter-links small { display:block; font-size:10px; font-weight:400; color:#a29783; margin-top:4px; }
.hud { position:absolute; z-index:5; left:26px; right:26px; top:20px; display:flex; align-items:center; justify-content:space-between; text-shadow:0 2px 6px #000; }
.hud[hidden], .dialogue[hidden] { display:none; }
.progress { width:min(270px,50%); font-size:12px; letter-spacing:.08em; color:#f5efdf; }
.progress-track { height:2px; background:#ffffff4c; margin-top:9px; }
.progress-track i { display:block; height:100%; background:var(--gold); width:0; transition:width .3s; }
.small-button { font-size:11px; background:#11192399; border:1px solid #ffffff27; color:#e8e0d2; border-radius:20px; padding:8px 12px; cursor:pointer; }
.small-button span { margin-left:5px; }
.dialogue {
  position:absolute; z-index:6; bottom:20px; left:6%; right:6%; padding:20px 25px 15px;
  background:linear-gradient(110deg,#131a21ed,#18212be8); border:1px solid #ffffff33; box-shadow:0 12px 35px #0007;
  backdrop-filter:blur(12px); min-height:155px; animation:rise .35s both;
}
.speaker-row { display:flex; gap:11px; align-items:baseline; border-bottom:1px solid #ffffff20; padding-bottom:9px; }
.speaker-name { font-weight:700; letter-spacing:.08em; color:#f2d28e; font-size:14px; }
.speaker-role { font-size:10px; color:#aeb3ba; letter-spacing:.06em; }
.line { font-size:clamp(14px,1.6vw,18px); line-height:1.8; margin:12px 0 8px; color:#fffaf0; min-height:32px; }
.dialogue-footer { display:flex; align-items:center; justify-content:flex-end; }
.next-button { border:0; background:none; color:#f1d38e; font:500 12px "Noto Serif SC", "Microsoft YaHei", serif; cursor:pointer; padding:6px; }
.next-button span { font-size:17px; margin-left:8px; }
.home-button { position:absolute; right:19px; bottom:18px; z-index:8; width:34px; height:34px; border-radius:50%; border:1px solid #ffffff45; background:#151c24aa; color:#eee4d1; font-size:19px; cursor:pointer; }
.footer { display:flex; justify-content:space-between; color:#8d9298; font-size:10px; letter-spacing:.08em; padding:13px 3px; }
.footer span:first-child { color:#aaa69c; }
@keyframes rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:760px) {
  body { display:block; min-height:100vh; min-height:100svh; padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }
  .shell { width:100%; }
  .topbar { min-height:42px; height:auto; padding:0 3px 7px; gap:6px; }
  .brand { gap:7px; font-size:12px; }
  .seal { width:23px; height:23px; }
  .top-actions { gap:7px; }
  .stage { aspect-ratio:auto; height:calc(100vh - 102px); height:calc(100dvh - 102px); min-height:min(460px,calc(100dvh - 110px)); max-height:860px; }
  .scene-photo { background-position:56% center; }
  .scene-vignette { background:linear-gradient(90deg,#10151a70,transparent 65%),linear-gradient(0deg,#0b1117f2 0%,#0b111790 34%,transparent 72%); }
  .scene-note { top:14px; left:15px; font-size:10px; }
  .chapter-card { left:6%; top:8%; width:88%; padding:24px; }
  .chapter-card h1 { font-size:30px; }
  .intro { font-size:13px; margin:13px 0 16px; }
  .chapter-links { margin-top:18px; }
  .sprite { left:-2%; top:auto; bottom:16%; width:62%; height:43%; }
  .sprite.leizi { left:2%; bottom:2%; width:95%; height:auto; }
  .sprite img { height:200%; }
  .hud { left:12px; right:12px; top:10px; }
  .small-button { padding:7px 10px; }
  .dialogue { left:3%; right:3%; bottom:8px; padding:13px 13px 10px; min-height:0; max-height:48%; overflow-y:auto; }
  .speaker-row { padding-bottom:7px; }
  .line { font-size:clamp(14px,4vw,17px); line-height:1.65; margin:9px 0 7px; min-height:0; }
  .next-button { min-height:40px; padding:7px 4px; }
  .home-button { display:none; }
  .footer { display:none; }
  .top-actions { gap:8px; }
  .chapter-tag { font-size:10px; }
  .version-note { font-size:9px; }
}
@media(max-width:760px) and (orientation:landscape) {
  .topbar { min-height:34px; }
  .stage { height:calc(100vh - 46px); height:calc(100dvh - 46px); min-height:min(320px,calc(100dvh - 54px)); max-height:none; }
  .sprite { left:-2%; top:auto; bottom:22%; width:42%; height:45%; }
  .sprite.leizi { left:2%; bottom:2%; width:42%; height:auto; }
  .dialogue { max-height:50%; }
}