:root{color-scheme:dark;--mint:#c7e9a8;--muted:#9ab4a6;--ink:#081e1c}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:#edf4e9;font-family:Segoe UI,Arial,sans-serif}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid var(--mint);outline-offset:3px}button:disabled{opacity:.45;cursor:default}#app{height:100svh;min-height:760px;overflow:hidden;position:relative}canvas,.vignette{position:absolute;inset:0;width:100%;height:100%}canvas{touch-action:none}.vignette{pointer-events:none;background:linear-gradient(90deg,#071b1c9c,transparent 24%,transparent 83%,#081e1b55),linear-gradient(0deg,#081e1c,transparent 31%,transparent 83%,#0a2222b8)}button{border:1px solid #86b19135;border-radius:5px;color:#c5d7c6;background:#1d3b309c;padding:9px 11px;font-size:10px}button:hover{border-color:#a8d684;background:#31503b}header{position:absolute;top:24px;left:28px;right:28px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;gap:9px;align-items:center}.brandmark{font-size:43px;color:var(--mint)}h1{font-size:23px;letter-spacing:5px;font-weight:500;margin:0}.brand p{font-size:7px;letter-spacing:3.1px;margin:5px 0 0}.resources{display:flex;gap:26px}.resource{min-width:48px}.resource>span{font-size:8px;text-transform:uppercase;letter-spacing:1.3px;color:#a7bcaa;display:block}.resource b{font-size:23px;font-weight:400;display:block;margin-top:2px}.resource small{font-size:8px;color:#8ead97;display:block;min-height:12px}.resource.low b,.negative{color:#efb18c!important}.resource .resicon{font-size:10px;letter-spacing:0;margin-right:3px;color:#c3dca0}.header-actions{display:flex;gap:6px}.header-actions button{height:34px}.panel{position:absolute;border:1px solid #96bda026;border-radius:9px;background:linear-gradient(125deg,#17382ece,#102b26c9);backdrop-filter:blur(12px)}.settlement{top:120px;left:28px;width:216px;padding:18px}.eyebrow{font-size:7px;letter-spacing:1.8px;color:#b3cbaa;display:flex;justify-content:space-between;gap:10px}.eyebrow>span{color:#7e9e89;letter-spacing:1px;font-size:7px}h2{font-size:31px;line-height:1.13;font-weight:350;letter-spacing:-1.1px;margin:17px 0 22px}.hallrow,.sectionlabel{font-size:8px;display:flex;justify-content:space-between;color:#a2b89f}.hallrow b{font-weight:400}.bar{background:#72906924;height:3px;border-radius:4px;overflow:hidden;margin-top:8px}.bar i{display:block;background:#b6d994;height:100%;width:100%;transition:width .2s}.separator{height:1px;background:#acc69a1b;margin:17px 0}.sectionlabel{letter-spacing:1px}.workers{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.worker{width:31px;height:33px;padding:0;border-color:#95bb7733;position:relative}.worker.selected{border-color:#c7e9a8;background:#42583b}.worker i{position:absolute;bottom:0;left:0;height:2px;background:#bfe79f}.workerinfo{font-size:9px;color:#a9bfa4;line-height:1.7;min-height:35px;margin:9px 0}.workerinfo b{color:#dae7d0;font-weight:500}.worker-actions{display:flex;gap:5px}.worker-actions button{padding:8px;font-size:9px}.worker-actions #recruit{flex:1}.worker-actions small{display:block;color:#90a78d;font-size:7px;margin-top:4px}.objective{font-size:10px;color:#d4e3bd;line-height:1.7}.objective small{display:block;color:#8aa589;font-size:9px;margin-top:4px}.ecology{right:28px;top:120px;width:196px;padding:16px}.eco-numbers{display:flex;justify-content:space-between;margin-top:15px}.eco-numbers strong{font-size:29px;font-weight:350}.eco-numbers strong span{font-size:12px}.eco-numbers small{font-size:6px;letter-spacing:1.1px;display:block;color:#a0b79a;margin-top:4px}.pollutionbar{margin-top:14px}.pollutionbar i{background:#d2a379;width:0}.ecology p{font-size:9px;line-height:1.8;color:#9db899}.weather{font-size:8px;display:flex;justify-content:space-between;color:#c9d3a3;margin-top:14px}.raidcount{font-size:8px;color:#d5b99d}.inspector{left:28px;bottom:213px;width:216px;padding:14px 17px}.inspector h3{font-weight:500;font-size:15px;margin:8px 0}.inspector p{font-size:9px;color:#a9b9a0;line-height:1.7;margin:0}.inspect-actions{display:flex;gap:4px;margin-top:10px}.inspect-actions button{font-size:8px;padding:6px}.inspect-actions:has(button[hidden]):not(:has(button:not([hidden]))){display:none}.maphint{position:absolute;bottom:208px;left:260px;right:220px;text-align:center;font-size:8px;letter-spacing:1.3px;color:#daebc2;pointer-events:none;text-shadow:0 2px 5px #000}.maptools{position:absolute;right:28px;bottom:210px;display:flex;gap:4px}.maptools button{font-size:16px;padding:4px 10px}footer{position:absolute;left:28px;right:28px;bottom:16px}.dockhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:35px}nav{display:flex;gap:8px}nav button{background:transparent;border-color:transparent;color:#799883;font-size:8px;padding:9px 12px}nav button span{font-size:11px;margin-left:6px}nav button.active{border-color:#94bd753b;background:#284230b0;color:#d9e7c9}#cancelbuild{font-size:9px;display:none}kbd{font-family:inherit;font-size:8px;margin-left:8px;color:#86a27e}#buildhint{font-size:9px;color:#829c81}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.card{display:flex;align-items:flex-start;gap:13px;text-align:left;min-height:110px;padding:15px;background:linear-gradient(130deg,#2a4436c4,#132e27e6);border:1px solid #7e9c6e3b;border-radius:7px;transition:border-color .2s}.card:hover{border-color:#c1e39880}.card.selected{border-color:#c3e69e;background:#344d32}.card.unaffordable{border-color:#8a795f35}.card .icon{font-size:30px;color:#c7dba3;line-height:1.1;min-width:27px}.card.industry .icon{color:#d4ad81}.card.clean .icon{color:#8dd4bd}.card b{font-size:12px;display:block;font-weight:500;color:#dbe5d1;margin-bottom:6px}.card small{font-size:8px;line-height:1.5;color:#94ab90;display:block}.card .price{font-size:9px;color:#d4d8ab;margin-top:9px;display:block}.card.unaffordable .price{color:#ae9681}.bottomline{display:flex;align-items:center;justify-content:space-between;font-size:8px;color:#729077;margin-top:12px}.bottomline i{display:inline-block;width:4px;height:4px;background:#bbd795;border-radius:50%;margin-right:5px}.bottomline button{border:0;padding:0;margin-left:14px;background:transparent;color:#8ea88b;font-size:8px}#toast{position:absolute;top:96px;left:50%;transform:translateX(-50%);background:#1e4034ed;border:1px solid #a0c18166;border-radius:7px;font-size:11px;padding:12px 20px;max-width:560px;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s}#toast.visible{opacity:1}dialog{background:#112e25;color:#e1ebd4;border:1px solid #678554;border-radius:13px;max-width:750px;width:90%;max-height:86vh;padding:35px;box-shadow:0 30px 120px #0009}dialog::backdrop{background:#041711cc;backdrop-filter:blur(7px)}dialog h2{font-size:32px;margin:12px 0 20px}dialog p,dialog li{font-size:12px;line-height:1.9;color:#b1c2a9}dialog h3{font-size:13px;color:#c9e7a7}.close{position:absolute;right:12px;top:9px;border:0;background:none;font-size:23px;padding:2px 8px}.guidegrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}.guidegrid article{border-top:1px solid #78935a44}.primary{background:var(--mint);color:#203925;border:0;padding:12px 18px;margin-top:10px}.order-form{display:flex;gap:12px;flex-wrap:wrap}.order-form label{font-size:11px;display:flex;flex-direction:column;gap:8px}.order-form select{background:#234232;color:#e0eacb;padding:10px;border:1px solid #63834d;max-width:300px}#orderresult{min-height:24px}.danger{color:#e8a18b}
@media(max-width:1150px){header{left:18px;right:18px;gap:10px}.resources{gap:14px}.brandmark{font-size:32px}h1{font-size:19px;letter-spacing:3px}.brand p{letter-spacing:2px;font-size:6px}.settlement{left:18px;width:190px;padding:14px}.ecology{right:18px;width:170px;padding:13px}.inspector{left:18px;width:190px}.card{gap:8px;padding:12px}.card .icon{font-size:25px}.card b{font-size:11px}.card small{font-size:7px}.resource b{font-size:21px}footer{left:18px;right:18px}.maphint{left:215px;right:180px;font-size:7px}}
@media(max-width:760px){#app{min-height:950px}header{top:17px;align-items:flex-start}.resources{position:absolute;top:55px;left:0;right:0;justify-content:space-between;gap:5px}.resource{min-width:35px}.resource>span{font-size:6px;letter-spacing:.5px}.resource b{font-size:19px}.resource small{font-size:6px}.resource .resicon{font-size:8px}.header-actions button{padding:7px;height:31px;font-size:9px}.settlement{top:134px;width:166px;padding:12px}.settlement h2{font-size:23px;margin:12px 0}.settlement .separator{margin:12px 0}.workerinfo{font-size:8px;min-height:25px}.sectionlabel,.hallrow{font-size:7px}.objective{font-size:8px}.objective small{font-size:8px}.ecology{right:18px;top:134px;width:154px;padding:11px}.ecology .eyebrow{font-size:6px}.ecology p{font-size:8px}.eco-numbers strong{font-size:24px}.eco-numbers small{font-size:5px}.weather{font-size:6px}.ecology .separator{margin:12px 0}.inspector{left:18px;bottom:224px;width:200px;padding:9px 12px}.inspector p{font-size:8px}.inspector h3{font-size:12px;margin:6px 0}.inspector .eyebrow{font-size:6px}.maphint{bottom:352px;left:18px;right:18px;font-size:6px}.maptools{right:18px;bottom:226px}.dockhead{margin-bottom:8px}.dockhead nav{gap:0}.dockhead nav button{padding:7px 8px;font-size:7px}.dockhead nav button span{font-size:9px;margin-left:4px}#buildhint{display:none}#cancelbuild{font-size:8px;padding:6px}#cancelbuild kbd{display:none}.cards{grid-template-columns:repeat(4,1fr);gap:5px}.card{min-height:126px;display:block;padding:9px 7px}.card b{font-size:9px;margin:7px 0 5px}.card small{font-size:6px}.card .icon{font-size:22px}.card .price{font-size:7px}.bottomline{font-size:7px;gap:5px}.bottomline>span:nth-child(2){display:none}.bottomline button{font-size:7px;margin-left:9px}footer{bottom:13px;left:12px;right:12px}#toast{top:115px;width:85%;font-size:10px;max-width:initial}.guidegrid{grid-template-columns:1fr}dialog{padding:26px}}
@media(max-width:760px){.settlement h2{display:none}.settlement .hallrow{margin-top:14px}.settlement .objective small{display:none}.settlement .objective{font-size:8px}.settlement .separator{margin:10px 0}.workerinfo{min-height:24px;margin:7px 0}.maphint{bottom:326px}}

.happiness-goal{margin-top:15px;padding-bottom:10px;border-bottom:1px solid #acc69a22}.happiness-goal .hallrow{color:#d9dba6;font-size:9px}.happiness-goal .bar i{background:#e0d68d}.happiness-goal p{font-size:8px;margin-bottom:0}
@media(max-width:760px){.cards{display:flex!important;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px}.cards .card{flex:0 0 132px;scroll-snap-align:start;min-height:126px}.happiness-goal{margin-top:10px;padding-bottom:7px}.happiness-goal .hallrow{font-size:7px}.happiness-goal p{font-size:6px}.ecology .eco-numbers{margin-top:8px}.ecology .separator{margin:8px 0}.ecology #ecotext{font-size:7px;line-height:1.5}.ecology #raidstatus{font-size:7px;line-height:1.5}}
@media(max-width:760px){.maphint{display:none}}

.card .building-icon{width:48px;height:54px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 3px 5px #071c1a66)}
@media(max-width:760px){.card .building-icon{width:38px;height:36px}}

/* Stack the inspector with the settlement instead of anchoring it over the controls. */
.left-panels{position:absolute;top:120px;left:28px;bottom:calc(var(--dock-height,190px) + 40px);width:216px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#799883 #102b26;}
.left-panels>.panel{position:relative;inset:auto;width:100%;flex-shrink:0;}
@media(max-width:1150px){.left-panels{left:18px;width:190px}}
@media(max-width:760px){.left-panels{top:134px;left:18px;width:166px;bottom:calc(var(--dock-height,210px) + 35px);gap:9px}}

@media(max-width:760px){.dockhead{height:auto;min-height:35px;flex-wrap:wrap;gap:5px}.dockhead nav{width:100%;justify-content:space-between}.dockhead nav button{padding:7px 4px}.dockhead nav button span{margin-left:3px}}

#autofire{width:100%;margin-top:8px;font-size:9px}#autofire[aria-pressed="true"]{border-color:#b5d58d;background:#42583b;color:#ecf4da}