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

body {
  background: #F4EEE3;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

/* ── SPLASH ──────────────────────────────────────────────── */

#splash {
  position: fixed;
  inset: 0;
  background: #F4EEE3;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.9s ease, visibility 0.9s ease;
}

#splash.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#splash-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}

#splash-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  pointer-events: none;
}

#tag {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.32);
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(8px);
  animation: fadeUp 0.6s ease 0.1s forwards;
}

#line1,
#line2 {
  display: flex;
  gap: 4px;
  line-height: 0.88;
}

#line1 span,
#line2 span {
  font-size: clamp(5rem, 14vw, 10rem);
  font-weight: 900;
  line-height: 0.88;
  opacity: 0;
  transform: translateY(32px) scale(0.9);
}

/* letter stagger — line 1 */
#line1 span:nth-child(1) { animation: popIn 0.5s cubic-bezier(.34,1.56,.64,1) 0.20s forwards; }
#line1 span:nth-child(2) { animation: popIn 0.5s cubic-bezier(.34,1.56,.64,1) 0.30s forwards; }
#line1 span:nth-child(3) { animation: popIn 0.5s cubic-bezier(.34,1.56,.64,1) 0.40s forwards; }
#line1 span:nth-child(4) { animation: popIn 0.5s cubic-bezier(.34,1.56,.64,1) 0.50s forwards; }

/* letter stagger — line 2 */
#line2 span:nth-child(1) { animation: popIn 0.5s cubic-bezier(.34,1.56,.64,1) 0.62s forwards; }
#line2 span:nth-child(2) { animation: popIn 0.5s cubic-bezier(.34,1.56,.64,1) 0.72s forwards; }
#line2 span:nth-child(3) { animation: popIn 0.5s cubic-bezier(.34,1.56,.64,1) 0.82s forwards; }
#line2 span:nth-child(4) { animation: popIn 0.5s cubic-bezier(.34,1.56,.64,1) 0.92s forwards; }
#line2 span:nth-child(5) { animation: popIn 0.5s cubic-bezier(.34,1.56,.64,1) 1.02s forwards; }

#sub {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.38);
  letter-spacing: 0.05em;
  margin-top: 28px;
  margin-bottom: 36px;
  opacity: 0;
  transform: translateY(8px);
  animation: fadeUp 0.6s ease 1.15s forwards;
  pointer-events: none;
}

#splashBtn {
  pointer-events: auto;
  padding: 15px 40px;
  border: none;
  background: #D12839;
  color: #F4EEE3;
  border-radius: 40px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: transform 0.2s, background 0.2s;
  opacity: 0;
  animation: fadeUp 0.6s ease 1.35s forwards;
}

#splashBtn:hover {
  transform: scale(1.07);
  background: #87CEE9;
}

@keyframes popIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ── DESPEDIDA ───────────────────────────────────────────── */

#farewell {
  position: fixed;
  inset: 0;
  background: #F4EEE3;
  z-index: 150;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s ease, background 0.6s ease;
  pointer-events: none;
}

#farewell.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Cuando el color de fondo (el resultado de la mezcla) es oscuro, el
   texto y el botón pasan a modo claro para mantener buen contraste. */
#farewell.on-dark #farewell-tag {
  color: rgba(255, 255, 255, 0.55);
}

#farewell.on-dark #farewell-msg {
  color: rgba(255, 255, 255, 0.92);
}

#farewell.on-dark #farewellBtn {
  background: rgba(255, 255, 255, 0.92);
  color: rgba(0, 0, 0, 0.78);
}

#farewell.on-dark #farewellBtn:hover {
  background: #87CEE9;
  color: #1a1a1a;
}

#farewell-tag {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.32);
  margin-bottom: 18px;
}

#farewell-msg {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 700;
  color: rgba(0, 0, 0, 0.78);
  max-width: 560px;
  line-height: 1.3;
  margin-bottom: 40px;
  padding: 0 24px;
}

