:root {
  color-scheme: dark;
  --bg-top: #0d0716;
  --bg-mid: #241636;
  --gold: #d6a860;
  --violet: #7c4fa0;
  --text: #f3ecff;
  --text-dim: #c9bfe0;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: "Georgia", "Iowan Old Style", ui-serif, serif;
  color: var(--text);
  background: radial-gradient(ellipse at 50% 30%, var(--violet) 0%, var(--bg-mid) 45%, var(--bg-top) 100%);
  overflow-x: hidden;
}

.card {
  width: 100%;
  max-width: 420px;
  text-align: center;
}

/* ---------- pantalla de espera (envoltorio) ---------- */

.wrapper-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none; /* un toque no debe seleccionar el 🎁 (abre "buscar" en Android) */
}

.wrapper-gift {
  font-size: 72px;
  animation: floatGift 3.2s ease-in-out infinite;
}

@keyframes floatGift {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

.wrapper-text {
  font-style: italic;
  font-size: 20px;
  color: var(--text-dim);
  opacity: 0;
  animation: textIn 0.9s ease-out 0.2s forwards;
}

.wrapper-hint {
  font-size: 14px;
  color: var(--text-dim);
  opacity: 0.6;
}

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

/* ---------- capa de apertura ---------- */

.opening-layer {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, var(--violet) 0%, var(--bg-top) 70%);
  z-index: 1000;
  pointer-events: none;
}

.opening-gift {
  font-size: 88px;
  animation: openWindUp 2.75s ease-in forwards;
}

.opening-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(214, 168, 96, 0.55), transparent 60%);
  opacity: 0;
  animation: openGlow 2.7s ease-out 0.5s forwards;
}

.opening-layer.leaving {
  animation: openFadeOut 0.8s ease-in 2.55s forwards;
}

@keyframes openWindUp {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  60% { transform: scale(1.35) rotate(-6deg); opacity: 1; }
  85% { transform: scale(1.6) rotate(4deg); opacity: 0.7; }
  100% { transform: scale(2.1) rotate(0deg); opacity: 0; }
}

@keyframes openGlow {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes openFadeOut {
  to { opacity: 0; }
}

/* ---------- vista del momento ---------- */

.moment-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  animation: momentIn 0.7s ease-out;
}

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

.moment-from {
  font-size: 14px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.moment-dedication {
  font-size: 22px;
  font-style: italic;
  line-height: 1.5;
  color: var(--text);
}

.moment-dedication .quote {
  color: var(--gold);
}

.player-wrap {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.full-track-link {
  display: inline-block;
  margin-top: 4px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 13px;
  color: var(--text-dim);
  text-decoration: none;
  border: 1px solid rgba(243, 236, 255, 0.25);
  border-radius: 999px;
  padding: 8px 16px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.full-track-link:hover,
.full-track-link:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}

.spotify-credit {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.55;
}

/* ---------- pantallas finales ---------- */

.end-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: momentIn 0.8s ease-out;
}

.end-icon {
  font-size: 40px;
}

.end-title {
  font-size: 21px;
  font-style: italic;
  line-height: 1.5;
}

.end-sub {
  font-size: 15px;
  color: var(--text-dim);
  font-family: system-ui, -apple-system, sans-serif;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .wrapper-gift,
  .opening-gift,
  .opening-glow,
  .wrapper-text,
  .moment-view,
  .end-screen {
    animation: none !important;
  }
}

/* ---------- temas del regalo ----------
   Elegidos por quien regala (backend/src/themes.ts). Los temas de color
   solo cambian variables; 'cover' y 'mood' agregan una capa de fondo
   (#bg-layer) detrás de todo el contenido. */

body[data-theme="rose"] { --violet: #c2416b; --bg-mid: #4a1530; --bg-top: #1a0710; --gold: #f2c2a0; --text-dim: #f0cfdc; }
body[data-theme="ocean"] { --violet: #1f6f9f; --bg-mid: #0f2f4a; --bg-top: #06121d; --gold: #9fe3e0; --text-dim: #c4dcec; }
body[data-theme="sunset"] { --violet: #e0703a; --bg-mid: #5a2438; --bg-top: #1a0b14; --gold: #ffd08a; --text-dim: #f3d3c4; }
body[data-theme="forest"] { --violet: #3f8a5a; --bg-mid: #16352a; --bg-top: #07130e; --gold: #d8c07a; --text-dim: #c8e0cf; }
body[data-theme="night"] { --violet: #3a4a8a; --bg-mid: #141a33; --bg-top: #05070f; --gold: #c8d0ff; --text-dim: #c3c9e6; }

.bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #07060b;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.bg-layer.visible {
  opacity: 1;
}

/* Oscurece lo justo para que la dedicatoria se lea sobre cualquier fondo. */
.bg-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.6));
}

/* Portada: la carátula del álbum, difuminada y saturada, a pantalla completa. */
.bg-art {
  position: absolute;
  inset: -12%;
  background-size: cover;
  background-position: center;
  filter: blur(42px) saturate(1.5) brightness(0.6);
  transform: scale(1.1);
}

/* Según la canción: auroras de color que se mueven lento, paleta por mood. */
.bg-blob {
  position: absolute;
  width: 75vmax;
  height: 75vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.75;
  animation: blobDrift var(--mood-speed, 22s) ease-in-out infinite alternate;
}

.bg-blob.b1 { background: var(--m1); top: -30vmax; left: -25vmax; }
.bg-blob.b2 { background: var(--m2); bottom: -35vmax; right: -30vmax; animation-delay: calc(var(--mood-speed, 22s) / -3); }
.bg-blob.b3 { background: var(--m3); top: 20%; left: 30%; width: 45vmax; height: 45vmax; animation-delay: calc(var(--mood-speed, 22s) / -1.5); }

@keyframes blobDrift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(8vmax, 6vmax) scale(1.15); }
  100% { transform: translate(-6vmax, 10vmax) scale(0.95); }
}

