/* styles.css - Estilos completos para el Juego de Mesa (MODIFICADO) */

/* --- Estilos Generales --- */
body {
    font-family: 'Arial', sans-serif;
    background-color: #e0f2f7; /* Un fondo azul claro suave */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* Centrar game-container horizontalmente */
    align-items: center; /* Centrar game-container verticalmente */
    min-height: 100vh;
    color: #333;
}

/* --- Contenedor Principal del Juego (MODIFICADO) --- */
.game-container {
    display: flex; /* Cambiado a flex */
    flex-direction: row; /* Colocar elementos lado a lado */
    align-items: flex-start; /* Alinear paneles y tablero en la parte superior */
    justify-content: center; /* Centrar el grupo si hay espacio extra */
    gap: 20px; /* Espacio entre paneles y tablero */
    padding: 20px;
    /* max-width: 1200px; /* Comentado o eliminado para permitir expansión */
    width: 95%; /* Ocupar la mayor parte del ancho de la ventana */
    /* max-width: 1600px; /* Opcional: un ancho máximo más grande */
}

/* --- Tablero de Juego (MODIFICADO) --- */
#board-container {
    position: relative; /* Necesario para posicionar espacios y fichas absolutamente */
    width: 900px;  /* Ancho fijo para el tablero */
    height: 800px; /* Alto fijo para el tablero */
    background-image: url('images/background_board.png'); /* Imagen de fondo del tablero */
    background-size: cover;
    background-position: center;
    border: 5px solid #4a7c59; /* Borde verde oscuro */
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    /* margin-bottom: 20px; /* Eliminado margen inferior */
    flex-shrink: 0; /* Evitar que el tablero se encoja si no hay espacio */
}

.space {
   position: absolute;
    width: 70px;
    height: 70px;
    border: 2px solid #555;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    transition: transform 0.2s ease, border-color 0.3s, box-shadow 0.3s; /* Añadida transición para borde/sombra */
    overflow: hidden; /* Para asegurar que la imagen no se salga */
}

.space:hover {
    transform: scale(1.1);
    border-color: #000;
}

.start-space {
    background-color: rgba(144, 238, 144, 0.8); /* Verde claro */
    border-color: darkgreen;
}

.special-space {
    background-color: rgba(255, 215, 0, 0.8); /* Dorado */
    border-color: darkgoldenrod;
    font-weight: bold;
}

.normal-space {
    /* Estilos por defecto ya aplicados en .space */
}

.space-number {
    position: absolute;
    top: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #fff; /* Texto blanco para contrastar */
    background-color: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente para legibilidad */
    padding: 2px 6px;
    border-radius: 10px;
    z-index: 5; /* Asegurar que esté sobre la imagen */
    user-select: none;
}

.space-image {
  width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eee;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    border: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
}


/* --- Fichas de Jugador (Tokens) --- */
.player-token {
    position: absolute; /* Posicionamiento basado en JS */
    width: 80px;   /* Tamaño de la ficha */
    height: 80px;
    border-radius: 50%;
    border: 2px solid black;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    z-index: 10; /* Asegurar que estén sobre las casillas */
    /* backgroundColor y backgroundImage se definen en JS */
    background-size: contain; /* Mostrar avatar completo */
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: white; /* Para número/inicial si no hay avatar */
    text-shadow: 1px 1px 1px black;
    transition: left 0.5s ease-in-out, top 0.5s ease-in-out; /* Animación de movimiento */
}

/* --- Controles y Paneles Laterales (MODIFICADO) --- */
/* Eliminar el contenedor intermedio anterior */
/* .controls-and-info { */
    /* display: none; /* O eliminar completamente este selector */
/* } */

.controls-panel, .info-panel {
    background-color: #ffffff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    border: 1px solid #ccc;
    width: 250px; /* Ancho fijo para paneles laterales */
    flex-shrink: 0; /* Evitar que se encojan */
    /* height: 800px; */ /* Opcional: Fijar altura igual al tablero */
    height: fit-content; /* O dejar que el contenido defina la altura */
    box-sizing: border-box; /* Incluir padding/border en el width */
}

