/* Würfel: Augen im 3x3-Raster, Halten-Zustand, Wurf-Animation. Farben aus den Paletten in app.css. */

/* --die-size hält Kantenlänge und Innenabstand zusammen: Prozent-Padding würde sich auf die
   Breite des Elternelements beziehen und den Würfel bei breiten Reihen zuquetschen. */
.die-face {
    --die-size: 56px;
    display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
    gap: 0; padding: calc(var(--die-size) * .12); margin: 0;
    width: var(--die-size); height: var(--die-size); min-height: 0;
    border-radius: 12px;
    background: #fbf8f1; border: 2px solid #d9d2c3;
    box-shadow: 0 3px 8px rgba(0,0,0,.35), inset 0 -2px 0 rgba(0,0,0,.08);
    cursor: default; position: relative;
    animation: die-roll .45s ease-out;
}
.die-face.size-sm { --die-size: 36px; border-radius: 8px; }
.die-face.size-lg { --die-size: 72px; border-radius: 16px; }
.die-face.clickable { cursor: pointer; }
.die-face.clickable:hover { border-color: var(--accent, #4fc3dd); }
.die-face:disabled { opacity: 1; }
.die-face.blank { background: #e9e4d8; }
.die-face.held { border-color: var(--accent, #4fc3dd); box-shadow: 0 0 0 3px var(--accent, #4fc3dd), 0 3px 8px rgba(0,0,0,.35); transform: translateY(-4px); animation: none; }
.die-face .pip { width: 100%; height: 100%; border-radius: 50%; background: transparent; place-self: center; }
.die-face .pip.on { background: #1b1b1b; transform: scale(.55); }
@keyframes die-roll {
    0% { transform: rotate(-25deg) scale(.7); opacity: .3; }
    60% { transform: rotate(8deg) scale(1.08); opacity: 1; }
    100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .die-face { animation: none; } }