:root{color-scheme:dark;font:15px system-ui,sans-serif;background:#101916;color:#f3f5e8}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
main{width:min(100%,460px);margin:auto;padding:12px 14px max(12px,env(safe-area-inset-bottom))}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
h1{margin:0;font-size:23px;letter-spacing:-.04em}
header span,.stats span,#panel p,small{color:#baccc0}
header span,.stats span{font-size:12px}
.stats{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:6px;font-variant-numeric:tabular-nums}
.stats div{background:#1b2a24;border-radius:8px;padding:6px 8px;min-width:0}
.stats b{display:block;white-space:nowrap;font-size:clamp(12px,3.6vw,16px)}
.stats b.urgent{color:#ffc081}
progress{display:block;width:100%;height:5px;margin:8px 0;border:0;border-radius:4px;overflow:hidden;appearance:none;background:#304138}
progress::-webkit-progress-bar{background:#304138}
progress::-webkit-progress-value{background:#b8ea8b}
progress::-moz-progress-bar{background:#b8ea8b}
.board{margin:auto;width:min(100%,max(160px,calc((100svh - 218px - env(safe-area-inset-bottom)) * .75)));border:1px solid #517268;border-radius:10px;overflow:hidden;background:#1a2924}
canvas{display:block;width:100%;aspect-ratio:3/4}
main[data-mode=shop] .board,main[data-mode=perk] .board,main[data-mode=ready] .board,main[data-mode=clear-menu] .board{width:min(100%,180px,27svh)}
main[data-mode=clear] .board{cursor:pointer}
#pad{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:9px;height:72px;background:#20352b;border:1px solid #537365;border-radius:12px;touch-action:none;user-select:none;-webkit-user-select:none}
#pad.active{background:#345745}
#arrow{font-size:28px;min-width:32px;text-align:center;color:#c3f391}
#direction{min-width:114px}
#panel{margin-top:10px;padding:12px;display:grid;gap:8px;background:#1b2a24;border:1px solid #365347;border-radius:12px}
#panel h2,#panel p{margin:0}
#panel h2{font-size:19px}
#panel p{font-size:13px}
button{cursor:pointer;border:1px solid #53695b;border-radius:8px;padding:8px 9px;background:#263c31;color:#f4f7ef;min-height:44px;font:700 13px system-ui}
button.primary{background:#c6f28e;color:#16251a;border-color:transparent}
button:disabled{cursor:default;color:#bcc9bf;background:#26352e;border-color:#37483e}
button:focus-visible{outline:2px solid #e1fbb6;outline-offset:2px}
.shop-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:min(34svh,290px);overflow:auto;padding:2px}
.shop-list button{text-align:left}
.shop-list small{display:block;font-weight:500;margin-top:2px}
#status{min-height:1.2em;margin:7px 0 0;color:#f1c180;font-size:12px;text-align:center}
.header-actions{display:flex;align-items:center;gap:8px}
#pause{min-height:44px;padding-inline:10px}
main[data-mode=paused] .board{width:min(100%,180px,27svh)}
.stick{width:48px;height:48px;display:grid;place-items:center;flex:none;border-radius:50%;background:#172b21;border:1px solid #688978}
#arrow{display:block}
#direction{font-size:13px;min-width:0}
.shop-list{overscroll-behavior:contain}
#panel button small{display:block;color:inherit;font-weight:500}
#panel button:disabled small{color:#bdcabe}
@media (max-height:680px){.board{width:min(100%,max(145px,calc((100svh - 250px - env(safe-area-inset-bottom)) * .75)))}}