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

body{
background:#2c1b12;
color:#efe2c7;
height: 100vh; /* Fallback */
height: calc(var(--vh, 1vh) * 100);
width: 100%;
display:flex;
justify-content:center;
font-family: 'Merriweather', serif;
overflow: hidden; /* Evita que el navegador haga scroll fuera de la app */
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3, h4, h5, .cinzel-font {
  font-family: 'Cormorant SC', 'Cinzel', serif; /* Cormorant SC soporta mejor la Ñ */
  letter-spacing: 1px;
}

#app{
width:100%;
max-width:480px; /* Un poco más de margen para móviles modernos */
height: 100vh; /* Fallback */
height: calc(var(--vh, 1vh) * 100);
display:flex;
flex-direction:column;
position:relative;
background: #1b140f;
box-shadow: 0 0 50px rgba(0,0,0,0.5);
}

.top{
padding:15px 10px 30px; /* Mas padding inferior para el gradiente */
text-align:center;
background: linear-gradient(to bottom, rgba(27,20,15,0.98) 0%, rgba(27,20,15,0.8) 60%, transparent 100%);
z-index: 1000;
position: absolute;
top: 0; 
left: 0;
width: 100%;
}

.mission-counter {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  color: #c8a46a;
  background: rgba(0,0,0,0.6);
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid rgba(166, 115, 58, 0.5);
  pointer-events: none;
  animation: slideInLeft 0.5s ease-out;
  letter-spacing: 1px;
  z-index: 10;
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

.hallazgos-counter {
  position: absolute;
  top: 36px; /* Below mission-counter */
  left: 10px;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  color: #efe2c7;
  background: rgba(43, 31, 23, 0.8);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(200, 164, 106, 0.4);
  pointer-events: none;
  animation: slideInLeft 0.5s ease-out;
  letter-spacing: 1px;
  z-index: 10;
  text-transform: uppercase;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}


.top h1 {
  font-size: 11px;
  color: #a6733a;
  text-transform: uppercase;
  margin-top: 5px;
  margin-bottom: 0px;
  letter-spacing: 2px;
  opacity: 0.8;
}

.location {
  font-size: 26px;
  color: #efe2c7;
  text-shadow: 0 2px 10px rgba(0,0,0,1);
  font-family: 'Cinzel', serif;
  margin-top: -2px;
}

.volume-control {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(27, 20, 15, 0.7);
  padding: 2px;
  border-radius: 30px;
  border: 1px solid rgba(200, 164, 106, 0.3);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1000;
  overflow: hidden;
  max-width: 44px; /* Slightly more than the button width */
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.volume-control:hover, .btn-volume-active {
  max-width: 200px;
  background: rgba(27, 20, 15, 0.95);
  border-color: #c8a46a;
  padding-right: 15px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

.mute-toggle {
  background: none;
  border: none;
  color: #c8a46a;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.3s ease;
  flex-shrink: 0;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.mute-toggle:hover {
  transform: scale(1.1);
  color: #efe2c7;
}

.volume-slider-container {
  width: 0;
  opacity: 0;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.volume-control:hover .volume-slider-container, 
.btn-volume-active .volume-slider-container {
  width: 110px;
  opacity: 1;
  pointer-events: auto;
}

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: #5e432f;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: #c8a46a;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
  transition: transform 0.2s ease, background 0.2s ease;
  border: 1px solid #1b140f;
}

.volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.3);
  background: #efe2c7;
}

.mute-toggle.muted {
  color: #a62626;
  opacity: 0.8;
}

/* --- VISTAS --- */
.view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background-color: #2c1b12; /* Fallback medieval brown */
  min-height: 0; /* Fix for some flex containers */
  width: 100%;
}

.hidden {
  display: none !important;
}

/* --- INICIO (Epic Style) --- */
#view-home {
  background-image: url('assets/scenes/inicio.webp');
  background-size: cover;
  background-position: center bottom;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 0; /* Eliminamos el espacio extra inferior */
}

.home-content {
  padding: 60px 20px 30px; /* Aumentamos el padding para que el gradiente cubra más */
  background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 70%, transparent 100%);
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

#btn-start-game {
  background-color: #efe2c7; 
  background-image: url('assets/ui/parchment.webp');
  background-size: cover;
  color: #3a2a1b;
  border: 4px solid #8b5b2c;
  font-family: 'Cormorant SC', 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 3px;
  box-shadow: 0 10px 30px rgba(0,0,0,1), inset 0 0 15px rgba(0,0,0,0.3);
  max-width: 320px;
  width: 90%;
  height: 60px;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-reset {
  background: #3c2a1e !important;
  border: 1px solid #5e432f !important;
  color: #c8a46a !important;
  font-size: 0.75rem !important;
  letter-spacing: 2px !important;
  padding: 8px 15px !important;
  max-width: 220px !important;
  opacity: 0.7;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
  text-shadow: none !important;
}

.btn-reset:hover {
  opacity: 1;
  background: #a62626 !important;
  color: #fff !important;
  transform: translateY(-2px);
}

#btn-start-game:hover {
  filter: brightness(1.1);
  transform: translateY(-3px) scale(1.02);
}

.legal-text {
  color: #c8a46a;
  font-family: 'Cormorant SC', 'Cinzel', serif;
  font-size: 10px;
  margin-top: 30px;
  text-shadow: 1px 1px 3px rgba(0,0,0,1);
  opacity: 0.8;
  background: none;
  padding: 0;
}

