/* ==========================================================================
   سهرتكم — طبقة "بريق" شاملة: انيميشن، توهج، وحركات دقيقة على كل الموقع
   تعتمد بالكامل على متغيرات 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 rgba(232,160,15,.35), 0 8px 24px -8px rgba(232,160,15,.45); }
  50%{ box-shadow:0 0 0 6px rgba(232,160,15,0), 0 10px 30px -6px rgba(232,160,15,.65); }
}
.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 ---------- */
.dw-ripple{ position:relative; 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; }

/* ====================================================================
   دليل الشارات (badges.js: dwBadgesGuideHtml) — يشرح كل الشارات وكيفية
   الحصول عليها، تُستخدم بصفحة البروفايل
   ==================================================================== */
.dw-guide-cat{ margin-bottom:26px; }
.dw-guide-cat-title{ font-size:14px; font-weight:800; color:var(--text, #f4f2f0); margin-bottom:12px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.dw-guide-cat-title span{ font-size:11.5px; font-weight:500; color:var(--text-faint, #8f8071); }
.dw-guide-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.dw-guide-card{ background:var(--surface-2, #271d13); border:1px solid var(--border, rgba(244,242,240,.08)); border-radius:16px; padding:16px 12px; text-align:center; transition:transform .2s ease, border-color .2s ease; }
.dw-guide-card:hover{ transform:translateY(-3px); }
.dw-guide-card.earned{ border-color:var(--accent, #e8a00f); box-shadow:0 0 0 1px var(--accent, #e8a00f), 0 10px 26px -12px rgba(232,160,15,.5); }
.dw-guide-card.locked{ opacity:.55; }
.dw-guide-card.locked .dw-guide-icon svg{ filter:grayscale(.85); }
.dw-guide-icon{ display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.dw-guide-icon svg{ width:34px; height:34px; }
.dw-guide-title{ font-size:13px; font-weight:800; color:var(--text, #f4f2f0); margin-bottom:5px; }
.dw-guide-desc{ font-size:11px; color:var(--text-dim, #c9b9a0); line-height:1.5; margin-bottom:8px; min-height:32px; }
.dw-guide-state{ font-size:10.5px; font-weight:700; color:var(--text-faint, #8f8071); }
.dw-guide-card.earned .dw-guide-state{ color:var(--accent-2, #fcc10d); }

/* شريط المستوى — يبان بالبروفايل تحت الإحصائيات */
.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-badges-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(108px, 1fr)); gap:12px; margin-bottom:30px; }
.dw-badge-card{ background:var(--surface-2, #271d13); border:1px solid var(--border, rgba(244,242,240,.08)); border-radius:14px; padding:14px 8px; text-align:center; transition:transform .2s ease, border-color .2s ease; }
.dw-badge-card:hover{ transform:translateY(-3px); border-color:var(--accent, #e8a00f); }
.dw-badge-card-icon{ font-size:24px; margin-bottom:8px; display:flex; align-items:center; justify-content:center; }
.dw-badge-card-icon svg{ width:22px; height:22px; }
.dw-badge-card-title{ font-size:11px; color:var(--text-dim, #c9b9a0); line-height:1.4; }
.dw-badges-empty{ color:var(--text-faint, #8f8071); font-size:13px; background:var(--surface-2, #271d13); border:1px dashed var(--border-strong, rgba(244,242,240,.16)); border-radius:14px; padding:18px; text-align:center; margin-bottom:30px; }

/* إشعار الترقية بالمستوى */
.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); }