:root{--bg:#050711;--panel:#0b1220;--text:#f7fbff;--muted:#89a4ba;--cyan:#48d9ff;--red:#ff365f;--gold:#ffd45c;--green:#3ee18f}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;background:radial-gradient(circle at 50% 10%,#10233a 0,#070b14 38%,#03050a 100%);color:var(--text);font-family:Arial,"Noto Sans Arabic",sans-serif}body{overflow-x:hidden}.app{width:min(100%,900px);margin:auto;padding:10px 12px 18px;min-height:100dvh;display:flex;flex-direction:column;gap:9px}.topbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}.live-pill{height:44px;padding:0 12px;border-radius:16px;border:1px solid rgba(255,54,95,.4);background:rgba(255,54,95,.08);display:flex;align-items:center;gap:7px;font-size:12px}.live-pill i{width:9px;height:9px;border-radius:50%;background:#7a8794}.live-pill.connected{border-color:rgba(62,225,143,.45);background:rgba(62,225,143,.08)}.live-pill.connected i{background:var(--green);box-shadow:0 0 12px var(--green)}.brand{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0}.brand-icon{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#ff603f,#b80f39);display:grid;place-items:center;font-size:24px;box-shadow:0 0 22px rgba(255,54,95,.18)}.brand b{display:block;font-size:17px;letter-spacing:.7px;white-space:nowrap}.brand small{display:block;font-size:8px;color:#8fc7de;letter-spacing:2px;margin-top:2px}.top-actions{display:flex;align-items:center;gap:5px}.mini-stat{height:42px;min-width:48px;padding:4px 7px;border-radius:13px;border:1px solid rgba(94,210,255,.14);background:rgba(255,255,255,.035);text-align:center}.mini-stat small{display:block;font-size:7px;color:#8da8ba}.mini-stat b{font-size:16px}.circle{width:42px;height:42px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.045);color:#fff;font-size:18px}.health-panel{padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(145deg,rgba(13,24,39,.9),rgba(7,12,21,.86));box-shadow:0 14px 32px rgba(0,0,0,.25)}.health-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:8px}.health-head small{color:#ffb7c5;font-size:11px}.health-head b{display:block;font-size:20px;margin-top:2px}.health-value{display:flex;align-items:baseline;gap:4px;font-weight:900}.health-value span:first-child{font-size:23px;color:#fff}.health-value small,.health-value span:last-child{color:#9cb2c2;font-size:12px}.health-track{position:relative;height:24px;border-radius:999px;background:#151b27;border:1px solid rgba(255,255,255,.08);overflow:hidden}.health-fill{position:absolute;inset:0 auto 0 0;width:100%;border-radius:999px;background:linear-gradient(90deg,#ff2f4f,#ff7038 45%,#ffd34f);box-shadow:0 0 25px rgba(255,66,78,.25);transition:width .35s ease}.health-fill.low{background:linear-gradient(90deg,#8b0a23,#ff2e49)}.health-spark{position:absolute;top:2px;bottom:2px;width:34px;border-radius:50%;background:rgba(255,255,255,.25);filter:blur(7px);left:calc(100% - 24px);transition:left .35s ease}.instructions{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;text-align:center;padding:8px 10px;border-radius:15px;border:1px solid rgba(255,211,92,.18);background:rgba(255,211,92,.05)}.instructions b{font-size:15px;color:#ffd65f}.instructions span{font-size:12px;color:#d5e3ee}.arena{position:relative;flex:1;min-height:430px;border-radius:28px;border:1px solid rgba(72,217,255,.16);background:radial-gradient(circle at 50% 55%,rgba(45,97,136,.22),transparent 34%),linear-gradient(180deg,#0a1725,#050a12 70%,#080a10);overflow:hidden;box-shadow:inset 0 0 60px rgba(0,0,0,.25),0 20px 45px rgba(0,0,0,.3)}.arena::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.5%,rgba(255,255,255,.025) 50%,transparent 50.5%),linear-gradient(0deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:100% 100%,100% 58px;opacity:.35}.arena::after{content:"";position:absolute;left:8%;right:8%;bottom:8%;height:16%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.6),transparent 68%);filter:blur(8px)}.arena-glow{position:absolute;left:50%;top:46%;width:320px;height:320px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(64,197,255,.12),transparent 62%);filter:blur(5px)}.boss-wrap{position:absolute;left:50%;top:51%;width:min(56vw,300px);height:min(79%,540px);transform:translate(-50%,-50%);transform-origin:50% 82%;z-index:4;display:flex;align-items:end;justify-content:center}.boss-img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 22px 13px rgba(0,0,0,.5)) drop-shadow(0 0 14px rgba(80,184,255,.08));user-select:none;-webkit-user-drag:none;animation:bossIdle 2.7s ease-in-out infinite;transform-origin:50% 85%}.boss-wrap.hit .boss-img,.boss-wrap.ko .boss-img{animation:none}.boss-shadow{position:absolute;left:18%;right:18%;bottom:1%;height:7%;border-radius:50%;background:rgba(0,0,0,.55);filter:blur(7px);z-index:-1}.impact-ring{position:absolute;left:50%;top:35%;width:60px;height:60px;border:6px solid rgba(255,224,100,.85);border-radius:50%;transform:translate(-50%,-50%) scale(.3);opacity:0;pointer-events:none}.dizzy-stars{position:absolute;left:50%;top:2%;transform:translateX(-50%);font-size:22px;opacity:0;white-space:nowrap}.boss-wrap.slap{animation:slapHit .38s ease}.boss-wrap.punch{animation:punchHit .42s ease}.boss-wrap.kick{animation:kickHit .52s ease}.boss-wrap.heavy{animation:heavyHit .72s ease}.boss-wrap.ko{animation:koFall .9s ease forwards}.boss-wrap.hit .impact-ring{animation:impactRing .45s ease}.boss-wrap.dizzy .dizzy-stars,.boss-wrap.heavy .dizzy-stars,.boss-wrap.ko .dizzy-stars{opacity:1;animation:dizzy .85s linear infinite}.boss-wrap.dizzy .boss-img{filter:drop-shadow(0 22px 13px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(255,210,66,.28))}.boss-wrap.heavy .boss-img{filter:drop-shadow(0 22px 13px rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(255,82,82,.28))}.boss-wrap.ko .boss-img{filter:drop-shadow(0 18px 12px rgba(0,0,0,.55)) grayscale(.12) saturate(.85)}.arena.shake{animation:screenShake .45s linear}.arena.mega-shake{animation:megaShake .62s linear}.arena.danger{border-color:rgba(255,55,82,.42);box-shadow:inset 0 0 75px rgba(255,30,64,.12),0 20px 45px rgba(0,0,0,.3)}.arena.danger .arena-glow{background:radial-gradient(circle,rgba(255,48,78,.16),transparent 62%);animation:rageGlow 1.1s ease-in-out infinite}
.voice-bubble{position:absolute;right:5%;top:23%;z-index:11;display:flex;align-items:center;gap:7px;max-width:48%;padding:9px 12px;border-radius:18px 18px 5px 18px;background:rgba(250,252,255,.96);color:#142030;border:1px solid rgba(255,255,255,.95);box-shadow:0 10px 28px rgba(0,0,0,.32),0 0 18px rgba(255,255,255,.08);font-weight:900;transform-origin:bottom right}
.voice-bubble::after{content:"";position:absolute;right:22px;top:100%;border:8px solid transparent;border-top-color:rgba(250,252,255,.96);transform:translateY(-1px)}
.voice-bubble.hidden{display:none}.voice-bubble.show{animation:voicePop .32s cubic-bezier(.2,.8,.25,1)}.voice-bubble span{font-size:15px}.voice-bubble b{font-size:14px;line-height:1.35}
@keyframes voicePop{0%{opacity:0;transform:scale(.68) translateY(8px)}70%{opacity:1;transform:scale(1.05) translateY(-1px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.damage-pop{position:absolute;left:58%;top:35%;z-index:8;color:#fff;font-size:36px;font-weight:1000;text-shadow:0 0 12px rgba(255,54,95,.75),0 3px 2px #000;opacity:0}.damage-pop.show{animation:damageFloat .75s ease}.hit-label{position:absolute;left:50%;top:14%;transform:translateX(-50%);z-index:8;padding:6px 14px;border-radius:999px;background:rgba(255,54,95,.14);border:1px solid rgba(255,94,118,.35);font-size:18px;font-weight:1000;letter-spacing:1px;opacity:0}.hit-label.show{animation:hitLabel .7s ease}.supporter-bubble{position:absolute;left:50%;top:10%;transform:translateX(-50%);z-index:10;display:flex;align-items:center;gap:8px;max-width:82%;padding:6px 12px 6px 6px;border-radius:999px;background:rgba(7,15,26,.95);border:1px solid rgba(72,217,255,.28);box-shadow:0 8px 28px rgba(0,0,0,.35),0 0 18px rgba(72,217,255,.12)}.supporter-bubble.hidden{display:none}.supporter-bubble.pop{animation:bubblePop .35s ease}.supporter-avatar{width:38px;height:38px;min-width:38px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#17263b;border:2px solid #52d8ff;box-shadow:0 0 14px rgba(82,216,255,.3)}.supporter-avatar img{width:100%;height:100%;object-fit:cover}.supporter-bubble b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.supporter-bubble small{display:block;color:#9dc3d9;font-size:10px;margin-top:2px}.combo-badge{position:absolute;right:4%;top:12%;z-index:9;transform:rotate(4deg);padding:8px 12px;border-radius:14px;background:linear-gradient(135deg,#ffd34e,#ff7b32);color:#17130b;box-shadow:0 8px 22px rgba(0,0,0,.25);text-align:center}.combo-badge.hidden{display:none}.combo-badge.hot{background:linear-gradient(135deg,#fff56d,#ff3b52);animation:comboHot .5s ease-in-out infinite alternate;box-shadow:0 0 26px rgba(255,64,78,.35)}.combo-badge span{display:block;font-size:8px;font-weight:900}.combo-badge b{font-size:24px}.impact-flash{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0}.impact-flash.show{animation:impactFlash .34s ease}.impact-flash.slap{background:radial-gradient(circle at 51% 35%,rgba(255,246,161,.5),transparent 22%)}.impact-flash.punch{background:radial-gradient(circle at 52% 38%,rgba(255,118,86,.44),transparent 24%)}.impact-flash.kick{background:radial-gradient(circle at 50% 58%,rgba(94,215,255,.45),transparent 28%)}.impact-flash.heavy{background:radial-gradient(circle at 50% 38%,rgba(255,241,123,.72),rgba(255,61,83,.24) 26%,transparent 56%)}
.attack-prop{position:absolute;z-index:12;pointer-events:none;opacity:0;font-size:70px;filter:drop-shadow(0 8px 8px rgba(0,0,0,.42));will-change:transform,opacity}.attack-prop.slap{left:-12%;top:33%;transform:rotate(-32deg)}.attack-prop.punch{right:-12%;top:33%}.attack-prop.kick{right:-14%;bottom:14%;font-size:76px}.attack-prop.heavy{left:52%;top:-20%;font-size:82px;transform-origin:70% 80%}.attack-prop.slap.show{animation:slipperSwing .55s cubic-bezier(.15,.72,.3,1)}.attack-prop.punch.show{animation:fistFly .52s cubic-bezier(.15,.72,.3,1)}.attack-prop.kick.show{animation:bootKick .62s cubic-bezier(.15,.72,.3,1)}.attack-prop.heavy.show{animation:hammerDrop .76s cubic-bezier(.17,.84,.28,1)}
.particle-layer{position:absolute;inset:0;z-index:11;pointer-events:none}.hit-particle{position:absolute;font-style:normal;font-size:18px;opacity:0;animation:particleFly .68s ease-out forwards;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}.hit-particle.heavy{font-size:22px}.floor-crack{position:absolute;left:50%;bottom:9%;width:150px;height:36px;z-index:6;transform:translateX(-50%) scale(.3);opacity:0;background:radial-gradient(ellipse,rgba(255,217,96,.22),transparent 62%),repeating-conic-gradient(from 0deg,rgba(255,225,122,.7) 0 2deg,transparent 2deg 28deg);clip-path:ellipse(50% 44% at 50% 50%);filter:drop-shadow(0 0 8px rgba(255,201,70,.28))}.floor-crack.show{animation:crackPop 1s ease}
.rage-badge{position:absolute;left:3%;top:4%;z-index:9;padding:6px 9px;border-radius:11px;font-size:10px;font-weight:1000;letter-spacing:.7px;background:linear-gradient(135deg,#ff334e,#ff8a36);color:#fff;box-shadow:0 0 22px rgba(255,50,70,.3);animation:rageBadge .7s ease-in-out infinite alternate}.rage-badge.hidden{display:none}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.stats-row>div{padding:7px;border-radius:14px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.035);text-align:center}.stats-row small{display:block;color:#8aa8bc;font-size:9px}.stats-row b{font-size:18px}.feed-card{border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(8,14,24,.85);padding:8px}.feed-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.feed-head b{font-size:14px}.feed-head span{font-size:10px;color:#8eabbc}.feed{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.feed::-webkit-scrollbar{display:none}.feed-item{min-width:180px;max-width:230px;display:grid;grid-template-columns:32px 1fr auto;gap:7px;align-items:center;padding:6px 8px;border-radius:13px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05)}.feed-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#152237}.feed-avatar img{width:100%;height:100%;object-fit:cover}.feed-copy{min-width:0}.feed-copy b{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.feed-copy small{display:block;font-size:8px;color:#8faabd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.feed-damage{font-size:12px;font-weight:900;color:#ff7188}.empty{padding:12px;color:#71889a;font-size:11px}.ko-screen{position:fixed;inset:0;z-index:30;background:rgba(1,3,8,.7);display:grid;place-items:center;backdrop-filter:blur(5px)}.ko-screen.hidden{display:none}.ko-card{width:min(88vw,420px);padding:22px;text-align:center;border-radius:28px;background:linear-gradient(145deg,#121d2e,#080d17);border:1px solid rgba(255,212,92,.25);box-shadow:0 30px 90px rgba(0,0,0,.55)}.ko-text{font-size:74px;line-height:1;font-weight:1000;color:#ff425f;text-shadow:0 0 35px rgba(255,52,88,.35);transform:rotate(-5deg)}.ko-card h2{font-size:25px;margin:10px 0 4px}.ko-card p{margin:0;color:#91a8ba;font-size:12px}.ko-card>b{display:block;font-size:30px;color:#ffd65a;margin-top:12px}.controls{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:16px}.controls.hidden{display:none}.controls-card{width:min(92vw,540px);padding:15px;border-radius:24px;background:#0a1422;border:1px solid rgba(72,217,255,.2);box-shadow:0 30px 80px rgba(0,0,0,.55)}.controls-head{display:flex;justify-content:space-between;align-items:center}.controls-head b{font-size:18px}.controls-head small{display:block;color:#829cac;font-size:10px;margin-top:3px}.controls-head button{width:36px;height:36px;border-radius:50%;border:0;background:#18253a;color:#fff}.test-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.test-grid button,.control-links button,.control-links a{min-height:44px;border-radius:13px;border:1px solid rgba(255,255,255,.09);background:#111e31;color:#fff;font-weight:800;text-decoration:none;display:grid;place-items:center}.control-links{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
@keyframes bossIdle{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.012)}}
@keyframes slapHit{25%{transform:translate(-55%,-50%) rotate(-8deg)}55%{transform:translate(-47%,-50%) rotate(7deg)}100%{transform:translate(-50%,-50%) rotate(0)}}
@keyframes punchHit{35%{transform:translate(-44%,-52%) rotate(10deg) scale(.97)}70%{transform:translate(-52%,-49%) rotate(-4deg)}100%{transform:translate(-50%,-50%)}}
@keyframes kickHit{35%{transform:translate(-39%,-55%) rotate(15deg) scale(.95)}70%{transform:translate(-53%,-47%) rotate(-7deg)}100%{transform:translate(-50%,-50%)}}
@keyframes heavyHit{25%{transform:translate(-35%,-60%) rotate(22deg) scale(.92)}50%{transform:translate(-58%,-43%) rotate(-15deg)}76%{transform:translate(-47%,-52%) rotate(6deg)}100%{transform:translate(-50%,-50%)}}
@keyframes koFall{0%{transform:translate(-50%,-50%) rotate(0)}55%{transform:translate(-27%,-40%) rotate(72deg)}100%{transform:translate(-12%,-28%) rotate(92deg) scale(.88)}}
@keyframes impactRing{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}}
@keyframes dizzy{to{transform:translateX(-50%) rotate(360deg)}}
@keyframes screenShake{0%,100%{transform:none}20%{transform:translate(-7px,3px)}40%{transform:translate(6px,-4px)}60%{transform:translate(-4px,-2px)}80%{transform:translate(4px,3px)}}
@keyframes damageFloat{0%{opacity:0;transform:translateY(12px) scale(.7)}30%{opacity:1;transform:translateY(0) scale(1.15)}100%{opacity:0;transform:translateY(-50px) scale(.9)}}
@keyframes hitLabel{0%{opacity:0;transform:translate(-50%,8px) scale(.8)}30%{opacity:1;transform:translate(-50%,0) scale(1.08)}100%{opacity:0;transform:translate(-50%,-24px) scale(.95)}}
@keyframes bubblePop{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}75%{opacity:1;transform:translate(-50%,-2px) scale(1.04)}100%{transform:translate(-50%,0) scale(1)}}
@keyframes megaShake{0%,100%{transform:none}12%{transform:translate(-10px,5px) rotate(-.5deg)}25%{transform:translate(10px,-6px) rotate(.5deg)}42%{transform:translate(-8px,-4px)}58%{transform:translate(7px,5px)}75%{transform:translate(-4px,2px)}88%{transform:translate(3px,-2px)}}
@keyframes rageGlow{from{transform:translate(-50%,-50%) scale(.96);opacity:.7}to{transform:translate(-50%,-50%) scale(1.07);opacity:1}}
@keyframes comboHot{to{transform:rotate(-4deg) scale(1.08)}}
@keyframes impactFlash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
@keyframes slipperSwing{0%{opacity:0;transform:translate(-80px,35px) rotate(-65deg) scale(.7)}28%{opacity:1}58%{opacity:1;transform:translate(350px,-5px) rotate(18deg) scale(1.12)}100%{opacity:0;transform:translate(430px,-18px) rotate(42deg) scale(.9)}}
@keyframes fistFly{0%{opacity:0;transform:translate(90px,35px) scale(.65)}28%{opacity:1}58%{opacity:1;transform:translate(-350px,-4px) scale(1.15)}100%{opacity:0;transform:translate(-410px,-10px) scale(.9)}}
@keyframes bootKick{0%{opacity:0;transform:translate(100px,100px) rotate(25deg) scale(.7)}30%{opacity:1}58%{opacity:1;transform:translate(-330px,-115px) rotate(-32deg) scale(1.12)}100%{opacity:0;transform:translate(-385px,-145px) rotate(-48deg) scale(.88)}}
@keyframes hammerDrop{0%{opacity:0;transform:translate(-50%,-130px) rotate(-40deg) scale(.65)}25%{opacity:1}58%{opacity:1;transform:translate(-50%,180px) rotate(18deg) scale(1.18)}72%{transform:translate(-50%,165px) rotate(4deg) scale(1.05)}100%{opacity:0;transform:translate(-50%,130px) rotate(-10deg) scale(.9)}}
@keyframes particleFly{0%{opacity:1;transform:translate(0,0) scale(.6) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.25) rotate(220deg)}}
@keyframes crackPop{0%{opacity:0;transform:translateX(-50%) scale(.2)}18%{opacity:1;transform:translateX(-50%) scale(1.05)}72%{opacity:.72}100%{opacity:0;transform:translateX(-50%) scale(1.18)}}
@keyframes rageBadge{to{transform:scale(1.05);box-shadow:0 0 32px rgba(255,50,70,.48)}}
@media(max-width:700px){html,body{height:100%;overflow:hidden}.app{height:100dvh;max-height:100dvh;padding:6px 7px;gap:5px}.topbar{flex:0 0 45px}.brand-icon{width:34px;height:34px;border-radius:10px;font-size:20px}.brand b{font-size:13px}.brand small{font-size:6px}.live-pill{height:38px;padding:0 8px;border-radius:12px;font-size:9px}.mini-stat{height:36px;min-width:39px;padding:3px 5px}.mini-stat b{font-size:13px}.mini-stat small{font-size:6px}.circle{width:36px;height:36px;border-radius:11px;font-size:15px}.health-panel{flex:0 0 66px;padding:7px 9px;border-radius:15px}.health-head{margin-bottom:5px}.health-head small{font-size:8px}.health-head b{font-size:14px}.health-value span:first-child{font-size:17px}.health-track{height:16px}.instructions{flex:0 0 44px;padding:5px 7px;gap:3px;border-radius:12px}.instructions b{font-size:11px}.instructions span{font-size:9px}.arena{flex:1;min-height:0;border-radius:19px}.boss-wrap{width:min(55vw,235px);height:82%}.attack-prop{font-size:50px}.attack-prop.kick{font-size:54px}.attack-prop.heavy{font-size:60px}.floor-crack{width:110px;height:28px}.rage-badge{font-size:7px;padding:4px 6px}.supporter-bubble{top:6%;max-width:86%;padding:4px 8px 4px 4px}.supporter-avatar{width:28px;height:28px;min-width:28px}.supporter-bubble b{font-size:10px}.supporter-bubble small{font-size:8px}.combo-badge{top:7%;right:3%;padding:5px 8px}.combo-badge b{font-size:18px}.voice-bubble{right:3%;top:20%;max-width:54%;padding:6px 8px}.voice-bubble span{font-size:11px}.voice-bubble b{font-size:10px}.damage-pop{font-size:28px}.hit-label{top:12%;font-size:13px;padding:4px 9px}.stats-row{flex:0 0 48px}.stats-row>div{padding:5px;border-radius:11px}.stats-row small{font-size:7px}.stats-row b{font-size:14px}.feed-card{flex:0 0 79px;border-radius:14px;padding:6px}.feed-head{margin-bottom:4px}.feed-head b{font-size:11px}.feed-item{min-width:150px;padding:4px 6px;grid-template-columns:26px 1fr auto}.feed-avatar{width:26px;height:26px}.feed-copy b{font-size:8px}.feed-copy small{font-size:7px}.feed-damage{font-size:10px}.empty{padding:8px;font-size:9px}}

.audio-hint{position:fixed;left:50%;top:76px;transform:translateX(-50%);z-index:60;padding:8px 13px;border-radius:999px;background:rgba(8,18,31,.96);border:1px solid rgba(72,217,255,.35);box-shadow:0 8px 28px rgba(0,0,0,.35),0 0 18px rgba(72,217,255,.14);font-size:11px;font-weight:900;color:#eafaff;white-space:nowrap;animation:audioHintPulse 1.2s ease-in-out infinite alternate}.audio-hint.hidden{display:none}.circle.audio-ready{border-color:rgba(62,225,143,.45);box-shadow:0 0 14px rgba(62,225,143,.18)}@keyframes audioHintPulse{to{transform:translateX(-50%) scale(1.035);box-shadow:0 8px 28px rgba(0,0,0,.35),0 0 26px rgba(72,217,255,.25)}}@media(max-width:700px){.audio-hint{top:56px;font-size:9px;padding:6px 10px;max-width:88vw;overflow:hidden;text-overflow:ellipsis}}

/* V1.5 quick settings + installable app */
.controls-card{max-height:92dvh;overflow-y:auto;overscroll-behavior:contain}.quick-settings{display:grid;gap:9px;margin:13px 0 5px;padding:11px;border-radius:17px;background:rgba(255,255,255,.035);border:1px solid rgba(72,217,255,.13)}.quick-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.quick-title b{font-size:14px}.quick-title small{font-size:9px;color:#79dcb0}.quick-title small.bad{color:#ff7389}.quick-block{padding:9px;border-radius:13px;background:rgba(3,8,15,.45);border:1px solid rgba(255,255,255,.055)}.quick-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;font-size:11px}.quick-label b{color:#ffd65f}.quick-range{width:100%;accent-color:#48d9ff;height:24px}.preset-row{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.preset-row button,.toggle-row button{min-height:34px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#132239;color:#eaf6ff;font-size:9px;font-weight:800}.toggle-row{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:6px;align-items:stretch}.toggle-row label{min-height:38px;border-radius:10px;background:#101d30;border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;gap:6px;font-size:9px;font-weight:800}.toggle-row input{accent-color:#45e398}.primary-control,.install-control{width:100%;min-height:44px;border-radius:13px;border:1px solid rgba(62,225,143,.25);background:linear-gradient(135deg,rgba(37,194,125,.22),rgba(38,154,219,.18));color:#fff;font-weight:900}.install-control{margin-top:9px;border-color:rgba(72,217,255,.28);background:linear-gradient(135deg,rgba(72,217,255,.18),rgba(117,97,255,.15))}.install-help{margin-top:7px;padding:8px 10px;border-radius:11px;background:rgba(255,211,92,.07);border:1px solid rgba(255,211,92,.18);font-size:9px;color:#dce8f1;text-align:center}.install-help.hidden{display:none}
@media(max-width:700px){.controls{padding:8px}.controls-card{width:min(96vw,540px);max-height:94dvh;padding:11px;border-radius:18px}.quick-settings{margin-top:9px;padding:8px;gap:6px}.quick-block{padding:7px}.test-grid{margin:8px 0;gap:6px}.test-grid button,.control-links button,.control-links a{min-height:39px;font-size:9px}.control-links{gap:5px}.preset-row button{min-height:30px;font-size:8px}.toggle-row label,.toggle-row button{min-height:34px;font-size:8px}.primary-control,.install-control{min-height:39px;font-size:10px}}


/* V1.6 — HP-only rounds + damage-stage character art */
.boss-img{transition:opacity .12s ease,filter .18s ease}.boss-img.asset-swap{opacity:.72}.boss-wrap.damage-fall{animation:damageFall .78s cubic-bezier(.2,.7,.2,1)}
@keyframes damageFall{0%{transform:translate(-50%,-50%) rotate(0)}38%{transform:translate(-38%,-47%) rotate(13deg) scale(.96)}70%{transform:translate(-47%,-43%) rotate(-7deg) scale(.94)}100%{transform:translate(-50%,-50%) rotate(0) scale(1)}}
.ko-final-card{padding-top:13px;overflow:hidden}.ko-final-card .ko-text{font-size:58px;position:relative;z-index:2}.ko-final-img{display:block;width:min(70vw,310px);height:min(53vh,430px);object-fit:contain;margin:-2px auto 2px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.5));animation:finalPop .55s cubic-bezier(.2,.9,.25,1.1)}
@keyframes finalPop{from{opacity:0;transform:translateY(22px) scale(.78)}to{opacity:1;transform:none}}
@media(max-width:700px){.ko-card.ko-final-card{width:min(92vw,380px);padding:9px 12px 12px}.ko-final-card .ko-text{font-size:46px}.ko-final-img{width:min(68vw,260px);height:min(51vh,360px)}.ko-final-card h2{font-size:18px;margin:4px 0}.ko-final-card p{font-size:9px}}

/* V1.6.1 - compact viewer gift/action guide */
.viewer-guide{display:block;padding:7px 8px 8px;border-color:rgba(255,211,92,.25);background:linear-gradient(180deg,rgba(255,211,92,.075),rgba(9,16,28,.82));overflow:hidden}
.guide-title{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px;text-align:center}
.guide-title b{font-size:13px;color:#ffe078;white-space:nowrap}
.guide-title small{font-size:9px;color:#bcd0df}
.guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;direction:rtl}
.guide-item{min-width:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:3px;padding:5px 4px;border-radius:11px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,rgba(13,26,43,.95),rgba(7,12,21,.92));box-shadow:inset 0 0 18px rgba(72,217,255,.025)}
.guide-source,.guide-result{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}
.guide-source .guide-icon,.guide-result>span{font-size:21px;line-height:1.1;filter:drop-shadow(0 2px 5px rgba(0,0,0,.35))}
.guide-source b,.guide-result b{margin-top:2px;font-size:9px;color:#f2f8fc;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guide-source small{margin-top:2px;font-size:6px;color:#8098aa;letter-spacing:.15px;white-space:nowrap}
.guide-result b{color:#ffd45f}
.guide-arrow{font-size:13px;color:#56d7ff;font-weight:900;text-shadow:0 0 10px rgba(72,217,255,.35)}
.guide-item:nth-child(1) .guide-icon{color:#ff5573}
.guide-item.guide-disabled{opacity:.35;filter:grayscale(1)}
.guide-foot{margin-top:5px;text-align:center;font-size:7px;color:#8199ab}
@media(max-width:700px){
  .viewer-guide{flex:0 0 auto!important;padding:5px 5px 6px;border-radius:12px}
  .guide-title{gap:5px;margin-bottom:4px}.guide-title b{font-size:10px}.guide-title small{display:none}
  .guide-grid{gap:3px}.guide-item{padding:4px 2px;border-radius:8px;gap:1px}
  .guide-source .guide-icon,.guide-result>span{font-size:17px}.guide-source b,.guide-result b{font-size:7px}.guide-source small{font-size:5px}.guide-arrow{font-size:10px}
  .guide-foot{font-size:5.5px;margin-top:3px}
}
@media(max-width:390px){.guide-source small{display:none}.guide-title b{font-size:9px}.guide-source .guide-icon,.guide-result>span{font-size:16px}.guide-source b,.guide-result b{font-size:6.5px}}


/* V1.7 — support territory bar: new flag grows over the old flag and the supporter advances */
.health-panel{overflow:visible}
.territory-wrap{position:relative;direction:ltr}
.territory-track{position:relative;height:26px;border-radius:999px;overflow:visible;border:1px solid rgba(255,255,255,.18);background:#111927;box-shadow:inset 0 0 14px rgba(0,0,0,.62),0 0 18px rgba(0,0,0,.2)}
.territory-old,.territory-new{position:absolute;inset:0;border-radius:999px;background-position:center;background-size:100% 100%;overflow:hidden}
.territory-old{background-image:url('assets/flag-old-syria.svg');box-shadow:inset 0 0 12px rgba(0,0,0,.22)}
.territory-new{right:auto;width:0;background-image:url('assets/flag-new-syria.svg');transition:width .42s cubic-bezier(.2,.75,.25,1);box-shadow:6px 0 15px rgba(0,122,61,.3)}
.territory-new::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0 44%,rgba(255,255,255,.28) 49%,transparent 55%);background-size:180px 100%;animation:territorySweep 2.5s linear infinite;mix-blend-mode:soft-light}
.territory-shine{position:absolute;inset:1px;border-radius:999px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.26),transparent 38%,rgba(0,0,0,.18));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.territory-runner{position:absolute;z-index:5;left:4%;bottom:-5px;width:auto;height:58px;transform:translateX(-50%);transform-origin:50% 86%;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(0,0,0,.7)) drop-shadow(0 0 7px rgba(255,255,255,.2));transition:left .42s cubic-bezier(.2,.75,.25,1);pointer-events:none;user-select:none;-webkit-user-drag:none}
.territory-runner.boost{animation:territoryBoost .42s cubic-bezier(.2,.8,.25,1)}
.territory-labels{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px;padding:0 4px;direction:ltr;font-size:7px;font-weight:900;color:#7891a3}
.territory-labels .new-side{color:#4ee39a}.territory-labels .old-side{color:#ff6679}.territory-labels b{color:#fff;font-size:8px;text-shadow:0 0 8px rgba(255,255,255,.2)}
@keyframes territorySweep{from{background-position:-180px 0}to{background-position:180px 0}}
@keyframes territoryBoost{0%{transform:translateX(-50%) translateY(0) rotate(0)}35%{transform:translateX(-50%) translateY(-7px) rotate(-5deg) scale(1.08)}70%{transform:translateX(-50%) translateY(1px) rotate(3deg) scale(.98)}100%{transform:translateX(-50%) translateY(0) rotate(0) scale(1)}}
@media(max-width:700px){
  .health-panel{flex:0 0 79px;padding-bottom:6px}
  .territory-track{height:21px;margin-top:2px}
  .territory-runner{height:47px;bottom:-4px}
  .territory-labels{margin-top:3px;font-size:5.5px}.territory-labels b{font-size:6.5px}
}
@media(max-width:390px){.territory-runner{height:43px}.territory-labels{font-size:5px}.territory-labels b{font-size:6px}}