.dev-signature {
  font-family: 'Cormorant SC', 'Cinzel', serif;
  font-size: 11px;
  color: #a6733a;
  margin-top: -5px;
  opacity: 0.7;
  letter-spacing: 1px;
}

.dev-signature a {
  color: #c8a46a;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 164, 106, 0.3);
  transition: all 0.3s ease;
}

.dev-signature a:hover {
  color: #efe2c7;
  border-bottom-color: #efe2c7;
}

.legal-text a {
  color: #efe2c7;
  text-decoration: none;
  border-bottom: 1px solid #c8a46a;
}

.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(200, 164, 106, 0.7)); }
  70% { transform: scale(1.03); filter: drop-shadow(0 0 10px rgba(200, 164, 106, 0.4)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(200, 164, 106, 0)); }
}

/* --- SELECCIÓN DE PERSONAJE (Estilo Épico Refinado) --- */
#view-character-selection {
  background-image: url('assets/scenes/seleccion_personaje.webp');
  background-size: cover;
  background-position: center top; /* Asegura que el monasterio sea visible */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  overflow: hidden;
}

#view-character-selection::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at center, transparent 30%, rgba(27, 20, 15, 0.4) 100%);
  z-index: 1;
  pointer-events: none;
}

.selection-title {
  font-family: 'Almendra', serif;
  color: #efe2c7;
  font-size: 2.2rem;
  text-align: center;
  margin-top: 60px;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-shadow: 0 4px 10px rgba(0,0,0,1);
  padding: 15px 30px;
  z-index: 10;
  position: relative;
}

.characters-selection-container {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: flex-end;
  flex: 1;
  padding-bottom: 25px;
  z-index: 5;
  gap: 40px;
}

.character-option {
  position: relative;
  width: 140px; 
  height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1);
  filter: brightness(0.4) saturate(0.4) blur(1px);
}

.character-option.selected {
  filter: brightness(1.2) saturate(1.1) blur(0px);
  transform: scale(1.05);
}

.character-pedestal {
  position: absolute;
  bottom: 0px; 
  width: 120px;
  height: 40px;
  background: radial-gradient(ellipse at center, rgba(255, 200, 100, 0.6) 0%, transparent 70%);
  filter: blur(8px);
  opacity: 0; 
  transition: all 0.5s ease;
  pointer-events: none;
  z-index: 1;
}

.character-option.selected .character-pedestal {
  opacity: 1;
  background: radial-gradient(ellipse at center, rgba(255, 230, 150, 0.8) 0%, rgba(255, 180, 50, 0.4) 50%, transparent 80%);
  transform: scale(2.0);
  animation: pulse-light 3s infinite ease-in-out;
}

@keyframes pulse-light {
  0%, 100% { opacity: 0.6; transform: scale(1.8); }
  50% { opacity: 1; transform: scale(2.2); }
}

.character-img {
  height: 270px; /* Reducción del 40% (450 -> 270) */
  max-width: 200px;
  object-fit: contain;
  transition: all 0.6s ease;
  filter: drop-shadow(0 15px 15px rgba(0,0,0,1));
  z-index: 5;
  margin-bottom: 5px;
  animation: breathe 4s infinite ease-in-out;
  pointer-events: none;
}

@keyframes breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.character-option.selected .character-img {
  filter: drop-shadow(0 0 35px rgba(255, 200, 100, 0.4)) drop-shadow(0 20px 20px rgba(0,0,0,0.8));
}

.character-name {
  color: #efe2c7;
  font-size: 16px;
  font-family: 'Cormorant SC', 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 5px;
  text-shadow: 0 0 8px rgba(0,0,0,1), 1px 1px 2px rgba(0,0,0,1);
  margin-top: 5px;
  opacity: 0.6;
  transition: all 0.4s ease;
  z-index: 10;
  text-align: center;
  position: absolute;
  bottom: -10px; /* Casi rozando los pies para encajar en el plano bajo */
}

.character-option.selected .character-name {
  color: #c8a46a;
  opacity: 1;
  letter-spacing: 8px;
  text-shadow: 0 0 15px rgba(200, 164, 106, 0.8), 2px 2px 4px rgba(0,0,0,1);
  transform: scale(1.1);
}

.selection-footer {
  width: 100%;
  padding: 20px 20px 30px; /* Bajada del footer y el botón un 5% aprox */
  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
  display: flex;
  justify-content: center;
  z-index: 10;
}

#btn-confirm-character {
  width: auto;
  min-width: 160px;
  white-space: nowrap;
  padding: 12px 25px;
  font-size: 14px;
  letter-spacing: 2px;
  box-shadow: 0 0 20px rgba(200, 164, 106, 0.2);
}

#btn-confirm-character:not(:disabled) {
  background: linear-gradient(to bottom, #a6733a, #8b5b2c);
  border: 2px solid #efe2c7;
  box-shadow: 0 0 30px rgba(200, 164, 106, 0.5);
  animation: pulse-gold 2s infinite;
}

@keyframes pulse-gold {
  0% { box-shadow: 0 0 10px rgba(200, 164, 106, 0.4); }
  50% { box-shadow: 0 0 30px rgba(200, 164, 106, 0.7); }
  100% { box-shadow: 0 0 10px rgba(200, 164, 106, 0.4); }
}

