:root{--ink:#29304f;--purple:#6c63e8;--cream:#fffdf5;--shadow:0 12px 30px rgba(65,55,120,.14)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:hidden}body{font-family:"Trebuchet MS","Arial Rounded MT Bold",system-ui,sans-serif;color:var(--ink);background:linear-gradient(150deg,#eefaff 0%,#fff5da 46%,#f5eeff 100%);min-height:100vh}.app{position:relative;z-index:2;width:min(1320px,100%);min-height:100vh;margin:auto;padding:18px clamp(12px,3vw,36px) 28px}.sky{position:fixed;inset:0;overflow:hidden;pointer-events:none}.sky span{position:absolute;opacity:.13;font-size:clamp(42px,7vw,90px);animation:float 7s ease-in-out infinite}.sky span:nth-child(1){left:4%;top:22%;color:#ff9e38}.sky span:nth-child(2){right:5%;top:30%;color:#f05b68;animation-delay:-2s}.sky span:nth-child(3){left:10%;bottom:8%;color:#52b788;animation-delay:-4s}.sky span:nth-child(4){right:10%;bottom:6%;color:#ec5b9f;animation-delay:-1s}.topbar{display:flex;align-items:center;gap:18px;padding:12px 16px;border-radius:24px;background:rgba(255,255,255,.88);box-shadow:var(--shadow);backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:10px;min-width:230px}.brand-mark{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:linear-gradient(135deg,#ffb43b,#ff7b47);color:white;font-size:28px;transform:rotate(-8deg)}.brand h1{font-size:clamp(17px,2vw,24px);line-height:1;margin:0}.brand p{margin:4px 0 0;color:var(--purple);font-weight:800}.stats{display:flex;gap:8px;margin:auto}.stats div{min-width:76px;padding:7px 14px;text-align:center;border-radius:15px;background:#f4f2ff}.stats small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#686d87;font-weight:800}.stats strong{font-size:22px;color:#554cc9}.tools{display:flex;gap:7px}.icon-button{width:43px;height:43px;border:0;border-radius:14px;background:#f3f5ff;color:#3d4160;font-size:20px;font-weight:900;cursor:pointer}.icon-button:hover,.icon-button:focus-visible{background:#e7e3ff;transform:translateY(-2px)}.parent{font-family:serif}.screen{display:none}.screen.active{display:block}.welcome{text-align:center;padding:clamp(42px,8vh,90px) 16px}.mascot{position:relative;display:grid;place-items:center;width:122px;height:122px;margin:0 auto 22px;border-radius:36% 50% 42% 50%;background:linear-gradient(135deg,#ffcd57,#ff914d);box-shadow:0 15px 0 #fff2c3;animation:bob 3s ease-in-out infinite}.mascot span{position:absolute;top:-20px;color:#ff7b47;font-size:42px}.mascot i{font-style:normal;font-size:35px;color:#553a2e}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:#6b62d8;font-weight:900;margin:0 0 9px}.welcome h2{font-size:clamp(38px,6vw,70px);line-height:1.02;margin:0;background:linear-gradient(90deg,#675ee4,#ec5b9f,#f18d35);color:transparent;background-clip:text}.welcome>p:not(.eyebrow):not(.keyboard-tip){font-size:clamp(17px,2vw,23px);color:#626781}.primary-button,.secondary-button,.danger-button{border:0;border-radius:18px;padding:15px 24px;font:800 17px inherit;cursor:pointer}.primary-button{color:#fff;background:linear-gradient(135deg,#766dea,#5c50cc);box-shadow:0 8px 0 #463ca8}.primary-button:hover,.primary-button:focus-visible{transform:translateY(-2px);box-shadow:0 10px 0 #463ca8}.primary-button:active{transform:translateY(5px);box-shadow:0 3px 0 #463ca8}.secondary-button{color:#554cc9;background:#eeeaff}.danger-button{color:#a22f47;background:#ffe7ec}.welcome .primary-button{font-size:21px;padding:18px 30px;margin:16px}.keyboard-tip{font-size:13px;color:#777d94}.game{padding-top:25px}.game-intro{display:flex;justify-content:space-between;align-items:end;gap:20px}.game-intro h2{margin:0;font-size:clamp(25px,3.2vw,42px)}.progress-copy{min-width:min(360px,42vw);text-align:right}.progress-copy strong{font-size:14px}.progress-track{height:14px;margin-top:8px;border:3px solid #fff;border-radius:20px;background:#e3e1ef;box-shadow:0 2px 7px #c9c5df inset;overflow:hidden}.progress-track span{display:block;width:0;height:100%;border-radius:20px;background:linear-gradient(90deg,#55c69e,#ffd447,#ff8a48);transition:width .4s ease}.message{min-height:28px;text-align:center;margin:12px 0 8px;font-size:19px;font-weight:900;color:#6259d7}.message.pop{animation:messagePop .35s}.playground{display:grid;grid-template-columns:1fr 52px 1fr;align-items:center}.panel{padding:20px;border:3px solid rgba(255,255,255,.8);border-radius:28px;box-shadow:var(--shadow);background:rgba(255,255,255,.72)}.panel h3{margin:0;text-align:center;font-size:22px}.panel>p{margin:3px 0 16px;text-align:center;color:#73778d;font-size:13px}.tray-panel{background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(237,246,255,.85))}.board-panel{background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(255,247,224,.85))}.journey{text-align:center;font-size:34px;color:#8c84dc;animation:nudge 1.5s infinite}.shape-grid{display:grid;grid-template-columns:repeat(3,minmax(100px,1fr));gap:14px}.shape-card,.drop-zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:154px;border-radius:22px}.shape-card{border:3px solid white;background:#fff;box-shadow:0 7px 18px rgba(54,55,90,.12);cursor:grab;touch-action:none;user-select:none;transition:transform .2s,opacity .2s,box-shadow .2s}.shape-card:hover,.shape-card:focus-visible,.shape-card.selected{outline:4px solid #8e85f0;outline-offset:2px;transform:translateY(-4px) scale(1.025);box-shadow:0 12px 22px rgba(70,63,154,.2)}.shape-card.dragging{opacity:.2}.shape-card.matched{opacity:.25;pointer-events:none;transform:scale(.8)}.shape-name,.zone-name{margin-top:8px;font-size:14px;font-weight:900;text-transform:capitalize}.shape-visual{display:block;width:82px;height:82px;color:var(--shape-color);filter:drop-shadow(0 5px 3px rgba(36,35,55,.12))}.shape-visual svg{display:block;width:100%;height:100%;overflow:visible}.drop-zone{border:3px dashed #c5c1d7;background:rgba(255,255,255,.54);transition:transform .2s,background .2s,border .2s}.drop-zone .shape-visual{opacity:.22;filter:none}.level-2 .drop-zone .shape-visual,.level-3 .drop-zone .shape-visual{color:#777b91;opacity:.25}.level-3 .zone-name{visibility:hidden}.level-3 .shape-card .shape-visual{width:70px;height:70px}.drop-zone.over,.drop-zone:focus-visible{border-color:#766dea;background:#eceaff;transform:scale(1.04);outline:0}.drop-zone.correct{border-style:solid;border-color:#43b889;background:#ddf8e9;animation:success .6s}.drop-zone.correct .shape-visual{opacity:1}.drop-zone.wrong{animation:shake .4s;border-color:#ef7580;background:#fff0f1}.drag-ghost{position:fixed;z-index:100;display:none;pointer-events:none;transform:translate(-50%,-50%) scale(1.12);filter:drop-shadow(0 14px 10px rgba(40,38,70,.25))}.drag-ghost.active{display:block}.drag-ghost .shape-visual{width:96px;height:96px}.modal{border:0;padding:0;background:transparent;max-width:min(92vw,520px);overflow:visible}.modal::backdrop{background:rgba(39,35,72,.55);backdrop-filter:blur(6px)}.modal-card{position:relative;text-align:center;padding:34px;border-radius:30px;background:#fffdf8;box-shadow:0 25px 70px rgba(31,28,69,.3)}.modal h2{font-size:clamp(29px,5vw,43px);margin:6px 0}.modal p{line-height:1.55;color:#676b7e}.trophy{font-size:72px;animation:bob 2s infinite}.stars{font-size:32px;color:#ffc53e;letter-spacing:.15em;animation:twinkle 1s infinite alternate}.final-score{display:inline-block;margin:6px 0 20px;padding:10px 20px;border-radius:15px;background:#f1eeff;color:#554cc9}.final-score strong{font-size:25px;margin-left:8px}.modal-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}.close-button{position:absolute;right:14px;top:12px;border:0;background:none;font-size:30px;color:#6d7080;cursor:pointer}.confetti{position:fixed;inset:0;z-index:99;pointer-events:none;overflow:hidden}.confetti i{position:absolute;top:-20px;width:11px;height:18px;border-radius:3px;animation:fall 2.7s linear forwards}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:focus-visible{outline:4px solid #29224f;outline-offset:3px}
@keyframes float{50%{transform:translateY(-20px) rotate(12deg)}}@keyframes bob{50%{transform:translateY(-8px) rotate(2deg)}}@keyframes nudge{50%{transform:translateX(5px)}}@keyframes messagePop{50%{transform:scale(1.12)}}@keyframes success{50%{transform:scale(1.08)}}@keyframes shake{25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-5px)}}@keyframes twinkle{to{transform:scale(1.12);filter:brightness(1.15)}}@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
@media(max-width:850px){.topbar{flex-wrap:wrap}.brand{min-width:0}.stats{order:3;width:100%;justify-content:center}.tools{margin-left:auto}.game-intro{align-items:stretch;flex-direction:column;gap:10px}.progress-copy{min-width:0;width:100%;text-align:left}.playground{grid-template-columns:1fr;gap:12px}.journey{display:none}.shape-grid{grid-template-columns:repeat(3,1fr)}.shape-card,.drop-zone{min-height:132px}.panel{padding:15px}.shape-visual{width:68px;height:68px}}
@media(max-width:520px){.app{padding:8px 8px 20px}.topbar{gap:8px;padding:9px;border-radius:18px}.brand-mark{width:40px;height:40px}.brand h1{font-size:15px}.brand p{font-size:12px}.icon-button{width:38px;height:38px}.stats div{min-width:68px;padding:5px 9px}.stats strong{font-size:18px}.game{padding-top:16px}.game-intro h2{font-size:26px}.shape-grid{gap:7px}.shape-card,.drop-zone{min-height:108px;border-radius:16px}.shape-visual{width:55px;height:55px}.shape-name,.zone-name{font-size:11px;margin-top:5px}.panel{border-radius:21px;padding:10px}.panel>p{margin-bottom:9px}.message{font-size:16px;margin:7px}.level-3 .shape-card .shape-visual{width:49px;height:49px}}
@media(max-height:650px) and (orientation:landscape){.topbar{padding:6px 12px}.stats div{padding:3px 10px}.brand-mark{width:38px;height:38px}.game{padding-top:8px}.game-intro h2{font-size:23px}.message{margin:3px}.panel{padding:8px}.panel>p{display:none}.shape-card,.drop-zone{min-height:95px}.shape-visual{width:52px;height:52px}.shape-grid{gap:7px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
.outline-challenge .drop-zone .shape-visual{color:#777b91;opacity:.25}.hide-labels .zone-name{visibility:hidden}.small-shapes .shape-card .shape-visual{width:70px;height:70px}@media(max-width:520px){.small-shapes .shape-card .shape-visual{width:49px;height:49px}}