*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:#1a1a1a;color:#e8e0d0;font-family:Segoe UI,system-ui,sans-serif}#app{height:100%}.game-screen{display:flex;flex-direction:column;height:100%;overflow-y:auto}.game-screen[hidden]{display:none}.header{position:sticky;top:0;z-index:20;flex-shrink:0;background:#1a1a1a;border-bottom:1px solid #333;padding:1rem;text-align:center}.header-top{display:grid;grid-template-columns:12rem 12rem 12rem auto 12rem;justify-content:center;align-items:stretch;column-gap:10px;margin-bottom:.75rem}.header-title{display:flex;flex-direction:column;justify-content:center;min-width:0}.legend-panel{display:flex;flex-direction:column;align-items:stretch;width:12rem;border:1px solid #6b5a3e;border-radius:6px;background:#201c14;padding:.5rem;text-align:left}.legend-panel-title{margin:0 0 .4rem;font-size:.85rem;font-weight:600;letter-spacing:.02em;color:#cfc4ac;text-align:center;border-bottom:1px solid #4a4030;padding-bottom:.35rem}.info-panel-yields-row{display:flex;align-items:center;gap:.4rem}.info-panel-yields-label{flex-shrink:0;font-size:.85rem;color:#cfc4ac}.info-panel-yields{display:block;image-rendering:pixelated;image-rendering:crisp-edges}.header h1,.game-title{margin:0 0 .25rem;font-size:1.5rem;font-weight:600;letter-spacing:.02em}.subtitle{margin:0 0 .25rem;color:#a89878;font-size:.9rem}.controls-hint{margin:0 0 .75rem;color:#7a7060;font-size:.8rem}.header-actions{display:flex;flex-direction:column;gap:.5rem}.header-actions button{padding:.5rem 1.25rem;border:1px solid #6b5a3e;border-radius:4px;background:#3d3428;color:#e8e0d0;font-size:.9rem;cursor:pointer;transition:background .15s}.header-actions button:hover:not(:disabled){background:#4d4436}#start-game-btn{border-color:#8a6a2a;background:#5a4520}#start-game-btn:hover:not(:disabled){background:#6b5528}.header-actions button:disabled{opacity:.55;cursor:default}.map-container{flex:1;min-height:420px;overflow:hidden;background:#0f0f0f;border:1px solid #333;border-radius:6px;margin:1rem;position:relative}#map-canvas{display:block;width:100%;height:100%;cursor:grab;image-rendering:pixelated;image-rendering:crisp-edges}#map-canvas.is-dragging{cursor:grabbing}.game-options-dialog{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;align-items:center;justify-content:center;background:#000000a6}.game-options-dialog[hidden]{display:none}.game-options-panel{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.5rem 2rem;background:#241f16;border:1px solid #6b5a3e;border-radius:8px;box-shadow:0 12px 32px #0000008c}.game-options-box{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%;border:1px solid #6b5a3e;border-radius:6px;background:#1a1610;padding:.75rem}.game-options-box .legend-panel-title{width:100%}.game-options-players{display:flex;align-items:center;justify-content:center;gap:.75rem;font-size:.9rem;color:#e8e0d0;width:100%}.game-options-players--left{justify-content:flex-start}.game-options-players-label{color:#cfc4ac}.game-options-radio-group{display:flex;gap:1rem}.game-options-radio{display:flex;align-items:center;gap:.35rem;cursor:pointer}.game-options-radio input[type=radio]{accent-color:#8a6a2a;cursor:pointer}.game-options-read-only{display:flex;align-items:center}.game-options-label{padding:.15rem .6rem;border:1px solid #4a4030;border-radius:4px;background:#1a1610;color:#cfc4ac}#game-options-start-btn{padding:.6rem 2rem;border:1px solid #8a6a2a;border-radius:4px;background:#5a4520;color:#e8e0d0;font-size:1rem;cursor:pointer;transition:background .15s}#game-options-start-btn:hover{background:#6b5528}.city-dialog{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;background:#00000080}.city-dialog[hidden]{display:none}.city-dialog-panel{position:absolute;display:inline-flex;flex-direction:column;width:max-content;max-width:min(90%,36rem);max-height:85%;background:#241f16;border:1px solid #6b5a3e;border-radius:8px;box-shadow:0 12px 32px #0000008c;padding:.5rem;gap:.5rem}.city-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;border-bottom:1px solid #4a4030;padding-bottom:.4rem}.city-dialog-drag-handle{flex-shrink:0;width:1.6rem;height:1.6rem;display:flex;align-items:center;justify-content:center;line-height:1;border:1px solid #6b5a3e;border-radius:4px;background:#3d3428;color:#e8e0d0;font-size:1rem;letter-spacing:-1px;cursor:grab;-webkit-user-select:none;user-select:none}.city-dialog-drag-handle:hover{background:#4d4436}.city-dialog-drag-handle:active,.city-dialog-drag-handle.is-dragging{cursor:grabbing;background:#4d4436}.city-dialog-title-input{flex:1;min-width:8rem;margin:0;padding:.2rem .4rem;border:1px solid transparent;border-radius:4px;background:transparent;color:#e8e0d0;font-family:inherit;font-size:1.1rem;font-weight:600;letter-spacing:.02em}.city-dialog-title-input:hover{border-color:#4a4030}.city-dialog-title-input:focus{outline:none;border-color:#8a6a2a;background:#1a1610}.city-dialog-save,.city-dialog-close{flex-shrink:0;height:1.6rem;line-height:1;border:1px solid #6b5a3e;border-radius:4px;background:#3d3428;color:#e8e0d0;font-size:.85rem;cursor:pointer}.city-dialog-close{width:1.6rem;font-size:1rem;padding:0}.city-dialog-save{padding:0 .75rem}.city-dialog-save:hover,.city-dialog-close:hover{background:#4d4436}.city-dialog-body{display:flex;align-items:flex-start;gap:.75rem;overflow:auto;padding:.25rem;font-size:.9rem;color:#cfc4ac}.city-dialog-minimap{display:block;flex-shrink:0;image-rendering:pixelated;image-rendering:crisp-edges;border:1px solid #4a4030;border-radius:4px}.city-dialog-side{display:flex;flex-direction:column;gap:.75rem}.city-dialog-status,.city-dialog-yields{display:flex;flex-direction:column;gap:.5rem;min-width:8rem;border:1px solid #4a4030;border-radius:4px;background:#201c14;padding:.6rem}.city-dialog-yields-title{margin:0 0 .2rem;font-size:.8rem;font-weight:600;letter-spacing:.02em;color:#a89878;text-transform:uppercase;border-bottom:1px solid #4a4030;padding-bottom:.3rem}.city-dialog-yield-row{display:flex;justify-content:space-between;gap:.75rem;font-size:.9rem}.city-dialog-yield-value{font-weight:600;color:#e8e0d0}.legend{display:flex;flex-direction:column;gap:.4rem}.legend-item{display:flex;align-items:center;gap:.5rem;font-size:.85rem}.legend-swatch{width:16px;height:16px;border:1px solid rgba(255,255,255,.15);border-radius:2px}