/* ==========================================================================
   NOTTO — Juego principal
   Requiere css/system.css (fichas, neón, laca, cursor).

   El JS conmuta clases en <body> para cambiar de vista. Aquí eso ya no
   cambia un degradado: cambia el mundo de color entero.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Lienzo y mundos
   -------------------------------------------------------------------------- */

body {
    display: block;
    padding: 0;
    overflow-x: hidden;
}

/* Fábrica: el dinero que ganas */
body.home-active {
    --accent: var(--neon-orange);
    --accent-core: #FFD2A8;
}

/* Sala de apuestas: el dinero que arriesgas */
body.roulette-active {
    --accent: var(--neon-magenta);
    --accent-core: #FFB8DC;
}

/* Has ganado: la sala entera se pone verde */
body.roulette-active.roulette-win {
    --accent: var(--neon-lime);
    --accent-core: #C6FFE0;
}

/* Información */
body.chat-active {
    --accent: var(--neon-cyan);
    --accent-core: #C4F6FF;
}

body.christmas-mode {
    --accent: var(--neon-red);
    --accent-core: #FFC9CE;
}

.container {
    width: min(1180px, 100%);
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
   2. Aviso de mantenimiento
   -------------------------------------------------------------------------- */

#maintenance-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-toast);
    display: none;
    padding: 9px var(--sp-4);
    text-align: center;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #0A0A0F;
    background: repeating-linear-gradient(135deg,
            var(--neon-gold) 0 18px, #0A0A0F 18px 36px);
    box-shadow: 0 6px 24px -8px rgba(0, 0, 0, .9);
}

/* El texto necesita fondo sólido sobre los galones */
#maintenance-banner span,
#maintenance-banner strong {
    background: var(--neon-gold);
    padding: 2px 10px;
    border-radius: var(--r-sm);
}

.maintenance-disabled {
    position: relative;
    pointer-events: none;
    filter: grayscale(1) brightness(.55);
}

.maintenance-disabled::after {
    content: 'EN MANTENIMIENTO';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background: rgba(5, 5, 10, .8);
    color: var(--neon-gold);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    z-index: 5;
}

/* --------------------------------------------------------------------------
   3. Cabecera
   -------------------------------------------------------------------------- */

header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    margin-bottom: var(--sp-5);
    background: linear-gradient(180deg, var(--lacquer-hi) 0%, var(--lacquer) 65%);
    border: 1px solid var(--seam);
    border-radius: var(--r-lg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 28px 56px -34px #000;
    overflow: hidden;
}

/* El rótulo de arriba deja su luz sobre la laca */
header::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(110% 70% at 50% -25%,
            color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%);
}

header>* {
    position: relative;
}

header h1 {
    display: none;
}

header h3 {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ash);
}

.logo-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* El logo es el rótulo de neón de la sala */
.main-logo {
    max-width: 320px;
    height: auto;
    filter:
        drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)) drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 45%, transparent));
    transition: filter var(--t-slow) var(--ease);
}

.main-logo:hover {
    filter:
        drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 90%, transparent)) drop-shadow(0 0 34px color-mix(in srgb, var(--accent) 60%, transparent));
}

h1 {
    font-family: var(--font-sign);
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    text-align: center;
    letter-spacing: .06em;
    margin-bottom: var(--sp-4);
    color: var(--accent-core);
    text-shadow:
        0 0 4px color-mix(in srgb, var(--accent) 85%, transparent),
        0 0 18px color-mix(in srgb, var(--accent) 50%, transparent);
}

h6 {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ash);
    margin-bottom: var(--sp-4);
}

/* Control de opciones: un pulsador de panel */
.options-link {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--glass);
    border: 1px solid var(--seam-hi);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
    transition: border-color var(--t-med) var(--ease),
        box-shadow var(--t-med) var(--ease),
        background var(--t-med) var(--ease);
}

.options-link svg {
    width: 20px;
    height: 20px;
    color: var(--ash);
    transition: color var(--t-med) var(--ease);
}

.options-link:hover {
    background: color-mix(in srgb, var(--accent) 14%, var(--glass));
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        0 0 18px -4px color-mix(in srgb, var(--accent) 70%, transparent);
}

.options-link:hover svg {
    color: var(--accent-core);
}

/* Instagram conserva su identidad, pero como tubo, no como arcoíris girando */
.options-link.insta-btn {
    background: linear-gradient(140deg, #F9CE34 0%, #EE2A7B 50%, #6228D7 100%);
    border-color: rgba(255, 255, 255, .35);
    box-shadow: 0 0 20px -6px #EE2A7B;
}

.options-link.insta-btn svg {
    color: #fff;
}

.options-link.insta-btn:hover {
    box-shadow: 0 0 28px -4px #EE2A7B;
}

@media (max-width: 768px) {
    header {
        padding: var(--sp-5) var(--sp-4) var(--sp-4);
    }

    .options-link {
        top: var(--sp-3);
        right: var(--sp-3);
        width: 38px;
        height: 38px;
    }

    .main-logo {
        max-width: 230px;
    }
}

/* --------------------------------------------------------------------------
   4. Visores de estado — la firma
   El número va en cristal hundido y encendido como un tubo.
   -------------------------------------------------------------------------- */

.stats {
    display: flex;
    width: 100%;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.stat-item {
    position: relative;
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-4);
    background: #05050A;
    border: 1px solid #000;
    border-radius: var(--r-md);
    box-shadow:
        inset 0 2px 14px rgba(0, 0, 0, .9),
        0 1px 0 rgba(255, 255, 255, .05);
}

.stat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ash-dim);
}

.stat-value {
    display: inline-block;
    min-width: 0;
    text-align: center;
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-weight: 700;
    font-size: clamp(1.25rem, 3.6vw, 1.85rem);
    line-height: 1.1;
    word-break: break-all;
    color: var(--accent-core);
    text-shadow:
        0 0 4px color-mix(in srgb, var(--accent) 90%, transparent),
        0 0 15px color-mix(in srgb, var(--accent) 55%, transparent),
        0 0 40px color-mix(in srgb, var(--accent) 26%, transparent);
}

/* La máquina está produciendo: se enciende un piloto en la esquina */
.stat-item.active-production::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-core);
    box-shadow:
        0 0 5px color-mix(in srgb, var(--accent) 90%, transparent),
        0 0 14px color-mix(in srgb, var(--accent) 60%, transparent);
    animation: production-breathe 2.4s var(--ease) infinite;
}

@keyframes production-breathe {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}

/* El menú de CP cuelga del visor */
.cp-dropdown {
    transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}

.cp-dropdown:hover {
    border-color: color-mix(in srgb, var(--neon-cyan) 55%, transparent) !important;
    box-shadow: 0 0 20px -6px var(--neon-cyan) !important;
}

/* --------------------------------------------------------------------------
   5. El actuador
   -------------------------------------------------------------------------- */

main {
    display: grid;
    gap: var(--sp-5);
}

.clicker-section {
    padding: var(--sp-7) var(--sp-5);
    text-align: center;
    background: linear-gradient(180deg, var(--lacquer-hi) 0%, var(--lacquer) 65%);
    border: 1px solid var(--seam);
    border-radius: var(--r-lg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 28px 56px -34px #000;
    position: relative;
    overflow: hidden;
}

.clicker-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(80% 60% at 50% 40%,
            color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
}

.clicker-section>* {
    position: relative;
}

/* Cúpula de cristal sobre un anillo de neón */
.click-button {
    --btn: var(--accent);
    --btn-core: var(--accent-core);
    width: 210px;
    height: 210px;
    margin: 0 auto;
    border-radius: 50%;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 38% 30%, rgba(255, 255, 255, .18), transparent 46%),
        radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--btn) 55%, #0A0A12), #07070C 72%);
    box-shadow:
        inset 0 2px 2px rgba(255, 255, 255, .22),
        inset 0 -18px 34px rgba(0, 0, 0, .75),
        0 0 0 2px color-mix(in srgb, var(--btn) 65%, transparent),
        0 0 22px 2px color-mix(in srgb, var(--btn) 55%, transparent),
        0 0 70px -10px color-mix(in srgb, var(--btn) 60%, transparent),
        0 22px 40px -18px #000;
    transition: transform var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease);
}

/* El destello que recorre la cúpula al pasar por encima */
.click-button::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .3) 0%, transparent 58%);
    opacity: 0;
    transform: scale(.6);
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}

.click-button:hover::before {
    opacity: 1;
    transform: scale(1);
}

.click-button:hover {
    box-shadow:
        inset 0 2px 2px rgba(255, 255, 255, .26),
        inset 0 -18px 34px rgba(0, 0, 0, .7),
        0 0 0 2px color-mix(in srgb, var(--btn) 85%, transparent),
        0 0 30px 3px color-mix(in srgb, var(--btn) 70%, transparent),
        0 0 90px -8px color-mix(in srgb, var(--btn) 75%, transparent),
        0 22px 40px -18px #000;
}

