:root{color-scheme:dark;--cream:#eee4c9;--muted:#b7b09b;--gold:#cbb075;--panel:#292b24;--line:rgba(220,197,146,.22);font-family:Georgia,'Times New Roman',serif;font-synthesis:none}
*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}body{background:#677b44;color:var(--cream)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #e4c578;outline-offset:4px}button{border:0}button:hover{color:#fff4d9}button:disabled{opacity:.4}button[hidden],[hidden]{display:none!important}#village{image-rendering:pixelated;display:block;width:100%;height:100%;touch-action:none;cursor:grab}#village.dragging{cursor:grabbing}#village.hovering{cursor:pointer}.vignette{display:none;position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 140px 30px #16220b38;background:linear-gradient(#17211520,transparent 20%,transparent 70%,#16210c24)}
.topbar{position:absolute;top:22px;left:26px;right:26px;display:flex;align-items:center;justify-content:space-between;gap:24px;pointer-events:none}.topbar>*{pointer-events:auto}.identity{display:flex;gap:13px;align-items:center;color:var(--cream);text-decoration:none;text-shadow:0 2px 5px #18210ed9;min-width:240px}.crest{width:34px;height:42px;fill:#283953;stroke:#d0b87d;stroke-width:1.4;filter:drop-shadow(0 2px 3px #17210d88)}.crest-mark{fill:#d2bb7d;stroke:none}.eyebrow{display:block;font:9px/1.5 system-ui,sans-serif;letter-spacing:2px;color:#c9c3ab}.identity .eyebrow{font-size:9px;color:#eee7d0;letter-spacing:2.2px}.identity h1{margin:3px 0 0;font-size:25px;font-weight:normal;letter-spacing:-.3px}.resource-bar{display:flex;align-items:center;padding:12px 21px;gap:25px;background:linear-gradient(125deg,#34352df5,#252820ef);border:1px solid #d9bd7e52;box-shadow:0 4px 18px #18210b38,inset 0 1px #fff1bd12;border-radius:3px}.resource{display:flex;align-items:center;gap:10px;min-width:61px}.resource b{font:19px/1.1 Georgia,serif;font-variant-numeric:tabular-nums;display:block;min-width:34px}.resource small{display:block;margin-top:4px;font:8px/1 system-ui,sans-serif;letter-spacing:1.4px;color:#bcb6a1}.resource-icon{font-size:28px;text-shadow:1px 2px #1116;line-height:1}.wood{color:#bd9566;transform:rotate(-25deg)}.food{color:#dbb968;font-size:34px}.gold{color:#dcbd5c}.stone{color:#b5b9ad}.population{padding-left:20px;border-left:1px solid var(--line)}.people-icon{color:#8dacc1;font-size:28px}.help-button{background:#2b2e25d9;border:1px solid #ceb47c5c;color:#d1c39b;border-radius:50%;width:31px;height:31px;font:17px Georgia;box-shadow:0 2px 10px #17210d33}.panel{background:linear-gradient(120deg,#34362df7,#272a23f5);border:1px solid #b49c665c;box-shadow:0 5px 25px #17200f42,inset 0 1px #eee3be12;border-radius:3px}.selection{position:absolute;bottom:25px;left:26px;width:308px;overflow:hidden}.selection-heading{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:10px 13px 9px}.selection-heading .eyebrow{font-size:8px;letter-spacing:1.7px}.selection-heading button{background:none;font:20px/15px system-ui;padding:0;color:#c1b898}.selection-body{display:flex;gap:12px;padding:14px 13px 14px 10px;min-height:112px;align-items:center}.portrait{width:80px;height:78px;flex-shrink:0;background:radial-gradient(ellipse,#686b4c88,#272b2200 70%);display:flex;align-items:center;justify-content:center}.portrait canvas{image-rendering:pixelated;width:110px;height:94px}.selection h2{font-size:19px;font-weight:normal;line-height:1.2;margin:0 0 5px;color:#f0e4c2}.selection p{font:11px/1.6 system-ui,sans-serif;color:#c0baa5;margin:0 0 8px}.selection-meta{font:9px/1.5 system-ui,sans-serif;color:#cbb579;letter-spacing:.2px}.activity{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);background:#161b1326;padding:9px 13px;font:10px/1.4 system-ui,sans-serif;color:#bdbca6;min-height:34px}.live-dot{display:inline-block;width:5px;height:5px;background:#a9bb78;border-radius:50%;box-shadow:0 0 7px #b2ce7760;flex-shrink:0}.bottom-center{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:11px}.location-label{font:9px/1 system-ui,sans-serif;letter-spacing:2px;display:flex;gap:10px;align-items:center;text-shadow:0 1px 5px #18220f;color:#f0e8ce}.location-divider{color:#ddd2aa7a}.blue-diamond{width:5px;height:5px;background:#7e9fc9;transform:rotate(45deg);box-shadow:0 0 5px #233e5d}.controls{display:flex;align-items:center;padding:5px 7px;height:46px;gap:2px}.controls button{width:34px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;color:#cfc6aa;font:17px Georgia;transition:background .15s}.controls button:hover{background:#c9af7530;color:#fff3d1}.controls svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.controls .speeds{display:flex;gap:1px}.speeds button{font:11px system-ui,sans-serif;width:31px}.controls .active{background:#bca16b28;color:#eed29a;box-shadow:inset 0 0 0 1px #d6b36e37}.control-separator{height:19px;width:1px;background:var(--line);margin:0 5px}.drag-hint{font:8px/1 system-ui,sans-serif;letter-spacing:1.5px;color:#eee6ccd9;text-shadow:0 1px 4px #17210c}.drag-hint span{padding:0 7px;color:#d9cda4}.minimap{position:absolute;bottom:25px;right:26px;width:196px;padding:9px 7px 0;background:linear-gradient(120deg,#30362bf5,#242a21f5)}.map-label{display:flex;justify-content:space-between;padding:0 3px 7px;font:7px system-ui,sans-serif;letter-spacing:1.3px;color:#c4bea4}.map-compass{color:#9ca88d}.minimap canvas{image-rendering:pixelated;display:block;width:180px;height:112px;border:1px solid #8d8d5c45;cursor:crosshair;background:#526b3c}.map-footer{display:flex;align-items:center;gap:7px;padding:8px 3px;font:7px system-ui,sans-serif;letter-spacing:1.3px;color:#aeb79b}.tooltip{position:fixed;z-index:4;pointer-events:none;padding:6px 10px;border:1px solid #d5bb7f66;border-radius:2px;background:#262c23ec;color:#e9dfc1;box-shadow:0 2px 8px #17210d33;font:11px system-ui,sans-serif}.help-panel{position:absolute;right:25px;top:100px;width:315px;padding:22px;background:#292e25f7;border:1px solid #b49c666b;box-shadow:0 6px 30px #16200d66;border-radius:3px;z-index:5}.help-panel h2{margin:0 0 14px;font-size:22px;font-weight:normal}.help-panel p{font:12px/1.8 system-ui,sans-serif;color:#cbc5af;margin:0 0 14px}.shortcuts{display:flex;flex-wrap:wrap;gap:12px;font:10px system-ui,sans-serif;margin:18px 0;color:#c6bd9f}kbd{font:10px system-ui,sans-serif;padding:2px 5px;border:1px solid #af9a6355;background:#ede0b70a;border-radius:2px}.help-panel .fine-print{border-top:1px solid var(--line);padding-top:13px;font-size:9px;color:#a6a590;margin-bottom:0}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#293522;z-index:10;transition:opacity .4s;pointer-events:none}.loading-crest{font-size:43px;color:#c4b17a}.loading p{font-size:16px;color:#d4ccb0}.loading.loaded{opacity:0}.noscript{position:absolute;top:45%;left:10%;right:10%;padding:30px;text-align:center;background:#293522;z-index:11}
@media(min-width:1600px){.topbar{top:28px;left:35px;right:35px}.selection{bottom:33px;left:35px}.minimap{bottom:33px;right:35px}.bottom-center{bottom:30px}}
@media(max-width:1100px){.resource-bar{gap:17px;padding:11px 15px}.resource{min-width:52px;gap:7px}.population{padding-left:12px}.selection{width:266px}.selection-body{gap:5px}.selection p{font-size:10px}.minimap{width:164px}.minimap canvas{width:148px;height:92px}.identity{min-width:190px}.identity h1{font-size:22px}.topbar{gap:14px}.resource b{font-size:18px}}
@media(max-width:760px){.topbar{left:15px;right:15px;top:max(15px,env(safe-area-inset-top));gap:9px;flex-wrap:wrap}.identity{min-width:auto;gap:9px;flex:1}.identity .eyebrow{font-size:7px;letter-spacing:1.8px}.identity h1{font-size:21px}.crest{width:26px;height:34px}.resource-bar{order:3;width:100%;justify-content:space-around;gap:6px;padding:9px 10px;margin-top:5px}.resource{min-width:0;gap:6px}.resource b{font-size:16px;min-width:26px}.resource small{font-size:6px;letter-spacing:1px;margin-top:3px}.resource-icon{font-size:22px}.resource-icon.food{font-size:26px}.people-icon{font-size:22px}.population{padding-left:10px}.help-button{width:27px;height:27px}.selection{left:15px;bottom:calc(117px + env(safe-area-inset-bottom));width:245px}.selection-heading{padding:7px 10px}.selection-body{padding:9px 10px;min-height:80px;gap:8px}.portrait{width:54px;height:59px}.portrait canvas{width:83px;height:70px}.selection h2{font-size:17px}.selection p{font-size:10px;line-height:1.5;margin-bottom:5px}.selection-meta{font-size:8px}.selection .activity{font-size:9px;padding:7px 10px;min-height:27px}.minimap{display:none}.bottom-center{bottom:calc(20px + env(safe-area-inset-bottom));gap:10px}.drag-hint{font-size:7px;white-space:nowrap;letter-spacing:1.2px}.controls{height:43px}.controls button{height:30px;width:33px}.speeds button{width:30px}.location-label{font-size:8px}.help-panel{top:134px;right:15px;width:min(315px,calc(100vw - 30px));padding:19px}.vignette{box-shadow:inset 0 0 60px 10px #17210c25}}
@media(max-height:560px) and (min-width:761px){.topbar{top:12px}.selection{bottom:13px;max-width:245px}.selection-body{min-height:75px;padding:6px}.selection p{font-size:9px}.portrait{height:55px}.bottom-center{bottom:13px}.minimap{bottom:13px}.identity h1{font-size:20px}.resource-bar{padding:8px 13px}.drag-hint{display:none}}
@media(prefers-reduced-motion:reduce){.loading{transition:none}}