:root{--pink:#e8175d;--pink-dark:#c20d4b;--pink-light:#ffd6e3;--pink-soft:#fde8ef;--navy:#13287a;--purple:#b3137f;--white:#fff;--font:"Fredoka", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{touch-action:manipulation;height:100%;font-family:var(--font);color:var(--navy);-webkit-user-select:none;user-select:none;background:#f7a8c0;margin:0;overflow:hidden}body{place-items:center;display:grid}button{font:inherit;cursor:pointer;border:0}.stage{zoom:var(--scale,1);background:linear-gradient(#f9588a 0%,#fb9ab6 30%,#fcd0dc 62%,#fde6ec 100%);width:540px;height:960px;position:relative;overflow:hidden;box-shadow:0 0 60px #a0003c40}.bg,.bg>div{pointer-events:none;position:absolute;inset:0}.bg-clouds{background:radial-gradient(40% 12% at 15% 55%,#ffffffb3,#0000 70%),radial-gradient(45% 14% at 85% 62%,#ffffffa6,#0000 70%),radial-gradient(60% 18% at 50% 80%,#ffffffb3,#0000 70%),radial-gradient(50% 20% at 70% 18%,#ffdce68c,#0000 70%)}.bg>.bg-bushes{filter:blur(1.5px);background:radial-gradient(circle at 5% 85%,#7ed957 0 22%,#0000 23%),radial-gradient(circle at 22% 105%,#9be15d 0 30%,#0000 31%),radial-gradient(circle at 95% 80%,#7ed957 0 22%,#0000 23%),radial-gradient(circle at 78% 108%,#b6ea5f 0 30%,#0000 31%),radial-gradient(circle at 50% 130%,#d9f27a 0 36%,#0000 37%),radial-gradient(circle at 0 60%,#5cc65a 0 12%,#0000 13%),radial-gradient(circle at 100% 55%,#5cc65a 0 12%,#0000 13%);height:22%;top:auto}.bg-clouds{animation:14s ease-in-out infinite alternate clouds-drift}.bg>.bg-bushes{transform-origin:bottom;animation:6s ease-in-out infinite alternate bushes-sway}@keyframes clouds-drift{0%{transform:translate(-24px)}to{transform:translate(24px)}}@keyframes bushes-sway{0%{transform:scaleY(1)}to{transform:scaleY(1.04)}}.screen{padding:max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));opacity:0;visibility:hidden;flex-direction:column;align-items:center;transition:opacity .35s,transform .35s,visibility 0s linear .35s;display:flex;position:absolute;inset:0;transform:scale(1.03)}.screen.is-active{opacity:1;visibility:visible;transition:opacity .35s,transform .35s;transform:none}.btn{min-width:62%;color:var(--white);border-radius:999px;justify-content:center;align-items:center;gap:.6em;padding:.55em 1.4em;font-size:30px;font-weight:600;transition:transform .12s;display:inline-flex}.btn:active{transform:scale(.95)}.btn-primary{background:linear-gradient(180deg, #f5357a 0%, var(--pink) 50%, var(--pink-dark) 100%);border:4px solid var(--white);text-shadow:0 2px #00000026;box-shadow:0 6px #a00a3d,0 10px 24px #a0003c59}.btn-ghost{background:var(--white);color:var(--pink);border:3px solid var(--pink-light)}.btn .icon{width:.9em;height:.9em}.timer{background:linear-gradient(180deg, #f0356f, var(--pink-dark));border:3px solid var(--white);height:56px;color:var(--white);font-variant-numeric:tabular-nums;border-radius:999px;align-self:flex-start;align-items:center;padding-right:26px;font-size:30px;font-weight:600;display:inline-flex;box-shadow:0 6px 16px #a0003c4d}.timer-clock{background:var(--white);border-radius:50%;width:72px;height:72px;margin:-8px 10px 0 -14px;padding:4px;box-shadow:0 4px 10px #a0003c4d}.timer-clock svg{display:block}.timer.is-low{animation:.6s ease-in-out infinite alternate pulse}.timer-center{align-self:center}.timer-big{margin-top:16px;transform:scale(1.2)}.score{background:linear-gradient(180deg, #f0356f, var(--pink-dark));border:3px solid var(--white);color:var(--white);border-radius:999px;align-items:center;gap:12px;padding:6px 34px 6px 14px;display:inline-flex;box-shadow:0 6px 16px #a0003c4d}.score .star{filter:drop-shadow(0 2px 2px #0003);width:50px;height:50px}.score-text{flex-direction:column;line-height:1;display:flex}.score-text small{font-size:20px;font-weight:500}.score-text b{font-variant-numeric:tabular-nums;font-size:30px;font-weight:600}.score.bump b{animation:.4s bump}.score-center{margin:18px 0}.tagline{text-align:center;color:var(--navy);margin:10px 0;font-size:27px;font-weight:600;line-height:1.3}.panel{background:#ffffffe0;border:3px solid #fffffff2;border-radius:28px;width:100%;overflow:hidden;box-shadow:0 10px 30px #a0003c33}.panel-head{text-align:center;color:var(--white);background:linear-gradient(180deg, #f5357a, var(--pink-dark));border-radius:0 0 26px 26px;margin:0;padding:14px;font-size:38px;font-weight:600}.screen-start{isolation:isolate;padding-bottom:0}.logo-wrap{align-self:flex-start;width:56%;max-width:260px;margin-left:-20px;position:relative}.logo-wrap .logo{width:100%;display:block}.logo-wrap:after{content:"";pointer-events:none;background:linear-gradient(110deg,#0000 40%,#ffffffbf 50%,#0000 60%) 150% 0/250% 100% no-repeat;position:absolute;inset:0;-webkit-mask:url(/images/game/logo.png) 50%/100% 100% no-repeat;mask:url(/images/game/logo.png) 50%/100% 100% no-repeat}.title .word{justify-content:center;display:flex}.title .ch{display:inline-block}.btn-start{overflow:hidden}.btn-start:after{content:"";background:linear-gradient(90deg,#0000,#ffffff8c,#0000);width:30%;position:absolute;inset:0 auto 0 -40%;transform:skew(-20deg)}.floaties{--heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.8-8 11-8 11z'/%3E%3C/svg%3E");z-index:-1;pointer-events:none;position:absolute;inset:0;overflow:hidden}.floaties .heart{width:var(--size);height:var(--size);background:var(--color);-webkit-mask:var(--heart) center / contain no-repeat;-webkit-mask:var(--heart) center / contain no-repeat;mask:var(--heart) center / contain no-repeat;opacity:0;animation:rise var(--dur) var(--delay) linear infinite;position:absolute;bottom:-40px}.floaties .sparkle{width:var(--size);height:var(--size);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 6px #ffffffe6);animation:twinkle var(--dur) var(--delay) ease-in-out infinite;background:#fff;position:absolute}.screen-start.is-active .logo-wrap{animation:.8s cubic-bezier(.3,1.5,.5,1) .1s both drop-in}.screen-start.is-active .logo-wrap:after{animation:4s ease-in-out 1.2s infinite glint}.screen-start.is-active .title{animation:.8s cubic-bezier(.3,1.6,.5,1) .35s both title-in,3.2s ease-in-out 1.2s infinite title-float}.screen-start.is-active .title .ch{animation:letter-wave 2.6s calc(1.4s + var(--i) * 70ms) ease-in-out infinite}.screen-start.is-active .title-cards{animation:2.4s ease-in-out 1.4s infinite cards-wiggle}.screen-start.is-active .tagline{animation:.6s ease-out .8s both fade-up}.screen-start.is-active .hero{animation:1s cubic-bezier(.2,1,.3,1) .5s both hero-rise,4s ease-in-out 1.6s infinite hero-bob}.screen-start.is-active .btn-start{animation:.6s cubic-bezier(.3,1.6,.5,1) 1.1s both pop-in,1.6s ease-in-out 1.8s infinite btn-pulse}.screen-start.is-active .btn-start:after{animation:2.8s ease-in-out 2s infinite glint-btn}.screen-start.is-active .btn-start .icon{animation:1.6s ease-in-out 1.8s infinite nudge}@keyframes drop-in{0%{opacity:0;transform:translateY(-160px)rotate(-10deg)}}@keyframes glint{0%,60%{background-position:150% 0}to{background-position:-50% 0}}@keyframes glint-btn{0%,55%{left:-40%}to{left:130%}}@keyframes title-in{0%{opacity:0;transform:scale(.2)rotate(-12deg)}}@keyframes title-float{0%,to{transform:rotate(-2deg)translateY(0)}50%{transform:rotate(1deg)translateY(-8px)}}@keyframes letter-wave{0%,30%,to{transform:translateY(0)scale(1)}12%{transform:translateY(-12px)scale(1.08)}}@keyframes cards-wiggle{0%,to{transform:rotate(0)translateY(0)}25%{transform:rotate(10deg)translateY(-6px)}50%{transform:rotate(-4deg)translateY(0)}}@keyframes fade-up{0%{opacity:0;transform:translateY(24px)}}@keyframes hero-rise{0%{opacity:0;transform:translateY(260px)}}@keyframes hero-bob{0%,to{transform:translateY(0)}50%{transform:translateY(8px)}}@keyframes pop-in{0%{opacity:0;transform:scale(.3)}}@keyframes btn-pulse{0%,to{transform:scale(1);box-shadow:0 6px #a00a3d,0 10px 24px #a0003c59,0 0 #ffffffb3}50%{transform:scale(1.06);box-shadow:0 6px #a00a3d,0 10px 24px #a0003c59,0 0 0 16px #fff0}}@keyframes nudge{0%,to{transform:translate(0)}50%{transform:translate(6px)}}@keyframes rise{0%{opacity:0;transform:translate(0)rotate(0)}10%{opacity:var(--alpha)}50%{transform:translate(var(--drift), -500px) rotate(15deg)}90%{opacity:var(--alpha)}to{opacity:0;transform:translateY(-1040px)rotate(-10deg)}}@keyframes twinkle{0%,to{opacity:0;transform:scale(0)rotate(0)}50%{opacity:1;transform:scale(1)rotate(90deg)}}.title{background:var(--pink);border:5px solid var(--white);color:var(--white);border-radius:34px;flex-direction:column;align-items:center;margin:4px 0 0;padding:6px 30px 12px;font-size:86px;font-weight:700;line-height:.95;display:flex;position:relative;transform:rotate(-2deg);box-shadow:0 8px #b70c47,0 14px 30px #a0003c4d}.title-cards{position:absolute;top:18px;right:-22px}.title-cards i{border:4px solid var(--white);background:var(--pink);border-radius:8px;width:48px;height:60px;position:absolute;transform:rotate(14deg)}.title-cards i+i{background:var(--white) url(/images/game/logo.png) center / 90% no-repeat;border-color:var(--pink);top:-8px;left:-10px;transform:rotate(-4deg)}.hero{object-fit:contain;object-position:bottom center;flex:auto;width:calc(100% + 40px);min-height:0;margin:auto -20px 0}.screen-howto{justify-content:space-between;gap:18px}.steps{margin:0;padding:6px 24px;list-style:none}.steps li{align-items:center;gap:18px;padding:20px 0;font-size:28px;font-weight:600;line-height:1.25;display:flex}.steps li+li{border-top:2px solid var(--pink-light)}.steps b{background:var(--pink);width:64px;height:64px;color:var(--white);border-radius:50%;flex:none;place-items:center;font-size:34px;display:grid;box-shadow:inset 0 -4px #00000026}.howto-cards{justify-content:center;gap:12px;padding:16px 0 36px;display:flex;position:relative}.mini-card{border:4px solid var(--pink-light);border-radius:14px;width:130px;height:150px;overflow:hidden;box-shadow:0 6px 14px #a0003c33}.mini-face{background:var(--white);transform:rotate(-8deg)}.mini-face img{object-fit:contain;width:100%;height:100%}.mini-icon{transform:rotate(6deg)}.dash{background:linear-gradient(var(--pink), var(--pink)) 0 0 / 100% 5px no-repeat, linear-gradient(var(--pink), var(--pink)) 0 50% / 100% 5px no-repeat, linear-gradient(var(--pink), var(--pink)) 0 100% / 100% 5px no-repeat;border-radius:3px;width:24px;height:36px;position:absolute;top:70px}.dash-l{left:calc(50% - 180px);transform:skewY(20deg)}.dash-r{right:calc(50% - 180px);transform:skewY(-20deg)}.screen-game{gap:10px}.banner{margin:4px 0 2px;position:relative;transform:rotate(-1.5deg)}.banner span{border:3px solid var(--white);background:linear-gradient(180deg, #f5357a, var(--pink-dark));color:var(--white);border-radius:16px;padding:8px 22px;font-size:26px;font-weight:600;display:block;box-shadow:0 6px 16px #a0003c4d}.banner:before,.banner:after{content:"";background:linear-gradient(var(--pink), var(--pink)) 0 0 / 100% 4px no-repeat, linear-gradient(var(--pink), var(--pink)) 0 50% / 100% 4px no-repeat, linear-gradient(var(--pink), var(--pink)) 0 100% / 100% 4px no-repeat;width:26px;height:28px;margin-top:-14px;position:absolute;top:50%}.banner:before{left:-34px;transform:skewY(20deg)}.banner:after{right:-34px;transform:skewY(-20deg)}.board{perspective:900px;grid-template-columns:repeat(4,1fr);gap:3%;width:490px;margin:auto 0;display:grid}.card{aspect-ratio:3/4;transform-style:preserve-3d;background:0 0;padding:0;transition:transform .45s cubic-bezier(.3,1.4,.5,1);position:relative}.card.is-flipped,.card.is-matched{transform:rotateY(180deg)}.card.is-wrong{animation:.4s shake}.card.is-matched .card-face{box-shadow:0 0 0 3px #ffd93b,0 0 18px #ffd93bcc}.card-back,.card-face{backface-visibility:hidden;border:3px solid #f6a3bd;border-radius:12px;position:absolute;inset:0;overflow:hidden;box-shadow:0 4px 10px #a0003c2e,inset 0 0 0 2px #ffffffe6}.card-back{background:radial-gradient(circle at 84% 12%,#f796b459 0 8%,#0000 9%),radial-gradient(circle at 16% 88%,#f796b459 0 8%,#0000 9%),linear-gradient(160deg,#fff1f5,#fbd3df);place-items:center;display:grid}.card-back img{mix-blend-mode:multiply;width:88%}.card-face{background:var(--white);place-items:center;display:grid;transform:rotateY(180deg)}.card-face img{object-fit:contain;width:100%;height:100%;padding:6%}[data-icon]{background:linear-gradient(160deg,#f5357a,#d80f55);place-items:center;display:grid}[data-icon] svg{filter:drop-shadow(0 2px 3px #7800284d);width:64%;height:64%}.card-face[data-icon]{border-color:#f7b7ca}.hud{justify-content:space-between;align-items:center;width:100%;display:flex;position:relative}.btn-pause{background:radial-gradient(circle at 50% 35%, #d0299b, var(--purple));border:4px solid var(--white);border-radius:50%;place-items:center;width:72px;height:72px;display:grid;box-shadow:0 6px 16px #78005059}.btn-pause svg{width:34px;fill:var(--white)}.btn-sound{top:max(20px, env(safe-area-inset-top));z-index:10;background:radial-gradient(circle at 50% 35%, #d0299b, var(--purple));border:4px solid var(--white);width:60px;height:60px;color:var(--white);border-radius:50%;place-items:center;transition:transform .12s,background .2s;display:grid;position:absolute;right:20px;box-shadow:0 6px 16px #78005059}.btn-sound svg{width:30px;height:30px}.btn-sound .sound-off,.btn-sound.is-muted .sound-on{display:none}.btn-sound.is-muted .sound-off{display:block}.btn-sound.is-muted{background:radial-gradient(circle at 50% 35%,#b9a3b2,#8a6f82)}.btn-sound:active{transform:scale(.9)}.btn-pause:active{transform:scale(.93)}.overlay{opacity:0;visibility:hidden;z-index:5;flex-direction:column;justify-content:center;align-items:center;padding:20px;transition:opacity .25s,visibility 0s linear .25s;display:flex;position:absolute;inset:0}.overlay.is-open{opacity:1;visibility:visible;transition:opacity .25s}.overlay-match{background:radial-gradient(circle,#fffac8f2,#fc96b9e6 60%,#f9588ad9)}.rays{aspect-ratio:1;background:repeating-conic-gradient(#ffffff8c 0 6deg, transparent 6deg 24deg);width:160%;animation:8s linear infinite spin;position:absolute;-webkit-mask-image:radial-gradient(circle,#000 10%,#0000 60%);mask-image:radial-gradient(circle,#000 10%,#0000 60%)}.match-pair{gap:14px;display:flex;position:relative}.match-pair>div{aspect-ratio:1;background:var(--white);border:4px solid var(--pink-light);border-radius:22px;place-items:center;width:200px;display:grid;overflow:hidden;box-shadow:0 0 40px #ffe678e6,0 10px 24px #a0003c40}.match-pair>div:first-child{transform:rotate(-6deg)}.match-pair>div:last-child{transform:rotate(6deg)}.match-pair>[data-icon]{background:linear-gradient(160deg,#f5357a,#d80f55)}.match-pair img{object-fit:contain;width:100%;height:100%;padding:10%}.overlay-match.is-open .match-pair{animation:.45s cubic-bezier(.3,1.6,.5,1) pop}.ribbon{background:linear-gradient(180deg, #f5357a, var(--pink-dark));color:var(--white);border:3px solid #fffc;border-radius:14px;margin-top:22px;padding:12px 40px;font-size:44px;font-weight:600;position:relative;box-shadow:0 8px 18px #a0003c59}.ribbon:before,.ribbon:after{content:"";z-index:-1;background:#a60b40;width:30px;height:100%;position:absolute;top:14px}.ribbon:before{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,40% 50%);left:-18px}.ribbon:after{clip-path:polygon(0 0,100% 0,60% 50%,100% 100%,0 100%);right:-18px}.overlay-pause{-webkit-backdrop-filter:blur(6px);background:#fa78a08c}.panel-small{max-width:340px}.pause-actions{flex-direction:column;gap:14px;padding:24px;display:flex}.pause-actions .btn{width:100%}.result-badge{background:linear-gradient(180deg, #f5357a, var(--pink-dark));border:4px solid var(--white);width:100%;color:var(--white);text-align:center;border-radius:44px;flex-direction:column;align-items:center;margin-top:90px;padding:20px 20px 22px;display:flex;position:relative;transform:rotate(-1deg);box-shadow:0 10px 28px #a0003c59}.result-badge h2{margin:0;font-size:64px;font-weight:700;line-height:1}.result-badge p{margin:6px 0 0;font-size:27px;font-weight:600}.stars{align-items:flex-end;display:flex;position:absolute;top:-46px}.stars .star{filter:drop-shadow(0 3px 3px #a0003c4d);width:56px;height:56px}.stars .star:nth-child(2){z-index:1;width:80px;height:80px;margin:0 -14px;position:relative}.screen-win.is-active .result-badge,.screen-lose.is-active .result-badge{animation:.5s cubic-bezier(.3,1.6,.5,1) pop}.screen-win{isolation:isolate}.hero-win{z-index:-1;width:100%;height:auto;margin:0;position:absolute;bottom:0;left:0;right:0}.btn-float{bottom:max(28px, env(safe-area-inset-bottom));position:absolute}.screen-lose{justify-content:flex-start;gap:6px}.result-lose{margin-top:110px;padding-top:80px}.sad{border:5px solid var(--pink);background:#ffd27a;border-radius:50%;width:160px;height:160px;position:absolute;top:-96px}.screen-lose .btn{margin-top:auto;margin-bottom:20px}.confetti{pointer-events:none;position:absolute;inset:0;overflow:hidden}.confetti i{border-radius:3px;width:10px;height:16px;animation:linear infinite fall;position:absolute;top:-20px}.screen-end{padding:0}.end-art{object-fit:cover;width:100%;height:100%}@keyframes pulse{to{background:linear-gradient(#ff4d4d,#c20d2b);transform:scale(1.06)}}@keyframes bump{50%{transform:scale(1.5)}}@keyframes shake{0%,to{transform:rotateY(180deg)translate(0)}25%{transform:rotateY(180deg)translate(6px)}75%{transform:rotateY(180deg)translate(-6px)}}@keyframes pop{0%{opacity:0;transform:scale(.4)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fall{to{transform:translateY(1000px)rotate(720deg)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}