[data-theme="light"] .admin-number-input::placeholder {
    color: #888888 !important;
}

[data-theme="dark"] .admin-number-input::placeholder {
    color: #aaaaaa !important;
}

/* TX link color: readable in dark/light themes */
.tx-link {
    color: inherit;
    text-decoration: underline;
}

[data-theme="dark"] .tx-link {
    color: #ffffff;
}

[data-theme="light"] .tx-link {
    color: #000000;
}



/* 2) PC: centrar botones auxiliares (Leaderboard/Lottery) */
@media (min-width: 769px) {
    .auxiliary-buttons-container {
        position: static !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        /* Forzar centrado horizontal */
        text-align: center !important;
        display: flex !important;
    }

    /* Asegurar que los botones estén centrados */
    .auxiliary-buttons-container #openLeaderboardBtn,
    .auxiliary-buttons-container #openLotteryBtn {
        margin: 0 10px !important;
        flex-shrink: 0 !important;
    }
}

/* 3) Móvil: todos los botones caben en una línea */
@media (max-width: 600px) {
    .three-button-container {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    .three-button-container .btn {
        flex: 1 !important;
        min-width: 0 !important;
        height: 40px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 0.8em !important;
        padding: 8px 4px !important;
        max-width: calc(33.33% - 6px) !important;
    }

    .auxiliary-buttons-container {
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        padding: 5px !important;
        width: 100% !important;
    }

    #openLeaderboardBtn,
    #openLotteryBtn,
    #open-referral-modal-btn {
        width: calc(33.33% - 6px) !important;
        min-width: 0 !important;
        flex: 1 !important;
        flex-shrink: 1 !important;
        height: 40px !important;
        min-height: 40px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 0.8em !important;
        padding: 8px 4px !important;
        margin: 0 2px !important;
    }
}

/* Admin numeric input: readable in both themes */
[data-theme] .admin-number-input,
.admin-number-input {
    background: #ffffff !important;
    border-color: #888888 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

[data-theme="dark"] .admin-number-input::placeholder,
[data-theme="light"] .admin-number-input::placeholder {
    color: #bbbbbb;
}

/* Utility spacing classes migrated from inline */
.ml-10 {
    margin-left: 10px;
}

.ml-20 {
    margin-left: 20px;
}

.text-center {
    text-align: center;
}

.mt-24 {
    margin-top: 24px;
}

.op-70 {
    opacity: 0.7;
}

.ls-2 {
    letter-spacing: 2px;
}

.inline-flex {
    display: inline-flex;
    align-items: center;
}

.gap-8 {
    gap: 8px;
}

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}









/* Make content surfaces slightly translucent so the background shows through */
.section,
.player-card,
.shop-item,
.modal-content,
.stat-bar,
.match-display,
.level-bar,
.history-item,
#leaderboard-section {
    background: rgba(255, 255, 255, 0.85) !important;
}

body[data-theme="dark"] .section,
body[data-theme="dark"] .player-card,
body[data-theme="dark"] .shop-item,
body[data-theme="dark"] .modal-content,
body[data-theme="dark"] .stat-bar,
body[data-theme="dark"] .match-display,
body[data-theme="dark"] .level-bar,
body[data-theme="dark"] .history-item,
body[data-theme="dark"] #leaderboard-section {
    background: rgba(35, 43, 62, 0.85) !important;
}

/* Defensive: hide market buttons for Starter or Create Team cards */
.player-select-card[data-is-starter="1"] .market-action-button,
.player-select-card[data-is-starter="1"] .simple-market-button,
.player-card[data-is-starter="1"] .market-action-button,
.player-card[data-is-starter="1"] .simple-market-button,
.player-select-card[data-no-market="1"] .market-action-button,
.player-select-card[data-no-market="1"] .simple-market-button {
    display: none !important;
}

/* Final enforcement to ensure background image is visible everywhere */
html,
body,
#game-wrapper {
    background-image: url('https://cryptobasket.org/dbz-basketball-bg.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* ===== SOLUCIÓN PARA LANDING PAGE EN TODOS LOS DISPOSITIVOS ===== */
/* Landing page completamente fija sin scroll */
#landing-page {
    /* Posición completamente fija */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* Ocupar toda la pantalla */
    width: 100vw !important;
    height: 100vh !important;
    /* Asegurar centrado estable */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    /* Bloquear completamente el scroll */
    overflow: hidden !important;
    /* Estabilidad del layout */
    transform: none !important;
    will-change: auto !important;
    /* Sin espacios que causen desplazamiento */
    margin: 0 !important;
    padding: 0 !important;
    /* Máxima prioridad */
    z-index: 9999 !important;
}