/* Se hunde en el panel */
.click-button:active {
    transform: translateY(3px) scale(.985);
    box-shadow:
        inset 0 6px 18px rgba(0, 0, 0, .85),
        0 0 0 2px color-mix(in srgb, var(--btn) 95%, transparent),
        0 0 40px 4px color-mix(in srgb, var(--btn) 85%, transparent),
        0 6px 14px -8px #000;
}

.btn-ripple {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}

.gear-icon {
    font-size: 3.4em;
    line-height: 1;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--btn) 75%, transparent));
}

/* El engranaje solo gira mientras pulsas: el movimiento premia la acción */
.click-button:active .gear-icon {
    animation: rotate .6s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.click-text {
    font-family: var(--font-sign);
    font-size: 13px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--btn-core);
    text-shadow: 0 0 10px color-mix(in srgb, var(--btn) 80%, transparent);
}

.click-value {
    margin-top: var(--sp-5);
    font-family: var(--font-num);
    font-size: 14px;
    color: var(--ash);
}

.click-value .n-num,
.click-value span {
    color: var(--accent-core);
}

/* Enlace de mejora de clic */
.click-value-link {
    display: inline-block;
    margin-top: var(--sp-4);
    padding: 13px 30px;
    border-radius: var(--r-md);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--accent) 24%, var(--lacquer-hi)),
            color-mix(in srgb, var(--accent) 9%, var(--lacquer)));
    color: var(--accent-core);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        0 0 20px -8px color-mix(in srgb, var(--accent) 75%, transparent);
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease);
}

.click-value-link::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    transform: rotate(25deg);
    background: linear-gradient(to right,
            transparent 0%, rgba(255, 255, 255, .22) 50%, transparent 100%);
}

.click-value-link:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 0 30px -6px color-mix(in srgb, var(--accent) 85%, transparent);
}

.click-value-link:hover::before {
    animation: shine 1.4s linear infinite;
}

@keyframes shine {
    100% {
        left: 200%;
    }
}

.click-value-link:active {
    transform: translateY(1px);
}

/* Cosméticos del actuador. Cada uno es un gas distinto en el tubo. */
.click-button.color-orange {
    --btn: #FF6B00;
    --btn-core: #FFD2A8;
}

.click-button.color-red {
    --btn: #FF3B4E;
    --btn-core: #FFC9CE;
}

.click-button.color-green {
    --btn: #38F58A;
    --btn-core: #C6FFE0;
}

.click-button.color-blue {
    --btn: #2E8BFF;
    --btn-core: #BEDBFF;
}

.click-button.color-pink {
    --btn: #FF2D95;
    --btn-core: #FFB8DC;
}

.click-button.color-purple {
    --btn: #A855F7;
    --btn-core: #E6CDFF;
}

.click-button.color-white {
    --btn: #E8ECFF;
    --btn-core: #FFFFFF;
}

.click-button.cp-button {
    --btn: var(--neon-cyan);
    --btn-core: #C4F6FF;
}

/* Niveles altos del actuador: el tubo se vuelve inestable */
.click-button.level-8 {
    animation: level8-neon 2.4s var(--ease) infinite;
}

@keyframes level8-neon {

    0%,
    100% {
        filter: saturate(1);
    }

    50% {
        filter: saturate(1.5) brightness(1.12);
    }
}

/* Anillo de partículas orbitando */
.click-button.level-9::after,
.click-button.level-10::after {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1px dashed color-mix(in srgb, var(--btn) 70%, transparent);
    animation: spin-particles 7s linear infinite;
    pointer-events: none;
}

@keyframes spin-particles {
    to {
        transform: rotate(360deg);
    }
}

.click-button.level-9::before {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .34) 0%, transparent 58%);
    opacity: .5;
    transform: scale(1);
}

.click-button.level-10 {
    animation: level10-god 3.2s var(--ease) infinite;
}

@keyframes level10-god {

    0%,
    100% {
        filter: saturate(1.15) brightness(1.05);
    }

    50% {
        filter: saturate(1.7) brightness(1.22);
    }
}

@keyframes spin-god {
    to {
        transform: rotate(360deg);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-6px);
    }

    75% {
        transform: translateX(6px);
    }
}

.shaking {
    animation: shake .35s var(--ease);
}

.click-particle {
    position: fixed;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10001;
    box-shadow: 0 0 8px currentColor;
    transition: transform .8s cubic-bezier(.25, .46, .45, .94), opacity .8s ease-out;
}

.click-floating-text {
    position: fixed;
    pointer-events: none;
    z-index: 10001;
    font-family: var(--font-num);
    font-weight: 700;
    color: var(--accent-core);
    text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 80%, transparent);
}

/* --------------------------------------------------------------------------
   6. Mejoras — encendido = puedes pagarla
   -------------------------------------------------------------------------- */

.upgrades-section {
    padding: var(--sp-5);
    background: linear-gradient(180deg, var(--lacquer-hi) 0%, var(--lacquer) 65%);
    border: 1px solid var(--seam);
    border-radius: var(--r-lg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 28px 56px -34px #000;
}

.upgrades-section h2 {
    text-align: center;
    margin-bottom: var(--sp-5);
    font-size: 1.15rem;
    letter-spacing: .14em;
    color: var(--accent-core);
    text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
}

.upgrades-tabs {
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
}

.upgrade-tab {
    padding: 9px 18px;
    border-radius: var(--r-md);
    border: 1px solid var(--seam-hi);
    background: transparent;
    color: var(--ash);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: color var(--t-med) var(--ease),
        border-color var(--t-med) var(--ease),
        background var(--t-med) var(--ease);
}

.upgrade-tab:hover {
    color: var(--chalk);
    border-color: var(--seam-hi);
    background: var(--glass);
}

.upgrade-tab.active {
    color: var(--accent-core);
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    box-shadow: 0 0 18px -6px color-mix(in srgb, var(--accent) 80%, transparent);
}

.upgrade-tab[data-target="recharged-upgrades"].active {
    --accent: var(--neon-cyan);
    --accent-core: #C4F6FF;
}

.upgrade-tab-content {
    display: none;
}

.upgrade-tab-content.active {
    display: block;
}

.upgrades-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
}

@media (max-width: 1200px) {
    .upgrades-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .upgrades-grid {
        grid-template-columns: 1fr;
    }
}

/* Comprable: el tubo está encendido */
.upgrade-card {
    position: relative;
    padding: var(--sp-4);
    border-radius: var(--r-md);
    background: linear-gradient(180deg, var(--lacquer-hi), var(--lacquer));
    border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 0 16px -10px color-mix(in srgb, var(--accent) 70%, transparent);
    overflow: hidden;
    transition: transform var(--t-med) var(--ease),
        border-color var(--t-med) var(--ease),
        box-shadow var(--t-med) var(--ease);
}

.upgrade-card:not(.purchased):not(.disabled):hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 70%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 0 26px -8px color-mix(in srgb, var(--accent) 85%, transparent),
        0 16px 30px -18px #000;
}

.upgrade-card:active:not(.disabled) {
    transform: translateY(-1px);
}

/* No puedes pagarla: cristal muerto, sin halo */
.upgrade-card.disabled {
    background: linear-gradient(180deg, #101017, #0B0B11);
    border-color: var(--seam);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
    opacity: .72;
}

.upgrade-card.disabled .upgrade-name,
.upgrade-card.disabled .upgrade-cost,
.upgrade-card.disabled .upgrade-production {
    color: var(--ash-dim);
    text-shadow: none;
}

.upgrade-card.disabled .upgrade-icon {
    filter: grayscale(1);
    opacity: .5;
}

.upgrade-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.upgrade-icon {
    font-size: 1.7em;
    line-height: 1;
}

.upgrade-count {
    padding: 3px 9px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
    color: var(--accent-core);
    font-family: var(--font-num);
    font-size: 11px;
    font-weight: 700;
}

.upgrade-name {
    margin-bottom: var(--sp-2);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--accent-core);
}

.upgrade-description {
    margin-bottom: var(--sp-3);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ash);
}

.upgrade-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--seam);
}

.upgrade-production {
    font-family: var(--font-num);
    font-size: 12px;
    color: var(--neon-lime);
}

/* El coste va con galón: siempre marca lo que te cuesta */
.upgrade-cost {
    padding: 4px 11px;
    border-radius: var(--r-sm);
    background: #05050A;
    border: 1px solid var(--seam);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8);
    font-family: var(--font-num);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-core);
}

/* En curso / en cola */
.upgrade-card.unlocking {
    border-color: color-mix(in srgb, var(--neon-gold) 65%, transparent);
    box-shadow: 0 0 22px -8px var(--neon-gold);
}

.upgrade-card.queued {
    border-color: color-mix(in srgb, var(--neon-cyan) 50%, transparent);
    animation: queuedBlink 1.6s var(--ease) infinite;
}

@keyframes queuedBlink {

    0%,
    100% {
        box-shadow: 0 0 10px -6px var(--neon-cyan);
    }

    50% {
        box-shadow: 0 0 24px -6px var(--neon-cyan);
    }
}

