/* The Bea & Milo books: the shelf on the story library and the reader itself.
   The reader page loads adventures.css first (fonts, buttons, the say-it panel). */

/* ---- the shelf (story library) ------------------------------------------ */
.bookshelf{max-width:1264px;margin:10px auto 60px;padding:0 38px}
.bookshelf .path-heading{margin:24px 0 16px}
.bookshelf .path-heading p{margin:6px 0 0;font-size:14px;color:#596e63}
.shelf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.shelf-book{display:flex;flex-direction:column;background:#fffdf6;border:1px solid #d7dfd0;border-radius:24px;box-shadow:0 4px 0 #e6e6d8;overflow:hidden;color:inherit;text-decoration:none;transition:transform .2s}
.shelf-book:hover{transform:translateY(-4px)}
.shelf-cover{background:#dce9d0;aspect-ratio:5/3}
.shelf-cover svg{display:block;width:100%;height:100%}
.shelf-copy{padding:16px 18px 18px;display:flex;flex-direction:column;gap:5px}
.shelf-copy small{font:600 9px system-ui;letter-spacing:1.3px;color:#667260;text-transform:uppercase}
.shelf-copy strong{font-size:22px;font-weight:500;line-height:1.15}
.shelf-copy p{margin:0;font-size:13px;line-height:1.45;color:#556659}
.shelf-practises{font-size:12px;color:#744591;font-weight:500}
.shelf-meta{font-size:11px;color:#6d7d6e}
@media(max-width:850px){.shelf-grid{grid-template-columns:1fr 1fr}.bookshelf{padding:0 24px}}
@media(max-width:600px){.shelf-grid{grid-template-columns:1fr}.bookshelf{padding:0 18px;margin-bottom:90px}.shelf-book{flex-direction:row}.shelf-cover{width:38%;aspect-ratio:auto;flex:none}.shelf-copy{padding:12px 14px}.shelf-copy strong{font-size:19px}.shelf-copy p{font-size:12px}}

/* ---- the book page ------------------------------------------------------------- */
.book-page{background:#e9efdf}
.book-page .loading{padding:40px;text-align:center;color:#596e63}
.book-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.book-back{display:inline-flex;align-items:center;gap:6px;background:#fffaf0;border:1px solid #d1d8c7;border-radius:25px;padding:10px 14px;min-height:46px;font-size:15px}
.book-back .ui-icon{width:20px;height:20px}
.book-title{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.15}
.book-title small{font:600 9px system-ui;letter-spacing:1.5px;color:#667260;text-transform:uppercase}
.book-title strong{font-size:17px;font-weight:500;color:#435d4c}
.book-tools{display:flex;align-items:center;gap:8px}
.book-tool{display:grid;place-items:center;background:#fffdf6;border:1px solid #c3cfbd;border-radius:50%;width:46px;height:46px;font-size:20px}
.book-tool .ui-icon{width:22px;height:22px}
.page-count{font-size:14px;color:#435d4c;padding:0 6px}
.book-cover{max-width:1100px;margin:auto;padding:18px max(20px,env(safe-area-inset-right)) 40px;display:grid;grid-template-columns:1fr;gap:18px}
.book-cover .cover-art{background:#dce9d0;border:1px solid #cfddc1;border-radius:28px;overflow:hidden}
.book-cover .cover-art svg{display:block;width:100%;height:auto}
.cover-copy{background:#fffdf5;border-radius:28px;padding:26px 28px;display:flex;flex-direction:column;gap:12px}
.cover-copy h1{font-size:44px;font-weight:500;letter-spacing:-1px;line-height:1.05;margin:0}
.cover-copy p{font-size:18px;line-height:1.5;color:#4f695b;margin:0}
.level-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.level{background:#fffdf6;border:2px solid #cbd5c6;border-radius:18px;padding:12px;text-align:left;display:flex;flex-direction:column;gap:4px;min-height:74px}
.level strong{font-size:16px;font-weight:500}
.level small{font-size:12px;color:#596e63;line-height:1.3}
.level.on{border-color:#24675b;background:#e5ecda;box-shadow:0 3px 0 #24675b}
.read-button{font-size:22px;min-height:62px}
.cover-meta{font-size:12px;color:#6d7d6e}
.end-actions{display:flex;flex-wrap:wrap;gap:10px}
.end-actions .secondary{display:inline-flex;align-items:center}
@media(min-width:760px){.book-cover{grid-template-columns:1.1fr 1fr;align-items:center}.book-cover .book-head{grid-column:1/-1}.book-stage{max-height:56vh}}

/* the reading frame */
.book-mode{overflow:hidden}
.book-room{height:100dvh;min-height:100svh;max-width:1180px;margin:auto;padding:12px max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom));display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:10px}
.book-stage{background:#dce9d0;border:1px solid #cfddc1;border-radius:26px;overflow:hidden;min-height:0;display:flex;align-items:center;justify-content:center;position:relative;aspect-ratio:600/360;max-height:50vh;width:100%;margin:0 auto}
.book-stage svg{display:block;width:100%;height:100%;max-height:100%}
.book-stage .zone{pointer-events:none;stroke:transparent;stroke-width:3;stroke-dasharray:8 6;transition:fill .2s,stroke .2s}
.book-stage.asking .zone{pointer-events:auto;cursor:pointer}
.book-stage.asking .zone:hover{fill:#fff8e544;stroke:#24675b88}
.book-stage .zone.found{fill:#f5d17c55;stroke:#24675b}
.book-stage .zone.pulse{animation:zone-pulse 1.4s ease-in-out infinite}
.book-words{background:#fffdf5;border-radius:24px;padding:16px 20px;position:relative;overflow:auto;min-height:0}
.page-words{margin:0;font-size:26px;line-height:1.45;letter-spacing:-.2px}
.page-words .sentence{display:inline}
.page-words .w{display:inline;border-radius:6px;padding:0 2px;transition:background-color .15s,color .15s}
.page-words .w.now{background:#f5d17c;box-shadow:0 0 0 3px #f5d17c}
.page-words.findable .w{cursor:pointer;background:#f4ecf8;border:1.5px solid #d7b7e2;border-radius:10px;padding:2px 6px;margin:2px 1px;display:inline-block;min-height:40px;line-height:1.3}
.page-words .w.found{background:#e0f1d6!important;border-color:#347c61!important;color:#1d5a41}
.page-words .w.missed{animation:cue-nudge .5s}
.page-words .w.pulse{animation:word-pulse 1.2s infinite alternate}
@keyframes word-pulse{to{background:#f5d17c;border-color:#bd5036}}
.find-cue{margin-top:10px;font-size:15px;color:#744591}
.find-cue b{font-size:22px;background:#f4ecf8;border:1.5px solid #d7b7e2;border-radius:10px;padding:2px 8px}
.book-ask{background:#fffdf5;border:2px solid #d7b7e2;border-radius:24px;padding:14px 18px;display:flex;flex-direction:column;gap:10px;overflow:auto;min-height:0}
.book-ask .ask-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.book-ask h2{margin:0;font-size:24px;font-weight:500;line-height:1.25}
.book-ask h2 .w.now{background:#f5d17c;border-radius:6px;box-shadow:0 0 0 3px #f5d17c}
.book-ask .listen{min-width:46px;min-height:46px;font-size:20px}
.ask-tap{margin:0;font-size:15px;color:#435d4c}
.book-ask .choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.book-ask .choice{min-height:96px;padding:10px;flex-direction:column;gap:4px;font-size:17px;justify-content:center}
.book-ask .choice svg{width:52px;height:52px}
.book-ask .choice.wrong{opacity:.55}
.book-ask .choice.show{border-color:#bd5036;box-shadow:0 4px 0 #bd5036}
.book-ask .choice.correct{border-color:#347c61;background:#e0f1d6}
.ask-note{margin:0;font-size:15px;color:#435d4c;min-height:20px}
.book-room:has(#ask:not([hidden])) .book-words{display:none}
.book-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.book-foot .dots{display:flex;gap:5px}
.book-foot .dots i{width:14px;height:6px;border-radius:5px;background:#c3d1b9}
.book-foot .dots i.on{background:#448373;width:22px}
.book-foot .dots i.past{background:#9fbfa5}
.book-foot .primary{min-width:140px}
.listening .book-foot .primary{opacity:.6}
/* tell it back */
.retell-room{grid-template-rows:auto auto auto minmax(0,1fr) auto auto auto}
.retell-prompt h2{margin:0;font-size:22px;font-weight:500;background:#fffdf5;border-radius:20px;padding:12px 16px}
.retell-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.slot{background:#fffdf5;border:2px dashed #c3cfbd;border-radius:18px;padding:6px;min-height:84px;display:flex;flex-direction:column;gap:4px;align-items:center}
.slot.filled{border-style:solid;border-color:#24675b}
.slot-number{font:600 10px system-ui;letter-spacing:1.2px;color:#24675b;text-transform:uppercase}
.slot-art{width:100%;aspect-ratio:5/3;border-radius:10px;overflow:hidden;background:#e9efdf}
.slot-art svg{display:block;width:100%;height:100%}
.retell-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;overflow:auto;min-height:0;align-content:start}
.retell-card{background:#fffdf6;border:2px solid #a4b89f;border-radius:20px;padding:8px;box-shadow:0 4px 0 #c5d1bb;display:flex;flex-direction:column;gap:6px;font-size:14px;text-align:center}
.retell-card .card-art{border-radius:12px;overflow:hidden;background:#dce9d0;aspect-ratio:5/3}
.retell-card .card-art svg{display:block;width:100%;height:100%}
.retell-card.used{opacity:.35}
.retell-card.wrong{animation:cue-nudge .5s}
/* phones */
@media(max-width:600px){
  .book-room{padding:10px 10px max(10px,env(safe-area-inset-bottom));gap:8px}
  .book-back span{display:none}.book-back{min-width:44px;justify-content:center;padding:10px}
  .book-title strong{font-size:14px}.book-title small{font-size:8px}
  .book-tool{width:44px;height:44px}
  .book-words{padding:12px 14px}.page-words{font-size:21px;line-height:1.4}
  .page-words.findable .w{min-height:38px;padding:1px 5px}
  .book-ask{padding:12px}.book-ask h2{font-size:20px}
  .book-ask .choices{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
  .book-ask .choice{min-height:84px;font-size:14px}.book-ask .choice svg{width:42px;height:42px}
  .book-foot .primary{min-width:120px;font-size:16px;min-height:48px;padding:10px 14px}
  .book-foot .secondary{font-size:13px;min-height:48px;padding:10px 12px}
  .cover-copy{padding:20px}.cover-copy h1{font-size:34px}.cover-copy p{font-size:15px}
  .level-pick{grid-template-columns:1fr}.level{flex-direction:row;align-items:center;gap:10px;min-height:52px}.level strong{min-width:96px}
  .book-cover{padding:12px 12px 90px;gap:12px}
  .retell-room{grid-template-rows:auto auto auto minmax(0,1fr) auto auto auto}
  .retell-prompt h2{font-size:17px;padding:10px 12px}
  .slot{min-height:64px;padding:4px}.slot-number{font-size:8px}
  .retell-options{grid-template-columns:repeat(3,1fr);gap:6px}.retell-card{padding:5px;font-size:11px;border-radius:14px}
}
@media(max-height:650px) and (orientation:portrait){.page-words{font-size:19px}.book-ask h2{font-size:18px}.book-ask .choice{min-height:72px}}
/* short landscape: picture on the left, words and questions on the right */
@media(max-height:500px) and (orientation:landscape){
  .book-room{grid-template-columns:minmax(0,1.3fr) minmax(250px,1fr);grid-template-rows:44px minmax(0,1fr) auto;gap:8px;padding:8px 14px}
  .book-head{grid-column:1/-1}
  .book-stage{grid-column:1;grid-row:2/4;aspect-ratio:auto;max-height:none}
  .book-words{grid-column:2;grid-row:2;overflow:auto;padding:10px 12px}.page-words{font-size:17px}
  .book-ask{grid-column:2;grid-row:2;padding:10px}.book-ask h2{font-size:17px}
  .book-ask .choices{grid-template-columns:1fr 1fr;gap:6px}.book-ask .choice{min-height:60px;font-size:13px;flex-direction:row}.book-ask .choice svg{width:34px;height:34px}
  .book-foot{grid-column:2;grid-row:3}.book-foot .dots{display:none}
  .book-foot .primary{min-height:44px;font-size:14px;min-width:0}.book-foot .secondary{min-height:44px;font-size:12px;padding:8px 10px}
  .say-it .say-lead{display:none}
  .retell-room{grid-template-columns:minmax(0,1fr) minmax(250px,1fr);grid-template-rows:44px auto minmax(0,1fr) auto}
  .retell-prompt{grid-column:1/-1}.retell-prompt h2{font-size:15px;padding:8px 12px}
  .retell-slots{grid-column:1;grid-row:3;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));align-content:start}.retell-options{grid-column:2;grid-row:3;grid-template-columns:repeat(2,1fr)}
  .retell-room .ask-note{grid-column:1;grid-row:4;font-size:12px}.retell-room .say-host{grid-column:2;grid-row:4}
  .retell-room .book-foot{grid-column:1/-1;grid-row:5}
  .book-cover{grid-template-columns:1fr 1fr;padding:8px 14px 20px}.cover-copy{padding:14px}.cover-copy h1{font-size:26px}.cover-copy p{font-size:13px}.level-pick{grid-template-columns:1fr;gap:5px}.level{min-height:40px;padding:6px 10px;flex-direction:row;gap:8px}.level small{display:none}.read-button{min-height:48px;font-size:17px}
}