:root {
    /* =========================================================
       PALETA PRINCIPAL — ESTILO DE LAS CAPTURAS
       ========================================================= */    --bg-900: #020817;
    --bg-800: #07101f;
    --bg-700: #0a1221;
    --bg-600: #111b2d;    --panel: #101827;
    --panel-alt: #0b1322;    --line: #202d43;
    --line-strong: #2b3a53;    /* Dorado principal */
    --yellow-300: #ffc52b;
    --yellow-500: #ffb000;
    --yellow-600: #e69500;    /* Azul */
    --blue-400: #4b9cff;
    --blue-700: #1554a0;    /* Grises */
    --gray-400: #8d98aa;
    --gray-600: #3e4a5d;    /* Texto */
    --ink: #090d16;
    --cream: #f2f5fa;
    --dim: #8b96a8;    /* Rojo */
    --ruby: #e64657;
    --ruby-bright: #ff5968;    /* Verde */
    --emerald: #39d995;    /* Fondos transparentes */
    --tint-gold: #241a06;
    --tint-blue: #0b1c35;
    --tint-green: #091f18;
    --tint-red: #260d13;    --overlay-solid: #01050c;    /* Valor del precio */
    --price-purple: #8589ff;
    --price-purple-soft: #7479f4;    /* Tipografías */
    --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
    --font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'Space Mono', 'Courier New', monospace;    /* Radios */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
}
/* =========================================================
   RESET
   ========================================================= */* {
    box-sizing: border-box;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}input,
textarea {
    user-select: text;
}[hidden] {
    display: none !important;
}
/* =========================================================
   BODY
   ========================================================= */html,
body {
    margin: 0;
    min-height: 100%;    background:
        radial-gradient(
            circle at top,
            #0a1425 0%,
            #020817 42%,
            #01050d 100%
        );    color: var(--cream);
    font-family: var(--font-body);    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}body {
    min-height: 100vh;
}
/* =========================================================
   PRECARGA
   ========================================================= */.preloader {
    position: fixed;    inset: 0;    z-index: 9999;    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;    gap: 0.9rem;    background:
        radial-gradient(
            circle at top,
            #0a1425 0%,
            #020817 42%,
            #01050d 100%
        );    transition: opacity 0.35s ease;
}.preloader.is-hidden {
    opacity: 0;    pointer-events: none;
}.preloader-icon {
    font-size: 3.6rem;
}.preloader-spinner {
    width: 34px;    height: 34px;    border: 3px solid var(--line-strong);    border-top-color: var(--yellow-300);    border-radius: 50%;    animation:
        lr-spin
        0.8s
        linear
        infinite;
}.preloader-text {
    font-family: var(--font-mono);    font-size: 0.8rem;    letter-spacing: 0.08em;    text-transform: uppercase;    color: var(--dim);
}
button,
input {
    font-family: inherit;
}
/* =========================================================
   BOTONES
   ========================================================= */.btn {
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--cream);    padding: 0.5rem 0.9rem;    border-radius: var(--r-sm);    font-weight: 600;
    font-size: 0.83rem;    cursor: pointer;    transition:
        all 0.2s ease;
}.btn:hover:not(:disabled) {
    border-color: var(--yellow-500);
    transform: translateY(-1px);    box-shadow:
        0 4px 12px rgba(255, 176, 0, 0.18);
}.btn:active:not(:disabled) {
    transform: translateY(0);
}.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}.btn-primary {
    background:
        linear-gradient(
            135deg,
            var(--yellow-300) 0%,
            var(--yellow-500) 100%
        );    border-color: transparent;
    color: var(--ink);    font-weight: 700;    box-shadow:
        0 4px 15px rgba(255, 176, 0, 0.25);
}.btn-gold {
    background:
        linear-gradient(
            135deg,
            #ffd34d 0%,
            #ffb000 100%
        );    border: none;
    color: var(--ink);    font-weight: 700;    box-shadow:
        0 4px 15px rgba(255, 176, 0, 0.28);
}.btn-recharge {
    background:
        linear-gradient(
            135deg,
            var(--price-purple-soft) 0%,
            var(--price-purple) 100%
        );    border: none;
    color: #fff;    font-weight: 700;    box-shadow:
        0 4px 15px rgba(133, 137, 255, 0.35);
}.btn-ghost {
    background: #111a2a;
}.btn-small {
    padding: 0.4rem 0.75rem;
    font-size: 0.78rem;
}
/* =========================================================
   LOGIN
   ========================================================= */.auth-screen {
    min-height: 100vh;    display: flex;
    align-items: center;
    justify-content: center;    padding: 1rem;
}.auth-card {
    width: 100%;
    max-width: 340px;    background:
        linear-gradient(
            145deg,
            #111b2d 0%,
            #0a1220 100%
        );    border: 1px solid var(--line-strong);    border-radius: var(--r-lg);    padding: 1.6rem 1.4rem;    text-align: center;    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);    animation:
        authCardFloat
        0.6s
        cubic-bezier(0.16, 1, 0.3, 1)
        forwards;
}.auth-redirect-text {
    color: var(--cream);    opacity: 0.85;    font-size: 0.87rem;    margin: 0 0 1.1rem;
}.auth-lobby-btn {
    display: block;    text-decoration: none;    text-align: center;
}
/* =========================================================
   ACCESO INVITADO
   ========================================================= */.guest-name-modal {
    position: fixed;    inset: 0;    z-index: 500;    display: flex;
    align-items: center;
    justify-content: center;    padding: 1rem;    background: rgba(1, 5, 12, 0.55);    backdrop-filter: blur(4px);    -webkit-backdrop-filter: blur(4px);
}.gnm-box {
    width: 100%;
    max-width: 340px;    background:
        linear-gradient(
            145deg,
            rgba(17, 27, 45, 0.78) 0%,
            rgba(10, 18, 32, 0.78) 100%
        );    backdrop-filter: blur(10px);    -webkit-backdrop-filter: blur(10px);    border: 1px solid var(--line-strong);    border-radius: var(--r-lg);    padding: 1.6rem 1.4rem;    text-align: center;    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);    animation:
        authCardFloat
        0.6s
        cubic-bezier(0.16, 1, 0.3, 1)
        forwards;
}@keyframes authCardFloat {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}.auth-brand-mark {
    font-size: 2.2rem;    animation:
        pulseIcon
        2s
        ease-in-out
        infinite;
}@keyframes pulseIcon {
    0%,
    100% {
        transform: scale(1);
    }    50% {
        transform: scale(1.08);
    }
}.auth-brand h1 {
    font-family: var(--font-display);    font-size: 2rem;    margin: 0.15rem 0 0;    letter-spacing: 0.03em;    color: var(--yellow-300);    text-shadow:
        0 2px 10px rgba(255, 197, 43, 0.25);
}.auth-tagline {
    margin: 0 0 1.1rem;    color: var(--dim);    font-size: 0.76rem;    text-transform: uppercase;    letter-spacing: 0.1em;
}.gnm-text {
    color: var(--cream);    opacity: 0.85;    font-size: 0.87rem;    margin: 0 0 1.1rem;
}.gnm-form {
    display: flex;    flex-direction: column;    gap: 0.55rem;
}.gnm-input {
    width: 100%;    box-sizing: border-box;    background: #0d1524;    border: 1px solid #374258;    color: var(--cream);    padding: 0.6rem 0.75rem;    border-radius: var(--r-sm);    font-size: 0.9rem;    font-family: var(--font-body);
}.gnm-input:focus {
    outline: none;    border-color: var(--yellow-500);
}.gnm-error {
    color: var(--ruby-bright);    font-size: 0.76rem;    margin: -0.2rem 0 0;
}.gnm-submit {
    width: 100%;
}.gnm-login-link {
    display: block;    margin-top: 1rem;    color: var(--dim);    font-size: 0.76rem;    text-decoration: none;
}.gnm-login-link:hover {
    color: var(--yellow-300);
}
/* =========================================================
   BLOQUEO PARA INVITADOS
   ========================================================= */.guest-blocked-modal {
    position: fixed;    inset: 0;    z-index: 300;    display: flex;    align-items: center;    justify-content: center;    padding: 1rem;    animation:
        fadeIn
        0.2s
        ease;
}.gbm-backdrop {
    position: absolute;    inset: 0;    background: rgba(1, 5, 12, 0.88);    backdrop-filter: blur(5px);
}.gbm-box {
    position: relative;    z-index: 1;    width: 100%;    max-width: 320px;    background:
        linear-gradient(
            145deg,
            #111b2c 0%,
            #0a1220 100%
        );    border: 1px solid #2a3952;    border-radius: var(--r-lg);    padding: 1.5rem 1.3rem;    display: flex;    flex-direction: column;    align-items: center;    gap: 0.5rem;    text-align: center;    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.65);    animation:
        modalPopIn
        0.35s
        cubic-bezier(0.175, 0.885, 0.32, 1.275)
        forwards;
}.gbm-icon {
    font-size: 2.6rem;
}.gbm-title {
    font-family: var(--font-display);    font-size: 1.3rem;    color: var(--yellow-300);    margin: 0;
}.gbm-text {
    color: var(--cream);    opacity: 0.85;    font-size: 0.86rem;    margin: 0 0 0.3rem;
}.gbm-actions {
    display: flex;    gap: 0.5rem;    width: 100%;
}.gbm-actions .btn {
    flex: 1;    text-align: center;    text-decoration: none;
}
/* =========================================================
   PANTALLA DEL JUEGO
   ========================================================= */.game-screen {
    display: none;    min-height: 100vh;    flex-direction: column;    animation:
        fadeIn
        0.4s
        ease;
}@keyframes fadeIn {
    from {
        opacity: 0;
    }    to {
        opacity: 1;
    }
}
/* =========================================================
   HEADER
   ========================================================= */.table-header {
    position: relative;    display: flex;    align-items: center;    justify-content: space-between;    padding: 0.55rem 0.65rem;    border-bottom: 1px solid #19253a;    background:
        linear-gradient(
            180deg,
            #0b1322 0%,
            #050b16 100%
        );    position: sticky;    top: 0;    z-index: 10;    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.45);
}.header-user {
    display: flex;    align-items: center;    gap: 0.5rem;
}.header-avatar {
    width: 32px;
    height: 32px;    border-radius: 50%;    background:
        linear-gradient(
            135deg,
            #ffc52b 0%,
            #f2a400 100%
        );    color: var(--ink);    display: flex;    align-items: center;
    justify-content: center;    font-weight: 700;    font-size: 0.95rem;    flex-shrink: 0;    box-shadow:
        0 2px 8px rgba(255, 176, 0, 0.32);
}.header-user-info {
    display: flex;    flex-direction: column;    line-height: 1.1;
}.header-username {
    font-weight: 700;    font-size: 0.86rem;
}.header-actions {
    display: flex;    align-items: center;    gap: 0.4rem;
}.pill-btn {
    background: #0d1524;    border: 1px solid #374258;    color: var(--cream);    padding: 0.32rem 0.6rem;    border-radius: 20px;    font-size: 0.74rem;    cursor: pointer;    transition: all 0.2s ease;
}.pill-btn:hover {
    border-color: var(--yellow-500);    background: #121c2d;
}.pill-badge {
    background: #171a25;    border: 1px solid #73551a;    color: var(--yellow-300);    padding: 0.32rem 0.6rem;    border-radius: 20px;    font-size: 0.78rem;    font-weight: 700;    font-family: var(--font-mono);    box-shadow:
        inset 0 1px 3px rgba(255, 197, 43, 0.12);
}.pill-badge-clickable {
    cursor: pointer;    transition: all 0.2s ease;
}.pill-badge-clickable:hover {
    border-color: var(--yellow-500);    background: #1e2233;
}.pill-badge-clickable.balance-pulse {
    animation: balancePulse 0.9s ease-out;
}@keyframes balancePulse {
    0% {
        transform: scale(1) translateY(0);
    }    18% {
        transform: scale(1.3) translateY(-11px);        box-shadow: 0 0 22px rgba(57, 217, 149, 0.8);
    }    36% {
        transform: scale(1.05) translateY(0);
    }    54% {
        transform: scale(1.16) translateY(-6px);        box-shadow: 0 0 18px rgba(57, 217, 149, 0.6);
    }    68% {
        transform: scale(1.02) translateY(0);
    }    82% {
        transform: scale(1.08) translateY(-2px);
    }    100% {
        transform: scale(1) translateY(0);
    }
}.header-elevated {
    position: relative;    z-index: 600;
}
/* =========================================================
   DINERO GANADO -- AVISO + MONEDAS SUMÁNDOSE AL SALDO
   ========================================================= */.win-popup {
    position: fixed;    z-index: 600;    left: 0;    top: 0;    max-width: 90vw;    white-space: nowrap;    display: flex;    align-items: center;    gap: 0.4rem;    padding: 0.7rem 1.4rem;    border-radius: 999px;    background:
        linear-gradient(
            135deg,
            rgba(10, 26, 19, 0.94),
            rgba(5, 14, 10, 0.94)
        );    border: 2px solid rgba(57, 217, 149, 0.55);    transform: translate(-50%, -50%) scale(0.6);    font-family: var(--font-display);    font-size: 1.9rem;    font-weight: 700;    color: var(--emerald);    text-shadow:
        0 0 20px rgba(57, 217, 149, 0.85),
        0 2px 8px rgba(0, 0, 0, 0.7);    pointer-events: none;    opacity: 0;    transition:
        transform
        0.35s
        cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity
        0.3s
        ease;
}.win-popup.win-popup-show {
    opacity: 1;    transform: translate(-50%, -50%) scale(1);    animation: winPopupGlow 0.9s ease-in-out infinite alternate;
}.win-popup.win-popup-hide {
    opacity: 0;    transform: translate(-50%, -50%) translateY(-18px) scale(0.9);    transition:
        transform
        0.45s
        ease,
        opacity
        0.45s
        ease;
}@keyframes winPopupGlow {
    from {
        box-shadow: 0 0 26px rgba(57, 217, 149, 0.3), 0 10px 30px rgba(0, 0, 0, 0.55);
    }    to {
        box-shadow: 0 0 55px rgba(57, 217, 149, 0.8), 0 10px 30px rgba(0, 0, 0, 0.55);
    }
}.coin-burst {
    position: fixed;    z-index: 600;    left: 0;    top: 0;    font-size: 2.2rem;    pointer-events: none;    opacity: 1;    transform: translate(-50%, -50%) scale(1);    filter: drop-shadow(0 0 8px rgba(255, 197, 43, 0.85));    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.6);    transition:
        transform
        0.6s
        cubic-bezier(0.3, 0, 0.4, 1),
        opacity
        0.6s
        ease;
}.coin-burst.coin-burst-active {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.35);    opacity: 0;
}.pill-badge-clickable.balance-tick {
    animation: balanceTick 0.36s ease-out;
}@keyframes balanceTick {
    0% {
        transform: scale(1);        box-shadow: 0 0 0 0 rgba(57, 217, 149, 0.7);
    }    35% {
        transform: scale(1.5);        box-shadow: 0 0 0 12px rgba(57, 217, 149, 0);
    }    100% {
        transform: scale(1);        box-shadow: 0 0 0 0 rgba(57, 217, 149, 0);
    }
}.header-elevated {
    animation: headerWinGlow 0.9s ease-in-out infinite alternate;
}@keyframes headerWinGlow {
    from {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    }    to {
        box-shadow: 0 6px 32px rgba(57, 217, 149, 0.45);
    }
}
/* =========================================================
   CONTENEDOR PRINCIPAL
   ========================================================= */.table-main {
    flex: 1;    max-width: 680px;    margin: 0 auto;    width: 100%;    padding: 0.5rem;    display: flex;    flex-direction: column;    gap: 0.55rem;
}
/* =========================================================
   TRANSMISIÓN
   ========================================================= */.live-stream-wrap {
    position: relative;    border-radius: var(--r-md);    overflow: hidden;    border: 1px solid #273247;    background: #020711;    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.35);
}.stream-no-round {
    aspect-ratio: 16 / 9;    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;    gap: 0.4rem;    background:
        linear-gradient(
            135deg,
            #101a2b 0%,
            #030914 100%
        );    color: var(--cream);    text-align: center;    padding: 1rem;
}.stream-no-round .lsp-icon {
    font-size: 2.2rem;    opacity: 0.75;    animation:
        bounceSlow
        3s
        ease-in-out
        infinite;
}@keyframes bounceSlow {
    0%,
    100% {
        transform: translateY(0);
    }    50% {
        transform: translateY(-6px);
    }
}.stream-no-round p {
    font-family: var(--font-display);    font-size: 1.2rem;    margin: 0;    letter-spacing: 0.02em;    color: var(--yellow-300);    opacity: 0.9;
}.stream-sale-open {
    aspect-ratio: 16 / 9;    background: url('../material/ruleta1.jpg') center / cover no-repeat;
}.tutorial-btn {
    width: 100%;    margin: 0.6rem 0;
}.stream-full-waiting {
    aspect-ratio: 16 / 9;    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;    gap: 0.35rem;    background:
        linear-gradient(
            135deg,
            #d9384d 0%,
            #821526 100%
        );    color: #fff;    text-align: center;    padding: 1rem;    animation:
        sfw-pulse
        1.6s
        ease-in-out
        infinite;
}.sfw-icon {
    font-size: 2rem;
}.sfw-title {
    font-family: var(--font-display);    font-size: 1.7rem;    margin: 0;    letter-spacing: 0.03em;
}.sfw-sub {
    margin: 0;    font-weight: 600;    font-size: 0.88rem;
}@keyframes sfw-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }    50% {
        opacity: 0.85;
        transform: scale(0.99);
    }
}
/* =========================================================
   BANNER TRANSMISIÓN
   ========================================================= */.stream-status-banner {
    padding: 0.45rem 0.7rem;    text-align: center;    font-weight: 700;    font-size: 0.82rem;    background: #18160f;    color: var(--yellow-300);    border-bottom: 1px solid var(--line);
}.stream-status-banner.drawing {
    background:
        linear-gradient(
            90deg,
            #e9a100,
            #ffd34b,
            #e9a100
        );    background-size: 200% auto;    color: var(--ink);    animation:
        shimmerBanner
        2.5s
        linear
        infinite;
}@keyframes shimmerBanner {
    to {
        background-position: 200% center;
    }
}.live-stream-placeholder {
    aspect-ratio: 16 / 9;    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;    gap: 0.35rem;    color: var(--dim);
}.lsp-icon {
    font-size: 1.8rem;
}.live-stream-frame {
    position: relative;    aspect-ratio: 16 / 9;    background: #000;
}.yt-player-mount {
    width: 100%;
    height: 100%;
}.live-controls {
    position: absolute;    bottom: 0.35rem;    right: 0.35rem;    display: flex;    gap: 0.25rem;
}.live-ctrl-btn {
    background: rgba(0, 0, 0, 0.7);    backdrop-filter: blur(4px);    border: 1px solid rgba(255, 255, 255, 0.1);    color: #fff;    width: 38px;
    height: 38px;    border-radius: 50%;    cursor: pointer;    font-size: 1.05rem;    display: flex;    align-items: center;    justify-content: center;    transition: background 0.2s;
}.live-ctrl-btn:hover {
    background: rgba(0, 0, 0, 0.9);
}.live-play-overlay {
    position: absolute;    inset: 0;    background: rgba(0, 0, 0, 0.6);    backdrop-filter: blur(3px);    border: none;    color: #fff;    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;    gap: 0.35rem;    cursor: pointer;    width: 100%;    transition: background 0.3s;
}.live-play-overlay:hover {
    background: rgba(0, 0, 0, 0.4);
}.lpo-circle {
    font-size: 2rem;    transform: scale(1);    transition:
        transform
        0.2s
        cubic-bezier(0.175, 0.885, 0.32, 1.275);
}.live-play-overlay:hover .lpo-circle {
    transform: scale(1.15);
}.live-reconnecting {
    position: absolute;    top: 0.4rem;    right: 0.4rem;    background: rgba(0, 0, 0, 0.8);    color: #fff;    padding: 0.22rem 0.55rem;    border-radius: 20px;    font-size: 0.68rem;    display: flex;    align-items: center;    gap: 0.3rem;
}.lr-spinner {
    width: 10px;
    height: 10px;    border: 2px solid var(--line-strong);    border-top-color: #fff;    border-radius: 50%;    animation:
        lr-spin
        0.7s
        linear
        infinite;
}@keyframes lr-spin {
    to {
        transform: rotate(360deg);
    }
}
/* =========================================================
   JACKPOT
   ========================================================= */.jackpot-hero {
    text-align: center;    padding: 0.8rem;    display: flex;    flex-direction: column;    align-items: center;    gap: 0.15rem;    background:
        linear-gradient(
            135deg,
            #111a29 0%,
            #17170f 100%
        );    border: 1px solid #4b3c18;    border-radius: var(--r-md);    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 197, 43, 0.08);
}.jackpot-hero-label {
    font-size: 0.74rem;    text-transform: uppercase;    letter-spacing: 0.06em;    color: var(--dim);
}.jackpot-hero-value {
    font-family: var(--font-display);    font-size: 2.3rem;    color: var(--yellow-300);    letter-spacing: 0.02em;    text-shadow:
        0 2px 12px rgba(255, 197, 43, 0.25);    animation:
        jackpotPulse
        2s
        ease-in-out
        infinite;
}@keyframes jackpotPulse {
    0%,
    100% {
        transform: scale(1);
    }    50% {
        transform: scale(1.02);
    }
}
/* =========================================================
   SIN SORTEO
   ========================================================= */.no-round-card {
    background:
        linear-gradient(
            145deg,
            #1a1420 0%,
            #0d1625 100%
        );    border: 1px solid var(--yellow-500);    border-radius: var(--r-lg);    padding: 2.4rem 1.2rem;    text-align: center;    box-shadow:
        0 0 24px rgba(255, 176, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}.nrc-icon {
    width: 64px;
    height: 64px;    border-radius: 50%;    background:
        linear-gradient(
            135deg,
            #ffd04a 0%,
            #ffad00 100%
        );    color: var(--ink);    display: flex;    align-items: center;
    justify-content: center;    margin: 0 auto 0.9rem;    font-weight: 700;    font-size: 2rem;    box-shadow: 0 6px 20px rgba(255, 176, 0, 0.35);    animation:
        pulseIcon
        2s
        ease-in-out
        infinite;
}.no-round-card h2 {
    font-family: var(--font-display);    font-size: 1.8rem;    margin: 0 0 0.35rem;    letter-spacing: 0.02em;    color: var(--yellow-300);
}.no-round-card p {
    margin: 0;    color: var(--cream);    opacity: 0.85;    font-size: 0.95rem;
}
/* =========================================================
   SECCIÓN DE NÚMEROS
   ========================================================= */.numbers-section {
    background:
        linear-gradient(
            145deg,
            #111a2a 0%,
            #0d1625 100%
        );    border: 1px solid #25334a;    border-radius: var(--r-md);    padding: 0.65rem;    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.22);
}
.jackpot-alert-block {
    display: flex;    align-items: center;    justify-content: center;    gap: 0.45rem;    margin: 0.5rem 0.4rem 0;    padding: 0.55rem 0.8rem;    border-radius: var(--r-sm);    border: 1px solid #ff5ac8;    background:
        linear-gradient(
            135deg,
            #3a1150 0%,
            #1a0d2e 100%
        );    box-shadow: 0 0 18px rgba(255, 90, 200, 0.3);    text-align: center;
}.jab-icon {
    font-size: 1.2rem;    animation:
        pulseIcon
        1.4s
        ease-in-out
        infinite;
}.jab-text {
    font-weight: 700;    font-size: 0.82rem;    color: #ff9de3;
}
/* =========================================================
   TÍTULO NÚMEROS
   ========================================================= */.numbers-title-row {
    display: flex;    align-items: center;    justify-content: space-between;    gap: 0.5rem;    margin-bottom: 0.45rem;
}.numbers-title-group {
    display: flex;    align-items: center;    flex-wrap: nowrap;    gap: 0.5rem;    min-width: 0;
}.numbers-title {
    font-family: var(--font-body);    font-size: 0.83rem;    letter-spacing: 0.02em;    color: #aab4c5;    font-weight: 600;    text-transform: uppercase;    white-space: nowrap;
}.numbers-price-pill {
    font-family: var(--font-display);    font-size: 1.3rem;    font-weight: 700;    color: var(--yellow-300);    background: rgba(255, 197, 43, 0.12);    border: 1px solid rgba(255, 197, 43, 0.4);    border-radius: 8px;    padding: 0.15rem 0.55rem;    line-height: 1.2;    white-space: nowrap;
}.participants-pill {
    background:
        linear-gradient(
            135deg,
            #1b1d27,
            #151822
        );    border: 1px solid #62501d;    color: var(--cream);    padding: 0.38rem 0.62rem;    border-radius: 8px;    font-size: 0.7rem;    font-weight: 700;    cursor: pointer;    display: inline-flex;    align-items: center;    gap: 0.3rem;    transition: all 0.2s ease;
}.participants-pill:hover {
    border-color: var(--yellow-500);    background: #20202a;
}#participants-count {
    color: var(--yellow-300);
}.numbers-header {
    display: flex;    justify-content: space-between;    font-size: 0.7rem;    color: #798598;    margin-bottom: 0.5rem;
}.numbers-grid {
    display: grid;    grid-template-columns: repeat(6, 1fr);    gap: 0.42rem;
}
/* =========================================================
   BOLAS DISPONIBLES
   ========================================================= */.number-ball {
    aspect-ratio: 1;    border-radius: 50%;    border: none;    cursor: pointer;    background:
        radial-gradient(
            circle at 35% 28%,
            #ffd34c 0%,
            #ffc000 28%,
            #f5a900 65%,
            #e59400 100%
        );    color: #111;    font-family: var(--font-display);    font-size: 25px;    display: flex;    align-items: center;
    justify-content: center;    position: relative;    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.28),
        inset 0 2px 4px rgba(255, 255, 255, 0.45),
        inset 0 -3px 5px rgba(0, 0, 0, 0.18);    transition:
        transform 0.2s
        cubic-bezier(0.175, 0.885, 0.32, 1.275),
        box-shadow 0.2s ease;
}.number-ball:hover:not(:disabled) {
    transform: scale(1.08);    box-shadow:
        0 7px 17px rgba(255, 176, 0, 0.3),
        inset 0 2px 5px rgba(255, 255, 255, 0.55);    z-index: 2;
}.number-ball:active:not(:disabled) {
    transform: scale(1.03);
}.number-ball:disabled {
    cursor: not-allowed;
}
/* =========================================================
   BOLAS VENDIDAS
   ========================================================= */.number-ball.sold {
    background:
        radial-gradient(
            circle at 35% 25%,
            #5a6678 0%,
            #4b5668 35%,
            #3d4859 70%,
            #343e4e 100%
        );    color: #e8edf5;    font-size: 0.85rem;    display: flex;    flex-direction: column;    align-items: center;
    justify-content: center;    gap: 0.06rem;    padding: 0.1rem;    box-shadow:
        inset 0 2px 5px rgba(255, 255, 255, 0.08),
        inset 0 -3px 5px rgba(0, 0, 0, 0.25),
        0 2px 5px rgba(0, 0, 0, 0.2);
}.number-ball.sold .nb-lock {
    font-size: 0.9rem;    opacity: 0.95;
}.number-ball.sold .nb-owner {
    font-family: var(--font-body);    font-size: 0.51rem;    font-weight: 700;    max-width: 88%;    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;    color: #edf1f7;
}.number-ball.just-sold {
    animation: justSoldPulse 1.2s ease-in-out 1;    z-index: 3;
}@keyframes justSoldPulse {
    0%, 25%, 50% {
        background:
            radial-gradient(
                circle at 35% 25%,
                #ff6b6b 0%,
                #ff3b3b 35%,
                #d81f2a 70%,
                #b3121c 100%
            );        box-shadow:
            0 0 22px rgba(255, 59, 59, 0.85),
            0 0 0 0 rgba(255, 59, 59, 0.6);        transform: scale(1.1);
    }    12.5%, 37.5%, 100% {
        background:
            radial-gradient(
                circle at 35% 25%,
                #5a6678 0%,
                #4b5668 35%,
                #3d4859 70%,
                #343e4e 100%
            );        box-shadow: none;        transform: scale(1);
    }
}
/* =========================================================
   MI NÚMERO
   ========================================================= */.number-ball.sold.mine {
    background:
        linear-gradient(
            135deg,
            #4d9cff 0%,
            #1d63b5 100%
        );    color: #fff;    outline: 2px solid #4d9cff;    outline-offset: -2px;    box-shadow:
        0 0 12px rgba(77, 156, 255, 0.38),
        inset 0 2px 4px rgba(255, 255, 255, 0.4);
}
/* =========================================================
   NÚMERO GANADOR
   ========================================================= */.number-ball.drawn-winner {
    background:
        radial-gradient(
            circle at 35% 25%,
            #ffe16c 0%,
            #ffc21b 35%,
            #f3a900 70%,
            #e29400 100%
        );    color: #111;    outline: 3px solid #fff3a0;    outline-offset: -2px;    animation:
        winnerBounce
        0.8s
        ease
        infinite
        alternate;
}@keyframes winnerBounce {
    from {
        transform: scale(1);
    }    to {
        transform: scale(1.1);        filter: brightness(1.12);
    }
}
/* =========================================================
   GANADORES EN VIVO
   ========================================================= */.live-winners-section {
    background:
        linear-gradient(
            145deg,
            #101827,
            #080f1d
        );    border: 1px solid #263349;    border-radius: var(--r-md);    padding: 0.65rem;    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.22);
}.lw-header {
    font-family: var(--font-body);    font-size: 0.95rem;    letter-spacing: 0.02em;    color: #ffc52b;    margin-bottom: 0.45rem;    font-weight: 700;    text-transform: uppercase;
}.lw-list {
    display: flex;    flex-direction: column;    gap: 0.35rem;
}.lw-row {
    display: flex;    align-items: center;    gap: 0.55rem;    background:
        #030915;    border: 1px solid #1d293c;    border-radius: 7px;    padding: 0.45rem 0.6rem;    animation:
        lw-in
        0.4s
        cubic-bezier(0.16, 1, 0.3, 1)
        forwards;
}@keyframes lw-in {
    from {
        opacity: 0;        transform:
            translateY(-12px)
            scale(0.97);
    }    to {
        opacity: 1;        transform:
            translateY(0)
            scale(1);
    }
}.lw-num-badge {
    width: 38px;
    height: 38px;    border-radius: 50%;    flex-shrink: 0;    display: flex;    align-items: center;
    justify-content: center;    font-family: var(--font-display);    font-size: 1.2rem;    color: #111;    background:
        radial-gradient(
            circle at 35% 25%,
            #ffd74d 0%,
            #ffb400 60%,
            #e99b00 100%
        );    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);
}.lw-info {
    flex: 1;    display: flex;    flex-direction: column;    gap: 0.02rem;    min-width: 0;
}.lw-name {
    font-weight: 700;    font-size: 0.85rem;
}.lw-meta {
    font-size: 0.68rem;    color: #8994a7;
}.lw-badge {
    background:
        #1c1710;    border: 1px solid #694d15;    color: #ffc52b;    font-weight: 700;    font-size: 0.64rem;    padding: 0.25rem 0.55rem;    border-radius: 5px;    flex-shrink: 0;
}.lw-row.is-jackpot {
    border-color: #ff5ac8;    background:
        linear-gradient(
            135deg,
            #3a1150 0%,
            #1a0d2e 100%
        );    box-shadow: 0 0 14px rgba(255, 90, 200, 0.25);
}.lw-row.is-jackpot .lw-badge {
    background: linear-gradient(135deg, #a64ef5 0%, #ff5ac8 100%);    border-color: #ff5ac8;    color: #fff;
}.lw-jackpot-line {
    color: #ff5ac8;    font-weight: 700;
}
/* =========================================================
   GANADORES RECIENTES
   ========================================================= */.recent-winners-panel {
    background:
        linear-gradient(
            145deg,
            #101827 0%,
            #0a1220 100%
        );    border: 1px solid #202d42;    border-radius: var(--r-md);    padding: 0.65rem;
}.rwp-header {
    font-family: var(--font-body);    font-size: 1rem;    letter-spacing: 0.02em;    color: #ffc52b;    margin-bottom: 0.5rem;    font-weight: 700;
}.round-block {
    border: 1px solid #1d293c;    border-radius: 7px;    padding: 0.5rem;    margin-bottom: 0.45rem;    background: #080f1b;
}.round-block-header {
    display: flex;    align-items: center;    justify-content: space-between;    margin-bottom: 0.4rem;    gap: 0.4rem;
}.round-block-title {
    font-weight: 700;    font-size: 0.84rem;
}.round-block-title .rn {
    color: var(--yellow-300);
}.round-block-date {
    font-size: 0.68rem;    color: var(--dim);    font-family: var(--font-mono);
}.repeat-btn {
    background: var(--tint-red);    border: 1px solid var(--ruby);    color: var(--ruby-bright);    font-size: 0.66rem;    padding: 0.18rem 0.5rem;    border-radius: 20px;    cursor: pointer;    transition: background 0.2s;
}.repeat-btn:hover {
    background: var(--ruby);    color: #fff;
}.winners-grid {
    display: grid;    grid-template-columns: repeat(3, 1fr);    gap: 0.28rem;
}.winner-card {
    border: 1px solid #1c283a;    border-radius: 7px;    padding: 0.3rem 0.35rem;    display: flex;    flex-direction: column;    align-items: center;    text-align: center;    gap: 0.06rem;    background: #050b15;    min-width: 0;
}.winner-card .wc-top {
    display: flex;    align-items: center;    justify-content: center;    gap: 0.2rem;    font-size: 0.66rem;    opacity: 0.85;
}.winner-card .wc-name {
    font-weight: 700;    font-size: 0.68rem;    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;    max-width: 100%;
}.winner-card .wc-amount {
    font-family: var(--font-mono);    font-size: 0.68rem;    color: var(--emerald);
}.winner-card.mine {
    border-color: var(--blue-400);    background: var(--tint-blue);
}.winner-card .wc-tag {
    color: var(--yellow-300);    font-size: 0.6rem;
}
/* =========================================================
   JACKPOT WINNERS
   ========================================================= */.jackpot-block {
    border: 1px solid #ff5ac8;    background:
        linear-gradient(
            135deg,
            #3a1150 0%,
            #1a0d2e 100%
        );    border-radius: var(--r-sm);    padding: 0.5rem;    margin-bottom: 0.5rem;    text-align: center;    box-shadow: 0 0 18px rgba(255, 90, 200, 0.25);
}.jackpot-block-header {
    font-weight: 700;    color: #ff5ac8;    font-size: 0.82rem;    margin-bottom: 0.45rem;    text-align: center;
}.jackpot-cards-grid {
    display: flex;    flex-wrap: wrap;    justify-content: center;    gap: 0.4rem;
}.jb-winner-card {
    background: rgba(10, 5, 20, 0.55);    border: 1px solid #a64ef5;    border-radius: var(--r-sm);    padding: 0.5rem 0.6rem;    display: flex;    flex-direction: column;    align-items: center;    gap: 0.2rem;    flex: 0 1 150px;    text-align: center;
}.jb-winner-top {
    font-size: 0.74rem;    color: #ff5ac8;    font-weight: 700;
}.jb-winner-name {
    font-weight: 700;    font-size: 0.86rem;
}.jb-winner-amount {
    color: #ff5ac8;    font-weight: 700;    font-size: 0.84rem;
}.jackpot-block-summary {
    font-size: 0.68rem;    color: var(--dim);    margin-top: 0.4rem;    text-align: center;
}
/* =========================================================
   MODAL DE COMPRA
   ========================================================= */.purchase-confirm-modal {
    position: fixed;    inset: 0;    z-index: 300;    display: flex;    align-items: center;    justify-content: center;    padding: 1rem;    animation:
        fadeIn
        0.2s
        ease;
}.pcm-backdrop {
    position: absolute;    inset: 0;    background: rgba(1, 5, 12, 0.88);    backdrop-filter: blur(5px);
}.pcm-box {
    position: relative;    z-index: 1;    width: 100%;    max-width: 300px;    background:
        linear-gradient(
            145deg,
            #111b2c 0%,
            #0a1220 100%
        );    border: 1px solid #2a3952;    border-radius: var(--r-lg);    padding: 1.4rem 1.3rem;    display: flex;    flex-direction: column;    align-items: center;    gap: 0.45rem;    text-align: center;    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.65);    animation:
        modalPopIn
        0.35s
        cubic-bezier(0.175, 0.885, 0.32, 1.275)
        forwards;
}@keyframes modalPopIn {
    from {
        opacity: 0;        transform: scale(0.85);
    }    to {
        opacity: 1;        transform: scale(1);
    }
}.pcm-number {
    width: 68px;
    height: 68px;    border-radius: 50%;    display: flex;    align-items: center;
    justify-content: center;    font-family: var(--font-display);    font-size: 2.1rem;    color: #111;    background:
        radial-gradient(
            circle at 35% 25%,
            #ffd94f,
            #ffb000
        );    box-shadow:
        0 6px 16px rgba(255, 176, 0, 0.35),
        inset 0 2px 4px rgba(255, 255, 255, 0.6);    animation:
        pcmPulse
        1.5s
        ease-in-out
        infinite;
}@keyframes pcmPulse {
    0%,
    100% {
        transform: scale(1);
    }    50% {
        transform: scale(1.06);
    }
}.pcm-text {
    font-weight: 600;    font-size: 0.88rem;
}.pcm-price {
    font-family: var(--font-display);    font-size: 1.3rem;    color: var(--price-purple);
}.pcm-error {
    font-size: 0.82rem;    font-weight: 600;    color: var(--ruby-bright);    background: rgba(255, 89, 104, 0.12);    border: 1px solid rgba(255, 89, 104, 0.35);    border-radius: var(--r-sm);    padding: 0.45rem 0.7rem;    width: 100%;
}.pcm-actions {
    display: flex;    gap: 0.5rem;    width: 100%;    margin-top: 0.3rem;
}.pcm-actions .btn {
    flex: 1;
}
/* =========================================================
   REVELACIÓN DEL GANADOR
   ========================================================= */.draw-reveal-overlay {
    position: fixed;    inset: 0;    z-index: 250;    display: flex;    align-items: center;    justify-content: center;    background: rgba(1, 5, 12, 0.9);    backdrop-filter: blur(8px);    animation:
        fadeIn
        0.3s
        ease;
}.dro-content {
    text-align: center;    display: flex;    flex-direction: column;    align-items: center;    gap: 0.5rem;    animation:
        droZoomIn
        0.5s
        cubic-bezier(0.175, 0.885, 0.32, 1.275)
        forwards;
}@keyframes droZoomIn {
    from {
        opacity: 0;        transform: scale(0.5);
    }    to {
        opacity: 1;        transform: scale(1);
    }
}.dro-rank {
    font-family: var(--font-mono);    color: var(--yellow-300);    letter-spacing: 0.1em;    text-transform: uppercase;    font-size: 0.8rem;    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.5);
}.dro-number {
    width: 140px;
    height: 140px;    border-radius: 50%;    display: flex;    align-items: center;
    justify-content: center;    font-family: var(--font-display);    font-size: 4.2rem;    color: #111;    background:
        radial-gradient(
            circle at 35% 25%,
            #ffe26d 0%,
            #ffc21b 45%,
            #e99b00 100%
        );    border: 4px solid #ffd95a;    box-shadow:
        0 0 50px rgba(255, 176, 0, 0.6),
        inset 0 4px 10px rgba(255, 255, 255, 0.7),
        inset 0 -4px 10px rgba(0, 0, 0, 0.3);    animation:
        droPulseGlow
        1.2s
        ease-in-out
        infinite alternate;
}@keyframes droPulseGlow {
    from {
        transform: scale(1);        box-shadow:
            0 0 30px rgba(255, 176, 0, 0.5);
    }    to {
        transform: scale(1.08);        box-shadow:
            0 0 70px rgba(255, 176, 0, 0.9);
    }
}.dro-username {
    font-size: 1.3rem;    font-weight: 700;    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.5);
}.dro-prize {
    font-family: var(--font-mono);    color: var(--emerald);    font-size: 1.15rem;    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.5);
}
/* =========================================================
   RONDA TERMINADA
   ========================================================= */.round-settled-overlay {
    position: fixed;    inset: 0;    z-index: 250;    display: flex;    align-items: center;    justify-content: center;    background: rgba(1, 5, 12, 0.9);    backdrop-filter: blur(8px);    animation:
        fadeIn
        0.3s
        ease;
}.rso-content {
    text-align: center;    display: flex;    flex-direction: column;    align-items: center;    gap: 0.6rem;    animation:
        droZoomIn
        0.5s
        cubic-bezier(0.175, 0.885, 0.32, 1.275)
        forwards;
}.rso-icon {
    font-size: 3.4rem;
}.rso-title {
    font-family: var(--font-display);    font-size: 2.4rem;    letter-spacing: 0.06em;    color: var(--yellow-300);    text-shadow:
        0 0 30px rgba(255, 176, 0, 0.6),
        0 2px 8px rgba(0, 0, 0, 0.6);
}.rso-sub {
    font-family: var(--font-mono);    font-size: 0.9rem;    color: var(--dim);
}
/* =========================================================
   VENTA ABIERTA
   ========================================================= */.sale-open-overlay {
    position: fixed;    inset: 0;    z-index: 250;    display: flex;    align-items: center;    justify-content: center;    background: rgba(1, 5, 12, 0.9);    backdrop-filter: blur(8px);    animation:
        fadeIn
        0.3s
        ease;
}.soo-content {
    text-align: center;    display: flex;    flex-direction: column;    align-items: center;    gap: 0.6rem;    animation:
        droZoomIn
        0.5s
        cubic-bezier(0.175, 0.885, 0.32, 1.275)
        forwards;
}.soo-icon {
    font-size: 3.4rem;
}.soo-title {
    font-family: var(--font-display);    font-size: 2.4rem;    letter-spacing: 0.06em;    color: var(--emerald);    text-shadow:
        0 0 30px rgba(57, 217, 149, 0.6),
        0 2px 8px rgba(0, 0, 0, 0.6);
}.soo-sub {
    font-family: var(--font-mono);    font-size: 0.9rem;    color: var(--dim);
}
/* =========================================================
   SORTEO CANCELADO
   ========================================================= */.round-cancelled-overlay {
    position: fixed;    inset: 0;    z-index: 250;    display: flex;    align-items: center;    justify-content: center;    background: rgba(1, 5, 12, 0.9);    backdrop-filter: blur(8px);    animation:
        fadeIn
        0.3s
        ease;
}.rco-content {
    text-align: center;    display: flex;    flex-direction: column;    align-items: center;    gap: 0.6rem;    animation:
        droZoomIn
        0.5s
        cubic-bezier(0.175, 0.885, 0.32, 1.275)
        forwards;
}.rco-icon {
    font-size: 3.4rem;
}.rco-title {
    font-family: var(--font-display);    font-size: 2.4rem;    letter-spacing: 0.06em;    color: var(--ruby-bright);    text-shadow:
        0 0 30px rgba(255, 89, 104, 0.6),
        0 2px 8px rgba(0, 0, 0, 0.6);
}.rco-sub {
    font-family: var(--font-mono);    font-size: 0.85rem;    color: var(--dim);    max-width: 320px;
}
/* =========================================================
   INICIAMOS EL SORTEO
   ========================================================= */.drawing-started-overlay {
    position: fixed;    inset: 0;    z-index: 250;    display: flex;    align-items: center;    justify-content: center;    background: rgba(1, 5, 12, 0.9);    backdrop-filter: blur(8px);    animation:
        fadeIn
        0.3s
        ease;
}.dso-content {
    text-align: center;    display: flex;    flex-direction: column;    align-items: center;    gap: 0.6rem;    animation:
        droZoomIn
        0.5s
        cubic-bezier(0.175, 0.885, 0.32, 1.275)
        forwards;
}.dso-icon {
    font-size: 3.4rem;
}.dso-title {
    font-family: var(--font-display);    font-size: 2.4rem;    letter-spacing: 0.06em;    color: var(--yellow-300);    text-shadow:
        0 0 30px rgba(255, 176, 0, 0.6),
        0 2px 8px rgba(0, 0, 0, 0.6);
}.dso-sub {
    font-family: var(--font-mono);    font-size: 0.9rem;    color: var(--dim);
}
/* =========================================================
   JACKPOT REVEAL
   ========================================================= */.jackpot-reveal-overlay {
    position: fixed;    inset: 0;    z-index: 260;    display: flex;    align-items: center;    justify-content: center;    background: #07020e;    overflow: hidden;    animation:
        fadeIn
        0.4s
        ease;
}.jro-content {
    text-align: center;    display: flex;    flex-direction: column;    align-items: center;    gap: 0.45rem;    z-index: 2;    position: relative;    animation:
        droZoomIn
        0.6s
        cubic-bezier(0.175, 0.885, 0.32, 1.275)
        forwards;
}.jro-badge {
    font-family: var(--font-display);    font-size: 1.6rem;    color: #ff5ac8;    letter-spacing: 0.05em;    text-shadow:
        0 0 15px rgba(255, 90, 200, 0.6);
}.jro-number {
    width: 150px;
    height: 150px;    border-radius: 50%;    display: flex;    align-items: center;
    justify-content: center;    font-family: var(--font-display);    font-size: 4.5rem;    color: #fff;    background:
        linear-gradient(
            135deg,
            #a64ef5 0%,
            #7a1fe0 50%,
            #4a0d9e 100%
        );    border: 4px solid #ff5ac8;    box-shadow:
        0 0 60px rgba(122, 31, 224, 0.8),
        inset 0 4px 10px rgba(255, 255, 255, 0.4);    animation:
        jroPulse
        1s
        ease-in-out
        infinite alternate;
}@keyframes jroPulse {
    from {
        transform: scale(1);
    }    to {
        transform: scale(1.1);        filter:
            drop-shadow(
                0 0 20px #ff5ac8
            );
    }
}.jro-username {
    font-size: 1.4rem;    font-weight: 700;    color: #ff5ac8;    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.6);
}.jro-prize {
    font-family: var(--font-mono);    color: var(--yellow-300);    font-size: 1.2rem;    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.6);
}.jro-confetti {
    position: absolute;    inset: 0;    z-index: 1;    pointer-events: none;
}.confetti-piece {
    position: absolute;    top: -20px;    width: 8px;
    height: 14px;    animation:
        confetti-fall
        linear
        forwards;
}@keyframes confetti-fall {
    to {
        transform:
            translateY(110vh)
            rotate(540deg);
    }
}
/* =========================================================
   MODAL VIDEO
   ========================================================= */.video-modal {
    position: fixed;    inset: 0;    z-index: 300;    display: flex;    align-items: center;    justify-content: center;    padding: 1rem;    animation:
        fadeIn
        0.2s
        ease;
}.video-modal-box {
    position: relative;    z-index: 1;    width: 100%;    max-width: 600px;    background: var(--panel);    border: 1px solid var(--line-strong);    border-radius: var(--r-lg);    overflow: hidden;    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.7);    animation:
        modalPopIn
        0.3s
        ease;
}.video-modal-header {
    display: flex;    align-items: center;    justify-content: space-between;    padding: 0.7rem 0.9rem;    border-bottom: 1px solid var(--line);
}.video-modal-header h3 {
    margin: 0;    font-family: var(--font-display);    font-size: 1.15rem;
}.video-modal-body {
    aspect-ratio: 16 / 9;
}.video-modal-body iframe,
.video-modal-body video {
    width: 100%;
    height: 100%;    border: none;    display: block;    background: #000;
}.lobby-modal-close {
    background: none;    border: none;    color: var(--cream);    font-size: 1.3rem;    cursor: pointer;    opacity: 0.7;    transition: opacity 0.2s;
}.lobby-modal-close:hover {
    opacity: 1;
}
/* =========================================================
   HISTORIAL / USUARIOS ONLINE
   ========================================================= */.history-modal,
.online-users-modal {
    position: fixed;    inset: 0;    z-index: 300;    display: flex;    align-items: center;    justify-content: center;    padding: 1rem;    background:
        rgba(1, 5, 12, 0.9);    backdrop-filter: blur(5px);    animation:
        fadeIn
        0.2s
        ease;
}.history-box,
.oum-box {
    width: 100%;    max-width: 360px;    max-height: 76vh;    background:
        linear-gradient(
            145deg,
            #111b2c 0%,
            #0a1220 100%
        );    border: 1px solid var(--line-strong);    border-radius: var(--r-lg);    display: flex;    flex-direction: column;    overflow: hidden;    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.65);    animation:
        modalPopIn
        0.3s
        cubic-bezier(0.175, 0.885, 0.32, 1.275)
        forwards;
}.history-header,
.oum-header {
    display: flex;    align-items: center;    justify-content: space-between;    padding: 0.8rem 1rem;    border-bottom: 1px solid var(--line);
}.history-header h2,
.oum-header h2 {
    margin: 0;    font-family: var(--font-display);    font-size: 1.2rem;
}.history-list,
.oum-list {
    flex: 1;    overflow-y: auto;    padding: 0.7rem 0.9rem;    display: flex;    flex-direction: column;    gap: 0.4rem;
}.history-empty,
.oum-empty {
    text-align: center;    opacity: 0.6;    padding: 1rem 0;    font-size: 0.85rem;
}
/* =========================================================
   USUARIOS ONLINE
   ========================================================= */.oum-user-row {
    display: flex;    align-items: center;    gap: 0.45rem;    background: #080f1b;    border: 1px solid #1c293d;    border-radius: var(--r-sm);    padding: 0.45rem 0.65rem;    font-size: 0.82rem;
}.oum-me {
    border-color: var(--yellow-500);
}.oum-me-tag {
    margin-left: auto;    font-size: 0.64rem;    color: var(--yellow-300);
}
/* =========================================================
   HISTORIAL
   ========================================================= */.history-item {
    display: flex;    align-items: center;    gap: 0.5rem;    background: #080f1b;    border: 1px solid #1c293d;    border-radius: var(--r-sm);    padding: 0.45rem 0.6rem;    font-size: 0.8rem;
}.history-item .hi-left {
    flex: 1;    display: flex;    flex-direction: column;
}.hi-meta {
    font-size: 0.65rem;    opacity: 0.55;
}.hi-amount.positive {
    color: var(--emerald);    font-family: var(--font-mono);    font-weight: 700;
}.hi-amount.negative {
    color: var(--ruby-bright);    font-family: var(--font-mono);    font-weight: 700;
}
/* =========================================================
   PARTICIPANTES
   ========================================================= */.participant-row {
    display: flex;    align-items: center;    justify-content: space-between;    gap: 0.4rem;    background: #080f1b;    border: 1px solid #1c293d;    border-radius: var(--r-sm);    padding: 0.45rem 0.6rem;    font-size: 0.82rem;
}.participant-numbers {
    display: flex;    gap: 0.25rem;    flex-wrap: wrap;    justify-content: flex-end;
}.participant-num-badge {
    background: #21190b;    border: 1px solid #66501a;    color: var(--yellow-300);    font-family: var(--font-mono);    font-size: 0.68rem;    padding: 0.08rem 0.35rem;    border-radius: 6px;
}.participants-total {
    text-align: center;    padding: 0.55rem 0;    opacity: 0.7;    font-size: 0.76rem;    border-top: 1px solid var(--line);    margin: 0;
}
/* =========================================================
   FLECHA "ELIGE TU NÚMERO"
   ========================================================= */.scroll-hint {
    position: fixed;    left: 50%;    bottom: 22px;    z-index: 150;    display: flex;    flex-direction: column;    align-items: center;    gap: 0.15rem;    transform: translateX(-50%);    cursor: pointer;    pointer-events: auto;    background: rgba(1, 5, 12, 0.7);    backdrop-filter: blur(4px);    border: 1px solid rgba(255, 197, 43, 0.3);    border-radius: 14px;    padding: 0.5rem 1rem;    animation:
        scrollHintFade
        0.3s
        ease;
}.scroll-hint-arrow {
    font-size: 1.8rem;    line-height: 1;    color: var(--yellow-300);    text-shadow:
        0 0 12px rgba(255, 197, 43, 0.9),
        0 0 24px rgba(255, 197, 43, 0.6);    animation:
        scrollHintBounce
        1.1s
        ease-in-out
        infinite;
}.scroll-hint-text {
    font-family: var(--font-mono);    font-size: 0.68rem;    font-weight: 700;    letter-spacing: 0.05em;    text-transform: uppercase;    color: var(--yellow-300);    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.6);
}@keyframes scrollHintBounce {
    0%, 100% {
        transform: translateY(0);        opacity: 0.75;
    }    50% {
        transform: translateY(8px);        opacity: 1;
    }
}@keyframes scrollHintFade {
    from {
        opacity: 0;        transform: translate(-50%, 10px);
    }    to {
        opacity: 1;        transform: translate(-50%, 0);
    }
}
/* =========================================================
   MANTENIMIENTO
   ========================================================= */.maintenance-overlay {
    position: fixed;    inset: 0;    z-index: 400;    display: flex;    align-items: center;    justify-content: center;    background: var(--bg-900);    padding: 1.4rem;
}.mo-content {
    text-align: center;    max-width: 380px;
}.mo-icon {
    font-size: 2.8rem;    animation:
        bounceSlow
        2s
        infinite;
}.mo-title {
    font-family: var(--font-display);    font-size: 1.7rem;    color: var(--yellow-300);    margin: 0.45rem 0;
}.mo-message {
    color: var(--cream);    opacity: 0.8;    font-size: 0.9rem;
}
/* =========================================================
   CHAT
   ========================================================= */.chat-fab {
    position: fixed;    right: 0.9rem;    bottom: 0.9rem;    z-index: 220;    width: 50px;
    height: 50px;    border-radius: 50%;    background:
        linear-gradient(
            135deg,
            #ffd04a 0%,
            #ffad00 100%
        );    border: none;    color: var(--ink);    font-size: 1.35rem;    display: flex;    align-items: center;
    justify-content: center;    cursor: pointer;    box-shadow:
        0 6px 20px rgba(255, 176, 0, 0.35);    transition:
        transform
        0.2s
        cubic-bezier(0.175, 0.885, 0.32, 1.275);
}.chat-fab:hover {
    transform: scale(1.1);
}.chat-fab-badge {
    position: absolute;    top: -2px;    right: -2px;    min-width: 18px;    height: 18px;    padding: 0 4px;    border-radius: 10px;    background: var(--ruby-bright);    color: #fff;    font-family: var(--font-mono);    font-size: 0.64rem;    font-weight: 700;    display: flex;    align-items: center;
    justify-content: center;    border: 2px solid var(--bg-900);
}.chat-float-panel {
    position: fixed;    left: 0;    right: 0;    bottom: 0.9rem;    z-index: 220;    width: 100%;    height: min(
        360px,
        calc(100vh - 2.2rem)
    );    background:
        linear-gradient(
            145deg,
            #111b2c 0%,
            #0a1220 100%
        );    border: 1px solid #253349;    border-radius: var(--r-lg);    display: flex;    flex-direction: column;    overflow: hidden;    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.55);    animation:
        modalPopIn
        0.3s
        cubic-bezier(0.16, 1, 0.3, 1)
        forwards;    transform-origin: bottom right;
}.chat-header {
    padding: 0.6rem 0.8rem;    font-family: var(--font-display);    letter-spacing: 0.04em;    font-size: 0.92rem;    border-bottom: 1px solid var(--line);    color: var(--yellow-300);    display: flex;    align-items: center;    gap: 0.45rem;
}.chat-header > span:first-child {
    flex: 1;
}.chat-close-btn {
    background: #151f30;    border: none;    color: var(--cream);    width: 20px;
    height: 20px;    border-radius: 50%;    font-size: 0.72rem;    cursor: pointer;    flex-shrink: 0;    transition:
        background
        0.2s;
}.chat-close-btn:hover {
    background: var(--line-strong);
}.chat-online {
    display: flex;    align-items: center;    gap: 0.3rem;    font-family: var(--font-mono);    font-size: 0.66rem;    color: var(--emerald);
}.online-dot {
    width: 6px;
    height: 6px;    border-radius: 50%;    background: var(--emerald);    animation:
        online-pulse
        2s
        infinite;
}@keyframes online-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }    50% {
        opacity: 0.4;
        transform: scale(0.8);
    }
}.online-view-btn {
    background: var(--tint-green);    border: 1px solid var(--emerald);    color: var(--emerald);    font-family: var(--font-mono);    font-size: 0.62rem;    font-weight: 700;    padding: 0.06rem 0.35rem;    border-radius: 10px;    cursor: pointer;    transition:
        background
        0.2s;
}.online-view-btn:hover {
    background: var(--emerald);    color: var(--ink);
}.chat-messages {
    flex: 1;    overflow-y: auto;    padding: 0.6rem 0.75rem;    display: flex;    flex-direction: column;    gap: 0.4rem;
}.chat-message {
    font-size: 0.78rem;    line-height: 1.3;    max-width: 78%;    align-self: flex-start;    background: #131d2f;    border: 1px solid #223049;    border-radius: 12px 12px 12px 4px;    padding: 0.4rem 0.6rem;    word-wrap: break-word;    animation:
        fadeIn
        0.2s
        ease;
}.chat-message.mine {
    align-self: flex-end;    border-radius: 12px 12px 4px 12px;    color: #fff;    background:
        linear-gradient(
            135deg,
            #1d63b5 0%,
            #144a8a 100%
        );    border-color: #2a7ad1;
}.chat-message .chat-user {
    display: block;    color: var(--yellow-300);    font-weight: 700;    font-size: 0.7rem;    margin-bottom: 0.1rem;
}.chat-message.mine .chat-user {
    display: none;
}.chat-message.system {
    align-self: center;    background: none;    border: none;    padding: 0;    opacity: 0.6;    font-style: italic;
}.chat-form {
    display: flex;    gap: 0.35rem;    padding: 0.55rem 0.75rem;    border-top: 1px solid var(--line);    background: #050b15;
}.chat-form input {
    flex: 1;    background: #0d1625;    border: 1px solid #2b3951;    border-radius: var(--r-sm);    padding: 0.45rem 0.6rem;    color: var(--cream);    font-size: 0.8rem;
}.chat-form input:focus {
    outline: none;    border-color: var(--yellow-500);
}
@media (min-width: 601px) {
    .chat-float-panel {
        left: auto;
        right: 0.9rem;
        width: 340px;
        max-width: calc(100vw - 1.8rem);
    }
}
/* =========================================================
   TOAST
   ========================================================= */.toast {
    position: fixed;    bottom: 1.1rem;    left: 50%;    transform: translateX(-50%);    background:
        linear-gradient(
            135deg,
            #111b2b 0%,
            #0a1220 100%
        );    border: 1px solid #73551a;    color: var(--cream);    padding: 0.65rem 1.1rem;    border-radius: var(--r-sm);    font-size: 0.82rem;    z-index: 350;    max-width: 90vw;    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.5);    animation:
        toastPop
        0.3s
        cubic-bezier(0.175, 0.885, 0.32, 1.275)
        forwards;
}@keyframes toastPop {
    from {
        opacity: 0;        transform:
            translate(-50%, 20px);
    }    to {
        opacity: 1;        transform:
            translate(-50%, 0);
    }
}.toast.error {
    border-color: var(--ruby-bright);
}
/* =========================================================
   RESPONSIVE — MÓVIL
   ========================================================= */@media (max-width: 480px) {    .table-main {
        padding: 0.45rem;
    }    .numbers-section {
        padding: 0.65rem;
    }    /*
       5 columnas como en las capturas
    */
    .numbers-grid {
        grid-template-columns: repeat(5, 1fr);        gap: 0.5rem;
    }    .number-ball {
        font-size: 25px;
    }    .number-ball.sold {
        font-size: 25px;
    }    .number-ball.sold .nb-owner {
        font-size: 0.49rem;
    }    .numbers-title {
        font-size: 0.82rem;
    }    .participants-pill {
        font-size: 0.68rem;        padding:
            0.37rem
            0.55rem;
    }    .dro-number {
        width: 105px;        height: 105px;        font-size: 3rem;
    }    .header-actions {
        gap: 0.25rem;
    }    .pill-btn {
        padding:
            0.3rem
            0.5rem;        font-size: 0.7rem;
    }    .pill-badge {
        padding:
            0.3rem
            0.5rem;        font-size: 0.7rem;
    }    .lw-row {
        padding:
            0.42rem
            0.5rem;
    }    .lw-num-badge {
        width: 37px;
        height: 37px;
    }    .lw-name {
        font-size: 0.82rem;
    }
}
/* =========================================================
   PANTALLAS UN POCO MÁS GRANDES
   ========================================================= */@media (min-width: 481px) {    .numbers-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* ---------------------------------------------------------
   Bloque de preventa: premios, progreso, texto del jackpot
   --------------------------------------------------------- */
.jackpot-hero-sub { font-size: 0.66rem; color: var(--dim); text-align: center; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 0.1rem; }

#pre-sale-info { display: flex; flex-direction: column; gap: 0.5rem; }

.prizes-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.55rem 0.35rem; }
.prizes-card-header { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 0.82rem; color: var(--yellow-300); margin-bottom: 0.45rem; }
.prizes-sold-badge { background: var(--panel-alt); border: 1px solid var(--line-strong); color: var(--dim); font-size: 0.66rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 20px; }
.prizes-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.18rem; }
.prize-card { background: var(--panel-alt); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.4rem 0.1rem; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; text-align: center; }
.prize-card-top { font-size: 0.66rem; color: var(--dim); font-weight: 600; white-space: nowrap; }
.prize-card-amount { font-family: var(--font-display); font-size: 0.86rem; color: var(--yellow-300); white-space: nowrap; }

.sale-progress { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.55rem; }
.sale-progress-top { display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; margin-bottom: 0.35rem; }
.sale-progress-track { width: 100%; height: 8px; border-radius: 20px; background: var(--panel-alt); overflow: hidden; }
.sale-progress-fill { height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--blue-400), var(--blue-700)); width: 0%; transition: width 0.4s ease; }
.sale-progress-sub { text-align: center; font-size: 0.7rem; color: var(--dim); margin: 0.4rem 0 0; }

@media (max-width: 480px) {
    /* Los premios se quedan en 5 columnas incluso en pantallas chicas */
}


/* ---------------------------------------------------------
   Billetera: saldo + recargar/retirar
   --------------------------------------------------------- */
.wallet-balance-block {
    background: var(--panel-alt); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 0.7rem; margin: 0 0 0.6rem; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
}
.wallet-balance-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); }
.wallet-balance-value { font-family: var(--font-display); font-size: 1.7rem; color: var(--yellow-300); }
.wallet-balance-actions { display: flex; gap: 0.5rem; width: 100%; margin-top: 0.2rem; }
.wallet-balance-actions .btn { flex: 1; text-align: center; text-decoration: none; }