"use strict";

/*
======================================================
TRIPLE STAR
SPINNING WHEEL - PLAYER
CASINO STYLE
======================================================
*/

body.player-wheel-open {
    overflow: hidden;
}


/*
======================================================
OVERLAY
======================================================
*/

.player-wheel-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        radial-gradient(
            circle at center,
            rgba(18, 42, 68, 0.28) 0%,
            rgba(0, 0, 0, 0.92) 72%
        );

    backdrop-filter: blur(3px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease;
}


.player-wheel-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/*
======================================================
MODALE
======================================================
*/

.player-wheel-modal {
    position: relative;

    width: min(
        92vw,
        640px
    );

    max-height: 96vh;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding:
        22px
        26px
        26px;

    border:
        2px solid #ffe27a;

    border-radius: 28px;

    background:
        linear-gradient(
            180deg,
            #102b48 0%,
            #061421 45%,
            #020810 100%
        );

    box-shadow:
        0 0 0 2px #6b4700,
        0 0 0 5px #171005,
        0 0 34px rgba(255, 198, 0, 0.55),
        0 24px 90px rgba(0, 0, 0, 0.92),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);

    color: #ffffff;

    text-align: center;

    overflow: auto;
}


.player-wheel-modal::before {
    content: "";

    position: absolute;
    inset: 8px;

    border:
        1px solid rgba(255, 215, 90, 0.22);

    border-radius: 21px;

    pointer-events: none;
}


/*
======================================================
HEADER
======================================================
*/

.player-wheel-header {
    position: relative;
    z-index: 2;

    width: 100%;
}


.player-wheel-header h2 {
    margin:
        0
        0
        5px;

    color: #ffd84f;

    font-size:
        clamp(
            24px,
            3.2vw,
            36px
        );

    font-weight: 900;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    text-shadow:
        0 2px 0 #845000,
        0 4px 8px rgba(0, 0, 0, 0.85),
        0 0 12px rgba(255, 211, 50, 0.75),
        0 0 28px rgba(255, 171, 0, 0.35);
}


.player-wheel-header p {
    margin:
        0
        0
        16px;

    color: #f7f7f7;

    font-size:
        clamp(
            13px,
            1.8vw,
            17px
        );

    font-weight: 700;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.85);
}


/*
======================================================
AREA RUOTA
======================================================
*/

.player-wheel-stage {
    position: relative;

    width:
        min(
            74vw,
            438px
        );

    aspect-ratio: 1 / 1;

    display: flex;
    align-items: center;
    justify-content: center;

    margin:
        8px
        auto
        18px;

    filter:
        drop-shadow(
            0 16px 18px rgba(0, 0, 0, 0.58)
        );
}


/*
======================================================
ANELLO ESTERNO CASINO
======================================================
*/

.player-wheel-stage::before {
    content: "";

    position: absolute;

    inset: -18px;

    border-radius: 50%;

    background:
        repeating-conic-gradient(
            from 0deg,
            #fff2a8 0deg 3deg,
            #cf8d00 3deg 7deg,
            #5b3700 7deg 10deg
        );

    box-shadow:
        inset 0 0 0 4px #422600,
        inset 0 0 16px rgba(255, 255, 255, 0.32),
        0 0 0 4px #181000,
        0 0 24px rgba(255, 188, 0, 0.75),
        0 0 55px rgba(255, 145, 0, 0.35);

    z-index: 0;
}


.player-wheel-stage::after {
    content: "";

    position: absolute;

    inset: -8px;

    border-radius: 50%;

    border:
        4px solid #ffcf37;

    box-shadow:
        inset 0 0 0 2px #6b4000,
        inset 0 0 14px rgba(255, 255, 255, 0.25);

    pointer-events: none;

    z-index: 2;
}


/*
======================================================
RUOTA
======================================================
*/

.player-wheel {
    position: relative;

    z-index: 1;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    border:
        8px solid #b87900;

    background:
        conic-gradient(
            #b51f24 0deg 45deg,
            #d89200 45deg 90deg,
            #0b4f83 90deg 135deg,
            #17643a 135deg 180deg,
            #5d2579 180deg 225deg,
            #bc5107 225deg 270deg,
            #0a625d 270deg 315deg,
            #7f171c 315deg 360deg
        );

    box-shadow:
        inset 0 0 0 3px #f8d75d,
        inset 0 0 0 7px rgba(68, 38, 0, 0.9),
        inset 0 0 34px rgba(0, 0, 0, 0.52),
        0 0 0 2px #211400,
        0 0 28px rgba(255, 193, 0, 0.6);

    transform:
        rotate(0deg);

    transform-origin:
        center center;

    overflow: hidden;
}


