/* screen-reader.css — the Reader screen. Owned by S3.
   Big picture on top, big words below, nothing else competing for her eye.
   All colours/sizes come from tokens.css; the few locals below are highlight
   tints and scene gradients that exist only on this screen. */

#screen-reader {
  padding: 0;
  overflow: hidden;
  background: var(--c-bg);
}
/* .btn is display:inline-flex, which beats the UA [hidden] rule. */
#screen-reader [hidden] { display: none !important; }

.rd {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;

  --rd-hi:      #FFE79E;   /* the word being spoken */
  --rd-hi-line: var(--c-buck);
  --rd-read:    #FFF7E2;   /* the whole page being read aloud */
}

/* ---------------------------------------------------------- illustration */

/* Flexible top: it takes ~57% but yields height to the text so a long page can
   never be clipped. */
.rd__art {
  position: relative;
  flex: 1 1 57%;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, #CFEFFF 0%, #E4F7C2 48%, var(--c-meadow) 100%);
}

.rd__art[data-scene="meadow"] {
  background: linear-gradient(180deg, #CFEFFF 0%, #E7F8C6 46%, var(--c-meadow) 100%);
}
.rd__art[data-scene="pond"] {
  background: linear-gradient(180deg, #DFF4FF 0%, #A8DEF3 40%, var(--c-pond) 78%, #3E9CC7 100%);
}
.rd__art[data-scene="woods"] {
  background: linear-gradient(180deg, #DCF2D2 0%, #A5D89B 42%, var(--c-woods) 74%, #4A8659 100%);
}
.rd__art[data-scene="den"] {
  background: linear-gradient(180deg, #F7E2C0 0%, #E4B984 48%, #C08B57 100%);
}
.rd__art[data-scene="stars"] {
  background:
    radial-gradient(2px 2px at 12% 22%, #FFF 50%, transparent 51%),
    radial-gradient(2px 2px at 78% 16%, #FFF 50%, transparent 51%),
    radial-gradient(3px 3px at 34% 68%, #FFF6C9 50%, transparent 51%),
    radial-gradient(2px 2px at 62% 44%, #FFF 50%, transparent 51%),
    radial-gradient(2px 2px at 88% 72%, #FFF 50%, transparent 51%),
    radial-gradient(2px 2px at 22% 86%, #FFF 50%, transparent 51%),
    linear-gradient(180deg, #4B3E8F 0%, #2E2566 55%, #1B1444 100%);
}
.rd__art[data-scene="night"] {
  background:
    radial-gradient(2px 2px at 18% 30%, #FFF 50%, transparent 51%),
    radial-gradient(2px 2px at 70% 24%, #FFF 50%, transparent 51%),
    radial-gradient(2px 2px at 46% 78%, #FFF 50%, transparent 51%),
    linear-gradient(180deg, #38357A 0%, #241F5A 60%, #16123B 100%);
}

/* ---- props: EVERY emoji in the array, wrapped so a count stays countable -- */

.rd__props {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: var(--sp-3) var(--sp-4);
  width: 88%;
  max-height: 100%;
  padding: var(--sp-4) 0;
  overflow-y: auto;            /* safety net: never clip a prop out of reach */
  text-align: center;
  pointer-events: none;        /* taps belong to the page-turn zones below */
}
.rd__prop {
  line-height: 1;
  filter: drop-shadow(0 4px 5px rgba(58, 46, 57, .22));
  animation: rd-pop 340ms var(--ease-pop) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

.rd__props--xl { font-size: clamp(64px, 17vh, 136px); }
.rd__props--l  { font-size: clamp(54px, 14vh, 108px); }
.rd__props--m  { font-size: clamp(46px, 11vh, 88px);  gap: var(--sp-3); }
.rd__props--s  { font-size: clamp(38px, 9vh, 72px);   gap: var(--sp-2) var(--sp-3); }
.rd__props--xs { font-size: clamp(32px, 7.5vh, 60px); gap: var(--sp-2); }

@keyframes rd-pop {
  from { opacity: 0; transform: scale(.55) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---- tap-to-turn halves of the picture ---------------------------------- */

.rd__zone {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  cursor: pointer;
}
.rd__zone--prev { left: 0;  width: 40%; }
.rd__zone--next { right: 0; width: 60%; }
.rd__zone.is-off { pointer-events: none; }

.rd__hint {
  position: absolute;
  right: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  font-size: 54px;
  line-height: 1;
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 2px 6px rgba(58, 46, 57, .3);
  animation: rd-nudge 2.6s ease-in-out infinite;
}
.rd__zone.is-off .rd__hint { display: none; }
@keyframes rd-nudge {
  0%, 70%, 100% { transform: translateY(-50%) translateX(0); opacity: .55; }
  85%           { transform: translateY(-50%) translateX(6px); opacity: .9; }
}

/* ---- back arrow --------------------------------------------------------- */

.rd__back {
  position: absolute;
  z-index: 6;
  top: var(--sp-3);
  left: var(--sp-3);
  width: var(--tap);
  height: var(--tap);
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--c-ink);
  font-family: var(--font);
  font-size: 30px;
  line-height: 1;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.rd__back:active { transform: translateY(2px); }

/* ---------------------------------------------------------------- the page */

.rd__below {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  margin-top: -18px;
  padding: var(--sp-4) var(--sp-3) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  background: var(--c-surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 -6px 20px rgba(58, 46, 57, .12);
}

.rd__textwrap { display: block; }

.rd__text {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-read);
  /* never below the token; a little bigger on a roomy screen */
  font-size: max(var(--fs-read), min(5vw, 44px));
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .01em;
  text-align: center;
  color: var(--c-ink);
  border-radius: var(--r-md);
  transition: background var(--dur) ease;
}
.rd__text.is-reading { background: var(--rd-read); }

/* Every word is its own 64px-tall tap target, padding included, so a small
   word like "a" is still easy to hit. */
.rd__w {
  display: inline-block;
  min-width: 40px;
  min-height: var(--tap);
  margin: 3px 2px;
  padding: 10px 8px;
  line-height: 44px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-fast) ease,
              transform var(--dur-fast) var(--ease-pop),
              box-shadow var(--dur-fast) ease;
}
.rd__w:active { transform: scale(.96); }
.rd__w.is-saying {
  background: var(--rd-hi);
  box-shadow: inset 0 0 0 3px var(--rd-hi-line);
  transform: scale(1.06);
}

/* page-turn: a soft slide + fade, ~250ms */
.rd-in-next { animation: rd-in-next 250ms ease both; }
.rd-in-prev { animation: rd-in-prev 250ms ease both; }
@keyframes rd-in-next {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes rd-in-prev {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---- progress pips ------------------------------------------------------ */

.rd__pips {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: var(--sp-2) 0 var(--sp-3);
}
.rd__pip {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-line);
  transition: background var(--dur) ease, transform var(--dur) var(--ease-pop);
}
.rd__pip.is-done { background: var(--c-primary); }
.rd__pip.is-here { transform: scale(1.5); }

/* ---- controls ----------------------------------------------------------- */

.rd__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.rd__prev, .rd__speak { flex: 0 0 auto; }
.rd__speak.is-on {
  background: var(--rd-hi);
  box-shadow: 0 4px 0 var(--rd-hi-line);
}
.rd__next {
  flex: 1 1 auto;
  font-size: var(--fs-huge);
  min-height: var(--tap);
}
.rd__finish {
  flex: 1 1 auto;
  min-height: calc(var(--tap) + 12px);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-big);
  background: linear-gradient(180deg, #FFC24D 0%, var(--c-buck) 100%);
  color: var(--c-ink);
  box-shadow: 0 5px 0 #C98C1A;
  animation: rd-shine 1.8s ease-in-out infinite;
}
@keyframes rd-shine {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
.rd__finish.is-disabled { animation: none; }

/* ---- the "no book" fallback — always a way onward ----------------------- */

.rd--empty {
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-6);
  text-align: center;
}
.rd__emptyart { font-size: 96px; line-height: 1; }
.rd__emptytext {
  margin: 0;
  font-family: var(--font-read);
  font-size: var(--fs-big);
  color: var(--c-ink-soft);
}

/* ---- short / landscape screens ----------------------------------------- */

@media (max-height: 620px) {
  .rd__art { flex-basis: 46%; }
  .rd__pips { padding: var(--sp-1) 0 var(--sp-2); }
  .rd__below { padding-top: var(--sp-3); }
}

@media (min-width: 720px) {
  .rd__below { padding-left: var(--sp-6); padding-right: var(--sp-6); }
  .rd__text { max-width: 900px; margin-left: auto; margin-right: auto; }
}

/* ============================================================================
   Scenery pass (integration, post-agent).
   The art pane was a bare gradient with one small emoji floating in it — on a
   390x844 phone that left ~70% of the picture empty, which is the opposite of a
   picture book. Two additions, both pure CSS so no assets are needed:
     ::before  a soft sun / moon disc, placed per scene
     ::after   a rolling ground band, so the scene has a horizon and a floor
   Props are also enlarged, since a single emoji is the "illustration".
   ========================================================================= */

.rd__art::before,
.rd__art::after { content: ""; position: absolute; pointer-events: none; }

/* sun / moon */
.rd__art::before {
  top: 9%; right: 12%;
  width: clamp(46px, 11vh, 88px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #FFF7CE 0%, #FFE480 58%, #FFD34D 100%);
  box-shadow: 0 0 0 10px rgba(255,240,170,.30), 0 0 44px 14px rgba(255,231,140,.42);
}
/* rolling ground */
.rd__art::after {
  left: -6%; right: -6%; bottom: -14%;
  height: 42%; border-radius: 50% 50% 0 0 / 34% 34% 0 0;
  background: rgba(255,255,255,.20);
  box-shadow: inset 0 5px 0 rgba(255,255,255,.34);
}

.rd__art[data-scene="meadow"]::after { background: #96D75F; box-shadow: inset 0 5px 0 #B6E683; }
.rd__art[data-scene="pond"]::after   { background: #6EC6E8; box-shadow: inset 0 5px 0 #9BDCF2; }
.rd__art[data-scene="woods"]::after  { background: #74B674; box-shadow: inset 0 5px 0 #96CE93; }
.rd__art[data-scene="den"]::after    { background: #D9A86C; box-shadow: inset 0 5px 0 #EBC393; }

/* Night scenes get a moon instead of a sun, and a darker ground. */
.rd__art[data-scene="stars"]::before,
.rd__art[data-scene="night"]::before {
  background: radial-gradient(circle at 62% 38%, #FFFDF2 0%, #FFF3C4 60%, #F5E39A 100%);
  box-shadow: 0 0 0 10px rgba(255,247,205,.14), 0 0 52px 16px rgba(255,243,196,.30);
}
.rd__art[data-scene="stars"]::after  { background: #3B3470; box-shadow: inset 0 5px 0 #514790; }
.rd__art[data-scene="night"]::after  { background: #33305E; box-shadow: inset 0 5px 0 #46427C; }

/* The props are the illustration — let them fill the pane. */
.rd__props { position: relative; z-index: 1; }
.rd__props--xl { font-size: clamp(96px, 26vh, 210px); }
.rd__props--l  { font-size: clamp(78px, 21vh, 168px); }
.rd__props--m  { font-size: clamp(62px, 16vh, 128px); }
.rd__props--s  { font-size: clamp(50px, 12vh, 100px); }
.rd__props--xs { font-size: clamp(40px, 9.5vh, 78px); }

/* Keep the control bar clear of the iPhone home indicator — it was sitting
   within ~17px of the viewport bottom. */
.rd__bar { padding-bottom: max(var(--sp-2), env(safe-area-inset-bottom, 0px)); }