/* Asegurar que la landing page se oculte correctamente después del login */
#landing-page[style*="display: none"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* === NUEVA PALETA DE COLORES PROFESIONAL === */
:root {
    --color-bg: #f4f6fb;
    --color-bg-gradient: linear-gradient(135deg, #e0e7ef 0%, #f4f6fb 100%);
    --color-text: #000000;
    --color-secondary-text: #000000;
    --color-primary: #2563eb;
    /* Azul vibrante */
    --color-accent: #2563eb;
    /* Azul para destacados */
    --color-card: #fff;
    --color-card-player: #f8fafc;
    --color-btn: linear-gradient(45deg, #2563eb, #1e40af);
    --color-btn-hover: linear-gradient(45deg, #1e40af, #2563eb);
    --color-btn-secondary: linear-gradient(45deg, #22c55e, #16a34a);
    --color-btn-secondary-hover: linear-gradient(45deg, #16a34a, #22c55e);
    --color-btn-gold: linear-gradient(45deg, #2563eb, #1e40af);
    --color-btn-gold-hover: linear-gradient(45deg, #1e40af, #2563eb);
    --color-card-border: #e5e7eb;
    --color-card-shadow: 0 4px 24px rgba(60, 60, 100, 0.08);
    --color-input-bg: #fff;
    --color-input-border: #cbd5e1;
    --color-player-stats: #23272f;
    --color-rare: #0ea5e9;
    --color-epic: #a21caf;
    --color-legendary: #f59e42;
    --color-btn-fixed: linear-gradient(45deg, #2563eb, #1e40af);
    --color-btn-fixed-hover: linear-gradient(45deg, #1e40af, #2563eb);
    --color-btn-disabled: #888;
}

body[data-theme="dark"] {
    --color-bg: #181f2a;
    --color-bg-gradient: linear-gradient(135deg, #181f2a 0%, #232b3e 100%);
    --color-text: #f5f6fa;
    --color-secondary-text: #b0b8c9;
    --color-primary: #22c55e;
    /* Verde lima */
    --color-accent: #22c55e;
    /* Verde para destacados */
    --color-card: #232b3e;
    --color-card-player: #232b3e;
    --color-btn: linear-gradient(45deg, #22c55e, #166534);
    --color-btn-hover: linear-gradient(45deg, #166534, #22c55e);
    --color-btn-secondary: linear-gradient(45deg, #60a5fa, #2563eb);
    --color-btn-secondary-hover: linear-gradient(45deg, #2563eb, #60a5fa);
    --color-btn-gold: linear-gradient(45deg, #22c55e, #16a34a);
    --color-btn-gold-hover: linear-gradient(45deg, #16a34a, #22c55e);
    --color-card-border: #1e293b;
    --color-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
    --color-input-bg: #232b3e;
    --color-input-border: #334155;
    --color-player-stats: #22c55e;
    --color-rare: #38bdf8;
    --color-epic: #e879f9;
    --color-legendary: #fde047;
    --color-btn-fixed: linear-gradient(45deg, #22c55e, #166534);
    --color-btn-fixed-hover: linear-gradient(45deg, #166534, #22c55e);
    --color-btn-disabled: #444;
}

body {
    background-image: url('https://cryptobasket.org/dbz-basketball-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* make background visible during scroll */
    color: var(--color-text);
    position: relative;
    min-height: 100vh;
}

/* Add a semi-transparent overlay to ensure content readability */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(244, 246, 251, 0.75);
    /* even stronger overlay */
    z-index: 0;
    pointer-events: none;
}

/* Dark theme overlay */
body[data-theme="dark"]::before {
    background: rgba(24, 31, 42, 0.75);
    /* even stronger overlay */
}

.section,
.player-card,
.shop-item,
.modal-content,
.stat-bar,
.match-display,
.level-bar,
.history-item,
#leaderboard-section {
    background: rgba(255, 255, 255, 0.99);
    border: 1.5px solid var(--color-card-border);
    box-shadow: var(--color-card-shadow);
    padding: 28px 24px;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

.player-card {
    background: var(--color-card-player);
    border: 2px solid var(--color-card-border);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(60, 60, 100, 0.10);
    padding: 18px 20px;
    margin: 14px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.player-card:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 24px rgba(60, 60, 100, 0.16);
    background: var(--color-card);
}

h1,
h2,
h3,
h4,
h5,
h6,
.stat-value,
.section h2,
#leaderboard-section h2,
.roi-value,
.player-name,
.rarity,
.history-gold {
    color: var(--color-accent) !important;
    text-shadow: 0 1px 4px rgba(60, 60, 100, 0.10);
}

.player-stats,
.player-roi-stats {
    color: var(--color-player-stats) !important;
    font-size: 1.05em;
    font-weight: 500;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-renew {
    background: var(--color-btn-fixed) !important;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    font-size: 1.08em;
    font-weight: 600;
    padding: 12px 28px;
    box-shadow: 0 2px 8px rgba(60, 60, 100, 0.10);
    transition: background 0.2s;
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-gold:hover,
.btn-danger:hover,
.btn-renew:hover {
    background: var(--color-btn-fixed-hover) !important;
}

.btn:disabled,
.btn.insufficient-gold {
    background: var(--color-btn-disabled) !important;
    color: #eee !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-secondary {
    background: var(--color-btn-secondary);
}

.btn-gold {
    background: var(--color-btn-gold, linear-gradient(45deg, #ffd700, #f5b800)) !important;
}

.btn-gold:hover {
    background: var(--color-btn-gold-hover, linear-gradient(45deg, #f5b800, #ffd700)) !important;
}

.rarity {
    padding: 4px 14px;
    border-radius: 7px;
    font-size: 0.9em;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    border: 2px solid #fff;
    letter-spacing: 1px;
}

.tab-btn {
    color: var(--color-secondary-text);
    background: none;
}

.tab-btn.active {
    color: var(--color-accent);
    border-bottom: 3px solid var(--color-accent);
}

.match-log {
    background: #e9eaf3;
    color: var(--color-secondary-text);
}

body[data-theme="dark"] .match-log {
    background: #232b3e;
    color: #b0b8c9;
}

.modal-content,
.auth-container {
    background: var(--color-card);
    color: var(--color-text);
    border: 1.5px solid var(--color-card-border);
    box-shadow: var(--color-card-shadow);
    overflow-wrap: anywhere;
}

.auth-container input {
    background: var(--color-input-bg);
    color: var(--color-text);
    border: 1px solid var(--color-input-border);
}

.auth-container input:focus {
    border: 1.5px solid var(--color-primary);
}

/* === NOTIFICACIÓN DE REFERIDO === */
.referral-notification {
    background: linear-gradient(45deg, rgba(255, 215, 0, 0.1), rgba(255, 237, 78, 0.1));
    border: 1px solid #ffd700;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    animation: slideInDown 0.5s ease-out;
}

.referral-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.referral-text {
    color: #ffd700;
    font-weight: 500;
    line-height: 1.4;
}

.referral-text strong {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.player-face {
    background-color: #e0eafc;
    border: 2px solid var(--color-card-border);
}

body[data-theme="dark"] .player-face {
    background-color: #334155;
    border: 2px solid #1e293b;
}

/* === SWITCH DE TEMA === */
.theme-switch {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3000;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-card);
    border-radius: 20px;
    padding: 6px 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    user-select: none;
}

.theme-switch input[type="checkbox"] {
    width: 0;
    height: 0;
    opacity: 0;
}

.theme-switch-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 1.1em;
    color: var(--color-text);
}

.theme-switch-slider {
    width: 36px;
    height: 20px;
    background: #bbb;
    border-radius: 20px;
    position: relative;
    margin-left: 8px;
    transition: background 0.3s;
}

.theme-switch input:checked+.theme-switch-slider {
    background: #222;
}

.theme-switch-slider::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
}

.theme-switch input:checked+.theme-switch-slider::before {
    transform: translateX(16px);
}

.theme-switch .theme-icon {
    font-size: 1.2em;
    margin-right: 4px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: transparent !important;
    color: var(--color-text);
    min-height: 100vh;
    padding: 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

#game-wrapper {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    background: transparent !important;
    backdrop-filter: none !important;
    height: auto;
}

/* Force background image visibility */
#game-wrapper::before {
    content: none !important;
}

/* Dark theme adjustments for semi-transparent elements */
body[data-theme="dark"] .section,
body[data-theme="dark"] .player-card,
body[data-theme="dark"] .shop-item,
body[data-theme="dark"] .modal-content,
body[data-theme="dark"] .stat-bar,
body[data-theme="dark"] .match-display,
body[data-theme="dark"] .level-bar,
body[data-theme="dark"] .history-item,
body[data-theme="dark"] #leaderboard-section {
    background: rgba(35, 43, 62, 0.98);
    backdrop-filter: blur(10px);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    position: relative;
}

/* Ajustar el centrado del título en PC */
.header-title {
    position: relative;
    left: 5%;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-logout-btn {
    padding: 8px 16px !important;
    font-size: 0.9em !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

h1 {
    text-align: center;
    font-size: 3em;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex: 1 1 auto;
    color: var(--color-primary);
    margin: 0;
}

.lang-selector {
    display: flex;
    gap: 10px;
}

.lang-selector img {
    width: 32px;
    cursor: pointer;
    border-radius: 4px;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 2px solid transparent;
}

.lang-selector img:hover {
    transform: scale(1.1);
    box-shadow: 0 0 8px #ffd700;
}

.lang-selector img.active {
    border-color: #ffd700;
}

.stats-bar {
    background: var(--color-card);
    padding: 20px;
    border-radius: 15px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
}

.stat-item {
    text-align: center;
    margin: 10px;
}

.stat-value {
    font-size: 2em;
    font-weight: bold;
    color: var(--color-accent);
}

.game-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.section {
    background: var(--color-card);
    padding: 25px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 20px;
}

.section h2 {
    margin-bottom: 20px;
    color: var(--color-accent);
}

/* Estilos para el cuadro de wallet de depósito */
.wallet-info-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-card);
    padding: 20px 25px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(60, 60, 100, 0.10);
    transition: all 0.3s ease;
}

.wallet-info-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(60, 60, 100, 0.16);
}

.wallet-balance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 1;
    text-align: center;
}

.wallet-label {
    font-weight: bold;
    color: var(--color-accent);
    font-size: 1.1em;
}

.wallet-amount {
    font-size: 1.5em;
    font-weight: bold;
    color: #00aa00;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background: rgba(0, 170, 0, 0.1);
    padding: 8px 16px;
    border-radius: 12px;
    border: 2px solid rgba(0, 170, 0, 0.3);
    box-shadow: 0 2px 8px rgba(0, 170, 0, 0.2);
    backdrop-filter: blur(5px);
}

.wallet-currency {
    font-weight: bold;
    color: var(--color-accent);
    font-size: 1.1em;
}

/* Estilos específicos para el tema claro */
body[data-theme="light"] .wallet-amount {
    color: #008800;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    background: rgba(0, 136, 0, 0.08);
    border: 2px solid rgba(0, 136, 0, 0.25);
    box-shadow: 0 2px 8px rgba(0, 136, 0, 0.15);
}

/* Estilos específicos para el tema oscuro */
body[data-theme="dark"] .wallet-amount {
    color: #00cc00;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    background: rgba(0, 204, 0, 0.12);
    border: 2px solid rgba(0, 204, 0, 0.35);
    box-shadow: 0 2px 8px rgba(0, 204, 0, 0.25);
}



/* Responsive para móviles */
@media (max-width: 768px) {
    .wallet-info-container {
        text-align: center;
        padding: 20px;
    }

    .wallet-balance {
        flex-direction: column;
        gap: 8px;
    }

    .wallet-amount {
        font-size: 1.3em;
        color: #00aa00;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        padding: 6px 12px;
        border-radius: 10px;
    }

    /* Asegurar que el verde se vea bien en móviles con tema claro */
    body[data-theme="light"] .wallet-amount {
        color: #008800;
        background: rgba(0, 136, 0, 0.08);
        border: 2px solid rgba(0, 136, 0, 0.25);
        box-shadow: 0 2px 6px rgba(0, 136, 0, 0.15);
    }

    /* Asegurar que el verde se vea bien en móviles con tema oscuro */
    body[data-theme="dark"] .wallet-amount {
        color: #00cc00;
        background: rgba(0, 204, 0, 0.12);
        border: 2px solid rgba(0, 204, 0, 0.35);
        box-shadow: 0 2px 6px rgba(0, 204, 0, 0.25);
    }
}

.btn {
    background: var(--color-btn);
    color: var(--color-text);
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
    margin: 5px;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.btn:disabled {
    background: #555;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.6;
}

.btn-primary {
    background: var(--color-btn-primary);
}

.btn-secondary {
    background: var(--color-btn-secondary);
}

.btn-gold {
    background: var(--color-btn-gold);
}

.btn-danger {
    background: var(--color-btn-danger);
}

.btn-renew {
    background: linear-gradient(45deg, #3498db, #2980b9);
    padding: 5px 10px;
    font-size: 12px;
}

.player-card {
    background: var(--color-card-player);
    border: 2px solid var(--color-card-border);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(60, 60, 100, 0.10);
    padding: 18px 20px;
    margin: 14px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.player-card:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 24px rgba(60, 60, 100, 0.16);
    background: var(--color-card);
}

.player-details {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.player-face {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background-color: #e0eafc;
    image-rendering: pixelated;
    border: 2px solid var(--color-card-border);
}

body[data-theme="dark"] .player-face {
    background-color: #333;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.player-info {
    flex: 1;
}

.player-name {
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 5px;
    color: var(--color-accent);
}

.player-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 0.9em;
    color: #aaa;
}

.player-roi-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 0.8em;
    color: #ddd;
    margin-top: 5px;
}

.rarity {
    padding: 4px 14px;
    border-radius: 7px;
    font-size: 0.9em;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    border: 2px solid #fff;
    letter-spacing: 1px;
}

.match-display {
    background: #2d3651;
    color: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(60, 60, 100, 0.10);
    padding: 32px 24px;
    margin: 0 auto 24px auto;
    max-width: 600px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.match-display.live {
    background-image: linear-gradient(rgba(15, 12, 41, 0.85), rgba(15, 12, 41, 0.85));
}

.score {
    font-size: 3em;
    margin: 20px 0;
    color: #ffd700;
    transition: transform 0.2s ease, color 0.2s ease;
    text-align: center;
    width: 100%;
}

.score.flash {
    animation: score-flash 0.5s ease-out;
}

.match-log {
    max-height: 200px;
    overflow-y: auto;
    text-align: left;
    padding: 10px;
    background: #e9eaf3;
    border-radius: 5px;
    margin-top: 10px;
    font-size: 0.9em;
    color: var(--color-secondary-text);
    margin-left: auto;
    margin-right: auto;
    display: block;
}

body[data-theme="dark"] .match-log {
    background: rgba(0, 0, 0, 0.3);
    color: #ddd;
}

@keyframes live-pulse {
    from {
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    }

    to {
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
    }
}

@keyframes score-flash {

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

    50% {
        transform: scale(1.2);
        color: #ffffff;
        text-shadow: 0 0 15px #ffffff;
    }
}

.shop-item {
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    margin: 10px 0;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    padding: 30px;
    border-radius: 15px;
    width: 90%;
    max-width: 800px;
    text-align: center;
    border: 2px solid #ffd700;
    max-height: 90vh;
    overflow-y: auto;
}

/* Modal de Fusion Mejorado */
#fusionModal .modal-content {
    max-width: 1100px !important;
    /* Más ancho para fusion */
    width: 95% !important;
    /* Usar más ancho de pantalla */
    padding: 40px !important;
    /* Más padding */
    min-height: 600px !important;
    /* Altura mínima */
    max-height: 95vh !important;
    /* Más altura */
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f1419 100%) !important;
    /* Fondo más elegante */
    border: 3px solid #ffd700 !important;
    /* Borde más grueso */
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.3), inset 0 0 30px rgba(255, 107, 53, 0.1) !important;
    /* Efectos de glow */
    position: relative !important;
}

/* Título del modal de fusion */
#fusionModal h2 {
    color: #ffd700 !important;
    font-size: 2.2em !important;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5) !important;
    margin-bottom: 30px !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
}

/* Descripción del modal de fusion */
#fusionModal p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1.1em !important;
    line-height: 1.6 !important;
    margin-bottom: 30px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Contenedor de selección de fusion */
.fusion-selection {
    display: flex !important;
    gap: 30px !important;
    margin: 30px 0 !important;
    justify-content: space-between !important;
}

/* Slots de fusion */
.fusion-slot {
    flex: 1 !important;
    background: rgba(255, 215, 0, 0.1) !important;
    border: 2px solid rgba(255, 215, 0, 0.3) !important;
    border-radius: 15px !important;
    padding: 25px !important;
    min-height: 300px !important;
}

.fusion-slot label {
    display: block !important;
    color: #ffd700 !important;
    font-size: 1.3em !important;
    font-weight: bold !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
}

/* Lista de jugadores en fusion */
.fusion-player-list {
    max-height: 400px !important;
    overflow-y: auto !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 10px !important;
    padding: 15px !important;
    border: 1px solid rgba(255, 215, 0, 0.2) !important;
}

/* Botones del modal de fusion */
#fusionModal .btn {
    font-size: 1.2em !important;
    padding: 15px 30px !important;
    margin: 10px 15px !important;
    border-radius: 10px !important;
    font-weight: bold !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

#fusionModal .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Responsive design para modal de fusion */
@media (max-width: 768px) {
    #fusionModal .modal-content {
        width: 95vw !important;
        padding: 20px !important;
        min-height: auto !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    .fusion-selection {
        flex-direction: column !important;
        gap: 15px !important;
        margin: 20px 0 !important;
    }

    .fusion-slot {
        min-height: 200px !important;
        padding: 15px !important;
    }

    .fusion-slot label {
        font-size: 1.1em !important;
        text-align: center !important;
    }

    .fusion-player-list {
        max-height: 160px !important;
        padding: 10px !important;
        overflow-y: auto !important;
    }

    #fusionModal h2 {
        font-size: 1.6em !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    #fusionModal p {
        font-size: 0.95em !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    /* Botones en fila para tablets también */
    #fusionModal .modal-content>div[style*="text-align: center"] {
        display: flex !important;
        gap: 10px !important;
        justify-content: center !important;
        margin-top: 15px !important;
        text-align: center !important;
    }

    #fusionModal .btn {
        font-size: 1em !important;
        padding: 10px 20px !important;
        margin: 0 !important;
        flex: 1 !important;
        max-width: calc(50% - 5px) !important;
    }
}

@media (max-width: 480px) {
    #fusionModal .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 15px !important;
        min-height: auto !important;
        max-height: 95vh !important;
        margin: 2.5vh auto !important;
        overflow-y: auto !important;
        border-radius: 12px !important;
    }

    .fusion-selection {
        flex-direction: column !important;
        gap: 10px !important;
        margin: 15px 0 !important;
    }

    .fusion-slot {
        min-height: 180px !important;
        padding: 12px !important;
        background: rgba(255, 215, 0, 0.08) !important;
        border: 1px solid rgba(255, 215, 0, 0.3) !important;
        border-radius: 8px !important;
    }

    .fusion-slot label {
        font-size: 1em !important;
        margin-bottom: 8px !important;
        text-align: center !important;
    }

    .fusion-player-list {
        max-height: 140px !important;
        padding: 8px !important;
        overflow-y: auto !important;
        border: 1px solid rgba(255, 215, 0, 0.3) !important;
        background: rgba(0, 0, 0, 0.3) !important;
        border-radius: 6px !important;
    }

    /* Optimizar items dentro de las listas de fusión */
    .fusion-player-item {
        padding: 6px !important;
        margin-bottom: 4px !important;
        font-size: 0.8em !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        border-radius: 4px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid transparent !important;
        transition: all 0.2s ease !important;
    }

    .fusion-player-item:hover {
        border-color: rgba(255, 215, 0, 0.5) !important;
        background: rgba(255, 215, 0, 0.1) !important;
    }

    .fusion-player-item.selected {
        border-color: #ffd700 !important;
        background: rgba(255, 215, 0, 0.15) !important;
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.3) !important;
    }

    .fusion-player-item .player-face {
        width: 32px !important;
        height: 32px !important;
        border-radius: 4px !important;
        flex-shrink: 0 !important;
    }

    .fusion-player-item .player-info {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        min-width: 0 !important;
    }

    .fusion-player-item .player-name {
        font-size: 0.8em !important;
        font-weight: bold !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: #ffffff !important;
    }

    .fusion-player-item .player-stats {
        font-size: 0.65em !important;
        display: flex !important;
        gap: 6px !important;
        opacity: 0.8 !important;
    }

    .fusion-player-item .rarity {
        font-size: 0.6em !important;
        padding: 1px 4px !important;
        border-radius: 3px !important;
        align-self: flex-start !important;
        flex-shrink: 0 !important;
    }

    #fusionModal h2 {
        font-size: 1.2em !important;
        margin-bottom: 8px !important;
        text-align: center !important;
    }

    #fusionModal p {
        font-size: 0.8em !important;
        margin-bottom: 8px !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    /* Botones en fila horizontal */
    #fusionModal .modal-content>div[style*="text-align: center"] {
        display: flex !important;
        gap: 8px !important;
        justify-content: center !important;
        margin-top: 10px !important;
        text-align: center !important;
    }

    #fusionModal .btn {
        font-size: 0.85em !important;
        padding: 6px 12px !important;
        margin: 0 !important;
        flex: 1 !important;
        max-width: calc(50% - 4px) !important;
        white-space: nowrap !important;
    }
}

.new-player-reveal {
    animation: reveal 0.5s ease-out;
}

@keyframes reveal {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.player-list {
    max-height: 400px;
    overflow-y: auto;
}

.level-bar {
    background: #e0e7ef;
    height: 24px;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 8px;
    border: 1.5px solid #cbd5e1;
    padding: 0;
    position: relative;
}

body[data-theme="dark"] .level-bar {
    background: #334155;
    border: 1.5px solid #1e293b;
}

.level-progress {
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 12px;
    min-width: 18px;
    position: absolute;
    left: 0;
    top: 0;
}

body[data-theme="dark"] .level-progress {
    background: linear-gradient(90deg, #22c55e 0%, #60a5fa 100%);
}

.player-list,
.selection-list {
    max-height: 700px;
    min-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

.player-card,
.selection-list .player-card {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.notifications {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 20000 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    width: 300px !important;
}

.notification {
    background: #fff !important;
    color: #23272f !important;
    border-left: 4px solid #2563eb !important;
    position: static !important;
    margin-bottom: 0 !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    animation: slideIn 0.3s ease-out !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: pre-line !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    font-size: 0.95em !important;
}

body[data-theme="dark"] .notification {
    background: rgba(0, 0, 0, 0.9) !important;
    color: #f5f6fa !important;
    border-left: 4px solid #22c55e !important;
}

.notification-success {
    border-left: 4px solid #22c55e !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%) !important;
    border: 1px solid #bbf7d0 !important;
}

.notification-error {
    border-left: 4px solid #e74c3c !important;
    background: linear-gradient(135deg, #fef2f2 0%, #fff 100%) !important;
    border: 1px solid #fecaca !important;
}

.notification-warning {
    border-left: 4px solid #f59e0b !important;
    background: linear-gradient(135deg, #fffbeb 0%, #fff 100%) !important;
    border: 1px solid #fed7aa !important;
}

.notification-info {
    border-left: 4px solid #2563eb !important;
    background: linear-gradient(135deg, #eff6ff 0%, #fff 100%) !important;
    border: 1px solid #bfdbfe !important;
}

body[data-theme="dark"] .notification-success {
    background: #1a2e1a !important;
    color: #22c55e !important;
}

body[data-theme="dark"] .notification-error {
    background: #2e1a1a !important;
    color: #e74c3c !important;
}

body[data-theme="dark"] .notification-warning {
    background: #2e2e1a !important;
    color: #ffd700 !important;
}

body[data-theme="dark"] .notification-info {
    background: #1a1a2e !important;
    color: #60a5fa !important;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.tab-container {
    width: 100%;
}

.tab-buttons {
    display: flex;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 20px;
}

.tab-btn {
    padding: 15px 25px;
    cursor: pointer;
    border: none;
    background: none;
    color: var(--color-secondary-text);
    font-size: 1.1em;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.tab-btn.active {
    color: var(--color-primary);
    border-bottom: 3px solid var(--color-accent);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.mint-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
}

.mint-chances {
    font-size: 0.8em;
    opacity: 0.7;
    margin-top: 10px;
    width: 150px;
}

/* Estilos básicos eliminados - usando los estilos detallados anteriores */

.fusion-player-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    margin-bottom: 8px;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--color-card-player);
}

.fusion-player-item:hover {
    border-color: #ffd700;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.fusion-player-item.selected {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.fusion-player-item .player-face {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.fusion-player-item .player-info {
    flex: 1;
    min-width: 0;
}

.fusion-player-item .player-name {
    font-weight: bold;
    font-size: 0.9em;
    margin-bottom: 2px;
    color: var(--color-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fusion-player-item .player-stats {
    font-size: 0.8em;
    color: var(--color-secondary-text);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fusion-player-item .skill-points {
    color: #ffd700;
    font-weight: bold;
}

.fusion-player-item .rarity {
    font-size: 0.7em;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
}

/* Estilos para el filtro de ordenamiento en modo oscuro */
body[data-theme="dark"] #playerSortSelect {
    background: #232b3e;
    color: #f5f6fa;
    border-color: #22c55e;
}

body[data-theme="dark"] #playerSortSelect option {
    background: #232b3e;
    color: #f5f6fa;
}

.selection-list {
    max-height: 40vh;
    overflow-y: auto;
}

.selection-list .player-card {
    cursor: pointer;
    border: 2px solid transparent;
}

.selection-list .player-card.selected {
    border-color: #ffd700;
    box-shadow: 0 0 10px #ffd700;
}

.selection-list .player-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.history-result.win {
    color: #2ecc71;
    font-weight: bold;
}

.history-result.loss {
    color: #e74c3c;
    font-weight: bold;
}

.history-result.draw {
    color: #f1c40f;
    font-weight: bold;
}

.history-details {
    flex-grow: 1;
    text-align: center;
}

.history-gold {
    color: #ffd700;
    font-weight: bold;
}

.roi-container {
    text-align: center;
    padding: 20px;
}

.roi-value {
    font-size: 3em;
    font-weight: bold;
    text-shadow: 0 2px 8px rgba(255, 152, 0, 0.18), 0 1px 0 #fff;
}

.roi-label {
    font-size: 1.2em;
    opacity: 0.8;
}

.roi-details {
    margin-top: 25px;
    font-size: 1.1em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    justify-content: space-around;
}

.roi-details-item {
    display: flex;
    flex-direction: column;
}

.roi-details-item span {
    font-weight: bold;
    color: #ffd700;
}

#newPlayerActions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

/* Arreglar nombre del jugador en mintModal - sobreescribir inline styles */
#mintModal .player-name {
    font-size: 1.5em !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    width: 100% !important;
    text-align: center !important;
    line-height: 1.3 !important;
    margin: 8px 0 !important;
}

.btn.insufficient-gold {
    background: #555;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.6;
}

.btn.insufficient-gold:hover {
    transform: none;
    box-shadow: none;
}

/* Leaderboard styles */
#leaderboard-section {
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    padding: 1.5em;
    border-radius: 12px;
    margin: 2em 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    text-align: center;
}

#leaderboard-section h2 {
    color: #ffd700;
    margin-bottom: 1em;
}

#leaderboard-list {
    list-style: decimal inside;
    padding-left: 0;
    font-size: 1.2em;
}

#leaderboard-list li {
    margin: 0.5em 0;
    padding: 0.5em 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#leaderboard-list li:first-child {
    font-weight: bold;
    color: #ffd700;
    font-size: 1.3em;
}

/* === RESPONSIVE DESIGN PARA TABLETS Y MÓVILES === */

/* Tablets (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .container {
        max-width: 95% !important;
    }

    .game-sections {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .header-container {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .stats-bar {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .stat-item {
        margin: 8px !important;
    }

    .stat-value {
        font-size: 1.8em !important;
    }

    .btn {
        padding: 10px 20px !important;
        font-size: 1em !important;
    }

    .player-card {
        padding: 15px !important;
    }

    .modal-content {
        max-width: 90vw !important;
        max-height: 85vh !important;
    }

    .fusion-selection {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .fusion-slot {
        width: 100% !important;
    }

    .fusion-player-list {
        max-height: 250px !important;
    }

    .player-select-card {
        width: 160px !important;
        padding: 15px !important;
    }

    .player-select-card img {
        width: 80px !important;
        height: 80px !important;
    }
}

/* Móviles (hasta 768px) */
@media (max-width: 768px) {
    body {
        padding: 8px !important;
        font-size: 14px !important;
    }

    h1 {
        font-size: 1.6em !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    .header-container {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: center !important;
    }

    .header-right {
        order: 2 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        width: auto !important;
        justify-content: center !important;
    }

    .header-title {
        order: 1 !important;
        position: static !important;
        left: auto !important;
    }

    .header-logout-btn {
        order: 2 !important;
        width: 40px !important;
        padding: 1px 3px !important;
        font-size: 0.6em !important;
        border-radius: 6px !important;
        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;
        line-height: 1 !important;
    }

    .theme-switch {
        order: 1 !important;
    }

    .header-logout-btn {
        order: 2 !important;
    }

    /* Contenedor de botones auxiliares en móviles */
    .auxiliary-buttons-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 8px !important;
        padding: 6px !important;
    }

    /* Botones auxiliares en móviles */
    .auxiliary-buttons-container .btn {
        width: 45% !important;
        min-width: 0 !important;
        max-width: none !important;
        font-size: 0.8em !important;
        padding: 8px 4px !important;
        min-height: 40px !important;
        /* Asegurar que no se salgan de la pantalla */
        box-sizing: border-box !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .lang-selector {
        justify-content: center !important;
        gap: 10px !important;
    }

    .lang-selector img {
        width: 30px !important;
        height: 30px !important;
    }

    .stats-bar {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(3, auto) !important;
        gap: 8px !important;
        padding: 12px !important;
        margin: 10px 0 !important;
    }

    .stat-item {
        text-align: center !important;
        margin: 0 !important;
        padding: 6px 4px !important;
        background: var(--color-card) !important;
        border-radius: 6px !important;
        border: 1px solid var(--color-card-border) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-height: 50px !important;
    }

    /* Posicionamiento específico para grid 2x3 */
    .stat-item:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    /* Zeni */
    .stat-item:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    /* USDT */
    .stat-item:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
    }

    /* Matches */
    .stat-item:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
    }

    /* Players */
    .stat-item:nth-child(5) {
        grid-column: 1 / 3;
        grid-row: 3;
    }

    /* Total Power - span full width */

    .stat-value {
        font-size: 1.2em !important;
        font-weight: bold !important;
        margin-bottom: 2px !important;
        line-height: 1.1 !important;
    }

    .stat-item>div:last-child {
        font-size: 0.75em !important;
        opacity: 0.8 !important;
        line-height: 1 !important;
    }

    .game-sections {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        margin-bottom: 20px !important;
    }

    .section {
        padding: 15px !important;
        margin-bottom: 15px !important;
    }

    .section h2 {
        font-size: 1.3em !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }

    .btn {
        padding: 12px 20px !important;
        font-size: 1em !important;
        margin: 5px !important;
        width: 100% !important;
        max-width: 300px !important;
    }

    .btn-secondary,
    .btn-primary {
        margin: 5px 0 !important;
    }

    .player-card {
        padding: 12px !important;
        margin: 8px 0 !important;
        flex-direction: column !important;
        text-align: center !important;
    }

    .player-details {
        flex-direction: column !important;
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    .player-face {
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto !important;
    }

    .player-name {
        font-size: 1.1em !important;
        text-align: center !important;
    }

    .player-stats {
        justify-content: center !important;
        gap: 10px !important;
        font-size: 0.85em !important;
    }

    .rarity {
        font-size: 0.8em !important;
        padding: 3px 8px !important;
        margin: 5px auto !important;
        display: inline-block !important;
    }

    /* Modales */
    .modal-content {
        max-width: 95vw !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        padding: 15px !important;
        margin: 10px !important;
    }

    .modal-content h2 {
        font-size: 1.4em !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    /* Fusión */
    .fusion-selection {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .fusion-slot {
        width: 100% !important;
    }

    .fusion-slot label {
        font-size: 1.1em !important;
        text-align: center !important;
        margin-bottom: 8px !important;
    }

    .fusion-player-list {
        max-height: 200px !important;
    }

    .fusion-player-item {
        padding: 8px !important;
        margin: 5px 0 !important;
    }

    .fusion-player-item .player-face {
        width: 40px !important;
        height: 40px !important;
    }

    .fusion-player-item .player-name {
        font-size: 0.9em !important;
    }

    .fusion-player-item .player-stats {
        font-size: 0.75em !important;
        gap: 6px !important;
    }

    .fusion-player-item .rarity {
        font-size: 0.7em !important;
        padding: 2px 6px !important;
    }

    /* Filtro de ordenamiento */
    #playerSortSelect {
        min-width: 100% !important;
        font-size: 0.9em !important;
        padding: 10px !important;
        margin: 10px 0 !important;
    }

    /* Contenedor del filtro en My Players - mobile optimization */
    #teamModal .modal-content>div:nth-child(2)>div:nth-child(2) {
        margin-bottom: 10px !important;
        padding: 10px !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }

    #teamModal .modal-content label[for="playerSortSelect"] {
        font-size: 0.9em !important;
        margin-bottom: 5px !important;
    }

    #teamModal .modal-content #playerSortSelect {
        width: 100% !important;
        min-width: auto !important;
        font-size: 0.85em !important;
        padding: 8px !important;
    }

    /* Miniaturas de jugadores - 2 por fila en móviles */
    #playerList {
        padding: 8px !important;
    }

    /* Sobreescribir el flexbox inline del JavaScript */
    #playerList>div {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: flex-start !important;
        padding: 5px !important;
    }

    .player-select-card {
        width: calc(50% - 4px) !important;
        max-width: 170px !important;
        padding: 8px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }

    .player-select-card img {
        width: 60px !important;
        height: 60px !important;
    }

    .player-select-card span {
        font-size: 0.85em !important;
        line-height: 1.2 !important;
    }

    .player-select-card div {
        font-size: 0.75em !important;
        padding: 2px 4px !important;
        margin: 2px 0 !important;
    }

    /* Mint Modal */
    #mintModal .modal-content {
        max-width: 92vw !important;
        max-height: 85vh !important;
        padding: 12px !important;
        margin: 10px auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #mintModal .player-name {
        font-size: 1.1em !important;
    }

    #mintModal .player-face {
        width: 64px !important;
        height: 64px !important;
    }

    #mintModal .new-player-reveal {
        padding: 8px !important;
    }

    /* Hacer que las acciones del mint se vean siempre y evitar scroll para llegar al botón */
    /* Optimización completa del mint modal para móviles */
    @media (max-width: 480px),
    (max-height: 740px) {
        #mintModal .modal-content {
            width: 95vw !important;
            height: auto !important;
            max-height: 90vh !important;
            padding: 10px !important;
            margin: 5vh auto !important;
            overflow-y: auto !important;
            display: flex !important;
            flex-direction: column !important;
        }

        #mintModal h2 {
            font-size: 1.1em !important;
            margin: 0 0 8px 0 !important;
            text-align: center !important;
        }

        #mintModal #newPlayerInfo {
            flex: 1 !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 6px !important;
            margin: 0 !important;
        }

        #mintModal .player-face {
            width: 70px !important;
            height: 70px !important;
            border-radius: 6px !important;
            object-fit: contain !important;
        }

        #mintModal .player-name {
            font-size: 1.3em !important;
            margin: 5px 0 !important;
            text-align: center !important;
            line-height: 1.2 !important;
            word-wrap: break-word !important;
            overflow-wrap: break-word !important;
            max-width: 100% !important;
            width: 100% !important;
        }

        #mintModal .rarity {
            font-size: 0.9em !important;
            padding: 3px 6px !important;
            margin: 3px 0 !important;
        }

        #mintModal .player-stats,
        #mintModal #newPlayerInfo>div:last-child {
            font-size: 0.9em !important;
            text-align: center !important;
            margin: 3px 0 !important;
            line-height: 1.1 !important;
        }

        /* Botonera en fila horizontal para evitar scroll */
        #mintModal #newPlayerActions {
            margin-top: 10px !important;
            display: flex !important;
            flex-direction: row !important;
            gap: 8px !important;
            flex-shrink: 0 !important;
            justify-content: center !important;
        }

        #mintModal #newPlayerActions .btn {
            flex: 1 !important;
            max-width: calc(50% - 4px) !important;
            margin: 0 !important;
            padding: 8px 6px !important;
            font-size: 0.9em !important;
            text-align: center !important;
            white-space: nowrap !important;
        }
    }

    /* Optimización adicional para pantallas muy pequeñas en altura */
    @media (max-height: 600px) {
        #mintModal .modal-content {
            max-height: 95vh !important;
            padding: 8px !important;
            margin: 2.5vh auto !important;
        }

        #mintModal h2 {
            font-size: 1em !important;
            margin: 0 0 6px 0 !important;
        }

        #mintModal #newPlayerInfo {
            gap: 4px !important;
        }

        #mintModal .player-face {
            width: 60px !important;
            height: 60px !important;
        }

        #mintModal .player-name {
            font-size: 1.1em !important;
            margin: 4px 0 !important;
            text-align: center !important;
            line-height: 1.2 !important;
            word-wrap: break-word !important;
            overflow-wrap: break-word !important;
            max-width: 100% !important;
            width: 100% !important;
        }

        #mintModal .rarity {
            font-size: 0.8em !important;
            padding: 2px 4px !important;
            margin: 2px 0 !important;
        }

        #mintModal .player-stats,
        #mintModal #newPlayerInfo>div:last-child {
            font-size: 0.8em !important;
            margin: 2px 0 !important;
        }

        #mintModal #newPlayerActions {
            margin-top: 8px !important;
        }

        #mintModal #newPlayerActions .btn {
            padding: 6px 4px !important;
            font-size: 0.8em !important;
        }
    }

    #mintModal .player-info {
        text-align: center !important;
        margin: 10px 0 !important;
    }

    #mintModal .player-stats {
        flex-direction: column !important;
        gap: 5px !important;
        text-align: center !important;
    }

    #mintModal .rarity {
        margin: 5px auto !important;
        display: inline-block !important;
    }

    #mintModal .mint-container {
        margin: 5px !important;
    }

    #mintModal .mint-chances {
        font-size: 0.8em !important;
        width: 120px !important;
    }

    /* Team Modal */
    #teamModal .modal-content {
        padding: 10px !important;
    }

    #teamModal .player-list {
        max-height: 60vh !important;
        padding: 10px !important;
    }

    /* Notificaciones */
    .notifications {
        top: 10px !important;
        right: 10px !important;
        left: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        width: auto !important;
        z-index: 20000 !important;
    }

    .notification {
        font-size: 0.9em !important;
        padding: 10px !important;
        margin: 0 !important;
        position: static !important;
        border-radius: 5px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
        animation: slideIn 0.3s ease-out !important;
        width: 100% !important;
        box-sizing: border-box !important;
        white-space: pre-line !important;
        line-height: 1.4 !important;
    }

    /* Match Display */
    .match-display {
        padding: 15px !important;
    }

    .score {
        font-size: 2.5em !important;
        margin: 15px 0 !important;
    }

    .match-log {
        max-height: 150px !important;
        font-size: 0.85em !important;
        padding: 8px !important;
    }

    /* ROI Details */
    .roi-details {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .roi-details-item {
        text-align: center !important;
    }

    /* Leaderboard */
    #leaderboard-section {
        padding: 15px !important;
    }

    #leaderboard-list li {
        padding: 10px !important;
        font-size: 0.9em !important;
    }

    .leaderboard-pos {
        font-size: 1.2em !important;
    }

    .leaderboard-user {
        font-size: 0.9em !important;
    }

    .leaderboard-power {
        font-size: 0.8em !important;
    }


}

