:root{color-scheme:dark;--bg: #0e1116;--panel: #161b22;--panel-2: #1e242e;--border: #2d333c;--text: #e6edf3;--muted: #8b949e;--accent: #d97757;--good: #4ade80;--bad: #f87171;--warn: #facc15;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;color:var(--text);background:var(--bg)}*{box-sizing:border-box}body{margin:0;height:100vh;overflow:hidden;background:var(--bg)}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button{background:var(--accent);color:#0b0e13;border:0;padding:6px 12px;border-radius:4px;font-weight:600;cursor:pointer}button:disabled{background:#555;color:#aaa;cursor:not-allowed}button.secondary{background:var(--panel-2);color:var(--text);border:1px solid var(--border)}input,select{background:var(--panel);color:var(--text);border:1px solid var(--border);padding:6px 8px;border-radius:4px;font:inherit}input:focus,select:focus{outline:1px solid var(--accent)}.app{width:100%;height:100vh;margin:0 auto;padding:0;overflow:hidden;position:relative}.page-scroll{position:absolute;top:44px;right:16px;bottom:16px;left:16px;overflow-y:auto;padding-top:8px}.top-chrome{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--border);padding:6px 0;margin-bottom:12px}.top-chrome-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.top-chrome-brand{font-size:16px;font-weight:700;letter-spacing:1px;color:var(--accent);margin-right:8px}.top-chrome-nav{display:flex;gap:4px;flex-wrap:wrap}.top-chrome-nav .nav-btn{background:transparent;color:var(--muted);border:1px solid transparent;font-weight:500;padding:4px 10px;font-size:13px}.top-chrome-nav .nav-btn:hover{color:var(--text);background:var(--panel)}.top-chrome-nav .nav-btn.active{color:var(--text);background:var(--panel);border-color:var(--border)}.top-chrome-nav .nav-btn .badge{display:inline-block;margin-left:6px;background:var(--bad);color:#0b0e13;font-size:10px;font-weight:700;padding:0 5px;border-radius:8px;vertical-align:1px}.top-chrome-user{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}.resource-overlay{position:fixed;top:52px;left:50%;transform:translate(-50%);z-index:40;display:flex;gap:6px;align-items:center;padding:6px 10px;background:#161b22eb;border:1px solid var(--border);border-radius:8px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 4px 16px #00000073}.resource-bar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:6px 8px;background:var(--panel);border:1px solid var(--border);border-radius:6px}.res-pill{display:flex;flex-direction:column;padding:4px 10px;border-radius:4px;background:var(--panel-2);border:1px solid var(--border);min-width:92px;font-variant-numeric:tabular-nums}.res-pill .res-pill-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px}.res-pill .res-pill-icon{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}.res-pill .res-pill-rate{color:var(--good);font-size:11px}.res-pill .res-pill-rate.bad{color:var(--bad)}.res-pill .res-pill-val{font-size:15px;font-weight:700}.res-pill .res-pill-cap{color:var(--muted);font-size:11px}.city-switcher{display:flex;align-items:center;gap:6px}.city-switcher select{font-weight:600}.construction-indicator{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;background:var(--panel);border:1px solid var(--border);border-radius:4px;font-size:12px;color:var(--warn)}.city-canvas-wrap{position:absolute;top:44px;right:0;bottom:0;left:0;background:radial-gradient(ellipse at center,#3c503259,#0e1116e6 70%),var(--bg);overflow:hidden;-webkit-user-select:none;user-select:none}.city-canvas-wrap svg{display:block;width:100%;height:100%}.map-canvas-wrap{position:absolute;top:44px;right:0;bottom:0;left:0;background:var(--bg);overflow:hidden;-webkit-user-select:none;user-select:none;perspective:1600px;perspective-origin:50% 50%}.map-canvas-wrap svg{display:block;width:100%;height:100%;cursor:grab;transform:rotateX(50deg);transform-origin:center center;transform-style:preserve-3d}.map-canvas-wrap svg:active{cursor:grabbing}.city-hex{cursor:pointer;transition:filter .12s ease,transform .12s ease;transform-origin:center;transform-box:fill-box}.city-hex>path{pointer-events:all}.city-hex:hover{filter:brightness(1.25)}.city-hex.queued{animation:hex-queued-pulse 1.4s ease-in-out infinite}@keyframes hex-queued-pulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.5) drop-shadow(0 0 6px var(--warn))}}.map-corner-btn{position:absolute;left:14px;bottom:14px;width:86px;height:96px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(180deg,#2c4a52,#1a3038);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--text);text-align:center;font-weight:700;font-size:12px;letter-spacing:.5px;text-transform:uppercase;border:none;transition:filter .12s ease;z-index:20}.map-corner-btn:hover{filter:brightness(1.25)}.map-corner-btn span{font-size:28px;line-height:1}.map-corner-btn small{display:block;font-size:10px;margin-top:2px;color:#e6edf3d9}.city-context-overlay{position:absolute;top:10px;left:14px;z-index:20;display:flex;align-items:center;gap:8px;background:#161b22d9;padding:6px 10px;border:1px solid var(--border);border-radius:6px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.right-overlay{position:absolute;right:12px;top:110px;bottom:12px;width:320px;z-index:25;display:flex;flex-direction:column;gap:8px;pointer-events:none}.right-overlay>.ov-panel{pointer-events:auto}.ov-panel{background:#161b22eb;border:1px solid var(--border);border-radius:8px;padding:8px 12px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 4px 16px #00000073;display:flex;flex-direction:column;min-height:0}.ov-panel.flex{flex:1 1 auto;min-height:80px}.ov-panel-head{display:flex;align-items:baseline;justify-content:space-between;cursor:pointer;-webkit-user-select:none;user-select:none}.ov-panel-head h3{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.ov-panel-head .count{font-size:12px;color:var(--text);font-weight:700}.ov-panel-body{margin-top:6px;overflow-y:auto;font-size:12px;flex:1}.ov-panel-body::-webkit-scrollbar{width:6px}.ov-panel-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px;margin:8px 0}.detail-cost{background:var(--panel-2);border:1px solid var(--border);border-radius:4px;padding:6px 8px;display:flex;flex-direction:column}.detail-cost .label{font-size:10px;text-transform:uppercase;color:var(--muted);letter-spacing:.5px}.detail-cost .val{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}.detail-cost.afford .val{color:var(--good)}.detail-cost.unafford .val{color:var(--bad)}.detail-req{font-size:12px;padding:2px 0}.detail-req.met{color:var(--good)}.detail-req.unmet{color:var(--bad)}.build-card{background:var(--panel-2);border:1px solid var(--border);border-radius:6px;padding:8px 10px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background .12s ease,border-color .12s ease}.build-card:hover:not(.disabled){background:var(--panel);border-color:var(--accent)}.build-card.disabled{opacity:.5;cursor:not-allowed}.build-card .head{display:flex;align-items:center;gap:8px;font-weight:600}.build-card .meta{font-size:11px;color:var(--muted)}.build-card .costs{display:flex;gap:8px;font-size:11px;font-variant-numeric:tabular-nums;flex-wrap:wrap}.build-card .costs span{color:var(--muted)}.build-card .costs span b{color:var(--text);font-weight:600}.build-card .costs span.unaffordable b{color:var(--bad)}.perspective-tabs{display:flex;gap:4px;margin-bottom:12px;border-bottom:1px solid var(--border);padding-bottom:0}.perspective-tab{background:transparent;color:var(--muted);border:1px solid transparent;border-bottom:0;border-radius:6px 6px 0 0;padding:8px 16px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;font-size:12px;cursor:pointer;margin-bottom:-1px}.perspective-tab.active{background:var(--panel);color:var(--text);border-color:var(--border);border-bottom-color:var(--panel)}.perspective-tab:hover:not(.active){color:var(--text)}.hex-grid{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 0}.hex-grid-row{display:flex;gap:6px}.hex-grid-row.offset{margin-left:48px}.hex-slot{position:relative;width:96px;height:110px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--panel-2);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:filter .12s ease,transform .12s ease;font-size:12px;color:var(--text);text-align:center;padding:0 8px}.hex-slot.empty{background:#2d333c66;border-color:transparent}.hex-slot.empty .hex-slot-label{color:var(--muted);font-style:italic}.hex-slot:hover{filter:brightness(1.2);transform:translateY(-1px)}.hex-slot.kind-timber{background:linear-gradient(180deg,#2c4a2a,#1d3320)}.hex-slot.kind-stone{background:linear-gradient(180deg,#4b4b4b,#2c2c2c)}.hex-slot.kind-iron{background:linear-gradient(180deg,#4d3940,#2c2024)}.hex-slot.kind-grain{background:linear-gradient(180deg,#6b5e1a,#3b340e)}.hex-slot.has-building{background:linear-gradient(180deg,#2c3a52,#1e2840)}.hex-slot.has-building.wall{background:linear-gradient(180deg,#3a3a3a,#1f1f1f)}.hex-slot.has-building.training{background:linear-gradient(180deg,#503020,#2b1810)}.hex-slot.has-building.faith{background:linear-gradient(180deg,#4a2f5a,#251830)}.hex-slot-icon{font-size:22px;line-height:1;margin-bottom:2px}.hex-slot-label{font-size:11px;font-weight:600;line-height:1.1;max-width:78px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hex-slot-meta{font-size:10px;color:#e6edf3b3}.hex-slot-badge{position:absolute;top:18px;right:18px;background:var(--accent);color:#0b0e13;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;pointer-events:none}.hex-slot.queued{outline:2px solid var(--warn);outline-offset:-3px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:var(--panel);border:1px solid var(--border);border-radius:8px;width:min(720px,92vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 12px 40px #0000008c}.modal-header{display:flex;align-items:baseline;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border);background:var(--panel-2)}.modal-header h2{font-size:16px;margin:0;text-transform:none;letter-spacing:0;color:var(--text)}.modal-header .modal-subtitle{color:var(--muted);font-size:12px}.modal-close{margin-left:auto;background:transparent;color:var(--muted);border:0;font-size:18px;padding:0 8px;font-weight:400}.modal-close:hover{color:var(--text)}.modal-body{padding:14px 18px;overflow-y:auto}.modal-body h3{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin:16px 0 8px}.modal-body h3:first-child{margin-top:0}.modal-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}.topbar{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--border)}.topbar h1{font-size:18px;margin:0;letter-spacing:.5px}.topbar .user{color:var(--muted)}.topbar .user button{margin-left:12px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:12px 16px;margin-bottom:16px}.panel h2{font-size:14px;margin:0 0 8px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.row{display:flex;gap:12px;flex-wrap:wrap}.row>*{flex:1;min-width:200px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}.tile{background:var(--panel-2);border:1px solid var(--border);padding:8px;border-radius:4px;font-size:13px}.tile .name{font-weight:600}.tile .meta{color:var(--muted);font-size:12px}.stockpile{display:flex;gap:16px;font-size:14px}.stockpile .res{color:var(--muted)}.stockpile .res b{color:var(--text);font-variant-numeric:tabular-nums}.error{color:var(--bad)}.warn{color:var(--warn)}.good{color:var(--good)}.muted{color:var(--muted)}form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}label{color:var(--muted)}table{width:100%;border-collapse:collapse}th,td{padding:6px 8px;text-align:left;border-bottom:1px solid var(--border);font-size:13px}th{color:var(--muted);font-weight:600}.unit-thumb{display:inline-block;vertical-align:top;margin:2px;cursor:default}.unit-thumb-art{border-radius:4px;border:1px solid var(--border);background-color:var(--panel-2);animation:unit-idle 4s ease-in-out infinite;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;will-change:transform}.unit-thumb:nth-child(2n) .unit-thumb-art{animation-delay:-1s}.unit-thumb:nth-child(3n) .unit-thumb-art{animation-delay:-2s}.unit-thumb:nth-child(5n) .unit-thumb-art{animation-delay:-3s}.unit-thumb.is-static .unit-thumb-art{animation:none}.unit-thumb:hover .unit-thumb-art{transform:translateY(-3px) scale(1.06);box-shadow:0 4px 12px #d9775759;border-color:var(--accent)}.unit-thumb-badge{position:absolute;right:2px;bottom:18px;background:#0b0e13d9;color:var(--text);font-size:11px;font-variant-numeric:tabular-nums;font-weight:600;padding:1px 5px;border-radius:3px;border:1px solid var(--border);pointer-events:none}.unit-thumb-label{color:var(--muted);font-size:11px;text-align:center;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unit-thumb-missing{display:inline-flex;align-items:center;justify-content:center;background:var(--panel-2);border:1px dashed var(--border);border-radius:4px;color:var(--muted);margin:2px}@keyframes unit-idle{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}@media (prefers-reduced-motion: reduce){.unit-thumb-art{animation:none!important}}.unit-thumb-tip{display:none;position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%);width:240px;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:8px 10px;font-size:12px;color:var(--text);z-index:50;pointer-events:none;box-shadow:0 6px 18px #00000073}.unit-thumb:hover .unit-thumb-tip{display:block}.unit-thumb-tip:before{content:"";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-bottom-color:var(--border)}.unit-thumb-tip-head{display:flex;flex-direction:column;gap:1px;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid var(--border)}.unit-thumb-tip-name{font-weight:600;color:var(--text)}.unit-thumb-tip-meta{color:var(--muted);font-size:11px}.unit-thumb-tip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px 6px;margin-bottom:6px}.unit-thumb-tip-stat{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}.unit-thumb-tip-stat-label{color:var(--muted)}.unit-thumb-tip-stat-val{color:var(--text);font-weight:600}.unit-thumb-tip-cost{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px;border-top:1px solid var(--border);color:var(--muted);font-variant-numeric:tabular-nums}.unit-thumb-tip-time{flex:1 0 100%;margin-top:2px;color:var(--muted);font-size:11px}.bestiary-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px 6px;font-size:12px}.bestiary-stat{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}.bestiary-stat-label{color:var(--muted)}.bestiary-stat-val{color:var(--text);font-weight:600}