/* ===== Full-screen pop-up book reader ===== */
html.fs-on,html.fs-on body{overflow:hidden;overscroll-behavior:none;background:#173F63}
html.fs-on body::after{display:none}
/* touch-action:none -> we own every horizontal move; drags only begin after 8px of horizontal-dominant travel */
.fsbook{position:fixed;inset:0;z-index:60;background:#0f2a44;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overflow:hidden;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  font-family:Grandstander,system-ui,sans-serif;font-weight:800;color:#173F63}
.fsbook *{-webkit-tap-highlight-color:transparent}
.fs-stack{position:absolute;inset:0;perspective:1800px;perspective-origin:50% 50%}
.fs-page{position:absolute;inset:0;margin:auto;height:100%;width:100%;overflow:hidden;background:#173F63;
  visibility:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-origin:0% 50%}
@media (min-aspect-ratio:11/16){.fs-page{border-radius:18px;height:calc(100% - 24px);width:min(100%,calc((100dvh - 24px)*9/16))}}
/* only the current page and the page underneath it (during a turn) are drawn */
.fs-page.cur{visibility:visible;z-index:3;will-change:transform;box-shadow:0 0 34px rgba(0,0,0,.4)}
.fs-page.under{visibility:visible;z-index:2}
.fs-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
/* gentle top/bottom vignette so the UI sits on the paper */
.fs-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(10,25,45,.28),transparent 14%,transparent 84%,rgba(10,25,45,.16))}
.fs-shade.soft{background:linear-gradient(rgba(10,25,45,.2),transparent 12%)}
/* curl shadow: scaled with drag progress (transform only) */
.fs-curl{position:absolute;top:0;bottom:0;width:46%;z-index:8;pointer-events:none;transform:scaleX(0);will-change:transform}
.fs-curl.r{right:0;transform-origin:100% 50%;
  background:linear-gradient(90deg,rgba(10,25,45,0) 0%,rgba(10,25,45,.08) 45%,rgba(10,25,45,.3) 80%,rgba(255,250,238,.28) 93%,rgba(10,25,45,.45) 100%)}
.fs-curl.l{left:0;transform-origin:0% 50%;
  background:linear-gradient(270deg,rgba(10,25,45,0) 0%,rgba(10,25,45,.08) 45%,rgba(10,25,45,.3) 80%,rgba(255,250,238,.28) 93%,rgba(10,25,45,.45) 100%)}

/* framed story pages: the whole 9:16 picture is visible; a blurred copy fills any extra height */
/* full-bleed: art covers the page; .fs-frame is an invisible box where the original 9:16 picture sits (text placement only) */
.fs-frame{position:absolute;left:var(--fl,0px);top:var(--ft,0px);width:var(--fw,100%);height:var(--fh,100%);pointer-events:none}
.fs-frame>*{pointer-events:auto}
.fs-page.framed .fs-shade{display:none}
/* layout zones */
.fs-block{position:absolute;left:7%;right:7%;display:flex;flex-direction:column;align-items:center;text-align:center;z-index:3}
.fs-block.at-top{top:calc(22px + var(--sat))}
.fs-block.at-bottom{bottom:calc(var(--sab) + 84px)}
/* inside the frame: clear the menu button only when the frame reaches the top; clear the home bar only when it reaches the bottom */
.fs-frame .fs-block.at-top{top:max(3%, calc(18px + var(--sat) - var(--ft,0px)))}
.fs-frame .fs-block.at-bottom{bottom:max(3%, calc(var(--sab) + 84px - var(--fbm,0px)))}
.fs-block.al{align-items:flex-start}.fs-block.ar{align-items:flex-end}
.fs-block.at-center{top:50%;transform:translateY(-50%);gap:12px}

/* ONE torn cut-paper card per text block: cream paper, torn edge, slight tilt, coloured paper layer + layered shadow */
.fs-card{position:relative;display:block;max-width:var(--w,100%);transform:rotate(var(--tilt,-1deg));
  filter:drop-shadow(0 1.5px 0 rgba(43,36,32,.25)) drop-shadow(0 5px 4px rgba(10,25,45,.28)) drop-shadow(0 13px 14px rgba(10,25,45,.26))}
