/* playlist.css — SPEC phase 7: the music playlist player.
   Same warm palette / Baloo 2 / soft rounded card as comingsoon.css + gate.css.
   A blocking overlay: a now-playing hero, one big play/pause, an optional track
   list, and one big "back home" button. */

:root {
  --pl-card:#FFFFFF; --pl-stage:#FBF5EA;
  --pl-ink:#44403C; --pl-ink-soft:#7C746C;
  --pl-wood-deep:#A85F1E; --pl-teal:#38B2AC; --pl-sec-teal:#D6F0EE;
  --pl-shadow-lift:0 16px 34px rgba(80,60,40,.16);
  --pl-shadow-soft:0 6px 14px rgba(80,60,40,.10);
}

.pl-overlay {
  position:fixed;
  top: 0; right: 0; bottom: 0; left: 0; inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 3vh; padding:clamp(10px,3vh,32px);
  background:rgba(48,36,24,.46);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  font-family:'Baloo 2', system-ui, sans-serif;
  animation:pl-fade .18s ease;
}
@keyframes pl-fade { from { opacity:0; } to { opacity:1; } }

/* the audio engine is driven by pl-toggle — never show/measure it itself */
.pl-overlay audio { display:none !important; }

/* גובה קצר (נעילת-רוחב) → גדלים לפי vh + max-height עם גלילה כרשת-ביטחון */
.pl-card {
  width:100%;
  max-width:420px;
  max-height:100%;
  overflow-y:auto;
  background:var(--pl-card);
  border-radius:28px;
  box-shadow:var(--pl-shadow-lift);
  padding: 4vh 6vw; padding:clamp(14px,4vh,32px) clamp(22px,6vw,36px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 2vh; gap:clamp(6px,2vh,16px);
  text-align:center;
  animation:pl-pop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pl-pop { from { transform:scale(.9); opacity:0; } to { transform:scale(1); opacity:1; } }

/* round emblem holding the song's icon, with a soft "vinyl" spin while open */
.pl-emblem {
  width: 22vh; width:clamp(60px,22vh,104px);
  height: 22vh; height:clamp(60px,22vh,104px);
  flex:0 0 auto;
  border-radius:50%;
  background:radial-gradient(circle at 50% 36%, #E7F7F5 0%, var(--pl-sec-teal) 100%);
  box-shadow:var(--pl-shadow-soft), inset 0 3px 8px rgba(255,255,255,.7);
  display:grid;
  place-items:center;
  font-size: 10vh; font-size:clamp(1.9rem,10vh,3.2rem);
  line-height:1;
  animation:pl-spin 8s linear infinite;
}
@keyframes pl-spin { to { transform:rotate(360deg); } }

.pl-title {
  margin:0;
  font-weight:800;
  font-size: 6.5vh; font-size:clamp(1.3rem,6.5vh,2rem);
  color:var(--pl-wood-deep);
  line-height:1.05;
}

.pl-sub {
  margin:0;
  font-weight:600;
  font-size: 3.4vh; font-size:clamp(.85rem,3.4vh,1.05rem);
  color:var(--pl-ink-soft);
  line-height:1.35;
}

/* big round play/pause transport */
.pl-toggle {
  margin-top: 1vh; margin-top:clamp(2px,1vh,8px);
  flex:0 0 auto;
  width: 14vh; width:clamp(58px,14vh,78px);
  height: 14vh; height:clamp(58px,14vh,78px);
  border:none;
  cursor:pointer;
  border-radius:50%;
  background:radial-gradient(circle at 50% 34%, #4FC4BE 0%, var(--pl-teal) 100%);
  box-shadow:var(--pl-shadow-soft);
  color:#FFFFFF;
  font-size: 6vh; font-size:clamp(1.4rem,6vh,2rem);
  line-height:1;
  display:grid;
  place-items:center;
  transition:transform .12s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.pl-toggle:active { transform:scale(.94); box-shadow:var(--pl-shadow-lift); }

/* track list (shown only when more than one song exists) */
.pl-list {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top: 1vh; margin-top:clamp(2px,1vh,8px);
}
.pl-song {
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  border:2px solid transparent;
  cursor:pointer;
  border-radius:16px;
  padding:10px 14px;
  background:var(--pl-stage);
  font-family:inherit;
  font-weight:700;
  font-size: 3.2vh; font-size:clamp(.9rem,3.2vh,1.05rem);
  color:var(--pl-ink);
  text-align:right;
  transition:border-color .15s ease, background .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.pl-song.is-current {
  border-color:var(--pl-teal);
  background:var(--pl-sec-teal);
  color:var(--pl-wood-deep);
}
.pl-song-dot { font-size:1.3em; line-height:1; flex:0 0 auto; }
.pl-song-name { flex:1 1 auto; }

.pl-back {
  margin-top: 1.4vh; margin-top:clamp(4px,1.4vh,10px);
  flex:0 0 auto;
  border:none;
  cursor:pointer;
  border-radius:20px;
  padding: 2.4vh 7vw; padding:clamp(8px,2.4vh,14px) clamp(24px,7vw,40px);
  background:radial-gradient(circle at 50% 34%, #E7F7F5 0%, var(--pl-sec-teal) 100%);
  box-shadow:var(--pl-shadow-soft);
  font-family:inherit;
  font-weight:800;
  font-size: 4vh; font-size:clamp(.95rem,4vh,1.2rem);
  color:var(--pl-wood-deep);
  transition:transform .12s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.pl-back:active { transform:scale(.95); box-shadow:var(--pl-shadow-lift); }

/* ★ כפתור-הבית של הילד (מצב-ילד, אורן 25.8.26) — מחליף את "חזרה לבית".
   מרחף על השכבה ולא בתוך הכרטיס, בפינה הימנית העליונה, באותו מקום ובאותו
   ציור בדיוק כמו בקורא הסיפור: שני מסכי-הילד, יציאה אחת שנראית זהה.
   במצב הזה הקשה על הרקע כבר לא סוגרת (ר' playlist.js), ולכן זו היציאה
   היחידה — היא חייבת להיות גדולה וברורה. */
.pl-home-btn {
  position:absolute; z-index:5;
  top: 10px; top:max(10px, env(safe-area-inset-top));
  right: 10px; right:max(10px, env(safe-area-inset-right));
  width: 11vw; width:clamp(46px,11vw,60px); height: 11vw; height:clamp(46px,11vw,60px);
  border:none; cursor:pointer; border-radius:50%;
  background:rgba(255,255,255,.92);
  box-shadow:var(--pl-shadow-soft);
  color:var(--pl-wood-deep);
  display:grid; place-items:center;
  -webkit-tap-highlight-color:transparent;
}
.pl-home-btn svg { width:58%; height:58%; display:block; }
.pl-home-btn:active { transform:scale(.94); }

/* respect reduced-motion: no spin */
@media (prefers-reduced-motion: reduce) {
  .pl-emblem { animation:none; }
}