#btn-confirm-character:disabled {
  background: rgba(27, 20, 15, 0.8);
  color: #5e432f;
  border-color: #3a2a1b;
  cursor: not-allowed;
}

/* --- MAPA CAROUSEL --- */
.map-grid {
  min-height: 100vh;
  background: #1b140f;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Oscurecemos el fondo global del mapa para que destaquen las tarjetas */
.map-grid::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(44, 27, 18, 0.7);
  backdrop-filter: blur(4px);
  z-index: 1;
}

.carousel-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  align-items: center;
  padding: 0 40px; /* Padding for first and last card centering effect */
  gap: 20px;
  width: 100%;
  height: 65vh;
  z-index: 5;
  scrollbar-width: none; /* Ocultar scroll en Firefox */
}

.carousel-container::-webkit-scrollbar {
  display: none; /* Ocultar scroll en Chrome/Safari */
}

/* Espaciadores virtuales para poder centrar la primera y última card */
.carousel-spacer {
  flex: 0 0 10vw;
  height: 1px;
}

.map-card {
  scroll-snap-align: center;
  flex: 0 0 75vw;
  max-width: 320px;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  border: 3px solid #5e432f;
  box-shadow: 0 10px 25px rgba(0,0,0,0.8);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: all 0.3s ease;
}

.map-card.unlocked:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.9), 0 0 15px rgba(212, 163, 115, 0.3);
  border-color: #8b5b2c;
}

.map-card.locked {
  filter: grayscale(100%) brightness(0.6);
  cursor: not-allowed;
  border-color: #2b1f17;
}

/* Lock overlay */
.map-card-lock-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.map-card-lock-overlay span {
  font-size: 50px;
  text-shadow: 0 0 15px rgba(0,0,0,0.9);
}

.map-card-progress {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(43, 31, 23, 0.9);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-family: 'Cormorant SC', serif;
  color: #cdbfa6;
  border: 1px solid #5e432f;
  z-index: 6;
  text-transform: uppercase;
}

.map-card-progress.complete {
  background: #a6733a;
  color: #1b140f;
  font-weight: bold;
  border-color: #efe2c7;
  box-shadow: 0 0 10px rgba(166, 115, 58, 0.5);
}

.map-card-content {
  background: linear-gradient(to top, rgba(27,20,15,1) 0%, rgba(27,20,15,0.9) 70%, transparent 100%);
  padding: 40px 15px 15px;
  text-align: center;
  z-index: 5;
  position: relative;
}

.map-card-title {
  font-family: 'Cormorant SC', 'Cinzel', serif;
  color: #d4a373;
  font-size: 22px;
  margin-bottom: 5px;
  text-transform: uppercase;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.9);
}

.map-card-desc {
  color: #efe2c7;
  font-size: 13px;
  margin-bottom: 15px;
  line-height: 1.4;
  opacity: 0.9;
}

/* --- LOCALIDAD (AVENTURA GRÁFICA) --- */
.relative-scene {
  position: relative;
  width: 100%;
  height: 100%;
}

.full-scene {
  width: 100%;
  height: 100%; /* Ocupa el 100% disponible entre el header y el footer */
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0; left: 0;
  transition: background-image 0.5s ease-in-out; /* Animación suave al viajar */
  overflow: hidden; /* Evitar barras de desplazamiento por hotspots en bordes */
}

/* Sombra inferior para que destaque el Nav Menu */
.full-scene::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to top, rgba(44, 27, 18, 1), transparent);
  pointer-events: none;
}

.section-heading {
  color: #d4a373;
  font-size: 20px;
  margin-bottom: 10px;
  border-bottom: 1px solid #5e432f;
  padding-bottom: 5px;
}

/* --- HOTSPOTS DE ESCENA --- */
.hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 10;
  pointer-events: auto;
  transition: all 0.3s ease;
  /* Visible por defecto con un brillo sutil */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Modo Debug: Visualización de Hotspots para Testers */
.debug-hotspots-active .hotspot {
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  background: rgba(200, 164, 106, 0.2) !important;
  box-shadow: 0 0 10px rgba(255, 230, 150, 0.3) !important;
  z-index: 1000 !important;
}

.debug-hotspots-active .hotspot-glow-effect {
  opacity: 0.8 !important;
  animation: none !important;
}

.debug-hotspots-active .hotspot::after {
  content: attr(id);
  position: absolute;
  top: -15px;
  left: 0;
  font-size: 8px;
  color: #fff;
  background: rgba(0,0,0,0.7);
  padding: 2px 4px;
  white-space: nowrap;
  pointer-events: none;
}

/* Mejora de visibilidad cuando la rejilla de debug está activa */
#location-grid.visible ~ .hotspot,
.grid-overlay.visible ~ .hotspot {
  border: 1px dashed rgba(255, 255, 255, 0.5) !important;
  background: rgba(212, 163, 115, 0.2) !important;
  z-index: 2000;
}

.hotspot:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.hotspot-glow-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 230, 150, 0.9) 0%, rgba(212, 163, 115, 0.4) 50%, transparent 80%);
  filter: drop-shadow(0 0 5px rgba(255, 200, 100, 0.9));
  opacity: 0;
  pointer-events: none;
  /* La animación de brillo se desactiva por defecto por petición del usuario */
  /* animation: hotspot-glimmer 5s infinite ease-in-out; */
}

