/* ==========================================================================
   HOJA DE ESTILOS ESPECÍFICA PARA: PERSONAJE (GUESS CHARACTER)
   ========================================================================== */

/* =========================================
   1. CONTENEDOR PRINCIPAL
   ========================================= */
.container-character {
    width: 100%;
    max-width: 1600px;
    /* Ancho extra para la tabla grande */
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
    z-index: 5;
}

/* =========================================
   2. TABLA DE RESULTADOS (SCROLL HORIZONTAL)
   ========================================= */

/* Wrapper que permite el scroll lateral suave */
.table-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    /* Marco doble de madera */
    margin-bottom: 25px;

    /* Scrollbar personalizado */
    scrollbar-width: thin;
    scrollbar-color: #ffb300 #3e2723;
}

/* Webkit Scrollbar */
.table-scroll-wrapper::-webkit-scrollbar {
    height: 12px;
}

.table-scroll-wrapper::-webkit-scrollbar-track {
    background: #3e2723;
    border-radius: 0 0 12px 12px;
}

.table-scroll-wrapper::-webkit-scrollbar-thumb {
    background: linear-gradient(to right, #ffb300, #ffca28);
    border-radius: 10px;
    border: 2px solid #3e2723;
}

/* Estructura de la Tabla */
#results {
    width: 100%;
    min-width: 1300px;
    border-collapse: separate; /* Permite espacio entre celdas */
    border-spacing: 8px 12px; /* Espacio horizontal y vertical entre "cartas" */
    table-layout: fixed;
    margin-top: -10px;
}

/* --- CABECERAS (THEAD) --- */
#results th {
    background: linear-gradient(to bottom, #3e2723, #2d201c);
    color: #ffca28;
    /* Dorado */
    font-family: 'Pirata One', cursive;
    font-size: 1.3rem;
    padding: 15px 10px;
    text-transform: uppercase;
    letter-spacing: 1px;

    /* Bordes Consistentes */
    border: 1px solid #795548;
    background: linear-gradient(to bottom, #3e2723, #2d201c); /* Restaurado fondo oscuro */
    border-bottom: 4px solid #795548;

    position: sticky;
    top: 0;
    z-index: 10;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

    /* Ancho dinámico */
    width: auto;
}

/* --- CELDAS (TBODY) --- */
#results td {
    padding: 12px 8px;
    vertical-align: middle;
    text-align: center;
    color: #3e2723;
    font-weight: 500;
    font-size: 1rem;

    /* Estilo "Carta" para cada celda */
    border: 2px solid #5d4037;
    border-radius: 10px;
    background: #fff8e1; /* Fondo pergamino en lugar de blanco puro */
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
    position: relative; /* Para posicionar flechas o tooltips */
    overflow: hidden; /* Mantiene el border-radius */

    /* Ancho dinámico */
    width: auto;
    
    /* Alto fijo para todas las filas */
    height: 100px !important;
    max-height: 100px;
}

/* --- AJUSTES DE ANCHO FIJO (Optimización de espacio) --- */

/* Columna 2: IMAGEN */
#results th:nth-child(2),
#results td:nth-child(2) {
    width: 80px;
    width: 80px;
    white-space: nowrap;
}

/* Columna de FOTO: Sin padding para que ocupe todo */
#results td:nth-child(2) {
    padding: 0;
    overflow: hidden; /* Asegura que la imagen no se salga del radio */
}

/* Columna 3: GÉNERO (Ajuste a 80px para que quepa el título completo) */
#results th:nth-child(3),
#results td:nth-child(3) {
    width: 80px;
    white-space: nowrap;
}

/* Haki y otras columnas deben permitir el salto de línea para apilar el texto */
#results th,
#results td {
    white-space: normal;
    line-height: 1.2;
}

/* --- ESTADOS DE RESULTADO (COLORES) --- */
#results td.correct {
    background-color: rgba(46, 125, 50, 0.9) !important;
    color: white !important;
    border-color: #2e7d32;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

#results td.partial {
    background-color: rgba(239, 108, 0, 0.9) !important;
    color: white !important;
    border-color: #ef6c00;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

#results td.incorrect {
    background-color: rgba(198, 40, 40, 0.9) !important;
    color: white !important;
    border-color: #c62828;
}

