/* ===== Full-screen pop-up book reader ===== */
@font-face{font-family:Luckiest;src:url(/fonts/LuckiestGuy.ttf);font-display:swap}
@font-face{font-family:Chewy;src:url(/fonts/Chewy.ttf);font-display:swap}
html.fs-on,html.fs-on body{overflow:hidden;overscroll-behavior:none;background:#173F63}
html.fs-on body::after{display:none}
.fsbook{position:fixed;inset:0;z-index:60;background:#0f2a44;perspective:2200px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.fs-stack{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}
.fs-page{position:absolute;inset:0;margin:auto;height:100%;width:100%;overflow:hidden;
  transform-origin:left center;backface-visibility:hidden;background:#173F63;
  box-shadow:0 0 40px rgba(0,0,0,.35)}
@media (min-aspect-ratio:11/16){.fs-page{border-radius:18px;height:calc(100% - 24px);width:min(100%,calc((100dvh - 24px)*9/16))}}
.fs-page.future{visibility:hidden}
.fs-page.past{visibility:hidden}
.fs-page.cur{visibility:visible;z-index:2;transform:rotateY(calc(var(--drag,0) * 28deg))}
.fs-page.cur[style*="--drag"]{transition:none}
.fs-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
/* gentle top/bottom vignette so the UI and text sit on the paper */
.fs-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(10,25,45,.28),transparent 14%,transparent 82%,rgba(10,25,45,.18))}
.fs-shade.soft{background:linear-gradient(rgba(10,25,45,.2),transparent 12%)}

/* page turn: the current page curls away to the left like paper */
.fs-page.flip-out{visibility:visible;z-index:5;animation:fsFlipOut .62s cubic-bezier(.45,.05,.3,1) forwards}
.fs-page.flip-out::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.35));animation:fsShade .62s forwards}
.fs-page.flip-out + .fs-page,.fs-page.flip-out ~ .fs-page.future:nth-of-type(n){}
.fs-page.flip-back{visibility:visible;z-index:5;animation:fsFlipIn .62s cubic-bezier(.45,.05,.3,1) forwards}
@keyframes fsFlipOut{0%{transform:rotateY(0)}100%{transform:rotateY(-105deg)}}
@keyframes fsFlipIn{0%{transform:rotateY(-105deg)}100%{transform:rotateY(0)}}
@keyframes fsShade{from{opacity:0}to{opacity:1}}
/* while flipping forward, show the next page underneath */
.fsbook:has(.flip-out) .fs-page.cur + .fs-page{visibility:visible;z-index:1}
.fsbook:has(.flip-back) .fs-page.cur{z-index:1}

/* text pops in like pop-up pieces when the page lands */
.fs-page.enter .fs-block{animation:fsPop .6s cubic-bezier(.2,1.6,.4,1) both}
.fs-page.enter .fs-block:nth-of-type(2){animation-delay:.25s}
.fs-page.enter .fs-block:nth-of-type(3){animation-delay:.45s}
.fs-page.enter .fs-art{animation:fsZoom 6s ease-out both}
@keyframes fsPop{0%{opacity:0;transform:translateY(18px) scale(.9) rotateX(40deg)}100%{opacity:1;transform:none}}
@keyframes fsZoom{from{transform:scale(1.06)}to{transform:scale(1)}}
.fs-page.enter .pop b,.fs-page.enter .ransom b{animation:fsLetter .5s cubic-bezier(.2,1.8,.4,1) both}
.fs-page.enter .pop b:nth-child(2n),.fs-page.enter .ransom b:nth-child(2n){animation-delay:.08s}
.fs-page.enter .pop b:nth-child(3n),.fs-page.enter .ransom b:nth-child(3n){animation-delay:.16s}
@keyframes fsLetter{0%{transform:scale(0) rotate(-30deg)}100%{transform:translateY(var(--y,0)) rotate(var(--r))}}

/* layout zones */
.fs-block{position:absolute;left:5%;right:5%;display:flex;flex-direction:column;align-items:center;text-align:center;z-index:3}
.fs-block.top{top:calc(64px + env(safe-area-inset-top))}
.fs-block.bottom{bottom:calc(30px + env(safe-area-inset-bottom))}
.fs-block.center{top:50%;transform:translateY(-50%);gap:12px}
.fs-page.enter .fs-block.center{animation-name:fsPopC}
@keyframes fsPopC{0%{opacity:0;transform:translateY(-44%) scale(.9)}100%{opacity:1;transform:translateY(-50%)}}

