/* App adaptation: retain Tales' artwork and rendering; fit controls around iOS chrome. */
@font-face{font-family:Fredoka;src:url('./Fredoka.ttf') format('truetype');font-style:normal;font-weight:300 700;font-display:swap}
#tl-home,#tl-book-btn,#tl-chap-btn{top:calc(16px + env(safe-area-inset-top))}
#tl-jar{top:calc(14px + env(safe-area-inset-top))}
#tl-gear{bottom:calc(12px + env(safe-area-inset-bottom))}
#tl-chap-title{bottom:calc(16px + env(safe-area-inset-bottom))}
#tl-toast{top:calc(96px + env(safe-area-inset-top));right:calc(20px + env(safe-area-inset-right));max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 40px);visibility:hidden;pointer-events:none;transition:transform .45s cubic-bezier(.3,1.6,.5,1),visibility 0s linear .45s}
#tl-toast.on{visibility:visible;transition-delay:0s}
/* Keep captions inside asymmetric safe areas when a display folds or resizes. */
#tl-cap{left:calc(50% + (env(safe-area-inset-left) - env(safe-area-inset-right))/2);max-width:min(88vw,820px,calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 32px))}
#tl-book,#tl-gate,#tl-parent,#tl-chapters{padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.tl-sheet{max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)))}
#tl-policy{position:fixed;inset:0;z-index:30;background:#2b214077;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
#tl-policy[hidden],#tl-policy article[hidden]{display:none}
#tl-policy article{font-size:18px;line-height:1.5;overflow-wrap:anywhere}
#tl-policy h3{font-size:24px;margin:18px 0 12px}
#tl-policy h4{font-size:21px;margin:24px 0 8px}
.tl-parent-row{gap:16px;flex-wrap:wrap}
@media(max-width:600px) and (orientation:portrait){
 #tl-jar{top:calc(94px + env(safe-area-inset-top));gap:8px;padding:7px 12px}
 #tl-jar .slot{width:30px;height:30px}
 #tl-toast{top:calc(158px + env(safe-area-inset-top))}
 #tl-cap{width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 32px);max-width:none;padding:10px;gap:8px}
 #tl-cap-text{font-size:21px}
 .tl-sheet{padding:18px 14px;border-radius:24px}
 .tl-sheet h2{font-size:26px}
 .tl-sheet header{gap:8px}
 #tl-surprise{font-size:15px;padding:8px}
 #tl-book-count{font-size:16px;padding:2px 8px}
 .tl-x{width:44px;height:44px;flex-shrink:0}
 .tl-logo{font-size:clamp(44px,8.2vh,72px)}
 .tl-title{top:calc(16px + env(safe-area-inset-top))}
}
@media(max-height:520px){#tl-toast{top:calc(74px + env(safe-area-inset-top))}}

/* Narration and ending text take priority over the optional look-around hint. */
#tl-cap.on ~ #tl-look,#tl-end:not([hidden]) ~ #tl-look,#tl-night:not([hidden]) ~ #tl-look{display:none}

.experience-noscript{position:fixed;inset:20%;z-index:100;padding:24px;background:#fff7e8;border:3px solid #2b2140;border-radius:24px;color:#2b2140;text-align:center;font:600 24px Fredoka,sans-serif}
#pip-locked{position:fixed;inset:0;z-index:21;background:#2b214077;display:grid;place-items:center;padding:18px}
#pip-locked .tl-sheet{width:min(440px,100%);text-align:center}
.pip-joy{font-size:64px;line-height:1.2;margin:8px 0 18px;display:block}
.pip-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:20px}
.pip-actions button,.pip-buy,.pip-restore-button{font:600 19px Fredoka,sans-serif;padding:12px 20px;border:3px solid #2b2140;border-radius:22px;box-shadow:0 4px 0 #2b2140;background:#fff;color:#2b2140;cursor:pointer}
.pip-actions .pip-yellow,.pip-buy{background:#ffda55}
#pip-locked p{font-size:20px;line-height:1.45}
.pip-unlock{margin:12px 0 22px;padding:20px;border:3px solid #2b2140;border-radius:24px;background:linear-gradient(130deg,#f0e5ff,#fff0c0)}
.pip-unlock h3{font-size:26px;margin:0 0 8px}
.pip-unlock p{font-size:17px;line-height:1.4;margin:8px 0}
.pip-buy{margin:10px 0;width:100%;font-size:21px}
.pip-buy:disabled{cursor:default;background:#eee6de;box-shadow:none;color:#706579}
.pip-status{font-size:16px!important;min-height:24px}
.pip-restore{padding-top:8px;border-top:1px solid #2b214030;margin-top:12px}
.pip-restore summary{cursor:pointer;font-size:17px;font-weight:600;padding:8px 0}
.pip-restore label{display:block;font-size:16px;margin:8px 0}
.pip-restore input{box-sizing:border-box;display:block;width:100%;max-width:460px;padding:12px;border:2px solid #7b6b92;border-radius:12px;font:500 16px Fredoka,sans-serif;background:#fff;color:#2b2140;margin:8px 0}
.pip-restore-button{font-size:17px;padding:9px 16px;box-shadow:none}
.pip-code{display:block;overflow-wrap:anywhere;font:600 18px monospace;padding:12px;background:#fff;border-radius:12px;border:2px dashed #7b6b92;user-select:all;margin:10px 0}
.pip-links{font-size:14px!important;display:flex;gap:14px;flex-wrap:wrap}
.pip-links a{color:#594471}
.pip-free-note{position:fixed;z-index:5;left:50%;transform:translateX(-50%);bottom:calc(6vh + clamp(110px,18vh,160px) + 14px);font:600 16px Fredoka,sans-serif;background:#fff7e7dd;color:#2b2140;border-radius:18px;padding:7px 15px;pointer-events:none}
.tl-story .pip-free-note,.tl-picking .pip-free-note{display:none}
@media(max-width:600px){.pip-unlock{padding:14px}.pip-unlock h3{font-size:23px}.pip-actions button{font-size:16px;padding:10px 14px}}