:root{font-family:Trebuchet MS,Arial Rounded MT Bold,Arial,sans-serif;color:#33294d;background:#fff8eb;font-synthesis:none;--ink: #33294d;--muted: #756d86;--cream: #fff8eb;--purple: #7567db}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--cream)}button{font:inherit;color:inherit;border:0;cursor:pointer}button:focus-visible{outline:4px solid #62cde1;outline-offset:3px}.app-shell{min-height:100vh;overflow:hidden}.topbar{height:86px;padding:0 max(5vw,24px);display:flex;align-items:center;justify-content:space-between;position:relative;z-index:4}.brand{background:none;display:flex;align-items:center;gap:8px;color:var(--ink);font:800 21px Arial Rounded MT Bold,Trebuchet MS,sans-serif;letter-spacing:-.5px;padding:5px}.brand-cloud{font-size:25px;filter:drop-shadow(0 3px 0 #a5d9df)}.brand b{align-self:flex-end;margin:0 0 11px -7px;font:900 8px Trebuchet MS,sans-serif;letter-spacing:2px;color:#f0806b}.home-button{background:#fff;color:#716781;border:2px solid #eee4d8;border-radius:99px;padding:10px 17px;font-size:14px;font-weight:800;box-shadow:0 3px #eee4d8}.home-button:hover{transform:translateY(-2px)}.home-page{max-width:1180px;margin:auto;padding:0 30px 54px}.hero{min-height:398px;display:flex;position:relative;align-items:center;overflow:hidden;border-radius:34px;padding:48px 7%;background:#ccecf0;box-shadow:0 13px #b9dfe1}.hero-copy{position:relative;z-index:2;max-width:570px}.eyebrow{color:#e27666;letter-spacing:2.2px;font-size:11px;font-weight:900;margin:0 0 11px}.eyebrow span{color:#f0ad38;font-size:15px;margin-left:3px}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Arial Rounded MT Bold,Trebuchet MS,sans-serif}.hero h1{color:#3d315d;font-size:clamp(45px,6vw,70px);line-height:.93;letter-spacing:-2px;margin:0 0 20px}.hero h1 span{color:#7363d5}.hero-text{color:#635e72;font-size:16px;line-height:1.5;max-width:420px;margin-bottom:22px;font-weight:600}.age-pills{display:flex;flex-wrap:wrap;gap:8px}.age-pills span{background:#fffc;border-radius:99px;padding:8px 12px;color:#685d7d;font-size:11px;font-weight:800}.hero-scene{position:absolute;width:49%;height:100%;right:0;top:0;overflow:hidden;background:linear-gradient(160deg,#c9eff0,#b3dee5)}.hero-scene:after{content:"";position:absolute;bottom:-100px;right:-40px;width:650px;height:230px;border-radius:50% 50% 0 0;background:#9fcf84;transform:rotate(-5deg)}.sun{position:absolute;top:53px;right:24%;color:#ffd26a;font-size:63px;line-height:1}.cloud{color:#fff;opacity:.65;position:absolute;font-size:68px}.cloud-a{top:32px;left:20%}.cloud-b{top:116px;right:3%;font-size:45px}.rainbow{position:absolute;z-index:1;right:12%;top:108px;font-size:90px;transform:rotate(-9deg);filter:saturate(.85)}.hero-animal{position:absolute;z-index:2;right:30%;bottom:42px;font-size:132px;filter:drop-shadow(0 9px 0 rgba(87,134,93,.25));animation:bob 3s ease-in-out infinite}.hero-flower{position:absolute;z-index:3;bottom:8px;font-size:34px}.flower-a{right:7%}.flower-b{right:47%;font-size:28px}@keyframes bob{0%,to{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(4deg)}}.shelf-section{padding:55px 1% 0}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:22px}.section-heading .eyebrow{margin-bottom:3px;color:#9d91aa}.section-heading h2{margin:0;font-size:39px;line-height:1}.shelf-note{color:#82778e;font-weight:800;font-size:13px}.shelf-note span{color:#e77968;font-size:22px;margin-left:7px}.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.game-card{text-align:left;min-height:220px;position:relative;overflow:hidden;border-radius:23px;padding:19px;display:flex;align-items:end;background:#fff;border:2px solid #f1e9df;box-shadow:0 7px #e9dfd3;transition:transform .2s ease,box-shadow .2s ease}.game-card:hover{transform:translateY(-5px) rotate(-.5deg);box-shadow:0 12px #e9dfd3}.card-picture{position:absolute;inset:0 0 0 45%;background:linear-gradient(135deg,color-mix(in srgb,var(--card-color) 78%,white),var(--card-color));overflow:hidden}.card-picture:after{content:"";position:absolute;width:260px;height:160px;right:-20px;bottom:-80px;border-radius:50%;background:#ffffff40}.card-icon{position:absolute;z-index:1;right:20%;top:28px;font-size:88px;filter:drop-shadow(0 7px 0 rgba(92,57,74,.13));transform:rotate(7deg)}.card-spark{position:absolute;color:#fff;font-size:25px}.spark-one{left:13%;top:30px}.spark-two{right:12%;bottom:43px;font-size:17px}.card-copy{position:relative;z-index:2;width:43%}.card-copy strong{display:block;font:800 29px Arial Rounded MT Bold,Trebuchet MS,sans-serif;line-height:1;margin-bottom:8px}.card-copy small{display:block;color:#766a7d;font-size:12px;font-weight:700;line-height:1.35;margin-bottom:14px}.card-copy em{font-style:normal;font-size:10px;color:#958998;font-weight:800}.card-burst{position:absolute;z-index:2;top:13px;left:15px;background:#fff;color:var(--card-color);border-radius:5px;padding:5px 8px;font-size:9px;font-weight:900;letter-spacing:1px;transform:rotate(-4deg)}.play-circle{position:absolute;z-index:3;right:17px;bottom:15px;display:grid;place-items:center;background:#fff;color:var(--card-color);border-radius:50%;width:40px;height:40px;font-size:15px;padding-left:2px}.little-stats{display:flex;gap:17px;flex-wrap:wrap;color:#94899a;font-size:11px;font-weight:600;padding:27px 3px 0}.little-stats b{color:#645972;margin-right:3px}footer{color:#aaa0a6;text-align:center;font-size:11px;font-weight:700;padding:34px 20px 20px}footer span{color:#efae45;padding:0 6px}.game-page{max-width:1150px;margin:auto;padding:23px 30px 50px}.game-intro{display:flex;justify-content:space-between;align-items:end;margin:16px 0 27px}.game-intro h1{font-size:clamp(37px,5vw,55px);line-height:.95;margin:0 0 10px;letter-spacing:-.8px}.game-intro p:not(.eyebrow){color:#7c7384;font-weight:600;margin:0;font-size:14px}.progress-pill,.blocks-score{color:#8b7c86;font-size:12px;font-weight:900;background:#fff;border:2px solid #f0e5da;border-radius:99px;padding:10px 17px;white-space:nowrap}.progress-pill span{color:#e47a64;font-size:20px;margin-right:3px;vertical-align:-2px}.puzzle-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:25px;align-items:start}.puzzle-board-wrap{min-width:0;padding-top:clamp(45px,11vw,90px)}.puzzle-board{aspect-ratio:2 / 1;position:relative;overflow:visible;border:13px solid #fff;outline:2px solid #eee3d6;border-radius:23px;background:#daeebe;box-shadow:0 9px #e2d7c8;touch-action:none}.puzzle-field{position:absolute;inset:17% 16%;overflow:hidden;border-radius:10px;background:#daeebe;box-shadow:0 0 0 3px #ffffffb3}.frame-image{position:absolute;inset:0;background-image:var(--scene);background-size:cover;background-position:center;opacity:.32;filter:saturate(.7)}.frame-lines{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);pointer-events:none}.frame-lines span{border:2px dashed rgba(255,255,255,.5)}.puzzle-piece{position:absolute;z-index:2;width:17%;height:33%;border:3px solid white;border-radius:10px;background-image:var(--scene);background-size:400% 200%;background-position:var(--tile-x) var(--tile-y);box-shadow:0 5px #44435a33,inset 0 0 0 2px #ffffff59;cursor:grab;transform:rotate(var(--piece-rotation, 0deg));transition:left .22s ease,top .22s ease,transform .18s ease,filter .18s ease;touch-action:none}.puzzle-piece:hover{transform:scale(1.035) rotate(calc(var(--piece-rotation, 0deg) + 1deg));filter:brightness(1.05)}.puzzle-piece:focus-visible{outline:4px solid #62cde1;outline-offset:4px}.puzzle-piece.dragging{transition:none;cursor:grabbing;z-index:4;transform:scale(1.08) rotate(calc(var(--piece-rotation, 0deg) + 2deg));filter:drop-shadow(0 9px 5px rgba(60,43,64,.25))}.puzzle-piece.placed{cursor:default;transform:none;box-shadow:0 0 0 2px #ffffffb3,inset 0 0 0 2px #ffffff40}.puzzle-tip{text-align:center;color:#756a78;font-size:12px;font-weight:700;margin:clamp(45px,7vw,75px) 0 17px}.puzzle-tip span{font-size:17px;vertical-align:-2px;margin-right:4px}.puzzle-side{display:flex;flex-direction:column;gap:15px}.scene-picker,.puzzle-card,.next-card,.how-card,.high-card{background:#fff;border:2px solid #f0e7dd;border-radius:19px;padding:16px;box-shadow:0 5px #eadfd4}.scene-picker>p{color:#91858d;font-size:10px;letter-spacing:1.5px;font-weight:900;margin:0 0 10px}.scene-picker button{width:100%;display:flex;align-items:center;gap:10px;background:transparent;padding:6px;border-radius:12px;font-size:12px;color:#72677a}.scene-picker button:hover,.scene-picker button.selected{background:#fff5e9;color:#443654}.scene-picker button span{width:37px;height:29px;display:grid;place-items:center;border-radius:8px;font-size:20px}.puzzle-card{text-align:center;background:#fff8eb;border-color:#f3dfbe;padding:20px 14px}.big-emoji{display:block;font-size:42px;margin-bottom:6px}.puzzle-card strong{display:block;font:800 22px Arial Rounded MT Bold,Trebuchet MS,sans-serif}.puzzle-card small{display:block;color:#897e84;font-size:11px;font-weight:700;margin:2px 0 14px}.primary-button{background:#7667dc;color:#fff;padding:11px 16px;border-radius:99px;font-size:12px;font-weight:900;box-shadow:0 4px #564cae}.primary-button:hover{transform:translateY(-2px);box-shadow:0 6px #564cae}.primary-button span{margin-left:7px}.soft-button{background:transparent;color:#756a78;font-size:12px;font-weight:800;padding:8px 12px;min-height:40px}.soft-button:hover{color:#7567db}.blocks-page{max-width:1000px}.blocks-page .tetris-stage{max-width:470px}.blocks-score{display:flex;flex-direction:column;text-align:right;padding:7px 18px}.blocks-score small{letter-spacing:1.5px;color:#a5989b;font-size:9px}.blocks-score strong{color:#7263d2;font:800 25px Arial Rounded MT Bold,Trebuchet MS,sans-serif;line-height:1}.blocks-layout{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:25px;align-items:start}.tetris-stage{position:relative;max-width:470px;margin:auto;width:100%}.stage-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}.level-pill{color:#8e8291;font-size:11px;font-weight:800}.speed-picker{display:flex;gap:5px;align-items:center;color:#a0959b;font-size:10px;font-weight:900}.speed-picker button{width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid #eee5dc;font-size:17px;filter:grayscale(1);opacity:.55}.speed-picker button.selected{filter:grayscale(0);opacity:1;border-color:#e5d98d;background:#fff9cf}.tetris-board{position:relative;display:grid;grid-template-columns:repeat(10,1fr);gap:3px;padding:8px;background:#40375a;border:7px solid #332b4b;border-radius:17px;box-shadow:0 9px #d8cdbf;aspect-ratio:1 / 1.82;touch-action:none}.block-cell{min-width:0;min-height:0;background:#ffffff12;border-radius:4px;position:relative}.block-cell.filled{background:var(--block-color);box-shadow:inset 3px 3px #ffffff47,inset -3px -3px #402a6133}.block-cell.filled span{position:absolute;width:27%;height:18%;background:#ffffff85;border-radius:99px;top:13%;left:14%}.block-cell.ghost{background:color-mix(in srgb,var(--block-color) 22%,transparent);border:2px solid color-mix(in srgb,var(--block-color) 65%,white);opacity:.8}.touch-controls{display:flex;gap:9px;justify-content:center;padding-top:20px}.touch-controls button{width:46px;height:40px;border-radius:12px;color:#7667db;background:#fff;border:2px solid #eee4db;box-shadow:0 4px #e5d9ce;font-size:21px;font-weight:900}.touch-controls button:active{transform:translateY(3px);box-shadow:0 1px #e5d9ce}.touch-controls .drop-control{width:auto;padding:0 13px;font-size:10px;letter-spacing:1px;color:#fff;background:#ef896b;border-color:#e17b60;box-shadow-color:#ca654e}.start-overlay,.game-over{position:absolute;z-index:5;inset:45px 7px 74px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:10px;background:#fffaedf0}.start-overlay>span,.game-over>span{font-size:43px}.start-overlay h2,.game-over h2{font:800 28px Arial Rounded MT Bold,Trebuchet MS,sans-serif;margin:4px 0 0}.start-overlay p,.game-over p{color:#887d87;font-size:12px;font-weight:700;max-width:230px;line-height:1.4;margin:3px 0 15px}.next-card{text-align:center;background:#fff8eb}.next-card p{color:#a4999e;font-size:10px;font-weight:900;letter-spacing:1.5px;margin:0}.next-piece{display:grid;grid-template-columns:repeat(4,18px);grid-auto-rows:18px;justify-content:center;gap:3px;margin:13px auto 12px}.next-piece span{width:18px;height:18px}.mini-filled{background:var(--block-color);border-radius:4px;box-shadow:inset 2px 2px #ffffff59,inset -2px -2px #402a6133}.next-card b{color:#73687e;font-size:11px}.how-card h3{font:800 20px Arial Rounded MT Bold,Trebuchet MS,sans-serif;margin:0 0 10px}.how-card p{margin:7px 0;color:#837781;font-size:11px;font-weight:700}.how-card kbd{background:#f4eee8;color:#6c6075;padding:3px 6px;border-radius:4px;font:800 10px Trebuchet MS,sans-serif;margin-right:3px}.high-card{display:flex;align-items:center;gap:11px;border-color:#f2dfae;background:#fff8d8}.high-card>span{font-size:30px}.high-card small{display:block;color:#a29384;font-size:8px;letter-spacing:1px;font-weight:900}.high-card strong{color:#786629;font:800 21px Arial Rounded MT Bold,Trebuchet MS,sans-serif}.high-card i{font:700 9px Trebuchet MS,sans-serif}@media(max-width:760px),(orientation:landscape)and (max-height:600px){.topbar{height:70px}.home-page{padding:0 16px 35px}.hero{min-height:620px;padding:34px 25px;align-items:start}.hero-copy{max-width:100%}.hero h1{font-size:49px}.hero-scene{width:100%;height:40%;top:auto;bottom:0}.hero-animal{right:38%;bottom:26px;font-size:100px}.rainbow{top:45px;right:12%;font-size:68px}.sun{top:24px;right:22%;font-size:44px}.section-heading{align-items:start;flex-direction:column;gap:8px}.section-heading h2{font-size:34px}.game-grid{grid-template-columns:1fr;gap:16px}.game-card{min-height:190px}.game-intro{align-items:start;gap:12px}.game-intro h1{font-size:40px}.game-page{padding:12px 16px 36px}.puzzle-layout,.blocks-layout{grid-template-columns:1fr}.puzzle-side{display:grid;grid-template-columns:1fr 1fr}.puzzle-card{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;justify-content:center}.scene-picker,.soft-button{grid-column:1}.puzzle-board{aspect-ratio:1.45 / 1}.puzzle-tip{margin:clamp(45px,12vw,75px) 0 13px}.blocks-layout{gap:22px}.tetris-stage{max-width:460px}.blocks-side{display:grid;grid-template-columns:1fr 1fr;gap:12px}.high-card{grid-column:1 / span 2}.next-card,.how-card{min-height:150px}}@media(max-width:360px){.hero{min-height:670px}.hero-scene{height:37%}.hero h1{font-size:45px}.card-copy strong{font-size:26px}}@media(min-width:761px)and (min-height:601px){.app-shell{height:100vh;display:grid;grid-template-rows:auto minmax(0,1fr) auto}.topbar{height:70px}.home-page,.game-page{width:100%;min-height:0;margin:0 auto;overflow:hidden}.home-page{padding-bottom:16px}.hero{min-height:0;height:320px;padding:22px 7%}.hero h1{font-size:52px}.shelf-section{padding-top:28px}.section-heading{margin-bottom:14px}.section-heading h2{font-size:34px}.game-card{min-height:170px}.little-stats{padding-top:14px}.game-page{padding:10px 30px 20px}.game-intro{margin:8px 0 16px}.puzzle-board-wrap{padding-top:90px}.puzzle-board{width:min(100%,calc((100vh - 450px)*2));margin-inline:auto}.puzzle-tip{margin-top:80px}.blocks-page .game-intro{margin-bottom:12px}.blocks-page .tetris-stage,.tetris-stage{max-width:min(470px,max(220px,calc((100vh - 380px)*.55)))}footer{padding:10px 20px 12px}}@media(max-width:480px){.brand{font-size:18px}.brand b{font-size:7px}.home-button span{display:none}.home-button{padding:8px 12px}.hero{border-radius:25px}.age-pills span{font-size:10px}.little-stats{flex-direction:column;gap:8px}.game-intro{display:block}.game-intro>:last-child{margin-top:15px;display:inline-block}.puzzle-side{display:flex}.puzzle-card{order:3}.scene-picker{order:1}.soft-button{order:2}.puzzle-board{border-width:8px;border-radius:17px}.puzzle-piece{border-width:2px;border-radius:6px}.puzzle-tip{margin-top:clamp(45px,14vw,65px)}.touch-controls button{width:42px}.blocks-score{float:none}.blocks-page .game-intro{min-height:112px}.blocks-page .blocks-score{display:flex;width:max-content;margin:15px 0 0 auto}.blocks-side{grid-template-columns:1fr 1fr}}@media(max-width:760px),(orientation:landscape)and (max-height:600px){.game-page{padding:8px 16px 24px}.game-page+footer{display:none}.game-intro{display:flex;align-items:center;margin:0 0 8px;min-height:0}.game-intro>div:first-child{display:none}.game-intro>:last-child{margin-top:0;margin-left:auto}.puzzle-side,.blocks-side{display:none}.puzzle-board-wrap{padding-top:42px}.puzzle-tip{margin-top:56px}.blocks-page .tetris-stage{max-width:min(100%,420px);padding-bottom:70px}.blocks-page .touch-controls{position:fixed;z-index:20;left:50%;bottom:max(10px,env(safe-area-inset-bottom));width:max-content;margin:0;padding:8px;border:2px solid #eee4db;border-radius:18px;background:#fff8ebf5;box-shadow:0 5px #e5d9ce;transform:translate(-50%)}.blocks-page .touch-controls button{width:44px;height:38px}.blocks-page .touch-controls .drop-control{width:auto;padding-inline:10px}.portrait-only-notice{display:none}}@media(orientation:landscape)and (max-height:600px){.topbar{height:56px}footer{display:none}.puzzle-board-wrap{padding-top:24px}.puzzle-board{width:min(100%,max(280px,calc((100vh - 175px)*2.2)));margin-inline:auto;aspect-ratio:2.2 / 1}.puzzle-tip{margin-top:28px}.blocks-page{padding-top:32px}.blocks-page>.game-intro,.blocks-page>.blocks-layout{display:none}.blocks-page .portrait-only-notice{display:flex}}@media(orientation:landscape)and (max-height:600px){.app-shell{height:auto;display:block}.home-page,.game-page{overflow:visible}.hero{min-height:360px;height:360px;padding:28px 6%}.hero-copy{max-width:52%}.hero-scene{width:48%;height:100%;top:0;bottom:auto}.hero h1{font-size:clamp(38px,6vw,52px)}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.game-card{min-height:170px}}.portrait-only-notice{display:none;min-height:220px;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#fff8eb;border:2px solid #f0e5da;border-radius:22px;padding:24px;box-shadow:0 6px #e5d9ce}.portrait-only-notice span{font-size:48px;margin-bottom:10px}.portrait-only-notice strong{font:800 24px Arial Rounded MT Bold,Trebuchet MS,sans-serif}.portrait-only-notice small{color:#837781;font-size:12px;font-weight:700;margin-top:7px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
