:root{color:#f8f5ff;background:#0e1032;font-family:Nunito,ui-rounded,Arial Rounded MT Bold,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:290px;margin:0;min-height:100vh;background:radial-gradient(circle at 20% 0%,#3b2873 0,transparent 35%),linear-gradient(150deg,#0e1032,#21184c 55%,#102c47)}button{font:inherit;-webkit-tap-highlight-color:transparent}.page{width:min(100%,640px);min-height:100vh;margin:auto;padding:18px 18px 26px;display:flex;flex-direction:column;justify-content:center}.masthead{padding:0 4px 12px;display:flex;align-items:end;justify-content:space-between}.masthead h1{margin:0;font-size:clamp(2rem,7vw,3rem);line-height:.9;letter-spacing:-.06em;text-shadow:0 2px 18px #a982ff80}.eyebrow,.hud-label,.answer-label{display:block;color:#c4c4e8;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.masthead-actions{display:flex;align-items:center;gap:10px}.lang-switch{display:flex;overflow:hidden;border:1px solid #afa5eb77;border-radius:999px;background:#ffffff12}.lang-switch button{min-width:40px;height:34px;padding:0 10px;border:0;color:#d6d0f5;background:transparent;cursor:pointer;font-size:.78rem;font-weight:900;letter-spacing:.05em}.lang-switch button[aria-pressed=true]{color:#231146;background:linear-gradient(135deg,#ffed9c,#ffbd7b)}.icon-button{width:43px;height:43px;border:1px solid #afa5eb77;border-radius:50%;color:#fff;background:#ffffff12;cursor:pointer;font-size:1.25rem}.game-card{overflow:hidden;border:1px solid #b8a9fa66;border-radius:28px;background:#171347;box-shadow:0 20px 50px #02021c99,inset 0 1px #ffffff3d}.hud{position:relative;z-index:2;height:57px;padding:9px 22px;display:grid;grid-template-columns:1fr 1fr 1.35fr;align-items:center;background:linear-gradient(90deg,#181340e8,#392360e8);box-shadow:0 3px 10px #07031c99}.hud strong{font-size:1.1rem}#hearts{color:#ff9bc4;letter-spacing:.08em;white-space:nowrap}.game-canvas{width:100%;aspect-ratio:480 / 620;overflow:hidden;background:#17134a}.game-canvas canvas{display:block}.answer-panel{display:grid;grid-template-columns:115px 1fr;gap:2px 10px;min-height:68px;padding:10px 20px;align-items:center;background:linear-gradient(110deg,#2a205d,#3d276d)}.answer-label{grid-row:span 2}.answer{min-height:30px;color:#fff6c9;font-size:1.75rem;font-weight:900;line-height:1;letter-spacing:.06em}.answer.is-unmatched{color:#f1c8ff;animation:nudge .25s ease-in-out 2}.hint{color:#ded8ff;font-size:.8rem}@keyframes nudge{50%{transform:translate(4px)}}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:11px 18px 16px;background:#13103b}.keypad button{height:44px;border:1px solid #a799e066;border-radius:11px;color:#f8f4ff;background:linear-gradient(#56418a,#34245f);box-shadow:inset 0 1px #ffffff4d,0 2px 3px #03021899;cursor:pointer;font-weight:900;font-size:1.1rem}.keypad button:active{transform:translateY(1px);background:#6d52a9}.keyboard-note{margin:12px 0 0;text-align:center;color:#c7bee9;font-size:.78rem}.game-dialog{width:min(360px,calc(100vw - 36px));border:1px solid #c0b3ff;border-radius:24px;padding:30px;color:#f9f6ff;text-align:center;background:linear-gradient(145deg,#322064,#191443);box-shadow:0 20px 70px #030218cc}.game-dialog::backdrop{background:#07051ba8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.game-dialog h2{margin:4px 0 10px}.game-dialog p{color:#ddd6ff;line-height:1.45}.dialog-star{color:#ffdf8a;font-size:2rem;text-shadow:0 0 18px #ffe990}.best-line{font-size:.88rem}.primary-button{width:100%;border:0;border-radius:13px;padding:12px;color:#231146;background:linear-gradient(135deg,#ffed9c,#ffbd7b);cursor:pointer;font-weight:900;font-size:1rem;box-shadow:0 3px 10px #05021b99}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(max-height:820px)and (min-width:650px){.page{padding-top:10px;padding-bottom:10px}.game-canvas{max-height:500px}.keypad button{height:35px}}.mode-switch{align-self:center;margin:0 0 10px;display:flex;overflow:hidden;border:1px solid #afa5eb77;border-radius:999px;background:#ffffff12}.mode-switch button{min-width:96px;height:36px;padding:0 16px;border:0;color:#d6d0f5;background:transparent;cursor:pointer;font-weight:900}.mode-switch button[aria-pressed=true]{color:#231146;background:linear-gradient(135deg,#ffed9c,#ffbd7b)}.learn-tools{padding:8px 12px;display:grid;gap:8px;background:linear-gradient(90deg,#181340e8,#392360e8);box-shadow:0 3px 10px #07031c99}.learn-tools[hidden],.hud[hidden],.learn-explain[hidden]{display:none}.table-picker{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}.table-picker button,.learn-actions button{height:34px;padding:0 4px;border:1px solid #a799e066;border-radius:10px;color:#f8f4ff;background:#34245f;cursor:pointer;font-weight:900;font-size:.85rem}.table-picker button[aria-pressed=true],.learn-actions button[aria-pressed=true]{color:#231146;background:linear-gradient(135deg,#ffed9c,#ffbd7b)}.learn-actions{display:flex;gap:8px}.learn-actions button{flex:1}.learn-explain{margin:0;padding:8px 16px;text-align:center;color:#fff6c9;font-weight:900;background:#2a205d}@media(max-width:380px){.table-picker button{font-size:.72rem}.mode-switch button{min-width:80px}}.mode-row{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 10px;flex-wrap:wrap}.mode-row .mode-switch{margin:0}.treasure-button{height:38px;padding:0 14px;border:1px solid #ffdf8a99;border-radius:999px;color:#fff6c9;background:#ffffff12;cursor:pointer;font-weight:900;font-size:.85rem;white-space:nowrap}.treasure-button:hover{background:#fff2}.treasure-badge{margin-left:4px;padding:2px 7px;border-radius:999px;color:#231146;background:linear-gradient(135deg,#ffed9c,#ffbd7b);font-size:.75rem}.treasure-dialog{width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;padding:22px 18px}.treasure-count{margin:0 0 8px;font-weight:900}.treasure-next{margin:6px 0 12px;font-size:.88rem}.treasure-progress{height:10px;overflow:hidden;border-radius:999px;background:#ffffff1f}.treasure-progress span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#7fe0c0,#ffed9c);transition:width .4s}.treasure-grid{margin:0 0 12px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.treasure-card{padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;border:1px solid #c0b3ff55;border-radius:16px;background:#ffffff14;font-size:.8rem;line-height:1.2}.treasure-card span{color:#c4c4e8;font-size:.72rem}.treasure-art{width:64px;height:64px;flex:none}.treasure-art svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 8px #ffe99055)}.treasure-card.is-locked{background:#ffffff08;border-style:dashed}.treasure-card.is-locked .treasure-art svg{filter:brightness(0) invert(1);opacity:.16}.treasure-note{margin:0 0 14px;color:#c7bee9;font-size:.75rem}.treasure-toast{position:fixed;z-index:20;top:10px;left:50%;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);padding:6px 16px 6px 8px;border:1px solid #ffdf8acc;border-radius:999px;background:#2a205df2;box-shadow:0 6px 24px #02021ccc,0 0 18px #ffe99066;pointer-events:none;opacity:0;transform:translate(-50%,-16px);transition:opacity .35s,transform .35s}.treasure-toast.is-shown{opacity:1;transform:translate(-50%)}.treasure-toast .treasure-art{width:44px;height:44px}.treasure-toast span{display:block;color:#ffdf8a;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.treasure-toast strong{font-size:.95rem}@media(max-width:480px){.treasure-grid{grid-template-columns:repeat(2,1fr)}.treasure-art{width:56px;height:56px}}.treasure-tabs{display:flex;gap:6px;margin:0 0 14px;padding:4px;border-radius:999px;background:#ffffff14}.treasure-tabs button{flex:1;min-height:44px;border:0;border-radius:999px;color:#f8f5ff;background:transparent;cursor:pointer;font:inherit;font-weight:900}.treasure-tabs button[aria-pressed=true]{color:#231146;background:linear-gradient(135deg,#ffed9c,#ffbd7b)}.island-help{min-height:2.6em;margin:0 0 8px;text-align:center;font-weight:800;font-size:.9rem}.island-stage{position:relative;width:100%;aspect-ratio:320 / 300;overflow:hidden;border-radius:20px;margin-inline:-8px;width:calc(100% + 16px);box-shadow:0 0 0 1px #c0b3ff55,0 8px 28px #02021c99}.island-scene{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.isl-star{animation:isl-twinkle 3.2s ease-in-out infinite}.isl-ripple{animation:isl-glow 4s ease-in-out infinite}.isl-fly{animation:isl-float 5s ease-in-out infinite}@keyframes isl-twinkle{50%{opacity:.3}}@keyframes isl-glow{50%{opacity:.2}}@keyframes isl-float{50%{opacity:.45;transform:translateY(-4px)}}.island-slot{position:absolute;width:15%;min-width:44px;aspect-ratio:1;padding:0;transform:translate(-50%,-50%);display:grid;place-items:center;border:0;border-radius:50%;background:transparent;cursor:pointer}.island-slot svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 6px #ffe99066)}.island-slot i{width:46%;height:18%;margin-top:30%;border-radius:50%;background:radial-gradient(closest-side,#f4ffe94d,#f4ffe900)}.island-slot.is-open i{width:54%;height:22%;background:radial-gradient(closest-side,#fff6c900 55%,#fff6c966);box-shadow:0 0 0 2px #fff3b0d9,0 0 12px 2px #ffe99a99;animation:isl-pulse 1.8s ease-in-out infinite}@keyframes isl-pulse{50%{transform:scale(1.12);box-shadow:0 0 0 2px #fff3b0,0 0 16px 4px #ffe99acc}}.island-slot.has-item svg{transform:translateY(-14%)}.island-slot.has-item:after{content:"";position:absolute;bottom:14%;width:56%;height:14%;border-radius:50%;background:#0c3a2a55;z-index:-1}.island-slot.is-selected{box-shadow:0 0 0 3px #ffed9c,0 0 18px #ffed9c;background:#fff2}.island-slot:focus-visible,.island-chip:focus-visible,.treasure-tabs button:focus-visible,.island-remove:focus-visible{outline:3px solid #fff;outline-offset:2px}.island-tray{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.island-chip{position:relative;min-height:44px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid #c0b3ff55;border-radius:16px;color:inherit;background:#ffffff14;cursor:pointer;font:inherit;font-size:.75rem;font-weight:800;line-height:1.15}.island-chip .treasure-art{width:48px;height:48px}.island-chip em{color:#9fe8c4;font-size:.65rem;font-style:normal}.island-chip.is-placed{opacity:.75}.island-chip.is-selected{opacity:1;border-color:#ffed9c;box-shadow:0 0 0 2px #ffed9c;background:#ffffff26}.island-remove{display:block;width:100%;min-height:44px;margin:0 0 14px;border:1px solid #ffdf8a99;border-radius:999px;color:#fff6c9;background:#ffffff12;cursor:pointer;font:inherit;font-weight:900}.island-remove[hidden]{display:none}@media(max-width:480px){.island-tray{grid-template-columns:repeat(3,1fr)}}.island-friend{position:absolute;width:14%;min-width:44px;aspect-ratio:1;padding:0;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;cursor:pointer}.island-friend svg,.friend-art svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 0 5px #ffe99044)}.island-friend:focus-visible,.friend-card:focus-visible{outline:3px solid #fff;outline-offset:2px}.island-friend .m-body{transform-box:fill-box;transform-origin:50% 100%;animation:friend-breathe 4s ease-in-out infinite}.island-friend .m-tail{transform-box:fill-box;transform-origin:0 100%;animation:friend-tail 5s ease-in-out infinite}.m-eyes{transform-box:fill-box;transform-origin:center}.island-friend .m-eyes{animation:friend-blink 5.5s infinite}.island-friend.is-hop svg{animation:friend-hop .7s ease-out;filter:drop-shadow(0 0 9px #ffe990cc)}@keyframes friend-breathe{50%{transform:scale(1.025,1.04)}}@keyframes friend-tail{50%{transform:rotate(6deg)}}@keyframes friend-blink{0%,94%,to{transform:scaleY(1)}97%{transform:scaleY(.1)}}@keyframes friend-hop{30%{transform:translateY(-16%) scale(.97,1.04)}60%{transform:translateY(0) scale(1.05,.94)}to{transform:none}}.island-friend-wrap,#island-friend{margin:12px 0 0}.friend-prompt{margin:0 0 8px;text-align:center;font-weight:800;font-size:.9rem}.friend-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.friend-card{min-height:44px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid #c0b3ff55;border-radius:16px;color:inherit;background:#ffffff14;cursor:pointer;font:inherit;font-size:.8rem;font-weight:800}.friend-card.is-current{border-color:#ffed9c;box-shadow:0 0 0 2px #ffed9c}.friend-art{width:64px;height:64px}.island-friend.is-walking{transition:left 1.4s ease-in-out,top 1.4s ease-in-out}.island-friend:not(.has-walk).is-walking svg{animation:friend-step .35s ease-in-out infinite}@keyframes friend-step{50%{transform:translateY(-9%) rotate(2deg)}}.island-friend.is-visiting svg{transform-origin:50% 90%;animation:var(--react) 2.2s ease-in-out both}.island-friend.v-crystal{--react: friend-tilt}.island-friend.v-sprout{--react: friend-sniff}.island-friend.v-fountain{--react: friend-sit}.island-friend.v-lantern{--react: friend-look}@keyframes friend-tilt{15%,40%{transform:rotate(-12deg)}55%,80%{transform:rotate(10deg)}to{transform:none}}@keyframes friend-sniff{15%,30%{transform:translateY(6%) rotate(12deg)}45%{transform:translateY(6%) rotate(5deg)}60%{transform:translateY(6%) rotate(13deg)}80%{transform:rotate(-5deg)}to{transform:none}}@keyframes friend-sit{15%,85%{transform:scale(1.03,.86)}to{transform:none}}@keyframes friend-look{20%,45%{transform:rotate(-8deg) translateY(-3%)}60%,85%{transform:rotate(8deg) translateY(-3%)}to{transform:none}}.island-slot .fx{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.island-slot .fx b{position:absolute;width:12%;aspect-ratio:1;border-radius:50%;opacity:0}.fx-crystal .fx b{background:#fff6c9;box-shadow:0 0 8px 3px #fff6c9cc;animation:fx-twinkle 1.1s ease-in-out infinite}.fx-crystal .fx b:nth-child(1){left:8%;top:12%}.fx-crystal .fx b:nth-child(2){right:6%;top:24%;animation-delay:.35s}.fx-crystal .fx b:nth-child(3){left:44%;top:-4%;animation-delay:.7s}.fx-crystal svg{filter:drop-shadow(0 0 10px #fff6c9)}@keyframes fx-twinkle{50%{opacity:1;transform:scale(1.5)}}.fx-fountain .fx b{left:20%;right:20%;top:66%;width:auto;aspect-ratio:3;border-radius:50%;border:1.5px solid #d9f6ffcc;animation:fx-ripple 1.6s ease-out infinite}.fx-fountain .fx b:nth-child(2){animation-delay:.5s}.fx-fountain .fx b:nth-child(3){animation-delay:1s}@keyframes fx-ripple{0%{opacity:.9;transform:scale(.5)}to{opacity:0;transform:scale(1.4)}}.fx-lantern .fx b{background:#fff0a3;box-shadow:0 0 7px 3px #fff0a3cc;width:9%;animation:fx-fly 2s ease-in-out infinite}.fx-lantern .fx b:nth-child(1){left:2%;top:30%}.fx-lantern .fx b:nth-child(2){right:0;top:14%;animation-delay:.6s}.fx-lantern .fx b:nth-child(3){right:12%;top:58%;animation-delay:1.2s}@keyframes fx-fly{0%,to{opacity:0}30%,70%{opacity:1;transform:translate(5px,-7px)}}.island-slot.fx-still svg{filter:drop-shadow(0 0 10px #fff6c9)}.island-friend.has-walk.is-walking{transition:left var(--walk) linear,top var(--walk) linear}.island-friend .m-walk{display:none}.island-friend.is-up .m-walk{display:block;animation:w-rise .3s ease-out;transform-origin:50% 92%}.island-friend.is-up svg:not(.m-walk){display:none}.island-friend.is-settle svg:not(.m-walk){transform-origin:50% 92%;animation:w-settle .45s ease-out}.m-walk .w-face,.m-walk .w-pose{transform-box:view-box;transform-origin:50% 90%}.island-friend.face-left .w-face{transform:scaleX(-1)}.m-walk .w-k1,.m-walk .w-k2,.m-walk .w-happy{opacity:0}.is-walking .w-k0{animation:w-k0 .48s step-end infinite}.is-walking .w-k1{animation:w-k1 .48s step-end infinite}.is-walking .w-k2{animation:w-k2 .48s step-end infinite}.m-walk .w-tail{transform-box:fill-box;transform-origin:100% 85%;animation:w-wag 1.6s ease-in-out infinite}.is-walking .w-bob{animation:w-bob .24s step-end infinite}.is-walking .w-tail{animation-duration:.96s}.island-friend.is-turn .w-pose{animation:w-turn .28s ease-in-out}.island-friend.has-walk.is-visiting svg{animation:none}.island-friend.has-walk.is-visiting .w-pose{animation:var(--react) 2.2s ease-in-out both}.island-friend.is-visiting .w-open{opacity:0}.island-friend.is-visiting .w-happy{opacity:1}.island-friend.is-visiting .w-tail{animation:w-wag .5s ease-in-out infinite}@keyframes w-rise{0%{transform:translateY(5%) scale(1.08,.8)}60%{transform:translateY(-3%) scale(.97,1.04)}}@keyframes w-settle{0%{transform:translateY(-3%) scale(.95,1.05)}55%{transform:scale(1.06,.9)}}@keyframes w-k0{0%{opacity:0}25%{opacity:1}50%{opacity:0}75%,to{opacity:1}}@keyframes w-k1{0%{opacity:1}25%,to{opacity:0}}@keyframes w-k2{0%,25%{opacity:0}50%{opacity:1}75%,to{opacity:0}}@keyframes w-bob{0%{transform:translateY(.5px)}50%,to{transform:translateY(-.9px)}}@keyframes w-turn{40%,60%{transform:translateY(-9%) scale(.9,1.06)}85%{transform:scale(1.05,.94)}}@keyframes w-wag{0%,to{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}.is-walking .gait-hop .w-k0{animation-name:h-k0}.is-walking .gait-hop .w-k1{animation-name:h-k1}.is-walking .gait-hop .w-k2{animation-name:h-k2}.is-walking .gait-hop .w-bob{transform-box:view-box;transform-origin:50% 90%;animation:h-bob .48s linear infinite}.is-walking .gait-hop .w-shadow{transform-box:fill-box;transform-origin:center;animation:h-shadow .48s ease-in-out infinite}.m-walk .w-ears{transform-box:fill-box;transform-origin:55% 100%;animation:w-ears 3.2s ease-in-out infinite}.is-walking .gait-hop .w-ears{animation:h-ears .48s ease-in-out infinite}@keyframes h-k0{0%{opacity:1}15%{opacity:0}85%,to{opacity:1}}@keyframes h-k1{0%{opacity:0}15%{opacity:1}65%,to{opacity:0}}@keyframes h-k2{0%{opacity:0}65%{opacity:1}85%,to{opacity:0}}@keyframes h-bob{0%,to{transform:scale(1.05,.93)}15%{transform:scale(.97,1.05);animation-timing-function:ease-out}42%{transform:translateY(-6px);animation-timing-function:ease-in}72%{transform:translateY(-.5px)}85%{transform:scale(1.05,.93)}}@keyframes h-shadow{42%{transform:scale(.78);opacity:.2}}@keyframes h-ears{0%,to{transform:rotate(2deg)}45%{transform:rotate(-10deg)}78%{transform:rotate(5deg)}}@keyframes w-ears{50%{transform:rotate(-4deg)}}.m-walk .w-curl{transform-origin:100% 100%;animation-name:w-sway;animation-duration:2.4s}.island-friend.is-visiting .w-curl{animation:w-quiver .3s ease-in-out infinite}.is-walking .w-curl{animation-duration:1.2s}@keyframes w-sway{0%,to{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}@keyframes w-quiver{0%,to{transform:rotate(-2deg)}50%{transform:rotate(3deg)}}