.st-wrap{max-width:1180px;margin:18px auto;padding:0 14px}.st-hero{display:flex;justify-content:space-between;align-items:center;padding:24px;border:1px solid #f3c56d;border-radius:18px;background:linear-gradient(135deg,#fff8e7,#fff1c8);box-shadow:0 8px 24px rgba(0,0,0,.06)}.st-hero h1{margin:0 0 6px;color:#a95400;font-size:30px}.st-hero p{margin:0;color:#5c6470}.st-badge{background:#fff;border:1px solid #f1c165;border-radius:12px;padding:12px 18px;font-weight:700;color:#d27a00}.st-tabs{display:flex;gap:8px;margin:16px 0}.st-tabs span{padding:10px 15px;border:1px solid #d9e1ea;border-radius:10px;background:#fff;font-weight:700}.st-tabs .active{background:#0d8f80;color:#fff;border-color:#0d8f80}.st-tabs .muted{opacity:.6}.st-team-box{background:#fff;border:1px solid #d9e1ea;border-radius:14px;padding:16px;margin-bottom:18px}.st-team-box h2,.st-title{margin:0 0 8px;color:#075f9b}.st-team-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.st-team-head p{margin:5px 0 0}.st-btn{border:0;border-radius:10px;padding:10px 18px;background:linear-gradient(#ffbd38,#ff9200);color:#fff;font-weight:700;cursor:pointer;white-space:nowrap}.st-line-label{text-align:center;font-size:12px;font-weight:800;color:#b44a22;margin:14px 0 7px;letter-spacing:.4px}.st-line-back{color:#52708a}.st-slots{display:grid;gap:14px;margin:0 auto}.st-slots-front{grid-template-columns:repeat(2,minmax(180px,260px));justify-content:center}.st-slots-back{grid-template-columns:repeat(3,minmax(170px,230px));justify-content:center}.st-slot{min-height:180px;position:relative;border:2px dashed #c8d3df;border-radius:16px;background:#f8fafc;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;cursor:pointer;transition:.18s}.st-slot:hover,.st-slot.active{border-color:#f2a31b;box-shadow:0 0 0 4px rgba(242,163,27,.10);transform:translateY(-1px)}.st-slot.filled{border-style:solid;background:#fffaf0}.st-slot-content{width:100%}.st-slot-content img{width:108px;height:108px;object-fit:contain;display:block;margin:0 auto 4px}.st-slot-content strong{display:block;color:#9b4c17;font-size:14px;line-height:1.2}.st-slot-content small{display:block;color:#687481;margin-top:4px}.st-slot-plus{display:block;font-size:34px;color:#9fb0bf;font-weight:300}.st-slot-meta{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;margin-top:5px}.st-slot-meta span{font-size:10px;background:#edf3f7;padding:2px 5px;border-radius:999px}.st-slot-remove{display:none;position:absolute;top:6px;right:7px;width:25px;height:25px;border:0;border-radius:50%;background:#fff0e8;color:#b5481e;font-weight:800;cursor:pointer}.st-slot.filled .st-slot-remove{display:block}.st-team-tip{margin-top:12px;padding:9px 11px;border-radius:9px;background:#eef8f6;color:#35615a;font-size:12px}.st-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.st-card{background:#fff;border:1px solid #dbe3eb;border-radius:16px;padding:12px;text-align:center;box-shadow:0 5px 16px rgba(0,0,0,.04)}.st-pick-card{cursor:pointer;transition:.18s}.st-pick-card:hover{border-color:#efb248;box-shadow:0 8px 22px rgba(172,104,0,.12);transform:translateY(-2px)}.st-card img{width:100%;aspect-ratio:1/1;object-fit:contain}.st-card h3{font-size:17px;color:#9b4c17;margin:7px 0}.st-meta{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;font-size:12px}.st-meta b,.st-meta span,.st-meta strong{padding:3px 7px;border-radius:999px;background:#eef4f8}.st-exp{height:8px;background:#e8edf2;border-radius:999px;overflow:hidden;margin:10px 0 3px}.st-exp div{height:100%;background:linear-gradient(90deg,#38a3ff,#6558ff)}.st-exp-label{display:flex;justify-content:space-between;font-size:11px;color:#687481}.st-power{margin:10px 0;color:#a95400}.st-stats{display:grid;grid-template-columns:1fr 1fr;gap:5px;text-align:left;font-size:12px;background:#fff9ed;border:1px solid #f5d49b;border-radius:10px;padding:8px}.st-points{font-size:12px;margin-top:8px;color:#5e6670}.st-pick-btn{width:100%;margin-top:10px;padding:8px;border:1px solid #f0b14a;border-radius:9px;background:#fff7e7;color:#a65d00;font-weight:700;cursor:pointer}.st-empty{background:#fff;border:1px solid #dbe3eb;border-radius:14px;padding:22px}@media(max-width:900px){.st-grid{grid-template-columns:repeat(2,1fr)}.st-slots-front,.st-slots-back{grid-template-columns:repeat(2,minmax(150px,1fr))}.st-team-head{align-items:flex-start;flex-direction:column}}@media(max-width:520px){.st-grid{grid-template-columns:1fr}.st-hero{align-items:flex-start;gap:12px}.st-badge{white-space:nowrap}.st-slots-front,.st-slots-back{grid-template-columns:1fr}.st-slot{min-height:150px}}

/* 0.5.0 - Matchmaking + battle replay */
.st-tabs a{display:inline-block;padding:10px 15px;border:1px solid #d9e1ea;border-radius:10px;background:#fff;font-weight:700;color:inherit;text-decoration:none}.st-tabs a.active{background:#0d8f80;color:#fff;border-color:#0d8f80}
.st-match-my,.st-opponent{background:#fff;border:1px solid #d9e1ea;border-radius:16px;padding:16px;margin:14px 0}.st-match-my h2{margin:0 0 10px;color:#075f9b}.st-opponents{display:grid;gap:16px}.st-opponent-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}.st-opponent-head h3{margin:0;color:#a95400;font-size:20px}.st-opponent-head p{margin:4px 0 0}.st-opponent-head>strong{color:#d46d00}.st-mini-formation{display:flex;flex-direction:column;align-items:center;gap:8px}.st-mini-front,.st-mini-back{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.st-mini-slot{width:128px;min-height:148px;border:1px solid #d9e1ea;border-radius:12px;background:#f8fbfd;padding:8px;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center}.st-mini-slot img{width:92px;height:92px;object-fit:contain}.st-mini-slot b{display:block;font-size:12px;line-height:1.2;margin-top:3px}.st-mini-slot small{font-size:11px;color:#68727d}.st-mini-slot.empty{opacity:.45;min-height:82px}.st-fight-btn{display:block;margin:14px auto 0;min-width:180px;font-size:16px}
.st-battle-wrap{max-width:1260px}.st-battle-topbar{display:flex;justify-content:space-between;align-items:center;margin:8px 0 12px}.st-back{font-weight:700}.st-battle-arena{position:relative;padding:18px;border-radius:20px;border:1px solid #d9e1ea;background:radial-gradient(circle at center,#fff8dd 0,#eef4f7 48%,#e8eef4 100%);overflow:hidden}.st-side-title{text-align:center;margin:4px 0 8px}.st-side-title b{display:block;font-size:20px;color:#075f9b}.st-side-title span{font-size:12px;color:#65717d}.st-battle-team{display:flex;flex-direction:column;align-items:center;gap:9px}.enemy-team{margin-bottom:4px}.my-team{margin-top:4px}.st-battle-row{display:flex;justify-content:center;gap:12px;min-height:126px}.st-battle-slot{position:relative;width:145px;min-height:150px;background:rgba(255,255,255,.93);border:1px solid #cfdbe5;border-radius:14px;padding:7px;text-align:center;box-shadow:0 4px 12px rgba(30,50,70,.08);transition:transform .18s,filter .18s,opacity .18s}.st-battle-slot.front{border-color:#efb76a;box-shadow:0 4px 14px rgba(220,130,20,.13)}.st-battle-slot img{width:108px;height:92px;object-fit:contain}.st-battle-slot b{display:block;font-size:12px;line-height:1.15;height:28px;overflow:hidden}.st-battle-slot small{display:block;font-size:10px;color:#6b7480}.st-battle-slot.empty{opacity:.25;display:flex;align-items:center;justify-content:center;min-height:100px}.st-empty-slot{font-weight:700}.st-hpbar{height:8px;background:#e5e9ed;border-radius:8px;overflow:hidden;margin:5px 3px 2px}.st-hpbar i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#2dbd73,#69d68f);transition:width .4s}.st-hptext{font-size:10px;color:#44515e}.st-vs{text-align:center;font-size:24px;font-weight:900;color:#d46d00;margin:3px 0;text-shadow:0 2px 6px #fff}.st-battle-log{margin-top:12px;padding:12px 16px;border-radius:12px;background:#fff;border:1px solid #d9e1ea;text-align:center;font-weight:700;min-height:20px}.st-result{margin-top:14px;padding:18px;border-radius:14px;background:linear-gradient(135deg,#fff7dd,#ffe5a4);border:1px solid #efbd56;text-align:center}.st-result strong{display:block;font-size:26px;color:#a95400}.st-result span{display:block;margin:5px}.st-result a{display:inline-block;margin-top:8px;padding:9px 15px;border-radius:10px;background:#0d8f80;color:#fff;text-decoration:none;font-weight:700}.st-effect-layer{position:absolute;top:8px;left:8px;right:8px;z-index:5;font-size:13px;font-weight:900;text-shadow:0 1px 4px #fff;pointer-events:none}.st-effect-layer.stun{color:#cc8b00}.st-effect-layer.sleep{color:#7157c9}.st-effect-layer.buff{color:#0b9d64}.st-effect-layer.debuff{color:#c44242}.st-effect-layer.shield{color:#168ac1}.st-float{position:absolute;z-index:10;left:50%;top:35%;transform:translateX(-50%);font-size:20px;font-weight:900;animation:stFloat .9s ease-out forwards;text-shadow:0 2px 4px #fff}.st-float.damage{color:#d42f2f}.st-float.crit-dmg{color:#ff6200;font-size:24px}.st-float.heal-num{color:#0aa85d}.st-float.counter-dmg{color:#8d38ba}.st-battle-slot.acting{animation:stAct .55s ease}.st-battle-slot.hit{animation:stHit .45s ease}.st-battle-slot.crit-hit{animation:stCrit .6s ease}.st-battle-slot.heal{filter:drop-shadow(0 0 12px rgba(35,210,120,.8))}.st-battle-slot.counter{filter:drop-shadow(0 0 12px rgba(155,65,200,.8))}.st-battle-slot.ko{filter:grayscale(1);opacity:.35;transform:scale(.94)}
@keyframes stAct{0%{transform:translateY(0)}45%{transform:translateY(-12px) scale(1.04)}100%{transform:translateY(0)}}@keyframes stHit{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}@keyframes stCrit{0%,100%{transform:scale(1)}30%{transform:scale(1.08);filter:brightness(1.5)}60%{transform:scale(.98)}}@keyframes stFloat{0%{opacity:0;transform:translate(-50%,10px)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-45px)}}
@media(max-width:760px){.st-opponent-head{align-items:flex-start;flex-direction:column}.st-mini-slot{width:92px;min-height:120px}.st-mini-slot img{width:70px;height:70px}.st-battle-slot{width:92px;min-height:125px;padding:5px}.st-battle-slot img{width:76px;height:70px}.st-battle-row{gap:5px;min-height:105px}.st-battle-arena{padding:8px}.st-battle-slot b{font-size:10px;height:23px}.st-battle-slot small{font-size:9px}}

/* 0.5.2 - Navbar parity, mobile safety, projectile battle effects */
.hvn-sieu-thu-nav-item>a{font-size:16px!important;font-weight:700!important;color:#e89000!important;line-height:1.4!important}
.hvn-sieu-thu-nav-item>a .icon{color:#f0a000!important;font-size:16px!important}
.hvn-sieu-thu-nav-item>a span{font-size:16px!important;font-weight:700!important;color:#e89000!important}
.hvn-sieu-thu-nav-item>a:hover,.hvn-sieu-thu-nav-item>a:focus,.hvn-sieu-thu-nav-item>a:hover span,.hvn-sieu-thu-nav-item>a:focus span,.hvn-sieu-thu-nav-item>a:hover .icon,.hvn-sieu-thu-nav-item>a:focus .icon{color:#ffb000!important;text-decoration:none!important}
.st-wrap,.st-wrap *{box-sizing:border-box}.st-wrap{width:100%;min-width:0;overflow-x:hidden}.st-opponent,.st-match-my,.st-battle-arena,.st-mini-slot,.st-battle-slot{min-width:0}.st-opponent-head>div{min-width:0}.st-opponent-head h3,.st-opponent-head p,.st-mini-slot b,.st-battle-slot b,.st-side-title b,.st-side-title span{overflow-wrap:anywhere;word-break:break-word}
.st-mini-slot.front{border-color:#efb76a;background:#fffaf1}.st-match-my{margin-top:22px}.st-opponents+.st-match-my{border-top:3px solid #f0b14a}

.st-impact,.st-burst{position:absolute;left:50%;top:42%;width:28px;height:28px;margin:-14px;border:3px solid currentColor;border-radius:50%;z-index:25;pointer-events:none;animation:stImpact .72s ease-out forwards}.st-impact-attack{color:#ff7a00}.st-impact-crit{color:#ff3200;border-width:5px}.st-impact-heal,.st-burst-heal{color:#19c86f}.st-impact-lifesteal,.st-burst-lifesteal{color:#cc1748}.st-impact-stun{color:#e0a000}.st-impact-sleep{color:#7651ce}.st-impact-buff{color:#0aa67a}.st-impact-debuff{color:#d33655}.st-impact-counter{color:#8c38b3}.st-impact-shield{color:#168ac1}.st-burst-ko{color:#e02c2c;border-width:5px}.st-battle-slot.casting img{filter:brightness(1.18) drop-shadow(0 0 12px rgba(255,166,0,.8))}

@keyframes stImpact{0%{opacity:1;transform:scale(.25)}65%{opacity:.9;transform:scale(2.6)}100%{opacity:0;transform:scale(3.6)}}
@media(max-width:700px){.hvn-sieu-thu-nav-item>a,.hvn-sieu-thu-nav-item>a span{font-size:15px!important}.hvn-sieu-thu-nav-item>a .icon{font-size:15px!important}.st-wrap{padding-left:6px;padding-right:6px}.st-hero{padding:14px;gap:8px;flex-wrap:wrap}.st-hero h1{font-size:23px}.st-tabs{display:flex;overflow-x:auto;max-width:100%;padding-bottom:3px}.st-tabs a,.st-tabs span{flex:0 0 auto;white-space:nowrap}.st-opponent,.st-match-my{padding:10px}.st-opponent-head{gap:5px}.st-mini-formation{width:100%;overflow:hidden}.st-mini-front,.st-mini-back{gap:5px;flex-wrap:nowrap;width:100%}.st-mini-front .st-mini-slot{width:calc(50% - 3px);max-width:138px;flex:0 1 138px}.st-mini-back .st-mini-slot{width:calc(33.333% - 4px);max-width:112px;flex:1 1 0}.st-mini-slot{padding:5px;min-height:110px}.st-mini-slot img{width:68px;height:68px}.st-mini-slot b{font-size:10px;max-width:100%}.st-mini-slot small{font-size:9px}.st-battle-arena{padding:5px;border-radius:14px}.st-battle-row{width:100%;gap:3px;min-height:88px}.st-battle-row.front-row .st-battle-slot{width:calc(50% - 3px);max-width:118px;flex:0 1 118px}.st-battle-row.back-row .st-battle-slot{width:calc(33.333% - 3px);max-width:100px;flex:1 1 0}.st-battle-slot{padding:3px;min-height:106px}.st-battle-slot img{width:65px;height:59px}.st-battle-slot b{font-size:9px;height:auto;min-height:20px}.st-battle-slot small,.st-hptext{font-size:8px}.st-side-title b{font-size:16px}.st-vs{font-size:18px}.st-battle-topbar{font-size:11px;gap:8px}.st-battle-log{font-size:12px;padding:9px}.st-float{font-size:16px}.st-float.crit-dmg{font-size:19px}}
@media(max-width:400px){.st-wrap{padding-left:3px;padding-right:3px}.st-mini-slot img{width:58px;height:58px}.st-battle-slot img{width:57px;height:52px}.st-opponent-head h3{font-size:16px}.st-opponent-head>strong{font-size:12px}}

/* 0.5.3 - compact cards, Tốc đánh, playback controls */
.st-meta .st-level,.st-level{color:#c75a00!important;font-weight:900!important}.st-meta .st-class-S{background:linear-gradient(135deg,#dfeaff,#eadfff)!important;color:#4b45a8!important;border:1px solid #c9c6f4}.st-mini-slot{width:116px;min-height:128px;padding:6px}.st-mini-slot img{width:78px;height:78px}.st-battle-slot{width:126px;min-height:132px;padding:5px}.st-battle-slot img{width:88px;height:76px}.st-battle-row{min-height:108px;gap:8px}.st-battle-team{gap:6px}.st-battle-arena{padding:10px 14px}.st-side-title{margin:2px 0 5px}.st-vs{margin:1px 0;font-size:20px}.st-battle-controls{display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap;margin:10px 0 0}.st-battle-controls span{font-weight:800;color:#59636e}.st-battle-controls button{border:1px solid #d5dde6;background:#fff;color:#3d4a56;border-radius:9px;padding:7px 11px;font-weight:800;cursor:pointer}.st-battle-controls button.active{background:#0d8f80;border-color:#0d8f80;color:#fff}.st-battle-controls .st-skip-battle{margin-left:7px;background:linear-gradient(#ffbd38,#ff9200);border-color:#f09a08;color:#fff}.st-battle-controls button:disabled{opacity:.55;cursor:default}
@media(max-width:700px){.st-mini-slot{width:auto;min-height:98px!important}.st-mini-slot img{width:58px!important;height:58px!important}.st-battle-slot{min-height:94px!important}.st-battle-slot img{width:55px!important;height:49px!important}.st-battle-row{min-height:80px!important}.st-battle-controls{gap:4px}.st-battle-controls button{padding:6px 8px;font-size:11px}.st-battle-controls .st-skip-battle{margin-left:0}}

/* 0.5.4 - light-beam combat FX + packaged lightweight audio */
.st-battle-slot.casting{filter:drop-shadow(0 0 9px rgba(255,179,37,.8))}.st-battle-slot.casting img{transform:scale(1.035);transition:transform .15s}.st-sound-toggle.active{background:#eef8ff!important;border-color:#8cc9e8!important;color:#136b95!important}


/* === 0.5.5 POWER FX: stronger, readable, event-driven battle feedback === */







@keyframes stPowerBeam{0%{opacity:0;transform:rotate(var(--angle)) scaleX(.01);filter:brightness(1.2)}12%{opacity:1}48%{opacity:1;transform:rotate(var(--angle)) scaleX(.56);filter:brightness(1.65)}78%{opacity:1;transform:rotate(var(--angle)) scaleX(1);filter:brightness(1.25)}100%{opacity:0;transform:rotate(var(--angle)) scaleX(1)}}


.st-cast-charge{position:absolute;z-index:58;left:50%;top:39%;width:24px;height:24px;border:3px solid currentColor;border-radius:50%;transform:translate(-50%,-50%);animation:stCharge .42s ease-out forwards;pointer-events:none}.st-cast-charge:before,.st-cast-charge:after{content:"";position:absolute;inset:-10px;border:2px solid currentColor;border-radius:50%}.st-cast-charge:after{inset:-18px;opacity:.45}.st-cast-charge-attack{color:#ff8700}.st-cast-charge-crit{color:#ff2d00}.st-cast-charge-stun{color:#ffd400}.st-cast-charge-sleep{color:#865de4}.st-cast-charge-heal{color:#20d781}.st-cast-charge-lifesteal{color:#d31a50}.st-cast-charge-counter{color:#a429d8}.st-cast-charge-buff{color:#20bce7}.st-cast-charge-debuff{color:#e13a61}.st-cast-charge-shield{color:#25a8dc}@keyframes stCharge{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}45%{opacity:1;transform:translate(-50%,-50%) scale(1.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.15)}}
.st-impact{z-index:63!important;width:40px!important;height:40px!important;margin:-20px!important;border-width:4px!important;box-shadow:0 0 16px 5px currentColor,inset 0 0 13px 4px currentColor!important;animation:stPowerImpact .78s cubic-bezier(.14,.65,.16,1) forwards!important}.st-impact.strong{width:54px!important;height:54px!important;margin:-27px!important;border-width:6px!important}.st-impact:before,.st-impact:after{content:"";position:absolute;inset:-10px;border:2px solid currentColor;border-radius:50%;opacity:.8}.st-impact:after{inset:-22px;opacity:.45}@keyframes stPowerImpact{0%{opacity:0;transform:scale(.12) rotate(0)}18%{opacity:1;transform:scale(.75) rotate(12deg)}64%{opacity:.95;transform:scale(2.1) rotate(25deg)}100%{opacity:0;transform:scale(3.35) rotate(42deg)}}
.st-spark{position:absolute;z-index:66;left:50%;top:42%;width:7px;height:18px;border-radius:999px;background:#fff;box-shadow:0 0 8px 3px currentColor;pointer-events:none;animation:stSpark .72s ease-out forwards}.st-spark-attack{color:#ff7b00}.st-spark-crit{color:#ff2c00}.st-spark-counter{color:#a429d8}.st-spark-stun{color:#ffd400}.st-spark-sleep{color:#865de4}.st-spark-heal{color:#20d781}.st-spark-lifesteal{color:#d31a50}.st-spark-buff{color:#20bce7}.st-spark-debuff{color:#e13a61}.st-spark-shield{color:#25a8dc}.st-spark-ko{color:#d71920}@keyframes stSpark{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(1) rotate(110deg)}}
.st-arena-flash{position:absolute;inset:0;z-index:55;pointer-events:none;animation:stArenaFlash .48s ease-out forwards}.st-arena-flash-attack{background:radial-gradient(circle at center,rgba(255,132,0,.14),transparent 60%)}.st-arena-flash-crit{background:radial-gradient(circle at center,rgba(255,48,0,.24),transparent 62%)}.st-arena-flash-stun{background:radial-gradient(circle at center,rgba(255,220,0,.23),transparent 64%)}.st-arena-flash-counter{background:radial-gradient(circle at center,rgba(157,45,205,.20),transparent 64%)}@keyframes stArenaFlash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.st-battle-slot.casting{z-index:60!important;filter:brightness(1.16) drop-shadow(0 0 16px rgba(255,170,30,.92))!important}.st-battle-slot.casting img{transform:scale(1.075)!important}.st-battle-slot.casting-crit{filter:brightness(1.22) drop-shadow(0 0 22px rgba(255,55,0,.95))!important}.st-battle-slot.casting-stun{filter:brightness(1.18) drop-shadow(0 0 22px rgba(255,218,0,.95))!important}.st-battle-slot.casting-counter{filter:brightness(1.17) drop-shadow(0 0 22px rgba(166,51,213,.95))!important}
.st-battle-slot.status-frozen{filter:saturate(.45) hue-rotate(145deg) brightness(1.08)!important;box-shadow:0 0 0 2px rgba(127,213,255,.8),0 0 24px 7px rgba(79,190,255,.55)!important}.st-battle-slot.status-frozen:after{content:"❄";position:absolute;z-index:52;inset:0;display:flex;align-items:center;justify-content:center;font-size:46px;color:#dff7ff;text-shadow:0 0 8px #28aef2,0 0 20px #fff;background:linear-gradient(145deg,rgba(161,231,255,.08),rgba(42,153,226,.20));border-radius:inherit;animation:stFreezePulse .9s ease-in-out infinite alternate;pointer-events:none}.st-battle-slot.frozen-skip{animation:stFrozenSkip .7s ease!important}@keyframes stFreezePulse{from{opacity:.56}to{opacity:.96}}@keyframes stFrozenSkip{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}50%{transform:translateX(2px)}75%{transform:translateX(-1px)}}
.st-battle-slot.status-sleeping{filter:saturate(.72) brightness(.92)!important}.st-battle-slot.status-sleeping:after{content:"Z z z";position:absolute;z-index:52;right:8px;top:22px;font-size:19px;font-weight:900;color:#7958d2;text-shadow:0 0 7px #fff;animation:stSleepFloat 1.15s ease-in-out infinite alternate;pointer-events:none}@keyframes stSleepFloat{from{transform:translateY(6px);opacity:.55}to{transform:translateY(-7px);opacity:1}}
.st-battle-slot.shielded:before{content:"";position:absolute;z-index:45;inset:3px;border:3px solid rgba(70,194,245,.75);border-radius:16px;box-shadow:inset 0 0 20px rgba(48,180,239,.25),0 0 20px rgba(48,180,239,.45);animation:stShieldPulse .8s ease-in-out infinite alternate;pointer-events:none}@keyframes stShieldPulse{from{opacity:.45;transform:scale(.98)}to{opacity:1;transform:scale(1.02)}}
.st-battle-slot.buff-aura{box-shadow:0 0 24px 7px rgba(23,196,119,.38)!important}.st-battle-slot.debuff-aura{box-shadow:0 0 24px 7px rgba(223,56,88,.38)!important}.st-battle-slot.counter-hit{animation:stCounterHit .72s ease!important}@keyframes stCounterHit{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px) rotate(-1deg)}45%{transform:translateX(7px) rotate(1deg)}70%{transform:translateX(-3px)}}
.st-float{z-index:80!important;font-size:24px!important;letter-spacing:.2px;text-shadow:0 2px 3px #fff,0 0 8px rgba(255,255,255,.9)!important}.st-float.crit-dmg{font-size:31px!important}.st-float.counter-dmg{font-size:22px!important;color:#8d2eb9!important}.st-float.heal-num{color:#009d57!important}
.st-hpbar{position:relative!important;overflow:visible!important;background:#dfe5ea!important}.st-hpbar i{position:relative;z-index:3;transition:width .42s cubic-bezier(.2,.74,.23,1)!important}.st-hp-loss-trail,.st-hp-heal-trail{position:absolute;top:0;height:100%;z-index:2;pointer-events:none}.st-hp-loss-trail{background:linear-gradient(90deg,#ff9b7d,#df2e2e);box-shadow:0 0 7px rgba(218,38,38,.7);animation:stHpTrail .82s ease-out forwards}.st-hp-heal-trail{background:linear-gradient(90deg,#d5ffe8,#18cf78);box-shadow:0 0 8px rgba(22,203,113,.85);animation:stHpHeal .82s ease-out forwards}.st-hp-delta{position:absolute;z-index:10;left:50%;top:-19px;transform:translateX(-50%);font-style:normal;font-size:10px;font-weight:900;white-space:nowrap;padding:1px 5px;border-radius:999px;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.16);animation:stHpDelta 1s ease-out forwards}.st-hp-delta.damage{color:#ce2828;border:1px solid #f1a0a0}.st-hp-delta.heal{color:#008b4d;border:1px solid #83ddb1}@keyframes stHpTrail{0%{opacity:1}100%{opacity:0}}@keyframes stHpHeal{0%{opacity:1;filter:brightness(1.7)}100%{opacity:0;filter:brightness(1)}}@keyframes stHpDelta{0%{opacity:0;transform:translate(-50%,4px) scale(.7)}20%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-15px) scale(.96)}}
@media(max-width:700px){.st-float{font-size:18px!important}.st-float.crit-dmg{font-size:23px!important}.st-battle-slot.status-frozen:after{font-size:34px}.st-hp-delta{font-size:8px;top:-16px;padding:1px 3px}}


/* 0.5.6 - explicit orange/red energy ray + ink/blood-like hit splash */








@keyframes stRayTravel{0%{opacity:0;transform:rotate(var(--angle)) scaleX(.02)}8%{opacity:1}28%{opacity:1;transform:rotate(var(--angle)) scaleX(.34)}68%{opacity:1;transform:rotate(var(--angle)) scaleX(.92)}88%{opacity:1;transform:rotate(var(--angle)) scaleX(1)}100%{opacity:0;transform:rotate(var(--angle)) scaleX(1)}}
@keyframes stRayHead{from{transform:translateY(-50%) skewX(-28deg) scale(.9);filter:brightness(1.1)}to{transform:translateY(-50%) skewX(-28deg) scale(1.2);filter:brightness(1.9)}}

/* Damage impact: irregular ink/blood-like splash, intentionally no circular ring */
.st-ink-splash{position:absolute;z-index:96;left:50%;top:42%;width:74px;height:58px;transform:translate(-50%,-50%) scale(.2) rotate(-7deg);pointer-events:none;background:radial-gradient(ellipse at 48% 50%,rgba(185,0,0,.96) 0 22%,rgba(225,14,14,.91) 23% 43%,rgba(137,0,0,.72) 44% 58%,transparent 60%);filter:drop-shadow(0 0 7px rgba(210,0,0,.55));animation:stInkSplash .86s cubic-bezier(.12,.64,.18,1) forwards}
.st-ink-splash:before,.st-ink-splash:after{content:"";position:absolute;background:#c90808;border-radius:64% 36% 70% 30%/48% 62% 38% 52%;opacity:.9}.st-ink-splash:before{width:31px;height:13px;left:-17px;top:17px;transform:rotate(-18deg)}.st-ink-splash:after{width:25px;height:10px;right:-14px;bottom:9px;transform:rotate(24deg);background:#9f0000}
.st-ink-splash b{position:absolute;display:block;border-radius:50%;background:#d10b0b;box-shadow:0 0 5px rgba(120,0,0,.45)}
.st-ink-splash b:nth-child(1){width:11px;height:8px;left:-22px;top:4px}.st-ink-splash b:nth-child(2){width:7px;height:13px;right:-19px;top:2px}.st-ink-splash b:nth-child(3){width:8px;height:8px;left:3px;bottom:-18px}.st-ink-splash b:nth-child(4){width:5px;height:5px;right:5px;bottom:-22px}.st-ink-splash b:nth-child(5){width:7px;height:7px;left:20px;top:-20px}.st-ink-splash b:nth-child(6){width:4px;height:10px;right:18px;top:-16px}
.st-ink-splash-crit{width:96px;height:72px;filter:drop-shadow(0 0 10px rgba(255,42,0,.72)) saturate(1.25)}.st-ink-splash-counter{width:80px;height:62px;background:radial-gradient(ellipse at 48% 50%,rgba(128,0,0,.98) 0 20%,rgba(222,32,15,.92) 22% 44%,rgba(105,0,0,.74) 45% 58%,transparent 61%)}
@keyframes stInkSplash{0%{opacity:0;transform:translate(-50%,-50%) scale(.08) rotate(-18deg)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.16) rotate(7deg)}52%{opacity:.95;transform:translate(-50%,-50%) scale(1.35) rotate(-3deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.75) rotate(5deg);filter:blur(1.5px) drop-shadow(0 0 4px rgba(160,0,0,.3))}}

/* Hit reaction: short red flash on target instead of a circular impact */
.st-battle-slot.hit:after,.st-battle-slot.crit-hit:after,.st-battle-slot.counter-hit:after{content:"";position:absolute;z-index:92;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,transparent 0 34%,rgba(255,35,0,.38) 43%,rgba(171,0,0,.55) 52%,transparent 65%);animation:stHitWash .48s ease-out forwards}
@keyframes stHitWash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
@media(max-width:700px){.st-ink-splash{width:58px;height:46px}.st-ink-splash-crit{width:72px;height:56px}}

/* 0.5.7 - real travelling bolt: short orange/red ray physically moves from caster image to target */






.st-battle-slot.casting:after{content:"";position:absolute;z-index:94;left:50%;top:42%;width:34px;height:34px;border-radius:50%;transform:translate(-50%,-50%) scale(.35);background:radial-gradient(circle,#fff 0 15%,#ffd56b 25%,#ff6b00 46%,rgba(255,41,0,.28) 66%,transparent 74%);box-shadow:0 0 16px 7px rgba(255,129,0,.78),0 0 34px 13px rgba(255,48,0,.38);animation:stMuzzleCharge .28s ease-out forwards;pointer-events:none}
@keyframes stMuzzleCharge{0%{opacity:0;transform:translate(-50%,-50%) scale(.18)}55%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}100%{opacity:.55;transform:translate(-50%,-50%) scale(.76)}}
@media(max-width:700px){}

/* 0.5.8 - caster dash to VS staging point, then fire from the moving card */
.st-battle-arena{position:relative!important;overflow:visible!important}
.st-action-clone{position:absolute!important;z-index:124!important;margin:0!important;pointer-events:none!important;box-sizing:border-box!important;transform-origin:center center!important;filter:drop-shadow(0 12px 20px rgba(0,0,0,.22));will-change:left,top,transform,opacity;}
.st-action-clone.st-action-ready{z-index:126!important;box-shadow:0 0 0 2px rgba(255,132,0,.45),0 0 26px 9px rgba(255,74,0,.25),0 12px 28px rgba(0,0,0,.2)!important}
.st-action-clone.st-action-ready img{filter:brightness(1.12) saturate(1.18) drop-shadow(0 0 9px rgba(255,111,0,.45))}
.st-caster-away{opacity:.18!important;filter:saturate(.65)!important;transition:opacity .14s ease!important}
.st-action-clone .st-hp-delta,.st-action-clone .st-float{display:none!important}
.st-action-clone.casting:after{width:46px!important;height:46px!important;left:50%!important;top:38%!important;box-shadow:0 0 18px 8px rgba(255,151,0,.9),0 0 42px 18px rgba(255,52,0,.48)!important;z-index:130!important}




@media(max-width:700px){.st-action-clone{transform:scale(.9)}.st-action-clone.casting:after{width:36px!important;height:36px!important}}

/* 0.5.9 - contextual action choreography: target dash / VS AoE / local support-passive */
.st-action-clone{transition:none!important;backface-visibility:hidden;transform-style:preserve-3d;contain:layout paint style;}
.st-action-mode-target{z-index:138!important;filter:drop-shadow(0 15px 24px rgba(0,0,0,.25)) drop-shadow(0 0 10px rgba(255,88,0,.22));}
.st-action-mode-target.st-action-ready{box-shadow:0 0 0 2px rgba(255,125,0,.55),0 0 30px 11px rgba(255,66,0,.3),0 15px 30px rgba(0,0,0,.22)!important;}
.st-action-mode-vs{z-index:136!important;}
.st-local-cast{z-index:120!important;position:relative;will-change:transform,filter;filter:brightness(1.08) saturate(1.08) drop-shadow(0 9px 12px rgba(0,0,0,.14));}
.st-local-cast:before{content:"";position:absolute;z-index:118;inset:-7px;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 50% 42%,rgba(255,247,205,.36),rgba(255,163,38,.12) 42%,transparent 72%);box-shadow:0 0 18px rgba(255,126,0,.25);animation:stLocalPulse .52s ease-out both;}
@keyframes stLocalPulse{0%{opacity:0;transform:scale(.96)}40%{opacity:1;transform:scale(1.04)}100%{opacity:.25;transform:scale(1)}}

@media(max-width:700px){.st-action-mode-target{filter:drop-shadow(0 9px 16px rgba(0,0,0,.22)) drop-shadow(0 0 7px rgba(255,88,0,.2));}.st-local-cast{z-index:120!important}}

















@keyframes stCombatRayHead{from{filter:brightness(1);transform:translateY(-50%) skewX(-24deg) scale(.9)}to{filter:brightness(1.8);transform:translateY(-50%) skewX(-24deg) scale(1.16)}}

/* Bright red HP bar for a more arcade-like battle readout. */
.st-hpbar{background:#4a0b0b!important;border:1px solid rgba(145,0,0,.25)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.22)!important}
.st-hpbar i{background:linear-gradient(90deg,#ff1515 0%,#ff2a18 45%,#ff5a24 100%)!important;box-shadow:0 0 6px rgba(255,25,20,.5)!important}
.st-hp-loss-trail{background:linear-gradient(90deg,#ffb0a0,#ff1616)!important;box-shadow:0 0 9px rgba(255,20,20,.78)!important}

@media(max-width:700px){
  
  
  
  
  
}


/* 0.6.1 - LV99 build system, Vietnamese status chips and level-up celebration */
.st-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.st-upgrade-btn,.st-open-build{display:flex;align-items:center;justify-content:center;min-height:38px;border:0;border-radius:10px;background:linear-gradient(135deg,#ff8a00,#e65a00);color:#fff!important;font-weight:800;text-decoration:none;cursor:pointer;box-shadow:0 5px 13px rgba(211,83,0,.2)}
.st-build-note{margin:12px 0 18px;padding:12px 14px;border-radius:12px;background:#fff7ea;border:1px solid #ffd7a1;color:#784312}.st-upgrade-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}.st-upgrade-card{overflow:visible}.st-upgrade-card.st-focus-build{box-shadow:0 0 0 3px rgba(255,126,0,.25),0 12px 30px rgba(0,0,0,.12)}.st-points-big{font-size:14px;margin:9px 0}.st-build-panel{margin-top:10px;padding-top:10px;border-top:1px solid #e7e7e7}.st-build-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px dashed #ececec}.st-build-row>div:first-child{min-width:0}.st-build-row b{display:block}.st-build-row small{display:block;color:#777;font-size:11px;line-height:1.25}.st-stepper{display:flex;align-items:center;gap:5px;flex:0 0 auto}.st-stepper button{width:31px;height:31px;border:0;border-radius:8px;background:#fff0df;color:#b54d00;font-size:20px;font-weight:900;cursor:pointer}.st-stepper input{width:36px;text-align:center;border:1px solid #ddd;border-radius:7px;padding:6px 2px;background:#fff;font-weight:800}.st-build-summary{margin:10px 0;font-weight:700}.st-reset-form{margin-top:8px}.st-reset-form button{width:100%;border:1px solid #d8a5a5;background:#fff7f7;color:#a52626;border-radius:9px;padding:9px;font-weight:700;cursor:pointer}.st-alloc-current{font-size:11px;color:#777;margin-top:7px;line-height:1.4}
.st-battle-slot{isolation:isolate}.st-status-badges{position:absolute;z-index:148;left:5px;right:5px;top:5px;display:flex;flex-wrap:wrap;gap:3px;justify-content:center;pointer-events:none}.st-status-chip{display:inline-flex;align-items:center;max-width:100%;padding:3px 6px;border-radius:999px;background:rgba(24,24,32,.88);color:#fff;font-size:9px;font-weight:900;line-height:1.1;box-shadow:0 2px 7px rgba(0,0,0,.28);white-space:nowrap}.st-status-chip.stun{background:rgba(245,176,0,.94);color:#321f00}.st-status-chip.sleep{background:rgba(103,74,190,.94)}.st-status-chip.buff{background:rgba(0,137,184,.94)}.st-status-chip.debuff{background:rgba(190,45,59,.94)}.st-status-chip.shield{background:rgba(20,126,184,.94)}.st-status-pop{position:absolute;z-index:154;left:50%;top:33%;transform:translate(-50%,-50%);padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.94);color:#ba2600;font-size:11px;font-weight:1000;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.25);animation:stStatusPop 1.05s ease-out both;pointer-events:none}.st-status-pop.heal,.st-status-pop.lifesteal{color:#008a50}.st-status-pop.counter{color:#a01632}@keyframes stStatusPop{0%{opacity:0;transform:translate(-50%,-35%) scale(.65)}18%{opacity:1;transform:translate(-50%,-55%) scale(1.08)}72%{opacity:1}100%{opacity:0;transform:translate(-50%,-95%) scale(.92)}}
.st-levelup-modal[hidden]{display:none!important}.st-levelup-modal{position:fixed;z-index:9999;inset:0;background:rgba(18,12,27,.64);display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(3px)}.st-levelup-box{width:min(390px,92vw);text-align:center;background:linear-gradient(180deg,#fff9e8,#fff);border:2px solid #f5ad25;border-radius:22px;padding:22px;box-shadow:0 24px 70px rgba(0,0,0,.35);animation:stLevelUpIn .42s cubic-bezier(.18,.9,.28,1.25)}.st-levelup-burst{font-size:29px;font-weight:1000;letter-spacing:1px;color:#f06a00;text-shadow:0 2px 0 #fff,0 0 18px rgba(255,123,0,.45);margin-bottom:8px}.st-levelup-box img{width:128px;height:128px;object-fit:contain;filter:drop-shadow(0 9px 12px rgba(0,0,0,.18))}.st-levelup-box h2{margin:7px 0 4px}.st-levelup-level{font-size:22px;font-weight:900;color:#e85f00}.st-levelup-box p{font-size:15px;font-weight:700}.st-levelup-actions{display:flex;gap:9px;justify-content:center}.st-levelup-actions a,.st-levelup-actions button{border:0;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer;text-decoration:none}.st-levelup-actions a{background:linear-gradient(135deg,#ff8b00,#e85c00);color:#fff}.st-levelup-actions button{background:#eceff3;color:#333}@keyframes stLevelUpIn{from{opacity:0;transform:scale(.72) translateY(18px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media(max-width:700px){.st-card-actions{grid-template-columns:1fr}.st-upgrade-grid{grid-template-columns:1fr}.st-status-chip{font-size:8px;padding:2px 5px}.st-levelup-box{padding:18px}.st-levelup-box img{width:105px;height:105px}}

/* 0.6.2 - compact mobile roster + 5 visible team slots + landscape play control */
.st-mobile-tools{display:none;align-items:center;gap:8px;margin:8px 0 10px}.st-landscape-btn{border:0;border-radius:10px;padding:8px 12px;background:linear-gradient(135deg,#ff8a00,#df5b00);color:#fff;font-weight:900;box-shadow:0 5px 12px rgba(211,83,0,.22);cursor:pointer}.st-orientation-msg{font-size:11px;color:#8a4a14;opacity:0;transition:.18s}.st-orientation-msg.show{opacity:1}
@media(max-width:700px){
  .st-mobile-tools{display:flex}
  .st-wrap:fullscreen{overflow:auto;background:#f4f6f8;padding:6px;max-width:none;width:100%;height:100%}
  .st-wrap:fullscreen .st-mobile-tools{position:sticky;top:0;z-index:800;justify-content:flex-end;background:rgba(244,246,248,.92);padding:4px 0;backdrop-filter:blur(6px)}
  .st-team-box{padding:8px!important}.st-team-head{gap:7px!important}.st-team-head h2{font-size:17px}.st-team-head p{font-size:11px;line-height:1.35}.st-line-label{font-size:9px;margin:8px 0 4px}
  .st-slots{gap:5px!important}.st-slots-front{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:270px!important}.st-slots-back{grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:360px!important}
  .st-slot{min-height:92px!important;padding:4px!important;border-radius:10px!important}.st-slot-content img{width:54px!important;height:54px!important;margin-bottom:2px!important}.st-slot-content strong{font-size:10px!important;line-height:1.1}.st-slot-content small{font-size:8px!important;margin-top:2px}.st-slot-meta{gap:2px!important;margin-top:2px!important}.st-slot-meta span{font-size:7px!important;padding:1px 3px!important}.st-slot-plus{font-size:23px!important}.st-slot-remove{top:2px!important;right:2px!important;width:19px!important;height:19px!important;font-size:12px!important}.st-team-tip{font-size:10px!important;padding:6px 7px!important;margin-top:7px!important}
  .st-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}.st-card{padding:6px!important;border-radius:11px!important}.st-card img{width:100%!important;max-width:118px!important;max-height:118px!important;aspect-ratio:1/1!important;margin:0 auto!important}.st-card h3{font-size:12px!important;margin:3px 0!important;line-height:1.15}.st-meta{gap:3px!important;font-size:9px!important}.st-meta b,.st-meta span,.st-meta strong{padding:2px 4px!important}.st-exp{margin:5px 0 2px!important;height:5px!important}.st-exp-label{font-size:8px!important}.st-power{font-size:10px!important;margin:5px 0!important}.st-stats{font-size:9px!important;gap:3px!important;padding:5px!important}.st-points{font-size:9px!important;margin-top:4px!important}.st-pick-btn,.st-upgrade-btn{font-size:9px!important;min-height:30px!important;padding:5px!important}.st-card-actions{gap:4px!important;margin-top:5px!important}
  .st-hero{padding:10px!important}.st-hero h1{font-size:20px!important}.st-hero p{font-size:11px!important}.st-badge{padding:7px 9px!important;font-size:11px!important}.st-tabs{margin:8px 0!important}.st-tabs a,.st-tabs span{padding:7px 9px!important;font-size:11px!important}
}
@media(max-width:390px){
  .st-card img{max-width:102px!important;max-height:102px!important}.st-slots-front{max-width:238px!important}.st-slots-back{max-width:330px!important}.st-slot{min-height:84px!important}.st-slot-content img{width:46px!important;height:46px!important}
}
@media(orientation:landscape) and (max-height:520px){
  .st-mobile-tools{display:flex}.st-hero{padding:7px 10px!important}.st-hero p{display:none}.st-tabs{margin:5px 0!important}.st-team-box{margin-bottom:8px!important}.st-team-head p{display:none}.st-line-label{margin:4px 0 2px}.st-slot{min-height:76px!important}.st-slot-content img{width:42px!important;height:42px!important}.st-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}.st-card img{max-width:84px!important;max-height:84px!important}.st-card h3{font-size:10px!important}.st-stats,.st-points,.st-exp-label{font-size:8px!important}.st-title{font-size:16px!important;margin:6px 0!important}
}

/* 0.6.3 - upgrade stat order + live allocation preview */
.st-preview-delta{display:none;margin-left:3px;color:#079447;font-style:normal;font-size:.86em;font-weight:900;white-space:nowrap}
.st-preview-delta.show{display:inline}.st-has-preview .st-stats-preview,.st-has-preview .st-power{box-shadow:0 0 0 2px rgba(255,134,22,.10)}
.st-has-preview .st-preview-value,.st-has-preview .st-preview-power{color:#d65f00;transition:color .15s ease}
@media(max-width:700px){.st-preview-delta{font-size:8px}.st-stats-preview{grid-template-columns:1fr 1fr!important}}

/* 0.7.0 — EXP dài hạn + Cường hóa sao */
.st-stars{display:flex;align-items:center;justify-content:center;gap:4px;margin:6px 0;font-size:20px;line-height:1}
.st-stars>span{display:inline-block;transition:transform .18s ease,filter .18s ease,color .18s ease}.st-stars .empty{color:#c6ccd4;text-shadow:0 1px 2px rgba(0,0,0,.16)}.st-stars .earned{color:#ffc400;text-shadow:0 0 3px #fff4a6,0 0 7px rgba(255,174,0,.88),0 1px 1px rgba(122,73,0,.35);filter:drop-shadow(0 0 3px rgba(255,192,0,.72))}
.st-stars.maxed .earned{color:#ffd52a;text-shadow:0 0 4px #fffbd4,0 0 9px #ffc400,0 0 16px rgba(255,153,0,.95);filter:drop-shadow(0 0 6px rgba(255,194,0,.95));animation:stStarMaxTwinkle 1.15s ease-in-out infinite}.st-stars.maxed .earned:nth-child(2){animation-delay:.11s}.st-stars.maxed .earned:nth-child(3){animation-delay:.22s}.st-stars.maxed .earned:nth-child(4){animation-delay:.33s}.st-stars.maxed .earned:nth-child(5){animation-delay:.44s}.st-stars small{font-size:11px;margin-left:7px;color:#6c7480;text-shadow:none}.st-stars.compact{font-size:16px;margin:4px 0}
.st-star-inline{color:#aeb8c5;font-weight:900}.st-star-inline.gold{color:#ffc400;text-shadow:0 0 4px rgba(255,201,40,.85)}.st-star-inline.maxed{color:#ffd52a;text-shadow:0 0 4px #fff8bd,0 0 9px #ffbf00;animation:stStarInlineMax 1.15s ease-in-out infinite}
@keyframes stStarMaxTwinkle{0%,100%{transform:scale(1);filter:brightness(1) drop-shadow(0 0 5px rgba(255,194,0,.9))}50%{transform:scale(1.22);filter:brightness(1.45) drop-shadow(0 0 10px rgba(255,166,0,1))}}
@keyframes stStarInlineMax{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5)}}
.st-exp-feed-panel,.st-star-upgrade{border:1px solid #e4d4b0;background:linear-gradient(180deg,#fffdf8,#fff8e9);border-radius:12px;padding:12px;margin:12px 0}.st-exp-feed-panel h2{margin:0 0 5px}.st-exp-feed-form{display:grid;grid-template-columns:1.2fr 1.4fr .55fr auto;gap:8px;align-items:end}.st-exp-feed-form label{font-weight:700;font-size:12px}.st-exp-feed-form select,.st-exp-feed-form input{width:100%;box-sizing:border-box;margin-top:4px}.st-star-upgrade{display:flex;flex-direction:column;gap:5px}.st-star-btn{background:linear-gradient(180deg,#ffd75b,#d79a14)!important;color:#543400!important}.st-star-max{font-weight:800;color:#b77900}.st-exp-line{font-size:12px;color:#5b6570;margin:3px 0 7px;text-align:center}
@media(max-width:720px){.st-exp-feed-form{grid-template-columns:1fr 1fr}.st-exp-feed-form .st-btn{grid-column:1/-1}.st-stars{font-size:16px}}
.st-upgrade-success{padding:9px 12px;margin:8px 0;border-radius:9px;background:#eaf8ee;border:1px solid #9bd2a8;color:#225d32}

/* 0.7.2 — team labels + highlighted class/level */
.st-slot-meta .st-class{background:linear-gradient(135deg,#e4e8ff,#eee2ff)!important;color:#4d43ad!important;border:1px solid #c9c4f5;font-weight:900}
.st-slot-meta .st-level{background:linear-gradient(135deg,#fff0e6,#ffe3d4)!important;color:#d74f00!important;border:1px solid #ffc4a3;font-weight:900}

/* 0.7.3 - Unified in-page action modal: gameplay actions stay on the current screen. */
.st-modal-open{overflow:hidden}
.st-action-modal[hidden]{display:none!important}
.st-action-modal{position:fixed;inset:0;z-index:100120;display:flex;align-items:center;justify-content:center;padding:18px}
.st-action-modal-backdrop{position:absolute;inset:0;background:rgba(15,25,38,.54);backdrop-filter:blur(3px)}
.st-action-modal-dialog{position:relative;z-index:1;width:min(470px,calc(100vw - 32px));padding:28px 25px 23px;border:1px solid #ffd27a;border-radius:24px;background:#fffaf0;box-shadow:0 25px 70px rgba(22,32,45,.32);text-align:center;animation:stActionModalIn .18s ease-out}
.st-action-modal-x{position:absolute;right:11px;top:9px;width:36px;height:36px;padding:0;border:0;background:transparent;color:#8c795e;font-size:29px;line-height:34px;cursor:pointer}
.st-action-modal-icon{width:64px;height:64px;margin:0 auto 10px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#fff0ae,#ffc94a);color:#b85b00;font-size:28px;font-weight:950;box-shadow:0 8px 20px rgba(235,142,0,.2)}
.st-action-modal-dialog h3{margin:6px 0 12px;color:#3d3325;font-size:23px;font-weight:950;line-height:1.3}
.st-action-modal-message{margin:8px 0;color:#5f5342;font-size:16px;font-weight:700;line-height:1.42}
.st-action-modal-message.is-emphasis{color:#e36f00;font-size:26px;font-weight:950;line-height:1.28;text-shadow:0 1px 0 rgba(255,218,145,.35)}
.st-action-modal-detail{margin:8px 0 18px;color:#746550;font-size:14px;font-weight:700;line-height:1.45}
.st-action-modal-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:10px;margin-top:16px}
.st-action-modal-actions button{min-height:46px;border-radius:999px;padding:10px 16px;font-size:16px;font-weight:900;cursor:pointer}
.st-action-modal-cancel{border:1px solid #d8dde4;background:#fff;color:#59636f}
.st-action-modal-ok{border:0;background:linear-gradient(180deg,#ffcf48,#ff9e00 60%,#ec7a00);color:#fff;box-shadow:0 7px 17px rgba(255,143,0,.28)}
.st-action-modal-cancel[hidden]{display:none!important}.st-action-modal.is-success .st-action-modal-icon{background:linear-gradient(180deg,#dff8e6,#a8e6b8);color:#177d3f}.st-action-modal.is-error .st-action-modal-icon{background:linear-gradient(180deg,#ffe3df,#ffc4bd);color:#c33a28}.st-action-modal.is-levelup .st-action-modal-icon{background:linear-gradient(180deg,#e9e4ff,#c9baff);color:#6143cf}.st-action-modal.is-confirm .st-action-modal-icon{background:linear-gradient(180deg,#fff0ae,#ffc94a);color:#b85b00}
@keyframes stActionModalIn{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:600px){.st-action-modal-dialog{padding:24px 18px 19px;border-radius:20px}.st-action-modal-message.is-emphasis{font-size:21px}.st-action-modal-actions{grid-template-columns:1fr}.st-action-modal-dialog h3{font-size:20px}}

/* 0.7.4 - Earned stars are gold immediately; 5★ uses stronger sparkle. DEF public label = Đỡ Đòn. */

.st-team-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.st-team-total{font-weight:700;color:#6b7280;font-size:14px}.st-team-total strong{display:inline-block;margin-left:6px;color:#d97706;font-size:22px;font-weight:900;line-height:1}.st-team-total strong::after{content:" LC";font-size:12px;font-weight:800;color:#b45309}@media(max-width:700px){.st-team-actions{align-items:center}.st-team-total strong{font-size:20px}}

/* 0.7.13 battle navigation and pet status refinement */
.st-back{font-size:28px!important;font-weight:950!important;color:#b85a22!important;text-decoration:none!important}
.st-battle-controls .st-find-bottom{border:1px solid #b94f16!important;background:linear-gradient(180deg,#ef9446,#c85b1e)!important;color:#fff!important;border-radius:999px;padding:10px 18px;font-size:15px;font-weight:900;cursor:pointer;box-shadow:0 4px 10px rgba(184,90,34,.22)}
.st-battle-controls .st-find-bottom:hover,.st-battle-controls .st-find-bottom:focus{background:linear-gradient(180deg,#f4a25b,#b94f16)!important;color:#fff!important;border-color:#a94714!important}
.st-battle-controls{flex-wrap:wrap}
.st-battle-slot small{display:block}
.st-action-modal{z-index:100120}

/* 0.7.14B — Battle card: stars above name, class/role/level only; speed removed. */
.st-battle-stars{min-height:17px;margin:1px 0 2px;color:#ffc400;font-size:15px;font-weight:900;line-height:1;letter-spacing:1px;text-align:center;text-shadow:0 0 4px rgba(255,201,40,.72)}
.st-battle-stars.maxed{color:#ffd52a;text-shadow:0 0 4px #fff8bd,0 0 8px rgba(255,191,0,.8)}
.st-battle-meta{display:block!important;margin-top:2px;color:#687481!important;line-height:1.25!important;white-space:normal}
@media(max-width:760px){.st-battle-stars{font-size:13px;letter-spacing:.6px}.st-battle-meta{font-size:8.5px!important}}

/* 0.7.16C — compact battle cards + own EXP only + stronger critical impact */
.st-battle-arena{padding:12px!important;border-radius:18px!important}
.st-side-title{margin:2px 0 5px!important}.st-side-title b{font-size:17px!important}.st-side-title span{font-size:10px!important}
.st-battle-team{gap:5px!important}.enemy-team{margin-bottom:1px!important}.my-team{margin-top:1px!important}
.st-battle-row{gap:8px!important;min-height:108px!important}
.st-battle-slot{width:122px!important;min-height:126px!important;padding:5px 6px 6px!important;border-radius:12px!important;box-shadow:0 3px 9px rgba(30,50,70,.08)!important}
.st-battle-slot img{width:88px!important;height:68px!important;margin:0 auto!important;object-fit:contain!important}
.st-battle-stars{min-height:12px!important;margin:0 0 1px!important;color:#ffc400;font-size:12px!important;font-weight:950;line-height:1!important;letter-spacing:.45px!important;text-align:center;text-shadow:0 0 3px rgba(255,201,40,.72)}
.st-battle-stars.maxed{color:#ffd52a;text-shadow:0 0 4px #fff8bd,0 0 8px rgba(255,191,0,.8)}
.st-battle-slot>b{font-size:10.5px!important;line-height:1.1!important;height:23px!important;margin-top:1px!important;display:flex!important;align-items:center!important;justify-content:center!important}
.st-battle-meta{display:block!important;margin-top:1px!important;color:#687481!important;line-height:1.12!important;white-space:normal!important;font-size:8.3px!important;min-height:18px!important}
.st-battle-meta .st-level{font-weight:950;color:#d35b00}
.st-own-exp{margin:3px 2px 2px!important}
.st-own-expbar{height:4px;background:#dbe8f3;border-radius:999px;overflow:hidden;box-shadow:inset 0 1px 1px rgba(0,0,0,.08)}
.st-own-expbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1c92ff,#43b5ff);box-shadow:0 0 4px rgba(28,146,255,.48)}
.st-own-exp span{display:block;margin-top:1px;color:#2680bd;font-size:7px;font-weight:800;line-height:1.05;white-space:nowrap}
.st-hpbar{height:6px!important;margin:3px 2px 1px!important;background:#4a0b0b!important;border:1px solid rgba(145,0,0,.25)!important;border-radius:999px!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.22)!important;position:relative!important;overflow:visible!important}
.st-hpbar i{display:block;width:100%;height:100%;border-radius:999px;background:linear-gradient(90deg,#ff1515 0%,#ff2a18 45%,#ff5a24 100%)!important;box-shadow:0 0 5px rgba(255,25,20,.45)!important;transition:width .42s cubic-bezier(.2,.74,.23,1)!important}
.st-hptext{font-size:7.8px!important;color:#44515e!important;line-height:1.05!important}
.st-vs{font-size:20px!important;margin:0!important}

/* Critical hit: readable, short and punchy without hiding the whole arena. */
.st-crit-burst{position:absolute;z-index:165;left:50%;top:20%;transform:translate(-50%,-50%) scale(.45) rotate(-5deg);pointer-events:none;white-space:nowrap;font-size:27px;line-height:1;font-weight:1000;letter-spacing:1px;color:#8f2718;-webkit-text-stroke:.45px #ffd365;text-shadow:0 1px 0 #ffdf82,1px 0 0 #ffdf82,-1px 0 0 #ffdf82,0 -1px 0 #ffdf82,0 4px 11px rgba(92,20,6,.66),0 0 18px rgba(255,87,17,.34);animation:stCritBurst 1.02s cubic-bezier(.16,.82,.2,1) forwards}
.st-crit-burst:before,.st-crit-burst:after{content:"";position:absolute;left:50%;top:50%;z-index:-1;border-radius:50%;pointer-events:none}
.st-crit-burst:before{width:58px;height:58px;transform:translate(-50%,-50%);border:3px solid rgba(255,122,20,.75);box-shadow:0 0 0 8px rgba(255,68,0,.12),0 0 28px rgba(255,71,0,.55);animation:stCritRing .55s ease-out forwards}
.st-crit-burst:after{width:16px;height:16px;transform:translate(-50%,-50%);background:#fff2a1;box-shadow:0 0 12px 7px #ff8517,0 0 28px 15px rgba(230,38,0,.58);animation:stCritCore .48s ease-out forwards}
.st-battle-slot.crit-shake{animation:stCritShake .5s ease-out!important}
.st-float.crit-dmg{color:#9d2c1a!important;font-size:31px!important;font-weight:1000!important;-webkit-text-stroke:.35px #ffd86a;text-shadow:0 1px 0 #ffe18a,1px 0 0 #ffe18a,-1px 0 0 #ffe18a,0 4px 10px rgba(88,17,5,.62)!important}
@keyframes stCritBurst{0%{opacity:0;transform:translate(-50%,-40%) scale(.35) rotate(-8deg)}16%{opacity:1;transform:translate(-50%,-56%) scale(1.48) rotate(2deg)}36%{transform:translate(-50%,-60%) scale(1.05) rotate(-1deg)}72%{opacity:1;transform:translate(-50%,-78%) scale(1.02)}100%{opacity:0;transform:translate(-50%,-118%) scale(.9)}}
@keyframes stCritRing{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.3)}}
@keyframes stCritCore{0%{opacity:1;transform:translate(-50%,-50%) scale(.35)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.1)}}
@keyframes stCritShake{0%,100%{transform:translateX(0)}14%{transform:translateX(-7px) rotate(-1deg)}28%{transform:translateX(7px) rotate(1deg)}44%{transform:translateX(-5px)}60%{transform:translateX(4px)}76%{transform:translateX(-2px)}}

.st-battle-arena.st-arena-crit-shake{animation:stArenaCritShake .38s ease-out}
@keyframes stArenaCritShake{0%,100%{transform:translate(0,0)}18%{transform:translate(-2px,1px)}36%{transform:translate(3px,-1px)}54%{transform:translate(-2px,-1px)}72%{transform:translate(1px,1px)}}

/* Formation + matchmaking pet-card hierarchy retained. */
.st-slot-stars,.st-mini-stars{display:flex;align-items:center;justify-content:center;gap:2px;line-height:1;margin:2px 0 3px;white-space:nowrap}
.st-slot-stars{font-size:14px}.st-mini-stars{font-size:13px}
.st-slot-stars .earned,.st-mini-stars .earned{color:#ffc400;text-shadow:0 0 3px #fff4a6,0 0 7px rgba(255,174,0,.82);filter:drop-shadow(0 0 2px rgba(255,192,0,.65))}
.st-slot-stars .empty,.st-mini-stars .empty{color:#c7ced6;text-shadow:0 1px 1px rgba(0,0,0,.10)}
.st-slot-stars.maxed .earned,.st-mini-stars.maxed .earned{color:#ffd52a;text-shadow:0 0 4px #fffbd4,0 0 9px #ffc400;filter:drop-shadow(0 0 4px rgba(255,194,0,.9))}
.st-slot-power,.st-mini-power{color:#a95400!important;font-weight:900!important}
.st-mini-meta{display:block!important;margin-top:2px!important;color:#687481!important;line-height:1.25!important}
.st-mini-power{display:block!important;margin-top:3px!important;font-size:10px!important}
.st-class-text{font-weight:900;color:#4b45a8}

@media(max-width:760px){
  .st-battle-arena{padding:6px!important}
  .st-side-title b{font-size:14px!important}.st-side-title span{font-size:9px!important}
  .st-battle-row{gap:4px!important;min-height:88px!important}
  .st-battle-slot{width:78px!important;min-height:100px!important;padding:3px!important;border-radius:9px!important}
  .st-battle-slot img{width:60px!important;height:48px!important}
  .st-battle-stars{font-size:9px!important;letter-spacing:0!important;min-height:9px!important}
  .st-battle-slot>b{font-size:8px!important;height:18px!important}
  .st-battle-meta{font-size:6.7px!important;min-height:15px!important}
  .st-own-exp{margin:2px 1px 1px!important}.st-own-exp span{font-size:5.8px!important}.st-own-expbar{height:3px!important}
  .st-hpbar{height:5px!important;margin:2px 1px 1px!important}.st-hptext{font-size:6.4px!important}
  .st-vs{font-size:16px!important}
  .st-crit-burst{font-size:20px!important}.st-float.crit-dmg{font-size:24px!important}
  .st-slot-stars{font-size:11px;gap:1px;margin:1px 0 2px}.st-mini-stars{font-size:10px;gap:1px;margin:1px 0 2px}.st-mini-meta{font-size:8px!important}.st-mini-power{font-size:8px!important}
}
@media(max-width:420px){
  .st-battle-row{gap:3px!important}.st-battle-slot{width:72px!important}.st-battle-slot img{width:55px!important;height:45px!important}
}
@media(prefers-reduced-motion:reduce){.st-crit-burst,.st-battle-slot.crit-shake{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* 0.7.18A — Sharper gold stars: reduce bloom/glow so each star stays crisp on cards. */
.st-stars .earned,
.st-slot-stars .earned,
.st-mini-stars .earned{
  color:#f5b900!important;
  text-shadow:0 1px 0 rgba(126,79,0,.28)!important;
  filter:none!important;
}
.st-stars.maxed .earned,
.st-slot-stars.maxed .earned,
.st-mini-stars.maxed .earned{
  color:#ffc928!important;
  text-shadow:0 1px 0 rgba(126,79,0,.30),0 0 1px rgba(255,208,64,.30)!important;
  filter:none!important;
  animation:stStarSharpTwinkle 1.8s ease-in-out infinite!important;
}
.st-star-inline.gold,
.st-star-inline.maxed{
  color:#f5b900!important;
  text-shadow:0 1px 0 rgba(126,79,0,.28)!important;
  filter:none!important;
}
.st-star-inline.maxed{animation:stStarInlineSharp 1.8s ease-in-out infinite!important}
.st-battle-stars{
  color:#f5b900!important;
  text-shadow:0 1px 0 rgba(126,79,0,.28)!important;
}
.st-battle-stars.maxed{
  color:#ffc928!important;
  text-shadow:0 1px 0 rgba(126,79,0,.30),0 0 1px rgba(255,208,64,.28)!important;
}
@keyframes stStarSharpTwinkle{
  0%,100%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.035);filter:brightness(1.08)}
}
@keyframes stStarInlineSharp{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.08)}
}


/* 0.7.19C — battle audio + readable damage/heal feedback.
   Floating numbers intentionally keep full opacity for a readable beat,
   independent from x1/x2/x4 replay speed. */
.st-float{
  z-index:190!important;
  top:31%!important;
  font-size:25px!important;
  font-weight:1000!important;
  line-height:1!important;
  letter-spacing:.35px!important;
  opacity:0;
  filter:none!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
  animation:stFloatReadable 1.42s cubic-bezier(.18,.76,.22,1) forwards!important;
}
.st-float.damage{
  color:#d42f24!important;
  -webkit-text-stroke:.55px #5c130e;
  text-shadow:0 1px 0 #fff3e8,1px 0 0 #fff3e8,-1px 0 0 #fff3e8,0 -1px 0 #fff3e8,0 3px 7px rgba(74,13,8,.42)!important;
}
.st-float.heal-num{
  color:#0c9f55!important;
  -webkit-text-stroke:.55px #075b34;
  text-shadow:0 1px 0 #effff6,1px 0 0 #effff6,-1px 0 0 #effff6,0 -1px 0 #effff6,0 3px 7px rgba(0,75,40,.35)!important;
}
.st-float.counter-dmg{
  color:#8f2ea8!important;
  -webkit-text-stroke:.5px #43104f;
  text-shadow:0 1px 0 #fff1ff,1px 0 0 #fff1ff,-1px 0 0 #fff1ff,0 -1px 0 #fff1ff,0 3px 7px rgba(62,12,74,.38)!important;
}
.st-float.crit-dmg{
  color:#b72b17!important;
  font-size:34px!important;
  font-weight:1000!important;
  -webkit-text-stroke:.75px #6e160c!important;
  text-shadow:0 1px 0 #ffe8a8,1px 0 0 #ffe8a8,-1px 0 0 #ffe8a8,0 -1px 0 #ffe8a8,0 4px 9px rgba(84,16,5,.48)!important;
  animation:stCritDamageReadable 1.62s cubic-bezier(.16,.82,.2,1) forwards!important;
}
.st-crit-burst{
  z-index:195!important;
  color:#8d2416!important;
  -webkit-text-stroke:.65px #6b170d!important;
  text-shadow:0 1px 0 #ffe38a,1px 0 0 #ffe38a,-1px 0 0 #ffe38a,0 -1px 0 #ffe38a,0 4px 9px rgba(83,17,6,.5)!important;
  filter:none!important;
  animation:stCritBurstReadable 1.55s cubic-bezier(.16,.82,.2,1) forwards!important;
}
.st-hp-delta{
  z-index:185!important;
  top:-22px!important;
  min-width:42px;
  font-size:11px!important;
  font-weight:1000!important;
  opacity:0;
  filter:none!important;
  border-width:1px!important;
  border-style:solid!important;
  box-shadow:0 2px 7px rgba(0,0,0,.22)!important;
  animation:stHpDeltaReadable 1.34s ease-out forwards!important;
}
.st-hp-delta.damage{color:#c5231d!important;background:#fff5f2!important;border-color:#db6e66!important}
.st-hp-delta.heal{color:#087f48!important;background:#f1fff7!important;border-color:#55b987!important}
@keyframes stFloatReadable{
  0%{opacity:0;transform:translate(-50%,9px) scale(.78)}
  12%{opacity:1;transform:translate(-50%,0) scale(1.12)}
  22%{opacity:1;transform:translate(-50%,-3px) scale(1)}
  68%{opacity:1;transform:translate(-50%,-10px) scale(1)}
  82%{opacity:1;transform:translate(-50%,-18px) scale(.99)}
  100%{opacity:0;transform:translate(-50%,-40px) scale(.94)}
}
@keyframes stCritDamageReadable{
  0%{opacity:0;transform:translate(-50%,8px) scale(.65)}
  11%{opacity:1;transform:translate(-50%,-2px) scale(1.34)}
  22%{opacity:1;transform:translate(-50%,-5px) scale(1.04)}
  69%{opacity:1;transform:translate(-50%,-12px) scale(1.04)}
  84%{opacity:1;transform:translate(-50%,-21px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-46px) scale(.94)}
}
@keyframes stCritBurstReadable{
  0%{opacity:0;transform:translate(-50%,-40%) scale(.4) rotate(-5deg)}
  11%{opacity:1;transform:translate(-50%,-55%) scale(1.32) rotate(1deg)}
  22%{opacity:1;transform:translate(-50%,-59%) scale(1.04) rotate(0)}
  69%{opacity:1;transform:translate(-50%,-70%) scale(1.04)}
  84%{opacity:1;transform:translate(-50%,-82%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-112%) scale(.93)}
}
@keyframes stHpDeltaReadable{
  0%{opacity:0;transform:translate(-50%,4px) scale(.78)}
  14%{opacity:1;transform:translate(-50%,0) scale(1.06)}
  68%{opacity:1;transform:translate(-50%,-4px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-17px) scale(.96)}
}
@media(max-width:760px){
  .st-float{font-size:19px!important;top:30%!important}
  .st-float.crit-dmg{font-size:27px!important}
  .st-crit-burst{font-size:21px!important}
  .st-hp-delta{font-size:8.5px!important;top:-18px!important;min-width:34px;padding:1px 3px!important}
}

/* 0.7.21C — cleaner combat VFX: compact energy bolts, no spear/tree-like projectile head. */











@keyframes stEnergyOrb{from{filter:brightness(1);transform:translateY(-50%) scale(.88)}to{filter:brightness(1.5);transform:translateY(-50%) scale(1.12)}}
/* Healing/support gets a vertical blessing shimmer instead of a combat-looking impact. */
.st-impact-heal,.st-burst-heal,.st-impact-buff,.st-burst-buff,.st-impact-shield,.st-burst-shield{border:0!important;width:54px!important;height:54px!important;margin:-27px!important;background:radial-gradient(circle,rgba(255,255,255,.96) 0 7%,rgba(126,255,211,.62) 10% 24%,rgba(37,215,143,.22) 32% 52%,transparent 68%)!important;box-shadow:0 0 20px rgba(80,255,191,.45)!important;animation:stBlessingPulse .9s ease-out forwards!important}
.st-impact-heal:before,.st-burst-heal:before,.st-impact-buff:before,.st-burst-buff:before,.st-impact-shield:before,.st-burst-shield:before{content:"✦";position:absolute;inset:-20px;color:#eafff7;font-size:34px;text-align:center;line-height:94px;text-shadow:0 0 7px #61e9bb,0 0 16px rgba(73,229,179,.65);animation:stBlessingStar .9s ease-out forwards}
@keyframes stBlessingPulse{0%{opacity:0;transform:translate(-50%,-30%) scale(.45)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-95%) scale(1.35)}}
@keyframes stBlessingStar{0%{opacity:0;transform:translateY(12px) scale(.65)}40%{opacity:1;transform:translateY(-2px) scale(1.12)}100%{opacity:0;transform:translateY(-30px) scale(.92)}}
@media(max-width:700px){}


/* 0.7.22B — Dark Gold arena theme: matchmaking + battle only. */
.st-match-wrap,.st-battle-wrap{color:#f5f1e7}
.st-match-wrap{padding-top:14px;padding-bottom:18px;background:radial-gradient(circle at 50% 0,rgba(142,96,20,.14),transparent 36%),linear-gradient(180deg,#11100d 0%,#070707 100%);border:1px solid #5d4518;border-radius:20px;box-shadow:inset 0 0 50px rgba(0,0,0,.7),0 12px 34px rgba(0,0,0,.18)}
.st-match-wrap .st-hero{background:linear-gradient(145deg,#1b1914,#0b0b0a)!important;border:1px solid #c9982e!important;box-shadow:inset 0 0 0 1px rgba(255,221,119,.05),0 8px 24px rgba(0,0,0,.34)!important}
.st-match-wrap .st-hero h1{color:#ffd86a!important}.st-match-wrap .st-hero p{color:#c9c3b5!important}.st-match-wrap .st-badge{background:#11100d!important;border-color:#c9982e!important;color:#ffd86a!important}
.st-match-wrap .st-tabs a{background:#171612!important;border:1px solid #65501f!important;color:#e7dfca!important}.st-match-wrap .st-tabs a.active{background:linear-gradient(180deg,#f4a63a,#c86513)!important;border-color:#ffbf55!important;color:#fff!important;box-shadow:0 0 0 1px rgba(255,210,105,.22),0 5px 14px rgba(211,111,20,.28)!important;font-size:1.08em;padding-left:18px!important;padding-right:18px!important}
.st-match-wrap .st-opponent,.st-match-wrap .st-match-my,.st-match-wrap .st-empty{background:linear-gradient(155deg,#181713,#090909)!important;border:1px solid #b88a29!important;color:#eee7d8!important;box-shadow:inset 0 0 0 1px rgba(255,223,128,.04),0 7px 20px rgba(0,0,0,.35)!important}
.st-match-wrap .st-opponent-head h3,.st-match-wrap .st-match-my h2{color:#ffd86a!important}.st-match-wrap .st-opponent-head p,.st-match-wrap .st-opponent-head strong{color:#d8cfba!important}
.st-match-wrap .st-mini-slot{background:linear-gradient(160deg,#181713,#080808)!important;border:1px solid #c79a35!important;color:#f6f0e4!important;box-shadow:inset 0 0 0 1px rgba(255,223,128,.05),0 4px 12px rgba(0,0,0,.42)!important}
.st-match-wrap .st-mini-slot.empty{border-color:#6b5627!important;color:#8f8778!important}.st-match-wrap .st-mini-slot b{color:#fff3d2!important}.st-match-wrap .st-mini-meta{color:#bbb3a4!important}.st-match-wrap .st-mini-power{color:#f0b94b!important;font-weight:900!important}.st-match-wrap .st-class-text{color:#e7d4a2!important}.st-match-wrap .st-level{color:#ff9d35!important}
.st-match-wrap .st-fight-btn{background:linear-gradient(180deg,#f6ae42,#c76612)!important;border:1px solid #ffca69!important;box-shadow:0 5px 14px rgba(211,111,20,.3)!important}

.st-battle-wrap{padding-top:12px;padding-bottom:18px;background:radial-gradient(circle at 50% 42%,rgba(142,96,20,.13),transparent 38%),linear-gradient(180deg,#100f0c,#050505)!important;border:1px solid #5d4518;border-radius:20px;box-shadow:inset 0 0 58px rgba(0,0,0,.72),0 12px 34px rgba(0,0,0,.2)}
.st-battle-wrap .st-battle-topbar{color:#e8dfcc}.st-battle-wrap .st-battle-topbar b{color:#ffd86a}.st-battle-wrap .st-back{color:#f0a54a!important}
.st-battle-wrap .st-battle-arena{background:radial-gradient(ellipse at center,#201b10 0%,#11100d 42%,#050505 100%)!important;border:1px solid #c99a35!important;box-shadow:inset 0 0 45px rgba(0,0,0,.76),inset 0 0 0 1px rgba(255,223,128,.06),0 0 22px rgba(167,111,21,.12)!important}
.st-battle-wrap .st-side-title{color:#e7dfce!important}.st-battle-wrap .st-side-title b{color:#ffd86a!important}.st-battle-wrap .st-side-title span{color:#aaa18f!important}.st-battle-wrap .st-vs{color:#ffd45c!important;text-shadow:0 0 8px rgba(226,164,40,.28)!important}
.st-battle-wrap .st-battle-slot{background:linear-gradient(160deg,#1a1915,#070707)!important;border:1px solid #c99a35!important;color:#f7f0df!important;box-shadow:inset 0 0 0 1px rgba(255,225,134,.055),0 4px 13px rgba(0,0,0,.52)!important}
.st-battle-wrap .st-battle-slot.front{border-color:#e0ad3d!important}.st-battle-wrap .st-battle-slot.empty{border-color:#5f4d25!important;background:#0b0b0a!important}.st-battle-wrap .st-battle-slot>b{color:#fff2cd!important}.st-battle-wrap .st-battle-meta{color:#bdb4a4!important}.st-battle-wrap .st-battle-meta .st-level{color:#ff9e35!important}.st-battle-wrap .st-hptext{color:#e9e1d1!important}.st-battle-wrap .st-own-exp span{color:#aeb9c5!important}
.st-battle-wrap .st-battle-controls{color:#d6cdbb!important}.st-battle-wrap .st-battle-controls>span{color:#c9bea9!important}.st-battle-wrap .st-battle-controls button{background:#171612!important;border-color:#6b5627!important;color:#e8dfcc!important}.st-battle-wrap .st-battle-controls button.active{background:linear-gradient(180deg,#d59b30,#9c6819)!important;border-color:#e6b84e!important;color:#fff!important}.st-battle-wrap .st-battle-controls .st-skip-battle,.st-battle-wrap .st-battle-controls .st-find-bottom{background:linear-gradient(180deg,#f3a43a,#c65f12)!important;border-color:#ffc35b!important;color:#fff!important}
.st-battle-wrap .st-battle-log,.st-battle-wrap .st-result{background:#11100d!important;border:1px solid #765c25!important;color:#ddd4c3!important}.st-battle-wrap .st-result strong{color:#ffd86a!important}
@media(max-width:700px){.st-match-wrap,.st-battle-wrap{border-radius:12px;padding-top:6px}.st-match-wrap .st-tabs a.active{font-size:1em;padding-left:12px!important;padding-right:12px!important}}


/* 0.7.22C — Dark Gold main Game screen + highlighted Find Match tab.
   Scoped to Pet Battle only; existing matchmaking/battle rules remain untouched. */
.hvn-sieu-thu-nav-item>a>span{font-size:18px;font-weight:700;line-height:1}

.st-game-wrap{
  color:#f3ecde;
  padding-top:14px;
  padding-bottom:20px;
  background:radial-gradient(circle at 50% 0,rgba(151,101,21,.13),transparent 34%),linear-gradient(180deg,#11100d 0%,#070707 100%);
  border:1px solid #5d4518;
  border-radius:20px;
  box-shadow:inset 0 0 52px rgba(0,0,0,.72),0 12px 34px rgba(0,0,0,.18);
}
.st-game-wrap .st-hero{
  background:linear-gradient(145deg,#1b1914,#0b0b0a)!important;
  border-color:#c9982e!important;
  box-shadow:inset 0 0 0 1px rgba(255,221,119,.05),0 8px 24px rgba(0,0,0,.34)!important;
}
.st-game-wrap .st-hero h1{color:#ffd86a!important}
.st-game-wrap .st-hero p{color:#c9c3b5!important}
.st-game-wrap .st-badge{background:#11100d!important;border-color:#c9982e!important;color:#ffd86a!important}
.st-game-wrap .st-tabs a{background:#171612!important;border-color:#65501f!important;color:#e7dfca!important}
.st-game-wrap .st-tabs a.active{background:#1c1a14!important;border-color:#8c6c28!important;color:#f1e8d5!important;box-shadow:none!important}
.st-game-wrap .st-tabs a.st-find-tab{
  background:linear-gradient(180deg,#ffb443,#e57813)!important;
  border-color:#ffc765!important;
  color:#fff!important;
  font-size:1.08em;
  padding-left:18px!important;
  padding-right:18px!important;
  box-shadow:0 0 0 1px rgba(255,210,105,.18),0 5px 15px rgba(222,111,15,.30)!important;
}
.st-game-wrap .st-tabs a.st-find-tab:hover,.st-game-wrap .st-tabs a.st-find-tab:focus{background:linear-gradient(180deg,#ffc15c,#ef8619)!important;color:#fff!important}
.st-game-wrap .st-team-box,.st-game-wrap .st-empty{
  background:linear-gradient(155deg,#181713,#090909)!important;
  border-color:#b88a29!important;
  color:#eee7d8!important;
  box-shadow:inset 0 0 0 1px rgba(255,223,128,.04),0 7px 20px rgba(0,0,0,.34)!important;
}
.st-game-wrap .st-team-box h2,.st-game-wrap .st-title{color:#ffd86a!important}
.st-game-wrap .st-team-head p{color:#c7bead!important}
.st-game-wrap .st-team-total{color:#c8bfaf!important}
.st-game-wrap .st-team-total strong{color:#f1ad35!important}
.st-game-wrap .st-line-label{color:#dc9b45!important}.st-game-wrap .st-line-back{color:#d5b56e!important}
.st-game-wrap .st-slot{
  background:#0d0d0b!important;
  border-color:#7b632c!important;
  color:#e9dfcd!important;
}
.st-game-wrap .st-slot.filled{
  background:linear-gradient(160deg,#1a1915,#080808)!important;
  border-color:#c99a35!important;
  box-shadow:inset 0 0 0 1px rgba(255,225,134,.05),0 4px 13px rgba(0,0,0,.42)!important;
}
.st-game-wrap .st-slot:hover,.st-game-wrap .st-slot.active{border-color:#f1b33e!important;box-shadow:0 0 0 3px rgba(241,179,62,.11),0 5px 15px rgba(0,0,0,.35)!important}
.st-game-wrap .st-slot-content strong{color:#fff0c8!important}.st-game-wrap .st-slot-content small{color:#b9b0a2!important}.st-game-wrap .st-slot-meta span{background:#26231b!important;color:#e6dcc9!important}.st-game-wrap .st-slot-power{color:#f0b94b!important}
.st-game-wrap .st-slot-remove{background:#2b1a12!important;color:#ff9a65!important}
.st-game-wrap .st-team-tip{background:#111d1b!important;color:#a9d6cd!important;border:1px solid #29473f}
.st-game-wrap .st-card{
  background:linear-gradient(160deg,#1a1915,#080808)!important;
  border-color:#c99a35!important;
  color:#eee6d7!important;
  box-shadow:inset 0 0 0 1px rgba(255,225,134,.04),0 5px 16px rgba(0,0,0,.40)!important;
}
.st-game-wrap .st-pick-card:hover{border-color:#efb248!important;box-shadow:0 7px 21px rgba(0,0,0,.48),0 0 0 2px rgba(239,178,72,.10)!important}
.st-game-wrap .st-card h3{color:#fff0c8!important}
.st-game-wrap .st-meta b,.st-game-wrap .st-meta span,.st-game-wrap .st-meta strong{background:#26231b!important;color:#e6dcc9!important}
.st-game-wrap .st-exp{background:#2c2b28!important}.st-game-wrap .st-exp-label{color:#aaa291!important}
.st-game-wrap .st-power{color:#f0b94b!important}.st-game-wrap .st-points{color:#bdb4a4!important}
.st-game-wrap .st-stats{background:#12110e!important;border-color:#6f5725!important;color:#ddd3c1!important}
.st-game-wrap .st-pick-btn,.st-game-wrap .st-upgrade-btn{background:#181713!important;border-color:#8a6929!important;color:#f0c86f!important}
@media(max-width:700px){
  .hvn-sieu-thu-nav-item>a>span{font-size:18px}
  .st-game-wrap{border-radius:12px;padding-top:7px}
  .st-game-wrap .st-tabs a.st-find-tab{font-size:1.04em;padding-left:14px!important;padding-right:14px!important}
}

/* 0.7.23A — RPG card-combat VFX pass.
   Visual-only layer: keeps battle engine, audio mapping, rewards and skill logic unchanged. */
.st-battle-wrap{
  --st-rpg-violet:#9d4cff;
  --st-rpg-violet-bright:#d36cff;
  --st-rpg-violet-deep:#5312a8;
  --st-rpg-violet-soft:#b98aff;
}
/* HP in battle: purple as approved mockup, with a darker track for readability. */
.st-battle-wrap .st-hpbar{
  background:#1b0b2b!important;
  border-color:rgba(146,74,214,.48)!important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.72),0 0 0 1px rgba(196,123,255,.06)!important;
}
.st-battle-wrap .st-hpbar i{
  background:linear-gradient(90deg,#5b18a8 0%,#8730db 42%,#ba50ff 72%,#dc7cff 100%)!important;
  box-shadow:0 0 7px rgba(165,69,255,.58)!important;
}
/* Clear purple floating damage; crit is brighter and larger. */
.st-battle-wrap .st-float.damage{
  color:#b85cff!important;
  -webkit-text-stroke:.65px #351052!important;
  text-shadow:0 1px 0 #f2ddff,1px 0 0 #f2ddff,-1px 0 0 #f2ddff,0 -1px 0 #f2ddff,0 4px 10px rgba(61,13,90,.65)!important;
}
.st-battle-wrap .st-float.crit-dmg,
.st-battle-wrap .st-float.counter-dmg{
  color:#d86cff!important;
  -webkit-text-stroke:.8px #431061!important;
  text-shadow:0 1px 0 #f8e5ff,1px 0 0 #f8e5ff,-1px 0 0 #f8e5ff,0 -1px 0 #f8e5ff,0 0 10px rgba(214,80,255,.72),0 5px 13px rgba(55,8,87,.72)!important;
}
.st-battle-wrap .st-crit-burst{
  color:#cf5cff!important;
  -webkit-text-stroke:.75px #471060!important;
  text-shadow:0 1px 0 #f8ddff,1px 0 0 #f8ddff,-1px 0 0 #f8ddff,0 -1px 0 #f8ddff,0 0 12px rgba(211,78,255,.88),0 5px 14px rgba(61,8,91,.72)!important;
}
.st-battle-wrap .st-crit-burst:before{border-color:rgba(203,88,255,.86)!important;box-shadow:0 0 0 8px rgba(160,45,255,.13),0 0 30px rgba(191,64,255,.68)!important}
.st-battle-wrap .st-crit-burst:after{background:#fae8ff!important;box-shadow:0 0 12px 7px #d85cff,0 0 30px 16px rgba(120,29,231,.72)!important}
/* Card lunge: retain gold identity, add a contained violet skill aura around the moving card. */
.st-battle-wrap .st-action-clone{
  perspective:700px;
  filter:drop-shadow(0 15px 22px rgba(0,0,0,.58)) drop-shadow(0 0 11px rgba(151,61,255,.28))!important;
}
.st-battle-wrap .st-action-clone.st-action-ready{
  border-color:#e3bd59!important;
  box-shadow:0 0 0 1px rgba(255,226,133,.8),0 0 16px 4px rgba(194,85,255,.52),0 0 34px 10px rgba(104,34,206,.25),0 16px 30px rgba(0,0,0,.58)!important;
}
.st-battle-wrap .st-action-clone.st-action-ready:before{
  content:"";position:absolute;z-index:-1;inset:-14px;border-radius:18px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(214,111,255,.24),rgba(109,34,206,.11) 43%,transparent 72%);
  border:1px solid rgba(202,106,255,.28);animation:stRpgCasterAura .55s ease-out both;
}
.st-battle-wrap .st-action-clone.st-action-ready img{filter:brightness(1.14) saturate(1.16) drop-shadow(0 0 10px rgba(196,81,255,.48))!important}
.st-battle-wrap .st-action-clone.casting:after{
  background:radial-gradient(circle,#fff 0 12%,#f5d9ff 18%,#c95cff 37%,rgba(115,35,215,.48) 56%,transparent 72%)!important;
  box-shadow:0 0 16px 7px rgba(239,189,255,.82),0 0 34px 14px rgba(184,69,255,.58),0 0 52px 20px rgba(90,24,190,.28)!important;
}
@keyframes stRpgCasterAura{0%{opacity:0;transform:scale(.82)}35%{opacity:1;transform:scale(1.06)}100%{opacity:.45;transform:scale(1)}}
/* Replace the old spear/orb silhouette with a compact purple slash-wave emitted by the card. */








@keyframes stRpgSlashHead{from{filter:brightness(1);transform:translateY(-50%) skewX(-28deg) rotate(-3deg) scale(.92)}to{filter:brightness(1.55);transform:translateY(-50%) skewX(-28deg) rotate(-3deg) scale(1.08)}}
/* RPG impact: violet flash + shock ring; no blood/ink splash silhouette. */
.st-battle-wrap .st-ink-splash{
  width:66px!important;height:66px!important;border-radius:50%!important;
  background:radial-gradient(circle,#fff 0 7%,#efd7ff 8% 16%,#d263ff 18% 31%,rgba(125,35,221,.66) 34% 49%,rgba(69,17,139,.18) 53% 67%,transparent 70%)!important;
  filter:none!important;box-shadow:0 0 13px 5px rgba(222,129,255,.86),0 0 30px 13px rgba(133,42,231,.58)!important;
  animation:stRpgImpactBurst .78s cubic-bezier(.12,.72,.18,1) forwards!important;
}
.st-battle-wrap .st-ink-splash:before{
  content:""!important;position:absolute!important;left:50%!important;top:50%!important;width:26px!important;height:26px!important;
  border:3px solid rgba(223,129,255,.92)!important;border-radius:50%!important;background:transparent!important;
  transform:translate(-50%,-50%)!important;animation:stRpgShockRing .68s ease-out forwards!important;
}
.st-battle-wrap .st-ink-splash:after{
  content:""!important;position:absolute!important;left:50%!important;top:50%!important;width:8px!important;height:74px!important;
  border-radius:999px!important;background:linear-gradient(180deg,transparent,#f0c6ff 28%,#fff 50%,#cb63ff 71%,transparent)!important;
  transform:translate(-50%,-50%) rotate(46deg)!important;box-shadow:0 0 10px #d165ff!important;animation:stRpgImpactSlash .55s ease-out forwards!important;
}
.st-battle-wrap .st-ink-splash b{background:#d66bff!important;box-shadow:0 0 6px 2px rgba(187,73,255,.72)!important}
.st-battle-wrap .st-ink-splash-crit{width:88px!important;height:88px!important;box-shadow:0 0 16px 7px #e097ff,0 0 38px 17px rgba(144,43,245,.72)!important}
.st-battle-wrap .st-ink-splash-counter{width:78px!important;height:78px!important}
@keyframes stRpgImpactBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.18)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}48%{opacity:.9;transform:translate(-50%,-50%) scale(1.22)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.55)}}
@keyframes stRpgShockRing{0%{opacity:1;transform:translate(-50%,-50%) scale(.25)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.05)}}
@keyframes stRpgImpactSlash{0%{opacity:0;transform:translate(-50%,-50%) rotate(46deg) scaleY(.25)}20%{opacity:1;transform:translate(-50%,-50%) rotate(46deg) scaleY(1.05)}100%{opacity:0;transform:translate(-50%,-50%) rotate(46deg) scaleY(1.35)}}
/* Target reaction stays readable and compact. */
.st-battle-wrap .st-battle-slot.hit{animation:stRpgHit .44s ease-out!important}
.st-battle-wrap .st-battle-slot.crit-hit,.st-battle-wrap .st-battle-slot.crit-shake{animation:stRpgCritHit .62s ease-out!important}
.st-battle-wrap .st-battle-slot.counter-hit{animation:stRpgCounterHit .58s ease-out!important}
@keyframes stRpgHit{0%,100%{transform:translateX(0);filter:brightness(1)}18%{transform:translateX(-5px);filter:brightness(1.6) saturate(1.25)}42%{transform:translateX(4px)}68%{transform:translateX(-2px)}}
@keyframes stRpgCritHit{0%,100%{transform:translateX(0) scale(1);filter:brightness(1)}12%{transform:translateX(-8px) scale(1.035);filter:brightness(1.9) saturate(1.42)}28%{transform:translateX(8px) scale(1.015)}44%{transform:translateX(-5px)}64%{transform:translateX(3px)}82%{transform:translateX(-1px)}}
@keyframes stRpgCounterHit{0%,100%{transform:translateX(0)}18%{transform:translateX(-7px) rotate(-1deg);filter:brightness(1.65)}42%{transform:translateX(6px) rotate(1deg)}70%{transform:translateX(-2px)}}
/* Purple arena flash for crit/counter, intentionally brief. */
.st-battle-wrap .st-arena-flash-crit,.st-battle-wrap .st-arena-flash-counter{background:radial-gradient(circle at center,rgba(221,128,255,.34),rgba(105,25,216,.16) 42%,transparent 72%)!important}
@media(max-width:700px){
  
  
  
  
  .st-battle-wrap .st-ink-splash{width:52px!important;height:52px!important}.st-battle-wrap .st-ink-splash-crit{width:66px!important;height:66px!important}
}

/* 0.7.23B - Natural RPG impact rework: no circular shock-ring / no "stick + circle" look. */
.st-battle-wrap .st-ink-splash,
.st-battle-wrap .st-ink-splash-attack,
.st-battle-wrap .st-ink-splash-crit,
.st-battle-wrap .st-ink-splash-counter{
  width:92px!important;
  height:72px!important;
  margin:-36px 0 0 -46px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  overflow:visible!important;
  animation:stRpgImpactContainer .72s cubic-bezier(.14,.76,.18,1) forwards!important;
}
/* Two crossing energy slashes instead of a round burst. */
.st-battle-wrap .st-ink-splash:before,
.st-battle-wrap .st-ink-splash:after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:104px!important;
  height:9px!important;
  border:0!important;
  border-radius:85% 18% 85% 18%!important;
  transform-origin:50% 50%!important;
  background:linear-gradient(90deg,transparent 0%,rgba(151,54,236,.10) 7%,#8c34df 23%,#d877ff 49%,#fff 62%,#c65dff 74%,rgba(92,24,181,.16) 92%,transparent 100%)!important;
  box-shadow:0 0 5px 2px rgba(255,255,255,.92),0 0 14px 5px rgba(204,90,255,.76),0 0 27px 8px rgba(100,30,210,.38)!important;
}
.st-battle-wrap .st-ink-splash:before{
  transform:translate(-50%,-50%) rotate(-31deg) scaleX(.18)!important;
  animation:stRpgCrossSlashA .55s cubic-bezier(.12,.78,.18,1) forwards!important;
}
.st-battle-wrap .st-ink-splash:after{
  width:84px!important;
  height:6px!important;
  opacity:.92;
  transform:translate(-50%,-50%) rotate(35deg) scaleX(.12)!important;
  animation:stRpgCrossSlashB .61s .035s cubic-bezier(.12,.78,.18,1) forwards!important;
}
/* Six existing <b> nodes become flying energy shards/sparks. */
.st-battle-wrap .st-ink-splash b{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:4px!important;
  height:24px!important;
  margin:-12px 0 0 -2px!important;
  border-radius:80% 15% 80% 15%!important;
  background:linear-gradient(180deg,#fff 0%,#eab7ff 34%,#b94cff 72%,transparent 100%)!important;
  box-shadow:0 0 5px 1px #fff,0 0 10px 3px rgba(190,73,255,.66)!important;
  transform-origin:50% 100%!important;
  opacity:0;
  animation:stRpgShard .64s ease-out forwards!important;
}
.st-battle-wrap .st-ink-splash b:nth-child(1){--r:-76deg;--tx:-42px;--ty:-32px;animation-delay:.01s!important}
.st-battle-wrap .st-ink-splash b:nth-child(2){--r:-37deg;--tx:-18px;--ty:-43px;animation-delay:.035s!important}
.st-battle-wrap .st-ink-splash b:nth-child(3){--r:12deg;--tx:30px;--ty:-38px;animation-delay:.02s!important}
.st-battle-wrap .st-ink-splash b:nth-child(4){--r:58deg;--tx:44px;--ty:8px;animation-delay:.045s!important}
.st-battle-wrap .st-ink-splash b:nth-child(5){--r:111deg;--tx:12px;--ty:39px;animation-delay:.025s!important}
.st-battle-wrap .st-ink-splash b:nth-child(6){--r:151deg;--tx:-38px;--ty:24px;animation-delay:.055s!important}
/* Critical/counter gets a wider, brighter slash fan, still with no ring. */
.st-battle-wrap .st-ink-splash-crit{
  width:126px!important;height:94px!important;margin:-47px 0 0 -63px!important;
  filter:drop-shadow(0 0 9px rgba(216,106,255,.75))!important;
}
.st-battle-wrap .st-ink-splash-crit:before{width:140px!important;height:12px!important;box-shadow:0 0 7px 3px #fff,0 0 19px 7px #d063ff,0 0 38px 13px rgba(104,25,220,.54)!important}
.st-battle-wrap .st-ink-splash-crit:after{width:112px!important;height:8px!important;box-shadow:0 0 6px 2px #fff,0 0 16px 6px #c252ff,0 0 31px 10px rgba(91,20,201,.46)!important}
.st-battle-wrap .st-ink-splash-counter{width:112px!important;height:84px!important;margin:-42px 0 0 -56px!important}
/* A tiny center flash gives impact weight without becoming a visible circle. */
.st-battle-wrap .st-ink-splash-crit > b:nth-child(1),
.st-battle-wrap .st-ink-splash-counter > b:nth-child(1){filter:brightness(1.35)}
@keyframes stRpgImpactContainer{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.74) rotate(-1deg)}
  13%{opacity:1;transform:translate(-50%,-50%) scale(1.04) rotate(.4deg)}
  54%{opacity:1;transform:translate(-50%,-50%) scale(1.01)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.12)}
}
@keyframes stRpgCrossSlashA{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-31deg) scaleX(.08) scaleY(.65)}
  18%{opacity:1;transform:translate(-50%,-50%) rotate(-31deg) scaleX(1.08) scaleY(1.28)}
  46%{opacity:1;transform:translate(-50%,-50%) rotate(-31deg) scaleX(.96) scaleY(.92)}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(-31deg) translateX(13px) scaleX(1.18) scaleY(.22)}
}
@keyframes stRpgCrossSlashB{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(35deg) scaleX(.06) scaleY(.55)}
  22%{opacity:.95;transform:translate(-50%,-50%) rotate(35deg) scaleX(1.04) scaleY(1.18)}
  55%{opacity:.78;transform:translate(-50%,-50%) rotate(35deg) scaleX(.94) scaleY(.78)}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(35deg) translateX(-10px) scaleX(1.12) scaleY(.18)}
}
@keyframes stRpgShard{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r)) translateY(0) scaleY(.2)}
  16%{opacity:1;transform:translate(-50%,-50%) rotate(var(--r)) translateY(-6px) scaleY(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) rotate(var(--r)) scaleY(.48) scaleX(.55)}
}
/* Make attack ray feel like a fast energy slash rather than a rigid stick. */



@media(max-width:700px){
  .st-battle-wrap .st-ink-splash{width:70px!important;height:56px!important;margin:-28px 0 0 -35px!important}
  .st-battle-wrap .st-ink-splash:before{width:78px!important;height:7px!important}
  .st-battle-wrap .st-ink-splash:after{width:64px!important;height:5px!important}
  .st-battle-wrap .st-ink-splash-crit{width:94px!important;height:72px!important;margin:-36px 0 0 -47px!important}
  .st-battle-wrap .st-ink-splash-crit:before{width:101px!important;height:9px!important}
  .st-battle-wrap .st-ink-splash-crit:after{width:82px!important;height:6px!important}
  .st-battle-wrap .st-ink-splash b{height:18px!important;width:3px!important}
}


/* 0.7.23C — Dark Gold Upgrade screen.
   Visual-only: scopes all changes to .st-upgrade-wrap; upgrade logic is untouched. */
.st-upgrade-wrap{
  color:#f1e8d8;
  padding-top:14px;
  padding-bottom:20px;
  background:radial-gradient(circle at 50% 0,rgba(151,101,21,.13),transparent 34%),linear-gradient(180deg,#11100d 0%,#070707 100%);
  border:1px solid #5d4518;
  border-radius:20px;
  box-shadow:inset 0 0 52px rgba(0,0,0,.72),0 12px 34px rgba(0,0,0,.18);
}
.st-upgrade-wrap .st-hero{
  background:linear-gradient(145deg,#1b1914,#0b0b0a)!important;
  border-color:#c9982e!important;
  box-shadow:inset 0 0 0 1px rgba(255,221,119,.05),0 8px 24px rgba(0,0,0,.34)!important;
}
.st-upgrade-wrap .st-hero h1{color:#ffd86a!important}
.st-upgrade-wrap .st-hero p{color:#c9c3b5!important}
.st-upgrade-wrap .st-badge{background:#11100d!important;border-color:#c9982e!important;color:#ffd86a!important}
.st-upgrade-wrap .st-tabs a{background:#171612!important;border-color:#65501f!important;color:#e7dfca!important}
.st-upgrade-wrap .st-tabs a.active{background:#1c1a14!important;border-color:#8c6c28!important;color:#f1e8d5!important;box-shadow:none!important}
/* Find Match is deliberately gold on Upgrade as requested. */
.st-upgrade-wrap .st-tabs a.st-find-tab{
  background:linear-gradient(180deg,#ffe07a,#dca62a)!important;
  border-color:#ffd86a!important;
  color:#3b2600!important;
  font-weight:900!important;
  box-shadow:0 0 0 1px rgba(255,224,122,.16),0 5px 15px rgba(188,126,16,.28)!important;
}
.st-upgrade-wrap .st-tabs a.st-find-tab:hover,.st-upgrade-wrap .st-tabs a.st-find-tab:focus{
  background:linear-gradient(180deg,#ffeb99,#e9b637)!important;
  color:#2d1d00!important;
}
.st-upgrade-wrap .st-exp-feed-panel,.st-upgrade-wrap .st-star-upgrade{
  background:linear-gradient(155deg,#181713,#090909)!important;
  border-color:#9b762c!important;
  color:#eee5d4!important;
  box-shadow:inset 0 0 0 1px rgba(255,223,128,.04),0 6px 18px rgba(0,0,0,.30)!important;
}
.st-upgrade-wrap .st-exp-feed-panel h2,.st-upgrade-wrap .st-star-upgrade>b{color:#ffd86a!important}
.st-upgrade-wrap .st-exp-feed-panel p,.st-upgrade-wrap .st-star-material-line{color:#c9c0af!important}
.st-upgrade-wrap .st-exp-feed-form label{color:#e8deca!important}
.st-upgrade-wrap .st-exp-feed-form select,.st-upgrade-wrap .st-exp-feed-form input,
.st-upgrade-wrap .st-stepper input{
  background:#10100e!important;
  border-color:#6f5725!important;
  color:#f2e8d6!important;
}
.st-upgrade-wrap .st-exp-feed-form option{background:#11110f;color:#f2e8d6}
.st-upgrade-wrap .st-card{
  background:linear-gradient(160deg,#1a1915,#080808)!important;
  border-color:#c99a35!important;
  color:#eee6d7!important;
  box-shadow:inset 0 0 0 1px rgba(255,225,134,.04),0 5px 16px rgba(0,0,0,.40)!important;
}
.st-upgrade-wrap .st-upgrade-card.st-focus-build{
  border-color:#efb248!important;
  box-shadow:0 0 0 2px rgba(239,178,72,.13),0 9px 24px rgba(0,0,0,.48)!important;
}
.st-upgrade-wrap .st-card h3{color:#fff0c8!important}
.st-upgrade-wrap .st-meta b,.st-upgrade-wrap .st-meta span,.st-upgrade-wrap .st-meta strong{background:#26231b!important;color:#e6dcc9!important}
.st-upgrade-wrap .st-exp-line{color:#bdb3a2!important}
.st-upgrade-wrap .st-power{color:#f0b94b!important}
.st-upgrade-wrap .st-stats{background:#12110e!important;border-color:#6f5725!important;color:#ddd3c1!important}
.st-upgrade-wrap .st-points,.st-upgrade-wrap .st-points-big{color:#d8cdb9!important}
.st-upgrade-wrap .st-build-panel{border-top-color:#6f5725!important}
.st-upgrade-wrap .st-build-row{border-bottom-color:#3c3528!important}
.st-upgrade-wrap .st-build-row b{color:#f3e7d0!important}
.st-upgrade-wrap .st-build-row small{color:#aaa08f!important}
.st-upgrade-wrap .st-stepper button{background:#272117!important;color:#ffd86a!important;border:1px solid #6f5725!important}
.st-upgrade-wrap .st-build-summary{color:#e8deca!important}
.st-upgrade-wrap .st-alloc-current{color:#aaa08f!important}
.st-upgrade-wrap .st-reset-form button{background:#211313!important;border-color:#7b3939!important;color:#ffaaaa!important}
.st-upgrade-wrap .st-build-note,.st-upgrade-wrap .st-empty{
  background:#11100d!important;
  border-color:#7b632c!important;
  color:#d7cdb9!important;
}
.st-upgrade-wrap .st-upgrade-success{background:#102018!important;border-color:#396d4d!important;color:#bfe8c9!important}
.st-upgrade-wrap .st-star-max{color:#ffd86a!important}
.st-upgrade-wrap .st-star-btn{background:linear-gradient(180deg,#ffe07a,#d49b1d)!important;border-color:#f4c44f!important;color:#3b2600!important}
.st-upgrade-wrap .st-btn:not(.st-star-btn){background:linear-gradient(180deg,#f3a43a,#c65f12)!important;border-color:#ffc35b!important;color:#fff!important}
@media(max-width:700px){
  .st-upgrade-wrap{border-radius:12px;padding-top:7px}
  .st-upgrade-wrap .st-tabs a.st-find-tab{font-size:1.03em;padding-left:13px!important;padding-right:13px!important}
}

/* 0.7.23D — RPG slash projectile + cute flower-heal pass.
   Visual-only. No battle math/audio/reward logic changed. */

/* Attack projectile: compact crescent/slash-wave, never a rigid stick/spear. */






/* Broken particle trail instead of a solid beam. */




@keyframes stRpgSlashFlutter{from{transform:skewY(-3deg) scaleY(.92)}to{transform:skewY(3deg) scaleY(1.06)}}
@keyframes stRpgTrailTwinkle{from{opacity:.62;transform:translateY(-50%) translateX(-2px)}to{opacity:1;transform:translateY(-50%) translateX(2px)}}

/* Healing projectile: a small magical seed/petal cluster, not an attack ray. */





@keyframes stHealSeedPulse{from{transform:scale(.86) rotate(-4deg)}to{transform:scale(1.09) rotate(4deg)}}
@keyframes stHealPetalTrail{from{transform:translateY(-50%) translateX(-3px) rotate(-3deg)}to{transform:translateY(-50%) translateX(3px) rotate(3deg)}}

/* Cute flower bloom on the teammate receiving healing. */
.st-battle-wrap .st-impact-heal.st-flower-heal,
.st-battle-wrap .st-burst-heal.st-flower-heal{
  width:84px!important;height:84px!important;margin:-42px!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  overflow:visible!important;animation:stFlowerAura .98s ease-out forwards!important;
}
.st-battle-wrap .st-flower-heal:before{
  content:""!important;position:absolute!important;left:50%!important;top:50%!important;width:18px!important;height:18px!important;
  transform:translate(-50%,-50%)!important;border-radius:50%!important;
  background:radial-gradient(circle,#fff 0 22%,#ffe999 24% 52%,#ffc95d 56% 72%,transparent 76%)!important;
  box-shadow:0 0 10px #fff4bd,0 0 22px rgba(255,218,109,.66)!important;
  animation:stFlowerCenter .9s ease-out forwards!important;
}
.st-battle-wrap .st-flower-heal:after{display:none!important}
.st-battle-wrap .st-flower-heal b{
  position:absolute!important;left:50%!important;top:50%!important;width:19px!important;height:32px!important;margin:-29px 0 0 -9.5px!important;
  border-radius:68% 68% 58% 58%!important;
  transform-origin:50% 29px!important;
  background:linear-gradient(180deg,#fff 0%,#ffe0ef 34%,#ffb8da 74%,rgba(255,156,202,.18) 100%)!important;
  box-shadow:0 0 5px rgba(255,255,255,.9),0 0 11px rgba(255,170,213,.58)!important;
  opacity:0;animation:stPetalBloom .88s cubic-bezier(.12,.8,.2,1) forwards!important;
}
.st-battle-wrap .st-flower-heal b:nth-child(1){--r:0deg;animation-delay:0s!important}
.st-battle-wrap .st-flower-heal b:nth-child(2){--r:60deg;animation-delay:.025s!important}
.st-battle-wrap .st-flower-heal b:nth-child(3){--r:120deg;animation-delay:.05s!important}
.st-battle-wrap .st-flower-heal b:nth-child(4){--r:180deg;animation-delay:.075s!important}
.st-battle-wrap .st-flower-heal b:nth-child(5){--r:240deg;animation-delay:.10s!important}
.st-battle-wrap .st-flower-heal b:nth-child(6){--r:300deg;animation-delay:.125s!important}
.st-battle-wrap .st-flower-heal span{
  position:absolute!important;left:50%!important;top:57%!important;width:64px!important;height:22px!important;transform:translate(-50%,-50%)!important;
  background:
    radial-gradient(circle at 8% 70%,#fff 0 2px,transparent 3px),
    radial-gradient(circle at 28% 20%,#d9ffec 0 2px,transparent 3px),
    radial-gradient(circle at 52% 82%,#fff0bb 0 2.5px,transparent 3.5px),
    radial-gradient(circle at 78% 18%,#ffd1e8 0 2px,transparent 3px),
    radial-gradient(circle at 94% 64%,#fff 0 1.8px,transparent 2.8px)!important;
  opacity:0;animation:stFlowerSparkle .95s .08s ease-out forwards!important;
}
@keyframes stFlowerAura{0%{opacity:0;transform:scale(.55) translateY(5px)}18%{opacity:1;transform:scale(1) translateY(0)}72%{opacity:1;transform:scale(1) translateY(-2px)}100%{opacity:0;transform:scale(1.14) translateY(-9px)}}
@keyframes stFlowerCenter{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}28%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-58%) scale(.92)}}
@keyframes stPetalBloom{0%{opacity:0;transform:rotate(var(--r)) scale(.15) translateY(4px)}26%{opacity:1;transform:rotate(var(--r)) scale(1.04) translateY(-3px)}72%{opacity:1;transform:rotate(var(--r)) scale(.98) translateY(-5px)}100%{opacity:0;transform:rotate(var(--r)) scale(.72) translateY(-15px)}}
@keyframes stFlowerSparkle{0%{opacity:0;transform:translate(-50%,-20%) scale(.5)}28%{opacity:1}100%{opacity:0;transform:translate(-50%,-130%) scale(1.16)}}

@media(max-width:700px){
  
  
  
  
  
  
  .st-battle-wrap .st-impact-heal.st-flower-heal,.st-battle-wrap .st-burst-heal.st-flower-heal{width:68px!important;height:68px!important;margin:-34px!important}
}


/* 0.7.23E — requested navigation/card readability patch only.
   Active page/tab = blue-violet; small icons before tab labels;
   Class + LV badges = warm gold/orange on pet cards. */
.st-game-wrap .st-tabs a.active,
.st-match-wrap .st-tabs a.active,
.st-upgrade-wrap .st-tabs a.active{
  background:linear-gradient(135deg,#3057d5 0%,#6438c8 58%,#7d3cd2 100%)!important;
  border-color:#8c79ff!important;
  color:#fff!important;
  box-shadow:0 0 0 1px rgba(157,137,255,.28),0 6px 16px rgba(64,45,176,.30)!important;
}
.st-tabs a .icon{
  display:inline-block;
  margin-right:5px;
  font-size:.92em;
  line-height:1;
  vertical-align:-1px;
  color:currentColor;
  opacity:.96;
}
/* Preserve the requested orange/gold Find Match CTA only while it is NOT the current page. */
.st-game-wrap .st-tabs a.st-find-tab:not(.active){
  background:linear-gradient(180deg,#ffb443,#e57813)!important;
  border-color:#ffc765!important;
  color:#fff!important;
}
.st-upgrade-wrap .st-tabs a.st-find-tab:not(.active){
  background:linear-gradient(180deg,#ffe07a,#dca62a)!important;
  border-color:#ffd86a!important;
  color:#3b2600!important;
}
/* Warm, readable Class/LV chips across the pet cards without touching role badges. */
.st-game-wrap .st-card .st-level,
.st-game-wrap .st-slot .st-level,
.st-match-wrap .st-mini-slot .st-level,
.st-battle-wrap .st-battle-slot .st-level,
.st-upgrade-wrap .st-level{
  color:#ffb13b!important;
  background:linear-gradient(180deg,#2a2113,#18130c)!important;
  border:1px solid #a66e1e!important;
  font-weight:900!important;
  text-shadow:0 1px 0 rgba(0,0,0,.45);
}
@media(max-width:700px){
  .st-tabs a .icon{margin-right:4px;font-size:.88em}
}

/* 0.7.23F — Upgrade card density only.
   Desktop: 4 cards/row. Tablet: 3. Phone: 2; an opened build card spans full width. */
.st-upgrade-wrap .st-upgrade-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
}
.st-upgrade-wrap .st-upgrade-card{
  min-width:0;
  padding:10px!important;
}
.st-upgrade-wrap .st-upgrade-card>img{
  width:100%!important;
  max-width:150px!important;
  max-height:150px!important;
  aspect-ratio:1/1!important;
  object-fit:contain!important;
  margin:0 auto!important;
}
.st-upgrade-wrap .st-upgrade-card h3{
  font-size:14px!important;
  line-height:1.18!important;
  margin:5px 0!important;
}
.st-upgrade-wrap .st-upgrade-card .st-meta{
  gap:4px!important;
  font-size:10px!important;
}
.st-upgrade-wrap .st-upgrade-card .st-meta b,
.st-upgrade-wrap .st-upgrade-card .st-meta span,
.st-upgrade-wrap .st-upgrade-card .st-meta strong{
  padding:2px 5px!important;
}
.st-upgrade-wrap .st-upgrade-card .st-stars{
  gap:2px!important;
  font-size:17px!important;
  margin:5px 0!important;
}
.st-upgrade-wrap .st-upgrade-card .st-stars small{
  display:block;
  flex-basis:100%;
  margin:3px 0 0!important;
  font-size:9px!important;
}
.st-upgrade-wrap .st-upgrade-card .st-exp-line,
.st-upgrade-wrap .st-upgrade-card .st-power,
.st-upgrade-wrap .st-upgrade-card .st-points-big{
  font-size:11px!important;
  margin:6px 0!important;
}
.st-upgrade-wrap .st-upgrade-card .st-stats{
  gap:3px!important;
  padding:6px!important;
  font-size:10px!important;
}
.st-upgrade-wrap .st-upgrade-card .st-open-build{
  min-height:34px;
  padding:6px 8px!important;
  font-size:11px!important;
}

@media(max-width:980px){
  .st-upgrade-wrap .st-upgrade-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:700px){
  .st-upgrade-wrap .st-upgrade-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .st-upgrade-wrap .st-upgrade-card{padding:7px!important;border-radius:11px!important}
  .st-upgrade-wrap .st-upgrade-card>img{max-width:112px!important;max-height:112px!important}
  .st-upgrade-wrap .st-upgrade-card h3{font-size:12px!important;margin:3px 0!important}
  .st-upgrade-wrap .st-upgrade-card .st-meta{font-size:9px!important;gap:3px!important}
  .st-upgrade-wrap .st-upgrade-card .st-stars{font-size:15px!important;margin:4px 0!important}
  .st-upgrade-wrap .st-upgrade-card .st-stars small{font-size:8px!important}
  .st-upgrade-wrap .st-upgrade-card .st-exp-line,
  .st-upgrade-wrap .st-upgrade-card .st-power,
  .st-upgrade-wrap .st-upgrade-card .st-points-big{font-size:9px!important;margin:4px 0!important}
  .st-upgrade-wrap .st-upgrade-card .st-stats{font-size:9px!important;padding:5px!important}
  .st-upgrade-wrap .st-upgrade-card .st-open-build{font-size:10px!important;min-height:32px!important;padding:5px!important}
  /* Build controls need room on a phone: only the card being edited expands to both columns. */
  .st-upgrade-wrap .st-upgrade-card:has(.st-build-panel:not([hidden])){grid-column:1/-1}
  .st-upgrade-wrap .st-upgrade-card:has(.st-build-panel:not([hidden]))>img{max-width:150px!important;max-height:150px!important}
  .st-upgrade-wrap .st-upgrade-card:has(.st-build-panel:not([hidden])) h3{font-size:14px!important}
  .st-upgrade-wrap .st-upgrade-card:has(.st-build-panel:not([hidden])) .st-stats{font-size:10px!important}
}
@media(max-width:360px){
  .st-upgrade-wrap .st-upgrade-grid{gap:6px!important}
  .st-upgrade-wrap .st-upgrade-card{padding:6px!important}
  .st-upgrade-wrap .st-upgrade-card>img{max-width:96px!important;max-height:96px!important}
  .st-upgrade-wrap .st-upgrade-card .st-meta b,
  .st-upgrade-wrap .st-upgrade-card .st-meta span,
  .st-upgrade-wrap .st-upgrade-card .st-meta strong{padding:2px 3px!important}
}


/* 0.7.23G — unified RPG projectile silhouette, role-coloured.
   FTR/Đấu sĩ = red; ATK/Công = orange; DEF/Thủ = brown;
   SUP/Hỗ trợ + HP/Máu = purple. Visual-only: battle math/audio untouched. */





/* Any hostile/control projectile now uses the same curved slash-wave body.
   This removes the last rigid spear/tree-like silhouettes from stun/sleep/debuff skills. */






/* Crit/counter keep the same silhouette, just more forceful. */


@keyframes stRoleSlashFlutter{from{transform:skewY(-4deg) scaleY(.9) translateX(-1px)}to{transform:skewY(3deg) scaleY(1.06) translateX(1px)}}
@keyframes stRoleTrailTwinkle{from{opacity:.56;transform:translateY(-50%) translateX(-3px)}to{opacity:1;transform:translateY(-50%) translateX(2px)}}

@media(max-width:700px){
  
  
  
  
  
}


/* 0.7.23H — show own team combat power beside “Đội của tôi” on match-found screen. */
.st-match-my-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 10px}.st-match-my-head h2{margin:0}.st-my-team-power{display:inline-flex;align-items:center;min-height:32px;padding:6px 11px;border:1px solid rgba(226,184,74,.65);border-radius:999px;background:rgba(13,13,16,.92);color:#f0c85a;font-weight:800;letter-spacing:.01em;box-shadow:inset 0 0 0 1px rgba(255,228,137,.05)}
@media(max-width:700px){.st-match-my-head{gap:7px}.st-my-team-power{min-height:28px;padding:4px 8px;font-size:12px}}

/* 0.7.23I — unified RPG hit impact + dark modal system.
   Visual-only patch: battle math, rewards, audio and skill logic are unchanged. */

/* Hostile ranged skills use the same compact role-coloured slash-wave silhouette.
   Remove any residual rigid beam/spear/tree shapes from legacy layers. */



/* Damage impact: one clean slash; crit/counter: two consecutive slashes. */
.st-card-slash-impact{position:absolute;z-index:190;left:50%;top:50%;width:92%;height:58%;transform:translate(-50%,-50%);pointer-events:none;overflow:visible}
.st-card-slash-line{position:absolute;left:4%;top:48%;width:92%;height:5px;border-radius:100% 15% 100% 15%;transform-origin:center;background:linear-gradient(90deg,transparent 0%,#8d35e6 12%,#e7c6ff 42%,#fff 50%,#c777ff 60%,#7021c8 86%,transparent 100%);box-shadow:0 0 4px rgba(255,255,255,.85),0 0 10px rgba(158,69,236,.72);opacity:0;filter:none}
.st-card-slash-line.one{transform:rotate(-8deg) scaleX(.2);animation:stCardSlashOne .34s cubic-bezier(.12,.72,.18,1) forwards}
.st-card-slash-line.two{top:52%;transform:rotate(7deg) scaleX(.2);animation:stCardSlashTwo .36s .09s cubic-bezier(.12,.72,.18,1) forwards}
.st-card-slash-crit .st-card-slash-line,.st-card-slash-counter .st-card-slash-line{height:7px;background:linear-gradient(90deg,transparent 0%,#6717c8 8%,#c15cff 30%,#fff 50%,#e3b4ff 64%,#7c24dc 90%,transparent 100%);box-shadow:0 0 5px #fff,0 0 14px rgba(165,68,245,.9)}
@keyframes stCardSlashOne{0%{opacity:0;transform:rotate(-8deg) scaleX(.12) translateX(-15%)}18%{opacity:1}64%{opacity:1;transform:rotate(-8deg) scaleX(1.06) translateX(1%)}100%{opacity:0;transform:rotate(-8deg) scaleX(.86) translateX(10%)}}
@keyframes stCardSlashTwo{0%{opacity:0;transform:rotate(7deg) scaleX(.12) translateX(-14%)}18%{opacity:1}64%{opacity:1;transform:rotate(7deg) scaleX(1.08) translateX(1%)}100%{opacity:0;transform:rotate(7deg) scaleX(.88) translateX(10%)}}
.st-battle-slot.st-rpg-hit{animation:stRpgHitShake .34s ease-out!important}
.st-battle-slot.st-rpg-crit-hit{animation:stRpgCritShake .52s cubic-bezier(.2,.75,.25,1)!important}
@keyframes stRpgHitShake{0%,100%{transform:translate3d(0,0,0)}24%{transform:translate3d(-3px,0,0) rotate(-.5deg)}48%{transform:translate3d(3px,0,0) rotate(.5deg)}72%{transform:translate3d(-1px,0,0)}}
@keyframes stRpgCritShake{0%,100%{transform:translate3d(0,0,0)}14%{transform:translate3d(-7px,-1px,0) rotate(-1deg)}28%{transform:translate3d(7px,1px,0) rotate(1deg)}44%{transform:translate3d(-6px,0,0) rotate(-.8deg)}60%{transform:translate3d(5px,0,0) rotate(.7deg)}78%{transform:translate3d(-2px,0,0)}}
/* Disable legacy circular/ink damage layers if any older event path still creates one. */
.st-battle-wrap .st-ink-splash,.st-battle-wrap .st-impact-attack,.st-battle-wrap .st-impact-crit,.st-battle-wrap .st-impact-counter{display:none!important}

/* HP is blood red; purple remains reserved for damage/Crit typography and support VFX. */
.st-battle-wrap .st-hpbar{background:#350607!important;border-color:rgba(180,34,34,.55)!important}
.st-battle-wrap .st-hpbar>i{background:linear-gradient(90deg,#b90e16 0%,#e51d27 52%,#ff4a3d 100%)!important;box-shadow:0 0 6px rgba(235,30,38,.55)!important}

/* All in-game action modals share the dark/gold visual language. */
.st-action-modal-backdrop{background:rgba(0,0,0,.76)!important;backdrop-filter:blur(4px)!important}
.st-action-modal-dialog{background:linear-gradient(180deg,#151412 0%,#090a0c 100%)!important;border:1px solid #c99b35!important;box-shadow:0 24px 75px rgba(0,0,0,.72),inset 0 0 0 1px rgba(255,221,126,.05)!important;color:#eee7d8!important}
.st-action-modal-x{color:#d8bd75!important}.st-action-modal-x:hover{color:#fff1bd!important}
.st-action-modal-dialog h3{color:#f0c85a!important;text-shadow:0 1px 8px rgba(211,162,50,.15)!important}
.st-action-modal-message{color:#eee7d8!important}.st-action-modal-message.is-emphasis{color:#d9a4ff!important;text-shadow:none!important}
.st-action-modal-detail{color:#bdb4a4!important}
.st-action-modal-icon{background:linear-gradient(180deg,#302710,#17130a)!important;border:1px solid #c99b35!important;color:#f0c85a!important;box-shadow:0 0 16px rgba(210,164,57,.16)!important}
.st-action-modal.is-success .st-action-modal-icon{background:linear-gradient(180deg,#173525,#0b1b12)!important;border-color:#3c9c68!important;color:#70d79a!important}
.st-action-modal.is-error .st-action-modal-icon{background:linear-gradient(180deg,#3b1717,#1d0b0b)!important;border-color:#b64a43!important;color:#ff8e86!important}
.st-action-modal.is-levelup .st-action-modal-icon{background:linear-gradient(180deg,#2b1840,#150b22)!important;border-color:#8d52cf!important;color:#d6a7ff!important}
.st-action-modal-actions{display:flex!important;justify-content:center!important;align-items:center!important;flex-wrap:wrap!important;gap:10px!important}
.st-action-modal-actions button{flex:0 1 auto!important;min-width:132px!important}
.st-action-modal-cancel{border:1px solid #5c5548!important;background:#17191d!important;color:#ddd3c0!important}
.st-action-modal-ok{border:1px solid #d5a53b!important;background:linear-gradient(180deg,#d59e27,#a9670c)!important;color:#fff8e7!important;box-shadow:0 7px 18px rgba(184,117,17,.24)!important}

/* Level-up modal is also part of the game modal family. */
.st-levelup-modal{background:rgba(0,0,0,.78)!important;backdrop-filter:blur(4px)!important}
.st-levelup-box{background:linear-gradient(180deg,#151412,#090a0c)!important;border:1px solid #c99b35!important;color:#eee7d8!important;box-shadow:0 24px 75px rgba(0,0,0,.72)!important}
.st-levelup-box h2{color:#fff0c2!important}.st-levelup-burst,.st-levelup-level{color:#f0b63e!important;text-shadow:0 0 10px rgba(224,164,43,.18)!important}.st-levelup-box p{color:#d8d0c0!important}
.st-levelup-actions{justify-content:center!important}.st-levelup-actions button{background:#17191d!important;color:#eee7d8!important;border:1px solid #5c5548!important}.st-levelup-actions a{background:linear-gradient(180deg,#d59e27,#a9670c)!important;color:#fff8e7!important;border:1px solid #d5a53b!important}

@media(max-width:700px){
  .st-card-slash-impact{width:96%;height:54%}.st-card-slash-line{height:4px}.st-card-slash-crit .st-card-slash-line,.st-card-slash-counter .st-card-slash-line{height:5px}
  .st-action-modal-actions button{min-width:120px!important;max-width:100%!important}.st-action-modal-dialog{width:min(440px,calc(100vw - 24px))!important}
}

/* 0.7.23J — final ranged projectile cleanup.
   Every hostile/ranged action uses a compact travelling crescent slash.
   This intentionally neutralizes ALL legacy rigid beam/spear/tree geometry. */









@keyframes stCleanCrescentPulse{from{transform:rotate(-12deg) skewX(-10deg) scale(.94);opacity:.86}to{transform:rotate(-8deg) skewX(-7deg) scale(1.05);opacity:1}}
@media(max-width:700px){
  
  
  
  
}

/* 0.7.23K — definitive RPG ranged wave + role palette.
   The hostile projectile DOM no longer contains the legacy trail/core/head beam pieces,
   so old spear/tree geometry cannot reappear through CSS cascade. */

/* Final role colours requested by user. */
















@keyframes stRpgWaveBlade{from{transform:rotate(-14deg) skewX(-13deg) scale(.94);opacity:.88}to{transform:rotate(-9deg) skewX(-8deg) scale(1.06);opacity:1}}

/* Support/heal/lifesteal travel shapes are explicitly non-beam. */





@media(max-width:700px){
  
  
  
  
  
  
}

/* 0.7.23L — direct card-slash combat + centered upgrade cards.
   Damage attacks no longer use a flying beam. The target card receives the hit directly. */
.st-battle-wrap .st-card-slash-impact{
  --st-slash-hi:#fff0f0;
  --st-slash-mid:#ff5252;
  --st-slash-main:#ee2020;
  --st-slash-deep:#9d0909;
  --st-slash-glow:rgba(255,45,45,.82);
}
/* 0.7.29 — đồng bộ màu VFX đòn chém theo đúng màu vai trò.
   Chỉ đổi bảng màu; hình dạng, timing, rung card và logic impact giữ nguyên. */
/* Đấu sĩ: nâu */
.st-battle-wrap .st-card-slash-role-FTR{
  --st-slash-hi:#ffe6cf;--st-slash-mid:#d99a68;--st-slash-main:#a86538;--st-slash-deep:#5f3218;--st-slash-glow:rgba(185,117,68,.84);
}
/* Công: cam */
.st-battle-wrap .st-card-slash-role-ATK{
  --st-slash-hi:#fff0d8;--st-slash-mid:#ffb14c;--st-slash-main:#ff8b22;--st-slash-deep:#b94d00;--st-slash-glow:rgba(255,145,38,.88);
}
/* Thủ/Đỡ đòn: xanh dương */
.st-battle-wrap .st-card-slash-role-DEF{
  --st-slash-hi:#e9f5ff;--st-slash-mid:#69b8ff;--st-slash-main:#2f8df2;--st-slash-deep:#14529c;--st-slash-glow:rgba(77,163,255,.88);
}
/* Hỗ trợ: xanh lục */
.st-battle-wrap .st-card-slash-role-SUP{
  --st-slash-hi:#eaffef;--st-slash-mid:#72e39a;--st-slash-main:#38c96f;--st-slash-deep:#197a3c;--st-slash-glow:rgba(56,201,111,.86);
}
/* Máu/HP: đỏ */
.st-battle-wrap .st-card-slash-role-HP{
  --st-slash-hi:#ffe9e9;--st-slash-mid:#ff7b7b;--st-slash-main:#f05a5a;--st-slash-deep:#9e2222;--st-slash-glow:rgba(240,90,90,.88);
}
.st-battle-wrap .st-card-slash-line{
  background:linear-gradient(90deg,
    transparent 0%,
    var(--st-slash-deep) 9%,
    var(--st-slash-main) 23%,
    var(--st-slash-mid) 39%,
    #fff 50%,
    var(--st-slash-hi) 58%,
    var(--st-slash-main) 76%,
    var(--st-slash-deep) 90%,
    transparent 100%)!important;
  box-shadow:0 0 3px rgba(255,255,255,.92),0 0 9px var(--st-slash-glow)!important;
  filter:none!important;
}
.st-battle-wrap .st-card-slash-crit .st-card-slash-line,
.st-battle-wrap .st-card-slash-counter .st-card-slash-line{
  background:linear-gradient(90deg,
    transparent 0%,
    var(--st-slash-deep) 7%,
    var(--st-slash-main) 22%,
    var(--st-slash-mid) 38%,
    #fff 49%,
    var(--st-slash-hi) 60%,
    var(--st-slash-main) 79%,
    var(--st-slash-deep) 92%,
    transparent 100%)!important;
  box-shadow:0 0 5px #fff,0 0 13px var(--st-slash-glow)!important;
}
/* Hide any residual damage-projectile markup if an old browser/cache still holds it. */


/* Upgrade: keep the four-card row centered instead of anchored to the left. */
.st-upgrade-wrap .st-upgrade-grid{
  grid-template-columns:repeat(4,minmax(0,238px))!important;
  justify-content:center!important;
  align-items:start!important;
}
.st-upgrade-wrap .st-upgrade-card .st-stars{
  flex-wrap:wrap!important;
  justify-content:center!important;
}
.st-upgrade-wrap .st-upgrade-card .st-stars .st-star-bonus,
.st-upgrade-wrap .st-upgrade-card .st-stars small{
  display:block!important;
  flex:0 0 100%!important;
  width:100%!important;
  margin:4px 0 0!important;
  text-align:center!important;
  line-height:1.25!important;
}
@media(max-width:980px){
  .st-upgrade-wrap .st-upgrade-grid{grid-template-columns:repeat(3,minmax(0,230px))!important;justify-content:center!important}
}
@media(max-width:700px){
  .st-upgrade-wrap .st-upgrade-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;justify-content:center!important}
}


/* 0.7.24 CLEAN VFX CORE -------------------------------------------------
   Legacy beam/spear projectile CSS has been removed. Damage is rendered as
   direct-to-card role-coloured slashes. Lifesteal keeps a soft particle pull
   so it reads as recovery rather than another attack beam. */
.st-battle-wrap .st-life-drain-fx{
  position:absolute;z-index:188;left:50%;top:46%;width:74%;height:54%;
  transform:translate(-50%,-50%);pointer-events:none;overflow:visible;
}
.st-battle-wrap .st-life-drain-fx b{
  position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle,#ffe8f4 0 20%,#dc4d8c 38%,#7b1f55 70%,transparent 74%);
  box-shadow:0 0 8px rgba(220,77,140,.72);animation:stLifeDrainParticle .72s ease-out forwards;
}
.st-battle-wrap .st-life-drain-fx b:nth-child(1){--lx:-34px;--ly:-24px;animation-delay:0ms}
.st-battle-wrap .st-life-drain-fx b:nth-child(2){--lx:30px;--ly:-10px;animation-delay:70ms}
.st-battle-wrap .st-life-drain-fx b:nth-child(3){--lx:-18px;--ly:26px;animation-delay:130ms}
.st-battle-wrap .st-life-drain-fx span{
  position:absolute;left:50%;top:50%;width:54px;height:18px;transform:translate(-50%,-50%) rotate(-12deg);
  border-top:4px solid rgba(220,77,140,.82);border-radius:50%;filter:drop-shadow(0 0 5px rgba(220,77,140,.55));
  animation:stLifeDrainArc .7s ease-out forwards;
}
.st-battle-wrap .st-life-return-glow{
  position:absolute;z-index:187;left:50%;top:45%;width:38px;height:38px;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(255,235,245,.92) 0 10%,rgba(214,75,137,.34) 32%,transparent 70%);
  pointer-events:none;animation:stLifeReturnGlow .74s ease-out forwards;
}
@keyframes stLifeDrainParticle{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}18%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--lx)),calc(-50% + var(--ly))) scale(.15)}}
@keyframes stLifeDrainArc{0%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scaleX(.45)}28%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scaleX(1.1)}}
@keyframes stLifeReturnGlow{0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}40%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}100%{opacity:0;transform:translate(-50%,-50%) scale(.82)}}


/* 0.7.25 — SPECIAL SKILL ORB SYSTEM
   Compact round energy throws only; no rigid beam/tree silhouette. */
.st-battle-wrap .st-skill-orb{
  --orb-main:#8b5cf6;--orb-hot:#f4eaff;--orb-dark:#4c1d95;
  position:absolute;z-index:176;width:22px;height:22px;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;isolation:isolate;
  background:radial-gradient(circle at 38% 34%,#fff 0 9%,var(--orb-hot) 12% 26%,var(--orb-main) 42% 66%,var(--orb-dark) 82%,transparent 84%);
  box-shadow:0 0 5px var(--orb-hot),0 0 12px var(--orb-main),0 0 22px color-mix(in srgb,var(--orb-main) 72%,transparent);
}
.st-battle-wrap .st-skill-orb>span{
  position:absolute;inset:-5px;border-radius:50%;border:1px solid color-mix(in srgb,var(--orb-hot) 72%,transparent);
  opacity:.75;animation:stSkillOrbPulse .34s ease-in-out infinite alternate;
}
.st-battle-wrap .st-skill-orb>b{
  position:absolute;width:5px;height:5px;border-radius:50%;background:var(--orb-hot);
  box-shadow:0 0 8px var(--orb-main);opacity:.92;
}
.st-battle-wrap .st-skill-orb>.p1{left:-12px;top:4px;animation:stSkillOrbParticleA .42s ease-in-out infinite alternate}
.st-battle-wrap .st-skill-orb>.p2{left:-18px;top:12px;width:4px;height:4px;animation:stSkillOrbParticleB .5s ease-in-out infinite alternate}
.st-battle-wrap .st-skill-orb>.p3{left:-9px;top:18px;width:3px;height:3px;animation:stSkillOrbParticleC .38s ease-in-out infinite alternate}
.st-battle-wrap .st-skill-orb-lifesteal{--orb-main:#d7193f;--orb-hot:#ffd3dc;--orb-dark:#6d0018}
.st-battle-wrap .st-skill-orb-sleep{--orb-main:#8b5cf6;--orb-hot:#eadcff;--orb-dark:#4c1d95}
.st-battle-wrap .st-skill-orb-stun{
  --orb-main:#a855f7;--orb-hot:#fff59d;--orb-dark:#5b21b6;
  background:
    radial-gradient(circle at 35% 34%,#fff 0 8%,#fff59d 10% 24%,transparent 26%),
    conic-gradient(from 25deg,#ffd84d 0 22%,#8b5cf6 24% 48%,#ffd84d 50% 73%,#a855f7 75% 100%);
  box-shadow:0 0 5px #fff4a8,0 0 12px #ffd84d,0 0 20px rgba(139,92,246,.8);
}
.st-battle-wrap .st-skill-orb.impact{animation:stSkillOrbImpact .12s ease-out forwards}
@keyframes stSkillOrbPulse{from{transform:scale(.88);opacity:.55}to{transform:scale(1.13);opacity:.95}}
@keyframes stSkillOrbParticleA{from{transform:translate(0,0) scale(.7);opacity:.35}to{transform:translate(-5px,-4px) scale(1);opacity:1}}
@keyframes stSkillOrbParticleB{from{transform:translate(1px,0) scale(.65);opacity:.25}to{transform:translate(-4px,3px) scale(1);opacity:.9}}
@keyframes stSkillOrbParticleC{from{transform:translate(0,0) scale(.6);opacity:.3}to{transform:translate(-6px,2px) scale(.95);opacity:.85}}
@keyframes stSkillOrbImpact{from{opacity:1;filter:brightness(1.55)}to{opacity:0;filter:brightness(2.1)}}
@media(max-width:700px){
  .st-battle-wrap .st-skill-orb{width:18px;height:18px}
  .st-battle-wrap .st-skill-orb>.p1{left:-10px}.st-battle-wrap .st-skill-orb>.p2{left:-14px}.st-battle-wrap .st-skill-orb>.p3{left:-8px}
}


/* 0.7.26 — Formation lock/autosave + wider match/battle cards */
.st-game-wrap .st-team-actions{justify-content:center;align-items:center!important}
.st-game-wrap .st-slot.filled{cursor:default}
.st-game-wrap .st-slot.filled:hover{transform:none}
.st-game-wrap .st-slot-remove{
  top:7px!important;right:7px!important;width:31px!important;height:31px!important;
  display:none;align-items:center;justify-content:center;padding:0!important;
  border:2px solid #ffc861!important;border-radius:50%!important;
  background:linear-gradient(145deg,#ff9a1f,#ef5b12)!important;color:#fff!important;
  font-size:21px!important;line-height:1!important;font-weight:950!important;
  box-shadow:0 4px 12px rgba(255,105,18,.38),0 0 0 2px rgba(0,0,0,.28)!important;
  z-index:5
}
.st-game-wrap .st-slot.filled .st-slot-remove{display:flex!important}
.st-game-wrap .st-pick-btn,.st-game-wrap .st-upgrade-btn{
  background:linear-gradient(135deg,#ff9f20,#f06a0d)!important;
  border:1px solid #ffc25a!important;color:#fff!important;font-weight:900!important;
  box-shadow:0 5px 13px rgba(235,101,12,.24)!important
}
.st-game-wrap .st-pick-btn:disabled{background:#3a3024!important;border-color:#6b5431!important;color:#aa9c85!important;box-shadow:none!important;cursor:default}
.st-game-wrap .st-pick-card.assigned{outline:1px solid rgba(221,167,58,.35)}

/* Match cards: enough horizontal room for Class · Role · LV on one line. */
.st-match-wrap .st-mini-slot{width:146px!important;min-height:142px!important;padding:7px!important}
.st-match-wrap .st-mini-slot img{width:84px!important;height:84px!important}
.st-match-wrap .st-mini-meta{display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;white-space:nowrap!important;line-height:1!important;margin-top:3px!important;font-size:10px!important}
.st-match-wrap .st-mini-meta .st-class-text{
  display:inline-block!important;padding:2px 4px!important;border-width:1px!important;border-style:solid!important;border-radius:6px!important;font-weight:900!important
}
.st-match-wrap .st-mini-meta .st-level{
  display:inline-block!important;padding:2px 4px!important;border:1px solid #b88627!important;border-radius:6px!important;
  background:#211b10!important;color:#ffb23e!important;font-weight:900!important
}
.st-match-wrap .st-mini-meta .st-class-text::after{content:""}

/* Battle cards: slightly wider, with framed Class and LV badges. */
.st-battle-wrap .st-battle-slot{width:138px!important;min-height:136px!important;padding:5px 6px!important}
.st-battle-wrap .st-battle-slot img{width:90px!important;height:78px!important}
.st-battle-wrap .st-battle-meta{display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;white-space:nowrap!important;min-height:0!important;font-size:8.5px!important;line-height:1!important;color:#d1c7b5!important}
.st-battle-wrap .st-battle-meta .st-battle-class{
  display:inline-block!important;padding:2px 4px!important;border-width:1px!important;border-style:solid!important;border-radius:6px!important;font-weight:950!important
}
.st-battle-wrap .st-battle-meta .st-level{
  display:inline-block!important;padding:2px 4px!important;border:1px solid #b88627!important;border-radius:6px!important;
  background:#211b10!important;color:#ffb23e!important;font-weight:950!important
}
.st-battle-wrap .st-battle-meta .st-battle-role{color:#d7cdbb!important;font-weight:700!important}

@media(max-width:700px){
  .st-game-wrap .st-slot-remove{top:3px!important;right:3px!important;width:25px!important;height:25px!important;font-size:17px!important}
  .st-match-wrap .st-mini-front .st-mini-slot{max-width:146px!important;flex:0 1 146px!important}
  .st-match-wrap .st-mini-back .st-mini-slot{max-width:120px!important;flex:1 1 0!important}
  .st-match-wrap .st-mini-slot{min-height:112px!important;padding:4px!important}
  .st-match-wrap .st-mini-slot img{width:61px!important;height:61px!important}
  .st-match-wrap .st-mini-meta{font-size:8px!important;gap:2px!important}
  .st-match-wrap .st-mini-meta .st-class-text,.st-match-wrap .st-mini-meta .st-level{padding:1px 2px!important;border-radius:4px!important}
  .st-battle-row.front-row .st-battle-slot{max-width:124px!important;flex:0 1 124px!important}
  .st-battle-row.back-row .st-battle-slot{max-width:104px!important;flex:1 1 0!important}
  .st-battle-wrap .st-battle-slot{min-height:96px!important;padding:3px!important}
  .st-battle-wrap .st-battle-slot img{width:57px!important;height:51px!important}
  .st-battle-wrap .st-battle-meta{font-size:6.9px!important;gap:1px!important}
  .st-battle-wrap .st-battle-meta .st-battle-class,.st-battle-wrap .st-battle-meta .st-level{padding:1px 2px!important;border-radius:4px!important}
}

/* 0.7.27 — Fighter role label + sharper RPG wound impact. */
/* From matchmaking through live battle, make Đấu sĩ visually distinctive. */
.st-match-wrap .st-role-name.st-role-FTR,
.st-match-my .st-role-name.st-role-FTR,
.st-battle-wrap .st-role-name.st-role-FTR,
.st-battle-wrap .st-battle-role.st-role-FTR{
  color:#7267ff!important;
  font-weight:800!important;
  text-shadow:0 0 1px rgba(140,126,255,.25)!important;
}

/* A damage impact is one diagonal wound slash plus a short red hit flash.
   Crit/counter keep the existing second slash, stronger jerk, and BẠO KÍCH text. */
.st-battle-wrap .st-card-slash-impact{
  transform:rotate(-34deg)!important;
  transform-origin:50% 50%!important;
}
.st-battle-wrap .st-card-slash-line.one{
  height:4px!important;
  border-radius:100% 12% 100% 12%!important;
  clip-path:polygon(0 45%,12% 17%,47% 38%,73% 6%,100% 47%,77% 64%,44% 56%,15% 83%)!important;
}
.st-battle-wrap .st-card-slash-line.two{
  transform:rotate(47deg) translateY(3px)!important;
  animation-delay:82ms!important;
}
.st-battle-wrap .st-blood-hit,
.st-battle-wrap .st-blood-hit-strong{
  position:relative;
  isolation:isolate;
}
.st-battle-wrap .st-blood-hit::after,
.st-battle-wrap .st-blood-hit-strong::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  z-index:15;
  pointer-events:none;
  background:radial-gradient(circle at 50% 48%,rgba(255,52,52,.34) 0%,rgba(158,0,0,.18) 42%,transparent 76%);
  mix-blend-mode:screen;
  animation:stBloodFlash .42s ease-out both;
}
.st-battle-wrap .st-blood-hit-strong::after{animation-duration:.58s;background:radial-gradient(circle at 50% 48%,rgba(255,54,54,.52),rgba(169,0,18,.25) 45%,transparent 78%)}
.st-battle-wrap .st-blood-drop{
  position:absolute;
  left:50%;top:48%;
  width:5px;height:8px;
  z-index:22;
  pointer-events:none;
  border-radius:70% 70% 70% 15%;
  background:linear-gradient(145deg,#ff5252 0%,#c20818 55%,#6f0010 100%);
  box-shadow:0 0 3px rgba(255,48,62,.48);
  transform:translate(-50%,-50%) rotate(var(--bdr));
  animation:stBloodDrop .48s cubic-bezier(.18,.7,.2,1) both;
}
@keyframes stBloodFlash{0%{opacity:0}12%{opacity:1}44%{opacity:.72}100%{opacity:0}}
@keyframes stBloodDrop{0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(var(--bdr))}15%{opacity:.95}100%{opacity:0;transform:translate(calc(-50% + var(--bdx)),calc(-50% + var(--bdy))) scale(.8) rotate(calc(var(--bdr) + 80deg))}}

/* Stronger, snappier card recoil while retaining layout position. */
.st-battle-wrap .st-rpg-hit{animation:stRpgHitJerk .42s cubic-bezier(.2,.75,.22,1)!important}
.st-battle-wrap .st-rpg-crit-hit{animation:stRpgCritJerk .60s cubic-bezier(.16,.78,.22,1)!important}
@keyframes stRpgHitJerk{0%{transform:translate3d(0,0,0)}16%{transform:translate3d(7px,-2px,0) rotate(.7deg)}34%{transform:translate3d(-5px,2px,0) rotate(-.6deg)}58%{transform:translate3d(3px,-1px,0)}100%{transform:translate3d(0,0,0)}}
@keyframes stRpgCritJerk{0%{transform:translate3d(0,0,0)}10%{transform:translate3d(11px,-4px,0) rotate(1.2deg)}23%{transform:translate3d(-9px,4px,0) rotate(-1deg)}39%{transform:translate3d(7px,-3px,0) rotate(.8deg)}56%{transform:translate3d(-4px,2px,0)}76%{transform:translate3d(2px,-1px,0)}100%{transform:translate3d(0,0,0)}}

@media (max-width:700px){
  .st-battle-wrap .st-blood-drop{width:4px;height:6px}
  .st-battle-wrap .st-card-slash-line.one{height:3px!important}
}


/* 0.7.28 — Role label palette + RPG inner-force casting flare. */
/* Role TEXT colours are presentation-only; combat VFX colours remain unchanged. */
.st-role-name{font-weight:800!important;text-shadow:0 1px 1px rgba(0,0,0,.65)!important}
.st-role-name.st-role-SUP{color:#38c96f!important} /* Hỗ trợ: xanh lục */
.st-role-name.st-role-ATK{color:#ff9b35!important} /* Công: cam */
.st-role-name.st-role-DEF{color:#4da3ff!important} /* Thủ/Đỡ đòn: xanh dương */
.st-role-name.st-role-FTR{color:#b98255!important} /* Đấu sĩ: nâu */
.st-role-name.st-role-HP{color:#f05a5a!important}  /* Máu/HP: đỏ */

/* The casting flare has no border and no circular outline. Three soft radial layers
   bloom from the centre, wash across the whole card, then spill 20–30% outside it. */
.st-rpg-cast-flare{
  --flare-rgb:185,117,68;
  position:absolute;left:50%;top:50%;width:100%;height:100%;
  transform:translate(-50%,-50%);pointer-events:none;z-index:42;
  overflow:visible;isolation:isolate;mix-blend-mode:screen;
}
.st-rpg-cast-flare-FTR{--flare-rgb:185,117,68}
.st-rpg-cast-flare-ATK{--flare-rgb:255,143,41}
.st-rpg-cast-flare-DEF{--flare-rgb:61,146,255}
.st-rpg-cast-flare-SUP{--flare-rgb:47,196,100}
.st-rpg-cast-flare-HP{--flare-rgb:236,67,67}
.st-rpg-cast-flare .core,.st-rpg-cast-flare .wash,.st-rpg-cast-flare .aura{
  position:absolute;left:50%;top:50%;border:0!important;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%) scale(.08);opacity:0;
}
.st-rpg-cast-flare .core{
  width:38%;height:38%;
  background:radial-gradient(circle,rgba(255,255,255,.98) 0 5%,rgba(var(--flare-rgb),.95) 12%,rgba(var(--flare-rgb),.46) 38%,transparent 72%);
  filter:blur(.3px);animation:stRpgCoreBloom .42s cubic-bezier(.18,.72,.18,1) both;
}
.st-rpg-cast-flare .wash{
  width:112%;height:112%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.30) 0 4%,rgba(var(--flare-rgb),.52) 13%,rgba(var(--flare-rgb),.27) 42%,rgba(var(--flare-rgb),.10) 66%,transparent 82%);
  filter:blur(3px);animation:stRpgWashBloom .48s cubic-bezier(.16,.75,.2,1) both;
}
.st-rpg-cast-flare .aura{
  width:154%;height:154%;
  background:radial-gradient(ellipse at center,rgba(var(--flare-rgb),.36) 0 18%,rgba(var(--flare-rgb),.20) 38%,rgba(var(--flare-rgb),.08) 57%,transparent 75%);
  filter:blur(7px);animation:stRpgAuraBloom .54s ease-out both;
}
.st-rpg-cast-flare.strong .core{filter:brightness(1.18);animation-duration:.50s}
.st-rpg-cast-flare.strong .wash{filter:blur(3px) brightness(1.28);animation-duration:.56s}
.st-rpg-cast-flare.strong .aura{filter:blur(8px) brightness(1.20);animation-duration:.60s}
.st-rpg-cast-flare .p{
  position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:0 0 6px rgba(var(--flare-rgb),.90);
  opacity:0;animation:stRpgFlareParticle .46s ease-out both;
  --px:34px;--py:-38px;
}
.st-rpg-cast-flare .p1{--px:-52px;--py:-25px;animation-delay:25ms}
.st-rpg-cast-flare .p2{--px:50px;--py:-30px;animation-delay:38ms}
.st-rpg-cast-flare .p3{--px:-58px;--py:22px;animation-delay:52ms}
.st-rpg-cast-flare .p4{--px:57px;--py:26px;animation-delay:66ms}
.st-rpg-cast-flare .p5{--px:-18px;--py:52px;animation-delay:80ms}
.st-rpg-cast-flare .p6{--px:21px;--py:-55px;animation-delay:94ms}
@keyframes stRpgCoreBloom{0%{opacity:0;transform:translate(-50%,-50%) scale(.08)}20%{opacity:1}58%{opacity:.95;transform:translate(-50%,-50%) scale(1.12)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.68)}}
@keyframes stRpgWashBloom{0%{opacity:0;transform:translate(-50%,-50%) scale(.12)}18%{opacity:.88}66%{opacity:.72;transform:translate(-50%,-50%) scale(1.02)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.32)}}
@keyframes stRpgAuraBloom{0%{opacity:0;transform:translate(-50%,-50%) scale(.20)}26%{opacity:.72}72%{opacity:.52;transform:translate(-50%,-50%) scale(1.02)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.24)}}
@keyframes stRpgFlareParticle{0%{opacity:0;transform:translate(0,0) scale(.35)}18%{opacity:1}100%{opacity:0;transform:translate(var(--px),var(--py)) scale(.72)}}

@media(max-width:700px){
  .st-rpg-cast-flare .aura{width:142%;height:142%;filter:blur(5px)}
  .st-rpg-cast-flare .wash{width:108%;height:108%;filter:blur(2px)}
  .st-rpg-cast-flare .p{width:3px;height:3px}
}
@media(prefers-reduced-motion:reduce){
  .st-rpg-cast-flare .core,.st-rpg-cast-flare .wash,.st-rpg-cast-flare .aura,.st-rpg-cast-flare .p{animation-duration:.001ms!important}
}

/* 0.7.30 — Force role colours inside live Battle and matchmaking metadata.
   These selectors intentionally outrank the generic dark-theme metadata colour. */
.st-battle-wrap .st-battle-meta .st-battle-role.st-role-SUP,
.st-battle-wrap .st-role-name.st-role-SUP,
.st-match-wrap .st-role-name.st-role-SUP,
.st-match-my .st-role-name.st-role-SUP{color:#38c96f!important;font-weight:800!important} /* Hỗ trợ */
.st-battle-wrap .st-battle-meta .st-battle-role.st-role-ATK,
.st-battle-wrap .st-role-name.st-role-ATK,
.st-match-wrap .st-role-name.st-role-ATK,
.st-match-my .st-role-name.st-role-ATK{color:#ff9b35!important;font-weight:800!important} /* Công */
.st-battle-wrap .st-battle-meta .st-battle-role.st-role-DEF,
.st-battle-wrap .st-role-name.st-role-DEF,
.st-match-wrap .st-role-name.st-role-DEF,
.st-match-my .st-role-name.st-role-DEF{color:#4da3ff!important;font-weight:800!important} /* Thủ / Đỡ Đòn */
.st-battle-wrap .st-battle-meta .st-battle-role.st-role-FTR,
.st-battle-wrap .st-role-name.st-role-FTR,
.st-match-wrap .st-role-name.st-role-FTR,
.st-match-my .st-role-name.st-role-FTR{color:#7a1f26!important;font-weight:800!important;text-shadow:0 1px 1px rgba(0,0,0,.65)!important} /* Đấu sĩ - đỏ đô */
.st-battle-wrap .st-battle-meta .st-battle-role.st-role-HP,
.st-battle-wrap .st-role-name.st-role-HP,
.st-match-wrap .st-role-name.st-role-HP,
.st-match-my .st-role-name.st-role-HP{color:#f05a5a!important;font-weight:800!important} /* Máu / HP */


/* 0.7.32 — Target danger state.
   The attacked card turns dark blood-red from attack launch until the wound slash lands.
   No hard ring is used; the tint covers the full card and then fades back naturally. */
.st-battle-wrap .st-battle-slot.st-target-danger{
  filter:saturate(.72) brightness(.58) contrast(1.10) sepia(.08) hue-rotate(-8deg)!important;
  transition:filter .11s ease,box-shadow .11s ease!important;
  box-shadow:inset 0 0 36px rgba(116,0,8,.72),inset 0 0 8px rgba(255,42,42,.32),0 0 16px rgba(123,0,10,.20)!important;
}
.st-battle-wrap .st-target-danger-overlay{
  position:absolute;
  inset:0;
  z-index:12;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 52% 43%,rgba(255,48,48,.28) 0%,rgba(135,0,10,.42) 42%,rgba(48,0,5,.70) 100%),
    linear-gradient(180deg,rgba(132,0,8,.20),rgba(55,0,4,.42));
  mix-blend-mode:multiply;
  transition:opacity .10s ease,background .10s ease;
}
.st-battle-wrap .st-target-danger-live .st-target-danger-overlay{opacity:.92}
.st-battle-wrap .st-target-danger-strong .st-target-danger-overlay{
  opacity:1;
  background:
    radial-gradient(circle at 52% 43%,rgba(255,54,54,.38) 0%,rgba(158,0,12,.52) 40%,rgba(42,0,4,.78) 100%),
    linear-gradient(180deg,rgba(145,0,10,.26),rgba(50,0,4,.50));
}
.st-battle-wrap .st-target-danger-impact{
  filter:saturate(1.18) brightness(.70) contrast(1.16)!important;
}
.st-battle-wrap .st-target-danger-impact .st-target-danger-overlay{
  opacity:1;
  background:radial-gradient(circle at 50% 48%,rgba(255,80,80,.52) 0%,rgba(172,0,13,.46) 42%,rgba(40,0,4,.70) 100%);
}
.st-battle-wrap .st-battle-slot.ko.st-target-danger,
.st-battle-wrap .st-battle-slot.ko.st-target-danger-impact{filter:grayscale(1)!important;box-shadow:none!important}
@media (prefers-reduced-motion:reduce){
  .st-battle-wrap .st-battle-slot.st-target-danger,.st-battle-wrap .st-target-danger-overlay{transition:none!important}
}

/* 0.7.34 — opponent team power badge mirrors the player's team-power badge. */
.st-match-wrap .st-opponent-head{align-items:flex-start;flex-direction:row;flex-wrap:wrap}
.st-match-wrap .st-opponent-head>div{flex:1 1 220px;min-width:0}
.st-match-wrap .st-opponent-head .st-opponent-team-power{display:inline-flex;align-items:center;min-height:32px;margin-left:auto;padding:6px 11px;border:1px solid rgba(226,184,74,.65);border-radius:999px;background:rgba(13,13,16,.92);color:#f0c85a!important;font-weight:800;letter-spacing:.01em;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(255,228,137,.05)}
@media(max-width:700px){.st-match-wrap .st-opponent-head{flex-direction:row!important;align-items:flex-start!important;gap:7px}.st-match-wrap .st-opponent-head>div{flex:1 1 150px}.st-match-wrap .st-opponent-head .st-opponent-team-power{min-height:28px;padding:4px 8px;font-size:12px}}

/* 0.8.1 - Miễn sát thương toàn đội: khiên xanh phủ từng card, không dùng vòng viền cứng. */
.st-battle-slot.st-team-immune{position:relative;isolation:isolate;box-shadow:0 0 0 1px rgba(80,220,120,.72),0 0 22px rgba(50,210,105,.34),inset 0 0 28px rgba(30,170,85,.18)!important}
.st-team-shield-veil{position:absolute;inset:3px;z-index:16;pointer-events:none;border-radius:inherit;overflow:hidden;background:radial-gradient(circle at 50% 44%,rgba(165,255,190,.30) 0%,rgba(70,220,120,.20) 32%,rgba(15,105,55,.18) 66%,rgba(7,35,20,.08) 100%);box-shadow:inset 0 0 24px rgba(132,255,170,.22);animation:stTeamShieldBreathe 1.35s ease-in-out infinite alternate}
.st-team-shield-veil:before{content:"";position:absolute;left:15%;right:15%;top:10%;bottom:8%;clip-path:polygon(50% 0,90% 15%,84% 65%,50% 100%,16% 65%,10% 15%);background:linear-gradient(145deg,rgba(190,255,205,.26),rgba(30,190,90,.10) 48%,rgba(0,70,35,.15));filter:drop-shadow(0 0 8px rgba(75,255,135,.34));opacity:.86}
.st-team-shield-veil span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scaleX(.72) rotate(45deg);font-size:22px;color:rgba(183,255,204,.72);text-shadow:0 0 10px rgba(55,255,125,.55)}
@keyframes stTeamShieldBreathe{from{opacity:.70;filter:saturate(.95) brightness(.94)}to{opacity:.98;filter:saturate(1.18) brightness(1.09)}}
.st-bot-tag{display:inline-block;margin-left:5px;padding:2px 6px;border-radius:9px;background:#5c4300;border:1px solid #d7b34a;color:#ffe89b;font-size:10px;font-weight:800;vertical-align:middle}
.st-battle-slot.st-shield-preflash{filter:saturate(1.16) brightness(1.08);box-shadow:0 0 24px rgba(70,230,125,.32),inset 0 0 30px rgba(80,235,135,.18)!important}

/* 0.8.3 Upgrade skill visibility */
.st-upgrade-skills{margin:10px 0 12px;padding:9px;border:1px solid rgba(216,165,36,.55);border-radius:10px;background:#0b0d0f;text-align:left}.st-skill-title{display:block;color:#ffc247;text-align:center;margin-bottom:7px}.st-upgrade-skill{padding:7px 8px;border-top:1px solid rgba(255,194,71,.18)}.st-upgrade-skill:first-of-type{border-top:0}.st-upgrade-skill strong{display:block;color:#f3e7c6;font-size:12px}.st-upgrade-skill span{display:block;color:#ffc247;font-size:11px;font-weight:700;margin-top:2px}.st-upgrade-skill small{display:block;color:#aeb7c2;font-size:10px;line-height:1.35;margin-top:2px}.st-rank-line{display:block;color:#c8b36b;margin-top:4px}

/* 0.8.3 Rank v2 */
.st-rank-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0;padding:10px 14px;border:1px solid #9d771b;border-radius:12px;background:#0c0d0f;color:#d8dde5}.st-rank-summary b{color:#ffbf3e;font-size:16px;margin-right:8px}.st-rank-summary span,.st-rank-summary small{color:#aeb8c5}.st-rank-v2-panels{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.st-rank-v2-panels section{border:1px solid #8d6f23;border-radius:13px;background:#0c0d0f;padding:12px}.st-rank-v2-panels h3{color:#ffbd3b;margin:0 0 8px}.st-rank-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;padding:6px 0;border-top:1px solid rgba(255,190,60,.14);color:#d9dee6}.st-rank-row:first-of-type{border-top:0}.st-rank-row span{color:#d5b35c}.st-rank-row span.plus{color:#55d985}.st-rank-row span.minus{color:#ff6f78}.st-rank-row small{color:#87919e}@media(max-width:700px){.st-rank-v2-panels{grid-template-columns:1fr}.st-rank-summary{align-items:flex-start;flex-direction:column}}


/* 0.8.7 — Laptop/desktop 125–150% display-scale compact mode.
   Enabled by sieu_thu_mobile.js only for fine-pointer desktop-class viewports.
   100% desktop rendering is untouched. Mobile/tablet touch layouts remain unchanged. */
html.st-display-scaled .st-match-wrap,
html.st-display-scaled .st-battle-wrap{
  --st-scale-card: .86;
}

/* Match-found screen: keep both teams compact and visually equivalent to 100% desktop. */
html.st-display-scaled .st-match-wrap .st-opponent,
html.st-display-scaled .st-match-wrap .st-match-my{
  padding:10px!important;
  margin:8px 0!important;
}
html.st-display-scaled .st-match-wrap .st-opponent-head,
html.st-display-scaled .st-match-wrap .st-match-my-head{
  margin-bottom:7px!important;
  gap:7px!important;
}
html.st-display-scaled .st-match-wrap .st-mini-formation{gap:5px!important}
html.st-display-scaled .st-match-wrap .st-mini-front,
html.st-display-scaled .st-match-wrap .st-mini-back{gap:6px!important}
html.st-display-scaled .st-match-wrap .st-mini-slot{
  width:122px!important;
  min-height:112px!important;
  padding:5px!important;
  border-radius:10px!important;
}
html.st-display-scaled .st-match-wrap .st-mini-slot img{
  width:68px!important;
  height:68px!important;
}
html.st-display-scaled .st-match-wrap .st-mini-slot b{font-size:10.5px!important;margin-top:2px!important}
html.st-display-scaled .st-match-wrap .st-mini-meta{font-size:8px!important;gap:2px!important;margin-top:2px!important}
html.st-display-scaled .st-match-wrap .st-mini-meta .st-class-text,
html.st-display-scaled .st-match-wrap .st-mini-meta .st-level{padding:1px 3px!important}
html.st-display-scaled .st-match-wrap .st-mini-slot small{font-size:9px!important}
html.st-display-scaled .st-match-wrap .st-fight-btn{margin-top:8px!important;min-width:160px!important;padding:8px 14px!important}
html.st-display-scaled .st-match-wrap .st-my-team-power,
html.st-display-scaled .st-match-wrap .st-opponent-team-power{min-height:27px!important;padding:3px 8px!important;font-size:11px!important}

/* Live battle: reduce vertical footprint first, not readability. */
html.st-display-scaled .st-battle-wrap{max-width:1180px!important}
html.st-display-scaled .st-battle-wrap .st-battle-topbar{margin:4px 0 6px!important}
html.st-display-scaled .st-battle-wrap .st-battle-arena{
  padding:8px 10px!important;
  border-radius:15px!important;
}
html.st-display-scaled .st-battle-wrap .st-side-title{margin:1px 0 4px!important;line-height:1.05!important}
html.st-display-scaled .st-battle-wrap .st-side-title b{font-size:15px!important}
html.st-display-scaled .st-battle-wrap .st-side-title span{font-size:9px!important}
html.st-display-scaled .st-battle-wrap .st-battle-team{gap:4px!important}
html.st-display-scaled .st-battle-wrap .enemy-team{margin-bottom:1px!important}
html.st-display-scaled .st-battle-wrap .my-team{margin-top:1px!important}
html.st-display-scaled .st-battle-wrap .st-battle-row{
  gap:7px!important;
  min-height:94px!important;
}
html.st-display-scaled .st-battle-wrap .st-battle-slot{
  width:116px!important;
  min-height:98px!important;
  padding:3px 4px!important;
  border-radius:10px!important;
}
html.st-display-scaled .st-battle-wrap .st-battle-slot img{
  width:66px!important;
  height:57px!important;
}
html.st-display-scaled .st-battle-wrap .st-battle-slot b{
  font-size:10px!important;
  line-height:1.05!important;
  height:auto!important;
  min-height:11px!important;
  margin:1px 0!important;
}
html.st-display-scaled .st-battle-wrap .st-stars{font-size:11px!important;line-height:1!important;margin:0!important}
html.st-display-scaled .st-battle-wrap .st-battle-meta{
  font-size:7.2px!important;
  gap:2px!important;
  line-height:1!important;
  margin:1px 0!important;
}
html.st-display-scaled .st-battle-wrap .st-battle-meta .st-battle-class,
html.st-display-scaled .st-battle-wrap .st-battle-meta .st-level{
  padding:1px 2px!important;
  border-radius:4px!important;
}
html.st-display-scaled .st-battle-wrap .st-hpbar{height:5px!important;margin:3px 2px 1px!important}
html.st-display-scaled .st-battle-wrap .st-hptext{font-size:8px!important;line-height:1!important}
html.st-display-scaled .st-battle-wrap .st-status-badges{gap:2px!important;margin-top:1px!important}
html.st-display-scaled .st-battle-wrap .st-status-chip{font-size:7px!important;padding:1px 3px!important}
html.st-display-scaled .st-battle-wrap .st-vs{font-size:17px!important;margin:0!important;line-height:1!important}
html.st-display-scaled .st-battle-wrap .st-battle-log{
  margin-top:6px!important;
  padding:7px 10px!important;
  min-height:16px!important;
  font-size:11px!important;
}
html.st-display-scaled .st-battle-wrap .st-result{margin-top:7px!important;padding:10px!important}
html.st-display-scaled .st-battle-wrap .st-result strong{font-size:20px!important}

/* Stronger compaction at 150% on common 1366/1920-class laptops. */
@media (max-height:760px) and (min-width:820px){
  html.st-display-scaled .st-battle-wrap .st-battle-arena{padding:6px 8px!important}
  html.st-display-scaled .st-battle-wrap .st-battle-row{min-height:86px!important;gap:5px!important}
  html.st-display-scaled .st-battle-wrap .st-battle-slot{width:108px!important;min-height:90px!important;padding:2px 3px!important}
  html.st-display-scaled .st-battle-wrap .st-battle-slot img{width:59px!important;height:51px!important}
  html.st-display-scaled .st-battle-wrap .st-side-title b{font-size:14px!important}
  html.st-display-scaled .st-battle-wrap .st-vs{font-size:15px!important}
  html.st-display-scaled .st-battle-wrap .st-battle-log{margin-top:4px!important;padding:5px 8px!important;font-size:10px!important}
}


/* 0.8.10 — compact 5-column kennel cards on desktop/laptop.
   Keep mobile readable; only the Siêu Thú roster grid is compacted. */
@media (min-width: 901px){
  .st-game-wrap .st-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .st-game-wrap .st-card{
    padding:8px!important;
    border-radius:13px!important;
  }
  .st-game-wrap .st-card img{
    width:100%!important;
    max-width:126px!important;
    max-height:126px!important;
    margin:0 auto!important;
  }
  .st-game-wrap .st-card h3{
    font-size:14px!important;
    line-height:1.15!important;
    margin:5px 0!important;
  }
  .st-game-wrap .st-meta{
    gap:4px!important;
    font-size:10px!important;
  }
  .st-game-wrap .st-meta b,
  .st-game-wrap .st-meta span,
  .st-game-wrap .st-meta strong{
    padding:2px 5px!important;
  }
  .st-game-wrap .st-stars{font-size:13px!important;line-height:1.1!important}
  .st-game-wrap .st-exp{height:6px!important;margin:6px 0 2px!important}
  .st-game-wrap .st-exp-label{font-size:9px!important}
  .st-game-wrap .st-power{font-size:11px!important;margin:6px 0!important}
  .st-game-wrap .st-stats{font-size:10px!important;gap:3px 6px!important;padding:6px!important}
  .st-game-wrap .st-points{font-size:10px!important;margin-top:5px!important}
  .st-game-wrap .st-card-actions{gap:5px!important;margin-top:6px!important}
  .st-game-wrap .st-pick-btn,
  .st-game-wrap .st-upgrade-btn{
    min-height:32px!important;
    padding:6px 5px!important;
    font-size:10px!important;
    border-radius:8px!important;
  }
}
@media (min-width:701px) and (max-width:900px){
  .st-game-wrap .st-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:9px!important}
  .st-game-wrap .st-card img{max-width:112px!important;max-height:112px!important;margin:0 auto!important}
  .st-game-wrap .st-card h3{font-size:12px!important}
  .st-game-wrap .st-meta{font-size:9px!important;gap:3px!important}
}

/* 0.8.11 — 3-opponent matchmaking relation badges. */
.st-opponent-power-box{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.st-power-relation{font-weight:800;font-size:10px;letter-spacing:.02em}
.st-power-relation.easier{color:#6fcf78}
.st-power-relation.harder{color:#f0a35c}
@media (max-width:700px){.st-opponent-power-box{align-items:flex-start}.st-power-relation{font-size:9px}}


/* 0.8.13 — compact main Game roster/formation. Keep Battle/Match layouts untouched. */
@media (min-width: 701px){
  .st-game-wrap .st-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .st-game-wrap .st-card{
    padding:7px!important;
    border-radius:11px!important;
  }
  .st-game-wrap .st-card img{
    width:100%!important;
    max-width:108px!important;
    max-height:108px!important;
    margin:0 auto!important;
  }
  .st-game-wrap .st-card h3{
    font-size:12px!important;
    line-height:1.12!important;
    margin:4px 0!important;
  }
  .st-game-wrap .st-meta{gap:3px!important;font-size:8.5px!important;flex-wrap:nowrap!important}
  .st-game-wrap .st-meta b,.st-game-wrap .st-meta span,.st-game-wrap .st-meta strong{padding:2px 3px!important;white-space:nowrap!important}
  .st-game-wrap .st-stars{font-size:11px!important;line-height:1!important}
  .st-game-wrap .st-exp{height:5px!important;margin:4px 0 2px!important}
  .st-game-wrap .st-exp-label{font-size:8px!important}
  .st-game-wrap .st-power{font-size:9.5px!important;margin:4px 0!important}
  .st-game-wrap .st-stats{font-size:8.5px!important;gap:2px 4px!important;padding:5px!important}
  .st-game-wrap .st-points{font-size:8.5px!important;margin-top:4px!important}
  .st-game-wrap .st-card-actions{gap:4px!important;margin-top:4px!important}
  .st-game-wrap .st-pick-btn,.st-game-wrap .st-upgrade-btn{min-height:29px!important;padding:4px!important;font-size:8.5px!important;border-radius:7px!important}

  /* Formation stays logically 2 front + 3 back, but is materially smaller. */
  .st-game-wrap .st-team-box{padding:12px!important}
  .st-game-wrap .st-slots{gap:8px!important}
  .st-game-wrap .st-slots-front{grid-template-columns:repeat(2,minmax(130px,185px))!important}
  .st-game-wrap .st-slots-back{grid-template-columns:repeat(3,minmax(120px,170px))!important}
  .st-game-wrap .st-slot{min-height:132px!important;padding:6px!important;border-radius:12px!important}
  .st-game-wrap .st-slot-content img{width:76px!important;height:76px!important;margin-bottom:2px!important}
  .st-game-wrap .st-slot-content strong{font-size:11px!important}
  .st-game-wrap .st-slot-content small{font-size:9px!important;margin-top:2px!important}
  .st-game-wrap .st-slot-meta{gap:3px!important;margin-top:3px!important;flex-wrap:nowrap!important}
  .st-game-wrap .st-slot-meta span{font-size:8px!important;padding:1px 3px!important;white-space:nowrap!important}
  .st-game-wrap .st-slot-stars{font-size:11px!important;line-height:1!important}
  .st-game-wrap .st-slot-power{font-size:8.5px!important}
  .st-game-wrap .st-slot-remove{width:29px!important;height:29px!important;top:4px!important;right:4px!important;font-size:18px!important}
}
@media (max-width:700px){
  .st-game-wrap .st-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
}


/* 0.8.14 — Unified role + class identity palette across all Siêu Thú surfaces. */
/* Role labels: keep the same semantic colors in kennel, formation, match, upgrade and battle. */
.st-wrap .st-role-name.st-role-SUP,
.st-wrap .st-battle-role.st-role-SUP{color:#39c96d!important;font-weight:800!important}
.st-wrap .st-role-name.st-role-ATK,
.st-wrap .st-battle-role.st-role-ATK{color:#ff9b35!important;font-weight:800!important}
.st-wrap .st-role-name.st-role-DEF,
.st-wrap .st-battle-role.st-role-DEF{color:#4da3ff!important;font-weight:800!important}
.st-wrap .st-role-name.st-role-FTR,
.st-wrap .st-battle-role.st-role-FTR{color:#7f2630!important;font-weight:800!important}
.st-wrap .st-role-name.st-role-HP,
.st-wrap .st-battle-role.st-role-HP{color:#ef5350!important;font-weight:800!important}

/* Class badges and Pet names. D=silver, C=blue, B=green, A=purple, S=royal gold/red. */
.st-wrap .st-class-D,.st-wrap .st-class-text.st-class-D{color:#c4cbd3!important;border-color:#8f98a3!important;background:rgba(155,165,176,.11)!important}
.st-wrap .st-class-C,.st-wrap .st-class-text.st-class-C{color:#58a9ff!important;border-color:#377dc2!important;background:rgba(77,163,255,.10)!important}
.st-wrap .st-class-B,.st-wrap .st-class-text.st-class-B{color:#58ce79!important;border-color:#359454!important;background:rgba(67,190,102,.10)!important}
.st-wrap .st-class-A,.st-wrap .st-class-text.st-class-A{color:#b778ff!important;border-color:#7b42bd!important;background:rgba(166,92,255,.11)!important}
.st-wrap .st-class-S,.st-wrap .st-class-text.st-class-S{color:#ffbe35!important;border-color:#d68b20!important;background:rgba(193,95,24,.10)!important}

.st-wrap .st-pet-name{font-weight:900!important}
.st-wrap .st-pet-name-D{color:#c7ced6!important;text-shadow:0 1px 1px rgba(0,0,0,.65)!important}
.st-wrap .st-pet-name-C{color:#58a9ff!important;text-shadow:0 1px 1px rgba(0,0,0,.65)!important}
.st-wrap .st-pet-name-B{color:#58ce79!important;text-shadow:0 1px 1px rgba(0,0,0,.65)!important}
.st-wrap .st-pet-name-A{color:#b778ff!important;text-shadow:0 1px 1px rgba(0,0,0,.68)!important}
.st-wrap .st-pet-name-S{
  color:#ffc247!important;
  background:linear-gradient(90deg,#ffe06a 0%,#ffb52e 52%,#e95c2d 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:none!important;
}
/* Match templates historically use .st-class-text without the class suffix; infer from the card data class. */
.st-match-wrap .st-mini-slot:has(.st-pet-name-D) .st-class-text{color:#c4cbd3!important;border-color:#8f98a3!important}
.st-match-wrap .st-mini-slot:has(.st-pet-name-C) .st-class-text{color:#58a9ff!important;border-color:#377dc2!important}
.st-match-wrap .st-mini-slot:has(.st-pet-name-B) .st-class-text{color:#58ce79!important;border-color:#359454!important}
.st-match-wrap .st-mini-slot:has(.st-pet-name-A) .st-class-text{color:#b778ff!important;border-color:#7b42bd!important}
.st-match-wrap .st-mini-slot:has(.st-pet-name-S) .st-class-text{color:#ffbe35!important;border-color:#d68b20!important}
/* Battle class badge follows the actual card class. */
.st-battle-wrap .st-battle-slot[data-class="D"] .st-battle-class{color:#c4cbd3!important;border-color:#8f98a3!important}
.st-battle-wrap .st-battle-slot[data-class="C"] .st-battle-class{color:#58a9ff!important;border-color:#377dc2!important}
.st-battle-wrap .st-battle-slot[data-class="B"] .st-battle-class{color:#58ce79!important;border-color:#359454!important}
.st-battle-wrap .st-battle-slot[data-class="A"] .st-battle-class{color:#b778ff!important;border-color:#7b42bd!important}
.st-battle-wrap .st-battle-slot[data-class="S"] .st-battle-class{color:#ffbe35!important;border-color:#d68b20!important}


/* 0.8.17 — hard-sync Class palette on every Siêu Thú surface + 5-column Upgrade grid. */
/* Class identity: D silver, C blue, B green, A purple, S royal gold/red. */
.st-wrap .st-class-D,
.st-wrap .st-class-text.st-class-D,
.st-wrap .st-battle-class.st-class-D{color:#c8d0d8!important;border-color:#8f9aa6!important;background:linear-gradient(180deg,rgba(205,214,222,.16),rgba(113,124,136,.10))!important}
.st-wrap .st-class-C,
.st-wrap .st-class-text.st-class-C,
.st-wrap .st-battle-class.st-class-C{color:#55aaff!important;border-color:#377fc5!important;background:rgba(72,157,247,.11)!important}
.st-wrap .st-class-B,
.st-wrap .st-class-text.st-class-B,
.st-wrap .st-battle-class.st-class-B{color:#56cf78!important;border-color:#369756!important;background:rgba(67,190,102,.11)!important}
.st-wrap .st-class-A,
.st-wrap .st-class-text.st-class-A,
.st-wrap .st-battle-class.st-class-A{color:#b978ff!important;border-color:#7c43bf!important;background:rgba(166,92,255,.12)!important}
.st-wrap .st-class-S,
.st-wrap .st-class-text.st-class-S,
.st-wrap .st-battle-class.st-class-S{color:#ffc13d!important;border-color:#d88b1e!important;background:linear-gradient(135deg,rgba(111,48,18,.34),rgba(52,31,12,.22))!important}

/* Pet name always follows its Class, regardless of page-specific white title rules. */
.st-wrap .st-pet-name-D{color:#c8d0d8!important;-webkit-text-fill-color:#c8d0d8!important;background:none!important}
.st-wrap .st-pet-name-C{color:#55aaff!important;-webkit-text-fill-color:#55aaff!important;background:none!important}
.st-wrap .st-pet-name-B{color:#56cf78!important;-webkit-text-fill-color:#56cf78!important;background:none!important}
.st-wrap .st-pet-name-A{color:#b978ff!important;-webkit-text-fill-color:#b978ff!important;background:none!important}
.st-wrap .st-pet-name-S{
  color:#ffc13d!important;
  background:linear-gradient(90deg,#ffe66a 0%,#ffbd31 48%,#ed6534 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;
}

/* Upgrade page density: five cards per row on laptop/desktop, same visual density as kennel. */
@media (min-width:901px){
  .st-upgrade-wrap .st-upgrade-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:8px!important;
    justify-content:stretch!important;
    align-items:start!important;
  }
  .st-upgrade-wrap .st-upgrade-card{padding:7px!important;border-radius:11px!important;min-width:0!important}
  .st-upgrade-wrap .st-upgrade-card>img{width:100%!important;max-width:112px!important;max-height:112px!important;margin:0 auto!important}
  .st-upgrade-wrap .st-upgrade-card h3{font-size:12px!important;line-height:1.12!important;margin:3px 0 4px!important;white-space:normal!important}
  .st-upgrade-wrap .st-upgrade-card .st-meta{font-size:8.5px!important;gap:2px!important;flex-wrap:nowrap!important;justify-content:center!important}
  .st-upgrade-wrap .st-upgrade-card .st-meta b,
  .st-upgrade-wrap .st-upgrade-card .st-meta span,
  .st-upgrade-wrap .st-upgrade-card .st-meta strong{padding:2px 3px!important;white-space:nowrap!important}
  .st-upgrade-wrap .st-upgrade-card .st-stars{font-size:14px!important;margin:3px 0!important;gap:1px!important}
  .st-upgrade-wrap .st-upgrade-card .st-stars .st-star-bonus,
  .st-upgrade-wrap .st-upgrade-card .st-stars small{font-size:7.5px!important;margin-top:2px!important}
  .st-upgrade-wrap .st-upgrade-card .st-exp-line,
  .st-upgrade-wrap .st-upgrade-card .st-power,
  .st-upgrade-wrap .st-upgrade-card .st-points-big{font-size:8.5px!important;margin:4px 0!important}
  .st-upgrade-wrap .st-upgrade-card .st-stats{font-size:8px!important;line-height:1.25!important;gap:2px 5px!important;padding:5px!important}
  .st-upgrade-wrap .st-upgrade-card .st-open-build{font-size:9px!important;min-height:30px!important;padding:4px 6px!important}
  .st-upgrade-wrap .st-upgrade-skills{font-size:8px!important;padding:5px!important;margin-top:5px!important}
  .st-upgrade-wrap .st-upgrade-skill{padding:3px 0!important;line-height:1.2!important}
  .st-upgrade-wrap .st-upgrade-skill strong{font-size:8.5px!important}
  .st-upgrade-wrap .st-upgrade-skill span,
  .st-upgrade-wrap .st-upgrade-skill small{font-size:7.5px!important}
  .st-upgrade-wrap .st-build-panel{font-size:9px!important;margin-top:6px!important;padding-top:6px!important}
  .st-upgrade-wrap .st-build-row{gap:4px!important;padding:4px 0!important}
  .st-upgrade-wrap .st-build-row small{font-size:7.5px!important}
  .st-upgrade-wrap .st-stepper{gap:2px!important}
  .st-upgrade-wrap .st-stepper button{width:25px!important;height:25px!important;font-size:16px!important;border-radius:7px!important}
  .st-upgrade-wrap .st-stepper input{width:28px!important;padding:4px 1px!important;font-size:9px!important}
  .st-upgrade-wrap .st-build-summary,.st-upgrade-wrap .st-alloc-current{font-size:8px!important;margin:5px 0!important}
  .st-upgrade-wrap .st-build-panel .st-btn,.st-upgrade-wrap .st-reset-form button{font-size:9px!important;padding:6px!important}
}
/* Mid-size/tablet stays dense but readable. */
@media (min-width:701px) and (max-width:900px){
  .st-upgrade-wrap .st-upgrade-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important;justify-content:stretch!important}
}


/* 0.8.19 — single authoritative Class palette across every Siêu Thú surface.
   These selectors intentionally outrank older page-level warm/white rules. */
.st-wrap.st-game-wrap .st-class.st-class-D,.st-wrap.st-upgrade-wrap .st-class.st-class-D,.st-wrap.st-match-wrap .st-class-text.st-class-D,.st-wrap.st-battle-wrap .st-battle-class.st-class-D{color:#d1d7de!important;border-color:#929da8!important;background:linear-gradient(180deg,rgba(215,222,229,.17),rgba(106,118,130,.12))!important;-webkit-text-fill-color:#d1d7de!important}
.st-wrap.st-game-wrap .st-class.st-class-C,.st-wrap.st-upgrade-wrap .st-class.st-class-C,.st-wrap.st-match-wrap .st-class-text.st-class-C,.st-wrap.st-battle-wrap .st-battle-class.st-class-C{color:#55aaff!important;border-color:#377fc5!important;background:rgba(72,157,247,.12)!important;-webkit-text-fill-color:#55aaff!important}
.st-wrap.st-game-wrap .st-class.st-class-B,.st-wrap.st-upgrade-wrap .st-class.st-class-B,.st-wrap.st-match-wrap .st-class-text.st-class-B,.st-wrap.st-battle-wrap .st-battle-class.st-class-B{color:#59d27b!important;border-color:#379858!important;background:rgba(67,190,102,.12)!important;-webkit-text-fill-color:#59d27b!important}
.st-wrap.st-game-wrap .st-class.st-class-A,.st-wrap.st-upgrade-wrap .st-class.st-class-A,.st-wrap.st-match-wrap .st-class-text.st-class-A,.st-wrap.st-battle-wrap .st-battle-class.st-class-A{color:#bd7cff!important;border-color:#8047c4!important;background:rgba(166,92,255,.13)!important;-webkit-text-fill-color:#bd7cff!important}
.st-wrap.st-game-wrap .st-class.st-class-S,.st-wrap.st-upgrade-wrap .st-class.st-class-S,.st-wrap.st-match-wrap .st-class-text.st-class-S,.st-wrap.st-battle-wrap .st-battle-class.st-class-S{color:#ffd04f!important;border-color:#d88b1e!important;background:linear-gradient(135deg,rgba(128,57,17,.38),rgba(55,33,10,.25))!important;-webkit-text-fill-color:#ffd04f!important}
/* Class names follow the same palette everywhere. */
.st-wrap .st-pet-name.st-pet-name-D{color:#d1d7de!important;-webkit-text-fill-color:#d1d7de!important;background:none!important}
.st-wrap .st-pet-name.st-pet-name-C{color:#55aaff!important;-webkit-text-fill-color:#55aaff!important;background:none!important}
.st-wrap .st-pet-name.st-pet-name-B{color:#59d27b!important;-webkit-text-fill-color:#59d27b!important;background:none!important}
.st-wrap .st-pet-name.st-pet-name-A{color:#bd7cff!important;-webkit-text-fill-color:#bd7cff!important;background:none!important}
.st-wrap .st-pet-name.st-pet-name-S{color:#ffd04f!important;background:linear-gradient(90deg,#ffe66a 0%,#ffc33b 48%,#ee6534 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}


/* 0.8.20 — readable 4-card kennel/formation inventory/upgrade layout.
   Match discovery and live Battle are intentionally untouched. */
@media (min-width:901px){
  .st-game-wrap .st-grid,
  .st-upgrade-wrap .st-upgrade-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:12px!important;
  }
  .st-game-wrap .st-card,
  .st-upgrade-wrap .st-upgrade-card{
    padding:10px!important;
    border-radius:13px!important;
  }
  .st-game-wrap .st-card img,
  .st-upgrade-wrap .st-upgrade-card>img{
    max-width:145px!important;
    max-height:145px!important;
  }
  .st-game-wrap .st-card h3,
  .st-upgrade-wrap .st-upgrade-card h3{
    font-size:14px!important;
    line-height:1.2!important;
  }
  .st-game-wrap .st-meta,
  .st-upgrade-wrap .st-upgrade-card .st-meta{font-size:10px!important;gap:4px!important}
  .st-game-wrap .st-meta b,.st-game-wrap .st-meta span,.st-game-wrap .st-meta strong,
  .st-upgrade-wrap .st-upgrade-card .st-meta b,.st-upgrade-wrap .st-upgrade-card .st-meta span,.st-upgrade-wrap .st-upgrade-card .st-meta strong{padding:3px 5px!important}
  .st-game-wrap .st-power,.st-game-wrap .st-points,.st-game-wrap .st-exp-label{font-size:10px!important}
  .st-game-wrap .st-stats{font-size:10px!important;padding:7px!important;gap:4px 7px!important}
  .st-game-wrap .st-pick-btn,.st-game-wrap .st-upgrade-btn{font-size:10px!important;min-height:34px!important;padding:6px!important}

  .st-upgrade-wrap .st-upgrade-card .st-stars{font-size:16px!important;margin:5px 0!important}
  .st-upgrade-wrap .st-upgrade-card .st-stars .st-star-bonus,
  .st-upgrade-wrap .st-upgrade-card .st-stars small{font-size:9px!important;line-height:1.25!important}
  .st-upgrade-wrap .st-upgrade-card .st-exp-line,
  .st-upgrade-wrap .st-upgrade-card .st-power,
  .st-upgrade-wrap .st-upgrade-card .st-points-big{font-size:10px!important;margin:6px 0!important}
  .st-upgrade-wrap .st-upgrade-card .st-stats{font-size:9.5px!important;line-height:1.3!important;gap:3px 7px!important;padding:7px!important}
  .st-upgrade-wrap .st-upgrade-skills{font-size:10px!important;padding:8px!important;margin-top:7px!important}
  .st-upgrade-wrap .st-upgrade-skill{padding:6px 0!important;line-height:1.35!important}
  .st-upgrade-wrap .st-upgrade-skill strong{font-size:10.5px!important}
  .st-upgrade-wrap .st-upgrade-skill span,
  .st-upgrade-wrap .st-upgrade-skill small{font-size:9.5px!important;line-height:1.35!important}
  .st-upgrade-wrap .st-open-build{font-size:10.5px!important;min-height:34px!important;padding:6px 8px!important}
}
@media (min-width:701px) and (max-width:900px){
  .st-game-wrap .st-grid,
  .st-upgrade-wrap .st-upgrade-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important}
}
@media (max-width:700px){
  .st-game-wrap .st-grid,
  .st-upgrade-wrap .st-upgrade-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Upgrade shortage modal: centered Shop CTA, same dark/gold modal language. */
.st-action-modal-shop{
  display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 16px;border:1px solid #f0a72e;border-radius:10px;
  background:linear-gradient(180deg,#ffb82f,#e87800);color:#fff!important;font-weight:800;text-decoration:none!important;box-shadow:0 5px 14px rgba(226,119,0,.25)
}
.st-action-modal-shop[hidden]{display:none!important}
.st-action-modal-shop:hover{filter:brightness(1.08);color:#fff!important;text-decoration:none!important}