:root{--paper:#f7f1df;--ink:#292820;--muted:#85806f;--panel-bg:#fffdf2;--panel-w:clamp(260px,29vw,360px)}*{box-sizing:border-box}html,body{background:var(--paper);width:100%;height:100%;color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-family:ui-rounded,SF Pro Rounded,ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden}body{overscroll-behavior:none;touch-action:manipulation;display:flex}.game{flex:1;min-width:0;height:100svh;position:relative;overflow:hidden}canvas{width:100%;height:100%;image-rendering:pixelated;touch-action:none;-webkit-tap-highlight-color:transparent;cursor:pointer;display:block;position:absolute;inset:0}.hud{z-index:2;pointer-events:none;align-items:stretch;gap:.6rem;display:flex;position:absolute;top:clamp(.7rem,2vw,1.4rem);left:calc(clamp(.7rem,2vw,1.4rem) + 3.7rem)}.back-btn{z-index:5;border:3px solid var(--ink);width:3.1rem;height:3.1rem;color:var(--ink);background:#fffdf2f2;border-radius:1rem;place-items:center;font-size:1.5rem;line-height:1;text-decoration:none;display:grid;position:absolute;top:clamp(.7rem,2vw,1.4rem);left:clamp(.7rem,2vw,1.4rem);box-shadow:0 3px #29282040}.back-btn:active{transform:translateY(2px)}.card{border:3px solid var(--ink);background:#fffdf2eb;border-radius:1rem;align-content:center;justify-items:center;gap:.1rem;padding:.5rem .9rem;display:grid;box-shadow:0 3px #29282040}.card small{color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-size:.58rem}.card strong{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:800;line-height:1}.star-card{flex-direction:row;align-items:center;gap:.45rem;display:flex}.star-card .star{font-size:clamp(1.2rem,2.4vw,1.7rem)}.star-card.pop strong{animation:.35s pop}@keyframes pop{40%{transform:scale(1.45)rotate(-6deg)}}.game-over{z-index:3;text-align:center;border:3px solid var(--ink);background:#fffdf2f5;border-radius:1.4rem;justify-items:center;gap:.7rem;padding:1.4rem 2rem;display:grid;position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);box-shadow:0 5px #29282040}.game-over[hidden],.event[hidden]{display:none}.game-over strong{letter-spacing:.06em;font-size:1.7rem}.game-over span{color:var(--muted);font-size:.85rem}.game-over button{border:3px solid var(--ink);color:var(--paper);background:var(--ink);font:inherit;cursor:pointer;border-radius:1rem;padding:.8rem 1.5rem;font-size:1.05rem;font-weight:700}.game-over button:active{transform:translateY(2px)}.event{z-index:3;border:3px solid var(--ink);letter-spacing:.12em;text-transform:uppercase;pointer-events:none;background:#ffe9a8;border-radius:1rem;padding:.6rem 1.1rem;font-size:.95rem;font-weight:800;animation:2.5s both event-in;position:absolute;top:24%;left:50%;transform:translate(-50%)}@keyframes event-in{0%{opacity:0;transform:translate(-50%,10px)scale(.8)}12%,80%{opacity:1;transform:translate(-50%)scale(1)}to{opacity:0;transform:translate(-50%,-8px)}}footer{z-index:2;right:1rem;bottom:max(.7rem,env(safe-area-inset-bottom));color:var(--muted);letter-spacing:.1em;text-transform:uppercase;pointer-events:none;justify-content:space-between;gap:1rem;font-size:.58rem;display:flex;position:absolute;left:1rem}#sync-status{opacity:.55}#menu-btn{z-index:5;border:3px solid var(--ink);width:3.1rem;height:3.1rem;color:var(--ink);cursor:pointer;background:#fffdf2f2;border-radius:1rem;font-size:1.35rem;line-height:1;display:none;position:absolute;top:.7rem;right:.7rem;box-shadow:0 3px #29282040}#menu-btn:active{transform:translateY(2px)}.panel{width:var(--panel-w);overscroll-behavior:contain;height:100svh;padding:.9rem .8rem calc(1.2rem + env(safe-area-inset-bottom));border-left:3px solid var(--ink);background:var(--panel-bg);overflow-y:auto}.panel-head{gap:.18rem;margin-bottom:1rem;display:grid}.panel-head b{letter-spacing:.18em;font-size:1.15rem}.panel-head span{color:var(--muted);font-size:.78rem}.panel section{margin-bottom:1.1rem}.panel h3{color:var(--muted);letter-spacing:.16em;text-transform:uppercase;margin:.1rem 0 .5rem;font-size:.72rem;font-weight:700}.opts{grid-template-columns:1fr 1fr;gap:.5rem;display:grid}.opts.color{grid-template-columns:repeat(3,1fr)}.opt{min-height:4.5rem;font:inherit;color:var(--ink);cursor:pointer;background:#f6f0dd;border:3px solid #29282029;border-radius:1.05rem;justify-items:center;gap:.22rem;padding:.55rem .3rem;transition:transform 80ms;display:grid}.opt:active{transform:scale(.93)}.opt.sel{border:3px solid var(--ink);background:#ffe9a8;box-shadow:0 2px #2928204d}.opt .ico{font-size:1.8rem;line-height:1.1}.opt .lbl{letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-size:.68rem;font-weight:700}.opt.sel .lbl{color:var(--ink)}.opt .swatch{border:3px solid #29282047;border-radius:.55rem;width:1.8rem;height:1.8rem}.building-tools{grid-template-columns:1fr 1fr;gap:.5rem;display:grid}.building-tools button{min-height:4.2rem;color:var(--ink);font:inherit;cursor:pointer;background:#f6f0dd;border:3px solid #29282029;border-radius:1.05rem;padding:.45rem .3rem;font-size:.72rem;font-weight:800}.building-tools button:active{transform:scale(.94)}.building-tools .building-icon{margin-bottom:.12rem;font-size:1.75rem;display:block}.building-tools .clear-buildings{min-height:2.8rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;background:0 0;grid-column:1/-1;font-size:.65rem}.speed-row{align-items:center;gap:.7rem;padding:.35rem .1rem;display:flex}.speed-row span{font-size:1.7rem}input[type=range]{appearance:none;cursor:pointer;background:0 0;flex:1;min-width:0;height:3.2rem}input[type=range]::-webkit-slider-runnable-track{border:3px solid var(--ink);background:linear-gradient(90deg,#8bd08b,#f2c235 55%,#e0566b);border-radius:.35rem;height:1.15rem}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:3px solid var(--ink);background:#fffdf2;border-radius:.35rem;width:2.5rem;height:2.5rem;margin-top:-.85rem;box-shadow:0 3px #2928204d}input[type=range]::-moz-range-track{border:3px solid var(--ink);background:linear-gradient(90deg,#8bd08b,#f2c235 55%,#e0566b);border-radius:.35rem;height:1.15rem}input[type=range]::-moz-range-thumb{border:3px solid var(--ink);background:#fffdf2;border-radius:.35rem;width:2.35rem;height:2.35rem;box-shadow:0 2px #2928204d}body.dark footer{color:#c5c0e2}body.dark #sync-status{opacity:.7}@media (width<=46rem){#menu-btn{display:block}.panel{z-index:4;width:min(360px,88vw);transition:transform .25s;position:fixed;top:0;right:0;transform:translate(105%);box-shadow:-4px 0 16px #2928204d}.panel.open{transform:translate(0)}.panel-head{padding-right:3.4rem}.opts{grid-template-columns:1fr 1fr;gap:.28rem}.opt{min-height:4rem;padding:.4rem .15rem}.opt .ico{font-size:1.5rem}.card strong{font-size:1.1rem}footer{font-size:.5rem}#sync-status{display:none}}