@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.68vh);
  height: min(100vh, 56.28vw);
  background: #000;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0,0,0,0.6);
  cursor: default;
}

.cursor-hand { cursor: pointer; }

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

/* ---------------- Personajes / sprites ---------------- */
#sprite-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.sprite {
  position: absolute;
  pointer-events: none;
  image-rendering: -webkit-optimize-contrast;
}
.sprite.facing-left { transform: scaleX(-1); }

/* ---------------- Teléfono: inserto de detalle ---------------- */
#phone-insert {
  position: absolute;
  width: 46%;
  aspect-ratio: 880 / 495;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  background-image: url('../assets/backgrounds/phone_table_reused.png');
  background-size: 1672px 941px;
  background-position: -550px -410px;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
  z-index: 35;
}
#phone-insert.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Close-up de Victoria sobre la llamada dividida */
#call-closeup-mask {
  position: absolute; inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
  z-index: 20;
}
#call-closeup-mask.visible { opacity: 1; }
#call-closeup-img {
  position: absolute;
  width: 1672px; height: 941px;
  left: 0; top: 0;
  transform-origin: 2.4% 32%;
}

/* ---------------- Diálogo (reutilizado del juego anterior: panel real + overlays %) ---------------- */
#dialogue-box {
  position: absolute;
  left: 16%;
  bottom: 3%;
  width: 68%;
  aspect-ratio: 2048 / 768;
  background-image: url('../assets/ui/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: 1; transform: translateY(0); pointer-events: auto; }
#dialogue-box.visible.idle-dim { opacity: 0.25; }
#dialogue-box.visible.idle-dim:hover { opacity: 1; }

#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.75);
  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); }

#mode-btn {
  position: absolute;
  top: 70%;
  left: 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.75);
  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;
}
#mode-btn:hover { color: var(--gold); border-color: var(--gold); }
#mode-btn.auto-active { color: #1a0d0a; background: var(--gold); border-color: var(--gold); }

#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%; }
#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; }
#dialogue-advance-hint {
  position: absolute;
  right: 4%;
  bottom: 8%;
  width: 2.2%;
  aspect-ratio: 1;
  border-right: 3px solid rgba(255,233,184,0.8);
  border-bottom: 3px solid rgba(255,233,184,0.8);
  transform: rotate(-45deg);
  opacity: 0;
  animation: advance-bounce 1.1s ease-in-out infinite;
}
#dialogue-box.can-advance #dialogue-advance-hint { opacity: 1; }
@keyframes advance-bounce {
  0%, 100% { transform: rotate(-45deg) translate(0,0); }
  50% { transform: rotate(-45deg) translate(3px,3px); }
}

/* ---------------- Portada / nombre-pila reutilizable (tira de 3 botones) ---------------- */
.ornate-chip {
  background-image: url('../assets/ui/ui_buttons_strip.png');
  background-size: 100% 300%;
  background-repeat: no-repeat;
}
.ornate-chip.chip-1 { background-position: 0 0%; }
.ornate-chip.chip-2 { background-position: 0 50%; }
.ornate-chip.chip-3 { background-position: 0 100%; }

/* ---------------- Meditación: barra + aguja ---------------- */
#meditation-ui {
  position: absolute;
  left: 50%; bottom: 7%;
  transform: translateX(-50%);
  width: 46%;
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
  z-index: 30;
}
#meditation-ui.visible { opacity: 1; pointer-events: auto; }
#med-track {
  position: relative;
  height: 18px;
  border-radius: 999px;
  background: rgba(20,8,10,0.55);
  border: 2px solid rgba(217,178,106,0.6);
  overflow: hidden;
}
#med-zone {
  position: absolute;
  top: 0; bottom: 0;
  background: rgba(217,178,106,0.45);
  border-left: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
}
#med-needle {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 4px;
  background: #fff6e9;
  box-shadow: 0 0 8px rgba(255,246,233,0.9);
  left: 0%;
}
#med-needle.flash { background: #ffd27a; }
#med-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.med-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(241,230,216,0.25);
  border: 1px solid rgba(217,178,106,0.5);
  transition: background 200ms ease, transform 200ms ease;
}
.med-dot.lit { background: var(--gold); transform: scale(1.2); }
#med-btn {
  display: block;
  margin: 14px auto 0;
  padding: 0.5em 1.6em;
  font-family: 'Philosopher', serif;
  font-weight: 700;
  font-size: clamp(13px, 1.6vw, 18px);
  color: #ffe9b8;
  background: rgba(20,8,10,0.6);
  border: 1px solid rgba(217,178,106,0.7);
  border-radius: 999px;
  cursor: pointer;
}
#med-btn:hover { background: rgba(217,178,106,0.25); }
#med-track.shake { animation: shake 0.12s linear; }
@keyframes shake { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }

/* ---------------- Tienda: estante / recolección ---------------- */
#shelf-layer {
  position: absolute; inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
  z-index: 25;
}
#shelf-layer.visible { opacity: 1; pointer-events: auto; }
.veg-slot {
  position: absolute;
  cursor: pointer;
  transition: opacity 100ms ease, transform 100ms ease;
}
.veg-slot img { width: 100%; height: 100%; pointer-events: none; }
.veg-slot.taken { opacity: 0; transform: scale(0.94); pointer-events: none; }
#basket-count {
  position: absolute;
  font-family: 'Philosopher', serif;
  font-weight: 700;
  font-size: clamp(16px, 2.2vw, 26px);
  color: #ffe9b8;
  -webkit-text-stroke: 2px rgba(26,10,13,0.85);
  paint-order: stroke fill;
  text-align: center;
}
#shelf-objective {
  position: absolute;
  top: 4%; left: 50%;
  transform: translateX(-50%);
  font-family: 'Philosopher', serif;
  font-weight: 700;
  font-size: clamp(13px, 1.7vw, 19px);
  color: #ffe9b8;
  background: rgba(20,8,10,0.55);
  border: 1px solid rgba(217,178,106,0.6);
  border-radius: 999px;
  padding: 0.35em 1.4em;
}

