:root{color-scheme:dark;--cream:#f4e8c6;--ink:#1d291e;--red:#d6533f;--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:#536c41;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:#293b2b;transition:opacity .35s,visibility .35s}.loading.hidden{opacity:0;visibility:hidden}.loading span{font-size:52px;animation:bob .7s ease-in-out infinite alternate}.loading p{font-size:13px;font-weight:850;letter-spacing:.12em}@keyframes bob{to{transform:translateY(-10px)}}
.topbar{position:fixed;z-index:8;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:850;text-shadow:0 1px 5px #0009}.level-pill{padding:9px 14px;border:1px solid #fff5;border-radius:99px;background:#26352bd9;backdrop-filter:blur(8px);font-size:12px;font-weight:800}.icon-btn{justify-self:end;width:38px;height:38px;border:1px solid #fff5;border-radius:50%;background:#26352bd9;cursor:pointer;font-weight:900}.hud{position:fixed;z-index:7;top:calc(var(--safe-top) + 54px);left:50%;transform:translateX(-50%);display:flex;border:1px solid #fff3;border-radius:15px;overflow:hidden;background:#1f2e25e8;box-shadow:0 8px 24px #17201877;backdrop-filter:blur(8px);pointer-events:none}.hud div{min-width:86px;padding:8px 12px;text-align:center}.hud div+div{border-left:1px solid #fff2}.hud span{display:block;font-size:10px;opacity:.65}.hud strong{font-size:19px;font-variant-numeric:tabular-nums}.hud strong b,.hud strong em{font:inherit}.hud strong em{opacity:.5}.hud div:first-child strong{color:#82ced0}.hud div:nth-child(3) strong{color:#f0ce5d}.hud div:nth-child(4) strong{color:#ef8160}
.warning{position:fixed;z-index:9;left:50%;top:29%;transform:translate(-50%,-20px) scale(.9);padding:9px 16px;border-radius:99px;background:#c84332;color:#fff;font-size:13px;font-weight:950;opacity:0;transition:.2s;pointer-events:none}.warning.show{opacity:1;transform:translate(-50%,0) scale(1)}.message{position:fixed;z-index:8;left:50%;bottom:calc(var(--safe-bottom) + 101px);transform:translateX(-50%);padding:9px 15px;border:1px solid #fff3;border-radius:99px;background:#1f2e25e8;font-size:12px;font-weight:850;white-space:nowrap;pointer-events:none}.control-ui{position:fixed;z-index:10;left:50%;bottom:var(--safe-bottom);transform:translateX(-50%);display:grid;justify-items:center;gap:5px}.control-track{width:390px;height:82px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;border:2px dashed #fff5;border-radius:43px;background:#2c392771;overflow:hidden}.control-track>span{font-size:9px;opacity:.55}.control-ui small{font-size:9px;opacity:.6}.control-ui.hide{opacity:0;visibility:hidden}.control-track button{width:148px;height:62px;border:1px solid #fff5;border-radius:34px;background:#f0e0b9;color:#293629;display:flex;align-items:center;justify-content:center;gap:8px;cursor:grab;box-shadow:0 8px 18px #1a241866}.control-track button i{position:relative;width:42px;height:42px;border-radius:50%;background:#d5a24d;box-shadow:inset -5px -4px 8px #9e602e55}.control-track button i:before{content:"";position:absolute;left:9px;top:-8px;width:9px;height:17px;border-radius:50%;background:#cc4b36;box-shadow:8px 1px 0 #cc4b36}.control-track button i:after{content:"";position:absolute;right:-8px;top:14px;border-left:10px solid #df862e;border-top:5px solid transparent;border-bottom:5px solid transparent}.control-track button b{font-size:12px}.feedback{position:fixed;z-index:14;left:50%;top:45%;transform:translate(-50%,-50%) scale(.65);padding:10px 20px;border-radius:99px;background:#e9c850;color:#263226;font-size:21px;font-weight:950;opacity:0;pointer-events:none}.feedback.show{animation:pop .85s ease-out}.feedback.bad{background:#d24c3b;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%,-85%) scale(.9)}}
.panel{position:fixed;z-index:30;inset:0;display:grid;place-items:center;padding:20px;background:#15231a91;backdrop-filter:blur(7px);opacity:0;visibility:hidden;transition:.25s}.panel.visible{opacity:1;visibility:visible}.panel-card{position:relative;overflow:hidden;width:min(500px,100%);padding:32px 32px 27px;border:1px solid #fffa;border-radius:28px;background:#eee0bb;color:var(--ink);text-align:center;box-shadow:0 24px 80px #101b1299,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 8px;font-size:11px;font-weight:900;letter-spacing:.16em;color:#855034}.panel h1,.panel h2{margin:0 0 12px;font-family:"Songti SC","Noto Serif SC",serif;font-size:clamp(42px,9vw,64px);line-height:1;font-weight:900;letter-spacing:-.06em}.panel h2{font-size:clamp(32px,7vw,49px)}.panel-card>p:not(.eyebrow){margin:0 auto 18px;max-width:390px;line-height:1.65;color:#4f5b50;font-size:14px}.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:18px 0}.rules span{padding:11px 4px;border:1px dashed #8d816a;border-radius:12px;font-size:11px;font-weight:850}.rules i{display:grid;place-items:center;width:28px;height:28px;margin:0 auto 6px;border-radius:50%;background:#456549;color:#fff;font-style:normal}.primary,.secondary{width:100%;min-height:50px;border-radius:14px;border:0;cursor:pointer;font-weight:900}.primary{background:#d2573f;color:#fff;box-shadow:0 7px 0 #9a3c2d,0 12px 20px #7d392f40}.primary:active{transform:translateY(4px);box-shadow:0 3px 0 #9a3c2d}.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:8px;margin:7px 0 21px}.result-score span{font-size:12px}.result-score strong{font-size:52px;color:#d05239}.result-score em{font-style:normal;opacity:.55;font-size:20px}
@media(max-width:650px){.back span{display:none}.topbar{grid-template-columns:42px 1fr 42px}.level-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}.control-track{width:calc(100vw - 24px)}.panel-card{padding:27px 20px 23px}.rules{margin:13px 0}.message{bottom:calc(var(--safe-bottom) + 98px)}}@media(max-height:680px){.panel-card{transform:scale(.9)}.hud{top:calc(var(--safe-top) + 43px)}.control-track{height:70px}.control-track button{height:54px}.message{bottom:calc(var(--safe-bottom) + 84px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}