@import "https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@600;700;800&display=swap";:root{--ink:#20345b;--blue:#4568db;--blue-dark:#304bb0;--cream:#fff9e9}*{box-sizing:border-box}body{min-width:320px;color:var(--ink);background:#dff5ff;margin:0}button{font:inherit}.memory-page{isolation:isolate;background:radial-gradient(circle at 12% 14%,#ffffffeb 0 5%,#0000 5.2%),radial-gradient(circle at 88% 24%,#ffffffa6 0 4.5%,#0000 4.7%),linear-gradient(#aee6ff 0%,#ddf6ff 52%,#f9f4cd 100%);min-height:100svh;padding:clamp(16px,3vw,34px);font-family:Nunito,system-ui,sans-serif;position:relative;overflow:hidden}.memory-page:before,.memory-page:after{z-index:-2;content:"";border-radius:50% 50% 0 0;width:68vw;height:27vw;position:absolute;bottom:-12vw}.memory-page:before{background:#87d88c;left:-18vw;transform:rotate(5deg)}.memory-page:after{background:#6fc77e;right:-20vw;transform:rotate(-4deg)}.game-shell{z-index:1;backdrop-filter:blur(8px);background:#fffdf4ed;border:4px solid #ffffffe6;border-radius:clamp(24px,4vw,42px);width:min(940px,100%);margin:0 auto;padding:clamp(18px,2.8vw,34px);position:relative;box-shadow:0 16px #3b649724,0 30px 70px #335b9233}.game-header,.instruction-row{justify-content:space-between;align-items:center;gap:18px;display:flex}.game-header{margin-bottom:10px}.title-group{align-items:center;gap:clamp(8px,1.5vw,14px);display:flex}.back-button{aspect-ratio:1;color:#7c5715;background:#ffdf77;border:3px solid #fff;border-radius:50%;flex:none;place-items:center;width:clamp(34px,4vw,44px);font-family:system-ui,sans-serif;font-size:clamp(1.15rem,2vw,1.45rem);font-weight:900;line-height:1;text-decoration:none;transition:translate .15s,box-shadow .15s,background-color .15s;display:grid;box-shadow:0 5px #deb84a,0 7px 12px #60481824}.back-button:hover{background:#ffe794;translate:0 -2px;box-shadow:0 7px #deb84a,0 10px 14px #60481829}.back-button:active{translate:0 3px;box-shadow:0 2px #deb84a}.back-button:focus-visible{outline-offset:3px;outline:4px solid #4568db}.globe{aspect-ratio:1;background:#dff6ff;border:3px solid #fff;border-radius:50%;flex:none;place-items:center;width:clamp(54px,7vw,76px);font-size:clamp(33px,4vw,48px);display:grid;transform:rotate(-7deg);box-shadow:0 6px #b6dce8}.eyebrow{color:#ef6d71;letter-spacing:.14em;text-transform:uppercase;margin:0 0 -4px;font-family:"Baloo 2",system-ui,sans-serif;font-size:clamp(.72rem,1.5vw,.95rem);font-weight:800}h1,h2{font-family:"Baloo 2",system-ui,sans-serif}h1{color:var(--blue-dark);letter-spacing:-.04em;text-shadow:0 3px #fff,0 6px #4568db1f;margin:0;font-size:clamp(2rem,5vw,3.5rem);font-weight:800;line-height:.95}.score-pill,.moves,.helper-note{border-radius:999px;align-items:center;gap:7px;font-weight:800;display:flex}.score-pill{color:#895c16;background:#fff1b8;flex:none;padding:10px 16px;box-shadow:inset 0 -3px #f1d477}.score-pill>span:first-child{font-size:1.2rem}.score-divider{opacity:.45}.instruction-row{margin:15px 2px 16px}.instruction-row>p:first-child{color:#5f708b;margin:0;font-weight:700}.moves{color:#4860a5;white-space:nowrap;background:#e6edff;flex:none;margin:0;padding:7px 12px;font-size:.88rem}.game-board{perspective:1000px;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(6px,1.2vw,12px);display:grid}.memory-card{aspect-ratio:1.18;cursor:pointer;perspective:800px;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:clamp(10px,1.5vw,17px);outline:none;min-width:0;padding:0;position:relative}.card-inner{border-radius:inherit;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.2,.8,.25,1.25),box-shadow .2s,translate .2s;display:block;position:absolute;inset:0;box-shadow:0 5px #263d9d,0 7px 12px #2a3c7638}.memory-card:hover:not(:disabled) .card-inner,.memory-card:focus-visible .card-inner{translate:0 -3px;box-shadow:0 8px #263d9d,0 11px 16px #2a3c7638}.memory-card:focus-visible .card-inner{outline-offset:3px;outline:4px solid #ffbe3f}.memory-card:active:not(:disabled) .card-inner{translate:0 2px}.memory-card.is-open .card-inner{transform:rotateY(180deg)}.memory-card.is-matched .card-inner{box-shadow:0 5px 0 color-mix(in srgb, var(--country-color), #25304d 35%), 0 0 0 4px #fff, 0 0 0 7px #ffd951;animation:.55s both matched-pop}.card-face{border-radius:inherit;backface-visibility:hidden;place-items:center;display:grid;position:absolute;inset:0;overflow:hidden}.card-back{color:#fff;background:radial-gradient(circle at 25% 25%,#ffffff26 0 4px,#0000 5px) 0 0/24px 24px,linear-gradient(145deg,#6688f7,#405dcc);border:3px solid #7693ff}.back-ring{aspect-ratio:1;background:#ffffff1f;border:3px solid #ffffffe6;border-radius:50%;place-items:center;width:clamp(25px,4vw,43px);font-family:"Baloo 2",sans-serif;font-size:clamp(1.05rem,2.6vw,1.8rem);font-weight:800;line-height:1;display:grid}.back-stars{color:#ffe17a;font-size:clamp(.6rem,1.2vw,.9rem);position:absolute;top:8%;right:10%}.card-front{background:linear-gradient(145deg, #fff 0%, color-mix(in srgb, var(--country-color), white 83%) 100%);border:3px solid #fff;grid-template-rows:minmax(0,1fr) auto;gap:clamp(4px,.55vw,7px);padding:clamp(4px,.7vw,8px);transform:rotateY(180deg)}.flag{object-fit:cover;object-position:center;filter:drop-shadow(0 3px 3px #24304c33);user-select:none;border:1px solid #20345b1a;border-radius:clamp(3px,.5vw,7px);align-self:end;width:92%;height:100%;min-height:0}.country-name{width:100%;color:color-mix(in srgb, var(--country-color), #25304d 50%);text-align:center;text-overflow:ellipsis;white-space:nowrap;align-self:center;font-size:clamp(.42rem,1.15vw,.76rem);font-weight:800;line-height:1.1;overflow:hidden}.match-badge{aspect-ratio:1;color:#fff;background:#44bf78;border:2px solid #fff;border-radius:50%;place-items:center;width:clamp(15px,2vw,22px);font-size:clamp(.55rem,1vw,.8rem);font-weight:900;display:grid;position:absolute;top:5px;right:5px;box-shadow:0 2px 4px #00000026}.helper-note{color:#7d641c;background:#fff1b8;width:max-content;max-width:100%;margin:21px auto 0;padding:8px 15px;font-size:clamp(.72rem,1.5vw,.9rem)}.cloud{z-index:-1;filter:blur(.2px);background:#ffffffb3;border-radius:60px;width:180px;height:55px;position:absolute}.cloud:before,.cloud:after{content:"";background:inherit;border-radius:50%;position:absolute}.cloud:before{width:62px;height:62px;bottom:18px;left:28px}.cloud:after{width:80px;height:80px;bottom:10px;right:28px}.cloud--left{top:20%;left:-55px}.cloud--right{bottom:19%;right:-45px;transform:scale(.8)}.sky-decor{z-index:-1;color:#ffc846e6;font-size:2.2rem;animation:2s ease-in-out infinite twinkle;position:absolute}.sky-decor--one{top:7%;left:4%}.sky-decor--two{animation-delay:-.8s;top:8%;right:5%}.win-overlay{z-index:20;backdrop-filter:blur(8px);background:#1e30598a;place-items:center;padding:20px;animation:.35s both fade-in;display:grid;position:fixed;inset:0}.win-card{z-index:2;width:min(440px,100%);color:var(--ink);text-align:center;background:linear-gradient(160deg,#fffdf3,#fff4bf);border:5px solid #fff;border-radius:38px;padding:44px clamp(24px,6vw,52px) 38px;animation:.6s cubic-bezier(.15,.9,.3,1.25) both win-pop;position:relative;box-shadow:0 16px #e6b73f,0 30px 80px #12204666}.trophy{filter:drop-shadow(0 7px #7c500926);margin-top:-94px;font-size:6.5rem;animation:1.1s ease-in-out infinite alternate trophy-bounce}.win-kicker{color:#ef6d71;letter-spacing:.08em;text-transform:uppercase;margin:4px 0 -4px;font-weight:900}.win-card h2{color:#405dcc;text-shadow:0 4px #d5ddff;margin:0;font-size:clamp(3rem,12vw,5rem);line-height:1}.win-card p:not(.win-kicker){color:#53647f;max-width:300px;margin:13px auto;font-size:1.05rem;line-height:1.5}.win-stars{color:#ffbd2e;letter-spacing:.2em;margin:6px 0 17px;font-size:1.7rem}.play-again{color:#fff;cursor:pointer;background:linear-gradient(#6b8cff,#4663da);border:0;border-radius:999px;justify-content:center;align-items:center;gap:9px;min-width:190px;padding:14px 24px;font-size:1.08rem;font-weight:900;transition:translate .15s,box-shadow .15s;display:inline-flex;box-shadow:0 6px #2c43a3,0 10px 18px #3047a140}.play-again:hover{translate:0 -2px;box-shadow:0 8px #2c43a3,0 12px 20px #3047a140}.play-again:active{translate:0 4px;box-shadow:0 2px #2c43a3}.play-again:focus-visible{outline-offset:4px;outline:4px solid #ffbd2e}.confetti{pointer-events:none;position:absolute;inset:0;overflow:hidden}.confetti i{border-radius:3px;width:11px;height:20px;animation-name:confetti-fall;animation-timing-function:linear;animation-iteration-count:infinite;position:absolute;top:-10%}@keyframes matched-pop{0%,to{scale:1}50%{scale:1.1}}@keyframes twinkle{50%{opacity:.4;transform:scale(.7)rotate(20deg)}}@keyframes fade-in{0%{opacity:0}}@keyframes win-pop{0%{opacity:0;transform:scale(.65)rotate(-5deg)}}@keyframes trophy-bounce{to{transform:translateY(-7px)rotate(4deg)}}@keyframes confetti-fall{to{transform:translate(25px,120vh)rotate(760deg)}}@media (width>=621px){html,body{height:100%;overflow:hidden}.memory-page{place-items:center;width:100%;height:100svh;min-height:0;padding:clamp(8px,2vh,24px);display:grid}.game-shell{width:min(940px,142svh - 312.4px,100%);max-height:calc(100svh - 16px);padding:clamp(14px,2vh,26px)}.game-header{margin-bottom:clamp(2px,.6vh,8px)}.instruction-row{margin:clamp(7px,1.2vh,14px) 2px}.helper-note{margin-top:clamp(10px,1.5vh,18px)}}@media (width<=620px){.memory-page{place-items:center;min-height:100svh;padding:10px;display:grid;overflow-y:auto}.game-shell{border-width:3px;border-radius:24px;padding:15px 10px 18px}.game-header{align-items:center;gap:8px}.title-group{gap:7px}.back-button{width:32px}.globe{width:46px;font-size:29px}.eyebrow{white-space:nowrap;font-size:.62rem}h1{white-space:nowrap;font-size:clamp(1.55rem,7vw,1.8rem)}.score-pill{gap:4px;padding:7px 9px;font-size:.75rem}.score-label{display:none}.instruction-row{margin:12px 2px}.instruction-row>p:first-child{font-size:.75rem}.moves{padding:5px 8px;font-size:.7rem}.game-board{grid-template-columns:repeat(5,minmax(0,78px));justify-content:center;gap:5px}.memory-card{aspect-ratio:1;border-radius:10px;width:100%}.card-inner{box-shadow:0 3px #263d9d,0 4px 7px #2a3c7633}.card-back,.card-front{border-width:2px}.helper-note{margin-top:15px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