/*
======================================================
RIFLESSO RUOTA
======================================================
*/

.player-wheel::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 32% 22%,
            rgba(255, 255, 255, 0.25) 0%,
            rgba(255, 255, 255, 0.06) 26%,
            transparent 44%
        );

    pointer-events: none;

    z-index: 5;
}


/*
======================================================
SPICCHI
======================================================
*/

.player-wheel-segment {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 50%;
    height: 50%;

    transform-origin:
        0 0;

    transform:
        rotate(
            calc(
                var(--segment-index)
                *
                var(--segment-angle)
            )
        );

    pointer-events: none;
}


.player-wheel-segment::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #ffe27c,
            #8f5c00
        );

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.65);

    transform-origin: left center;
}


/*
======================================================
ETICHETTE PREMI
======================================================
*/

.player-wheel-segment-label {
    position: absolute;

    top: 20%;
    left: 2%;

    width: 96%;

    display: flex;
    align-items: center;
    justify-content: center;

    transform:
        rotate(22.5deg);

    transform-origin:
        center center;

    color: #fff4a8;

    font-family:
        "Arial Black",
        "Trebuchet MS",
        Arial,
        sans-serif;

    font-size:
        clamp(
            12px,
            1.5vw,
            17px
        );

    font-weight: 900;

    letter-spacing: -0.25px;

    line-height: 1;

    text-align: center;

    white-space: nowrap;

    text-transform: uppercase;

    text-shadow:
        0 2px 0 #6d3600,
        0 3px 2px #000000,
        0 0 5px rgba(255, 215, 70, 0.9),
        0 0 12px rgba(255, 120, 0, 0.45);
}


.player-wheel-segment:nth-child(3)
.player-wheel-segment-label,
.player-wheel-segment:nth-child(4)
.player-wheel-segment-label,
.player-wheel-segment:nth-child(5)
.player-wheel-segment-label,
.player-wheel-segment:nth-child(6)
.player-wheel-segment-label {
    transform:
        rotate(202.5deg);
}


/*
======================================================
INDICATORE SUPERIORE
======================================================
*/

.player-wheel-pointer {
    position: absolute;

    top: -28px;
    left: 50%;

    z-index: 15;

    width: 58px;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    transform:
        translateX(-50%);

    color: transparent;

    font-size: 0;

    pointer-events: none;
}


.player-wheel-pointer::before {
    content: "";

    width: 0;
    height: 0;

    border-left:
        22px solid transparent;

    border-right:
        22px solid transparent;

    border-top:
        46px solid #ffd747;

    filter:
        drop-shadow(
            0 4px 0 #754600
        )
        drop-shadow(
            0 7px 8px rgba(0, 0, 0, 0.85)
        );
}


.player-wheel-pointer::after {
    content: "";

    position: absolute;

    top: 3px;

    width: 24px;
    height: 14px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 28%,
            #fff8b9 0%,
            #ffd337 35%,
            #9f6500 100%
        );

    border:
        2px solid #4b2b00;

    box-shadow:
        0 0 9px rgba(255, 205, 45, 0.85);
}


/*
======================================================
CENTRO RUOTA
======================================================
*/

.player-wheel-center {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 12;

    width: 92px;
    height: 92px;

    display: flex;
    align-items: center;
    justify-content: center;

    transform:
        translate(
            -50%,
            -50%
        );

    border:
        6px solid #f6cb3e;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 28%,
            #fff8bf 0%,
            #ffe35f 19%,
            #d59500 58%,
            #633700 100%
        );

    color: #4f2b00;

    font-size: 40px;

    font-weight: 900;

    text-shadow:
        0 1px 0 #fff1a0;

    box-shadow:
        inset 0 0 0 4px #7e4c00,
        inset 0 -9px 14px rgba(80, 40, 0, 0.42),
        0 0 0 4px #241400,
        0 0 20px rgba(255, 197, 0, 0.95),
        0 8px 18px rgba(0, 0, 0, 0.7);

    pointer-events: none;
}


/*
======================================================
STATO
======================================================
*/

.player-wheel-status {
    min-height: 28px;

    margin:
        0
        0
        14px;

    color: #ffffff;

    font-size:
        clamp(
            15px,
            2vw,
            19px
        );

    font-weight: 800;

    text-align: center;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.85);
}


/*
======================================================
PULSANTE GIRA
======================================================
*/