/* Móviles pequeños (hasta 480px) */
@media (max-width: 480px) {
    body {
        padding: 5px !important;
        font-size: 13px !important;
    }

    h1 {
        font-size: 1.4em !important;
    }

    .btn {
        padding: 10px 15px !important;
        font-size: 0.9em !important;
    }

    .player-select-card {
        width: 120px !important;
        padding: 8px !important;
        margin: 5px !important;
    }

    .player-select-card img {
        width: 50px !important;
        height: 50px !important;
    }

    .fusion-player-item .player-face {
        width: 35px !important;
        height: 35px !important;
    }

    .fusion-player-item .player-name {
        font-size: 0.8em !important;
    }

    .fusion-player-item .player-stats {
        font-size: 0.7em !important;
        gap: 4px !important;
    }

    .modal-content {
        max-width: 98vw !important;
        max-height: 95vh !important;
        padding: 10px !important;
        margin: 5px !important;
    }

    .stat-value {
        font-size: 1.2em !important;
    }

    .score {
        font-size: 2em !important;
    }
}

/* Orientación landscape en móviles */
@media (max-width: 768px) and (orientation: landscape) {
    .header-container {
        flex-direction: row !important;
        gap: 10px !important;
    }

    /* Stats bar removed - handled in mobile media query */

    .game-sections {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .section {
        padding: 10px !important;
    }

    .player-card {
        flex-direction: row !important;
        text-align: left !important;
    }

    .player-details {
        flex-direction: row !important;
        gap: 10px !important;
    }

    .modal-content {
        max-height: 80vh !important;
    }
}

/* Mejoras adicionales para tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .tab-buttons {
        flex-wrap: wrap;
        gap: 10px;
    }

    .tab-btn {
        padding: 12px 20px;
        font-size: 1em;
    }

    .btn {
        padding: 12px 24px;
        font-size: 1.1em;
    }

    .player-select-card {
        width: 170px;
        padding: 16px;
    }

    .player-select-card img {
        width: 85px;
        height: 85px;
    }
}

/* Mejoras para pantallas muy grandes */
@media (min-width: 1200px) {
    .container {
        max-width: 1400px;
    }

    .game-sections {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 25px;
    }

    .player-select-card {
        width: 200px;
        padding: 20px;
    }

    .player-select-card img {
        width: 100px;
        height: 100px;
    }
}

/* Mejoras para dispositivos con pantalla táctil */
@media (hover: none) and (pointer: coarse) {
    .btn {
        min-height: 44px !important;
        padding: 12px 20px !important;
    }

    .tab-btn {
        min-height: 44px !important;
        padding: 12px 20px !important;
    }

    .player-select-card {
        cursor: pointer !important;
    }

    .player-select-card:hover {
        transform: none !important;
    }

    .player-select-card:active {
        transform: scale(0.98) !important;
    }

    .fusion-player-item {
        min-height: 44px !important;
        padding: 10px !important;
    }

    .modal-content {
        padding: 20px !important;
    }

    .modal-content button {
        min-height: 44px !important;
    }
}

/* Regla de emergencia para forzar responsive */
@media (max-width: 768px) {
    * {
        box-sizing: border-box !important;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }

    .game-sections {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .section {
        width: 100% !important;
        margin: 0 0 15px 0 !important;
    }

    .btn {
        display: block !important;
        width: 100% !important;
        margin: 5px 0 !important;
    }

    .modal {
        width: 100% !important;
        height: 100% !important;
    }

    .modal-content {
        width: 95% !important;
        max-width: 95vw !important;
        margin: 10px auto !important;
    }
}

/* Reglas finales de prioridad máxima para responsive */
@media (max-width: 768px) {

    /* Forzar layout responsive */
    body {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    /* Contenedor principal */
    #game-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 8px !important;
        margin: 0 !important;
    }

    /* Header */
    .header-container {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 10px !important;
    }

    h1 {
        font-size: 1.8em !important;
        text-align: center !important;
        margin: 0 !important;
    }

    /* Stats bar - removed, handled in main mobile media query */

    .stat-item {
        margin: 5px 0 !important;
        padding: 8px !important;
    }

    /* Game sections */
    .game-sections {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 10px 0 !important;
    }

    .section {
        width: 100% !important;
        padding: 15px !important;
        margin: 0 0 10px 0 !important;
    }

    /* Botones */
    .btn {
        display: block !important;
        width: 100% !important;
        margin: 5px 0 !important;
        padding: 12px 15px !important;
        font-size: 1em !important;
    }

    /* Player cards */
    .player-card {
        flex-direction: column !important;
        text-align: center !important;
        padding: 10px !important;
        margin: 5px 0 !important;
    }

    .player-details {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .player-face {
        width: 50px !important;
        height: 50px !important;
        margin: 0 auto !important;
    }

    .player-name {
        font-size: 1em !important;
        text-align: center !important;
    }

    .player-stats {
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.8em !important;
    }

    /* Modales */
    .modal {
        width: 100% !important;
        height: 100% !important;
    }

    .modal-content {
        width: 95% !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        margin: 10px auto !important;
        padding: 15px !important;
    }

    /* Tabs */
    .tab-buttons {
        flex-wrap: wrap !important;
        gap: 5px !important;
    }

    .tab-btn {
        padding: 8px 12px !important;
        font-size: 0.9em !important;
        margin: 2px !important;
    }

    /* Player select cards - optimizado para 2 por fila */
    #playerList {
        padding: 5px !important;
    }

    /* Sobreescribir estilos inline del JavaScript */
    #playerList>div {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: flex-start !important;
        padding: 3px !important;
    }

    .player-select-card {
        width: calc(50% - 3px) !important;
        max-width: 150px !important;
        padding: 6px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }

    .player-select-card img {
        width: 50px !important;
        height: 50px !important;
    }

    .player-select-card span {
        font-size: 0.75em !important;
        line-height: 1.1 !important;
    }

    .player-select-card div {
        font-size: 0.65em !important;
        padding: 1px 3px !important;
        margin: 1px 0 !important;
    }

    /* Mint Modal optimizado para móviles - CONSOLIDADO */
    #mintModal .modal-content {
        max-width: 95vw !important;
        max-height: 95vh !important;
        padding: 15px !important;
        margin: 2.5vh auto !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
}

/* Móviles muy pequeños */
@media (max-width: 480px) {
    .container {
        padding: 0 5px !important;
    }

    .section {
        padding: 10px !important;
    }

    .btn {
        padding: 10px 12px !important;
        font-size: 0.9em !important;
    }

    /* Player select cards - 2 por fila en móviles muy pequeños */
    #playerList>div {
        gap: 4px !important;
        padding: 2px !important;
    }

    .player-select-card {
        width: calc(50% - 2px) !important;
        max-width: 130px !important;
        padding: 4px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }

    .player-select-card img {
        width: 45px !important;
        height: 45px !important;
    }

    .player-select-card span {
        font-size: 0.7em !important;
        line-height: 1 !important;
    }

    .player-select-card div {
        font-size: 0.6em !important;
        padding: 1px 2px !important;
        margin: 1px 0 !important;
    }

    .modal-content {
        width: 98% !important;
        padding: 10px !important;
    }

    /* Mint Modal específico para móviles pequeños - SIMPLIFICADO */
    #mintModal .player-face {
        width: 70px !important;
        height: 70px !important;
    }

    #mintModal .player-name {
        font-size: 1.1em !important;
    }

    #mintModal .rarity {
        font-size: 0.9em !important;
        padding: 3px 6px !important;
    }
}

#landing-page {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('https://cryptobasket.org/dbz-basketball-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1000;
}



.landing-content {
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.landing-logo {
    margin-bottom: 20px;
    animation: logoFloat 3s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

.main-logo {
    width: 280px;
    height: auto;
    max-width: 100%;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
    position: relative;
    z-index: 1;
}

/* PREVENIR FLICKER DEL LOGO EN MÓVILES - APLICAR INMEDIATAMENTE */
@media (max-width: 768px) {
    .main-logo {
        max-width: 220px !important;
        width: 220px !important;
    }
}

@media (max-width: 480px) {
    .main-logo {
        max-width: 200px !important;
        width: 200px !important;
    }
}

.main-logo:hover {
    transform: scale(1.08) rotate(2deg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.4));
}

@keyframes logoFloat {

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

    25% {
        transform: translateY(-8px) rotate(1deg);
    }

    50% {
        transform: translateY(-12px) rotate(0deg);
    }

    75% {
        transform: translateY(-8px) rotate(-1deg);
    }
}

#landing-page h1 {
    font-size: 4.5em;
    margin-bottom: 20px;
    color: #ffd700;
    position: relative;
    z-index: 1;
}

#landing-page p {
    font-size: 1.5em;
    margin-bottom: 40px;
    opacity: 0.9;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

#play-now-btn {
    padding: 15px 40px;
    font-size: 1.2em;
    background: var(--color-btn);
    position: relative;
    z-index: 1;
}

#play-now-btn:hover {
    background: var(--color-btn-hover);
    position: relative;
    z-index: 1;
}

.auth-container {
    max-width: 400px;
    text-align: center;
}

.auth-container h2 {
    color: #ffd700;
    margin-bottom: 25px;
}

.auth-container form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.auth-container input {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--color-input-border);
    font-size: 1em;
    background: var(--color-input-bg);
    color: var(--color-text);
}

.auth-container input:focus {
    outline: none;
    box-shadow: 0 0 10px #ffd700;
    border: 1.5px solid var(--color-primary);
}

.auth-container button {
    margin-top: 10px;
}

.auth-container p {
    margin-top: 20px;
    opacity: 0.8;
}

.auth-container a {
    color: #ffd700;
    font-weight: bold;
    text-decoration: none;
}

.auth-container a:hover {
    text-decoration: underline;
}

.auth-error {
    color: #e74c3c;
    margin-top: 15px;
    font-weight: bold;
    min-height: 20px;
}

.auth-success {
    color: #2ecc71;
    margin-top: 15px;
    font-weight: bold;
    min-height: 20px;
}


/* Botón verde fijo para 'Jugar Ahora' y login */
#play-now-btn,
.btn-login,
.btn-fixed-green {
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(60, 60, 100, 0.10);
    font-weight: 700;
    transition: background 0.2s;
}

#play-now-btn:hover,
.btn-login:hover,
.btn-fixed-green:hover {
    background: linear-gradient(45deg, #16a34a, #22c55e) !important;
}

/* Botones Leaderboard y Referrals - Responsive al tema */
#openLeaderboardBtn,
.btn-leaderboard,
#open-referral-modal-btn {
    box-shadow: 0 2px 8px rgba(60, 60, 100, 0.10);
    font-weight: 700;
    transition: background 0.2s;
    border: none !important;
    color: #fff !important;
}

/* Tema claro: botones AZULES como MY PLAYERS - MAYOR ESPECIFICIDAD */
body:not([data-theme="dark"]) .auxiliary-buttons-container #openLeaderboardBtn,
body:not([data-theme="dark"]) .auxiliary-buttons-container .btn-leaderboard,
body:not([data-theme="dark"]) .auxiliary-buttons-container #open-referral-modal-btn,
body:not([data-theme="dark"]) #openLeaderboardBtn,
body:not([data-theme="dark"]) .btn-leaderboard,
body:not([data-theme="dark"]) #open-referral-modal-btn {
    background: var(--color-btn-fixed) !important;
}

body:not([data-theme="dark"]) .auxiliary-buttons-container #openLeaderboardBtn:hover,
body:not([data-theme="dark"]) .auxiliary-buttons-container .btn-leaderboard:hover,
body:not([data-theme="dark"]) .auxiliary-buttons-container #open-referral-modal-btn:hover,
body:not([data-theme="dark"]) #openLeaderboardBtn:hover,
body:not([data-theme="dark"]) .btn-leaderboard:hover,
body:not([data-theme="dark"]) #open-referral-modal-btn:hover {
    background: var(--color-btn-fixed-hover) !important;
}

/* Tema oscuro: botones verdes como MY PLAYERS - MAYOR ESPECIFICIDAD */
body[data-theme="dark"] .auxiliary-buttons-container #openLeaderboardBtn,
body[data-theme="dark"] .auxiliary-buttons-container .btn-leaderboard,
body[data-theme="dark"] .auxiliary-buttons-container #open-referral-modal-btn,
body[data-theme="dark"] #openLeaderboardBtn,
body[data-theme="dark"] .btn-leaderboard,
body[data-theme="dark"] #open-referral-modal-btn {
    background: linear-gradient(45deg, #22c55e, #16a34a) !important;
}

body[data-theme="dark"] .auxiliary-buttons-container #openLeaderboardBtn:hover,
body[data-theme="dark"] .auxiliary-buttons-container .btn-leaderboard:hover,
body[data-theme="dark"] .auxiliary-buttons-container #open-referral-modal-btn:hover,
body[data-theme="dark"] #openLeaderboardBtn:hover,
body[data-theme="dark"] .btn-leaderboard:hover,
body[data-theme="dark"] #open-referral-modal-btn:hover {
    background: linear-gradient(45deg, #16a34a, #22c55e) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4) !important;
}

/* Botón azul fijo para Jugar Partido */
.btn-primary {
    background: var(--color-btn) !important;
}

.btn-primary:hover {
    background: var(--color-btn-hover) !important;
}

/* Restaurar colores de rareza originales */
.rarity-common {
    background: #7f8c8d !important;
    color: #fff !important;
    border: none !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
}

.rarity-uncommon {
    background: #27ae60 !important;
    color: #fff !important;
    border: none !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
}

.rarity-rare {
    background: #2980b9 !important;
    color: #fff !important;
    border: none !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
}

.rarity-epic {
    background: #8e44ad !important;
    color: #fff !important;
    border: none !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
}

.rarity-legendary {
    background: #f39c12 !important;
    color: #23272f !important;
    border: none !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
}

/* Corregir ventana de login para modo claro y oscuro */
.auth-container,
.modal-content.auth-container {
    background: var(--color-card) !important;
    color: var(--color-text) !important;
    border: 1.5px solid var(--color-card-border) !important;
    box-shadow: var(--color-card-shadow) !important;
}

.match-display {
    background: #fff !important;
    color: #23272f !important;
}

.match-display .match-log {
    background: #e9eaf3 !important;
    color: #23272f !important;
}

body[data-theme="dark"] .match-display {
    background: #232b3e !important;
    color: #f5f6fa !important;
}

body[data-theme="dark"] .match-display .match-log {
    background: #232b3e !important;
    color: #b0b8c9 !important;
}

.score {
    color: #2563eb !important;
}

body[data-theme="dark"] .score {
    color: #22c55e !important;
}

/* Tarjeta de jugador grande */
.player-card-large {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    min-height: 500px;
    padding: 24px 32px;
    gap: 80px;
}

.player-card-large .player-face,
.player-face-large,
#mintModal .player-face {
    width: 460px !important;
    height: 460px !important;
    min-width: 460px !important;
    min-height: 460px !important;
    border-radius: 24px;
    object-fit: contain;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
    background: #222c3a;
    border: 3px solid #fff;
    margin: 0;
    display: block;
}

.player-card-large .player-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    align-items: flex-start;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.player-card-large .player-info {
    align-items: flex-start;
    text-align: left;
}

.player-card .player-face {
    width: 80px !important;
    height: 80px !important;
    border-radius: 10px;
    object-fit: contain;
}

#teamModal .modal-content {
    max-height: 90vh !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
}

#teamModal .player-list {
    flex: 1 1 auto;
    max-height: 70vh;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: visible;
    margin-bottom: 0;
}

#teamModal {
    align-items: flex-start !important;
}

/* Mint modal - estilos adicionales removidos para evitar conflictos */
#teamModal .modal-content {
    max-width: 900px !important;
    width: 90vw !important;
    padding: 28px 24px !important;
    background: var(--color-card) !important;
    color: var(--color-text) !important;
    border-radius: 12px !important;
    box-shadow: var(--color-card-shadow) !important;
    border: 1.5px solid var(--color-card-border) !important;
}

#teamModal .player-list {
    overflow-x: hidden !important;
}

body,
html {
    overflow-x: hidden !important;
}

/* MODALES CENTRADOS Y MODERNOS */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    background: rgba(0, 0, 0, 0.55);
    justify-content: center;
    align-items: center;
}

.modal.show {
    display: flex !important;
}

.modal-content {
    background: #181818;
    color: #ffd700;
    margin: auto;
    border-radius: 18px;
    padding: 32px 32px 24px 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    max-width: 95vw;
    min-width: 350px;
    width: 520px;
    position: relative;
    border: 2px solid #ffd700;
    font-size: 1.08em;
}

.modal-content h2,
.modal-content h3 {
    color: #ffd700;
    margin-top: 0;
}

.modal-content input,
.modal-content select {
    background: #222;
    color: #ffd700;
    border: 1px solid #ffd700;
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 6px;
    margin-bottom: 10px;
    width: 100%;
}

.modal-content button.btn {
    background: linear-gradient(90deg, #ffd700 60%, #bfa100 100%);
    color: #222;
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    font-weight: bold;
    font-size: 1.08em;
    margin-top: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

/* When light theme is active, body text inside modals should be black (keep headings/buttons styles) */
body:not([data-theme="dark"]) .modal-content {
    color: #000 !important;
}

body:not([data-theme="dark"]) .modal-content input,
body:not([data-theme="dark"]) .modal-content select,
body:not([data-theme="dark"]) .modal-content textarea {
    color: #000 !important;
    border-color: #bbb;
}

/* Light theme: force all non-heading, non-button text to black globally */
body:not([data-theme="dark"]) :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(button):not(.btn) {
    color: #000 !important;
}

/* Ensure labels in light theme are black even if themed elsewhere */
body:not([data-theme="dark"]) label {
    color: #000 !important;
}

/* Remove dark backgrounds in Light theme */
body:not([data-theme="dark"]) .modal-content {
    background: #ffffff !important;
    border-color: #dddddd !important;
}

body:not([data-theme="dark"]) .modal-content input,
body:not([data-theme="dark"]) .modal-content select,
body:not([data-theme="dark"]) .modal-content textarea {
    background: #ffffff !important;
    color: #000 !important;
    border-color: #bbbbbb !important;
}

/* Light theme: Fusion modal specific styles */
body:not([data-theme="dark"]) #fusionModal .modal-content {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
    border-color: #ffd700 !important;
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.3), inset 0 0 30px rgba(255, 107, 53, 0.1) !important;
}

body:not([data-theme="dark"]) #fusionModal h2 {
    color: #333 !important;
    text-shadow: none !important;
}

body:not([data-theme="dark"]) #fusionModal p {
    color: #333 !important;
    text-shadow: none !important;
}

body:not([data-theme="dark"]) #fusionModal .fusion-slot {
    background: rgba(255, 215, 0, 0.05) !important;
    border-color: rgba(255, 215, 0, 0.4) !important;
}

body:not([data-theme="dark"]) #fusionModal .fusion-slot label {
    color: #333 !important;
    text-shadow: none !important;
}

body:not([data-theme="dark"]) #fusionModal .fusion-player-list {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(255, 215, 0, 0.3) !important;
}

/* Light theme: Edit Team modal specific styles */
body:not([data-theme="dark"]) #editTeamModal .modal-content {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
    border-color: #ffd700 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
}



/* Estilos específicos para los botones de Mint */
/* Tema claro: botones azules */
body:not([data-theme="dark"]) .btn-gold {
    background: linear-gradient(45deg, #2563eb, #1e40af) !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body:not([data-theme="dark"]) .btn-gold:hover {
    background: linear-gradient(45deg, #1e40af, #2563eb) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4) !important;
}

/* Tema oscuro: botones verdes */
body[data-theme="dark"] .btn-gold {
    background: linear-gradient(45deg, #22c55e, #16a34a) !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body[data-theme="dark"] .btn-gold:hover {
    background: linear-gradient(45deg, #16a34a, #22c55e) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4) !important;
}



/* ULTRA ESPECÍFICO - SOBRESCRIBIR TODO para Edit Team en tema claro */
body:not([data-theme="dark"]) #editTeamModal .modal-content[style*="background"] {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
}

body:not([data-theme="dark"]) #editTeamModal .modal-content[style*="background: linear-gradient(135deg, #1a1a1a"] {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
}

body:not([data-theme="dark"]) #editTeamModal input[type="text"] {
    background: #ffffff !important;
    color: #333 !important;
    border-color: #ccc !important;
}

body:not([data-theme="dark"]) #editTeamModal input[type="text"]:focus {
    border-color: #ffd700 !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3) !important;
}

