/* Reset y Variables */
@font-face {
    font-family: 'Montecatini Pro Stretto Ultra';
    src: url('../fonts/montecatini-pro-stretto-ultra.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montecatini Pro Ampio Bold';
    src: url('../fonts/montecatini-pro-ampio-bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montecatini Pro Largo Bold';
    src: url('../fonts/montecatini-pro-largo-bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Colores principales */
    --color-primary: #0046ad; /* Azul Nacional */
    --color-secondary: #FFFFFF; /* Blanco */
    --color-accent: #c00c30; /* Rojo Nacional */
    
    /* Fondos */
    --color-bg-dark: #0019FF;
    --color-bg-darker: #050d18;
    --color-card-bg: #0019FF;
    --color-card-hover: #1a3050;
    --bg-trophies-opacity: 0.5;
    
    /* Textos */
    --color-text: #e6f1ff;
    --color-text-secondary: #8892b0;
    
    /* Estados */
    --color-success: #00d4aa;
    --color-error: #c00c30;
    
    /* Opacidades con variables */
    --primary-alpha-10: rgba(0, 71, 171, 0.1);
    --primary-alpha-20: rgba(0, 71, 171, 0.2);
    --primary-alpha-30: rgba(0, 71, 171, 0.3);
    --primary-alpha-40: rgba(0, 71, 171, 0.4);
    --primary-alpha-50: rgba(0, 71, 171, 0.5);
    --primary-alpha-80: rgba(17, 34, 64, 0.8);
    
    --white-alpha-05: rgba(255, 255, 255, 0.05);
    --black-alpha-30: rgba(0, 0, 0, 0.3);
    
    /* Espaciados */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* Bordes */
    --border-radius-sm: 0.5rem;
    --border-radius-md: 1rem;
    --border-radius-lg: 1.5rem;
    --border-width: 0.125rem;
    
    /* Tamaños de fuente */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 3rem;
    --font-size-5xl: 5rem;
    
    /* Transición */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Contenedor máximo */
    --container-max-width: 87.5rem; /* 1400px */
}

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, var(--color-bg-darker) 0%, var(--color-bg-dark) 100%);
    color: var(--color-text);
    min-height: 100vh;
    line-height: 1.6;
    position: relative;
    display: flex;
    flex-direction: column;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url('../assets/tira_copas.png');
    background-repeat: repeat;
    background-size: 36rem auto;
    background-position: center top;
    opacity: var(--bg-trophies-opacity);
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: 0;
}

body > * {
    position: relative;
    z-index: 1;
}

/* Header */
.header {
    background: var(--primary-alpha-80);
    backdrop-filter: blur(0.625rem);
    border-bottom: var(--border-width) solid var(--color-primary);
    padding: var(--spacing-lg) var(--spacing-xl);
    position: static;
}

.header-content {
    max-width: var(--container-max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content-centered {
    justify-content: center;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.logo-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    text-decoration: none;
}

.escudo {
    height: 3rem;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 0.625rem var(--primary-alpha-50));
}

.logo {
    font-size: var(--font-size-3xl);
    font-weight: 900;
    letter-spacing: 0.125rem;
    color: var(--color-secondary);
    text-shadow: 0 0 1.25rem var(--primary-alpha-50);
    margin: 0;
}

.logo .eleven {
    color: var(--color-accent);
    margin-left: var(--spacing-xs);
}

.social-links {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* Banner publicitario */
.banner-publicitario {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
}

.banner-publicitario a {
    display: block;
    width: 100%;
    max-width: 500px;
    border-radius: var(--border-radius-sm);
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow:
        0 0 6px rgba(255, 255, 255, 0.4),
        0 0 14px rgba(255, 255, 255, 0.15);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.banner-publicitario a:hover {
    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.55),
        0 0 22px rgba(255, 255, 255, 0.25);
}

.banner-publicitario__img {
    display: block;
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: cover;
}

@media (max-width: 768px) {
    .banner-publicitario {
        padding: var(--spacing-sm);
    }
}

.social-link {
    color: var(--color-text);
    font-size: var(--font-size-xl);
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--white-alpha-05);
}

.social-link:hover {
    color: var(--color-primary);
    background: var(--primary-alpha-20);
    transform: translateY(-0.1875rem);
}

.donate-button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0 1rem;
    height: 2.5rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-secondary);
    background: linear-gradient(135deg, var(--primary-alpha-20), var(--white-alpha-05));
    border: 1px solid var(--primary-alpha-30);
    box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.12);
    transition: var(--transition);
}

.donate-button i {
    font-size: 1.05rem;
}

.donate-button:hover {
    color: var(--color-accent);
    background: linear-gradient(135deg, var(--primary-alpha-30), var(--white-alpha-08));
    border-color: var(--primary-alpha-50);
    transform: translateY(-0.1875rem);
}

.footer-donate-link {
    display: none;
    margin-left: 0.25rem;
    min-height: 2.5rem;
}

/* Main Content */
.main-content {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--spacing-xl);
    width: 100%;
    flex: 1 0 auto;
}

/* Score Section */
.score-section {
    display: flex;
    justify-content: center;
    margin: var(--spacing-xl) 0 var(--spacing-2xl);
}

.daily-score {
    background: linear-gradient(135deg, var(--color-bg-darker) 0%, var(--color-card-bg) 100%);
    border: var(--border-width) solid var(--primary-alpha-30);
    border-radius: var(--border-radius-md);
    width: 15.625rem;
    height: 6.25rem;
    padding: 0.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    box-shadow: 0 0.5rem 2rem var(--black-alpha-30);
}

.score-title {
    font-size: 0.9rem;
    color: #ffffff;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
}

.score-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1;
}

.score-correct {
    color: #66cdaa;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.score-incorrect {
    color: #ed143d;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.separator {
    color: #ffffff;
}

/* Games Section */
.games-section {
    margin-top: var(--spacing-2xl);
}

.games-title {
    text-align: center;
    font-size: var(--font-size-3xl);
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
    font-family: 'Montecatini Pro Largo Bold', 'Montecatini Pro Ampio Bold', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-variant-ligatures: none;
    font-feature-settings: 'liga' 0, 'clig' 0, 'calt' 0, 'dlig' 0, 'salt' 0, 'ss01' 0, 'ss02' 0;
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-xl);
    padding: 0;
    align-items: stretch;
}

.home-games-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--spacing-xl);
    align-items: start;
}

.home-sidepanels {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: var(--spacing-lg);
    align-items: start;
}

.next-match-panel {
    background: linear-gradient(160deg, rgba(48, 3, 11, 0.95) 0%, rgba(24, 4, 8, 0.97) 100%);
    border: 0.125rem solid #d12a45;
    border-radius: var(--border-radius-md);
    box-shadow: 0 0.6rem 1.8rem rgba(209, 42, 69, 0.25);
    padding: var(--spacing-lg);
}

.next-match-title {
    margin: 0;
    color: #ffe9ee;
    font-size: 1.55rem;
    text-transform: uppercase;
    letter-spacing: 0.04rem;
    text-align: center;
    font-family: 'Montecatini Pro Largo Bold', 'Montecatini Pro Ampio Bold', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
}

.next-match-status {
    margin: 0.4rem 0 1rem;
    text-align: center;
    color: #ffd3dc;
    font-weight: 800;
    letter-spacing: 0.06rem;
    font-size: 0.95rem;
}

.next-match-status.is-live {
    color: #ffd3dc;
    animation: pulse-live 1.5s ease-in-out infinite;
}

.next-match-status.is-finished {
    color: #f6b0bc;
}

.next-match-status.is-upcoming {
    color: #ff8ea1;
}

.next-match-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 1rem;
}

.next-match-team {
    display: grid;
    justify-items: center;
    gap: 0.45rem;
    text-align: center;
    color: #fff2f5;
    font-weight: 700;
    font-size: 0.95rem;
}

.next-match-vs {
    color: #ff6e8a;
    font-weight: 900;
    letter-spacing: 0.06rem;
    font-size: 0.9rem;
}

.next-match-badge {
    width: 3.35rem;
    height: 3.35rem;
    object-fit: contain;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    filter: none;
}

.next-match-details {
    margin: 0;
    display: grid;
    gap: 0.45rem;
}

.next-match-detail-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
    color: #f8ccd4;
    font-size: 0.95rem;
}

.next-match-detail-row dt {
    font-weight: 700;
    color: #ff8ea1;
    white-space: nowrap;
}

.next-match-detail-row dd {
    margin: 0;
    text-align: right;
    color: #fff7f9;
    font-weight: 600;
}

.next-match-meta {
    margin: 0.9rem 0 0;
    color: rgba(255, 212, 221, 0.9);
    font-size: 0.82rem;
    text-align: center;
}

.udch-panel {
    background: radial-gradient(circle at 12% 10%, rgba(35, 91, 191, 0.35) 0%, rgba(4, 14, 38, 0.96) 55%),
        linear-gradient(160deg, rgba(0, 50, 132, 0.95) 0%, rgba(4, 12, 34, 0.98) 100%);
    border: 0.125rem solid rgba(120, 182, 255, 0.4);
    border-radius: var(--border-radius-md);
    box-shadow: 0 0.75rem 2rem rgba(0, 54, 132, 0.35);
    padding: var(--spacing-lg);
    display: grid;
    gap: 0.85rem;
}

.udch-head {
    display: grid;
    gap: 0.2rem;
    text-align: center;
}

.udch-title {
    margin: 0;
    color: #e9f2ff;
    font-size: 1.35rem;
    text-transform: uppercase;
    letter-spacing: 0.04rem;
    text-align: center;
    font-family: 'Montecatini Pro Largo Bold', 'Montecatini Pro Ampio Bold', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
}

.udch-date {
    margin: 0;
    color: #bcd7ff;
    font-weight: 800;
    letter-spacing: 0.06rem;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.udch-match {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.5rem;
    border-radius: 0.85rem;
    border: 0.0625rem solid rgba(145, 193, 255, 0.25);
    background: rgba(4, 20, 50, 0.6);
    text-align: center;
}

.udch-team {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
}

.udch-shield {
    width: 3.2rem;
    height: 3.2rem;
    object-fit: contain;
    filter: drop-shadow(0 0.4rem 0.85rem rgba(0, 0, 0, 0.45));
}

.udch-team-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #f2f6ff;
}

.udch-center {
    display: grid;
    justify-items: center;
    gap: 0.2rem;
}

.udch-year {
    font-size: 0.82rem;
    font-weight: 800;
    color: #ffd4dc;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
}

.udch-score {
    font-family: 'Montecatini Pro Stretto Ultra', 'Montecatini Pro Ampio Bold', 'Montecatini Pro Largo Bold', serif;
    font-size: 2rem;
    letter-spacing: 0.1rem;
    font-weight: 900;
    color: #eaf4ff;
}

.udch-score.is-win {
    color: #7ef5c7;
}

.udch-score.is-draw {
    color: #ffd45f;
}

.udch-score.is-loss {
    color: #ff9fb1;
}

.udch-competition {
    margin: 0.1rem 0 0;
    text-align: center;
    font-size: 0.88rem;
    color: rgba(211, 226, 255, 0.9);
}

.udch-note {
    margin: 0;
    text-align: center;
    font-size: 0.82rem;
    color: rgba(211, 226, 255, 0.85);
    line-height: 1.4;
}

.udch-secondary {
    margin-top: 0.4rem;
    padding-top: 0.75rem;
    border-top: 0.0625rem solid rgba(151, 192, 255, 0.35);
    text-align: center;
    display: grid;
    gap: 0.35rem;
}

.udch-secondary-title {
    margin: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08rem;
    color: rgba(164, 195, 255, 0.85);
    font-weight: 700;
}

.udch-secondary-body {
    margin: 0;
    font-size: 0.9rem;
    color: #f0f6ff;
    font-weight: 600;
}

.udch-birthday {
    margin-top: 0.4rem;
    padding-top: 0.75rem;
    border-top: 0.0625rem solid rgba(255, 192, 203, 0.35);
    display: grid;
    gap: 0.5rem;
}

.udch-birthday-title {
    margin: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08rem;
    color: #ffb3c2;
    font-weight: 700;
    text-align: center;
    font-family: 'Montecatini Pro Stretto Ultra', 'Montecatini Pro Ampio Bold', 'Montecatini Pro Largo Bold', serif;
}

.udch-birthday-content {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.udch-birthday-image {
    width: 50px;
    height: 50px;
    border-radius: 0.35rem;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 192, 203, 0.4);
    object-position: center top;
    display: block;
    margin: 0;
    align-self: flex-start;
}

.udch-birthday-info {
    display: grid;
    gap: 0.2rem;
    flex: 1;
}

.udch-birthday-name {
    margin: 0;
    font-size: 0.95rem;
    color: #f0f6ff;
    font-weight: 700;
}

.udch-birthday-years {
    margin: 0;
    font-size: 0.8rem;
    color: rgba(240, 246, 255, 0.8);
}

.udch-birthday-stats {
    margin: 0;
    font-size: 0.8rem;
    color: rgba(164, 195, 255, 0.85);
}

.udch-status {
    margin: 0.2rem 0 0;
    text-align: center;
    font-size: 0.78rem;
    color: rgba(190, 210, 255, 0.85);
}

.udch-status.is-error {
    color: #ffb3c2;
}

/* Timer para próximo partido */
.next-match-timer-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.1rem;
    margin-bottom: 0.2rem;
}

.next-match-timer {
    font-family: 'Montecatini Pro Stretto Ultra', 'Montecatini Pro Ampio Bold', 'Montecatini Pro Largo Bold', serif;
    font-size: 2.1rem;
    color: #ffd3dc;
    background: none;
    border-radius: 0.7rem;
    padding: 0;
    letter-spacing: 0.12em;
    font-weight: 900;
    box-shadow: none;
    transition: color 0.3s, border 0.3s;
}

@keyframes pulse-live {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Game Card */
.game-card {
    background: var(--color-card-bg);
    display: flex;
    flex-direction: column;
    min-height: 100%;
    height: 100%;
    --card-hover-border-color: #0046ad;
    --card-hover-glow-color: rgba(0, 70, 173, 0.5);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition: var(--transition);
    border: var(--border-width) solid var(--primary-alpha-20);
    cursor: pointer;
    position: relative;
}

.game-streak-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--color-secondary);
    color: var(--color-primary);
    border: 0.125rem solid var(--color-accent);
    font-weight: 800;
    font-size: 0.85rem;
    line-height: 1;
    box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.35);
    z-index: 2;
    pointer-events: none;
}

.game-streak-days {
    min-width: 0.85rem;
    text-align: center;
}

.game-streak-icon {
    font-size: 0.95rem;
    line-height: 1;
}

.game-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-alpha-10) 0%, transparent 100%);
    opacity: 0;
    transition: var(--transition);
}

.game-card:hover {
    transform: translateY(-0.5rem);
    border-color: var(--card-hover-border-color);
    box-shadow: 0 0.75rem 3rem var(--card-hover-glow-color), 0 0 1.1rem var(--card-hover-glow-color);
}

.game-card:hover::before {
    opacity: 1;
}