/* Solo se anima el brillo si estamos en modo debug */
.debug-hotspots-active .hotspot-glow-effect {
  opacity: 1 !important;
  animation: hotspot-glimmer 5s infinite ease-in-out !important;
}

@keyframes hotspot-glimmer {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  60% { opacity: 0.2; transform: translate(-50%, -50%) scale(1.3); }
  100% { opacity: 0; }
}

.hotspot.has-icon {
  width: 70px;
  height: 90px;
  overflow: visible;
}

.hotspot-dot-marker {
  width: 12px;
  height: 12px;
  background: #efe2c7;
  border-radius: 50%;
  border: 2px solid #c8a46a;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 5px #c8a46a;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0; /* Oculto por defecto */
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Los marcadores de punto solo se ven en modo debug */
.debug-hotspots-active .hotspot-dot-marker {
  opacity: 1;
  animation: marker-pulse 2s infinite ease-in-out;
}

@keyframes marker-pulse {
  0% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 10px rgba(255, 255, 255, 0.6); }
  50% { transform: translate(-50%, -50%) scale(1.3); box-shadow: 0 0 20px rgba(200, 164, 106, 0.9); }
  100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 10px rgba(255, 255, 255, 0.6); }
}

.hotspot-avatar {
  width: 100%;
  height: 100%;
  border-radius: 4px; /* Cuadrado para personajes */
  object-fit: cover;
  border: 2px solid #d4a373;
  box-shadow: 0 4px 15px rgba(0,0,0,0.6);
  background: #2b1f17;
  transition: all 0.3s ease;
}

.hotspot.has-icon:hover .hotspot-avatar {
  transform: translateY(-5px);
  border-color: #efe2c7;
  box-shadow: 0 8px 25px rgba(212, 163, 115, 0.5);
}

.hotspot-back {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: transform 0.3s ease;
}

.hotspot-back:hover {
  transform: translate(-50%, -50%) scale(1.1) !important;
}

.hotspot-back span {
  color: #efe2c7;
  font-family: 'Cormorant SC', serif;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  pointer-events: none;
}

.hotspot-label {
  background: rgba(27, 20, 15, 0.9) !important;
  border: 2px solid #c8a46a !important;
  padding: 8px 20px;
  border-radius: 4px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 15px rgba(0,0,0,0.6), inset 0 0 10px rgba(0,0,0,0.3);
}

.hotspot-label:hover {
  background: #c8a46a !important;
  transform: translate(-50%, -50%) scale(1.05) !important;
  box-shadow: 0 8px 25px rgba(200, 164, 106, 0.4);
}

.hotspot-label span {
  color: #efe2c7;
  font-family: 'Cormorant SC', 'Cinzel', serif;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  pointer-events: none;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hotspot-label:hover span {
  color: #1b140f;
  text-shadow: none;
}

/* --- SISTEMA DE REJILLA PARA COORDINADAS (DEBUG) --- */
.grid-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  opacity: 0;
  transition: opacity 0.3s ease;
  overflow: hidden; /* Evitar desbordes por bordes de celdas */
}

.grid-overlay.visible {
  opacity: 1; /* Aumentado de 0.5 a 1 para debug claro */
}

.grid-cell {
  box-sizing: border-box; /* IMPORTANTE: Para que el borde no sume al 10% */
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.grid-cell::after {
  content: attr(data-coord);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  opacity: 1;
  background: rgba(0, 0, 0, 0.6);
  padding: 2px 5px;
  border-radius: 3px;
  text-shadow: 1px 1px 2px #000;
}

/* Colores alternos para que sea más fácil leer */
.grid-cell:nth-child(even) {
  background: rgba(255,255,255, 0.05);
}

.pulse-fast {
  animation: pulse-fast 2s infinite;
}

@keyframes pulse-fast {
  0% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(212, 163, 115, 0.7); border-color: rgba(212, 163, 115, 0.8); }
  50% { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 15px 5px rgba(212, 163, 115, 0.4); border-color: rgba(255, 230, 150, 1); }
  100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(212, 163, 115, 0); border-color: rgba(212, 163, 115, 0.8); }
}

/* --- FIN MISIONES Y NPCS ANTIGUOS --- */

/* --- MISIONES (Reutilizables genéricas) --- */
.done {
  text-decoration: line-through;
  color: #777;
}

/* --- CUADRO DE DIÁLOGO FLOTANTE --- */
.dialogue-box {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  backdrop-filter: blur(3px);
  padding: 20px;
}

.dialogue-content {
  background: #2b1f17;
  border: 3px solid #8b5b2c;
  color: #efe2c7;
  padding: 20px;
  border-radius: 8px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.8);
  position: relative;
  /* Animación sutil de aparición */
  animation: slideUp 0.3s ease-out;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 15px;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.dialogue-text-container {
  flex: 1;
}

.dialogue-avatar {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 2px solid #5e432f;
  background-size: cover;
  background-position: center;
  background-color: #1b140f;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 0 4px 6px rgba(0,0,0,0.5);
  display: none; /* Oculto por defecto si no hay avatar */
}

.dialogue-left-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
}

.dialogue-illustration {
  width: 90px;
  height: 120px;
  flex-shrink: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 6px;
  border: 1px solid rgba(200, 164, 106, 0.4);
  cursor: zoom-in;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  z-index: 5;
  filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
}

.dialogue-illustration:hover {
  transform: scale(1.1);
}

