/* ---------- Кубик: корпус, світло верхньої грані, значення (die.js) ---------- */

/* Вигляд «кістка світиться»: тип ефекту каже колір усієї кістки, значення — число на грані.
   Розмір задають дві ручки, і обидві приходять із die.js: --fig — сторона корпуса, --plate-w
   і --plate-h — габарит верхньої грані, обмірений по арту. Решта — частки від них, тож той
   самий кубик працює і на 26 px у формації, і на 90 px у крамниці, і правити тут нічого.
   Колір приходить каналами (--ink, --hot), щоб шари світла могли домішувати альфу. */

.die-fig {
  --ink: 107 90 69;   /* тьмяна кістка: тон, поки грань не випала */
  --hot: 107 90 69;
  position: relative;
  width: var(--fig);
  height: var(--fig);
  flex: none;
  line-height: 0;
  transform: rotate(var(--tilt, 0deg));
}

/* Корпус. Друга тінь — відсвіт кістки в колір ефекту: саме він видає кидок периферійним зором,
   ще до того, як гравець прочитає число. */
.die-fig .die-art { position: absolute; inset: 0; }
.die-fig .die-art img {
  filter:
    drop-shadow(0 3px 9px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 calc(var(--fig) * 0.07) rgb(var(--hot) / 0.67));
}

/* Кістка не світиться: порожня грань або кубик без граней. Світло гасне цілком — «нічого не
   випало» має читатися миттєво, а не як ефект, якого чомусь не видно. */
.die-fig.dark .die-halo, .die-fig.dark .die-plate { display: none; }
.die-fig.dark .die-art img { filter: drop-shadow(0 3px 9px rgba(0, 0, 0, 0.6)) saturate(0.6); }

/* Кубик, який ще не кинули: корпус на місці, значення немає. Приглушений, щоб стіл до кидка
   читався як «мій хід» — а не як результат, який чомусь не видно. */
.die-fig.facedown .die-art img {
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.55)) grayscale(0.8) brightness(0.5);
}
.face-wait {
  font-size: calc(var(--plate-w) * 0.55);
  font-weight: 800;
  color: #f2cb84a6;
  text-shadow: 0 1px 2px #000;
}

/* Сяйво з-під кістки. Лежить під корпусом, тож видно рівно те, що вибилось за силует —
   інакше воно було б другим джерелом світла поверх грані. */
.die-halo {
  position: absolute;
  left: 50%;
  top: var(--face-y);
  transform: translate(-50%, -50%);
  width: calc(var(--plate-w) * 1.02);
  height: calc(var(--plate-w) * 1.02);
  background: radial-gradient(50% 50% at 50% 50%, rgb(var(--hot)), rgb(var(--hot) / 0) 71%);
  filter: blur(calc(var(--fig) * 0.045));
  pointer-events: none;
}

/* Світло самої грані: форму дає clip-path за формою грані, квадратна просто заокруглена.
   Найяскравіше — трохи вище центру, як відблиск під свічкою над столом. */
.die-plate {
  position: absolute;
  left: 50%;
  top: var(--plate-y);
  transform: translate(-50%, -50%);
  width: var(--plate-w);
  height: var(--plate-h);
  background: radial-gradient(72% 72% at 50% 46%,
    rgb(var(--ink) / 0.96), rgb(var(--ink) / 0.77) 68%, rgb(var(--ink) / 0.4));
  pointer-events: none;
}
.die-fig.box .die-plate { border-radius: calc(var(--plate-w) * 0.1); }
.die-fig.pent .die-plate { clip-path: polygon(50% 1%, 99% 37%, 81% 97%, 19% 97%, 1% 37%); }

/* Трикутна грань (d4/d8/d20) — найдрібніша з усіх, а стоїть кубик на ній найчастіше. Світло
   тут яскравіше по низу (там центроїд, там і число), а сяйво ширше й розмитіше: сама грань
   займає мало місця, тож кидок мусить видавати себе навколо кістки. */
