:root{
  --w:min(100vw,480px);
  /* اندازهٔ آواتار در هر دو حالت (چت باز/بسته) یکی است: بر پایهٔ جا شدن ۵ ردیف (حالت چت باز) */
  --cg:6px;
  /* اندازهٔ آواتار: ۴ ستون در عرض و (چت باز) ۲ ردیف آواتار + چت مربعیِ ۳ ستونه در ارتفاع جا می‌شود */
  --seat:clamp(46px,min(calc(var(--w)*.222),calc((100dvh - var(--w)*.4358 - 83px - 30px)/5.11)),150px);
  --seatH:calc(var(--seat)*1327/1186);--chS:calc(var(--seat)*3 + var(--cg)*2);--chH:var(--chS);--chW:var(--chS);
  --rb:52px; --ink:#e8f0ff; --muted:#9db3d6; --blue:#4aa8ff; --gold:#f5c15a; --red:#ff5a5f;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  color:var(--ink);background:#0b0d13 url("assets/bg.jpg") center/cover fixed;
  font-family:"Vazirmatn","Vazir","IRANSans",Tahoma,"Segoe UI",system-ui,sans-serif;
  overflow-x:hidden;
}
body::before,body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;transition:opacity 1.2s ease}
body::before{background:linear-gradient(180deg,rgba(14,32,72,.50),rgba(4,8,20,.38));opacity:1}
body::after{background:linear-gradient(180deg,rgba(120,72,22,.42),rgba(40,22,8,.30));opacity:0}
body[data-phase="day"]::before{opacity:0}
body[data-phase="day"]::after{opacity:1}

#app{width:var(--w);margin:0 auto;min-height:100dvh;overflow-x:clip}
.screen{min-height:100dvh;display:flex;flex-direction:column}
[hidden]{display:none!important}

/* ---------- HUD: قاب بال‌دار + خورشید/ماه ---------- */
.hud{position:relative;width:100%;aspect-ratio:5700/2484;flex:none}
.hud-media{position:absolute;left:50%;top:41.3%;width:32.5%;height:61%;transform:translate(-50%,-50%);
  border-radius:50%;object-fit:cover;transition:opacity 1s ease}
#mediaSun{opacity:0}
body[data-phase="day"] #mediaSun{opacity:1}
body[data-phase="day"] #mediaMoon{opacity:0}
.hud-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none}
.hud-title,.hud-timer{position:absolute;left:50%;transform:translate(-50%,-50%);text-align:center;white-space:nowrap}
.hud-title{top:6.4%;width:22%;font-size:calc(var(--w)*.03);font-weight:700;color:#f0d9a0;text-shadow:0 1px 3px #000}
.hud-timer{top:88.4%;width:19%;direction:ltr;unicode-bidi:isolate;font-size:calc(var(--w)*.042);font-weight:700;color:#a9d6ff;
  font-variant-numeric:tabular-nums;text-shadow:0 0 8px rgba(74,168,255,.7)}
.hud-timer.urgent{color:#ff8a8d;text-shadow:0 0 8px rgba(255,90,95,.8);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.45}}

/* ناظرها: دو آواتار (با همان کادر بازیکن‌ها) چپ و راست دایرهٔ روز/شب */
.narr{position:absolute;top:31%;width:22.5%;pointer-events:none}
.narr-l{left:3.5%}.narr-r{right:3.5%}
.narr .seat{--seat:calc(var(--w)*.225);cursor:default}

/* ---------- بازیکن‌ها (بدون میز؛ ۴ ردیف) ---------- */
.table{direction:ltr;display:grid;grid-template-columns:repeat(4,var(--seat));justify-content:center;column-gap:var(--cg);
  grid-template-rows:repeat(4,var(--seatH));row-gap:2px;padding:4px 4px 6px;align-content:space-evenly;flex:1;min-height:0}
.seat{position:relative;width:var(--seat);aspect-ratio:1186/1327;justify-self:center;align-self:center;direction:rtl;cursor:pointer}
.seat .av{position:absolute;left:16.4%;top:7.2%;width:67.2%;height:61%;border-radius:50%;object-fit:cover;z-index:1;
  user-select:none;transition:filter .5s}
.seat .av.flip{transform:scaleX(-1)}
.seat .ring,.seat .spin{position:absolute;left:13%;top:4.5%;width:74%;height:66%;border-radius:50%;z-index:2;opacity:0;pointer-events:none;
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 65%);mask:radial-gradient(circle,transparent 63%,#000 65%)}
.seat .ring{background:conic-gradient(var(--blue) calc(var(--p,100)*1%),rgba(74,168,255,.12) 0)}
.seat.speaking .ring{opacity:.35}
.seat .frame{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;user-select:none;transition:filter .3s}
.seat .plate{text-align:center;line-height:calc(var(--seat)*.168);position:absolute;z-index:4;left:11%;width:78%;top:74%;height:15%;border:0;background:transparent;color:#dce8fb;
  font:inherit;font-size:calc(var(--seat)*.15);font-weight:600;padding:0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:inherit}
.seat .num{position:absolute;z-index:5;top:3%;right:6%;width:20%;aspect-ratio:1;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:calc(var(--seat)*.13);font-weight:700;
  background:#142544;color:#cfe3ff;border:1px solid #4d79b8}
.seat .votes{position:absolute;z-index:5;bottom:34%;left:7%;width:20%;aspect-ratio:1;border-radius:50%;display:none;
  align-items:center;justify-content:center;font-size:calc(var(--seat)*.13);font-weight:700;background:var(--red);color:#fff}
.seat .votes.on{display:flex}
.seat.me .plate{color:var(--gold)}
.seat.ally .frame{filter:drop-shadow(0 0 6px var(--red)) drop-shadow(0 0 2px var(--red))}
.seat.dead .av{filter:grayscale(1) brightness(.4)}
.seat.dead .plate{opacity:.45;text-decoration:line-through}
.seat.dead .num{opacity:.5}
.seat.pickable .frame{filter:drop-shadow(0 0 7px #4aa8ff);animation:pulse 1.4s ease-in-out infinite}
.seat.picked .frame{filter:drop-shadow(0 0 8px var(--gold)) drop-shadow(0 0 3px var(--gold)) sepia(.6) saturate(2);animation:none}
@keyframes pulse{50%{opacity:.5}}

/* جایگاه‌ها (چت بسته): حلقهٔ ۴×۴ — ردیف بالا ۴–۷، ستون‌های کناری ۳،۲ و ۸،۹، پایین ۱ و ۱۰؛ وسط خالی برای دکمه‌ها */
.seat[data-seat="4"]{grid-column:1;grid-row:1}
.seat[data-seat="5"]{grid-column:2;grid-row:1}
.seat[data-seat="6"]{grid-column:3;grid-row:1}
.seat[data-seat="7"]{grid-column:4;grid-row:1}
.seat[data-seat="3"]{grid-column:1;grid-row:2}
.seat[data-seat="8"]{grid-column:4;grid-row:2}
.seat[data-seat="2"]{grid-column:1;grid-row:3}
.seat[data-seat="9"]{grid-column:4;grid-row:3}
.seat[data-seat="1"]{grid-column:2;grid-row:4}
.seat[data-seat="10"]{grid-column:3;grid-row:4}

/* وسط: فقط دکمه‌ها (بدون کادر) */
.center{grid-column:2/4;grid-row:2/4;direction:rtl;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:4px;text-align:center;min-width:0}
.center:empty{display:none}
.center .who small{display:block;color:var(--muted);font-size:12px}
.center .who b{display:block;font-size:22px;color:#fff;margin-top:2px;word-break:break-word;text-shadow:0 2px 6px #000}
.center .sel{font-size:14px;color:var(--gold);line-height:1.6;text-shadow:0 1px 4px #000}
.center .sel.ok{color:#9fe3b0}
.center .actions{display:flex;flex-direction:column;gap:8px;width:100%;align-items:center}

/* ---------- دکمه‌ها (ساده و تخت) ---------- */
.btn{border:1px solid #4a7cc4;cursor:pointer;color:#fff;font:inherit;font-weight:700;font-size:15px;padding:11px 26px;min-width:120px;
  border-radius:12px;background:#24477f;transition:transform .08s,opacity .2s,background .2s}
.btn:hover{background:#2c5599}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.4;cursor:default}
.btn.small{font-size:12px;padding:8px 14px;min-width:0;border-radius:10px}
.btn.ghost{background:rgba(8,14,28,.55);border:1px solid rgba(150,185,235,.45);color:var(--muted);font-weight:500;padding:8px 14px}
.btn.small.ghost{padding:8px 14px}

.bar{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:8px 12px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(150,185,235,.15);background:rgba(4,8,18,.6)}
.mic{position:relative;width:var(--rb);height:var(--rb);padding:0;border:0;background:none;cursor:pointer;flex:none}
.mic img{width:100%;height:100%;display:block;transition:filter .2s}
.mic.muted img{filter:grayscale(1) brightness(.6)}
.mic.muted::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:3px;background:#fff;border-radius:2px;transform:rotate(-40deg);box-shadow:0 0 3px #000}
.chip{flex:1;min-width:0;text-align:center;font-size:13px;color:var(--muted)}
.chip b{color:var(--gold);display:block;font-size:15px}
.dev{display:flex;flex-direction:row;gap:5px;flex:none}
.dev .btn.small{padding:7px 9px;font-size:11.5px}

/* ---------- کادر چت (مربعی، پایین‌سمت‌راستِ میز) ---------- */
.table{position:relative}
.chat{position:absolute;right:4px;bottom:6px;width:var(--chW);height:var(--chH);z-index:8;transform-origin:100% 100%;
  transition:opacity .45s ease,transform .55s cubic-bezier(.4,0,.2,1)}
html.chat-off .chat{opacity:0;transform:translateY(24px) scale(.88);pointer-events:none}
.chat-bg{position:absolute;left:8%;right:8%;top:10%;bottom:7%;border-radius:10px;background:linear-gradient(180deg,rgba(10,20,42,.92),rgba(5,10,24,.95))}
.chat-frame{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;user-select:none}
.chat-in{position:absolute;z-index:2;left:9.5%;right:9.5%;top:12.5%;bottom:9.5%;display:flex;flex-direction:column;gap:5px;min-height:0;direction:rtl}
.chat-log{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:3px;
  font-size:12.5px;line-height:1.55;padding:0 2px;scrollbar-width:thin;scrollbar-color:#3d6aa8 transparent}
.chat-log::-webkit-scrollbar{width:4px}.chat-log::-webkit-scrollbar-thumb{background:#3d6aa8;border-radius:2px}
.cm{flex:none;word-break:break-word;color:#d6e4fb;animation:cmin .28s ease-out}
.cm b{font-weight:700;margin-inline-end:4px}
.cm.me{color:#ffe9b8}
.cm.maf{color:#ffc4c6}
.cm.maf::before{content:"🔒 "}
.cm.sys{color:var(--muted);font-size:11.5px;text-align:center}
@keyframes cmin{from{opacity:0;transform:translateY(6px)}}
.chat-form{flex:none;display:flex;align-items:center;gap:5px;height:38px}
.chat-form input{flex:1;min-width:0;height:32px;font:inherit;font-size:16px;padding:0 10px;border-radius:9px;border:1px solid #3d6aa8;background:#0b1730;color:#fff;outline:none}
.chat-form input:focus{border-color:var(--blue)}
.chat-form input:disabled{opacity:.55}
.chat.mafia .chat-form input{border-color:#b04a4f;background:#240c12}
.chat.mafia .chat-bg{background:linear-gradient(180deg,rgba(48,10,16,.92),rgba(22,5,9,.95))}
.chat-title{position:absolute;z-index:4;left:50%;top:2.2%;height:7%;transform:translateX(-50%);width:34%;display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--chH)*.05);font-weight:700;color:#e8f4ff;text-shadow:0 1px 3px #000;pointer-events:none}
.chat-close{position:absolute;z-index:5;left:2.5%;top:2.5%;width:calc(var(--chH)*.11);aspect-ratio:1;min-width:24px;border-radius:50%;border:1px solid rgba(150,185,235,.6);
  background:rgba(8,14,28,.82);color:#cfe3ff;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.chat-close svg{width:55%;height:55%}
.chat-close:active{transform:scale(.9)}

/* چینش با چت باز: ۲ ردیف ۴تایی (۴–۷ و ۳،۱۰،۹،۸)، زیرش چت مربعی در ۳ ستون راست و آواتارهای ۲ و ۱ کنار آن */
html:not(.chat-off) .table{grid-template-rows:repeat(2,calc(var(--seatH)*.94)) var(--chS);align-content:center}
html:not(.chat-off) .seat{align-self:start}
html:not(.chat-off) .seat[data-seat="10"]{grid-column:2;grid-row:2}
html:not(.chat-off) .seat[data-seat="9"]{grid-column:3;grid-row:2}
html:not(.chat-off) .seat[data-seat="8"]{grid-column:4;grid-row:2}
html:not(.chat-off) .seat[data-seat="2"]{grid-column:1;grid-row:3;align-self:start;margin-top:calc((var(--chS) - 2*var(--seatH))/3)}
html:not(.chat-off) .seat[data-seat="1"]{grid-column:1;grid-row:3;align-self:end;margin-bottom:calc((var(--chS) - 2*var(--seatH))/3)}
html:not(.chat-off) .chat{position:relative;right:auto;bottom:auto;grid-column:2/5;grid-row:3;width:100%;height:100%;align-self:end;transform-origin:100% 100%}
/* دکمه‌های مرحله (وقتی چت باز است): نوار شناور روی بالای کادر چت */
html:not(.chat-off) .center{position:absolute;grid-column:auto;grid-row:auto;z-index:9;
  right:calc((100% - 4*var(--seat) - 3*var(--cg))/2 + var(--chS)*.06);bottom:calc(6px + var(--chS)*.42);width:calc(var(--chS)*.88);
  max-height:calc(var(--chS)*.5);overflow-y:auto;padding:7px;gap:6px;border-radius:12px;background:rgba(5,10,22,.93);border:1px solid rgba(245,193,90,.4);box-shadow:0 6px 18px rgba(0,0,0,.6)}
html:not(.chat-off) .center .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px}
html:not(.chat-off) .center .btn{padding:7px 12px;min-width:0;font-size:13px}
html:not(.chat-off) .center .who b{font-size:17px}
html:not(.chat-off) .center .sel{font-size:12.5px;padding:3px 8px}

/* آیکون چت در نوار پایین + شمارندهٔ پیام‌های خوانده‌نشده */
.badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--red);color:#fff;border:2px solid #0b1224;
  font-size:11px;font-weight:700;line-height:16px;text-align:center}
.badge.pop{animation:badgepop .4s ease-out}
@keyframes badgepop{40%{transform:scale(1.45)}}

/* ---------- ثبت‌نام ---------- */
#screenReg{align-items:stretch}
.panel{margin:10px 16px 24px;padding:30px 24px 26px;text-align:center;border:1px solid rgba(150,185,235,.25);border-radius:18px;
  background:rgba(8,14,28,.78)}
.panel h1{margin:0 0 14px;font-size:22px;color:var(--gold)}
.panel label{display:block;text-align:right;font-size:13px;color:var(--muted);margin-bottom:6px}
.panel input{width:100%;font:inherit;font-size:17px;padding:12px 14px;border-radius:12px;border:1px solid #3d6aa8;background:#0b1730;color:#fff;outline:none;text-align:center}
.panel input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(74,168,255,.25)}
.err{min-height:22px;color:#ff9a9d;font-size:13px;margin:6px 0 8px}
.note{margin:14px 0 0;font-size:12px;color:var(--muted);line-height:1.8}

/* دیالوگ بالای صفحه: پیام مهم را نشان می‌دهد و خودش می‌رود */
#dialog{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top));transform:translate(-50%,-16px);width:min(92vw,440px);
  padding:10px 16px 12px;border-radius:14px;background:rgba(8,14,28,.94);border:1px solid rgba(150,185,235,.45);
  box-shadow:0 8px 24px rgba(0,0,0,.55);text-align:center;line-height:1.7;white-space:pre-line;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:50}
#dialog.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#dialog .dt{display:block;font-size:12px;color:var(--gold)}
#dialog .dx{display:block;font-size:15px;color:#fff}

@media (max-width:380px){.dev{flex-direction:column}.dev .btn.small{padding:5px 9px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* «درباره»: آیکون روی آواتار دفاع‌کننده، دست بلندشده، حلقهٔ چرخان دور آواتار انتخاب‌شده */
.seat .ic{position:absolute;z-index:6;display:none;align-items:center;justify-content:center;border-radius:50%;pointer-events:none}
.seat .about-ic{top:3%;left:7%;width:21%;aspect-ratio:1;background:var(--gold);color:#1a1205}
.seat .about-ic svg{width:66%;height:66%}
.seat.aboutdef .about-ic{display:flex}
.seat .hand-ic{bottom:34%;right:7%;width:21%;aspect-ratio:1;background:var(--red)}
.seat .hand-ic svg,.seat .votes svg{width:60%;height:60%;fill:#fff}
.seat.hand .hand-ic,.seat.canhand .hand-ic{display:flex}
.seat.canhand .hand-ic{animation:pulse2 1.2s ease-in-out infinite}
.seat .spin{background:conic-gradient(from 0deg,transparent 0 55%,var(--gold) 100%);animation:spin 1s linear infinite;display:none}
.seat.aboutsel .spin{opacity:1;display:block}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse2{50%{transform:scale(1.18)}}

/* ---------- دکمه‌های گرد هم‌سبک میکروفن: حلقهٔ فلزی + قرمز براق + آیکون صورتی ---------- */
.rbtn{position:relative;flex:none;width:var(--rb);height:var(--rb);padding:0;border:0;background:none;cursor:pointer;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:transform .12s,filter .25s}
.rbtn .rb{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
.rbtn .gl{position:relative;z-index:1;width:48%;height:48%;fill:#f8b4b4;pointer-events:none;
  filter:drop-shadow(0 1px 0 rgba(255,225,225,.35)) drop-shadow(0 -1px 1px rgba(90,0,0,.7))}
.rbtn .gl.flip{transform:scaleX(-1)}
.rbtn:active{transform:scale(.93)}
.chatbtn{width:var(--rb);height:var(--rb)}
html:not(.chat-off) .chatbtn .rb{filter:drop-shadow(0 0 6px rgba(255,90,95,.75))}
.chat-send{--rb:36px}
.chat-send .gl{width:44%;height:44%}
.chat-form input:disabled + .chat-send{filter:grayscale(.85) brightness(.65);cursor:default}
.badge{z-index:2}

/* ================= پولیش v8: یکدستی و زیبایی ================= */
#app{padding-top:env(safe-area-inset-top,0px)}
body::before{background:radial-gradient(ellipse at 50% 38%,rgba(14,32,72,.28),rgba(2,5,14,.62) 100%),linear-gradient(180deg,rgba(14,32,72,.42),rgba(4,8,20,.34))}
body::after{background:radial-gradient(ellipse at 50% 38%,rgba(120,72,22,.2),rgba(20,10,4,.55) 100%),linear-gradient(180deg,rgba(120,72,22,.34),rgba(40,22,8,.26))}

/* اسم‌ها: حروفی مثل «ش» و «ی» دیگر از پایین بریده نمی‌شوند */
.seat .plate{overflow-x:clip;overflow-y:visible;text-overflow:clip;text-shadow:0 1px 2px rgba(0,0,0,.8);letter-spacing:0}
.seat .num{background:linear-gradient(180deg,#1d3a69,#0e2043);border-color:#7fa6e0;box-shadow:0 1px 3px rgba(0,0,0,.6)}
.seat .av{box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.seat:active .av{filter:brightness(1.12)}

/* دکمه‌های وسط و عمومی: فلزی با حاشیهٔ روشن، مثل بقیهٔ رابط */
.btn{border:1px solid #a9c2e8;border-radius:10px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.65);
  background:linear-gradient(180deg,#3d6fba 0%,#254a88 48%,#18336a 52%,#1f3f78 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 4px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.5)}
.btn:hover{filter:brightness(1.12);background:linear-gradient(180deg,#3d6fba 0%,#254a88 48%,#18336a 52%,#1f3f78 100%)}
.btn.ghost{color:#c3d3ee;border-color:rgba(160,185,225,.5);
  background:linear-gradient(180deg,rgba(44,58,84,.88),rgba(14,20,34,.92));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 6px rgba(0,0,0,.45)}
.btn[data-act="confirm"],.btn[data-act="again"],.btn[data-act="inqyes"],#regBtn{color:#2a1a05;text-shadow:0 1px 0 rgba(255,235,190,.5);border-color:#ffe4a3;
  background:linear-gradient(180deg,#fbd987 0%,#e5a845 48%,#c98a2c 52%,#d89a38 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 4px rgba(120,60,0,.35),0 2px 8px rgba(0,0,0,.5)}
.btn:disabled{filter:grayscale(.6);opacity:.45}
.center .sel{padding:5px 12px;border-radius:10px;background:rgba(6,12,26,.66);border:1px solid rgba(245,193,90,.3)}
.center .sel.ok{border-color:rgba(159,227,176,.4)}
.center .actions{gap:7px}

/* نوار پایین */
.bar{gap:10px;border-top:1px solid rgba(150,185,235,.3);box-shadow:0 -6px 18px rgba(0,0,0,.45);
  background:linear-gradient(180deg,rgba(8,14,28,.82),rgba(3,6,14,.96))}
.chip{display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;padding:2px 8px;border-radius:12px;
  background:rgba(10,18,36,.62);border:1px solid rgba(150,185,235,.28);font-size:11px;line-height:1.35}
.chip b{font-size:14px;white-space:nowrap}
.dev{flex-direction:column;gap:4px}
.dev .btn.small{padding:5px 10px;font-size:11px;min-width:78px;border-radius:9px;line-height:1.35}
@media (max-width:380px){.dev{flex-direction:column}.dev .btn.small{padding:5px 8px}}

/* چت: پیام‌ها حباب نرم می‌گیرند */
.cm{padding:2px 8px;border-radius:8px;background:rgba(255,255,255,.045)}
.cm.sys{background:none}
.cm.me{background:rgba(245,193,90,.09)}
.cm.maf{background:rgba(255,90,95,.08)}
.chat-form input{border-radius:10px;box-shadow:inset 0 1px 4px rgba(0,0,0,.5)}

/* دیالوگ: زیر قاب بالا، تا تایمر و عنوان روز/شب را نپوشاند */
#dialog{top:calc(env(safe-area-inset-top,0px) + var(--w)*.4358 + 4px);width:min(90vw,420px);padding:6px 14px 8px;border-radius:12px;
  background:rgba(6,11,24,.9);border:1px solid rgba(245,193,90,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 8px 22px rgba(0,0,0,.6)}
#dialog .dx{font-size:14px}

/* ثبت‌نام: وسط‌چین و با کادر زیباتر */
#screenReg{justify-content:flex-start}
.panel{margin:auto 18px;padding:30px 22px 24px;border:1px solid rgba(245,193,90,.35);border-radius:20px;
  background:linear-gradient(180deg,rgba(14,24,48,.88),rgba(6,10,22,.92));box-shadow:0 14px 40px rgba(0,0,0,.6),inset 0 0 34px rgba(74,168,255,.07)}
.panel h1{font-size:24px;text-shadow:0 2px 8px rgba(245,193,90,.35)}
.panel .btn{width:100%;margin-top:4px;padding:13px 20px;font-size:16px}
.panel input{border-radius:12px;background:#0a142a;box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}

/* سابقهٔ رأی‌ها (رأی‌گیری نوبتی و علنی) */
.center .vlog{width:100%;max-height:9.5em;overflow:auto;font-size:11.5px;line-height:1.6;text-align:right;color:#dbe7ff;padding:4px 8px;border-radius:10px;background:rgba(6,12,26,.66);border:1px solid rgba(90,140,220,.3)}

/* ---------- v12 ---------- */
/* دکمهٔ دست: هم‌سبک چت و میکروفن (حلقهٔ فلزی + قرمز براق + آیکون صورتی)؛ فقط وقتی کاری با آن می‌شود کرد روشن است */
.bar{--rb:52px}
@media (max-width:400px){.bar{--rb:46px;gap:7px}}
.handbtn.off{pointer-events:none;filter:grayscale(.7) brightness(.55)}
.handbtn:not(.off):not(.up) .rb{filter:drop-shadow(0 0 6px rgba(255,90,95,.7))}
.handbtn:not(.off):not(.up){animation:hbPulse 1.6s ease-in-out infinite}
.handbtn.up .rb{filter:drop-shadow(0 0 8px rgba(245,193,90,.95))}
.handbtn.up .gl{fill:#ffe3a0}
@keyframes hbPulse{50%{transform:scale(1.07)}}
/* وقتی چت بسته است: دو ستون کناری (۴،۳،۲ و ۷،۸،۹) نیم‌ردیف پایین می‌آیند تا مثل دور یک میز نامرئی وسط قرار بگیرند */
html.chat-off .seat:is([data-seat="2"],[data-seat="3"],[data-seat="4"],[data-seat="7"],[data-seat="8"],[data-seat="9"]){top:calc((var(--seatH) + 2px)/2)}

/* ---------- v14: ورود، لابی، وضعیت اتصال ---------- */
.tabs{display:flex;gap:8px;margin-bottom:14px}
.tab{flex:1;font:inherit;padding:10px;border-radius:12px;border:1px solid #3d6aa8;background:#0a142a;color:var(--muted);cursor:pointer}
.tab.on{color:#1a1205;background:linear-gradient(#f5c15a,#c98a1e);border-color:#f5c15a;font-weight:700}
.lobby{text-align:right}
.lobby h2{margin:0 0 10px;font-size:17px;color:var(--gold)}
.lobby .row{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:8px 10px;margin:6px 0;border-radius:12px;background:rgba(10,20,42,.7);border:1px solid rgba(150,185,235,.18)}
.lobby .row b{font-weight:600}
.lobby .code{font-size:26px;letter-spacing:6px;text-align:center;color:#f0d9a0;direction:ltr;margin:6px 0 12px}
.lobby .btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.lobby .btns .btn{flex:1;min-width:120px}
.lobby input{margin-bottom:8px}
.lobby .sep{height:1px;background:rgba(150,185,235,.2);margin:14px 0}
.lobby .muted{color:var(--muted);font-size:12px;line-height:1.8}
.conn{position:fixed;top:calc(env(safe-area-inset-top,0px) + 4px);left:50%;transform:translateX(-50%);z-index:60;padding:3px 12px;border-radius:999px;font-size:12px;background:#7a1d24;color:#fff;display:none}
.conn.on{display:block}
.conn.warn{background:#7a5a1d}
.mic.nomic{filter:grayscale(.8) brightness(.6)}
.mic.live{filter:drop-shadow(0 0 8px rgba(245,193,90,.9))}
.result{font-size:20px;color:var(--gold);margin:6px 0 10px}

.spec{color:var(--muted);font-size:12px;margin-bottom:4px}

/* ---------- لایک / دیسلایک برای گوینده (هم‌سبک دکمه‌های گرد پایین) ---------- */
.rx.off{pointer-events:none;filter:grayscale(.7) brightness(.55)}
#likeBtn .gl{fill:#bff0c4}
#dislikeBtn .gl{fill:#f8b4b4}
.bar:has(.rx){gap:6px}
@media (max-width:400px){.bar:has(.rx){--rb:40px;gap:4px}}
.rxfloat{position:absolute;left:50%;top:30%;font-size:26px;pointer-events:none;z-index:6;animation:rxUp 1.4s ease-out forwards}
@keyframes rxUp{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-46px)}}

/* خروج موقت از صفحهٔ بازی؛ عضویت و نقش روی سرور حفظ می‌شود. */
.game-exit{position:absolute;z-index:30;top:calc(env(safe-area-inset-top,0px) + 8px);left:12px;padding:7px 12px;border:1px solid rgba(255,255,255,.35);border-radius:10px;background:rgba(35,22,18,.82);color:#fff;font:inherit;font-size:12px;cursor:pointer}
.game-exit:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* =====================================================================================
   v15 — ریسپانسیو کامل
   ۱) عمودی (گوشی/تبلت): ستون بازی با ارتفاع صفحه بزرگ می‌شود (۴۸۰ تا ۷۶۰ پیکسل) و فونت/دکمه‌ها هم‌مقیاس می‌شوند.
   ۲) افقی (گوشی خوابیده، تبلت و دسکتاپ): دو ستون — قاب بالا + نوار دکمه‌ها کنار هم، میز بازیکن‌ها در ستون کناری.
   ۳) اسکرول افقی هرگز؛ لبهٔ بُریدگی (notch) را رعایت می‌کند.
   ===================================================================================== */
:root{
  --k:1;                                                    /* ضریب مقیاس متن و دکمه‌ها */
  --w:min(100vw,clamp(480px,calc(100dvh*.62),760px));
  --seat:clamp(46px,min(calc(var(--w)*.222),calc((100dvh - var(--w)*.4358 - 31px - 52px*var(--k) - 30px)/5.11)),150px);
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
img,svg{max-width:100%}
#app{padding-inline:env(safe-area-inset-left,0px) env(safe-area-inset-right,0px)}

/* پنل‌های ورود/لابی روی صفحه‌های پهن بیش‌ازحد کش نیایند */
.panel{width:auto;max-width:520px;margin-inline:auto}
@media (max-width:520px){.panel{margin-inline:16px;max-width:none}}

/* --- مقیاس متن در عمودیِ بزرگ (تبلت/دسکتاپ با صفحهٔ بلند) --- */
@media (min-width:600px) and (min-height:800px) and (max-aspect-ratio:13/10){:root{--k:1.2}}
@media (min-width:740px) and (min-height:1000px) and (max-aspect-ratio:13/10){:root{--k:1.4}}

/* --- گوشی‌های خیلی کوچک (۳۲۰ پیکسل) --- */
@media (max-width:340px){
  .center .who b{font-size:19px}
  .center .sel{font-size:12.5px}
  .btn{padding:10px 18px;min-width:96px}
  .panel{padding:22px 16px 20px}
  .lobby .code{font-size:22px;letter-spacing:4px}
}

/* --- ارتفاع کوتاه در حالت عمودی --- */
@media (max-height:600px) and (max-aspect-ratio:13/10){
  .center{gap:6px}
  .center .who b{font-size:19px}
  .center .sub{font-size:12px}
}

/* --- افقی: دو ستون --- */
@media (orientation:landscape) and (min-aspect-ratio:13/10){
  :root{
    --w:min(42vw,calc(100dvh*1.05),620px);
    --seat:clamp(38px,min(calc((100dvh - 20px)/5.25),calc((100vw - var(--w) - 40px - 3*var(--cg))/4)),150px);
  }
  #app:has(#screenGame:not([hidden])){width:min(100vw,1500px)}
  #screenGame:not([hidden]){display:grid;grid-template-columns:var(--w) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
    column-gap:10px;height:100dvh;min-height:0;overflow:hidden}
  #screenGame .hud{grid-column:1;grid-row:1}
  #screenGame .bar{grid-column:1;grid-row:2;align-self:end;border-radius:14px 14px 0 0;--rb:clamp(38px,calc(var(--w)*.115),64px);gap:8px}
  #screenGame .table{grid-column:2;grid-row:1/3;height:100%;padding-block:6px}
  #dialog{top:calc(env(safe-area-inset-top,0px) + 8px)}
  .panel{margin-block:auto}
}
/* افقیِ کم‌ارتفاع (گوشی خوابیده): ستون راست فشرده‌تر */
@media (orientation:landscape) and (min-aspect-ratio:13/10) and (max-height:480px){
  .center .who b{font-size:17px}
  .center .who small{font-size:11px}
  .center .sub{font-size:11.5px;line-height:1.5}
  .center .btn{padding:7px 14px;font-size:13px}
  .chip{font-size:10px}.chip b{font-size:12.5px}
  html:not(.chat-off) .center{max-height:calc(var(--chS)*.68);bottom:calc(6px + var(--chS)*.27);gap:4px;padding:5px}
  html:not(.chat-off) .center .who b{font-size:15px}
  html:not(.chat-off) .center .btn{padding:6px 12px}
  .game-exit{top:calc(env(safe-area-inset-top,0px) + 4px);padding:5px 9px;font-size:11px}
}

/* --- افقیِ بلند (تبلت/دسکتاپ): متن بزرگ‌تر --- */
@media (orientation:landscape) and (min-aspect-ratio:13/10) and (min-height:700px){:root{--k:1.25}}
@media (orientation:landscape) and (min-aspect-ratio:13/10) and (min-height:950px){:root{--k:1.5}}

/* --- اعمال ضریب مقیاس --- */
.center .who small{font-size:calc(12px*var(--k))}
.center .who b{font-size:calc(22px*var(--k))}
.center .sel{font-size:calc(14px*var(--k))}
.center .sub{font-size:calc(14px*var(--k))}
.btn{font-size:calc(15px*var(--k))}
.btn.small{font-size:calc(12px*var(--k))}
.chat-log{font-size:calc(12.5px*var(--k))}
.cm.sys{font-size:calc(11.5px*var(--k))}
.chip{font-size:calc(11px*var(--k))}.chip b{font-size:calc(14px*var(--k))}
.game-exit{font-size:calc(12px*var(--k))}
.bar{--rb:calc(52px*var(--k))}
.chat-form{height:calc(38px*var(--k))}
.chat-form input{height:calc(32px*var(--k))}
html:not(.chat-off) .center .who b{font-size:calc(17px*var(--k))}
html:not(.chat-off) .center .btn{font-size:calc(13px*var(--k))}
html:not(.chat-off) .center .sel{font-size:calc(12.5px*var(--k))}
@media (max-width:400px){.bar{--rb:46px}.bar:has(.rx){--rb:40px}}
@media (max-width:340px){.center .who b{font-size:19px}}

/* =====================================================================================
   v16 — دکمهٔ خروج هم‌سبک، دیالوگ تأیید، برگهٔ انتخابِ شب
   ===================================================================================== */
/* خروج: دکمهٔ گردِ فلزی مثل میکروفن/چت، بالا-چپِ قاب */
.game-exit.rbtn{--xb:clamp(34px,calc(var(--w)*.088),54px);position:absolute;z-index:30;top:calc(env(safe-area-inset-top,0px)*0 + 3.5%);left:3.2%;
  width:var(--xb);height:var(--xb);padding:0;border:0;background:none;border-radius:50%;font-size:0;color:inherit}
.game-exit.rbtn .gl{width:46%;height:46%}
/* رد مرحله (تست): قرینهٔ دکمهٔ خروج، سمت راست قاب */
.game-skip.rbtn{--xb:clamp(34px,calc(var(--w)*.088),54px);position:absolute;z-index:30;top:3.5%;right:3.2%;
  width:var(--xb);height:var(--xb);padding:0;border:0;background:none;border-radius:50%;font-size:0;color:inherit}
.game-skip.rbtn .gl{width:46%;height:46%;fill:#a9d6ff}
.game-skip.rbtn:disabled{filter:grayscale(.8) brightness(.7);cursor:default}
.game-skip.rbtn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.game-exit.rbtn:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* دیالوگ تأیید */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(2,5,12,.72);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:mdIn .18s ease-out}
.modal-card{width:min(100%,360px);padding:22px 20px 18px;text-align:center;border-radius:20px;border:1px solid rgba(245,193,90,.45);
  background:linear-gradient(180deg,rgba(18,30,58,.97),rgba(7,12,26,.98));box-shadow:0 18px 50px rgba(0,0,0,.7),inset 0 0 34px rgba(74,168,255,.07)}
.modal-title{font-size:calc(19px*var(--k));font-weight:700;color:var(--gold);margin-bottom:8px}
.modal-text{font-size:calc(14px*var(--k));line-height:1.9;color:#cfdcf3;margin-bottom:16px}
.modal-actions{display:flex;flex-direction:column-reverse;gap:8px}
.modal-actions .btn{width:100%;min-width:0;padding:12px 16px}
.btn.danger{border-color:#ffb3b5;background:linear-gradient(180deg,#d8595e 0%,#a42a31 48%,#7f1b22 52%,#962730 100%)}
.btn.danger:hover{background:linear-gradient(180deg,#d8595e 0%,#a42a31 48%,#7f1b22 52%,#962730 100%)}
@keyframes mdIn{from{opacity:0}}

/* برگهٔ انتخاب شب */
#screenGame{position:relative}
.bar{position:relative}
.sheet{position:absolute;z-index:40;left:0;right:0;bottom:var(--barH,70px);padding:0 8px 8px;pointer-events:none}
.sheet>.sh{pointer-events:auto}
.sh{display:flex;flex-direction:column;max-height:calc(100dvh - var(--w)*.4358 - var(--barH,70px) - 14px);border-radius:18px;overflow:hidden;
  border:1px solid rgba(245,193,90,.5);background:linear-gradient(180deg,rgba(16,28,54,.97),rgba(6,11,24,.98));
  box-shadow:0 -8px 30px rgba(0,0,0,.6),inset 0 0 30px rgba(74,168,255,.06);animation:shUp .22s ease-out}
@keyframes shUp{from{transform:translateY(14px);opacity:0}}
.sh-h{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;flex:none;
  background:linear-gradient(180deg,rgba(245,193,90,.16),rgba(245,193,90,.04))}
.sh.strip .sh-h{cursor:default}
.sh-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sh-t b{font-size:calc(15px*var(--k));color:var(--gold)}
.sh-t span{font-size:calc(12.5px*var(--k));color:#cfdcf3;line-height:1.5}
.sh-h small{direction:ltr;font-variant-numeric:tabular-nums;font-size:calc(13px*var(--k));font-weight:700;color:#a9d6ff}
.sh-h em{font-style:normal;color:var(--muted);font-size:14px}
.sh.strip .sh-h em{display:none}
.sh-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 12px 6px;display:flex;flex-direction:column;gap:10px}
.sh-note{font-size:calc(12px*var(--k));color:var(--muted);line-height:1.7}
.sh-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sh-tab{font:inherit;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;border-radius:12px;border:1px solid rgba(150,185,235,.35);
  background:rgba(10,20,42,.8);color:#cfe0fa;cursor:pointer}
.sh-tab b{font-size:calc(14px*var(--k))}
.sh-tab small{font-size:calc(10.5px*var(--k));color:var(--muted)}
.sh-tab.on{background:linear-gradient(180deg,#fbd987,#d89a38);border-color:#ffe4a3;color:#2a1a05}
.sh-tab.on small{color:#5a3a0a}
.sh-tab:disabled{opacity:.5;cursor:default}
.sh-tab.lock{cursor:default;opacity:.85}
.sh-tab.lock b::before{content:"🔒 ";font-size:.85em}
.sh-l{font-size:calc(12.5px*var(--k));color:var(--muted);margin-bottom:5px}
.sh-l i{font-style:normal;color:#9fe3b0}
.sh-pl{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px}
.pl{font:inherit;display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 4px 6px;border-radius:12px;border:1px solid rgba(150,185,235,.3);
  background:rgba(10,20,42,.8);color:#e4eeff;cursor:pointer;text-align:center;min-width:0}
.pw{position:relative;display:block;width:46px;height:46px;flex:none}
.pa{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid rgba(150,185,235,.5);display:block;background:#0b1530}
.pa.flip{transform:scaleX(-1)}
.pl i{position:absolute;top:-3px;right:-6px;font-style:normal;font-size:calc(10.5px*var(--k));width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#142544;border:1px solid #4d79b8;color:#cfe3ff}
.pn{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(12.5px*var(--k))}
.pl.ally{border-color:rgba(255,90,95,.55)}
.pl.on{background:linear-gradient(180deg,#fbd987,#d89a38);border-color:#ffe4a3;color:#2a1a05;font-weight:700}
.pl.on i{background:#fff3cf;border-color:#a8721c;color:#5a3a0a}
.pl.on .pa{border-color:#fff3cf;box-shadow:0 0 10px rgba(245,193,90,.9)}
.pl:active,.sh-tab:active,.chip2:active{transform:scale(.96)}
.sh-chips{display:flex;flex-wrap:wrap;gap:6px}
.chip2{font:inherit;font-size:calc(13px*var(--k));padding:8px 12px;border-radius:999px;border:1px solid rgba(150,185,235,.35);background:rgba(10,20,42,.8);color:#cfe0fa;cursor:pointer}
.chip2.on{background:linear-gradient(180deg,#fbd987,#d89a38);border-color:#ffe4a3;color:#2a1a05;font-weight:700}
.sh-f{flex:none;display:flex;gap:8px;padding:8px 12px 12px;border-top:1px solid rgba(150,185,235,.18);background:rgba(4,8,18,.5)}
.sh-f .btn{flex:1;min-width:0;padding:12px 10px}
.sh-f .btn:first-child{flex:1.4}
.sh.strip .sh-body{padding:4px 12px 12px}
.sh.mini{max-height:none}

/* افقی: برگه روی ستون میز (کنار قاب) باز می‌شود */
@media (orientation:landscape) and (min-aspect-ratio:13/10){
  .sheet{left:0;right:auto;width:calc(100% - var(--w) - 10px);bottom:6px;max-height:calc(100dvh - 12px);display:flex;flex-direction:column;justify-content:flex-end}
  .sh{max-height:calc(100dvh - 18px)}
  .game-exit.rbtn,.game-skip.rbtn{--xb:clamp(30px,calc(var(--w)*.09),50px)}
}
@media (max-width:360px){.sh-pl{grid-template-columns:repeat(3,1fr)}.sh-tab small{display:none}}

/* انتخاب دومرحله‌ای (بازپرس / سوداگری) */
.sh-steps{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:8px}
.st{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:calc(12px*var(--k));font-weight:700;border:1px solid rgba(150,185,235,.4);color:var(--muted);background:rgba(10,20,42,.8)}
.st.cur{border-color:var(--gold);color:var(--gold);box-shadow:0 0 8px rgba(245,193,90,.5)}
.st.done{background:#1f7a4a;border-color:#6fe0a0;color:#fff}
.stl{width:34px;height:2px;background:rgba(150,185,235,.3)}
.sh-sum{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.sumc{font:inherit;display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:12px;border:1px solid rgba(111,224,160,.55);background:rgba(31,122,74,.18);color:#e4eeff;cursor:pointer;text-align:right}
.sumc .pa{width:34px;height:34px;flex:none;border-color:#6fe0a0}
.sumc span{flex:1;min-width:0;display:flex;flex-direction:column}
.sumc small{font-size:calc(10.5px*var(--k));color:var(--muted)}
.sumc b{font-size:calc(14px*var(--k));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sumc em{font-style:normal;color:var(--muted)}
.sh-l b{color:var(--gold)}

/* اثر قابلیت روی آواتار (فقط برای استفاده‌کننده) */
.seat .fxm{position:absolute;z-index:6;left:36%;top:2%;width:28%;display:flex;gap:2px;justify-content:center;pointer-events:none}
.seat .fxm b{flex:1;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--fc);color:#fff;box-shadow:0 0 8px var(--fc),0 1px 3px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.7)}
.seat .fxm b svg{width:68%;height:68%}
.seat .fxbig{position:absolute;z-index:7;left:16.4%;top:7.2%;width:67.2%;height:61%;border-radius:50%;display:flex;align-items:center;justify-content:center;pointer-events:none;color:#fff;
  background:radial-gradient(circle,color-mix(in srgb,var(--fc) 70%,transparent) 0,color-mix(in srgb,var(--fc) 25%,transparent) 62%,transparent 72%);animation:fxPop 1.6s ease-out forwards}
.seat .fxbig svg{width:62%;height:62%;filter:drop-shadow(0 0 6px var(--fc)) drop-shadow(0 2px 3px rgba(0,0,0,.8));animation:fxIcon 1.6s cubic-bezier(.2,1.4,.4,1) forwards}
.seat .fxbig.shoot svg,.seat .fxbig.guess svg{animation-name:fxLock}
.seat .fxbig .fxr{position:absolute;inset:0;border-radius:50%;border:3px solid var(--fc);animation:fxRing 1s ease-out forwards}
.seat.hit .av{animation:fxShake .5s ease-in-out,fxFlash .65s ease-out}
@keyframes fxPop{0%{opacity:0;transform:scale(.4)}15%{opacity:1;transform:scale(1.08)}30%{transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:scale(1.05)}}
@keyframes fxIcon{0%{transform:scale(2.4) rotate(-30deg);opacity:0}30%{transform:scale(1) rotate(0);opacity:1}100%{transform:scale(1)}}
@keyframes fxLock{0%{transform:scale(3) rotate(90deg);opacity:0}35%{transform:scale(.88) rotate(0);opacity:1}48%{transform:scale(1.12)}60%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes fxRing{from{transform:scale(.6);opacity:.95}to{transform:scale(1.5);opacity:0}}
@keyframes fxShake{0%,100%{translate:0 0}15%{translate:-5px 2px}30%{translate:5px -2px}45%{translate:-4px 1px}60%{translate:3px -1px}80%{translate:-1px 0}}
@keyframes fxFlash{0%{filter:brightness(2.2) saturate(2) sepia(.5) hue-rotate(-30deg)}100%{filter:none}}
@media (prefers-reduced-motion:reduce){.seat .fxbig,.seat .fxbig svg,.seat .fxbig .fxr,.seat.hit .av{animation-duration:.01s!important;animation-name:none!important}.seat .fxbig{opacity:1}}

/* فاز نهایی: اعلام انتخاب‌ها */
.rv{margin:8px auto 4px;max-width:92%;padding:8px 10px;border-radius:14px;border:1px solid rgba(245,193,90,.5);background:rgba(6,11,24,.78);text-shadow:none}
.rv-t{font-size:12px;color:var(--muted);margin-bottom:4px}
.rv-r{display:flex;align-items:center;justify-content:center;gap:6px;padding:3px 0;font-size:13px;color:#e4eeff}
.rv-r .pa{width:26px;height:26px;border-width:1px}
.rv-r em{font-style:normal;color:var(--gold)}
.rv-s{margin-top:4px;font-size:13px;color:var(--gold);font-weight:700}

/* پس‌زمینهٔ یکدست (بافت تیره)؛ بدون رنگ آبی/قهوه‌ای روزوشب، فقط کمی تیرگی گوشه‌ها */
body::before{background:radial-gradient(ellipse at 50% 38%,rgba(0,0,0,0) 45%,rgba(0,0,0,.45) 100%);opacity:1!important}
body::after{opacity:0!important}

/* نشانگر صحبت: فقط حلقهٔ داخلِ قاب، روشن/خاموش با پخش یا قطع صوت (بدون درخشش دور آواتار) */
.seat .ring{transition:opacity .15s ease-out}
.seat.talk .ring{opacity:1}

/* ===== v17-layout ===== */
:root{--dockH:calc(120px*var(--k,1))}
.dock{flex:none;height:var(--dockH);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;padding:3px 10px;
  text-align:center;direction:rtl;overflow-y:auto;overscroll-behavior:contain;min-width:0}
.dock:empty{visibility:hidden}
.dock>:first-child{margin-top:auto}.dock>:last-child{margin-bottom:auto}
.dock .who{display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap}
.dock .who small{display:inline;font-size:calc(12px*var(--k));color:var(--muted)}
.dock .who b{display:inline;margin:0;font-size:calc(17px*var(--k));color:#fff;text-shadow:0 2px 6px #000}
.dock .sub{margin:0;font-size:calc(12.5px*var(--k));line-height:1.5;color:var(--muted)}
.dock .sel{font-size:calc(12.5px*var(--k));padding:2px 10px;color:var(--gold)}
.dock .actions{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px;width:100%}
.dock .btn{min-width:0;padding:6px 11px;font-size:calc(12.5px*var(--k))}
.dock .rv{margin:0;padding:4px 8px;max-width:100%}
.dock .result{margin:0;font-size:calc(17px*var(--k))}
.center{overflow:hidden;min-height:0;gap:6px;padding:2px 6px}
.center .sub{margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.center .who b{font-size:calc(20px*var(--k))}
@media (orientation:portrait),(max-aspect-ratio:13/10){
  :root{--seat:clamp(46px,min(calc(var(--w)*.222),calc((100dvh - var(--w)*.4358 - 31px - 52px*var(--k) - var(--dockH) - 30px)/5.11)),150px)}
}
@media (orientation:landscape) and (min-aspect-ratio:13/10){
  #screenGame .dock{grid-column:1;grid-row:2;align-self:end;margin-bottom:var(--barH,70px);height:auto;min-height:var(--dockH);max-height:42dvh}
}
.seat.ally .frame,.seat.pickable .frame,.seat.picked .frame{filter:none;animation:none}
.seat .hand-ic{box-shadow:none}
.seat::before{content:"";position:absolute;left:16.4%;top:7.2%;width:67.2%;height:61%;border-radius:50%;z-index:2;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 0 calc(var(--seat)*.03) var(--mc,transparent)}
.seat.ally{--mc:var(--red)}
.seat.pickable{--mc:#5fd68a}
.seat.picked{--mc:var(--gold)}
.seat.ally::before,.seat.pickable::before,.seat.picked::before{opacity:1}
.seat.pickable::before{animation:pulse 1.4s ease-in-out infinite}
.seat.picked::before{animation:none}