:root{--ink:#1f3a4a;--ink-soft:#4a6676;--paper:#fff8ea;--paper-2:#f6ead0;--line:#e2cfa6;--teal:#1fa2b8;--teal-dark:#127f92;--leaf:#4fb43f;--leaf-dark:#2f8a2a;--coral:#ff6b4a;--sun:#ffd23f;--sun-dark:#e0a800;--pink:#ff5c8a;--ja:#7a6a9a;--shadow:0 6px 0 #1f3a4a2e, 0 10px 24px #1f3a4a38;--radius:18px;--font:"Hiragino Maru Gothic ProN", "M PLUS Rounded 1c", "Arial Rounded MT Bold", "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;font-family:var(--font);color:var(--ink);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:none;background:#7fd3f0;margin:0;overflow:hidden}[hidden]{display:none!important}button{color:inherit;cursor:pointer;background:0 0;border:none;font-family:inherit}kbd{min-width:1.6em;font:700 .72rem/1.4 var(--font);color:var(--ink-soft);text-align:center;background:#1f3a4a1f;border-bottom:2px solid #1f3a4a33;border-radius:6px;padding:1px 6px;display:inline-block}.ja{color:var(--ja);margin-top:1px;font-size:.78em;font-weight:600;line-height:1.3;display:block}.app{position:fixed;top:0;bottom:0;left:0;right:0}.scene{top:0;bottom:0;left:0;right:0;position:absolute!important}.fade{pointer-events:none;z-index:60;background:#0d2230;transition:opacity .4s;position:absolute;top:0;bottom:0;left:0;right:0}.icon{vertical-align:middle;flex:none;display:inline-block}.portrait{flex:none;display:block}.portrait.silhouette{opacity:.85}.panel{background:var(--paper);border:3px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.primary,.secondary{border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-height:52px;padding:10px 22px;font-size:1.15rem;font-weight:800;transition:transform 80ms;display:inline-flex}.primary{background:var(--sun);color:#4a3200;box-shadow:0 5px 0 var(--sun-dark), 0 8px 18px #0000002e}.primary .ja{color:#6a4a00}.secondary{border:3px solid var(--line);box-shadow:0 4px 0 var(--line);background:#fff}.secondary.danger{border-color:var(--coral);color:#b33a20}.primary:active,.secondary:active,.round:active,.choice:active{transform:translateY(3px)}.primary.big{flex-direction:row;gap:10px;min-height:62px;padding:12px 34px;font-size:1.45rem}.primary.big .ja{margin-left:6px;font-size:.7em;display:inline}.primary:disabled{opacity:.6;cursor:default}.round{background:var(--paper);border:3px solid var(--line);width:56px;height:56px;box-shadow:var(--shadow);color:var(--ink);border-radius:50%;place-items:center;display:grid;position:relative}.round kbd{background:var(--paper);position:absolute;bottom:-8px;right:-6px}.link{color:var(--ink-soft);align-items:center;gap:6px;margin-top:12px;font-weight:700;display:inline-flex}.hud-top{pointer-events:none;z-index:10;justify-content:space-between;align-items:flex-start;gap:12px;display:flex;position:absolute;top:12px;left:12px;right:12px}.hud-top>*{pointer-events:auto}.objective{align-items:center;gap:10px;max-width:min(420px,55vw);padding:10px 16px 10px 12px;font-size:1.15rem;font-weight:800;display:flex}.hud-right{align-items:flex-start;gap:10px;display:flex}.bag{gap:8px;padding:6px 10px;display:flex}.bag-item{align-items:center;gap:2px;font-size:1.1rem;font-weight:900;display:inline-flex}.top-buttons{gap:10px;display:flex}.journal-btn.pulse{border-color:var(--sun);animation:1.2s ease-in-out infinite pulse}@keyframes pulse{0%,to{box-shadow:var(--shadow), 0 0 0 0 #ffd23fb3;transform:scale(1)}50%{box-shadow:var(--shadow), 0 0 0 10px #ffd23f00;transform:scale(1.08)}}.team{z-index:9;align-items:flex-end;gap:8px;display:flex;position:absolute;bottom:12px;left:12px}.team-chip{background:var(--paper);border:3px solid var(--line);box-shadow:var(--shadow);opacity:.85;border-radius:16px;flex-direction:column;align-items:center;padding:4px 8px 6px;font-size:.85rem;font-weight:800;display:flex;position:relative}.team-chip.active{opacity:1;border-width:4px}.team-chip.active:after{content:"";background:var(--sun);border:3px solid #fff;border-radius:50%;width:14px;height:14px;margin-left:-7px;position:absolute;top:-8px;left:50%}.team-chip kbd{position:absolute;top:2px;right:2px}.toasts{pointer-events:none;z-index:30;flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;top:84px;left:50%;transform:translate(-50%)}.toast{border:3px solid var(--line);box-shadow:var(--shadow);background:#fff;border-radius:999px;align-items:center;gap:8px;padding:8px 18px;font-size:1.05rem;font-weight:800;animation:.25s ease-out toast-in;display:flex}.toast .ja{margin:0 0 0 4px;display:inline}.toast.good{border-color:var(--leaf)}.toast.warn{border-color:var(--coral)}@keyframes toast-in{0%{opacity:0;transform:translateY(-10px)}}.hint-bar{color:#fff;text-align:center;pointer-events:none;z-index:8;background:#1f3a4ac7;border-radius:14px;max-width:80vw;padding:8px 18px;font-weight:700;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.hint-bar .ja{color:#e2d8ff}.focus-label{border:3px solid var(--sun);box-shadow:var(--shadow);white-space:nowrap;z-index:7;background:#fff;border-radius:999px;align-items:center;gap:8px;padding:8px 14px;font-size:1rem;font-weight:800;display:inline-flex;position:fixed;top:0;left:0}.focus-label kbd{background:var(--sun);color:#4a3200}.bottom-panels{z-index:20;pointer-events:none;flex-direction:column;gap:10px;width:min(860px,100vw - 24px);display:flex;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.bottom-panels>*{pointer-events:auto}.prompt{padding:12px 16px 14px;animation:.2s ease-out rise;position:relative}@keyframes rise{0%{opacity:0;transform:translateY(14px)}}.prompt-question{border-bottom:2px dashed var(--line);align-items:center;gap:10px;margin-bottom:8px;padding-bottom:8px;display:flex}.q-text{flex-direction:column;display:flex}.who{color:var(--teal-dark);text-transform:uppercase;letter-spacing:.04em;font-size:.8rem;font-weight:800}.q-en{font-size:1.5rem;font-weight:900}.prompt-main{align-items:stretch;gap:12px;display:flex}.prompt-body{flex:1;min-width:0}.sentences{flex-wrap:wrap;gap:8px;margin:0 0 8px;padding:0;list-style:none;display:flex}.sentence{color:var(--ink);background:#e8f8fb;border:3px solid #a8e2ec;border-radius:14px;align-items:center;gap:8px;padding:6px 16px;font-size:1.9rem;font-weight:900;display:inline-flex}.sentence.reading{animation:.9s ease-in-out infinite reading}@keyframes reading{50%{border-color:var(--sun);background:#fff4c2}}.sentence.matched,.slot.matched,.choice.matched{border-color:var(--leaf)!important;background:#dff7d6!important}.frame{flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:8px;font-size:1.8rem;font-weight:900;display:flex}.slots{flex-wrap:wrap;gap:6px;display:inline-flex}.slot{background:#fff;border:3px dashed #a8e2ec;border-radius:12px;flex-direction:column;align-items:center;padding:4px 10px 2px;font-size:1.1rem;line-height:1.1;display:inline-flex;position:relative}.slot.crossed{opacity:.55}.slot .x,.choice .x{color:var(--coral);background:#fff;border-radius:50%;position:absolute;top:-6px;right:-6px}.choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:8px;display:grid}.choices.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.choice{text-align:left;background:#fff;border:3px solid #a8e2ec;border-radius:14px;align-items:center;gap:8px;min-height:58px;padding:8px 12px;font-size:1.3rem;font-weight:900;display:flex;position:relative;box-shadow:0 4px #a8e2ec}.choice:hover{border-color:var(--teal)}.choice.crossed{opacity:.6}.choice.wrong{border-color:var(--coral);box-shadow:0 4px 0 var(--coral);animation:.4s shake}@keyframes shake{25%{transform:translate(-8px)}75%{transform:translate(8px)}}.prompt-controls{align-items:center;gap:12px;display:flex}.mic{background:var(--coral);color:#fff;border-radius:50%;place-items:center;width:70px;height:70px;display:grid;position:relative;box-shadow:0 5px #c94a2e,0 8px 18px #0003}.mic kbd{background:#fff;position:absolute;bottom:-10px}.mic.on{background:#e8303a;animation:1s ease-in-out infinite listen}@keyframes listen{50%{box-shadow:0 5px #b02028,0 0 0 14px #ff6b4a40}}.speaker{width:50px;height:50px;color:var(--teal-dark);background:#e8f8fb;border:3px solid #a8e2ec;border-radius:50%;place-items:center;display:grid}.prompt-status{flex:1;min-width:0;font-size:1.1rem;font-weight:800}.prompt-status .good{color:var(--leaf-dark);align-items:center;gap:6px;font-size:1.4rem;display:inline-flex}.heard{color:var(--ink-soft);text-overflow:ellipsis;white-space:nowrap;font-size:.85rem;font-style:italic;display:block;overflow:hidden}.prompt.miss,.prompt.unclear{border-color:#ffb199}.prompt.correct{border-color:var(--leaf)}.close{width:40px;height:40px;color:var(--ink-soft);border-radius:50%;place-items:center;display:grid;position:absolute;top:8px;right:8px}.dialogue{cursor:pointer;align-items:center;gap:14px;padding:12px 14px 12px 12px;animation:.18s ease-out rise;display:flex}.dialogue.yes{border-color:var(--leaf)}.dialogue.no{border-color:#ffb199}.dialogue-body{flex:1;min-width:0}.line-en{align-items:center;gap:8px;margin:0;font-size:1.6rem;font-weight:900;line-height:1.25;display:flex}.face-game{background:var(--paper-2);border-radius:50%;place-items:center;display:grid}.next{background:var(--teal);color:#fff;box-shadow:0 4px 0 var(--teal-dark);border-radius:14px;flex:none;align-items:center;gap:6px;padding:12px 18px;font-size:1.05rem;font-weight:900;display:inline-flex}.next kbd{color:#fff;background:#ffffff40}.discover-card{z-index:15;transform-origin:0 0;pointer-events:none;animation:.35s cubic-bezier(.3,1.6,.6,1) pop-plain;position:absolute;top:14px;left:14px}.discover-card .ribbon{z-index:1;background:var(--coral);color:#fff;width:max-content;box-shadow:var(--shadow);border-radius:999px;margin:0 auto -10px;padding:6px 22px;font-size:1.2rem;font-weight:900;position:relative}.discover-card .page{background:var(--paper);border:3px solid var(--line);box-shadow:var(--shadow);background-image:repeating-linear-gradient(#0000 0 26px,#e2cfa680 26px 28px);border-radius:20px;align-items:center;gap:16px;padding:18px 26px 14px;display:flex}.discover-card.colored .portrait{animation:.5s cubic-bezier(.3,1.6,.6,1) pop}.page-text{flex-direction:column;gap:8px;min-width:140px;font-size:1.8rem;font-weight:900;display:flex}.color-chip{color:#fff;text-shadow:0 1px 2px #0000004d;border-radius:10px;width:max-content;padding:4px 12px;font-size:1.1rem}@keyframes pop{0%{opacity:0;transform:translate(-50%)scale(.6)}}.discover-card.colored .portrait,.friend-card .portrait{animation-name:pop-plain}@keyframes pop-plain{0%{opacity:0;transform:scale(.5)}}.friend-card{z-index:15;pointer-events:none;flex-direction:column;align-items:center;display:flex;position:absolute;top:46%;left:50%;transform:translate(-50%,-60%)}.friend-card .burst{background:radial-gradient(circle,#fff6b0f2 0 35%,#ffd23f66 55%,#0000 70%);border-radius:50%;animation:3s linear infinite spin-burst;position:absolute;top:-40px;bottom:-40px;left:-40px;right:-40px}@keyframes spin-burst{to{transform:rotate(360deg)}}.friend-card .portrait{animation:.5s cubic-bezier(.3,1.6,.6,1) pop-plain;position:relative}.friend-text{border:3px solid var(--pink);box-shadow:var(--shadow);background:#fff;border-radius:999px;align-items:center;gap:8px;padding:6px 22px;font-size:1.5rem;font-weight:900;display:flex;position:relative}.modal-back{z-index:40;background:#0d223073;place-items:center;padding:12px;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}.modal{max-height:calc(100vh - 24px);animation:.2s ease-out rise;overflow:auto}.modal header{align-items:center;gap:10px;margin-bottom:10px;display:flex}.modal h1{flex:1;margin:0;font-size:1.5rem}.close-btn{width:46px;height:46px;box-shadow:none}.journal{background:var(--paper);width:min(860px,100%);box-shadow:10px 10px 0 #8b4a2b, var(--shadow);background-image:repeating-linear-gradient(#0000 0 30px,#e2cfa673 30px 32px);border:4px solid #c0703a;border-radius:22px;padding:16px 20px 20px}.j-tabs{gap:8px;margin-bottom:12px;display:flex}.j-tab{background:var(--paper-2);border:3px solid var(--line);border-radius:14px;flex-direction:column;flex:1;align-items:center;padding:6px 4px;font-weight:800;display:flex;position:relative}.j-tab.on{border-color:var(--teal);background:#fff}.j-tab em{background:var(--sun);border-radius:8px;padding:1px 8px;font-size:.72rem;font-style:normal;position:absolute;top:-10px}.j-page{flex-direction:column;gap:10px;display:flex}.j-page.unknown{text-align:center;align-items:center;padding:20px}.j-page h2{align-items:center;gap:8px;margin:0 0 6px;font-size:2rem;display:flex}.j-head{align-items:center;gap:18px;display:flex}.j-head>div{flex-direction:column;gap:6px;display:flex}.j-habitat,.j-status{margin:0;font-weight:700}.j-status.friend{color:var(--pink);font-weight:900}.j-page h3{align-items:baseline;gap:8px;margin:4px 0 6px;font-size:1.15rem;display:flex}.j-page h3 .ja{display:inline}.j-foods{flex-wrap:wrap;gap:8px;display:flex}.j-food{border:3px solid var(--line);background:#fff;border-radius:12px;align-items:center;gap:6px;padding:4px 12px 4px 6px;font-weight:800;display:inline-flex}.j-food.yes{border-color:var(--pink);background:#fff0f5}.j-food.no{opacity:.6}.j-food.no .icon:last-child{color:var(--coral)}.j-food.unknown b{color:var(--ink-soft)}.j-line{background:#e8f8fb;border:2px solid #a8e2ec;border-radius:10px;align-items:center;gap:6px;width:max-content;margin-top:6px;padding:4px 12px;font-size:1.05rem;font-weight:800;display:inline-flex}.j-choose{align-self:flex-start;margin-top:6px}.j-hint{font-weight:700}.settings{flex-direction:column;gap:10px;width:min(520px,100%);padding:16px 20px 20px;display:flex}.setting{border-bottom:2px dashed var(--line);justify-content:space-between;align-items:center;gap:14px;padding:6px 0;font-weight:800;display:flex}.setting input[type=range]{width:46%;accent-color:var(--teal)}.switch{background:#d8cfbf;border-radius:999px;flex:none;width:62px;height:34px;transition:background .15s;position:relative}.switch i{background:#fff;border-radius:50%;width:26px;height:26px;transition:transform .15s;position:absolute;top:4px;left:4px;box-shadow:0 2px 4px #0003}.switch.on{background:var(--leaf)}.switch.on i{transform:translate(28px)}.note{color:#b33a20;margin:0;font-size:.9rem;font-weight:700}.title-screen,.results{z-index:50;background:linear-gradient(#7fd3f026,#0d223040);place-items:center;padding:16px;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}.title-card{border:4px solid var(--line);box-shadow:var(--shadow);text-align:center;background:#fff8eaf0;border-radius:28px;flex-direction:column;align-items:center;gap:12px;padding:24px 40px 20px;display:flex}.title-monsters{align-items:flex-end;gap:4px;margin-bottom:-10px;display:flex}.title-monsters .portrait:first-child{animation:2.2s ease-in-out infinite bob}.title-monsters .portrait:nth-child(2){animation:2.6s ease-in-out .4s infinite bob}@keyframes bob{50%{transform:translateY(-8px)}}.logo{letter-spacing:.02em;color:var(--leaf);text-shadow:0 4px 0 var(--leaf-dark), 0 8px 18px #0003;-webkit-text-stroke:2px #fff;margin:0;font-size:clamp(2.6rem,7vw,4.6rem);font-weight:900;line-height:.95}.logo span:last-child{color:var(--teal);text-shadow:0 4px 0 var(--teal-dark), 0 8px 18px #0003}.tagline{margin:0;font-size:1.2rem;font-weight:800}.mode-switch{background:var(--paper-2);border:3px solid var(--line);border-radius:16px;gap:6px;padding:5px;display:flex}.mode-switch button{border-radius:12px;align-items:center;gap:6px;padding:8px 16px;font-size:1rem;font-weight:800;display:flex}.mode-switch button .ja{margin:0;display:inline}.mode-switch button.on{box-shadow:0 3px 0 var(--line);color:var(--teal-dark);background:#fff}.title-buttons{flex-direction:column;align-items:center;gap:10px;display:flex}.results-card{text-align:center;width:min(720px,100%);max-height:calc(100vh - 32px);padding:18px 24px 20px;overflow:auto}.results-card h1{color:var(--leaf-dark);margin:0 0 8px;font-size:1.9rem}.results-card h2{margin:12px 0 6px;font-size:1.15rem}.results-friends{justify-content:center;gap:12px;display:flex}.r-friend{opacity:.6;flex-direction:column;align-items:center;font-weight:900;display:flex}.r-friend.on{opacity:1}.results-said{flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none;display:flex}.results-said li{background:#e8f8fb;border:2px solid #a8e2ec;border-radius:10px;padding:4px 12px;font-weight:800}.results-time{font-weight:800}.results-time .ja{display:inline}.results-buttons{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.joystick{z-index:12;touch-action:none;background:#ffffff4d;border:3px solid #ffffffb3;border-radius:50%;width:132px;height:132px;position:absolute;bottom:120px;left:28px}.joystick-knob{width:62px;height:62px;box-shadow:var(--shadow);background:#ffffffe6;border-radius:50%;margin:-31px 0 0 -31px;position:absolute;top:50%;left:50%}.touch-action{background:var(--sun);color:#4a3200;min-width:108px;box-shadow:0 5px 0 var(--sun-dark), var(--shadow);z-index:12;border-radius:24px;flex-direction:column;align-items:center;gap:2px;padding:14px 12px 10px;font-weight:900;display:flex;position:absolute;bottom:110px;right:22px}@media (max-height:560px){.q-en,.line-en{font-size:1.25rem}.sentence,.frame{font-size:1.4rem}.choice{min-height:48px;font-size:1.1rem}.mic{width:58px;height:58px}.discover-card{top:8px;left:8px}.discover-card .portrait{width:80px;height:80px}.joystick{width:116px;height:116px;bottom:24px}.touch-action{bottom:24px}.title-card{gap:8px;padding:14px 24px}.title-monsters .portrait{width:56px;height:56px}}.app.touch .team{flex-direction:column;align-items:flex-start;top:86px;bottom:auto}.app.touch .team-chip{flex-direction:row;gap:6px;padding:4px 10px 4px 4px}@media (max-height:560px){.app.touch .team{top:76px}.app.touch .team-chip .portrait{width:40px;height:40px}.objective{padding:6px 12px 6px 8px}.journal{padding:10px 14px 14px}.j-tab .portrait{width:36px;height:36px}.j-tab{flex-direction:row;justify-content:center;gap:6px;padding:4px}.j-head .portrait{width:96px;height:96px}.j-page h2{font-size:1.5rem}.modal h1{font-size:1.2rem}.results-card{padding:10px 16px 0}.results-card h1{font-size:1.35rem}.results-card h1 .ja{margin-left:8px;display:inline}.r-friend .portrait{width:54px;height:54px}.results-buttons{background:var(--paper);padding:8px 0 12px;position:sticky;bottom:0}.discover-card .page{padding:10px 16px 8px}.page-text{font-size:1.3rem}}@media (max-width:700px){.objective{font-size:.95rem}.choices.n3{grid-template-columns:1fr}.j-head{flex-direction:column}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}