.player-wheel-spin-button {
    position: relative;

    min-width: 210px;

    padding:
        15px
        38px;

    border:
        3px solid #ffe778;

    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            #ffe95a 0%,
            #ffc51f 42%,
            #e68d00 100%
        );

    color: #201400;

    font-size:
        23px;

    font-weight: 900;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    cursor: pointer;

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.65),
        inset 0 -4px 0 rgba(112, 56, 0, 0.38),
        0 6px 0 #744500,
        0 11px 16px rgba(0, 0, 0, 0.6),
        0 0 18px rgba(255, 195, 0, 0.48);

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


.player-wheel-spin-button:hover:not(:disabled) {
    filter:
        brightness(1.08);

    transform:
        translateY(-2px);

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.7),
        inset 0 -4px 0 rgba(112, 56, 0, 0.38),
        0 8px 0 #744500,
        0 14px 20px rgba(0, 0, 0, 0.6),
        0 0 24px rgba(255, 205, 20, 0.58);
}


.player-wheel-spin-button:active:not(:disabled) {
    transform:
        translateY(4px);

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.55),
        inset 0 -2px 0 rgba(112, 56, 0, 0.3),
        0 2px 0 #744500,
        0 5px 8px rgba(0, 0, 0, 0.6);
}


.player-wheel-spin-button:disabled {
    opacity: 0.55;

    cursor: not-allowed;

    filter:
        grayscale(0.25);
}


/*
======================================================
TABLET
======================================================
*/

@media (
    max-width: 900px
) {

    .player-wheel-overlay {
        padding: 12px;
    }


    .player-wheel-modal {
        width:
            min(
                96vw,
                570px
            );

        padding:
            18px
            18px
            22px;
    }


    .player-wheel-stage {
        width:
            min(
                70vw,
                395px
            );
    }


    .player-wheel-center {
        width: 76px;
        height: 76px;

        border-width: 5px;

        font-size: 34px;
    }

}

/*
======================================================
MOBILE
======================================================
*/

@media (
    max-width: 640px
)
and
(
    orientation: portrait
) {

    .player-wheel-overlay {
        padding:
            max(8px, env(safe-area-inset-top))
            8px
            max(8px, env(safe-area-inset-bottom));
    }


    .player-wheel-modal {
        width: min(94vw, 430px);
        max-height: 94vh;

        padding:
            12px
            10px
            16px;

        border-radius: 18px;

        overflow: hidden;
    }


    .player-wheel-modal::before {
        inset: 5px;

        border-radius: 14px;
    }


    .player-wheel-header h2 {
        margin-bottom: 3px;

        font-size:
            clamp(
                20px,
                6vw,
                27px
            );

        line-height: 1.05;

        letter-spacing: 0.5px;
    }


    .player-wheel-header p {
        margin-bottom: 8px;

        font-size:
            clamp(
                11px,
                3.5vw,
                14px
            );

        line-height: 1.15;
    }


    .player-wheel-stage {
        width:
            min(
                68vw,
                285px
            );

        margin:
            8px
            auto
            11px;
    }


    .player-wheel-stage::before {
        inset: -11px;
    }


    .player-wheel-stage::after {
        inset: -5px;

        border-width: 3px;
    }


    .player-wheel {
        border-width: 6px;
    }


    .player-wheel-pointer {
        top: -20px;

        width: 44px;
        height: 54px;
    }


    .player-wheel-pointer::before {
        border-left-width: 17px;
        border-right-width: 17px;
        border-top-width: 35px;
    }


    .player-wheel-pointer::after {
        width: 18px;
        height: 11px;
    }


    .player-wheel-center {
        width: 56px;
        height: 56px;

        border-width: 4px;

        font-size: 24px;
    }


    .player-wheel-segment-label {
        top: 9%;

        font-size:
            clamp(
                9px,
                2.8vw,
                13px
            );

        letter-spacing: -0.2px;
    }


    .player-wheel-status {
        min-height: 20px;

        margin-bottom: 9px;

        font-size:
            clamp(
                13px,
                3.4vw,
                15px
            );

        line-height: 1.15;
    }


    .player-wheel-spin-button {
        min-width: 165px;

        padding:
            10px
            26px;

        border-width: 2px;

        font-size:
            clamp(
                18px,
                5vw,
                20px
            );

        margin: 0;
    }

}

/*
======================================================
MOBILE ORIZZONTALE
======================================================
*/

