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

:root {
  --ink: #141418;
  --gold: #c9a24a;
  --red: #7a1620;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #050506;
  color: #f1ece0;
  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; }
.bg-img.zoom-in { animation: bgZoomIn 1.4s ease forwards; }
.bg-img.zoom-impact { animation: bgZoomImpact 0.6s ease forwards; }
@keyframes bgZoomIn { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes bgZoomImpact {
  0% { transform: scale(1); }
  30% { transform: scale(1.1); }
  100% { transform: scale(1.04); }
}

/* ---------------- 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); }

/* ---------------- Ajedrez: inserto de jugadas ---------------- */
#chess-layer {
  position: absolute; inset: 8% 14%;
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
  z-index: 18;
}
#chess-layer.visible { opacity: 1; }
#chess-board { position: absolute; width: 100%; height: 100%; object-fit: contain; }
.chess-piece { position: absolute; width: 24%; opacity: 0; transition: opacity 200ms ease, left 300ms ease, top 300ms ease; }
.chess-piece.visible { opacity: 1; }

#impact-text {
  position: absolute; left: 50%; top: 38%;
  transform: translate(-50%, -50%) scale(0.6);
  font-family: 'Philosopher', serif;
  font-weight: 700;
  font-size: clamp(28px, 6vw, 64px);
  color: #ffde7a;
  -webkit-text-stroke: 3px rgba(40,10,10,0.9);
  paint-order: stroke fill;
  text-shadow: 0 0 24px rgba(255,180,40,0.6);
  opacity: 0;
  z-index: 50;
  pointer-events: none;
  white-space: nowrap;
}
#impact-text.show { animation: impactPop 900ms ease forwards; }
@keyframes impactPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  30% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* ---------------- Teléfono: inserto de detalle ---------------- */
#phone-insert {
  position: absolute;
  width: 40%; aspect-ratio: 168/89;
  left: 50%; top: 68%;
  transform: translate(-50%, -50%) scale(0.92);
  background-image: url('../assets/props/phone_table.png');
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 10px 30px 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); }
#phone-insert.vibrate { animation: phoneVibrate 80ms linear infinite; }
@keyframes phoneVibrate { 0%,100% { transform: translate(-50%,-50%) translateX(0); } 50% { transform: translate(-50%,-50%) translateX(3px); } }

/* ---------------- Diálogo ---------------- */
#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, #mode-btn {
  position: absolute; top: 70%;
  font-family: 'Nunito', sans-serif;
  font-size: clamp(8px, 0.9vw, 11px);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(241,236,224,0.75);
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(201,162,74,0.45);
  border-radius: 999px;
  padding: 0.3em 0.8em;
  cursor: pointer;
  pointer-events: auto;
  white-space: nowrap;
}
#translate-btn { right: 13%; }
#mode-btn { left: 13%; }
#translate-btn:hover, #mode-btn:hover { color: var(--gold); border-color: var(--gold); }
#translate-btn.active, #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(50,12,16,0.9);
  paint-order: stroke fill;
}
.speaker-victoria #speaker-name { color: #ffd9e6; }
.speaker-agent_1 #speaker-name, .speaker-agent_2 #speaker-name, .speaker-agent_3 #speaker-name { color: #c9d6ff; }
#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-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,236,224,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); } }

