/* Olympus Defense — all styles (split out of index.html, Nov 2026). Asset urls are relative to css/. */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/cinzel-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/cinzel-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:800;font-display:swap;src:url(../assets/fonts/cinzel-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:900;font-display:swap;src:url(../assets/fonts/cinzel-latin-900-normal.woff2) format('woff2')}
@font-face{font-family:'Commissioner';font-style:normal;font-weight:100 900;font-display:swap;src:url(../assets/fonts/commissioner-latin-wght-normal.woff2) format('woff2-variations'),url(../assets/fonts/commissioner-latin-wght-normal.woff2) format('woff2')}
:root{--font:'Commissioner',system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans','DejaVu Sans',sans-serif;--ink:#f7f0dd;--gold:#ffd25a;--panel:rgba(14,20,38,.88);--edge:rgba(255,214,130,.34);--dark:#070a14;--mana:#4aa8ff;--fav:#ffcf4a}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#05070d;color:var(--ink);font-family:var(--font);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;overscroll-behavior:none;-webkit-text-size-adjust:100%}
body{background:radial-gradient(ellipse at 50% 45%,#1c2540 0%,#0a0e1a 62%,#04060a 100%)}
button{font-family:inherit;color:inherit;-webkit-appearance:none;appearance:none;cursor:pointer;touch-action:manipulation;outline:none}
#wrap{position:fixed;left:0;top:0;right:0;bottom:0;padding:0}
#stage{position:absolute;overflow:hidden;border-radius:8px;background:#0c1222;box-shadow:0 0 0 1px rgba(255,255,255,.05),0 10px 50px rgba(0,0,0,.9);--s:1;--b:clamp(38px,calc(var(--s)*50px),62px);--fs:clamp(10.5px,calc(var(--s)*14px),18px);--rb:46px;font-size:var(--fs);line-height:1.2}
#cv{position:absolute;left:0;top:0;width:100%;height:100%;display:block;touch-action:none}

/* ---------- HUD ---------- */
.hud{position:absolute;left:env(safe-area-inset-left,0px);top:env(safe-area-inset-top,0px);right:env(safe-area-inset-right,0px);bottom:max(env(safe-area-inset-bottom,0px),4px);pointer-events:none;z-index:3}
.hud button,.hud .ecard{pointer-events:auto}
.tl{position:absolute;left:calc(var(--b)*.12);top:calc(var(--b)*.12);display:flex;flex-direction:column;gap:calc(var(--b)*.08)}
.tl .row{display:flex;gap:calc(var(--b)*.1)}
.stat{display:flex;align-items:center;gap:.28em;height:calc(var(--fs)*2.0);padding:0 .7em 0 .25em;background:var(--panel);border:1.5px solid var(--edge);border-radius:999px;font-weight:800;font-size:calc(var(--fs)*1.02);text-shadow:0 1px 0 #000;box-shadow:0 2px 0 rgba(0,0,0,.5);white-space:nowrap}
.stat img{height:1.55em;width:1.55em;object-fit:contain;filter:drop-shadow(0 1px 0 #000)}
.stat b{display:inline-block;min-width:1.4em}
.stat.wv{padding:0 .8em}
.stat.pop b{animation:pop .35s}
.stat.hurt{animation:hurt .5s}
@keyframes pop{40%{transform:scale(1.3);color:#fff6c8}}
@keyframes hurt{30%{background:rgba(160,20,30,.9);transform:scale(1.08)}}
.bar{position:relative;width:calc(var(--fs)*10.2);height:calc(var(--fs)*1.05);border-radius:999px;background:rgba(6,9,18,.85);border:1.5px solid var(--edge);overflow:hidden;box-shadow:0 2px 0 rgba(0,0,0,.45)}
.bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px}
.bar.mana i{background:linear-gradient(#9fd6ff,#2f7fe0 60%,#1d56b0)}
.bar.fav i{background:linear-gradient(#fff2a8,#f0b52a 60%,#b77a10)}
.bar.fav.full i{animation:favg .6s ease-in-out infinite alternate}
@keyframes favg{to{filter:brightness(1.5)}}
.bar span{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--fs)*.72);font-weight:800;text-shadow:0 1px 1px #000,0 0 3px #000;white-space:nowrap;letter-spacing:.02em}
.btn{position:relative;width:var(--b);height:var(--b);padding:0;border-radius:calc(var(--b)*.28);border:2px solid var(--dark);background:linear-gradient(180deg,#4a6a9e 0%,#24365c 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.22),0 3px 0 var(--dark),0 4px 10px rgba(0,0,0,.4);display:grid;place-items:center;font-weight:900;font-size:calc(var(--fs)*1.1);text-shadow:0 1px 0 #000}
.btn:active{transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 1px 0 var(--dark)}
.btn.round{border-radius:50%}
.tr{position:absolute;right:calc(var(--b)*.12);top:calc(var(--b)*.12);display:flex;gap:calc(var(--b)*.12)}
.pz{display:block;width:38%;height:42%;border-left:calc(var(--b)*.11) solid var(--ink);border-right:calc(var(--b)*.11) solid var(--ink);filter:drop-shadow(0 1px 0 #000)}
.spk{width:58%;height:58%}
.spk .x{display:none}
.muted .spk .x{display:inline}.muted .spk .w{display:none}
.tc{position:absolute;left:50%;top:calc(var(--b)*.12);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:calc(var(--b)*.06)}
.tc .row{display:flex;align-items:center;gap:calc(var(--b)*.1)}
.call{position:relative;display:none;height:calc(var(--fs)*2.0);padding:0 .8em 0 .5em;border-radius:999px;border:2px solid var(--dark);background:linear-gradient(180deg,#f2c54a,#b5791a);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 3px 0 var(--dark);font-weight:900;font-size:calc(var(--fs)*.95);color:#2a1700;text-shadow:0 1px 0 rgba(255,255,255,.4);white-space:nowrap;align-items:center;gap:.35em;animation:callp 1.3s ease-in-out infinite}
.call.on{display:flex}
.call .ring{width:1.45em;height:1.45em;border-radius:50%;background:conic-gradient(#2a1700 calc(var(--p,1)*360deg),rgba(42,23,0,.25) 0);display:grid;place-items:center}
.call .ring::after{content:'▶';font-size:.62em;color:#ffe9a0;margin-left:.12em}
.call .bonus{color:#1a5a10;font-weight:900}
@keyframes callp{50%{box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 3px 0 var(--dark),0 0 14px rgba(255,210,90,.9)}}
.preview{display:none;padding:.15em .55em .2em;border-radius:10px;background:var(--panel);border:1.5px solid rgba(255,210,120,.3);font-size:calc(var(--fs)*.78);pointer-events:none}
.preview.on{display:flex;gap:.45em;align-items:center}
.preview .pv{display:inline-flex;align-items:center;font-weight:800;white-space:nowrap}
.preview .pv img{height:1.9em;width:1.7em;object-fit:contain;margin-right:.05em}
.bl{position:absolute;left:calc(var(--b)*.12);bottom:calc(var(--b)*.12);display:flex;align-items:flex-end;gap:calc(var(--b)*.16)}
.pow{width:calc(var(--b)*1.08);height:calc(var(--b)*1.08);background:#141a2c}
.pow img{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.pow .cd{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:50%;background:conic-gradient(rgba(4,6,14,.8) calc(var(--p,0)*360deg),rgba(0,0,0,0) 0)}
.pow .cdt{position:absolute;left:0;top:0;right:0;bottom:0;display:grid;place-items:center;font-weight:900;font-size:calc(var(--fs)*1.05);text-shadow:0 0 4px #000,0 1px 0 #000}
.pow .mc{position:absolute;left:50%;bottom:-.55em;transform:translateX(-50%);padding:0 .4em;border-radius:7px;background:#0d2346;border:1.5px solid var(--dark);color:#9fd2ff;font-weight:900;font-size:calc(var(--fs)*.74);line-height:1.3;white-space:nowrap}
.pow.nomana img{filter:saturate(.25) brightness(.7)}
.pow.ready{animation:ready 2s ease-in-out infinite}
@keyframes ready{50%{box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 3px 0 var(--dark),0 0 12px rgba(120,190,255,.85)}}
.btn.active{box-shadow:0 0 0 3px var(--gold),0 0 18px var(--gold);animation:none}
.btn.no,.no{animation:no .3s}
@keyframes no{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.br{position:absolute;right:calc(var(--b)*.12);bottom:calc(var(--b)*.12)}
.townBtn{width:calc(var(--b)*1.2);height:calc(var(--b)*1.2);border-radius:calc(var(--b)*.3);background:linear-gradient(180deg,#c99a3a,#7a5214);overflow:visible}
.townBtn img{position:absolute;left:8%;top:2%;width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 2px 1px rgba(0,0,0,.6))}
.townBtn .lb{position:absolute;left:50%;bottom:-.5em;transform:translateX(-50%);padding:0 .45em;border-radius:7px;background:#2a1a06;border:1.5px solid var(--dark);color:var(--gold);font-size:calc(var(--fs)*.78);line-height:1.3;white-space:nowrap}
.townBtn .dot{position:absolute;right:-6%;top:-6%;width:30%;height:30%;border-radius:50%;background:#3cba3c;border:2px solid var(--dark);display:none}
.townBtn.can .dot{display:block;animation:pop 1.2s infinite}
.hint{position:absolute;left:50%;bottom:calc(var(--b)*.18);transform:translateX(-50%);max-width:46%;padding:.4em .9em;background:rgba(14,20,38,.93);border:1.5px solid var(--gold);border-radius:12px;font-weight:700;text-align:center;display:none;font-size:calc(var(--fs)*.9);box-shadow:0 4px 14px rgba(0,0,0,.5)}
.hint.on{display:block}
.hint.warn{border-color:#ff6b6b;color:#ffd0d0}
.banner{position:absolute;left:50%;top:28%;transform:translate(-50%,-50%);font-weight:900;font-size:calc(var(--fs)*2.2);color:#fff3cf;text-shadow:0 3px 0 #000,0 0 18px rgba(255,200,90,.7);white-space:nowrap;pointer-events:none;opacity:0}
.banner.boss{color:#d9e6ff;text-shadow:0 3px 0 #000,0 0 22px rgba(110,150,255,.9)}
.ecard{position:absolute;right:calc(var(--b)*1.6);bottom:calc(var(--b)*.12);width:calc(var(--fs)*14.5);display:none;padding:.4em .6em .45em;border-radius:12px;background:rgba(12,18,34,.95);border:1.5px solid var(--edge);font-size:calc(var(--fs)*.84);box-shadow:0 4px 14px rgba(0,0,0,.5)}
.ecard.on{display:block}
.ecard .top{display:flex;gap:.5em;align-items:center}
.ecard .top img{width:2.7em;height:2.7em;object-fit:contain}
.ecard .nm{font-weight:900;font-size:1.1em;color:#ffe9a8}
.ecard .hpb{position:relative;height:1.1em;background:#2a0d0d;border-radius:5px;overflow:hidden;margin:.15em 0 .25em;border:1px solid #000}
.ecard .hpb i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#f77,#b22)}
.ecard .hpb span{position:absolute;left:0;right:0;top:0;bottom:0;text-align:center;font-size:.82em;font-weight:800;line-height:1.3;text-shadow:0 1px 0 #000}
.ecard .chips{display:flex;gap:.35em;flex-wrap:wrap}
.ecard .chip{padding:.05em .45em;border-radius:6px;background:rgba(255,255,255,.08);font-weight:700;white-space:nowrap}
.ecard .tip{opacity:.88;font-style:italic;margin-top:.3em;line-height:1.25}

/* ---------- radial menu ---------- */
#ring{position:absolute;left:0;top:0;width:0;height:0;z-index:5;pointer-events:none}
#ring .opt{position:absolute;left:0;top:0;width:var(--rb);height:var(--rb);margin:calc(var(--rb)/-2) 0 0 calc(var(--rb)/-2);border-radius:50%;padding:0;border:2.5px solid var(--dark);background:radial-gradient(circle at 50% 35%,#5a7ab0,#1f2e50 75%);box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 3px 0 var(--dark),0 6px 14px rgba(0,0,0,.55);pointer-events:auto;transform:translate(0,0) scale(.2);opacity:0;transition:transform .18s cubic-bezier(.3,1.5,.5,1),opacity .12s}
#ring.open .opt{transform:translate(var(--x),var(--y)) scale(1);opacity:1}
#ring .opt img{position:absolute;left:10%;top:3%;width:80%;height:86%;object-fit:contain;filter:drop-shadow(0 2px 1px rgba(0,0,0,.6))}
#ring .opt .g{position:absolute;left:0;top:0;right:0;bottom:0;display:grid;place-items:center;font-size:calc(var(--rb)*.5);font-weight:900;color:#ffe9a8;text-shadow:0 2px 0 #000}
#ring .opt .badge{position:absolute;left:-8%;top:-8%;min-width:40%;height:40%;padding:0 .2em;border-radius:999px;background:#2f8f3a;border:2px solid var(--dark);display:grid;place-items:center;font-size:calc(var(--rb)*.2);font-weight:900;color:#fff}
#ring .cost{position:absolute;left:50%;bottom:calc(var(--rb)*-.22);transform:translateX(-50%);padding:0 .4em;border-radius:7px;background:#1b1209;border:1.5px solid var(--dark);color:var(--gold);font-weight:900;font-size:calc(var(--fs)*.82);white-space:nowrap;line-height:1.35}
#ring .opt.sellOpt .cost{color:#b6ff9a}
#ring .cost.lbl{color:#dfe8ff;font-weight:800}
#ring .opt.off img{filter:grayscale(1) brightness(.55)}
#ring .opt.off .cost{color:#a0948a}
#ring .opt.armed{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 0 18px rgba(255,210,90,.85)}
#ring .opt .ok{position:absolute;right:-10%;top:-10%;width:44%;height:44%;border-radius:50%;background:#3c9a3c;border:2px solid var(--dark);display:none;place-items:center;font-weight:900;font-size:calc(var(--rb)*.26);color:#fff}
#ring .opt.armed .ok{display:grid}
#ring .opt.armed.off .ok{background:#8a3a3a}
#ring .opt.no{animation:no .3s}
.pill{position:absolute;left:0;top:0;z-index:5;pointer-events:none;display:none;max-width:min(340px,64%);padding:.36em .75em;border-radius:12px;background:rgba(12,18,34,.95);border:1.5px solid var(--edge);box-shadow:0 4px 14px rgba(0,0,0,.5);font-size:calc(var(--fs)*.84);text-align:center;line-height:1.25}
.pill.on{display:block}
.pill b{color:var(--gold);font-size:1.08em}
.pill .ds{opacity:.92}
.pill .st{display:flex;gap:.65em;justify-content:center;margin-top:.12em;white-space:nowrap;font-weight:700;color:#dfe8ff}
.pill .st i{font-style:normal;opacity:.7;font-weight:600}
.pill .warn{color:#ff9a9a;font-weight:800}

/* ---------- cards (branch picker, town choice) ---------- */
.spec{position:absolute;left:0;top:0;z-index:6;display:none;gap:.45em;padding:.5em .5em .55em;border-radius:14px;background:rgba(12,18,34,.96);border:1.5px solid var(--edge);box-shadow:0 8px 24px rgba(0,0,0,.6)}
.spec.on{display:flex}
.spec .ttl{position:absolute;left:.8em;top:-1.05em;padding:.1em .6em;border-radius:8px;background:#1f2e50;border:1.5px solid var(--edge);font-weight:900;font-size:.85em;color:#ffe9a8;white-space:nowrap}
.card{position:relative;width:calc(var(--fs)*8.6);padding:.4em .35em .45em;border-radius:10px;border:2px solid var(--dark);background:linear-gradient(#3d5686,#1c2846);text-align:center;color:var(--ink);font-size:inherit;display:flex;flex-direction:column;align-items:center}
.card img{height:calc(var(--fs)*3.6);width:auto;max-width:90%;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.card .nm{font-weight:900;color:#ffe9a8;margin-top:.1em;font-size:.95em;line-height:1.1}
.card .ds{font-size:.74em;opacity:.92;margin:.2em 0 .35em;line-height:1.2;min-height:2.4em}
.card .pr{display:inline-flex;align-items:center;gap:.25em;padding:.08em .55em;border-radius:8px;background:#1b1209;color:var(--gold);font-weight:900;border:1.5px solid var(--dark)}
.card .pr img{height:1.15em;width:1.15em}
.card .pr .ck{display:none;color:#8f8}
.card.off{filter:saturate(.3) brightness(.78)}
.card.armed{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 0 16px rgba(255,210,90,.7)}
.card.armed .pr .ck{display:inline}
.x{position:absolute;right:-14px;top:-14px;width:38px;height:38px;border-radius:50%;border:2px solid var(--dark);background:#6a2a3a;font-weight:900;font-size:16px;display:grid;place-items:center;box-shadow:0 3px 0 var(--dark);padding:0}

/* ---------- town & barricade panels ---------- */
.tp{position:absolute;z-index:6;display:none;padding:.5em .6em .55em;border-radius:14px;background:rgba(12,18,34,.96);border:1.5px solid var(--edge);box-shadow:0 8px 24px rgba(0,0,0,.6)}
.tp.on{display:block}
.tp h3{margin:0 0 .3em;font-size:1.05em;font-weight:900;color:#ffe9a8;display:flex;align-items:center;gap:.5em}
.tp h3 small{font-weight:700;color:#cfe0ff;font-size:.8em}
#townP{right:calc(var(--b)*.12);bottom:calc(var(--b)*1.55);width:calc(var(--fs)*21.5)}
.trow{display:flex;align-items:center;gap:.45em;padding:.22em 0;border-top:1px solid rgba(255,255,255,.08)}
.trow .ti{flex:1;min-width:0}
.trow .tn{font-weight:800;font-size:.9em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow .tv{font-size:.74em;opacity:.85;white-space:nowrap}
.pips{display:flex;gap:2px}
.pips i{width:.62em;height:.62em;border-radius:50%;background:#2a3554;border:1px solid #000}
.pips i.on{background:var(--gold)}
.ub{min-width:4.4em;height:2em;border-radius:9px;border:2px solid var(--dark);background:linear-gradient(#7ac650,#3a8424);font-weight:900;color:#fff;text-shadow:0 1px 0 #163a08;font-size:.86em;display:inline-flex;align-items:center;justify-content:center;gap:.2em;padding:0 .4em;box-shadow:0 2px 0 var(--dark)}
.ub img{height:1.1em;width:1.1em}
.ub.off{background:linear-gradient(#6a6a72,#44444c);text-shadow:none;color:#ccc}
.ub.max{background:#1f2e50;color:var(--gold)}
.ub:active{transform:translateY(1px)}
.choice{display:flex;gap:.4em;margin-top:.3em}
.choice .card{width:auto;flex:1}
#barrP{width:calc(var(--fs)*15.5)}
#barrP .ub{width:100%;justify-content:space-between;margin-top:.28em;min-height:2.1em}
#barrP .ub.alt{background:linear-gradient(#5a7ab0,#26406e);text-shadow:0 1px 0 #000}
#barrP .ub.red{background:linear-gradient(#b05050,#6e2626);text-shadow:0 1px 0 #000}
#barrP .hpl{font-size:.8em;opacity:.9;margin-bottom:.1em}

/* ---------- screens ---------- */
.screen{position:absolute;left:0;top:0;right:0;bottom:0;z-index:10;display:none;align-items:center;justify-content:center;flex-direction:column;text-align:center}
.screen.on{display:flex}
#scrLoad{background:radial-gradient(ellipse at 50% 40%,#22305a,#070a12)}
.ldT{font-weight:900;font-size:calc(var(--fs)*2.8);color:#ffe9b0;text-shadow:0 0 18px rgba(255,200,90,.5),0 3px 0 #000;letter-spacing:.04em}
.ldBar{width:40%;height:12px;border-radius:7px;background:#121a30;border:2px solid #000;overflow:hidden;margin-top:1em}
.ldBar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#c98a1a,#ffe07a);transition:width .15s}
.ldTx{margin-top:.6em;opacity:.8;font-weight:600}
#scrTitle{background:#0c1222 center/cover no-repeat}
.tT{position:absolute;left:0;right:0;top:9%;font-weight:900;font-size:calc(var(--fs)*4.1);letter-spacing:.03em;color:#fff1c8;text-shadow:0 0 26px rgba(255,190,80,.6),0 4px 0 #3a2208,0 6px 12px rgba(0,0,0,.8);line-height:1}
.tS{position:absolute;left:0;right:0;top:calc(9% + var(--fs)*4.7);font-weight:700;font-size:calc(var(--fs)*1.15);color:#e8f0ff;text-shadow:0 2px 4px #000}
.playBtn{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);min-width:26%;height:12%;min-height:42px;border-radius:999px;border:2.5px solid #1a0e02;background:linear-gradient(180deg,#ffe07a 0%,#e0a52a 55%,#a66a10 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(0,0,0,.25),0 0 18px rgba(255,200,80,.55);font-weight:900;font-size:calc(var(--fs)*1.7);letter-spacing:.05em;color:#3a1e00;text-shadow:0 1px 0 rgba(255,255,255,.5);animation:playPulse 1.6s ease-in-out infinite;padding:0 1.4em}
@keyframes playPulse{50%{box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(0,0,0,.25),0 0 34px rgba(255,210,100,.95)}}
.dim{background:rgba(4,6,12,.72)}
.panel{min-width:46%;padding:1em 1.6em 1.2em;border-radius:18px;background:linear-gradient(#22305a,#121a30);border:2px solid var(--edge);box-shadow:0 12px 40px rgba(0,0,0,.7)}
.panel h2{margin:0 0 .4em;font-size:calc(var(--fs)*1.9);font-weight:900;color:#ffe9a8;text-shadow:0 3px 0 #000}
.panel .row{display:flex;gap:.8em;justify-content:center;margin-top:.8em}
.pbtn{min-width:8.5em;min-height:42px;padding:.5em 1.2em;border-radius:14px;border:2px solid var(--dark);background:linear-gradient(180deg,#ffd76a,#c08a1e);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 4px 0 var(--dark);font-weight:900;font-size:calc(var(--fs)*1.15);color:#3a1e00;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.pbtn.alt{background:linear-gradient(180deg,#6d8cc6,#33497a);color:#fff;text-shadow:0 2px 0 #0a1430}
.pbtn:active{transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 2px 0 var(--dark)}
.stars{font-size:calc(var(--fs)*3.2);letter-spacing:.12em;line-height:1;margin:.1em 0 .25em}
.stars span{color:#2e3650;text-shadow:0 3px 0 #000}
.stars span.on{color:var(--gold);text-shadow:0 3px 0 #000,0 0 16px rgba(255,210,90,.8);display:inline-block;animation:star .5s backwards}
.stars span.on:nth-child(2){animation-delay:.25s}.stars span.on:nth-child(3){animation-delay:.5s}
@keyframes star{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.3)}}
.endSub{opacity:.9;font-weight:600}
#scrEnd.lose h2{color:#ff8f8f}

#rotate{position:fixed;left:0;top:0;right:0;bottom:0;z-index:50;display:none;align-items:center;justify-content:center;flex-direction:column;gap:22px;background:radial-gradient(ellipse at 50% 40%,#22305a,#06080e);text-align:center;padding:24px}
@media (orientation:portrait){body:not(.forcePortrait) #rotate{display:flex}}
.phoneIco{width:46px;height:78px;border:4px solid var(--ink);border-radius:10px;position:relative;animation:rot 2.2s ease-in-out infinite}
.phoneIco::after{content:'';position:absolute;left:50%;bottom:5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--ink)}
@keyframes rot{0%,20%{transform:rotate(0)}50%,80%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
.rotT{font-size:20px;font-weight:800;max-width:300px;line-height:1.35}
#rotate .pbtn{font-size:15px;min-width:0}

/* ---------- UI kit (art from src/hd/ui_kit_hd.jpg) ---------- */
.tp,.spec,.pill,.ecard{border:11px solid transparent;border-image:url(../assets/ui_small.webp) 42 fill / 11px stretch;background:none;box-shadow:0 8px 22px rgba(0,0,0,.55)}
.tp,.spec{padding:.25em .35em .35em}
.pill,.ecard{padding:.1em .35em .15em}
.panel{border:22px solid transparent;border-image:url(../assets/ui_panel.webp) 70 fill / 22px stretch;background:none;box-shadow:0 12px 40px rgba(0,0,0,.7);padding:.6em 1.4em .9em}
.card{border:12px solid transparent;border-image:url(../assets/ui_card.webp) 80 fill / 12px stretch;background:none;padding:.15em .15em .25em}
.card.armed{border-image:url(../assets/ui_card.webp) 80 fill / 12px stretch;box-shadow:0 0 0 2px var(--gold),0 0 16px rgba(255,210,90,.75);border-radius:8px}
.pbtn{border:none;background:url(../assets/ui_btn_gold.webp) center/100% 100% no-repeat;box-shadow:none;border-radius:0;min-height:46px;padding:.55em 1.6em .65em}
.pbtn.alt{background-image:url(../assets/ui_btn_blue.webp)}
.pbtn.tog{background-image:url(../assets/ui_btn_blue.webp);color:#fff;text-shadow:0 2px 0 #0a1430;font-size:calc(var(--fs)*1.0)}
.pbtn.tog.offT{background-image:url(../assets/ui_btn_red.webp)}
.pbtn:active{box-shadow:none}
.banner span{display:inline-block;padding:.35em 2.2em .55em;background:url(../assets/ui_ribbon.webp) center/100% 100% no-repeat;font-size:calc(var(--fs)*1.6)}
.banner{color:#fff3cf}
.bar{border:none;background:url(../assets/ui_bar.webp) center/100% 100% no-repeat;height:calc(var(--fs)*1.25);border-radius:0;box-shadow:none}
.bar i{left:5%;top:24%;bottom:26%;max-width:90%;border-radius:4px}
.bar span{font-size:calc(var(--fs)*.66)}
.brow{display:flex;align-items:center;gap:.15em}
.brow img{width:calc(var(--fs)*1.45);height:calc(var(--fs)*1.45);object-fit:contain;filter:drop-shadow(0 1px 1px #000)}
.ibtn{position:relative;width:var(--b);height:var(--b);padding:0;border:none;background:none;border-radius:50%;filter:drop-shadow(0 3px 2px rgba(0,0,0,.6))}
.ibtn img{width:100%;height:100%;object-fit:contain}
.ibtn:active{transform:translateY(2px)}
.ibtn .lb{position:absolute;right:-6%;bottom:-6%;padding:0 .3em;border-radius:6px;background:#1b1209;border:1.5px solid var(--dark);color:var(--gold);font-weight:900;font-size:calc(var(--fs)*.78);line-height:1.3}
#bGold .lb{color:#ffe08a}
#bGold::after{content:"TEST";position:absolute;top:-.55em;left:50%;transform:translateX(-50%);font-size:.55em;font-weight:900;color:#fff;background:#c0392b;padding:0 .35em;border-radius:6px}
#bSpeed.on2{filter:drop-shadow(0 0 8px rgba(255,210,90,.9))}
#ring .ringbg{position:absolute;left:calc(var(--R) * -1 - var(--rb)*.62);top:calc(var(--R) * -1 - var(--rb)*.62);width:calc(var(--R)*2 + var(--rb)*1.24);height:calc(var(--R)*2 + var(--rb)*1.24);pointer-events:none;opacity:0;transform:scale(.4);transition:transform .18s cubic-bezier(.3,1.5,.5,1),opacity .12s;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
#ring.open .ringbg{opacity:.95;transform:scale(1)}
#ring .opt{background:radial-gradient(circle at 50% 40%,#3a2c1c,#1a120a 75%);border-color:#c99a4a}
#ring .opt .lk{position:absolute;left:25%;top:22%;width:50%;height:50%;object-fit:contain;filter:none}
#ring .opt.lock>img:first-child{filter:grayscale(1) brightness(.5)}
.townBtn{background:none;border:none;box-shadow:none}
.townBtn img{left:0;top:0;width:100%;height:100%;filter:drop-shadow(0 3px 2px rgba(0,0,0,.6))}
.tp h3 img{width:1.6em;height:1.6em;object-fit:contain}
.trow .ti0{width:1.9em;height:1.9em;object-fit:contain}
.ub{border:none;background:url(../assets/ui_btn_gold.webp) center/100% 100% no-repeat;color:#3a1e00;text-shadow:0 1px 0 rgba(255,255,255,.4);box-shadow:none;border-radius:0;min-height:2.2em}
.ub.off{background-image:url(../assets/ui_btn_red.webp);color:#f2d0c8;text-shadow:0 1px 0 #000;filter:saturate(.6)}
.ub.max{background-image:url(../assets/ui_btn_blue.webp);color:var(--gold);text-shadow:0 1px 0 #000}
#barrP .ub.alt{background-image:url(../assets/ui_btn_blue.webp);color:#fff;text-shadow:0 1px 0 #000}
#barrP .ub.red{background-image:url(../assets/ui_btn_red.webp);color:#fff;text-shadow:0 1px 0 #000}
#barrP .ub span{display:inline-flex;align-items:center;gap:.25em}
#barrP .ub img{height:1.4em;width:1.4em}
#barrP{width:calc(var(--fs)*16)}
#scrTitle{background:#0c1222 url(../assets/title.webp) center/cover no-repeat}
.tT{top:6%;left:30%;right:auto;width:56%;text-align:center;white-space:nowrap;font-size:min(calc(var(--fs)*3.6),6.4vw)}
.tS{top:calc(6% + min(calc(var(--fs)*3.6),6.4vw)*1.25);left:30%;right:auto;width:56%}
.endBg{position:absolute;inset:-20px;background:#0c1222 url(../assets/title.webp) center/cover no-repeat;filter:blur(6px) brightness(.5)}
#scrEnd.lose .endBg{filter:blur(6px) brightness(.45) grayscale(.85) sepia(.2) hue-rotate(180deg) saturate(1.4)}
#scrEnd .panel{position:relative}
.endIco{display:block;width:calc(var(--fs)*4.2);height:calc(var(--fs)*4.2);margin:-.2em auto .1em;object-fit:contain}
.stars img{width:calc(var(--fs)*3);height:calc(var(--fs)*3);margin:0 .12em;filter:grayscale(1) brightness(.35)}
.stars img.on{filter:drop-shadow(0 0 10px rgba(255,210,90,.8));animation:star .5s backwards}
.stars img.on:nth-child(2){animation-delay:.25s}.stars img.on:nth-child(3){animation-delay:.5s}

/* fix: variant buttons inherited a gradient shorthand that broke the art scaling */
.ub.off,.ub.max,#barrP .ub.alt,#barrP .ub.red,.pbtn.alt,.pbtn.tog{background-size:100% 100%;background-position:center;background-repeat:no-repeat;background-color:transparent}
/* ---------- draft 2: dev toggle, favor button ---------- */
body:not(.dev) #bGold{display:none}
.pow.fav{background:#2a1e08}
.pow.fav .cd{background:conic-gradient(rgba(255,207,74,.0) calc(var(--p,0)*360deg),rgba(4,6,14,.55) 0)}
.pow.fav .mc{background:#3a2a06;color:#ffe08a}
.pow.fav.full{animation:favReady 1s ease-in-out infinite}
.pow.fav:not(.full) img{filter:saturate(.55) brightness(.9)}
@keyframes favReady{50%{box-shadow:0 0 0 3px #ffd25a,0 0 22px rgba(255,210,90,.95)}}
.btn.active.fav{box-shadow:0 0 0 3px #fff3b0,0 0 22px #ffd25a;animation:none}

/* ---------- draft 2: menu ---------- */
.menu{justify-content:flex-start;align-items:stretch;text-align:left;background:#0c1222}
.mBg{position:absolute;inset:-20px;background:#0c1222 url(../assets/title.webp) center/cover no-repeat;filter:blur(3px) brightness(.42) saturate(1.1)}
.mTop{position:relative;display:flex;align-items:center;justify-content:space-between;padding:.45em .9em .1em}
.mTitle{font-weight:900;font-size:calc(var(--fs)*1.55);color:#fff1c8;letter-spacing:.03em;text-shadow:0 0 16px rgba(255,190,80,.55),0 3px 0 #3a2208}
.mTitle small{font-size:.5em;font-weight:800;color:#ffcf7a;margin-left:.5em;letter-spacing:.06em;vertical-align:middle}
.gear{width:calc(var(--fs)*2.6);height:calc(var(--fs)*2.6);border-radius:50%;border:2px solid #c99a4a;background:radial-gradient(circle at 50% 40%,#3a2c1c,#1a120a 75%);color:#ffe9a8;font-size:calc(var(--fs)*1.35);display:grid;place-items:center;padding:0;box-shadow:0 3px 0 #000}
.mCols{position:relative;flex:1;display:flex;gap:.7em;padding:.3em .8em .8em;min-height:0}
.mHalf{flex:1;min-width:0;display:flex;flex-direction:column;border:14px solid transparent;border-image:url(../assets/ui_small.webp) 42 fill / 14px stretch;padding:.15em .35em .3em}
.mH1{font-weight:900;font-size:calc(var(--fs)*1.25);color:#ffe9a8;text-shadow:0 2px 0 #000;line-height:1.1}
.mSub{font-weight:700;color:#cfe0ff;font-size:.9em}
.cityArt{position:relative;height:calc(var(--fs)*4.6);border-radius:9px;background:#18202e url(../assets/map.webp) no-repeat;background-size:300% auto;background-position:100% 6%;border:2px solid rgba(0,0,0,.6);box-shadow:inset 0 0 18px rgba(0,0,0,.7);display:flex;align-items:flex-end;justify-content:space-between;padding:.3em .5em;flex:none}
.cityArt .lvB{display:flex;align-items:center;gap:.35em;background:rgba(8,10,20,.82);border:1.5px solid rgba(255,214,130,.5);border-radius:999px;padding:.12em .7em .12em .2em}
.cityArt .lvB img{width:1.9em;height:1.9em;object-fit:contain}
.cityArt .lvB b{font-size:1.2em;color:#ffe08a}
.ptsB{background:rgba(8,10,20,.85);border:1.5px solid #6fd06a;border-radius:10px;padding:.1em .6em;text-align:center;line-height:1.05}
.ptsB b{display:block;font-size:1.35em;color:#9cff8a}
.ptsB span{font-size:.72em;font-weight:800;color:#d6ffd0}
.ptsB.zero{border-color:rgba(255,255,255,.25)}.ptsB.zero b{color:#cfd6e6}
.xpBar{position:relative;height:calc(var(--fs)*1.35);margin:.45em 0 .2em;border-radius:999px;background:#0a0f1c;border:1.5px solid rgba(255,214,130,.45);overflow:hidden;flex:none}
.xpBar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(#bff59a,#4caf3a 60%,#2a7a1e);transition:width .6s}
.xpBar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.76em;font-weight:800;text-shadow:0 1px 1px #000,0 0 3px #000;white-space:nowrap}
.mini{display:flex;flex-direction:column;gap:.3em;margin:.25em 0 .35em;flex:1;min-height:0;justify-content:space-evenly}
.mrow{display:flex;align-items:center;gap:.5em;padding:.3em .4em;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,214,130,.12)}
.mrow img{width:2.3em;height:2.3em;object-fit:contain;flex:none}
.mrow .mn{font-weight:900;font-size:1em;width:5.4em;flex:none}
.mrow .mfx{flex:1;min-width:0;font-size:.8em;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pips3{display:flex;gap:3px;flex:none}
.pips3 i{width:.75em;height:.75em;border-radius:50%;background:#2a3554;border:1px solid #000}
.pips3 i.on{background:var(--gold);box-shadow:0 0 5px rgba(255,210,90,.7)}
.mBtns{display:flex;gap:.5em;align-items:center;justify-content:center;flex:none}
.mBtns .pbtn{min-width:0;min-height:38px;font-size:calc(var(--fs)*1.02);padding:.45em 1.4em .55em}
.mNote{font-size:.7em;opacity:.75;text-align:center;margin-top:.2em;flex:none}
.wGrid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:.5em;margin-top:.35em}
.world{position:relative;border-radius:10px;border:2px solid #000;overflow:hidden;padding:0;text-align:left;color:var(--ink);box-shadow:0 3px 0 #000,inset 0 0 0 1px rgba(255,214,130,.35)}
.world .wbg{position:absolute;inset:0;background-size:cover;background-position:center}
.world .wsh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.78) 100%)}
.world .wn{position:absolute;left:.45em;bottom:1.45em;font-weight:900;font-size:1.38em;text-shadow:0 2px 0 #000}
.world .ws{position:absolute;left:.55em;bottom:.4em;font-size:.9em;font-weight:800;color:#ffe08a;text-shadow:0 1px 0 #000;display:flex;align-items:center;gap:.25em}
.world .ws img{width:1.25em;height:1.25em}
.world.open{border-color:#c99a4a;animation:wglow 2.4s ease-in-out infinite}
@keyframes wglow{50%{box-shadow:0 3px 0 #000,0 0 14px rgba(255,200,90,.7),inset 0 0 0 1px rgba(255,214,130,.6)}}
.world.locked .wbg{filter:saturate(.75) brightness(.8)}
.world.locked .ws{color:#cfd6e6}
.world .lk{position:absolute;right:.4em;top:.4em;width:2.1em;height:2.1em;object-fit:contain;filter:drop-shadow(0 2px 2px #000)}
.world:active{transform:translateY(1px)}

/* city upgrades + level select + settings + results */
.sub{background:rgba(4,6,12,.78);justify-content:center;align-items:center}
.cpanel{position:relative;width:94%;max-height:96%;display:flex;flex-direction:column;border:22px solid transparent;border-image:url(../assets/ui_panel.webp) 70 fill / 22px stretch;padding:.2em .7em 1em;text-align:left}
.cHead{display:flex;align-items:center;gap:.6em;margin-bottom:.2em;flex-wrap:nowrap;padding-right:2.4em}
.cHead h2{margin:0;font-size:calc(var(--fs)*1.45);font-weight:900;color:#ffe9a8;text-shadow:0 2px 0 #000;flex:1;white-space:nowrap}
.cHead .ptsB{display:flex;align-items:center;gap:.35em;padding:.15em .6em}
.cHead .ptsB b{display:inline;font-size:1.2em}
.smallBtn{min-width:0;min-height:32px;height:auto;padding:.3em .9em .4em;font-size:calc(var(--fs)*.9)}
.cCols{display:flex;gap:.55em;min-height:0}
.cCol{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25em}
.cCol h4{margin:0;display:flex;align-items:center;gap:.35em;font-size:1em;font-weight:900;color:#ffe9a8;white-space:nowrap}
.cCol h4 img{width:1.7em;height:1.7em;object-fit:contain}
.cCol h4 small{font-weight:700;color:#cfe0ff;font-size:.72em;margin-left:auto}
.tile{position:relative;display:flex;flex-direction:column;gap:.04em;padding:.25em .5em .3em;border-radius:9px;background:rgba(10,14,28,.78);border:1.5px solid rgba(255,255,255,.12)}
.tile .tt{display:flex;align-items:baseline;gap:.35em;font-weight:900;font-size:.9em;white-space:nowrap;overflow:hidden}
.tile .tt i{font-style:normal;color:#ffcf7a;font-size:.85em}
.tile .td{font-size:.74em;opacity:.85;line-height:1.15}
.tile .tfx{font-size:.84em;font-weight:800;white-space:nowrap;color:#dfe8ff}
.tile .tfx em{font-style:normal;color:#9cff8a}
.tile .ub{align-self:flex-start;min-width:7.2em;margin-top:.15em;font-size:.88em;height:2.5em;min-height:25px;padding:0 .9em}
.tile.own{border-color:rgba(255,210,90,.75);background:linear-gradient(rgba(60,46,14,.85),rgba(28,22,8,.85))}
.tile.own .tfx em{color:#ffe08a}
.tile.lock{opacity:.55}
.tile.next{border-color:#6fd06a;box-shadow:0 0 0 1px rgba(111,208,106,.35)}
.cFoot{font-size:.72em;opacity:.78;margin-top:.35em;text-align:center}
.closeX{position:absolute;right:-12px;top:-12px}
.lpanel{position:relative;width:86%;height:86%;border-radius:14px;border:2px solid #000;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.7),inset 0 0 0 2px rgba(255,214,130,.4)}
.lBg{position:absolute;inset:0;background:url(../assets/map.webp) center/cover;filter:brightness(.55) saturate(.9)}
.lHead{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:.6em;padding:.5em .7em;background:linear-gradient(rgba(6,9,18,.9),rgba(6,9,18,0))}
.lHead h2{margin:0;font-size:calc(var(--fs)*1.6);font-weight:900;color:#ffe9a8;text-shadow:0 2px 0 #000;flex:1}
.lHead .mSub{font-size:.9em}
.lNodes{position:absolute;left:0;right:0;top:22%;bottom:4%;display:flex;align-items:flex-start;justify-content:space-evenly;gap:1%;padding:0 2%}
.lNode{position:relative;display:flex;flex-direction:column;align-items:center;gap:.3em;text-align:center;width:23%}
.medal{width:calc(var(--fs)*5.2);height:calc(var(--fs)*5.2);border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:calc(var(--fs)*2.3);color:#3a1e00;background:radial-gradient(circle at 40% 35%,#fff0a8,#e0a52a 55%,#8a5a10);border:3px solid #1a0e02;box-shadow:0 0 0 3px rgba(255,214,130,.6),0 6px 14px rgba(0,0,0,.6);text-shadow:0 1px 0 rgba(255,255,255,.5)}
.lNode.locked .medal{background:radial-gradient(circle at 40% 35%,#6a6f80,#363a48 60%,#1c1e26);color:#9aa0b0;box-shadow:0 0 0 3px rgba(255,255,255,.15),0 6px 14px rgba(0,0,0,.6)}
.lNode.locked .medal img{width:58%;height:58%;object-fit:contain}
.lName{font-weight:900;font-size:1em;text-shadow:0 2px 0 #000;line-height:1.1;min-height:2.2em}
.lStars img{width:calc(var(--fs)*1.9);height:calc(var(--fs)*1.9);margin:0 .06em;filter:grayscale(1) brightness(.35)}
.lStars img.on{filter:drop-shadow(0 0 6px rgba(255,210,90,.8))}
.lNode .pbtn{min-width:6em;font-size:1em}
.soon{font-weight:800;color:#cfd6e6;background:rgba(0,0,0,.55);border-radius:8px;padding:.15em .7em}
.lPath{display:none;position:absolute;left:36%;right:36%;top:calc(24% + var(--fs)*2.6);border-top:4px dotted rgba(255,226,140,.6)}
.backBtn{min-width:0;min-height:34px;padding:.3em 1em .4em;font-size:calc(var(--fs)*.95)}
.setRow{display:flex;gap:.6em;justify-content:center;margin-top:.6em;flex-wrap:wrap}
.setRow .pbtn{min-width:9em;font-size:calc(var(--fs)*1)}
.setNote{font-size:.75em;opacity:.75;margin-top:.5em}
.devBox{margin-top:.7em;padding-top:.5em;border-top:1px solid rgba(255,255,255,.15)}
.devBox h3{margin:0;font-size:.9em;color:#ff9a8a;letter-spacing:.08em}
/* results */
.rew{margin:.45em auto 0;width:min(22em,92%);padding:.4em .7em .5em;border-radius:10px;background:rgba(8,10,20,.6);border:1.5px solid rgba(255,214,130,.35);text-align:left}
.rew .rl{display:flex;justify-content:space-between;gap:1em;font-weight:800;font-size:.92em;margin:.1em 0}
.rew .rl b{color:#9cff8a}
.rew .rl.up b{color:#ffe08a}
.rew .xpBar{margin:.3em 0 .15em}
.best{font-size:.8em;opacity:.85;margin-top:.1em}
/* draft 3: glory bar, heroes, relics, chests */
.bar.glory i{background:linear-gradient(#fff7d6,#ffcf4a 55%,#c9861a)}
.bar.glory.on i{background:linear-gradient(#e8f6ff,#7cc8ff 55%,#2a78c8)}
.bar.glory.full i{animation:favg .6s ease-in-out infinite alternate}
.mBtns{flex-wrap:wrap;gap:.35em}
.mBtns .pbtn.alt2{padding:.4em .8em .5em;font-size:calc(var(--fs)*.9)}
.mBtns .badge{display:inline-block;min-width:1.3em;margin-left:.3em;padding:0 .3em;border-radius:999px;background:#d8402a;color:#fff;font-size:.8em;line-height:1.35em;text-align:center}
.cCols{overflow-y:auto}
.cCol{gap:.2em}
.tile{padding:.18em .45em .22em}
.tile .td{display:none}
.tile{display:grid;grid-template-columns:1fr auto;column-gap:.4em;align-items:center}
.tile .tt,.tile .tfx{grid-column:1;overflow:hidden;text-overflow:ellipsis}
.tile .ub{grid-column:2;grid-row:1 / span 2;align-self:center;margin:0;min-width:5.6em}
.tile .ub{height:2.2em}
.hall{width:96%;height:94%;max-height:94%}
.hBody{display:flex;gap:.6em;min-height:0;flex:1}
.hHeroes{width:34%;display:flex;flex-direction:column;gap:.35em;min-height:0}
.hRel{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.hero{display:flex;gap:.45em;align-items:center;padding:.3em .45em;border-radius:10px;background:rgba(10,14,28,.78);border:1.5px solid rgba(255,255,255,.14);cursor:pointer}
.hero.sel{border-color:#ffd25a;background:linear-gradient(rgba(60,46,14,.88),rgba(28,22,8,.88));box-shadow:0 0 12px rgba(255,210,90,.35)}
.hero img{width:3.4em;height:3.4em;object-fit:contain;flex:none}
.hero .hn{font-weight:900;color:#ffe9a8}
.hero .hd{font-size:.72em;opacity:.9;line-height:1.2}
.hero .hs{font-size:.7em;color:#9cff8a;font-weight:800}
.slots{display:flex;gap:.4em;align-items:center;margin:.1em 0 .3em;flex:none}
.slots .lab{font-weight:900;font-size:.85em;color:#ffe9a8;margin-right:.2em}
.slot{width:3em;height:3em;border-radius:10px;border:2px dashed rgba(255,255,255,.25);display:grid;place-items:center;background:rgba(0,0,0,.35)}
.slot img{width:86%;height:86%;object-fit:contain}
.slot.f{border-style:solid}
.rgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:.3em;overflow-y:auto;min-height:0;padding:2px}
.relic{position:relative;border-radius:10px;padding:.2em .15em .25em;background:rgba(10,14,28,.8);border:2px solid var(--rc,#888);text-align:center;cursor:pointer;min-width:0}
.relic img{width:2.6em;height:2.6em;object-fit:contain;display:block;margin:0 auto}
.relic .rn{font-size:.62em;font-weight:800;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.relic .rb{position:relative;height:.55em;margin:.15em .2em 0;border-radius:999px;background:#0a0f1c;overflow:hidden}
.relic .rb i{position:absolute;left:0;top:0;bottom:0;background:var(--rc,#888)}
.relic .rl{position:absolute;left:.15em;top:.1em;font-size:.62em;font-weight:900;color:#fff;text-shadow:0 1px 1px #000}
.relic .eq{position:absolute;right:.1em;top:.05em;font-size:.7em;color:#9cff8a;font-weight:900;text-shadow:0 1px 1px #000}
.relic.lock{opacity:.42;filter:grayscale(.8)}
.relic.on{box-shadow:0 0 0 2px #9cff8a,0 0 10px rgba(156,255,138,.5)}
.rinfo{font-size:.74em;min-height:2.3em;margin-top:.25em;padding:.2em .4em;border-radius:8px;background:rgba(0,0,0,.35);flex:none}
.pity{font-size:.72em;opacity:.9;margin-top:.15em;flex:none}
.pity b{color:#ffe08a}
.chests{display:flex;gap:.6em;flex-wrap:wrap;justify-content:center;align-items:flex-end;overflow-y:auto;min-height:0;padding:.3em}
.chest{display:flex;flex-direction:column;align-items:center;gap:.1em;padding:.3em .4em;border-radius:12px;background:rgba(10,14,28,.7);border:1.5px solid rgba(255,214,130,.3);min-width:7em}
.chest img{width:5em;height:5em;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.chest .cn{font-weight:900;font-size:.85em}
.chest .pbtn{min-width:0;min-height:30px;padding:.25em .9em .35em;font-size:calc(var(--fs)*.85)}
.odds{font-size:.68em;opacity:.8;text-align:center;margin-top:.3em;flex:none}
#scrOpen{background:radial-gradient(ellipse at center,rgba(40,30,10,.92),rgba(2,3,8,.96) 70%);z-index:30;cursor:pointer}
.oWrap{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}
.oRays{position:absolute;left:50%;top:44%;width:120vmin;height:120vmin;margin:-60vmin 0 0 -60vmin;background:repeating-conic-gradient(rgba(255,220,130,.22) 0 8deg,rgba(255,220,130,0) 8deg 22deg);border-radius:50%;-webkit-mask:radial-gradient(circle,#000 20%,transparent 68%);mask:radial-gradient(circle,#000 20%,transparent 68%);opacity:0;transform:scale(.3);transition:opacity .4s,transform .6s}
.opened .oRays{opacity:1;transform:scale(1);animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.oChest{position:relative;width:min(34vmin,220px);height:min(34vmin,220px);object-fit:contain;filter:drop-shadow(0 10px 16px rgba(0,0,0,.7));animation:shake .5s ease-in-out infinite}
.opened .oChest{animation:pop .35s ease-out;width:min(24vmin,150px);height:min(24vmin,150px)}
@keyframes shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg) scale(1.03)}40%{transform:rotate(6deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg) scale(1.05)}}
@keyframes pop{0%{transform:scale(1.4)}100%{transform:scale(1)}}
.oTitle{position:relative;font-weight:900;font-size:calc(var(--fs)*1.5);color:#ffe9a8;text-shadow:0 3px 0 #000;margin-top:.3em}
.oTap{position:relative;font-weight:800;opacity:.85;margin-top:.3em;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.35}}
.oCards{position:relative;display:flex;gap:.5em;justify-content:center;flex-wrap:wrap;margin-top:.5em;max-width:94%}
.oCard{width:6.4em;padding:.35em .2em .4em;border-radius:12px;background:linear-gradient(rgba(20,24,40,.95),rgba(8,10,20,.95));border:2.5px solid var(--rc);box-shadow:0 0 16px var(--rg);text-align:center;opacity:0;transform:translateY(30px) scale(.6) rotateY(90deg);animation:card .5s cubic-bezier(.3,1.5,.5,1) forwards}
.oCard img{width:3.6em;height:3.6em;object-fit:contain}
.oCard .r{font-size:.62em;font-weight:900;letter-spacing:.06em;color:var(--rc);text-transform:uppercase}
.oCard .n{font-size:.72em;font-weight:900;line-height:1.1;min-height:2.2em;display:flex;align-items:center;justify-content:center}
.oCard .s{font-size:.7em;font-weight:800;color:#9cff8a}
.oCard .nw{position:absolute;margin:-.6em 0 0 4.2em;background:#d8402a;color:#fff;font-size:.6em;font-weight:900;border-radius:6px;padding:0 .35em}
@keyframes card{to{opacity:1;transform:none}}
.rew .chestRow{display:flex;align-items:center;gap:.5em;margin-top:.3em}
.rew .chestRow img{width:2.8em;height:2.8em;object-fit:contain}
.rew .chestRow .pbtn{min-width:0;min-height:28px;padding:.2em .7em .3em;font-size:calc(var(--fs)*.8);margin-left:auto}
/* ===== draft 3 UI pass 2: design system + home ===== */
:root{--g1:#fff3cf;--g2:#f0c35a;--g3:#b87a1e;--rim:rgba(240,195,90,.6);--serif:'Cinzel',Georgia,'Times New Roman',serif}
#stage{border-radius:0;box-shadow:none}
.pbtn,.btnP{font-family:var(--serif);font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#2a1600;border:1px solid #4a2e08 !important;border-radius:10px !important;
  background:linear-gradient(180deg,#fff3c8 0%,#f6d276 34%,#d49b33 64%,#e9b54d 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -3px 0 rgba(110,62,10,.45),0 0 0 2px #140c02,0 0 0 3px var(--rim),0 6px 14px rgba(0,0,0,.55) !important;
  text-shadow:0 1px 0 rgba(255,250,220,.65);min-height:2.5em;padding:.4em 1.4em !important;cursor:pointer}
.pbtn.alt,.btnS{color:#f3e6c4;text-shadow:0 1px 0 #000;border-color:#03050b !important;background:linear-gradient(180deg,#46516f,#262e48 55%,#191f34) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -3px 0 rgba(0,0,0,.35),0 0 0 2px #03050b,0 0 0 3px rgba(240,195,90,.4),0 6px 14px rgba(0,0,0,.55) !important}
.pbtn.offT{filter:grayscale(.85) brightness(.75)}
.pbtn:active,.btnP:active{transform:translateY(1px);filter:brightness(.94)}
.pbtn:disabled{filter:grayscale(.8) brightness(.6)}
.cpanel,.panel{background:radial-gradient(120% 80% at 50% 0%,#29355a 0%,#141a31 55%,#0a0e1c 100%) !important;border:1px solid rgba(240,195,90,.55) !important;border-image:none !important;border-radius:14px !important;
  box-shadow:0 0 0 1px #000,0 0 0 5px rgba(10,13,26,.96),0 0 0 6px rgba(240,195,90,.3),0 20px 50px rgba(0,0,0,.8) !important}
.panel{padding:.9em 1.4em 1.1em !important}
.cHead h2,.panel h2{font-family:var(--serif);font-weight:900;letter-spacing:.07em;text-transform:uppercase;background:linear-gradient(180deg,#fff6dc,#f0c35a 60%,#b87a1e);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.85))}
.cHead{position:relative;padding-bottom:.35em}
.cHead::after{content:'';position:absolute;left:0;right:3.2em;bottom:0;height:1px;background:linear-gradient(90deg,rgba(240,195,90,.75),rgba(240,195,90,0))}
.x,.closeX{border-radius:50% !important;background:radial-gradient(circle at 50% 35%,#3b2b1a,#130d07) !important;border:1px solid #000 !important;box-shadow:0 0 0 2px rgba(240,195,90,.6),0 3px 8px rgba(0,0,0,.6) !important;color:#f3e1b0 !important;font-weight:400 !important}
.ldT{font-family:var(--serif);letter-spacing:.08em}
.home{background:#05070d;font-size:max(13px,calc(var(--h)*.034));justify-content:flex-start;align-items:stretch;text-align:left}
.home .hBg{position:absolute;inset:-2%;background:url(../assets/title.webp) 68% center/cover no-repeat;animation:kb 40s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.07) translate(-1%,-1%)}}
.home .hShade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,6,12,.94) 0%,rgba(4,6,12,.72) 30%,rgba(4,6,12,.12) 56%,rgba(4,6,12,0) 70%),linear-gradient(180deg,rgba(4,6,12,.72) 0%,rgba(4,6,12,0) 20%,rgba(4,6,12,0) 70%,rgba(4,6,12,.9) 100%)}
.hSafe{position:absolute;inset:0;display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) max(env(safe-area-inset-right,0px),.9em) 0 max(env(safe-area-inset-left,0px),.9em)}
.hTop{display:flex;align-items:center;gap:.5em;height:calc(var(--h)*.15);flex:none}
.pBlock{display:flex;align-items:center;gap:.55em;padding:.2em 1em .2em .2em;border-radius:999px;background:linear-gradient(90deg,rgba(9,12,24,.94),rgba(9,12,24,.66));border:1px solid rgba(240,195,90,.45);color:inherit;font:inherit;cursor:pointer;text-align:left}
.pAv{width:calc(var(--h)*.105);height:calc(var(--h)*.105);border-radius:50%;overflow:hidden;flex:none;background:radial-gradient(circle at 50% 30%,#3a4a78,#141a30);box-shadow:0 0 0 2px #0a0d18,0 0 0 3.5px var(--g2)}
.pAv img{width:100%;height:100%;object-fit:cover}
.pTx{display:flex;flex-direction:column;gap:.14em;min-width:7.5em}
.pName{font-family:var(--serif);font-weight:800;font-size:.78em;letter-spacing:.12em;color:#e9d39a;text-transform:uppercase;line-height:1}
.pLv{font-size:.8em;color:#c9d4ee;font-weight:700;line-height:1}
.pLv b{color:#fff;font-size:1.15em}
.pXp{position:relative;height:.45em;border-radius:999px;background:#05070e;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.pXp i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#3fa34a,#a6ef7e)}
.cap{position:relative;display:flex;align-items:center;height:2.1em;padding:0 .9em 0 2.25em;margin-left:1em;border-radius:8px;background:rgba(9,12,24,.9);border:1px solid rgba(240,195,90,.35);font-weight:900;color:#fff3cf}
.cap img{position:absolute;left:-.95em;top:50%;transform:translateY(-50%);width:2.75em;height:2.75em;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.75))}
.hSp{flex:1}
.rnd{width:2.7em;height:2.7em;border-radius:50%;display:grid;place-items:center;padding:0;font-size:1.15em;color:#f3e1b0;background:radial-gradient(circle at 50% 35%,#2e3858,#10152a);border:1px solid #000;box-shadow:0 0 0 2px rgba(240,195,90,.55),0 4px 10px rgba(0,0,0,.6);cursor:pointer}
.hBody{flex:1;min-height:0;display:flex}
.hLeft{width:47%;display:flex;flex-direction:column;justify-content:center;gap:calc(var(--h)*.045);padding-left:.3em}
.hLogo{display:flex;flex-direction:column;align-items:flex-start;line-height:.9;font-family:var(--serif)}
.hLogo .l1{font-weight:900;font-size:calc(var(--h)*.118);letter-spacing:.035em;background:linear-gradient(180deg,#fffbe8 0%,#ffe08a 42%,#d1902a 70%,#f5c862 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #2c1903) drop-shadow(0 0 20px rgba(255,190,80,.3))}
.hLogo .orn{display:block;width:calc(var(--h)*.62);height:2px;margin:.3em 0 .35em;background:linear-gradient(90deg,var(--g2),rgba(240,195,90,0))}
.hLogo .l2{font-weight:700;font-size:calc(var(--h)*.046);letter-spacing:.62em;color:#efdcae}
.camp{width:min(100%,calc(var(--h)*.9));padding:.75em .95em .95em;border-radius:12px;background:linear-gradient(180deg,rgba(17,23,43,.9),rgba(7,10,20,.94));border:1px solid rgba(240,195,90,.42);box-shadow:0 12px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
.cKick{font-family:var(--serif);font-size:.66em;font-weight:800;letter-spacing:.24em;color:#d9b66a;text-transform:uppercase}
.cName{font-family:var(--serif);font-weight:800;font-size:1.32em;color:#fff3cf;margin:.18em 0 .25em;line-height:1.1}
.cMeta{display:flex;align-items:center;gap:.7em;margin-bottom:.75em;font-size:.82em;color:#c9d4ee;font-weight:700}
.cSt{display:flex;gap:.1em}
.cSt img{width:1.35em;height:1.35em;filter:grayscale(1) brightness(.4)}
.cSt img.on{filter:drop-shadow(0 0 4px rgba(255,210,90,.8))}
.btnP.big{position:relative;overflow:hidden;display:block;width:100%;height:calc(var(--h)*.135);font-size:calc(var(--h)*.058);letter-spacing:.16em}
.btnP.big::after{content:'';position:absolute;top:0;bottom:0;width:35%;left:-40%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));animation:shine 3.2s ease-in-out infinite}
@keyframes shine{0%,55%{left:-40%}85%,100%{left:120%}}
.hRight{flex:1;position:relative}
.show{position:absolute;inset:0;border:none;background:none;padding:0;cursor:pointer}
.show .ped{position:absolute;left:50%;bottom:calc(var(--h)*.075);width:calc(var(--h)*.52);height:calc(var(--h)*.13);transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at 50% 45%,rgba(255,224,150,.6),rgba(255,180,60,.16) 45%,rgba(0,0,0,0) 70%)}
.show img{position:absolute;left:50%;bottom:calc(var(--h)*.11);height:calc(var(--h)*.6);transform:translateX(-50%);filter:drop-shadow(0 14px 14px rgba(0,0,0,.6));animation:idle 3.4s ease-in-out infinite}
@keyframes idle{50%{transform:translateX(-50%) translateY(-1.6%)}}
.plate{position:absolute;bottom:calc(var(--h)*.02);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;padding:.22em 1.3em .3em;border-radius:8px;background:rgba(8,11,22,.9);border:1px solid rgba(240,195,90,.45);white-space:nowrap;line-height:1.15}
.plate b{font-family:var(--serif);font-weight:800;letter-spacing:.1em;color:#fff3cf;text-transform:uppercase}
.plate small{font-size:.66em;color:#d9b66a;letter-spacing:.16em;text-transform:uppercase}
.dock{flex:none;display:flex;justify-content:center;height:calc(var(--h)*.18 + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);margin:0 calc(-1*max(env(safe-area-inset-right,0px),.9em)) 0 calc(-1*max(env(safe-area-inset-left,0px),.9em));background:linear-gradient(180deg,rgba(12,16,30,.8),rgba(5,7,14,.97));border-top:1px solid rgba(240,195,90,.5);box-shadow:0 -10px 26px rgba(0,0,0,.45)}
.dk{position:relative;flex:0 0 calc(var(--h)*.28);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2em;border:none;background:none;color:#d6c08c;font-family:var(--serif);font-weight:800;font-size:.7em;letter-spacing:.13em;text-transform:uppercase;cursor:pointer}
.dk+.dk::before{content:'';position:absolute;left:0;top:24%;bottom:24%;width:1px;background:linear-gradient(rgba(240,195,90,0),rgba(240,195,90,.38),rgba(240,195,90,0))}
.dk img{width:calc(var(--h)*.088);height:calc(var(--h)*.088);object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.75));transition:transform .12s}
.dk:active img{transform:scale(.88)}
.dk .bd{position:absolute;top:10%;left:57%;min-width:1.7em;height:1.7em;padding:0 .35em;border-radius:999px;background:linear-gradient(#ff6a4a,#c8281a);border:1px solid #2a0600;box-shadow:0 0 0 1.5px #ffd9b0;color:#fff;font-family:var(--font);font-style:normal;font-size:.95em;font-weight:900;line-height:1.7em;text-align:center;letter-spacing:0}
.dk .bd:empty{display:none}
.hVer{position:absolute;right:.6em;bottom:calc(var(--h)*.185);font-size:.6em;opacity:.4;letter-spacing:.12em}
#cityP .ub{background:linear-gradient(180deg,#fff3c8 0%,#f6d276 34%,#d49b33 64%,#e9b54d 100%) !important;border:1px solid #4a2e08 !important;border-radius:8px !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 0 0 1.5px #140c02,0 0 0 2.5px var(--rim) !important;color:#2a1600;font-family:var(--serif);font-weight:800;height:2.1em !important;min-height:0 !important;text-shadow:none}
#cityP .ub.off{background:rgba(0,0,0,.4) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14) !important;border-color:transparent !important;color:#9aa3b8;filter:none}
#cityP .ub.max{background:rgba(70,150,60,.35) !important;box-shadow:inset 0 0 0 1px rgba(156,255,138,.5) !important;border-color:transparent !important;color:#c8ffb8}
.cCol h4{font-family:var(--serif);letter-spacing:.08em;text-transform:uppercase}
.tile .tt i{font-family:var(--serif)}
.tile{background:rgba(6,9,20,.65) !important;border:1px solid rgba(255,255,255,.1) !important}
.tile.next{border-color:rgba(240,195,90,.7) !important;box-shadow:0 0 12px rgba(240,195,90,.18) !important}
.tile.own{border-color:rgba(156,255,138,.45) !important;background:rgba(30,60,30,.35) !important}
/* ===== hub screens (full screen, header + tabs) ===== */
.hub{background:#05070d;justify-content:flex-start;align-items:stretch;text-align:left;font-size:max(13px,calc(var(--h)*.034));z-index:12}
.hub::before{content:'';position:absolute;inset:-4%;background:url(../assets/title.webp) center/cover;filter:blur(12px) brightness(.28) saturate(1.2)}
.hubIn{position:absolute;inset:0;display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) max(env(safe-area-inset-right,0px),1em) max(env(safe-area-inset-bottom,0px),.7em) max(env(safe-area-inset-left,0px),1em)}
.hubTop{flex:none;display:flex;align-items:center;gap:.8em;height:calc(var(--h)*.16);border-bottom:1px solid rgba(240,195,90,.3)}
.back.closeX{position:static !important;width:2.5em !important;height:2.5em !important;font-size:1.2em;line-height:1;flex:none;display:grid;place-items:center;padding:0 0 .12em}
.hubT{font-family:var(--serif);font-weight:900;font-size:1.4em;letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(180deg,#fff6dc,#f0c35a 60%,#b87a1e);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.85))}
.tabs{display:flex;gap:.3em;margin-left:.6em;padding:.25em;border-radius:10px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.08)}
.tab{font-family:var(--serif);font-weight:800;font-size:.8em;letter-spacing:.14em;text-transform:uppercase;padding:.55em 1.3em;border-radius:7px;border:none;background:none;color:#b9a77a;cursor:pointer}
.tab.on{background:linear-gradient(180deg,#fff3c8,#f6d276 40%,#d49b33);color:#2a1600;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.hubSp{flex:1}
.cur{display:flex;align-items:center;gap:.35em;height:2.2em;padding:0 1em 0 .35em;border-radius:999px;background:rgba(0,0,0,.55);border:1px solid rgba(240,195,90,.4);font-weight:900;color:#fff3cf;white-space:nowrap}
.cur img{width:1.7em;height:1.7em;object-fit:contain}
.cur.pts{padding-left:1em;font-size:.9em}.cur.pts b{color:#9cff8a;font-size:1.2em}.cur.pts.zero b{color:#cfd6e6}
.hubBody{flex:1;min-height:0;display:flex;gap:1em;padding-top:.7em}
.pbtn.off{filter:grayscale(.6) brightness(.7)}
.pbtn .c{display:inline-flex;align-items:center;gap:.15em;margin-left:.6em;padding-left:.6em;border-left:1px solid rgba(60,30,0,.35)}
.pbtn .c img{width:1.25em;height:1.25em}
/* heroes */
.hSel{width:calc(var(--h)*.36);flex:none;display:flex;flex-direction:column;gap:.5em}
.htile{position:relative;display:flex;align-items:center;gap:.5em;padding:.35em .5em;border-radius:12px;background:rgba(8,11,22,.78);border:1px solid rgba(255,255,255,.12);cursor:pointer;color:inherit;font:inherit;text-align:left}
.htile img{width:calc(var(--h)*.11);height:calc(var(--h)*.11);border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px #0a0d18,0 0 0 3px rgba(240,195,90,.5)}
.htile b{display:block;font-family:var(--serif);font-size:.78em;letter-spacing:.08em;text-transform:uppercase;color:#fff3cf}
.htile small{display:block;font-size:.72em;color:#c9d4ee}
.htile.view{border-color:rgba(240,195,90,.9);background:radial-gradient(circle at 20% 50%,rgba(255,200,90,.25),rgba(8,11,22,.9) 70%)}
.htile .lk{position:absolute;right:.35em;top:.3em;font-size:.8em}
.htile .chk{position:absolute;right:.35em;top:.35em;width:1.35em;height:1.35em;border-radius:50%;background:#5ac85a;color:#08200a;font-size:.72em;display:grid;place-items:center;font-weight:900}
.hLock{display:flex;align-items:center;gap:.5em;padding:.35em .5em;border-radius:12px;border:1px dashed rgba(255,255,255,.15);opacity:.55}
.hLock span{width:calc(var(--h)*.11);height:calc(var(--h)*.11);border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.4);font-family:var(--serif);font-size:1.3em;color:#8a8fa0}
.hLock small{font-size:.72em}
.htile .ht{min-width:0}
.hStage .plate{bottom:2%}
.hStage{position:relative;width:30%;flex:none}
.hStage .ped{position:absolute;left:50%;bottom:9%;width:90%;height:16%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(255,224,150,.55),rgba(255,180,60,.14) 45%,rgba(0,0,0,0) 70%)}
.hStage img{position:absolute;left:50%;bottom:13%;height:80%;max-width:115%;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 12px 12px rgba(0,0,0,.6));animation:idle 3.4s ease-in-out infinite}
.hStage img.lvup{animation:lvup .7s ease-out,idle 3.4s ease-in-out .7s infinite}
@keyframes lvup{0%{filter:brightness(2.4) drop-shadow(0 0 30px #ffd25a);transform:translateX(-50%) scale(1.08)}100%{filter:drop-shadow(0 12px 12px rgba(0,0,0,.6));transform:translateX(-50%)}}
.hStage .plate{bottom:0}
.hInfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:.45em}
.lvRow{display:flex;align-items:center;gap:.6em}
.lvRow small{font-size:.75em;color:#c9d4ee;white-space:nowrap}
.lvB{font-family:var(--serif);font-weight:900;padding:.2em .7em;border-radius:7px;background:linear-gradient(#fff3c8,#d49b33);color:#2a1600;white-space:nowrap}
.lvBar{position:relative;flex:1;height:.6em;border-radius:999px;background:#05070e;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.lvBar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#d49b33,#ffe08a)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:.3em .5em}
.st{display:flex;justify-content:space-between;align-items:baseline;gap:.4em;padding:.32em .6em;border-radius:8px;background:rgba(0,0,0,.38)}
.st span{font-size:.7em;color:#aeb8d0;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.st b{font-weight:900;white-space:nowrap}.st em{font-style:normal;color:#8df07a;font-size:.8em;margin-left:.3em}
.perks{display:flex;flex-direction:column;gap:.28em}
.perk{display:flex;align-items:center;gap:.55em;padding:.28em .6em;border-radius:8px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.06);opacity:.55}
.perk.on{opacity:1;border-color:rgba(240,195,90,.4)}
.perk .pk{width:1.7em;height:1.7em;border-radius:50%;display:grid;place-items:center;background:rgba(240,195,90,.18);color:#ffd25a;flex:none;font-size:.8em}
.perk b{font-size:.84em}.perk small{display:block;font-size:.72em;color:#c9d4ee;line-height:1.15}
.perk em{margin-left:auto;font-style:normal;font-family:var(--serif);font-size:.7em;font-weight:800;color:#d9b66a;white-space:nowrap}
.hBtns{display:flex;gap:.6em;margin-top:auto}
.hBtns .pbtn{flex:1;min-width:0;font-size:.82em}
/* relics */
.rLeft{flex:1;min-width:0;display:flex;flex-direction:column;gap:.55em}
.rSlotsBox{display:flex;align-items:center;gap:.8em;padding:.4em .7em;border-radius:12px;background:rgba(0,0,0,.38);border:1px solid rgba(240,195,90,.3);flex:none}
.rsLab b{display:block;font-family:var(--serif);letter-spacing:.12em;font-size:.82em;color:#ffe9a8;text-transform:uppercase}
.rsLab small{font-size:.72em;color:#aeb8d0}
.rSlots{display:flex;gap:.5em;margin-left:auto}
.rslot{width:calc(var(--h)*.13);height:calc(var(--h)*.13);border-radius:12px;display:grid;place-items:center;background:rgba(0,0,0,.45);border:1.5px dashed rgba(255,255,255,.22);color:rgba(255,255,255,.3);font-size:1.3em;cursor:pointer}
.rslot.f{border:1.5px solid var(--rc);box-shadow:inset 0 0 14px -4px var(--rc)}
.rslot.sel{outline:2px solid #fff3cf;outline-offset:2px}
.rslot img{width:82%;height:82%;object-fit:contain}
.relHub .rgrid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(6,1fr);gap:.4em;overflow-y:auto;align-content:start}
.relHub .relic{padding:.35em .2em .4em}
.relHub .relic img{width:calc(var(--h)*.1);height:calc(var(--h)*.1)}
.relic.sel{outline:2px solid #fff3cf;outline-offset:1px}
.rDetail{width:34%;flex:none;display:flex;flex-direction:column;align-items:center;gap:.25em;padding:.6em .8em .7em;border-radius:14px;background:radial-gradient(80% 45% at 50% 22%,var(--rg),rgba(8,11,22,.94) 72%);border:1px solid var(--rc);text-align:center}
.rDetail .big{width:calc(var(--h)*.2);height:calc(var(--h)*.2);object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.6))}
.rDetail .big.dim{filter:grayscale(1) brightness(.5)}
.rDetail .rr{font-family:var(--serif);font-size:.68em;font-weight:800;letter-spacing:.22em;color:var(--rc);text-transform:uppercase}
.rDetail .nm{font-family:var(--serif);font-weight:800;font-size:1.08em;color:#fff3cf;line-height:1.1}
.rDetail .lv{font-size:.78em;color:#c9d4ee}
.rDetail .fxNow{font-weight:900;color:#8df07a;font-size:.95em;line-height:1.2}
.rDetail .fxNext{font-size:.74em;color:#aeb8d0}
.shard{width:100%;position:relative;height:1.35em;border-radius:999px;background:#05070e;overflow:hidden;margin-top:.15em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.shard i{position:absolute;left:0;top:0;bottom:0;background:var(--rc);opacity:.85}
.shard span{position:absolute;inset:0;display:grid;place-items:center;font-size:.7em;font-weight:900;text-shadow:0 1px 1px #000}
.rDetail .pbtn{width:100%;margin-top:auto;font-size:.82em}
.rDetail .hint{font-size:.72em;color:#aeb8d0;margin-top:auto}
.rDetail .pbtn+.hint{margin-top:.2em}
/* city + treasury in hubs */
.cityHub .cCols{flex:1;width:100%}
#cityP{font-size:1em !important}
.cNote{flex:none;text-align:center;font-size:.72em;color:#aeb8d0;padding-top:.35em}
.chestHub{flex-direction:column;align-items:center;justify-content:center;gap:.4em}
/* heroes / relics / chests restyle */
.hcard{background:linear-gradient(180deg,rgba(20,26,48,.9),rgba(8,11,22,.95)) !important;border:1px solid rgba(255,255,255,.12) !important;border-radius:12px !important}
.hcard.sel{border-color:rgba(240,195,90,.8) !important;box-shadow:0 0 0 1px rgba(240,195,90,.35),0 0 24px rgba(255,200,90,.25) !important;background:radial-gradient(90% 60% at 50% 70%,rgba(255,200,90,.22),rgba(8,11,22,.96) 70%) !important}
.hcard .hn{font-family:var(--serif);letter-spacing:.08em;text-transform:uppercase}
.hcard .tag{font-family:var(--serif);letter-spacing:.12em}
.relic{background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.06),rgba(8,11,22,.92) 70%) !important;border:1px solid var(--rc) !important;border-radius:10px !important;box-shadow:inset 0 0 16px -6px var(--rc)}
.relic.on{box-shadow:0 0 0 2px #9cff8a,inset 0 0 16px -6px var(--rc) !important}
.chest{background:radial-gradient(90% 70% at 50% 40%,rgba(255,210,120,.12),rgba(8,11,22,.92) 70%) !important;border:1px solid rgba(240,195,90,.35) !important;border-radius:12px !important}
.chest .cn,.relic .rn{font-family:var(--serif);letter-spacing:.04em}
/* clean panels for every sub screen */
.sub{background:rgba(3,5,10,.82);font-size:max(13px,calc(var(--h)*.035))}
.cpanel{border:2px solid #c99a4a;border-image:none;border-radius:18px;background:linear-gradient(#1d2646,#0d1226);box-shadow:0 14px 40px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.1);padding:.6em .9em .8em;width:92%;max-height:92%}
.cHead{padding-right:3em;margin-bottom:.45em}
.cHead h2{font-size:1.5em}
.closeX{right:.45em;top:.45em;width:2.3em;height:2.3em}
.tile{padding:.35em .6em}
.tile .tt{font-size:1em}
.tile .tfx{font-size:.82em;white-space:normal;line-height:1.15}
.tile .tt{white-space:normal;line-height:1.1}
#cityP .tile .ub{min-width:3.6em;padding:0 .6em}
#cityP .cCol{gap:.3em}
#cityP{font-size:.92em}
/* heroes screen */
.heroes{display:flex;gap:.8em;justify-content:center;flex:1;min-height:0}
.hcard{position:relative;flex:1;max-width:19em;display:flex;flex-direction:column;align-items:center;gap:.25em;padding:.5em .6em .7em;border-radius:16px;background:rgba(8,12,26,.75);border:2px solid rgba(255,255,255,.14);cursor:pointer}
.hcard.sel{border-color:#ffd25a;background:linear-gradient(rgba(70,52,14,.9),rgba(22,16,6,.92));box-shadow:0 0 18px rgba(255,210,90,.35)}
.hcard .fig{height:calc(var(--h)*.36);width:100%;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.6))}
.hcard .hn{font-weight:900;font-size:1.25em;color:#ffe9a8}
.hcard .ht{font-size:.8em;color:#cfe0ff;margin-top:-.2em}
.hcard .hd{font-size:.82em;text-align:center;opacity:.92;line-height:1.25}
.hcard .hs{display:flex;gap:.8em;font-size:.8em;font-weight:900;color:#9cff8a}
.hcard .tag{position:absolute;left:.6em;top:.5em;font-size:.75em;font-weight:900;padding:.1em .6em;border-radius:999px;background:#ffd25a;color:#3a1e00}
.hNote{text-align:center;font-size:.8em;opacity:.8;margin-top:.4em}
/* relics screen */
.rTop{display:flex;align-items:center;gap:.6em;margin-bottom:.4em}
.rTop .slot{width:3.6em;height:3.6em}
.rgrid{grid-template-columns:repeat(6,1fr);gap:.45em}
.relic{padding:.3em .2em .35em}
.relic img{width:3.2em;height:3.2em}
.relic .rn{font-size:.7em}
.relic .rl{font-size:.75em}
.rinfo{font-size:.85em;margin-top:.45em;padding:.35em .6em}
.pity{font-size:.75em}
#scrLevels{font-size:max(13px,calc(var(--h)*.036))}
.lpanel{width:92%;height:90%;border:2px solid #c99a4a;border-radius:18px}
.lStars img{width:1.6em;height:1.6em}
.medal{width:calc(var(--h)*.2);height:calc(var(--h)*.2);font-size:calc(var(--h)*.09)}
.chest .pbtn{font-size:1em;min-height:2.3em;padding:.2em 1.2em .3em}
.odds{font-size:.7em}
/* chests screen */
.chest{min-width:8.5em;padding:.5em .6em}
.chest img{width:6em;height:6em}
.chest .cn{font-size:.95em}
/* barricade tutorial callout */
.hint.tip{border-color:#ffd25a;background:rgba(40,28,6,.95)}
/* ===== battle UI v2 (matches the menu design system) ===== */
.hidden{display:none !important}
#bP2{display:none !important}
.tl{left:max(.6em,calc(var(--b)*.12));top:calc(var(--b)*.12)}
.res{display:flex;align-items:center;height:calc(var(--b)*.62);padding:0 .9em 0 .35em;border-radius:10px;background:linear-gradient(180deg,rgba(18,24,44,.94),rgba(7,10,20,.94));border:1px solid rgba(240,195,90,.5);box-shadow:0 0 0 1px #000,0 6px 14px rgba(0,0,0,.5)}
.res .stat{height:auto;padding:0 .2em;background:none;border:none;box-shadow:none;font-size:calc(var(--fs)*1.25);font-weight:900;color:#fff6dc}
.res .stat img{width:1.45em;height:1.45em}
.rSep{width:1px;height:60%;margin:0 .55em;background:linear-gradient(rgba(240,195,90,0),rgba(240,195,90,.6),rgba(240,195,90,0))}
.tc{gap:calc(var(--b)*.08)}
.wplate{display:flex;align-items:baseline;gap:.45em;padding:.25em 1.4em .3em;background:linear-gradient(90deg,rgba(7,10,20,0),rgba(7,10,20,.92) 18%,rgba(7,10,20,.92) 82%,rgba(7,10,20,0));border-top:1px solid rgba(240,195,90,.5);border-bottom:1px solid rgba(240,195,90,.5);border-image:linear-gradient(90deg,rgba(240,195,90,0),rgba(240,195,90,.7),rgba(240,195,90,0)) 1;font-family:var(--serif)}
.wplate small{font-size:calc(var(--fs)*.72);font-weight:800;letter-spacing:.22em;color:#d9b66a}
.wplate span{font-size:calc(var(--fs)*1.3);font-weight:900;color:#fff3cf}
.call{height:calc(var(--b)*.6) !important;padding:0 1.1em 0 .45em !important;gap:.45em;font-family:var(--serif) !important;font-weight:800 !important;letter-spacing:.1em;text-transform:uppercase;font-size:calc(var(--fs)*.95) !important;color:#2a1600 !important;border:1px solid #4a2e08 !important;border-radius:10px !important;
  background:linear-gradient(180deg,#fff3c8 0%,#f6d276 34%,#d49b33 64%,#e9b54d 100%) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 2px #140c02,0 0 0 3px var(--rim),0 6px 14px rgba(0,0,0,.5) !important;animation:callp2 1.6s ease-in-out infinite}
@keyframes callp2{50%{filter:brightness(1.12) drop-shadow(0 0 10px rgba(255,210,90,.8))}}
.call .ring{width:1.6em !important;height:1.6em !important}
.preview{padding:.2em .7em !important;border-radius:9px !important;background:rgba(7,10,20,.85) !important;border:1px solid rgba(255,255,255,.12) !important;border-image:none !important;font-size:calc(var(--fs)*.85) !important}
.tr{right:max(.6em,calc(var(--b)*.12));top:calc(var(--b)*.12);gap:calc(var(--b)*.14)}
.ibtn{width:calc(var(--b)*.78) !important;height:calc(var(--b)*.78) !important;border-radius:50% !important;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#2e3858,#10152a) !important;border:1px solid #000 !important;box-shadow:0 0 0 2px rgba(240,195,90,.6),0 5px 12px rgba(0,0,0,.55) !important;filter:none !important;color:#f3e1b0}
.ibtn img{width:62% !important;height:62% !important}
.ibtn .ff{font-size:calc(var(--b)*.24);letter-spacing:-.18em;margin-left:-.18em;color:#f3e1b0}
.ibtn .lb{position:absolute;right:-.45em;bottom:-.35em;padding:0 .35em;border-radius:6px;background:#140c02;border:1px solid rgba(240,195,90,.6);font-size:calc(var(--fs)*.7);font-weight:900;color:#ffe08a;line-height:1.35}
.ibtn.on2{box-shadow:0 0 0 2px #ffd25a,0 0 14px rgba(255,210,90,.7) !important}
.pz2{width:34%;height:38%;border-left:calc(var(--b)*.085) solid #f3e1b0;border-right:calc(var(--b)*.085) solid #f3e1b0}
.bl{left:max(.6em,calc(var(--b)*.12));bottom:calc(var(--b)*.1);flex-direction:column;align-items:flex-start;gap:calc(var(--b)*.12)}
.manaW{display:flex;align-items:center;gap:.25em}
.manaW img{width:calc(var(--b)*.42);height:calc(var(--b)*.42);object-fit:contain;filter:drop-shadow(0 1px 2px #000);margin-right:-.5em;position:relative;z-index:1}
.bar.mana{width:calc(var(--b)*2.6) !important;height:calc(var(--b)*.3) !important;background:rgba(5,7,14,.9) !important;border:1px solid rgba(120,180,255,.45) !important;border-radius:999px !important;box-shadow:0 0 0 1px #000 !important;overflow:hidden}
.bar.mana i{left:0 !important;top:0 !important;bottom:0 !important;max-width:none !important;border-radius:999px !important;background:linear-gradient(90deg,#2a6fd6,#7cc8ff) !important}
.bar.mana span{font-size:calc(var(--fs)*.72) !important;font-weight:900;letter-spacing:.06em}
.pows{display:flex;align-items:flex-end;gap:calc(var(--b)*.2)}
.pSep{width:1px;align-self:stretch;margin:0 calc(var(--b)*-.04);background:linear-gradient(rgba(240,195,90,0),rgba(240,195,90,.5),rgba(240,195,90,0))}
.pow{width:calc(var(--b)*1.02) !important;height:calc(var(--b)*1.02) !important;border:1px solid #000 !important;background:#0a0d18 !important;box-shadow:0 0 0 2px #0a0d18,0 0 0 3.5px rgba(240,195,90,.7),0 6px 14px rgba(0,0,0,.6) !important}
.pow.ready{animation:ready2 2s ease-in-out infinite}
@keyframes ready2{50%{box-shadow:0 0 0 2px #0a0d18,0 0 0 3.5px #ffe08a,0 0 18px rgba(255,220,130,.75)}}
.pow .mc{bottom:-.6em !important;padding:0 .5em !important;border-radius:6px !important;background:linear-gradient(#1d4f9a,#0e2a5a) !important;border:1px solid #000 !important;color:#d8ecff !important;font-size:calc(var(--fs)*.78) !important;box-shadow:0 0 0 1px rgba(124,200,255,.5)}
.pow.fav .mc{background:linear-gradient(#6a4a10,#3a2806) !important;color:#ffe08a !important;box-shadow:0 0 0 1px rgba(240,195,90,.6);font-family:var(--serif);letter-spacing:.06em}
.pow .cdt{font-family:var(--serif);font-size:calc(var(--fs)*1.4) !important}
.br{right:max(.6em,calc(var(--b)*.12));bottom:calc(var(--b)*.1);display:flex;align-items:flex-end;gap:calc(var(--b)*.24)}
.heroBtn{position:relative;width:calc(var(--b)*1.05);height:calc(var(--b)*1.05);padding:0;border:none;border-radius:50%;background:conic-gradient(#ffd25a calc(var(--p,0)*360deg),rgba(255,255,255,.12) 0);box-shadow:0 6px 14px rgba(0,0,0,.6);cursor:pointer}
.heroBtn img{position:absolute;inset:9%;width:82%;height:82%;border-radius:50%;object-fit:cover;background:#141a30;box-shadow:0 0 0 2px #0a0d18;filter:saturate(.6) brightness(.8)}
.heroBtn.near img,.heroBtn.out img{filter:none}
.heroBtn.lock img{filter:grayscale(1) brightness(.55)}
.heroBtn.rally{width:calc(var(--b)*.9);height:calc(var(--b)*.9);align-self:flex-end;background:conic-gradient(#ffb35a calc(var(--p,0)*360deg),rgba(255,255,255,.12) 0)}
.heroBtn.rally img{object-fit:contain;padding:8%;background:radial-gradient(circle at 50% 35%,#4a3a28,#1a120a)}
.heroBtn.near{animation:ready2 1s ease-in-out infinite}
.heroBtn.out{background:conic-gradient(#7cc8ff calc(var(--p,0)*360deg),rgba(255,255,255,.12) 0)}
.heroBtn .lb,.townBtn .lb{position:absolute;left:50%;bottom:-.55em;transform:translateX(-50%);padding:0 .5em;border-radius:6px;background:#140c02 !important;border:1px solid rgba(240,195,90,.6) !important;color:#ffe08a !important;font-family:var(--serif);font-weight:800;font-size:calc(var(--fs)*.75) !important;letter-spacing:.06em;line-height:1.4;white-space:nowrap}
.townBtn{width:calc(var(--b)*1.15) !important;height:calc(var(--b)*1.15) !important;border-radius:50% !important;background:radial-gradient(circle at 50% 35%,#3a4670,#121830) !important;border:1px solid #000 !important;box-shadow:0 0 0 2px #0a0d18,0 0 0 3.5px rgba(240,195,90,.75),0 6px 14px rgba(0,0,0,.6) !important}
.townBtn img{left:14% !important;top:10% !important;width:72% !important;height:72% !important}
.townBtn .dot{background:#5ad05a !important;border:1px solid #000 !important;box-shadow:0 0 0 1.5px #fff2d0}
.banner span{background:linear-gradient(90deg,rgba(7,10,20,0),rgba(7,10,20,.9) 18%,rgba(7,10,20,.9) 82%,rgba(7,10,20,0)) !important;border-top:1px solid;border-bottom:1px solid;border-image:linear-gradient(90deg,rgba(240,195,90,0),rgba(240,195,90,.85),rgba(240,195,90,0)) 1;padding:.35em 2.8em .45em !important;font-family:var(--serif);letter-spacing:.12em;text-transform:uppercase}
.banner{font-family:var(--serif)}
.hint{font-size:calc(var(--fs)*.95) !important;border:1px solid rgba(240,195,90,.6) !important;border-radius:10px !important;background:rgba(7,10,20,.94) !important;box-shadow:0 0 0 1px #000,0 8px 18px rgba(0,0,0,.55) !important;bottom:calc(var(--b)*1.55) !important}
.tp,.spec,.pill,.ecard{border:1px solid rgba(240,195,90,.55) !important;border-image:none !important;border-radius:12px !important;background:radial-gradient(120% 90% at 50% 0%,#243052,#10162a 60%,#090c18) !important;box-shadow:0 0 0 1px #000,0 14px 30px rgba(0,0,0,.65) !important}
.tp{padding:.55em .75em .65em !important}
.pill{padding:.35em .8em !important;font-size:calc(var(--fs)*.9) !important}
.tp h3{font-family:var(--serif);letter-spacing:.08em;text-transform:uppercase;font-size:1em !important;border-bottom:1px solid rgba(240,195,90,.3);padding-bottom:.3em}
.tp h3 small{font-family:var(--font);text-transform:none;letter-spacing:0;margin-left:auto}
#townP{width:calc(var(--fs)*24) !important;bottom:calc(var(--b)*1.55) !important}
.trow{padding:.3em 0 !important;border-top:1px solid rgba(255,255,255,.06) !important}
.trow .tn{font-size:.92em !important}
.trow .ti0,.trow img.ti0{width:2em;height:2em;object-fit:contain}
.ub{background:linear-gradient(180deg,#fff3c8 0%,#f6d276 34%,#d49b33 64%,#e9b54d 100%) !important;border:1px solid #4a2e08 !important;border-radius:8px !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 0 0 1.5px #140c02 !important;color:#2a1600 !important;text-shadow:none !important;font-weight:900;height:2.1em}
.ub.off{background:rgba(0,0,0,.45) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14) !important;border-color:transparent !important;color:#9aa3b8 !important}
.ub.off img{filter:grayscale(1) brightness(.7)}
.ub.max{background:rgba(70,150,60,.3) !important;box-shadow:inset 0 0 0 1px rgba(156,255,138,.45) !important;border-color:transparent !important;color:#c8ffb8 !important}
#barrP .ub.alt{background:linear-gradient(180deg,#46516f,#262e48 55%,#191f34) !important;color:#f3e6c4 !important}
#barrP .ub.red{background:linear-gradient(180deg,#9a3a2e,#5a1a14) !important;color:#ffe0d0 !important}
.pips i{background:#1a2036 !important;border:1px solid #000 !important}
.pips i.on{background:linear-gradient(#ffe9a0,#d49b33) !important;box-shadow:0 0 4px rgba(255,210,90,.6)}
#ring .ringbg{display:none}
#ring .opt{border:1px solid #000 !important;background:radial-gradient(circle at 50% 35%,#34416a,#121830 75%) !important;box-shadow:0 0 0 2px #0a0d18,0 0 0 3.5px rgba(240,195,90,.75),0 8px 16px rgba(0,0,0,.6) !important}
#ring .opt.armed{box-shadow:0 0 0 2px #0a0d18,0 0 0 3.5px #ffe08a,0 0 20px rgba(255,220,130,.85) !important}
#ring .cost{background:#140c02 !important;border:1px solid rgba(240,195,90,.6) !important;font-size:calc(var(--fs)*.85) !important;padding:0 .45em !important;border-radius:6px !important}
.card{border:1px solid rgba(255,255,255,.14) !important;border-image:none !important;border-radius:10px !important;background:linear-gradient(180deg,rgba(30,38,66,.95),rgba(10,13,26,.95)) !important;padding:.4em .35em .45em !important}
.card.armed{border-color:#ffe08a !important;box-shadow:0 0 0 1px #ffe08a,0 0 16px rgba(255,210,90,.6) !important}
.card .nm{font-family:var(--serif);letter-spacing:.04em}
.card .pr{background:#140c02 !important;border:1px solid rgba(240,195,90,.6) !important;border-radius:6px !important}
.spec .ttl{font-family:var(--serif);letter-spacing:.1em;text-transform:uppercase;background:#140c02 !important;border:1px solid rgba(240,195,90,.6) !important}
.ecard .nm{font-family:var(--serif);letter-spacing:.06em}
/* results */
#scrEnd .panel{min-width:min(30em,70%);text-align:center}
#scrEnd h2{font-size:calc(var(--fs)*2.2) !important}
#scrEnd.lose h2{background:linear-gradient(180deg,#ffd9d0,#e0604a 60%,#8a2a1a) !important;-webkit-background-clip:text !important;background-clip:text !important}
.endIco{width:calc(var(--h)*.16) !important;height:calc(var(--h)*.16) !important;filter:drop-shadow(0 0 16px rgba(255,210,90,.55))}
#endStars img{width:calc(var(--h)*.11);height:calc(var(--h)*.11);filter:grayscale(1) brightness(.3);margin:0 .1em}
#endStars img.on{filter:drop-shadow(0 0 10px rgba(255,210,90,.85));animation:star .5s backwards}
#endStars img.on:nth-child(2){animation-delay:.25s;transform:translateY(-12%)}#endStars img.on:nth-child(3){animation-delay:.5s}
#endStars img:nth-child(2){transform:translateY(-12%) scale(1.15)}
.rew{background:rgba(0,0,0,.35) !important;border:1px solid rgba(255,255,255,.08) !important}
.rew .rl span{color:#c9d4ee}
/* relic categories */
.rCats{flex:1;min-height:0;display:flex;flex-direction:column;gap:.35em;overflow-y:auto}
.rCat{display:flex;align-items:center;gap:.6em;padding:.3em .5em;border-radius:10px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.05)}
.rcL{width:4.6em;flex:none;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.rcL img{width:1.9em;height:1.9em;object-fit:contain}
.rcL b{font-family:var(--serif);font-size:.72em;letter-spacing:.12em;text-transform:uppercase;color:#e9d39a}
.rcL small{font-size:.66em;color:#aeb8d0}
.rcI{display:flex;gap:.4em;flex:1;min-width:0}
.rcI .relic{width:calc(var(--h)*.125);flex:none;padding:.25em .15em .3em}
.relHub .rcI .relic img{width:calc(var(--h)*.085);height:calc(var(--h)*.085)}
.rslot{width:calc(var(--h)*.115) !important;height:calc(var(--h)*.115) !important}
.rHow{flex:none;display:flex;align-items:center;gap:.5em;font-size:.74em;color:#c9d4ee;padding:.1em .2em}
.rHow img{width:2em;height:2em;object-fit:contain}
.rHow b{color:#ffe08a}
#townP .x{right:.45em !important;top:.45em !important;width:2em !important;height:2em !important;font-size:.9em}
#townP h3{padding-right:2.6em}
#townP h3 small{white-space:nowrap}
/* campaign hub */
.campHub{gap:1em}
.cMap{position:relative;flex:1;min-width:0;border-radius:14px;overflow:hidden;background:url(../assets/map_gr2.webp) center/cover;box-shadow:inset 0 0 0 1px rgba(240,195,90,.45),inset 0 0 60px rgba(0,0,0,.85)}
.cMap::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(6,9,18,.15),rgba(6,9,18,.7))}
.cPath{position:absolute;inset:0;width:100%;height:100%}
.cPath polyline{fill:none;stroke:rgba(255,226,140,.75);stroke-width:.7;stroke-dasharray:1.4 1.6;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-width:3px;stroke-dasharray:2 9}
.node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;border:none;background:none;padding:0;cursor:pointer;color:inherit;font:inherit}
.node .nm{flex:none;width:calc(var(--h)*.13);height:calc(var(--h)*.13);border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:900;font-size:calc(var(--h)*.055);color:#2a1600;background:radial-gradient(circle at 40% 30%,#fff3c8,#e0a83c 55%,#8a5a10);box-shadow:0 0 0 2px #140c02,0 0 0 4px rgba(240,195,90,.8),0 8px 16px rgba(0,0,0,.7)}
.node:not(.done):not(.cur) .nm{filter:saturate(.35) brightness(.75)}
.node.cur .nm{animation:ready2 1.4s ease-in-out infinite}
.node.sel .nm{box-shadow:0 0 0 2px #140c02,0 0 0 4px #fff3cf,0 0 22px rgba(255,220,130,.9)}
.node .ns{display:flex;margin-top:.15em}
.node .ns img{width:1.15em;height:1.15em;filter:grayscale(1) brightness(.4)}
.node .ns img.on{filter:drop-shadow(0 0 4px rgba(255,210,90,.9))}
.node .nn{font-family:var(--serif);font-weight:800;font-size:.72em;letter-spacing:.04em;white-space:nowrap;padding:.1em .6em;border-radius:6px;background:rgba(7,10,20,.85);border:1px solid rgba(240,195,90,.35);margin-top:.1em}
.lCard{width:34%;flex:none;display:flex;flex-direction:column;gap:.35em;padding:.6em;border-radius:14px;background:linear-gradient(180deg,rgba(20,26,48,.95),rgba(8,11,22,.96));border:1px solid rgba(240,195,90,.5)}
.lThumb{position:relative;height:calc(var(--h)*.27);border-radius:9px;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.lN{position:absolute;left:.4em;top:.4em;font-family:var(--serif);font-size:.68em;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:.15em .6em;border-radius:6px;background:rgba(7,10,20,.85);color:#ffe08a}
.lT{font-family:var(--serif);font-weight:800;font-size:1.15em;color:#fff3cf;line-height:1.1}
.lS img{width:1.5em;height:1.5em;filter:grayscale(1) brightness(.4)}.lS img.on{filter:drop-shadow(0 0 5px rgba(255,210,90,.9))}
.lD{font-size:.8em;color:#c9d4ee;line-height:1.25}
.lF{display:flex;gap:.8em;font-size:.75em;font-weight:800;color:#d9b66a}
.lCard .pbtn{margin-top:auto;width:100%}
.tab.lk{opacity:.45}.tab.lk::after{content:'';display:inline-block;width:1em;height:1em;margin-left:.3em;vertical-align:-.12em;background:url(../assets/ico_lock.webp) center/contain no-repeat}
/* screen transitions + loading */
.screen.on{animation:scrIn .22s ease-out}
@keyframes scrIn{from{opacity:0;transform:scale(1.015)}}
#scrHud,.screen#scrOpen.on{animation:none}
#scrLoad{background:#05070d}
#scrLoad::before{content:'';position:absolute;inset:-4%;background:url(../assets/title.webp) center/cover;filter:blur(8px) brightness(.35)}
#scrLoad>*{position:relative}
.ldT{font-family:var(--serif) !important;font-size:calc(var(--h)*.11) !important;background:linear-gradient(180deg,#fffbe8,#ffe08a 42%,#d1902a 70%,#f5c862);-webkit-background-clip:text;background-clip:text;color:transparent !important;text-shadow:none !important;filter:drop-shadow(0 3px 0 #2c1903)}
.ldBar{border:1px solid rgba(240,195,90,.6) !important;background:rgba(0,0,0,.6) !important;height:8px !important}
.ldTx{font-family:var(--serif);letter-spacing:.2em;text-transform:uppercase;font-size:.8em}
/* ===== UI pass 4: cards, states, info, tabs at the bottom ===== */
.hubTop{position:relative;height:calc(var(--h)*.14) !important}
.hubTitle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.55em;padding:.25em 2.2em;white-space:nowrap;background:linear-gradient(90deg,rgba(7,10,20,0),rgba(7,10,20,.92) 18%,rgba(7,10,20,.92) 82%,rgba(7,10,20,0));border-top:1px solid;border-bottom:1px solid;border-image:linear-gradient(90deg,rgba(240,195,90,0),rgba(240,195,90,.85),rgba(240,195,90,0)) 1}
.hubTitle img{width:2.1em;height:2.1em;object-fit:contain;border-radius:50%}
.hubTitle span{font-family:var(--serif);font-weight:900;font-size:1.35em;letter-spacing:.1em;text-transform:uppercase;background:linear-gradient(180deg,#fff6dc,#f0c35a 60%,#b87a1e);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.85))}
.ib{width:1.55em;height:1.55em;flex:none;border-radius:50%;display:inline-grid;place-items:center;padding:0;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:900;font-size:.82em;line-height:1;color:#fff;background:linear-gradient(#4a7ee0,#1e3f8a);border:1px solid #000;box-shadow:0 0 0 1.5px rgba(255,255,255,.55),0 2px 4px rgba(0,0,0,.5);cursor:pointer}
.cur{gap:.3em}
.cur b{font-family:var(--font);font-size:1.12em}
.cur .plus{width:1.45em;height:1.45em;margin-left:.35em;margin-right:-.55em;border-radius:50%;display:grid;place-items:center;padding:0;font-family:var(--font);font-weight:900;font-size:.95em;line-height:1;color:#fff;background:linear-gradient(#7ad35a,#2f8f2a);border:1px solid #000;box-shadow:0 0 0 1.5px rgba(255,255,255,.45);cursor:pointer}
.cur.pts span{font-weight:700;color:#c9d4ee;font-size:.85em}
.hubBar{flex:none;display:flex;justify-content:center;gap:.7em;padding-top:.55em;height:calc(var(--h)*.125)}
.hTab{flex:0 1 13em;display:flex;align-items:center;justify-content:center;gap:.45em;border-radius:12px;border:1px solid #000;background:linear-gradient(180deg,#2a3150,#161b30);color:#8f98b5;font-family:var(--serif);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.86em;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 0 rgba(0,0,0,.55);cursor:pointer}
.hTab img{width:1.8em;height:1.8em;object-fit:contain;border-radius:50%;opacity:.6}
.hTab.on{color:#2a1600;background:linear-gradient(180deg,#fff3c8,#f6d276 34%,#d49b33 64%,#e9b54d);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -3px 0 rgba(110,62,10,.45),0 0 0 1.5px rgba(240,195,90,.6),0 4px 0 rgba(0,0,0,.55)}
.hTab.on img{opacity:1}
.hTab.lk{opacity:.45}.hTab.lk::after{content:'';display:inline-block;width:1em;height:1em;background:url(../assets/ico_lock.webp) center/contain no-repeat}
.tabs{display:none}
.pbtn.poor{background:linear-gradient(180deg,#3a3f52,#22263a) !important;color:#ff6b5a !important;text-shadow:none !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 2px #03050b,0 0 0 3px rgba(255,255,255,.12),0 6px 14px rgba(0,0,0,.5) !important}
.pbtn .c{font-family:var(--font);font-weight:900;font-size:1.08em;letter-spacing:0}
/* upgrade card */
.uc{display:flex;align-items:center;gap:.55em;padding:.38em .45em .38em .4em;border-radius:12px;background:linear-gradient(180deg,rgba(40,48,78,.92),rgba(16,20,38,.96));border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 3px 0 rgba(0,0,0,.45);min-width:0}
.uc.can{border-color:rgba(240,195,90,.6)}
.uc.own{border-color:rgba(156,255,138,.28);background:linear-gradient(180deg,rgba(34,58,40,.85),rgba(14,22,18,.95))}
.uc.lock{opacity:.5}
.ucI{width:2.5em;height:2.5em;flex:none;border-radius:10px;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#3a4670,#141a30);box-shadow:inset 0 0 0 1px rgba(240,195,90,.35)}
.ucI img{width:86%;height:86%;object-fit:contain}
.ucI.rn{font-family:var(--serif);font-weight:900;color:#ffe08a;font-size:1em}
.ucM{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:.14em}
.ucN{max-width:100%;font-family:var(--serif);font-weight:800;font-size:.82em;letter-spacing:.05em;color:#fff3cf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.ucV{max-width:100%;display:inline-flex;align-items:baseline;gap:.35em;padding:.05em .6em;border-radius:999px;background:rgba(0,0,0,.45);font-weight:900;font-size:.86em;white-space:nowrap;overflow:hidden}
.ucV span{color:#e6ecff}.ucV b{color:#ffd25a}.ucV em{font-style:normal;color:#7fe86a}
.uc.own .ucV em{color:#b8ffa8}
.ucL{font-size:.68em;font-weight:800;color:#6fd7ff;letter-spacing:.02em}
.ucB{flex:none;min-width:4.3em;height:2.4em;padding:0 .7em;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:.25em;font-family:var(--font);font-weight:900;font-size:.95em;cursor:pointer;border:1px solid #000}
.ucB img{width:1.25em;height:1.25em}
.ucB.can{background:linear-gradient(180deg,#fff3c8,#f6d276 34%,#d49b33 64%,#e9b54d);color:#2a1600;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -3px 0 rgba(110,62,10,.45),0 0 0 1.5px rgba(240,195,90,.6),0 3px 0 rgba(0,0,0,.5)}
.ucB.poor{background:linear-gradient(180deg,#3a3f52,#22263a);color:#ff6b5a;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 0 rgba(0,0,0,.5)}
.ucB.poor img{filter:grayscale(.7) brightness(.8)}
.ucB.own{background:rgba(60,150,60,.32);color:#b8ffa8;box-shadow:inset 0 0 0 1px rgba(156,255,138,.5);border-color:transparent}
.ucB.lock{background:rgba(0,0,0,.35);color:#8a90a2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);border-color:transparent}
.ucB:active{transform:translateY(1px)}
/* city */
.cityHub{gap:.7em !important}
.cCol2{flex:1;min-width:0;display:flex;flex-direction:column;gap:.35em;min-height:0}
.cColH{display:flex;align-items:center;gap:.5em;padding:.2em .3em}
.cColH img{width:2em;height:2em;object-fit:contain}
.cColH>div{flex:1;min-width:0}
.cColH b{display:block;font-family:var(--serif);font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#ffe9a8;font-size:.9em}
.cColH .lvBar{height:.4em;margin-top:.2em}
.cColH small{font-family:var(--font);font-weight:900;color:#fff3cf}
.cList{flex:1;min-height:0;display:flex;flex-direction:column;gap:.3em;overflow-y:auto;padding-right:2px}
.cList .uc{padding:.28em .4em}
.cList .ucI{width:2.1em;height:2.1em}
/* town panel */
#townP{width:min(calc(var(--fs)*38),66vw) !important}
.tGrid{display:grid;grid-template-columns:1fr 1fr;gap:.4em}
.tGrid .choice{grid-column:1/-1}
#townP h3{display:flex;align-items:center;gap:.45em}
#townP h3 .ib{font-size:.7em}
/* treasury */
.chests2{flex:1;display:flex;gap:.75em;justify-content:center;align-items:stretch;width:100%;min-height:0}
.chc{position:relative;flex:0 1 13em;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.28em;padding:.55em .55em .6em;border-radius:14px;border:1px solid rgba(0,0,0,.85);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1.5px var(--cr),0 10px 20px rgba(0,0,0,.55);background:var(--cg);text-align:center}
.chc .ib{position:absolute;right:.45em;top:.45em}
.chT{font-family:var(--serif);font-weight:900;font-size:1em;letter-spacing:.06em;text-transform:uppercase;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.6);padding:0 1.2em}
.chS{font-size:.7em;font-weight:800;padding:.12em .7em;border-radius:999px;background:rgba(0,0,0,.42);white-space:nowrap}
.chI{height:calc(var(--h)*.24);max-width:100%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.6));animation:bob 3s ease-in-out infinite}
.chI.dim{filter:grayscale(.6) brightness(.6) drop-shadow(0 8px 10px rgba(0,0,0,.6));animation:none}
@keyframes bob{50%{transform:translateY(-4%)}}
.chN{position:absolute;right:16%;top:44%;min-width:1.8em;height:1.8em;border-radius:999px;display:grid;place-items:center;background:linear-gradient(#ff6a4a,#c8281a);border:1px solid #2a0600;box-shadow:0 0 0 1.5px #ffd9b0;font-weight:900;font-size:.9em}
.chG{width:100%;font-size:.7em;font-weight:800;line-height:1.25;padding:.32em .5em;border-radius:8px;background:rgba(0,0,0,.42)}
.chA{margin-top:auto;display:flex;gap:.35em;width:100%}
.chA .pbtn{flex:1;min-width:0;font-size:.78em;padding:.3em .4em !important;min-height:2.4em}
.chE{flex:1;font-size:.74em;font-weight:900;color:rgba(255,255,255,.8);padding:.65em 0;border-radius:9px;background:rgba(0,0,0,.3)}
.chc.daily{--cg:linear-gradient(170deg,#2f6a5a,#102a24);--cr:rgba(120,230,190,.6)}
.chc.bronze{--cg:linear-gradient(170deg,#8a5428,#2e180a);--cr:rgba(230,160,90,.7)}
.chc.silver{--cg:linear-gradient(170deg,#4d6fa8,#141f40);--cr:rgba(150,190,255,.75)}
.chc.gold{--cg:linear-gradient(170deg,#7a3fa8,#24103e);--cr:rgba(255,200,90,.9)}
/* goal strip */
.goal{position:absolute;left:.6em;top:.6em;z-index:2;display:flex;align-items:center;gap:.6em;padding:.35em .6em;border-radius:12px;background:rgba(7,10,20,.86);border:1px solid rgba(240,195,90,.45)}
.goal.sm{position:static;background:none;border:none;padding:0;margin:-.2em 0 .6em}
.gT{display:flex;flex-direction:column;line-height:1.15}
.gT small{font-family:var(--serif);font-size:.6em;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#d9b66a}
.gT b{font-family:var(--serif);font-size:.76em;color:#fff3cf;white-space:nowrap}
.gI{display:flex;gap:.35em}
.gp{position:relative;width:calc(var(--h)*.085);height:calc(var(--h)*.085);border-radius:8px;background:linear-gradient(#f6d276,#b87a1e);box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),0 2px 0 rgba(0,0,0,.5);display:grid;place-items:center;overflow:hidden}
.gp img{width:94%;height:94%;object-fit:contain;filter:brightness(0) opacity(.7)}
.gp.done img{filter:none}
.gp i{position:absolute;right:.05em;bottom:-.1em;font-style:normal;font-weight:900;font-size:1.1em;color:#4ce04c;text-shadow:0 1px 0 #000,0 0 3px #000}
.chW{position:relative;flex:1;min-height:0;width:100%;display:grid;place-items:center}
.chW .chI{height:min(100%,calc(var(--h)*.34))}
.chI.dim{filter:none !important;opacity:.45}
.chN{right:8% !important;top:auto !important;bottom:8%}
.goal.sm .gT{display:none}
.goal.sm .gp{width:calc(var(--h)*.075);height:calc(var(--h)*.075)}
.goal.sm::before{content:'Guardians';font-family:var(--serif);font-size:.62em;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#d9b66a;margin-right:.2em}
.hLogo .l1{font-size:calc(var(--h)*.1) !important}
.hLeft{gap:calc(var(--h)*.03) !important}
/* info popup */
#scrInfo{z-index:25;cursor:pointer}
.infoP{max-width:min(30em,80%);text-align:left}
.infoP h2{text-align:center}
.infoB{font-size:.92em;line-height:1.4;color:#dfe6f6}
.infoB p{margin:.35em 0}.infoB b{color:#ffe08a}
.odds2{width:100%;border-collapse:collapse;margin:.3em 0;text-align:center;font-weight:900}
.odds2 td{padding:.2em;border-bottom:1px solid rgba(255,255,255,.1)}
.hLogoImg{width:calc(var(--h)*.54);align-self:center;max-width:95%;margin-left:-.3em;filter:drop-shadow(0 8px 14px rgba(0,0,0,.6));animation:logoIn .9s cubic-bezier(.3,1.4,.5,1)}
@keyframes logoIn{from{opacity:0;transform:scale(.7) translateY(-10%)}}
.hLeft{gap:calc(var(--h)*.015) !important}
.ldLogo{width:min(60%,calc(var(--h,400px)*1.1));filter:drop-shadow(0 10px 20px rgba(0,0,0,.7));animation:logoIn 1s ease-out}
.ldT{display:none}
.bossI{position:absolute;left:0;right:0;top:30%;height:30%;display:flex;align-items:center;justify-content:center;gap:1em;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(40,0,40,0),rgba(30,6,40,.92) 25%,rgba(30,6,40,.92) 75%,rgba(40,0,40,0));border-top:1px solid;border-bottom:1px solid;border-image:linear-gradient(90deg,rgba(180,108,255,0),rgba(200,140,255,.9),rgba(180,108,255,0)) 1}
.bossI.on{animation:bossIn 3.2s ease-in-out forwards}
.bossI img{height:150%;margin-top:-6%;filter:drop-shadow(0 0 18px rgba(170,110,255,.8));transform:translateX(-30%)}
.bossI.on img{animation:bossImg 3.2s ease-out forwards}
.bt{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.bt small{font-family:var(--serif);letter-spacing:.3em;text-transform:uppercase;color:#d8b8ff;font-size:calc(var(--fs)*.9)}
.bt b{font-family:var(--serif);font-weight:900;font-size:calc(var(--h)*.11);letter-spacing:.08em;background:linear-gradient(#fff,#d8b8ff 55%,#8a4ad8);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #1a0628)}
.bt span{font-family:var(--serif);color:#efdcff;letter-spacing:.14em;text-transform:uppercase;font-size:calc(var(--fs)*1)}
@keyframes bossIn{0%{opacity:0;transform:scaleY(.2)}10%{opacity:1;transform:none}85%{opacity:1}100%{opacity:0}}
@keyframes bossImg{0%{transform:translateX(-60%) scale(.8);opacity:0}15%{transform:translateX(0) scale(1);opacity:1}100%{transform:translateX(6%) scale(1.04)}}
.endRays{position:absolute;left:50%;top:38%;width:130vmin;height:130vmin;margin:-65vmin 0 0 -65vmin;background:repeating-conic-gradient(rgba(255,220,130,.18) 0 7deg,rgba(255,220,130,0) 7deg 20deg);-webkit-mask:radial-gradient(circle,#000 15%,transparent 65%);mask:radial-gradient(circle,#000 15%,transparent 65%);animation:spin 18s linear infinite;pointer-events:none}
#scrEnd.lose .endRays{display:none}
#scrEnd .panel{animation:panelIn .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes panelIn{from{transform:scale(.7);opacity:0}}
.home .hBg{background-position:80% 40% !important}
.hLeft{justify-content:space-evenly !important;padding-bottom:.4em}
.camp{padding:.55em .85em .75em !important}
.cMeta{margin-bottom:.35em !important}
.goal.sm{margin:0 0 .5em !important}
.btnP.big{height:calc(var(--h)*.12) !important}
.show img{left:30% !important;height:calc(var(--h)*.55) !important}
.show .ped{left:30% !important}
.plate{left:30% !important}
.setb{display:inline-block;margin-right:.4em;padding:.05em .5em;border-radius:6px;background:rgba(156,255,138,.15);color:#b8ffa8;font-weight:800}
.rSlotsBox .smallBtn{margin-left:.3em}
.ibtn img{width:100% !important;height:100% !important}
.ibtn{background:none !important;box-shadow:0 4px 10px rgba(0,0,0,.5) !important;border:none !important}
.townBtn img{left:0 !important;top:0 !important;width:100% !important;height:100% !important}
.townBtn{background:none !important}

/* ---- v15 mobile polish ---- */
.infoP{position:relative;max-width:min(26em,86%) !important;padding:calc(var(--h)*.085) 1.4em 1.1em !important;border-radius:18px !important;background:linear-gradient(180deg,#1b2442 0%,#10162b 100%) !important;border:1px solid rgba(240,195,90,.55) !important;box-shadow:0 0 0 3px rgba(0,0,0,.45),0 18px 50px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.08) !important;animation:infoIn .28s cubic-bezier(.2,1.4,.4,1)}
@keyframes infoIn{from{transform:translateY(16px) scale(.92);opacity:0}to{transform:none;opacity:1}}
.infoIc{position:absolute;left:50%;top:0;transform:translate(-50%,-52%);width:calc(var(--h)*.16);height:calc(var(--h)*.16);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#2b3a66,#121a33);border:2px solid #e9b54d;box-shadow:0 6px 18px rgba(0,0,0,.6),0 0 0 4px rgba(0,0,0,.35)}
.infoIc img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.infoP h2{font-size:1.35em !important;margin:.1em 0 .5em !important}
.infoB{font-family:var(--font);font-size:.95em !important;line-height:1.38 !important}
.infoB p{display:flex;gap:.7em;align-items:flex-start;margin:0 !important;padding:.55em .2em;border-top:1px solid rgba(255,255,255,.07)}
.infoB p:first-child{border-top:none}
.infoB p i{flex:0 0 .55em;height:.55em;margin-top:.45em;border-radius:2px;transform:rotate(45deg);background:linear-gradient(135deg,#fff3c8,#d49b33);box-shadow:0 0 6px rgba(240,195,90,.6)}
.infoB table{width:100%;border-collapse:separate;border-spacing:.25em;margin:.3em 0}
.infoB td,.infoB th{background:rgba(255,255,255,.05);border-radius:8px;padding:.35em .2em;text-align:center}
#infoOk{min-width:9em;margin-top:.6em}
/* banner: slimmer ribbon higher up, gold type */
.banner{top:22% !important}
.banner span{font-size:calc(var(--fs)*1.25) !important;padding:.5em 3.2em .55em !important;letter-spacing:.16em !important;color:#ffe9b0;text-shadow:0 2px 0 #000,0 0 14px rgba(255,190,80,.55) !important;background:linear-gradient(90deg,rgba(10,13,26,0),rgba(10,13,26,.94) 16%,rgba(10,13,26,.94) 84%,rgba(10,13,26,0)) !important}
/* tactile buttons */
button{transition:transform .08s ease,filter .08s ease}
button:active:not(:disabled):not(.opt):not(.playBtn){transform:scale(.95);filter:brightness(1.12)}
#ring.open .opt:active{transform:translate(var(--x),var(--y)) scale(.92)}
.ibtn:active{transform:scale(.92)}
#ring .opt:active:not(:disabled){filter:brightness(1.15)}
.screen.on .hubIn,.screen.on .panel{animation:scrIn .22s ease-out}
@keyframes scrIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* body text with real font, numbers tabular */
body{font-feature-settings:'tnum' 1,'lnum' 1;-webkit-font-smoothing:antialiased}
.ucN,.htile b,.tab,.hubT,.cName{font-family:var(--serif)}
.oracle{display:none;position:absolute;left:50%;top:calc(var(--h)*.3);transform:translateX(-50%);z-index:6;pointer-events:auto;text-align:center;animation:infoIn .3s ease-out}
.oracle.on{display:block}
.orT{display:inline-block;padding:.3em 1.2em .35em;border-radius:12px;background:rgba(8,11,22,.86);border:1px solid rgba(240,195,90,.35)}
.orT b{display:block;font-family:var(--serif);font-weight:900;letter-spacing:.12em;color:#ffe7a8;font-size:calc(var(--fs)*1.05);text-shadow:0 2px 0 #000}
.orT small{color:#cfd6ee;font-size:calc(var(--fs)*.72);text-shadow:0 1px 0 #000}
.orC{display:flex;gap:.6em;margin-top:.45em}
.orX{margin-left:.5em;padding:.1em .7em;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:rgba(10,13,26,.8);color:#cfd6ee;font-size:calc(var(--fs)*.68);font-weight:700}
.orCard{width:calc(var(--h)*.27);padding:.55em .5em .6em;border-radius:12px;border:1px solid rgba(240,195,90,.6);background:linear-gradient(180deg,rgba(30,38,70,.96),rgba(12,16,32,.96));box-shadow:0 8px 20px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);color:#e9ecf8;display:flex;flex-direction:column;align-items:center;gap:.15em;cursor:pointer}
.orCard img{width:calc(var(--h)*.075);height:calc(var(--h)*.075);object-fit:contain}
.orCard small{font-family:var(--serif);color:#d9b66a;font-weight:800;letter-spacing:.14em;font-size:calc(var(--fs)*.62);text-transform:uppercase}
.orCard b{font-family:var(--serif);font-weight:900;font-size:calc(var(--fs)*.88);color:#fff3cf}
.orCard span{font-size:calc(var(--fs)*.66);line-height:1.25;color:#c6cde6}
/* ================= SKIN v4 · "Bronze & Night Marble" ================= */
:root{--sk-bronze:#c08745;--sk-bronzeL:#f3cf86;--sk-bronzeD:#5a3818;--sk-marble:#18201d;--sk-ink:#f4ead2;--sk-dim:#b9ab8c;--sk-aegean:#57a7cf;--sk-crimson:#a8332a;--sk-ok:#9fe07a}
/* -- framed panels (9-slice art) -- */
.panel,.infoP,.tp,.camp,.oCard{border-style:solid !important;border-color:transparent !important;border-width:calc(var(--h)*.05) calc(var(--h)*.024) !important;border-image:url(../assets/ui_panel.webp) 140 62 fill / calc(var(--h)*.05) calc(var(--h)*.024) round stretch !important;background:none !important;border-radius:0 !important;box-shadow:none !important;filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}
.panel{padding:.2em 1.2em .5em !important}
.tp{padding:.15em .4em .2em !important}
.camp{padding:.1em .7em .35em !important}
.infoP{padding:calc(var(--h)*.06) 1.1em .4em !important}
.panel h2,.infoP h2{font-family:var(--serif);font-weight:900;letter-spacing:.08em;background:linear-gradient(180deg,#fff7dd,#f3cf86 55%,#b77a2c);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.75))}
/* -- buttons -- */
.pbtn,.btnP{border-style:solid !important;border-color:transparent !important;border-width:7px 12px 15px !important;border-image:url(../assets/ui_btn_gold2.webp) 60 55 190 55 fill / 7px 12px 15px round stretch !important;background:none !important;border-radius:0 !important;box-shadow:none !important;color:#3a2006 !important;text-shadow:0 1px 0 rgba(255,240,200,.6) !important;filter:drop-shadow(0 4px 6px rgba(0,0,0,.55));min-height:0 !important}
.pbtn.alt,.pbtn.tog,.pbtn.offT,.smallBtn{border-image:url(../assets/ui_btn_marble.webp) 55 fill / 7px 12px round stretch !important;border-width:7px 12px !important;color:var(--sk-ink) !important;text-shadow:0 1px 0 #000 !important}
.pbtn:active,.btnP:active{transform:translateY(2px) scale(.98) !important;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)) brightness(1.08)}
.btnP.big{font-size:1.25em !important;letter-spacing:.22em !important;padding:.25em 1.2em .35em !important}
/* -- hub screens: one place, framed -- */
.hub{background:#0c0907 url(../assets/bg_home.webp) center/cover !important}
.hub::before{content:'';position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 30%,rgba(12,9,7,.55),rgba(8,6,4,.92) 75%);pointer-events:none}
.hubIn{z-index:1}
.hubTop{border-bottom:none !important}
.hubTitle{position:relative;padding:.25em 2.4em .45em;background:url(../assets/ui_ribbon.webp) center/100% 100% no-repeat;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.hubTitle span{font-family:var(--serif);font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#fff3d6 !important;-webkit-text-fill-color:#fff3d6;background:none !important;text-shadow:0 2px 0 #4a0c08,0 0 10px rgba(0,0,0,.4)}
.hubTitle img{display:none}
.back.closeX{width:calc(var(--h)*.12) !important;height:calc(var(--h)*.12) !important;border:none !important;border-radius:50% !important;background:url(../assets/ui_socket.webp) center/100% 100% no-repeat !important;box-shadow:none !important;font-size:0 !important;position:relative;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.back.closeX::after{content:'';position:absolute;inset:24%;background:url(../assets/ic2_back.webp) center/contain no-repeat}
.hTab{background:url(../assets/ui_btn_marble.webp) center/100% 100% !important;border:none !important;border-radius:8px !important;color:var(--sk-dim) !important;box-shadow:0 3px 6px rgba(0,0,0,.5) !important}
.hTab.on{background:url(../assets/ui_btn_gold2.webp) center/100% 100% !important;color:#3a2006 !important;text-shadow:0 1px 0 rgba(255,240,200,.6)}
/* cards & rows inside hubs: marble slabs with bronze hairline */
.uc,.tile,.card,.htile,.relic,.chest,.hcard,.perk,.stat{background:linear-gradient(180deg,rgba(32,40,36,.96),rgba(14,18,16,.97)) !important;border:1px solid rgba(243,207,134,.38) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.45) !important}
.uc.can,.htile.on,.hcard.on{border-color:rgba(243,207,134,.9) !important;box-shadow:inset 0 0 18px rgba(243,207,134,.12),0 0 0 1px #000,0 0 14px rgba(243,207,134,.25) !important}
/* -- home -- */
.home .hBg{background:url(../assets/bg_home.webp) center/cover no-repeat !important;animation:kb 50s ease-in-out infinite alternate}
.home .hShade{background:linear-gradient(90deg,rgba(10,7,4,.78) 0%,rgba(10,7,4,.35) 38%,rgba(10,7,4,0) 60%),linear-gradient(0deg,rgba(10,7,4,.8),rgba(10,7,4,0) 30%) !important}
.dock{background:none !important;border:none !important;position:relative}
.dock::before{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + var(--h)*.012);width:min(92%,calc(var(--h)*1.55));height:calc(var(--h)*.15);background:url(../assets/ui_bar.webp) center/100% 100% no-repeat;filter:drop-shadow(0 6px 10px rgba(0,0,0,.7));pointer-events:none}
.dk{z-index:1;color:#f3e2b8 !important;text-shadow:0 2px 0 #000}
.dk img{width:calc(var(--h)*.105) !important;height:calc(var(--h)*.105) !important;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.7));transition:transform .15s}
.dk:active img{transform:translateY(2px) scale(.94)}
.dk .bd{z-index:2}
#bSet{width:calc(var(--h)*.11) !important;height:calc(var(--h)*.11) !important;border:none !important;font-size:0 !important;background:url(../assets/ui_socket.webp) center/100% 100% no-repeat !important;position:relative;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
#bSet::after{content:'';position:absolute;inset:22%;background:url(../assets/ic2_settings.webp) center/contain no-repeat}
.cKick{color:var(--sk-bronzeL) !important}
/* embers on the home screen */
.home::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(2px 2px at 20% 80%,rgba(255,200,120,.8),transparent),radial-gradient(1.5px 1.5px at 60% 90%,rgba(255,180,90,.7),transparent),radial-gradient(2px 2px at 80% 70%,rgba(255,210,140,.7),transparent),radial-gradient(1.5px 1.5px at 40% 95%,rgba(255,190,110,.6),transparent);background-size:100% 100%;animation:embers 9s linear infinite;opacity:.7}
@keyframes embers{from{transform:translateY(0);opacity:0}15%{opacity:.8}to{transform:translateY(-40%);opacity:0}}
/* -- campaign -- */
.cMap{background-image:url(../assets/bg_campaign.webp);box-shadow:inset 0 0 0 2px rgba(243,207,134,.55),inset 0 0 40px rgba(0,0,0,.55) !important}
/* -- battle HUD -- */
.res{border:none !important;background:url(../assets/ui_bar.webp) center/100% 100% no-repeat !important;box-shadow:none !important;padding:0 1.3em 0 .9em !important;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.stat b{color:#fff3d6 !important;text-shadow:0 2px 0 #000}
.wplate{background:url(../assets/ui_ribbon.webp) center/100% 100% no-repeat !important;border:none !important;padding:.25em 2.4em .45em !important;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.wplate small{color:#ffe0b0 !important}
.wplate span{color:#fff7e0 !important;text-shadow:0 2px 0 #4a0c08}
.pow{background:url(../assets/ui_socket.webp) center/100% 100% no-repeat !important;border:none !important;box-shadow:none !important;filter:drop-shadow(0 5px 7px rgba(0,0,0,.65))}
.pow img{inset:16% !important;width:68% !important;height:68% !important;left:16% !important;top:16% !important;border-radius:50%}
.pow.fav{background-image:url(../assets/ui_socket_laurel.webp) !important}
.heroBtn,.townBtn{filter:drop-shadow(0 5px 7px rgba(0,0,0,.65))}
.townBtn{background:url(../assets/ui_socket_laurel.webp) center/100% 100% no-repeat !important;border:none !important;box-shadow:none !important}
.townBtn img{width:64% !important;height:64% !important;left:18% !important;top:16% !important;object-fit:contain}
.ibtn{background:url(../assets/ui_socket.webp) center/100% 100% no-repeat !important;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.ibtn img{width:56% !important;height:56% !important;margin:22% !important;object-fit:contain}
.manaW .bar{border:none !important;background:url(../assets/ui_bar.webp) center/100% 100% no-repeat !important;box-shadow:none !important;padding:0 6% !important}
#ring .opt{background:url(../assets/ui_socket.webp) center/100% 100% no-repeat !important;border:none !important;box-shadow:none !important;filter:drop-shadow(0 5px 7px rgba(0,0,0,.6))}
#ring .opt img{border-radius:50%}
#ring .cost{background:url(../assets/ui_btn_marble.webp) center/100% 100% !important;border:none !important;color:#ffe7a8 !important;padding:.05em .55em !important}
.pill{border:none !important;background:url(../assets/ui_btn_marble.webp) center/100% 100% !important;box-shadow:0 6px 14px rgba(0,0,0,.6) !important;padding:.45em 1em !important;color:var(--sk-ink)}
.banner span{background:url(../assets/ui_ribbon.webp) center/100% 100% no-repeat !important;padding:.55em 3.6em .8em !important;color:#fff7e0 !important;text-shadow:0 2px 0 #4a0c08 !important}
.orCard{border:none !important;background:url(../assets/ui_card.webp) center/100% 100% no-repeat !important;padding:2.2em .7em 1em !important}
/* ---- skin v4 · round 2 ---- */
/* dock: big emblems that sit on a bronze rail */
.dock{height:calc(var(--h)*.22 + env(safe-area-inset-bottom,0px)) !important;align-items:flex-end;gap:calc(var(--h)*.04)}
.dock::before{height:calc(var(--h)*.1) !important;width:min(94%,calc(var(--h)*1.7)) !important;bottom:calc(env(safe-area-inset-bottom,0px) + var(--h)*.015) !important}
.dk{flex:0 0 calc(var(--h)*.3) !important;justify-content:flex-end !important;padding-bottom:calc(var(--h)*.032) !important;font-size:calc(var(--h)*.03) !important;letter-spacing:.16em !important}
.dk img{width:calc(var(--h)*.15) !important;height:calc(var(--h)*.15) !important;margin-bottom:calc(var(--h)*.012)}
.dk .bd{top:4% !important;right:22% !important}
/* campaign nodes: bronze laurel medallions */
.node .nm{background:url(../assets/ui_socket_laurel.webp) center/100% 100% no-repeat !important;box-shadow:none !important;color:#fff3d6 !important;text-shadow:0 2px 0 #000,0 0 8px rgba(255,200,120,.5);width:calc(var(--h)*.15) !important;height:calc(var(--h)*.15) !important;filter:drop-shadow(0 5px 6px rgba(0,0,0,.7))}
.node:not(.done):not(.cur) .nm{filter:saturate(.4) brightness(.7) drop-shadow(0 5px 6px rgba(0,0,0,.7)) !important}
.node.sel .nm{filter:drop-shadow(0 0 10px rgba(255,220,130,.95)) drop-shadow(0 5px 6px rgba(0,0,0,.7)) !important}
.node .nn{background:url(../assets/ui_btn_marble.webp) center/100% 100% !important;border:none !important;color:#fff0cf !important;padding:.15em .8em .2em !important}
/* treasury: bronze card frames, rarity as a soft glow behind the chest */
.chc{border-style:solid !important;border-color:transparent !important;border-width:calc(var(--h)*.075) calc(var(--h)*.03) calc(var(--h)*.03) !important;border-image:url(../assets/ui_card.webp) 140 62 62 fill / calc(var(--h)*.075) calc(var(--h)*.03) calc(var(--h)*.03) stretch !important;background:none !important;box-shadow:none !important;border-radius:0 !important;filter:drop-shadow(0 8px 14px rgba(0,0,0,.6));position:relative}
.chc .chW{position:relative}
.chc .chW::before{content:'';position:absolute;inset:-10% -5%;border-radius:50%;background:radial-gradient(closest-side,var(--rg,rgba(255,220,140,.35)),transparent);z-index:0}
.chc .chI{position:relative;z-index:1}
.chc.daily{--rg:rgba(120,230,170,.38)} .chc.bronze{--rg:rgba(230,150,80,.38)} .chc.silver{--rg:rgba(140,190,255,.4)} .chc.gold{--rg:rgba(255,205,90,.5)}
.chT{font-family:var(--serif) !important;color:#fff3d6 !important;text-shadow:0 2px 0 #000 !important}
.chS,.chG{color:var(--sk-dim) !important}
/* city: each branch is a framed column */
.cCol{border-style:solid !important;border-color:transparent !important;border-width:calc(var(--h)*.03) calc(var(--h)*.022) !important;border-image:url(../assets/ui_panel.webp) 140 62 fill / calc(var(--h)*.03) calc(var(--h)*.022) round stretch !important;background:none !important;padding:.1em .35em .3em !important}
.cColH{border:none !important}
/* section headings on hub pages */
.cHead,.rsLab b{font-family:var(--serif);letter-spacing:.12em;color:var(--sk-bronzeL) !important}
/* every screen enters the same way (answers the tap) */
.screen.hub.on .hubIn{animation:hubIn .28s cubic-bezier(.2,.9,.3,1)}
@keyframes hubIn{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
.screen.dim.on .panel{animation:infoIn .26s cubic-bezier(.2,1.3,.4,1)}
/* hero hub bottom tabs above the level-up row */
.hubBar{position:relative;z-index:3}
/* battle: town panel title */
.tp .tpT,.tp h3{font-family:var(--serif);color:var(--sk-bronzeL)}

/* ---- skin3: round 3 fixes ---- */
.pbtn.alt,.pbtn.tog,.pbtn.offT,.smallBtn{background:none !important;background-color:transparent !important;box-shadow:0 4px 10px rgba(0,0,0,.45) !important;outline:none !important}
.lkI{width:1.15em;height:1.15em;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.7));vertical-align:middle}
.htile .lk .lkI{width:1.1em;height:1.1em}
.perk .pk .lkI{width:1em;height:1em;opacity:.85}
.hubBar.topTabs{position:absolute !important;top:calc(var(--h)*.03);left:calc(var(--h)*.2);height:calc(var(--h)*.095) !important;padding:0 !important;gap:.5em;z-index:6 !important}
.hubBar.topTabs .hTab{flex:0 0 auto;width:calc(var(--h)*.3);font-size:.78em}
.cCol2{background:linear-gradient(180deg,rgba(10,12,22,.72),rgba(10,12,22,.5));border:1px solid rgba(240,195,90,.22);border-radius:10px;padding:.35em .4em .45em;box-shadow:0 8px 22px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,230,170,.08)}
.cColH{border-bottom:1px solid rgba(240,195,90,.25);padding-bottom:.35em !important;margin-bottom:.1em}
.node .nn{white-space:nowrap}

.townBtn .dot{width:34% !important;height:34% !important;right:-4% !important;top:-4% !important;background:radial-gradient(circle at 35% 30%,#fff6cf,#f2c14e 45%,#a8661a) !important;border:1px solid #3a1d00 !important;box-shadow:0 0 10px rgba(255,200,80,.85) !important}
.townBtn .dot::after{content:'!';position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-weight:900;color:#3a1d00;font-size:calc(var(--h)*.03)}
.ucB.lock .lkI{width:1.5em;height:1.5em;filter:brightness(1.25) drop-shadow(0 1px 1px rgba(0,0,0,.7))}
.perk .pk .lkI{opacity:1;filter:brightness(1.3)}

/* mana: liquid fill seated inside the bronze bar */
.manaW .bar.mana{overflow:visible !important;border-radius:0 !important;height:calc(var(--b)*.36) !important;padding:0 !important}
.manaW .bar.mana i{position:absolute;left:6% !important;top:27% !important;bottom:27% !important;border-radius:3px !important;background:linear-gradient(180deg,#bfe6ff 0%,#4aa3ff 35%,#1f5fc8 70%,#163f8c 100%) !important;box-shadow:0 0 8px rgba(90,170,255,.7),inset 0 1px 0 rgba(255,255,255,.6) !important;transition:width .25s ease-out}
.manaW .bar.mana i::after{content:'';position:absolute;right:-2px;top:-20%;bottom:-20%;width:4px;border-radius:2px;background:#e8f6ff;box-shadow:0 0 8px #9fd6ff}
.manaW .bar.mana span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:calc(var(--fs)*.62) !important;color:#f2f8ff;text-shadow:0 1px 2px #000,0 0 3px #000;letter-spacing:.12em;text-transform:uppercase}

/* ---- victory chest stage ---- */
#scrEnd.hasChest .panel{display:grid !important;grid-template-columns:1fr minmax(0,1.05fr);column-gap:1.2em;min-width:min(52em,88%) !important;align-items:center}
#scrEnd.hasChest .panel>*{grid-column:1}
#scrEnd.hasChest .panel>.endChest{grid-column:2;grid-row:1 / span 5;align-self:stretch}
#scrEnd.hasChest .panel>.row{grid-column:1 / span 2}
#scrEnd.hasChest .endIco{width:calc(var(--h)*.11) !important;height:calc(var(--h)*.11) !important}
#scrEnd.hasChest h2{font-size:calc(var(--fs)*1.55)}
.endChest{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35em;padding:.4em;border-radius:12px;background:radial-gradient(ellipse at 50% 40%,rgba(255,200,90,.16),rgba(0,0,0,.35) 70%);box-shadow:inset 0 0 0 1px rgba(240,195,90,.25);min-height:calc(var(--h)*.5)}
.endChest:empty{display:none}
.ecStage{position:relative;width:calc(var(--h)*.28);height:calc(var(--h)*.24);display:grid;place-items:center}
.ecImg{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.6));animation:ecIdle 1.6s ease-in-out infinite;transform-origin:50% 90%}
.ecRays{position:absolute;inset:-35%;background:conic-gradient(from 0deg,rgba(255,215,120,0) 0 8deg,rgba(255,215,120,.28) 12deg,rgba(255,215,120,0) 20deg 40deg,rgba(255,215,120,.22) 46deg,rgba(255,215,120,0) 54deg 75deg);border-radius:50%;-webkit-mask:radial-gradient(circle,#000 25%,transparent 68%);mask:radial-gradient(circle,#000 25%,transparent 68%);animation:spin 9s linear infinite;opacity:.8}
.ecStage.shake .ecImg{animation:ecShake .65s ease-in both}
.ecStage.opened .ecImg{animation:ecPop .45s cubic-bezier(.3,1.6,.5,1) both}
.ecStage.opened{height:calc(var(--h)*.17);width:calc(var(--h)*.22)}
.ecStage.opened .ecRays{opacity:1;inset:-55%}
.ecName{font-family:var(--serif);font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#ffe9a8;font-size:calc(var(--fs)*.85);text-shadow:0 2px 0 #000}
.ecName em{font-style:normal;color:#7dffa0}
.ecOpen{min-width:9em;animation:playPulse 1.4s ease-in-out infinite}
.ecCards{display:flex;flex-wrap:wrap;justify-content:center;gap:.3em;max-width:100%}
.ecCards .oCard{width:calc(var(--h)*.13);opacity:1;transform:none;animation:none;padding:.2em .1em .25em;font-size:calc(var(--fs)*.8);border-width:calc(var(--h)*.028) calc(var(--h)*.014) !important}
.endChest.anim .ecCards .oCard{opacity:0;animation:ecCard .45s cubic-bezier(.3,1.5,.5,1) forwards}
.ecCards .oCard img{width:calc(var(--h)*.075);height:calc(var(--h)*.075)}
.ecCards .oCard .n{min-height:0;font-size:.66em}
.ecCards .oCard .n em{font-style:normal;color:#ffd25a}
.ecCards .oCard .nw{margin:-.9em 0 0 2.8em}
.ecAd{min-width:10em;background-image:none}
.ecAd .adI{display:inline-grid;place-items:center;width:1.4em;height:1.4em;margin-right:.4em;border-radius:50%;background:#2a1600;color:#ffd25a;font-size:.75em}
.ecAd b{color:#7a1d00;margin-left:.25em}
.ecDone{color:#7dffa0;font-weight:900;font-size:calc(var(--fs)*.8)}
@keyframes ecIdle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4%) rotate(-1.5deg)}}
@keyframes ecShake{0%{transform:rotate(0)}15%{transform:rotate(-8deg) scale(1.03)}30%{transform:rotate(8deg) scale(1.06)}45%{transform:rotate(-10deg) scale(1.08)}60%{transform:rotate(10deg) scale(1.1)}80%{transform:rotate(-4deg) scale(1.15)}100%{transform:scale(1.25);filter:brightness(2) drop-shadow(0 0 30px #ffd25a)}}
@keyframes ecPop{0%{transform:scale(1.3);filter:brightness(2)}100%{transform:scale(1)}}
@keyframes ecCard{0%{opacity:0;transform:translateY(40%) scale(.5) rotate(-8deg)}100%{opacity:1;transform:none}}

.ecStage.opened{height:calc(var(--h)*.13) !important;width:calc(var(--h)*.2) !important;margin-bottom:.15em}
.ecName{position:relative;z-index:1;margin-top:.1em}
.ecCards{display:grid !important;grid-template-columns:repeat(4,calc(var(--h)*.135));gap:.3em .35em !important;justify-content:center}
.ecCards .oCard{width:auto !important;font-size:calc(var(--fs)*.92) !important}
.ecCards .oCard .r{font-size:.56em}
.ecCards .oCard .n{font-size:.62em;line-height:1.05}

.ecStage.opened{height:calc(var(--h)*.1) !important;width:calc(var(--h)*.15) !important;margin:0 !important}
.ecStage.opened .ecImg{object-position:50% 100%}
.endChest{gap:.25em !important;min-height:0 !important;max-height:calc(var(--h)*.66)}
.ecCards{grid-template-columns:repeat(5,calc(var(--h)*.118)) !important;gap:.25em .3em !important}
.ecCards .oCard{padding:.1em .05em .15em !important;border-width:calc(var(--h)*.022) calc(var(--h)*.011) !important}
.ecCards .oCard img{width:calc(var(--h)*.058) !important;height:calc(var(--h)*.058) !important}
.ecCards .oCard .n{font-size:.58em !important;max-height:2.2em;overflow:hidden}
.ecCards .oCard .nw{font-size:.5em;margin:-1.1em 0 0 2.6em}

/* ---- campaign: clear selected level ---- */
.node .nm{transition:transform .15s}
#lvlP .node.sel .nm{transform:scale(1.14);filter:brightness(1.15) drop-shadow(0 0 12px rgba(255,220,130,1)) drop-shadow(0 5px 6px rgba(0,0,0,.7)) !important}
#lvlP .node.sel .nn{background:url(../assets/ui_btn_gold2.webp) center/100% 100% !important;color:#3a2006 !important;text-shadow:0 1px 0 rgba(255,240,200,.6) !important}
#lvlP .node.sel::before{content:'';position:absolute;left:50%;top:calc(var(--h)*-.045);width:0;height:0;border-left:calc(var(--h)*.022) solid transparent;border-right:calc(var(--h)*.022) solid transparent;border-top:calc(var(--h)*.03) solid #ffd25a;transform:translateX(-50%);filter:drop-shadow(0 2px 2px #000);animation:lvArr 1s ease-in-out infinite}
@keyframes lvArr{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-35%)}}
.node{z-index:1}.node.sel{z-index:2}
.lCard.swap{animation:lSwap .22s ease-out}
@keyframes lSwap{from{opacity:.4;transform:translateX(6%)}to{opacity:1;transform:none}}
/* ---- home: no giant hero; the city is the backdrop, the column fits any phone height ---- */
.home .hRight{display:none !important}
.home .hLeft{width:auto !important;flex:0 0 auto;justify-content:center !important;align-items:flex-start;gap:calc(var(--h)*.025) !important;padding:0 0 calc(var(--h)*.03) .3em !important}
.home .hLogoImg{width:calc(var(--h)*.44) !important;margin-left:calc(var(--h)*.21) !important}
.home .camp{width:calc(var(--h)*.86) !important;font-size:calc(var(--h)*.038) !important}
.home .camp .btnP.big{height:calc(var(--h)*.115) !important;font-size:calc(var(--h)*.05) !important;padding:0 !important}
.home .dk img{width:calc(var(--h)*.13) !important;height:calc(var(--h)*.13) !important}
#mToast{position:fixed;left:50%;bottom:calc(var(--h,100vh)*.2);transform:translate(-50%,20px);z-index:90;max-width:80vw;padding:.7em 1.2em;border-radius:.7em;background:rgba(10,12,22,.92);border:1px solid rgba(240,195,90,.6);color:#f3e6c4;font:600 clamp(12px,2.2vh,17px)/1.3 Commissioner,sans-serif;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
#mToast.on{opacity:1;transform:translate(-50%,0)}

/* ================= SKIN v5 · ChatGPT UI kit (navy marble + gold meander), Greece only =================
   Art: art/ui/greek-game-ui-v1 (cropped to content). Egypt keeps the v4 rules (body.egypt twins). */
body:not(.egypt) .panel,body:not(.egypt) .infoP,body:not(.egypt) .tp,body:not(.egypt) .camp,body:not(.egypt) .oCard{border-width:calc(var(--h)*.05) !important;border-image:url(../assets/ui_panel.webp) 135 fill / calc(var(--h)*.05) stretch !important}
body:not(.egypt) .tp{border-width:calc(var(--h)*.036) !important;border-image:url(../assets/ui_panel.webp) 135 fill / calc(var(--h)*.036) stretch !important}
body:not(.egypt) .cCol{border-width:calc(var(--h)*.03) !important;border-image:url(../assets/ui_panel.webp) 135 fill / calc(var(--h)*.03) stretch !important}
body:not(.egypt) .chc{border-width:calc(var(--h)*.032) !important;border-image:url(../assets/ui_card.webp) 80 fill / calc(var(--h)*.032) stretch !important}
body:not(.egypt) .mHalf{border-image:url(../assets/ui_small.webp) 85 fill / 14px stretch}
body:not(.egypt) .pbtn,body:not(.egypt) .btnP{border-width:10px !important;border-image:url(../assets/ui_btn_gold2.webp) 82 fill / 10px stretch !important;color:#3a2006 !important;text-shadow:0 1px 0 rgba(255,240,190,.7) !important}
body:not(.egypt) .pbtn.alt,body:not(.egypt) .pbtn.tog,body:not(.egypt) .pbtn.offT,body:not(.egypt) .smallBtn{border-width:10px !important;border-image:url(../assets/ui_btn_marble.webp) 82 fill / 10px stretch !important;color:#f4ead2 !important;text-shadow:0 1px 0 #000 !important}
body:not(.egypt) .panel h2,body:not(.egypt) .infoP h2{background:linear-gradient(180deg,#fff7dd,#ffd257 55%,#d38a12);-webkit-background-clip:text;background-clip:text}
body:not(.egypt) .hubTitle span,body:not(.egypt) .wplate span,body:not(.egypt) .banner span{text-shadow:0 2px 0 #0a1020,0 0 10px rgba(0,0,0,.5) !important}
body:not(.egypt) .wplate small{color:#ffd88a !important}
body:not(.egypt) .node .nm{width:calc(var(--h)*.105) !important;height:calc(var(--h)*.105) !important;font-size:calc(var(--h)*.045) !important}
body:not(.egypt) .node .nn{font-size:.6em !important;padding:.12em .7em .16em !important}
body:not(.egypt) .node .ns img{width:.95em;height:.95em}
body:not(.egypt) .endBg{background:#0c1222 url(../assets/bg_victory.webp) center/cover no-repeat;filter:none}
body:not(.egypt) #scrEnd.lose .endBg{background-image:url(../assets/bg_defeat.webp);filter:none}
#bMus,#bMus2,#bSfx,#bSfx2{display:inline-flex;align-items:center;gap:.45em}
#bMus::before,#bMus2::before,#bSfx::before,#bSfx2::before{content:'';width:1.6em;height:1.6em;background:center/contain no-repeat;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
#bMus::before,#bMus2::before{background-image:url(../assets/set_music_on.webp)} #bMus.offT::before,#bMus2.offT::before{background-image:url(../assets/set_music_off.webp)}
#bSfx::before,#bSfx2::before{background-image:url(../assets/set_sound_on.webp)} #bSfx.offT::before,#bSfx2.offT::before{background-image:url(../assets/set_sound_off.webp)}
#endStars img{object-fit:contain}
#endStars img:not(.on){filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)) !important}
body.rotL #rotate{display:none !important}
.playRow{display:flex;gap:.5em}.playRow .btnP{flex:1}
body:not(.egypt) #bPlayEg{border-image:url(../assets/ui_eg_card.webp) 60 fill / 10px stretch !important;color:#fff3d6 !important;text-shadow:0 2px 0 #3a2006 !important;filter:hue-rotate(0deg) saturate(1.1)}
/* ===== onboarding: locked HUD, tutorial bubble, unlock cards ===== */
.lockd{display:none !important}
.tutB{position:absolute;left:50%;top:calc(var(--b)*1.45);transform:translateX(-50%);z-index:6;display:none;align-items:center;gap:.7em;max-width:58%;padding:.5em .6em .5em 1em;border-radius:12px;background:rgba(7,10,20,.95);border:1.5px solid #ffd25a;box-shadow:0 0 0 1px #000,0 0 18px rgba(255,200,70,.35),0 8px 18px rgba(0,0,0,.55);font-weight:700;font-size:calc(var(--fs)*.95);color:#fff6dc;pointer-events:auto}
.tutB.on{display:flex;animation:tutIn .3s cubic-bezier(.2,1.3,.4,1)}
.tutB b{color:#ffd25a}
.tutB .sk{flex:none;padding:.25em .6em;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#aeb8d0;font:inherit;font-size:.75em;font-weight:700}
@keyframes tutIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
.tutGlow{animation:tutGlow 1s ease-in-out infinite !important;z-index:7}
@keyframes tutGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(255,210,80,.7)) brightness(1)}50%{filter:drop-shadow(0 0 14px rgba(255,210,80,1)) brightness(1.25)}}
.opt.lock img:not(.lk){filter:grayscale(1) brightness(.6)}
.onbP{max-width:62%}
.onbP h2{margin:.2em 0 .3em}
.onbI{width:4.2em;height:4.2em;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.onbB{margin:.2em auto .8em;max-width:30em;line-height:1.35;color:#e8e0c8}
.onbL{display:flex;flex-direction:column;gap:.45em;margin:.3em 0 .9em;text-align:left}
.onbIt{display:flex;align-items:center;gap:.7em}
.onbIt img{width:2.8em;height:2.8em;object-fit:contain;flex:none}
.onbIt b{display:block;color:#ffd25a}
.onbIt small{display:block;color:#d8d0bc;font-size:.82em;line-height:1.25}
/* ===== hero equipment ===== */
.hStage img.show{height:88%;bottom:9%}
.hGear{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em;flex:none}
.gs{display:flex;align-items:center;gap:.4em;min-width:0;padding:.25em .35em;border-radius:10px;background:rgba(10,14,28,.55);border:1px solid rgba(255,255,255,.08)}
.gs.on{border-color:var(--rc);box-shadow:inset 0 0 12px color-mix(in srgb,var(--rc) 30%,transparent)}
.gSlot{position:relative;flex:none;width:3.1em;height:3.1em;padding:0;border:0;background:none;cursor:pointer}
.gSlot .fr{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.95}
.gs.on .gSlot .fr{opacity:.55}
.gSlot .it{position:absolute;inset:12%;width:76%;height:76%;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.gSlot .gl{position:absolute;right:-.15em;bottom:-.1em;font-size:.62em;font-weight:900;color:#1a1206;background:#ffd25a;border-radius:6px;padding:0 .3em;box-shadow:0 1px 0 #000}
.gSlot .gn{position:absolute;left:-.2em;top:-.2em;min-width:1.2em;font-size:.6em;font-weight:900;color:#fff;background:#c0392b;border-radius:9px;padding:0 .25em;box-shadow:0 1px 0 #000}
.gt{min-width:0;display:flex;flex-direction:column;gap:.1em}
.gt b{font-size:.74em;color:#ffe9b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gt small{font-size:.6em;color:#c9c2ae;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gUp{align-self:flex-start;margin-top:.1em;display:flex;align-items:center;gap:.2em;font:inherit;font-size:.62em;font-weight:900;color:#1a1206;background:linear-gradient(#ffe48a,#e0a53a);border:0;border-radius:7px;padding:.1em .45em;box-shadow:0 2px 0 #6b4210}
.gUp img{width:1.1em;height:1.1em}
.gUp.poor{filter:grayscale(.7) brightness(.8)}
.heroHub .perks{overflow:auto;min-height:0;flex:1 1 auto}
.oCard.item img{object-fit:contain}
.rl.tipL span{font-size:.8em;color:#ffe6a8;line-height:1.3}
.onbHead{position:relative;width:6.4em;height:5.6em;margin:.5em auto .1em}
.onbBurst{position:absolute;left:50%;top:50%;width:6.4em;height:6.4em;transform:translate(-50%,-52%);object-fit:contain;animation:onbSpin 2.4s ease-in-out infinite;opacity:.95}
.onbHead .onbI{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:4.3em;height:4.3em;object-fit:contain}
@keyframes onbSpin{0%,100%{transform:translate(-50%,-52%) scale(.94)}50%{transform:translate(-50%,-52%) scale(1.06)}}
#scrOnb{z-index:60}
.onbK{font-size:.72em;letter-spacing:.22em;text-transform:uppercase;color:#ffcf6a;margin-bottom:-.2em}
.onbRole{display:block;color:#ffd25a;font-size:1.02em;margin-bottom:.25em}
.onbChips{display:flex;flex-wrap:wrap;justify-content:center;gap:.35em;margin:.1em 0 .55em}
.onbChips span{font-size:.78em;font-weight:800;color:#f3ead2;background:rgba(255,255,255,.08);border:1px solid rgba(255,210,90,.35);border-radius:999px;padding:.12em .6em}
#scrHall[data-mode="heroes"]{background:#0c0907 url(../assets/bg_hall_heroes.webp) center/cover !important}
#scrHall[data-mode="relics"]{background:#0c0907 url(../assets/bg_relic_hall.webp) center/cover !important}
#scrHall::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,13,.45),rgba(5,7,13,.2) 40%,rgba(5,7,13,.62));pointer-events:none}