*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
@keyframes sealPulse{0%,100%{opacity:.7;text-shadow:0 0 12px #a78bfa66}50%{opacity:1;text-shadow:0 0 24px #a78bfaaa,0 0 40px #7c3aed55}}
@keyframes sealGlow{0%,100%{box-shadow:0 0 10px #4c1d9522,inset 0 0 20px #1a0a3022}50%{box-shadow:0 0 20px #7c3aed44,inset 0 0 30px #2a105088}}
@keyframes boxCardPop{from{opacity:0;transform:scale(.6) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes boxGlow{0%,100%{box-shadow:0 0 12px #fbbf2466,0 0 24px #d97706aa,inset 0 0 12px #78350f44}50%{box-shadow:0 0 20px #fbbf2499,0 0 40px #d97706cc,inset 0 0 20px #78350f66}}
@keyframes iconGlowPulse{0%,100%{filter:drop-shadow(0 0 6px #c084fc88) drop-shadow(0 0 12px #7c3aed66)}50%{filter:drop-shadow(0 0 11px #c084fccc) drop-shadow(0 0 22px #7c3aed99)}}
@keyframes boxShimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes boxReveal{0%{transform:rotateY(90deg) scale(.9);opacity:0}100%{transform:rotateY(0deg) scale(1);opacity:1}}
@keyframes boxSparkle{0%,100%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1)}}
@keyframes erm-shake{0%,100%{transform:translateX(0)}15%{transform:translateX(-6px)}30%{transform:translateX(6px)}45%{transform:translateX(-5px)}60%{transform:translateX(5px)}75%{transform:translateX(-3px)}90%{transform:translateX(3px)}}
@keyframes boneExtractPop{0%{transform:scale(1);filter:drop-shadow(0 0 0 #4ade8000)}40%{transform:scale(1.3);filter:drop-shadow(0 0 14px #4ade80cc)}100%{transform:scale(1);filter:drop-shadow(0 0 0 #4ade8000)}}
@keyframes boneExtractShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px) rotate(-4deg)}40%{transform:translateX(5px) rotate(4deg)}60%{transform:translateX(-4px) rotate(-3deg)}80%{transform:translateX(4px) rotate(3deg)}}
.erm-shake{animation:erm-shake 0.45s ease}

/* ── Rank-up burst ── */
@keyframes rankRingExpand{0%{transform:scale(.4);opacity:.9;border-width:3px}70%{opacity:.35}100%{transform:scale(2.6);opacity:0;border-width:1px}}
@keyframes rankFlashPop{0%{opacity:0;transform:scale(.3)}30%{opacity:1}100%{opacity:0;transform:scale(1.4)}}
@keyframes rankIconPop{0%{transform:scale(1)}35%{transform:scale(1.35) rotate(-4deg)}60%{transform:scale(.95) rotate(2deg)}100%{transform:scale(1)}}
@keyframes rankParticleFly{0%{opacity:1;transform:translate(-50%,-50%) translate(0,0) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) translate(var(--px),var(--py)) scale(.3)}}
.rank-burst-box{position:relative;overflow:visible}
.rank-burst-flash{position:absolute;inset:-16px;border-radius:16px;background:radial-gradient(circle,rgba(251,191,36,.5),transparent 70%);opacity:0;pointer-events:none;z-index:0}
.rank-burst-flash.go{animation:rankFlashPop .6s ease-out}
.rank-burst-ring{position:absolute;inset:0;border-radius:12px;border:2px solid #fbbf24;opacity:0;pointer-events:none;z-index:0}
.rank-burst-ring.go{animation:rankRingExpand 1.1s cubic-bezier(.2,.7,.3,1)}
.rank-burst-icon.go{animation:rankIconPop .7s cubic-bezier(.3,1.6,.4,1)}
.rank-particle{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#fbbf24;opacity:0;pointer-events:none;z-index:1}
.rank-particle.go{animation:rankParticleFly .9s cubic-bezier(.2,.7,.3,1) forwards}

/* ── Number count-up glow + floating delta ── */
@keyframes numGlow{0%{text-shadow:0 0 0 rgba(251,191,36,0)}30%{text-shadow:0 0 12px rgba(251,191,36,.9)}100%{text-shadow:0 0 0 rgba(251,191,36,0)}}
.numglow.go{animation:numGlow .5s ease-out}
@keyframes deltaFloat{0%{opacity:0;transform:translate(-50%,0)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-20px)}}
.delta-float{position:absolute;left:50%;transform:translate(-50%,0);font-size:11px;font-weight:700;color:#4ade80;opacity:0;pointer-events:none;white-space:nowrap;z-index:60}
.delta-float.go{animation:deltaFloat 1s ease-out forwards}

/* ── Loot rarity reveal ── */
@keyframes lootPop{0%{transform:scale(.85)}55%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes lootSheenSweep{0%{left:-60%}100%{left:130%}}
@keyframes lootGlowPulse{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.loot-reveal.go{animation:lootPop .5s cubic-bezier(.3,1.5,.4,1)}
.loot-reveal{position:relative;overflow:hidden}
.loot-reveal-sheen{position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(115deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);pointer-events:none;z-index:2}
.loot-reveal-sheen.go{animation:lootSheenSweep .8s ease-out}
.loot-reveal-glow{position:absolute;inset:-2px;border-radius:inherit;opacity:0;pointer-events:none;z-index:0}
.loot-reveal-glow.go{animation:lootGlowPulse .8s ease-out}

/* ── Qi bar full pulse ── */
@keyframes qiPulseRing{0%{box-shadow:0 0 0 0 rgba(251,191,36,.55)}100%{box-shadow:0 0 0 10px rgba(251,191,36,0)}}
@keyframes qiSparkPop{0%{opacity:0;transform:translateY(-50%) scale(.3)}40%{opacity:1;transform:translateY(-50%) scale(1.6)}100%{opacity:0;transform:translateY(-50%) scale(.6)}}
.qi-pulse.go{animation:qiPulseRing .7s ease-out}
.qi-spark{position:absolute;right:-2px;top:50%;width:8px;height:8px;border-radius:50%;background:#fff;transform:translateY(-50%);opacity:0;filter:blur(1px);pointer-events:none}
.qi-spark.go{animation:qiSparkPop .5s ease-out}

/* ── Achievement unlock ── */
#ach-unlock-inner{transform:rotateY(90deg);opacity:0}
#ach-unlock-inner.go{animation:achFlipIn .6s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes achFlipIn{0%{transform:rotateY(90deg) scale(.85);opacity:0}60%{transform:rotateY(0deg) scale(1.05);opacity:1}100%{transform:rotateY(0deg) scale(1);opacity:1}}
.ach-badge{font-size:38px;display:inline-block}
.ach-badge.go{animation:achBadgePop .7s cubic-bezier(.3,1.6,.4,1) .35s backwards}
@keyframes achBadgePop{0%{transform:scale(0) rotate(-20deg)}70%{transform:scale(1.2) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
.ach-ribbon{position:absolute;top:10px;left:-30%;width:160%;height:22px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);opacity:0;pointer-events:none}
.ach-ribbon.go{animation:achRibbon .8s ease-out .2s}
@keyframes achRibbon{0%{left:-30%;opacity:0}15%{opacity:1}100%{left:130%;opacity:0}}

/* ── Star ascension (artifact/bone merge success) ── */
@keyframes starLight{0%{transform:scale(0.3);filter:drop-shadow(0 0 0 rgba(251,191,36,0))}55%{transform:scale(1.5);filter:drop-shadow(0 0 10px rgba(251,191,36,.9))}100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(251,191,36,0))}}
.star-fx.go{animation:starLight .5s ease-out}
@keyframes starItemGlow{0%{filter:drop-shadow(0 0 0 rgba(251,191,36,0))}40%{filter:drop-shadow(0 0 16px rgba(251,191,36,.9))}100%{filter:drop-shadow(0 0 0 rgba(251,191,36,0))}}
.star-item-fx.go{animation:starItemGlow .8s ease-out}

/* ── Dungeon floor-clear wipe ── */
.floor-veil{position:absolute;inset:0;background:#000;opacity:0;z-index:5;pointer-events:none}
.floor-veil.go{animation:floorVeilFx .7s ease}
@keyframes floorVeilFx{0%{opacity:0}35%{opacity:.82}65%{opacity:.82}100%{opacity:0}}
.floor-wipe{position:absolute;top:0;bottom:0;width:52%;background:linear-gradient(100deg,transparent,#fbbf24 45%,#f59e0b 55%,transparent);opacity:0;left:-60%;z-index:6;pointer-events:none}
.floor-wipe.go{animation:floorWipeFx .7s cubic-bezier(.4,0,.2,1)}
@keyframes floorWipeFx{0%{left:-60%;opacity:0}10%{opacity:1}55%{opacity:1}100%{left:110%;opacity:0}}

/* ── Low HP vignette warning ── */
#hp-vignette{position:fixed;inset:0;pointer-events:none;z-index:150;box-shadow:inset 0 0 0 0 rgba(239,68,68,0);display:none}
#hp-vignette.pulsing{display:block;animation:hpVignettePulse 1.1s ease-in-out infinite}
@keyframes hpVignettePulse{0%,100%{box-shadow:inset 0 0 40px 6px rgba(239,68,68,.15)}50%{box-shadow:inset 0 0 80px 20px rgba(239,68,68,.5)}}

/* ── Combat hit flash ── */
.hit-fx.hit{animation:hitShakeFx .3s ease-in-out}
@keyframes hitShakeFx{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.hit-fx.hit::after{content:'';position:absolute;inset:-4px;border-radius:8px;background:rgba(255,255,255,.35);opacity:0;pointer-events:none;animation:hitFlashFx .3s ease-out}
@keyframes hitFlashFx{0%{opacity:.8}100%{opacity:0}}
.hit-dmg{position:absolute;top:-4px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:800;color:#f87171;opacity:0;pointer-events:none;white-space:nowrap;z-index:10}
.hit-dmg.go{animation:hitDmgFloat .7s ease-out forwards}
@keyframes hitDmgFloat{0%{opacity:0;transform:translateX(-50%) translateY(0) scale(.7)}20%{opacity:1;transform:translateX(-50%) translateY(-4px) scale(1.1)}100%{opacity:0;transform:translateX(-50%) translateY(-24px) scale(1)}}
.vs-side.pulse-fx::after{content:'';position:absolute;inset:-4px;border-radius:8px;opacity:0;pointer-events:none;background:var(--pulse-color,rgba(255,255,255,.35));animation:hitFlashFx .55s ease-out}

/* ── Button tap ripple ── */
@keyframes rippleOut{to{transform:scale(2.6);opacity:0}}
.tap-ripple{position:absolute;border-radius:50%;background:rgba(251,191,36,.35);transform:scale(0);pointer-events:none;animation:rippleOut .5s ease-out forwards}
button,a,.tab,.zc,.eqs,.more-item,.acc-head,.mode-btn,.sk-opt,.bl-card{touch-action:manipulation}
body{font-family:'Sarabun',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:16px;background:#000000;color:#e8e0d0;min-height:100vh;padding-bottom:68px}

/* ── TAB BAR (bottom) ── */
.tab-bar{display:flex;background:#0a0a0a;border-top:1px solid #2c2c2c;position:fixed;bottom:0;left:0;right:0;z-index:50;padding-bottom:env(safe-area-inset-bottom)}
.tab-bar-fill{position:fixed;bottom:0;left:0;right:0;height:env(safe-area-inset-bottom,0px);background:#0a0a0a;z-index:49}
.tab{flex:1;padding:8px 2px 6px;margin:3px 3px;text-align:center;font-size:12px;color:#3a3830;cursor:pointer;letter-spacing:.3px;line-height:1.5;border-radius:14px;transition:color .2s,text-shadow .2s}
.tab.active{color:#fde9b0;text-shadow:0 0 10px #fbbf24cc,0 0 20px #f59e0b80}
.tab.active .tab-icon{filter:drop-shadow(0 0 6px #fbbf24cc) drop-shadow(0 0 12px #f59e0b80)}
.tab-icon{font-size:22px;display:block;margin-bottom:2px}

/* ── GAME ICON SYSTEM (gi) — unified line-icon set, single accent color ── */
.gi-svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}
.tab-icon.gi-tab{width:23px;height:23px;margin:0 auto 2px}
.gi-badge{width:38px;height:38px;border-radius:10px;background:#1c1608;border:1px solid #2e2410;color:#f59e0b;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.gi-badge .gi-svg{width:19px;height:19px}
.gi-badge.gib-player{background:#0a1a2a;border-color:#173350;color:#38bdf8}
.gi-badge.gib-shop{background:#241a08;border-color:#4a3410;color:#fbbf24}
.gi-badge.gib-codex{background:#0e1a0e;border-color:#1c3a1c;color:#4ade80}
.gi-badge-lg{width:52px;height:52px;border-radius:13px;background:#1c1608;border:1px solid #2e2410;color:#f59e0b;display:flex;align-items:center;justify-content:center;margin:0 auto 8px}
.gi-badge-lg .gi-svg{width:27px;height:27px}
.zc .gi-svg{width:22px;height:22px;color:#f59e0b;margin:0 auto}
.zc.lk .gi-svg{color:#5a5040}
.gi-inline{width:1em;height:1em;display:inline-block;vertical-align:-0.15em;color:currentColor}

/* ── PAGES ── */
.page{display:none;padding:12px 14px;max-width:480px;margin:0 auto}
.page.active{display:block}
@keyframes pageTabEnter{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
.page.tab-enter{animation:pageTabEnter .28s ease-out}

/* ── SECTION HEADERS ── */
.ct{font-size:12px;color:#4a4540;margin-bottom:8px;text-transform:uppercase;letter-spacing:1px;font-weight:600}
.sec-head{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;margin:18px 0 8px;display:flex;align-items:center;gap:6px}
.sec-head::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;flex-shrink:0}
.sec-qi::before{background:#5b9bd5;box-shadow:0 0 4px #5b9bd599}
.sec-combat::before{background:#5fc27a;box-shadow:0 0 4px #5fc27a99}
.sec-item::before{background:#c99a4d;box-shadow:0 0 4px #c99a4d99}
.sec-sect::before{background:#b07dcf;box-shadow:0 0 4px #b07dcf99}
.sec-warn::before{background:#d9614f;box-shadow:0 0 4px #d9614f99}

/* ── CARDS ── */
.card{background:#111111;border-radius:10px;padding:12px 14px;margin-bottom:10px}
.card-flat{background:transparent;border:none;border-bottom:1px solid #1c1c1c;border-radius:0;padding:10px 0;margin-bottom:0}

/* ── STAT GRID ── */
.sg{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:9px}
.sb{background:#1c1c1c;border-radius:8px;padding:10px 12px}
.sb-click{cursor:pointer;transition:border-color .15s}
.sb-click:hover{border-color:#2a2218}
.sb-click.sb-active{border-color:#3a2e18;background:#1c1712}
.sbd-hint{font-size:9px;color:#2e2820;margin-top:3px;text-align:right}
.sb-click:hover .sbd-hint{color:#5a4a30}
.sb-active .sbd-hint{color:#7a6040}
.sbd-panel{border-top:1px solid #242424;padding-top:10px;margin-top:2px}
.sbd-row{display:flex;justify-content:space-between;align-items:center;padding:2px 0}
.sbd-lbl{font-size:13px;color:#4a4540}
.sbd-val{font-size:13px;font-weight:600;color:#8a7850}
.sbd-val.sbd-zero{color:#252218;font-weight:400}
.sbd-div{border:none;border-top:1px solid #1e1a10;margin:5px 0}
.sbd-total-lbl{font-size:13px;color:#8a7850;font-weight:600}
.sbd-total-val{font-size:16px;font-weight:700;color:#c8a87a}
.sbd-formula{background:#0a0806;border:1px solid #231a08;border-radius:6px;padding:6px 10px;margin-top:7px;font-size:12px;color:#4a4030;line-height:1.7}
.sbd-formula span{color:#b89860}
.sl{font-size:12px;color:#504840;letter-spacing:.2px}
.sv{font-size:20px;font-weight:700;color:#e8e0d0;margin:2px 0}
.sbn{font-size:12px;color:#5a8058;min-height:15px}

/* ── PROGRESS BARS ── */
.pw{background:#0a0a0a;border-radius:20px;height:6px;overflow:hidden;margin:3px 0}
.pb{height:100%;border-radius:20px;transition:width .3s}
.bqi{background:linear-gradient(90deg,#183454,#3568a0)}
.bhp{background:linear-gradient(90deg,#7a2020,#b23a3a)}
.bbd{background:linear-gradient(90deg,#3a1808,#6a3018)}
.bcb{background:linear-gradient(90deg,#2a1e0c,#5a4020)}
.ben{background:linear-gradient(90deg,#2e0a0a,#5a2020)}
.bbl{background:linear-gradient(90deg,#0a1220,#182840)}
.bdg{background:linear-gradient(90deg,#0e2216,#1e4a28)}

/* ── BUTTONS ── */
.btn{width:100%;padding:11px 14px;border:1px solid #252520;border-radius:8px;background:#1c1c1c;color:#d4c8b0;font-size:15px;cursor:pointer;transition:background .15s;font-family:inherit;letter-spacing:.2px}
.btn:active{opacity:.75}.btn:disabled{opacity:.3;cursor:not-allowed}
.btp{background:rgba(244,163,0,.22);color:#f0d090;border:1px solid rgba(244,163,0,.75);box-shadow:0 0 0 1px rgba(244,163,0,.25) inset,0 0 18px rgba(244,163,0,.5)}.btp:active{background:rgba(244,163,0,.3)}
.btg{background:#0f2a18;color:#86efac;border:none}
.bto{background:#241a08;color:#e8a855;border:none}
.bone-slot{background:#1c1c1c;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:background .15s}
.bone-slot:active{opacity:.8}
.bone-slot.bone-on{background:#241a3a;box-shadow:0 0 0 1px #7F77DD66 inset}
.bone-slot-ic{font-size:18px}
.bone-slot-lb{font-size:9px;color:#4c4570;margin-top:3px;text-align:center;line-height:1.3}
.bone-slot.bone-on .bone-slot-lb{color:#a89de8}
.bone-slot-nm{font-size:9px;font-weight:700;color:#c7c2b4;margin-top:1px;text-align:center;line-height:1.2}
.bone-slot-st{font-size:9px;color:#86efac;margin-top:1px;text-align:center}
.bsm{padding:7px 12px;font-size:14px;width:auto}
.bxs{padding:5px 9px;font-size:12px;width:auto;letter-spacing:.3px}

/* ── COMBAT LOG ── */
.log{background:#0d0d0d;border-radius:8px;padding:8px 10px;height:140px;overflow-y:auto;font-size:13px;line-height:2.1}
.log p{margin:0}
.cw{color:#5a8050}.ckill{color:#c7c2b4;font-weight:600}.cl{color:#884030}.co{color:#887040}.cr{color:#3a6880}.ce{color:#786080;font-weight:700}
.cleg{color:#b09098;font-weight:700}.cbk{color:#706880;font-weight:700}.cbf{color:#884030}
.cbo{color:#a07030;font-weight:700}.cqi{color:#4a6880}.csy{color:#303028}.cdg{color:#4a8858;font-weight:700}

/* ── ZONE GRID ── */
.zg{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:9px}
.zc{background:#1c1c1c;border-radius:8px;padding:10px;cursor:pointer;transition:all .2s;text-align:center}
.zc.sel{border-color:#5a3808;background:#110c04}.zc.lk{opacity:.25;cursor:not-allowed}
.zn{font-size:14px;font-weight:600;margin-top:4px;color:#d4c8b0}
.zr{font-size:12px;color:#404038;margin-top:1px}

/* ── EQUIP SLOTS ── */
.eqg{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:7px}
.eqs{background:#1c1c1c;border-radius:8px;padding:9px;min-height:60px;cursor:pointer;transition:all .2s;position:relative}
.eqs.has:active{background:#1c1c1c}
.eql{font-size:11px;color:#8a8578;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.eqn{font-size:13px;font-weight:600;line-height:1.3;color:#d4c8b0}
.eqst{font-size:12px;color:#5a8050}.eqe{font-size:18px;color:#3a3830;margin-top:5px;text-align:center}
.enchant-lv{font-size:11px;color:#887040;font-weight:700}

/* ── ITEM ROWS ── */
.ir{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid #1c1c1c}
.ir:last-child{border-bottom:none}
.ii{width:32px;height:32px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;border:1px solid #2c2c2c}
.iinf{flex:1;min-width:0}
.inm{font-size:14px;font-weight:600}.ist{font-size:12px;color:#5a8050}.isub{font-size:12px;color:#404038}

/* ── RARITY COLORS ── */
.rb{color:#6b6b60}.rc{color:#9a9880}.ru{color:#4ade80}.rr{color:#38bdf8}.rep{color:#c084fc}.rleg{color:#fbbf24;font-weight:600}.rmyth{color:#f06060;font-weight:600}.rdiv{color:#2dd4bf;font-weight:700}
.bgb{background:#0e0c0c;border:1px solid #1a1a1a}.bgc{background:#0e0d0a;border:1px solid #1a1810}.bgu{background:#0a100a;border:1px solid #0f1f0f}.bgr{background:#080e16;border:1px solid #0f1a28}.bgep{background:#100a1a;border:1px solid #201030}.bgleg{background:#160e06;border:1px solid #302000}.bgmyth{background:#160608;border:1px solid #300a12}.bgdiv{background:#041210;border:1px solid #0a3a24}

/* ── CURRENCY ROW ── */
.cr-row{display:flex;gap:7px;margin-bottom:10px}
.cr-box{flex:1;background:#1c1c1c;border-radius:8px;padding:8px;text-align:center}
.cr-val{font-size:16px;font-weight:700}.cr-lab{font-size:11px;color:#a8a0c0;margin-top:2px;text-transform:uppercase;letter-spacing:.5px}

/* ── LIST ITEMS ── */
.si{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #1c1c1c;gap:8px}
.si:last-child{border-bottom:none}.sn{font-size:14px;font-weight:600;color:#d4c8b0}.sef{font-size:12px;color:#5a8050}
.sbg{font-size:12px;padding:5px 10px;border-radius:6px;cursor:pointer;white-space:nowrap;flex-shrink:0;border:1px solid #252520}
.sl2{background:#0d0d0d;color:#383530}.sl2:active{color:#f59e0b}.lrn{background:#080f08;color:#5a8050;border-color:#1a2a18;cursor:default}

/* ── QI ROWS ── */
.qi-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #1c1c1c;gap:7px}
.qi-row:last-child{border-bottom:none}
.qn{font-size:11px;font-weight:600;color:#d4c8b0}.qrw{font-size:10px;color:#887040}
.qbw{background:#0a0a0a;border-radius:20px;height:3px;overflow:hidden;margin:3px 0}
.qb{height:100%;border-radius:20px;background:#5a3808;transition:width .4s}

/* ── OFFLINE BANNER ── */
.off-b{background:#241a08;border-radius:8px;padding:9px 12px;margin-bottom:9px;font-size:11px;color:#c99a4d;display:none}

/* ── DEATH OVERLAY ── */
.dead-ov{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000000f0;z-index:100;align-items:center;justify-content:center}
.dead-ov.show{display:flex}
.dead-box{background:#111111;border-radius:14px;padding:24px;text-align:center;max-width:280px;box-shadow:0 0 0 1px rgba(239,68,68,.25) inset,0 0 20px rgba(239,68,68,.2)}

/* ── SKILL MODAL ── */
.sk-opt{background:#1c1c1c;border-radius:8px;padding:12px;margin-bottom:8px;cursor:pointer}
.sk-name{font-size:13px;font-weight:700;color:#c7c2b4;margin-bottom:3px}
.sk-desc{font-size:11px;color:#6b7280}
.fate-opt{border:0.5px solid #4c1d95;border-radius:8px;padding:10px 12px;cursor:pointer;transition:opacity .15s}
.fate-opt:active{opacity:.7}
.sk-name{font-size:13px;font-weight:700;color:#f59e0b}.sk-desc{font-size:11px;color:#5a8050;margin-top:3px}

/* ── ENCHANT MODAL ── */
.enchant-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000000c8;z-index:100;align-items:center;justify-content:center;padding:16px}
.enchant-modal.show{display:flex}
.enchant-box{background:#0d0d0d;border-radius:14px;padding:18px;max-width:360px;width:100%;box-shadow:0 0 0 1px rgba(245,158,11,.2) inset,0 0 20px rgba(245,158,11,.25)}

/* ── MISC ── */
.intro-input:focus{border-color:#5a3808;outline:none}
.ach-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid #1c1c1c}
.ach-row:last-child{border-bottom:none}
.mode-sel{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:9px;position:relative}
.mode-pill{position:absolute;top:0;bottom:0;left:0;width:calc(50% - 4px);border-radius:8px;background:rgba(244,163,0,.22);border:1px solid rgba(244,163,0,.75);box-shadow:0 0 0 1px rgba(244,163,0,.25) inset,0 0 18px rgba(244,163,0,.5);transition:left .32s cubic-bezier(.3,.9,.3,1);pointer-events:none;z-index:0}
.mode-pill.right{left:calc(50% + 4px)}
.mode-btn{background:#1c1c1c;border-radius:8px;padding:11px;text-align:center;cursor:pointer;transition:color .15s;position:relative;z-index:1;overflow:hidden}
.mode-btn.am{color:#f0d090;background:transparent}
.mode-sub{color:#4c4570}
.mode-btn.am .mode-sub{color:#c9973f}
.mode-wisp{position:absolute;bottom:2px;border-radius:50%;pointer-events:none;opacity:0;z-index:2}
.mode-wisp.qi{width:4px;height:4px;background:#a78bfa;box-shadow:0 0 5px #a78bfa;animation:modeWispRise 1.8s ease-in forwards}
@keyframes modeWispRise{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:.9}90%{opacity:0}100%{opacity:0;transform:translateY(-38px) scale(1.1)}}
.mode-wisp.hunt{width:3px;height:3px;background:#f87171;box-shadow:0 0 4px #f87171;animation:modeWispDrift 1.6s ease-in-out forwards}
@keyframes modeWispDrift{0%{opacity:0;transform:translate(0,0)}20%{opacity:.85}80%{opacity:.85}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
.ov-tag{font-size:10px;background:#110c04;color:#f59e0b;padding:1px 6px;border-radius:4px;margin-left:4px;display:none}
.title-badge{display:inline-block;background:#0f0c1a;color:#9880c0;font-size:10px;padding:2px 8px;border-radius:8px}

/* ── TOAST ── */
.toast{position:fixed;top:auto;bottom:calc(80px + env(safe-area-inset-bottom));left:16px;right:16px;box-sizing:border-box;margin:0 auto;background:rgba(20,20,20,.75);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 2px 8px rgba(0,0,0,.4);border-radius:8px;padding:8px 16px;font-size:12px;line-height:1.5;color:#f59e0b;z-index:200;pointer-events:none;opacity:0;transition:opacity .3s;white-space:normal;width:auto;max-width:400px;text-align:center;word-break:break-word;overflow-wrap:break-word}
.toast.show{opacity:1}
.toast.loot-reveal{overflow:hidden;animation:lootPop .5s cubic-bezier(.3,1.5,.4,1)}

/* ── BOSS TAG ── */
.boss-tag{font-size:9px;background:#200808;color:#b86060;padding:1px 5px;border-radius:3px;margin-left:4px;letter-spacing:.3px}

/* ── SALVAGE BTN ── */
.svb{font-size:10px;color:#8a8578;background:#1c1c1c;border-radius:4px;padding:2px 7px;cursor:pointer;margin-left:3px}
.svb:active{color:#f87171}

/* ── BLOODLINE ── */
.blood-drop{display:inline-flex;align-items:center;gap:4px;background:#2a1414;color:#e08585;border-radius:6px;padding:3px 8px;font-size:10px;margin:2px}
.blood-fill{color:#804030;font-weight:700}
.bl-card{background:#1c1c1c;border-radius:8px;padding:10px;margin-bottom:8px}
.bl-name{font-size:12px;font-weight:700;color:#d4c8b0}.bl-desc{font-size:10px;color:#5a8050;margin-top:2px}
.bl-prog{font-size:10px;color:#383530;margin-top:4px}.bl-active{border-color:#5a3808;background:#100c04}

/* ── DUNGEON ── */
.dng-floor{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid #1c1c1c}
.dng-floor:last-child{border-bottom:none}

/* ── VS PANEL ── */
.player-vs{background:#1c1c1c;border-radius:10px;padding:10px;margin-bottom:9px}
.vs-row{display:flex;align-items:center;gap:10px}
.vs-side{flex:1}
.vs-name{font-size:11px;font-weight:700;margin-bottom:3px}
.vs-hp-wrap{background:#060606;border-radius:20px;height:7px;overflow:hidden}
.vs-hp{height:100%;border-radius:20px;transition:width .3s}
.vs-hp-player{background:linear-gradient(90deg,#2f6b3f,#5a9068)}
.vs-hp-enemy{background:linear-gradient(90deg,#8a3030,#c2544f)}
.vs-label{font-size:10px;color:#8a8578;margin-top:2px;font-weight:600}
.vs-label-player{color:#7cb88f}
.vs-label-enemy{color:#d98a85}

/* ── PRESTIGE ── */
.prestige-btn{background:rgba(245,158,11,.16);color:#fde9b0;border:none;border-radius:8px;padding:10px;width:100%;cursor:pointer;font-size:13px;font-weight:700;font-family:inherit;box-shadow:0 0 0 1px rgba(245,158,11,.4) inset,0 0 14px rgba(245,158,11,.3)}

/* ── MORE MENU ── */
.more-grid{border:1px solid #0a0a0a;border-radius:10px;overflow:hidden;margin-bottom:18px}
.more-item{background:#0d0d0d;padding:15px 16px;font-size:13px;color:#c8c0b0;cursor:pointer;border-bottom:1px solid #111111;display:flex;align-items:center;gap:9px}
.more-item:last-child{border-bottom:none}
.more-item:active{background:#120e08;color:#f59e0b}
.more-item-icon{font-size:18px;width:26px;text-align:center;flex-shrink:0}
.more-item-label{font-size:12px;font-weight:600;letter-spacing:.2px}
.more-item-sub{font-size:10px;color:#404038;margin-top:1px}
.more-back{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #1c1c1c}
.more-back-btn{background:none;border:none;color:#5a5040;font-size:13px;cursor:pointer;padding:4px 0;font-family:inherit;letter-spacing:.2px}
.more-back-btn:active{color:#f59e0b}
.more-title{font-size:14px;font-weight:700;color:#d4c8b0}

/* ── TIER CARD (sect status, etc) ── */
.tier-card{background:#1c1c1c;border-radius:9px;padding:11px 13px;margin-bottom:9px;display:flex;gap:11px;align-items:flex-start}
.tier-card.active{border-color:#f59e0b}
.tier-badge{width:36px;height:36px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.tier-badge .gi-svg{width:18px;height:18px}
.tier-body{flex:1;min-width:0}
.tier-top{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:4px}
.tier-nm{font-size:12.5px;font-weight:700;color:#e8e0d0}
.tier-tag{font-size:8.5px;font-weight:700;padding:2px 7px;border-radius:9px;flex-shrink:0}
.tier-desc{font-size:10.5px;color:#8a8276;margin-bottom:7px}
.tier-pill{display:inline-block;font-size:9.5px;background:#0d0d0d;border:1px solid #2c2c2c;border-radius:6px;padding:3px 8px;color:#c8a060}
.tier-btn{display:block;width:100%;padding:7px 0;border-radius:7px;font-size:11px;font-weight:700;text-align:center;cursor:pointer;border:1px solid #7f1d1d;background:#1a0a0a;color:#f87171;margin-top:8px;font-family:inherit}

/* ── SETTINGS ICON GRID ── */
.set-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.set-btn{background:#1c1c1c;border-radius:9px;padding:14px 6px;text-align:center;cursor:pointer}
.set-btn:active{border-color:#3a342a}
.set-btn.active{border-color:#f59e0b}
.set-btn-ic{width:26px;height:26px;margin:0 auto 6px;border-radius:7px;background:#241a08;color:#f59e0b;display:flex;align-items:center;justify-content:center}
.set-btn-ic .gi-svg{width:14px;height:14px}
.set-btn-lbl{font-size:10px;font-weight:600;color:#e8e0d0}
.set-btn.danger .set-btn-ic{background:#2a1010;color:#e07070}
.set-btn.danger .set-btn-lbl{color:#e07070}
.set-btn.danger.active{border-color:#e07070}

/* ── ACCORDION ── */
.acc-head{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;background:#0d0d0d;cursor:pointer;border-bottom:1px solid #111111;user-select:none}
.acc-head:active{background:#110e08}
.acc-head-left{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:#d4c8b0}
.acc-head-icon{font-size:18px;width:24px;text-align:center}
.acc-arrow{font-size:11px;color:#404038;transition:transform .2s;flex-shrink:0}
.acc-arrow.open{transform:rotate(180deg)}
.acc-body{display:none;padding:10px 12px;border-bottom:1px solid #0e0e0e;background:#060606}
.acc-body.open{display:block}


/* ── HOT ZONE RAINBOW ── */
@keyframes rainbowBorder {
  0%   { border-color:#ff4d4d; box-shadow:0 0 10px rgba(255,77,77,0.6); }
  15%  { border-color:#ff9900; box-shadow:0 0 10px rgba(255,153,0,0.6); }
  30%  { border-color:#ffee00; box-shadow:0 0 10px rgba(255,238,0,0.6); }
  45%  { border-color:#44ff44; box-shadow:0 0 10px rgba(68,255,68,0.6); }
  60%  { border-color:#00ccff; box-shadow:0 0 10px rgba(0,204,255,0.6); }
  75%  { border-color:#aa44ff; box-shadow:0 0 10px rgba(170,68,255,0.6); }
  90%  { border-color:#ff44cc; box-shadow:0 0 10px rgba(255,68,204,0.6); }
  100% { border-color:#ff4d4d; box-shadow:0 0 10px rgba(255,77,77,0.6); }
}
@keyframes rainbowStorm {
  0%   { border-color:#ff4d4d; box-shadow:0 0 8px rgba(255,77,77,0.7),  0 0 20px rgba(255,255,255,0.25); }
  15%  { border-color:#ff9900; box-shadow:0 0 8px rgba(255,153,0,0.7),  0 0 20px rgba(255,255,255,0.25); }
  30%  { border-color:#ffee00; box-shadow:0 0 8px rgba(255,238,0,0.7),  0 0 20px rgba(255,255,255,0.25); }
  45%  { border-color:#44ff44; box-shadow:0 0 8px rgba(68,255,68,0.7),  0 0 20px rgba(255,255,255,0.25); }
  60%  { border-color:#00ccff; box-shadow:0 0 8px rgba(0,204,255,0.7),  0 0 20px rgba(255,255,255,0.25); }
  75%  { border-color:#aa44ff; box-shadow:0 0 8px rgba(170,68,255,0.7), 0 0 20px rgba(255,255,255,0.25); }
  90%  { border-color:#ff44cc; box-shadow:0 0 8px rgba(255,68,204,0.7), 0 0 20px rgba(255,255,255,0.25); }
  100% { border-color:#ff4d4d; box-shadow:0 0 8px rgba(255,77,77,0.7),  0 0 20px rgba(255,255,255,0.25); }
}
.zone-hot         { animation: rainbowBorder 2.5s linear infinite; background:rgba(255,255,255,0.04) !important; }
.zone-hot-storm   { animation: rainbowStorm  1.6s linear infinite; background:rgba(255,255,255,0.08) !important; }

/* ── TRIBULATION ── */
@keyframes tribPulse{0%,100%{opacity:0.4}50%{opacity:1}}
@keyframes tribFlashGold{0%{border-color:#facc15;box-shadow:0 0 28px rgba(250,204,21,0.55),0 0 8px rgba(250,204,21,0.3)}60%{border-color:#facc1566;box-shadow:0 0 14px rgba(250,204,21,0.2)}100%{border-color:#2a2040;box-shadow:none}}
@keyframes tribFlashRed{0%{border-color:#f87171;box-shadow:0 0 28px rgba(248,113,113,0.55),0 0 8px rgba(248,113,113,0.3)}60%{border-color:#f8717166;box-shadow:0 0 14px rgba(248,113,113,0.2)}100%{border-color:#2a2040;box-shadow:none}}
@keyframes tribShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes blPulse{0%,100%{box-shadow:0 0 6px #dc2626aa}50%{box-shadow:0 0 16px #dc2626,0 0 6px #ff0000}}
.trib-flash-gold{animation:tribFlashGold 1.8s ease-out}
.trib-flash-red{animation:tribFlashRed 1.8s ease-out,tribShake 0.4s ease}
#trib-modal{position:fixed;inset:0;background:rgba(0,0,0,0.88);z-index:600;display:none;align-items:flex-end;justify-content:center;padding-bottom:70px}
#trib-inner{width:calc(100% - 24px);max-width:420px;background:#0b0917;border-radius:14px;border:0.5px solid #2a2040;overflow:hidden}

/* ── BT FEEDBACK ── */
@keyframes btShake{0%,100%{transform:translateX(0)}15%{transform:translateX(-7px)}30%{transform:translateX(7px)}45%{transform:translateX(-5px)}60%{transform:translateX(5px)}75%{transform:translateX(-3px)}90%{transform:translateX(3px)}}
@keyframes btSlideUp{0%{transform:translateY(40px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes btFadeOut{0%{opacity:1}100%{opacity:0;pointer-events:none}}
.bt-shaking{animation:btShake 0.45s ease}
#bt-popup{position:fixed;bottom:calc(80px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:420px;z-index:500;display:none;animation:btSlideUp 0.25s ease}
#bt-popup.closing{animation:btFadeOut 0.4s ease forwards}
#bt-flash{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:499;transition:opacity 0.08s}

/* ── Stat tile glow-on-increase ── */
@keyframes statPop{0%{transform:scale(1)}30%{transform:scale(1.08)}100%{transform:scale(1)}}
.sb.stat-go{animation:statPop .6s cubic-bezier(.3,1.4,.4,1)}
@keyframes statValGlow{0%{text-shadow:0 0 0 rgba(74,222,128,0);color:inherit}35%{text-shadow:0 0 12px rgba(74,222,128,.9);color:#4ade80}100%{text-shadow:0 0 0 rgba(74,222,128,0);color:inherit}}
.sb.stat-go .sv{animation:statValGlow .8s ease-out}

/* ── Equip slot rarity ring on wear ── */
@keyframes eqSlotPop{0%{transform:scale(.85)}55%{transform:scale(1.1)}100%{transform:scale(1)}}
.eqs.eq-go{animation:eqSlotPop .5s cubic-bezier(.3,1.5,.4,1)}
.eqs.eq-go::after{content:'';position:absolute;inset:-3px;border-radius:inherit;border:2px solid var(--eq-rc,#fbbf24);opacity:.9;pointer-events:none;animation:eqRing .7s ease-out}
@keyframes eqRing{0%{transform:scale(.75);opacity:.9}100%{transform:scale(1.3);opacity:0}}

/* ── Item fly-to-inventory on purchase ── */
.fly-item-fx{position:fixed;font-size:20px;z-index:400;pointer-events:none;transition:left .6s cubic-bezier(.3,.1,.3,1),top .6s cubic-bezier(.3,.1,.3,1),transform .6s cubic-bezier(.3,.1,.3,1),opacity .6s ease}
@keyframes bagBounceFx{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}}
.bag-bounce{animation:bagBounceFx .3s ease-out}

/* ── Sect war point-gain wave ── */
.sw-wave-wrap{position:relative;overflow:hidden}
.sw-wave-fx{position:absolute;top:0;bottom:0;width:22px;right:-22px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65));pointer-events:none;opacity:0}
.sw-wave-fx.go{animation:swWaveFx .6s ease-out}
@keyframes swWaveFx{0%{opacity:1;right:-22px}100%{opacity:0;right:calc(100% + 10px)}}

/* ── Egg hatch shell crack ── */
@keyframes eggShakeFx{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg)}40%{transform:rotate(7deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(4deg)}}
.egg-ic.shaking{animation:eggShakeFx .4s ease-in-out}
@keyframes eggShardFly{0%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) rotate(180deg) scale(.3)}}
.egg-shard-fx{position:absolute;width:6px;height:6px;background:#fde68a;border-radius:2px;left:50%;top:50%;opacity:0;pointer-events:none;animation:eggShardFly .6s ease-out forwards}
@keyframes eggCrackReveal{0%{opacity:0;transform:scale(.4)}55%{opacity:1;transform:scale(1.25)}100%{opacity:1;transform:scale(1)}}
.egg-crack{opacity:0}
.egg-crack.go{animation:eggCrackReveal .5s cubic-bezier(.3,1.4,.4,1) forwards}

/* ── Duel win/lose banner ── */
#duel-banner-overlay{display:none;position:fixed;inset:0;z-index:350;align-items:center;justify-content:center;pointer-events:none}
.duel-banner-fx{font-size:34px;font-weight:900;text-align:center;letter-spacing:1px}
.duel-banner-fx.win{color:#fbbf24;text-shadow:0 0 24px rgba(251,191,36,.8)}
.duel-banner-fx.lose{color:#8a8578}
.duel-banner-fx.go{animation:bannerSlamFx .8s cubic-bezier(.2,1.4,.4,1)}
@keyframes bannerSlamFx{0%{opacity:0;transform:scale(2.4) rotate(-4deg)}45%{opacity:1;transform:scale(.9) rotate(1deg)}65%{transform:scale(1.06)}100%{opacity:1;transform:scale(1) rotate(0)}}

/* ── Study progress ambient shimmer ── */
.study-shimmer-track{position:relative;overflow:hidden}
.study-shimmer-fx{position:absolute;top:0;bottom:0;width:26%;left:-30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);pointer-events:none;animation:studyShimmerFx 1.7s linear infinite}
@keyframes studyShimmerFx{0%{left:-30%}100%{left:110%}}

/* ── Toast icon bounce-in ── */
@keyframes toastIcBounceFx{0%{transform:scale(0) rotate(-15deg)}60%{transform:scale(1.25) rotate(5deg)}100%{transform:scale(1) rotate(0)}}
.toast.show svg.gi-svg:first-child{display:inline-block;animation:toastIcBounceFx .5s cubic-bezier(.3,1.8,.4,1)}

/* ── Dungeon portal enter (smooth, no flash) ── */
#portal-overlay{display:none;position:fixed;inset:0;z-index:340;align-items:center;justify-content:center;pointer-events:none;background:rgba(0,0,0,0);transition:background .4s ease}
#portal-overlay.go{background:rgba(0,0,0,.55)}
.portal-ring-fx{width:80px;height:80px;border-radius:50%;border:3px solid #7c3aed;opacity:0}
#portal-overlay.go .portal-ring-fx{animation:portalSpinFx .6s linear,portalPulseFx .6s ease-out}
@keyframes portalSpinFx{0%{transform:rotate(0) scale(1)}100%{transform:rotate(220deg) scale(1)}}
@keyframes portalPulseFx{0%{box-shadow:0 0 0 0 rgba(124,58,237,.6);opacity:.8}70%{box-shadow:0 0 34px 16px rgba(124,58,237,.15)}100%{box-shadow:0 0 0 0 rgba(124,58,237,0);opacity:0;transform:scale(1.7)}}

/* ── Crit text pop (no crosshair) ── */
.crit-txt-fx{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:14px;font-weight:900;color:#fde047;opacity:0;text-shadow:0 0 8px rgba(245,158,11,.8);pointer-events:none;z-index:11}
.crit-txt-fx.go{animation:critTxtFx .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes critTxtFx{0%{opacity:0;transform:translateX(-50%) scale(2) rotate(-6deg)}50%{opacity:1;transform:translateX(-50%) scale(.92) rotate(2deg)}100%{opacity:1;transform:translateX(-50%) scale(1) rotate(0)}}

/* ── Enemy dissolve on kill ── */
.dissolve-fx{animation:dissolveKillFx .55s ease-in forwards}
@keyframes dissolveKillFx{0%{opacity:1;filter:blur(0);transform:scale(1) translateY(0)}100%{opacity:0;filter:blur(6px);transform:scale(1.25) translateY(-8px)}}

/* ── Dodge/miss ── */
.miss-txt-fx{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:800;color:#93c5fd;opacity:0;pointer-events:none;z-index:11}
.miss-txt-fx.go{animation:missFloatFx .6s ease-out}
@keyframes missFloatFx{0%{opacity:0;transform:translateX(-50%) translateY(4px)}30%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-16px)}}
.dodge-blur-fx.go{animation:dodgeBlurFx .35s ease-out}
@keyframes dodgeBlurFx{0%{filter:blur(0);transform:translateX(0)}40%{filter:blur(3px);transform:translateX(-8px)}100%{filter:blur(0);transform:translateX(0)}}

/* ── Poison tint ── */
.vs-side.poisoned-fx .vs-name{animation:poisonPulseFx 1.1s ease-in-out infinite}
@keyframes poisonPulseFx{0%,100%{filter:drop-shadow(0 0 0 rgba(163,230,53,0))}50%{filter:drop-shadow(0 0 7px rgba(163,230,53,.85))}}

/* ── Enrage aura ── */
.vs-side.enraged-fx .vs-name{animation:enrageAuraFx 1s ease-in-out infinite}
@keyframes enrageAuraFx{0%,100%{filter:drop-shadow(0 0 3px rgba(239,68,68,.5))}50%{filter:drop-shadow(0 0 10px rgba(239,68,68,.95))}}

/* ── Skill-ready glow ── */
.sk-ic-ready{animation:skillReadyFx 1.4s ease-in-out infinite}
@keyframes skillReadyFx{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.5)}50%{box-shadow:0 0 0 5px rgba(251,191,36,0)}}

/* ── Sect join stamp ── */
.sect-stamp-fx{display:inline-block;opacity:0;transform:scale(3) rotate(-25deg)}
.sect-stamp-fx.go{animation:stampSlamFx .5s cubic-bezier(.2,1,.3,1) forwards}
@keyframes stampSlamFx{0%{opacity:0;transform:scale(3) rotate(-25deg)}60%{opacity:1;transform:scale(.9) rotate(-8deg)}100%{opacity:1;transform:scale(1) rotate(-10deg)}}
.sect-stamp-ring-fx{position:absolute;inset:0;border:3px solid #dc2626;border-radius:50%;opacity:0;pointer-events:none}
.sect-stamp-ring-fx.go{animation:stampRingFx .5s ease-out}
@keyframes stampRingFx{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(1.3)}}

/* ── Mission reward pouch burst ── */
.pouch-fx.go{animation:pouchShakeFx .3s ease-in-out}
@keyframes pouchShakeFx{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(8deg)}}
.pouch-coin-fx{position:absolute;font-size:13px;opacity:0;left:50%;top:50%;pointer-events:none}
.pouch-coin-fx.go{animation:coinBurstFx .6s ease-out forwards}
@keyframes coinBurstFx{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(.4)}}

/* ── Disciple task-complete badge ── */
.disc-badge-fx{opacity:0;transform:scale(0)}
.disc-badge-fx.go{animation:badgePopFx .5s cubic-bezier(.3,1.8,.4,1) forwards}
@keyframes badgePopFx{0%{opacity:0;transform:scale(0) rotate(-10deg)}70%{opacity:1;transform:scale(1.25) rotate(4deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

/* ── Rank badge shine ── */
.rank-badge-fx{position:relative;display:inline-block;overflow:hidden}
.rank-shine-fx{position:absolute;top:0;bottom:0;width:40%;left:-50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);pointer-events:none}
.rank-shine-fx.go{animation:rankShineFxAnim .8s ease-out}
@keyframes rankShineFxAnim{0%{left:-50%}100%{left:130%}}