/* Importar fuente para el estilo noir/detective */
@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Roboto+Slab:wght@400;700&family=Oswald:wght@400;700&display=swap');


:root {
    --color-dark-blue: #1A202C; /* Fondo principal oscuro */
    --color-medium-blue: #2D3748; /* Elementos del panel */
    --color-light-blue: #4A5568; /* Bordes, detalles */
    --color-accent-yellow: #FFC107; /* Cinta policial, resaltados */
    --color-text-light: #E2E8F0; /* Texto claro */
    --color-text-dark: #A0AEC0; /* Texto secundario */
    --color-red-danger: #E53E3E; /* Mensajes de error */

    --font-heading: 'Oswald', sans-serif; /* Para títulos grandes */
    --font-body: 'Roboto Slab', serif; /* Para contenido y texto de King Kong */
    --font-creepy: 'Creepster', cursive; /* Para el título principal si se quiere más dramático */
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text-light);
    background-color: var(--color-dark-blue);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden; /* Para evitar barras de desplazamiento en el cuerpo */
    /* Puedes reemplazar esta imagen de fondo con la tuya propia (la del detective y el Congreso) */
    background-image: url('https://i.ibb.co/L5k6z3p/detective-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative; /* Para el overlay */
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Oscurece la imagen de fondo */
    z-index: -1;
}


.container {
    background-color: rgba(0, 0, 0, 0.85); /* Fondo semitransparente para el contenido principal */
    border: 2px solid var(--color-light-blue);
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    width: 95%;
    max-width: 1200px;
    height: 90vh; /* Altura adaptable */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.game-header {
    text-align: center;
    padding: 20px;
    background-color: var(--color-medium-blue);
    border-bottom: 2px solid var(--color-light-blue);
    position: relative;
    overflow: hidden;
}

.game-header h1 {
    font-family: var(--font-heading);
    font-size: 3em;
    color: var(--color-accent-yellow);
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    letter-spacing: 2px;
}
.game-header h2 {
    font-family: var(--font-body);
    font-size: 1.2em;
    color: var(--color-text-light);
    margin-top: 5px;
    font-weight: 400;
}

.police-line {
    background-color: var(--color-accent-yellow);
    height: 15px;
    width: 120%;
    position: absolute;
    bottom: -5px; /* Ligeramente fuera para efecto */
    left: -10%;
    transform: rotate(-2deg);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 20px;
}
.police-line::before, .police-line::after {
    content: 'POLICE LINE DO NOT CROSS';
    font-family: var(--font-heading);
    color: var(--color-dark-blue);
    font-size: 0.8em;
    font-weight: bold;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Main Game Area */
.game-area {
    display: flex; /* Contenedor flex para el mapa y los paneles laterales */
    flex-grow: 1;
    position: relative; /* Para los paneles superpuestos */
}

/* Columna de enlaces lateral izquierda */
#links-sidebar {
    flex: 0.7; /* Tamaño de la columna (ajusta si quieres que sea más ancha/estrecha) */
    background-color: var(--color-medium-blue);
    border-right: 1px solid var(--color-light-blue);
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Permite el desplazamiento si hay muchos enlaces */
    z-index: 1; /* Asegura que esté por encima del mapa si es necesario */
    min-height: 0; /* Necesario para que overflow funcione en flex items */
}

#links-sidebar h3 {
    font-family: var(--font-heading);
    color: var(--color-accent-yellow);
    font-size: 1.5em;
    margin-bottom: 15px;
    text-align: center;
    flex-shrink: 0; /* Evita que el título se encoja */
}

.links-list {
    flex-grow: 1; /* Hace que la lista ocupe el espacio restante y permita el scroll */
}

.links-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.links-list li {
    margin-bottom: 10px;
}

.links-list a {
    color: var(--color-text-light);
    text-decoration: none;
    font-size: 0.9em;
    line-height: 1.4;
    display: block;
    padding: 8px;
    background-color: var(--color-dark-blue);
    border-radius: 5px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.links-list a:hover {
    background-color: var(--color-light-blue);
    color: var(--color-accent-yellow);
}


#map-container {
    flex: 2; /* El mapa ocupa 2/3 del espacio cuando los paneles laterales están visibles */
    position: relative;
    background-color: var(--color-dark-blue);
}

#mapid {
    height: 100%;
    width: 100%;
    background-color: #000; /* Fondo negro para el mapa */
    
    position: relative; 
    z-index: 0;         /* Aseguramos que el mapa esté en la capa más baja */
}

/* Panel Overlay (para la intro y el score final) */
.overlay-panel {
    background-color: var(--color-medium-blue);
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: absolute; /* Estos son overlays, cubren el mapa */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 600px;
    max-height: 80%;
    border-radius: 8px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
    z-index: 1000; /* Asegura que estén por encima del mapa */
    overflow-y: auto; /* Para scroll si el contenido es largo */
}