.status-badge {
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.status-badge.unlocking {
    color: var(--neon-gold);
    background: color-mix(in srgb, var(--neon-gold) 14%, transparent);
}

.status-badge.queued {
    color: var(--neon-cyan);
    background: color-mix(in srgb, var(--neon-cyan) 14%, transparent);
}

/* --------------------------------------------------------------------------
   7. Pestañas laterales
   -------------------------------------------------------------------------- */

.ranking-toggle,
.chat-toggle,
.betting-toggle {
    position: fixed;
    right: 0;
    z-index: 10010;
    padding: 18px 9px;
    border: 1px solid var(--seam-hi);
    border-right: none;
    border-radius: var(--r-md) 0 0 var(--r-md);
    background: linear-gradient(180deg, var(--lacquer-hi), var(--lacquer));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        -10px 0 30px -14px #000;
    transition: transform var(--t-med) var(--ease),
        box-shadow var(--t-med) var(--ease),
        border-color var(--t-med) var(--ease);
}

.ranking-toggle {
    top: 50%;
    transform: translateY(-50%);
    --accent: var(--neon-cyan);
    --accent-core: #C4F6FF;
}

.chat-toggle {
    top: 65%;
    transform: translateY(-50%);
    z-index: 10008;
    --accent: var(--neon-cyan);
    --accent-core: #C4F6FF;
}

.betting-toggle {
    top: 35%;
    transform: translateY(-50%);
    z-index: 10008;
    --accent: var(--neon-magenta);
    --accent-core: #FFB8DC;
}

.ranking-toggle:hover,
.chat-toggle:hover,
.betting-toggle:hover {
    transform: translateY(-50%) translateX(-4px);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        -14px 0 34px -14px #000,
        0 0 24px -8px color-mix(in srgb, var(--accent) 85%, transparent);
}

.toggle-icon {
    display: block;
    font-size: 1.15em;
    font-weight: 700;
    color: var(--accent-core);
    text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 80%, transparent);
    transition: transform var(--t-med) var(--ease);
}

.ranking-toggle.active .toggle-icon {
    transform: rotate(180deg);
}

.notification-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--neon-red);
    box-shadow: 0 0 8px var(--neon-red);
}

/* --------------------------------------------------------------------------
   8. El televisor del ranking
   Un CRT de la trastienda: caja de laca, cristal curvo, fósforo cian.
   -------------------------------------------------------------------------- */

#rankingPanel.ranking-panel {
    position: fixed;
    top: 0;
    right: -580px !important;
    width: 580px !important;
    height: 100vh;
    z-index: 10005;
    display: flex;
    flex-direction: row;
    padding: var(--sp-3);
    border-radius: var(--r-lg) 0 0 var(--r-lg);
    background: linear-gradient(180deg, #14141C 0%, #0B0B11 100%);
    border: 1px solid var(--seam);
    border-right: none;
    box-shadow: -30px 0 70px -30px #000;
    transition: right var(--t-slow) var(--ease);
    will-change: right;
    --accent: var(--neon-cyan);
    --accent-core: #C4F6FF;
}

#rankingPanel.ranking-panel.open {
    right: 0 !important;
}

.ranking-tv-screen {
    position: relative;
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--r-md);
    background: #030506;
    border: 6px solid #08080C;
    box-shadow:
        inset 0 0 60px rgba(0, 0, 0, 1),
        inset 0 0 100px -40px color-mix(in srgb, var(--neon-cyan) 40%, transparent);
}

/* Líneas de barrido */
.ranking-tv-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background: repeating-linear-gradient(to bottom,
            rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
}

/* Curvatura del cristal: viñeta y reflejo alto */
.ranking-tv-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    background:
        radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .75) 100%),
        linear-gradient(150deg, rgba(255, 255, 255, .05) 0%, transparent 38%);
}

@keyframes rankingCrtFlicker {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .97;
    }
}

@keyframes rankingCrtScanline {
    to {
        transform: translateY(100%);
    }
}

@keyframes mainCrtSweep {
    to {
        transform: translateY(100%);
    }
}

/* Los mandos de la caja */
.ranking-tv-knobs {
    width: 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-5);
    padding-top: 90px;
    margin-right: var(--sp-2);
}

.knob {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #2A2A36, #0B0B11);
    border: 1px solid #05050A;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12),
        0 2px 5px rgba(0, 0, 0, .7);
}

.knob::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    width: 2px;
    height: 7px;
    border-radius: 1px;
    background: var(--ash-dim);
    transform: translateX(-50%);
}

.power-indicator {
    width: 8px;
    height: 8px;
    margin-top: auto;
    margin-bottom: var(--sp-6);
    border-radius: 50%;
    background: var(--neon-lime);
    box-shadow: 0 0 6px var(--neon-lime), 0 0 14px color-mix(in srgb, var(--neon-lime) 50%, transparent);
    animation: powerPulse 2.6s var(--ease) infinite alternate;
}

@keyframes powerPulse {
    from {
        opacity: .45;
    }

    to {
        opacity: 1;
    }
}

.ranking-header {
    position: sticky;
    top: 0;
    z-index: 5;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-4);
    background: linear-gradient(180deg,
        rgba(5, 7, 10, .95),
        rgba(3, 5, 6, .4),
        transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
}

.ranking-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent-core);
    text-shadow:
        0 0 8px color-mix(in srgb, var(--accent) 90%, transparent),
        0 0 24px color-mix(in srgb, var(--accent) 60%, transparent);
}

.ranking-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ash);
}

.ranking-indicator-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--neon-lime);
    box-shadow: 0 0 7px var(--neon-lime);
    animation: rankingDotPulse 2s var(--ease) infinite;
}

@keyframes rankingDotPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}

.close-ranking,
.close-betting,
#closeChat {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    background: transparent;
    color: var(--accent-core);
    font-size: 1.1em;
    line-height: 1;
    transition: background var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}

.close-ranking:hover,
.close-betting:hover,
#closeChat:hover {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    transform: rotate(90deg);
}

.ranking-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-2) var(--sp-4) var(--sp-5);
    scrollbar-width: thin;
    scrollbar-color: var(--seam-hi) transparent;
}

.ranking-content::-webkit-scrollbar {
    width: 6px;
    display: block;
}

.ranking-content::-webkit-scrollbar-thumb {
    background: var(--seam-hi);
    border-radius: var(--r-pill);
}

.ranking-loading {
    padding: var(--sp-7) var(--sp-4);
    text-align: center;
    color: var(--ash-dim);
    font-family: var(--font-num);
    font-size: 13px;
}

.ranking-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ranking-separator {
    display: block;
    margin: var(--sp-5) 0 var(--sp-4);
    padding: 10px 14px;
    border-left: 3px solid var(--neon-cyan);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--neon-cyan) 12%, transparent),
        transparent);
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--neon-cyan);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    box-shadow: 0 2px 8px -3px color-mix(in srgb, var(--neon-cyan) 30%, transparent);
}

.ranking-sep-normal {
    border-left-color: var(--neon-orange);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--neon-orange) 14%, transparent),
        transparent);
    color: var(--neon-orange);
    box-shadow: 0 2px 8px -3px color-mix(in srgb, var(--neon-orange) 40%, transparent);
}

.ranking-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 14px 16px;
    margin-bottom: 11px;
    border-radius: var(--r-md);
    background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 4px 12px -4px rgba(0, 0, 0, .4);
    transition: all var(--t-med) var(--ease);
    position: relative;
    overflow: hidden;
}

.ranking-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--r-md);
    background: radial-gradient(ellipse 100% 50% at right, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
    pointer-events: none;
}

.ranking-item:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, rgba(255, 255, 255, .08)), color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, .03)));
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 8px 24px -6px color-mix(in srgb, var(--accent) 65%, transparent),
        0 4px 12px -4px rgba(0, 0, 0, .5);
    transform: translateY(-2px);
}

.ranking-item.online {
    border-left: 3px solid var(--neon-lime);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        inset -8px 0 12px -8px color-mix(in srgb, var(--neon-lime) 8%, transparent),
        0 4px 12px -4px rgba(0, 0, 0, .4);
}

.ranking-item.online::after {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neon-lime);
    box-shadow: 0 0 8px var(--neon-lime);
}

.ranking-item.russian-active {
    border-color: color-mix(in srgb, var(--neon-red) 60%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--neon-red) 12%, rgba(255, 255, 255, .04)), color-mix(in srgb, var(--neon-red) 6%, rgba(255, 255, 255, .01)));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        inset -8px 0 12px -8px color-mix(in srgb, var(--neon-red) 10%, transparent),
        0 4px 12px -4px rgba(0, 0, 0, .4);
}

.ranking-item.betting {
    border-color: color-mix(in srgb, var(--neon-magenta) 55%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        inset -8px 0 12px -8px color-mix(in srgb, var(--neon-magenta) 8%, transparent),
        0 4px 12px -4px rgba(0, 0, 0, .4);
}

.ranking-item.glow {
    animation: glowOrange 1.6s var(--ease) 2;
}

@keyframes glowOrange {

    0%,
    100% {
        box-shadow: 0 0 0 0 transparent;
    }

    50% {
        box-shadow: 0 0 22px -4px var(--neon-orange);
    }
}

.ranking-item.blinking-red {
    animation: blinkRed 1s var(--ease) infinite;
}

@keyframes blinkRed {

    0%,
    100% {
        border-color: color-mix(in srgb, var(--neon-red) 70%, transparent);
    }

    50% {
        border-color: transparent;
    }
}

@keyframes blinkBorderRed {

    0%,
    100% {
        border-color: color-mix(in srgb, var(--neon-red) 70%, transparent);
    }

    50% {
        border-color: transparent;
    }
}

.ranking-position {
    position: relative;
    flex: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-num);
    font-size: 14px;
    font-weight: 700;
    color: var(--ash-dim);
    text-align: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--seam-hi);
    z-index: 1;
}