#farewell-actions {
  display: flex;
  gap: 12px;
}

#farewellBtn {
  padding: 15px 40px;
  border: none;
  background: #D12839;
  color: #F4EEE3;
  border-radius: 40px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: transform 0.2s, background 0.2s;
}

#farewellBtn:hover {
  transform: scale(1.07);
  background: #87CEE9;
}

#retryBtn {
  padding: 15px 32px;
  border: 1.5px solid rgba(0, 0, 0, 0.18);
  background: transparent;
  color: rgba(0, 0, 0, 0.6);
  border-radius: 40px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: transform 0.2s, background 0.2s, border-color 0.2s;
}

#retryBtn:hover {
  transform: scale(1.07);
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.3);
}

/* En modo oscuro (fondo = color mezclado oscuro), el botón secundario
   también necesita contraste suficiente. */
#farewell.on-dark #retryBtn {
  border-color: rgba(255, 255, 255, 0.45);
  color: rgba(255, 255, 255, 0.85);
}

#farewell.on-dark #retryBtn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
}

/* ── EXPERIENCE WRAP ─────────────────────────────────────── */

#wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #F4EEE3;
  opacity: 0;
  transition: opacity 0.6s ease;
}

#wrap.visible {
  opacity: 1;
}

#back {
  position: absolute;
  inset: 0;
  z-index: 0;
}

#particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ── MOSAIC ──────────────────────────────────────────────── */

#mosaic {
  position: absolute;
  inset: 0;
  z-index: 10;
}

.tile {
  position: absolute;
  cursor: grab;
  user-select: none;
  transition: box-shadow 0.15s;
}

.tile:active {
  cursor: grabbing;
}

.tile canvas {
  display: block;
  transition: transform 0.18s ease;
}

/* Resalte al pasar el mouse: sugiere "esto se puede agarrar/mover".
   El cursor ya cambia a grab/grabbing por las reglas de arriba; aquí
   sumamos sombra leve en el tile y escala leve en el canvas interno
   (no en .tile, por la misma razón que 'invite': .tile recibe transform
   inline desde JS durante el drag y eso pisaría un transform por CSS). */
.tile:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
  z-index: 50;
}

.tile:hover canvas.invite {
  animation-play-state: paused;
}

.tile:hover canvas {
  transform: scale(1.045);
}

/* Mientras se está arrastrando, no queremos que el hover compita
   visualmente con el propio movimiento del drag. */
.tile.lifted:hover canvas {
  transform: none;
}

/* Señal sutil de "esto se puede mover": leve bamboleo + respiración,
   con timing distinto por pieza (var --tile-delay) para que no se vean
   todas sincronizadas, lo cual se leería artificial en vez de orgánico.
   Se aplica al CANVAS interno, no al .tile: el .tile recibe transform
   inline desde JS durante el drag, y eso pisaría una animación CSS. */
.tile canvas.invite {
  animation: tileInvite 3.2s ease-in-out infinite;
  animation-delay: var(--tile-delay, 0s);
}

@keyframes tileInvite {
  0%, 100% { transform: translate(0,0) rotate(0deg) scale(1); }
  50%      { transform: translate(1.5px, -2px) rotate(-1.1deg) scale(1.015); }
}

.tile.lifted {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  z-index: 200;
}

.tile.nudge {
  animation: tileNudge 0.5s ease;
}

@keyframes tileNudge {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  30% { transform: translate(-4px, 2px) rotate(-2deg); }
  60% { transform: translate(3px, -2px) rotate(2deg); }
}

/* ── PROGRESS DOTS (mosaico) ────────────────────────────── */

#progress-dots {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

#progress-dots.show { opacity: 1; }

#progress-dots .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.14);
  transition: background 0.3s, transform 0.3s;
}

#progress-dots .dot.filled {
  background: #D12839;
  transform: scale(1.15);
}

/* ── TANGRAM (relleno libre) ─────────────────────────────── */

