/* ===================================================================
   Farkle - shared visual primitives (dice).
   =================================================================== */

:root {
    --farkle-felt:      #1a2e3a;
    --farkle-felt-dark: #0f1d27;
    --farkle-gold:      #f6b73c;
    --farkle-red:       #d4213d;
    --farkle-blue:      #4dabff;
}

.farkle-die {
    --die-bg: linear-gradient(160deg, #ffffff 0%, #d8d4c8 100%);
    --die-pip: #1a1a1a;
    width: 64px; height: 64px;
    background: var(--die-bg);
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(0,0,0,.4), 0 2px 3px rgba(0,0,0,.25),
                0 0 0 1px rgba(255,255,255,.15) inset;
    padding: 6px;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease;
}
.farkle-die__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 100%; height: 100%;
    gap: 2px;
}
.farkle-die__pip {
    border-radius: 50%;
    background: transparent;
}
.farkle-die__pip.is-on {
    background: var(--die-pip);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.4);
}
.farkle-die.farkle-die--kept {
    --die-bg: linear-gradient(160deg, #f6b73c 0%, #c47b00 100%);
    --die-pip: #1a1a1a;
    box-shadow: 0 6px 14px rgba(246,183,60,.45),
                0 0 0 2px rgba(246,183,60,.6) inset;
}
.farkle-die.farkle-die--rolling { animation: farkleRoll .6s ease-in-out; }
@keyframes farkleRoll {
    0%   { transform: rotate(0)    translateY(0); }
    30%  { transform: rotate(180deg) translateY(-12px); }
    65%  { transform: rotate(360deg) translateY(0); }
    100% { transform: rotate(360deg) translateY(0); }
}
.farkle-die.is-selected {
    outline: 3px solid var(--farkle-gold);
    outline-offset: 2px;
    transform: translateY(-4px);
}
.farkle-die.is-scoring-hint {
    box-shadow: 0 6px 14px rgba(246,183,60,.6),
                0 0 0 2px rgba(246,183,60,.45) inset;
}
.farkle-die.is-disabled {
    opacity: .4; filter: grayscale(.5);
    pointer-events: none;
}
.farkle-die.farkle-die--sm { width: 42px; height: 42px; padding: 4px; }