/* El podio se enciende con estilos mejorados */
.ranking-item:nth-child(1) .ranking-position {
    color: #FFEB3B;
    text-shadow: 0 0 12px rgba(255, 235, 59, .9);
    background: radial-gradient(135% 135% at 50% 0%, rgba(255, 235, 59, .2), rgba(255, 215, 94, .08));
    border-color: rgba(255, 235, 59, .5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .15),
        0 0 16px rgba(255, 235, 59, .4);
}

.ranking-item:nth-child(2) .ranking-position {
    color: #E8ECFF;
    text-shadow: 0 0 12px rgba(232, 236, 255, .8);
    background: radial-gradient(135% 135% at 50% 0%, rgba(232, 236, 255, .18), rgba(214, 222, 232, .08));
    border-color: rgba(232, 236, 255, .4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12),
        0 0 14px rgba(214, 222, 232, .3);
}

.ranking-item:nth-child(3) .ranking-position {
    color: #FFBF7F;
    text-shadow: 0 0 12px rgba(255, 191, 127, .8);
    background: radial-gradient(135% 135% at 50% 0%, rgba(255, 191, 127, .16), rgba(224, 138, 75, .08));
    border-color: rgba(255, 191, 127, .4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        0 0 12px rgba(224, 138, 75, .3);
}

.ranking-pfp {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
    box-shadow:
        0 0 12px -2px color-mix(in srgb, var(--accent) 30%, transparent),
        inset 0 1px 2px rgba(255, 255, 255, .1);
    transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}

.ranking-item:hover .ranking-pfp {
    transform: scale(1.08);
    box-shadow:
        0 0 16px -1px color-mix(in srgb, var(--accent) 50%, transparent),
        inset 0 1px 2px rgba(255, 255, 255, .15);
}

.ranking-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    z-index: 1;
}

.ranking-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--chalk);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: .3px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    position: relative;
    z-index: 1;
}

.ranking-item:nth-child(1) .ranking-name {
    color: #FFEB3B;
}

.ranking-item:nth-child(2) .ranking-name {
    color: #E8ECFF;
}

.ranking-item:nth-child(3) .ranking-name {
    color: #FFBF7F;
}

.ranking-item.current-player .ranking-name {
    color: var(--neon-orange);
    text-shadow:
        0 1px 3px rgba(0, 0, 0, .4),
        0 0 12px color-mix(in srgb, var(--neon-orange) 70%, transparent);
    font-weight: 800;
}

.ranking-stats {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.ranking-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    position: relative;
    z-index: 1;
}

.ranking-stat-label {
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--accent) 60%, var(--ash-dim));
}

.ranking-stat-value {
    font-family: var(--font-num);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-core);
    text-shadow: 0 0 4px color-mix(in srgb, var(--accent) 40%, transparent);
}

.ranking-right {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    position: relative;
    z-index: 1;
    margin-left: auto;
}

.ranking-russian {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ranking-russian-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--neon-red);
}

.ranking-watch-btn {
    padding: 6px 12px;
    border-radius: var(--r-pill);
    border: 1px solid color-mix(in srgb, var(--neon-red) 60%, transparent);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--neon-red) 18%, transparent),
        color-mix(in srgb, var(--neon-red) 10%, transparent));
    color: #FFAFB7;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 2px 6px -2px color-mix(in srgb, var(--neon-red) 40%, transparent);
    transition: all var(--t-med) var(--ease);
}

.ranking-watch-btn:hover {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--neon-red) 28%, transparent),
        color-mix(in srgb, var(--neon-red) 18%, transparent));
    border-color: color-mix(in srgb, var(--neon-red) 80%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        0 4px 12px -2px color-mix(in srgb, var(--neon-red) 60%, transparent);
    transform: translateY(-1px);
}

/* Tu posición, anclada abajo */
.ranking-footer-separator {
    position: relative;
    height: 14px;
    margin: var(--sp-5) 0 var(--sp-3);
    border: none;
    border-top: 1px solid;
    border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--neon-orange) 40%, transparent), transparent) 1;
    text-align: center;
}

.ranking-footer-separator::after {
    content: 'TU POSICIÓN';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 16px;
    background: linear-gradient(180deg, #030506, #050508);
    font-family: var(--font-ui);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--neon-orange);
    border: 1px solid color-mix(in srgb, var(--neon-orange) 30%, transparent);
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

.ranking-item.personal-footer {
    position: sticky;
    bottom: 0;
    z-index: 6;
    margin-top: var(--sp-2);
    margin-bottom: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--neon-orange) 12%, #0B0D11), #0B0D11);
    border-color: color-mix(in srgb, var(--neon-orange) 35%, var(--seam-hi));
    border-width: 2px;
    box-shadow:
        0 -16px 32px -14px rgba(0, 0, 0, .8),
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 0 20px -8px color-mix(in srgb, var(--neon-orange) 35%, transparent);
}

.ranking-item.personal-footer:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--neon-orange) 18%, #0B0D11), #0B0D11);
    border-color: color-mix(in srgb, var(--neon-orange) 50%, var(--seam-hi));
}

.ranking-jump-icon {
    margin-left: auto;
    padding: 4px;
    font-size: 1.05em;
    transition: transform var(--t-fast) var(--ease);
}

.ranking-jump-icon:hover {
    transform: translateY(-2px) scale(1.15);
}

@media (max-width: 768px) {

    #rankingPanel.ranking-panel {
        width: 100% !important;
        right: -100% !important;
        border-radius: 0;
        padding: var(--sp-2);
    }

    .ranking-tv-knobs {
        display: none;
    }

    .ranking-stats {
        gap: var(--sp-2);
    }

    .ranking-toggle {
        padding: 15px 8px;
    }

    /* Con el ranking abierto se oculta el fondo: en móvil parpadeaba */
    body.ranking-open #views-container {
        display: none !important;
    }

    body.ranking-open #bottom-nav {
        opacity: .3;
        pointer-events: none;
    }
}

/* --------------------------------------------------------------------------
   9. Chat
   -------------------------------------------------------------------------- */

.chat-panel {
    position: fixed;
    top: 0;
    right: -350px;
    width: 320px;
    height: 100%;
    z-index: 10006;
    display: flex;
    flex-direction: column;
    background: rgba(11, 11, 17, .96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-left: 1px solid var(--seam);
    box-shadow: -20px 0 50px -25px #000;
    transition: right var(--t-med) var(--ease);
    --accent: var(--neon-cyan);
    --accent-core: #C4F6FF;
}

.chat-panel.open {
    right: 0;
}

#view-chat .chat-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
    border-radius: var(--r-md);
    background: linear-gradient(180deg, var(--lacquer-hi), var(--lacquer));
    border: 1px solid var(--seam);
    color: var(--accent-core);
}

#view-chat .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

#view-chat .chat-msg {
    padding: 9px 12px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--seam);
}

#view-chat .chat-msg.admin {
    background: color-mix(in srgb, var(--neon-orange) 10%, transparent);
    border-color: color-mix(in srgb, var(--neon-orange) 35%, transparent);
}

#view-chat .chat-sender {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-core);
}

#view-chat .chat-sender.admin {
    color: var(--neon-orange);
}

#view-chat .chat-sender.self {
    color: var(--neon-lime);
}

#view-chat .chat-text {
    font-size: 13.5px;
    color: var(--chalk);
    word-wrap: break-word;
}

#view-chat .chat-input-area {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-top: 1px solid var(--seam);
}

#view-chat #chatInput {
    flex: 1;
    padding: 10px 13px;
    border-radius: var(--r-md);
    background: #05050A;
    border: 1px solid var(--seam);
    color: var(--chalk);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7);
}

#view-chat #chatInput:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}

#view-chat #chatSend {
    padding: 10px 18px;
    border-radius: var(--r-md);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 18%, var(--lacquer));
    color: var(--accent-core);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: background var(--t-med) var(--ease);
}

#view-chat #chatSend:hover {
    background: color-mix(in srgb, var(--accent) 30%, var(--lacquer));
}

/* --------------------------------------------------------------------------
   10. Sala de apuestas — ruleta
   -------------------------------------------------------------------------- */

.betting-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    z-index: 10004;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: linear-gradient(180deg, #16101A 0%, #0A0810 100%);
    border-left: 1px solid color-mix(in srgb, var(--neon-magenta) 30%, var(--seam));
    box-shadow: -24px 0 60px -30px #000;
    transition: right var(--t-med) var(--ease);
    --accent: var(--neon-magenta);
    --accent-core: #FFB8DC;
}

