/* من القاتل؟ — sits on top of wheel-roulette-live.css (same page, buttons, names box and cartoon theme) */
.stage{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:300px;margin:0 auto;padding:22px 16px 20px;max-width:460px;border:2px dashed #e8877a;border-radius:16px;background:#fff;text-align:center;transition:background .45s,color .45s,border-color .45s}
.stage.pop{animation:pop .45s ease}
.orb{display:grid;place-items:center;width:112px;height:112px;margin-bottom:6px;border-radius:50%;background:#fdf1ee;font-size:62px;line-height:1;box-shadow:inset 0 -6px 0 #0000000d}
.stage small{color:var(--muted);font-size:14px}
.stage h3{margin:0;font-size:28px;line-height:1.25;overflow-wrap:anywhere}
.stage p{margin:2px 0 8px;max-width:360px;color:var(--muted);font-size:16px;line-height:1.6}
.stage .send-list{margin-top:4px}
.stage .send.dice{background:#6c45e0;box-shadow:0 3px 0 #45289f}
.stage .send.who{background:#3b7ff2;box-shadow:0 3px 0 #2457b0}
.stage .killer-name{color:var(--red)}
.controls .btn[hidden]{display:none}
.controls:has(#main[hidden]) #reset{padding:12px 26px}

/* night: the killer is choosing */
.stage.night{border-color:#3a3550;border-style:solid;background:linear-gradient(#1d1a2e,#2c2744);color:#f3eefc}
.stage.night small,.stage.night p{color:#c9c1dd}
.stage.night .orb{background:#3a3456;box-shadow:0 0 0 6px #ffffff10}
.stage.night .send{background:#c0262d;box-shadow:0 3px 0 #7c1418}

/* the body is found */
.stage.dead{border-color:#e3342f;border-style:solid;background:#fff5f4}
.stage.dead .orb{background:#ffe1de;animation:shake .5s ease}
.stage.good{border-color:#2f9e44;border-style:solid;background:#f1fff2}
.stage.bad{border-color:#d97706;border-style:solid;background:#fff8ec}
.orb.beat{animation:beat 1.1s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.12)}30%{transform:scale(.97)}45%{transform:scale(1.08)}}
@keyframes shake{20%{transform:translateX(-8px) rotate(-6deg)}40%{transform:translateX(7px) rotate(5deg)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}

.banner.blood{background:#e3342f;color:#fff}
.row.out .nm:after{content:" 💀";text-decoration:none;display:inline-block}
.row.culprit .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 .stage{border:3px solid #2d2a32;border-radius:24px;background:#fffdf3;box-shadow:4px 4px 0 #2d2a32}
body.kids .orb{border:3px solid #2d2a32;background:#ffca3a}
body.kids .stage.night{background:linear-gradient(#3d2c8d,#1982c4)}
body.kids .stage.night .orb{background:#9b5de5}
body.kids .stage.dead{background:#ffe3e3}
body.kids .stage.dead .orb{background:#ff595e}
body.kids .stage.good{background:#e5ffd6}
body.kids .stage.bad{background:#fff0c9}
body.kids .stage .send.who{background:#1982c4;box-shadow:0 5px 0 #2d2a32}
body.kids .stage .send.dice{background:#9b5de5;box-shadow:0 5px 0 #2d2a32}
body.kids .banner.blood{background:#ff595e;color:#fff;text-shadow:0 2px 0 #2d2a32}
@media(max-width:380px){.stage h3{font-size:24px}.orb{width:96px;height:96px;font-size:52px}}
@media(prefers-reduced-motion:reduce){.orb.beat,.stage.dead .orb,.stage.pop{animation:none}}

/* hidden killer card: the name shows only while the host holds it */
.peek{position:relative;display:grid;place-items:center;width:min(100%,280px);min-height:84px;margin-top:6px;border:2px dashed #2c2744;border-radius:14px;background:repeating-linear-gradient(45deg,#2c2744 0 12px,#36305a 12px 24px);color:#fff;font:inherit;font-size:18px;font-weight:700;cursor:pointer;touch-action:none;-webkit-touch-callout:none;user-select:none}
.peek>*{pointer-events:none}
.peek .peek-name{display:none;font-size:30px;color:#e3342f}
.peek.on{background:#fff;border-style:solid;border-color:#e3342f}
.peek.on .peek-hide{display:none}.peek.on .peek-name{display:block}
body.kids .peek{border:3px solid #2d2a32;border-radius:20px;box-shadow:0 5px 0 #2d2a32}

/* hearts (owner rules 2026-10-27): per player, −/＋ for the host during the game, lives picker before it */
.row .hearts{margin-inline-start:auto;font-size:14px;letter-spacing:1px;white-space:nowrap}
.row .hb{margin-inline-start:auto;display:flex;align-items:center;gap:6px}
.row .hb .hearts{margin:0}
.row .hm,.row .hp{width:30px;height:30px;border-radius:10px;border:2px solid #2d2a32;background:#fff;font:inherit;font-size:18px;font-weight:800;line-height:1;cursor:pointer;color:#2d2a32}
.row .hm{background:#ffe3e3}.row .hp{background:#e5ffd6}
.row .del{margin-inline-start:6px}
.lives{display:flex;align-items:center;gap:10px;margin-top:6px;padding:8px 14px;border:2px solid #2d2a32;border-radius:16px;background:#fff4f4;font-weight:700}
.lives b{min-width:22px;font-size:22px;text-align:center}
.lives .lv{width:36px;height:36px;border-radius:12px;border:2px solid #2d2a32;background:#fff;font:inherit;font-size:20px;font-weight:800;cursor:pointer}
.stage .send.yes{background:#2f9e44;box-shadow:0 3px 0 #1d6b2c}
.stage .send.no{background:#e3342f;box-shadow:0 3px 0 #9b1c19}
body.kids .stage .send.yes{background:#2f9e44;box-shadow:0 5px 0 #2d2a32}
body.kids .stage .send.no{background:#ff595e;box-shadow:0 5px 0 #2d2a32}

/* مقدم الفقرة (owner 2026-10-27): default بارون, or any @username's photo + name */
.host-card{display:flex;align-items:center;gap:12px;max-width:460px;margin:0 auto 10px;padding:8px 12px;border:3px solid #2d2a32;border-radius:20px;background:#fff;box-shadow:4px 4px 0 #2d2a32}
.host-ring{position:relative;flex:none;width:54px;height:54px;border-radius:50%;padding:3px;background:conic-gradient(#ff595e,#ffca3a,#8ac926,#1982c4,#6a4c93,#ff595e);animation:hostspin 6s linear infinite}
.host-ring img,.host-ring i{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;object-fit:cover;border:2.5px solid #fff;background:#ffe9a8;font-style:normal;font-size:24px;font-weight:800;animation:hostspin 6s linear infinite reverse}
@keyframes hostspin{to{transform:rotate(360deg)}}
.host-txt{display:flex;flex-direction:column;min-width:0}
.host-txt small{font-size:12px;color:var(--muted)}.host-txt b{font-size:19px;line-height:1.2;unicode-bidi:plaintext;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.host-edit{margin-inline-start:auto;flex:none;border:2px solid #2d2a32;border-radius:12px;background:#ffca3a;font:inherit;font-size:13px;font-weight:800;padding:6px 10px;cursor:pointer}
.host-form{display:flex;gap:6px;max-width:460px;margin:-2px auto 10px}
.host-form[hidden]{display:none}
.host-form input{flex:1;min-width:0;border:2px solid #2d2a32;border-radius:12px;padding:9px 10px;font:inherit;font-size:15px}
.host-form button{border:2px solid #2d2a32;border-radius:12px;background:#8ac926;font:inherit;font-weight:800;padding:0 12px;cursor:pointer}
.host-form button.ghost{background:#fff}
.end-host{display:block;margin:-4px 0 4px;font-weight:700;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.host-ring,.host-ring img,.host-ring i{animation:none}}
.host-ring [hidden]{display:none!important}
/* clouds never pass over the text (owner rule) */
.sky{z-index:0}
.banner,.host-card,.host-form,.stage,.controls,.status,.list-head,.add-form,.names{position:relative;z-index:2}