:root { color-scheme: dark; --gold:#b49b6b; --ink:#080706; --muted:#8d8271; --white:#e3d7c3; }
* { box-sizing:border-box; }
html, body { margin:0; width:100%; min-height:100%; background:#030303; }
body { min-height:100vh; display:grid; place-items:center; font-family:"Microsoft YaHei","PingFang SC",sans-serif; color:var(--white); }
button { font:inherit; cursor:pointer; }
button:focus-visible { outline:1px solid #d6b77c; outline-offset:5px; }
[hidden] { display:none !important; }
#experience { width:min(100%,177.7778vh); aspect-ratio:16/9; position:relative; overflow:hidden; background:var(--ink); isolation:isolate; }
#stage, #stage canvas { position:absolute; inset:0; width:100% !important; height:100% !important; display:block; }
#stage { touch-action:none; user-select:none; cursor:grab; }
#stage:active { cursor:grabbing; }
.mode-switch { display:flex; gap:3px; margin-bottom:9px; }
.mode-switch button { flex:1; padding:6px 2px; border:1px solid #8f734445; color:#a38c69; background:#100d09; font-size:clamp(8px,.8vw,11px); white-space:nowrap; }
.mode-switch button[aria-pressed="true"] { color:#ead5ad; border-color:#b09260; background:#21190e; }
.identity { position:absolute; left:4.1%; top:5.5%; pointer-events:none; }
.chapter { font-size:clamp(9px,1vw,13px); letter-spacing:.27em; color:var(--gold); }
.chapter span { margin-left:13px; font-size:.65em; letter-spacing:.22em; opacity:.65; }
h1 { font-family:"Noto Serif SC","Songti SC","SimSun",serif; font-weight:400; font-size:clamp(21px,2.7vw,38px); letter-spacing:.2em; margin:16px 0 16px; }
h1 i { font-style:normal; font-size:.65em; color:var(--gold); }
.rule { height:1px; width:32px; background:#8d6c43; margin-bottom:13px; }
.identity p { color:var(--muted); font-size:clamp(9px,.8vw,12px); letter-spacing:.12em; }
#hud { position:absolute; top:5.2%; right:3.5%; width:15%; min-width:142px; max-width:224px; border-top:1px solid #6e5839; padding-top:10px; font-size:clamp(9px,.8vw,12px); color:#b3a48c; }
.hud-top { display:flex; gap:7px; align-items:center; margin-bottom:9px; }
.signal { width:5px; height:5px; border-radius:50%; background:#78634b; }
.signal.active { background:#d1b67f; box-shadow:0 0 6px #c7a46d70; }
.local-label { margin-left:auto; font-size:8px; letter-spacing:.13em; opacity:.5; }
#preview { width:100%; aspect-ratio:4/3; position:relative; overflow:hidden; background:#0e0c09; border:1px solid #65513b33; }
#camera, #skeleton { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transform:scaleX(-1); }
#camera { opacity:.72; }
#preview-note { position:absolute; inset:0; display:grid; place-items:center; color:#87775f; font-size:10px; letter-spacing:.06em; }
.hud-row { display:flex; justify-content:space-between; gap:8px; margin-top:10px; }
.hud-row strong { font-weight:400; color:#ddcbaa; }
.progress-track { height:2px; background:#76614132; margin:8px 0 12px; }
#progress-fill { height:100%; background:#b69a65; width:0; }
.resources { display:flex; flex-direction:column; gap:5px; font-size:9px; opacity:.7; }
.hud-actions { display:flex; gap:7px; margin-top:12px; }
.hud-actions button { background:#19140d; border:1px solid #7e68444f; color:#c9af82; font-size:11px; padding:7px 9px; }
.hud-actions button:disabled { opacity:.45; cursor:wait; }
#device-message { font-size:9px; line-height:1.8; color:#8f806a; margin-top:9px; }
.poem { position:absolute; left:5%; top:44%; writing-mode:vertical-rl; line-height:2; letter-spacing:.65em; font-family:"SimSun",serif; font-size:12px; color:#8e775448; }
.instruction { position:absolute; bottom:10%; left:24%; right:24%; text-align:center; pointer-events:none; }
.step-mark { font-size:10px; letter-spacing:.3em; color:#a68d61; }
h2 { font-family:"SimSun",serif; font-size:clamp(17px,1.8vw,26px); font-weight:400; letter-spacing:.34em; margin:12px 0; }
.instruction p { color:#9d8c75; letter-spacing:.14em; font-size:clamp(9px,.85vw,12px); line-height:1.8; margin:0; }
footer { position:absolute; left:4.1%; right:3.5%; bottom:3%; display:flex; align-items:center; justify-content:space-between; color:#806d52; font-size:10px; letter-spacing:.15em; }
.signature b { margin:0 10px; font-weight:400; color:#544936; }
.journey { color:#81715a; font-size:9px; letter-spacing:.2em; }
.journey i { font-style:normal; margin:0 12px; opacity:.5; }
.footer-actions { display:flex; gap:18px; }
.footer-actions button { background:none; border:0; color:#9c8767; padding:6px 0; font-size:10px; letter-spacing:.1em; }
#asset-warning { position:absolute; left:4.1%; bottom:22%; max-width:32%; color:#ddba7d; font-size:11px; line-height:1.7; }
#debug-banner { position:absolute; left:41%; top:2%; color:#efcc8b; border:1px solid #856533; background:#251b0b; padding:6px 12px; font-size:11px; letter-spacing:.1em; }
#debug-panel { position:absolute; top:calc(100% + 12px); left:0; right:0; font:11px/1.6 monospace; padding:10px 12px; background:#0b0906; color:#bba37d; display:grid; gap:8px; }
#experience:has(#debug-panel:not([hidden])) { overflow:visible; margin-bottom:240px; }
.debug-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.debug-controls button { color:#c7ae82; background:#19130c; border:1px solid #7e6844; padding:5px 9px; }
.debug-controls label { display:flex; align-items:center; gap:5px; }
#benchmark-result { white-space:pre-wrap; overflow-wrap:anywhere; }
#fatal { position:absolute; inset:35% 20% auto; background:#231910; color:#f2d5ad; padding:20px; line-height:1.8; }
@media (max-width:800px) { .identity { top:5%; } h1 { margin:9px 0; } .identity p, .rule, .poem, .journey, .resources { display:none; } #hud { min-width:108px; top:4%; padding-top:5px; } .hud-top { margin-bottom:4px; } #device-message { font-size:8px; line-height:1.4; } .hud-row { margin-top:5px; } .hud-actions { margin-top:6px; } .hud-actions button { font-size:9px; padding:4px; } .instruction { bottom:11%; } h2 { margin:6px 0; } .step-mark { font-size:8px; } #debug-panel { font-size:7px; } #debug-banner { font-size:8px; padding:3px 5px; } }
@media (max-aspect-ratio:1/1) { body::after { content:"横屏观看，让双臂有舒展的空间"; display:block; color:#8d795b; text-align:center; font-size:12px; padding:18px; letter-spacing:.12em; } body { align-content:center; } }