@font-face{font-family:Patrick Hand;font-style:normal;font-display:swap;font-weight:400;src:url(./patrick-hand-latin-400-normal-B7HHA2Vw.woff2) format("woff2"),url(./patrick-hand-latin-400-normal-Df9_VoRQ.woff) format("woff")}@font-face{font-family:Fredoka;font-style:normal;font-weight:300 700;font-display:swap;src:url(./fredoka-latin-wght-normal-DM6njrJ3.woff2) format("woff2-variations")}:root{--bg: #fff6e8;--bg-2: #ffe4c2;--ink: #3a1f09;--muted: #7a5a42;--accent: #c8431f;--accent-dark: #9c2f12;--gold: #f2b84b;--leaf: #3f7a46;--card: #fffdf7;--ph: #f0dfc6;--line: #ecd9bd;--radius: 18px;--tap: 48px;--font-title: "Patrick Hand", "Comic Sans MS", cursive}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg) linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%) fixed;color:var(--ink);font-family:Fredoka,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:clamp(16px,2.2vw,22px);-webkit-tap-highlight-color:transparent;touch-action:manipulation}.app{min-height:100%;display:flex;flex-direction:column}main{flex:1;display:flex;justify-content:center;padding:16px;padding-top:max(16px,env(safe-area-inset-top))}.screen{width:100%;max-width:760px;display:flex;flex-direction:column;gap:14px;align-items:stretch}.cover{align-items:center;text-align:center}.cover .placeholder{width:min(70vw,360px)}h1{font-size:clamp(2rem,7vw,3.4rem);margin:0;letter-spacing:.08em}h2{margin:0}.subtitle{margin:0;opacity:.7}.placeholder,.media{width:100%;border-radius:var(--radius);background:var(--ph);display:grid;place-items:center;color:var(--muted);text-align:center;padding:8px;border:2px dashed #d9b98f}.media{border:0;padding:0;height:auto;display:block}.btn{min-height:var(--tap);padding:0 20px;border-radius:999px;border:2px solid var(--accent);background:transparent;color:var(--accent);font:inherit;font-weight:600;cursor:pointer}.btn.primary{background:var(--accent);color:#fff}.btn:disabled{opacity:.35;cursor:default}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}.card{background:var(--card);border:0;border-radius:var(--radius);padding:12px;display:flex;flex-direction:column;gap:8px;align-items:center;font:inherit;color:inherit;box-shadow:0 2px 6px #00000014}button.card{cursor:pointer}.tabbar{position:sticky;bottom:0;display:flex;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}.tabbar button{flex:1;min-height:72px;border:0;background:none;font:inherit;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:color .2s,background .2s}.tab-ico{font-size:2rem;line-height:1;display:grid;transition:transform .2s}.tab-label{font-size:.8rem}.tabbar button.active{color:var(--accent);font-weight:700;box-shadow:inset 0 4px 0 var(--accent);background:#c8431f17}.tabbar button.active .tab-ico{transform:scale(1.15)}.tabbar button:active{background:#c8431f29}@media (orientation: landscape) and (max-height: 500px){.cover .placeholder{width:min(30vw,200px)}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s,background .2s}.btn:active:not(:disabled){transform:scale(.95)}.btn.big{min-height:64px;min-width:64px;padding:0 28px;font-size:1.15rem}.btn-ico{font-size:1.6em;line-height:1;display:grid}.btn.narrate{align-self:center;background:var(--card)}.btn.narrate.playing{background:var(--accent);color:#fff}:focus-visible{outline:3px solid var(--gold);outline-offset:2px}main{padding-top:max(var(--pad-top),calc(env(safe-area-inset-top,0px) + 8px));padding-bottom:var(--pad-bottom)}.sound-toggle{position:fixed;top:max(8px,env(safe-area-inset-top));right:8px;z-index:5;width:56px;height:56px;border-radius:50%;border:2px solid var(--accent);background:var(--card);color:var(--accent);font-size:1.6rem;display:grid;place-items:center;cursor:pointer}.view{width:100%;overflow-x:clip;display:flex;justify-content:center;animation:view-in .3s ease-out both}@keyframes view-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes slide-next{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:none}}@keyframes slide-prev{0%{opacity:0;transform:translate(-40px)}to{opacity:1;transform:none}}.install{align-self:center}.install-tip{font-size:.85rem;opacity:.7;margin:0;max-width:28ch}.game-bar{display:flex;align-items:center;gap:12px}.game-hint{margin:0;text-align:center;opacity:.75}.card-stars{display:flex;gap:2px;color:#e6cfae;font-size:1.3rem}.card-stars .got{color:#f2b84b}.memory-grid{display:grid;grid-template-columns:repeat(var(--cols, 4),1fr);gap:10px}.mcard{aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer;perspective:600px;min-height:64px}.mcard-inner{position:relative;display:block;width:100%;height:100%;transition:transform .45s;transform-style:preserve-3d}.mcard.up .mcard-inner{transform:rotateY(180deg)}.mcard-back,.mcard-front{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius);backface-visibility:hidden;display:grid;place-items:center}.mcard-back{background:var(--accent);box-shadow:inset 0 0 0 6px #ffffff40}.mcard-front{background:var(--card);transform:rotateY(180deg);padding:10%;box-shadow:0 2px 6px #0000001f}.mcard-front svg,.mcard-front img{width:100%;height:100%;object-fit:contain}.mcard.ok .mcard-front{box-shadow:0 0 0 4px #6bbf8a;animation:pop .4s}@keyframes pop{50%{transform:rotateY(180deg) scale(1.1)}}.reward{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;background:#28282873;display:grid;place-items:center;padding:16px;animation:view-in .25s both}.reward-card{position:relative;background:var(--card);border-radius:28px;padding:28px 24px;width:min(100%,420px);text-align:center;display:flex;flex-direction:column;gap:14px;box-shadow:0 10px 30px #00000040}.stars{display:flex;justify-content:center;gap:6px;font-size:clamp(3rem,14vw,4.5rem)}.star{color:#e6cfae;display:grid;transform:scale(0);animation:star-in .5s cubic-bezier(.3,1.6,.5,1) forwards}.star.got{color:#f2b84b}@keyframes star-in{to{transform:scale(1)}}.record{margin:0;font-weight:700;color:#3f8f63}.reward-actions{display:flex;flex-direction:column;gap:10px}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.confetti span{position:absolute;top:-20px;width:12px;height:18px;border-radius:3px;animation:fall linear infinite}@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}@media (orientation: landscape) and (min-width: 600px){.app{flex-direction:row}.tabbar{order:-1;flex-direction:column;width:112px;height:100vh;position:sticky;top:0;border-top:0;border-right:1px solid var(--line);padding-bottom:0}.tabbar button{min-height:0}.tabbar button.active{box-shadow:inset 4px 0 0 var(--accent)}.app main{overflow-y:auto;height:100vh}}@media (min-width: 900px){.memory{max-width:520px;margin:0 auto;width:100%}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.confetti{display:none}}.welcome{position:relative;gap:12px;padding:8px 14px;justify-content:center;align-content:center}@media (min-width: 700px) and (orientation: portrait){.cover-art{width:min(46vw,400px)}.cover-art .media{max-height:56vh}.welcome{gap:18px}.welcome .subtitle{font-size:1.25rem}}.cover-art{width:min(62vw,300px);border-radius:28px;overflow:hidden;line-height:0;box-shadow:0 0 0 5px var(--card),0 0 0 7px var(--gold),0 18px 40px #9c2f1259;animation:float 6s ease-in-out infinite}.cover-art .media{border:0;border-radius:0;background:var(--ph);aspect-ratio:597 / 815;object-fit:cover;max-height:52vh}@keyframes float{50%{transform:translateY(-8px)}}.welcome h1.title{font-family:var(--font-title);font-weight:400;letter-spacing:.02em;margin-top:6px;font-size:clamp(3.4rem,16vw,6rem);line-height:1;color:var(--accent);text-shadow:0 2px 0 var(--card),0 4px 14px rgba(200,67,31,.25)}.welcome .subtitle{font-size:1.05rem;color:var(--muted);opacity:1;max-width:26ch}.demo-note{margin:4px 0 0;font-size:.8rem;color:var(--muted)}.petals{position:absolute;top:-16px;right:-16px;bottom:-16px;left:-16px;overflow:hidden;pointer-events:none;z-index:0}.petals span{position:absolute;top:-40px;border-radius:80% 0;opacity:.55;animation:petal-fall linear infinite}@keyframes petal-fall{0%{transform:translateY(0) rotate(0)}to{transform:translateY(105vh) rotate(380deg)}}.welcome>:not(.petals){position:relative;z-index:1}@media (orientation: landscape) and (max-height: 600px){.welcome{display:grid;grid-template-columns:auto 1fr;column-gap:28px;align-items:center;justify-items:start;max-width:900px;text-align:left}.welcome .cover-art{grid-row:1 / span 5;width:auto;height:62vh}.welcome .cover-art .media{height:100%;width:auto;max-height:none}.welcome .btn{justify-self:start}}:root{--pad-top: 72px;--pad-bottom: 16px;--tab-h: 74px;--controls-h: 64px;--strip-h: 48px;--gap: 10px}@media (max-height: 700px){:root{--pad-top: 14px;--pad-bottom: 8px;--tab-h: 58px;--controls-h: 56px;--strip-h: 42px;--gap: 8px}.tabbar button{min-height:56px}.tab-ico{font-size:1.6rem}.tab-label{font-size:.72rem}.sound-toggle{width:44px;height:44px;top:max(6px,env(safe-area-inset-top,0px));right:6px;font-size:1.3rem}}@media (orientation: landscape) and (min-width: 600px){:root{--tab-h: 0px}}@media (orientation: landscape) and (min-width: 600px) and (max-height: 700px){.sound-toggle{top:auto;right:auto;left:16px;bottom:8px}.tabbar{padding-bottom:58px;width:76px}.tab-label{font-size:.66rem}}.reader{height:calc(100vh - var(--pad-top) - var(--pad-bottom) - var(--tab-h));height:calc(100dvh - var(--pad-top) - var(--pad-bottom) - var(--tab-h) - env(safe-area-inset-bottom,0px));min-height:340px;max-width:760px;gap:var(--gap);touch-action:pan-y;user-select:none;-webkit-user-select:none}.stage{position:relative;flex:100 1 0;min-height:72px;max-height:300px;border-radius:22px;overflow:hidden;background:var(--ph);box-shadow:0 0 0 4px var(--card),0 0 0 6px var(--gold),0 10px 24px #9c2f1240}.stage .stage-img{display:block;width:100%;height:100%;object-fit:cover;border:0;border-radius:0;padding:0;transition:object-position 1s ease;animation:drift 24s ease-in-out infinite alternate}@keyframes drift{to{transform:scale(1.08)}}.sheet-wrap{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:6px}.sheet{flex:1 1 auto;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;background:var(--card);border-radius:var(--radius);padding:16px 18px;box-shadow:0 2px 8px #00000014;scrollbar-width:thin;scrollbar-color:var(--accent) #f4e6cf}.sheet::-webkit-scrollbar{width:10px}.sheet::-webkit-scrollbar-track{background:#f4e6cf;border-radius:6px;margin:10px 0}.sheet::-webkit-scrollbar-thumb{background:var(--accent);border-radius:6px;border:2px solid #f4e6cf}.sheet.has-more{box-shadow:inset 0 -18px 14px -16px #7a5a4273,0 2px 8px #00000014}.sheet.slide-next{animation:slide-next .35s ease-out both}.sheet.slide-prev{animation:slide-prev .35s ease-out both}.read-p{margin:0 0 .8em;padding:4px 6px;border-radius:12px;font-size:var(--read-size, 1.05em);line-height:1.6;transition:background .3s,box-shadow .3s}.read-p:last-of-type{margin-bottom:0}.read-p.reading{background:#f2b84b4d;box-shadow:0 0 0 4px #f2b84b4d}.size-btn{position:sticky;top:0;float:right;z-index:2;width:44px;height:44px;margin:-4px -4px 4px 8px;border-radius:50%;border:2px solid var(--accent);background:var(--card);color:var(--accent);font:inherit;font-weight:700;font-size:1.1rem;cursor:pointer}.size-btn small{font-size:.7em}.more-bar{flex:none;min-height:46px;padding:0 18px;border:0;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff;font:inherit;font-weight:600;cursor:pointer;box-shadow:0 3px 10px #9c2f1259}.more-bar[hidden]{display:inline-flex!important;visibility:hidden}.more-bar:active{transform:scale(.98)}.sheet-title{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}.kicker{margin:0;color:var(--accent);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.85rem}.chapter-title{margin:0;font-family:var(--font-title);font-weight:400;font-size:clamp(2rem,8vw,3rem);line-height:1.05;color:var(--accent)}.fragment-note{margin:0;color:var(--muted);font-size:.95rem}.end-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}.reader-controls{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px}.reader-controls .btn.big{min-height:var(--controls-h);min-width:var(--controls-h);padding:0 16px}.reader-controls .btn.narrate{white-space:nowrap}.narrate-wrap{position:relative;flex:1;min-width:0;max-width:240px;display:flex;justify-content:center}.narrate-wrap .btn.narrate{width:100%}.btn.narrate.unavailable{opacity:.55}.narration-msg{position:absolute;left:50%;bottom:calc(100% + 8px);z-index:6;width:max-content;max-width:min(88vw,340px);margin:0;padding:10px 14px;border-radius:14px;background:var(--ink);color:#fff;font-size:.9rem;line-height:1.35;text-align:center;transform:translate(-50%);box-shadow:0 6px 18px #0000004d}.flower-strip{flex:none;display:flex;justify-content:center;gap:6px;padding:2px 4px;height:calc(var(--strip-h) + 4px)}.flower-strip button{flex:1 1 0;max-width:var(--strip-h);min-width:0;aspect-ratio:1;padding:0;cursor:pointer;border-radius:50%;border:3px solid var(--card);background-color:var(--ph);background-repeat:no-repeat;opacity:.8;box-shadow:0 1px 4px #00000040;transition:transform .2s,box-shadow .2s,opacity .2s,border-color .2s}.flower-strip button.on{border-color:var(--accent);transform:scale(1.18);opacity:1;box-shadow:0 0 0 3px var(--gold)}.spark{position:absolute;width:0;height:0;pointer-events:none}.spark i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px 2px #ffd678e6;animation:spark-out .8s ease-out forwards}@keyframes spark-out{0%{transform:rotate(var(--a)) translate(0)}to{transform:rotate(var(--a)) translate(46px);opacity:0}}@media (min-width: 640px) and (min-aspect-ratio: 5/4){.reader{display:grid;max-width:1080px;grid-template-columns:minmax(180px,40%) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"stage sheet" "strip controls";column-gap:22px;row-gap:var(--gap)}.stage{grid-area:stage;flex:none;max-height:none;min-height:0;height:100%}.sheet-wrap{grid-area:sheet}.reader-controls{grid-area:controls}.flower-strip{grid-area:strip}}@media (min-width: 640px) and (max-width: 719px) and (min-aspect-ratio: 5/4){.reader{grid-template-columns:minmax(180px,44%) minmax(0,1fr)}.flower-strip{gap:3px;padding:2px 0}}@media (min-width: 1100px) and (min-height: 760px){.reader{max-width:1240px}.sheet{padding:22px 26px}.read-p{line-height:1.7}}@media (hover: hover){.btn:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}.btn.primary:hover:not(:disabled){background:var(--accent-dark)}.tabbar button:hover{background:#c8431f14}.flower-strip button:hover{opacity:1;transform:scale(1.1)}.more-bar:hover{background:var(--accent-dark)}}.diag{position:fixed;left:8px;bottom:8px;z-index:20;width:min(92vw,360px);max-height:70dvh;overflow:auto;padding:12px 14px;border-radius:14px;background:#1f1410;color:#fff;font-size:.8rem;line-height:1.35;box-shadow:0 8px 24px #0006}.diag-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.diag-head button{background:none;border:0;color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;min-width:36px;min-height:36px}.diag dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:2px 10px}.diag dt{color:#f2b84b}.diag dd{margin:0;overflow-wrap:anywhere}.diag .ua{font-size:.7rem;opacity:.8}.diag-run{margin-top:8px;min-height:40px;padding:0 14px;border-radius:999px;border:0;background:var(--gold);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}.diag p{margin:6px 0 0}.diag-tab{position:fixed;left:8px;bottom:8px;z-index:20;min-height:36px;padding:0 12px;border-radius:999px;border:0;background:#1f1410;color:#fff;font:inherit;font-size:.8rem;cursor:pointer}