/* Panel de juego lateral derecho */
.game-info-sidebar {
    flex: 1; /* El panel ocupa 1/3 del espacio junto al mapa */
    background-color: var(--color-medium-blue);
    padding: 20px;
    display: flex;
    flex-direction: column; /* Para que sus hijos se apilen verticalmente */
    border-left: 1px solid var(--color-light-blue); /* Separador visual del mapa */
    
    position: relative; 
    z-index: 10;        /* Elevado para que siempre esté por encima de todo */

    overflow-y: hidden; /* Oculta el scroll del panel principal */
    min-height: 0; /* Asegura que el flex-item pueda encogerse si es necesario */
}

/* ESTILO PARA EL ÁREA DE CONTENIDO SCROLLABLE DENTRO DE LOS SIDEBARS */
.scrollable-content-area {
    flex-grow: 1; /* Hace que este div ocupe todo el espacio vertical disponible */
    overflow-y: auto; /* Aquí es donde aparecerá la barra de desplazamiento */
    padding-right: 15px; /* Espacio para la barra de desplazamiento si aparece */
    box-sizing: border-box; /* Asegura que el padding se incluya en el ancho/alto */
    display: flex; /* Lo ponemos como flex para que sus hijos se comporten bien */
    flex-direction: column; /* Apila los hijos verticalmente */
    
    height: 100%; /* Fuerza a ocupar el 100% de la altura disponible */
    min-height: 0; /* Necesario a veces en flex items con overflow */
}


.hidden {
    display: none !important;
}

.dialogue-box {
    background-color: var(--color-light-blue);
    border: 1px solid var(--color-accent-yellow);
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    color: var(--color-text-light);
    font-style: italic;
}

.dialogue-box p {
    margin: 0;
    line-height: 1.5;
}

.overlay-panel h3, .game-info-sidebar h3, #links-sidebar h3 { /* Aplicamos a todos los títulos de paneles */
    font-family: var(--font-heading);
    color: var(--color-accent-yellow);
    font-size: 1.8em; /* Un poco más grande para los títulos principales */
    margin-bottom: 15px;
    text-align: center;
}
/* Ajuste específico para el título de links-sidebar si quieres un tamaño diferente */
#links-sidebar h3 {
    font-size: 1.5em; /* Un poco más pequeño que el principal de los paneles */
}


.info-content {
    background-color: var(--color-dark-blue);
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    color: var(--color-text-light);
    line-height: 1.6;
}

.mission-challenge {
    background-color: var(--color-light-blue);
    padding: 15px;
    border-radius: 5px;
    margin-top: 15px;
    text-align: center;

    /* ESTILOS DE DEPURACIÓN TEMPORALES - Puedes eliminarlos una vez que todo funcione y se vea bien */
    border: 5px solid magenta !important; 
    background-color: rgba(255, 0, 255, 0.3) !important; 
    box-shadow: 0 0 15px magenta !important; 
    margin-bottom: 20px !important; 
}

#mission-challenge-area p#mission-question {
    /* ESTILOS DE DEPURACIÓN TEMPORALES */
    border: 2px solid cyan !important; 
    background-color: rgba(0, 255, 255, 0.3) !important;
    color: white !important; 
}

#mission-challenge-area input#mission-input {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--color-accent-yellow);
    background-color: var(--color-dark-blue);
    color: var(--color-text-light);
    border-radius: 4px;
    font-family: var(--font-body);

    /* ESTILOS DE DEPURACIÓN TEMPORALES */
    border: 2px solid yellow !important; 
    background-color: rgba(255, 255, 0, 0.5) !important;
    color: black !important; 
}

.mission-challenge input[type="text"]::placeholder {
    color: var(--color-text-dark);
}

#mission-challenge-area button#submit-answer-btn {
    background-color: var(--color-accent-yellow);
    color: var(--color-dark-blue);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 1.1em;
    transition: background-color 0.3s ease;

    /* ESTILOS DE DEPURACIÓN TEMPORALES */
    border: 2px solid lime !important; 
    background-color: rgba(0, 255, 0, 0.5) !important;
    color: black !important; 
}

#mission-challenge-area button#submit-answer-btn:hover {
    background-color: #E6B000;
}

.feedback-message {
    margin-top: 10px;
    font-weight: bold;
}
.feedback-message.success {
    color: #4CAF50; /* Verde */
}
.feedback-message.error {
    color: var(--color-red-danger);
}

.action-btn {
    background-color: var(--color-accent-yellow);
    color: var(--color-dark-blue);
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 1.2em;
    margin-top: 20px;
    align-self: center; /* Centra el botón en el panel */
    transition: background-color 0.3s ease;
}
.action-btn:hover {
    background-color: #E6B000;
}

/* Score Panel */
.score-panel {
    text-align: center;
}
.score-panel p {
    font-size: 1.2em;
    margin-bottom: 10px;
}
.score-panel span {
    font-weight: bold;
    color: var(--color-accent-yellow);
    font-family: var(--font-heading);
}


/* Footer */
.game-footer {
    text-align: center;
    padding: 10px;
    background-color: var(--color-medium-blue);
    border-top: 1px solid var(--color-light-blue);
    color: var(--color-text-dark);
    font-size: 0.8em;
}