:root{--accent:#ffca4b;--blue:#4388ff;--red:#ff405c;--green:#35c783;--orange:#ff9b42;color-scheme:dark}*{box-sizing:border-box}body{margin:0;overflow-x:hidden;background:radial-gradient(circle at 10% 0,#16315d77,transparent 32%),radial-gradient(circle at 90% 0,#5a102377,transparent 32%),#070a12;color:#f7f9ff}.team-war-page{width:min(100%,1060px);padding:10px 12px max(18px,env(safe-area-inset-bottom))}.game-brand-line{margin-bottom:5px}.game-header{max-width:680px;margin:auto}.scoreboard{display:grid;grid-template-columns:1fr 76px 1fr;gap:9px;max-width:720px;margin:10px auto 12px}.team{position:relative;display:grid;grid-template-columns:34px 1fr;align-items:center;min-width:0;padding:8px 10px;border:1px solid #ffffff16;border-radius:18px;background:#111725dd;overflow:visible}.team.active{border-color:color-mix(in srgb,var(--team) 65%,transparent);box-shadow:0 0 25px color-mix(in srgb,var(--team) 20%,transparent);transform:translateY(-2px)}.team.blue{--team:var(--blue)}.team.red{--team:var(--red)}.team-icon{grid-row:span 2;font-size:22px}.team input{width:100%;border:0;outline:0;background:transparent;color:#fff;text-align:center;font:800 12px inherit}.score-line{display:flex;justify-content:center;align-items:baseline;gap:4px;direction:ltr}.score-line strong{font-size:23px}.score-line small{font-size:7px;color:#8d96a9}.team>i{position:absolute;right:15%;bottom:-4px;width:70%;height:4px;border-radius:5px;background:var(--team);opacity:0;box-shadow:0 0 12px var(--team)}.team.active>i{opacity:1}.team-powers{position:absolute;bottom:-16px;inset-inline:0;text-align:center;color:#ffd56c;font-size:7px}.turn-core{display:grid;place-items:center;align-content:center;border-radius:18px;background:#171c2b;text-align:center}.turn-core small,.turn-core span{font-size:7px;color:#7f899d}.turn-core b{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#ffd15c}.war-board{display:grid;grid-template-columns:72px 1fr 72px;grid-template-rows:72px minmax(270px,1fr) 72px;grid-template-areas:"top top top" "left center right" "bottom bottom bottom";gap:8px;max-width:900px;min-height:480px;margin:20px auto 10px;padding:8px;border:1px solid #ffffff13;border-radius:30px;background:#0d1220cc;box-shadow:0 25px 80px #0008,inset 0 1px #ffffff0d}.rail{display:grid;gap:6px}.top-rail{grid-area:top;grid-template-columns:repeat(10,1fr)}.bottom-rail{grid-area:bottom;grid-template-columns:repeat(10,1fr)}.side-rail{grid-template-rows:repeat(10,1fr)}.left-rail{grid-area:left}.right-rail{grid-area:right}.board-tile{position:relative;display:grid;place-items:center;min-width:0;min-height:0;border:1px solid #ffffff22;border-radius:12px;color:#fff;cursor:pointer;overflow:hidden;box-shadow:inset 0 1px #ffffff25,0 5px 12px #0004;transition:.2s}.board-tile.blue{background:linear-gradient(145deg,#347df0,#174a9c)}.board-tile.green{background:linear-gradient(145deg,#32c27e,#116b48)}.board-tile.special{background:linear-gradient(145deg,#f0445d,#8b1429)}.board-tile.animal{background:linear-gradient(145deg,#ffad4f,#a84e15)}.board-tile:hover{filter:brightness(1.18);transform:translateY(-2px)}.board-tile b{font-size:16px}.board-tile span{display:none}.board-tile small{position:absolute;bottom:3px;font-size:6px;opacity:.7}.side-rail .board-tile b{font-size:21px}.side-rail .board-tile small{display:none}.board-tile.used{pointer-events:none;filter:grayscale(1);opacity:.25;transform:scale(.92)}.board-tile.used:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;background:#070a12bb;color:#fff;font-size:20px}.board-tile.opening{animation:tileOpen .45s}.board-center{grid-area:center;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;text-align:center;border:1px solid #ffffff12;border-radius:25px;background:radial-gradient(circle,#1c2540,#0c111e 66%);overflow:hidden}.center-glow{position:absolute;width:170px;height:170px;border:1px dashed #ffc94766;border-radius:50%;animation:spin 18s linear infinite}.center-kicker{z-index:1;color:#ffc94d;font-size:8px;letter-spacing:3px}.center-icon{z-index:1;margin:10px;font-size:58px;filter:drop-shadow(0 10px 15px #000)}.board-center h2{z-index:1;margin:0;font-size:22px}.board-center p{z-index:1;max-width:330px;margin:6px 0 14px;color:#8f99ac;font-size:10px;line-height:1.7}.random-card{z-index:1;border:1px solid #ffc94d55;border-radius:12px;padding:9px 16px;background:#ffc94d13;color:#ffd76f;font-size:9px;font-weight:900}.game-actions{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}.game-actions button,.secondary{border:1px solid #ffffff14;border-radius:11px;padding:8px 12px;background:#151b2a;color:#aeb7c8;font-size:8px}.team-war-page footer{text-align:center;margin-top:10px;color:#535d70;font-size:7px;letter-spacing:1px}.team-war-page footer b{color:#9d86ff}.modal-card label{display:grid;gap:5px;margin:10px 0;color:#919bad;text-align:right;font-size:9px}.modal-card input,.modal-card select,.modal-card textarea{width:100%;border:1px solid #ffffff14;border-radius:11px;padding:11px;background:#0f1422;color:#fff;font:inherit;outline:0}.toggle-row{display:flex!important;align-items:center;gap:8px}.toggle-row input{width:18px}.setup-mark{display:block;font-size:42px}.round-card{width:min(100%,440px);position:relative}.round-card header{display:flex;align-items:center;gap:10px;text-align:right}.round-card header>span{font-size:35px}.round-card header div{display:grid}.round-card header small{color:#8290a4;font-size:9px}.round-card header b{color:#ffd15b;font-size:11px}.round-card header button,.x-button{margin-inline-start:auto;border:0;background:none;color:#8993a4;font-size:24px}.timer{position:relative;height:34px;margin:15px 0;border-radius:10px;background:#0d1220;overflow:hidden}.timer i{position:absolute;inset:auto 0 0;height:3px;background:#44ca84;transition:1s linear}.timer strong{position:relative;z-index:1;line-height:34px}.timer.danger i{background:#ff405c}.timer.danger strong{color:#ff6075}.question-icon{font-size:55px}.question-image{height:170px;border-radius:16px;overflow:hidden}.question-image img{width:100%;height:100%;object-fit:cover}.category{display:inline-block;margin:6px;padding:4px 9px;border-radius:20px;background:#ffffff0a;color:#8d98aa;font-size:8px}.round-card h2{margin:7px 0 15px;line-height:1.7;font-size:18px}.show-answer{width:100%;border:1px solid #ffd05a66;border-radius:13px;padding:12px;background:#ffd05a12;color:#ffd86d;font-weight:800}.answer-box{margin:12px 0;padding:12px;border-radius:13px;background:#37c88216}.answer-box small{display:block;color:#799486;font-size:8px}.answer-box strong{color:#5be0a0}.judge-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.judge-actions button{border:0;border-radius:13px;padding:12px;color:#fff;font-weight:900}.correct{background:#24aa6a}.wrong{background:#d93750}.event-icon{font-size:70px;animation:eventPop .8s ease-in-out infinite alternate}.score-burst{position:absolute;z-index:5;left:50%;top:30%;color:#fff;font-style:normal;font-size:24px;font-weight:1000;text-shadow:0 0 14px var(--team);animation:scoreFly 1.1s forwards}.score-hit{animation:scoreHit .45s}.rules-card{position:relative;text-align:right}.rules-card h2{text-align:center}.rules-card ol{padding-right:20px;color:#adb6c6;font-size:10px;line-height:2}.winner-modal .modal-card{position:relative;overflow:hidden}.confetti i{position:absolute;top:-20px;left:var(--x);width:7px;height:14px;background:var(--c);animation:fall 2.8s var(--d) linear infinite}.admin-drawer{position:fixed;z-index:30;inset:0 0 0 auto;width:min(100%,520px);overflow:auto;padding:18px;background:#0d1220;box-shadow:-20px 0 70px #000}.admin-drawer header{display:flex;justify-content:space-between}.admin-drawer header h2{margin:3px 0}.admin-drawer header button{border:0;background:none;color:#fff;font-size:27px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.form-grid label{display:grid;gap:4px;color:#8993a4;font-size:9px}.form-grid input,.form-grid select,.form-grid textarea{border:1px solid #ffffff15;border-radius:10px;padding:10px;background:#141a29;color:#fff}.form-grid .wide{grid-column:1/-1}.admin-list article{display:grid;grid-template-columns:1fr auto;gap:4px;margin:8px 0;padding:10px;border:1px solid #ffffff11;border-radius:12px}.admin-list article b{font-size:10px}.admin-list article span{font-size:8px;color:#7f8a9f}.admin-list article div{grid-row:span 2}.admin-list button{border:0;border-radius:8px;padding:6px;margin:2px;background:#242b3d;color:#fff;font-size:8px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes tileOpen{50%{transform:scale(1.18) rotate(4deg);filter:brightness(1.8)}}@keyframes eventPop{to{transform:scale(1.12) rotate(4deg)}}@keyframes scoreFly{to{transform:translate(-50%,-70px) scale(1.4);opacity:0}}@keyframes scoreHit{50%{transform:scale(1.04)}}@keyframes fall{to{transform:translateY(440px) rotate(520deg)}}
@media(max-width:600px){.team-war-page{padding-inline:7px}.scoreboard{grid-template-columns:1fr 58px 1fr;gap:5px}.team{padding:6px;grid-template-columns:25px 1fr}.team-icon{font-size:16px}.team input{font-size:10px}.score-line strong{font-size:19px}.war-board{grid-template-columns:43px 1fr 43px;grid-template-rows:53px minmax(275px,1fr) 53px;gap:4px;min-height:395px;margin-top:20px;padding:5px;border-radius:20px}.rail{gap:3px}.board-tile{border-radius:7px}.board-tile b{font-size:11px}.board-tile small{display:none}.side-rail .board-tile b{font-size:16px}.board-center{padding:10px;border-radius:15px}.center-icon{font-size:43px}.board-center h2{font-size:17px}.board-center p{font-size:9px}.center-glow{width:130px;height:130px}.game-actions button{padding:7px 9px}.game-brand-line{margin-bottom:4px}}
@media(max-width:360px){.war-board{grid-template-columns:36px 1fr 36px;grid-template-rows:46px 260px 46px}.side-rail .board-tile b{font-size:14px}.scoreboard{grid-template-columns:1fr 48px 1fr}.team-icon{display:none}.team{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Visual polish v2 — 20 numbers, 10 event symbols, 10 animal icons. */
.war-board{position:relative;padding:12px;gap:10px;border-color:#ffffff20;background:linear-gradient(145deg,#121a2ce8,#080c17f2);box-shadow:0 28px 90px #000a,inset 0 1px #ffffff18,0 0 0 1px #000}.war-board:before{content:"ساحة حرب الفرق";position:absolute;z-index:3;top:-11px;left:50%;transform:translateX(-50%);padding:4px 14px;border:1px solid #ffffff18;border-radius:999px;background:#101625;color:#8f9bb1;font-size:7px;font-weight:900;letter-spacing:.5px;white-space:nowrap}.rail{position:relative;padding:3px;border:1px solid #ffffff0c;border-radius:15px;background:#05091488}.top-rail{box-shadow:0 -8px 25px #347df01c}.bottom-rail{box-shadow:0 8px 25px #32c27e1c}.left-rail{box-shadow:-8px 0 25px #f0445d1c}.right-rail{box-shadow:8px 0 25px #ffad4f1c}.board-tile{isolation:isolate;border-color:#ffffff30;box-shadow:inset 0 1px 1px #ffffff30,inset 0 -10px 20px #0002,0 5px 12px #0006}.board-tile:before{content:"";position:absolute;z-index:-1;inset:1px;border-radius:inherit;background:linear-gradient(135deg,#ffffff20,transparent 42%)}.board-tile.blue{background:linear-gradient(150deg,#579bff,#2468d7 55%,#123a83)}.board-tile.green{background:linear-gradient(150deg,#4dde9b,#20a86b 55%,#0c5a3b)}.board-tile.special{background:linear-gradient(150deg,#ff667b,#da304a 55%,#7c1126)}.board-tile.animal{background:linear-gradient(150deg,#ffc064,#f08a32 55%,#9d4610)}.board-tile b{font-weight:1000;text-shadow:0 2px 8px #0008}.top-rail .board-tile b,.bottom-rail .board-tile b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#06102055;font-size:15px}.side-rail .board-tile b{font-size:24px;filter:drop-shadow(0 4px 5px #0007)}.board-tile.special b{animation:symbolFloat 2.6s ease-in-out infinite}.board-tile.animal b{animation:animalBreathe 2.8s ease-in-out infinite}.board-tile:nth-child(2n) b{animation-delay:.35s}.board-tile:nth-child(3n) b{animation-delay:.7s}.board-tile.used{opacity:.2;filter:grayscale(1) brightness(.7)}.board-center{border-color:#ffc94d25;background:radial-gradient(circle at 50% 42%,#29375b,#111827 55%,#080d18);box-shadow:inset 0 0 55px #0008,0 0 35px #ffc94d0b}.center-glow{width:190px;height:190px;border-color:#ffc94d77;box-shadow:0 0 40px #ffc94d10}.center-icon{display:grid;place-items:center;width:82px;height:82px;border:1px solid #ffc94d55;border-radius:25px;background:linear-gradient(145deg,#242c42,#111728);box-shadow:0 12px 30px #0008,0 0 28px #ffc94d15}.random-card{background:linear-gradient(135deg,#f1a42d,#e85f34);border:0;color:#fff;box-shadow:0 10px 24px #e7772d35}.team{background:linear-gradient(145deg,#182033,#0e1422);box-shadow:inset 0 1px #ffffff13,0 8px 24px #0004}.score-line strong{text-shadow:0 0 16px var(--team)}
@keyframes symbolFloat{50%{transform:translateY(-2px) scale(1.07)}}@keyframes animalBreathe{50%{transform:scale(1.12)}}
@media(max-width:600px){.war-board{padding:7px;gap:5px}.rail{padding:2px;border-radius:10px}.board-tile{border-radius:8px}.top-rail .board-tile b,.bottom-rail .board-tile b{width:24px;height:24px;font-size:12px}.side-rail .board-tile b{font-size:19px}.center-glow{width:145px;height:145px}.center-icon{width:65px;height:65px;border-radius:20px}.war-board:before{top:-10px}}

/* Sixty-cell board: 20 numbers + 20 symbols + 20 animals. */
.war-board{grid-template-columns:128px minmax(220px,1fr) 128px;grid-template-rows:72px minmax(360px,1fr) 72px}
.side-rail{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(10,1fr)}
.side-rail .board-tile b{font-size:21px}
@media(max-width:600px){.war-board{grid-template-columns:76px minmax(0,1fr) 76px;grid-template-rows:53px minmax(310px,1fr) 53px}.side-rail{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(10,1fr);gap:2px}.side-rail .board-tile b{font-size:15px}.board-center{padding-inline:6px}.board-center p{max-width:150px}}
@media(max-width:360px){.war-board{grid-template-columns:68px minmax(0,1fr) 68px;grid-template-rows:46px 300px 46px}.side-rail .board-tile b{font-size:14px}}
.live-game-name{display:block;width:min(210px,55vw);margin:auto;border:0;border-bottom:1px dashed #ffffff20;outline:0;background:transparent;color:#fff;text-align:center;font:950 18px inherit;line-height:1.35}.live-game-name:focus{border-color:#ffc94d;color:#ffd66b}.team input:focus{border-radius:7px;background:#ffffff0a;box-shadow:0 0 0 1px var(--team)}
.dice-card{background:radial-gradient(circle at 50% 35%,#273454,#141a2a 58%);overflow:hidden}.dice-teams{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:15px 0}.dice-teams>span{display:grid;gap:3px;padding:10px;border:1px solid #ffffff12;border-radius:13px;background:#0c1220}.dice-teams b{font-size:10px;overflow:hidden;text-overflow:ellipsis}.dice-teams small{color:#7e899c;font-size:8px}.team-die{display:grid;place-items:center;width:100px;height:100px;margin:14px auto;border:2px solid #ffc94d66;border-radius:25px;background:#f6f0df;color:#171821;font-size:70px;box-shadow:0 15px 38px #0008,0 0 35px #ffc94d20}.team-die.rolling{animation:diceRoll .16s linear infinite}.dice-card>strong{display:block;min-height:25px;margin-bottom:12px;color:#ffd36a;font-size:11px}@keyframes diceRoll{50%{transform:rotate(12deg) scale(.92)}}
.game-title #setTitle{display:none}.setup-modal .setup-mark,.setup-modal .modal-card>small,.setup-modal label:has(#setSelect),.setup-modal .toggle-row{display:none!important}.setup-modal .modal-card{background:radial-gradient(circle at 50% 10%,#26375d,#151b2c 55%);border-color:#5f8dff44}.setup-modal .modal-card h2{margin:0 0 18px}.setup-modal #startButton{margin-top:16px;background:linear-gradient(135deg,#4f8cff,#7258ef);box-shadow:0 12px 30px #4e76ef44}#resetButton{font-size:0}#resetButton:after{content:"↻ ريستارت";font-size:8px}
.start-timer{width:100%;margin-bottom:10px;border:0;border-radius:13px;padding:13px;background:linear-gradient(135deg,#4f8cff,#7258ef);color:#fff;font-weight:900;box-shadow:0 10px 24px #4e76ef35}
.header-actions{display:flex;align-items:center;gap:7px}.game-header #resetButton{border:1px solid #ff7182;border-radius:10px;padding:8px 11px;background:linear-gradient(135deg,#e32f48,#a9152c);color:#fff;font-size:0;font-weight:950;box-shadow:0 6px 18px #e32f4840}.game-header #resetButton:after{content:"↻ ريستارت";font-size:9px}.game-header #resetButton:active{transform:scale(.96)}
@media(max-width:420px){.game-header #resetButton{padding:7px 8px}.game-header #resetButton:after{font-size:8px}.header-actions{gap:4px}}

/* Responsive, tactile dice v3. */
.dice-card{width:min(100%,370px);background:radial-gradient(circle at 50% 35%,#31436d,#141a2a 62%);border-color:#ffc94d38}.dice-stage{display:grid;place-items:center;min-height:142px;margin:4px 0 8px;perspective:700px}.team-die{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:10px;width:112px;height:112px;margin:0;padding:20px;border:1px solid #fff;border-radius:27px;background:linear-gradient(145deg,#fff,#e9edf5 58%,#c8cfdd);font-size:0;box-shadow:inset 8px 8px 15px #fff,inset -8px -8px 16px #aab3c5,0 20px 38px #0009,0 0 38px #ffc94d22;transform:rotateX(8deg) rotateY(-8deg);will-change:transform}.team-die i{width:15px;height:15px;align-self:center;justify-self:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#404b61,#111725 58%,#05070c);box-shadow:inset 1px 1px 2px #ffffff55,0 2px 3px #0005;opacity:0}.team-die[data-face="1"] i:nth-child(5),.team-die[data-face="2"] i:nth-child(1),.team-die[data-face="2"] i:nth-child(9),.team-die[data-face="3"] i:nth-child(1),.team-die[data-face="3"] i:nth-child(5),.team-die[data-face="3"] i:nth-child(9),.team-die[data-face="4"] i:nth-child(1),.team-die[data-face="4"] i:nth-child(3),.team-die[data-face="4"] i:nth-child(7),.team-die[data-face="4"] i:nth-child(9),.team-die[data-face="5"] i:nth-child(1),.team-die[data-face="5"] i:nth-child(3),.team-die[data-face="5"] i:nth-child(5),.team-die[data-face="5"] i:nth-child(7),.team-die[data-face="5"] i:nth-child(9),.team-die[data-face="6"] i:nth-child(1),.team-die[data-face="6"] i:nth-child(3),.team-die[data-face="6"] i:nth-child(4),.team-die[data-face="6"] i:nth-child(6),.team-die[data-face="6"] i:nth-child(7),.team-die[data-face="6"] i:nth-child(9){opacity:1}.team-die.rolling{animation:professionalDiceRoll .26s cubic-bezier(.4,0,.2,1) infinite}.team-die.landed{animation:diceLand .35s cubic-bezier(.2,.9,.25,1.25)}.dice-card #rollTeamDice{width:100%;min-height:48px;border:1px solid #ffe08a;border-radius:14px;background:linear-gradient(135deg,#f5b637,#e87827);color:#17130a;font-size:12px;font-weight:1000;box-shadow:0 10px 25px #ed8c3240;transition:transform .12s,filter .12s}.dice-card #rollTeamDice:active{transform:translateY(2px) scale(.98);filter:brightness(1.1)}.dice-card #rollTeamDice:disabled{cursor:wait;filter:grayscale(.65);opacity:.55}.dice-card>strong{font-size:12px}
@keyframes professionalDiceRoll{0%{transform:rotateX(8deg) rotateY(-8deg) rotateZ(0) translateY(0)}50%{transform:rotateX(155deg) rotateY(120deg) rotateZ(12deg) translateY(-14px) scale(.93)}100%{transform:rotateX(278deg) rotateY(250deg) rotateZ(-8deg) translateY(0)}}@keyframes diceLand{0%{transform:rotateX(35deg) rotateY(-25deg) translateY(-15px) scale(.9)}65%{transform:rotateX(5deg) rotateY(-5deg) translateY(3px) scale(1.08)}100%{transform:rotateX(8deg) rotateY(-8deg) translateY(0) scale(1)}}