:root{--accent:#ffb13d;--red:#ff4d62;--blue:#3d8cff;--gold:#ffbd4a}
body{background:radial-gradient(circle at 12% 4%,rgba(255,63,82,.17),transparent 30%),radial-gradient(circle at 90% 12%,rgba(47,126,255,.2),transparent 34%),linear-gradient(180deg,#0b0d18,#070912 70%);overflow-x:hidden}
.drum-war-page{width:min(100%,580px);padding-inline:13px}.game-title h1{font-size:18px}.game-title p{color:#b39b7c}
.battle-score{position:relative;display:grid;grid-template-columns:1fr 31px 1fr;gap:5px;align-items:center;margin:19px 0 13px;direction:ltr}.team{position:relative;min-width:0;overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:11px 10px 9px;background:linear-gradient(150deg,rgba(28,32,49,.96),rgba(15,18,29,.96));box-shadow:0 12px 30px rgba(0,0,0,.25);transition:.3s}.team::before{content:"";position:absolute;width:70px;height:70px;top:-42px;border-radius:50%;filter:blur(24px);opacity:.3}.red-team::before{left:-10px;background:var(--red)}.blue-team::before{right:-10px;background:var(--blue)}.team.active{transform:translateY(-3px);box-shadow:0 0 0 1px var(--team-color),0 15px 34px rgba(0,0,0,.34)}.red-team{--team-color:var(--red)}.blue-team{--team-color:var(--blue)}
.team-top{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:5px;direction:rtl}.team-top strong{font-size:10px}.team-top b{font-size:21px;font-variant-numeric:tabular-nums}.team-mark{font-size:11px}.health{height:8px;margin-top:9px;overflow:hidden;border-radius:99px;background:#080a11;box-shadow:inset 0 1px 3px #000}.health i{display:block;width:100%;height:100%;border-radius:inherit;transition:width .75s cubic-bezier(.2,.8,.2,1)}.red-team .health i{background:linear-gradient(90deg,#c62d43,#ff6072);box-shadow:0 0 12px #ff4d62}.blue-team .health i{background:linear-gradient(90deg,#2869dd,#51a0ff);box-shadow:0 0 12px #3d8cff}.power-row{display:flex;min-height:16px;gap:4px;margin-top:6px;direction:rtl}.power-row span{border:1px solid rgba(255,190,72,.2);border-radius:99px;padding:2px 5px;background:rgba(255,190,72,.08);color:#ffd580;font-size:6px;white-space:nowrap}.versus{display:grid;place-items:center;color:#ffe2a9;font-weight:1000;z-index:2}.versus span{display:grid;place-items:center;width:31px;height:31px;border:1px solid rgba(255,190,72,.3);border-radius:50%;background:#151625;font-size:9px;box-shadow:0 0 17px rgba(255,182,62,.16)}
.delta{position:absolute;z-index:7;top:45%;left:50%;opacity:0;font-size:25px;font-weight:1000;pointer-events:none;text-shadow:0 4px 12px #000}.delta.show{animation:deltaFly 1.15s ease-out}.delta.heal{color:#64ef9e}.delta.damage,.delta.steal{color:#ff7584}.delta.blocked{color:#77c6ff;font-size:17px}.team.hit{animation:teamHit .55s ease}.team.healed{animation:teamHeal .75s ease}.team.blocked{animation:shieldBlock .8s ease}
.turn-banner{display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:8px 10px;background:rgba(18,21,34,.82);text-align:center;transition:.3s}.turn-banner.red{border-color:rgba(255,77,98,.32);box-shadow:inset 0 0 20px rgba(255,77,98,.055)}.turn-banner.blue{border-color:rgba(61,140,255,.35);box-shadow:inset 0 0 20px rgba(61,140,255,.06)}.turn-banner b{font-size:11px}.turn-banner small{margin-inline-start:auto;color:#647087;font-size:6px}.turn-pulse{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px currentColor;animation:pulse 1.2s infinite}.turn-banner.red .turn-pulse{background:var(--red)}.turn-banner.blue .turn-pulse{background:var(--blue)}
.drum-field{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}.war-drum{position:relative;aspect-ratio:.92;border:0;padding:0;background:none;color:white;cursor:pointer;perspective:500px}.drum-shell{position:absolute;inset:7% 5% 4%;display:grid;place-items:center;border:2px solid #b66b31;border-radius:48% 48% 28% 28%;background:linear-gradient(90deg,#64321d,#b55f31 24%,#7d3d21 52%,#c16a37 76%,#5c2d1b);box-shadow:inset 0 0 0 3px rgba(255,206,119,.1),0 7px 13px rgba(0,0,0,.42);transform-origin:center bottom;transition:.3s}.drum-shell::before{content:"";position:absolute;right:-3px;left:-3px;top:-5px;height:25%;border:2px solid #df9a4a;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f6d594,#ad6b3d 66%,#65351e);box-shadow:0 3px 0 #65341c}.drum-shell::after{content:"";position:absolute;inset:25% 15% 6%;background:linear-gradient(67deg,transparent 45%,rgba(255,216,132,.55) 47%,rgba(255,216,132,.55) 51%,transparent 53%),linear-gradient(-67deg,transparent 45%,rgba(255,216,132,.5) 47%,rgba(255,216,132,.5) 51%,transparent 53%);opacity:.65}.drum-number{position:relative;z-index:2;display:grid;place-items:center;width:28px;height:28px;margin-top:7px;border:1px solid rgba(255,223,157,.28);border-radius:50%;background:rgba(46,20,13,.72);font-size:11px;font-weight:1000;box-shadow:0 3px 8px #351509}.war-drum:not(:disabled):active .drum-shell{transform:scale(.92) rotate(-2deg)}.war-drum.opening .drum-shell{animation:drumRoll .55s ease infinite}.war-drum.used{cursor:default}.war-drum.used .drum-shell{border-color:#4e5260;background:linear-gradient(145deg,#292d3a,#171a24);filter:saturate(.35);transform:scale(.92)}.war-drum.used .drum-shell::before{border-color:#747888;background:radial-gradient(circle,#3d4251,#1d202b)}.war-drum.used .drum-shell::after{display:none}.war-drum.used .drum-number{width:auto;height:auto;margin-top:2px;border:0;background:none;font-size:22px;box-shadow:none}.war-drum:disabled:not(.used){cursor:wait;opacity:.72}
.event-stage{position:fixed;z-index:30;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px;background:radial-gradient(circle,rgba(255,167,49,.14),rgba(5,7,13,.75) 58%);backdrop-filter:blur(3px);pointer-events:none;animation:stageIn 1.35s both}.event-stage[hidden]{display:none}.event-stage>span{position:relative;z-index:2;font-size:70px;animation:eventPop .8s cubic-bezier(.16,.9,.3,1.35)}.event-stage strong{position:relative;z-index:2;margin-top:10px;font-size:24px;text-shadow:0 4px 15px #000}.event-stage p{position:relative;z-index:2;margin:6px 0;color:#e3d6bd;font-size:12px}.event-burst{position:absolute;width:180px;height:180px;border:2px solid var(--gold);border-radius:50%;box-shadow:0 0 0 25px rgba(255,184,62,.08),0 0 80px rgba(255,107,49,.3);animation:burst .8s ease-out both}.event-stage.heal{background:radial-gradient(circle,rgba(52,235,137,.18),rgba(5,7,13,.76) 60%)}.event-stage.shield{background:radial-gradient(circle,rgba(61,153,255,.22),rgba(5,7,13,.76) 60%)}.event-stage.mega{animation:stageIn 1.5s both,screenShake .55s .2s}
.winner-card{position:relative;overflow:hidden;border-color:rgba(255,190,74,.26);background:radial-gradient(circle at 50% 0,rgba(255,183,57,.16),transparent 50%),#151925}.winner-card small{display:block;margin-top:7px;color:#d7ab5e;font-size:8px;letter-spacing:1px}.winner-card h2{font-size:25px}.winner-card p{font-size:14px}.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}.confetti i{position:absolute;top:-20px;width:7px;height:13px;background:var(--c);animation:confettiFall var(--d) linear infinite;animation-delay:var(--delay)}
.connection-error{color:#ff7888!important}
@keyframes deltaFly{0%{opacity:0;transform:translate(-50%,15px) scale(.6)}20%{opacity:1;transform:translate(-50%,-2px) scale(1.15)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-48px) scale(.9)}}@keyframes teamHit{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}@keyframes teamHeal{45%{box-shadow:0 0 28px rgba(68,237,142,.4);transform:scale(1.025)}}@keyframes shieldBlock{35%{box-shadow:0 0 0 5px rgba(71,168,255,.18),0 0 35px rgba(71,168,255,.5);transform:scale(1.035)}}@keyframes pulse{50%{opacity:.4;transform:scale(.7)}}@keyframes drumRoll{25%{transform:rotate(-4deg) scale(.96)}75%{transform:rotate(4deg) scale(.96)}}@keyframes stageIn{0%{opacity:0}14%,78%{opacity:1}100%{opacity:0}}@keyframes eventPop{0%{opacity:0;transform:scale(.1) rotate(-25deg)}55%{transform:scale(1.3) rotate(8deg)}100%{opacity:1;transform:scale(1)}}@keyframes burst{0%{opacity:0;transform:scale(.15)}45%{opacity:1}100%{opacity:0;transform:scale(1.8)}}@keyframes screenShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}@keyframes confettiFall{to{transform:translateY(110vh) rotate(720deg)}}
@media(max-width:370px){.drum-war-page{padding-inline:9px}.drum-field{gap:5px}.team{padding-inline:7px}.team-top b{font-size:18px}.war-drum{aspect-ratio:.86}}@media(min-width:480px){.drum-field{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.team,.health i,.drum-shell{transition:none}.event-stage,.event-stage>span,.event-burst,.delta.show,.team.hit,.team.healed,.team.blocked{animation-duration:.01ms}}

.team-name{min-width:0;width:100%;border:0;border-bottom:1px dashed rgba(255,255,255,.16);outline:0;padding:3px 1px;background:transparent;color:#fff;font:inherit;font-size:10px;font-weight:800;text-align:right;text-overflow:ellipsis}.team-name:focus{border-bottom-color:var(--team-color);background:rgba(255,255,255,.035)}
.drum-card{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.75,.2,1)}.drum-face{position:absolute;inset:0;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden}.drum-result{display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(255,190,74,.28);border-radius:17px;padding:7px 5px;background:radial-gradient(circle at 50% 15%,rgba(255,177,61,.16),transparent 52%),#171a25;box-shadow:0 9px 18px rgba(0,0,0,.28);transform:rotateY(180deg)}.drum-result>span{font-size:23px;line-height:1}.drum-result strong{margin-top:5px;color:#ffe1a5;font-size:8px;line-height:1.25}.drum-result small{display:-webkit-box;margin-top:4px;overflow:hidden;color:#b9bdca;font-size:6px;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:3}.war-drum.revealed .drum-card{transform:rotateY(180deg)}.war-drum.used{cursor:pointer}.war-drum.used .drum-number{width:28px;height:28px;margin-top:7px;border:1px solid rgba(255,255,255,.12);background:rgba(12,14,21,.65);font-size:10px;box-shadow:none}
.drum-shell{inset:13% 8% 7%;border:3px solid #8b431f;border-radius:24% 24% 31% 31%/14% 14% 23% 23%;background:linear-gradient(90deg,#51220f 0,#9a4720 10%,#d0803f 28%,#8d3e1c 49%,#d38a47 70%,#8e3d1d 90%,#4b1f0e);box-shadow:inset 7px 0 12px rgba(255,193,111,.12),inset -7px 0 12px rgba(36,10,3,.38),inset 0 -7px 0 #713015,0 8px 13px rgba(0,0,0,.5)}.drum-shell::before{right:-5px;left:-5px;top:-11%;height:27%;border:3px solid #d9954d;background:radial-gradient(ellipse at 42% 32%,#fff1c6 0,#e0b679 38%,#a86435 72%,#603018 100%);box-shadow:inset 0 0 0 2px rgba(77,35,17,.3),0 4px 0 #633018,0 7px 8px rgba(0,0,0,.32)}.drum-shell::after{inset:22% 11% 8%;background:linear-gradient(70deg,transparent 42%,#f2c071 44%,#f2c071 47%,transparent 49%),linear-gradient(-70deg,transparent 42%,#dda45d 44%,#dda45d 47%,transparent 49%);background-size:30px 100%;opacity:.8}.drum-number{margin-top:13px;border-color:rgba(255,225,168,.42);background:rgba(58,20,8,.78);box-shadow:0 3px 10px rgba(32,8,2,.7),inset 0 0 7px rgba(255,183,92,.12)}
.war-footer{display:flex;align-items:center;justify-content:center;gap:5px;height:24px;margin-top:4px;direction:ltr;color:#555e70;font-size:5px;letter-spacing:1.2px}.war-footer a{color:#d6a85e;font-size:7px;font-weight:900;letter-spacing:1.5px;text-decoration:none;text-shadow:0 0 10px rgba(255,177,61,.3)}
.war-controls{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:9px}.small-control{border:1px solid rgba(255,190,74,.2);border-radius:999px;padding:6px 11px;background:rgba(255,177,61,.07);color:#c9b58f;font-size:7px;font-weight:800;cursor:pointer}.reset-control{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.035);color:#8f98aa}.small-control:active{transform:scale(.96)}
.rules-card{position:relative;text-align:right}.rules-card>small{display:block;color:#b88b49;font-size:7px;text-align:center;letter-spacing:1px}.rules-card h2{margin:5px 0 14px;text-align:center}.rules-card ol{margin:0 0 19px;padding:0 20px 0 0;color:#c5c9d4;font-size:10px;line-height:2}.rules-card li::marker{color:var(--gold);font-weight:900}.rules-drum{display:block;font-size:34px;text-align:center}.rules-close{position:absolute;top:12px;left:12px;display:grid;place-items:center;width:29px;height:29px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.04);color:#aeb4c2;font-size:18px;cursor:pointer}
.drum-stick{position:absolute;z-index:8;top:-15%;left:56%;width:7px;height:72%;border:1px solid #5f2c12;border-radius:999px;background:linear-gradient(90deg,#7f3c19,#e4a05b 42%,#9c4d20 78%,#52220e);box-shadow:2px 5px 7px rgba(0,0,0,.38);opacity:.82;pointer-events:none;transform:rotate(38deg);transform-origin:50% 8%}.drum-stick::after{content:"";position:absolute;right:50%;bottom:-6px;width:13px;height:16px;border:1px solid #713415;border-radius:50%;background:radial-gradient(circle at 35% 28%,#e4a15b,#8d421b 68%,#4c1f0d);transform:translateX(50%);box-shadow:0 3px 6px rgba(0,0,0,.4)}.war-drum.opening .drum-stick{animation:stickStrike .48s cubic-bezier(.4,0,.2,1) both}.war-drum.opening .drum-shell{animation:drumImpact .48s ease both}
@keyframes stickStrike{0%{transform:rotate(38deg) translateY(0)}38%{transform:rotate(7deg) translateY(11px)}52%{transform:rotate(12deg) translateY(8px)}100%{transform:rotate(38deg) translateY(0)}}@keyframes drumImpact{0%,30%,100%{transform:scale(1)}42%{transform:scale(.94,.9)}58%{transform:scale(1.025,.98)}}

/* طبل الأوامر الأحمر مع عصوين وحركة قرع واضحة. */
html,body{touch-action:pan-x pan-y;-webkit-text-size-adjust:100%;overscroll-behavior-x:none}
.top-controls{display:flex;justify-content:center;margin:5px 0 2px}.top-controls .reset-control{border-color:rgba(255,77,98,.35);padding:7px 17px;background:rgba(255,77,98,.1);color:#ff9daa;font-size:8px}
.battle-score{margin-top:9px}
.drum-shell{border-color:#7c101d;background:linear-gradient(90deg,#5f0915 0,#a91428 12%,#ef344b 30%,#a10e23 50%,#f13e55 70%,#971023 89%,#570713);box-shadow:inset 7px 0 12px rgba(255,140,149,.2),inset -7px 0 12px rgba(55,0,7,.5),inset 0 -7px 0 #7d0b1c,0 8px 15px rgba(0,0,0,.55)}
.drum-shell::before{border-color:#e6bd80;background:radial-gradient(ellipse at 42% 32%,#fff7dd 0,#ead2a4 38%,#b68452 72%,#69421f 100%)}
.drum-shell::after{background:linear-gradient(70deg,transparent 42%,#ffd59b 44%,#ffd59b 47%,transparent 49%),linear-gradient(-70deg,transparent 42%,#e8b46c 44%,#e8b46c 47%,transparent 49%);background-size:30px 100%}
.drum-number{background:rgba(91,4,18,.84);border-color:rgba(255,222,174,.55)}
.drum-stick{top:-19%;left:50%;height:65%;opacity:1;transform-origin:50% 8%}
.drum-stick.stick-left{left:29%;transform:rotate(-35deg)}
.drum-stick.stick-right{left:66%;transform:rotate(35deg)}
.war-drum.opening .drum-stick.stick-left{animation:leftStickStrike .48s cubic-bezier(.4,0,.2,1) both}
.war-drum.opening .drum-stick.stick-right{animation:rightStickStrike .48s .08s cubic-bezier(.4,0,.2,1) both}
@keyframes leftStickStrike{0%,100%{transform:rotate(-35deg) translateY(0)}42%{transform:rotate(-6deg) translateY(13px)}58%{transform:rotate(-12deg) translateY(8px)}}
@keyframes rightStickStrike{0%,100%{transform:rotate(35deg) translateY(0)}42%{transform:rotate(6deg) translateY(13px)}58%{transform:rotate(12deg) translateY(8px)}}

/* لكل أمر حضور بصري يناسبه: انفجار، صاروخ، علاج، درع وغيرها. */
.event-stage.event-hit_20>span{animation:bombDrop .9s ease-out}.event-stage.event-hit_30>span,.event-stage.event-hit_40>span{animation:rocketLaunch 1.05s ease-in-out}.event-stage.event-heal_10>span,.event-stage.event-heal_20>span{animation:healFloat 1s ease-out}.event-stage.event-shield>span{animation:shieldGuard .9s ease-out}.event-stage.event-steal_10>span,.event-stage.event-steal_20>span{animation:lootSwing .9s ease-out}.event-stage.event-swap>span,.event-stage.event-random>span{animation:spinAction .9s ease-out}
.event-stage.event-hit_20 .event-burst,.event-stage.event-hit_30 .event-burst,.event-stage.event-hit_40 .event-burst{border-color:#ff5b35;box-shadow:0 0 0 32px rgba(255,69,30,.12),0 0 110px rgba(255,83,28,.65)}
@keyframes bombDrop{0%{opacity:0;transform:translateY(-55vh) rotate(-30deg) scale(.45)}48%{opacity:1;transform:translateY(0) scale(1.15)}65%{transform:scale(1.45)}100%{transform:scale(1)}}
@keyframes rocketLaunch{0%{opacity:0;transform:translate(-45vw,38vh) rotate(-35deg) scale(.5)}50%{opacity:1;transform:translate(0) rotate(-35deg) scale(1.25)}100%{transform:translate(45vw,-40vh) rotate(-35deg) scale(.8)}}
@keyframes healFloat{0%{opacity:0;transform:translateY(45px) scale(.4)}55%{opacity:1;transform:translateY(-12px) scale(1.3)}100%{transform:none}}
@keyframes shieldGuard{0%{opacity:0;transform:scale(.25)}55%{opacity:1;transform:scale(1.45)}75%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes lootSwing{0%{opacity:0;transform:translateX(-70px) rotate(-40deg)}60%{opacity:1;transform:translateX(8px) rotate(12deg)}100%{transform:none}}
@keyframes spinAction{0%{opacity:0;transform:rotate(-540deg) scale(.2)}100%{opacity:1;transform:rotate(0) scale(1)}}

/* مؤشر الدور: كلمة ثابتة في الوسط وسهم يتجه نحو بطاقة الفريق الحالية. */
.turn-banner{position:relative;justify-content:center;padding-inline:42px}.turn-banner b{font-size:13px;text-align:center}.turn-banner small{position:absolute;right:8px;margin:0}.turn-arrow{position:absolute;top:-17px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;font-size:18px;font-weight:1000;line-height:1;transition:left .35s ease,right .35s ease;color:#fff;animation:turnArrowBounce .75s ease-in-out infinite alternate}.turn-banner.red .turn-arrow{left:calc(25% - 12px);right:auto;background:var(--red);box-shadow:0 0 16px rgba(255,77,98,.7)}.turn-banner.blue .turn-arrow{right:calc(25% - 12px);left:auto;background:var(--blue);box-shadow:0 0 16px rgba(61,140,255,.75)}
@keyframes turnArrowBounce{from{transform:translateY(2px)}to{transform:translateY(-3px)}}

/* قرعة الفردي والزوجي قبل كل معركة. */
.dice-modal{z-index:45;background:radial-gradient(circle at 50% 35%,rgba(255,184,61,.15),rgba(4,6,12,.9) 62%);backdrop-filter:blur(9px)}.dice-card{position:relative;overflow:hidden;border-color:rgba(255,190,74,.3);background:radial-gradient(circle at 50% 0,rgba(255,185,66,.16),transparent 43%),#141824;text-align:center}.dice-card>small{color:#d4a556;font-size:8px;letter-spacing:1px}.dice-card h2{margin:7px 0 4px;font-size:22px}.dice-card>p{margin:0 0 17px;color:#8e96a8;font-size:9px}.parity-picks{display:grid;grid-template-columns:1fr 1fr;gap:10px;direction:ltr}.parity-pick{display:flex;min-height:105px;flex-direction:column;align-items:center;justify-content:center;border:1px solid;border-radius:18px;color:white;cursor:pointer;transition:.2s}.parity-pick span{font-size:30px}.parity-pick b{max-width:100%;margin-top:7px;overflow:hidden;font-size:13px;text-overflow:ellipsis}.parity-pick small{margin-top:4px;font-size:9px;font-weight:900}.red-pick{border-color:rgba(255,77,98,.35);background:radial-gradient(circle at 50% 0,rgba(255,77,98,.22),transparent 65%),rgba(255,77,98,.06)}.blue-pick{border-color:rgba(61,140,255,.38);background:radial-gradient(circle at 50% 0,rgba(61,140,255,.24),transparent 65%),rgba(61,140,255,.06)}.parity-pick:active{transform:scale(.94)}
.dice-arena{position:relative;min-height:205px;padding-top:17px}.battle-die{position:relative;z-index:2;font-size:92px;line-height:1;color:#fff0cb;text-shadow:0 8px 16px #000,0 0 25px rgba(255,188,74,.65)}.dice-glow{position:absolute;top:21px;left:50%;width:125px;height:125px;border:2px solid rgba(255,191,76,.65);border-radius:50%;transform:translateX(-50%);box-shadow:0 0 0 22px rgba(255,184,64,.07),0 0 70px rgba(255,109,39,.35);animation:diceGlow 1s ease-in-out infinite alternate}.battle-die.rolling{animation:diceRoll .52s linear infinite}.battle-die.landed{animation:diceLand .8s cubic-bezier(.16,.9,.3,1.35)}.dice-arena strong{display:block;margin-top:14px;color:#ffe1a4;font-size:19px}.dice-arena p{margin:6px 0 0;color:#fff;font-size:13px;font-weight:900}
@keyframes diceRoll{0%{transform:translate(-28px,-18px) rotate(0) scale(.72)}25%{transform:translate(22px,9px) rotate(100deg) scale(1.1)}50%{transform:translate(-8px,24px) rotate(190deg) scale(.8)}75%{transform:translate(28px,-6px) rotate(280deg) scale(1.08)}100%{transform:translate(-28px,-18px) rotate(360deg) scale(.72)}}@keyframes diceLand{0%{opacity:.2;transform:translateY(-130px) rotate(-240deg) scale(.35)}55%{opacity:1;transform:translateY(12px) rotate(12deg) scale(1.35)}75%{transform:translateY(-8px) rotate(-5deg) scale(.92)}100%{transform:none}}@keyframes diceGlow{to{transform:translateX(-50%) scale(1.13);opacity:.55}}

.event-stage.event-hit_5>span,.event-stage.event-hit_10>span{animation:quickHit .75s ease-out}.event-stage.event-reverse_10>span,.event-stage.event-reverse_20>span{animation:reverseHit .9s ease-out}.event-stage.event-double>span{animation:powerDouble .85s ease-out}.event-stage.event-extra>span{animation:extraTurn .9s ease-out}.event-stage.event-skip>span{animation:timeDrop .95s ease-out}.event-stage.event-empty>span{animation:emptyFade 1.05s ease-out}.event-stage.event-everyone>span,.event-stage.event-mega>span{animation:worldImpact 1s ease-out}
.event-stage.event-empty{background:radial-gradient(circle,rgba(145,153,170,.12),rgba(5,7,13,.82) 60%)}.event-stage.event-extra,.event-stage.event-double{background:radial-gradient(circle,rgba(255,193,68,.23),rgba(5,7,13,.78) 60%)}
@keyframes quickHit{0%{opacity:0;transform:translateX(-55vw) scale(.45)}55%{opacity:1;transform:translateX(12px) scale(1.4)}72%{transform:translateX(-8px) scale(.92)}100%{transform:none}}@keyframes reverseHit{0%{opacity:0;transform:translateX(-45vw) rotate(-180deg)}55%{opacity:1;transform:translateX(20px) rotate(25deg) scale(1.3)}100%{transform:none}}@keyframes powerDouble{0%{opacity:0;transform:scale(.1)}45%{opacity:1;transform:scale(1.55)}65%{transform:scale(.75)}82%{transform:scale(1.25)}100%{transform:scale(1)}}@keyframes extraTurn{0%{opacity:0;transform:rotate(-720deg) scale(.2)}75%{opacity:1;transform:rotate(25deg) scale(1.3)}100%{transform:none}}@keyframes timeDrop{0%{opacity:0;transform:translateY(-60vh) rotate(-35deg)}60%{opacity:1;transform:translateY(10px) rotate(8deg) scale(1.3)}100%{transform:none}}@keyframes emptyFade{0%{opacity:0;filter:blur(12px);transform:scale(2)}40%{opacity:.9}100%{opacity:.25;filter:blur(2px);transform:scale(.8)}}@keyframes worldImpact{0%{opacity:0;transform:scale(4) rotate(-45deg)}48%{opacity:1;transform:scale(.65) rotate(8deg)}68%{transform:scale(1.55)}100%{transform:scale(1)}}

/* الطماطة تنعفس وتتناثر، والقنبلة تعطي وميض انفجار أقوى. */
.event-stage.event-tomato{overflow:hidden;background:radial-gradient(circle,rgba(255,37,51,.3),rgba(54,3,8,.78) 45%,rgba(5,7,13,.9) 72%)}.event-stage.event-tomato>span{animation:tomatoSquash 1.15s cubic-bezier(.2,.8,.2,1)}.event-stage.event-tomato::before,.event-stage.event-tomato::after{content:"";position:absolute;z-index:1;width:190px;height:95px;border-radius:50%;background:radial-gradient(circle at 30% 35%,#ff5963 0 5%,transparent 6%),radial-gradient(circle at 68% 25%,#ff2f42 0 7%,transparent 8%),radial-gradient(ellipse,#d90925 0 42%,#850013 43% 60%,transparent 61%);opacity:0;animation:tomatoSplash 1.15s .35s ease-out}.event-stage.event-tomato::after{transform:rotate(75deg) scale(.72);animation-delay:.43s}.event-stage.event-hit_20::before{content:"";position:absolute;inset:0;background:#fff;opacity:0;animation:bombFlash .75s .38s ease-out}.event-stage.event-hit_20 .event-burst{animation:bombBlast .85s .32s ease-out both}
@keyframes tomatoSquash{0%{opacity:0;transform:translateY(-58vh) rotate(-35deg) scale(.55)}42%{opacity:1;transform:translateY(0) rotate(8deg) scale(1.45,1.45)}55%{transform:translateY(18px) scale(2.15,.28)}72%{transform:translateY(7px) scale(1.65,.48)}100%{opacity:.15;transform:translateY(18px) scale(2.3,.18)}}@keyframes tomatoSplash{0%{opacity:0;transform:scale(.1)}35%{opacity:1}100%{opacity:0;transform:scale(2.8) rotate(25deg)}}@keyframes bombFlash{0%,100%{opacity:0}20%{opacity:.95}45%{opacity:.18}}@keyframes bombBlast{0%{opacity:0;transform:scale(.08)}45%{opacity:1;border-width:12px;transform:scale(.9)}100%{opacity:0;transform:scale(3.2)}}

/* الحمامة تحمل الرسالة عبر الساحة، والصاعقة وقشرة الموز لهما تفاعل مستقل. */
.event-stage.event-pigeon{overflow:hidden;background:linear-gradient(180deg,rgba(68,145,218,.28),rgba(5,7,13,.82))}.event-stage.event-pigeon>span{font-size:84px;animation:pigeonFlight 1.55s ease-in-out}.event-stage.event-pigeon::before{content:"✉️";position:absolute;z-index:3;font-size:30px;animation:letterFlight 1.55s ease-in-out}.event-stage.event-lightning>span{animation:lightningStrike .8s ease-out}.event-stage.event-lightning::before{content:"";position:absolute;inset:0;background:#dff5ff;opacity:0;animation:lightningFlash .75s ease-out}.event-stage.event-banana>span{animation:bananaSlip 1.05s ease-out}
@keyframes pigeonFlight{0%{opacity:0;transform:translate(-60vw,30vh) rotate(-18deg) scale(.45)}30%{opacity:1;transform:translate(-18vw,-8vh) rotate(8deg) scale(1.1)}62%{transform:translate(12vw,5vh) rotate(-7deg) scale(1.25)}100%{opacity:0;transform:translate(65vw,-35vh) rotate(12deg) scale(.7)}}@keyframes letterFlight{0%{opacity:0;transform:translate(-58vw,37vh) rotate(-20deg)}30%{opacity:1;transform:translate(-15vw,1vh) rotate(8deg)}62%{transform:translate(15vw,14vh) rotate(-8deg)}100%{opacity:0;transform:translate(68vw,-27vh) rotate(18deg)}}@keyframes lightningStrike{0%{opacity:0;transform:translateY(-65vh) scaleY(2)}35%{opacity:1;transform:translateY(0) scale(1.8)}55%{transform:scale(.72)}72%{transform:scale(1.5)}100%{transform:scale(1)}}@keyframes lightningFlash{0%,100%{opacity:0}18%{opacity:.95}30%{opacity:.08}42%{opacity:.75}58%{opacity:0}}@keyframes bananaSlip{0%{opacity:0;transform:translateX(-55vw) rotate(0)}50%{opacity:1;transform:translateX(0) rotate(540deg) scale(1.35)}68%{transform:translate(20px,18px) rotate(610deg) scale(.8)}100%{opacity:.25;transform:translate(55vw,45vh) rotate(900deg) scale(.5)}}

.game-header{display:grid;grid-template-columns:41px minmax(0,1fr) 41px;gap:10px}.game-title{min-width:0;text-align:center}.game-name{display:block;width:100%;border:1px solid transparent;border-radius:10px;outline:0;padding:4px 8px;background:transparent;color:#fff;font:inherit;font-size:18px;font-weight:900;text-align:center;text-overflow:ellipsis}.game-name:hover{border-color:rgba(255,190,74,.16)}.game-name:focus{border-color:rgba(255,190,74,.42);background:rgba(255,177,61,.07);box-shadow:0 0 18px rgba(255,177,61,.08)}.game-title p{text-align:center}

/* 40 drums, fixed parity dice, and coordinator long-press review. */
.drum-field{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.parity-pick{cursor:default}.parity-pick:active{transform:none}.roll-dice{grid-column:1/-1;min-height:48px;margin-top:2px;font-size:12px}.battle-die::after{content:"";position:absolute;z-index:-1;right:50%;bottom:-12px;width:72px;height:18px;border-radius:50%;background:#000;filter:blur(8px);opacity:.7;transform:translateX(50%)}.war-drum.holding::after{content:"3 ثواني";position:absolute;z-index:12;inset:2px;display:grid;place-items:center;border-radius:14px;background:conic-gradient(var(--gold) 0,transparent 0),rgba(5,7,12,.74);color:#fff;font-size:6px;font-weight:900;animation:holdProgress 3s linear forwards;pointer-events:none}.war-drum.revealed .drum-card{transform:rotateY(180deg)}
@keyframes holdProgress{to{background:conic-gradient(var(--gold) 360deg,transparent 0),rgba(5,7,12,.74)}}
@media(max-width:370px){.drum-war-page{padding-inline:7px}.drum-field{gap:4px}.drum-number{width:23px;height:23px;font-size:9px}}@media(min-width:480px){.drum-field{grid-template-columns:repeat(8,minmax(0,1fr))}}
.dice-summary{display:grid;grid-template-columns:25px 1fr auto;align-items:center;gap:7px;min-height:35px;margin-top:6px;border:1px solid rgba(255,190,74,.22);border-radius:11px;padding:5px 9px;background:rgba(255,190,74,.06);color:#e8edf7}.dice-summary[hidden]{display:none}.dice-summary>span{font-size:16px}.dice-summary>b{font-size:8px}.dice-summary>small{border-radius:99px;padding:4px 6px;font-size:6px;font-weight:900;white-space:nowrap}.dice-summary.red{border-color:rgba(255,77,98,.28);background:rgba(255,77,98,.055)}.dice-summary.red>small{background:rgba(255,77,98,.12);color:#ff8290}.dice-summary.blue{border-color:rgba(61,140,255,.3);background:rgba(61,140,255,.055)}.dice-summary.blue>small{background:rgba(61,140,255,.13);color:#82b4ff}
.continue-dice{width:min(100%,220px);min-height:45px;margin:15px auto 0}.continue-dice[hidden]{display:none}
.dice-arena.dice-winner-red .dice-glow{border-color:var(--red);box-shadow:0 0 0 22px rgba(255,77,98,.08),0 0 75px rgba(255,77,98,.5)}.dice-arena.dice-winner-red p{color:#ff7181}.dice-arena.dice-winner-blue .dice-glow{border-color:var(--blue);box-shadow:0 0 0 22px rgba(61,140,255,.08),0 0 75px rgba(61,140,255,.5)}.dice-arena.dice-winner-blue p{color:#6eabff}
.drum-war-page{height:100dvh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,189,74,.32) transparent}.drum-war-page::-webkit-scrollbar{width:3px}.drum-war-page::-webkit-scrollbar-thumb{border-radius:99px;background:rgba(255,189,74,.32)}.drum-field{padding-bottom:8px}
.war-drum.used{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.war-drum.holding .drum-card{transform:none!important}.war-drum.revealed .drum-card{transform:none!important}
.war-sticky{position:sticky;z-index:18;top:0;width:100%;margin:0;padding:7px 7px 9px;border:1px solid rgba(255,255,255,.07);border-top:0;border-radius:0 0 20px 20px;background:#0b0e18;box-shadow:0 12px 30px rgba(0,0,0,.42),inset 0 -1px rgba(255,255,255,.035);contain:paint}.war-sticky .battle-score{margin-top:11px;margin-bottom:8px}.war-sticky .turn-banner{box-shadow:0 8px 20px rgba(0,0,0,.28)}.war-sticky .team,.war-sticky .team.active,.war-sticky .team.hit,.war-sticky .team.healed,.war-sticky .team.blocked{animation:none!important;transform:none!important}.war-sticky .team.active{border-color:var(--team-color);box-shadow:0 0 0 1px color-mix(in srgb,var(--team-color) 28%,transparent),0 0 22px color-mix(in srgb,var(--team-color) 13%,transparent)}
html,body{overflow:hidden;background:#0b0e18}.drum-war-page{width:min(100%,580px);max-width:580px;margin-inline:auto;overflow-x:hidden!important}.war-sticky{left:auto;right:auto;transform:none!important;background:#0b0e18!important;isolation:isolate}.war-sticky::before{content:"";position:absolute;z-index:-1;right:-20px;bottom:0;left:-20px;height:calc(100% + max(17px,env(safe-area-inset-top)));background:#0b0e18;box-shadow:0 14px 30px rgba(0,0,0,.5);pointer-events:none}
.drum-war-page{display:flex!important;height:100dvh;min-height:0!important;flex-direction:column;overflow:hidden!important}.war-sticky{position:relative!important;z-index:20;top:auto!important;flex:0 0 auto;width:100%;overflow:hidden;background:#0b0e18!important}.war-sticky::before{display:none}.war-scroll-area{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;padding:0 2px max(24px,env(safe-area-inset-bottom));overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,189,74,.32) transparent}.war-scroll-area::-webkit-scrollbar{width:3px}.war-scroll-area::-webkit-scrollbar-thumb{border-radius:99px;background:rgba(255,189,74,.32)}
.war-drum.revealed .drum-front{opacity:0;transform:rotateY(-180deg)}.war-drum.revealed .drum-result{opacity:1;transform:rotateY(0)}.drum-front,.drum-result{transition:transform .55s cubic-bezier(.2,.75,.2,1),opacity .2s}.drum-result{opacity:0}.war-drum.revealed .drum-card .drum-result{transform:rotateY(0)!important}