/* ==========================================================================
   ROLETA DE PRÊMIOS - DESIGN SYSTEM & UI APPLE-LEVEL
   Puro CSS moderno, alta fidelidade visual, 60fps fluido e responsivo
   ========================================================================== */

:root {
    --bg-dark: #0a061d;
    --bg-space: #0f0a2a;
    --primary-purple: #7727ff;
    --primary-purple-light: #944dff;
    --primary-gradient: linear-gradient(180deg, #8752ff 0%, #6125d0 100%);
    --primary-gradient-hover: linear-gradient(180deg, #9765ff 0%, #6e2ee6 100%);
    
    --gold-bright: #ffdf00;
    --gold-warm: #f6b500;
    --gold-gradient: linear-gradient(135deg, #fff3a1 0%, #ffc83b 50%, #d48800 100%);
    --gold-pin-gradient: linear-gradient(180deg, #ffe066 0%, #f59e0b 50%, #b45309 100%);

    --accent-green: #10b981;
    --accent-green-hover: #059669;
    --whatsapp-green: #25d366;

    --card-bg: rgba(30, 22, 68, 0.72);
    --card-border: rgba(255, 255, 255, 0.12);
    --input-bg: rgba(43, 33, 90, 0.65);

    --text-white: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.68);
    --text-faint: rgba(255, 255, 255, 0.42);

    --shadow-wheel: 0 0 60px rgba(119, 39, 255, 0.45), 0 20px 50px rgba(0, 0, 0, 0.6);
    --shadow-btn: 0 10px 28px rgba(119, 39, 255, 0.45);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    width: 100%;
    min-height: 100%;
    background-color: var(--bg-dark);
    color: var(--text-white);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}

/* ==========================================================================
   FUNDO CÓSMICO COM RADIAL GLOW E RAIOS DE LUZ SUAVES
   ========================================================================== */
.space-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: radial-gradient(circle at 50% 35%, #2a1668 0%, #150b3d 45%, #0a061d 90%);
}

/* Raios de luz rotativos suaves atrás da roleta */
.light-rays {
    position: absolute;
    top: 36%;
    left: 50%;
    width: 800px;
    height: 800px;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        rgba(157, 78, 255, 0.12) 0deg 20deg,
        transparent 20deg 45deg,
        rgba(157, 78, 255, 0.12) 45deg 65deg,
        transparent 65deg 90deg,
        rgba(157, 78, 255, 0.12) 90deg 110deg,
        transparent 110deg 135deg,
        rgba(157, 78, 255, 0.12) 135deg 155deg,
        transparent 155deg 180deg,
        rgba(157, 78, 255, 0.12) 180deg 200deg,
        transparent 200deg 225deg,
        rgba(157, 78, 255, 0.12) 225deg 245deg,
        transparent 245deg 270deg,
        rgba(157, 78, 255, 0.12) 270deg 290deg,
        transparent 290deg 315deg,
        rgba(157, 78, 255, 0.12) 315deg 335deg,
        transparent 335deg 360deg
    );
    border-radius: 50%;
    filter: blur(16px);
    animation: rotateRays 60s linear infinite;
}

@keyframes rotateRays {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Brilho radial central pulsante */
.center-glow {
    position: absolute;
    top: 36%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(138, 77, 255, 0.35) 0%, rgba(138, 77, 255, 0) 70%);
    filter: blur(28px);
}

/* ==========================================================================
   APP CONTAINER (MOBILE-FIRST CENTRALIZADO)
   ========================================================================== */
.app-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* Cabeçalho */
.app-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px 18px 4px;
    position: relative;
}

.header-time {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: -0.2px;
}

.app-title {
    font-size: clamp(24px, 5.5vw, 30px);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.2s ease;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.05); }