.controls-panel h3, .info-panel h3 {
    margin-top: 0;
    color: #1a237e; /* Azul oscuro */
    border-bottom: 2px solid #7986cb; /* Línea azul claro */
    padding-bottom: 5px;
}

/* Controles (Dado, Guardar/Cargar) */
#roll-dice {
    background-color: #4CAF50; /* Verde */
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    margin-bottom: 10px;
    display: block; /* Ocupar ancho completo del panel */
    width: 100%;
}

#roll-dice:hover:not(:disabled) {
    background-color: #367c39;
}

#roll-dice:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

#dice-result {
    font-weight: bold;
    margin-top: 10px;
    color: #d32f2f; /* Rojo oscuro */
    min-height: 1.2em; /* Evitar saltos de layout */
}

.save-load-buttons button {
    background-color: #1976d2; /* Azul */
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
    margin-top: 10px;
    margin-right: 5px;
}

.save-load-buttons button:hover:not(:disabled) {
    background-color: #115293;
}

.save-load-buttons button:disabled {
    background-color: #bdbdbd;
    cursor: not-allowed;
}


/* Información (Turno, Puntuación) */
#current-player {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #004d40; /* Verde azulado oscuro */
}

#score-display {
    font-size: 14px;
    line-height: 1.6;
}
#score-display .current-turn-indicator {
    color: #d32f2f; /* Rojo para destacar turno actual */
    margin-bottom: 5px;
}
#score-display hr {
    border: 0;
    height: 1px;
    background-color: #ccc;
    margin: 10px 0;
}
#score-display .player-scores-container {
    /* Contenedor para scores individuales */
}
#score-display .player-score-entry {
    margin-bottom: 5px;
    padding: 3px 0;
    border-bottom: 1px dotted #eee; /* Separador sutil */
}
#score-display .player-score-entry:last-child {
    border-bottom: none;
}
#score-display strong {
    color: #1a237e; /* Nombre del jugador en azul */
}
#score-display span {
    margin-left: 8px; /* Espacio entre elementos */
}


/* --- Paneles Emergentes / Modales --- */

/* Estilo base para todos los modales/contenedores superpuestos */
/* (Sin cambios estructurales aquí, siguen siendo fijos) */
.modal-overlay {
    position: fixed; /* Fijado en la ventana */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fondo oscuro semi-transparente */
    display: none; /* Oculto por defecto */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegurar que esté sobre todo lo demás */
    padding: 20px; /* Espacio por si el contenido es grande */
    box-sizing: border-box;
}

/* Contenedor interno del modal (caja blanca) */
.modal-box {
    background-color: #fff;
    padding: 25px 35px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto; /* Scroll si el contenido es muy largo */
    text-align: center;
    border: 1px solid #aaa;
}

.modal-box h3 {
    margin-top: 0;
    color: #1a237e;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.modal-box p {
    margin-bottom: 15px;
    line-height: 1.5;
}

/* Aplicar estilo base a todos los contenedores modales */
#question-container,
#judge-container,
#roll-again-container,
#game-list-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: none; /* Oculto por defecto, JS lo cambia a 'flex' o 'block' */
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
    box-sizing: border-box;
}

/* Cajas internas específicas */
.question-box,
.judge-box,
.roll-again-box,
.game-list-box {
    background-color: #fff;
    padding: 25px 35px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    max-width: 500px; /* Ancho máximo para legibilidad */
    width: 90%;
    max-height: 90vh; /* Limitar altura */
    overflow-y: auto;
    text-align: left; /* Alinear texto a la izquierda dentro de la caja */
    border: 1px solid #aaa;
}

