:root{color-scheme:dark;--cream:#f6eacb;--ink:#192119;--red:#da593d;--safe-top:max(15px,env(safe-area-inset-top));--safe-bottom:max(13px,env(safe-area-inset-bottom))}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;margin:0;overflow:hidden;font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:#a36e45;color:var(--cream);touch-action:none}button,a{font:inherit}button{color:inherit}#game,#canvas-wrap{position:fixed;inset:0}canvas{display:block;width:100%;height:100%;outline:none}
.loading{position:fixed;z-index:60;inset:0;display:grid;place-content:center;justify-items:center;background:#17241b;transition:opacity .35s,visibility .35s}.loading.hidden{opacity:0;visibility:hidden}.loading p{margin-top:20px;font-size:13px;font-weight:800;letter-spacing:.13em}.loader-band{width:78px;height:50px;border:6px solid #e5c554;border-left-width:12px;border-right-width:12px;border-radius:50%;animation:stretch .6s ease-in-out infinite alternate}@keyframes stretch{to{width:122px;transform:translateY(-12px)}}
.topbar{position:fixed;z-index:7;left:0;right:0;top:0;padding:var(--safe-top) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;pointer-events:none}.topbar>*{pointer-events:auto}.back{justify-self:start;color:inherit;text-decoration:none;font-size:13px;font-weight:800;text-shadow:0 1px 5px #0009}.song-pill{padding:9px 14px;border:1px solid #fff5;border-radius:99px;background:#263328c9;backdrop-filter:blur(8px);font-size:12px;font-weight:750}.icon-btn{justify-self:end;width:38px;height:38px;border-radius:50%;border:1px solid #fff5;background:#263328c9;cursor:pointer;font-weight:900}
.hud{position:fixed;z-index:6;top:calc(var(--safe-top) + 54px);left:50%;transform:translateX(-50%);display:flex;border:1px solid #fff3;border-radius:15px;overflow:hidden;background:#1b271edc;box-shadow:0 8px 24px #2c170d44;backdrop-filter:blur(8px);pointer-events:none}.hud div{min-width:88px;padding:8px 13px;text-align:center}.hud div+div{border-left:1px solid #fff2}.hud span{display:block;font-size:10px;opacity:.65}.hud strong{display:block;font-size:18px;font-variant-numeric:tabular-nums}.hud div:nth-child(3) strong{font-size:15px;color:#ef7459;letter-spacing:1px}
.lyric{position:fixed;z-index:6;top:calc(var(--safe-top) + 117px);left:50%;transform:translateX(-50%);min-width:280px;padding:8px 18px;border-radius:14px;background:#f0dfb6;color:#252e23;text-align:center;box-shadow:0 8px 22px #2b180f43;pointer-events:none}.lyric small{display:block;font-size:9px;opacity:.55}.lyric strong{font-family:"Songti SC",serif;font-size:16px}.hit-label{position:fixed;z-index:6;left:50%;bottom:calc(var(--safe-bottom) + 93px);transform:translateX(-50%);font-size:10px;font-weight:800;letter-spacing:.13em;text-shadow:0 2px 4px #0008;pointer-events:none}
.controls{position:fixed;z-index:9;left:50%;bottom:var(--safe-bottom);transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(500px,calc(100% - 24px))}.controls button{height:72px;border:1px solid #fff4;border-radius:18px;background:#1b271ee2;backdrop-filter:blur(9px);cursor:pointer;box-shadow:0 8px 22px #29150c55;font-weight:900}.controls button:active{transform:translateY(3px);background:#354539}.controls kbd{font:800 10px system-ui;opacity:.65}.controls i{display:inline-block;width:11px;height:11px;border-radius:3px;margin:0 7px;vertical-align:-1px}.controls button:nth-child(1) i,.legend span:nth-child(1) i{background:#e5c653}.controls button:nth-child(2) i,.legend span:nth-child(2) i{background:#56b8d1}.controls button:nth-child(3) i,.legend span:nth-child(3) i{background:#dd6046}.controls span{font-size:14px}.feedback{position:fixed;z-index:14;left:50%;top:43%;transform:translate(-50%,-50%) scale(.7);padding:10px 20px;border-radius:99px;background:#e7c854;color:#263126;font-size:20px;font-weight:950;opacity:0;pointer-events:none}.feedback.show{animation:pop .7s ease-out}.feedback.bad{background:#dc5a40;color:#fff}@keyframes pop{0%{opacity:0;transform:translate(-50%,-20%) scale(.6)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-80%) scale(.9)}}.countdown{position:fixed;z-index:20;left:50%;top:48%;transform:translate(-50%,-50%) scale(.7);font:950 clamp(70px,14vw,140px)/1 system-ui;color:#f3d464;text-shadow:0 8px 0 #9b3e2e,0 18px 32px #0005;opacity:0;pointer-events:none}.countdown.show{animation:count .75s ease-out}@keyframes count{0%{opacity:0;transform:translate(-50%,-30%) scale(.5)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-70%) scale(.9)}}
.panel{position:fixed;z-index:30;inset:0;display:grid;place-items:center;padding:20px;background:#14201991;backdrop-filter:blur(7px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}.panel.visible{opacity:1;visibility:visible}.panel-card{position:relative;overflow:hidden;width:min(480px,100%);padding:34px 34px 28px;border-radius:28px;background:#efe1bc;color:var(--ink);text-align:center;border:1px solid #fffa;box-shadow:0 24px 80px #151d1599,inset 0 0 80px #fff3}.panel-card:before{content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;background-image:radial-gradient(#714722 .7px,transparent .8px);background-size:6px 6px}.panel-card>*{position:relative}.eyebrow{margin:0 0 9px;font-size:11px;font-weight:900;letter-spacing:.18em;color:#88472f}.panel h1,.panel h2{margin:0 0 13px;font-family:"Songti SC","Noto Serif SC",serif;font-size:clamp(44px,9vw,67px);line-height:1;font-weight:900;letter-spacing:-.06em}.panel h2{font-size:clamp(34px,7vw,52px)}.panel-card>p:not(.eyebrow){margin:0 auto 22px;max-width:360px;line-height:1.7;color:#4e594e;font-size:14px}.legend{display:flex;gap:7px;margin:22px 0}.legend span{flex:1;padding:10px 5px;border:1px dashed #88785f;border-radius:10px;font-size:11px;font-weight:800}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}.primary,.secondary{width:100%;min-height:50px;border-radius:14px;border:0;cursor:pointer;font-weight:900}.primary{background:#d9573b;color:#fff;box-shadow:0 7px 0 #9c3b28,0 12px 20px #7d392f40}.primary:active{transform:translateY(4px);box-shadow:0 3px 0 #9c3b28}.secondary{margin-top:13px;background:transparent;color:#39483b;border:1px solid #6e776c}.compact{max-width:390px}.result-score{display:flex;align-items:baseline;justify-content:center;gap:6px;margin:10px 0 24px}.result-score span{font-size:12px;margin-right:7px}.result-score strong{font-size:50px;color:#c84b32}.result-score em{font-style:normal;font-size:12px}
@media(max-width:600px){.back span{display:none}.topbar{grid-template-columns:42px 1fr 42px}.song-pill{justify-self:center}.hud{top:calc(var(--safe-top) + 49px);width:calc(100% - 24px)}.hud div{min-width:0;flex:1;padding:7px 4px}.hud strong{font-size:16px}.lyric{top:calc(var(--safe-top) + 105px);min-width:250px}.panel-card{padding:29px 22px 24px}.legend{flex-direction:column}.legend span{padding:8px}.controls{gap:6px}.controls button{height:67px}.hit-label{bottom:calc(var(--safe-bottom) + 86px)}}@media(max-height:680px){.panel-card{transform:scale(.9)}.legend{margin:14px 0}.panel-card>p:not(.eyebrow){margin-bottom:12px}.hud{top:calc(var(--safe-top) + 44px)}.lyric{top:calc(var(--safe-top) + 96px)}.controls button{height:58px}.hit-label{bottom:calc(var(--safe-bottom) + 74px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}