.betting-panel.open {
    right: 0;
}

.betting-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: linear-gradient(180deg, #1A1020, rgba(10, 8, 16, .9));
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, var(--seam));
    backdrop-filter: blur(8px);
}

.betting-header h2 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: .16em;
    color: var(--accent-core);
    text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 60%, transparent);
}

.betting-money {
    font-family: var(--font-num);
    font-size: 13px;
    font-weight: 700;
    color: var(--neon-gold);
}

.betting-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    padding: var(--sp-4);
}

/* Escenario: aloja la flecha, que debe quedar fuera del recorte circular */
.roulette-stage {
    position: relative;
    width: 280px;
    margin: 0 auto;
    padding-top: 18px;
}

/* La flecha marca las 12 en punto: ahí cae el número premiado */
.roulette-pointer {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    z-index: 5;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 20px solid var(--accent-core);
    filter:
        drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 90%, transparent)) drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 55%, transparent));
    transition: transform var(--t-fast) var(--ease);
}

/* Golpe seco de la flecha en cada número que pasa */
.roulette-pointer.is-ticking {
    transform: translateX(-50%) translateY(2px) scaleY(.88);
}

.roulette-container {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: #000;
    border: 8px solid #14141C;
    box-shadow:
        inset 0 0 40px rgba(0, 0, 0, .95),
        0 0 40px -14px color-mix(in srgb, var(--accent) 70%, transparent),
        0 20px 40px -20px #000;
}

.roulette-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(#0E8A3E 0deg 9.73deg,
            #C6142B 9.73deg 19.46deg, #0B0B11 19.46deg 29.19deg,
            #C6142B 29.19deg 38.92deg, #0B0B11 38.92deg 48.65deg,
            #C6142B 48.65deg 58.38deg, #0B0B11 58.38deg 68.11deg,
            #C6142B 68.11deg 77.84deg, #0B0B11 77.84deg 87.57deg,
            #C6142B 87.57deg 97.30deg, #0B0B11 97.30deg 107.03deg,
            #C6142B 107.03deg 116.76deg, #0B0B11 116.76deg 126.49deg,
            #C6142B 126.49deg 136.22deg, #0B0B11 136.22deg 145.95deg,
            #C6142B 145.95deg 155.68deg, #0B0B11 155.68deg 165.41deg,
            #C6142B 165.41deg 175.14deg, #0B0B11 175.14deg 184.86deg,
            #C6142B 184.86deg 194.59deg, #0B0B11 194.59deg 204.32deg,
            #C6142B 204.32deg 214.05deg, #0B0B11 214.05deg 223.78deg,
            #C6142B 223.78deg 233.51deg, #0B0B11 233.51deg 243.24deg,
            #C6142B 243.24deg 252.97deg, #0B0B11 252.97deg 262.70deg,
            #C6142B 262.70deg 272.43deg, #0B0B11 272.43deg 282.16deg,
            #C6142B 282.16deg 291.89deg, #0B0B11 291.89deg 301.62deg,
            #C6142B 301.62deg 311.35deg, #0B0B11 311.35deg 321.08deg,
            #C6142B 321.08deg 330.81deg, #0B0B11 330.81deg 340.54deg,
            #C6142B 340.54deg 350.27deg, #0B0B11 350.27deg 360deg);
    transition: transform 4s cubic-bezier(.15, .85, .2, 1);
}

/* Visor central: no gira, enseña el número que ha salido */
.roulette-hub {
    position: absolute;
    inset: 31%;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #22222E, #06060A 72%);
    border: 1px solid #05050A;
    box-shadow:
        inset 0 2px 6px rgba(255, 255, 255, .1),
        inset 0 -6px 14px rgba(0, 0, 0, .8),
        0 8px 20px rgba(0, 0, 0, .85);
}

.roulette-hub-label {
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ash-dim);
}

.roulette-hub-number {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: var(--ash-dim);
    transition: color var(--t-med) var(--ease), text-shadow var(--t-med) var(--ease);
}

/* Al parar, el número se enciende con el color de su casilla */
.roulette-hub-number.is-red {
    color: #FF8894;
    text-shadow: 0 0 6px #C6142B, 0 0 20px rgba(198, 20, 43, .7);
}

.roulette-hub-number.is-black {
    color: var(--chalk);
    text-shadow: 0 0 6px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .25);
}

.roulette-hub-number.is-green {
    color: #7CFFB0;
    text-shadow: 0 0 6px var(--neon-lime), 0 0 20px color-mix(in srgb, var(--neon-lime) 60%, transparent);
}

.roulette-hub.is-settling {
    animation: hub-land .45s var(--ease-snap);
}

@keyframes hub-land {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.14);
    }

    100% {
        transform: scale(1);
    }
}

.roulette-ball {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, #fff, #B8BCC8);
    box-shadow: 0 0 10px rgba(255, 255, 255, .85);
    z-index: 3;
}

.roulette-result {
    margin-top: var(--sp-3);
    text-align: center;
    font-family: var(--font-num);
    font-size: 1.1rem;
    font-weight: 700;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}

.roulette-result.show {
    opacity: 1;
    transform: none;
}

.roulette-result.show {
    opacity: 1;
}

.betting-controls {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.bet-input-group {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.bet-input-group label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ash);
}

.bet-input-group input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: #05050A;
    border: 1px solid var(--seam);
    color: var(--chalk);
    font-family: var(--font-num);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7);
}

.bet-input-group input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7),
        0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

#betUnit {
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--glass);
    border: 1px solid var(--seam-hi);
    color: var(--chalk);
    font-family: var(--font-num);
    font-size: 13px;
}

#betUnit:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

#betUnit option {
    background: var(--lacquer);
    color: var(--chalk);
}

#btnMaxBet {
    padding: 10px 14px;
    border-radius: var(--r-md);
    border: 1px solid color-mix(in srgb, var(--neon-gold) 45%, transparent);
    background: color-mix(in srgb, var(--neon-gold) 15%, var(--lacquer));
    color: var(--neon-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: background var(--t-med) var(--ease);
}

#btnMaxBet:hover {
    background: color-mix(in srgb, var(--neon-gold) 28%, var(--lacquer));
}

.bet-board {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.bet-colors,
.bet-parity {
    display: flex;
    gap: var(--sp-2);
}

.bet-btn {
    flex: 1;
    padding: 11px 10px;
    border-radius: var(--r-md);
    border: 1px solid var(--seam-hi);
    background: var(--glass);
    color: var(--ash);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: border-color var(--t-med) var(--ease),
        color var(--t-med) var(--ease),
        box-shadow var(--t-med) var(--ease);
}

.bet-btn:hover {
    color: var(--chalk);
    border-color: var(--ash-dim);
}

.bet-btn.selected {
    border-color: color-mix(in srgb, var(--accent) 70%, transparent);
    color: var(--accent-core);
    box-shadow: 0 0 20px -6px color-mix(in srgb, var(--accent) 90%, transparent);
}

.bet-btn.red {
    color: #FF7A86;
    border-color: color-mix(in srgb, #C6142B 55%, transparent);
}

.bet-btn.black {
    color: var(--chalk);
    border-color: var(--seam-hi);
}

.bet-btn[data-type="parity"] {
    letter-spacing: .12em;
}

/* Disposición de mesa real: el 0 como barra y 1-36 en tres filas de doce */
.bet-numbers-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 3px;
}

.bet-numbers-grid .bet-number:first-child {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    min-height: 20px;
}

.bet-number {
    aspect-ratio: 1;
    min-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid transparent;
    font-family: var(--font-num);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    color: var(--chalk);
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease);
}

.bet-number.red {
    background: #7A0E1B;
}

.bet-number.black {
    background: #16161F;
}

.bet-number.green {
    background: #0A5127;
}

.bet-number:hover {
    transform: translateY(-2px);
}

.bet-number.selected {
    border-color: var(--accent-core);
    box-shadow: 0 0 16px -3px color-mix(in srgb, var(--accent) 90%, transparent);
}

.spin-button {
    padding: 15px;
    border-radius: var(--r-md);
    border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--accent) 28%, var(--lacquer-hi)),
            color-mix(in srgb, var(--accent) 10%, var(--lacquer)));
    color: var(--accent-core);
    font-family: var(--font-sign);
    font-size: 15px;
    letter-spacing: .18em;
    text-transform: uppercase;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12),
        0 0 28px -10px color-mix(in srgb, var(--accent) 90%, transparent);
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease);
}

.spin-button:hover:not(:disabled) {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 0 40px -8px color-mix(in srgb, var(--accent) 95%, transparent);
}

.spin-button:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: inset 0 4px 12px rgba(0, 0, 0, .7);
}

.spin-button:disabled {
    background: var(--glass);
    border-color: var(--seam);
    color: var(--ash-dim);
    box-shadow: none;
}

.betting-history {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.betting-history h3 {
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--ash);
}

#bettingHistoryList {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 190px;
    overflow-y: auto;
}

.history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: 7px 10px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .03);
    border-left: 2px solid var(--seam-hi);
    font-size: 12px;
}

.history-item.win {
    border-left-color: var(--neon-lime);
}

