/* ==============================================================   Hero showcase (src/app/ui/hero, 39-000): the hero in full figure
   ===================================================================== */
#sheet:has([data-ui="hero"]) .pn{max-height:96%}
.hs{--gold:#e7b84a;--glass:rgba(18,13,8,.58);--cream:#fff6dd;margin:0 -2px}
.hs-stage{position:relative;height:clamp(500px,68vh,600px);border-radius:18px;overflow:hidden;isolation:isolate;
 background:linear-gradient(180deg,rgba(10,8,6,.15) 0%,rgba(10,8,6,0) 30%,rgba(10,8,6,.25) 62%,rgba(10,8,6,.92) 100%),var(--stage,linear-gradient(#5d7a9a,#2c3b2a)) center 30%/cover no-repeat,#2a2117;
 box-shadow:0 0 0 2px #8a6420,0 0 0 4px #f0cf7a,0 10px 26px rgba(0,0,0,.45)}
.hs-stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 80% at 50% 45%,transparent 55%,rgba(0,0,0,.45) 100%);z-index:3}
.hs-rays{position:absolute;left:50%;top:44%;width:150%;aspect-ratio:1;translate:-50% -50%;z-index:0;opacity:.32;mix-blend-mode:screen;
 background:repeating-conic-gradient(from 0deg,rgba(255,236,170,.55) 0deg 5deg,transparent 5deg 18deg);
 -webkit-mask:radial-gradient(circle,#000 0%,transparent 62%);mask:radial-gradient(circle,#000 0%,transparent 62%);animation:hsSpin 60s linear infinite}
@keyframes hsSpin{to{rotate:360deg}}
.hs-head{position:absolute;left:14px;right:14px;top:10px;z-index:4;text-align:center;color:var(--cream);text-shadow:0 2px 4px rgba(0,0,0,.8)}
.hs-tribe{display:block;font:800 11px/1 Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#f5d98c}
.hs-name{margin:4px 0 0!important;font:400 27px/1.05 'Lilita One',Cinzel,serif!important;color:#fff!important;display:flex;justify-content:center;align-items:center;gap:6px;
 -webkit-text-stroke:1px rgba(60,30,0,.55)}
.hs-rn{background:rgba(0,0,0,.35);border:1px solid rgba(255,230,160,.5);border-radius:10px;width:30px;height:30px;display:grid;place-items:center;color:#fff;padding:0}
.hs-title{display:block;font:700 13px/1.2 Nunito,sans-serif;color:#f3e6c4}
.hs-stars{display:flex;justify-content:center;gap:3px;margin-top:5px}
.hs-stars i{width:14px;height:14px;background:rgba(0,0,0,.45);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.hs-stars i.on{background:linear-gradient(#fff3a8,#f0b52a 60%,#c97a12)}
.hs-rank{display:block;font:800 10px/1.2 Nunito,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#f5d98c;margin-top:2px}
.hs-fig{position:absolute;left:0;right:0;top:104px;bottom:74px;z-index:1;display:flex;justify-content:center;align-items:flex-end;pointer-events:none}
.hs-plinth{position:absolute;bottom:-6px;left:50%;width:62%;height:44px;translate:-50% 0;border-radius:50%;
 background:radial-gradient(closest-side,rgba(255,232,150,.75),var(--tA,#e0b04a) 55%,transparent 100%);opacity:.7;filter:blur(2px)}
.hs-img{position:relative;height:100%;width:auto;max-width:78%;object-fit:contain;transform-origin:50% 100%;
 filter:drop-shadow(0 8px 10px rgba(0,0,0,.55));animation:hsIn .55s cubic-bezier(.2,.9,.3,1.2) both,hsBreathe 4.2s ease-in-out .6s infinite alternate}
.hs[class*="hs-aura"] .hs-img{filter:drop-shadow(0 0 14px var(--aura)) drop-shadow(0 8px 10px rgba(0,0,0,.55))}
@keyframes hsIn{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}}
@keyframes hsBreathe{from{scale:1}to{scale:1.012}}
.hs-gear{position:absolute;left:10px;top:118px;z-index:4;display:flex;flex-direction:column;gap:8px}
.hs-slot{position:relative;width:54px;height:54px;border-radius:14px;padding:0;display:grid;place-items:center;cursor:pointer;
 background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.18),rgba(20,14,8,.78) 70%);border:2px solid var(--rc,rgba(231,184,74,.55));
 box-shadow:inset 0 0 12px rgba(0,0,0,.6),0 3px 8px rgba(0,0,0,.45)}
.hs-slot .hs-si{font-size:26px;line-height:1;opacity:.45}
.hs-slot[class*=" r"] .hs-si{opacity:1}
.hs-slot.r3,.hs-slot.r4{box-shadow:inset 0 0 12px rgba(0,0,0,.5),0 0 12px var(--rc),0 3px 8px rgba(0,0,0,.45)}
.hs-slot.r4::before{content:'';position:absolute;inset:-2px;border-radius:14px;background:conic-gradient(from 0deg,transparent,rgba(255,226,120,.9),transparent 30%);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px;animation:hsSpin 3s linear infinite}
.hs-slot.on{outline:3px solid #fff3c0;outline-offset:2px}
.hs-slot.spare{border-style:dashed;border-color:#7ed957}
.hs-new{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:9px;background:#3fb83a;color:#fff;font:800 11px/18px Nunito,sans-serif;padding:0 4px;box-shadow:0 0 0 2px #1c3a12}
.hs-up{position:absolute;bottom:-5px;left:50%;translate:-50% 0;background:linear-gradient(#ffe48a,#d9921c);color:#3a1e08;border-radius:8px;padding:0 5px;font:900 11px/16px Nunito,sans-serif;box-shadow:0 1px 0 #7a4a10;white-space:nowrap}
.hs-up b{margin-left:2px;font-size:9px}
.hs-up{animation:hsPop .45s cubic-bezier(.3,1.8,.5,1)}@keyframes hsPop{0%{scale:.3;filter:brightness(2)}100%{scale:1;filter:none}}
.hs-stats{position:absolute;right:10px;top:118px;z-index:4;width:150px;padding:8px 9px;border-radius:14px;background:var(--glass);
 border:1.5px solid rgba(231,184,74,.6);box-shadow:0 6px 16px rgba(0,0,0,.4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--cream)}
.hs-power{text-align:center;padding-bottom:6px;margin-bottom:5px;border-bottom:1px solid rgba(231,184,74,.4)}
.hs-power small{display:block;font:800 10px/1 Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#f5d98c}
.hs-power b{font:400 26px/1.05 'Lilita One',sans-serif;color:#fff;text-shadow:0 2px 0 #7a4a10,0 0 12px rgba(255,200,80,.5)}
.hs-st{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:4px;padding:3px 0;font-size:12px}
.hs-st span{font-size:15px;line-height:1}
.hs-st small{font:700 11.5px/1.1 Nunito,sans-serif;color:#eadcb8;white-space:nowrap}
.hs-st b{font:900 12.5px/1 Nunito,sans-serif;color:#9cf07a;white-space:nowrap}
.hs-upg.short .hs-cost{color:#9a2a10}
.hs-st.hs-war b{color:#ffd36a}
.hs-foot{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:8px 14px 10px;color:var(--cream)}
.hs-lvl{display:flex;justify-content:space-between;align-items:baseline;text-shadow:0 1px 3px #000}
.hs-lvl b{font:400 22px/1 'Lilita One',sans-serif;color:#fff}
.hs-lvl small{font:800 12px Nunito,sans-serif;color:#f3e6c4}
.hs-bar{height:9px;border-radius:6px;background:rgba(0,0,0,.55);box-shadow:inset 0 1px 2px rgba(0,0,0,.6);overflow:hidden;margin-top:4px}
.hs-bar i{display:block;height:100%;border-radius:6px;transition:width .5s ease}
.hs-bar.xp i{background:linear-gradient(#ffe78a,#e8a21c)}
.hs-bar.hp i{background:linear-gradient(#9cf07a,#3f9a26)}
.hs-bar.sk{height:6px;background:rgba(60,40,10,.18)}.hs-bar.sk i{background:linear-gradient(#ffd56a,#c98a1a)}
.hs-status{display:block;margin-top:5px;font:800 12px/1.2 Nunito,sans-serif;color:#f3e6c4;text-shadow:0 1px 2px #000}
.hs-status.away{color:#ffcf8a}
.hs-card{position:relative;margin:12px 0 0;padding:12px 12px 10px 14px;border-radius:14px;background:linear-gradient(180deg,#fff7df,#f1dfae);border:2px solid var(--rc,#c99a3e);
 box-shadow:0 0 0 1px rgba(0,0,0,.08),0 6px 16px rgba(0,0,0,.18),inset 6px 0 0 var(--rc,#c99a3e);animation:hsCard .25s ease-out}
@keyframes hsCard{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.hs-x{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(0,0,0,.08);color:#3a2206;font-size:15px;padding:0}
.hs-ch b{display:block;font:400 19px/1.15 'Lilita One',sans-serif;padding-right:34px}
.hs-ch small{display:block;font:800 12px Nunito,sans-serif;color:#6e5332}
.hs-cv{display:flex;align-items:center;gap:8px;margin:8px 0;font:900 15px Nunito,sans-serif;color:#2b1b0c}
.hs-next{color:#2f8a1e}
.hs-ca{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hs-ca .btn.brass{display:inline-flex;flex-direction:column;align-items:center;line-height:1.1;padding-top:5px;padding-bottom:5px}
.hs-cost{font:800 11px Nunito,sans-serif;opacity:.9}
.hs-max{font:900 13px Nunito,sans-serif;color:#9a6a14}
.hs-ability{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:11px 12px;border-radius:14px;background:linear-gradient(180deg,#2c2114,#1d150c);color:#f6ead0;
 border:1.5px solid #7a5a22;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.hs-ability.awake{border-color:#f0c24a;box-shadow:0 0 14px rgba(240,194,74,.45),0 4px 12px rgba(0,0,0,.25)}
.hs-ai{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:26px;background:radial-gradient(circle,#5a3d12,#2a1c0a);border:1.5px solid #c99a3e}
.hs-ability b{display:block;font:400 17px/1.2 'Lilita One',sans-serif;color:#ffe08a}
.hs-ability small{display:block;font:700 13px/1.35 Nunito,sans-serif;color:#eadcb8!important}
.hs-ability .hs-weak{color:#ff9a7a!important;margin-top:3px}
.hs-sec{margin-top:14px}
.hs-sec h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font:400 19px 'Lilita One',sans-serif}
.hs-all{margin-left:auto;font:800 12px Nunito,sans-serif;background:none;border:0;color:#2c6c92;text-decoration:underline;padding:4px}
.hs-sk{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(160,120,60,.25)}
.hs-sk:last-of-type{border-bottom:0}
.hs-ski{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:19px;background:#f1dfae;border:1px solid #c99a3e}
.hs-sk b{font:900 14.5px Nunito,sans-serif}
.hs-sk small{display:block;font:700 12px/1.3 Nunito,sans-serif;color:#6e5332}
.hs-bag{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:8px}
.hs-item{position:relative;aspect-ratio:1;border-radius:14px;padding:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
 background:radial-gradient(circle at 50% 30%,#fffaf0,#efdcae 75%);border:2px solid var(--rc,#c99a3e);box-shadow:0 3px 0 rgba(0,0,0,.15),inset 0 0 10px rgba(255,255,255,.6)}
.hs-item.r3,.hs-item.r4{box-shadow:0 0 10px var(--rc),0 3px 0 rgba(0,0,0,.15)}
.hs-item.on{outline:3px solid #2c6c92;outline-offset:2px}
.hs-item .hs-si{font-size:26px;line-height:1}
.hs-item small{font:900 11px Nunito,sans-serif;color:#2b1b0c}
.hs-item .hs-up{bottom:auto;top:-7px}
@media (prefers-reduced-motion:reduce){.hs-rays,.hs-img,.hs-slot.r4::before,.hs-card,.hs-up{animation:none}}
@media (max-width:360px){.hs-stats{width:132px}.hs-st small{font-size:10.5px}.hs-slot{width:48px;height:48px}.hs-name{font-size:23px!important}}
/* the arena duel in full figure (03-147 arenaAnim with 39-000 heroFig): the two heroes face each other */
.duel.fig{align-items:flex-end;min-height:320px;padding:14px 4px 12px;position:relative;overflow:hidden;
 background:radial-gradient(ellipse 70% 40% at 50% 92%,rgba(255,200,110,.55),transparent 70%),radial-gradient(ellipse at 50% 30%,#a8743a,#3a1f0c 75%)}
.duel.fig::before{content:'';position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,transparent,rgba(30,15,5,.65))}
.duel.fig .dside{position:relative;z-index:1;width:44%}
.duel.fig .dav{border-radius:0;box-shadow:none;animation:none;display:block;height:220px}
.duel.fig .dfig{height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(0,0,0,.6));animation:dBreathe 1.6s ease-in-out infinite alternate;transform-origin:50% 100%}
.duel.fig #dsB .dfig{scale:-1 1}
.duel.fig .vs{position:absolute;left:50%;top:38%;translate:-50% -50%;z-index:2;font-size:38px;animation:vsPulse 1.1s ease-in-out infinite alternate}
@keyframes dBreathe{from{transform:none}to{transform:translateY(-3px) scaleY(1.01)}}
@keyframes vsPulse{from{scale:1}to{scale:1.12}}
.dside.lunge .dav{animation:dLungeR .38s cubic-bezier(.3,1.6,.5,1)}
#dsB.lunge .dav{animation-name:dLungeL}
@keyframes dLungeR{0%{transform:none}45%{transform:translateX(26px) rotate(4deg)}100%{transform:none}}
@keyframes dLungeL{0%{transform:none}45%{transform:translateX(-26px) rotate(-4deg)}100%{transform:none}}
.dside.struck .dav{animation:dStruck .42s ease-out}
@keyframes dStruck{0%,100%{filter:none;transform:none}20%{filter:brightness(2.2) saturate(.3) sepia(1) hue-rotate(-40deg);transform:translateX(-5px)}45%{transform:translateX(5px)}70%{transform:translateX(-2px)}}
@media (prefers-reduced-motion:reduce){.duel.fig .dfig,.duel.fig .vs,.dside.lunge .dav,.dside.struck .dav{animation:none}}
/* hero level-up pop-up (39-000 banner layer): the hero rises in a burst of light */
#banner .bi:has(>.bnh-fig){position:relative;height:210px!important;width:auto!important;overflow:visible;font-size:0;margin:-6px auto 2px;display:flex;justify-content:center;align-items:flex-end;filter:none}
#banner .bnh-rays{position:absolute;left:50%;top:50%;width:300px;height:300px;translate:-50% -50%;border-radius:50%;
 background:repeating-conic-gradient(rgba(255,214,90,.75) 0deg 7deg,transparent 7deg 20deg);
 -webkit-mask:radial-gradient(circle,#000 18%,transparent 66%);mask:radial-gradient(circle,#000 18%,transparent 66%);animation:hsSpin 9s linear infinite}
#banner .bnh-fig{position:relative;height:200px!important;width:auto!important;max-width:100%!important;max-height:none!important;filter:drop-shadow(0 0 16px rgba(255,210,90,.9)) drop-shadow(0 6px 8px rgba(0,0,0,.45));
 animation:bnhRise .7s cubic-bezier(.2,1.4,.4,1) both}
@keyframes bnhRise{from{opacity:0;transform:translateY(46px) scale(.82)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#banner .bnh-rays,#banner .bnh-fig{animation:none}}
/* the hero comes alive: an idle sway on top of the breathing, motes drifting in the air of the
   tribe's land, light running over the armour, a hop and a line when tapped */
.hs-img{animation:hsIn .55s cubic-bezier(.2,.9,.3,1.2) both,hsBreathe 4.2s ease-in-out .6s infinite alternate,hsSway 7.4s ease-in-out .6s infinite alternate}
@keyframes hsSway{from{rotate:-.5deg}to{rotate:.6deg}}
.hs-fig.pk1{animation:hsHopA .55s cubic-bezier(.3,1.6,.5,1)}.hs-fig.pk0{animation:hsHopB .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes hsHopA{0%{translate:0 0;scale:1}30%{translate:0 -16px;scale:1.03 .98}60%{translate:0 0;scale:1.02 .97}100%{translate:0 0;scale:1}}
@keyframes hsHopB{0%{translate:0 0;scale:1}30%{translate:0 -16px;scale:1.03 .98}60%{translate:0 0;scale:1.02 .97}100%{translate:0 0;scale:1}}
.hs-flash{position:absolute;left:11%;right:11%;top:0;bottom:0;z-index:2;pointer-events:none;background:#fff8d0;
 -webkit-mask:var(--fig) center bottom/contain no-repeat;mask:var(--fig) center bottom/contain no-repeat;animation:hsFlash .8s ease-out forwards}
@keyframes hsFlash{0%{opacity:.9}100%{opacity:0}}
.hs-shine{position:absolute;left:11%;right:11%;top:0;bottom:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
 -webkit-mask:var(--fig) center bottom/contain no-repeat;mask:var(--fig) center bottom/contain no-repeat;
 background:linear-gradient(105deg,transparent 42%,rgba(255,246,210,.55) 50%,transparent 58%) 0 0/260% 100% no-repeat;animation:hsShine 6.5s ease-in-out 1.2s infinite}
.hs-aura4 .hs-shine{animation-duration:4.2s;background-image:linear-gradient(105deg,transparent 40%,rgba(255,236,160,.8) 50%,transparent 60%)}
@keyframes hsShine{0%{background-position:130% 0}22%,100%{background-position:-30% 0}}
/* the stage never scrolls (a tap on the hero must not slide its art sideways) */
.hs-stage{overflow:clip}
.hs-poke{position:absolute;left:22%;right:22%;top:110px;bottom:78px;z-index:2;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hs-say{position:absolute;right:10px;top:316px;z-index:5;max-width:150px;padding:7px 11px;border-radius:14px;background:#fffaf0;color:#2b1b0c;pointer-events:none;
 font:900 13.5px/1.25 Nunito,sans-serif;box-shadow:0 4px 12px rgba(0,0,0,.4);border:2px solid #e7b84a;animation:hsSay 2.8s ease-out both}
.hs-say::before{content:'';position:absolute;left:-9px;top:14px;border:8px solid transparent;border-right-color:#e7b84a;border-left:0}
@keyframes hsSay{0%{opacity:0;transform:scale(.4);transform-origin:0 50%}12%{opacity:1;transform:scale(1.06)}20%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
.hs-motes{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hs-motes i{position:absolute;bottom:-10px;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,#fff6c8,rgba(255,214,110,.75) 45%,transparent 70%);
 opacity:0;animation:hsMote 9s linear infinite}
.hs-motes i:nth-child(1){left:6%;animation-delay:-1s}.hs-motes i:nth-child(2){left:13%;animation-delay:-4.6s;animation-duration:11s}
.hs-motes i:nth-child(3){left:21%;animation-delay:-7.1s;scale:1.5}.hs-motes i:nth-child(4){left:28%;animation-delay:-2.3s;animation-duration:12s}
.hs-motes i:nth-child(5){left:35%;animation-delay:-8.4s;scale:.7}.hs-motes i:nth-child(6){left:42%;animation-delay:-5.2s;animation-duration:10s;scale:1.3}
.hs-motes i:nth-child(7){left:49%;animation-delay:-.4s}.hs-motes i:nth-child(8){left:56%;animation-delay:-6.6s;animation-duration:13s;scale:.8}
.hs-motes i:nth-child(9){left:63%;animation-delay:-3.3s;scale:1.6}.hs-motes i:nth-child(10){left:70%;animation-delay:-9.5s;animation-duration:11s}
.hs-motes i:nth-child(11){left:77%;animation-delay:-1.9s;scale:.75}.hs-motes i:nth-child(12){left:84%;animation-delay:-7.8s;animation-duration:12s;scale:1.2}
.hs-motes i:nth-child(13){left:90%;animation-delay:-4.1s}.hs-motes i:nth-child(14){left:96%;animation-delay:-10.2s;animation-duration:10s;scale:.9}
@keyframes hsMote{0%{opacity:0;transform:translate(0,0)}10%{opacity:.9}50%{transform:translate(14px,-260px)}90%{opacity:.7}100%{opacity:0;transform:translate(-8px,-540px)}}
/* each land its own air: fireflies for the elves, embers for the orcs, forge sparks for the
   dwarves, snow for the barbarians, wisps for the goblins, golden dust for the humans */
.hs-t-elf .hs-motes i{background:radial-gradient(circle,#f4ffc8,rgba(170,255,120,.8) 40%,transparent 70%);animation-name:hsFly}
@keyframes hsFly{0%{opacity:0;transform:translate(0,-60px)}20%{opacity:1}35%{transform:translate(22px,-150px)}55%{opacity:.3;transform:translate(-14px,-220px)}75%{opacity:1;transform:translate(16px,-300px)}100%{opacity:0;transform:translate(-6px,-400px)}}
.hs-t-orc .hs-motes i{background:radial-gradient(circle,#fff0b0,rgba(255,110,30,.9) 45%,transparent 70%);animation-duration:6s}
.hs-t-dwarf .hs-motes i{width:3px;height:3px;background:radial-gradient(circle,#fff,rgba(255,170,60,.95) 50%,transparent 75%);animation-duration:5s}
.hs-t-barbarian .hs-motes i{bottom:auto;top:-10px;width:6px;height:6px;background:radial-gradient(circle,#fff,rgba(230,240,255,.8) 50%,transparent 72%);animation-name:hsSnow;animation-duration:10s}
@keyframes hsSnow{0%{opacity:0;transform:translate(0,0)}10%{opacity:.95}50%{transform:translate(-18px,280px)}100%{opacity:.6;transform:translate(10px,580px)}}
.hs-t-goblin .hs-motes i{background:radial-gradient(circle,#f3d8ff,rgba(170,90,255,.8) 45%,transparent 70%)}
/* gear: a slot that just got its item rings out, an upgrade throws sparks, power gained counts up */
.hs-slot.fresh{animation:hsRing .7s ease-out}
@keyframes hsRing{0%{box-shadow:0 0 0 0 rgba(255,240,160,.95),0 0 26px #fff3b0;scale:1.18}100%{box-shadow:0 0 0 18px rgba(255,240,160,0);scale:1}}
.hs-burst{position:absolute;left:50%;top:38px;width:0;height:0;pointer-events:none;z-index:3}
.hs-burst i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:2px;background:linear-gradient(#fff6b8,#f2a018);box-shadow:0 0 6px #ffcf5a;
 animation:hsSpark .75s cubic-bezier(.2,.7,.3,1) forwards;opacity:0}
.hs-burst i:nth-child(1){--a:0deg}.hs-burst i:nth-child(2){--a:36deg}.hs-burst i:nth-child(3){--a:72deg}.hs-burst i:nth-child(4){--a:108deg}.hs-burst i:nth-child(5){--a:144deg}
.hs-burst i:nth-child(6){--a:180deg}.hs-burst i:nth-child(7){--a:216deg}.hs-burst i:nth-child(8){--a:252deg}.hs-burst i:nth-child(9){--a:288deg}.hs-burst i:nth-child(10){--a:324deg}
@keyframes hsSpark{0%{opacity:1;transform:rotate(var(--a)) translateX(0) scale(1.3)}100%{opacity:0;transform:rotate(var(--a)) translateX(70px) scale(.4)}}
.hs-card:has(.hs-burst){animation:hsCardUp .5s ease-out}
@keyframes hsCardUp{0%{box-shadow:0 0 0 3px #fff3b0,0 0 30px #ffd25a}100%{}}
.hs-power{position:relative}
.hs-power b.up{display:inline-block;animation:hsPop .5s cubic-bezier(.3,1.8,.5,1)}
.hs-gain{position:absolute;right:2px;top:-4px;font:900 13px Nunito,sans-serif;color:#9cf07a;text-shadow:0 1px 2px #000;pointer-events:none;animation:hsGain 1.6s ease-out forwards}
@keyframes hsGain{0%{opacity:0;transform:translateY(8px)}15%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
/* the hero levelling up: sparkles around them */
#banner .bnh-sp{position:absolute;width:14px;height:14px;background:#fff6c0;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
 filter:drop-shadow(0 0 4px #ffd34a);opacity:0;animation:bnhTw 1.6s ease-in-out infinite}
#banner .bnh-sp:nth-of-type(2){left:18%;top:18%}#banner .bnh-sp:nth-of-type(3){left:76%;top:12%;animation-delay:.3s;scale:1.3}
#banner .bnh-sp:nth-of-type(4){left:10%;top:56%;animation-delay:.6s;scale:.8}#banner .bnh-sp:nth-of-type(5){left:84%;top:48%;animation-delay:.9s}
#banner .bnh-sp:nth-of-type(6){left:28%;top:84%;animation-delay:1.2s;scale:.7}#banner .bnh-sp:nth-of-type(7){left:68%;top:80%;animation-delay:.45s;scale:1.1}
#banner .bnh-sp:nth-of-type(8){left:46%;top:2%;animation-delay:.75s;scale:1.4}#banner .bnh-sp:nth-of-type(9){left:92%;top:24%;animation-delay:1.05s;scale:.6}
@keyframes bnhTw{0%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:1;transform:scale(1) rotate(90deg)}}
/* the arena: every blow shakes the ring and throws its number; the winner stands in the light */
.duel .dside{position:relative}
.duel.shake{animation:dShake .32s ease-out}
@keyframes dShake{0%,100%{translate:0 0}20%{translate:-4px 2px}40%{translate:4px -2px}60%{translate:-3px 1px}80%{translate:2px 0}}
.dside .dhit{position:absolute;left:50%;top:30%;z-index:3;font:400 26px/1 'Lilita One',sans-serif;font-style:normal;color:#ff5a3a;-webkit-text-stroke:1.5px #3a0e04;
 text-shadow:0 2px 0 #3a0e04;pointer-events:none;animation:dHit 1s ease-out forwards}
@keyframes dHit{0%{opacity:0;transform:translate(-50%,10px) scale(.4)}20%{opacity:1;transform:translate(-50%,-6px) scale(1.25)}100%{opacity:0;transform:translate(-50%,-56px) scale(.9)}}
.dside.struck .dav::after{content:'';position:absolute;left:50%;top:40%;width:90px;height:90px;translate:-50% -50%;pointer-events:none;
 background:radial-gradient(circle,#fff 0 12%,rgba(255,220,120,.9) 22%,transparent 56%);clip-path:polygon(50% 0,58% 38%,98% 30%,64% 54%,86% 96%,50% 66%,14% 96%,36% 54%,2% 30%,42% 38%);
 animation:dStar .38s ease-out forwards}
.dside .dav{position:relative}
@keyframes dStar{0%{opacity:1;scale:.3}100%{opacity:0;scale:1.4}}
.duel.fig .dside.won .dfig{filter:drop-shadow(0 0 16px rgba(255,214,90,.95)) drop-shadow(0 8px 8px rgba(0,0,0,.6))}
.dside.won .dav{animation:dLungeR .38s cubic-bezier(.3,1.6,.5,1),dWin .8s cubic-bezier(.3,1.6,.5,1) .4s forwards}
#dsB.won .dav{animation-name:dLungeL,dWin}
@keyframes dWin{0%{transform:none}50%{transform:translateY(-14px) scale(1.06)}100%{transform:translateY(-4px) scale(1.04)}}
.dside.lost .dav{animation:dStruck .42s ease-out,dLost .9s ease-in .45s forwards}
@keyframes dLost{to{transform:translateY(10px) rotate(-5deg);filter:grayscale(.85) brightness(.7)}}
#dsB.lost .dav{animation-name:dStruck,dLostB}
@keyframes dLostB{to{transform:translateY(10px) rotate(5deg);filter:grayscale(.85) brightness(.7)}}
@media (prefers-reduced-motion:reduce){.hs-motes,.hs-shine,.hs-burst{display:none}
 .hs-img,.hs-fig.pk0,.hs-fig.pk1,.hs-say,.hs-flash,.hs-slot.fresh,.hs-gain,.duel.shake,.dside .dhit,.dside.won .dav,.dside.lost .dav,#banner .bnh-sp{animation:none}
 .hs-say{opacity:1}}
/* the wardrobe (39-001): outfits and auras, tried on the hero above */
.hs-wbtn{position:absolute;right:10px;bottom:84px;z-index:5;display:flex;align-items:center;gap:5px;padding:6px 11px 6px 8px;border-radius:14px;cursor:pointer;
 background:linear-gradient(#ffe48a,#d9921c);border:2px solid #7a4a10;color:#3a1e08;font:900 13px/1 Nunito,sans-serif;box-shadow:0 3px 0 #5a320a,0 6px 12px rgba(0,0,0,.4)}
.hs-abtn{position:absolute;left:10px;bottom:84px;z-index:5;display:flex;align-items:center;gap:5px;padding:6px 11px 6px 8px;border-radius:14px;cursor:pointer;
 background:linear-gradient(#ff9a8a,#c8343a);border:2px solid #6a1010;color:#fff;font:900 13px/1 Nunito,sans-serif;text-shadow:0 1px 0 #6a1010;box-shadow:0 3px 0 #4a0a0a,0 6px 12px rgba(0,0,0,.4)}
.hs-abtn>span{white-space:nowrap}
.hs-wbtn>span{white-space:nowrap}.hs-wbtn .hs-new{top:-8px;right:-8px}
.hs-wbtn.on{background:linear-gradient(#fff6c8,#f0c24a);outline:3px solid #fff3c0}
.hs-ward{position:relative;margin:12px 0 0;padding:12px 12px 12px 14px;border-radius:14px;background:linear-gradient(180deg,#2c2114,#1d150c);color:#f6ead0;
 border:2px solid #c99a3e;box-shadow:0 0 18px rgba(240,194,74,.35),0 6px 16px rgba(0,0,0,.3);animation:hsCard .25s ease-out}
.hs-ward .hs-x{background:rgba(255,255,255,.12);color:#fff}
.hs-ward h3{margin:0;font:400 21px/1.1 'Lilita One',sans-serif;color:#ffe08a}
.hs-wsub{display:block;margin:2px 34px 6px 0;font:700 12px/1.3 Nunito,sans-serif;color:#eadcb8}
.hs-wh{display:block;margin:8px 0 5px;font:900 12px Nunito,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#f5d98c}
.hs-looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px}
.hs-look{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;min-height:78px;padding:6px 4px;border-radius:12px;cursor:pointer;
 background:radial-gradient(circle at 50% 35%,var(--lc1,#5a4426),var(--lc2,#241a0e) 75%);border:2px solid rgba(231,184,74,.55);color:#fff;box-shadow:inset 0 0 10px rgba(0,0,0,.5)}
.hs-look.fit{grid-column:span 2;min-height:150px}
.hs-look small{font:800 11px/1.15 Nunito,sans-serif;text-align:center;color:#fff6dd;text-shadow:0 1px 2px #000}
.hs-lfig{height:118px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(0,0,0,.6))}
.hs-lic{font-size:30px;line-height:1;filter:drop-shadow(0 0 8px var(--lg,rgba(255,220,120,.6)))}
.hs-look.locked .hs-lfig,.hs-look.locked .hs-lic{filter:grayscale(.8) brightness(.6)}
.hs-look.on{border-color:#fff3c0;box-shadow:0 0 0 3px #fff3c0,0 0 16px rgba(255,230,140,.7)}
.hs-look.worn{border-color:#7ed957}
.hs-ltag{position:absolute;top:4px;right:4px;font-style:normal;font-size:13px;line-height:1;background:#3fb83a;color:#fff;border-radius:9px;padding:2px 4px}
.hs-ltag.lock{background:rgba(0,0,0,.55)}
.hs-look.lk-gilded{--lc1:#a0761a;--lc2:#3a2808;--lg:#ffd25a}.hs-look.lk-frost{--lc1:#3c7ea8;--lc2:#0e2638;--lg:#aee8ff}
.hs-look.lk-ember{--lc1:#a8401a;--lc2:#2e0e04;--lg:#ff8a3a}.hs-look.lk-verdant{--lc1:#3c8a2a;--lc2:#0e2a08;--lg:#a8ff7a}
.hs-look.lk-shadow{--lc1:#4a2a6e;--lc2:#100818;--lg:#b070ff}.hs-look.lk-celestial{--lc1:#5a6ab8;--lc2:#141a3a;--lg:#ffffff}
.hs-wact{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;padding-top:9px;border-top:1px solid rgba(231,184,74,.35)}
.hs-wact>b{font:400 17px/1.1 'Lilita One',sans-serif;color:#fff;flex:1 1 100%}
.hs-wact small{font:700 12px Nunito,sans-serif;color:#eadcb8}
/* the auras: a glow on the hero, the ground lit in its colour, its own air */
.hs.lk-gilded .hs-img{filter:drop-shadow(0 0 8px rgba(255,214,90,.95)) drop-shadow(0 0 24px rgba(255,180,40,.55)) drop-shadow(0 8px 10px rgba(0,0,0,.55))}
.hs.lk-frost .hs-img{filter:drop-shadow(0 0 8px rgba(170,230,255,.95)) drop-shadow(0 0 24px rgba(90,180,255,.55)) drop-shadow(0 8px 10px rgba(0,0,0,.55))}
.hs.lk-ember .hs-img{filter:drop-shadow(0 0 8px rgba(255,140,40,.95)) drop-shadow(0 0 26px rgba(255,70,10,.55)) drop-shadow(0 8px 10px rgba(0,0,0,.55))}
.hs.lk-verdant .hs-img{filter:drop-shadow(0 0 8px rgba(170,255,120,.9)) drop-shadow(0 0 24px rgba(60,200,60,.5)) drop-shadow(0 8px 10px rgba(0,0,0,.55))}
.hs.lk-shadow .hs-img{filter:drop-shadow(0 0 9px rgba(170,90,255,.95)) drop-shadow(0 0 28px rgba(40,0,80,.85)) drop-shadow(0 8px 10px rgba(0,0,0,.6)) contrast(1.06)}
.hs.lk-celestial .hs-img{filter:drop-shadow(0 0 8px rgba(255,255,255,.95)) drop-shadow(0 0 26px rgba(150,190,255,.7)) drop-shadow(0 8px 10px rgba(0,0,0,.5))}
.hs.lk-gilded .hs-plinth{background:radial-gradient(closest-side,#fff3b0,#f0b52a 55%,transparent);opacity:.9}
.hs.lk-frost .hs-plinth{background:radial-gradient(closest-side,#f0fbff,#7cc8ff 55%,transparent);opacity:.9}
.hs.lk-ember .hs-plinth{background:radial-gradient(closest-side,#ffe0a0,#ff5a14 55%,transparent);opacity:.9}
.hs.lk-verdant .hs-plinth{background:radial-gradient(closest-side,#eaffd0,#4ac43a 55%,transparent);opacity:.85}
.hs.lk-shadow .hs-plinth{background:radial-gradient(closest-side,#d0a0ff,#3a0a6a 55%,transparent);opacity:.95}
.hs.lk-celestial .hs-plinth{background:radial-gradient(closest-side,#fff,#9ab8ff 55%,transparent);opacity:.95}
.hs.lk-gilded .hs-rays{opacity:.55}
.hs.lk-frost .hs-rays{background:repeating-conic-gradient(from 0deg,rgba(190,235,255,.6) 0deg 5deg,transparent 5deg 18deg)}
.hs.lk-ember .hs-rays{background:repeating-conic-gradient(from 0deg,rgba(255,140,60,.6) 0deg 5deg,transparent 5deg 18deg)}
.hs.lk-verdant .hs-rays{background:repeating-conic-gradient(from 0deg,rgba(180,255,140,.5) 0deg 5deg,transparent 5deg 18deg)}
.hs.lk-shadow .hs-rays{mix-blend-mode:multiply;opacity:.5;background:repeating-conic-gradient(from 0deg,rgba(60,0,90,.8) 0deg 7deg,transparent 7deg 18deg)}
.hs.lk-celestial .hs-rays{opacity:.6;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.7) 0deg 3deg,transparent 3deg 12deg)}
.hs.lk-gilded .hs-motes i{background:radial-gradient(circle,#fff,rgba(255,214,90,.95) 45%,transparent 70%);animation-name:hsMote}
.hs.lk-frost .hs-motes i{bottom:auto;top:-10px;width:7px;height:7px;background:radial-gradient(circle,#fff,rgba(200,240,255,.85) 50%,transparent 72%);animation-name:hsSnow;animation-duration:9s}
.hs.lk-ember .hs-motes i{bottom:-10px;top:auto;width:5px;height:5px;background:radial-gradient(circle,#fff0b0,rgba(255,100,20,.95) 45%,transparent 70%);animation-name:hsMote;animation-duration:4.5s}
.hs.lk-verdant .hs-motes i{bottom:-10px;top:auto;width:6px;height:6px;background:radial-gradient(circle,#f4ffc8,rgba(150,255,100,.85) 40%,transparent 70%);animation-name:hsFly;animation-duration:8s}
.hs.lk-shadow .hs-motes i{bottom:-10px;top:auto;width:18px;height:18px;filter:blur(3px);background:radial-gradient(circle,rgba(150,80,230,.7),rgba(40,0,70,.5) 50%,transparent 72%);animation-name:hsMote;animation-duration:11s}
.hs.lk-celestial .hs-motes i{bottom:auto;top:var(--sy,30%);width:9px;height:9px;border-radius:0;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
 background:#fff;filter:drop-shadow(0 0 3px #bcd4ff);animation-name:hsTwinkle;animation-duration:2.6s}
.hs.lk-celestial .hs-motes i:nth-child(3n){--sy:12%}.hs.lk-celestial .hs-motes i:nth-child(3n+1){--sy:48%}.hs.lk-celestial .hs-motes i:nth-child(4n){--sy:66%}
@keyframes hsTwinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(45deg)}}
.hs.lk-celestial .hs-fig::before{content:'';position:absolute;left:50%;top:-4px;width:120px;height:120px;translate:-50% 0;border-radius:50%;z-index:-1;pointer-events:none;
 background:radial-gradient(circle,rgba(255,255,255,.75),rgba(170,200,255,.35) 45%,transparent 70%);animation:hsHalo 3.2s ease-in-out infinite alternate}
@keyframes hsHalo{from{opacity:.6;scale:.92}to{opacity:1;scale:1.06}}
/* the aura worn goes into the arena and onto the level-up */
.duel.fig .dside.lk-gilded .dfig{filter:drop-shadow(0 0 8px rgba(255,214,90,.95)) drop-shadow(0 8px 8px rgba(0,0,0,.6))}
.duel.fig .dside.lk-frost .dfig{filter:drop-shadow(0 0 8px rgba(170,230,255,.95)) drop-shadow(0 8px 8px rgba(0,0,0,.6))}
.duel.fig .dside.lk-ember .dfig{filter:drop-shadow(0 0 8px rgba(255,140,40,.95)) drop-shadow(0 8px 8px rgba(0,0,0,.6))}
.duel.fig .dside.lk-verdant .dfig{filter:drop-shadow(0 0 8px rgba(170,255,120,.9)) drop-shadow(0 8px 8px rgba(0,0,0,.6))}
.duel.fig .dside.lk-shadow .dfig{filter:drop-shadow(0 0 9px rgba(170,90,255,.95)) drop-shadow(0 8px 8px rgba(0,0,0,.6))}
.duel.fig .dside.lk-celestial .dfig{filter:drop-shadow(0 0 9px rgba(255,255,255,.95)) drop-shadow(0 8px 8px rgba(0,0,0,.6))}
#banner .bi.lk-frost .bnh-fig{filter:drop-shadow(0 0 16px rgba(170,230,255,.95)) drop-shadow(0 6px 8px rgba(0,0,0,.45))}
#banner .bi.lk-ember .bnh-fig{filter:drop-shadow(0 0 16px rgba(255,120,30,.95)) drop-shadow(0 6px 8px rgba(0,0,0,.45))}
#banner .bi.lk-verdant .bnh-fig{filter:drop-shadow(0 0 16px rgba(150,255,100,.9)) drop-shadow(0 6px 8px rgba(0,0,0,.45))}
#banner .bi.lk-shadow .bnh-fig{filter:drop-shadow(0 0 16px rgba(170,90,255,.95)) drop-shadow(0 6px 8px rgba(0,0,0,.45))}
#banner .bi.lk-celestial .bnh-fig{filter:drop-shadow(0 0 18px #fff) drop-shadow(0 6px 8px rgba(0,0,0,.45))}
@media (prefers-reduced-motion:reduce){.hs-ward,.hs.lk-celestial .hs-fig::before{animation:none}}
/* the armory (39-003, src/app/ui/hero/Armory.tsx): gear art, the Forge, the Merchant, Hero Chests */
.hs-iart{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.hs-item .hs-iart{width:48px;height:48px}
.hs-cart{position:absolute;right:42px;top:8px;width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))}
.hs-card:has(.hs-cart) .hs-ch{padding-right:70px}
.hs-cv2{margin-top:-4px;font-size:13.5px;color:#4a3216}
.ar-tiles{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:8px;margin:12px 0 0;align-items:stretch}
.ar-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;min-height:82px;padding:6px 4px 7px;border-radius:14px;cursor:pointer;
 background:radial-gradient(circle at 50% 30%,#6a4a22,#2a1c0e 78%);border:2px solid #c99a3e;box-shadow:inset 0 0 12px rgba(0,0,0,.5),0 3px 0 #5a320a,0 6px 12px rgba(0,0,0,.3);color:#ffe9b0}
.ar-tile img{width:50px;height:50px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6));transition:transform .2s}
.ar-tile b{font:400 14px/1 'Lilita One',sans-serif;letter-spacing:.02em;text-shadow:0 1px 2px #000}
.ar-tile.on{border-color:#fff3c0;box-shadow:0 0 0 3px #fff3c0,0 0 16px rgba(255,220,120,.6)}
.ar-tile.on img{transform:scale(1.1) rotate(-4deg)}
.ar-tile .hs-new{top:-7px;right:-7px}
.ar-shards{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:64px;padding:4px 6px;border-radius:14px;background:linear-gradient(180deg,#2c2140,#1a1228);border:2px solid #8a6ad6;color:#e6dcff}
.ar-shards img{width:34px;height:34px;object-fit:contain}
.ar-shards b{font:900 15px/1 Nunito,sans-serif}.ar-shards small{font:800 10px Nunito,sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.ar-wrap{position:relative;margin-top:10px;animation:hsCard .25s ease-out}
.ar-wrap>.hs-x{z-index:3;background:rgba(255,255,255,.14);color:#fff}
.ar-panel{position:relative;padding:12px 12px 12px;border-radius:16px;border:2px solid #c99a3e;color:#f6ead0;overflow:hidden;isolation:isolate;
 background:linear-gradient(180deg,rgba(18,12,6,.55),rgba(18,12,6,.88) 55%),var(--bg,linear-gradient(#3a2814,#1d150c)) center/cover;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.ar-panel h3{margin:0;font:400 21px/1.1 'Lilita One',sans-serif;color:#ffe08a;text-shadow:0 2px 3px #000}
.ar-sub{display:block;margin:2px 34px 8px 0;font:700 12px/1.3 Nunito,sans-serif;color:#eadcb8;text-shadow:0 1px 2px #000}
.ar-sets{display:flex;flex-direction:column;gap:6px}
.ar-srow{padding:6px 8px;border-radius:12px;background:rgba(10,7,3,.62);border:1.5px solid color-mix(in srgb,var(--rc) 70%,transparent)}
.ar-srow.on{background:rgba(40,28,10,.8);box-shadow:0 0 12px color-mix(in srgb,var(--rc) 60%,transparent)}
.ar-srow.locked{opacity:.62}
.ar-sh{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ar-sh b{font:400 15.5px/1.1 'Lilita One',sans-serif;text-shadow:0 1px 2px #000}
.ar-sh small{font:800 11px Nunito,sans-serif;color:#eadcb8}
.ar-pieces{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-top:5px}
.ar-piece{min-width:0;width:100%;aspect-ratio:1;border-radius:10px;padding:2px;cursor:pointer;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.16),rgba(0,0,0,.4) 75%);border:1.5px solid rgba(231,184,74,.4)}
.ar-piece img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.ar-piece.on{border-color:#fff3c0;box-shadow:0 0 0 2px #fff3c0,0 0 10px var(--rc)}
.ar-piece:disabled{cursor:default}.ar-piece:disabled img{filter:grayscale(1) brightness(.55)}
.ar-act{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(231,184,74,.4)}
.ar-pick{display:flex;gap:10px;align-items:center}
.ar-pick img{width:78px;height:78px;object-fit:contain;flex:none;filter:drop-shadow(0 0 10px rgba(255,210,120,.5)) drop-shadow(0 3px 4px #000);animation:hsPop .45s cubic-bezier(.3,1.8,.5,1)}
.ar-pick b{display:block;font:400 18px/1.1 'Lilita One',sans-serif;text-shadow:0 1px 2px #000}
.ar-pick small{display:block;font:800 12px Nunito,sans-serif;color:#eadcb8}
.ar-bon{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.ar-bon span{font:800 11px/1.2 Nunito,sans-serif;padding:3px 7px;border-radius:9px;background:rgba(0,0,0,.45);color:#cdbf9e;border:1px solid rgba(255,255,255,.12)}
.ar-bon span.on{background:rgba(70,140,40,.55);color:#e9ffd8;border-color:#9cf07a}
.ar-go{display:flex;flex-direction:column;align-items:center;line-height:1.15;padding:8px 14px}
.ar-go>span{font:400 18px 'Lilita One',sans-serif}.ar-go small{font:800 11.5px Nunito,sans-serif}
.ar-go.short small{color:#9a2a10}
.ar-offers{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ar-offer{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 6px;border-radius:12px;text-align:center;background:rgba(10,7,3,.66);border:1.5px solid var(--rc);box-shadow:inset 0 0 14px color-mix(in srgb,var(--rc) 35%,transparent)}
.ar-offer img{width:66px;height:66px;object-fit:contain;filter:drop-shadow(0 3px 4px #000)}
.ar-offer b{font:400 14px/1.1 'Lilita One',sans-serif;text-shadow:0 1px 2px #000}
.ar-offer small{font:800 11.5px Nunito,sans-serif;color:#eadcb8}
.ar-offer.sold{opacity:.5}.ar-offer.sold img{filter:grayscale(.8)}
.ar-soldtag{font:900 12px Nunito,sans-serif;color:#ffb4a0;text-transform:uppercase;letter-spacing:.1em}
.ar-extra{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;justify-content:center}
.ar-chests{background:radial-gradient(circle at 50% 40%,#4a3214,#160f08 75%)}
.ar-chest,.ar-reveal{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:6px 0 2px}
.ar-cimg{width:132px;height:132px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.7)) grayscale(.6) brightness(.7)}
.ar-cimg.ready{filter:drop-shadow(0 0 16px rgba(255,200,90,.8)) drop-shadow(0 6px 8px rgba(0,0,0,.7));animation:arWiggle 2.2s ease-in-out infinite}
@keyframes arWiggle{0%,70%,100%{rotate:0deg;scale:1}74%{rotate:-6deg;scale:1.04}78%{rotate:6deg}82%{rotate:-4deg}86%{rotate:3deg}90%{rotate:0deg;scale:1}}
.ar-chest b,.ar-reveal b{font:400 19px/1.15 'Lilita One',sans-serif;text-shadow:0 1px 2px #000}
.ar-chest small,.ar-reveal small{font:800 12.5px Nunito,sans-serif;color:#eadcb8}
.ar-cbar{width:70%;height:8px}
.ar-reveal{position:relative;padding-top:14px}
.ar-rays{position:absolute;left:50%;top:84px;width:300px;height:300px;translate:-50% -50%;border-radius:50%;z-index:-1;pointer-events:none;
 background:repeating-conic-gradient(color-mix(in srgb,var(--rc) 70%,#fff) 0deg 7deg,transparent 7deg 20deg);
 -webkit-mask:radial-gradient(circle,#000 14%,transparent 66%);mask:radial-gradient(circle,#000 14%,transparent 66%);animation:hsSpin 8s linear infinite,arRays .6s ease-out both}
@keyframes arRays{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
.ar-ritem{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 0 18px var(--rc)) drop-shadow(0 4px 6px #000);animation:arRise .8s cubic-bezier(.2,1.5,.4,1) both}
@keyframes arRise{0%{opacity:0;transform:translateY(40px) scale(.3) rotate(-20deg)}100%{opacity:1;transform:none}}
.ar-worn .ar-set{padding:7px 9px;border-radius:12px;background:linear-gradient(180deg,#2c2114,#1d150c);border:1.5px solid var(--rc);margin-bottom:6px;color:#f6ead0}
@media (prefers-reduced-motion:reduce){.ar-cimg.ready,.ar-rays,.ar-ritem,.ar-pick img,.ar-wrap{animation:none}}
@media (max-width:360px){.ar-tiles{grid-template-columns:repeat(3,1fr)}.ar-shards{grid-column:1/-1;flex-direction:row;gap:6px;min-height:0}}
/* the Arena lobby (39-004): both heroes in full figure on the colosseum sand */
.hud-btn.arena{left:168px;width:64px;height:64px;background:linear-gradient(180deg,#ff8a8a,#d8343a 55%,#9a1a22)}.hud-btn.arena .hi{font-size:24px}
@media (max-width:420px){.hud-btn.arena{left:148px;width:56px;height:56px}}
.ar2-stage{position:relative;height:250px;margin:-4px -4px 10px;border-radius:16px;overflow:clip;display:flex;align-items:flex-end;justify-content:space-between;padding:0 6px 8px;
 background:radial-gradient(ellipse at 50% 100%,rgba(255,200,120,.25),transparent 60%),var(--bg) center 60%/cover,linear-gradient(#5a3a1e,#2a1a0c);
 border:2px solid #c99a3e;box-shadow:inset 0 -40px 40px rgba(0,0,0,.45),0 6px 16px rgba(0,0,0,.35)}
.ar2-title{position:absolute;top:8px;left:0;right:0;margin:0;text-align:center;font:400 22px 'Lilita One',Nunito,sans-serif;color:#ffe9b0;text-shadow:0 2px 0 #3a1e08,0 0 12px rgba(0,0,0,.6);z-index:3}
.ar2-side{position:relative;flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;z-index:2}
.ar2-fig{display:block;height:170px;max-width:100%;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(0,0,0,.6));animation:ar2Idle 3.2s ease-in-out infinite;transform-origin:50% 100%}
.ar2-side.foe .ar2-fig{transform:scaleX(-1);animation-name:ar2IdleF;animation-delay:-1.6s}
.ar2-side.me .ar2-fig{animation:ar2In .55s cubic-bezier(.2,1.4,.4,1) both,ar2Idle 3.2s ease-in-out .55s infinite}
span.ar2-fig.av{height:auto;margin-bottom:24px}
.ar2-side.lk-gilded .ar2-fig{filter:drop-shadow(0 0 8px rgba(255,214,90,.9)) drop-shadow(0 8px 8px rgba(0,0,0,.6))}
.ar2-side.lk-frost .ar2-fig{filter:drop-shadow(0 0 8px rgba(170,230,255,.9)) drop-shadow(0 8px 8px rgba(0,0,0,.6))}
.ar2-side.lk-ember .ar2-fig{filter:drop-shadow(0 0 8px rgba(255,138,58,.9)) drop-shadow(0 8px 8px rgba(0,0,0,.6))}
.ar2-side.lk-verdant .ar2-fig{filter:drop-shadow(0 0 8px rgba(168,255,122,.9)) drop-shadow(0 8px 8px rgba(0,0,0,.6))}
.ar2-side.lk-shadow .ar2-fig{filter:drop-shadow(0 0 8px rgba(176,112,255,.9)) drop-shadow(0 8px 8px rgba(0,0,0,.6))}
.ar2-side.lk-celestial .ar2-fig{filter:drop-shadow(0 0 9px rgba(255,255,255,.95)) drop-shadow(0 8px 8px rgba(0,0,0,.6))}
.ar2-plate{margin-top:-6px;padding:4px 9px;border-radius:10px;background:rgba(20,12,4,.78);border:1.5px solid #c99a3e;color:#f6ead0;text-align:center;max-width:100%;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.ar2-plate b{display:block;font:900 13px/1.15 Nunito,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar2-plate small{display:block;font-size:11px;opacity:.85;white-space:nowrap}
.ar2-side.foe .ar2-plate{border-color:#d8343a}
.ar2-pow{color:#ffd25a;font-weight:900}
.ar2-vs{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:3;font:400 40px 'Lilita One',Nunito,sans-serif;color:#ffd25a;
 text-shadow:0 3px 0 #7a1a10,0 0 18px rgba(255,120,40,.9);animation:ar2Vs 1.6s ease-in-out infinite}
.ar2-meta{display:flex;gap:8px;margin:0 0 10px;flex-wrap:wrap}
.ar2-chest{flex:1 1 200px;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:linear-gradient(180deg,#2c2114,#1d150c);color:#f6ead0;border:1.5px solid #c99a3e}
.ar2-chest img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.ar2-chest small,.ar2-chip small{display:block;font-size:11px;opacity:.8}.ar2-chest .hs-bar{margin-top:4px}
.ar2-chip{flex:0 0 auto;padding:6px 12px;border-radius:12px;background:linear-gradient(180deg,#2c2114,#1d150c);color:#ffd25a;border:1.5px solid #c99a3e;text-align:center}
.ar2-chip b{font:400 18px 'Lilita One',Nunito,sans-serif}
.ar2-opp{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;margin:6px 0;border-radius:12px;background:rgba(255,255,255,.6);border:2px solid #c9b48a;border-left-width:6px}
.ar2-opp.weaker{border-left-color:#3fae4a}.ar2-opp.even{border-left-color:#e0a020}.ar2-opp.stronger{border-left-color:#d8343a}
.ar2-opp .grow{min-width:0}.ar2-opp b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ar2-opp small{display:block;font-size:11.5px}
.ar2-opp.weaker .ar2-pow i{color:#2a8a34}.ar2-opp.even .ar2-pow i{color:#a87410}.ar2-opp.stronger .ar2-pow i{color:#c0242a}.ar2-opp .ar2-pow{color:#8a5a10}.ar2-opp .ar2-pow i{font-style:normal;margin-left:4px}
.ar2-of{flex:0 0 56px;height:64px;border-radius:10px;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;background:radial-gradient(circle at 50% 70%,#f6dca0,#b08040)}
.ar2-oimg{height:62px;width:auto;object-fit:contain}span.ar2-oimg.av{height:auto;transform:scale(.6)}
.ar2-opp.npc .ar2-of{background:radial-gradient(circle at 50% 70%,#e8c8c8,#8a4040)}
.ar2-opp .btn{flex:0 0 auto}
@keyframes ar2Idle{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-3px) scaleY(1.012)}}
@keyframes ar2IdleF{0%,100%{transform:scaleX(-1) translateY(0)}50%{transform:scaleX(-1) translateY(-3px)}}
@keyframes ar2In{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes ar2Vs{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}}
@media (prefers-reduced-motion:reduce){.ar2-fig,.ar2-side.me .ar2-fig,.ar2-vs{animation:none}.ar2-side.foe .ar2-fig{transform:scaleX(-1)}}


/* ==============================================================   Button feel (src/app/fx/juice.ts): squash while pressed, spring back on release.
   Uses the separate `scale` property, so buttons placed with their own transform
   (centred, rotated badges) keep it.
   ===================================================================== */
html.juice button.spr{animation:none}
html.juice :is(button,.btn,.al,.atkrow,.clrow,.tc2,.hcard).prs:not(:disabled){scale:.93;filter:brightness(1.07);transition:scale .06s ease-out,filter .06s}
html.juice :is(button,.btn,.al,.atkrow,.clrow,.tc2,.hcard).rel{animation:juiceRel .36s cubic-bezier(.3,1.7,.5,1)}
@keyframes juiceRel{0%{scale:.93}55%{scale:1.05}100%{scale:1}}
@media (prefers-reduced-motion:reduce){html.juice .prs{scale:1!important}html.juice .rel{animation:none}}


/* ids are doubled (#toasts#toasts) to outrank the older :has() rules, which carry an id too */
/* ==============================================================   Overlay dock (src/app/fx/dock.ts): the bottom cards never cover each other.
   The module measures the cards on screen and sets --dk-* on <html>; without
   the module (html:not(.dock)) the older fixed positions above still apply.
   ===================================================================== */
html.dock #guide{bottom:var(--dk-guide,calc(var(--sab,0px) + 70px))!important}
html.dock .tipcard{bottom:var(--dk-tip,calc(var(--sab,0px) + 100px))!important}
html.dock #cart94{bottom:var(--dk-cart,calc(96px + var(--sab,0px)))!important}
html.dock:not(:has(#sheet.on)) #herald#herald{bottom:var(--dk-herald,calc(var(--sab,0px) + 168px))!important}
html.dock.dk-toast-bottom body:not([data-tab="map"]) #toasts#toasts{top:auto!important;bottom:var(--dk-toast-bottom)!important}
html.dock.dk-toast-top body:not([data-tab="map"]) #toasts#toasts{bottom:auto!important;top:var(--dk-toast-top)!important;right:var(--dk-toast-right,0px)!important;flex-direction:column!important}
/* over an open sheet a toast never takes a tap meant for the sheet's buttons */
html.dock body:has(#sheet.on) #toasts .toast{pointer-events:none!important}
/* with a sheet open the herald sits below the toasts, never over them */
html.dock body:has(#sheet.on) #herald#herald{top:var(--dk-herald-top,calc(var(--sat,0px) + 64px))!important}
/* no room above an open sheet: the herald's bubble is hidden rather than drawn over the sheet's text (its voice still plays) */
html.dock.dk-herald-off body:has(#sheet.on) #herald#herald{visibility:hidden!important;opacity:0!important}
/* the sign-in screen's music and full-screen buttons belong to that screen only: once the
   game's top bar is up they would sit on the settings and sound buttons */
#app:has(#top) ~ #obMus,#app:has(#top) ~ #obFs{display:none!important}
/* narrow phones (360px): the four round buttons of the top bar fit inside the screen */
@media (max-width:389px){.top .tb{gap:4px}.top .ib{width:30px!important;height:30px!important;min-width:30px}.top .ib svg,.top .ib .ico{width:16px;height:16px}}
=======


/* =====================================================================
   Screen transitions (src/app/fx/transitions.ts)
   ===================================================================== */
/* tabs: the new screen slides in from the side of its tab, growing from slightly behind
   (the fixed tip card stays put) */
#view.tx-from-right>:not(.tipcard){animation:txFromR .32s cubic-bezier(.2,.85,.25,1) both}
#view.tx-from-left>:not(.tipcard){animation:txFromL .32s cubic-bezier(.2,.85,.25,1) both}
@keyframes txFromR{from{opacity:0;transform:translateX(40px) scale(.975)}60%{opacity:1}to{opacity:1;transform:none}}
@keyframes txFromL{from{opacity:0;transform:translateX(-40px) scale(.975)}60%{opacity:1}to{opacity:1;transform:none}}
/* to and from the world map: the camera pulls up (to the map) or dives down (home) */
#view.tx-to-map>:not(.tipcard){animation:txToMap .78s cubic-bezier(.22,.9,.3,1) both}
#view.tx-from-map>:not(.tipcard){animation:txFromMap .78s cubic-bezier(.22,.9,.3,1) both}
@keyframes txToMap{0%{transform:scale(1.14);filter:brightness(1.35) saturate(.8)}100%{transform:none;filter:none}}
@keyframes txFromMap{0%{transform:scale(.88);filter:brightness(1.35) saturate(.8)}100%{transform:none;filter:none}}
/* the iris: dark all round a hole that opens from the centre, rimmed with golden light, the
   emblem flaring at its heart (it never takes taps). The hole is a mask driven by one animated
   length (--txr); browsers without @property get a plain fade (.txiris without .ok) */
@property --txr{syntax:'<length>';inherits:true;initial-value:0px}
.txiris{position:fixed;inset:0;z-index:48;pointer-events:none;overflow:hidden;contain:strict;--txr:0px}
.txiris.ok{animation:txIris .8s cubic-bezier(.65,0,.3,1) both}
@keyframes txIris{0%,16%{--txr:0px}100%{--txr:120vmax}}
.txi-hole{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(40,26,10,.6),#120c06 70%)}
.txiris.ok .txi-hole{-webkit-mask:radial-gradient(circle at 50% 50%,transparent var(--txr),#000 calc(var(--txr) + 1px));mask:radial-gradient(circle at 50% 50%,transparent var(--txr),#000 calc(var(--txr) + 1px))}
.txiris:not(.ok) .txi-hole{animation:txFade .8s ease-in both}
@keyframes txFade{0%,20%{opacity:1}100%{opacity:0}}
.txi-ring{display:none}
.txiris.ok .txi-ring{display:block;position:absolute;left:50%;top:50%;width:calc(var(--txr) * 2);height:calc(var(--txr) * 2);transform:translate(-50%,-50%);border-radius:50%;
 box-shadow:0 0 0 3px #ffe39a,0 0 18px 6px rgba(255,190,80,.75),inset 0 0 22px 4px rgba(255,210,120,.45);animation:txRing .8s linear both}
@keyframes txRing{0%,16%{opacity:0}24%{opacity:1}80%{opacity:.85}100%{opacity:0}}
.txi-flare{position:absolute;left:50%;top:50%;width:70vmin;height:70vmin;margin:-35vmin 0 0 -35vmin;border-radius:50%;
 background:radial-gradient(circle,rgba(255,236,170,.95) 0%,rgba(255,196,80,.45) 22%,rgba(255,170,40,0) 60%);animation:txFlare .8s ease-out both}
@keyframes txFlare{0%{opacity:0;transform:scale(.2)}18%{opacity:1;transform:scale(.6)}55%{opacity:.25;transform:scale(1.4)}100%{opacity:0;transform:scale(1.8)}}
.txi-emb{position:absolute;left:50%;top:50%;width:min(30vmin,140px);height:min(30vmin,140px);transform:translate(-50%,-50%);
 filter:drop-shadow(0 0 10px rgba(255,200,90,.9));animation:txEmb .8s cubic-bezier(.3,1.4,.5,1) both}
.txi-emb svg{width:100%;height:100%;display:block}
.to-map .txi-emb svg{animation:txSpin .8s cubic-bezier(.3,0,.2,1) both}
@keyframes txEmb{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}14%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}30%{opacity:1;transform:translate(-50%,-50%) scale(1)}55%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}100%{opacity:0}}
@keyframes txSpin{from{rotate:-70deg}to{rotate:20deg}}
@media (prefers-reduced-motion:reduce){.txiris{display:none}#view[class*="tx-"]>*{animation:none!important}}


/* 39-011: the world map looks like a world: gilded frame, brass compass, edge mist, drifting clouds (CSS only) */
#mapbox:has(#wmc){border:3px solid #7a4e22;box-shadow:0 0 0 2px #e6bf63,0 0 0 5px #4a2d12,0 6px 0 5px #3a230e,0 12px 26px rgba(0,0,0,.32);border-radius:16px;isolation:isolate}
#mapbox:has(#wmc)::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
 box-shadow:inset 0 0 0 1px rgba(255,226,150,.55),inset 0 0 18px 5px rgba(236,242,232,.24),inset 0 0 70px 6px rgba(20,40,20,.18)}
#mapbox:has(#wmc)::after{content:'';position:absolute;top:0;left:0;width:200%;height:100%;z-index:2;pointer-events:none;
 background-image:url(/a/mv_cloud3.0417c713.webp),url(/a/mv_cloudsh2.384fcd40.webp),url(/a/mv_cloudsh2.384fcd40.webp);background-repeat:repeat-x;
 background-size:12.5% auto,25% auto,25% auto;background-position:1% 0,5.5% 14%,15% 94%;will-change:transform;animation:mv39drift 160s linear infinite}
@keyframes mv39drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
#mapbox:has(#wmc) .rose{width:50px;height:50px;background:url(/a/mv_rose.af22b814.webp) center/contain no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
#mapbox:has(#wmc) .rose svg{display:none}
.legend .lg39{width:30px;height:30px;object-fit:contain;flex:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
@media (prefers-reduced-motion:reduce){#mapbox:has(#wmc)::after{animation:none}}


/* ===== 39-012 the first run, revamped ===== */
.ob.ob12{isolation:isolate;position:relative;background:transparent!important}
#app:has(> .ob12){background:#120a04!important}
.ob12bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#120a04}
.ob12bg img{position:absolute;left:0;top:0;width:100%;height:76%;object-fit:cover;object-position:50% 28%;transform-origin:50% 45%;animation:ob12kb 30s ease-in-out infinite alternate}
.ob12bg .ob12fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,10,4,.45) 0,rgba(18,10,4,0) 12%,rgba(18,10,4,0) 46%,rgba(18,10,4,.72) 64%,#120a04 76%)}
.ob12bg .ob12rays{position:absolute;left:50%;top:-30%;width:180%;height:90%;transform:translateX(-50%);background:repeating-conic-gradient(from 160deg at 50% 0%,rgba(255,232,160,.0) 0deg,rgba(255,232,160,.16) 4deg,rgba(255,232,160,0) 9deg,rgba(255,232,160,0) 14deg);-webkit-mask:radial-gradient(60% 100% at 50% 0%,#000 30%,transparent 85%);mask:radial-gradient(60% 100% at 50% 0%,#000 30%,transparent 85%);animation:ob12ray 8s ease-in-out infinite alternate}
.ob12bg .emb73{top:30%}
.ob12bg.dim img{height:100%;object-position:50% 40%}
.ob12bg.dim .ob12fade{background:linear-gradient(180deg,rgba(18,10,4,.74),rgba(18,10,4,.86) 40%,rgba(18,10,4,.95) 75%,#120a04)}
.ob12bg.dim .ob12rays{display:none}
@keyframes ob12kb{from{transform:scale(1)}to{transform:scale(1.07) translateY(-1.5%)}}
@keyframes ob12ray{from{opacity:.45}to{opacity:1}}
/* home screen */
.ob.ob12l{padding:0 16px 20px!important;display:block!important}
.ob12first{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:stretch;padding-bottom:6px}
.ob12first > .obsteps{margin:10px auto 0!important}
.ob12l .obsteps span{background:rgba(20,12,5,.62)!important;border:1px solid rgba(255,220,150,.4)}
.ob12l .obsteps span.on{background:linear-gradient(180deg,#e7b54a,#a8741f)!important;color:#fff!important}
.ob12hero{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;padding-top:clamp(18px,4vh,40px);text-align:center}
.ob12logo{width:min(86vw,380px);height:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));animation:ob12logo .9s cubic-bezier(.2,1.3,.4,1) both}
.ob12tag{margin:4px auto 0;max-width:300px;font-weight:800;font-size:15px;line-height:1.35;color:#fff8e6;text-shadow:0 1px 2px #000,0 0 12px rgba(0,0,0,.85),0 0 24px rgba(40,20,0,.7);animation:up73 .7s .25s both}
@keyframes ob12logo{from{opacity:0;transform:translateY(-14px) scale(.9)}to{opacity:1;transform:none}}
.ob.ob12l .login.ob12cta{margin:0 auto!important;width:100%;max-width:440px;gap:6px;padding:16px 16px 12px!important;border-radius:22px;
 background:linear-gradient(180deg,rgba(46,28,12,.86),rgba(22,13,5,.94))!important;border:1.5px solid rgba(231,186,96,.75)!important;
 box-shadow:0 0 0 3px rgba(26,15,6,.7),0 20px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,233,163,.25)!important}
.ob12l h2.t73{font-size:24px!important;margin:0 0 6px!important}
.ob12l .ret73{margin:0 0 4px!important;font-size:12.5px;line-height:1.3}
.ob12l .gn73{margin-top:0!important;font-size:12px;line-height:1.3}
.ob12more{display:flex;flex-direction:column;align-items:center;gap:0;margin:12px auto 0;padding:4px 14px;background:none;border:0;color:#ffe08a;font-weight:800;font-size:14px;text-shadow:0 1px 2px #000;cursor:pointer}
.ob12more span{width:12px;height:12px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg);margin-top:2px;animation:ob12bob 1.6s ease-in-out infinite}
@keyframes ob12bob{0%,100%{translate:0 0}50%{translate:0 4px}}
.ob12about{max-width:440px;margin:26px auto 0;scroll-margin-top:60px}
.ob12about h2{text-align:center;margin:0 0 12px!important;font-size:22px!important;color:#ffe08a!important;text-shadow:0 2px 0 #2a1404,0 0 14px rgba(255,190,60,.35)}
.ob12steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ob12steps li{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:16px;background:linear-gradient(180deg,rgba(64,40,18,.6),rgba(30,18,8,.75));border:1px solid rgba(231,186,96,.35)}
.ob12n{position:relative;flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#5a3a18,#24150a);border:2px solid #d9a845;box-shadow:0 2px 0 rgba(0,0,0,.5)}
.ob12n em{position:absolute;right:-5px;top:-5px;width:20px;height:20px;border-radius:50%;background:#ffd35a;color:#3a1e06;font:900 12px/20px Nunito,sans-serif;text-align:center;font-style:normal}
.ob12steps b{display:block;font-size:16px;color:#fff3dc;line-height:1.25}
.ob12steps small{display:block;font-size:13.5px;line-height:1.35;color:#e3cfa6;font-weight:700}
.ob12about .peek73{margin:14px 0 6px!important}
/* tribe step */
.ob12t > h1.tpick{margin-top:2px!important}
.ob12t .tc2{display:grid;grid-template-rows:auto 1fr;text-align:start}
.ob12t .tc2 .tcimg{grid-area:1/1;aspect-ratio:5/4}
.ob12t .tc2 .tcname{grid-area:1/1;position:static!important;align-self:end;z-index:1}
.ob12t .tc2 .tccheck{z-index:2}
.tc12f{display:flex;flex-direction:column;gap:6px;padding:6px 8px 8px;background:linear-gradient(180deg,#22150a,#170e06);border-top:1px solid color-mix(in srgb,var(--tc) 60%,transparent)}
.tc12id{display:block;font-size:12px;line-height:1.25;font-weight:700;color:#ead9b4;min-height:30px}
.tc12st{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto}
.ob12s{display:inline-flex;align-items:center;gap:2px;padding:1px 5px 1px 2px;border-radius:999px;background:color-mix(in srgb,var(--tc) 30%,#1b120a);border:1px solid color-mix(in srgb,var(--tc) 65%,#ffe08a)}
.ob12s.top{border-color:#ffd35a;box-shadow:0 0 6px rgba(255,211,90,.45)}
.ob12s small{font-size:10px;font-weight:900;color:#fff1cf;letter-spacing:.01em}
.ob12s .ico{flex:none}
.tf12h{margin-top:12px}
.tf12h > b{display:block;font-size:14px;color:#ffe08a;margin-bottom:6px}
.tf12h > div{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tf12h span{display:flex;flex-direction:column;align-items:center;gap:2px}
.tf12h small{font-size:12px;font-weight:800;color:#f6ecd6;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* hero step */
.ob12h .rhead{height:100px!important;margin:4px 0 10px!important}
.ob12h .refban.ob12acct{display:inline-flex;align-items:center;gap:6px;width:auto;margin:0 0 4px;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:800;background:rgba(0,0,0,.35)!important;border:1px solid rgba(231,186,96,.4)}
.ob12h h2.rtitle{margin:10px 0 2px!important}
.ob12h h2.rtitle + p{margin:0 0 10px;font-size:14px;line-height:1.4;color:#e6d3ac!important;font-weight:700}
.hp12{margin-bottom:16px}
.hp12stage{position:relative;height:clamp(260px,36vh,380px);border-radius:20px;overflow:hidden;border:2px solid var(--tc);box-shadow:0 0 22px color-mix(in srgb,var(--tc) 45%,transparent),0 8px 0 rgba(0,0,0,.4);background:#1a120a}
.hp12bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hp12stage::after{content:'';position:absolute;inset:0;background:radial-gradient(70% 55% at 50% 62%,rgba(255,236,190,.16),transparent 70%),linear-gradient(180deg,rgba(10,6,2,.85) 0,rgba(10,6,2,.55) 24%,rgba(10,6,2,.45) 55%,rgba(10,6,2,.75) 100%);z-index:0}
.hp12glow{position:absolute;left:50%;bottom:-6%;width:86%;height:34%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--tc) 55%,#ffe08a) 0,color-mix(in srgb,var(--tc) 30%,transparent) 45%,transparent 100%);z-index:1;animation:ob12glow .9s ease-out both,ob12pulse 3.4s ease-in-out .9s infinite alternate}
.hp12fig{position:absolute;left:50%;bottom:4px;height:calc(100% - 66px);width:auto;max-width:92%;object-fit:contain;object-position:50% 100%;transform:translateX(-50%);z-index:2;filter:drop-shadow(0 8px 10px rgba(0,0,0,.55));animation:ob12rise .6s cubic-bezier(.2,1.25,.4,1) both}
.hp12fig.av{display:grid;place-items:end center;height:auto;bottom:24px}
.hp12plate{position:absolute;left:0;right:0;top:0;z-index:3;padding:10px 14px 0;text-align:center;animation:up73 .45s both}
.hp12plate b{display:block;font:400 24px/1.1 'Lilita One',Nunito,sans-serif;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.7),0 0 12px rgba(0,0,0,.6)}
.hp12plate small{display:block;font-size:13px;font-weight:800;color:#ffe08a;text-shadow:0 1px 2px #000}
.hp12g{display:inline-block;margin-bottom:3px;padding:1px 9px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#2a1606;background:linear-gradient(180deg,#ffe9a8,#e0a93c)}
@keyframes ob12rise{from{opacity:0;transform:translateX(-50%) translateY(26px) scale(.94)}to{opacity:1;transform:translateX(-50%)}}
@keyframes ob12glow{from{opacity:0;transform:translateX(-50%) scale(.4)}60%{opacity:1;transform:translateX(-50%) scale(1.15)}to{opacity:.85;transform:translateX(-50%)}}
@keyframes ob12pulse{from{opacity:.7}to{opacity:1}}
.hp12row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0}
.hp12b{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px 6px;border-radius:14px;background:linear-gradient(180deg,#3a2614,#1d1309);border:2px solid rgba(231,186,96,.35);color:#f6ecd6;cursor:pointer;transition:transform .18s cubic-bezier(.3,1.6,.5,1),border-color .2s,box-shadow .2s;min-width:0}
.hp12b:active{transform:scale(.95)}
.hp12bf{display:block;width:100%;height:100px;overflow:hidden;position:relative;border-radius:10px;background:radial-gradient(60% 70% at 50% 70%,color-mix(in srgb,var(--tc) 45%,transparent),transparent 75%)}
.hp12bi{display:block;height:100%;width:auto;max-width:100%;margin:0 auto;object-fit:contain;object-position:50% 100%}
.hp12bi.av{display:grid;place-items:center}
.hp12b b{font-size:12.5px;letter-spacing:-.01em;font-weight:900;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px}
.hp12b:not(.on) .hp12bi{opacity:.82}
.hp12b.on{border-color:#ffd35a;transform:translateY(-3px);box-shadow:0 0 0 2px color-mix(in srgb,var(--tc) 70%,transparent),0 0 16px color-mix(in srgb,var(--tc) 60%,transparent),0 5px 0 rgba(0,0,0,.4);background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 40%,#3a2614),#1d1309)}
.hp12b.on b{color:#ffe08a}
.hp12info{padding:12px;border-radius:16px;background:linear-gradient(180deg,rgba(64,40,18,.65),rgba(30,18,8,.8));border:1px solid rgba(231,186,96,.35);display:grid;gap:8px}
.hp12bio{margin:0;font-size:14.5px;line-height:1.45;font-style:italic;color:#f1e2c2}
.hp12chip{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:12px}
.hp12chip > .ico{flex:none;width:30px!important;height:30px!important;padding:6px;border-radius:50%;box-sizing:border-box}
.hp12chip small{display:block;font-size:11.5px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.hp12chip b{display:block;font-size:14.5px;line-height:1.3;color:#fff6e2}
.hp12chip.sk{background:rgba(70,140,60,.22);border:1px solid rgba(140,220,120,.45)}.hp12chip.sk small{color:#9fe58f}.hp12chip.sk > .ico{background:rgba(120,200,100,.25)}
.hp12chip.wk{background:rgba(160,60,40,.2);border:1px solid rgba(255,140,110,.4)}.hp12chip.wk small{color:#ffab95}.hp12chip.wk > .ico{background:rgba(255,120,90,.2)}
.ob12name{margin:6px 0 12px;padding:4px 14px 12px;border-radius:18px;background:linear-gradient(180deg,rgba(64,40,18,.55),rgba(30,18,8,.75));border:1px solid rgba(231,186,96,.35)}
.ob12name > p{margin:0 0 6px;font-size:13.5px;line-height:1.35;color:#e3cfa6!important;font-weight:700}
.ob12name .refbox{margin-top:4px}
.ob12next{display:flex;align-items:center;justify-content:center;gap:6px;margin:4px 0 8px;font-size:13.5px;font-weight:700;color:#e6d3ac;text-align:center}
@media (min-width:700px){.hp12,.ob12name{max-width:540px;margin-left:auto;margin-right:auto}}
@media (min-width:960px) and (orientation:landscape){.ob12bg img{height:100%;object-position:50% 52%}.ob12bg .ob12fade{background:linear-gradient(180deg,rgba(18,10,4,.5) 0,rgba(18,10,4,.1) 30%,rgba(18,10,4,.15) 55%,rgba(18,10,4,.75) 80%,#120a04 100%)}}
@media (prefers-reduced-motion:reduce){.ob12bg img,.ob12bg .ob12rays,.ob12logo,.ob12tag,.ob12more span,.hp12fig,.hp12glow,.hp12plate,.ob12 .login>*{animation:none!important}.hp12b{transition:none}}


/* 39-007: seven tabs fit a 360px phone; the Hero tab glows softly while something waits */
nav.tabs{grid-template-columns:repeat(7,minmax(0,1fr))!important}
nav.tabs button{min-width:0;white-space:nowrap}
@media (max-width:400px){nav.tabs button{font-size:11.5px!important;letter-spacing:0!important}nav.tabs button .nbadge{right:calc(50% - 24px)}}
nav.tabs button.nav-hero::after{content:'';position:absolute;left:50%;top:4px;width:40px;height:34px;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,110,.75),rgba(255,180,60,.25) 60%,transparent);opacity:0;pointer-events:none;z-index:-1}
nav.tabs button.nav-hero{isolation:isolate}
nav.tabs button.nav-hero.due::after{animation:navHeroGlow 2.4s ease-in-out infinite}
nav.tabs button.nav-hero.due span{opacity:1}
@keyframes navHeroGlow{0%,100%{opacity:.15}50%{opacity:.85}}
/* the opponent cards: a rival's aura around their figure */
.ar2-of.lk-gilded{background:radial-gradient(circle at 50% 70%,#fff3b0,#c8901a);box-shadow:inset 0 0 0 2px rgba(255,214,90,.9),0 0 8px rgba(255,200,60,.6)}
.ar2-of.lk-frost{background:radial-gradient(circle at 50% 70%,#e8f8ff,#4a8ec0);box-shadow:inset 0 0 0 2px rgba(170,230,255,.9),0 0 8px rgba(120,200,255,.6)}
.ar2-of.lk-ember{background:radial-gradient(circle at 50% 70%,#ffe0a0,#b8461a);box-shadow:inset 0 0 0 2px rgba(255,140,60,.9),0 0 8px rgba(255,100,30,.6)}
.ar2-of.lk-verdant{background:radial-gradient(circle at 50% 70%,#eaffd0,#4a9a32);box-shadow:inset 0 0 0 2px rgba(170,255,120,.85),0 0 8px rgba(100,220,80,.55)}
.ar2-of.lk-shadow{background:radial-gradient(circle at 50% 70%,#c8a0f0,#3a1a5e);box-shadow:inset 0 0 0 2px rgba(176,112,255,.9),0 0 8px rgba(120,60,200,.6)}
.ar2-of.lk-celestial{background:radial-gradient(circle at 50% 70%,#ffffff,#7a8ad0);box-shadow:inset 0 0 0 2px rgba(255,255,255,.95),0 0 9px rgba(170,200,255,.75)}
@media (prefers-reduced-motion:reduce){nav.tabs button.nav-hero.due::after{animation:none;opacity:.6}}


/* ===== 39-008: the Army and the Mail, dressed for war ===== */
body[data-tab="army"] #view{background:radial-gradient(ellipse at 50% -6%,rgba(255,150,60,.32),transparent 44%),radial-gradient(ellipse at 0% 40%,rgba(160,30,20,.22),transparent 40%),radial-gradient(ellipse at 100% 70%,rgba(160,30,20,.18),transparent 40%),linear-gradient(180deg,#3d2616,#26170c 55%,#1d1209)!important}
body[data-tab="mail"] #view{background:radial-gradient(ellipse at 50% -6%,rgba(255,190,90,.30),transparent 44%),radial-gradient(ellipse at 100% 30%,rgba(90,110,190,.16),transparent 45%),linear-gradient(180deg,#3a2716,#24180d 55%,#1c130a)!important}
body[data-tab="army"] #view>h2,body[data-tab="mail"] #view>h2{color:#ffe2a0!important;text-shadow:0 2px 0 #1a0e04,0 0 12px rgba(255,170,60,.35)}
body[data-tab="army"] #view>h2::after,body[data-tab="mail"] #view>h2::after{background:linear-gradient(90deg,#e0a43a,transparent)!important;opacity:.8}
body[data-tab="army"] #view>p.muted,body[data-tab="army"] #view>.muted,body[data-tab="mail"] #view>p.muted{color:#e2cfa6!important}
body[data-tab="army"] #view .ugrp{display:flex;align-items:center;gap:8px;margin:20px 2px 8px;color:#ffdf9e;font:400 15px 'Lilita One',sans-serif;letter-spacing:.3px;text-shadow:0 2px 0 #1a0e04}
body[data-tab="army"] #view .ugrp::after{content:'';flex:1;height:2px;background:linear-gradient(90deg,rgba(224,164,58,.8),transparent)}
/* painted banner */
.am-hero{position:relative;height:168px;margin:0 0 0;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,rgba(10,5,2,.05) 35%,rgba(22,11,4,.82)),var(--amimg) center 38%/cover #2a1a0c;border:2px solid #d9a24c;box-shadow:inset 0 0 0 1px rgba(255,235,180,.35),0 8px 18px rgba(0,0,0,.5)}
.am-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,240,200,.22) 45%,transparent 60%);transform:translateX(-120%);animation:amSheen 7s ease-in-out 1.2s infinite;pointer-events:none}
.am-ht{position:absolute;left:14px;bottom:26px;right:110px}
#view .am-ht h1{margin:0;font-size:32px!important;line-height:1;padding:0}
#view .am-ht h1::after{display:none}
.am-ht span{display:block;margin-top:3px;color:#ffd98a;font:800 12px/1.2 Cinzel,Georgia,serif;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-hp{position:absolute;right:12px;bottom:26px;text-align:right;line-height:1}
.am-hp b{display:block;font:400 30px 'Lilita One',sans-serif;color:#ffe08a;text-shadow:0 3px 0 #3a1e06,0 0 14px rgba(255,190,60,.5)}
.am-hp small{display:block;margin-top:2px;color:#f6e6c4;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;text-shadow:0 1px 2px #000}
.am-hs{position:absolute;left:10px;top:10px;display:flex;align-items:center;gap:5px;padding:3px 10px 3px 3px;border-radius:999px;background:rgba(20,10,4,.62);border:1px solid rgba(255,215,140,.5);color:#f6e6c4;font-size:12px;font-weight:800}
.am-hs .am-seal{width:24px;height:24px}.am-hs b{font:400 15px 'Lilita One',sans-serif;color:#ffe08a}
/* the army's figures */
.asum.am-sum{position:relative;margin:-16px 8px 14px!important;padding:10px 10px 10px!important;border:2px solid #c9954a!important;border-radius:16px!important;box-shadow:0 6px 14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.3)!important}
.am-sum .asl{padding:13px 6px 6px;margin:-6px -4px 0;min-height:58px;gap:8px;scrollbar-width:none}
.am-sum .asl>.muted{font-weight:700}
.am-sum .asc{position:relative;padding:2px 12px 2px 2px;background:color-mix(in srgb,var(--uc,#8a6230) 22%,var(--panel2));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--uc,#8a6230) 85%,transparent)}
.am-sum .asc b{font:400 19px/1 'Lilita One',sans-serif;color:var(--ink);letter-spacing:.3px;text-shadow:0 1px 0 color-mix(in srgb,var(--panel) 70%,transparent)}
.am-sum .asf{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px!important;margin-top:8px!important}
.am-st{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px 5px;border-radius:12px;background:color-mix(in srgb,var(--panel2) 70%,transparent);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);min-width:0}
.am-st i{font-style:normal;font-size:16px;line-height:1}.am-st i svg,.am-st i .ico{width:18px!important;height:18px!important}
.am-st b{font:400 17px/1.1 'Lilita One',sans-serif!important;color:var(--ink)!important;white-space:nowrap}
.am-st small{font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.asc.am-pop{animation:amPop 2.6s cubic-bezier(.2,1.4,.4,1) var(--amd,0ms) both;z-index:1}
.am-plus{position:absolute;right:-2px;top:-8px;padding:1px 7px;border-radius:9px;background:linear-gradient(180deg,#8ee05a,#3a9a22);color:#fff;font:400 13px 'Lilita One',sans-serif;font-style:normal;text-shadow:0 1px 0 #1d4a0e;box-shadow:0 2px 4px rgba(0,0,0,.35);animation:amPlus 2.6s ease-out var(--amd,0ms) both;pointer-events:none}
@keyframes amPop{0%{transform:scale(1)}10%{transform:scale(1.22);box-shadow:0 0 0 3px #ffd35a,0 0 18px rgba(255,200,60,.9)}28%{transform:scale(1)}75%{box-shadow:0 0 0 2px #ffd35a,0 0 10px rgba(255,200,60,.5)}100%{transform:scale(1)}}
@keyframes amPlus{0%{opacity:0;transform:translateY(8px) scale(.6)}12%{opacity:1;transform:translateY(-2px) scale(1.15)}25%{transform:translateY(0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
/* class colours */
.am-c-i{--uc:#c0392b;--un:'INFANTRY'}.am-c-r{--uc:#3f8f3a;--un:'RANGED'}.am-c-c{--uc:#d4881c;--un:'CAVALRY'}.am-c-m{--uc:#8a4fd0;--un:'MAGIC'}.am-c-a{--uc:#2a8fc9;--un:'AIR'}
.am-c-siege{--uc:#7a6248;--un:'SIEGE'}.am-c-scout{--uc:#2f7f78;--un:'SCOUT'}.am-c-heal{--uc:#d24f86;--un:'MEDIC'}
/* unit cards */
.card.ucard.am-u{position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--uc) 55%,#c9954a)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--uc) 15%,var(--panel)) 0,var(--panel) 150px)!important;box-shadow:inset 5px 0 0 var(--uc),inset 0 2px 0 rgba(255,255,255,.12),0 6px 14px rgba(0,0,0,.4)!important}
.card.ucard.am-u::before{content:var(--un);position:absolute;top:0;right:0;padding:3px 10px 3px 14px;border-radius:0 0 0 12px;background:var(--uc);color:#fff;font-size:10px;font-weight:900;letter-spacing:.12em;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.am-u .urow .ui{border-radius:50%;box-shadow:0 0 0 3px color-mix(in srgb,var(--uc) 85%,#fff),0 0 0 5px rgba(0,0,0,.25),0 6px 12px rgba(0,0,0,.4)}
.am-u .urow small{color:var(--muted)}
.am-u.am-legend{border-color:#ffc94a!important;box-shadow:inset 5px 0 0 #ffc94a,0 0 0 2px rgba(255,201,74,.5),0 0 22px rgba(255,190,60,.45),0 6px 14px rgba(0,0,0,.4)!important}
.am-u.am-legend::before{background:linear-gradient(90deg,#e0a21a,#ffd35a);color:#3a1e06}
.ucard.locked.am-u{background:linear-gradient(180deg,color-mix(in srgb,#777 12%,var(--panel)),var(--panel) 150px)!important}
.ucard.locked.am-u::before{background:#6b5a44}
.ucard.locked.am-u .urow .ui{box-shadow:0 0 0 3px #8a7a66,0 6px 12px rgba(0,0,0,.3)}
.am-bars{display:grid;gap:5px;margin:8px 0 8px;padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--panel2) 55%,transparent);border:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.am-bar{display:grid;grid-template-columns:86px minmax(0,1fr) 66px;align-items:center;gap:8px}
.am-bl{font-size:12px;font-weight:800;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:4px}
.am-bl svg,.am-bl .ico{width:15px!important;height:15px!important}
.am-bt{height:9px;border-radius:6px;background:rgba(0,0,0,.2);box-shadow:inset 0 1px 2px rgba(0,0,0,.35);overflow:hidden}
.am-bt i{display:block;height:100%;border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.am-b-a i{background:linear-gradient(180deg,#ff8a5a,#c8341e)}.am-b-d i{background:linear-gradient(180deg,#8ec5ff,#2f6fc0)}.am-b-h i{background:linear-gradient(180deg,#ff8aa0,#d0304e)}.am-b-s i{background:linear-gradient(180deg,#9af0e0,#20a090)}.am-b-c i{background:linear-gradient(180deg,#ffe08a,#c98a14)}
.am-bar>b{text-align:right;font:400 14.5px 'Lilita One',sans-serif;color:var(--ink);white-space:nowrap}
/* training */
body[data-tab="army"] .tqp small b{color:var(--ink)!important}
.am-u .gear{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 8px;align-items:center;justify-items:start}
.tq.am-now .ui{border-radius:50%;animation:amGlow 1.6s ease-in-out infinite alternate}
.tq.am-now .tqbar i{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.32) 0 6px,transparent 6px 12px),linear-gradient(180deg,#9aef6a,#3aa82a);background-size:17px 17px,auto;animation:amStripe .9s linear infinite}
.tq.am-now .tqc{background:linear-gradient(180deg,#5cc0ff,#2a86d0);box-shadow:0 0 8px rgba(80,180,255,.6)}
@keyframes amGlow{from{box-shadow:0 0 0 2px rgba(255,211,90,.6),0 0 4px rgba(255,200,60,.3)}to{box-shadow:0 0 0 3px #ffd35a,0 0 14px rgba(255,200,60,.8)}}
@keyframes amStripe{to{background-position:17px 0,0 0}}
/* marching armies */
.am-march{position:relative;box-shadow:inset 5px 0 0 var(--mc,#c0392b),0 6px 14px rgba(0,0,0,.35)!important}
.am-mk-attack{--mc:#d0432a}.am-mk-back{--mc:#d9a23a}.am-mk-scout{--mc:#2f7f78}.am-mk-reinf{--mc:#3a6fc0}.am-mk-settle{--mc:#8a6a3a}
.am-mbar{position:relative;height:12px;margin:8px 0 6px;border-radius:7px;background:rgba(0,0,0,.22);box-shadow:inset 0 1px 3px rgba(0,0,0,.4);overflow:hidden}
.am-mbar i{position:absolute;inset:0;border-radius:7px;transform-origin:0 50%;transform:scaleX(var(--amp,0));background:repeating-linear-gradient(-45deg,rgba(255,255,255,.22) 0 6px,transparent 6px 12px),linear-gradient(90deg,color-mix(in srgb,var(--mc) 70%,#000),var(--mc) 70%,color-mix(in srgb,var(--mc) 60%,#fff));animation-name:amMarch;animation-timing-function:linear;animation-fill-mode:forwards}
@keyframes amMarch{from{transform:scaleX(var(--amp,0))}to{transform:scaleX(1)}}
.card.am-inc{position:relative;border-color:#e0452e!important}
.card.am-inc::after{content:'';position:absolute;inset:-2px;border-radius:inherit;box-shadow:0 0 0 2px rgba(230,60,30,.9),0 0 18px rgba(230,60,30,.65);animation:amPulse 1.1s ease-in-out infinite alternate;pointer-events:none}
@keyframes amPulse{from{opacity:.3}to{opacity:1}}
@keyframes amSheen{0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}}
/* ----- mail ----- */
.am-seal{display:block;object-fit:contain}
.seg.am-seg{gap:8px;padding:12px 0 6px;margin:0 0 6px;scrollbar-width:none}
.seg.am-seg button{background:rgba(255,236,200,.1)!important;color:#f3dfb2!important;border:1px solid rgba(255,215,150,.38)!important;font-weight:800}
.seg.am-seg button.on{background:linear-gradient(180deg,#f0b84a,#b06e1a)!important;color:#2b1606!important;border-color:#ffe2a0!important;box-shadow:0 2px 0 #5a3410,0 0 10px rgba(255,180,60,.4)}
.mi.am-mi{position:relative;display:flex;gap:12px;align-items:center;width:100%;padding:11px 12px 11px 10px!important;margin:0 0 10px!important;border-radius:6px 14px 14px 6px!important;background:radial-gradient(ellipse at 85% 0%,rgba(255,255,255,.6),transparent 55%),linear-gradient(180deg,#fbf1d6,#ecd7a6)!important;border:1px solid #c9a66b!important;border-left:5px solid var(--kc)!important;box-shadow:0 3px 0 #7a5428,0 7px 14px rgba(0,0,0,.4)!important;color:#2b1b0c!important;text-align:start;transition:transform .12s}
.mi.am-mi:active{transform:translateY(2px) scale(.99)}
.mi.am-mi.am-k-battle,.am-letter.am-k-battle{--kc:#b3261e}.mi.am-mi.am-k-loss,.am-letter.am-k-loss{--kc:#4a2a2a}.mi.am-mi.am-k-scout,.am-letter.am-k-scout{--kc:#2e7d4f}.mi.am-mi.am-k-trade,.am-letter.am-k-trade{--kc:#b06a0a}.mi.am-mi.am-k-msg,.am-letter.am-k-msg{--kc:#2f4fa8}.mi.am-mi.am-k-sys,.am-letter.am-k-sys{--kc:#6a3aa0}
.am-mi>.am-seal{width:50px;height:50px;flex:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.am-mi .grow{min-width:0;display:flex;flex-direction:column;gap:1px}
.am-kn{font-size:10.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--kc)}
.mi.am-mi .grow b{font:400 16.5px/1.2 'Lilita One',sans-serif!important;color:#2b1b0c!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-pv{font-size:12.5px;line-height:1.3;color:#6a4e2c;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.am-loot{display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:3px;font-size:12.5px;font-weight:900;color:#5a3a08}
.am-loot>span{white-space:nowrap}.am-loot svg,.am-loot .ico{width:15px!important;height:15px!important;vertical-align:-3px}
.am-ago{align-self:flex-start;color:#8a6a40!important;font-size:11.5px;font-weight:700;white-space:nowrap}
.mi.am-mi:not(.unread){background:linear-gradient(180deg,#efe3c4,#dccaa0)!important;box-shadow:0 2px 0 #7a5428,0 4px 8px rgba(0,0,0,.3)!important}
.mi.am-mi:not(.unread)>.am-seal{filter:saturate(.5) brightness(.95) drop-shadow(0 1px 1px rgba(0,0,0,.35));opacity:.85}
.mi.am-mi.unread{box-shadow:0 0 0 2px #ffd35a,0 0 16px rgba(255,200,60,.55),0 3px 0 #7a5428,0 7px 14px rgba(0,0,0,.4)!important}
.mi.am-mi.unread::after{content:'NEW';position:absolute;top:-7px;right:10px;width:auto;height:auto;padding:2px 7px;border-radius:8px;background:linear-gradient(180deg,#e0452e,#a8261a);color:#fff;font-size:10px;font-weight:900;letter-spacing:.08em;box-shadow:0 2px 4px rgba(0,0,0,.35)}
.mi.am-mi.unread>.am-seal{animation:amBob 2.4s ease-in-out infinite}
@keyframes amBob{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg) scale(1.05)}}
.mi.am-mi.am-dm>span:first-child{flex:none;border-radius:50%;box-shadow:0 0 0 3px #2f4fa8,0 3px 6px rgba(0,0,0,.35)}
.mi.am-mi.am-dm small{color:#6a4e2c!important}
.am-empty{display:flex;flex-direction:column;align-items:center;gap:6px;margin:26px 16px;padding:22px 16px;border-radius:18px;border:2px dashed rgba(255,215,150,.35);text-align:center;color:#f3dfb2}
.am-empty .am-seal{width:76px;height:76px;opacity:.9;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.am-empty b{font:400 19px 'Lilita One',sans-serif;color:#ffe2a0}.am-empty small{color:#e2cfa6;font-size:13.5px}
/* an opened letter */
.am-letter{position:relative;padding-top:34px;animation:amUnfold .42s cubic-bezier(.2,1.2,.4,1) var(--amt,0ms) both;transform-origin:50% 0}
.am-letter>.am-lseal{position:absolute;left:50%;top:-6px;width:64px;height:64px;margin-left:-32px;filter:drop-shadow(0 4px 5px rgba(0,0,0,.45));animation:amStamp .5s cubic-bezier(.3,1.6,.5,1) var(--amt,0ms) both;z-index:1}
.am-letter>.am-kn{display:block;text-align:center;margin:28px 0 4px}
#sheetBody .am-letter>h2:first-of-type{display:block;text-align:center;margin:0 0 6px!important;padding:0 36px!important;background:none;border:0;box-shadow:none;clip-path:none;font-size:23px!important;color:#fff3cf!important}
.am-letter>small.muted:first-of-type{display:block;text-align:center}
.am-letter .repv{border-radius:14px;font-size:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 3px 0 rgba(0,0,0,.25)}
.am-letter .repv.win{background:radial-gradient(ellipse at 50% 0%,#fff6c8,transparent 70%),linear-gradient(180deg,#ffe28a,#e3a52a)!important;color:#3d2204!important;border:2px solid #b8860b}
.am-letter .repv.lose{background:linear-gradient(180deg,#5a3c3c,#2c1a1a)!important;color:#ffd9cf!important;border:2px solid #7a2a22}
.am-letter .lootbox{animation:amLoot .6s cubic-bezier(.2,1.5,.4,1) calc(var(--amt,0ms) + 250ms) both}
@keyframes amUnfold{from{opacity:0;transform:scaleY(.94) translateY(-6px)}to{opacity:1;transform:none}}
@keyframes amStamp{0%{opacity:0;transform:scale(1.9) rotate(-25deg)}60%{opacity:1;transform:scale(.92) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
@keyframes amLoot{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@media (max-width:370px){.am-bar{grid-template-columns:76px minmax(0,1fr) 60px;gap:6px}.am-hero{height:140px}#view .am-ht h1{font-size:28px!important}.am-hp b{font-size:26px}.mi.am-mi{gap:10px}.am-mi>.am-seal{width:44px;height:44px}}
@media (prefers-reduced-motion:reduce){.am-hero::before,.asc.am-pop,.am-plus,.tq.am-now .ui,.tq.am-now .tqbar i,.card.am-inc::after,.mi.am-mi.unread>.am-seal,.am-letter,.am-letter>.am-lseal,.am-letter .lootbox{animation:none!important}.am-hero::before{display:none}.am-mbar i{animation:none!important}.am-plus{opacity:1}}


/* the paper-doll rail (src/app/ui/hero, 39-006): helm, armor and boots left of the hero, weapon
   and banner right of it; each slot shows the item worn in its rarity frame, its rarity gems,
   its upgrade and its set, or the slot's shape when empty. The hero wears the set it shows. */
.hs-rail{position:absolute;z-index:4;display:flex;flex-direction:column;gap:5px;top:auto}
.hs-rail.l{left:8px;top:112px}
.hs-rail.r{left:auto;right:8px;top:314px;flex-direction:row;gap:4px}
.hs-rs{display:flex;flex-direction:column;align-items:center;width:62px}
.hs-rail .hs-slot{width:56px;height:56px;border-radius:15px;border:2px dashed rgba(240,214,150,.45);
 background:radial-gradient(circle at 50% 40%,rgba(255,240,200,.14),rgba(16,11,6,.82) 72%);box-shadow:inset 0 0 12px rgba(0,0,0,.6),0 3px 8px rgba(0,0,0,.4)}
.hs-rail .hs-slot.full{border:2px solid var(--rc);
 background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--sc,var(--rc)) 42%,transparent),rgba(16,11,6,.88) 74%);
 box-shadow:inset 0 0 0 1px rgba(0,0,0,.45),inset 0 0 14px rgba(0,0,0,.55),0 0 9px color-mix(in srgb,var(--rc) 70%,transparent),0 3px 8px rgba(0,0,0,.45)}
.hs-rail .hs-slot.r3,.hs-rail .hs-slot.r4,.hs-rail .hs-slot.r5{box-shadow:inset 0 0 0 1px rgba(0,0,0,.45),inset 0 0 14px rgba(0,0,0,.5),0 0 16px var(--rc),0 3px 8px rgba(0,0,0,.45)}
.hs-rail .hs-slot.r5::before{content:'';position:absolute;inset:-2px;border-radius:15px;background:conic-gradient(from 0deg,transparent,rgba(255,150,170,.95),transparent 30%);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px;animation:hsSpin 2.6s linear infinite}
.hs-rail .hs-slot.spare{border-color:#7ed957}
.hs-rail .hs-slot.on{outline:3px solid #fff3c0;outline-offset:2px}
.hs-rail .hs-iart{width:48px;height:48px}
.hs-shape{width:30px;height:30px;fill:rgba(255,236,190,.34);filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.hs-rg{position:absolute;top:3px;left:0;right:0;display:flex;justify-content:center;gap:2px;pointer-events:none}
.hs-rg b{width:5px;height:5px;border-radius:50%;background:var(--rc);box-shadow:0 0 0 1px rgba(0,0,0,.55),0 0 4px var(--rc)}
.hs-rail .hs-up{bottom:-7px;font-size:11.5px;box-shadow:0 1px 0 #7a4a10,0 0 0 1.5px rgba(0,0,0,.35)}
.hs-sl{display:block;max-width:64px;margin-top:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;
 font:900 9.5px/1.1 Nunito,sans-serif;letter-spacing:.02em;color:var(--sc,#f3e6c4);text-shadow:0 1px 2px #000,0 0 3px #000}
.hs-setp{position:absolute;left:50%;bottom:86px;translate:-50% 0;z-index:4;display:flex;align-items:baseline;gap:5px;padding:4px 10px;border-radius:12px;white-space:nowrap;
 background:rgba(16,11,6,.7);border:1.5px solid var(--sc);box-shadow:0 0 12px color-mix(in srgb,var(--sc) 45%,transparent),0 3px 8px rgba(0,0,0,.4);pointer-events:none}
.hs-setp b{font:400 13.5px/1 'Lilita One',sans-serif;color:var(--sc)}
.hs-setp small{font:900 11px/1 Nunito,sans-serif;color:#f3e6c4}
.hs-wgear{display:block;margin:2px 0 6px;font:700 11.5px/1.3 Nunito,sans-serif;color:#cdb98e}
@media (max-width:370px){.hs-rail .hs-slot{width:50px;height:50px}.hs-rail .hs-iart{width:42px;height:42px}.hs-rs{width:54px}.hs-sl{max-width:56px;font-size:9px}
 .hs-rail.l{left:5px}.hs-rail.r{right:5px;gap:2px}.hs-setp{padding:3px 7px;gap:3px}.hs-setp b{font-size:12px}.hs-setp small{font-size:10px}}
@media (max-height:760px){.hs-rail .hs-slot{width:48px;height:48px}.hs-rail .hs-iart{width:40px;height:40px}.hs-rs{width:52px}.hs-sl{margin-top:7px}.hs-rail.l{gap:3px}}
@media (prefers-reduced-motion:reduce){.hs-rail .hs-slot.r5::before{animation:none}}


/* every hero their own (39-010): the name in the hero's colour with their emblem, Mastery, the roster */
.hs-name.hid span{color:var(--hc)!important;-webkit-text-stroke:1px rgba(30,15,0,.8);text-shadow:0 2px 0 rgba(30,15,0,.7),0 0 6px rgba(0,0,0,.6),0 0 16px color-mix(in srgb,var(--hc) 50%,transparent)}
.hs-emb{font-style:normal;font-size:20px;width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;
 background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--hc) 55%,#2a1c0a),#1d150c 75%);border:2px solid var(--hc);box-shadow:0 0 10px color-mix(in srgb,var(--hc) 60%,transparent);-webkit-text-stroke:0}
.hs-ability.hid{border-color:color-mix(in srgb,var(--hc) 70%,#7a5a22)}
.hs-ability.hid .hs-ai{border-color:var(--hc)}
.hs-mast{margin-top:9px;padding-top:9px;border-top:1px dashed color-mix(in srgb,var(--hc) 45%,#5a4320)}
.hs-mh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hs-ability .hs-mh b{font-size:15px;color:var(--hc)}
.hs-mpips{display:flex;gap:4px}
.hs-mpips i{width:15px;height:15px;transform:rotate(45deg) scale(.78);border-radius:3px;background:#3a2c18;border:1.5px solid #6a5226}
.hs-mpips i.on{background:var(--hc);border-color:#fff3c8;box-shadow:0 0 7px var(--hc)}
.hs-ability .hs-mnow{margin-top:4px;color:#fff3c8!important}
.hs-mnext{display:flex;align-items:center;gap:8px;margin-top:7px;padding:7px 8px;border-radius:11px;background:rgba(0,0,0,.28)}
.hs-ability .hs-mnext b{font-size:14px;color:#ffe08a}
.hs-ability .hs-mnext small{font-size:12px}
.hs-mbuy{flex:none;display:flex;flex-direction:column;align-items:center;line-height:1.1;padding:6px 10px!important}
.hs-mbuy.short .hs-cost{color:#9a2a10}
.hs-mlock{flex:none;display:flex;flex-direction:column;align-items:center;font:400 15px/1.1 'Lilita One',sans-serif;color:#cdb98e;padding:5px 10px;border-radius:9px;background:rgba(255,255,255,.07);border:1px dashed #6a5226}
.hs-ability .hs-mlock small{font:800 10px Nunito,sans-serif;color:#a8936a!important;text-transform:uppercase;letter-spacing:.04em}
.hs-ability .hs-max{display:block;margin-top:6px;color:var(--hc)}
.hs-rl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.hs-rh{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 3px 7px;border-radius:12px;overflow:hidden;min-width:0;
 background:linear-gradient(180deg,color-mix(in srgb,var(--hc) 26%,#2c2114),#1d150c 70%);border:1.5px solid color-mix(in srgb,var(--hc) 55%,#4a3818);color:#f6ead0}
.hs-rh.mine{border-color:var(--hc);box-shadow:0 0 0 1.5px var(--hc),0 0 12px color-mix(in srgb,var(--hc) 55%,transparent)}
.hs-rfig{position:relative;width:100%;height:86px;margin-bottom:4px;background:radial-gradient(ellipse at 50% 70%,color-mix(in srgb,var(--hc) 40%,transparent),transparent 70%)}
.hs-rfig img,.hs-rfig svg{width:100%;height:100%;object-fit:cover;object-position:50% 4%;display:block}
.hs-rh:not(.mine) .hs-rfig img{filter:saturate(.85)}
.hs-remb{position:absolute;left:3px;bottom:-2px;font-style:normal;font-size:13px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#1d150c;border:1.5px solid var(--hc)}
.hs-rh b{font:400 12.5px/1.1 'Lilita One',sans-serif;color:var(--hc);overflow-wrap:anywhere}
.hs-rh small{display:block;font:700 10.5px/1.2 Nunito,sans-serif}
.hs-rh .hs-rt{color:#cdb98e}
.hs-rh .hs-rsk{margin-top:2px;color:#f3e6c4}
.hs-rme{position:absolute;top:4px;right:4px;font:900 9px/1 Nunito,sans-serif;font-style:normal;text-transform:uppercase;letter-spacing:.04em;padding:3px 5px;border-radius:6px;background:var(--hc);color:#1d150c}
.hid-q{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px auto 8px;max-width:300px;padding:7px 12px;border-radius:14px;background:#fffaf0;color:#2b1b0c;
 font:900 14px/1.3 Nunito,sans-serif;border:2px solid var(--hc);text-align:left}
.hid-q span{font-size:20px}
@media (max-width:370px){.hs-rfig{height:74px}.hs-rh b{font-size:11.5px}.hs-rh small{font-size:10px}.hs-mbuy{padding:5px 8px!important}}


/* 39-009: the clan hall and the More hub */
#view .cm9-ic{width:26px;height:26px;object-fit:contain;flex:none;vertical-align:middle;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
#view h2.cm9-h{display:flex;align-items:center;gap:8px}
#view h2.cm9-h .cm9-ic{width:30px;height:30px;margin:-4px 0}
/* ---- More: profile banner ---- */
body.tab-more #view .cm9-prof{position:relative;overflow:hidden;padding:14px 14px!important;background:radial-gradient(ellipse at 18% 50%,rgba(255,200,90,.32),transparent 55%),linear-gradient(135deg,#7a1c12,#3e0c08 70%)!important;border:2px solid #f0c25a!important;box-shadow:inset 0 0 0 2px rgba(60,10,4,.6),inset 0 1px 0 rgba(255,240,190,.35),0 6px 14px rgba(0,0,0,.45)!important}
body.tab-more #view .cm9-prof .pav{width:64px;height:64px;border-radius:50%;box-shadow:0 0 0 3px #f0c25a,0 0 0 5px #4a1208,0 4px 10px rgba(0,0,0,.6);overflow:hidden;flex:none}
body.tab-more #view .cm9-prof .grow>b{font:400 20px 'Lilita One',sans-serif;letter-spacing:.3px}
body.tab-more #view .cm9-prof .rankb{margin-inline-start:6px}
/* ---- More: the hub tiles ---- */
.cm9-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 14px}
.cm9-tile{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:10px 8px 10px;border-radius:16px;min-width:0;
 --t1:#7a1c12;--t2:#3e0c08;background:radial-gradient(circle at 50% 30%,rgba(255,225,150,.30),transparent 52%),linear-gradient(180deg,var(--t1),var(--t2));
 border:2px solid #e2b04a;box-shadow:inset 0 0 0 1px rgba(255,235,180,.28),inset 0 -10px 18px rgba(0,0,0,.28),0 5px 0 rgba(0,0,0,.35),0 8px 14px rgba(0,0,0,.3);color:#fbe9c6;transition:transform .12s;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cm9-tile:last-child:nth-child(odd){grid-column:span 2}
.cm9-tile.t-gold{--t1:#9a5a12;--t2:#4f2606}.cm9-tile.t-red{--t1:#8e1d16;--t2:#420a06}.cm9-tile.t-blue{--t1:#1f4f86;--t2:#0e2443}
.cm9-tile.t-green{--t1:#2f6a2a;--t2:#13320f}.cm9-tile.t-teal{--t1:#1d6a6a;--t2:#0a3133}.cm9-tile.t-violet{--t1:#5d2c86;--t2:#2a1044}
.cm9-tile .cm9-tart{display:grid;place-items:center;width:72px;height:66px}
.cm9-tile .cm9-tic{width:66px;height:66px;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(0,0,0,.55));transition:transform .15s}
.cm9-tile b{font:400 17px/1.1 'Lilita One',sans-serif;color:#ffe9b0;letter-spacing:.3px;text-shadow:0 2px 0 rgba(0,0,0,.55)}
.cm9-tile small{display:block;font-size:12px;line-height:1.25;color:#f3dfbc;opacity:.92;min-height:2.5em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
body.tab-more #view .cm9-tile .btn{margin-top:6px;min-width:84px;position:static}
.cm9-tile:active{transform:scale(.97)}
.cm9-tile:active .cm9-tic{transform:scale(1.08) rotate(-4deg)}
.cm9-badge{position:absolute;top:8px;inset-inline-end:8px;z-index:1;font:400 12px 'Lilita One',sans-serif;letter-spacing:.5px;color:#fff;padding:2px 8px;border-radius:999px;background:linear-gradient(180deg,#ff6a3a,#c3200e);border:1.5px solid #ffd27a;box-shadow:0 2px 6px rgba(0,0,0,.45);animation:cm9-pulse 1.6s ease-in-out infinite}
.cm9-tile.hot{border-color:#ffe08a;box-shadow:inset 0 0 0 1px rgba(255,235,180,.4),0 0 0 2px rgba(255,200,80,.35),0 0 18px rgba(255,190,70,.55),0 5px 0 rgba(0,0,0,.35)}
.cm9-tile.hot::before{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,250,220,.38),transparent);transform:translateX(0) skewX(-12deg);animation:cm9-shine 3.2s ease-in-out infinite;pointer-events:none}
.cm9-tile.hot .cm9-tic{animation:cm9-bob 2.4s ease-in-out infinite}
@keyframes cm9-shine{0%,55%{transform:translateX(0) skewX(-12deg)}100%{transform:translateX(420%) skewX(-12deg)}}
@keyframes cm9-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes cm9-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(6deg)}}
/* tribe card, settings list, quick buttons */
body.tab-more #view .cm9-tribe{background:radial-gradient(ellipse at 10% 50%,rgba(255,200,90,.22),transparent 50%),linear-gradient(180deg,#4a2a14,#2a160a)!important}
body.tab-more #view .cm9-list{padding:2px 12px!important}
body.tab-more #view .cm9-list .row .ui{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:radial-gradient(circle at 50% 35%,rgba(255,220,150,.28),rgba(0,0,0,.25));box-shadow:inset 0 0 0 1px rgba(255,215,140,.3)}
body.tab-more #view .cm9-list .row .ui .cm9-ic{width:32px;height:32px}
body.tab-more #view .cm9-quick .btns{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
body.tab-more #view .cm9-quick .btns .btn{width:100%;min-height:42px;margin:0}
/* achievements progress, leaderboard podium */
.cm9-prog{height:12px;border-radius:999px;margin:2px 2px 10px;background:rgba(0,0,0,.45);box-shadow:inset 0 1px 3px rgba(0,0,0,.6),0 0 0 1.5px #b5832e;overflow:hidden}
.cm9-prog i{display:block;height:100%;min-width:6px;border-radius:999px;background:linear-gradient(180deg,#ffe795,#e0a53a 60%,#a8691a);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
body.tab-more #view .ach>div.got{background:linear-gradient(180deg,#f7d77a,#c98c22)!important;color:#3a1f06!important;border-color:#fff1b8!important;box-shadow:0 0 12px rgba(255,200,80,.45)}
body.tab-more #view .ach>div.got b,body.tab-more #view .ach>div.got small{color:#3a1f06!important}
body.tab-more #view .ach>div:not(.got){filter:saturate(.75);opacity:.9}
body.tab-more #view .card>.lbr:nth-child(1){background:linear-gradient(90deg,rgba(255,206,84,.30),transparent 75%)}
body.tab-more #view .card>.lbr:nth-child(2){background:linear-gradient(90deg,rgba(220,228,240,.22),transparent 75%)}
body.tab-more #view .card>.lbr:nth-child(3){background:linear-gradient(90deg,rgba(214,140,74,.24),transparent 75%)}
body.tab-more #view .card>.lbr.me{background:linear-gradient(90deg,rgba(120,220,120,.25),transparent 80%);box-shadow:inset 3px 0 0 #8fe07a}
/* ---- Clan: the hall ---- */
.cm9-hall{position:relative;overflow:hidden;margin:4px 0 10px;padding:14px 12px 12px;border-radius:18px;text-align:center;color:#fff3d6;
 background:linear-gradient(180deg,rgba(20,8,2,.15) 0%,rgba(20,8,2,.55) 55%,rgba(16,6,2,.92) 100%),var(--hall) center 35%/cover no-repeat,#3a2210;
 border:2px solid #e2b04a;box-shadow:inset 0 0 0 2px rgba(40,16,4,.7),inset 0 0 40px rgba(0,0,0,.55),0 8px 18px rgba(0,0,0,.5)}
.cm9-crest{position:relative;width:92px;height:100px;margin:0 auto 2px;display:grid;place-items:center}
.cm9-crest::before{content:'';position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(255,200,90,.55),transparent 62%);animation:cm9-glow 3.6s ease-in-out infinite}
.cm9-shield{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.6))}
.cm9-emb{position:relative;font-size:42px;line-height:1;margin-top:-6px;display:grid;place-items:center;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.cm9-emb .ico,.cm9-emb svg{width:46px!important;height:46px!important}
.cm9-emb .cm9-horn{width:58px;height:58px;object-fit:contain}
@keyframes cm9-glow{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
body.tab-clan #view .cm9-hall .clanhead{background:none!important;border:0!important;padding:0 4px!important;display:flex;justify-content:center;text-align:center;position:relative}
body.tab-clan #view .cm9-hall .clanhead .grow{text-align:center}
body.tab-clan #view .cm9-hall .clanhead [data-action="g.openClanEdit"]{position:absolute;top:-104px;inset-inline-end:0}
body.tab-clan #view .cm9-hall h1{margin:2px 0 0!important;font-size:26px!important;line-height:1.1}
body.tab-clan #view .cm9-hall small,body.tab-clan #view .cm9-hall p{color:#f6e4c0!important;text-shadow:0 1px 2px #000}
.cm9-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.cm9-stats span{display:flex;flex-direction:column;align-items:center;padding:6px 4px;border-radius:12px;background:linear-gradient(180deg,rgba(70,40,14,.85),rgba(30,16,6,.9));border:1.5px solid #b5832e;box-shadow:inset 0 1px 0 rgba(255,230,170,.25)}
.cm9-stats b{font:400 20px/1 'Lilita One',sans-serif;color:#ffe08a;text-shadow:0 2px 0 #000}
.cm9-stats small{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:#e9d3a8!important;margin-top:2px}
/* the clan's actions */
body.tab-clan #view .cm9-acts{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px;margin:0 auto 12px!important}
body.tab-clan #view .cm9-acts .cm9-act{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;min-height:86px;margin:0;padding:8px 4px 8px!important;border-radius:14px!important;white-space:normal;line-height:1.15;font:400 13px 'Lilita One',sans-serif!important;letter-spacing:.2px;color:#fff3d6!important;
 background:radial-gradient(circle at 50% 30%,rgba(255,220,140,.28),transparent 60%),linear-gradient(180deg,#6b4220,#3a220e)!important;border:2px solid #c9892a!important;box-shadow:inset 0 1px 0 rgba(255,230,170,.3),0 4px 0 rgba(0,0,0,.4)!important;text-shadow:0 1px 2px #000}
body.tab-clan #view .cm9-acts .cm9-act[data-action="g.openDonate"]{background:radial-gradient(circle at 50% 30%,rgba(255,236,160,.45),transparent 60%),linear-gradient(180deg,#b07818,#6a4208)!important;border-color:#ffd77a!important}
body.tab-clan #view .cm9-acts .cm9-act[data-action="g.requestReinf"]{background:radial-gradient(circle at 50% 30%,rgba(160,200,255,.35),transparent 60%),linear-gradient(180deg,#2c5482,#14283f)!important;border-color:#9fc0ea!important}
body.tab-clan #view .cm9-acts .cm9-act:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.4)!important}
.cm9-aic{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.55))}
body.tab-clan #view .cm9-lvl .bar.wide{height:14px;border-radius:999px;box-shadow:0 0 0 1.5px #b5832e,inset 0 1px 3px rgba(0,0,0,.6)}
body.tab-clan #view .cm9-lvl .bar.wide i{background:linear-gradient(180deg,#ffe795,#e0a53a 60%,#a8691a)!important;border-radius:999px}
/* chat bubbles */
body.tab-clan #view .chat .msg{position:relative;max-width:82%;border-radius:14px 14px 14px 4px;background:linear-gradient(180deg,#fbf0d8,#eedcb4)!important;color:#3a250f!important;border:1px solid #c9a46a!important;box-shadow:0 2px 0 rgba(0,0,0,.35);padding:7px 11px}
body.tab-clan #view .chat .msg small{color:#7a5428!important}
body.tab-clan #view .chat .msg>small:first-child{font-weight:700;color:#8a3a12!important}
body.tab-clan #view .chat .msg.me{border-radius:14px 14px 4px 14px;background:linear-gradient(180deg,#ffe08a,#e9b445)!important;border-color:#a8742a!important}
body.tab-clan #view .chat .msg.sys{align-self:center;max-width:92%;text-align:center;border-radius:999px;background:rgba(255,215,140,.14)!important;color:#ffe2a6!important;border:1px solid rgba(255,215,140,.35)!important;box-shadow:none;font-size:12.5px}
body.tab-clan #view .chat .msg:last-child{animation:cm9-in .35s ease-out}
@keyframes cm9-in{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
body.tab-clan #view .chatin input{border-radius:999px!important;border:2px solid #8a6230!important;background:#fbf0d8!important;color:#2b1b0c!important}
body.tab-clan #view .chatin .btn{border-radius:999px!important}
/* members */
body.tab-clan #view .cm9-mem .row{display:grid!important;grid-template-columns:auto 1fr;column-gap:10px;row-gap:4px;align-items:center}
body.tab-clan #view .cm9-mem .row .ui{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 35%,#6b4a26,#2a180a);box-shadow:0 0 0 2px #8a6230,0 3px 6px rgba(0,0,0,.5)}
body.tab-clan #view .cm9-mem .row.cm9-lead .ui{box-shadow:0 0 0 2.5px #ffd77a,0 0 10px rgba(255,200,80,.6)}
body.tab-clan #view .cm9-mem .row.cm9-off .ui{box-shadow:0 0 0 2.5px #9fc0ea,0 3px 6px rgba(0,0,0,.5)}
body.tab-clan #view .cm9-mem .row.cm9-me{background:linear-gradient(90deg,rgba(143,224,122,.16),transparent 80%);border-radius:12px}
body.tab-clan #view .cm9-mem .row.cm9-lead .grow>b::after{content:'Leader';margin-inline-start:6px;font:400 11px 'Lilita One',sans-serif;letter-spacing:.4px;padding:1px 7px;border-radius:999px;background:linear-gradient(180deg,#ffe08a,#c98c22);color:#3a1f06;vertical-align:2px}
body.tab-clan #view .cm9-mem .row.cm9-off .grow>b::after{content:'Officer';margin-inline-start:6px;font:400 11px 'Lilita One',sans-serif;letter-spacing:.4px;padding:1px 7px;border-radius:999px;background:linear-gradient(180deg,#cfe2fa,#6d94c4);color:#0e2443;vertical-align:2px}
.cm9-mb{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.cm9-mb .btn{margin:0}
/* ---- Clan: no clan yet ---- */
.cm9-pitch{padding-bottom:14px}
body.tab-clan #view .cm9-pitch h1{margin:0!important;font-size:28px!important}
body.tab-clan #view .cm9-pitch p{margin:6px 4px 10px!important;font-size:14px;line-height:1.4}
.cm9-perks{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cm9-perks span{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:12px;font:400 14px 'Lilita One',sans-serif;letter-spacing:.2px;color:#ffe9b0;text-align:start;background:linear-gradient(180deg,rgba(70,40,14,.88),rgba(30,16,6,.92));border:1.5px solid #b5832e}
.cm9-perks .cm9-ic{width:30px;height:30px}
body.tab-clan #view .cm9-cc{position:relative;overflow:hidden}
body.tab-clan #view .cm9-cc .cm9-cui{width:58px;height:62px;flex:none;display:grid;place-items:center;font-size:28px;background:url(/a/i_shield.17ffbabb.webp) center/contain no-repeat;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
body.tab-clan #view .cm9-cc .cm9-cui .ico,body.tab-clan #view .cm9-cc .cm9-cui svg{width:30px!important;height:30px!important}
body.tab-clan #view .cm9-cc .btn:not([disabled]){background:linear-gradient(180deg,#7fd36a,#3d8a2a)!important;color:#fff!important;border:2px solid #d8f5b0!important;font:400 15px 'Lilita One',sans-serif!important;padding:6px 14px!important;box-shadow:0 3px 0 #1f4a14!important;text-shadow:0 1px 1px rgba(0,0,0,.5)}
body.tab-clan #view .cm9-best{border-color:#ffd77a!important;box-shadow:inset 0 0 0 1px rgba(255,230,160,.35),0 0 16px rgba(255,200,80,.4),0 4px 0 rgba(0,0,0,.45)!important}
.cm9-rec{position:absolute;top:0;inset-inline-end:0;font:400 11px 'Lilita One',sans-serif;letter-spacing:.6px;text-transform:uppercase;padding:3px 10px 3px 12px;color:#3a1f06;background:linear-gradient(180deg,#ffe795,#e0a53a);border-bottom-left-radius:12px;box-shadow:0 2px 4px rgba(0,0,0,.4)}
body.tab-clan #view .cm9-found{border-style:dashed!important}
body[data-tribe] #view .cm9-hall h1{position:relative;padding-bottom:6px}
body[data-tribe] #view .cm9-hall h1::after{left:50%;transform:translateX(-50%);width:120px;background:linear-gradient(90deg,transparent,#ffd23a,transparent)}
body.tab-more #view .card.stats span{color:#fbe9c6!important}
.cm9-tile b{font-weight:400!important}
@media (max-width:370px){.cm9-tile .cm9-tic{width:58px;height:58px}.cm9-tile b{font-size:16px}.cm9-stats b{font-size:18px}.cm9-perks span{font-size:13px}}
@media (prefers-reduced-motion:reduce){.cm9-tile,.cm9-tile .cm9-tic,.cm9-badge,.cm9-tile.hot::before,.cm9-tile.hot .cm9-tic,.cm9-crest::before,body.tab-clan #view .chat .msg:last-child{animation:none!important;transition:none!important}.cm9-tile.hot::before{display:none}}


/* 39-005 construction art: the painted scaffold never catches taps (the building's own hit box does) */
.vmap .cs{pointer-events:none}
@media (prefers-reduced-motion:reduce){.vmap .cs-dust{display:none}}


/* ===== 39-014 type & colour polish =====
   One display face (Lilita One: titles, names, numbers, buttons) and one UI face (Nunito: everything you read).
   Type scale + title treatments as variables; vivid colour-coded resource pills; gain/spend number effects. */
:root{
 --ff-display:'Lilita One','Arial Rounded MT Bold','Trebuchet MS',system-ui,sans-serif;
 --ff-ui:Nunito,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
 --fs-2xs:10.5px;--fs-xs:11.5px;--fs-sm:13px;--fs-md:14.5px;--fs-lg:17px;--fs-xl:21px;--fs-2xl:25px;--fs-3xl:30px;
 --ink-hi:#fff8e6;--ink-gold:#ffe08a;--ink-soft:#f0e0bd;--ink-dim:#dcc79c;
 --stroke-dark:#2a1404;
 --ts-title:0 3px 0 var(--stroke-dark),1px 1px 0 var(--stroke-dark),-1px -1px 0 var(--stroke-dark),1px -1px 0 var(--stroke-dark),-1px 1px 0 var(--stroke-dark),0 5px 10px rgba(0,0,0,.35);
 --ts-num:0 2px 0 #1a0e04,1px 1px 0 #1a0e04,-1px -1px 0 #1a0e04,1px -1px 0 #1a0e04,-1px 1px 0 #1a0e04;
 --ts-soft:0 1px 2px rgba(0,0,0,.75);
 /* resource colours: base (pill), hi (rim / meter), tint (+/h text on the pill) */
 --rc-wood:#c2611a;--rh-wood:#ffa24a;--rt-wood:#ffd9b0;
 --rc-stone:#56718f;--rh-stone:#b5cbe3;--rt-stone:#e1ecf8;
 --rc-food:#4f9a2c;--rh-food:#a6ec6a;--rt-food:#dcffbe;
 --rc-gold:#c88a06;--rh-gold:#ffd84a;--rt-gold:#fff0b0;
 --rc-dia:#7140d6;--rh-dia:#c7a6ff;--rt-dia:#ece0ff;
}
/* ---------- type: headings & titles share the display face ---------- */
:is(h1,h2,h3):not(#_ll):not(#_ll2),.vsel:not(#_ll),.era .nm,.hero .ttl,.tribe b,.tcb b,.hcb b,.ptitle,.repv,.sethd,.decree .dtop,.clanhead b,.fdprev b,#herald .hrb b{font-family:var(--ff-display)!important;font-weight:400!important;font-style:normal;letter-spacing:.3px}
h1.tpick:not(#_ll){font:400 var(--fs-3xl)/1.1 var(--ff-display)!important;letter-spacing:.4px;color:var(--ink-gold)!important;text-shadow:var(--ts-title),0 0 22px rgba(255,190,60,.35)!important}
.decree h2:not(#_ll){font:400 var(--fs-3xl)/1.1 var(--ff-display)!important}
/* reading text that used a book face now uses the UI face */
.flav,.lstory,.oath,.decree .motto,#herald .hrb span,.decree p:not(#_ll),.vsel small{font-family:var(--ff-ui)!important;font-weight:700!important}
.flav,.lstory,.oath,.decree .motto{font-style:italic}
.decree p:not(#_ll){font-size:var(--fs-lg)!important;line-height:1.45!important}
/* small letter-spaced labels: crisp UI caps instead of a tiny serif */
.am-ht span,.lbl-layer span{font-family:var(--ff-ui)!important;font-weight:900!important;letter-spacing:.12em}
.vmap text,.vs text{font-family:var(--ff-display)!important;font-weight:400!important;letter-spacing:.4px}
/* sheet & page titles: one clear treatment */
#sheetBody h2:not(#_ll),#view h1:not(#_ll){text-shadow:var(--ts-title)!important}
#sheetBody h3:not(#_ll){font-size:var(--fs-lg);letter-spacing:.3px}
/* settings section titles were tiny caps */
.sethd:not(#_ll){font-size:var(--fs-lg)!important;letter-spacing:.4px;text-transform:none!important;font-variant:normal!important}

/* ---------- small text that was too small / too faint ---------- */
.toast:not(#_ll){font:700 var(--fs-sm)/1.35 var(--ff-ui)!important;padding:8px 12px!important}
.toast b{display:block;font-size:var(--fs-md);line-height:1.2;text-shadow:var(--ts-soft)}
nav.tabs button:not(#_ll){color:#f6e4bf!important;text-shadow:0 1px 0 #2a1404,0 0 4px rgba(0,0,0,.55)}
nav.tabs button.on:not(#_ll){color:#fff!important}
nav.tabs button:not(.on) span,nav.tabs button:not(.on) img,nav.tabs button:not(.on) .ni{filter:grayscale(.25) brightness(.95)!important;opacity:.9!important}
/* the shop sits on a dark painted panel: its muted/light-theme text must turn light */
#sheet.shop82 #sheetBody .muted:not(#_ll),#sheet.shop82 #sheetBody .muted b{color:var(--ink-dim)!important}
#sheet.shop82 #sheetBody .grow > b{color:var(--ink-hi)!important;text-shadow:var(--ts-soft)}
#sheet.shop82 #sheetBody .grow > small{color:var(--ink-soft)!important;font-weight:700}
#sheet.shop82 #sheetBody .ofr small{font-size:var(--fs-xs)!important;font-weight:700}

/* ---------- onboarding: clearer hierarchy & readable cards ---------- */
.tftitle h2:not(#_ll){font-size:var(--fs-2xl)!important;line-height:1.08!important;color:#fff3cf!important;text-shadow:var(--ts-title)!important}
.tftitle small:not(#_ll){display:block;margin-top:3px;font-size:var(--fs-md);line-height:1.3;font-weight:800;color:var(--ink-soft)}
.ob .rhead h2:not(#_ll){font-size:var(--fs-xl)!important;line-height:1.1!important;text-shadow:var(--ts-title)!important}
.ob .rhead small:not(#_ll){display:block;line-height:1.3;font-weight:800}
.tc2 .tcname:not(#_ll){font-size:19px;line-height:1.05;letter-spacing:.3px;text-shadow:var(--ts-num),0 0 10px rgba(0,0,0,.7)}
.tc12id:not(#_ll){font-size:var(--fs-sm);line-height:1.3;font-weight:800;color:var(--ink-soft)}
.ob12s.top:not(#_ll){padding:1px 5px 1px 2px!important;background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 55%,#ffd35a 20%),color-mix(in srgb,var(--tc) 45%,#1b120a))!important;border:1px solid #ffd35a!important;border-bottom-width:1px!important;box-shadow:0 0 6px rgba(255,211,90,.5),inset 0 1px 0 rgba(255,255,255,.25)!important;position:static!important;z-index:auto!important}
.ob12s small:not(#_ll){font-size:10.5px;font-weight:900;color:#fff4d6;text-shadow:0 1px 1px rgba(0,0,0,.6)}
.ob12tag:not(#_ll){font-size:16px;line-height:1.35;font-weight:900}
.ob .chk input,.ob input[type=checkbox]{accent-color:#e0a93c}
.ob .field input:not(#_ll){font-weight:800}
.ob12next:not(#_ll){font-size:var(--fs-sm);color:var(--ink-soft)}
.ob12steps b:not(#_ll){font:400 var(--fs-lg)/1.2 var(--ff-display);letter-spacing:.3px;color:#fff3dc}
.hp12chip small:not(#_ll){font-size:var(--fs-xs);letter-spacing:.08em}
.hp12chip b:not(#_ll){font-size:var(--fs-md)}
.hp12b b:not(#_ll){font:400 14px/1.15 var(--ff-display);letter-spacing:.2px;color:#fff3dc}
.hp12b.on b:not(#_ll){color:var(--ink-gold)}
.hp12plate b:not(#_ll){font-size:27px;text-shadow:var(--ts-title)}
/* a disabled call-to-action still reads as a clear instruction */
.ob .btn.brass:disabled:not(#_ll){opacity:1!important;background:linear-gradient(180deg,#5a4630,#3a2a18)!important;color:#e9d6ac!important;border:2px solid rgba(231,186,96,.45)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 0 rgba(0,0,0,.4)!important;text-shadow:0 1px 0 #000;filter:none!important;animation:none!important}
/* ---------- resource pills: rich, colour-coded, crisp ---------- */
#r_wood{--rc:var(--rc-wood);--rh:var(--rh-wood);--rt:var(--rt-wood)}
#r_stone{--rc:var(--rc-stone);--rh:var(--rh-stone);--rt:var(--rt-stone)}
#r_food{--rc:var(--rc-food);--rh:var(--rh-food);--rt:var(--rt-food)}
#r_gold{--rc:var(--rc-gold);--rh:var(--rh-gold);--rt:var(--rt-gold)}
#r_dia{--rc:var(--rc-dia);--rh:var(--rh-dia);--rt:var(--rt-dia)}
.top .rs[id]:not(#_ll){background:radial-gradient(120% 90% at 18% 0%,color-mix(in srgb,var(--rh) 42%,transparent),transparent 60%),linear-gradient(180deg,color-mix(in srgb,var(--rc) 88%,#fff 12%) 0%,var(--rc) 45%,color-mix(in srgb,var(--rc) 55%,#120800) 100%)!important;border:2px solid var(--rh)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.28),0 2px 0 rgba(0,0,0,.45),0 3px 8px rgba(0,0,0,.3)!important;padding-bottom:5px!important}
.top .rs[id]::after{background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 42%)!important}
/* storage meter: a bright bar along the bottom edge instead of a fill behind the number */
.top .rs[id] i:not(#_ll){top:auto!important;bottom:0!important;height:3px!important;opacity:1!important;border-radius:0 2px 2px 0!important;background:linear-gradient(90deg,color-mix(in srgb,var(--rh) 70%,#fff),var(--rh))!important;box-shadow:0 0 6px var(--rh);z-index:2!important}
.top .rs[id] .ri{filter:drop-shadow(0 1px 1px rgba(0,0,0,.6)) drop-shadow(0 0 3px rgba(255,255,255,.25))}
.top .rs[id] b:not(#_ll){color:#fff!important;font-family:var(--ff-display)!important;font-weight:400!important;font-size:15px!important;letter-spacing:0;text-shadow:var(--ts-num)!important}
.top .rs[id] small:not(#_ll){color:var(--rt)!important;opacity:1!important;font:900 10.5px/1.05 var(--ff-ui)!important;letter-spacing:-.1px;text-shadow:0 1px 0 rgba(0,0,0,.7),0 0 3px rgba(0,0,0,.55)!important}
.top .rs[id] small.neg:not(#_ll){color:#ffb4a8!important}
.top .rs.full[id]:not(#_ll){border-color:#ff6a4a!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 2px rgba(255,80,50,.45),0 0 10px rgba(255,80,50,.55)!important}
.top .rs.full[id] i:not(#_ll){background:linear-gradient(90deg,#ff9a7a,#ff4a2a)!important;box-shadow:0 0 6px #ff4a2a}
/* gains: a pop in the resource's own colour; spends: a quick dip with a red flash */
.top .rs.bump[id]:not(#_ll){animation:llrPop .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes llrPop{0%{transform:scale(1)}35%{transform:scale(1.13);filter:brightness(1.35) drop-shadow(0 0 8px var(--rh))}100%{transform:scale(1)}}
.top .rs b.rolling:not(#_ll){color:#eaffd8!important;text-shadow:var(--ts-num),0 0 8px var(--rh)!important}
/* floating numbers over the pills */
.floatnum:not(#_ll){font:400 17px var(--ff-display);letter-spacing:.3px;color:#8dff6a;text-shadow:var(--ts-num),0 0 8px rgba(120,255,90,.6)}
.floatnum[data-r]:not(#_ll){color:var(--rt);text-shadow:var(--ts-num),0 0 10px var(--rh)}
.floatnum.llneg:not(#_ll){color:#ff9c8a;text-shadow:var(--ts-num),0 0 8px rgba(255,70,40,.6);animation:llfDown .9s ease-out forwards}
@keyframes llfDown{0%{opacity:0;transform:translate(-50%,-6px) scale(.8)}20%{opacity:1;transform:translate(-50%,0) scale(1.1)}100%{opacity:0;transform:translate(-50%,16px) scale(.95)}}
.floatnum[data-r=wood]{--rh:var(--rh-wood);--rt:var(--rt-wood)}.floatnum[data-r=stone]{--rh:var(--rh-stone);--rt:var(--rt-stone)}.floatnum[data-r=food]{--rh:var(--rh-food);--rt:var(--rt-food)}.floatnum[data-r=gold]{--rh:var(--rh-gold);--rt:var(--rt-gold)}.floatnum[data-r=dia]{--rh:var(--rh-dia);--rt:var(--rt-dia)}
@media (max-width:400px){.top .rs[id]:not(#_ll){padding-left:3px!important;padding-right:3px!important;column-gap:2px!important}.top .rs[id] .ri .ico{width:15px!important;height:15px!important}}
@media (max-width:380px){.top .rs[id] b:not(#_ll){font-size:13.5px!important;letter-spacing:-.3px}.top .rs[id] small:not(#_ll){font-size:9.5px!important}}
@media (min-width:700px){.top .rs[id] b:not(#_ll){font-size:17px!important}.top .rs[id] small:not(#_ll){font-size:11.5px!important}}
@media (prefers-reduced-motion:reduce){.top .rs[id],.top .rs.bump[id],.floatnum{animation:none!important}.floatnum{display:none!important}}


/* 39-020: an attack on your town frames the SCREEN in a soft red glow; nothing is laid over the town or the map */
.vmap.alarm{box-shadow:none!important;animation:none!important}
.vmap .alarmban{display:none!important}
#atk20edge{position:fixed;inset:0;z-index:49;pointer-events:none;display:none;opacity:.3;will-change:opacity;
 box-shadow:inset 0 0 0 2px rgba(255,74,48,.65),inset 0 0 22px 5px rgba(214,30,14,.55)}
html.atk20 #atk20edge{display:block;animation:atk20edge 2.6s ease-in-out infinite}
html.atk20.atk20calm #atk20edge{animation:none;opacity:.32;box-shadow:inset 0 0 0 1.5px rgba(255,74,48,.55),inset 0 0 10px 1px rgba(214,30,14,.4)}
@keyframes atk20edge{0%,100%{opacity:.38}50%{opacity:1}}
/* the pill: one short line in the overlay dock above the tab bar (src/app/fx/dock.ts); tap = dismiss, View = incoming list */
#atk20{position:fixed;left:0;right:0;margin:0 auto;width:max-content;max-width:calc(100vw - 24px);box-sizing:border-box;z-index:58;display:none;align-items:center;gap:7px;
 bottom:var(--dk-alert,calc(var(--sab,0px) + 80px));height:34px;padding:0 5px 0 10px;border-radius:17px;cursor:pointer;-webkit-tap-highlight-color:transparent;
 background:linear-gradient(180deg,rgba(140,26,16,.95),rgba(96,14,8,.95));border:1.5px solid rgba(255,168,140,.8);color:#fff;
 font:700 13px/1 Nunito,system-ui,sans-serif;white-space:nowrap;box-shadow:0 3px 10px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.18);text-shadow:0 1px 1px rgba(0,0,0,.4)}
#atk20.on{display:flex;animation:atk20in .32s cubic-bezier(.2,1.3,.4,1)}
body:has(#sheet.on) #atk20,body:has(.ob) #atk20{display:none!important}
#atk20 .atk20i{font-size:15px;line-height:1;flex:none}
#atk20 .atk20t{min-width:0;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
#atk20 .atk20t b{font-weight:800;max-width:38vw;overflow:hidden;text-overflow:ellipsis}
#atk20 .atk20t i{font-style:normal;font-size:11px;opacity:.85}
#atk20 .atk20d{opacity:.6}
#atk20 em{font-style:normal;font-weight:800;color:#ffd9a8;font-variant-numeric:tabular-nums}
#atk20 .atk20v{flex:none;height:24px;padding:0 10px;border-radius:12px;border:0;background:#fff3e2;color:#8a1a0e;font:800 12px/24px Nunito,system-ui,sans-serif;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.3)}
#atk20 .atk20x{flex:none;width:22px;height:22px;display:grid;place-items:center;font-size:12px;opacity:.8;border-radius:50%;background:rgba(0,0,0,.18)}
#atk20:focus-visible{outline:2px solid #ffd24a;outline-offset:2px}
@keyframes atk20in{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html.atk20 #atk20edge{animation:none;opacity:.55}#atk20.on{animation:none}}


/* ===== 39-019: the painted crystal, dressing the hero, the second skill tier, Hero Shards for crystals ===== */
/* the crystal: a painted gem wherever crystals are shown */
.ico .cry19,.ico .shd19e{width:100%;height:100%;display:block;object-fit:contain;pointer-events:none}
.ico.ie:has(.cry19){width:1.3em;height:1.3em;vertical-align:-.3em}
.ico.ie:has(.shd19e){width:1.25em;height:1.25em;vertical-align:-.28em}
/* the top bar's crystal button: a gem that pulses gently, a glint running over it, stars twinkling */
.top .cr{position:relative;overflow:visible;isolation:isolate;padding-left:8px!important;
 background:linear-gradient(180deg,#3fc0f0 0%,#2a7fd0 48%,#5a3fc0 100%)!important;border-color:#d8f6ff!important}
.top .cr>.ico{position:relative;width:27px!important;height:27px!important;margin:-6px 1px -6px -4px;vertical-align:-8px;
 filter:drop-shadow(0 0 4px rgba(150,235,255,.9)) drop-shadow(0 1px 1px rgba(0,30,60,.6));animation:cry19Pulse 2.8s ease-in-out infinite}
.top .cr>.ico::after{content:'';position:absolute;inset:0;pointer-events:none;
 -webkit-mask:url(/a/cry_64.40ca988e.webp) center/contain no-repeat;mask:url(/a/cry_64.40ca988e.webp) center/contain no-repeat;
 background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%) 0 0/300% 100% no-repeat;animation:cry19Glint 3.6s ease-in-out .8s infinite}
.top .cr>.ico::before,.top .cr::after{content:'';position:absolute;width:9px;height:9px;pointer-events:none;z-index:2;opacity:0;
 background:radial-gradient(circle,#fff 0 18%,transparent 22%),conic-gradient(from 45deg,transparent 0 10%,#fff 12.5%,transparent 15% 35%,#fff 37.5%,transparent 40% 60%,#fff 62.5%,transparent 65% 85%,#fff 87.5%,transparent 90%);
 -webkit-mask:radial-gradient(circle,#000 0 30%,transparent 70%);mask:radial-gradient(circle,#000 0 30%,transparent 70%)}
.top .cr::before{content:'+';position:absolute;right:-3px;bottom:-2px;z-index:3;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;
 font:900 15px/1 Nunito,sans-serif;color:#fff;text-shadow:0 1px 0 #1d5a12;background:linear-gradient(180deg,#7fe06a,#2f9a2a);border:1.5px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.45)}
.top .cr>.ico::before{top:-3px;right:-2px;animation:cry19Twinkle 2.4s ease-in-out 1.1s infinite}
.top .cr::after{bottom:-3px;left:5px;width:7px;height:7px;animation:cry19Twinkle 3.1s ease-in-out 2.2s infinite}
@keyframes cry19Pulse{0%,100%{scale:1}50%{scale:1.09}}
@keyframes cry19Glint{0%{background-position:120% 0}35%,100%{background-position:-25% 0}}
@keyframes cry19Twinkle{0%,70%,100%{opacity:0;scale:.3;rotate:0deg}82%{opacity:1;scale:1.25;rotate:45deg}}
/* the shop: the big crystal and the packs sparkle too */
.bigc .ico,.pack>.ico{position:relative;filter:drop-shadow(0 0 6px rgba(140,225,255,.75))}
.bigc .ico{width:52px!important;height:52px!important;animation:cry19Pulse 3s ease-in-out infinite}
.bigc .ico::after,.pack>.ico::after{content:'';position:absolute;inset:0;pointer-events:none;
 -webkit-mask:url(/a/cry_128.80c50df7.webp) center/contain no-repeat;mask:url(/a/cry_128.80c50df7.webp) center/contain no-repeat;
 background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.9) 50%,transparent 62%) 0 0/300% 100% no-repeat;animation:cry19Glint 3.8s ease-in-out infinite}
.pack:nth-child(2)>.ico::after{animation-delay:.9s}.pack:nth-child(3)>.ico::after{animation-delay:1.8s}.pack:nth-child(4)>.ico::after{animation-delay:2.7s}
/* Hero Shards in the crystal shop */
.shd19{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:4px}
.shd19p{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 4px 8px;border-radius:14px;cursor:pointer;color:#efe6ff;
 border:2px solid #9a7ae6;background:radial-gradient(circle at 50% 30%,#4a2f7a,#1d1230 75%);box-shadow:0 4px 10px rgba(40,10,80,.35),inset 0 0 16px rgba(170,120,255,.35)}
.shd19p.hot{border-color:#e6c4ff;box-shadow:0 0 0 2px rgba(220,180,255,.4),0 4px 12px rgba(80,30,140,.5),inset 0 0 18px rgba(200,150,255,.45)}
.shd19p b{font:400 20px/1 'Lilita One',sans-serif;color:#fff;text-shadow:0 2px 0 #2a1450}
.shd19p small{font:800 10.5px Nunito,sans-serif!important;color:#cdb8ff!important;text-transform:uppercase;letter-spacing:.06em}
.shd19i{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(190,130,255,.7))}.shd19i.s1{width:58px;height:58px}.shd19i.s2{width:64px;height:64px}
.shd19p .oc{margin-top:3px;padding:3px 10px;border-radius:10px;background:linear-gradient(180deg,#8fe0ff,#2a9ee8);color:#fff;font:400 14px 'Lilita One',sans-serif;text-shadow:0 1px 0 #0b3a6a;white-space:nowrap}
.shd19p .ptag{background:linear-gradient(180deg,#c06cff,#7a2ed0)}
.shd19n{display:block;margin:4px 0 6px;font-size:12.5px;color:#f0e2c0!important;text-shadow:0 1px 1px rgba(0,0,0,.5)}
/* ---------- dressing the hero ---------- */
.hs-dress{position:absolute;left:8%;right:8%;top:96px;bottom:66px;z-index:3;pointer-events:none;display:grid;place-items:center}
.hs-drays{position:absolute;left:50%;top:55%;width:150%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
 background:radial-gradient(circle,rgba(255,250,225,.95) 0 8%,transparent 30%),repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--sc,#ffe08a) 55%,#fff) 0 8deg,transparent 8deg 20deg);mix-blend-mode:screen;
 -webkit-mask:radial-gradient(circle,#000 0 12%,rgba(0,0,0,.6) 30%,transparent 62%);mask:radial-gradient(circle,#000 0 12%,rgba(0,0,0,.6) 30%,transparent 62%);
 opacity:0;animation:hsdRays 1.5s ease-out forwards}
@keyframes hsdRays{0%{opacity:0;scale:.3;rotate:0deg}15%{opacity:1}55%{opacity:.7}100%{opacity:0;scale:1.2;rotate:50deg}}
.hs-dress>i{position:absolute;left:50%;top:58%;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,#fff 0 30%,var(--sc,#ffe08a) 60%,transparent 70%);opacity:0;
 animation:hsdSpark 1.1s cubic-bezier(.2,.8,.3,1) forwards}
.hs-dress>i:nth-of-type(1){--x:-120px;--y:-150px}.hs-dress>i:nth-of-type(2){--x:110px;--y:-170px;animation-delay:.05s}.hs-dress>i:nth-of-type(3){--x:-150px;--y:-40px;animation-delay:.1s}
.hs-dress>i:nth-of-type(4){--x:150px;--y:-60px;animation-delay:.02s}.hs-dress>i:nth-of-type(5){--x:-90px;--y:90px;animation-delay:.12s}.hs-dress>i:nth-of-type(6){--x:100px;--y:80px;animation-delay:.07s}
.hs-dress>i:nth-of-type(7){--x:-30px;--y:-210px;animation-delay:.15s}.hs-dress>i:nth-of-type(8){--x:40px;--y:-200px;animation-delay:.09s}.hs-dress>i:nth-of-type(9){--x:-170px;--y:30px;animation-delay:.18s}
.hs-dress>i:nth-of-type(10){--x:170px;--y:10px;animation-delay:.14s}
@keyframes hsdSpark{0%{opacity:1;translate:-50% -50%;scale:.6}100%{opacity:0;translate:calc(-50% + var(--x)) calc(-50% + var(--y));scale:1.3}}
.hs-dname{position:absolute;left:50%;bottom:76px;translate:-50% 0;z-index:2;padding:6px 14px 5px;border-radius:12px;white-space:nowrap;font:400 19px/1 'Lilita One',sans-serif;letter-spacing:.02em;
 color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.6);background:linear-gradient(180deg,rgba(30,20,8,.92),rgba(12,8,4,.92));border:2px solid var(--sc,#e7b84a);
 box-shadow:0 0 18px color-mix(in srgb,var(--sc,#e7b84a) 70%,transparent),0 4px 10px rgba(0,0,0,.5);opacity:0;animation:hsdName 2.2s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes hsdName{0%{opacity:0;scale:.4}14%{opacity:1;scale:1.08}22%{scale:1}80%{opacity:1;scale:1}100%{opacity:0;scale:.96}}
/* the set badge opens the wardrobe's Appearance */
button.hs-setp{pointer-events:auto;cursor:pointer;font:inherit;color:inherit;align-items:center}
.hs-setc{font-style:normal;font-size:10px;color:#f3e6c4;opacity:.8;margin-left:1px}
/* the item card of a set armour: the look it puts on */
.hs-clook{display:flex;align-items:center;gap:9px;margin:8px 0 2px;padding:5px 9px 5px 5px;border-radius:12px;background:linear-gradient(90deg,#2a1d0e,#3b2a14);border:1.5px solid var(--sc,#c99a3e)}
.hs-clook img{flex:none;width:42px;height:62px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.hs-clook small{font:800 12.5px/1.3 Nunito,sans-serif;color:#f6ead0}
/* the Appearance row of the wardrobe */
.hs-looks.hs-dlooks .hs-look.fit{grid-column:span 1;min-height:140px;border-color:color-mix(in srgb,var(--sc,#c99a3e) 70%,transparent)}
.hs-looks.hs-dlooks .hs-lfig{height:104px}
.hs-dtag{position:absolute;top:4px;left:4px;font:800 9.5px/1 Nunito,sans-serif;font-style:normal;color:#fff;background:rgba(0,0,0,.55);border-radius:7px;padding:3px 5px;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-looks.hs-dlooks .hs-look.on{border-color:#fff3c0}
/* ---------- Get shards, the shard packs ---------- */
.ar-getsh{display:inline-flex;align-items:center;gap:5px;color:#fff!important;border:1.5px solid #d6b8ff!important;
 background:linear-gradient(180deg,#9a5cf0,#5a2aa8)!important;box-shadow:0 2px 0 #34166a,0 0 10px rgba(170,110,255,.45)!important;animation:arGet 2.4s ease-in-out infinite}
.ar-getsh small{font:800 10.5px Nunito,sans-serif;color:#e8dcff!important;opacity:.9}
@keyframes arGet{0%,100%{box-shadow:0 2px 0 #34166a,0 0 6px rgba(170,110,255,.35)}50%{box-shadow:0 2px 0 #34166a,0 0 16px rgba(190,130,255,.8)}}
.hs-ca .ar-getsh,.hs-mast .ar-getsh{margin-top:6px}
.ar-gocol{display:flex;flex-direction:column;align-items:stretch;gap:6px}.ar-gocol .ar-getsh{justify-content:center}
button.ar-shards{position:relative;cursor:pointer;font:inherit}
button.ar-shards.on{border-color:#e6d4ff;box-shadow:0 0 0 3px rgba(220,200,255,.7),0 0 14px rgba(170,120,255,.6)}
.ar-plus{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:900 16px/1 Nunito,sans-serif;font-style:normal;color:#fff;
 background:linear-gradient(180deg,#5fd36a,#2f9a3a);border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.4)}
.ar-anchor{display:block;height:0;scroll-margin-top:70px}
.ar-vault{border-color:#9a7ae6;background:radial-gradient(circle at 50% 0,rgba(120,70,200,.55),transparent 70%),linear-gradient(180deg,#24173a,#140c22)}
.ar-vault h3{color:#e6d4ff}
.ar-vnote{display:block;margin-top:8px;font:700 11.5px/1.35 Nunito,sans-serif;color:#cdbbe8}
.ar-ph{display:block;margin:12px 0 6px;font:900 12px Nunito,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#e6d4ff}
.ar-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.ar-pack{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:14px 4px 8px;border-radius:14px;cursor:pointer;color:#efe6ff;
 border:2px solid #8a6ad6;background:radial-gradient(circle at 50% 32%,#4f3182,#1a1029 78%);box-shadow:inset 0 0 16px rgba(160,110,255,.3),0 4px 10px rgba(0,0,0,.35);transition:transform .15s}
.ar-pack:active{transform:scale(.96)}
.ar-pack.hot{border-color:#e2c8ff;box-shadow:0 0 0 2px rgba(220,190,255,.35),inset 0 0 18px rgba(200,150,255,.45),0 4px 12px rgba(0,0,0,.4)}
.ar-ptag{position:absolute;top:-9px;left:50%;translate:-50% 0;padding:2px 8px;border-radius:999px;white-space:nowrap;font:900 9.5px/1.3 Nunito,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:linear-gradient(180deg,#c06cff,#7a2ed0);border:1px solid #f0dcff}
.ar-pimg{position:relative;width:64px;height:52px}
.ar-pimg img{position:absolute;left:50%;bottom:0;width:46px;height:46px;translate:-50% 0;object-fit:contain;filter:drop-shadow(0 0 6px rgba(190,130,255,.75)) drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.ar-pimg img.k1{translate:-90% 4px;width:36px;height:36px;rotate:-14deg}.ar-pimg img.k2{translate:-10% 6px;width:34px;height:34px;rotate:16deg}
.ar-pimg img.k0{z-index:1}
.ar-pack b{font:400 21px/1 'Lilita One',sans-serif;color:#fff;text-shadow:0 2px 0 #2a1450}
.ar-pack small{font:800 9.5px Nunito,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#cdb8ff}
.ar-save{position:absolute;top:8px;right:4px;font:900 10px/1 Nunito,sans-serif;font-style:normal;color:#fff;background:#d23a3a;border-radius:6px;padding:3px 4px;rotate:8deg}
.ar-pprice{margin-top:5px;padding:4px 10px 3px;border-radius:10px;white-space:nowrap;background:linear-gradient(180deg,#8fe0ff,#2a9ee8);color:#fff;font:400 14.5px/1 'Lilita One',sans-serif;
 text-shadow:0 1px 0 #0b3a6a;box-shadow:0 2px 0 #13568a,inset 0 1px 0 rgba(255,255,255,.5)}
.ar-pack.short .ar-pprice{filter:saturate(.6) brightness(.9)}
/* ---------- the second skill tier and the reset ---------- */
.hs-t2{margin-top:10px;padding:8px 10px 2px;border-radius:14px;background:linear-gradient(180deg,#fbefd0,#f0dca6);border:1.5px solid #c99a3e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.hs-t2h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;padding-bottom:4px;border-bottom:1px solid rgba(160,120,60,.35)}
.hs-t2h b{font:400 16px 'Lilita One',sans-serif;color:#6a3e0e}.hs-t2h small{font:800 11px Nunito,sans-serif;color:#8a6a3a}
.hs-sk2 .hs-ski{background:linear-gradient(180deg,#3b2a14,#1d150c);border-color:#e7b84a}
.hs-sk2.locked{opacity:.72}.hs-sk2.locked .hs-ski{filter:grayscale(.7)}
.hs-sk2 .hs-mlock{font-size:13px;color:#8a6a3a;background:rgba(0,0,0,.05);border-color:#b99a5e}
.hs-sk2 .hs-mlock small{font:800 9.5px Nunito,sans-serif;text-transform:uppercase;color:#8a6a3a}
.hs-pips2{display:flex;gap:2px;margin:3px 0 2px}
.hs-pips2 i{flex:1;max-width:16px;height:6px;border-radius:3px;background:rgba(90,60,20,.18)}
.hs-pips2 i.hi{height:7px}
.hs-pips2 i.on{background:linear-gradient(180deg,#ffd24a,#d48a10);box-shadow:0 0 4px rgba(255,190,60,.7)}
.hs-sk2b{display:flex;flex-direction:column;align-items:center;line-height:1;padding:5px 10px!important;min-width:48px}
.hs-sk2b small{font:800 9.5px Nunito,sans-serif;color:#fff!important;opacity:.9;margin-top:2px;display:block}
.hs-sk2b.short{opacity:.55}
.hs-respec{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:8px;border-top:1px dashed rgba(160,120,60,.45)}
.hs-respec small{flex:1 1 170px;font:700 12px/1.3 Nunito,sans-serif;color:#6e5332}
.hs-rbtns{display:flex;gap:6px}
@media (max-width:360px){.ar-packs,.shd19{gap:5px}.ar-pack b{font-size:18px}.ar-pprice{font-size:13px;padding:4px 7px 3px}.hs-dname{font-size:16px}}
@media (prefers-reduced-motion:reduce){.top .cr>.ico,.top .cr>.ico::after,.top .cr>.ico::before,.top .cr::after,.bigc .ico,.bigc .ico::after,.pack>.ico::after,
 .hs-drays,.hs-dress>i,.ar-getsh{animation:none}.hs-dname{animation:hsdNameR 2.2s steps(1) forwards}}
@keyframes hsdNameR{0%{opacity:1}100%{opacity:0}}


/* 39-016 special challenge card and tiered daily quests */
.spc16{position:relative;overflow:hidden;border-radius:18px;margin:4px 0 6px;padding:12px 12px 10px;color:#fff6e2;isolation:isolate;
 --c1:#5a1420;--c2:#1c0a14;--hl:#ff8a5a;background:linear-gradient(160deg,var(--c1),var(--c2));
 border:2px solid #e8c35a;box-shadow:0 0 0 1px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,230,160,.25),0 8px 22px rgba(40,10,0,.35)}
.spc16bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 70% at 85% -10%,color-mix(in srgb,var(--hl) 55%,transparent),transparent 60%),radial-gradient(80% 50% at 0% 100%,rgba(0,0,0,.5),transparent);background-size:cover;background-position:center 20%}
.spc16bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,4,8,.15) 0%,rgba(10,4,8,.55) 42%,rgba(10,4,8,.88) 100%)}
.spc16top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.spc16tag{font:400 12px 'Lilita One',sans-serif;letter-spacing:1px;text-transform:uppercase;color:#3a1f06;padding:4px 10px;border-radius:999px;
 background:linear-gradient(180deg,#fff0b0,#e8b23a);box-shadow:0 2px 0 #7a4a10,0 0 12px rgba(255,200,80,.5)}
.spc16time{font-size:12.5px;font-weight:800;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.5);border:1px solid rgba(255,230,160,.35);white-space:nowrap}
.spc16time b{color:#ffd76a;font-variant-numeric:tabular-nums}
.spc16hero{display:flex;gap:12px;align-items:center;margin:12px 0 6px}
.spc16em{flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:32px;
 background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.35),rgba(0,0,0,.35) 70%);border:2px solid #e8c35a;box-shadow:0 0 18px var(--hl),inset 0 0 10px rgba(0,0,0,.5)}
.spc16em .ico{width:34px;height:34px}
.spc16hero h3{margin:0;font:700 21px/1.1 Cinzel,Georgia,serif;color:#ffe9a8;text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 14px rgba(255,180,80,.35)}
.spc16hero p{margin:4px 0 0;font:italic 14px/1.3 Alegreya,Georgia,serif;color:#f3e2c4;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.spc16steps{display:flex;align-items:center;justify-content:center;margin:10px 4px}
.spc16n{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.55);border:2px solid rgba(255,230,160,.35);color:rgba(255,240,210,.6)}
.spc16n i{font:400 16px 'Lilita One',sans-serif;font-style:normal}
.spc16n.on{border-color:#ffd76a;color:#fff;box-shadow:0 0 0 3px rgba(255,215,106,.25),0 0 14px rgba(255,200,80,.6);animation:spc16Glow 1.8s ease-in-out infinite}
.spc16n.ok{background:linear-gradient(180deg,#8cf27a,#2f9a3a);border-color:#d8ffc8;color:#fff;animation:spc16Glow 1.2s ease-in-out infinite}
.spc16n.got{background:linear-gradient(180deg,#ffe58a,#c98a1a);border-color:#fff3c0;color:#3a1f06}
.spc16l{flex:1;max-width:70px;height:4px;margin:0 4px;border-radius:2px;background:linear-gradient(90deg,rgba(255,230,160,.5),rgba(255,230,160,.15))}
.spc16cur{display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;background:rgba(10,4,8,.6);border:1px solid rgba(255,230,160,.25)}
.spc16cur .qi{font-size:24px;width:30px;text-align:center;flex:none}
.spc16cur b{display:block;font-size:15px;color:#fff}
.spc16cur small{display:block;font-size:12.5px;color:#f0dcb8;margin-top:3px}
.spc16cur .bar.vivid{margin-top:6px}
.spc16cur.done{justify-content:center;text-align:center}
.spc16cur.done b{color:#ffe08a}
.spc16c{display:block;width:100%;margin-top:8px}
.spc16prize{display:flex;gap:8px;align-items:center;margin-top:8px;padding:7px 10px;border-radius:10px;background:linear-gradient(90deg,rgba(255,215,106,.22),rgba(255,215,106,.05));border:1px dashed rgba(255,215,106,.5)}
.spc16prize>span{font-size:20px;flex:none}
.spc16prize small{font-size:12.5px;line-height:1.35;color:#f8e8c8}
.spc16prize b{color:#ffd76a}
.th-bloodmoon{--c1:#6a1018;--c2:#16060a;--hl:#ff4a3a}
.th-muster{--c1:#2c3c52;--c2:#0c121c;--hl:#7ab8ff}
.th-fair{--c1:#5a2a7a;--c2:#1a0c26;--hl:#ffb84a}
.th-shadows{--c1:#2a1a48;--c2:#0a0614;--hl:#a07aff}
.th-works{--c1:#6a4a22;--c2:#1c1208;--hl:#ffc86a}
.th-tourney{--c1:#7a2a12;--c2:#1c0a04;--hl:#ffb04a}
.th-harvest{--c1:#4a6a1a;--c2:#121c06;--hl:#ffe06a}
.th-hunt{--c1:#1a4a32;--c2:#06140c;--hl:#7affb0}
/* tiered daily quests */
.pq16box .qh{flex-wrap:wrap}
.qrow.pq16{position:relative}
.pq16h{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pq16h b{font-size:15.5px}
.qrow .pq16tier{font:400 10.5px/1 'Lilita One',sans-serif;font-style:normal;letter-spacing:.8px;text-transform:uppercase;padding:3px 7px 2px;border-radius:999px;color:#3a1f06;
 background:linear-gradient(180deg,#f1c8a0,#b87333);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.qrow.pqt1 .pq16tier{background:linear-gradient(180deg,#ffffff,#a9b4c2);color:#25303c}
.qrow.pqt2 .pq16tier{background:linear-gradient(180deg,#fff2a8,#e0a522);color:#3a2204;box-shadow:0 1px 0 rgba(0,0,0,.35),0 0 8px rgba(255,200,60,.6)}
.qrow.pqt2{margin:2px -8px;padding:9px 8px;border-radius:12px;border-top-color:transparent;background:linear-gradient(100deg,rgba(255,214,90,.28),rgba(255,214,90,.06));box-shadow:inset 0 0 0 1px rgba(214,160,40,.45)}
.qrow.pq16 .pq16o{color:var(--ink,#3a2a1a);font-size:14px;margin-top:1px}
.qrow.pq16.ready{background:linear-gradient(100deg,rgba(120,220,90,.22),transparent)}
.qrow.pq16 .okc{flex:none}
@keyframes spc16Glow{0%,100%{box-shadow:0 0 0 3px rgba(255,215,106,.18),0 0 8px rgba(255,200,80,.35)}50%{box-shadow:0 0 0 4px rgba(255,215,106,.35),0 0 18px rgba(255,200,80,.75)}}
@media (max-width:370px){.spc16hero h3{font-size:18px}.spc16em{width:50px;height:50px;font-size:28px}.spc16hero p{font-size:13px}}
@media (prefers-reduced-motion:reduce){.spc16n.on,.spc16n.ok{animation:none}}


/* ===== 39-018: clan emblems ===== */
.cflag.cfe{overflow:visible}
.cfe-crest{display:inline-grid;place-items:center;line-height:0}
/* clan hall: the emblem is the crest (the plain painted shield behind it steps aside) */
.cm9-crest:has(.cfe){width:140px;height:auto;min-height:150px;margin-bottom:6px}
.cm9-crest:has(.cfe) .cm9-shield{display:none}
.cm9-crest:has(.cfe) .cm9-emb{margin-top:0;filter:drop-shadow(0 6px 8px rgba(0,0,0,.6))}
.cm9-emb .cflag.cfe{width:118px!important;height:auto!important}
.clanhead>.cfe-crest .cflag.cfe{width:72px;height:auto}
.msg small .cflag.cfe{margin:-3px 1px 0 0;filter:none}
/* the designer */
.cfd-h{margin:0 0 8px;text-align:center}
.cfd-stage{display:flex;align-items:center;gap:14px;padding:14px 12px;border-radius:16px;border:2px solid #b8862f;
 background:radial-gradient(ellipse at 30% 40%,rgba(255,206,120,.30),transparent 60%),radial-gradient(ellipse at 50% 120%,rgba(0,0,0,.5),transparent 60%),linear-gradient(160deg,#4a1a14,#2a0f0b 60%,#1c0a07);
 box-shadow:inset 0 0 0 1px rgba(255,220,150,.25),inset 0 -20px 40px rgba(0,0,0,.35),0 6px 14px rgba(0,0,0,.25);color:#fbe9c4}
.cfd-big{flex:0 0 auto;width:132px;display:grid;place-items:center;position:relative}
.cfd-big::before{content:'';position:absolute;inset:-6px -10px;border-radius:50%;background:radial-gradient(circle,rgba(255,214,130,.38),transparent 65%);pointer-events:none}
.cfd-big .cflag{position:relative;filter:drop-shadow(0 8px 10px rgba(0,0,0,.55));animation:cfdIn .35s ease-out}
@keyframes cfdIn{from{transform:scale(.94);opacity:.6}to{transform:none;opacity:1}}
.cfd-side{min-width:0;flex:1}
.cfd-side b{display:block;font-family:Cinzel,Georgia,serif;font-size:18px;color:#ffe2a0;text-shadow:0 2px 0 #1a0e04;overflow-wrap:anywhere}
.cfd-side small{display:block;font-size:12px;line-height:1.35;color:#e6cfa3;margin:4px 0 10px}
.cfd-dice{display:flex;flex-wrap:wrap;gap:6px}
.cfd-pre{display:flex;gap:8px;overflow-x:auto;padding:10px 2px 6px;margin:0 -2px;scrollbar-width:none}
.cfd-pre::-webkit-scrollbar{display:none}
.cfd-p{flex:0 0 auto;width:64px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 5px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel2);color:var(--ink)}
.cfd-p small{font-size:10px;line-height:1.1;text-align:center;font-weight:700}
.cfd-p:active,.cfd-o:active{transform:scale(.95)}
.cfd-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;border-radius:14px;background:var(--panel2);border:1px solid var(--line);margin:4px 0 10px}
.cfd-tabs button{border:0;border-radius:10px;padding:9px 2px;font:800 13px Nunito,sans-serif;background:transparent;color:var(--muted)}
.cfd-tabs button.on{background:linear-gradient(180deg,#f6cf6a,#c8902c);color:#2b1606;box-shadow:0 2px 0 #7a4e12,inset 0 1px 0 rgba(255,255,255,.5)}
.cfd-panel{min-height:150px}
.cfd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.cfd-g4{grid-template-columns:repeat(4,1fr)}
.cfd-o{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px 4px;border-radius:12px;border:2px solid var(--line);background:var(--panel);color:var(--ink);min-width:0}
.cfd-o small{font-size:10px;font-weight:700;line-height:1.1;max-width:100%;text-align:center;overflow-wrap:anywhere;min-height:2.2em;display:flex;align-items:center}
.cfd-o.on{border-color:#e0a83a;background:linear-gradient(180deg,rgba(246,207,106,.35),rgba(246,207,106,.08));box-shadow:0 0 0 2px rgba(224,168,58,.35)}
.cfd-o .cflag,.cfd-p .cflag{filter:none}
.cfd-l{display:block;margin:12px 0 6px;font:800 13px Nunito,sans-serif;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.cfd-sw{display:grid;grid-template-columns:repeat(9,1fr);gap:6px}
.cfd-c{aspect-ratio:1;width:100%;max-width:34px;justify-self:center;border-radius:50%;border:2.5px solid #fff4dc;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.45),transparent 45%),var(--c);box-shadow:0 0 0 1.5px #2b1b0c,0 2px 3px rgba(0,0,0,.3);padding:0}
.cfd-c.on{box-shadow:0 0 0 2px #2b1b0c,0 0 0 4.5px #f2c23a,0 0 10px #f2c23a;transform:scale(1.08)}
.cfd-mo{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:var(--panel);color:var(--ink);text-align:start}
.cfd-mo b{display:block;font-size:14px}.cfd-mo small{display:block;color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.cfd-tg{flex:0 0 auto;width:42px;height:24px;border-radius:12px;background:var(--line);position:relative;transition:background .2s}
.cfd-tg::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.4);transition:transform .2s}
.cfd-mo.on .cfd-tg{background:#c8902c}.cfd-mo.on .cfd-tg::after{transform:translateX(18px)}
@media (max-width:370px){.cfd-big{width:112px}.cfd-big .cflag{width:112px;height:auto}.cfd-stage{gap:10px;padding:12px 10px}.cfd-grid{grid-template-columns:repeat(auto-fill,minmax(58px,1fr))}.cfd-sw{gap:4px}}
@media (prefers-reduced-motion:reduce){.cfd-big .cflag{animation:none}.cfd-tg,.cfd-tg::after{transition:none}}


/* nothing may make the page wider than the phone: the paint of a filter or a sprite near the edge used to add 3–16px of sideways scroll */
html,body{overflow-x:clip}


/* 39-017 profile cosmetics: painted frames, banners, titles, medal showcase */
.pc17-av{position:relative;display:inline-block;width:var(--s);height:var(--s);line-height:0;flex:none;vertical-align:middle}
.pc17-av>svg{position:relative;z-index:1}
.pc17-ring{position:absolute;left:50%;top:50%;width:calc(var(--s)*1.74);height:calc(var(--s)*1.74);transform:translate(-50%,-50%);z-index:2;pointer-events:none;max-width:none}
.pc17-bn{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.pc17-t{display:inline-block;margin:3px 0 2px;padding:2px 12px 3px;font:700 12.5px/1.25 Cinzel,Georgia,serif;letter-spacing:.3px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;
 clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%);background:linear-gradient(180deg,#7a6248,#45362a);color:#f6ead2;text-shadow:0 1px 0 rgba(0,0,0,.45)}
.pc17-t.r-rare{background:linear-gradient(180deg,#3d82e6,#1a3f86);color:#eef5ff}
.pc17-t.r-epic{background:linear-gradient(180deg,#9b5ce8,#4a1f86);color:#fbf2ff}
.pc17-t.r-legendary{background:linear-gradient(100deg,#b7801f 0%,#ffe08a 30%,#e9b443 50%,#ffe9a8 70%,#b7801f 100%);background-size:220% 100%;color:#3b2205;text-shadow:0 1px 0 rgba(255,240,200,.6);animation:pc17shine 4.5s linear infinite}
.pc17-t.r-none{background:rgba(0,0,0,.35);color:rgba(255,255,255,.75);font-weight:600}
@keyframes pc17shine{from{background-position:100% 0}to{background-position:-120% 0}}
.pc17-show{display:inline-flex;gap:3px;align-items:center;vertical-align:middle}
.pc17-sm{display:inline-flex;line-height:0}
.pc17-md{object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.pc17-mde{line-height:1}
/* player cards */
.pch.pc17-pch{position:relative;overflow:hidden;isolation:isolate;margin:-12px -12px 0;padding:16px 12px 14px;border-radius:15px 15px 0 0;color:#fff8e6;flex-wrap:wrap}
.pch.pc17-pch::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(18,10,4,.82),rgba(18,10,4,.5) 55%,rgba(18,10,4,.18)),linear-gradient(0deg,rgba(18,10,4,.55),transparent 55%);pointer-events:none}
.pch.pc17-pch>*:not(.pc17-bn){position:relative;z-index:1}
.pch.pc17-pch h2{color:#fff8e6;text-shadow:0 2px 3px rgba(0,0,0,.6)}
.pch.pc17-pch .pclan,.pch.pc17-pch .pclan b,.pch.pc17-pch small,.pch.pc17-pch .muted{color:#f1e3c4!important;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.pch.pc17-pch .pcav{margin:14px 16px 14px 14px}
.pch.pc17-pch .pc17-show{display:flex;margin-top:5px}
.pch.pc17-pch .pc17-t{white-space:normal;font-size:11.5px}
.pch.pc17-pch .pbase{filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
/* the own profile */
.prof.pc17-prof{position:relative;overflow:hidden;isolation:isolate;flex-wrap:wrap;margin:0 0 10px;padding:16px 14px 12px;border-radius:16px;color:#fff8e6;box-shadow:0 0 0 2px #c9a24a,0 6px 16px rgba(0,0,0,.25)}
.prof.pc17-prof::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(18,10,4,.8),rgba(18,10,4,.45) 60%,rgba(18,10,4,.2)),linear-gradient(0deg,rgba(18,10,4,.7),transparent 50%);pointer-events:none}
.prof.pc17-prof>*:not(.pc17-bn){position:relative;z-index:1}
.pav.pc17-av{display:inline-block;width:var(--s);height:var(--s);overflow:visible;border-radius:50%;background:none;border:0;padding:0}
.prof.pc17-prof .pav.pc17-av{margin:12px 18px 12px 10px}
.prof.pc17-prof .grow{min-width:0}
.prof.pc17-prof .pclan,.prof.pc17-prof .pclan b,.prof.pc17-prof small.muted,.prof.pc17-prof .muted{color:#f1e3c4!important;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.pc17-bar{flex:1 1 100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;padding-top:8px;border-top:1px solid rgba(255,225,160,.25)}
.pc17-bar .pc17-cbtn{margin-inline-start:auto;position:relative}
.pc17-dot{position:absolute;top:-7px;right:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#e8412b;color:#fff;font:800 11px/18px system-ui,sans-serif;font-style:normal;box-shadow:0 0 0 2px #fff8e6}
/* More hub card and lists */
.pc17-profc{position:relative;overflow:hidden;isolation:isolate}
.pc17-profc::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(40,8,4,.78),rgba(40,8,4,.35) 65%,rgba(40,8,4,.1));pointer-events:none}
.pc17-profc>*:not(.pc17-bn){position:relative;z-index:1}
body.tab-more #view .cm9-prof.pc17-profc .pav.pc17-av{width:var(--s);height:var(--s);box-shadow:none;overflow:visible;margin:10px 16px 10px 10px;background:none}
.pc17-mt{display:table;margin:2px 0 3px;font-size:11.5px}
.pc17-lt{margin:0 0 0 6px;padding:1px 9px 2px;font-size:10.5px}
.pc17-at{display:table;margin:1px 0;font-size:10.5px;padding:1px 9px 2px}
/* the Customize sheet */
.pc17-h{margin:0 0 10px}
.pc17-prev{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;gap:14px;min-height:118px;padding:14px 16px;border-radius:16px;margin-bottom:12px;box-shadow:0 0 0 2px #c9a24a,0 6px 16px rgba(0,0,0,.25);color:#fff8e6}
.pc17-prev::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(18,10,4,.75),rgba(18,10,4,.35) 60%,rgba(18,10,4,.1));pointer-events:none}
.pc17-prev>*:not(.pc17-bn){position:relative;z-index:1}
.pc17-prev .pc17-av{margin:16px 12px 16px 14px}
.pc17-pi{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.pc17-pi>b{font:400 22px 'Lilita One',sans-serif;letter-spacing:.3px;text-shadow:0 2px 3px rgba(0,0,0,.7)}
.pc17-nos{color:#f1e3c4;opacity:.8}
.pc17-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;overflow:visible}
.pc17-tabs button{display:flex;flex-direction:column;align-items:center;padding:5px 2px;font-size:13.5px;line-height:1.15;border-radius:12px}
.pc17-tabs button small{opacity:.7;font-weight:600;font-size:11px}
.pc17-help{margin:4px 0 8px;font-size:14px}
.pc17-grid{display:grid;gap:8px;margin:8px 0 6px}
.pc17-grid.g-t{grid-template-columns:repeat(2,minmax(0,1fr))}
.pc17-grid.g-f,.pc17-grid.g-m{grid-template-columns:repeat(3,minmax(0,1fr))}
.pc17-grid.g-b{grid-template-columns:minmax(0,1fr)}
.pc17-tile{--rc:#9a8366;position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:10px 6px 9px;border-radius:14px;border:2px solid color-mix(in srgb,var(--rc) 70%,#2a1a0a);
 background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--rc) 38%,transparent),transparent 70%),linear-gradient(180deg,#3a2a1b,#22170e);color:#f6ead2;text-align:center;font:inherit;box-shadow:0 2px 0 rgba(0,0,0,.3),inset 0 1px 0 rgba(255,230,180,.15);transition:transform .12s}
.pc17-tile:active{transform:scale(.97)}
.pc17-tile.r-rare{--rc:#3d82e6}.pc17-tile.r-epic{--rc:#9b5ce8}.pc17-tile.r-legendary{--rc:#f0c25a}
.pc17-tile.on{border-color:#ffd56a;box-shadow:0 0 0 2px #ffd56a,0 0 16px rgba(255,200,80,.55),inset 0 1px 0 rgba(255,230,180,.2)}
.pc17-tile.locked{opacity:.86}
.pc17-tile.locked .pc17-av,.pc17-tile.locked .pc17-bnt img,.pc17-tile.locked .pc17-tt,.pc17-tile.locked .pc17-mart{filter:grayscale(.9) brightness(.7)}
.pc17-tn{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;max-width:100%}
.pc17-tn b{font-size:13.5px;line-height:1.15}
.pc17-rar{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:color-mix(in srgb,var(--rc) 75%,#fff)}
.pc17-hint{font-size:11.5px;line-height:1.25;color:#e3d2b0;opacity:.9}
.pc17-pg{display:block;width:86%;height:5px;margin-top:3px;border-radius:3px;background:rgba(0,0,0,.45);overflow:hidden}
.pc17-pg i{display:block;height:100%;background:linear-gradient(90deg,#e8b84a,#ffe08a)}
.pc17-pn{font-size:10.5px;color:#d9c7a3}
.pc17-tile .pc17-av{margin:20px 0 16px}
.pc17-tt{display:block;width:100%;padding:7px 4px;font:700 14px/1.2 Cinzel,Georgia,serif;color:#fff3d6;overflow-wrap:anywhere;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.pc17-tt.r-legendary{color:#ffe08a}.pc17-tt.r-epic{color:#e2c6ff}.pc17-tt.r-rare{color:#b9d6ff}
.pc17-bnt{position:relative;display:block;width:100%;aspect-ratio:2.6/1;border-radius:10px;overflow:hidden;background:#2a1d12;box-shadow:inset 0 0 0 1px rgba(255,230,180,.2)}
.g-b .pc17-tile{flex-direction:row;align-items:center;gap:10px;padding:8px;text-align:start}
.g-b .pc17-bnt{width:58%;flex:none}
.g-b .pc17-tn{align-items:flex-start}
.pc17-mart{display:flex;align-items:center;justify-content:center;height:62px}
.pc17-new{position:absolute;top:-6px;left:-4px;z-index:3;padding:1px 6px;border-radius:6px;background:#e8412b;color:#fff;font:800 10px/15px system-ui,sans-serif;font-style:normal;letter-spacing:.5px;box-shadow:0 2px 4px rgba(0,0,0,.35)}
.pc17-num{position:absolute;top:5px;right:6px;z-index:3;width:20px;height:20px;border-radius:50%;background:#ffd56a;color:#3b2205;font:800 12px/20px system-ui,sans-serif;font-style:normal}
@media (prefers-reduced-motion:reduce){.pc17-t.r-legendary{animation:none}.pc17-tile{transition:none}}


/* 39-015 icon refresh: painted icons in the top bar buttons (the glyphs stay in the markup for the tests and screen readers) */
.top #qbtn>svg,.top .ib.mus>svg{display:none}
.top #qbtn::before,.top .ib.mus::before{content:'';display:block;width:22px;height:22px;margin:auto;background:url(/a/i_cog.36fab978.webp) center/contain no-repeat;filter:brightness(1.35) saturate(1.1) drop-shadow(0 0 2px rgba(255,214,140,.35)) drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.top .ib.mus::before{background-image:url(/a/i_music.86e5d065.webp);filter:brightness(1.1) drop-shadow(0 0 2px rgba(255,214,140,.35)) drop-shadow(0 1px 1px rgba(0,0,0,.5))}
/* music off: the glyph carries a red slash; show the lute dimmed with the same slash */
.top .ib.mus{position:relative}
.top .ib.mus:has(path[stroke="#a3342c"])::before{filter:grayscale(1) brightness(.8)}
.top .ib.mus:has(path[stroke="#a3342c"])::after{content:'';position:absolute;left:50%;top:50%;width:24px;height:3px;margin:-1.5px 0 0 -12px;border-radius:2px;background:#d8352a;box-shadow:0 0 0 1px #3b1410;transform:rotate(45deg)}
.top .ib .ico{width:21px!important;height:21px!important;filter:brightness(1.1) drop-shadow(0 0 2px rgba(255,214,140,.35)) drop-shadow(0 1px 1px rgba(0,0,0,.5))}


/* ===== 39-023: clan prestige (premium emblems) ===== */
/* the emblem: the effects are transforms and opacity only, on small layers */
.cfe-p .cpx-gl{transform:translateX(0) skewX(-18deg);animation:cpGl 3.8s cubic-bezier(.45,0,.3,1) infinite}
@keyframes cpGl{0%,30%{transform:translateX(0) skewX(-18deg)}75%,100%{transform:translateX(170px) skewX(-18deg)}}
.cfe-p .cpx-au{transform-box:fill-box;transform-origin:center;animation:cpAu 2.8s ease-in-out infinite alternate}
@keyframes cpAu{from{opacity:.55;transform:scale(.94)}to{opacity:1;transform:scale(1.04)}}
.cfe-p .cpx-tw{animation:cpTw 2.6s ease-in-out infinite;opacity:.15}
@keyframes cpTw{0%,100%{opacity:.1}50%{opacity:1}}
.cfe-p .cpx-em{animation:cpEm 2.4s linear infinite;opacity:0}
@keyframes cpEm{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-92px);opacity:0}}
.cfe-p .cpx-wv{animation:cpWv 2.6s linear infinite}
@keyframes cpWv{from{transform:translateX(0)}to{transform:translateX(50px)}}
.cflag.cfe-fx5{transform-origin:50% 0;animation:cpWave 3.2s ease-in-out infinite}
@keyframes cpWave{0%,100%{transform:skewY(0) scaleX(1)}25%{transform:skewY(1.8deg) scaleX(.985)}75%{transform:skewY(-1.8deg) scaleX(.985)}}
.cfe-p .cpx-mk{transform-box:fill-box;animation:cpTw 2.2s ease-in-out infinite}
.cfe-p .cpf-rn{animation:cpRn 2s ease-in-out infinite alternate}
@keyframes cpRn{from{opacity:.45}to{opacity:1}}
.cfe-p .cpf-fl{animation:cpFl 1.1s linear infinite}
@keyframes cpFl{from{stroke-dashoffset:0}to{stroke-dashoffset:-26}}
.cfe-p .cpf-st{animation:cpTw 3s ease-in-out infinite}
/* a prestige emblem in a list or the chat: a warm gold halo */
.cfd-big .cflag.cfe-p,.cm9-emb .cflag.cfe-p{filter:drop-shadow(0 0 8px rgba(255,200,80,.6)) drop-shadow(0 8px 10px rgba(0,0,0,.55))}
.cfd-o .cflag.cfe-p{filter:drop-shadow(0 0 2px rgba(255,210,90,.7))}
/* the badge of a tier */
.cp-badge{flex:0 0 auto;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;font:900 14px Cinzel,Georgia,serif;color:#3a2006;
 background:radial-gradient(circle at 35% 30%,#fff6c8,#f2c24e 45%,#a8690f 80%,#6a3e08);box-shadow:0 0 0 2px #2b1606,0 0 0 3.5px #ffd772,0 3px 6px rgba(0,0,0,.4),0 0 12px rgba(255,200,80,.45);text-shadow:0 1px 0 rgba(255,255,255,.5)}
.cp-badge.t0{background:radial-gradient(circle at 35% 30%,#fff,#d6c6f6 45%,#7a5ab8 85%);color:#2a1048}
.cp-badge.t3{background:radial-gradient(circle at 35% 30%,#fff,#bfe8ff 45%,#3a86c8 85%,#1c4a7a)}
.cp-badge.t4{background:radial-gradient(circle at 35% 30%,#fff2c0,#ff9a3a 45%,#b3300c 85%,#5e1204);color:#2a0802}
.cp-badge.t5{background:radial-gradient(circle at 35% 30%,#fff,#e8d4ff 40%,#9a6ae0 70%,#3a1a78);color:#1e0838;box-shadow:0 0 0 2px #1e0838,0 0 0 3.5px #ffe7a0,0 3px 6px rgba(0,0,0,.4),0 0 16px rgba(190,140,255,.7)}
/* the designer's Prestige tab */
.cfd-tabs:has(.cfd-tp){grid-template-columns:repeat(4,1fr) 1.45fr}
.cfd-tabs .cfd-tp{color:#9a6410;background:linear-gradient(180deg,rgba(255,220,130,.35),rgba(255,220,130,.08))}
.cfd-tabs .cfd-tp.on{background:linear-gradient(180deg,#fff0b0,#f2c24e 45%,#b97a14);color:#2b1606;box-shadow:0 2px 0 #7a4e12,0 0 10px rgba(255,200,80,.6),inset 0 1px 0 #fff}
.cp-pan{display:flex;flex-direction:column}
.cp-cur{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;color:#fbe9c4;border:2px solid #d9a440;
 background:radial-gradient(ellipse at 15% 20%,rgba(255,214,130,.35),transparent 55%),linear-gradient(160deg,#3a2410,#1e1208);box-shadow:inset 0 0 0 1px rgba(255,220,150,.25)}
.cp-cur b{display:block;font:800 16px Cinzel,Georgia,serif;color:#ffe2a0}.cp-cur small{display:block;font-size:12px;line-height:1.35;color:#ecd6aa}
.cp-cur.cp-pitch{border-color:#9a7ad8;background:radial-gradient(ellipse at 15% 20%,rgba(200,170,255,.35),transparent 55%),linear-gradient(160deg,#2c1a48,#140a24)}
.cp-tiers{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.cp-tr{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel)}
.cp-tr .cp-badge{width:32px;height:32px;font-size:12px}
.cp-tr:not(.got):not(.next) .cp-badge{filter:grayscale(.85) brightness(.85)}
.cp-tr.got{border-color:#d9a440;background:linear-gradient(90deg,rgba(246,207,106,.22),rgba(246,207,106,.04))}
.cp-tr.next{border-color:#e0a83a;box-shadow:0 0 0 2px rgba(224,168,58,.3),0 0 14px rgba(255,200,80,.25)}
.cp-tri{flex:1;min-width:0}.cp-tri b{display:block;font-size:14px}
.cp-tri small{display:block;font-size:11px;line-height:1.3;color:var(--muted);overflow-wrap:anywhere}
.cp-tri .cp-bon{color:var(--ink);font-weight:700;font-size:12px}
.cp-own{flex:0 0 auto;font:800 12px Nunito,sans-serif;color:#2e7d3e}
.cp-lock{flex:0 0 auto;font:800 12px Nunito,sans-serif;color:var(--muted);white-space:nowrap}
.cp-buy{flex:0 0 auto;white-space:nowrap}
.cp-note{display:block;margin-top:8px;color:var(--muted);font-size:12px;text-align:center}
.cp-o{position:relative}
.cp-o.lk .cflag{opacity:.92}
.cp-need{position:absolute;top:3px;right:3px;min-width:18px;height:18px;padding:0 3px;border-radius:9px;font:900 10px/18px Cinzel,Georgia,serif;font-style:normal;color:#3a2006;
 background:linear-gradient(180deg,#ffe9a0,#d39a2a);box-shadow:0 0 0 1.5px #2b1606}
.cp-need::before{content:'🔒';font-size:8px;margin-right:1px;vertical-align:1px}
/* the buy box */
.cp-ask{margin-bottom:10px;padding:12px;border-radius:16px;color:#fbe9c4;border:2px solid #ffd772;animation:cpIn .3s ease-out;
 background:radial-gradient(ellipse at 20% 0%,rgba(255,214,130,.4),transparent 60%),linear-gradient(160deg,#4a2a0c,#20120a);box-shadow:0 8px 22px rgba(0,0,0,.35),0 0 18px rgba(255,200,80,.35)}
@keyframes cpIn{from{transform:translateY(-6px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.cp-ask-h{display:flex;align-items:center;gap:12px}
.cp-ask-h b{display:block;font:800 16px Cinzel,Georgia,serif;color:#ffe2a0;overflow-wrap:anywhere}.cp-ask-h small{display:block;font-size:12px;color:#ecd6aa}
.cp-ask-b{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0}
.cp-ask-b>span{padding:8px;border-radius:10px;background:rgba(255,230,170,.12);border:1px solid rgba(255,220,150,.3);font-size:13px;text-align:center}
.cp-ask-b b{color:#ffd76a;font-size:15px}
.cp-ask-p{display:flex;justify-content:space-between;gap:8px;font-size:13px}.cp-ask-p b{color:#ffe2a0}.cp-ask-p .cp-short{color:#ff8a7a}
.cp-ask-n{display:block;margin-top:4px;color:#ffb3a8;font-size:12px}
.cp-ask-btns{margin-top:10px;justify-content:flex-end}
.cp-go{box-shadow:0 0 12px rgba(255,200,80,.55)}
/* the purchase: a crest of light over the preview */
.cp-cel{position:absolute;inset:-8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;pointer-events:none;border-radius:50%;
 background:radial-gradient(circle,rgba(255,236,170,.9),rgba(255,200,80,.35) 45%,transparent 70%);animation:cpCel 2.6s ease-out forwards}
.cp-cel b{font:900 15px Cinzel,Georgia,serif;color:#3a2006;text-shadow:0 1px 0 #fff6d0}
.cp-cel .cp-badge{width:46px;height:46px;font-size:17px}
@keyframes cpCel{0%{transform:scale(.4);opacity:0}15%{transform:scale(1.08);opacity:1}30%{transform:scale(1)}80%{opacity:1}100%{opacity:0}}
.btn.cp-unl{background:linear-gradient(180deg,#fff0b0,#f2c24e 45%,#b97a14);box-shadow:0 0 14px rgba(255,200,80,.6)}
/* the clan hall, the market, the army */
.card.cp-hall{display:flex;align-items:center;gap:12px;border:2px solid #e8b648!important;color:#fbe9c4;box-shadow:0 0 0 1px rgba(255,220,140,.35),0 0 16px rgba(255,200,80,.3),inset 0 0 0 1px rgba(255,230,170,.2)!important;
 background:radial-gradient(ellipse at 10% 30%,rgba(255,214,130,.4),transparent 55%),linear-gradient(160deg,#4a2c10,#1e1208)!important}
.card.cp-hall b{font:800 15px Cinzel,Georgia,serif;color:#ffe2a0;display:block}.card.cp-hall small{display:block;font-size:12px;line-height:1.35;color:#ecd6aa}
.card.cp-hall small b{display:inline;font:800 12px Nunito,sans-serif;color:#ffd76a}
.card.cp-hall0{border-color:#9a7ad8!important;box-shadow:0 0 14px rgba(170,130,255,.3)!important;background:radial-gradient(ellipse at 10% 30%,rgba(200,170,255,.35),transparent 55%),linear-gradient(160deg,#2c1a48,#140a24)!important}
.cp-pk{color:#b07a10;font-weight:800}
.cp-mk{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:8px 10px;border-radius:12px;border:1.5px solid #d9a440;font-size:13px;
 background:linear-gradient(90deg,rgba(246,207,106,.3),rgba(246,207,106,.06))}
.cp-mk .cp-badge{width:28px;height:28px;font-size:11px}
.cp-dchip{display:block;font-style:normal;font-size:10px;font-weight:900;color:#9a6410;white-space:nowrap}
.clrow.cp-row{position:relative;overflow:hidden;border-color:#e8b648!important;box-shadow:0 0 0 1px rgba(255,215,110,.5),0 0 14px rgba(255,200,80,.35),inset 0 0 18px rgba(255,200,80,.12)}
.clrow.cp-row::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,240,190,.28),transparent);transform:translateX(0);animation:cpRow 4.5s ease-in-out infinite;pointer-events:none}
@keyframes cpRow{0%,55%{transform:translateX(0)}100%{transform:translateX(480%)}}
.cp-tag{display:inline-block;font:900 11px Cinzel,Georgia,serif;font-style:normal;color:#3a2006;padding:1px 7px;border-radius:999px;vertical-align:2px;background:linear-gradient(180deg,#fff0b0,#e2a83a);box-shadow:0 0 0 1px #7a4e12,0 0 8px rgba(255,200,80,.5)}
.cflag.cfe-p,.msg small .cflag.cfe.cfe-p{filter:drop-shadow(0 0 2.5px rgba(255,214,100,.95))}
@media (prefers-reduced-motion:reduce){.clrow.cp-row::after{animation:none;opacity:0}}
@media (max-width:370px){.cp-tr{gap:8px;padding:7px 8px}.cp-tr .cp-badge{width:28px;height:28px}.cfd-tabs:has(.cfd-tp) button{font-size:12px}}
@media (prefers-reduced-motion:reduce){.cfe-p .cpx-gl,.cfe-p .cpx-au,.cfe-p .cpx-tw,.cfe-p .cpx-em,.cfe-p .cpx-wv,.cflag.cfe-fx5,.cfe-p .cpx-mk,.cfe-p .cpf-rn,.cfe-p .cpf-fl,.cfe-p .cpf-st,.cp-ask,.cp-cel{animation:none}
 .cfe-p .cpx-em{opacity:.7}.cfe-p .cpx-tw{opacity:.8}}


/* ===== 39-024 quality pass ===== */
/* secondary display headings on parchment: dark ink like the new screens, not cream-on-cream outline */
#sheet:not(.shop82) :is(#sheetBody>h2:not(:first-of-type),#sheetBody .sh-h h2,#sheetBody .chal-head h2,#sheetBody>.wheelbox>h2,#sheetBody>.chestbox>h2,#sheetBody>.arena>h2),
body[data-tab="map"] #view .maphead h1{color:#4a2a0c!important;text-shadow:0 1px 0 rgba(255,248,226,.9)!important;-webkit-text-stroke:0!important}
#sheet:not(.shop82) #sheetBody>h2:not(:first-of-type){display:flex;align-items:center;gap:8px}
#sheet:not(.shop82) #sheetBody>h2:not(:first-of-type)::after{content:'';flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(176,124,40,.7),rgba(176,124,40,0))}
/* sub-label inside a ribbon ("new offers in 2:21"): plain small UI type, not a squeezed outline */
#sheetBody>h2:first-of-type small{display:block;margin-top:1px;font:800 12px/1.2 Nunito,sans-serif!important;color:#ffe6a8!important;text-shadow:0 1px 1px rgba(0,0,0,.5)!important;letter-spacing:0}
/* league rewards: readable gold on parchment */
#sheetBody .lgrw{color:#9a6400!important;text-shadow:0 1px 0 rgba(255,248,226,.8)}
/* shop: the Speed-ups card is parchment inside the dark shop; give it dark ink */
#sheet.shop82 #sheetBody>.card:not(.offer) b{color:#3a2208!important;text-shadow:none!important}
#sheet.shop82 #sheetBody>.card:not(.offer) small{color:#6a4a22!important;text-shadow:none!important}
#sheet.shop82 #sheetBody>.card:not(.offer) .ui .ico{filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
/* map buttons: icon and label on one line, same height as their neighbours */
.mapctl .btn{display:inline-flex!important;align-items:center;justify-content:center;gap:5px;white-space:nowrap}
.mapctl .btn .ico{flex:none}
/* tips: a real tap target for the close button; no tip over the tutorial card */
.tipcard button{min-width:36px;min-height:36px;margin:-8px -6px -8px 0;display:grid;place-items:center;font-size:17px!important;border-radius:50%}
.tipcard button:active{background:rgba(122,80,16,.15)!important}
body.guiding .tipcard{display:none!important}
/* tips keep dark ink on every tab (Clan and More turned their text cream on the cream card) */
html body #view .tipcard,html body #view .tipcard p,html body #view .tipcard small{color:#3a2206!important;text-shadow:none!important}
/* tutorial card: gold-framed panel, display title, calmer body copy */
#guide .gc{background:linear-gradient(180deg,#3b2a16 0%,#21170c 100%)!important;border:2px solid #d4a64a!important;border-radius:16px!important;box-shadow:inset 0 0 0 1px rgba(255,220,140,.18),inset 0 2px 0 rgba(255,230,170,.12),0 10px 28px rgba(0,0,0,.55)!important;padding:12px 14px 10px!important}
#guide .gc h3{margin:0 0 5px!important;font:400 20px/1.15 'Lilita One',sans-serif!important;letter-spacing:.3px;color:#ffd76a!important;text-shadow:0 2px 0 #140c04}
#guide .gc p{margin:0!important;font-size:14px!important;font-weight:600!important;line-height:1.42!important;color:#f2e4c4!important}
#guide .gn{margin-top:10px!important;padding-top:8px;border-top:1px solid rgba(212,166,74,.28)}
#guide .gn span{color:#c9b183!important;font-weight:800;letter-spacing:.3px}
#guide .gn .btn{min-height:36px;padding:0 18px}
#guide .skip{min-height:36px;color:#d9c49a!important}
/* top bar at narrow phones: a little less air between the icon buttons so nothing is clipped */
@media (max-width:420px){.top .tb{gap:2px!important}}
/* crystal pill: the green + sits on the corner, not on the number */
.top .cr{padding-right:12px!important}
.top .cr::before{top:-6px!important;bottom:auto!important;right:-6px!important;transform:scale(.88)}
/* settings segmented choices: comfortable tap height */
#sheetBody .seg3 button{min-height:36px}


/* 39-022 putting gear on, in view: the slot picker, the item card's sheet, the flight, the pins */
.eq-ov{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.eq-bd{position:absolute;inset:0;border:0;padding:0;margin:0;background:linear-gradient(180deg,rgba(8,5,2,.05),rgba(8,5,2,.55) 70%);cursor:default;animation:eqFade .2s ease-out both}
.eq-sheet{position:relative;width:min(100%,560px);max-height:min(64vh,560px);max-height:min(64dvh,560px);overflow-y:auto;overscroll-behavior:contain;
 padding:14px 14px calc(16px + var(--sab,0px));border-radius:22px 22px 0 0;color:#f6ead0;
 background:radial-gradient(120% 60% at 50% 0%,rgba(255,206,110,.16),transparent 60%),linear-gradient(180deg,#33261a,#1d150c 70%);
 border:2px solid #c99a3e;border-bottom:0;box-shadow:0 -10px 30px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,236,180,.25);animation:eqUp .26s cubic-bezier(.2,.9,.3,1) both}
.eq-sheet::before{content:'';display:block;width:42px;height:5px;border-radius:3px;background:rgba(240,214,150,.45);margin:-6px auto 8px}
@keyframes eqUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes eqFade{from{opacity:0}}
.eq-h{position:relative;display:flex;align-items:baseline;gap:8px;padding:0 40px 8px 2px;border-bottom:1px solid rgba(240,214,150,.18);margin-bottom:8px}
.eq-h b{font:400 21px/1.1 'Lilita One',Nunito,sans-serif;color:#ffe7a8;text-shadow:0 2px 0 #3a2206}
.eq-h small{color:#9fe07a;font:800 13px Nunito,sans-serif}
.eq-ov .hs-x{top:-4px;right:0;width:36px;height:36px;background:rgba(255,236,180,.12);color:#ffe7a8;font-size:16px}
.eq-row{position:relative;display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:10px;padding:8px 8px 8px 6px;margin:0 0 8px;border-radius:14px;
 background:linear-gradient(90deg,color-mix(in srgb,var(--rc) 22%,transparent),rgba(255,255,255,.03) 60%);border:1.5px solid color-mix(in srgb,var(--rc) 55%,transparent)}
.eq-row.best{box-shadow:0 0 0 2px #9fe07a,0 0 16px rgba(130,220,90,.35)}
.eq-worn{background:linear-gradient(90deg,rgba(255,215,120,.16),rgba(255,255,255,.02));border-style:dashed;border-color:rgba(255,215,120,.5)}
.eq-pic{padding:0;border:0;background:none;cursor:pointer}
.eq-art{position:relative;display:grid;place-items:center;width:62px;height:62px;border-radius:14px;
 background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--rc) 45%,#2a2016),#15100a 75%);border:2px solid var(--rc);box-shadow:inset 0 0 12px rgba(0,0,0,.55),0 0 10px color-mix(in srgb,var(--rc) 45%,transparent)}
.eq-art img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.eq-upn{position:absolute;top:-7px;left:50%;translate:-50% 0;padding:0 5px;border-radius:8px;background:linear-gradient(#ffe58a,#e0a21a);color:#4a2508;font:900 11px/16px Nunito,sans-serif;box-shadow:0 1px 0 #7a4a10}
.eq-info{min-width:0;display:flex;flex-direction:column;gap:1px}
.eq-info>b{font:400 15.5px/1.15 'Lilita One',Nunito,sans-serif;text-shadow:0 1px 0 rgba(0,0,0,.6);overflow:hidden;text-overflow:ellipsis}
.eq-sub{font:800 11.5px/1.25 Nunito,sans-serif;opacity:.95}
.eq-stats{display:flex;flex-direction:column;font:800 12.5px/1.3 Nunito,sans-serif;color:#f6ead0}
.eq-go{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.eq-tag{font:900 10px/1 Nunito,sans-serif;font-style:normal;text-transform:uppercase;letter-spacing:.06em;padding:3px 6px;border-radius:6px;background:rgba(255,215,120,.2);color:#ffe7a8}
.eq-tag.best{background:#3fb83a;color:#fff}
.eq-d{font:900 12px/1 Nunito,sans-serif}.eq-d.up{color:#9fe07a}.eq-d.dn{color:#ff8a7a}
.btn.eq-wear{min-width:86px;min-height:44px;padding:8px 14px;font-size:18px!important}
.btn.eq-off{min-height:36px;padding:6px 10px;font-size:13px}
.eq-none{margin:6px 2px 4px;color:#e9d9b4;font:700 13.5px/1.4 Nunito,sans-serif}
/* the item card in its sheet */
.eq-cardov .eq-sheet{padding:12px 10px calc(14px + var(--sab,0px));background:linear-gradient(180deg,#3a2b1c,#1d150c)}
.eq-cardov .hs-card{margin:0;animation:none}
.eq-cwear{display:flex;align-items:center;gap:10px;margin:10px 0 2px}
.eq-cwear small{flex:1;color:#5a3a12;font:700 12.5px/1.3 Nunito,sans-serif}
.btn.eq-wear.big{min-width:132px;min-height:52px;font-size:22px!important}
/* the slot rail: the number is the pieces that can be worn there; it nudges once */
.hs-rail .hs-slot.spare .eq-n{animation:eqNudge 1.1s ease-in-out .9s 2}
.hs-rail .hs-slot.spare{box-shadow:inset 0 0 14px rgba(126,217,87,.28),0 3px 8px rgba(0,0,0,.45)}
.hs-new.eq-better{left:auto;top:-6px;right:-6px;font-size:10px;line-height:18px;animation:eqNudge 1.1s ease-in-out .9s 2}
@keyframes eqNudge{0%,100%{transform:none;box-shadow:0 0 0 2px #1c3a12}40%{transform:scale(1.3);box-shadow:0 0 0 2px #1c3a12,0 0 0 7px rgba(126,217,87,.35)}}
/* Equip best on the stage */
.eq-best{position:absolute;right:10px;bottom:132px;z-index:5;display:flex;align-items:center;gap:6px;padding:6px 8px 6px 7px;border-radius:14px;cursor:pointer;
 background:linear-gradient(180deg,#9be25a,#4fa62a);border:2px solid #24560f;color:#fff;font:900 13px/1 Nunito,sans-serif;text-shadow:0 1px 0 #1f4a0e;
 box-shadow:0 3px 0 #1f4a0e,0 6px 14px rgba(0,0,0,.45),0 0 0 0 rgba(126,217,87,.6);animation:eqGlow 2.4s ease-in-out 1s 3}
.eq-best .eq-bi{font-style:normal;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.25);font-size:11px}
.eq-best b{min-width:18px;height:18px;border-radius:9px;background:#fff;color:#2c6a16;font:900 11px/18px Nunito,sans-serif;text-shadow:none;padding:0 4px}
.eq-best:active{transform:translateY(2px);box-shadow:0 1px 0 #1f4a0e}
@keyframes eqGlow{50%{box-shadow:0 3px 0 #1f4a0e,0 6px 14px rgba(0,0,0,.45),0 0 0 8px rgba(126,217,87,0),0 0 22px rgba(126,217,87,.8)}}
/* the flight: the piece rises from where it was tapped, lands in its slot, then onto the hero */
.eq-flights{position:fixed;inset:0;z-index:25;pointer-events:none}
.eq-fly{position:fixed;left:0;top:0;width:58px;height:58px;margin:-29px 0 0 -29px;display:grid;place-items:center;border-radius:50%;
 background:radial-gradient(circle,color-mix(in srgb,var(--rc) 70%,#fff) 0%,color-mix(in srgb,var(--rc) 40%,transparent) 45%,transparent 70%);
 opacity:0;animation:eqFly 1.05s cubic-bezier(.45,0,.25,1) var(--d,0s) both}
.eq-fly img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
@keyframes eqFly{
 0%{opacity:0;transform:translate(var(--x0),var(--y0)) scale(1.3)}
 10%{opacity:1;transform:translate(var(--x0),calc(var(--y0) - 18px)) scale(1.35)}
 48%{opacity:1;transform:translate(var(--x1),var(--y1)) scale(1)}
 60%{opacity:1;transform:translate(var(--x1),var(--y1)) scale(1.15)}
 92%{opacity:1;transform:translate(var(--x2),var(--y2)) scale(.5)}
 100%{opacity:0;transform:translate(var(--x2),var(--y2)) scale(.35)}}
/* the worn pieces on the figure (positions: model.ts pinAt, the figure's box: figbox.ts) */
@supports (width:1cqh){
.hs-fig{container-type:size}
.eq-pins{position:absolute;inset:0;--iw:min(64cqh,78cqw);--ih:calc(var(--iw) / .64);--oy:calc((100cqh - var(--ih)) / 2)}
.eq-pin{position:absolute;left:calc(50% + (var(--fx) - .5) * var(--iw));top:calc(var(--oy) + var(--fy) * var(--ih));width:clamp(24px,7.4cqh,32px);aspect-ratio:1;translate:-50% -50%;
 display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--rc) 50%,#2a2016),#120d07 80%);
 border:2px solid var(--rc);box-shadow:0 2px 5px rgba(0,0,0,.6),0 0 8px color-mix(in srgb,var(--rc) 60%,transparent);animation:eqPin .5s cubic-bezier(.3,1.6,.5,1) .55s both}
.eq-pin img{width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
}
@supports not (width:1cqh){.eq-pins{display:none}}
@keyframes eqPin{from{opacity:0;scale:.2}to{opacity:1;scale:1}}
/* the Appearance switch */
.eq-pinsw{display:flex;align-items:center;gap:10px;margin:10px 0 4px;padding:8px 10px;border-radius:12px;background:rgba(255,236,180,.07);border:1px solid rgba(255,236,180,.16)}
.eq-pinsw b{display:block;font:900 13.5px Nunito,sans-serif;color:#ffe7a8}.eq-pinsw small{display:block;font:700 11.5px/1.3 Nunito,sans-serif;color:#d9c9a4}
.eq-sw{position:relative;flex:none;display:flex;align-items:center;gap:6px;min-width:76px;height:34px;padding:0 10px 0 4px;border-radius:17px;border:2px solid #6a5636;background:#2a2016;color:#d9c9a4;font:900 12px Nunito,sans-serif;cursor:pointer}
.eq-sw i{width:24px;height:24px;border-radius:50%;background:#8a7a5a;transition:transform .15s}
.eq-sw.on{flex-direction:row-reverse;padding:0 4px 0 10px;background:#3f9222;border-color:#2c6a16;color:#fff}.eq-sw.on i{background:#fff}
@media (max-width:370px){.eq-row{grid-template-columns:56px 1fr auto;gap:8px}.eq-art{width:54px;height:54px}.eq-art img{width:44px;height:44px}
 .btn.eq-wear{min-width:74px;font-size:16px!important;padding:8px 10px}.eq-info>b{font-size:14.5px}.eq-best{right:5px;padding:5px 6px}.eq-best span{font-size:12px}}
@media (prefers-reduced-motion:reduce){.eq-bd,.eq-sheet,.eq-pin,.eq-best,.hs-rail .hs-slot.spare .eq-n,.hs-new.eq-better{animation:none}.eq-flights{display:none}}


/* 39-016 special challenge themes: a painted banner per theme (SPC16 art, set inline as background-image) */
.spc16bg.art{background-position:center 20%;background-size:cover;background-repeat:no-repeat}


/* the paper doll (39-025): the hero drawn as aligned layers, one box */
.hdl{position:relative;display:block;aspect-ratio:640/1000;width:auto}
.hdl>img,.hs-doll>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;pointer-events:none}
.hs-doll{aspect-ratio:640/1000;width:auto}
span.ar2-fig.hdl{height:170px;margin:0 auto}
.hs-shine.dl,.hs-flash.dl,.hs-tlit.dl{-webkit-mask:none;mask:none;-webkit-mask-image:var(--fig);mask-image:var(--fig);-webkit-mask-position:50% 100%;mask-position:50% 100%;
 -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}


/* 39-027: the full-screen button wears the painted frame (the glyph stays in the markup for screen readers and tests) */
.top #fsbtn>svg{display:none}
.top #fsbtn::before{content:'';display:block;width:21px;height:21px;margin:auto;background:url(/a/i_full.806a80be.webp) center/contain no-repeat;filter:brightness(1.1) drop-shadow(0 0 2px rgba(255,214,140,.35)) drop-shadow(0 1px 1px rgba(0,0,0,.5))}
/* in full screen the frame folds in a little: tap to leave */
html.fsmode .top #fsbtn::before{transform:scale(.8);opacity:.85}


/* ==============================================================   Hero screen polish (39-026, src/app/ui/hero): the hero always in full view (the power and
   stats in a strip under the stage, three slots each side), drag the hero to turn them
   ===================================================================== */
/* six pieces a set (the legs): the Forge's rows hold six */
.ar-pieces{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.hs-rail.r{left:auto;right:8px;top:112px;flex-direction:column;gap:5px}
@media (max-width:370px){.hs-rail.r{right:5px;gap:5px}}
@media (max-height:760px){.hs-rail.r{gap:3px}}
.hs-say{right:72px;top:118px;max-width:132px}
/* the stats strip */
.hs-sstrip{position:relative;margin:10px 0 0;padding:8px 10px 10px;border-radius:16px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:7px 10px;color:var(--cream);
 background:radial-gradient(120% 140% at 0% 0%,rgba(255,206,110,.16),transparent 55%),linear-gradient(180deg,#2e2216,#17110b);
 border:1.5px solid rgba(231,184,74,.7);box-shadow:inset 0 1px 0 rgba(255,232,170,.22),0 6px 14px rgba(0,0,0,.28)}
.hs-sstrip .hs-power{display:flex;align-items:baseline;gap:8px;text-align:left;padding:0 0 0 2px;margin:0;border:0;min-width:0}
.hs-sstrip .hs-power small{display:inline;font-size:10.5px}
.hs-sstrip .hs-power b{font-size:28px;line-height:1}
.hs-sstrip .hs-gain{right:auto;left:100%;top:-6px;margin-left:-8px}
.hs-sstrip>.hs-war{display:flex;align-items:center;gap:5px;padding:4px 9px 4px 6px;border-radius:11px;background:rgba(255,211,106,.1);border:1px solid rgba(255,211,106,.45)}
.hs-sstrip>.hs-war small{order:1;font:800 11px/1 Nunito,sans-serif;color:#f3e6c4;white-space:nowrap}
.hs-sstrip>.hs-war b{order:2;font:900 14px/1 Nunito,sans-serif;color:#ffd36a}
.hs-sstrip>.hs-war span{font-size:15px;line-height:1}
.hs-sgrid{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.hs-sgrid .hs-st{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:4px;row-gap:2px;padding:6px 3px 5px;border-radius:11px;
 background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(231,184,74,.25)}
.hs-sgrid .hs-st span{font-size:15px;line-height:1}
.hs-sgrid .hs-st b{font:900 14px/1 Nunito,sans-serif;color:#9cf07a}
.hs-sgrid .hs-st small{grid-column:1/-1;text-align:center;font:800 10px/1.1 Nunito,sans-serif;color:#d9c9a2;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:370px){.hs-sgrid{gap:4px}.hs-sgrid .hs-st b{font-size:13px}.hs-sgrid .hs-st span{font-size:13px}.hs-sgrid .hs-st small{font-size:9.5px}.hs-sstrip .hs-power b{font-size:25px}}
/* drag to turn: the figure turns on its plinth (pseudo-3D), the ring under it spins, the plinth's
   shadow and the motes shift; two CSS variables set by the pointer (--ry degrees, --rt -1..1) */
.hs-stage{--ry:0deg;--rt:0}
.hs-turn{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-end;transform:perspective(1150px) rotateY(var(--ry));transform-origin:50% 60%;
 transition:transform .9s cubic-bezier(.2,1.5,.4,1)}
.hs-tlit{position:absolute;left:11%;right:11%;top:0;bottom:0;z-index:2;pointer-events:none;
 -webkit-mask:var(--fig) center bottom/contain no-repeat;mask:var(--fig) center bottom/contain no-repeat}
.hs-tlit::before,.hs-tlit::after{content:'';position:absolute;inset:0;opacity:0;transition:opacity .9s ease-out}
.hs-tlit::before{background:linear-gradient(90deg,rgba(255,236,190,.28),transparent 30%,transparent 48%,rgba(14,8,24,.72));opacity:calc(var(--rt) * 1)}
.hs-tlit::after{background:linear-gradient(270deg,rgba(255,236,190,.28),transparent 30%,transparent 48%,rgba(14,8,24,.72));opacity:calc(var(--rt) * -1)}
.hs-ring{position:absolute;left:50%;bottom:90px;width:58%;aspect-ratio:1;z-index:1;pointer-events:none;opacity:.5;
 transform:translate(-50%,50%) rotateX(76deg) rotate(calc(var(--ry) * 2.2));transition:transform 1.1s cubic-bezier(.2,1.3,.4,1),opacity .4s;
 background:repeating-conic-gradient(from 0deg,rgba(255,228,150,.95) 0 1.6deg,transparent 1.6deg 12deg),repeating-conic-gradient(from 6deg,rgba(255,200,90,.6) 0 5deg,transparent 5deg 45deg);
 -webkit-mask:radial-gradient(closest-side,transparent 62%,#000 63% 69%,transparent 70% 80%,#000 81% 85%,transparent 86%);
 mask:radial-gradient(closest-side,transparent 62%,#000 63% 69%,transparent 70% 80%,#000 81% 85%,transparent 86%)}
.hs-plinth{transform:translateX(calc(var(--rt) * -18px)) scaleX(calc(1 + var(--rt) * var(--rt) * .12));transition:transform .9s cubic-bezier(.2,1.5,.4,1)}
.hs-motes{transform:translateX(calc(var(--rt) * 26px));transition:transform 1.2s cubic-bezier(.2,1.2,.4,1)}
.hs-rays{transform:translateX(calc(var(--rt) * -14px));transition:transform 1.2s cubic-bezier(.2,1.2,.4,1)}
.hs-poke{touch-action:pan-y;cursor:grab}
.hs-turning .hs-poke{cursor:grabbing}
.hs-turning .hs-ring{opacity:.85}
.hs-turning .hs-turn,.hs-turning .hs-ring,.hs-turning .hs-plinth,.hs-turning .hs-motes,.hs-turning .hs-rays,.hs-turning .hs-tlit::before,.hs-turning .hs-tlit::after{transition:none}
.hs-turnhint{position:absolute;left:50%;bottom:176px;translate:-50% 0;z-index:4;display:flex;align-items:center;gap:4px;padding:3px 9px 3px 7px;border-radius:10px;pointer-events:none;
 background:rgba(20,13,6,.62);border:1px solid rgba(240,207,122,.55);font:800 10.5px/1.2 Nunito,sans-serif;color:#f5d98c;letter-spacing:.04em;white-space:nowrap;
 opacity:0;animation:hsHint 6s ease-out 1.2s forwards}
.hs-turnhint i{font-style:normal;font-size:13px;line-height:1;display:inline-block;animation:hsHintSpin 1.6s ease-in-out 1.6s 3}
@keyframes hsHint{0%{opacity:0;transform:translateY(6px)}10%,75%{opacity:1;transform:none}100%{opacity:0}}
@keyframes hsHintSpin{0%,100%{transform:none}50%{transform:scaleX(-1)}}
@media (prefers-reduced-motion:reduce){
 .hs-turn,.hs-ring,.hs-plinth,.hs-motes,.hs-rays,.hs-tlit::before,.hs-tlit::after{transition:none}
 .hs-turnhint{animation:none;opacity:1}.hs-turnhint i{animation:none}}


/* ===== 39-041 wheel of fortune: a header that reads on the parchment AND the dark (night) sheet, prize chips ===== */
#sheet #sheetBody>.wheelbox>h2:not(#_ll){justify-content:center;margin:2px 0 0!important;font:400 var(--fs-2xl)/1.15 var(--ff-display)!important;letter-spacing:.5px;color:var(--ink-gold)!important;-webkit-text-stroke:0!important;text-shadow:var(--ts-title),0 0 18px rgba(255,190,60,.35)!important}
#sheet #sheetBody>.wheelbox>p.muted{display:inline-block;margin:6px auto 8px!important;padding:4px 14px;border-radius:999px;background:rgba(42,20,4,.84);box-shadow:inset 0 0 0 1px rgba(255,214,120,.4),0 2px 6px rgba(0,0,0,.2);color:#ffe9b0!important;font:800 var(--fs-sm)/1.3 var(--ff-ui)!important;text-shadow:none!important}
#sheetBody>.wheelbox .wgrow{margin:12px auto 0;max-width:320px;font:800 var(--fs-xs)/1.3 var(--ff-ui);color:var(--muted)}
#sheetBody>.wheelbox .wprizes{gap:6px;margin-top:8px}
#sheetBody>.wheelbox .wprizes span{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 6px;border-radius:999px;background:rgba(60,30,0,.06);box-shadow:inset 0 0 0 1px var(--line);font:800 var(--fs-xs)/1.25 var(--ff-ui);color:var(--ink)}
#sheetBody>.wheelbox .wprizes span i{margin:0;width:11px;height:11px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.28)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #sheetBody>.wheelbox .wprizes span{background:rgba(255,236,200,.07)}}
:root[data-theme="dark"] #sheetBody>.wheelbox .wprizes span{background:rgba(255,236,200,.07)}


/* 39-042 town clarity: no season film over the town (autumn's orange-brown wash, winter's colour
   loss); the town and the fields stay crisp in every season */
.vmap.sea-autumn::before,.vmap.sea-winter::before{content:none;display:none}


/* ===== 39-044: clan emblems II (painted frames, tier crests, charge categories, tribe presets) ===== */
.cfd-big{width:150px}
.cfd-big .cflag{width:150px;height:auto}
.cfd-cats{display:flex;gap:5px;overflow-x:auto;padding:2px 2px 8px;margin:0 -2px;scrollbar-width:none}
.cfd-cats::-webkit-scrollbar{display:none}
.cfd-cats button{flex:0 0 auto;border:1.5px solid var(--line);border-radius:999px;padding:6px 12px;font:800 12px Nunito,sans-serif;background:var(--panel);color:var(--muted);white-space:nowrap}
.cfd-cats button.on{border-color:#c8902c;background:linear-gradient(180deg,#f6cf6a,#c8902c);color:#2b1606;box-shadow:0 2px 0 #7a4e12}
.cfd-grp{margin-top:10px;padding-bottom:0}
.cfd-grp+.cfd-pre{padding-top:6px}
.cfd-p{width:70px}
.cfd-lt{margin:10px 0 6px;font-size:12px}
.cfd-lt:first-of-type{margin-top:2px}
.cm9-emb .cflag.cfe.cfe-p{width:150px!important}
.cm9-crest:has(.cfe-p){width:170px}
/* the tier V/IV crest: a slow shimmer over the painted art (off with reduced motion) */
.cfe-p .cpo-sh{animation:cpoSh 4.6s cubic-bezier(.45,0,.3,1) infinite}
@keyframes cpoSh{0%{transform:translateX(0)}55%,100%{transform:translateX(190px)}}
.cp-show{display:flex;justify-content:space-between;gap:4px;overflow-x:auto;padding:12px 4px 4px;margin:8px -2px 6px;scrollbar-width:none}
.cp-show::-webkit-scrollbar{display:none}
.cp-sh{flex:0 0 auto;width:62px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0 6px;border-radius:12px;background:radial-gradient(ellipse at 50% 40%,rgba(255,206,120,.28),transparent 70%),linear-gradient(180deg,#3a1a10,#1c0a07);border:1.5px solid #6b4a1c}
.cp-sh.got{border-color:#e0a83a;box-shadow:0 0 0 2px rgba(224,168,58,.3)}
.cp-show .cp-badge{font-style:normal;width:26px;height:26px;font-size:11px;margin-top:-4px}
@media (max-width:370px){.cfd-big,.cfd-big .cflag{width:124px}.cfd-p{width:64px}}
@media (prefers-reduced-motion:reduce){.cfe-p .cpo-sh{animation:none;opacity:0}}


/* 39-043 smooth play: the town's own CSS animations hold still while it is dragged or pinched
   (39-083: body.tz-hold, set with tz-moving only where 39-075 tg75 does not already hold them: switching
   a rule that reaches every node of the town picture restyled the whole picture at each touch) */
body.tz-hold .vmap>svg *{animation-play-state:paused!important}


/* ===== art quick wins B (39-046) ===== */
/* --- the Arena duel: a painted colosseum, a shadow at each hero's feet, juicy blows --- */
.duel{position:relative;overflow:hidden;isolation:isolate;
 background:linear-gradient(180deg,rgba(20,10,4,.45),rgba(20,10,4,.12) 45%,rgba(20,10,4,.3) 100%),url(/a/qw_arena_bg.2c0c7ee1.webp) center 58%/cover no-repeat,#3a1f0c!important}
.duel::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 85% 75% at 50% 55%,transparent 55%,rgba(15,6,2,.55))}
.duel.fig::before{height:22%!important;background:linear-gradient(180deg,transparent,rgba(30,15,5,.45))!important;z-index:0}
.duel .dside{z-index:1}
.duel .dside::before{content:'';position:absolute;left:50%;bottom:70px;width:82%;height:24px;translate:-50% 0;border-radius:50%;z-index:-1;pointer-events:none;
 background:radial-gradient(ellipse at 50% 50%,rgba(10,4,0,.75),rgba(10,4,0,.38) 50%,transparent 72%)}
.duel:not(.fig) .dside::before{bottom:46px}
.duel .dside b{color:#fff3d6;text-shadow:0 1px 0 #2a1004,0 0 6px rgba(0,0,0,.8)}
.duel .dside small{color:#ffe7b0;text-shadow:0 1px 2px rgba(0,0,0,.85)}
.duel .hpb{border:1.5px solid #2a1206;box-shadow:0 0 0 1.5px rgba(255,210,120,.55),0 2px 4px rgba(0,0,0,.5)}
/* a blow: a white flash over the ring, a slash across the one hit */
.duel.shake::before{animation:qwFlash .32s ease-out}
@keyframes qwFlash{0%{box-shadow:inset 0 0 0 999px rgba(255,240,200,.32)}100%{box-shadow:inset 0 0 0 999px rgba(255,240,200,0)}}
.duel .dside.struck::after{content:'';position:absolute;left:50%;top:34%;width:120%;height:7px;translate:-50% 0;rotate:-28deg;z-index:4;pointer-events:none;border-radius:4px;
 background:linear-gradient(90deg,transparent,#fff 30%,#ffe08a 60%,transparent);box-shadow:0 0 12px rgba(255,220,140,.95);animation:qwSlash .36s ease-out forwards}
#dsB.struck::after{rotate:28deg}
@keyframes qwSlash{0%{opacity:0;transform:scaleX(.1)}35%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1.15) translateY(6px)}}
/* the finish: the winner in a burst of light */
.duel .dside.won .dav::before{content:'';position:absolute;left:50%;top:45%;width:240px;height:240px;translate:-50% -50%;z-index:-1;pointer-events:none;border-radius:50%;
 background:repeating-conic-gradient(rgba(255,226,140,.5) 0 8deg,transparent 8deg 24deg);-webkit-mask:radial-gradient(circle,#000 20%,transparent 68%);mask:radial-gradient(circle,#000 20%,transparent 68%);
 animation:qwRays 6s linear infinite,qwIn .5s ease-out}
@keyframes qwRays{to{transform:rotate(360deg)}}
@keyframes qwIn{from{opacity:0;scale:.4}}
.duel .dhit{font-size:30px!important}
.dlog{display:table;margin:10px auto!important;padding:6px 18px;border-radius:999px;background:linear-gradient(180deg,#5a2e0e,#2e1606);color:#ffe7b0;
 box-shadow:inset 0 0 0 1.5px rgba(255,210,120,.55),0 3px 8px rgba(0,0,0,.3);font:400 17px/1.2 var(--ff-display,'Lilita One'),sans-serif!important;letter-spacing:.3px}
/* the sparring champions in the lobby: their figure on the sand */
.ar2-opp.npc .ar2-of{background:radial-gradient(ellipse 80% 30% at 50% 92%,rgba(60,30,8,.45),transparent 70%),linear-gradient(180deg,#e9c88e,#b98a4c)!important}

/* --- the Arena result --- */
.qw-res{text-align:center;padding-top:2px}
.qw-res .qw-ban{position:relative;margin:-6px auto 0;width:min(92%,340px);aspect-ratio:600/302}
.qw-res.lose .qw-ban{aspect-ratio:600/289}
.qw-res .qw-ban::before{content:'';position:absolute;inset:-10% -4%;z-index:0;border-radius:50%;pointer-events:none;
 background:radial-gradient(ellipse at 50% 55%,rgba(255,214,110,.55),transparent 65%)}
.qw-res.lose .qw-ban::before{background:radial-gradient(ellipse at 50% 55%,rgba(60,70,90,.32),transparent 65%)}
.qw-res .qw-bimg{position:relative;z-index:1;width:100%;height:auto;display:block;animation:qwBan .6s cubic-bezier(.2,1.5,.4,1) both}
.qw-res.lose .qw-bimg{animation:qwBanL .7s cubic-bezier(.3,1.3,.5,1) both}
@keyframes qwBan{0%{opacity:0;transform:scale(1.6) rotate(-4deg)}60%{opacity:1}100%{transform:none}}
@keyframes qwBanL{0%{opacity:0;transform:translateY(-30px)}70%{opacity:1;transform:translateY(4px) rotate(1deg)}100%{transform:none}}
.qw-res .qw-rh{margin:2px 0 0!important;justify-content:center;font:400 22px/1.15 var(--ff-display,'Lilita One'),sans-serif!important;color:#7a4a08!important}
.qw-res.lose .qw-rh{color:#4a4f5c!important}
.qw-res .qw-rp{margin:4px 0 6px;font-size:15px}
.qw-rts{display:flex;justify-content:center;gap:8px;margin:10px auto 14px;flex-wrap:wrap}
.qw-rt{flex:1 1 0;min-width:90px;max-width:120px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 6px 7px;border-radius:14px;
 background:linear-gradient(180deg,#fff8e4,#f0d9a6);box-shadow:inset 0 0 0 1.5px #c99a3e,0 3px 0 #a8762a,0 5px 10px rgba(0,0,0,.15);animation:qwTile .45s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(.35s + var(--i)*.12s)}
.qw-rt .qw-ri{font-size:28px;line-height:1;height:30px}
.qw-rt b{font:400 20px/1.1 var(--ff-display,'Lilita One'),sans-serif;color:#2f7a14}
.qw-rt.down b{color:#a3291c}
.qw-rt small{font-size:12px!important;color:#6b4a22!important;font-weight:800}
@keyframes qwTile{from{opacity:0;transform:translateY(12px) scale(.7)}}

/* --- the Wheel of Fortune --- */
.qw-wheel{position:relative;width:min(84vw,330px);margin:6px auto 0;padding-bottom:22%}
.qw-wheel .qw-wstand{position:absolute;left:50%;bottom:0;width:78%;translate:-50% 0;z-index:0;filter:drop-shadow(0 6px 8px rgba(0,0,0,.3))}
.qw-disc{position:relative;z-index:1;width:100%;aspect-ratio:1;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
.qw-disc .qw-wsvg{position:absolute;left:50%;top:50%;width:66.6%!important;height:66.6%!important;translate:-50% -50%;margin:0!important;filter:none!important;overflow:visible}
.qw-wsvg .qw-sep{stroke:#ffe08a;stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 1px #5a3410)}
.qw-wsvg .qw-wl{transform-box:fill-box;transform-origin:center}
.qw-wsvg text{font-family:var(--ff-display,'Lilita One'),sans-serif;font-weight:400;letter-spacing:.3px}
.qw-disc .qw-wrim{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.qw-disc .qw-whub{position:absolute;left:50%;top:50%;width:19%;translate:-50% -50%;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
.qw-wheel .qw-wptr{position:absolute;left:50%;top:-5%;width:12%;translate:-50% 0;z-index:2;transform-origin:50% 12%;filter:drop-shadow(0 4px 4px rgba(0,0,0,.45))}
.qw-wheel.spin .qw-wptr{animation:qwTick .16s ease-in-out 24 alternate}
@keyframes qwTick{from{transform:rotate(-7deg)}to{transform:rotate(5deg)}}

/* --- medals of honour --- */
.medal2.qw-md .ring img{width:84%;height:84%}
.medal2.qw-md.locked .ring img{filter:grayscale(1) brightness(1.05) contrast(.9);opacity:.6}
.medal2.qw-md:not(.locked) .ring img{filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}

/* --- achievements --- */
.ach>div.qw-a{display:flex!important;flex-direction:column;gap:4px;text-align:left}
.ach .qw-ah{display:flex;align-items:center;gap:8px;min-width:0}
.ach .qw-ah b{min-width:0;margin:0!important}
.ach .qw-ae{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;position:relative;
 background:radial-gradient(circle at 40% 35%,#fff6d8,#e2c48a 70%,#b98a4c);box-shadow:inset 0 0 0 2px #b8862e,0 2px 4px rgba(0,0,0,.25)}
.ach .qw-aimg{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.ach>div:not(.got) .qw-ae{background:radial-gradient(circle at 40% 35%,#e8e2d6,#b9b1a2 70%,#8d8578);box-shadow:inset 0 0 0 2px #8d8578}
.ach>div:not(.got) .qw-aimg{filter:grayscale(1) brightness(.95);opacity:.55}
.ach>div:not(.got) .qw-ae::after{content:'';position:absolute;right:-2px;bottom:-2px;width:16px;height:16px;border-radius:50%;background:#6b6258 radial-gradient(circle at 50% 62%,#fff 0 2.2px,transparent 2.6px);box-shadow:0 0 0 2px #fff8e6}
.ach .qw-at{display:block;min-width:0;background:none!important;padding:0!important;opacity:1!important;box-shadow:none!important;line-height:1.3}

/* --- medals of honour: the grid was washed out by the older '.medals div' rule (opacity .55 twice) --- */
.card.medals .mgrid{opacity:1!important;background:rgba(255,248,230,.95)!important;padding:10px 6px!important}
.card.medals .mcell{opacity:1!important;background:none!important}
.card.medals .mcell .qw-md{--px:50px!important;margin-bottom:2px}
.card.medals .mcell .bar{opacity:1!important;padding:0!important;height:5px!important;border-radius:3px!important;background:#e3d2ad!important;margin:4px 6px 2px!important}
.card.medals .mcell b{color:#3a2208}
.card.medals .mcell:has(.medal2.locked) b{color:#6b5a44}

/* --- the hero's training plan: a chest for each rank --- */
.hplan .qw-hp .qw-rk{position:relative;width:54px;height:50px;flex:none;display:grid;place-items:center;font-size:0}
.hplan .qw-rkimg{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.3))}
.hplan .qw-hp.locked .qw-rkimg{filter:grayscale(.85) brightness(.9);opacity:.6}
.hplan .qw-hp.ready .qw-rkimg{animation:qwBob 1.4s ease-in-out infinite alternate;filter:drop-shadow(0 0 8px rgba(255,210,80,.9)) drop-shadow(0 3px 3px rgba(0,0,0,.3))}
@keyframes qwBob{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-3px) rotate(2deg)}}
.hplan .qw-rks{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:900 12px/1 sans-serif;font-style:normal;color:#fff;background:#3fa04a;box-shadow:0 0 0 2px #fff8e6}
.hplan .qw-rks.lk{background:#6b6258;font-size:10px}
.hplan .qw-hp.got{opacity:.75}

/* --- quests: an icon for the kind of quest --- */
.qrow .qi:has(.qw-qi),.spc16cur .qi:has(.qw-qi){width:40px;height:40px;display:grid;place-items:center}
.qw-qi{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}

/* --- daily gifts: all seven days, day 7 the big one --- */
.gifts:has(.qw-g){grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important}
.gifts .qw-g{position:relative;padding:6px 3px 7px!important;border-radius:14px!important;border:0!important;gap:0!important;align-items:center;min-width:0;
 background:linear-gradient(180deg,#fff8e6,#f1ddb0);box-shadow:inset 0 0 0 1.5px #d6b06a,0 2px 0 #b98a4c}
.gifts .qw-g small{font-size:12px!important;line-height:1.15;color:#6b4a22;font-weight:800;max-width:100%;overflow-wrap:anywhere}
.gifts .qw-g .qw-gd{font:400 13px/1.1 var(--ff-display,'Lilita One'),sans-serif;color:#7a4a08;letter-spacing:.3px}
.gifts .qw-gi{display:grid;place-items:center;height:54px;font-size:30px}
.gifts .qw-gimg{max-width:100%;width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.28))}
.gifts .qw-g.now{background:linear-gradient(180deg,#fff3b8,#f3c64c);box-shadow:inset 0 0 0 2px #b8860b,0 0 0 2px #ffe58a,0 0 14px rgba(255,200,60,.8)}
.gifts .qw-g.now .qw-gimg{animation:qwBob 1.2s ease-in-out infinite alternate}
.gifts .qw-g.done{background:linear-gradient(180deg,#eef3e2,#cfdcb4);box-shadow:inset 0 0 0 1.5px #8aa860}
.gifts .qw-g.done .qw-gimg{filter:grayscale(.6);opacity:.55}
.gifts .qw-gok{position:absolute;right:4px;top:4px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:900 12px/1 sans-serif;font-style:normal;color:#fff;background:#3fa04a;box-shadow:0 0 0 2px #fff8e6}
.gifts .qw-g.d7{grid-column:span 2;flex-direction:row!important;justify-content:center;gap:6px!important;padding:6px 8px!important;
 background:radial-gradient(ellipse at 30% 50%,rgba(255,200,90,.55),transparent 60%),linear-gradient(135deg,#5a2a8a,#2a124a);box-shadow:inset 0 0 0 2px #e0b43c,0 2px 0 #7a5010,0 0 12px rgba(160,90,255,.45)}
.gifts .qw-g.d7 .qw-gi{height:76px;flex:none;order:-1}
.gifts .qw-g.d7 .qw-gimg{width:84px;height:84px;filter:drop-shadow(0 0 10px rgba(255,190,80,.75))}
.gifts .qw-g.d7 small{color:#ffe7b0;text-align:left}
.gifts .qw-g.d7 .qw-gd{color:#ffd36a;font-size:15px}
.gifts .qw-g.d7 .qw-gn{font:400 15px/1.1 var(--ff-display,'Lilita One'),sans-serif;color:#fff}
.gifts .qw-g.d7 .qw-gx{position:absolute;right:6px;top:6px;padding:2px 7px;border-radius:999px;font:400 10px/1.3 var(--ff-display,'Lilita One'),sans-serif;font-style:normal;letter-spacing:.6px;text-transform:uppercase;color:#3a1f06;background:linear-gradient(180deg,#fff2a8,#e0a522)}
.gifts .qw-g.d7 .qw-gtx{display:flex;flex-direction:column;gap:2px;min-width:0}
.gifts .qw-g.d7.now{box-shadow:inset 0 0 0 2px #ffe58a,0 0 0 2px #ffe58a,0 0 18px rgba(255,200,60,.9)}

/* --- the War Chest --- */
.chestbox .chestic.qw-wc{height:150px;display:grid;place-items:center;margin-top:-4px;position:relative}
.chestbox .chestic.qw-wc::before{content:'';position:absolute;left:50%;top:52%;width:200px;height:200px;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,206,110,.55),transparent 66%);z-index:0}
.chestbox .qw-wcimg{position:relative;z-index:1;width:146px;height:146px;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.35));animation:qwBob 1.6s ease-in-out infinite alternate}
.chestbar.qw-cb{gap:8px;counter-reset:qwc}
.chestbar.qw-cb i{width:40px!important;height:40px!important;border-radius:50%!important;position:relative;background:radial-gradient(circle at 50% 40%,#5a3c1c,#2a1808)!important;border:0!important;
 box-shadow:inset 0 3px 6px rgba(0,0,0,.6),0 0 0 3px #c99a3e,0 0 0 4.5px #6b4206!important}
.chestbar.qw-cb i::after{counter-increment:qwc;content:counter(qwc);position:absolute;inset:0;display:grid;place-items:center;font:400 17px/1 var(--ff-display,'Lilita One'),sans-serif;font-style:normal;color:#c99a3e;opacity:.7}
.chestbar.qw-cb i.on{background:radial-gradient(circle at 40% 35%,#fff3a0,#f3c64c 45%,#c98c1a)!important;box-shadow:inset 0 -2px 4px rgba(120,60,0,.5),0 0 0 3px #fff1b8,0 0 0 4.5px #b8860b,0 0 12px rgba(255,200,60,.9)!important}
.chestbar.qw-cb i.on::after{content:'✔';color:#6b3a04;opacity:1}
.chestbox .qw-wci{display:flex;align-items:center;gap:10px;text-align:left}
.chestbox .qw-wcsm{flex:none;width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.3))}

@media (max-width:360px){.qw-rt{min-width:80px;padding:7px 4px}.gifts .qw-gimg{width:48px;height:48px}.gifts .qw-gi{height:48px}.gifts .qw-g small{font-size:11px!important}.chestbar.qw-cb i{width:34px!important;height:34px!important}}
@media (prefers-reduced-motion:reduce){.duel.shake::before,.duel .dside.struck::after,.duel .dside.won .dav::before,.qw-res .qw-bimg,.qw-rt,.qw-wheel.spin .qw-wptr,.hplan .qw-hp.ready .qw-rkimg,.gifts .qw-g.now .qw-gimg,.chestbox .qw-wcimg{animation:none!important}}


/* 39-045 art quick wins */
.pack .qwa-pack{display:block;width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
.pack .qwa-p-m{width:66px;height:66px}.pack .qwa-p-l{width:74px;height:74px}.pack .qwa-p-xl{width:84px;height:84px;filter:drop-shadow(0 0 10px rgba(255,200,90,.55)) drop-shadow(0 3px 4px rgba(0,0,0,.45))}
.shd19i.qwa-shp{width:58px;height:58px}.shd19i.qwa-shp.s1{width:64px;height:64px}.shd19i.qwa-shp.s2{width:72px;height:72px}
.ar-pimg img.ar-pack-art{width:58px;height:52px;rotate:0deg;translate:-50% 0}
.ar-pack.p1 .ar-pimg img.ar-pack-art{width:62px;height:56px}.ar-pack.p2 .ar-pimg img.ar-pack-art{width:70px;height:60px}
.qwa-lg{display:block;object-fit:contain}
.lgbig .qwa-lg{width:72px;height:72px;filter:drop-shadow(0 0 10px var(--lc)) drop-shadow(0 3px 4px rgba(0,0,0,.5))}.lgbig:has(.qwa-lg){filter:none}
.lgi:has(.qwa-lg){width:44px}.lgi .qwa-lg{width:44px;height:44px;margin:-4px 0;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.lgchip .qwa-lg{width:20px;height:20px}#top .lgchip:has(.qwa-lg){background:rgba(20,10,2,.65)}
.dpad .ico.qwa-dp{width:20px;height:20px;display:block}.dpad .qwa-dp svg{width:100%;height:100%}
.qwa-dp-up{rotate:-90deg}.qwa-dp-dn{rotate:90deg}.qwa-dp-lt{rotate:180deg}
.am-letter.qwa-rsl{padding-top:0}
.qwa-rs{position:relative;margin:0 0 40px;aspect-ratio:780/280;border-radius:16px;border:2px solid #d9a24c;box-shadow:inset 0 0 0 1px rgba(255,235,180,.35),0 8px 18px rgba(0,0,0,.4);background:#2a1a0c}
.qwa-rs .qwa-rsi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:14px}
.qwa-rs::after{content:'';position:absolute;inset:0;border-radius:14px;background:linear-gradient(180deg,rgba(10,5,2,.35),transparent 38%,transparent 62%,rgba(20,10,3,.55));pointer-events:none}
.qwa-rs>b{position:absolute;left:12px;top:8px;z-index:1;font:700 21px 'Cinzel',serif;letter-spacing:.06em;text-transform:uppercase;color:#ffe9b0;text-shadow:0 2px 0 #3a1d06,0 0 10px rgba(0,0,0,.7)}
.qwa-rs-loss>b{color:#ffcfc4}.qwa-rs-scout>b{color:#d9ecff}.qwa-rs-held>b{color:#e6f0ff}
.qwa-rs>.am-lseal{position:absolute!important;left:50%;top:auto!important;bottom:-34px;width:68px;height:68px;margin-left:-34px;z-index:2;filter:drop-shadow(0 4px 5px rgba(0,0,0,.45));animation:amStamp .5s cubic-bezier(.3,1.6,.5,1) var(--amt,0ms) both}
@media (prefers-reduced-motion:reduce){.qwa-rs>.am-lseal{animation:none!important}}


/* 39-048: the map fills the screen, with a floating painted HUD */
#view:has(>.mh48){padding:0!important;overflow:hidden!important;display:flex;flex-direction:column}
.mh48{flex:1;min-height:0;display:flex;flex-direction:column}
@media (max-width:600px){.mh48{margin-bottom:calc(62px + max(6px,var(--sab,0px)))}}
.mh48>.sgpill{position:relative;z-index:2;margin:6px auto 4px;flex:none}
.mh48>.fcbox{flex:none;margin:6px 8px 4px;padding:5px 10px;font-size:12px;line-height:1.3;border-radius:10px}
.mh48>#mapbox:has(#wmc){flex:1;min-height:0;max-width:none;width:100%!important;margin:0;border:0;border-radius:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);display:block!important}
.mh48>#mapbox:has(#wmc)::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 10px 14px -10px rgba(20,8,0,.7),inset 0 -10px 14px -10px rgba(20,8,0,.55)}
.mh48 #wmc{height:100%!important;border-radius:0}
.mh48 .mh48-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0}
.mh48 .mh48-i{display:inline-block;width:16px;height:16px;vertical-align:-3px;flex:none}
.mh48 .mh48-i svg{width:100%;height:100%;display:block}
/* the plaque */
.mh48 .mh48-plq{position:absolute;left:6px;top:6px;z-index:8;width:min(226px,60%);aspect-ratio:895/239;margin:0;display:flex;align-items:center;justify-content:center;
 background:url(/a/mh48_plaque.2b007b80.webp) center/100% 100% no-repeat;cursor:pointer;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mh48 .mh48-plq:active{transform:translateY(1px)}
.mh48 .mh48-plq:focus-visible{outline:2px solid #ffe08a;outline-offset:2px;border-radius:10px}
.mh48 .mh48-plq small{display:flex;flex-direction:column;align-items:center;justify-content:center;width:62%;line-height:1.1;color:#fff3d2!important;text-align:center;font-size:12px;overflow:hidden}
.mh48 .mh48-r{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.mh48 .mh48-r b.regn{color:#ffd76a!important;font-weight:900;text-shadow:0 1px 0 #000}
.mh48 .mh48-r .ico{width:13px!important;height:13px!important;vertical-align:-2px}
.mh48 .mh48-c{display:flex;align-items:center;gap:3px;white-space:nowrap;font-weight:800;font-variant-numeric:tabular-nums;color:#f6e6c0;text-shadow:0 1px 0 #000;font-size:11.5px}
.mh48 .mh48-c i{font-style:normal;opacity:.6;margin:0 1px}
.mh48 .mh48-c .mh48-i{width:12px;height:12px;vertical-align:0;opacity:.85}
.mh48 .mh48-c b{color:#fff;font-weight:800}
/* the go-to sheet */
.mh48 .mh48-go{position:absolute;left:8px;top:calc(6px + min(226px,60%) * 239 / 895 + 6px);z-index:9;width:min(260px,calc(100% - 70px));box-sizing:border-box;padding:10px 10px 10px;border-radius:14px;
 background:linear-gradient(180deg,rgba(74,44,18,.97),rgba(44,24,8,.97));border:2px solid #d9a845;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 8px 18px rgba(0,0,0,.45);color:#fff1cf;animation:mh48pop .16s ease-out}
.mh48 .mh48-go[hidden]{display:none}
.mh48 .mh48-gt{display:flex;align-items:center;gap:5px;font-size:14px;margin:0 0 8px;color:#ffd76a}
.mh48 .mh48-gr{display:flex;align-items:center;gap:6px}
.mh48 .mh48-gr label{color:#f1d9a6!important;font-weight:900;font-size:14px}
.mh48 .mh48-gr input{flex:1;min-width:0;width:0;height:38px;padding:0 6px;font-size:16px;text-align:center;border-radius:9px;border:2px solid #8a5a2a;background:#fff6df;color:#3a2206;font-weight:800}
.mh48 .mh48-gob{flex:none;min-width:50px;height:38px;padding:0 12px}
.mh48 .mh48-gx{position:absolute;right:6px;top:4px;width:28px;height:28px;border:0;background:none;color:#f1d9a6;font-size:22px;line-height:1;cursor:pointer}
@keyframes mh48pop{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
/* the right-hand column: compass, zoom, distances, nearest site */
.mh48 #mapbox .rose{left:auto;right:8px;top:6px;width:46px;height:46px}
.mh48 #mapbox .mzoom{right:6px;top:58px;gap:6px}
.mh48 .mh48-rt{position:absolute;right:6px;top:156px;z-index:5;display:flex;flex-direction:column;gap:6px}
.mh48 #mapbox .mzoom button,.mh48 .mh48-rb{position:relative;width:44px;height:44px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;color:#ffe9b8;font-size:22px;font-weight:900;line-height:1;cursor:pointer;
 background:url(/a/mh48_ring.8fd6aeec.webp) center/100% 100% no-repeat;box-shadow:0 3px 5px rgba(0,0,0,.4);text-shadow:0 1px 0 #000;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.mh48 .mh48-rb>img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mh48 .mh48-rb .mh48-i{position:relative;width:19px;height:19px;margin-top:-6px}
.mh48 .mh48-rb em{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-style:normal;font-size:8.5px;font-weight:900;letter-spacing:.02em;color:#ffe9b8;text-transform:uppercase}
.mh48 .mh48-rb.on{box-shadow:0 0 0 2px #ffd34a,0 0 10px 2px rgba(255,211,74,.75),0 3px 5px rgba(0,0,0,.4)}
.mh48 #mapbox .mzoom button:active,.mh48 .mh48-rb:active{transform:scale(.93)}
/* home in the middle of a smaller arrow pad, bottom right */
.mh48 #mapbox .dpad{top:auto;right:6px;bottom:10px;grid-template-columns:28px 54px 28px;grid-template-rows:28px 54px 28px;gap:2px}
.mh48 #mapbox .dpad button{border-width:2px;border-radius:9px;background:rgba(48,28,10,.72)}
.mh48 #mapbox .dpad .ico.qwa-dp{width:16px;height:16px}
.mh48 #mapbox .dpad .lt,.mh48 #mapbox .dpad .rt{height:40px;align-self:center}
.mh48 #mapbox .dpad .up,.mh48 #mapbox .dpad .dn{width:40px;justify-self:center}
.mh48 #mapbox .dpad .ct{border:0;background:none;box-shadow:none;padding:0;border-radius:50%;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.mh48 #mapbox .dpad .ct img{width:58px;height:58px;display:block}
.mh48 #mapbox .dpad .ct:active{transform:scale(.94)}
/* the legend chip, bottom left beside the chat */
.mh48 .mh48-leg{position:absolute;left:62px;bottom:12px;z-index:7;max-width:calc(100% - 170px)}
.mh48 .mh48-leg summary{list-style:none;display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px 0 9px;border-radius:17px;cursor:pointer;color:#fff1cf;font-weight:800;font-size:13px;
 background:linear-gradient(180deg,rgba(78,46,18,.92),rgba(46,26,8,.92));border:2px solid #c99a3e;box-shadow:0 3px 5px rgba(0,0,0,.4);white-space:nowrap}
.mh48 .mh48-leg summary::-webkit-details-marker{display:none}
.mh48 .mh48-leg[open] summary{border-color:#ffd34a}
.mh48 .mh48-lp{position:absolute;left:-54px;bottom:42px;width:min(300px,calc(100vw - 24px));box-sizing:border-box;padding:10px;border-radius:14px;background:linear-gradient(180deg,rgba(255,246,222,.97),rgba(240,222,182,.97));border:2px solid #b07c34;box-shadow:0 8px 18px rgba(0,0,0,.4);animation:mh48pop .16s ease-out}
.mh48 .mh48-lp .legend{margin:0;justify-content:flex-start;gap:4px 10px;color:#4a2a0c;font-weight:700}
.mh48 .mh48-lp .legend span{min-width:calc(50% - 6px)}
.mh48 .mh48-lp p{margin:8px 0 0!important;font-size:12px!important;color:#6b4a2b!important;text-align:left!important}
.mh48 #mapbox .mpanel{top:calc(6px + min(226px,60%) * 239 / 895 + 6px)!important}
@media (min-width:700px){.mh48 #wmc{height:100%!important}}
@media (prefers-reduced-motion:reduce){.mh48 .mh48-go,.mh48 .mh48-lp{animation:none}.mh48 .mh48-plq:active,.mh48 #mapbox .mzoom button:active,.mh48 .mh48-rb:active,.mh48 #mapbox .dpad .ct:active{transform:none}}


/* 39-051 troop tiers: a locked tier that brings new armour is only lightly dimmed, so the reward is visible */
.look .lk .lock .art.au.tt51{filter:grayscale(.3) brightness(.92);opacity:.85}
/* the unit sheet's gear strip: bigger tokens now that the tiers really change the look */
.look .lk svg.art.au{width:60px;height:60px}


/* ===== 39-052 UI polish part 2: reward pop-ups, game toasts, compact hero bubble, market pickers, row pictures ===== */
/* --- reward pop-ups (Star Bonus, medals): no dimming, taps go through to the game --- */
#banner.rw52{background:transparent!important;pointer-events:none;place-items:start center!important;padding:calc(var(--sat,0px) + 128px) 16px 16px!important}
body[data-tab="map"] #banner.rw52{padding-top:calc(var(--sat,0px) + 176px)!important}
#banner.rw52 .bx{pointer-events:auto;position:relative;width:min(318px,100%);max-width:318px!important;padding:36px 14px 14px!important;overflow:visible!important;border-radius:18px!important;
 background:radial-gradient(ellipse at 50% 18%,#fffbe6 0%,#f6e2ad 46%,#e3c07a 100%)!important;border:3px solid #b8862e!important;
 box-shadow:0 0 0 2px #fbe7b0 inset,0 0 0 4px #5a3818,0 0 0 6px #d9a441,0 0 46px rgba(255,214,110,.55),0 22px 44px rgba(0,0,0,.5)!important;animation:rw52in .42s cubic-bezier(.2,1.4,.4,1) both}
#banner.rw52 .bx::before,#banner.rw52 .bx::after{display:none!important}
@keyframes rw52in{0%{transform:translateY(-18px) scale(.82);opacity:0}100%{transform:none;opacity:1}}
/* the painted ribbon header */
#banner.rw52 .rw52-rib{position:absolute;left:-16px;right:-16px;top:-24px;height:50px;display:grid;place-items:center;z-index:3;pointer-events:none;filter:drop-shadow(0 4px 3px rgba(60,20,0,.45))}
/* the ribbon's tails: a darker fold behind each end, cut as a swallowtail */
#banner.rw52 .rw52-rib::before{content:'';position:absolute;left:0;right:0;top:12px;bottom:-6px;
 background:linear-gradient(90deg,#6e0c06 0,#9c1a0e 9%,#5a0904 13%,transparent 13%,transparent 87%,#5a0904 87%,#9c1a0e 91%,#6e0c06 100%);
 clip-path:polygon(0 0,13% 0,13% 100%,0 100%,6% 50%,100% 0,100% 0,87% 0,87% 100%,100% 100%,94% 50%,100% 0)}
/* the band itself: crimson silk between two gold braids */
#banner.rw52 .rw52-rib::after{content:'';position:absolute;left:9%;right:9%;top:0;bottom:6px;border-radius:4px;
 background:linear-gradient(180deg,rgba(255,255,255,.22) 0,rgba(255,255,255,0) 40%),linear-gradient(180deg,#e4513a 0%,#c42c1a 45%,#8e170b 100%);
 box-shadow:inset 0 3px 0 #ffd876,inset 0 5px 0 #a8701c,inset 0 -3px 0 #ffd876,inset 0 -5px 0 #a8701c,0 0 0 1.5px #4a1004}
#banner.rw52 .rw52-rib span{position:relative;z-index:1;display:block;max-width:76%;margin-top:-6px;font:400 20px/1 var(--ff-display);letter-spacing:.6px;color:#fff3cf;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 text-shadow:0 2px 0 #5a0e06,1px 1px 0 #5a0e06,-1px -1px 0 #5a0e06,1px -1px 0 #5a0e06,-1px 1px 0 #5a0e06}
/* the burst of light behind the prize */
#banner.rw52 .rw52-burst{position:absolute;left:50%;top:70px;width:250px;height:250px;margin:-125px 0 0 -125px;border-radius:50%;z-index:0;pointer-events:none;
 background:radial-gradient(circle,rgba(255,250,215,.95) 0,rgba(255,226,130,.55) 22%,rgba(255,210,90,0) 52%),repeating-conic-gradient(from 0deg,rgba(255,232,150,.7) 0 9deg,rgba(255,232,150,0) 9deg 22.5deg);
 -webkit-mask:radial-gradient(circle,#000 30%,transparent 68%);mask:radial-gradient(circle,#000 30%,transparent 68%);animation:rw52spin 16s linear infinite}
@keyframes rw52spin{to{transform:rotate(360deg)}}
#banner.rw52 #bnI{position:relative;z-index:1;font-size:64px!important;margin-top:2px;filter:drop-shadow(0 4px 6px rgba(90,50,0,.45))}
#banner.rw52 #bnT{position:relative;z-index:1;margin:4px 0 0!important;font-size:22px!important;line-height:1.15}
#banner.rw52 #bnX{position:relative;z-index:1;margin:2px 0 0!important;font-size:13.5px!important;line-height:1.3!important;color:#6a4210!important;font-weight:800}
/* one tile per reward */
#banner.rw52 .rw52-tiles{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:12px 0 2px}
#banner.rw52 .rw52-t{width:62px;padding:7px 2px 5px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:1px;
 background:radial-gradient(ellipse at 50% 30%,#6e4a22,#3a230c 75%);box-shadow:inset 0 0 0 2px #d9a441,inset 0 0 0 3.5px #4a2c0e,0 3px 0 #7a5418,0 5px 10px rgba(0,0,0,.3);animation:rw52tile .45s cubic-bezier(.2,1.6,.4,1) both}
#banner.rw52 .rw52-t:nth-child(2){animation-delay:.08s}#banner.rw52 .rw52-t:nth-child(3){animation-delay:.16s}#banner.rw52 .rw52-t:nth-child(4){animation-delay:.24s}#banner.rw52 .rw52-t:nth-child(5){animation-delay:.32s}
@keyframes rw52tile{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:1}}
#banner.rw52 .rw52-ti{display:grid;place-items:center;height:32px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
#banner.rw52 .rw52-ti .ico,#banner.rw52 .rw52-ti img{width:30px!important;height:30px!important}
#banner.rw52 .rw52-t b{font:400 14px/1.1 var(--ff-display);color:#ffe8a0;text-shadow:0 1.5px 0 #2a1504;max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#banner.rw52 .rw52-t small{font:800 9.5px/1.1 var(--ff-ui);color:#e8cf9a;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
#banner.rw52 .btns{position:relative;z-index:1;margin-top:10px!important}
#banner.rw52 .btns .btn{min-width:150px}
/* how long the pop-up stays */
#banner.rw52 .rw52-time{position:relative;z-index:1;display:block;height:4px;margin:10px 26px 0;border-radius:2px;background:linear-gradient(90deg,#c9861c,#ffe9a0);transform-origin:left center;animation:rw52time 6s linear forwards;opacity:.85}
@keyframes rw52time{to{transform:scaleX(0)}}
#banner.rw52-medal .rw52-t{width:70px}

/* --- toasts: parchment plates with a metal-rimmed icon --- */
#toasts#toasts .toast:not(#_p52){background:linear-gradient(180deg,#fffaea 0%,#f6e6bd 55%,#ead196 100%)!important;color:#3a2206!important;
 border:2px solid #b8862e!important;border-radius:13px!important;padding:5px 12px 5px 5px!important;gap:9px!important;min-height:44px;max-width:min(340px,calc(100vw - 24px))!important;width:auto!important;min-width:min(250px,calc(100vw - 24px));
 box-shadow:0 0 0 1.5px #5a3818,inset 0 1px 0 #fffdf4,inset 0 -2px 0 rgba(160,110,40,.25),0 6px 14px rgba(0,0,0,.38)!important;font:700 12.5px/1.3 var(--ff-ui)!important;animation:t52in .34s cubic-bezier(.2,1.35,.4,1) both}
#toasts#toasts .toast:not(#_p52) .ti{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:19px!important;line-height:1;overflow:hidden;
 background:radial-gradient(circle at 35% 30%,#7a5630,#2e1b08 72%);box-shadow:0 0 0 2px #d9a441,0 0 0 3.5px #5a3818,inset 0 2px 3px rgba(255,230,170,.25)}
#toasts#toasts .toast:not(#_p52) .ti img,#toasts#toasts .toast:not(#_p52) .ti .ico{max-width:26px!important;max-height:26px!important}
#toasts#toasts .toast:not(#_p52) b{display:block;font:400 14px/1.15 var(--ff-display)!important;color:#5a2a08!important;text-shadow:0 1px 0 #fff6d8!important;letter-spacing:.2px}
#toasts#toasts .toast:not(#_p52)>div{min-width:0;color:#4a2e0c!important}
#toasts#toasts .toast.good:not(#_p52){border-left-width:2px!important;border-color:#b8862e!important}
#toasts#toasts .toast.good:not(#_p52) .ti{box-shadow:0 0 0 2px #6fd067,0 0 0 3.5px #1f5a1a,inset 0 2px 3px rgba(255,230,170,.25)}
#toasts#toasts .toast.red:not(#_p52){border-left-width:2px!important;border-color:#c0402a!important;background:linear-gradient(180deg,#fff1e8 0%,#f7d6c4 60%,#eab9a0 100%)!important}
#toasts#toasts .toast.red:not(#_p52) .ti{box-shadow:0 0 0 2px #ff7a5a,0 0 0 3.5px #6a1408,inset 0 2px 3px rgba(255,200,170,.25);background:radial-gradient(circle at 35% 30%,#a8402a,#4a0e04 72%)}
#toasts#toasts .toast.red:not(#_p52) b{color:#8a1a08!important}
#toasts#toasts .toast.out:not(#_p52){opacity:0!important;transform:translateY(8px) scale(.97)!important;transition:opacity .3s,transform .3s}
@keyframes t52in{0%{transform:translateY(16px) scale(.94);opacity:0}100%{transform:none;opacity:1}}
@keyframes t52down{0%{transform:translateY(-16px) scale(.94);opacity:0}100%{transform:none;opacity:1}}
/* on the map: centred right under the top bar (the dock measures it) */
html.dock body[data-tab="map"] #toasts#toasts{top:var(--dk-toast-map,calc(var(--sat,0px) + 64px))!important;bottom:auto!important;left:0!important;right:0!important;max-width:none!important;align-items:center!important;flex-direction:column!important}
html.dock body[data-tab="map"] #toasts#toasts .toast:not(#_p52){animation-name:t52down}
html.dock body[data-tab="map"] #toasts#toasts .toast.out:not(#_p52){transform:translateY(-8px) scale(.97)!important}

/* --- the hero's voice bubble: compact, at the left, above the town buttons (the dock lifts it) --- */
html.dock body:not(:has(#sheet.on)) #herald#herald{left:8px!important;right:auto!important;margin:0!important;max-width:min(292px,calc(100vw - 16px))!important;gap:7px!important;transform:translateX(-14px) scale(.96)}
html.dock body:not(:has(#sheet.on)) #herald#herald.on{transform:none}
/* on a screen wider than the game (#app is a centred column, 760 px, 1200 px from 1024 px up) the bubble stays at
   the column's left edge, not at the window's: on a wide desktop it floated over the painted margin, outside the game */
html.dock body:not(:has(#sheet.on)) #herald#herald:not(#_w){left:max(8px,calc((100vw - 760px)/2 + 8px))!important}
@media (min-width:1024px){html.dock body:not(:has(#sheet.on)) #herald#herald:not(#_w){left:max(8px,calc((100vw - 1200px)/2 + 8px))!important}}
html.fsmode.dock body:not(:has(#sheet.on)) #herald#herald:not(#_w){left:8px!important}
#herald#herald .hrf{width:40px!important;height:40px!important;box-shadow:0 0 0 2px #e0b43c,0 0 0 3.5px #3c2410,0 3px 8px rgba(0,0,0,.4)!important}
#herald#herald .hrb{padding:4px 10px 5px!important;border-radius:12px!important;box-shadow:0 3px 10px rgba(0,0,0,.3)!important}
#herald#herald .hrb::before{left:-8px;margin-top:-6px;border-width:6px}
#herald#herald .hrb b{font-size:11px!important;line-height:1.15!important}
#herald#herald .hrb span{font-size:13px!important;line-height:1.25!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* --- market: resource chips instead of native drop-downs, painted header --- */
.mk52-sel{display:none!important}
.mk52{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;min-width:0}
.mk52[data-lab]::before{content:attr(data-lab);grid-column:1/-1;font:800 11px/1 var(--ff-ui);text-transform:uppercase;letter-spacing:.6px;color:#8a5a20;margin:2px 0 -1px 2px}
.mk52 .mk52-c:not(#_p52){appearance:none;-webkit-appearance:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:48px;margin:0;padding:5px 2px 4px;border-radius:10px;cursor:pointer;
 border:2px solid #c9a35e;background:linear-gradient(180deg,#fffaea,#f0ddb0);color:#6a4418;font:800 11.5px/1.1 var(--ff-ui);box-shadow:0 2px 0 #a7803e;transition:transform .12s,box-shadow .12s;-webkit-tap-highlight-color:transparent}
.mk52 .mk52-c.on:not(#_p52){border-color:#e2a22a;background:linear-gradient(180deg,#ffeeb0,#f4c44e);color:#3a2206;box-shadow:inset 0 0 0 2px #fff4c8,0 2px 0 #8a5a12,0 0 10px rgba(240,180,60,.65)}
.mk52 .mk52-c:not(#_p52):active{transform:translateY(2px);box-shadow:0 0 0 #a7803e}
.mk52 .mk52-i{display:grid;place-items:center;height:22px}
.mk52 .mk52-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mk52.mk52-sm{display:inline-grid;grid-template-columns:repeat(4,auto);gap:4px;vertical-align:middle;margin-left:2px}
.mk52.mk52-sm .mk52-c:not(#_p52){min-height:0;padding:3px 6px;flex-direction:row}
.mk52.mk52-sm .mk52-n{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ofform:has(.mk52){grid-template-columns:minmax(0,1fr) 68px!important;row-gap:4px!important}
.ofform:has(.mk52)>label{grid-column:1/-1;margin-top:4px;font-weight:800}
.ofform:has(.mk52)>.mk52{grid-column:1}
.ofform:has(.mk52)>.nin{grid-column:2;width:100%!important;align-self:stretch;text-align:center;box-sizing:border-box}
.stepper:has(.mk52){display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px!important}
.stepper:has(.mk52)>.mk52{grid-column:1/-1}
.stepper:has(.mk52)>input{width:100%!important;min-width:0;box-sizing:border-box}
.stepper:has(.mk52)>.btn{min-width:96px}
.mk52-hero{position:relative;margin:-4px 0 12px;border-radius:16px;overflow:hidden;background:#3a230c;box-shadow:0 0 0 2px #5a3818,0 6px 14px rgba(0,0,0,.28)}
.mk52-scene{position:relative;height:118px;overflow:hidden;background:radial-gradient(ellipse 60% 70% at 72% 30%,rgba(255,236,170,.9),rgba(255,200,110,0) 60%),linear-gradient(180deg,#f5b867 0%,#f0c98a 40%,#c9d98a 62%,#7fa548 78%,#557a2c 100%)}
.mk52-sun{position:absolute;left:68%;top:8%;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle,#fffbe0 0,#ffe7a0 45%,rgba(255,220,130,0) 70%)}
.mk52-scene::before{content:'';position:absolute;left:-10%;right:-10%;top:38%;height:26%;background:radial-gradient(ellipse 30% 100% at 15% 100%,#8aa45a 0,#8aa45a 60%,transparent 61%),radial-gradient(ellipse 34% 100% at 60% 100%,#9bb46a 0,#9bb46a 60%,transparent 61%),radial-gradient(ellipse 30% 100% at 95% 100%,#86a056 0,#86a056 60%,transparent 61%);opacity:.9}
.mk52-scene img{position:absolute;width:auto;filter:drop-shadow(0 4px 4px rgba(40,20,0,.35))}
.mk52-scene .mk52-m{left:50%;height:112px;translate:-50% 0;bottom:-6px;z-index:2}
.mk52-scene .mk52-l{left:4%;height:84px;bottom:2px;z-index:1}
.mk52-scene .mk52-r{right:4%;height:84px;bottom:2px;z-index:1}
.mk52-hero::after{content:'';position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 2px #d9a441,inset 0 0 0 4px rgba(60,30,8,.6);pointer-events:none}
.mk52-hero .sh-h{position:relative;margin:0!important;padding:7px 14px 9px!important;background:linear-gradient(180deg,#6b4520,#3a230c);border-top:2px solid #d9a441;gap:8px}
.mk52-hero .sh-h .big{display:none}
.mk52-hero .sh-h h2{color:#fff3cf!important;font-size:22px!important;line-height:1.1}
.mk52-hero .sh-h small{color:#f6e3b8!important;font-weight:800}

/* --- resource sites and villages: a picture per row --- */
.th52{position:relative;flex:none;width:58px;height:50px;margin-right:6px;border-radius:12px;display:grid;place-items:center;
 background:radial-gradient(ellipse at 50% 72%,#a6c871 0,#6b8e3a 58%,#44611f 100%);box-shadow:inset 0 0 0 2px #c9a35e,0 0 0 1.5px #5a3818,0 3px 6px rgba(0,0,0,.25)}
.th52 img{width:62px;height:56px;object-fit:contain;margin-top:-10px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));pointer-events:none}
.th52-b{position:absolute;right:-6px;bottom:-6px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#7a5630,#2e1b08 72%);box-shadow:0 0 0 2px #d9a441,0 0 0 3px #5a3818}
.th52-b .ico{width:16px!important;height:16px!important}
.th52.th52-v{width:64px;height:54px}
.th52.th52-v img{width:70px;height:62px;margin-top:-12px}
.vrow52{align-items:center;gap:12px!important}

@media (prefers-reduced-motion:reduce){
 #banner.rw52 .bx,#banner.rw52 .rw52-burst,#banner.rw52 .rw52-t,#toasts#toasts .toast:not(#_p52){animation:none!important}
 #banner.rw52 .rw52-time{display:none}
 #herald#herald,#toasts#toasts .toast.out:not(#_p52){transition:none!important}
}


/* smooth UX 2 (39-054): the town holds still behind an open sheet (its SVG timeline is paused by animSync, 03-130) */
body.ux-sheet #view .vmap *{animation-play-state:paused!important}
/* long mail list: rows off screen are not styled, laid out or animated until they scroll near */
.mi.am-mi{content-visibility:auto;contain-intrinsic-size:auto 76px}


/* (39-057) the reward pop-up's title sits on a painted crimson-and-gold ribbon */
#banner.rw52 .rw52-rib{top:-31px;height:auto;aspect-ratio:720/129;background:url(/a/lp57_ribbon.b39c0f5d.webp) center/100% 100% no-repeat;filter:drop-shadow(0 4px 4px rgba(60,20,0,.45))}
#banner.rw52 .rw52-rib::before,#banner.rw52 .rw52-rib::after{display:none}
#banner.rw52 .rw52-rib span{max-width:62%;margin-top:-9px;font-size:19px}
/* (39-057) the Market header is one painted market square */
.mk52-scene.mk57{height:124px;background:#c9a46a url(/a/lp57_market.f93e2b13.webp) center 58%/cover no-repeat}
.mk52-scene.mk57::before{display:none}
.mk52-scene.mk57::after{content:'';position:absolute;left:0;right:0;bottom:0;height:22px;background:linear-gradient(transparent,rgba(58,35,12,.55))}


/* 39-058: a set's look on the wardrobe's Appearance needs the full set; a set owned in part shows locked */
.hs-looks.hs-dlooks .hs-look.dlock{border-style:dashed;border-color:color-mix(in srgb,var(--sc,#c99a3e) 45%,transparent);box-shadow:inset 0 0 18px rgba(0,0,0,.65)}
.hs-looks.hs-dlooks .hs-look.dlock .hs-lfig{filter:grayscale(.85) brightness(.5) drop-shadow(0 4px 4px rgba(0,0,0,.6))}
.hs-looks.hs-dlooks .hs-look.dlock small{opacity:.75}
.hs-dneed{font:800 9px/1.1 Nunito,sans-serif;font-style:normal;color:#e9d9b4;text-align:center;opacity:.85;margin-top:-2px}
.hs-dtag.full{background:rgba(46,120,40,.82)}
.hs-looks.hs-dlooks .hs-look.dlock .hs-dtag{max-width:calc(100% - 8px);display:flex;align-items:center;gap:2px}
.hs-look.dlock .hs-dtag .ico{width:11px;height:11px;flex:none}


/* ===== the hero turns on phones (fix of 39-026): a sideways swipe anywhere on the stage (turn.ts handles the
   touch itself; the sheet still scrolls up and down), ◀ ▶ buttons that turn them for a moment, up to 75°, and
   the doll's layers part a little as they turn (the banner behind, the weapon in front) ===== */
.hs-stage{touch-action:pan-y}
.hs-turning{cursor:grabbing}
.hs-doll>img.dz-b,.hs-doll>img.dz-f{transition:transform .9s cubic-bezier(.2,1.5,.4,1)}
.hs-doll>img.dz-b{transform:translateX(calc(var(--rt) * -11px)) scale(.985)}
.hs-doll>img.dz-f{transform:translateX(calc(var(--rt) * 13px)) scale(1.012)}
.hs-turning .hs-doll>img{transition:none}
.hs-peek .hs-turn,.hs-peek .hs-doll>img.dz-b,.hs-peek .hs-doll>img.dz-f,.hs-peek .hs-plinth{transition:transform .6s cubic-bezier(.3,.75,.35,1)}
.hs-peek .hs-ring{transition:transform .7s cubic-bezier(.3,.75,.35,1),opacity .4s;opacity:.85}
.hs-tbtn{position:absolute;bottom:134px;z-index:4;width:40px;height:40px;padding:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
 background:radial-gradient(circle at 50% 35%,rgba(70,48,24,.9),rgba(20,13,6,.86));border:2px solid #d9b25c;
 box-shadow:0 0 0 1px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,236,180,.35),0 3px 8px rgba(0,0,0,.5);-webkit-tap-highlight-color:transparent}
.hs-tbtn.l{left:19px}.hs-tbtn.r{right:19px}
.hs-tbtn i{width:11px;height:11px;border:solid #f5d98c;border-width:0 0 3.5px 3.5px;border-radius:1px;transform:translateX(2px) rotate(45deg);filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.hs-tbtn.r i{transform:translateX(-2px) rotate(-135deg)}
.hs-tbtn:active{transform:scale(.92);border-color:#fff0b8}
.hs-turnhint{bottom:144px}.hs-turnhint i{font-size:12px}
@media (max-width:370px){.hs-tbtn.l{left:12px}.hs-tbtn.r{right:12px}.hs-tbtn{width:36px;height:36px}}
@media (prefers-reduced-motion:reduce){
 .hs-doll>img.dz-b,.hs-doll>img.dz-f,.hs-peek .hs-turn,.hs-peek .hs-ring,.hs-peek .hs-plinth,.hs-peek .hs-doll>img{transition:none}
 .hs-tbtn:active{transform:none}}


/* reward fx (39-059): painted light, coins and crystals; transforms and opacity only */
.rfx{position:fixed;inset:0;pointer-events:none;z-index:125;overflow:hidden;contain:strict}
.rfx.rfx-top{z-index:126}
.rfx i{position:absolute;display:block;pointer-events:none;opacity:0;will-change:transform,opacity;background:no-repeat center/100% 100%}
.rfx .rfx-p{left:0;top:0}
.rfx .rfx-p i{position:absolute;inset:0;opacity:1;will-change:auto}
.rfx-flash{border-radius:50%;background:radial-gradient(circle,rgba(255,252,235,.95) 0,rgba(255,226,140,.7) 22%,rgba(255,190,70,.28) 48%,rgba(255,170,40,0) 70%)!important}
.rfx-rays{background-image:url(../a/rfx_rays.936357a0.webp)!important}
.rfx-ring{background-image:url(../a/rfx_ring.054f53f9.webp)!important}
.rfx-spark{background-image:url(../a/rfx_spark.8955f955.webp)!important;background-size:400% 100%!important}
.rfx-spark.f0{background-position:0 0!important}.rfx-spark.f1{background-position:33.333% 0!important}.rfx-spark.f2{background-position:66.667% 0!important}.rfx-spark.f3{background-position:100% 0!important}
.rfx-coin{background:url(../a/rfx_coin.e93f3324.webp) no-repeat 0 0/600% 100%!important;animation:rfxspin .42s steps(6) infinite}
@keyframes rfxspin{to{background-position:120% 0}}
.rfx-gem{background:url(../a/rfx_gems.3d0c576c.webp) no-repeat 0 0/400% 100%!important}
.rfx-gem.g1{background-position:33.333% 0!important}.rfx-gem.g2{background-position:66.667% 0!important}.rfx-gem.g3{background-position:100% 0!important}
.rfx-edge{background:radial-gradient(ellipse at 50% 50%,rgba(255,200,90,0) 45%,rgba(255,190,70,.32) 70%,rgba(255,165,40,.78) 100%)!important}
.rfx-rib{background:url(../a/rfx_ribbon.eab0047e.webp) no-repeat center/100% 100%,linear-gradient(180deg,#8a1424,#4a0812 70%,#360510) no-repeat 50% 32%/34% 49%!important}
.rfx-rib b{position:absolute;left:33.6%;right:33.7%;top:17.6%;bottom:35.9%;display:flex;align-items:center;justify-content:center;font:400 15px/1 'Alegreya SC',Georgia,serif;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#ffe9a8;white-space:nowrap;text-shadow:0 1px 0 #6b3a00,0 2px 3px rgba(0,0,0,.7),0 0 10px rgba(255,200,80,.6)}
@media (prefers-reduced-motion:reduce){.rfx-coin{animation:none}}


/* (39-062) Arena rewards: a prize on every win; a reel spins through the prize faces and lands on it */
.arw-chips,.arw-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin:4px 0 8px}
.arw-strip{margin:8px 0 2px}
.arw-chip{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:999px;font:800 12px/1.3 Nunito,sans-serif;color:#ffe6a6;background:linear-gradient(180deg,#3a2a16,#22180c);border:1.5px solid #c99a3e;white-space:nowrap}
.arw-chip.tier{border-color:var(--tc,#c99a3e);color:var(--tc,#ffe6a6);box-shadow:0 0 8px color-mix(in srgb,var(--tc,#c99a3e) 45%,transparent)}
.arw-chip.first{border-color:#ffcf4a;color:#fff1b8;background:linear-gradient(180deg,#7a4a08,#3a2306)}
.arw-chip.streak{border-color:#ff8a3a;color:#ffd0a8}
.arw-chip.up{border-color:#6fd06a;color:#c9ffc4}
.arw-chip.down{border-color:#8a8f99;color:#d5d9e0}
.arw-rev{margin:6px auto 12px;max-width:420px;text-align:center}
.arw-h{margin:2px 0 4px!important;justify-content:center;font-size:19px!important;color:#7a4a08!important}
.arw-win-wrap{position:relative;display:block;width:132px;margin:4px auto 0;padding:0;border:0;background:none;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.arw-reel{position:relative;width:132px;height:150px;overflow:hidden;border-radius:16px;border:3px solid #c99a3e;
 background:radial-gradient(ellipse at 50% 35%,#5a1414,#2a0a0a 75%);box-shadow:inset 0 0 18px rgba(0,0,0,.6),0 6px 14px rgba(0,0,0,.35)}
.arw-reel::before,.arw-reel::after{content:'';position:absolute;left:0;right:0;height:26px;z-index:2;pointer-events:none}
.arw-reel::before{top:0;background:linear-gradient(180deg,rgba(20,6,6,.85),transparent)}
.arw-reel::after{bottom:0;background:linear-gradient(0deg,rgba(20,6,6,.85),transparent)}
.arw-track{display:flex;flex-direction:column;animation:arwSpin var(--d,1700ms) cubic-bezier(.12,.75,.2,1) var(--el,0ms) both}
.arw-rev.landed .arw-track{animation:none;transform:translateY(calc(var(--n) * -150px))}
.arw-f{flex:0 0 150px;height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 6px;
 background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--rc,#f2c14e) 32%,#fff8e6),#f3e2bd 70%);box-shadow:inset 0 0 0 3px var(--rc,#c99a3e),inset 0 0 18px color-mix(in srgb,var(--rc,#f2c14e) 45%,transparent)}
.arw-ic{font-size:40px;line-height:1;height:52px;display:grid;place-items:center}
.arw-ic img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.arw-f b{font:400 22px/1.1 var(--ff-display,'Lilita One'),sans-serif;color:#2b1a06;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.arw-f small{font:800 11px/1.2 Nunito,sans-serif;color:#6b4a22;max-width:100%}
.arw-ptr{position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;z-index:3;background:#ffd25a;box-shadow:0 0 8px #ffd25a}
.arw-ptr::before,.arw-ptr::after{content:''}
.arw-ptr{left:-9px;clip-path:polygon(0 0,100% 50%,0 100%)}
.arw-skip{display:block;margin-top:4px;font:800 11px Nunito,sans-serif;color:#8a6a3a;animation:arwBlink 1s ease-in-out infinite alternate}
.arw-rev.landed .arw-reel{animation:arwLand .55s cubic-bezier(.2,1.6,.4,1) both;border-color:#ffd25a;box-shadow:0 0 0 2px #fff6c8,0 0 24px 6px rgba(255,200,80,.7),0 6px 14px rgba(0,0,0,.35)}
.arw-rev.landed.rare .arw-reel{border-color:#7fd7ff;box-shadow:0 0 0 2px #e6f8ff,0 0 34px 10px rgba(127,215,255,.8),0 6px 14px rgba(0,0,0,.35)}
.arw-rev.landed.rare .arw-win-wrap::before{content:'';position:absolute;inset:-40px;z-index:-1;border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(127,215,255,.45),transparent 30%,rgba(255,220,120,.45),transparent 60%,rgba(127,215,255,.45),transparent);animation:arwRays 3s linear infinite}
.arw-what{margin:8px 0 2px;font:800 14px/1.3 Nunito,sans-serif;color:#2f5a14;opacity:0;transition:opacity .3s .2s}
.arw-rev.landed .arw-what{opacity:1}
.arw-pts{display:inline-block;margin:4px auto 0;padding:3px 12px;border-radius:999px;background:linear-gradient(180deg,#2f7a14,#1d4f0c);color:#eaffdf;font:400 16px/1.3 var(--ff-display,'Lilita One'),sans-serif;opacity:0;transform:scale(.4)}
.arw-pts.pop{animation:arwPop .6s cubic-bezier(.2,1.7,.4,1) both}
.arw-foot{display:block;margin-top:10px;font-size:12px!important;color:#6b4a22;font-weight:700}
@keyframes arwSpin{from{transform:translateY(0)}to{transform:translateY(calc(var(--n) * -150px))}}
@keyframes arwLand{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1.04)}}
@keyframes arwPop{0%{opacity:0;transform:scale(.4) translateY(8px)}60%{opacity:1;transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
@keyframes arwRays{to{transform:rotate(360deg)}}
@keyframes arwBlink{to{opacity:.45}}
@media (prefers-reduced-motion:reduce){.arw-track{animation:none;transform:translateY(calc(var(--n) * -150px))}.arw-rev.landed .arw-reel,.arw-pts.pop,.arw-skip,.arw-rev.landed.rare .arw-win-wrap::before{animation:none!important}.arw-pts.pop{opacity:1;transform:none}}


/* (39-063) the weekly Arena: countdown, podium, rank, prize ladder, last week's champions */
.awk{margin:10px 0 12px;padding:10px 10px 12px;border-radius:16px;background:linear-gradient(180deg,#2c2114,#1b130b);border:1.5px solid #c99a3e;color:#ffeccb;box-shadow:0 4px 14px rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,220,140,.12)}
.awk-hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.awk-hd b{font:400 19px/1.1 var(--ff-display,'Lilita One'),sans-serif;color:#ffd25a}
.awk-cd{padding:3px 9px;border-radius:999px;background:#5a1414;border:1px solid #c99a3e;font:800 12px/1.3 Nunito,sans-serif;color:#ffe6a6;white-space:nowrap}
.awk .awk-sub{display:block;margin:4px 0 2px;font-size:12px!important;color:#e9cf9d!important;opacity:.9;text-align:center}
.awk-note{margin:8px 4px;font-size:13px;text-align:center;color:#f3dcb0}
.awk-pod{display:flex;align-items:flex-end;justify-content:center;gap:6px;margin:8px 0 4px}
.awk-spot{flex:1 1 0;max-width:110px;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;padding:6px 4px 0;border-radius:12px 12px 4px 4px;position:relative}
.awk-spot b{font:800 13px/1.2 Nunito,sans-serif;color:#fff3d6;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.awk-spot small{font:800 11px/1.2 Nunito,sans-serif;color:#e9cf9d}
.awk-spot.p1{background:linear-gradient(180deg,rgba(242,193,78,.35),rgba(242,193,78,.05));padding-bottom:22px;box-shadow:0 0 18px rgba(242,193,78,.25)}
.awk-spot.p2{background:linear-gradient(180deg,rgba(200,210,224,.28),rgba(200,210,224,.04));padding-bottom:12px}
.awk-spot.p3{background:linear-gradient(180deg,rgba(192,122,62,.3),rgba(192,122,62,.04));padding-bottom:6px}
.awk-spot.me{outline:2px solid #7fe07a;outline-offset:1px}
.awk-av{position:relative;display:grid;place-items:center;border-radius:50%;padding:2px;background:#3a2a16;box-shadow:0 0 0 2px #c99a3e}
.awk-spot.p1 .awk-av{box-shadow:0 0 0 3px #f2c14e,0 0 14px rgba(242,193,78,.7)}
.awk-spot.p2 .awk-av{box-shadow:0 0 0 2px #c8d2e0}
.awk-spot.p3 .awk-av{box-shadow:0 0 0 2px #c07a3e}
.awk-av>i{width:40px;height:40px;display:grid;place-items:center;font-style:normal;color:#8a7a5a}
.awk-crown{position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotate(-8deg);font-size:20px;font-style:normal;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4));animation:awkBob 1.6s ease-in-out infinite alternate}
.awk-step{position:absolute;bottom:-8px;right:4px;font-size:16px}
.awk-me{margin:8px 0 2px;text-align:center;font:700 13px/1.3 Nunito,sans-serif;color:#ffe6a6}
.awk-me b{color:#7fe07a}
.awk-more{margin:6px 0 2px}
.awk-more summary{cursor:pointer;text-align:center;font:800 12px Nunito,sans-serif;color:#ffd25a;list-style:none}
.awk-more summary::-webkit-details-marker{display:none}
.awk-more summary::after{content:' ▾'}
.awk-more[open] summary::after{content:' ▴'}
.awk-row{display:flex;align-items:center;gap:6px;padding:4px 6px;border-bottom:1px solid rgba(201,154,62,.18)}
.awk-row>span{width:28px;font:800 12px Nunito,sans-serif;color:#e9cf9d}
.awk-row b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:#fff3d6}
.awk-row small{font-size:11px;color:#e9cf9d;white-space:nowrap}
.awk-row.me{background:rgba(127,224,122,.12);border-radius:8px}
.awk-ladder{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:10px}
.awk-pz{display:grid;grid-template-columns:auto 1fr;column-gap:6px;align-items:center;padding:5px 7px;border-radius:10px;background:rgba(255,236,190,.07);border:1px solid rgba(201,154,62,.3)}
.awk-pz span{grid-row:span 2;font-size:18px}
.awk-pz b{font:800 12px/1.2 Nunito,sans-serif;color:#fff3d6}
.awk-pz small{font:700 10.5px/1.25 Nunito,sans-serif;color:#e9cf9d}
.awk-pz.top{border-color:#f2c14e;background:linear-gradient(180deg,rgba(242,193,78,.16),rgba(242,193,78,.04))}
.awk-pz.top:first-child{grid-column:1/-1}
.awk-bank{display:flex;align-items:center;gap:8px;margin:8px 0 2px;padding:7px 8px;border-radius:12px;background:linear-gradient(180deg,rgba(95,200,255,.18),rgba(95,200,255,.05));border:1.5px solid #5fc8ff}
.awk-bank>span{font-size:24px}.awk-bank b{display:block;font:800 13px/1.2 Nunito,sans-serif;color:#e6f6ff}.awk-bank small{display:block;font-size:11px;color:#bfe3f5}
.awk-last{margin-top:10px;padding-top:6px;border-top:1px dashed rgba(201,154,62,.4)}
.awk-pod.last .awk-spot.p1{box-shadow:0 0 22px rgba(242,193,78,.45)}
/* the exclusive Arena frames (39-017 rings, marked #ag/#as/#ab) */
img.pc17-ring[src$="#ag"]{filter:drop-shadow(0 0 4px #ffd25a) drop-shadow(0 0 9px rgba(255,190,60,.8)) saturate(1.3);animation:awkRing 2.4s ease-in-out infinite alternate}
img.pc17-ring[src$="#as"]{filter:drop-shadow(0 0 4px #e8f0ff) drop-shadow(0 0 8px rgba(190,210,255,.75)) brightness(1.08)}
img.pc17-ring[src$="#ab"]{filter:drop-shadow(0 0 4px #ffb070) drop-shadow(0 0 8px rgba(220,130,60,.7))}
@keyframes awkBob{to{transform:translateX(-50%) rotate(6deg) translateY(-2px)}}
@keyframes awkRing{to{filter:drop-shadow(0 0 6px #fff1b0) drop-shadow(0 0 14px rgba(255,200,80,.95)) saturate(1.5)}}
@media (max-width:360px){.awk-ladder{grid-template-columns:1fr}.awk-spot b{font-size:12px}}
@media (prefers-reduced-motion:reduce){.awk-crown,img.pc17-ring[src$="#ag"]{animation:none!important}}


/* (39-064) the hero hub: tabs under the hero; the Talents tab and the level road */
.hs-tabs{position:sticky;top:-2px;z-index:6;display:flex;gap:4px;margin:10px 0 2px;padding:4px;border-radius:14px;background:linear-gradient(180deg,#2e2216,#17110b);border:1.5px solid rgba(231,184,74,.7);box-shadow:0 4px 10px rgba(0,0,0,.25)}
.hs-tab{position:relative;flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:5px;min-height:40px;padding:6px 4px;border:0;border-radius:10px;background:none;color:#e9cf9d;font:400 16px/1 var(--ff-display,'Lilita One'),sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .18s,color .18s}
.hs-tab .hs-tabi{font-size:17px}
.hs-tab.on{background:linear-gradient(180deg,#ffe08a,#e7b84a 60%,#c58a1e);color:#3a2306;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 6px rgba(0,0,0,.35)}
.hs-tab:active{transform:scale(.97)}
.hs-tabn{position:absolute;top:2px;right:6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#d8402e;color:#fff;font:900 11px/17px Nunito,sans-serif;font-style:normal;box-shadow:0 0 0 2px #1d150c;animation:talPulse 1.6s ease-in-out infinite alternate}
.hs-pane{animation:talIn .22s ease-out both}
.tal{margin-top:10px}
.tal-head{display:flex;align-items:center;gap:8px}
.tal-pts{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.tal-orb{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:400 22px/1 var(--ff-display,'Lilita One'),sans-serif;color:#fff8e0;
 background:radial-gradient(circle at 35% 30%,#d9b3ff,#8a4fd6 55%,#4a1f86);box-shadow:0 0 0 2px #e7b84a,0 0 14px rgba(170,110,255,.55);text-shadow:0 1px 2px rgba(0,0,0,.5)}
.tal-pts b{display:block;font:900 14.5px Nunito,sans-serif}
.tal-pts small{display:block;font:700 12px/1.3 Nunito,sans-serif;color:#6e5332}
.tal-rbtns{display:flex;gap:4px}
.tal-seg{display:flex;gap:6px;margin:10px 0 4px}
.tal-br{position:relative;flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 4px 6px;border-radius:12px;border:2px solid color-mix(in srgb,var(--bc) 55%,#c99a3e);background:#f6e7c1;color:#3a2a14;cursor:pointer}
.tal-br .tal-bi{font-size:20px;line-height:1}
.tal-br b{font:400 15px/1.1 var(--ff-display,'Lilita One'),sans-serif}
.tal-br small{font:800 11px Nunito,sans-serif;color:#7a5a30}
.tal-br.on{background:linear-gradient(180deg,color-mix(in srgb,var(--bc) 30%,#fff3d6),color-mix(in srgb,var(--bc) 12%,#f6e7c1));box-shadow:0 0 0 2px var(--bc),0 4px 10px color-mix(in srgb,var(--bc) 35%,transparent)}
.tal-aff{position:absolute;top:-7px;right:-5px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:900 12px/1 sans-serif;font-style:normal;color:#3a2306;background:linear-gradient(180deg,#ffe08a,#e7b84a);box-shadow:0 0 0 2px #fff6dd,0 0 8px rgba(255,200,80,.8)}
.tal-affn{display:block;margin:2px 2px 4px;font:700 12px/1.3 Nunito,sans-serif;color:#7a4a08}
.tal-tree{list-style:none;margin:6px 0 0;padding:0 0 0 10px;position:relative}
.tal-tree::before{content:'';position:absolute;left:26px;top:18px;bottom:18px;width:3px;border-radius:2px;background:linear-gradient(180deg,var(--bc),color-mix(in srgb,var(--bc) 25%,#c9b48a))}
.tal-n{position:relative;display:flex;align-items:center;gap:10px;padding:7px 4px 7px 0;border-bottom:1px solid rgba(160,120,60,.2)}
.tal-n:last-child{border-bottom:0}
.tal-ic{position:relative;z-index:1;flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:17px;background:#f1dfae;border:2px solid #c99a3e}
.tal-n.some .tal-ic{border-color:var(--bc);box-shadow:0 0 8px color-mix(in srgb,var(--bc) 60%,transparent)}
.tal-n.max .tal-ic{background:linear-gradient(180deg,color-mix(in srgb,var(--bc) 40%,#fff3d6),#f1dfae)}
.tal-n.cap .tal-ic{width:40px;height:40px;margin-left:-3px;border-width:3px;border-color:#e7b84a;background:radial-gradient(circle,#fff3c4,#e7b84a)}
.tal-n.locked{opacity:.62}.tal-n.locked .tal-ic{filter:grayscale(.8)}
.tal-n b{font:900 14px Nunito,sans-serif}
.tal-n small{display:block;font:700 12px/1.3 Nunito,sans-serif;color:#6e5332}
.tal-pips{display:flex;gap:3px;margin:3px 0 2px}
.tal-pips i{width:14px;height:6px;border-radius:3px;background:rgba(90,60,20,.18)}
.tal-pips i.on{background:var(--bc);box-shadow:0 0 5px color-mix(in srgb,var(--bc) 70%,transparent)}
.tal-buy{flex:none;min-width:48px;display:flex;flex-direction:column;align-items:center;line-height:1.05}
.tal-buy small{font:800 10px Nunito,sans-serif;opacity:.85}
.tal-buy.short{opacity:.55;filter:grayscale(.5)}
.tal-n .hs-mlock{font-size:13px;color:#8a6a3a;background:rgba(0,0,0,.05);border-color:#b99a5e}
.tal-sum{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 2px}
.tal-chip{padding:3px 9px;border-radius:999px;font:800 12px/1.3 Nunito,sans-serif;color:#2f5a14;background:rgba(124,207,90,.18);border:1px solid rgba(80,150,50,.45)}
.tal-hint{margin:8px 0 0;font-size:13px}
.road{margin-top:14px;padding:10px 8px;border-radius:14px;background:linear-gradient(180deg,#2e2216,#17110b);border:1.5px solid rgba(231,184,74,.7);color:#ffeccb}
.road-bank{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:6px 8px;border-radius:10px;background:rgba(95,200,255,.14);border:1px solid #5fc8ff;font:800 12.5px/1.3 Nunito,sans-serif;color:#e6f6ff}.road-bank span{flex:1}
.road-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 2px}
.road-h b{font:400 17px var(--ff-display,'Lilita One'),sans-serif;color:#ffd25a}
.road-h small{font:800 12px Nunito,sans-serif;color:#e9cf9d}
.road-row{display:flex;gap:6px;overflow-x:auto;padding:8px 2px 4px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.road-row::-webkit-scrollbar{display:none}
.road-s{flex:0 0 92px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 5px;border-radius:12px;background:rgba(255,236,190,.07);border:1px solid rgba(201,154,62,.35);text-align:center}
.road-l{font:400 16px var(--ff-display,'Lilita One'),sans-serif;color:#ffe6a6}
.road-w{font:700 10.5px/1.3 Nunito,sans-serif;color:#e9cf9d;min-height:28px}
.road-st{font:900 12px Nunito,sans-serif;color:#a99470;min-height:26px;display:grid;place-items:center}
.road-s.done{opacity:.6}.road-s.done .road-st{color:#7fe07a;font-size:16px}
.road-s.far{opacity:.75}
.road-s.big{border-color:#e7b84a}
.road-s.ready{border-color:#ffd25a;background:linear-gradient(180deg,rgba(255,210,90,.22),rgba(255,210,90,.06));box-shadow:0 0 12px rgba(255,200,80,.35);animation:talGlow 1.5s ease-in-out infinite alternate}
.road-c{padding:4px 12px!important}
@keyframes talPulse{to{transform:scale(1.12)}}
@keyframes talIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes talGlow{to{box-shadow:0 0 18px rgba(255,210,90,.6)}}
@media (max-width:360px){.hs-tab{font-size:14px;gap:3px}.tal-br b{font-size:13px}.road-s{flex-basis:84px}}
@media (prefers-reduced-motion:reduce){.hs-tabn,.hs-pane,.road-s.ready{animation:none!important}}


/* (39-065) hero trials, ascension stars, runes and gear sockets */
.trl{margin-top:10px}
.asc{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;color:#ffeccb;background:radial-gradient(120% 140% at 0% 0%,rgba(170,110,255,.22),transparent 55%),linear-gradient(180deg,#2e2216,#17110b);border:1.5px solid rgba(231,184,74,.7)}
.asc.ready{box-shadow:0 0 16px rgba(190,140,255,.55);animation:talGlow 1.5s ease-in-out infinite alternate}
.asc-stars{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;flex:none;width:86px}
.asc-stars i{font-style:normal;font-size:16px;text-align:center;color:rgba(255,236,190,.22)}
.asc-stars i.on{color:#d9b3ff;text-shadow:0 0 8px #b07cff,0 0 2px #fff}
.asc b{display:block;font:400 17px var(--ff-display,'Lilita One'),sans-serif;color:#ffd25a}
.asc small{display:block;font:700 11.5px/1.3 Nunito,sans-serif;color:#e9cf9d}
.asc .asc-need{color:#cdb98e;margin-top:2px}
.asc-go{flex:none;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.asc-go small{font:800 10px Nunito,sans-serif!important;color:inherit!important}
.asc-go.short{opacity:.6;filter:grayscale(.4)}
.trl-list{margin-top:8px}
.trl-c{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid rgba(160,120,60,.22)}
.trl-c:last-child{border-bottom:0}
.trl-ic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:19px;background:#f1dfae;border:1px solid #c99a3e}
.trl-c.ready .trl-ic{border-color:#e7b84a;box-shadow:0 0 10px rgba(255,200,80,.7)}
.trl-c.done{opacity:.7}
.trl-c b{font:900 14px Nunito,sans-serif}
.trl-c small{display:block;font:700 12px/1.3 Nunito,sans-serif;color:#6e5332}
.trl-steps{display:flex;gap:4px;margin:3px 0 2px}
.trl-steps i{width:16px;height:16px;border-radius:50%;border:2px solid rgba(90,60,20,.25);background:rgba(90,60,20,.08)}
.trl-steps i.t0.got{background:#c07a3e;border-color:#8a4f1c}.trl-steps i.t1.got{background:#c8d2e0;border-color:#7f8a99}.trl-steps i.t2.got{background:#f2c14e;border-color:#b88a14}
.trl-steps i.ok{border-color:#e7b84a;animation:talPulse .9s ease-in-out infinite alternate}
.trl-bar{height:5px;border-radius:3px;background:rgba(90,60,20,.15);overflow:hidden}
.trl-bar i{display:block;height:100%;background:linear-gradient(90deg,#7ccf5a,#3f9a2a)}
.trl-r{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:74px}
.trl-r small{font:800 11px Nunito,sans-serif;color:#6e5332}
.trl-tier{font:800 11px Nunito,sans-serif;color:#a08a64}
.rune{position:relative;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50% 50% 46% 46%/58% 58% 42% 42%;font-size:15px;line-height:1;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.75),transparent 34%),linear-gradient(160deg,var(--r1),var(--r2));box-shadow:0 0 0 1.5px rgba(255,255,255,.6) inset,0 2px 4px rgba(0,0,0,.3)}
.rune i{position:absolute;right:-7px;bottom:-5px;font:900 9px/1 Nunito,sans-serif;font-style:normal;color:#fff;background:#2a1a08;padding:2px 3px;border-radius:5px;box-shadow:0 0 0 1px rgba(255,236,190,.6)}
.rune.sm{width:22px;height:22px;font-size:11px}
.rune.sm i{font-size:8px;right:-8px;bottom:-4px;padding:1px 2px}
.rune.rk-atk{--r1:#ff8a7a;--r2:#b8281a}.rune.rk-def{--r1:#9cc8ff;--r2:#2f5fae}.rune.rk-prod{--r1:#b8f08a;--r2:#3f8a1c}.rune.rk-march{--r1:#ffe28a;--r2:#c8901a}
.rune.rg4,.rune.rg5{box-shadow:0 0 0 1.5px #fff inset,0 0 10px var(--r1)}
.runes h3 .runes-n{margin-left:auto;font:800 12px Nunito,sans-serif;color:#7a5a30}
.runes-row{display:flex;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid rgba(160,120,60,.2)}
.runes-name{flex:none;width:66px;display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.runes-name b{font:900 12.5px Nunito,sans-serif}.runes-name small{font:700 10px Nunito,sans-serif;color:#7a5a30}
.runes-g{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:3px;min-width:0}
.runes-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:3px 0;border-radius:8px;opacity:.45}
.runes-cell.has{opacity:1;background:rgba(255,236,190,.45)}
.runes-cell small{font:800 10px/1 Nunito,sans-serif;color:#5a3a12}
.runes-cell .runes-v{font-size:9px;color:#7a5a30}
.runes-fuse{padding:1px 6px!important;font-size:10px!important;min-height:0!important}
.runes-buy{flex:none;padding:3px 6px!important;font-size:11px!important}
.runes-buy.short{opacity:.55}
.sock{margin:10px 0 2px;padding:8px;border-radius:12px;background:rgba(255,236,190,.35);border:1px dashed #c99a3e;text-align:center}
.sock-h{display:block;font:900 13px Nunito,sans-serif;margin-bottom:6px}
.sock-row{display:flex;justify-content:center;gap:10px}
.sock-s{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:74px;padding:8px 6px;border-radius:12px;border:2px dashed #b99a5e;background:#fff6dd;cursor:pointer}
.sock-s.full{border-style:solid;border-color:#e7b84a;box-shadow:0 0 10px rgba(255,200,80,.5)}
.sock-s.on{border-color:#2f7a14}
.sock-s small{font:800 11px Nunito,sans-serif;color:#6e5332}
.sock-plus{width:30px;height:30px;display:grid;place-items:center;font:900 20px/1 Nunito,sans-serif;color:#b99a5e}
.sock-pick{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px}
.sock-o{display:flex;align-items:center;gap:6px;padding:5px 9px 5px 6px;border-radius:999px;border:1px solid #c99a3e;background:#fff6dd;cursor:pointer}
.sock-o small{font:800 11px Nunito,sans-serif;color:#3a2a14}
@media (prefers-reduced-motion:reduce){.asc.ready,.trl-steps i.ok{animation:none!important}}


/* (39-061) the Google button's shine slides with a transform (was: by changing left, a layout shift every frame) */
@keyframes gsh73{0%,70%{transform:translateX(0) skewX(-20deg)}100%{transform:translateX(475%) skewX(-20deg)}}


/* (39-073) the first steps: the tribe stage, the oath moment, the hero's greeting */
.ft73{position:relative;margin:8px auto 12px;max-width:920px;border-radius:22px;overflow:hidden;isolation:isolate;min-height:clamp(330px,56vh,520px);
 border:2px solid color-mix(in srgb,var(--tc) 55%,#c99a3a);box-shadow:0 0 0 3px #2a1708,0 16px 34px rgba(0,0,0,.55),0 0 34px color-mix(in srgb,var(--tc) 35%,transparent);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ft73-art{position:absolute;inset:0;z-index:-2}
.ft73-art img{width:100%;height:100%;object-fit:cover;object-position:center 30%;animation:ft73in .45s ease-out both}
.ft73-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,8,3,.1) 0,rgba(14,8,3,0) 30%,rgba(14,8,3,.55) 58%,rgba(14,8,3,.92) 100%),radial-gradient(ellipse at 70% 40%,color-mix(in srgb,var(--tc) 30%,transparent),transparent 60%)}
@keyframes ft73in{from{opacity:.25;transform:scale(1.06)}to{opacity:1;transform:none}}
.ft73-fig{position:absolute;right:2%;bottom:24%;height:62%;max-height:330px;width:auto;z-index:-1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6));animation:ft73fig .5s .05s cubic-bezier(.2,1.2,.4,1) both;pointer-events:none}
@keyframes ft73fig{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.ft73-nav{position:absolute;top:34%;width:44px;height:44px;border-radius:50%;border:2px solid #e8c372;background:rgba(30,16,6,.7);color:#ffe7a8;font:700 30px/38px Georgia,serif;cursor:pointer;z-index:2;box-shadow:0 3px 8px rgba(0,0,0,.5)}
.ft73-nav.prev{left:10px}.ft73-nav.next{right:10px}
@media (hover:hover){.ft73-nav:hover{background:color-mix(in srgb,var(--tc) 60%,#1e1006);transform:scale(1.06)}}
.ft73-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px 26px;color:#fff3dc;text-align:left;animation:ft73cap .45s .08s ease-out both}
@keyframes ft73cap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ft73-name{display:flex;align-items:center;gap:8px}
.ft73-name h2{margin:0;font:700 clamp(26px,6.4vw,38px)/1.05 'Cinzel',Georgia,serif;color:#fff2c8;text-shadow:0 2px 0 #1a0c02,0 0 16px color-mix(in srgb,var(--tc) 70%,transparent)}
.ft73-cr{flex:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.ft73-tag{margin:4px 0 8px;font-size:15px;font-style:italic;color:#ecdcb8;max-width:34em;text-shadow:0 1px 2px #000}
.ft73-perks{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:0;list-style:none}
.ft73-perks li{padding:4px 11px 4px 9px;border-radius:999px;font-size:13px;font-weight:800;color:#fff;background:color-mix(in srgb,var(--tc) 70%,#1a0d04);border:1.5px solid rgba(255,226,150,.65);box-shadow:0 2px 6px rgba(0,0,0,.4)}
.ft73-perks li::before{content:'✦ ';color:#ffd65a}
.ft73-heroes{display:flex;align-items:center;gap:6px}
.ft73-heroes small{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#d9c08a;margin-right:4px}
.ft73-heroes span{width:38px;height:38px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px #e8c372,0 2px 5px rgba(0,0,0,.5)}
.ft73-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:6px}
.ft73-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,235,190,.4)}.ft73-dots i.on{width:20px;border-radius:4px;background:#ffd65a}
/* the strip of tribes under the stage: small, all six on a line on wider screens */
.ft73ob .tcards2{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:6px!important;max-width:920px;margin:0 auto 8px!important}
.ft73ob .tcards2 .tc2{min-height:0!important;height:auto!important;padding:0!important;border-radius:12px!important}
.ft73ob .tcards2 .tc2 .tcimg{display:block;aspect-ratio:1/1;height:auto!important}
.ft73ob .tcards2 .tc2 .tcimg img{width:100%;height:100%;object-fit:cover}
.ft73ob .tcards2 .tc2 .tcname{font-size:11px!important;padding:3px 2px!important;gap:2px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;justify-content:center}
.ft73ob .tcards2 .tc2 .tcname .tccrest{display:none}
.ft73ob .tcards2 .tc2 .tc12f{display:none!important}
.ft73ob .tcards2 .tc2.on{outline:3px solid #ffd65a;outline-offset:1px;transform:translateY(-2px)}
@media (hover:hover){.ft73ob .tcards2 .tc2:hover{transform:translateY(-3px);filter:brightness(1.12)}}
@media (max-width:520px){.ft73ob .tcards2{grid-template-columns:repeat(6,minmax(0,1fr))!important}.ft73ob .tcards2 .tc2 .tcname{font-size:9.5px!important}}
.ft73-more{max-width:920px;margin:4px auto 10px;color:#f0dfb8}
.ft73-more>summary{cursor:pointer;font-weight:800;font-size:14px;color:#ffd98a;padding:6px 2px;list-style-position:inside}
.ft73-more[open]>summary{margin-bottom:6px}
.ft73ob .obbar .btn.tgo{animation:ft73go 2.4s ease-in-out infinite}
@keyframes ft73go{0%,100%{box-shadow:0 4px 0 rgba(0,0,0,.35),0 0 0 0 rgba(255,214,90,0)}50%{box-shadow:0 4px 0 rgba(0,0,0,.35),0 0 18px 4px rgba(255,214,90,.55)}}
/* the oath: the crest lands in a burst of light */
.ft73-oath{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;pointer-events:auto;color:#fff2c8;
 background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--tc) 55%,transparent) 0,rgba(14,8,3,.78) 55%,rgba(14,8,3,.92) 100%);animation:ft73fade .25s ease-out both;transition:opacity .4s}
.ft73-oath.out{opacity:0;pointer-events:none}
.ft73-burst{position:absolute;left:50%;top:42%;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;background:repeating-conic-gradient(rgba(255,230,160,.3) 0 5deg,transparent 5deg 15deg);-webkit-mask:radial-gradient(circle,#000 8%,transparent 58%);mask:radial-gradient(circle,#000 8%,transparent 58%);animation:ft73spin 6s linear infinite,ft73fade .5s ease-out both}
.ft73-ocr{position:relative;animation:ft73slam .6s cubic-bezier(.2,1.5,.4,1) both;filter:drop-shadow(0 0 24px var(--tc)) drop-shadow(0 6px 8px rgba(0,0,0,.6))}
.ft73-oath b{position:relative;font:700 clamp(30px,7vw,48px)/1.1 'Cinzel',Georgia,serif;text-shadow:0 3px 0 #1a0c02,0 0 20px color-mix(in srgb,var(--tc) 80%,transparent);animation:ft73cap .5s .25s ease-out both}
.ft73-oath small{position:relative;font-size:15px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#e9d29a;animation:ft73cap .5s .4s ease-out both}
@keyframes ft73slam{0%{opacity:0;transform:scale(2.4)}60%{opacity:1;transform:scale(.92)}100%{transform:scale(1)}}
@keyframes ft73spin{to{transform:rotate(360deg)}}
@keyframes ft73fade{from{opacity:0}}
/* the hero step: tap to hear */
.hp12stage.ft73-tap{cursor:pointer;touch-action:pan-y}
.ft73-hint{position:absolute;right:10px;top:10px;z-index:3;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800;color:#fff3d0;background:rgba(30,16,6,.72);border:1.5px solid #c99a3a}
.ft73-say{position:absolute;left:50%;bottom:16%;z-index:4;max-width:min(78%,360px);transform:translateX(-50%);padding:9px 14px;border-radius:16px;background:#fff6e2;color:#2a1604;font:700 15px/1.3 'Alegreya Sans',Nunito,sans-serif;font-style:italic;text-align:center;
 box-shadow:0 6px 14px rgba(0,0,0,.45),0 0 0 2px #c99a3a;animation:ft73say .35s cubic-bezier(.2,1.4,.4,1) both}
.ft73-say::after{content:'';position:absolute;left:50%;top:-9px;margin-left:-9px;border:9px solid transparent;border-top:0;border-bottom-color:#fff6e2}
@keyframes ft73say{from{opacity:0;transform:translate(-50%,8px) scale(.9)}to{opacity:1;transform:translateX(-50%)}}
.ft73-ref{margin:4px 0 8px;color:#f0dfb8}.ft73-ref>summary{cursor:pointer;font-weight:800;color:#ffd98a;padding:4px 0}
@media (prefers-reduced-motion:reduce){.ft73-art img,.ft73-fig,.ft73-cap,.ft73-oath,.ft73-burst,.ft73-ocr,.ft73-oath b,.ft73-oath small,.ft73-say,.ft73ob .obbar .btn.tgo{animation:none!important}}


/* (39-072) computers: the game framed on a painted backdrop, the loading art painted wide */
@media (min-width:1240px){
 body:not(:has(.ob)){background:#120a04 url(../a/ll_backdrop.4e15f006.webp) center/cover no-repeat fixed!important}
 html:not(.fsmode) body:not(:has(.ob)) #app{position:relative;box-shadow:0 0 0 1px rgba(255,214,140,.35),0 0 0 5px #24140a,0 0 0 6px rgba(201,154,62,.65),0 0 80px 12px rgba(0,0,0,.75)}
}
@media (min-width:1024px){
 /* the town sits on dark painted ground instead of an empty parchment margin */
 #view[data-tab=village]{background:radial-gradient(ellipse at 50% 42%,#3b2a14 0,#22160a 62%,#150d05 100%)!important;box-shadow:inset 0 0 40px rgba(0,0,0,.55)}
 /* the army summary lines up under the army banner (it was pushed to the left) */
 /* the league crest of the top bar no longer covers the first letter of the village name */
 #top .tb > .av{margin-inline-end:18px}
 #view[data-tab] > .asum.am-sum{margin-left:auto!important;margin-right:auto!important}
 /* tips sit in the middle of the game, not along the whole screen */
 .tipcard{max-width:720px;margin-left:auto!important;margin-right:auto!important}
}
/* a mouse: the tab bar and the town buttons answer the pointer */
@media (hover:hover) and (pointer:fine){
 nav.tabs button{cursor:pointer;transition:color .15s}
 nav.tabs button span{transition:transform .15s,opacity .15s}
 nav.tabs button:hover{color:#ffe7b0!important}nav.tabs button:hover span{opacity:1!important;transform:translateY(-2px)}
 .hud-btn{transition:transform .15s,filter .15s}.hud-btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
}
/* the loading screen and the sign-in screen on a wide screen: the wide painting, whole */
@media (min-aspect-ratio:5/4) and (min-width:900px){
 #splash .spbg,.ob12bg:not(.dim) img{height:100%!important;object-position:50% 50%!important}
 #splash::before{background:linear-gradient(180deg,rgba(18,10,4,.35) 0,rgba(18,10,4,0) 22%,rgba(18,10,4,0) 52%,rgba(18,10,4,.55) 78%,rgba(18,10,4,.9) 100%)!important}
 #splash{padding-bottom:calc(10vh + env(safe-area-inset-bottom,0px))}
 .ob12bg:not(.dim) .ob12fade{background:linear-gradient(180deg,rgba(18,10,4,.4) 0,rgba(18,10,4,0) 26%,rgba(18,10,4,0) 50%,rgba(18,10,4,.55) 76%,rgba(18,10,4,.92) 100%)!important}
}


/* (39-069) the war horn's red pulse at the screen's edges: one fixed layer, opacity only, two swells with the horn */
#horn69{position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:0;
 background:radial-gradient(ellipse 115% 92% at 50% 50%,rgba(150,10,0,0) 40%,rgba(190,24,8,.55) 72%,rgba(135,0,0,.92) 100%)}
#horn69.on{animation:horn69p 3.5s ease-in-out both}
@keyframes horn69p{0%{opacity:0}12%{opacity:.95}34%{opacity:.5}52%{opacity:.85}78%{opacity:.35}100%{opacity:0}}
.horn69 #atk20.on{animation:horn69pill .9s ease-in-out 2}
@keyframes horn69pill{0%,100%{box-shadow:0 0 0 0 rgba(220,40,20,0)}50%{box-shadow:0 0 0 6px rgba(220,40,20,.45)}}
@media (prefers-reduced-motion:reduce){#horn69.on{animation:none;opacity:.55}.horn69 #atk20.on{animation:none}}


/* (39-071) the leagues in the spotlight */
/* the top bar: a medallion with a ring that fills toward the next league */
#top .lgchip.lg71{width:30px;height:30px;top:-4px;left:42px;padding:2px;border:0;border-radius:50%;overflow:visible;
 background:conic-gradient(var(--lc,#ffcf40) var(--lp,0%),rgba(255,255,255,.14) 0) !important;box-shadow:0 0 0 1.5px rgba(20,10,2,.9),0 2px 6px rgba(0,0,0,.55),0 0 10px color-mix(in srgb,var(--lc,#ffcf40) 40%,transparent)}
#top .lgchip.lg71 .lg71-cr{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 50% 35%,#4a2c12,#1a0d04 75%)}
#top .lgchip.lg71 .lg71-cr .qwa-lg{width:22px;height:22px}
#top .lgchip.lg71 .lg71-tx{display:none}
#top .lgchip.lg71 .lg71-dot{position:absolute;right:-3px;top:-3px;width:10px;height:10px;border-radius:50%;background:#ff4a3a;border:1.5px solid #fff3c4;box-shadow:0 0 6px #ff5a3a}
#top .lgchip.lg71.near{animation:lg71glow 2.2s ease-in-out infinite}
#top .lgchip.lg71.near .lg71-dot{animation:lg71dot 1.1s ease-in-out infinite}
@keyframes lg71glow{0%,100%{box-shadow:0 0 0 1.5px rgba(20,10,2,.9),0 2px 6px rgba(0,0,0,.55),0 0 8px color-mix(in srgb,var(--lc,#ffcf40) 40%,transparent)}50%{box-shadow:0 0 0 1.5px rgba(20,10,2,.9),0 2px 6px rgba(0,0,0,.55),0 0 18px 3px color-mix(in srgb,var(--lc,#ffcf40) 85%,transparent)}}
@keyframes lg71dot{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
@media (max-width:640px){.tb .lgchip.lg71{left:44px!important;top:-4px!important}.tb .trbadge{top:24px!important}}
/* wider screens: a pill with the crest, the league and what is left to climb */
@media (min-width:641px){
 #top .lgchip.lg71{position:relative;left:auto;top:auto;width:auto;height:34px;padding:2px 12px 2px 2px;border-radius:18px;gap:7px;
  background:linear-gradient(180deg,rgba(52,30,10,.92),rgba(24,12,3,.92)) padding-box,conic-gradient(var(--lc,#ffcf40) var(--lp,0%),rgba(255,255,255,.18) 0) border-box !important;border:2px solid transparent}
 #top .lgchip.lg71 .lg71-cr{width:30px;height:30px;flex:none;position:relative}
 #top .lgchip.lg71 .lg71-cr .qwa-lg{width:26px;height:26px}
 #top .lgchip.lg71 .lg71-tx{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;text-align:left}
 #top .lgchip.lg71 .lg71-tx b{display:block;font:700 13px/1.1 'Cinzel',Georgia,serif;color:color-mix(in srgb,var(--lc,#ffcf40) 55%,#fff3d0);letter-spacing:.02em}
 #top .lgchip.lg71 .lg71-tx small{font-size:10.5px;font-weight:700;color:#e9d6ae;white-space:nowrap}
 #top .lgchip.lg71 .lg71-dot{right:-2px;top:-2px}
}
@media (hover:hover){#top .lgchip.lg71{cursor:pointer;transition:transform .15s}#top .lgchip.lg71:hover{transform:translateY(-1px) scale(1.04)}}

/* the league sheet */
.lg71-sheet{--lc:#ffcf40}
.lg71-hero{position:relative;overflow:hidden;margin:-4px 0 12px;padding:16px 14px 14px;border-radius:18px;text-align:center;color:#fff;isolation:isolate;
 background:radial-gradient(ellipse at 50% 22%,color-mix(in srgb,var(--lc) 55%,transparent),transparent 62%),linear-gradient(180deg,#3d2410,#1a0d04);border:2px solid color-mix(in srgb,var(--lc) 75%,#5a3a14);box-shadow:inset 0 0 0 1px rgba(255,230,170,.18),0 6px 16px rgba(0,0,0,.3)}
.lg71-rays{position:absolute;left:50%;top:62px;width:340px;height:340px;margin:-170px 0 0 -170px;z-index:-1;border-radius:50%;opacity:.55;
 background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--lc) 70%,#fff) 0 7deg,transparent 7deg 22deg);-webkit-mask:radial-gradient(circle,#000 18%,transparent 66%);mask:radial-gradient(circle,#000 18%,transparent 66%);animation:lg71spin 40s linear infinite}
@keyframes lg71spin{to{transform:rotate(360deg)}}
.lg71-big{display:block;width:96px;height:96px;margin:0 auto 2px;filter:drop-shadow(0 0 14px var(--lc)) drop-shadow(0 4px 5px rgba(0,0,0,.6))}
.lg71-big .qwa-lg{width:96px;height:96px}
.lg71-kick{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#e7cf9c}
.lg71-hero h2{justify-content:center!important;width:100%;text-align:center!important;margin:2px 0 0;font:700 28px/1.1 'Cinzel',Georgia,serif;color:color-mix(in srgb,var(--lc) 45%,#fff1c8);text-shadow:0 2px 0 #000,0 0 14px color-mix(in srgb,var(--lc) 60%,transparent)}
.lg71-pts{font-size:13px;color:#e9d6ae;margin-top:2px}.lg71-pts b{color:#fff;font-size:16px}
.lg71-track{display:flex;align-items:center;gap:6px;margin:12px auto 4px;max-width:420px}
.lg71-track>span{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center}
.lg71-track>span .qwa-lg{width:32px;height:32px}.lg71-track>span.b{filter:drop-shadow(0 0 6px var(--lc))}
.lg71-bar{position:relative;flex:1;height:14px;border-radius:8px;background:rgba(0,0,0,.45);box-shadow:inset 0 1px 2px rgba(0,0,0,.6),0 0 0 1px rgba(255,220,150,.25);overflow:hidden}
.lg71-bar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#ffe9a6,var(--lc));box-shadow:0 0 10px var(--lc);position:relative}
.lg71-bar i:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);background-size:200% 100%;animation:lg71shine 2.6s ease-in-out infinite}
@keyframes lg71shine{from{background-position:150% 0}to{background-position:-50% 0}}
.lg71-bar s{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:10px;font-weight:900;color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000}
.lg71-to{font-size:14px;color:#f3e2bc}.lg71-to b{color:#fff}
.lg71-go{margin-top:12px;min-width:180px;font-weight:800;background:linear-gradient(180deg,#f4c050,#c27a12)!important;color:#2a1402!important;border:1.5px solid #ffe7a0!important;box-shadow:0 3px 0 #7a4508,0 6px 14px rgba(0,0,0,.4)!important}
.lg71-nextc{display:flex;align-items:center;gap:12px;border:2px solid color-mix(in srgb,var(--lc) 60%,#c99a3e)!important;background:linear-gradient(90deg,color-mix(in srgb,var(--lc) 18%,transparent),transparent 60%)!important}
.lg71-nextc .lg71-nc{flex:none;width:56px;height:56px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 8px var(--lc))}.lg71-nextc .qwa-lg{width:54px;height:54px}
.lg71-nextc b{display:block;font-size:15px;margin-bottom:2px}.lg71-nextc small{display:block;font-weight:700;opacity:.9}
.lg71-season{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 4px}
.lg71-season>div{padding:9px 10px;border-radius:12px;background:linear-gradient(180deg,#3a2210,#22130a);border:1.5px solid #9a6a26;color:#fff;text-align:center}
.lg71-season small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#d9bf8a}
.lg71-season b{display:block;font-size:17px;color:#ffe08a;font-variant-numeric:tabular-nums}
.lg71-note{display:block;margin-bottom:6px}
.lg71-h{margin:14px 0 8px;font:700 17px 'Cinzel',Georgia,serif}
.lg71-ladder{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.lg71-step{position:relative;flex:none;width:84px;scroll-snap-align:center;padding:8px 4px 7px;border-radius:12px;text-align:center;background:linear-gradient(180deg,#3a2210,#1e1006);border:1.5px solid rgba(201,154,62,.5);color:#fff}
.lg71-step .lg71-sc{display:flex;align-items:center;justify-content:center;height:50px}
.lg71-step b{display:block;font-size:12px;color:color-mix(in srgb,var(--lc) 50%,#fff3d0)}.lg71-step small{display:block;font-size:10px;color:#d9c49a}.lg71-step em{display:block;font-style:normal;font-size:11px;font-weight:800;color:#ffd35a}
.lg71-step.done{opacity:.62}.lg71-step.done:after{content:'✓';position:absolute;right:6px;top:4px;font-size:12px;font-weight:900;color:#9fe07a}
.lg71-step.next .lg71-sc{filter:grayscale(.55) brightness(.8)}
.lg71-step.me{border:2px solid var(--lc);box-shadow:0 0 12px color-mix(in srgb,var(--lc) 60%,transparent);background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--lc) 35%,transparent),transparent 70%),linear-gradient(180deg,#3a2210,#1e1006)}
.lg71-you{position:absolute;left:50%;top:-7px;transform:translateX(-50%);padding:0 7px;border-radius:8px;background:var(--lc);color:#1a0d04;font:900 9.5px/15px system-ui,sans-serif;font-style:normal;letter-spacing:.06em;text-transform:uppercase}
.lg71-how{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.lg71-how span{padding:8px 4px;border-radius:12px;text-align:center;background:rgba(201,154,62,.12);border:1.5px solid rgba(201,154,62,.45)}
.lg71-how b{display:block;font-size:19px;color:#3a8a2a}.lg71-how small{display:block;font-size:11px;font-weight:700}
/* promotion: the old crest gives way to the new */
#banner.lg71-bn #bnI{width:auto;height:auto;font-size:0}
.lg71-pro{position:relative;display:block;width:150px;height:118px;margin:0 auto;isolation:isolate}
.lg71-pro .lg71-rays{top:59px;width:260px;height:260px;margin:-130px 0 0 -130px;opacity:0;animation:lg71in .5s .55s ease-out forwards,lg71spin 30s linear infinite}
.lg71-pro .o,.lg71-pro .n{position:absolute;left:50%;top:50%;display:flex;align-items:center;justify-content:center}
.lg71-pro .o{width:72px;height:72px;margin:-36px 0 0 -36px;animation:lg71out .6s ease-in forwards}
.lg71-pro .n{width:96px;height:96px;margin:-48px 0 0 -48px;opacity:0;transform:scale(2.2);animation:lg71slam .55s .5s cubic-bezier(.2,1.4,.4,1) forwards;filter:drop-shadow(0 0 16px var(--lc)) drop-shadow(0 4px 5px rgba(0,0,0,.5))}
.lg71-pro .o .qwa-lg{width:72px;height:72px}.lg71-pro .n .qwa-lg{width:96px;height:96px}
@keyframes lg71out{0%{opacity:1;transform:scale(1)}60%{opacity:1;transform:scale(.85) rotate(-8deg)}100%{opacity:0;transform:scale(.4) translateY(14px)}}
@keyframes lg71slam{0%{opacity:0;transform:scale(2.2)}60%{opacity:1;transform:scale(.92)}100%{opacity:1;transform:scale(1)}}
@keyframes lg71in{to{opacity:.7}}
/* the war-points toast */
.toast.lg71-toast{border-color:var(--lc)!important;min-width:230px}
.toast.lg71-toast .ti{width:36px;height:36px;display:flex;align-items:center;justify-content:center;flex:none}.toast.lg71-toast .ti .qwa-lg{width:34px;height:34px}
.toast.lg71-toast>div{flex:1}.toast.lg71-toast small{display:block;font-size:11.5px;opacity:.9}
.lg71-tb{display:block;height:6px;margin-top:4px;border-radius:4px;background:rgba(255,255,255,.15);overflow:hidden}
.lg71-tb i{display:block;height:100%;background:linear-gradient(90deg,#ffe9a6,var(--lc));animation:lg71grow .9s .25s ease-out backwards}
@keyframes lg71grow{from{width:var(--w0)}}
.toast.lg71-toast.down{border-color:#e0664a!important}
@media (prefers-reduced-motion:reduce){#top .lgchip.lg71.near,#top .lgchip.lg71 .lg71-dot,.lg71-rays,.lg71-bar i:after,.lg71-tb i{animation:none!important}
 .lg71-pro .o{display:none}.lg71-pro .n{animation:none;opacity:1;transform:none}.lg71-pro .lg71-rays{animation:none;opacity:.6}}


/* (39-068) selling a hero piece: the refund first, then Keep or Sell, in place of the card's buttons */
.hs-sell{display:flex;flex-direction:column;gap:7px;margin-top:8px;padding:12px 12px 12px;border-radius:14px;text-align:center;
 background:linear-gradient(180deg,#fff6df,#f3e2bb);border:2px solid var(--rc,#b8893c);box-shadow:0 2px 0 rgba(90,60,20,.25);animation:gsell68 .16s ease-out}
.hs-sellt{font:700 17px/1.2 'Alegreya SC',Georgia,serif;color:#4a2f12;overflow-wrap:anywhere}
.hs-sellget{display:flex;flex-direction:column;gap:2px;align-items:center;padding:8px 6px;border-radius:10px;background:rgba(255,255,255,.55);border:1px solid rgba(150,105,40,.3)}
.hs-sellget small{font:700 12px/1.3 Nunito,sans-serif;color:#7a5a32}
.hs-sellget span{font:800 18px/1.3 Nunito,sans-serif;color:#2e1d0b;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 10px}
.hs-sellw{margin:0;font:700 12.5px/1.3 Nunito,sans-serif;color:#a2381c}
.hs-sellbtns{display:flex;gap:10px;justify-content:center;margin-top:2px}
.hs-sellbtns .btn{flex:1 1 0;max-width:150px;min-height:44px}
@keyframes gsell68{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hs-sell{animation:none}}


/* ===== the hero has volume when turned (turn.ts, views.ts): the picture is never tilted past 28° (no
   card edge-on); the frames (.hs-vf: the front, and the turnaround views of looks that have them) are
   faded and tilted one by one from turn.ts (views 800 wide: the doll's 640 centred, so 78% of the
   doll's width is 97.5% of theirs); a sheen sweeps across the front as it turns, the contact
   shadow stretches, the doll's layers part (banner behind, armour and helm forward, weapon in front) ===== */
.hs-turn{transform:none;transition:none}
.hs-vf{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-end;transform-origin:50% 60%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.hs-vv{pointer-events:none}
.hs-vimg{aspect-ratio:800/1000;max-width:97.5%;object-fit:contain;object-position:50% 100%}
/* the banner of a look with views: planted beside the hero, it stays where it is while they turn */
.hs-bnr{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-end;pointer-events:none}
.hs-doll>img.dz-m{transform:translateX(calc(var(--rt) * 5px));transition:transform .9s cubic-bezier(.2,1.5,.4,1)}
.hs-sweep{position:absolute;left:11%;right:11%;top:0;bottom:0;z-index:2;pointer-events:none;mix-blend-mode:soft-light;
 -webkit-mask:var(--fig) center bottom/contain no-repeat;mask:var(--fig) center bottom/contain no-repeat;
 background:linear-gradient(100deg,transparent 28%,rgba(255,244,214,.95) 47%,rgba(255,244,214,.95) 53%,transparent 72%) no-repeat;
 background-size:240% 100%;background-position:calc(50% + var(--rt) * 55%) 0;opacity:calc(var(--rt) * var(--rt) * 1.3)}
.hs-sweep.dl{-webkit-mask:none;mask:none;-webkit-mask-image:var(--fig);mask-image:var(--fig);-webkit-mask-position:50% 100%;mask-position:50% 100%;
 -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.hs-cshadow{position:absolute;left:50%;bottom:-3px;width:40%;height:20px;translate:-50% 0;border-radius:50%;pointer-events:none;
 background:radial-gradient(closest-side,rgba(10,5,16,.6),rgba(10,5,16,.28) 55%,transparent);
 transform:translateX(calc(var(--rt) * -15px)) scaleX(calc(1 + var(--rt) * var(--rt) * .5));transition:transform .9s cubic-bezier(.2,1.5,.4,1)}
.hs-spin .hs-ring,.hs-spin .hs-plinth,.hs-spin .hs-cshadow,.hs-spin .hs-motes,.hs-spin .hs-rays,.hs-spin .hs-doll>img,
.hs-spin .hs-tlit::before,.hs-spin .hs-tlit::after,.hs-turning .hs-cshadow{transition:none}
.hs-spin .hs-ring{opacity:.85}
@media (prefers-reduced-motion:reduce){.hs-cshadow,.hs-doll>img.dz-m{transition:none}}


/* (39-075) while the town is dragged / pinched / wheel-zoomed, its picture moves as one layer (a CSS transform):
   drawn beyond its box so the edges coming into view are there (.vmap clips it) */
body.tz-moving .vmap>svg{will-change:transform;transform-origin:0 0;overflow:visible}
/* (39-083) the town picture stays its own layer: made and dropped at each touch, the whole town was drawn again as a new layer when a drag began and again when it ended */
.vmap>svg{will-change:transform;transform-origin:0 0}
.vmap>.lbl-layer{will-change:transform}


/* 39-053 the Arena, a show: a full screen of its own over the game */
#arc{position:fixed;inset:0;z-index:9500;background:#0b0603;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;color:#fff3d6;font-family:inherit;animation:arcIn .35s ease-out}
#arc *{box-sizing:border-box}
#arc .arc-box{position:absolute;top:0;bottom:0;left:50%;width:min(100%,62vh);translate:-50% 0;overflow:hidden;background:#1a0f07}
#arc .arc-far,#arc .arc-farS,#arc .arc-near,#arc .arc-zoom,#arc .arc-nearS{position:absolute;inset:0;will-change:transform}
#arc .arc-bg{position:absolute;inset:-3% -3% 0;background:#3a2412 center top/cover no-repeat}
/* the stands: the player's tribe left, the opponent's right */
#arc .arc-crowd{position:absolute;top:31%;height:17.5%;width:52%}
#arc .arc-crowd.l{left:-1%}#arc .arc-crowd.r{right:-1%}
#arc .arc-cr{position:absolute;inset:0;background-repeat:no-repeat;background-size:cover;background-position:50% 100%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%);animation:arcBob 1.5s ease-in-out infinite alternate;transform-origin:50% 100%}
#arc .arc-crowd.r .arc-cr{scale:-1 1}
#arc .arc-cr.f{background-size:118% auto;-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 52%,#000 72%);mask-image:linear-gradient(180deg,transparent 0,transparent 52%,#000 72%);animation-duration:1.15s;animation-delay:-.4s;filter:brightness(1.08)}
#arc .arc-crowd.cheer .arc-cr{animation:arcJump .5s ease-out 2,arcBob 1.5s ease-in-out 1s infinite alternate}
#arc .arc-crowd.cheer .arc-cr.f{animation:arcJump .42s ease-out 3,arcBob 1.15s ease-in-out 1.3s infinite alternate}
#arc .arc-crowd.hush .arc-cr{animation:arcHush .9s ease-out,arcBob 1.5s ease-in-out .9s infinite alternate}
#arc .arc-crowd::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 30%,transparent),transparent 70%);mix-blend-mode:soft-light;pointer-events:none}
#arc .arc-crowd.r::after{background:linear-gradient(270deg,color-mix(in srgb,var(--tc) 30%,transparent),transparent 70%)}
#arc .arc-flag{position:absolute;top:-30%;width:2px;height:58%;background:linear-gradient(#e9c46a,#6b4a1a);z-index:1}
#arc .arc-crowd.l .arc-flag.a{left:12%}#arc .arc-crowd.l .arc-flag.b{left:58%}#arc .arc-crowd.r .arc-flag.a{right:12%}#arc .arc-crowd.r .arc-flag.b{right:58%}
#arc .arc-flag i{position:absolute;top:2px;left:2px;width:26px;height:34px;background:linear-gradient(90deg,var(--tc),color-mix(in srgb,var(--tc) 70%,#000));clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);transform-origin:0 50%;animation:arcWave 1.1s ease-in-out infinite alternate;box-shadow:inset 0 0 0 2px rgba(255,215,90,.6)}
#arc .arc-crowd.r .arc-flag i{left:auto;right:2px;transform-origin:100% 50%;animation-delay:-.5s}
#arc .arc-flag.b i{animation-duration:.9s;animation-delay:-.3s}
#arc .arc-tag{position:absolute;bottom:-2px;left:50%;translate:-50% 0;white-space:nowrap;font:400 11px/1 'Lilita One',sans-serif;letter-spacing:.04em;padding:4px 10px 3px;border-radius:8px;background:linear-gradient(var(--tc),color-mix(in srgb,var(--tc) 60%,#000));border:1.5px solid #e9c46a;color:#fff6dc;text-shadow:0 1px 0 #000;z-index:2}
#arc .arc-conf{position:absolute;left:0;right:0;top:30%;height:0;z-index:2}
#arc .arc-conf i{position:absolute;left:var(--x);top:0;width:6px;height:9px;background:var(--c);border-radius:1px;opacity:0;rotate:var(--r)}
#arc .arc-crowd.cheer .arc-conf i{animation:arcConf 1.3s cubic-bezier(.2,.7,.4,1) var(--dl) both}
#arc .arc-mid{position:absolute;left:46%;width:8%;top:28%;height:22%;background:linear-gradient(90deg,transparent,rgba(30,16,6,.75),transparent)}
/* the fighters on the sand */
#arc .arc-f{position:absolute;bottom:3%;width:58%;height:57%;z-index:2}
#arc .arc-f.me{left:-3%}#arc .arc-f.foe{right:-3%}
#arc .arc-body{position:absolute;inset:0;transform-origin:50% 100%;animation:arcIdle 1.7s ease-in-out infinite alternate;will-change:transform}
#arc .arc-f.foe .arc-body{animation-delay:-.8s}
#arc .arc-img{position:absolute;left:0;right:0;bottom:0;height:100%;width:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 6px 6px rgba(0,0,0,.55))}
#arc span.arc-img.hdl{aspect-ratio:auto;margin:0 auto}
#arc .arc-f.foe .arc-img{scale:-1 1}
#arc .arc-img.av{display:flex;align-items:flex-end;justify-content:center}
#arc .arc-sh{position:absolute;left:18%;right:18%;bottom:-2%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent)}
#arc .arc-glow{position:absolute;left:5%;right:5%;bottom:-6%;height:30%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,110,.75),transparent);opacity:0;transition:opacity .6s}
#arc .arc-f.won .arc-glow{opacity:1}
#arc .arc-f.atk .arc-body{animation:arcAtk .72s cubic-bezier(.3,.1,.3,1)}
#arc .arc-f.cast .arc-body{animation:arcCast .7s ease-out}
#arc .arc-f.hit .arc-body{animation:arcHit .55s ease-out}
#arc .arc-f.hit2 .arc-body{animation:arcHit2 .8s ease-out}
#arc .arc-f.blk .arc-body{animation:arcBlk .5s ease-out}
#arc .arc-f.dodge .arc-body{animation:arcDodge .6s cubic-bezier(.2,.8,.3,1)}
#arc .arc-f.ko .arc-body{animation:arcKo .9s ease-in forwards}
#arc .arc-f.won .arc-body{animation:arcWin .8s ease-out forwards}
/* painted effects */
#arc .arc-fxl{position:absolute;inset:0;z-index:3;pointer-events:none;transform:translateY(7%)}
#arc .arc-sp{position:absolute;width:36%;height:auto;translate:-50% -50%;pointer-events:none;will-change:transform,opacity;opacity:0;scale:var(--f,1) 1}
#arc .arc-sp.hitfx{animation:arcFx .56s ease-out forwards}
#arc .arc-sp.hitfx.cleave,#arc .arc-sp.hitfx.slash{width:44%;animation:arcSlash .5s ease-out forwards}
#arc .arc-sp.hitfx.two{animation-name:arcSlash2}
#arc .arc-sp.hitfx.bomb,#arc .arc-sp.hitfx.holy,#arc .arc-sp.hitfx.leaf{width:52%;animation:arcBurst .75s ease-out forwards}
#arc .arc-sp.hitfx.rune{width:40%}
#arc .arc-sp.hitfx.spirit{width:30%}
#arc .arc-sp.hitfx.flash{width:40%;animation:arcPop .4s ease-out forwards}
#arc .arc-sp.floor{width:64%;animation:arcFloor .75s ease-out forwards;transform-origin:50% 50%}
#arc .arc-sp.charge{width:34%;animation:arcCharge .6s ease-out forwards}
#arc .arc-sp.bolt{width:22%;translate:-50% -60%;animation:arcBolt .5s steps(1,end) forwards,arcFade .5s ease-in forwards}
#arc .arc-sp.roar{width:40%;animation:arcRoar .65s ease-out forwards}
#arc .arc-sp.dodge{width:40%;animation:arcFx .55s ease-out forwards}
#arc .arc-sp.barrier{width:34%;animation:arcWard .68s ease-out forwards}
#arc .arc-sp.block,#arc .arc-sp.parry{width:34%;animation:arcPop .48s ease-out forwards}
#arc .arc-sp.spark{width:26%;animation:arcPop .4s ease-out .05s forwards}
#arc .arc-pj{position:absolute;left:0;width:100%;height:0;z-index:3;animation:arcShot .4s linear forwards}
#arc .arc-pj.lob{animation:arcLob .4s linear forwards}
#arc .arc-pji{position:absolute;top:0;width:24%;translate:-50% -50%;scale:var(--f,1) 1}
#arc .arc-pji.bomb{width:14%;animation:arcSpin .4s linear}
#arc .arc-pji.spirit{width:20%}
#arc .arc-dmg{position:absolute;translate:-50% 0;font:400 30px/1 'Lilita One',sans-serif;color:#ff6a3a;-webkit-text-stroke:2px #3a0e04;paint-order:stroke;text-shadow:0 3px 0 #3a0e04;animation:arcDmg 1s ease-out forwards;z-index:4}
#arc .arc-dmg.big{font-size:42px;color:#ffd75a}
#arc .arc-flash{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:#fff}
#arc .arc-flash.fw{animation:arcFl .26s ease-out}
#arc .arc-flash.fr{background:radial-gradient(circle,rgba(255,240,200,.6),rgba(255,120,60,.15));animation:arcFl .2s ease-out}
#arc .arc-vig{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse 80% 70% at 50% 58%,transparent 55%,rgba(10,4,0,.7))}
/* camera: push-in with parallax (far slower than near), a zoom on the special, shake on blows */
#arc.p-fight .arc-far{animation:arcPushF 9.5s ease-out forwards}
#arc.p-fight .arc-near{animation:arcPushN 9.5s ease-out forwards;transform-origin:50% 75%}
#arc .arc-zoom{transform-origin:50% 60%}
#arc .arc-zoom.zmA{transform-origin:28% 55%;animation:arcZoom 1.3s ease-in-out}
#arc .arc-zoom.zmB{transform-origin:72% 55%;animation:arcZoom 1.3s ease-in-out}
#arc .arc-nearS.shk{animation:arcShk .32s linear}
#arc .arc-nearS.shk2{animation:arcShk2 .5s linear}
#arc .arc-farS.shkf{animation:arcShkF .4s linear}
#arc.hs .arc-near,#arc.hs .arc-near *{animation-play-state:paused!important}
/* the life bars */
#arc .arc-hud{position:absolute;left:0;right:0;top:0;z-index:6;display:flex;align-items:flex-start;gap:6px;padding:calc(10px + env(safe-area-inset-top)) 10px 0;opacity:0;translate:0 -20px;transition:opacity .4s,translate .4s}
#arc.p-fight .arc-hud{opacity:1;translate:0 0}
#arc .arc-hp{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
#arc .arc-hp.foe{align-items:flex-end}
#arc .arc-hp b{font:400 15px/1.1 'Lilita One',sans-serif;color:#fff6dc;text-shadow:0 2px 0 #000,0 0 6px #000;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#arc .arc-hp small{font-size:11px;font-weight:800;color:#ffe2a0;text-shadow:0 1px 2px #000}
#arc .arc-bar{position:relative;display:block;width:100%;height:14px;border-radius:7px;background:#2a0d06;border:2px solid #e2b04a;box-shadow:0 2px 6px rgba(0,0,0,.6),inset 0 2px 3px rgba(0,0,0,.7);overflow:hidden}
#arc .arc-bar u{position:absolute;inset:0;text-decoration:none;background:linear-gradient(#7ef08a,#24a94a 60%,#147a32);transform-origin:0 50%;transition:transform .35s ease-out}
#arc .arc-hp.foe .arc-bar u{transform-origin:100% 50%;background:linear-gradient(#ff8a6a,#d8322a 60%,#8d140f)}
#arc .arc-bar u.tr{background:#fff2c2;transition:transform .7s ease-in .35s}
#arc .arc-hvs{flex:none;margin-top:6px;font:400 22px/1 'Lilita One',sans-serif;font-style:normal;color:#ffd75a;-webkit-text-stroke:1.5px #4a1d06;paint-order:stroke;text-shadow:0 2px 0 #2a0d03}
/* the beat's caption */
#arc .arc-cap{position:absolute;left:0;right:0;top:20%;z-index:6;text-align:center;font:400 30px/1 'Lilita One',sans-serif;color:#fff;-webkit-text-stroke:2px #2a1203;paint-order:stroke;text-shadow:0 3px 0 #2a1203;opacity:0;pointer-events:none}
#arc .arc-cap.df{color:#bfe8ff}#arc .arc-cap.sp{color:#ffd75a;font-size:34px}
#arc .arc-cap.on{animation:arcCap 1.05s ease-out forwards}
/* the entrance */
#arc .arc-intro{position:absolute;inset:0;z-index:7;pointer-events:none}
#arc .arc-vs{position:absolute;left:50%;top:50%;translate:-50% -50%;font:400 84px/1 'Lilita One',sans-serif;color:#ffd75a;-webkit-text-stroke:3px #4a1d06;paint-order:stroke;text-shadow:0 6px 0 #2a0d03,0 0 30px rgba(255,180,60,.8);opacity:0}
#arc.p-vs .arc-vs{animation:arcSlam .5s cubic-bezier(.2,1.4,.4,1) forwards}
#arc.p-fight .arc-intro{opacity:0;transition:opacity .45s}
/* the end */
#arc .arc-res{position:absolute;left:0;right:0;top:24%;z-index:8;display:flex;flex-direction:column;align-items:center;opacity:0;pointer-events:none}
#arc .arc-res img{width:min(86%,380px);height:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.6))}
#arc .arc-res b{margin-top:-6px;font:400 40px/1 'Lilita One',sans-serif;color:#ffd75a;-webkit-text-stroke:2px #3a1404;paint-order:stroke;text-shadow:0 4px 0 #2a0d03}
#arc .arc-res.lose b{color:#e7e2dc}
#arc .arc-res:has(img) b{display:none}
#arc.p-end .arc-res{animation:arcRes .6s cubic-bezier(.2,1.3,.4,1) forwards}
#arc.p-end .arc-vig{background:radial-gradient(ellipse 80% 70% at 50% 58%,transparent 35%,rgba(10,4,0,.8))}
#arc .arc-skip{position:absolute;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:10;min-height:44px;padding:0 18px;border-radius:22px;border:2px solid rgba(233,196,106,.9);background:rgba(20,10,4,.72);color:#fff3d6;font:400 17px/1 'Lilita One',sans-serif;letter-spacing:.03em;cursor:pointer}
#arc.rm .arc-intro{display:none}
@keyframes arcIn{from{opacity:0}}
@keyframes arcBob{from{transform:translateY(0)}to{transform:translateY(-2.5%)}}
@keyframes arcJump{0%,100%{transform:translateY(0)}40%{transform:translateY(-9%)}}
@keyframes arcHush{0%{transform:translateY(0)}35%{transform:translateY(4%)}100%{transform:translateY(0)}}
@keyframes arcWave{from{transform:skewY(-6deg) scaleX(.92)}to{transform:skewY(8deg) scaleX(1.04)}}
@keyframes arcConf{0%{opacity:0;transform:translate(0,0)}10%{opacity:1}45%{transform:translate(0,var(--h)) rotate(180deg)}100%{opacity:0;transform:translate(10px,30px) rotate(420deg)}}
@keyframes arcIdle{from{transform:scale(1,1)}to{transform:scale(1.01,1.022)}}
@keyframes arcAtk{0%{transform:none}28%{transform:translateX(calc(var(--d)*-6%)) rotate(calc(var(--d)*-4deg)) scale(.98)}52%{transform:translateX(calc(var(--d)*44%)) translateY(-2%) rotate(calc(var(--d)*6deg)) scale(1.1)}72%{transform:translateX(calc(var(--d)*42%)) rotate(calc(var(--d)*5deg)) scale(1.1)}100%{transform:none}}
@keyframes arcCast{0%{transform:none}35%{transform:translateX(calc(var(--d)*-5%)) scale(1.05)}55%{transform:translateX(calc(var(--d)*6%)) scale(1.06)}100%{transform:none}}
@keyframes arcHit{0%{transform:none;opacity:1}18%{transform:translateX(calc(var(--d)*-13%)) rotate(calc(var(--d)*-7deg));opacity:.55}35%{opacity:1}100%{transform:none}}
@keyframes arcHit2{0%{transform:none;opacity:1}15%{transform:translateX(calc(var(--d)*-22%)) translateY(-3%) rotate(calc(var(--d)*-12deg));opacity:.5}30%{opacity:1}55%{transform:translateX(calc(var(--d)*-16%)) rotate(calc(var(--d)*-6deg))}100%{transform:none}}
@keyframes arcBlk{0%{transform:none}25%{transform:translateX(calc(var(--d)*-6%)) scale(.96,1.02)}100%{transform:none}}
@keyframes arcDodge{0%{transform:none;opacity:1}30%{transform:translateX(calc(var(--d)*-26%)) skewX(calc(var(--d)*8deg));opacity:.55}70%{transform:translateX(calc(var(--d)*-20%));opacity:1}100%{transform:none}}
@keyframes arcKo{0%{transform:none}35%{transform:translateX(calc(var(--d)*-12%)) rotate(calc(var(--d)*-17deg))}100%{transform:translateX(calc(var(--d)*-7%)) translateY(5%) rotate(calc(var(--d)*-13deg)) scale(.95);opacity:.82}}
@keyframes arcWin{0%{transform:none}50%{transform:translateY(-6%) scale(1.06)}100%{transform:translateY(-3%) scale(1.05)}}
@keyframes arcFx{0%{opacity:0;transform:scale(.5)}15%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
@keyframes arcSlash{0%{opacity:0;transform:rotate(-40deg) scale(.6)}20%{opacity:1}100%{opacity:0;transform:rotate(25deg) scale(1.2)}}
@keyframes arcSlash2{0%{opacity:0;transform:rotate(140deg) scale(.6)}20%{opacity:1}100%{opacity:0;transform:rotate(205deg) scale(1.15)}}
@keyframes arcBurst{0%{opacity:0;transform:scale(.3) rotate(-20deg)}18%{opacity:1}100%{opacity:0;transform:scale(1.35) rotate(25deg)}}
@keyframes arcPop{0%{opacity:0;transform:scale(.3)}20%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1.4)}}
@keyframes arcFloor{0%{opacity:0;transform:scale(.4,.18)}20%{opacity:1}100%{opacity:0;transform:scale(1.3,.42)}}
@keyframes arcCharge{0%{opacity:0;transform:scale(.4) rotate(0)}30%{opacity:.95}100%{opacity:0;transform:scale(1.1) rotate(160deg)}}
@keyframes arcBolt{0%{transform:scaleY(.2)}25%{transform:scaleY(1)}55%{transform:scaleX(-1)}100%{transform:scaleY(1)}}
@keyframes arcFade{0%{opacity:0}10%{opacity:1}100%{opacity:0}}
@keyframes arcRoar{0%{opacity:0;transform:scale(.5)}25%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
@keyframes arcWard{0%{opacity:0;transform:scale(.7)}25%{opacity:1;transform:scale(1.04)}70%{opacity:.9}100%{opacity:0;transform:scale(1.1)}}
@keyframes arcShot{from{transform:translateX(0)}to{transform:translateX(var(--tx))}}
@keyframes arcLob{0%{transform:translate(0,0)}50%{transform:translate(calc(var(--tx)/2),-90px)}100%{transform:translate(var(--tx),0)}}
@keyframes arcSpin{to{rotate:540deg}}
@keyframes arcDmg{0%{opacity:0;transform:translateY(10px) scale(.6)}15%{opacity:1;transform:translateY(0) scale(1.15)}70%{opacity:1}100%{opacity:0;transform:translateY(-60px) scale(1)}}
@keyframes arcFl{0%{opacity:.75}100%{opacity:0}}
@keyframes arcPushF{from{transform:scale(1)}to{transform:scale(1.04) translateY(.6%)}}
@keyframes arcPushN{from{transform:scale(1)}to{transform:scale(1.12) translateY(1.5%)}}
@keyframes arcZoom{0%,100%{transform:none}35%,70%{transform:scale(1.14)}}
@keyframes arcShk{0%,100%{transform:none}20%{transform:translate(-7px,3px)}40%{transform:translate(6px,-4px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-1px)}}
@keyframes arcShk2{0%,100%{transform:none}10%{transform:translate(-14px,6px) rotate(-.6deg)}25%{transform:translate(12px,-8px) rotate(.5deg)}45%{transform:translate(-8px,5px)}65%{transform:translate(6px,-3px)}85%{transform:translate(-3px,1px)}}
@keyframes arcShkF{0%,100%{transform:none}25%{transform:translate(-3px,1px)}55%{transform:translate(3px,-2px)}80%{transform:translate(-1px,1px)}}
@keyframes arcCap{0%{opacity:0;transform:scale(1.8)}15%{opacity:1;transform:scale(.95)}25%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
@keyframes arcSlam{0%{opacity:0;transform:scale(3)}60%{opacity:1;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes arcRes{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:none}}
/* 39-053 choreography: approach, step, dash with after-images, wind-up, swing, hit-stop, knockback, defences, camera */
#arc .arc-punch{position:absolute;inset:0;will-change:transform}
#arc .arc-zoom{transition:transform .35s cubic-bezier(.3,.7,.3,1);transform-origin:50% 62%}
#arc .arc-zoom.onB{transform:translateX(-6%) scale(1.08)}#arc .arc-zoom.onA{transform:translateX(6%) scale(1.08)}#arc .arc-zoom.mid{transform:scale(1.12)}
#arc.slow .arc-zoom.onB{transform:translateX(-11%) scale(1.22);transition-duration:.7s}#arc.slow .arc-zoom.onA{transform:translateX(11%) scale(1.22);transition-duration:.7s}
#arc .arc-punch.pz{animation:arcPz .28s ease-out}#arc .arc-punch.pz2{animation:arcPz2 .45s ease-out}
#arc .arc-nearS.shk3{animation:arcShk3 .7s linear}
#arc .arc-f{transform-origin:50% 100%}
#arc.p-walk .arc-f{animation:arcEnter 1.7s cubic-bezier(.3,.1,.4,1) both}
#arc.p-fight .arc-f{animation:arcStep 1.25s ease-in-out infinite alternate}
#arc.p-fight .arc-f.foe{animation-delay:-.6s}
#arc .arc-rig{position:absolute;bottom:0;left:50%;height:100%;aspect-ratio:640/1000;translate:-50% 0;transform-origin:50% 100%;will-change:transform}
#arc canvas.arc-rig{width:auto}
#arc .arc-f.foe .arc-rig{scale:-1 1}
#arc .arc-up{position:absolute;inset:0;will-change:transform}
#arc .arc-pt{position:absolute;display:block;will-change:transform}
#arc .arc-plate{position:absolute;bottom:calc(84px + env(safe-area-inset-bottom));z-index:7;padding:8px 16px 9px;border-radius:12px;background:linear-gradient(rgba(20,10,4,.82),rgba(20,10,4,.6));border:1.5px solid rgba(233,196,106,.85);opacity:0;transform:translateY(12px);transition:opacity .3s,transform .35s cubic-bezier(.2,1.3,.4,1);pointer-events:none;max-width:70%}
#arc .arc-plate.me{left:12px}#arc .arc-plate.foe{right:12px;text-align:right}
#arc .arc-plate b{display:block;font:400 26px/1 'Lilita One',sans-serif;color:#fff6dc;-webkit-text-stroke:1px #2a1203;paint-order:stroke;text-shadow:0 2px 0 #2a1203;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#arc .arc-plate small{display:block;margin-top:3px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#ffd75a}
#arc.pl-me .arc-plate.me,#arc.pl-foe .arc-plate.foe{opacity:1;transform:none}
#arc .arc-f.atk,#arc .arc-f.atkF,#arc .arc-f.clash.me{z-index:3}
#arc .arc-ghost{position:absolute;inset:0;opacity:0;pointer-events:none;transform-origin:50% 100%}
#arc .arc-ghost .arc-img{filter:none}
#arc .arc-aura{position:absolute;left:4%;right:4%;top:14%;bottom:2%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--sc) 80%,transparent),transparent);opacity:0;mix-blend-mode:screen}
#arc .arc-aura.on{animation:arcAura .85s ease-out}
#arc .arc-f.atk .arc-body{animation:arcAtk .82s cubic-bezier(.3,.1,.3,1)}
#arc .arc-f.atk .arc-ghost.g1{animation:arcAtk .82s cubic-bezier(.3,.1,.3,1) 40ms,arcGh1 .82s 40ms}
#arc .arc-f.atk .arc-ghost.g2{animation:arcAtk .82s cubic-bezier(.3,.1,.3,1) 85ms,arcGh2 .82s 85ms}
#arc .arc-f.atkF .arc-body{animation:arcAtkF 1.4s cubic-bezier(.3,.1,.3,1)}
#arc .arc-f.atkF .arc-ghost.g1{animation:arcAtkF 1.4s cubic-bezier(.3,.1,.3,1) 60ms,arcGh1 1.4s 60ms}
#arc .arc-f.atkF .arc-ghost.g2{animation:arcAtkF 1.4s cubic-bezier(.3,.1,.3,1) 120ms,arcGh2 1.4s 120ms}
#arc .arc-f.clash .arc-body{animation:arcClash .7s cubic-bezier(.3,.1,.3,1)}
#arc .arc-f.clash .arc-ghost.g1{animation:arcClash .7s cubic-bezier(.3,.1,.3,1) 40ms,arcGh1 .7s 40ms}
#arc .arc-f.shoot .arc-body{animation:arcShoot .7s ease-out}
#arc .arc-f.cast .arc-body{animation:arcCast .75s ease-out}
#arc .arc-f.hit .arc-body{animation:arcHit .7s ease-out}
#arc .arc-f.hit2 .arc-body{animation:arcHit2 .9s ease-out}
#arc .arc-f.hitF .arc-body{animation:arcHitF 1.2s cubic-bezier(.2,.8,.3,1) forwards}
#arc .arc-f.blk .arc-body{animation:arcBlk .6s ease-out}
#arc .arc-f.parry .arc-body{animation:arcParry .55s ease-out}
#arc .arc-f.dodge .arc-body{animation:arcDodge .7s cubic-bezier(.2,.8,.3,1)}
#arc .arc-f.dodge .arc-ghost.g1{animation:arcDodge .7s cubic-bezier(.2,.8,.3,1) 50ms,arcGh1 .7s 50ms}
#arc .arc-f.ko .arc-body{animation:arcKo2 .9s ease-in forwards}
#arc .arc-body .wpn.glint{animation:arcGlint .55s ease-out .15s}
#arc .arc-lb{position:absolute;left:0;right:0;height:9%;z-index:5;background:#000;transform:scaleY(0);transition:transform .3s ease-out;pointer-events:none}
#arc .arc-lb.t{top:0;transform-origin:50% 0}#arc .arc-lb.b{bottom:0;transform-origin:50% 100%}
#arc.lbx .arc-lb{transform:none}
#arc .arc-cap.cl{color:#ffb35a;font-size:36px}#arc .arc-cap.fn{color:#ff6a3a;font-size:40px;top:16%}
/* bigger, brighter effects */
#arc .arc-sp.hitfx{width:50%}
#arc .arc-sp.hitfx.cleave,#arc .arc-sp.hitfx.slash{width:62%}#arc .arc-sp.hitfx.cleave.big,#arc .arc-sp.hitfx.slash.big{width:78%}
#arc .arc-sp.hitfx.bomb,#arc .arc-sp.hitfx.holy,#arc .arc-sp.hitfx.leaf{width:66%}#arc .arc-sp.hitfx.big.bomb,#arc .arc-sp.hitfx.big.holy,#arc .arc-sp.hitfx.big.leaf{width:80%}
#arc .arc-sp.hitfx.flash{width:54%}#arc .arc-sp.hitfx.flash.big{width:72%}
#arc .arc-sp.hitfx.rune{width:52%}#arc .arc-sp.hitfx.spirit{width:42%}
#arc .arc-sp.floor{width:80%}
#arc .arc-sp.sparks{width:46%;animation:arcPop .5s ease-out forwards}#arc .arc-sp.sparks.big{width:66%}
#arc .arc-sp.dust{width:48%;translate:-50% -78%;animation:arcDust .75s ease-out forwards;transform-origin:50% 100%}#arc .arc-sp.dust.big{width:66%}
#arc .arc-sp.ring{width:42%;animation:arcRing .55s ease-out forwards}#arc .arc-sp.ring.big{width:62%}
#arc .arc-sp.streak{width:46%;animation:arcStreak .38s ease-out forwards}
#arc .arc-sp.block,#arc .arc-sp.parry{width:44%}#arc .arc-sp.barrier{width:42%}
#arc .arc-pji{width:30%}#arc .arc-pji.bomb{width:18%}
@keyframes arcEnter{from{transform:translate(calc(var(--d)*-36%),-66%) scale(.34)}to{transform:none}}
@keyframes arcStep{from{transform:translateX(0)}to{transform:translateX(calc(var(--d)*2.5%)) translateY(-.5%)}}
@keyframes arcAtk{0%{transform:none}16%{transform:translateX(calc(var(--d)*-7%)) rotate(calc(var(--d)*-7deg)) scale(1.04,.93)}34%{transform:translateX(calc(var(--d)*44%)) translateY(-3%) rotate(calc(var(--d)*4deg)) scale(1.12,.95)}44%{transform:translateX(calc(var(--d)*50%)) rotate(calc(var(--d)*13deg)) scale(1.07,1.02)}72%{transform:translateX(calc(var(--d)*48%)) rotate(calc(var(--d)*11deg)) scale(1.05,1.02)}88%{transform:translateX(calc(var(--d)*10%)) rotate(calc(var(--d)*-3deg))}100%{transform:none}}
@keyframes arcAtkF{0%{transform:none}15%{transform:translateX(calc(var(--d)*-10%)) rotate(calc(var(--d)*-10deg)) scale(1.06,.9)}36%{transform:translateX(calc(var(--d)*46%)) translateY(-6%) rotate(calc(var(--d)*-4deg)) scale(1.14,.94)}45%{transform:translateX(calc(var(--d)*52%)) translateY(-2%) rotate(calc(var(--d)*16deg)) scale(1.1,1.04)}70%{transform:translateX(calc(var(--d)*50%)) rotate(calc(var(--d)*14deg)) scale(1.08,1.02)}100%{transform:translateX(calc(var(--d)*8%))}}
@keyframes arcClash{0%{transform:none}28%{transform:translateX(calc(var(--d)*-6%)) scale(1.04,.94)}50%{transform:translateX(calc(var(--d)*30%)) rotate(calc(var(--d)*9deg)) scale(1.1,.97)}62%{transform:translateX(calc(var(--d)*24%)) rotate(calc(var(--d)*-6deg))}100%{transform:none}}
@keyframes arcShoot{0%{transform:none}30%{transform:translateX(calc(var(--d)*-6%)) scale(1.03,.97)}38%{transform:translateX(calc(var(--d)*-8%))}45%{transform:translateX(calc(var(--d)*3%)) scale(.98,1.02)}100%{transform:none}}
@keyframes arcCast{0%{transform:none}30%{transform:translateX(calc(var(--d)*-6%)) scale(1.05) rotate(calc(var(--d)*-4deg))}55%{transform:translateX(calc(var(--d)*9%)) scale(1.08)}100%{transform:none}}
@keyframes arcHit{0%{transform:none;opacity:1}10%{transform:translateX(calc(var(--d)*-16%)) rotate(calc(var(--d)*-9deg)) scale(.95,1.03);opacity:.5}25%{opacity:1}35%{transform:translateX(calc(var(--d)*-22%)) rotate(calc(var(--d)*-4deg))}55%{transform:translateX(calc(var(--d)*-18%)) rotate(calc(var(--d)*3deg))}100%{transform:none}}
@keyframes arcHit2{0%{transform:none;opacity:1}10%{transform:translateX(calc(var(--d)*-24%)) translateY(-4%) rotate(calc(var(--d)*-14deg)) scale(.94,1.04);opacity:.45}25%{opacity:1}40%{transform:translateX(calc(var(--d)*-32%)) rotate(calc(var(--d)*-6deg))}60%{transform:translateX(calc(var(--d)*-27%)) rotate(calc(var(--d)*4deg))}100%{transform:none}}
@keyframes arcHitF{0%{transform:none;opacity:1}8%{transform:translateX(calc(var(--d)*-20%)) translateY(-8%) rotate(calc(var(--d)*-16deg));opacity:.4}20%{opacity:1}45%{transform:translateX(calc(var(--d)*-36%)) translateY(-2%) rotate(calc(var(--d)*-22deg))}100%{transform:translateX(calc(var(--d)*-30%)) translateY(4%) rotate(calc(var(--d)*-18deg))}}
@keyframes arcBlk{0%{transform:none}12%{transform:translateX(calc(var(--d)*-9%)) scale(.95,1.03) rotate(calc(var(--d)*-3deg))}40%{transform:translateX(calc(var(--d)*-11%))}100%{transform:none}}
@keyframes arcParry{0%{transform:none}18%{transform:translateX(calc(var(--d)*5%)) rotate(calc(var(--d)*9deg))}45%{transform:translateX(calc(var(--d)*-6%)) rotate(calc(var(--d)*-3deg))}100%{transform:none}}
@keyframes arcDodge{0%{transform:none;opacity:1}25%{transform:translateX(calc(var(--d)*-32%)) translateY(-7%) rotate(calc(var(--d)*-12deg)) skewX(calc(var(--d)*7deg));opacity:.6}55%{transform:translateX(calc(var(--d)*-27%)) translateY(1%);opacity:1}100%{transform:none}}
@keyframes arcKo2{0%{transform:translateX(calc(var(--d)*-30%)) translateY(4%) rotate(calc(var(--d)*-18deg))}100%{transform:translateX(calc(var(--d)*-28%)) translateY(9%) rotate(calc(var(--d)*-26deg)) scale(.94);opacity:.85}}
@keyframes arcGh1{0%,22%{opacity:0}35%,55%{opacity:.4}75%,100%{opacity:0}}
@keyframes arcGh2{0%,22%{opacity:0}35%,55%{opacity:.2}75%,100%{opacity:0}}
@keyframes arcAura{0%{opacity:0;transform:scale(.7)}30%{opacity:.9;transform:scale(1.05)}100%{opacity:0;transform:scale(1.2)}}
@keyframes arcGlint{0%,100%{filter:none}40%{filter:brightness(2.2) saturate(1.3)}}
@keyframes arcPz{0%,100%{transform:none}30%{transform:scale(1.05)}}
@keyframes arcPz2{0%,100%{transform:none}25%{transform:scale(1.12)}60%{transform:scale(1.08)}}
@keyframes arcShk3{0%,100%{transform:none}8%{transform:translate(-18px,8px) rotate(-.8deg)}20%{transform:translate(16px,-10px) rotate(.7deg)}35%{transform:translate(-12px,7px)}50%{transform:translate(9px,-5px)}68%{transform:translate(-5px,3px)}85%{transform:translate(2px,-1px)}}
@keyframes arcDust{0%{opacity:0;transform:scale(.5) translateX(0)}20%{opacity:.95}100%{opacity:0;transform:scale(1.3) translateX(calc(var(--f,1)*30px)) translateY(-8px)}}
@keyframes arcRing{0%{opacity:0;transform:scale(.25)}20%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
@keyframes arcStreak{0%{opacity:0;transform:scaleX(.4)}30%{opacity:.9}100%{opacity:0;transform:scaleX(1.25)}}
@media (prefers-reduced-motion:reduce){#arc,#arc *,#arc *::before,#arc *::after{animation:none!important;transition:none!important}
 #arc .arc-res{opacity:1}#arc .arc-hud{opacity:1;translate:none}#arc .arc-f.ko .arc-body{transform:rotate(calc(var(--d)*-12deg)) translateY(6%);opacity:.8}}


/* (39-078) the Arena show, light: the filmed walk-ins (a picture steps in where there is no film), still figures */
#ars{position:fixed;inset:0;z-index:9600;background:#0b0603;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;color:#fff3d6;transition:opacity .3s}
#ars.out{opacity:0;pointer-events:none}
#ars *{box-sizing:border-box}
#ars .ars-shot{position:absolute;top:0;bottom:0;left:50%;width:min(100%,62vh);translate:-50% 0;overflow:hidden;opacity:0;background:#1a0f07}
#ars .ars-shot.on{opacity:1}
#ars .ars-bg{position:absolute;inset:-4%;background:#3a2412 center top/cover no-repeat;filter:brightness(.72) saturate(.9) blur(1.5px)}
#ars .ars-shot.on .ars-bg{animation:arsBg 3.2s ease-out both}
#ars .ars-pic{position:absolute;left:6%;right:6%;bottom:7%;height:76%}
#ars .ars-fig{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 10px 10px rgba(0,0,0,.6))}
#ars span.ars-fig.hdl{aspect-ratio:auto;margin:0 auto}
#ars .ars-fig.av{display:flex;align-items:flex-end;justify-content:center}
#ars .ars-shot.foe .ars-fig{scale:-1 1}
#ars .ars-shot.on .ars-pic{animation:arsIn .9s cubic-bezier(.2,.9,.3,1) both}
#ars .ars-shot.foe.on .ars-pic{animation-name:arsInR}
#ars .ars-dust{position:absolute;left:-25%;right:-25%;bottom:-8%;height:32%;background:center/contain no-repeat;opacity:0;pointer-events:none}
#ars .ars-shot.on .ars-dust{animation:arsDust 1.3s ease-out .45s both}
#ars .ars-film{position:absolute;inset:0}
#ars .ars-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .15s}
#ars .ars-v.on{opacity:1}
#ars .ars-card{position:absolute;left:5%;bottom:calc(12% + env(safe-area-inset-bottom));z-index:3;max-width:80%;padding:8px 18px 9px 14px;background:linear-gradient(90deg,rgba(20,10,4,.9),rgba(20,10,4,.6) 75%,rgba(20,10,4,0));border-left:4px solid #e9c46a;opacity:0;transform:translateX(-24px)}
#ars .ars-shot.foe .ars-card{left:auto;right:5%;text-align:right;border-left:0;border-right:4px solid #e9c46a;background:linear-gradient(270deg,rgba(20,10,4,.9),rgba(20,10,4,.6) 75%,rgba(20,10,4,0));transform:translateX(24px)}
#ars .ars-card.in{animation:arsCard .45s cubic-bezier(.2,.9,.3,1) forwards}
#ars .ars-card b{display:block;font:400 27px/1.05 'Lilita One',sans-serif;letter-spacing:.02em;color:#fff3d6;text-shadow:0 2px 0 rgba(0,0,0,.6)}
#ars .ars-card small{display:block;margin-top:2px;font:800 11.5px/1.3 Nunito,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#e9c46a}
#ars .ars-fl{position:absolute;inset:0;z-index:5;background:#fff8e0;opacity:0;pointer-events:none}
#ars .ars-fl.fl{animation:arsFl .32s ease-out}
#ars .ars-vs{position:absolute;left:50%;top:42%;z-index:6;translate:-50% -50%;font:400 104px/1 'Lilita One',sans-serif;color:#ffd86a;text-shadow:0 5px 0 #6b3a0c,0 0 34px rgba(255,190,60,.85);opacity:0;scale:2.6;pointer-events:none}
#ars.vs .ars-vs{animation:arsVs .45s cubic-bezier(.2,1.4,.4,1) forwards}
#ars.vs .ars-shot.on{filter:brightness(.55)}
#ars .arc-skip{position:absolute;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:10;min-height:44px;padding:0 18px;border-radius:22px;border:2px solid rgba(233,196,106,.9);background:rgba(20,10,4,.72);color:#fff3d6;font:400 17px/1 'Lilita One',sans-serif;letter-spacing:.03em;cursor:pointer}
@keyframes arsBg{from{transform:scale(1.14)}to{transform:scale(1.04)}}
@keyframes arsIn{from{transform:translateX(-72%) scale(.9);opacity:0}60%{opacity:1}to{transform:none;opacity:1}}
@keyframes arsInR{from{transform:translateX(72%) scale(.9);opacity:0}60%{opacity:1}to{transform:none;opacity:1}}
@keyframes arsDust{0%{opacity:0;transform:scale(.6)}30%{opacity:.85}100%{opacity:0;transform:scale(1.5) translateY(-10%)}}
@keyframes arsCard{to{opacity:1;transform:none}}
@keyframes arsFl{0%{opacity:.5}100%{opacity:0}}
@keyframes arsVs{to{opacity:1;scale:1}}
/* the fight: still figures step in at once after the films; a photoreal figure keeps its own colours */
#arc.p-walk.quick .arc-f{animation-duration:.6s}
#arc .arc-img.st{filter:drop-shadow(0 8px 8px rgba(0,0,0,.6)) contrast(1.03)}
/* a photoreal figure is cut tight (no margin as a doll's picture has): two whole figures side by side with a gap,
   each standing on its shadow on the sand */
#arc .arc-f:has(.arc-img.st){width:45%;height:36%;bottom:6%}
#arc .arc-f.me:has(.arc-img.st){left:4%}#arc .arc-f.foe:has(.arc-img.st){right:4%}
#arc .arc-f:has(.arc-img.st) .arc-sh{left:8%;right:8%;bottom:-3.5%;height:9%;background:radial-gradient(closest-side,rgba(20,8,0,.78),rgba(20,8,0,.35) 60%,transparent)}
/* no letterbox bars in the light show (they read as a black band at the bottom of the sand) */
#arc .arc-lb{display:none}
/* dwarves and goblins stand shorter than the others */
#arc .arc-img.st[src*="/ars_st_dwarf"],#arc .arc-img.st[src*="/ars_st_goblin"],#arc .arc-img.st[src*="/ars_pose_dwarf"],#arc .arc-img.st[src*="/ars_pose_goblin"]{height:80%}
/* a figure with poses (all cut on one box, wider than the figure): sized by its height, centred, the box may reach
   past the sides; so every pose has the same scale and the feet stay on the same spot */
#arc .arc-img.st[src*="/ars_pose_"]{width:auto;max-width:none;left:50%;right:auto;translate:-50% 0}
/* the poses (39-078): stacked over the idle figure, the one of the figure's data-pose shown */
#arc .arc-f img.arc-img.st.po{visibility:hidden}
#arc .arc-f[data-pose]:not([data-pose="idle"]) img.arc-img.st:not(.po){visibility:hidden}
#arc .arc-f[data-pose="wind"] img.po[data-p="wind"],#arc .arc-f[data-pose="strike"] img.po[data-p="strike"],#arc .arc-f[data-pose="guard"] img.po[data-p="guard"],
#arc .arc-f[data-pose="hit"] img.po[data-p="hit"],#arc .arc-f[data-pose="win"] img.po[data-p="win"]{visibility:visible}
/* the loser falls and fades */
#arc .arc-f.ko{opacity:.62;transition:opacity 1.1s ease-in .5s}
/* a still figure at the edge of the sand tips over where it stands (not knocked out of the picture) */
#arc .arc-f.ko:has(.arc-img.st) .arc-body{animation:arsKo .9s ease-in forwards}
@keyframes arsKo{0%{transform:rotate(calc(var(--d)*-6deg))}60%{transform:translateX(calc(var(--d)*20%)) translateY(4%) rotate(calc(var(--d)*-24deg))}100%{transform:translateX(calc(var(--d)*22%)) translateY(8%) rotate(calc(var(--d)*-20deg)) scale(.95)}}
#arc .ars-coins{position:absolute;inset:0;width:100%;height:100%;z-index:7;pointer-events:none}
#arc .arc-sp.ars-bolt{width:34%;filter:drop-shadow(0 0 14px rgba(160,200,255,.9)) brightness(1.3)}


/* (39-076) the fields view's hint chip ("Tap a field to develop it", the field crew's timer) sat at the top left,
   under the bell / quests / Town buttons (.hud2): it moves to the top right, which is free in the fields view */
.vmap.fmap>.vchip:not(.hol){left:auto;right:10px;max-width:calc(100% - 180px);text-align:right}
.vmap.fmap>.vchip.hol{top:44px}
/* (39-076) the town fills the space between the top bar and the tab bar (03-228 fitTown --townH): the first .vmap
   rule's max-height:74vh still capped it, leaving an empty ~55 px band above the tab bar on phones */
body[data-tab="village"] .vmap{max-height:none!important}
/* (39-076) the map's home button: the player's own Throne Hall on a disc of the tribe's colour, in 39-048's gold frame */
.mh48 #mapbox .dpad .ct .tp76-home{position:relative;display:block;width:58px;height:58px}
.mh48 #mapbox .dpad .ct .tp76-home>i{position:absolute;left:17%;top:17%;width:66%;height:66%;border-radius:50%;
 background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--tc) 55%,#fff 45%) 0,var(--tc) 58%,color-mix(in srgb,var(--tc) 60%,#000 40%) 100%);box-shadow:inset 0 2px 4px rgba(0,0,0,.45)}
nav.tabs button>span>img.tp76-nav{width:32px;height:28px;object-fit:contain;display:block;margin:0 auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
.mh48 #mapbox .dpad .ct img.tp76-hall{position:absolute;left:50%;top:52%;width:44px;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}


/* (39-081) a tab's sections below the first screen are laid out and painted only when they scroll near the
   screen (content-visibility:auto; until then each keeps its last size, or about 220 px the first time): a tab
   change laid out and styled every card of a long tab (army, hero, clan, mail, more) at once, ~150-190 ms on a
   mid-range phone, now ~40-80 ms. Headings, button rows, the town and the map are left as they are (their
   icons and scrollers reach past their box, which this would clip). */
body:not([data-tab="map"]):not([data-tab="village"]) #view>:not(:first-child):not(h1):not(h2):not(h3):not(.seg):not(.btns):not(.vmap){content-visibility:auto;contain-intrinsic-size:auto 220px}


/* (clean and bright) the text outlines were five stacked dark copies of each letter (0 2-3 px offsets in every
   direction): bold, but heavy and smeared on a phone. Titles, the resource numbers, the town's big buttons and the
   Fields switch keep a thin dark edge (still readable over the painted art) and a soft shade instead.
   The celebrations (level up, the opening titles) keep their own. */
html #view h1,html .sheet h2,html #sheetBody h2,html #banner h2{text-shadow:0 1px 0 rgba(42,22,6,.9),0 2px 4px rgba(0,0,0,.35)!important}
html .top .rs b{text-shadow:0 1px 0 #1d1208,0 0 3px rgba(0,0,0,.55)!important}
html .hud-btn .ht{text-shadow:0 1px 0 #3a1e08,0 1px 3px rgba(0,0,0,.4)!important}
html .h2b b{text-shadow:0 1px 0 #6a3004,0 1px 2px rgba(0,0,0,.3)!important}
html .am-hp b{text-shadow:0 1px 0 #3a1e06,0 2px 4px rgba(0,0,0,.35)!important}
html .hs-sl{text-shadow:0 1px 2px rgba(0,0,0,.7)!important}
/* the page behind the tabs: a warm mid-brown instead of near-black, so the screens read lighter */
html body{background:#4a3019 radial-gradient(ellipse at 50% 0%,#7a5532 0%,#4a3019 72%) fixed}
/* each tab's backdrop faded to near-black at the bottom (#1d1209; the brick under 55-75 % black): lifted to a warm
   brown, still dark enough for the light headings and the cards to stand out */
html body[data-tab="army"] #view{background:radial-gradient(ellipse at 50% -6%,rgba(255,170,80,.34),transparent 46%),radial-gradient(ellipse at 0% 40%,rgba(170,50,30,.18),transparent 40%),radial-gradient(ellipse at 100% 70%,rgba(170,50,30,.14),transparent 40%),linear-gradient(180deg,#5c3b20,#4a2f1a 55%,#3f2716)!important}
html body[data-tab="mail"] #view{background:radial-gradient(ellipse at 50% -6%,rgba(255,200,110,.32),transparent 46%),radial-gradient(ellipse at 100% 30%,rgba(100,120,200,.14),transparent 45%),linear-gradient(180deg,#593c21,#48301b 55%,#3d2817)!important}
html body.tab-clan #view{background:radial-gradient(ellipse at 12% 8%,rgba(255,180,80,.3),transparent 32%),radial-gradient(ellipse at 88% 8%,rgba(255,180,80,.3),transparent 32%),linear-gradient(180deg,rgba(20,10,4,.08),rgba(20,10,4,.3)),url(/c/brick.webp) center top/260px repeat #3d2a18!important}
html body.tab-more #view{background:radial-gradient(ellipse at 50% -5%,rgba(255,210,100,.38),transparent 45%),radial-gradient(ellipse at 10% 10%,rgba(255,160,60,.22),transparent 30%),radial-gradient(ellipse at 90% 10%,rgba(255,160,60,.22),transparent 30%),linear-gradient(180deg,rgba(50,14,8,.3),rgba(20,8,4,.45)),url(/c/brick.webp) center top/240px repeat #3d2216!important}


/* (39-082) the first screens, painted: lettering headings (the words stay in the heading, visually hidden), the sign-in card's
   gold-and-blue frame, painted button plates (9-slice border-image, so any width works), each tribe's own frame,
   painted arrows and the tribe step's own backdrop. Art: public/a/ob_*.webp */
.ob82vh{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap!important;border:0!important}
.ob82lt{position:relative;text-shadow:none!important;line-height:0!important}
img.ob82l{display:block;height:auto;max-width:100%;margin:0 auto;user-select:none;-webkit-user-drag:none}
/* sign-in card */
#app>.ob.ob82 .login.ob82p{position:relative;isolation:isolate;background:linear-gradient(180deg,#2c5fa6 0%,#1d457f 55%,#173a6c 100%)!important;border:0!important;border-radius:26px!important;box-shadow:0 10px 26px rgba(8,18,40,.45)!important;padding:40px 28px 40px!important;overflow:visible!important}
#app>.ob.ob82 .login.ob82p::before{content:'';position:absolute;inset:-6px;z-index:2;pointer-events:none;border:34px solid transparent;border-image:url(/a/ob_panel.3df5bfc8.webp) 56 / 34px stretch}
#app>.ob.ob82 .login.ob82p>*{position:relative;z-index:3}
#app>.ob.ob82 .login.ob82p h2.t73{margin:0 0 10px!important}
#app>.ob.ob82 .login.ob82p h2.t73 img.ob82l{width:min(300px,86%)}
#app>.ob.ob82 .login.ob82p .ret73,#app>.ob.ob82 .login.ob82p .gn73{color:#eaf1ff!important;font-weight:800;text-shadow:0 1px 0 rgba(10,24,52,.6)}
#app>.ob.ob82 .login.ob82p .g73{background:none!important;border:0!important;border-style:solid!important;border-width:18px 24px!important;border-image:url(/a/ob_btn_ivory.e47b3e85.webp) 58 74 fill / 18px 24px stretch!important;border-radius:0!important;box-shadow:none!important;color:#2a2a2a!important;min-height:60px;padding:0 4px!important;font-size:17px!important}
#app>.ob.ob82 .login.ob82p .g73:after{display:none}
#app>.ob.ob82 .login.ob82p .guest73{background:none!important;border:0!important;border-style:solid!important;border-width:18px 24px!important;border-image:url(/a/ob_btn_wood.ff040597.webp) 58 74 fill / 18px 24px stretch!important;border-radius:0!important;box-shadow:none!important;color:#fff7e0!important;min-height:60px;padding:0 4px!important;font-weight:900!important;font-size:17px!important;text-shadow:0 2px 0 rgba(70,34,6,.75);display:flex!important;align-items:center;justify-content:center;gap:8px}
.ob82 .guest73 img.ob82ic{width:30px;height:30px;flex:none}
.ob82 .ob12more{min-height:48px}
.ob82 .ob12more>span{border:0!important;width:30px!important;height:30px!important;transform:none!important;margin-top:4px}
.ob82 .ob12more>span img{display:block;width:30px;height:30px}
/* tribe step: backdrop */
.ob82t .ob12bg{display:none}
.ob82bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#5d7a52}
.ob82bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.ob82bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,12,4,.18) 0,rgba(20,12,4,0) 22%,rgba(20,12,4,0) 60%,rgba(20,12,4,.5) 100%)}
.ob82t h1.tpick.ob82lt{margin:4px auto 0!important}
.ob82t h1.tpick img.ob82l{width:min(330px,86vw)}
.ob82t h1.tpick+p{color:#fff!important;font-weight:800;text-shadow:0 1px 0 rgba(40,20,4,.8),0 0 8px rgba(40,20,4,.55)}
/* tribe step: the stage in the tribe's own frame */
.ft73.ob82st{border:0!important;border-radius:14px!important;box-shadow:0 10px 24px rgba(20,10,2,.4)!important;outline:0!important}
.ft73.ob82st::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;border:30px solid transparent;border-image:var(--fr) 80 / 30px stretch}
.ft73.ob82st .ft73-cap{padding:12px 38px 50px 38px!important;z-index:3}
.ft73.ob82st .ft73-dots{bottom:34px!important;z-index:5}
.ft73.ob82st .ft73-nav{z-index:6;width:50px;height:50px;border:0!important;border-radius:50%;background:url(/a/ob_ic_next.b7790492.webp) center/contain no-repeat!important;box-shadow:none!important;color:transparent!important;font-size:0!important;filter:drop-shadow(0 2px 0 rgba(40,20,4,.45))}
.ft73.ob82st .ft73-nav.prev{left:24px!important;transform:scaleX(-1)}
.ft73.ob82st .ft73-nav.next{right:24px!important}
.ft73.ob82st .ft73-name h2.ob82lt{flex:1 1 auto;min-width:0}
.ft73.ob82st .ft73-name img.ob82tn{width:auto;height:clamp(46px,12.5vw,66px);max-width:100%;margin:0}
.ft73.ob82st .ft73-heroes small.ob82lt{text-transform:none;letter-spacing:0;margin-right:6px}
.ft73.ob82st .ft73-heroes small img.ob82l{width:auto;height:24px}
.ft73.ob82st .ft73-perks li::before{content:'';display:inline-block;width:17px;height:14px;margin-right:5px;vertical-align:-2px;background:url(/a/ob_ic_crown.71481a82.webp) center/contain no-repeat}
/* tribe step: the strip cards in their tribe's frame */
.tc2.ob82c{border:0!important;border-radius:8px!important}
.tc2.ob82c::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border:11px solid transparent;border-image:var(--fr) 30 / 11px stretch}
.tc2.ob82c .tcname{position:relative;z-index:4}
.tc2.ob82c.on{outline:3px solid #ffd65a!important;outline-offset:2px}
.ob82t .ft73-more>summary{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;background:rgba(40,22,6,.72);color:#ffe08a;box-shadow:0 0 0 1.5px rgba(255,214,120,.55)}
/* "Continue as ...": a painted gold plate */
.obbar .btn.tgo.ob82go{background:none!important;border:0!important;border-style:solid!important;border-width:20px 30px!important;border-image:url(/a/ob_btn_gold.ddf94872.webp) 58 74 fill / 20px 30px stretch!important;border-radius:0!important;box-shadow:none!important;color:#4a2606!important;text-shadow:0 1px 0 rgba(255,246,200,.7)!important;min-height:64px;padding:0 6px!important}


/* 39-084: first-entry forms say what to fix (red outline + icon, green check, message under the field, summary on top) */
.field input.fv-bad,.field select.fv-bad{border-color:var(--blood)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--blood) 28%,transparent)}
.field input.fv-ok,.field select.fv-ok{border-color:var(--good)!important}
.field input[type=text].fv-bad,.field input[type=password].fv-bad,.field input[type=text].fv-ok,.field input[type=password].fv-ok{padding-right:40px;background-repeat:no-repeat;background-position:right 10px center;background-size:20px 20px}
.field input[type=text].fv-bad,.field input[type=password].fv-bad{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23c0392b'/%3E%3Cpath d='M6.5 6.5l7 7M13.5 6.5l-7 7' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.field input[type=text].fv-ok,.field input[type=password].fv-ok{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%233d8a3a'/%3E%3Cpath d='M5.5 10.3l3 3 6-6.3' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
label.chk.fv-bad{outline:2px solid var(--blood);outline-offset:3px;border-radius:8px}
.fvmsg{display:block;margin:6px 0 2px;padding:6px 10px 6px 30px;position:relative;border-radius:10px;font-weight:800;font-size:15px;line-height:1.35;color:var(--blood);background:color-mix(in srgb,var(--blood) 10%,var(--panel));text-align:left;overflow-wrap:anywhere}
.fvmsg::before{content:"!";position:absolute;left:8px;top:7px;width:16px;height:16px;border-radius:50%;background:var(--blood);color:#fff;font-size:12px;line-height:16px;text-align:center}
.fvmsg.hint{color:var(--muted);background:none;padding-left:2px;font-weight:700;font-size:14px}.fvmsg.hint::before{content:none}
.fvmsg:empty{display:none}
.fvsum{margin:10px 0;padding:10px 12px;border-radius:12px;border:2px solid var(--blood);background:color-mix(in srgb,var(--blood) 12%,var(--panel));color:var(--ink);text-align:left;font-size:15px}
.fvsum b{display:block;font-weight:900;font-size:16px;color:var(--blood)}
.fvsum ul{margin:4px 0 0;padding-left:20px}.fvsum li{margin:3px 0}
.fvsum .fvgo{all:unset;cursor:pointer;font-weight:700;line-height:1.35;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.fvsum .fvgo:focus-visible{outline:2px solid var(--river);outline-offset:2px}