/* =========================================================================
   SISTEMA GAMES HUB (RULETA, SLOTS, CARTAS, ROULETTE) - CAPA MÁXIMA Y ARRASTRE
   ========================================================================= */

/* 1. Modal contenedor base en primer plano absoluto */
#ruletaModal {
    position: fixed !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 460px !important;
    max-width: 95vw !important;
    z-index: 2147483646 !important; /* Capa ultra-alta para abrirse SIEMPRE encima de otros modales */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    touch-action: none; /* Permite arrastre fluido en pantallas táctiles */
}

#ruletaModal > div {
    position: relative !important;
    background: #111111 !important;
    border: 2px solid var(--accent, #00e5ff) !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.95), 0 0 15px rgba(0, 229, 255, 0.2) !important;
    box-sizing: border-box !important;
    cursor: grab; /* Indica que la ventana se puede mover */
}

/* 1.1. Ajuste de la X de cierre y el título para que nunca se toquen */
#ruletaModal .close-btn-ruleta,
#ruletaModal .modal-close-btn,
#ruletaModal > div > span[onclick*="cerrar"] {
    position: absolute !important;
    top: 8px !important;          /* Subida para dar aire al título */
    right: 14px !important;
    font-size: 26px !important;
    color: var(--accent, #00e5ff) !important;
    cursor: pointer !important;
    z-index: 100 !important;
    line-height: 1 !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

#ruletaModal .close-btn-ruleta:hover,
#ruletaModal .modal-close-btn:hover {
    transform: scale(1.2) !important;
    color: #ff3333 !important;
}

/* Título centrado con margen simétrico para no tocar la X */
#ruletaModal h2,
#ruletaModal .modal-title {
    margin-top: 5px !important;
    margin-bottom: 15px !important;
    padding: 0 35px !important;          /* 35px a izquierda y derecha = centrado simétrico */
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;   /* Evita que el padding aumente el ancho */
    font-family: 'Orbitron', sans-serif !important;
}

/* 2. Pestañas selectoras de juegos (2x2) */
.tabs-selector-juegos {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 15px !important;
}

.btn-tab-casino {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid #333333 !important;
    color: #888888 !important;
    padding: 10px !important;
    border-radius: 8px !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 11px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-tab-casino:hover {
    color: #ffffff !important;
    border-color: var(--accent, #00e5ff) !important;
}

.btn-tab-casino.activo {
    background: var(--accent, #00e5ff) !important;
    border-color: var(--accent, #00e5ff) !important;
    color: #000000 !important;
    box-shadow: 0 0 10px var(--accent, #00e5ff) !important;
}

/* 3. Toggle Switch deslizante (REAL vs DEMO) */
.switch-modo-contenedor {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-bottom: 15px !important;
}

.switch-modo-contenedor .label-switch {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 11px !important;
    font-weight: bold !important;
    color: #555555 !important;
    transition: color 0.3s ease !important;
}

.switch-modo-contenedor .label-switch.activo {
    color: var(--accent, #00e5ff) !important;
    text-shadow: 0 0 8px var(--accent, #00e5ff) !important;
}

.switch-slider {
    position: relative !important;
    display: inline-block !important;
    width: 48px !important;
    height: 24px !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.switch-slider input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

.slider-pastilla {
    position: absolute !important;
    inset: 0 !important;
    background-color: #000000 !important;
    border: 1px solid #444444 !important;
    border-radius: 24px !important;
    transition: 0.3s ease !important;
}

.slider-pastilla::before {
    position: absolute !important;
    content: "" !important;
    height: 16px !important;
    width: 16px !important;
    left: 3px !important;
    bottom: 3px !important;
    background-color: var(--accent, #00e5ff) !important;
    border-radius: 50% !important;
    transition: 0.3s ease !important;
    box-shadow: 0 0 6px var(--accent, #00e5ff) !important;
}

.switch-slider input:checked + .slider-pastilla::before {
    transform: translateX(24px) !important;
    background-color: #ffcc00 !important;
    box-shadow: 0 0 6px #ffcc00 !important;
}

/* 4. Tragamonedas (Slots) - Rodillos horizontales alineados */
.slots-maquina {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    background: #000000 !important;
    border: 2px solid #333333 !important;
    border-radius: 14px !important;
    padding: 18px 12px !important;
    margin: 20px auto !important;
    width: 100% !important;
    max-width: 320px !important;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9) !important;
    box-sizing: border-box !important;
}

.slot-carril {
    width: 80px !important;
    height: 80px !important;
    background: radial-gradient(circle at 30% 30%, #222222, #0d0d0d) !important;
    border: 2px solid var(--accent, #00e5ff) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.5) !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.slot-simbolo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 40px !important;
    line-height: 1 !important;
    width: 100% !important;
    height: 100% !important;
    user-select: none !important;
}

/* 5. Botones principales de acción (.btn-accion-casino) */
.btn-accion-casino {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 260px !important;
    padding: 12px 20px !important;
    margin: 8px auto 0 auto !important;
    background: var(--accent, #00e5ff) !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 13px !important;
    font-weight: bold !important;
    letter-spacing: 1.5px !important;
    cursor: pointer !important;
    box-shadow: 0 0 15px var(--accent, rgba(0, 229, 255, 0.4)) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-accion-casino:hover {
    transform: scale(1.03) !important;
    box-shadow: 0 0 22px var(--accent, rgba(0, 229, 255, 0.7)) !important;
}

.btn-accion-casino:active {
    transform: scale(0.97) !important;
}

/* 6. Ruleta Canvas */
#wheelCanvas {
    width: 250px !important;
    height: 250px !important;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8)) !important;
}

/* =========================================================================
   7. BOTÓN FLOTANTE DE LA RULETA (BOLA REDONDA IDÉNTICA A JUEGOS)
   ========================================================================= */

/* Fijar el interruptor REAL/DEMO y el puntero de la ruleta con y sin login */
#ruletaModal .switch-modo-contenedor {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
}

#ruletaModal .switch-modo-contenedor label.switch-slider {
    display: inline-block !important;
    margin: 0 !important;
    position: relative !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

#ruletaModal #wheelCanvas {
    box-sizing: border-box !important;
    width: 250px !important;
    height: 250px !important;
    left: 0 !important;
    top: 0 !important;
}