/* Orbe Kids — reading space, step 1 (owner's request, 26/09/2026).
   Choice cards turn over one by one, the chosen card lights up, and endings get a page of their own.
   Everything stops with "Effets réduits" (body.effects-off) and prefers-reduced-motion. */

/* Choice cards: hidden while waiting for the bottom of the chapter, then they turn over one after another. */
.choice-grid{perspective:1100px}
.choice-grid.watching .choice{opacity:0;transform:rotateX(-78deg) translateY(16px);transform-origin:50% 0}
.choice-grid.watching.shown .choice{animation:card-turn .75s cubic-bezier(.2,.8,.25,1.15) forwards;animation-delay:calc(.12s + var(--i) * .22s)}
@keyframes card-turn{to{opacity:1;transform:none}}
.choice-grid .choice{transition:transform .35s ease,box-shadow .35s ease,border-color .35s,opacity .45s ease}
.choice-grid.shown .choice:not(:disabled):hover{transform:translateY(-4px);box-shadow:0 16px 34px -18px #f1c875aa}
/* The chosen card lights up; the others step back. */
.choice-grid.picked .choice{animation:none;opacity:1;transform:none;pointer-events:none}
.choice-grid.picked .choice:not(.chosen){opacity:.18;transform:scale(.96)}
.choice-grid.picked .choice.chosen{border-color:#f1c875;box-shadow:0 0 0 2px #f1c87566,0 0 42px #f1c87566;transform:scale(1.03);animation:card-chosen .65s ease forwards}
@keyframes card-chosen{0%{background-color:transparent}40%{background-color:#f1c87522}100%{background-color:#f1c87514}}

/* Ending page: a big star lights up, then the book's stars, the one just found shining. */
.ending-celebration{text-align:center;margin:6px 0 26px;padding:26px 16px 22px;border-radius:20px;background:radial-gradient(circle at 50% 30%,#f1c8752a,transparent 65%);border:1px solid #f1c87533}
.ending-star{width:86px;height:86px;margin:0 auto 10px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#f1c87555,transparent 70%)}
.ending-star span{font-size:48px;line-height:1;color:#f1c875;text-shadow:0 0 24px #f1c875;animation:star-light 1.6s cubic-bezier(.2,.8,.2,1) both,star-glow 3.4s ease-in-out 1.6s infinite}
@keyframes star-light{0%{opacity:0;transform:scale(.2) rotate(-120deg)}60%{opacity:1;transform:scale(1.25) rotate(10deg)}100%{transform:scale(1) rotate(0)}}
@keyframes star-glow{0%,100%{text-shadow:0 0 18px #f1c875aa}50%{text-shadow:0 0 36px #f1c875}}
.ending-celebration .eyebrow{color:#f1c875;margin:6px 0 12px}
.ending-stars{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;font-size:1.05rem;color:#ffffff26}
.ending-stars i{font-style:normal}
.ending-stars i.lit{color:#f1c875b0}
.ending-stars i.this{color:#f1c875;text-shadow:0 0 12px #f1c875;animation:star-light 1.2s ease .9s both}
.ending-left{margin:14px 0 0;color:#c9d6e3}

/* No motion: cards are simply there, the star is simply lit. */
body.effects-off .choice-grid .choice,body.effects-off .ending-celebration *{animation:none!important;transition:none!important}
body.effects-off .choice-grid.watching .choice{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.choice-grid.watching .choice{opacity:1!important;transform:none!important;animation:none!important}.ending-celebration *{animation:none!important}}

/* Step 2 — the illustration breathes: a very slow zoom and drift, like a film shot, and a fade at each new chapter. */
.scene-art,.tale-page-art{overflow:hidden}
.scene-art .main-art,.tale-page-art img{animation:art-arrive 1.4s ease both,art-breathe 26s ease-in-out 1.4s infinite alternate;transform-origin:50% 45%;will-change:transform}
@keyframes art-arrive{from{opacity:0;filter:blur(6px);transform:scale(1.06)}to{opacity:1;filter:none;transform:scale(1.02)}}
@keyframes art-breathe{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.1) translate(-1.6%,-1.2%)}}
.ambience-toggle[aria-pressed="true"]{color:var(--gold)}
.ambience-toggle span{display:inline-block}
.ambience-toggle[aria-pressed="true"] span{animation:note-bob 1.6s ease-in-out infinite}
@keyframes note-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.tale-tools{display:flex;justify-content:flex-end;margin-bottom:6px}
body.effects-off .scene-art .main-art,body.effects-off .tale-page-art img,body.effects-off .ambience-toggle span{animation:none!important;transform:none!important}
@media (prefers-reduced-motion:reduce){.scene-art .main-art,.tale-page-art img,.ambience-toggle span{animation:none!important;transform:none!important}}

/* Voice player. In the chapter, the full player (speed, timeline, follow the words).
   While the narration plays, it becomes a small glass capsule in the bottom-right corner: play/pause inside a golden
   progress ring, −10 s, +10 s and stop. It leaves the text readable and the screen calm. */
.voice-extra{display:flex;align-items:center;gap:8px}
.voice-mini{width:36px;height:36px;padding:0;border-radius:50%;border:1px solid #ffffff22;background:#ffffff0d;color:#dfe8f1;font:600 .68rem/1 Arial,sans-serif;letter-spacing:-.02em;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.voice-mini:hover,.voice-mini:focus-visible{border-color:#f1c875;color:#f1c875;background:#f1c87514}
.voice-stop{font-size:.85rem;color:#a9b8c8}
.voice-refollow{position:absolute;right:6px;bottom:calc(100% + 8px);white-space:nowrap;height:30px;padding:0 13px;border-radius:15px;border:0;background:#f1c875;color:#06182a;font:700 .74rem Arial,sans-serif;box-shadow:0 8px 22px -8px #000c;cursor:pointer;animation:chip-in .3s ease both}
.voice-refollow[hidden]{display:none}
@keyframes chip-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.voice-player:not(.docked) .voice-extra{display:none}
.voice-player.docked{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom));left:auto;z-index:40;width:auto;margin:0;padding:6px 8px 6px 6px;gap:10px;border-radius:999px;border:1px solid #f1c87540;background:#071d31b8;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:0 14px 34px -14px #000d,inset 0 1px 0 #ffffff12;animation:capsule-in .35s cubic-bezier(.2,.8,.2,1) both}
.voice-player.docked .voice-detail{display:none}
.voice-player.docked .voice-toggle{position:relative;width:44px;height:44px;border:0;background:#0d2a44;box-shadow:none}
.voice-player.docked .voice-toggle svg{width:19px;height:19px}
.voice-player.docked .voice-toggle::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(#f1c875 calc(var(--p,0) * 1%),#ffffff1c 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px))}
@keyframes capsule-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
/* Narrower screens: the adventure menu reaches the corner, so the capsule sits just above it. */
@media (max-width:1000px){.voice-player.docked{bottom:calc(100px + env(safe-area-inset-bottom))}}
/* Phones: just above the adventure menu, still in the corner. */
@media (max-width:650px){.voice-player.docked{right:12px;bottom:calc(88px + env(safe-area-inset-bottom))}.voice-mini{width:34px;height:34px}.voice-player.docked .voice-mini:not(.voice-stop){display:none}}
body.effects-off .voice-player.docked,body.effects-off .voice-refollow{animation:none}

/* Read-along (owner's request, 26/09/2026): the text never moves. A soft golden marker glides behind the word being
   read, the sentence being read is lit while the rest of the paragraph softens, and a tapped word replays from there. */
.story-text{position:relative;isolation:isolate}
.story-text .spoken{display:inline;transform:none;text-shadow:none;color:#fff3d6}
.story-text .spoken::after{content:none}
.read-glider{position:absolute;left:0;top:0;z-index:-1;border-radius:7px;background:linear-gradient(180deg,#f1c87538,#f1c87522);box-shadow:0 0 0 1px #f1c87533,0 0 14px #f1c87526;opacity:0;pointer-events:none;transition:transform .22s cubic-bezier(.3,.7,.25,1),width .22s cubic-bezier(.3,.7,.25,1),height .22s ease,opacity .3s ease}
.read-glider.on{opacity:1}
.story-text.following{color:#95a7b9;transition:color .5s ease}
.story-text.following [data-word]{transition:color .35s ease}
.story-text.following .in-sentence{color:#eef3f8}
.story-text.following .spoken{color:#fff3d6}
.story-text.seekable [data-word]{cursor:pointer}
.story-text.seekable [data-word]:hover{text-decoration:underline dotted #f1c87599;text-underline-offset:4px}
/* No motion: the marker jumps from word to word, colours change at once. */
body.effects-off .read-glider,body.effects-off .story-text.following,body.effects-off .story-text.following [data-word]{transition:none}
@media (prefers-reduced-motion:reduce){.read-glider,.story-text.following,.story-text.following [data-word]{transition:none}}
/* Reading timer: a moon pill in the reader tools, its settings, and the gentle "time to close the book" screen. */
.timer-pill{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:4px 12px;border-radius:999px;border:1px solid #f1c87555;background:#f1c87514;color:var(--ink);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap}
.timer-pill.soon{border-color:var(--gold);animation:timer-glow 2.4s ease-in-out infinite}
.timer-pill.up{border-color:#b9a2ff88;background:#b9a2ff1c;color:#e6dcff}
@keyframes timer-glow{0%,100%{box-shadow:0 0 0 0 #f1c87500}50%{box-shadow:0 0 14px 2px #f1c87555}}
.timer-settings{margin:18px 0 6px;padding:16px 18px;border:1px solid var(--line);border-radius:16px}
.timer-settings h3{margin:0 0 6px;font-size:1.02rem}
.timer-settings p{margin:4px 0 10px}
.timer-choices{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.timer-choices .secondary{min-width:78px}
.timer-gate{display:grid;gap:10px;margin-top:14px;padding:14px;border-radius:14px;background:#ffffff08}
.timer-gate label{display:grid;gap:8px;font-weight:700}
.timer-gate input{font:inherit;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#06182a;color:var(--ink);max-width:140px}
.timer-gate .secondary{justify-self:start}
.gate-error{margin:0;color:#ffb4a8;min-height:1em}
.goodnight-dialog{text-align:center;max-width:460px}
.goodnight-dialog .btn-row{justify-content:center;flex-wrap:wrap}
.goodnight-moon{position:relative;display:grid;place-items:center;width:110px;height:110px;margin:6px auto 12px;border-radius:50%;font-size:3.6rem;background:radial-gradient(circle,#f1c87533,transparent 70%);animation:moon-rock 5s ease-in-out infinite}
.goodnight-moon i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff6dc;box-shadow:0 0 6px #f1c875;animation:star-twinkle 3s ease-in-out infinite}
.goodnight-moon i:nth-child(1){top:8px;left:6px}.goodnight-moon i:nth-child(2){top:22px;right:0;animation-delay:1s}.goodnight-moon i:nth-child(3){bottom:10px;left:16px;animation-delay:2s}
@keyframes moon-rock{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
body.effects-off .timer-pill,body.effects-off .goodnight-moon,body.effects-off .goodnight-moon i{animation:none}
@media (prefers-reduced-motion:reduce){.timer-pill,.goodnight-moon,.goodnight-moon i{animation:none}}
.timer-pill.idle{font-weight:600;border-color:var(--line);background:transparent}

/* Phone held sideways (owner's request, 27/09/2026): the illustration stays beside the text instead of above it,
   for Léo (pages and scroll) and for the tales. The whole picture shows, and the header gets thinner. */
@media (orientation:landscape) and (max-height:560px){
 header{height:52px;padding:0 16px}
 .brand{font-size:21px;letter-spacing:3px}.brand-icon{width:30px;height:30px}
 .reader-wrap,.paged-reading .reader-wrap{padding:6px 10px 0}
 .reader-top,.paged-reading .reader-top{margin-bottom:6px;font-size:.72rem}
 .reader-layout,.paged-reading .reader-layout{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);border-radius:12px;animation:none;overflow:clip}
 body.reading header{display:none}
 .scene-art,.paged-reading .scene-art{display:block;position:sticky;top:6px;align-self:start;height:calc(100dvh - 104px);min-height:0;background:#031222}
 .scene-art>img,.paged-reading .scene-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 30%}
 /* The adventure menu sits under the illustration, so the text keeps all the height. */
 .adventure-dock,.paged-reading .adventure-dock{position:fixed;left:max(10px,env(safe-area-inset-left));bottom:6px;width:calc(42% - 12px);margin:0;padding:4px 2px;border-radius:12px}
 .adventure-dock a,.adventure-dock button{font-size:.66rem;gap:2px;padding:3px}
 .adventure-dock .icon,.paged-reading .adventure-dock .icon{width:20px;height:20px}
 .reading-tools,.tale-tools{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
 .reading-tools .timer-pill{min-height:28px;padding:2px 10px;font-size:.7rem}
 .paged-reading .page-controls{margin-top:4px;padding-top:4px}.paged-reading .page-controls button{min-height:36px;padding:6px 12px}
 .reader{padding-bottom:20px}.paged-reading .reader{padding-bottom:6px}
 .scene-art:after,.art-caption,.paged-reading .art-caption,.illustration-toggle,.chapter-caption{display:none}
 .reader,.paged-reading .reader{width:100%;margin:0;padding:8px 14px 8px;min-width:0;max-width:none}
 .reader h1,.paged-reading .reader h1{font-size:1.25rem;margin:0 0 8px;text-align:left}
 .reading-tools{gap:10px;margin-bottom:4px}.reading-tools .text-btn{font-size:.7rem;min-height:30px}
 .story-text,.page-viewport .story-text{font-size:1.05rem;line-height:1.7}
 .glossary-hint{display:none}
 .voice-player:not(.docked){display:flex;align-items:center;gap:10px;padding:6px 10px;margin:4px 0}
 .voice-player:not(.docked) .voice-toggle{width:40px;height:40px;flex-shrink:0}
 .voice-player:not(.docked) .voice-detail{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;flex:1;min-width:0}
 .voice-player:not(.docked) .voice-caption{display:none}
 .voice-player:not(.docked) .voice-timeline{flex:1 1 110px;min-width:0}
 .voice-player:not(.docked) .voice-speed,.voice-player:not(.docked) .voice-follow{margin:0;font-size:.72rem;white-space:nowrap;flex-shrink:0}
 .voice-player:not(.docked) .voice-toggle{width:34px;height:34px}
 .tale-spread{grid-template-columns:44% 56%;overflow:clip}
 .tale-reading{padding:6px 10px 0}
 .tale-page-art{position:sticky;top:0;align-self:start;height:100dvh}
 .tale-page-art img{position:static;width:100%;height:100%;max-height:none;object-fit:contain}
 .tale-text.reader{padding:16px 18px}
 .tale-text h1{font-size:1.25rem;margin-bottom:12px}
 .tale-text .story-text{font-size:1.05rem}
 /* The small voice capsule (play/pause, −10 s, +10 s, stop) sits at the bottom of the illustration, never on the text:
    just above the adventure menu for Léo, at the very bottom of the picture for the tales. */
 .voice-player.docked{left:max(10px,env(safe-area-inset-left));right:auto;bottom:calc(10px + env(safe-area-inset-bottom));width:calc(44% - 20px);justify-content:center}
 body:has(.adventure-dock) .voice-player.docked{bottom:calc(66px + env(safe-area-inset-bottom));width:calc(42% - 12px)}
 .voice-refollow{left:0;right:0;margin:auto;width:max-content}
}

/* Screen held upright (tablet or phone), owner's request 27/09/2026: the chapter is always read in pages and the
   illustration always shows, full width above the text (it used to be a narrow column, or hidden on phones). */
@media (orientation:portrait) and (max-width:1100px){
 .paged-reading .reader-layout{display:block}
 .paged-reading .scene-art{display:block;position:relative;height:clamp(150px,30vh,400px)}
 .paged-reading .scene-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
 .paged-reading .art-caption{display:none}
 .paged-reading .scene-art:after{inset:70% 0 0}
}
@media (orientation:portrait) and (max-width:650px){
 .paged-reading .scene-art{height:clamp(130px,24vh,220px)}
 .paged-reading .reader h1{font-size:1.2rem;margin-bottom:6px}
 .paged-reading .glossary-hint{display:none}
 .paged-reading .reading-tools{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
 .paged-reading .reading-tools .timer-pill{min-height:28px;padding:2px 10px;font-size:.7rem}
 .paged-reading .voice-player:not(.docked){display:flex;align-items:center;gap:10px;padding:6px 10px;margin:4px 0}
 .paged-reading .voice-player:not(.docked) .voice-toggle{width:36px;height:36px;flex-shrink:0}
 .paged-reading .voice-player:not(.docked) .voice-detail{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;flex:1;min-width:0}
 .paged-reading .voice-player:not(.docked) .voice-caption{display:none}
 .paged-reading .voice-player:not(.docked) .voice-timeline{flex:1 1 100%;min-width:0}
 .paged-reading .voice-player:not(.docked) .voice-speed,.paged-reading .voice-player:not(.docked) .voice-follow{margin:0;font-size:.72rem;white-space:nowrap}
}

/* Turning a page (owner's request 27/09/2026): the reading window swings in like a book page from the side the new
   page comes from, with a soft golden light passing over it. Off with « Effets réduits » and prefers-reduced-motion. */
.paged-reading .reader{perspective:1600px}
.page-viewport.turn-next{transform-origin:0 50%;animation:page-turn-next .55s cubic-bezier(.2,.7,.2,1) both}
.page-viewport.turn-prev{transform-origin:100% 50%;animation:page-turn-prev .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes page-turn-next{from{opacity:.15;transform:rotateY(-28deg) translateX(30px);filter:brightness(1.35) sepia(.35)}to{opacity:1;transform:none;filter:none}}
@keyframes page-turn-prev{from{opacity:.15;transform:rotateY(28deg) translateX(-30px);filter:brightness(1.35) sepia(.35)}to{opacity:1;transform:none;filter:none}}
body.effects-off .page-viewport{animation:none!important}
@media (prefers-reduced-motion:reduce){.page-viewport{animation:none!important}}

/* Desktop illustrations retain the whole landscape composition beside the reading page. */
.art-expand{display:none}
.illustration-dialog{width:calc(100vw - 32px);max-width:1400px;max-height:calc(100dvh - 32px);overflow-y:auto}
.illustration-dialog .dialog-head{position:sticky;top:0;z-index:1;padding:8px 0;background:#102b40;border-radius:8px}
.illustration-dialog .dialog-art{width:100%;height:auto;max-height:calc(100dvh - 160px);object-fit:contain;background:#031222}
@media (min-width:761px) and (min-height:561px) and (orientation:landscape){
 .paged-reading .reader-wrap{max-width:1600px;padding-left:24px;padding-right:24px}
 .paged-reading .reader-layout{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
 .paged-reading .scene-art{background:radial-gradient(ellipse at center,#18364b,#031222 80%);border-right:1px solid var(--line)}
 .paged-reading .scene-art .main-art{object-fit:contain;object-position:center;padding:64px 18px;animation:none;transform:none;will-change:auto}
 .paged-reading .scene-art:after,.paged-reading .mystery-dust{display:none}
 .paged-reading .art-caption{bottom:14px;left:18px;right:18px;font-size:.65rem;letter-spacing:.06em;line-height:1.5}
 .paged-reading .art-expand{display:inline-flex;align-items:center;gap:8px;position:absolute;z-index:3;right:16px;top:12px;min-height:40px;padding:8px 14px;border:1px solid #678095;border-radius:24px;background:#081c2ee8;color:var(--ink);font-size:.8rem}
 .paged-reading .art-expand span{font-size:1.3rem;line-height:1}
 .paged-reading .art-expand:hover{background:#24445c;border-color:var(--gold)}
 .paged-reading .illustration-toggle{display:none}
 .paged-reading .reading-tools{justify-content:flex-start;gap:8px 14px;flex-wrap:wrap}
 .stop-dialog{max-width:840px}
 .stop-dialog .dialog-art{max-height:min(50vh,500px);object-fit:contain}
}