/* Estilos específicos para Preguntas */
.question-box h3 { color: #00695c; } /* Verde azulado */
.question-text { font-size: 18px; margin: 20px 0; }
#answer-area { margin-bottom: 20px; }
.answer-input { width: calc(100% - 20px); padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; }
.tf-button {
    background-color: #e0e0e0;
    border: 1px solid #bdbdbd;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}
.tf-button:hover { background-color: #d1d1d1; }
.tf-button.selected { background-color: #64b5f6; border-color: #1e88e5; color: white; } /* Azul claro para seleccionado */
.submit-button {
    background-color: #5cb85c; /* Verde */
    color: white;
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
    display: block; /* Ocupar ancho */
    width: 100%;
    margin-top: 10px;
}
.submit-button:hover:not(:disabled) { background-color: #449d44; }
.submit-button:disabled { background-color: #ccc; cursor: not-allowed; }
.question-info { font-size: 12px; color: #777; margin-top: 15px; text-align: right; }


/* Estilos específicos para Decisión del Juez */
.judge-box h3 { color: #ad1457; } /* Magenta oscuro */
.judge-box p { margin: 10px 0; line-height: 1.4; }
.judge-box strong { color: #333; }
.judge-buttons { margin-top: 25px; display: flex; justify-content: space-around; }
.judge-button {
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: transform 0.2s;
}
.judge-button:hover { transform: scale(1.05); }
.judge-button.yes { background-color: #4CAF50; color: white; } /* Verde */
.judge-button.no { background-color: #f44336; color: white; } /* Rojo */


/* Estilos específicos para Lanzar de Nuevo */
.roll-again-box h3 { color: #ff8f00; } /* Ámbar */
.roll-again-buttons { margin-top: 20px; display: flex; justify-content: space-evenly; }
.roll-again-button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.3s;
}
.roll-again-button.yes { background-color: #4CAF50; color: white; }
.roll-again-button.no { background-color: #757575; color: white; }
.roll-again-button.yes:hover { background-color: #388e3c; }
.roll-again-button.no:hover { background-color: #515151; }


/* Estilos específicos para Lista de Partidas */
.game-list-box h2 { margin-top: 0; color: #1a237e; text-align: center; }
#game-list-select {
    width: 100%;
    padding: 10px;
    margin: 20px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}
.game-list-buttons { display: flex; justify-content: space-between; margin-top: 15px; }
.game-list-buttons button {
    padding: 10px 18px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.3s;
}
.game-list-buttons button#load-selected-game { background-color: #1976d2; color: white; }
.game-list-buttons button#close-game-list { background-color: #f44336; color: white; }
.game-list-buttons button#load-selected-game:hover:not(:disabled) { background-color: #115293; }
.game-list-buttons button#close-game-list:hover { background-color: #d32f2f; }
.game-list-buttons button:disabled { background-color: #bdbdbd; cursor: not-allowed; }


/* --- Panel Derecho para Opciones de Ruta (MODIFICADO) --- */
/* Este panel sigue siendo fijo, pero ajustamos su posición si es necesario */
#path-choice-display {
    position: fixed;
    top: 50px; /* Ajustar según sea necesario */
    /* Calcular la posición derecha teniendo en cuenta el panel de información */
    /* Si info-panel tiene 250px y game-container tiene padding 20px y gap 20px */
    /* right: calc(250px + 20px + 20px); /* Ejemplo de cálculo */
    right: 20px; /* O un valor fijo simple si funciona bien */
    width: 280px; /* Ancho del panel */
    background-color: rgba(255, 255, 240, 0.95); /* Marfil casi opaco */
    border: 2px solid #8b4513; /* Marrón silla */
    border-radius: 8px;
    padding: 15px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
    z-index: 500; /* Sobre el tablero pero bajo modales */
    display: none; /* Oculto por defecto, JS lo muestra */
    max-height: calc(100vh - 100px); /* Evitar que sea demasiado alto */
    overflow-y: auto;
    box-sizing: border-box;
}

#path-choice-display h3 {
    margin-top: 0;
    color: #5d4037; /* Marrón oscuro */
    border-bottom: 1px solid #a1887f; /* Marrón claro */
    padding-bottom: 8px;
    font-size: 16px;
}

#path-choice-display p {
    font-size: 14px;
    margin-bottom: 15px;
}

#path-choice-display button {
    display: block; /* Un botón por línea */
    width: 100%;
    padding: 10px;
    margin-bottom: 8px;
    background-color: #ffe0b2; /* Naranja pálido */
    border: 1px solid #e65100; /* Naranja oscuro */
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    transition: background-color 0.2s, border-color 0.2s;
}

#path-choice-display button:hover {
    background-color: #ffcc80; /* Naranja más intenso */
    border-color: #bf360c;
}

#path-choice-display button:last-child {
    margin-bottom: 0;
}

/* --- Estilos para resaltar caminos posibles (NUEVO) --- */
@keyframes flash-border {
  0%, 100% {
    border-color: #555; /* Color original del borde */
    box-shadow: none; /* Sin sombra */
  }
  50% {
    border-color: red; /* Color del borde ROJO */
    box-shadow: 0 0 8px red, 0 0 18px red inset; /* Efecto de brillo ROJO */
  }
}

.space.highlight-path {
  /* (Esta parte no necesita cambios) */
  animation: flash-border 1.2s infinite ease-in-out;
  border-width: 3px;
  z-index: 6;
}

.space.highlight-path {
  /* Aplicar la animación */
  animation: flash-border 1.2s infinite ease-in-out;
  /* Opcional: Hacer el borde un poco más grueso */
  border-width: 3px;
  /* Asegurar que esté visible sobre otros elementos si es necesario */
  z-index: 6; /* Un poco más alto que .space-number */
}


/* --- Estilos Responsivos (MODIFICADO) --- */
/* Ajustar breakpoint y estilos para cuando la disposición horizontal no quepa */
@media (max-width: 1450px) { /* Ajustar este valor según el ancho total (250 + 900 + 250 + gaps) */
    .game-container {
        flex-direction: column; /* Volver a apilar verticalmente */
        align-items: center; /* Centrar elementos apilados */
        width: 95%; /* Ajustar ancho si es necesario */
        gap: 15px; /* Reducir espacio vertical */
    }
    #board-container {
         /* Añadir margen inferior de nuevo */
         margin-bottom: 15px;
         /* Hacer el tablero responsive si es necesario */
         width: 90%; /* O un valor vw como 80vw */
         max-width: 700px; /* Limitar tamaño máximo en modo columna */
         height: auto; /* Altura automática */
         aspect-ratio: 900 / 800; /* Mantener proporción */
    }

    .controls-panel, .info-panel {
        width: 80%; /* Paneles ocupan más ancho */
        max-width: 600px; /* Limitar ancho máximo */
        height: auto; /* Altura automática */
        margin-bottom: 15px; /* Espacio entre paneles/tablero apilados */
        /* align-self: auto; /* Resetear align-self si se usó */
    }
     /* Reajustar el panel de opciones de ruta si es necesario */
     #path-choice-display {
        /* Podría necesitar volver a posicionarse relativo al centro o al tablero */
        width: 220px;
        right: 10px;
        top: 10px;
     }
}


/* Mantener o ajustar otros breakpoints si es necesario */
@media (max-width: 600px) {
     /* Ajustes adicionales para móviles muy pequeños */
     /* Hereda la disposición en columna del breakpoint anterior */
    .space { width: 50px; height: 50px; }
    /* .space-image { width: 35px; height: 35px; } /* Comentado si la imagen debe llenar el espacio */
    .player-token { width: 40px; height: 40px; border-width: 1px;} /* Token ligeramente más grande */

    .controls-panel, .info-panel {
        width: 95%; /* Casi todo el ancho */
        padding: 10px 15px;
    }
    .controls-panel h3, .info-panel h3 { font-size: 18px; }
    #roll-dice, .save-load-buttons button { font-size: 14px; padding: 10px 15px; }


    .modal-box, .question-box, .judge-box, .roll-again-box, .game-list-box {
        padding: 15px 20px;
        max-width: 95%;
    }
    .modal-box h3, .judge-box h3, .roll-again-box h3, .game-list-box h2 { font-size: 18px; }
    .question-text { font-size: 16px; }
    .judge-button { padding: 10px 20px; font-size: 14px; }
}