@import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&family=Nunito:wght@400;600;800&display=swap');

:root {
  --ink: #2a1510;
  --gold: #d9b26a;
  --burgundy: #5c1620;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #0a0507;
  color: #f1e6d8;
  font-family: 'Nunito', sans-serif;
  overflow: hidden;
}

#game-root {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#stage {
  position: relative;
  width: min(100vw, 177.78vh);
  height: min(100vh, 56.25vw);
  background: #000;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0,0,0,0.6);
  cursor: default;
}

.bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}
#bg-a { opacity: 1; }

/* ---------------- Cursores ---------------- */
/* Mano abierta/cerrada (habitación) y cámara (sesión de fotos), al estilo del juego
   de los sombreros de colores: iconos propios, no el puntero genérico del sistema. */
.cursor-hand {
  cursor: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8ZyBmaWxsPSIjZjFjZjlhIiBzdHJva2U9IiMzYTE3MTAiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbGluZWNhcD0icm91bmQiPgogICAgPHBhdGggZD0iTTkgMTUgTDkgN2EyIDIgMCAwIDEgNCAwdjYgTTEzLjUgMTMuNSBWNWEyIDIgMCAwIDEgNCAwdjguMyBNMTggMTMuNSBWNmEyIDIgMCAwIDEgNCAwdjggTTIyLjUgMTQgVjkuNWEyIDIgMCAwIDEgNCAwdjljMCA1LTMuMiA5LTguMyA5aC0yLjdjLTQgMC02LTItNy41LTUuNmwtMi42LTUuN2ExLjggMS44IDAgMCAxIDMuMS0xLjlsMyA0VjE3LjUiLz4KICA8L2c+Cjwvc3ZnPgo=') 9 7, pointer;
}
.cursor-hand:active {
  cursor: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8ZyBmaWxsPSIjZjFjZjlhIiBzdHJva2U9IiMzYTE3MTAiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbGluZWNhcD0icm91bmQiPgogICAgPHBhdGggZD0iTTkuNSAxNmMwLTIuMiAxLjQtMy40IDMuMi0zLjRoNy4zYzMuMSAwIDUuMyAyLjIgNS4zIDUuNHYyLjhjMCA1LTMuMiA5LTguMyA5aC0xLjhjLTQgMC02LjMtMi03LjYtNS44bC0xLjgtNC42YTEuOCAxLjggMCAwIDEgMy4yLTEuNnoiLz4KICAgIDxwYXRoIGQ9Ik0xMyAxMy4ydjQuNiBNMTYuNSAxMi44djUgTTIwIDEzLjJ2NC42IiBzdHJva2U9IiMzYTE3MTAiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIvPgogIDwvZz4KPC9zdmc+Cg==') 12 12, pointer;
}
#stage.search-mode, #stage.search-mode .animal-hitbox {
  cursor: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8cmVjdCB4PSIzIiB5PSIxMSIgd2lkdGg9IjI2IiBoZWlnaHQ9IjE2IiByeD0iMyIgZmlsbD0iIzI0MTIxMCIgc3Ryb2tlPSIjZjFjZjlhIiBzdHJva2Utd2lkdGg9IjEuNCIvPgogIDxyZWN0IHg9IjExIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iNSIgcng9IjEuNCIgZmlsbD0iIzI0MTIxMCIgc3Ryb2tlPSIjZjFjZjlhIiBzdHJva2Utd2lkdGg9IjEuNCIvPgogIDxjaXJjbGUgY3g9IjE2IiBjeT0iMTkuNSIgcj0iNS42IiBmaWxsPSIjMTQwYTA4IiBzdHJva2U9IiNmMWNmOWEiIHN0cm9rZS13aWR0aD0iMS40Ii8+CiAgPGNpcmNsZSBjeD0iMTYiIGN5PSIxOS41IiByPSIyLjMiIGZpbGw9IiNmMWNmOWEiLz4KICA8Y2lyY2xlIGN4PSIyMy41IiBjeT0iMTQuNSIgcj0iMS4xIiBmaWxsPSIjZjFjZjlhIi8+Cjwvc3ZnPgo=') 16 19, crosshair;
}