.game-image {
    height: 12.5rem;
    background: linear-gradient(135deg, var(--color-bg-darker) 0%, var(--color-card-bg) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.game-icon {
    font-size: var(--font-size-5xl);
    opacity: 0.6;
    transition: var(--transition);
}

.game-card:hover .game-icon {
    opacity: 1;
    transform: scale(1.1);
}

/* Iconos de juego: base compartida */
.wordle-icon,
.trayectoria-icon,
.impostor-icon,
.videodeldia-icon,
.presencias-icon,
.top6-icon,
.cumpleanos-icon,
.goles-icon,
.conexiones-icon,
.grid-icon,
.xideldia-icon,
.crucigrama-icon{
    display: block;
    margin: 0 auto;
    object-fit: contain;
    opacity: 0.9;
    transition: var(--transition);
}

/* Tamaños individuales — ajustar a gusto */
.wordle-icon      { width: 6rem;  height: auto; }
.trayectoria-icon { width: 13rem; height: auto; }
.impostor-icon    { width: 10rem; height: auto; }
.videodeldia-icon { width: 15rem; height: auto; }
.presencias-icon  { width: 13rem; height: auto; }
.top6-icon        { width: 10rem; height: auto; }
.cumpleanos-icon  { width: 12rem; height: auto; }
.goles-icon       { width: 9rem; height: auto; }
.conexiones-icon  { width: 11rem; height: auto; }
.grid-icon        { width: 10rem; height: auto; }
.xideldia-icon    { width: 13rem; height: auto; }
.crucigrama-icon  { width: 8rem; height: auto; }

.game-card:hover .game-icon img,
.game-card:hover .wordle-icon,
.game-card:hover .trayectoria-icon,
.game-card:hover .impostor-icon,
.game-card:hover .videodeldia-icon,
.game-card:hover .presencias-icon,
.game-card:hover .top6-icon,
.game-card:hover .conexiones-icon,
.game-card:hover .crucigrama-icon,
.game-card:hover .goles-icon,
.game-card:hover .cumpleanos-icon,
.game-card:hover .xideldia-icon {
    transform: scale(1.08);
    opacity: 1;
}

/* Iconos específicos con colores */
.trivia-icon { color: var(--color-accent); }
.player-icon { color: var(--color-secondary); }
.formation-icon { color: var(--color-primary); }
.grid-icon { color: var(--color-accent); }
.trophy-icon { color: var(--color-accent); }
.connections-icon { color: var(--color-primary); }
.birthday-icon { color: var(--color-accent); }
.classics-icon { color: var(--color-secondary); }
.chain-icon { color: var(--color-primary); }
.video-icon { color: var(--color-accent); }

/* Conexiones Minigame */
.conexiones-page {
    display: grid;
    justify-items: center;
}

.conexiones-panel {
    width: min(42rem, 100%);
    display: grid;
    gap: 0.65rem;
    border: 0.0625rem solid rgba(122, 188, 255, 0.35);
    background: radial-gradient(circle at 22% 0%, rgba(0, 57, 141, 0.5) 0%, rgba(1, 16, 41, 0.96) 58%),
        linear-gradient(160deg, rgba(0, 18, 49, 0.98) 0%, rgba(0, 8, 26, 0.98) 100%);
}

.conx-headline {
    text-align: center;
    display: grid;
    gap: 0.2rem;
}

.conx-title {
    margin: 0;
    color: #f3f8ff;
    letter-spacing: 0.02rem;
    font-size: clamp(1.85rem, 4vw, 2.6rem);
    font-family: 'Montecatini Pro Largo Bold', 'Montecatini Pro Ampio Bold', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
}

.conx-title-accent {
    color: #e22b4b;
    margin-right: 0.45rem;
}

.conx-subtitle {
    color: #cce6ff;
    margin: 0;
    font-size: 0.95rem;
}

.conx-feedback {
    margin: 0.15rem 0 0;
    border-radius: 0.7rem;
    border: 0.0625rem solid rgba(113, 190, 255, 0.32);
    padding: 0.45rem 0.7rem;
    font-size: 0.92rem;
    text-align: center;
    background: rgba(2, 24, 62, 0.7);
    color: #dceeff;
}

.conx-feedback.is-success {
    border-color: rgba(154, 225, 255, 0.66);
    background: rgba(17, 89, 161, 0.58);
    color: #ffffff;
}

.conx-feedback.is-error {
    border-color: rgba(255, 170, 187, 0.68);
    background: rgba(125, 9, 40, 0.5);
    color: #ffe6ec;
}

.conx-solved-groups {
    display: grid;
    gap: 0.5rem;
}

.conx-solved-row {
    border-radius: 0.82rem;
    padding: 0.72rem 0.75rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.4);
    text-align: center;
}

.conx-solved-row h3 {
    margin: 0;
    font-size: 41px;
    line-height: 1.05;
    font-family: 'Montecatini Pro Ampio Bold', 'Montecatini Pro Largo Bold', sans-serif;
    font-weight: 700;
}

.conx-solved-row p {
    margin: 0.28rem 0 0;
    font-size: 24px;
    line-height: 1.35;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
}

.conx-tier-red {
    background: linear-gradient(140deg, #d71730 0%, #b40f26 100%);
    color: #ffffff;
}

.conx-tier-white {
    background: linear-gradient(140deg, #f7fbff 0%, #e6f1ff 100%);
    color: #001233;
}

.conx-tier-white.conx-tier-white-blue-text {
    color: #0057c2;
}

.conx-tier-white.conx-tier-white-red-text {
    color: #d71730;
}

.conx-tier-blue {
    background: linear-gradient(140deg, #1a59cf 0%, #0a40ad 100%);
    color: #ffffff;
}

.conx-tier-missed {
    background: linear-gradient(140deg, #9aa3b1 0%, #7d8695 100%);
    color: #ffffff;
}

.conx-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.42rem;
}

.conx-player-card {
    appearance: none;
    border: 0.12rem solid #0047ab;
    border-radius: 0.58rem;
    overflow: hidden;
    padding: 0;
    background: rgba(2, 24, 62, 0.9);
    cursor: pointer;
    box-shadow: 0 0 0 0.05rem rgba(0, 71, 171, 0.45), 0 0.5rem 1rem rgba(2, 12, 36, 0.45);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, border-width 0.22s ease;
}

.conx-player-card:hover {
    transform: translateY(-0.08rem);
    border-color: #1a59cf;
    box-shadow: 0 0 0 0.08rem rgba(26, 89, 207, 0.55), 0 0.65rem 1.1rem rgba(0, 8, 28, 0.48);
}

.conx-player-card.is-selected {
    border-color: #d71730;
    border-width: 0.17rem;
    box-shadow: 0 0 0 0.1rem rgba(215, 23, 48, 0.55), 0 0 0.8rem rgba(215, 23, 48, 0.35), 0 0.55rem 1.1rem rgba(5, 17, 47, 0.6);
}

.conx-player-media {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(180deg, rgba(12, 52, 123, 0.5) 0%, rgba(3, 17, 42, 0.92) 100%);
}

.conx-player-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.conx-player-name {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    text-align: center;
    min-height: 2.6rem;
    padding: 0 0.2rem 0.2rem;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.conx-player-name::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.6rem;
    background: linear-gradient(180deg, rgba(0, 71, 171, 0) 0%, rgba(0, 71, 171, 0.12) 28%, rgba(0, 71, 171, 0.34) 52%, rgba(0, 71, 171, 0.65) 74%, rgba(0, 71, 171, 0.9) 100%);
    transition: background 0.22s ease;
    z-index: 0;
}

.conx-player-card.is-selected .conx-player-name::before {
    background: linear-gradient(180deg, rgba(215, 23, 48, 0) 0%, rgba(215, 23, 48, 0.12) 28%, rgba(215, 23, 48, 0.34) 52%, rgba(215, 23, 48, 0.65) 74%, rgba(215, 23, 48, 0.9) 100%);
}

.conx-player-name-text {
    position: relative;
    z-index: 1;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.01rem;
    font-size: 24px;
    line-height: 0.96;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-weight: bold;
    text-shadow: none;
    transform: translateY(-0.22rem);
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conx-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.1rem;
}

.conx-btn {
    border: 0;
    border-radius: 0.68rem;
    padding: 0.55rem 0.95rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.conx-btn:hover {
    transform: translateY(-0.08rem);
    filter: brightness(1.03);
}

.conx-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
}

.conx-btn-submit {
    background: #d71730;
    color: #ffffff;
}

.conx-btn-clear {
    background: #89d8f7;
    color: #05203f;
}

.conx-btn-surrender {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    background: #2a3c57;
    color: #ffffff;
    border: 0.0625rem solid rgba(255, 255, 255, 0.72);
    padding: 0;
}

.conx-btn-shuffle {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    background: #09234d;
    color: #ffffff;
    border: 0.0625rem solid #ffffff;
    padding: 0;
}

.conx-attempts {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.7rem;
    min-height: 1.65rem;
}

.conx-attempts.is-hidden {
    display: none;
}

.conx-attempt-dot {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    border: 0.11rem solid rgba(255, 255, 255, 0.92);
    background: transparent;
    box-shadow: 0 0 0 0.04rem rgba(0, 38, 97, 0.8);
}

.conx-attempt-dot.is-used {
    background: #ffffff;
}

.conx-intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: var(--spacing-lg);
    background: rgba(5, 13, 24, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Prevent scroll chaining to the page behind the overlay on mobile */
    overscroll-behavior: contain;
}

.conx-intro-overlay.is-hidden {
    display: none;
}

.conx-intro-card {
    width: min(58rem, 100%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    background: radial-gradient(circle at 22% 0%, rgba(0, 57, 141, 0.5) 0%, rgba(1, 16, 41, 0.96) 58%),
        linear-gradient(160deg, rgba(0, 18, 49, 0.98) 0%, rgba(0, 8, 26, 0.98) 100%);
    border: 0.0625rem solid rgba(122, 188, 255, 0.35);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 1.5rem 3.5rem rgba(0, 71, 171, 0.55), 0 0 0 0.0625rem rgba(255, 255, 255, 0.06);
    padding: var(--spacing-xl);
    color: var(--color-secondary);
    /* Allow internal scrolling when content exceeds viewport while preventing
       the underlying page from scrolling. */
    max-height: calc(100vh - calc(var(--spacing-lg) * 2));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.conx-intro-media {
    display: grid;
    place-items: center;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.47);
    border: 0.0625rem solid rgba(255, 255, 255, 0.16);
    min-height: 16rem;
}

.conx-intro-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.conx-intro-body {
    display: grid;
    gap: var(--spacing-md);
    align-content: start;
}

.conx-intro-title {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04rem;
    line-height: 1.2;
    font-style: normal;
    font-family: 'Montecatini Pro Stretto Ultra', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.conx-intro-desc {
    font-size: var(--font-size-base);
    opacity: 0.95;
    line-height: 1.6;
    margin: 0;
}

.conx-intro-rules {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.35rem;
}

.conx-intro-rules li {
    font-size: var(--font-size-sm);
    padding-left: 1.1rem;
    position: relative;
    line-height: 1.5;
    opacity: 0.95;
}

.conx-intro-rules li::before {
    content: '–';
    position: absolute;
    left: 0;
    opacity: 0.8;
}

.conx-intro-mode-label {
    font-weight: 700;
    font-size: var(--font-size-sm);
    margin: 0;
    opacity: 0.9;
}

.conx-intro-modes {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.conx-mode-btn {
    border: 0.0625rem solid rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-secondary);
    border-radius: 999rem;
    padding: 0.42rem 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.conx-mode-btn.is-active {
    background: linear-gradient(90deg, rgba(0, 212, 170, 0.8) 0%, rgba(18, 56, 255, 0.86) 100%);
    border-color: rgba(255, 255, 255, 0.78);
    box-shadow: 0 0.4rem 0.95rem rgba(0, 71, 171, 0.36);
}

.conx-intro-start {
    width: min(16rem, 100%);
    margin: var(--spacing-xs) 0 0;
    border-radius: 999rem;
    background: linear-gradient(90deg, #c8102e 0%, #ff2148 100%);
    color: var(--color-secondary);
    border: 0.0625rem solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0.6rem 1.4rem rgba(200, 16, 46, 0.35);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.conx-intro-start:hover {
    background: linear-gradient(90deg, #e01535 0%, #ff3a5e 100%);
    transform: translateY(-0.125rem);
    box-shadow: 0 0.7rem 1.8rem rgba(200, 16, 46, 0.5);
    color: var(--color-secondary);
}

@media (max-width: 768px) {
    .conexiones-panel {
        width: min(24rem, 100%);
    }

    .conx-grid {
        gap: 0.32rem;
    }

    .conx-player-name {
        min-height: 2.2rem;
    }

    .conx-player-name::before {
        height: 2.2rem;
    }

    .conx-player-name-text {
        font-size: 0.9rem;
        transform: translateY(-0.16rem);
    }

    .conx-solved-row h3 {
        font-size: 1.2rem;
    }

    .conx-solved-row p {
        font-size: 0.92rem;
    }

    .conx-intro-card {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .conx-intro-media {
        max-height: 13rem;
        min-height: 10rem;
    }
}

.game-info {
    background: var(--color-card-bg);
    flex: 1;
    padding: var(--spacing-lg);
    text-align: center;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    gap: var(--spacing-md);
}

/* Columna 2: variante blanca */
.game-card:nth-child(3n + 2) {
    --card-hover-border-color: #f8fbff;
    --card-hover-glow-color: rgba(248, 251, 255, 0.78);
}

.game-card:nth-child(3n + 2) .game-info {
    background: #f8fbff;
}

.game-card:nth-child(3n + 2) .game-title {
    color: #0046ad;
}

.game-card:nth-child(3n + 2) .play-button {
    background: #eef3ff;
    color: #0046ad;
    box-shadow: 0 0.25rem 1rem rgba(20, 57, 126, 0.16);
}

.game-card:nth-child(3n + 2) .play-button:hover {
    background: #e4ecff;
    box-shadow: 0 0.375rem 1.5rem rgba(20, 57, 126, 0.24);
}

/* Columna 3: variante roja */
.game-card:nth-child(3n) {
    --card-hover-border-color: #c00c30;
    --card-hover-glow-color: rgba(192, 12, 48, 0.6);
}

.game-card:nth-child(3n) .game-info {
    background: #c00c30;
}

.game-card:nth-child(3n) .game-title {
    color: #ffffff;
}

.game-card:nth-child(3n) .play-button {
    background: #c00c30;
    color: #ffffff;
    box-shadow: 0 0.25rem 1rem rgba(92, 0, 23, 0.34);
}

.game-card:nth-child(3n) .play-button:hover {
    background: #d41238;
    box-shadow: 0 0.375rem 1.5rem rgba(92, 0, 23, 0.46);
}

.play-button {
    background: var(--color-primary);
    color: var(--color-secondary);
    border: none;
    padding: 0.8rem 2.5rem;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-base);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    margin-bottom: 0;
    width: 86%;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0.25rem 1rem var(--primary-alpha-30);
}

.play-button:hover {
    background: #0056d6;
    transform: translateY(-0.125rem);
    box-shadow: 0 0.375rem 1.5rem var(--primary-alpha-50);
}

.play-button:active {
    transform: translateY(0);
}

.game-title {
    font-size: var(--font-size-2xl);
    color: var(--color-text);
    font-family: 'Montecatini Pro Largo Bold', 'Montecatini Pro Ampio Bold', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-variant-ligatures: none;
    font-feature-settings: 'liga' 0, 'clig' 0, 'calt' 0, 'dlig' 0, 'salt' 0, 'ss01' 0, 'ss02' 0;
    text-transform: uppercase;
    line-height: 1.15;
}

/* Footer */
.footer {
    margin-top: auto;
    color: var(--color-text);
    background:
        radial-gradient(circle at top left, rgba(0, 71, 171, 0.26), transparent 34%),
        radial-gradient(circle at top right, rgba(192, 12, 48, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(6, 14, 28, 0.96) 0%, rgba(3, 8, 18, 0.99) 100%);
    border-top: 0.125rem solid rgba(192, 12, 48, 0.42);
    box-shadow: 0 -1rem 2.5rem rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.footer-inner {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--spacing-2xl) var(--spacing-xl) calc(var(--spacing-2xl) + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) minmax(0, 1fr);
    gap: var(--spacing-xl);
    align-items: start;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-lg);
}

.footer-shield-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.footer-shield-logo {
    width: 7.25rem;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0.85rem 1.4rem rgba(0, 0, 0, 0.38));
}

.footer-commission-link {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    max-width: 19rem;
    color: inherit;
    text-decoration: none;
    padding-top: 0.15rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-commission-logo {
    width: 4.1rem;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0.35rem 0.9rem rgba(0, 0, 0, 0.3));
    transition: transform 0.25s ease, filter 0.25s ease;
}

.footer-commission-copy {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    max-width: 12.5rem;
}

.footer-commission-link:hover .footer-commission-logo {
    transform: translateY(-0.125rem) scale(1.02);
    filter: drop-shadow(0 0.4rem 1rem rgba(192, 12, 48, 0.24));
}

.footer-commission-link:hover .footer-commission-copy {
    color: var(--color-secondary);
}

.footer-title {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-secondary);
    font-family: 'Montecatini Pro Largo Bold', 'Montecatini Pro Ampio Bold', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.04rem;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.footer-links {
    min-width: 0;
}

.footer-links-list {
    display: grid;
    gap: 0.55rem;
    justify-items: start;
}

.footer-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.2rem 0;
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: 700;
    letter-spacing: 0.01rem;
    border-bottom: 0.1rem solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.footer-link:hover {
    color: var(--color-secondary);
    border-color: var(--color-accent);
    transform: translateX(0.25rem);
}

.footer-social {
    min-width: 0;
}

.footer-social-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: var(--spacing-lg);
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    color: var(--color-text);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.footer-social-link:hover {
    color: var(--color-secondary);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 0.2rem rgba(192, 12, 48, 0.16);
    transform: translateY(-0.1875rem);
}

.footer-social-link svg {
    width: 1.15rem;
    height: 1.15rem;
}

.footer-contact-label {
    margin: 0 0 0.25rem;
    color: var(--color-secondary);
    font-family: 'Montecatini Pro Largo Bold', 'Montecatini Pro Ampio Bold', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.03rem;
    text-transform: uppercase;
}

.footer-contact-link {
    color: var(--color-secondary);
    font-size: var(--font-size-lg);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 0.1rem solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.footer-contact-link:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* Responsive */
@media (max-width: 1100px) {
    .home-games-layout {
        grid-template-columns: 1fr;
    }

    .home-sidepanels {
        position: static;
        order: -1;
    }
}

@media (max-width: 768px) {
    body::before {
        background-size: 26rem auto;
        opacity: 0.06;
    }

    .header {
        padding: var(--spacing-md);
    }

    .escudo {
        height: 2.5rem;
    }

    .logo {
        font-size: var(--font-size-xl);
    }

    .social-link {
        width: 2.1875rem;
        height: 2.1875rem;
        font-size: var(--font-size-lg);
    }

    .social-links > .donate-button {
        display: none;
    }

    .main-content {
        padding: var(--spacing-md);
    }

    .games-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-lg);
    }

    .home-games-layout {
        grid-template-columns: 1fr;
    }

    .next-match-panel,
    .udch-panel {
        position: static;
        padding: var(--spacing-md);
    }

    .games-title {
        font-size: var(--font-size-2xl);
        margin-bottom: var(--spacing-xl);
    }

    .daily-score {
        width: 15.625rem;
        height: 6.25rem;
        padding: 0.5rem;
    }

    .game-image {
        height: 10rem;
    }

    .game-icon {
        font-size: var(--font-size-4xl);
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        padding: var(--spacing-2xl) var(--spacing-lg) calc(var(--spacing-2xl) + env(safe-area-inset-bottom));
    }

    .footer-brand,
    .footer-links,
    .footer-social {
        align-items: center;
        text-align: center;
    }

    .footer-brand {
        justify-content: center;
        align-items: center;
    }

    .footer-shield-wrap,
    .footer-commission-link {
        justify-content: center;
    }

    .footer-commission-link {
        max-width: 100%;
        text-align: left;
    }

    .footer-commission-copy {
        max-width: 15rem;
    }

    .footer-links-list {
        justify-items: center;
    }

    .footer-link {
        width: 100%;
        justify-content: center;
    }

    .footer-social-row {
        justify-content: center;
        flex-wrap: wrap;
    }

    .footer-donate-link {
        display: inline-flex;
    }
}

@media (max-width: 480px) {
    .header-content {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .footer-inner {
        padding: var(--spacing-xl) var(--spacing-md) calc(var(--spacing-xl) + env(safe-area-inset-bottom));
    }

    .footer-commission-logo {
        width: 5.5rem;
    }

    .footer-shield-logo {
        width: 6.25rem;
    }

    .footer-title {
        font-size: 1.35rem;
    }

    .footer-contact-link {
        font-size: var(--font-size-base);
        word-break: break-word;
    }

    .games-grid {
        grid-template-columns: 1fr;
    }

    .next-match-teams {
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 0.4rem;
    }

    .next-match-team {
        font-size: 0.8rem;
        gap: 0.3rem;
    }

    .next-match-badge {
        width: 2.6rem;
        height: 2.6rem;
    }

    .next-match-vs {
        order: 0;
        font-size: 0.85rem;
    }

    .next-match-detail-row {
        grid-template-columns: auto 1fr;
        font-size: 0.88rem;
    }

    .next-match-detail-row dd {
        text-align: right;
    }

    .score-display {
        font-size: 1.55rem;
    }
}

/* Animaciones */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(1.25rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.game-card {
    animation: fadeIn 0.5s ease-out;
    animation-fill-mode: both;
}

.game-card:nth-child(1) { animation-delay: 0.1s; }
.game-card:nth-child(2) { animation-delay: 0.2s; }
.game-card:nth-child(3) { animation-delay: 0.3s; }
.game-card:nth-child(4) { animation-delay: 0.4s; }
.game-card:nth-child(5) { animation-delay: 0.5s; }
.game-card:nth-child(6) { animation-delay: 0.6s; }
.game-card:nth-child(7) { animation-delay: 0.7s; }
.game-card:nth-child(8) { animation-delay: 0.8s; }
.game-card:nth-child(9) { animation-delay: 0.9s; }

/* Trayectoria Minigame */
.trajectory-page {
    display: grid;
    justify-items: center;
    gap: 0.55rem;
}

.main-content.trajectory-page {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.trajectory-page + .footer {
    margin-top: 0.35rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Admin Auth + Panel */
.admin-auth-page,
.admin-panel-page {
    min-height: calc(100vh - 8rem);
    display: grid;
    align-items: center;
}

.admin-auth-card,
.admin-panel-card {
    width: min(62rem, 100%);
    margin: 0 auto;
    background: linear-gradient(160deg, rgba(4, 20, 44, 0.96) 0%, rgba(1, 12, 31, 0.92) 100%);
    border: var(--border-width) solid rgba(80, 166, 255, 0.4);
    border-radius: var(--border-radius-md);
    padding: 2rem 2rem 1.5rem;
    box-shadow: 0 1.1rem 2.2rem rgba(0, 0, 0, 0.38), inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.05);
}

.admin-auth-card {
    width: min(40rem, 100%);
}

.admin-auth-form {
    margin-top: 1rem;
    display: grid;
    gap: 0.8rem;
}

.admin-panel-hero {
    margin-bottom: 1rem;
}

.admin-kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
    color: #9fd2ff;
    margin-bottom: 0.35rem;
}

.admin-label {
    font-weight: 600;
    color: var(--color-text);
}

.admin-input {
    width: 100%;
    border: 0.0625rem solid rgba(120, 190, 255, 0.45);
    border-radius: var(--border-radius-sm);
    background: rgba(3, 16, 39, 0.85);
    color: var(--color-text);
    padding: 0.72rem 0.85rem;
    outline: none;
    transition: var(--transition);
}

.admin-input:focus {
    border-color: #7fc0ff;
    box-shadow: 0 0 0 0.2rem rgba(87, 165, 255, 0.25);
}

.admin-submit-button {
    margin-top: 0.4rem;
}

.admin-alert {
    border: 0.0625rem solid rgba(66, 160, 255, 0.6);
    background: rgba(18, 67, 127, 0.35);
    color: #d8ebff;
    border-radius: var(--border-radius-sm);
    padding: 0.8rem 1rem;
    margin-top: 1rem;
}

.admin-alert-error {
    border: 0.0625rem solid var(--color-error);
    background: rgba(220, 20, 60, 0.15);
    color: #ffdce5;
}

.admin-error-list {
    margin: 0;
    padding-left: 1rem;
}

.admin-auth-note {
    margin-top: 0.85rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.admin-panel-grid {
    margin-top: 1rem;
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.admin-inline-actions {
    margin-top: 1rem;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.admin-panel-link {
    display: block;
    text-decoration: none;
    color: var(--color-text);
    border: 0.0625rem solid rgba(103, 183, 255, 0.42);
    border-radius: 0.75rem;
    padding: 0.95rem;
    background: linear-gradient(150deg, rgba(14, 60, 120, 0.62) 0%, rgba(7, 25, 55, 0.92) 100%);
    transition: var(--transition);
}

.admin-panel-link-form {
    display: grid;
    gap: 0.7rem;
}

.admin-card-label {
    margin-bottom: -0.25rem;
}

.admin-panel-form-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 0.2rem;
}

.admin-card-button {
    width: 100%;
}

.admin-card-button-secondary {
    background: linear-gradient(135deg, rgba(7, 25, 55, 0.96) 0%, rgba(14, 60, 120, 0.88) 100%);
}

.admin-panel-link:hover {
    transform: translateY(-0.16rem);
    border-color: #7dc2ff;
    box-shadow: 0 0.7rem 1.6rem rgba(4, 22, 45, 0.55);
}

.admin-panel-link-primary {
    border-color: rgba(176, 219, 255, 0.7);
    background: linear-gradient(140deg, rgba(0, 92, 170, 0.85) 0%, rgba(12, 41, 84, 0.94) 100%);
}

.admin-panel-link-red {
    border-color: rgba(192, 12, 48, 0.6);
    background: rgba(192, 12, 48, 0.25) !important;
}

.admin-panel-link-red:hover {
    border-color: rgba(192, 12, 48, 0.8);
    background: rgba(192, 12, 48, 0.35) !important;
}

.admin-panel-metric p strong {
    font-size: 1.35rem;
    color: #d9f0ff;
}

.admin-panel-link h3 {
    font-size: var(--font-size-base);
    margin-bottom: 0.2rem;
}

.admin-panel-link p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.admin-logout-icon {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
}

.admin-config-shell {
    width: min(72rem, 100%);
}

.admin-inline-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.85rem;
}

.admin-impostor-table-wrapper {
    overflow-x: auto;
    border: 0.0625rem solid rgba(103, 183, 255, 0.35);
    border-radius: 0.75rem;
    background: rgba(3, 14, 32, 0.55);
}

.admin-impostor-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-impostor-table th,
.admin-impostor-table td {
    padding: 0.6rem 0.7rem;
    border-bottom: 0.0625rem solid rgba(95, 172, 255, 0.18);
    text-align: left;
}

.admin-impostor-table th {
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #b5dcff;
}

.admin-impostor-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-checkbox-cell {
    width: 7.5rem;
}

.admin-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
}

.js-player-search {
    min-width: 15rem;
}

.admin-resolved-list {
    margin-top: 1rem;
    padding: 0.9rem;
    border-radius: 0.75rem;
    border: 0.0625rem solid rgba(116, 192, 255, 0.35);
    background: rgba(2, 16, 40, 0.5);
}

.admin-resolved-list h3 {
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
}

.admin-resolved-list ul {
    margin: 0;
    padding-left: 1rem;
}

.admin-conx-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.admin-conx-group-card {
    margin: 0;
    padding: 0.95rem;
    border: 0.0625rem solid rgba(103, 183, 255, 0.35);
    border-radius: 0.75rem;
    background: rgba(3, 14, 32, 0.48);
    min-width: 0;
}

.admin-conx-group-card legend {
    padding: 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #d9f0ff;
}

.admin-conx-player-list {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

.admin-conx-player-row {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 7rem) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: end;
    padding: 0.8rem;
    border: 0.0625rem solid rgba(95, 172, 255, 0.18);
    border-radius: 0.75rem;
    background: rgba(2, 16, 40, 0.55);
}

.admin-conx-player-number {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    font-weight: 800;
    color: #d9f0ff;
    background: linear-gradient(135deg, rgba(0, 92, 170, 0.92) 0%, rgba(12, 41, 84, 0.94) 100%);
}

.admin-conx-player-fields {
    min-width: 0;
}

.admin-conx-player-fields .admin-label {
    margin-bottom: 0.3rem;
}

.admin-conx-player-fields-search {
    min-width: 0;
}

@media (max-width: 768px) {
    .admin-auth-card,
    .admin-panel-card {
        padding: 1.2rem;
    }

    .admin-auth-page,
    .admin-panel-page {
        align-items: start;
    }

    .admin-impostor-table th,
    .admin-impostor-table td {
        padding: 0.5rem;
    }

    .admin-panel-form-actions,
    .admin-conx-groups,
    .admin-conx-player-row {
        grid-template-columns: 1fr;
    }

    .admin-conx-player-number {
        width: 2.2rem;
        height: 2.2rem;
    }
}

.trajectory-shell {
    width: min(62rem, 100%);
    display: grid;
    gap: 0.55rem;
}

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

.trajectory-top .panel-copy {
    margin: 0 auto;
}

.player-reveal-card {
    display: grid;
    justify-items: center;
    gap: 0.38rem;
    padding: 0.52rem;
    border: 0.0625rem solid var(--primary-alpha-20);
    border-radius: var(--border-radius-md);
    background: radial-gradient(circle at 50% 20%, var(--primary-alpha-20) 0%, var(--color-bg-darker) 75%);
}

.player-reveal-highlight {
    border-color: var(--color-accent);
    box-shadow: 0 0 0.75rem var(--primary-alpha-40), 0 0.75rem 2rem var(--black-alpha-30);
}

.player-reveal-box {
    width: 6.65rem;
    aspect-ratio: 1;
    border-radius: 0.8rem;
    display: grid;
    place-items: center;
    position: relative;
    border: 0.125rem dashed var(--color-accent);
    color: var(--color-secondary);
    font-size: 1.75rem;
    background: linear-gradient(145deg, rgba(0, 25, 255, 0.18) 0%, var(--color-bg-darker) 100%);
    box-shadow: 0 0 0 0.2rem var(--primary-alpha-10), 0 0.7rem 1.2rem var(--black-alpha-30);
}

.silhouette-question {
    position: absolute;
    right: 0.42rem;
    bottom: 0.25rem;
    color: var(--color-accent);
    font-weight: 800;
    font-size: 1.1rem;
}

.player-reveal-text {
    font-size: 0.92rem;
    letter-spacing: 0.01rem;
    color: var(--color-secondary);
    font-weight: 700;
    text-align: center;
}

.player-reveal-box.player-revealed {
    border-style: solid;
    border-color: var(--color-secondary);
    color: var(--color-accent);
    box-shadow: 0 0 0 0.25rem var(--primary-alpha-10), 0 0 1.3rem var(--primary-alpha-40);
}

.player-reveal-photo {
    width: 100%;
    height: 100%;
    border-radius: 0.65rem;
    object-fit: cover;
}

.player-revealed .silhouette-question {
    opacity: 0;
}

.trajectory-panel {
    background: var(--color-card-bg);
    border: var(--border-width) solid var(--primary-alpha-20);
    border-radius: var(--border-radius-md);
    padding: 0.58rem;
    box-shadow: 0 0.75rem 2rem var(--black-alpha-30);
}

.panel-title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-sm);
}

.panel-copy {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
    max-width: 60ch;
}

.trajectory-page .panel-title {
    font-size: 1.9rem;
    margin-bottom: 0.1rem;
}

.ghost-button {
    background: transparent;
    border: 0.0625rem solid var(--primary-alpha-40);
    color: var(--color-secondary);
    border-radius: var(--border-radius-sm);
    padding: 0.65rem 1rem;
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: var(--transition);
}

.ghost-button:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    transform: translateY(-0.125rem);
}

.clubs-panel,
.nacional-summary {
    border: 0.0625rem solid var(--primary-alpha-20);
    border-radius: var(--border-radius-md);
    background: linear-gradient(140deg, var(--primary-alpha-10) 0%, transparent 100%);
    padding: 0.5rem;
}

.clubs-copy {
    margin-bottom: 0.2rem;
}

.club-slots-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.38rem;
}

.club-slot {
    display: grid;
    justify-items: center;
    gap: 0.32rem;
    background: var(--white-alpha-05);
    border: 0.0625rem solid var(--primary-alpha-20);
    border-radius: var(--border-radius-sm);
    padding: 0.34rem 0.24rem;
}

.club-slot-media {
    width: 4.55rem;
    aspect-ratio: 1;
    border-radius: var(--border-radius-sm);
    border: 0.14rem solid #0f48c9;
    background: linear-gradient(155deg, #d9122e 0%, #b30422 100%);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    box-shadow: 0 0 0 0.12rem rgba(15, 72, 201, 0.28), 0 0.35rem 1.2rem var(--black-alpha-30);
}

.club-slot-media.unknown {
    border-style: dashed;
    border-color: #3c6eff;
}

.club-slot-media.revealed {
    border-color: #ffffff;
    box-shadow: 0 0 0 0.14rem rgba(255, 255, 255, 0.25), 0 0 1.2rem rgba(217, 18, 46, 0.45);
}

.timeline-shield {
    width: 2.2rem;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 0.4rem var(--primary-alpha-40));
}

.club-shield {
    width: 3.05rem;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 0.35rem var(--primary-alpha-40));
}

.club-abbr {
    font-size: var(--font-size-sm);
    font-weight: 800;
    letter-spacing: 0.05rem;
    color: #ffffff;
}

.club-slot-label {
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03rem;
    text-align: center;
}

.nacional-title {
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
}

.nacional-badge-wrap {
    margin-bottom: 0.32rem;
    display: flex;
    justify-content: center;
}

.nacional-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    border: 0.0625rem solid var(--primary-alpha-30);
    border-radius: 999rem;
    padding: 0.22rem 0.64rem;
    background: var(--white-alpha-05);
    font-weight: 700;
}

.timeline-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.36rem;
    margin-bottom: 0;
}

.timeline-chip {
    background: var(--white-alpha-05);
    border: 0.0625rem solid var(--primary-alpha-30);
    color: var(--color-secondary);
    padding: 0.2rem 0.5rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.78rem;
}

.trajectory-footer-note .panel-copy {
    margin-bottom: var(--spacing-sm);
}

/* Presencias Minigame */
.presencias-body {
    color: #ffffff;
    overflow: hidden;
    --pres-header-height: 4.5rem;
}

.presencias-body::before {
    display: none;
}

.presencias-body .header {
    padding: 0.55rem 1rem;
}

.presencias-body .header-content {
    min-height: 0;
}

.presencias-body .escudo {
    height: 2.4rem;
}

.presencias-body .logo {
    font-size: 2rem;
}

.presencias-body .social-link {
    width: 2.2rem;
    height: 2.2rem;
}

.sr-only {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    padding: 0;
    margin: -0.0625rem;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.presencias-body .main-content {
    max-width: none;
    width: 100%;
    padding: 0;
}

.presencias-page {
    display: grid;
    height: calc(100dvh - var(--pres-header-height));
    min-height: calc(100dvh - var(--pres-header-height));
}

.presencias-panel {
    width: 100%;
    height: 100%;
}

.pres-duel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    align-items: center;
    height: 100%;
    overflow: hidden;
}

.pres-score-badge {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    width: 4rem;
    min-height: 4.45rem;
    padding: 0.4rem 0.25rem;
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.92);
    color: #ff0b1f;
    display: grid;
    place-items: center;
    text-align: center;
    box-shadow: 0 0.75rem 1.6rem rgba(0, 0, 0, 0.22);
}

.pres-score-badge strong {
    display: block;
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 900;
}

.pres-score-badge span {
    display: block;
    font-size: 0.72rem;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: 0.03rem;
}


.pres-player {
    position: relative;
    min-height: 100%;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
    border: 0;
    background: #002a69;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}

.pres-player-right {
    border-left: 0.0625rem solid rgba(255, 255, 255, 0.18);
}

.pres-player-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transform: scale(1.07);
}

.pres-player-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 20, 56, 0.28) 0%, rgba(0, 18, 48, 0.66) 100%);
}

.pres-player-right .pres-player-overlay {
    background: linear-gradient(180deg, rgba(220, 20, 60, 0.42) 0%, rgba(170, 0, 30, 0.58) 100%);
}

.pres-player-content {
    position: absolute;
    top: var(--pres-content-top, 50%);
    left: 0;
    right: 0;
    text-align: center;
    padding: 0 1.6rem;
    transform: translateY(var(--pres-content-offset, 0px));
    z-index: 2;
}

.pres-player-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: min(100%, 42rem);
    margin: 0 auto;
    transform: scale(var(--pres-content-scale, 1));
    transform-origin: center center;
}

.pres-player-name {
    font-size: clamp(1.55rem, 2.6vw, 3rem);
    line-height: 1.05;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.65);
    margin-bottom: 0.15rem;
}

.pres-helper {
    color: #ffffff;
    font-size: clamp(1rem, 1.3vw, 1.4rem);
    font-weight: 800;
    margin-bottom: 0;
}

.pres-value {
    color: #ffffff;
    font-size: clamp(2rem, 2.5vw, 3rem);
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 0.4rem 1rem rgba(0, 26, 74, 0.5);
}

.pres-label {
    color: #ffffff;
    letter-spacing: 0.09rem;
    font-weight: 700;
    font-size: clamp(0.95rem, 1vw, 1.15rem);
}

.pres-actions {
    margin-top: 0.45rem;
    display: grid;
    justify-items: center;
    gap: 0.55rem;
}

.pres-actions-spacer {
    opacity: 0;
    pointer-events: none;
}

.pres-guess-btn {
    border: 0.125rem solid #ff182d;
    background: rgba(255, 255, 255, 0.96);
    color: #ff182d;
    border-radius: 1rem;
    padding: 0.58rem 1.2rem;
    font-size: clamp(0.95rem, 1vw, 1.15rem);
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition);
    min-width: 9.75rem;
}

.pres-guess-btn:hover:not(:disabled) {
    transform: translateY(-0.125rem);
    background: #ffffff;
}

.pres-guess-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pres-loading {
    position: absolute;
    right: 1rem;
    bottom: 0.8rem;
    color: #ffffff;
    background: rgba(0, 20, 56, 0.72);
    padding: 0.45rem 0.8rem;
    border-radius: var(--border-radius-sm);
    border: 0.0625rem solid rgba(255, 255, 255, 0.26);
    z-index: 4;
}

.pres-loading.is-hidden {
    display: none;
}

.pres-duel.is-shifting .pres-player-left {
    transform: translateX(-110%) scale(0.96);
    opacity: 0;
}

.pres-duel.is-shifting .pres-player-right {
    transform: translateX(-100%);
}

