:root{--color-blue:#1e90ff;--color-green:#22c93e;--color-orange:#ff7a00;--color-red:#f23;--color-yellow:#fc0;--color-purple:#9b2bff;--color-beige:#d8bfa7;--color-ink:#222;--cream:#fdf6ec;--cream-deep:#f4e7d3;--text:var(--color-ink);--text-soft:#6b5b53;--surface:#fff;--shadow-soft:0 8px 24px #22222226;--shadow-strong:0 12px 32px #22222238;--font:"Fredoka", system-ui, "Segoe UI", Roboto, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{color:var(--text);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0}button{cursor:pointer;background:0 0;border:none;font-family:inherit}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.game-card{color:#fff;text-align:center;min-height:220px;box-shadow:var(--shadow-soft);border-radius:28px;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:28px 20px;text-decoration:none;transition:transform .15s,box-shadow .15s;display:flex;position:relative;overflow:hidden}.game-card:after{content:"";pointer-events:none;background:radial-gradient(circle at 25% 15%,#ffffff59,#0000 55%);position:absolute;inset:0}.game-card:hover,.game-card:focus-visible{box-shadow:var(--shadow-strong);outline:none;transform:translateY(-6px)scale(1.03)}.game-card:active{transform:translateY(-2px)scale(.99)}.game-card.game-card--selected{outline:5px solid var(--color-ink);outline-offset:4px}.game-card__icon{filter:drop-shadow(0 4px 6px #0003);font-size:72px;line-height:1;animation:3s ease-in-out infinite card-icon-bob}.game-card__title{-webkit-text-stroke:2px var(--color-ink);paint-order:stroke fill;text-shadow:0 2px 4px #2222224d;font-size:26px;font-weight:700}.game-card__description{opacity:.95;font-size:16px;font-weight:500}.game-card__badge{color:var(--text);text-transform:uppercase;letter-spacing:.5px;background:#ffffffe6;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600;position:absolute;top:14px;right:14px}.game-card--disabled{cursor:default;filter:saturate(.75);opacity:.85}.game-card--disabled:hover{box-shadow:var(--shadow-soft);transform:none}.game-card--disabled .game-card__icon{animation:none}@keyframes card-icon-bob{0%,to{transform:translateY(0)rotate(-3deg)}50%{transform:translateY(-8px)rotate(3deg)}}.home{background:radial-gradient(circle at 15% 20%, #ffcc0080, transparent 40%), radial-gradient(circle at 85% 15%, #1e90ff73, transparent 42%), radial-gradient(circle at 80% 88%, #9b2bff59, transparent 42%), radial-gradient(circle at 30% 92%, #22c93e66, transparent 45%), linear-gradient(160deg, var(--cream), var(--cream-deep));min-height:100svh;padding:48px 24px 64px;position:relative;overflow:hidden}.home__header{z-index:1;text-align:center;margin-bottom:40px;position:relative}.home__logo{font-family:var(--font);letter-spacing:.01em;flex-wrap:wrap;justify-content:center;margin:0;font-size:clamp(44px,10vw,92px);font-weight:700;line-height:1;animation:.6s cubic-bezier(.34,1.56,.64,1) both title-pop;display:flex}.home__logo-letter{-webkit-text-stroke:4px #333;paint-order:stroke fill;text-shadow:3px 5px #9aa0a659}.home__logo-letter--blue{color:var(--color-blue)}.home__logo-letter--orange{color:var(--color-orange)}.home__logo-letter--yellow{color:var(--color-yellow)}.home__logo-letter--green{color:var(--color-green)}.home__logo-letter--red{color:var(--color-red)}.home__logo-letter--purple{color:var(--color-purple)}.home__subtitle{color:var(--text-soft);margin:12px 0 0;font-size:clamp(16px,3.5vw,22px);font-weight:500}.home__grid{z-index:1;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;max-width:900px;margin:0 auto;display:grid;position:relative}.home__bubbles span{background:#ffffff80;border-radius:50%;animation:12s ease-in-out infinite bubble-float;position:absolute}.home__bubbles span:first-child{width:90px;height:90px;animation-delay:0s;top:30%;left:8%}.home__bubbles span:nth-child(2){width:140px;height:140px;animation-delay:2s;top:45%;right:10%}.home__bubbles span:nth-child(3){width:60px;height:60px;animation-delay:4s;bottom:12%;left:20%}.home__bubbles span:nth-child(4){width:110px;height:110px;animation-delay:1s;bottom:8%;right:22%}.home__bubbles span:nth-child(5){width:70px;height:70px;animation-delay:3s;top:12%;left:55%}@keyframes title-pop{0%{opacity:0;transform:scale(.7)translateY(-20px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes bubble-float{0%,to{opacity:.5;transform:translateY(0)scale(1)}50%{opacity:.8;transform:translateY(-30px)scale(1.1)}}.back-button{background:var(--surface);color:var(--color-ink);box-shadow:var(--shadow-soft);border-radius:999px;align-self:flex-start;padding:10px 20px;font-size:18px;font-weight:600;text-decoration:none;transition:transform .15s}.back-button:hover,.back-button:active{transform:scale(1.05)}.language-selector{position:relative}.language-selector__trigger,.language-selector__option{color:var(--color-ink);border-radius:999px;align-items:center;gap:8px;font-size:16px;font-weight:600;transition:background .15s,transform .15s;display:flex}.language-selector__trigger{background:var(--surface);box-shadow:var(--shadow-soft);padding:8px 14px 8px 10px}.language-selector__trigger:hover,.language-selector__trigger:active{transform:scale(1.05)}.language-selector__chevron{font-size:14px;transition:transform .15s}.language-selector__trigger[aria-expanded=true] .language-selector__chevron{transform:rotate(180deg)}.language-selector__menu{z-index:10;background:var(--surface);min-width:100%;box-shadow:var(--shadow-strong);border-radius:24px;flex-direction:column;gap:4px;padding:6px;animation:.15s ease-out language-menu-in;display:flex;position:absolute;top:calc(100% + 8px);right:0}.language-selector__option{white-space:nowrap;padding:8px 14px 8px 8px}.language-selector__option:hover,.language-selector__option:focus-visible{background:var(--cream-deep)}.language-selector__flag{border-radius:4px;flex-shrink:0;width:30px;height:20px;display:block;box-shadow:0 0 0 1px #0000001f}@keyframes language-menu-in{0%{opacity:0;transform:translateY(-6px)}}.no-voice-warning{border:2px solid var(--color-yellow);width:100%;max-width:560px;color:var(--text);text-align:center;box-shadow:var(--shadow-soft);background:#fff4d6;border-radius:20px;margin:16px 0 0;padding:10px 18px;font-size:16px;font-weight:600}.game-top-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;width:100%;display:flex}.letters{background:linear-gradient(160deg, var(--cream), var(--cream-deep));flex-direction:column;align-items:center;min-height:100svh;padding:16px 16px 32px;display:flex;position:relative}.letters__stage{aspect-ratio:3/2;background:var(--surface);width:100%;max-width:520px;max-height:42vh;box-shadow:var(--shadow-strong);border-radius:36px;justify-content:center;align-items:center;margin:16px 0 24px;transition:background .3s;display:flex;position:relative;overflow:hidden}.letters__display{color:#fff;-webkit-text-stroke:6px var(--color-ink);paint-order:stroke fill;text-shadow:0 6px 12px #22222240;font-size:clamp(120px,30vw,240px);font-weight:700;line-height:1;animation:.4s cubic-bezier(.34,1.56,.64,1) letter-pop}.letters__display--word{text-align:center;word-break:break-word;max-width:92%;font-size:clamp(44px,11vw,88px);line-height:1.05}.letters__reward{pointer-events:none;font-size:clamp(40px,10vw,72px);animation:.9s ease-out forwards reward-burst;position:absolute;top:12%;right:14%}.letters__hint{color:var(--text-soft);text-align:center;padding:0 24px;font-size:clamp(22px,5vw,34px);font-weight:600;animation:2s ease-in-out infinite hint-pulse}.letters__keys{grid-template-columns:repeat(auto-fit,minmax(56px,1fr));gap:10px;width:100%;max-width:640px;display:grid}.letters__key{aspect-ratio:1;color:#fff;-webkit-text-stroke:2px var(--color-ink);paint-order:stroke fill;text-shadow:0 2px 4px #22222240;box-shadow:var(--shadow-soft);border-radius:18px;font-size:clamp(24px,6vw,34px);font-weight:700;transition:transform .1s,box-shadow .1s}.letters__key:hover,.letters__key:focus-visible{outline:none;transform:translateY(-3px)}.letters__key:active{transform:scale(.92);box-shadow:0 2px 8px #4c1d9533}@keyframes letter-pop{0%{opacity:0;transform:scale(.3)rotate(-12deg)}60%{transform:scale(1.15)rotate(4deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes reward-burst{0%{opacity:0;transform:scale(.3)translateY(0)}30%{opacity:1;transform:scale(1.3)translateY(-10px)}to{opacity:0;transform:scale(1)translateY(-40px)}}@keyframes hint-pulse{0%,to{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}.counting{background:linear-gradient(160deg, var(--cream), var(--cream-deep));flex-direction:column;align-items:center;min-height:100svh;padding:16px 16px 32px;display:flex;position:relative}.counting__stage{background:var(--surface);width:100%;max-width:560px;min-height:42vh;box-shadow:var(--shadow-strong);border-radius:36px;flex-direction:column;justify-content:center;align-items:center;gap:12px;margin:16px 0 24px;padding:24px;transition:background .3s;display:flex;position:relative}.counting__number{color:#fff;-webkit-text-stroke:5px var(--color-ink);paint-order:stroke fill;text-shadow:0 6px 12px #22222240;font-size:clamp(72px,18vw,140px);font-weight:700;line-height:1;animation:.4s cubic-bezier(.34,1.56,.64,1) number-pop}.counting__objects{flex-wrap:wrap;justify-content:center;gap:8px;max-width:460px;display:flex}.counting__object{font-size:clamp(28px,7vw,44px);animation:.4s ease-out both object-drop}.counting__hint{color:var(--text-soft);text-align:center;font-size:clamp(22px,5vw,34px);font-weight:600;animation:2s ease-in-out infinite hint-pulse}.counting__keys{grid-template-columns:repeat(5,1fr);gap:10px;width:100%;max-width:460px;display:grid}.counting__key{aspect-ratio:1;color:#fff;-webkit-text-stroke:2px var(--color-ink);paint-order:stroke fill;text-shadow:0 2px 4px #22222240;box-shadow:var(--shadow-soft);border-radius:18px;font-size:clamp(24px,6vw,34px);font-weight:700;transition:transform .1s,box-shadow .1s}.counting__key:hover,.counting__key:focus-visible{outline:none;transform:translateY(-3px)}.counting__key:active{transform:scale(.92);box-shadow:0 2px 8px #1e40af33}@keyframes number-pop{0%{opacity:0;transform:scale(.3)rotate(-12deg)}60%{transform:scale(1.15)rotate(4deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes object-drop{0%{opacity:0;transform:translateY(-24px)scale(.3)}70%{transform:translateY(4px)scale(1.15)}to{opacity:1;transform:translateY(0)scale(1)}}.colors{background:linear-gradient(160deg, var(--cream), var(--cream-deep));flex-direction:column;align-items:center;min-height:100svh;padding:16px 16px 32px;display:flex;position:relative}.colors__stage{background:var(--surface);width:100%;max-width:560px;min-height:42vh;box-shadow:var(--shadow-strong);border:4px solid #0000000f;border-radius:36px;justify-content:center;align-items:center;margin:16px 0 24px;transition:background .35s;display:flex;position:relative}.colors__label{color:var(--text);background:#ffffffeb;border-radius:999px;padding:12px 32px;font-size:clamp(32px,8vw,56px);font-weight:700;animation:.4s cubic-bezier(.34,1.56,.64,1) label-pop;box-shadow:0 6px 16px #0003}.colors__hint{color:var(--text-soft);text-align:center;font-size:clamp(22px,5vw,34px);font-weight:600;animation:2s ease-in-out infinite hint-pulse}.colors__keys{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;width:100%;max-width:560px;display:grid}.colors__key{min-height:72px;box-shadow:var(--shadow-soft);border:3px solid #0000000f;border-radius:20px;transition:transform .1s,box-shadow .1s}.colors__key:hover,.colors__key:focus-visible{outline:none;transform:translateY(-3px)}.colors__key:active{transform:scale(.94);box-shadow:0 2px 8px #00000026}@keyframes label-pop{0%{opacity:0;transform:scale(.4)}60%{transform:scale(1.12)}to{opacity:1;transform:scale(1)}}.picture-game{background:linear-gradient(160deg, var(--cream), var(--cream-deep));flex-direction:column;align-items:center;min-height:100svh;padding:16px 16px 32px;display:flex;position:relative}.picture-game__stage{background:var(--surface);width:100%;max-width:560px;min-height:42vh;box-shadow:var(--shadow-strong);border:4px solid #0000000f;border-radius:36px;justify-content:center;align-items:center;margin:16px 0 24px;transition:background .35s;display:flex;position:relative}.picture-game__shown{flex-direction:column;align-items:center;gap:12px;animation:.4s cubic-bezier(.34,1.56,.64,1) picture-pop;display:flex}.picture-game__emoji{filter:drop-shadow(0 8px 12px #0000002e);font-size:clamp(96px,26vw,180px);line-height:1}.picture-game__label{color:var(--text);background:#ffffffeb;border-radius:999px;padding:10px 28px;font-size:clamp(28px,7vw,48px);font-weight:700;box-shadow:0 6px 16px #0003}.picture-game__hint{color:var(--text-soft);text-align:center;font-size:clamp(22px,5vw,34px);font-weight:600;animation:2s ease-in-out infinite picture-hint-pulse}.picture-game__keys{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:12px;width:100%;max-width:560px;display:grid}.picture-game__key{min-height:84px;box-shadow:var(--shadow-soft);border:3px solid #0000000f;border-radius:20px;font-size:48px;line-height:1;transition:transform .1s,box-shadow .1s}.picture-game__key:hover,.picture-game__key:focus-visible{outline:none;transform:translateY(-3px)}.picture-game__key:active{transform:scale(.94);box-shadow:0 2px 8px #00000026}@keyframes picture-pop{0%{opacity:0;transform:scale(.4)}60%{transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@keyframes picture-hint-pulse{0%,to{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}.syllables{background:linear-gradient(160deg, var(--cream), var(--cream-deep));flex-direction:column;align-items:center;min-height:100svh;padding:16px 16px 32px;display:flex;position:relative}.syllables__note{background:var(--surface);border:2px solid var(--color-blue);width:100%;max-width:640px;color:var(--text);text-align:center;box-shadow:var(--shadow-soft);border-radius:20px;margin:20px 0 0;padding:12px 18px;font-size:16px;font-weight:500;line-height:1.4}.syllables__section{width:100%;max-width:640px;margin-top:24px}.syllables__title{color:var(--text-soft);margin:0 0 12px;font-size:clamp(20px,5vw,26px);font-weight:700}.syllables__chart{flex-direction:column;gap:10px;display:flex}.syllables__row{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;display:grid}.syllables__family,.syllables__key{aspect-ratio:5/4;box-shadow:var(--shadow-soft);border-radius:16px;font-weight:700;transition:transform .1s,box-shadow .1s}.syllables__family{background:var(--surface);-webkit-text-stroke:1.5px var(--color-ink);paint-order:stroke fill;border:4px solid;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-size:clamp(20px,5vw,30px);line-height:1;display:flex}.syllables__family--long{white-space:nowrap;font-size:clamp(14px,3.8vw,24px)}.syllables__family span{font-size:clamp(12px,3vw,16px)}.syllables__key{color:#fff;-webkit-text-stroke:2px var(--color-ink);paint-order:stroke fill;text-shadow:0 2px 4px #22222240;font-size:clamp(18px,5vw,30px)}.syllables__key--active{outline:4px solid var(--color-ink);outline-offset:2px;transform:scale(1.06)}.syllables__family:hover,.syllables__family:focus-visible,.syllables__key:hover,.syllables__key:focus-visible{transform:translateY(-3px)}.syllables__family:focus-visible,.syllables__key:focus-visible{outline:4px solid var(--color-ink);outline-offset:2px}.syllables__family:active,.syllables__key:active{transform:scale(.92);box-shadow:0 2px 8px #4c1d9533}