/* ============ Reproductor: la amapola es el reproductor ============
   --p    progreso de 0 a 1 (lo escribe player.js)
   --open apertura de la flor, de capullo a amapola abierta
   Cada minuto que pasa cambia el cielo (del malva del anochecer a la arena del amanecer),
   la flor se abre, se mece con el viento y suelta pétalos. */
.player {
  --p: 0;
  --open: 0.08;
  position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; overflow: hidden;
  color: var(--ink); touch-action: manipulation; user-select: none; -webkit-user-select: none;
}

.pl-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #CFC3CF 0%, #E2CCD1 25%, #EDC4B8 50%, #F4D8C8 75%, #F8ECDC 100%);
  background-size: 100% 400%;
  background-position: 50% calc(var(--p) * 100%);
}
.pl-stars {
  position: absolute; inset: 0; pointer-events: none; opacity: calc(0.95 - 1.5 * var(--p));
  background-image:
    radial-gradient(1.6px 1.6px at 12% 16%, #fff, transparent), radial-gradient(1.2px 1.2px at 28% 9%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 47% 21%, #fff, transparent), radial-gradient(1.2px 1.2px at 71% 12%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 88% 24%, #fff, transparent), radial-gradient(1.2px 1.2px at 8% 52%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 93% 58%, #fff, transparent), radial-gradient(1.2px 1.2px at 19% 83%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 80% 88%, #fff, transparent);
}

/* ---- Nubes, aire y tallo (los mueve scene.js con el mismo viento) ---- */
.pl-clouds, .pl-air, .pl-stem { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pl-clouds .cloud {
  position: absolute; left: 0; top: 0; height: auto; overflow: visible; will-change: transform;
  fill: #fff; opacity: calc((0.42 + 0.4 * var(--p)) * (0.55 + 0.45 * var(--depth)));
  filter: blur(calc((1 - var(--depth)) * 3px + 0.5px));
}
.pl-air { width: 100%; height: 100%; }
.pl-air path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; opacity: 0; }
.pl-stem { z-index: 1; width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(110, 120, 100, 0.18)); }
.pl-stem .stem-shine { opacity: 0.55; }

/* ---- Barra superior ---- */
.pl-top { position: relative; z-index: 3; display: flex; align-items: flex-start; gap: 12px; padding: calc(var(--safe-t) + 14px) 18px 0; transition: opacity 0.7s ease; }
.icon-btn { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); cursor: pointer; transition: background-color 0.2s; }
.icon-btn[aria-pressed="true"] { background: rgba(255, 255, 255, 0.85); }
.pl-title { flex: 1; min-width: 0; padding-top: 2px; }
.pl-title h1 { font: 400 clamp(30px, 8.4vw, 38px) / 1 var(--serif); letter-spacing: -0.01em; }
.pl-title h1:focus { outline: none; }
.pl-title p { margin-top: 6px; font: 400 14px / 1.3 var(--sans); color: #5E4647; }

/* ---- Escena central ---- */
.pl-main { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 2dvh, 20px); }
.stage { position: relative; width: min(92vw, 52dvh, 480px); aspect-ratio: 1; }
.sun {
  position: absolute; inset: -55%; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 251, 236, 0.95), rgba(255, 244, 214, 0.5) 46%, rgba(255, 244, 214, 0) 72%);
  opacity: calc(0.3 + 0.7 * var(--p)); transform: scale(calc(0.7 + 0.5 * var(--p)));
}


.poppy-btn { position: absolute; inset: 5%; display: block; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.poppy-btn:focus-visible { outline-offset: 8px; border-radius: 50%; }
.sway { width: 100%; height: 100%; filter: drop-shadow(0 14px 18px rgba(150, 82, 70, 0.22)); transform-origin: 50% 76%; will-change: transform; } /* gira sobre la base del cáliz, donde llega el tallo */
.sway .bloom { display: block; width: 100%; height: 100%; overflow: visible; }
.ripple { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; margin: -15% 0 0 -15%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.9); pointer-events: none; animation: ripple 1.1s ease-out forwards; }

