:root {
    --font-family: 'Poppins', sans-serif;
    --color-background: #121826;
    --color-surface: #1E293B;
    --color-border: #475569;
    --color-text-primary: #F1F5F9;
    --color-text-secondary: #94A3B8;
    --color-accent: #38BDF8;
    --color-accent-hover: #7DD3FC;
    --color-correct: #16A34A;
    --color-correct-surface: rgba(22, 163, 74, 0.15);
    --color-incorrect: #DC2626;
    --color-incorrect-surface: rgba(220, 38, 38, 0.15);
    --border-radius: 8px;
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

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

body {
    font-family: var(--font-family);
    color: var(--color-text-primary);
    padding: 2rem 1rem;
    background-color: var(--color-background);
    background-image: linear-gradient(rgba(18, 24, 38, 0.85), rgba(18, 24, 38, 0.85)), url('images/padel-court.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

.container { width: 100%; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem; }
header { text-align: center; }
header h1 { font-size: 2.5rem; font-weight: 600; margin-bottom: 0.25rem; }
header p { color: var(--color-text-secondary); font-size: 1.1rem; }
#game-area { max-width: 700px; margin: 0 auto 1.5rem auto; }
#guess-form { display: flex; gap: 0.75rem; max-width: 500px; margin: 0 auto; }
#player-input { flex-grow: 1; padding: 0.75rem 1rem; font-size: 1rem; background-color: var(--color-surface); color: var(--color-text-primary); border: 1px solid var(--color-border); border-radius: var(--border-radius); transition: all 0.2s; }
#player-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3); }
button { padding: 0.75rem 1.5rem; font-family: var(--font-family); font-size: 1rem; font-weight: 500; background-color: var(--color-accent); color: var(--color-background); border: none; border-radius: var(--border-radius); cursor: pointer; transition: all 0.2s; }
button:hover { background-color: var(--color-accent-hover); }
button:disabled { background-color: var(--color-border); cursor: not-allowed; }
.autocomplete-container { position: relative; flex-grow: 1; }
.autocomplete-items { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 100; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--border-radius); box-shadow: var(--shadow-md); max-height: 300px; overflow-y: auto; }
.autocomplete-items div { padding: 0.75rem 1rem; cursor: pointer; display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid var(--color-border); transition: background-color 0.2s; }
.autocomplete-items div:last-child { border-bottom: none; }
.autocomplete-items div:hover { background-color: rgba(56, 189, 248, 0.1); }

/* NUEVO: Estilo para las sugerencias deshabilitadas */
.autocomplete-items div.disabled {
    color: var(--color-text-secondary);
    cursor: not-allowed;
    text-decoration: line-through;
}
.autocomplete-items div.disabled:hover {
    background-color: transparent;
}

.autocomplete-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.results-container { background-color: var(--color-surface); border-radius: var(--border-radius); overflow: hidden; }
#results-table { width: 100%; border-collapse: collapse; border-spacing: 0; }
#results-table th, #results-table td { padding: 1rem; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border); }
#results-table th:last-child, #results-table td:last-child { border-right: none; }
#results-table tr:last-child td { border-bottom: none; }
#results-table td { transition: background-color 0.3s ease, color 0.3s ease, opacity 0.6s ease-out, transform 0.6s ease-out; }
#results-table th { background-color: rgba(0,0,0,0.15); font-weight: 500; font-size: 0.8rem; text-transform: uppercase; color: var(--color-text-secondary); }
#results-table th:first-child, #results-table td:first-child { text-align: left; }
.result-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.player-cell-content { display: flex; align-items: center; gap: 1rem; color: var(--color-text-primary) !important; }
.country-flag {
    width: 35px; /* Ancho de la bandera */
    height: auto; /* Altura automática para mantener la proporción */
    border-radius: 3px; /* Bordes ligeramente redondeados */
    box-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Sombra sutil para darle profundidad */
    vertical-align: middle; /* Asegura que se alinee bien si hay texto junto a ella */
}
.correct { background-color: var(--color-correct-surface); color: var(--color-correct); font-weight: 600; }
.incorrect { background-color: var(--color-incorrect-surface); color: var(--color-incorrect); font-weight: 600; }
.not-available { background-color: #AAAAAA; color: #444444; font-weight: 600; }
.player-cell.correct, .player-cell.incorrect, .player-cell.not-available { background-color: transparent; }
.numerical-cell { font-size: 1.1rem; font-weight: 600; }
.numerical-cell .arrow { display: inline-block; margin-left: 0.5rem; }
.cell-hidden { opacity: 0; transform: translateY(20px); }
#win-message { text-align: center; padding: 2rem; background-color: var(--color-correct-surface); border: 1px solid var(--color-correct); border-radius: var(--border-radius); margin-top: 1rem; }
#win-message h2 { color: var(--color-correct); margin-bottom: 0.5rem; }
#win-message-attempts { font-size: 1.2rem; font-weight: 500; color: var(--color-text-primary); margin-bottom: 1rem; }
.hidden { display: none; }
footer { text-align: center; color: var(--color-text-secondary); font-size: 0.9rem; padding-top: 1rem; }
.api-error-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
    padding: 2rem;
}

.api-error-screen h2 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 1rem;
}

.api-error-screen p {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    max-width: 500px;
    line-height: 1.7;
}

footer {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    padding-top: 2rem;
    margin-top: 2rem;
    border-top: 1px solid var(--color-border);
}

.footer-api-link {
    margin-bottom: 1rem;
}

.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem; /* Espacio entre iconos */
}

.social-links a {
    color: var(--color-text-secondary);
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    color: var(--color-accent);
    transform: translateY(-3px); /* Efecto de "levantar" el icono */
}

.social-icon {
    width: 24px;
    height: 24px;
}

.header-logo{
  width: 120px;
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

.header-title{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.header-logo-inline{
  width: 250px;
  height: 250px;
  object-fit: contain;
}

@media (max-width: 768px) {
    /* Reducimos el padding general para dar más espacio */
    body {
        padding: 1rem 0.5rem;
    }

    /* Ajustamos los tamaños de fuente del encabezado */
    header h1 {
        font-size: 2rem;
    }
    header p {
        font-size: 1rem;
    }

    /* Hacemos que el formulario use todo el ancho disponible */
    #game-area {
        max-width: 100%;
        margin-bottom: 1rem;
    }

    /* LA CLAVE PARA LA TABLA: Permitimos el desplazamiento horizontal */
    .results-container {
        overflow-x: auto; /* Muestra una barra de scroll si la tabla es más ancha que el contenedor */
    }

    /* Reducimos el tamaño de la fuente y el padding dentro de la tabla para que quepa mejor */
    #results-table th, #results-table td {
        padding: 0.75rem 0.5rem; /* Menos padding */
        font-size: 0.9rem; /* Fuente más pequeña */
        /* Forzamos a que el texto no se rompa en varias líneas para mantener el layout limpio */
        white-space: nowrap; 
    }

    /* Hacemos la foto del jugador un poco más pequeña */
    .result-photo {
        width: 35px;
        height: 35px;
    }

    /* Reducimos el tamaño de la fuente en celdas numéricas */
    .numerical-cell {
        font-size: 1rem;
    }
}