/* ==========================================================================
   سهرتكم — طبقة "مرح وكرتوني" (fun.css)
   تُحمَّل بعد كل ستايل بالموقع عشان تبدّل الحركة الهادئة بحركة كرتونية نشيطة:
   ارتداد (bounce)، سكوَش آند سترتش، اهتزاز خفيف، فقاعات كلام، وماسكوت عائم.
   ========================================================================== */

:root{
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --ease-pop: cubic-bezier(.68,-0.55,.27,1.55);
}

/* ---------- دخول الصفحة: ارتداد كرتوني بدل الرفع الهادئ ---------- */
@keyframes dwRise{
  0%{ opacity:0; transform:translateY(30px) scale(.92) rotate(-1.5deg); }
  55%{ opacity:1; transform:translateY(-5px) scale(1.02) rotate(.6deg); }
  100%{ opacity:1; transform:translateY(0) scale(1) rotate(0deg); }
}
.wrap > *{ animation-duration:.85s; animation-timing-function:var(--ease-bounce); }

/* ---------- بطاقات الألعاب/المتجر/الأعلام: نطة + ميلان عند المرور ---------- */
@keyframes dwCardHop{
  0%{ transform:translateY(0) rotate(0deg) scale(1); }
  35%{ transform:translateY(-10px) rotate(-2.5deg) scale(1.035); }
  65%{ transform:translateY(-6px) rotate(2deg) scale(1.02); }
  100%{ transform:translateY(-7px) rotate(0deg) scale(1.03); }
}
.game-card:hover, .item-card:hover, .step-card:hover, .flag-card:hover, .the-flag:hover{
  animation:dwCardHop .55s var(--ease-bounce) both;
  border-color:var(--accent) !important;
}

/* ---------- صفوف المهام/الجدول: نطة أخف ---------- */
@keyframes dwRowHop{
  0%{ transform:translateX(0) scale(1); }
  45%{ transform:translateX(-5px) scale(1.01); }
  100%{ transform:translateX(-2px) scale(1.006); }
}
.task:hover, .p-row:hover{ animation:dwRowHop .4s var(--ease-bounce) both; }

/* ---------- ضغط الأزرار: سكوَش آند سترتش كرتوني ---------- */
@keyframes dwSquash{
  0%{ transform:scale(1,1); }
  30%{ transform:scale(1.16,.8); }
  55%{ transform:scale(.88,1.14); }
  80%{ transform:scale(1.05,.96); }
  100%{ transform:scale(1,1); }
}
.btn-primary:active, .buy-btn:active, .claim-btn:active, .tab-btn:active,
.twitch-login-btn:active, .icon-btn:active, .chip:active, .restart-btn:active{
  animation:dwSquash .4s var(--ease-bounce);
}

/* ---------- تبويبات/روابط نشطة: نطة عند التفعيل ---------- */
@keyframes dwPop{
  0%{ transform:scale(.65) rotate(-4deg); }
  60%{ transform:scale(1.14) rotate(2deg); }
  100%{ transform:scale(1) rotate(0deg); }
}
.tab-btn.active, .nav-links a.active{ animation:dwPop .45s var(--ease-bounce); }

/* ---------- اهتزاز خفيف مستمر على الشعار (حيوية دائمة) ---------- */
@keyframes dwIdleWiggle{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(-8deg); } }
.brand-mark{ animation:dwIdleWiggle 3.4s ease-in-out infinite; }
.brand-pill:hover .brand-mark{ animation:none; transform:rotate(-16deg) scale(1.2); }