.dialogue-illustration.zoomed {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(5);
  z-index: 1000;
  cursor: zoom-out;
}

.dialogue-illustration.hidden {
    display: none;
}

.dialogue-content h3 {
  color: #d4a373;
  font-size: 22px;
  margin-bottom: 10px;
  border-bottom: 1px solid #5e432f;
  padding-bottom: 5px;
  margin-top: 0;
}

.dialogue-content p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
  margin-top: 0;
}

.dialogue-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dialogue-option-btn {
  background: #3c2a1e;
  border: 1px solid #5e432f;
  color: white;
  padding: 12px;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
  text-align: left;
}

.dialogue-option-btn:hover {
  background: #5e432f;
  border-color: #8b5b2c;
}

.close-dialogue {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  color: #d4a373;
  font-size: 20px;
  cursor: pointer;
}

/* --- ESCENA --- */
.scene {
  background-size: cover;
  background-position: center;
  position: relative;
}

/* --- BOTÓN PRINCIPAL (CTA) --- */
.mainButton {
  width: 100%;
  padding: 14px;
  background: #8b5b2c;
  border: 4px solid #3a2a1b;
  color: white;
  font-size: 18px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: auto;
  font-family: 'Cormorant SC', 'Cinzel', serif;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(0,0,0,0.7), inset 0 2px 3px rgba(255,255,255,0.2);
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

.mainButton::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.1), transparent);
}

.mainButton:hover {
  background: #a6733a;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.8);
}

.mainButton:active {
  transform: translateY(0);
}

/* --- PISTAS (ESTILO PREMIUM) --- */
.clues-container {
  padding: 15px;
  background: radial-gradient(circle at center, #2b1f17 0%, #1b140f 100%);
  flex: 1;
}

#cluesList {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 5px 0;
}

.clue-card {
  background: rgba(43, 31, 23, 0.6);
  border: 1px solid rgba(200, 164, 106, 0.2);
  border-left: 4px solid #c8a46a;
  border-radius: 6px;
  padding: 15px;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  gap: 5px;
  animation: fadeInClue 0.4s ease-out;
}

.clue-card:hover {
  background: rgba(54, 39, 28, 0.8);
  border-color: rgba(200, 164, 106, 0.5);
  transform: translateX(5px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

.clue-card.item-type {
  border-left-color: #d4af37;
  background: linear-gradient(to right, rgba(212, 175, 55, 0.1), transparent);
}

.clue-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

.clue-icon {
  font-size: 1.4rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  flex-shrink: 0;
}

.clue-icon img {
  height: 28px;
  width: auto;
  object-fit: contain;
}

.clue-name {
  font-family: 'Cormorant SC', 'Cinzel', serif;
  font-weight: 700;
  color: #efe2c7;
  font-size: 1.1rem;
  letter-spacing: 1px;
}

.clue-description {
  color: #cdbfa6;
  font-size: 0.9rem;
  line-height: 1.4;
  margin-left: 32px;
}

.clue-special {
  margin-top: 8px;
  margin-left: 32px;
  color: #d4af37;
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  letter-spacing: 6px;
  text-align: center;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

@keyframes fadeInClue {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- PANELES MODALES FLOTANTES --- */
.panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 380px;
  height: 70%;
  max-height: 600px;
  background: transparent;
  z-index: 50;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
  animation: slideUp 0.3s ease-out;
}

/* --- INVENTARIO DE PERSONAJES --- */
.characters-container {
  padding: 15px;
  background: #2b1f17;
  flex: 1;
}

.characters-container h2 {
  margin-bottom: 15px;
  color: #efe2c7;
}

.characters-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.character-card {
  background: #3c2a1e;
  border: 2px solid #5e432f;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.character-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: top;
  background: #1b140f;
  border-bottom: 2px solid #5e432f;
}

.character-card h3 {
  color: #efe2c7;
  font-size: 16px;
  padding: 8px 5px;
}

.character-card p {
  color: #cdbfa6;
  font-size: 11px;
  padding: 0 8px 10px;
  flex: 1;
  line-height: 1.3;
}

/* --- PUZZLES (Candado/Código) --- */
.puzzle-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
}

.puzzle-input-group {
  width: 100%;
  padding: 0 20px;
}

#puzzleInput {
  width: 100%;
  padding: 15px;
  background: rgba(43, 31, 23, 0.9);
  border: 2px solid #8b5b2c;
  color: #d4a373;
  font-family: 'Cormorant SC', 'Cinzel', serif;
  font-size: 18px;
  text-align: center;
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
  outline: none;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

#puzzleInput:focus {
  border-color: #d4a373;
  box-shadow: 0 0 15px rgba(212, 163, 115, 0.4);
}

#puzzleInput::placeholder {
  color: rgba(212, 163, 115, 0.3);
  font-size: 14px;
}

/* Animación de error (shake) */
.shake-error {
  animation: horizontal-shaking 0.4s;
  border-color: #ff5e5e !important;
}

@keyframes horizontal-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateX(5px) }
  50% { transform: translateX(-5px) }
  75% { transform: translateX(5px) }
  100% { transform: translateX(0) }
}

/* --- NAVEGACION INFERIOR --- */
.bottomNav {
  display: flex;
  background: url('assets/ui/parchment.webp');
  background-size: cover;
  border-top: 4px solid #3a2a1b;
  box-shadow: 0 -5px 15px rgba(0,0,0,0.5);
  z-index: 10000;
  position: absolute;
  bottom: 0; 
  left: 0;
  width: 100%;
  height: 85px;
  padding: 5px 10px 10px;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  padding: 5px;
}

