/* Learn With Yuna 8.10.72 — responsive picture-book reader + narrator follow. */
#storyOrientationGate{display:none!important}
#single-story-view{width:100vw!important;max-width:100vw!important;height:100svh!important;height:100dvh!important;overflow:hidden!important;background:#fbf8f1!important}
#single-story-view>.single-story-view{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
#single-story-view .story-header-content{flex:0 0 auto!important;min-width:0!important;background:rgba(255,253,248,.98)!important;border-bottom:1px solid #e8e1d6!important}
#single-story-view #internal-story-content{flex:1 1 auto!important;min-width:0!important;min-height:0!important;overflow:hidden!important}
#single-story-view .story-book-shell{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;padding-bottom:calc(62px + env(safe-area-inset-bottom))!important;background:#fbf8f1!important;overflow:hidden!important}
#single-story-view .story-book-spread,#single-story-view .story-book-spread.coach-collapsed{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr)!important;grid-template-rows:minmax(0,1fr)!important;background:#fbf8f1!important}
#single-story-view .story-stage{grid-column:1!important;grid-row:1!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;padding:clamp(10px,1.6vw,22px)!important;display:grid!important;place-items:center!important;overflow:hidden!important;background:linear-gradient(145deg,#f3eee4,#fffaf2)!important;border-right:1px solid #e6dfd4!important;border-bottom:0!important}
#single-story-view .story-stage #pageImage{display:block!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;border-radius:clamp(14px,1.8vw,24px)!important;background:#f7f2e8!important;box-shadow:0 12px 34px rgba(45,39,31,.10)!important}
#single-story-view .story-copy-panel{grid-column:2!important;grid-row:1!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;overflow:hidden!important;background:#fffdf8!important;border:0!important}
#single-story-view #storyTextContainer.story-box{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;display:block!important;overflow-y:auto!important;overflow-x:hidden!important;padding:clamp(24px,4vw,58px)!important;padding-bottom:clamp(34px,5vw,70px)!important;background:linear-gradient(180deg,#fffdf8,#fffaf4)!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;scrollbar-gutter:stable}
#single-story-view #storyTextContainer .story-text{width:100%!important;max-width:36ch!important;margin:0 auto!important;color:#2d2a28!important;font-family:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif!important;font-size:clamp(19px,1.8vw,27px)!important;font-weight:400!important;line-height:1.68!important;letter-spacing:.002em!important;text-wrap:pretty!important;overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important;-webkit-hyphens:none!important}
#single-story-view #storyTextContainer .story-text p{margin:0 0 1.05em!important}
#single-story-view #storyTextContainer .story-text p:last-child{margin-bottom:0!important}
#single-story-view #storyTextContainer .story-text :is(.sentence-unit,.tap-word){font:inherit!important;line-height:inherit!important;letter-spacing:inherit!important;word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important;-webkit-hyphens:none!important}
#single-story-view #storyTextContainer .story-text .tap-word{border-radius:.24em!important;padding:0 .02em!important}
#single-story-view #storyTextContainer .story-text .tap-word:hover{background:rgba(128,96,26,.08)!important}
#single-story-view .story-nav{height:calc(62px + env(safe-area-inset-bottom))!important;background:rgba(255,253,248,.98)!important;border-top:1px solid #e6dfd4!important;backdrop-filter:blur(10px)!important}
#single-story-view .story-nav button{min-width:44px!important;min-height:44px!important}
#single-story-view .story-coach-panel{max-width:calc(100vw - 16px)!important}

/* Story library cards remain comfortably swipeable on every common smart screen. */
.story-time-main .story-category-track{scroll-padding-inline:clamp(14px,4vw,32px)}
.story-time-main .story-card{min-width:0}

/* Tablet portrait: picture above the page text, like an open vertical picture book. */
@media(min-width:700px) and (max-width:1024px) and (orientation:portrait){
  #single-story-view .story-book-spread,#single-story-view .story-book-spread.coach-collapsed{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(230px,43%) minmax(0,57%)!important}
  #single-story-view .story-stage{grid-column:1!important;grid-row:1!important;border-right:0!important;border-bottom:1px solid #e6dfd4!important;padding:12px!important}
  #single-story-view .story-copy-panel{grid-column:1!important;grid-row:2!important}
  #single-story-view #storyTextContainer.story-box{padding:clamp(24px,5vw,46px)!important}
  #single-story-view #storyTextContainer .story-text{max-width:38ch!important;font-size:clamp(21px,3.2vw,27px)!important}
}

/* Phones portrait: image gets a stable book-illustration window; text uses the rest and scrolls. */
@media(max-width:699px) and (orientation:portrait){
  #single-story-view .story-book-shell{padding-bottom:calc(58px + env(safe-area-inset-bottom))!important}
  #single-story-view .story-book-spread,#single-story-view .story-book-spread.coach-collapsed{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:clamp(170px,48vw,250px) minmax(0,1fr)!important}
  #single-story-view .story-stage{grid-column:1!important;grid-row:1!important;min-height:0!important;max-height:none!important;height:100%!important;padding:0!important;border-right:0!important;border-bottom:1px solid #e6dfd4!important;background:#efe9de!important}
  #single-story-view .story-stage #pageImage{width:100%!important;height:100%!important;border-radius:0!important;box-shadow:none!important;object-fit:contain!important}
  #single-story-view .story-copy-panel{grid-column:1!important;grid-row:2!important;height:100%!important;min-height:0!important}
  #single-story-view #storyTextContainer.story-box{height:100%!important;padding:20px clamp(18px,5vw,24px) 32px!important}
  #single-story-view #storyTextContainer .story-text{max-width:34ch!important;font-size:clamp(18px,5.15vw,22px)!important;line-height:1.62!important}
  #single-story-view .story-nav{height:calc(58px + env(safe-area-inset-bottom))!important}
}

