:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:#0f172a;color:#f1f5f9}.city-builder{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#0f172a,#1e293b)}.city-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;background:#1e293b;border-bottom:1px solid #334155}.city-name-wrap{display:flex;align-items:center;gap:.75rem}.city-name-input{background:none;border:none;color:#f1f5f9;font-size:1.25rem;font-weight:700;border-bottom:2px dashed #475569;padding:.15rem .3rem;outline:none;width:200px}.city-name-input:focus{border-bottom-color:#38bdf8}.city-badge{font-size:.65rem;text-transform:uppercase;letter-spacing:.15em;background:#f59e0b22;color:#f59e0b;border:1px solid #f59e0b44;padding:.2rem .5rem;border-radius:.25rem;font-weight:600}.speed-controls{display:flex;gap:.35rem}.speed-btn{background:#334155;border:1px solid #475569;color:#94a3b8;font-size:1rem;width:36px;height:36px;border-radius:.4rem;cursor:pointer;display:grid;place-items:center;transition:all .15s}.speed-btn:hover{background:#475569;color:#f1f5f9}.speed-btn.active{background:#38bdf8;color:#0f172a;border-color:#38bdf8}.stats-bar{display:flex;gap:.5rem;padding:.75rem 1.5rem;background:#1e293bcc;border-bottom:1px solid #334155;flex-wrap:wrap}.stat{display:flex;align-items:center;gap:.4rem;background:#0f172a;border:1px solid #334155;padding:.4rem .75rem;border-radius:.5rem;min-width:140px}.stat-icon{font-size:1.1rem}.stat-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:#64748b}.stat-value{margin-left:auto;font-weight:700;font-size:.9rem;color:#e2e8f0;font-variant-numeric:tabular-nums}.stat-warn{border-color:#ef444488;background:#ef444411}.stat-warn .stat-value{color:#ef4444;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.main-area{flex:1;display:grid;grid-template-columns:200px 1fr 220px;gap:0;min-height:0}.toolbar{background:#1e293b;border-right:1px solid #334155;padding:.75rem;display:flex;flex-direction:column;gap:.35rem;overflow-y:auto}.toolbar-title{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:#64748b;margin-bottom:.5rem}.tool-btn{display:flex;align-items:center;gap:.5rem;background:#0f172a;border:1px solid #334155;color:#cbd5e1;padding:.5rem .6rem;border-radius:.5rem;cursor:pointer;transition:all .15s;text-align:left;font-size:.8rem}.tool-btn:hover{background:#334155;border-color:#475569}.tool-btn.active{background:#38bdf822;border-color:#38bdf8;color:#38bdf8}.demolish-btn.active{background:#ef444422;border-color:#ef4444;color:#ef4444}.tool-emoji{font-size:1.15rem;width:24px;text-align:center}.tool-name{flex:1;font-weight:500}.tool-cost{font-size:.7rem;color:#64748b;font-variant-numeric:tabular-nums}.grid-container{display:grid;place-items:center;padding:1rem;overflow:auto;background:radial-gradient(circle at 50% 50%,#1e293b44,transparent 70%),#0f172a}.grid{display:grid;gap:2px;width:min(100%,640px);aspect-ratio:1}.cell{background:#1e293b;border:1px solid #33415544;border-radius:.25rem;cursor:pointer;transition:all .12s;display:grid;place-items:center;aspect-ratio:1;position:relative}.cell:hover{background:#334155;border-color:#475569;transform:scale(1.05);z-index:1}.cell.built:hover{filter:brightness(1.3)}.cell-emoji{font-size:clamp(.7rem,1.5vw,1.2rem);line-height:1}.road-cell{border-radius:0}.log-panel{background:#1e293b;border-left:1px solid #334155;padding:.75rem;display:flex;flex-direction:column}.log-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.3rem}.log-msg{font-size:.72rem;color:#94a3b8;padding:.3rem .5rem;background:#0f172a;border-radius:.3rem;border-left:2px solid #334155;line-height:1.35}.log-msg:first-child{color:#e2e8f0;border-left-color:#38bdf8}@media(max-width:800px){.main-area{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}.toolbar{flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid #334155}.tool-btn{flex:0 0 auto}.log-panel{border-left:none;border-top:1px solid #334155;max-height:150px}.stats-bar{justify-content:center}.stat{min-width:120px}}