.fs-card::before{content:"";position:absolute;inset:2px 0 0 0;z-index:-1;background:var(--under,#F3C64B) var(--grain);clip-path:var(--torn2);
  transform:translate(5px,6px) rotate(var(--tilt2,2deg))}
.fs-card p{position:relative;margin:0;padding:15px 18px 16px;background:#FFFAEE var(--grain);color:#173F63;clip-path:var(--torn);
  font:800 clamp(20px,5.9vw,27px)/1.14 Grandstander,system-ui,sans-serif;letter-spacing:.005em;text-align:center;text-wrap:balance;-webkit-hyphens:none;hyphens:none}
.finale .fs-card p{font-size:clamp(26px,7.4vw,36px);line-height:1.1;padding:18px 20px 20px}

/* ransom-letter titles (end pages only) */
.ransom{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 16px}
.ransom .rw{display:inline-flex;gap:2px}
.ransom b{display:inline-block;font:800 1.35em/1 Grandstander,system-ui;color:#173F63;background:var(--bg);
  padding:6px 7px 3px;margin:0 1px;transform: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%);
  text-transform:uppercase;font-family:Grandstander,system-ui;font-weight:800;font-size:calc(clamp(30px,10vw,52px) * var(--s,1))}

/* cover */
.cover-b{gap:14px}
.fs-ref{margin:0;font:800 22px/1.1 Grandstander,system-ui;color:#FFFAEE;letter-spacing:.03em;background:#C2463B;padding:7px 18px 6px;transform:rotate(-2deg);
  box-shadow:3px 4px 0 rgba(0,0,0,.3);clip-path:polygon(0 8%,6% 0,40% 6%,72% 0,100% 5%,98% 52%,100% 96%,62% 100%,30% 94%,4% 100%,1% 50%)}
.fs-start{position:relative;display:inline-flex;align-items:center;gap:12px;border:0;padding:0;background:none;cursor:pointer;color:#173F63;
  font:800 clamp(26px,7.4vw,32px)/1 Grandstander,system-ui;transform:rotate(-1.5deg);
  filter:drop-shadow(0 2px 0 rgba(43,36,32,.3)) drop-shadow(0 8px 10px rgba(0,0,0,.35));animation:fsBreathe 2.4s ease-in-out infinite}
