/* ==========================================================================
   Villa Ñ — estilos
   El mundo se dibuja en canvas a 240x160 y se escala por CSS (pixel art).
   El diálogo y el HUD son DOM: el texto didáctico debe ser legible siempre.
   ========================================================================== */

:root {
  --terracota:   #c1502e;
  --terracota-d: #8c3620;
  --ocre:        #d9a441;
  --oliva:       #6b7a3a;
  --indigo:      #3b4a7a;
  --dorado:      #f2c14e;
  --noche:       #1a1410;
  --pergamino:   #f6efe2;
  --tinta:       #221a14;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--noche);
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

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

/* El escenario mantiene la proporción 3:2 del canvas y limita por alto o ancho,
   lo que permite embeberlo en un iframe sin romper el layout. */
#stage {
  position: relative;
  aspect-ratio: 3 / 2;
  width: min(100%, calc(100vh * 1.5));
  max-height: 100%;
  overflow: hidden;
  background: #0f0c0a;
  box-shadow: 0 0 0 2px rgba(0,0,0,.4);
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ---------- HUD ---------- */

#hud {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .5em .8em;
  font-size: clamp(11px, 1.7vh, 15px);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pergamino);
  text-shadow: 0 2px 0 rgba(0,0,0,.65);
  pointer-events: none;
}
.hud-level {
  background: var(--dorado);
  color: var(--tinta);
  padding: .15em .5em;
  border-radius: 3px;
  text-shadow: none;
}

.hud-coins {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  color: var(--dorado);
}
.coin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--dorado);
  color: var(--tinta);
  font-weight: 800;
  text-shadow: none;
}
.hud-mute {
  pointer-events: auto;
  border: none;
  background: rgba(246,239,226,.16);
  color: var(--pergamino);
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
  text-shadow: none;
  transition: background .2s ease, opacity .2s ease;
}
.hud-mute:hover { background: rgba(246,239,226,.3); }
.hud-mute.is-muted { opacity: .45; text-decoration: line-through; }

/* Latido al cobrar monedas */
.hud-coins.is-earned { animation: coinPop .4s ease; }
@keyframes coinPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* ---------- Pista contextual ---------- */

#hint {
  position: absolute;
  top: 0; right: 0;
  padding: .5em .8em;
  font-size: clamp(11px, 1.6vh, 14px);
  color: rgba(246,239,226,.8);
  text-shadow: 0 2px 0 rgba(0,0,0,.65);
  pointer-events: none;
}
#hint[hidden] { display: none; }

/* ---------- Caja de diálogo ---------- */

#dialogue {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 3%;
  background: var(--pergamino);
  border: 3px solid var(--terracota-d);
  border-radius: 6px;
  box-shadow: 0 6px 0 rgba(0,0,0,.35);
  padding: clamp(.7em, 2vh, 1.1em) clamp(.9em, 2.4vh, 1.3em);
  animation: dlgIn .18s ease-out;
  max-height: 86%;
  overflow-y: auto;
}
#dialogue[hidden] { display: none; }

.dlg-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: .35em;
}

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

/* Sacudida al fallar (se usará en la Fase 2) */
#dialogue.is-wrong { animation: dlgShake .3s ease; }
@keyframes dlgShake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.dlg-name {
  font-size: clamp(11px, 1.6vh, 14px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--terracota);
}

/* ---------- Corazones ---------- */

.dlg-hearts {
  display: flex;
  gap: .18em;
  font-size: clamp(13px, 1.9vh, 17px);
  line-height: 1;
  flex-shrink: 0;
}
.dlg-hearts[hidden] { display: none; }
.heart { color: var(--terracota); }
.heart.is-lost { color: rgba(34,26,20,.2); }
.heart.is-breaking { animation: heartBreak .45s ease forwards; }
@keyframes heartBreak {
  0%   { transform: scale(1.35); color: var(--terracota); }
  100% { transform: scale(1); color: rgba(34,26,20,.2); }
}

