/* القنبلة — sits on top of wheel-roulette-live.css (same page, buttons, names box and cartoon theme) */
.scene{position:relative;overflow:hidden;width:min(100%,460px);margin:0 auto;border-radius:18px;background:radial-gradient(120% 90% at 50% 100%,#3a2a24 0,#1d1620 55%,#100c14 100%);box-shadow:inset 0 0 60px #000a,0 6px 18px #0003}
.scene:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--sx,80%) var(--sy,25%),#ffb54d33 0,transparent 32%);transition:background .1s linear}
.scene:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
#art{display:block;width:100%;height:auto}
.ash{stroke:#2b2328;stroke-width:5;stroke-linecap:round;stroke-dasharray:2 5}
.rope{stroke:#c8a46b;stroke-width:8;stroke-linecap:round}
.rope-twist{stroke:#7d5a2c;stroke-width:8;stroke-linecap:butt;stroke-dasharray:3 5;opacity:.75}
/* the turn owner's name sits INSIDE the bomb (HTML text: Arabic shapes the same on every phone). Box = bomb circle: centre 180,212 r72 of 360×300, no translate (the tremble animation owns transform) */
.bomb-label{position:absolute;left:32%;top:49.1%;width:36%;display:grid;place-items:center;aspect-ratio:1;pointer-events:none;color:#fff;font-weight:800;line-height:1.1;text-align:center;overflow-wrap:anywhere;text-shadow:0 2px 0 #000,0 0 6px #000;z-index:1}
.scene.lit .bomb-label{animation:tremble .18s linear infinite}
.scene.hot .bomb-label{animation:tremble .09s linear infinite}
.bomb{transform-origin:180px 212px}
.scene.lit .bomb{animation:tremble .18s linear infinite}
.scene.hot .bomb{animation:tremble .09s linear infinite}
@keyframes tremble{25%{transform:translate(.6px,-.4px) rotate(.3deg)}75%{transform:translate(-.6px,.4px) rotate(-.3deg)}}
.spark{opacity:0;transition:opacity .2s}
.scene.lit .spark{opacity:1;animation:flicker .12s infinite alternate}
@keyframes flicker{from{r:14}to{r:19}}
.spk{fill:#ffd23f}
.smoke{fill:#9a8f96}
.scene.shake{animation:sceneShake .6s ease}
@keyframes sceneShake{10%,50%,90%{transform:translate(-7px,3px)}30%,70%{transform:translate(7px,-3px)}}
.boom{position:absolute;inset:0;z-index:2;display:grid;place-items:center;align-content:center;background:radial-gradient(circle,#fff 0,#ffe26b 20%,#ff7a1a 45%,#c0262d 70%,#1d1620 100%);animation:boom 1.3s ease forwards}
.boom[hidden]{display:none}
.boom b{font-size:110px;line-height:1;animation:boomPop .5s ease}
.boom span{color:#fff;font-size:30px;font-weight:800;text-shadow:0 3px 0 #0006}
@keyframes boom{0%{opacity:0;transform:scale(.4)}8%{opacity:1;transform:scale(1.15)}30%{transform:scale(1)}100%{opacity:1}}
@keyframes boomPop{from{transform:scale(.2) rotate(-20deg)}to{transform:scale(1)}}

.quiz{max-width:460px;margin:14px auto 0;padding:14px;border:2px solid #e8877a;border-radius:16px;background:#fff;animation:pop .35s ease}
.quiz[hidden]{display:none}
.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:#1d1620;color:#ffd23f;font-size:16px;font-weight:800;max-width:70%;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}

.lives-pick{display:flex;justify-content:center;align-items:center;gap:6px;margin:0 0 14px;color:var(--muted);font-size:15px}
.lives-pick[hidden]{display:none}
.lives-pick button{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}
.row .hearts{flex:none;font-size:13px;letter-spacing:1px}
.row.turn{background:#fff3c4}
.row.turn .nm:after{content:" 💣";display:inline-block}
.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;background:radial-gradient(120% 90% at 50% 100%,#ffcf7a 0,#ff9b54 45%,#7b4fd6 100%)}
body.kids .scene:after{display:none}
body.kids .quiz{border:3px solid #2d2a32;border-radius:22px;background:#fffdf3;box-shadow:4px 4px 0 #2d2a32}
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;background:#ffca3a;color:#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}}
@media(prefers-reduced-motion:reduce){.scene.lit .bomb,.scene.hot .bomb,.scene.shake{animation:none}}

/* 2026-10-28 owner «القنبلة ايضا وصوت حقيقي»: painted room, drawn iron bomb, painted explosion */
.scene{background:url(/assets/bomb/bg_dark.webp?v=1) 50% 70%/cover,#1d1620}
.scene:before{background:radial-gradient(circle at var(--sx,80%) var(--sy,25%),#ffb54d55 0,transparent 30%),radial-gradient(120% 90% at 50% 50%,transparent 55%,#0008)}
body.kids .scene{background:url(/assets/bomb/bg_kids.webp?v=1) 50% 70%/cover,#ff9b54}
body.kids .scene:before{background:radial-gradient(circle at var(--sx,80%) var(--sy,25%),#fff3b055 0,transparent 30%),radial-gradient(120% 90% at 50% 50%,transparent 60%,#0004)}
.bomb image{filter:drop-shadow(0 6px 6px #0008)}
.scene.hot .bomb image{filter:drop-shadow(0 0 12px #ff5a1f) drop-shadow(0 6px 6px #0008)}
.boom{background:radial-gradient(circle,#fff8 0,#ffb34755 35%,#c0262daa 75%,#1d1620ee 100%)}
.boom b{display:block;width:min(78%,330px);font-size:0}
.boom b img{display:block;width:100%;height:auto}
.boom b{width:min(60%,250px);margin-top:-6%}
.boom span{margin-top:-4%;font-size:34px;text-shadow:0 3px 0 #0008,0 0 12px #000}
#art g[mask]{filter:drop-shadow(0 0 1.5px #000b) drop-shadow(0 2px 2px #0006)}
.scene.boomed .bomb,.scene.boomed .bomb-label,.scene.boomed #art g[mask],.scene.boomed .spark{opacity:0;transition:opacity .15s}
/* real iron bomb: the name gets a stronger outline on the textured metal */
.bomb-label{text-shadow:0 2px 0 #000,0 0 8px #000,0 0 14px #000a}
/* real twisted rope fuse coming out of the bomb neck (owner 2026-10-28) */
.rope-edge{stroke:#2a1b0c;stroke-width:9.5;stroke-linecap:round}
.rope{stroke:#a87b45;stroke-width:7;stroke-linecap:round}
.rope-twist{stroke:#5c3d1c;stroke-width:7;stroke-linecap:butt;stroke-dasharray:2.2 3.2;opacity:.9}
.rope-shine{stroke:#e6c48d;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1.6 3.8;stroke-dashoffset:-2.4;opacity:.85}
.ash{stroke:#1d1612;stroke-width:4;stroke-dasharray:1.5 3.5;opacity:.75}
.neck-hole{fill:#0a0806}
.rope-edge{stroke:#24170a;stroke-width:8.6}
.rope{stroke:#9a7041;stroke-width:6.6}
.rope-twist{stroke:#4a3016;stroke-width:6.6;stroke-dasharray:1.1 2.3;opacity:.55}
.rope-shine{stroke:#d9b47a;stroke-width:1.6;stroke-dasharray:6 2.5;stroke-dashoffset:0;opacity:.55;transform:translate(-.6px,-.9px)}

/* v6 (owner reference: 3D timer-bomb video): cellar room, iron bomb with a glass screen, neon name, spinning rainbow ring, short glowing fuse with falling sparks.
   The burn time stays secret — the ring only spins, it never counts down. */
.scene,body.kids .scene{background:url(/assets/bomb/room.webp?v=1) 50% 62%/cover,#2a1a10}
.scene:before,body.kids .scene:before{background:radial-gradient(circle at var(--sx,74%) var(--sy,58%),#ffb54d40 0,transparent 26%),radial-gradient(110% 90% at 50% 45%,transparent 55%,#000a)}
.bomb image{filter:drop-shadow(0 8px 8px #000a)}
.scene.hot .bomb image{filter:drop-shadow(0 0 10px #ff5a1f) drop-shadow(0 8px 8px #000a)}
.bomb-ring{position:absolute;left:37.78%;top:56%;width:24.44%;aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:1;
  background:conic-gradient(from 0deg,#ff2d55,#ff9500,#ffd60a,#34c759,#00c7ff,#5856d6,#af52de,#ff2d55);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 65% 72%,transparent 74%);mask:radial-gradient(circle,transparent 63%,#000 65% 72%,transparent 74%);
  filter:drop-shadow(0 0 4px #fff8) drop-shadow(0 0 8px #7cf);opacity:.25;transition:opacity .4s}
.scene.lit .bomb-ring{opacity:1;animation:ringSpin 2.4s linear infinite}
.scene.hot .bomb-ring{animation-duration:.8s}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.bomb-label,.scene.lit .bomb-label,.scene.hot .bomb-label{left:38.89%;top:58%;width:22.22%;padding:2px;animation:none;
  color:#d9fbff;font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;line-height:1.05;
  text-shadow:0 0 2px #fff,0 0 6px #3cf,0 0 12px #09f,0 0 20px #06c}
.scene.hot .bomb-label{color:#ffe1d6;text-shadow:0 0 2px #fff,0 0 6px #f53,0 0 12px #f20,0 0 20px #c00;animation:neonBlink .5s steps(2) infinite}
@keyframes neonBlink{50%{opacity:.75}}
.scene.lit .bomb,.scene.hot .bomb{animation:none}
.scene.hot .bomb{animation:tremble .12s linear infinite}
/* the fuse: thin, hot and glowing */
#art g[mask]{filter:drop-shadow(0 0 2px #ff9a2a) drop-shadow(0 0 5px #ff6a0088)}
.rope-edge{stroke:#5a2606;stroke-width:6.4}
.rope{stroke:#f2a23c;stroke-width:4.6}
.rope-twist{stroke:#b5621c;stroke-width:4.6;stroke-dasharray:1 2;opacity:.6}
.rope-shine{stroke:#ffe2a6;stroke-width:1.2;stroke-dasharray:5 2.5;opacity:.8;transform:translate(-.4px,-.6px)}
.ash{display:none}
.spk{fill:#ffd23f}.spk.o{fill:#ff7a1a}
.scene.boomed .bomb-ring{opacity:0}
.rope-twist{opacity:.35}