.fs-start::before{content:"";position:absolute;inset:0;z-index:-1;background:#F3C64B var(--grain);clip-path:var(--torn2);transform:translate(6px,7px) rotate(2.2deg)}
.fs-start::after{content:"";position:absolute;inset:0;z-index:-1;background:#FFFAEE var(--grain);clip-path:var(--torn)}
.fs-start{padding:18px 30px 18px 20px}
.fs-start svg{width:44px;height:44px;flex:none;padding:10px 8px 10px 12px;border-radius:50%;background:#C2463B;color:#FFFAEE;box-sizing:border-box}
.fs-start:active{transform:rotate(-1.5deg) translateY(3px) scale(.98)}
.fsbook:not(.armed) .fs-start{display:none}
@keyframes fsBreathe{0%,100%{transform:rotate(-1.5deg) scale(1)}50%{transform:rotate(-1.5deg) scale(1.045)}}
.fs-hint{margin:0;font:800 21px/1.1 Grandstander,system-ui;color:#FFFAEE;text-shadow:0 2px 0 rgba(10,25,45,.6),0 0 14px rgba(10,25,45,.8)}
.fs-hint span{display:inline-block;animation:fsNudge 1.8s ease-in-out infinite}
@keyframes fsNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}

/* end pages: notes pinned onto the paper backdrop (all title font, nothing small) */
.fs-title{margin:0 0 4px}
.fs-q{position:relative;background:var(--bg) var(--grain);color:#173F63;font:800 clamp(20px,5.7vw,25px)/1.2 Grandstander,system-ui;padding:14px 16px 14px 56px;text-align:left;
  transform:rotate(var(--r));filter:drop-shadow(4px 6px 0 rgba(23,63,99,.35));width:100%;max-width:440px;box-sizing:border-box;
  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(23px,6.4vw,28px)}
.fs-q .n{position:absolute;left:12px;top:12px;width:34px;height:34px;border-radius:50%;background:#C2463B;color:#fff;font:800 21px/35px Grandstander,system-ui;text-align:center}
.fs-sub{margin:4px 0 0;font:800 21px/1.15 Grandstander,system-ui;color:#173F63;background:rgba(255,250,238,.92);padding:6px 16px;border-radius:20px}
.fs-note{background:#FFFAEE var(--grain);color:#173F63;font:800 clamp(21px,6vw,26px)/1.22 Grandstander,system-ui;padding:20px 18px;max-width:440px;width:100%;box-sizing:border-box;
  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;text-align: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.fs-verse{transform:rotate(1.5deg);background-color:#BCD3D4;font-size:clamp(21px,5.8vw,25px)}
.fs-note.fs-verse::before{background:rgba(233,135,122,.8)}
.fs-note small{font:800 20px/1 Grandstander,system-ui;letter-spacing:.04em;text-transform:uppercase;color:#C2463B}
.fs-note em{font:800 20px/1.1 Grandstander,system-ui;font-style:normal;color:#07556A}
.fs-note .big{font:800 30px/1.1 Grandstander,system-ui;color:#C2463B}
.fs-note i{font-style:normal;color:#C2463B}
.fs-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px;position:relative;z-index:4}
.fsbook .btn{font:800 21px/1.1 Grandstander,system-ui;padding:.6em 1.05em}
.fsbook .btn svg{width:24px;height:24px}
.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:800 clamp(22px,6.2vw,27px)/1.1 Grandstander,system-ui;color:#173F63;background:var(--bg) var(--grain);border:0;padding:14px 12px 13px;transform:rotate(var(--r));
  filter:drop-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;touch-action:manipulation}
.fs-opt:active{transform:rotate(var(--r)) translateY(3px)}
.fs-opt.ok{background-color:#A9BE9B;outline:4px solid #fff}
.fs-opt.no{opacity:.45}
.fs-opt[disabled]{color:#173F63}

/* chrome */
.fs-ui{position:absolute;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;padding:0 0 calc(14px + var(--sab));pointer-events:none;
  width:100%;margin:auto;box-sizing:border-box}
/* one small paper menu tab (top right) */
/* round paper button, bottom centre: cream disc on a honey paper layer */
.fs-mb{pointer-events:auto;position:relative;width:56px;height:56px;border:0;padding:0;border-radius:50%;background:#FFFAEE var(--grain);color:#173F63;display:grid;place-items:center;cursor:pointer;
  box-shadow:3px 4px 0 #D9A86A,0 8px 14px rgba(10,25,45,.35);opacity:.94;touch-action:manipulation;transition:opacity .2s,transform .15s}
.fs-mb::after{content:"";position:absolute;inset:5px;border-radius:50%;border:2px dashed rgba(23,63,99,.22);pointer-events:none}
.fs-mb svg{width:24px;height:24px}
.fs-mb:active{transform:scale(.9) rotate(-4deg)}
.fsbook.menu-open .fs-mb{opacity:0}
.fs-menu{position:absolute;inset:0;z-index:40;background:rgba(10,25,45,.45);display:flex;align-items:flex-end;justify-content:center;padding:calc(14px + var(--sat)) 14px calc(14px + var(--sab));touch-action:pan-y}
.fs-menu[hidden]{display:none}
.fs-sheet{position:relative;width:min(100%,400px);max-height:calc(100% - 10px);overflow:auto;padding:22px 18px 18px;display:flex;flex-direction:column;align-items:center;gap:12px;
  animation:fsUnfold .32s cubic-bezier(.2,1.3,.4,1) both;transform-origin:50% 100%;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.fs-sheet::before{content:"";position:absolute;inset:0;z-index:-1;background:#FFFAEE var(--grain);clip-path:var(--torn)}
.fs-sheet::after{content:"";position:absolute;inset:0;z-index:-2;background:#F3C64B;clip-path:var(--torn2);transform:translate(6px,7px) rotate(1.4deg)}
@keyframes fsUnfold{0%{transform:perspective(700px) rotateX(75deg);opacity:0}100%{transform:none;opacity:1}}
.fs-pg{margin:0;font:800 18px/1 Grandstander,system-ui;color:#07556A;letter-spacing:.04em;text-transform:uppercase}
.fs-ml{margin:6px 0 0;font:800 20px/1 Grandstander,system-ui;color:#C2463B}
.fs-mi{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;border:0;cursor:pointer;text-decoration:none;
  font:800 23px/1 Grandstander,system-ui;color:#173F63;background:#BCD3D4 var(--grain);padding:13px 16px;transform:rotate(-1deg);
  clip-path:polygon(0 6%,30% 0,70% 5%,100% 0,99% 50%,100% 96%,60% 100%,25% 95%,0 100%,1% 50%);filter:drop-shadow(3px 4px 0 rgba(23,63,99,.3))}
.fs-mi svg{width:28px;height:28px;flex:none}
.fs-mi.off{background-color:#E9877A}
.fs-mi.close{background-color:#F6EAD7;transform:rotate(1deg)}
/* paper switches */
.fs-sw{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;box-sizing:border-box;border:0;cursor:pointer;touch-action:manipulation;
  font:800 22px/1 Grandstander,system-ui;color:#173F63;background:#F6EAD7 var(--grain);padding:12px 14px 12px 18px;transform:rotate(-.8deg);
  clip-path:polygon(0 6%,30% 0,70% 5%,100% 0,99% 50%,100% 96%,60% 100%,25% 95%,0 100%,1% 50%);filter:drop-shadow(3px 4px 0 rgba(23,63,99,.25))}
.fs-sw+.fs-sw{transform:rotate(.7deg)}
.fs-sw i{position:relative;flex:none;width:62px;height:34px;border-radius:20px;background:#C9A77C;box-shadow:inset 0 3px 0 rgba(43,36,32,.25);transition:background .2s}
.fs-sw i::after{content:"";position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:#FFFAEE var(--grain);box-shadow:0 3px 0 rgba(23,63,99,.35);transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.fs-sw[aria-checked="true"] i{background:var(--sw,#8AB5CC)}
.fs-sw[aria-checked="true"] i::after{transform:translateX(28px)}
.fs-sel{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.fs-sel select{width:100%;box-sizing:border-box;appearance:none;-webkit-appearance:none;border:0;border-radius:0;cursor:pointer;
  font:800 22px/1.1 Grandstander,system-ui;color:#173F63;padding:13px 46px 13px 16px;
  background:#FFFAEE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%23C2463B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/22px;
  clip-path:polygon(0 8%,40% 0,100% 6%,98% 55%,100% 100%,45% 94%,0 100%,2% 45%);filter:drop-shadow(3px 4px 0 rgba(23,63,99,.3));box-shadow:none}
.fs-voices{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.fs-vc{border:0;cursor:pointer;font:800 19px/1 Grandstander,system-ui;color:#173F63;background:var(--bg) var(--grain);padding:10px 13px 9px;transform:rotate(var(--r));
  clip-path:polygon(0 8%,40% 0,100% 6%,97% 55%,100% 100%,45% 94%,0 100%,3% 45%);filter:drop-shadow(2px 3px 0 rgba(23,63,99,.3));touch-action:manipulation}
.fs-vc.on{background-color:#173F63;color:#FFFAEE;transform:rotate(var(--r)) scale(1.08)}
.fs-vc.on::after{content:" ♪"}
/* story menu: one loud CTA, quiet grouped settings */
.fs-cta{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;box-sizing:border-box;text-decoration:none;cursor:pointer;touch-action:manipulation;
  font:800 26px/1 Grandstander,system-ui;color:#FFFAEE;background:#C2463B var(--grain);padding:18px 16px;margin:2px 0 6px;transform:rotate(-1deg);
  clip-path:polygon(0 6%,30% 0,70% 5%,100% 0,99% 50%,100% 96%,60% 100%,25% 95%,0 100%,1% 50%);filter:drop-shadow(4px 5px 0 #173F63)}
.fs-cta svg{width:30px;height:30px;flex:none;stroke:#FFFAEE;color:#FFFAEE}
.fs-cta svg *{stroke:#FFFAEE}
.fs-cta:active{transform:rotate(-1deg) translateY(3px);filter:drop-shadow(1px 2px 0 #173F63)}
.fs-grp{width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;padding:10px 12px 12px;border:2px dashed rgba(23,63,99,.22);border-radius:18px}
.fs-gl{margin:0 0 2px 4px;align-self:flex-start;font:800 14px/1 Grandstander,system-ui;letter-spacing:.06em;text-transform:uppercase;color:#8C7656}
.fs-grp .fs-sw{background:none;clip-path:none;filter:none;transform:none;padding:8px 2px 8px 4px;font-size:20px}
.fs-grp .fs-sw+.fs-sw{border-top:2px dotted rgba(23,63,99,.15)}
.fs-sel.fs-grp{align-items:stretch;gap:6px}
.fs-sel.fs-grp select{font-size:19px;padding:11px 44px 11px 14px}
.fs-sel.fs-grp .fs-voices{gap:12px;padding:4px 0 2px}
.fs-sel.fs-grp .fs-vc{flex:1 1 0;min-width:0;font-size:21px;padding:12px 10px 11px}
.fs-ai{display:block;margin:4px 0 0 4px;font:700 13px/1.25 "Playpen Sans",system-ui;color:#8C7656}
.fs-done{border:0;background:none;cursor:pointer;font:800 21px/1 Grandstander,system-ui;color:#07556A;text-decoration:underline;text-decoration-skip-ink:auto;text-underline-offset:7px;text-decoration-thickness:2px;padding:8px}
@media (min-aspect-ratio:11/16){.fs-ui{width:min(100%,calc((100dvh - 24px)*9/16))}}
.fs-x{pointer-events:auto;width:42px;height:42px;border-radius:50%;border:0;padding:0;background:rgba(255,250,238,.94);color:#173F63;display:grid;place-items:center;
  box-shadow:2px 3px 0 rgba(23,63,99,.45);clip-path:circle(50%);flex:none;cursor:pointer;touch-action:manipulation}
.fs-x svg{width:22px;height:22px}
.fs-x.off{background:rgba(255,250,238,.7);color:#C2463B}
.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}
/* edge buttons are for keyboard / screen readers; pointer taps on the 22% edges are handled by the pager */
.fs-tap{position:absolute;top:15%;bottom:15%;width:22%;z-index:10;background:none;border:0;padding:0;pointer-events:none;opacity:0}
.fs-tap:focus-visible{opacity:1;outline:3px solid #F3C64B;outline-offset:-6px;border-radius:14px}
.fs-tap.l{left:0}.fs-tap.r{right:0}

/* perfect score: pop-up trophy */
.fs-cele{position:absolute;inset:0;z-index:45;display:grid;place-items:center;background:rgba(10,25,45,0);transition:background .35s;padding:12px}
.fs-cele[hidden]{display:none}
.fs-cele.go{background:rgba(10,25,45,.6)}
.cele-card{position:relative;height:min(92%,calc((100vw - 24px)*16/9));aspect-ratio:9/16;border-radius:14px;overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.5);transform:perspective(900px) rotateX(85deg) scale(.6);transform-origin:50% 100%;opacity:0;
  transition:transform .7s cubic-bezier(.2,1.5,.35,1),opacity .25s}
.fs-cele.go .cele-card{transform:none;opacity:1}
.cele-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fs-cele.go .cele-art{animation:celeArt 2.6s ease-in-out .7s infinite}
@keyframes celeArt{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.cele-top{position:absolute;left:6%;right:6%;top:19%;display:flex;justify-content:center;transform:scale(0);transition:transform .5s cubic-bezier(.2,1.8,.4,1) .55s}
.fs-cele.go .cele-top{transform:scale(1)}
.cele-top .ransom b{font-size:clamp(26px,8.4vw,44px)}
.cele-top .ransom{gap:4px}
.cele-bot{position:absolute;left:6%;right:6%;bottom:5%;display:flex;flex-direction:column;align-items:center;gap:12px;transform:translateY(140%);transition:transform .5s cubic-bezier(.2,1.4,.4,1) .8s}
.fs-cele.go .cele-bot{transform:none}
.cele-msg{margin:0;font:800 clamp(22px,6.2vw,27px)/1.15 Grandstander,system-ui;color:#173F63;background:#FFFAEE var(--grain);padding:12px 16px;transform:rotate(-1.5deg);
  clip-path:polygon(0 6%,30% 0,70% 5%,100% 0,99% 50%,100% 96%,60% 100%,25% 95%,0 100%,1% 50%);filter:drop-shadow(3px 5px 0 rgba(23,63,99,.35));text-align:center}
.cele-spark{position:absolute;width:26px;height:26px;background:#F3C64B;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);opacity:0}
.fs-cele.go .cele-spark{animation:spark 1.6s ease-in-out infinite}
.s1{left:14%;top:30%}.s2{right:12%;top:34%;animation-delay:.4s!important;background:#FFFAEE}.s3{left:20%;top:62%;animation-delay:.8s!important;background:#E9877A}.s4{right:18%;top:58%;animation-delay:1.2s!important}
@keyframes spark{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(45deg)}}
/* sticker page */
.fs-scene{position:absolute;inset:0;z-index:2}
.stk{width:clamp(66px,19vw,92px);height:auto;aspect-ratio:auto;object-fit:contain;touch-action:none;-webkit-user-drag:none;user-select:none;filter:drop-shadow(0 3px 3px rgba(10,25,45,.35))}
.stk.on{position:absolute;transform:translate(-50%,-50%) rotate(var(--r));cursor:grab}
.stk.on.lift{transform:translate(-50%,-56%) rotate(var(--r)) scale(1.18);filter:drop-shadow(0 12px 10px rgba(10,25,45,.35));z-index:5;cursor:grabbing}
.stk.on.pop{animation:stkPop .3s cubic-bezier(.2,1.8,.4,1)}
@keyframes stkPop{0%{transform:translate(-50%,-50%) rotate(var(--r)) scale(1.2)}100%{transform:translate(-50%,-50%) rotate(var(--r)) scale(1)}}
.stk.src{transform:rotate(var(--r));cursor:grab}
.stk.src:active{transform:rotate(var(--r)) scale(1.1)}
.stk-top{gap:8px;pointer-events:none}
.fs-tray{position:absolute;left:3%;right:3%;bottom:calc(var(--sab) + 80px);z-index:4;padding:12px 8px 10px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.35))}
.fs-tray::before{content:"";position:absolute;inset:0;z-index:-1;background:#FFFAEE var(--grain);clip-path:var(--torn)}
.fs-tray::after{content:"";position:absolute;inset:0;z-index:-2;background:#CFBEDA;clip-path:var(--torn2);transform:translate(5px,6px) rotate(-1.2deg)}
.fs-tray-in{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 6px;align-items:center}
.fs-tray .stk{width:clamp(46px,14vw,66px)}
.tray-row{margin-top:4px;flex-wrap:nowrap;gap:6px}
.tray-row .btn{white-space:nowrap}
.fsbook .btn.sm{font-size:clamp(15px,4.4vw,18px);padding:.5em .75em}
/* end pages: content starts under the top bar */
.fs-page.talk .fs-block.at-center,.fs-page.pray .fs-block.at-center,.fs-page.quiz .fs-block.at-center,.fs-page.done .fs-block.at-center{top:calc(62px + var(--sat));transform:none}
.fs-page.done .fs-block.at-top{top:calc(14px + var(--sat));right:64px;left:64px}
@media (prefers-reduced-motion:reduce){.fs-start,.fs-hint span,.fs-cele.go .cele-art,.fs-cele.go .cele-spark{animation:none}}

/* generated books: the cover title is a ransom headline over the calm top of the art */
.cover-t .ransom b{font-size:clamp(22px,7.4vw,40px)}
.cover-t .ransom{gap:6px 12px}