:root{--ink:#fff;--muted:#c9c8ee;--panel:rgba(28,22,79,.82);--purple:#7759ff;--pink:#ff65c3;--mint:#62f2d1;--yellow:#ffd760}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;font-family:"Trebuchet MS",system-ui,sans-serif;color:var(--ink);background:#100b36;overscroll-behavior:none}
body{min-height:100vh;background:radial-gradient(circle at 18% 15%,#442171 0,transparent 27%),radial-gradient(circle at 82% 5%,#164f78 0,transparent 24%),linear-gradient(160deg,#100b36,#17104a 56%,#092d4a);overflow-x:hidden}
button,a{font:inherit}.space,.space:before,.space:after{position:fixed;inset:0;pointer-events:none;z-index:0}.space{background-image:radial-gradient(#fff 1.2px,transparent 1.2px);background-size:47px 47px;opacity:.36}.space:before,.space:after{content:"";background-image:radial-gradient(#83ffe3 1.5px,transparent 1.5px);background-size:83px 83px;animation:drift 16s linear infinite}.space:after{background-size:127px 127px;animation-duration:25s;opacity:.7}@keyframes drift{to{transform:translateY(83px)}}
.topbar{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1100px;margin:auto;padding:14px 16px}.home,.score,.round-button,.setting-button{min-height:52px;border:2px solid rgba(255,255,255,.2);background:rgba(16,11,54,.72);color:#fff;border-radius:18px;text-decoration:none;display:flex;align-items:center;justify-content:center;font-weight:900;box-shadow:0 8px 22px rgba(0,0,0,.2)}.home{gap:7px;padding:0 16px;font-size:18px}.home:first-letter{font-size:31px}.brand{display:flex;align-items:center;gap:8px;font-size:clamp(20px,4vw,29px);text-shadow:0 3px 0 #593cae;white-space:nowrap}.planet{font-size:35px;filter:drop-shadow(0 5px 7px #0008)}.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}.setting-button{gap:7px;padding:0 13px;cursor:pointer}.setting-button:active{transform:scale(.96)}.setting-button span{font-size:24px}.language-button{min-width:52px;padding:0}.score{padding:0 14px;gap:7px;font-size:22px}.score span{font-size:26px}
main{position:relative;z-index:2;max-width:980px;margin:auto;padding:4px 16px 42px}.screen{display:none}.screen.active{display:block;animation:appear .35s ease}@keyframes appear{from{opacity:0;transform:translateY(12px)}}
.welcome{display:flex;align-items:center;gap:20px;padding:clamp(20px,5vw,38px);border:2px solid #ffffff24;background:linear-gradient(120deg,#39247ecc,#173e6dcc);border-radius:30px;box-shadow:0 22px 50px #05031d88,inset 0 1px #ffffff2b}.alien{font-size:clamp(70px,15vw,122px);filter:drop-shadow(0 12px 10px #0006);animation:float 2.7s ease-in-out infinite}@keyframes float{50%{transform:translateY(-9px) rotate(3deg)}}.eyebrow{margin:0 0 5px;color:var(--mint);font-size:12px;font-weight:1000;letter-spacing:1.7px}.welcome h1,.play-head h2{margin:0;font-size:clamp(31px,6vw,54px);line-height:1}.welcome p:last-child{margin:10px 0 0;color:var(--muted);font-size:clamp(16px,3vw,20px)}
.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}.game-card{position:relative;overflow:hidden;min-height:155px;padding:20px;border:0;border-radius:26px;color:#fff;text-align:left;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:17px;cursor:pointer;box-shadow:0 14px 24px #05031d66,inset 0 2px #ffffff42;transition:.15s transform}.game-card:active{transform:scale(.97)}.game-card:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-35px;top:-45px;background:#ffffff18}.game-card.shapes{background:linear-gradient(135deg,#6849f5,#9d54ff)}.game-card.memory{background:linear-gradient(135deg,#e14f9e,#ff7474)}.game-card.counting{background:linear-gradient(135deg,#087ba8,#20bdad)}.game-card.pattern{background:linear-gradient(135deg,#e28c21,#eebc35)}.game-card.story{grid-column:1/-1;background:linear-gradient(135deg,#263987,#7a54bd,#da71ae);min-height:140px}.game-icon{font-size:60px;filter:drop-shadow(0 7px 5px #0004)}.game-card b{display:block;font-size:clamp(20px,3.5vw,29px)}.game-card small{display:block;margin-top:4px;font-size:15px;opacity:.88}.game-card em{position:absolute;bottom:13px;right:15px;background:#fff;color:#211750;padding:7px 12px;border-radius:13px;font-style:normal;font-weight:1000}.parent-note{text-align:center;color:var(--muted);margin:20px 0 0}
.play-head{display:grid;grid-template-columns:58px 1fr 58px;align-items:center;gap:14px;margin:8px 0 15px}.round-button{width:56px;border-radius:18px;font-size:27px;cursor:pointer}.play-head h2{font-size:clamp(28px,5vw,43px)}.instruction{text-align:center;color:#fff;font-size:clamp(19px,4vw,27px);font-weight:900;margin:18px 0}.game-area{min-height:430px;border:2px solid #ffffff2a;background:var(--panel);border-radius:30px;padding:clamp(16px,4vw,30px);box-shadow:0 24px 55px #05031d88;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden}.new-round{display:block;margin:18px auto 0;border:0;border-radius:18px;padding:15px 28px;background:linear-gradient(135deg,var(--mint),#7eff92);color:#12382e;font-size:22px;font-weight:1000;box-shadow:0 10px 0 #25836e;cursor:pointer}.new-round:active{transform:translateY(5px);box-shadow:0 5px 0 #25836e}.hidden{display:none!important}
.shape-board{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:26px}.pieces,.targets{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;align-content:center}.shape{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;position:relative}.shape span{display:block;width:72%;height:72%;filter:drop-shadow(0 8px 5px #0005)}.shape.selected{background:#ffffff22;border-radius:24px;outline:5px solid #fff}.shape.done{opacity:.15;pointer-events:none;transform:scale(.7)}.shape[data-kind="circle"] span{border-radius:50%}.shape[data-kind="square"] span{border-radius:14%}.shape[data-kind="triangle"] span{clip-path:polygon(50% 0,100% 100%,0 100%)}.shape[data-kind="star"] span{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 35%)}.target{border:5px dashed #ffffff74;border-radius:24px}.target.matched{border-color:var(--mint);background:#62f2d12b;animation:pop .35s ease}
.memory-board{width:min(100%,650px);display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.memory-card{aspect-ratio:.82;border:0;border-radius:20px;background:linear-gradient(145deg,#7960fb,#4d35bf);box-shadow:0 8px 0 #26196e;color:transparent;font-size:clamp(32px,8vw,58px);cursor:pointer;transform-style:preserve-3d}.memory-card:before{content:"?";color:#d7d0ff;font-weight:1000}.memory-card.open,.memory-card.matched{background:#fff;color:#27204f;transform:rotateY(180deg);box-shadow:0 5px 0 #bcb4e8}.memory-card.open:before,.memory-card.matched:before{display:none}.memory-card.matched{background:#bdffda;animation:pop .35s ease}
.count-stars{display:flex;justify-content:center;flex-wrap:wrap;max-width:600px;gap:13px;margin-bottom:30px}.count-stars span{font-size:clamp(45px,10vw,78px);animation:pop .4s both;filter:drop-shadow(0 6px 4px #0005)}.answers,.pattern-answers{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}.answer{width:90px;height:82px;border:0;border-radius:24px;background:#fff;color:#302469;font-size:40px;font-weight:1000;box-shadow:0 9px 0 #aaa0e8;cursor:pointer}.answer:active{transform:translateY(5px);box-shadow:0 4px 0 #aaa0e8}.answer.wrong{animation:shake .35s;background:#ffd5d5}.answer.right{background:#aaffcd;animation:pop .35s}
.pattern-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:32px}.pattern-item,.pattern-question{width:clamp(63px,14vw,100px);height:clamp(63px,14vw,100px);display:flex;align-items:center;justify-content:center;background:#ffffff17;border-radius:22px;font-size:clamp(37px,8vw,65px)}.pattern-question{border:5px dashed var(--yellow);color:var(--yellow);font-weight:1000}.pattern-answers .answer{font-size:48px}
.story-book{width:min(100%,780px);overflow:hidden;border-radius:28px;background:#fff;color:#302469;box-shadow:0 18px 38px #05031d70}.story-picture-wrap{position:relative;overflow:hidden;aspect-ratio:16/8}.story-picture{width:100%;height:100%;display:block;object-fit:cover;animation:story-drift 14s ease-in-out infinite alternate}.story-progress{position:absolute;left:16px;bottom:13px;padding:7px 11px;border-radius:18px;background:#19113cc9;color:#fff;letter-spacing:5px;font-size:13px}.story-page{position:relative;padding:clamp(18px,4vw,30px);transform-origin:right center}.story-text{margin:0;font-size:clamp(19px,3.6vw,27px);line-height:1.48;font-weight:800}.story-listen{float:right;margin:0 0 10px 14px;border:0;border-radius:16px;padding:10px 14px;background:#eee9ff;color:#40317d;font-weight:1000;cursor:pointer}.story-question{clear:both;margin-top:22px;padding-top:18px;border-top:3px dashed #d8cef8;text-align:center}.story-question b{display:block;margin-bottom:14px;font-size:clamp(19px,3.5vw,25px)}.story-choices{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.story-choice{flex:1;min-width:180px;border:0;border-radius:18px;padding:15px;background:linear-gradient(135deg,#7859ef,#aa66df);color:#fff;font-size:18px;font-weight:1000;box-shadow:0 7px 0 #4a3296;cursor:pointer}.story-choice:active{transform:translateY(4px);box-shadow:0 3px 0 #4a3296}.story-choice:disabled{opacity:.55}.story-choice.selected:disabled{opacity:1;outline:4px solid #8ff4ce;outline-offset:3px}.story-response{margin:18px 0 0;padding:14px;border-radius:16px;background:#d9fff3;color:#176452;font-size:18px;font-weight:900;animation:pop .4s ease}.story-next{display:block;width:100%;min-height:72px;margin-top:18px;border:0;border-radius:22px;padding:15px 22px;background:#ded8ef;color:#71688f;font-size:clamp(20px,4vw,27px);font-weight:1000;box-shadow:0 7px 0 #b7aece;cursor:wait;transition:.2s transform,.2s background,.2s box-shadow}.story-next.ready{background:linear-gradient(135deg,#19a98f,#5fd77f);color:#fff;box-shadow:0 8px 0 #087863;cursor:pointer;animation:page-ready 1.15s ease-in-out infinite}.story-next.ready:active{transform:translateY(5px);box-shadow:0 3px 0 #087863}.story-next:focus-visible{outline:5px solid #ffc74f;outline-offset:4px}.story-book.page-turning .story-page{animation:story-page-turn .42s ease-in forwards}.story-book.page-turning .story-picture{animation:story-picture-turn .42s ease-in forwards}.story-ending{text-align:center;padding:10px}.story-ending span{display:block;font-size:76px;animation:float 2.5s ease-in-out infinite}.story-ending h3{margin:5px 0 10px;font-size:clamp(30px,7vw,48px)}.story-ending p{margin:0;font-size:clamp(19px,3.5vw,26px);line-height:1.45}.story-rest{display:inline-block;margin-top:18px;padding:10px 18px;border-radius:18px;background:#e8e2ff;font-weight:1000}@keyframes story-drift{to{transform:scale(1.055) translateX(-1.2%)}}@keyframes page-ready{50%{transform:scale(1.025);filter:brightness(1.08)}}@keyframes story-page-turn{to{transform:perspective(800px) rotateY(-18deg) translateX(-45px);opacity:0}}@keyframes story-picture-turn{to{transform:scale(1.08);filter:brightness(.72);opacity:.55}}
.story-library{width:min(100%,1000px)}.story-library-heading{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:22px;text-align:center}.story-library-heading span{font-size:52px}.story-library-heading h3{margin:0;font-size:clamp(27px,5vw,42px)}.story-library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.story-pick{overflow:hidden;padding:0;border:3px solid #ffffff38;border-radius:25px;background:#fff;color:#302469;text-align:left;cursor:pointer;box-shadow:0 13px 25px #05031d61;transition:.18s transform,.18s box-shadow}.story-pick:hover{transform:translateY(-4px);box-shadow:0 18px 32px #05031d78}.story-pick:active{transform:scale(.98)}.story-pick img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.story-pick>span{display:block;position:relative;min-height:155px;padding:18px 18px 20px}.story-pick em{position:absolute;right:15px;top:-34px;display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:#fff;font-size:32px;font-style:normal;box-shadow:0 8px 18px #3024693d}.story-pick b{display:block;padding-right:48px;font-size:clamp(20px,2.7vw,27px);line-height:1.08}.story-pick small{display:block;margin-top:10px;color:#655a89;font-size:15px;line-height:1.35}.story-another{display:block;margin:20px auto 0;border:0;border-radius:16px;padding:12px 18px;background:#ede8ff;color:#48358b;font-weight:1000;cursor:pointer}
.encouragement{height:0;position:relative;z-index:5;text-align:center;pointer-events:none;opacity:0;font-size:clamp(18px,4vw,25px);font-weight:1000;color:#2b1c61}.encouragement.show{animation:encourage .9s ease both}.encouragement.show:before{content:"";position:absolute;inset:-9px 50%;width:min(340px,84vw);transform:translateX(-50%);z-index:-1;background:#fff;border:4px solid var(--mint);border-radius:22px;box-shadow:0 9px 22px #0006}
.celebration{position:fixed;z-index:20;inset:0;display:none;place-items:center;background:#160b46c7;backdrop-filter:blur(7px);overflow:hidden}.celebration.show{display:grid}.reward{position:relative;z-index:3;text-align:center;background:linear-gradient(145deg,#fff,#d9fff3);color:#2d2363;border:7px solid #fff;border-radius:38px;padding:28px 60px 34px;box-shadow:0 0 0 8px #62f2d166,0 25px 70px #0008;animation:reward .6s cubic-bezier(.2,1.5,.4,1)}.reward span{display:block;font-size:96px;animation:reward-star .7s .25s ease both}.reward b{display:block;font-size:clamp(42px,10vw,64px);line-height:1}.reward small{display:block;margin-top:8px;font-size:clamp(19px,4vw,27px);font-weight:900}.reward em{position:absolute;right:-35px;bottom:-34px;font-size:74px;font-style:normal;animation:alien-wave .55s ease-in-out infinite alternate;transform-origin:bottom}.confetti,.confetti:before,.confetti:after{position:absolute;inset:-120px 0 0;content:"";background-image:radial-gradient(circle,var(--yellow) 0 6px,transparent 7px),radial-gradient(circle,var(--pink) 0 5px,transparent 6px),radial-gradient(circle,var(--mint) 0 5px,transparent 6px);background-size:110px 130px,150px 100px,170px 150px;animation:confetti 1.3s linear infinite}.celebration-orbit{position:absolute;width:min(720px,92vw);height:min(720px,92vw);animation:orbit 7s linear infinite}.celebration-orbit i{position:absolute;font-style:normal;font-size:55px;filter:drop-shadow(0 8px 5px #0007)}.celebration-orbit i:nth-child(1){left:5%;top:22%}.celebration-orbit i:nth-child(2){right:5%;top:18%;transform:rotate(45deg)}.celebration-orbit i:nth-child(3){left:12%;bottom:14%}.celebration-orbit i:nth-child(4){right:10%;bottom:10%}.spark{position:absolute;z-index:4;left:50%;bottom:22%;font-style:normal;font-size:28px;pointer-events:none;animation:spark 1.45s ease-out forwards}.score-pop{animation:score-pop .65s cubic-bezier(.2,1.7,.4,1)}
@keyframes confetti{to{transform:translateY(130px) rotate(8deg)}}@keyframes reward{from{transform:scale(.2) rotate(-12deg)}}@keyframes reward-star{from{transform:scale(.2) rotate(-180deg)}70%{transform:scale(1.35) rotate(15deg)}}@keyframes alien-wave{to{transform:rotate(13deg) translateY(-7px)}}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes spark{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}@keyframes score-pop{45%{transform:scale(1.5) rotate(8deg);background:#6b4cff}}@keyframes encourage{0%{opacity:0;transform:translateY(16px) scale(.75)}20%,75%{opacity:1;transform:translateY(-8px) scale(1)}100%{opacity:0;transform:translateY(-28px)}}@keyframes pop{50%{transform:scale(1.18)}}@keyframes shake{25%,75%{transform:translateX(-8px)}50%{transform:translateX(8px)}}
body[data-theme="unicorn"]{--panel:rgba(87,39,112,.75);--purple:#b466e8;--pink:#ff78ae;--mint:#8ff4e8;--yellow:#ffe694;background:radial-gradient(circle at 14% 12%,#ffb8d8 0,transparent 29%),radial-gradient(circle at 84% 8%,#83d8ff 0,transparent 27%),linear-gradient(155deg,#56327b,#9b5899 57%,#486aa4)}body[data-theme="unicorn"] .space{background-image:radial-gradient(#fff 1.6px,transparent 1.6px);opacity:.5}body[data-theme="unicorn"] .space:before{background-image:radial-gradient(#ffd6ef 2px,transparent 2px)}body[data-theme="unicorn"] .welcome{background:linear-gradient(120deg,#9c5fc9dd,#dc80b9cc)}body[data-theme="unicorn"] .brand{text-shadow:0 3px 0 #8c4b97}body[data-theme="unicorn"] .game-card.shapes{background:linear-gradient(135deg,#9f61d8,#de78c7)}body[data-theme="unicorn"] .game-card.memory{background:linear-gradient(135deg,#ed6fae,#ff9cae)}body[data-theme="unicorn"] .game-card.counting{background:linear-gradient(135deg,#54a7d8,#65d5cb)}body[data-theme="unicorn"] .game-card.pattern{background:linear-gradient(135deg,#dc8ad8,#8e7fe8)}body[data-theme="unicorn"] .game-card.story{background:linear-gradient(135deg,#7a5ed1,#d26eb8,#ff9aaf)}body[data-theme="unicorn"] .memory-card{background:linear-gradient(145deg,#df7cca,#9f64cf);box-shadow:0 8px 0 #603778}body[data-theme="unicorn"] .story-choice{background:linear-gradient(135deg,#d56eb6,#9a70df);box-shadow:0 7px 0 #754494}
.story-choices.answered{pointer-events:none}.story-listen:disabled{opacity:.55;pointer-events:none}.story-turn-cue{margin:18px 0 0;border-radius:20px;padding:16px 20px;background:#ded8ef;color:#71688f;font-size:clamp(19px,3.8vw,26px);font-weight:1000;text-align:center}.story-turn-cue.ready{background:linear-gradient(135deg,#19a98f,#5fd77f);color:#fff;box-shadow:0 0 0 5px #78e7b16b;animation:page-ready 1.15s ease-in-out infinite}.story-book.ready-to-turn{cursor:pointer;box-shadow:0 0 0 6px #62f2d17a,0 22px 48px #05031d85;transition:.2s transform,.2s box-shadow;touch-action:manipulation}.story-book.ready-to-turn:active{transform:scale(.985)}.story-book.ready-to-turn:focus-visible{outline:6px solid #ffc74f;outline-offset:5px}@media(max-width:850px){.story-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.story-pick:last-child:nth-child(odd){grid-column:1/-1}.story-pick>span{min-height:135px}}@media(max-width:760px){.topbar{flex-wrap:wrap}.brand{order:-1;flex:1}.top-actions{width:100%}}
@media(max-width:650px){.game-grid{grid-template-columns:1fr}.game-card,.game-card.story{min-height:128px;grid-column:auto}.shape-board{gap:10px}.pieces,.targets{gap:7px}.game-area{min-height:400px}.home span{display:none}.home{width:52px;padding:0}.brand{font-size:20px}.planet{font-size:28px}.memory-board{gap:8px}.memory-card{border-radius:15px}.setting-button b{display:none}.setting-button{width:52px;padding:0}.score{margin-left:auto}.story-page{padding:18px}.story-choice{min-width:100%}.story-library-grid{grid-template-columns:1fr}.story-pick>span{min-height:115px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}