/* ---------------- Minijuego: torre de naipes ---------------- */
#cards-ui {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  width: 52%;
  opacity: 0; transition: opacity 250ms ease; pointer-events: none;
  z-index: 30;
}
#cards-ui.visible { opacity: 1; pointer-events: auto; }
#cards-track {
  position: relative; height: 20px; border-radius: 999px;
  background: rgba(10,6,8,0.6); border: 2px solid rgba(201,162,74,0.6);
  overflow: hidden; cursor: pointer;
}
#cards-zone { position: absolute; top: 0; bottom: 0; background: rgba(90,190,110,0.55); border-left: 2px solid #8be39c; border-right: 2px solid #8be39c; }
#cards-needle { position: absolute; top: -4px; bottom: -4px; width: 4px; background: #fff6e9; box-shadow: 0 0 8px rgba(255,246,233,0.9); left: 0%; }
#cards-track.shake { animation: shake 0.12s linear; }
@keyframes shake { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
#cards-progress {
  text-align: center; margin-top: 8px;
  font-family: 'Philosopher', serif; font-weight: 700; color: var(--gold);
  font-size: clamp(13px, 1.6vw, 18px);
}
#cards-hint {
  text-align: center; margin-top: 2px;
  font-size: clamp(10px, 1.1vw, 13px); color: rgba(241,236,224,0.75);
}

/* ---------------- Opciones de diálogo con agentes ---------------- */
#choice-panel {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  width: 70%;
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 42;
}
#choice-panel.visible { opacity: 1; pointer-events: auto; }
.choice-btn {
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: clamp(12px, 1.5vw, 16px);
  color: #fff6e9;
  background: rgba(15,8,10,0.78);
  border: 1px solid rgba(201,162,74,0.55);
  border-radius: 14px;
  padding: 0.7em 1.2em;
  cursor: pointer;
  text-align: left;
  transition: background 150ms ease, border-color 150ms ease;
}
.choice-btn:hover { background: rgba(201,162,74,0.22); border-color: var(--gold); }
.choice-btn.wrong-flash { animation: wrongFlash 350ms ease; }
@keyframes wrongFlash { 0%,100% { background: rgba(15,8,10,0.78); } 50% { background: rgba(122,22,32,0.55); } }

/* ---------------- 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(10,6,8,0.5);
  border: 1px solid rgba(201,162,74,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; }

/* ---------------- 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(10,6,8,0.55); border: 1px solid rgba(201,162,74,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(10,6,8,0.55); border: 1px solid rgba(201,162,74,0.6);
  color: #ffe9b8; font-size: 18px; cursor: pointer; z-index: 70;
}
#settings-panel {
  position: absolute; top: 8%; right: 3%; width: 220px;
  background: rgba(10,6,8,0.92); border: 1px solid rgba(201,162,74,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; }

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

#continuara-overlay {
  position: absolute; inset: 0; background: #000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; z-index: 85;
  transition: opacity 600ms ease;
}
#continuara-overlay.visible { opacity: 1; }
#continuara-text {
  font-family: 'Philosopher', serif; font-weight: 700;
  font-size: clamp(24px, 4.5vw, 46px);
  color: var(--gold);
  letter-spacing: 0.04em;
}

/* ---------------- Pantallas overlay ---------------- */
.overlay-screen {
  position: absolute; inset: 0; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 24px;
  background: rgba(5,5,6,0.9); 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,236,224,0.85); max-width: 540px; }
.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); }

/* La ilustración final ya trae su propio texto ("Молодець!"/"Далі буде...");
   el overlay queda transparente, solo con el botón, lejos de ese texto. */
#win-screen {
  background: transparent;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 4% 4%;
}

#loading-screen {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  background: #050506; z-index: 95;
}
#loading-hat {
  width: 50px; height: 34px;
  background: radial-gradient(ellipse at 50% 40%, #fff, #e4ddcf 70%, #b8ae99);
  border-radius: 50% 50% 10% 10% / 70% 70% 30% 30%;
  position: relative;
  animation: hat-bob 1.1s ease-in-out infinite;
}
#loading-hat::after {
  content: ''; position: absolute; left: -8px; bottom: -4px; width: 66px; height: 10px;
  background: #e4ddcf; border-radius: 50%;
}
@keyframes hat-bob { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(-6deg); } }
#loading-text { font-family: 'Philosopher', serif; color: var(--gold); font-size: 16px; }
#loading-status { font-size: 12px; color: rgba(241,236,224,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: #f1ece0; cursor: pointer;
}