/* =============================================================
   Roleta 3D — kiosk 1080x1920
   ============================================================= */
@font-face {
    font-family: "ComercioSans";
    src: url("../fonts/ComercioSans/ComercioSans-Book.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "ComercioSans";
    src: url("../fonts/ComercioSans/ComercioSans-Bold.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
body { font-family: "ComercioSans", system-ui, sans-serif; color: #fff; }

/* Viewport scaling — mantém o stage 1080x1920 sempre proporcional */
#appViewport {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: #000;
}
#appStage {
    position: relative;
    width: 1080px; height: 1920px;
    transform-origin: center center;
}

/* Background */
#app {
    position: relative;
    width: 100%; height: 100%;
    overflow: hidden;
}
.roleta_background {
    background: url("../images/roleta_bg_001.jpg") center/cover no-repeat;
}

/* Logos */
.logo-top, .logo-bottom {
    position: absolute; left: 50%; transform: translateX(-50%);
    background-position: center; background-repeat: no-repeat; background-size: contain;
}
.logo-top    { top: 90px;   width: 820px; height: 220px; background-image: url("../images/logo_dd.svg"); }
.logo-bottom { bottom: 80px; width: 600px; height: 120px; background-image: url("../images/parceiros_logo.svg"); }

/* =============================================================
   Cena 3D da roda
   ============================================================= */
#wheelScene {
    position: absolute;
    left: 50%; top: 340px;
    transform: translateX(-50%);
    width: 700px; height: 1080px;

    /* perspectiva = a "câmera" — quanto menor, mais dramático o 3D */
    perspective: 1800px;
    perspective-origin: 50% 50%;
}

#wheel {
    position: absolute;
    left: 50%; top: 50%;
    width: 320px; height: 320px;
    margin-left: -160px; margin-top: -160px;
    transform-style: preserve-3d;
    /* o eixo da rotação é o X (horizontal), causando movimento vertical dos cards */
    transform: rotateX(0deg);
    will-change: transform;
}