.nav-icon {
  width: 44px; /* Un poco más grandes para destacar el detalle */
  height: 44px;
  margin-bottom: 2px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  mix-blend-mode: multiply; /* Convierte el fondo blanco en transparente */
  filter: brightness(1.1) contrast(1.1) sepia(0.2) saturate(0.8); /* Asegura blanco puro y tono medieval */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.icon-map        { background-image: url('assets/icons/map.webp'); }
.icon-clues      { background-image: url('assets/icons/clues.webp'); }
.icon-characters { background-image: url('assets/icons/people.webp'); }
.icon-diary      { background-image: url('assets/icons/diary.webp'); }

/* Estado Activo y Hover */
.nav-item:hover .nav-icon {
  transform: scale(1.1) translateY(-5px);
  filter: sepia(0) saturate(1.2) brightness(1.2) drop-shadow(0 10px 15px rgba(0,0,0,0.3));
}

.nav-item.active .nav-icon {
  filter: sepia(0) saturate(1.2) brightness(1.2) drop-shadow(0 5px 10px rgba(166, 115, 58, 0.4));
  transform: scale(1.15) translateY(-5px);
}

.nav-item span {
  font-family: 'Cormorant SC', 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  color: #4a3728;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  transition: all 0.3s ease;
  margin-top: -2px;
}

.nav-item.active span {
  color: #8b5b2c;
  text-shadow: 0 0 8px rgba(200, 164, 106, 0.4);
}

.nav-item::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle, rgba(200, 164, 106, 0.2) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}

.nav-item:active::after {
  opacity: 1;
}

/* Efecto Brillo Dorado al pasar */
.nav-item:hover .nav-icon {
  filter: sepia(1) saturate(3) hue-rotate(-15deg) brightness(1);
}

/* --- PANELES MODALES (DIARIO, PERSONAJES, ETC) --- */
.panel {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 420px;
  height: calc(100% - 85px); 
  background-color: #1b140f; 
  background-image: linear-gradient(rgba(27, 20, 15, 0.98), rgba(27, 20, 15, 0.98)), url('assets/ui/parchment.webp');
  background-size: cover;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  animation: panelFadeIn 0.3s ease;
  box-shadow: 0 0 50px rgba(0,0,0,0.9);
  overflow: hidden;
}