/* Phones and compact tablets in landscape: two balanced pages, no rotate-wall. */
@media(orientation:landscape) and (max-height:720px){
  #single-story-view .story-book-shell{padding-bottom:calc(50px + env(safe-area-inset-bottom))!important}
  #single-story-view .story-book-spread,#single-story-view .story-book-spread.coach-collapsed{grid-template-columns:minmax(0,46%) minmax(0,54%)!important;grid-template-rows:minmax(0,1fr)!important}
  #single-story-view .story-stage{grid-column:1!important;grid-row:1!important;padding:6px!important;border-right:1px solid #e6dfd4!important;border-bottom:0!important}
  #single-story-view .story-stage #pageImage{border-radius:10px!important;box-shadow:none!important}
  #single-story-view .story-copy-panel{grid-column:2!important;grid-row:1!important}
  #single-story-view #storyTextContainer.story-box{padding:12px clamp(16px,3vw,28px) 22px!important}
  #single-story-view #storyTextContainer .story-text{max-width:38ch!important;font-size:clamp(15.5px,2.45vw,20px)!important;line-height:1.52!important}
  #single-story-view .story-nav{height:calc(50px + env(safe-area-inset-bottom))!important}
}

@media(max-width:380px) and (orientation:portrait){
  #single-story-view .story-book-spread,#single-story-view .story-book-spread.coach-collapsed{grid-template-rows:clamp(150px,46vw,190px) minmax(0,1fr)!important}
  #single-story-view #storyTextContainer.story-box{padding:17px 16px 26px!important}
  #single-story-view #storyTextContainer .story-text{font-size:17.5px!important;line-height:1.58!important}
}
@media(prefers-reduced-motion:reduce){#single-story-view *{scroll-behavior:auto!important}}


/* 8.10.71 — smart illustration frame. Never stretch artwork. A soft copy of
   the illustration fills unused stage space while the real image stays sharp. */
#single-story-view .story-stage{position:relative!important;isolation:isolate!important;background:#f4efe6!important}
#single-story-view .story-stage::before{inset:-24px!important;background-image:var(--story-stage-image)!important;background-size:cover!important;background-position:center!important;filter:blur(20px) saturate(.78) brightness(1.08)!important;transform:scale(1.08)!important;opacity:.38!important}
#single-story-view .story-stage::after{background:linear-gradient(180deg,rgba(255,252,246,.18),rgba(247,240,229,.28))!important}
#single-story-view .story-stage #pageImage{position:relative!important;z-index:2!important;object-fit:contain!important;object-position:center!important;background:transparent!important}
#single-story-view .story-stage[data-story-fit="cover"] #pageImage{object-fit:cover!important}

/* Remove every legacy empty/floating shell that can look like a white pill. */
#single-story-view:not(.sync-admin-mode) .story-tools{display:none!important}
#single-story-view .reader-status:empty,
#single-story-view #readerStatus:empty,
#single-story-view .try-words:empty,
#single-story-view .hotspot-container:empty,
#storyToast:empty,
#storyToast[hidden],
#todayWordHint[hidden]{display:none!important}
#single-story-view .story-coach-panel:not(.is-open){display:none!important;visibility:hidden!important;pointer-events:none!important}
#single-story-view .story-coach-panel.is-open{visibility:visible!important;pointer-events:auto!important}

/* Storybook typography: readable, warm, and stable across phone/tablet/desktop. */
#single-story-view #storyTextContainer .story-text{
  font-family:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif!important;
  font-weight:400!important;
  font-kerning:normal!important;
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
}
#single-story-view #storyTextContainer{scroll-behavior:smooth!important;scroll-padding-block:22% 28%!important}

/* Keep the title tools compact on the smallest screens without stealing text space. */
@media(max-width:430px) and (orientation:portrait){
  #single-story-view .story-header-content{min-height:0!important}
  #single-story-view .story-stage{min-height:0!important}
}
@media(prefers-reduced-motion:reduce){#single-story-view #storyTextContainer{scroll-behavior:auto!important}}


/* 8.10.72 — illustration-first responsive frame. Most source artwork is 4:3,
   3:2, 16:10, or 16:9. Give it enough height that a smart cover crop is gentle. */
@media(max-width:699px) and (orientation:portrait){
  #single-story-view .story-book-spread,#single-story-view .story-book-spread.coach-collapsed{
    grid-template-rows:clamp(205px,65vw,285px) minmax(0,1fr)!important;
  }
  #single-story-view .story-stage #pageImage{object-position:center 45%!important}
}
@media(max-width:380px) and (orientation:portrait){
  #single-story-view .story-book-spread,#single-story-view .story-book-spread.coach-collapsed{
    grid-template-rows:clamp(190px,63vw,230px) minmax(0,1fr)!important;
  }
}
@media(orientation:landscape) and (max-height:720px){
  #single-story-view .story-stage{padding:0!important}
  #single-story-view .story-stage #pageImage{border-radius:0!important;object-position:center 45%!important}
}