/* ==========================================================================
   dice-roller.css — the dice tray

   A d6 is a real CSS 3-D cube: six faces built from pips, rotated into place
   and spun to land on the rolled value. Dice that are not cubes (d4, d8, d10,
   d12, d20, d100) cannot be modelled honestly as a cube, so they get a
   tumbling chip instead of a fake six-sided box.
   ========================================================================== */

.dice-tray {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 118px;
  padding: 20px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 62%),
    var(--bg-soft);
  perspective: 900px;
}

.dice-empty { font-size: .88rem; color: var(--muted); }

/* Each die gets its own wrapper so the bounce (translateY) and the spin
   (rotate) can run on separate elements without fighting over `transform`. */
.die-wrap { width: 64px; height: 64px; }
.die-wrap.is-rolling { animation: die-bounce 900ms cubic-bezier(.22, .68, .36, 1); }

@keyframes die-bounce {
  0%   { transform: translateY(-28px) scale(.86); }
  45%  { transform: translateY(4px)   scale(1.04); }
  68%  { transform: translateY(-7px)  scale(.98); }
  85%  { transform: translateY(2px)   scale(1.01); }
  100% { transform: translateY(0)     scale(1); }
}

/* ------------------------------------------------------------- d6 cube */
.die {
  position: relative;
  width: 64px;
  height: 64px;
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(.22, .68, .36, 1);
}

.die-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 9px;
  border-radius: 13px;
  border: 1.5px solid var(--border-strong);
  background: var(--card);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .06);
}

/* Opposite faces sum to seven, exactly like a real die. */
.die-face.f1 { transform: rotateY(0deg)    translateZ(32px); }
.die-face.f6 { transform: rotateY(180deg)  translateZ(32px); }
.die-face.f2 { transform: rotateY(90deg)   translateZ(32px); }
.die-face.f5 { transform: rotateY(-90deg)  translateZ(32px); }
.die-face.f3 { transform: rotateX(90deg)   translateZ(32px); }
.die-face.f4 { transform: rotateX(-90deg)  translateZ(32px); }

.pip {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  align-self: center;
  justify-self: center;
  background: var(--primary);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .25);
}

/* ------------------------------------------------- everything but a d6 */
.die-poly {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  border: 1.5px solid var(--border-strong);
  background: var(--card);
  color: var(--heading);
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .06);
}
.die-poly.is-rolling { animation: die-tumble 900ms cubic-bezier(.3, .7, .4, 1); }

/* A d20 reads better as an octagon than a square. */
.die-poly.sides-20, .die-poly.sides-12, .die-poly.sides-8 {
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  border-radius: 0;
}
.die-poly.sides-4 {
  clip-path: polygon(50% 4%, 96% 92%, 4% 92%);
  border-radius: 0;
  align-items: flex-end;
  padding-bottom: 6px;
  font-size: 1.15rem;
}

@keyframes die-tumble {
  0%   { transform: rotate(0deg)   scale(.85); }
  30%  { transform: rotate(-160deg) scale(1.08); }
  60%  { transform: rotate(120deg)  scale(.95); }
  85%  { transform: rotate(-14deg)  scale(1.03); }
  100% { transform: rotate(0deg)    scale(1); }
}

/* A natural 20 or a natural 1 is the whole point of rolling a d20. */
.die-poly.is-max, .die-face.is-max { border-color: var(--green-dark); }
.die-poly.is-max { color: var(--green-dark); background: var(--tint-green); }
.die-poly.is-min { color: #E0415B; background: var(--tint-red); }

/* --------------------------------------------------------- roll history */
.dice-history { display: flex; flex-wrap: wrap; gap: 8px; }
.dice-hist {
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.dice-hist b { color: var(--heading); }
.dice-hist:first-child { background: var(--tint-purple); border-color: transparent; color: var(--primary-dark); }
[data-theme="dark"] .dice-hist:first-child { color: var(--primary-light); }

/* Nobody wants a page of dice leaping about while they read. */
@media (prefers-reduced-motion: reduce) {
  .die { transition: none; }
  .die-wrap.is-rolling, .die-poly.is-rolling { animation: none; }
}

@media (max-width: 575.98px) {
  .dice-tray { gap: 12px; padding: 16px 10px; min-height: 98px; }
  .die-wrap, .die, .die-poly { width: 52px; height: 52px; }
  .die-face { padding: 7px; border-radius: 11px; }
  .die-face.f1 { transform: rotateY(0deg)   translateZ(26px); }
  .die-face.f6 { transform: rotateY(180deg) translateZ(26px); }
  .die-face.f2 { transform: rotateY(90deg)  translateZ(26px); }
  .die-face.f5 { transform: rotateY(-90deg) translateZ(26px); }
  .die-face.f3 { transform: rotateX(90deg)  translateZ(26px); }
  .die-face.f4 { transform: rotateX(-90deg) translateZ(26px); }
  .pip { width: 9px; height: 9px; }
  .die-poly { font-size: 1.15rem; }
}