/* ---------- ملامح الماسكوت: ابتسامة وخدود وردية تعطيه شخصية كرتونية حقيقية ---------- */
#dwMascot .body::before{
  content:''; position:absolute; bottom:13px; left:50%; transform:translateX(-50%);
  width:16px; height:8px; border:2.5px solid #221705; border-top:none;
  border-radius:0 0 16px 16px;
}
#dwMascot .body::after{
  content:''; position:absolute; top:29px; left:8px; width:7px; height:4px; border-radius:50%;
  background:rgba(255,90,90,.6); box-shadow:23px 0 0 rgba(255,90,90,.6);
}
@media (max-width:640px){ #dwMascot .body::before{ bottom:10px; width:13px; height:6px; } #dwMascot .body::after{ top:23px; left:6px; box-shadow:18px 0 0 rgba(255,90,90,.6); } }

/* ====================== فقاعة كلام (توست) بدل alert ====================== */
#dwToastStack{
  position:fixed; top:20px; inset-inline-end:20px; z-index:9999;
  display:flex; flex-direction:column; gap:10px; pointer-events:none;
  max-width:calc(100vw - 24px);
}
.dw-toast{
  pointer-events:auto; max-width:320px;
  background:var(--surface,#1e1712); color:var(--text,#f4f2f0);
  border:2px solid var(--accent,#e8a00f); border-radius:20px 20px 4px 20px;
  padding:14px 18px; font-family:'Tajawal',sans-serif; font-size:14px; font-weight:600;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.55);
  animation:dwToastIn .5s var(--ease-bounce) both;
}
.dw-toast.dw-out{ animation:dwToastOut .35s ease forwards; }
.dw-toast .emoji{ font-size:22px; flex-shrink:0; animation:dwIdleWiggle 1.2s ease-in-out infinite; }
@keyframes dwToastIn{
  from{ opacity:0; transform:translateY(-18px) scale(.8) rotate(-4deg); }
  to{ opacity:1; transform:translateY(0) scale(1) rotate(0deg); }
}
@keyframes dwToastOut{ to{ opacity:0; transform:translateX(50px) scale(.9); } }

/* ====================== ماسكوت عائم صغير ====================== */
#dwMascot{
  position:fixed; bottom:22px; inset-inline-start:22px; width:56px; height:56px;
  z-index:500; cursor:pointer; user-select:none;
  animation:dwMascotFloat 3s ease-in-out infinite;
}
#dwMascot .body{
  width:100%; height:100%; border-radius:50%; position:relative;
  background:linear-gradient(155deg,var(--accent,#e8a00f),var(--accent-2,#fcc10d));
  box-shadow:0 10px 24px -8px rgba(232,160,15,.6), 0 0 0 4px var(--bg,#110d0c);
}
#dwMascot .eye{ position:absolute; top:20px; width:8px; height:8px; background:#221705; border-radius:50%; transition:height .12s ease, top .12s ease, transform .16s cubic-bezier(.34,1.56,.64,1); }
#dwMascot .eye.l{ left:15px; } #dwMascot .eye.r{ right:15px; }
#dwMascot.blink .eye{ height:2px; top:24px; }
#dwMascot:hover{ animation:dwMascotFloat .6s var(--ease-bounce) infinite; }
#dwMascot.cheer{ animation:dwMascotCheer .6s var(--ease-bounce); }
@keyframes dwMascotFloat{ 0%,100%{ transform:translateY(0) rotate(-4deg); } 50%{ transform:translateY(-14px) rotate(5deg); } }
@keyframes dwMascotCheer{
  0%{ transform:scale(1) rotate(0deg); }
  30%{ transform:scale(1.3) rotate(-14deg); }
  60%{ transform:scale(.88) rotate(10deg); }
  100%{ transform:scale(1) rotate(0deg); }
}
@media (max-width:640px){ #dwMascot{ width:44px; height:44px; bottom:14px; inset-inline-start:14px; } }

/* ====================== شرارات تتبع مؤشر الفأرة (تتوزع بكل الاتجاهات) ====================== */
.dw-sparkle{
  position:fixed; top:0; left:0; border-radius:50%;
  pointer-events:none; z-index:9998; will-change:transform,opacity;
  animation:dwSparkleFade var(--dur,.75s) cubic-bezier(.16,.8,.3,1) forwards;
}
@keyframes dwSparkleFade{
  0%{ opacity:1; transform:translate(-50%,-50%) translate(0,0) rotate(var(--rot0,0deg)) scale(0);}
  12%{ opacity:1; transform:translate(-50%,-50%) translate(calc(var(--dx) * .18),calc(var(--dy) * .18)) rotate(calc(var(--rot0) + var(--spin) * .18)) scale(1.15);}
  100%{ opacity:0; transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) rotate(calc(var(--rot0) + var(--spin))) scale(.15);}
}

/* ====================== توهج ونقطة تتبعان المؤشر بسلاسة بكل مكان بالشاشة ====================== */
#dwCursorGlow, #dwCursorDot{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9997;
  transform:translate3d(-999px,-999px,0); will-change:transform;
}
#dwCursorGlow{
  width:220px; height:220px; margin:-110px 0 0 -110px; border-radius:50%;
  background:radial-gradient(circle,rgba(252,193,13,.16) 0%,rgba(252,193,13,.07) 40%,rgba(252,193,13,0) 72%);
  filter:blur(2px); mix-blend-mode:plus-lighter;
}
#dwCursorDot{
  width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
  background:var(--accent-2,#fcc10d); box-shadow:0 0 10px 2px rgba(252,193,13,.75);
  transition:width .18s var(--ease-bounce),height .18s var(--ease-bounce),margin .18s var(--ease-bounce),opacity .2s ease;
}
#dwCursorDot.dw-cursor-hover{ width:16px; height:16px; margin:-8px 0 0 -8px; background:transparent; border:2px solid var(--accent-2,#fcc10d); box-shadow:0 0 14px 3px rgba(252,193,13,.5); }
#dwCursorDot.dw-cursor-down{ width:5px; height:5px; margin:-2.5px 0 0 -2.5px; }