body:not([data-theme="dark"]) #editTeamModal #editPlayerSelectionList {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: #ccc !important;
}

body:not([data-theme="dark"]) #editTeamModal label {
    color: #ffd700 !important;
}

body:not([data-theme="dark"]) #editTeamModal h3 {
    color: #333 !important;
}

body:not([data-theme="dark"]) #editTeamModal p {
    color: #555 !important;
}

/* Light theme: Edit Team modal scrollbar styles */
body:not([data-theme="dark"]) #editTeamModal #editPlayerSelectionList::-webkit-scrollbar-track {
    background: #f0f0f0 !important;
}

body:not([data-theme="dark"]) #editTeamModal #editPlayerSelectionList::-webkit-scrollbar-thumb {
    background: #ffd700 !important;
}

body:not([data-theme="dark"]) #editTeamModal #editPlayerSelectionList::-webkit-scrollbar-thumb:hover {
    background: #ffed4e !important;
}

/* SOBRESCRIBIR TODOS LOS ESTILOS INLINE del modal Edit Team en tema claro */
body:not([data-theme="dark"]) #editTeamModal .modal-content[style*="background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%)"] {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
}

body:not([data-theme="dark"]) #editTeamModal input[style*="background: #333"] {
    background: #ffffff !important;
    color: #333 !important;
    border-color: #ccc !important;
}

body:not([data-theme="dark"]) #editTeamModal div[style*="background: rgba(0,0,0,0.2)"] {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: #ccc !important;
}

body:not([data-theme="dark"]) #editTeamModal div[style*="background: #333"] {
    background: #ffffff !important;
}

body:not([data-theme="dark"]) #editTeamModal div[style*="color: #ffd700"] {
    color: #ffd700 !important;
}

body:not([data-theme="dark"]) #editTeamModal h3[style*="color: #333"] {
    color: #333 !important;
}

body:not([data-theme="dark"]) #editTeamModal p[style*="color: #555"] {
    color: #555 !important;
}

/* ULTRA AGRESIVO - SOBRESCRIBIR TODO con selectores de atributos específicos */
body:not([data-theme="dark"]) #editTeamModal .modal-content[style*="background"] {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
}

body:not([data-theme="dark"]) #editTeamModal .modal-content[style*="linear-gradient(135deg, #1a1a1a"] {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
}

body:not([data-theme="dark"]) #editTeamModal .modal-content[style*="#1a1a1a"] {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
}

body:not([data-theme="dark"]) #editTeamModal .modal-content[style*="#2d2d2d"] {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
}

/* SOBRESCRIBIR INPUT ESPECÍFICO */
body:not([data-theme="dark"]) #editTeamModal input[name="editTeamName"][style*="background: #333"] {
    background: #ffffff !important;
    color: #333 !important;
    border-color: #ccc !important;
}

/* SOBRESCRIBIR DIV ESPECÍFICO */
body:not([data-theme="dark"]) #editTeamModal div[id="editPlayerSelectionList"][style*="background: rgba(0,0,0,0.2)"] {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: #ccc !important;
}

/* NUCLEAR - SOBRESCRIBIR TODO con máxima especificidad */
body:not([data-theme="dark"]) #editTeamModal .modal-content {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
}

body:not([data-theme="dark"]) #editTeamModal .modal-content[style] {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
}

/* FORZAR SOBRESCRITURA con JavaScript después de la carga */
body:not([data-theme="dark"]) #editTeamModal .modal-content {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
}

/* FINAL NUCLEAR - SOBRESCRIBIR TODO con máxima prioridad */
body:not([data-theme="dark"]) #editTeamModal .modal-content,
body:not([data-theme="dark"]) #editTeamModal .modal-content[style],
body:not([data-theme="dark"]) #editTeamModal .modal-content[style*="background"],
body:not([data-theme="dark"]) #editTeamModal .modal-content[style*="linear-gradient"],
body:not([data-theme="dark"]) #editTeamModal .modal-content[style*="#1a1a1a"],
body:not([data-theme="dark"]) #editTeamModal .modal-content[style*="#2d2d2d"] {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
    background-image: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
}

/* ESTRATEGIA NUCLEAR FINAL - Usar :not() para máxima especificidad */
body:not([data-theme="dark"]) #editTeamModal .modal-content:not([data-theme="dark"]) {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
    background-image: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
}

/* SOBRESCRIBIR CON ATRIBUTOS DE ESTILO ESPECÍFICOS */
body:not([data-theme="dark"]) #editTeamModal .modal-content[style*="background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%)"] {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
    background-image: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
}

/* FORZAR SOBRESCRITURA CON MÁXIMA PRIORIDAD */
body:not([data-theme="dark"]) #editTeamModal .modal-content {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
    background-image: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
}

/* ESTRATEGIA FINAL - Usar selectores de máxima especificidad */
body:not([data-theme="dark"]) #editTeamModal .modal-content,
body:not([data-theme="dark"]) #editTeamModal .modal-content[style*="background"],
body:not([data-theme="dark"]) #editTeamModal .modal-content[style*="linear-gradient"],
body:not([data-theme="dark"]) #editTeamModal .modal-content[style*="#1a1a1a"],
body:not([data-theme="dark"]) #editTeamModal .modal-content[style*="#2d2d2d"],
body:not([data-theme="dark"]) #editTeamModal .modal-content[style*="background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%)"] {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
    background-image: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
}

/* SOBRESCRIBIR TODOS LOS ELEMENTOS INTERNOS del modal Edit Team */
body:not([data-theme="dark"]) #editTeamModal input[style*="background: #333"] {
    background: #ffffff !important;
    color: #333 !important;
    border-color: #ccc !important;
}

body:not([data-theme="dark"]) #editTeamModal div[style*="background: rgba(0,0,0,0.2)"] {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: #ccc !important;
}

body:not([data-theme="dark"]) #editTeamModal div[style*="background: #333"] {
    background: #ffffff !important;
}

/* ESTRATEGIA NUCLEAR FINAL - Usar JavaScript para sobrescribir estilos inline */
body:not([data-theme="dark"]) #editTeamModal .modal-content {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
    background-image: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
}

/* SOBRESCRIBIR CON MÁXIMA PRIORIDAD usando selectores de atributos específicos */
body:not([data-theme="dark"]) #editTeamModal .modal-content[style*="background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%)"] {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
    background-image: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
}

/* FORZAR SOBRESCRITURA con selectores de máxima especificidad */
body:not([data-theme="dark"]) #editTeamModal .modal-content[style] {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
    background-image: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
}

/* Estilos para la clase edit-team-modal-content */
.edit-team-modal-content {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

/* Tema claro para edit-team-modal-content */
body:not([data-theme="dark"]) .edit-team-modal-content {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
    background-image: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
}

/* ULTRA ESPECÍFICO - SOBRESCRIBIR TODO para Edit Team en tema claro */
body:not([data-theme="dark"]) #editTeamModal .edit-team-modal-content {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
    background-image: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
}

body:not([data-theme="dark"]) #editTeamModal .modal-content.edit-team-modal-content {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
    background-image: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
}

/* FORZAR SOBRESCRITURA con máxima especificidad */
body:not([data-theme="dark"]) #editTeamModal .modal-content.edit-team-modal-content {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
    background-image: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
}

/* NUCLEAR FINAL - SOBRESCRIBIR TODO con máxima prioridad */
body:not([data-theme="dark"]) #editTeamModal .modal-content.edit-team-modal-content,
body:not([data-theme="dark"]) #editTeamModal .edit-team-modal-content,
body:not([data-theme="dark"]) #editTeamModal .modal-content {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
    background-image: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
}

/* SOBRESCRIBIR TODOS LOS POSIBLES ESTILOS */
body:not([data-theme="dark"]) #editTeamModal .modal-content.edit-team-modal-content {
    background: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
    background-image: linear-gradient(135deg, #ffffff, #f8f9fa, #e9ecef) !important;
    background-color: #ffffff !important;
}

/* Global input/select background in Light */
body:not([data-theme="dark"]) input,
body:not([data-theme="dark"]) select,
body:not([data-theme="dark"]) textarea {
    background: #ffffff !important;
    color: #000 !important;
    border: 1px solid #bbbbbb;
}

/* Player cards inside modals use light surface */
body:not([data-theme="dark"]) .modal-content .player-card,
body:not([data-theme="dark"]) .player-select-card {
    background: #f8fafc !important;
    color: #000 !important;
    border-color: #e5e7eb !important;
}

/* Ensure initial render is light even before theme JS runs */
@media (prefers-color-scheme: light) {

    .modal-content .player-card,
    .player-select-card {
        background: #f8fafc !important;
        color: #000 !important;
        border-color: #e5e7eb !important;
    }
}

.modal-content button.btn:hover {
    background: linear-gradient(90deg, #ffe066 60%, #bfa100 100%);
}

/* Estilos para los botones de filtro de rarezas */
.rarity-filter-btn {
    transition: all 0.3s ease !important;
}

.rarity-filter-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important;
}

.rarity-filter-btn.active {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Efectos hover para las tarjetas de jugadores */
.player-select-card:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4) !important;
    border-color: #ffd700 !important;
}

.player-select-card input[type="checkbox"]:checked+img {
    border-color: #ffd700 !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
}

/* Estilos para el selector de idioma en la landing page */
.landing-header {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 1002 !important;
    pointer-events: auto !important;
}

.landing-lang-selector {
    display: flex;
    gap: 8px;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 12px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.landing-lang-selector img {
    width: 35px;
    height: 25px;
    cursor: pointer;
    border-radius: 4px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 2px solid transparent;
}

.landing-lang-selector img:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.landing-lang-selector img.active {
    border-color: var(--color-accent);
    box-shadow: 0 0 8px var(--color-accent);
}

/* Estilos para modo oscuro */
body[data-theme="dark"] .landing-lang-selector {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Estilos para las Ligas */
.leagues-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
    max-width: 100%;
    overflow-x: hidden;
    align-items: start;
}

.league-card {
    background: #ffffff;
    border: 1px solid #e3e3e3;
    border-radius: 15px;
    padding: 20px 20px 25px 20px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 360px;
    max-height: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #222;
}

.league-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.6);
}

.league-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
    transition: left 0.5s;
}

.league-card:hover::before {
    left: 100%;
}

.league-name {
    font-size: 1.4em;
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.league-description {
    color: var(--color-secondary-text);
    margin-bottom: 15px;
    font-size: 0.9em;
    line-height: 1.4;
}

.league-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
    flex-grow: 1;
}

.league-stat {
    background: rgba(0, 0, 0, 0.2);
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.league-stat-label {
    font-size: 0.8em;
    color: var(--color-secondary-text);
    margin-bottom: 4px;
}

.league-stat-value {
    font-size: 1.1em;
    font-weight: bold;
    color: #ffd700;
}

.league-button {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #ffd700 0%, #bfa100 100%);
    color: #222;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.1em;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: auto;
}

.league-button:hover {
    background: linear-gradient(135deg, #ffe066 0%, #ffd700 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
}

.league-button:disabled {
    background: #555;
    color: #999;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.league-cooldown {
    font-size: 0.9em;
    color: #e74c3c;
    margin-top: 8px;
    margin-bottom: 10px;
    font-weight: bold;
    padding-bottom: 5px;
}

/* Modal de selección de equipo para ligas */
#leagueTeamModal .modal-content {
    max-width: 600px;
}

.team-selection-list {
    max-height: 400px;
    overflow-y: auto;
    margin: 20px 0;
}

.team-selection-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin-bottom: 10px;
    background: #ffffff;
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #222;
}

.team-selection-item:hover {
    border-color: rgba(255, 215, 0, 0.5);
    background: rgba(255, 215, 0, 0.12);
}

.team-selection-item.selected {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.22);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.25);
}

.team-selection-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(255, 0, 0, 0.1);
    border-color: rgba(255, 0, 0, 0.3);
}

.team-info {
    flex: 1;
}

.team-name {
    font-size: 1.2em;
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 5px;
}

.team-stats {
    font-size: 0.9em;
    color: var(--color-secondary-text);
}

.team-cooldown {
    color: #e74c3c;
    font-weight: bold;
}

/* Estilos para modo oscuro */
body[data-theme="dark"] .league-card {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(255, 215, 0, 0.02) 100%);
    border-color: rgba(255, 215, 0, 0.2);
    color: #fff;
}

body[data-theme="dark"] .league-stat {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 215, 0, 0.1);
}

body[data-theme="dark"] .team-selection-item {
    background: rgba(255, 255, 255, 0.05);
}

body[data-theme="dark"] .team-selection-item:hover {
    background: rgba(255, 215, 0, 0.05);
}

body[data-theme="dark"] .team-selection-item.selected {
    background: rgba(255, 215, 0, 0.1);
}

/* Asegurar que el modal de selección de equipos tenga tema oscuro */
body[data-theme="dark"] #leagueTeamModal .modal-content {
    background: var(--color-card);
    color: var(--color-text);
}

body[data-theme="dark"] .team-selection-list {
    background: transparent;
}

body[data-theme="dark"] .team-name {
    color: var(--color-text);
}

body[data-theme="dark"] .team-stats {
    color: var(--color-secondary-text);
}

.league-refresh-button {
    text-align: center;
    margin-bottom: 20px;
    padding: 10px;
}

.league-refresh-button button {
    background: var(--color-btn-secondary) !important;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.league-refresh-button button:hover {
    background: var(--color-btn-secondary-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#gameCenterModal .modal-content {
    max-width: 800px !important;
    width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#gameCenterModal .match-display {
    text-align: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin: 20px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#gameCenterModal .match-title {
    font-size: 1.5em;
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 15px;
}

#gameCenterModal .score-display {
    font-size: 3em;
    font-weight: bold;
    color: #00ff00;
    margin: 15px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

#gameCenterModal .time-display {
    font-size: 1.2em;
    color: #ffd700;
    margin: 10px 0;
}

#gameCenterModal .match-log {
    max-height: 300px;
    overflow-y: auto;
    text-align: left;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    margin-top: 15px;
    margin-bottom: 20px;
}

#gameCenterModal .match-log div {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
}

#closeGameCenterModalBtn {
    margin-top: 20px;
    display: none;
    flex-shrink: 0;
}

.btn-team-disabled {
    background: #888 !important;
    color: #ccc !important;
    border: none !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

/* Estilos para el temporizador de cooldown */
.cooldown-timer {
    margin: 10px 0;
    text-align: center;
}

.cooldown-text {
    color: #ff6b6b;
    font-weight: bold;
    margin-bottom: 5px;
}

.timer-display {
    font-family: 'Courier New', monospace;
    font-size: 1.2em;
    font-weight: bold;
    color: #ffd700;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 12px;
    border-radius: 5px;
    border: 1px solid #ffd700;
    display: inline-block;
}

/* Estilos para las tarjetas de equipo */
.team-card {
    background: #ffffff;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
    color: #222;
}

body[data-theme="dark"] .team-card {
    background: #222;
    border: 1px solid #444;
    color: #fff;
}

.team-header {
    font-size: 1.3em;
    font-weight: bold;
    color: #00ff00;
    margin-bottom: 10px;
}

.team-stats {
    margin: 10px 0;
}

.team-stat {
    margin: 5px 0;
}

.stat-label {
    font-weight: bold;
    color: #ccc;
}

.stat-value {
    color: #ffd700;
    font-weight: bold;
}

.team-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
}

.btn-edit,
.btn-delete {
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    transition: all 0.3s ease;
}

.btn-edit {
    background: #3498db;
    color: #fff;
}

.btn-delete {
    background: #e74c3c;
    color: #fff;
}

.btn-team-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.btn-team-disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Estilos para el estado de los equipos */
.status-available {
    color: #22c55e !important;
    font-weight: bold;
}

.status-cooldown {
    color: #f59e0b !important;
    font-weight: bold;
}

/* Mejoras para el temporizador de cooldown */
.cooldown-timer {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    margin: 8px 0;
    text-align: center;
}

.cooldown-text {
    font-size: 0.9em;
    color: #f59e0b;
    font-weight: 500;
    margin-bottom: 4px;
}

.timer-display {
    font-family: 'Courier New', monospace;
    font-size: 1.1em;
    font-weight: bold;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    min-width: 80px;
}

/* Estilos para el historial de partidos de liga */
#matchHistoryList {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    max-height: 600px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) var(--color-card-border);
}

/* Estilos para la barra de scroll personalizada */
#matchHistoryList::-webkit-scrollbar {
    width: 8px;
}

#matchHistoryList::-webkit-scrollbar-track {
    background: var(--color-card-border);
    border-radius: 4px;
}

#matchHistoryList::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 4px;
}

#matchHistoryList::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

.history-item {
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    text-align: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.9em;
}

.history-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.history-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
    gap: 15px;
    flex-wrap: wrap;
}

.history-result {
    font-weight: bold;
    font-size: 1em;
    padding: 6px 12px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.history-result.win {
    background: linear-gradient(45deg, #22c55e, #16a34a);
    color: white;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.history-result.loss {
    background: linear-gradient(45deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.history-result.draw {
    background: linear-gradient(45deg, #f59e0b, #d97706);
    color: white;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.history-date {
    font-size: 0.85em;
    color: var(--color-secondary-text);
    opacity: 0.8;
    font-weight: 500;
}

.history-details {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
    gap: 20px;
    flex-wrap: wrap;
}

.history-team {
    font-weight: 700;
    color: var(--color-text);
    font-size: 1em;
    text-align: center;
}

.history-league {
    font-size: 0.9em;
    color: var(--color-accent);
    font-weight: 600;
    text-align: center;
}

.history-score {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.history-score-text {
    font-size: 0.9em;
    color: var(--color-secondary-text);
    font-weight: 500;
}

.history-gold {
    font-weight: bold;
    color: #fbbf24;
    font-size: 1.1em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.history-gold::after {
    content: " Zeni";
}

/* Responsive para el historial */
@media (max-width: 768px) {
    #matchHistoryList {
        padding: 8px;
        max-width: 100%;
    }

    .history-item {
        padding: 12px 10px !important;
        margin: 6px 0 !important;
        max-width: 100% !important;
        font-size: 0.85em !important;

        /* Layout en grid para tablets */
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-rows: auto auto !important;
        gap: 6px 12px !important;
        align-items: center !important;
    }

    .history-result {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        font-size: 0.8em !important;
        padding: 4px 8px !important;
        text-align: center !important;
        align-self: center !important;
    }

    .history-team {
        grid-column: 2 !important;
        grid-row: 1 !important;
        font-size: 0.9em !important;
        font-weight: bold !important;
        text-align: left !important;
    }

    .history-gold {
        grid-column: 3 !important;
        grid-row: 1 !important;
        font-size: 0.85em !important;
        text-align: right !important;
        color: #ffd700 !important;
        font-weight: bold !important;
    }

    .history-date {
        grid-column: 2 !important;
        grid-row: 2 !important;
        font-size: 0.75em !important;
        opacity: 0.7 !important;
        text-align: left !important;
    }

    .history-league {
        grid-column: 3 !important;
        grid-row: 2 !important;
        font-size: 0.8em !important;
        text-align: right !important;
        opacity: 0.8 !important;
    }

    .history-header {
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    .history-details {
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    .history-score {
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }
}

/* Centrado adicional para el contenedor del historial */
#history .tab-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#history h2 {
    margin-bottom: 15px;
}

@media (max-width: 768px) {
    #history h2 {
        font-size: 1.4em !important;
        margin-bottom: 12px !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    #history h2 {
        font-size: 1.2em !important;
        margin-bottom: 10px !important;
        padding: 0 10px !important;
    }

    #history .tab-content {
        padding: 0 5px !important;
    }
}

/* Removed duplicate - already handled above */

/* Estilos mejorados para el leaderboard */
#leaderboard-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-radius: 8px;
    transition: all 0.3s ease;
}

#leaderboard-list li:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.leaderboard-pos {
    font-weight: bold;
    font-size: 1.2em;
    min-width: 30px;
    text-align: center;
}

.leaderboard-user {
    flex: 1;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 15px;
    min-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-power {
    font-weight: bold;
    color: var(--color-accent);
    font-size: 1.1em;
    min-width: 80px;
    text-align: right;
}

.leaderboard-players {
    color: var(--color-secondary-text);
    font-size: 0.85em;
    margin-left: 10px;
    opacity: 0.8;
}

/* Colores especiales para los primeros lugares */
.leaderboard-gold {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0.05) 100%);
    border-color: #ffd700;
}

.leaderboard-gold::after {
    content: "";
}

.leaderboard-silver {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.1) 0%, rgba(192, 192, 192, 0.05) 100%);
    border-color: #c0c0c0;
}

.leaderboard-bronze {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.1) 0%, rgba(205, 127, 50, 0.05) 100%);
    border-color: #cd7f32;
}

.leaderboard-bronze::after {
    content: "";
}