/* Cada card */
.rcard {
    position: absolute;
    left: 50%; top: 50%;
    width: 320px; height: 320px;
    margin-left: -160px; margin-top: -160px;

    display: flex; align-items: center; justify-content: center;
    border-radius: 28px;
    backface-visibility: visible;
    transform-style: preserve-3d;
    will-change: transform, filter, opacity;

    background:
        linear-gradient(150deg, #ffffff 0%, #d8e0ee 60%, #a9b6cd 100%);
    box-shadow:
        inset 0 0 0 4px rgba(255,255,255,0.6),
        inset 0 -18px 30px rgba(0,0,0,0.18),
        0 25px 60px rgba(0,0,0,0.55);

    color: #0a1530;
    font-family: "ComercioSans", system-ui, sans-serif;
    font-weight: 700;
    font-size: 210px;
    line-height: 1;
    letter-spacing: -4px;
    user-select: none;
}

/* Card "X" — cor diferenciada */
.rcard--x {
    background:
        linear-gradient(150deg, #ffd34d 0%, #ff9c1a 55%, #d96a00 100%);
    color: #2a1500;
    box-shadow:
        inset 0 0 0 4px rgba(255,255,255,0.65),
        inset 0 -18px 30px rgba(0,0,0,0.22),
        0 25px 70px rgba(255,160,30,0.35),
        0 25px 60px rgba(0,0,0,0.55);
}

/* Card vencedor — flash inicial + pulse contínuo */
.rcard--winner {
    animation:
        winnerFlash 0.55s ease-out 0s 1 both,
        winnerPulse 1.2s ease-in-out 0.55s infinite;
}
@keyframes winnerFlash {
    0% {
        box-shadow:
            inset 0 0 0 6px rgba(255,255,255,1),
            0 0 0   rgba(255,255,255,0),
            0 0 0   rgba(120,200,255,0),
            0 25px 60px rgba(0,0,0,0.55);
        filter: brightness(1) saturate(1);
    }
    35% {
        box-shadow:
            inset 0 0 0 8px rgba(255,255,255,1),
            0 0 80px  rgba(255,255,255,1),
            0 0 220px rgba(120,200,255,1),
            0 25px 60px rgba(0,0,0,0.55);
        filter: brightness(1.45) saturate(1.2);
    }
    100% {
        box-shadow:
            inset 0 0 0 6px rgba(255,255,255,0.9),
            0 0 60px  rgba(120,200,255,0.7),
            0 0 120px rgba(120,200,255,0.4),
            0 25px 60px rgba(0,0,0,0.55);
        filter: brightness(1) saturate(1);
    }
}
@keyframes winnerPulse {
    0%, 100% {
        box-shadow:
            inset 0 0 0 6px rgba(255,255,255,0.9),
            0 0 60px  rgba(120,200,255,0.7),
            0 0 120px rgba(120,200,255,0.4),
            0 25px 60px rgba(0,0,0,0.55);
    }
    50% {
        box-shadow:
            inset 0 0 0 8px rgba(255,255,255,1),
            0 0 110px rgba(120,200,255,1),
            0 0 220px rgba(120,200,255,0.7),
            0 25px 60px rgba(0,0,0,0.55);
    }
}

/* X (laranja) ganha pulse na cor laranja, não azul */
.rcard--x.rcard--winner {
    animation:
        winnerFlashX 0.55s ease-out 0s 1 both,
        winnerPulseX 1.2s ease-in-out 0.55s infinite;
}
@keyframes winnerFlashX {
    0% {
        box-shadow:
            inset 0 0 0 6px rgba(255,255,255,1),
            0 25px 60px rgba(0,0,0,0.55);
    }
    35% {
        box-shadow:
            inset 0 0 0 8px rgba(255,255,255,1),
            0 0 90px  rgba(255,200,80,1),
            0 0 230px rgba(255,140,0,1),
            0 25px 60px rgba(0,0,0,0.55);
        filter: brightness(1.4) saturate(1.25);
    }
    100% {
        box-shadow:
            inset 0 0 0 6px rgba(255,255,255,0.95),
            0 0 60px  rgba(255,180,40,0.85),
            0 0 140px rgba(255,140,0,0.55),
            0 25px 60px rgba(0,0,0,0.55);
    }
}
@keyframes winnerPulseX {
    0%, 100% {
        box-shadow:
            inset 0 0 0 6px rgba(255,255,255,0.95),
            0 0 60px  rgba(255,180,40,0.85),
            0 0 140px rgba(255,140,0,0.55),
            0 25px 60px rgba(0,0,0,0.55);
    }
    50% {
        box-shadow:
            inset 0 0 0 8px rgba(255,255,255,1),
            0 0 110px rgba(255,200,80,1),
            0 0 240px rgba(255,140,0,0.85),
            0 25px 60px rgba(0,0,0,0.55);
    }
}

/* Marcador sutil da área "frente" da roda */
#wheelMarker {
    position: absolute;
    left: 50%; top: 50%;
    width: 410px; height: 410px;
    margin-left: -205px; margin-top: -205px;
    pointer-events: none;
    border-radius: 36px;
    border: 2px dashed rgba(255,255,255,0.08);
    z-index: 5;
}

/* =============================================================
   Botão de disparo
   ============================================================= */
#spinButton {
    position: absolute;
    left: 50%; bottom: 280px; transform: translateX(-50%);
    width: 210px; height: 210px;
    border-radius: 50%;
    border: none; cursor: pointer;
    background:
        radial-gradient(circle at 35% 30%, #ffe27a 0%, #ffae1a 35%, #d27200 75%, #6b3500 100%);
    color: #2a1500;
    font-family: "ComercioSans", system-ui, sans-serif;
    font-weight: 700;
    font-size: 42px;
    letter-spacing: 3px;

    box-shadow:
        inset 0 6px 0 rgba(255,255,255,0.55),
        inset 0 -14px 30px rgba(0,0,0,0.45),
        0 0 60px rgba(255,170,40,0.55),
        0 25px 60px rgba(0,0,0,0.6);
    transition: transform 120ms ease, box-shadow 200ms ease, filter 200ms ease;
}
#spinButton:active {
    transform: translateX(-50%) scale(0.96);
    box-shadow:
        inset 0 4px 0 rgba(255,255,255,0.4),
        inset 0 -10px 20px rgba(0,0,0,0.5),
        0 0 30px rgba(255,170,40,0.4),
        0 12px 30px rgba(0,0,0,0.6);
}
#spinButton[disabled] {
    cursor: not-allowed;
    filter: grayscale(0.6) brightness(0.7);
}

/* Botão invisível de debug — clique no canto inferior esquerdo força X */
#debugForceX {
    position: absolute;
    left: 0; bottom: 0;
    width: 160px; height: 160px;
    background: transparent;
    border: none; outline: none;
    padding: 0; margin: 0;
    cursor: default;
    opacity: 0;
    z-index: 9999;
}

/* Texto de resultado */
#resultText {
    position: absolute;
    left: 50%; bottom: 620px; transform: translateX(-50%);
    width: 90%; text-align: center;
    font-size: 72px; font-weight: 700;
    color: #fff;
    text-shadow: 0 4px 30px rgba(0,0,0,0.8);
    pointer-events: none;
    transition: opacity 400ms ease;
}
.hiding { opacity: 0; }