:root{font-family:system-ui,-apple-system,"Microsoft YaHei",sans-serif;color:#fff;background:#9bb8cb}*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;touch-action:none;overscroll-behavior:none}
#viewport{display:block;position:fixed;inset:0;width:100%;height:100%;touch-action:none}
.hidden{display:none!important}
#hud{pointer-events:none;position:fixed;inset:0;z-index:5;text-shadow:0 2px 5px #15212da9}
.topbar{display:flex;justify-content:space-between;align-items:start;padding:calc(env(safe-area-inset-top) + 14px) 16px 2px;gap:4px}.metric{flex:1}.metric b{display:block;font-size:28px;font-style:italic;font-variant-numeric:tabular-nums}.metric small{font-size:11px;letter-spacing:.2px}.center{text-align:center}.right{text-align:right}
.track{height:5px;margin:9px 17px;background:#17354b8c;border-radius:4px;overflow:hidden}#progress-fill{height:100%;width:0%;background:#ffe197;transition:width .2s}
#hint{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 20px);width:100%;text-align:center;font-size:13px;pointer-events:none}
#speed-advice{position:absolute;top:110px;left:0;right:0;text-align:center;color:#ffeb90;font-weight:900;font-size:18px;text-shadow:0 1px 5px #131313}
#status-text{position:absolute;top:137px;left:0;right:0;text-align:center;font-size:14px}
#toast{position:absolute;top:29%;width:100%;text-align:center;font-size:30px;font-weight:900;color:#ffdb80;letter-spacing:3px;animation:pop .45s both}
@keyframes pop{0%{transform:scale(.7);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
#danmu{position:absolute;left:0;right:0;top:17%;height:95px;overflow:hidden;pointer-events:none}
.bullet{position:absolute;left:100%;max-width:65%;width:max-content;white-space:nowrap;font-weight:bold;font-size:15px;color:#fff;text-shadow:-1px -1px 0 #23313da8,1px 1px 0 #23313dc8,1px -1px 0 #23313da8,-1px 1px 0 #23313da8;animation:movebullet 5.6s linear forwards;will-change:transform}
@keyframes movebullet{to{transform:translateX(-140vw)}}
.view-switch{position:fixed;top:calc(env(safe-area-inset-top) + 86px);right:12px;z-index:8;background:#213d4baa;color:#fff;border:1px solid #ffffff99;border-radius:14px;padding:8px 12px;font-size:12px;pointer-events:auto}
#overlay{position:fixed;inset:0;background:linear-gradient(#0a1827bb,#080d14dd);display:flex;align-items:center;justify-content:center;z-index:10;padding:17px}
.dialog{width:100%;max-width:410px;text-align:center;background:#162332ed;border:1px solid #9bbac465;border-radius:20px;padding:24px 21px;box-shadow:0 16px 50px #0005}
#eyebrow{color:#d1c4a7;letter-spacing:1px}.dialog h1{font-size:40px;margin:12px 0}.dialog p{line-height:1.75;font-size:15px;color:#e5eff6}
.dialog button{width:100%;margin-top:12px;border:0;border-radius:10px;padding:14px;background:linear-gradient(90deg,#fee4a0,#e5a85e);color:#28303a;font-weight:900;font-size:17px;cursor:pointer}
.dialog button:disabled{opacity:.6}.dialog button.secondary{font-size:14px;background:#c9e1eb;color:#24353b;padding:11px}
.note{display:block;margin-top:18px;color:#a7b5ba;font-size:10px;line-height:1.7}
.stats{background:#ffffff14;border-radius:12px;padding:12px;margin:15px 0;line-height:1.8;font-size:14px}
@media(min-width:700px){#hint{font-size:15px}}