/* ═══════════════════════════════════════════════════════════════════
   MathsClick — إيموجي ثلاثية الأبعاد (assets/mc-icons.js + assets/emoji/)
   التصميم والألوان الأصلية كما هي؛ هذا الملف ينسّق الصور فقط.
   لإلغائه: احذف سطر <link> هذا الملف وسطر mc-icons.js من index.html
   ═══════════════════════════════════════════════════════════════════ */
.mce { display: inline-block; vertical-align: middle; object-fit: contain; flex-shrink: 0; -webkit-user-drag: none; user-select: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18)); }

/* القائمة الجانبية وشريط الهاتف */
.mc-ico { display: inline-grid; place-items: center; }
.mc-ico .mce { width: 24px; height: 24px; transition: transform .2s; }
.mc-ni:hover .mc-ico .mce { transform: scale(1.15) rotate(-6deg); }
.mc-ni.on .mc-ico .mce { transform: scale(1.12); }
.mc-bn .mc-ico .mce { width: 26px; height: 26px; }

/* أسماء البطاقات */
.svc-name .mce { margin-inline-end: 6px; margin-top: -4px; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.svc-card:hover .svc-name .mce { transform: scale(1.25) rotate(-8deg); }

/* الشارات */
.svc-badge .mce { width: 15px; height: 15px; margin-inline-end: 4px; margin-top: -2px; filter: none; }

/* عناوين الأقسام */
.mc-group-h h3 { display: flex; align-items: center; gap: 10px; }
.mc-group-h h3 .mce { width: 36px; height: 36px; }

/* بطاقة الحساب و«دفتر النصوص الذكي» */
.mc-pc-i { display: grid; place-items: center; }
.mc-pc-i .mce { width: 42px; height: 42px; }
.now-card .nc-label .mce, .now-card .nc-btn .mce { margin-inline-end: 6px; margin-top: -3px; }
.mc-page-h h2 .mce { margin-inline-end: 8px; margin-top: -4px; }

@media (prefers-reduced-motion: reduce) { .mce { transition: none !important; } }

/* ── خلفية التطبيق: نفس خلفية شاشة الاختيار «أستاذ / تلميذ» (assets/mc-role.js) ── */
#screen_dashboard.mc-app, body {
  background:
    radial-gradient(1200px 600px at 20% 10%, #dbeafe 0, transparent 60%),
    radial-gradient(900px 500px at 90% 90%, #fde68a 0, transparent 55%),
    #f8fafc !important;
  min-height: 100vh;
}

/* ── صناديق الخدمات ثلاثية الأبعاد: سُمك، ظلال متدرّجة، ميلان مع الفأرة، لمعة ── */
.services-grid { perspective: 1400px; }
.svc-card {
  transform-style: preserve-3d;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%) !important;
  box-shadow:
    0 1px 0 #ece7da, 0 2px 0 #e6e0d1, 0 3px 0 #dfd8c7, 0 4px 0 #d8d0bd, 0 5px 0 #d1c8b3,   /* سُمك الصندوق */
    0 8px 14px rgba(40, 60, 45, .10), 0 22px 40px -10px rgba(40, 60, 45, .22),         /* الظل على الأرض */
    inset 0 1px 0 #fff, inset 0 -2px 6px rgba(120, 100, 60, .06) !important;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s !important;
}
.svc-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .55), transparent 45%);
  opacity: 0; transition: opacity .3s; mix-blend-mode: soft-light;
}
.svc-card:hover { --ty: -10px; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-10px) !important;
  box-shadow:
    0 1px 0 #ece7da, 0 2px 0 #e6e0d1, 0 3px 0 #dfd8c7, 0 4px 0 #d8d0bd, 0 5px 0 #d1c8b3, 0 6px 0 #cac0aa,
    0 18px 24px rgba(40, 60, 45, .14), 0 40px 60px -14px rgba(40, 60, 45, .32),
    inset 0 1px 0 #fff !important; }
.svc-card:hover::after { opacity: 1; }
.svc-card:active { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px) scale(.99) !important; }
.svc-card .pb-scene { transform: translateZ(30px); }
.svc-card .svc-name, .svc-card .svc-badge { transform: translateZ(20px); }
@media (prefers-reduced-motion: reduce) { .svc-card { transition: none !important; } .svc-card:hover { transform: none !important; } }
@media (hover: none) { .svc-card { transform: none; } }

/* ═══ الأداء على الهاتف (اللمس / الشاشات الصغيرة) ═══
   • الخلفية ثابتة (fixed) فقط في الحاسوب — في الهاتف تُعيد رسم الصفحة مع كل تمرير
   • إيقاف الحركات اللانهائية (طفو الكتب ونبض الظلال والهالات الضبابية) — 40 حركة متزامنة كانت تثقل الهاتف
   • ظلال أخف وبلا 3D حقيقي (preserve-3d) للصناديق */
@media (hover: hover) and (min-width: 821px) {
  #screen_dashboard.mc-app, body { background-attachment: fixed !important; }
}
@media (hover: none), (max-width: 820px) {
  .pb-book, .pb-shadow, .book3d, .hero-blob, .b3d-shadow { animation: none !important; }
  .hero-blob { filter: blur(30px) !important; }
  .services-grid { perspective: none; }
  .svc-card { transform: none !important; transform-style: flat !important; transition: none !important;
    box-shadow: 0 2px 0 #e6e0d1, 0 4px 0 #d8d0bd, 0 10px 22px -10px rgba(40, 60, 45, .28) !important; }
  .svc-card::after { display: none; }
  .svc-card .pb-scene, .svc-card .svc-name, .svc-card .svc-badge { transform: none; }
  .mce { filter: none; }
  .services-grid > .svc-card { content-visibility: auto; contain-intrinsic-size: auto 480px; }
}