/* ---------------- Hotspots ---------------- */
.hotspot {
  position: absolute;
  display: none;
  pointer-events: none;
  transition: filter 180ms ease;
}
.hotspot.enabled { display: block; pointer-events: auto; }
.hotspot.disabled { pointer-events: none !important; }

#phone-hotspot {
  left: 36%; top: 42%; width: 32%; height: 42%;
}

#camera-hotspot {
  left: 35.5%; top: 41%; width: 8%; aspect-ratio: 1536 / 1024;
  background-image: url('../assets/camera/camera_item.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
#camera-hotspot:hover { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)) brightness(1.18); }
#camera-hotspot.taken { display: none; }

#door-hotspot {
  left: 1%; top: 10%; width: 17%; height: 88%;
}
#door-hotspot:hover { filter: brightness(1.08); }

/* ---------------- Victoria ---------------- */
#victoria-canvas {
  position: absolute;
  pointer-events: none;
  image-rendering: -webkit-optimize-contrast;
  z-index: 15;
}

/* ---------------- Viewfinder ---------------- */
#viewfinder {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 250ms ease;
}
#viewfinder.visible { opacity: 1; }
#viewfinder .corner {
  position: absolute;
  width: 6%;
  height: 6%;
  border: 2.5px solid rgba(241,230,216,0.75);
}
#viewfinder .tl { top: 3%; left: 3%; border-right: none; border-bottom: none; }
#viewfinder .tr { top: 3%; right: 3%; border-left: none; border-bottom: none; }
#viewfinder .bl { bottom: 3%; left: 3%; border-right: none; border-top: none; }
#viewfinder .br { bottom: 3%; right: 3%; border-left: none; border-top: none; }
#viewfinder .center-mark {
  position: absolute; left: 50%; top: 50%;
  width: 16px; height: 16px;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(241,230,216,0.4);
  border-radius: 50%;
}
#viewfinder .vignette {
  position: absolute; inset: 0;
  box-shadow: inset 0 0 14vw rgba(0,0,0,0.35);
}

#objective-label {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Philosopher', serif;
  letter-spacing: 0.12em;
  font-size: clamp(14px, 2.1vw, 24px);
  color: var(--gold);
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
#objective-label.visible { opacity: 1; }

/* ---------------- Animales ---------------- */
.animal-hitbox {
  position: absolute;
}

/* ---------------- Foto resultado ---------------- */
#photo-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  background: rgba(10,5,7,0.55);
}
#photo-img {
  max-width: 58%;
  max-height: 72%;
  object-fit: contain;
  border: 10px solid #f3ead9;
  border-bottom-width: 34px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
  background: #f3ead9;
}

/* ---------------- Flash / fade ---------------- */
#flash-overlay {
  position: absolute; inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 50;
}
#fade-overlay {
  position: absolute; inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 60;
}

/* ---------------- Diálogo ---------------- */
/* Panel real (con transparencia) a su proporción nativa (2048x768), sin estirar.
   La "pestaña" del nombre queda arriba-izquierda; el texto va en la barra inferior. */
