/**
 * Dice Animation Styles
 * =====================
 * Additional styles for the D3 dice roll animation overlay.
 * This file provides enhanced particle and glow effects.
 */

/* Dice face 3D effect */
.dice-face {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Particle effects */
.dice-particles circle {
  mix-blend-mode: screen;
}

/* Dice group hover effect (when in container mode) */
.dice-group:hover {
  transform: scale(1.05);
}

/* Special dice face colors for different die types */
.dice-d4 .dice-face {
  stroke: var(--accent-purple);
}

.dice-d6 .dice-face {
  stroke: var(--accent-primary);
}

.dice-d8 .dice-face {
  stroke: var(--accent-secondary);
}

.dice-d10 .dice-face {
  stroke: var(--accent-warning);
}

.dice-d12 .dice-face {
  stroke: var(--accent-purple);
}

.dice-d20 .dice-face {
  stroke: var(--accent-primary);
}

/* Critical hit celebration */
.dice-critical {
  animation: dice-critical-glow 0.5s ease-out;
}

@keyframes dice-critical-glow {
  0% {
    filter: drop-shadow(0 0 0 var(--accent-secondary));
  }
  50% {
    filter: drop-shadow(0 0 30px var(--accent-secondary));
  }
  100% {
    filter: drop-shadow(0 0 10px var(--accent-secondary));
  }
}

/* Fumble shake */
.dice-fumble {
  animation: dice-fumble-shake 0.4s ease-out;
}

@keyframes dice-fumble-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Rolling animation (before result) */
.dice-rolling {
  animation: dice-roll-spin 0.6s ease-out;
}

@keyframes dice-roll-spin {
  0% {
    transform: rotate(0deg) scale(0.3);
    opacity: 0;
  }
  50% {
    transform: rotate(360deg) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: rotate(720deg) scale(1);
  }
}

/* Bounce landing effect */
.dice-landing {
  animation: dice-bounce 0.3s ease-out;
}

@keyframes dice-bounce {
  0% { transform: translateY(-20px); }
  50% { transform: translateY(5px); }
  100% { transform: translateY(0); }
}

/* Inline dice roll indicator (for narrative display) */
.inline-dice-roll {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 2px 6px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.inline-dice-roll__icon {
  width: 16px;
  height: 16px;
}

.inline-dice-roll__result {
  font-weight: bold;
}

.inline-dice-roll__result--critical {
  color: var(--accent-secondary);
}

.inline-dice-roll__result--fumble {
  color: var(--accent-error);
}

/* Dice tray (container for multiple dice) */
.dice-tray {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.dice-tray__die {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dice-tray__result {
  position: absolute;
  bottom: -5px;
  right: -5px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: bold;
}