:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}body{color:#eae7df;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:#10181b;margin:0}main{max-width:68rem;margin:0 auto;padding:3rem 1.5rem}header{max-width:48rem}h1{font-size:clamp(2.2rem,5vw,4rem);line-height:1.05}p{line-height:1.6}.eyebrow{color:#c0a879;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem}.guest-status{color:#adc1b2}.accord{background:#172226;border-left:3px solid #c0a879;margin:2.5rem 0;padding:1rem 1.5rem}.nation-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem;display:grid}.nation-card{background:#172226;border:1px solid #334248;border-radius:.75rem;padding:1rem 1.5rem}.nation-card h3{color:#e2c997}footer{color:#a8b6bb;margin-top:3rem}button{color:#eee8db;min-height:44px;font:inherit;cursor:pointer;background:#243630;border:1px solid #61706a;border-radius:.5rem;padding:.65rem 1rem}button:hover:not(:disabled),button[aria-pressed=true]{background:#395347;border-color:#ddbd80}button:disabled{opacity:.45;cursor:default}button:focus-visible,canvas:focus-visible{outline-offset:3px;outline:3px solid #e5c885}.primary-action{color:#182620;background:#dfbd7c;border-color:#dfbd7c;font-weight:650}.primary-action:hover:not(:disabled){background:#f0d49c}.logistics-section{background:#17231f;border:1px solid #415248;border-radius:1rem;margin:3rem 0;padding:1.5rem}.logistics-heading{justify-content:space-between;align-items:center;gap:1rem;display:flex}.logistics-heading h2{margin:0;font-size:1.8rem}.logistics-heading .eyebrow{margin-top:0}.resource-board{grid-template-columns:repeat(4,1fr);gap:.5rem;margin:1.5rem 0 .75rem;display:grid}.resource-board>div{background:#23322c;border-radius:.5rem;padding:.75rem}.resource-board span{color:#b3c4ba;font-size:.75rem;display:block}.resource-board output{color:#edcf95;font-variant-numeric:tabular-nums;font-size:1.5rem;display:block}.battlefield-frame{background:#111b22;border:1px solid #47584f;border-radius:.75rem;position:relative;overflow:hidden}.battlefield-frame canvas{touch-action:none;width:100%;height:clamp(320px,48vw,520px);display:block}.scene-status{color:#d0dfd0;pointer-events:none;background:#13241ee6;border-radius:.4rem;padding:.4rem .65rem;font-size:.8rem;position:absolute;top:.75rem;left:.75rem}.pause-overlay{color:#f1dfb9;pointer-events:none;background:#0c161880;place-items:center;font-size:2rem;display:grid;position:absolute;inset:0}.scene-instructions,.prototype-note{color:#afc1b6;font-size:.85rem}.logistics-controls{grid-template-columns:1fr 1fr;gap:1.5rem;display:grid}.logistics-controls h3{font-size:1rem}.machine-buttons{flex-wrap:wrap;gap:.5rem;display:flex}.machine-buttons button{font-size:.85rem}.selection-label{color:#d6c6a7;font-size:.85rem}.route-status{grid-template-columns:auto 1fr;gap:.5rem .75rem;font-size:.85rem;display:grid}.route-status dt{color:#a6b8ad}.route-status dd{margin:0}.order-message{color:#d6c6a7;font-size:.9rem}.delivery-complete{color:#ade0ba}.city-catalog{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:.75rem;display:grid}.city-card,.placement-panel,.city-work{background:#1d2e26;border:1px solid #43574c;border-radius:.6rem;margin:1rem 0;padding:1rem}.city-card{flex-direction:column;align-items:flex-start;margin:0;display:flex}.city-card h4{color:#ead19f;margin:0 0 .5rem}.city-card p{margin:.4rem 0;font-size:.85rem}.city-card output{color:#b8d9c0;margin:.4rem 0;font-size:.85rem}.city-card button{width:100%;margin-top:auto}.city-card .building-requirements{color:#cdb798;margin-bottom:.7rem}.city-chain,.city-selection p,.city-functions p{color:#bfcec1;font-size:.85rem}.city-selection,.city-functions{margin-top:1.5rem}.placement-fields{gap:1rem;margin:1rem 0;display:flex}.placement-fields label{flex:1;min-width:0;font-size:.85rem}.placement-fields input{box-sizing:border-box;color:#eee8db;width:100%;min-height:44px;font:inherit;background:#112219;border:1px solid #758575;border-radius:.4rem;margin-top:.5rem;padding:.5rem;display:block}.placement-fields input:focus-visible{outline-offset:2px;outline:3px solid #e5c885}.city-work progress{accent-color:#dfbd7c;width:100%;margin:.75rem 0;display:block}@media (max-width:600px){main{padding:2rem .75rem}.logistics-section{padding:.75rem}.logistics-controls{grid-template-columns:1fr;gap:0}.logistics-heading{flex-wrap:wrap;align-items:flex-start}.resource-board>div{padding:.5rem}.resource-board output{font-size:1.3rem}}