:root{--ink:#26304a;--muted:#66708f;--bg:#e6f3ff;--bg2:#fdf6e3;--card:#fff;--line:#d4def0;--step:#b9c6dd;--blue:#3d8bf2;--blue-dark:#2a6cc7;--green:#22a865;--green-dark:#17834d;--green-soft:#dcf7e8;--red:#ef5350;--red-soft:#ffe4e3;--yellow:#ffcd2e;--yellow-dark:#e0a800;--purple:#8c5cf0;--display:"Fredoka", ui-rounded, system-ui, sans-serif;--body:"Nunito", ui-rounded, system-ui, sans-serif;--radius:20px;color:var(--ink);font-family:var(--body);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:linear-gradient(180deg, var(--bg) 0%, #f3f9ff 60%, var(--bg2) 100%) fixed;overscroll-behavior-y:none;-webkit-user-select:none;user-select:none}#root{max-width:520px;min-height:100dvh;margin:0 auto}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:0;padding:0}button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.1}p{margin:0}.center{text-align:center}.art{width:100%;height:auto;display:block}.art-wrap{position:relative}.art-img{aspect-ratio:5/4;object-fit:cover;background:#f3efe4;border-radius:16px}.art-wrap>svg.art{border-radius:16px}.art-overlay{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.wordy{object-fit:cover;box-shadow:0 3px 0 var(--step);background:#fff;border:3px solid #fff;border-radius:50%;flex:none}.big-btn{width:100%;min-height:58px;font-family:var(--display);color:#fff;background:var(--green);box-shadow:0 5px 0 var(--green-dark);border-radius:18px;font-size:21px;font-weight:600;transition:transform 80ms,box-shadow 80ms}.big-btn:active{box-shadow:0 1px 0 var(--green-dark);transform:translateY(4px)}.big-btn-soft{color:var(--ink);box-shadow:0 5px 0 var(--step);border:2px solid var(--line);background:#fff}.big-btn-warn{background:var(--red);box-shadow:0 5px #c03b39}.big-btn:disabled{opacity:.5}.splash{min-height:100dvh;padding:24px 20px calc(28px + env(safe-area-inset-bottom));text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex}.splash-pic{aspect-ratio:5/4;object-fit:cover;width:100%;box-shadow:0 6px 0 var(--step);border-radius:24px}.splash .wordy{margin-top:-62px}.splash h1{color:var(--blue-dark);font-size:36px}.splash p{color:var(--muted);margin-bottom:8px;font-size:17px;font-weight:700}.home{padding:14px 16px calc(32px + env(safe-area-inset-bottom))}.home-top{padding-top:env(safe-area-inset-top);align-items:center;gap:10px;display:flex}.home-hello{flex:1;min-width:0}.home-hello h1{font-size:26px}.home-hello p{color:var(--muted);font-size:14px;font-weight:700}.chips{flex-direction:column;align-items:flex-end;gap:6px;display:flex}.chip{font-family:var(--display);box-shadow:0 2px 0 var(--step);font-variant-numeric:tabular-nums;background:#fff;border-radius:999px;align-items:center;gap:4px;padding:3px 10px;font-size:16px;font-weight:600;display:inline-flex}.review-card{text-align:left;background:var(--yellow);border-radius:var(--radius);width:100%;box-shadow:0 5px 0 var(--yellow-dark);align-items:center;gap:12px;margin-top:14px;padding:10px 14px 10px 10px;animation:2s ease-in-out infinite pulse;display:flex}.review-card img{object-fit:cover;border-radius:14px;width:64px;height:64px}.review-card span{flex:1;display:grid}.review-card b{font-family:var(--display);font-size:19px}.review-card small{font-size:13.5px;font-weight:700}.go-arrow{font-size:34px;font-weight:800;flex:none!important}.path{gap:4px;margin:0;padding:18px 0 0;list-style:none;display:grid;position:relative}.path:before{content:"";border-left:6px dotted #b5cbe8;position:absolute;top:30px;bottom:30px;left:50%;transform:translate(-50%)}.path-stop{display:flex;position:relative}.path-stop.is-left{justify-content:flex-start}.path-stop.is-right{justify-content:flex-end}.room-card{text-align:center;border:3px solid color-mix(in srgb, var(--room) 45%, white);width:74%;box-shadow:0 6px 0 color-mix(in srgb, var(--room) 55%, #9aa7c0);background:#fff;border-radius:24px;gap:2px;padding:8px 8px 12px;transition:transform .1s;display:grid;position:relative}.room-card:active{box-shadow:0 2px 0 color-mix(in srgb, var(--room) 55%, #9aa7c0);transform:translateY(4px)}.room-card.is-next{border-color:var(--room);animation:2.4s ease-in-out infinite bob}.room-card.is-done{background:color-mix(in srgb, var(--room) 10%, white)}.room-pic .art-img,.room-pic svg{border-radius:16px}.room-num{z-index:2;background:var(--room);color:#fff;width:34px;height:34px;font-family:var(--display);border-radius:50%;place-items:center;font-size:18px;font-weight:700;display:grid;position:absolute;top:-10px;left:-10px;box-shadow:0 3px #0000002e}.room-name{font-family:var(--display);margin-top:4px;font-size:18px;font-weight:600}.room-tr{color:var(--muted);font-size:13px;font-weight:700}.room-stars{margin-top:2px}.room-badge{background:var(--yellow);color:var(--ink);font-family:var(--display);box-shadow:0 3px 0 var(--yellow-dark);border-radius:999px;padding:3px 10px;font-size:13px;font-weight:600;position:absolute;top:-12px;right:-6px}.home-foot{text-align:center;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:18px;font-size:12px;font-weight:700}.stars{vertical-align:middle;justify-content:center;gap:2px;display:inline-flex}.star-on{fill:var(--yellow);stroke:var(--yellow-dark);stroke-width:1.2px}.star-off{fill:#e3e8f2;stroke:#cbd3e3;stroke-width:1.2px}.room{padding:12px 16px calc(32px + env(safe-area-inset-bottom))}.room-head{padding:calc(4px + env(safe-area-inset-top)) 0 12px;align-items:center;gap:12px;display:flex}.room-head h1{color:color-mix(in srgb, var(--room) 70%, var(--ink));font-size:25px}.room-head p{color:var(--muted);font-weight:700}.back,.close{width:46px;height:46px;box-shadow:0 3px 0 var(--step);color:var(--muted);background:#fff;border-radius:14px;flex:none;font-size:30px;font-weight:800;line-height:1}.close{font-size:20px}.lessons{gap:12px;display:grid}.lesson{text-align:left;border-radius:var(--radius);box-shadow:0 5px 0 var(--step);border:2px solid var(--line);background:#fff;align-items:center;gap:12px;padding:12px;display:flex}.lesson.is-next{border-color:var(--room);box-shadow:0 5px 0 color-mix(in srgb, var(--room) 60%, #8090b0)}.lesson-num{background:var(--room);color:#fff;width:44px;height:44px;font-family:var(--display);border-radius:14px;flex:none;place-items:center;font-size:22px;font-weight:700;display:grid}.lesson-body{flex:1;min-width:0;display:grid}.lesson-body b{font-family:var(--display);font-size:18px}.lesson-body small{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:700;overflow:hidden}.play-pill{background:var(--green);color:#fff;font-family:var(--display);border-radius:999px;padding:6px 12px;font-weight:600}.cards-title{margin:24px 0 10px;font-size:20px}.cards-title small{font-family:var(--body);color:var(--muted);font-size:13px;font-weight:700}.word-cards{grid-template-columns:1fr 1fr;gap:10px;display:grid}.word-card{text-align:center;box-shadow:0 4px 0 var(--step);background:#fff;border-radius:18px;gap:2px;padding:6px 6px 10px;display:grid}.word-card b{font-family:var(--display);margin-top:4px;font-size:15.5px;font-weight:600}.word-card small{color:var(--muted);font-size:12px;font-weight:700}.word-card:active{box-shadow:0 1px 0 var(--step);transform:translateY(3px)}.player{flex-direction:column;min-height:100dvh;display:flex}.player-top{padding:calc(10px + env(safe-area-inset-top)) 16px 6px;z-index:5;background:color-mix(in srgb, var(--bg) 92%, transparent);align-items:center;gap:12px;display:flex;position:sticky;top:0}.bar{background:#d9e4f3;border-radius:999px;flex:1;height:18px;position:relative}.bar-fill{background:linear-gradient(90deg, var(--green), #5fd08d);border-radius:999px;height:100%;transition:width .35s}.bar-worm{transition:left .35s;position:absolute;top:50%;transform:translate(-50%,-50%)}.bar-worm .wordy{box-shadow:none;border-width:2px}.player-body{padding:6px 16px calc(150px + env(safe-area-inset-bottom));flex:1;animation:.25s slideIn}.game{flex-direction:column;gap:14px;display:flex}.game-hint{font-family:var(--display);text-align:center;color:var(--ink);font-size:20px;font-weight:600}.game-foot{margin-top:6px}.en-big{color:var(--blue-dark);text-align:center;overflow-wrap:anywhere;font-size:34px}.en-alt{text-align:center;color:var(--muted);font-weight:700}.tr{color:var(--muted);text-align:center;font-size:18px;font-weight:800}.meet-pic{box-shadow:0 5px 0 var(--step);background:#fff;border-radius:22px;padding:6px}.meet-words{gap:4px;display:grid}.speak-row{justify-content:center;align-items:center;gap:14px;display:flex}.speak{background:var(--blue);color:#fff;width:58px;height:58px;box-shadow:0 4px 0 var(--blue-dark);border-radius:50%;padding:13px}.speak-big{width:84px;height:84px;padding:19px}.speak-slow{width:52px;height:52px;color:var(--green);box-shadow:0 4px 0 var(--step);border:2px solid var(--line);background:#fff;padding:11px}.speak:active{box-shadow:0 1px 0 var(--blue-dark);transform:translateY(3px)}.speak.is-playing{animation:.9s ease-out infinite ring}.choice-pic{box-shadow:0 5px 0 var(--step);background:#fff;border-radius:22px;padding:6px}.choice-word{gap:10px;padding:10px 0;display:grid}.opts-pics{grid-template-columns:1fr 1fr;gap:12px;display:grid}.opts-text{gap:10px;display:grid}.opt{border:3px solid var(--line);box-shadow:0 4px 0 var(--step);font-family:var(--display);background:#fff;border-radius:18px;font-size:19px;font-weight:600;transition:transform 80ms}.opts-pics .opt{padding:5px}.opts-text .opt{min-height:58px;padding:10px 14px}.opt:active{box-shadow:0 1px 0 var(--step);transform:translateY(3px)}.opt.is-right{border-color:var(--green);background:var(--green-soft);box-shadow:0 4px 0 var(--green);animation:.3s pop}.opt.is-wrong{border-color:var(--red);background:var(--red-soft);box-shadow:0 4px 0 var(--red);animation:.4s shake}.opt.is-dim{opacity:.45}.opt:disabled{cursor:default}.dialog-ask{align-items:flex-end;gap:10px;display:flex}.dialog-teacher{object-fit:cover;object-position:15% 20%;width:84px;height:84px;box-shadow:0 3px 0 var(--step);border:3px solid #fff;border-radius:50%;flex:none}.bubble{text-align:left;font-family:var(--display);box-shadow:0 4px 0 var(--step);background:#fff;border-radius:20px 20px 20px 6px;flex:1;padding:14px 16px;font-size:22px;font-weight:600}.match-cols{grid-template-columns:1fr 1fr;gap:10px;display:grid}.match-col{align-content:start;gap:10px;display:grid}.tile{border:3px solid var(--line);min-height:60px;box-shadow:0 4px 0 var(--step);font-family:var(--display);overflow-wrap:anywhere;background:#fff;border-radius:16px;padding:8px;font-size:16px;font-weight:600;line-height:1.15}.match-col:last-child .tile{font-family:var(--body);color:#4b5574;font-size:15px;font-weight:800}.tile.is-sel{border-color:var(--blue);box-shadow:0 2px 0 var(--blue);background:#e5f0ff;transform:translateY(2px)}.tile.is-solved{background:var(--green-soft);box-shadow:none;opacity:.7;border-color:#0000;color:var(--green-dark)!important}.tile.is-wrong{border-color:var(--red);background:var(--red-soft)}.spell-top{align-items:center;gap:14px;display:flex}.spell-pic{box-shadow:0 4px 0 var(--step);background:#fff;border-radius:18px;flex:1;padding:5px}.spell-top .speak-row{flex-direction:column}.spell-slots{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.slot{width:34px;height:44px;font-family:var(--display);color:var(--blue-dark);border-bottom:4px solid #c3cee2;place-items:center;font-size:28px;font-weight:700;display:grid}.slot.is-next{border-color:var(--blue);animation:1s steps(2,end) infinite blink}.slot.is-filled{border-color:var(--green)}.spell-tiles{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.letter{background:var(--yellow);width:52px;height:56px;box-shadow:0 4px 0 var(--yellow-dark);font-family:var(--display);border-radius:14px;font-size:28px;font-weight:700}.letter:active{box-shadow:0 1px 0 var(--yellow-dark);transform:translateY(3px)}.letter.is-used{visibility:hidden}.letter.is-wrong{background:var(--red);color:#fff;box-shadow:0 4px #c03b39}.say-pic{width:70%;box-shadow:0 4px 0 var(--step);background:#fff;border-radius:20px;align-self:center;padding:5px}.mic{color:#fff;background:var(--red);border-radius:50%;align-self:center;place-items:center;width:96px;height:96px;display:grid;box-shadow:0 5px #c03b39}.mic.is-on{background:var(--green);box-shadow:0 5px 0 var(--green-dark);animation:1s ease-out infinite ring}.say-status{text-align:center;min-height:24px;font-size:17px;font-weight:800}.say-fallback{gap:10px;display:grid}.small-note{text-align:center;color:var(--muted);font-size:13.5px;font-weight:700}.sheet{z-index:20;max-width:520px;padding:16px 16px calc(18px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;gap:12px;margin:0 auto;animation:.22s sheetUp;display:grid;position:fixed;bottom:0;left:0;right:0}.sheet-good{background:var(--green-soft);border-top:4px solid var(--green)}.sheet-bad{background:var(--red-soft);border-top:4px solid var(--red)}.sheet-row{align-items:center;gap:12px;display:flex}.sheet-text{gap:4px;min-width:0;display:grid}.sheet-text strong{font-family:var(--display);font-size:24px}.sheet-good strong{color:var(--green-dark)}.sheet-bad strong{color:#c03b39}.sheet-answer{text-align:left;font-size:16px;font-weight:700}.sheet-text small{color:var(--muted);font-weight:700}.result{min-height:100dvh;padding:24px 20px calc(28px + env(safe-area-inset-bottom));text-align:center;flex-direction:column;align-items:center;gap:12px;display:flex;position:relative;overflow:hidden}.result-pic{aspect-ratio:5/4;object-fit:cover;width:78%;box-shadow:0 6px 0 var(--step);border-radius:24px;animation:.5s pop}.result h1{color:var(--green-dark);font-size:40px}.result-sub{color:var(--muted);font-weight:800}.result-hard{box-shadow:0 3px 0 var(--step);background:#fff;border-radius:16px;padding:10px 14px;font-weight:700}.result-actions{gap:14px;width:100%;margin-top:8px;display:grid}.share{color:#128c4a;text-underline-offset:3px;padding:10px;font-size:16px;font-weight:800;text-decoration:underline;display:block}.confetti{pointer-events:none;z-index:0;position:absolute;inset:0}.confetti span{opacity:.9;border-radius:3px;width:10px;height:16px;animation:linear infinite fall;position:absolute;top:-20px}.result>:not(.confetti){z-index:1;position:relative}.gallery{max-width:1100px;margin:0 auto;padding:16px}.gallery-missing{color:var(--red);font-weight:700}.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;display:grid}.gallery figure{background:var(--card);border:2px solid var(--line);border-radius:14px;margin:0;padding:6px}.gallery figure.is-missing{border-color:var(--red)}.gallery figcaption{text-align:center;padding-top:4px;font-size:12px;font-weight:700}body:has(.gallery) #root{max-width:none}@keyframes pop{0%{transform:scale(.92)}60%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-7px)}75%{transform:translate(7px)}}.shake{animation:.4s shake}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes ring{0%{box-shadow:0 0 #3d8bf28c}to{box-shadow:0 0 0 18px #3d8bf200}}@keyframes blink{50%{border-color:#0000}}@keyframes slideIn{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:none}}@keyframes sheetUp{0%{transform:translateY(100%)}to{transform:none}}@keyframes fall{to{transform:translateY(110vh)rotate(540deg)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}