/* حرب الدبابات — sits on top of wheel-roulette-live.css (page, buttons, cartoon theme) */
:root{--teamA:#3b7ff2;--teamB:#e3342f}
.scene{position:relative;overflow:hidden;width:min(100%,520px);margin:0 auto;border-radius:18px;box-shadow:0 6px 18px #0003}
#art{display:block;width:100%;height:auto}
.sky1{stop-color:#8fc6ef}.sky2{stop-color:#fde8c8}
.g1{stop-color:#8a7a52}.g2{stop-color:#5c4f33}
.hill.far{fill:#b9c98f}.hill.near{fill:#93a866}
.scene.shake{animation:sceneShake .5s ease}
@keyframes sceneShake{15%,55%{transform:translate(-6px,3px)}35%,75%{transform:translate(6px,-3px)}}

/* tanks */
.tank .body{transition:filter .4s}
.tank.active .body{filter:drop-shadow(0 0 6px #ffe066)}
.tank.hit .body{animation:hitFlash .45s ease}
@keyframes hitFlash{0%,100%{filter:none}30%{filter:brightness(2.2) saturate(.3)}}
.tank.dead .body{filter:brightness(.32) saturate(.2)}
.barrel{transition:transform .12s}
.barrel.recoil{transform:translateX(-7px)}
.track-wheel{transform-box:fill-box;transform-origin:center}
.shell{fill:#2b2b2b;stroke:#ffd23f;stroke-width:1.5;opacity:0}
.shell.fly{opacity:1}
.fx-flash{transform-box:fill-box;transform-origin:center;animation:fxFlash .35s ease-out forwards}
.fx-boom{transform-box:fill-box;transform-origin:center;animation:fxBoom .7s ease-out forwards}
.fx-smoke{transform-box:fill-box;transform-origin:center;animation:fxSmoke 1.6s ease-out forwards}
.fx-bit{animation:fxBit .8s ease-out forwards}
@keyframes fxFlash{from{transform:scale(.3);opacity:1}to{transform:scale(1.6);opacity:0}}
@keyframes fxBoom{0%{transform:scale(.2);opacity:1}60%{opacity:1}100%{transform:scale(1.8);opacity:0}}
@keyframes fxSmoke{0%{transform:scale(.4) translateY(0);opacity:.75}100%{transform:scale(2) translateY(-26px);opacity:0}}
@keyframes fxBit{to{transform:translate(var(--dx),var(--dy));opacity:0}}
.burn{transform-box:fill-box;transform-origin:center bottom;animation:burn .5s ease-in-out infinite alternate}
@keyframes burn{from{transform:scaleY(.8)}to{transform:scaleY(1.15)}}
.wreck-smoke{transform-box:fill-box;transform-origin:center;animation:wreck 2.4s linear infinite}
@keyframes wreck{0%{transform:translateY(0) scale(.5);opacity:.7}100%{transform:translateY(-60px) scale(2.2);opacity:0}}

/* hp */
.hp-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:520px;margin:0 auto 10px}
.hp-row[hidden]{display:none}
.hp-team{padding:8px 10px;border:2px solid var(--c);border-radius:12px;background:#fff;transition:box-shadow .3s,transform .3s}
.hp-team[data-team="A"]{--c:var(--teamA)}.hp-team[data-team="B"]{--c:var(--teamB)}
.hp-team.active{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 30%,transparent);transform:translateY(-2px)}
.hp-name{display:block;color:var(--c);font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp{height:12px;margin:5px 0 3px;border-radius:99px;background:#eee;overflow:hidden}
.hp i{display:block;height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,#2f9e44,#7bd36b);transition:width .6s ease,background .4s}
.hp i.low{background:linear-gradient(90deg,#e3342f,#ff8a5c)}
.hp-num{color:var(--muted);font-size:12px}

/* setup teams */
.setup{max-width:520px;margin:14px auto 0}
.setup[hidden]{display:none}
.teams{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:start}
.vs{align-self:center;color:var(--muted);font-weight:800;font-size:18px}
.team-card{min-width:0;padding:10px;border:2px solid var(--c);border-radius:14px;background:#fff;text-align:center}
.team-card[data-team="A"]{--c:var(--teamA)}.team-card[data-team="B"]{--c:var(--teamB)}
.team-flag{font-size:22px}
.team-name{width:100%;height:40px;margin:4px 0 8px;padding:0 8px;border:1.5px solid var(--c);border-radius:8px;background:#fff;color:var(--c);font:inherit;font-size:16px;font-weight:800;text-align:center;user-select:text}
.member-form{display:flex;gap:4px}
.member-form input{flex:1;min-width:0;height:38px;padding:0 8px;border:1.5px solid #222;border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:15px;user-select:text}
.member-form button{flex:none;width:38px;border:0;border-radius:8px;background:var(--c);color:#fff;font-size:20px;cursor:pointer}
.members{list-style:none;margin:8px 0 0;padding:0;min-height:40px;max-height:210px;overflow:auto}
.members li{display:flex;align-items:center;gap:6px;padding:4px 2px;font-size:16px;border-bottom:1px dashed #eee}
.members li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}
.members li button{flex:none;width:26px;height:26px;border:0;border-radius:50%;background:#fde3df;color:#c2410c;font-size:17px;line-height:1;cursor:pointer}
.members .empty{justify-content:center;color:var(--muted);font-size:13px;border:0}
.lives-pick{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:14px 0 0;color:var(--muted);font-size:15px}
.lives-pick button{min-width:44px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:15px;cursor:pointer}
.lives-pick button[aria-pressed="true"]{background:#e3342f;border-color:#e3342f;color:#fff}

/* quiz (same as القنبلة) */
.quiz{max-width:520px;margin:14px auto 0;padding:14px;border:2px solid var(--c,#e8877a);border-radius:16px;background:#fff;animation:pop .35s ease}
.quiz[hidden]{display:none}
.quiz.team-A{--c:var(--teamA)}.quiz.team-B{--c:var(--teamB)}
.quiz-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.turn-pill{padding:6px 12px;border-radius:999px;background:var(--c,#1d1620);color:#fff;font-size:15px;font-weight:800;max-width:78%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-count{color:var(--muted);font-size:13px}
.quiz h3{margin:4px 0 12px;font-size:21px;line-height:1.45;text-align:center}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ans{min-height:56px;padding:10px 8px;border:2px solid #d9d2d0;border-radius:12px;background:#fdf8f7;color:var(--ink);font:inherit;font-size:17px;font-weight:700;cursor:pointer;transition:transform .12s,background .2s,border-color .2s}
.ans:active{transform:scale(.97)}
.ans:disabled{cursor:default}
.ans.right{background:#2f9e44;border-color:#2f9e44;color:#fff}
.ans.wrong{background:#e3342f;border-color:#e3342f;color:#fff;animation:shake .4s ease}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.controls .btn[hidden]{display:none}
.end-text{margin:-8px 0 14px;color:var(--muted);font-size:16px;line-height:1.6}

/* cartoon */
body.kids .scene{border:3px solid #2d2a32;border-radius:24px;box-shadow:4px 4px 0 #2d2a32}
body.kids .sky1{stop-color:#5fd0ff}body.kids .sky2{stop-color:#fff1a8}
body.kids .hill.far{fill:#8ac926}body.kids .hill.near{fill:#5fa31c}
body.kids .g1{stop-color:#d9a441}body.kids .g2{stop-color:#a8742a}
body.kids .tank .outline{stroke:#2d2a32;stroke-width:3}
body.kids .hp-team,body.kids .team-card,body.kids .quiz{border:3px solid #2d2a32;border-radius:20px;background:#fffdf3;box-shadow:4px 4px 0 #2d2a32}
body.kids .hp{border:2px solid #2d2a32}
body.kids .team-name,body.kids .member-form input{border:3px solid #2d2a32;border-radius:12px}
body.kids .member-form button{border:3px solid #2d2a32;border-radius:12px}
body.kids .ans{border:3px solid #2d2a32;border-radius:16px;background:#fff;box-shadow:0 4px 0 #2d2a32}
body.kids .ans.right{background:#8ac926}body.kids .ans.wrong{background:#ff595e}
body.kids .turn-pill{border:2px solid #2d2a32}
body.kids .lives-pick button{border:2px solid #2d2a32;font-weight:700}
body.kids .lives-pick button[aria-pressed="true"]{background:#ff595e}
@media(max-width:380px){.quiz h3{font-size:19px}.ans{font-size:15px;min-height:52px}.team-card{padding:8px 6px}.members li{font-size:14px}}
@media(prefers-reduced-motion:reduce){.scene.shake,.burn,.wreck-smoke{animation:none}}

/* players = little soldiers under each tank */
.soldier-name{fill:#fff;font:700 9.5px "Segoe UI",Tahoma,sans-serif;paint-order:stroke;stroke:#2b2b2b;stroke-width:2.6px}
.soldier .fig{transform-box:fill-box;transform-origin:center bottom}
.soldier.on .fig{animation:salute .7s ease-in-out infinite alternate}
.soldier.on .soldier-name{fill:#ffd23f}
.soldier .mark{animation:markBob .6s ease-in-out infinite alternate}
@keyframes salute{to{transform:translateY(-3px) scale(1.12)}}
@keyframes markBob{to{transform:translateY(-3px)}}
body.kids .soldier-name{font-family:"Baloo Bhaijaan 2","Segoe UI",Tahoma,sans-serif;font-size:11px}