:root{--edge: #2a2f5c;--card: #f7efdd;--card-2: #ecdfc4;--ink: #2b2433;--dim: #6d6272;--accent: #d9503f;--gold: #f2b632;--shadow: 0 2px 0 rgba(0, 0, 0, .08), 0 6px 14px rgba(10, 6, 22, .35);--ui: 1;--read: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--edge);color:var(--ink);font-family:var(--read);overflow:hidden;transition:background-color 1s ease;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}#app{position:fixed;inset:0}[hidden]{display:none!important}button{font:inherit;color:inherit}svg{width:calc(24px * var(--ui));height:calc(24px * var(--ui));fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}svg .solid{fill:currentColor}.tag{background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.4),transparent 60%),linear-gradient(170deg,var(--card),var(--card-2));box-shadow:var(--shadow);clip-path:polygon(.6% 3%,20% .5%,48% 2%,76% 0%,99.4% 2.5%,100% 50%,99% 97%,70% 100%,41% 98%,14% 100%,0% 97%,1% 52%)}.shelf{position:absolute;inset:0;overflow-y:auto;padding:max(28px,env(safe-area-inset-top)) 16px 40px;background:radial-gradient(ellipse at 50% 0%,rgba(255,220,160,.18),transparent 60%),linear-gradient(180deg,#2a2f5c,#3d3570 70%,#4a3a6e);text-align:center}.shelf header h1{font-family:Caveat,cursive;font-weight:700;color:var(--card);font-size:clamp(48px,9vw,84px);line-height:.85;margin:0 0 12px;transform:rotate(-2deg);text-shadow:0 3px 0 rgba(0,0,0,.25)}.shelf header p{color:#d9cfe8;font-size:clamp(16px,2.2vw,20px);margin:0 auto 28px;max-width:34ch}.books{display:flex;flex-wrap:wrap;justify-content:center;gap:28px;max-width:1200px;margin:0 auto}.book{appearance:none;border:0;cursor:pointer;width:min(360px,100%);padding:12px 12px 14px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.45),transparent 55%),linear-gradient(165deg,var(--card),var(--card-2));box-shadow:0 4px #0000000f,0 18px 40px #06041480;clip-path:polygon(1% 1.5%,30% 0%,62% 1%,99% 0%,100% 40%,98.8% 99.5%,64% 100%,33% 99%,0% 100%,.8% 55%);transform:rotate(var(--tilt));transition:transform .25s ease}.book:hover,.book:focus-visible{transform:rotate(0) scale(1.03);outline:none}.book canvas{width:100%;aspect-ratio:16 / 9;display:block;margin-bottom:12px;background:#1c1f3f}.book-title{font-family:Caveat,cursive;font-weight:700;font-size:30px;line-height:1}.book-blurb{color:var(--dim);font-size:17px;margin:4px 0 6px}.book-meta{color:var(--accent);font-size:14px;font-weight:600}.made{display:inline-block;margin-top:36px;color:#f0c8a0;font-size:15px;text-decoration:none;border-bottom:1px dashed currentColor}.reader{position:absolute;inset:0;display:flex;flex-direction:column;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));gap:10px}.bar{display:flex;align-items:center;justify-content:space-between;gap:10px}.bar-right{display:flex;gap:8px}.btn{appearance:none;border:0;width:calc(48px * var(--ui));height:calc(44px * var(--ui));display:grid;place-items:center;cursor:pointer;padding:0;color:var(--ink)}.btn.on{color:var(--accent)}.dots{display:flex;gap:7px;padding:10px 14px;flex-wrap:wrap;justify-content:center}.dots i{width:11px;height:11px;border-radius:50%;background:#2b24332e}.dots i.game{border-radius:2px;transform:rotate(45deg) scale(.9)}.dots i.past{background:#d9503f73}.dots i.cur{background:var(--accent);transform:scale(1.35)}.dots i.cur.game{transform:rotate(45deg) scale(1.2)}.stage-wrap{flex:1;min-height:0;display:grid;place-items:center;position:relative}canvas.stage{display:block;touch-action:manipulation;cursor:pointer;box-shadow:0 10px 30px #06041473}.page{display:flex;align-items:center;gap:12px;width:100%;max-width:1400px;margin:0 auto}.turn{appearance:none;border:0;cursor:pointer;flex-shrink:0;width:calc(68px * var(--ui));height:calc(68px * var(--ui));border-radius:50%;display:grid;place-items:center;background:var(--card);color:var(--ink);box-shadow:var(--shadow),inset 0 -4px #00000014}.turn svg{width:calc(34px * var(--ui));height:calc(34px * var(--ui));stroke-width:3}.turn:disabled{opacity:.35;cursor:default}.turn.next.ready{background:var(--gold);animation:nudge 1.4s ease-in-out infinite}@keyframes nudge{0%,to{transform:translate(0) scale(1)}50%{transform:translate(5px) scale(1.07)}}.words-card{flex:1;min-width:0;position:relative;padding:calc(14px * var(--ui)) calc(62px * var(--ui)) calc(14px * var(--ui)) calc(24px * var(--ui));min-height:calc(84px * var(--ui));display:flex;align-items:center}.words{margin:0;font-weight:500;font-size:calc(clamp(20px,2.5vw,34px) * var(--ui));line-height:1.3}.words span{border-radius:6px;padding:0 2px;margin:0 -2px;transition:background-color .12s ease,color .12s ease}.words span.on{background:var(--gold);color:#2a1a10}.cover .words{width:100%;text-align:center;font-family:Caveat,cursive;font-weight:700;font-size:calc(clamp(30px,4vw,52px) * var(--ui));line-height:1}.speak{appearance:none;border:0;background:transparent;cursor:pointer;position:absolute;right:calc(10px * var(--ui));top:50%;transform:translateY(-50%);width:calc(46px * var(--ui));height:calc(46px * var(--ui));display:grid;place-items:center;color:var(--accent);border-radius:50%}.game-tag{display:none;position:absolute;top:calc(6px * var(--ui));left:calc(22px * var(--ui));font-size:calc(13px * var(--ui));font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--accent);align-items:center;gap:4px}.game-tag svg{width:calc(14px * var(--ui));height:calc(14px * var(--ui))}.words-card.game{padding-top:calc(26px * var(--ui))}.words-card.game .game-tag{display:flex}.words-card.solved .game-tag{color:#2f9e5b}.the-end{position:absolute;inset:0;display:grid;place-items:center;background:#0a081a80;padding:16px;animation:fade .5s ease}@keyframes fade{0%{opacity:0}}.the-end .card{background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.45),transparent 55%),linear-gradient(165deg,var(--card),var(--card-2));box-shadow:0 22px 50px #0604148c;clip-path:polygon(1% 2%,30% 0%,62% 1.5%,99% 0%,100% 40%,98.5% 99%,64% 100%,33% 98.5%,0% 100%,1.2% 55%);padding:30px 40px 32px;text-align:center;transform:rotate(-1.5deg)}.the-end h2{font-family:Caveat,cursive;font-size:clamp(56px,9vw,88px);line-height:.9;margin:0;color:var(--accent)}.end-title{margin:6px 0 22px;color:var(--dim);font-size:20px}.end-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.pill{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-size:22px;font-weight:600;background:var(--accent);color:#fff7ea;padding:10px 22px 11px 16px;clip-path:polygon(2% 6%,50% 0%,98% 4%,100% 94%,50% 100%,0% 96%);box-shadow:inset 0 -3px #00000026}.pill.alt{background:#3f6fb0}@media(max-width:700px){.turn{width:54px;height:54px}.words-card{padding:12px 48px 12px 16px}.page{gap:8px}}@media(orientation:portrait)and (max-width:820px){.page{flex-wrap:wrap;justify-content:space-between}.words-card{order:-1;flex-basis:100%}.words{font-size:24px}.stage-wrap{flex:0 1 auto;aspect-ratio:16 / 9;margin-top:6vh}}body.still .reader{padding:0}body.still .bar,body.still .page{display:none}body.still .stage-wrap{position:fixed;inset:0;display:block}body.still canvas.stage{box-shadow:none}.words-card.turn-fwd{animation:leaf-fwd .7s cubic-bezier(.2,.7,.3,1) both;transform-origin:left center}.words-card.turn-back{animation:leaf-back .7s cubic-bezier(.2,.7,.3,1) both;transform-origin:left center}@keyframes leaf-fwd{0%{transform:perspective(900px) rotateY(-70deg);opacity:0}}@keyframes leaf-back{0%{transform:perspective(900px) rotateY(60deg);opacity:0}}@media(prefers-reduced-motion:reduce){.words-card.turn-fwd,.words-card.turn-back{animation:none}}