:root {
  --gold: #e8b04b; --gold2: #f8d98a; --red: #c0392b; --blue: #2e6fb0; --green: #2f9e5a;
  --ink: #fff8ec; --ink2: rgba(255, 248, 236, .72);
  --glass: rgba(16, 20, 34, .58); --glass2: rgba(16, 20, 34, .78);
  --line: rgba(248, 217, 138, .28);
  --kai: "STKaiti", "KaiTi", "楷体", "Kaiti SC", serif;
  --sans: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  --u: clamp(14px, 1.2vw, 24px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0c1220; color: var(--ink); font-family: var(--sans); font-size: var(--u); user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
svg { fill: currentColor; }

#pano, #fx { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#pano { cursor: grab; touch-action: none; }
#pano:active { cursor: grabbing; }
#fx { pointer-events: none; }
#hotspots { position: fixed; inset: 0; pointer-events: none; }

.glass { background: var(--glass); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border: 1px solid var(--line); box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }

/* ---------- 顶栏 ---------- */
#app .hud { opacity: 0; transition: opacity .8s; }
#app.live .hud { opacity: 1; }
#topbar { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between; padding: 1.1em 1.4em; pointer-events: none; }
#brand { pointer-events: auto; padding: .55em 1.1em .6em; border-radius: 1em; }
#brand .t { font-family: var(--kai); font-size: 1.9em; color: var(--gold2); letter-spacing: .12em; line-height: 1.1; text-shadow: 0 2px 10px rgba(232, 176, 75, .45); }
#brand .s { font-size: .82em; color: var(--ink2); margin-top: .15em; }
#scene-name { font-size: 1.1em; font-weight: 700; color: var(--ink); margin-top: .25em; }
#right { display: flex; gap: .8em; align-items: center; pointer-events: auto; }
/* 草原勋章：放大、名字常显；未获得时灰暗，获得后金光 */
#badges { position: relative; display: flex; gap: 1em; padding: .6em 1em 1.9em; border-radius: 1.2em; transform-origin: top right; }
.badge { position: relative; width: 4.6em; height: 4.6em; flex: none; }
.badge-art { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #4a4f5e, #262a36); border: 2px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .3); transition: all .6s; }
.badge-art svg { width: 58%; height: 58%; }
.badge span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: .3em; white-space: nowrap; font-size: .85em; font-weight: 700; color: var(--ink2); transition: color .4s; }
.badge.on span { color: var(--gold2); text-shadow: 0 0 8px rgba(248, 217, 138, .7); }
.badge.on .badge-art { background: radial-gradient(circle at 35% 30%, #fff1b8, var(--gold) 55%, #a8721e); border-color: #fff3c4; color: #6b3d0c; box-shadow: 0 0 22px rgba(248, 217, 138, .85), inset 0 -3px 6px rgba(0, 0, 0, .25); }
#badges.art .badge-art { background: none; border: 0; box-shadow: none; overflow: visible; }
#badges.art .badge-art img { width: 122%; height: 122%; object-fit: contain; filter: grayscale(1) brightness(.5); opacity: .8; transition: filter .8s, opacity .8s; }
#badges.art .badge.on .badge-art img { filter: drop-shadow(0 0 12px rgba(248, 217, 138, .95)); opacity: 1; }
.badge.pop .badge-art { animation: pop .9s cubic-bezier(.2, 1.6, .4, 1); }
#badges.spot { animation: spot 1s ease-in-out 6 alternate; box-shadow: 0 0 0 3px var(--gold2), 0 0 46px rgba(248, 217, 138, .9); }
@keyframes spot { to { transform: scale(1.14); } }
#badges.spot::after { content: "▲ 每闯过一关，点亮一枚"; position: absolute; right: .6em; top: calc(100% + .7em); white-space: nowrap; padding: .35em .9em; border-radius: 1em; background: linear-gradient(135deg, var(--gold2), var(--gold)); color: #2a1804; font-weight: 700; font-size: 1.05em; }
.badge.peek .badge-art { animation: peek .9s ease-out; }
@keyframes peek { 40% { transform: scale(1.4) rotate(-10deg); filter: brightness(1.7); } }
@keyframes pop { 0% { transform: scale(.3) rotate(-40deg); } 100% { transform: scale(1) rotate(0); } }
.icon-btn { width: 2.9em; height: 2.9em; border-radius: .9em; display: grid; place-items: center; }
.icon-btn svg { width: 55%; height: 55%; }
.icon-btn:hover { background: rgba(232, 176, 75, .25); }

/* ---------- 核心问题 ---------- */
#question { position: fixed; top: 6.4em; left: 50%; transform: translate(-50%, -300%); max-width: 56vw; padding: .7em 1.3em; border-radius: 1em; display: flex; gap: .8em; align-items: center; cursor: pointer; transition: transform .7s cubic-bezier(.2, 1.2, .3, 1), max-width .5s; }
#question.show { transform: translate(-50%, 0); }
#question .q { flex: none; font-family: var(--kai); color: #3a2205; background: var(--gold); border-radius: .5em; padding: .15em .5em; font-size: .95em; }
#question-text { font-family: var(--kai); font-size: 1.4em; font-weight: 700; line-height: 1.4; }
#question.mini { max-width: 7.5em; }
#question.mini #question-text { display: none; }

/* ---------- 底部导航 ---------- */
#nav { position: fixed; bottom: 1.1em; left: 50%; transform: translateX(-50%); display: flex; gap: .35em; padding: .45em; border-radius: 1.4em; align-items: center; }
#nav .step { display: flex; align-items: center; gap: .45em; padding: .45em .8em; font-size: 1.05em; white-space: nowrap; border-radius: 1em; color: var(--ink2); transition: all .3s; }
#nav .step i { font-style: normal; width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); font-size: .85em; }
#nav .step.past i { background: rgba(232, 176, 75, .35); color: var(--gold2); }
#nav .step.on { background: linear-gradient(135deg, rgba(232, 176, 75, .95), rgba(192, 120, 40, .95)); color: #2a1804; font-weight: 700; }
#nav .step.on i { background: #fff3cf; color: #7a4a10; }
#nav .next { margin-left: .4em; padding: .55em 1.2em; white-space: nowrap; font-size: 1.05em; border-radius: 1em; background: rgba(46, 111, 176, .85); font-weight: 700; }
#nav .next:hover { background: #3a86d4; }

/* ---------- 热点 ---------- */
.hs { position: absolute; left: 0; top: 0; pointer-events: auto; width: 4em; height: 4em; display: grid; place-items: center; will-change: transform; }
.hs .hs-core { position: relative; z-index: 2; width: 3.1em; height: 3.1em; border-radius: 50%; display: grid; place-items: center; color: #4a2a06; background: radial-gradient(circle at 35% 30%, #fff6d0, var(--gold) 60%, #b07a24); box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 6px 22px rgba(0, 0, 0, .45), 0 0 26px rgba(248, 217, 138, .8); transition: transform .25s; }
.hs .hs-core svg { width: 55%; height: 55%; }
.hs:hover .hs-core { transform: scale(1.14); }
.hs .hs-ring { position: absolute; inset: .45em; border-radius: 50%; border: 3px solid rgba(255, 236, 170, .9); animation: ring 2.2s infinite; }
.hs .hs-ring::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid rgba(255, 236, 170, .6); animation: ring 2.2s 1.1s infinite; }
@keyframes ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(2); opacity: 0; } }
.hs .hs-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: .25em; white-space: nowrap; padding: .35em .95em; border-radius: 1em; background: var(--glass2); border: 1px solid var(--line); font-size: 1.15em; font-weight: 700; color: var(--ink); text-shadow: 0 1px 2px #000; }
.hs.big { width: 5.4em; height: 5.4em; }
.hs.big .hs-core { width: 4.3em; height: 4.3em; background: radial-gradient(circle at 35% 30%, #fff, #ffd56b 45%, #d4861c); }
.hs.big .hs-label { font-size: 1.4em; font-weight: 700; background: linear-gradient(135deg, rgba(232, 176, 75, .95), rgba(192, 110, 30, .95)); color: #2a1804; text-shadow: none; }
.hs .hs-check { position: absolute; z-index: 3; right: .1em; top: .1em; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--green); color: #fff; display: none; place-items: center; box-shadow: 0 0 0 2px #fff; }
.hs .hs-check svg { width: 75%; }
.hs.done .hs-check { display: grid; }
.hs.done .hs-ring { animation-duration: 4s; opacity: .4; }

/* ---------- 草原之窗 ---------- */
.win { position: absolute; left: 0; top: 0; pointer-events: auto; will-change: transform; }
.win-frame { position: relative; aspect-ratio: 16/10; border-radius: .6em; padding: 4.2%; background: linear-gradient(145deg, #9a5b2c, #5b3014 60%, #7a4520); box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(255, 220, 160, .35); }
.win-frame::before { content: ""; position: absolute; inset: 3%; border: 2px solid rgba(232, 176, 75, .7); border-radius: .4em; pointer-events: none; z-index: 3; }
.win-pic { position: absolute; inset: 4.2%; border-radius: .25em; background-size: cover; background-position: center; filter: grayscale(.85) brightness(.55) blur(2px); transition: filter 1.4s; }
.win-glass { position: absolute; inset: 4.2%; border-radius: .25em; background: linear-gradient(180deg, rgba(200, 220, 255, .25), rgba(20, 30, 50, .35)); transition: opacity 1.2s; }
.win-glass::after { content: "Zz"; position: absolute; right: 8%; top: 8%; font-family: var(--kai); font-size: 1.8em; color: rgba(255, 255, 255, .7); animation: zz 2.4s infinite; }
@keyframes zz { 50% { transform: translateY(-8px); opacity: .4; } }
.win-shine { position: absolute; inset: 4.2%; border-radius: .25em; overflow: hidden; pointer-events: none; }
.win.awake .win-pic { filter: none; animation: kb 14s ease-in-out infinite alternate; }
.win.awake .win-glass { opacity: 0; }
.win.awake .win-shine::after { content: ""; position: absolute; top: -50%; bottom: -50%; width: 30%; left: -40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: shine 1.6s .1s ease-out 1; }
@keyframes kb { from { background-size: 100%; background-position: 40% 50%; } to { background-size: 118%; background-position: 60% 45%; } }
@keyframes shine { to { left: 130%; } }
.win.hover .win-frame { outline: 4px solid var(--gold2); outline-offset: 4px; transform: scale(1.03); }
.win-title { text-align: center; margin-top: .55em; font-family: var(--kai); font-size: 1.6em; font-weight: 700; color: var(--gold2); text-shadow: 0 2px 6px #000; }
.win-tag { margin: .3em auto 0; width: max-content; padding: .25em 1em; border-radius: 1em; background: var(--glass2); font-size: 1.1em; color: var(--ink2); border: 1px dashed var(--line); }
.win.awake .win-tag { background: var(--gold); color: #2a1804; border-style: solid; font-weight: 700; }

#clips { position: fixed; bottom: 5.6em; left: 50%; transform: translate(-50%, 40px); opacity: 0; visibility: hidden; display: flex; gap: .8em; align-items: center; padding: .55em .8em; border-radius: 1.2em; transition: transform .6s, opacity .5s, visibility .5s; }
#clips.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.clips-tip { font-size: 1em; white-space: nowrap; color: var(--ink2); margin-right: .3em; }
.clip { display: flex; align-items: center; gap: .4em; padding: .6em 1.3em; font-size: 1.25em; white-space: nowrap; border-radius: 1em; background: linear-gradient(135deg, #3a86d4, #23558c); cursor: grab; touch-action: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.clip svg { width: 1.2em; height: 1.2em; }
.clip.on { background: linear-gradient(135deg, var(--gold), #c47a20); color: #2a1804; }
.clip.ghost { position: fixed; z-index: 99; pointer-events: none; transform: translate(-50%, -50%) scale(1.1) rotate(-4deg); opacity: .92; }
#frame-card { position: fixed; bottom: 10.4em; left: 50%; transform: translate(-50%, 30px); opacity: 0; padding: .7em 1.3em; border-radius: 1em; font-family: var(--kai); font-size: 1.5em; transition: all .5s; pointer-events: none; max-width: 80vw; text-align: center; }
#frame-card.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#frame-card b { color: var(--gold2); }

/* ---------- 小蒙 ---------- */
#xm { position: fixed; left: 1.3em; bottom: 1.1em; display: flex; align-items: flex-end; gap: .4em; transform: translateX(-130%); transition: transform .8s cubic-bezier(.2, 1.3, .3, 1), opacity .5s; cursor: pointer; z-index: 5; }
#xm.show { transform: translateX(0); }
#xm.rest #xm-bubble { opacity: 0; transform: scale(.8); pointer-events: none; }
#xm-avatar { width: 9em; height: 9em; flex: none; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5)); }
#xm-avatar img, #xm-avatar svg { width: 100%; height: 100%; object-fit: contain; }
#xm-avatar.full { width: 11.5em; height: 13.5em; margin-bottom: -.6em; }
/* 大尺寸数字人：人物站在屏幕左侧，约占 78% 屏高；气泡在头部右侧 */
#xm.big { left: 0; bottom: 0; width: 0; height: 0; display: block; transform: none; opacity: 0; transition: opacity .7s; pointer-events: none; }
#xm.big.show { opacity: 1; }
#xm.big #xm-avatar { position: absolute; left: calc(12vw - 42vh); bottom: -3.5vh; width: 84vh; height: 84vh; margin: 0; pointer-events: none; }
#xm.big #xm-avatar img { object-position: center bottom; }
#xm.big #xm-bubble { position: absolute; left: calc(12vw + 17vh); bottom: 55vh; margin: 0; width: max-content; max-width: 27vw; pointer-events: auto; }
#xm-avatar.bounce { animation: bounce .6s; }
@keyframes bounce { 30% { transform: translateY(-14px) scale(1.04); } 60% { transform: translateY(2px); } }
#xm.talking #xm-avatar { animation: talk .5s infinite alternate; }
@keyframes talk { to { transform: translateY(-3px) rotate(1.5deg); } }
#xm-bubble { position: relative; max-width: 25vw; min-width: 12em; margin-bottom: 5.2em; padding: .85em 1.15em; border-radius: 1.1em 1.1em 1.1em .2em; font-size: 1.35em; line-height: 1.55; transition: all .4s; transform-origin: left bottom; }
#xm-bubble .name { display: block; font-size: .75em; color: var(--gold2); font-weight: 700; margin-bottom: .15em; letter-spacing: .1em; }

/* ---------- 播放器 ---------- */
#player { position: fixed; right: 1.3em; bottom: 1.1em; width: 21em; padding: .7em .9em; border-radius: 1.1em; display: grid; grid-template-columns: auto 1fr auto; gap: .2em .7em; align-items: center; transform: translateY(160%); transition: transform .5s; z-index: 6; }
#player.show { transform: translateY(0); }
#player-btn { grid-row: span 2; width: 2.8em; height: 2.8em; border-radius: 50%; background: var(--gold); color: #3a2205; display: grid; place-items: center; }
#player-btn svg { width: 55%; }
#player-title { font-size: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#player-stop { grid-row: span 2; width: 2em; height: 2em; border-radius: .6em; display: grid; place-items: center; color: var(--ink2); }
#player-stop svg { width: 60%; }
#player-bar { height: .45em; border-radius: 1em; background: rgba(255, 255, 255, .15); cursor: pointer; position: relative; }
#player-fill { height: 100%; width: 0; border-radius: 1em; background: linear-gradient(90deg, var(--gold2), var(--gold)); }
#player-time { position: absolute; right: 0; top: -1.6em; font-size: .7em; color: var(--ink2); }
#player:not(.paused) #player-btn { box-shadow: 0 0 0 0 rgba(248, 217, 138, .7); animation: beat 1.2s infinite; }
@keyframes beat { 70% { box-shadow: 0 0 0 12px rgba(248, 217, 138, 0); } }

/* ---------- 演出提示 / 图形谱提示栏 / 魔法棒 ---------- */
#cue { position: fixed; top: 10.6em; left: 50%; transform: translate(-50%, -20px); opacity: 0; text-align: center; padding: .7em 2.2em .8em; border-radius: 1.2em; transition: all .6s; pointer-events: none; }
#cue.show { opacity: 1; transform: translate(-50%, 0); }
#cue.flash { animation: cue 1s; }
@keyframes cue { 0% { transform: translate(-50%, 0) scale(.8); box-shadow: 0 0 60px rgba(248, 217, 138, .9); } }
.cue-title { font-family: var(--kai); font-size: 3em; font-weight: 700; color: var(--gold2); text-shadow: 0 2px 14px rgba(232, 176, 75, .6); }
.cue-sub { font-size: 1.5em; margin-top: .15em; }
#dock { position: fixed; left: 50%; bottom: 5.4em; transform: translate(-50%, 40px); opacity: 0; visibility: hidden; width: auto; padding: .5em .8em; border-radius: 1.2em; transition: transform .6s, opacity .5s, visibility .5s; }
#dock.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
#dock .gs { height: 34vh; width: auto; aspect-ratio: 480 / 372; }
#app.docked #xm, #app.wand-on #xm { opacity: 0; pointer-events: none; }
#app.wand-on #hotspots, #app.docked #hotspots { opacity: .25; transition: opacity .6s; }
#hotspots { transition: opacity .6s; }
#wand-dock { position: fixed; left: 50%; bottom: 5.6em; transform: translate(-50%, 40px); opacity: 0; visibility: hidden; transition: transform .6s, opacity .5s, visibility .5s; }
#wand-dock.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.wand { width: min(54vw, 44em); padding: 1em 1.4em; border-radius: 1.3em; text-align: center; background: var(--glass2); border: 1px solid var(--line); backdrop-filter: blur(14px); }
.wand-head { display: flex; gap: .5em; align-items: center; justify-content: center; color: var(--gold2); font-size: 1.1em; }
.wand-head svg { width: 1.4em; }
.wand-mood { font-family: var(--kai); font-size: 2.8em; font-weight: 700; margin: .2em 0; transition: color .4s; }
.wand-mood.m0 { color: #9fd3ff; } .wand-mood.m1 { color: #ffe6a8; } .wand-mood.m2 { color: #ffb36b; }
.wand-track { display: flex; align-items: center; gap: .8em; font-family: var(--kai); font-size: 1.6em; font-weight: 700; }
.wand-track input { flex: 1; -webkit-appearance: none; appearance: none; height: .8em; border-radius: 1em; background: linear-gradient(90deg, #6fb4f0, #f6d27a, #f08a4b); outline: none; }
.wand-track input::-webkit-slider-thumb { -webkit-appearance: none; width: 2.4em; height: 2.4em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--gold) 60%, #b07a24); box-shadow: 0 0 18px rgba(248, 217, 138, .9); cursor: grab; }
.wand-label { color: var(--ink); font-size: 1.25em; margin: .4em 0 .6em; }

/* ---------- 图形谱 ---------- */
.gs { display: block; }
.gs-band { fill: rgba(255, 255, 255, .06); transition: fill .3s; }
.gs-band.on { fill: rgba(248, 217, 138, .22); stroke: rgba(248, 217, 138, .8); stroke-width: 2; }
.gs-icon { opacity: .95; }
.gs-mark { transition: transform .2s; }
.gs-mark.t-circle circle { fill: #e04a3c; } .gs-mark.t-tri path { fill: #23a6cf; }
.gs-mark.t-wave path { stroke: #7fbf86; } .gs-mark.t-arc path { stroke: #f0a040; }
.gs-mark > * { opacity: .55; transition: opacity .2s, filter .2s; }
.gs-mark.past > * { opacity: 1; }
.gs-mark.now > * { opacity: 1; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px #ffd56b); }
.gs-mark.now > * { animation: markpulse .45s infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes markpulse { to { transform: scale(1.4); } }
.gs-wrap { background: #fffaf0; border-radius: 1em; padding: .6em; }
.gs-wrap .gs { height: 52vh; width: 100%; }
.gs-wrap .gs-band { fill: rgba(60, 40, 10, .05); }
.gs-wrap .gs-band.on { fill: rgba(232, 176, 75, .3); stroke: #e8b04b; }
#dock .gs-icon { filter: drop-shadow(0 0 2px #fff); }

/* ---------- 弹窗 ---------- */
#modal { position: fixed; inset: 0; display: none; place-items: center; background: rgba(5, 8, 16, .45); backdrop-filter: blur(3px); z-index: 20; }
#modal.show { display: grid; animation: fade .35s; }
@keyframes fade { from { opacity: 0; } }
#modal-card { position: relative; width: min(58em, 86vw); max-height: 86vh; overflow: auto; padding: 1.4em 1.8em 1.6em; border-radius: 1.6em; background: linear-gradient(160deg, rgba(36, 30, 26, .94), rgba(20, 22, 34, .95)); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); animation: rise .45s cubic-bezier(.2, 1.3, .3, 1); }
@keyframes rise { from { transform: translateY(40px) scale(.96); opacity: 0; } }
#modal.wide #modal-card { width: min(74em, 92vw); }
#modal.video #modal-card { width: min(66em, 90vw); }
#modal-title { font-family: var(--kai); font-size: 2.1em; font-weight: 700; color: var(--gold2); margin-bottom: .7em; padding-right: 2em; }
#modal-close { position: absolute; right: 1em; top: 1em; width: 2.4em; height: 2.4em; border-radius: 50%; background: rgba(255, 255, 255, .08); display: grid; place-items: center; }
#modal-close svg { width: 55%; }
#modal-close:hover { background: rgba(192, 57, 43, .7); }
.btn { display: inline-flex; align-items: center; gap: .45em; padding: .6em 1.3em; border-radius: 1em; background: rgba(46, 111, 176, .9); font-weight: 700; transition: transform .2s, background .2s; }
.btn svg { width: 1.2em; height: 1.2em; }
.btn:hover { transform: translateY(-2px); background: #3a86d4; }
.btn.big { font-size: 1.15em; padding: .75em 1.6em; }
.btn.alt { background: rgba(192, 57, 43, .9); } .btn.alt:hover { background: #d9503f; }
.btn.gold { background: linear-gradient(135deg, var(--gold2), var(--gold)); color: #2a1804; }
.btn.ghost { background: rgba(255, 255, 255, .1); font-weight: 400; }
.row-btns { display: flex; gap: .8em; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 1em; }
.tip { color: var(--ink); text-align: center; margin-top: .8em; font-size: 1.2em; }
.chips { display: flex; gap: .5em; flex-wrap: wrap; justify-content: center; }
.chip { padding: .45em 1em; font-size: 1.1em; border-radius: 1em; background: rgba(255, 255, 255, .1); border: 1px solid var(--line); }
.chip.on { background: var(--gold); color: #2a1804; font-weight: 700; }

.quiz-top { display: flex; align-items: center; gap: 1.2em; justify-content: center; margin-bottom: 1em; font-size: 1.3em; }
.inst-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; }
.inst { background: #fffaf0; color: #3a2a18; border-radius: 1.1em; padding: .8em .6em 1em; display: flex; flex-direction: column; align-items: center; gap: .5em; border: 3px solid transparent; transition: transform .25s, border-color .25s; }
.inst img { height: 9em; width: 100%; object-fit: contain; }
.inst b { font-size: 1.7em; font-family: var(--kai); }
.inst:hover { transform: translateY(-5px); }
.inst.right { border-color: var(--green); box-shadow: 0 0 0 4px rgba(47, 158, 90, .35), 0 0 30px rgba(47, 158, 90, .6); }
.inst.wrong { animation: shake .5s; border-color: var(--red); }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.inst-result { text-align: center; margin-top: 1em; font-size: 2em; font-weight: 700; font-family: var(--kai); opacity: 0; transform: translateY(10px); transition: all .4s; }
.inst-result.show { opacity: 1; transform: none; }
.inst-result b { color: var(--gold2); }

.vers { display: flex; align-items: center; gap: 1.4em; justify-content: center; }
.ver { flex: 1; max-width: 18em; background: #fffaf0; color: #3a2a18; border-radius: 1.2em; padding: 1em; display: flex; flex-direction: column; align-items: center; gap: .3em; transition: transform .25s; }
.ver:hover:not(:disabled) { transform: translateY(-5px); }
.ver img { height: 10em; object-fit: contain; }
.ver b { font-family: var(--kai); font-size: 1.8em; }
.ver small { color: #8a6a40; }
.vs { font-family: var(--kai); font-size: 2.4em; color: var(--gold2); }

.song { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.4em; align-items: start; }
.paper { background: #fffaf0; border-radius: 1em; padding: 1em; box-shadow: inset 0 0 0 1px #e9dcc0; }
.paper img { width: 100%; display: block; }
.song-side { display: flex; flex-direction: column; gap: .8em; }
.song-side h3 { font-family: var(--kai); font-size: 1.8em; color: var(--gold2); }
.song-side p { color: var(--ink); line-height: 1.6; font-size: 1.2em; }

.mag-row { display: grid; grid-template-columns: 9em 1fr auto; gap: 1em; align-items: center; margin-bottom: 1em; }
.mag-label b { display: block; font-family: var(--kai); font-size: 1.6em; color: var(--gold2); }
.mag-label small { color: var(--ink); font-size: 1.1em; }
.mag-score { position: relative; background: #fffaf0; border-radius: .8em; padding: .6em .8em; overflow: hidden; }
.mag-score img { width: 100%; display: block; position: relative; z-index: 2; }
.sweep { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(248, 217, 138, .15), rgba(248, 217, 138, .75)); z-index: 1; transition: width .15s linear; }

.album { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1em; }
.album figure { position: relative; border-radius: 1em; overflow: hidden; cursor: zoom-in; aspect-ratio: 16/10; }
.album img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.album figure:hover img { transform: scale(1.06); }
.album figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2em .8em .5em; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); font-family: var(--kai); font-size: 1.6em; }
.album figure.zoom { position: fixed; inset: 6vh 8vw; z-index: 30; aspect-ratio: auto; cursor: zoom-out; box-shadow: 0 30px 90px #000; }
.album figure.zoom img { object-fit: contain; background: #000; }

.card-row { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1.4em; align-items: center; }
.card-img { width: 100%; border-radius: 1em; background: #fff; }
.card-text h3 { font-family: var(--kai); font-size: 1.8em; color: var(--gold2); margin-bottom: .4em; }
.card-text p { line-height: 1.7; margin-bottom: .5em; color: var(--ink); font-size: 1.3em; }
.card-text .hl { color: var(--ink); background: rgba(232, 176, 75, .18); border-left: 4px solid var(--gold); padding: .5em .8em; border-radius: .4em; }
#modal.video video { width: 100%; border-radius: 1em; background: #000; max-height: 62vh; }

#modal.story #modal-card { background: transparent; border: 0; box-shadow: none; width: min(46em, 86vw); overflow: visible; }
#modal.story #modal-title { display: none; }
.scroll { display: flex; flex-direction: column; align-items: center; }
.scroll-rod { width: 104%; height: 1.6em; border-radius: 1em; background: linear-gradient(180deg, #b07a3c, #6a3f17 60%, #4a2a0e); box-shadow: 0 6px 16px rgba(0, 0, 0, .5); z-index: 2; }
.scroll-paper { width: 100%; background: linear-gradient(90deg, #e8d3a4, #f6e8c6 15%, #f8ecd0 50%, #f6e8c6 85%, #e8d3a4); color: #4a2e12; padding: 0 2.4em; overflow: hidden; animation: unroll 1.6s cubic-bezier(.3, .8, .3, 1) forwards; max-height: 0; }
@keyframes unroll { to { max-height: 70vh; padding-top: 1.6em; padding-bottom: 1.6em; } }
.scroll-paper h3 { font-family: var(--kai); text-align: center; font-size: 1.9em; margin-bottom: .6em; color: #7a2a12; }
.scroll-paper p { font-family: var(--kai); font-size: 1.55em; line-height: 1.85; text-indent: 2em; margin-bottom: .5em; }

.comment .frame { font-family: var(--kai); font-size: 2em; font-weight: 700; text-align: center; line-height: 1.8; margin-bottom: 1em; color: var(--gold2); }

.board-wrap { background: #22392b; border-radius: 1em; padding: 1.2em; border: .6em solid #8a5a2b; box-shadow: inset 0 0 40px rgba(0, 0, 0, .5); }
.board-t { width: 100%; border-collapse: collapse; font-family: var(--kai); color: #fdfbf2; }
.board-t th, .board-t td { border-bottom: 1px dashed rgba(255, 255, 255, .25); padding: .38em .7em; font-size: 1.4em; text-align: left; }
.board-t thead th { color: #ffe08a; font-size: 1.55em; }
.board-t thead th.corner { font-size: 1.1em; color: #fff; }
.board-t tbody th { color: #b9e3c6; white-space: nowrap; font-weight: 400; width: 7em; }
.board-t td.hid span, .board-foot.hid span { filter: blur(7px); opacity: .35; }
.board-t td span, .board-foot span { transition: filter .8s, opacity .8s; }
.board-t td.lit span { text-shadow: 0 0 8px rgba(255, 255, 255, .3); }
.board-foot { margin-top: 1em; text-align: center; font-family: var(--kai); font-size: 1.55em; color: #ffe08a; }

/* ---------- 勋章弹出 / 结尾 ---------- */
#award { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%) scale(.2); opacity: 0; text-align: center; pointer-events: none; z-index: 40; }
#award.show { animation: award 2.6s cubic-bezier(.2, 1.4, .3, 1) forwards; }
@keyframes award { 15% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 25% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(.6); } }
.award-medal { width: 9em; height: 9em; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; color: #6b3d0c; background: radial-gradient(circle at 35% 30%, #fff6cc, var(--gold) 55%, #9a6418); box-shadow: 0 0 0 6px #fff3c4, 0 0 80px rgba(248, 217, 138, .95); }
.award-medal svg { width: 55%; }
.award-medal.art { background: none; box-shadow: none; width: 12em; height: 12em; }
.award-medal.art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 36px rgba(248, 217, 138, .95)); }
#finale .medals.art div { background: none; box-shadow: none; width: 7.5em; height: 7.5em; }
#finale .medals.art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 18px rgba(248, 217, 138, .9)); }
#xm-bubble, .tip, .card-text p, .cue-sub, .scroll-paper p, #question-text { text-wrap: pretty; }
#btn-amb.off { opacity: .75; }
.award-name { font-family: var(--kai); font-size: 2.6em; color: var(--gold2); margin-top: .3em; text-shadow: 0 3px 16px rgba(0, 0, 0, .6); }
.award-sub { font-size: 1.1em; color: #fff; }
#finale { position: fixed; inset: 0; display: none; place-items: center; z-index: 35; background: radial-gradient(circle, rgba(60, 30, 5, .35), rgba(0, 0, 0, .65)); cursor: pointer; }
#finale.show { display: grid; animation: fade .8s; }
#finale .box { text-align: center; }
#finale h2 { font-family: var(--kai); font-size: 4.4em; color: var(--gold2); text-shadow: 0 4px 30px rgba(232, 176, 75, .8); }
#finale p { font-size: 1.4em; margin-top: .4em; }
#finale .medals { display: flex; gap: 1.2em; justify-content: center; margin: 1.4em 0; }
#finale .medals div { width: 5em; height: 5em; border-radius: 50%; display: grid; place-items: center; color: #6b3d0c; background: radial-gradient(circle at 35% 30%, #fff6cc, var(--gold) 55%, #9a6418); box-shadow: 0 0 30px rgba(248, 217, 138, .8); animation: pop .9s backwards; }
#finale .medals div:nth-child(2) { animation-delay: .2s; } #finale .medals div:nth-child(3) { animation-delay: .4s; } #finale .medals div:nth-child(4) { animation-delay: .6s; }
#finale .medals svg { width: 55%; }

#toast { position: fixed; top: 15.5em; left: 50%; transform: translate(-50%, -10px); opacity: 0; padding: .6em 1.3em; font-size: 1.25em; border-radius: 1em; background: var(--glass2); border: 1px solid var(--line); transition: all .4s; z-index: 50; pointer-events: none; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 启动页 ---------- */
#start { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; background: radial-gradient(ellipse at 50% 40%, rgba(10, 16, 30, .15), rgba(6, 10, 20, .8)), var(--cover, none) center/cover; }
#start.show { display: grid; }
#start .box { text-align: center; animation: rise 1.2s cubic-bezier(.2, 1, .3, 1); }
#start .kicker { letter-spacing: .5em; color: var(--gold2); font-size: 1.35em; }
#start h1 { font-family: var(--kai); font-size: 9em; line-height: 1.1; letter-spacing: .12em; background: linear-gradient(180deg, #fff6d6, var(--gold) 70%, #b77a24); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 30px rgba(232, 176, 75, .5)); margin: .1em 0; }
#start .sub { font-size: 1.7em; font-weight: 700; color: var(--ink); letter-spacing: .2em; }
#start .meta { color: var(--ink); margin-top: .5em; font-size: 1.3em; }
#start-btn { margin-top: 2.4em; padding: .9em 3.2em; border-radius: 3em; font-size: 1.4em; font-weight: 700; letter-spacing: .3em; color: #2a1804; background: linear-gradient(135deg, #fff1b8, var(--gold) 60%, #c88a2a); box-shadow: 0 0 0 6px rgba(248, 217, 138, .25), 0 10px 40px rgba(232, 176, 75, .55); animation: breathe 2.4s infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 14px rgba(248, 217, 138, .08), 0 10px 50px rgba(232, 176, 75, .8); } }
#load { width: 18em; height: .3em; margin: 1.6em auto 0; border-radius: 1em; background: rgba(255, 255, 255, .15); overflow: hidden; transition: opacity .6s; }
#load.done { opacity: 0; }
#load-fill { height: 100%; width: 5%; background: var(--gold); transition: width .4s; }
#load-text { margin-top: .6em; color: var(--ink2); font-size: .85em; }
#start .keys { position: absolute; bottom: 1.4em; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .7); font-size: .95em; text-shadow: 0 1px 4px #000; }

/* ---------- 编辑模式 ---------- */
#edit { position: fixed; inset: 0; pointer-events: none; display: none; z-index: 15; }
#edit.show { display: block; }
#edit .cross { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); }
#edit .cross::before, #edit .cross::after { content: ""; position: absolute; background: #ff4d4d; }
#edit .cross::before { left: 19px; top: 0; width: 2px; height: 40px; } #edit .cross::after { top: 19px; left: 0; height: 2px; width: 40px; }
#edit .info { position: absolute; left: 50%; top: 8em; transform: translateX(-50%); background: rgba(0, 0, 0, .75); padding: .5em 1em; border-radius: .6em; font-family: Consolas, monospace; text-align: center; }
#edit .info b { color: #ff8a8a; }

#modal.board #modal-card { width: min(70em, 92vw); padding-top: 1em; }
#modal.board #modal-title { margin-bottom: .4em; }
.board-t thead th.corner { font-size: 1.05em; }