*{box-sizing:border-box}:root{--bg:#17110c;--p:#2a2118;--p2:#211810;--gold:#c99a50;--line:#6c4d28;--text:#f1e1c3;--muted:#b7a68a}
html,body{margin:0;min-height:100%;background:#110c08;color:var(--text);font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}button{cursor:pointer;color:var(--text);background:#332419;border:1px solid #76542c;border-radius:5px;padding:7px 10px}button:hover{filter:brightness(1.15)}button:disabled{opacity:.45;cursor:not-allowed}.danger{background:#6b2626}.primary{background:linear-gradient(#946735,#62401f)}.full{width:100%}.hint,.muted,small{color:var(--muted)}
.topbar{min-height:72px;background:linear-gradient(#4a3522,#281b11);border-bottom:2px solid #8c6837;display:flex;align-items:center;gap:14px;padding:9px 13px;position:sticky;top:0;z-index:20}.brand{min-width:250px;display:flex;align-items:center;gap:9px}.brand small{display:block;margin-top:3px}.seal{width:42px;height:42px;border-radius:50%;background:#7f2a24;border:2px solid #c7984f;display:grid;place-items:center;font-weight:800}.resources{flex:1;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.pill{min-width:92px;background:#18110b;border:1px solid #5f4323;border-radius:6px;padding:5px 8px}.pill small,.pill b{display:block}.pill small{font-size:10px}.pill b{font-size:13px}.top-actions{display:flex;gap:5px;flex-wrap:wrap}
.layout{display:grid;grid-template-columns:230px minmax(580px,1fr) 275px;gap:9px;padding:9px;width:min(1500px,100%);margin:auto}.panel,.center{background:linear-gradient(#302419,#211810);border:1px solid #70512b;border-radius:8px;overflow:hidden;box-shadow:0 8px 24px #0005}.panel{padding:11px}.panel section+section{border-top:1px solid #59401f;margin-top:11px;padding-top:10px}.panel h3{font-size:14px;margin:0 0 8px;color:#edc986}.row{display:flex;justify-content:space-between;gap:8px;padding:4px 0;font-size:12px}.sep{border-top:1px dashed #5b4328;margin-top:7px;padding-top:8px}.bar{height:8px;background:#100b08;border-radius:5px;overflow:hidden;margin-top:5px}.bar i{display:block;height:100%;background:#a17c42}.city-toolbar{height:67px;display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #74542d;background:linear-gradient(#3d2c1e,#2a1e14)}.city-toolbar small{display:block;margin-top:4px}.queues{display:grid;gap:3px;max-width:58%}.queue{font-size:11px;background:#17100a;border:1px solid #584020;border-radius:4px;padding:4px 7px;text-align:right}.clickhint{text-align:center;padding:5px;background:#24190f;color:#d3bd97;font-size:11px}
.city{height:655px;position:relative;overflow:hidden;background:linear-gradient(#a8ad7c,#71855a)}.city:before{content:"";position:absolute;inset:18px;border:13px solid #6f684c;clip-path:polygon(0 7%,7% 0,93% 0,100% 7%,100% 93%,93% 100%,7% 100%,0 93%);pointer-events:none}.city.lv2:before{inset:10px;border-width:10px}.city.lv3:before{inset:3px;border-width:8px}.river{position:absolute;width:120%;height:85px;left:-10%;top:47%;background:linear-gradient(#789e97,#668983);transform:rotate(-11deg);box-shadow:0 0 0 7px #84936e}.road{position:absolute;background:#c5b78caa}.road.a{width:92%;height:24px;left:4%;top:51%}.road.b{height:90%;width:24px;left:50%;top:5%}
.building{position:absolute;width:86px;height:84px;border:1px solid #684821;background:linear-gradient(#7f5831,#513318);border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:4;box-shadow:0 4px 8px #0005}.building span{font-size:28px}.building b{font-size:11px;margin-top:3px}.building small{font-size:10px;color:#efcc89}.hall{left:50%;top:46%;transform:translate(-50%,-50%);width:112px;height:104px;background:linear-gradient(#8e3427,#5d211a);z-index:6}.hall:hover{transform:translate(-50%,-52%)}
.wall-ring{position:absolute;left:7%;top:6%;width:86%;height:86%;background:transparent;border:0;color:#44351f;z-index:2;pointer-events:none}.wall-ring:before{content:"";position:absolute;inset:0;border:10px ridge #81775a;clip-path:polygon(0 6%,6% 0,94% 0,100% 6%,100% 94%,94% 100%,6% 100%,0 94%)}.wall-ring span,.wall-ring b,.wall-ring small{position:absolute;right:18px;top:12px;pointer-events:auto;background:#3a2a1b;color:#f2d9aa;padding:3px 5px;border-radius:4px;border:1px solid #76542d}.wall-ring span{right:108px}.wall-ring small{top:37px}.wall-ring b{cursor:pointer}
.slot{position:absolute;width:74px;height:68px;border:1px dashed #66583e;background:#ddd0a14d;color:#4b402d;z-index:3}.occ{position:absolute;z-index:4}.occ .building{position:relative;left:0;top:0}.worker{margin:7px 0 10px}.worker label{display:flex;justify-content:space-between;font-size:11px}.worker input{width:100%}.prod,.armyline{display:flex;justify-content:space-between;padding:4px 0;font-size:11px}.log{height:170px;overflow:auto;background:#17100a;border:1px solid #4c351d;border-radius:5px;padding:7px;font-size:10.5px;line-height:1.45}.log div{border-bottom:1px dotted #44301b;padding:3px 0}
footer{min-height:46px;background:#19110b;border-top:1px solid #563c20;padding:7px 13px;display:flex;align-items:center;justify-content:space-between;color:#aa987c;font-size:11px}
.modal{position:fixed;inset:0;background:#000b;display:grid;place-items:center;z-index:50;padding:18px}.modal.hidden{display:none}.modal-card{width:min(600px,96vw);max-height:90vh;overflow:auto;background:linear-gradient(#3a2a1d,#231911);border:2px solid #896331;border-radius:9px;padding:18px;position:relative}.modal-card.wide{width:min(980px,97vw)}.close{position:absolute;right:7px;top:7px;width:30px;height:30px;padding:0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:8px}.buildopt,.card{background:#1d150e;border:1px solid #634724;border-radius:6px;padding:10px;text-align:left}.buildopt b,.card b{display:block;color:#efcb89}.buildopt small,.card small{display:block;margin-top:4px}.cost{font-size:10.5px;line-height:1.45;margin-top:6px;color:#d1bd98}.detailtop{display:flex;align-items:center;gap:10px}.bigicon{width:60px;height:60px;display:grid;place-items:center;background:#604323;border-radius:7px;font-size:32px}.detailtop h2{margin:0}.box,.refundbox{background:#17100a;border:1px solid #5b4021;border-radius:5px;padding:8px;margin:8px 0;font-size:11px;line-height:1.55}.refundbox{background:#182017;border-color:#4c663e}.actions{display:flex;gap:7px;flex-wrap:wrap}.actions button{flex:1;min-width:130px}.govcard,.techcard,.troopcard{border:1px solid #604321;border-radius:6px;background:#1c140d;padding:9px;margin:7px 0}.govcard.sel{outline:2px solid #a97a3c}.govcard header,.techhead,.troophead{display:flex;justify-content:space-between;gap:10px}.techgrid,.troopgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px}.badge{display:inline-block;background:#66451f;border:1px solid #9b7137;border-radius:10px;padding:2px 6px;font-size:10px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:7px 0}.stats div{background:#281c12;padding:5px;border-radius:4px;text-align:center;font-size:10px}.stats b{display:block;color:#f0cd8d}.counter{font-size:10px;color:#d4c09b;margin:5px 0}.recruitrow{display:flex;gap:6px;align-items:center;margin-top:7px}.recruitrow input{width:90px;background:#130e09;color:#fff;border:1px solid #674922;border-radius:4px;padding:6px}.testgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
@media(max-width:1100px){.layout{grid-template-columns:210px 1fr}.right{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}.right section+section{border-top:0}.city{height:600px}}@media(max-width:780px){.topbar{position:static;flex-wrap:wrap}.brand{min-width:100%}.layout{display:block}.panel,.center{margin-bottom:8px}.right{display:block}.city{height:620px}.queues{max-width:55%}.resources{justify-content:flex-start}}

.herohead{display:flex;align-items:center;justify-content:space-between;gap:8px}.hero-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:8px}
.herocard{border:1px solid #654824;background:#1b130d;border-radius:7px;padding:10px}.herocard.legend{border-color:#b78a42;box-shadow:inset 0 0 18px #9b6b2520}.hero-name{font-size:15px;color:#f1cc87}.hero-type{font-size:10px;padding:2px 6px;border:1px solid #76552d;border-radius:10px}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:7px 0}.hero-stats div{background:#281c12;padding:5px;border-radius:4px;text-align:center;font-size:9px}.hero-stats b{display:block;color:#f0cd8d;font-size:12px}
.xpbar{height:6px;background:#100b08;border-radius:4px;overflow:hidden;margin:5px 0}.xpbar i{display:block;height:100%;background:#a17c42}.legendtag{color:#efc269;font-weight:bold}.normaltag{color:#b9b0a1}
.prestige-box{background:#1a140e;border:1px solid #6a4b25;border-radius:6px;padding:10px;margin-bottom:9px}.formula{font-family:monospace;background:#100b08;padding:8px;border-radius:5px;line-height:1.5}
.inv{display:flex;gap:5px;flex-wrap:wrap}.inv span{background:#2b1d12;border:1px solid #654522;border-radius:10px;padding:3px 7px;font-size:10px}
.search-result{border:1px solid #9a6c31;background:#2a1c10;border-radius:7px;padding:10px;margin:9px 0}.giftrow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin:8px 0}.giftrow button.sel{outline:2px solid #d2a45b}
.ranktable{width:100%;border-collapse:collapse;font-size:10px}.ranktable td,.ranktable th{border-bottom:1px solid #4d351d;padding:5px;text-align:left}

.passbox{background:#20170f;border:1px solid #74532b;border-radius:6px;padding:7px;margin:5px 0;font-size:10.5px}
.passbox.active{border-color:#9c7b42;background:#262016}
.queueitem{border-top:1px dotted #4b351d;padding-top:3px;margin-top:3px}
.search-progress{height:9px;background:#100b08;border-radius:6px;overflow:hidden;margin:8px 0}.search-progress i{display:block;height:100%;background:#a88143}
.search-speed{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}.search-speed button.sel{outline:2px solid #cf9f53}


/* v0.4 Build 1 Fix 3 — quality colors and visual effects */
.hero-name,.quality-name{font-weight:800;letter-spacing:.2px}
.q1{color:#ff4040!important}
.q2{color:#ff9b38!important}
.q3{color:#d46cff!important}
.q4{color:#55b8ff!important}
.q5{color:#6ee879!important}
.q6{color:#f2f2f2!important}

/* Higher quality = stronger visual treatment */
.qcard1{border-color:#d94343!important;box-shadow:0 0 0 1px #ff6b6b55,inset 0 0 22px #8f151530,0 0 18px #d62c2c3d;position:relative;overflow:hidden}
.qcard2{border-color:#c97831!important;box-shadow:0 0 0 1px #ffa43c40,inset 0 0 18px #a75a1430,0 0 12px #d67b2930}
.qcard3{border-color:#9451b8!important;box-shadow:0 0 0 1px #d979ff35,inset 0 0 14px #7a25952b}
.qcard4{border-color:#477fa7!important;box-shadow:inset 0 0 12px #2c7da525}
.qcard5{border-color:#477c4e!important}
.qcard6{border-color:#777!important}

.qfx1{font-size:16px!important;text-shadow:0 0 4px #fff2,0 0 8px #ff5555,0 0 16px #bf1515;animation:q1Glow 1.8s ease-in-out infinite}
.qfx2{text-shadow:0 0 4px #ffb85d,0 0 10px #d46a18}
.qfx3{text-shadow:0 0 4px #e8adff,0 0 9px #8e32ba}
.qfx4{text-shadow:0 0 6px #278cd0}
.qfx5{text-shadow:0 0 4px #2f9b47}
.qfx6{text-shadow:0 1px 1px #000}
@keyframes q1Glow{0%,100%{filter:brightness(1);text-shadow:0 0 4px #fff2,0 0 8px #ff5555,0 0 14px #ad1515}50%{filter:brightness(1.35);text-shadow:0 0 5px #fff6,0 0 12px #ff5a5a,0 0 22px #e51e1e}}
.qcard1:after{content:"";position:absolute;top:-120%;left:-45%;width:32%;height:300%;background:linear-gradient(90deg,transparent,#ffffff18,transparent);transform:rotate(18deg);animation:qShine 4.5s linear infinite;pointer-events:none}
@keyframes qShine{0%{left:-55%}55%,100%{left:135%}}

.waiting-hall{margin-top:12px;border-top:1px solid #6a4b25;padding-top:10px}
.waiting-card{position:relative;border-radius:7px;padding:10px;margin:8px 0;background:#1a130d}
.mission-card{border:1px solid #81602e;background:#20170e;border-radius:7px;padding:10px;margin:8px 0}
.mission-progress{height:10px;background:#100b08;border-radius:6px;overflow:hidden;margin:8px 0}
.mission-progress i{display:block;height:100%;background:linear-gradient(90deg,#8e6b38,#d0aa62)}
.expire{color:#e9b879}

/* v0.4 Build 1 Fix 4 — compact city layout */
.building{width:66px!important;height:64px!important;border-radius:6px!important}
.building span{font-size:22px!important}
.building b{font-size:9px!important;line-height:1.05!important;max-width:60px;text-align:center}
.building small{font-size:8px!important;margin-top:2px}
.hall{width:88px!important;height:82px!important}
.hall span{font-size:25px!important}.hall b{font-size:10px!important}
.slot{width:58px!important;height:54px!important;font-size:10px!important;padding:2px!important}
.occ{width:66px;height:64px}
.wall-ring span,.wall-ring b,.wall-ring small{font-size:10px!important}
.wall-ring span{right:92px!important}.wall-ring b{right:14px!important}.wall-ring small{right:14px!important;top:34px!important}

/* Construction queue redesign */
.city-toolbar{height:auto!important;min-height:72px;align-items:stretch!important;gap:10px}
.queue-area{display:flex;gap:7px;align-items:stretch;justify-content:flex-end;max-width:68%;min-width:430px}
.queues{display:grid!important;grid-template-columns:1fr!important;gap:4px!important;max-width:none!important;min-width:295px;flex:1}
.queue{font-size:10px!important;text-align:left!important;padding:5px 7px!important;max-height:108px;overflow:auto}
.queueitem{border:1px solid #4e391f!important;background:#21170f;border-radius:5px;padding:5px!important;margin:3px 0!important}
.queue-head{display:flex;justify-content:space-between;gap:8px;align-items:center}
.queue-name{white-space:normal;line-height:1.2}
.queue-time{white-space:nowrap;color:#e2c28d}
.qprogress{height:5px;background:#0f0b08;border-radius:5px;overflow:hidden;margin-top:4px}
.qprogress i{display:block;height:100%;background:linear-gradient(90deg,#8f6a35,#d2a75c)}
.pass-static{width:150px;min-height:58px;font-size:10px;line-height:1.25;padding:6px}
.pass-static.active{border-color:#b28a47;background:#493821}
.pass-static:disabled{opacity:.8}

/* Shop */
.shop-head{display:flex;justify-content:space-between;align-items:center;background:#17100a;border:1px solid #5d4222;border-radius:6px;padding:9px;margin-bottom:9px}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.shop-card{background:#1b130d;border:1px solid #634622;border-radius:7px;padding:10px}
.shop-card h3{margin:0 0 5px;color:#edc986;font-size:14px}
.shop-icon{font-size:28px;float:right;margin-left:6px}
.shop-price{font-size:13px;color:#f0c981;margin:8px 0}
.shop-owned{font-size:10px;color:#b9a98d}
.shop-card button{width:100%;margin-top:7px}

@media(max-width:1000px){
  .queue-area{max-width:62%;min-width:330px}
  .pass-static{width:125px}
}
@media(max-width:780px){
  .queue-area{max-width:100%;min-width:0;flex-direction:column;width:58%}
  .pass-static{width:100%;min-height:34px}
}

.build-pass-actions{display:flex;gap:5px;align-items:stretch}.build-pass-actions .pass-static{width:145px}.pass-static.extend{width:78px;background:#5b4323;border-color:#aa7f3f}.hidden{display:none!important}
.inventory-summary{display:flex;justify-content:space-between;align-items:center;background:#17100a;border:1px solid #5c4222;border-radius:6px;padding:9px;margin-bottom:9px}.inventory-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}.inventory-card{background:#1b130d;border:1px solid #644724;border-radius:7px;padding:10px}.inventory-card .inv-icon{font-size:30px;float:right}.inventory-card h3{margin:0 0 5px;color:#edc986}.inventory-card .qty{color:#e6c687;font-weight:bold}.inventory-card button{width:100%;margin-top:7px}.empty-inventory{text-align:center;padding:24px;background:#17100a;border:1px dashed #5f4323;border-radius:7px;color:#b7a68a}.extend-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.extend-option{padding:14px;text-align:center;background:#21170f;border:1px solid #73522b;border-radius:7px}.extend-option b{display:block;font-size:16px;color:#efc986;margin-bottom:4px}.uni-research-card{background:#1c140d;border:1px solid #644724;border-radius:7px;padding:9px;margin-bottom:8px}.uni-research-card.busy{border-color:#a87b3d}.uni-title{display:flex;justify-content:space-between;gap:8px}.uni-job{margin-top:6px;background:#100b08;border-radius:5px;padding:6px}

/* ===== v0.4 Build 2 ===== */
.hero-tabs{display:flex;gap:6px;margin:8px 0 10px}.hero-tabs button.active{background:#785326;border-color:#b88948}
.hero-table{width:100%;border-collapse:collapse;font-size:11px}.hero-table th,.hero-table td{padding:7px 6px;border-bottom:1px solid #49341d;text-align:left}.hero-table th{color:#e9c57f;background:#1a120c;position:sticky;top:0}.hero-table tr:hover td{background:#261a10}.hero-link{background:transparent;border:0;padding:0;font-weight:800;text-align:left}
.status-idle{color:#8ed487}.status-busy{color:#eac36e}.status-wounded{color:#ff7777}
.hero-profile{display:grid;grid-template-columns:180px 1fr;gap:12px}.profile-side{background:#17100a;border:1px solid #59401f;border-radius:7px;padding:11px}.profile-main{min-width:0}
.profile-name{font-size:19px}.profile-row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dotted #49341e;font-size:11px}
.stat-plus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:9px 0}.stat-plus{background:#21170f;border:1px solid #5e4221;border-radius:6px;padding:8px;text-align:center}.stat-plus b{display:block;font-size:17px;color:#efcb86}.stat-plus button{margin-top:5px;padding:3px 8px}
.role-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}.role-actions button{flex:1;min-width:130px}
.command-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:7px;margin-bottom:9px}.summary-card{background:#17100a;border:1px solid #5b4020;border-radius:6px;padding:8px}.summary-card b{display:block;color:#efc985;font-size:15px}
.formation-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:8px}.formation-card{background:#1b130d;border:1px solid #674923;border-radius:7px;padding:10px}.formation-card h3{margin:0;color:#efca87}.formation-head{display:flex;justify-content:space-between;gap:8px}.troop-mini{font-size:10px;line-height:1.5;color:#d3bea0}.capacitybar{height:8px;background:#100b08;border-radius:5px;overflow:hidden;margin:5px 0}.capacitybar i{display:block;height:100%;background:#a47b3e}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.form-box{background:#19110b;border:1px solid #59401e;border-radius:6px;padding:9px}.form-box h3{margin-top:0}.form-box select,.form-box input{width:100%;background:#120d09;color:#f0dec0;border:1px solid #654723;border-radius:4px;padding:6px}
.troop-edit-row{display:grid;grid-template-columns:1.6fr .7fr .7fr;gap:6px;align-items:center;padding:4px 0;border-bottom:1px dotted #49331d;font-size:10px}.troop-edit-row input{width:100%}
.gear-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.gear-slot{background:#19110b;border:1px solid #604321;border-radius:6px;padding:8px}.gear-slot select{width:100%;margin-top:5px;background:#120d09;color:#fff;border:1px solid #604321;padding:5px}
.forge-queue{background:#17100a;border:1px solid #654723;border-radius:6px;padding:9px;margin-bottom:9px}.gear-catalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:8px}.gear-card{background:#1b130d;border:1px solid #604321;border-radius:7px;padding:10px}.gear-card h3{margin:0;color:#efca87}.gear-tier{font-size:10px;padding:2px 6px;border-radius:10px;border:1px solid #7d5a2d}.gear-stat{color:#bfe0a8;margin:5px 0;font-size:11px}.gear-lock{color:#d79c7e;font-size:10px}.gear-owned{font-size:10px;color:#cab693}
@media(max-width:760px){.hero-profile{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.gear-grid{grid-template-columns:1fr}.stat-plus-grid{grid-template-columns:1fr 1fr}}

.recruit-success-card{width:min(620px,95vw);border-color:#c49448;box-shadow:0 0 35px #d59a4635,inset 0 0 22px #8a5a1925}
.recruit-success-card h2{color:#efcc88;text-align:center}.recruit-success-text{font-size:14px;line-height:1.75;background:#17100a;border:1px solid #654824;border-radius:7px;padding:14px}
.recruit-clock{font-size:18px;color:#efc879;font-variant-numeric:tabular-nums}.mission-progress i{transition:width .25s linear}.skip-hero{background:#4a2d22;border-color:#8a5237}.buildopt.disabled-reason{opacity:.55}

/* ===== v0.4 Build 2 Fix 2 ===== */
.tavern-economy{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:8px 0}
.tavern-economy>div{background:#17100a;border:1px solid #5e4221;border-radius:6px;padding:8px;text-align:center}
.tavern-economy b{display:block;color:#efc986;font-size:14px}
.normal-hero{border-color:#777!important}
.hero-random-tag{font-size:9px;padding:2px 6px;border:1px solid #777;border-radius:10px;color:#eee}
.stat-plus button{min-width:32px;font-size:14px;font-weight:800}
#testReset{border-color:#9c3d35;background:#522520;color:#ffd6cf}
.notice-seal{font-size:42px;text-align:center;margin-bottom:7px}

.city{overflow:hidden!important;border-radius:18px!important;box-shadow:inset 0 0 0 2px #2d1c10,inset 0 0 70px #0007,0 18px 40px #0008!important;background:linear-gradient(180deg,#8ab08a 0 22%,#718d58 22% 100%)!important;isolation:isolate}
.city:before{content:"";position:absolute;inset:6% 4% 5%;border-radius:42% 44% 38% 40%;background:linear-gradient(25deg,transparent 46%,#cfb88755 47% 51%,transparent 52%) 0 0/95px 72px,linear-gradient(-25deg,transparent 46%,#c8ae7b44 47% 51%,transparent 52%) 0 0/105px 85px,#9c784b;box-shadow:inset 0 0 35px #4c34226c,0 0 0 8px #3f592f75;z-index:-5}
.city.lv2:before{inset:5% 3% 4%;background:linear-gradient(25deg,transparent 46%,#d1b9906b 47% 51%,transparent 52%) 0 0/80px 62px,linear-gradient(-25deg,transparent 46%,#cdb4875f 47% 51%,transparent 52%) 0 0/88px 70px,#9b7650;box-shadow:inset 0 0 35px #43302363,0 0 0 10px #51634477}
.city.lv3:before{inset:3% 2% 3%;background:linear-gradient(25deg,transparent 45%,#d0c0a17d 46% 52%,transparent 53%) 0 0/72px 55px,linear-gradient(-25deg,transparent 45%,#cbb99b78 46% 52%,transparent 53%) 0 0/78px 60px,#88705b;box-shadow:inset 0 0 45px #32241d75,0 0 0 12px #625c487f}
.city-visual-tier{margin-left:6px;font-size:10px;padding:3px 7px;border-radius:10px;border:1px solid #78582d;background:#20160e;color:#e7c687}
.occ{filter:drop-shadow(0 7px 5px #0006);z-index:5}.building{position:relative!important;border:0!important;overflow:visible!important;background:transparent!important;box-shadow:none!important;transition:transform .18s ease,filter .18s ease}.building:hover{transform:translateY(-4px) scale(1.05);filter:brightness(1.1)}
.building .bld-art{position:absolute;left:50%;top:2px;transform:translateX(-50%);width:58px;height:46px;pointer-events:none}.building .bld-base{position:absolute;left:8px;right:8px;bottom:3px;height:17px;background:linear-gradient(#9a744d,#6a4930);border:2px solid #402918;border-radius:4px 4px 6px 6px}.building .bld-body{position:absolute;left:13px;right:13px;bottom:13px;height:24px;background:linear-gradient(90deg,#8b5b34,#c08a52 48%,#7e4b2e);border:2px solid #49301e;border-radius:3px}.building .bld-door{position:absolute;left:26px;bottom:13px;width:9px;height:14px;background:#3c2418;border:1px solid #25150e}.building .bld-roof{position:absolute;left:5px;right:5px;bottom:34px;height:14px;background:linear-gradient(#a44434,#6f281f);clip-path:polygon(12% 0,88% 0,100% 75%,83% 65%,75% 100%,25% 100%,17% 65%,0 75%)}.building .bld-flag{position:absolute;width:2px;height:19px;background:#332116;right:8px;bottom:40px}.building .bld-flag:after{content:"";position:absolute;left:2px;top:1px;width:11px;height:7px;background:#a52c2d;clip-path:polygon(0 0,100% 20%,75% 100%,0 80%);animation:flagWave 1.8s ease-in-out infinite alternate}@keyframes flagWave{from{transform:skewY(-4deg)}to{transform:skewY(7deg)}}
.building.vtier1 .bld-body{height:20px;left:17px;right:17px;background:linear-gradient(90deg,#77563b,#9b744e,#6c4b35)}.building.vtier1 .bld-roof{left:10px;right:10px;bottom:30px;height:11px;background:linear-gradient(#8e5b3a,#5e3b27)}.building.vtier1 .bld-base{left:12px;right:12px;background:#806247}.building.vtier1 .bld-flag{display:none}
.building.vtier2 .bld-body{height:25px}.building.vtier2 .bld-roof{background:linear-gradient(#994036,#64271f)}
.building.vtier3 .bld-art{width:66px;height:52px;top:-4px}.building.vtier3 .bld-base{left:3px;right:3px;height:20px;background:linear-gradient(#b19c7c,#655a4b)}.building.vtier3 .bld-body{left:9px;right:9px;height:28px}.building.vtier3 .bld-roof{left:0;right:0;bottom:39px;height:16px;background:linear-gradient(#6f3441,#382339);box-shadow:0 0 8px #dbb56c55}.building.vtier3 .bld-flag{display:block;right:4px;bottom:47px}
.building[data-btype="house"] .bld-roof{background:linear-gradient(#8c5c3e,#58402d)}.building[data-btype="lumber"] .bld-roof{background:linear-gradient(#65733d,#3f512b)}.building[data-btype="market"] .bld-roof{background:linear-gradient(#b14b42,#6c2e2a)}.building[data-btype="tavern"] .bld-roof{background:linear-gradient(#85404a,#472d44)}.building[data-btype="barracks"] .bld-roof,.building[data-btype="command"] .bld-roof{background:linear-gradient(#723038,#3d2731)}.building[data-btype="university"] .bld-roof{background:linear-gradient(#415f72,#263e4e)}
.hall{position:absolute!important;overflow:visible!important;background:transparent!important;border:0!important;box-shadow:none!important;filter:drop-shadow(0 9px 7px #0006)}.hall:before{content:"";position:absolute;left:8%;right:8%;bottom:18%;height:43%;background:linear-gradient(90deg,#745037,#b17c4c,#68432f);border:2px solid #47301f;border-radius:5px}.hall:after{content:"";position:absolute;left:-3%;right:-3%;top:15%;height:32%;background:linear-gradient(#8b362e,#54231f);clip-path:polygon(12% 0,88% 0,100% 72%,82% 61%,72% 100%,28% 100%,18% 61%,0 72%)}.city.lv1 .hall{transform:scale(.87);filter:drop-shadow(0 6px 5px #0005) saturate(.78)}.city.lv2 .hall{transform:scale(1)}.city.lv3 .hall{transform:scale(1.12);filter:drop-shadow(0 12px 9px #0008)}.city.lv3 .hall:after{background:linear-gradient(#6f3343,#31253b);box-shadow:0 0 10px #d9b26755}
.slot.empty{border:1px dashed #efd8a14d!important;background:radial-gradient(ellipse at center,#d4b78330 0 48%,transparent 51%)!important;color:#f0d39cbb!important;box-shadow:none!important;border-radius:50%!important}
.ambient-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}.cloud{position:absolute;width:80px;height:22px;border-radius:50%;background:#fff2;filter:blur(5px);animation:cloudDrift 30s linear infinite}.cloud-a{top:10%;left:-15%}.cloud-b{top:22%;left:-30%;animation-duration:43s;animation-delay:-15s;opacity:.7}@keyframes cloudDrift{to{left:115%}}.bird{position:absolute;color:#241b1788;font-size:17px;animation:birdFly 22s linear infinite}.bird-a{top:17%;left:-8%}.bird-b{top:28%;left:-20%;animation-delay:-9s;animation-duration:29s}@keyframes birdFly{to{left:110%;transform:translateY(-25px)}}.smoke{position:absolute;width:12px;height:35px;border-radius:50%;background:linear-gradient(#d6d1c240,transparent);filter:blur(4px);animation:smokeRise 4s ease-out infinite}.smoke-a{left:72%;top:44%}.smoke-b{left:25%;top:59%;animation-delay:-2s}@keyframes smokeRise{from{transform:translateY(10px) scale(.7);opacity:0}40%{opacity:.6}to{transform:translateY(-35px) scale(1.6);opacity:0}}.patrol{position:absolute;color:#34241bd0;font-size:13px;animation:patrolWalk 13s ease-in-out infinite alternate}.patrol-a{left:20%;top:70%}.patrol-b{left:64%;top:35%;animation-delay:-5s;animation-duration:17s}@keyframes patrolWalk{to{transform:translateX(80px)}}
.building.is-busy .bld-art:after{content:"";position:absolute;inset:-3px;border:2px dashed #e2c47d88;background:linear-gradient(90deg,transparent 47%,#77512b66 48% 52%,transparent 53%),linear-gradient(0deg,transparent 47%,#77512b66 48% 52%,transparent 53%);animation:scaffoldPulse 1.4s ease-in-out infinite alternate}.building.is-busy{filter:drop-shadow(0 7px 5px #0006) saturate(.75)}@keyframes scaffoldPulse{to{opacity:.55}}

/* Build 3 Fix 1: keep decorative tier label non-blocking */
.city-visual-tier{display:block;margin:3px 0 0 0;width:max-content;pointer-events:none}
#slotLayer{position:absolute;inset:0;z-index:3;pointer-events:none}
#slotLayer .slot,#slotLayer .occ{pointer-events:auto}


/* ===== v0.4 Build 3 Fix 2 — Approved Art Integration ===== */
#slotLayer{position:absolute;inset:0;z-index:5;pointer-events:none}
#slotLayer .slot,#slotLayer .occ,#hall,#wall{pointer-events:auto}
.occ{position:absolute;z-index:6;transform:translate(-50%,-62%)}
.slot.empty{
  width:88px;height:88px;display:flex;align-items:center;justify-content:center;
  border-radius:50%!important;
  border:1px dashed #d7bc87aa!important;
  background:radial-gradient(circle at center,#f0ddb34a 0 44%,transparent 45%)!important;
  color:#f8dfac!important;font-weight:700;text-shadow:0 1px 0 #4a3218;
}
.slot.empty:hover{
  background:radial-gradient(circle at center,#f3e2bf77 0 48%,transparent 49%)!important;
  box-shadow:0 0 0 2px #e1c88e33,0 0 14px #f6d48a22;
}

.building.sprite-building,
#hall.building.sprite-hall{
  position:relative!important;left:0;top:0;
  width:118px;min-height:108px;height:auto;
  padding:2px 0 24px 0;
  border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
  display:block;overflow:visible!important;
  filter:drop-shadow(0 8px 7px rgba(0,0,0,.45));
}
.building.sprite-building:hover,
#hall.building.sprite-hall:hover{transform:translateY(-3px) scale(1.03)}
.building-sprite{
  display:block;width:108px;height:auto;max-height:90px;
  margin:0 auto;image-rendering:auto;pointer-events:none;
}
#hall.building.sprite-hall{
  left:50%!important;top:46%!important;transform:translate(-50%,-50%);
  width:178px;min-height:154px;z-index:9;
}
#hall.building.sprite-hall:hover{transform:translate(-50%,-52%) scale(1.02)}
#hall .building-sprite{width:168px;max-height:132px}

.building-label{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  min-width:88px;max-width:130px;
  background:linear-gradient(#3c2616,#1a120c);
  border:1px solid #8d6734;border-radius:8px;
  padding:5px 8px 4px;
  text-align:center;box-shadow:0 3px 6px rgba(0,0,0,.35);
}
.hall-label{min-width:110px}
.building-label b{
  display:block;color:#f5ddb0;font-size:13px;line-height:1.15;
  text-shadow:0 1px 1px #000;
}
.building-label small{
  display:block;color:#ffce74;font-size:11px;line-height:1.1;margin-top:2px
}
.city .building span:not(.wall-corner){display:none!important}
.city .building > b:not(.wall-title),
.city .building > small:not(.wall-level){display:none!important}

/* approved-art style for hall and wall */
.wall-ring{
  position:absolute;left:7%;top:6%;width:86%;height:86%;
  background:transparent;border:0;color:#44351f;z-index:4;pointer-events:none
}
.wall-ring:before{
  content:"";position:absolute;inset:0;
  border:11px solid rgba(122,110,82,.88);
  border-radius:2px;
  clip-path:polygon(0 6%,6% 0,94% 0,100% 6%,100% 94%,94% 100%,6% 100%,0 94%);
  box-shadow:inset 0 0 0 3px rgba(224,209,163,.16),0 0 0 2px rgba(70,54,29,.35);
}
.wall-ui{
  position:absolute;right:14px;top:10px;display:flex;align-items:flex-start;gap:8px;
  pointer-events:auto
}
.wall-gate-sprite{
  width:72px;height:auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4));
}
.wall-tag{
  background:#2b1d12d8;border:1px solid #855d2c;border-radius:8px;
  padding:4px 8px;text-align:left;color:#f2d9aa;box-shadow:0 3px 8px rgba(0,0,0,.28)
}
.wall-tag .wall-title{display:block;font-weight:700;color:#f1d89c}
.wall-tag .wall-level{display:block;margin-top:2px;color:#ffd277;font-size:11px}
.wall-build-status{
  display:block;margin-top:4px;font-size:10px;color:#ffe0a6;background:#6a4a1c77;border-radius:5px;padding:2px 4px
}

/* construction overlay */
.is-busy .construction-overlay,
.pending-foundation .construction-overlay{
  position:absolute;inset:8px 10px 24px 10px;pointer-events:none;display:block
}
.construction-overlay:before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,transparent 0 18px,rgba(121,78,37,.7) 18px 21px,transparent 21px 39px),
    repeating-linear-gradient(0deg,transparent 0 18px,rgba(121,78,37,.7) 18px 21px,transparent 21px 39px);
  border:2px dashed rgba(225,188,112,.8);
  border-radius:10px;
  animation:scaffoldPulse 1.2s ease-in-out infinite alternate;
}
.construction-overlay .construction-tag{
  position:absolute;left:50%;top:-10px;transform:translateX(-50%);
  white-space:nowrap;background:linear-gradient(#6e4a25,#452c16);
  color:#ffe0a6;border:1px solid #b98c4d;border-radius:999px;
  padding:3px 10px;font-size:10px;font-weight:700;text-shadow:0 1px 0 #000
}
.pending-foundation .building-sprite{opacity:.48;filter:grayscale(.18) saturate(.88)}
.pending-foundation .building-label{opacity:.95}

.city .building.is-busy .building-sprite,
#hall.is-busy .building-sprite{filter:brightness(.92) saturate(.9)}

.city-visual-tier{
  display:inline-block;margin-top:6px;padding:4px 8px;border-radius:999px;
  border:1px solid #7f5a2a;background:#21160e;color:#f0cf8c;font-size:11px
}


/* ===== v0.4 Build 3 Fix 3 — layout refinement ===== */
.city{
  height:655px;position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse at center, rgba(197,166,120,.95) 0 58%, rgba(145,115,75,.92) 59% 70%, transparent 71%),
    linear-gradient(#a6b98b,#7f9362);
}
.city:before{
  content:"";position:absolute;inset:18px;
  border:13px solid #6f684c;
  clip-path:polygon(0 7%,7% 0,93% 0,100% 7%,100% 93%,93% 100%,7% 100%,0 93%);
  pointer-events:none;
}
.city.lv2:before{inset:10px;border-width:10px}
.city.lv3:before{inset:3px;border-width:8px}
.city:after{
  content:"";position:absolute;inset:42px 54px 58px 54px;pointer-events:none;
  background:
    linear-gradient(90deg, transparent 47.8%, rgba(229,214,176,.5) 48%, rgba(229,214,176,.5) 52%, transparent 52.2%),
    linear-gradient(0deg, transparent 47.8%, rgba(229,214,176,.34) 48%, rgba(229,214,176,.34) 52%, transparent 52.2%),
    radial-gradient(circle at 20% 16%, rgba(120,150,92,.38) 0 7%, transparent 7.2%),
    radial-gradient(circle at 80% 18%, rgba(120,150,92,.34) 0 6%, transparent 6.2%),
    radial-gradient(circle at 18% 82%, rgba(120,150,92,.34) 0 6%, transparent 6.2%),
    radial-gradient(circle at 81% 79%, rgba(120,150,92,.38) 0 7%, transparent 7.2%),
    repeating-linear-gradient(150deg, rgba(236,221,186,.22) 0 4px, transparent 4px 54px),
    repeating-linear-gradient(30deg, rgba(236,221,186,.18) 0 4px, transparent 4px 54px);
  border-radius:50%;
  opacity:.9;
}
.river{
  position:absolute;width:112%;height:78px;left:-6%;top:47%;
  background:linear-gradient(#7da7a7,#6d9594);
  transform:rotate(-10deg);box-shadow:0 0 0 8px rgba(130,151,111,.58);
}
.road.a{width:89%;height:22px;left:6%;top:52%;background:#cbbd8eaa}
.road.b{height:84%;width:22px;left:50%;top:7%;background:#cbbd8e88}

#slotLayer{z-index:7}
.occ{
  position:absolute;z-index:8;transform:translate(-50%,-50%);
}
.slot.empty{
  width:92px;height:92px;
  border:1px dashed #e2c68daa!important;
  background:radial-gradient(circle at center,#f3dfb35a 0 43%,transparent 44%)!important;
  color:#fbe3b0!important;
}
.building.sprite-building,
#hall.building.sprite-hall{
  background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;overflow:visible!important;
}
.building.sprite-building{
  width:116px;min-height:100px;padding:0 0 20px 0;
  filter:drop-shadow(0 8px 7px rgba(0,0,0,.36));
}
.building-sprite{
  display:block;margin:0 auto;pointer-events:none;
  width:100px;height:auto;max-height:76px;object-fit:contain;
}
#hall.building.sprite-hall{
  width:170px;min-height:138px;z-index:10;
}
#hall .building-sprite{
  width:150px;max-height:112px;
}
.building-label{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  min-width:72px;max-width:112px;
  background:linear-gradient(#3b2615,#1d120b);
  border:1px solid #84592d;border-radius:10px;
  padding:5px 7px 4px;text-align:center;
  box-shadow:0 5px 14px rgba(0,0,0,.28);
}
.hall-label{min-width:92px;max-width:126px}
.building-label b{
  display:block;color:#f4dab0;font-size:12px;line-height:1.08;
  text-shadow:0 1px 1px #000;
}
.building-label small{
  display:block;color:#ffcf73;font-size:10px;line-height:1.05;margin-top:2px;
}

.construction-overlay,
.is-busy .construction-overlay,
.pending-foundation .construction-overlay{
  position:absolute;inset:6px 10px 20px 10px;display:block;pointer-events:none;
}
.construction-overlay:before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0 15px, rgba(120,80,39,.72) 15px 18px, transparent 18px 32px),
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(120,80,39,.72) 15px 18px, transparent 18px 32px);
  border:2px dashed rgba(226,188,112,.8);
  border-radius:10px;
  animation:scaffoldPulse 1.25s ease-in-out infinite alternate;
}
.construction-overlay .construction-tag{
  position:absolute;left:50%;top:-11px;transform:translateX(-50%);
  background:linear-gradient(#6c4924,#442b15);color:#ffe2ab;
  border:1px solid #b58a4c;border-radius:999px;
  padding:2px 9px;font-size:10px;font-weight:700;
}
.pending-foundation .building-sprite{opacity:.55}
.wall-ring{
  left:7.5%;top:7%;width:84%;height:82%;z-index:5;
}
.wall-ring:before{
  border:10px solid rgba(120,111,84,.88);
  box-shadow:inset 0 0 0 3px rgba(217,201,157,.16),0 0 0 2px rgba(70,54,29,.3);
}
.wall-ui{right:18px;top:10px;gap:6px}
.wall-gate-sprite{width:58px}
.wall-tag{
  background:#2b1d12de;border:1px solid #845d2d;border-radius:8px;padding:4px 8px;
}
.wall-tag .wall-title{font-size:12px}
.wall-tag .wall-level{font-size:11px}

/* ===== v0.4 Build 3 Fix 4 — City scene rebuilt after original Linh Vương layout ===== */
.city{
  height:655px;position:relative;overflow:hidden;
  background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;
  border-radius:10px!important;box-shadow:inset 0 0 55px rgba(0,0,0,.22)!important;
}
/* turn off older procedural ground layers */
.city:before,.city:after{display:none!important}.river,.road{display:none!important}
.ambient-layer{z-index:2;opacity:.38}
#slotLayer{position:absolute;inset:0;z-index:8;pointer-events:none}
.occ{position:absolute;z-index:9;transform:translate(-50%,-50%)}
#slotLayer .occ,#slotLayer .slot{pointer-events:auto}
.slot.empty{width:58px!important;height:58px!important;border-radius:50%!important;border:1px dashed rgba(244,221,171,.7)!important;background:radial-gradient(circle,rgba(91,74,46,.28),rgba(255,255,255,.06) 58%,transparent 61%)!important;color:#f3d89d!important;font-weight:700;font-size:18px!important;box-shadow:none!important}
.slot.empty:hover{background:radial-gradient(circle,rgba(234,206,145,.38),rgba(255,255,255,.06) 60%,transparent 62%)!important}

/* Buildings are pure art on the map. No floating names/levels. */
.building.sprite-building,#hall.building.sprite-hall{background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;padding:0!important;filter:drop-shadow(0 7px 5px rgba(0,0,0,.35));}
.building.sprite-building{position:relative!important;width:114px!important;height:92px!important;display:grid!important;place-items:center!important;}
.building.sprite-building:hover{transform:translateY(-4px) scale(1.06)!important;filter:drop-shadow(0 10px 8px rgba(0,0,0,.42)) brightness(1.06)}
.building-sprite{display:block!important;width:108px!important;height:86px!important;object-fit:contain!important;margin:auto!important;pointer-events:none!important}
.building-label,.hall-label{display:none!important}
#hall.building.sprite-hall{position:absolute!important;left:50%!important;top:46%!important;transform:translate(-50%,-50%)!important;width:170px!important;height:132px!important;z-index:12!important;}
#hall.building.sprite-hall:hover{transform:translate(-50%,-53%) scale(1.04)!important}
#hall .building-sprite{width:158px!important;height:122px!important;object-fit:contain!important}

/* Visible scaffold / construction state */
.construction-overlay,.is-busy .construction-overlay,.pending-foundation .construction-overlay{position:absolute!important;inset:7px 8px 5px!important;display:block!important;pointer-events:none!important;z-index:4!important}
.construction-overlay:before{content:"";position:absolute;inset:0;border:2px dashed rgba(226,190,114,.95);border-radius:8px;background:repeating-linear-gradient(90deg,transparent 0 16px,rgba(109,70,33,.65) 16px 19px,transparent 19px 34px),repeating-linear-gradient(0deg,transparent 0 16px,rgba(109,70,33,.65) 16px 19px,transparent 19px 34px);animation:scaffoldPulse 1.1s ease-in-out infinite alternate}
.construction-tag{position:absolute!important;left:50%!important;top:-12px!important;transform:translateX(-50%)!important;white-space:nowrap!important;background:#52351edd!important;border:1px solid #c39451!important;color:#ffe2aa!important;padding:2px 7px!important;border-radius:10px!important;font-size:9px!important;font-weight:700!important}
.pending-foundation .building-sprite{opacity:.58!important;filter:saturate(.7)!important}

/* Wall is an architectural frame at the city edge, not a normal building. */
.wall-shell{position:absolute!important;inset:4px!important;z-index:15!important;pointer-events:none!important;background:transparent!important;border:0!important}
.wall-segment,.wall-tower,.wall-main-gate{position:absolute!important;display:block!important;border:0!important;padding:0!important;margin:0!important;pointer-events:auto!important;cursor:pointer!important;filter:drop-shadow(0 3px 3px rgba(0,0,0,.36))}
.wall-segment{background:linear-gradient(#b1a78e,#77705d 58%,#5e5849)!important;box-shadow:inset 0 3px rgba(236,226,197,.35),inset 0 -3px rgba(56,48,38,.28)!important}
.wall-north{left:6%;right:6%;top:3px;height:17px!important;clip-path:polygon(2% 0,98% 0,100% 100%,0 100%)}
.wall-south{left:6%;right:6%;bottom:3px;height:18px!important;clip-path:polygon(0 0,100% 0,98% 100%,2% 100%)}
.wall-west{top:5%;bottom:5%;left:3px;width:17px!important;clip-path:polygon(0 2%,100% 0,100% 100%,0 98%)}
.wall-east{top:5%;bottom:5%;right:3px;width:17px!important;clip-path:polygon(0 0,100% 2%,100% 98%,0 100%)}
.wall-segment:after{content:"";position:absolute;inset:3px;background:repeating-linear-gradient(90deg,rgba(52,45,35,.22) 0 1px,transparent 1px 24px),repeating-linear-gradient(0deg,rgba(52,45,35,.18) 0 1px,transparent 1px 14px)}
.wall-tower{width:36px!important;height:36px!important;background:linear-gradient(135deg,#8a7c61,#5c5140)!important;border:3px solid #b8a98a!important;clip-path:polygon(22% 0,78% 0,100% 22%,100% 78%,78% 100%,22% 100%,0 78%,0 22%)}
.wall-tower:after{content:"";position:absolute;inset:8px;background:#4a4034;clip-path:inherit}
.wall-tower.nw{left:0;top:0}.wall-tower.ne{right:0;top:0}.wall-tower.sw{left:0;bottom:0}.wall-tower.se{right:0;bottom:0}
.wall-main-gate{left:50%!important;bottom:-1px!important;transform:translateX(-50%)!important;width:92px!important;height:50px!important;background:url('assets/buildings/wall_2.png') center bottom/contain no-repeat!important;filter:drop-shadow(0 4px 4px rgba(0,0,0,.45))!important}
.wall-tier1 .wall-segment{filter:saturate(.75) brightness(.88)}.wall-tier1 .wall-tower{transform:scale(.82)}
.wall-tier2 .wall-segment{filter:saturate(.9)}.wall-tier2 .wall-tower{transform:scale(.92)}
.wall-tier3 .wall-segment{background:linear-gradient(#c9c1aa,#8d8779 55%,#666154)!important;box-shadow:inset 0 3px rgba(255,239,197,.4),0 0 5px rgba(214,181,103,.18)!important}.wall-tier3 .wall-tower{border-color:#d0bb88!important}
.wall-shell.is-busy .wall-segment,.wall-shell.is-busy .wall-tower{animation:scaffoldPulse 1.1s ease-in-out infinite alternate}

/* keep every scene object comfortably inside the wall */
.city.lv1 .occ,.city.lv2 .occ,.city.lv3 .occ{max-width:120px}


/* ===== v0.4 Build 3 Fix 5 — stronger city composition ===== */
#city{background-repeat:no-repeat;background-position:center center;background-size:cover!important}
.river,.road,.ambient-layer{display:none!important}
.city{height:655px;position:relative;overflow:hidden;background:#9fb18a!important}
.city:before,.city:after{display:none!important}
#slotLayer{position:absolute;inset:0;z-index:14}
.occ{position:absolute;z-index:16;transform:translate(-50%,-50%)}
.occ:before{content:"";position:absolute;left:50%;top:65%;transform:translate(-50%,-50%);width:118px;height:34px;background:radial-gradient(ellipse,rgba(39,26,14,.34) 0,rgba(53,38,20,.17) 56%,transparent 74%);filter:blur(2px);pointer-events:none}
.slot.empty{width:76px;height:76px;transform:translate(-50%,-50%);border:1px dashed rgba(238,218,173,.65)!important;background:radial-gradient(circle at center,rgba(235,220,178,.20) 0 42%,transparent 44%)!important;color:#f6e0b0!important;backdrop-filter:blur(1px)}

.building.sprite-building,
#hall.building.sprite-hall{
  position:relative!important;left:0;top:0;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;
  filter:drop-shadow(0 8px 7px rgba(0,0,0,.34));padding:0;margin:0;display:block
}
.building.sprite-building{width:112px;min-height:88px}
.building.sprite-building:hover{transform:translateY(-2px) scale(1.02)}
.building-sprite{display:block;width:98px;height:auto;max-height:78px;margin:0 auto;image-rendering:auto;pointer-events:none}
.type-house .building-sprite{width:110px;max-height:84px}
.type-farm .building-sprite{width:104px;max-height:72px}
.type-lumber .building-sprite{width:96px;max-height:74px}
.type-quarry .building-sprite{width:103px;max-height:75px}
.type-ironMine .building-sprite{width:108px;max-height:79px}
.type-warehouse .building-sprite{width:100px;max-height:80px}
.type-university .building-sprite{width:104px;max-height:80px}
.type-barracks .building-sprite{width:110px;max-height:80px}
.type-tavern .building-sprite{width:102px;max-height:72px}
.type-market .building-sprite{width:102px;max-height:72px}
.type-command .building-sprite{width:108px;max-height:78px}
.type-forge .building-sprite{width:104px;max-height:78px}

#hall.building.sprite-hall{left:50%!important;top:49%!important;transform:translate(-50%,-50%);width:178px;min-height:130px;z-index:18;filter:drop-shadow(0 10px 10px rgba(0,0,0,.40))}
#hall.building.sprite-hall:hover{transform:translate(-50%,-51.5%) scale(1.01)}
#hall:before{content:"";position:absolute;left:50%;top:78%;transform:translate(-50%,-50%);width:150px;height:38px;background:radial-gradient(ellipse,rgba(35,22,12,.40) 0,rgba(50,35,18,.18) 55%,transparent 72%);filter:blur(2px)}
#hall .building-sprite{width:162px;max-height:122px}

.construction-overlay,.is-busy .construction-overlay,.pending-foundation .construction-overlay{position:absolute;inset:0;pointer-events:none}
.construction-overlay:before{content:"";position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:86%;height:76%;border:2px dashed rgba(225,194,119,.85);background:repeating-linear-gradient(90deg,transparent 0 16px,rgba(112,76,38,.65) 16px 19px,transparent 19px 34px),repeating-linear-gradient(0deg,transparent 0 16px,rgba(112,76,38,.55) 16px 19px,transparent 19px 34px);border-radius:10px;animation:scaffoldPulse 1.25s ease-in-out infinite alternate}
.construction-overlay .construction-tag{position:absolute;left:50%;top:-8px;transform:translateX(-50%);background:linear-gradient(#6c4924,#442b15);color:#ffe2ab;border:1px solid #b58a4c;border-radius:999px;padding:2px 9px;font-size:10px;font-weight:700}
.pending-foundation .building-sprite{opacity:.65;filter:saturate(.8)}

#wall.wall-shell{position:absolute!important;inset:0!important;z-index:25!important;pointer-events:none!important;background:transparent!important;border:0!important}
.wall-segment,.wall-tower,.wall-main-gate{position:absolute!important;display:block!important;border:0!important;padding:0!important;margin:0!important;pointer-events:auto!important;cursor:pointer!important;background:transparent!important}
.wall-north,.wall-south{left:16px;right:16px;height:28px!important}
.wall-north{top:0}
.wall-south{bottom:0}
.wall-west,.wall-east{top:16px;bottom:16px;width:28px!important}
.wall-west{left:0}.wall-east{right:0}
.wall-north:before,.wall-south:before,.wall-west:before,.wall-east:before{content:"";position:absolute;inset:0;background:linear-gradient(#b4a790,#7c725f 55%,#645b49);box-shadow:inset 0 3px rgba(242,235,219,.35),inset 0 -3px rgba(58,50,40,.25)}
.wall-north:before{clip-path:polygon(0 35%,4% 10%,96% 10%,100% 35%,100% 100%,0 100%)}
.wall-south:before{clip-path:polygon(0 0,100% 0,100% 65%,96% 90%,4% 90%,0 65%)}
.wall-west:before{clip-path:polygon(35% 0,100% 0,100% 100%,35% 100%,10% 96%,10% 4%)}
.wall-east:before{clip-path:polygon(0 0,65% 0,90% 4%,90% 96%,65% 100%,0 100%)}
.wall-north:after,.wall-south:after,.wall-west:after,.wall-east:after{content:"";position:absolute;inset:6px;background:repeating-linear-gradient(90deg,rgba(75,63,47,.18) 0 1px,transparent 1px 18px),repeating-linear-gradient(0deg,rgba(75,63,47,.12) 0 1px,transparent 1px 10px)}
.wall-tower{width:44px!important;height:44px!important}
.wall-tower:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#9a8c70,#675d4b);border:4px solid #c3b394;clip-path:polygon(22% 0,78% 0,100% 22%,100% 78%,78% 100%,22% 100%,0 78%,0 22%);box-shadow:inset 0 2px rgba(255,255,255,.15)}
.wall-tower:after{content:"";position:absolute;left:12px;top:12px;right:12px;bottom:12px;background:#4f463a;clip-path:polygon(22% 0,78% 0,100% 22%,100% 78%,78% 100%,22% 100%,0 78%,0 22%)}
.wall-tower.nw{left:0;top:0}.wall-tower.ne{right:0;top:0}.wall-tower.sw{left:0;bottom:0}.wall-tower.se{right:0;bottom:0}
.wall-main-gate{left:50%!important;bottom:0!important;transform:translateX(-50%)!important;width:110px!important;height:58px!important}
.wall-main-gate:before{content:"";position:absolute;inset:0;background:linear-gradient(#94856d,#6f644f);clip-path:polygon(12% 22%,22% 0,78% 0,88% 22%,88% 100%,12% 100%);box-shadow:inset 0 3px rgba(243,237,222,.25),inset 0 -4px rgba(55,46,34,.25)}
.wall-main-gate:after{content:"";position:absolute;left:30px;right:30px;bottom:0;top:18px;background:#4b3420;border-top-left-radius:28px;border-top-right-radius:28px;box-shadow:inset 0 0 0 3px #2a1b12}

/* ensure no text labels sit on city scene */
.city .building b,.city .building small,.city .building span{display:none!important}


/* ===== v0.4 Build 3 Fix 6 — city art refinement ===== */
#city{background-repeat:no-repeat;background-position:center center;background-size:cover!important}
.river,.road,.ambient-layer{display:none!important}
.city{height:655px;position:relative;overflow:hidden;background:#9fb18a!important}
#slotLayer{position:absolute;inset:0;z-index:15}
.occ{position:absolute;z-index:16;transform:translate(-50%,-50%)}
.occ:before{content:"";position:absolute;left:50%;top:68%;transform:translate(-50%,-50%);width:106px;height:30px;background:radial-gradient(ellipse,rgba(35,24,14,.34) 0,rgba(48,33,18,.18) 56%,transparent 74%);filter:blur(2px);pointer-events:none}
.slot.empty{width:68px;height:68px;transform:translate(-50%,-50%);border:1px dashed rgba(244,225,186,.72)!important;background:radial-gradient(circle at center,rgba(243,228,190,.18) 0 42%,transparent 44%)!important;color:#f8e2b3!important;backdrop-filter:blur(1px);z-index:20}

.building.sprite-building,
#hall.building.sprite-hall{position:relative!important;left:0;top:0;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;padding:0;margin:0;display:block;filter:drop-shadow(0 8px 7px rgba(0,0,0,.32))}
.building.sprite-building{width:96px;min-height:74px}
.building.sprite-building:hover{transform:translateY(-2px) scale(1.015)}
.building-sprite{display:block;width:88px;height:auto;max-height:68px;margin:0 auto;image-rendering:auto;pointer-events:none}
.type-house .building-sprite{width:96px;max-height:74px}
.type-farm .building-sprite{width:92px;max-height:62px}
.type-lumber .building-sprite{width:86px;max-height:64px}
.type-quarry .building-sprite{width:90px;max-height:64px}
.type-ironMine .building-sprite{width:94px;max-height:68px}
.type-warehouse .building-sprite{width:88px;max-height:68px}
.type-university .building-sprite{width:92px;max-height:68px}
.type-barracks .building-sprite{width:96px;max-height:69px}
.type-tavern .building-sprite{width:88px;max-height:62px}
.type-market .building-sprite{width:88px;max-height:62px}
.type-command .building-sprite{width:94px;max-height:67px}
.type-forge .building-sprite{width:92px;max-height:67px}

#hall.building.sprite-hall{left:50%!important;top:49%!important;transform:translate(-50%,-50%);width:186px;min-height:130px;z-index:19;filter:drop-shadow(0 11px 10px rgba(0,0,0,.42))}
#hall.building.sprite-hall:hover{transform:translate(-50%,-51.2%) scale(1.01)}
#hall:before{content:"";position:absolute;left:50%;top:82%;transform:translate(-50%,-50%);width:152px;height:36px;background:radial-gradient(ellipse,rgba(35,22,12,.42) 0,rgba(50,35,18,.20) 55%,transparent 72%);filter:blur(2px)}
#hall .building-sprite{width:160px;max-height:120px}

.construction-overlay,.is-busy .construction-overlay,.pending-foundation .construction-overlay{position:absolute;inset:0;pointer-events:none}
.construction-overlay:before{content:"";position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);width:84%;height:72%;border:2px dashed rgba(232,197,116,.88);background:repeating-linear-gradient(90deg,transparent 0 15px,rgba(110,76,39,.62) 15px 18px,transparent 18px 31px),repeating-linear-gradient(0deg,transparent 0 15px,rgba(110,76,39,.52) 15px 18px,transparent 18px 31px);border-radius:10px;animation:scaffoldPulse 1.2s ease-in-out infinite alternate}
.construction-overlay .construction-tag{position:absolute;left:50%;top:-8px;transform:translateX(-50%);background:linear-gradient(#6d4924,#452b15);color:#ffe3ad;border:1px solid #b58a4c;border-radius:999px;padding:2px 9px;font-size:10px;font-weight:700}
.pending-foundation .building-sprite{opacity:.7;filter:saturate(.85)}

#wall.wall-shell{position:absolute!important;inset:0!important;z-index:28!important;pointer-events:none!important;background:transparent!important;border:0!important}
.wall-segment,.wall-tower,.wall-main-gate{position:absolute!important;display:block!important;border:0!important;padding:0!important;margin:0!important;pointer-events:auto!important;cursor:pointer!important;background:transparent!important}
.wall-north,.wall-south{left:16px;right:16px;height:var(--wall-h,26px)!important}
.wall-west,.wall-east{top:16px;bottom:16px;width:var(--wall-v,26px)!important}
.wall-north{top:0}.wall-south{bottom:0}.wall-west{left:0}.wall-east{right:0}

#wall.wall-tier1{--wall-h:22px;--wall-v:22px}
#wall.wall-tier2{--wall-h:28px;--wall-v:28px}
#wall.wall-tier3{--wall-h:34px;--wall-v:34px}

#wall.wall-tier1 .wall-segment:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,#b88b58 0 8px,#855f37 8px 10px,#a67744 10px 18px),linear-gradient(#d7b182,#8a6036);box-shadow:inset 0 2px rgba(255,242,214,.25),inset 0 -2px rgba(60,40,21,.25)}
#wall.wall-tier1 .wall-west:before,#wall.wall-tier1 .wall-east:before{background:repeating-linear-gradient(0deg,#b88b58 0 8px,#855f37 8px 10px,#a67744 10px 18px),linear-gradient(90deg,#d7b182,#8a6036)}
#wall.wall-tier1 .wall-segment:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(71,45,25,.25) 10px 11px,transparent 11px 20px)}
#wall.wall-tier1 .wall-west:after,#wall.wall-tier1 .wall-east:after{background:repeating-linear-gradient(0deg,transparent 0 10px,rgba(71,45,25,.25) 10px 11px,transparent 11px 20px)}
#wall.wall-tier1 .wall-tower{width:38px!important;height:38px!important}
#wall.wall-tier1 .wall-tower:before{content:"";position:absolute;inset:0;background:linear-gradient(#c39762,#835b33);border:4px solid #d8ba90;clip-path:polygon(18% 0,82% 0,100% 18%,100% 82%,82% 100%,18% 100%,0 82%,0 18%)}
#wall.wall-tier1 .wall-tower:after{content:"";position:absolute;left:9px;top:9px;right:9px;bottom:9px;background:#644427;clip-path:polygon(18% 0,82% 0,100% 18%,100% 82%,82% 100%,18% 100%,0 82%,0 18%)}
#wall.wall-tier1 .wall-main-gate{left:50%!important;bottom:0!important;transform:translateX(-50%)!important;width:96px!important;height:48px!important}
#wall.wall-tier1 .wall-main-gate:before{content:"";position:absolute;inset:0;background:linear-gradient(#bc9262,#7e5932);clip-path:polygon(12% 26%,22% 0,78% 0,88% 26%,88% 100%,12% 100%)}
#wall.wall-tier1 .wall-main-gate:after{content:"";position:absolute;left:27px;right:27px;bottom:0;top:15px;background:#4f341f;border-top-left-radius:22px;border-top-right-radius:22px}

#wall.wall-tier2 .wall-segment:before{content:"";position:absolute;inset:0;background:linear-gradient(#c1b39b,#7c7464 58%,#615949);box-shadow:inset 0 3px rgba(242,235,219,.35),inset 0 -3px rgba(58,50,40,.25)}
#wall.wall-tier2 .wall-segment:after{content:"";position:absolute;inset:6px;background:repeating-linear-gradient(90deg,rgba(72,62,49,.18) 0 1px,transparent 1px 18px),repeating-linear-gradient(0deg,rgba(72,62,49,.12) 0 1px,transparent 1px 10px)}
#wall.wall-tier2 .wall-north:before{clip-path:polygon(0 35%,4% 8%,96% 8%,100% 35%,100% 100%,0 100%)}
#wall.wall-tier2 .wall-south:before{clip-path:polygon(0 0,100% 0,100% 65%,96% 92%,4% 92%,0 65%)}
#wall.wall-tier2 .wall-west:before{clip-path:polygon(35% 0,100% 0,100% 100%,35% 100%,8% 96%,8% 4%)}
#wall.wall-tier2 .wall-east:before{clip-path:polygon(0 0,65% 0,92% 4%,92% 96%,65% 100%,0 100%)}
#wall.wall-tier2 .wall-tower{width:44px!important;height:44px!important}
#wall.wall-tier2 .wall-tower:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#9a8c70,#675d4b);border:4px solid #c3b394;clip-path:polygon(22% 0,78% 0,100% 22%,100% 78%,78% 100%,22% 100%,0 78%,0 22%)}
#wall.wall-tier2 .wall-tower:after{content:"";position:absolute;left:12px;top:12px;right:12px;bottom:12px;background:#4f463a;clip-path:polygon(22% 0,78% 0,100% 22%,100% 78%,78% 100%,22% 100%,0 78%,0 22%)}
#wall.wall-tier2 .wall-main-gate{left:50%!important;bottom:0!important;transform:translateX(-50%)!important;width:110px!important;height:58px!important}
#wall.wall-tier2 .wall-main-gate:before{content:"";position:absolute;inset:0;background:linear-gradient(#94856d,#6f644f);clip-path:polygon(12% 22%,22% 0,78% 0,88% 22%,88% 100%,12% 100%)}
#wall.wall-tier2 .wall-main-gate:after{content:"";position:absolute;left:30px;right:30px;bottom:0;top:18px;background:#4b3420;border-top-left-radius:28px;border-top-right-radius:28px;box-shadow:inset 0 0 0 3px #2a1b12}

#wall.wall-tier3 .wall-segment:before{content:"";position:absolute;inset:0;background:linear-gradient(#cbc5ba,#8c8373 55%,#6a6255);box-shadow:inset 0 4px rgba(250,246,236,.42),inset 0 -4px rgba(56,50,42,.26)}
#wall.wall-tier3 .wall-segment:after{content:"";position:absolute;inset:6px;background:repeating-linear-gradient(90deg,rgba(64,58,50,.18) 0 1px,transparent 1px 17px),repeating-linear-gradient(0deg,rgba(64,58,50,.12) 0 1px,transparent 1px 10px),repeating-linear-gradient(90deg,transparent 0 11px,#d4cabc 11px 16px,transparent 16px 28px)}
#wall.wall-tier3 .wall-north:before{clip-path:polygon(0 32%,3% 6%,7% 6%,7% 0,12% 0,12% 6%,17% 6%,17% 0,22% 0,22% 6%,27% 6%,27% 0,32% 0,32% 6%,37% 6%,37% 0,42% 0,42% 6%,47% 6%,47% 0,52% 0,52% 6%,57% 6%,57% 0,62% 0,62% 6%,67% 6%,67% 0,72% 0,72% 6%,77% 6%,77% 0,82% 0,82% 6%,87% 6%,87% 0,92% 0,92% 6%,97% 6%,100% 32%,100% 100%,0 100%)}
#wall.wall-tier3 .wall-south:before{clip-path:polygon(0 0,100% 0,100% 68%,97% 94%,92% 94%,92% 100%,87% 100%,87% 94%,82% 94%,82% 100%,77% 100%,77% 94%,72% 94%,72% 100%,67% 100%,67% 94%,62% 94%,62% 100%,57% 100%,57% 94%,52% 94%,52% 100%,47% 100%,47% 94%,42% 94%,42% 100%,37% 100%,37% 94%,32% 94%,32% 100%,27% 100%,27% 94%,22% 94%,22% 100%,17% 100%,17% 94%,12% 94%,12% 100%,7% 100%,7% 94%,3% 94%,0 68%)}
#wall.wall-tier3 .wall-west:before{clip-path:polygon(32% 0,94% 0,94% 3%,100% 3%,100% 8%,94% 8%,94% 13%,100% 13%,100% 18%,94% 18%,94% 23%,100% 23%,100% 28%,94% 28%,94% 33%,100% 33%,100% 38%,94% 38%,94% 43%,100% 43%,100% 48%,94% 48%,94% 53%,100% 53%,100% 58%,94% 58%,94% 63%,100% 63%,100% 68%,94% 68%,94% 73%,100% 73%,100% 78%,94% 78%,94% 83%,100% 83%,100% 88%,94% 88%,94% 93%,100% 93%,100% 100%,32% 100%,6% 97%,6% 3%)}
#wall.wall-tier3 .wall-east:before{clip-path:polygon(0 0,68% 0,94% 3%,94% 97%,68% 100%,0 100%,0 93%,6% 93%,6% 88%,0 88%,0 83%,6% 83%,6% 78%,0 78%,0 73%,6% 73%,6% 68%,0 68%,0 63%,6% 63%,6% 58%,0 58%,0 53%,6% 53%,6% 48%,0 48%,0 43%,6% 43%,6% 38%,0 38%,0 33%,6% 33%,6% 28%,0 28%,0 23%,6% 23%,6% 18%,0 18%,0 13%,6% 13%,6% 8%,0 8%,0 3%)}
#wall.wall-tier3 .wall-tower{width:52px!important;height:52px!important}
#wall.wall-tier3 .wall-tower:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#b9b1a3,#746b5e);border:5px solid #dbd1c0;clip-path:polygon(18% 0,82% 0,100% 18%,100% 82%,82% 100%,18% 100%,0 82%,0 18%)}
#wall.wall-tier3 .wall-tower:after{content:"";position:absolute;left:14px;top:14px;right:14px;bottom:14px;background:#5d5549;clip-path:polygon(22% 0,78% 0,100% 22%,100% 78%,78% 100%,22% 100%,0 78%,0 22%)}
#wall.wall-tier3 .wall-main-gate{left:50%!important;bottom:0!important;transform:translateX(-50%)!important;width:124px!important;height:64px!important}
#wall.wall-tier3 .wall-main-gate:before{content:"";position:absolute;inset:0;background:linear-gradient(#a59a89,#6f6658);clip-path:polygon(10% 20%,22% 0,78% 0,90% 20%,90% 100%,10% 100%);box-shadow:inset 0 3px rgba(255,248,236,.3),inset 0 -4px rgba(56,48,38,.25)}
#wall.wall-tier3 .wall-main-gate:after{content:"";position:absolute;left:34px;right:34px;bottom:0;top:20px;background:#4a3320;border-top-left-radius:30px;border-top-right-radius:30px;box-shadow:inset 0 0 0 3px #2a1b12}

.wall-tower.nw{left:0;top:0}.wall-tower.ne{right:0;top:0}.wall-tower.sw{left:0;bottom:0}.wall-tower.se{right:0;bottom:0}
.city .building b,.city .building small,.city .building span{display:none!important}


/* ===== Fix 7 — Fixed approved city template integration ===== */
.city{
  position:relative;
  min-height:700px;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  overflow:hidden;
}
.city .river,.city .road,.city .ambient-layer,#hall{display:none !important}
#wall{pointer-events:none;background:none !important;border:none !important;box-shadow:none !important}
.wall-segment,.wall-tower,.wall-main-gate{background:transparent !important;border:none !important;box-shadow:none !important;pointer-events:auto}
.wall-segment:hover,.wall-tower:hover,.wall-main-gate:hover{outline:2px solid rgba(255,218,128,.45);outline-offset:2px}
#slotLayer{position:absolute;inset:0;z-index:5;pointer-events:none}
#slotLayer .city-hotspot{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;background:transparent;border:none;padding:0;cursor:pointer;border-radius:18px;transition:box-shadow .15s ease, background .15s ease}
#slotLayer .city-hotspot:hover{box-shadow:0 0 0 2px rgba(255,221,156,.65), 0 0 16px rgba(0,0,0,.12);background:rgba(255,236,180,.10)}
#slotLayer .city-hotspot.busy{box-shadow:0 0 0 2px rgba(255,200,120,.45)}
#slotLayer .site-label{display:none}
#slotLayer .work-tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(59,34,18,.82);color:#f7dfaf;border:1px solid rgba(231,192,119,.6);border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.25)}
#slotLayer .work-tag small{display:block;font-size:10px;font-weight:600;opacity:.95}
#slotLayer .progress-chip{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);min-width:72px;height:8px;background:rgba(0,0,0,.18);border-radius:999px;overflow:hidden;border:1px solid rgba(255,236,180,.45)}
#slotLayer .progress-chip i{display:block;height:100%;background:linear-gradient(90deg,#f0d18d,#df9d38)}
#slotLayer .scaffold-mark{position:absolute;inset:0;border:2px dashed rgba(220,180,102,.75);border-radius:18px;background:repeating-linear-gradient(45deg, rgba(145,96,35,.10) 0 10px, rgba(220,180,102,.12) 10px 20px)}
#slotLayer .site-building-level{display:none}
.clickhint{font-size:13px}

/* Fix 7 runtime background */
.city{background-image:var(--city-bg)!important;background-color:#9fb18a!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important}
\n\n/* ===== v0.4 Build 3 Fix 8 — City Art Pass ===== */
:root{--panel-deep:#17100b;--panel-mid:#2b1d12;--bronze:#b88743;--gold:#e8c77c;--ink:#0d0906}
.center{border-color:#8c6636;box-shadow:0 14px 36px #0009,0 0 0 1px #1a0f08 inset}
.city-toolbar{min-height:76px!important;background:linear-gradient(180deg,#4a3320 0%,#2a1b10 62%,#1b120c 100%)!important;border-bottom:1px solid #a4773e!important;box-shadow:inset 0 1px #d7a96133,inset 0 -8px 18px #0004}
.city-toolbar b#cityTitle{font-family:Arial,Helvetica,sans-serif;font-size:22px;letter-spacing:.04em;color:#f2d18a;text-shadow:0 2px 2px #000}
.city-toolbar #citySub{color:#bfa57a;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.city-visual-tier{display:inline-block!important;margin-top:7px!important;border-color:#9a6d32!important;background:linear-gradient(#3a2717,#20140d)!important;color:#e7c27a!important;box-shadow:inset 0 1px #e0b66a22}
.clickhint{padding:7px 12px!important;background:linear-gradient(90deg,#17100c,#2b1c11,#17100c)!important;border-bottom:1px solid #5c3e20;color:#cdb68f!important;letter-spacing:.02em}
.city{min-height:700px!important;background-color:#829568!important;box-shadow:inset 0 0 0 1px #d5bd8733,inset 0 0 90px #0005!important}
.city:before{content:""!important;position:absolute!important;inset:0!important;border:0!important;border-radius:0!important;background:radial-gradient(circle at 50% 48%,rgba(255,225,150,.12) 0 10%,rgba(255,220,140,.045) 22%,transparent 44%),linear-gradient(180deg,rgba(255,245,205,.035),transparent 28%,transparent 74%,rgba(24,15,8,.18))!important;box-shadow:inset 0 0 70px rgba(15,9,5,.18)!important;pointer-events:none!important;z-index:2!important}
.city:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(90deg,rgba(8,5,3,.12),transparent 9%,transparent 91%,rgba(8,5,3,.12));mix-blend-mode:multiply}
#slotLayer{z-index:6!important}
#slotLayer .city-hotspot{border-radius:24px!important;outline:1px solid transparent;transition:box-shadow .16s ease,background .16s ease,outline-color .16s ease,transform .16s ease!important}
#slotLayer .city-hotspot:hover{outline-color:rgba(246,211,139,.42)!important;box-shadow:0 0 0 2px rgba(69,42,18,.28),0 0 24px rgba(245,207,124,.18)!important;background:radial-gradient(circle,rgba(255,230,167,.13),rgba(255,236,180,.03) 62%,transparent 72%)!important;transform:translate(-50%,-50%) scale(1.025)!important}
#slotLayer .city-hotspot[data-entity="hall"]{border-radius:34px!important}
#slotLayer .city-hotspot[data-entity="hall"]:after{content:"Quan Phủ";position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);padding:3px 9px;border-radius:999px;background:rgba(33,20,11,.84);border:1px solid rgba(214,167,87,.58);color:#f1d08a;font:700 10px/1.1 Georgia,serif;letter-spacing:.05em;opacity:.82;box-shadow:0 3px 10px #0005;pointer-events:none}
#slotLayer .city-hotspot[data-entity="hall"]:hover{box-shadow:0 0 0 2px rgba(239,196,111,.46),0 0 34px rgba(245,203,111,.25)!important}
#slotLayer .work-tag{background:linear-gradient(#5b381d,#2b190e)!important;border-color:#c6944e!important;box-shadow:0 6px 18px #0007!important}
#slotLayer .scaffold-mark{border-color:#d8aa62!important;background:repeating-linear-gradient(45deg,rgba(91,54,21,.14) 0 9px,rgba(221,177,98,.13) 9px 18px)!important}
.queue{background:linear-gradient(#21160e,#140d09)!important;border-color:#64431f!important;color:#d6c19d}
.build-pass-actions button{background:linear-gradient(#6f4a24,#3e2815)!important;border-color:#a87838!important;box-shadow:inset 0 1px #e1b76b33}
footer{border-top-color:#74512b!important;background:linear-gradient(#2c1d12,#17100b)!important}
@media(max-width:780px){.city{min-height:620px!important;background-size:cover!important}.city-toolbar b#cityTitle{font-size:18px}}

/* ===== Fix 9: calibrated interaction + truthful detail art ===== */
.city-hotspot{position:absolute!important;transform:translate(-50%,-50%)!important;border:0!important;background:transparent!important;border-radius:50%!important;cursor:pointer!important;pointer-events:auto!important;z-index:30!important;box-shadow:none!important;padding:0!important;min-width:0!important;min-height:0!important}
.city-hotspot:hover{background:radial-gradient(ellipse,rgba(255,221,133,.18),rgba(255,221,133,.04) 58%,transparent 72%)!important;outline:1px solid rgba(245,205,115,.38)!important;outline-offset:-2px!important}
.city-hotspot:focus-visible{outline:2px solid #f0c36b!important}
.detailtop .bigicon.articon{width:70px!important;height:62px!important;padding:2px!important;display:grid!important;place-items:center!important;overflow:hidden!important;background:linear-gradient(180deg,#65431f,#3c2817)!important;border:1px solid #855a29!important;border-radius:8px!important}
.detail-building-art{display:block!important;width:66px!important;height:58px!important;object-fit:contain!important;filter:drop-shadow(0 3px 2px rgba(0,0,0,.35))!important}
/* City wall is already painted into the approved city artwork. Only the gate is interactive. */
.wall-shell{position:absolute!important;inset:0!important;z-index:31!important;pointer-events:none!important;background:none!important;border:0!important}
.wall-shell .wall-segment,.wall-shell .wall-tower{display:none!important}
.wall-main-gate.gate-hotspot{display:block!important;left:50%!important;bottom:2.2%!important;transform:translateX(-50%)!important;width:8.5%!important;height:9.5%!important;background:transparent!important;border:0!important;box-shadow:none!important;filter:none!important;pointer-events:auto!important;cursor:pointer!important;border-radius:42% 42% 18% 18%!important}
.wall-main-gate.gate-hotspot:hover{background:radial-gradient(ellipse at center,rgba(255,214,112,.18),transparent 68%)!important;outline:1px solid rgba(245,205,115,.4)!important}
/* Fix 10: Tường Thành is represented only by a compact click target over the painted main gate. */
#slotLayer .wall-gate-hotspot{border-radius:38% 38% 18% 18%!important;z-index:34!important}
#slotLayer .wall-gate-hotspot:hover{background:radial-gradient(ellipse at center,rgba(255,214,112,.18),transparent 68%)!important;outline:1px solid rgba(245,205,115,.4)!important}

/* Fix 12 UI */
.army-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 14px}.army-tabs button{padding:11px 8px}.army-tabs button.active{box-shadow:inset 0 0 0 2px #d8a34e;background:#5a3518}.army-owned-big{margin:8px 0;padding:7px;background:#1a1009;border:1px solid #6f431d;border-radius:5px}.hero-detail-classic{display:grid;grid-template-columns:210px 1fr 250px;gap:14px;background:linear-gradient(#594e35,#3d3424);border:2px solid #80683d;padding:12px;color:#eadcb8}.hero-portrait-blank{height:235px;border:2px inset #9a8557;background:linear-gradient(135deg,#2d2a23,#171611);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#9e906e}.hero-portrait-blank span{font:700 24px Georgia}.hero-portrait-blank small{margin-top:8px}.hero-classic-info h2{margin:0 0 4px}.hero-meta{color:#d7c18d;margin-bottom:12px}.xp-line{display:flex;justify-content:space-between}.xpbar{height:12px;background:#21180d;border:1px solid #8b6b32;margin:5px 0 12px}.xpbar i{display:block;height:100%;background:linear-gradient(90deg,#66936d,#a7c88e)}.hero-pill-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.hero-pill-row button{display:flex;flex-direction:column;gap:4px;align-items:center;padding:10px}.hero-pill-row small{opacity:.8}.tax-btn{width:100%;margin-top:10px;padding:9px;font-weight:700}@media(max-width:900px){.hero-detail-classic{grid-template-columns:1fr}.army-tabs{grid-template-columns:repeat(2,1fr)}}

.market-grid,.mission-list,.login-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:10px}.mission-card.current{outline:2px solid #b98742}.mission-card button{margin-top:8px;width:100%}.giftrow small{font-size:10px;line-height:1.25;display:block;margin-top:3px}

/* ===== Fix 15 — compact topbar + Du design identity ===== */
.topbar{display:grid!important;grid-template-columns:300px minmax(470px,1fr) auto!important;align-items:center!important;gap:10px!important;padding:5px 10px!important;min-height:58px!important}
.brand{min-width:0}.brand b{font-size:16px;white-space:nowrap}.brand small{font-size:10px;white-space:nowrap}.du-seal{position:relative;overflow:hidden;background:radial-gradient(circle at 35% 30%,#f1e5c7 0 34%,#cfc0a1 35% 47%,#2b2922 48% 100%)!important;border:0!important;box-shadow:inset 0 0 0 2px #d8c69e,0 0 0 1px #17130f!important;color:#191714!important;font-family:Georgia,serif!important;font-size:13px!important;font-weight:900!important;transform:rotate(-3deg)}
.du-seal:before,.du-seal:after{content:"";position:absolute;background:#181713;border-radius:60% 35%;opacity:.82}.du-seal:before{width:30px;height:5px;left:4px;top:9px;transform:rotate(-28deg)}.du-seal:after{width:25px;height:4px;left:8px;bottom:8px;transform:rotate(20deg)}.du-seal span{position:relative;z-index:2;background:#e7dcc3cc;padding:1px 2px;border-radius:2px}
.resources{display:flex!important;flex-wrap:nowrap!important;gap:5px!important;min-width:0}.res{min-width:74px!important;padding:4px 6px!important}.top-actions{display:flex!important;flex-wrap:nowrap!important;gap:4px!important;white-space:nowrap}.top-actions button{padding:7px 9px!important;font-size:12px!important}
.lord-summary{background:linear-gradient(180deg,#3b291a,#24180f);margin:-2px -2px 0;padding:8px;border-radius:6px}.manage-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.manage-grid button{padding:18px;font-size:15px}.research-pass{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:10px}.research-pass .box{margin:0;flex:1}.research-pass-actions{display:flex;gap:6px}.mission-list-table{display:grid;gap:5px}.mission-row{display:grid;grid-template-columns:36px minmax(220px,1.4fr) minmax(220px,1fr) 110px;gap:8px;align-items:center;background:#18110b;border:1px solid #5c4223;border-radius:5px;padding:7px 8px}.mission-row.done{border-color:#8d6c37}.mission-no{font-weight:800;color:#d7b56f;text-align:center}.mission-main b{display:block;color:#edc986}.mission-main small,.mission-reward{color:#bfae91;font-size:11px}.mission-row button{width:100%}
@media(max-width:1500px){.topbar{grid-template-columns:245px minmax(420px,1fr) auto!important}.top-actions button{padding:6px 7px!important;font-size:11px!important}.res{min-width:67px!important}.brand small{display:none}}