*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden}
body{font-family:'Fredoka',system-ui,sans-serif;color:#2b2140;min-height:100vh;
 background:radial-gradient(circle at 10% 0,#fff 0,transparent 45%),linear-gradient(#bfe9ff,#e8f7ff 45%,#fff)}
.top{text-align:center;padding:10px 12px 4px}
.links{display:flex;justify-content:space-between;gap:8px;max-width:1100px;margin:0 auto 4px}
.links a{font-weight:600;color:#7b4dff;text-decoration:none;background:#fff;padding:8px 16px;border-radius:999px;box-shadow:0 3px 0 #7b4dff55;font-size:16px}
.links a:hover,.links a:focus-visible{background:#f3edff}
.gtitle{font-weight:700;line-height:.95;font-size:clamp(30px,4.6vw,56px);-webkit-text-stroke:.06em #fff;paint-order:stroke fill;
 text-shadow:0 .03em 0 #fff,0 .07em 0 rgba(40,20,90,.35),0 .1em .2em rgba(0,0,0,.2)}
.gtitle .line{display:inline}.gtitle .w{display:inline-block;white-space:nowrap}
.sub{font-weight:600;color:#ff4f9a;font-size:clamp(17px,2vw,22px)}
main{max-width:1100px;margin:0 auto;padding:6px 10px 20px}
.hud{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;margin:6px 0 10px;font-size:18px}
.hud span{background:#fff;border-radius:14px;padding:6px 12px;box-shadow:0 3px 0 #00b3ff44}
.btn{font:inherit;font-weight:700;border:0;cursor:pointer;color:#fff;border-radius:999px;padding:8px 18px;min-height:44px;
 background:linear-gradient(90deg,#ff4f9a,#7b4dff);box-shadow:0 4px 0 #4b2bb0}
.btn:active{transform:translateY(2px)}
.board{--gap:clamp(6px,1.2vw,14px);display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap);margin:0 auto;
 width:min(100%,calc((100vh - 225px) * 1.5))}
.card{position:relative;aspect-ratio:1;border:0;background:none;padding:0;cursor:pointer;perspective:800px;border-radius:16px;min-width:44px}
.card:focus-visible{outline:4px solid #7b4dff;outline-offset:3px}
.inner{position:absolute;inset:0;transition:transform .45s cubic-bezier(.3,1.4,.5,1);transform-style:preserve-3d}
.card.flipped .inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;align-items:center;justify-content:center}
.back{background:radial-gradient(circle at 30% 25%,#fff6 0,transparent 35%),conic-gradient(from 30deg,#ff3b3b,#ff8a00,#ffd000,#2ecc40,#00b3ff,#7b4dff,#ff4fd8,#ff3b3b);
 border:4px solid #fff;box-shadow:0 5px 0 #7b4dff66,0 8px 14px rgba(0,0,0,.12);flex-direction:column;color:#fff;font-weight:700;text-align:center;line-height:1;
 font-size:clamp(9px,1.25vw,15px);text-shadow:0 2px 0 rgba(0,0,0,.35);padding:4px}
.back .em{font-size:2.4em;margin-bottom:.15em}
.front{transform:rotateY(180deg);background:#fff;border:4px solid #ffd000;box-shadow:0 5px 0 #ffb30088}
.front img{width:88%;height:88%;object-fit:contain}
.card.matched .front{border-color:#2ecc40;box-shadow:0 5px 0 #2ecc4088;animation:pop .5s}
@keyframes pop{50%{transform:rotateY(180deg) scale(1.1)}}
@media (max-width:640px){
 .board{grid-template-columns:repeat(4,1fr);width:min(100%,calc((100vh - 230px) * .667))}
 .back{font-size:clamp(9px,2.6vw,13px)}
 .hud{font-size:15px;gap:6px}
 .links a{font-size:14px;padding:7px 12px}
}
.win{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:rgba(191,233,255,.85);padding:16px;overflow:hidden}
.win[hidden]{display:none}
.panel{position:relative;z-index:2;background:#fff;border-radius:28px;padding:20px 26px 26px;text-align:center;max-width:440px;width:100%;
 border:5px solid #ff4f9a;box-shadow:0 10px 0 #7b4dff,0 20px 40px rgba(0,0,0,.2);animation:in .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes in{from{transform:scale(.5);opacity:0}}
.panel img{width:min(220px,50vw);height:auto;animation:bob 1.2s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-10px) rotate(4deg)}}
.panel h2{color:#ff4f9a;font-size:clamp(24px,5vw,32px)}
.cheer{font-size:20px;font-weight:600;color:#7b4dff;margin:4px 0 10px}
.stats{font-size:18px;margin-bottom:16px}
.btn.big{font-size:22px;padding:12px 32px}
.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
@media (prefers-reduced-motion:reduce){.inner,.confetti i,.panel img{transition:none;animation:none}}