/* ---------- Opciones de respuesta ---------- */

.dlg-options {
  list-style: none;
  margin: .9em 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45em;
}
.dlg-options[hidden] { display: none; }

.dlg-option {
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: clamp(15px, 2.1vh, 18px);
  line-height: 1.35;
  color: var(--tinta);
  background: #fff;
  border: 2px solid rgba(140,54,32,.28);
  border-radius: 5px;
  padding: .55em .8em;
  cursor: pointer;
  display: flex;
  gap: .6em;
  align-items: baseline;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.dlg-option .opt-key {
  font-size: .78em;
  font-weight: 800;
  color: var(--terracota);
  flex-shrink: 0;
  min-width: 1.1em;
}
.dlg-option.is-selected {
  border-color: var(--terracota);
  background: #fffaf0;
  transform: translateX(3px);
}
.dlg-option.is-correct {
  border-color: #4a7c3f;
  background: #eaf6e6;
}
.dlg-option.is-incorrect {
  border-color: #b23b2c;
  background: #fbe9e6;
}
.dlg-option:disabled { cursor: default; }

/* ---------- Feedback gramatical ---------- */

.dlg-feedback {
  margin-top: .8em;
  padding: .6em .8em;
  border-radius: 5px;
  font-size: clamp(14px, 2vh, 17px);
  line-height: 1.4;
  border-left: 4px solid;
}
.dlg-feedback[hidden] { display: none; }
.dlg-feedback.is-ok {
  background: #eaf6e6;
  border-color: #4a7c3f;
  color: #26491f;
}
.dlg-feedback.is-bad {
  background: #fbe9e6;
  border-color: #b23b2c;
  color: #7a2519;
}
.dlg-feedback .fb-reward {
  display: block;
  margin-top: .3em;
  font-weight: 700;
  color: #8a6a12;
}

/* Mínimo 16px: es material didáctico, la legibilidad manda sobre la estética. */
.dlg-text {
  margin: 0;
  font-size: clamp(16px, 2.3vh, 20px);
  line-height: 1.45;
  color: var(--tinta);
  min-height: 2.9em;
}

.dlg-next {
  position: absolute;
  right: .7em;
  bottom: .4em;
  color: var(--terracota);
  font-size: clamp(12px, 1.8vh, 16px);
  animation: dlgBob .8s ease-in-out infinite;
}
.dlg-next[hidden] { display: none; }
@keyframes dlgBob {
  0%,100% { transform: translateY(0); opacity: .55; }
  50%     { transform: translateY(3px); opacity: 1; }
}

/* ---------- Controles táctiles ---------- */

#touch-controls { display: none; }

body.is-touch #touch-controls {
  display: block;
}

/* Con controles táctiles la escena sube: el hueco libre queda abajo, justo
   donde están el D-pad y el botón, en vez de partirse arriba y abajo. */
body.is-touch #game { align-items: flex-start; }

/* Anclados al viewport: en horizontal quedan sobre las esquinas del escenario,
   en vertical caen en la banda negra de debajo, sin tapar el juego. */
