:root{--paper: #fff8ec;--ink: #3a2e2a;--accent: #ff8a5b;--lit: #ffe27a;--button: #ffffff;font-family:Hiragino Maru Gothic ProN,Hiragino Sans,BIZ UDPGothic,Yu Gothic,sans-serif;-webkit-text-size-adjust:100%}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--paper);color:var(--ink);overflow:hidden}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.book{height:100dvh;display:grid;grid-template-rows:54fr 32fr 14fr;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.picture{position:relative;overflow:hidden;border-radius:0 0 28px 28px}.picture canvas{width:100%;height:100%;display:block}.label{position:absolute;left:50%;top:16px;transform:translate(-50%);background:#fff;border-radius:999px;padding:6px 26px;font-size:clamp(32px,5vw,56px);font-weight:700;box-shadow:0 4px #0000001f}.text{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:0 24px}.line{margin:0;font-size:clamp(28px,4vw,50px);font-weight:700;letter-spacing:.03em;line-height:1.35;text-align:center}.word{display:inline-block;white-space:nowrap;padding:0 .12em;margin:0 .12em;border-radius:14px;transition:background .15s,transform .15s}.word.lit{background:var(--lit);transform:scale(1.08)}.controls{display:flex;align-items:center;justify-content:center;gap:28px}.nav,.read{min-width:96px;height:80px;border:0;border-radius:40px;background:var(--button);font-size:36px;box-shadow:0 5px #00000024}.read{min-width:240px;display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--accent);color:#fff;font-weight:700;font-size:34px}.nav:disabled{opacity:.25}.nav:active,.read:active{transform:translateY(3px);box-shadow:0 2px #00000024}.dots{position:fixed;top:calc(12px + env(safe-area-inset-top));right:20px;display:flex;justify-content:center;gap:8px}.dots i{width:10px;height:10px;border-radius:50%;background:#e3d5c3}.dots i.on{background:var(--accent)}.cover{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;background:var(--paper)}.cover h1{font-size:clamp(44px,7vw,84px);margin:0}.cover[hidden]{display:none}.shelf{display:flex;flex-wrap:wrap;justify-content:center;gap:28px;padding:0 24px}.pick{border:0;border-radius:28px;padding:36px 44px;min-width:300px;font-size:clamp(30px,4vw,44px);font-weight:700;background:#fff;box-shadow:0 6px #00000026}.pick:nth-child(odd){background:var(--accent);color:#fff}.pick:active{transform:translateY(3px);box-shadow:0 3px #00000026}.shelf-btn{position:fixed;top:calc(10px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));border:0;border-radius:999px;padding:10px 22px;font-size:24px;font-weight:700;background:#ffffffd9;box-shadow:0 3px #0000001f}.read svg{width:40px;height:40px}.practice{width:80px;height:80px;border:0;border-radius:50%;display:inline-grid;place-items:center;background:#fff;color:#e6d6c2;box-shadow:0 5px #00000024}.practice[hidden]{display:none}.practice svg{width:48px;height:48px}.practice.got{color:#ffbf3c}.dots i.star{border-radius:0;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);width:16px;height:16px}.dots i.got{background:#ffbf3c}.dots i.on{outline:3px solid var(--accent);outline-offset:2px}.pick.got:after{content:"★";color:#ffbf3c;margin-left:.3em}.activity,.sticker{position:fixed;inset:0;background:#3a2e2a59;display:grid;place-items:center;padding:20px}.activity[hidden],.sticker[hidden]{display:none}.act-panel{position:relative;width:min(920px,100%);max-height:100%;overflow:auto;background:var(--paper);border-radius:32px;padding:36px 24px 32px;box-shadow:0 10px #0000001f}.act-close{position:absolute;top:12px;right:16px;width:64px;height:64px;border:0;border-radius:50%;background:#fff;font-size:40px;line-height:1;box-shadow:0 4px #0000001f}.act-body{display:flex;flex-direction:column;align-items:center;gap:22px}.act-ask{margin:0;font-size:clamp(24px,3.4vw,36px);font-weight:700;color:#8a6a4f;text-align:center}.act-big{margin:0;font-size:clamp(64px,11vw,120px);font-weight:800;letter-spacing:.06em;line-height:1.15;text-align:center}.act-big.line{font-size:clamp(40px,5.4vw,64px);word-break:keep-all}.act-pics,.act-cards,.act-tiles,.act-slots,.act-kana,.act-row{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}.act-pic{width:clamp(150px,22vw,220px);aspect-ratio:1;border:4px solid #e8d6c2;border-radius:28px;background:#fff;display:grid;place-items:center;padding:8px;box-shadow:0 5px #e8d6c2}.act-pic img{width:100%;height:100%;object-fit:contain}.act-card{border:4px solid #e8d6c2;border-radius:26px;background:#fff;padding:14px 34px;font-size:clamp(44px,7vw,72px);font-weight:800;box-shadow:0 5px #e8d6c2}.act-slot,.act-tile{width:clamp(80px,11vw,110px);aspect-ratio:1;border-radius:20px;display:grid;place-items:center;font-size:clamp(48px,7vw,72px);font-weight:800}.act-slot{border:4px dashed #d8bfa5;background:#fffdf8}.act-slot.filled{border-style:solid;border-color:#e8d6c2;background:#fff}.act-tile{border:4px solid #e8d6c2;background:#fff;box-shadow:0 5px #e8d6c2}.act-tile.small{font-size:clamp(32px,4.6vw,48px)}.act-tile:disabled{opacity:.25}.act-flip{width:clamp(110px,15vw,150px);aspect-ratio:1;border-radius:26px;border:4px solid #b9d3ef;background:#eef6ff;color:#2f5d8a;font-size:clamp(64px,9vw,96px);font-weight:800;box-shadow:0 5px #b9d3ef;transition:transform .25s}.act-flip.hira{background:#fff;border-color:#e8d6c2;color:var(--ink);box-shadow:0 5px #e8d6c2}.act-flip.turn{transform:rotateY(90deg)}.act-right{border-color:#5cc98b!important;box-shadow:0 5px #5cc98b!important}.act-wrong{animation:shake .4s}@keyframes shake{25%{transform:translate(-10px)}75%{transform:translate(10px)}}.act-hop{animation:hop .6s}@keyframes hop{40%{transform:translateY(-22px) rotate(-4deg)}}.act-done{margin:0;font-size:40px;font-weight:800;color:#e0782f}.act-btn{border:0;border-radius:999px;padding:18px 40px;font-size:32px;font-weight:700;background:var(--accent);color:#fff;box-shadow:0 5px #00000024}.act-btn.ghost{background:#fff;color:var(--ink)}.act-steps{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;font-size:22px;font-weight:700;color:#a58a72}.act-steps span{padding:6px 16px;border-radius:999px;background:#f3e6d6}.act-steps span.now{background:var(--accent);color:#fff}.act-mic{width:150px;height:150px;border:0;border-radius:50%;background:#e2574c;color:#fff;font-size:30px;font-weight:800;box-shadow:0 6px #b8443a}.act-mic.on{animation:ring 1s infinite}@keyframes ring{50%{box-shadow:0 0 0 22px #e2574c40}}.sticker-card{background:#fff;border-radius:36px;padding:40px 60px;text-align:center;box-shadow:0 10px #0000001f}.sticker-card svg{width:180px;height:180px;color:#ffbf3c;animation:hop 1s}.sticker-card p{margin:8px 0;font-size:48px;font-weight:800}.sticker-card .sub{font-size:28px;color:#8a6a4f}.sticker-card button{margin-top:12px;border:0;border-radius:999px;padding:16px 44px;font-size:32px;font-weight:700;background:var(--accent);color:#fff}@media (prefers-reduced-motion: reduce){.act-wrong,.act-hop,.act-mic.on,.sticker-card svg{animation:none}.act-flip{transition:none}}