/* ---------------- Mundo de tienda (panorama con cámara) ---------------- */
#store-viewport {
  position: absolute; inset: 0;
  overflow: hidden;
  display: none;
}
#store-world {
  position: absolute; top: 0; left: 0;
  height: 100%;
}
#store-world img { display: block; height: 100%; width: auto; }
#store-world .store-sprite { position: absolute; }

/* ---------------- Objetivo global ---------------- */
#objective-label {
  position: absolute;
  top: 4%; left: 50%;
  transform: translateX(-50%);
  font-family: 'Philosopher', serif;
  font-weight: 700;
  font-size: clamp(12px, 1.5vw, 17px);
  color: #ffe9b8;
  background: rgba(20,8,10,0.5);
  border: 1px solid rgba(217,178,106,0.55);
  border-radius: 999px;
  padding: 0.3em 1.2em;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
  z-index: 15;
  white-space: nowrap;
}
#objective-label.visible { opacity: 1; }

/* ---------------- Puerta / hotspots ---------------- */
.hotspot {
  position: absolute;
  cursor: pointer;
}

/* ---------------- Controles móviles ---------------- */
#mobile-controls {
  position: absolute;
  bottom: 4%;
  left: 0; right: 0;
  display: none;
  justify-content: space-between;
  padding: 0 4%;
  z-index: 45;
  pointer-events: none;
}
#mobile-controls.visible { display: flex; }
.arrow-btn {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(20,8,10,0.55);
  border: 1px solid rgba(217,178,106,0.6);
  color: #ffe9b8;
  font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
  user-select: none;
}

/* ---------------- Ajustes ---------------- */
#settings-btn {
  position: absolute;
  top: 3%; right: 3%;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(20,8,10,0.55);
  border: 1px solid rgba(217,178,106,0.6);
  color: #ffe9b8;
  font-size: 18px;
  cursor: pointer;
  z-index: 70;
}
#settings-panel {
  position: absolute;
  top: 8%; right: 3%;
  width: 230px;
  background: rgba(20,8,10,0.92);
  border: 1px solid rgba(217,178,106,0.6);
  border-radius: 12px;
  padding: 14px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 70;
}
#settings-panel.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.settings-title {
  font-family: 'Philosopher', serif;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 8px;
  font-size: 14px;
}
.volume-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 6px;
}
.volume-row input { width: 110px; }
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  margin-top: 10px;
}
.settings-row button {
  font-size: 11px;
  padding: 0.3em 0.7em;
  border-radius: 999px;
  border: 1px solid rgba(217,178,106,0.6);
  background: transparent;
  color: #f1e6d8;
  cursor: pointer;
}
.settings-row button.active { background: var(--gold); color: #1a0d0a; }

/* ---------------- Fundido ---------------- */
#fade-overlay {
  position: absolute; inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 80;
}

/* ---------------- Pantallas overlay ---------------- */
.overlay-screen {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: rgba(8,4,5,0.88);
  text-align: center;
  padding: 0 8%;
  z-index: 90;
}
.overlay-screen.visible { display: flex; }
.overlay-title {
  font-family: 'Philosopher', serif;
  font-weight: 700;
  font-size: clamp(22px, 4vw, 40px);
  color: var(--gold);
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}
.overlay-sub {
  font-size: clamp(13px, 1.6vw, 17px);
  color: rgba(241,230,216,0.85);
  max-width: 540px;
}

#win-screen {
  background: #000 url('../assets/ui/win_screen.png') center / cover no-repeat;
  justify-content: flex-end;
  padding-bottom: 7%;
}
#win-screen .overlay-btn {
  box-shadow: 0 4px 18px rgba(0,0,0,0.5);
}
.overlay-btn {
  font-family: 'Philosopher', serif;
  font-weight: 700;
  font-size: clamp(14px, 1.8vw, 19px);
  color: #1a0d0a;
  background: var(--gold);
  border: none;
  border-radius: 999px;
  padding: 0.7em 2em;
  cursor: pointer;
}
.overlay-btn:hover { filter: brightness(1.08); }

#loading-screen {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #0a0507;
  z-index: 95;
}
#loading-onion {
  width: 56px; height: 56px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 35%, #f0dba8, #c9924a 70%, #9c6a2e);
  position: relative;
  animation: onion-bob 1.1s ease-in-out infinite;
}
#loading-onion::after {
  content: '';
  position: absolute;
  top: -14px; left: 50%;
  width: 4px; height: 16px;
  background: #7a9a5a;
  transform: translateX(-50%) rotate(8deg);
  border-radius: 2px;
}
@keyframes onion-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
#loading-text { font-family: 'Philosopher', serif; color: var(--gold); font-size: 16px; }
#loading-status { font-size: 12px; color: rgba(241,230,216,0.7); }
#loading-retry {
  display: none;
  font-size: 12px;
  padding: 0.4em 1.2em;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: transparent;
  color: #f1e6d8;
  cursor: pointer;
}

@media (hover: none) and (pointer: coarse) {
  #mobile-controls.store-active { display: flex; }
}