#results td.unknown {
    background-color: rgba(97, 97, 97, 0.9) !important;
    color: #e0e0e0 !important;
}

/* Foto en tabla */
.character-photo {
    width: 100%;
    height: 100%;
    min-height: 80px; /* Asegurar altura mínima */
    object-fit: cover;
    object-position: top center;
    border-radius: 0; /* Ya no necesita radio propio, usa el de la celda */
    border: none;
    display: block;
    margin: 0;
}

/* --- FLECHAS DE PISTA MEJORADAS (EDAD/ALTURA/RECOMPENSA) --- */
td.hint-up, td.hint-down {
    position: relative;
}

td.hint-up::after, td.hint-down::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3.5rem; /* Flecha grande */
    font-weight: bold;
    opacity: 0.4; /* Semitransparente para ver el texto debajo */
    pointer-events: none;
    font-family: sans-serif;
    line-height: 1;
    z-index: 2;
}

td.hint-up::after {
    content: "\2B06\FE0E";
    color: #3e2723; /* Flecha oscura para contraste */
    opacity: 0.3; /* Más sutil para que no moleste al texto */
}

td.hint-down::after {
    content: "\2B07\FE0E";
    color: #3e2723; /* Flecha oscura para contraste */
    opacity: 0.3;
}

/* El texto debe estar por encima de la flecha */
/* Esto requiere que el JS envuelva el texto en un span con z-index mayor */
.cell-content {
    position: relative;
    z-index: 10;
    display: inline-block;
    width: 100%;
}

/* =========================================
   3. LEYENDA (ESTILO BARRA DE ESTADO)
   ========================================= */
.game-legend-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 25px;
    padding: 12px 30px;
    background: linear-gradient(to bottom, #3e2723, #211512);
    border: 2px solid #ffb300;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffecb3;
    text-shadow: 1px 1px 0 #000;
}

/* Modificamos el color-box general para que sea un pelin mas grande en la leyenda */
.game-legend-container .color-box {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
}

.color-box.correct {
    background: #2e7d32;
    box-shadow: 0 0 5px #2e7d32;
}

.color-box.partial {
    background: #ef6c00;
    box-shadow: 0 0 5px #ef6c00;
}

.color-box.incorrect {
    background: #c62828;
    box-shadow: 0 0 5px #c62828;
}

.color-box.unknown {
    background: #757575;
}

/* Iconos de flecha en la leyenda */
/* Estilos compartidos para flechas en AMBAS leyendas (Explicativa y Footer) */
/* Estilos compartidos BASE para flechas en AMBAS leyendas */
.color-legend .arrow-icon,
.game-legend-container .arrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3e2723; /* Flecha oscura */
    background-color: rgba(198, 40, 40, 0.9); /* Rojo 'Incorrecto' */
    border: 1px solid #c62828;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    border-radius: 6px; /* Radio similar a .color-box */
    
    font-weight: bold;
    font-family: sans-serif;
    line-height: 1;
    flex-shrink: 0;
}

.arrow-icon.up::before {
    content: "\2B06\FE0E"; 
}

.arrow-icon.down::before {
    content: "\2B07\FE0E"; 
}

/* 1. Flechas en la barra inferior (Footer) */
.game-legend-container .arrow-icon {
    width: 26px;
    height: 26px;
    font-size: 1.1rem;
}

/* 2. Flechas en la lista 'Cómo jugar' (Más grandes para igualar a .color-box de 30px + borde) */
.color-legend .arrow-icon {
    width: 32px;
    height: 32px;
    font-size: 1.4rem;
    margin-right: 10px;
    border-width: 2px; /* Borde más grueso para igualar estilo de cajas */
}

/* =========================================
   4. BOTONES DE DIFICULTAD
   ========================================= */
.levels-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
}

