:root{
  --ink:#3e3154;--muted:#716981;--purple:#755ef6;--pink:#ff6fb1;--gold:#ffc94f;
  --glass:rgba(255,255,255,.88);--shadow:0 18px 50px rgba(50,34,78,.22);
  font-family:Inter,ui-rounded,"Trebuchet MS",system-ui,sans-serif;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;color:var(--ink)}
body{min-height:100vh;background:#cfeeff;overflow-x:hidden}button,input{font:inherit}button{cursor:pointer}
.app{min-height:100vh;background-image:linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.11)),url("assets/backgrounds/background-main-menu.png");background-size:cover;background-position:center;background-attachment:fixed;transition:background-image .25s ease;position:relative;isolation:isolate}
.app::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(61,42,90,.08));pointer-events:none}
.topbar{height:74px;position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:9px clamp(12px,3vw,36px);background:rgba(255,255,255,.78);backdrop-filter:blur(15px);border-bottom:1px solid rgba(255,255,255,.8);box-shadow:0 5px 20px rgba(54,39,84,.08)}
.brand{border:0;background:transparent;color:inherit;display:flex;align-items:center;gap:11px;text-align:left;padding:0}.brand-badge{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;color:white;font-weight:1000;background:linear-gradient(135deg,var(--purple),var(--pink));box-shadow:0 8px 16px rgba(117,94,246,.25)}.brand span:last-child{display:flex;flex-direction:column}.brand strong{font-size:clamp(14px,2vw,20px)}.brand small{font-size:10px;letter-spacing:.12em;font-weight:900;color:var(--muted);text-transform:uppercase;margin-top:3px}
.wallet{display:flex;gap:8px}.wallet-pill{height:42px;min-width:68px;padding:6px 11px;border-radius:999px;background:white;box-shadow:0 6px 16px rgba(54,39,84,.12);display:flex;align-items:center;justify-content:center;gap:6px}.wallet-pill img{width:25px;height:25px;object-fit:contain}.wallet-pill b{font-size:17px}
main{width:min(1280px,calc(100% - 24px));margin:0 auto;padding:25px 0 55px}.screen{display:none}.screen.active{display:block;animation:enter .25s ease}@keyframes enter{from{opacity:.35;transform:translateY(7px)}to{opacity:1;transform:none}}
.glass{background:var(--glass);border:1px solid rgba(255,255,255,.88);backdrop-filter:blur(14px);box-shadow:var(--shadow)}
.hero-card{min-height:500px;border-radius:38px;padding:clamp(25px,5vw,64px);display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:20px;background:linear-gradient(115deg,rgba(255,255,255,.95),rgba(255,255,255,.72) 60%,rgba(255,255,255,.35));box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.9);overflow:hidden}.eyebrow{font-size:11px;font-weight:1000;letter-spacing:.16em;color:#6b55e4;text-transform:uppercase}.hero-copy h1{font-size:clamp(44px,6vw,78px);line-height:.95;letter-spacing:-.05em;margin:10px 0 17px}.hero-copy p{max-width:650px;font-size:clamp(16px,2vw,20px);line-height:1.5;color:var(--muted);font-weight:700}.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:24px}.btn{border:0;border-radius:18px;padding:14px 21px;font-weight:1000;box-shadow:0 8px 18px rgba(68,46,96,.16);transition:.16s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(135deg,#755ef6,#ff6fae);color:white}.btn-secondary{background:white;color:var(--ink)}.home-toggles{margin-top:20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}.home-toggles label{background:rgba(255,255,255,.82);padding:9px 13px;border-radius:999px;font-weight:850}.tiny-btn{border:0;background:rgba(255,255,255,.72);color:var(--muted);padding:9px 12px;border-radius:999px;font-weight:800}.hero-art{position:relative;min-height:360px;display:grid;place-items:center}.mascot{height:min(330px,38vw);max-height:330px;filter:drop-shadow(0 18px 22px rgba(55,35,82,.2))}.speech{position:absolute;right:3%;top:4%;background:white;padding:13px 17px;border-radius:22px 22px 22px 5px;font-weight:1000;box-shadow:0 10px 25px rgba(50,34,78,.14);transform:rotate(2deg)}.floating-reward{position:absolute;width:70px;height:70px;border-radius:24px;background:rgba(255,255,255,.9);display:grid;place-items:center;box-shadow:var(--shadow);animation:float 2.8s ease-in-out infinite}.floating-reward img{width:58px;height:58px;object-fit:contain}.reward-star{left:5%;top:18%}.reward-coin{right:7%;bottom:14%;animation-delay:.6s}@keyframes float{50%{transform:translateY(-9px) rotate(3deg)}}
.world-preview{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:17px}.world-chip{border:0;min-height:155px;border-radius:25px;position:relative;overflow:hidden;padding:0;box-shadow:var(--shadow);background:white;text-align:left}.world-chip::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(29,22,48,.74))}.world-chip img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.world-chip span{position:absolute;left:14px;right:14px;bottom:12px;color:white;z-index:2;font-weight:1000;font-size:14px;text-shadow:0 2px 7px rgba(0,0,0,.5)}
.section-head{border-radius:28px;padding:20px 23px;display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:16px}.section-head h2{font-size:clamp(28px,4vw,44px);margin:4px 0}.section-head p{margin:0;color:var(--muted);font-weight:700}.icon-btn{border:0;border-radius:14px;background:white;color:var(--ink);padding:10px 13px;font-weight:900;box-shadow:0 6px 14px rgba(54,39,84,.12)}
.world-map{display:grid;gap:15px}.world-row{min-height:215px;border-radius:30px;position:relative;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.8)}.world-row-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.world-row::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.76) 49%,rgba(255,255,255,.26))}.world-row-inner{position:relative;z-index:2;min-height:215px;padding:22px;display:grid;grid-template-columns:minmax(210px,.8fr) 1.7fr;gap:20px;align-items:center}.world-info h3{font-size:clamp(25px,3vw,39px);margin:4px 0}.world-info p{margin:0;color:var(--muted);font-weight:750}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.level-btn{border:0;min-height:106px;border-radius:21px;background:rgba(255,255,255,.95);color:var(--ink);box-shadow:0 7px 17px rgba(58,38,83,.13);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;transition:.15s}.level-btn:not(:disabled):hover{transform:translateY(-3px)}.level-btn:disabled{opacity:.55;filter:grayscale(.35);cursor:not-allowed}.level-btn strong{font-size:25px}.level-btn .stars{min-height:18px;color:#f4b71f;font-size:13px}.level-btn small{font-size:9px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}.level-btn.challenge{background:linear-gradient(145deg,#fff5c9,#fff)}
.game-header{border-radius:27px;padding:16px 20px;display:flex;justify-content:space-between;gap:15px;align-items:center}.game-header h2{font-size:clamp(25px,3.4vw,40px);margin:3px 0}.game-header p{margin:0;color:var(--muted);font-weight:700}.game-head-actions{display:flex;gap:8px}.stats-strip{display:flex;gap:9px;flex-wrap:wrap;margin:11px 0}.stat{min-width:110px;background:rgba(255,255,255,.91);border-radius:17px;padding:9px 14px;box-shadow:0 7px 17px rgba(54,39,84,.12);display:flex;flex-direction:column}.stat small{font-size:9px;font-weight:1000;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.stat b{font-size:19px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:13px}.board-panel{border-radius:28px;padding:13px;min-height:560px}.message-bar{min-height:43px;border-radius:15px;background:rgba(255,255,255,.78);display:grid;place-items:center;text-align:center;font-weight:900;color:#625778;margin-bottom:11px;padding:8px}.game-board{--cols:4;width:min(900px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:clamp(7px,1.2vw,12px);align-items:start}
.memory-card{position:relative;width:100%;aspect-ratio:.72;border:0;padding:0;background:transparent;min-width:0;isolation:isolate;contain:layout paint;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.card-inner{position:absolute;inset:0;width:100%;height:100%;display:block;transform:none!important;filter:none!important}
.card-face{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;border-radius:clamp(13px,1.6vw,22px);overflow:hidden;border:3px solid rgba(255,255,255,.96);box-shadow:0 8px 18px rgba(49,32,78,.2);background:#fff;transform-origin:center center;backface-visibility:visible;-webkit-backface-visibility:visible;will-change:transform,opacity}
.card-back{display:block;z-index:2;opacity:1;transform:scaleX(1);transition:transform .16s ease .16s,opacity 0s linear .16s}
.card-back img{display:block;width:100%;height:100%;object-fit:cover}
.card-front{z-index:1;opacity:0;transform:scaleX(.035);transition:transform .16s ease 0s,opacity 0s linear .16s;background:linear-gradient(180deg,#fffdfb,#fff5e8);padding:7px;display:flex;flex-direction:column;align-items:center;justify-content:stretch}
.memory-card.flipped .card-back,.memory-card.matched .card-back,.memory-card.peeked .card-back{z-index:1;opacity:0;transform:scaleX(.035);transition:transform .16s ease 0s,opacity 0s linear .16s}
.memory-card.flipped .card-front,.memory-card.matched .card-front,.memory-card.peeked .card-front{z-index:2;opacity:1;transform:scaleX(1);transition:transform .16s ease .16s,opacity 0s linear .16s}
.card-front .art-wrap{width:100%;height:calc(100% - 31px);border-radius:clamp(9px,1.2vw,15px);background:rgba(255,255,255,.96);display:grid;place-items:center;overflow:hidden}
.card-front .art-wrap img{width:92%;height:92%;object-fit:contain;display:block;filter:drop-shadow(0 4px 4px rgba(64,45,84,.14))}
.card-name{height:31px;width:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(8px,1vw,12px);line-height:1;font-weight:1000;color:#60566c;padding:3px}
.memory-card.matched .card-face{box-shadow:0 0 0 4px rgba(99,208,144,.55),0 9px 20px rgba(49,32,78,.16)}
.memory-card.golden .card-front::after{content:"BONUS";position:absolute;right:7px;top:7px;background:#ffd35d;color:#735000;border-radius:999px;padding:4px 6px;font-size:7px;font-weight:1000;letter-spacing:.07em}
.memory-card:not(.matched):hover{transform:translateY(-1px)}
.memory-card:focus-visible{outline:4px solid rgba(117,94,246,.5);outline-offset:3px;border-radius:clamp(13px,1.6vw,22px)}
@media(prefers-reduced-motion:reduce){.card-back,.card-front,.memory-card.flipped .card-back,.memory-card.flipped .card-front,.memory-card.matched .card-back,.memory-card.matched .card-front,.memory-card.peeked .card-back,.memory-card.peeked .card-front{transition:none!important}}
.side-panel{border-radius:25px;padding:14px;align-self:start;position:sticky;top:88px}.mascot-mini{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.7);padding:9px;border-radius:18px;margin-bottom:11px}.mascot-mini img{width:56px;height:72px;object-fit:contain}.mascot-mini div{display:flex;flex-direction:column}.mascot-mini strong{font-size:13px}.mascot-mini small{font-size:10px;color:var(--muted);margin-top:2px}.power-btn{width:100%;border:0;border-radius:17px;background:white;padding:10px;margin-bottom:9px;display:flex;gap:9px;align-items:center;text-align:left;color:var(--ink);box-shadow:0 6px 15px rgba(54,39,84,.12)}.power-btn:disabled{opacity:.46;cursor:not-allowed}.power-btn img{width:45px;height:45px;object-fit:contain;flex:none}.power-btn span{display:flex;flex-direction:column}.power-btn b{font-size:13px}.power-btn small{font-size:9px;color:var(--muted);margin-top:2px}.challenge-box{display:flex;align-items:center;gap:8px;background:linear-gradient(145deg,#fff7d6,#fff);padding:10px;border-radius:18px}.challenge-box img{width:48px;height:48px;object-fit:contain}.challenge-box div{display:flex;flex-direction:column}.challenge-box b{font-size:12px}.challenge-box small{font-size:9px;color:var(--muted)}.hidden{display:none!important}
.modal-wrap{position:fixed;inset:0;z-index:80;background:rgba(39,29,59,.5);backdrop-filter:blur(6px);display:grid;place-items:center;padding:18px;opacity:0;pointer-events:none;transition:.18s}.modal-wrap.open{opacity:1;pointer-events:auto}.result-card{width:min(510px,100%);border-radius:31px;background:white;padding:25px;text-align:center;box-shadow:0 25px 70px rgba(37,24,60,.36);transform:scale(.94);transition:.2s}.modal-wrap.open .result-card{transform:scale(1)}.result-card>img{width:100px;height:90px;object-fit:contain}.result-card h2{font-size:clamp(31px,5vw,48px);letter-spacing:-.04em;margin:5px 0}.result-stars{font-size:47px;color:#ffc43e;letter-spacing:4px}.result-card p{color:var(--muted);font-weight:700}.result-rewards{display:flex;justify-content:center;gap:11px;flex-wrap:wrap;margin:14px 0}.result-rewards span{display:flex;align-items:center;gap:5px;background:#f6f3fa;border-radius:999px;padding:8px 12px;font-weight:900}.result-rewards img{width:27px;height:27px;object-fit:contain}.result-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:9px;margin-top:14px}
.toast{position:fixed;left:50%;bottom:22px;z-index:100;background:#3e3154;color:white;border-radius:999px;padding:11px 16px;font-weight:900;box-shadow:0 10px 25px rgba(0,0,0,.2);transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:.2s}.toast.show{transform:translate(-50%,0);opacity:1}.confetti{position:fixed;inset:0;z-index:95;pointer-events:none;overflow:hidden}.confetti-piece{position:absolute;left:50%;top:48%;width:10px;height:17px;border-radius:3px;background:hsl(var(--h) 90% 62%);animation:burst 1.45s ease-out forwards;transform:translate(-50%,-50%) rotate(var(--r))}@keyframes burst{to{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(calc(var(--r) + 560deg));opacity:0}}
@media(max-width:960px){.hero-card{grid-template-columns:1fr}.hero-art{min-height:260px}.mascot{height:245px}.world-preview{grid-template-columns:repeat(3,1fr)}.world-chip:last-child{grid-column:span 2}.world-row-inner{grid-template-columns:1fr}.game-layout{grid-template-columns:1fr}.side-panel{position:static;display:grid;grid-template-columns:1fr 1fr;gap:8px}.mascot-mini{grid-column:1/-1;margin:0}.power-btn{margin:0}.challenge-box{grid-column:1/-1}}
@media(max-width:650px){.topbar{height:63px;padding:7px 9px}.brand-badge{width:40px;height:40px;border-radius:12px}.brand strong{font-size:12px}.brand small{display:none}.wallet-pill{min-width:53px;height:37px;padding:4px 7px}.wallet-pill img{width:22px;height:22px}.wallet-pill b{font-size:14px}main{width:calc(100% - 12px);padding-top:8px}.hero-card{padding:22px 15px;border-radius:26px;min-height:auto}.hero-copy h1{font-size:45px}.hero-art{min-height:230px}.mascot{height:215px}.speech{font-size:12px}.floating-reward{width:54px;height:54px;border-radius:18px}.floating-reward img{width:44px;height:44px}.world-preview{grid-template-columns:1fr 1fr;gap:7px}.world-chip{min-height:112px;border-radius:18px}.world-chip:last-child{grid-column:1/-1}.section-head{padding:15px;border-radius:20px}.world-row{border-radius:21px}.world-row-inner{padding:13px}.level-grid{gap:6px}.level-btn{min-height:80px;border-radius:15px;padding:4px}.level-btn strong{font-size:19px}.level-btn .stars{font-size:9px}.game-header{border-radius:20px;padding:12px}.game-header h2{font-size:24px}.game-head-actions{flex-direction:column}.stats-strip{gap:5px}.stat{min-width:70px;flex:1;padding:7px 8px}.stat b{font-size:16px}.board-panel{padding:7px;border-radius:20px;min-height:390px}.message-bar{font-size:11px;min-height:36px;margin-bottom:7px}.game-board{gap:6px}.card-face{border-width:2px;border-radius:11px}.card-front{padding:4px}.card-front .art-wrap{height:calc(100% - 22px);border-radius:8px}.card-name{height:22px;font-size:7px;padding:2px}.side-panel{border-radius:20px;padding:9px}.result-card{padding:20px 14px;border-radius:24px}.result-stars{font-size:40px}}
@media(max-width:430px){.game-board[data-cols="5"]{--cols:4!important}.world-preview{grid-template-columns:1fr 1fr}.level-grid{grid-template-columns:repeat(5,1fr)}.level-btn small{display:none}.home-toggles{font-size:12px}}
