*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} :root{--cream:#fff8ec;--brown:#7a5230;--peach:#ffdab3;--mint:#bfe8d2;--sky:#bee3f0;--lemon:#ffe9a8;--accent:#f5a05a;--ok:#5bb98c;--ng:#e07a7a} body{background:var(--cream);color:var(--brown);font-family:"Hiragino Maru Gothic ProN","BIZ UDGothic","Yu Gothic",sans-serif;min-height:100vh;overflow-x:hidden}.wrap{max-width:520px;margin:auto;padding:16px;width:100%}.screen{display:none}.screen.active{animation:pop .25s ease;display:block}@keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}header{text-align:center;padding:10px 0 4px}h1{font-size:1.5rem;letter-spacing:.05em}.sub{color:#a58a6b;font-size:.8rem;margin-top:4px}.owl{align-items:flex-start;display:flex;gap:12px;margin-top:14px}.face{flex:none;font-size:2.4rem}.say{background:#fff;border-radius:4px 18px 18px;padding:12px 14px;font-size:1.05rem;line-height:1.8;overflow-wrap:anywhere;box-shadow:0 3px 8px #7a523014}.speak,.rotate{border:0;border-radius:12px;background:var(--sky);color:var(--brown);cursor:pointer;font-family:inherit;margin-top:6px;padding:6px 10px}.mode-card{align-items:center;background:var(--lemon);border:0;border-radius:22px;box-shadow:0 4px 0 #7a52302e;color:var(--brown);cursor:pointer;display:flex;font-family:inherit;gap:14px;justify-content:center;margin-top:18px;padding:30px 18px;text-align:left;width:100%}.mode-card .icon{font-size:3rem}.mode-card .t{display:block;font-size:1.4rem;font-weight:bold}.mode-card .d{color:#8a6a48;display:block;font-size:.8rem;margin-top:3px}.parent-tip,.digest{background:#f4ebdd;border-radius:14px;color:#6b5236;font-size:.78rem;line-height:1.7;margin-top:16px;padding:12px}.back{background:none;border:0;color:#a58a6b;cursor:pointer;font-family:inherit;padding:8px 4px}.finder{background:#3b332a;border-radius:22px;margin-top:14px;padding:22px 16px 14px}.camera-preview{align-items:center;background:#fff;border:3px dashed var(--accent);border-radius:6px;display:flex;font-size:1rem;gap:18px;justify-content:center;line-height:1.8;min-height:230px;padding:18px;text-align:center}.camera-preview span{font-size:3rem}.camera-preview img{display:block;height:auto;max-height:280px;max-width:100%;object-fit:contain}.finder-note{color:#d8c7ab;font-size:.75rem;margin-top:10px;text-align:center}.bigbtn{background:var(--accent);border:0;border-radius:18px;box-shadow:0 4px 0 #d1854a;color:#fff;cursor:pointer;display:block;font-family:inherit;font-size:1.1rem;font-weight:bold;margin-top:16px;padding:16px;width:100%}.bigbtn:disabled{background:#e0cdb4;box-shadow:none}.stage{background:#fff;border-radius:22px;box-shadow:0 3px 10px #7a523014;margin-top:12px;padding:18px}.print-card{background:#fff;line-height:2}.print-card.small,.worked{background:var(--cream);border-radius:14px;line-height:2;padding:14px}.worked b{background:var(--lemon);border-radius:8px;padding:2px 6px}.rotate{display:block;font-size:.9rem;font-weight:bold;margin:12px auto 0}.exits{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:16px}.exit-hint,.exit-solve{border:0;border-radius:16px;color:var(--brown);cursor:pointer;font-family:inherit;font-size:.95rem;font-weight:bold;min-width:0;padding:14px 6px}.exit-hint{background:var(--sky);box-shadow:0 4px 0 #8fc3d6}.exit-solve{background:var(--accent);box-shadow:0 4px 0 #d1854a;color:#fff}.ladder{display:flex;gap:8px;justify-content:center;margin:14px 0 4px}.rung{background:#ead9be;border-radius:6px;height:10px;width:34px}.rung.on{background:var(--accent)}.choices{display:grid;gap:10px;margin-top:14px}.choice{background:var(--cream);border:3px solid transparent;border-radius:16px;color:var(--brown);cursor:pointer;font-family:inherit;font-size:1rem;line-height:1.6;padding:14px;text-align:left}.choice.good{background:var(--mint);border-color:var(--ok)}.choice.bad{border-color:var(--ng);opacity:.6}.celebrate{color:var(--ok);font-weight:bold;margin-top:10px;min-height:1.6em;text-align:center}.dan-chips,.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}.dan,.wchip{background:var(--sky);border:0;border-radius:14px;box-shadow:0 3px 0 #8fc3d6;color:var(--brown);cursor:pointer;font-family:inherit;font-size:1.05rem;font-weight:bold;padding:10px 12px}.dan.hit{background:var(--mint)}.dan.over{background:#f6d6d6}.dan-note,.status{color:#8a6a48;font-size:.9rem;margin-top:10px;min-height:1.6em;text-align:center}.problem-pill{background:var(--cream);border-radius:16px;font-size:1.4rem;font-weight:bold;margin-top:10px;padding:12px;text-align:center}.answer-row{align-items:center;display:flex;flex-wrap:wrap;font-size:1.3rem;font-weight:bold;gap:8px;justify-content:center;margin-top:14px}.slot{align-items:center;background:var(--cream);border:3px solid #e8d5b8;border-radius:14px;color:var(--brown);cursor:pointer;display:flex;font-size:1.5rem;height:56px;justify-content:center;min-width:56px}.slot.sel{border-color:var(--accent)}.slot.okay{background:var(--mint);border-color:var(--ok)}.pad{display:grid;gap:8px;grid-template-columns:repeat(5,1fr);margin-top:14px}.key{background:var(--cream);border:0;border-radius:12px;box-shadow:0 3px 0 #e2d0b4;color:var(--brown);cursor:pointer;font-family:inherit;font-size:1.3rem;font-weight:bold;height:52px;min-width:0}.wchip{background:var(--peach);box-shadow:0 3px 0 #e8b98a;font-size:.95rem;line-height:1.4}.wchip.used{opacity:.3;pointer-events:none}.built{display:flex;flex-direction:column;gap:8px;margin-top:14px;min-height:44px}.bline{background:var(--cream);border-radius:12px;padding:8px 12px}.reward-big{font-size:3rem;margin-top:8px;text-align:center}.reward-title{font-size:1.3rem}.reward-copy{text-align:center}.digest h2{font-size:.95rem}.digest .row{background:#fff;border-radius:10px;margin-top:6px;padding:8px 10px}footer{color:#c0a98c;font-size:.7rem;padding:18px 0 8px;text-align:center}.hidden{display:none!important}.visually-hidden{height:1px;overflow:hidden;position:absolute;width:1px;clip:rect(0 0 0 0)}code{overflow-wrap:anywhere}@media(max-width:375px){.wrap{padding:12px}.say{font-size:.98rem}.owl{gap:8px}.face{font-size:2rem}.solve-row{font-size:1rem}.slot{height:48px;min-width:44px}.camera-preview{min-height:200px}.exit-hint,.exit-solve{font-size:.85rem}.mode-card .t{font-size:1.2rem}}

/* --- delight layer (Fable 2026-07-19) --- */
.bigbtn,.mode-card,.exit-hint,.exit-solve,.dan,.wchip,.key,.choice,.speak,.rotate,.slot{transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
.bigbtn:active,.mode-card:active,.exit-hint:active,.exit-solve:active,.dan:active,.wchip:active,.key:active,.choice:active,.speak:active,.rotate:active,.slot:active{transform:scale(.94);transition:transform .08s ease-out}
.screen.active{animation:pop .34s cubic-bezier(.34,1.56,.64,1)}
.face{display:inline-block;animation:owlBob 2.8s ease-in-out infinite}
.face.talking{animation:owlTalk .5s ease-in-out infinite}
@keyframes owlBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes owlTalk{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) translateY(-3px)}}
#reading-wait .face{animation:owlTalk .6s ease-in-out infinite}
.boing{animation:boing .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes boing{0%{transform:scale(1)}35%{transform:scale(1.22)}70%{transform:scale(.96)}100%{transform:scale(1)}}
.pt{position:fixed;z-index:60;pointer-events:none;font-size:1.1rem;animation:ptFly .7s ease-out forwards}
@keyframes ptFly{from{transform:translate(0,0) rotate(0);opacity:1}to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}
.confetti{position:fixed;top:-14px;z-index:60;width:10px;height:14px;border-radius:3px;pointer-events:none;animation-name:confettiFall;animation-timing-function:linear;animation-fill-mode:forwards}
@keyframes confettiFall{from{transform:translate(0,-10px) rotate(0)}to{transform:translate(var(--drift),105vh) rotate(560deg)}}
.shutter-flash{position:fixed;inset:0;background:#fff;z-index:70;pointer-events:none;animation:flashFade .3s ease-out forwards}
@keyframes flashFade{from{opacity:.9}to{opacity:0}}
.reward-big{animation:rewardPop .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes rewardPop{0%{transform:scale(.3)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.bline{animation:blineIn .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes blineIn{from{transform:translateY(8px) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.rung{transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .3s}
.rung.on{transform:scaleY(1.3)}
@media(prefers-reduced-motion:reduce){.face,#reading-wait .face,.face.talking,.screen.active,.boing,.reward-big,.bline{animation:none}.bigbtn,.mode-card,.exit-hint,.exit-solve,.dan,.wchip,.key,.choice,.speak,.rotate,.slot,.rung{transition:none}}