@media (
    max-height: 520px
)
and
(
    orientation: landscape
) {

    .player-wheel-overlay {
        padding:
            max(6px, env(safe-area-inset-top))
            max(8px, env(safe-area-inset-right))
            max(6px, env(safe-area-inset-bottom))
            max(8px, env(safe-area-inset-left));
    }


    .player-wheel-modal {
        width: min(96vw, 860px);
        max-height: 96vh;

        display: grid;

        grid-template-columns:
            minmax(250px, 1fr)
            minmax(180px, 0.72fr);

        grid-template-rows:
            auto
            1fr
            auto
            auto;

        grid-template-areas:
            "header header"
            "wheel status"
            "wheel button"
            "wheel button";

        column-gap: 26px;
        row-gap: 6px;

        align-items: center;

        padding:
            10px
            20px
            12px;

        overflow: hidden;
    }


    .player-wheel-header {
        grid-area: header;

        width: 100%;

        margin: 0;

        text-align: center;
    }


    .player-wheel-header h2 {
        margin:
            0
            0
            2px;

        font-size:
            clamp(
                18px,
                3vw,
                26px
            );

        line-height: 1.05;
    }


    .player-wheel-header p {
        margin:
            0
            0
            2px;

        font-size:
            clamp(
                10px,
                1.6vw,
                13px
            );

        line-height: 1.1;
    }


    .player-wheel-stage {
        grid-area: wheel;

        width:
            min(
                62vh,
                310px
            );

        max-width: 100%;

        margin:
            4px
            auto
            4px;
    }


    .player-wheel-stage::before {
        inset: -10px;
    }


    .player-wheel-stage::after {
        inset: -5px;

        border-width: 2px;
    }


    .player-wheel {
        border-width: 6px;
    }


    .player-wheel-pointer {
        top: -18px;

        width: 42px;
        height: 50px;
    }


    .player-wheel-pointer::before {
        border-left-width: 15px;
        border-right-width: 15px;
        border-top-width: 31px;
    }


    .player-wheel-pointer::after {
        top: 2px;

        width: 16px;
        height: 10px;
    }


    .player-wheel-center {
        width: 54px;
        height: 54px;

        border-width: 3px;

        font-size: 23px;
    }


    .player-wheel-segment-label {
        top: 8%;

        font-size:
            clamp(
                8px,
                1.35vw,
                11px
            );

        letter-spacing: -0.2px;
    }


    .player-wheel-status {
        grid-area: status;

        align-self: end;

        min-height: 42px;

        margin:
            0
            0
            8px;

        padding:
            0
            4px;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size:
            clamp(
                13px,
                1.8vw,
                17px
            );

        line-height: 1.2;

        text-align: center;
    }


    .player-wheel-spin-button {
        grid-area: button;

        align-self: start;
        justify-self: center;

        min-width: 165px;

        padding:
            11px
            28px;

        border-width: 2px;

        font-size:
            clamp(
                18px,
                2.2vw,
                22px
            );

        margin: 0;
    }

}
/*
======================================================
NUMERI PREMI - CENTRATI NEGLI SPICCHI
======================================================
*/

.player-wheel-segment-label {
    top: 17%;
    left: 25%;

    width: 70%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff4a8;

    font-size:
        clamp(
            20px,
            2.5vw,
            30px
        );

    font-weight: 900;

    letter-spacing: 0;

    line-height: 1;

    white-space: nowrap;

    text-align: center;

    text-shadow:
        0 2px 0 #6d3600,
        0 3px 3px #000000,
        0 0 6px rgba(255, 215, 70, 0.95);

    transform:
        rotate(22.5deg);

    transform-origin:
        center center;
}


.player-wheel-segment:nth-child(3)
.player-wheel-segment-label,
.player-wheel-segment:nth-child(4)
.player-wheel-segment-label,
.player-wheel-segment:nth-child(5)
.player-wheel-segment-label,
.player-wheel-segment:nth-child(6)
.player-wheel-segment-label {
    transform:
        rotate(202.5deg);
}


/*
======================================================
NUMERI PREMI - MOBILE VERTICALE
======================================================
*/

@media (
    max-width: 640px
)
and
(
    orientation: portrait
) {

    .player-wheel-segment-label {
        top: 17%;
        left: 25%;

        width: 70%;

        font-size:
            clamp(
                16px,
                5vw,
                21px
            );
    }

}


/*
======================================================
NUMERI PREMI - MOBILE ORIZZONTALE
======================================================
*/

@media (
    max-height: 520px
)
and
(
    orientation: landscape
) {

    .player-wheel-segment-label {
        top: 17%;
        left: 25%;

        width: 70%;

        font-size:
            clamp(
                14px,
                2.2vw,
                19px
            );
    }

}