*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#e9e3d5}body{font-family:ui-rounded,SF Pro Rounded,system-ui,sans-serif;color:#4a4740;-webkit-user-select:none;user-select:none}#app{position:fixed;top:0;right:0;bottom:0;left:0}#app canvas{display:block}.hud{position:fixed;top:14px;left:16px;z-index:1;pointer-events:none;display:flex;gap:8px;align-items:center}.hud .pin{width:20px;height:20px}.hud .score{font-weight:800;font-size:26px;font-variant-numeric:tabular-nums}.hud-right{position:fixed;top:12px;right:14px;z-index:1;display:flex;gap:10px;align-items:center}.hud-right .sandbox{padding:4px 9px;border-radius:8px;background:#e5483a;color:#fff;font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase}.hud-right .sandbox[hidden]{display:none}.hud-right .week{display:flex;gap:6px;align-items:center;font-weight:700;font-size:13px}.hud-right .week svg{width:22px;height:22px;transform:rotate(-90deg)}.hud-right .week circle{fill:none;stroke-width:4}.hud-right .week .track{stroke:#4a474026}.hud-right .week .fill{stroke:#4a4740;stroke-dasharray:1;stroke-dashoffset:1}.hud-right .speed{display:flex;gap:2px;padding:3px;border-radius:12px;background:#faf7f0eb;box-shadow:0 2px 10px #3c321e1f}.hud-right button{width:32px;height:28px;border:none;border-radius:9px;background:none;cursor:pointer;display:grid;place-items:center}.hud-right button svg{width:16px;height:16px;fill:#4a4740;opacity:.45}.hud-right button:hover svg{opacity:.8}.hud-right button.on{background:#4a4740}.hud-right button.on svg{fill:#faf7f0;opacity:1}.hint{position:fixed;bottom:8px;left:12px;z-index:1;pointer-events:none;font-size:11px;opacity:.55}.hint:before{content:attr(data-meta) " · "}.toolbar{position:fixed;bottom:28px;left:50%;transform:translate(-50%);z-index:1;display:flex;gap:6px;padding:6px 8px;border-radius:14px;background:#faf7f0eb;box-shadow:0 2px 10px #3c321e1f}.tool{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;border-radius:10px}.tool svg{width:22px;height:22px}.tool span{font-weight:700;font-size:15px;min-width:1.4em;font-variant-numeric:tabular-nums}.tool.empty{opacity:.35}.tool[hidden]{display:none}.tool.pickable{cursor:pointer}.tool.pickable:hover{background:#4a474014}.tool.selected{background:#4a4740;color:#faf7f0}.game-over{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--theme-bg, #f5b44c) 40%,transparent);animation:fade-in .6s ease .8s both}.game-over[hidden]{display:none}.game-over .card{min-width:240px;padding:22px 28px;border-radius:18px;text-align:center;background:#faf7f0f5;box-shadow:0 6px 30px #3c321e2e}.game-over .label{font-size:12px;text-transform:uppercase;letter-spacing:.12em;opacity:.6}.game-over .score{font-size:56px;font-weight:800;line-height:1.1;margin-top:6px;font-variant-numeric:tabular-nums}.game-over .sub{font-size:13px;opacity:.7}.game-over .actions{display:flex;gap:8px;justify-content:center;margin-top:18px}.game-over button{font:inherit;font-weight:700;font-size:14px;padding:8px 16px;border:none;border-radius:10px;background:#5b5f66;color:#faf7f0;cursor:pointer}.game-over button:not(:first-child){background:#e3ddcf;color:#4a4740}.game-over button:hover{filter:brightness(1.08)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.upgrades{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--theme-bg, #f5b44c) 50%,transparent);animation:fade-in .3s ease both}.upgrades[hidden]{display:none}.upgrades .card{padding:20px 24px;border-radius:18px;text-align:center;background:#faf7f0f7;box-shadow:0 6px 30px #3c321e2e}.upgrades .label{font-weight:800;font-size:18px}.upgrades .sub{font-size:12px;opacity:.6;margin-top:2px}.upgrades .choices{display:flex;gap:12px;margin-top:16px}.upgrades .choice{font:inherit;color:inherit;width:132px;padding:16px 10px 12px;border:2px solid transparent;border-radius:14px;background:#efe9dc;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px}.upgrades .choice:hover{border-color:#4a4740}.upgrades .choice .main{display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:800;font-size:16px}.upgrades .choice .main svg{width:44px;height:44px}.upgrades .choice .extra{display:flex;align-items:center;gap:5px;font-weight:700;font-size:13px;opacity:.75}.upgrades .choice .extra svg{width:16px;height:16px}.tutorial{position:fixed;top:56px;left:50%;transform:translate(-50%);z-index:1;width:min(360px,calc(100vw - 32px));padding:12px 14px 10px;border-radius:14px;background:#4a4740;color:#faf7f0;font-size:14px;line-height:1.4;box-shadow:0 4px 18px #3c321e40;animation:pop-in .35s ease both}.tutorial[hidden]{display:none}.tutorial b{color:#ffd98a}.tutorial .row{display:flex;align-items:center;gap:6px;margin-top:8px}.tutorial .count{flex:1;font-size:11px;opacity:.55}.tutorial button{font:inherit;font-size:12px;font-weight:700;border:none;border-radius:8px;padding:4px 10px;cursor:pointer}.tutorial .skip{background:none;color:#faf7f0;opacity:.6}.tutorial .next{background:#faf7f0;color:#4a4740}.tutorial .next[hidden]{display:none}@keyframes pop-in{0%{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%)}}.menu{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;align-items:center;padding:0 clamp(16px,7vw,90px);background:linear-gradient(90deg,color-mix(in srgb,var(--theme-bg, #f5b44c) 92%,transparent) 0%,color-mix(in srgb,var(--theme-bg, #f5b44c) 60%,transparent) 45%,transparent 75%);animation:fade-in .4s ease both}.menu[hidden]{display:none}.menu .panel{width:min(320px,100%);animation:rise-in .6s cubic-bezier(.2,.8,.2,1) both}.menu .logo{display:block;width:64px;height:64px;margin:0 0 16px -4px;filter:drop-shadow(0 3px 8px rgba(60,50,30,.15))}.menu h1{margin:0;font-size:clamp(44px,8vw,64px);line-height:.92;font-weight:900;letter-spacing:-.02em;color:#3d3a35}.menu .tag{margin:12px 0 26px;font-size:15px;opacity:.65}.menu button{font:inherit;font-weight:700;font-size:14px;border:none;border-radius:12px;padding:10px 14px;cursor:pointer;background:#e3ddcf;color:#4a4740;transition:transform .12s ease,filter .12s ease}.menu button:hover{filter:brightness(1.05);transform:translateY(-1px)}.menu button:active{transform:translateY(1px)}.menu .primary{width:100%;font-size:18px;padding:14px;background:#3d3a35;color:#faf7f0}.menu .row{display:flex;gap:8px;margin-top:8px}.menu .row button{flex:1}.menu .foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-size:13px}.menu .best{font-weight:800}.menu .sound,.menu .daynight{background:none;padding:4px 0;opacity:.7;font-size:13px}@keyframes rise-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.hud .score.bump{animation:bump .35s cubic-bezier(.3,1.6,.5,1)}@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.25)}to{transform:scale(1)}}.hud .score{display:inline-block;transform-origin:left center}.game-over .best-badge{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:8px;background:#f2b230;color:#3d3a35;font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase}.game-over .best-badge[hidden]{display:none}.hud-right .mute{width:32px;height:32px;border:none;border-radius:10px;background:#faf7f0eb;box-shadow:0 2px 10px #3c321e1f;cursor:pointer;display:grid;place-items:center}.hud-right .mute svg{width:16px;height:16px}body.in-menu .hud,body.in-menu .hud-right,body.in-menu .toolbar,body.in-menu .hint,body.in-menu .tutorial{visibility:hidden}.night .menu h1,.night .menu .tag,.night .menu .foot,.night .menu .sound,.night .menu .daynight,.night .hint{color:#eef0fa}.night .menu .primary{background:#eef0fa;color:#23253a}.menu .foot .daynight{margin-right:6px}.night .hud,.night .hud-right .week{color:#eef0fa}.night .hud-right .week .track{stroke:#eef0fa33}.night .hud-right .week .fill{stroke:#eef0fa}.update-notice{position:fixed;top:14px;left:50%;transform:translate(-50%);z-index:5;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:14px;background:#3d3a35;color:#faf7f0;font-size:14px;font-weight:700;box-shadow:0 6px 24px #0003;animation:pop-in .4s cubic-bezier(.2,.8,.2,1) both}.update-notice[hidden]{display:none}.update-notice button{font:inherit;border:none;border-radius:9px;cursor:pointer}.update-notice .reload{padding:6px 12px;background:#faf7f0;color:#3d3a35}.update-notice .later{padding:6px 8px;background:none;color:#faf7f0;opacity:.6}
