: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}html,body,#root{margin:0;min-height:100vh;background:#0f1923;color:#e0e0e0}.app{display:flex;flex-direction:column;min-height:100vh}.top-bar{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;background:#1a2634;border-bottom:1px solid #2a3a4a;flex-wrap:wrap;gap:.5rem}.top-bar h1{margin:0;font-size:1.25rem;font-weight:700;letter-spacing:-.01em;color:#fff}.resources{display:flex;gap:1.5rem;flex-wrap:wrap}.resource{display:flex;align-items:center;gap:.4rem;font-size:.9rem}.resource .icon{font-size:1.1rem}.resource .label{color:#89a;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}.resource .value{font-weight:600;font-variant-numeric:tabular-nums;color:#fff}.controls{display:flex;gap:.5rem;align-items:center}.btn{padding:.4rem .85rem;border:1px solid #3a4a5a;border-radius:.375rem;background:#243040;color:#cdd;font-size:.8rem;cursor:pointer;transition:background .15s,border-color .15s}.btn:hover{background:#2e3e50;border-color:#4a6a8a}.btn.active{background:#2a5080;border-color:#4a80b0;color:#fff}.speed-label{font-size:.75rem;color:#6a7a8a;margin-right:.25rem}.main-layout{display:flex;flex:1;overflow:hidden}.sidebar{width:220px;background:#16202c;border-right:1px solid #2a3a4a;padding:1rem;display:flex;flex-direction:column;gap:.25rem;overflow-y:auto}.sidebar h2{margin:0 0 .5rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:#6a7a8a}.building-btn{display:flex;align-items:center;gap:.6rem;padding:.55rem .65rem;border:1px solid transparent;border-radius:.375rem;background:transparent;color:#bbc;font-size:.85rem;cursor:pointer;text-align:left;transition:background .15s,border-color .15s;width:100%}.building-btn:hover{background:#1e2e3e;border-color:#2a3a4a}.building-btn.selected{background:#1e3050;border-color:#3a6090;color:#fff}.building-btn .bld-icon{font-size:1.3rem;width:1.8rem;text-align:center}.building-btn .bld-info{display:flex;flex-direction:column}.building-btn .bld-name{font-weight:600;font-size:.8rem}.building-btn .bld-cost{font-size:.7rem;color:#6a7a8a}.demolish-btn{margin-top:.5rem;border-color:#5a2020;color:#e88}.demolish-btn:hover{background:#2a1515;border-color:#8a3030}.demolish-btn.selected{background:#3a1515;border-color:#aa4040}.map-container{flex:1;display:flex;align-items:center;justify-content:center;padding:1.5rem;overflow:auto}.map{display:grid;gap:2px;background:#0b1420;border:2px solid #2a3a4a;border-radius:.5rem;padding:2px}.cell{width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;cursor:pointer;border-radius:.25rem;transition:background .15s,transform .1s;position:relative;-webkit-user-select:none;user-select:none}.cell:hover{transform:scale(1.08);z-index:1}.cell.grass{background:#1a3020}.cell.grass:hover{background:#244030}.cell.water{background:#0a2040;cursor:default}.cell.water:hover{transform:none}.cell .level-badge{position:absolute;bottom:1px;right:2px;font-size:.55rem;font-weight:700;color:#ff0;text-shadow:0 0 3px #000}.info-panel{width:220px;background:#16202c;border-left:1px solid #2a3a4a;padding:1rem;overflow-y:auto}.info-panel h2{margin:0 0 .75rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:#6a7a8a}.info-row{display:flex;justify-content:space-between;font-size:.8rem;padding:.3rem 0;border-bottom:1px solid #1a2a3a}.info-row .info-label{color:#7a8a9a}.info-row .info-value{font-weight:600;color:#dde}.log{margin-top:1rem}.log h3{margin:0 0 .4rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#5a6a7a}.log-entries{display:flex;flex-direction:column;gap:.2rem;max-height:300px;overflow-y:auto}.log-entry{font-size:.7rem;color:#6a8a7a;padding:.15rem 0}.log-entry.negative{color:#a86a6a}.log-entry.positive{color:#6aa86a}.log-entry.special{color:#a8a86a}@media(max-width:900px){.sidebar,.info-panel{width:180px;padding:.75rem}.cell{width:38px;height:38px;font-size:1.2rem}}@media(max-width:640px){.main-layout{flex-direction:column}.sidebar,.info-panel{width:100%;border-right:none;border-left:none;border-bottom:1px solid #2a3a4a;flex-direction:row;flex-wrap:wrap;gap:.5rem}.sidebar h2,.info-panel h2{width:100%}}