:root{--bg: #fdf3ea;--card: #ffffff;--ink: #5b4a3f;--ink-soft: #7a6a5e;--accent: #ee8e6b;--accent-deep: #c9663f;--teal: #2e8f7c;--teal-soft: #e6f4f0;--line: #efd9c6;--soft: #fff4ea;--shadow: 0 2px 0 #efd9c6, 0 6px 16px rgba(91, 74, 63, .08);--font: "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;--radius: 18px;color-scheme:light}*,*:before,*:after{box-sizing:border-box}html{background:var(--bg)}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.7;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;word-break:keep-all;overflow-wrap:anywhere}button{font:inherit;color:inherit}button:focus-visible{outline:3px solid var(--teal);outline-offset:2px}img{max-width:100%}.page{max-width:680px;margin:0 auto;padding-inline:16px;padding-block:12px 40px;display:flex;flex-direction:column;gap:14px}.topbar{display:flex;align-items:center;gap:10px;min-height:52px}.back{min-height:48px;padding:0 16px;border:2px solid var(--line);border-radius:999px;background:var(--card);font-weight:700;cursor:pointer}.topbar-title{margin:0;font-size:20px}.lead{margin:0;font-size:17px}.brand-name{margin:0;font-size:15px;font-weight:700;color:var(--ink-soft);letter-spacing:.08em}.beta{display:inline-block;margin-left:4px;padding:0 8px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;letter-spacing:0}.hero{position:relative;margin:0;border-radius:24px;overflow:hidden;border:4px solid var(--card);box-shadow:var(--shadow);background:var(--card)}.hero-img{display:block;width:100%;aspect-ratio:1024 / 687;object-fit:cover}.hero-fallback,.scene-fallback{display:grid;place-items:center;font-size:64px;background:var(--soft)}.hero-title{position:absolute;left:50%;bottom:12px;transform:translate(-50%);margin:0;padding:4px 28px 6px;border-radius:999px;background:var(--card);border:3px solid var(--accent);font-size:clamp(24px,7vw,34px);letter-spacing:.12em;white-space:nowrap;box-shadow:0 3px 0 var(--accent-deep)}.menu{display:grid;gap:12px}.menu-btn{display:flex;align-items:center;gap:14px;min-height:76px;padding:12px 18px;border:3px solid var(--line);border-radius:22px;background:var(--card);text-align:left;cursor:pointer;box-shadow:var(--shadow);transition:transform .12s ease}.menu-btn:active{transform:translateY(2px)}.menu-btn.manabu{border-color:#bfe3da}.menu-btn.asobu{border-color:#f6c9b6}.menu-btn.boss{border-color:#e8d48f}.menu-icon{display:grid;place-items:center;width:60px;height:60px;flex:none;border-radius:16px;background:var(--soft);font-size:30px}.menu-icon-img{display:block;width:100%;height:100%;object-fit:contain}.menu-text{display:flex;flex-direction:column;min-width:0}.menu-label{font-size:22px;font-weight:700;line-height:1.3}.menu-sub{font-size:14px;color:var(--ink-soft)}.zukan-link{display:flex;align-items:center;gap:8px;min-height:56px;padding:0 18px;border:2px dashed var(--line);border-radius:18px;background:transparent;font-weight:700;cursor:pointer}.zukan-link-icon{display:grid;place-items:center;width:40px;height:40px;flex:none;font-size:22px}.zukan-count{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink-soft)}.scene{position:relative;border-radius:20px;overflow:hidden;border:4px solid var(--card);box-shadow:var(--shadow);background:var(--card)}.scene-img{display:block;width:100%;aspect-ratio:1024 / 687;-webkit-user-select:none;user-select:none}.spot{position:absolute;display:flex;justify-content:center;padding:4px;border:0;border-radius:12px;background:transparent;cursor:pointer}.spot.chip-top{align-items:flex-start}.spot.chip-bottom{align-items:flex-end}.spot:hover,.spot:focus-visible{outline:3px dashed rgba(255,255,255,.95);outline-offset:-3px;background:#ffffff24}.spot.is-active{outline:4px solid var(--accent);outline-offset:-4px;background:#ee8e6b24}.spot-chip{padding:2px 10px;border-radius:999px;background:var(--card);border:2px solid var(--accent);font-size:clamp(11px,2.9vw,15px);font-weight:700;line-height:1.5;white-space:nowrap;box-shadow:0 2px 0 var(--accent-deep);animation:glow 2.4s ease-in-out infinite}.spot.is-active .spot-chip{background:var(--accent);color:#fff;animation:none}@keyframes glow{0%,to{transform:scale(1);box-shadow:0 2px 0 var(--accent-deep),0 0 #ee8e6b8c}50%{transform:scale(1.06);box-shadow:0 2px 0 var(--accent-deep),0 0 0 8px #ee8e6b00}}.panel{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);scroll-margin-block:12px}.panel-head{display:flex;align-items:center;gap:10px}.panel-title{flex:1;min-width:0;margin:0;font-size:18px}.speak{display:grid;place-items:center;flex:none;width:52px;height:52px;border:2px solid var(--line);border-radius:50%;background:var(--soft);font-size:24px;cursor:pointer}.stage{padding:12px;border-radius:14px;background:var(--soft)}.panel-text{margin:0;font-size:20px;font-weight:700;line-height:1.75}.panel-hint{margin:0;font-size:15px;color:var(--teal);font-weight:700}.panel-empty{display:flex;align-items:center;gap:12px}.panel-empty-hand{font-size:40px}.panel-empty-img{display:block;width:64px;height:64px}.shelf-demo{display:flex;flex-direction:column;gap:8px}.shelf-row{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 10px;border:2px solid var(--line);border-radius:12px;background:var(--card)}.shelf-name{flex:none;width:5.5em;font-weight:700;font-size:15px}.shelf-books,.book-pile{display:flex;flex-wrap:wrap;gap:8px;min-width:0}.book-pile{justify-content:center;padding-top:4px}.book{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:6px 12px;border:2px solid var(--line);border-radius:12px;background:var(--card);font-size:14px;font-weight:700;cursor:pointer}button.book:hover{border-color:var(--accent)}.book.is-placed{min-height:0;padding:2px 10px;border-color:var(--teal);background:var(--teal-soft);cursor:default;animation:pop .35s ease}.book.big{font-size:16px}.book:disabled{opacity:.55;cursor:default}.book-emoji{font-size:22px}.book-icon{flex:none;width:40px;height:40px;object-fit:contain}.book.is-placed .book-icon{width:30px;height:30px}.book.big .book-icon{width:56px;height:56px}.lend-demo{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}.lend-steps{display:flex;flex-direction:column;gap:6px;flex:1;min-width:190px;margin:0;padding:0;list-style:none}.lend-step{display:flex;align-items:center;gap:8px;padding:6px 12px;border:2px solid var(--line);border-radius:12px;background:var(--card);font-weight:700;animation:pop .35s ease}.lend-emoji{font-size:22px}.lend-icon{flex:none;width:40px;height:40px;object-fit:contain}.tap-stage{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;min-height:120px;padding:0;border:0;background:transparent;cursor:pointer}.scene-pic{display:block;width:100%;border-radius:12px}.talk{align-self:stretch;padding:8px 14px;border:2px solid var(--line);border-radius:16px;background:var(--card);font-size:17px;font-weight:700;text-align:left;animation:pop .3s ease}.talk-librarian{border-color:#bfe3da}.talk-name{display:block;font-size:12px;color:var(--ink-soft)}.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;align-items:end}.duo-side{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}.duo-bubble{width:100%;padding:6px 10px;border:2px solid var(--line);border-radius:14px;background:var(--card);font-size:15px;font-weight:700;animation:pop .3s ease}.duo-bubble.is-off{visibility:hidden}.duo-face{font-size:52px;line-height:1.15}.duo-name{font-size:12px;color:var(--ink-soft)}.end-heart{font-size:64px;line-height:1.6;animation:pop .35s ease}.end-img{display:block;width:180px;height:180px}.quiet-demo{display:flex;flex-direction:column;align-items:center;gap:8px}.people{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.person{min-height:56px;padding:4px;border:2px solid var(--line);border-radius:14px;background:var(--card);font-size:30px;cursor:pointer}.listeners{font-size:30px}.person-img{display:block;width:66px;height:66px}.person-img.is-large{width:120px;height:120px}.listeners-img{display:block;width:120px;height:120px}.say{margin:0;font-size:20px;font-weight:700;animation:pop .3s ease}.cards{display:flex;flex-direction:column;gap:8px}.cards-title{margin:4px 2px 0;font-size:18px}.cards-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card-btn{display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 14px;border:2px solid var(--line);border-radius:16px;background:var(--card);font-size:16px;font-weight:700;text-align:left;cursor:pointer;box-shadow:var(--shadow)}.card-btn:hover{border-color:var(--accent)}.card-btn.is-active{border-color:var(--accent);background:var(--soft)}.card-emoji{font-size:28px;flex:none}.card-icon{width:46px;height:46px;flex:none;object-fit:contain}.btn-main{min-height:52px;padding:10px 28px;border:0;border-radius:999px;background:var(--teal);color:#fff;font-weight:700;font-size:16px;cursor:pointer}@keyframes pop{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@media(max-width:380px){.cards-grid{grid-template-columns:minmax(0,1fr)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}.gauge{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:var(--card);box-shadow:var(--shadow)}.gauge-label{font-size:13px;font-weight:700;color:var(--ink-soft);white-space:nowrap}.gauge-slots{display:flex;gap:4px;margin-left:auto}.gauge-slot{font-size:24px;line-height:1.2;opacity:.22;filter:grayscale(1)}.gauge-slot.is-on{opacity:1;filter:none;animation:pop .35s ease}.gauge-img{display:block;width:28px;height:28px}.q-card{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}.q-left{margin:0;font-size:13px;font-weight:700;color:var(--ink-soft)}.question{display:flex;flex-direction:column;gap:12px}.q-head{display:flex;align-items:flex-start;gap:10px}.q-head-text{flex:1;min-width:0}.q-scene{margin:0;font-size:13px;font-weight:700;color:var(--teal)}.q-prompt{margin:0;font-size:21px;font-weight:700;line-height:1.6}.choices{display:flex;flex-direction:column;gap:10px}.choice{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 16px;border:3px solid var(--line);border-radius:16px;background:var(--card);font-size:18px;font-weight:700;text-align:left;cursor:pointer;box-shadow:0 3px 0 var(--line);transition:transform .1s ease}.choice:not(:disabled):hover{border-color:var(--accent)}.choice:not(:disabled):active{transform:translateY(2px)}.choice:disabled{cursor:default;color:var(--ink)}.choice.is-correct{border-color:var(--teal);background:var(--teal-soft)}.choice.is-wrong{border-color:#e0877a;background:#fdeeea}.choice-icon{width:76px;height:76px;flex:none;object-fit:contain}.choice-text{min-width:0}.order{display:flex;flex-direction:column;gap:12px}.order-done{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}.order-slot{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 12px;border:2px dashed var(--line);border-radius:12px;font-weight:700}.order-slot.is-filled{border-style:solid;border-color:var(--teal);background:var(--teal-soft);animation:pop .3s ease}.order-num{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;background:var(--soft);font-size:14px;font-variant-numeric:tabular-nums}.hint-box{border-top:2px dashed var(--line);padding-top:12px}.hint-btn{min-height:48px;padding:0 18px;border:2px solid #f1d58a;border-radius:999px;background:#fff8df;font-weight:700;cursor:pointer}.hint-text{margin:0;padding:10px 14px;border-radius:14px;background:#fff8df;font-size:16px;font-weight:700}.hint-label{display:block;font-size:13px;color:var(--ink-soft)}.feedback{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:14px;animation:pop .3s ease}.feedback.is-good{background:var(--teal-soft)}.feedback.is-bad{background:var(--soft)}.feedback-main{margin:0;font-size:22px;font-weight:700}.feedback.is-good .feedback-main{color:var(--teal)}.feedback-sub{margin:0;font-size:16px;font-weight:700}.feedback .btn-main{align-self:flex-end;margin-top:8px}.btn-sub{min-height:52px;padding:10px 24px;border:2px solid var(--line);border-radius:999px;background:var(--card);font-weight:700;font-size:16px;cursor:pointer}.result-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 16px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);text-align:center}.result-emoji{font-size:56px}.result-img{display:block;width:140px;height:140px;margin:0 auto}.result-title{margin:0;font-size:24px}.result-text{margin:0;font-size:17px;font-weight:700}.result-btns{display:flex;flex-direction:column;gap:10px;width:100%;max-width:320px;margin-top:10px}.obake-img{display:block;object-fit:contain}.obake-fallback{position:relative;display:grid;place-items:center}.obake-ghost{font-size:1em;line-height:1}.obake-badge{position:absolute;right:4%;bottom:4%;font-size:.42em;line-height:1}.obake-fallback.is-dim{filter:grayscale(.85) brightness(.7)}.overlay{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:16px;background:#5b4a3f73;animation:fadein .2s ease}.encounter{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:360px;padding:24px 18px;border-radius:24px;background:var(--card);text-align:center;animation:pop .35s ease}.encounter-obake{width:160px;height:160px;font-size:120px}.encounter-title{margin:0;font-size:22px}.encounter-text{margin:0;font-size:17px;font-weight:700;color:var(--teal)}@keyframes fadein{0%{opacity:0}to{opacity:1}}.hud{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:10px}.hearts{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:16px;background:var(--card);box-shadow:var(--shadow)}.hearts-label{font-size:13px;font-weight:700;color:var(--ink-soft)}.hearts-row{display:flex;flex-wrap:nowrap;gap:2px}.heart{font-size:clamp(16px,4.6vw,20px);line-height:1.2;opacity:.2;filter:grayscale(1);transition:opacity .3s ease}.heart.is-on{opacity:1;filter:none}.boss-stage{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px;border-radius:var(--radius);background:linear-gradient(180deg,#efe4f3 0%,var(--card) 100%);box-shadow:var(--shadow)}.boss-stage.phase-win{background:linear-gradient(180deg,#fff1c9 0%,var(--card) 100%)}.boss-obake{width:150px;height:150px;font-size:110px}.phase-win .boss-obake{animation:bounce .6s ease}.boss-name{margin:0;font-size:14px;font-weight:700;color:var(--ink-soft)}.boss-bubble{margin:4px 0 0;padding:8px 16px;border:2px solid var(--line);border-radius:16px;background:var(--card);font-size:17px;font-weight:700;text-align:center;animation:pop .3s ease}.boss-panel{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}.boss-intro{flex:1;min-width:0;margin:0;font-size:19px;font-weight:700;line-height:1.7}.boss-rule{margin:0;padding:10px 14px;border-radius:12px;background:var(--soft);font-size:15px;font-weight:700}.boss-panel .btn-main{align-self:center;min-width:200px}@keyframes bounce{0%{transform:scale(.8)}60%{transform:scale(1.1)}to{transform:scale(1)}}.zukan-summary{margin:0;font-size:17px;font-weight:700}.zukan-summary strong{font-size:26px;color:var(--accent-deep);font-variant-numeric:tabular-nums}.zukan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}.zukan-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;border:2px dashed var(--line);border-radius:var(--radius);background:var(--soft);text-align:center}.zukan-card.is-met{border-style:solid;background:var(--card);box-shadow:var(--shadow)}.zukan-card.is-boss.is-met{border-color:#e8d48f}.zukan-pic{display:grid;place-items:center;width:96px;height:96px;font-size:72px}.zukan-pic .obake-img,.zukan-pic .obake-fallback{width:96px;height:96px}.is-silhouette{filter:brightness(0) opacity(.18)}.zukan-name{margin:0;font-size:17px;font-weight:700}.zukan-how{margin:0;font-size:13px;color:var(--ink-soft);font-weight:700}.zukan-empty{margin:0;padding:12px 14px;border-radius:14px;background:var(--card);font-weight:700}