/* ============================================================
   ESTILOS — rosa pastel + pixel art
   ============================================================ */
:root{
  --rosa:        #FFD8E8;
  --rosa-claro:  #FFEFF6;
  --rosa-fuerte: #FF9CC0;
  --rosa-oscuro: #C2557E;
  --tinta:       #5A3348;
  --crema:       #FFF9FC;
  --borde:       4px;
}

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

html,body{ height:100%; }

body{
  font-family:"Press Start 2P", ui-monospace, "Courier New", monospace;
  color:var(--tinta);
  background:
    radial-gradient(ellipse at 50% 0%, var(--rosa-claro) 0%, var(--rosa) 60%, #FFC7DE 100%);
  background-attachment:fixed;
  min-height:100%;
  overflow-x:hidden;
  -webkit-font-smoothing:none;
  image-rendering:pixelated;
  text-rendering:geometricPrecision;
}

img,canvas{ image-rendering:pixelated; image-rendering:crisp-edges; }

/* ---------- girasoles de fondo ---------- */
#jardin{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
#jardin img{
  position:absolute;
  opacity:.8;
  animation:mecer var(--dur,5s) ease-in-out infinite alternate;
  transform-origin:50% 100%;
}
@keyframes mecer{
  from{ transform:rotate(-4deg) }
  to  { transform:rotate(4deg)  }
}

/* ---------- estructura de pantallas ---------- */
#app{
  position:relative; z-index:2;
  min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:24px 16px;
}
.pantalla{ display:none; width:100%; max-width:560px; }
.pantalla.activa{ display:block; animation:entrar .35s ease-out; }
@keyframes entrar{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* ---------- caja pixel genérica ---------- */
.caja{
  background:var(--crema);
  border:var(--borde) solid var(--tinta);
  box-shadow:
    0 0 0 var(--borde) var(--crema),
    0 0 0 calc(var(--borde) * 2) var(--rosa-oscuro),
    0 10px 0 calc(var(--borde) * 2) rgba(194,85,126,.35);
  padding:22px 20px;
}

h1{ font-size:15px; line-height:1.7; margin-bottom:18px; text-align:center; }
h2{ font-size:13px; line-height:1.7; margin-bottom:14px; }
p { font-size:11px; line-height:2;  }
.pequeno{ font-size:9px; line-height:2; opacity:.75; }
.centro{ text-align:center; }

/* ---------- botones ---------- */
button{
  font-family:inherit; font-size:11px; color:#fff;
  background:var(--rosa-fuerte);
  border:var(--borde) solid var(--tinta);
  padding:12px 18px;
  cursor:pointer;
  box-shadow:0 5px 0 0 var(--rosa-oscuro);
  transition:transform .06s, box-shadow .06s;
}
button:hover{ background:#FFAECB; }
button:active{ transform:translateY(5px); box-shadow:0 0 0 0 var(--rosa-oscuro); }
button.secundario{ background:var(--crema); color:var(--tinta); box-shadow:0 5px 0 0 #D9B7C6; }

/* ---------- PUERTA ---------- */
#puerta .saludo{
  font-size:10px; line-height:2.1; text-align:center;
  margin-bottom:18px; opacity:.8;
}
#puerta .pregunta{
  font-size:12px; line-height:2.1; text-align:center;
  margin-bottom:22px; color:var(--rosa-oscuro);
}
#clave{
  font-family:inherit; font-size:12px; color:var(--tinta);
  width:100%; padding:14px 12px; text-align:center;
  background:var(--rosa-claro);
  border:var(--borde) solid var(--tinta);
  outline:none;
}
#clave:focus{ background:#fff; box-shadow:inset 0 0 0 2px var(--rosa-fuerte); }
#puerta .fila{ display:flex; gap:12px; margin-top:16px; }
#puerta .fila button{ flex:1; }
#error{ white-space:pre-line; min-height:34px; margin-top:14px; font-size:10px; text-align:center; color:#C0392B; line-height:1.8; }
.temblor{ animation:temblar .3s; }
@keyframes temblar{
  0%,100%{ transform:translateX(0) } 20%{ transform:translateX(-8px) }
  40%{ transform:translateX(8px) }   60%{ transform:translateX(-5px) }
  80%{ transform:translateX(5px) }
}