.history-item.loss {
    border-left-color: var(--neon-red);
}

.history-result {
    font-family: var(--font-num);
    font-weight: 700;
}

.history-player {
    color: var(--ash);
}

.history-amount {
    font-family: var(--font-num);
    color: var(--ash);
}

.history-profit {
    font-family: var(--font-num);
    font-weight: 700;
    color: var(--neon-lime);
}

.history-loss {
    font-family: var(--font-num);
    font-weight: 700;
    color: var(--neon-red);
}

@media (max-width: 768px) {

    .betting-panel,
    .chat-panel {
        width: 100%;
        right: -100%;
    }

    .roulette-stage,
    .roulette-container {
        width: 240px;
    }

    .roulette-container {
        height: 240px;
    }

    /* La pestaña del ranking flota sobre el borde derecho: se le deja hueco */
    #view-roulette {
        padding-right: 34px;
    }

    .bet-numbers-grid {
        gap: 2px;
    }

    .bet-number {
        font-size: 9.5px;
        min-height: 20px;
    }
}

/* --------------------------------------------------------------------------
   11. Vistas y navegación
   -------------------------------------------------------------------------- */

#views-container {
    position: relative;
    z-index: 100;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    padding-bottom: 64px;
}

.view {
    display: none;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: var(--sp-5) var(--sp-4) 90px;
    animation: fadeIn var(--t-med) var(--ease);
    scrollbar-width: thin;
    scrollbar-color: var(--seam-hi) transparent;
}

.view::-webkit-scrollbar {
    width: 8px;
    display: block;
}

.view::-webkit-scrollbar-thumb {
    background: var(--seam-hi);
    border-radius: var(--r-pill);
}

.view.active {
    display: block;
}

@media (min-width: 768px) {

    #view-roulette,
    #view-chat,
    #view-options {
        padding-left: var(--sp-6);
        padding-right: var(--sp-6);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

#view-home .container {
    padding-top: var(--sp-2);
}

#view-roulette,
#view-chat {
    display: none;
}

#view-roulette.active,
#view-chat.active {
    display: block;
}

/* Barra inferior */
#bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    z-index: 10020;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background: linear-gradient(180deg, #12121A, #0A0A10);
    border-top: 1px solid var(--seam);
    box-shadow: 0 -18px 40px -22px #000;
}

/* El tubo que marca la vista activa */
#bottom-nav::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent,
            color-mix(in srgb, var(--accent) 55%, transparent), transparent);
}

.nav-btn {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    color: var(--ash-dim);
    transition: color var(--t-med) var(--ease);
}

.nav-btn:hover {
    color: var(--ash);
}

.nav-btn.active {
    color: var(--accent-core);
}

/* Piloto sobre la pestaña activa */
.nav-btn.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 2px;
    border-radius: var(--r-pill);
    background: var(--accent-core);
    box-shadow:
        0 0 6px color-mix(in srgb, var(--accent) 90%, transparent),
        0 0 18px color-mix(in srgb, var(--accent) 60%, transparent);
}

.nav-icon {
    width: 22px;
    height: 22px;
    transition: transform var(--t-med) var(--ease);
}

.nav-btn.active .nav-icon {
    transform: translateY(-1px) scale(1.08);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent));
}

.nav-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   12. Opciones y cuenta
   -------------------------------------------------------------------------- */

#view-options,
.account-container {
    position: relative;
    z-index: 101;
    width: min(680px, 100%);
    margin-inline: auto;
}

#view-options h2,
.account-container h2 {
    margin-bottom: var(--sp-5);
    text-align: center;
    font-size: 1.4rem;
    letter-spacing: .12em;
    color: var(--accent-core);
    text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 50%, transparent);
}

.account-container {
    padding: var(--sp-6);
    background: linear-gradient(180deg, var(--lacquer-hi) 0%, var(--lacquer) 65%);
    border: 1px solid var(--seam);
    border-radius: var(--r-lg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 28px 56px -34px #000;
}

.option-group,
.account-section {
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--seam);
}

.option-group h3,
.account-section h3 {
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--seam);
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--ash);
}

.input-group {
    display: flex;
    gap: var(--sp-2);
}

.input-group input {
    flex: 1;
    min-width: 0;
    padding: 10px 13px;
    border-radius: var(--r-md);
    background: #05050A;
    border: 1px solid var(--seam);
    color: var(--chalk);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7);
}

.input-group input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}

.input-group button,
.account-btn {
    padding: 10px 18px;
    border-radius: var(--r-md);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--accent) 22%, var(--lacquer-hi)),
            color-mix(in srgb, var(--accent) 8%, var(--lacquer)));
    color: var(--accent-core);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease);
}

.input-group button:hover,
.account-btn:hover {
    box-shadow: 0 0 24px -8px color-mix(in srgb, var(--accent) 90%, transparent);
}

.input-group button:active,
.account-btn:active {
    transform: translateY(1px);
}

/* Zona de riesgo: galón */
.danger-zone,
.account-section.danger-zone {
    border: 1px solid color-mix(in srgb, var(--neon-red) 38%, transparent);
    background: color-mix(in srgb, var(--neon-red) 6%, transparent);
    text-align: center;
}

.danger-zone h3,
.account-section.danger-zone h3 {
    color: var(--neon-red);
    border-bottom-color: color-mix(in srgb, var(--neon-red) 30%, transparent);
}

.btn-danger,
.btn-danger-dark,
.account-btn.delete,
.account-btn.logout {
    --accent: var(--neon-red);
    --accent-core: #FFC9CE;
    width: 100%;
    margin-top: var(--sp-2);
    padding: 12px;
    border-radius: var(--r-md);
    border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
    background: color-mix(in srgb, var(--accent) 16%, var(--lacquer));
    color: var(--accent-core);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.btn-danger:hover,
.btn-danger-dark:hover,
.account-btn.delete:hover,
.account-btn.logout:hover {
    background: color-mix(in srgb, var(--accent) 28%, var(--lacquer));
    box-shadow: 0 0 26px -8px var(--accent);
}

.btn-danger-dark {
    background: transparent;
}

.warning-text {
    margin-top: var(--sp-2);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--ash);
}

/* Foto de perfil */
.pfp-preview-container {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto var(--sp-4);
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    box-shadow: 0 0 28px -10px color-mix(in srgb, var(--accent) 85%, transparent);
}

.pfp-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pfp-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6em;
    color: var(--accent-core);
    background: color-mix(in srgb, var(--accent) 10%, var(--lacquer));
}

.file-upload-wrapper {
    text-align: center;
}

input[type="file"] {
    display: none;
}

.custom-file-upload {
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--r-md);
    border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
    color: var(--accent-core);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: background var(--t-med) var(--ease);
}

.custom-file-upload:hover {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

@media (max-width: 768px) {

    .account-container {
        padding: var(--sp-4);
    }

    .input-group {
        flex-direction: column;
    }

    .pfp-preview-container {
        width: 110px;
        height: 110px;
    }
}

/* --------------------------------------------------------------------------
   13. Avisos emergentes
   -------------------------------------------------------------------------- */

#popup-container {
    position: fixed;
    top: var(--sp-4);
    right: var(--sp-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-width: min(360px, calc(100vw - 32px));
}

.game-popup {
    position: relative;
    padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    background: linear-gradient(180deg, var(--lacquer-hi), var(--lacquer));
    border: 1px solid var(--seam-hi);
    box-shadow: 0 20px 44px -22px #000;
    overflow: hidden;
    animation: popupSlideIn var(--t-med) var(--ease-snap);
}

/* La regla de color de la izquierda dice de qué se trata */
.game-popup::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: var(--ash-dim);
}

.game-popup.success::before {
    background: var(--neon-lime);
    box-shadow: 0 0 14px var(--neon-lime);
}

.game-popup.success {
    border-color: color-mix(in srgb, var(--neon-lime) 30%, transparent);
}

.game-popup.error::before {
    background: var(--neon-red);
    box-shadow: 0 0 14px var(--neon-red);
}

.game-popup.error {
    border-color: color-mix(in srgb, var(--neon-red) 30%, transparent);
}

.game-popup.info::before {
    background: var(--neon-cyan);
    box-shadow: 0 0 14px var(--neon-cyan);
}

.game-popup.info {
    border-color: color-mix(in srgb, var(--neon-cyan) 30%, transparent);
}

.game-popup.legendary {
    border-color: color-mix(in srgb, var(--neon-gold) 50%, transparent);
    box-shadow: 0 20px 44px -22px #000, 0 0 40px -14px var(--neon-gold);
}

.game-popup.legendary::before {
    background: var(--neon-gold);
    box-shadow: 0 0 18px var(--neon-gold);
}

.game-popup.legendary .popup-title {
    color: var(--neon-gold);
    text-shadow: 0 0 14px color-mix(in srgb, var(--neon-gold) 60%, transparent);
}

@keyframes gradientBorder {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .6;
    }
}

.popup-title {
    margin-bottom: 3px;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--chalk);
}

.popup-message {
    font-size: 13px;
    line-height: 1.45;
    color: var(--ash);
}

.popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ash-dim);
    font-size: 14px;
    line-height: 1;
    transition: color var(--t-med) var(--ease), background var(--t-med) var(--ease);
}

.popup-close:hover {
    background: rgba(255, 255, 255, .07);
    color: var(--chalk);
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes popupFadeOut {
    to {
        opacity: 0;
        transform: translateX(24px);
    }
}

.notification-popup {
    position: fixed;
    left: 50%;
    bottom: 90px;
    transform: translate(-50%, 20px);
    z-index: var(--z-toast);
    padding: 11px 20px;
    border-radius: var(--r-pill);
    background: var(--lacquer-hi);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    box-shadow: 0 0 28px -10px color-mix(in srgb, var(--accent) 85%, transparent);
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}

.notification-popup.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   14. Recompensa diaria
   -------------------------------------------------------------------------- */

.daily-reward-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    background: rgba(3, 3, 6, .85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: rewardFadeIn var(--t-med) var(--ease);
}

@keyframes rewardFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.daily-reward-modal {
    position: relative;
    width: min(560px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    padding: var(--sp-6);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, var(--lacquer-hi) 0%, var(--lacquer) 70%);
    border: 1px solid color-mix(in srgb, var(--neon-gold) 32%, var(--seam));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 40px 80px -30px #000,
        0 0 70px -30px var(--neon-gold);
    animation: rewardPremiumEntrance var(--t-med) var(--ease-snap);
}

@keyframes rewardPremiumEntrance {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.daily-reward-modal::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(100% 60% at 50% -10%,
            color-mix(in srgb, var(--neon-gold) 12%, transparent), transparent 65%);
}

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

.daily-reward-modal h2 {
    position: relative;
    margin-bottom: var(--sp-5);
    text-align: center;
    font-size: 1.25rem;
    letter-spacing: .12em;
    color: var(--neon-gold);
    text-shadow: 0 0 18px color-mix(in srgb, var(--neon-gold) 55%, transparent);
}

.reward-items-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}

.reward-ui-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 11px 14px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--seam);
    animation: rewardItemPremiumSlide var(--t-med) var(--ease) backwards;
}

.reward-ui-item:nth-child(1) {
    animation-delay: .05s;
}

.reward-ui-item:nth-child(2) {
    animation-delay: .12s;
}

.reward-ui-item:nth-child(3) {
    animation-delay: .19s;
}

.reward-ui-item:hover {
    border-color: var(--seam-hi);
}

@keyframes rewardItemPremiumSlide {
    from {
        opacity: 0;
        transform: translateX(-14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.reward-ui-icon {
    font-size: 1.5em;
    line-height: 1;
}

@keyframes rewardIconFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

.reward-ui-info {
    flex: 1;
    min-width: 0;
}

.reward-ui-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ash-dim);
}

.reward-ui-value {
    font-family: var(--font-num);
    font-size: 15px;
    font-weight: 700;
    color: var(--chalk);
}

.reward-ui-value.prod {
    color: var(--neon-orange);
}

.reward-ui-value.xp {
    color: var(--neon-cyan);
}

.reward-ui-value.cp {
    color: var(--neon-magenta);
}

.claim-reward-btn,
.premium-button {
    display: block;
    width: 100%;
    padding: 15px;
    border-radius: var(--r-md);
    border: 1px solid color-mix(in srgb, var(--neon-gold) 55%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--neon-gold) 26%, var(--lacquer-hi)),
            color-mix(in srgb, var(--neon-gold) 10%, var(--lacquer)));
    color: var(--neon-gold);
    font-family: var(--font-sign);
    font-size: 14px;
    letter-spacing: .16em;
    text-transform: uppercase;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12),
        0 0 30px -10px var(--neon-gold);
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease);
}

.claim-reward-btn:hover,
.premium-button:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 0 44px -8px var(--neon-gold);
}

.claim-reward-btn:active,
.premium-button:active {
    transform: translateY(2px);
}

.reward-calendar-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}

.calendar-day-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 13px 8px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--seam);
    animation: calendarDayEntrance var(--t-med) var(--ease) backwards;
}

@keyframes calendarDayEntrance {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.calendar-day-box:nth-child(1) {
    animation-delay: .04s;
}

.calendar-day-box:nth-child(2) {
    animation-delay: .08s;
}

.calendar-day-box:nth-child(3) {
    animation-delay: .12s;
}

.calendar-day-box:nth-child(4) {
    animation-delay: .16s;
}

.calendar-day-box:nth-child(5) {
    animation-delay: .2s;
}

.calendar-day-box:nth-child(6) {
    animation-delay: .24s;
}

.calendar-day-box:nth-child(7) {
    grid-column: span 2;
    animation-delay: .3s;
    background: color-mix(in srgb, var(--neon-gold) 8%, transparent);
    border-color: color-mix(in srgb, var(--neon-gold) 30%, transparent);
}

.calendar-day-box.claimed {
    opacity: .55;
    background: color-mix(in srgb, var(--neon-lime) 6%, transparent);
    border-color: color-mix(in srgb, var(--neon-lime) 22%, transparent);
}

.calendar-day-box.current {
    background: color-mix(in srgb, var(--neon-gold) 14%, transparent);
    border-color: color-mix(in srgb, var(--neon-gold) 60%, transparent);
    box-shadow: 0 0 24px -8px var(--neon-gold);
}

.calendar-day-box.current .day-label {
    color: var(--neon-gold);
    font-weight: 700;
}

.day-label {
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ash-dim);
}

.day-icon {
    font-size: 1.3em;
    line-height: 1;
}

.day-reward-value {
    font-family: var(--font-num);
    font-size: 11px;
    font-weight: 700;
    color: var(--chalk);
    white-space: nowrap;
}

.calendar-day-box.claimed .day-reward-value {
    text-decoration: line-through;
    color: var(--ash-dim);
}

@media (max-width: 450px) {
    .reward-calendar-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .calendar-day-box:nth-child(7) {
        grid-column: span 3;
    }

    .daily-reward-modal {
        padding: var(--sp-4);
    }
}

/* Llamada a reclamar: el único elemento que pulsa sin que hagas nada,
   porque su trabajo es que vuelvas. */
.daily-reward-claim-trigger {
    position: fixed;
    right: var(--sp-5);
    bottom: 84px;
    z-index: 20000;
    display: none;
    align-items: center;
    gap: var(--sp-3);
    padding: 15px 28px;
    border-radius: var(--r-pill);
    border: 1px solid color-mix(in srgb, var(--neon-lime) 55%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--neon-lime) 26%, var(--lacquer-hi)),
            color-mix(in srgb, var(--neon-lime) 10%, var(--lacquer)));
    color: #C6FFE0;
    font-family: var(--font-sign);
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 0 34px -10px var(--neon-lime);
    animation: premiumPulseGreen 2.4s var(--ease) infinite;
    transition: transform var(--t-fast) var(--ease);
}

.daily-reward-claim-trigger.show {
    display: flex;
}

.daily-reward-claim-trigger:hover {
    transform: translateY(-3px);
}

@keyframes premiumPulseGreen {

    0%,
    100% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14),
            0 0 30px -12px var(--neon-lime);
    }

    50% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14),
            0 0 50px -6px var(--neon-lime);
    }
}

.daily-reward-claim-trigger .gift-icon {
    font-size: 1.4em;
    line-height: 1;
}

@media (max-width: 768px) {

    /* Compacta, para no taparle el actuador al jugador */
    .daily-reward-claim-trigger {
        right: var(--sp-3);
        bottom: 74px;
        padding: 10px 16px;
        gap: var(--sp-2);
        font-size: 10px;
        letter-spacing: .1em;
    }

    .daily-reward-claim-trigger .gift-icon {
        font-size: 1.15em;
    }
}

/* --------------------------------------------------------------------------
   15. Escalado en pantallas grandes
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
    .click-button {
        width: 230px;
        height: 230px;
    }

    .upgrades-grid {
        gap: var(--sp-4);
    }
}

@media (min-width: 1440px) {
    body {
        font-size: 16px;
    }

    .click-button {
        width: 250px;
        height: 250px;
    }

    .gear-icon {
        font-size: 3.8em;
    }
}

/* --------------------------------------------------------------------------
   16. Piezas que antes vivían en atributos style= del HTML
   Traerlas aquí es lo que permite que todas las páginas compartan una sola
   voz visual: mientras vivan en el marcado, ninguna hoja puede unificarlas.
   -------------------------------------------------------------------------- */

.brand-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

header h3 {
    text-align: center;
}

/* Fila de controles de la cabecera */
#account-btn {
    right: var(--sp-4);
}

#theme-button {
    right: 80px;
}

#download-btn {
    right: 140px;
}

#music-btn {
    right: 200px;
}

#private-chat-btn {
    right: 260px;
}

#download-btn,
#music-btn {
    border: 1px solid var(--seam-hi);
    font-size: 1.1em;
    text-decoration: none;
}

@media (max-width: 768px) {
    #account-btn {
        right: var(--sp-3);
    }

    #theme-button {
        right: 62px;
    }

    #download-btn {
        right: 108px;
    }

    #music-btn {
        right: 154px;
    }

    #private-chat-btn {
        right: 200px;
    }
}