.cue { position: relative; width: 100%; height: 40px; text-align: center; font: italic 400 30px / 40px var(--serif); transition: opacity 0.5s ease; }
.cue span { position: absolute; inset: 0; opacity: 0; }
.cue .hint { left: 50%; right: auto; transform: translateX(-50%); padding: 0 18px; white-space: nowrap; border-radius: 999px; background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 500 16px / 40px var(--sans); color: #5E4647; transition: opacity 0.5s; }
.player[data-state="paused"] .cue .hint { opacity: 1; }
.player.loading .cue .hint { opacity: 0; }

/* ---- Controles ---- */
.pl-bottom { position: relative; z-index: 3; width: 100%; max-width: 480px; margin: 0 auto; padding: 4px 26px calc(var(--safe-b) + 22px); display: grid; gap: 8px; transition: opacity 0.7s ease; }
.times { display: flex; justify-content: space-between; font: 500 14px / 1 var(--sans); font-variant-numeric: tabular-nums; color: #5E4647; }
.scrub { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer; }
.scrub::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--ink) calc(var(--p) * 100%), rgba(74, 51, 53, 0.2) 0); }
.scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); }
.scrub::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--ink) calc(var(--p) * 100%), rgba(74, 51, 53, 0.2) 0); }
.scrub::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); }
.controls { display: flex; align-items: center; justify-content: center; gap: 30px; }
.skip { width: 54px; height: 54px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.main-btn { width: 78px; height: 78px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--poppy); color: var(--ink); cursor: pointer; box-shadow: 0 12px 28px rgba(150, 82, 70, 0.28); transition: transform 0.15s ease; }
.main-btn:active { transform: scale(0.95); }
.player.idle .pl-top, .player.idle .pl-bottom { opacity: 0; pointer-events: none; }

/* ---- Pétalos que caen ---- */
.pl-petals { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.fall { position: absolute; left: 0; top: 0; margin: -10px 0 0 -8px; opacity: 0; will-change: transform, opacity; }
/* Aleteo: el pétalo gira sobre sí mismo mientras cae, como mecido por el aire. */
.fall svg { display: block; width: 100%; height: auto; animation: flap var(--flap) ease-in-out infinite alternate; }
@keyframes flap { from { transform: rotate3d(1, var(--tilt), 0, -65deg); } to { transform: rotate3d(1, var(--tilt), 0, 65deg); } }

/* ---- Aviso de error y final ---- */
.pl-error { position: absolute; z-index: 7; left: 50%; top: calc(var(--safe-t) + 78px); transform: translateX(-50%); width: min(92vw, 420px); padding: 14px 16px; border-radius: 18px; background: #F6DCD5; color: #7E3530; font: 500 15px / 1.4 var(--sans); display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.pl-error[hidden] { display: none; }
.pl-error button { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #7E3530; color: #fff; font: 600 15px / 1 var(--sans); cursor: pointer; }
.pl-done { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 32px; text-align: center; background: rgba(251, 246, 243, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity 0.9s ease, visibility 0s linear 0.9s; }
.pl-done.on { opacity: 1; visibility: visible; transition: opacity 0.9s ease; }
.pl-done h2 { font: 400 clamp(52px, 15vw, 68px) / 0.95 var(--serif); letter-spacing: -0.02em; }
.pl-done .lead { max-width: 20ch; margin-bottom: 14px; }
.pl-done .btn { min-width: 240px; }

/* ---- Respiración de coherencia cardíaca (breath.js): luna que crece y se vuelve sol ----
   --b  de 0 (luna, abajo, espirado) a 1 (sol, arriba, inspirado) */
.player.breath { --b: 0; }
.player.breath .pl-sky { background-position: 50% calc(var(--b) * 66%); }
.player.breath .pl-stars { opacity: calc(0.9 * (1 - var(--b))); }
.pl-hills { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; width: 100%; height: 56%; pointer-events: none; }
.player.breath .stage { position: absolute; inset: 0; width: auto; aspect-ratio: auto; }
.orb-btn { position: absolute; left: 0; top: 0; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transform-origin: 50% 50%; will-change: transform; }
.orb-btn svg { display: block; width: 100%; height: 100%; overflow: visible; }
.orb-btn:focus-visible { outline-offset: 8px; }
.player.breath .cue { position: absolute; left: 0; right: 0; bottom: 0; }

@keyframes ripple { from { transform: scale(0.7); opacity: 0.9; } to { transform: scale(3.4); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .pl-air { display: none; }
  .fall, .ripple { display: none; }
  .pl-sky { background-position: 50% 0; }
}