/* THE STORY CORNER — see stories.js */

/* the door, a fourth one in the small row; four across need a touch less width */
.door-small-row .door:not(.is-big){width:clamp(68px,20vw,90px)}
/* the same inner as every other door — its own class so Doors.paint() leaves it be */
.sy-door-inner{position:absolute;inset:6px 6px 0;overflow:hidden;display:block;
  border-radius:50% 50% 8px 8px / 38% 38% 8px 8px;background:#FFF4E0;
  box-shadow:inset 0 3px 9px rgba(90,60,30,.28)}
.sy-door-inner svg{width:100%;height:100%;display:block}
/* the mop swishes */
.sy-prop.act-swish .bt-art .bt-art{transform-origin:50% 8%;animation:stSwish 1.1s ease-in-out 3}
@keyframes stSwish{0%,100%{transform:rotate(0)}30%{transform:rotate(-16deg) translateX(-6px)}70%{transform:rotate(14deg) translateX(6px)}}

/* ------------------------------------------------------------ the shelf */
#scShelf{justify-content:flex-start;padding:0 0 24px;overflow:auto;-webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,#FFF3DA 0%,#F7E0BD 100%)}
.sh-title{margin:clamp(56px,9vh,76px) 0 0;font:800 clamp(22px,6vw,30px)/1.1 var(--font);color:var(--ink);text-align:center}
.sh-sub{margin:4px 0 0;font:600 clamp(13px,3.6vw,16px)/1.3 var(--font);color:var(--ink-soft);text-align:center}
.sh-books{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,3vw,18px) clamp(8px,2.6vw,14px);
  width:min(92vw,420px);margin:clamp(14px,3vh,22px) auto 0;padding:0 4px}
.sh-book{position:relative;border:0;padding:0;cursor:pointer;background:transparent;
  display:flex;flex-direction:column;align-items:center;gap:6px;font:inherit;
  -webkit-tap-highlight-color:transparent;transition:transform .18s var(--spring)}