#dialogue-box {
  position: absolute;
  left: 16%;
  bottom: 3%;
  width: 68%;
  aspect-ratio: 2048 / 768;
  background-image: url('../assets/ui_and_portraits/ui_dialog_panel.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 280ms ease, transform 280ms ease;
  pointer-events: none;
  z-index: 40;
}
#dialogue-box.visible { opacity: 0.8; transform: translateY(0); pointer-events: auto; }
#dialogue-box.visible.idle-dim { opacity: 0.18; }
#dialogue-box.visible.idle-dim:hover { opacity: 0.92; }
#translate-btn {
  position: absolute;
  top: 70%;
  right: 13%;
  font-family: 'Nunito', sans-serif;
  font-size: clamp(8px, 0.9vw, 11px);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(241,230,216,0.65);
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(217,178,106,0.45);
  border-radius: 999px;
  padding: 0.3em 0.8em;
  cursor: pointer;
  pointer-events: auto;
  white-space: nowrap;
}
#translate-btn:hover { color: var(--gold); border-color: var(--gold); }
#translate-btn.active { color: #1a0d0a; background: var(--gold); border-color: var(--gold); }
#back-btn {
  position: absolute;
  top: 70%;
  left: 13%;
  font-size: clamp(13px, 1.7vw, 18px);
  color: rgba(241,230,216,0.8);
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(217,178,106,0.55);
  border-radius: 999px;
  width: 2.3em;
  height: 2.3em;
  line-height: 2.2em;
  text-align: center;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
}
#back-btn:hover { color: var(--gold); border-color: var(--gold); }
#dialogue-translation {
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  bottom: 19.5%;
  font-size: clamp(9px, 1.1vw, 13px);
  font-style: italic;
  line-height: 1.25;
  color: rgba(241,230,216,0.85);
  -webkit-text-stroke: 2px rgba(20,8,10,0.8);
  paint-order: stroke fill;
  opacity: 0;
  display: none;
  transition: opacity 200ms ease;
}
#dialogue-translation.visible { opacity: 1; display: block; }
#speaker-name {
  position: absolute;
  left: 7.8%;
  top: 30.2%;
  width: 26.9%;
  height: 7.3%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Philosopher', serif;
  font-weight: 700;
  font-size: clamp(10px, 1.3vw, 16px);
  color: #ffe9b8;
  -webkit-text-stroke: 2.5px rgba(58,16,20,0.9);
  paint-order: stroke fill;
}
.speaker-victoria #speaker-name { color: #ffd9e6; }
#dialogue-text {
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 41%;
  height: 32%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(14px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.28;
  color: #fff6e9;
  -webkit-text-stroke: 3px rgba(26,10,13,0.85);
  paint-order: stroke fill;
  overflow: hidden;
}
#dialogue-box:has(#dialogue-translation.visible) #dialogue-text { max-height: 18%; }

/* ---------------- Retrato de llamada / emoción ---------------- */
#caller-portrait {
  position: absolute;
  left: 17.5%;
  bottom: 34%;
  width: 11%;
  aspect-ratio: 1312 / 1199;
  background-image: url('../assets/ui_and_portraits/portrait_jorge_phone.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
  z-index: 38; /* detrás del cuadro de diálogo (40): queda tapado a medias, no sobrepuesto */
}
#caller-portrait.visible { opacity: 1; transform: translateY(0) scale(1); }

#emote-badge {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 20%;
  aspect-ratio: 354.8 / 443.5;
  transform: translate(-50%, -50%) scale(0.8);
  background-image: url('../assets/ui_and_portraits/sheet_emoticons.png');
  background-size: 500% 200%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms ease, transform 320ms ease;
  z-index: 46;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.55));
}
#emote-badge.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------------- Elecciones ---------------- */
#choices-layer {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translate(-50%, 10px);
  display: flex;
  flex-direction: column;
  gap: 1.2%;
  width: 60%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease, transform 320ms ease;
  z-index: 45;
}
#choices-layer.visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.choice-btn {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  box-shadow: none;
  outline: none;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: clamp(13px, 1.6vw, 19px);
  color: #fbeedd;
  background-image: url('../assets/ui_and_portraits/ui_choice_buttons.png');
  background-size: 100% 300%;
  background-position: center 0%;
  background-repeat: no-repeat;
  width: 100%;
  aspect-ratio: 1536 / 341.333;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  padding: 0 8% 0 14%;
  cursor: pointer;
  text-shadow: 0 2px 4px rgba(0,0,0,0.7);
  transition: filter 150ms ease, transform 100ms ease;
}
.choice-btn:nth-child(2) { background-position: center 50%; }
.choice-btn:nth-child(3) { background-position: center 100%; }
.choice-btn:hover { filter: brightness(1.15); }
.choice-btn:active { transform: scale(0.98); }

