:root{--bg:#0b0614;--ink:#f5f0ff;--muted:#b9add6;--accent:#ff4fd8;--warn:#fc0;--danger:#f35;--panel:#0c0618b8;--border:#ffffff24;--cjk:"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "Alibaba PuHuiTi 3.0", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP";--head:"Bungee", "Arial Black", Impact, var(--cjk), sans-serif;--mono:"IBM Plex Mono", ui-monospace, var(--cjk), monospace}:root[lang=ja]{--cjk:"Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP", "Source Han Sans JP", "Alibaba Sans JP", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC"}:root[lang=zh-Hans] .caption,:root[lang=ja] .caption{letter-spacing:.02em}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--ink);font-family:var(--mono);margin:0;overflow:hidden}#app{position:fixed;inset:0}#stage{position:absolute;inset:0}#stage canvas{width:100%;height:100%;display:block}a{color:inherit}button{font:inherit;color:inherit}.hud{top:max(12px, env(safe-area-inset-top));color:#1b1b1b;font-family:var(--head);letter-spacing:.02em;background:#f7f3e8;border:4px solid #1b1b1b;border-radius:6px;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:6px 12px;font-size:12px;line-height:1.15;display:flex;position:absolute;left:16px;box-shadow:0 6px 24px #00000073}.hud .stripe{background:repeating-linear-gradient(45deg, #1b1b1b 0 6px, var(--warn) 6px 12px);border-radius:2px;align-self:stretch;width:10px}.hud .num{text-align:center;min-width:2.2ch;color:var(--danger);font-variant-numeric:tabular-nums;background:#fff;border:3px solid #1b1b1b;padding:2px 8px;font-size:34px}.hud small{font-family:var(--mono);color:#555;letter-spacing:0;margin-top:2px;font-size:10px;display:block}.controls{top:max(12px, env(safe-area-inset-top));gap:8px;display:flex;position:absolute;right:16px}.icon-btn{border:1px solid var(--border);background:var(--panel);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;border-radius:10px;place-items:center;width:44px;height:44px;font-size:18px;display:grid}.icon-btn:hover{border-color:var(--accent)}.lang-wrap{border:1px solid var(--border);background:var(--panel);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;border-radius:10px;align-items:center;gap:4px;height:44px;padding:0 6px 0 10px;display:flex}.lang-wrap:hover,.lang-wrap:focus-within{border-color:var(--accent)}.lang-wrap select{appearance:none;color:var(--ink);font:inherit;cursor:pointer;background:0 0;border:0;height:100%;padding:0 4px;font-size:13px}.lang-wrap select option{color:var(--ink);background:#1a1028}.archive-note{top:calc(max(12px, env(safe-area-inset-top)) + 74px);background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:12px;position:absolute;left:16px}.archive-note a{color:var(--warn)}.caption{left:50%;bottom:calc(max(16px, env(safe-area-inset-bottom)) + 84px);text-align:center;border-left:3px solid var(--accent);opacity:0;pointer-events:none;text-wrap:balance;background:#0009;border-radius:6px;width:min(760px,100vw - 32px);padding:10px 16px;font-size:clamp(14px,2.2vw,19px);line-height:1.4;transition:opacity .35s,transform .35s;position:absolute;transform:translate(-50%)translateY(8px)}.caption.show{opacity:1;transform:translate(-50%)translateY(0)}.flash{opacity:0;pointer-events:none;position:absolute;inset:0}.nav{left:50%;bottom:max(16px, env(safe-area-inset-bottom));background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:14px;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;width:min(620px,100vw - 32px);padding:8px;display:grid;position:absolute;transform:translate(-50%)}.nav a,.nav span.slot{white-space:nowrap;border-radius:10px;align-items:center;gap:6px;min-height:44px;padding:0 12px;font-size:13px;text-decoration:none;display:flex}.nav a{border:1px solid var(--border)}.nav a:hover{border-color:var(--accent);background:#ff4fd81f}.nav .prev{justify-self:start}.nav .next{justify-self:end}.nav .cur{text-align:center;min-width:0;padding:0 6px}.nav .cur b{font-family:var(--head);font-size:15px;font-weight:400;display:block}.nav .cur i{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;max-width:34vw;font-size:11px;font-style:normal;display:block;overflow:hidden}.nav .live{color:var(--danger);font-size:11px}.titlecard{pointer-events:none;text-align:center;opacity:0;place-items:center;transition:opacity 1s;display:grid;position:absolute;inset:0}.titlecard.show{opacity:1}.titlecard .inner{padding:0 16px}.titlecard .d{font-family:var(--head);color:var(--warn);text-shadow:0 6px #000,0 0 30px #fc06;font-size:clamp(48px,12vw,120px);line-height:1}.titlecard .t{font-family:var(--head);text-shadow:0 3px #000;margin-top:10px;font-size:clamp(20px,4.5vw,40px)}.titlecard .s{color:var(--ink);text-shadow:0 2px 6px #000;margin-top:8px;font-size:clamp(13px,2vw,17px)}.overlay{text-align:center;z-index:10;background:radial-gradient(#0b06148c,#0b0614eb);place-items:center;padding:16px;display:grid;position:absolute;inset:0}.overlay .box{max-width:560px}.overlay .eyebrow{letter-spacing:.25em;color:var(--danger);text-transform:uppercase;font-size:12px}.overlay h1{font-family:var(--head);margin:8px 0 4px;font-size:clamp(30px,7vw,56px);font-weight:400;line-height:1.05}.overlay h1 span{color:var(--warn)}.overlay p{color:var(--muted);margin:6px 0 20px}.overlay .start{font-family:var(--head);cursor:pointer;background:var(--accent);color:#12001f;border:3px solid #000;border-radius:12px;padding:14px 26px;font-size:18px;box-shadow:0 6px #000}.overlay .start:hover{transform:translateY(-2px);box-shadow:0 8px #000}.overlay .start:active{transform:translateY(3px);box-shadow:0 3px #000}.overlay .fine{color:var(--muted);opacity:.8;margin-top:18px;font-size:11px}.overlay{transition:opacity .5s}.overlay.hide{opacity:0;pointer-events:none}.hud,.controls,.nav,.archive-note{z-index:11}.sound-hint{top:calc(max(12px, env(safe-area-inset-top)) + 54px);z-index:11;cursor:pointer;background:var(--warn);color:#1b1b1b;border:2px solid #1b1b1b;border-radius:10px;padding:8px 12px;font-size:12px;position:absolute;right:16px;box-shadow:0 3px #1b1b1b}.fatal{text-align:center;place-items:center;padding:16px;display:grid;position:absolute;inset:0}@media (max-width:560px){.hud{gap:8px;max-width:calc(100vw - 136px);padding:5px 8px;font-size:10px}.controls{flex-wrap:wrap;justify-content:flex-end;max-width:100px}.lang-wrap{width:96px}.lang-wrap select{width:100%;font-size:12px}.sound-hint{top:calc(max(12px, env(safe-area-inset-top)) + 106px)}.hud .num{padding:2px 6px;font-size:26px}.hud small,.nav .cur i{display:none}.nav a,.nav span.slot{padding:0 10px;font-size:12px}.archive-note{top:calc(max(12px, env(safe-area-inset-top)) + 62px)}}@media (prefers-reduced-motion:reduce){.caption,.titlecard,.overlay.hide{transition:none}}