/* ===========================================================
   ACREW Classic Traveller Dice
   =========================================================== */

.dice-container {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    margin: 30px 0;
}


/* ===========================================================
   Die body
   =========================================================== */

.die {
    position: relative;
    overflow: hidden;

    width: 140px;
    height: 140px;

    border-radius: 22px;

    border: 2px solid #7ea2ff;

    background:
        radial-gradient(
            circle at 32% 22%,
            rgba(255,255,255,.34),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #3970ff 0%,
            #2454e5 38%,
            #163ab8 70%,
            #0b2785 100%
        );

    box-shadow:
        inset 0 3px 5px rgba(255,255,255,.42),
        inset 0 -8px 14px rgba(0,0,0,.38),
        inset 5px 0 8px rgba(255,255,255,.10),
        0 12px 18px rgba(0,0,0,.38);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}


/* ===========================================================
   Gloss reflection
   =========================================================== */

.die::after {
    content: "";

    position: absolute;
    z-index: 1;

    top: 7px;
    left: 10px;

    width: 72%;
    height: 42%;

    border-radius: 50%;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.24) 0%,
            rgba(255,255,255,.08) 55%,
            transparent 100%
        );

    transform: rotate(-8deg);

    pointer-events: none;
}


/* ===========================================================
   Subtle edge highlight
   =========================================================== */

.die::before {
    content: "";

    position: absolute;
    z-index: 2;

    inset: 6px;

    border-radius: 17px;

    border: 1px solid rgba(255,255,255,.20);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.12),
        inset 0 -1px 2px rgba(0,0,0,.16);

    pointer-events: none;
}


/* ===========================================================
   Pip appearance
   =========================================================== */

.pip {
    position: absolute;
    z-index: 3;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 34% 28%,
            #ffffff 0%,
            #ffffff 58%,
            #f4f4f4 77%,
            #dddddd 100%
        );

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.95),
        inset 0 -1px 2px rgba(0,0,0,.10),
        0 1px 1px rgba(0,0,0,.18),
        0 0 0 1px rgba(255,255,255,.16);
}


/* ===========================================================
   Pip positions
   =========================================================== */

.top-left {
    top: 20px;
    left: 20px;
}

.top-center {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.top-right {
    top: 20px;
    right: 20px;
}

.middle-left {
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
}

.center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.middle-right {
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

.bottom-left {
    bottom: 20px;
    left: 20px;
}

.bottom-center {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.bottom-right {
    bottom: 20px;
    right: 20px;
}


/* ===========================================================
   Hover
   =========================================================== */

.die:hover {
    transform: translateY(-4px);

    filter: brightness(1.05);

    box-shadow:
        inset 0 3px 5px rgba(255,255,255,.42),
        inset 0 -8px 14px rgba(0,0,0,.38),
        inset 5px 0 8px rgba(255,255,255,.10),
        0 17px 26px rgba(0,0,0,.48);
}


/* ===========================================================
   Dice roll animation
   =========================================================== */

@keyframes dice-roll {

    0% {
        transform:
            translateY(0)
            rotate(0deg)
            scale(1);

        filter: blur(0);
    }

    20% {
        transform:
            translateY(-12px)
            rotate(75deg)
            scale(1.06);

        filter: blur(.7px);
    }

    45% {
        transform:
            translateY(-5px)
            rotate(165deg)
            scale(.98);

        filter: blur(1px);
    }

    70% {
        transform:
            translateY(3px)
            rotate(285deg)
            scale(1.03);

        filter: blur(.5px);
    }

    88% {
        transform:
            translateY(-2px)
            rotate(345deg)
            scale(.99);

        filter: blur(0);
    }

    100% {
        transform:
            translateY(0)
            rotate(360deg)
            scale(1);

        filter: blur(0);
    }
}

.die.rolling {
    animation:
        dice-roll .28s ease-out;
}


/* ===========================================================
   Mobile
   =========================================================== */

@media (max-width: 520px) {

    .dice-container {
        gap: 20px;
    }

    .die {
        width: 118px;
        height: 118px;
        border-radius: 18px;
    }

    .die::before {
        inset: 5px;
        border-radius: 14px;
    }

    .die::after {
        top: 6px;
        left: 8px;
        width: 74%;
        height: 40%;
    }

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

    .top-left {
        top: 18px;
        left: 18px;
    }

    .top-center {
        top: 18px;
    }

    .top-right {
        top: 18px;
        right: 18px;
    }

    .middle-left {
        left: 18px;
    }

    .middle-right {
        right: 18px;
    }

    .bottom-left {
        bottom: 18px;
        left: 18px;
    }

    .bottom-center {
        bottom: 18px;
    }

    .bottom-right {
        bottom: 18px;
        right: 18px;
    }
}