/* ==========================================================================
   NARD CREATIVE — dice.css
   مكعب النرد ثلاثي الأبعاد — CSS خالص، بدون أي مكتبات
   البنية: .dice-stage > .dice-float > .dice-tilt > .dice > .dice__face
   ========================================================================== */

.dice-stage {
  display: block;
  /* لوحة النرد مستقلّة عن ألوان الموقع: --ink صار لون النص الفاتح
     بعد إعادة التصميم، فربْط النقاط به يجعلها كريمي على كريمي. */
  --die-body: #F2F4EE;        /* جسم المكعّب */
  --die-core: #E9ECE4;        /* قلبه — يملأ أركانه المستديرة */
  --die-dot:  #2A1413;        /* النقاط */
  --die-mark: #F2F4EE;        /* نص «نرد» داخل النقطة المفردة */
  --s: 200px;                 /* حجم حرف النرد */
  --half: calc(var(--s) / 2);
  perspective: 1100px;
  perspective-origin: 50% 45%;
  width: var(--s);
  height: var(--s);
  position: relative;
  flex: none;
}

/* الطفو البطيء */
.dice-float {
  display: block;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: dice-float 7s ease-in-out infinite;
}
@keyframes dice-float {
  0%, 100% { transform: translateY(-9px); }
  50%      { transform: translateY(9px); }
}

/* الميلان مع الماوس — يضبطه الجافاسكربت */
.dice-tilt {
  display: block;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* المكعب نفسه — دوران الرمية */
.dice {
  display: block;
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 1.55s cubic-bezier(0.2, 0.9, 0.22, 1);
  cursor: pointer;
}
.dice.is-rolling { transition-duration: 1.55s; }

/* ---------- قلب المكعّب: يسدّ فجوات الأركان المستديرة ---------- */
.dice__core {
  position: absolute;
  inset: 0;
  background: var(--die-core, #D9DDD1);
  border-radius: 4%;
}
.dice__core--x { transform: rotateY(90deg); }
.dice__core { border-radius: 3%; }
.dice__core--y { transform: rotateX(90deg); }

/* ---------- الوجوه ---------- */
.dice__face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 9%;
  padding: 15%;
  border-radius: 10%;
  background: var(--die-body, #F2F4EE);
  box-shadow:
    inset 0 0 0 1px rgba(49, 22, 21, 0.13),
    inset 0 calc(var(--s) * -0.1) calc(var(--s) * 0.16) rgba(49, 22, 21, 0.10),
    inset 0 calc(var(--s) * 0.06) calc(var(--s) * 0.1) rgba(255, 255, 255, 0.75);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.dice__face--1 { transform: translateZ(var(--half)); }
.dice__face--6 { transform: rotateY(180deg) translateZ(var(--half)); }
.dice__face--2 { transform: rotateY(90deg)   translateZ(var(--half)); }
.dice__face--5 { transform: rotateY(-90deg)  translateZ(var(--half)); }
.dice__face--3 { transform: rotateX(90deg)   translateZ(var(--half)); }
.dice__face--4 { transform: rotateX(-90deg)  translateZ(var(--half)); }

/* ---------- النقاط ---------- */
.pip {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--die-dot, currentColor);
  align-self: center;
  justify-self: center;
}

.pip--p1 { grid-area: 1 / 1; }
.pip--p2 { grid-area: 1 / 2; }
.pip--p3 { grid-area: 1 / 3; }
.pip--p4 { grid-area: 2 / 1; }
.pip--p5 { grid-area: 2 / 2; }
.pip--p6 { grid-area: 2 / 3; }
.pip--p7 { grid-area: 3 / 1; }
.pip--p8 { grid-area: 3 / 2; }
.pip--p9 { grid-area: 3 / 3; }

/* النقطة المفردة في الوجه الأول = شعار نرد */
.pip--brand {
  grid-area: 1 / 1 / 4 / 4;
  width: 62%;
  display: grid;
  place-items: center;
}
.pip__logo {
  width: 64%;
  aspect-ratio: 548 / 339;
  background: var(--die-mark, #212322);
  -webkit-mask: url("./logo-mark.png") center / contain no-repeat;
  mask: url("./logo-mark.png") center / contain no-repeat;
}

/* ---------- الظل الأرضي ---------- */
.dice-shadow {
  position: absolute;
  inset-inline: 6%;
  bottom: calc(var(--s) * -0.32);
  height: calc(var(--s) * 0.16);
  border-radius: 50%;
  background: rgba(49, 22, 21, 0.22);
  filter: blur(14px);
  animation: dice-shadow 7s ease-in-out infinite;
  z-index: -1;
}
@keyframes dice-shadow {
  0%, 100% { transform: scale(0.88); opacity: .5; }
  50%      { transform: scale(1.05); opacity: .8; }
}

/* ---------- نسخة معكوسة للقسم الداكن ---------- */
.dice-stage--invert {
  --die-body: #241010;
  --die-core: #2E1717;
  --die-dot:  #E7EEE2;
  --die-mark: #241010;
}
.dice-stage--invert .dice__face {
  box-shadow:
    inset 0 0 0 1px rgba(238, 236, 230, 0.16),
    inset 0 calc(var(--s) * -0.1) calc(var(--s) * 0.16) rgba(0, 0, 0, 0.5);
}
.dice-stage--invert .dice-shadow { background: rgba(0, 0, 0, 0.5); }

/* ---------- نرد شاشة الدخول: تدحرج مستمر ---------- */
.dice--tumbling {
  animation: dice-tumble 1.5s cubic-bezier(0.3, 0, 0.2, 1) forwards;
  transition: none;
  cursor: default;
}
@keyframes dice-tumble {
  0%   { transform: rotateX(0deg)   rotateY(0deg); }
  100% { transform: rotateX(720deg) rotateY(1080deg); }
}

/* ---------- نرد مؤشر السكرول (زاوية الشاشة) ---------- */
.scroll-dice {
  position: fixed;
  inset-block-end: calc(26px + env(safe-area-inset-bottom, 0px));
  inset-inline-end: 26px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.scroll-dice.is-visible { opacity: 1; transform: none; }
.scroll-dice .dice-stage { --s: 22px; perspective: 200px; }
.scroll-dice .dice { transition: none; }
.scroll-dice .dice__face { padding: 17%; gap: 10%; box-shadow: inset 0 0 0 1px rgba(49, 22, 21, 0.2); }
.scroll-dice__num { font-size: var(--fs-micro); color: var(--muted); font-variant-numeric: tabular-nums; }

/* على الجوال: أصغر وألصق بالحافة — لكنه موجود */
@media (max-width: 760px) {
  .scroll-dice {
    inset-block-end: calc(16px + env(safe-area-inset-bottom, 0px));
    inset-inline-end: 16px;
    gap: 8px;
    padding: 5px 10px 5px 7px;
    background: rgba(28, 30, 29, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 999px;
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(231, 238, 226, 0.14);
  }
  .scroll-dice .dice-stage { --s: 19px; perspective: 170px; }
}

/* ---------- نقاط النرد كأيقونة مسطّحة (البطاقات والخطوات) ---------- */
.pip-icon {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
  width: 42px;
  height: 42px;
  flex: none;
}
.pip-icon .pip { width: 100%; border-radius: 50%; }
.pip-icon--lg { width: 58px; height: 58px; gap: 6px; }

/* ---------- تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  .dice-float, .dice-shadow { animation: none; }
  .dice--tumbling { animation: none; }
}