.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.15!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}}
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 Tướng Battle only; existing matchmaking/battle rules remain untouched. */
.hvn-sieu-thu-nav-item>a>span{font-size:16px!important;font-weight:700;line-height:1.15!important}

.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){
  .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>.st-upgrade-art{
  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>.st-upgrade-art{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>.st-upgrade-art{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 bạn” 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}
@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 Chiến Tướng 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 Chiến Tướng 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 Tướng 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 Chiến Tướng 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}

/* Tướng 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>.st-upgrade-art{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 Chiến Tướng 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>.st-upgrade-art{
    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}


/* 0.8.x — Card artwork fills formation/match/battle frames.
   Only LV + Lực chiến are overlaid on artwork; legacy name/class/role rows are intentionally hidden by template changes. */
.st-card-visual{position:relative;overflow:hidden;width:100%;border-radius:inherit;background:#080808;isolation:isolate}
.st-card-visual>img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;object-fit:cover!important;object-position:center!important}
.st-card-overlay{position:absolute;z-index:8;left:5px;right:5px;bottom:5px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;pointer-events:none}
.st-card-overlay span{display:inline-flex;max-width:100%;padding:2px 6px;border-radius:6px;background:rgba(0,0,0,.68);color:#fff!important;font-weight:950;line-height:1.15;text-shadow:0 1px 2px rgba(0,0,0,.9);box-shadow:0 1px 4px rgba(0,0,0,.25);white-space:nowrap}
.st-overlay-level{font-size:11px}.st-overlay-power{font-size:10px}

/* Xếp đội hình: ảnh chiếm toàn bộ khung vàng, nút bỏ vẫn nổi phía trên. */
.st-slot.filled{padding:0!important;overflow:hidden!important;align-items:stretch!important;background:#090909!important}
.st-slot.filled .st-slot-content{height:100%;min-height:180px}
.st-card-visual-formation{height:100%;min-height:180px;border-radius:14px}
.st-card-visual-grid{aspect-ratio:1/1;border-radius:12px;margin:0 auto 6px;max-width:100%}
.st-slot.filled .st-slot-remove{z-index:20;top:6px;right:7px}

/* Tìm trận: card gọn, artwork phủ khung. */
.st-mini-slot:not(.empty){padding:0!important;overflow:hidden!important;justify-content:stretch!important;background:#090909!important}
.st-card-visual-mini{height:148px;min-height:148px;border-radius:11px}
.st-match-wrap .st-card-visual-mini .st-card-overlay span{color:#fff!important}

/* Trong trận: artwork phủ phần card; HP/EXP và hiệu ứng chiến đấu vẫn giữ nguyên bên dưới để không đổi cơ chế. */
.st-battle-slot:not(.empty){padding:0 0 6px!important;overflow:hidden!important}
.st-card-visual-battle{height:94px;border-radius:11px 11px 7px 7px}
.st-battle-slot .st-card-visual-battle>img{width:100%!important;height:100%!important;object-fit:cover!important}
.st-battle-slot .st-effect-layer{z-index:30}
.st-battle-slot .st-status-badges,.st-battle-slot .st-status-pop{z-index:40}

@media(max-width:760px){
  .st-overlay-level{font-size:9px}.st-overlay-power{font-size:8px}
  .st-slot.filled .st-slot-content,.st-card-visual-formation{min-height:96px}
  .st-card-visual-mini{height:100px;min-height:100px}
  .st-card-visual-battle{height:68px}
}
@media(max-width:420px){
  .st-card-overlay{left:3px;right:3px;bottom:3px;gap:1px}
  .st-card-overlay span{padding:2px 4px;border-radius:5px}
  .st-overlay-level{font-size:8px}.st-overlay-power{font-size:7px}
  .st-card-visual-battle{height:62px}
}


/* 0.8.x hotfix — force artwork to truly fill the gold frame in formation/match/battle. */
.st-card-visual{position:relative!important;overflow:hidden!important;width:100%!important;height:100%!important;border-radius:inherit!important;background:#050505!important}
.st-card-art{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;background-repeat:no-repeat!important;background-position:center center!important;background-size:cover!important;z-index:1!important}
.st-card-visual>img{display:none!important}
.st-card-overlay{position:absolute!important;z-index:8!important;left:8px!important;right:8px!important;bottom:8px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:4px!important;pointer-events:none!important}
.st-card-overlay span{display:inline-flex!important;max-width:100%!important;padding:4px 8px!important;border-radius:7px!important;background:rgba(0,0,0,.72)!important;color:#fff!important;font-weight:900!important;line-height:1.12!important;white-space:nowrap!important;box-shadow:0 2px 6px rgba(0,0,0,.28)!important}
.st-overlay-level{font-size:24px!important}.st-overlay-power{font-size:16px!important}
.st-slot.filled{padding:0!important;overflow:hidden!important;align-items:stretch!important;justify-content:stretch!important;background:#070707!important}
.st-slot.filled .st-slot-content{position:relative!important;width:100%!important;height:100%!important;min-height:180px!important;display:block!important}
.st-slot.filled .st-card-visual-formation{position:relative!important;width:100%!important;height:100%!important;min-height:180px!important;border-radius:14px!important}
.st-slot.filled .st-slot-remove{z-index:20!important;top:8px!important;right:8px!important}
.st-mini-slot:not(.empty){padding:0!important;overflow:hidden!important;justify-content:stretch!important;align-items:stretch!important;background:#070707!important}
.st-card-visual-mini{position:relative!important;width:100%!important;height:148px!important;min-height:148px!important;border-radius:11px!important}
.st-battle-slot:not(.empty){padding:0 0 6px!important;overflow:hidden!important}
.st-card-visual-battle{position:relative!important;width:100%!important;height:94px!important;border-radius:11px 11px 7px 7px!important}
@media(max-width:760px){.st-overlay-level{font-size:14px!important}.st-overlay-power{font-size:10px!important}.st-slot.filled .st-slot-content,.st-slot.filled .st-card-visual-formation{min-height:96px!important}.st-card-visual-mini{height:100px!important;min-height:100px!important}.st-card-visual-battle{height:68px!important}}


/* 0.8.x UI refinement — formation/match labels smaller, battle cards square and compact. */
:root{--st-overlay-brown:#c8792c}

/* Xếp đội hình: LV giảm còn khoảng một nửa, Lực chiến nhỏ hơn; cả hai màu cam nâu. */
.st-game-wrap .st-card-visual-formation .st-card-overlay{
  left:7px!important;right:7px!important;bottom:7px!important;gap:2px!important
}
.st-game-wrap .st-card-visual-formation .st-card-overlay span{
  padding:2px 5px!important;background:rgba(8,8,8,.58)!important;color:var(--st-overlay-brown)!important;
  text-shadow:0 1px 2px #000!important;box-shadow:none!important
}
.st-game-wrap .st-card-visual-formation .st-overlay-level{font-size:12px!important;line-height:1!important}
.st-game-wrap .st-card-visual-formation .st-overlay-power{font-size:9px!important;line-height:1!important}

/* Tìm trận: cùng ngôn ngữ hiển thị với xếp đội hình. */
.st-match-wrap .st-card-visual-mini .st-card-overlay{
  left:5px!important;right:5px!important;bottom:5px!important;gap:1px!important
}
.st-match-wrap .st-card-visual-mini .st-card-overlay span{
  padding:2px 4px!important;background:rgba(8,8,8,.56)!important;color:var(--st-overlay-brown)!important;
  text-shadow:0 1px 2px #000!important;box-shadow:none!important
}
.st-match-wrap .st-card-visual-mini .st-overlay-level{font-size:11px!important;line-height:1!important}
.st-match-wrap .st-card-visual-mini .st-overlay-power{font-size:8px!important;line-height:1!important}

/* Trong trận: ảnh full vuông. LV + lực chiến cực nhỏ, nằm sát đáy ảnh. */
.st-battle-wrap .st-battle-slot:not(.empty){
  height:auto!important;min-height:0!important;padding:0 0 5px!important;overflow:hidden!important
}
.st-battle-wrap .st-card-visual-battle{
  position:relative!important;width:100%!important;height:auto!important;min-height:0!important;
  aspect-ratio:1 / 1!important;border-radius:11px 11px 6px 6px!important;overflow:hidden!important
}
.st-battle-wrap .st-card-visual-battle .st-card-art{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important
}
.st-battle-wrap .st-card-visual-battle .st-card-overlay{
  left:4px!important;right:4px!important;bottom:3px!important;gap:1px!important;align-items:flex-start!important
}
.st-battle-wrap .st-card-visual-battle .st-card-overlay span{
  padding:1px 3px!important;border-radius:4px!important;background:rgba(6,6,6,.52)!important;
  color:var(--st-overlay-brown)!important;text-shadow:0 1px 1px #000!important;box-shadow:none!important;
  font-weight:800!important;letter-spacing:0!important
}
.st-battle-wrap .st-card-visual-battle .st-overlay-level{font-size:8px!important;line-height:1!important}
.st-battle-wrap .st-card-visual-battle .st-overlay-power{font-size:6.5px!important;line-height:1!important}

/* Thanh EXP/HP ngắn và mảnh hơn; ẩn số EXP, chỉ giữ số máu. */
.st-battle-wrap .st-own-exp{
  width:calc(100% - 14px)!important;margin:3px auto 1px!important
}
.st-battle-wrap .st-own-expbar{
  width:100%!important;height:3px!important;margin:0 auto!important;border-radius:999px!important
}
.st-battle-wrap .st-own-exp>span{display:none!important}
.st-battle-wrap .st-hpbar{
  width:calc(100% - 14px)!important;height:4px!important;margin:3px auto 1px!important;border-width:1px!important
}
.st-battle-wrap .st-hptext{
  display:block!important;margin:1px auto 0!important;font-size:6.8px!important;line-height:1!important;
  color:#e8dfd0!important;white-space:nowrap!important
}

/* Giữ các hiệu ứng trạng thái/đòn đánh nổi trên card mới. */
.st-battle-wrap .st-effect-layer{z-index:30!important}
.st-battle-wrap .st-status-badges,.st-battle-wrap .st-status-pop{z-index:40!important}

@media(max-width:760px){
  .st-game-wrap .st-card-visual-formation .st-overlay-level{font-size:10px!important}
  .st-game-wrap .st-card-visual-formation .st-overlay-power{font-size:8px!important}
  .st-match-wrap .st-card-visual-mini .st-overlay-level{font-size:9px!important}
  .st-match-wrap .st-card-visual-mini .st-overlay-power{font-size:7px!important}
  .st-battle-wrap .st-card-visual-battle{height:auto!important;aspect-ratio:1 / 1!important}
  .st-battle-wrap .st-card-visual-battle .st-overlay-level{font-size:7px!important}
  .st-battle-wrap .st-card-visual-battle .st-overlay-power{font-size:5.8px!important}
  .st-battle-wrap .st-own-expbar{height:2px!important}
  .st-battle-wrap .st-hpbar{height:3px!important}
  .st-battle-wrap .st-hptext{font-size:6px!important}
}

/* 0.8.x visual tuning — LV/Lực chiến + remove button. CSS-only; battle logic/templates untouched. */
:root{
  --st-label-orange-brown:#a95720;
  --st-label-orange-red:#d86625;
  --st-label-brown-bg:rgba(146,72,25,.80);
}

/* Xếp đội hình: lớn hơn 1.5x, nền nâu cam + viền trắng, nâng lên trên tên in sẵn trên artwork. */
.st-game-wrap .st-card-visual-formation .st-card-overlay{
  left:7px!important;right:7px!important;bottom:34px!important;gap:3px!important;
}
.st-game-wrap .st-card-visual-formation .st-card-overlay span{
  padding:2px 6px!important;
  background:var(--st-label-brown-bg)!important;
  color:#fff3e8!important;
  border:1px solid rgba(255,255,255,.92)!important;
  border-radius:5px!important;
  text-shadow:0 1px 1px rgba(75,25,0,.9)!important;
  box-shadow:0 1px 3px rgba(0,0,0,.28)!important;
  font-weight:850!important;
}
.st-game-wrap .st-card-visual-formation .st-overlay-level{font-size:18px!important;line-height:1!important}
.st-game-wrap .st-card-visual-formation .st-overlay-power{font-size:13.5px!important;line-height:1!important}

/* Tìm trận: lớn hơn 1.5x, cùng nền nâu cam + viền trắng, nâng khỏi đáy. */
.st-match-wrap .st-card-visual-mini .st-card-overlay{
  left:5px!important;right:5px!important;bottom:28px!important;gap:2px!important;
}
.st-match-wrap .st-card-visual-mini .st-card-overlay span{
  padding:2px 5px!important;
  background:var(--st-label-brown-bg)!important;
  color:#fff3e8!important;
  border:1px solid rgba(255,255,255,.92)!important;
  border-radius:5px!important;
  text-shadow:0 1px 1px rgba(75,25,0,.9)!important;
  box-shadow:0 1px 3px rgba(0,0,0,.28)!important;
  font-weight:850!important;
}
.st-match-wrap .st-card-visual-mini .st-overlay-level{font-size:16.5px!important;line-height:1!important}
.st-match-wrap .st-card-visual-mini .st-overlay-power{font-size:12px!important;line-height:1!important}

/* Trong trận: gấp đôi bản tinh gọn, chữ cam đỏ có viền trắng; nâng lên trên tên nhân vật. */
.st-battle-wrap .st-card-visual-battle .st-card-overlay{
  left:5px!important;right:5px!important;bottom:26px!important;gap:2px!important;
}
.st-battle-wrap .st-card-visual-battle .st-card-overlay span{
  padding:0 2px!important;
  background:rgba(0,0,0,.26)!important;
  color:var(--st-label-orange-red)!important;
  border:0!important;
  border-radius:3px!important;
  -webkit-text-stroke:.45px #fff!important;
  paint-order:stroke fill!important;
  text-shadow:0 1px 2px rgba(0,0,0,.95)!important;
  box-shadow:none!important;
  font-weight:900!important;
}
.st-battle-wrap .st-card-visual-battle .st-overlay-level{font-size:16px!important;line-height:1.02!important}
.st-battle-wrap .st-card-visual-battle .st-overlay-power{font-size:13px!important;line-height:1.02!important}

/* Nút X: nhỏ, đen trong suốt, chữ trắng; giảm cảm giác thô. */
.st-game-wrap .st-slot.filled .st-slot-remove{
  z-index:25!important;
  top:6px!important;right:6px!important;
  width:23px!important;height:23px!important;min-width:23px!important;min-height:23px!important;
  padding:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid rgba(255,255,255,.38)!important;
  border-radius:50%!important;
  background:rgba(0,0,0,.54)!important;
  color:#fff!important;
  font-size:15px!important;line-height:1!important;font-weight:700!important;
  text-shadow:0 1px 1px rgba(0,0,0,.8)!important;
  box-shadow:0 1px 4px rgba(0,0,0,.32)!important;
  backdrop-filter:blur(2px);
  transform:none!important;
}
.st-game-wrap .st-slot.filled .st-slot-remove:hover{
  background:rgba(0,0,0,.70)!important;
  border-color:rgba(255,255,255,.62)!important;
}

@media(max-width:760px){
  .st-game-wrap .st-card-visual-formation .st-card-overlay{bottom:24px!important}
  .st-game-wrap .st-card-visual-formation .st-overlay-level{font-size:15px!important}
  .st-game-wrap .st-card-visual-formation .st-overlay-power{font-size:11px!important}
  .st-match-wrap .st-card-visual-mini .st-card-overlay{bottom:20px!important}
  .st-match-wrap .st-card-visual-mini .st-overlay-level{font-size:13.5px!important}
  .st-match-wrap .st-card-visual-mini .st-overlay-power{font-size:10px!important}
  .st-battle-wrap .st-card-visual-battle .st-card-overlay{bottom:19px!important}
  .st-battle-wrap .st-card-visual-battle .st-overlay-level{font-size:13px!important}
  .st-battle-wrap .st-card-visual-battle .st-overlay-power{font-size:10.5px!important}
  .st-game-wrap .st-slot.filled .st-slot-remove{width:21px!important;height:21px!important;min-width:21px!important;min-height:21px!important;font-size:13px!important;top:4px!important;right:4px!important}
}


/* Rank tab + final card label tuning */
.st-game-wrap .st-card-visual-formation .st-overlay-level,.st-match-wrap .st-card-visual-mini .st-overlay-level{font-size:9px!important}
.st-game-wrap .st-card-visual-formation .st-overlay-power{font-size:11.5px!important}
.st-match-wrap .st-card-visual-mini .st-overlay-power{font-size:10.5px!important}
.st-battle-wrap .st-card-visual-battle .st-overlay-level{font-size:8px!important}
.st-battle-wrap .st-card-visual-battle .st-overlay-power{font-size:11px!important}
.st-rank-view[hidden],#st-match-view[hidden]{display:none!important}
.st-rank-view{margin-top:12px}
.st-rank-view-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid #9b6c08;border-radius:14px;background:#11100d}
.st-rank-view-head h2{margin:0 0 5px;color:#f2b32e}.st-rank-view-head p{margin:0}.st-rank-back{color:#f2b32e;font-weight:800;text-decoration:none}
.st-rank-tab-panels{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin-top:12px!important}
.st-rank-tab-panels>section{min-width:0}
.st-rank-row.is-me{background:rgba(240,157,20,.12);border-radius:8px;padding-left:7px;padding-right:7px}.st-rank-row em{font-style:normal;color:#f0a51d;font-size:.9em}
.st-rank-extra{display:none!important}.show-rank-50 .st-rank-extra{display:flex!important}
.st-rank-more{display:block;margin:12px auto 2px;border:1px solid #b67a11;border-radius:9px;background:#211708;color:#f0b43e;padding:7px 12px;font-weight:800;cursor:pointer}
.st-rank-history-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.st-rank-history-row>div{min-width:0}.st-rank-history-row b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.st-rank-history-row small{opacity:.72}.st-rank-result{font-size:11px;border-radius:999px;padding:2px 7px}.st-rank-result.win{color:#5bd57e;background:rgba(44,150,76,.16)}.st-rank-result.loss{color:#ff6b6b;background:rgba(180,50,50,.17)}.st-rank-result.draw{color:#d4c67b;background:rgba(170,150,60,.14)}.st-rank-exp{font-size:11px;opacity:.85}
@media(max-width:760px){.st-rank-tab-panels{grid-template-columns:1fr!important}.st-rank-view-head{flex-direction:column}.st-rank-history-row{grid-template-columns:minmax(0,1fr) auto auto}.st-rank-exp{grid-column:2/4;text-align:right}.st-game-wrap .st-card-visual-formation .st-overlay-level,.st-match-wrap .st-card-visual-mini .st-overlay-level{font-size:8px!important}.st-game-wrap .st-card-visual-formation .st-overlay-power{font-size:9.5px!important}.st-match-wrap .st-card-visual-mini .st-overlay-power{font-size:9px!important}.st-battle-wrap .st-card-visual-battle .st-overlay-level{font-size:7px!important}.st-battle-wrap .st-card-visual-battle .st-overlay-power{font-size:9px!important}}

.st-my-rank-line{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:10px;padding:9px 8px;border-top:1px solid rgba(240,180,62,.38);border-bottom:1px solid rgba(240,180,62,.24);background:rgba(240,157,20,.08);border-radius:7px}.st-my-rank-line b{color:#f0b43e}.st-my-rank-line span{white-space:nowrap}@media(max-width:520px){.st-my-rank-line{align-items:flex-start;flex-direction:column}.st-my-rank-line span{white-space:normal}}


/* 0.8.x — Hiển thị sao cường hóa trực tiếp trên ảnh Tướng ở Đội hình / Tìm trận / Trong trận. */
.st-game-wrap .st-card-visual-formation .st-card-stars,
.st-match-wrap .st-card-visual-mini .st-card-stars,
.st-battle-wrap .st-card-visual-battle .st-card-stars{
  position:absolute!important;
  z-index:18!important;
  top:5px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:max-content!important;
  max-width:calc(100% - 46px)!important;
  padding:2px 5px!important;
  border:1px solid rgba(255,221,112,.72)!important;
  border-radius:999px!important;
  background:rgba(0,0,0,.46)!important;
  color:#ffd54a!important;
  font-size:12px!important;
  line-height:1!important;
  letter-spacing:1px!important;
  font-weight:900!important;
  white-space:nowrap!important;
  text-shadow:0 1px 2px #000,0 0 5px rgba(255,190,38,.45)!important;
  box-shadow:0 1px 4px rgba(0,0,0,.28)!important;
  pointer-events:none!important;
}
/* Trong trận giữ sao gọn để không lấn hiệu ứng trạng thái. */
.st-battle-wrap .st-card-visual-battle .st-card-stars{
  z-index:19!important;
  top:3px!important;
  padding:1px 4px!important;
  font-size:9px!important;
  letter-spacing:.5px!important;
  max-width:calc(100% - 18px)!important;
}
@media(max-width:760px){
  .st-game-wrap .st-card-visual-formation .st-card-stars,
  .st-match-wrap .st-card-visual-mini .st-card-stars{top:3px!important;font-size:9px!important;padding:1px 4px!important;letter-spacing:.5px!important}
  .st-battle-wrap .st-card-visual-battle .st-card-stars{top:2px!important;font-size:7px!important;padding:1px 3px!important}
}

/* 0.8.x — Tinh chỉnh nhãn LV/Lực chiến: chữ nâu đen, nền trắng trong suốt, LV nhỉnh hơn một chút. */
.st-game-wrap .st-card-visual-formation .st-card-overlay span,
.st-match-wrap .st-card-visual-mini .st-card-overlay span,
.st-battle-wrap .st-card-visual-battle .st-card-overlay span{
  background:rgba(255,255,255,.42)!important;
  color:#4a2a18!important;
  border:1px solid rgba(255,255,255,.78)!important;
  -webkit-text-stroke:0!important;
  text-shadow:0 1px 1px rgba(255,255,255,.45),0 1px 2px rgba(0,0,0,.22)!important;
  box-shadow:0 1px 3px rgba(0,0,0,.14)!important;
  backdrop-filter:blur(1px);
}
/* LV chỉ tăng nhẹ so với bản hiện tại. */
.st-game-wrap .st-card-visual-formation .st-overlay-level{font-size:10px!important}
.st-match-wrap .st-card-visual-mini .st-overlay-level{font-size:10px!important}
.st-battle-wrap .st-card-visual-battle .st-overlay-level{font-size:9px!important}

@media(max-width:760px){
  .st-game-wrap .st-card-visual-formation .st-overlay-level{font-size:9px!important}
  .st-match-wrap .st-card-visual-mini .st-overlay-level{font-size:9px!important}
  .st-battle-wrap .st-card-visual-battle .st-overlay-level{font-size:8px!important}
}

/* 0.8.x — readability tweak: bolder deep blue-violet labels for LV and Power. */
.st-game-wrap .st-card-visual-formation .st-card-overlay span,
.st-match-wrap .st-card-visual-mini .st-card-overlay span,
.st-battle-wrap .st-card-visual-battle .st-card-overlay span{
  color:#2f2d78!important;
  font-weight:950!important;
  text-shadow:0 1px 0 rgba(255,255,255,.72), 0 0 1px rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.22)!important;
  border-color:rgba(255,255,255,.84)!important;
}

/* 0.8.x — Final LV/Power readability: no label background, dark blue-violet fill, bold + 2px white text stroke. */
.st-game-wrap .st-card-visual-formation .st-card-overlay span,
.st-match-wrap .st-card-visual-mini .st-card-overlay span,
.st-battle-wrap .st-card-visual-battle .st-card-overlay span{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  padding:0!important;
  border-radius:0!important;
  color:#29256f!important;
  font-weight:1000!important;
  -webkit-text-stroke:2px rgba(255,255,255,.96)!important;
  paint-order:stroke fill!important;
  text-shadow:0 1px 2px rgba(0,0,0,.35)!important;
}
/* Tăng nhẹ kích thước, giữ nguyên vị trí đã chốt. */
.st-game-wrap .st-card-visual-formation .st-overlay-level{font-size:11px!important}
.st-game-wrap .st-card-visual-formation .st-overlay-power{font-size:12.5px!important}
.st-match-wrap .st-card-visual-mini .st-overlay-level{font-size:11px!important}
.st-match-wrap .st-card-visual-mini .st-overlay-power{font-size:11.5px!important}
.st-battle-wrap .st-card-visual-battle .st-overlay-level{font-size:10px!important}
.st-battle-wrap .st-card-visual-battle .st-overlay-power{font-size:12px!important}

@media(max-width:760px){
  .st-game-wrap .st-card-visual-formation .st-overlay-level{font-size:10px!important}
  .st-game-wrap .st-card-visual-formation .st-overlay-power{font-size:10.5px!important}
  .st-match-wrap .st-card-visual-mini .st-overlay-level{font-size:10px!important}
  .st-match-wrap .st-card-visual-mini .st-overlay-power{font-size:10px!important}
  .st-battle-wrap .st-card-visual-battle .st-overlay-level{font-size:9px!important}
  .st-battle-wrap .st-card-visual-battle .st-overlay-power{font-size:10.5px!important}
}

/* 0.8.x — UI polish: move remove button to bottom-right so it does not cover role icon. */
.st-game-wrap .st-slot.filled .st-slot-remove{
  top:auto!important;
  right:6px!important;
  bottom:6px!important;
}
@media(max-width:760px){
  .st-game-wrap .st-slot.filled .st-slot-remove{
    top:auto!important;
    right:4px!important;
    bottom:4px!important;
  }
}

/* 0.8.x — Rank history alignment: fixed columns for opponent/result/rating/EXP. */
.st-rank-history-row{
  grid-template-columns:minmax(0,1fr) 64px 72px 72px!important;
  column-gap:10px!important;
  row-gap:2px!important;
  align-items:center!important;
}
.st-rank-history-row>div:first-child{min-width:0!important}
.st-rank-history-row>div:first-child b,
.st-rank-history-row>div:first-child small{display:block!important;text-align:left!important}
.st-rank-history-row .st-rank-result{
  justify-self:center!important;
  min-width:50px!important;
  text-align:center!important;
  box-sizing:border-box!important;
}
.st-rank-history-row>span:nth-of-type(1){
  justify-self:end!important;
  text-align:right!important;
  white-space:nowrap!important;
  font-variant-numeric:tabular-nums!important;
}
.st-rank-history-row .st-rank-exp{
  justify-self:end!important;
  text-align:right!important;
  white-space:nowrap!important;
  font-variant-numeric:tabular-nums!important;
}
@media(max-width:560px){
  .st-rank-history-row{
    grid-template-columns:minmax(0,1fr) 58px 64px 66px!important;
    column-gap:6px!important;
  }
  .st-rank-history-row .st-rank-result{min-width:46px!important;padding-left:5px!important;padding-right:5px!important}
  .st-rank-history-row>span:nth-of-type(1),
  .st-rank-history-row .st-rank-exp{font-size:10px!important}
}
@media(max-width:390px){
  .st-rank-history-row{
    grid-template-columns:minmax(0,1fr) 58px 62px!important;
  }
  .st-rank-history-row .st-rank-exp{
    grid-column:2/4!important;
    justify-self:end!important;
    margin-top:2px!important;
  }
}

/* 0.8.x — final label treatment: white text with 2px brown stroke; no background box. */
.st-game-wrap .st-card-visual-formation .st-card-overlay span,
.st-match-wrap .st-card-visual-mini .st-card-overlay span,
.st-battle-wrap .st-card-visual-battle .st-card-overlay span{
  background:transparent!important;
  color:#ffffff!important;
  border:0!important;
  box-shadow:none!important;
  font-weight:950!important;
  -webkit-text-stroke:2px #6b3b1f!important;
  paint-order:stroke fill!important;
  text-shadow:0 1px 1px rgba(0,0,0,.28)!important;
  backdrop-filter:none!important;
}

/* 0.8.x — tiny upward nudge for LV/Power labels so they do not overlap the printed character name. Position only. */
.st-game-wrap .st-card-visual-formation .st-card-overlay{bottom:39px!important}
.st-match-wrap .st-card-visual-mini .st-card-overlay{bottom:33px!important}
.st-battle-wrap .st-card-visual-battle .st-card-overlay{bottom:31px!important}
@media(max-width:760px){
  .st-game-wrap .st-card-visual-formation .st-card-overlay{bottom:27px!important}
  .st-match-wrap .st-card-visual-mini .st-card-overlay{bottom:23px!important}
  .st-battle-wrap .st-card-visual-battle .st-card-overlay{bottom:22px!important}
}

/* 0.8.x — nudge LV/Power labels slightly higher again; position only. */
.st-game-wrap .st-card-visual-formation .st-card-overlay{bottom:44px!important}
.st-match-wrap .st-card-visual-mini .st-card-overlay{bottom:38px!important}
.st-battle-wrap .st-card-visual-battle .st-card-overlay{bottom:36px!important}
@media(max-width:760px){
  .st-game-wrap .st-card-visual-formation .st-card-overlay{bottom:30px!important}
  .st-match-wrap .st-card-visual-mini .st-card-overlay{bottom:26px!important}
  .st-battle-wrap .st-card-visual-battle .st-card-overlay{bottom:25px!important}
}


/* 0.8.27 — Chuẩn hóa VFX “người lớn”: giảm vòng tròn ở tâm, tăng cảm giác va chạm,
   hiệu ứng trạng thái bám trên thẻ theo từng cơ chế. */
.st-card-state-layer{position:absolute;inset:0;z-index:124;pointer-events:none;overflow:visible;border-radius:inherit}
.st-state-fx{position:absolute;pointer-events:none}

/* Đòn đánh thường: thay core tròn bằng flash viền + vệt xé cạnh. */
.st-battle-wrap .st-attack-launch-flare{position:absolute;inset:-8%;z-index:188;pointer-events:none;overflow:visible;border-radius:18%;mix-blend-mode:screen;animation:stLaunchEdgeFade .42s cubic-bezier(.16,.78,.24,1) both}
.st-battle-wrap .st-attack-launch-flare .edge{position:absolute;top:10%;bottom:10%;width:18%;border-radius:18px;background:linear-gradient(180deg,rgba(255,244,206,0) 0%,rgba(255,238,167,.85) 18%,rgba(255,158,56,.88) 54%,rgba(220,48,10,.18) 100%);filter:blur(6px);opacity:0;animation:stLaunchEdge .40s ease-out both}
.st-battle-wrap .st-attack-launch-flare .edge-left{left:-2%;transform:skewX(-18deg)}
.st-battle-wrap .st-attack-launch-flare .edge-right{right:-2%;transform:skewX(18deg)}
.st-battle-wrap .st-attack-launch-flare .trail{position:absolute;left:10%;right:10%;top:48%;height:16px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,245,212,.98) 18%,rgba(255,167,58,.86) 48%,rgba(222,51,10,.00) 92%);filter:blur(3px);transform:translateY(-50%) skewX(-30deg) scaleX(.35);opacity:0;animation:stLaunchTrail .42s cubic-bezier(.10,.75,.16,1) both}
.st-battle-wrap .st-attack-launch-flare .gleam{position:absolute;top:26%;width:46%;height:3px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,249,228,.95),rgba(255,179,71,.0));box-shadow:0 0 8px rgba(255,212,100,.65);opacity:0}
.st-battle-wrap .st-attack-launch-flare .g1{left:22%;transform:rotate(26deg);animation:stLaunchGleam1 .42s ease-out both}
.st-battle-wrap .st-attack-launch-flare .g2{right:14%;top:60%;transform:rotate(-22deg);animation:stLaunchGleam2 .42s ease-out both}
.st-battle-wrap .st-attack-launch-flare.strong{filter:saturate(1.14) brightness(1.12)}
@keyframes stLaunchEdgeFade{0%{opacity:0}16%{opacity:1}70%{opacity:.86}100%{opacity:0}}
@keyframes stLaunchEdge{0%{opacity:0;transform:translateX(0) scaleY(.72)}28%{opacity:1;transform:translateX(0) scaleY(1.04)}100%{opacity:0;transform:translateX(0) scaleY(1.18)}}
@keyframes stLaunchTrail{0%{opacity:0;transform:translateY(-50%) skewX(-32deg) scaleX(.24)}24%{opacity:1;transform:translateY(-50%) skewX(-28deg) scaleX(.95)}100%{opacity:0;transform:translateY(-50%) skewX(-24deg) scaleX(1.22)}}
@keyframes stLaunchGleam1{0%{opacity:0;transform:rotate(26deg) scaleX(.3)}26%{opacity:.9;transform:rotate(26deg) scaleX(1)}100%{opacity:0;transform:rotate(26deg) scaleX(1.1)}}
@keyframes stLaunchGleam2{0%{opacity:0;transform:rotate(-22deg) scaleX(.3)}26%{opacity:.85;transform:rotate(-22deg) scaleX(1)}100%{opacity:0;transform:rotate(-22deg) scaleX(1.08)}}

/* Choáng / ngủ: tinh tế hơn, không hoạt hình trẻ con. */
.st-battle-slot.status-frozen{filter:saturate(.92) brightness(1.02)!important;box-shadow:0 0 0 1px rgba(255,224,143,.78),0 0 16px 4px rgba(255,204,77,.26)!important}
.st-battle-slot.status-frozen:after{content:"";position:absolute;z-index:52;left:18%;right:18%;top:8%;height:20%;border-radius:999px;border:2px solid rgba(255,214,78,.75);border-left-color:rgba(255,245,186,.92);border-right-color:rgba(202,122,255,.48);box-shadow:0 0 12px rgba(255,214,72,.34);animation:stStunHalo 1s linear infinite;background:radial-gradient(circle at 50% 50%,rgba(255,236,160,.20),transparent 62%)}
@keyframes stStunHalo{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.st-battle-slot.status-sleeping{filter:saturate(.85) brightness(.94)!important}
.st-battle-slot.status-sleeping:after{content:"Z Z";position:absolute;z-index:52;right:10px;top:18px;font-size:16px;font-weight:900;letter-spacing:1px;color:#cbbaf5;text-shadow:0 0 7px rgba(126,102,214,.92),0 0 14px rgba(255,255,255,.45);animation:stSleepFloatAdult 1.2s ease-in-out infinite alternate;pointer-events:none}
.st-battle-slot.status-sleeping:before{content:"";position:absolute;z-index:51;left:24%;right:24%;top:10%;height:22%;border-radius:999px;background:radial-gradient(ellipse at center,rgba(131,109,205,.24),rgba(63,50,123,.16) 52%,transparent 76%);filter:blur(4px);pointer-events:none}
@keyframes stSleepFloatAdult{from{transform:translateY(4px);opacity:.52}to{transform:translateY(-6px);opacity:.98}}
.st-battle-slot.stun-halo:after,.st-battle-slot.sleep-haze:after{animation-duration:.74s!important}

/* Khiên/Bất Khuất: khối cầu năng lượng kiểu mana shield bao quanh thẻ. */
.st-fx-shield-bubble{inset:-5%;z-index:18}
.st-fx-shield-bubble .orb,.st-fx-shield-bubble .sheen,.st-fx-shield-bubble .rim{position:absolute;inset:0;border-radius:18px}
.st-fx-shield-bubble .orb{background:radial-gradient(circle at 50% 42%,rgba(219,255,250,.18) 0%,rgba(91,238,220,.22) 34%,rgba(16,177,160,.18) 62%,rgba(4,67,66,.07) 100%);box-shadow:inset 0 0 30px rgba(73,236,215,.30),0 0 20px rgba(18,190,174,.24);backdrop-filter:blur(1.5px);animation:stShieldBreathAdult 1.45s ease-in-out infinite alternate}
.st-fx-shield-bubble .sheen{background:linear-gradient(118deg,rgba(255,255,255,.0) 10%,rgba(226,255,251,.24) 28%,rgba(116,255,235,.07) 46%,rgba(255,255,255,.0) 60%);transform:translateX(-20%) skewX(-16deg);animation:stShieldSweepAdult 2.1s ease-in-out infinite}
.st-fx-shield-bubble .rim{border:2px solid rgba(102,244,224,.64);box-shadow:0 0 0 1px rgba(231,255,251,.10),0 0 18px rgba(24,205,184,.38),inset 0 0 12px rgba(107,255,234,.10)}
@keyframes stShieldBreathAdult{from{opacity:.72;transform:scale(.992)}to{opacity:.96;transform:scale(1.01)}}
@keyframes stShieldSweepAdult{0%{opacity:0;transform:translateX(-32%) skewX(-16deg)}18%{opacity:1}52%{opacity:.72}100%{opacity:0;transform:translateX(36%) skewX(-16deg)}}

/* Phá giáp: vỡ mảng giáp + giữ vết nứt nhẹ đến hết lượt. */
.st-fx-armor-break{inset:2px;z-index:26;mix-blend-mode:screen}
.st-fx-armor-break .crack{position:absolute;background:linear-gradient(180deg,rgba(255,247,234,.92),rgba(255,164,110,.9) 35%,rgba(130,25,8,.0));width:3px;border-radius:99px;box-shadow:0 0 6px rgba(255,206,180,.32)}
.st-fx-armor-break .c1{left:48%;top:16%;height:64%;transform:rotate(16deg)}
.st-fx-armor-break .c2{left:36%;top:28%;height:36%;transform:rotate(-38deg)}
.st-fx-armor-break .c3{left:55%;top:42%;height:28%;transform:rotate(40deg)}
.st-fx-armor-break .debris{position:absolute;width:8px;height:8px;border-radius:2px;background:linear-gradient(135deg,rgba(255,243,230,.9),rgba(171,89,62,.55));box-shadow:0 0 8px rgba(255,170,102,.28);animation:stArmorShard .72s ease-out forwards}
.st-fx-armor-break .d1{left:40%;top:44%;--tx:-22px;--ty:-12px;--rot:-26deg}
.st-fx-armor-break .d2{left:54%;top:40%;--tx:24px;--ty:-10px;--rot:32deg}
.st-fx-armor-break .d3{left:50%;top:52%;--tx:12px;--ty:18px;--rot:22deg}
.st-fx-armor-break.is-enter .debris{animation:stArmorShard .72s ease-out forwards}
@keyframes stArmorShard{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.45)}18%{opacity:1}100%{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(1)}}

/* Buff/Debuff: dùng sigil mép thẻ, không aura lớn giữa tâm. */
.st-fx-side-sigil{top:18%;width:20px;height:20px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;box-shadow:0 0 10px rgba(0,0,0,.18)}
.st-fx-side-sigil b{transform:translateY(-.5px)}
.st-fx-side-sigil.atk-up,.st-fx-side-sigil.atk-down{left:-6px}
.st-fx-side-sigil.def-up,.st-fx-side-sigil.def-down{right:-6px;top:38%}
.st-fx-side-sigil.crit-up,.st-fx-side-sigil.crit-down{right:-4px;top:12%}
.st-fx-side-sigil.atk-up{background:linear-gradient(180deg,#ffd890,#ff7a34);color:#6d1800;border:1px solid rgba(255,240,201,.7)}
.st-fx-side-sigil.def-up{background:linear-gradient(180deg,#d9f4ff,#60b9ff);color:#083556;border:1px solid rgba(235,251,255,.7)}
.st-fx-side-sigil.crit-up{background:linear-gradient(180deg,#fff6c6,#ffc843);color:#6d4300;border:1px solid rgba(255,252,214,.85)}
.st-fx-side-sigil.atk-down,.st-fx-side-sigil.def-down,.st-fx-side-sigil.crit-down{background:linear-gradient(180deg,#6d2026,#2e0e13);color:#ffdbe0;border:1px solid rgba(255,123,145,.48)}
.st-fx-side-sigil.atk-down:after,.st-fx-side-sigil.def-down:after,.st-fx-side-sigil.crit-down:after{content:"↓";position:absolute;right:-5px;bottom:-8px;font-size:12px;font-weight:1000;color:#ff9aa5;text-shadow:0 0 5px rgba(255,72,103,.45)}
.st-fx-side-sigil.is-enter{animation:stSigilPulse .66s ease-out}
@keyframes stSigilPulse{0%{transform:scale(.5);opacity:0}24%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}

/* Kháng khống chế / giải khống chế */
.st-fx-control-immune{inset:0;z-index:22}
.st-fx-control-immune .ring{position:absolute;left:24%;right:24%;top:10%;height:18%;border-radius:999px;border:2px solid rgba(202,255,230,.76);box-shadow:0 0 12px rgba(104,255,192,.24);animation:stImmuneHalo 1.2s linear infinite}
.st-fx-control-immune .glyph{position:absolute;right:6px;top:10px;font-size:12px;color:#d8fff1;text-shadow:0 0 8px rgba(132,255,216,.42)}
@keyframes stImmuneHalo{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Chiến ý: vạch chiến binh mép dưới, tối giản. */
.st-fx-battle-spirit{left:10px;right:10px;bottom:12px;height:8px;display:flex;gap:5px;justify-content:center;align-items:center}
.st-fx-battle-spirit .mark{width:24px;height:4px;border-radius:999px;background:linear-gradient(90deg,rgba(130,44,8,.15),rgba(255,182,72,.95),rgba(126,38,8,.15));box-shadow:0 0 8px rgba(255,168,70,.4)}
.st-fx-battle-spirit .m2,.st-fx-battle-spirit .m3{opacity:.55}
.st-fx-battle-spirit.is-enter{animation:stSpiritRise .66s ease-out}
@keyframes stSpiritRise{0%{opacity:0;transform:translateY(5px)}35%{opacity:1;transform:translateY(0)}100%{opacity:1}}

/* Chips gọn hơn, bớt trẻ con. */
.st-status-badges{top:auto;bottom:5px;left:7px;right:7px;justify-content:flex-start;gap:4px}
.st-status-chip{padding:2px 6px;border-radius:999px;background:rgba(18,20,28,.84);backdrop-filter:blur(2px);font-size:8px;letter-spacing:.2px;border:1px solid rgba(255,255,255,.06)}
.st-status-chip.buff{background:rgba(21,79,115,.84)}
.st-status-chip.debuff{background:rgba(96,24,37,.84)}
.st-status-chip.shield{background:rgba(28,96,126,.88)}
.st-status-chip.stun{background:rgba(133,96,12,.92);color:#fff5cc}
.st-status-chip.sleep{background:rgba(79,57,136,.92)}

/* Mobile tune */
@media(max-width:700px){
  .st-fx-side-sigil{width:16px;height:16px;font-size:10px}
  .st-status-badges{bottom:4px;left:4px;right:4px;gap:3px}
  .st-status-chip{font-size:7px;padding:1px 4px}
  .st-battle-wrap .st-attack-launch-flare{inset:-5%}
}


/* 0.8.28 — VFX event bridge & clutter control */
.st-status-chip[hidden]{display:none!important}
.st-status-chip.st-status-more{background:rgba(12,14,20,.92);color:#d9dce5;border-color:rgba(255,255,255,.12);min-width:22px;justify-content:center}
.st-status-chip.counter-progress{background:rgba(83,48,28,.9);color:#ffd7a0;border-color:rgba(255,180,86,.28)}
.st-status-chip.counter-progress.ready{animation:stCounterReady .58s ease-out;box-shadow:0 0 12px rgba(255,116,35,.58)}
@keyframes stCounterReady{0%{transform:scale(.85)}28%{transform:scale(1.18)}100%{transform:scale(1)}}
/* Bất Khuất/Khiên chỉ dùng cầu năng lượng mới; vô hiệu pseudo cũ nếu cache CSS cũ còn sót. */
.st-battle-slot.shielded:before{content:none!important;display:none!important}
.st-team-shield-veil{display:none!important}
/* Chiến Ý: số vạch sáng đúng theo số tầng engine gửi. */
.st-fx-battle-spirit .mark{opacity:.18;filter:saturate(.65)}
.st-fx-battle-spirit .mark.active{opacity:1;filter:none;box-shadow:0 0 9px rgba(255,168,70,.58)}
/* Phá giáp giữ vết nứt trong nhịp hành động, debris chỉ bắn một lần. */
.st-fx-armor-break{animation:stArmorBreakHold .95s ease-out both}
@keyframes stArmorBreakHold{0%{opacity:0}12%{opacity:1}78%{opacity:.78}100%{opacity:0}}

.st-fx-battle-spirit .m4,.st-fx-battle-spirit .m5{opacity:.18}


/* 0.8.29 — tone màu nhanh theo cơ chế, giúp đọc trận rõ hơn mà không rối. */
.st-battle-slot.tone-control::before,
.st-battle-slot.tone-atk::before,
.st-battle-slot.tone-def::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:18;mix-blend-mode:screen;animation:stTonePulse .92s ease-out both}
.st-battle-slot.tone-control::before{background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(233,240,255,.18) 40%,rgba(255,255,255,.05));box-shadow:inset 0 0 26px rgba(255,255,255,.22),0 0 10px rgba(255,255,255,.18)}
.st-battle-slot.tone-atk::before{background:linear-gradient(180deg,rgba(255,98,164,.24),rgba(111,44,157,.18) 48%,rgba(255,77,111,.08));box-shadow:inset 0 0 28px rgba(210,76,188,.24),0 0 12px rgba(174,57,157,.20)}
.st-battle-slot.tone-def::before{background:linear-gradient(180deg,rgba(88,181,255,.22),rgba(32,104,255,.18) 48%,rgba(73,196,255,.06));box-shadow:inset 0 0 28px rgba(71,173,255,.24),0 0 12px rgba(73,146,255,.20)}
@keyframes stTonePulse{0%{opacity:0;transform:scale(.985)}16%{opacity:1}72%{opacity:.78}100%{opacity:0;transform:scale(1)}}
.st-status-chip.counter-progress.ready{background:rgba(123,58,18,.95);color:#ffe3b5;border-color:rgba(255,180,87,.45)}

/* 0.8.30 — hệ sao linh động, giới hạn do ACP quyết định */
.st-star-glyphs{display:inline-block;letter-spacing:1px;white-space:normal;max-width:100%;line-height:1.05;color:#ffc400;text-shadow:0 0 3px #fff4a6,0 0 7px rgba(255,174,0,.70)}
.st-stars.maxed .st-star-glyphs{color:#ffd52a;text-shadow:0 0 4px #fffbd4,0 0 9px #ffc400,0 0 14px rgba(255,153,0,.72)}
.st-stars.compact .st-star-glyphs{font-size:.86em;letter-spacing:.5px}
@media(max-width:720px){.st-star-glyphs{letter-spacing:.35px}}


/* 0.8.31 — Physical charge: absolutely no circular charge/rune for attack, crit, counter. */
.st-physical-charge{position:absolute;inset:-5%;z-index:192;pointer-events:none;overflow:visible;border-radius:inherit;mix-blend-mode:screen;animation:stPhysicalChargeFade .30s ease-out both}
.st-physical-charge .edge{position:absolute;top:8%;bottom:8%;width:12%;border-radius:8px;background:linear-gradient(180deg,transparent,rgba(255,247,213,.96) 22%,rgba(255,163,54,.88) 56%,rgba(213,45,12,.06) 100%);filter:blur(4px);opacity:0;animation:stPhysicalEdge .30s cubic-bezier(.14,.75,.22,1) both}
.st-physical-charge .e1{left:-1%;transform:skewX(-18deg)}
.st-physical-charge .e2{right:-1%;transform:skewX(18deg)}
.st-physical-charge .slash{position:absolute;left:12%;right:10%;top:49%;height:4px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,249,222,.98) 18%,rgba(255,173,63,.94) 48%,rgba(224,49,13,.20) 76%,transparent);box-shadow:0 0 7px rgba(255,179,68,.72);transform:rotate(-17deg) scaleX(.25);transform-origin:center;opacity:0;animation:stPhysicalSlash .30s cubic-bezier(.12,.78,.18,1) both}
.st-physical-charge-crit .slash,.st-physical-charge-counter .slash{height:5px;box-shadow:0 0 10px rgba(255,176,56,.88),0 0 18px rgba(218,45,18,.35)}
@keyframes stPhysicalChargeFade{0%{opacity:0}18%{opacity:1}72%{opacity:.92}100%{opacity:0}}
@keyframes stPhysicalEdge{0%{opacity:0;transform:scaleY(.65)}26%{opacity:1;transform:scaleY(1.04)}100%{opacity:0;transform:scaleY(1.12)}}
@keyframes stPhysicalSlash{0%{opacity:0;transform:rotate(-17deg) scaleX(.18)}24%{opacity:1;transform:rotate(-17deg) scaleX(1)}100%{opacity:0;transform:rotate(-17deg) scaleX(1.16)}}


/* 0.8.41 — trạng thái lớn, xếp gọn trong thẻ + nhật ký trận đấu */
.st-battle-wrap .st-status-badges{position:absolute!important;z-index:148!important;left:4px!important;right:4px!important;top:4px!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:3px!important;align-items:start!important;pointer-events:none!important}
.st-battle-wrap .st-status-chip{display:flex!important;justify-content:center!important;align-items:center!important;min-width:0!important;max-width:100%!important;padding:4px 5px!important;border-radius:7px!important;font-size:10.5px!important;line-height:1.05!important;font-weight:1000!important;white-space:normal!important;text-align:center!important;text-shadow:0 1px 2px rgba(0,0,0,.65)!important;box-shadow:0 2px 7px rgba(0,0,0,.34)!important}
.st-status-chip.tone-yellow,.st-status-pop.tone-yellow{background:rgba(178,126,0,.94)!important;color:#fff3b0!important}.st-status-chip.tone-purple,.st-status-pop.tone-purple{background:rgba(76,45,137,.95)!important;color:#eadcff!important}.st-status-chip.tone-silver,.st-status-pop.tone-silver{background:rgba(69,76,88,.95)!important;color:#eef2f6!important}.st-status-chip.tone-light,.st-status-pop.tone-light{background:rgba(238,226,155,.96)!important;color:#3c3400!important;text-shadow:none!important}.st-status-chip.tone-orange,.st-status-pop.tone-orange{background:rgba(156,57,16,.95)!important;color:#ffd4ad!important}.st-status-chip.tone-blood,.st-status-pop.tone-blood{background:linear-gradient(90deg,rgba(82,20,92,.96),rgba(27,111,70,.96))!important;color:#f5eaff!important}.st-status-chip.tone-teal,.st-status-pop.tone-teal{background:rgba(0,110,108,.95)!important;color:#c9fffa!important}.st-status-chip.tone-green,.st-status-pop.tone-green{background:rgba(17,119,65,.95)!important;color:#d7ffe5!important}.st-status-chip.tone-red,.st-status-pop.tone-red{background:rgba(151,36,55,.95)!important;color:#ffe1e6!important}.st-status-chip.tone-blue,.st-status-pop.tone-blue{background:rgba(28,84,151,.95)!important;color:#dcecff!important}
.st-status-pop-stack{position:absolute;z-index:160;left:5px;right:5px;top:31%;display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none}.st-status-pop-stack .st-status-pop{position:relative!important;left:auto!important;top:auto!important;transform:none!important;max-width:96%;padding:5px 8px!important;border-radius:7px!important;font-size:13px!important;line-height:1.05!important;font-weight:1000!important;white-space:normal!important;text-align:center!important;animation:stStatusStackPop 1.4s ease-out both!important}@keyframes stStatusStackPop{0%{opacity:0;transform:scale(.75)}15%{opacity:1;transform:scale(1.05)}78%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-8px) scale(.96)}}
.st-combat-history{margin-top:8px;border:1px solid #4d4437;border-radius:10px;background:#13110e;color:#ddd4c3;overflow:hidden}.st-combat-history>summary{cursor:pointer;padding:8px 12px;font-weight:900;color:#efdca7;user-select:none}.st-combat-history>summary span{display:inline-block;min-width:20px;margin-left:5px;padding:1px 5px;border-radius:9px;background:#6a5325;color:#fff;text-align:center;font-size:10px}.st-combat-history-list{max-height:220px;overflow:auto;padding:0 10px 9px}.st-combat-line{padding:5px 7px;border-top:1px solid rgba(255,255,255,.07);font-size:11px;line-height:1.25;color:#d9d2c6}.st-combat-line:first-child{color:#fff1bd;font-weight:800}
@media(max-width:700px){.st-battle-wrap .st-status-chip{font-size:8px!important;padding:3px 3px!important}.st-status-pop-stack .st-status-pop{font-size:10px!important;padding:4px 5px!important}.st-combat-history-list{max-height:170px}.st-combat-line{font-size:9px}}

/* 1.0.38 — authoritative role label palette across all player-facing Chiến Tướng surfaces. */
.st-wrap .st-role-name.st-role-ATK,.st-wrap .st-battle-role.st-role-ATK{color:#ff2d2d!important;font-weight:800!important} /* Sát thủ: đỏ tươi */
.st-wrap .st-role-name.st-role-FTR,.st-wrap .st-battle-role.st-role-FTR{color:#ff8a00!important;font-weight:800!important} /* Đấu sĩ: cam */
.st-wrap .st-role-name.st-role-WAR,.st-wrap .st-battle-role.st-role-WAR{color:#a855f7!important;font-weight:800!important} /* Huyết phản: tím */
.st-wrap .st-role-name.st-role-DEF,.st-wrap .st-battle-role.st-role-DEF{color:#4da3ff!important;font-weight:800!important} /* Đỡ đòn: xanh dương */
.st-wrap .st-role-name.st-role-SUP,.st-wrap .st-battle-role.st-role-SUP{color:#39c96d!important;font-weight:800!important} /* Hỗ trợ: xanh lá */

/* 1.0.39 - Waiting modal for matchmaking / battle start */
.st-wait-modal[hidden]{display:none!important}.st-wait-modal{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:18px}.st-wait-backdrop{position:absolute;inset:0;background:rgba(7,8,11,.58);backdrop-filter:blur(2px)}.st-wait-dialog{position:relative;width:min(330px,calc(100vw - 36px));padding:20px 20px 16px;border:1px solid rgba(229,180,62,.72);border-radius:16px;background:linear-gradient(180deg,#171713,#0d0d0b);box-shadow:0 18px 55px rgba(0,0,0,.48),0 0 0 1px rgba(255,211,92,.08) inset;text-align:center;color:#f5dfaa}.st-wait-spinner{width:34px;height:34px;margin:0 auto 11px;border:3px solid rgba(233,191,74,.22);border-top-color:#f1bd43;border-radius:50%;animation:stWaitSpin .78s linear infinite}.st-wait-title{font-size:15px;font-weight:900;letter-spacing:.2px;color:#ffe39a}.st-wait-progress{height:8px;margin:14px 0 7px;overflow:hidden;border-radius:999px;background:#26251f;border:1px solid #504424}.st-wait-progress-bar{position:relative;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#bf741d,#ffc34b,#f1a221);transition:width .12s linear;overflow:hidden}.st-wait-progress-bar:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0 36%,rgba(255,255,255,.5) 48%,transparent 60%);transform:translateX(-120%);animation:stWaitSweep 1s linear infinite}.st-wait-percent{font-size:11px;font-weight:800;color:#c9b77d;font-variant-numeric:tabular-nums}@keyframes stWaitSpin{to{transform:rotate(360deg)}}@keyframes stWaitSweep{to{transform:translateX(140%)}}
.st-battle-wrap .st-battle-topbar .st-back{font-size:12px!important;padding:7px 10px!important}.st-battle-wrap .st-battle-controls .st-find-bottom{font-size:12px!important;padding:8px 12px!important}
@media(max-width:600px){.st-wait-dialog{width:min(286px,calc(100vw - 32px));padding:17px 16px 14px;border-radius:14px}.st-wait-title{font-size:14px}.st-wait-spinner{width:30px;height:30px}.st-battle-wrap .st-battle-topbar .st-back{font-size:10px!important;padding:6px 8px!important}.st-battle-wrap .st-battle-controls .st-find-bottom{font-size:10px!important;padding:7px 9px!important}}

/* 1.0.42 — card actions cân đối, nâu dễ đọc; nút Cộng điểm nhấp nháy khi còn điểm chưa dùng. */
.st-card-actions{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important;align-items:stretch!important}
.st-card-actions .st-pick-btn,.st-card-actions .st-upgrade-btn{box-sizing:border-box!important;width:100%!important;min-width:0!important;min-height:44px!important;height:44px!important;margin:0!important;padding:6px 8px!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;border-radius:9px!important;background:#71451f!important;border:1px solid #8a582b!important;color:#fff!important;font-size:12px!important;font-weight:800!important;line-height:1.15!important;white-space:normal!important;overflow:hidden!important;text-overflow:clip!important;text-decoration:none!important;box-shadow:0 3px 8px rgba(82,45,16,.18)!important}
.st-card-actions .st-pick-btn:hover,.st-card-actions .st-upgrade-btn:hover{background:#5f3819!important;color:#fff!important}
.st-card-actions .st-pick-btn:disabled,.st-card.assigned .st-pick-btn{background:#62584d!important;border-color:#74685c!important;color:#eee!important;opacity:.82!important;box-shadow:none!important}
.st-card-actions .st-upgrade-btn.needs-points{background:#7b461d!important;border-color:#9b612f!important;animation:stPointsNudge 1.25s ease-in-out infinite;box-shadow:0 0 0 0 rgba(143,83,35,.48)!important}
@keyframes stPointsNudge{0%,100%{filter:brightness(1);box-shadow:0 0 0 0 rgba(143,83,35,.38)!important}50%{filter:brightness(1.22);box-shadow:0 0 0 5px rgba(143,83,35,.08)!important}}
@media(max-width:520px){.st-card-actions .st-pick-btn,.st-card-actions .st-upgrade-btn{font-size:11px!important;padding:5px 6px!important;min-height:42px!important;height:42px!important}}


/* 1.0.43 — điểm chưa dùng nổi bật; Cộng điểm đỏ khi còn điểm; WAR hiển thị Huyết phản. */
.st-card .st-points.has-points{color:#ff3030!important;font-size:20px!important;font-weight:900!important;line-height:1.2!important;margin-top:10px!important;text-shadow:0 0 8px rgba(255,48,48,.18)!important}
.st-card .st-points.has-points b{color:#ff3030!important;font-size:1.05em!important;font-weight:900!important}
.st-card-actions .st-upgrade-btn.needs-points{background:linear-gradient(180deg,#d92d2d 0%,#b71919 100%)!important;border-color:#ef4a4a!important;color:#fff!important;animation:stPointsRedPulse 1.25s ease-in-out infinite!important;box-shadow:0 0 0 0 rgba(220,45,45,.46)!important;text-shadow:0 1px 1px rgba(80,0,0,.35)!important}
.st-card-actions .st-upgrade-btn.needs-points:hover{background:linear-gradient(180deg,#ed3b3b 0%,#c82020 100%)!important;color:#fff!important}
@keyframes stPointsRedPulse{0%,100%{filter:brightness(1);box-shadow:0 0 0 0 rgba(220,45,45,.38)!important}50%{filter:brightness(1.18);box-shadow:0 0 0 5px rgba(220,45,45,.10)!important}}
@media(max-width:520px){.st-card .st-points.has-points{font-size:18px!important}}
\n\n/* 1.0.46 — mobile point notice + quick upgrade modal. */
.st-card .st-points.has-points{white-space:nowrap!important;font-size:17px!important;line-height:1.15!important;letter-spacing:-.15px!important}
@media(max-width:520px){.st-card .st-points.has-points{font-size:15px!important;line-height:1.15!important;letter-spacing:-.35px!important;margin-top:8px!important}}
.st-quick-upgrade{max-width:760px!important;padding-top:18px!important}.st-quick-upgrade:before{content:'';position:fixed;inset:0;z-index:100010;background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}
.st-quick-upgrade .st-upgrade-grid{display:block!important;max-width:620px!important;margin:0 auto!important}
.st-quick-modal-shell{position:fixed;z-index:100020;left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,calc(100vw - 28px));max-height:88vh;overflow:auto;background:#11110f;border:1px solid #9c6a1d;border-radius:18px;padding:16px;box-shadow:0 20px 55px rgba(0,0,0,.42)}
.st-quick-modal-title{text-align:center;color:#f0bd46;font-size:18px;font-weight:900;margin:0 0 10px}
.st-quick-upgrade .st-upgrade-card{max-width:none!important;border:0!important;box-shadow:none!important;padding:0!important;background:transparent!important}
.st-quick-upgrade .st-upgrade-card>.st-upgrade-art,.st-quick-upgrade .st-upgrade-card>h3,.st-quick-upgrade .st-upgrade-card>.st-meta,.st-quick-upgrade .st-upgrade-card>.st-stars,.st-quick-upgrade .st-upgrade-card>.st-exp-line,.st-quick-upgrade .st-upgrade-card>.st-power,.st-quick-upgrade .st-upgrade-card>.st-upgrade-skills,.st-quick-upgrade .st-upgrade-card>.st-points-big,.st-quick-upgrade .st-open-build{display:none!important}
.st-quick-upgrade .st-build-panel{display:block!important;border-top:0!important;margin-top:0!important;padding-top:0!important;font-size:13px!important}
.st-quick-upgrade .st-build-panel[hidden]{display:block!important}
.st-quick-upgrade .st-build-form:before{content:'Cộng điểm';display:block;color:#efc25a;font-size:15px;font-weight:900;margin:0 0 8px}
.st-quick-upgrade .st-star-upgrade{margin-top:14px;padding-top:12px;border-top:1px solid rgba(203,153,57,.32)}
.st-quick-upgrade .st-star-upgrade>b{display:block;color:#efc25a;font-size:15px;margin-bottom:6px}
.st-quick-upgrade .st-reset-form{margin-top:14px;padding-top:12px;border-top:1px solid rgba(203,153,57,.32)}
.st-quick-upgrade .st-reset-form:before{content:'Reset Điểm';display:block;color:#efc25a;font-size:15px;font-weight:900;margin-bottom:6px}
.st-reset-cost{display:block;text-align:center;margin-top:4px;color:#bdb4a5;font-size:11px}
.st-quick-close{display:flex;align-items:center;justify-content:center;width:max-content;min-width:84px;margin:14px auto 0;padding:7px 12px;border:1px solid #69553a;border-radius:999px;background:#28231d;color:#eee!important;text-decoration:none!important;font-size:12px;font-weight:800}
.st-quick-close:hover{background:#342d24;color:#fff!important}
@media(max-width:520px){.st-quick-modal-shell{padding:12px 10px;border-radius:14px}.st-quick-modal-title{font-size:15px}.st-quick-upgrade .st-build-panel{font-size:11px!important}.st-quick-upgrade .st-build-row small{font-size:9px!important}.st-quick-upgrade .st-stepper button{width:31px!important;height:31px!important}.st-quick-upgrade .st-stepper input{width:34px!important;font-size:11px!important}}

/* 1.0.47 — clean player-facing skill descriptions; no visual override added. */

/* 1.0.56 - Điểm thuộc tính >0: đỏ, đúng khoảng 3x dòng trắng =0; mobile gọn hơn theo cùng tỷ lệ. */
.st-card .st-points:not(.has-points){font-size:9px;line-height:1.15}
.st-card .st-points.has-points{font-size:24px!important;line-height:1.05!important;white-space:normal!important;letter-spacing:0!important;margin-top:6px!important;font-weight:900!important;color:#ff3030!important;text-shadow:none!important}
.st-card .st-points.has-points b{font-size:1em!important;color:#ff3030!important;font-weight:900!important}
@media(max-width:520px){.st-card .st-points:not(.has-points){font-size:8px}.st-card .st-points.has-points{font-size:24px!important;line-height:1.05!important;margin-top:5px!important}}


/* 1.0.56 — mobile quick Cộng điểm shows live stat preview; desktop uses normal upgrade page. */
.st-war-stat b{color:#c07cff}
.st-quick-upgrade .st-upgrade-card>.st-stats{display:grid!important;grid-template-columns:1fr 1fr;gap:5px 10px;margin:8px 0 10px!important;padding:8px 10px!important;border:1px solid rgba(203,153,57,.30);border-radius:10px;background:rgba(0,0,0,.16)}
.st-quick-upgrade .st-upgrade-card>.st-stats span{display:block!important;min-width:0;font-variant-numeric:tabular-nums}
.st-quick-upgrade .st-preview-delta.show{color:#62e58a;font-weight:900;animation:stStatPulse .22s ease-out}
@keyframes stStatPulse{0%{transform:scale(.92);opacity:.45}100%{transform:scale(1);opacity:1}}

/* 1.0.61 — fix Điểm thuộc tính >0: desktop và mobile cùng cỡ nhỏ, không bị override 24px. */
.st-game-wrap .st-card .st-points.has-points{
  font-size:15px!important;
  line-height:1.15!important;
  white-space:normal!important;
  letter-spacing:0!important;
  margin-top:6px!important;
  font-weight:900!important;
  color:#ff3030!important;
  text-shadow:none!important;
}
.st-game-wrap .st-card .st-points.has-points b{
  font-size:1em!important;
  color:#ff3030!important;
  font-weight:900!important;
}
@media(max-width:520px){
  .st-game-wrap .st-card .st-points.has-points{
    font-size:15px!important;
    line-height:1.15!important;
    margin-top:5px!important;
  }
}


/* 1.0.62 — desktop Upgrade: Cộng điểm đỏ chỉ khi tướng còn điểm; hết điểm dùng nâu. Mobile giữ nguyên. */
@media (min-width:901px){
  .st-upgrade-wrap:not(.st-quick-upgrade) .st-open-build{
    background:linear-gradient(180deg,#8a572d,#68401f)!important;
    border:1px solid #9a672f!important;
    color:#fff!important;
    box-shadow:0 4px 10px rgba(66,38,16,.24)!important;
  }
  .st-upgrade-wrap:not(.st-quick-upgrade) .st-open-build.st-open-build-has-points{
    background:linear-gradient(180deg,#f13a3f,#d71920)!important;
    border-color:#ff666a!important;
    color:#fff!important;
    box-shadow:0 4px 12px rgba(215,25,32,.28)!important;
  }
}

/* 1.0.65 — restore 1.0.63 sizing/layout; desktop only keeps the 3 action buttons brown with white text. */
@media (min-width:901px){
  .st-upgrade-wrap .st-upgrade-card .st-build-panel .st-build-form > .st-btn,
  .st-upgrade-wrap .st-upgrade-card .st-build-panel .st-star-btn,
  .st-upgrade-wrap .st-upgrade-card .st-build-panel .st-reset-form button{
    background:#71451f!important;
    border:1px solid #8a582b!important;
    color:#fff!important;
    font-size:18px!important;
    font-weight:800!important;
    line-height:1.15!important;
    text-shadow:none!important;
  }
  .st-upgrade-wrap .st-upgrade-card .st-build-panel .st-build-form > .st-btn:hover,
  .st-upgrade-wrap .st-upgrade-card .st-build-panel .st-star-btn:hover,
  .st-upgrade-wrap .st-upgrade-card .st-build-panel .st-reset-form button:hover{
    background:#5f3819!important;
    color:#fff!important;
  }
}

/* 1.0.67 — Upgrade action colors. Mobile keeps existing sizing: brown actions, red Reset with black text. Desktop Reset is also red/black. */
@media (max-width:900px){
  .st-upgrade-wrap .st-open-build,
  .st-upgrade-wrap .st-upgrade-card .st-build-panel .st-build-form > .st-btn,
  .st-upgrade-wrap .st-upgrade-card .st-build-panel .st-star-btn{
    background:#71451f!important;
    border-color:#8a582b!important;
    color:#fff!important;
    text-shadow:none!important;
  }
  .st-upgrade-wrap .st-open-build:hover,
  .st-upgrade-wrap .st-upgrade-card .st-build-panel .st-build-form > .st-btn:hover,
  .st-upgrade-wrap .st-upgrade-card .st-build-panel .st-star-btn:hover{
    background:#5f3819!important;
    color:#fff!important;
  }
}
.st-upgrade-wrap .st-upgrade-card .st-build-panel .st-reset-form button{
  background:#d83a3a!important;
  border-color:#f05b5b!important;
  color:#111!important;
  text-shadow:none!important;
}
.st-upgrade-wrap .st-upgrade-card .st-build-panel .st-reset-form button:hover{
  background:#ee4b4b!important;
  color:#111!important;
}

/* 1.0.70 — desktop Upgrade readability tune only. Mobile/tablet stay exactly as before. */
@media (min-width:901px){
  /* Main action buttons: a little smaller than 1.0.65, but still clearly larger than Cộng điểm. */
  .st-upgrade-wrap .st-upgrade-card .st-build-panel .st-build-form > .st-btn,
  .st-upgrade-wrap .st-upgrade-card .st-build-panel .st-star-btn,
  .st-upgrade-wrap .st-upgrade-card .st-build-panel .st-reset-form button{
    font-size:15px!important;
    line-height:1.15!important;
    padding:8px 10px!important;
  }

  /* Card information: increase only slightly for easier reading on desktop. */
  .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;
  }
  .st-upgrade-wrap .st-upgrade-card .st-stats{
    font-size:10.5px!important;
    line-height:1.35!important;
  }
  .st-upgrade-wrap .st-upgrade-skills{
    font-size:11px!important;
  }
  .st-upgrade-wrap .st-upgrade-skill{
    line-height:1.4!important;
  }
  .st-upgrade-wrap .st-upgrade-skill strong{
    font-size:11.5px!important;
  }
  .st-upgrade-wrap .st-upgrade-skill span,
  .st-upgrade-wrap .st-upgrade-skill small{
    font-size:10.5px!important;
    line-height:1.4!important;
  }
}


/* 1.0.71 — Hai tầng sao hiển thị: 1–5 sao bạc, từ sao tổng 6 chuyển sang sao vàng (số hiển thị = sao tổng - 5). */
.st-stars.star-silver .st-star-glyphs{
  color:#d8dde5;
  text-shadow:0 1px 2px rgba(0,0,0,.42),0 0 3px rgba(255,255,255,.52);
  filter:drop-shadow(0 0 2px rgba(220,228,238,.38));
}
.st-stars.star-gold .st-star-glyphs{
  color:#ffd34a;
  text-shadow:0 0 3px #fff1a1,0 0 7px rgba(255,174,0,.72),0 1px 1px rgba(122,73,0,.35);
  filter:drop-shadow(0 0 3px rgba(255,192,0,.62));
}
.st-stars.maxed.star-silver .st-star-glyphs{
  color:#e7ebf0;
  text-shadow:0 1px 2px rgba(0,0,0,.42),0 0 5px rgba(255,255,255,.62);
  filter:drop-shadow(0 0 3px rgba(226,233,241,.48));
}
.st-stars.maxed.star-gold .st-star-glyphs{
  color:#ffd52a;
  text-shadow:0 0 4px #fffbd4,0 0 9px #ffc400,0 0 14px rgba(255,153,0,.72);
}
.st-card-stars.star-silver{
  border-color:rgba(218,225,235,.78)!important;
  color:#e2e7ee!important;
  text-shadow:0 1px 2px #000,0 0 4px rgba(235,241,248,.42)!important;
}
.st-card-stars.star-gold{
  border-color:rgba(255,221,112,.72)!important;
  color:#ffd54a!important;
  text-shadow:0 1px 2px #000,0 0 5px rgba(255,190,38,.45)!important;
}

/* 1.0.78 - Tự cộng điểm */
.st-build-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.st-build-actions .st-btn{margin:0}
.st-auto-allocate{white-space:nowrap}

/* 1.0.79 - nhập nhanh điểm thuộc tính */
.st-stepper input[type=number]{width:60px;min-width:60px;box-sizing:border-box}
@media(max-width:700px){.st-stepper input[type=number]{width:54px;min-width:54px}}


/* 1.0.82 — Mobile only: formation and battle cards share one compact geometry; artwork is never stretched. */
@media(max-width:760px){
  :root{--st-mobile-combat-card:clamp(82px,27vw,96px)}
  .st-game-wrap .st-slots-front{grid-template-columns:repeat(2,var(--st-mobile-combat-card))!important;max-width:none!important}
  .st-game-wrap .st-slots-back{grid-template-columns:repeat(3,var(--st-mobile-combat-card))!important;max-width:none!important}
  .st-game-wrap .st-slot{width:var(--st-mobile-combat-card)!important;min-width:var(--st-mobile-combat-card)!important;max-width:var(--st-mobile-combat-card)!important}
  .st-game-wrap .st-slot.filled .st-slot-content{width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:1/1!important}
  .st-game-wrap .st-card-visual-formation,
  .st-battle-wrap .st-card-visual-battle{width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:1/1!important}
  .st-battle-wrap .st-battle-row .st-battle-slot{width:var(--st-mobile-combat-card)!important;min-width:var(--st-mobile-combat-card)!important;max-width:var(--st-mobile-combat-card)!important;flex:0 0 var(--st-mobile-combat-card)!important}
  .st-game-wrap .st-card-visual-formation .st-card-art,
  .st-battle-wrap .st-card-visual-battle .st-card-art{background-size:contain!important;background-position:center center!important;background-repeat:no-repeat!important;background-color:#070707!important}
}

/* 1.0.84: hiện số điểm đã cộng ngay ở bảng chỉ số, gọn trên desktop/mobile. */
.st-alloc-saved{font-style:normal;font-size:.82em;font-weight:700;color:#55c87a;margin-left:3px;white-space:nowrap;}

/* 1.0.85 — Mobile Tìm trận: 5 thẻ của mỗi đội dùng cùng một cỡ vuông, không crop artwork. */
@media(max-width:700px){
  .st-match-wrap .st-mini-front .st-mini-slot,
  .st-match-wrap .st-mini-back .st-mini-slot{
    width:calc(33.333% - 4px)!important;
    max-width:112px!important;
    flex:0 1 112px!important;
    min-height:0!important;
  }
  .st-match-wrap .st-card-visual-mini{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:1 / 1!important;
  }
  .st-match-wrap .st-card-visual-mini .st-card-art{
    background-size:contain!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
  }
}



/* 1.0.87 — Part 3A: cleaner game navigation, compact skill access, mobile full upgrade page. */
.st-game-wrap .st-card .st-stats .st-card-skill-btn{
  grid-column:2;justify-self:end;align-self:end;width:auto;max-width:100%;min-height:24px;margin:2px 0 0;padding:3px 8px;
  border:1px solid #8a582b;border-radius:7px;background:#71451f;color:#fff;font-size:9px;font-weight:800;line-height:1.15;cursor:pointer;
}
.st-game-wrap .st-card .st-stats .st-card-skill-btn:hover{background:#5f3819}
@media(max-width:520px){.st-game-wrap .st-card .st-stats .st-card-skill-btn{font-size:8px;min-height:22px;padding:3px 6px}}
.st-skill-view-modal[hidden]{display:none!important}.st-skill-view-modal{position:fixed;inset:0;z-index:100130;display:flex;align-items:center;justify-content:center;padding:18px}.st-skill-view-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.76);backdrop-filter:blur(4px)}.st-skill-view-dialog{position:relative;z-index:1;width:min(560px,calc(100vw - 28px));max-height:82vh;overflow:auto;padding:20px 18px;border:1px solid #c99b35;border-radius:18px;background:linear-gradient(180deg,#151412,#090a0c);box-shadow:0 24px 75px rgba(0,0,0,.72);color:#eee7d8}.st-skill-view-close{position:absolute;right:9px;top:7px;width:34px;height:34px;border:0;background:transparent;color:#d8bd75;font-size:28px;cursor:pointer}.st-card-skill-list h4{margin:0 36px 12px 0;color:#f0c85a;font-size:18px}.st-card-skill-row{padding:10px 0;border-top:1px solid rgba(201,155,53,.25)}.st-card-skill-row:first-of-type{border-top:0}.st-card-skill-row strong{display:block;color:#f3e7c6;font-size:14px}.st-card-skill-row div{margin-top:3px;color:#ffc247;font-size:12px;font-weight:700}.st-card-skill-row small{display:block;margin-top:4px;color:#b9c0c9;font-size:11px;line-height:1.45}

/* Build action buttons use brown on desktop and mobile; hide when no points remain. */
.st-upgrade-wrap .st-build-actions.st-point-actions[hidden]{display:none!important}
.st-upgrade-wrap .st-build-actions.st-point-actions .st-btn{background:#71451f!important;border:1px solid #8a582b!important;color:#fff!important;box-shadow:none!important}
.st-upgrade-wrap .st-build-actions.st-point-actions .st-btn:hover{background:#5f3819!important}
.st-upgrade-wrap .st-quick-close-inline{display:flex!important;align-items:center;justify-content:center;min-height:38px;margin:0!important;padding:7px 12px!important;border:1px solid #ef4a4a!important;border-radius:9px!important;background:linear-gradient(180deg,#d92d2d,#b71919)!important;color:#fff!important;font-size:12px!important;font-weight:900!important;text-decoration:none!important}

/* Mobile quick upgrade is now a normal scrollable page, not a centered modal. */
@media(max-width:520px){
  .st-quick-upgrade{max-width:none!important;padding:10px 8px 24px!important}
  .st-quick-upgrade:before{display:none!important}
  .st-quick-upgrade .st-upgrade-grid{display:block!important;max-width:none!important;margin:0!important}
  .st-quick-modal-shell{position:relative!important;z-index:auto!important;left:auto!important;top:auto!important;transform:none!important;width:100%!important;max-height:none!important;overflow:visible!important;margin:0!important;padding:10px!important;border-radius:14px!important;box-shadow:none!important}
  .st-quick-upgrade .st-upgrade-card{padding:8px!important}
  .st-quick-upgrade .st-upgrade-card>.st-upgrade-art,.st-quick-upgrade .st-upgrade-card>h3,.st-quick-upgrade .st-upgrade-card>.st-meta,.st-quick-upgrade .st-upgrade-card>.st-stars,.st-quick-upgrade .st-upgrade-card>.st-exp-line,.st-quick-upgrade .st-upgrade-card>.st-power,.st-quick-upgrade .st-upgrade-card>.st-upgrade-skills,.st-quick-upgrade .st-upgrade-card>.st-points-big{display:block!important}
  .st-quick-upgrade .st-upgrade-card>.st-upgrade-art{width:min(180px,62vw)!important;height:auto!important;margin:0 auto 8px!important}
  .st-quick-upgrade .st-upgrade-card>h3{text-align:center!important}
  .st-quick-upgrade .st-upgrade-card>.st-meta{display:flex!important}
  .st-quick-upgrade .st-upgrade-card>.st-stars{text-align:center!important}
  .st-quick-upgrade .st-upgrade-card>.st-upgrade-skills{margin-top:10px!important}
  .st-quick-upgrade .st-open-build{display:none!important}
  .st-quick-upgrade .st-build-panel{display:block!important;margin-top:12px!important;padding-top:10px!important;border-top:1px solid rgba(203,153,57,.32)!important}
  .st-quick-upgrade .st-build-form:before{content:'Cộng điểm';font-size:17px!important;text-align:center}
  .st-quick-upgrade .st-build-actions.st-point-actions{display:grid!important;grid-template-columns:1fr 1fr 1fr;gap:7px!important}
  .st-quick-upgrade .st-build-actions.st-point-actions[hidden]{display:none!important}
  .st-quick-upgrade .st-build-actions.st-point-actions .st-btn,.st-quick-upgrade .st-quick-close-inline{min-width:0!important;min-height:38px!important;padding:7px 5px!important;font-size:10px!important;line-height:1.15!important}
  .st-quick-upgrade .st-reset-form:before{display:none!important;content:none!important}
  .st-quick-upgrade .st-reset-form{margin-top:16px!important;padding-top:14px!important}
}

/* Mobile battle result: details first, action buttons below with clear separation. */
.st-result small{display:block;margin:8px 0 0;line-height:1.45}.st-result-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:12px}.st-result-actions a{margin-top:0!important}
@media(max-width:520px){.st-battle-wrap .st-result{padding-bottom:14px!important}.st-battle-wrap .st-result small{display:block!important;width:100%!important;margin:10px 0 0!important;padding:0 4px!important;line-height:1.55!important}.st-battle-wrap .st-result-actions{width:100%!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:18px!important;clear:both!important}.st-battle-wrap .st-result-actions a{display:flex!important;align-items:center!important;justify-content:center!important;min-height:42px!important;margin:0!important;padding:8px 6px!important;font-size:11px!important;line-height:1.2!important}}


/* 1.0.90 — Mobile Kho tướng: giữ các nhãn/nút chính trên đúng một hàng, gọn hơn nhưng vẫn dễ đọc. */
@media(max-width:520px){
  .st-game-wrap .st-card .st-points.has-points{
    font-size:10.5px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    letter-spacing:-.2px!important;
    margin-top:5px!important;
  }
  .st-game-wrap .st-card .st-points.has-points b{font-size:1em!important}

  .st-game-wrap .st-card .st-stats .st-card-skill-btn{
    font-size:7.5px;
    line-height:1;
    min-height:20px;
    padding:3px 4px;
    white-space:nowrap;
  }

  .st-game-wrap .st-card-actions .st-pick-btn,
  .st-game-wrap .st-card-actions .st-upgrade-btn{
    font-size:9px!important;
    line-height:1!important;
    min-height:38px!important;
    height:38px!important;
    padding:4px 3px!important;
    white-space:nowrap!important;
  }
}

/* 1.0.91 — Hiển thị chỉ số thật sau cộng hưởng đội hình. */
.st-slot-team-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:5px;font-size:10px;line-height:1.15;color:#d8d1c4;text-align:center}
.st-slot-team-stats span{min-width:0;white-space:nowrap}.st-slot-team-stats b{color:#f1ca69;font-weight:900}
.st-pick-card.st-team-buffed{box-shadow:0 0 0 1px rgba(95,190,105,.42),0 8px 20px rgba(0,0,0,.16)}
.st-pick-card.st-team-nerfed{box-shadow:0 0 0 1px rgba(210,86,70,.38),0 8px 20px rgba(0,0,0,.16)}
@media(max-width:520px){.st-slot-team-stats{font-size:8px;gap:2px;margin-top:3px}}

/* 1.0.95 — Hệ Chiến Tướng: viền dày/sáng hơn, đồng bộ Kho · Đội hình · Tìm trận · Combat. */
.st-element-FIRE{--st-element-color:#ff2b2b;--st-element-glow:rgba(255,43,43,.55)}
.st-element-WATER{--st-element-color:rgba(66,153,255,.98);--st-element-glow:rgba(66,153,255,.42)}
.st-element-EARTH{--st-element-color:#6b4a1f;--st-element-glow:rgba(107,74,31,.45)}
.st-element-WOOD{--st-element-color:rgba(77,190,105,.98);--st-element-glow:rgba(77,190,105,.42)}
.st-element-METAL{--st-element-color:rgba(226,229,236,.98);--st-element-glow:rgba(226,229,236,.38)}
.st-element-WIND{--st-element-color:rgba(117,220,220,.98);--st-element-glow:rgba(117,220,220,.42)}
.st-elements-on .st-card.st-element-card>img{outline:3px solid var(--st-element-color);outline-offset:-3px;box-shadow:0 0 5px var(--st-element-color),0 0 16px var(--st-element-glow),inset 0 0 8px var(--st-element-glow)}
.st-elements-on .st-card-visual.st-element-card{position:relative;box-shadow:inset 0 0 0 4px var(--st-element-color),inset 0 0 14px var(--st-element-glow),0 0 7px var(--st-element-color),0 0 22px var(--st-element-glow)}
.st-elements-on .st-card-visual.st-element-card::after{content:"";position:absolute;inset:1px;z-index:8;border:3px solid var(--st-element-color);border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 10px var(--st-element-glow),0 0 12px var(--st-element-glow)}
.st-elements-on .st-element-slot>.st-card-visual.st-element-card{box-shadow:inset 0 0 0 5px var(--st-element-color),inset 0 0 16px var(--st-element-glow),0 0 9px var(--st-element-color),0 0 24px var(--st-element-glow)}
.st-element-control{display:flex;justify-content:center;align-items:center;margin:6px 0 2px;min-height:28px}
.st-element-badge,.st-element-join-btn{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:850;line-height:1;white-space:nowrap}
.st-element-badge{border:1px solid var(--st-element-color,rgba(190,194,202,.7));background:rgba(12,13,15,.88);color:var(--st-element-color,#f5efe3);text-shadow:0 0 7px var(--st-element-glow,rgba(255,255,255,.12));box-shadow:inset 0 0 8px var(--st-element-glow,rgba(255,255,255,.06)),0 0 7px var(--st-element-glow,rgba(255,255,255,.06))}
.st-element-badge-FIRE{--st-element-color:#ff2b2b;--st-element-glow:rgba(255,43,43,.55)}
.st-element-badge-WATER{--st-element-color:rgba(66,153,255,.98);--st-element-glow:rgba(66,153,255,.42)}
.st-element-badge-EARTH{--st-element-color:#6b4a1f;--st-element-glow:rgba(107,74,31,.45)}
.st-element-badge-WOOD{--st-element-color:rgba(77,190,105,.98);--st-element-glow:rgba(77,190,105,.42)}
.st-element-badge-METAL{--st-element-color:rgba(226,229,236,.98);--st-element-glow:rgba(226,229,236,.38)}
.st-element-badge-WIND{--st-element-color:rgba(117,220,220,.98);--st-element-glow:rgba(117,220,220,.42)}
.st-element-join-btn{border:1px solid #7c5a2d;background:#5e421f;color:#fff;cursor:pointer}
.st-element-join-btn:hover{filter:brightness(1.08)}
.st-element-modal[hidden]{display:none!important}.st-element-modal{position:fixed;inset:0;z-index:100130;display:flex;align-items:center;justify-content:center;padding:16px}
.st-element-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(4px)}
.st-element-modal-dialog{position:relative;z-index:1;width:min(520px,calc(100vw - 28px));max-height:calc(100vh - 28px);overflow:auto;padding:22px;border:1px solid #9b7437;border-radius:18px;background:linear-gradient(180deg,#171512,#090a0b);color:#eee7d8;box-shadow:0 24px 75px rgba(0,0,0,.72)}
.st-element-modal-dialog h3{margin:0 38px 10px;text-align:center;color:#efc85d;font-size:21px}.st-element-modal-close{position:absolute;right:10px;top:8px;width:36px;height:36px;border:0;background:transparent;color:#d9bd78;font-size:28px;cursor:pointer}
.st-element-warning{padding:9px 10px;border:1px solid rgba(197,92,75,.45);border-radius:10px;background:rgba(89,27,21,.22);color:#ead8cf;font-size:12px;line-height:1.45;text-align:center}.st-element-warning strong{color:#ff9c89}
#stElementPetName{text-align:center;font-weight:800;margin:9px 0;color:#d9d0bf}.st-element-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.st-element-choice{min-height:42px;border:1px solid #5c5548;border-radius:10px;background:#15171a;color:#f0e8d7;font-weight:850;cursor:pointer}.st-element-choice:disabled,.st-element-choice.is-locked{opacity:.38;cursor:not-allowed;filter:grayscale(.45)}.st-element-choice.selected{border-color:var(--st-choice-color,#d6a63e);box-shadow:inset 0 0 0 1px var(--st-choice-color,#d6a63e),0 0 12px rgba(214,166,62,.16)}
.st-element-choice-FIRE{--st-choice-color:#d85b37}.st-element-choice-WATER{--st-choice-color:#4c8fd9}.st-element-choice-EARTH{--st-choice-color:#ae7e37}.st-element-choice-WOOD{--st-choice-color:#4b9a61}.st-element-choice-METAL{--st-choice-color:#bfc3ca}.st-element-choice-WIND{--st-choice-color:#68bebe}
.st-element-wind-note{margin:10px 0 4px;padding:9px 10px;border:1px solid rgba(104,190,190,.38);border-radius:10px;background:rgba(28,74,74,.20);color:#bfeeee;font-size:11px;line-height:1.45;text-align:center}.st-element-confirm-note{margin:12px 0 8px;text-align:center;color:#bdb4a4;font-size:12px;line-height:1.4}.st-element-modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.st-element-confirm,.st-element-later{display:flex;align-items:center;justify-content:center;width:100%;min-height:42px;border:1px solid #9d7131;border-radius:10px;background:linear-gradient(180deg,#765126,#543817);color:#fff;font-weight:900;cursor:pointer}.st-element-later{background:linear-gradient(180deg,#654723,#402d18);color:#f1e4c7}.st-element-confirm:disabled{opacity:.42;cursor:not-allowed}
@media(max-width:520px){.st-element-badge,.st-element-join-btn{font-size:9px;min-height:24px;padding:3px 7px}.st-element-control{min-height:24px;margin:4px 0 1px}.st-element-modal-dialog{padding:18px 12px;border-radius:15px}.st-element-options{grid-template-columns:1fr 1fr;gap:6px}.st-element-choice{min-height:38px;font-size:11px}.st-element-modal-dialog h3{font-size:18px}.st-element-modal-actions{grid-template-columns:1fr}.st-element-confirm,.st-element-later{min-height:40px;font-size:11px}}

/* 1.0.96 — Viền Hệ phải nhìn thấy ở slot Đội hình, Tìm trận và Combat của cả hai bên. */
.st-elements-on .st-element-slot .st-card-art{outline:2px solid var(--st-element-color);outline-offset:-2px;box-shadow:inset 0 0 10px var(--st-element-glow)}

/* 1.0.98 — Huy hiệu tam giác Hệ ở góc trái dưới ảnh cho cả Chiến Tướng của tôi, Đội hình, Tìm trận và Combat. */
.st-elements-on .st-card-visual.st-element-card{overflow:hidden}
.st-elements-on .st-card-visual.st-element-card::before{content:"";position:absolute;left:0;bottom:0;z-index:7;width:0;height:0;border-style:solid;border-width:0 0 32px 32px;border-color:transparent transparent var(--st-element-color) transparent;filter:drop-shadow(0 0 5px var(--st-element-glow));pointer-events:none}
.st-elements-on .st-card-visual.st-element-card .st-card-art::before{content:"";position:absolute;left:0;bottom:0;z-index:2;width:26px;height:26px;clip-path:polygon(0 100%,0 0,100% 100%);background:linear-gradient(135deg,rgba(255,255,255,.52) 0%,rgba(255,255,255,.20) 34%,transparent 35%),linear-gradient(135deg,var(--st-element-color) 0%,rgba(0,0,0,.22) 100%);opacity:.99;pointer-events:none}
.st-elements-on .st-card-visual-mini.st-element-card::before{border-width:0 0 26px 26px}
.st-elements-on .st-card-visual-mini.st-element-card .st-card-art::before{width:21px;height:21px}
.st-elements-on .st-card-visual-battle.st-element-card::before,.st-elements-on .st-card-visual-formation.st-element-card::before,.st-elements-on .st-card-visual-grid.st-element-card::before{border-width:0 0 34px 34px}
.st-elements-on .st-card-visual-battle.st-element-card .st-card-art::before,.st-elements-on .st-card-visual-formation.st-element-card .st-card-art::before,.st-elements-on .st-card-visual-grid.st-element-card .st-card-art::before{width:28px;height:28px}
@media(max-width:600px){.st-elements-on .st-card-visual.st-element-card::before{border-width:0 0 24px 24px}.st-elements-on .st-card-visual.st-element-card .st-card-art::before{width:19px;height:19px}.st-elements-on .st-card-visual-battle.st-element-card::before,.st-elements-on .st-card-visual-formation.st-element-card::before,.st-elements-on .st-card-visual-grid.st-element-card::before{border-width:0 0 26px 26px}.st-elements-on .st-card-visual-battle.st-element-card .st-card-art::before,.st-elements-on .st-card-visual-formation.st-element-card .st-card-art::before,.st-elements-on .st-card-visual-grid.st-element-card .st-card-art::before{width:21px;height:21px}}

/* 1.0.100 — Khôi phục kích thước roster cũ; chỉ thêm viền Hệ + tam giác, không đổi layout card. */
.st-game-wrap .st-pet-image-wrap{position:relative;width:100%;max-width:145px;aspect-ratio:1/1;margin:0 auto;line-height:0;overflow:visible}
.st-game-wrap .st-pet-image-wrap>img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;object-fit:contain!important;aspect-ratio:1/1!important;border-radius:4px}
.st-game-wrap.st-elements-on .st-pet-image-wrap.st-pet-image-element{position:relative;border:0;border-radius:6px;box-sizing:border-box;outline:3px solid var(--st-element-color);outline-offset:0;box-shadow:0 0 8px var(--st-element-color),0 0 18px var(--st-element-glow),inset 0 0 10px var(--st-element-glow);overflow:hidden}
.st-game-wrap.st-elements-on .st-pet-image-wrap.st-pet-image-element::after{content:"";position:absolute;inset:1px;z-index:3;border:2px solid var(--st-element-color);border-radius:4px;box-shadow:inset 0 0 9px var(--st-element-glow),0 0 10px var(--st-element-glow);pointer-events:none}
.st-game-wrap.st-elements-on .st-pet-image-wrap.st-pet-image-element::before{content:"";position:absolute;left:0;bottom:0;z-index:4;width:0;height:0;border-style:solid;border-width:0 0 28px 28px;border-color:transparent transparent var(--st-element-color) transparent;filter:drop-shadow(0 0 5px var(--st-element-glow));pointer-events:none}
.st-game-wrap.st-elements-on .st-pet-image-wrap.st-pet-image-element .st-pet-element-corner{display:none}
@media (min-width:701px) and (max-width:900px){.st-game-wrap .st-pet-image-wrap{max-width:108px}}
@media (max-width:700px){.st-game-wrap .st-pet-image-wrap{max-width:118px}.st-game-wrap.st-elements-on .st-pet-image-wrap.st-pet-image-element::before{border-width:0 0 24px 24px}}
@media (max-width:390px){.st-game-wrap .st-pet-image-wrap{max-width:102px}.st-game-wrap.st-elements-on .st-pet-image-wrap.st-pet-image-element::before{border-width:0 0 22px 22px}}
@media (orientation:landscape) and (max-height:520px){.st-game-wrap .st-pet-image-wrap{max-width:84px}.st-game-wrap.st-elements-on .st-pet-image-wrap.st-pet-image-element::before{border-width:0 0 20px 20px}}

/* 1.0.102 — Fix selector: st-game-wrap và st-elements-on nằm trên cùng một node. */


/* 1.0.104 — Mobile nav: hàng 1 Đội hình/Tìm trận/Top Rank; hàng 2 Nâng cấp/Điểm Master. Desktop giữ nguyên. */
.st-tabs .st-tab-placeholder{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 15px;
  border:1px solid #65501f;
  border-radius:10px;
  background:#171612;
  color:#bfb6a0;
  font-weight:700;
  white-space:nowrap;
  opacity:.72;
  cursor:default;
}
@media(max-width:700px){
  .st-game-wrap .st-tabs,
  .st-match-wrap .st-tabs,
  .st-upgrade-wrap .st-tabs{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:6px!important;
    overflow:visible!important;
    width:100%!important;
    max-width:100%!important;
    padding-bottom:0!important;
  }
  .st-game-wrap .st-tabs a,
  .st-game-wrap .st-tabs span,
  .st-match-wrap .st-tabs a,
  .st-match-wrap .st-tabs span,
  .st-upgrade-wrap .st-tabs a,
  .st-upgrade-wrap .st-tabs span{
    min-width:0!important;
    width:100%!important;
    box-sizing:border-box!important;
    padding:7px 4px!important;
    font-size:10px!important;
    line-height:1.15!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
    text-align:center!important;
    white-space:nowrap!important;
  }
  .st-game-wrap .st-tabs .st-tab-team,
  .st-match-wrap .st-tabs .st-tab-team,
  .st-upgrade-wrap .st-tabs .st-tab-team{grid-column:1 / 3;grid-row:1}
  .st-game-wrap .st-tabs .st-tab-match,
  .st-match-wrap .st-tabs .st-tab-match,
  .st-upgrade-wrap .st-tabs .st-tab-match{grid-column:3 / 5;grid-row:1}
  .st-game-wrap .st-tabs .st-tab-rank,
  .st-match-wrap .st-tabs .st-tab-rank,
  .st-upgrade-wrap .st-tabs .st-tab-rank{grid-column:5 / 7;grid-row:1}
  .st-game-wrap .st-tabs .st-tab-upgrade,
  .st-match-wrap .st-tabs .st-tab-upgrade,
  .st-upgrade-wrap .st-tabs .st-tab-upgrade{grid-column:1 / 4;grid-row:2}
  .st-game-wrap .st-tabs .st-tab-master,
  .st-match-wrap .st-tabs .st-tab-master,
  .st-upgrade-wrap .st-tabs .st-tab-master{grid-column:4 / 7;grid-row:2}
  .st-tabs a .icon,
  .st-tabs span .icon{
    margin-right:2px!important;
    font-size:.82em!important;
  }
}

/* Master Stage 1 - dark, code-friendly */
.st-master-page{background:#161513;color:#f4f0e8;padding-bottom:30px}.st-master-page .st-tabs{margin-bottom:14px}.st-master-page .st-tab-master{background:#6f4b2f!important;color:#fff!important;border-color:#8b6547!important}.st-master-head{display:flex;justify-content:space-between;gap:16px;align-items:center;background:#211f1c;border:1px solid #3c3731;padding:16px;border-radius:10px;margin-bottom:14px}.st-master-head h2{margin:0;color:#fff}.st-master-head p{margin:5px 0 0;color:#cfc7bc}.st-master-wallet{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.st-master-wallet span{background:#2c2925;border:1px solid #4c443b;padding:8px 10px;border-radius:7px;color:#ddd}.st-master-wallet b{color:#f3d4a7}.st-master-disabled{padding:16px;background:#2b2420;border:1px solid #684c39;border-radius:8px;margin:12px 0}.st-master-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}.st-master-sticky{position:sticky;top:10px}.st-master-pet-card,.st-master-pet-switch{background:#211f1c;border:1px solid #413a33;border-radius:10px;padding:14px;margin-bottom:12px}.st-master-pet-card img{display:block;width:100%;max-height:190px;object-fit:contain;border-radius:7px;background:#111}.st-master-pet-card h3{font-size:22px;color:#fff;margin:10px 0 2px}.st-master-meta{color:#bfae9e;margin-bottom:12px}.st-master-stat{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #36312b}.st-master-stat b{color:#fff}.st-master-note{font-size:11px;line-height:1.45;color:#bcb2a7;background:#191816;border:1px solid #34302b;padding:8px;border-radius:6px;margin:10px 0}.st-master-mini{display:grid;gap:5px;margin:10px 0}.st-master-mini span{display:flex;justify-content:space-between}.st-master-reset-form button,.st-master-node button{width:100%;border:1px solid #9b7350;background:#6f4b2f;color:#fff;font-weight:700;border-radius:6px;padding:9px;cursor:pointer}.st-master-reset-form button:hover,.st-master-node button:hover{background:#825c3b}.st-master-pet-switch strong{display:block;margin-bottom:8px}.st-master-pet-switch a{display:block;color:#ddd;text-decoration:none;padding:7px 8px;border-radius:5px}.st-master-pet-switch a.active{background:#6f4b2f;color:#fff}.st-master-tree{min-width:0}.st-master-tier{background:#1e1c1a;border:1px solid #39342f;border-radius:10px;margin-bottom:15px;overflow:hidden}.st-master-tier>header{display:flex;justify-content:space-between;gap:8px;padding:11px 13px;background:#282522;border-bottom:1px solid #3c3731}.st-master-tier>header span{font-size:12px;color:#c8bfb5}.st-master-tier.tier1>header{border-left:5px solid #4f80b5}.st-master-tier.tier2>header{border-left:5px solid #4c8d65}.st-master-tier.tier3>header{border-left:5px solid #b0783f}.st-master-tier.tier4>header{border-left:5px solid #9f4b46}.st-master-node-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px}.st-master-node{background:#24211e;border:1px solid #443d36;border-radius:8px;padding:12px;min-height:190px;display:flex;flex-direction:column}.st-master-node h3{margin:0 0 5px;color:#fff;font-size:17px}.st-master-node p{color:#cfc5b9;min-height:38px}.st-master-level{margin:5px 0}.st-master-level-dots{background:#171614;border:1px solid #37312c;border-radius:5px;padding:5px 8px;color:#e8c999}.st-master-cost{display:flex;justify-content:space-between;gap:7px;color:#d8c3a9;font-size:12px;margin:9px 0}.st-master-node form{margin-top:auto}.st-master-node.locked,.st-master-node.disabled{opacity:.55}.st-master-lock,.st-master-max{margin-top:auto;text-align:center;padding:9px;border-radius:6px;background:#171614;color:#c7bbaa}.st-master-modal[hidden]{display:none}.st-master-modal{position:fixed;inset:0;background:rgba(0,0,0,.67);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px}.st-master-modal>div{width:min(420px,100%);background:#24201c;border:1px solid #7e5d43;border-radius:10px;padding:18px;color:#fff;box-shadow:0 12px 45px rgba(0,0,0,.45)}.st-master-modal h3{margin-top:0}.st-master-modal button{background:#6f4b2f;color:#fff;border:1px solid #9b7350;border-radius:6px;padding:8px 18px;cursor:pointer}
@media(max-width:900px){.st-master-layout{grid-template-columns:1fr}.st-master-sticky{position:sticky;top:0;z-index:30}.st-master-pet-card{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;padding:9px}.st-master-pet-card img,.st-master-pet-card .st-master-note{display:none}.st-master-pet-card h3,.st-master-pet-card .st-master-meta,.st-master-pet-card .st-master-mini,.st-master-pet-card .st-master-reset-form{grid-column:1/-1}.st-master-stat{font-size:12px;padding:3px 0}.st-master-pet-switch{display:none}.st-master-node-grid{grid-template-columns:1fr 1fr}.st-master-head{display:block}.st-master-wallet{justify-content:flex-start;margin-top:10px}}
@media(max-width:560px){.st-master-node-grid{grid-template-columns:1fr}.st-master-tier>header{display:block}.st-master-tier>header span{display:block;margin-top:3px}.st-master-wallet span{font-size:11px}.st-master-pet-card .st-master-mini{display:flex;gap:10px;flex-wrap:wrap}.st-master-pet-card .st-master-mini span{gap:4px}}
.st-master-open-btn{display:block;margin:7px 0 0;text-align:center;text-decoration:none!important;background:#6f4b2f;color:#fff!important;border:1px solid #906847;border-radius:7px;padding:9px 12px;font-weight:800;letter-spacing:.4px}.st-master-open-btn:hover{background:#80593a;color:#fff!important}
.st-master-history{background:#211f1c;border:1px solid #413a33;border-radius:10px;padding:14px;margin-top:14px}.st-master-history h3{margin-top:0;color:#fff}.st-master-history-list{display:grid;gap:6px}.st-master-history-list>div{display:grid;grid-template-columns:70px 1fr auto;gap:10px;align-items:center;background:#191816;border:1px solid #322e29;border-radius:6px;padding:7px 9px}.st-master-history-list b.plus{color:#8ed09c}.st-master-history-list b.minus{color:#e2968f}.st-master-history-list small{color:#9f978e}@media(max-width:560px){.st-master-history-list>div{grid-template-columns:55px 1fr}.st-master-history-list small{grid-column:2}}
/* Master GĐ2: hiển thị điểm gốc + phần tăng Master, sticky gọn trên mobile. */
.st-master-stat b{display:inline-flex;align-items:baseline;gap:5px}.st-master-stat em{font-style:normal;color:#e4b77c;font-size:12px;font-weight:800}.st-master-support{margin:10px 0;padding:9px;border:1px solid #4a4138;border-radius:7px;background:#191714}.st-master-support>strong{display:block;color:#f0d3a8;margin-bottom:5px;font-size:12px}.st-master-support>div{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-top:1px solid rgba(255,255,255,.06);font-size:11px}.st-master-support>div:first-of-type{border-top:0}.st-master-support span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d7cec2}.st-master-support b{color:#f3d09f;white-space:nowrap}
@media(max-width:900px){.st-master-sticky{top:4px;z-index:80}.st-master-pet-card{background:rgba(28,25,22,.84);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);box-shadow:0 8px 24px rgba(0,0,0,.28);border-color:rgba(160,124,85,.55)}.st-master-pet-card h3{margin-top:2px}.st-master-pet-card .st-master-support{grid-column:1/-1;margin:5px 0 2px;background:rgba(20,18,16,.7)}.st-master-stat em{font-size:11px}}
@media(max-width:560px){.st-master-pet-card{grid-template-columns:1fr 1fr;padding:7px 9px}.st-master-pet-card h3{font-size:16px;margin:0}.st-master-pet-card .st-master-meta{font-size:10px;margin:0 0 2px}.st-master-stat{padding:2px 0!important}.st-master-stat span{font-size:10px}.st-master-stat b{font-size:11px;gap:3px}.st-master-stat em{font-size:10px}.st-master-support>strong,.st-master-support>div{font-size:10px}.st-master-pet-card .st-master-mini{display:none}.st-master-pet-card .st-master-reset-form{display:none}}

/* Master 1.1.04 — modal Reset trong game, thay confirm trình duyệt. */
.st-master-confirm>div{text-align:center;max-width:440px;background:linear-gradient(180deg,#29241f 0%,#1e1b18 100%);border-color:#9a704d;box-shadow:0 18px 55px rgba(0,0,0,.58)}.st-master-confirm-icon{width:48px;height:48px;margin:0 auto 10px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#6f4b2f;border:1px solid #b48760;color:#fff;font-size:20px}.st-master-confirm h3{font-size:20px;color:#fff;margin:0 0 8px}.st-master-confirm p{color:#d8cec2;line-height:1.5;margin:0 auto 16px;max-width:370px}.st-master-confirm p strong{color:#f0c991}.st-master-confirm-actions{display:flex;gap:10px;justify-content:center}.st-master-confirm-actions button{min-width:125px;font-weight:800}.st-master-confirm-actions .cancel{background:#34302c;border-color:#595047;color:#e4ddd5}.st-master-confirm-actions .confirm{background:#7c5030;border-color:#b17b51;color:#fff}.st-master-confirm-actions .confirm:hover{background:#8d5c38}@media(max-width:560px){.st-master-confirm>div{max-width:92vw;padding:16px}.st-master-confirm-actions button{min-width:0;flex:1;padding:9px 8px}}

/* 1.1.05 - Phá khống chế: chỉ bổ sung hiệu ứng mới, không thay đổi các hiệu ứng skill cũ. */
.st-battle-slot .st-status-pop.break-control{font-size:16px!important;font-weight:1000!important;color:#bafff5!important;background:rgba(0,118,112,.94)!important;border:1px solid rgba(190,255,249,.86)!important;text-shadow:0 0 8px rgba(113,255,236,.85)!important;box-shadow:0 0 18px rgba(99,255,236,.48),0 4px 16px rgba(0,0,0,.28)!important}
.st-break-control-glow{position:absolute;z-index:36;inset:-14%;border-radius:24px;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.92) 0%,rgba(255,255,255,.58) 24%,rgba(199,255,249,.28) 48%,rgba(255,255,255,0) 72%);filter:blur(2px);mix-blend-mode:screen}
.st-break-control-glow.show{animation:stBreakControlGlow 1.05s ease-out both}
@keyframes stBreakControlGlow{0%{opacity:0;transform:scale(.72)}18%{opacity:1;transform:scale(1.08)}55%{opacity:.8;transform:scale(1.16)}100%{opacity:0;transform:scale(1.28)}}
@media(max-width:700px){.st-battle-slot .st-status-pop.break-control{font-size:12px!important}.st-break-control-glow{inset:-10%}}


/* 1.1.09 — KILLER showcase: giữ ảnh card nguyên gốc; tăng hào quang đỏ ở vai/gáy khi xem riêng. */
.st-killer-showcase[hidden]{display:none}.st-killer-showcase{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;padding:14px;overflow:hidden}.st-killer-showcase-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(82,0,96,.42),rgba(9,3,12,.94) 58%,#030204 100%);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.st-killer-showcase-stage{position:relative;width:min(720px,96vw);height:min(780px,88vh);min-height:500px;overflow:hidden;border:1px solid rgba(255,66,102,.48);border-radius:22px;background:radial-gradient(circle at 50% 48%,rgba(151,20,70,.22),rgba(24,5,27,.68) 55%,rgba(4,3,8,.94));box-shadow:0 24px 90px rgba(0,0,0,.8),inset 0 0 70px rgba(141,19,91,.15);isolation:isolate}.st-killer-showcase-stage:before{content:"";position:absolute;left:50%;bottom:19%;width:72%;height:17%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(255,35,83,.38),rgba(128,0,113,.15) 43%,transparent 72%);filter:blur(8px);animation:stKillerPulse 2.8s ease-in-out infinite}.st-killer-showcase-aura{position:absolute;left:50%;top:43%;width:min(68vw,480px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,34,78,.0) 0 11deg,rgba(255,35,86,.22) 13deg 15deg,rgba(119,0,143,.0) 18deg 31deg);filter:drop-shadow(0 0 16px rgba(245,22,89,.55));animation:stKillerAura 16s linear infinite;z-index:-1}.st-killer-showcase-aura:after{content:"";position:absolute;inset:13%;border:1px solid rgba(255,74,115,.38);border-radius:50%;box-shadow:0 0 35px rgba(203,21,112,.35),inset 0 0 30px rgba(99,0,121,.28)}.st-killer-showcase-hero{position:absolute;inset:5% 5% 13%;display:flex;align-items:center;justify-content:center;animation:stKillerFloat 3.7s ease-in-out infinite}.st-killer-showcase-hero img{display:block;max-width:88%;max-height:83%;object-fit:contain;filter:drop-shadow(0 22px 18px rgba(0,0,0,.62)) drop-shadow(0 0 13px rgba(232,33,94,.22));transform:scale(1.08);transform-origin:50% 55%}.st-killer-showcase-hero:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 35% 39%,rgba(255,28,48,.72) 0,rgba(255,18,42,.34) 12%,transparent 30%),radial-gradient(ellipse at 65% 39%,rgba(255,28,48,.72) 0,rgba(255,18,42,.34) 12%,transparent 30%),radial-gradient(ellipse at 50% 29%,rgba(255,38,55,.58) 0,rgba(255,15,40,.24) 13%,transparent 28%);mix-blend-mode:screen;filter:blur(9px) drop-shadow(0 0 18px rgba(255,20,45,.82));opacity:.82;animation:stKillerShoulderGlow 2.45s ease-in-out infinite}.st-killer-showcase-hero img{position:relative;z-index:1}.st-killer-showcase-fog{position:absolute;left:-10%;right:-10%;bottom:8%;height:28%;background:radial-gradient(ellipse at 50% 75%,rgba(83,0,91,.55),transparent 60%),linear-gradient(to top,rgba(5,3,9,.98) 8%,rgba(23,4,28,.73) 45%,transparent);filter:blur(2px);pointer-events:none}.st-killer-showcase-info{position:absolute;left:0;right:0;bottom:5%;text-align:center;padding:0 58px;color:#fff;text-shadow:0 2px 10px #000}.st-killer-showcase-info small{font-weight:900;letter-spacing:.22em;color:#ff426b}.st-killer-showcase-info h2{font-size:clamp(27px,6vw,46px);line-height:1;margin:5px 0 9px;text-transform:uppercase;color:#fff}.st-killer-showcase-info>div{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.st-killer-showcase-info span,.st-killer-showcase-info b,.st-killer-showcase-info strong{padding:5px 9px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(8,4,12,.58);font-size:12px}.st-killer-showcase-close{position:absolute;right:13px;top:12px;z-index:6;width:40px;height:40px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(0,0,0,.48);color:#fff;font-size:26px;line-height:34px;cursor:pointer}.st-killer-showcase-hint{position:absolute;right:16px;bottom:12px;color:rgba(255,255,255,.42);font-size:10px}.st-killer-showcase-sparks i{position:absolute;width:4px;height:4px;border-radius:50%;background:#ff5577;box-shadow:0 0 12px #ff315e;animation:stKillerSpark 4s ease-in-out infinite}.st-killer-showcase-sparks i:nth-child(1){left:19%;top:28%}.st-killer-showcase-sparks i:nth-child(2){left:76%;top:34%;animation-delay:-.7s}.st-killer-showcase-sparks i:nth-child(3){left:28%;top:62%;animation-delay:-1.4s}.st-killer-showcase-sparks i:nth-child(4){left:69%;top:67%;animation-delay:-2.1s}.st-killer-showcase-sparks i:nth-child(5){left:39%;top:19%;animation-delay:-2.8s}.st-killer-showcase-sparks i:nth-child(6){left:84%;top:54%;animation-delay:-3.3s}.st-killer-showcase-trigger{cursor:zoom-in}.st-showcase-open{overflow:hidden}@keyframes stKillerFloat{0%,100%{transform:translateY(7px) scale(1)}50%{transform:translateY(-9px) scale(1.015)}}@keyframes stKillerAura{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes stKillerPulse{0%,100%{opacity:.55;transform:translateX(-50%) scale(.94)}50%{opacity:1;transform:translateX(-50%) scale(1.06)}}@keyframes stKillerSpark{0%,100%{opacity:0;transform:translateY(18px) scale(.5)}35%{opacity:1}70%{opacity:.4;transform:translateY(-32px) scale(1.5)}}@keyframes stKillerShoulderGlow{0%,100%{opacity:.62;filter:blur(10px) drop-shadow(0 0 14px rgba(255,20,45,.65))}50%{opacity:1;filter:blur(7px) drop-shadow(0 0 28px rgba(255,24,48,.98))}}@media(max-width:600px){.st-killer-showcase{padding:0}.st-killer-showcase-stage{width:100vw;height:100dvh;min-height:100dvh;border:0;border-radius:0}.st-killer-showcase-hero{inset:7% 0 15%}.st-killer-showcase-hero img{max-width:98%;max-height:78%;transform:scale(1.14)}.st-killer-showcase-info{bottom:6%;padding:0 40px}.st-killer-showcase-hint{display:none}}@media(prefers-reduced-motion:reduce){.st-killer-showcase *{animation:none!important}}
\n\n/* 1.1.10 — Showcase động cho toàn bộ Role. Không phủ màu lên card; glow chỉ xuất hiện trong màn xem riêng. */
.st-killer-showcase{--show-rgb:255,38,67;--show-rgb2:122,0,118;--show-accent:#ff4965;--show-glow-opacity:.52;--show-glow-peak:.78}
.st-killer-showcase.st-showcase-role-killer{--show-rgb:255,38,67;--show-rgb2:132,0,108;--show-accent:#ff4965;--show-glow-opacity:.46;--show-glow-peak:.72}
.st-killer-showcase.st-showcase-role-tank{--show-rgb:58,139,255;--show-rgb2:74,215,255;--show-accent:#54a6ff;--show-glow-opacity:.42;--show-glow-peak:.66}
.st-killer-showcase.st-showcase-role-gladiator{--show-rgb:238,173,49;--show-rgb2:255,111,24;--show-accent:#eeb43f;--show-glow-opacity:.43;--show-glow-peak:.68}
.st-killer-showcase.st-showcase-role-support{--show-rgb:46,218,112;--show-rgb2:151,255,188;--show-accent:#43dd83;--show-glow-opacity:.36;--show-glow-peak:.58}
.st-killer-showcase.st-showcase-role-warlock{--show-rgb:174,55,255;--show-rgb2:103,31,211;--show-accent:#bd62ff;--show-glow-opacity:.44;--show-glow-peak:.70}
.st-killer-showcase .st-killer-showcase-backdrop{background:radial-gradient(circle at 50% 42%,rgba(var(--show-rgb2),.30),rgba(9,3,12,.94) 58%,#030204 100%)}
.st-killer-showcase .st-killer-showcase-stage{border-color:rgba(var(--show-rgb),.42);background:radial-gradient(circle at 50% 48%,rgba(var(--show-rgb),.15),rgba(24,5,27,.68) 55%,rgba(4,3,8,.94));box-shadow:0 24px 90px rgba(0,0,0,.8),inset 0 0 70px rgba(var(--show-rgb2),.11)}
.st-killer-showcase .st-killer-showcase-stage:before{background:radial-gradient(ellipse,rgba(var(--show-rgb),.25),rgba(var(--show-rgb2),.11) 43%,transparent 72%)}
.st-killer-showcase .st-killer-showcase-aura{background:repeating-conic-gradient(from 0deg,rgba(var(--show-rgb),0) 0 11deg,rgba(var(--show-rgb),.15) 13deg 15deg,rgba(var(--show-rgb2),0) 18deg 31deg);filter:drop-shadow(0 0 14px rgba(var(--show-rgb),.38))}
.st-killer-showcase .st-killer-showcase-aura:after{border-color:rgba(var(--show-rgb),.27);box-shadow:0 0 30px rgba(var(--show-rgb),.24),inset 0 0 25px rgba(var(--show-rgb2),.20)}
.st-killer-showcase .st-killer-showcase-hero img{filter:drop-shadow(0 22px 18px rgba(0,0,0,.62)) drop-shadow(0 0 11px rgba(var(--show-rgb),.15))}
.st-killer-showcase .st-killer-showcase-hero:after{background:radial-gradient(ellipse at 35% 39%,rgba(var(--show-rgb),.62) 0,rgba(var(--show-rgb),.25) 12%,transparent 29%),radial-gradient(ellipse at 65% 39%,rgba(var(--show-rgb),.62) 0,rgba(var(--show-rgb),.25) 12%,transparent 29%),radial-gradient(ellipse at 50% 29%,rgba(var(--show-rgb),.43) 0,rgba(var(--show-rgb),.17) 13%,transparent 27%);mix-blend-mode:screen;filter:blur(10px) drop-shadow(0 0 15px rgba(var(--show-rgb),.58));opacity:var(--show-glow-opacity);animation:stRoleShoulderGlow 2.7s ease-in-out infinite}
.st-killer-showcase .st-killer-showcase-info small{color:var(--show-accent)}
.st-killer-showcase .st-killer-showcase-sparks i{background:rgb(var(--show-rgb));box-shadow:0 0 10px rgba(var(--show-rgb),.9)}
.st-killer-showcase.st-showcase-role-tank .st-killer-showcase-hero{animation-duration:4.5s}
.st-killer-showcase.st-showcase-role-support .st-killer-showcase-hero{animation-duration:4.2s}
.st-killer-showcase.st-showcase-role-gladiator .st-killer-showcase-hero{animation-duration:3.9s}
.st-killer-showcase.st-showcase-role-warlock .st-killer-showcase-aura{animation-duration:12s}
@keyframes stRoleShoulderGlow{0%,100%{opacity:var(--show-glow-opacity);filter:blur(11px) drop-shadow(0 0 12px rgba(var(--show-rgb),.48))}50%{opacity:var(--show-glow-peak);filter:blur(9px) drop-shadow(0 0 22px rgba(var(--show-rgb),.72))}}

/* 1.1.12 — Showcase: hiện số sao hiện có trực tiếp trên ảnh tướng khi xem riêng. */
.st-killer-showcase .st-showcase-stars{position:absolute;left:50%;top:7%;z-index:5;transform:translateX(-50%);padding:4px 10px;border-radius:999px;background:rgba(5,5,9,.58);border:1px solid rgba(230,235,245,.46);color:#dce3ec;font-size:clamp(17px,3.2vw,25px);font-weight:950;line-height:1;letter-spacing:2px;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.9);box-shadow:0 3px 15px rgba(0,0,0,.35);pointer-events:none}
.st-killer-showcase .st-showcase-stars[hidden]{display:none}
.st-killer-showcase .st-showcase-stars.is-gold{color:#ffd52a;border-color:rgba(255,213,42,.58);text-shadow:0 0 3px #fff6b0,0 0 8px rgba(255,190,0,.72),0 1px 2px rgba(80,45,0,.85)}
@media(max-width:600px){.st-killer-showcase .st-showcase-stars{top:6%;padding:3px 8px;letter-spacing:1.5px}}


/* 1.1.13 — Master responsive recovery: khóa kích thước card PC và dùng select đổi Tướng trên mobile. */
.st-master-page .st-master-pet-card img{display:block;width:100%;height:auto;max-width:270px;max-height:190px;margin:0 auto;object-fit:contain}
.st-master-pet-mobile-switch{display:none}
@media(max-width:900px){
 .st-master-page .st-master-layout{display:block!important}
 .st-master-page .st-master-sticky{position:relative!important;top:auto!important;z-index:auto!important}
 .st-master-page .st-master-pet-card img{display:none!important}
 .st-master-page .st-master-pet-switch{display:none!important}
 .st-master-page .st-master-pet-mobile-switch{display:block;margin:0 0 10px;padding:9px;background:#211f1c;border:1px solid #413a33;border-radius:8px}
 .st-master-page .st-master-pet-mobile-switch label{display:block;margin:0 0 5px;color:#f3d4a7;font-size:12px;font-weight:800}
 .st-master-page .st-master-pet-mobile-switch select{display:block;width:100%;max-width:100%;box-sizing:border-box;background:#171614;color:#fff;border:1px solid #6f4b2f;border-radius:6px;padding:9px 34px 9px 10px;font-weight:700}
 .st-master-page .st-master-tree{width:100%;min-width:0}
}


/* 1.1.14 — Mobile Master picker: giao diện nâu-xám đồng bộ, danh sách cuộn gọn. */
@media(max-width:900px){
 .st-master-page .st-master-pet-mobile-switch{display:block;margin:0 0 10px;padding:10px;background:#211f1c;border:1px solid #413a33;border-radius:8px;color:#eee7de}
 .st-master-page .st-master-pet-mobile-switch>strong{display:block;margin:0;color:#f3d4a7;font-size:13px;font-weight:850}
 .st-master-page .st-master-pet-mobile-switch>small{display:block;margin:3px 0 8px;color:#bdb4aa;font-size:10.5px;line-height:1.35}
 .st-master-page .st-master-mobile-picker{margin:0;border:1px solid #6b6259;border-radius:7px;background:#292622;overflow:hidden}
 .st-master-page .st-master-mobile-picker summary{display:flex;align-items:center;justify-content:space-between;gap:10px;box-sizing:border-box;padding:9px 10px;color:#f4eee6;background:#292622;font-size:12px;font-weight:750;line-height:1.25;cursor:pointer;list-style:none}
 .st-master-page .st-master-mobile-picker summary::-webkit-details-marker{display:none}
 .st-master-page .st-master-mobile-picker summary span{color:#d8c5ae;font-size:12px;transition:transform .18s ease}
 .st-master-page .st-master-mobile-picker[open] summary span{transform:rotate(180deg)}
 .st-master-page .st-master-mobile-options{max-height:220px;overflow-y:auto;overscroll-behavior:contain;background:#211f1c;border-top:1px solid rgba(255,255,255,.78);scrollbar-width:thin;scrollbar-color:#8d8277 #211f1c}
 .st-master-page .st-master-mobile-options a{display:block;padding:7px 10px;color:#ddd6cf!important;background:#211f1c;text-decoration:none!important;font-size:11px;font-weight:650;line-height:1.25;border-bottom:1px solid rgba(255,255,255,.72);white-space:normal;overflow-wrap:anywhere}
 .st-master-page .st-master-mobile-options a:last-child{border-bottom:0}
 .st-master-page .st-master-mobile-options a.active{background:#6f4b2f;color:#fff!important}
 .st-master-page .st-master-mobile-options a:active{background:#55483e}
 .st-master-page .st-master-mobile-options::-webkit-scrollbar{width:7px}
 .st-master-page .st-master-mobile-options::-webkit-scrollbar-track{background:#211f1c}
 .st-master-page .st-master-mobile-options::-webkit-scrollbar-thumb{background:#8d8277;border-radius:8px;border:2px solid #211f1c}
}


/* 1.1.15 — Mobile: chuẩn hóa toàn bộ khung theo Đội hình + menu 3 cột. */
.st-feature-placeholder{box-sizing:border-box;width:100%;max-width:100%;margin:12px 0;padding:16px;background:#211f1c;border:1px solid #413a33;border-radius:10px;color:#d8d0c7}.st-feature-placeholder h1{margin:0 0 8px;color:#fff}
@media(max-width:900px){
 .st-wrap,.st-game-wrap,.st-match-wrap,.st-master-page,.st-mobile-safe-page{box-sizing:border-box;width:100%;max-width:100%;min-width:0}
 .st-wrap *,.st-game-wrap *,.st-match-wrap *,.st-master-page *,.st-mobile-safe-page *{box-sizing:border-box;min-width:0}
 .st-tabs.st-tabs-main{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;width:100%;max-width:100%;margin-left:0;margin-right:0}
 .st-tabs.st-tabs-main>a{display:flex;align-items:center;justify-content:center;gap:3px;width:100%;min-width:0;max-width:100%;min-height:38px;margin:0;padding:5px 3px;text-align:center;white-space:normal;overflow-wrap:anywhere;line-height:1.12;font-size:10.5px}
 .st-tabs.st-tabs-main>a i{flex:0 0 auto;margin:0;font-size:10px}
 .st-team-box,.st-upgrade-grid,.st-upgrade-card,.st-opponents,.st-opponent,.st-match-my,.st-mini-formation,.st-rank-view,.st-rank-v2-panels,.st-master-layout,.st-master-sticky,.st-master-pet-card,.st-master-tree,.st-master-tier,.st-master-node-grid,.st-master-node,.st-master-head,.st-master-wallet,.st-feature-placeholder{width:100%;max-width:100%;min-width:0}
 .st-opponent-head,.st-match-my-head,.st-rank-view-head{max-width:100%;min-width:0;flex-wrap:wrap}
 .st-opponent-head>*,.st-match-my-head>*,.st-rank-view-head>*{min-width:0;max-width:100%}
 .st-opponent h3,.st-opponent p,.st-rank-row,.st-rank-history-row,.st-master-node p{overflow-wrap:anywhere}
 img,video,canvas,svg{max-width:100%}
 input,select,textarea,button{max-width:100%}
}
@media(max-width:560px){.st-tabs.st-tabs-main>a{font-size:9.5px;min-height:36px;padding:5px 2px}.st-tabs.st-tabs-main>a i{font-size:9px}}


/* 1.1.16 — Navigation: desktop 9 ô cân tuyệt đối; mobile 3x3; không icon. */
.st-tabs.st-tabs-main{
 display:grid;
 grid-template-columns:repeat(9,minmax(0,1fr));
 gap:8px;
 width:100%;
 max-width:100%;
 align-items:stretch;
}
.st-tabs.st-tabs-main>a{
 box-sizing:border-box;
 display:flex;
 align-items:center;
 justify-content:center;
 width:100%;
 min-width:0;
 max-width:100%;
 min-height:54px;
 margin:0;
 padding:8px 5px!important;
 text-align:center;
 white-space:normal;
 overflow-wrap:normal;
 word-break:normal;
 line-height:1.22;
 font-size:12px;
}
.st-tabs.st-tabs-main>a .icon{display:none!important}
.st-tabs.st-tabs-main>a.active,
.st-game-wrap .st-tabs.st-tabs-main>a.active,
.st-match-wrap .st-tabs.st-tabs-main>a.active,
.st-upgrade-wrap .st-tabs.st-tabs-main>a.active{
 padding:8px 5px!important;
 font-size:12px!important;
}
@media(max-width:900px){
 .st-tabs.st-tabs-main{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  width:100%;
  max-width:100%;
  overflow:visible;
  padding:0;
 }
 .st-tabs.st-tabs-main>a,
 .st-tabs.st-tabs-main>a.active,
 .st-game-wrap .st-tabs.st-tabs-main>a.active,
 .st-match-wrap .st-tabs.st-tabs-main>a.active,
 .st-upgrade-wrap .st-tabs.st-tabs-main>a.active{
  width:100%;min-width:0;max-width:100%;
  min-height:48px;
  padding:6px 4px!important;
  margin:0!important;
  font-size:11px!important;
  line-height:1.18;
  white-space:normal!important;
  overflow:hidden;
  overflow-wrap:normal;
  word-break:normal;
 }
}
@media(max-width:380px){
 .st-tabs.st-tabs-main{gap:5px}
 .st-tabs.st-tabs-main>a,
 .st-tabs.st-tabs-main>a.active{font-size:10px!important;padding:5px 3px!important;min-height:46px}
}


/* 1.1.17 — Skill clarity + mobile width hardening (không che overflow). */
.st-master-skill-full>div.st-master-skill-row{display:block;padding:7px 0;border-top:1px solid rgba(255,255,255,.12)}
.st-master-skill-full .st-master-skill-name{display:block;color:#f0d3a8;font-weight:800;white-space:normal;overflow:visible;text-overflow:clip;margin-bottom:2px}
.st-master-skill-full .st-master-skill-row small{display:block;color:#e9c77d;font-size:10px;line-height:1.35}
.st-master-skill-full .st-master-skill-row em{display:block;color:#bdb4aa;font-style:normal;font-size:9.5px;line-height:1.35;margin-top:2px;overflow-wrap:anywhere}
@media(max-width:900px){
 html,body{max-width:100%}
 .st-game-wrap,.st-match-wrap,.st-battle-wrap,.st-upgrade-wrap,.st-master-page,.st-mobile-safe-page{box-sizing:border-box!important;width:auto!important;max-width:100%!important;min-width:0!important;margin-left:0!important;margin-right:0!important}
 .st-game-wrap>.st-tabs,.st-game-wrap>.st-hero,.st-game-wrap>.st-team-box,.st-game-wrap>.st-feature-placeholder,.st-match-wrap>* ,.st-upgrade-wrap>* ,.st-master-page>* ,.st-mobile-safe-page>*{box-sizing:border-box;max-width:100%;min-width:0}
 .st-feature-placeholder{width:auto!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;padding:14px!important}
 .st-feature-placeholder h1,.st-feature-placeholder h2,.st-feature-placeholder p{max-width:100%;overflow-wrap:anywhere;word-break:normal}
 .st-tabs.st-tabs-main{box-sizing:border-box!important;width:100%!important;max-width:100%!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .st-tabs.st-tabs-main>a{min-width:0!important;width:auto!important;max-width:100%!important}
 .st-master-layout,.st-master-tree,.st-master-tier,.st-master-node-grid,.st-master-node,.st-upgrade-grid,.st-upgrade-card,.st-opponents,.st-opponent,.st-rank-view,.st-rank-v2-panels{box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important}
}

/* 1.1.18 — MOBILE ONLY: khóa layout 3x3 và đồng bộ chiều ngang mọi màn theo Đội hình. Desktop giữ nguyên. */
@media (max-width:900px){
  /* Các màn không mang st-wrap (Master/Nhiệm vụ/Tháp) vẫn dùng đúng vùng an toàn như Đội hình. */
  .st-game-wrap,
  .st-match-wrap,
  .st-upgrade-wrap,
  .st-master-page,
  .st-mobile-safe-page{
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    min-width:0;
    padding-left:14px;
    padding-right:14px;
  }

  /* Xóa placement responsive cũ 6 cột: mọi trang dùng đúng một ma trận 3x3. */
  .st-game-wrap .st-tabs.st-tabs-main,
  .st-match-wrap .st-tabs.st-tabs-main,
  .st-upgrade-wrap .st-tabs.st-tabs-main,
  .st-master-page .st-tabs.st-tabs-main{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:repeat(3,52px);
    gap:6px;
    width:100%;
    max-width:100%;
    margin:14px 0;
    padding:0;
  }
  .st-game-wrap .st-tabs.st-tabs-main>a,
  .st-match-wrap .st-tabs.st-tabs-main>a,
  .st-upgrade-wrap .st-tabs.st-tabs-main>a,
  .st-master-page .st-tabs.st-tabs-main>a{
    grid-column:auto;
    grid-row:auto;
    box-sizing:border-box;
    width:100%;
    min-width:0;
    max-width:100%;
    height:52px;
    min-height:52px;
    margin:0;
    padding:5px 4px!important;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    white-space:normal!important;
    overflow:hidden;
    overflow-wrap:normal;
    word-break:normal;
    font-size:11px!important;
    line-height:1.16;
  }

  /* Thứ tự cố định: 1 Đội hình / Nâng cấp / Master; 2 NV / PVP / Rank; 3 hai Tháp / Shop. */
  .st-game-wrap .st-tabs.st-tabs-main .st-tab-team,
  .st-match-wrap .st-tabs.st-tabs-main .st-tab-team,
  .st-upgrade-wrap .st-tabs.st-tabs-main .st-tab-team,
  .st-master-page .st-tabs.st-tabs-main .st-tab-team{grid-column:1;grid-row:1}
  .st-game-wrap .st-tabs.st-tabs-main .st-tab-upgrade,
  .st-match-wrap .st-tabs.st-tabs-main .st-tab-upgrade,
  .st-upgrade-wrap .st-tabs.st-tabs-main .st-tab-upgrade,
  .st-master-page .st-tabs.st-tabs-main .st-tab-upgrade{grid-column:2;grid-row:1}
  .st-game-wrap .st-tabs.st-tabs-main .st-tab-master,
  .st-match-wrap .st-tabs.st-tabs-main .st-tab-master,
  .st-upgrade-wrap .st-tabs.st-tabs-main .st-tab-master,
  .st-master-page .st-tabs.st-tabs-main .st-tab-master{grid-column:3;grid-row:1}
  .st-game-wrap .st-tabs.st-tabs-main .st-tab-daily,
  .st-match-wrap .st-tabs.st-tabs-main .st-tab-daily,
  .st-upgrade-wrap .st-tabs.st-tabs-main .st-tab-daily,
  .st-master-page .st-tabs.st-tabs-main .st-tab-daily{grid-column:1;grid-row:2}
  .st-game-wrap .st-tabs.st-tabs-main .st-tab-match,
  .st-match-wrap .st-tabs.st-tabs-main .st-tab-match,
  .st-upgrade-wrap .st-tabs.st-tabs-main .st-tab-match,
  .st-master-page .st-tabs.st-tabs-main .st-tab-match{grid-column:2;grid-row:2}
  .st-game-wrap .st-tabs.st-tabs-main .st-tab-rank,
  .st-match-wrap .st-tabs.st-tabs-main .st-tab-rank,
  .st-upgrade-wrap .st-tabs.st-tabs-main .st-tab-rank,
  .st-master-page .st-tabs.st-tabs-main .st-tab-rank{grid-column:3;grid-row:2}
  .st-game-wrap .st-tabs.st-tabs-main .st-tab-tower,
  .st-match-wrap .st-tabs.st-tabs-main .st-tab-tower,
  .st-upgrade-wrap .st-tabs.st-tabs-main .st-tab-tower,
  .st-master-page .st-tabs.st-tabs-main .st-tab-tower{grid-column:1;grid-row:3}
  .st-game-wrap .st-tabs.st-tabs-main .st-tab-tower-hard,
  .st-match-wrap .st-tabs.st-tabs-main .st-tab-tower-hard,
  .st-upgrade-wrap .st-tabs.st-tabs-main .st-tab-tower-hard,
  .st-master-page .st-tabs.st-tabs-main .st-tab-tower-hard{grid-column:2;grid-row:3}
  .st-game-wrap .st-tabs.st-tabs-main .st-tab-shop,
  .st-match-wrap .st-tabs.st-tabs-main .st-tab-shop,
  .st-upgrade-wrap .st-tabs.st-tabs-main .st-tab-shop,
  .st-master-page .st-tabs.st-tabs-main .st-tab-shop{grid-column:3;grid-row:3}

  /* Không để card con cộng width + padding/border vượt wrapper. */
  .st-game-wrap>*,.st-match-wrap>*,.st-upgrade-wrap>*,.st-master-page>*,.st-mobile-safe-page>*,
  .st-feature-placeholder,.st-master-head,.st-master-layout,.st-master-tree,.st-master-tier,
  .st-master-node-grid,.st-master-node,.st-upgrade-grid,.st-upgrade-card,.st-opponents,.st-opponent,
  .st-match-my,.st-rank-view,.st-rank-v2-panels{
    box-sizing:border-box;
    max-width:100%;
    min-width:0;
  }
  .st-feature-placeholder{width:100%!important;margin-left:0!important;margin-right:0!important}
}
@media (max-width:380px){
  .st-game-wrap .st-tabs.st-tabs-main,
  .st-match-wrap .st-tabs.st-tabs-main,
  .st-upgrade-wrap .st-tabs.st-tabs-main,
  .st-master-page .st-tabs.st-tabs-main{grid-template-rows:repeat(3,50px);gap:5px}
  .st-game-wrap .st-tabs.st-tabs-main>a,
  .st-match-wrap .st-tabs.st-tabs-main>a,
  .st-upgrade-wrap .st-tabs.st-tabs-main>a,
  .st-master-page .st-tabs.st-tabs-main>a{height:50px;min-height:50px;font-size:10px!important;padding:4px 3px!important}
}


/* 1.1.27 — Viền Hệ mảnh đồng bộ + tam giác Hệ đúng trên ảnh Nâng cấp. */
.st-upgrade-wrap .st-upgrade-art{position:relative;display:block;overflow:hidden;border-radius:10px;line-height:0}
.st-upgrade-wrap .st-upgrade-art>img{display:block;width:100%;height:100%;object-fit:contain;margin:0}
.st-upgrade-wrap.st-elements-on .st-upgrade-card.st-element-card{border:1px solid #8b641f;box-shadow:none;overflow:visible}
.st-upgrade-wrap.st-elements-on .st-upgrade-art.st-element-art{outline:1px solid var(--st-element-color);outline-offset:-1px;box-shadow:0 0 4px var(--st-element-glow),inset 0 0 5px var(--st-element-glow)}
.st-upgrade-wrap.st-elements-on .st-upgrade-element-corner{position:absolute;left:0;bottom:0;z-index:4;width:26px;height:26px;clip-path:polygon(0 100%,0 0,100% 100%);background:linear-gradient(135deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.12) 34%,transparent 35%),linear-gradient(135deg,var(--st-element-color) 0%,rgba(0,0,0,.18) 100%);filter:drop-shadow(0 0 3px var(--st-element-glow));pointer-events:none}
/* Mỏng đồng bộ ở Đội hình / PVP / Trận đấu và mọi card dùng visual Hệ. */
.st-elements-on .st-card-visual.st-element-card{box-shadow:inset 0 0 0 1px var(--st-element-color),inset 0 0 7px var(--st-element-glow),0 0 3px var(--st-element-color),0 0 9px var(--st-element-glow)}
.st-elements-on .st-card-visual.st-element-card::after{inset:1px;border:1px solid var(--st-element-color);box-shadow:inset 0 0 5px var(--st-element-glow),0 0 5px var(--st-element-glow)}
.st-elements-on .st-element-slot>.st-card-visual.st-element-card{box-shadow:inset 0 0 0 1px var(--st-element-color),inset 0 0 8px var(--st-element-glow),0 0 4px var(--st-element-color),0 0 10px var(--st-element-glow)}
.st-elements-on .st-element-slot .st-card-art{outline:1px solid var(--st-element-color);outline-offset:-1px}
.st-game-wrap.st-elements-on .st-pet-image-wrap.st-pet-image-element{outline:1px solid var(--st-element-color);outline-offset:0;box-shadow:0 0 4px var(--st-element-color),0 0 9px var(--st-element-glow),inset 0 0 5px var(--st-element-glow)}
.st-game-wrap.st-elements-on .st-pet-image-wrap.st-pet-image-element::after{border-width:1px;box-shadow:inset 0 0 4px var(--st-element-glow),0 0 4px var(--st-element-glow)}
@media(max-width:600px){.st-upgrade-wrap.st-elements-on .st-upgrade-element-corner{width:21px;height:21px}}


/* 1.1.28 — Đồng bộ viền Hệ + một tam giác góc trái dưới theo mẫu Nâng cấp. */
.st-elements-on .st-card-visual.st-element-card{position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px var(--st-element-color),0 0 4px var(--st-element-glow)}
.st-elements-on .st-element-slot>.st-card-visual.st-element-card{box-shadow:inset 0 0 0 1px var(--st-element-color),0 0 4px var(--st-element-glow)}
.st-elements-on .st-card-visual.st-element-card::after{inset:0;border:1px solid var(--st-element-color);box-shadow:inset 0 0 4px var(--st-element-glow);border-radius:inherit}
/* Chỉ giữ MỘT góc Hệ; tắt tam giác phụ cũ nằm trong art. */
.st-elements-on .st-card-visual.st-element-card .st-card-art::before{content:none;display:none}
.st-elements-on .st-card-visual.st-element-card::before{content:"";position:absolute;left:0;bottom:0;z-index:9;width:26px;height:26px;border:0;clip-path:polygon(0 100%,0 0,100% 100%);background:linear-gradient(135deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.12) 34%,transparent 35%),linear-gradient(135deg,var(--st-element-color) 0%,rgba(0,0,0,.18) 100%);filter:drop-shadow(0 0 3px var(--st-element-glow));pointer-events:none}
.st-elements-on .st-card-visual-mini.st-element-card::before{width:21px;height:21px}
.st-elements-on .st-card-visual-battle.st-element-card::before,.st-elements-on .st-card-visual-formation.st-element-card::before,.st-elements-on .st-card-visual-grid.st-element-card::before{width:26px;height:26px;border:0}
.st-elements-on .st-element-slot .st-card-art{outline:1px solid var(--st-element-color);outline-offset:-1px;box-shadow:none}
/* Roster Đội hình: cùng kiểu viền/góc với Nâng cấp. */
.st-game-wrap.st-elements-on .st-pet-image-wrap.st-pet-image-element{outline:1px solid var(--st-element-color);outline-offset:-1px;box-shadow:0 0 4px var(--st-element-glow),inset 0 0 4px var(--st-element-glow)}
.st-game-wrap.st-elements-on .st-pet-image-wrap.st-pet-image-element::after{inset:0;border:1px solid var(--st-element-color);box-shadow:inset 0 0 4px var(--st-element-glow)}
.st-game-wrap.st-elements-on .st-pet-image-wrap.st-pet-image-element::before{width:26px;height:26px;border:0;clip-path:polygon(0 100%,0 0,100% 100%);background:linear-gradient(135deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.12) 34%,transparent 35%),linear-gradient(135deg,var(--st-element-color) 0%,rgba(0,0,0,.18) 100%);filter:drop-shadow(0 0 3px var(--st-element-glow))}
/* Master: thêm đúng khung ảnh Hệ và góc Hệ. */
.st-master-pet-art{position:relative;width:100%;max-width:270px;margin:0 auto;line-height:0;overflow:hidden;border-radius:7px}
.st-master-page .st-master-pet-art>img{display:block;width:100%;height:auto;max-width:270px;max-height:190px;margin:0 auto;object-fit:contain;border-radius:7px;background:#111}
.st-master-page.st-elements-on .st-master-pet-art.st-element-art{outline:1px solid var(--st-element-color);outline-offset:-1px;box-shadow:0 0 4px var(--st-element-glow),inset 0 0 4px var(--st-element-glow)}
.st-master-page.st-elements-on .st-master-pet-art.st-element-art::after{content:"";position:absolute;inset:0;z-index:3;border:1px solid var(--st-element-color);border-radius:7px;box-shadow:inset 0 0 4px var(--st-element-glow);pointer-events:none}
.st-master-page .st-master-element-corner{position:absolute;left:0;bottom:0;z-index:4;width:26px;height:26px;clip-path:polygon(0 100%,0 0,100% 100%);background:linear-gradient(135deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.12) 34%,transparent 35%),linear-gradient(135deg,var(--st-element-color) 0%,rgba(0,0,0,.18) 100%);filter:drop-shadow(0 0 3px var(--st-element-glow));pointer-events:none}
@media(max-width:900px){.st-master-page .st-master-pet-art{display:none}}
@media(max-width:600px){.st-elements-on .st-card-visual.st-element-card::before,.st-elements-on .st-card-visual-battle.st-element-card::before,.st-elements-on .st-card-visual-formation.st-element-card::before,.st-elements-on .st-card-visual-grid.st-element-card::before{width:21px;height:21px}.st-game-wrap.st-elements-on .st-pet-image-wrap.st-pet-image-element::before{width:21px;height:21px}.st-master-page .st-master-element-corner{width:21px;height:21px}}

/* 1.1.37 - Gameplay Tháp Chiến Thần / Tận Chiến */
.st-tower-page{border:1px solid #5f4713;border-radius:12px;background:linear-gradient(180deg,#171510,#0d0c09);padding:18px;color:#f5f2e8}
.st-tower-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.st-tower-head h1{margin:0 0 5px;font-size:28px}.st-tower-head p{margin:0;color:#d1c8b4}
.st-tower-floor-badge{min-width:110px;text-align:center;border:1px solid #9b6b16;border-radius:12px;background:#211807;padding:8px 14px}.st-tower-floor-badge small{display:block;color:#d8ad59;font-size:10px}.st-tower-floor-badge strong{display:block;font-size:28px;color:#ffb12b}
.st-tower-progress{height:8px;background:#29251d;border-radius:20px;overflow:hidden;margin:14px 0 18px}.st-tower-progress i{display:block;height:100%;background:linear-gradient(90deg,#e28b17,#ffd164)}
.st-tower-stage{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid #665129;border-radius:10px;background:#211f1b;padding:14px}.st-tower-stage.boss{border-color:#8e3c55;box-shadow:0 0 16px rgba(151,36,55,.22)}.st-tower-stage h2{margin:3px 0 0;color:#ff9f1f}.st-tower-rewards{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.st-tower-rewards span{background:#352711;border:1px solid #765317;border-radius:16px;padding:5px 9px;color:#ffd37c;font-size:12px}
.st-tower-powers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.st-tower-powers>div{background:#181713;border:1px solid #3d382c;border-radius:8px;padding:10px;text-align:center}.st-tower-powers strong{display:block;color:#ffc052;font-size:18px}.st-tower-team-title{margin:14px 0 8px}.st-tower-team{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.st-tower-unit{min-width:0;background:#151411;border:1px solid #4b4030;border-radius:8px;padding:7px;text-align:center}.st-tower-unit img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px;display:block;margin-bottom:6px}.st-tower-unit b,.st-tower-unit small,.st-tower-unit span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.st-tower-unit small{font-size:10px;color:#bbb09c}.st-tower-unit span{font-size:11px;color:#efbd65}.st-tower-fight-form{text-align:center;margin-top:16px}.st-tower-fight-btn{min-width:240px;padding:12px 22px!important;font-weight:800!important}.st-tower-message{padding:16px;border:1px solid #65512c;background:#201b12;border-radius:8px}.st-tower-message.success{border-color:#386e47;background:#112017}.st-tower-return-wrap{text-align:center;margin:12px auto;max-width:1050px}
@media(max-width:700px){.st-tower-page{padding:11px}.st-tower-head h1{font-size:22px}.st-tower-floor-badge{min-width:78px;padding:6px}.st-tower-team{grid-template-columns:repeat(3,minmax(0,1fr))}.st-tower-stage{align-items:flex-start;flex-direction:column}.st-tower-rewards{justify-content:flex-start}.st-tower-powers{grid-template-columns:1fr 1fr}}


/* 1.1.46 — Header Game link: desktop equals main navbar; mobile stays compact. */
@media(min-width:701px){
  html body #page-header .navbar #nav-main>li.hvn-sieu-thu-nav-item>a,
  html body #page-header .navbar #nav-main>li.hvn-sieu-thu-nav-item>a>span{font-size:16px!important;line-height:1.15!important;font-weight:700!important}
  html body #page-header .navbar #nav-main>li.hvn-sieu-thu-nav-item>a .icon{font-size:16px!important}
}
@media(max-width:700px){
  html body #page-header .navbar #nav-main>li.hvn-sieu-thu-nav-item>a,
  html body #page-header .navbar #nav-main>li.hvn-sieu-thu-nav-item>a>span{font-size:9px!important;line-height:1.05!important;font-weight:700!important;padding:0!important}
  html body #page-header .navbar #nav-main>li.hvn-sieu-thu-nav-item>a{min-height:20px!important;padding:2px 3px!important}
  html body #page-header .navbar #nav-main>li.hvn-sieu-thu-nav-item>a .icon{font-size:10px!important;margin-right:1px!important}
}
@media(max-width:420px){
  html body #page-header .navbar #nav-main>li.hvn-sieu-thu-nav-item>a,
  html body #page-header .navbar #nav-main>li.hvn-sieu-thu-nav-item>a>span{font-size:8px!important}
  html body #page-header .navbar #nav-main>li.hvn-sieu-thu-nav-item>a{min-height:18px!important;padding:1px 3px!important}
  html body #page-header .navbar #nav-main>li.hvn-sieu-thu-nav-item>a .icon{font-size:9px!important}
}


/* 1.1.47 — Master desktop: dùng bộ chọn Tướng gọn như mobile, bỏ danh sách dọc. */
@media(min-width:901px){
 .st-master-page .st-master-pet-switch{display:none!important}
 .st-master-page .st-master-pet-mobile-switch{display:block!important;margin:0 0 10px;padding:10px;background:#211f1c;border:1px solid #413a33;border-radius:8px;color:#eee7de}
 .st-master-page .st-master-pet-mobile-switch>strong{display:block;margin:0;color:#f3d4a7;font-size:13px;font-weight:850}
 .st-master-page .st-master-pet-mobile-switch>small{display:block;margin:3px 0 8px;color:#bdb4aa;font-size:11px;line-height:1.35}
 .st-master-page .st-master-mobile-picker{margin:0;border:1px solid #6b6259;border-radius:7px;background:#292622;overflow:hidden}
 .st-master-page .st-master-mobile-picker summary{display:flex;align-items:center;justify-content:space-between;gap:10px;box-sizing:border-box;padding:10px 11px;color:#f4eee6;background:#292622;font-size:13px;font-weight:750;line-height:1.25;cursor:pointer;list-style:none}
 .st-master-page .st-master-mobile-picker summary::-webkit-details-marker{display:none}
 .st-master-page .st-master-mobile-picker summary span{color:#d8c5ae;font-size:12px;transition:transform .18s ease}
 .st-master-page .st-master-mobile-picker[open] summary span{transform:rotate(180deg)}
 .st-master-page .st-master-mobile-options{max-height:260px;overflow-y:auto;overscroll-behavior:contain;background:#211f1c;border-top:1px solid #4a443d;scrollbar-width:thin;scrollbar-color:#8d8277 #211f1c}
 .st-master-page .st-master-mobile-options a{display:block;padding:8px 10px;color:#ddd6cf!important;background:#211f1c;text-decoration:none!important;font-size:12px;font-weight:650;line-height:1.25;border-bottom:1px solid rgba(255,255,255,.08);white-space:normal;overflow-wrap:anywhere}
 .st-master-page .st-master-mobile-options a:last-child{border-bottom:0}
 .st-master-page .st-master-mobile-options a.active{background:#6f4b2f;color:#fff!important}
 .st-master-page .st-master-mobile-options a:hover{background:#55483e;color:#fff!important}
 .st-master-page .st-master-mobile-options::-webkit-scrollbar{width:7px}
 .st-master-page .st-master-mobile-options::-webkit-scrollbar-track{background:#211f1c}
 .st-master-page .st-master-mobile-options::-webkit-scrollbar-thumb{background:#8d8277;border-radius:8px;border:2px solid #211f1c}
}

/* 1.1.48 — ACP tower AUTO generation optimized to avoid 504; no visual change here. */

/* 1.1.49 — Keep all Game actions anchored to the Game viewport. */
#hvn-game{scroll-margin-top:8px}

/* 1.1.50 — Fix malformed Game wrapper introduced by 1.1.49; restore dark Game UI and Top Rank JS root. */


/* 1.1.53 — Nhiệm vụ hằng ngày: isolated dark game panel. */
.st-daily-page{margin-top:14px;background:#171612;border:1px solid #604a22;border-radius:14px;padding:18px;color:#f5f0e8}.st-daily-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:15px}.st-daily-head h1{margin:0 0 5px;color:#fff;font-size:28px}.st-daily-head p{margin:0;color:#c9c1b5}.st-daily-power{min-width:150px;text-align:center;background:#211d17;border:1px solid #6c5429;border-radius:12px;padding:10px 14px}.st-daily-power span{display:block;font-size:11px;color:#c7b58e}.st-daily-power strong{display:block;margin-top:2px;font-size:23px;color:#ffbd4a}.st-daily-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.st-daily-card{display:grid;grid-template-columns:54px minmax(0,1fr) 130px;gap:12px;align-items:center;background:#211f1b;border:1px solid #4d422f;border-radius:12px;padding:13px}.st-daily-card.complete{border-color:#556b42;background:#1d241a}.st-daily-card.locked{opacity:.58}.st-daily-no{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:#302619;border:1px solid #80612b;color:#ffc95c;font-size:18px;font-weight:900}.st-daily-main h2{margin:0 0 5px;color:#fff;font-size:17px}.st-daily-main p{margin:0;color:#bbb2a5;font-size:12px;line-height:1.35}.st-daily-rewards{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.st-daily-rewards span{background:#151411;border:1px solid #4a4030;border-radius:999px;padding:4px 7px;font-size:11px;color:#e8dfd2}.st-daily-rewards b{color:#ffbf4a}.st-daily-action button{width:100%;border:1px solid #9b7350;border-radius:8px;background:#6f4b2f;color:#fff;padding:9px 8px;font-weight:800;cursor:pointer}.st-daily-action button:hover{background:#825c3b}.st-daily-done{display:block;text-align:center;color:#8fd06f}.st-daily-lock{display:block;text-align:center;color:#b9afa2;font-size:11px}.st-daily-disabled{background:#2a2117;border:1px solid #76572f;border-radius:10px;padding:14px;color:#e8d7bd}@media(max-width:900px){.st-daily-grid{grid-template-columns:1fr}.st-daily-card{grid-template-columns:44px minmax(0,1fr) 115px}.st-daily-no{width:40px;height:40px;font-size:15px}}@media(max-width:560px){.st-daily-page{padding:11px}.st-daily-head{display:block}.st-daily-power{margin-top:10px;min-width:0}.st-daily-card{grid-template-columns:38px minmax(0,1fr);gap:9px;padding:10px}.st-daily-no{width:34px;height:34px;font-size:13px}.st-daily-main h2{font-size:15px}.st-daily-main p{font-size:11px}.st-daily-action{grid-column:1/-1}.st-daily-action button{padding:8px}.st-daily-lock,.st-daily-done{font-size:12px}.st-daily-rewards span{font-size:10px}}

.st-daily-battle-result{max-width:980px;margin:12px auto 18px;padding:12px 14px;border:1px solid #6c5429;border-radius:10px;background:#1d1a16;color:#fff;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.st-daily-battle-result strong{color:#ffcb63}.st-daily-battle-result span{color:#e6ddd0}.st-daily-battle-result a{margin-left:auto}@media(max-width:560px){.st-daily-battle-result{margin:10px 8px 16px}.st-daily-battle-result a{width:100%;margin-left:0;text-align:center}}

/* 1.1.75 · Đội hình: lọc theo vai trò, mặc định thu gọn; không đổi logic chiến đấu */
.st-roster-head{margin:4px 0 10px}.st-roster-head .st-title{margin-bottom:8px}.st-role-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 7px}.st-role-filter-btn{appearance:none;border:1px solid #d7c5aa;border-radius:999px;background:#fffaf1;color:#6b452b;padding:8px 13px;font-weight:800;cursor:pointer;box-shadow:0 2px 7px rgba(0,0,0,.06);transition:.16s}.st-role-filter-btn span{display:inline-flex;min-width:22px;height:22px;align-items:center;justify-content:center;margin-left:5px;padding:0 6px;border-radius:999px;background:rgba(107,69,43,.10);font-size:11px}.st-role-filter-btn:hover{transform:translateY(-1px);filter:brightness(1.02)}.st-role-filter-btn.active{color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(0,0,0,.18)}.st-role-filter-atk.active{background:#a63d35}.st-role-filter-def.active{background:#356fa8}.st-role-filter-ftr.active{background:#b66a2d}.st-role-filter-sup.active{background:#4b8557}.st-role-filter-war.active{background:#76549b}.st-role-filter-btn.active span{background:rgba(255,255,255,.18)}.st-role-filter-hint{margin:0 0 9px;color:#795c45;font-size:12px}.st-role-collapsed{display:none!important}.st-pick-card[hidden]{display:none!important}
.st-game-wrap .st-role-filter-hint{color:#cbb89a}.st-game-wrap .st-role-filter-btn{background:#211d19;border-color:#5e4d39;color:#ead7ba}.st-game-wrap .st-role-filter-btn span{background:rgba(255,255,255,.08)}.st-game-wrap .st-role-filter-btn.active{color:#fff}.st-game-wrap .st-role-filter-atk.active{background:#8f3732}.st-game-wrap .st-role-filter-def.active{background:#315f8c}.st-game-wrap .st-role-filter-ftr.active{background:#995b2b}.st-game-wrap .st-role-filter-sup.active{background:#3f744a}.st-game-wrap .st-role-filter-war.active{background:#654787}
@media(max-width:600px){.st-role-filter{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}.st-role-filter-btn{flex:0 0 auto;padding:7px 10px;font-size:11px}.st-role-filter-hint{font-size:10px}}