@keyframes panelFadeIn {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.panel-header {
  padding: 25px 20px;
  background: #2b1f17;
  border-bottom: 2px solid #5e432f;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.panel-header h2 {
  font-size: 22px;
  color: #c8a46a;
  margin: 0;
  text-align: center;
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.close-btn {
  background: rgba(200, 164, 106, 0.1);
  border: 1px solid #c8a46a;
  color: #c8a46a;
  font-size: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: rgba(200, 164, 106, 0.3);
  transform: scale(1.1);
}

/* --- DIARIO DEL PEREGRINO --- */
.journal-container {
  padding: 20px 15px 100px; /* Margen extra inferior para scroll cómodo */
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.journal-card {
  width: 100%;
  max-width: 380px;
  background: rgba(43, 31, 23, 0.9);
  border: 1px solid #5e432f;
  border-left: 4px solid #c8a46a;
  padding: 18px;
  margin-bottom: 20px;
  border-radius: 4px;
  transition: all 0.3s ease;
  animation: slideInUp 0.4s ease-out;
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.journal-card:hover {
  background: rgba(239, 226, 199, 0.1);
  transform: translateX(5px);
}

.journal-card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(200, 164, 106, 0.2);
  padding-bottom: 5px;
}

.journal-category {
  font-family: 'Cormorant SC', serif;
  font-size: 11px;
  color: #c8a46a;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.journal-date {
  font-size: 10px;
  color: rgba(239, 226, 199, 0.5);
  font-style: italic;
}

.journal-title {
  font-family: 'Cormorant SC', serif;
  font-size: 20px;
  color: #d4a373;
  margin: 10px 0;
  line-height: 1.2;
}

.journal-text {
  font-size: 14px;
  line-height: 1.6;
  color: #efe2c7;
  opacity: 0.9;
}

.empty-msg {
  text-align: center;
  color: #c8a46a;
  margin-top: 50px;
  font-style: italic;
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Efecto Brillo Oro para el Nav al descubrir algo */
.pulse-gold {
  animation: pulse-gold-glow 2s infinite;
}

@keyframes pulse-gold-glow {
  0% { box-shadow: 0 0 0 0 rgba(200, 164, 106, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(200, 164, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 164, 106, 0); }
}

/* PUZZLE MECÁNICO */
.mechanical-puzzle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 10px;
}

.disks-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  background: rgba(0, 0, 0, 0.4);
  padding: 20px;
  border-radius: 10px;
  border: 1px solid rgba(166, 115, 58, 0.3);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}

.disk-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.disk-btn {
  background: #3d2b1f;
  border: 1px solid #7c5a3e;
  color: #efe2c7;
  border-radius: 4px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.disk-btn:hover {
  background: #5e432f;
  transform: scale(1.1);
}

.disk-btn:active {
  transform: scale(0.9);
}

.disk-frame {
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, #4d3a2e 0%, #2a1f18 100%);
  border: 3px solid #7c5a3e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 0 10px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
}

.disk-content {
  font-size: 2rem;
  font-family: 'Cinzel', serif;
  color: #d4af37;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* MODAL DE DESBLOQUEO */
#view-unlock {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

.unlock-card {
  width: 85%;
  max-width: 400px;
  background: #1b140f;
  border: 2px solid #a6733a;
  border-radius: 15px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 0 50px rgba(0,0,0,1), 0 0 20px rgba(166, 115, 58, 0.4);
  position: relative;
  overflow: hidden;
}

.unlock-subtitle {
  font-family: 'Cormorant SC', serif;
  color: #a6733a;
  letter-spacing: 2px;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.unlock-image {
  width: 100%;
  height: 180px;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  border: 1px solid #3d2b1f;
  margin-bottom: 20px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
  transform: scale(1.05);
}

.unlock-title {
  font-family: 'Almendra', serif;
  color: #efe2c7;
  font-size: 1.8rem;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.unlock-desc {
  font-family: 'Merriweather', serif;
  color: #c8a46a;
  font-size: 0.9rem;
  margin-bottom: 30px;
  font-style: italic;
  line-height: 1.4;
}

/* Animación de Revelación */
.reveal-animation {
  animation: revealZoom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes revealZoom {
  from { opacity: 0; transform: scale(0.8) translateY(30px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
/* INFO LUGAR REAL */
.real-location-marker {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 45px;
  height: 45px;
  background: rgba(27, 20, 15, 0.85);
  border: 2px solid #c8a46a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  box-shadow: 0 0 15px rgba(200, 164, 106, 0.4);
  animation: glow-pulse 2s infinite ease-in-out;
  transition: all 0.3s ease;
  font-size: 20px;
}

.real-location-marker:hover {
  transform: scale(1.1);
  background: rgba(200, 164, 106, 0.2);
  box-shadow: 0 0 25px rgba(200, 164, 106, 0.7);
}

.location-logo-display {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(200, 164, 106, 0.4); }
  50% { box-shadow: 0 0 20px rgba(200, 164, 106, 0.8); }
}

/* --- MINE EXPLORATION SYSTEM --- */
#darkness-overlay {
  transition: opacity 1s ease;
}

.bioluminiscent-spot {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(144, 238, 144, 0.8) 0%, transparent 70%);
  box-shadow: 0 0 20px rgba(144, 238, 144, 0.5);
  pointer-events: none;
  z-index: 60;
  transition: opacity 0.5s ease;
  animation: biolum-pulse 3s infinite ease-in-out;
}

@keyframes biolum-pulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.2); opacity: 0.8; }
}

.micelio-node {
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  box-shadow: 0 0 10px #fff;
}

/* --- DEBUG HOTSPOTS --- */
.hotspot-debug-label {
  position: absolute;
  top: -20px;
  left: -20px;
  background: #ff00ff; /* Magenta neón para alto contraste */
  color: #fff;
  width: 28px;
  height: 28px;
  font-size: 16px;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 9999;
  box-shadow: 0 0 10px rgba(0,0,0,0.8);
}

.grid-overlay.visible ~ .hotspot .hotspot-debug-label,
.grid-overlay.visible ~ .hotspot-debug-label,
#location-grid.visible ~ .hotspot .hotspot-debug-label {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Sistema de Notificaciones (Toasts) */
.toast-container {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 90%;
  max-width: 380px;
}

.toast {
  background: rgba(44, 34, 21, 0.95);
  border: 2px solid #d4af37;
  color: #efe2c7;
  padding: 12px 20px;
  border-radius: 6px;
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  max-width: 85%;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.9), 0 0 10px rgba(212, 175, 55, 0.4);
  animation: toast-animation 4s ease-in-out forwards;
  pointer-events: auto;
  border-left: 4px solid #d4af37;
  border-right: 4px solid #d4af37;
}

.toast-title {
  display: block;
  font-size: 1.1rem;
  color: #d4af37;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

@keyframes toast-animation {
  0% { opacity: 0; transform: translateY(30px) scale(0.9); }
  10% { opacity: 1; transform: translateY(0) scale(1.05); }
  15% { transform: scale(1); }
  85% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-30px); }
}

/* --- BARRA DE NAVEGACIÓN DE ESCENA (UX MEJORADA) --- */
.scene-nav-bar {
  position: absolute;
  bottom: 85px; /* Justo encima del menú principal */
  left: 0;
  width: 100%;
  height: 45px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  z-index: 9000;
  pointer-events: none; /* Dejar pasar clicks a la escena excepto en los botones */
  font-family: 'Cinzel', serif;
  border-top: 1px solid rgba(212, 163, 115, 0.2);
}

.scene-nav-bar > * {
  pointer-events: auto;
}

.nav-counter {
  font-size: 13px;
  color: #efe2c7;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  letter-spacing: 1px;
  text-transform: uppercase;
  flex: 1;
}

#hallazgos-counter {
    text-align: right;
}

.nav-back-btn {
  background: none;
  border: none;
  color: #ffffff;
  padding: 5px 10px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
  font-weight: bold;
  letter-spacing: 2px;
}

.nav-back-btn:hover {
  color: #d4a373;
  transform: scale(1.1);
}

/* Ocultar los contadores antiguos del CSS para evitar conflictos si quedara alguno */
.mission-counter, .fragment-counter, .hitos-counter, .hallazgos-counter {
  display: none !important;
}

/* --- OVERLAYS NARRATIVOS (INTRO Y HINTS) --- */
.intro-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 30px;
  cursor: pointer;
  transition: opacity 1s ease;
}

.intro-text {
  font-family: 'Cinzel', serif;
  color: #efe2c7;
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 90%;
  opacity: 0;
  transition: opacity 1.5s ease;
}

.skip-hint {
  position: absolute;
  bottom: 30px;
  color: rgba(239, 226, 199, 0.4);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.hint-overlay {
  position: absolute;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8500;
  color: #efe2c7;
  font-family: 'Cinzel', serif;
  background: rgba(0,0,0,0.5);
  padding: 10px 20px;
  border-radius: 20px;
  pointer-events: none;
  animation: pulse-hint 2s infinite;
  white-space: nowrap;
}

@keyframes pulse-hint {
  0% { opacity: 0.4; }
  50% { opacity: 0.9; }
  100% { opacity: 0.4; }
}

/* --- TIC-TAC-TOE PUZZLE --- */
.tictactoe-puzzle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.ttt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  width: 240px;
  height: 240px;
  background: rgba(0, 0, 0, 0.4);
  padding: 10px;
  border-radius: 8px;
  border: 4px solid #5e432f;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.8);
}

.ttt-cell {
  background: #3c2a1e;
  border: 1px solid #5e432f;
  border-radius: 4px;
  font-size: 2rem;
  color: #efe2c7;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Almendra', serif;
}

.ttt-cell:hover:not(:disabled) {
  background: #5e432f;
  transform: scale(0.95);
}

.ttt-cell.player {
  color: #c8a46a;
  text-shadow: 0 0 10px rgba(200, 164, 106, 0.8);
}

.ttt-cell.ai {
  color: #a62626;
  text-shadow: 0 0 10px rgba(166, 38, 38, 0.8);
}

.retry-btn {
  margin-top: 10px;
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- MEJORA VISUAL PUZZLE VIEW (Semi-transparente) --- */
#puzzleView {
  background: rgba(27, 20, 15, 0.7) !important;
  backdrop-filter: blur(8px) brightness(0.6);
  border: 1px solid rgba(200, 164, 106, 0.3);
  box-shadow: 0 0 40px rgba(0,0,0,0.9);
}

.puzzle-container {
  background: transparent !important;
}

#puzzleView .panel-header {
  background: rgba(43, 31, 23, 0.5);
  border-bottom: 1px solid rgba(200, 164, 106, 0.2);
}

