.hub{min-height:100dvh;padding:max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));background:radial-gradient(ellipse 90% 55% at 50% -10%, #fff6c8 0%, transparent 55%), linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 42%, var(--sky-low) 68%, var(--grass-light) 68%, var(--grass) 100%);grid-template-rows:auto 1fr auto;display:grid;position:relative}.sky{pointer-events:none;position:absolute;inset:0 0 40%;overflow:hidden}.sun{background:var(--sun);border-radius:50%;width:72px;height:72px;animation:4s ease-in-out infinite pulse-sun;position:absolute;top:8%;right:10%}.cloud{background:#ffffffe0;border-radius:40px;height:34px;position:absolute}.cloud:before,.cloud:after{content:"";background:inherit;border-radius:50%;position:absolute}.cloud-a{width:90px;animation:18s linear infinite drift;top:18%;left:8%}.cloud-a:before{width:42px;height:42px;top:-20px;left:14px}.cloud-a:after{width:34px;height:34px;top:-14px;right:12px}.cloud-b{width:70px;height:28px;animation:22s linear infinite reverse drift;top:28%;right:18%}.cloud-b:before{width:32px;height:32px;top:-16px;left:12px}.hub-brand{z-index:2;text-align:center;padding-top:12px;position:relative}.brand{letter-spacing:-.02em;color:var(--ink);text-shadow:0 2px #ffffff73;margin:0;font-family:Fredoka,Nunito,sans-serif;font-size:clamp(2.1rem,8vw,3.4rem);font-weight:700}.tagline{color:var(--ink-soft);margin:8px 0 0;font-size:clamp(1rem,3.5vw,1.2rem)}.hub-stars{color:#c47a00;background:#fffdf8d9;border-radius:999px;margin:10px 0 0;padding:6px 14px;font-family:Fredoka,sans-serif;font-size:1rem;display:inline-block}.meadow{pointer-events:none;height:48%;position:absolute;inset:auto 0 0}.hill{border-radius:50% 50% 0 0;position:absolute;left:-10%;right:-10%}.hill-back{background:var(--grass-deep);opacity:.55;height:55%;bottom:8%}.hill-front{background:var(--grass);height:48%;bottom:0}.doors{z-index:2;flex-wrap:wrap;justify-content:center;align-self:end;align-items:flex-end;gap:clamp(8px,2vw,18px);max-width:720px;margin:0 auto;padding:16px 0 56px;display:flex;position:relative}.door{width:min(118px,28vw);min-height:var(--tap-min);flex-direction:column;align-items:center;gap:6px;display:flex}.door-stars{color:#1f3a4540;gap:1px;font-size:.7rem;line-height:1;display:flex}.door-stars .on{color:#f0b429}.door-frame{aspect-ratio:3/4.2;background:#fff8e7;border-radius:18px 18px 10px 10px;width:100%;padding:10px;box-shadow:0 10px #1f3a451f}.door-panel{background:linear-gradient(180deg, color-mix(in srgb, var(--door-accent) 75%, white), var(--door-accent));transform-origin:0;border-radius:12px 12px 8px 8px;place-items:center;width:100%;height:100%;transition:transform .25s;display:grid;position:relative}.door:active .door-panel{transform:perspective(400px)rotateY(-12deg)}.door-icon{filter:drop-shadow(0 2px #0000001f);font-size:clamp(1.8rem,6vw,2.6rem)}.door-knob{background:#fff6d6;border-radius:50%;width:12px;height:12px;position:absolute;top:48%;right:12%;box-shadow:inset 0 -1px #00000026}.door-label{text-align:center;flex-direction:column;gap:2px;display:flex}.door-label strong{font-family:Fredoka,sans-serif;font-size:.92rem}.door-label span{color:var(--ink-soft);font-size:.72rem}.buddy{z-index:3;left:50%;bottom:max(18px, env(safe-area-inset-bottom));pointer-events:none;position:absolute;transform:translate(-50%)}.buddy-face{width:64px;height:64px;box-shadow:0 6px 0 var(--shadow-soft);background:#fffdf8;border-radius:50%;place-items:center;font-size:2rem;display:grid}.room{min-height:100dvh;padding:max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));background:radial-gradient(circle at 20% 0,#ffe9a8 0%,#0000 40%),linear-gradient(#8fd4f0 0%,#e8f7ef 55%,#d8f0e4 100%);flex-direction:column;display:flex}.room-bar{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.home-btn{background:var(--panel);border:2px solid var(--stroke);border-radius:999px;min-width:96px;min-height:52px;padding:0 16px;font-weight:800}.room-title{flex:1;margin:0;font-family:Fredoka,sans-serif;font-size:clamp(1.25rem,4.5vw,1.8rem)}.room-meta{align-items:center;gap:8px;margin-left:auto;display:flex}.star-row{gap:1px;font-size:1rem;display:flex}.star{color:#1f3a4533}.star.on{color:#f0b429}.level-pill{color:var(--ink-soft);background:#fffdf8e6;border-radius:999px;padding:4px 10px;font-size:.8rem}.room-hint{text-align:center;color:var(--ink-soft);margin:10px 0 0;font-size:1.05rem}.room-body{flex-direction:column;flex:1;justify-content:center;min-height:0;padding-top:12px;display:flex;position:relative}.color-room{flex-direction:column;gap:28px;display:flex}.fruit-row{flex-wrap:wrap;justify-content:center;gap:14px;min-height:110px;display:flex}.fruit{width:var(--tap-min);height:var(--tap-min);background:var(--panel);box-shadow:0 6px 0 var(--shadow-soft);border:3px solid #0000;border-radius:28px;font-size:2.4rem}.fruit.is-selected{border-color:#1f3a45;transform:translateY(-4px)}.basket-row{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.basket{color:#fff;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:min(130px,28vw);min-height:120px;font-weight:800;display:flex;box-shadow:0 8px #0000001f}.basket-red{background:linear-gradient(#ff8a6b,#ff5a3c)}.basket-yellow{color:#3a2f00;background:linear-gradient(#ffe066,#f0b429)}.basket-blue{background:linear-gradient(#7ec8ff,#3a8fd8)}.basket-green{background:linear-gradient(#8fd9a8,#3d9a68)}.basket-emoji{font-size:1.8rem}.basket-label{font-family:Fredoka,sans-serif;font-size:1.1rem}.count-room{flex-direction:column;align-items:center;gap:16px;width:100%;display:flex}.count-room-3d{flex:1;min-height:0}.pond-canvas-wrap{touch-action:none;border-radius:28px;width:min(560px,100%);height:min(52dvh,420px);min-height:260px;position:relative;overflow:hidden;box-shadow:0 10px #1f3a451f}.pond-canvas-wrap canvas{display:block;width:100%!important;height:100%!important}.pond-3d-tip{color:var(--ink);pointer-events:none;background:#fffdf8eb;border-radius:999px;margin:0;padding:8px 16px;font-family:Fredoka,sans-serif;font-size:1rem;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.pond-loading{color:var(--ink-soft);background:linear-gradient(#9fd8ef,#8fd9a8);place-items:center;font-family:Fredoka,sans-serif;display:grid}.pond-scene{flex-direction:column;gap:12px;width:min(520px,100%);display:flex}.shore{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;min-height:96px;display:flex}.duck{width:var(--tap-min);height:var(--tap-min);box-shadow:0 6px 0 var(--shadow-soft);background:#fffdf8;border-radius:50%;font-size:2.3rem}.pond{border-radius:50%/40%;place-items:center;height:180px;display:grid;position:relative;overflow:hidden}.pond-water{background:radial-gradient(circle at 30% 30%,#ffffff59,#0000 40%),linear-gradient(#5eb7e8,#2f87c4);position:absolute;inset:0}.pond-ducks{z-index:1;flex-wrap:wrap;justify-content:center;gap:6px;max-width:80%;display:flex;position:relative}.duck-in-pond{font-size:2rem}.number-pad{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.number-btn{width:var(--tap-min);height:var(--tap-min);box-shadow:0 6px 0 var(--shadow-soft);background:#fffdf8;border-radius:24px;font-family:Fredoka,sans-serif;font-size:2rem}.sound-room{flex-direction:column;align-items:center;gap:28px;display:flex}.listen-btn{background:linear-gradient(#ffe27a,#f5c518);border-radius:32px;flex-direction:column;align-items:center;gap:4px;min-width:180px;min-height:100px;padding:16px 28px;font-size:1.2rem;display:flex;box-shadow:0 8px #b4821459}.listen-btn span{font-size:2rem}.letter-grid{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.letter-btn{width:110px;height:110px;box-shadow:0 8px 0 var(--shadow-soft);background:#fffdf8;border-radius:28px;font-family:Fredoka,sans-serif;font-size:3rem}.sound-cue{color:var(--ink-soft);margin:0;font-size:1.1rem}.animal-room{flex-direction:column;align-items:center;gap:28px;display:flex}.animal-grid{flex-wrap:wrap;justify-content:center;gap:14px;max-width:520px;display:flex}.animal-btn{width:var(--tap-min);height:var(--tap-min);box-shadow:0 8px 0 var(--shadow-soft);background:#fffdf8;border-radius:28px;font-size:2.6rem}.pattern-room{flex-direction:column;align-items:center;gap:32px;display:flex}.pattern-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.pattern-token{width:64px;height:64px;box-shadow:0 4px 0 var(--shadow-soft);background:#fffdf8e6;border-radius:18px;place-items:center;font-size:2rem;display:grid}.pattern-token.is-mystery{color:var(--ink-soft);background:#fffdf88c;border:3px dashed #1f3a4540;font-family:Fredoka,sans-serif;font-size:2.2rem}.pattern-choices{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.pattern-choice{width:var(--tap-min);height:var(--tap-min);box-shadow:0 8px 0 var(--shadow-soft);background:#fffdf8;border-radius:28px;font-size:2.4rem}.celebration{pointer-events:none;z-index:5;place-items:center;display:grid;position:absolute;inset:0}.celebration-text{box-shadow:0 10px 0 var(--shadow-soft);background:#fffdf8;border-radius:999px;margin:0;padding:18px 28px;font-family:Fredoka,sans-serif;font-size:clamp(1.6rem,6vw,2.2rem)}.celebration-burst{width:180px;height:180px;position:absolute}.spark{background:var(--sun);border-radius:50%;width:12px;height:12px;animation:.9s ease-out forwards spark;position:absolute;top:50%;left:50%}.spark-0{--a:0deg;background:#ff6b4a}.spark-1{--a:45deg;background:#f5c518}.spark-2{--a:90deg;background:#5fbf84}.spark-3{--a:135deg;background:#5eb8e0}.spark-4{--a:180deg;background:#ff8a3d}.spark-5{--a:225deg;background:#7ec8ff}.spark-6{--a:270deg;background:#ffe066}.spark-7{--a:315deg;background:#ff6b4a}.basket.is-glow{outline:4px solid #fffdf8;transform:translateY(-4px)scale(1.04)}.pattern-choice.is-hint{outline:4px solid #f5c518;transform:scale(1.06)}.hint-btn{border:2px solid var(--stroke);background:#fffdf8e6;border-radius:999px;min-height:48px;margin-top:8px;padding:0 18px;font-size:.95rem;font-weight:800}.parent-entry{top:max(10px, env(safe-area-inset-top));z-index:5;border:2px solid var(--stroke);min-height:40px;color:var(--ink-soft);background:#fffdf8e0;border-radius:999px;padding:0 14px;font-size:.85rem;font-weight:800;position:absolute;right:12px}.parent-gate{z-index:40;background:#1f3a4573;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.parent-gate-card{text-align:center;background:#fffdf8;border-radius:24px;width:min(360px,100%);padding:24px}.parent-gate-card h2{margin:0 0 8px;font-family:Fredoka,sans-serif}.parent-gate-input{border:2px solid var(--stroke);text-align:center;border-radius:14px;width:100%;margin:12px 0;padding:14px;font-family:Fredoka,sans-serif;font-size:1.4rem}.parent-gate-error{color:#c4472f;margin:0 0 8px}.parent-gate-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.parent-gate-go{min-width:140px;min-height:56px}.parent-corner{min-height:100dvh;padding:max(12px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));background:linear-gradient(#e8f4fa,#fffdf8 40%)}.parent-corner-body{max-width:520px;margin:16px auto 0}.parent-lead{color:var(--ink);font-size:1.05rem;line-height:1.45}.parent-h{margin:22px 0 8px;font-family:Fredoka,sans-serif;font-size:1.15rem}.pack-list{color:var(--ink-soft);margin:0;padding-left:18px;line-height:1.55}.pack-list-soon{opacity:.9}.parent-note{color:var(--ink-soft);background:#5eb8e02e;border-radius:16px;margin-top:24px;padding:14px 16px;font-size:.95rem;line-height:1.4}@keyframes spark{to{transform:rotate(var(--a)) translateY(-70px) scale(.4);opacity:0}}@keyframes pulse-sun{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes drift{0%{transform:translate(-20px)}to{transform:translate(40px)}}@media (width<=480px){.doors{gap:6px;padding-bottom:64px}.door{width:min(104px,30vw)}.door-label strong{font-size:.8rem}.door-label span{font-size:.65rem}}@media (prefers-reduced-motion:reduce){.sun,.cloud,.buddy,.spark{animation:none}}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--sky-top:#5eb8e0;--sky-mid:#9fd8ef;--sky-low:#d7f0fa;--grass-deep:#3d9a68;--grass:#5fbf84;--grass-light:#8fd9a8;--sun:#ffd24a;--ink:#1f3a45;--ink-soft:#45606b;--panel:#fffdf8;--stroke:#1f3a451f;--door-yellow:#f5c518;--shadow-soft:#1f3a4524;--tap-min:88px;color:var(--ink);background:var(--sky-mid);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-family:Nunito,Fredoka,sans-serif;font-weight:700;line-height:1.3}*{box-sizing:border-box}html,body,#root{min-height:100dvh;margin:0}body{touch-action:manipulation;-webkit-user-select:none;user-select:none;overflow-x:hidden}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none;padding:0}.app-shell{width:100%;min-height:100dvh;position:relative;overflow:hidden}