/* ============================================
   DOBBELSTENEN - Stylesheet
   ============================================ */

.dobbelstenen-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 20px 0;
}

/* ---------- Dice Grid ---------- */
.dice-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    min-height: 160px;
    align-items: flex-end;
}

/* ---------- Individual Die ---------- */
.dobbelsteen {
    width: 110px;
    height: 110px;
    background: var(--bg-white);
    border-radius: 16px;
    border: 3px solid #E8E8F0;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    will-change: transform, box-shadow;
}

.dobbelsteen:hover {
    box-shadow:
        0 6px 20px rgba(108, 99, 255, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ---------- Pips (dots) ---------- */
.pip {
    width: 20px;
    height: 20px;
    background: var(--text-dark);
    border-radius: 50%;
    display: block;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.3);
    transition: opacity 0.1s ease;
}

/* Position pips in the 3x3 grid */
.pip-top-left     { grid-column: 1; grid-row: 1; align-self: start; justify-self: start; }
.pip-top-right    { grid-column: 3; grid-row: 1; align-self: start; justify-self: end; }
.pip-middle-left  { grid-column: 1; grid-row: 2; align-self: center; justify-self: start; }
.pip-center       { grid-column: 2; grid-row: 2; align-self: center; justify-self: center; }
.pip-middle-right { grid-column: 3; grid-row: 2; align-self: center; justify-self: end; }
.pip-bottom-left  { grid-column: 1; grid-row: 3; align-self: end; justify-self: start; }
.pip-bottom-right { grid-column: 3; grid-row: 3; align-self: end; justify-self: end; }

/* ---------- Toss Animation ---------- */
@keyframes diceToss {
    0% {
        transform: translateY(0) scale(1);
        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.08),
            0 2px 4px rgba(0, 0, 0, 0.04);
    }
    /* Squish down - anticipation */
    8% {
        transform: translateY(6px) scaleX(1.08) scaleY(0.88);
        box-shadow:
            0 2px 6px rgba(0, 0, 0, 0.12);
    }
    /* Launch upward */
    28% {
        transform: translateY(-110px) scaleX(0.93) scaleY(1.06);
        box-shadow:
            0 65px 28px rgba(0, 0, 0, 0.04);
    }
    /* Peak height */
    42% {
        transform: translateY(-140px) scale(0.88);
        box-shadow:
            0 85px 38px rgba(0, 0, 0, 0.02);
    }
    /* Falling fast */
    62% {
        transform: translateY(-15px) scale(1.02);
        box-shadow:
            0 10px 14px rgba(0, 0, 0, 0.1);
    }
    /* Impact squish */
    70% {
        transform: translateY(0) scaleX(1.12) scaleY(0.86);
        box-shadow:
            0 2px 24px rgba(108, 99, 255, 0.35);
    }
    /* First bounce up */
    80% {
        transform: translateY(-22px) scaleX(0.97) scaleY(1.04);
        box-shadow:
            0 18px 12px rgba(0, 0, 0, 0.06);
    }
    /* Second settle */
    89% {
        transform: translateY(0) scaleX(1.04) scaleY(0.97);
        box-shadow:
            0 3px 12px rgba(0, 0, 0, 0.08);
    }
    /* Mini bounce */
    95% {
        transform: translateY(-5px) scale(1.01);
        box-shadow:
            0 7px 10px rgba(0, 0, 0, 0.06);
    }
    100% {
        transform: translateY(0) scale(1);
        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.08),
            0 2px 4px rgba(0, 0, 0, 0.04);
    }
}

/* Impact ring pulse on landing */
@keyframes impactRing {
    0% {
        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.08),
            0 0 0 0 rgba(108, 99, 255, 0.4);
    }
    50% {
        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.08),
            0 0 0 14px rgba(108, 99, 255, 0);
    }
    100% {
        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.08),
            0 0 0 0 rgba(108, 99, 255, 0);
    }
}

/* Pip pop-in effect */
@keyframes pipPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.4);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Rolling state */
.dobbelsteen.rolling {
    animation: diceToss 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    border-color: var(--primary-light);
}

.dobbelsteen.rolling .pip {
    opacity: 0.3;
}

/* Landed state */
.dobbelsteen.landed {
    animation: impactRing 0.45s ease-out forwards;
}

.dobbelsteen.landed .pip {
    animation: pipPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ---------- Total Display ---------- */
.dice-total {
    font-size: 28px;
    font-weight: 800;
    color: var(--primary);
    text-align: center;
    padding: 8px 24px;
    background: #EEF0FF;
    border-radius: var(--radius-md);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.dice-total.hide {
    display: none;
}

@keyframes totalPop {
    0% { transform: scale(0.7); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.dice-total.show {
    visibility: visible;
    opacity: 1;
    animation: totalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ---------- Roll Button ---------- */
/* Base styles inherited from .tool-action-btn in style.css */

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
    .dobbelsteen {
        width: 80px;
        height: 80px;
        padding: 12px;
        border-radius: 12px;
    }

    .pip {
        width: 14px;
        height: 14px;
    }

    .dice-grid {
        gap: 14px;
        min-height: 120px;
    }

    .dice-total {
        font-size: 22px;
    }

    .dobbelstenen-container {
        gap: 24px;
    }
}