/* مملكة الأفاعي — own look: jungle temple at night / sunny temple by day (cartoon), calm dark purple (classic). */
:root { --ink: #fff7e6; --muted: #cdbfe6; --card: rgba(28, 16, 52, .86); --line: rgba(255, 255, 255, .14); --main: #7cd957; --main2: #3e9d2b; --gold: #ffd166; --bad: #ff5d73; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: #160c2a; }
body { margin: 0; min-height: 100vh; color: var(--ink); font-family: "Baloo Bhaijaan 2", system-ui, sans-serif; background: #160c2a; overflow-x: hidden; }
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(#1d1038, #0f0820); }
body.kids .sky { background: #0f0820 url(/assets/sk/bg_night.webp?v=1) center top / cover no-repeat; }
body.kids:not(.night) .sky { background-image: url(/assets/sk/bg_day.webp?v=1); }
body.kids .sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(10, 5, 25, .25), rgba(10, 5, 25, .6)); }
body:not(.night) { --card: rgba(46, 30, 10, .84); }
body:not(.kids):not(.night) .sky { background: linear-gradient(#2d1f45, #1a1230); }
.page { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: max(10px, env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom)); }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .45; cursor: default; }
[hidden] { display: none !important; }

.topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.icon { width: 42px; height: 42px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0, 0, 0, .35); font-size: 20px; }
.theme-switch { display: flex; gap: 6px; justify-content: center; margin: 8px 0 10px; }
.theme-switch button { border: 1px solid var(--line); background: rgba(0, 0, 0, .35); border-radius: 999px; padding: 4px 14px; font-weight: 800; font-size: 14px; }
.theme-switch button[aria-pressed="true"] { background: var(--main); color: #10240a; border-color: transparent; }

.hero { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.hero-img { width: 74px; height: 92px; object-fit: contain; flex: none; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .4)); }
.hero-txt { min-width: 0; flex: 1; }
.title-btn { display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; max-width: 100%; }
.title-btn h1 { margin: 0; font-size: 26px; line-height: 1.2; color: var(--gold); text-shadow: 0 2px 0 #4b2a00; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-btn i { font-style: normal; font-size: 14px; opacity: .75; }
.hero p { margin: 2px 0 0; color: var(--muted); font-size: 15px; }
[data-host-card] { margin-top: 10px; }

.card { margin-top: 12px; padding: 14px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.sec-title { margin: 0 0 10px; font-size: 20px; }
.hint, .status { color: var(--muted); font-size: 15px; margin: 6px 0 10px; line-height: 1.5; }
.status { text-align: center; font-weight: 800; color: var(--gold); }

.add-form { display: flex; gap: 8px; }
.add-form input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .95); color: #1b1033; }
.add-form button { border: 0; border-radius: 14px; padding: 0 14px; font-weight: 800; background: var(--main); color: #10240a; white-space: nowrap; }

.players { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 12px 0; }
.players .empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 14px 0; }
.pl { position: relative; display: flex; flex-direction: column; align-items: center; padding: 6px 4px 8px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); }
.pl img { width: 52px; height: 64px; object-fit: contain; }
.pl .nm, .pk span, .deal .nm, .br span, .ar span, .pr .nm { font-weight: 800; font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl .del { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--bad); color: #fff; font-size: 16px; line-height: 1; }

.opts { display: grid; gap: 6px; margin: 4px 0 6px; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .07); font-weight: 800; }
.opt input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--main); }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper button { width: 34px; height: 34px; border-radius: 12px; border: 0; background: var(--main); color: #10240a; font-size: 20px; font-weight: 800; }
.stepper b { min-width: 20px; text-align: center; font-size: 20px; color: var(--gold); }
.pick { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.pick button { border: 1px solid var(--line); background: rgba(0, 0, 0, .3); border-radius: 10px; padding: 3px 9px; font-weight: 800; font-size: 14px; }
.pick button[aria-pressed="true"] { background: var(--gold); color: #3a2400; }

.btn { display: block; width: 100%; margin-top: 10px; border: 0; border-radius: 18px; padding: 13px; font-weight: 800; font-size: 18px; }
.btn-main { background: linear-gradient(var(--main), var(--main2)); color: #0c1f07; box-shadow: 0 5px 0 #24601a; }
.btn-main:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #24601a; }
.btn-ghost { background: rgba(255, 255, 255, .1); border: 1px solid var(--line); }

.deal-list { display: grid; gap: 6px; }
.deal { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 14px; background: rgba(255, 255, 255, .07); }
.deal img { width: 36px; height: 44px; object-fit: contain; flex: none; }
.deal .nm { flex: 1; min-width: 0; }
.deal button { flex: none; border: 0; border-radius: 12px; padding: 6px 10px; font-weight: 800; font-size: 14px; background: var(--gold); color: #3a2400; }
.deal .see { background: #c4a7ff; color: #22104a; }

.stage-card { text-align: center; }
.phase-tag { display: inline-block; padding: 3px 14px; border-radius: 999px; background: #3b2470; color: #e6dcff; font-weight: 800; }
.phase-tag.sun { background: #ffd166; color: #4a2c00; }
.stage-card h2 { margin: 10px 0 4px; font-size: 24px; color: var(--gold); }
.step-text { color: var(--ink); font-size: 17px; line-height: 1.6; margin: 0 0 8px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 10px 0; }
.pk { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-radius: 16px; border: 2px solid transparent; background: rgba(255, 255, 255, .08); min-width: 0; }
.pk img { width: 46px; height: 56px; object-fit: contain; }
.pk.on { border-color: var(--gold); background: rgba(255, 209, 102, .22); }
.pk.x { opacity: .35; }

.news { padding: 6px 0 4px; }
.news h3 { margin: 4px 0; font-size: 22px; }
.news h3 b { color: var(--gold); }
.news p { margin: 0; color: var(--muted); font-weight: 800; }
.news-img { width: 76px; height: 92px; object-fit: contain; filter: grayscale(.6) drop-shadow(0 6px 8px rgba(0, 0, 0, .4)); }
.timer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; padding: 8px 12px; border-radius: 16px; background: rgba(0, 0, 0, .3); }
.timer b { font-size: 34px; font-variant-numeric: tabular-nums; direction: ltr; color: var(--gold); }
.timer b.low { color: var(--bad); }
.timer-btns { display: flex; gap: 6px; }
.timer-btns button { border: 0; border-radius: 12px; padding: 8px 10px; font-weight: 800; background: var(--main); color: #10240a; }
.timer-btns #timerAdd { background: rgba(255, 255, 255, .15); color: var(--ink); }
.vote-title { margin: 10px 0 0; font-size: 18px; }
.vote-btns .btn { margin-top: 8px; }

.tools { display: flex; gap: 6px; margin-top: 12px; }
.tools button { flex: 1; border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: 8px 4px; font-weight: 800; font-size: 14px; }
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 10px; }
.br, .ar, .pr { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); min-width: 0; }
.br img, .ar img, .pr img { width: 28px; height: 34px; object-fit: contain; flex: none; }
.br span, .pr .nm { flex: 1; min-width: 0; }
.br b { font-size: 13px; white-space: nowrap; }
.br.dead, .ar.dead, .pr.dead { opacity: .5; }
.br.dead img, .ar.dead img, .pr.dead img { filter: grayscale(1); }

.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(8, 4, 20, .82); }
.modal { position: relative; width: min(440px, 100%); max-height: 92vh; overflow: auto; padding: 18px 16px; border-radius: 24px; background: #24143f; border: 1px solid var(--line); text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.modal h2 { margin: 0 0 6px; color: var(--gold); font-size: 22px; }
.modal ol { text-align: right; padding-right: 20px; line-height: 1.7; }
.hold { width: 100%; padding: 26px 10px; border-radius: 20px; border: 3px dashed #c4a7ff; background: rgba(196, 167, 255, .12); font-weight: 800; font-size: 18px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
.role-card { display: flex; flex-direction: column; align-items: center; padding: 10px; margin-top: 8px; border-radius: 20px; background: linear-gradient(#3b2470, #1d1038); border: 2px solid var(--gold); user-select: none; -webkit-user-select: none; }
.role-card .rc-role { width: 150px; height: 170px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.role-card .rc-snake { width: 44px; height: 54px; object-fit: contain; align-self: flex-start; margin-bottom: -40px; }
.role-card .rc-name { font-size: 24px; color: var(--gold); margin-top: 4px; }
.role-card p { margin: 6px 0 0; line-height: 1.6; }
.role-card .mates { color: #ffb3c0; font-weight: 800; }
.hawk-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px; }
.hawk-card img { width: 70px; height: 86px; object-fit: contain; }
.hawk-card b { font-size: 20px; }
.hawk-card span { font-size: 26px; font-weight: 800; padding: 4px 16px; border-radius: 14px; }
.hawk-card .bad { background: var(--bad); color: #fff; }
.hawk-card .good { background: var(--main); color: #10240a; }
.all-list { display: grid; gap: 5px; margin: 8px 0; text-align: right; }
.ar span { flex: 1; min-width: 0; }
.ar b { font-size: 14px; white-space: nowrap; }
.plist { display: grid; gap: 5px; margin: 8px 0; }
.pr .del { border: 0; background: none; font-size: 18px; }

.mine { text-align: center; margin-top: 18px; }
.mine small { color: var(--muted); font-weight: 800; }
.mine h2 { margin: 2px 0 6px; font-size: 24px; }
.secret-note { color: var(--gold); font-weight: 800; }

.win { overflow: hidden; }
.win-img { width: 150px; height: 170px; object-fit: contain; position: relative; z-index: 1; }
.win h2 { position: relative; z-index: 1; }
#confetti { position: absolute; inset: 0; pointer-events: none; }
#confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; background: var(--c); animation: fall var(--d) linear var(--delay) infinite; }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); } }
.sinan-credit { text-align: center; margin-top: 18px; color: var(--muted); font-size: 12px; letter-spacing: 1px; }
.sinan-credit b { color: var(--gold); }

/* classic look: plain, no pictures behind */
body:not(.kids) .hero, body:not(.kids) .card { box-shadow: none; }
body:not(.kids) .title-btn h1 { text-shadow: none; }
@media (max-width: 380px) { .title-btn h1 { font-size: 22px; } .hero-img { width: 58px; height: 74px; } .deal button { padding: 6px 7px; font-size: 13px; } }
/* screen-share mode */
.share-opt span small,.scary-opt span small{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.deal .copy{background:#7cd957;color:#10240a}
.deal button.done{background:#3e9d2b;color:#fff}
.step-done{min-height:22px;margin:4px 0 0;font-weight:800;color:var(--main)}
#hawkCopy.done{background:#3e9d2b;color:#fff}
/* share mode: the game is the host's board */
body.share-mode .opt.role-opt{display:none}
.pk.none{justify-content:center}
.pk.none .none-ic{font-size:30px;line-height:56px}
.role-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 4px}
.role-pick button{border:1px solid var(--line);border-radius:14px;padding:12px 6px;font-weight:800;background:rgba(255,255,255,.1)}
#roleQ .news-img{display:block;margin:0 auto}
/* 😱 scary snakes option: a faint red glow under the real snakes */
body.scary .pl img, body.scary .deal img, body.scary .pk img, body.scary .br img, body.scary .news-img { filter: drop-shadow(0 0 6px rgba(255, 40, 40, .55)); }