/* bedtime-story.css — the bedtime-story reader (replaces the "coming soon"
   placeholder). Same warm palette / Baloo 2 / soft rounded card as
   playlist.css + comingsoon.css + gate.css; night-purple accent matching the
   home screen's "סיפור לפני השינה" icon (sec-purple #9182CE). */

:root {
  --bs-card:#FFFFFF; --bs-stage:#FBF5EA;
  --bs-ink:#44403C; --bs-ink-soft:#7C746C;
  --bs-purple:#9182CE; --bs-purple-deep:#6E5FB0; --bs-sec-purple:#EAE6F7;
  --bs-night:#1E1830;   /* full-screen reader backdrop (letterbox around the art) */
  --bs-shadow-lift:0 16px 34px rgba(80,60,40,.16);
  --bs-shadow-soft:0 6px 14px rgba(80,60,40,.10);
}

.bs-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(30,24,44,.5);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  font-family:'Baloo 2', system-ui, sans-serif;
  animation:bs-fade .18s ease;
}
@keyframes bs-fade { from { opacity:0; } to { opacity:1; } }

.bs-overlay audio { display:none !important; }

.bs-card {
  position:relative;
  width:100%; max-width:520px;
  max-height:100%;
  overflow-y:auto;
  background:var(--bs-card);
  border-radius:28px;
  box-shadow:var(--bs-shadow-lift);
  padding: 4vh 6vw; padding:clamp(14px,4vh,32px) clamp(20px,6vw,34px);
  display:flex; flex-direction:column; align-items:center; gap: 2vh; gap:clamp(6px,2vh,14px);
  text-align:center;
  animation:bs-pop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes bs-pop { from { transform:scale(.9); opacity:0; } to { transform:scale(1); opacity:1; } }

.bs-title { margin:0; font-weight:800; font-size: 6vh; font-size:clamp(1.25rem,6vh,1.9rem); color:var(--bs-purple-deep); line-height:1.1; }
.bs-sub   { margin:0 0 6px; font-weight:600; font-size: 3.2vh; font-size:clamp(.85rem,3.2vh,1.02rem); color:var(--bs-ink-soft); }

/* ---- menu screen: one row per day + "whole story" ---- */
.bs-day-list { width:100%; display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.bs-day {
  width:100%; border:2px solid transparent; cursor:pointer;
  border-radius:16px; padding: 2.4vh 4vw; padding:clamp(10px,2.4vh,14px) clamp(14px,4vw,18px);
  background:var(--bs-stage); font-family:inherit; font-weight:700;
  font-size: 3.4vh; font-size:clamp(.92rem,3.4vh,1.05rem); color:var(--bs-ink);
  text-align:center; transition:transform .12s ease, background .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.bs-day:active { transform:scale(.97); }
.bs-day-all { background:var(--bs-sec-purple); color:var(--bs-purple-deep); font-weight:800; }

.bs-home, .bs-back {
  margin-top: 1.6vh; margin-top:clamp(6px,1.6vh,12px);
  border:none; cursor:pointer; border-radius:20px;
  padding: 2.2vh 7vw; padding:clamp(8px,2.2vh,13px) clamp(24px,7vw,36px);
  background:radial-gradient(circle at 50% 34%, #F2EFFB 0%, var(--bs-sec-purple) 100%);
  box-shadow:var(--bs-shadow-soft);
  font-family:inherit; font-weight:800; font-size: 3.6vh; font-size:clamp(.9rem,3.6vh,1.1rem);
  color:var(--bs-purple-deep);
  transition:transform .12s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.bs-home:active, .bs-back:active { transform:scale(.95); box-shadow:var(--bs-shadow-lift); }

/* ---- mode-pick screen: two big choice buttons ---- */
.bs-mode {
  width:100%; border:2px solid transparent; cursor:pointer;
  border-radius:20px; padding: 3.2vh; padding:clamp(14px,3.2vh,20px);
  background:var(--bs-stage);
  display:flex; align-items:center; justify-content:center; gap:12px;
  font-family:inherit; font-weight:800; font-size: 4vh; font-size:clamp(1rem,4vh,1.2rem);
  color:var(--bs-ink); transition:transform .12s ease, background .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.bs-mode:active { transform:scale(.97); }
.bs-mode-emoji { font-size:1.5em; line-height:1; }
.bs-mode[data-mode="auto"] { background:var(--bs-sec-purple); color:var(--bs-purple-deep); }

/* ---- reader screen: FULL-SCREEN (the illustration is the point) ---- */
/* The menu/mode views stay a centred card; adding .is-reader drops the card
   chrome entirely so the story fills the device. */
.bs-overlay.is-reader { padding:0; background:var(--bs-night); }
.bs-card.is-reader {
  max-width:none; width:100%; height:100%; max-height:100%;
  border-radius:0; padding:0; gap:0; overflow:hidden;
  background:var(--bs-night);
  justify-content:stretch;
  animation:none;
}

.bs-parent-btn {
  position:absolute; z-index:5;
  top: 10px; top:max(10px, env(safe-area-inset-top));
  left: 10px; left:max(10px, env(safe-area-inset-left));
  width: 9vw; width:clamp(38px,9vw,48px); height: 9vw; height:clamp(38px,9vw,48px);
  border:none; cursor:pointer; border-radius:50%;
  background:rgba(255,255,255,.85);
  box-shadow:var(--bs-shadow-soft);
  font-size: 4vw; font-size:clamp(1rem,4vw,1.3rem); color:var(--bs-purple-deep);
  display:grid; place-items:center;
  -webkit-tap-highlight-color:transparent;
}

/* ★ כפתור-הבית של הילד (מצב-ילד, אורן 25.8.26).
   בפינה **הימנית** העליונה — הנגדית לגלגל-ההורים שיושב בשמאלית — כדי
   ששניהם לא ייגעו ולא יתבלבלו. גדול יותר מגלגל-ההורים בכוונה: זה הכפתור
   שהילד אמור למצוא, וההוא זה שהוא אמור לא לשים לב אליו.
   ⚠️ במצב הקראה אוטומטית זו היציאה **היחידה** מהקורא: אין אזורי-הקשה, ואין
   רקע חשוף להקיש עליו (הכרטיס במסך-מלא מכסה את השכבה שמתחתיו). */
.bs-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(--bs-shadow-soft);
  color:var(--bs-purple-deep);
  display:grid; place-items:center;
  -webkit-tap-highlight-color:transparent;
}
.bs-home-btn svg { width:58%; height:58%; display:block; }
.bs-home-btn:active { transform:scale(.94); }

.bs-stage {
  position:relative; width:100%;
  flex:1 1 auto; min-height:0;
  overflow:hidden;
  background:var(--bs-night);
  display:grid; place-items:center;
}
/* contain, not cover: never crop the illustration we generated. */
.bs-image { width:100%; height:100%; object-fit:contain; display:block; }

/* explicit paging buttons (parent-read mode only) */
.bs-nav {
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width: 9vw; width:clamp(46px,9vw,62px); height: 9vw; height:clamp(46px,9vw,62px);
  border:none; cursor:pointer; border-radius:50%;
  background:rgba(255,255,255,.86);
  box-shadow:var(--bs-shadow-soft);
  color:var(--bs-purple-deep);
  font-size: 3vw; font-size:clamp(1.05rem,3vw,1.5rem); line-height:1;
  display:grid; place-items:center;
  transition:opacity .15s ease, transform .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.bs-nav:active { transform:translateY(-50%) scale(.92); }
.bs-nav-prev { left: 10px; left:max(10px, env(safe-area-inset-left)); }
.bs-nav-next { right: 10px; right:max(10px, env(safe-area-inset-right)); }
/* only "back" can dead-end (page 1); forward always finishes the story */
.bs-nav.is-disabled { opacity:.28; pointer-events:none; }

/* bottom bar: the page's line + replay-on-demand.
   FLOATS OVER the illustration instead of taking a row of its own (Oren,
   16.7). As a flex row it cost 84px of height, which — with object-fit:contain
   — shrank the art to 1167x636 and pillarboxed it 57px a side. Overlaid, the
   same image renders 1280x698: full width, ~20% more area. The text is for the
   PARENT reading aloud, not the child, so it may sit over the picture. */
.bs-card.is-reader .bs-bar {
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:center; justify-content:center;
  gap: 2.5vw; gap:clamp(10px,2.5vw,18px);
  padding: 2.4vh 4vw; padding:clamp(10px,2.4vh,16px) clamp(14px,4vw,28px);
  padding-bottom: 2.4vh; padding-bottom:max(clamp(10px,2.4vh,16px), env(safe-area-inset-bottom));
  /* A scrim, not a panel: fully clear at the top, only enough white at the
     very bottom to keep the line legible over any illustration (the art is
     warm watercolour; page 25 is a dark night scene). */
  background:linear-gradient(to top,
    rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.62) 55%,
    rgba(255,255,255,0) 100%);
  /* taps fall through to the picture; only real controls take clicks */
  pointer-events:none;
}
.bs-card.is-reader .bs-bar > * { pointer-events:auto; }

.bs-text {
  margin:0; font-weight:600; line-height:1.45;
  font-size: 3.4vh; font-size:clamp(.95rem,3.4vh,1.25rem); color:var(--bs-ink);
  direction:ltr; text-align:center;
  /* halo so the line survives over a busy/dark patch of the illustration */
  text-shadow:0 1px 3px rgba(255,255,255,.95), 0 0 10px rgba(255,255,255,.75);
}

.bs-play {
  flex:0 0 auto;
  width: 8vw; width:clamp(40px,8vw,52px); height: 8vw; height:clamp(40px,8vw,52px);
  border:none; cursor:pointer; border-radius:50%;
  background:radial-gradient(circle at 50% 34%, #A797E0 0%, var(--bs-purple) 100%);
  box-shadow:var(--bs-shadow-soft);
  font-size: 3vw; font-size:clamp(1rem,3vw,1.25rem); line-height:1;
  display:grid; place-items:center;
  transition:transform .12s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.bs-play:active { transform:scale(.92); box-shadow:var(--bs-shadow-lift); }

/* ---- gated parent panel (over the reader) ---- */
.bs-parent-panel {
  position:fixed; top: 0; right: 0; bottom: 0; left: 0; inset:0; z-index:1010;
  display:flex; align-items:center; justify-content:center;
  padding: 3vh; padding:clamp(10px,3vh,32px);
  background:rgba(30,24,44,.5);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  animation:bs-fade .16s ease;
}
.bs-parent-inner {
  width:100%; max-width:360px;
  background:var(--bs-card); border-radius:24px;
  box-shadow:var(--bs-shadow-lift);
  padding: 4vh 5vw; padding:clamp(16px,4vh,26px) clamp(16px,5vw,24px);
  display:flex; flex-direction:column; gap:10px;
}
.bs-parent-inner button {
  border:none; cursor:pointer; border-radius:16px;
  padding: 2.6vh 4vw; padding:clamp(11px,2.6vh,15px) clamp(14px,4vw,18px);
  background:var(--bs-stage); font-family:inherit; font-weight:700;
  font-size: 3.6vh; font-size:clamp(.92rem,3.6vh,1.05rem); color:var(--bs-ink);
  transition:transform .12s ease, background .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.bs-parent-inner button:active { transform:scale(.97); }
.bs-switch-mode { background:var(--bs-sec-purple) !important; color:var(--bs-purple-deep) !important; font-weight:800 !important; }
.bs-to-home { background:var(--bs-purple) !important; color:#FFFFFF !important; }