/* ==========================================================================
   طاولة السهرة — نظام التصميم المشترك (v5)
   أسود + بنفسجي، زجاج خفيف، خط Alexandria للعناوين و IBM Plex Sans Arabic للنص
   كل الصفحات تحمّل هذا الملف، وكل صفحة عندها CSS خاص فيها بعده.
   ========================================================================== */
:root{
  color-scheme: dark;
  /* الأسطح */
  --bg:#050507;
  --bg-2:#09090e;
  --s1:#0e0d15;
  --s2:#15131f;
  --s3:#1e1b2c;
  --glass:rgba(255,255,255,.035);
  --glass-2:rgba(255,255,255,.06);
  --glass-3:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --line-3:rgba(255,255,255,.24);
  /* النص */
  --tx:#f5f3ff;
  --tx-2:#b9b3d1;
  --tx-3:#8b85a3;
  /* البنفسجي */
  --v:#7c5cff;
  --v-hi:#a28dff;
  --v-lo:#5a3ee8;
  --v-soft:rgba(124,92,255,.14);
  --v-line:rgba(124,92,255,.45);
  --v-glow:rgba(124,92,255,.42);
  /* الحالات */
  --ok:#34d399;  --ok-soft:rgba(52,211,153,.12);  --ok-line:rgba(52,211,153,.38);
  --bad:#f87171; --bad-soft:rgba(248,113,113,.12); --bad-line:rgba(248,113,113,.4);
  --warn:#fbbf24; --warn-soft:rgba(251,191,36,.12); --warn-line:rgba(251,191,36,.38);
  /* ألوان الألعاب: الأساسي (تعبئة وتوهج) + الفاتح (نص على الأسود) */
  --trivia:#10b981;  --trivia-bright:#6ee7b7;
  --emoji:#ec4899;   --emoji-bright:#f9a8d4;
  --letters:#3b82f6; --letters-bright:#93c5fd;
  --flags:#f59e0b;   --flags-bright:#fcd34d;
  --heads:#06b6d4;   --heads-bright:#67e8f9;
  --char:#f97316;    --char-bright:#fdba74;
  --mafia:#ef4444;   --mafia-bright:#fca5a5;
  /* لوحات فاتحة (خلايا الحروف وألغاز الصور) — تبان واضحة على التلفزيون */
  --paper:#f2f0fb;
  --paper-2:#e4e0f5;
  --paper-ink:#16121f;
  /* المقاسات */
  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:28px;
  --sh-1:inset 0 1px 0 rgba(255,255,255,.05), 0 12px 32px -16px rgba(0,0,0,.7);
  --sh-2:inset 0 1px 0 rgba(255,255,255,.07), 0 30px 70px -24px rgba(0,0,0,.85);
  --ring:0 0 0 3px rgba(124,92,255,.35);
  --f-display:"Alexandria", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --f-body:"IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* أسماء قديمة (عشان أي CSS قديم يبقى شغال) */
  --ink:var(--bg); --ink-deep:#000; --panel:var(--s1); --panel-2:var(--s2); --panel-3:var(--s3);
  --text:var(--tx); --text-dim:var(--tx-2); --text-faint:var(--tx-3);
  --gold:var(--v); --gold-bright:var(--v-hi);
  --border:var(--line); --border-strong:var(--line-2);
  --font-display:var(--f-display); --font-body:var(--f-body); --font-mono:var(--f-mono);
  --radius:var(--r); --shadow:var(--sh-1);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; min-height:100vh; min-height:100dvh;
  background:var(--bg); color:var(--tx);
  font-family:var(--f-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* خلفية الموقع: توهج بنفسجي من فوق + شبكة خفيفة تختفي تحت */
.page-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.page-bg::before{
  content:""; position:absolute; inset:-10% -10% auto; height:780px;
  background:
    radial-gradient(ellipse 52% 60% at 50% 0%, rgba(124,92,255,.30), transparent 70%),
    radial-gradient(ellipse 30% 40% at 82% 8%, rgba(236,72,153,.10), transparent 70%),
    radial-gradient(ellipse 30% 40% at 16% 14%, rgba(56,189,248,.08), transparent 70%);
}
.page-bg::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 0%, #000 0%, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 55% at 50% 0%, #000 0%, transparent 75%);
}
::selection{ background:var(--v); color:#fff; }
a{ color:var(--v-hi); text-underline-offset:3px; }
a:hover{ color:#c4b5ff; }
h1,h2,h3,h4,p{ margin:0; }
ul,ol{ margin:0; padding:0; }
ul{ list-style:none; }
button, input, select, textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:disabled{ cursor:not-allowed; }
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--v-hi); outline-offset:2px; border-radius:8px; }
img{ max-width:100%; }
.ltr{ direction:ltr; unicode-bidi:isolate; font-family:var(--f-mono); }
.num{ font-variant-numeric:tabular-nums; }
.ic{ width:1.25em; height:1.25em; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.22em; }
.ic.fill{ fill:currentColor; stroke:none; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
/* أشرطة التمرير */
*{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-track{ background:transparent; }

/* ---------- الشعار ---------- */
.logo-mark{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:11px; flex-shrink:0;
  background:linear-gradient(145deg, #9b84ff 0%, #6a4bff 48%, #4527d6 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px -4px rgba(124,92,255,.65); }
.logo-mark svg{ width:62%; height:62%; }

/* ---------- الأزرار ---------- */
.btn-primary, .btn-ghost, .btn-soft, .btn-danger{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:44px; padding:11px 20px; border-radius:999px;
  font-family:var(--f-body); font-weight:700; font-size:.95rem; line-height:1.25;
  text-align:center; text-decoration:none; white-space:normal;
  border:1px solid transparent;
  transition:transform .18s var(--ease), background-color .18s, border-color .18s, box-shadow .25s var(--ease), color .18s, opacity .18s;
}
.btn-primary{
  color:#fff; background:linear-gradient(180deg, #8a6dff 0%, #6c4cff 100%);
  border-color:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 8px 24px -8px var(--v-glow), 0 0 0 1px rgba(124,92,255,.5);
}
.btn-primary:hover:not(:disabled){ color:#fff; transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 14px 34px -8px rgba(124,92,255,.65), 0 0 0 1px rgba(162,141,255,.7); }
.btn-primary:active:not(:disabled){ transform:translateY(0); }
.btn-primary:disabled{ background:var(--s3); color:var(--tx-3); box-shadow:none; border-color:var(--line); }
.btn-ghost{ color:var(--tx); background:var(--glass); border-color:var(--line-2); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.btn-ghost:hover:not(:disabled){ color:var(--tx); background:var(--glass-2); border-color:var(--line-3); }
.btn-ghost:disabled{ opacity:.5; }
.btn-soft{ color:var(--v-hi); background:var(--v-soft); border-color:rgba(124,92,255,.32); }
.btn-soft:hover:not(:disabled){ color:#cfc4ff; background:rgba(124,92,255,.22); border-color:var(--v-line); }
.btn-danger{ color:#fecaca; background:var(--bad-soft); border-color:var(--bad-line); }
.btn-danger:hover:not(:disabled){ background:rgba(248,113,113,.2); }
.btn-sm{ min-height:36px; padding:7px 15px; font-size:.86rem; }
.btn-lg{ min-height:54px; padding:14px 28px; font-size:1.05rem; }
.btn-block{ width:100%; }
a.btn-primary, a.btn-ghost, a.btn-soft{ display:inline-flex; }
.icon-btn{
  display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px; padding:0;
  background:var(--glass); border:1px solid var(--line-2); color:var(--tx-2);
  transition:background-color .18s, color .18s, border-color .18s;
}
.icon-btn:hover{ background:var(--glass-2); color:var(--tx); border-color:var(--line-3); }
.icon-btn .ic{ width:20px; height:20px; }

/* ---------- الشارات ---------- */
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px;
  background:var(--glass); border:1px solid var(--line-2); color:var(--tx-2);
  font-size:.82rem; font-weight:600; line-height:1.4; white-space:nowrap;
}
.chip.on, .chip[aria-pressed="true"]{ background:var(--v-soft); border-color:var(--v-line); color:#fff; box-shadow:inset 0 0 0 1px rgba(124,92,255,.25); }
button.chip:hover:not(.on){ color:var(--tx); border-color:var(--line-3); }
.chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--v); box-shadow:0 0 10px var(--v); }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:600; color:var(--tx-2); letter-spacing:0; }
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--v); box-shadow:0 0 12px var(--v); }

/* ---------- البطاقات ---------- */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1);
}
.glass{
  background:rgba(14,13,21,.72); border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
}

/* ---------- الحقول ---------- */
.input, .field-input{
  width:100%; min-width:0; background:rgba(255,255,255,.03); color:var(--tx);
  border:1px solid var(--line-2); border-radius:12px; padding:11px 14px; font-size:.95rem; line-height:1.4;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.input::placeholder{ color:var(--tx-3); }
.input:hover{ border-color:var(--line-3); }
.input:focus{ outline:none; border-color:var(--v); box-shadow:var(--ring); background:rgba(124,92,255,.05); }
select.input{ appearance:none; -webkit-appearance:none; padding-left:34px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23b9b3d1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:left 13px center; }
select.input option{ background:#15131f; color:var(--tx); }
textarea.input{ resize:vertical; min-height:96px; line-height:1.7; }
input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ---------- مفتاح تشغيل ---------- */
.switch{ position:relative; width:48px; height:28px; flex-shrink:0; display:inline-block; }
.switch input{ position:absolute; inset:0; opacity:0; cursor:pointer; margin:0; z-index:1; }
.switch span{ position:absolute; inset:0; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid var(--line-2); transition:background-color .2s, border-color .2s; pointer-events:none; }
.switch span::after{ content:""; position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.4); transition:transform .22s var(--ease); }
.switch input:checked + span{ background:var(--v); border-color:var(--v-hi); }
.switch input:checked + span::after{ transform:translateX(-20px); }
.switch input:focus-visible + span{ box-shadow:var(--ring); }

/* ---------- الإشعار (toast) ---------- */
.toast{
  position:fixed; bottom:24px; left:50%; z-index:200; max-width:calc(100vw - 24px);
  transform:translate(-50%, 16px); opacity:0; visibility:hidden; pointer-events:none;
  padding:11px 20px; border-radius:999px; text-align:center;
  background:rgba(21,19,31,.92); color:var(--tx); border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.8); font-weight:600; font-size:.9rem;
  transition:transform .3s var(--ease), opacity .3s, visibility .3s;
}
.toast.show{ transform:translate(-50%, 0); opacity:1; visibility:visible; }

/* ---------- عناوين الأقسام ---------- */
.h-display{ font-family:var(--f-display); font-weight:800; line-height:1.15; letter-spacing:0; text-wrap:balance; }
.grad{ background:linear-gradient(90deg, #ffffff 0%, #d9d0ff 35%, #a28dff 70%, #7c5cff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.muted{ color:var(--tx-2); }
.faint{ color:var(--tx-3); }

/* ---------- صفحات النصوص (الشروط/الخصوصية/حقوق الصور) ---------- */
.doc{ position:relative; z-index:1; max-width:860px; margin:0 auto; padding:28px 18px 72px; }
.doc-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:34px; }
.doc-brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--tx); font-family:var(--f-display); font-weight:700; font-size:1.05rem; }
.doc-brand:hover{ color:var(--tx); }
.doc-head{ text-align:center; margin-bottom:28px; }
.doc-head h1{ font-family:var(--f-display); font-weight:800; font-size:clamp(2rem, 6vw, 3rem); line-height:1.2; margin:14px 0 8px; }
.doc-head .meta{ color:var(--tx-3); font-size:.88rem; }
.doc .card{ padding:22px 24px; margin-bottom:14px; }
.doc h2{ font-family:var(--f-display); font-weight:700; font-size:1.12rem; margin:0 0 8px; color:#fff; }
.doc p{ color:var(--tx-2); margin:0 0 10px; line-height:1.9; }
.doc p:last-child{ margin-bottom:0; }
.doc ul, .doc ol{ color:var(--tx-2); padding-inline-start:22px; line-height:1.9; }
.doc ul{ list-style:disc; }
.doc li{ margin-bottom:4px; }
.doc li::marker{ color:var(--v); }
.doc b, .doc strong{ color:var(--tx); }
.doc-foot{ text-align:center; margin-top:30px; color:var(--tx-3); font-size:.88rem; }
.doc-foot .links{ margin-top:14px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.doc-foot .links a{ color:var(--tx-2); text-decoration:none; }
.doc-foot .links a:hover{ color:#fff; }