/* ==========================================================================
   سهرتكم — طبقة "بريق" شاملة: انيميشن، توهج، وحركات دقيقة على كل الموقع
   تعتمد بالكامل على متغيرات CSS الحالية (--accent, --surface...) عشان
   تتناسق تلقائياً مع أي ثيم لون مفعّل.
   ========================================================================== */

*{ scroll-behavior:smooth; }

::selection{ background:var(--accent); color:var(--accent-ink); }

/* ---------- سكرول بار مخصص ---------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--accent),var(--accent-deep)); border-radius:99px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--accent-2); }
*{ scrollbar-width:thin; scrollbar-color:var(--accent) transparent; }

/* ---------- ظهور تدريجي عند تحميل الصفحة (CSS بحت، ما يعتمد على JS) ---------- */
body{ animation:dwBodyFadeIn .55s ease both; }
@keyframes dwBodyFadeIn{ from{ opacity:0; } to{ opacity:1; } }

.wrap > *{ animation:dwRise .7s cubic-bezier(.22,.8,.32,1) both; }
.wrap > *:nth-child(1){ animation-delay:.02s; }
.wrap > *:nth-child(2){ animation-delay:.07s; }
.wrap > *:nth-child(3){ animation-delay:.12s; }
.wrap > *:nth-child(4){ animation-delay:.17s; }
.wrap > *:nth-child(n+5){ animation-delay:.2s; }
@keyframes dwRise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

/* ظهور تدريجي عند الدخول بمجال الرؤية (مفعّل بجافاسكربت polish.js) */
.dw-reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,.8,.32,1), transform .7s cubic-bezier(.22,.8,.32,1); }
.dw-reveal.dw-visible{ opacity:1; transform:translateY(0); }

/* ---------- توهج نابض على العناصر الأساسية (اللوغو، الأزرار، الحالة الفعّالة) ---------- */
@keyframes dwPulseGlow{
  0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 35%,transparent), 0 8px 24px -8px color-mix(in srgb,var(--accent) 45%,transparent); }
  50%{ box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 0%,transparent), 0 10px 30px -6px color-mix(in srgb,var(--accent) 65%,transparent); }
}
.btn-primary, .twitch-login-btn, .restart-btn, button#introStart, .modal-card button,
button[id="continueBtn"], .winner-overlay button:first-of-type{
  position:relative; overflow:hidden;
  transition:transform .22s cubic-bezier(.22,.8,.32,1), box-shadow .3s ease, filter .3s ease;
  animation:dwPulseGlow 2.8s ease-in-out infinite;
}
.btn-primary:hover, .twitch-login-btn:hover, .restart-btn:hover, button#introStart:hover,
.modal-card button:hover, .chip:hover, .icon-btn:hover{
  transform:translateY(-3px) scale(1.03);
  filter:brightness(1.08);
}
.btn-primary:active, .restart-btn:active, .twitch-login-btn:active{ transform:translateY(-1px) scale(.98); }

/* لمعة تمر فوق الأزرار الأساسية */
.btn-primary::after, .twitch-login-btn::after, .restart-btn::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg);
  animation:dwShine 3.2s ease-in-out infinite;
}
@keyframes dwShine{ 0%{ left:-60%; } 35%{ left:130%; } 100%{ left:130%; } }

/* ---------- تأثير موجي (ripple) عند الضغط — يضيفه polish.js ----------
   ملاحظة: ما نحط position:relative هون بالـ CSS لوحدها، لأنها كانت تفرض نفسها حتى
   على أزرار عندها أصلاً position:fixed (متل زر طي لوحة المشاركين العائم)، فتلغي
   الـ fixed وتخلي الزر يطفو بمكان غلط بالصفحة (وتضيع ضغطة الماوس الأولى عليه لأنه
   يتحرك من تحت المؤشر وهو لسا بنص الضغطة). الـ JS (polish.js) هو اللي يتكفل يحط
   position:relative بس لما يكون الزر فعلاً position:static من الأصل. */