/* Responsive design for leagues grid */
@media (max-width: 1200px) {
    .leagues-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .leagues-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-top: 15px;
    }

    .league-card {
        padding: 15px;
        min-height: 320px;
    }

    .league-name {
        font-size: 1.1em;
        margin-bottom: 8px;
    }

    .league-stats {
        grid-template-columns: 1fr;
        gap: 6px;
        margin: 10px 0;
    }

    .league-stat {
        font-size: 0.85em;
        padding: 6px 10px;
    }

    .league-description {
        font-size: 0.85em;
        margin: 8px 0;
    }

    .league-min-level {
        font-size: 0.85em;
    }

    .league-button {
        font-size: 0.95em;
        padding: 10px;
        margin-top: 10px;
    }
}



@media (max-width: 480px) {
    .leagues-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 15px;
    }

    .league-card {
        padding: 16px;
        min-height: 280px;
        border-radius: 12px;
    }

    .league-name {
        font-size: 1.2em;
        margin-bottom: 10px;
    }

    .league-description {
        font-size: 0.85em;
        margin: 10px 0;
        line-height: 1.4;
    }

    .league-stats {
        gap: 8px;
        margin: 12px 0;
    }

    .league-stat {
        font-size: 0.9em;
        padding: 8px 12px;
        border-radius: 8px;
    }

    .league-min-level {
        font-size: 0.9em;
        margin: 8px 0;
    }

    .league-button {
        font-size: 1em;
        padding: 12px;
        margin-top: 12px;
        letter-spacing: 0.5px;
    }

    .league-cooldown {
        font-size: 0.85em;
        margin-top: 8px;
    }
}

/* Estilos para el Panel de Administrador */
.admin-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    border-bottom: 2px solid #444;
    padding-bottom: 10px;
}

.admin-tab-btn {
    background: none;
    border: none;
    color: #999;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1em;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.admin-tab-btn.active {
    background: #e74c3c;
    color: white;
}

.admin-tab-btn:hover {
    background: #c0392b;
    color: white;
}

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

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



.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.admin-stat-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #444;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.admin-stat-card h3 {
    color: #ffd700;
    margin-bottom: 10px;
    font-size: 1.1em;
}

.admin-stat-card .stat-value {
    font-size: 2em;
    font-weight: bold;
    color: #e74c3c;
}

.admin-top-section {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
}

.admin-top-section h3 {
    color: #ffd700;
    margin-bottom: 15px;
    text-align: center;
}

.admin-list {
    max-height: 300px;
    overflow-y: auto;
}

.admin-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 5px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    border-left: 3px solid #ffd700;
}

.admin-users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.admin-user-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #444;
    border-radius: 10px;
    padding: 15px;
}

.admin-user-card h4 {
    color: #ffd700;
    margin-bottom: 10px;
    font-size: 1.2em;
}

.admin-user-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
}

.admin-user-stat {
    font-size: 0.9em;
    color: #ccc;
}

.admin-user-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.admin-user-actions input {
    flex: 1;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #444;
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.admin-user-actions button {
    padding: 5px 10px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 0.8em;
    transition: all 0.3s ease;
}

.admin-user-actions .btn-add {
    background: #27ae60;
    color: white;
}

.admin-user-actions .btn-subtract {
    background: #e74c3c;
    color: white;
}

.admin-user-actions .btn-set {
    background: #3498db;
    color: white;
}

.admin-movements-content {
    margin-top: 20px;
    max-height: 500px;
    overflow-y: auto;
}

.admin-movements-section {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
}

.admin-movements-section h4 {
    color: #ffd700;
    margin-bottom: 10px;
}

.admin-db-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.admin-db-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #444;
    border-radius: 10px;
    padding: 15px;
}

.admin-db-card h4 {
    color: #ffd700;
    margin-bottom: 10px;
}

.admin-search {
    margin-bottom: 20px;
}

.admin-user-selector {
    margin-bottom: 20px;
}

/* Estilos para la gestión de usuarios */
.admin-user-management {
    margin-bottom: 30px;
}

.admin-user-selector-section h3 {
    color: #ffd700;
    margin-bottom: 15px;
}

.admin-selected-user {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #444;
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
}

.admin-user-details h4 {
    color: #ffd700;
    margin-bottom: 15px;
    font-size: 1.3em;
}

.admin-user-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.admin-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}

.stat-label {
    color: #ccc;
    font-weight: bold;
}

.stat-value {
    color: #ffd700;
    font-weight: bold;
}

.admin-user-actions-panel {
    border-top: 1px solid #444;
    padding-top: 20px;
}

.admin-user-actions-panel h4 {
    color: #ffd700;
    margin-bottom: 15px;
}

.admin-gold-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    width: 100%;
}

.admin-gold-actions input {
    flex: 0 0 auto;
    min-width: 200px;
}

.admin-gold-actions button {
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}

.admin-gold-actions .btn-add {
    background: #27ae60;
    color: white;
}

.admin-gold-actions .btn-subtract {
    background: #e74c3c;
    color: white;
}

.admin-gold-actions .btn-set {
    background: #3498db;
    color: white;
}

.admin-gold-actions button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.admin-danger-actions {
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid #e74c3c;
    border-radius: 8px;
    padding: 15px;
}

.btn-delete:hover {
    background: #c0392b !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(231, 76, 60, 0.4);
}

/* Modal de pantalla completa para el panel de administrador (ajustado para móviles) */
#adminPanelModal .modal-content {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 20px !important;
}

/* En móviles, deja una banda superior/inferior para garantizar que el botón cerrar sea accesible */
@media (max-width: 768px) {
    #adminPanelModal .modal-content {
        padding: 12px 12px 24px 12px !important;
        height: 100vh !important;
    }

    /* Asegurar header sticky dentro del modal admin si existe */
    #adminPanelModal .admin-tabs,
    #adminPanelModal .admin-top-section h3 {
        position: sticky !important;
        top: 0 !important;
        background: rgba(0, 0, 0, 0.7) !important;
        z-index: 5 !important;
        padding-top: 8px !important;
        margin-top: -8px !important;
    }

    /* ADMIN PANEL MOBILE OPTIMIZATION */
    #adminPanelModal .admin-tabs {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
    }

    #adminPanelModal .admin-tab-btn {
        padding: 10px 15px !important;
        font-size: 0.9em !important;
        min-width: auto !important;
        flex: 1 1 auto !important;
    }

    #adminPanelModal .admin-stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
    }

    #adminPanelModal .admin-stat-card {
        padding: 15px !important;
    }

    #adminPanelModal .admin-stat-card h3 {
        font-size: 1em !important;
    }

    #adminPanelModal .admin-stat-card .stat-value {
        font-size: 1.2em !important;
    }

    #adminPanelModal .economy-sections {
        flex-direction: column !important;
    }

    #adminPanelModal .economy-section {
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    #adminPanelModal .economy-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    #adminPanelModal .economy-card {
        padding: 15px !important;
    }

    #adminPanelModal .input-group {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    #adminPanelModal .input-group input {
        width: 100% !important;
        min-width: auto !important;
    }

    #adminPanelModal .admin-users-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    #adminPanelModal .admin-user-card {
        min-height: auto !important;
        padding: 15px !important;
    }

    #adminPanelModal .admin-user-stats {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #adminPanelModal .admin-user-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }

    #adminPanelModal .admin-user-actions button {
        width: 100% !important;
        padding: 10px !important;
        font-size: 0.9em !important;
    }
}

@media (max-width: 480px) {
    #adminPanelModal .modal-content {
        padding: 8px 8px 20px 8px !important;
    }

    #adminPanelModal .admin-tabs {
        gap: 5px !important;
    }

    #adminPanelModal .admin-tab-btn {
        padding: 8px 12px !important;
        font-size: 0.8em !important;
    }

    #adminPanelModal .admin-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    #adminPanelModal .admin-stat-card {
        padding: 12px !important;
    }

    #adminPanelModal .economy-card {
        padding: 12px !important;
    }

    #adminPanelModal .input-group input {
        padding: 8px !important;
        font-size: 0.9em !important;
    }
}

/* Asegurar que los elementos del admin panel sean visibles */
#adminPanelModal .admin-user-actions-panel {
    width: 100% !important;
    max-width: none !important;
}

#adminPanelModal .admin-gold-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
}

#adminPanelModal .admin-gold-actions input {
    min-width: 200px !important;
    flex: 0 0 auto !important;
    margin-right: 10px !important;
}

#adminPanelModal .admin-gold-actions button {
    flex: 0 0 auto !important;
}

/* Estilos para las minitarjetas de usuarios */
.admin-users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.admin-user-card {
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    min-height: 300px;
    display: flex;
    flex-direction: column;
}

.admin-user-card:hover {
    border-color: #ffd700;
    box-shadow: 0 6px 12px rgba(255, 215, 0, 0.2);
}

.admin-user-card h4 {
    margin-bottom: 15px;
    font-size: 1.2em;
    text-align: center;
}

.admin-user-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

.admin-user-stat {
    color: #ccc;
    font-size: 0.9em;
    padding: 5px 0;
}

.admin-user-actions {
    border-top: 1px solid #444;
    padding-top: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.admin-user-actions input {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid #444 !important;
    color: white !important;
}

.admin-user-actions input:focus {
    border-color: #ffd700 !important;
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.3) !important;
}

.admin-user-actions button {
    padding: 8px 12px !important;
    border-radius: 5px !important;
    border: none !important;
    cursor: pointer !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
}

.admin-user-actions .btn-add {
    background: #27ae60 !important;
    color: white !important;
}

.admin-user-actions .btn-subtract {
    background: #e74c3c !important;
    color: white !important;
}

.admin-user-actions .btn-set {
    background: #3498db !important;
    color: white !important;
}

.admin-user-actions .btn-delete {
    background: #e74c3c !important;
    color: white !important;
    width: 100% !important;
    margin-top: 10px !important;
    font-size: 0.8em !important;
    padding: 6px 8px !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.2 !important;
}

.admin-user-actions p {
    font-size: 0.65em !important;
    line-height: 1.1 !important;
    word-wrap: break-word !important;
    margin-top: 3px !important;
}

.admin-user-actions button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Market Styles */
.market-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 20px;
}