.bg-layer[data-mood="romantico"] { --m1: #b0305c; --m2: #6a1b4d; --m3: #f29bb2; --mood-speed: 26s; }
.bg-layer[data-mood="alegre"] { --m1: #f2a93b; --m2: #f25c54; --m3: #ffd166; --mood-speed: 16s; }
.bg-layer[data-mood="nostalgico"] { --m1: #8a6a4f; --m2: #3d5a80; --m3: #e0b98f; --mood-speed: 28s; }
.bg-layer[data-mood="energetico"] { --m1: #ff006e; --m2: #3a86ff; --m3: #8338ec; --mood-speed: 9s; }
.bg-layer[data-mood="tranquilo"] { --m1: #2a9d8f; --m2: #264653; --m3: #a8dadc; --mood-speed: 30s; }
.bg-layer[data-mood="melancolico"] { --m1: #3e5c76; --m2: #1d2d44; --m3: #748cab; --mood-speed: 32s; }
.bg-layer[data-mood="fiesta"] { --m1: #ff4d6d; --m2: #ffbe0b; --m3: #3a86ff; --mood-speed: 8s; }

/* Con fondo propio, la capa de apertura deja verlo a través. */
body[data-bg] .opening-layer {
  background: rgba(6, 5, 12, 0.55);
}

/* ---------- invitación al final ---------- */

.cta-primary {
  display: inline-block;
  margin-top: 8px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1a0f24;
  background: var(--gold);
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  text-decoration: none;
  cursor: pointer;
}

.cta-primary:disabled {
  opacity: 0.5;
  cursor: default;
}

.app-invite {
  margin-top: 18px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
  color: var(--text-dim);
  opacity: 0.7;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .bg-blob {
    animation: none !important;
  }
}

/* ---------- página de respuesta (/crear/) ---------- */

body.creator {
  align-items: flex-start;
  font-family: system-ui, -apple-system, sans-serif;
}

.creator-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  padding-top: 12px;
}

.creator-title {
  margin: 0;
  font-family: "Georgia", ui-serif, serif;
  font-style: italic;
  font-size: 24px;
  text-align: center;
}

.creator-sub {
  margin: -6px 0 4px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
}

.field {
  width: 100%;
  font: inherit;
  font-size: 16px; /* evita el zoom automático de iOS al enfocar */
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(243, 236, 255, 0.22);
  border-radius: 12px;
  padding: 12px 14px;
  resize: vertical;
}

.field:focus {
  outline: none;
  border-color: var(--gold);
}

.field-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-size: 13px;
  color: var(--text-dim);
}

.creator-status {
  margin: 0;
  font-size: 13px;
  color: var(--text-dim);
}

.creator-error {
  margin: 0;
  font-size: 14px;
  color: #ffb3b3;
  text-align: center;
}

.track-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.track-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px;
  font: inherit;
  color: var(--text);
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
}

.track-row:hover,
.track-row:focus-visible {
  border-color: rgba(243, 236, 255, 0.25);
}

.track-row.selected {
  cursor: default;
  background: rgba(255, 255, 255, 0.08);
}

.track-art {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 6px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
}

.track-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.track-title,
.track-artist {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.track-artist {
  font-size: 13px;
  color: var(--text-dim);
}

.track-pick {
  font-size: 20px;
}

.link-btn {
  font: inherit;
  font-size: 14px;
  color: var(--gold);
  background: none;
  border: 1px solid rgba(243, 236, 255, 0.22);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
}

.link-btn:disabled {
  opacity: 0.5;
}

.assist-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.theme-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  font: inherit;
  color: var(--text-dim);
  background: none;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
}

.theme-swatch.active {
  border-color: var(--gold);
  color: var(--text);
}

.theme-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.theme-name {
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
}

.creator-card .cta-primary {
  align-self: center;
}

.end-screen .full-track-link {
  background: none;
  cursor: pointer;
}