.sh-book:active{transform:scale(.95)}
.sh-cover{position:relative;width:100%;aspect-ratio:.82;border-radius:6px 12px 12px 6px;
  background:linear-gradient(160deg,var(--c1,#FFE3A0),var(--c2,#D89B3C));
  box-shadow:inset 6px 0 0 rgba(255,255,255,.35),inset 9px 0 0 rgba(90,60,30,.18),
             0 6px 0 rgba(120,86,50,.3),0 12px 20px rgba(120,86,50,.22);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;overflow:hidden}
.sh-cover .bt-art{display:block;width:62%}
.sh-cover .prop-svg{width:100%;height:auto;display:block;overflow:visible;
  filter:drop-shadow(2px 4px 4px rgba(60,30,0,.25))}
.sh-cover b{font:800 clamp(12px,3.4vw,15px)/1.15 var(--font);color:#5A3E1C;text-align:center;
  padding:0 8px;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.sh-stars{position:absolute;right:6px;top:6px;display:flex;gap:2px}
.sh-stars i{width:12px;height:12px;background:#FFCE3D;
  clip-path:polygon(50% 0,63% 36%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,37% 36%);
  filter:drop-shadow(0 1px 1px rgba(90,60,30,.4))}
.sh-plank{width:min(96vw,440px);height:12px;margin:-6px auto 0;border-radius:4px;
  background:linear-gradient(180deg,#E7C79B,#C79E6E);box-shadow:0 8px 16px rgba(120,86,50,.24)}

/* ----------------------------------------------------------- the reader */
#scStory{justify-content:flex-start;padding:0;overflow:hidden;background:#FFF8EC}
.sy-top{position:absolute;left:0;right:0;top:0;height:clamp(52px,8vh,64px);display:flex;
  align-items:center;justify-content:center;z-index:5;pointer-events:none}
.sy-dots{display:flex;gap:7px}
.sy-dots i{width:10px;height:10px;border-radius:50%;background:rgba(59,42,30,.16);transition:background .3s,transform .3s var(--spring)}
.sy-dots i.on{background:var(--sun);transform:scale(1.3)}
.sy-dots i.done{background:var(--leaf)}
.sy-scene{position:absolute;left:0;right:0;top:clamp(52px,8vh,64px);height:39%;overflow:hidden;
  border-radius:0 0 26px 26px;box-shadow:0 10px 24px rgba(120,86,50,.18)}
.sy-bg{position:absolute;inset:0}
.sy-bg-room{background:linear-gradient(180deg,#DDF3EE 0%,#CDEDE6 58%,#E9CFA3 58.5%,#D9B888 100%)}
.sy-bg-room::before{content:'';position:absolute;left:8%;top:8%;width:24%;height:34%;border-radius:12px 12px 5px 5px;
  background:linear-gradient(160deg,#BFE6FA,#CFEFD6);box-shadow:inset 0 0 0 5px #FFF6E8}
.sy-bg-garden{background:linear-gradient(180deg,#BFE9FB 0%,#E4F5FF 55%,#8CC96A 55.5%,#6FB350 100%)}
.sy-bg-garden::before{content:'';position:absolute;right:10%;top:8%;width:18%;aspect-ratio:1;border-radius:50%;
  background:#FFCE3D;box-shadow:0 0 0 8px rgba(255,206,61,.3),0 0 28px rgba(255,206,61,.7)}
.sy-bg-garden::after{content:'';position:absolute;left:8%;top:14%;width:26%;height:12%;border-radius:999px;background:rgba(255,255,255,.9)}
.sy-bg-barn{background:linear-gradient(180deg,#8E5F3A 0%,#A8734A 60%,#C9A25C 60.5%,#B8903F 100%)}
.sy-bg-barn::before{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 14px,rgba(0,0,0,.07) 14px 16px)}
.sy-bg-night{background:linear-gradient(180deg,#1E1A3E 0%,#3A2F5C 58%,#5A4A3A 58.5%,#4A3A2C 100%)}
.sy-bg-night::before{content:'';position:absolute;right:12%;top:10%;width:14%;aspect-ratio:1;border-radius:50%;
  background:#FFF1B8;box-shadow:inset -8px -4px 0 #E8D48A,0 0 18px rgba(255,241,184,.6)}
.sy-props{position:absolute;inset:0}
.sy-prop{position:absolute;transform:translate(-50%,0)}
.sy-prop .bt-art{display:block;width:100%}
.sy-prop .prop-svg{width:100%;height:auto;display:block;overflow:visible;
  filter:drop-shadow(3px 5px 5px rgba(40,20,4,.3))}
.sy-chars{position:absolute;inset:0;pointer-events:none}
.sy-char{position:absolute;transform:translate(-50%,0);pointer-events:auto}
.sy-char .char-svg{width:100%;height:auto;display:block;overflow:visible}
/* the mat, the cot, the mop */
.sy-flat{z-index:0}

/* the scene is shorter and the words smaller than they were: a sentence of
   seven or eight words wrapped to a third line that sat behind the arrow and
   the speaker. Two lines of this fit above the buttons on a phone. */
.sy-text{position:absolute;left:4%;right:4%;top:calc(clamp(52px,8vh,64px) + 39% + 10px);margin:0;
  bottom:calc(var(--casy-h,26vh) + 10px + clamp(58px,16vw,74px) + 6px);overflow:hidden;
  display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:2px 8px;
  font:900 clamp(22px,6.6vw,34px)/1.18 var(--font);color:var(--ink);text-align:center}
.sy-w{display:inline-block;padding:2px 6px;border-radius:10px;cursor:pointer;
  transition:background .18s,transform .25s var(--spring),color .18s;-webkit-tap-highlight-color:transparent}
.sy-w.on{background:var(--sun);color:#4A3210;transform:scale(1.12)}
.sy-w.said{color:#8E5F2B}
.sy-w.tricky{text-decoration:underline dotted rgba(142,95,43,.5);text-underline-offset:5px}
.sy-w:active{transform:scale(1.15)}

.sy-nav{position:absolute;left:0;right:0;bottom:calc(var(--casy-h,26vh) + 10px);display:flex;
  justify-content:center;gap:clamp(18px,7vw,40px);z-index:6}
.sy-btn{border:0;cursor:pointer;width:clamp(58px,16vw,74px);aspect-ratio:1;border-radius:50%;
  background:#fff;box-shadow:var(--lift-2),var(--gloss);display:flex;align-items:center;justify-content:center;
  transition:transform .18s var(--spring),opacity .3s;-webkit-tap-highlight-color:transparent}
.sy-btn:active{transform:scale(.92)}
.sy-btn svg{width:58%;height:58%;display:block}
.sy-btn.hint{animation:stHint 1.2s ease-in-out infinite}
@keyframes stHint{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.sy-btn[disabled]{opacity:.35;pointer-events:none}

/* the end */
.sy-end{position:absolute;left:6%;right:6%;top:calc(clamp(52px,8vh,64px) + 39% + 10px);
  display:none;flex-direction:column;align-items:center;gap:8px;text-align:center;z-index:7}
.sy-end.on{display:flex;animation:gcRise .5s var(--spring) both}
.sy-end .sy-star{order:1}
.sy-endtitle{order:2;margin:0 !important;position:static !important;font:900 clamp(28px,8.5vw,42px)/1.1 var(--font);color:var(--ink)}
.sy-end .sy-row{order:3}
.sy-end .sy-star{width:clamp(70px,20vw,96px);aspect-ratio:1;background:#FFCE3D;
  clip-path:polygon(50% 0,63% 36%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,37% 36%);
  filter:drop-shadow(0 6px 8px rgba(120,86,50,.35));animation:stSpin 1.2s var(--spring)}
@keyframes stSpin{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.2) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
.sy-end .sy-row{display:flex;gap:12px;margin-top:6px}
.sy-end .go{font-size:clamp(16px,4.6vw,20px);padding:12px 22px;margin:0;position:relative;font:inherit;font-weight:800;color:var(--ink);cursor:pointer}

@media (prefers-reduced-motion:reduce){
  .sy-btn.hint,.sy-end .sy-star{animation:none}
}

/* at the end the words and the arrows step aside for the star */
#scStory.ended .sy-text,#scStory.ended .sy-nav{display:none}
.sy-end{padding:14px 12px 18px;border-radius:22px;background:rgba(255,255,255,.82);
  box-shadow:0 8px 22px rgba(120,86,50,.18)}

/* "A story" on the prize screen, beside One more! and All done */
.sy-prizebook{font:inherit;font-size:16px;font-weight:800;padding:10px 18px;border:0;border-radius:22px;
  background:#fff;color:var(--ink);box-shadow:var(--lift-1);cursor:pointer;display:flex;align-items:center;gap:6px}
.sy-prizebook svg{width:22px;height:22px;display:block}
.sy-prizebook:active{transform:translateY(2px)}

/* Pip reads: her go is tinted, and while her mistake is on the table the
   words wobble a little so they read as things you can press */
.sy-text.sy-pip .sy-w.on{background:#FFE6EF;color:#8E3B5E}
.sy-text.sy-catch .sy-w{animation:syWobble 1.6s ease-in-out infinite;box-shadow:inset 0 0 0 2px rgba(255,143,166,.45)}
.sy-text.sy-catch .sy-w:nth-child(2n){animation-delay:.4s}
@keyframes syWobble{0%,100%{transform:rotate(0)}50%{transform:rotate(-2.5deg) translateY(-2px)}}
.sy-w.sy-nope{animation:syNope .45s ease-out !important}
@keyframes syNope{0%,100%{transform:translateX(0)}30%{transform:translateX(-5px)}70%{transform:translateX(4px)}}
.sy-w.sy-got{background:var(--leaf) !important;color:#fff !important;animation:syGot .6s var(--spring) !important}
@keyframes syGot{0%{transform:scale(1)}50%{transform:scale(1.3) rotate(-4deg)}100%{transform:scale(1.12)}}

/* read inside a session: Again / Another book step aside, the way back is one button */
#stEndBack{display:none}
#scStory.in-session #stEndBack{display:inline-block}
#scStory.in-session #stEndAgain,#scStory.in-session #stEndShelf{display:none}

/* in guided mode a book ends and goes back on its own — nothing to read */
body.no-asking #scStory.in-session .sy-row{display:none}