/* ====================== انفجار جسيمات عند الضغط (بكل الاتجاهات) ====================== */
.dw-burst{
  position:fixed; top:0; left:0; width:5px; height:5px; border-radius:50%;
  pointer-events:none; z-index:9998; background:var(--accent,#e8a00f);
  animation:dwBurstFly .55s cubic-bezier(.16,.8,.3,1) forwards;
}
@keyframes dwBurstFly{
  0%{ opacity:1; transform:translate(-50%,-50%) translate(0,0) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(.2); }
}

/* ====================== عناصر تتفاعل بالإمالة مع الماوس ====================== */
.dw-tilt{ will-change:transform; }

/* ====================== الشعار الشبحي بالهيرو: تنفّس بطيء يعطي عمق بدون ما يشتت ====================== */
@keyframes dwGhostBreathe{ 0%,100%{ opacity:.5; transform:scale(1) translateY(0); } 50%{ opacity:.8; transform:scale(1.02) translateY(-6px); } }
.hero-ghost{ animation:dwGhostBreathe 7s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .hero-ghost{ animation:none; } }
@media (prefers-reduced-motion:reduce){ .dw-sparkle, #dwCursorGlow, #dwCursorDot, .dw-burst{ display:none; } }

/* ====================== زر بوتات وضع الأدمن (يظهر بس عبر رابط الأدمن) ====================== */
.dw-admin-fab{
  position:fixed; bottom:22px; inset-inline-end:22px; z-index:600;
  display:flex; align-items:center; gap:8px; padding:13px 20px; border-radius:999px;
  background:var(--surface,#1e1712); border:1.5px solid var(--accent-3,#e7ab66);
  color:var(--accent-2,#fcc10d); font-family:'Tajawal',sans-serif; font-weight:800; font-size:13px;
  cursor:pointer; box-shadow:0 10px 26px -10px rgba(0,0,0,.6);
  animation:dwAdminPulse 2.2s ease-in-out infinite;
}
.dw-admin-fab:active{ transform:scale(.94); }
@keyframes dwAdminPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(252,193,13,.35),0 10px 26px -10px rgba(0,0,0,.6); }
  50%{ box-shadow:0 0 0 7px rgba(252,193,13,0),0 10px 26px -10px rgba(0,0,0,.6); }
}
@media (max-width:640px){ .dw-admin-fab{ bottom:78px; font-size:12px; padding:11px 16px; } }

/* احترام مين ما يبي حركة */
@media (prefers-reduced-motion:reduce){
  .wrap > *, .game-card:hover, .item-card:hover, .task:hover, .p-row:hover,
  #dwMascot, .brand-mark, .dw-toast{ animation:none !important; }
}

/* ==========================================================================
   طبقة "كوميك" إضافية: حدود سميكة + ظل مسطح مُزاح (بدل التوهج الناعم فقط)
   وزخارف خلفية دائرية ملوّنة بأركان الأقسام الرئيسية — تعطي إحساس رسوم متحركة
   بدون المساس بالتخطيط أو سهولة القراءة.
   ========================================================================== */

/* بطاقات الألعاب/المتجر/الخطوات: حدّ غامق + ظل كوميك مُزاح بدل التوهج فقط */
.game-card, .item-card, .step-card, .the-flag, .flag-card{
  border-width:2px !important;
  box-shadow:
    5px 5px 0 0 rgba(0,0,0,.4),
    0 18px 40px -18px rgba(232,160,15,.4) !important;
}
.game-card:hover, .item-card:hover, .step-card:hover, .the-flag:hover, .flag-card:hover{
  box-shadow:
    7px 7px 0 0 rgba(0,0,0,.45),
    0 20px 44px -16px rgba(232,160,15,.5) !important;
}

/* الأزرار والحبوب: حدّ كوميك خفيف يبرز الشكل الكرتوني */
.btn-primary, .twitch-login-btn, .restart-btn, .chip, .buy-btn, .claim-btn{
  border:2px solid rgba(0,0,0,.28) !important;
}

/* الشارات/الأيقونات الدائرية: نبضة تدوير بسيطة مستمرة تعطي حيوية كرتونية */
@keyframes dwIconBob{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-3px) rotate(4deg); } }
.step-card svg.step-icon, .eyebrow svg{ animation:dwIconBob 2.6s ease-in-out infinite; }

@media (prefers-reduced-motion:reduce){
  .step-card svg.step-icon, .eyebrow svg{ animation:none !important; }
}