@media (max-width: 560px) {

    /* En pantallas estrechas la cabecera reserva sitio arriba para los controles */
    header {
        padding-top: 66px;
    }

    .options-link {
        top: var(--sp-3);
        width: 34px;
        height: 34px;
    }

    #theme-button {
        right: 52px;
    }

    #download-btn {
        right: 91px;
    }

    #music-btn {
        right: 130px;
    }

    #private-chat-btn {
        right: 169px;
    }
}

/* Producción y acceso a CP forman un solo instrumento */
.stat-pair {
    display: flex;
    flex: 1 1 240px;
    gap: 0;
}

#normalProductionContainer {
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#cpInfoBtn {
    display: none;
    /* lo enciende el JS al alcanzar los rebirths necesarios */
    flex: 0 0 auto;
    min-width: 34px;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 0 var(--r-md) var(--r-md) 0;
    border: 1px solid #000;
    border-left: 1px solid var(--seam);
    background: var(--glass);
    color: var(--ash);
    font-size: 1em;
    transition: color var(--t-med) var(--ease), background var(--t-med) var(--ease);
}

#cpInfoBtn:hover {
    color: var(--neon-cyan);
    background: color-mix(in srgb, var(--neon-cyan) 12%, var(--glass));
}

/* Los CP son otra moneda: van en cian, no en el naranja de producción */
#cpMenuToggle {
    --accent: var(--neon-cyan);
    --accent-core: #C4F6FF;
    border-color: color-mix(in srgb, var(--neon-cyan) 30%, #000);
    transition: box-shadow var(--t-med) var(--ease);
}

#cpMenuToggle:hover {
    box-shadow:
        inset 0 2px 14px rgba(0, 0, 0, .9),
        0 0 22px -8px var(--neon-cyan);
}

#cpButtonContainer {
    display: none;
}

#cpButtonContainer .click-value {
    color: var(--neon-cyan);
}

#cpButtonContainer .gear-icon {
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--neon-cyan) 70%, transparent));
}

/* --------------------------------------------------------------------------
   17. Barra de nivel
   No tenía ningún estilo: existía en el marcado pero no llegaba a verse.
   -------------------------------------------------------------------------- */

.level-bar-container-horizontal {
    position: relative;
    width: min(420px, 100%);
    height: 26px;
    margin: 0 auto var(--sp-5);
    border-radius: var(--r-pill);
    background: #05050A;
    border: 1px solid #000;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .85);
    overflow: hidden;
}

.level-bar-fill-horizontal {
    height: 100%;
    width: 0;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg,
            color-mix(in srgb, var(--accent) 65%, transparent),
            var(--accent-core));
    box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 65%, transparent);
    transition: width var(--t-slow) var(--ease);
}

.level-text-horizontal {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-num);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--chalk);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   18. Accesos de la sección del actuador
   -------------------------------------------------------------------------- */

.hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    width: 100%;
    margin-bottom: var(--sp-6);
}

/* Lleva a la sala de apuestas, así que va en magenta */
#playground-button {
    --accent: var(--neon-magenta);
    --accent-core: #FFB8DC;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    padding: 11px 24px;
    border-radius: var(--r-md);
    border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--accent) 26%, var(--lacquer-hi)),
            color-mix(in srgb, var(--accent) 10%, var(--lacquer)));
    color: var(--accent-core);
    font-family: var(--font-sign);
    font-size: 14px;
    letter-spacing: .14em;
    text-transform: uppercase;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12),
        0 0 26px -10px color-mix(in srgb, var(--accent) 90%, transparent);
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease);
}

#playground-button:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 0 40px -8px color-mix(in srgb, var(--accent) 95%, transparent);
}

#playground-button:active {
    transform: translateY(1px);
}

#playground-text-container {
    display: inline-block;
    white-space: nowrap;
    transition: transform var(--t-med) var(--ease);
}

/* El pase es información, no apuesta: cian */
#level-pass-button {
    --accent: var(--neon-cyan);
    --accent-core: #C4F6FF;
    display: inline-flex;
    align-items: center;
    padding: 11px 20px;
    border-radius: var(--r-md);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, var(--lacquer));
    color: var(--accent-core);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease);
}

#level-pass-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 28px -8px var(--accent);
}

.clicker-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--sp-7);
    margin-top: var(--sp-4);
}

/* --------------------------------------------------------------------------
   19. Detalles de chat y mejoras
   -------------------------------------------------------------------------- */

#view-chat .chat-header {
    justify-content: space-between;
}

.private-chat-shortcut {
    padding: 5px 12px;
    border-radius: var(--r-sm);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-core);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.private-chat-shortcut:hover {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Mejora ya comprada: cumplida, sin luz. Solo brilla lo que puedes accionar. */
.upgrade-card.purchased {
    border-color: var(--seam);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.upgrade-card.purchased .upgrade-cost {
    color: var(--neon-lime);
    border-color: color-mix(in srgb, var(--neon-lime) 30%, transparent);
}

/* --------------------------------------------------------------------------
   20. Racha del actuador
   El anillo es un temporizador: se vacía mientras dejas de pulsar. Ver cómo
   se te escapa es lo que hace que quieras seguir.
   -------------------------------------------------------------------------- */

.combo-ring {
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background: conic-gradient(var(--btn-core) calc(var(--combo-pct, 0) * 1%),
            transparent 0);
    /* Deja solo el aro exterior */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--btn) 85%, transparent));
    transition: opacity var(--t-med) var(--ease);
}

.click-button[data-combo] .combo-ring {
    opacity: 1;
}

/* A partir de cierta racha el tubo se sobrecarga */
.click-button[data-hot] {
    box-shadow:
        inset 0 2px 2px rgba(255, 255, 255, .3),
        inset 0 -18px 34px rgba(0, 0, 0, .68),
        0 0 0 2px var(--btn-core),
        0 0 40px 5px color-mix(in srgb, var(--btn) 85%, transparent),
        0 0 120px -6px color-mix(in srgb, var(--btn) 90%, transparent),
        0 22px 40px -18px #000;
}

/* Marcador de racha: reservado en alto para que nada salte al aparecer */
.combo-meter {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--sp-2);
    height: 22px;
    margin-top: var(--sp-3);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}

.combo-meter.is-active {
    opacity: 1;
    transform: none;
}

.combo-mult {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    color: var(--btn-core, var(--accent-core));
    text-shadow: 0 0 10px color-mix(in srgb, var(--btn, var(--accent)) 75%, transparent);
}

.combo-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ash-dim);
}

/* Salto al alcanzar un hito de racha */
.combo-mult.is-milestone {
    animation: combo-pop .34s var(--ease-snap);
}

@keyframes combo-pop {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.45);
    }

    100% {
        transform: scale(1);
    }
}

/* Onda que sale del botón al llegar a un hito */
.combo-wave {
    position: fixed;
    z-index: 10000;
    border-radius: 50%;
    pointer-events: none;
    border: 2px solid var(--btn-core, var(--accent-core));
    opacity: .9;
    transition: transform .6s var(--ease), opacity .6s var(--ease);
}

/* Engranajes girando en los bordes cuando combo > x2 */
.combo-gears-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s var(--ease);
    overflow: hidden;
}

.combo-gears-container[data-active] {
    opacity: 1;
}

.combo-gear {
    position: fixed;
    width: 140px;
    height: 140px;
    color: var(--accent-core);
    filter: drop-shadow(0 0 20px color-mix(in srgb, var(--accent) 90%, transparent))
            drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 60%, transparent));
    animation: spin-gear 3s linear infinite, gear-approach 0.6s var(--ease) forwards;
    opacity: 0;
    transform-origin: center center;
}

.combo-gears-container[data-active] .combo-gear {
    opacity: 1;
}

@keyframes spin-gear {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes spin-gear-ccw {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

@keyframes gear-approach {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .combo-meter {
        height: 20px;
        margin-top: var(--sp-2);
    }

    .combo-mult {
        font-size: 15px;
    }

    .combo-gear {
        width: 100px;
        height: 100px;
    }
}

/* La casilla premiada siempre acaba a las 12, así que basta una cuña fija
   ahí: se enciende al parar y no hay que recalcular ángulo alguno.
   355.135deg = -4.865deg, media casilla, para centrarla en la vertical. */
.roulette-winner {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background: conic-gradient(from 355.135deg,
            rgba(255, 255, 255, .9) 0 9.73deg,
            transparent 0 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent 60%, #000 60%);
    mask: radial-gradient(farthest-side, transparent 60%, #000 60%);
    transition: opacity var(--t-med) var(--ease);
}

.roulette-winner.is-on {
    opacity: 1;
    animation: winner-flash 1.1s var(--ease) 2;
}

@keyframes winner-flash {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .38;
    }
}

/* Mientras hay racha, la llamada de recompensa se aparta: en pantallas
   estrechas se solapaba justo con el marcador y tapaba la reacción al clic. */
body[data-combo] .daily-reward-claim-trigger {
    opacity: .22;
    transform: translateY(6px) scale(.94);
}