.pres-duel.is-entering .pres-player-left {
    animation: pres-left-settle 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.pres-duel.is-entering .pres-player-right {
    animation: pres-right-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes pres-left-settle {
    from {
        transform: translateX(6%) scale(0.98);
        opacity: 0.7;
    }
    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes pres-right-enter {
    from {
        transform: translateX(14%) scale(0.98);
        opacity: 0;
    }
    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

.pres-result-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000000;
    pointer-events: none;
}

.pres-result-dim {
    position: absolute;
    inset: 0;
    background: rgba(2, 10, 28, 0.56);
}

.pres-result-overlay {
    position: relative;
    z-index: 2;
    width: min(30rem, calc(100% - 2rem));
    margin: 0 auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff;
    text-shadow: 0 0.22rem 0.85rem rgba(0, 0, 0, 0.68);
}

.pres-result-title {
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: 0.03rem;
    margin-bottom: 1.25rem;
}

.pres-result-line {
    margin: 0 0 0.5rem;
    font-size: clamp(1.2rem, 1.9vw, 1.75rem);
    font-weight: 700;
}

.pres-result-actions {
    margin-top: 1.1rem;
    display: grid;
    gap: 0.75rem;
}

.pres-result-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 15rem;
    border: 0.125rem solid #ff182d;
    background: rgba(255, 255, 255, 0.96);
    color: #0047AB;
    border-radius: 0.9rem;
    padding: 0.62rem 1.1rem;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02rem;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
}

.pres-result-btn:visited {
    color: #0047AB;
}

.pres-result-btn:hover {
    transform: translateY(-0.1rem);
    background: #ffffff;
}

@media (max-width: 980px) {
    .presencias-body {
        --pres-header-height: 4rem;
    }

    .presencias-body .header {
        padding: 0.45rem 0.7rem;
    }

    .presencias-page {
        height: auto;
        min-height: calc(100dvh - var(--pres-header-height));
    }

    .pres-duel {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .pres-score-badge {
        top: 1rem;
        width: 3.85rem;
        min-height: 4.4rem;
        padding: 0.35rem 0.2rem;
    }

    .pres-score-badge strong {
        font-size: 1.6rem;
    }

    .pres-score-badge span {
        font-size: 0.7rem;
    }

    .pres-score-badge small {
        font-size: 0.54rem;
    }

    .pres-score-badge small strong {
        font-size: 0.6rem;
    }

    .pres-player {
        min-height: 0;
    }

    .pres-player-right {
        border-left: 0;
        border-top: 0.0625rem solid rgba(255, 255, 255, 0.18);
    }

    .pres-result-overlay {
        width: min(24rem, calc(100% - 2rem));
        align-items: center;
        text-align: center;
    }

    .pres-result-actions {
        width: 100%;
        justify-items: center;
    }

    .pres-result-btn {
        width: min(18rem, 100%);
    }

    .pres-player-image {
        object-position: center 18%;
        transform: scale(1.04);
    }

    .pres-player-content {
        padding: 0 1.1rem;
    }

    .pres-player-name {
        font-size: clamp(1.45rem, 7vw, 2rem);
        margin-bottom: 0.1rem;
    }

    .pres-helper {
        font-size: 0.95rem;
    }

    .pres-value {
        font-size: clamp(1.55rem, 7vw, 2.2rem);
    }

    .pres-actions {
        margin-top: 0.35rem;
        gap: 0.42rem;
    }

    .pres-guess-btn {
        width: min(15rem, 88vw);
        padding: 0.52rem 0.85rem;
        font-size: 0.92rem;
    }

    .pres-duel.is-shifting .pres-player-left {
        transform: translateY(-110%) scale(0.96);
        opacity: 0;
    }

    .pres-duel.is-shifting .pres-player-right {
        transform: translateY(-102%);
    }
}

@media (max-height: 760px) {
    .presencias-body {
        --pres-header-height: 3.85rem;
    }

    .presencias-body .header {
        padding: 0.38rem 0.75rem;
    }

    .presencias-body .escudo {
        height: 2rem;
    }

    .presencias-body .logo {
        font-size: 1.7rem;
    }

    .pres-score-badge {
        top: 0.8rem;
        width: 3.5rem;
        min-height: 3.85rem;
    }

    .pres-score-badge strong {
        font-size: 1.5rem;
    }

    .pres-player-content {
        padding: 0 1rem;
    }

    .pres-player-stack {
        gap: 0.22rem;
    }

    .pres-player-name {
        font-size: clamp(1.2rem, 2.1vw, 2rem);
    }

    .pres-helper {
        font-size: 0.9rem;
    }

    .pres-value {
        font-size: clamp(1.5rem, 2vw, 2.25rem);
    }

    .pres-label {
        font-size: 0.82rem;
    }

    .pres-actions {
        margin-top: 0.25rem;
        gap: 0.32rem;
    }

    .pres-guess-btn {
        padding: 0.46rem 0.9rem;
        font-size: 0.86rem;
        min-width: 8.8rem;
    }
}

.guess-panel-wrap {
    margin-top: 0;
}

.guess-panel {
    background: linear-gradient(140deg, var(--primary-alpha-10) 0%, transparent 100%);
    border: 0.0625rem solid var(--primary-alpha-20);
    border-radius: var(--border-radius-md);
    padding: 0.55rem;
}

.guess-label {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06rem;
}

.guess-controls {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.4rem;
}

.guess-input {
    width: 100%;
    padding: 0.5rem 0.68rem;
    border-radius: var(--border-radius-sm);
    border: 0.0625rem solid var(--primary-alpha-30);
    background: var(--color-bg-darker);
    color: var(--color-secondary);
    outline: none;
}

.guess-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 0.2rem var(--primary-alpha-10);
}

.guess-button {
    width: auto;
    margin-bottom: 0;
    padding: 0.52rem 1rem;
    font-size: 0.82rem;
}

.skip-button {
    margin-bottom: 0;
    white-space: nowrap;
    border: 0.0625rem solid #ff9aa6;
    background: linear-gradient(165deg, #ff203f 0%, #a1001c 100%);
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.03rem;
    text-transform: uppercase;
    box-shadow: 0 0.42rem 1rem rgba(200, 0, 34, 0.45);
    padding: 0.52rem 0.9rem;
}

.skip-button:hover {
    border-color: #ffd3d9;
    color: #ffffff;
    transform: translateY(-0.125rem) scale(1.02);
    box-shadow: 0 0.64rem 1.35rem rgba(200, 0, 34, 0.58);
}

.skip-button:active {
    transform: translateY(0);
    box-shadow: 0 0.25rem 0.62rem rgba(200, 0, 34, 0.42);
}

.trajectory-body .header {
    padding: 0.55rem 0.9rem;
}

.trajectory-body .logo {
    font-size: 2rem;
}

.trajectory-body .escudo {
    height: 2.25rem;
}

.trajectory-feedback {
    min-height: 1.5rem;
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.trajectory-feedback.is-info {
    color: var(--color-text-secondary);
}

.trajectory-feedback.is-success {
    color: var(--color-success);
}

.trajectory-feedback.is-error {
    color: var(--color-error);
}

.is-hidden {
    display: none;
}

.placeholder-reveal {
    border-color: var(--color-primary);
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 7, 20, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: grid;
    place-items: center;
    padding: var(--spacing-lg);
    z-index: 1000;
    overflow-y: auto;
}

.modal-backdrop.is-hidden {
    display: none;
}

.modal-card {
    width: min(34rem, calc(100vw - 2rem));
    background: linear-gradient(160deg, rgba(255,255,255,0.05) 0%, rgba(0, 10, 40, 0.92) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: var(--spacing-xl);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255,255,255,0.04);
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

body.modal-open {
    overflow: hidden;
}

.modal-card .panel-copy {
    margin-top: 0.35rem;
    margin-bottom: 0.75rem;
}

.result-popup {
    position: fixed;
    top: 6.2rem;
    right: 1.2rem;
    width: min(24rem, calc(100vw - 2.4rem));
    border-radius: var(--border-radius-sm);
    padding: 0.8rem 0.95rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-sm);
    z-index: 1100;
    border: 0.0625rem solid var(--primary-alpha-30);
    background: var(--color-card-bg);
    box-shadow: 0 0.6rem 1.8rem var(--black-alpha-30);
}

.result-popup-success {
    border-color: rgba(0, 212, 170, 0.6);
}

.result-popup-error {
    border-color: rgba(220, 20, 60, 0.7);
}

.result-popup-info {
    border-color: var(--primary-alpha-40);
}

.result-popup-message {
    margin: 0;
    color: var(--color-secondary);
    font-size: var(--font-size-sm);
}

.result-popup-close {
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.result-popup-close:hover {
    color: var(--color-secondary);
}

.ambiguous-list {
    list-style: none;
    display: flex;
    gap: var(--spacing-md);
    margin: var(--spacing-md) 0 var(--spacing-lg);
    padding: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.25rem;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
}

.ambiguous-item {
    list-style: none;
    flex: 0 0 100%;
    scroll-snap-align: center;
    min-width: 0;
}

.ambiguous-option {
    width: 100%;
    min-width: 0;
    display: grid;
    gap: 0.2rem;
    text-align: left;
    padding: 0.85rem 0.95rem;
    border-radius: var(--border-radius-sm);
    background:
        linear-gradient(145deg, rgba(0, 31, 84, 0.9), rgba(2, 58, 130, 0.84)),
        var(--primary-alpha-10);
    border: 0.0625rem solid var(--primary-alpha-20);
    color: var(--color-secondary);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ambiguous-option:hover {
    border-color: #8cc2ff;
    transform: translateY(-0.1rem);
    box-shadow: 0 0.5rem 1.2rem rgba(3, 17, 39, 0.35);
}

.ambiguous-toolbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--spacing-sm);
}

.ambiguous-nav {
    min-width: 6.3rem;
    padding: 0.45rem 0.7rem;
}

.ambiguous-nav:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ambiguous-position {
    margin: 0;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-accent);
    font-size: var(--font-size-sm);
}

.ambiguous-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(230, 236, 255, 0.78);
}

.ambiguous-surname {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
}

.ambiguous-name {
    color: rgba(245, 248, 255, 0.92);
    font-weight: 600;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.ambiguous-year {
    color: #9ed0ff;
    font-weight: 700;
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .trajectory-panel,
    .player-reveal-card {
        padding: 0.55rem;
    }

    .club-slots-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .guess-controls {
        grid-template-columns: 1fr;
    }

    .guess-button,
    .skip-button {
        width: 100%;
    }

    .ambiguous-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .ambiguous-position {
        grid-column: 1 / -1;
        order: -1;
    }

    .ambiguous-nav {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .club-slots-grid {
        grid-template-columns: 1fr;
    }

    .player-reveal-box {
        width: 5.8rem;
    }

    .club-slot-media {
        width: 4.9rem;
    }

    .club-shield {
        width: 3.2rem;
    }

    .trajectory-body .logo {
        font-size: 1.6rem;
    }

    .trajectory-body .escudo {
        height: 2rem;
    }
}

/* Jugador del día */
.wordle-page {
    display: grid;
    justify-items: center;
    font-family: 'Montecatini Pro', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.wordle-page button,
.wordle-page input {
    font-family: 'Montecatini Pro', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.wordle-panel {
    width: min(38rem, 100%);
    display: grid;
    gap: var(--spacing-lg);
}

.wordle-header-content {
    align-items: center;
}

.wordle-stats-nav-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 0.125rem solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 71, 171, 0.35);
    color: #ffffff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: var(--transition);
}

.wordle-stats-nav-btn:hover {
    background: rgba(220, 20, 60, 0.78);
    border-color: rgba(255, 255, 255, 0.6);
}

.wordle-reveal-card {
    margin: 0 auto;
    width: min(18rem, 100%);
}

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

.wordle-top .panel-copy {
    margin-bottom: 0;
    color: #ffffff;
}

.wordle-panel .trajectory-feedback,
.wordle-panel .trajectory-feedback.is-info {
    color: #ffffff;
}

.wordle-board {
    display: grid;
    gap: 0.42rem;
    justify-content: center;
}

.wordle-row.wordle-columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wordle-row.wordle-columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wordle-row.wordle-columns-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.wordle-row.wordle-columns-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.wordle-row.wordle-columns-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.wordle-row.wordle-columns-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.wordle-row.wordle-columns-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
}

.wordle-row {
    display: grid;
    gap: 0.42rem;
}

.wordle-tile {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0.45rem;
    border: 0.125rem solid #5a5a5a;
    background: #2f2f2f;
    color: #ffffff;
    font-size: 1.55rem;
    font-weight: 800;
    text-transform: uppercase;
    display: grid;
    place-items: center;
    transition: var(--transition);
}

.wordle-tile.filled {
    background: #2f2f2f;
    border-color: #7a7a7a;
    box-shadow: inset 0 0 0.2rem rgba(255, 255, 255, 0.08);
}

.wordle-tile.state-correct {
    background: #9b0000;
    border-color: #ff0000;
    color: #ffffff;
}

.wordle-tile.state-present {
    background: #040061;
    border-color: #283680;
    color: #ffffff;
}

.wordle-tile.state-absent {
    background: #0043ff;
    border-color: #3f73f0;
    color: #ffffff;
}

.wordle-tile.reveal {
    animation: wordleFlip 0.45s ease;
}

.wordle-tile,
.wordle-tile.filled,
.wordle-tile.state-correct,
.wordle-tile.state-present,
.wordle-tile.state-absent {
    color: #ffffff !important;
}

.wordle-keyboard {
    display: grid;
    gap: 0.45rem;
    background: linear-gradient(155deg, rgba(8, 12, 20, 0.8) 0%, rgba(18, 24, 36, 0.9) 100%);
    border: 0.125rem solid rgba(255, 255, 255, 0.36);
    border-radius: var(--border-radius-md);
    padding: 0.6rem;
    box-shadow: inset 0 0 0 0.09375rem rgba(255, 255, 255, 0.12), 0 0.55rem 1.25rem rgba(0, 0, 0, 0.35);
}

.wordle-keyboard-row {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
}

.wordle-key {
    min-width: 2rem;
    height: 2.8rem;
    border: 0.125rem solid rgba(255, 255, 255, 0.5);
    border-radius: var(--border-radius-sm);
    padding: 0 0.5rem;
    background: linear-gradient(180deg, #4d5565 0%, #343c4c 100%);
    color: #ffffff;
    font-size: var(--font-size-sm);
    font-weight: 800;
    letter-spacing: 0.015rem;
    cursor: pointer;
    box-shadow: inset 0 0.08rem 0.18rem rgba(255, 255, 255, 0.22), 0 0 0 0.0625rem rgba(0, 0, 0, 0.4), 0 0.2rem 0.5rem rgba(0, 0, 0, 0.35);
    transition: var(--transition);
}

.wordle-key:hover {
    border-color: #ffffff;
    background: linear-gradient(180deg, #616a7b 0%, #40495b 100%);
    transform: translateY(-0.08rem);
    box-shadow: inset 0 0.11rem 0.25rem rgba(255, 255, 255, 0.3), 0 0 0 0.09375rem rgba(255, 255, 255, 0.35), 0 0.4rem 0.75rem rgba(0, 0, 0, 0.4);
}

.wordle-key.wide {
    min-width: 3.9rem;
    font-size: var(--font-size-xs);
}

.wordle-key.state-correct {
    background: #c8102e;
    border-color: #e03a56;
    color: #ffffff;
}

.wordle-key.state-present {
    background: #111a4a;
    border-color: #283680;
    color: #ffffff;
}

.wordle-key.state-absent {
    background: #1f57e7;
    border-color: #3f73f0;
    color: #ffffff;
}

.wordle-stats-nav-btn svg,
.social-link svg,
.wordle-hints-btn svg,
.wordle-key svg,
.wordle-toast__icon {
    display: block;
    flex-shrink: 0;
}

.wordle-result-modal-card {
    width: min(34rem, calc(100vw - 2rem));
    position: relative;
    padding-top: 1rem;
}

.wordle-stats-modal-card {
    width: min(32rem, calc(100vw - 2rem));
    position: relative;
    padding-top: 1rem;
}

.wordle-result-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: var(--transition);
}

.wordle-result-close:hover {
    background: rgba(192, 12, 48, 0.55);
    border-color: rgba(192, 12, 48, 0.7);
    color: #ffffff;
}

/* ── Sección jugador dentro del modal ── */
.wordle-player-section {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    padding-bottom: 0.5rem;
}

.wordle-result-photo-box {
    width: 5.5rem;
    aspect-ratio: 1 / 1;
    border-radius: 0.75rem;
    border: 0.125rem solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.2) 100%);
    font-size: 1.8rem;
}

.wordle-result-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wordle-result-player-name {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--color-accent);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04rem;
    line-height: 1.2;
}

.wordle-result-player-stats {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: grid;
    gap: 0.28rem;
}

.wordle-result-stat-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.025rem;
}

.wordle-result-stat-emoji {
    font-size: 1rem;
    flex-shrink: 0;
    width: 1.4rem;
    text-align: center;
}

/* ── Modal estadísticas ── */
.wordle-stats-title {
    margin: 0;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}

.wordle-stats-grid {
    margin-top: 1.25rem;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
}

.wordle-stat-item {
    display: grid;
    justify-items: center;
    align-content: start;
    text-align: center;
    gap: 0.2rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 0.75rem 0.25rem 0.65rem;
}

.wordle-stat-value {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.wordle-stat-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wordle-guess-distribution {
    margin-top: 1.25rem;
    height: 9rem;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: end;
    gap: 0.4rem;
    padding: 0 0.1rem;
}

.wordle-dist-column {
    height: 100%;
    display: grid;
    align-content: end;
    justify-items: center;
    gap: 0.25rem;
}

.wordle-dist-bar {
    width: 100%;
    min-height: 0;
    border-radius: 0.2rem;
    background: var(--color-accent);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.15rem 0;
}

.wordle-dist-bar--0 {
    height: 0;
}

.wordle-dist-bar--5 {
    height: 5%;
}

.wordle-dist-bar--10 {
    height: 10%;
}

.wordle-dist-bar--15 {
    height: 15%;
}

.wordle-dist-bar--20 {
    height: 20%;
}

.wordle-dist-bar--25 {
    height: 25%;
}

.wordle-dist-bar--30 {
    height: 30%;
}

.wordle-dist-bar--35 {
    height: 35%;
}

.wordle-dist-bar--40 {
    height: 40%;
}

.wordle-dist-bar--45 {
    height: 45%;
}

.wordle-dist-bar--50 {
    height: 50%;
}

.wordle-dist-bar--55 {
    height: 55%;
}

.wordle-dist-bar--60 {
    height: 60%;
}

.wordle-dist-bar--65 {
    height: 65%;
}

.wordle-dist-bar--70 {
    height: 70%;
}

.wordle-dist-bar--75 {
    height: 75%;
}

.wordle-dist-bar--80 {
    height: 80%;
}

.wordle-dist-bar--85 {
    height: 85%;
}

.wordle-dist-bar--90 {
    height: 90%;
}

.wordle-dist-bar--95 {
    height: 95%;
}

.wordle-dist-bar--100 {
    height: 100%;
}

.wordle-dist-label {
    font-size: 0.72rem;
    line-height: 1;
    color: var(--color-text-secondary);
    font-weight: 700;
}

@keyframes wordleFlip {
    0% {
        transform: rotateX(0);
    }
    45% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(0);
    }
}

@media (max-width: 768px) {
    .wordle-stats-nav-btn {
        width: 2.3rem;
        height: 2.3rem;
    }

    .wordle-icon {
        width: 6rem;
    }

    .wordle-tile {
        width: 2.8rem;
        height: 2.8rem;
        font-size: 1.3rem;
    }

    .wordle-key {
        min-width: 1.7rem;
        height: 2.5rem;
        font-size: var(--font-size-xs);
        padding: 0 0.35rem;
    }

    .wordle-key.wide {
        min-width: 3.3rem;
    }
}

@media (max-width: 480px) {
    .wordle-stats-modal-card {
        padding: 0.9rem 0.75rem 0.75rem;
    }

    .wordle-stats-nav-btn {
        width: 2.1rem;
        height: 2.1rem;
    }

    .wordle-icon {
        width: 5rem;
    }

    .wordle-tile {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.15rem;
    }

    .wordle-key {
        min-width: 1.45rem;
        height: 2.2rem;
        padding: 0 0.2rem;
    }

    .wordle-key.wide {
        min-width: 2.8rem;
    }
}

/* Top 6 */
.top6-page {
    display: grid;
    justify-items: center;
}

.top6-panel {
    width: min(40rem, 100%);
    display: grid;
    gap: var(--spacing-lg);
}

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

