.map{grid-template-columns:repeat(25,34px);min-width:0;max-width:none;width:max-content}
.map-wrap{max-height:62vh;overflow:auto;border-radius:12px}
.tile.village{background:#b0573a}
.tile.mine{background:var(--gold);box-shadow:0 0 0 2px #fff6 inset}
.tile.revenge{outline:3px solid var(--ember);outline-offset:-2px}
.auth{max-width:420px;margin:40px auto;display:flex;flex-direction:column;gap:12px}
.auth input{background:var(--night);border:1px solid var(--line);border-radius:8px;color:var(--sand);padding:11px 12px;font-family:inherit;font-size:15px}
.auth .err{color:var(--ember);font-size:14px;min-height:1.2em;margin:0}
.lb{width:100%;border-collapse:collapse;font-size:14px}
.lb th,.lb td{text-align:right;padding:7px 8px;border-bottom:1px solid var(--line)}
.lb tr.me td{color:var(--gold);font-weight:700}
.hero-art .emb{font-family:var(--font-display);font-size:54px;color:#fff8;}
.mini{font-size:12px;color:var(--dune);background:none;border:0;cursor:pointer;text-decoration:underline;padding:0}

/* hero art */
.hero{padding:0;overflow:hidden}
.hero>.desc,.hero>.skins,.hero>.row,.hero>div.desc{margin-inline:14px}
.hero>*:last-child{margin-bottom:14px}
.hero-art{all:unset;cursor:pointer;display:block;position:relative;aspect-ratio:2/3;max-height:420px;width:100%;overflow:hidden;background:#000}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block;transition:transform .5s ease,filter .4s}
.hero-art:hover img{transform:scale(1.04)}
.hero.locked .hero-art img{filter:grayscale(.65) brightness(.6)}
.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#0d0a12e6 100%);pointer-events:none}
.hero-art .rar{position:absolute;top:10px;right:10px;z-index:2}
.hero-state{position:absolute;top:10px;left:10px;z-index:2}
.hero-name{position:absolute;bottom:12px;right:14px;left:14px;z-index:2;display:flex;flex-direction:column;gap:2px}
.hero-name b{font-family:var(--font-display);font-size:24px;color:#fff;text-shadow:0 2px 12px #000}
.hero-name i{font-style:normal;font-family:var(--font-display);font-size:14px;color:var(--gold)}
/* skin previews until dedicated skin art arrives */
.hero-art img.skin-night{filter:hue-rotate(200deg) saturate(1.3) brightness(.85)}
.hero-art img.skin-royal{filter:sepia(.55) saturate(1.6) brightness(1.12) contrast(1.05)}
.hero-glow{position:absolute;inset:0;pointer-events:none;z-index:1}
.hero-glow.skin-royal{box-shadow:inset 0 0 0 3px #f6d27a,inset 0 0 60px #f6d27a88;animation:royal 2.4s ease-in-out infinite}
.hero-glow.skin-celestial{box-shadow:inset 0 0 0 3px #fff3c4,inset 0 0 70px #bfe6ff99;animation:royal 3s ease-in-out infinite}
.skin.locked.special{border-color:#bfe6ff;box-shadow:0 0 12px #bfe6ff66}
.hero-glow.skin-night{box-shadow:inset 0 0 0 3px #7f9bd6,inset 0 0 60px #3a4f9a99}
@keyframes royal{50%{box-shadow:inset 0 0 0 3px #fff3c4,inset 0 0 90px #f6d27acc}}
.hero-full{position:fixed;inset:0;z-index:70;background:#000d;display:grid;place-items:center;padding:16px}
.hero-full img{max-height:92vh;max-width:100%;border-radius:14px;box-shadow:0 10px 60px #000}
/* login backdrop */
.auth-bg{position:fixed;inset:0;z-index:-1;background:url(/heroes/zeina.webp) center 20%/cover no-repeat}
.auth-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#2b1b0e88,#2b1b0edd 50%,#2b1b0e)}
@media (prefers-reduced-motion:reduce){.hero-glow.skin-royal{animation:none}.hero-art img{transition:none}}

/* ---------- city scene ---------- */
.city-scroll{overflow-x:auto;overflow-y:hidden;margin:0 -14px;padding:0 0 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;direction:ltr}
.city-scroll::-webkit-scrollbar{display:none}
.city{position:relative;isolation:isolate;z-index:0;width:100%;min-width:760px;max-width:1100px;margin:4px auto 0;aspect-ratio:1400/876;background:url(/b/ground.webp) center/cover no-repeat;border-radius:18px;box-shadow:0 18px 40px #0008,inset 0 0 60px #00000040;user-select:none;-webkit-user-select:none;direction:rtl}
.walkers{position:absolute;inset:0;pointer-events:none}
.walker{position:absolute;width:2.6%;transform:translate(-50%,-100%);transition:none}
.walker img{width:100%;display:block;filter:drop-shadow(0 3px 2px #0007);animation:step .5s ease-in-out infinite alternate;transform-origin:50% 100%}
.walker.flip img{animation-name:stepf}
.walker.flip img{transform:scaleX(-1)}
.walker:nth-child(2n) img{animation-duration:.42s}.walker:nth-child(3n) img{animation-duration:.58s}
@keyframes step{0%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(0) translateY(-7%) scaleY(1.02)}100%{transform:rotate(4deg) translateY(0)}}
@keyframes stepf{0%{transform:scaleX(-1) rotate(-4deg)}50%{transform:scaleX(-1) translateY(-7%) scaleY(1.02)}100%{transform:scaleX(-1) rotate(4deg)}}
.city svg.ground{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.plot{all:unset;position:absolute;transform:translate(-50%,-100%);cursor:pointer;display:block;transition:transform .18s ease,filter .18s ease;-webkit-tap-highlight-color:transparent}
.plot img{width:100%;display:block;filter:drop-shadow(0 10px 10px #0008);pointer-events:none}
.plot:hover,.plot:focus-visible{transform:translate(-50%,-100%) translateY(-5px);filter:drop-shadow(0 0 14px #ffd98a88)}
.plot:active{transform:translate(-50%,-100%) scale(.97)}
.plot.ghost img{filter:grayscale(1) brightness(.45) drop-shadow(0 6px 6px #0006);opacity:.55}
.plot .tag{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);white-space:nowrap;background:#2b1b0ee6;border:1px solid #5a4422;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600;color:var(--sand);display:flex;gap:6px;align-items:center;box-shadow:0 3px 10px #0007}
.plot .tag b{color:var(--gold);font-variant-numeric:tabular-nums}
.plot .tag.new{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.plot .tag.can::after{content:"";width:8px;height:8px;border-radius:50%;background:#5ee06e;box-shadow:0 0 8px #5ee06e}
.plot .work{position:absolute;inset:auto 0 22% 0;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.ring{--p:0;width:46px;height:46px;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--p)*1%),#0009 0);display:grid;place-items:center;box-shadow:0 0 0 3px #2b1b0ecc,0 0 18px #e0a93f88}
.ring span{width:36px;height:36px;border-radius:50%;background:#2b1b0e;display:grid;place-items:center;font-size:18px}
.ring span svg{width:20px;height:20px}
.work .t{background:#2b1b0ee6;border-radius:6px;padding:1px 7px;font-size:11px;color:var(--turq);font-weight:700}
.plot.building img{animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-2px)}}
.dust{position:absolute;left:50%;bottom:20%;width:70%;height:30%;transform:translateX(-50%);pointer-events:none;background:radial-gradient(ellipse at center,#e9cf9a66,transparent 70%);animation:dust 1.8s ease-in-out infinite;filter:blur(4px)}
@keyframes dust{50%{opacity:.35;transform:translateX(-50%) scale(1.15)}}
.floaty{position:absolute;transform:translate(-50%,-50%);pointer-events:none;font-weight:800;font-size:14px;color:#fff;text-shadow:0 2px 6px #000;display:flex;gap:4px;align-items:center;animation:floatUp 1.6s ease-out forwards;z-index:150}
.floaty i{width:16px;height:16px;border-radius:50%;display:inline-block}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-260%) scale(1)}}
.city-hint{text-align:center;color:var(--dune);font-size:12px;margin:14px 0 8px}

/* building sheet */
.sheet-img{width:62%;max-width:240px;margin:-6px auto 0;display:block;filter:drop-shadow(0 12px 14px #000a)}
.sheet-lv{display:flex;justify-content:center;gap:10px;align-items:center;font-size:13px;color:var(--dune)}
.sheet-lv b{font-size:15px;color:var(--gold)}
.sheet-lv .arrow{color:var(--turq)}

/* ---------- activity dock ---------- */
.dock{position:fixed;left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom,0px));z-index:29;pointer-events:none}
.dock-in{max-width:880px;margin:0 auto;padding:0 10px 6px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;pointer-events:auto}
.dock-in::-webkit-scrollbar{display:none}
.job{flex:none;display:flex;align-items:center;gap:8px;background:#2b1b0eef;border:1px solid #5a4422;border-radius:12px;padding:5px 10px 5px 6px;min-width:150px;cursor:pointer;box-shadow:0 4px 14px #0008;font-size:12px}
.job img,.job .ji{width:30px;height:30px;object-fit:contain;flex:none}
.job .ji{display:grid;place-items:center;background:var(--tent-2);border-radius:8px}
.job .ji svg{width:20px;height:20px}
.job .jt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.job .jt b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.job .jb{height:4px;border-radius:4px;background:#0008;overflow:hidden}
.job .jb i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#f3cf7a)}
.job.war .jb i{background:linear-gradient(90deg,var(--ember),#f39a7a)}
.job.train .jb i{background:linear-gradient(90deg,var(--turq),#8fe3d8)}
.job .jtime{color:var(--turq);font-weight:700;font-variant-numeric:tabular-nums}
.job.idle{opacity:.85;border-style:dashed}
.wrap{padding-block:12px 170px}

/* settings */
.icon-btn{background:var(--tent-2);border:1px solid var(--line);border-radius:999px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;color:var(--sand)}
.icon-btn svg{width:18px;height:18px}
.brand-right{display:flex;gap:8px;align-items:center}
.set-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.switch{position:relative;width:46px;height:26px;border-radius:999px;background:var(--line);border:0;cursor:pointer;flex:none}
.switch::after{content:"";position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:right .15s}
.switch[aria-checked="true"]{background:var(--turq)}
.switch[aria-checked="true"]::after{right:23px}

/* ---------- map polish ---------- */
.map{background:radial-gradient(circle at 50% 40%,#3a2c1a,#1c140c);gap:3px;padding:10px;border-color:#5a4422;box-shadow:inset 0 0 60px #000a}
.map .tile{background:linear-gradient(135deg,#c9a86a,#a8864f);border-color:#00000040;border-radius:5px;box-shadow:inset 0 -2px 0 #0002}
.map .tile:nth-child(7n){background:linear-gradient(135deg,#c3a064,#9e7d48)}
.map .tile:nth-child(11n){background:linear-gradient(135deg,#d2b277,#ae8c55)}
.map .tile:hover{filter:brightness(1.15);z-index:2;transform:scale(1.12)}
.map .tile.village,.map .tile.mine{background:radial-gradient(circle at 50% 70%,#e6c58a,#a87f45)}
.map .tile.village img,.map .tile.mine img{width:130%;height:130%;object-fit:contain;margin-top:-30%;filter:drop-shadow(0 3px 3px #0009)}
.map .tile.village:not(.mine) img{filter:hue-rotate(160deg) saturate(.9) drop-shadow(0 3px 3px #0009)}
.map .tile.mine{box-shadow:0 0 0 2px var(--gold),0 0 16px #e0a93f}
.map .tile.camp{background:linear-gradient(135deg,#9a6f45,#6e4b2c)}
.map .tile.oasis{background:radial-gradient(circle,#59b39a,#2f7a66)}
.map .tile.ruin{background:radial-gradient(circle,#fff0b8,#c9a25a)}
@media (prefers-reduced-motion:reduce){.plot.building img,.dust,.floaty{animation:none}}

/* ---------- iso map ---------- */
.map-box{position:relative}
.map-box .map-wrap{direction:ltr;height:62vh;max-height:none;overflow:auto;border-radius:14px;border:1px solid #5a4422;background:radial-gradient(ellipse at 50% 45%,#5a4426,#22180e 75%);box-shadow:inset 0 0 50px #000b;cursor:grab;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:thin}
.map-box .map-wrap.drag{cursor:grabbing}
.iso{display:block;user-select:none;-webkit-user-select:none}
.iso [data-tile]{cursor:pointer}
.iso .gr polygon{stroke:#00000014;stroke-width:.6}
.iso polygon.own{fill:#e0a93f55;stroke:#ffd27a;stroke-width:2.5;animation:pulse 2.4s ease-in-out infinite}
.iso polygon.foe{fill:#d9603f33;stroke:#d9603f;stroke-width:1.6}
.iso polygon.sel{fill:#ffffff30;stroke:#fff;stroke-width:2;stroke-dasharray:5 4;pointer-events:none;animation:dash 1s linear infinite}
.iso .obj.cool{opacity:.5}
.iso .lbl{font:700 11px "IBM Plex Sans Arabic",sans-serif;fill:#fff;text-anchor:middle;paint-order:stroke;stroke:#2b1b0e;stroke-width:3px;pointer-events:none}
.iso .lbl.me{fill:#ffd27a;font-size:12px}
.iso .bt{font:700 9px sans-serif;fill:#ffd27a;text-anchor:middle}
.iso .fire{animation:flick .5s ease-in-out infinite alternate}
.iso .glow{animation:pulse 2s ease-in-out infinite}
.iso .spark{animation:pulse 1.2s ease-in-out infinite}
.iso .rv{fill:#d9603f55;stroke:#ff6b4a;stroke-width:2;animation:pulse 1s ease-in-out infinite}
.iso .route{stroke-width:2.5;stroke-dasharray:7 6;stroke-linecap:round;animation:dash .8s linear infinite;pointer-events:none}
.iso .route.go{stroke:#ff6b4a}.iso .route.back{stroke:#45b5a7;animation-direction:reverse}
.iso .tgt{fill:none;stroke:#ff6b4a;stroke-width:2;animation:pulse 1s infinite;pointer-events:none}
@keyframes pulse{50%{opacity:.45}}
@keyframes flick{to{opacity:.55}}
@keyframes dash{to{stroke-dashoffset:-22}}
.map-pop{position:absolute;left:8px;right:8px;bottom:8px;animation:popIn .18s ease-out}
.map-pop .card{margin:0!important;background:#2b1b0ef2;box-shadow:0 8px 30px #000a}
@keyframes popIn{from{transform:translateY(12px);opacity:0}}
.zoom{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px}
.zoom .icon-btn{font-size:20px;font-weight:700;background:#2b1b0edd}
@media (prefers-reduced-motion:reduce){.iso *{animation:none!important}}

/* ---------- battle scene ---------- */
.battle{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;overflow:auto;animation:bIn .25s ease-out}
.battle.out{opacity:0;transition:opacity .25s}
@keyframes bIn{from{opacity:0}}
.b-bg{position:fixed;inset:0;background:radial-gradient(ellipse at 50% 40%,#5a3a1c 0%,#1d120a 55%,#07040a 100%)}
.battle.loss .b-bg{background:radial-gradient(ellipse at 50% 40%,#4a1c1c 0%,#1a0a0d 55%,#07040a 100%)}
.b-sand{position:fixed;inset:-20%;background-image:radial-gradient(#e9cf9a 1px,transparent 1.5px);background-size:46px 46px;opacity:.18;animation:sand 6s linear infinite}
@keyframes sand{to{transform:translate(-46px,23px)}}
.b-in{position:relative;width:min(560px,100%);text-align:center;display:flex;flex-direction:column;gap:14px}
.battle.hit .b-in{animation:shake .4s}
@keyframes shake{20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-1px)}}
.b-title{color:var(--sand);font-weight:700;font-size:15px;margin:0;opacity:.9}
.b-field{display:grid;grid-template-columns:1fr 70px 1fr;align-items:end;gap:6px;min-height:200px}
.b-side{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.b-side b{font-family:"Reem Kufi",sans-serif;font-size:18px;color:#fff}
.b-side .num{color:var(--gold);font-weight:800;font-size:20px}
.b-hero{width:92px;height:120px;object-fit:cover;object-position:top;border-radius:14px;border:2px solid var(--gold);box-shadow:0 0 24px #e0a93f88;animation:heroIn .5s ease-out}
@keyframes heroIn{from{transform:translateY(20px) scale(.9);opacity:0}}
.b-army{display:flex;gap:4px}
.bu{width:40px;height:40px;filter:drop-shadow(0 4px 6px #000)}
.bu.l{animation:chargeL 1.1s cubic-bezier(.5,0,.8,.4) both}
.bu.r{animation:chargeR 1.1s cubic-bezier(.5,0,.8,.4) both}
.bu.l img{transform:scaleX(-1)}
@keyframes chargeL{0%{transform:translateX(60px);opacity:0}20%{opacity:1}100%{transform:translateX(-14px)}}
@keyframes chargeR{0%{transform:translateX(-60px);opacity:0}20%{opacity:1}100%{transform:translateX(14px)}}
.battle.done.win .foe .bu,.battle.done.loss .me .bu{animation:fall .5s ease-in forwards}
@keyframes fall{to{transform:translateY(14px) rotate(25deg);opacity:.25;filter:grayscale(1)}}
.b-pow{width:100%;max-width:150px;height:8px;border-radius:8px;background:#0008;overflow:hidden}
.b-pow i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),#ffe9a8);transition:width 1s ease-out .2s}
.foe .b-pow i{background:linear-gradient(90deg,#d9603f,#ff9a7a)}
.battle.done .b-pow i{width:var(--w)}
.b-clash{align-self:center;width:64px;height:64px;opacity:0;transform:scale(2.2)}
.battle.hit .b-clash{animation:clash .7s ease-out forwards}
@keyframes clash{0%{opacity:0;transform:scale(2.2) rotate(-30deg)}40%{opacity:1;transform:scale(1) rotate(0);filter:drop-shadow(0 0 18px #ffd27a)}100%{opacity:.9;transform:scale(1)}}
.b-res{position:relative;height:84px;display:grid;place-items:center;opacity:0;transform:scale(.4)}
.battle.done .b-res{animation:resIn .55s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes resIn{to{opacity:1;transform:scale(1)}}
.b-res h2{position:relative;margin:0;font-family:"Reem Kufi",sans-serif;font-size:54px;line-height:1;color:#ffd27a;text-shadow:0 0 22px #e0a93fcc,0 4px 0 #6b4310}
.battle.loss .b-res h2{color:#ff8a6a;text-shadow:0 0 22px #d9603faa,0 4px 0 #5a1a10;font-size:44px}
.b-rays{position:absolute;width:260px;height:260px;background:repeating-conic-gradient(#ffd27a33 0 8deg,transparent 8deg 22deg);border-radius:50%;mask:radial-gradient(circle,#000 20%,transparent 68%);-webkit-mask:radial-gradient(circle,#000 20%,transparent 68%);animation:spin 9s linear infinite}
.battle.loss .b-rays{display:none}
@keyframes spin{to{transform:rotate(1turn)}}
.b-loot{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;opacity:0}
.battle.done .b-loot{animation:resIn .4s ease-out .25s forwards;transform:scale(.6)}
.b-loot>div{background:#2b1b0edd;border:1px solid #5a4422;border-radius:12px;padding:8px 14px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:84px}
.b-loot i{width:14px;height:14px;border-radius:50%}
.b-loot span{font-size:12px;color:var(--dune)}
.b-loot b{font-size:20px;color:#fff}
.b-body{font-size:13px;color:var(--dune);margin:0;opacity:0}
.battle.done .b-body{animation:resIn .4s ease-out .4s forwards}
.battle .row .btn{min-width:150px}
@media (prefers-reduced-motion:reduce){.battle *{animation-duration:.01s!important;transition:none!important}}

/* ---------- shop art ---------- */
.pack{position:relative;background:radial-gradient(circle at 50% 30%,#3a2a18,var(--tent) 70%);overflow:hidden}
.pack .pk-img{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 8px 10px #000a);animation:float 3.2s ease-in-out infinite;transition:transform .2s}
.pack:hover .pk-img{transform:scale(1.08) rotate(-3deg)}
.pack:nth-child(2) .pk-img{animation-delay:-.6s}.pack:nth-child(3) .pk-img{animation-delay:-1.2s}.pack:nth-child(4) .pk-img{animation-delay:-1.8s}.pack:nth-child(5) .pk-img{animation-delay:-2.4s}
.pack.best{box-shadow:0 0 0 1px var(--gold),0 0 24px #e0a93f44}
.pack.best::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 80%,#ffd27a1f 88%,transparent 96%);animation:spin 5s linear infinite;pointer-events:none}
.pack>*{position:relative}
.pack .tag{position:absolute;top:8px;inset-inline-start:8px;z-index:2}
@keyframes float{50%{transform:translateY(-5px)}}
.shop-card{display:grid;grid-template-columns:84px 1fr;column-gap:12px;align-items:center}
.shop-card .sc-img{grid-row:1/span 3;width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 6px 8px #000a)}
@media (prefers-reduced-motion:reduce){.pack .pk-img,.pack.best::before{animation:none}}

.ri{width:18px;height:18px;object-fit:contain;vertical-align:-4px;margin-inline-end:3px;filter:drop-shadow(0 1px 2px #0008)}
.ri.lg{width:30px;height:30px;margin:0}
.cost span{display:inline-flex;align-items:center;gap:2px}
.gold-pill .ri{width:20px;height:20px;margin:0}

.uimg{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 5px #0009)}
.unit-icon{width:86px!important;height:96px!important;background:radial-gradient(circle at 50% 60%,#6b4a26,var(--tent-2) 70%)!important;border-radius:12px!important;padding:4px}
.bu{width:58px!important;height:66px!important}
.job .ji .uimg{width:26px;height:26px}

.b-field{grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr)!important}
.b-army{justify-content:center;gap:0!important}
@media (max-width:520px){.bu{width:42px!important;height:50px!important}.b-hero{width:72px!important;height:94px!important}}
.b-body{overflow-wrap:anywhere;padding:0 8px}
.b-in{overflow:hidden}

.feat{position:relative;border-radius:16px;overflow:hidden;min-height:220px;margin:12px 0;border:1px solid #f6d27a;box-shadow:0 0 30px #e0a93f44;display:flex;align-items:flex-end}
.feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.feat::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#1a0f06f2 10%,#1a0f0666 55%,transparent)}
.feat-in{position:relative;z-index:1;padding:14px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.feat-in h3{margin:0;font-family:var(--font-display);font-size:22px;color:#fff3c4;text-shadow:0 2px 10px #000}
.feat-in .tag{background:linear-gradient(90deg,#bfe6ff,#f6d27a);color:#2a1d05;border-radius:999px;padding:1px 10px;font-size:12px;font-weight:700}

/* ---------- governor ---------- */
.gpick{display:flex;gap:6px}.gpick .on{background:var(--gold);color:var(--gold-ink);border-radius:999px;padding:2px 10px}
.gov-stage{display:grid;grid-template-columns:80px 1fr 80px;gap:10px;align-items:center;margin:6px 0 10px}
.gov-col{display:flex;flex-direction:column;gap:10px}
.gslot{all:unset;cursor:pointer;position:relative;aspect-ratio:1;border-radius:14px;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,var(--rc,#777)55,#1d1209 75%);box-shadow:inset 0 0 0 2px var(--rc,#777),0 6px 14px #0008;transition:transform .15s}
.gslot:hover{transform:translateY(-2px)}
.gslot img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 4px 4px #000a)}
.gslot .glv{position:absolute;top:4px;inset-inline-start:6px;font-size:12px;color:#fff;background:#000a;border-radius:999px;padding:0 6px}
.gslot .gname{position:absolute;bottom:-2px;left:50%;transform:translate(-50%,50%);font-size:11px;white-space:nowrap;background:#2b1b0ee6;border-radius:999px;padding:0 8px;border:1px solid var(--rc,#777)}
.r0{--rc:#a7a7a7}.r1{--rc:#4aa3ff}.r2{--rc:#b06cff}.r3{--rc:#f0b030}.r4{--rc:#ff5a4a}
.gslot.r3,.gslot.r4{animation:rglow 2.4s ease-in-out infinite}
@keyframes rglow{50%{box-shadow:inset 0 0 0 2px var(--rc),0 0 22px var(--rc)}}
.rar-name{color:var(--rc);font-size:.8em}
.gov-portrait{position:relative;aspect-ratio:2/3;border-radius:18px;overflow:hidden;box-shadow:0 10px 30px #000a,inset 0 0 0 2px #6e4c27}
.gov-portrait img{width:100%;height:100%;object-fit:cover;animation:breathe 5s ease-in-out infinite;transform-origin:50% 90%}
.gov-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#1a0f06ee,transparent 40%)}
.gov-name{position:absolute;bottom:8px;left:0;right:0;text-align:center;z-index:2;display:flex;flex-direction:column}
.gov-name b{font-family:var(--font-display);font-size:20px;color:#fff3c4}.gov-name small{color:var(--gold)}
.gov-aura{position:absolute;inset:0;z-index:1;pointer-events:none}
.set-dunes .gov-aura{box-shadow:inset 0 0 0 3px #f0b030,inset 0 0 50px #f0b03077}
.set-knight .gov-aura{box-shadow:inset 0 0 0 3px #7f9bd6,inset 0 0 60px #3a4f9aaa}
.set-sultan .gov-aura{box-shadow:inset 0 0 0 3px #ff5a4a,inset 0 0 70px #ffcf6a99;animation:royal 2.4s ease-in-out infinite}
.set-knight img{filter:hue-rotate(200deg) saturate(1.2) brightness(.9)}
.set-sultan img{filter:sepia(.35) saturate(1.5) brightness(1.08)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:#00000040;border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:12px}.chip b{color:var(--turq)}
.gov-total{justify-content:center;margin:8px 0}
.mats{display:flex;justify-content:center;gap:16px;font-size:14px;margin:6px 0}.mats b{color:var(--gold)}
.chest-card{display:grid;grid-template-columns:90px 1fr;gap:10px;align-items:center}
.chest-card img{width:90px;height:90px;object-fit:contain;animation:float 3s ease-in-out infinite;filter:drop-shadow(0 6px 8px #000a)}
.set-card.on{border-color:var(--gold);box-shadow:0 0 18px #e0a93f44}
.gear-sheet{width:130px;height:130px;margin:0 auto;border-radius:20px;display:grid;place-items:center;background:radial-gradient(circle,var(--rc)66,transparent 70%);box-shadow:inset 0 0 0 2px var(--rc)}
.gear-sheet img{width:80%;filter:drop-shadow(0 6px 8px #000a)}
@keyframes breathe{50%{transform:scale(1.025)}}
.skin-stats{font-size:12px;color:var(--turq)}

/* ---------- living village fx ---------- */
.fx{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;border-radius:18px}
.fx>i,.fx>span{position:absolute;display:block}
.fall{background:repeating-linear-gradient(180deg,#fff0 0 5px,#ffffffcc 5px 7px,#fff0 7px 13px),repeating-linear-gradient(90deg,#fff0 0 3px,#bff6ff55 3px 5px);background-size:100% 26px,100% 100%;animation:fall .5s linear infinite;mix-blend-mode:screen;opacity:.6;filter:blur(.5px);border-radius:30% 30% 45% 45%;-webkit-mask:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);mask:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent)}
@keyframes fall{to{background-position:0 26px,0 0}}
.mist{width:5%;height:3%;transform:translate(-50%,-50%);background:radial-gradient(#ffffffaa,transparent 70%);animation:mist 1.6s ease-in-out infinite;filter:blur(2px)}
@keyframes mist{50%{transform:translate(-50%,-60%) scale(1.25);opacity:.6}}
.pond{background:radial-gradient(ellipse 20% 30% at 30% 40%,#ffffff55,transparent),radial-gradient(ellipse 15% 25% at 70% 60%,#ffffff44,transparent);background-size:200% 200%;mix-blend-mode:screen;animation:pond 6s ease-in-out infinite alternate;border-radius:50%;filter:blur(2px)}
@keyframes pond{to{background-position:100% 100%}}
.jet{width:0;height:0}
.jet i{position:absolute;width:5px;height:5px;border-radius:50%;background:#e6fbff;box-shadow:0 0 4px #bff6ff;animation:drop 1.25s cubic-bezier(.3,.6,.6,1) infinite;animation-delay:var(--d);opacity:0}
@keyframes drop{0%{transform:translate(0,0);opacity:.95}45%{transform:translate(calc(var(--dx)*10px),-34px)}100%{transform:translate(calc(var(--dx)*26px),4px);opacity:0}}
.lamp{width:2.2%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(#ffd27a99,#ff9a2a33 45%,transparent 70%);mix-blend-mode:screen;animation:flick 2.2s ease-in-out infinite}
@keyframes flick{30%{opacity:.55}60%{opacity:1}80%{opacity:.75}}
.mote{width:3px;height:3px;border-radius:50%;background:#fff3c4;opacity:0;animation:mote 9s linear infinite}
@keyframes mote{10%{opacity:.8}90%{opacity:.6}100%{transform:translate(60px,-40px);opacity:0}}
.smoke{width:0;height:0}.smoke i{position:absolute;width:18px;height:18px;border-radius:50%;background:radial-gradient(#7a6a5acc,transparent 70%);animation:smoke 3.2s ease-out infinite;opacity:0}
.smoke i:nth-child(2){animation-delay:1.05s}.smoke i:nth-child(3){animation-delay:2.1s}
@keyframes smoke{0%{transform:translate(0,0) scale(.4);opacity:.8}100%{transform:translate(14px,-60px) scale(2.2);opacity:0}}
.birds{position:absolute;top:6%;left:-10%;width:7%;fill:none;stroke:#3a2410;stroke-width:1.6;stroke-linecap:round;animation:birds 26s linear infinite;opacity:.75}
.birds path{animation:flap .5s ease-in-out infinite alternate;transform-origin:center}
@keyframes birds{0%{transform:translate(0,0)}100%{transform:translate(1700%,90%)}}
@keyframes flap{to{transform:scaleY(.4)}}
.rays{inset:0!important;background:conic-gradient(from 200deg at 105% -10%,transparent 0deg,#ffe1a033 8deg,transparent 14deg,#ffe1a022 22deg,transparent 30deg);animation:rays 7s ease-in-out infinite alternate;mix-blend-mode:screen}
@keyframes rays{to{opacity:.4}}
/* heroes come alive */
.hero-art img{animation:breathe 5.5s ease-in-out infinite;transform-origin:50% 95%}
.hero-art .pfx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.pfx i{position:absolute;bottom:-6px;width:5px;height:5px;border-radius:50%;opacity:0;animation:rise 6s linear infinite}
@keyframes rise{8%{opacity:.9}100%{transform:translate(var(--dx),-340px) rotate(220deg);opacity:0}}
.pfx.zeina i{background:#ffcf6a;box-shadow:0 0 6px #ffb02a}
.pfx.saqr i{background:#e9cf9a;box-shadow:0 0 4px #c9a466}
.pfx.najma i{background:#d9c9ff;box-shadow:0 0 8px #a98cff;border-radius:1px;transform:rotate(45deg)}
.pfx.freya i{background:#fff;box-shadow:0 0 6px #bfe6ff;width:6px;height:6px}
.pfx.rin i{background:#ff9ec0;border-radius:60% 0;box-shadow:0 0 6px #b06cff}
.unit-icon .uimg{animation:breathe 4s ease-in-out infinite;transform-origin:50% 100%}
@media (prefers-reduced-motion:reduce){.fx *,.pfx i,.hero-art img,.walker img{animation:none!important}}

/* ---------- wardrobe ---------- */
.t0{--tc:#a7a7a7}.t1{--tc:#4aa3ff}.t2{--tc:#b06cff}.t3{--tc:#f0b030}.t4{--tc:#ff5a4a}
.tier{display:inline-block;font-size:11px;font-weight:700;color:#1a0f06;background:var(--tc);border-radius:999px;padding:0 9px}
.cos-cats{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.cos-cats .on{background:var(--gold);color:var(--gold-ink);border-radius:999px;padding:3px 12px;white-space:nowrap}
.cos-cats .mini{white-space:nowrap}
.cos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.cos-card{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:5px;align-items:flex-start;background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--tc) 30%,transparent),var(--tent) 60%);border:1px solid var(--tc);border-radius:14px;padding:8px;position:relative;font-size:13px}
.cos-card.on{box-shadow:0 0 0 2px var(--gold),0 0 18px #e0a93f66}
.cos-card .chips .chip{font-size:10.5px;padding:1px 6px}
.cos-img{width:100%;aspect-ratio:1;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:#00000033}
.cos-img img{width:100%;height:100%;object-fit:contain}
.cos-img.hero img,.cos-img.gov img{object-fit:cover;object-position:50% 12%}
.cos-price{color:var(--gold);font-weight:700}
.cos-card.t3,.cos-card.t4{animation:rglow2 2.6s ease-in-out infinite}
@keyframes rglow2{50%{box-shadow:0 0 16px var(--tc)}}
.cos-pv{width:100%;max-width:300px;aspect-ratio:3/4;margin:0 auto;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 2px var(--tc),0 0 30px color-mix(in srgb,var(--tc) 50%,transparent);display:grid;place-items:center;background:radial-gradient(circle,color-mix(in srgb,var(--tc) 35%,transparent),#00000055 70%)}
.cos-pv img{width:100%;height:100%;object-fit:contain;animation:breathe 5s ease-in-out infinite}
.cos-pv.hero img,.cos-pv.gov img{object-fit:cover;object-position:50% 10%}
.cos-img img.skin-night,.cos-pv img.skin-night,.cos-img img.set-knight,.cos-pv img.set-knight{filter:hue-rotate(200deg) saturate(1.3) brightness(.85)}
.cos-img img.skin-royal,.cos-pv img.skin-royal,.cos-img img.set-sultan,.cos-pv img.set-sultan{filter:sepia(.55) saturate(1.6) brightness(1.1)}
.cos-img img.set-dunes,.cos-pv img.set-dunes{filter:sepia(.25) saturate(1.3)}
.gov-portrait img{object-position:50% 10%}
.iso .caravan{transition:transform 1s linear;pointer-events:none}
.iso .caravan image{animation:bob2 .6s ease-in-out infinite alternate}
.iso .flipx{transform:scaleX(-1)}
@keyframes bob2{to{transform:translateY(-2px)}}

/* ---------- summon hall ---------- */
.summon-hall{position:relative;border-radius:18px;overflow:hidden;min-height:260px;margin:6px 0 14px;border:1px solid #f0b030;box-shadow:0 0 30px #f0b03044;display:flex;align-items:flex-end}
.sh-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%;animation:breathe 7s ease-in-out infinite}
.summon-hall::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#1a0f06f5 25%,#1a0f0655 65%,transparent)}
.sh-in{position:relative;z-index:1;padding:14px;display:flex;flex-direction:column;gap:6px;width:100%}
.sh-in h2{margin:0;font-family:var(--font-display);font-size:28px;color:#fff3c4;text-shadow:0 2px 12px #000}
.sh-btns{display:flex;gap:8px;flex-wrap:wrap}.sh-btns .btn{flex:1;min-width:120px}
.sh-free{background:linear-gradient(90deg,#45b5a7,#7fe0d3)!important;color:#05211d!important;animation:pulse 1.4s ease-in-out infinite}
.sh-ten{background:linear-gradient(90deg,#f0b030,#ffe08a)!important}
.sh-rates{font-size:11px;color:var(--dune);margin:0}
.summon-fx{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px;overflow:auto}
.summon-fx.out{opacity:0;transition:opacity .25s}
.sf-bg{position:fixed;inset:0;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--sc) 35%,#1a0f06),#07040a 70%)}
.sf-portal{position:relative;width:180px;height:180px;display:grid;place-items:center;animation:shake .25s linear 4}
.sf-portal img{width:100%;filter:drop-shadow(0 0 30px var(--sc));transition:transform .4s,opacity .4s}
.sf-burst{position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(circle,#fff,var(--sc) 30%,transparent 65%);opacity:0;transform:scale(.2)}
.summon-fx.burst .sf-burst{animation:burst .7s ease-out forwards}
.summon-fx.burst .sf-portal img{transform:scale(1.3);opacity:0}
@keyframes burst{30%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
.summon-fx.show .sf-portal{display:none}
.sf-cards{position:relative;display:grid;gap:8px;width:min(560px,100%)}
.sf-cards.ten{grid-template-columns:repeat(5,1fr)}.sf-cards.one{grid-template-columns:min(220px,70vw);justify-content:center}
@media (max-width:520px){.sf-cards.ten{grid-template-columns:repeat(3,1fr)}}
.sf-card{opacity:0;transform:rotateY(90deg) scale(.8)}
.summon-fx.show .sf-card{animation:flip .45s ease-out forwards;animation-delay:calc(var(--i)*.12s)}
@keyframes flip{to{opacity:1;transform:none}}
.sf-face{border-radius:12px;border:2px solid var(--tc);background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--tc) 40%,transparent),#1a0f06 75%);box-shadow:0 0 18px color-mix(in srgb,var(--tc) 60%,transparent);display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;text-align:center;font-size:12px}
.sf-card.t3 .sf-face{animation:rglow2 1.6s ease-in-out infinite}
.rc-hero{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 12%;border-radius:8px}
.rc-ic{width:54px;height:54px;object-fit:contain}
.sf-face b{color:#fff3c4}.sf-face small{color:var(--dune)}
.sf-ok{position:relative;min-width:160px;opacity:0}.summon-fx.show .sf-ok{opacity:1;transition:opacity .4s 1s}
/* ---------- daily ---------- */
.daily{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}
.dd{border:1px solid var(--line);border-radius:10px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;text-align:center;background:#00000030}
.dd img{width:34px;height:34px;object-fit:contain}.dd.big{grid-column:span 2;border-color:var(--gold)}
.dd.got{opacity:.45}.dd.now{border-color:var(--turq);box-shadow:0 0 14px #45b5a788;animation:pulse 1.4s infinite}
.icon-btn.gift{color:var(--gold);animation:pulse 2s infinite}
/* ---------- tutorial ---------- */
.tut{position:fixed;left:0;right:0;bottom:calc(66px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;justify-content:center;padding:0 10px;pointer-events:none}
.tut.full{inset:0;align-items:center;background:#000a;pointer-events:auto}
.tut-box{pointer-events:auto;display:flex;gap:10px;align-items:flex-end;max-width:560px;width:100%;background:linear-gradient(180deg,#3b2716f2,#2b1b0ef2);border:1px solid var(--gold);border-radius:16px;padding:10px;box-shadow:0 10px 30px #000a;animation:popIn .25s ease-out}
.tut-box img{width:84px;height:110px;object-fit:cover;object-position:50% 10%;border-radius:12px;flex:none}
.tut-box b{color:var(--gold);font-family:var(--font-display)}.tut-box p{margin:2px 0 6px;font-size:14px}
.tut.full .tut-box img{width:120px;height:170px}
.tut-target{position:relative;z-index:65!important;animation:tutPulse 1.2s ease-in-out infinite!important;outline:3px solid #ffd27a;outline-offset:3px;border-radius:12px}
@keyframes tutPulse{50%{outline-color:#ffd27a33;box-shadow:0 0 24px #ffd27a}}

.brand h1{white-space:nowrap}
@media (max-width:440px){#vName{display:none}.brand-right{gap:5px}.icon-btn{width:32px;height:32px}}

/* ---------- campaign ---------- */
.camp{position:relative;border-radius:18px;overflow:hidden;padding:14px;margin:6px 0 14px;border:1px solid #6e4c27;background:radial-gradient(circle at 80% 20%,#6b3a1a,#2b1b0e 70%);display:flex;flex-direction:column;gap:8px}
.camp.bossy{border-color:#ff5a4a;box-shadow:0 0 30px #ff5a4a44}
.camp-bg{position:absolute;inset-inline-end:-30px;top:-10px;width:220px;opacity:.35;pointer-events:none;animation:breathe 6s ease-in-out infinite}
.camp>*{position:relative}
.camp-head h2{margin:2px 0 0;font-family:var(--font-display);font-size:24px;color:#fff3c4}
.camp-path{display:flex;gap:5px;align-items:center}
.camp-path i{flex:1;height:8px;border-radius:8px;background:#00000055;border:1px solid #6e4c27}
.camp-path i.done{background:var(--gold)}.camp-path i.cur{background:var(--turq);animation:pulse 1.2s infinite}
.camp-path i.boss{flex:1.6;height:12px;border-color:#ff5a4a}
.camp-foe b{font-size:18px;color:#fff}.camp-foe small{display:block;color:var(--dune)}
.camp-vs{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;text-align:center}
.camp-vs small{display:block;font-size:11px;color:var(--dune)}.camp-vs b{font-size:18px}.camp-vs b.ok{color:#7be07b}.camp-vs b.bad{color:#ff8a6a}
.camp-bar{height:10px;border-radius:10px;background:#00000066;overflow:hidden}.camp-bar i{display:block;height:100%;background:linear-gradient(90deg,#d9603f,#ff9a7a)}.camp-bar i.ok{background:linear-gradient(90deg,#45b5a7,#7be07b)}
.camp-heroes{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.ch-h{all:unset;cursor:pointer;flex:none;width:64px;text-align:center;font-size:11px;opacity:.6}
.ch-h img{width:64px;height:80px;object-fit:cover;object-position:50% 12%;border-radius:10px;border:2px solid transparent}
.ch-h.on{opacity:1}.ch-h.on img{border-color:var(--gold);box-shadow:0 0 12px #e0a93f88}
.camp-go{font-size:17px;min-height:46px}
.camp-idle{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px}.camp-idle .ri{width:26px;height:26px}