.dw-ripple{ overflow:hidden; }
.dw-ripple-circle{
  position:absolute; border-radius:50%; transform:scale(0);
  background:rgba(255,255,255,.55); pointer-events:none;
  animation:dwRipple .6s ease-out forwards;
}
@keyframes dwRipple{ to{ transform:scale(2.6); opacity:0; } }

/* ---------- الشعار والعلامة ---------- */
.brand-mark{ transition:transform .35s cubic-bezier(.22,.8,.32,1), filter .35s ease; }
.brand-pill:hover .brand-mark{ transform:rotate(-8deg) scale(1.12); filter:drop-shadow(0 0 10px rgba(252,193,13,.65)); }
.brand-pill:hover .brand-name{ color:var(--accent-2); }
.brand-name{ transition:color .3s ease; }

h1.wordmark{
  background-size:200% auto;
  animation:dwShimmerText 5s linear infinite;
}
@keyframes dwShimmerText{ 0%{ background-position:0% center; } 100%{ background-position:200% center; } }

/* ---------- إعادة توزيع الشريط العلوي: مساحة أوسع لقائمة الروابط، وحساب المستخدم مضغوط بالطرف ---------- */
nav.topbar{ gap:10px !important; }
.nav-links{
  flex:1 1 auto !important;
  justify-content:center !important;
  gap:3px !important;
  overflow:visible !important;
}
.nav-links a{ padding:10px 16px !important; }
.account-pill{
  gap:5px !important;
  padding:5px 6px 5px 14px !important;
}
.account-pill .icon-btn{ width:34px !important; height:34px !important; }
.account-pill .icon-btn svg{ width:16px !important; height:16px !important; }
.account-pill span{ font-size:13.5px !important; }
.account-pill img{
  width:28px !important; height:28px !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.1);
  transition:transform .25s cubic-bezier(.22,.8,.32,1), box-shadow .25s ease;
}
.account-pill img:hover{ transform:scale(1.1); box-shadow:0 0 0 2px var(--accent-2), 0 0 14px -3px var(--accent); }
@media (max-width:900px){ .nav-links{ overflow-x:auto !important; } }

/* ---------- شكل ثلاثي الأبعاد لامع: حاويات الشعار/التنقل/الحساب ---------- */
.pill{
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 88%, #fff 12%), var(--surface)) !important;
  border:1px solid var(--border-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -3px 6px rgba(0,0,0,.35),
    0 10px 24px -12px rgba(0,0,0,.65) !important;
}
.nav-links{ border-radius:14px !important; padding:5px !important; }

/* ---------- روابط الأقسام: زر مربّع (زوايا منحنية خفيفة) ثلاثي الأبعاد بألوان الموقع الذهبية بدل الأخضر ---------- */
.nav-links a{ position:relative !important; }
.nav-links a{
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 92%, #fff 8%) 0%, var(--surface) 100%) !important;
  border:1px solid var(--border-strong) !important;
  border-radius:12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -2px 4px rgba(0,0,0,.35),
    0 3px 8px -3px rgba(0,0,0,.55) !important;
  color:var(--text-dim) !important;
  background-image:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-fill-color:initial !important;
  text-shadow:0 1px 1px rgba(0,0,0,.4) !important;
  font-weight:600 !important;
  transition:filter .2s ease, transform .18s cubic-bezier(.22,.8,.32,1), box-shadow .25s ease, border-color .25s ease, color .2s ease !important;
}
.nav-links a svg{
  stroke:var(--accent-3) !important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)) !important;
  transition:filter .2s ease, stroke .2s ease !important;
}
.nav-links a:hover{
  color:var(--text) !important;
  border-color:color-mix(in srgb, var(--accent) 55%, var(--border-strong)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -2px 4px rgba(0,0,0,.3),
    0 6px 16px -6px color-mix(in srgb, var(--accent) 45%, transparent) !important;
  transform:translateY(-2px) !important;
}
.nav-links a:hover svg{ stroke:var(--accent-2) !important; }
.nav-links a:active{ transform:translateY(0) scale(.96) !important; }
.nav-links a.active{
  background:linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 55%, var(--accent-deep) 100%) !important;
  border-color:var(--accent-deep) !important;
  color:var(--accent-ink) !important;
  font-weight:800 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.35) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -3px 6px rgba(0,0,0,.25),
    0 8px 20px -8px color-mix(in srgb, var(--accent) 65%, transparent) !important;
}
.nav-links a.active svg{ stroke:var(--accent-ink) !important; filter:drop-shadow(0 1px 1px rgba(255,255,255,.3)) !important; }
.brand-pill .brand-mark{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -3px 5px rgba(0,0,0,.3),
    0 4px 12px -4px rgba(0,0,0,.5);
}

