/* ===== Full-screen layout: the picture fills the screen, words and buttons float over it ===== */
html,body{height:100%}
.app{height:100vh;height:100dvh;padding:0;gap:0;position:relative}
.bar{position:relative;z-index:20;padding:max(8px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px))}
.btitle{display:none}
.tool,.found{background:rgba(20,27,68,.72);border-color:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tool[aria-pressed="true"]{background:var(--sun);border-color:var(--sun)}
.book{gap:0}
.art{border-radius:0;box-shadow:none}
.rotate{display:none}
html.in-app .app{padding:0}

/* upright: picture edge to edge on top, big words underneath */
.artwrap{position:relative;flex:0 0 auto;height:min(75vw,60vh);height:min(75vw,60dvh)}
.panel,body.bedtime .panel{flex:1 1 auto;max-height:none;border-radius:0;margin:0;position:relative;z-index:8;box-shadow:none;background:transparent;color:#fff;
  padding:18px max(20px,env(safe-area-inset-right,0px)) max(14px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}
.story{color:#fff;font-weight:700;text-shadow:0 0 2px #15172B,0 2px 4px rgba(0,0,0,.6)}
.story .say,body.bedtime .story .say{color:#FFE27A}
.story .sfx{color:#FF7A6E}
.story em{text-decoration-color:var(--sun)}
.tip,body.bedtime .tip{background:rgba(255,255,255,.08);color:#F4EEDD}
.tip b,body.bedtime .tip b{color:var(--sun)}
.tip svg path{stroke:var(--sun)}
.dot,body.bedtime .dot{border-color:#fff}
.dot.on,body.bedtime .dot.on{background:#fff}
#foundEnd{color:#FFE27A!important}
.story{font-size:clamp(21px,4.6vw,34px);max-width:40ch}
.tip{font-size:clamp(15px,2.4vw,19px);max-width:60ch}
@media (orientation:portrait) and (max-width:600px){
  .rotate{display:flex;position:absolute;z-index:9;left:50%;bottom:30px;transform:translateX(-50%);align-items:center;gap:8px;white-space:nowrap;
    background:rgba(20,27,68,.82);color:#fff;border:0;border-radius:999px;padding:8px 14px;font:700 14px var(--read);cursor:pointer}
  .rotate svg{width:18px;height:18px}
  body.rotdone .rotate{display:none}
}

/* sideways (iPad, computers): picture fills the screen, words in a card over the bottom */
@media (min-aspect-ratio:1/1){
  .bar{position:absolute;top:0;left:0;right:0;pointer-events:none;padding-bottom:18px;background:linear-gradient(180deg,rgba(10,14,40,.55),rgba(10,14,40,0))}
  .bar>*{pointer-events:auto}
  .book{display:block;position:relative;flex-direction:row}
  .artwrap{position:absolute;inset:0;height:auto;flex:none}
  .panel,body.bedtime .panel{position:absolute;z-index:8;left:0;right:0;margin:0 auto;bottom:max(14px,env(safe-area-inset-bottom,0px));
    width:min(calc(100vw - 16px),1240px);max-height:38vh;max-height:38dvh;border-radius:22px;gap:6px;justify-content:flex-start;
    padding:10px 78px 6px;background:rgba(255,248,236,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
  .story{font-size:clamp(17px,2.05vw,30px);line-height:1.35;max-width:none}
  .tip{font-size:clamp(13px,1.25vw,16px);max-width:none;padding:6px 12px}
  /* Back and Next sit on the left and right of the card, the page dots underneath the words */
  .nav{position:static;margin:0;padding:0;justify-content:center}
  .nav .arrow{position:absolute;z-index:9;top:50%;transform:translateY(-50%)}
  .nav #prevBtn{left:14px}
  .nav #nextBtn{right:14px;padding:0;width:58px;height:58px;border-radius:50%;justify-content:center;font-size:0;gap:0}
  .nav #nextBtn svg{width:26px;height:26px}
  .nav .arrow:disabled{opacity:0;pointer-events:none}
  .dot{width:8px;height:8px}
  .dots{flex:0 0 auto}
  body.nowords .panel .story,body.nowords .panel .tip{display:none}
  body.nowords .panel{width:fit-content;min-width:280px;min-height:78px;padding:10px 84px;justify-content:center}
  /* see-through words: no box, white outlined text over a soft shadow at the bottom of the picture */
  .panel,body.bedtime .panel{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;color:#fff}
  .artwrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;z-index:7;
    background:linear-gradient(180deg,rgba(10,14,40,0),rgba(10,14,40,.5))}
  body.nowords .artwrap::after{opacity:0}
  .story{color:#fff;font-weight:700;text-shadow:0 0 2px #15172B,0 0 2px #15172B,0 0 3px #15172B,0 2px 4px rgba(0,0,0,.9),0 0 14px rgba(10,14,40,.85)}
  .story .say,body.bedtime .story .say{color:#FFE27A}
  .story .sfx{color:#FF7A6E}
  .story em{text-decoration-color:var(--sun)}
  .tip,body.bedtime .tip{background:rgba(15,20,55,.55);color:#F4EEDD;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  .tip b,body.bedtime .tip b{color:var(--sun)}
  .tip svg path{stroke:var(--sun)}
  .dot,body.bedtime .dot{border-color:#fff;box-shadow:0 0 3px rgba(0,0,0,.7)}
  .dot.on,body.bedtime .dot.on{background:#fff}
  #foundEnd{color:#FFE27A!important}
}

.wordsTool{display:none}
@media (min-aspect-ratio:1/1){.wordsTool{display:flex}}
@media (max-width:560px){.tool{padding:0 10px}}
/* short screens (phones held sideways): smaller menu buttons, icons only */
@media (min-aspect-ratio:1/1) and (max-height:520px){
  .bar{padding-top:max(6px,env(safe-area-inset-top,0px))}
  .tool,.found{height:32px;padding:0 9px;font-size:12px}
  .tool span,.found .lbl{display:none}
  .wm{font-size:18px}
  .tip{font-size:12px;padding:4px 10px}
  .tip svg{width:15px;height:15px}
  .tip b{font-size:10px}
  .nav .arrow{width:44px;height:44px}
  .nav #nextBtn{width:46px;height:46px}
  .panel,body.bedtime .panel{padding:6px 64px 4px;bottom:max(6px,env(safe-area-inset-bottom,0px))}
  .endbtn{height:36px;font-size:14px;padding:0 14px}
}

/* back to all the stories, beside the logo */
.brand .back{display:inline-flex;align-items:center;gap:4px;align-self:center;height:40px;padding:0 14px 0 9px;border-radius:20px;border:2px solid #3A4585;color:#DDE0F5;font:600 14px var(--read);text-decoration:none;white-space:nowrap;flex:none}
.brand .back svg{width:18px;height:18px;flex:none}
.brand .back:hover{background:rgba(255,255,255,.08)}
.brand .back:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
@media (max-width:560px){.brand{gap:8px}.brand .back{padding:0 9px}.brand .back span{display:none}}
@media (min-aspect-ratio:1/1) and (max-height:520px){.brand .back{height:32px;padding:0 8px;font-size:12px}.brand .back span{display:none}}