:root {
    /* Paleta de Colores Extraída */
    --primary: #003f87;
    --primary-container: #0056b3;
    --on-primary: #ffffff;
    --error: #ba1a1a;
    --success: #00681a;
    
    --background: #f8f9fa;
    --surface: #f8f9fa;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f3f4f5;
    --surface-container-high: #e7e8e9;
    
    --on-surface: #191c1d;
    --on-surface-variant: #424752;
    
    /* Fuentes */
    --font-headline: 'Manrope', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* Reset Básico */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body); background-color: var(--background); color: var(--on-surface); }

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
    display: inline-block;
    width: 1em;
    height: 1em;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1;
}

/* Componentes: Navbar */
.navbar {
    position: fixed; top: 0; width: 100%; z-index: 50;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 6px -1px rgba(0, 63, 135, 0.05);
}
.navbar-content {
    max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; height: 5rem;
    display: flex; align-items: center; justify-content: space-between;
}
.nav-brand { font-size: 1.5rem; font-weight: 900; color: #1e3a8a; letter-spacing: -0.05em; font-family: var(--font-headline); }
.nav-links { display: flex; gap: 1.5rem; align-items: center; }
.nav-desktop-menu { display: flex; gap: 1.5rem; margin-left: 2rem; } /* Nueva clase para el menú */
.nav-link { font-weight: 600; font-size: 0.875rem; color: #475569; text-decoration: none; border-bottom: 2px solid transparent; }
.nav-link.active { color: #1d4ed8; border-bottom: 2px solid #2563eb; }
.btn-whatsapp {
    background-color: #25D366; color: white; padding: 0.625rem 1.5rem;
    border-radius: 9999px; font-weight: 700; font-size: 0.875rem;
    border: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem;
    transition: background-color 0.2s, transform 0.1s;
}
.btn-whatsapp:hover { background-color: #20ba5a; transform: translateY(-1px); }

/* Layout Principal */
.main-container { padding-top: 8rem; padding-bottom: 2rem; max-width: 80rem; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }

/* Hero Section */
.hero-card {
    position: relative; overflow: hidden; border-radius: 0.75rem;
    background: linear-gradient(to bottom right, var(--primary), var(--primary-container));
    padding: 2rem; box-shadow: 0 20px 25px -5px rgba(0, 63, 135, 0.2);
    color: white; margin-bottom: 3rem;
}
.hero-content { position: relative; z-index: 10; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 2rem; }

/* Estilo de Bandera Supercell */
.badge-elite {
    display: inline-block;
    background: #002d61; /* Una variante más oscura del --primary para contraste */
    color: var(--surface-container-lowest); /* Blanco puro del tema */
    padding: 0.6rem 1rem 1.5rem 1rem;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 85%, 0% 100%);
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.25)); /* Sombra que sigue la forma de la bandera */
    border-top: 3px solid #eab308; /* El mismo dorado del icono military_tech */
}
.hero-title { font-family: var(--font-headline); font-size: 3rem; font-weight: 800; line-height: 1; margin: 1rem 0; }
.stat-group { display: flex; gap: 2rem; }
.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra la etiqueta y el grupo de abajo horizontalmente */
    text-align: center;
}
.stat-item span:first-child { color: #bfdbfe; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.stat-with-icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--font-headline);
}
.hero-card .stat-with-icon .material-symbols-outlined {
    font-size: 2rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
    transform: translateY(3px); /* Ajuste visual para bajar el icono y alinearlo con los números */
}
.btn-join {
    background-color: white; color: var(--primary); padding: 1rem 2rem;
    border-radius: 0.75rem; font-weight: 800; font-size: 1.125rem; border: none; cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); transition: transform 0.1s;
}
.hero-decoration {
    position: absolute; right: -5rem; bottom: -5rem; width: 20rem; height: 20rem;
    background: rgba(255,255,255,0.05); border-radius: 50%; filter: blur(40px);
}
.btn-join:active { transform: scale(0.98); }

