/* /Pages/Dice.razor.rz.scp.css */
*[b-368g5qjvyt] {
    box-sizing: border-box;
}

.container[b-368g5qjvyt] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 3em;
    overflow: hidden;
    position: relative;
    --diceEdgeClr: #22262f;
    --faceClr: #1e2022;
    --faceBeatClr: linear-gradient(to bottom right, #e2e8f0, #64748b);
    --liClr: rgb(212 212 216);
}

.container[b-368g5qjvyt]::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: radial-gradient(circle, #dbeafe 10%, transparent 11%);
    background-size: 1em 1em;
    opacity: 0.5;
    inset: 0;
    z-index: 0;
}

.container > *[b-368g5qjvyt] {
    z-index: 1;
}

.component-header[b-368g5qjvyt] {
    position: relative;
}

.component-header button[b-368g5qjvyt] {
    --wh: 3em;

    width: var(--wh);
    height: var(--wh);
    background: var(
            --matchBg,
            linear-gradient(to bottom right, #050708, #303339)
    );
    border: none;
    outline: none;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: calc(100% + 2em);
    cursor: pointer;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.component-header button[b-368g5qjvyt]::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--liClr);
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 18 2.5-2.5M18 6H9m9 0v9m0-9-6.5 6.5' stroke='%231C274C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-size: 60%;
    mask-repeat: no-repeat;
    mask-position: center;
}

.component-header h2[b-368g5qjvyt] {
    text-align: center;
    color: transparent;
    position: relative;
    font-size: 1.8em;
    font-weight: 800;
    font-style: italic;
    background: var(
            --matchBg,
            linear-gradient(to bottom right, #050708, #303339)
    );
    background-clip: text;
    filter: drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.1));
}

[data-theme="custom"][b-368g5qjvyt] {
    --matchBg: linear-gradient(to bottom right, #0f172a, #4f453f) !important;
}

@media (max-width: 1024px) {
    .component-header h2[b-368g5qjvyt] {
        font-size: 1.5em;
    }

    .component-header button[b-368g5qjvyt] {
        --wh: 2em;
    }
}



.dice-container[b-368g5qjvyt] {
    display: flex;
    height: 10rem;
    width: 10rem;
    align-items: center;
    justify-content: center;
    perspective: 600px;
}

.dice-container[b-368g5qjvyt]::after {
    content: "";
    width: 4em;
    height: 4em;
    background: rgb(30 32 34 / 0.25);
    position: absolute;
    bottom: 0;
    border-radius: 50%;
    transform: rotateX(85deg) translateZ(-50px);
    filter: blur(40px);
}

.dice[b-368g5qjvyt] {
    --wh: 70px;
    width: var(--wh);
    height: var(--wh);
    position: relative;
    transition: 1s;
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1.2);
    background: var(--diceEdgeClr);
    transform-style: preserve-3d;
}

.dice .face[b-368g5qjvyt] {
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 1rem;
    padding: 0.75rem;
    background: var(--faceClr);
    border: 2px solid var(--diceEdgeClr);
    transform-style: preserve-3d;
    display: grid;
    place-items: center;

    span {
        --wh: 0.7rem;
        width: var(--wh);
        height: var(--wh);
        background: var(--faceBeatClr);
        border-radius: 50%;
        box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.3);
    }

    & span:nth-of-type(1)[b-368g5qjvyt] {
        grid-area: a;
    }

    & span:nth-of-type(2)[b-368g5qjvyt] {
        grid-area: b;
    }

    & span:nth-of-type(3)[b-368g5qjvyt] {
        grid-area: c;
    }

    & span:nth-of-type(4)[b-368g5qjvyt] {
        grid-area: d;
    }

    & span:nth-of-type(5)[b-368g5qjvyt] {
        grid-area: e;
    }

    & span:nth-of-type(6)[b-368g5qjvyt] {
        grid-area: f;
    }

    &[b-368g5qjvyt]::before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        background: var(--diceEdgeClr);
        border-radius: inherit;
        transform: translateZ(-2px) scale(1.08);
    }
}

.front[b-368g5qjvyt] {
    transform: translateZ(calc(var(--wh) / 2 + 1px));
    grid-template-areas:
    ". . ."
    ". a ."
    ". . .";
}

.top[b-368g5qjvyt] {
    transform: rotateX(90deg) translateZ(calc(var(--wh) / 2 + 1px));
    grid-template-areas:
    "a . ."
    ". . ."
    ". . b";
}

.left[b-368g5qjvyt] {
    transform: rotateY(-90deg) translateZ(calc(var(--wh) / 2 + 1px));
    grid-template-areas:
    "a . ."
    ". b ."
    ". . c";
}

.right[b-368g5qjvyt] {
    transform: rotateY(90deg) translateZ(calc(var(--wh) / 2 + 1px));
    grid-template-areas:
    "a . b"
    ". . ."
    "c . d";
}

.bottom[b-368g5qjvyt] {
    transform: rotateX(-90deg) translateZ(calc(var(--wh) / 2 + 1px));
    grid-template-areas:
    "a . b"
    ". c ."
    "d . e";
}

.back[b-368g5qjvyt] {
    transform: rotateY(180deg) translateZ(calc(var(--wh) / 2 + 1px));
    grid-template-areas:
    "a . b"
    "c . d"
    "e . f";
}

.dice[data-face="1"][b-368g5qjvyt] {
    transform: translateZ(calc(var(--wh) / 2)) rotateX(20deg) rotateY(20deg);
}

.dice[data-face="2"][b-368g5qjvyt] {
    transform: translateZ(calc(var(--wh) / 2)) rotateX(-70deg) rotateZ(20deg);
}

.dice[data-face="3"][b-368g5qjvyt] {
    transform: translateZ(calc(var(--wh) / 2)) rotateY(70deg) rotateZ(25deg);
}

.dice[data-face="4"][b-368g5qjvyt] {
    transform: translateZ(calc(var(--wh) / 2)) rotateY(-107deg) rotateZ(20deg);
}

.dice[data-face="5"][b-368g5qjvyt] {
    transform: translateZ(calc(var(--wh) / 2)) rotateX(110deg) rotateZ(-20deg);
}

.dice[data-face="6"][b-368g5qjvyt] {
    transform: translateZ(calc(var(--wh) / 2)) rotateY(158deg) rotateX(-20deg);
}