/* Header title (migrated from inline) */
.header-title {
    font-size: 2.8em;
    font-weight: bold;
    color: var(--color-primary);
    margin: 0 auto 0 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Tab container header (migrated from inline) */
.tab-buttons-spread {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .tab-buttons-spread {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .tab-buttons-left {
        order: 1;
        overflow-x: auto;
        flex-shrink: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .tab-buttons-left::-webkit-scrollbar {
        display: none;
    }

    .tab-buttons-spread>button {
        order: 0;
        margin: 0 2px !important;
        white-space: nowrap;
        font-size: 0.85em !important;
        padding: 6px 10px !important;
        flex-shrink: 0;
    }

    /* Contenedor de botones auxiliares - horizontal en tablets */
    .tab-buttons-spread {
        position: relative;
    }

    .tab-buttons-spread>button:not(.tab-btn) {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* Centered section (migrated from inline) */
.section-centered {
    text-align: center;
    margin-bottom: 20px;
}

/* Large buttons in header section */
.btn-lg-text {
    font-size: 1.2em;
}

.market-player-card {
    background: var(--color-card);
    border: 2px solid var(--color-border);
    border-radius: 12px;
    padding: 15px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 230px;
    /* Fixed height for uniform grid */
    display: flex;
    flex-direction: column;
}

.market-player-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    border-color: var(--color-accent);
}

.market-player-card .player-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.market-player-card .player-face {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: contain;
    border: 2px solid var(--color-border);
}

.market-player-card .player-info {
    flex: 1;
    min-width: 0;
}

.market-player-card .player-name {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 4px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.market-player-card .player-stats {
    display: flex;
    gap: 8px;
    font-size: 0.9em;
    color: var(--color-text-secondary);
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.market-player-card .player-stats span {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}

.market-player-card .rarity {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 0.65em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

.market-player-card .market-info {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.market-player-card .price {
    font-size: 1.2em;
    font-weight: bold;
    color: #ffd700;
}

.market-player-card .rarity-inline {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.7em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #111;
    white-space: nowrap;
}

.market-player-card .seller-info {
    font-size: 0.8em;
    color: var(--color-text-secondary);
    opacity: 0.8;
}

.market-player-card .market-actions {
    margin-top: auto;
    /* push buttons to bottom */
    display: flex;
    gap: 8px;
}

.market-player-card .btn-buy {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    flex: 1;
}

.market-player-card .btn-buy:hover {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
}

.market-player-card .btn-cancel {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    flex: 1;
}

.market-player-card .btn-cancel:hover {
    background: linear-gradient(135deg, #c0392b, #e74c3c);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}

.market-filter {
    background: var(--color-card);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.market-filter select {
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9em;
}

.market-filter select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

.market-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-text-secondary);
    font-style: italic;
}

.market-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-text-secondary);
}

.market-loading .spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--color-border);
    border-radius: 50%;
    border-top-color: var(--color-accent);
    animation: spin 1s ease-in-out infinite;
    margin-right: 10px;
}

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

/* Sell button styles for player cards */
.player-card .btn-sell {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: bold;
    transition: all 0.3s ease;
    margin-top: 8px;
    width: 100%;
}

.player-card .btn-sell:hover {
    background: linear-gradient(135deg, #e67e22, #f39c12);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(243, 156, 18, 0.4);
}

.player-card .btn-cancel-sale {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: bold;
    transition: all 0.3s ease;
    margin-top: 8px;
    width: 100%;
}

.player-card .btn-cancel-sale:hover {
    background: linear-gradient(135deg, #7f8c8d, #95a5a6);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(149, 165, 166, 0.4);
}

/* Responsive market styles */
/* ===== ESTILOS MEJORADOS PARA EL HISTORIAL DE VENTAS ===== */
.purchase-history-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 70px;
    backdrop-filter: blur(10px);
}

.purchase-history-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ffd700, #ffed4e, #ffd700);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.purchase-history-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.3);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
}

.purchase-history-item:hover::before {
    opacity: 1;
}

.purchase-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    border-radius: 12px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.purchase-icon .icon {
    font-size: 22px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.purchase-history-item:hover .purchase-icon {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

.purchase-details {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    overflow: visible;
}

.player-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    min-width: 0;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.player-name {
    font-weight: bold;
    font-size: 1.1em;
    color: #10b981;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rarity-badge {
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.rarity-badge.common {
    background: linear-gradient(135deg, #9ca3af, #6b7280);
    color: white;
}

.rarity-badge.uncommon {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.rarity-badge.rare {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.rarity-badge.epic {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
}

.rarity-badge.legendary {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.player-skillpoints {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9em;
    color: #10b981;
    font-weight: 600;
    padding: 4px 8px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.skillpoints-value {
    font-weight: bold;
    color: #10b981;
}

.transaction-info {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
    margin-left: auto;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.transaction-party {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 0;
}

.transaction-label {
    font-weight: 600;
    color: var(--color-secondary-text);
    flex-shrink: 0;
    font-size: 1.1em;
}

.transaction-value {
    color: #10b981;
    font-weight: 600;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transaction-price {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-size: 1.1em;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.08));
    border-radius: 10px;
    border: 2px solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.2);
}

.price-amount {
    font-size: 1.2em;
}

.currency {
    font-size: 0.8em;
    opacity: 0.9;
    font-weight: 600;
}

.transaction-date {
    font-size: 0.8em;
    color: var(--color-secondary-text);
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.transaction-date i {
    font-size: 0.9em;
    color: #ffd700;
}

/* Estilos para mensajes de error */
.purchase-history-item.error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));
    border-color: rgba(239, 68, 68, 0.3);
}

.error-icon {
    font-size: 24px;
    color: #ef4444;
}

.error-details {
    flex: 1;
}

.error-message {
    font-weight: bold;
    color: #ef4444;
    margin-bottom: 4px;
    font-size: 0.9em;
}

.error-debug {
    font-size: 0.7em;
    color: var(--color-secondary-text);
    opacity: 0.7;
}

/* Estilos para mensajes de carga y sin datos */
.loading-message {
    text-align: center;
    padding: 40px;
    color: var(--color-secondary-text);
    font-size: 1.1em;
}

.no-transactions {
    text-align: center;
    padding: 40px;
    color: var(--color-secondary-text);
}

.no-transactions-icon {
    font-size: 3em;
    margin-bottom: 15px;
    opacity: 0.5;
}

.no-transactions-text {
    font-size: 1.1em;
    margin-bottom: 20px;
}

/* Responsive design */
@media (max-width: 768px) {
    .purchase-history-item {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        min-height: 50px;
        margin-bottom: 6px;
    }

    .purchase-icon {
        width: 35px;
        height: 35px;
    }

    .purchase-icon .icon {
        font-size: 16px;
    }

    .purchase-details {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        width: 100%;
    }

    .player-info {
        width: 100%;
        justify-content: flex-start;
        gap: 6px;
        flex-wrap: wrap;
    }

    .player-name {
        font-size: 0.9em;
        max-width: 120px;
    }

    .rarity-badge {
        font-size: 0.7em !important;
        padding: 2px 4px !important;
    }

    .player-skillpoints .skillpoints-value {
        font-size: 0.75em;
    }

    .transaction-info {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4px 8px !important;
        width: 100% !important;
        font-size: 0.8em !important;
    }

    .transaction-party {
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
    }

    .transaction-price {
        font-weight: bold !important;
        color: #ffd700 !important;
    }

    .transaction-date {
        font-size: 0.7em !important;
        opacity: 0.8 !important;
    }

    .transaction-info {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .transaction-value {
        max-width: 120px;
    }

    .rarity-badge {
        font-size: 0.7em;
        padding: 3px 8px;
    }
}

/* Estilos para el filtro de rareza - ARREGLADO */
.filter-rarity {
    display: block !important;
}

.filter-rarity select {
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 0.9em;
    transition: all 0.3s ease;
    min-width: 140px;
    backdrop-filter: blur(10px);
}

.filter-rarity select option {
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px;
}

.filter-rarity select:focus {
    outline: none;
    border-color: #ffd700;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
    background: rgba(0, 0, 0, 0.8);
}

.filter-rarity select:hover {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.5);
}

.filter-rarity label {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
    display: block;
    font-size: 0.95em;
}

/* Mejorar el contenedor del filtro */
.market-filter {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.05));
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Estilos para la paginación */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    padding: 15px;
}

.pagination-container button {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--color-btn), var(--color-btn-hover));
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9em;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.pagination-container button:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-btn-hover), var(--color-btn));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.pagination-container button:disabled {
    background: var(--color-btn-disabled);
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

#currentPageInfo {
    font-size: 0.95em;
    color: var(--color-secondary-text);
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 600;
}








/* Estilos específicos para modales profesionales en móviles */
.professional-modal-content .professional-modal-header {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%) !important;
    border-bottom: 2px solid #333 !important;
    padding: 20px !important;
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Asegurar que los encabezados profesionales tengan el estilo correcto en móviles */
.professional-modal-content .professional-modal-title {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex: 1 !important;
}

.professional-modal-content .professional-modal-icon {
    font-size: 2em !important;
    color: #333 !important;
}

.professional-modal-content .professional-modal-title-text h3 {
    color: #333 !important;
    margin: 0 !important;
    font-size: 1.5em !important;
    font-weight: bold !important;
}

.professional-modal-content .professional-modal-title-text p {
    color: #555 !important;
    margin: 5px 0 0 0 !important;
    font-size: 1em !important;
}

/* Estilos para el cuerpo del modal profesional */
.professional-modal-body {
    padding: 20px !important;
    overflow-y: auto !important;
    max-height: calc(90vh - 120px) !important;
}





/* ELIMINADO: Estilos específicos del Leaderboard - Ahora usa solo los estilos base de professional_modals.css */

















.lottery-stats {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 221, 0, 0.1), rgba(255, 107, 53, 0.1));
    border-radius: 15px;
    border: 2px solid rgba(255, 221, 0, 0.3);
}

.stat-item {
    text-align: center;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 1px solid rgba(255, 221, 0, 0.2);
    min-width: 150px;
}

.stat-label {
    display: block;
    color: #ffdd00;
    font-weight: bold;
    font-size: 1em;
    margin-bottom: 8px;
}

.stat-value {
    display: block;
    color: #fff;
    font-size: 1.4em;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Slot Machine */
.slot-machine-container {
    display: flex;
    justify-content: center;
    margin: 40px 0;
    position: relative;
}

.slot-machine {
    background: linear-gradient(135deg, #2c2c54, #1a1a2e);
    border: 4px solid #ffd700;
    border-radius: 20px;
    padding: 30px;
    position: relative;
    box-shadow:
        0 0 40px rgba(255, 221, 0, 0.6),
        inset 0 0 20px rgba(255, 107, 53, 0.2);
}

/* Configuración para slot machine en modo claro */
body:not([data-theme="dark"]) .slot-machine {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    border-color: #ffd700 !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
}

body:not([data-theme="dark"]) .slot-display {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1) !important;
}

/* FORZAR estilos para lottery modal - movidos a lottery_fixes.css */

.slot-display {
    width: 280px;
    /* Un poco más grande */
    height: 144px;
    /* Mantener altura para ver múltiples elementos */
    background: #000;
    border: 3px solid #333;
    border-radius: 10px;
    /* Más redondeado */
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.8);
}

/* Slot Curtain */
.slot-curtain {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1a1a2e, #16213e, #0f1419);
    border-radius: 7px;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 100;
    border: 2px solid #ffdd00;
    box-shadow:
        0 0 20px rgba(255, 221, 0, 0.6),
        inset 0 0 15px rgba(255, 107, 53, 0.3);
}

.slot-curtain.show {
    display: flex;
    animation: curtainDrop 0.3s ease-out;
}

.slot-curtain.hide {
    animation: curtainLift 0.5s ease-in-out;
}

@keyframes curtainDrop {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes curtainLift {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

.curtain-spinner {
    font-size: 3em;
    animation: spin 1s linear infinite;
    color: #ffdd00;
    text-shadow: 0 0 20px #ffdd00;
    filter: drop-shadow(0 0 10px #ffdd00);
}

.slot-reel {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.slot-item {
    height: 96px;
    /* 120px * 0.8 = 96px */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #333;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    transition: all 0.3s ease;
}

.slot-icon {
    font-size: 3em;
    margin-bottom: 5px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.slot-text {
    color: #fff;
    font-weight: bold;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.slot-glow {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(45deg, #ff6b35, #f7931e, #ffdd00, #ff6b35);
    background-size: 400% 400%;
    border-radius: 25px;
    z-index: -1;
    opacity: 0;
    animation: slotGlow 2s ease-in-out infinite;
}

@keyframes slotGlow {

    0%,
    100% {
        opacity: 0;
        background-position: 0% 50%;
    }

    50% {
        opacity: 0.3;
        background-position: 100% 50%;
    }
}

/* Slot Animations */
@keyframes slotSpin {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-768px);
    }

    /* Mover 8 elementos (96px * 8) */
}

.slot-reel.spinning {
    animation: slotSpin 0.1s linear infinite;
    animation-timing-function: linear;
}

.slot-reel.stopping {
    animation: none;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Prize Results - Colored Balls for Players */

.slot-item[data-type="legendary"] .slot-icon {
    color: #ff8c00;
    text-shadow: 0 0 15px #ff8c00;
    filter: drop-shadow(0 0 8px #ff8c00);
}

.slot-item[data-type="epic"] .slot-icon {
    color: #8e44ad;
    text-shadow: 0 0 15px #8e44ad;
    filter: drop-shadow(0 0 8px #8e44ad);
}

.slot-item[data-type="rare"] .slot-icon {
    color: #2980b9;
    text-shadow: 0 0 15px #2980b9;
    filter: drop-shadow(0 0 8px #2980b9);
}

.slot-item[data-type="uncommon"] .slot-icon {
    color: #27ae60;
    text-shadow: 0 0 15px #27ae60;
    filter: drop-shadow(0 0 8px #27ae60);
}

.slot-item[data-type="common"] .slot-icon {
    color: #95a5a6;
    text-shadow: 0 0 10px #95a5a6;
    filter: drop-shadow(0 0 5px #95a5a6);
}

.slot-item[data-type="zeni"] .slot-icon {
    color: #f1c40f;
    text-shadow: 0 0 15px #f1c40f;
    font-weight: bold;
    font-size: 0.8em;
    letter-spacing: 2px;
    background: linear-gradient(45deg, #f1c40f, #f39c12);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 8px #f1c40f);
}

.slot-item[data-type="jackpot"] .slot-icon {
    color: #ffdd00;
    text-shadow: 0 0 20px #ffdd00;
    font-size: 1.2em;
    filter: drop-shadow(0 0 15px #ffdd00);
    animation: jackpotPulse 2s ease-in-out infinite;
}

@keyframes jackpotPulse {

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

    50% {
        transform: scale(1.1);
    }
}

.slot-item[data-type="nothing"] .slot-icon {
    color: #e74c3c;
    text-shadow: 0 0 10px #e74c3c;
}

/* Winner highlight effect */
.slot-item.winner {
    background: linear-gradient(135deg, rgba(255, 221, 0, 0.3), rgba(255, 107, 53, 0.3)) !important;
    border: 2px solid #ffdd00 !important;
    box-shadow:
        0 0 30px rgba(255, 221, 0, 0.8),
        inset 0 0 20px rgba(255, 107, 53, 0.3) !important;
    transform: scale(1.05);
    z-index: 10;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1.05) !important;
    border-radius: 8px !important;
}

.slot-item.winner .slot-icon {
    animation: winnerGlow 1s ease-in-out infinite alternate !important;
    transform: scale(1.2) !important;
}

.slot-item.winner .slot-text {
    color: #ffdd00 !important;
    text-shadow: 0 0 10px #ffdd00 !important;
    animation: winnerTextGlow 1s ease-in-out infinite alternate !important;
}

@keyframes winnerGlow {
    0% {
        filter: drop-shadow(0 0 15px currentColor) brightness(1);
    }

    100% {
        filter: drop-shadow(0 0 25px currentColor) brightness(1.3);
    }
}

@keyframes winnerTextGlow {
    0% {
        text-shadow: 0 0 10px #ffdd00;
    }

    100% {
        text-shadow: 0 0 20px #ffdd00, 0 0 30px #ffdd00;
    }
}

/* Curtain spinner animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

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

/* Zeni text styling in prize table */
.zeni-text {
    font-weight: bold !important;
    font-size: 0.9em !important;
    letter-spacing: 1px !important;
    background: linear-gradient(45deg, #f1c40f, #f39c12) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 2px rgba(241, 196, 15, 0.5)) !important;
}

/* Player balls glow effect when winning */
.slot-item.winner[data-type="legendary"] .slot-icon,
.slot-item.winner[data-type="epic"] .slot-icon,
.slot-item.winner[data-type="rare"] .slot-icon,
.slot-item.winner[data-type="uncommon"] .slot-icon,
.slot-item.winner[data-type="common"] .slot-icon {
    animation: ballGlow 1s ease-in-out infinite alternate;
    transform: scale(1.2);
}

@keyframes ballGlow {
    0% {
        filter: drop-shadow(0 0 5px currentColor) brightness(1);
    }

    100% {
        filter: drop-shadow(0 0 20px currentColor) brightness(1.3);
    }
}

/* Lottery Controls */
.lottery-controls {
    text-align: center;
    margin: 30px 0;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
}

/* Contenedor para los 3 botones principales */
.lottery-main-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 20px !important;
}

.btn-lottery-spin {
    background: linear-gradient(135deg, #ff6b35, #f7931e) !important;
    color: #fff !important;
    font-size: 1.1em !important;
    font-weight: bold !important;
    padding: 10px 25px !important;
    border: 3px solid #ffdd00 !important;
    border-radius: 15px !important;
    margin: 0 8px !important;
    box-shadow: 0 5px 20px rgba(255, 107, 53, 0.4) !important;
    transition: all 0.3s ease !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    min-width: 140px !important;
    max-width: 180px !important;
}

.btn-lottery-spin:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(255, 107, 53, 0.6) !important;
    background: linear-gradient(135deg, #f7931e, #ff6b35) !important;
}

.btn-lottery-spin:disabled {
    background: #666 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn-lottery-auto {
    background: linear-gradient(135deg, #2980b9, #3498db) !important;
    color: #fff !important;
    font-weight: bold !important;
    padding: 10px 20px !important;
    border: 2px solid #3498db !important;
    border-radius: 10px !important;
    margin: 0 8px !important;
    transition: all 0.3s ease !important;
    min-width: 140px !important;
    max-width: 180px !important;
}

.btn-lottery-auto:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, #3498db, #2980b9) !important;
}

.btn-lottery-auto.active {
    background: linear-gradient(135deg, #27ae60, #2ecc71) !important;
    border-color: #2ecc71 !important;
}

.auto-spin-controls {
    margin-top: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 1px solid rgba(255, 221, 0, 0.2);
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: auto !important;
    width: 100% !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.auto-spin-controls label {
    color: #fff;
    margin-right: 15px;
    font-weight: bold;
}

.auto-spin-controls input {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 80px;
    margin: 0 10px;
}

.btn-stop {
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
    color: #fff !important;
    font-weight: bold !important;
    padding: 8px 20px !important;
    border: 2px solid #e74c3c !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.btn-stop:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, #c0392b, #e74c3c) !important;
}

/* Lottery Prizes */
.lottery-prizes {
    margin-top: 30px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
    border-radius: 15px;
    border: 2px solid rgba(255, 221, 0, 0.2);
    flex-shrink: 0;
}

.prizes-table-container {
    max-height: 250px;
    overflow-y: auto;
    margin: 10px 0;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    padding: 5px;
    border: 1px solid rgba(255, 221, 0, 0.1);
}

.prizes-table-container::-webkit-scrollbar {
    width: 8px;
}

.prizes-table-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}

.prizes-table-container::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    border-radius: 5px;
    border: 1px solid rgba(255, 221, 0, 0.3);
}

.prizes-table-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #f7931e, #ffdd00);
}

.lottery-prizes h3 {
    text-align: center;
    color: #ffdd00;
    font-size: 1.5em;
    margin-bottom: 20px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.prizes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.prize-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: linear-gradient(135deg, rgba(255, 221, 0, 0.1), rgba(255, 107, 53, 0.1));
    border-radius: 8px;
    border: 1px solid rgba(255, 221, 0, 0.2);
    transition: all 0.3s ease;
}

.prize-item:hover {
    background: linear-gradient(135deg, rgba(255, 221, 0, 0.2), rgba(255, 107, 53, 0.2));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 221, 0, 0.3);
}

.prize-icon {
    font-size: 1.5em;
}

.prize-name {
    color: #fff;
    font-weight: bold;
    flex-grow: 1;
    margin-left: 10px;
}

.prize-chance {
    color: #ffdd00;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.9em;
}

/* Responsive Design */
@media (max-height: 700px) {
    .lottery-modal-content {
        max-height: none !important;
        height: auto !important;
        overflow-y: visible !important;
        padding: 15px !important;
    }

    .lottery-header {
        padding: 15px 20px !important;
        margin: -15px -15px 20px -15px !important;
    }

    .lottery-header h2 {
        font-size: 1.5em !important;
        letter-spacing: 0.5px !important;
    }

    .slot-display {
        height: 80px !important;
        margin: 15px 0 !important;
    }

    .slot-item {
        height: 80px !important;
    }

    .slot-icon {
        font-size: 2.2em !important;
    }

    .prizes-table {
        max-height: 200px !important;
        overflow-y: auto !important;
    }


}

@media (max-width: 768px) {
    .lottery-modal-content {
        width: 95% !important;
        /* Más ancho en tablets */
        max-width: 1400px !important;
        padding: 15px !important;
        /* Volver al padding original */
        border-radius: 15px !important;
        /* Más redondeado */
        max-height: 90vh !important;
        /* Más alto */
        transform: translate(-50%, -50%) !important;
        /* Sin scale */
        overflow-y: auto !important;
        /* Permitir scroll vertical */
        -webkit-overflow-scrolling: touch !important;
        /* Scroll suave en iOS */
    }

    .lottery-header {
        padding: 15px 60px 15px 15px !important;
        /* Más espacio para el botón */
        margin: -15px -15px 20px -15px !important;
        border-radius: 15px 15px 0 0 !important;
        min-height: 50px !important;
    }

    .lottery-header h2 {
        font-size: 1.2em !important;
        letter-spacing: 0px !important;
        padding: 0 !important;
    }

    .lottery-header .close {
        top: 10px !important;
        right: 15px !important;
        width: 35px !important;
        height: 35px !important;
        font-size: 1.5em !important;
    }

    .lottery-stats {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .lottery-stat {
        margin: 5px 0 !important;
        font-size: 0.9em !important;
    }

    /* Slot machine container para tablets */
    .slot-machine-container {
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .slot-machine {
        position: relative !important;
    }

    .slot-display {
        width: 260px !important;
        /* Más grande para tablets */
        height: 130px !important;
        /* Altura adecuada para ver elementos */
        margin: 0 auto !important;
        /* Centrado natural */
    }

    .slot-item {
        height: 90px !important;
        min-width: 90px !important;
    }

    .slot-icon {
        font-size: 2.2em !important;
    }

    .slot-text {
        font-size: 0.7em !important;
    }

    /* Slot glow original para tablets */
    .slot-glow {
        position: absolute !important;
        top: -10px !important;
        left: -10px !important;
        right: -10px !important;
        bottom: -10px !important;
        background: linear-gradient(45deg, #ff6b35, #f7931e, #ffdd00, #ff6b35) !important;
        background-size: 400% 400% !important;
        border-radius: 25px !important;
        z-index: -1 !important;
        opacity: 0 !important;
        animation: slotGlow 2s ease-in-out infinite !important;
    }

    .btn-lottery-spin {
        font-size: 1.1em !important;
        padding: 12px 25px !important;
        margin: 5px !important;
    }

    .lottery-controls {
        margin: 20px 0 !important;
    }

    .prizes-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .prize-item {
        padding: 8px 12px !important;
        font-size: 0.85em !important;
    }

    .prize-icon {
        font-size: 1.2em !important;
    }

    .prize-chance {
        font-size: 0.8em !important;
        padding: 1px 6px !important;
    }
}

@media (max-width: 480px) {
    .lottery-modal-content {
        width: 95vw !important;
        max-width: 1200px !important;
        padding: 8px !important;
        border-radius: 8px !important;
        max-height: 95vh !important;
        margin: 2.5vh auto !important;
        overflow-y: auto !important;
    }

    .lottery-header {
        padding: 8px 35px 8px 8px !important;
        margin: -8px -8px 10px -8px !important;
        position: relative !important;
        border-radius: 10px 10px 0 0 !important;
    }

    .lottery-header h2 {
        font-size: 1.1em !important;
        letter-spacing: 0px !important;
        padding-right: 35px !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    /* Botón de cerrar más pequeño */
    .lottery-header .close {
        font-size: 1.5em !important;
        top: 5px !important;
        right: 8px !important;
        width: 25px !important;
        height: 25px !important;
        line-height: 25px !important;
    }

    /* Stats del lottery más compactas */
    .lottery-stats {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        margin: 8px 0 !important;
    }

    .lottery-stats .stat-item {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 3px 6px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 4px !important;
        font-size: 0.8em !important;
    }

    /* Slot machine original restaurado */
    .slot-machine-container {
        display: flex !important;
        justify-content: center !important;
        margin: 40px 0 !important;
        position: relative !important;
    }

    .slot-machine {
        background: linear-gradient(135deg, #2c2c54, #1a1a2e) !important;
        border: 4px solid #ffdd00 !important;
        border-radius: 20px !important;
        padding: 30px !important;
        position: relative !important;
        box-shadow: 0 0 40px rgba(255, 221, 0, 0.6), inset 0 0 20px rgba(255, 107, 53, 0.2) !important;
    }

    /* Slot glow original restaurado */
    .slot-glow {
        position: absolute !important;
        top: -10px !important;
        left: -10px !important;
        right: -10px !important;
        bottom: -10px !important;
        background: linear-gradient(45deg, #ff6b35, #f7931e, #ffdd00, #ff6b35) !important;
        background-size: 400% 400% !important;
        border-radius: 25px !important;
        z-index: -1 !important;
        opacity: 0 !important;
        animation: slotGlow 2s ease-in-out infinite !important;
    }

    /* Asegurar que el slot glow esté centrado incluso durante las animaciones */
    .slot-glow[style*="opacity: 0.7"] {
        opacity: 0.7 !important;
        animation: slotGlow 0.3s ease-in-out infinite !important;
    }



    .slot-display {
        width: 280px !important;
        height: 144px !important;
        background: #000 !important;
        border: 3px solid #333 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        position: relative !important;
        box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.8) !important;
    }

    .slot-reel {
        height: 100% !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        position: relative !important;
    }

    .slot-item {
        height: 96px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        border-bottom: 1px solid #333 !important;
        background: linear-gradient(135deg, #1a1a2e, #16213e) !important;
        transition: all 0.3s ease !important;
    }

    .slot-icon {
        font-size: 3em !important;
        margin-bottom: 5px !important;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important;
    }

    .slot-text {
        color: #fff !important;
        font-weight: bold !important;
        font-size: 0.9em !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    }

    /* Slot curtain para móviles */
    .slot-curtain {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: linear-gradient(135deg, #1a1a2e, #16213e) !important;
        border-radius: 6px !important;
        display: none !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 100 !important;
        border: 2px solid #ffdd00 !important;
        box-shadow: 0 0 20px rgba(255, 221, 0, 0.6) !important;
        width: 100% !important;
        height: 100% !important;
    }

    .slot-curtain.show {
        display: flex !important;
    }

    .curtain-spinner {
        font-size: 2.5em !important;
        animation: spin 1s linear infinite !important;
        color: #ffdd00 !important;
        text-shadow: 0 0 15px #ffdd00 !important;
    }

    /* Asegurar que la cortinilla funcione en móviles */
    .slot-curtain[style*="display: flex"] {
        display: flex !important;
    }

    .slot-curtain[style*="transform: translateY(0%)"] {
        transform: translateY(0%) !important;
    }

    /* Animaciones del slot originales restauradas */
    .slot-reel.spinning {
        animation: slotSpin 0.1s linear infinite !important;
    }

    .slot-reel.stopping {
        animation: none !important;
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }

    /* Animación del slot original restaurada */
    @keyframes slotSpin {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-768px);
        }

        /* 8 elementos * 96px */
    }



    /* Controles más compactos */
    .lottery-controls {
        margin: 8px 0 !important;
        padding: 6px !important;
        text-align: center !important;
    }

    .lottery-controls .btn {
        font-size: 0.75em !important;
        padding: 5px 8px !important;
        margin: 2px !important;
        display: inline-block !important;
        min-width: auto !important;
    }

    /* Auto spin controls */
    .auto-spin-controls {
        margin-top: 6px !important;
        padding: 4px !important;
    }

    .auto-spin-config {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .auto-spin-config input,
    .auto-spin-config select,
    .auto-spin-config label {
        font-size: 0.7em !important;
        padding: 3px !important;
    }

    /* Tabla de premios más compacta */
    .prizes-table {
        margin-top: 8px !important;
    }

    .prizes-table h3 {
        font-size: 0.9em !important;
        margin-bottom: 6px !important;
    }

    .prize-item {
        padding: 2px 4px !important;
        font-size: 0.65em !important;
        gap: 4px !important;
        min-height: auto !important;
    }

    .prize-icon {
        font-size: 0.9em !important;
    }

    .prize-name {
        flex: 1 !important;
        text-align: left !important;
    }

    .prize-chance {
        font-weight: bold !important;
        min-width: 35px !important;
        text-align: right !important;
    }

    .lottery-header .close {
        top: 8px !important;
        right: 12px !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 1.3em !important;
    }



    /* Eliminar duplicados - usar estilos unificados arriba */

    .btn-lottery-spin {
        font-size: 1em !important;
        padding: 10px 20px !important;
        margin: 3px !important;
    }

    .lottery-stat {
        font-size: 0.8em !important;
    }

    .prize-item {
        padding: 6px 10px !important;
        font-size: 0.8em !important;
    }

    .prize-icon {
        font-size: 1.1em !important;
    }

    .prize-name {
        font-size: 0.9em !important;
    }

    .prize-chance {
        font-size: 0.75em !important;
        padding: 1px 5px !important;
    }
}

@media (max-height: 600px) {
    .lottery-modal-content {
        max-height: 99vh !important;
        padding: 8px !important;
    }

    .slot-machine {
        width: 200px !important;
        padding: 12px !important;
    }

    .slot-display {
        width: 180px !important;
        height: 100px !important;
    }

    .slot-item {
        height: 50px !important;
    }

    .slot-icon {
        font-size: 2em !important;
    }

    .slot-text {
        font-size: 0.65em !important;
    }

    /* Slot glow original para pantallas pequeñas */
    .slot-glow {
        position: absolute !important;
        top: -10px !important;
        left: -10px !important;
        right: -10px !important;
        bottom: -10px !important;
        background: linear-gradient(45deg, #ff6b35, #f7931e, #ffdd00, #ff6b35) !important;
        background-size: 400% 400% !important;
        border-radius: 25px !important;
        z-index: -1 !important;
        opacity: 0 !important;
        animation: slotGlow 2s ease-in-out infinite !important;
    }

    .lottery-header {
        padding: 8px 15px !important;
        margin: -8px -8px 10px -8px !important;
    }

    .lottery-header h2 {
        font-size: 1.1em !important;
        letter-spacing: 0px !important;
        padding-right: 35px !important;
    }

    .slot-display {
        height: 70px !important;
        margin: 10px auto !important;
    }

    .slot-item {
        height: 70px !important;
    }

    .slot-icon {
        font-size: 1.8em !important;
    }

    .lottery-controls {
        margin: 10px 0 !important;
    }

    .btn-lottery-spin {
        padding: 8px 20px !important;
        font-size: 0.9em !important;
    }

    .prizes-table {
        max-height: 150px !important;
        overflow-y: auto !important;
    }

    .prize-item {
        padding: 4px 8px !important;
        font-size: 0.75em !important;
    }
}



/* Winner Animation - REMOVED winnerFlash to avoid background changes */

/* ===== ESTILOS PARA PANEL DE ADMIN ===== */

/* Contenedor de la lista de usuarios */
#users-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Tarjetas de usuario en el admin */
.admin-user-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.admin-user-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    border-color: #cbd5e1;
}

/* Estadísticas del usuario */
.admin-user-stats {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 15px;
    flex-grow: 1;
}

.admin-user-stat {
    font-size: 0.85em;
    color: #475569;
    padding: 6px 8px;
    background: rgba(248, 250, 252, 0.8);
    border-radius: 6px;
    margin-bottom: 4px;
    border-left: 3px solid #e2e8f0;
    font-weight: 500;
}

/* Acciones del usuario */
.admin-user-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}

/* Botones del admin */
.btn-add,
.btn-subtract,
.btn-set,
.btn-delete {
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.8em;
    transition: all 0.3s ease;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-add {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
}

.btn-subtract {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.btn-set {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.btn-delete {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.btn-add:hover,
.btn-subtract:hover,
.btn-set:hover,
.btn-delete:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.btn-add:hover {
    background: linear-gradient(135deg, #16a34a, #15803d);
}

.btn-subtract:hover {
    background: linear-gradient(135deg, #d97706, #c2410c);
}

.btn-set:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.btn-delete:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

/* Responsive para pantallas más pequeñas */
@media (max-width: 1400px) {
    #users-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1000px) {
    #users-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    #users-list {
        grid-template-columns: 1fr;
    }

    .admin-user-card {
        min-height: auto;
    }
}

/* Lottery History Button Styles */
.btn-lottery-history {
    background: linear-gradient(135deg, #8e44ad, #9b59b6) !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    margin: 0 8px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    min-width: 140px !important;
    max-width: 180px !important;
}

.btn-lottery-history:hover {
    background: linear-gradient(135deg, #9b59b6, #8e44ad) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

.btn-lottery-history:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

@media (max-width: 768px) {
    .btn-lottery-history {
        padding: 8px 16px !important;
        font-size: 0.9em !important;
        margin-left: 5px !important;
    }
}

@media (max-width: 480px) {
    .btn-lottery-history {
        padding: 6px 12px !important;
        font-size: 0.8em !important;
        margin-left: 3px !important;
    }
}

/* Lottery History Modal Styles */
.lottery-history-modal-content {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    margin: 3% auto;
    padding: 0;
    border: 2px solid #ffd700;
    border-radius: 15px;
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    animation: modalSlideIn 0.3s ease-out;
}

.lottery-history-header {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #1a1a1a;
    padding: 20px;
    text-align: center;
    position: relative;
    border-radius: 13px 13px 0 0;
}

.lottery-history-header h2 {
    margin: 0;
    font-size: 1.8em;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.lottery-history-header .close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    color: #1a1a1a;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}

.lottery-history-header .close:hover {
    color: #333;
    transform: scale(1.1);
}

.lottery-history-info {
    padding: 15px 20px 0;
    text-align: center;
    color: #ccc;
}

.lottery-history-info p {
    margin: 0;
    font-style: italic;
}

.lottery-history-container {
    max-height: 60vh;
    overflow-y: auto;
    padding: 20px;
    background: #1a1a1a;
}

.lottery-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #2a2a2a, #333);
    border-radius: 10px;
    border-left: 4px solid #ffd700;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.lottery-history-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.lottery-history-user {
    font-weight: bold;
    color: #ffd700;
    min-width: 120px;
    font-size: 1.1em;
}

.lottery-history-prize {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: center;
    color: #fff;
}

.lottery-history-icon {
    font-size: 1.4em;
}

.lottery-history-time {
    color: #888;
    font-size: 0.9em;
    min-width: 120px;
    text-align: right;
}

.lottery-history-empty {
    text-align: center;
    color: #888;
    padding: 40px 20px;
    font-style: italic;
    font-size: 1.1em;
}

.loading-spinner {
    text-align: center;
    color: #ffd700;
    padding: 40px 20px;
    font-size: 1.1em;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.7) translateY(-50px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive for History Modal */
@media (max-width: 768px) {
    .lottery-history-modal-content {
        width: 95%;
        margin: 5% auto;
        max-height: 90vh;
    }

    .lottery-history-item {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .lottery-history-user {
        min-width: auto;
        order: 1;
    }

    .lottery-history-prize {
        order: 2;
        justify-content: center;
    }

    .lottery-history-time {
        order: 3;
        min-width: auto;
        text-align: center;
        font-size: 0.8em;
    }
}

@media (max-width: 480px) {
    .lottery-history-header h2 {
        font-size: 1.4em;
    }

    .lottery-history-item {
        padding: 12px;
    }
}

/* ========== AUTO SPIN CONTROLS STYLES ========== */
.auto-spin-controls {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    border: 2px solid #4a5568;
    border-radius: 12px;
    padding: 20px;
    margin: 15px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: slideDown 0.3s ease-out;
    color: #ffffff;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auto-spin-config {
    text-align: center !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

.auto-spin-config label {
    display: block;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 8px;
    font-size: 1.1em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.auto-spin-config input {
    width: 120px !important;
    padding: 8px 12px !important;
    border: 2px solid #5a6c7d !important;
    border-radius: 8px !important;
    font-size: 1.1em !important;
    text-align: center !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: #2c3e50 !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    margin: 0 auto !important;
}

.auto-spin-config input:focus {
    outline: none;
    border-color: #3498db;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}

.auto-spin-info {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 10px !important;
    padding: 8px 0 !important;
    font-size: 0.9em !important;
    color: #ecf0f1 !important;
    width: 100% !important;
    max-width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.auto-spin-info span {
    background: rgba(236, 240, 241, 0.1);
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: bold;
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.1);
}

.auto-spin-buttons {
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-top: 20px !important;
    padding: 15px !important;
    width: 100% !important;
    max-width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: rgba(52, 152, 219, 0.1) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(52, 152, 219, 0.2) !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: auto !important;
}



.auto-spin-buttons .btn {
    padding: 8px 16px !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    font-size: 0.85em !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    min-width: 120px !important;
    max-width: 140px !important;
    flex: 1 !important;
    width: auto !important;
}

.btn-start {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3) !important;
    width: auto !important;
    max-width: 140px !important;
}

.btn-start:hover {
    background: linear-gradient(135deg, #218838 0%, #1ba085 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
}

.btn-stop {
    background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.btn-stop:hover {
    background: linear-gradient(135deg, #c82333 0%, #d63031 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(220, 53, 69, 0.4);
}

.btn-cancel {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.btn-cancel:hover {
    background: linear-gradient(135deg, #5a6268 0%, #4e555b 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(108, 117, 125, 0.4);
}

.auto-spin-status {
    text-align: center;
    margin-top: 15px;
    padding: 12px;
    background: rgba(52, 152, 219, 0.15);
    border-radius: 10px;
    border: 1px solid rgba(52, 152, 219, 0.3);
    backdrop-filter: blur(5px);
    box-shadow: inset 0 1px 3px rgba(52, 152, 219, 0.2);
}

.auto-spin-status span {
    font-weight: bold;
    color: #3498db;
    font-size: 1.1em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Configure button state */
.btn.configure {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
    color: #212529;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.btn.configure:hover {
    background: linear-gradient(135deg, #e0a800 0%, #e8630a 100%);
}

/* Active auto spin button */
.btn.active {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
    }

    50% {
        box-shadow: 0 4px 20px rgba(40, 167, 69, 0.6);
    }
}

/* Responsive design for auto spin controls */
@media (max-width: 768px) {
    .lottery-main-buttons {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .auto-spin-controls {
        padding: 15px;
    }

    .auto-spin-buttons {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .auto-spin-buttons .btn {
        width: 100%;
        max-width: 200px;
        margin: 5px 0;
        padding: 10px 20px;
        font-size: 0.9em;
    }

    .auto-spin-info {
        flex-direction: column;
        gap: 8px;
    }

    .auto-spin-config {
        padding: 15px;
    }

    /* Ajustes para el modal de lotería en móviles - COPIANDO MY PLAYERS */
    #lotteryModal .professional-modal-content {
        margin: 5% auto !important;
        width: 95% !important;
        max-width: 95% !important;
        max-height: 90vh !important;
        height: 90vh !important;
        overflow: hidden !important;
        padding: 15px !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* FORZAR ESTILOS CON MÁXIMA ESPECIFICIDAD */
    body #lotteryModal .professional-modal-content,
    html #lotteryModal .professional-modal-content,
    #lotteryModal.professional-modal .professional-modal-content {
        margin: 5% auto !important;
        width: 95% !important;
        max-width: 95% !important;
        max-height: 90vh !important;
        height: 90vh !important;
        overflow: hidden !important;
        padding: 15px !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #lotteryModal .lottery-prizes {
        margin-top: 20px !important;
        padding: 15px !important;
        flex: 1 !important;
        overflow-y: auto !important;
        min-height: 0 !important;
    }

    .prizes-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .prize-item {
        padding: 12px !important;
        font-size: 0.9em !important;
    }

    .prizes-table-container {
        height: auto !important;
        overflow: visible !important;
    }
}

@media (max-width: 480px) {
    .auto-spin-buttons .btn {
        max-width: 180px;
        padding: 12px 16px;
        font-size: 0.8em;
    }

    .auto-spin-config {
        padding: 12px;
    }

    /* Ajustes adicionales para móviles muy pequeños - COPIANDO MY PLAYERS */
    #lotteryModal .professional-modal-content {
        margin: 2% auto !important;
        width: 98% !important;
        max-width: 98% !important;
        max-height: 95vh !important;
        height: 95vh !important;
        overflow: hidden !important;
        padding: 10px !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* FORZAR ESTILOS CON MÁXIMA ESPECIFICIDAD */
    body #lotteryModal .professional-modal-content,
    html #lotteryModal .professional-modal-content,
    #lotteryModal.professional-modal .professional-modal-content {
        margin: 2% auto !important;
        width: 98% !important;
        max-width: 98% !important;
        max-height: 95vh !important;
        height: 95vh !important;
        overflow: hidden !important;
        padding: 10px !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #lotteryModal .lottery-prizes {
        margin-top: 15px !important;
        padding: 10px !important;
        flex: 1 !important;
        overflow-y: auto !important;
        min-height: 0 !important;
    }

    .prizes-grid {
        gap: 8px !important;
    }

    .prizes-table-container {
        height: auto !important;
        overflow: visible !important;
    }

    .prize-item {
        padding: 10px !important;
        font-size: 0.85em !important;
    }

    .prize-item .prize-icon {
        font-size: 1.2em !important;
    }

    .prize-item .prize-name {
        font-size: 0.9em !important;
    }

    .prize-item .prize-chance {
        font-size: 0.8em !important;
    }
}

/* General responsive media safety */
img,
video,
canvas {
    max-width: 100%;
    height: auto;
}

/* Grids responsive: market & leagues */
.market-grid,
#marketContainer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.leagues-grid,
#leaguesContainer {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    align-items: stretch;
}

/* Filters responsive */
.market-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.market-filter .filter-group {
    flex: 1 1 160px;
    min-width: 140px;
}

.market-filter .form-control,
.market-filter select,
.market-filter input {
    width: 100%;
}

@media (max-width: 768px) {
    .market-filter {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .market-filter .filter-group {
        flex: none;
        min-width: auto;
    }

    .market-filter label {
        font-size: 0.9em;
        margin-bottom: 5px;
    }

    .market-filter select,
    .market-filter input {
        padding: 8px;
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .market-filter {
        padding: 12px;
        gap: 10px;
    }

    .market-filter label {
        font-size: 0.85em;
        font-weight: 600;
    }

    .market-filter select,
    .market-filter input {
        padding: 6px;
        font-size: 0.85em;
        border-radius: 6px;
    }
}

/* History responsive */
.market-history-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.market-history-container table {
    min-width: 640px;
    width: 100%;
}

/* Tabs responsive scroll (avoid overflow) */
.tab-buttons {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tab-buttons::-webkit-scrollbar {
    display: none;
}

/* --- Mobile-first responsive refinements --- */
@media (max-width: 768px) {
    .header-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        position: relative;
    }

    .header-right {
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .header-title {
        font-size: 1.4rem;
        text-align: center;
        width: 100%;
        order: 1;
        position: static !important;
        left: auto !important;
    }

    .theme-switch {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        order: 1;
        margin: 0 !important;
    }

    .header-logout-btn {
        order: 3 !important;
        width: 120px !important;
        padding: 8px 16px !important;
        font-size: 0.9em !important;
        border-radius: 6px !important;
    }

    .section.section-centered {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }

    /* Optimizar botones principales para tablets */
    .section-centered .btn {
        font-size: 0.9em !important;
        padding: 10px 16px !important;
        margin: 4px !important;
        white-space: nowrap;
    }

    .modal-content {
        width: 94vw !important;
        min-width: 0 !important;
        padding: 22px !important;
    }

    .leagues-grid,
    #leaguesContainer {
        grid-template-columns: repeat(2, 1fr);
    }

    .market-grid,
    #marketContainer {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .tab-buttons .tab-btn {
        white-space: nowrap;
    }

    .btn.btn-leaderboard,
    .btn.btn-lottery {
        white-space: nowrap;
        font-size: 0.8em !important;
        padding: 8px 12px !important;
        margin: 0 5px !important;
    }

    /* Market cards optimización para tablets */
    .market-player-card {
        height: auto;
        min-height: 220px;
        padding: 12px;
    }

    .market-player-card .player-face {
        width: 55px;
        height: 55px;
    }

    .market-player-card .player-name {
        font-size: 1.05em;
    }

    .market-player-card .player-stats span {
        font-size: 0.8em;
    }

    .market-player-card .price {
        font-size: 1.15em;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 15px;
    }

    .landing-content .main-logo {
        max-width: 65vw;
        height: auto;
    }

    .modal-content {
        width: 92vw !important;
        min-width: 0 !important;
        padding: 18px !important;
    }

    .modal-content h2,
    .modal-content h3 {
        font-size: 1.2rem;
    }

    .modal-content input,
    .modal-content select {
        font-size: 1rem;
    }

    .modal-content button.btn {
        width: 100%;
        font-size: 1rem;
    }

    /* Header optimizado para móviles pequeños */
    .header-container {
        gap: 8px !important;
    }

    .header-right {
        gap: 8px !important;
        flex-direction: row !important;
        width: auto !important;
        justify-content: center !important;
    }

    .header-title {
        font-size: 1.2rem !important;
        margin-bottom: 8px !important;
        position: static !important;
        left: auto !important;
    }

    .header-logout-btn {
        width: 35px !important;
        padding: 1px 2px !important;
        font-size: 0.6em !important;
        border-radius: 4px !important;
        height: 22px !important;
        min-height: 22px !important;
        max-height: 22px !important;
        line-height: 1 !important;
    }

    /* Contenedor de botones auxiliares en móviles pequeños */
    .auxiliary-buttons-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        margin-bottom: 6px !important;
        padding: 4px !important;
        width: 100% !important;
    }

    /* Botones auxiliares en móviles pequeños */
    .auxiliary-buttons-container .btn {
        width: calc(33.33% - 4px) !important;
        min-width: 0 !important;
        max-width: none !important;
        font-size: 0.7em !important;
        padding: 6px 3px !important;
        min-height: 32px !important;
        flex: 1 !important;
    }

    .tab-buttons {
        gap: 4px;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 5px;
    }

    .tab-buttons::-webkit-scrollbar {
        display: none;
    }

    .tab-btn {
        white-space: nowrap !important;
        min-width: auto !important;
        padding: 6px 8px !important;
        font-size: 0.75em !important;
        flex-shrink: 0 !important;
    }

    /* Botones Leaderboard y Lottery aún más pequeños en móviles */
    .btn.btn-leaderboard,
    .btn.btn-lottery {
        font-size: 0.7em !important;
        padding: 6px 8px !important;
        margin: 0 2px !important;
        border-radius: 4px !important;
    }

    /* Reducir espacios de los textos */
    #openLeaderboardBtn {
        min-width: auto !important;
    }

    #openLotteryBtn {
        min-width: auto !important;
    }

    /* Reorganización completa del menú para móviles pequeños */
    .tab-buttons-spread {
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .tab-buttons-left {
        order: 2 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 3px !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    /* Solución directa: flexbox para botones auxiliares en línea */
    .tab-buttons-spread {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    /* Crear wrapper visual para botones auxiliares */
    .tab-buttons-spread::before {
        content: '';
        order: 0;
        display: flex;
        gap: 2px;
        width: 100%;
    }

    /* Botones auxiliares centrados horizontalmente */
    .tab-buttons-spread>button:not(.tab-btn) {
        display: inline-block !important;
        float: none !important;
        clear: none !important;
        margin: 0 5px !important;
        vertical-align: top !important;
        /* Centrado horizontal */
        position: static !important;
    }

    /* Centrar los botones Leaderboard y Lottery */
    .tab-buttons-spread {
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
    }

    .tab-buttons-spread>button:not(.tab-btn) {
        margin: 0 !important;
        float: none !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
    }

    /* Contenedor centrado para botones auxiliares */
    .tab-buttons-spread {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    /* Botones auxiliares centrados horizontalmente */
    #openLeaderboardBtn,
    #openLotteryBtn {
        order: 0 !important;
        position: static !important;
        /* Botones más estrechos en móviles */
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
        margin: 0 5px !important;
        font-size: 0.7em !important;
        padding: 4px 2px !important;
        text-align: center !important;
        box-sizing: border-box !important;
        z-index: 10 !important;
        display: inline-block !important;
        /* Asegurar que todos los botones tengan exactamente el mismo tamaño */
        min-height: 28px !important;
        line-height: 1.2 !important;
        flex: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        /* Centrado horizontal */
        float: none !important;
        clear: none !important;
        vertical-align: top !important;
    }

    /* Contenedor centrado para botones auxiliares */
    .tab-buttons-spread {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    /* Botones auxiliares centrados horizontalmente */
    .tab-buttons-spread>button:not(.tab-btn) {
        display: inline-block !important;
        float: none !important;
        clear: none !important;
        margin: 0 5px !important;
        /* Centrado horizontal */
        vertical-align: top !important;
    }

    /* Pestañas principales con margen superior para no superponerse */
    .tab-buttons-left {
        order: 1 !important;
        margin-top: 10px !important;
        width: 100% !important;
    }

    /* Hacer que las pestañas principales sean más compactas */
    .tab-btn {
        padding: 4px 6px !important;
        font-size: 0.7em !important;
        margin: 1px !important;
        border-radius: 3px !important;
    }

    /* Iconos más pequeños */
    .tab-btn:before {
        font-size: 0.8em !important;
    }

    /* Ocultar texto en algunos botones para móviles muy pequeños si es necesario */
    .tab-btn[data-lang-key="deposit_withdraw_btn"] {
        font-size: 0.6em !important;
    }

    /* Mejorar legibilidad de botones de Leaderboard y Lottery */
    #openLeaderboardBtn,
    #openLotteryBtn {
        letter-spacing: -0.5px !important;
    }

    /* Estilos para botones auxiliares en PC */
    .auxiliary-buttons-container .btn {
        display: inline-block !important;
        vertical-align: top !important;
        margin: 0 5px !important;
        text-align: center !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        float: none !important;
        clear: none !important;
    }

    /* Forzar centrado en PC */
    .auxiliary-buttons-container {
        text-align: center !important;
        max-width: 100% !important;
        overflow: hidden !important;
        /* Centrado horizontal en PC */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        /* Asegurar centrado en PC */
        margin: 0 auto !important;
        /* Centrado horizontal */
        position: static !important;
        left: auto !important;
        transform: none !important;
        /* Asegurar que esté centrado */
        width: 100% !important;
    }

    /* Botones específicos en PC */
    .auxiliary-buttons-container #openLeaderboardBtn {
        width: 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;
        height: 45px !important;
        min-height: 45px !important;
        max-height: 45px !important;
        /* Centrado horizontal */
        margin: 0 10px !important;
        /* Asegurar que esté centrado */
        flex-shrink: 0 !important;
    }

    .auxiliary-buttons-container #openLotteryBtn {
        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
        height: 45px !important;
        min-height: 45px !important;
        max-height: 45px !important;
        /* Centrado horizontal */
        margin: 0 10px !important;
        /* Asegurar que esté centrado */
        flex-shrink: 0 !important;
    }

    .auxiliary-buttons-container #openAdminPanelBtn {
        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
        height: 45px !important;
        min-height: 45px !important;
        max-height: 45px !important;
    }

    /* Contenedor para botones auxiliares separado del menú */
    .auxiliary-buttons-container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 20px !important;
        margin-bottom: 20px !important;
        padding: 10px !important;
        width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: translateX(0) !important;
        box-sizing: border-box !important;
        /* Forzar centrado en PC */
        max-width: 100% !important;
        overflow: hidden !important;
        /* Centrado horizontal en PC */
        justify-content: center !important;
        align-items: center !important;
    }

    /* Market History aún más compacto para móviles pequeños */
    .purchase-history-item {
        padding: 6px 8px !important;
        min-height: 45px !important;
        margin-bottom: 4px !important;
        gap: 6px !important;
    }

    .purchase-icon {
        width: 30px !important;
        height: 30px !important;
    }

    .purchase-icon .icon {
        font-size: 14px !important;
    }

    .player-name {
        font-size: 0.8em !important;
        max-width: 100px !important;
    }

    .rarity-badge {
        font-size: 0.65em !important;
        padding: 1px 3px !important;
    }

    .transaction-info {
        font-size: 0.75em !important;
        gap: 2px 6px !important;
    }

    .transaction-date {
        font-size: 0.65em !important;
    }

    /* Botones principales aún más compactos para móviles pequeños */
    .section.section-centered {
        gap: 4px !important;
        margin-bottom: 15px !important;
    }

    .section-centered .btn {
        font-size: 0.75em !important;
        padding: 6px 10px !important;
        margin: 2px !important;
        min-width: auto !important;
        flex: 1 1 calc(33.33% - 4px) !important;
        max-width: calc(33.33% - 4px) !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }

    /* Hacer que los textos sean más cortos visualmente */
    #openTeamModalBtn,
    #openCreateTeamModalBtn,
    #openTeamsModalBtn {
        font-size: 0.7em !important;
        padding: 5px 8px !important;
        margin: 1px !important;
        border-radius: 4px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Ajustar ancho específico para que quepan los 3 botones */
    .section-centered .btn {
        flex: 1 1 calc(33% - 2px) !important;
        max-width: calc(33% - 2px) !important;
    }

    /* Para pantallas muy pequeñas, usar principalmente iconos */
    @media (max-width: 360px) {

        #openTeamModalBtn,
        #openCreateTeamModalBtn,
        #openTeamsModalBtn {
            font-size: 0.65em !important;
            padding: 4px 6px !important;
            line-height: 1.1 !important;
        }

        .section-centered .btn {
            flex: 1 1 calc(33% - 1px) !important;
            max-width: calc(33% - 1px) !important;
            margin: 0.5px !important;
        }
    }

    /* Stats bar aún más compacto para móviles pequeños */
    .stats-bar {
        gap: 6px !important;
        padding: 8px !important;
        margin: 8px 0 !important;
    }

    .stat-item {
        padding: 4px 2px !important;
        min-height: 45px !important;
        border-radius: 4px !important;
    }

    .stat-value {
        font-size: 1.1em !important;
    }

    .stat-item>div:last-child {
        font-size: 0.7em !important;
    }

    /* Headers de modales específicos - mobile */
    .modal-content>div:first-child {
        padding: 8px 10px !important;
    }

    .modal-content>div:first-child h3 {
        font-size: 1.1em !important;
    }

    .modal-content>div:first-child p {
        font-size: 0.8em !important;
        margin: 2px 0 !important;
    }

    .modal-content>div:first-child button {
        padding: 6px 12px !important;
        font-size: 0.85em !important;
        min-width: 80px !important;
    }







    /* Market específico para móviles pequeños */
    .market-grid,
    #marketContainer {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .market-player-card {
        height: auto !important;
        min-height: 200px !important;
        padding: 12px !important;
    }

    .market-player-card .player-header {
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    .market-player-card .player-face {
        width: 50px !important;
        height: 50px !important;
    }

    .market-player-card .player-name {
        font-size: 1em !important;
    }

    .market-player-card .player-stats {
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    .market-player-card .player-stats span {
        font-size: 0.75em !important;
        padding: 1px 4px !important;
    }

    .market-player-card .market-info {
        margin-top: 8px !important;
        padding-top: 8px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .market-player-card .price {
        font-size: 1.1em !important;
    }

    .market-player-card .rarity-inline {
        font-size: 0.65em !important;
        padding: 3px 6px !important;
    }

    .market-player-card .market-actions {
        margin-top: 8px !important;
    }

    .market-player-card .btn-buy,
    .market-player-card .btn-cancel {
        padding: 6px 12px !important;
        font-size: 0.85em !important;
    }

    /* League History específico para móviles pequeños */
    #matchHistoryList {
        padding: 5px !important;
        max-height: 70vh !important;
    }

    .history-item {
        padding: 10px 8px !important;
        margin: 4px 0 !important;
        border-radius: 6px !important;

        /* Layout vertical para móviles pequeños */
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        align-items: stretch !important;
        text-align: center !important;
    }

    /* Primera fila: Resultado y oro */
    .history-item .history-result {
        order: 1 !important;
        align-self: center !important;
        font-size: 0.75em !important;
        padding: 3px 6px !important;
        border-radius: 4px !important;
        margin-bottom: 2px !important;
    }

    .history-item .history-gold {
        order: 2 !important;
        font-size: 0.8em !important;
        text-align: center !important;
        color: #ffd700 !important;
        font-weight: bold !important;
        margin-bottom: 4px !important;
    }

    /* Segunda fila: Equipo */
    .history-item .history-team {
        order: 3 !important;
        font-size: 0.85em !important;
        font-weight: bold !important;
        text-align: center !important;
        margin-bottom: 2px !important;
    }

    /* Tercera fila: Liga y fecha */
    .history-item .history-league {
        order: 4 !important;
        font-size: 0.7em !important;
        text-align: center !important;
        opacity: 0.8 !important;
    }

    .history-item .history-date {
        order: 5 !important;
        font-size: 0.65em !important;
        text-align: center !important;
        opacity: 0.6 !important;
        margin-top: 2px !important;
    }
}

@media (max-height: 700px) {
    .modal-content {
        max-height: 92vh !important;
        overflow-y: auto;
    }
}

/* === OVERRIDE FINAL PARA LIGAS EN MÓVIL === */
@media (max-width: 480px) {

    .leagues-grid,
    #leaguesContainer {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .league-card {
        min-height: 280px !important;
        padding: 16px !important;
    }
}

/* === ESTILOS PARA BOTÓN DE LOGOUT === */
#logoutBtn {
    background: var(--color-btn-secondary) !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 0.9em !important;
}

/* === ESTILOS UNIFICADOS PARA BOTONES AUXILIARES EN PC === */
#openLeaderboardBtn,
#openLotteryBtn,
#logoutBtn {
    /* Tamaño unificado para PC */
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
    /* Alineación y espaciado */
    display: inline-block !important;
    vertical-align: top !important;
    margin: 0 5px !important;
    /* Flexbox controlado */
    flex: 0 0 160px !important;
    /* Texto centrado */
    text-align: center !important;
    /* Box model */
    box-sizing: border-box !important;
    /* Overflow controlado */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    /* Asegurar que estén centrados */
    flex-shrink: 0 !important;
}

/* Centrado específico para PC */
@media (min-width: 769px) {
    .auxiliary-buttons-container {
        justify-content: center !important;
        text-align: center !important;
        /* Forzar centrado horizontal */
        display: flex !important;
        align-items: center !important;
        /* Asegurar centrado en PC */
        margin: 0 auto !important;
        /* Centrado horizontal */
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        /* Asegurar que esté centrado */
        width: fit-content !important;
        /* Centrado horizontal */
        justify-content: center !important;
        /* Centrado horizontal */
        align-items: center !important;
        /* Centrado horizontal */
        text-align: center !important;
        /* Centrado horizontal */
        margin: 0 auto !important;
        /* Centrado horizontal */
        justify-content: center !important;
        /* Centrado horizontal */
        align-items: center !important;
        /* Centrado horizontal */
        text-align: center !important;
        /* Centrado horizontal */
        margin: 0 auto !important;
        /* Centrado horizontal */
        justify-content: center !important;
        /* Centrado horizontal */
        align-items: center !important;
        /* Centrado horizontal */
        text-align: center !important;
        /* Centrado horizontal */
        margin: 0 auto !important;
        /* Centrado horizontal */
        justify-content: center !important;
        /* Centrado horizontal */
        align-items: center !important;
    }

    .auxiliary-buttons-container #openLeaderboardBtn,
    .auxiliary-buttons-container #openLotteryBtn {
        margin: 0 10px !important;
        /* Asegurar que estén centrados */
        flex-shrink: 0 !important;
    }
}

/* Botón Leaderboard específico para PC - más ancho */
#openLeaderboardBtn {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    flex: 0 0 180px !important;
}

#logoutBtn:hover {
    background: var(--color-btn-secondary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

#logoutBtn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

/* Responsive para logout en móviles */
@media (max-width: 768px) {
    #logoutBtn {
        padding: 8px 16px !important;
        font-size: 0.8em !important;
        letter-spacing: 0.5px !important;
        order: 0 !important;
        margin: 5px !important;
        width: auto !important;
        max-width: none !important;
        display: inline-block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 100 !important;
    }

    /* Asegurar que el botón de logout esté visible en la navegación */
    .tab-buttons-spread>#logoutBtn {
        order: 0 !important;
        margin: 5px !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 480px) {
    #logoutBtn {
        order: 0 !important;
        margin: 1px !important;
        padding: 4px 2px !important;
        font-size: 0.65em !important;
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        display: inline-block !important;
        letter-spacing: 0.3px !important;
        /* Asegurar que coincida exactamente con Leaderboard y Lottery */
        min-height: 28px !important;
        line-height: 1.2 !important;
        flex: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        float: left !important;
        clear: none !important;
        /* Forzar alineación horizontal */
        vertical-align: top !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }

    /* Asegurar que el botón de logout esté visible en móviles pequeños */
    .tab-buttons-spread>#logoutBtn {
        order: 0 !important;
        margin: 3px !important;
        flex-shrink: 0 !important;
        position: relative !important;
        transform: none !important;
    }

    /* Botones auxiliares (Leaderboard, Lottery, Logout) en línea horizontal */
    #openLeaderboardBtn,
    #openLotteryBtn,
    #logoutBtn {
        order: 0 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
        margin: 1px !important;
        font-size: 0.7em !important;
        padding: 4px 2px !important;
        text-align: center !important;
        box-sizing: border-box !important;
        z-index: 10 !important;
        /* Asegurar que todos los botones tengan exactamente el mismo tamaño */
        min-height: 28px !important;
        line-height: 1.2 !important;
        flex: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        float: left !important;
        clear: none !important;
        /* Forzar alineación horizontal */
        vertical-align: top !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        /* Eliminar cualquier margen que pueda causar saltos */
        margin-left: 1px !important;
        margin-right: 1px !important;
        /* Asegurar que no se salgan de la pantalla */
        box-sizing: border-box !important;
    }

    /* Pestañas principales con margen superior para no superponerse */
    .tab-buttons-left {
        order: 2 !important;
        margin-top: 10px !important;
        width: 100% !important;
    }
}

@media (max-width: 360px) {

    /* Header optimizado para móviles muy pequeños */
    .header-container {
        gap: 6px !important;
    }

    .header-right {
        gap: 6px !important;
        flex-direction: row !important;
        width: auto !important;
        justify-content: center !important;
    }

    .header-title {
        font-size: 1.1rem !important;
        margin-bottom: 6px !important;
        position: static !important;
        left: auto !important;
    }

    .header-logout-btn {
        width: 30px !important;
        padding: 1px 1px !important;
        font-size: 0.55em !important;
        border-radius: 4px !important;
        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
        line-height: 1 !important;
    }

    /* Contenedor de botones auxiliares en móviles muy pequeños */
    .auxiliary-buttons-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
        margin-bottom: 4px !important;
        padding: 3px !important;
        width: 100% !important;
    }

    /* Botones auxiliares en móviles muy pequeños */
    .auxiliary-buttons-container .btn {
        width: calc(33.33% - 3px) !important;
        min-width: 0 !important;
        max-width: none !important;
        font-size: 0.65em !important;
        padding: 4px 2px !important;
        min-height: 28px !important;
        /* Asegurar que no se salgan de la pantalla */
        box-sizing: border-box !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        flex: 1 !important;
    }

    #logoutBtn {
        font-size: 0.6em !important;
        padding: 3px 1px !important;
        margin: 1px !important;
        letter-spacing: 0.2px !important;
        /* Mantener consistencia de tamaño */
        min-height: 26px !important;
        line-height: 1.2 !important;
        /* Calcular ancho para ocupar todo el dispositivo */
        width: calc((100vw - 20px) / 3) !important;
        min-width: 70px !important;
        max-width: 80px !important;
        flex: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        float: left !important;
        clear: none !important;
        /* Forzar alineación horizontal */
        vertical-align: top !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        /* Eliminar cualquier margen que pueda causar saltos */
        margin-left: 1px !important;
        margin-right: 1px !important;
        /* Asegurar que no se salgan de la pantalla */
        box-sizing: border-box !important;
    }

    /* Botones auxiliares en línea horizontal para móviles muy pequeños */
    #openLeaderboardBtn,
    #openLotteryBtn,
    #open-referral-modal-btn {
        font-size: 0.65em !important;
        padding: 4px 2px !important;
        margin: 0 2px !important;
        min-height: 28px !important;
        line-height: 1.2 !important;
        /* Botones ajustados para móviles muy pequeños */
        width: calc(33.33% - 2px) !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        float: none !important;
        clear: none !important;
        /* Centrado horizontal */
        vertical-align: top !important;
        display: inline-block !important;
        /* Asegurar que no se salgan de la pantalla */
        box-sizing: border-box !important;
    }

    /* Contenedor principal para botones auxiliares en móviles muy pequeños */
    .tab-buttons-spread {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    /* Botones auxiliares en línea horizontal */
    .tab-buttons-spread>button:not(.tab-btn) {
        display: inline-block !important;
        float: none !important;
        clear: none !important;
        margin: 0 3px !important;
        vertical-align: top !important;
    }
}

/* === ULTRA ESPECÍFICO - SOBRESCRIBIR TODO === */
/* FORZAR CENTRADO EN PC */
@media (min-width: 769px) {
    .auxiliary-buttons-container {
        position: static !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin: 0 auto !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    .auxiliary-buttons-container #openLeaderboardBtn,
    .auxiliary-buttons-container #openLotteryBtn {
        margin: 0 10px !important;
        flex-shrink: 0 !important;
    }
}

/* === ESTILOS PARA LOS 3 CUADROS SEPARADOS === */
/* Espaciado entre cuadros */
.section+.section {
    margin-top: 20px !important;
}

/* Cuadro 2: Botones auxiliares centrados */
.section.section-centered .auxiliary-buttons-container {
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

/* Cuadro 3: Menú de pestañas centrado en PC */
@media (min-width: 769px) {
    .tab-buttons {
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        display: flex !important;
    }

    .tab-buttons-left {
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
        gap: 15px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        max-width: 100% !important;
    }

    .tab-btn {
        margin: 0 5px !important;
        flex-shrink: 0 !important;
        text-align: center !important;
    }

    /* Contenedor de pestañas centrado */
    .tab-container {
        text-align: center !important;
    }
}

/* Estilos para el botón de cerrar todas las pestañas */
.tab-close-all {
    background: #ffffff !important;
    color: #e74c3c !important;
    border: 2px solid #e74c3c !important;
    border-radius: 50% !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    margin-left: 15px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
    font-weight: bold !important;
    text-shadow: none !important;
    min-width: 30px !important;
    max-width: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.tab-close-all:hover {
    background: #e74c3c !important;
    color: #ffffff !important;
    border-color: #e74c3c !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4) !important;
}

/* Responsive mejorado para el botón de cerrar */
@media (max-width: 768px) {
    .tab-close-all {
        width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
        margin-left: 8px !important;
        border-width: 1.5px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
    }
}

@media (max-width: 480px) {
    .tab-close-all {
        width: 22px !important;
        height: 22px !important;
        font-size: 11px !important;
        margin-left: 6px !important;
        border-width: 1px !important;
        min-width: 22px !important;
        max-width: 22px !important;
        min-height: 22px !important;
        max-height: 22px !important;
    }
}

/* Botones auxiliares en el cuadro separado */
.section.section-centered .auxiliary-buttons-container .btn {
    margin: 0 5px !important;
    flex-shrink: 0 !important;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .section+.section {
        margin-top: 15px !important;
    }

    .section.section-centered .auxiliary-buttons-container {
        gap: 10px !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .section.section-centered .auxiliary-buttons-container .btn {
        margin: 5px !important;
        width: auto !important;
        min-width: 120px !important;
        max-width: none !important;
        flex: 1 !important;
    }
}

/* FORZAR TAMAÑO EN MÓVIL */
@media (max-width: 600px) {
    .auxiliary-buttons-container {
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        padding: 5px !important;
        width: 100% !important;
    }

    .auxiliary-buttons-container #openLeaderboardBtn,
    .auxiliary-buttons-container #openLotteryBtn,
    .auxiliary-buttons-container #open-referral-modal-btn {
        width: calc(33.33% - 6px) !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 40px !important;
        min-height: 40px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 0.8em !important;
        padding: 8px 4px !important;
        display: inline-block !important;
        float: none !important;
        flex: 1 !important;
        margin: 0 2px !important;
    }
}

/* FORZAR ORDEN TEMA/LOGOUT */
.header-right .theme-switch {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
}

/* PC: Selector de tema a la izquierda */
@media (min-width: 769px) {
    .header-right .theme-switch {
        position: absolute !important;
        top: 20px !important;
        left: 20px !important;
        right: auto !important;
    }
}

/* FORZAR X BLANCA EN BOTONES DE CERRAR */
#closeTeamModalBtn span:first-child,
#closeCreateTeamModalBtn span:first-child,
#closeTeamsModalBtn span:first-child,
button[onclick*="closeEditTeamModal"] span:first-child {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Asegurar que el emoji ❌ sea blanco */
#closeTeamModalBtn span:first-child::before,
#closeCreateTeamModalBtn span:first-child::before,
#closeTeamsModalBtn span:first-child::before,
button[onclick*="closeEditTeamModal"] span:first-child::before {
    color: #ffffff !important;
}

/* FORZAR X BLANCA EN MODAL DE EDIT TEAM - ESTILOS ULTRA ESPECÍFICOS */
#closeEditTeamModalBtn span:first-child,
#closeEditTeamModalBtn span:first-child *,
#closeEditTeamModalBtn span:first-child::before,
#closeEditTeamModalBtn span:first-child::after {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Forzar todos los spans dentro del botón de cerrar del modal de edit */
#closeEditTeamModalBtn span {
    color: #ffffff !important;
}

/* FORZAR X BLANCA EN TODOS LOS BOTONES DE CERRAR - ESTILOS FINALES */
#closeTeamModalBtn span:first-child,
#closeCreateTeamModalBtn span:first-child,
#closeTeamsModalBtn span:first-child,
#closeEditTeamModalBtn span:first-child {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Estilos globales para botones de cerrar de modales profesionales */
.professional-modal-close {
    background: #e74c3c !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 35px !important;
    height: 35px !important;
    cursor: pointer !important;
    font-size: 1.3em !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.professional-modal-close:hover {
    transform: scale(1.1) !important;
    background: #c0392b !important;
}

/* Estilos globales para modales profesionales */
.professional-modal-content {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
    border: 3px solid #ffd700 !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
    overflow-y: auto !important;
    max-height: 90vh !important;
    position: relative !important;
    max-width: 600px !important;
    width: 95% !important;
}



/* Asegurar que los encabezados profesionales tengan el estilo correcto */
.professional-modal-header {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%) !important;
    border-radius: 20px 20px 0 0 !important;
    border-bottom: 2px solid #333 !important;
    padding: 20px !important;
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    /* Asegurar que la barra amarilla llegue hasta el final */
    margin: -3px -3px 0 -3px !important;
    width: calc(100% + 6px) !important;
}



/* Asegurar que los modales con clase modal funcionen correctamente */
.modal.professional-modal-content {
    display: none !important;
    position: fixed !important;
    z-index: 10000 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Estilos para el título del modal profesional */
.professional-modal-title {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex: 1 !important;
}

.professional-modal-icon {
    font-size: 2em !important;
    color: #333 !important;
}

.professional-modal-title-text h3 {
    color: #333 !important;
    margin: 0 !important;
    font-size: 1.5em !important;
    font-weight: bold !important;
}

.professional-modal-title-text p {
    color: #555 !important;
    margin: 5px 0 0 0 !important;
    font-size: 1em !important;
}

/* === ESTILOS ESPECÍFICOS PARA LA LANDING PAGE === */
#landing-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

#landing-page .landing-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
}

#landing-page .landing-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 600px;
    padding: 40px 20px;
    margin: 0 auto;
    width: 100%;
}

#landing-page .landing-logo {
    margin-bottom: 30px;
}

#landing-page .main-logo {
    max-width: 280px;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

#landing-page h1 {
    font-size: 4em;
    font-weight: bold;
    margin: 20px 0;
    color: #ffd700;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

#landing-page p {
    font-size: 1.3em;
    margin: 20px 0 40px 0;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    line-height: 1.6;
    max-width: 500px;
}

#landing-page .btn-primary {
    background: linear-gradient(135deg, #ffd700, #ffed4e) !important;
    color: #000000 !important;
    font-size: 1.2em;
    font-weight: bold;
    padding: 18px 40px;
    border-radius: 50px;
    border: none;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    min-width: 200px;
}

#landing-page .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(255, 215, 0, 0.6);
    background: linear-gradient(135deg, #ffed4e, #ffd700) !important;
}

#landing-page .btn-primary:active {
    transform: translateY(-1px);
}

/* Responsive design para la landing page */
@media (max-width: 768px) {
    #landing-page h1 {
        font-size: 3em;
        gap: 15px;
    }

    #landing-page p {
        font-size: 1.1em;
        padding: 0 20px;
    }

    #landing-page .btn-primary {
        font-size: 1.1em;
        padding: 16px 32px;
        min-width: 180px;
    }

    #landing-page .main-logo {
        max-width: 220px;
    }
}

@media (max-width: 480px) {
    #landing-page h1 {
        font-size: 2.5em;
        gap: 12px;
    }

    #landing-page p {
        font-size: 1em;
        padding: 0 15px;
    }

    #landing-page .btn-primary {
        font-size: 1em;
        padding: 14px 28px;
        min-width: 160px;
    }

    #landing-page .main-logo {
        max-width: 180px;
    }
}

/* Estilos específicos para el título con balones */
#landing-page h1 {
    font-size: 4em;
    font-weight: bold;
    margin: 20px 0;
    color: #ffd700;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
    letter-spacing: 2px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: nowrap;
    width: 100%;
    text-align: center;
}

/* Estilos para el texto del título */
#landing-page h1 .title-text {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    text-align: center;
}

/* Centrar todo el título como una unidad */
#landing-page h1 {
    text-align: center;
    justify-content: center;
}

/* Estilos para los balones - posicionados a izquierda y derecha */
#landing-page h1 .basketball-left,
#landing-page h1 .basketball-right {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.2em;
    flex-shrink: 0;
    line-height: 1;
    margin: 0;
    padding: 0;
}

/* Asegurar que la landing page siempre esté centrada */
#landing-page * {
    box-sizing: border-box;
}

/* Prevenir que otros estilos afecten la landing page */
#landing-page .landing-content>* {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* Asegurar que el título esté en línea horizontal */
#landing-page h1 {
    white-space: nowrap !important;
    overflow: visible !important;
}