@font-face{font-family:Fredoka;src:url(/fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-display:swap} @font-face{font-family:Nunito;src:url(/fonts/nunito.woff2) format("woff2");font-weight:200 1000;font-display:swap} :root{--ink:#2D3142;--soft:#6B7080;--sky:#8FD3FF;--cream:#FFF4DC;--good:#43C06B;--blue:#3D7BFF;--orange:#FF8A3D;--star:#FFC53D; --card:0 3px 0 rgba(45,49,66,.05),0 12px 28px rgba(45,49,66,.09);--spring:cubic-bezier(.34,1.56,.64,1);--font:Fredoka,Nunito,system-ui,sans-serif;--w:600} html.nunito{--font:Nunito,system-ui,sans-serif;--w:800} html.sys{--font:Nunito,"Segoe UI",system-ui,-apple-system,"Noto Sans",sans-serif;--w:700} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;font-family:var(--font);font-weight:500;color:var(--ink);line-height:1.5;background:var(--cream) linear-gradient(180deg,#8FD3FF 0,#BFE6FF 380px,#FFF4DC 980px) no-repeat;min-height:100vh;overflow-x:hidden} a{color:inherit} img{max-width:100%} h1,h2,h3{font-weight:700;line-height:1.12;margin:0;letter-spacing:-.01em} html.nunito h1,html.nunito h2,html.nunito h3{font-weight:900} .wrap{max-width:1080px;margin:0 auto;padding:0 16px} header.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0} .logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:22px;background:#fff;border-radius:999px;padding:5px 16px 5px 6px;box-shadow:var(--card)} .logo img{width:40px;height:40px} .logo .lt{display:flex;flex-direction:column;line-height:1.05} .logo .lt b{font-size:20px;font-weight:700;letter-spacing:-.01em} .logo .lt small{font-size:12px;font-weight:var(--w);color:var(--blue);letter-spacing:.01em;margin-top:2px} .langs{position:relative} .langs summary{list-style:none;cursor:pointer;background:#fff;border-radius:999px;padding:10px 16px;font-weight:var(--w);box-shadow:var(--card);display:flex;gap:6px;align-items:center;user-select:none} .langs summary::-webkit-details-marker{display:none} .langs summary::after{content:"";width:8px;height:8px;border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translateY(-3px);margin-inline-start:4px} .langs ul{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:9;background:#fff;border-radius:22px;box-shadow:0 18px 40px rgba(45,49,66,.18);list-style:none;margin:0;padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:2px;width:min(320px,calc(100vw - 32px))} .langs li a{display:block;padding:9px 12px;border-radius:14px;text-decoration:none;font-weight:600} .langs li a:hover,.langs li a[aria-current]{background:#EEF4FF} .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:0 28px;border-radius:999px;font:inherit;font-weight:700;font-size:20px;text-decoration:none;color:#fff;background:var(--good);box-shadow:0 6px 0 #2F9A52;transition:transform .35s var(--spring),box-shadow .2s;border:0;cursor:pointer;white-space:nowrap} .btn:hover{transform:translateY(-2px) scale(1.03)} .btn:active{transform:translateY(4px) scale(.98);box-shadow:0 2px 0 #2F9A52;transition-duration:.08s} .btn.blue{background:var(--blue);box-shadow:0 6px 0 #2C5FD0}.btn.blue:active{box-shadow:0 2px 0 #2C5FD0} .btn.white{background:#fff;color:var(--ink);box-shadow:0 6px 0 rgba(45,49,66,.16)} .store{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 20px 0 16px;border-radius:16px;background:#1d1f27;color:#fff;text-decoration:none;box-shadow:0 5px 0 #000;transition:transform .35s var(--spring)} .store:hover{transform:translateY(-2px) scale(1.03)}.store:active{transform:translateY(3px)} .store svg{width:26px;height:26px;fill:#fff} .store small{display:block;font-size:11px;opacity:.85;line-height:1.1;font-weight:500} .store b{display:block;font-size:19px;line-height:1.1;font-family:Fredoka,Nunito,system-ui,sans-serif;font-weight:600} .row{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .center{justify-content:center;text-align:center} .hero{text-align:center;padding:18px 0 8px;position:relative} .hero .stage{position:relative;width:min(340px,86vw);height:190px;margin:0 auto} .hero .stage img{position:absolute;filter:drop-shadow(0 10px 12px rgba(45,49,66,.18))} .hero .stage .lion{width:170px;height:170px;left:50%;top:6px;margin-left:-85px;animation:bob 2.6s ease-in-out infinite} .hero .stage .f1{width:64px;height:64px;left:0;top:70px;animation:bob 2.1s ease-in-out infinite .3s} .hero .stage .f2{width:58px;height:58px;right:4px;top:28px;animation:bob 2.4s ease-in-out infinite .7s} .hero .stage .f3{width:52px;height:52px;right:26px;top:122px;animation:bob 1.9s ease-in-out infinite .1s} .hero .stage .f4{width:50px;height:50px;left:30px;top:8px;animation:bob 2.3s ease-in-out infinite .5s} .hero h1{font-size:clamp(38px,9vw,68px);margin:6px 0 12px;text-shadow:0 3px 0 rgba(255,255,255,.6)} .lead{font-size:clamp(17px,3.6vw,21px);max-width:640px;margin:0 auto 16px;color:#3B4054} .badges{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;background:rgba(255,255,255,.75);border-radius:999px;padding:8px 18px;font-weight:var(--w);font-size:15px;margin-bottom:20px} .hero .row{justify-content:center} .stores{margin-top:16px} section.card,.card{background:#fff;border-radius:30px;padding:22px 18px;margin:22px 0;box-shadow:var(--card)} .sec-h{display:flex;align-items:center;gap:12px;margin-bottom:6px} .sec-h img{width:52px;height:52px} .sec-h h2{font-size:clamp(26px,5.4vw,36px)} .sub{color:var(--soft);margin:0 0 16px;font-size:17px} .banner{position:relative;overflow:hidden;border-radius:32px;padding:22px 18px;margin:22px 0;color:#fff;box-shadow:var(--card);display:grid;gap:14px} .banner h2{font-size:clamp(30px,6.4vw,46px);text-shadow:0 3px 0 rgba(0,0,0,.12)} .banner p{margin:0;font-size:18px;font-weight:var(--w);text-shadow:0 1px 0 rgba(0,0,0,.12);max-width:560px} .banner .pic{position:absolute;top:14px;inset-inline-end:12px;width:92px;height:92px;animation:bob 2.5s ease-in-out infinite;filter:drop-shadow(0 10px 10px rgba(0,0,0,.18))} .banner h2{padding-inline-end:100px;min-height:100px;display:flex;align-items:center} .banner .head{display:flex;align-items:center;gap:14px} .banner .body{display:grid;gap:14px} .island{background:linear-gradient(115deg,#36B9F2 0%,#6CD06A 48%,#E3D84C 100%)} .snake{background:linear-gradient(120deg,#2FAE55 0%,#5BCB4E 50%,#B6E35A 100%)} .lands{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px} .land{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.92);color:var(--ink);border-radius:20px;padding:8px 12px 8px 8px;font-weight:var(--w);position:relative;font-size:15px;line-height:1.2} .land img{width:44px;height:44px;flex:none} .land .lock{position:absolute;inset-inline-end:-4px;top:-4px} .food{display:flex;gap:6px;flex-wrap:wrap} .food img{width:46px;height:46px;background:rgba(255,255,255,.9);border-radius:50%;padding:7px;animation:pop 2.4s var(--spring) infinite} .food img:nth-child(2){animation-delay:.3s}.food img:nth-child(3){animation-delay:.6s}.food img:nth-child(4){animation-delay:.9s}.food img:nth-child(5){animation-delay:1.2s}.food img:nth-child(6){animation-delay:1.5s} .grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .tile{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;background:#fff;border-radius:26px;padding:10px 10px 14px;box-shadow:var(--card);transition:transform .4s var(--spring)} .tile:hover{transform:translateY(-4px) scale(1.03)} .tile:active{transform:scale(.97);transition-duration:.08s} .tile .pad{width:100%;aspect-ratio:1.15;border-radius:20px;display:grid;place-items:center;margin-bottom:10px} .tile .pad img{width:62%;height:auto;filter:drop-shadow(0 8px 8px rgba(45,49,66,.16))} .tile:hover .pad img{animation:wiggle .6s ease-in-out} .tile h3{font-size:20px} .tile .meta{color:var(--soft);font-size:14px;font-weight:var(--w);margin-top:2px} .lock{width:30px;height:30px;padding:6px;background:#fff;border-radius:50%;fill:#8A90A2;stroke:#8A90A2;box-shadow:0 3px 8px rgba(45,49,66,.18)} .tile .lock{position:absolute;top:10px;inset-inline-end:10px} .game{color:#fff;padding:12px 12px 16px;text-shadow:0 1px 0 rgba(0,0,0,.12)} .game .disc{width:92px;height:92px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;margin:4px 0 10px;box-shadow:0 6px 14px rgba(0,0,0,.12)} .game .disc img{width:64px;height:64px} .game h3{font-size:19px}.game .meta{color:#fff;opacity:.95} .chip{display:inline-block;background:#fff;color:var(--good);border-radius:999px;padding:2px 10px;font-size:13px;font-weight:700;margin-top:8px;text-shadow:none} .mini{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .mini a{display:flex;align-items:center;gap:10px;background:#F4F7FD;border-radius:20px;padding:8px 12px 8px 8px;text-decoration:none;transition:transform .35s var(--spring)} .mini a:hover{transform:scale(1.04)} .mini img{width:44px;height:44px;flex:none} .mini b{display:block;line-height:1.15}.mini small{color:var(--soft);font-weight:var(--w)} .parents ul{list-style:none;margin:0;padding:0;display:grid;gap:12px} .parents li{display:flex;gap:12px;align-items:flex-start;font-size:17px} .parents li svg{flex:none;width:30px;height:30px;padding:4px;border-radius:50%;background:var(--good);stroke:#fff} .parents li.soon svg{background:var(--star)} .thero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 0 4px} .thero .big{width:150px;height:150px;border-radius:44px;display:grid;place-items:center;box-shadow:var(--card);margin-bottom:14px} .thero .big img,.thero .big>*{width:104px;height:104px;animation:bob 2.6s ease-in-out infinite} .thero h1{font-size:clamp(32px,7.4vw,54px);margin-bottom:10px} .crumbs{font-size:15px;font-weight:var(--w);margin:4px 0 0} .crumbs a{color:var(--blue);text-decoration:none} .words{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(148px,1fr))} .word{position:relative;display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:24px;padding:8px 8px 12px;box-shadow:var(--card);border:0;font:inherit;color:inherit;cursor:pointer;transition:transform .4s var(--spring);text-align:center} .word:hover{transform:translateY(-3px) scale(1.03)} .word:active{transform:scale(.95);transition-duration:.08s} .word .pad{width:100%;aspect-ratio:1.1;border-radius:18px;display:grid;place-items:center;margin-bottom:8px} .word .pad img{width:66%;height:auto;filter:drop-shadow(0 6px 6px rgba(45,49,66,.15))} .word .en{font-size:21px;font-weight:700;font-family:Fredoka,Nunito,system-ui,sans-serif;line-height:1.15} .word .tr{font-size:15px;color:var(--soft);font-weight:var(--w);margin-top:2px} .word .spk{position:absolute;top:12px;inset-inline-end:12px;width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 3px 8px rgba(45,49,66,.16)} .word .spk svg{width:18px;height:18px;fill:var(--blue);stroke:var(--blue)} .word.playing{animation:boing .6s var(--spring)} .word.playing .spk{background:var(--blue)}.word.playing .spk svg{fill:#fff;stroke:#fff} .swatch{width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.55),transparent 42%),var(--c);box-shadow:inset 0 -8px 0 rgba(0,0,0,.12),0 8px 12px rgba(45,49,66,.15)} .num{font-family:Fredoka,Nunito,sans-serif;font-weight:700;font-size:64px;color:var(--c);text-shadow:0 4px 0 rgba(45,49,66,.12);line-height:1} .letter{font-size:56px} .shape{width:62%;height:auto;fill:var(--c);stroke:var(--c);stroke-width:4;filter:drop-shadow(0 6px 6px rgba(45,49,66,.15))} .lockcard{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;border-radius:24px;padding:16px;background:repeating-linear-gradient(135deg,#FFF7E0 0 14px,#FFF1CC 14px 28px);border:3px dashed #FFC53D} .lockcard .lock{width:52px;height:52px;padding:11px} .lockcard b{font-size:19px}.lockcard p{margin:0;color:var(--soft);font-size:14px} .ghost{filter:blur(5px) grayscale(.4);opacity:.6;pointer-events:none} .ghost .spk{display:none} .gh{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 0} .gh .disc{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--card);margin-bottom:14px} .gh .disc img{width:100px;height:100px;animation:bob 2.6s ease-in-out infinite} .gh h1{font-size:clamp(34px,7.6vw,56px)} .gh .hint{font-size:20px;font-weight:var(--w);color:var(--soft);margin:6px 0 10px} .say{font-size:20px;font-weight:var(--w);margin:0;display:flex;gap:12px;align-items:flex-start} .say img{width:56px;height:56px;flex:none} .skills{display:flex;flex-wrap:wrap;gap:8px} .skills span{background:#EEF4FF;color:var(--blue);border-radius:999px;padding:6px 14px;font-weight:700} .prose p{font-size:17px;margin:0 0 10px} .card.cta{text-align:center;background:linear-gradient(135deg,#FFF1C2,#FFD6E8)} .cta h2{font-size:clamp(24px,5vw,34px);margin-bottom:12px} footer{padding:26px 0 40px;text-align:center;color:var(--soft);font-size:14px} footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-bottom:12px} footer nav a{text-decoration:none;font-weight:600} footer .fl{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;margin-bottom:10px} footer .fl a{text-decoration:none} [dir=rtl] .langs ul{inset-inline-end:auto;inset-inline-start:0} @keyframes bob{0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}} @keyframes pop{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.18) rotate(-6deg)}90%{transform:scale(.94)}} @keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}} @keyframes boing{0%{transform:scale(1)}35%{transform:scale(1.08)}70%{transform:scale(.97)}100%{transform:scale(1)}} @media (min-width:760px){ section.card,.card{padding:30px 32px} .banner{padding:32px 36px;grid-template-columns:auto 1fr;align-items:center} .banner .pic{position:static;width:170px;height:170px} .banner h2{padding:0;min-height:0} .banner .body{display:grid;gap:14px} .hero{padding-top:30px} .hero .stage{height:230px;width:420px} .hero .stage .lion{width:210px;height:210px;margin-left:-105px} .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))} .words{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))} } @media (max-width:440px){.store{padding:0 14px 0 12px;min-height:52px;gap:8px}.store b{font-size:17px}.row.stores{gap:10px}.hero .btn{padding:0 22px;font-size:18px}.hero .row{gap:10px}} .say .spk{flex:none;width:48px;height:48px;border-radius:50%;border:0;background:var(--blue);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 0 #2C5FD0;transition:transform .3s var(--spring)} .say .spk:active{transform:translateY(3px)}.say .spk svg{width:24px;height:24px;fill:#fff;stroke:#fff}.say .spk.playing{animation:boing .6s var(--spring)} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}