.drag-piece {
  user-select: none;
}

.drag-piece:active {
  cursor: grabbing;
}

.drag-piece:hover {
  filter: brightness(1.06);
}

.drag-piece.reject-shake {
  animation: rejectShake 0.42s ease;
}

@keyframes rejectShake {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  25%      { transform: translate(-6px, 0) rotate(-4deg); }
  50%      { transform: translate(5px, 0) rotate(3deg); }
  75%      { transform: translate(-3px, 0) rotate(-2deg); }
}

.outline-slot {
  pointer-events: none;
}

.outline-slot.breathing {
  animation: outlineBreathe 3.4s ease-in-out infinite;
}

@keyframes outlineBreathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.045); opacity: 1; }
}

/* ── ROUND BADGE (tangram rondas) ───────────────────────── */

#round-badge {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.34);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

#round-badge.show { opacity: 1; }

#round-badge .pip {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
}

/* ── HINT ────────────────────────────────────────────────── */

#hint {
  position: absolute;
  left: 50%;
  top: 64px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* Por encima de #mosaic (z-index:10) y de #tangram (z-index:11, creado
     en JS), para que el texto nunca quede tapado por las piezas. */
  z-index: 30;
  transition: opacity 0.8s;
  width: 100%;
  text-align: center;
}

#hint.bottom {
  top: auto;
  /* Antes 165px: a esa altura el texto caía a la misma altura que la fila
     de piezas sueltas del tangram (rowY ≈ 0.78*H), quedando metido entre
     ellas. Se baja más, para que quede claramente por debajo de la fila. */
  bottom: 48px;
}

#hint p {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.22);
  transition: opacity 0.3s;
}

/* ── BUTTON ──────────────────────────────────────────────── */

#btn-wrap {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  opacity: 0;
  transition: opacity 0.6s;
  pointer-events: none;
  display: flex;
  gap: 12px;
}

#btn-wrap.show {
  opacity: 1;
  pointer-events: all;
}

#mainBtn, #secondaryBtn {
  padding: 12px 32px;
  border: 1.5px solid rgba(0, 0, 0, 0.14);
  background: rgba(244, 238, 227, 0.85);
  color: rgba(0, 0, 0, 0.6);
  border-radius: 40px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  transition: background 0.2s, transform 0.2s;
}

#mainBtn:hover, #secondaryBtn:hover {
  background: rgba(0, 0, 0, 0.07);
  transform: scale(1.06);
}

#secondaryBtn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s, background 0.2s, transform 0.2s;
}

#secondaryBtn.show {
  opacity: 1;
  pointer-events: all;
}

/* ── LABEL ───────────────────────────────────────────────── */

#label {
  position: absolute;
  bottom: 22px;
  right: 28px;
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.12);
  z-index: 5;
  pointer-events: none;
}

/* ── FREEPLAY GLOW (fase libre con FORMA) ───────────────── */

#freeplay-hint {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.26);
  opacity: 0;
  transition: opacity 0.8s;
  pointer-events: none;
  text-align: center;
}

#freeplay-hint.show { opacity: 1; }

/* ── LIENZO FINAL (fase de cierre, post-jardín) ──────────── */
/* Piezas plantadas en el jardín, recicladas como elementos
   arrastrables: crecen y cambian de color mientras se mueven. */

.final-piece {
  position: absolute;
  cursor: grab;
  user-select: none;
  touch-action: none;
  pointer-events: auto;
  will-change: transform, width, height, left, top;
}

.final-piece:active {
  cursor: grabbing;
}

.final-piece.lifted {
  z-index: 250;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,0.18));
}

/* ── CONSTELACIÓN (reemplaza al jardín de calma) ─────────── */
/* Pulso sutil en los puntos guía sin completar, para que se lean como
   "interactivo" y no como decoración fija. */
.constel-pulse {
  animation: constelPulse 2.4s ease-in-out infinite;
  transform-origin: center;
}

@keyframes constelPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}