:root{--bg:#fff8ec;--card:#fff;--ink:#2b2d42;--muted:#6b6f80;--accent:#ff7a59;--accent-ink:#fff;--line:#efe3cf;--error:#c62828;--radius:16px;color:var(--ink);font-family:ui-rounded,SF Pro Rounded,PingFang TC,system-ui,sans-serif}@media (prefers-color-scheme:dark){:root{--bg:#1d1f2b;--card:#272a3a;--ink:#f2f2f7;--muted:#a0a3b5;--line:#383c52;--error:#ff8a80}}*{box-sizing:border-box}body{background:var(--bg);min-height:100dvh;margin:0}main{gap:16px;max-width:860px;margin:0 auto;padding:16px;display:grid}h1,h2{margin:0}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);gap:16px;padding:20px;display:grid}.narrow{max-width:420px;margin:48px auto}.stack{gap:12px;display:grid}.row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}label{gap:4px;font-weight:600;display:grid}input,textarea{font:inherit;border:1px solid var(--line);background:var(--bg);min-height:48px;color:var(--ink);border-radius:12px;padding:12px}button,.button{font:inherit;background:var(--accent);min-height:48px;color:var(--accent-ink);cursor:pointer;border:0;border-radius:999px;justify-content:center;align-items:center;gap:6px;padding:0 20px;font-weight:700;text-decoration:none;display:inline-flex}button:disabled{opacity:.5;cursor:default}button.ghost{color:var(--muted);background:0 0;min-width:48px;padding:0}.error{color:var(--error);margin:0}.muted{color:var(--muted)}.center{text-align:center;padding:48px 16px}.chips{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.chips li{border:1px solid var(--line);border-radius:999px;align-items:center;gap:6px;padding:4px 4px 4px 12px;display:flex}.avatar{font-size:28px}.avatar-picker{border:0;flex-wrap:wrap;gap:8px;margin:0;padding:0;display:flex}.avatar-picker legend{margin-bottom:4px;font-weight:600}.avatar-picker label{cursor:pointer}.avatar-picker input{opacity:0;width:1px;height:1px;min-height:0;position:absolute}.avatar-picker span{border:3px solid #0000;border-radius:50%;place-items:center;width:56px;height:56px;font-size:32px;display:grid}.avatar-picker input:checked+span{border-color:var(--accent)}.avatar-picker input:focus-visible+span{outline:2px solid var(--ink)}.word-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin:0;padding:0;list-style:none;display:grid}.word-card{border:1px solid var(--line);border-radius:var(--radius);text-align:center;justify-items:center;gap:6px;padding:16px 12px 12px;display:grid;position:relative}.word-card .ghost{position:absolute;top:4px;right:4px}.word-art{object-fit:cover;border-radius:16px;place-items:center;line-height:1;display:grid}.word-art.letter{color:#fff;font-weight:800}.list-links{gap:8px;margin:0;padding:0;list-style:none;display:grid}.list-links a{border:1px solid var(--line);min-height:56px;color:inherit;border-radius:12px;justify-content:space-between;align-items:center;padding:0 16px;text-decoration:none;display:flex}.kid-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;display:grid}.kid-button{border-radius:24px;flex-direction:column;min-height:160px;font-size:22px}.badge{background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:2px 10px;font-size:14px;font-weight:700}button.small{min-height:40px;padding:0 14px;font-size:15px}.overlay{z-index:10;background:#0006;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.dialog{text-align:center;justify-items:center;width:100%;max-width:420px}.dialog p{margin:0}select{font:inherit;border:1px solid var(--line);background:var(--bg);min-height:48px;color:var(--ink);border-radius:12px;padding:12px}button.danger{color:#fff;background:#c62828}.ok-text{color:#2b8a3e;font-weight:700}.dialog label{text-align:left;justify-items:stretch;width:100%}.kid,.round{--k-bg-sky:#e8f6ff;--k-sea-top:#bfe6ff;--k-sea-bot:#8fd0f5;--k-ink:#1f3a5f;--k-ink-soft:#4d6f8f;--k-surface:#fff;--k-edge:#b9d8ee;--k-green:#58cc02;--k-green-edge:#46a302;--k-green-soft:#d7ffb8;--k-green-ink:#0b3d00;--k-green-text:#2b6b00;--k-red:#d33232;--k-red-edge:#a82020;--k-red-soft:#ffdfe0;--k-red-text:#b02020;--k-gold:#ffc800;--k-gold-edge:#c58a00;--k-gold-soft:#fff4c2;--k-gold-rim:#f5d76e;--k-gold-text:#8a5a00;--k-blue:#1cb0f6;--k-blue-edge:#1899d6;--k-blue-ink:#0b2a4a;--k-blue-soft:#cfe9ff;--k-blue-soft-edge:#8cc4ee;--k-purple-soft:#e5dbff;--k-purple-edge:#b197fc;--k-disabled-bg:#e5ecf2;--k-disabled-edge:#cfd9e2;--k-disabled-fg:#52606d;--k-radius:14px;--k-radius-card:20px;--k-lift:4px;--k-ease-pop:cubic-bezier(.2, 1.4, .4, 1);--k-ease-out:cubic-bezier(.2, .8, .2, 1)}.kbtn{--edge:var(--k-edge);--bg:var(--k-surface);--fg:var(--k-ink);border-radius:var(--k-radius);background:var(--bg);min-height:48px;color:var(--fg);letter-spacing:.5px;box-shadow:0 var(--k-lift) 0 var(--edge);transition:transform 80ms var(--k-ease-out), box-shadow 80ms var(--k-ease-out);border:0;padding:0 22px;font-size:18px;font-weight:900}.kbtn:active:not(:disabled){transform:translateY(var(--k-lift));box-shadow:0 0 0 var(--edge)}.kbtn:disabled{--bg:var(--k-disabled-bg);--fg:var(--k-disabled-fg);--edge:var(--k-disabled-edge);opacity:1}.kbtn-lg{--k-lift:5px;min-height:56px;padding:0 36px;font-size:20px}.kbtn-primary{--bg:var(--k-green);--fg:var(--k-green-ink);--edge:var(--k-green-edge)}.kbtn-danger{--bg:var(--k-red);--fg:#fff;--edge:var(--k-red-edge)}.kbtn-gold{--bg:var(--k-gold);--fg:var(--k-ink);--edge:var(--k-gold-edge)}.kbtn-blue{--bg:var(--k-blue);--fg:var(--k-blue-ink);--edge:var(--k-blue-edge)}.kpill{border-radius:999px;align-items:center;gap:4px;min-height:36px;padding:0 12px;font-weight:900;display:inline-flex}.kpill-gold{background:var(--k-gold-soft);color:var(--k-gold-text);box-shadow:0 3px 0 var(--k-gold-rim)}.kpill-white{background:var(--k-surface);color:var(--k-ink);box-shadow:0 3px 0 var(--k-edge)}.kpill-pop{animation:kpill-pop .35s var(--k-ease-pop) both}@keyframes kpill-pop{0%{transform:scale(.8)}60%{transform:scale(1.15)}to{transform:scale(1)}}.kprog{background:var(--k-edge);border-radius:999px;flex:1;height:16px;overflow:hidden}.kprog i{background:var(--k-green);height:100%;box-shadow:inset 0 -4px 0 var(--k-green-edge);transition:width .3s var(--k-ease-out);border-radius:999px;display:block}.ksheet{z-index:6;padding:16px max(16px, calc((100% - 560px) / 2)) max(16px, env(safe-area-inset-bottom));animation:ksheet-in .22s var(--k-ease-pop) both;border-radius:22px 22px 0 0;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title mascot""detail mascot""action action";gap:8px 12px;display:grid;position:fixed;bottom:0;left:0;right:0}.ksheet-right{background:var(--k-green-soft);color:var(--k-green-text)}.ksheet-wrong{background:var(--k-red-soft);color:var(--k-red-text)}.ksheet-title{grid-area:title;align-self:end;margin:0;font-size:22px;font-weight:900}.ksheet-detail{word-break:break-word;grid-area:detail;align-self:start;margin:0;font-size:16px;font-weight:700}.ksheet>.kbtn{grid-area:action;width:100%}.kmascot{height:auto}.ksheet-mascot{pointer-events:none;animation:kmascot-pop .3s var(--k-ease-pop) .12s both;grid-area:mascot;align-self:end;margin-top:-40px}.kmascot-bob{animation:2.5s ease-in-out infinite kmascot-bob}@keyframes kmascot-pop{0%{transform:scale(.8)translateY(-4px)}to{transform:none}}@keyframes kmascot-bob{50%{transform:translateY(-6px)}}@keyframes ksheet-in{0%{transform:translateY(100%)}to{transform:none}}@keyframes ksheet-fade{0%{opacity:0}to{opacity:1}}.kstars{justify-content:center;align-items:flex-end;gap:6px;display:flex}.kstars .art{height:auto}.kstar{animation:kstar-in .45s var(--k-ease-pop) both}.kstar:first-child{animation-delay:.1s}.kstar:nth-child(2){margin-bottom:14px;animation-delay:.25s}.kstar:nth-child(3){animation-delay:.4s}.kstar.off{filter:grayscale();opacity:.35}@keyframes kstar-in{0%{transform:scale(0)}60%{transform:scale(1.2)}to{transform:scale(1)}}.kconfetti{z-index:0;opacity:.35;pointer-events:none;width:min(100vw,520px);height:auto;animation:kconfetti-in .7s var(--k-ease-out) both;position:absolute;top:4%;left:50%;transform:translate(-50%)}@keyframes kconfetti-in{0%{opacity:0;transform:translate(-50%,-30%)}to{opacity:.35;transform:translate(-50%)}}@media (prefers-reduced-motion:reduce){.kstar,.kconfetti{animation:none}.ksheet{animation:.15s linear both ksheet-fade}.ksheet-mascot,.kmascot-bob{animation:none}.kbtn{transition:none}.kpill-pop{animation:none}.kprog i{transition:none}}.kid{min-height:100dvh;color:var(--k-ink);background:url(/game/sea-tile.png) repeat, linear-gradient(var(--k-sea-top), var(--k-sea-bot));background-size:540px,auto;font-size:18px}.kid-top{z-index:5;background:#ffffffeb;align-items:center;gap:8px;padding:10px 12px;display:flex;position:sticky;top:0}@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){.kid-top{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffb3}}.island .art{filter:drop-shadow(0 6px #5aa9d699)}.island .label{-webkit-line-clamp:2;line-clamp:2;text-align:center;text-wrap:balance;border-radius:var(--k-radius);background:var(--k-surface);max-width:180px;box-shadow:0 4px 0 var(--k-edge);border:0;-webkit-box-orient:vertical;padding:4px 12px;font-size:16px;line-height:1.25;display:-webkit-box;overflow:hidden}.island .meta{background:#ffffffd9;border-radius:999px;padding:0 8px;font-size:16px}.island.fogged .art{opacity:.55;filter:grayscale()drop-shadow(0 6px #5aa9d666)}.island.current .art{filter:drop-shadow(0 0 14px #fff)drop-shadow(0 6px #5aa9d699)}.island .bubble{z-index:2;border-radius:var(--k-radius);background:var(--k-surface);color:var(--k-green-text);white-space:nowrap;box-shadow:0 4px 0 var(--k-edge);padding:6px 14px;font-size:18px;font-weight:900;animation:2s ease-in-out infinite kfloat;position:absolute;top:-8px;left:50%;transform:translate(-50%)}.island .bubble:after{content:"";border:7px solid #0000;border-bottom:0;border-top-color:var(--k-surface);margin-left:-7px;position:absolute;bottom:-7px;left:50%}.boat .art{transform-origin:50% 80%;animation:3s ease-in-out infinite ksway}.divider{background:var(--k-ink);color:#fff;border-radius:999px;padding:4px 14px;font-size:16px;font-weight:800;position:absolute;left:50%;transform:translate(-50%,-50%)}.map:before{content:"";pointer-events:none;opacity:.5;background:url(/game/fog.png) 85% 18%/220px no-repeat,url(/game/fog.png) 4% 58%/180px no-repeat;animation:40s ease-in-out infinite alternate kdrift;position:absolute;inset:0}@keyframes kfloat{50%{transform:translate(-50%,-6px)}}@keyframes ksway{0%,to{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}@keyframes kdrift{to{transform:translate(14px)}}.kid-top h1{flex:1;margin:0;font-size:20px}.chip{border-radius:var(--k-radius);background:var(--k-surface);min-height:48px;color:var(--k-ink);box-shadow:0 3px 0 var(--k-edge);border:0;align-items:center;gap:4px;padding:0 14px;font-weight:800;text-decoration:none;display:inline-flex}.gate{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:relative;overflow:hidden}.gate:after{content:"";transform-origin:0;background:#ffc800b3;position:absolute;inset:0;transform:scaleX(0)}.gate.holding:after{transition:transform 3s linear;transform:scaleX(1)}.gate-q{margin:0;font-size:32px;font-weight:900}.map{max-width:720px;margin:0 auto;position:relative;overflow-x:clip}.map>svg{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.island{min-height:0;color:var(--k-ink);background:0 0;border:0;justify-items:center;gap:2px;padding:0;font-weight:800;display:grid;position:absolute;transform:translate(-50%,-50%)}.island .art{width:clamp(140px,38vw,220px);height:auto}.island .flag{width:48px;position:absolute;top:-12px;right:12%}.boat{pointer-events:none;position:absolute;transform:translate(-50%,-50%)}.kid-empty{text-align:center;padding:48px 16px;font-weight:800}.kid-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;padding:16px;display:grid}.kid-button{border-radius:var(--k-radius-card);background:var(--k-surface);min-height:160px;color:var(--k-ink);box-shadow:0 6px 0 var(--k-edge);border:0;flex-direction:column;font-size:22px}.kid-button:active{box-shadow:none;transform:translateY(6px)}.kid-button .avatar{font-size:64px}.art-fallback{width:var(--art);height:var(--art);place-items:center;line-height:1;display:inline-grid}.island .art-fallback{aspect-ratio:4/3;height:auto}.round{background:var(--k-bg-sky);min-height:100dvh;color:var(--k-ink);flex-direction:column;font-size:18px;display:flex}.round.has-sheet .stage{padding-bottom:240px}.round-top{align-items:center;gap:10px;padding:10px 12px;display:flex}.icon{background:var(--k-surface);min-width:48px;min-height:48px;color:var(--k-ink);box-shadow:0 3px 0 var(--k-edge);border:0;border-radius:50%;padding:0;font-size:18px}.icon:active{box-shadow:none;transform:translateY(3px)}.picture{border-radius:var(--k-radius-card);background:var(--k-surface);box-shadow:0 6px 0 var(--k-edge);border:0;align-self:center;padding:8px;position:relative}.speak{background:var(--k-blue);width:56px;height:56px;min-height:0;color:var(--k-blue-ink);box-shadow:0 4px 0 var(--k-blue-edge);border:0;border-radius:50%;padding:0;font-size:22px;position:absolute;bottom:-12px;right:-12px}.speak:active{box-shadow:none;transform:translateY(4px)}.slot{--w:max(28px, min(var(--slot-max), calc((100cqw - (var(--n,8) - 1) * 6px) / var(--n,8))));width:var(--w);height:calc(var(--w) * 1.18);background:var(--k-surface);min-height:0;color:var(--k-ink);font-size:calc(var(--w) * .6);box-shadow:0 4px 0 var(--k-edge);border:0;border-radius:12px;padding:0;font-weight:900;position:relative}.slot.tap:active{box-shadow:none;transform:translateY(4px)}.answer-actions .kbtn{align-items:center;gap:8px;display:inline-flex}.answer-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:4px;display:flex}.stage[data-phase=right] .answer-actions{visibility:hidden}.slot.empty{background:var(--k-gold-soft);box-shadow:0 4px 0 var(--k-gold-rim)}.slot.fixed{box-shadow:none;background:0 0}.slot.ok{background:var(--k-green-soft);box-shadow:0 4px 0 var(--k-green);color:var(--k-green-text)}.slot.bad{background:var(--k-red-soft);box-shadow:0 4px 0 var(--k-red);color:var(--k-red-text);-webkit-text-decoration:underline wavy var(--k-red-text);text-decoration:underline wavy var(--k-red-text)}.stage[data-phase=right] .slot:not(.fixed):not(.empty){background:var(--k-green-soft);box-shadow:0 4px 0 var(--k-green);color:var(--k-green-text);animation:kbounce .4s var(--k-ease-pop) both;animation-delay:calc(var(--i,0) * 40ms)}.kshake{animation:.3s linear both kshake}@keyframes kbounce{40%{transform:translateY(-10px)}to{transform:none}}@keyframes kshake{20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}to{transform:none}}.tile{background:var(--k-blue-soft);width:56px;height:56px;min-height:0;color:var(--k-ink);box-shadow:0 4px 0 var(--k-blue-soft-edge);border:0;border-radius:16px;padding:0;font-size:26px;font-weight:900}.tile:nth-child(3n+2){background:var(--k-green-soft);box-shadow:0 4px 0 var(--k-green)}.tile:nth-child(3n){background:var(--k-purple-soft);box-shadow:0 4px 0 var(--k-purple-edge)}.tile:active:not(:disabled){box-shadow:none;transform:translateY(4px)}.tile:disabled{opacity:.3;box-shadow:none}.key{background:var(--k-surface);max-width:52px;min-height:48px;color:var(--k-ink);box-shadow:0 3px 0 var(--k-edge);border:0;border-radius:10px;flex:1;padding:0;font-size:20px;font-weight:800}.key:active:not(:disabled){box-shadow:none;transform:translateY(3px)}.key.wide{background:var(--k-gold);max-width:none;box-shadow:0 3px 0 var(--k-gold-edge);flex:2}.key.submit{background:var(--k-green);color:var(--k-green-ink);box-shadow:0 3px 0 var(--k-green-edge)}.key:disabled{background:var(--k-disabled-bg);color:var(--k-disabled-fg);box-shadow:0 3px 0 var(--k-disabled-edge);opacity:1}.stage{flex-direction:column;flex:1;gap:12px;padding:0 12px 16px;display:flex}.picture .word-art{width:min(56vw,240px);height:min(56vw,240px)}.picture.small .word-art{width:min(36vw,160px);height:min(36vw,160px)}.answer{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;display:flex;container-type:inline-size}.learn-word{letter-spacing:2px;margin:0;font-size:44px;font-weight:900}.learn-text{margin:0;line-height:1.5}.slots{--slot-max:44px;justify-items:center;gap:8px;display:grid}.slot-row{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.tiles{flex-wrap:wrap;justify-content:center;gap:10px;max-width:420px;display:flex}.keyboard{gap:6px;width:100%;max-width:560px;display:grid}.kb-row{justify-content:center;gap:4px;display:flex}.start{text-align:center;flex:1;place-content:center;justify-items:center;gap:16px;padding:24px;display:grid}.summary{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;padding:24px 24px 180px;display:flex;position:relative;overflow:hidden}.summary h1{margin:0;font-size:34px}.summary h1,.summary .kstars,.summary .kchips,.summary .kmascot{z-index:1;position:relative}.kchips{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.summary-actions{width:100%;max-width:560px;padding:16px 16px max(16px, env(safe-area-inset-bottom));gap:12px;margin:0 auto;display:grid;position:fixed;bottom:0;left:0;right:0}.round.is-summary{background:linear-gradient(var(--k-gold-soft), var(--k-bg-sky))}@media (width>=700px){.picture .word-art{width:min(50vw,340px);height:min(50vw,340px)}.picture.small .word-art{width:min(30vw,220px);height:min(30vw,220px)}.learn-word{font-size:56px}.slots{--slot-max:56px}.tile{width:68px;height:68px;font-size:32px}}@media (aspect-ratio>=1) and (width>=700px){.stage{flex-direction:row;align-items:center;padding:12px 24px 24px}.picture .word-art{width:min(38vw,360px);height:min(38vw,360px)}}@media (prefers-reduced-motion:reduce){.gate.holding:after{transition:none}.stage[data-phase=right] .slot,.kshake,.island .bubble,.boat .art,.map:before{animation:none}}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.learn-word span{transition:transform .15s,color .15s;display:inline-block}.learn-word .hot{color:#ff6b6b;transform:scale(1.35)}.learn-actions{justify-items:center;gap:12px;display:grid}.learn-wait{justify-items:center;gap:6px;min-width:200px;font-weight:800;display:grid}.learn-wait i{background:var(--k-edge);border-radius:99px;width:100%;height:12px;display:block;position:relative;overflow:hidden}.learn-wait i:after{content:"";background:var(--k-green);transform-origin:0;animation:linear forwards learn-fill;animation-duration:inherit;position:absolute;inset:0}@keyframes learn-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@media (prefers-reduced-motion:reduce){.learn-wait i:after{animation:none;transform:scaleX(.5)}.learn-word span{transition:none}}.practice-banner{background:var(--k-purple-soft);color:var(--k-ink);flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 12px;font-size:16px;display:flex}.practice-banner strong{flex:auto}.practice-banner label{align-items:center;gap:6px;font-weight:700;display:flex}.practice-banner select{min-height:44px}.kbtn:focus-visible,.tile:focus-visible,.slot:focus-visible,.key:focus-visible,.icon:focus-visible,.speak:focus-visible{outline:3px solid var(--k-blue);outline-offset:3px}