.top6-headline .panel-title {
    font-family: 'Montecatini Pro Ampio Bold', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.top6-title-number {
    display: inline-block;
    margin-left: 0.45rem;
}

.top6-category {
    color: var(--color-secondary);
    font-size: 1.1rem;
    font-style: italic;
    margin: 0;
}

.top6-timer {
    margin: 0 auto 0.55rem;
    padding: 0.45rem 1rem;
    width: fit-content;
    min-width: 7rem;
    text-align: center;
    border-radius: 999rem;
    border: 0.125rem solid rgba(220, 20, 60, 0.92);
    background: linear-gradient(180deg, rgba(0, 71, 171, 0.95) 0%, rgba(7, 48, 130, 0.98) 100%);
    color: #ffffff;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.01rem;
    box-shadow: 0 0 0 0.12rem rgba(0, 71, 171, 0.18), 0 0.4rem 1rem rgba(2, 14, 36, 0.42);
}

.top6-timer.is-warning {
    border-color: rgba(255, 211, 102, 0.8);
    background: linear-gradient(180deg, rgba(54, 30, 2, 0.95) 0%, rgba(34, 19, 2, 0.98) 100%);
    color: #ffe8a3;
}

.top6-timer.is-danger {
    border-color: rgba(255, 127, 150, 0.92);
    background: linear-gradient(180deg, rgba(68, 6, 20, 0.95) 0%, rgba(43, 4, 13, 0.98) 100%);
    color: #ffd5df;
}

.top6-timer.is-success {
    border-color: rgba(126, 236, 204, 0.82);
    background: linear-gradient(180deg, rgba(3, 49, 39, 0.95) 0%, rgba(2, 29, 23, 0.98) 100%);
    color: #d9fff4;
}

.top6-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.top6-row {
    display: grid;
    grid-template-columns: 3rem 3.8rem 1fr;
    align-items: center;
    min-height: 3.2rem;
    border: 0.0625rem solid rgba(99, 173, 255, 0.45);
    border-radius: 0.65rem;
    background: rgba(2, 26, 60, 0.62);
}

.top6-position {
    display: grid;
    place-items: center;
    font-family: 'Montecatini Pro Ampio Bold', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.8rem;
    color: #ffffff;
    font-weight: 800;
    height: calc(100% - 0.45rem);
    margin: 0.22rem 0.1rem 0.22rem 0.22rem;
    border: 0.0625rem solid rgba(99, 173, 255, 0.8);
    border-radius: 0.55rem;
    background: linear-gradient(180deg, rgba(220, 20, 60, 0.88) 0%, rgba(155, 10, 43, 0.9) 100%);
}

.top6-flag-wrap {
    display: grid;
    place-items: center;
}

.top6-flag {
    width: 2.35rem;
    height: 1.55rem;
    object-fit: cover;
    border: 0.0625rem solid rgba(255, 255, 255, 0.42);
}

.top6-player-name {
    color: #ffffff;
    font-size: 1.2rem;
    letter-spacing: 0.03rem;
    padding-right: 0.85rem;
}

.top6-panel .guess-label,
.top6-panel .trajectory-feedback,
.top6-panel .trajectory-feedback.is-info {
    color: #ffffff;
}

.top6-row.is-solved {
    border-color: rgba(220, 20, 60, 0.72);
    background: linear-gradient(120deg, rgba(10, 48, 104, 0.82) 0%, rgba(9, 40, 86, 0.78) 65%, rgba(155, 10, 43, 0.34) 100%);
}

.top6-row.is-solved .top6-player-name {
    color: #ffffff;
    font-weight: 700;
}

.top6-row.is-solved .top6-position {
    background: linear-gradient(180deg, #e01846 0%, #b10c34 100%);
}

.top6-row.is-missed {
    border-color: rgba(255, 255, 255, 0.52);
    background: linear-gradient(120deg, rgba(72, 76, 86, 0.9) 0%, rgba(60, 66, 77, 0.88) 100%);
}

.top6-row.is-missed .top6-position {
    background: linear-gradient(180deg, #4a4e56 0%, #343942 100%);
    border-color: rgba(170, 190, 220, 0.55);
}

.top6-row.is-missed .top6-player-name {
    color: #ffffff;
    opacity: 0.92;
}

.top6-guess-form {
    display: grid;
    gap: 0.35rem;
}

.top6-guess-controls {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.4rem;
}

.top6-guess-controls .guess-input {
    background: linear-gradient(180deg, rgba(220, 20, 60, 0.88) 0%, rgba(155, 10, 43, 0.9) 100%);
    color: #ffffff;
    border-color: rgba(99, 173, 255, 0.7);
}

.top6-guess-controls .guess-input::placeholder {
    color: rgba(255, 255, 255, 0.9);
}

.top6-guess-button {
    width: 3.15rem;
    margin: 0;
    padding: 0.52rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.58);
    background: linear-gradient(150deg, #0047AB 0%, #0a63da 72%, #DC143C 100%);
    box-shadow: 0 0.45rem 1rem rgba(8, 34, 79, 0.42);
}

.top6-guess-button:hover {
    border-color: rgba(255, 255, 255, 0.9);
    background: linear-gradient(150deg, #145ac0 0%, #1f72e3 72%, #ef2a56 100%);
}

.top6-confirm-modal-card {
    width: min(25rem, calc(100vw - 2rem));
    padding: 1.05rem 1rem 1.15rem;
    position: relative;
    border-radius: 1rem;
    background: linear-gradient(150deg, rgba(3, 18, 43, 0.98) 0%, rgba(4, 30, 72, 0.95) 100%);
    border: 0.0625rem solid rgba(92, 169, 255, 0.55);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.35), inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.08);
}

.top6-confirm-title {
    margin: 0;
    text-align: center;
    color: var(--color-secondary);
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: 0.01rem;
}

.top6-confirm-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: 0.8rem;
}

.top6-confirm-btn {
    border: 0.0625rem solid rgba(125, 198, 255, 0.55);
    border-radius: 0.7rem;
    background: linear-gradient(150deg, rgba(26, 138, 219, 0.95) 0%, rgba(11, 88, 175, 0.92) 100%);
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    min-width: 4.1rem;
    padding: 0.42rem 0.82rem;
    cursor: pointer;
    box-shadow: 0 0.35rem 0.85rem rgba(4, 30, 75, 0.45);
    transition: var(--transition);
}

.top6-confirm-btn:hover {
    transform: translateY(-0.08rem);
    border-color: rgba(196, 233, 255, 0.85);
    box-shadow: 0 0.5rem 1rem rgba(5, 34, 81, 0.52);
}

.top6-confirm-btn-danger {
    border-color: rgba(255, 127, 150, 0.7);
    background: linear-gradient(150deg, #dc143c 0%, #a1062a 100%);
}

.top6-confirm-btn-danger:hover {
    border-color: rgba(255, 194, 204, 0.95);
    box-shadow: 0 0.5rem 1rem rgba(120, 8, 31, 0.55);
}

.top6-confirm-close {
    position: absolute;
    top: -0.82rem;
    right: -0.52rem;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    border: 0.125rem solid rgba(255, 210, 222, 0.75);
    background: radial-gradient(circle at 30% 30%, #ff4f7b 0%, #dc143c 55%, #8d0828 100%);
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0.45rem 0.9rem rgba(90, 7, 29, 0.45), inset 0 0.07rem 0.2rem rgba(255, 255, 255, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.top6-confirm-close:hover {
    transform: translateY(-0.05rem) scale(1.06) rotate(8deg);
    filter: brightness(1.06);
    box-shadow: 0 0.6rem 1rem rgba(90, 7, 29, 0.58), inset 0 0.1rem 0.22rem rgba(255, 255, 255, 0.33);
}

.top6-result-card {
    border-radius: 0.85rem;
    padding: 0.8rem 0.95rem;
    text-align: center;
    border: 0.0625rem solid rgba(255, 255, 255, 0.32);
    background: linear-gradient(145deg, rgba(5, 28, 67, 0.85) 0%, rgba(8, 38, 85, 0.84) 100%);
    box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, 0.25);
}

.top6-result-card.is-victory {
    border-color: rgba(173, 218, 255, 0.7);
    background: linear-gradient(145deg, rgba(10, 53, 113, 0.9) 0%, rgba(22, 82, 160, 0.86) 100%);
}

.top6-result-card.is-defeat {
    border-color: rgba(255, 148, 171, 0.72);
    background: linear-gradient(145deg, rgba(125, 12, 43, 0.84) 0%, rgba(84, 20, 41, 0.88) 100%);
}

.top6-result-title {
    margin: 0;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.02rem;
}

.top6-result-message {
    margin: 0.32rem 0 0;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
}

/* ============================================================
   Top 6 — buscador con dropdown (añadir al final de style.css)
   ============================================================ */

/* Contenedor general del formulario: columna, sin gap extra
   para que el dropdown quede pegado debajo del input */
.top6-guess-form {
    display: grid;
    gap: 0.35rem;
}

/* Fila input + botón */
.top6-guess-controls {
    display: flex;
    gap: 0.4rem;
    align-items: stretch;
}

/* Input: ocupa todo el espacio restante */
.top6-search-input {
    flex: 1 1 0;
    min-width: 0;
    background: linear-gradient(180deg, rgba(220, 20, 60, 0.88) 0%, rgba(155, 10, 43, 0.9) 100%);
    color: #ffffff;
    border: 0.0625rem solid rgba(99, 173, 255, 0.7);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-lg);
    padding: 0.6rem 0.75rem;
    min-height: 3rem;
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.top6-search-input::placeholder {
    color: rgba(255, 255, 255, 0.85);
}

.top6-search-input:focus {
    border-color: rgba(160, 210, 255, 0.95);
}

/* Dropdown: flujo normal → empuja lo que está debajo.
   Ancho completo del panel, igual que en el grid. */
.top6-suggestions {
    width: 100%;
    margin-top: 0.1rem;
    background: var(--color-accent);
    border: 2px solid var(--color-accent);
    border-radius: 0.8rem;
    box-shadow: 0 0.8rem 1.5rem rgba(0, 0, 0, 0.4);
    max-height: min(15rem, 40vh);
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: block;
    padding: 0.4rem 0;
    box-sizing: border-box;
}

.top6-suggestions::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.top6-suggestions.is-hidden {
    display: none;
}

/* Ítems */
.top6-suggestions .grid-suggestion-item {
    border: none;
    background: transparent;
    display: block;
    width: calc(100% - 0.8rem);
    text-align: left;
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: background 0.15s ease;
    margin: 0 0.4rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.top6-suggestions .grid-suggestion-item:hover {
    background: rgba(255, 255, 255, 0.2);
}

.top6-suggestions .grid-suggestion-item.is-highlighted {
    background: rgba(0, 0, 0, 0.25);
    font-weight: 600;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.top6-suggestions .grid-suggestion-item:active {
    background: rgba(0, 0, 0, 0.35);
}

@media (max-width: 480px) {
    .top6-search-input {
        font-size: var(--font-size-base);
    }
}

/* ── Botón de pista ─────────────────────────────────────────────────────── */

.top6-hint-wrap {
    display: flex;
    justify-content: flex-end;
}

.top6-hint-wrap.is-hidden {
    display: none;
}

.top6-hint-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.85rem 0.38rem 0.7rem;
    border-radius: 999rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.45);
    background: linear-gradient(135deg, rgba(0, 71, 171, 0.82) 0%, rgba(4, 40, 110, 0.9) 100%);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.top6-hint-btn:hover {
    background: linear-gradient(135deg, rgba(0, 90, 210, 0.92) 0%, rgba(6, 52, 140, 0.97) 100%);
    border-color: rgba(255, 255, 255, 0.7);
    transform: translateY(-0.06rem);
}

.top6-hint-btn:active {
    transform: translateY(0);
}

.top6-hint-btn .fa-lightbulb {
    color: #ffd166;
    font-size: 0.88rem;
}

.top6-hint-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    border-radius: 999rem;
    background: rgba(220, 20, 60, 0.9);
    border: 0.0625rem solid rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    padding: 0 0.2rem;
}

/* ── Hint tags dentro de cada fila ─────────────────────────────────────── */

.top6-hint-area {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.2rem;
}

.top6-hint-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999rem;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.02rem;
    white-space: nowrap;
}

/* Pista 1 — década: tono azul oscuro con borde blanco suave */
.top6-hint-tag--1 {
    background: rgba(0, 25, 90, 0.85);
    border: 0.0625rem solid rgba(99, 173, 255, 0.65);
    color: #c8e0ff;
}

.top6-hint-tag--1 .fa-calendar-days {
    color: #7ab8ff;
    font-size: 0.7rem;
}

/* Pista 2 — posición: tono rojo oscuro con borde blanco suave */
.top6-hint-tag--2 {
    background: rgba(100, 5, 22, 0.85);
    border: 0.0625rem solid rgba(255, 120, 140, 0.55);
    color: #ffd5dc;
}

.top6-hint-tag--2 .fa-shirt {
    color: #ff8ea1;
    font-size: 0.7rem;
}

/* Ajuste en la fila: el nombre + hint van en columna */
.top6-row .top6-player-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* La fila crece si hay hint tags */
.top6-row:has(.top6-hint-area) {
    min-height: 3.8rem;
}

/* ── Toast ──────────────────────────────────────────────────────────────── */

.top6-toast-container {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    pointer-events: none;
    width: max-content;
    max-width: min(92vw, 22rem);
}

.top6-toast {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1rem;
    border-radius: 0.75rem;
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.32);
    pointer-events: auto;
    animation: top6-toast-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    white-space: nowrap;
}

.top6-toast.is-leaving {
    animation: top6-toast-out 0.22s ease forwards;
}

.top6-toast--error {
    background: linear-gradient(135deg, #b00c28 0%, #8a0820 100%);
    border: 0.0625rem solid rgba(255, 120, 140, 0.4);
}

.top6-toast--success {
    background: linear-gradient(135deg, #0a3f80 0%, #062a5a 100%);
    border: 0.0625rem solid rgba(99, 173, 255, 0.45);
}

.top6-toast--info {
    background: linear-gradient(135deg, rgba(0, 30, 80, 0.97) 0%, rgba(0, 18, 55, 0.98) 100%);
    border: 0.0625rem solid rgba(150, 200, 255, 0.35);
}

.top6-toast--hint {
    background: linear-gradient(135deg, #0a2e6e 0%, #071d4a 100%);
    border: 0.0625rem solid rgba(255, 209, 102, 0.5);
}

.top6-toast__icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.top6-toast--hint .top6-toast__icon {
    color: #ffd166;
}

@keyframes top6-toast-in {
    from { opacity: 0; transform: translateY(-14px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0)     scale(1);   }
}

@keyframes top6-toast-out {
    from { opacity: 1; transform: translateY(0)      scale(1);    }
    to   { opacity: 0; transform: translateY(-10px)  scale(0.95); }
}

/* ============================================================
   XI DEL DIA
   ============================================================ */

.xidel-page {
    padding-top: 0.45rem;
}

.xidel-match-header {
    text-align: center;
    margin-bottom: 0.75rem;
}

.xidel-competition {
    margin: 0;
    color: var(--color-accent);
    font-family: 'Montecatini Pro Stretto Ultra', sans-serif;
    letter-spacing: 0.08rem;
    font-size: clamp(1.6rem, 3.6vw, 2.8rem);
}

.xidel-venue-date {
    margin: 0.2rem 0 0;
    color: #dce8ff;
    font-family: 'Segoe UI', sans-serif;
    font-weight: 700;
    letter-spacing: 0.04rem;
}

.xidel-scoreline {
    margin: 0.15rem 0 0;
    color: #ffffff;
    font-family: 'Segoe UI', sans-serif;
    font-weight: 800;
    letter-spacing: 0.04rem;
    font-size: clamp(1.1rem, 2.5vw, 1.75rem);
}

.xidel-progress {
    margin-top: 0.55rem;
    color: #c9dcff;
    font-size: 0.9rem;
}

.xidel-pitch-shell {
    width: min(100%, 58rem);
    margin: 0 auto;
    border: 0.18rem solid var(--color-accent);
    border-radius: 1.2rem;
    padding: 1rem 0.6rem;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 38%, rgba(0, 0, 0, 0) 40%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 70, 173, 0.09) 100%);
    box-shadow: 0 0.9rem 2rem rgba(0, 0, 0, 0.35);
}

.xidel-pitch {
    position: relative;
    min-height: 40rem;
    border: 0.1rem solid rgba(255, 255, 255, 0.35);
    border-radius: 0.9rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(0, 49, 120, 0.05) 100%),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 7.5%, rgba(0, 0, 0, 0) 7.5%, rgba(0, 0, 0, 0) 15%);
}

.xidel-player-card {
    position: absolute;
    width: clamp(6.6rem, 15vw, 8.7rem);
    transform: translate(-50%, -50%);
    border: 0.15rem solid rgba(255, 255, 255, 0.18);
    border-radius: 0.72rem;
    background: linear-gradient(180deg, rgba(0, 70, 173, 0.98) 0%, rgba(0, 55, 140, 0.98) 100%);
    color: #fff;
    padding: 0.5rem 0.45rem 0.55rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.24rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.xidel-player-card:hover {
    transform: translate(-50%, -50%) translateY(-0.14rem);
    box-shadow: 0 0.65rem 1.2rem rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.34);
}

.xidel-player-card.is-failed {
    border-color: rgba(192, 12, 48, 0.8);
}

.xidel-player-card.is-solved {
    border-color: rgba(150, 220, 255, 0.95);
    background: linear-gradient(180deg, rgba(70, 170, 255, 0.98) 0%, rgba(33, 128, 215, 0.98) 100%);
    box-shadow: 0 0.5rem 1.1rem rgba(34, 148, 238, 0.28);
}

.xidel-player-card.is-solved .xidel-player-name {
    color: #eff8ff;
}

.xidel-player-photo-wrap {
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.xidel-player-photo-wrap i {
    font-size: 1.1rem;
    opacity: 0.82;
}

.xidel-player-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.xidel-player-position {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08rem;
    opacity: 0.9;
}

.xidel-player-name {
    font-size: 0.8rem;
    font-weight: 800;
    color: #dbe9ff;
    line-height: 1.1;
    text-align: center;
    min-height: 1.9rem;
}

.xidel-slot-1 { left: 50%; top: 82%; }
.xidel-slot-2 { left: 84%; top: 61%; }
.xidel-slot-3 { left: 38%; top: 61%; }
.xidel-slot-4 { left: 62%; top: 61%; }
.xidel-slot-5 { left: 16%; top: 61%; }
.xidel-slot-6 { left: 30%; top: 40%; }
.xidel-slot-7 { left: 50%; top: 40%; }
.xidel-slot-8 { left: 70%; top: 40%; }
.xidel-slot-9 { left: 77%; top: 19%; }
.xidel-slot-10 { left: 50%; top: 19%; }
.xidel-slot-11 { left: 23%; top: 19%; }

.xidel-pitch[data-formation="4-4-2"] .xidel-slot-1 { left: 50%; top: 82%; }
.xidel-pitch[data-formation="4-4-2"] .xidel-slot-2 { left: 84%; top: 61%; }
.xidel-pitch[data-formation="4-4-2"] .xidel-slot-3 { left: 62%; top: 61%; }
.xidel-pitch[data-formation="4-4-2"] .xidel-slot-4 { left: 38%; top: 61%; }
.xidel-pitch[data-formation="4-4-2"] .xidel-slot-5 { left: 16%; top: 61%; }
.xidel-pitch[data-formation="4-4-2"] .xidel-slot-6 { left: 83%; top: 40%; }
.xidel-pitch[data-formation="4-4-2"] .xidel-slot-7 { left: 61%; top: 40%; }
.xidel-pitch[data-formation="4-4-2"] .xidel-slot-8 { left: 39%; top: 40%; }
.xidel-pitch[data-formation="4-4-2"] .xidel-slot-9 { left: 17%; top: 40%; }
.xidel-pitch[data-formation="4-4-2"] .xidel-slot-10 { left: 60%; top: 19%; }
.xidel-pitch[data-formation="4-4-2"] .xidel-slot-11 { left: 40%; top: 19%; }

.xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-1 { left: 50%; top: 82%; }
.xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-1 { left: 50%; top: 90%; }
.xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-2 { left: 84%; top: 70%; }
.xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-3 { left: 62%; top: 70%; }
.xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-4 { left: 38%; top: 70%; }
.xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-5 { left: 16%; top: 70%; }
.xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-6 { left: 58%; top: 50%; }
.xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-7 { left: 42%; top: 50%; }
.xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-8 { left: 79%; top: 34%; }
.xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-9 { left: 50%; top: 29%; }
.xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-10 { left: 21%; top: 34%; }
.xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-11 { left: 50%; top: 14%; }

.xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-1 { left: 50%; top: 86%; }
.xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-2 { left: 84%; top: 65%; }
.xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-3 { left: 62%; top: 65%; }
.xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-4 { left: 38%; top: 65%; }
.xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-5 { left: 16%; top: 65%; }
.xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-6 { left: 70%; top: 50%; }
.xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-7 { left: 50%; top: 50%; }
.xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-8 { left: 30%; top: 50%; }
.xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-9 { left: 50%; top: 37%; }
.xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-10 { left: 62%; top: 20%; }
.xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-11 { left: 38%; top: 20%; }

.xidel-pitch[data-formation="3-5-2"] .xidel-slot-1 { left: 50%; top: 82%; }
.xidel-pitch[data-formation="3-5-2"] .xidel-slot-2 { left: 70%; top: 63%; }
.xidel-pitch[data-formation="3-5-2"] .xidel-slot-3 { left: 50%; top: 63%; }
.xidel-pitch[data-formation="3-5-2"] .xidel-slot-4 { left: 30%; top: 63%; }
.xidel-pitch[data-formation="3-5-2"] .xidel-slot-5 { left: 86%; top: 44%; }
.xidel-pitch[data-formation="3-5-2"] .xidel-slot-6 { left: 66%; top: 42%; }
.xidel-pitch[data-formation="3-5-2"] .xidel-slot-7 { left: 50%; top: 42%; }
.xidel-pitch[data-formation="3-5-2"] .xidel-slot-8 { left: 34%; top: 42%; }
.xidel-pitch[data-formation="3-5-2"] .xidel-slot-9 { left: 14%; top: 44%; }
.xidel-pitch[data-formation="3-5-2"] .xidel-slot-10 { left: 60%; top: 19%; }
.xidel-pitch[data-formation="3-5-2"] .xidel-slot-11 { left: 40%; top: 19%; }

/* Robust desktop layout: 4-2-3-1 uses grid to prevent overlap on different monitor sizes */
.xidel-pitch[data-formation="4-2-3-1"] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    gap: 0.7rem;
    align-items: center;
    justify-items: center;
    padding: 1rem 0.65rem;
}

.xidel-pitch[data-formation="4-2-3-1"] .xidel-player-card {
    position: static;
    transform: none;
    width: min(100%, clamp(6.2rem, 12vw, 8.4rem));
}

.xidel-pitch[data-formation="4-2-3-1"] .xidel-player-card:hover {
    transform: translateY(-0.14rem);
}

.xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-11 { grid-column: 5 / span 4; grid-row: 1; }
.xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-8 { grid-column: 9 / span 4; grid-row: 2; }
.xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-9 { grid-column: 5 / span 4; grid-row: 2; }
.xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-10 { grid-column: 1 / span 4; grid-row: 2; }
.xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-6 { grid-column: 7 / span 3; grid-row: 3; }
.xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-7 { grid-column: 4 / span 3; grid-row: 3; }
.xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-2 { grid-column: 10 / span 3; grid-row: 4; }
.xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-3 { grid-column: 7 / span 3; grid-row: 4; }
.xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-4 { grid-column: 4 / span 3; grid-row: 4; }
.xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-5 { grid-column: 1 / span 3; grid-row: 4; }
.xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-1 { grid-column: 4 / span 6; grid-row: 5; }

/* Robust desktop layout: 4-3-1-2 uses grid to avoid overlap between MCO/MC/DC cards */
.xidel-pitch[data-formation="4-3-1-2"] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    gap: 0.75rem;
    align-items: center;
    justify-items: center;
    padding: 1rem 0.65rem;
}

.xidel-pitch[data-formation="4-3-1-2"] .xidel-player-card {
    position: static;
    transform: none;
    width: min(100%, clamp(6.2rem, 12vw, 8.4rem));
}

.xidel-pitch[data-formation="4-3-1-2"] .xidel-player-card:hover {
    transform: translateY(-0.14rem);
}

.xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-10 { grid-column: 7 / span 3; grid-row: 1; }
.xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-11 { grid-column: 4 / span 3; grid-row: 1; }
.xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-9 { grid-column: 5 / span 4; grid-row: 2; }
.xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-6 { grid-column: 9 / span 3; grid-row: 3; }
.xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-7 { grid-column: 5 / span 4; grid-row: 3; }
.xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-8 { grid-column: 2 / span 3; grid-row: 3; }
.xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-2 { grid-column: 10 / span 3; grid-row: 4; }
.xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-3 { grid-column: 7 / span 3; grid-row: 4; }
.xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-4 { grid-column: 4 / span 3; grid-row: 4; }
.xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-5 { grid-column: 1 / span 3; grid-row: 4; }
.xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-1 { grid-column: 4 / span 6; grid-row: 5; }

.xidel-load-error {
    text-align: center;
    color: #ffdce4;
    padding-top: 2rem;
}

.xidel-modal-card {
    width: min(34rem, calc(100vw - 2rem));
    background: linear-gradient(180deg, rgba(0, 31, 86, 0.98) 0%, rgba(0, 21, 62, 0.98) 100%);
    border: 0.12rem solid rgba(255, 255, 255, 0.24);
    overflow: visible;
}

.xidel-modal-title {
    margin: 0;
    text-align: center;
    color: #ffffff;
    font-size: 1.45rem;
    letter-spacing: 0.04rem;
}

.xidel-modal-subtitle {
    margin: 0.4rem 0 0;
    text-align: center;
    color: #cadeff;
    font-size: 0.95rem;
}

.xidel-toast-container,
#xidel-toast-container {
    position: fixed;
    top: calc(1rem + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1800;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    width: max-content;
    max-width: min(92vw, 24rem);
    pointer-events: none;
}

.xidel-toast {
    padding: 0.6rem 0.95rem;
    border-radius: 0.75rem;
    color: #ffffff;
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
    animation: xidel-toast-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    pointer-events: auto;
}

.xidel-toast.is-leaving {
    animation: xidel-toast-out 0.22s ease forwards;
}