/* ---------- DIALOGO ---------- */
/* La foto mide 120 px de ancho: a 240 el escalado es x2 exacto y los
   pixeles no se deforman (el monigote dibujado mide 48, x5).

   El margen negativo mete las ultimas filas del sprite -el bloque plano
   de la camiseta- por detras de la caja, para que no parezca cortado.
   Como el retrato se ve a 240 px y en la escena de las entradas a 120,
   cada caso necesita su propio margen para esconder lo mismo. */
#escena{
  display:flex; align-items:flex-end; justify-content:center;
  gap:0; margin-bottom:-38px;
}
#escena.con-tickets{ margin-bottom:-16px; }
#retrato{ display:block; width:240px; transition:width .45s ease-out; }

/* Las entradas entran desde la derecha y el retrato se aparta: el flex
   esta centrado, asi que al encoger uno y crecer el otro el retrato se
   desplaza solo hacia la izquierda. */
#tickets{
  display:block; width:0; opacity:0; align-self:center;
  transform:translateX(20px);
  transition:width .45s ease-out, opacity .3s ease-out .15s,
             transform .45s ease-out;
}
#escena.con-tickets{ gap:8px; }  /* el margen se ajusta arriba */
#escena.con-tickets #retrato{ width:120px; }   /* 1x exacto de la foto */
#escena.con-tickets #tickets{ width:168px; opacity:1; transform:none; }
#retrato.hablando{ animation:hablar .45s steps(2) infinite; }
@keyframes hablar{ from{ transform:translateY(0) } to{ transform:translateY(-3px) } }

#cajaDialogo{ position:relative; cursor:pointer; user-select:none; min-height:150px; }
#quien{
  position:absolute; top:-18px; left:14px;
  background:var(--rosa-fuerte); color:#fff;
  border:var(--borde) solid var(--tinta);
  padding:6px 12px; font-size:10px;
}
#texto{ font-size:11px; line-height:2.2; min-height:90px; }
#flecha{
  position:absolute; right:16px; bottom:10px; font-size:12px;
  animation:subeBaja .7s steps(2) infinite;
}
@keyframes subeBaja{ from{ transform:translateY(0) } to{ transform:translateY(5px) } }
.oculto{ visibility:hidden; }

/* ---------- JUEGO ---------- */
#marcoJuego{ text-align:center; }
#hud{
  display:flex; justify-content:space-between; align-items:center;
  font-size:10px; margin-bottom:10px; gap:10px;
}
#vidas{ display:flex; gap:4px; }
#vidas img{ width:20px; }
#vidas img.perdida{ filter:grayscale(1) brightness(1.5); opacity:.35; }
#lienzo{
  display:block; width:100%; max-width:360px; margin:0 auto;
  border:var(--borde) solid var(--tinta);
  background:linear-gradient(#FFEFF6, #FFD8E8);
  touch-action:none;
}
#capaJuego{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; text-align:center;
  background:rgba(255,249,252,.93);
}
#marcoLienzo{ position:relative; max-width:360px; margin:0 auto; }
#capaJuego p{ font-size:10px; white-space:pre-line; }

/* ---------- REGALO ---------- */
/* ---------- los dos, con el corazon latiendo en medio ---------- */
/* La caja tiene que estar posicionada para pintarse POR ENCIMA de los
   retratos: el contenido de las imagenes se pinta en una fase posterior
   a los fondos de bloque, asi que sin esto los tapan por mucho margen
   negativo que se les ponga. */
#regalo .caja{ position:relative; z-index:1; }
#pareja{
  display:flex; align-items:flex-end; justify-content:center; gap:4px;
  margin-bottom:-16px;   /* el corte de abajo queda detras de la caja */
}
/* min-width:0 deja que se encojan si la ventana es MUY estrecha (por debajo
   de 300 px, que ya no es ningun movil real) en vez de salirse y recortarse.
   A los anchos normales no se activa y se ven a tamano exacto. */
#pareja .cara{ display:block; width:120px; min-width:0; }   /* 1x exacto */
#corazonLatido, #retrato, #tickets{ min-width:0; }
#corazonLatido{
  display:block; width:54px; align-self:center; margin-bottom:26px;
  transform-origin:50% 60%;
  animation:latido 1.4s ease-in-out infinite;
}
/* dos golpes y pausa, como un latido de verdad */
@keyframes latido{
  0%, 100% { transform:scale(1)    }
  12%      { transform:scale(1.32) }
  24%      { transform:scale(1)    }
  36%      { transform:scale(1.18) }
  50%      { transform:scale(1)    }
}
@media (prefers-reduced-motion: reduce){
  #corazonLatido{ animation:none; }
}