.die-fig.tri .die-plate {
  clip-path: polygon(50% 1%, 99% 99%, 1% 99%);
  background: radial-gradient(70% 70% at 50% 64%,
    rgb(var(--ink) / 0.95), rgb(var(--ink) / 0.72) 66%, rgb(var(--ink) / 0.24));
}
.die-fig.tri .die-halo {
  width: calc(var(--plate-w) * 1.35);
  height: calc(var(--plate-w) * 1.35);
  filter: blur(calc(var(--fig) * 0.075));
}

/* Вміст грані — коробка габаритом самої грані, поставлена в її оптичний центр. Усі грані
   кубика лежать тут одна на одній, видима — .on (див. dieFigure). */
.die-face {
  position: absolute;
  left: 50%;
  top: var(--face-y);
  transform: translate(-50%, -50%);
  width: var(--plate-w);
  height: var(--plate-h);
  line-height: 1;
}
.face-cell { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.face-cell.on { display: flex; }

/* Емблема — лише на квадратній і п'ятикутній грані, де під неї є місце. Білий гліф робиться
   фільтром, а не маскою: емблеми в assets/faces — кольорові PNG, і mask-image дав би квадрат.
   Фолбек-emoji фільтр не чіпає (він у сусідньому .art-fb), тож без PNG знак лишається знаком. */
.die-face .face-ico {
  --art-size: 46%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.die-face .face-ico img {
  filter: brightness(0) invert(1) drop-shadow(0 0 3px rgb(var(--hot))) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}

.face-num {
  position: absolute;
  right: 2%;
  bottom: -2%;
  font-size: calc(var(--plate-w) * 0.4);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff6ea;
  text-shadow: 0 0 6px rgb(var(--hot)), 0 2px 3px rgba(0, 0, 0, 0.8);
}
/* На трикутній грані емблеми немає — число стає по центру й на всю грань. */
.die-fig.tri .face-num {
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  font-size: calc(var(--plate-w) * 0.5);
  color: #fff8ee;
  text-shadow: 0 0 7px rgb(var(--hot)), 0 0 2px rgba(0, 0, 0, 0.9), 0 2px 3px rgba(0, 0, 0, 0.85);
}

/* Крит і пробій — на ріжках грані, поза світлом: це не значення, а примітка до нього. */
.face-mark {
  position: absolute;
  top: -14%;
  right: -10%;
  font-style: normal;
  font-weight: 800;
  font-size: calc(var(--plate-w) * 0.24);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.face-mark.crit { color: #ffcf5c; }
.face-mark.pierce { color: #ff8f6a; top: auto; bottom: -14%; }
.die-fig.tri .face-mark.crit { top: 2%; right: 14%; }
.die-fig.tri .face-mark.pierce { bottom: 2%; right: 6%; }

/* ---------- Кидок ---------- */

@keyframes die-roll {
  0% { transform: translate(-7%, -5%) rotate(0deg) scale(1.09); }
  25% { transform: translate(5%, -3%) rotate(90deg) scale(0.95); }
  50% { transform: translate(3%, 6%) rotate(180deg) scale(1.09); }
  75% { transform: translate(-5%, 4%) rotate(270deg) scale(0.95); }
  100% { transform: translate(-7%, -5%) rotate(360deg) scale(1.09); }
}
@keyframes die-land {
  0% { transform: rotate(var(--tilt)) scale(1.13); }
  45% { transform: rotate(var(--tilt)) scale(0.96); }
  75% { transform: rotate(var(--tilt)) scale(1.02); }
  100% { transform: rotate(var(--tilt)) scale(1); }
}
.die-fig.rolling { animation: die-roll 0.5s linear infinite; }
.die-fig.landing { animation: die-land 0.24s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .die-fig.rolling, .die-fig.landing { animation: none; }
}