/* Art direction: an immersive colony viewport, framed in worn gold and blue steel. */
:root{--gold:#e4c07b;--teal:#79eddf;--muted:#afc3d2;--border:#d2b77a55;color:#edf4ff;background:#09141e}
body{overflow:hidden;background:radial-gradient(ellipse at 50% 20%,#263949,#08121b 80%)}
.app{display:block;max-width:none;padding:0;min-height:0;height:100dvh}.sidebar,.right-rail{display:none}
main{position:relative;display:flex;flex-direction:column;width:100%;height:100dvh;min-height:0;border:0;border-radius:0;background:#112431;overflow:hidden;box-shadow:none}
header{flex:0 0 64px;padding:8px 24px;background:linear-gradient(180deg,#263c4d,#10202d);border-bottom:1px solid #d4b87577;z-index:10;box-shadow:0 3px 15px #0008}
.identity{gap:12px}.identity b{font:600 16px Cinzel,Georgia,serif;color:#f6deaa;letter-spacing:2px}.identity div>span{font-size:9px;letter-spacing:1px;color:#9ebbcf}.avatar{width:48px;height:48px;border:2px solid #d9bd7b;border-radius:50%;box-shadow:0 0 0 3px #071923,0 0 15px #66e5eb55;background:radial-gradient(circle,#3a7292,#152534);font-size:35px}
.resources{position:absolute;z-index:11;left:50%;top:12px;transform:translateX(-50%);width:min(530px,43%);background:none;padding:0;gap:8px;pointer-events:none}.resource{background:linear-gradient(130deg,#263e50ee,#102232f2);border:1px solid #bfc7c176!important;border-radius:8px 14px 8px 8px;min-height:40px;padding:5px 10px;grid-template-columns:25px 1fr;box-shadow:0 3px 10px #0007}.resource b{font-size:14px;color:#d9eeff}.resource small{font-size:8px;color:#a8d4c8}.resource-icon{font-size:22px;color:#f3ce79;filter:drop-shadow(0 2px 2px #000)}
.map-wrap{flex:1;min-height:0;position:relative}.map{height:100%;min-height:0;aspect-ratio:auto;background:#2b5350}.world-surface{background-size:100% 100%;filter:saturate(1.16) brightness(1.12)}.world-surface:after{box-shadow:inset 0 0 100px #09202c55}.map:before{display:none}
.map-heading{top:14px;left:50%;transform:translateX(-50%);width:max-content;text-align:center;opacity:.85}.map-heading h2{font-size:16px;letter-spacing:3px;color:#b5edff;text-shadow:0 2px 5px #00131d}.atmosphere{z-index:1800;background:linear-gradient(180deg,#0c25323d,transparent 20%,transparent 85%,#07172380);pointer-events:none}
.plot:not(.empty){width:12%;filter:drop-shadow(0 5px 4px #05182099)}.plot.citadel{width:16%}.plot:not(.empty) svg{aspect-ratio:1;filter:none}.plot:not(.empty):hover svg{filter:brightness(1.12) drop-shadow(0 0 3px #9cebf7)}.plot.selected svg{filter:drop-shadow(0 0 2px #9cebf7)}
.plot-label,.plot:not(.empty) .plot-label{bottom:1%;opacity:1;font:600 5.5px/1.2 Manrope,Arial,sans-serif;padding:3px 5px;border:1px solid #d9c99d88;border-radius:3px;background:linear-gradient(#1e303de8,#081822f5);box-shadow:0 2px 5px #0009;color:#f2f5e9;max-width:140%;text-align:center}.plot-label em{display:block;color:#d6cbab;font-size:4px;margin:2px 0 0}.plot:not(.empty).selected:after{left:15%;bottom:9%;width:70%;height:15%;border-color:#f5d99a;box-shadow:0 0 10px #f5d99a55}
.empty-diamond{background:#d7e9bb08;box-shadow:none}.empty-plus{opacity:.13;font-size:10px;color:#eff7dd;text-shadow:none}.plot.empty:hover .empty-plus,.plot.empty.selected .empty-plus,.road-mode .empty-plus{opacity:1}.plot.empty:hover .empty-diamond,.plot.move-target .empty-diamond{background:#d8f3b850}.workers-tag{background:#142f2fe8;border-color:#d0c18a66;font-size:5px;top:38%;right:-1%;box-shadow:0 1px 3px #0007}
.road-edge{stroke:#42504c;stroke-width:1.45}.road-center{stroke:#b9b5a0;stroke-width:1.1;stroke-dasharray:.18 .08}.hunter-agent{filter:drop-shadow(0 1px 1px #000)}
.map-controls{left:auto;right:18px;bottom:54px;background:#102534e8;border-color:#c3b17d88;box-shadow:0 4px 12px #0005}.map-controls button{background:linear-gradient(#334d5b,#1a303c);border:1px solid #8ba0a355;color:#dbe8e7}.map-controls #road-tool{color:#e5cb8e}.map-controls #road-tool.active{background:#d5bc7e;color:#172b32}.map-footer{bottom:18px;font-size:9px;color:#e0e5d2}.map-footer>span:first-child{background:#112833dc;border-color:#bcb08255}
.quest-banner{position:absolute;bottom:58px;left:18px;margin:0;width:auto;max-width:340px;min-width:230px;padding:10px 15px;z-index:2003;border-color:#e5c578;border-radius:9px;background:linear-gradient(110deg,#273a3bf5,#0d2230f5);box-shadow:0 4px 20px #0007}.quest-symbol{font-size:30px;text-shadow:0 0 12px #e9bc66}.quest-banner small{font-size:8px}.quest-banner b{font-size:12px}.quest-arrow{padding-left:15px}
.panel{position:relative;z-index:2005;flex:0 0 auto;max-height:34dvh;min-height:175px;overflow:auto;padding:14px 24px;border-top:2px solid #b4a16a;background:linear-gradient(115deg,#213b4b,#102431 70%);box-shadow:0 -7px 22px #00131c66;scrollbar-width:thin}.panel h2{font:600 23px Cinzel,Georgia,serif;color:#d9edf5}.panel p{font-size:11px;margin:8px 0;color:#bacdd5}.panel-top{gap:15px}.building-icon{width:70px;height:65px;background:radial-gradient(ellipse,#315666,#142a38);border-color:#c3b47b77;border-radius:5px;font-size:35px;overflow:hidden}.building-icon svg{width:100%;height:100%}.level-pill{color:#d6bd7c;font-size:9px}.panel .action-row{margin-top:10px}.costs{gap:12px;font-size:12px}.costs>span{display:inline-flex;gap:4px;align-items:center;border:1px solid #c2ba9655;border-radius:6px;background:#1024329c;padding:7px}.primary{background:linear-gradient(#1ab99f,#087c71);border:1px solid #85e6d0;border-radius:6px;box-shadow:inset 0 1px #a1f6df77,0 4px 10px #0005;font-size:12px;min-height:42px;padding:9px 18px}.action-row .primary{font-size:17px;min-width:150px}.panel>.primary[data-move]{float:right;margin:8px 0 0 8px;font-size:10px;min-height:34px;background:linear-gradient(#405d69,#243e4b);border-color:#a6b5a477}.text-button{color:#b3c9d3}.panel>.text-button[data-demolish]{font-size:9px;margin-top:5px}.worker-control{margin:8px 0;padding:6px 12px;max-width:480px}.worker-control button{background:linear-gradient(#365b65,#1c3c47);border-color:#a4b8ab77}.action-note{font-size:10px}.build-options{grid-template-columns:repeat(6,1fr);gap:8px}.build-option{padding:5px 6px;min-height:90px;background:linear-gradient(#274657,#172d3b);border-color:#96aa9a55}.build-option.selected{background:#31544e;border-color:#edd395}.build-option span{height:58px;margin:0}.build-option span svg{width:100%;height:100%}.build-option b{font-size:9px}
.bottom-nav{position:relative;flex:0 0 65px;z-index:2010;background:linear-gradient(#1c3343,#0c1c29);border-top:1px solid #c6b27788;box-shadow:0 -3px 10px #0006;padding-bottom:env(safe-area-inset-bottom)}.bottom-nav button{font-size:10px;font-weight:700;color:#a9c7d9;padding:6px 0;min-height:60px}.bottom-nav button span{font-size:25px;line-height:1.2;color:#8eb7d0;text-shadow:0 2px 3px #000}.bottom-nav button.active{background:radial-gradient(ellipse at bottom,#a18a3b44,transparent 75%);box-shadow:inset 0 2px #eacb7c;color:#f8d683}.bottom-nav button.active span{color:#f3cb71;filter:drop-shadow(0 0 5px #f8bf5b55)}
.account-button{font-size:10px;background:linear-gradient(#334d5c,#172d3b);border-color:#b3b08a77;margin-left:auto}.quest-item{padding:8px 0}.panel .guide-step{margin-top:6px}.panel .guide-step b{color:#e1d1a0}dialog{z-index:4000}.panel .travel-note{font-size:10px}#toast{z-index:5000;bottom:90px}
@media(min-width:1000px){.panel{min-height:165px;padding-right:30%;}.panel .action-row{position:absolute;right:24px;top:22px;max-width:28%;flex-wrap:wrap;justify-content:flex-end}.panel .action-row .primary{width:100%}.panel .action-note{max-width:600px}.panel:has(.build-options){padding-right:24px;min-height:235px}.panel:has(.build-options) .action-row{position:static;max-width:none;flex-wrap:nowrap}.panel:has(.build-options) .action-row .primary{width:auto}.panel:has(.quest-item),.panel:has(.guide-step),.panel:has(.worker-row){padding-right:24px}.map{max-width:none}.world-surface{background-size:cover;background-position:center 57%}}
@media(max-width:760px){header{flex-basis:56px;padding:6px 10px}.identity b{font-size:10px;letter-spacing:1px}.identity div>span{font-size:7px}.avatar{width:39px;height:39px;font-size:28px}.identity{gap:8px}.resources{top:65px;width:calc(100% - 20px);gap:5px;left:10px;transform:none}.resource{min-height:38px;padding:4px 5px;grid-template-columns:20px 1fr;gap:3px}.resource b{font-size:11px}.resource small{font-size:6px}.resource-icon{font-size:19px}.map-heading{top:55px}.map-heading h2{font-size:11px;letter-spacing:2px}.panel{max-height:36dvh;min-height:170px;padding:10px 12px}.panel h2{font-size:18px}.panel p{font-size:10px;line-height:1.5;margin:5px 0}.building-icon{width:51px;height:50px}.level-pill{font-size:8px}.panel-top{gap:10px}.costs{font-size:10px;gap:5px}.costs>span{padding:5px}.action-row .primary{font-size:14px;min-width:100px;padding:8px 12px}.primary span{margin-left:5px}.action-note{font-size:8px}.quest-banner{left:10px;bottom:48px;max-width:64%;min-width:0;padding:7px 10px;gap:8px}.quest-banner small{font-size:6px}.quest-banner b{font-size:9px}.quest-symbol{font-size:24px}.quest-arrow{font-size:18px;padding-left:0}.map-controls{bottom:47px;right:8px;gap:2px;padding:3px;flex-wrap:wrap;width:90px;justify-content:center}.map-controls button{min-width:24px;min-height:28px;font-size:13px}.map-controls #road-tool{font-size:8px;padding:4px 7px}#zoom-label{min-width:28px;font-size:7px}.map-footer{left:10px;right:10px;bottom:12px;font-size:7px}.map-footer>span:first-child{padding:4px 6px}.bottom-nav{flex-basis:58px}.bottom-nav button{font-size:8px;min-height:54px}.bottom-nav button span{font-size:23px}.build-options{grid-template-columns:repeat(3,1fr);gap:5px}.build-option{min-height:75px}.build-option span{height:47px}.panel .worker-control{padding:4px 9px;margin:5px 0}.panel .worker-control button{height:29px;width:29px}.account-button{font-size:8px;min-height:31px;padding:5px 7px;max-width:114px;margin-right:7px}.icon-button{width:28px;height:28px}.plot:not(.empty){width:13%}.plot.citadel{width:17%}.plot-label,.plot:not(.empty) .plot-label{font-size:5px;padding:2px 4px}.plot-label em{font-size:4px}.panel .action-row{margin-top:6px}.panel>.text-button[data-demolish]{font-size:8px;padding:7px}.panel>.primary[data-move]{font-size:9px;padding:5px 10px;min-height:30px}}
.avatar img{width:100%;height:100%;object-fit:cover;transform:none}.avatar{overflow:hidden}.plot:not(.empty) .sprite-hit{pointer-events:all}.plot:not(.empty) svg image{pointer-events:none}.building-icon .sprite-hit,.build-option .sprite-hit{pointer-events:none}
@media(min-width:1000px){.plot:not(.empty){width:8%}.plot.citadel{width:10%}}.atmosphere:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 21% 63%,#9bfff1aa 0,transparent 2px),radial-gradient(circle at 72% 35%,#adf9ff99 0,transparent 2px),radial-gradient(circle at 43% 44%,#d4e6ff99 0,transparent 2px);animation:alien-sparks 7s ease-in-out infinite alternate}@keyframes alien-sparks{from{opacity:.2;transform:translateY(5px)}to{opacity:.8;transform:translateY(-6px)}}@media(prefers-reduced-motion:reduce){.atmosphere:after{animation:none}}
.world-surface{inset:auto 0 auto 0;top:50%;width:100%;height:auto;aspect-ratio:4/5;translate:0 -50%;background-size:100% 100%}