/* Shared dice styling */

.dice-tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.5rem, 2.5cqw, 1.1rem);
  padding: 1.1rem 0.8rem 0.5rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.16);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.35);
}

.die-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.die {
  display: block;
  width: clamp(3rem, 10cqw, 4.7rem);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 22%;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.4));
  transition: transform 0.15s ease, filter 0.15s ease;
  touch-action: manipulation;
}

.die svg { display: block; width: 100%; height: 100%; pointer-events: none; }

.die:disabled { cursor: default; }

@media (hover: hover) {
  .die:not(:disabled):hover { transform: translateY(-3px); }
}

.die.is-held {
  transform: translateY(-9px);
  filter: drop-shadow(0 0 0 #f0cf6a) drop-shadow(0 10px 8px rgba(0, 0, 0, 0.4));
}

.die.is-held svg rect:first-of-type { stroke: #e0b948; stroke-width: 4; }

.die.is-rolling { animation: die-shake 0.14s linear infinite; }

@keyframes die-shake {
  0% { transform: rotate(-7deg) translateY(-2px); }
  50% { transform: rotate(6deg) translateY(1px); }
  100% { transform: rotate(-4deg) translateY(-1px); }
}

.die-tag {
  min-height: 1.1em;
  font: 600 0.72rem/1 system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f0cf6a;
}