/* ---------- زر تسجيل الدخول عبر تويتش: تعريف أساسي ثلاثي الأبعاد لامع (نص + أيقونة داخل زر واحد) ---------- */
.twitch-login-btn{
  display:flex; align-items:center; gap:9px;
  background:linear-gradient(180deg,#a970ff,#772ce8);
  color:#fff; border:1px solid rgba(255,255,255,.2);
  border-radius:999px; padding:13px 26px; font-family:'Tajawal',sans-serif;
  font-weight:800; font-size:14.5px; cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -3px 6px rgba(0,0,0,.25),
    0 10px 26px -10px rgba(119,44,232,.75);
}
.twitch-login-btn svg{ width:19px; height:19px; flex-shrink:0; }
/* نسخة مصغّرة تظهر بشريط التنقل بأعلى كل صفحة */
.twitch-login-btn.nav-login-btn{ padding:9px 18px 9px 14px; font-size:13.5px; gap:7px; }
.twitch-login-btn.nav-login-btn svg{ width:17px; height:17px; }

/* ---------- تحويم عام أنيق لبطاقات ولوحات الموقع ---------- */
.pill{ transition:transform .3s cubic-bezier(.22,.8,.32,1), box-shadow .3s ease, border-color .3s ease; }
.pill:hover{ box-shadow:0 10px 26px -12px rgba(0,0,0,.5); }

.game-card, .item-card, .step-card, .task, .panel, .flag-card, .p-row{
  transition:transform .35s cubic-bezier(.22,.8,.32,1), box-shadow .4s ease, border-color .35s ease;
}
.game-card:hover, .item-card:hover, .step-card:hover{
  transform:translateY(-6px);
  border-color:var(--accent) !important;
  box-shadow:0 18px 40px -16px rgba(232,160,15,.4), 0 0 0 1px rgba(232,160,15,.18) inset;
}
.task:hover{ border-color:var(--accent-3); box-shadow:0 10px 26px -14px rgba(232,160,15,.35); }
.p-row{ transform-origin:center; }
.p-row:hover{ transform:translateX(-3px); background:var(--surface-3) !important; }

.icon-btn{
  transition:transform .3s cubic-bezier(.22,.8,.32,1), box-shadow .3s ease, background .3s ease;
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 85%, #fff 15%), var(--surface-2)) !important;
  border:1px solid var(--border-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -2px 4px rgba(0,0,0,.35),
    0 4px 10px -4px rgba(0,0,0,.5) !important;
}
.icon-btn:hover{ box-shadow:0 6px 18px -6px rgba(232,160,15,.5); transform:translateY(-2px) scale(1.06); }
.icon-btn:active{ transform:translateY(0) scale(.94); }

.chip{ transition:transform .3s cubic-bezier(.22,.8,.32,1), box-shadow .3s ease, border-color .3s ease; }
.chip:hover{ border-color:var(--accent); }

.stat-chip{ transition:transform .3s ease, box-shadow .3s ease; }
.stat-chip:hover{ transform:translateY(-2px); box-shadow:0 8px 20px -10px rgba(232,160,15,.4); }

/* ---------- بطاقات لعبة الذاكرة: توهج أنعم عند التطابق ---------- */
@keyframes dwMatchPop{
  0%{ transform:scale(1); } 40%{ transform:scale(1.09); } 100%{ transform:scale(1); }
}
.m-card.matched .m-card-inner{ animation:dwMatchPop .5s cubic-bezier(.22,.8,.32,1); }
.m-card.matched .m-card-face.front{ box-shadow:0 0 22px -2px rgba(46,204,113,.55); }
.m-card:not(.matched):hover{ filter:brightness(1.08); }

/* ---------- ظهور مرن للنوافذ المنبثقة ---------- */
@keyframes dwPopIn{ from{ opacity:0; transform:scale(.88) translateY(10px); } to{ opacity:1; transform:scale(1) translateY(0); } }
.modal-overlay[style*="flex"] .modal-card,
.winner-overlay[style*="flex"] > *{ animation:dwPopIn .45s cubic-bezier(.22,.8,.32,1) both; }
.login-gate{ animation:dwPopIn .5s cubic-bezier(.22,.8,.32,1) both; }
.gate-icon{ animation:dwPulseGlow 2.6s ease-in-out infinite; }

/* ---------- عناصر أخرى ---------- */
.eyebrow svg, .scroll-cue svg{ transition:transform .3s ease; }
.step-num{ transition:transform .3s cubic-bezier(.22,.8,.32,1); }
.step-card:hover .step-num{ transform:scale(1.15) rotate(-6deg); }

a, button{ -webkit-tap-highlight-color:transparent; }

/* احترام مين ما يبي حركة */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* شارة "حساب موثّق" الوحيدة المتبقية (badges.js) — تبان جنب أي اسم موثّق بكل مكان بالموقع */
.dw-badges{ display:inline-flex; flex-wrap:nowrap; align-items:center; gap:3px; margin-inline-start:5px; vertical-align:middle; flex-shrink:0; }
.dw-badge{ display:inline-flex; align-items:center; justify-content:center; line-height:1; cursor:default; flex-shrink:0; transition:transform .15s ease; }
.dw-badge:hover, .dw-badge:focus-visible{ transform:translateY(-2px) scale(1.12); outline:none; }
.dw-badge svg{ display:block; }

/* شريط المستوى — يبان بالبروفايل تحت الإحصائيات */
.dw-level-bar-wrap{ margin:16px 0 20px; }
.dw-level-bar-head{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-faint, #8f8071); margin-bottom:6px; font-weight:700; }
.dw-level-bar-head span:first-child{ color:var(--accent-2, #fcc10d); }
.dw-level-bar-track{ height:9px; border-radius:999px; background:var(--surface-2, #271d13); border:1px solid var(--border, rgba(244,242,240,.08)); overflow:hidden; }
.dw-level-bar-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg, var(--accent, #e8a00f), var(--accent-2, #fcc10d)); transition:width .5s cubic-bezier(.22,.8,.32,1); }

.dw-level-pill{ display:inline-block; background:linear-gradient(90deg, var(--accent, #e8a00f), var(--accent-2, #fcc10d)); color:var(--accent-ink, #312709); font-weight:800; font-size:11px; padding:2px 9px; border-radius:999px; margin-inline-start:6px; vertical-align:middle; }


/* إشعار الترقية بالمستوى */
.dw-levelup-toast{
  position:fixed; top:22px; left:50%; transform:translateX(-50%) translateY(-16px);
  background:linear-gradient(90deg, var(--accent, #e8a00f), var(--accent-2, #fcc10d));
  color:var(--accent-ink, #312709); font-weight:800; font-size:14px;
  padding:12px 22px; border-radius:999px; box-shadow:0 10px 30px -8px rgba(0,0,0,.5);
  opacity:0; transition:opacity .35s ease, transform .35s ease; z-index:9999; pointer-events:none;
}
.dw-levelup-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }