:root{
  --ink:#1e1748;--purple:#5a35d6;--purple-dark:#32189b;--pink:#f249aa;--orange:#ff9f2f;
  --yellow:#ffd84a;--blue:#23b9ed;--mint:#53ddc7;--white:#fff;--panel:rgba(255,255,255,.88);
  --shadow:0 20px 60px rgba(47,22,112,.18);--radius:28px;
  font-family:Inter,ui-rounded,"Nunito",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;color:var(--ink)}
body{min-height:100dvh;background:linear-gradient(145deg,#fff1ad 0%,#fbd5f5 42%,#c8f3ff 100%);overflow-x:hidden}
button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:4px solid rgba(35,185,237,.35);outline-offset:2px}
.ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}.blob{position:absolute;border-radius:50%;filter:blur(8px);opacity:.45;animation:float 8s ease-in-out infinite}.blob-a{width:260px;height:260px;background:#ffdc4d;left:-90px;top:8%}.blob-b{width:340px;height:340px;background:#f59ddd;right:-130px;top:25%;animation-delay:-3s}.blob-c{width:300px;height:300px;background:#77dffc;left:32%;bottom:-150px;animation-delay:-6s}.spark{position:absolute;color:#fff;font-size:32px;text-shadow:0 0 15px #fff;animation:twinkle 2.8s ease-in-out infinite}.s1{top:12%;left:17%}.s2{top:20%;right:14%;animation-delay:-1s}.s3{bottom:12%;left:8%;animation-delay:-2s}
.app{width:min(1180px,100%);min-height:100dvh;margin:auto;padding:16px clamp(12px,3vw,28px) 28px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.brand{width:clamp(150px,22vw,255px);height:72px;object-fit:contain;object-position:left center}.top-actions{display:flex;gap:10px}.icon-btn{width:54px;height:54px;border:2px solid rgba(255,255,255,.9);border-radius:18px;background:rgba(255,255,255,.75);box-shadow:0 8px 22px rgba(50,24,122,.12);font-size:24px;color:var(--ink);backdrop-filter:blur(10px);transition:.2s transform,.2s background}.icon-btn:hover{transform:translateY(-2px);background:#fff}
.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.hud-card{background:var(--panel);border:2px solid rgba(255,255,255,.9);border-radius:22px;padding:12px 18px;box-shadow:0 10px 28px rgba(50,24,122,.1);backdrop-filter:blur(10px)}.hud-card span{display:block;font-size:12px;font-weight:900;letter-spacing:.11em;color:#6d6591}.hud-card strong{font-size:clamp(23px,3vw,34px);line-height:1.15}.hud-card:nth-child(2) strong{color:var(--pink)}
.progress-wrap{margin:12px 0;background:var(--panel);border:2px solid rgba(255,255,255,.9);border-radius:20px;padding:10px 16px 13px;box-shadow:0 10px 28px rgba(50,24,122,.1)}.progress-label{display:flex;justify-content:space-between;gap:15px;margin-bottom:8px;font-weight:800;font-size:14px}.progress-track{height:11px;border-radius:99px;background:#e8e1fb;overflow:hidden}.progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--purple),var(--pink),var(--orange));transition:width .45s cubic-bezier(.2,.9,.2,1)}
.game-shell{position:relative;background:linear-gradient(150deg,rgba(31,17,93,.96),rgba(82,34,176,.96));border:3px solid rgba(255,255,255,.92);border-radius:30px;padding:clamp(14px,2vw,24px);box-shadow:var(--shadow);overflow:hidden}.game-shell:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 0%,rgba(56,218,255,.3),transparent 30%),radial-gradient(circle at 100% 100%,rgba(255,87,196,.28),transparent 30%);pointer-events:none}.game-title-row{position:relative;display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;color:#fff}.eyebrow{margin:0 0 2px;font-size:11px;font-weight:1000;letter-spacing:.16em;color:#78e5ff}.game-title-row h1{font-size:clamp(20px,3vw,31px);margin:0}.hint-btn{display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 12px;border:0;border-radius:16px;background:linear-gradient(135deg,#ffe863,#ff9e2f);color:#3a2278;box-shadow:0 8px 24px rgba(255,159,47,.3);font-weight:900}.hint-btn span{font-size:25px}.hint-btn small{display:grid;place-items:center;width:22px;height:22px;background:#fff;border-radius:50%;font-size:12px}.hint-btn:disabled{filter:grayscale(.9);opacity:.55;cursor:not-allowed}
.board{--columns:4;position:relative;display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));gap:clamp(7px,1.3vw,13px);margin:auto;max-width:930px;perspective:1000px}.memory-card{position:relative;aspect-ratio:.82;border:0;background:transparent;padding:0;transform-style:preserve-3d;transition:transform .52s cubic-bezier(.2,.75,.25,1);min-width:0}.memory-card.flipped,.memory-card.matched{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:clamp(12px,2vw,21px);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}.card-back{background:linear-gradient(145deg,#8b56f2,#4a21bd 55%,#31118c);border:3px solid rgba(255,255,255,.84);box-shadow:0 8px 16px rgba(10,4,45,.25),inset 0 0 0 5px rgba(255,255,255,.08)}.card-back:before{content:"";position:absolute;width:58%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff9a9 0 15%,#ffd642 16% 30%,rgba(255,216,66,.35) 31% 52%,transparent 53%);filter:drop-shadow(0 0 8px rgba(255,221,73,.75));animation:pulse 2s ease-in-out infinite}.card-back:after{content:"✦";position:absolute;color:#fff;font-size:clamp(12px,2vw,24px);transform:translate(120%,-130%)}.card-front{transform:rotateY(180deg);background:linear-gradient(160deg,#fff,#fff7dc);border:3px solid #fff;box-shadow:0 8px 18px rgba(10,4,45,.22)}.card-front .icon{font-size:clamp(28px,5.8vw,66px);line-height:1;filter:drop-shadow(0 5px 5px rgba(73,43,134,.14));transform:translateY(-6%)}.card-front .icon img{width:72%;height:72%;object-fit:contain}.card-front .label{position:absolute;left:5px;right:5px;bottom:5px;padding:4px 3px;border-radius:9px;background:rgba(90,53,214,.1);font-size:clamp(8px,1.3vw,13px);font-weight:1000;color:#4420a9;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.memory-card:not(.flipped):not(.matched):hover{transform:translateY(-3px) rotate(-1deg)}.memory-card.matched .card-front{animation:matched .65s ease;box-shadow:0 0 0 4px #62e4ca,0 0 24px #62e4ca}.memory-card.wrong{animation:shake .35s ease}.board.preview .memory-card{transform:rotateY(180deg)}
.toast{position:absolute;left:50%;top:50%;z-index:5;transform:translate(-50%,-50%) scale(.7);opacity:0;pointer-events:none;padding:12px 20px;border-radius:999px;background:#fff;color:var(--purple-dark);font-weight:1000;box-shadow:0 16px 45px rgba(13,5,59,.3);white-space:nowrap}.toast.show{animation:toast .95s ease}
.overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));background:rgba(22,12,66,.58);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:.25s}.overlay.open{opacity:1;visibility:visible}.start-screen{overflow:auto;background:linear-gradient(145deg,rgba(255,242,174,.9),rgba(248,209,244,.9),rgba(184,239,255,.9))}.start-card{position:relative;width:min(850px,100%);display:grid;grid-template-columns:.9fr 1.1fr;overflow:hidden;border:3px solid rgba(255,255,255,.95);border-radius:34px;background:rgba(255,255,255,.9);box-shadow:0 25px 80px rgba(61,25,128,.25)}.start-art{position:relative;display:grid;place-items:center;min-height:530px;background:radial-gradient(circle at 50% 35%,#fff7b6 0 15%,#ffd95b 16% 33%,#f69bcf 63%,#8a5be8 100%);overflow:hidden}.start-art img{position:relative;z-index:2;width:88%;max-height:430px;object-fit:contain;filter:drop-shadow(0 20px 14px rgba(45,17,95,.25));animation:mascotFloat 3.4s ease-in-out infinite}.art-glow{position:absolute;width:320px;height:320px;border-radius:50%;border:2px dashed rgba(255,255,255,.8);animation:spin 18s linear infinite}.art-glow:before,.art-glow:after{content:"✦";position:absolute;color:#fff;font-size:32px}.art-glow:before{top:15%;left:-10px}.art-glow:after{right:-12px;bottom:18%}.start-content{padding:30px clamp(22px,4vw,42px);display:flex;flex-direction:column;justify-content:center}.start-logo{width:215px;height:70px;object-fit:contain;object-position:left;margin-bottom:2px}.start-kicker,.result-kicker{margin:0;color:var(--pink);font-weight:1000;letter-spacing:.15em;font-size:12px}.start-content h2,.modal-card h2{margin:3px 0 8px;font-size:clamp(31px,5vw,46px);line-height:1}.start-description{margin:0 0 18px;line-height:1.45;color:#5e567f}.field-label{display:block;font-size:13px;font-weight:900;margin:0 0 6px}.name-input{width:100%;height:52px;border:2px solid #ddd3fa;border-radius:15px;padding:0 15px;background:#fff;color:var(--ink);font-size:17px;font-weight:750;transition:.2s}.name-input:focus{border-color:var(--purple)}.level-picker{margin:14px 0 18px}.level-picker>span{display:block;font-size:13px;font-weight:900;margin-bottom:7px}.level-buttons{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.level-buttons button{height:42px;border:2px solid #ddd3fa;border-radius:13px;background:#fff;color:var(--purple-dark);font-weight:1000}.level-buttons button.selected{border-color:transparent;background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;transform:translateY(-2px);box-shadow:0 8px 16px rgba(90,53,214,.25)}
.primary-btn,.secondary-btn{width:100%;min-height:52px;border:0;border-radius:16px;font-weight:1000;transition:.18s transform,.18s filter}.primary-btn{background:linear-gradient(135deg,var(--purple),var(--pink) 60%,var(--orange));color:#fff;box-shadow:0 12px 25px rgba(90,53,214,.28)}.primary-btn:hover,.secondary-btn:hover{transform:translateY(-2px);filter:brightness(1.04)}.primary-btn span{margin-right:7px}.secondary-btn{margin-top:9px;background:#eee8ff;color:var(--purple-dark)}.text-btn{align-self:center;border:0;background:transparent;color:var(--purple-dark);font-weight:900;padding:13px 8px 3px}.modal-card{position:relative;width:min(660px,100%);max-height:calc(100dvh - 28px);overflow:auto;padding:clamp(24px,5vw,42px);border-radius:30px;background:linear-gradient(160deg,#fff,#fffafd);box-shadow:0 26px 80px rgba(20,8,72,.3);border:3px solid #fff}.modal-card.compact{width:min(590px,100%)}.center{text-align:center}.close-btn{position:absolute;right:14px;top:14px;width:42px;height:42px;border:0;border-radius:50%;background:#eee8ff;color:var(--purple-dark);font-size:28px;line-height:1}.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0}.how-grid>div{padding:16px;border-radius:18px;background:#f5f0ff}.how-grid span{font-size:30px}.how-grid b{display:block;margin:5px 0}.how-grid p{margin:0;font-size:14px;color:#635a83}.pause-mascot{width:150px;height:150px;object-fit:contain}.modal-card.center>p{color:#645c84}.celebration{overflow:visible}.stars{font-size:34px;letter-spacing:7px;filter:drop-shadow(0 5px 6px rgba(255,170,0,.3))}.result-mascot{width:180px;height:160px;object-fit:contain;margin:-3px auto -4px}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.result-stats>div{padding:11px 5px;border-radius:15px;background:#f3efff}.result-stats span{display:block;font-size:11px;font-weight:900;color:#746a98}.result-stats strong{font-size:21px;color:var(--purple-dark)}.ranking-card{width:min(600px,100%)}.ranking-tabs{display:flex;gap:8px;margin:18px 0 12px}.ranking-tabs button{flex:1;height:42px;border:0;border-radius:12px;background:#eee8ff;color:var(--purple-dark);font-weight:900}.ranking-tabs button.selected{background:var(--purple);color:#fff}.ranking-list{list-style:none;padding:0;margin:0 0 18px;max-height:360px;overflow:auto}.ranking-list li{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:8px;padding:11px 10px;border-bottom:1px solid #eee7fb}.ranking-list li:nth-child(-n+3){background:#fff9df}.rank-position{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#eee8ff;font-weight:1000}.rank-name{font-weight:900}.rank-meta{font-size:12px;color:#766d98}.rank-score{text-align:right;font-weight:1000;color:var(--pink)}.loading{display:block!important;text-align:center;color:#756d95}.confetti{position:fixed;inset:0;z-index:100;pointer-events:none;overflow:hidden}.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:confettiFall var(--duration) linear forwards}
@keyframes float{50%{transform:translateY(-25px) scale(1.04)}}@keyframes twinkle{50%{opacity:.25;transform:scale(.65) rotate(45deg)}}@keyframes pulse{50%{transform:scale(1.08);filter:drop-shadow(0 0 15px rgba(255,221,73,.95))}}@keyframes mascotFloat{50%{transform:translateY(-10px) rotate(1deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes matched{50%{transform:scale(1.09) rotate(-2deg)}}@keyframes shake{25%{transform:translateX(-5px) rotateY(180deg)}75%{transform:translateX(5px) rotateY(180deg)}}@keyframes toast{0%{opacity:0;transform:translate(-50%,-50%) scale(.65)}25%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) scale(.9)}}@keyframes confettiFall{to{transform:translate(var(--drift),110dvh) rotate(780deg)}}
@media(max-width:700px){
  body{min-height:100dvh}.app{padding:8px 8px 18px}.topbar{margin-bottom:7px}.brand{width:145px;height:55px}.top-actions{gap:6px}.icon-btn{width:44px;height:44px;border-radius:14px;font-size:20px}.hud{gap:6px}.hud-card{padding:8px 7px;border-radius:15px}.hud-card span{font-size:8px;letter-spacing:.06em}.hud-card strong{font-size:19px}.progress-wrap{margin:7px 0;padding:7px 10px 9px;border-radius:15px}.progress-label{font-size:11px;margin-bottom:5px}.progress-track{height:8px}.game-shell{border-radius:22px;padding:10px 8px 12px}.game-title-row{margin-bottom:8px}.eyebrow{font-size:8px}.game-title-row h1{font-size:17px}.hint-btn{min-height:40px;padding:5px 8px;border-radius:13px}.hint-btn b{display:none}.hint-btn span{font-size:21px}.hint-btn small{width:19px;height:19px}.board{gap:6px}.card-face{border-radius:11px}.card-back,.card-front{border-width:2px}.card-front .icon{font-size:clamp(25px,9vw,45px)}.card-front .label{font-size:8px;padding:2px;bottom:3px}.start-screen{align-items:start;padding:8px}.start-card{grid-template-columns:105px 1fr;min-height:calc(100dvh - 16px);border-radius:25px}.start-art{min-height:auto}.start-art img{width:130%;max-width:none;transform:translateX(-7%)}.art-glow{width:145px;height:145px}.start-content{padding:16px 14px 14px}.start-logo{width:145px;height:46px}.start-kicker{font-size:9px}.start-content h2{font-size:27px;margin-bottom:5px}.start-description{font-size:13px;margin-bottom:10px}.field-label,.level-picker>span{font-size:11px}.name-input{height:45px;font-size:15px}.level-picker{margin:10px 0}.level-buttons{gap:4px}.level-buttons button{height:36px;border-radius:10px}.primary-btn{min-height:48px}.text-btn{font-size:13px;padding-top:9px}.modal-card{padding:25px 16px 20px;border-radius:24px}.how-grid{grid-template-columns:1fr;gap:7px}.how-grid>div{display:grid;grid-template-columns:42px 1fr;padding:10px;text-align:left}.how-grid span{grid-row:1/3;align-self:center}.how-grid p{font-size:12px}.result-mascot{width:140px;height:125px}.stars{font-size:27px}.result-stats strong{font-size:18px}
}
@media(max-width:430px){.start-card{grid-template-columns:82px 1fr}.start-art img{width:155%;transform:translateX(-13%)}.start-content{padding-left:10px}.level-buttons button{font-size:14px}.toast{font-size:13px}}
@media(max-height:700px) and (max-width:700px){.brand{height:42px}.topbar{margin:0}.icon-btn{width:39px;height:39px}.hud-card{padding:5px 6px}.hud-card strong{font-size:17px}.progress-wrap{padding:5px 9px 7px}.game-title-row{margin-bottom:5px}.start-card{grid-template-columns:95px 1fr}.start-content{padding-top:8px;padding-bottom:8px}.start-logo{height:38px}.start-description{display:none}.name-input{height:41px}.level-picker{margin:7px 0}.level-buttons button{height:33px}.primary-btn{min-height:43px}.text-btn{padding-top:5px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}