@font-face{font-family:Nunito;src:url('assets/nunito.ttf') format('truetype');font-weight:400 1000;font-display:swap}
:root{color-scheme:dark;--ink:#613c78;--cream:#fff2dc;--pink:#ed8fc3;--scale:1}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#23152e;display:grid;place-items:center;font-family:Nunito,'Trebuchet MS',sans-serif;color:var(--cream)}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}button:focus-visible{outline:4px solid #fff5ad;outline-offset:5px}button,button svg{user-select:none}button{touch-action:manipulation}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#game{width:1024px;height:1024px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--scale));transform-origin:center;overflow:hidden;isolation:isolate;background:#59406a;box-shadow:0 0 100px #09040e}
.room{position:absolute;inset:0;z-index:-2;background:url('assets/room.png') center/cover no-repeat}.screen{position:absolute;inset:0}.ambient{position:absolute;inset:0;pointer-events:none;z-index:1}.ambient i{position:absolute;font-style:normal;color:#ffd4ec;font-size:23px;animation:twinkle 4s ease-in-out infinite;text-shadow:0 0 15px #ff84c9}.ambient i:nth-child(1){left:8%;top:26%}.ambient i:nth-child(2){left:92%;top:39%;animation-delay:1s}.ambient i:nth-child(3){left:5%;top:70%;animation-delay:2.8s}.ambient i:nth-child(4){left:86%;top:24%;animation-delay:2s}.ambient i:nth-child(5){left:90%;top:87%;animation-delay:.4s}.ambient i:nth-child(6){left:21%;top:52%;animation-delay:1.7s}.ambient i:nth-child(7){left:9%;top:92%;animation-delay:3s}
.icon-button{display:grid;place-items:center;width:62px;height:62px;border:2px solid #ffdfef;border-radius:22px;background:linear-gradient(#ffcae3,#eb89bd);box-shadow:inset 0 3px 0 #fff8,0 5px 0 #a04b88,0 9px 16px #2c14364d;color:#79417e;transition:transform .18s,filter .18s}.icon-button:hover{filter:brightness(1.1);transform:translateY(-2px)}.icon-button:active{transform:translateY(3px)}.icon-button svg{width:33px;height:33px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}.gear{position:absolute;right:29px;top:30px;z-index:5}.menu-tag{position:absolute;top:225px;width:100%;margin:0;text-align:center;font-size:27px;font-weight:900;letter-spacing:.4px;text-shadow:0 3px 6px #452455}
.menu-art{position:absolute;left:32px;right:32px;top:280px;height:418px}.sprite{background-image:url('assets/kittens.png');background-size:400% 200%;background-position:var(--sx) var(--sy);background-repeat:no-repeat;pointer-events:none}.menu-friend{position:absolute;width:300px;height:300px;top:5px;filter:drop-shadow(0 15px 10px #3721444d);animation:float 5s ease-in-out infinite}.friend-left{left:42px;transform:rotate(-8deg)}.friend-right{right:38px;animation-delay:-2.5s}.cuddle{position:absolute;left:245px;top:68px;width:470px;height:470px;filter:drop-shadow(0 16px 14px #42234c4d);animation:breathe 4s ease-in-out infinite}.menu-heart{position:absolute;color:#ffe6fa;font-size:44px;text-shadow:0 0 18px #ff83d0;animation:float 3.5s ease-in-out infinite}.heart-one{left:392px;top:49px;transform:rotate(-16deg)}.heart-two{right:366px;top:80px;font-size:28px;animation-delay:-2s}
.menu-actions{position:absolute;top:753px;left:242px;width:540px;display:flex;flex-direction:column;align-items:center;gap:18px}.candy-button{border:3px solid #ffe5f3;border-radius:37px;background:linear-gradient(180deg,#ffc9e4 0%,#f79fd0 43%,#ed83bd 100%);color:#fff9e9;font-weight:1000;text-shadow:0 3px 0 #b65797;box-shadow:inset 0 5px 2px #fff9,inset 0 -4px 3px #b3478426,0 7px 0 #a75088,0 11px 22px #35193460;transition:transform .18s,filter .18s,box-shadow .18s;position:relative}.candy-button:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-3px)}.candy-button:active:not(:disabled){transform:translateY(4px);box-shadow:inset 0 3px 2px #fff7,0 2px 0 #a75088,0 5px 12px #35193450}.primary{min-height:88px;width:100%;font-size:37px;letter-spacing:.1px}.primary:disabled{font-size:25px;opacity:.85}.paw-mark{font-size:25px;display:inline-block;margin:0 20px;color:#ffefd9}.secondary{min-height:60px;min-width:225px;border-radius:25px;font-size:25px;background:linear-gradient(#ebc8f9,#cda3e5);text-shadow:0 2px 0 #9961ac;box-shadow:inset 0 4px 1px #fff8,0 5px 0 #835e9b,0 9px 16px #35193440}.menu-help{font-size:20px;font-weight:800;letter-spacing:.4px;margin:4px 0;color:#ffe4f4;text-shadow:0 2px 4px #40214a}.asset-error{position:absolute;bottom:12px;text-align:center;width:100%;color:#fff;background:#633a65;padding:10px}
.instruction{position:absolute;top:221px;width:100%;text-align:center;margin:0;font-size:27px;line-height:38px;font-weight:1000;text-shadow:0 3px 5px #452455}.hud{position:absolute;left:81px;right:81px;top:275px;height:73px;display:flex;justify-content:space-between;align-items:center}.hud-pill{height:70px;min-width:177px;padding:6px 23px 6px 16px;border:2px solid #ffe0f1;border-radius:30px;display:flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(#ffd3eb,#eea2d2);color:#643d7a;box-shadow:inset 0 3px 0 #fff8,0 4px 0 #a561a5,0 7px 12px #3d234c40}.hud-pill>span{font-size:43px;color:#b85b9d;text-shadow:0 2px 1px #fff6;line-height:1}.hud-pill>div{text-align:center;display:flex;flex-direction:column}.hud-label{font-size:17px;line-height:20px;font-weight:1000}.hud-pill strong{font-size:28px;line-height:29px;font-weight:1000}.hud-pill strong span{font-size:23px}.moves-pill{min-width:195px}.moves-pill.low{background:linear-gradient(#ffe2d3,#ffa6b7);animation:gentlePulse 1.8s infinite}.peek-badge{font-size:23px;font-weight:900;text-shadow:0 2px 5px #402047;display:flex;align-items:center;gap:9px}.peek-badge b{display:inline-grid;place-items:center;width:39px;height:39px;background:#f8c7e8;color:#704a85;border-radius:50%;text-shadow:none}.peek-badge.ready{font-size:21px;color:#ffdbf3}
.board{position:absolute;top:357px;left:44px;width:936px;height:592px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:0}.box{position:relative;background:none;border:0;padding:0;min-width:0;color:#fff;outline-offset:-12px!important;border-radius:38px;perspective:800px}.box-art{position:absolute;left:50%;top:50%;width:246px;height:246px;transform:translate(-50%,-50%);transition:filter .2s}.box .sprite{position:absolute;inset:0;filter:drop-shadow(0 10px 7px #3b234b3b);will-change:transform,opacity}.closed-box{--sx:66.666667%;--sy:100%;transition:opacity .14s,transform .25s}.open-box{opacity:0;transform:translateY(10px) scale(.86);transition:opacity .12s,transform .38s cubic-bezier(.2,.9,.3,1.4)}.box:nth-child(3n+2) .closed-box{filter:hue-rotate(-55deg) drop-shadow(0 10px 7px #3b234b3b)}.box:nth-child(3n) .closed-box{filter:hue-rotate(15deg) drop-shadow(0 10px 7px #3b234b3b)}.box:hover:not(:disabled) .box-art{filter:brightness(1.08);animation:boxWiggle .65s ease-in-out}.box:active:not(:disabled) .box-art{margin-top:4px}.box.revealed .closed-box,.box.matched .closed-box{opacity:0;transform:translateY(8px) scale(.85)}.box.revealed .open-box,.box.matched .open-box{opacity:1;transform:translateY(0) scale(1)}.box.matched .open-box{animation:kittenBreathe 3.7s ease-in-out infinite;animation-delay:var(--delay,0s);filter:drop-shadow(0 0 9px #ffbde066) drop-shadow(0 8px 6px #39214644)}.box.match-pop .box-art{animation:matchPop .6s ease-out}.box.mismatch .box-art{animation:shake .36s ease-in-out}.match-heart{position:absolute;top:12px;right:27px;color:#fff0d8;font-size:24px;text-shadow:0 0 12px #ff80cd;opacity:0;transform:scale(0);transition:.3s}.matched .match-heart{opacity:1;transform:scale(1)}.kitten-name{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);font-size:16px;line-height:23px;font-weight:900;background:#65406fa8;padding:0 12px;border:1px solid #eab8db66;border-radius:20px;opacity:0;transition:opacity .2s;white-space:nowrap}.revealed .kitten-name,.matched .kitten-name{opacity:1}
.game-footer{position:absolute;bottom:17px;left:100px;right:100px;display:flex;justify-content:center;align-items:center;gap:18px;height:40px}.pair-trail{display:flex;gap:7px}.pair-trail span{color:#fff2dc45;font-size:23px;text-shadow:0 1px 3px #492e5d}.pair-trail span.found{color:#ffd4e9;text-shadow:0 0 10px #fda4d9}.game-footer p{font-size:18px;font-weight:900;text-shadow:0 2px 4px #402047;margin:0}.effects{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:hidden}.particle{position:absolute;font-size:25px;animation:particleFly 1.1s ease-out forwards;color:#ffdaed;text-shadow:0 0 9px #fc8bca}.confetti{top:-35px;animation:confettiFall var(--duration,3s) linear forwards;font-size:23px}.toast{position:absolute;left:50%;top:335px;transform:translate(-50%,-20px);opacity:0;z-index:10;pointer-events:none;background:linear-gradient(#fff0d9,#f4c1dc);border:2px solid #fff3e9;color:#74427e;border-radius:25px;padding:8px 23px;font-weight:1000;font-size:22px;box-shadow:0 5px 16px #43225344;transition:opacity .2s,transform .2s;white-space:nowrap}.toast.visible{opacity:1;transform:translate(-50%,0)}
.modal{position:absolute;inset:0;margin:auto;width:574px;max-width:none;max-height:none;border:3px solid #ffe9f5;border-radius:43px;padding:45px 43px 30px;color:var(--ink);background:radial-gradient(ellipse at 50% 0,#fff9ef 0,transparent 55%),linear-gradient(145deg,#fbe1f3,#e6bfe9);box-shadow:inset 0 5px 1px #fff9,0 10px 0 #936297,0 25px 80px #21112d88;text-align:center;overflow:visible}.modal::backdrop{background:#291237a8;backdrop-filter:blur(6px)}.modal[open]{animation:modalIn .3s ease-out}.modal h2{font-size:43px;line-height:1.15;margin:10px 0 8px;font-weight:1000;letter-spacing:-1px;text-shadow:0 2px 0 #fff8}.modal-subtitle{margin:0 0 25px;font-size:21px;font-weight:800;color:#8c5f91}.close{position:absolute;right:16px;top:16px;width:42px;height:42px;border-radius:16px;font-size:32px;line-height:1}.modal-sparkle{font-size:36px;color:#c77db5;text-shadow:0 2px white}.setting-row{display:flex;align-items:center;justify-content:space-between;text-align:left;gap:20px;border-top:1px solid #b683b344;padding:22px 0}.setting-name{display:block;font-size:25px;font-weight:1000}.setting-description{display:block;font-size:16px;font-weight:800;color:#976b9a;margin-top:3px}.toggle{position:relative;width:100px;height:46px;border:2px solid #fef1f8;border-radius:30px;background:#b388bd;box-shadow:inset 0 2px 4px #63427033;color:white;flex-shrink:0}.toggle span{position:absolute;left:4px;top:4px;height:34px;width:34px;border-radius:50%;background:linear-gradient(#fffcf1,#ffe3ec);box-shadow:0 2px 4px #714a8244;transition:transform .2s}.toggle b{position:absolute;right:12px;top:10px;font-size:15px}.toggle[aria-checked=true]{background:linear-gradient(#ea94c3,#d36fac)}.toggle[aria-checked=true] span{transform:translateX(51px)}.toggle[aria-checked=true] b{right:auto;left:13px}.modal-main{min-height:72px;font-size:29px;border-radius:30px;margin-top:19px}.text-button{display:block;border:0;background:none;margin:23px auto 0;padding:5px 12px;color:#83558a;font-size:19px;font-weight:900;text-decoration:underline;text-underline-offset:5px}.text-button:hover{color:#b14f91}.music-note{font-size:15px;margin:0;color:#8c587d}.result-modal{padding-top:204px}.result-kittens{position:absolute;width:340px;height:340px;left:50%;top:-90px;transform:translateX(-50%);filter:drop-shadow(0 12px 9px #70437433)}.result-stars{font-size:45px;letter-spacing:9px;color:#e9a650;line-height:1;text-shadow:0 2px 0 #fff6,0 0 14px #ffc989}.result-stars .dim{color:#b997bc}.result-description{font-size:22px;line-height:1.5;font-weight:800;margin:17px 5px 7px;color:#8b5c90}.result-modal h2{font-size:41px}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:.9;transform:scale(1.15)}}@keyframes float{0%,100%{translate:0 0;rotate:-3deg}50%{translate:0 -13px;rotate:3deg}}@keyframes breathe{0%,100%{scale:1}50%{scale:1.025}}@keyframes kittenBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.017)}}@keyframes boxWiggle{0%,100%{transform:translate(-50%,-50%) rotate(0)}30%{transform:translate(-50%,-53%) rotate(-3deg)}65%{transform:translate(-50%,-53%) rotate(3deg)}}@keyframes matchPop{0%,100%{transform:translate(-50%,-50%) scale(1)}40%{transform:translate(-50%,-55%) scale(1.1)}}@keyframes shake{0%,100%{transform:translate(-50%,-50%)}25%{transform:translate(-53%,-50%) rotate(-2deg)}75%{transform:translate(-47%,-50%) rotate(2deg)}}@keyframes gentlePulse{50%{filter:brightness(1.12)}}@keyframes modalIn{from{opacity:0;translate:0 18px;scale:.95}to{opacity:1;translate:0 0;scale:1}}@keyframes particleFly{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1.2)}}@keyframes confettiFall{0%{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translateY(1090px) rotate(460deg)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.particle,.confetti{display:none}}

.modal-mask{position:absolute;inset:0;z-index:20;background:#291237a8;backdrop-filter:blur(6px)}.modal{z-index:21}.effects{z-index:22}

#back-menu,#result-menu{width:100%;font-size:25px}
.result-modal{padding-top:270px}