:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#242424;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}a{color:#646cff;-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:500}a:hover{color:#535bf2}body{place-items:center;min-width:320px;min-height:100vh;margin:0;display:flex}h1{font-size:3.2em;line-height:1.1}button{cursor:pointer;background-color:#1a1a1a;border:1px solid #0000;border-radius:8px;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:500;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{width:100%;height:100%}.top-bar{z-index:110;flex-wrap:wrap;justify-content:flex-end;align-items:flex-start;gap:8px;max-width:calc(100vw - 16px);display:flex;position:absolute;top:3px;right:8px}.match-controls,.setup-controls{color:#f4e3c2;background:#302619f5;border:1px solid #bea06b;max-width:min(360px,100vw - 32px);font:13px/1.5 system-ui,sans-serif}.match-controls summary,.setup-controls summary{cursor:pointer;padding:3px 10px;font-family:Georgia,serif}.match-controls[open],.setup-controls[open]{padding:10px;box-shadow:0 5px 20px #0008}.match-controls button,.setup-controls button,.match-controls select,.setup-controls select{border-radius:2px;font-size:12px}.resource-panel{z-index:90;background:linear-gradient(#c6a76b,#70512b 45%,#b99b5f);border-bottom:2px solid #302316;height:34px;position:fixed;inset:0 0 auto;box-shadow:0 2px 5px #0008}.resource-panel-inner{align-items:center;gap:3px;width:fit-content;padding:3px 5px;font-family:Georgia,serif;display:flex}.resource-item{background:#201d18;border:1px solid #d0b67d;align-items:center;gap:8px;height:25px;padding:0 8px;display:flex;box-shadow:inset 0 0 3px #000}.resource-icon{font-size:18px}.resource-value{color:#fff1d0;text-align:right;font-variant-numeric:tabular-nums;min-width:38px;font-size:13px;font-weight:700}.resource-gold .resource-value{color:#f6d87d}.resource-divider{display:none}.age-label{white-space:nowrap;color:#fff1d0;background:#201d18;border:1px solid #d0b67d;align-items:baseline;gap:6px;height:25px;padding:0 12px;font-size:14px;font-weight:700;line-height:25px;display:flex;position:absolute;top:3px;left:50%;transform:translate(-50%);box-shadow:inset 0 0 3px #000}.age-label small{color:#d9c49a;font-size:11px;font-weight:400}@media (width<=1120px){.age-label{padding:0 6px;font-size:12px;position:static;transform:none}.age-label small{display:none}}@media (width<=600px){.age-label{padding:0 4px;font-size:11px;position:absolute;top:38px;left:8px}.resource-item{gap:3px;padding:0 4px}.resource-value{min-width:25px;font-size:11px}}.game-icon-bg,.game-icon-art{grid-area:1/1;place-self:center}.game-icon-bg{width:100%;height:100%}.game-icon-art{object-fit:contain;width:80%;height:80%}.minimap-bay{flex-direction:column;gap:4px;min-width:0;display:flex}.minimap-label{letter-spacing:.08em;text-transform:uppercase;color:#6f5a38;font:11px/1 system-ui,sans-serif}.minimap-surface{background:#241c12;border:3px ridge #ac8951;padding:6px;position:relative}.minimap-canvas{touch-action:none;cursor:crosshair;background:#2f3627;width:100%;height:132px;display:block}.minimap-canvas:focus-visible{outline-offset:2px;outline:2px solid #fff1bb}.minimap-canvas:active{cursor:crosshair}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=760px){.minimap-canvas{height:108px}}@media (width<=560px){.minimap-canvas{height:88px}}.action-panel{z-index:90;background:url(/textures/bottompanelleft.png) 0/auto 100% no-repeat,url(/textures/bottompanelright.png) 100%/auto 100% no-repeat,#d9b781 url(/textures/bottompanelcenter.png) 50%/100% 100% no-repeat;position:fixed;inset:auto 0 0;box-shadow:0 -2px 8px #0007}.action-panel-inner{color:#342718;grid-template-columns:224px minmax(180px,1fr) clamp(240px,22vw,300px);grid-template-areas:"commands info map";align-items:start;gap:8px 22px;min-height:148px;padding:12px 18px;font-family:Georgia,serif;display:grid}.action-panel-info{flex-direction:column;grid-area:info;gap:6px;min-width:0;display:flex}.action-panel-header{align-items:center;gap:12px;font-size:15px;font-weight:700;display:flex}.selection-icon{background:#493a27;border:3px ridge #b99a60;place-items:center;width:52px;height:52px;font-size:28px;display:grid}.selection-count{color:#48632b}.selection-details{flex-direction:column;gap:6px;min-width:0;max-width:660px;display:flex}.detail-bar{align-items:center;gap:8px;font:12px/1.4 system-ui,sans-serif;display:flex}.detail-bar-label{color:#51402a;min-width:72px}.detail-bar-track{background:#3a2c1e;border:1px solid #b99a60;flex:0 180px;height:8px}.detail-bar-fill{background:#8cbb59;height:100%;display:block}.detail-bar-text{font-variant-numeric:tabular-nums;white-space:nowrap}.detail-groups{flex-wrap:wrap;gap:4px 20px;display:flex}.detail-group{min-width:132px}.detail-group-title{letter-spacing:.06em;text-transform:uppercase;color:#6f5a38;font-size:10px}.detail-group dl{grid-template-columns:auto auto;justify-content:start;gap:0 8px;margin:2px 0 0;display:grid}.detail-row{display:contents}.detail-group dt{color:#5b4930;font-size:12px}.detail-group dd{font-variant-numeric:tabular-nums;margin:0;font-size:12px}.detail-reference{opacity:.75}.action-grid{background:#392b1e;border:3px ridge #ac8951;grid-area:commands;grid-template-columns:repeat(4,48px);align-content:start;gap:5px;min-height:106px;padding:8px;display:grid}.action-button{color:#fff1cf;background:linear-gradient(#69543a,#34281d);border:2px outset #b69a63;border-radius:0;width:48px;height:48px;padding:0}.action-button:hover:not(:disabled){background:#79613d;border-color:#ffe2a1}.action-button:active:not(:disabled){border-style:inset}.action-button:disabled{opacity:.45;cursor:not-allowed}.action-icon{place-items:center;width:100%;height:100%;font-size:25px;display:grid}.action-panel button:focus-visible,.global-queue button:focus-visible{outline-offset:2px;outline:2px solid #fff1bb}.production-queue{flex-wrap:wrap;gap:5px;max-height:64px;display:flex;overflow-y:auto}.production-item{background:#483923;border:2px ridge #b69a63;place-items:center;width:48px;height:52px;display:grid;position:relative}.production-icon{place-items:center;width:100%;height:100%;font-size:24px;display:grid}.production-progress{pointer-events:none;background:#8cbb59;height:4px;position:absolute;bottom:0;left:0}.production-cancel{color:#fff1cf;background:#251b13;border-radius:0;padding:0 3px;font-size:11px;position:absolute;top:0;right:0}.production-cancel:disabled{opacity:.4;cursor:not-allowed}.production-blocked{font-size:12px;position:absolute;top:0;left:0}.action-panel-status,.selection-help{margin:0;font:13px/1.5 system-ui,sans-serif}.action-panel-map{grid-area:map;min-width:0}@media (width<=760px){.action-panel-inner{grid-template-columns:224px minmax(180px,1fr) 180px;gap:8px;padding:8px}}@media (width<=560px){.action-panel-inner{grid-template-columns:164px minmax(0,1fr);grid-template-areas:"commands info""commands map"}.action-panel-map{justify-self:end;width:min(160px,100%)}}@media (width<=480px){.action-grid{grid-template-columns:repeat(3,44px);padding:4px}.action-button{width:44px;height:44px}.selection-icon{display:none}.detail-groups{gap:4px 12px}.detail-group{min-width:108px}.detail-bar-track{flex-basis:110px}}.global-queue{z-index:90;color:#f7e6c7;background:#241d16db;border:1px solid #9d8050;align-items:center;gap:8px;max-width:calc(100vw - 210px);padding:4px 8px;font:12px system-ui,sans-serif;display:flex;position:fixed;top:42px;left:8px}.queue-heading{white-space:nowrap}.queue-heading b{color:#eed095;margin-left:4px}.queue-empty{color:#c5b697;white-space:nowrap}.global-queue-items{gap:4px;display:flex;overflow-x:auto}.global-queue-item{color:#ffedcb;white-space:nowrap;text-transform:capitalize;background:#423520;border:1px solid #957b51;border-radius:0;align-items:center;gap:6px;padding:5px 8px 9px;font-size:12px;display:flex;position:relative}.global-queue-item[aria-pressed=true]{background:#645031;border-color:#ffe1a1}.global-queue-item small{color:#e0d1ad}.queue-icon{place-items:center;width:24px;height:24px;display:grid}@media (width<=600px){.global-queue{max-width:calc(100vw - 34px);top:76px}}.main-menu{--ink:#e8d8b0;--gold:#ffd84a;--bevel-hi:#9c8058;--bevel-lo:#2a1e10;z-index:100;color:var(--ink);-webkit-font-smoothing:none;background:#000;grid-template-columns:1fr clamp(340px,34%,46em);font:clamp(15px,1.55vh,26px)/1.45 Pixelify Sans,Courier New,monospace;display:grid;position:fixed;inset:0}.menu-scene{min-height:0;position:relative;overflow:hidden}.menu-scene canvas{image-rendering:pixelated}.town-banner{pointer-events:none;height:150px;position:absolute;inset:0 0 auto}.banner-ropes{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.banner-ropes path{fill:none;stroke:#1a0e06;stroke-width:6px;vector-effect:non-scaling-stroke;stroke-linecap:round}.banner-ropes path.twist{stroke:#c09a5c;stroke-width:3px;stroke-dasharray:4 3}.banner-hang{position:absolute;top:69px;left:27%;right:27%}.banner-rod{z-index:1;background:linear-gradient(#b8844a,#7a4c24 55%,#3a2210);border-radius:5px;height:9px;margin:0 -6px;position:relative;box-shadow:0 2px #0008}.banner-rod:before,.banner-rod:after{content:"";background:radial-gradient(circle at 35% 35%,#fff2a0,#d8a030 45%,#6a4010);border-radius:50%;width:16px;height:16px;position:absolute;top:-4px}.banner-rod:before{left:-10px}.banner-rod:after{right:-10px}.banner-cloth{box-sizing:border-box;text-align:center;color:#fbe7b0;text-shadow:2px 2px #2a0606,0 0 12px #0008;clip-path:polygon(0 0,100% 0,100% 100%,50% 70%,0 100%);transform-origin:50% 0;background:repeating-linear-gradient(45deg,#0000 0 15px,#e8b84a26 15px 17px),repeating-linear-gradient(-45deg,#0000 0 15px,#e8b84a26 15px 17px),linear-gradient(90deg,#0000 0 5%,#e8b84a 5% 7%,#0000 7% 93%,#e8b84a 93% 95%,#0000 95%),linear-gradient(#9a2020,#6a1214);width:84%;margin:-3px auto 0;padding:14px 10px 44px;font-size:clamp(18px,2.7vw,36px);line-height:1.05;animation:5s ease-in-out infinite alternate banner-sway;position:relative;box-shadow:inset 0 3px #e8b84a,inset 0 6px #4a0c0c}.banner-cloth:before{content:"";background:repeating-linear-gradient(90deg,#0000 0 16px,#3a2a1a 16px 18px,#9a9aa8 18px 21px,#3a2a1a 21px 23px);height:8px;position:absolute;inset:-2px 0 auto}.banner-cloth small{letter-spacing:.3em;color:#f0c860;margin-bottom:2px;font-size:.42em;display:block}@keyframes banner-sway{0%{transform:rotate(-.7deg)}to{transform:rotate(.7deg)}}@media (prefers-reduced-motion:reduce){.banner-cloth{animation:none}}.sign-label,.menu-panel button{font:inherit;color:var(--ink);border:3px solid;border-color:var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);text-shadow:2px 2px #000;cursor:pointer;background:#1a1410;border-radius:0;transition:none}.sign-label{white-space:nowrap;color:#fff;background:linear-gradient(#56607c 0 50%,#3c4460 50%);border:2px solid #141828;border-color:#aab4d4 #141828 #141828 #aab4d4;padding:.2em .75em;font-size:clamp(14px,1.5vh,24px);box-shadow:0 0 0 2px #000,4px 4px 0 2px #0008}.sign-label.hover,.sign-label:hover{color:var(--gold)}.sign-label.selected{color:var(--gold);box-shadow:0 0 0 2px #000, 0 0 0 4px var(--gold), 4px 4px 0 4px #0008;border-color:#fff4a0 #b07810 #b07810 #fff4a0}.menu-panel button:not(:disabled):hover{color:var(--gold);border-color:var(--gold)}.menu-panel button:disabled{color:#7a6c58;cursor:default}.sign-label:focus-visible,.menu-panel button:focus-visible,.menu-panel input:focus-visible{outline:2px dashed var(--gold);outline-offset:2px}.menu-panel{box-sizing:border-box;min-width:0;min-height:0;image-rendering:pixelated;background-color:#0000;background-image:radial-gradient(at 50% 40%,#0000 40%,#0000008c 100%),repeating-linear-gradient(45deg,#0000 0 22px,#d6a84a18 22px 24px),repeating-linear-gradient(-45deg,#0000 0 22px,#d6a84a18 22px 24px),linear-gradient(#5a1a1c,#3a1012 60%,#2a0c0e);background-position:0 0,0 0,0 0,0 0;background-repeat:repeat,repeat,repeat,repeat;background-size:auto,auto,auto,auto;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:padding-box;border:2.5em solid #0000;border-image:url(/menu/frame.png) 36/2.5em round;flex-direction:column;gap:1em;padding:1em;display:flex;overflow:auto}.menu-plaque{text-align:center;letter-spacing:.04em;color:#f6e2a8;text-shadow:2px 2px #000;background:linear-gradient(#4a4a54,#2e2e36);border:4px solid #18181c;border-color:#8a8a98 #18181c #18181c #8a8a98;margin:0;padding:.35em;font-size:1.6em;font-weight:400;box-shadow:0 0 0 2px #000,0 0 0 4px #b89040,0 4px 10px 4px #0008}.menu-sound{align-self:flex-end;padding:2px 10px;font-size:.85em}.menu-actions{flex:1;align-content:start;gap:.75em;display:grid}.menu-btn{box-sizing:border-box;letter-spacing:.03em;width:100%;padding:.6em;font-size:1.2em}.menu-note,.menu-actions p{text-shadow:2px 2px #000;margin:0}.menu-learn{gap:8px;margin:0;padding-left:20px;display:grid}.menu-panel h2{font-size:1.1em;font-weight:400}.menu-panel input{box-sizing:border-box;max-width:100%;font:inherit;color:var(--ink);border:2px solid var(--bevel-hi);background:#0c0906;border-radius:0;padding:4px 6px}.menu-actions button:not(.menu-btn){padding:4px 10px}.menu-desc{border:3px solid;border-color:var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);background:#1a1410;min-height:4.2em;margin:0;padding:.75em;line-height:1.5}@media (width<=720px){.main-menu{grid-template-rows:45vh 1fr;grid-template-columns:1fr}.sign-label{padding:1px 4px;font-size:11px}.town-banner{height:64px}.banner-hang{top:28px}.banner-cloth{padding:8px 6px 26px}}.menu-alert{background:#3a1410;border:3px solid #200806;border-color:#c05030 #200806 #200806 #c05030;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;display:flex}.menu-alert p{text-shadow:2px 2px #000;flex-basis:100%;margin:0}.menu-alert button{padding:4px 10px}.menu-alert button:first-of-type{color:var(--gold)}.sign-wrap{position:relative}.sign-attention{white-space:nowrap;pointer-events:none;color:#200806;background:var(--gold);border:2px solid #200806;padding:2px 8px;font-size:13px;animation:.8s steps(2,end) infinite sign-bob;position:absolute;bottom:calc(100% + 4px);left:50%;translate:-50%}.sign-attention:after{content:"";border:6px solid #0000;border-top-color:#200806;position:absolute;top:100%;left:50%;translate:-50%}@keyframes sign-bob{50%{transform:translateY(-4px)}}@media (prefers-reduced-motion:reduce){.sign-attention{animation:none}}.menu-vision{text-align:left;gap:6px;margin-top:8px;display:grid}.menu-field{text-shadow:2px 2px #000;align-items:center;gap:.5em;font-size:.9em;display:flex}.menu-field select{padding:2px 6px}.menu-vision-note{opacity:.8;text-shadow:2px 2px #000;margin:0;font-size:.78em;line-height:1.5}.menu-btn:not(:disabled):hover{background:linear-gradient(#2a2018,#1a1410)}.menu-panel select{font:inherit;color:var(--ink);border:2px solid var(--bevel-hi);background:#0c0906;border-radius:0}.menu-plaque{background:0 0;border:.7em solid #0000;border-image:url(/menu/plaque.png) 14 fill/.7em;box-shadow:0 .3em .6em #0009}.menu-panel .menu-btn{background:0 0;border:.55em solid #0000;border-image:url(/menu/button.png) 10 fill/.55em}.menu-panel .menu-btn:not(:disabled):hover{border-color:#0000;background:0 0;border-image-source:url(/menu/button-hover.png)}.menu-btn:disabled{filter:grayscale(.7)brightness(.7)}.sign-label{background:0 0;border:.5em solid #0000;border-image:url(/menu/sign.png) 12 fill/.5em;box-shadow:.25em .25em .4em #0009}.sign-label.hover,.sign-label:hover{border-image-source:url(/menu/sign.png)}.sign-label.selected{border-image-source:url(/menu/button-hover.png);box-shadow:0 0 .8em #ffd84a88,.25em .25em .4em #0009}.banner-cloth{background:repeating-linear-gradient(45deg,#0000 0 15px,#e8b84a1c 15px 17px),repeating-linear-gradient(-45deg,#0000 0 15px,#e8b84a1c 15px 17px),url(/menu/banner.png) 50%/100% 100%}