/* ===== المشاهد: البيت والطاولة والليل السينمائي ===== */

/* ---------- البيت ---------- */
.stage { width: 100%; }
.stage[hidden] { display: none; }
svg.house { width: 100%; height: auto; display: block; font-family: 'Cairo', system-ui, sans-serif; border-radius: var(--radius); overflow: hidden; }
svg.house text { direction: rtl; }
svg.house .sky { fill: #070A14; transition: fill 2.4s ease; }
svg.house .star { fill: #F2EFE6; opacity: .55; animation: twinkle 2.6s ease-in-out infinite; animation-delay: var(--d, 0ms); }
svg.house .moon, svg.house .sun { transition: transform 2.4s ease, opacity 1.4s ease; transform-box: fill-box; transform-origin: center; }
svg.house .moonbite { fill: #070A14; transition: fill 2.4s ease; }
svg.house .sun { opacity: 0; transform: translateY(60px); }
svg.house[data-mode="day"] .sky { fill: #243B6B; }
svg.house[data-mode="day"] .moon { opacity: 0; transform: translateY(-50px); }
svg.house[data-mode="day"] .sun { opacity: 1; transform: translateY(0); }
svg.house[data-mode="day"] .star { opacity: 0; animation: none; }
svg.house[data-mode="day"] .moonbite { fill: #243B6B; }
svg.house .facade { stroke: #2A3450; stroke-width: 1; }
svg.house .parapet { fill: #121A2B; stroke: #C9A035; stroke-width: 1; opacity: .9; }
svg.house .ornament { fill: none; stroke: #C9A035; stroke-width: 1.4; stroke-linecap: round; }
svg.house .door rect { fill: #0A0D16; stroke: #3A4458; }
svg.house .door .doorlight { fill: #15110A; stroke: none; }
svg.house .door circle { fill: #C9A035; }
svg.house .street { fill: #0A0C12; }
svg.house .curb { stroke: #223047; stroke-width: 1; }

svg.house .room { transition: opacity .6s; }
svg.house .room .frame { fill: none; stroke: #2E3A55; stroke-width: 1.2; transition: stroke .5s, stroke-width .5s; }
svg.house .room[data-me] .frame { stroke: var(--gold); stroke-width: 2.4; filter: drop-shadow(0 0 6px rgba(227,179,65,.55)); }
svg.house .room .pane { fill: #0F1630; stroke: #1F2A45; stroke-width: 1; transition: fill 1s ease; }
svg.house .room[data-state="awake"] .pane { fill: url(#gWarm); }
svg.house .room[data-state="day"] .pane { fill: url(#gDay); }
svg.house .room[data-state="dead"] .pane { fill: #0A0C12; }
svg.house .room .awakefig, svg.house .room .sleeper, svg.house .room .boards { opacity: 0; transition: opacity .7s ease; }
svg.house .room[data-state="awake"] .awakefig, svg.house .room[data-state="day"] .awakefig { opacity: 1; }
svg.house .room[data-state="asleep"] .sleeper { opacity: 1; }
svg.house .room[data-state="dead"] .boards { opacity: 1; }
svg.house .room .lamp { fill: #FFF4C8; }
svg.house .room .lampglow { fill: #FFF4C8; opacity: .22; animation: lamp 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
svg.house .room[data-state="day"] .lamp, svg.house .room[data-state="day"] .lampglow { opacity: 0; animation: none; }
svg.house .room .sil { fill: #15110A; }
svg.house .room[data-state="day"] .sil { fill: #1C2A48; }
svg.house .room .bed { fill: #2A3350; stroke: #3A4A6A; stroke-width: .8; }
svg.house .room .blanket { fill: #5C4A1A; }
svg.house .room .head { fill: #D5DAE3; }
svg.house .room .zz { fill: var(--gold-l); font-size: 11px; font-weight: 700; font-family: 'Lalezar', sans-serif; direction: ltr; animation: zz 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
svg.house .room .boards rect { fill: #3A2A1C; stroke: #5C4A1A; stroke-width: .8; }
svg.house .room .boards use { color: var(--red-l); }
svg.house .room .name { fill: var(--text); font-size: 12px; font-weight: 700; }
svg.house .room .tag { fill: var(--muted2); font-size: 9.5px; }
svg.house .room[data-state="dead"] .name { fill: var(--muted2); text-decoration: line-through; }
svg.house .room[data-state="dead"] .tag { fill: var(--red-l); }
svg.house .room[data-state="awake"] .tag { fill: var(--gold); }
svg.house .room[data-off] { opacity: .6; }
svg.house .room[data-off] .frame { stroke-dasharray: 4 3; }
svg.house .room .badge { opacity: 0; transition: opacity .4s; }
svg.house .room .badge.mayor { color: var(--gold); }
svg.house .room .badge.hush { color: var(--red-l); }
svg.house .room .badge.off { color: var(--muted); }
svg.house .room[data-mayor] .badge.mayor { opacity: 1; }
svg.house .room[data-hush] .badge.hush { opacity: 1; }
svg.house .room[data-off] .badge.off { opacity: 1; }
svg.house .room .badge.bot { color: var(--ice); }
svg.house .room[data-bot] .badge.bot { opacity: 1; }
svg.house .room.fresh .pane { animation: deathflash 1.3s ease-out 1; }
svg.house .room.fresh { animation: shake .7s ease-in-out 1; transform-box: fill-box; transform-origin: center; }

/* دخول الليل: اللاعبون يدخلون غرفهم واحداً واحداً فتضيء النوافذ */
svg.house.nightfall .room[data-state="awake"] .pane { animation: lightup 1.1s ease-out 1 backwards; animation-delay: var(--d, 0ms); }
svg.house.nightfall .room[data-state="awake"] .awakefig { animation: fadein 1.1s ease-out 1 backwards; animation-delay: var(--d, 0ms); }

@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
@keyframes lamp { 0%, 100% { opacity: .16; transform: scale(.9); } 50% { opacity: .32; transform: scale(1.1); } }
@keyframes zz { 0% { opacity: 0; transform: translateY(4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-7px); } }
@keyframes lightup { 0% { fill: #0F1630; } 100% { fill: #E0B45A; } }
@keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes deathflash { 0% { fill: #E8463A; } 100% { fill: #0A0C12; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-3px) rotate(-1deg); } 40% { transform: translateX(3px) rotate(1deg); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }

/* ---------- الطاولة ---------- */
.table-wrap { position: relative; width: 100%; }
svg.table { width: 100%; height: auto; display: block; font-family: 'Cairo', system-ui, sans-serif; overflow: visible; }
svg.table text { direction: rtl; }
svg.table .shadow { fill: rgba(0,0,0,.45); }
svg.table .wood { stroke: var(--gold-d); stroke-width: 2; }
svg.table .rim { fill: none; stroke: rgba(227,179,65,.35); stroke-width: 1; stroke-dasharray: 3 5; }
svg.table .seat { cursor: default; transition: transform .5s ease, opacity .5s; }
svg.table .seat .chair { fill: #1C2740; stroke: #3A4A6A; stroke-width: 1.4; transition: fill .4s, stroke .4s, stroke-width .3s; }
svg.table .seat .init { fill: var(--gold); font-family: 'Lalezar', sans-serif; font-size: 22px; }
svg.table .seat .name { fill: var(--text); font-size: 12px; font-weight: 700; }
svg.table .seat .role { fill: var(--blue-l); font-size: 10px; }
svg.table .seat .x { stroke: var(--red-l); stroke-width: 3; stroke-linecap: round; opacity: 0; transition: opacity .4s; }
svg.table .seat[data-dead] .chair { fill: #10141E; stroke: #273043; }
svg.table .seat[data-dead] .init { fill: var(--muted2); }
svg.table .seat[data-dead] .name { fill: var(--muted2); text-decoration: line-through; }
svg.table .seat[data-dead] .x { opacity: 1; }
svg.table .seat[data-dead] .init { opacity: 0; }
svg.table .seat[data-me] .chair { stroke: var(--gold); stroke-width: 2.4; }
svg.table .seat[data-off]:not([data-dead]) .chair { stroke-dasharray: 4 3; }
svg.table .seat[data-off]:not([data-dead]) .init { opacity: .5; }
svg.table .seat .badge { opacity: 0; transition: opacity .4s; }
svg.table .seat .badge.mayor { color: var(--gold); }
svg.table .seat .badge.hush { color: var(--red-l); }
svg.table .seat .badge.off { color: var(--muted); }
svg.table .seat[data-mayor] .badge.mayor { opacity: 1; }
svg.table .seat[data-hush] .badge.hush { opacity: 1; }
svg.table .seat[data-off]:not([data-dead]) .badge.off { opacity: 1; }
svg.table .seat .badge.bot { color: var(--ice); }
svg.table .seat[data-bot] .badge.bot { opacity: 1; }
svg.table .seat .votes { opacity: 0; transition: opacity .3s; }
svg.table .seat .votes circle { fill: var(--gold); }
svg.table .seat .votes .vn { fill: #15110A; font-family: 'Lalezar', sans-serif; font-size: 13px; direction: ltr; }
svg.table .seat[data-hasvotes] .votes { opacity: 1; }
svg.table .seat .voted { opacity: 0; transition: opacity .3s; color: #15110A; }
svg.table .seat .voted circle { fill: var(--blue-l); }
svg.table .seat[data-voted] .voted { opacity: 1; }
svg.table.votable .seat:not([data-dead]):not([data-me]) { cursor: pointer; }
svg.table.votable .seat:not([data-dead]):not([data-me]):hover .chair { stroke: var(--gold-l); }
svg.table .seat[data-sel] .chair { fill: #3A2E12; stroke: var(--gold); stroke-width: 3; }
svg.table .seat[data-sel] .init { fill: var(--gold-l); }
svg.table .seat[data-kicked] { animation: kick 1.1s cubic-bezier(.3,.7,.3,1) 1 both; }
@keyframes kick { 0% { transform: translate(0,0) rotate(0); } 100% { transform: translate(calc(var(--ux, 0) * 34px), calc(var(--uy, 0) * 34px)) rotate(14deg); } }
.table-center { position: absolute; left: 50%; top: 51.5%; transform: translate(-50%, -50%); width: 52%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; pointer-events: none; }
.table-center > * { pointer-events: auto; }
.table-center .big { font-family: 'Lalezar', sans-serif; font-size: 26px; line-height: 1.1; color: var(--gold-l); }
.table-center .mid { font-family: 'Lalezar', sans-serif; font-size: 20px; line-height: 1.1; color: var(--text); }
.table-center .tiny { font-size: 11px; color: var(--muted); line-height: 1.4; }
.table-center .timer { width: 112px; height: 112px; margin: 0; border-width: 2px; }
.table-center .timer .t { font-size: 34px; }
.table-center .result-name { font-family: 'Lalezar', sans-serif; font-size: 24px; color: var(--red-l); line-height: 1; }

/* ---------- سجل الأحداث ---------- */
details.history { padding: 0; gap: 0; overflow: hidden; }
details.history summary { list-style: none; cursor: pointer; padding: 12px 16px; display: flex; align-items: center; gap: 10px; color: var(--gold); font-weight: 700; font-size: 14px; }
details.history summary::-webkit-details-marker { display: none; }
details.history summary::after { content: '▾'; color: var(--muted); margin-right: auto; margin-left: 0; padding-right: 8px; transition: transform .25s; }
details.history[open] summary::after { transform: rotate(180deg); }
.evlist { list-style: none; margin: 0; padding: 0 0 6px; display: flex; flex-direction: column; }
.evlist .ev { display: flex; gap: 12px; padding: 9px 16px; border-top: 1px solid #1A2232; font-size: 13px; line-height: 1.55; align-items: flex-start; }
.evlist .ev .when { flex: none; min-width: 64px; font-family: 'Lalezar', sans-serif; font-size: 14px; color: var(--muted); line-height: 1.4; }
.evlist .ev.night .when { color: var(--gold); }
.evlist .ev.day .when { color: var(--blue-l); }
.evlist .ev.warn .when { color: var(--red-l); }
.evlist .ev.end .when { color: var(--gold-l); }
.evlist .ev .what { color: var(--text2); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.evlist .ev .what .line { display: block; }
.evlist .ev .what .sub { font-size: 11px; color: var(--muted); }

/* ---------- الليل السينمائي ---------- */
body.cinema-open { overflow: hidden; }
.cinema { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; padding: calc(52px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); overflow: hidden; animation: cinin .5s ease-out 1; }
.cinema.out { animation: cinout .45s ease-in 1 forwards; }
@keyframes cinin { from { opacity: 0; } to { opacity: 1; } }
@keyframes cinout { to { opacity: 0; } }
.cin-sky { position: absolute; inset: 0; transition: opacity 2.4s ease; }
.cin-sky.night { background: radial-gradient(ellipse 100% 60% at 50% 0%, #141A33 0%, #05070C 70%); opacity: 1; }
.cin-sky.day { background: radial-gradient(ellipse 100% 60% at 50% 0%, #4A5F92 0%, #15224A 70%); opacity: 0; }
.cinema.dawn .cin-sky.night { opacity: 0; }
.cinema.dawn .cin-sky.day { opacity: 1; }
.cin-skip { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: 14px; z-index: 2; background: rgba(11,14,20,.6); border: 1px solid var(--border2); color: var(--muted); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-family: inherit; cursor: pointer; }
.cin-house { position: relative; width: min(100%, 440px); z-index: 1; transition: width .8s ease, opacity .8s; flex: none; }
.cin-house svg.house { border-radius: 10px; }
.cinema.results .cin-house { width: min(100%, 330px); }
.cin-stage { position: relative; width: min(100%, 440px); height: 176px; margin-top: -64px; z-index: 2; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; flex: none; }
.cinema.results .cin-stage { display: none; }
.cin-figs { display: flex; gap: 6px; align-items: flex-end; justify-content: center; height: 100%; }
.cin-figs .fig { width: 118px; height: 140px; opacity: 0; transform: translateY(80px); transition: transform 1s cubic-bezier(.2,.8,.2,1), opacity .7s ease; transition-delay: calc(var(--i, 0) * 180ms); color: var(--fcolor, var(--gold)); }
.cin-figs.up .fig { opacity: 1; transform: translateY(0); }
.cin-figs .fig .body { fill: #04060B; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.cin-figs .fig .halo { fill: var(--glow, rgba(227,179,65,.4)); opacity: .9; animation: halo 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; filter: blur(6px); }
.cin-figs .fig .cross { fill: #F2EFE6; stroke: none; }
.cin-figs .fig .mask { fill: #2E1A44; stroke: currentColor; stroke-width: 1.4; }
.cin-figs .fig .eye { fill: #04060B; stroke: none; }
.cin-figs .fig .reticle { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; opacity: .9; animation: reticle 3s linear infinite; transform-box: fill-box; transform-origin: center; }
.cin-figs .fig.mafia { animation: sway 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -700ms); }
.cin-figs .fig.madman { animation: sway 1.6s ease-in-out infinite; }
@keyframes halo { 0%, 100% { opacity: .6; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes reticle { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes sway { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-3px) rotate(1.5deg); } }
.cin-text { position: relative; z-index: 2; text-align: center; margin-top: 6px; min-height: 78px; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 12vh; }
.cinema.results .cin-text { flex: none; padding-bottom: 0; min-height: 0; margin-bottom: 8px; }
.cin-title { font-size: 38px; color: var(--gold-l); line-height: 1.1; opacity: 0; transform: translateY(10px); text-shadow: 0 0 24px rgba(227,179,65,.35); }
.cin-title.in { animation: textin .8s ease-out 1 forwards; }
.cin-sub { font-size: 15px; color: var(--text2); margin-top: 6px; opacity: 0; }
.cin-sub.in { animation: textin .8s ease-out .25s 1 forwards; }
@keyframes textin { to { opacity: 1; transform: translateY(0); } }
.cinema[data-turn="mafia"] .cin-title { color: var(--red-l); text-shadow: 0 0 24px rgba(232,70,58,.45); }
.cinema[data-turn="doctor"] .cin-title { color: var(--blue-l); text-shadow: 0 0 24px rgba(95,179,245,.45); }
.cinema[data-turn="sniper"] .cin-title { color: var(--ice); text-shadow: 0 0 24px rgba(158,211,255,.45); }
.cinema[data-turn="madman"] .cin-title { color: var(--purple-l); text-shadow: 0 0 24px rgba(200,107,250,.45); }
.cin-results { position: relative; z-index: 2; width: min(100%, 440px); display: none; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.cinema.results .cin-results { display: flex; }
.cin-cards { display: flex; flex-direction: column; gap: 10px; overflow: auto; min-height: 0; padding-bottom: 4px; }
.cin-card { opacity: 0; transform: translateY(14px); animation: cardin .6s ease-out 1 forwards; animation-delay: calc(500ms + var(--i, 0) * 900ms); }
@keyframes cardin { to { opacity: 1; transform: translateY(0); } }
.cin-go { flex: none; margin-top: auto; opacity: 0; animation: cardin .6s ease-out 2.2s 1 forwards; }

@media (max-height: 640px) {
  .cin-stage { height: 130px; margin-top: -50px; }
  .cin-figs .fig { width: 86px; height: 102px; }
  .cin-title { font-size: 30px; }
  .cin-text { padding-bottom: 4vh; }
}

@media (prefers-reduced-motion: reduce) {
  svg.house .star, svg.house .room .lampglow, svg.house .room .zz, svg.house.nightfall .room .pane, .cin-figs .fig, .cin-figs .fig .halo, .cin-figs .fig .reticle { animation: none !important; }
  svg.house .room.fresh, svg.table .seat[data-kicked] { animation: none !important; }
  .cin-figs .fig, .cin-sky, .cin-sun, .cin-house, svg.house *, svg.table .seat * { transition-duration: .2s !important; }
  .cin-card, .cin-go, .cin-title.in, .cin-sub.in { animation-duration: .2s !important; animation-delay: 0ms !important; }
}

/* ---------- الراوي ---------- */
.narrator { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateY(110%); transition: transform .45s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.narrator.show { transform: translateY(0); pointer-events: auto; }
.narrator-inner { margin: 0 auto; max-width: 720px; background: linear-gradient(180deg, #151A2A, #0E1220); border: 1px solid var(--gold-border); border-radius: 14px; padding: 12px 16px 14px; box-shadow: 0 -8px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(227,179,65,.08) inset; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.narrator-label { font-family: 'Lalezar', sans-serif; font-size: 14px; color: var(--gold); display: flex; align-items: center; gap: 8px; letter-spacing: .5px; }
.narrator-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: narratorPulse 1.4s ease-in-out infinite; }
.narrator-text { font-size: 16px; line-height: 1.75; color: var(--text); font-weight: 600; }
.narration-text { font-size: 16px; line-height: 1.8; color: var(--text); font-weight: 600; padding: 4px 0; }
@keyframes narratorPulse { 0%, 100% { opacity: .5; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
body.cinema-open .narrator { z-index: 70; }
body.narrator-open .screen, body.narrator-open .body { padding-bottom: 150px; transition: padding-bottom .3s; }
body.narrator-open .cin-results { padding-bottom: 130px; }

/* زر الصوت وهو مقفول بانتظار أول لمسة */
.sound-toggle.locked { animation: lockedPulse 1.6s ease-in-out infinite; border-color: var(--gold); }
@keyframes lockedPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(227,179,65,.0); } 50% { box-shadow: 0 0 0 6px rgba(227,179,65,.18); } }
.btn.sm.narrator-toggle, .btn.sm.sound-toggle { width: 40px; min-width: 0; height: 40px; padding: 0; flex: none; border-radius: 50%; }
.narrator-toggle.muted { color: var(--muted); border-color: var(--border2); }

/* ---------- أدوار الكلام والدفاع على الطاولة ---------- */
svg.table .seat[data-speaking] .chair { stroke: var(--gold-l); stroke-width: 3; fill: #2E2612; animation: speakRing 1.6s ease-in-out infinite; }
svg.table .seat[data-speaking] .init { fill: var(--gold-l); }
svg.table .seat[data-accused] .chair { stroke: var(--red-l); stroke-width: 3; fill: #2E1416; animation: accusedRing 1.2s ease-in-out infinite; }
@keyframes speakRing { 0%, 100% { filter: drop-shadow(0 0 2px rgba(246,215,122,.3)); } 50% { filter: drop-shadow(0 0 10px rgba(246,215,122,.9)); } }
@keyframes accusedRing { 0%, 100% { filter: drop-shadow(0 0 2px rgba(232,70,58,.3)); } 50% { filter: drop-shadow(0 0 10px rgba(232,70,58,.9)); } }
.table-center .turn-timer { font-family: 'Lalezar', sans-serif; font-size: 30px; color: var(--gold-l); line-height: 1; direction: ltr; }
.table-center .turn-timer.defense { color: var(--red-l); }
select.sel { background: var(--card2); color: var(--text); border: 1px solid var(--border2); border-radius: 8px; height: 34px; padding: 0 8px; font-family: inherit; font-size: 13px; }

/* ---------- المحادثة الصوتية ---------- */
.card.voice { border-color: var(--border2); }
.card.voice.live { border-color: var(--gold-border); box-shadow: 0 0 0 1px rgba(227,179,65,.15), 0 0 calc(6px + var(--mic-level, 0) * 26px) rgba(227,179,65, calc(.15 + var(--mic-level, 0) * .6)); transition: box-shadow .12s linear; }
.card.voice h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.micdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-left: 6px; }
.card.voice.live .micdot { animation: narratorPulse 1s ease-in-out infinite; }
.nv-row.current b { color: var(--gold); }
.narrator-note { font-family: 'Cairo', sans-serif; font-weight: 500; font-size: 11px; color: var(--muted); }

/* أرقام اللاعبين (الراوي يذكر الرقم لا الاسم) */
svg.house .room .name .num { fill: var(--gold); font-family: 'Lalezar', sans-serif; font-size: 13px; direction: ltr; }
svg.table .seat .init.numeral { font-size: 20px; direction: ltr; }
.avatar.num { font-family: 'Lalezar', sans-serif; font-size: 18px; direction: ltr; }