#entradas{ display:flex; flex-direction:column; gap:14px; margin:18px 0; }
.entrada{
  position:relative;
  background:linear-gradient(135deg,#FFF9FC 0%,#FFEFF6 100%);
  border:var(--borde) dashed var(--tinta);
  padding:14px 16px;
  text-align:left;
}
.entrada .art{ font-size:13px; line-height:1.8; color:var(--rosa-oscuro); }
.entrada .gira{ font-size:9px; margin:6px 0 10px; opacity:.8; }
.entrada .datos{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:8px; line-height:2; }
/* los asistentes van en su propia linea, abajo del todo */
.entrada .asistentes{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  margin-top:10px; padding-top:8px; padding-right:16px;
  border-top:2px dashed var(--tinta);
  font-size:9px; line-height:1.8; color:var(--rosa-oscuro);
}
.entrada .asistentes span:last-child{ font-size:7px; opacity:.6; color:var(--tinta); }

/* boton de descarga del PDF de las entradas de verdad */
#descargaPdf{
  display:inline-block; margin-top:16px;
  font-family:inherit; font-size:10px; line-height:1.6; text-decoration:none;
  color:#fff; background:var(--rosa-fuerte);
  border:var(--borde) solid var(--tinta);
  padding:12px 16px;
  box-shadow:0 5px 0 0 var(--rosa-oscuro);
}
#descargaPdf:hover{ background:#FFAECB; }
#descargaPdf:active{ transform:translateY(5px); box-shadow:0 0 0 0 var(--rosa-oscuro); }
.entrada .talon{
  position:absolute; top:0; right:0; bottom:0; width:12px;
  background:repeating-linear-gradient(#FF9CC0 0 6px, transparent 6px 12px);
  border-left:3px dashed var(--tinta);
}
#confeti{ position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.9; }

/* ---------- boton de la musica ---------- */
/* Fijo arriba a la derecha: es la unica esquina libre en las cuatro
   pantallas. Tiene que verse SIEMPRE, por si lo abre en un sitio donde
   no le apetece que suene nada. */
#sonido{
  position:fixed; top:10px; right:10px; z-index:10;
  width:38px; height:38px; padding:0;
  font-family:inherit; font-size:14px; line-height:1;
  color:#fff; background:var(--rosa-fuerte);
  border:3px solid var(--tinta);
  box-shadow:0 4px 0 0 var(--rosa-oscuro);
  cursor:pointer;
}
#sonido:hover{ background:#FFAECB; }
#sonido:active{ transform:translateY(4px); box-shadow:0 0 0 0 var(--rosa-oscuro); }
#sonido.mudo{ background:var(--crema); color:var(--tinta); box-shadow:0 4px 0 0 #D9B7C6; }

/* ---------- generador de hash (solo tú) ---------- */
#herramienta{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  background:#2B2B2B; color:#8FE38F; font-size:11px;
  font-family:ui-monospace,"Courier New",monospace;
  padding:12px; display:none;
}
#herramienta input{ width:100%; padding:8px; font-family:inherit; font-size:12px; margin:6px 0; }
#salida{ word-break:break-all; color:#FFD35C; }

/* ---------- móvil ---------- */
@media (max-width:480px){
  :root{ --borde:3px; }
  h1{ font-size:12px; }
  p,#texto{ font-size:10px; }
  #puerta .saludo{ font-size:9px; }
  #puerta .pregunta{ font-size:10px; }
  .caja{ padding:18px 14px; }
  #retrato{ width:240px; }
}

/* En moviles estrechos (320 px) las filas de imagenes no caben: 120+4+54+4+120
   son 302 y el hueco es 288. Se encogen a medidas que siguen siendo divisores
   exactos del sprite, para no perder nitidez. */
@media (max-width:360px){
  #corazonLatido{ width:36px; margin-bottom:18px; }   /* 9 px x4 */
  #escena.con-tickets #tickets{ width:112px; }        /* 56 px x2 */
  /* los nombres y el numero se parten a mitad de frase: mejor apilados */
  .entrada .asistentes{ flex-direction:column; align-items:flex-start; gap:2px; }
}