:root{color-scheme:dark;--gold:#efcc68;--ink:#071017;--panel:rgba(5,14,20,.91);--line:rgba(220,235,240,.18)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#061018;font-family:Inter,Segoe UI,Arial,sans-serif;color:#e7edf0}
button{font:inherit;color:inherit;border:0;cursor:pointer}.hud{height:58px;position:fixed;z-index:100;inset:0 0 auto;display:flex;align-items:center;gap:18px;padding:0 18px;background:linear-gradient(180deg,rgba(3,10,15,.92),rgba(3,10,15,.63));border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.profile{height:58px;min-width:285px;display:flex;align-items:center;gap:13px;text-align:left;background:transparent;border-right:1px solid var(--line)}.profile b{display:block;color:var(--gold);font-size:18px}.profile small{display:block;color:#aebdc4;margin-top:4px;letter-spacing:.07em}.crest{font-size:29px;color:var(--gold)}
.resources{display:flex;align-items:center;justify-content:center;gap:8px;flex:1}.resource{min-width:145px;padding:8px 13px;border-radius:13px;background:rgba(4,11,16,.55);white-space:nowrap}.resource i{font-style:normal;margin-right:8px}.resource small{color:#a9bac1;margin-left:6px}.settlers{display:flex;gap:8px;align-items:center;color:#cbd7dc}.settlers span{color:#ad91d3;margin-left:8px}
.admin-nav{padding:9px 14px;border:1px solid rgba(239,204,104,.45);border-radius:8px;background:rgba(239,204,104,.12);color:var(--gold);font-weight:800;white-space:nowrap}.admin-nav.hidden{display:none}
#viewport{position:absolute;inset:0;overflow:hidden}.map{position:absolute;inset:0;background-size:cover;background-position:center;transform-origin:center;transition:opacity .25s}.map.upper{background-image:url('assets/terrain_upper_blank-v3.png')}.map.economy{background-image:url('assets/terrain_economy_blank-v1.png')}.map-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(1,7,11,.14),transparent 20%,transparent 85%,rgba(1,7,11,.2))}
.buildings,.roads{position:absolute;inset:0}.building{position:absolute;width:180px;height:135px;translate:-50% -50%;user-select:none;touch-action:none;cursor:grab;z-index:5}.building:active{cursor:grabbing}.building img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 7px rgba(0,0,0,.35));pointer-events:none}.building.hall{width:330px;height:245px}.level{position:absolute;left:50%;bottom:-4px;translate:-50%;border:2px solid var(--gold);background:#081117;border-radius:50%;min-width:42px;height:42px;display:grid;place-items:center;font-size:13px}.name{position:absolute;left:50%;bottom:38px;translate:-50%;white-space:nowrap;color:var(--gold);font-weight:700;text-shadow:0 2px 3px #000}
.side-action{position:absolute;z-index:40;left:14px;top:44%;width:58px;height:58px;border-radius:10px;background:var(--panel);font-size:27px;color:var(--gold);border:1px solid var(--line)}.build-menu{position:absolute;z-index:60;left:14px;top:74px;bottom:74px;width:390px;padding:22px;border-radius:18px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(14px);transition:transform .2s,opacity .2s}.build-menu.hidden{transform:translateX(-430px);opacity:0;pointer-events:none}.panel-head{display:flex;justify-content:space-between;align-items:start}.panel-head small{color:#93a7b0}.panel-head h2{margin:3px 0 0;color:#f0e5cd}.panel-head button{background:transparent;font-size:28px}.build-menu>p{color:#b9c7cd;line-height:1.5}.build-list{display:grid;gap:8px;max-height:calc(100% - 115px);overflow:auto}.build-card{display:grid;grid-template-columns:54px 1fr;gap:10px;text-align:left;padding:8px;border-radius:10px;background:rgba(255,255,255,.055);border:1px solid transparent}.build-card:hover{border-color:rgba(239,204,104,.55);background:rgba(239,204,104,.1)}.build-card img{width:54px;height:45px;object-fit:contain}.build-card b{display:block}.build-card small{color:#aebcc2}.build-card.locked{filter:grayscale(.8);opacity:.55;cursor:not-allowed}.build-card.locked:hover{border-color:rgba(239,120,120,.45)}.build-card .requirement{display:block;color:#ef9a91;margin-top:3px}.xpbar{display:block;width:115px;height:4px;margin-top:5px;background:#293640;border-radius:4px;overflow:hidden}.xpbar i{display:block;height:100%;background:var(--gold)}
.roads{z-index:1;pointer-events:none;opacity:.88}.road-svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}.road-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.road-edge{stroke:rgba(76,91,101,.24);stroke-width:23;filter:drop-shadow(0 1px 2px rgba(27,40,48,.2))}.road-stone{stroke:rgba(164,179,187,.58);stroke-width:17}.road-wear{stroke:rgba(217,226,229,.34);stroke-width:6;stroke-dasharray:4 10}
.placement-zone{display:block;position:absolute;z-index:3;inset:14% 7% 10%;border:2px dashed rgba(121,224,157,.46);background:rgba(52,156,88,.045);box-shadow:inset 0 0 50px rgba(48,180,95,.05);opacity:.48;pointer-events:none;transition:.2s}.map.placing .placement-zone{border-color:rgba(121,240,157,.95);background-color:rgba(52,156,88,.13);background-image:linear-gradient(rgba(167,233,184,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(167,233,184,.1) 1px,transparent 1px);background-size:calc(100% / 24) calc(100% / 14);box-shadow:inset 0 0 65px rgba(48,180,95,.13);opacity:1}.map.invalid-placement .placement-zone{border-color:rgba(255,91,91,.95);background-color:rgba(190,35,35,.13)}.blocked-zones{position:absolute;inset:0;z-index:4;pointer-events:none}.blocked-zones i{display:block;position:absolute;background:rgba(180,28,28,.04);opacity:.15}.map.placing .blocked-zones i{background:repeating-linear-gradient(135deg,rgba(232,62,62,.22) 0 8px,rgba(125,20,20,.13) 8px 16px);box-shadow:inset 0 0 18px rgba(255,70,70,.28);opacity:1}.placement-preview{position:absolute;z-index:35;width:190px;height:145px;object-fit:contain;translate:-50% -50%;pointer-events:none;filter:drop-shadow(0 7px 6px #000)}.placement-preview.invalid{filter:sepia(1) saturate(5) hue-rotate(315deg) drop-shadow(0 0 9px #e63838)}.placement-preview.hidden{display:none}
.building.constructing img{opacity:.48;filter:grayscale(.35) drop-shadow(0 8px 7px rgba(0,0,0,.35))}.build-progress{position:absolute;left:12%;right:12%;bottom:12px;height:7px;border:1px solid var(--gold);background:#111b20;border-radius:8px;overflow:hidden}.build-progress i{display:block;height:100%;background:linear-gradient(90deg,#b78b2d,var(--gold));animation:build-fill linear forwards}@keyframes build-fill{from{width:0}to{width:100%}}.available{display:block!important;color:#87d8a6!important;margin-top:3px}.detail-panel button:disabled{opacity:.42;cursor:not-allowed}.job-queue{position:absolute;z-index:44;right:16px;bottom:78px;width:290px;padding:10px;border-radius:10px;background:rgba(5,14,20,.86);border:1px solid var(--line);backdrop-filter:blur(8px)}.job-queue.hidden{display:none}.job-queue div{display:flex;justify-content:space-between;gap:10px;padding:5px}.job-queue span{color:var(--gold);white-space:nowrap}
.detail-panel{position:absolute;z-index:62;right:16px;top:76px;width:330px;padding:20px;border-radius:16px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(12px)}.detail-panel.hidden{display:none}.detail-panel h2{margin:0 0 5px;color:#f0e5cd}.detail-panel p{color:#b9c7cd}.detail-panel button{width:100%;padding:12px;margin-top:8px;border-radius:8px;background:rgba(255,255,255,.07)}.detail-panel .upgrade{color:var(--gold);border:1px solid rgba(239,204,104,.4)}.detail-panel .demolish{color:#ef9292}.screen-overlay{position:absolute;z-index:120;inset:58px 0 0;background:#071019}.screen-overlay.hidden{display:none}.overlay-close{position:absolute;right:20px;top:18px;z-index:3;width:50px;height:50px;border-radius:50%;font-size:30px;background:rgba(3,9,14,.8)}.overlay-content{height:100%;background-size:cover;background-position:center;display:grid;place-items:center}.overlay-title{position:absolute;top:22px;left:28px;font-size:27px;color:var(--gold)}.campaign-track{display:flex;gap:25px;align-items:center}.campaign-node,.world-node{border:2px solid var(--gold);background:rgba(5,14,20,.88);box-shadow:0 0 30px rgba(239,204,104,.22);color:#fff}.campaign-node{width:110px;height:110px;border-radius:50%;font-weight:700}.campaign-node.locked{filter:grayscale(1);opacity:.65}.world-field{position:relative;width:100%;height:100%}.world-node{position:absolute;width:120px;height:74px;border-radius:14px;translate:-50% -50%}.world-node.own{color:var(--gold)}
.bottom-nav{position:absolute;z-index:45;left:50%;bottom:14px;translate:-50%;display:flex;gap:8px}.bottom-nav button{height:52px;padding:0 22px;border-radius:9px;background:rgba(5,13,19,.82);border:1px solid var(--line);color:var(--gold);font-weight:700;backdrop-filter:blur(8px)}.bottom-nav #world{font-size:28px;padding:0 18px}.toast{position:absolute;z-index:80;left:18px;bottom:14px;color:#9ed7b5;text-shadow:0 2px 3px #000;pointer-events:none}
.settings-action{position:absolute;z-index:48;right:18px;bottom:14px;width:52px;height:52px;border-radius:50%;font-size:25px;color:var(--gold);background:rgba(5,13,19,.86);border:1px solid var(--line);backdrop-filter:blur(8px)}.settings-action:hover{rotate:25deg}.settings-panel label{display:block;margin:16px 0 7px;color:#dbe4e7;font-weight:700}.settings-panel input[type="text"]{width:100%;box-sizing:border-box;padding:12px;border:1px solid var(--line);border-radius:8px;background:#071117;color:#fff;font:inherit}.setting-toggle{display:flex!important;align-items:center;justify-content:space-between;text-align:left}.setting-toggle span{display:flex;flex-direction:column}.setting-toggle small{color:#9fb0b7;margin-top:3px}.setting-toggle b{min-width:52px;color:var(--gold)}
.world-node.player{border-color:#88a9bd}.world-node b,.world-node span,.world-node small{display:block}.world-node b{color:var(--gold)}.world-node span{font-size:12px}.world-node small{font-size:10px;color:#c8d3d9}.world-loading,.world-empty{padding:18px 24px;border-radius:12px;background:rgba(4,12,18,.88);color:#e8edf0}.world-empty{position:absolute;left:50%;top:50%;translate:-50% -50%}.world-march{position:absolute;left:50%;bottom:85px;translate:-50%;display:flex;gap:20px;padding:13px 20px;border:1px solid var(--gold);border-radius:10px;background:rgba(4,12,18,.9);color:#fff}.world-march b{color:var(--gold)}
.quest-action{position:absolute;z-index:48;right:18px;top:76px;width:52px;height:52px;border-radius:50%;font-size:22px;color:var(--gold);background:rgba(5,13,19,.86);border:1px solid var(--line);backdrop-filter:blur(8px)}.quest-action b{position:absolute;right:-3px;top:-3px;min-width:19px;height:19px;padding:0 3px;display:grid;place-items:center;border-radius:10px;background:#b5473e;color:white;font-size:11px}.quest-action b:empty{display:none}
@media(max-width:900px){.hud{gap:5px;padding:0 7px}.profile{min-width:145px}.profile small{display:none}.resources{overflow-x:auto;justify-content:start}.resource{min-width:104px;font-size:13px}.settlers{display:none}.build-menu{left:8px;right:8px;width:auto}.detail-panel{left:8px;right:8px;top:auto;bottom:75px;width:auto}.bottom-nav{left:12px;translate:0}.bottom-nav span{display:none}.settings-action{right:10px}.campaign-track{gap:8px;flex-wrap:wrap;justify-content:center}.campaign-node{width:82px;height:82px}}