:root { --ink:#594777; --cream:#fffaf1; --pink:#ff8eaa; --yellow:#ffd660; --grass:#7fd188; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; min-height:100%; overflow:hidden; }
body { font-family:Nunito,system-ui,sans-serif; background:#92d9f2; color:var(--ink); }
button { font:inherit; }
.game { position:relative; min-height:100dvh; overflow:hidden; isolation:isolate; background:linear-gradient(#75ccec 0%,#bcecf4 58%,#f9f4c8 58%); }
.sky,.playfield { position:absolute; inset:0; overflow:hidden; }
.sky { pointer-events:none; z-index:0; }
.hud { position:relative; z-index:10; height:76px; padding:14px clamp(16px,4vw,48px); display:flex; justify-content:space-between; align-items:center; }
.logo { display:flex; align-items:center; gap:7px; color:#fffdf8; font:800 clamp(21px,3.4vw,34px)/.9 "Baloo 2",sans-serif; letter-spacing:-.03em; filter:drop-shadow(0 3px 0 #4591bb); }
.logo span { color:#ffe16a; font-size:.75em; }.logo b { color:#ffdf68; }
.hud-actions { display:flex; gap:11px; align-items:center; }
.star-badge,.sound-toggle { border:3px solid #fff; box-shadow:0 4px 0 #4996b7,0 8px 16px #3982a433; background:#fff9e9; min-height:48px; border-radius:18px; }
.star-badge { display:flex; gap:5px; align-items:center; padding:5px 14px 5px 9px; color:#765c66; font:900 23px "Baloo 2"; }.star-badge span { color:#ffc849; font-size:28px; filter:drop-shadow(0 2px 0 #e39b38); }
.sound-toggle { width:52px; color:#6b5b82; cursor:pointer; font-size:22px; }.sound-toggle:active { transform:translateY(3px); box-shadow:0 1px 0 #4996b7; }.sound-toggle.muted { filter:saturate(.4); background:#eee9ef; }
.sun { position:absolute; right:9%; top:9%; height:clamp(70px,11vw,130px); width:clamp(70px,11vw,130px); background:#ffe375; border-radius:50%; box-shadow:0 0 0 11px #ffed9f88,0 0 28px #fff6bb; animation:sunGlow 3.8s ease-in-out infinite; }.sun:before { content:""; position:absolute; inset:-26px; z-index:-1; background:repeating-conic-gradient(transparent 0 15deg,#ffdf72 16deg 22deg,transparent 23deg 45deg); }.sun i { position:absolute; width:8%; height:8%; border-radius:50%; top:38%; left:31%; background:#dfa95d; box-shadow:28px 0 #dfa95d; }.sun i:after { content:"⌣"; position:absolute; top:5px; left:11px; color:#dfa95d; font-size:30px; }
.cloud { position:absolute; width:clamp(105px,15vw,190px); height:clamp(28px,4vw,45px); border-radius:100px; background:#fffdfd; opacity:.9; box-shadow:0 4px #d8f1fa; }.cloud:before,.cloud:after,.cloud i,.cloud b { content:""; position:absolute; bottom:0; border-radius:50%; background:inherit; }.cloud:before { height:145%; width:36%; left:16%; }.cloud:after { height:115%; width:31%; right:14%; }.cloud i { height:180%; width:39%; left:40%; }.cloud b { display:none; }.cloud-a { top:19%; left:-12%; animation:cloudDrift 32s linear infinite; }.cloud-b { top:35%; left:41%; scale:.6; animation:cloudDrift 42s -20s linear infinite; }.cloud-c { top:12%; left:70%; scale:.45; animation:cloudDrift 36s -8s linear infinite; }
.balloon { position:absolute; width:31px; height:40px; border-radius:50% 50% 48% 48%; animation:balloonBob 4s ease-in-out infinite; }.balloon:before { content:""; position:absolute; bottom:-7px; left:12px; border-left:4px solid transparent; border-right:4px solid transparent; }.balloon:after { content:""; position:absolute; height:52px; width:1px; top:39px; left:15px; background:#a98895; rotate:8deg; transform-origin:top; }.balloon i { position:absolute; inset:5px 7px 14px 8px; border-radius:50%; background:#fff8; }.balloon-pink { top:23%; left:16%; background:#ff91b1; }.balloon-pink:before { border-top:8px solid #ff91b1; }.balloon-yellow { top:43%; right:18%; background:#ffd45e; animation-delay:-1.7s; }.balloon-yellow:before { border-top:8px solid #ffd45e; }
.butterfly { position:absolute; font-size:clamp(24px,3.5vw,38px); animation:butterfly 9s ease-in-out infinite; }.butterfly-one { top:44%; left:13%; }.butterfly-two { top:30%; right:24%; animation-delay:-5s; }.bird { position:absolute; color:#6699ba; font:900 30px Nunito; animation:birdFly 14s linear infinite; }.bird-one { top:18%; left:-5%; }.bird-two { top:25%; left:-25%; animation-delay:-7s; scale:.75; }
.bubble { position:absolute; border:2px solid #fff9; border-radius:50%; background:#fff2; animation:bubbleFloat 8s ease-in infinite; }.bubble-a { width:19px;height:19px;left:32%;bottom:19%; }.bubble-b { width:12px;height:12px;left:66%;bottom:14%;animation-delay:-3s; }.bubble-c { width:26px;height:26px;left:83%;bottom:23%;animation-delay:-6s; }
.playfield { z-index:1; top:76px; }.hills { position:absolute; width:130%; left:-15%; border-radius:50% 50% 0 0; }.hill-far { height:31%; bottom:20%; background:#a8de9b; box-shadow:inset 0 11px #c5edb3; }.hill-near { height:29%; bottom:0; background:#79c77d; }.grass { position:absolute; bottom:0; width:100%; height:24%; background:linear-gradient(90deg,#58b776,#8dd37e 52%,#58ba83); }.grass:after { content:""; position:absolute; inset:0; opacity:.55; background-image:radial-gradient(#d9f298 1.5px,transparent 2px); background-size:24px 24px; }
.tree { position:absolute; bottom:13%; width:clamp(100px,16vw,210px); height:clamp(170px,28vw,330px); transform-origin:center bottom; animation:treeSway 5s ease-in-out infinite; }.tree i { position:absolute; bottom:0; left:43%; width:20%; height:58%; border-radius:40% 50% 10% 10%; background:#9a6842; box-shadow:inset 8px 0 #bd8356; }.tree i:after { content:""; position:absolute; top:29%; left:3px; width:250%; height:17px; border-radius:20px; background:#9a6842; rotate:-25deg; }.tree b,.tree em { position:absolute; border-radius:50%; background:#5cb97a; box-shadow:inset -7px -8px #47aa70; }.tree b { left:4%;top:0;width:75%;height:45%; }.tree em { right:0;top:17%;width:69%;height:40%; }.tree-left { left:-2%; }.tree-right { right:-3%; scale:.8; animation-delay:-2s; }
.flower-bed { position:absolute; z-index:2; bottom:11%; display:flex; gap:clamp(8px,2vw,24px); align-items:end; }.flower-bed i { font-style:normal; font-size:clamp(27px,4vw,48px); color:#f583aa; text-shadow:0 2px #d75d8a; animation:flowerSway 3s ease-in-out infinite; }.flower-bed i:nth-child(2n) { color:#ffdc65; animation-delay:-1.2s; }.flower-bed i:nth-child(3n) { color:#fff5f1; animation-delay:-2.2s; }.left-flowers { left:8%; }.right-flowers { right:8%; }.right-flowers i:nth-child(odd) { animation-delay:-.5s; }
.cat { --cat:#ffb15f; --cat-shadow:#e98145; --x:50%; --y:50%; position:absolute; z-index:6; left:var(--x); top:var(--y); width:clamp(155px,27vw,275px); height:clamp(155px,27vw,275px); border:0; background:transparent; padding:0; cursor:pointer; touch-action:manipulation; filter:drop-shadow(0 8px 3px #4d74563d); transform-origin:center; opacity:0; pointer-events:none; }.cat.show { opacity:1; pointer-events:auto; }.cat-body { position:absolute; bottom:1%; left:10%; width:80%; height:82%; border-radius:48% 48% 38% 38%; background:var(--cat); border:5px solid #8e5b4c; box-shadow:inset -12px -13px var(--cat-shadow); }.head { position:absolute; z-index:3; left:-5%; top:-8%; width:110%; height:77%; background:var(--cat); border:5px solid #8e5b4c; border-radius:48% 48% 45% 45%; box-shadow:inset -8px -9px #e98648; }.ear { position:absolute; z-index:-1; top:-23%; width:38%; height:45%; background:var(--cat); border:5px solid #8e5b4c; border-radius:70% 15% 40% 15%; transform-origin:bottom center; }.ear i { position:absolute; inset:23% 23%; border-radius:70% 15% 40% 15%; background:#f98e9d; }.ear-left { left:4%; rotate:-23deg; }.ear-right { right:4%; rotate:23deg; scale:-1 1; }.eye { position:absolute; top:32%; width:22%; height:29%; background:#fffdf8; border:3px solid #704b4b; border-radius:50%; overflow:hidden; animation:blink 5.5s infinite; }.eye i { position:absolute; bottom:7%; left:28%; width:52%; height:63%; border-radius:50%; background:#5f577e; box-shadow:inset 0 -5px #242841; }.eye i:after { content:""; position:absolute; top:12%; left:15%; width:34%; height:29%; border-radius:50%; background:#fff; }.eye-left { left:18%; }.eye-right { right:18%; }.muzzle { position:absolute; left:37%; top:58%; width:26%; height:21%; border-radius:45%; background:#fff4df; }.muzzle i { position:absolute; left:40%; top:11%; width:25%; height:21%; border-radius:45% 45% 60% 60%; background:#9c5c5c; }.muzzle b { position:absolute; left:49%; top:30%; height:34%; border-left:2px solid #764c50; }.muzzle:after { content:"⌣"; position:absolute; top:4px; left:4px; color:#764c50; font:900 28px/1 Nunito; }.cheek { position:absolute; z-index:1; top:57%; width:17%; height:9%; border-radius:50%; background:#f38a91; opacity:.75; }.cheek-left { left:11%; }.cheek-right { right:11%; }.whiskers { position:absolute; top:62%; color:#80554f; font:900 24px/1 Nunito; letter-spacing:-7px; }.whiskers-left { left:-1%; rotate:9deg; }.whiskers-right { right:-1%; rotate:171deg; }.paw { position:absolute; z-index:4; bottom:-2%; width:30%; height:29%; border:5px solid #8e5b4c; border-radius:48%; background:var(--cat); box-shadow:inset -5px -6px var(--cat-shadow); }.paw-left { left:4%; rotate:-10deg; }.paw-right { right:4%; rotate:10deg; }.tail { position:absolute; z-index:-1; bottom:12%; right:-5%; width:41%; height:50%; border:clamp(13px,2.4vw,23px) solid #8e5b4c; border-left:0; border-radius:0 70% 70% 0; transform:rotate(-8deg); }.tail:after { content:""; position:absolute; inset:4px -1px 4px 0; border-radius:0 70% 70% 0; background:var(--cat); }.wave { display:none; position:absolute; z-index:8; top:27%; left:-7%; font-size:clamp(28px,5vw,50px); transform-origin:bottom right; }
.cat.left { --x:-6%; --y:53%; }.cat.right { --x:calc(100% - clamp(130px,21vw,220px)); --y:53%; }.cat.top { --x:50%; --y:-8%; }.cat.bottom { --x:50%; --y:calc(100% - clamp(125px,21vw,210px)); }.cat.top-left { --x:-5%; --y:-7%; scale:.83; }.cat.top-right { --x:calc(100% - clamp(132px,21vw,220px)); --y:-7%; scale:.83; }.cat.bottom-left { --x:-4%; --y:calc(100% - clamp(125px,21vw,210px)); scale:.83; }.cat.bottom-right { --x:calc(100% - clamp(132px,21vw,220px)); --y:calc(100% - clamp(125px,21vw,210px)); scale:.83; }
.cat.left.show { animation:peekLeft 1.45s cubic-bezier(.16,.82,.18,1) both, kittyBop 2.8s 1.45s ease-in-out infinite; }.cat.right.show { animation:peekRight 1.45s cubic-bezier(.16,.82,.18,1) both, kittyBop 2.8s 1.45s ease-in-out infinite; }.cat.top.show { animation:peekTop 1.35s cubic-bezier(.16,.82,.18,1) both, kittyBop 2.8s 1.35s ease-in-out infinite; }.cat.bottom.show { animation:peekBottom 1.35s cubic-bezier(.16,.82,.18,1) both, kittyBop 2.8s 1.35s ease-in-out infinite; }.cat.top-left.show,.cat.bottom-left.show { animation:peekLeft .55s cubic-bezier(.22,1.4,.46,1) both, kittyBop 1.4s .55s ease-in-out infinite; }.cat.top-right.show,.cat.bottom-right.show { animation:peekRight .55s cubic-bezier(.22,1.4,.46,1) both, kittyBop 1.4s .55s ease-in-out infinite; }.cat.happy { animation:happyCat .9s ease-in-out 2 !important; }.cat.happy .wave { display:block; animation:wave .35s ease-in-out 5 alternate; }.cat.happy .ear { animation:earWiggle .25s ease-in-out 5 alternate; }.cat.happy .eye { animation:none; height:10%; top:40%; border-radius:80% 80% 20% 20%; background:transparent; border-width:0 0 3px; }.cat.happy .eye i { display:none; }
/* The character asset is framed against the edge, so every turn reads as a
   playful peek instead of a cat floating in the playfield. */
.cat { width:clamp(128px,16vw,180px); height:auto; aspect-ratio:602/1260; filter:drop-shadow(0 10px 7px #34536342); }
.cat.left { left:0; top:31%; }
.cat.right { left:auto; right:0; top:31%; }
.cat.top,.cat.bottom { left:50%; right:auto; height:auto; transform:translateX(-50%); }
.cat.top { top:0; width:clamp(190px,27vw,245px); aspect-ratio:548/643; }
.cat.bottom { top:auto; bottom:0; width:clamp(240px,37vw,325px); aspect-ratio:752/705; }
.cat-visual { display:block; width:100%; height:100%; object-fit:contain; object-position:left center; user-select:none; pointer-events:none; transform-origin:left 58%; }
.cat.right .cat-visual { transform:scaleX(-1); transform-origin:center 58%; }
.cat.top .cat-visual,.cat.bottom .cat-visual { transform-origin:center; }
.cat.show .cat-visual { animation:curiousPeek 2.8s 1.45s ease-in-out infinite; }
.cat.top.show .cat-visual { animation:upsideSway 2.5s 1.35s ease-in-out infinite; }
.cat.bottom.show .cat-visual { animation:bottomBounce 2.2s 1.35s ease-in-out infinite; }
.cat.happy .cat-visual { animation:kittySmile .42s ease-in-out 3 alternate; }
.speech-bubble { position:absolute; z-index:8; min-width:126px; max-width:190px; padding:9px 14px; border:3px solid #fff; border-radius:19px; color:#785a76; background:#fffdf7; box-shadow:0 4px 0 #d8adc1,0 8px 18px #6b557633; font:800 clamp(15px,2vw,20px) "Baloo 2"; text-align:center; opacity:0; transform:translate(-50%,8px) scale(.8); transition:.23s; pointer-events:none; }.speech-bubble:after { content:""; position:absolute; bottom:-10px; left:50%; width:15px; height:15px; background:#fffdf7; border-right:3px solid #fff; border-bottom:3px solid #fff; transform:translateX(-50%) rotate(45deg); }.speech-bubble.show { opacity:1; transform:translate(-50%,0) scale(1); }
.start-screen { position:absolute; z-index:20; inset:0; display:grid; place-items:center; padding:25px; background:linear-gradient(#76cfeecc,#c7edf3bb 62%,#88cf83cc); backdrop-filter:blur(1px); transition:opacity .45s,visibility .45s; }.start-screen.hidden { opacity:0; visibility:hidden; pointer-events:none; }.start-card { width:min(420px,94vw); border:4px solid #fff; border-radius:35px; padding:24px 23px 21px; text-align:center; background:#fffdf7; box-shadow:0 11px 0 #e5b87d,0 22px 36px #41687c4a; animation:cardBob 3s ease-in-out infinite; }.little-cat { width:84px; height:70px; display:grid; place-items:center; margin:-52px auto 4px; border:4px solid #fff; border-radius:30px; background:#ffb66c; box-shadow:0 5px 0 #de8e55; font-size:51px; }.start-card p { margin:4px 0 0; color:#a17c99; font:900 13px Nunito; text-transform:uppercase; letter-spacing:.1em; }.start-card h1 { margin:2px 0 15px; color:#5d4a79; font:800 clamp(32px,7vw,46px)/.88 "Baloo 2"; }.start-card h1 span { color:#f4819e; }.play-button { min-height:70px; width:85%; border:4px solid #fff; border-radius:22px; color:#fff; background:#ff8eaa; box-shadow:0 6px 0 #d46182,0 10px 17px #d7668044; font:900 28px "Baloo 2"; cursor:pointer; }.play-button span { display:inline-grid; place-items:center; width:27px; height:27px; border-radius:50%; font-size:14px; vertical-align:2px; background:#fff8; }.play-button:active { transform:translateY(5px); box-shadow:0 1px 0 #d46182; }.start-card small { display:block; margin-top:13px; color:#a394a3; font:800 12px Nunito; }.gentle-hint { position:absolute; z-index:9; left:50%; bottom:18px; margin:0; color:#fffdf8; text-shadow:0 2px #4d9670; font:900 15px "Baloo 2"; transform:translateX(-50%); transition:opacity .25s; }.celebration { position:absolute; inset:0; z-index:15; pointer-events:none; overflow:hidden; }.celebration span { position:absolute; font-size:clamp(22px,4vw,38px); animation:burst 1.2s ease-out forwards; }
@keyframes cloudDrift { from { translate:-20vw 0; } to { translate:120vw 0; } } @keyframes sunGlow { 50% { scale:1.06; } } @keyframes balloonBob { 50% { translate:4px -16px; rotate:4deg; } } @keyframes butterfly { 25% { translate:75px -25px; rotate:14deg; } 50% { translate:145px 12px; } 75% { translate:75px 25px; rotate:-12deg; } } @keyframes birdFly { to { translate:120vw -24px; } } @keyframes bubbleFloat { to { translate:12px -280px; opacity:0; } } @keyframes treeSway { 50% { rotate:2deg; } } @keyframes flowerSway { 50% { rotate:8deg; translate:3px -2px; } } @keyframes blink { 94%,98% { scaleY(1); } 96% { scaleY(.08); } }
@keyframes peekLeft { from { opacity:0; translate:-104% 0; rotate:-4deg; } to { opacity:1; translate:0; rotate:0; } } @keyframes peekRight { from { opacity:0; translate:104% 0; rotate:4deg; } to { opacity:1; translate:0; rotate:0; } } @keyframes peekTop { from { opacity:0; translate:0 -104%; } to { opacity:1; translate:0; } } @keyframes peekBottom { from { opacity:0; translate:0 104%; } to { opacity:1; translate:0; } } @keyframes kittyBop { 50% { translate:0 -6px; rotate:1deg; } } @keyframes curiousPeek { 0%,100% { translate:0 0; rotate:0; } 45% { translate:3% -3%; rotate:1.2deg; } 70% { translate:1% 1%; rotate:-.7deg; } } @keyframes upsideSway { 0%,100% { translate:0 0; rotate:-2deg; } 50% { translate:0 2%; rotate:2deg; } } @keyframes bottomBounce { 0%,100% { translate:0 0; scale:1; } 50% { translate:0 -3%; scale:1.02; } } @keyframes happyCat { 0%,100% { rotate:0; scale:1; } 25% { rotate:-9deg; scale:1.08; } 50% { rotate:9deg; scale:1.13; } 75% { rotate:-7deg; scale:1.08; } } @keyframes wave { to { rotate:24deg; } } @keyframes earWiggle { to { rotate:12deg; } } @keyframes cardBob { 50% { translate:0 -8px; } } @keyframes burst { from { opacity:1; scale:.4; } to { opacity:0; translate:var(--burst-x) var(--burst-y); rotate:400deg; scale:1.25; } }
@keyframes kittySmile { to { scale:1.04; rotate:-2deg; } }
@media (max-width:560px) { .hud { height:65px; padding:10px 14px; }.playfield { top:65px; }.logo { font-size:22px; }.star-badge,.sound-toggle { min-height:42px; border-width:2px; border-radius:15px; }.star-badge { font-size:19px; padding:3px 11px 3px 6px; }.star-badge span { font-size:23px; }.sound-toggle { width:45px; font-size:18px; }.sun { right:5%;top:8%; }.hill-far { height:29%;bottom:22%; }.hill-near { height:31%; }.tree { bottom:15%; }.flower-bed { bottom:11%; }.flower-bed i:nth-child(4) { display:none; }.cat { width:185px; height:185px; }.cat.left { --x:-20%; }.cat.right { --x:calc(100% - 148px); }.cat.top { --y:-12%; }.cat.bottom { --y:calc(100% - 144px); }.cat.top-left,.cat.bottom-left { --x:-19%; }.cat.top-right,.cat.bottom-right { --x:calc(100% - 148px); }.cat.top-left,.cat.top-right { --y:-10%; }.cat.bottom-left,.cat.bottom-right { --y:calc(100% - 142px); }.gentle-hint { bottom:10px; font-size:14px; white-space:nowrap; }.speech-bubble { max-width:140px; padding:7px 9px; } }
@media (max-width:560px) { .cat { width:122px; height:auto; aspect-ratio:602/1260; }.cat.left { left:0; top:27%; }.cat.right { left:auto; right:0; top:27%; }.cat.top,.cat.bottom { left:50%; right:auto; height:auto; transform:translateX(-50%); }.cat.top { top:0; width:200px; aspect-ratio:548/643; }.cat.bottom { top:auto; bottom:0; width:225px; aspect-ratio:752/705; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }