:root{
  /* الألوان تُدار مركزياً من theme.js */
  --blue:#3d8ef8; --red:#f2495b;
}
*{box-sizing:border-box;}
body{ margin:0; background:var(--bg); color:var(--text); font-family:'Tajawal',sans-serif; line-height:1.5; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 24px 60px; }

header.gamebar{ display:flex; align-items:center; justify-content:center; padding:22px 0; gap:12px; flex-wrap:wrap; }
/* زري الرجوع والإعدادات مثبّتين بأقصى طرف الشاشة الفعلي (position:fixed) بدل ما ينحصروا
   بعرض .wrap (1180px) — هيك يضلوا بأقصى الحافة حتى بالشاشات الواسعة، مو بس بحافة العمود النصّي */
.back-btn{ position:fixed; top:22px; inset-inline-start:20px; z-index:41; display:flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; background:var(--surface); border:1px solid var(--border-strong); color:var(--text-dim); text-decoration:none; font-weight:700; font-size:14px; }
.back-btn svg{ width:16px;height:16px; }
.game-title{ display:flex; align-items:center; gap:10px; }
.game-title h1{ font-family:'Lalezar',sans-serif; font-size:26px; font-weight:400; margin:0; -webkit-text-stroke:.6px color-mix(in srgb,var(--accent-2) 35%,transparent); text-shadow:0 0 14px rgba(232,160,15,.5); }
.game-title svg{ width:22px;height:22px; color:var(--accent-2); }
.settings-btn{ position:fixed; top:22px; inset-inline-end:20px; z-index:41; width:42px;height:42px; border-radius:50%; background:var(--surface); border:1px solid var(--border-strong); color:var(--text-dim); display:flex;align-items:center;justify-content:center; cursor:pointer; }
.settings-btn svg{ width:19px;height:19px; }
@media (max-width:720px){ .back-btn, .settings-btn{ top:14px; } }

.game-layout{ display:grid; grid-template-columns:260px 1fr 260px; gap:20px; align-items:start; transition:grid-template-columns .28s ease; }
.panel{ background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:18px; transition:border-color .3s ease, box-shadow .35s ease, opacity .25s ease, transform .25s ease; }
/* لوحة قابلة للطي (مشاركين) بانتقال ناعم (تلاشي+تصغير) قبل ما تنسحب من الشبكة فعلياً — نفس روح انميشن الدرج العائم بحرب المناقيل */
.panel.panel-hiding{ opacity:0; transform:scale(.96); pointer-events:none; }
.panel:hover{ border-color:var(--border-strong); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent), 0 0 34px -10px color-mix(in srgb,var(--accent-2) 28%,transparent); }
.panel h2{ font-size:13px; color:var(--text-faint); margin:0 0 14px; font-weight:700; display:flex; align-items:center; gap:6px; }
.panel h2 svg{ width:14px;height:14px; }

/* زر إخفاء/إظهار شات البث — يُضاف تلقائياً جنب عنوان أي لوحة فيها شات (كل الألعاب) */
.chat-toggle-btn{ margin-inline-start:auto; flex-shrink:0; width:26px; height:26px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid var(--border-strong); color:var(--text-dim); border-radius:8px; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease; }
.chat-toggle-btn svg{ width:15px; height:15px; }
.chat-toggle-btn:hover{ background:var(--surface-2); color:var(--text); }
.chat-toggle-btn.chat-hidden{ color:var(--accent-2); border-color:var(--accent-2); }

/* زر طي لوحتي المشاركين والشات مع بعض دفعة وحدة (يُضاف تلقائياً بكل الألعاب من gamecore.js) */
.panels-fold-btn.is-folded{ color:var(--accent-2); border-color:var(--accent-2); }
.game-layout.panels-folded{ grid-template-columns:1fr !important; }

/* نسخة عائمة من نفس الزر — تُستخدم لما اللوحة تكون درج عائم (.side-panel) فوق المحتوى بدل عمود بالشبكة.
   موقعه محسوب بـ CSS ثابت (مو بجافاسكريبت) عشان يضل موثوق حتى لو اللوحة انتقلت بالـ DOM لـ body:
   يلزق بحافة اللوحة (عرضها 300px أو 88vw بالشاشات الصغيرة جداً) ويتحرك وياها بانميشن ناعم لما تنطوي. */
.panels-fold-btn--floating{ position:fixed; top:22px; inset-inline-end:calc(min(300px, 88vw) + 12px); z-index:41; transition:inset-inline-end .32s ease; }
.panels-fold-btn--floating.is-folded{ inset-inline-end:8px; }
@media (max-width:720px){ .panels-fold-btn--floating{ top:14px; } }

/* لما فيه لوحة عائمة، زر الإعدادات ينتقل لنفس جهة زر الرجوع (الجهة الثانية عن اللوحة) وينزل
   تحته بدل ما يضل بجهة اللوحة، عشان ما يتغطى تحتها بعد ما صارت توصل لحتى فوق الصفحة */
body.has-side-panel .settings-btn:not(.panels-fold-btn){ inset-inline-end:auto; inset-inline-start:20px; top:74px; }
@media (max-width:720px){ body.has-side-panel .settings-btn:not(.panels-fold-btn){ top:64px; } }

/* ====== لوحة موحّدة عائمة (مشاركين + شات مع بعض بلوحة وحدة) — نفس تصميم حرب المناقيل بالضبط،
   تتفعّل تلقائياً (dwSetupPanelsFold/unifySidePanel بـ gamecore.js) بأي لعبة عندها عمود مشاركين
   ولوحة شات منفصلين أصلاً بالـ HTML، فتدمجهم بلوحة عائمة وحدة تطفو فوق المحتوى بدل ما تاخذ من
   عرضه، وتُقفل/تفتح بانزلاق (drawer) بدل ما تكون عمود ثابت بالشبكة أو لوحة مثبّتة لحالها. ====== */
.game-layout.has-side-panel{ display:block; padding:0; position:relative; }
.game-layout.has-side-panel .stage-col{ width:100%; min-width:0; }
/* توصل لحتى فوق الصفحة تماماً (top:0) بدل ما تبدأ تحت الشريط وتسيب فراغ فوقها */
.side-panel{ position:fixed; top:0; bottom:0; inset-inline-end:0; width:300px; max-width:88vw; background:var(--surface); border-inline-start:1px solid var(--border-strong); box-shadow:-12px 0 34px rgba(0,0,0,.5); z-index:40; padding:16px 16px 14px; display:flex; flex-direction:column; transform:translateX(0); transition:transform .32s ease; }
html[dir="rtl"] .side-panel.side-hidden{ transform:translateX(-105%); }
html:not([dir="rtl"]) .side-panel.side-hidden{ transform:translateX(105%); }
.side-panel .participant-list{ flex:1; min-height:0; max-height:none; }
.side-chat-mini{ flex-shrink:0; display:flex; flex-direction:column; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); max-height:220px; }
.side-chat-mini h2{ margin-bottom:8px; }
.side-chat-mini .chat-feed{ flex:1; min-height:0; max-height:170px; }


.add-form{ display:flex; gap:6px; margin-bottom:14px; }
.add-form input{ flex:1; min-width:0; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:10px; padding:9px 10px; color:var(--text); font-family:'Tajawal'; font-size:13px; outline:none; }
.add-form input::placeholder{ color:var(--text-faint); }
.add-form button{ background:var(--accent); color:var(--accent-ink); border:none; border-radius:10px; padding:0 14px; font-weight:800; cursor:pointer; font-size:13px; }
.add-form button:disabled{ background:var(--surface-2); color:var(--text-faint); }
.form-error{ font-size:11.5px; color:var(--accent-3); margin:-8px 0 12px; display:none; }

/* padding-top كافية عشان فقاعة الشات تبان كاملة فوق أول مشارك بالقائمة بدل ما تتقص أو تطلع برا حدود اللوحة (overflow-y:auto كان يقصّها) */
.participant-list{ display:flex; flex-direction:column; gap:8px; max-height:420px; overflow-y:auto; overflow-x:visible; padding-top:36px; }
.p-row{ display:flex; align-items:center; gap:9px; background:var(--surface-2); border-radius:12px; padding:8px 10px; position:relative; border:1px solid transparent; transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
/* ── حاوية الأفاتار: لازم تكون نسبية عشان فقاعة الشات والإطار يتموضعوا فوقها/حولها ── */
.p-avatar-wrap{ position:relative; flex-shrink:0; }
.p-avatar{ width:30px;height:30px; border-radius:50%; display:flex;align-items:center;justify-content:center; font-weight:800; font-size:12.5px; color:var(--accent-ink); flex-shrink:0; overflow:hidden; position:relative; z-index:1; transition:box-shadow .25s ease, filter .5s ease; }
.p-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.p-name{ flex:1; min-width:0; font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.p-remove{ width:22px;height:22px; border-radius:50%; border:none; background:transparent; color:var(--text-faint); cursor:pointer; display:flex;align-items:center;justify-content:center; flex-shrink:0; }
.p-remove:hover{ color:var(--text); background:var(--surface-3); }
.p-remove svg{ width:13px;height:13px; }
.empty-note{ font-size:12.5px; color:var(--text-faint); text-align:center; padding:20px 0; }
.p-score{ font-size:11.5px; font-weight:800; color:var(--accent-2); flex-shrink:0; }
.p-row.out{ opacity:.4; filter:grayscale(1); }

/* رقم كل مشارك بالقائمة الجانبية — نفس ترقيم لوحة الدور، مكبّر عشان يبان واضح بالبث */
.p-num{ background:var(--accent-2); color:var(--accent-ink); font-weight:900; font-size:16px; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,.4); }

/* ====== دخول مشارك جديد: إطار مضيء يلف الصورة + بانر منزلق يعرّف بيه لحظة انضمامه ====== */
.p-row.p-row-join{ animation: dwRowJoinPop .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes dwRowJoinPop{
  0%{ transform:translateX(24px) scale(.9); opacity:0; background:color-mix(in srgb,var(--accent-2) 35%,var(--surface-2)); }
  55%{ opacity:1; }
  100%{ transform:translateX(0) scale(1); opacity:1; background:var(--surface-2); }
}
.p-avatar.avatar-join-frame{ box-shadow:0 0 0 3px var(--accent-2), 0 0 18px 4px color-mix(in srgb,var(--accent-2) 65%,transparent); animation: dwAvatarFrameFade 2.2s ease forwards; }
@keyframes dwAvatarFrameFade{
  0%{ box-shadow:0 0 0 3px var(--accent-2), 0 0 18px 4px color-mix(in srgb,var(--accent-2) 65%,transparent); }
  70%{ box-shadow:0 0 0 3px var(--accent-2), 0 0 18px 4px color-mix(in srgb,var(--accent-2) 65%,transparent); }
  100%{ box-shadow:0 0 0 0 transparent, 0 0 0 0 transparent; }
}
.p-join-banner{ position:absolute; inset:0; border-radius:12px; display:flex; align-items:center; justify-content:center; gap:6px; background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 92%,transparent),color-mix(in srgb,var(--accent-2) 92%,transparent)); color:var(--accent-ink); font-weight:900; font-size:12.5px; z-index:3; pointer-events:none; opacity:0; animation: dwJoinBannerShow 1.7s ease forwards; }
@keyframes dwJoinBannerShow{
  0%{ opacity:0; transform:scale(.85); }
  12%{ opacity:1; transform:scale(1); }
  78%{ opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.02); }
}

/* ====== فقاعة آخر رسالة كتبها المشارك بالشات — تبان فوق صورته مباشرة داخل قائمة المشاركين ====== */
.p-bubble{ position:absolute; bottom:calc(100% + 6px); right:50%; transform:translateX(50%) translateY(6px) scale(.85); max-width:150px; width:max-content; background:var(--surface-3); border:1px solid var(--accent-2); color:var(--text); font-size:11.5px; font-weight:600; line-height:1.35; padding:6px 10px; border-radius:12px 12px 12px 3px; box-shadow:0 8px 18px -6px rgba(0,0,0,.5); opacity:0; pointer-events:none; z-index:4; transition:opacity .18s ease, transform .18s ease; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.p-bubble::after{ content:''; position:absolute; top:100%; right:8px; border:5px solid transparent; border-top-color:var(--accent-2); }
.p-bubble.show{ opacity:1; transform:translateX(50%) translateY(0) scale(1); }

/* ====== طرد "القنص" — من نفس صف المشارك بالقائمة مباشرة (مش صفحة مستقلة): يهتز ثم "يطيح" وينزلق برة ====== */
.p-row.row-falling{ animation: dwRowFall 1.3s cubic-bezier(.55,.06,.68,.19) forwards; pointer-events:none; z-index:2; }
.p-row.row-falling .p-avatar{ filter:grayscale(.85) brightness(.8); }
@keyframes dwRowFall{
  0%{ transform:translateY(0) rotate(0deg); opacity:1; }
  18%{ transform:translateY(-5px) rotate(-3deg); opacity:1; }
  40%{ transform:translateY(4px) rotate(4deg); opacity:1; }
  100%{ transform:translateY(90px) rotate(24deg); opacity:0; }
}

/* ====== إنعاش — من نفس صف/بطاقة الهدف: توهّج أخضر وترتفع وتختفي (عكس أنيميشن القنص) ====== */
.p-row.row-reviving{ animation: dwReviveFloat 1.2s ease forwards; pointer-events:none; z-index:2; }
.p-row.row-reviving .p-avatar{ box-shadow:0 0 0 3px rgba(62,207,110,.55), 0 0 18px 4px rgba(62,207,110,.6); }
@keyframes dwReviveFloat{
  0%{ transform:translateY(0) scale(1); opacity:1; }
  30%{ transform:translateY(-5px) scale(1.08); opacity:1; }
  60%{ transform:translateY(-14px) scale(1.1); opacity:1; }
  100%{ transform:translateY(-70px) scale(.92); opacity:0; }
}

.chat-feed{ display:flex; flex-direction:column; gap:10px; max-height:420px; overflow-y:auto; }
.chat-msg{ font-size:12.5px; }
.chat-msg .user{ font-weight:800; }
.chat-msg .txt{ color:var(--text-dim); }

.settings-drawer{ position:fixed; top:0; left:0; height:100%; width:300px; background:var(--surface); border-left:1px solid var(--border-strong); z-index:50; padding:26px 22px; transform:translateX(-100%); transition:transform .3s ease; overflow-y:auto; }
.settings-drawer.open{ transform:translateX(0); }
.settings-drawer h3{ font-family:'Lalezar',sans-serif; font-size:22px; font-weight:400; margin:0 0 22px; }
.setting-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--border); gap:10px; }
.setting-row label{ font-size:14px; font-weight:600; }
.setting-row small{ display:block; color:var(--text-faint); font-weight:400; font-size:11.5px; margin-top:3px; }
.settings-save-btn{ width:100%; margin-top:20px; background:var(--accent); color:var(--accent-ink); border:none; border-radius:999px; padding:13px 20px; font-weight:800; font-size:14.5px; cursor:pointer; transition:transform .15s ease, opacity .15s ease; }
.settings-save-btn:active{ transform:scale(.97); }
.settings-save-btn.saved{ background:#39c26b; }
.switch{ position:relative; width:44px; height:25px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.slider{ position:absolute; inset:0; background:var(--surface-2); border-radius:999px; border:1px solid var(--border-strong); cursor:pointer; transition:.2s; }
.slider:before{ content:""; position:absolute; width:19px; height:19px; left:2px; top:2px; background:var(--text-dim); border-radius:50%; transition:.2s; }
input:checked + .slider{ background:var(--accent); }
input:checked + .slider:before{ transform:translateX(-19px); background:var(--accent-ink); }
.duration-input{ width:60px; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:8px; color:var(--text); text-align:center; padding:6px; font-family:'Tajawal'; flex-shrink:0; }
.drawer-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:40; display:none; }
.drawer-overlay.open{ display:block; }

.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:60; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-card{ background:var(--surface); border:1px solid var(--border-strong); border-radius:24px; max-width:460px; padding:34px 30px; text-align:center; animation:modalIn .5s cubic-bezier(.2,.9,.3,1.2); }
@keyframes modalIn{ from{opacity:0; transform:scale(.85) translateY(20px);} to{opacity:1; transform:scale(1) translateY(0);} }
.modal-icon{ width:64px;height:64px; border-radius:50%; background:var(--surface-2); display:flex;align-items:center;justify-content:center; color:var(--accent-2); margin:0 auto 20px; }
.modal-icon svg{ width:32px;height:32px; }

/* ====== بانر فني بأعلى نافذة شرح كل لعبة — يتلوّن تلقائياً مع ثيم الموقع (نفس فلتر بطاقات games.html) ====== */
.modal-banner{ width:100%; max-width:400px; height:140px; margin:-6px auto 18px; border-radius:16px; overflow:hidden; }
.modal-banner img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) var(--art-filter) saturate(.95); }
.modal-card h2{ font-family:'Lalezar',sans-serif; font-size:26px; margin:0 0 14px; font-weight:400; }
.modal-card ul{ text-align:right; padding:0 18px; margin:0 0 24px; color:var(--text-dim); font-size:13.5px; display:flex; flex-direction:column; gap:10px; }
.modal-card button{ background:var(--accent); color:var(--accent-ink); border:none; border-radius:999px; padding:14px 34px; font-weight:800; font-size:15px; cursor:pointer; }

.winner-overlay{ position:fixed; inset:0; background:rgba(6,4,3,.92); z-index:70; display:none; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:20px; }
.winner-avatar{ width:130px;height:130px; border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:44px; font-weight:800; color:var(--accent-ink); margin-bottom:22px; box-shadow:0 0 0 8px rgba(252,193,13,.2); overflow:hidden; }
.winner-avatar img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.winner-title{ font-family:'Lalezar',sans-serif; font-size:34px; color:var(--accent-2); margin:0 0 8px; -webkit-text-stroke:1px color-mix(in srgb,var(--accent-2) 40%,transparent); text-shadow:0 0 24px color-mix(in srgb,var(--accent) 60%,transparent); }
.winner-sub{ color:var(--text-dim); font-size:14px; margin-bottom:26px; }
.winner-overlay button{ background:var(--accent); color:var(--accent-ink); border:none; border-radius:999px; padding:14px 34px; font-weight:800; font-size:15px; cursor:pointer; }

/* ====== احتفال الفوز المشترك (dwWinCelebration بـ gamecore.js) — توهج + نبضة على صورة الفائز ====== */
.winner-overlay.mega-win{ animation: dwFlashBg .6s ease; }
@keyframes dwFlashBg{ 0%{ background:rgba(255,215,0,.35); } 100%{ background:rgba(6,4,3,.92); } }
.winner-overlay.mega-win .winner-avatar{ animation: dwWinnerPulse 1s ease-in-out infinite; }
@keyframes dwWinnerPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
.top-list{ display:flex; flex-direction:column; gap:8px; width:100%; max-width:320px; margin-bottom:22px; }
.top-list .t-row{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border-strong); border-radius:12px; padding:9px 14px; }
.top-list .t-row .rank{ font-family:'Lalezar',sans-serif; color:var(--accent-2); width:20px; }
.top-list .t-row .nm{ flex:1; text-align:right; font-weight:700; font-size:13.5px; }
.top-list .t-row .sc{ font-weight:800; color:var(--accent-2); font-size:13px; }

@media (max-width:980px){
  .game-layout{ grid-template-columns:1fr; }
  .panel{ order:2; }
  .stage-col{ order:1; }
}

/* ====== انميشن الإقصاء الكرتوني المشترك (تُستخدم بكل لعبة فيها طرد/إقصاء) ====== */
.elimshow-overlay{ position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; background:rgba(10,8,6,0); opacity:0; pointer-events:none; transition:background .25s ease, opacity .25s ease; }
.elimshow-overlay.show{ opacity:1; pointer-events:auto; background:rgba(10,8,6,.78); backdrop-filter:blur(6px); }
.elimshow-card{ background:var(--surface); border:1px solid var(--border-strong); border-radius:28px; padding:34px 44px 26px; text-align:center; transform:scale(.4) translateY(40px); opacity:0; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.elimshow-overlay.show .elimshow-card{ animation:elimCardIn .5s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes elimCardIn{ 0%{ transform:scale(.3) translateY(60px) rotate(-8deg); opacity:0; } 60%{ transform:scale(1.08) translateY(-6px) rotate(2deg); opacity:1; } 100%{ transform:scale(1) translateY(0) rotate(0deg); opacity:1; } }
.elimshow-tag{ font-family:'Lalezar',sans-serif; font-size:16px; letter-spacing:2px; color:var(--accent-2); margin-bottom:18px; display:inline-block; animation:elimTagWiggle 1s ease infinite; }
@keyframes elimTagWiggle{ 0%,100%{ transform:rotate(-4deg);} 50%{ transform:rotate(4deg);} }
.elimshow-avatar-wrap{ position:relative; width:150px; height:150px; margin:0 auto 16px; }
.elimshow-avatar{ width:150px; height:150px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:56px; font-weight:900; color:var(--accent-ink); overflow:hidden; box-shadow:0 0 0 6px var(--surface-2), 0 8px 26px rgba(0,0,0,.4); transition:filter .6s ease; position:relative; z-index:1; }
.elimshow-avatar img{ width:100%; height:100%; object-fit:cover; }
.elimshow-avatar.gray{ filter:grayscale(1) brightness(.7); }
.elimshow-avatar.shake{ animation:elimShake .5s ease; }
@keyframes elimShake{ 0%,100%{ transform:translate(0,0) rotate(0);} 15%{ transform:translate(-7px,3px) rotate(-10deg);} 30%{ transform:translate(7px,-3px) rotate(10deg);} 45%{ transform:translate(-5px,2px) rotate(-7deg);} 60%{ transform:translate(5px,-2px) rotate(7deg);} 75%{ transform:translate(-3px,0) rotate(-3deg);} 90%{ transform:translate(2px,0) rotate(2deg);} }
.elimshow-reticle{ position:absolute; inset:-26px; opacity:0; transform:scale(2.6) rotate(-25deg); pointer-events:none; z-index:2; }
.elimshow-reticle .ring{ position:absolute; inset:0; border:3px dashed var(--accent-3); border-radius:50%; }
.elimshow-reticle .ring2{ inset:16px; border-color:var(--accent-2); border-style:solid; opacity:.55; }
.elimshow-reticle .cross{ position:absolute; background:var(--accent-3); box-shadow:0 0 6px var(--accent-2); border-radius:2px; }
.elimshow-reticle .cross.v{ left:50%; top:8px; bottom:8px; width:3px; transform:translateX(-50%); }
.elimshow-reticle .cross.h{ top:50%; left:8px; right:8px; height:3px; transform:translateY(-50%); }
.elimshow-overlay.show .elimshow-reticle{ animation:elimReticleIn .55s cubic-bezier(.25,.85,.3,1.3) forwards; }
@keyframes elimReticleIn{ 0%{ opacity:0; transform:scale(2.6) rotate(-25deg);} 55%{ opacity:1; transform:scale(.85) rotate(6deg);} 80%{ transform:scale(1.08) rotate(-3deg);} 100%{ opacity:1; transform:scale(1) rotate(0deg);} }
.elimshow-reticle.lock{ animation:elimReticlePulse .45s ease infinite; }
@keyframes elimReticlePulse{ 0%,100%{ filter:drop-shadow(0 0 3px var(--accent-2)); } 50%{ filter:drop-shadow(0 0 14px var(--accent-2)); } }
.elimshow-burst{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:74px; opacity:0; transform:scale(.3) rotate(-15deg); pointer-events:none; z-index:3; }
.elimshow-burst.pop{ animation:elimBurstPop .55s ease; }
@keyframes elimBurstPop{ 0%{ opacity:0; transform:scale(.2) rotate(-25deg);} 35%{ opacity:1; transform:scale(1.5) rotate(10deg);} 100%{ opacity:0; transform:scale(2.2) rotate(18deg);} }
.elimshow-stamp{ position:absolute; bottom:-8px; left:50%; font-family:'Lalezar',sans-serif; font-size:15px; color:#fff; background:linear-gradient(135deg,#f2495b,#c0293a); padding:6px 18px; border-radius:8px; border:2px solid rgba(255,255,255,.25); transform:translate(-50%,10px) scale(0) rotate(-18deg); opacity:0; letter-spacing:1px; box-shadow:0 4px 14px rgba(0,0,0,.4); z-index:4; white-space:nowrap; }
.elimshow-stamp.stamp-in{ animation:elimStampIn .45s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes elimStampIn{ 0%{ transform:translate(-50%,10px) scale(0) rotate(-18deg); opacity:0;} 70%{ transform:translate(-50%,-4px) scale(1.15) rotate(-12deg); opacity:1;} 100%{ transform:translate(-50%,0) scale(1) rotate(-14deg); opacity:1;} }
.elimshow-name{ font-family:'Lalezar',sans-serif; font-size:26px; color:var(--text); margin-top:2px; }
.elimshow-caption{ font-size:13px; color:var(--text-dim); margin-top:4px; }

/* صف مشارك قابل للاستهداف (وضع اختيار الهدف) */
.p-row.targetable{ cursor:pointer; border:1px solid var(--accent-3); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-2) 30%,transparent); }
.p-row.targetable:hover{ background:var(--surface-3); transform:translateX(-2px); }
.p-row.is-turn{ border:1px solid var(--accent-2); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-2) 45%,transparent), 0 0 18px -6px color-mix(in srgb,var(--accent-2) 60%,transparent); }
.p-badge{ font-size:11px; font-weight:800; color:var(--accent-ink); background:var(--accent-2); border-radius:999px; padding:2px 8px; flex-shrink:0; }

/* ====== بوابة تسجيل الدخول (ألوان تويتش) ====== */
.login-gate{ display:none; flex-direction:column; align-items:center; text-align:center; padding:110px 20px 140px; }
.login-gate .gate-icon{ width:74px;height:74px; border-radius:50%; background:rgba(145,70,255,.14); border:1px solid rgba(145,70,255,.4); display:flex;align-items:center;justify-content:center; color:#9146ff; margin-bottom:26px; }
.login-gate .gate-icon svg{ width:32px;height:32px; }
.login-gate h2{ font-family:'Lalezar',sans-serif; font-weight:400; font-size:26px; margin:0 0 10px; }
.login-gate p{ color:var(--text-dim); font-size:14px; margin:0 0 28px; max-width:340px; }
.twitch-login-btn{ display:flex; align-items:center; gap:10px; background:linear-gradient(135deg,#9146ff,#772ce8); color:#fff; border:none; border-radius:999px; padding:14px 30px; font-family:'Tajawal'; font-weight:800; font-size:14.5px; cursor:pointer; box-shadow:0 10px 30px -10px rgba(145,70,255,.7); }
.twitch-login-btn svg{ width:20px;height:20px; }

/* ====== إشعار "تطابق!" المشترك لكل الألعاب ====== */
.match-toast-stack{ position:fixed; top:88px; left:50%; transform:translateX(-50%); z-index:300; display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none; width:100%; padding:0 14px; }
.match-toast{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--accent); border-radius:16px; padding:9px 18px; box-shadow:0 10px 28px rgba(0,0,0,.4); opacity:0; transform:translateY(-18px) scale(.92); transition:opacity .35s ease, transform .35s ease; max-width:94vw; }
.match-toast.show{ opacity:1; transform:translateY(0) scale(1); }
.match-toast.hide{ opacity:0; transform:translateY(-12px) scale(.96); }
.match-toast .mt-avatar{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--accent-ink); overflow:hidden; flex-shrink:0; }
.match-toast .mt-avatar img{ width:100%; height:100%; object-fit:cover; }
.match-toast .mt-body{ display:flex; flex-direction:column; gap:4px; text-align:right; min-width:0; }
/* لما الاسم أو النص يكون طويل، يوقف كلمة تحت كلمة بدل ما ينقطع بثلاث نقاط أو يطلع بره الكرت */
.match-toast .mt-name{ font-weight:800; color:var(--accent-2); font-size:14px; white-space:normal; overflow-wrap:anywhere; }
.match-toast .mt-caption{ font-size:12px; color:var(--text-dim); white-space:normal; overflow-wrap:anywhere; }
.match-toast .mt-items{ display:flex; gap:6px; flex-wrap:wrap; }
.match-toast .mt-item-img{ width:32px; height:32px; object-fit:contain; border-radius:4px; }
.match-toast .mt-item-emoji{ font-size:22px; line-height:1; }
.match-toast .mt-item-label{ background:var(--surface-2); border:1px solid var(--border-strong); border-radius:8px; padding:3px 9px; font-size:12.5px; font-weight:700; color:var(--accent-2); white-space:nowrap; }
@media (max-width:640px){ .match-toast-stack{ top:70px; } .match-toast{ padding:7px 14px; gap:9px; } .match-toast .mt-avatar{ width:36px;height:36px; } }
.match-toast-inline{ width:100%; box-sizing:border-box; max-width:100%; margin-top:10px; transform:translateY(-8px) scale(.97); }
.match-toast-inline.show{ transform:translateY(0) scale(1); }

/* ====== أنيميشن "تعتيم القنص" — قبل ما يصير أنيميشن السقوط: الشاشة كلها تسود ما عدا المنطقة المحيطة بالشخص المستهدف، وتيجي بؤرة قنص وتطلق عليه ====== */
.sniper-blackout{ position:fixed; inset:0; z-index:400; pointer-events:none; opacity:0; transition:opacity .22s ease; }
.sniper-blackout.show{ opacity:1; }
.sniper-blackout.hide{ opacity:0; transition:opacity .28s ease; }
.sniper-blackout::before{ content:''; position:absolute; inset:0; }
.sniper-hole{ position:absolute; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 9999px rgba(4,3,2,.94), 0 0 30px 6px rgba(255,60,50,.25); }
.sniper-blackout.flash .sniper-hole{ animation: dwSniperHoleFlash .22s ease-out; }
@keyframes dwSniperHoleFlash{ 0%{ box-shadow:0 0 0 9999px rgba(4,3,2,.94), 0 0 60px 30px rgba(255,255,255,.85); } 100%{ box-shadow:0 0 0 9999px rgba(4,3,2,.94), 0 0 30px 6px rgba(255,60,50,.25); } }
.sniper-reticle{ position:absolute; opacity:0; transform:translate(-50%,-50%) scale(2.6); animation: dwReticleZoom .5s cubic-bezier(.2,.9,.3,1) .15s forwards; }
@keyframes dwReticleZoom{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(2.6); } 60%{ opacity:1; } 100%{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
.sr-ring{ position:absolute; inset:0; border:2px solid rgba(255,60,50,.85); border-radius:50%; box-shadow:0 0 14px rgba(255,50,40,.6); }
.sr-cross{ position:absolute; background:rgba(255,60,50,.85); }
.sr-cross-h{ top:50%; left:-16px; right:-16px; height:2px; transform:translateY(-1px); }
.sr-cross-v{ left:50%; top:-16px; bottom:-16px; width:2px; transform:translateX(-1px); }
.sr-dot{ position:absolute; top:50%; left:50%; width:6px; height:6px; margin:-3px 0 0 -3px; background:#ff3c32; border-radius:50%; box-shadow:0 0 10px 3px rgba(255,50,40,.85); }
.sniper-reticle.sr-fire .sr-ring{ animation: dwReticlePulse .22s ease-out; }
@keyframes dwReticlePulse{ 0%{ transform:scale(1); } 50%{ transform:scale(1.4); box-shadow:0 0 28px rgba(255,60,50,.95); } 100%{ transform:scale(1); } }
.sniper-reticle.sr-fire .sr-dot{ animation: dwDotFlash .22s ease-out; }
@keyframes dwDotFlash{ 0%{ transform:scale(1); } 50%{ transform:scale(2.6); } 100%{ transform:scale(1); } }
/* اهتزاز خفيف للشاشة كاملة لحظة إطلاق "الطلقة" */
@keyframes dwScreenShake{ 0%,100%{ transform:translate(0,0); } 20%{ transform:translate(-4px,2px); } 40%{ transform:translate(4px,-2px); } 60%{ transform:translate(-3px,1px); } 80%{ transform:translate(3px,-1px); } }
body.dw-sniper-shake{ animation: dwScreenShake .25s ease; }