:root{--ink:#1d2a4a;--ink2:#46557a;--sky:#bff0ff;--grass:#e8ffd6;--sun:#facc15;--coral:#ff5a5f;--blue:#3b82f6;--green:#22c55e;--violet:#7c5cff;--cell:#eef2f6;
--r:22px;--sh:0 14px 30px -12px rgba(29,42,74,.35),0 3px 8px -3px rgba(29,42,74,.18)}
html{color-scheme:light;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font:500 1.125rem/1.6 Nunito,system-ui,sans-serif;background:var(--grass);overflow-x:hidden}
::selection{background:var(--sun);color:var(--ink)}
:focus-visible{outline:4px solid var(--violet);outline-offset:3px;border-radius:12px}
h1,h2,h3{font-family:"Baloo 2",Nunito,sans-serif;font-weight:800;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(2.7rem,7.5vw,5.4rem)}h2{font-size:clamp(2rem,4.6vw,3.4rem)}
p{margin:0}a{color:inherit;text-underline-offset:.2em}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
/* top */
.hero{background:linear-gradient(180deg,var(--sky) 0%,#d6f7ee 70%,var(--grass) 100%);padding-bottom:72px;position:relative}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font:800 1.7rem "Baloo 2",sans-serif;text-decoration:none}
.brand img{width:44px;height:44px;border-radius:12px;box-shadow:var(--sh)}
.lang{display:flex;gap:6px}
.lang button{display:grid;place-items:center;background:#fff;border:0;border-radius:999px;width:44px;height:44px;padding:0;cursor:pointer;box-shadow:0 2px 6px -2px rgba(29,42,74,.3);transition:transform .15s}
.lang button:hover{transform:translateY(-2px)}
.lang button svg{width:28px;height:28px;border-radius:50%;box-shadow:0 0 0 1px rgba(29,42,74,.15)}
.lang button[aria-pressed=true]{background:var(--ink);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)}
.hero-grid{display:grid;gap:36px;align-items:center;padding-top:20px}
@media(min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:56px;padding-top:36px}}
.sub{font-size:1.3rem;color:var(--ink2);margin-top:18px;max-width:34ch}
.soon{display:inline-flex;align-items:center;gap:10px;margin-top:26px;background:var(--ink);color:#fff;border-radius:999px;padding:12px 22px;font-weight:800;box-shadow:var(--sh)}
.soon i{width:12px;height:12px;border-radius:50%;background:var(--sun);display:block}
.trust{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0;padding:0;list-style:none}
.trust li{background:#fff;border-radius:999px;padding:6px 16px;font-weight:700;font-size:1rem;box-shadow:0 2px 6px -2px rgba(29,42,74,.25);display:flex;gap:8px;align-items:center}
.trust svg{width:18px;height:18px;flex:none}
/* play board */
.play{position:relative}
.board{background:#fff;border-radius:30px;padding:14px;box-shadow:var(--sh);max-width:460px;margin:0 auto;transform:rotate(1.2deg)}
.board svg{display:block;width:100%;height:auto;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
.cell{fill:var(--cell)}
.pathline{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:44;opacity:.9}
.disc{filter:drop-shadow(0 2px 3px rgba(29,42,74,.3))}
.fig{font-size:46px;text-anchor:middle;dominant-baseline:central;pointer-events:none;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.done .disc{animation:hop .6s cubic-bezier(.16,1,.3,1) both}
.done .disc:nth-of-type(2n){animation-delay:.08s}
@keyframes hop{40%{transform:translateY(-14px)}}
.hint{text-align:center;margin:16px auto 0;max-width:36ch;font-weight:700;color:var(--ink2);min-height:3.2em}
.hint.win{color:var(--ink);font:800 1.5rem/1.2 "Baloo 2",sans-serif}
.again{display:block;margin:6px auto 0;font:800 1rem Nunito,sans-serif;background:var(--sun);color:var(--ink);border:0;border-radius:999px;padding:10px 22px;min-height:44px;cursor:pointer;box-shadow:0 3px 0 rgba(29,42,74,.18)}
.again:active{transform:translateY(2px);box-shadow:none}
.sticker{position:absolute;width:76px;height:76px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:42px;box-shadow:var(--sh);pointer-events:none}
.s1{left:-6px;top:-22px;transform:rotate(-14deg)}.s2{right:-6px;top:-22px;transform:rotate(12deg)}
@media(max-width:560px){.sticker{width:56px;height:56px;font-size:30px}}
/* sections */
section{padding:84px 0}
.phones{display:grid;gap:48px;align-items:center}
@media(min-width:900px){.phones{grid-template-columns:1fr 1.2fr;gap:64px}}
.phones h2{margin-bottom:22px}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.steps li{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:center;font-weight:700;font-size:1.25rem}
.steps b{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font:800 1.5rem "Baloo 2",sans-serif;color:#fff;box-shadow:var(--sh)}
.steps li:nth-child(1) b{background:var(--coral)}.steps li:nth-child(2) b{background:var(--blue)}.steps li:nth-child(3) b{background:#15803d}
.shots{display:flex;justify-content:center;gap:0;align-items:flex-start}
.shots img{width:min(31%,230px);height:auto;border-radius:26px;border:6px solid #fff;box-shadow:var(--sh);background:#fff}
.shots img:nth-child(1){transform:rotate(-5deg) translateY(24px);margin-right:-18px}
.shots img:nth-child(2){transform:translateY(-8px);z-index:2}
.shots img:nth-child(3){transform:rotate(5deg) translateY(24px);margin-left:-18px}
.worlds{padding:0}
.world{padding:56px 0}
.world .wrap{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between}
.world h3{font-size:clamp(2rem,5vw,3.6rem)}
.world small{display:block;font:700 1rem Nunito,sans-serif;opacity:.8;margin-top:6px}
.cast{display:flex;gap:10px;flex-wrap:wrap}
.pair{display:flex;align-items:center;background:#fff;border-radius:999px;padding:6px 14px;box-shadow:var(--sh);font-size:1.9rem;gap:6px;color:var(--ink)}
.pair em{width:22px;height:5px;border-radius:3px;background:currentColor;display:block}
.w1{background:linear-gradient(120deg,#bff0ff,#e8ffd6)}
.w2{background:linear-gradient(120deg,#b9e6c9,#f1e3c6)}
.w3{background:linear-gradient(120deg,#9be3ff,#e0f7ff)}
.w4{background:linear-gradient(120deg,#d9e8ff,#fff)}
.w5{background:linear-gradient(120deg,#2b1f5c,#5b3fa8);color:#fff}
.worlds h2{padding:0 20px;text-align:center}
.worldhead{padding:84px 0 44px;background:var(--grass)}
/* parents */
.parents{background:var(--sun)}
.pgrid{display:grid;gap:44px;align-items:start}
@media(min-width:900px){.pgrid{grid-template-columns:1fr 1fr}}
.checks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:center;font-weight:800;font-size:1.2rem}
.checks svg{width:32px;height:32px;flex:none}
.gate{background:#fff;border-radius:28px;padding:28px;box-shadow:var(--sh)}
.gate h3{font-size:1.7rem;margin-bottom:6px}
.gate .q{font:800 2.4rem "Baloo 2",sans-serif;margin:14px 0}
.opts{display:flex;gap:12px;flex-wrap:wrap}
.opts button{font:800 1.5rem "Baloo 2",sans-serif;width:76px;height:64px;border-radius:20px;border:0;background:var(--cell);color:var(--ink);cursor:pointer;transition:transform .15s,background .15s}
.opts button:hover{transform:translateY(-3px);background:#dbe5f0}
.opts button.ok{background:var(--green);color:#fff}.opts button.no{background:var(--coral);color:#fff}
.gmsg{margin-top:16px;font-weight:700;min-height:3.2em}
.gate-link{display:inline-block;margin-top:6px;font-weight:800}
footer{background:var(--ink);color:#d8e0f5;padding:44px 0 56px;font-size:1rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
footer a{color:#fff;font-weight:800}
footer nav{display:flex;gap:22px;flex-wrap:wrap}