.btn-level {
    background: rgba(255, 253, 231, 0.9);
    color: #3e2723;
    border: 2px solid #8d6e63;
    padding: 10px 25px;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Pirata One', cursive;
    font-size: 1.3rem;
    transition: all 0.2s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.btn-level:hover {
    transform: translateY(-3px);
    background: #fff;
    border-color: #ffb300;
    box-shadow: 0 0 15px rgba(255, 179, 0, 0.4);
}

/* =========================================
   5. RESPONSIVE ESPECÍFICO (MÓVIL)
   ========================================= */
@media (max-width: 600px) {
    .container-character {
        padding: 0 10px;
    }

    .game-legend-container {
        width: 100%;
        border-radius: 15px;
        padding: 15px;
        gap: 12px;
    }

    .legend-item {
        font-size: 0.85rem;
        width: 45%;
    }

    .info-game {
        padding: 20px;
    }

    .color-legend {
        grid-template-columns: 1fr;
    }

    .btn-level {
        padding: 8px 15px;
        font-size: 1.1rem;
    }

    /* Flechas de tabla GRANDES en móvil */
    td.hint-up::after, td.hint-down::after {
        font-size: 4.5rem; /* Más grandes en móvil */
        opacity: 0.25; /* Un poco menos opacas para no tapar tanto si son enormes */
    }
}

/* =========================================
   6. ANIMACIONES (MEJORADAS - SMOOTH 3D)
   ========================================= */

@keyframes cardFlipIn {
    0% {
        opacity: 0;
        /* Empieza girada 90 grados y un poco más pequeña (lejos) */
        transform: perspective(1000px) rotateY(90deg) scale(0.95);
    }
    60% {
        opacity: 1;
        /* Efecto rebote: se pasa un poquito (-5deg) y crece un poco (1.02) */
        transform: perspective(1000px) rotateY(-5deg) scale(1.02);
    }
    100% {
        opacity: 1;
        /* Termina plana y en tamaño original */
        transform: perspective(1000px) rotateY(0) scale(1);
    }
}

/* Aplicar animación a las celdas */
tr.fade-in td {
    /* Nombre de la animación */
    animation-name: cardFlipIn;
    
    /* Duración base (0.8s da tiempo a apreciar el efecto smooth) */
    animation-duration: 0.8s;
    
    /* El modo 'backwards' asegura que antes de empezar sea invisible */
    animation-fill-mode: both; 
    
    /* CURVA MÁGICA: Empieza suave, acelera y frena con elegancia */
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* Optimización CLAVE para móviles: */
    backface-visibility: hidden; /* Oculta la parte trasera para evitar parpadeos */
    will-change: transform, opacity; /* Prepara la GPU del móvil */
    transform-origin: center center;
}

/* Retardo escalonado LENTO (0.3s) */
tr.fade-in td:nth-child(1) { animation-delay: 0.3s; }
tr.fade-in td:nth-child(2) { animation-delay: 0.6s; }
tr.fade-in td:nth-child(3) { animation-delay: 0.9s; }
tr.fade-in td:nth-child(4) { animation-delay: 1.2s; }
tr.fade-in td:nth-child(5) { animation-delay: 1.5s; }
tr.fade-in td:nth-child(6) { animation-delay: 1.8s; }
tr.fade-in td:nth-child(7) { animation-delay: 2.1s; }
tr.fade-in td:nth-child(8) { animation-delay: 2.4s; }
tr.fade-in td:nth-child(9) { animation-delay: 2.7s; }
tr.fade-in td:nth-child(10) { animation-delay: 3.0s; }
tr.fade-in td:nth-child(11) { animation-delay: 3.3s; }

@media (max-width: 1024px) {
    tr.fade-in td:nth-child(1) { animation-delay: 0.5s; }
    tr.fade-in td:nth-child(2) { animation-delay: 1.0s; }
    tr.fade-in td:nth-child(3) { animation-delay: 1.5s; }
    tr.fade-in td:nth-child(4) { animation-delay: 2.0s; }
    tr.fade-in td:nth-child(5) { animation-delay: 2.5s; }
    tr.fade-in td:nth-child(6) { animation-delay: 3.0s; }
    tr.fade-in td:nth-child(7) { animation-delay: 3.5s; }
    tr.fade-in td:nth-child(8) { animation-delay: 4.0s; }
    tr.fade-in td:nth-child(9) { animation-delay: 4.5s; }
    tr.fade-in td:nth-child(10) { animation-delay: 5.0s; }
    tr.fade-in td:nth-child(11) { animation-delay: 5.5s; }
}