.xidel-toast--success {
    background: linear-gradient(135deg, #0a3f80 0%, #062a5a 100%);
    border: 0.0625rem solid rgba(99, 173, 255, 0.45);
}

.xidel-toast--error {
    background: linear-gradient(135deg, #b00c28 0%, #8a0820 100%);
    border: 0.0625rem solid rgba(255, 120, 140, 0.4);
}

.xidel-toast--warning,
.xidel-toast--info {
    background: linear-gradient(135deg, rgba(0, 30, 80, 0.97) 0%, rgba(0, 18, 55, 0.98) 100%);
    border: 0.0625rem solid rgba(150, 200, 255, 0.35);
}

@keyframes xidel-toast-in {
    from { opacity: 0; transform: translateY(-14px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes xidel-toast-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-10px) scale(0.95); }
}

.xidel-wordle-board {
    margin-top: 0.75rem;
    display: grid;
    gap: 0.42rem;
}

.xidel-wordle-row {
    display: grid;
    gap: 0.42rem;
    grid-template-columns: repeat(var(--xidel-wordle-columns, 6), 1fr);
}

.xidel-wordle-tile {
    height: 2.65rem;
    border-radius: 0.5rem;
    border: 0.09rem solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.05);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    font-weight: 800;
}

.xidel-wordle-tile.filled {
    border-color: rgba(255, 255, 255, 0.5);
}

.xidel-wordle-tile.state-correct {
    background: #c00c30;
    border-color: #c00c30;
}

.xidel-wordle-tile.state-present {
    background: #0c3f95;
    border-color: #0c3f95;
}

.xidel-wordle-tile.state-absent {
    background: #7aa9e8;
    border-color: #7aa9e8;
    color: #052043;
}

.xidel-wordle-keyboard {
    margin-top: 0.8rem;
    display: grid;
    gap: 0.38rem;
    width: 100%;
}

.xidel-modal-actions,
.xidel-actions-row {
    display: flex;
    justify-content: center;
    margin-top: 0.85rem;
}

.xidel-actions-row {
    margin-top: 0.95rem;
}

.xidel-surrender-btn {
    border: 0.0625rem solid rgba(255, 145, 165, 0.5);
    background: linear-gradient(135deg, #b00c28 0%, #8a0820 100%);
    color: #ffffff;
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 0.6rem;
    padding: 0.45rem 1rem;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.xidel-surrender-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.xidel-surrender-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

.xidel-wordle-keyboard-row {
    display: flex;
    justify-content: center;
    gap: 0.3rem;
    width: 100%;
}

.xidel-wordle-key {
    flex: 1 1 0;
    min-width: 0;
    max-width: 2.4rem;
    height: 2.35rem;
    border: none;
    border-radius: 0.38rem;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.xidel-wordle-key.wide {
    flex: 1.8 1 0;
    min-width: 0;
    max-width: 3.8rem;
}

.xidel-wordle-key.state-correct { background: #c00c30; }
.xidel-wordle-key.state-present { background: #0c3f95; }
.xidel-wordle-key.state-absent {
    background: #7aa9e8;
    color: #052043;
}

@media (max-width: 900px) {
    .xidel-page {
        padding-top: 0.3rem;
    }

    .xidel-pitch {
        min-height: 36.5rem;
    }

    .xidel-player-card {
        width: clamp(5.3rem, 16vw, 7.1rem);
        padding: 0.42rem 0.3rem 0.5rem;
    }

    .xidel-player-photo-wrap {
        width: 2.3rem;
        height: 2.3rem;
    }

    .xidel-player-name {
        font-size: 0.75rem;
    }
}

@media (max-width: 620px) {
    .xidel-match-header {
        margin-bottom: 0.5rem;
    }

    .xidel-pitch {
        min-height: auto;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-rows: repeat(4, auto);
        gap: 0.55rem;
        align-items: center;
        padding: 0.8rem 0.45rem;
    }

    .xidel-player-card {
        position: static;
        transform: none;
        width: 100%;
        min-height: 6.5rem;
        padding: 0.35rem 0.25rem 0.4rem;
    }

    .xidel-player-card:hover {
        transform: none;
    }

    .xidel-player-photo-wrap {
        width: 2.05rem;
        height: 2.05rem;
    }

    .xidel-player-position {
        font-size: 0.58rem;
    }

    .xidel-player-name {
        font-size: 0.69rem;
        min-height: 1.45rem;
    }

    .xidel-pitch[data-formation="4-3-3"] .xidel-slot-9 { grid-column: 9 / span 4; grid-row: 1; }
    .xidel-pitch[data-formation="4-3-3"] .xidel-slot-10 { grid-column: 5 / span 4; grid-row: 1; }
    .xidel-pitch[data-formation="4-3-3"] .xidel-slot-11 { grid-column: 1 / span 4; grid-row: 1; }
    .xidel-pitch[data-formation="4-3-3"] .xidel-slot-6 { grid-column: 1 / span 4; grid-row: 2; }
    .xidel-pitch[data-formation="4-3-3"] .xidel-slot-7 { grid-column: 5 / span 4; grid-row: 2; }
    .xidel-pitch[data-formation="4-3-3"] .xidel-slot-8 { grid-column: 9 / span 4; grid-row: 2; }
    .xidel-pitch[data-formation="4-3-3"] .xidel-slot-2 { grid-column: 10 / span 3; grid-row: 3; }
    .xidel-pitch[data-formation="4-3-3"] .xidel-slot-3 { grid-column: 7 / span 3; grid-row: 3; }
    .xidel-pitch[data-formation="4-3-3"] .xidel-slot-4 { grid-column: 4 / span 3; grid-row: 3; }
    .xidel-pitch[data-formation="4-3-3"] .xidel-slot-5 { grid-column: 1 / span 3; grid-row: 3; }
    .xidel-pitch[data-formation="4-3-3"] .xidel-slot-1 { grid-column: 4 / span 6; grid-row: 4; }

    .xidel-pitch[data-formation="4-4-2"] .xidel-slot-10 { grid-column: 7 / span 4; grid-row: 1; }
    .xidel-pitch[data-formation="4-4-2"] .xidel-slot-11 { grid-column: 3 / span 4; grid-row: 1; }
    .xidel-pitch[data-formation="4-4-2"] .xidel-slot-6 { grid-column: 10 / span 3; grid-row: 2; }
    .xidel-pitch[data-formation="4-4-2"] .xidel-slot-7 { grid-column: 7 / span 3; grid-row: 2; }
    .xidel-pitch[data-formation="4-4-2"] .xidel-slot-8 { grid-column: 4 / span 3; grid-row: 2; }
    .xidel-pitch[data-formation="4-4-2"] .xidel-slot-9 { grid-column: 1 / span 3; grid-row: 2; }
    .xidel-pitch[data-formation="4-4-2"] .xidel-slot-2 { grid-column: 10 / span 3; grid-row: 3; }
    .xidel-pitch[data-formation="4-4-2"] .xidel-slot-3 { grid-column: 7 / span 3; grid-row: 3; }
    .xidel-pitch[data-formation="4-4-2"] .xidel-slot-4 { grid-column: 4 / span 3; grid-row: 3; }
    .xidel-pitch[data-formation="4-4-2"] .xidel-slot-5 { grid-column: 1 / span 3; grid-row: 3; }
    .xidel-pitch[data-formation="4-4-2"] .xidel-slot-1 { grid-column: 4 / span 6; grid-row: 4; }

    .xidel-pitch[data-formation="4-2-3-1"] {
        grid-template-rows: repeat(5, auto);
    }
    .xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-11 { grid-column: 5 / span 4; grid-row: 1; }
    .xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-8 { grid-column: 9 / span 4; grid-row: 2; }
    .xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-9 { grid-column: 5 / span 4; grid-row: 2; }
    .xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-10 { grid-column: 1 / span 4; grid-row: 2; }
    .xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-6 { grid-column: 7 / span 3; grid-row: 3; }
    .xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-7 { grid-column: 4 / span 3; grid-row: 3; }
    .xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-2 { grid-column: 10 / span 3; grid-row: 4; }
    .xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-3 { grid-column: 7 / span 3; grid-row: 4; }
    .xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-4 { grid-column: 4 / span 3; grid-row: 4; }
    .xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-5 { grid-column: 1 / span 3; grid-row: 4; }
    .xidel-pitch[data-formation="4-2-3-1"] .xidel-slot-1 { grid-column: 4 / span 6; grid-row: 5; }

    .xidel-pitch[data-formation="4-3-1-2"] {
        grid-template-rows: repeat(5, auto);
    }
    .xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-10 { grid-column: 7 / span 3; grid-row: 1; }
    .xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-11 { grid-column: 4 / span 3; grid-row: 1; }
    .xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-9 { grid-column: 5 / span 4; grid-row: 2; }
    .xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-6 { grid-column: 9 / span 4; grid-row: 3; }
    .xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-7 { grid-column: 5 / span 4; grid-row: 3; }
    .xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-8 { grid-column: 1 / span 4; grid-row: 3; }
    .xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-2 { grid-column: 10 / span 3; grid-row: 4; }
    .xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-3 { grid-column: 7 / span 3; grid-row: 4; }
    .xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-4 { grid-column: 4 / span 3; grid-row: 4; }
    .xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-5 { grid-column: 1 / span 3; grid-row: 4; }
    .xidel-pitch[data-formation="4-3-1-2"] .xidel-slot-1 { grid-column: 4 / span 6; grid-row: 5; }

    .xidel-pitch[data-formation="3-5-2"] {
        grid-template-rows: repeat(5, auto);
        gap: 0.46rem;
    }

    .xidel-pitch[data-formation="3-5-2"] .xidel-player-card {
        min-height: 6rem;
        padding: 0.32rem 0.22rem 0.36rem;
    }

    .xidel-pitch[data-formation="3-5-2"] .xidel-slot-10 { grid-column: 7 / span 4; grid-row: 1; }
    .xidel-pitch[data-formation="3-5-2"] .xidel-slot-11 { grid-column: 3 / span 4; grid-row: 1; }
    .xidel-pitch[data-formation="3-5-2"] .xidel-slot-9 { grid-column: 1 / span 4; grid-row: 2; }
    .xidel-pitch[data-formation="3-5-2"] .xidel-slot-7 { grid-column: 5 / span 4; grid-row: 2; }
    .xidel-pitch[data-formation="3-5-2"] .xidel-slot-5 { grid-column: 9 / span 4; grid-row: 2; }
    .xidel-pitch[data-formation="3-5-2"] .xidel-slot-8 { grid-column: 3 / span 4; grid-row: 3; }
    .xidel-pitch[data-formation="3-5-2"] .xidel-slot-6 { grid-column: 7 / span 4; grid-row: 3; }
    .xidel-pitch[data-formation="3-5-2"] .xidel-slot-4 { grid-column: 1 / span 4; grid-row: 4; }
    .xidel-pitch[data-formation="3-5-2"] .xidel-slot-3 { grid-column: 5 / span 4; grid-row: 4; }
    .xidel-pitch[data-formation="3-5-2"] .xidel-slot-2 { grid-column: 9 / span 4; grid-row: 4; }
    .xidel-pitch[data-formation="3-5-2"] .xidel-slot-1 { grid-column: 4 / span 6; grid-row: 5; }

    .xidel-wordle-tile {
        height: 2.35rem;
        font-size: 1.05rem;
    }

    .xidel-wordle-key {
        flex: 1 1 0;
        min-width: 0;
        max-width: 2rem;
        height: 2.15rem;
        font-size: 0.73rem;
    }

    .xidel-wordle-key.wide {
        flex: 1.8 1 0;
        max-width: 3.4rem;
    }
}

@media (max-width: 768px) {
    .top6-row {
        grid-template-columns: 2.5rem 3.3rem 1fr;
    }

    .top6-position {
        font-size: 1.4rem;
    }

    .top6-player-name {
        font-size: 1rem;
    }

    .top6-timer {
        font-size: 1.6rem;
        min-width: 6.4rem;
    }
}

/* Impostor Bolsilludo */
.impostor-page {
    display: grid;
    justify-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.impostor-panel {
    width: min(64rem, 100%);
    display: grid;
    gap: var(--spacing-lg);
    border: 0.0625rem solid rgba(255, 255, 255, 0.28);
    background: linear-gradient(145deg, #1238ff 0%, #0b28d2 50%, #1033ee 100%);
    box-shadow: 0 1rem 2rem rgba(0, 71, 171, 0.35);
}

.impostor-panel .panel-title,
.impostor-panel .panel-copy,
.impostor-panel .trajectory-feedback,
.impostor-panel .trajectory-feedback.is-info,
.impostor-panel .trajectory-feedback.is-success,
.impostor-panel .trajectory-feedback.is-error {
    color: var(--color-secondary);
}

.impostor-headline {
    display: grid;
    gap: var(--spacing-sm);
}

.impostor-mode-selector {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.impostor-mode-btn {
    border: 0.0625rem solid rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-secondary);
    border-radius: 999rem;
    padding: 0.42rem 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.impostor-mode-btn.is-active {
    background: linear-gradient(90deg, rgba(0, 212, 170, 0.8) 0%, rgba(18, 56, 255, 0.86) 100%);
    border-color: rgba(255, 255, 255, 0.78);
    box-shadow: 0 0.4rem 0.95rem rgba(0, 71, 171, 0.36);
}

.impostor-mode-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.impostor-mode-note {
    margin: 0;
    color: var(--color-secondary);
    opacity: 0.95;
    font-weight: 600;
}

.impostor-headline .panel-title {
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}

.trajectory-shell .panel-title,
.impostor-headline .panel-title,
.wordle-top .panel-title,
.video-headline .panel-title {
    font-family: 'Montecatini Pro Stretto Ultra', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.conx-title .impostor-intro-highlight,
.panel-title .impostor-intro-highlight {
    font-style: normal;
}

.impostor-headline .panel-copy {
    margin-bottom: 0;
    max-width: 62ch;
}

#impostor-feedback:empty {
    display: none;
}

.impostor-actions {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-sm);
}

.impostor-review {
    width: min(16rem, 100%);
    margin-bottom: 0;
    border-radius: 999rem;
    background: linear-gradient(90deg, #c8102e 0%, #ff2148 100%);
    border: 0.0625rem solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0.6rem 1.4rem rgba(200, 16, 46, 0.35);
}

.impostor-board {
    position: relative;
    min-height: 48rem;
    display: grid;
    place-items: center;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    border: 0.0625rem solid rgba(255, 255, 255, 0.28);
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.16) 0%, rgba(0, 71, 171, 0.2) 58%, rgba(0, 71, 171, 0.12) 100%);
}

.impostor-grid {
    width: min(50rem, 100%);
    height: min(50rem, 82vw);
    max-height: 50rem;
    position: relative;
    margin: 0 auto;
}

.impostor-player-card {
    width: 9.2rem;
    min-height: 8.2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0.0625rem solid rgba(255, 255, 255, 0.4);
    border-radius: 1rem;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.2) 0%, rgba(11, 40, 210, 0.34) 100%);
    padding: 0.7rem 0.58rem 0.6rem;
    display: grid;
    justify-items: center;
    gap: 0.08rem;
    cursor: pointer;
    transition: var(--transition);
    z-index: 3;
}

.impostor-player-card:hover {
    border-color: rgba(255, 255, 255, 0.72);
    transform: translateY(-0.16rem) scale(1.01);
    box-shadow: 0 0.7rem 1.5rem rgba(0, 71, 171, 0.32);
}

.impostor-player-card.is-pending {
    border-color: #66c9ff;
    box-shadow: 0 0 0 0.16rem rgba(102, 201, 255, 0.38);
}

.impostor-player-card.is-correct {
    border-color: #00d4aa;
    background: linear-gradient(145deg, rgba(0, 212, 170, 0.42) 0%, rgba(18, 56, 255, 0.8) 100%);
}

.impostor-player-card.is-impostor {
    border-color: #ff2b58;
    background: linear-gradient(145deg, rgba(220, 20, 60, 0.5) 0%, rgba(18, 56, 255, 0.78) 100%);
}

.impostor-player-card.is-disabled {
    cursor: default;
    opacity: 0.96;
}

.impostor-player-avatar {
    width: 3.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 0.0625rem solid rgba(255, 255, 255, 0.48);
    background: rgba(255, 255, 255, 0.16);
    color: var(--color-secondary);
    font-size: var(--font-size-lg);
    overflow: hidden;
}

.impostor-player-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    align-self: stretch;
    justify-self: stretch;
}

.impostor-player-name {
    text-align: center;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01rem;
}

.impostor-player-badge {
    position: absolute;
    top: 0.35rem;
    right: 0.45rem;
    font-size: var(--font-size-lg);
}

.impostor-player-card.is-correct .impostor-player-badge {
    color: var(--color-success);
}

.impostor-player-card.is-impostor .impostor-player-badge {
    color: var(--color-error);
}

.impostor-category {
    position: absolute;
    z-index: 5;
    width: min(18.5rem, calc(100% - 3.6rem));
    text-align: center;
    border: 0.0625rem solid rgba(255, 255, 255, 0.45);
    border-radius: var(--border-radius-md);
    background: linear-gradient(160deg, rgba(0, 71, 171, 0.95) 0%, rgba(18, 56, 255, 0.95) 100%);
    padding: var(--spacing-md) var(--spacing-lg);
    box-shadow: 0 0.7rem 1.8rem rgba(0, 71, 171, 0.45);
    pointer-events: none;
}

.impostor-category-label {
    display: block;
    color: var(--color-secondary);
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    letter-spacing: 0.08rem;
    margin-bottom: var(--spacing-xs);
    opacity: 0.85;
}

.impostor-category-value {
    color: var(--color-secondary);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.3;
}

.impostor-category-subtext {
    margin-top: 0.4rem;
    color: var(--color-secondary);
    font-size: var(--font-size-base);
    opacity: 0.95;
}

.impostor-category.is-win {
    border-color: rgba(0, 212, 170, 0.9);
    background: linear-gradient(165deg, rgba(0, 212, 170, 0.45) 0%, rgba(18, 56, 255, 0.94) 100%);
}

.impostor-category.is-lose {
    border-color: rgba(255, 43, 88, 0.92);
    background: linear-gradient(165deg, rgba(220, 20, 60, 0.62) 0%, rgba(18, 56, 255, 0.94) 100%);
}

.impostor-day-note {
    color: var(--color-secondary);
    text-align: center;
    font-size: var(--font-size-lg);
    font-weight: 600;
    letter-spacing: 0.01rem;
}

.impostor-day-note.is-hidden {
    display: none;
}

.impostor-ring .ring-slot-1 { transform: translate(-50%, -50%) translate(0, -18rem); }
.impostor-ring .ring-slot-2 { transform: translate(-50%, -50%) translate(12.7rem, -12.7rem); }
.impostor-ring .ring-slot-3 { transform: translate(-50%, -50%) translate(18rem, 0); }
.impostor-ring .ring-slot-4 { transform: translate(-50%, -50%) translate(12.7rem, 12.7rem); }
.impostor-ring .ring-slot-5 { transform: translate(-50%, -50%) translate(0, 18rem); }
.impostor-ring .ring-slot-6 { transform: translate(-50%, -50%) translate(-12.7rem, 12.7rem); }
.impostor-ring .ring-slot-7 { transform: translate(-50%, -50%) translate(-18rem, 0); }
.impostor-ring .ring-slot-8 { transform: translate(-50%, -50%) translate(-12.7rem, -12.7rem); }

.impostor-player-card,
.impostor-player-name,
.impostor-player-badge,
.impostor-category,
.impostor-category-label,
.impostor-category-value,
.impostor-headline,
.impostor-actions {
    color: var(--color-secondary);
}

/* Impostor Intro Overlay */
.impostor-intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: var(--spacing-lg);
    background: rgba(5, 13, 24, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Prevent scroll chaining to the page behind the overlay on mobile */
    overscroll-behavior: contain;
}

.impostor-intro-overlay.is-hidden {
    display: none;
}

.impostor-intro-card {
    width: min(58rem, 100%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    background: linear-gradient(145deg, #1238ff 0%, #0b28d2 50%, #1033ee 100%);
    border: 0.0625rem solid rgba(255, 255, 255, 0.28);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 1.5rem 3.5rem rgba(0, 71, 171, 0.55), 0 0 0 0.0625rem rgba(255, 255, 255, 0.06);
    padding: var(--spacing-xl);
    color: var(--color-secondary);
    /* Make the card scrollable when it exceeds viewport height and allow
       smooth touch scrolling on iOS. This prevents the page behind from
       scrolling while letting users reach the full image and the start button. */
    max-height: calc(100vh - calc(var(--spacing-lg) * 2));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.impostor-intro-media {
    display: grid;
    place-items: center;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.473);
    border: 0.0625rem solid rgba(255, 255, 255, 0.16);
    min-height: 16rem;
}

.impostor-intro-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.xideldia-intro-preview {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.conx-intro-preview-compact {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: scale(0.96);
}

.impostor-intro-body {
    display: grid;
    gap: var(--spacing-md);
    align-content: start;
}

.impostor-intro-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04rem;
    line-height: 1.2;
    font-style: normal;
    font-family: 'Montecatini Pro Stretto Ultra', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.impostor-intro-highlight {
    color: #ff2b58;
    font-style: italic;
}

.impostor-intro-desc {
    font-size: var(--font-size-base);
    opacity: 0.95;
    line-height: 1.6;
    margin: 0;
}

.impostor-intro-rules {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.35rem;
}

.impostor-intro-rules li {
    font-size: var(--font-size-sm);
    padding-left: 1.1rem;
    position: relative;
    line-height: 1.5;
    opacity: 0.95;
}

.impostor-intro-rules li::before {
    content: '–';
    position: absolute;
    left: 0;
    opacity: 0.8;
}

.impostor-intro-mode-label {
    font-weight: 700;
    font-size: var(--font-size-sm);
    margin: 0;
    opacity: 0.9;
}

.impostor-intro-modes {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.impostor-intro-start {
    width: min(16rem, 100%);
    margin: var(--spacing-xs) 0 0;
    border-radius: 999rem;
    background: linear-gradient(90deg, #c8102e 0%, #ff2148 100%);
    color: var(--color-secondary);
    border: 0.0625rem solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0.6rem 1.4rem rgba(200, 16, 46, 0.35);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.impostor-intro-start:hover {
    background: linear-gradient(90deg, #e01535 0%, #ff3a5e 100%);
    transform: translateY(-0.125rem);
    box-shadow: 0 0.7rem 1.8rem rgba(200, 16, 46, 0.5);
    color: var(--color-secondary);
}

@media (max-width: 48rem) {
    .impostor-intro-card {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .impostor-intro-media {
        max-height: 13rem;
        min-height: 10rem;
    }
}

/* Video del dia */
.video-page {
    display: grid;
    justify-items: center;
}

.video-panel {
    width: min(58rem, 100%);
    display: grid;
    gap: var(--spacing-lg);
    border: 0.0625rem solid rgba(255, 255, 255, 0.24);
    background: linear-gradient(165deg, rgba(0, 25, 255, 0.88) 0%, rgba(7, 29, 145, 0.92) 100%);
}

.video-headline {
    text-align: center;
    display: grid;
    gap: var(--spacing-sm);
}

.video-title-highlight {
    color: #ff2b58;
}

.video-headline .panel-title,
.video-headline .panel-copy {
    color: var(--color-secondary);
    margin-bottom: 0;
}

.video-stage {
    display: grid;
    gap: var(--spacing-sm);
}

.video-frame-wrap {
    border: 0.18rem solid var(--color-accent);
    border-radius: var(--border-radius-md);
    padding: 0.3rem;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0.9rem 2rem rgba(0, 0, 0, 0.28);
}

.video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: calc(var(--border-radius-md) - 0.25rem);
    overflow: hidden;
    border: 0.125rem solid rgba(255, 255, 255, 0.55);
    background:
        linear-gradient(175deg, rgba(8, 18, 44, 0.45) 0%, rgba(8, 18, 44, 0.1) 40%, rgba(10, 130, 55, 0.28) 100%),
        radial-gradient(circle at 70% 80%, rgba(0, 212, 170, 0.42) 0%, rgba(0, 71, 171, 0.26) 40%, rgba(10, 19, 40, 0.9) 100%);
}

.video-player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}

.video-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.06) 0,
        rgba(255, 255, 255, 0.06) 0.08rem,
        transparent 0.08rem,
        transparent 0.22rem
    );
    opacity: 0.24;
    pointer-events: none;
}

.video-replay {
    position: absolute;
    left: 50%;
    bottom: 0.85rem;
    transform: translateX(-50%);
    width: 4.2rem;
    height: 3.2rem;
    border: 0.125rem solid rgba(255, 255, 255, 0.75);
    border-radius: 0.8rem;
    background: linear-gradient(165deg, #c8102e 0%, #f1153f 100%);
    color: var(--color-secondary);
    font-size: var(--font-size-xl);
    cursor: pointer;
    box-shadow: 0 0.6rem 1.2rem rgba(200, 16, 46, 0.35);
    transition: var(--transition);
    z-index: 2;
}

.video-replay:hover {
    transform: translateX(-50%) translateY(-0.08rem);
    box-shadow: 0 0.85rem 1.5rem rgba(200, 16, 46, 0.45);
}

.video-replay.is-active {
    animation: pulseReplay 0.34s ease;
}

.video-caption {
    text-align: center;
    color: rgba(255, 255, 255, 0.94);
    font-weight: 600;
}

.video-answers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md);
    transition: opacity 0.25s ease;
}

.video-answers.is-hidden {
    display: none;
}

.video-answer {
    border: 0.0625rem solid rgba(255, 255, 255, 0.35);
    border-radius: var(--border-radius-sm);
    background: linear-gradient(165deg, #c8102e 0%, #f1153f 100%);
    color: var(--color-secondary);
    padding: 0.9rem 0.8rem;
    font-size: var(--font-size-base);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01rem;
    cursor: pointer;
    transition: var(--transition);
    min-height: 4rem;
}

.video-answer:hover {
    transform: translateY(-0.1rem);
    box-shadow: 0 0.65rem 1.4rem rgba(200, 16, 46, 0.32);
}

.video-answer.is-selected {
    border-color: rgba(255, 255, 255, 0.95);
    background: linear-gradient(165deg, #002dc5 0%, #0051ff 100%);
    box-shadow: 0 0.5rem 1.4rem rgba(0, 71, 171, 0.45);
}

.video-answer.is-correct {
    border-color: rgba(255, 255, 255, 0.95);
    background: linear-gradient(165deg, #00a484 0%, #00d4aa 100%);
}

.video-answer.is-wrong {
    border-color: rgba(255, 255, 255, 0.55);
    filter: grayscale(0.1);
    opacity: 0.84;
}

.video-panel .trajectory-feedback,
.video-panel .trajectory-feedback.is-info,
.video-panel .trajectory-feedback.is-success,
.video-panel .trajectory-feedback.is-error {
    text-align: center;
    color: var(--color-secondary);
    font-weight: 600;
    min-height: 1.7rem;
}

@keyframes pulseReplay {
    0% {
        transform: translateX(-50%) scale(1);
    }
    50% {
        transform: translateX(-50%) scale(0.94);
    }
    100% {
        transform: translateX(-50%) scale(1);
    }
}

@media (max-width: 900px) {
    .impostor-board {
        min-height: auto;
    }

    .impostor-grid {
        width: 100%;
        height: auto;
        max-height: none;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-md);
    }

    .impostor-player-card {
        position: static;
        width: 100%;
        transform: none !important;
    }

    .impostor-category {
        position: static;
        margin: 0 auto var(--spacing-md);
        width: 100%;
        pointer-events: auto;
    }

    .impostor-board {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: auto;
    }
}

@media (max-width: 640px) {
    .impostor-mode-selector {
        width: 100%;
    }

    .impostor-mode-btn {
        flex: 1 1 calc(50% - var(--spacing-sm));
        text-align: center;
    }

    .impostor-grid {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .impostor-category-value {
        font-size: var(--font-size-2xl);
    }

    .impostor-day-note {
        font-size: var(--font-size-base);
    }

    .impostor-review {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .video-panel {
        padding: var(--spacing-lg);
    }

    .video-answers {
        grid-template-columns: 1fr;
    }

    .video-answer {
        font-size: var(--font-size-sm);
        min-height: 3.4rem;
    }

    .video-replay {
        width: 3.6rem;
        height: 2.9rem;
        font-size: var(--font-size-lg);
    }
}

.video-answer:disabled {
    cursor: default;
}

/* Cumpleanos Tricolor */
.cumple-body {
    color: #ffffff;
}

.cumple-body .header {
    padding: 0.55rem 0.95rem;
}

.cumple-body .logo {
    font-size: 2rem;
}

.cumple-body .escudo {
    height: 2.25rem;
}

.cumple-page {
    display: grid;
    justify-items: center;
    padding-top: 1.6rem;
}

.cumple-shell {
    width: min(47rem, 100%);
    display: grid;
    justify-items: center;
    gap: 1.2rem;
}

.cumple-title {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-family: 'Montecatini Pro Largo Bold', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03rem;
    color: #ffffff;
    margin: 0;
    text-align: center;
}

.cumple-title .impostor-intro-highlight {
    font-style: normal;
}

.cumple-target {
    display: grid;
    justify-items: center;
    gap: 0.8rem;
}

.cumple-silhouette-box {
    width: 6.8rem;
    aspect-ratio: 1;
    border-radius: 0.55rem;
    border: 0.125rem solid #d71730;
    background: linear-gradient(155deg, rgba(4, 49, 130, 0.8) 0%, rgba(3, 27, 81, 0.86) 100%);
    display: grid;
    place-items: center;
    position: relative;
    color: #d71730;
    font-size: 2.8rem;
    box-shadow: 0 0 1.2rem rgba(215, 23, 48, 0.2);
}

.cumple-silhouette-box.is-revealed {
    border-color: #d71730;
    box-shadow: 0 0 1.4rem rgba(215, 23, 48, 0.22);
}

.cumple-silhouette-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 0.5rem;
}

.cumple-question {
    position: absolute;
    bottom: 0.2rem;
    right: 0.5rem;
    font-size: 2.3rem;
    font-weight: 900;
    color: #d71730;
}

.cumple-helper-text {
    text-align: center;
    font-size: 1.35rem;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    line-height: 1.2;
}

.cumple-cards {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.95rem;
}

.cumple-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-width: 0;
}

.cumple-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    isolation: isolate;
}

.cumple-card-face {
    position: absolute;
    inset: 0;
    border-radius: 0.5rem;
    border: 0.17rem solid #0bbfff;
    overflow: hidden;
    transition: opacity 0.28s ease, transform 0.28s ease;
    will-change: opacity, transform;
}

.cumple-card-front {
    z-index: 2;
    opacity: 1;
    transform: scale(1);
    background: linear-gradient(165deg, rgba(5, 64, 165, 0.86) 0%, rgba(7, 37, 108, 0.92) 100%);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 3rem;
    font-weight: 900;
    text-shadow: 0 0.3rem 0.9rem rgba(3, 24, 77, 0.52);
}

.cumple-card-back {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    transform: scale(0.98);
    background: linear-gradient(180deg, rgba(7, 43, 118, 0.65) 0%, rgba(6, 34, 97, 0.82) 100%);
}

.cumple-card.is-revealed .cumple-card-front {
    opacity: 0;
    transform: scale(0.98);
    pointer-events: none;
}

.cumple-card.is-revealed .cumple-card-back {
    opacity: 1;
    transform: scale(1);
}

.cumple-card-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
}

.cumple-card-lastname {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: block;
    padding: 0.55rem 0.25rem 0.45rem;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 800;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    text-transform: uppercase;
    color: #ffffff;
    background: linear-gradient(180deg, rgba(4, 70, 171, 0) 0%, rgba(4, 70, 171, 0.18) 32%, rgba(4, 70, 171, 0.54) 62%, rgba(4, 70, 171, 0.9) 100%);
    text-shadow: 0 0.16rem 0 rgba(0, 51, 133, 0.9), 0 0.28rem 0.65rem rgba(0, 38, 97, 0.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cumple-guess-form {
    width: min(20rem, 100%);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem;
    align-items: center;
}

.cumple-guess-input {
    width: 100%;
    border-radius: 0.6rem;
    border: 0.125rem solid rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.78);
    color: #063f9f;
    padding: 0.48rem 0.7rem;
    font-size: 1.35rem;
    outline: none;
}

.cumple-guess-input:focus {
    border-color: #d71730;
    box-shadow: 0 0 0 0.2rem rgba(215, 23, 48, 0.2);
}

.cumple-skip-btn {
    border: 0;
    border-radius: 0.75rem;
    background: linear-gradient(160deg, #d71730 0%, #a90822 100%);
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 800;
    padding: 0.35rem 0.85rem;
    cursor: pointer;
    transition: var(--transition);
}

.cumple-skip-btn:hover:not(:disabled) {
    transform: translateY(-0.1rem);
    filter: brightness(1.05);
}

.cumple-skip-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.cumple-message {
    min-height: 1.4rem;
    font-size: 0.95rem;
    text-align: center;
}

.cumple-message.is-info {
    color: #c8e9ff;
}

.cumple-message.is-success {
    color: #75ffc8;
}

.cumple-message.is-error {
    color: #ff9fb0;
}

.cumple-restart-btn {
    border: 0.0625rem solid rgba(255, 255, 255, 0.42);
    border-radius: 999rem;
    background: linear-gradient(95deg, #0f66de 0%, #0a3f9c 100%);
    color: #ffffff;
    font-weight: 800;
    padding: 0.55rem 1.2rem;
    cursor: pointer;
}

.cumple-restart-btn:hover {
    transform: translateY(-0.1rem);
}

@media (max-width: 900px) {
    .cumple-helper-text {
        font-size: 1.15rem;
    }

    .cumple-cards {
        gap: 0.55rem;
    }

    .cumple-card-front {
        font-size: 2.45rem;
    }

    .cumple-card-lastname {
        font-size: 0.98rem;
    }
}

@media (max-width: 640px) {
    .cumple-page {
        padding-top: 1.05rem;
    }

    .cumple-body .logo {
        font-size: 1.6rem;
    }

    .cumple-body .escudo {
        height: 2rem;
    }

    .cumple-helper-text {
        font-size: 0.98rem;
        max-width: 18rem;
    }

    .cumple-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cumple-guess-form {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .cumple-skip-btn {
        width: 100%;
    }
}

/* Grid Tricolor */
.grid-page {
    display: grid;
    justify-items: center;
    padding-top: 1.2rem;
}

.grid-panel {
    width: min(44rem, 100%);
    display: grid;
    gap: 0.8rem;
    border: 0.0625rem solid rgba(122, 188, 255, 0.35);
    background: radial-gradient(circle at 18% 0%, rgba(0, 57, 141, 0.5) 0%, rgba(1, 16, 41, 0.96) 58%),
        linear-gradient(160deg, rgba(0, 18, 49, 0.98) 0%, rgba(0, 8, 26, 0.98) 100%);
}

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

.grid-header .panel-title {
    margin-bottom: 0.15rem;
}

.grid-header .panel-copy {
    margin: 0;
    max-width: none;
    color: #cce6ff;
    font-size: 0.92rem;
}

.grid-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    aspect-ratio: 4 / 4;
}

.grid-brand-cell,
.grid-category-cell,
.grid-play-cell {
    aspect-ratio: 1 / 1;
    min-height: 7.8rem;
    border: 0.12rem solid #076ac8;
    border-radius: 0;
    background: #00122f;
}

.grid-brand-cell {
    display: grid;
    place-items: center;
    background: #00122f;
}

.grid-brand-cell-hard {
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: center;
    gap: 0.68rem;
    padding: 0.35rem 0.28rem;
}

.grid-brand-shield {
    width: min(70%, 5.8rem);
    height: min(70%, 5.8rem);
    object-fit: contain;
    filter: drop-shadow(0 0 0.55rem rgba(6, 106, 200, 0.35));
}

.grid-brand-shield-hard {
    width: min(74%, 4.9rem);
    height: min(74%, 4.9rem);
}

.grid-hard-timer-chip {
    min-width: 4rem;
    height: 2.55rem;
    padding: 0 0.92rem;
    border-radius: 0.5rem;
    border: 0.12rem solid rgba(255, 255, 255, 0.78);
    background: #d71730;
    color: #ffffff;
    font-weight: 900;
    font-size: 1.6rem;
    line-height: 1;
    display: grid;
    place-items: center;
}

.grid-category-cell {
    --grid-name-band-color: #003791;
    --grid-name-text-color: #ffffff;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: center;
    justify-items: center;
    gap: 0.32rem;
    padding-top: 0.44rem;
    padding-bottom: 0.44rem;
    background: linear-gradient(180deg, #001637 0%, #001637 74%, var(--grid-name-band-color) 74%, var(--grid-name-band-color) 100%);
}

.grid-category-cell.is-blue {
    --grid-name-band-color: #003791;
    --grid-name-text-color: #ffffff;
}

.grid-category-cell.is-white {
    --grid-name-band-color: #ffffff;
    --grid-name-text-color: #d71730;
}

.grid-category-cell.is-white.is-column {
    --grid-name-text-color: #003791;
}

.grid-category-cell.is-white.is-row {
    --grid-name-text-color: #d71730;
}

.grid-category-cell.is-red {
    --grid-name-band-color: #d71730;
    --grid-name-text-color: #ffffff;
}

.grid-category-badge {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 999rem;
    border: 0.13rem solid rgba(255, 255, 255, 0.82);
    background: radial-gradient(circle at 34% 20%, #0c59cf 0%, #003796 100%);
    color: #ffffff;
    font-weight: 900;
    font-size: 1rem;
    display: grid;
    place-items: center;
    letter-spacing: 0.03rem;
    text-transform: uppercase;
}

.grid-category-shield,
.grid-category-flag {
    width: 5rem;
    height: 5rem;
    object-fit: contain;
    filter: drop-shadow(0 0 0.35rem rgba(0, 15, 45, 0.5));
}

.grid-category-label {
    min-height: 1.4rem;
    color: var(--grid-name-text-color);
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: clamp(0.74rem, 1.65vw, 0.86rem);
    line-height: 1.1;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    padding: 0 0.25rem;
    text-shadow: none;
}

.grid-play-cell {
    position: relative;
    overflow: hidden;
    border-color: #076ac8;
    background: #00122f;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.grid-play-cell:hover {
    border-color: #2cc6f4;
    box-shadow: inset 0 0 0 0.08rem rgba(44, 198, 244, 0.48);
}

.grid-play-cell.is-selected {
    border-color: #d71730;
    box-shadow: inset 0 0 0 0.11rem rgba(215, 23, 48, 0.48), 0 0 0.8rem rgba(215, 23, 48, 0.2);
}

.grid-play-cell.is-choice-target {
    cursor: pointer;
    border-color: #9ba9cf;
    box-shadow: inset 0 0 0 0.08rem rgba(215, 225, 255, 0.35);
}

.grid-play-cell.is-choice-target:hover {
    border-color: #d7e1ff;
    box-shadow: inset 0 0 0 0.11rem rgba(215, 225, 255, 0.62), 0 0 0.8rem rgba(170, 186, 240, 0.22);
}

.grid-choice-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(140, 150, 186, 0.34);
    color: #f2f5ff;
    font-weight: 800;
    letter-spacing: 0.02rem;
    text-transform: uppercase;
    font-size: 0.72rem;
}

.grid-play-cell.is-solved {
    position: relative;
    overflow: hidden;
    padding: 0;
    border-color: #2cc6f4;
    background: #00122f;
}

.grid-cell-photo-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.grid-cell-photo,
.grid-cell-photo-fallback {
    width: 100%;
    flex-grow: 1;
    display: block;
    object-fit: cover;
}

.grid-cell-photo {
    object-fit: cover;
    object-position: top center;
}

.grid-cell-photo-fallback {
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.5rem;
    background: radial-gradient(circle at 30% 20%, rgba(19, 102, 220, 0.6), rgba(0, 18, 47, 1));
}

.grid-cell-player {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    --grid-player-shadow-rgb: 0, 0, 0;
    font-size: 0.75rem;
    font-weight: 900;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.15;
    padding: 0.35rem 0.25rem;
    background: linear-gradient(180deg, rgba(var(--grid-player-shadow-rgb), 0), rgba(var(--grid-player-shadow-rgb), 0.95));
    text-shadow: 0 0.0625rem 0.15rem rgba(0, 0, 0, 0.9);
    max-height: 35%;
    overflow: hidden;
}

.grid-play-cell.is-solved.is-guessed .grid-cell-player {
    --grid-player-shadow-rgb: 0, 55, 145;
}

.grid-play-cell.is-solved.is-revealed .grid-cell-player {
    --grid-player-shadow-rgb: 215, 23, 48;
}

.grid-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
    width: 100%;
}

.grid-action-btn {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.2rem;
    font-size: 1rem;
    min-height: 2.8rem;
}

.grid-action-label {
    display: inline;
}

.grid-search-wrap {
    position: relative;
    width: min(24rem, 100%);
    margin: 0 auto;
}

.grid-search-wrap.is-hidden {
    display: none;
}

.grid-reveal-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
    width: 100%;
}

.grid-reveal-wrap.is-hidden {
    display: none;
}

.grid-reveal-btn {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.4rem;
    font-size: 1.05rem;
    min-height: 3rem;
    background: #d71730;
    border: 0.13rem solid #ff4a5a;
}

.grid-reveal-btn:hover {
    background: #ff3a4a;
    border-color: #ffffff;
}

.grid-search-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.36rem;
}

.grid-player-input {
    font-size: 1.92rem;
    line-height: 1;
    border-radius: 0.72rem;
    border: 0.13rem solid rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.9);
    color: #082d73;
    padding: 0.6rem 0.75rem;
    min-height: 3.5rem;
}

.grid-player-input::placeholder {
    color: #6f7485;
}

.grid-submit-btn {
    min-width: 3.2rem;
    border-radius: 0.78rem;
    border: 0.13rem solid #d71730;
    background: #00122f;
    color: #ffffff;
    font-size: 1.45rem;
    cursor: pointer;
    transition: var(--transition);
}

.grid-submit-btn:hover {
    border-color: #2cc6f4;
    transform: translateY(-0.05rem);
}

.grid-choice {
    border: 0.0625rem solid rgba(44, 198, 244, 0.45);
    border-radius: 0.62rem;
    background: rgba(4, 34, 87, 0.45);
    padding: 0.55rem;
    display: grid;
    gap: 0.45rem;
}

.grid-choice.is-hidden {
    display: none;
}

.grid-choice-text {
    margin: 0;
    color: #ffffff;
    font-size: 0.86rem;
    text-align: center;
}

.grid-choice-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
}

.grid-choice-btn {
    border: 0.0625rem solid rgba(255, 255, 255, 0.6);
    border-radius: 0.55rem;
    background: linear-gradient(160deg, #0b4bb5 0%, #073482 100%);
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0.4rem 0.45rem;
    cursor: pointer;
    transition: var(--transition);
}

.grid-choice-btn:hover {
    border-color: #d71730;
    background: linear-gradient(160deg, #c3122b 0%, #8a0920 100%);
}

.grid-suggestions {
    position: relative;
    margin-top: 0.3rem;
    background: var(--color-accent);
    border: 2px solid var(--color-accent);
    border-radius: 0.8rem;
    box-shadow: 0 0.8rem 1.5rem rgba(0, 0, 0, 0.3);
    max-height: min(15rem, 40vh);
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: grid;
    padding: 0.4rem 0;
}

.grid-suggestions::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.grid-suggestion-item {
    border: none;
    background: transparent;
    display: block;
    width: calc(100% - 0.8rem);
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    margin: 0 0.4rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-suggestion-item:hover {
    background: rgba(255, 255, 255, 0.2);
}

.grid-suggestion-item.is-highlighted {
    background: rgba(0, 0, 0, 0.25);
    font-weight: 600;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.grid-suggestion-item:active {
    background: rgba(0, 0, 0, 0.35);
}

@media (max-width: 768px) {
    .grid-panel {
        width: min(25rem, 100%);
    }

    .grid-brand-title {
        font-size: 1rem;
    }

    .grid-brand-subtitle {
        font-size: 1.35rem;
    }

    .grid-category-badge {
        width: 2.3rem;
        height: 2.3rem;
        font-size: 0.65rem;
    }

    .grid-category-shield,
    .grid-category-flag {
        width: 2.3rem;
        height: 2.3rem;
    }

    /* Celda de categoría: más alta para que quepa el label en la franja */
    .grid-brand-cell,
    .grid-category-cell,
    .grid-play-cell {
        min-height: 4.4rem;
    }

    .grid-category-cell {
        /* La franja de color ocupa el 30% inferior para dar más espacio al label */
        background: linear-gradient(180deg, #001637 0%, #001637 70%, var(--grid-name-band-color) 70%, var(--grid-name-band-color) 100%);
        gap: 0.2rem;
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
    }

    /* El label escala con el ancho real de la celda (~22vw en mobile) */
    .grid-category-label {
        font-size: clamp(0.48rem, 2.2vw, 0.65rem);
        line-height: 1.05;
        padding: 0 0.15rem;
        min-height: 0;
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .grid-cell-player {
        font-size: 0.52rem;
        padding: 0.16rem 0.1rem;
    }

    .grid-player-input {
        font-size: 1.2rem;
        min-height: 2.9rem;
    }

    .grid-submit-btn {
        min-width: 2.8rem;
        font-size: 1.2rem;
    }

    .grid-search-wrap {
        width: 100%;
    }

    .grid-hard-timer-chip {
        min-width: 3.25rem;
        height: 2.15rem;
        font-size: 1.3rem;
        border-radius: 0.4rem;
        padding: 0 0.65rem;
    }

    .grid-brand-shield-hard {
        width: min(84%, 3.2rem);
        height: min(84%, 3.2rem);
    }

    .grid-brand-shield-hard {
        width: min(42%, 2.4rem);
        height: min(42%, 2.4rem);
    }

    .grid-choice-actions {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   RESPONSIVE FIXES v2 - Mobile & Desktop Improvements
   ============================================================ */

/* ----------------------------------------------------------
   1. WORDLE - Teclado: escala fluida para pantallas angostas
   ---------------------------------------------------------- */
@media (max-width: 420px) {
    .wordle-panel {
        width: 100%;
        padding: 0 0.25rem;
    }

    .wordle-keyboard {
        padding: 0.4rem 0.25rem;
        gap: 0.3rem;
    }

    .wordle-keyboard-row {
        gap: 0.22rem;
    }

    .wordle-key {
        min-width: clamp(1.1rem, 8.5vw, 1.8rem);
        height: clamp(2rem, 10vw, 2.5rem);
        padding: 0 0.1rem;
        font-size: clamp(0.6rem, 2.8vw, 0.8rem);
        border-radius: 0.35rem;
    }

    .wordle-key.wide {
        min-width: clamp(1.8rem, 13vw, 2.8rem);
        font-size: clamp(0.5rem, 2.2vw, 0.72rem);
    }

    .wordle-tile {
        width: clamp(1.8rem, 12vw, 2.5rem);
        height: clamp(1.8rem, 12vw, 2.5rem);
        font-size: clamp(0.9rem, 5vw, 1.15rem);
    }
}


/* ----------------------------------------------------------
   3. GOLES & PRESENCIAS
      - Foto centrada horizontalmente, anclada arriba
      - Botones con white-space: nowrap y box-sizing correcto
      - Desktop: sin scroll | Mobile: scroll permitido
   ---------------------------------------------------------- */

/* Foto: centrada en X, pegada arriba en Y */
.pres-player-image {
    object-position: center top !important;
}

/* Contenido: anclado en la parte inferior del panel
   así el texto + botones se ven sin solaparse con la cara */
.pres-player-content {
    top: auto !important;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none !important;
    padding: 0 1.4rem 1.6rem;
}

/* Stack: alineado al centro pero el texto queda abajo */
.pres-player-stack {
    width: min(100%, 42rem);
    margin: 0 auto;
}

/* Botones: nunca desbordan */
.pres-guess-btn {
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Acciones: ancho contenido por el stack */
.pres-actions {
    width: 100%;
    align-items: center;
}

/* DESKTOP (>980px): sin scroll, todo contenido */
@media (min-width: 981px) {
    .presencias-body {
        overflow: hidden;
    }

    .presencias-page {
        height: calc(100dvh - var(--pres-header-height));
        overflow: hidden;
    }

    .presencias-panel {
        height: 100%;
        overflow: hidden;
    }

    .pres-duel {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: 1fr;
        height: 100%;
        overflow: hidden;
    }

    .pres-player-content {
        padding: 0 1.4rem 1.4rem;
    }

    .pres-actions {
        margin-top: 0.6rem;
        gap: 0.5rem;
    }

    /* Botón: relativo al espacio disponible, sin desbordar */
    .pres-guess-btn {
        width: min(12rem, 90%);
        font-size: clamp(0.75rem, 1vw, 1rem);
        padding: 0.5rem 0.75rem;
        min-width: 0;
    }

    .pres-player-name {
        font-size: clamp(1.1rem, 2vw, 2.6rem);
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .pres-value {
        font-size: clamp(1.6rem, 2.5vw, 3rem);
        line-height: 1;
    }
}

/* MOBILE (≤980px): scroll vertical habilitado */
@media (max-width: 980px) {
    .presencias-body {
        overflow-y: auto;
    }

    .presencias-page {
        height: auto;
        min-height: calc(100dvh - var(--pres-header-height));
        overflow: visible;
    }

    .presencias-panel {
        height: auto;
    }

    .pres-duel {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, minmax(30dvh, 50dvh));
        height: auto;
        min-height: calc(100dvh - var(--pres-header-height));
        overflow: visible;
    }

    .pres-player {
        min-height: 30dvh;
    }

    .pres-player-content {
        padding: 0 1rem 1.2rem;
    }

    .pres-guess-btn {
        width: min(15rem, 82vw);
        font-size: 0.9rem;
    }
}

/* Pantallas muy pequeñas */
@media (max-width: 400px) {
    .pres-guess-btn {
        font-size: 0.8rem;
        padding: 0.44rem 0.6rem;
        width: min(13rem, 80vw);
    }

    .pres-actions {
        gap: 0.32rem;
    }
}

/* ----------------------------------------------------------
   2. IMPOSTOR - Anillo en mobile con unidades vw
      Pisa los @900px y @640px del CSS original que
      rompen el layout absoluto poniendo cards en static
   ---------------------------------------------------------- */

/*
   En mobile el grid mide 90vw × 90vw.
   Radio del anillo = 36vw (deja ~9vw de margen para las cards de ~18vw).
   Los diagonales = 36vw × sin(45°) ≈ 36vw × 0.707 ≈ 25.5vw
*/
@media (max-width: 900px) {
    /* Revertir el grid-template que el original aplica */
    .impostor-grid {
        display: block !important; /* anular el grid:2col del original */
        width: 90vw;
        height: 90vw;
        max-height: 90vw;
        position: relative; /* necesario para los absolute de las cards */
    }

    /* Board: cuadrado, centrado */
    .impostor-board {
        display: grid !important;
        place-items: center !important;
        min-height: 90vw;
        flex-direction: unset;
    }

    /* Cards: vuelven a ser absolutas */
    .impostor-player-card {
        position: absolute !important;
        width: clamp(4.8rem, 20vw, 8rem) !important;
        min-height: clamp(4.2rem, 18vw, 7rem) !important;
        transform: translate(-50%, -50%) !important; /* base, sobreescrita por ring-slot */
    }

    /* Categoría: absoluta y centrada */
    .impostor-category {
        position: absolute !important;
        width: clamp(7rem, 26vw, 11rem) !important;
        margin: 0 !important;
        padding: 0.45rem 0.6rem !important;
        pointer-events: none;
    }

    .impostor-category-label {
        font-size: 0.55rem;
        letter-spacing: 0.05rem;
    }

    .impostor-category-value {
        font-size: clamp(0.72rem, 2.8vw, 1.05rem);
        line-height: 1.2;
    }

    .impostor-category-subtext {
        font-size: clamp(0.55rem, 2vw, 0.75rem);
        margin-top: 0.15rem;
    }

    .impostor-player-avatar {
        width: clamp(2rem, 8vw, 3.2rem);
    }

    .impostor-player-name {
        font-size: clamp(0.58rem, 2.6vw, 0.82rem);
    }

    /* Slots del anillo en vw */
    .impostor-ring .ring-slot-1 { transform: translate(-50%, -50%) translate(0,      -36vw) !important; }
    .impostor-ring .ring-slot-2 { transform: translate(-50%, -50%) translate(25.5vw, -25.5vw) !important; }
    .impostor-ring .ring-slot-3 { transform: translate(-50%, -50%) translate(36vw,    0)     !important; }
    .impostor-ring .ring-slot-4 { transform: translate(-50%, -50%) translate(25.5vw,  25.5vw) !important; }
    .impostor-ring .ring-slot-5 { transform: translate(-50%, -50%) translate(0,       36vw)  !important; }
    .impostor-ring .ring-slot-6 { transform: translate(-50%, -50%) translate(-25.5vw, 25.5vw) !important; }
    .impostor-ring .ring-slot-7 { transform: translate(-50%, -50%) translate(-36vw,   0)     !important; }
    .impostor-ring .ring-slot-8 { transform: translate(-50%, -50%) translate(-25.5vw,-25.5vw) !important; }
}

/* Anular también el @640px que ponía 1 columna */
@media (max-width: 640px) {
    .impostor-grid {
        display: block !important;
        grid-template-columns: unset !important;
    }
}

/* ----------------------------------------------------------
   Trayectoria - Intro épocas & badge
   ---------------------------------------------------------- */

/* Descripción de época debajo de los botones */
.trajectory-era-desc {
    font-size: var(--font-size-sm);
    opacity: 0.85;
    margin: 0;
    font-style: italic;
    line-height: 1.4;
    color: var(--color-secondary);
    min-height: 1.4rem;
    transition: opacity 0.2s ease;
}

/* Badge que aparece en el header del juego indicando la época activa */
.trajectory-era-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.7rem;
    border-radius: 999rem;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-secondary);
}

/* Todas las épocas usan el mismo color neutro */
.trajectory-era-badge.era-recent,
.trajectory-era-badge.era-modern,
.trajectory-era-badge.era-classic {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
}

/* El top del juego muestra título + badge en la misma línea */
.trajectory-top {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* ============================================================
   How to Play Section — sección informativa debajo del juego
   ============================================================ */

.how-to-play-section {
    width: 100%;
    background: #0a1f44;
    padding: 3rem 1.5rem;
    margin-top: 0;
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.1);
}

.how-to-play-inner {
    max-width: 52rem;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

.how-to-play-title {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.how-to-play-highlight {
    color: #c8102e;
}

.how-to-play-body {
    font-size: clamp(0.95rem, 1.8vw, 1.05rem);
    color: rgba(255, 255, 255, 0.96);
    line-height: 1.7;
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.how-to-play-body strong {
    color: #ffffff;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 0.12rem;
}

/* Lista de pistas con mini-tiles */
.how-to-play-clues {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.65rem;
}

.how-to-play-clues li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: clamp(0.9rem, 1.7vw, 1rem);
    color: rgba(255, 255, 255, 0.96);
    line-height: 1.5;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.how-to-play-clues li strong {
    color: #ffffff;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 0.12rem;
}

/* Mini tile — replica el estilo del wordle, con sombra blanca para destacar */
.how-to-play-tile {
    display: inline-grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.35rem;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #ffffff;
    flex-shrink: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-shadow: 0 0 0 0.15rem rgba(255, 255, 255, 0.55),
                0 0.25rem 0.6rem rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
    .how-to-play-section {
        padding: 2rem 1rem;
    }

    .how-to-play-clues li {
        align-items: flex-start;
    }
}

/* ── Toast ──────────────────────────────────────────────────────────── */
#wordle-toast-container {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
    width: max-content;
    max-width: min(90vw, 360px);
    margin: 0;
}

.wordle-toast {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    padding: 0.65rem 1.1rem;
    border-radius: 10px;
    font-family: sans-serif;
    color: #ffffff;
    background: #1a3a6e;
    animation: wordle-toast-in 0.25s ease forwards;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.35);
}

.wordle-toast--error { background: #c0392b; }
.wordle-toast--success { background: #1a6e3a; }
.wordle-toast--info { background: #1a3a6e; }
.wordle-toast--warning { background: #8a6200; }

@keyframes wordle-toast-in {
    from { opacity: 0; transform: translateY(-14px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Pistas ──────────────────────────────────────────────────────────── */
.wordle-hints-area {
    margin: 0 auto;
    width: min(420px, 100%);
    font-size: 0.82rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
}

.wordle-hints-btn {
    margin: 0.2rem 0 0;
    padding: 0.45rem 1.1rem;
    border-radius: 8px;
    border: 2px solid var(--color-accent, #c0392b);
    background: transparent;
    color: var(--color-accent, #c0392b);
    font-family: sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: background 0.18s, color 0.18s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: fit-content;
    align-self: center;
}

.wordle-hints-btn:hover:not(:disabled) {
    background: var(--color-accent, #c0392b);
    color: #fff;
}

.wordle-hints-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.wordle-hints-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.6rem;
    width: 100%;
}

.wordle-hint-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--color-surface, #1a2340);
    border: 1px solid var(--color-border, #2a3555);
    border-radius: 10px;
    padding: 0.6rem 0.9rem;
    animation: hint-slide-in 0.25s ease forwards;
    width: 100%;
    box-sizing: border-box;
}

@keyframes hint-slide-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.wordle-hint-card__icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    width: 1.4rem;
    text-align: center;
}

.wordle-hint-card__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.wordle-hint-card__label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-muted, #8899bb);
    line-height: 1;
}

.wordle-hint-card__value {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text, #e8eaf6);
    line-height: 1.3;
}

.wordle-hints-exhausted {
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-muted, #8899bb);
    margin-top: 0.35rem;
    font-style: italic;
}

/* Pistas Tricolores */
.pistas-body {
    color: #ffffff;
}

.pistas-body .header {
    padding: 0.55rem 0.95rem;
}

.pistas-body .logo {
    font-size: 2rem;
}

.pistas-body .escudo {
    height: 2.25rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pistas-page {
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding-top: 1.6rem;
    padding-bottom: 1.2rem;
}

.pistas-shell {
    width: min(74rem, 100%);
    display: grid;
    gap: 1rem;
}

.pistas-hero,
.pistas-landing,
.pistas-player-panel,
.pistas-hints-panel,
.pistas-controls,
.pistas-result,
.pistas-error-box {
    border: 0.0625rem solid rgba(99, 173, 255, 0.24);
    background: linear-gradient(145deg, rgba(6, 8, 13, 0.92) 0%, rgba(8, 16, 18, 0.96) 100%);
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.34);
}

.pistas-hero {
    border-radius: var(--border-radius-md);
    padding: 1rem 1.2rem;
}

.pistas-kicker,
.pistas-landing-kicker,
.pistas-hints-label,
.pistas-label {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.68);
}

.pistas-title {
    margin: 0.12rem 0 0.24rem;
    font-family: 'Montecatini Pro Stretto Ultra', 'Montecatini Pro Largo Bold', Impact, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 0.95;
}

.pistas-title-accent {
    color: #c00c30;
}

.pistas-subtitle,
.pistas-landing-copy,
.pistas-hints-count,
.pistas-portrait-caption,
.pistas-error-text {
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
}

.pistas-landing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-radius: var(--border-radius-md);
    padding: 0.95rem 1.15rem;
}

.pistas-landing-copy {
    max-width: 58ch;
}

.pistas-play-button {
    width: auto;
    min-width: 9.2rem;
    padding-inline: 1.35rem;
    background: linear-gradient(135deg, #0046ad 0%, #013171 100%);
    color: #ffffff;
    box-shadow: 0 0.35rem 1.15rem rgba(0, 70, 173, 0.33);
}

.pistas-play-button:hover {
    background: linear-gradient(135deg, #0d5fd4 0%, #0046ad 100%);
    color: #ffffff;
    box-shadow: 0 0.45rem 1.4rem rgba(0, 70, 173, 0.44);
}

.pistas-board {
    display: grid;
    grid-template-columns: minmax(18rem, 23rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.pistas-player-panel,
.pistas-hints-panel {
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.pistas-player-panel {
    padding: 0.95rem;
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    background: radial-gradient(circle at 50% 18%, rgba(0, 70, 173, 0.22) 0%, rgba(7, 9, 12, 0.98) 72%);
}

.pistas-portrait-frame {
    width: 100%;
    aspect-ratio: 0.84 / 1;
    min-height: 24rem;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
    border: 0.125rem solid rgba(99, 173, 255, 0.36);
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.92) 0%, rgba(11, 11, 11, 0.98) 100%);
    box-shadow: inset 0 0 0 0.06rem rgba(255, 255, 255, 0.03), 0 0.8rem 2rem rgba(0, 0, 0, 0.45);
    display: grid;
    place-items: center;
}

.pistas-portrait-frame.is-revealed {
    border-color: rgba(255, 255, 255, 0.28);
}

.pistas-portrait-placeholder,
.pistas-portrait-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pistas-portrait-placeholder {
    display: grid;
    place-items: center;
    color: #ffffff;
    background:
        radial-gradient(circle at 50% 14%, rgba(0, 70, 173, 0.28) 0%, rgba(4, 8, 7, 0.92) 55%),
        linear-gradient(180deg, rgba(4, 8, 7, 0.95) 0%, rgba(8, 10, 12, 1) 100%);
}

.pistas-portrait-placeholder svg {
    filter: drop-shadow(0 0.4rem 0.9rem rgba(0, 0, 0, 0.35));
    opacity: 0.94;
}

.pistas-portrait-question {
    position: absolute;
    right: 0.5rem;
    bottom: 0.3rem;
    font-size: 2rem;
    font-weight: 900;
}

.pistas-portrait-image {
    background: #080808;
    object-fit: cover;
    object-position: center top;
}

.pistas-portrait-caption {
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pistas-hints-panel {
    padding: 0.95rem;
    background: linear-gradient(145deg, rgba(10, 10, 10, 0.98) 0%, rgba(15, 15, 15, 0.98) 100%);
}

.pistas-hints-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.pistas-final-state .pistas-hints-head,
.pistas-final-state .pistas-controls {
    display: none !important;
}

.pistas-hints-progress {
    display: block;
    margin-top: 0.08rem;
    font-family: 'Montecatini Pro Stretto Ultra', 'Montecatini Pro Largo Bold', Impact, sans-serif;
    font-size: clamp(1.3rem, 2vw, 2rem);
    letter-spacing: 0.04em;
}

.pistas-hints-count {
    text-align: right;
    font-size: 0.84rem;
    padding-top: 0.2rem;
}

.pistas-hints-list {
    display: grid;
    gap: 0.35rem;
}

.pistas-slot {
    min-height: 3.35rem;
    border-radius: 0.15rem;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    border: 0.05rem solid rgba(255, 255, 255, 0.08);
}

.pistas-slot--revealed {
    background: linear-gradient(180deg, rgba(14, 14, 14, 1) 0%, rgba(8, 8, 8, 1) 100%);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.08);
    animation: pistas-slot-in 0.24s ease both;
}

.pistas-slot--empty {
    background: linear-gradient(180deg, #0046ad 0%, #013171 100%);
    border-color: rgba(0, 0, 0, 0.22);
}

.pistas-slot__icon {
    width: 3rem;
    flex: 0 0 3rem;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.02);
    color: #c00c30;
    border-right: 0.05rem solid rgba(255, 255, 255, 0.08);
}

.pistas-slot__body {
    padding: 0.55rem 0.75rem;
    display: grid;
    align-content: center;
    gap: 0.12rem;
    min-width: 0;
}

.pistas-slot__title {
    display: block;
    font-family: 'Montecatini Pro Stretto Ultra', 'Montecatini Pro Largo Bold', Impact, sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}

.pistas-slot__text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.9);
}

.pistas-slot--empty::before {
    content: '';
    display: block;
    width: 100%;
    min-height: 100%;
}

@keyframes pistas-slot-in {
    from {
        opacity: 0;
        transform: translateY(0.35rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pistas-controls {
    border-radius: var(--border-radius-md);
    padding: 0.95rem;
    display: grid;
    gap: 0.85rem;
}

.pistas-guess-form {
    display: grid;
    gap: 0.55rem;
}

.pistas-label {
    color: rgba(255, 255, 255, 0.72);
}

.pistas-guess-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
}

.pistas-guess-input {
    width: 100%;
    min-height: 3rem;
    padding: 0.74rem 0.95rem;
    border-radius: var(--border-radius-sm);
    border: 0.0625rem solid rgba(99, 173, 255, 0.24);
    background: rgba(6, 8, 10, 0.96);
    color: #ffffff;
    outline: none;
}

.pistas-guess-input::placeholder {
    color: rgba(255, 255, 255, 0.42);
}

.pistas-guess-input:focus {
    border-color: #0046ad;
    box-shadow: 0 0 0 0.18rem rgba(0, 70, 173, 0.14);
}

.pistas-secondary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.pistas-secondary-btn {
    min-height: 2.9rem;
    padding: 0.72rem 1rem;
    border-radius: var(--border-radius-sm);
    border: 0.0625rem solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: var(--transition);
}

.pistas-secondary-btn:hover:not(:disabled) {
    border-color: rgba(99, 173, 255, 0.5);
    color: #99c7ff;
    transform: translateY(-0.125rem);
}

.pistas-secondary-btn--danger {
    border-color: rgba(255, 117, 117, 0.35);
    background: rgba(200, 20, 44, 0.1);
}

.pistas-secondary-btn--danger:hover:not(:disabled) {
    border-color: rgba(255, 117, 117, 0.7);
    color: #ff8f9f;
}

.pistas-error-box {
    border-radius: var(--border-radius-md);
    padding: 0.95rem;
    display: grid;
    gap: 0.75rem;
    border-color: rgba(255, 111, 111, 0.3);
}

.pistas-result {
    border-radius: var(--border-radius-md);
    padding: 0.95rem;
}

.pistas-result-card {
    display: grid;
    gap: 0.85rem;
    align-items: stretch;
}

.pistas-result-body {
    display: grid;
    gap: 0.8rem;
    align-content: start;
}

.pistas-result-kicker {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.72rem;
}

.pistas-result-name {
    margin: 0;
    font-family: 'Montecatini Pro Stretto Ultra', 'Montecatini Pro Largo Bold', Impact, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: clamp(1.7rem, 3vw, 2.7rem);
    line-height: 0.95;
    color: #ffffff;
}

.top6-confirm-copy {
    margin: 0.85rem 0 0;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.5;
    font-size: 0.95rem;
}

.pistas-result-nick {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
}

.pistas-result-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.pistas-stat {
    border-radius: 0.8rem;
    padding: 0.72rem 0.8rem;
    background: rgba(255, 255, 255, 0.03);
    border: 0.0625rem solid rgba(255, 255, 255, 0.08);
}

.pistas-stat__label {
    display: block;
    margin-bottom: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.55);
}

.pistas-stat__value {
    font-size: 0.95rem;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.92);
}

.pistas-result-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.pistas-toast-container {
    position: fixed;
    top: 4.75rem;
    right: 1rem;
    z-index: 1200;
    display: grid;
    gap: 0.5rem;
    width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}

.pistas-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.8rem 0.95rem;
    border-radius: 0.9rem;
    color: #ffffff;
    pointer-events: auto;
    animation: pistas-toast-in 0.22s ease both;
}

.pistas-toast svg {
    flex: 0 0 auto;
    margin-top: 0.05rem;
}

.pistas-toast--success {
    border-color: rgba(255, 255, 255, 0.18);
    background: linear-gradient(145deg, rgba(0, 70, 173, 0.96) 0%, rgba(1, 49, 113, 0.98) 100%);
}

.pistas-toast--info {
    border-color: rgba(255, 255, 255, 0.14);
    background: linear-gradient(145deg, rgba(24, 28, 46, 0.96) 0%, rgba(15, 18, 33, 0.98) 100%);
}

.pistas-toast--warning {
    border-color: rgba(255, 211, 109, 0.28);
    background: linear-gradient(145deg, rgba(95, 22, 40, 0.96) 0%, rgba(58, 11, 24, 0.98) 100%);
}

.pistas-toast--error {
    border-color: rgba(255, 143, 143, 0.34);
    background: linear-gradient(145deg, rgba(155, 10, 43, 0.96) 0%, rgba(112, 4, 26, 0.98) 100%);
}

@keyframes pistas-toast-in {
    from {
        opacity: 0;
        transform: translateY(-0.45rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pistas-toast.is-leaving {
    opacity: 0;
    transform: translateY(-0.35rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.pistas-feedback-success {
    color: #cfe0ff;
}

.pistas-feedback-warning {
    color: #ffd9de;
}

.pistas-feedback-error {
    color: #ff8b8b;
}

@media (max-width: 960px) {
    .pistas-board {
        grid-template-columns: 1fr;
    }

    .pistas-result-actions .pistas-play-button {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .pistas-page {
        padding-top: 1.1rem;
    }

    .pistas-player-panel,
    .pistas-hints-panel,
    .pistas-controls,
    .pistas-result,
    .pistas-error-box,
    .pistas-toast {
        padding: 0.85rem;
    }

    .pistas-guess-row {
        grid-template-columns: 1fr;
    }

    .pistas-secondary-actions,
    .pistas-result-actions {
        flex-direction: column;
    }

    .pistas-secondary-btn,
    .pistas-play-button {
        width: 100%;
    }

    .pistas-portrait-frame {
        min-height: 20rem;
    }

    .pistas-stat {
        padding: 0.62rem 0.68rem;
    }

    .pistas-toast-container {
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
        top: 4.3rem;
    }
}
/* ============================================================
   Top 6 — buscador con dropdown (añadir al final de style.css)
   ============================================================ */

/* Contenedor general del formulario: columna, sin gap extra
   para que el dropdown quede pegado debajo del input */
.top6-guess-form {
    display: grid;
    gap: 0.35rem;
}

/* Fila input + botón */
.top6-guess-controls {
    display: flex;
    gap: 0.4rem;
    align-items: stretch;
}

/* Input: ocupa todo el espacio restante */
.top6-search-input {
    flex: 1 1 0;
    min-width: 0;
    background: linear-gradient(180deg, rgba(220, 20, 60, 0.88) 0%, rgba(155, 10, 43, 0.9) 100%);
    color: #ffffff;
    border: 0.0625rem solid rgba(99, 173, 255, 0.7);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-lg);
    padding: 0.6rem 0.75rem;
    min-height: 3rem;
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.top6-search-input::placeholder {
    color: rgba(255, 255, 255, 0.85);
}

.top6-search-input:focus {
    border-color: rgba(160, 210, 255, 0.95);
}

/* Dropdown: flujo normal → empuja lo que está debajo.
   Ancho completo del panel, igual que en el grid. */
.top6-suggestions {
    width: 100%;
    margin-top: 0.1rem;
    background: var(--color-accent);
    border: 2px solid var(--color-accent);
    border-radius: 0.8rem;
    box-shadow: 0 0.8rem 1.5rem rgba(0, 0, 0, 0.4);
    max-height: min(15rem, 40vh);
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: block;
    padding: 0.4rem 0;
    box-sizing: border-box;
}

.top6-suggestions::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.top6-suggestions.is-hidden {
    display: none;
}

/* Ítems */
.top6-suggestions .grid-suggestion-item {
    border: none;
    background: transparent;
    display: block;
    width: calc(100% - 0.8rem);
    text-align: left;
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: background 0.15s ease;
    margin: 0 0.4rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.top6-suggestions .grid-suggestion-item:hover {
    background: rgba(255, 255, 255, 0.2);
}

.top6-suggestions .grid-suggestion-item.is-highlighted {
    background: rgba(0, 0, 0, 0.25);
    font-weight: 600;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.top6-suggestions .grid-suggestion-item:active {
    background: rgba(0, 0, 0, 0.35);
}

@media (max-width: 480px) {
    .top6-search-input {
        font-size: var(--font-size-base);
    }
}

/* ── Botón de pista ─────────────────────────────────────────────────────── */

.top6-hint-wrap {
    display: flex;
    justify-content: center;
}

.top6-hint-wrap.is-hidden {
    display: none;
}

.top6-hint-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.85rem 0.38rem 0.7rem;
    border-radius: 999rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.45);
    background: linear-gradient(135deg, rgba(0, 71, 171, 0.82) 0%, rgba(4, 40, 110, 0.9) 100%);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.top6-hint-btn:hover {
    background: linear-gradient(135deg, rgba(0, 90, 210, 0.92) 0%, rgba(6, 52, 140, 0.97) 100%);
    border-color: rgba(255, 255, 255, 0.7);
    transform: translateY(-0.06rem);
}

.top6-hint-btn:active {
    transform: translateY(0);
}

.top6-hint-btn .fa-lightbulb {
    color: #ffffff;
    font-size: 0.88rem;
}

.top6-hint-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    border-radius: 999rem;
    background: rgba(220, 20, 60, 0.9);
    border: 0.0625rem solid rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    padding: 0 0.2rem;
}

/* ── Hint tags dentro de cada fila ─────────────────────────────────────── */

.top6-hint-area {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.2rem;
}

.top6-hint-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999rem;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.02rem;
    white-space: nowrap;
}

/* Pista 1 — década: tono azul oscuro con borde blanco suave */
.top6-hint-tag--1 {
    background: rgba(0, 25, 90, 0.85);
    border: 0.0625rem solid rgba(99, 173, 255, 0.65);
    color: #c8e0ff;
}

.top6-hint-tag--1 .fa-calendar-days {
    color: #7ab8ff;
    font-size: 0.7rem;
}

/* Pista 2 — posición: tono rojo oscuro con borde blanco suave */
.top6-hint-tag--2 {
    background: rgba(100, 5, 22, 0.85);
    border: 0.0625rem solid rgba(255, 120, 140, 0.55);
    color: #ffd5dc;
}

.top6-hint-tag--2 .fa-shirt {
    color: #ff8ea1;
    font-size: 0.7rem;
}

/* Ajuste en la fila: el nombre + hint van en columna */
.top6-row .top6-player-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* La fila crece si hay hint tags */
.top6-row:has(.top6-hint-area) {
    min-height: 3.8rem;
}

/* ── Toast ──────────────────────────────────────────────────────────────── */

.top6-toast-container {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    pointer-events: none;
    width: max-content;
    max-width: min(92vw, 22rem);
}

.top6-toast {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1rem;
    border-radius: 0.75rem;
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.32);
    pointer-events: auto;
    animation: top6-toast-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    white-space: nowrap;
}

.top6-toast.is-leaving {
    animation: top6-toast-out 0.22s ease forwards;
}

.top6-toast--error {
    background: linear-gradient(135deg, #b00c28 0%, #8a0820 100%);
    border: 0.0625rem solid rgba(255, 120, 140, 0.4);
}

.top6-toast--success {
    background: linear-gradient(135deg, #0a3f80 0%, #062a5a 100%);
    border: 0.0625rem solid rgba(99, 173, 255, 0.45);
}

.top6-toast--info {
    background: linear-gradient(135deg, rgba(0, 30, 80, 0.97) 0%, rgba(0, 18, 55, 0.98) 100%);
    border: 0.0625rem solid rgba(150, 200, 255, 0.35);
}

.top6-toast--hint {
    background: linear-gradient(135deg, #0a2e6e 0%, #071d4a 100%);
    border: 0.0625rem solid rgba(99, 173, 255, 0.45);
}

.top6-toast__icon {
    font-size: 1rem;
    flex-shrink: 0;
}

@keyframes top6-toast-in {
    from { opacity: 0; transform: translateY(-14px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0)     scale(1);   }
}

@keyframes top6-toast-out {
    from { opacity: 1; transform: translateY(0)      scale(1);    }
    to   { opacity: 0; transform: translateY(-10px)  scale(0.95); }
}

.admin-xidel-pitch {
    margin-top: 0.9rem;
    position: relative;
    min-height: 40rem;
    border: 0.0625rem solid rgba(103, 183, 255, 0.35);
    border-radius: 0.85rem;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 36%, rgba(0, 0, 0, 0) 38%),
        linear-gradient(180deg, rgba(7, 32, 74, 0.85) 0%, rgba(5, 21, 50, 0.92) 100%);
    padding: 0.9rem;
}

.admin-xidel-slot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: clamp(8.4rem, 13vw, 10rem);
    border: 0.0625rem solid rgba(120, 190, 255, 0.42);
    border-radius: 0.65rem;
    background: rgba(3, 16, 39, 0.9);
    padding: 0.45rem;
    display: grid;
    gap: 0.35rem;
}

.admin-xidel-slot .admin-input {
    padding: 0.5rem 0.55rem;
    font-size: 0.82rem;
}

.admin-xidel-slot-title {
    margin: 0;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #cde8ff;
    font-weight: 700;
}

.admin-xidel-slot-1 { left: 50%; top: 88%; }
.admin-xidel-slot-2 { left: 84%; top: 67%; }
.admin-xidel-slot-3 { left: 38%; top: 67%; }
.admin-xidel-slot-4 { left: 62%; top: 67%; }
.admin-xidel-slot-5 { left: 16%; top: 67%; }
.admin-xidel-slot-6 { left: 30%; top: 44%; }
.admin-xidel-slot-7 { left: 50%; top: 44%; }
.admin-xidel-slot-8 { left: 70%; top: 44%; }
.admin-xidel-slot-9 { left: 77%; top: 20%; }
.admin-xidel-slot-10 { left: 50%; top: 20%; }
.admin-xidel-slot-11 { left: 23%; top: 20%; }

.admin-xidel-pitch[data-formation="4-4-2"] .admin-xidel-slot-1 { left: 50%; top: 88%; }
.admin-xidel-pitch[data-formation="4-4-2"] .admin-xidel-slot-2 { left: 84%; top: 67%; }
.admin-xidel-pitch[data-formation="4-4-2"] .admin-xidel-slot-3 { left: 62%; top: 67%; }
.admin-xidel-pitch[data-formation="4-4-2"] .admin-xidel-slot-4 { left: 38%; top: 67%; }
.admin-xidel-pitch[data-formation="4-4-2"] .admin-xidel-slot-5 { left: 16%; top: 67%; }
.admin-xidel-pitch[data-formation="4-4-2"] .admin-xidel-slot-6 { left: 83%; top: 44%; }
.admin-xidel-pitch[data-formation="4-4-2"] .admin-xidel-slot-7 { left: 61%; top: 44%; }
.admin-xidel-pitch[data-formation="4-4-2"] .admin-xidel-slot-8 { left: 39%; top: 44%; }
.admin-xidel-pitch[data-formation="4-4-2"] .admin-xidel-slot-9 { left: 17%; top: 44%; }
.admin-xidel-pitch[data-formation="4-4-2"] .admin-xidel-slot-10 { left: 60%; top: 20%; }
.admin-xidel-pitch[data-formation="4-4-2"] .admin-xidel-slot-11 { left: 40%; top: 20%; }

.admin-xidel-pitch[data-formation="4-2-3-1"] .admin-xidel-slot-1 { left: 50%; top: 88%; }
.admin-xidel-pitch[data-formation="4-2-3-1"] .admin-xidel-slot-1 { left: 50%; top: 90%; }
.admin-xidel-pitch[data-formation="4-2-3-1"] .admin-xidel-slot-2 { left: 84%; top: 70%; }
.admin-xidel-pitch[data-formation="4-2-3-1"] .admin-xidel-slot-3 { left: 62%; top: 70%; }
.admin-xidel-pitch[data-formation="4-2-3-1"] .admin-xidel-slot-4 { left: 38%; top: 70%; }
.admin-xidel-pitch[data-formation="4-2-3-1"] .admin-xidel-slot-5 { left: 16%; top: 70%; }
.admin-xidel-pitch[data-formation="4-2-3-1"] .admin-xidel-slot-6 { left: 58%; top: 51%; }
.admin-xidel-pitch[data-formation="4-2-3-1"] .admin-xidel-slot-7 { left: 42%; top: 51%; }
.admin-xidel-pitch[data-formation="4-2-3-1"] .admin-xidel-slot-8 { left: 79%; top: 36%; }
.admin-xidel-pitch[data-formation="4-2-3-1"] .admin-xidel-slot-9 { left: 50%; top: 30%; }
.admin-xidel-pitch[data-formation="4-2-3-1"] .admin-xidel-slot-10 { left: 21%; top: 36%; }
.admin-xidel-pitch[data-formation="4-2-3-1"] .admin-xidel-slot-11 { left: 50%; top: 14%; }

.admin-xidel-pitch[data-formation="4-3-1-2"] .admin-xidel-slot-1 { left: 50%; top: 88%; }
.admin-xidel-pitch[data-formation="4-3-1-2"] .admin-xidel-slot-2 { left: 84%; top: 67%; }
.admin-xidel-pitch[data-formation="4-3-1-2"] .admin-xidel-slot-3 { left: 62%; top: 67%; }
.admin-xidel-pitch[data-formation="4-3-1-2"] .admin-xidel-slot-4 { left: 38%; top: 67%; }
.admin-xidel-pitch[data-formation="4-3-1-2"] .admin-xidel-slot-5 { left: 16%; top: 67%; }
.admin-xidel-pitch[data-formation="4-3-1-2"] .admin-xidel-slot-6 { left: 70%; top: 49%; }
.admin-xidel-pitch[data-formation="4-3-1-2"] .admin-xidel-slot-7 { left: 50%; top: 49%; }
.admin-xidel-pitch[data-formation="4-3-1-2"] .admin-xidel-slot-8 { left: 30%; top: 49%; }
.admin-xidel-pitch[data-formation="4-3-1-2"] .admin-xidel-slot-9 { left: 50%; top: 33%; }
.admin-xidel-pitch[data-formation="4-3-1-2"] .admin-xidel-slot-10 { left: 62%; top: 14%; }
.admin-xidel-pitch[data-formation="4-3-1-2"] .admin-xidel-slot-11 { left: 38%; top: 14%; }

.admin-xidel-pitch[data-formation="3-5-2"] .admin-xidel-slot-1 { left: 50%; top: 88%; }
.admin-xidel-pitch[data-formation="3-5-2"] .admin-xidel-slot-2 { left: 70%; top: 69%; }
.admin-xidel-pitch[data-formation="3-5-2"] .admin-xidel-slot-3 { left: 50%; top: 69%; }
.admin-xidel-pitch[data-formation="3-5-2"] .admin-xidel-slot-4 { left: 30%; top: 69%; }
.admin-xidel-pitch[data-formation="3-5-2"] .admin-xidel-slot-5 { left: 86%; top: 47%; }
.admin-xidel-pitch[data-formation="3-5-2"] .admin-xidel-slot-6 { left: 66%; top: 45%; }
.admin-xidel-pitch[data-formation="3-5-2"] .admin-xidel-slot-7 { left: 50%; top: 45%; }
.admin-xidel-pitch[data-formation="3-5-2"] .admin-xidel-slot-8 { left: 34%; top: 45%; }
.admin-xidel-pitch[data-formation="3-5-2"] .admin-xidel-slot-9 { left: 14%; top: 47%; }
.admin-xidel-pitch[data-formation="3-5-2"] .admin-xidel-slot-10 { left: 60%; top: 20%; }
.admin-xidel-pitch[data-formation="3-5-2"] .admin-xidel-slot-11 { left: 40%; top: 20%; }

/* Robust desktop preview: mirror 4-2-3-1 with grid in admin */
.admin-xidel-pitch[data-formation="4-2-3-1"] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    gap: 0.6rem;
    align-items: center;
    justify-items: center;
    padding: 0.95rem 0.55rem;
}

.admin-xidel-pitch[data-formation="4-2-3-1"] .admin-xidel-slot {
    position: static;
    transform: none;
    width: min(100%, clamp(7.7rem, 12vw, 9.8rem));
}

.admin-xidel-pitch[data-formation="4-2-3-1"] .admin-xidel-slot-11 { grid-column: 5 / span 4; grid-row: 1; }
.admin-xidel-pitch[data-formation="4-2-3-1"] .admin-xidel-slot-8 { grid-column: 9 / span 4; grid-row: 2; }
.admin-xidel-pitch[data-formation="4-2-3-1"] .admin-xidel-slot-9 { grid-column: 5 / span 4; grid-row: 2; }
.admin-xidel-pitch[data-formation="4-2-3-1"] .admin-xidel-slot-10 { grid-column: 1 / span 4; grid-row: 2; }
.admin-xidel-pitch[data-formation="4-2-3-1"] .admin-xidel-slot-6 { grid-column: 7 / span 3; grid-row: 3; }
.admin-xidel-pitch[data-formation="4-2-3-1"] .admin-xidel-slot-7 { grid-column: 4 / span 3; grid-row: 3; }
.admin-xidel-pitch[data-formation="4-2-3-1"] .admin-xidel-slot-2 { grid-column: 10 / span 3; grid-row: 4; }
.admin-xidel-pitch[data-formation="4-2-3-1"] .admin-xidel-slot-3 { grid-column: 7 / span 3; grid-row: 4; }
.admin-xidel-pitch[data-formation="4-2-3-1"] .admin-xidel-slot-4 { grid-column: 4 / span 3; grid-row: 4; }
.admin-xidel-pitch[data-formation="4-2-3-1"] .admin-xidel-slot-5 { grid-column: 1 / span 3; grid-row: 4; }
.admin-xidel-pitch[data-formation="4-2-3-1"] .admin-xidel-slot-1 { grid-column: 4 / span 6; grid-row: 5; }

@media (max-width: 940px) {
    .admin-xidel-pitch {
        min-height: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .admin-xidel-slot {
        position: static;
        transform: none;
        width: 100%;
    }
}

/* ── Animaciones de score y notificaciones (movidas desde main.js) ── */

.score-correct,
.score-incorrect {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.score-pop {
    transform: scale(1.3) !important;
}

.card-click {
    transform: scale(0.95) !important;
}

@keyframes slideIn {
    from { transform: translateX(400px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}

@keyframes slideOut {
    from { transform: translateX(0);     opacity: 1; }
    to   { transform: translateX(400px); opacity: 0; }
}

.notification {
    position: fixed;
    top: 100px;
    right: 20px;
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    font-weight: 600;
    animation: slideIn 0.3s ease-out;
}

.notification-hide {
    animation: slideOut 0.3s ease-out forwards;
}

.notification-info    { background: #0047AB; }
.notification-success { background: #00d4aa; }
.notification-error   { background: #ff2e63; }

/* ============================================================
   CRUCIGRAMA TRICOLOR
   ============================================================ */

/* ── Fondo especial ── */
.crucigrama-body::before {
    background-image: url('../assets/diario_collage.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.2;
    mix-blend-mode: normal;
}

.crucigrama-page {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

/* ── Escena ── */
.crucigrama-scene {
    position: relative;
    width: min(820px, 100%);
    margin: 0 auto;
}

/* ── Tapa del diario ── */
.crucigrama-newspaper {
    position: relative;
    width: 100%;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: 0 1.5rem 4rem rgba(0,0,0,0.6);
    border: var(--border-width) solid rgba(255,255,255,0.1);
    aspect-ratio: 3 / 4;
    background: var(--color-bg-darker);
}

.crucigrama-newspaper-inner { width: 100%; height: 100%; position: relative; }

.crucigrama-newspaper-img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.crucigrama-newspaper-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,0.4) 100%);
}

.crucigrama-newspaper-badge {
    position: absolute;
    top: 0.75rem; left: 0.75rem;
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999rem;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07rem;
    z-index: 2;
}

/* ── Botón para saltar al crucigrama ── */
.crucigrama-jump-button {
    position: absolute;
    top: 0.75rem; right: 0.75rem;
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999rem;
    background: #ffffff;
    backdrop-filter: blur(6px);
    border: 1px solid #ddd;
    cursor: pointer;
    font-size: 0.65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05rem;
    color: #0046ad;
    z-index: 3;
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.crucigrama-jump-button:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,0.25);
    transform: translateY(-2px);
}

.crucigrama-jump-button:active {
    transform: translateY(0);
}

.crucigrama-jump-button.is-hidden {
    display: none;
}

.jump-btn-escudo {
    display: inline-block;
    flex-shrink: 0;
}

.jump-badge-text {
    margin-left: 0;
}

/* ── Panel del crucigrama — siempre centrado sobre la tapa ── */
.crucigrama-panel {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(475px, 65%);
    max-height: 94%;
    z-index: 10;
    display: flex; flex-direction: column; gap: 0.5rem;
}

/* ── Caja de consigna — glassmorphism ── */
.crucigrama-clue-box {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(20px) saturate(200%);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-left: 3px solid var(--color-primary);
    padding: 0.8rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: stretch;
    min-height: 5.8rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
    transition: border-color 0.2s ease;
}

.crucigrama-clue-box--active {
    border-left-color: var(--color-primary);
}

/* Fila superior: número + dirección */
.crucigrama-clue-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.crucigrama-clue-number {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--color-accent);
    line-height: 1;
}

.crucigrama-clue-direction {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999rem;
    background: rgba(0, 50, 140, 0.55);
    border: 1px solid rgba(0, 100, 220, 0.5);
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08rem;
    color: #7ab8ff;
}

.crucigrama-clue-text {
    display: block;
    width: 100%;
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--color-accent);
    line-height: 1.34;
    white-space: normal;
    overflow-wrap: anywhere;
}

.crucigrama-clue-empty {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.4);
    font-style: italic;
    align-self: center;
    padding: 0.3rem 0;
}

/* ── Grid wrap — glassmorphism ── */
.crucigrama-grid-wrap {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(5px) saturate(160%);
    -webkit-backdrop-filter: blur(5px) saturate(160%);
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 2px solid var(--color-accent);
    padding: 0.65rem;
    overflow: visible;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ── Grid ── */
.crucigrama-grid {
    display: grid;
    grid-template-columns: repeat(var(--cruc-cols,1), 1fr);
    grid-template-rows:    repeat(var(--cruc-rows,1), 1fr);
    gap: 2px;
    width: 100%;
    aspect-ratio: var(--cruc-cols,1) / var(--cruc-rows,1);
}

/* ── Celdas ── */
.cruc-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    aspect-ratio: 1;
}

/* Celda vacía — invisible, solo espacio */
.cruc-cell--empty {
    background: transparent;
}

/* Celda activa — blanco con borde sutil */
.cruc-cell--active {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(0, 70, 173, 0.6);
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.1s ease, border-color 0.1s ease;
}

.cruc-cell--active:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.45);
}

/* Palabra resaltada — azul */
.cruc-cell--highlighted {
    background: rgba(0, 70, 173, 0.45) !important;
    border-color: var(--color-primary) !important;
}

/* Celda seleccionada — rojo */
.cruc-cell--selected {
    background: var(--color-accent) !important;
    border-color: #ff2244 !important;
    box-shadow: 0 0 0 2px rgba(192,12,48,0.4), inset 0 0 0 1px rgba(255,255,255,0.15);
}

/* Palabra correcta — verde con texto claro */
.cruc-cell--correct {
    background: linear-gradient(135deg, #004d30, #006b42) !important;
    border-color: rgba(0,212,170,0.6) !important;
    cursor: default;
}

.cruc-cell--correct .cruc-cell-letter {
    color: #7ef5c7;
}

/* Palabra revelada por rendición — rojo */
.cruc-cell--revealed {
    background: linear-gradient(135deg, #4d0010, #6b0018) !important;
    border-color: rgba(220,50,80,0.6) !important;
    cursor: default;
}

.cruc-cell--revealed .cruc-cell-letter {
    color: #ff9fb0;
}

/* Número en esquina */
.cruc-cell-number {
    position: absolute;
    top: 1px; left: 2px;
    font-size: 0.42rem;
    font-weight: 800;
    color: rgba(255,255,255,0.6);
    line-height: 1;
    pointer-events: none;
    font-family: 'Outfit', sans-serif;
}

/* Letra central */
.cruc-cell-letter {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(0.7rem, 1.8vw, 1rem);
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1;
    pointer-events: none;
}

/* ── Loading ── */
.crucigrama-loading {
    text-align: center; padding: 1.2rem;
    color: rgba(255,255,255,0.5); font-size: 0.88rem;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.crucigrama-loading.is-hidden { display: none; }

/* ── Toasts ── */
#crucigrama-toast-container {
    position: fixed; top: 1.25rem; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; flex-direction: column; align-items: center;
    gap: 0.4rem; width: max-content; max-width: min(92vw, 22rem); pointer-events: none;
}

.crucigrama-toast {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 1rem; border-radius: var(--border-radius-sm);
    font-family: 'Outfit', sans-serif; font-size: 0.88rem; font-weight: 600;
    color: #fff; box-shadow: 0 4px 18px rgba(0,0,0,0.35);
    pointer-events: auto;
    animation: cruc-toast-in 0.22s cubic-bezier(0.34,1.56,0.64,1) forwards;
    white-space: nowrap;
}
.crucigrama-toast.is-leaving { animation: cruc-toast-out 0.2s ease forwards; }
.crucigrama-toast--success { background: linear-gradient(135deg,#004d30,#006b42); border: 1px solid rgba(0,212,170,0.4); }
.crucigrama-toast--error   { background: linear-gradient(135deg,#8a0820,#b00c28); border: 1px solid rgba(255,120,140,0.3); }
.crucigrama-toast--info    { background: rgba(10,25,60,0.97); border: 1px solid rgba(255,255,255,0.15); }

@keyframes cruc-toast-in  { from{opacity:0;transform:translateY(-12px) scale(0.92)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes cruc-toast-out { from{opacity:1;transform:translateY(0) scale(1)} to{opacity:0;transform:translateY(-8px) scale(0.96)} }

/* ── Modal resultado ── */
.crucigrama-result-card {
    text-align: center; display: flex; flex-direction: column;
    align-items: center; gap: 0.65rem;
}
.crucigrama-result-icon  { font-size: 3rem; line-height: 1; }
.crucigrama-result-title { margin: 0; font-size: 1.4rem; font-weight: 900; color: #fff; font-family: 'Outfit', sans-serif; }
.crucigrama-result-msg   { margin: 0; color: rgba(255,255,255,0.65); font-size: 0.92rem; line-height: 1.5; }

/* ── How To Play — bordó opaco solo aquí ── */
.crucigrama-body .how-to-play-section {
    background: rgba(70,4,16,0.6);
    backdrop-filter: blur(8px);
    border-top: var(--border-width) solid rgba(192,12,48,0.3);
}
.crucigrama-body .how-to-play-title   { color: #fff; }
.crucigrama-body .how-to-play-highlight { color: #ff5570; }
.crucigrama-body .how-to-play-body    { color: rgba(255,210,215,0.9); }
.crucigrama-body .how-to-play-body strong { color: #fff; }
.crucigrama-body .how-to-play-clues li { color: rgba(255,210,215,0.9); }
.crucigrama-body .how-to-play-clues li strong { color: #fff; }
.crucigrama-body .how-to-play-tile    { box-shadow: 0 2px 8px rgba(0,0,0,0.4); }

/* ── Responsive ── */
@media (max-width: 768px) {
    .crucigrama-newspaper { aspect-ratio: 2 / 3; }
    .crucigrama-panel {
        position: relative !important;
        left: auto !important; top: auto !important;
        right: auto !important; bottom: auto !important;
        transform: none !important;
        width: 100% !important;
        max-height: none !important;
        margin-top: 0.75rem;
    }
}

@media (max-width: 480px) {
    .crucigrama-newspaper { aspect-ratio: 2 / 3; border-radius: var(--border-radius-sm); }
    .crucigrama-panel { width: 100% !important; }
    .crucigrama-clue-number { font-size: 1.2rem; }
    .crucigrama-clue-text   { font-size: 0.8rem; }
    .cruc-cell-number       { font-size: 0.38rem; }
}
/* ================================================================
   ESTILOS FEEDBACK — Pegá esto al final de style/style.css
   Cubre: formularios de reporte/sugerencia, página de éxito,
   y los botones del footer.
   ================================================================ */

/* ── Card del formulario ── */
.fb-card {
    background: rgba(5, 13, 24, 0.85);
    backdrop-filter: blur(16px);
    border-radius: var(--border-radius-md);
    border: var(--border-width) solid var(--primary-alpha-40);
    box-shadow: 0 1.5rem 4rem var(--black-alpha-30);
    overflow: hidden;
    margin-top: 0.5rem;
}

/* ── Header de la card ── */
.fb-card-header {
    padding: 1.75rem 2rem 1.5rem;
    border-bottom: 0.0625rem solid var(--primary-alpha-20);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.fb-type-report  { background: linear-gradient(135deg, rgba(192,12,48,.15) 0%, transparent 100%); border-bottom-color: rgba(192,12,48,.3); }
.fb-type-suggest { background: linear-gradient(135deg, rgba(0,71,171,.2) 0%, transparent 100%);  border-bottom-color: var(--primary-alpha-40); }

.fb-icon {
    width: 3.25rem; height: 3.25rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; flex-shrink: 0;
}
.fb-icon-report  { background: rgba(192,12,48,.2); border: var(--border-width) solid rgba(192,12,48,.5); }
.fb-icon-suggest { background: var(--primary-alpha-20); border: var(--border-width) solid var(--primary-alpha-50); }

.fb-card-title    { margin: 0 0 0.2rem; font-size: var(--font-size-2xl); font-weight: 800; color: var(--color-secondary); }
.fb-card-subtitle { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* ── Cuerpo ── */
.fb-card-body { padding: 2rem; }

/* ── Grupos y etiquetas ── */
.fb-group { margin-bottom: 1.2rem; }

.fb-label {
    display: block;
    font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--color-text-secondary); margin-bottom: 0.4rem;
}
.fb-required { color: var(--color-accent); margin-left: 0.15rem; }

/* ── Fila de 2 campos ── */
.fb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── Inputs, select, textarea ── */
.fb-input,
.fb-select,
.fb-textarea {
    width: 100%;
    background: var(--white-alpha-05);
    border: var(--border-width) solid var(--primary-alpha-30);
    border-radius: var(--border-radius-sm);
    color: var(--color-text);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: var(--font-size-base);
    padding: 0.65rem 0.85rem;
    transition: var(--transition);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.fb-input::placeholder,
.fb-textarea::placeholder  { color: rgba(136,146,176,.5); }
.fb-input:focus,
.fb-select:focus,
.fb-textarea:focus {
    border-color: var(--color-primary);
    background: var(--primary-alpha-10);
    box-shadow: 0 0 0 3px var(--primary-alpha-20);
}
.fb-input.fb-error,
.fb-select.fb-error,
.fb-textarea.fb-error {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(192,12,48,.2);
}

/* ── Select con flecha custom ── */
.fb-select-wrap { position: relative; }
.fb-select { cursor: pointer; padding-right: 2.25rem; }
.fb-select option { background: var(--color-bg-darker); color: var(--color-text); }
.fb-select-wrap::after {
    content: '▾';
    position: absolute; right: 0.85rem; top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    pointer-events: none; font-size: 0.85rem;
}

/* ── Textarea ── */
.fb-textarea { resize: vertical; min-height: 7rem; max-height: 16rem; line-height: 1.55; }

/* ── Error por campo ── */
.fb-field-error { display: none; font-size: 0.78rem; color: #ff5570; margin-top: 0.3rem; font-weight: 600; }
.fb-field-error--visible { display: block; }

/* ── Alerta general ── */
.fb-alert {
    display: none;
    align-items: center; gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm); font-weight: 600;
    margin-bottom: 1.25rem;
}
.fb-alert--visible { display: flex; }
.fb-alert-error {
    background: rgba(192,12,48,.12);
    border: 0.0625rem solid rgba(192,12,48,.4);
    color: #ff5570;
}

/* ── Botón de envío ── */
.fb-btn {
    width: 100%; padding: 0.8rem 1.5rem;
    border: none; border-radius: var(--border-radius-sm);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: var(--font-size-base); font-weight: 700; letter-spacing: 0.03em;
    cursor: pointer;
    transition: var(--transition);
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    margin-top: 1.25rem;
    color: var(--color-secondary);
}
.fb-btn-report  { background: linear-gradient(135deg, #c00c30, #8a0820); box-shadow: 0 0.4rem 1.2rem rgba(192,12,48,.4); }
.fb-btn-suggest { background: linear-gradient(135deg, #0046ad, #002f78); box-shadow: 0 0.4rem 1.2rem var(--primary-alpha-50); }
.fb-btn-report:hover:not(:disabled)  { background: linear-gradient(135deg, #e01040, #a80a28); transform: translateY(-2px); box-shadow: 0 0.6rem 1.8rem rgba(192,12,48,.55); }
.fb-btn-suggest:hover:not(:disabled) { background: linear-gradient(135deg, #0055cc, #003d9e); transform: translateY(-2px); box-shadow: 0 0.6rem 1.8rem rgba(0,71,171,.6); }
.fb-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }

/* ── Spinner dentro del botón ── */
.fb-spinner {
    display: none;
    width: 1rem; height: 1rem;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: fb-spin 0.7s linear infinite;
}
.fb-btn--loading .fb-spinner { display: block; }
.fb-btn--loading .fb-btn-text { opacity: 0.75; }
@keyframes fb-spin { to { transform: rotate(360deg); } }

/* ── Link volver ── */
.fb-back-link {
    display: inline-flex; align-items: center; gap: 0.35rem;
    color: var(--color-text-secondary); text-decoration: none;
    font-size: var(--font-size-sm); font-weight: 600;
    margin-bottom: 1.1rem;
    transition: color 0.2s ease;
}
.fb-back-link:hover { color: var(--color-text); }

/* ── Nota de privacidad ── */
.fb-privacy {
    text-align: center;
    font-size: 0.76rem;
    color: rgba(136,146,176,.55);
    margin-top: 0.85rem;
}

/* ── Página de éxito ── */
.fb-success-card {
    background: rgba(5,13,24,.85);
    backdrop-filter: blur(16px);
    border-radius: var(--border-radius-md);
    border: var(--border-width) solid rgba(0,212,170,.3);
    box-shadow: 0 1.5rem 4rem var(--black-alpha-30);
    padding: 3rem 2rem;
    text-align: center;
    width: 100%;
}
.fb-success-icon  { font-size: 3.75rem; display: block; margin-bottom: 1rem; }
.fb-success-title { font-size: var(--font-size-3xl); font-weight: 800; color: var(--color-secondary); margin: 0 0 0.5rem; }
.fb-success-msg   { color: var(--color-text-secondary); font-size: var(--font-size-base); margin: 0 0 2rem; line-height: 1.6; }
.fb-success-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.7rem 1.6rem;
    background: linear-gradient(135deg, #0046ad, #002f78);
    color: var(--color-secondary); text-decoration: none;
    border-radius: var(--border-radius-sm);
    font-weight: 700; font-size: var(--font-size-base);
    transition: var(--transition);
    box-shadow: 0 0.4rem 1.2rem var(--primary-alpha-50);
}
.fb-success-btn:hover { transform: translateY(-2px); box-shadow: 0 0.6rem 1.8rem rgba(0,71,171,.6); }

/* ── Responsive ── */
@media (max-width: 540px) {
    .fb-row { grid-template-columns: 1fr; }
    .fb-card-header { padding: 1.25rem 1.25rem 1rem; }
    .fb-card-body   { padding: 1.25rem; }
    .fb-card-title  { font-size: var(--font-size-xl); }
}
.grid-play-cell.is-skeleton,
.grid-category-cell.is-skeleton {
    background: var(--color-surface, #1e1e1e);
    pointer-events: none;
    position: relative;
    overflow: hidden;
}

.grid-skeleton-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: grid-shimmer 1.4s ease-in-out infinite;
}

@keyframes grid-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* ================================================================
   CAMISETAS – Estilos del juego
   ================================================================ */

/* Toast flotante bottom-right */
#cam-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: 320px;
}
.cam-toast {
    padding: 12px 18px;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    animation: cam-toast-in 0.3s ease forwards;
    pointer-events: auto;
}
.cam-toast--success { background: #166534; border-left: 3px solid #22c55e; }
.cam-toast--error   { background: #991b1b; border-left: 3px solid #ef4444; }
.cam-toast--info    { background: #1e3a5f; border-left: 3px solid var(--color-primary); }
.cam-toast.is-leaving { animation: cam-toast-out 0.3s ease forwards; }
@keyframes cam-toast-in  { from{opacity:0;transform:translateX(20px);}  to{opacity:1;transform:translateX(0);} }
@keyframes cam-toast-out { from{opacity:1;transform:translateX(0);}     to{opacity:0;transform:translateX(20px);} }

/* Page */
.cam-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-xl);
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
}

/* Pitch */
.cam-pitch-shell { width: 100%; }
.cam-pitch {
    position: relative;
    width: 100%;
    aspect-ratio: 7 / 10;
    background: linear-gradient(180deg, rgba(10,45,10,0.92) 0%, rgba(5,22,5,0.95) 100%);
    border: 1.5px solid rgba(255,255,255,0.15);
    border-radius: var(--border-radius-md);
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: repeat(5, 1fr);
    padding: 10px;
    gap: 6px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0,80,0,0.3);
}
.cam-pitch::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 19%,
            rgba(255,255,255,0.05) 19%, rgba(255,255,255,0.05) 20%),
        linear-gradient(90deg, transparent 49.5%,
            rgba(255,255,255,0.05) 49.5%, rgba(255,255,255,0.05) 50.5%, transparent 50.5%);
    border-radius: var(--border-radius-md);
    pointer-events: none;
}

/* Player card */
.cam-player-card {
    grid-row: var(--cam-row);
    grid-column: var(--cam-col);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    user-select: none;
}
.cam-card-shirt-wrap {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.cam-card-empty { border-style: dashed; border-color: rgba(255,255,255,0.3); }
.cam-card-question { font-size: 22px; color: rgba(255,255,255,0.45); font-weight: 700; }
.cam-card-player-img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    border-radius: 50%;
}
.cam-card-player-icon { width: 30px; height: 30px; fill: rgba(255,255,255,0.45); }
.cam-card-pos {
    font-size: 10px; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; color: rgba(255,255,255,0.75); line-height: 1;
}
.cam-card-name {
    font-size: 10px; font-weight: 700; text-align: center; color: #fff;
    text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2;
    max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cam-card-name--empty { color: transparent; }
.cam-player-card.is-solved .cam-card-shirt-wrap {
    border-color: #22c55e; background: rgba(34,197,94,0.18);
    box-shadow: 0 0 14px rgba(34,197,94,0.4);
}
.cam-player-card.is-failed .cam-card-shirt-wrap {
    border-color: #ef4444; background: rgba(239,68,68,0.18);
}
@keyframes cam-pop {
    0%   { transform: scale(0.6); opacity: 0; }
    70%  { transform: scale(1.12); }
    100% { transform: scale(1); opacity: 1; }
}
.cam-player-card.is-solved .cam-card-shirt-wrap {
    animation: cam-pop 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

/* Input shell — uses display:flex but is-hidden overrides it */
.cam-input-shell {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}
.cam-input-shell.is-hidden { display: none !important; }

/* Row: shirt + (input + flag) */
.cam-input-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}
.cam-shirt-area { flex-shrink: 0; }
.cam-shirt-display {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: var(--border-radius-md);
    padding: 12px 16px; min-width: 120px;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.cam-shirt-display.has-shirt {
    border-color: var(--color-primary);
    box-shadow: 0 0 20px rgba(0,70,173,0.25);
}
.cam-shirt-img-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cam-shirt-img {
    width: 80px; height: 80px; object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
}
.cam-shirt-img.is-hidden { display: none; }
@keyframes cam-shirt-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cam-shirt-img.is-animating { animation: cam-shirt-in 0.3s ease forwards; }
.cam-shirt-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.09em; color: #fff; text-align: center;
    max-width: 120px; line-height: 1.3;
}

/* Guess wrap: input + flag button */
.cam-guess-wrap {
    flex: 1; min-width: 0; position: relative;
    display: flex; align-items: center; gap: 8px;
}
.cam-guess-form { flex: 1; position: relative; }
.cam-guess-input {
    width: 100%; background: rgba(255,255,255,0.07);
    border: 1.5px solid rgba(255,255,255,0.18);
    border-radius: var(--border-radius-sm);
    padding: 13px 16px; color: var(--color-text);
    font-size: var(--font-size-base); font-family: inherit; outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.cam-guess-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,70,173,0.2); }
.cam-guess-input:disabled { opacity: 0.4; cursor: not-allowed; }
.cam-guess-input::placeholder { color: var(--color-text-secondary); }

/* Flag surrender button */
.cam-surrender-flag {
    flex-shrink: 0; width: 40px; height: 40px;
    border-radius: var(--border-radius-sm);
    border: 1.5px solid rgba(192,0,42,0.5);
    background: rgba(192,0,42,0.12); color: #C0002A;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.cam-surrender-flag:hover { background: rgba(192,0,42,0.25); border-color: #C0002A; transform: scale(1.08); }
.cam-surrender-flag:active { transform: scale(0.96); }

/* Skip club button — white/neutral so it stands out against the dark blue bg */
.cam-skip-btn {
    flex-shrink: 0;
    position: relative;
    width: 40px; height: 40px;
    border-radius: var(--border-radius-sm);
    border: 1.5px solid rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.14);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s, opacity 0.2s;
}
.cam-skip-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.28);
    border-color: #fff;
    transform: scale(1.08);
}
.cam-skip-btn:active:not(:disabled) { transform: scale(0.96); }
.cam-skip-btn:disabled,
.cam-skip-btn.is-depleted {
    opacity: 0.35;
    cursor: not-allowed;
}
.cam-skip-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 8px;
    background: #fff;
    color: #0a1628;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border: 1.5px solid rgba(5,13,24,0.9);
}

/* Suggestions */
.cam-suggestion-name { font-weight: 500; }
.cam-suggestion-nick { margin-left: 6px; font-size: var(--font-size-xs); color: var(--color-text-secondary); font-style: italic; }

/* Reveal section — hidden by default, shown only after surrender */
.cam-reveal-section {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    width: 100%;
}
.cam-reveal-section.is-visible {
    display: flex;
}
.cam-reveal-btn {
    padding: 12px 32px; background: #C0002A; border: none;
    border-radius: var(--border-radius-sm); color: #fff;
    font-size: var(--font-size-base); font-weight: 700; letter-spacing: 0.06em;
    cursor: pointer; transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(192,0,42,0.35);
}
.cam-reveal-btn:hover { background: #a0001f; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(192,0,42,0.5); }
.cam-reveal-btn:active { transform: translateY(0); }
.cam-reveal-hint {
    font-size: var(--font-size-sm); color: rgba(255,255,255,0.75);
    text-align: center; min-height: 1.4em; font-style: italic;
}

/* Choice modal */
.cam-choice-card {
    display: flex; flex-direction: column; gap: var(--spacing-md);
    max-width: 340px; width: 90%; background: rgba(5,13,24,0.97);
    border: 1.5px solid rgba(0,70,173,0.45); border-radius: var(--border-radius-md);
    padding: var(--spacing-xl); backdrop-filter: blur(12px);
}
.cam-choice-title { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-text); text-align: center; margin: 0; }
.cam-choice-player { text-align: center; font-size: var(--font-size-base); color: #22c55e; font-weight: 700; margin: 0; }
.cam-choice-buttons { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); justify-content: center; }
.cam-choice-btn {
    padding: 10px 24px; border: 1.5px solid rgba(0,70,173,0.4);
    border-radius: var(--border-radius-sm); background: rgba(0,70,173,0.15);
    color: var(--color-text); font-size: var(--font-size-base);
    font-weight: 700; letter-spacing: 0.06em; cursor: pointer; transition: var(--transition); min-width: 80px;
}
.cam-choice-btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; transform: translateY(-2px); }

/* Mobile (<480px) */
@media (max-width: 479px) {
    .cam-page { max-width: 100%; padding: var(--spacing-sm); gap: var(--spacing-sm); }
    .cam-pitch { padding: 6px; gap: 3px; }
    .cam-card-shirt-wrap { width: 48px; height: 48px; }
    .cam-card-question { font-size: 18px; }
    .cam-card-name, .cam-card-pos { font-size: 8px; }
    .cam-card-name { max-width: 50px; }
    .cam-input-row { flex-direction: column; align-items: stretch; }
    .cam-shirt-display { min-width: unset; align-self: center; padding: 12px 24px; }
    .cam-shirt-img { width: 80px; height: 80px; }
    .cam-guess-wrap { width: 100%; }
    #cam-toast-container { bottom: 12px; right: 12px; max-width: 260px; }
}

/* Tablet (480–767px) */
@media (min-width: 480px) and (max-width: 767px) {
    .cam-page { max-width: 480px; }
    .cam-card-shirt-wrap { width: 58px; height: 58px; }
    .cam-card-name, .cam-card-pos { font-size: 10px; }
    .cam-card-name { max-width: 62px; }
}

/* Desktop (≥768px): simple approach — keep the pitch's natural
   aspect-ratio (like mobile), just cap its height using vh units so it
   never needs more than ~78% of the viewport height regardless of
   screen size. No flex restructuring of .cam-page/body — that broke
   the rest of the page layout (footer got pushed up). */
@media (min-width: 768px) {
    .cam-page {
        max-width: 480px;
        margin: 0 auto;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-lg);
    }
    .cam-pitch {
        aspect-ratio: 7 / 10;
        max-height: 78vh;
        width: auto;
        margin: 0 auto;
        padding: 8px;
        gap: 4px;
    }
    .cam-card-shirt-wrap { width: 52px; height: 52px; }
    .cam-card-question   { font-size: 18px; }
    .cam-card-player-icon { width: 26px; height: 26px; }
    .cam-card-pos  { font-size: 9px; }
    .cam-card-name { font-size: 9px; max-width: 56px; }
    .cam-shirt-display { min-width: 110px; padding: 8px 12px; justify-content: center; }
    .cam-shirt-img { width: 64px; height: 64px; }
    .cam-shirt-label { font-size: 9px; max-width: 110px; }
    .cam-guess-input { padding: 10px 14px; font-size: var(--font-size-base); }
    .cam-surrender-flag { width: 38px; height: 38px; }
    .cam-skip-btn { width: 38px; height: 38px; }
}

/* Taller screens → bigger cards (more vh available means aspect-ratio
   naturally produces a wider pitch too) */
@media (min-width: 768px) and (min-height: 900px) {
    .cam-card-shirt-wrap { width: 64px; height: 64px; }
    .cam-card-question   { font-size: 22px; }
    .cam-card-player-icon { width: 32px; height: 32px; }
    .cam-card-pos  { font-size: 10px; }
    .cam-card-name { font-size: 10px; max-width: 66px; }
    .cam-shirt-img { width: 80px; height: 80px; }
}

@media (min-width: 768px) and (min-height: 1100px) {
    .cam-card-shirt-wrap { width: 76px; height: 76px; }
    .cam-card-question   { font-size: 26px; }
    .cam-card-player-icon { width: 38px; height: 38px; }
    .cam-card-pos  { font-size: 11px; }
    .cam-card-name { font-size: 11px; max-width: 78px; }
    .cam-shirt-img { width: 96px; height: 96px; }
}

/* Large desktop width — slightly wider container */
@media (min-width: 1280px) {
    .cam-page { max-width: 520px; }
}

/* ==========================================================
   RACHA PERFECTA
   Agregar al final de style.css. Reutiliza las variables y
   clases existentes (impostor-intro-*, play-button, panel-title,
   modal-backdrop/modal-card) para mantener consistencia visual.
   ========================================================== */

.racha-page {
    display: flex;
    justify-content: center;
}

.racha-layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    width: 100%;
    max-width: 34rem;
    align-items: center;
}

/* Desktop: panel + aside lado a lado. El breakpoint tiene que coincidir
   con el que usa racha.js (matchMedia '(min-width: 900px)') para decidir
   si la tabla se abre en el aside o en el modal. */
@media (min-width: 56.25rem) {
    .racha-layout {
        flex-direction: row;
        align-items: flex-start;
        max-width: 62rem;
        justify-content: center;
    }
}

.racha-panel {
    width: min(34rem, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    flex-shrink: 0;
    /* .trajectory-panel trae de base el azul brillante (--color-card-bg),
       que se confunde con el borde celeste de la 3ra fila. Lo piso con
       un tono mas neutro y plano solo aca, sin tocar el resto de los
       juegos que comparten .trajectory-panel. */
    background: var(--color-bg-darker);
    border-color: var(--primary-alpha-30);
}

/* Aside de tabla completa: oculto en mobile (ahi se usa el modal) */
.racha-tabla-aside {
    display: none;
}

@media (min-width: 56.25rem) {
    .racha-tabla-aside {
        display: block;
        width: 20rem;
        flex-shrink: 0;
        position: sticky;
        top: var(--spacing-lg);
        background: var(--color-bg-darker);
        border: var(--border-width) solid var(--color-accent);
        border-radius: var(--border-radius-md);
        padding: var(--spacing-lg);
    }
}

.racha-tabla-aside-placeholder {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-align: center;
    margin: var(--spacing-md) 0;
}

.racha-headline {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.racha-modo-switch {
    display: flex;
    gap: var(--spacing-sm);
}

.racha-metrica-banner {
    background: var(--color-secondary);
    border: 0.125rem solid var(--color-accent);
    border-radius: 999rem;
    padding: 0.5rem 1.25rem;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    margin: 0;
}

.racha-metrica-banner strong {
    color: var(--color-accent);
}

/* ============ TABLA (3 filas arrastrables) ============
   Cada slot es una fila real en flujo normal (no posicionamiento
   absoluto), así el alto nunca puede hacer que una fila tape a otra. */
.racha-podio {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
    max-width: 30rem;
    margin: 0 auto;
}

.racha-slot {
    position: relative;
    min-height: 4rem;
    border: var(--border-width) dashed var(--primary-alpha-30);
    border-radius: var(--border-radius-md);
    display: flex;
}

.racha-slot-label {
    position: absolute;
    top: 50%;
    left: -0.5rem;
    transform: translate(-50%, -50%);
    background: var(--color-primary);
    color: var(--color-secondary);
    font-weight: 800;
    font-size: var(--font-size-sm);
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.25rem 0.625rem var(--black-alpha-30);
    flex-shrink: 0;
    z-index: 2;
}

/* Mismo tricolor que el borde de la fila: 1° rojo, 2° blanco, 3° celeste */
.racha-slot[data-slot="1"] .racha-slot-label { background: var(--color-accent); color: var(--color-secondary); }
.racha-slot[data-slot="2"] .racha-slot-label { background: var(--color-secondary); color: var(--color-primary); }
.racha-slot[data-slot="3"] .racha-slot-label { background: #4aa8ff; color: var(--color-bg-darker); }

.racha-card {
    width: 100%;
    background: var(--color-secondary);
    border-radius: var(--border-radius-md);
    border: 0.1875rem solid var(--color-accent);
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    cursor: grab;
    user-select: none;
    touch-action: none;
    box-shadow: 0 0.4rem 1rem var(--black-alpha-30);
    z-index: 1;
    /* transicion suave para que el swap se note (FLIP animation) */
    transition: transform 0.28s ease;
}

/* Borde tricolor segun la posicion actual (no segun el torneo): la
   fila que este en el 1er lugar siempre es roja, la del 2do blanca,
   la del 3ro celeste, sin importar que campana este ahi adentro. */
.racha-slot[data-slot="1"] .racha-card { border-color: var(--color-accent); }
.racha-slot[data-slot="2"] .racha-card { border-color: var(--color-secondary); }
.racha-slot[data-slot="3"] .racha-card { border-color: #4aa8ff; }

.racha-card-info {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.racha-card-rivales {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    font-size: clamp(0.62rem, 1.6vw, 0.72rem);
    color: var(--color-text-secondary);
}

/* Mientras se arrastra, la fila pasa a position:fixed (controlado por
   JS) para poder flotar libre por encima de todo lo demás. */
.racha-card.dragging {
    position: fixed;
    cursor: grabbing;
    z-index: 999;
    box-shadow: 0 1rem 2.125rem rgba(0, 0, 0, 0.55);
    transform: scale(1.03);
    pointer-events: none;
    transition: none;
}

.racha-card-label {
    font-weight: 700;
    font-size: clamp(0.8rem, 2.2vw, 0.95rem);
    line-height: 1.25;
    color: var(--color-primary);
}

.racha-podio .racha-card.result-ok {
    border-color: var(--color-success) !important;
    box-shadow: 0 0 0 0.1875rem rgba(0, 212, 170, 0.35);
}

.racha-podio .racha-card.result-mal {
    border-color: #6b7280 !important;
    box-shadow: none;
}

.racha-card-real {
    display: none;
    font-size: clamp(0.68rem, 1.8vw, 0.8rem);
    color: var(--color-accent);
    font-weight: 800;
    margin-top: 0.15rem;
}

.racha-card.revealed .racha-card-real {
    display: block;
}

.racha-ver-btn {
    flex-shrink: 0;
    background: var(--color-accent);
    border: none;
    color: var(--color-secondary);
    font-size: clamp(0.62rem, 1.5vw, 0.7rem);
    padding: 0.35rem 0.8rem;
    border-radius: 999rem;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}

.racha-ver-btn:hover {
    background: #94091f;
}

@media (max-width: 30rem) {
    .racha-card {
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 1.75rem;
    }
    .racha-card-info,
    .racha-card-rivales {
        text-align: left;
        flex: 1 1 100%;
    }
    .racha-card-rivales {
        order: 3;
    }
    .racha-ver-btn {
        order: 2;
    }
}

.racha-result-msg {
    text-align: center;
    font-size: var(--font-size-lg);
    font-weight: 700;
    min-height: 1.4em;
    margin: 0;
}

.racha-result-msg.racha-result-perfecto {
    color: var(--color-success);
}

.racha-result-msg.racha-result-mal {
    color: var(--color-error);
}

.racha-result-msg.racha-result-parcial {
    color: var(--color-secondary);
    text-shadow: 0 0 0.5rem rgba(192, 12, 30, 0.6);
}

.racha-confirm-btn {
    max-width: 20rem;
}

.racha-confirm-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

/* ============ MODAL: tabla completa ============ */
.racha-tabla-modal-card {
    width: min(30rem, calc(100vw - 2rem));
    position: relative;
}

.racha-tabla-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
    font-family: 'Montecatini Pro Stretto Ultra', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.racha-tabla-wrap {
    overflow-x: auto;
}

table.racha-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-xs);
}

table.racha-tabla th,
table.racha-tabla td {
    padding: 0.4rem 0.3rem;
    text-align: center;
    white-space: nowrap;
}

table.racha-tabla th {
    color: var(--color-text-secondary);
    font-weight: 600;
    border-bottom: 0.0625rem solid var(--primary-alpha-30);
}

table.racha-tabla td.equipo {
    text-align: left;
}

table.racha-tabla tr.destacado {
    background: rgba(192, 12, 48, 0.25);
    font-weight: 700;
}

table.racha-tabla td.tapado {
    color: var(--color-text-secondary);
    font-style: italic;
}

table.racha-tabla td.metrica-col {
    color: var(--color-secondary);
    font-weight: 800;
}

@media (max-width: 30rem) {
    .racha-panel {
        padding: var(--spacing-md);
    }
}