/* ---------------- Controles móviles ---------------- */
#mobile-controls {
  position: absolute;
  left: 0; right: 0; bottom: 5%;
  display: flex;
  justify-content: space-between;
  padding: 0 5%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 35;
}
#mobile-controls.visible { opacity: 1; pointer-events: auto; }
.arrow-btn {
  width: 15vw; max-width: 84px; height: 15vw; max-height: 84px;
  border-radius: 50%;
  border: 2px solid rgba(241,230,216,0.55);
  background: rgba(20,10,12,0.5);
  color: #f1e6d8;
  font-size: 7vw;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.55;
  user-select: none;
  touch-action: none;
}
.arrow-btn:active { opacity: 0.9; transform: scale(0.95); }

@media (min-width: 900px) {
  #mobile-controls { display: none; }
}

/* ---------------- Toast ---------------- */
#toast {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translate(-50%, -8px);
  background: rgba(20,10,12,0.78);
  border: 1px solid rgba(217,178,106,0.5);
  padding: 0.8% 2.4%;
  border-radius: 999px;
  font-size: clamp(12px, 1.4vw, 16px);
  color: var(--gold);
  opacity: 0;
  transition: opacity 250ms ease, transform 250ms ease;
  pointer-events: none;
  z-index: 55;
}
#toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- Ajustes de audio ---------------- */
#settings-btn {
  position: absolute;
  top: 3%;
  right: 2.5%;
  width: 7%;
  aspect-ratio: 1 / 1;
  max-width: 44px;
  border-radius: 50%;
  border: 1px solid rgba(217,178,106,0.55);
  background: rgba(20,10,12,0.55);
  color: rgba(241,230,216,0.85);
  font-size: clamp(14px, 2vw, 20px);
  cursor: pointer;
  pointer-events: auto;
  z-index: 65;
  transition: transform 200ms ease, background 150ms ease;
}
#settings-btn:hover { background: rgba(20,10,12,0.8); color: var(--gold); transform: rotate(25deg); }

#settings-panel {
  position: absolute;
  top: 9%;
  right: 2.5%;
  width: 30%;
  min-width: 180px;
  background: linear-gradient(160deg, rgba(42,13,20,0.96) 0%, rgba(20,8,10,0.97) 100%);
  border: 1px solid rgba(217,178,106,0.5);
  border-radius: 14px;
  padding: 4% 6%;
  box-shadow: 0 10px 26px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 64;
}
#settings-panel.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.settings-title {
  font-family: 'Philosopher', serif;
  color: var(--gold);
  font-size: clamp(12px, 1.5vw, 16px);
  margin-bottom: 8%;
  text-align: center;
  letter-spacing: 0.06em;
}
.volume-row {
  display: flex;
  align-items: center;
  gap: 6%;
  margin-bottom: 6%;
  font-size: clamp(10px, 1.2vw, 13px);
  color: #fbeedd;
}
.volume-row span { width: 36%; flex-shrink: 0; }
.volume-row input[type="range"] {
  flex: 1;
  accent-color: var(--gold);
  cursor: pointer;
  height: 4px;
}

/* ---------------- Pantallas overlay ---------------- */
.overlay-screen {
  position: absolute; inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4%;
  background: rgba(6,3,4,0.88);
  z-index: 70;
  text-align: center;
  padding: 6%;
}
.overlay-screen.visible { display: flex; }
.overlay-title {
  font-family: 'Philosopher', serif;
  font-size: clamp(22px, 4vw, 40px);
  color: var(--gold);
  letter-spacing: 0.08em;
}
.overlay-btn {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: clamp(14px, 1.8vw, 20px);
  padding: 2.6% 6%;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, #7a2430, #4a0f18);
  color: #fbeedd;
  cursor: pointer;
}
.overlay-btn:hover { filter: brightness(1.15); }

#start-overlay {
  background: #080406;
  z-index: 80;
}
#start-overlay .overlay-title { font-size: clamp(18px, 3vw, 30px); }

#win-screen {
  background: rgba(0,0,0,0.0);
  align-items: flex-end;
  padding-bottom: 6%;
}
#win-screen .overlay-btn { margin-top: 0; }