.icon-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* Demo Badge Discreto */
.demo-badge {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fbbf24;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.demo-badge:hover {
    background: rgba(245, 158, 11, 0.35);
    transform: scale(1.05);
}
.demo-badge.active { display: inline-flex; }

/* ==========================================================================
   ROLETA - ESTRUTURA VISUAL E MARCADOR DOURADO
   ========================================================================== */
.wheel-wrapper {
    position: relative;
    width: min(92vw, 62dvh, 640px);
    height: min(92vw, 62dvh, 640px);
    margin: 8px auto 16px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* O Pino Marcador no Topo (Estilo Gota Dourada com Pino voltado para baixo) */
.wheel-pointer {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    width: 48px;
    height: 58px;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.7));
    pointer-events: none;
    transform-origin: 50% 20%;
    transition: transform 0.08s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.wheel-pointer.kick {
    transform: translateX(-50%) rotate(-12deg);
}

.wheel-pointer svg {
    width: 100%;
    height: 100%;
}

/* Efeito da fatia vencedora e escurecimento das outras */
.wheel-svg.settled .slice-group {
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}

.wheel-svg.settled .slice-group.dimmed {
    opacity: 0.35;
    filter: grayscale(40%) brightness(0.65);
}

.wheel-svg.settled .slice-group.winner {
    opacity: 1;
    animation: winnerPulse 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: 500px 500px;
}

@keyframes winnerPulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8)) brightness(1);
    }
    50% {
        transform: scale(1.035);
        filter: drop-shadow(0 0 50px #ffffff) brightness(1.35);
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.95)) brightness(1.2);
    }
}

/* Container do Anel da Roleta */
.wheel-outer-ring {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 20px 45px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 40px rgba(119, 39, 255, 0.45));
}

/* Lâmpadas no Anel Externo do SVG */
.outer-bulbs .bulb {
    transform-origin: center;
}
.outer-bulbs .bulb.even {
    animation: bulbPulse 1.2s infinite alternate ease-in-out;
}
.outer-bulbs .bulb.odd {
    animation: bulbPulse 1.2s infinite alternate ease-in-out 0.6s;
}

@keyframes bulbPulse {
    0%   { opacity: 0.35; filter: drop-shadow(0 0 2px #ffeb3b); }
    100% { opacity: 1;    filter: drop-shadow(0 0 8px #ffeb3b); }
}

/* O Disco da Roleta */
.wheel-disc {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wheel-disc svg.wheel-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Botão Central "GIRAR" Flutuante */
.wheel-center-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 17%;
    height: 17%;
    border-radius: 50%;
    opacity: 0;
    z-index: 40;
    cursor: pointer;
    border: none;
    background: transparent;
}

.wheel-center-button:hover {
    transform: translate(-50%, -50%) scale(1.04);
    filter: brightness(1.1);
}

.wheel-center-button:active {
    transform: translate(-50%, -50%) scale(0.96);
}

.wheel-center-button span {
    font-size: 13.5px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   PROVA SOCIAL (TICKER COM ÚLTIMOS GANHADORES)
   ========================================================================== */
.social-proof-bar {
    width: 100%;
    background: rgba(35, 26, 75, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 7px 14px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(12px);
    overflow: hidden;
}

.social-dot {
    width: 8px;
    height: 8px;
    background: #00e676;
    border-radius: 50%;
    box-shadow: 0 0 8px #00e676;
    flex-shrink: 0;
    animation: blinkDot 1.5s infinite;
}

@keyframes blinkDot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.social-text {
    font-size: 12.5px;
    color: var(--text-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.3s ease;
}

/* ==========================================================================
   FORMULÁRIO DO TICKET E BOTÃO PRINCIPAL (IDÊNTICO À REFERÊNCIA)
   ========================================================================== */
.action-card {
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    padding: 18px 18px 20px 18px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    margin-bottom: 16px;
}

.ticket-input-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 14px;
}

.ticket-input {
    width: 100%;
    height: 52px;
    background: var(--input-bg);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 0 18px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffffff;
    text-transform: uppercase;
    text-align: center;
    outline: none;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ticket-input::placeholder {
    color: rgba(255, 255, 255, 0.38);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    font-size: 15px;
}

.ticket-input:focus {
    border-color: #9d65ff;
    background: rgba(54, 41, 115, 0.85);
    box-shadow: 0 0 0 3px rgba(157, 101, 255, 0.35), inset 0 2px 4px rgba(0,0,0,0.3);
}

.ticket-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* O BOTÃO GRANDE "GIRAR AGORA" (ESTILO 'PLACE A BET' DA REFERÊNCIA) */
.btn-spin-main {
    width: 100%;
    height: 56px;
    background: var(--primary-gradient);
    border: none;
    border-radius: 18px;
    color: #ffffff;
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--shadow-btn);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.btn-spin-main::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-20deg);
    animation: shineSweep 4s infinite ease-in-out;
}

@keyframes shineSweep {
    0%, 60% { left: -100%; }
    100% { left: 200%; }
}

.btn-spin-main:hover:not(:disabled) {
    background: var(--primary-gradient-hover);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(119, 39, 255, 0.6);
}

.btn-spin-main:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 6px 18px rgba(119, 39, 255, 0.4);
}

.btn-spin-main:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Spinner no botão */
.loader-spinner {
    display: none;
    width: 22px;
    height: 22px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spinRotate 0.8s linear infinite;
}

@keyframes spinRotate {
    to { transform: rotate(360deg); }
}

.btn-spin-main.loading .btn-text { display: none; }
.btn-spin-main.loading .loader-spinner { display: block; }

/* Microcopy de Confiança & Urgência */
.trust-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
    font-size: 11.5px;
    color: var(--text-faint);
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Rodapé */
.app-footer {
    width: 100%;
    text-align: center;
    padding: 12px 0;
}

.terms-link {
    color: var(--text-faint);
    font-size: 12.5px;
    text-decoration: none;
    transition: color 0.2s;
    cursor: pointer;
}
.terms-link:hover { color: rgba(255, 255, 255, 0.85); text-decoration: underline; }

/* ==========================================================================
   CANVAS DE CONFETES & EFEITO DE VITÓRIA
   ========================================================================== */
#confettiCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 999;
}

/* ==========================================================================
   MODAIS APPLE-LEVEL (VITÓRIA E REGRAS)
   ========================================================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 6, 29, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-box {
    width: 100%;
    max-width: 380px;
    background: rgba(28, 20, 65, 0.95);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 28px;
    padding: 32px 24px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 50px rgba(124, 77, 255, 0.3);
    text-align: center;
    transform: scale(0.9) translateY(20px);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.modal-overlay.active .modal-box {
    transform: scale(1) translateY(0);
}

.modal-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background 0.2s;
}
.modal-close-btn:hover { background: rgba(255, 255, 255, 0.2); }

/* Conteúdo Modal de Vitória */
.win-icon-wrapper {
    width: 110px;
    height: 110px;
    margin: 0 auto 16px auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.win-icon-glow {
    position: absolute;
    inset: -15px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.45) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulseWin 2s infinite ease-in-out;
}

@keyframes pulseWin {
    0%, 100% { transform: scale(0.95); opacity: 0.6; }
    50% { transform: scale(1.15); opacity: 1; }
}

.win-icon-svg, .win-icon-img {
    width: 95px;
    height: 95px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
    animation: floatIcon 3s infinite ease-in-out;
}

@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.win-title {
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 6px;
}

.win-prize-name {
    font-size: 26px;
    font-weight: 900;
    color: #ffd54f;
    text-shadow: 0 0 20px rgba(255, 213, 79, 0.5);
    margin-bottom: 12px;
}

.win-ticket-tag {
    display: inline-block;
    background: rgba(255, 255, 255, 0.08);
    border: 1px dashed rgba(255, 255, 255, 0.25);
    padding: 6px 14px;
    border-radius: 10px;
    font-family: monospace;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}

.urgency-badge {
    background: rgba(255, 82, 82, 0.15);
    border: 1px solid rgba(255, 82, 82, 0.35);
    color: #ff8e8e;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Botão WhatsApp Gigante de Conversão */
.btn-whatsapp-rescue {
    width: 100%;
    height: 56px;
    background: linear-gradient(180deg, #2fe675 0%, #1da851 100%);
    border: none;
    border-radius: 18px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.45);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-whatsapp-rescue svg {
    width: 24px;
    height: 24px;
    fill: #ffffff;
}

.btn-whatsapp-rescue:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(37, 211, 102, 0.6);
}

/* Toast de Mensagens */
.toast-container {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    width: min(90vw, 380px);
}

.toast {
    background: rgba(28, 20, 65, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 12px 18px;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(-15px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast.error {
    border-color: rgba(255, 82, 82, 0.5);
    background: rgba(45, 15, 30, 0.95);
}

.toast.success {
    border-color: rgba(0, 230, 118, 0.5);
    background: rgba(15, 45, 30, 0.95);
}

/* Conteúdo Modal de Regras */
.rules-content {
    text-align: left;
    max-height: 50vh;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    padding: 12px 6px;
    white-space: pre-wrap;
}

/* Responsividade refinada Apple */
@media (min-width: 768px) {
    .wheel-wrapper {
        width: 400px;
        height: 400px;
    }
    .wheel-outer-ring {
        padding: 14px;
    }
    .bulb {
        width: 10px;
        height: 10px;
        margin: -5px 0 0 -5px;
    }
    .app-container {
        max-width: 460px;
    }
}