:root{color:#f5f5f5;background:#1b1b1b;font-family:Inter,system-ui,Arial,sans-serif}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0}body{min-width:100vw;min-height:100vh;overflow:hidden}button{font:inherit}#app{width:100vw;height:100vh}.page{background:radial-gradient(circle at top,#2b2b2b,#161616 60%);place-items:center;width:100%;height:100%;padding:12px;display:grid}.game-shell{background:#202020;border:1px solid #3a3a3a;border-radius:16px;grid-template-rows:48px 1fr;width:100%;height:100%;display:grid;overflow:hidden;box-shadow:0 12px 50px #00000059}.top-bar{background:#2a2a2a;border-bottom:1px solid #3a3a3a;justify-content:space-between;align-items:center;gap:16px;padding:0 16px;display:flex}.title{font-weight:700}.pause-btn{color:#f5f5f5;cursor:pointer;background:#3a3a3a;border:1px solid #5a5a5a;border-radius:4px;padding:6px 12px;font-size:.9em;transition:all .15s}.pause-btn:hover{background:#454545;border-color:#7a7a7a}.pause-btn:active{background:#2a2a2a;border-color:#fff}.stats{text-align:center;justify-items:center;min-width:220px;margin-left:auto;margin-right:auto;line-height:1.1;display:grid}.dot-count{color:#fff;font-size:1.2rem;font-weight:800}.dot-rates{color:#b8b8b8;margin-top:2px;font-size:.78rem}.content{grid-template-columns:minmax(0,1fr) clamp(340px,26vw,460px);min-height:0;display:grid}.canvas-wrap{background:#111;min-width:0;min-height:0;position:relative}#game-canvas{touch-action:none;width:100%;height:100%;display:block}.side-panel{background:#262626;border-left:1px solid #3a3a3a;padding:16px;overflow:auto}.side-panel h2{margin-top:0}#shop{gap:8px;display:grid}.shop-item{grid-template-columns:1fr auto;align-items:stretch;gap:8px;display:grid}#shop button{color:#f5f5f5;cursor:pointer;background:#2a2a2a;border:1px solid #4a4a4a;border-radius:6px;padding:8px 12px;transition:all .15s}.shop-place-btn{text-align:center;touch-action:none;place-items:center;gap:6px;width:100%;min-width:0;display:grid}.shop-item-name,.shop-item-cost{min-width:0}.shop-item-name{font-weight:700}.shop-item-cost{color:#d7d7d7;font-size:.85em}.shop-item-preview{--preview-cell-size:10px;--preview-max-width:150px;--preview-max-height:75px;--preview-color:#fff;--preview-fill:#ffffff24;grid-template-columns:repeat(var(--item-width), 1fr);grid-template-rows:repeat(var(--item-height), 1fr);width:min(var(--preview-max-width), calc(var(--item-width) * var(--preview-cell-size)));height:min(var(--preview-max-height), calc(var(--item-height) * var(--preview-cell-size)));border:2px solid var(--preview-color);background:color-mix(in srgb, var(--preview-color) 45%, #111);border-radius:3px;justify-self:center;gap:1px;display:grid;overflow:hidden;box-shadow:0 0 0 1px #00000059}.shop-item-preview-cell{background:color-mix(in srgb, var(--preview-color) 18%, transparent);min-width:0;min-height:0}.shop-item-preview.producer{--preview-color:#409bc8;--preview-fill:#5cc8ff29}.shop-item-preview.consumer{--preview-color:#ba519c;--preview-fill:#ff7ad929}.shop-level-controls{grid-template-columns:28px 52px 28px;align-items:center;gap:4px;display:grid}#shop .shop-level-btn{text-align:center;width:28px;min-height:28px;padding:0}#shop .shop-level-btn-plus{background:#244a2b;border-color:#3f8f4b}#shop .shop-level-btn-plus:hover:not(:disabled){background:#2d6136;border-color:#55b864}#shop .shop-level-btn-minus{background:#562929;border-color:#9b4545}#shop .shop-level-btn-minus:hover:not(:disabled){background:#6b3333;border-color:#c75a5a}.shop-level-readout{background:#2a2a2a;border:1px solid #3f3f3f;border-radius:6px;place-items:center;min-width:52px;padding:0 4px;display:grid}.shop-level-text{color:#ccc;white-space:nowrap;font-size:.85em;font-weight:700}.shop-speed-text{color:#999;white-space:nowrap;font-size:.72em}#shop button:hover:not(:disabled){background:#333;border-color:#6a6a6a}#shop button:active:not(:disabled){background:#1a1a1a;border-color:#fff}#shop button:disabled{opacity:.5;cursor:not-allowed}#shop button.selected{background:#1a1a1a;border:2px solid #fff;padding:7px 11px}.context-panel{z-index:1000;pointer-events:auto;background:#2a2a2a;border:1px solid #5a5a5a;border-radius:8px;max-width:220px;padding:12px;position:absolute;box-shadow:0 8px 24px #00000080}.context-panel.pinned{border-color:#fff}.entity-info{border-bottom:1px solid #4a4a4a;margin-bottom:12px;padding-bottom:12px}.entity-info:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.entity-header{color:#5f8;margin-bottom:6px;font-size:.95em;font-weight:600}.entity-details{color:#ccc;margin-bottom:8px;font-size:.85em}.context-panel button{color:#f5f5f5;cursor:pointer;background:#3a3a3a;border:1px solid #5a5a5a;border-radius:4px;width:100%;margin-top:6px;padding:6px 10px;font-size:.85em;transition:all .15s}.context-panel button:hover:not(:disabled){background:#454545;border-color:#7a7a7a}.context-panel button:active:not(:disabled){background:#2a2a2a;border-color:#fff}.context-panel button:disabled{opacity:.5;cursor:not-allowed}.upgrade-btn{color:#5f8}.delete-btn{color:#f55}@media (width<=780px){body{overflow:auto}#app{height:auto;min-height:100vh}.page{height:auto;min-height:100vh;padding:8px}.game-shell{grid-template-rows:auto 1fr;height:auto;min-height:calc(100vh - 16px)}.top-bar{flex-wrap:wrap;gap:8px;min-height:48px;padding:8px 12px}.stats{flex-basis:100%;margin-left:0;font-size:.85em}.content{grid-template-rows:minmax(360px,58vh) auto;grid-template-columns:1fr}.side-panel{border-top:1px solid #3a3a3a;border-left:none;max-height:none}.shop-item{grid-template-columns:1fr}.shop-level-controls{grid-template-columns:36px 1fr 36px}#shop .shop-level-btn{width:36px;min-height:36px}}