#dpad {
  position: fixed;
  left: 4vw;
  bottom: 4vh;
  width: clamp(108px, 30vw, 160px);
  aspect-ratio: 1;
}
.dpad-btn {
  position: absolute;
  width: 33.33%;
  height: 33.33%;
  border: none;
  border-radius: 8px;
  background: rgba(246,239,226,.34);
  box-shadow: 0 2px 0 rgba(0,0,0,.3);
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.dpad-btn:active { background: rgba(242,193,78,.85); }
.dpad-up    { left: 33.33%; top: 0; }
.dpad-left  { left: 0; top: 33.33%; }
.dpad-right { left: 66.66%; top: 33.33%; }
.dpad-down  { left: 33.33%; top: 66.66%; }

#btn-action {
  position: fixed;
  right: 6vw;
  bottom: 9vh;
  width: clamp(60px, 18vw, 88px);
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;
  background: rgba(242,193,78,.85);
  color: var(--tinta);
  font-size: clamp(18px, 3vh, 26px);
  font-weight: 800;
  box-shadow: 0 3px 0 rgba(0,0,0,.35);
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
#btn-action:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }

/* Con el diálogo abierto los controles sobran: en móvil se avanza tocando la
   propia caja de diálogo, que es el gesto natural y no tapa el texto. */
body.is-dialogue #touch-controls { display: none; }

/* ---------- Pantalla de carga ---------- */

#loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--noche);
  color: var(--pergamino);
  font-size: clamp(14px, 2.2vh, 19px);
  letter-spacing: .05em;
  transition: opacity .35s ease;
}
#loading span { color: var(--dorado); font-weight: 800; }
#loading.is-hidden { opacity: 0; pointer-events: none; }

#loading.is-error { color: #ffb4a8; text-align: center; padding: 2em; }

/* ---------- Intro de la historia ---------- */

#story {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 6vw, 4rem);
  background: radial-gradient(circle at 50% 40%, #241d18 0%, #120e0b 70%);
  color: var(--pergamino);
  cursor: pointer;
}
#story[hidden] { display: none; }

.story-inner { max-width: 46ch; text-align: center; }

.story-text {
  margin: 0;
  font-size: clamp(16px, 2.6vh, 22px);
  line-height: 1.6;
  letter-spacing: .01em;
  min-height: 7em;
  animation: storyIn .5s ease;
}
.story-text em { color: var(--dorado); font-style: normal; }

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

.story-foot {
  margin-top: 1.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4em;
}
.story-dots { display: flex; gap: .4em; }
.story-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(246,239,226,.25);
}
.story-dot.is-current { background: var(--dorado); }

.story-skip {
  border: none;
  background: none;
  color: rgba(246,239,226,.55);
  font-family: inherit;
  font-size: clamp(12px, 1.7vh, 15px);
  cursor: pointer;
  text-decoration: underline;
  padding: .2em .4em;
}
.story-skip:hover { color: var(--pergamino); }

/* ---------- Pantalla final ---------- */

#ending {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 6vw, 4rem);
  background: radial-gradient(circle at 50% 35%, #2b2b3f 0%, #14141f 70%);
  color: var(--pergamino);
  animation: endingIn 1.2s ease;
}
#ending[hidden] { display: none; }

@keyframes endingIn { from { opacity: 0; } to { opacity: 1; } }

.ending-inner { max-width: 44ch; text-align: center; }

.ending-inner h2 {
  margin: 0 0 .6em;
  font-size: clamp(22px, 4.2vh, 34px);
  font-weight: 800;
  letter-spacing: -.02em;
}
.ending-inner h2 span { color: var(--dorado); }

.ending-text {
  margin: 0;
  font-size: clamp(15px, 2.3vh, 19px);
  line-height: 1.6;
  color: rgba(246,239,226,.86);
}

.ending-stats {
  display: flex;
  justify-content: center;
  gap: clamp(1.2rem, 5vw, 2.6rem);
  margin: 1.6em 0 0;
}
.ending-stats div { text-align: center; }
.ending-stats dt {
  font-size: clamp(11px, 1.6vh, 13px);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(246,239,226,.55);
}
.ending-stats dd {
  margin: .15em 0 0;
  font-size: clamp(19px, 3.4vh, 27px);
  font-weight: 800;
  color: var(--dorado);
}

.ending-again {
  margin-top: 1.8em;
  border: none;
  border-radius: 980px;
  padding: .7em 1.6em;
  background: var(--dorado);
  color: var(--tinta);
  font-family: inherit;
  font-size: clamp(14px, 2vh, 17px);
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease;
}
.ending-again:hover { transform: translateY(-2px); }