/* cut-paper words: every word is its own little paper chip */
.cut{margin:0;font:700 clamp(19px,5.6vw,27px)/1.55 "Playpen Sans",system-ui;letter-spacing:.01em}
.cut .w{display:inline-block;padding:1px 7px 2px;margin:2px 1px;transform:rotate(var(--r));
  background:#FFFAEE;color:#173F63;border-radius:3px 6px 4px 7px;
  box-shadow:0 2px 0 rgba(0,0,0,.08),2px 3px 0 rgba(23,63,99,.35);
  clip-path:polygon(0 4%,8% 0,30% 3%,55% 0,80% 4%,100% 1%,98% 30%,100% 70%,97% 100%,70% 96%,40% 100%,12% 97%,0 100%,2% 60%)}
.cut.dark .w{background:#173F63;color:#FFFAEE;box-shadow:2px 3px 0 rgba(243,198,75,.55)}
.fs-block.strip .cut{background:#FFFAEE;padding:10px 16px 12px;border-radius:4px;transform:rotate(-1.2deg);
  box-shadow:0 3px 0 rgba(0,0,0,.08),4px 6px 0 rgba(23,63,99,.35);
  clip-path:polygon(0 6%,3% 0,20% 4%,45% 0,70% 3%,92% 0,100% 5%,99% 50%,100% 94%,85% 100%,60% 97%,35% 100%,10% 96%,1% 100%,0 55%)}
.fs-block.strip .cut .w{background:none;box-shadow:none;clip-path:none;padding:0 2px;margin:0;transform:none}
.fs-block.strip .cut.dark{background:#173F63;color:#FFFAEE}
.fs-block.strip .cut.dark .w{color:#FFFAEE}
/* big ransom-letter pop words inside a sentence */
.pop{display:inline-flex;flex-wrap:wrap;align-items:center;margin:2px 3px;vertical-align:middle}
.pop b,.ransom b{display:inline-block;font:400 1.35em/1 Luckiest,Grandstander,system-ui;color:#173F63;background:var(--bg);
  padding:5px 5px 2px;margin:0 1px;transform:translateY(var(--y,0)) rotate(var(--r));border-radius:2px;
  box-shadow:2px 3px 0 rgba(23,63,99,.45);
  clip-path:polygon(0 5%,20% 0,60% 4%,100% 0,97% 40%,100% 100%,50% 96%,0 100%,3% 50%)}
.pop .sp{display:inline-block;width:.35em}
.ransom{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 16px}
.ransom .rw{display:inline-flex;gap:2px}
.ransom b{text-transform:uppercase;font-family:var(--f),Luckiest;font-size:calc(clamp(30px,10vw,52px) * var(--s,1));padding:6px 7px 3px;font-weight:400}
.finale .ransom b{font-size:calc(clamp(36px,12vw,64px) * var(--s,1))}

/* cover */
.fs-ref{margin:0 0 10px;font:400 18px Chewy,system-ui;color:#FFFAEE;letter-spacing:.06em;background:#C2463B;padding:4px 14px 2px;transform:rotate(-2deg);box-shadow:3px 4px 0 rgba(0,0,0,.3)}
.fs-hint{margin:0;font:700 16px "Playpen Sans";color:#FFFAEE;opacity:.9;animation:fsNudge 1.8s ease-in-out infinite}
.fs-hint span{display:inline-block}
@keyframes fsNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}

/* end pages: notes pinned onto the paper backdrop */
.fs-title{margin:0 0 4px}
.fs-q{position:relative;background:var(--bg);color:#173F63;font:700 clamp(17px,4.8vw,22px)/1.35 "Playpen Sans";padding:14px 16px 14px 50px;text-align:left;
  transform:rotate(var(--r));box-shadow:4px 6px 0 rgba(23,63,99,.35);width:100%;max-width:440px;
  clip-path:polygon(0 3%,10% 0,40% 3%,70% 0,100% 2%,99% 50%,100% 97%,60% 100%,30% 97%,0 100%,1% 50%)}
.fs-q.big{padding:16px 18px;text-align:center;font-size:clamp(19px,5.4vw,25px)}
.fs-q .n{position:absolute;left:12px;top:12px;width:28px;height:28px;border-radius:50%;background:#C2463B;color:#fff;font:400 18px/30px Luckiest;text-align:center}
.fs-sub{margin:4px 0 0;font:700 15px "Playpen Sans";color:#173F63;background:rgba(255,250,238,.85);padding:3px 10px;border-radius:20px}
.fs-note{background:#FFFAEE;color:#173F63;font:700 clamp(18px,5vw,23px)/1.4 "Playpen Sans";padding:18px 18px;max-width:440px;width:100%;
  transform:rotate(-1.5deg);box-shadow:5px 7px 0 rgba(0,0,0,.3);position:relative;display:flex;flex-direction:column;gap:10px;align-items:center}
.fs-note::before{content:"";position:absolute;top:-12px;left:50%;width:90px;height:24px;margin-left:-45px;background:rgba(243,198,75,.85);transform:rotate(3deg)}
.fs-note.verse{transform:rotate(1.5deg);background:#BCD3D4;font-size:clamp(17px,4.6vw,21px)}
.fs-note.verse::before{background:rgba(233,135,122,.8)}
.fs-note small{font:400 15px Luckiest;letter-spacing:.06em;color:#C2463B}
.fs-note em{font-size:14px;opacity:.8}
.fs-note .big{font:400 30px Luckiest;color:#C2463B}
.fs-note i{font-style:normal;color:#C2463B}
.fs-mini{font:700 15px "Playpen Sans";border:0;background:#173F63;color:#FFFAEE;border-radius:20px;padding:8px 14px;display:inline-flex;gap:6px;align-items:center}
.fs-mini svg{width:18px;height:18px}
.fs-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px;position:relative;z-index:4}
.fs-quiz{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.fs-opts{display:flex;flex-direction:column;gap:12px;width:100%;max-width:380px}
.fs-opt{font:400 clamp(20px,5.6vw,26px) Luckiest;color:#173F63;background:var(--bg);border:0;padding:14px 12px 10px;transform:rotate(var(--r));
  box-shadow:4px 6px 0 rgba(23,63,99,.4);clip-path:polygon(0 4%,30% 0,70% 3%,100% 0,98% 50%,100% 100%,50% 96%,0 100%,2% 50%);transition:transform .15s}
.fs-opt:active{transform:rotate(var(--r)) translateY(3px)}
.fs-opt.ok{background:#A9BE9B;outline:4px solid #fff}
.fs-opt.no{opacity:.45}

/* chrome */
.fs-ui{position:absolute;left:0;right:0;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 12px 0;pointer-events:none;
  width:100%;margin:auto}
@media (min-aspect-ratio:11/16){.fs-ui{width:min(100%,calc((100dvh - 24px)*9/16))}}
.fs-x{pointer-events:auto;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,250,238,.92);color:#173F63;display:grid;place-items:center;box-shadow:0 3px 0 rgba(0,0,0,.2);flex:none}
.fs-x svg{width:20px;height:20px}
.fs-x.on{background:#F3C64B}
.fs-prog{flex:1;display:flex;gap:4px}
.fs-prog i{flex:1;height:5px;border-radius:3px;background:rgba(255,250,238,.4)}
.fs-prog i.on{background:#FFFAEE}
.fs-tap{position:absolute;top:15%;bottom:15%;width:22%;z-index:10;background:none;border:0;-webkit-tap-highlight-color:transparent}
.fs-tap.l{left:0}.fs-tap.r{right:0}
.fs-page.talk,.fs-page.pray,.fs-page.quiz,.fs-page.done{}
.fsbook:has(.fs-page.cur.quiz) .fs-tap,.fsbook:has(.fs-page.cur.done) .fs-tap,.fsbook:has(.fs-page.cur.pray) .fs-tap{top:auto;height:12%;bottom:0}
@media (prefers-reduced-motion:reduce){.fs-page.flip-out,.fs-page.flip-back{animation-duration:.01s}.fs-page.enter *{animation:none!important}}

.fs-block.top.quiz-top{top:calc(70px + env(safe-area-inset-top));transform:none}
.fs-page.quiz .fs-block.center{top:calc(64px + env(safe-area-inset-top));transform:none}
.fs-page.enter.quiz .fs-block.center{animation-name:fsPop}
.fs-page.talk .fs-block.center,.fs-page.pray .fs-block.center{top:calc(70px + env(safe-area-inset-top));transform:none}
.fs-page.enter.talk .fs-block.center,.fs-page.enter.pray .fs-block.center{animation-name:fsPop}
.fs-x{box-shadow:2px 3px 0 rgba(23,63,99,.45);clip-path:circle(50%)}