/* ============================================================
   wc-dice — the dice element (lives in the active player's corner)
   ============================================================ */

wc-dice {
    display: block;
}

wc-dice #dice {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
    aspect-ratio: 1 / 1;
    cursor: pointer;
    transition: all 200ms ease;
    overflow: hidden;
    background: linear-gradient(145deg, #faf8f5, #e8e4df);
    box-shadow:
        3px 3px 8px rgba(0, 0, 0, 0.25),
        -1px -1px 4px rgba(255, 255, 255, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 14%;
}

wc-dice .dice-face {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10%;
}

wc-dice .dice-face.hidden {
    display: none;
}

wc-dice .dice-dot {
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #333, #111);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.6),
        0 0.5px 0 rgba(255, 255, 255, 0.15);
}