/* --- DEBUG PANEL (DEVELOPMENT ONLY) --- */
.debug-panel {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 250px;
  max-height: 80vh;
  background: rgba(0, 0, 0, 0.9);
  color: #00ff00;
  font-family: 'Courier New', Courier, monospace;
  z-index: 9999;
  border: 1px solid #00ff00;
  padding: 10px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
}

.debug-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #00ff00;
  margin-bottom: 10px;
  padding-bottom: 5px;
}

.debug-header h3 {
  font-size: 0.9rem;
  margin: 0;
}

.debug-header button {
  background: none;
  border: none;
  color: #ff0000;
  cursor: pointer;
  font-size: 1.2rem;
}

.debug-content {
  overflow-y: auto;
  flex: 1;
}

.debug-btn {
  display: block;
  width: 100%;
  padding: 5px;
  margin-bottom: 5px;
  background: #222;
  border: 1px solid #444;
  color: #ccc;
  text-align: left;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.2s;
}

.debug-btn:hover {
  background: #333;
  color: #fff;
  border-color: #00ff00;
}

.debug-btn.scene-jump {
  color: #66ccff;
}

.debug-scene-list h4 {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #888;
  margin: 10px 0 5px;
}

/* --- VIEW: TÉRMINOS Y CONDICIONES --- */
#view-terms {
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('assets/scenes/liebana_llegada.webp') no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.terms-container {
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
  animation: fadeInDown 0.6s ease-out;
}

.parchment-card {
  background: #f4e4bc url('assets/ui/parchment_texture.png'); /* Fallback color + texture */
  background-size: cover;
  border: 15px solid #5e432f;
  border-image: url('assets/ui/border_frame.png') 30 stretch;
  color: #2c1e14;
  padding: 0;
  position: relative;
}

.terms-header {
  padding: 20px;
  background: rgba(44, 30, 20, 0.1);
  border-bottom: 1px solid rgba(44, 30, 20, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.terms-header h2 {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  color: #5e432f;
}

.close-btn {
  background: none;
  border: none;
  font-size: 2rem;
  color: #5e432f;
  cursor: pointer;
  line-height: 1;
  transition: transform 0.2s;
}

.close-btn:hover {
  transform: scale(1.2);
  color: #a62626;
}

.terms-content {
  padding: 30px;
  overflow-y: auto;
  font-family: 'Merriweather', serif;
  line-height: 1.6;
  font-size: 0.95rem;
}

.terms-content h3 {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  margin: 20px 0 10px;
  color: #8c6a4a;
  border-bottom: 1px solid rgba(140, 106, 74, 0.3);
}

.terms-content p {
  margin-bottom: 15px;
}

.terms-footer {
  margin-top: 30px;
  text-align: center;
  padding-bottom: 10px;
}

.scrollable-view {
  overflow: hidden;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}