/* Grid de Resumen */
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-bottom: 4rem; }
.info-card {
    background-color: var(--surface-container-lowest); padding: 1.5rem; border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); display: flex; flex-direction: column; justify-content: space-between;
    min-height: 180px; /* Altura mínima para consistencia */
}
.info-card-row { flex-direction: row; align-items: center; justify-content: flex-start; gap: 1.25rem; }
.card-label { font-size: 0.625rem; font-weight: 700; color: var(--on-surface-variant); text-transform: uppercase; letter-spacing: 0.15em; }
.status-active { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.status-dot { width: 0.625rem; height: 0.625rem; background-color: var(--success); border-radius: 50%; }
.card-value { font-size: 1.25rem; font-weight: 700; font-family: var(--font-headline); }
.time-badge { background-color: #dcfce7; color: var(--tertiary); padding: 0.5rem 1rem; border-radius: 0.5rem; display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 800; }

/* Utilidades de Tarjetas */
.mt-8 { margin-top: 2rem; }
.participants-stats { margin-top: 1rem; display: flex; align-items: baseline; gap: 0.5rem; }
.stat-value-lg { font-size: 3.5rem; font-weight: 800; color: var(--primary); }
.progress-container { margin-top: 1.5rem; width: 100%; background: var(--surface-container-low); height: 0.5rem; border-radius: 9999px; }
.progress-bar { background: var(--primary); height: 100%; width: 26%; border-radius: 9999px; }
.card-value-spacing { margin-top: 0.5rem; }
.subtext { margin-top: 0.25rem; color: var(--on-surface-variant); }
.leader-badge {
    margin-top: 0.75rem; display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.25rem 0.75rem; background: #fef9c3; color: #854d0e; border-radius: 9999px; font-size: 0.75rem; font-weight: 700;
}
.leader-badge .material-symbols-outlined { font-size: 1rem; }
.top-player-avatar { width: 6rem; height: 6rem; background: #fffbeb; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-gold { color: #eab308; font-size: 4rem; } /* Aumentado el tamaño del icono */

/* Sección de Reglas */
.rules-section { margin-bottom: 3rem; }
.rules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.rule-card { 
    background: #f0f7ff; 
    padding: 1.25rem; 
    border-radius: 0.75rem; 
    display: flex; 
    align-items: flex-start; 
    gap: 1rem;
    border-left: 4px solid var(--primary);
    box-shadow: 0 2px 4px rgba(0, 63, 135, 0.05);
}
.rule-card span { color: var(--primary); font-size: 1.5rem; }
.rule-card h4 { font-family: var(--font-headline); font-size: 0.9rem; font-weight: 800; margin-bottom: 0.25rem; color: var(--primary); }
.rule-card p { font-size: 0.8rem; color: var(--on-surface-variant); line-height: 1.4; }

/* Tabla */
.table-section { background-color: var(--surface-container-lowest); border-radius: 0.75rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); overflow: hidden; }
.table-header-left { display: flex; align-items: center; gap: 1rem; }
.table-icon { font-size: 1.75rem; color: var(--primary); flex-shrink: 0; }
.update-info { font-size: 0.75rem; font-weight: 600; color: var(--on-surface-variant); }
.table-scroll { overflow-x: auto; }
.table-header { padding: 1.5rem 2rem; border-bottom: 1px solid var(--surface-container-low); display: flex; justify-content: space-between; align-items: center; }
.table-title { font-size: 1.5rem; font-weight: 800; font-family: var(--font-headline); margin-right: 1rem; }

.data-table { width: 100%; border-collapse: collapse; text-align: left; }
.data-table th {
    padding: 1rem 2rem; font-size: 0.625rem; color: var(--on-surface-variant);
    text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; background-color: var(--surface-container-low); vertical-align: middle;
}
.data-table td { padding: 1.25rem 2rem; border-bottom: 1px solid var(--surface-container-low); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover { background-color: var(--surface-container-low); transition: background-color 0.2s; }

/* Utilidades Tabla */
.player-info { display: flex; align-items: center; gap: 0.75rem; justify-content: flex-start; }
.rank-circle { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; margin: 0 auto; }
.rank-1 { background-color: #fef9c3; color: #854d0e; border: 1px solid #fde047; } /* Oro refinado */
.rank-2 { background-color: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; } /* Plata azulada */
.rank-3 { background-color: #ffedd5; color: #9a3412; border: 1px solid #fed7aa; } /* Bronce suave */
.text-headline-bold { font-weight: 700; font-family: var(--font-headline); }
.text-tertiary-color { color: var(--tertiary); }
.text-variant-color { color: var(--on-surface-variant); }
.text-points { font-size: 1.125rem; }
.deck-badge { background: var(--surface-container-high); padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 700; font-family: monospace; }

.text-center { text-align: center; }
.text-right { text-align: right; }
.font-bold { font-weight: 700; }
.text-primary { color: var(--primary); }

/* Footer */
footer { margin-top: 1rem; padding: 3rem 0; border-top: 1px solid var(--surface-container-low); background-color: #f8fafc; }
.footer-content { max-width: 80rem; margin: 0 auto; padding: 0 2rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; }
.footer-brand-container { text-align: left; }
.footer-brand-name { display: block; font-weight: 700; color: #1e3a8a; font-family: var(--font-headline); }
.footer-copyright { font-size: 0.75rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-top: 0.5rem; }
.footer-links a { color: #64748b; text-decoration: none; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; margin-left: 2rem; }
.footer-links a:hover { color: var(--primary); }

@media (max-width: 768px) {
    /* Navbar más compacta */
    .navbar-content { padding: 0 1rem; }
    
    .nav-brand { font-size: 1.25rem; }
    .btn-whatsapp { padding: 0.5rem 1rem; font-size: 0.75rem; }

    /* Ajustes de Layout */
    .main-container { padding-top: 6rem; padding-left: 1rem; padding-right: 1rem; }

    /* Hero Section vertical */
    .hero-title { font-size: 2.25rem; }
    .hero-content { flex-direction: column; align-items: flex-start; }
    .stat-group { width: 100%; justify-content: space-between; margin-bottom: 0.5rem; }
    .btn-join { width: 100%; text-align: center; margin-top: 1rem; }
    
    .hero-card .stat-with-icon .material-symbols-outlined {
        font-size: 1.75rem !important; /* Un poco más pequeño para móviles */
    }

    /* Grid en una sola columna */
    .summary-grid { grid-template-columns: 1fr; gap: 1rem; }
    
    /* Ajuste para la tarjeta del Top Player en móviles */
    .info-card-row { flex-direction: row; align-items: center; text-align: left; }
    .top-player-avatar { width: 4rem; height: 4rem; margin-bottom: 0; }
    .icon-gold { font-size: 2.5rem !important; }

    /* Footer vertical */
    .footer-content { flex-direction: column; align-items: center; text-align: center; }
    .footer-brand-container { text-align: center; }
    .footer-links { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
    .footer-links a { margin: 0; }

    /* --- Tabla Compacta (Sin Scroll) --- */
    .table-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .table-section { overflow-x: hidden; } /* Evita scroll */
    
    .data-table { width: 100%; }
    
    .data-table th, .data-table td { 
        padding: 0.75rem 0.1rem; /* Ajuste milimétrico para 9 columnas */
        font-size: 0.7rem; /* Letra más pequeña para que quepan los números */
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
    }
    
    /* Ajustes columna Puesto (#) */
    .data-table th:first-child, .data-table td:first-child { 
        width: 10%;
    }

    /* Ajustes columna Jugador */
    .data-table th:nth-child(2), .data-table td:nth-child(2) { 
        text-align: left; 
        padding-left: 0.1rem;
        width: 22%; /* Reducido para acercar la columna 'Visto' */
    }
    
    /* Elementos visuales más pequeños */
    .player-info { gap: 0; justify-content: flex-start; }
    .rank-circle { width: 1.25rem; height: 1.25rem; font-size: 0.6rem; }
    .player-info > span { overflow: hidden; text-overflow: ellipsis; max-width: 70px; display: inline-block; vertical-align: middle; }

    /* Truco CSS: Reemplazar textos largos por iniciales en cabeceras */
    .data-table th { font-size: 0; } /* Oculta el texto original (Victorias) */
    .data-table th:first-child { font-size: 0.7rem; } /* Mantiene 'Puesto' visible */
    .data-table th:nth-child(2) { font-size: 0.7rem; } /* Mantiene 'Jugador' visible */
    .data-table th:nth-child(3)::before { content: 'Visto'; font-size: 0.7rem; color: var(--on-surface-variant); }
    .data-table th:nth-child(4)::before { content: 'J'; font-size: 0.7rem; color: var(--on-surface-variant); }
    .data-table th:nth-child(5)::before { content: 'V'; font-size: 0.7rem; color: var(--on-surface-variant); }
    .data-table th:nth-child(6)::before { content: 'S'; font-size: 0.7rem; color: var(--on-surface-variant); }
    .data-table th:nth-child(7)::before { content: 'D'; font-size: 0.7rem; color: var(--on-surface-variant); }
    .data-table th:nth-child(8)::before { content: 'Total'; font-size: 0.7rem;  color: var(--on-surface-variant); }
    .data-table th:nth-child(9)::before { content: 'Mazos'; font-size: 0.7rem; color: var(--on-surface-variant); }
}