@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap");
:root{--ink:#28324a;--muted:#69738a;--purple:#6d55bb;--purple2:#9b82e0;--orange:#ee8d55;--cream:#fff8ed;--mint:#cce9df;--line:#e3dcec}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Cairo,Arial,sans-serif}
button{font:inherit}
body{color:var(--ink);background:radial-gradient(circle at 8% 28%,#f7dfc7 0 12%,transparent 12.2%),radial-gradient(circle at 90% 78%,#ded5f7 0 15%,transparent 15.2%),linear-gradient(145deg,#fffaf1,#f5f0ff);overflow-x:hidden;display:flex;flex-direction:column}
header{min-height:90px;padding:12px clamp(18px,5vw,68px);display:flex;align-items:center;justify-content:space-between;gap:14px;background:#ffffffdf;border-bottom:1px solid #5b467515;backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:12px}.brand img{width:76px;height:58px;object-fit:contain}.brand b,.brand small{display:block}.brand b{color:var(--purple)}.brand small{font-size:11px;color:var(--muted)}
.tools{display:flex;gap:8px}.tool{width:44px;height:44px;border:1px solid #ded7e8;background:#fff;color:var(--ink);border-radius:14px;display:grid;place-items:center;text-decoration:none;cursor:pointer;font-size:20px}.tool.off{opacity:.45}
main{width:min(1180px,calc(100% - 28px));margin:auto;flex:1}.screen{display:none}.screen.active{display:block;animation:show .35s ease}@keyframes show{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.welcome-layout,.levels-layout,.finish-layout{min-height:calc(100svh - 190px);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(35px,7vw,90px);padding:clamp(28px,6vw,70px)}
.welcome-copy,.levels-copy,.finish-copy{text-align:right}.eyebrow{display:inline-block;padding:8px 15px;border-radius:99px;background:#eee9ff;color:var(--purple);font-weight:800}.welcome-copy h1,.levels-copy h1,.finish-copy h1{font-size:clamp(40px,6vw,70px);line-height:1.15;margin:16px 0}.welcome-copy h1 span{color:var(--orange)}.welcome-copy p,.levels-copy p,.finish-copy p{font-size:clamp(17px,2vw,21px);line-height:1.9;color:var(--muted);max-width:600px;margin:0 0 24px}
.primary{border:0;border-radius:18px;padding:15px 31px;background:linear-gradient(135deg,var(--purple),var(--purple2));color:#fff;font-weight:900;font-size:18px;cursor:pointer;box-shadow:0 14px 28px #6d55bb35}
.memory-scene{position:relative;height:430px;direction:ltr}.orbit{position:absolute;width:330px;height:330px;border:3px dashed #8f77d050;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-12deg)}.brain{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:115px;filter:drop-shadow(0 20px 25px #44356a33)}.scene-card{position:absolute;width:118px;height:148px;border:8px solid #fff;border-radius:24px;background:linear-gradient(145deg,#7b64c8,#5c439f);box-shadow:0 20px 32px #43346e2e;display:grid;place-items:center}.scene-card:after{content:"";position:absolute;inset:12px;border:2px solid #ffffff50;border-radius:13px}.scene-card i{font-style:normal;font-size:55px;z-index:1}.card-a{left:4%;top:10%;transform:rotate(-12deg);background:linear-gradient(145deg,#f7b879,#e67d46)}.card-b{right:3%;bottom:8%;transform:rotate(10deg);background:linear-gradient(145deg,#f7b879,#e67d46)}.card-c{left:12%;bottom:5%;transform:rotate(7deg);color:#fff;font-size:50px}.spark{position:absolute;color:#f2a64c;font-size:32px}.s1{right:15%;top:8%}.s2{left:45%;bottom:0}
.level-select{min-height:calc(100svh - 190px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(30px,6vw,75px) 0}.level-select h1{font-size:clamp(36px,5vw,58px);line-height:1.2;margin:14px 0}.level-select p{font-size:clamp(16px,2vw,20px);color:var(--muted);margin:0}.level-grid{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:30px}.level{min-height:205px;border:2px solid #e4dbea;background:#fff;border-radius:24px;padding:24px 15px;text-align:center;color:var(--ink);cursor:pointer;transition:.2s;box-shadow:0 13px 28px #523d7510}.level:hover{transform:translateY(-4px);border-color:var(--purple2);box-shadow:0 16px 32px #6c55b324}.level span{display:block;font-size:50px;margin-bottom:8px}.level b,.level small{display:block}.level b{font-size:18px}.level small{color:var(--muted);margin-top:5px}
.game-shell{min-height:calc(100svh - 190px);padding:clamp(24px,4vw,50px) 0}.game-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.game-top small{color:var(--purple);font-weight:800}.game-top h2{margin:4px 0;font-size:clamp(25px,4vw,38px)}.game-stats{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}.game-stats span{background:#fff;border:1px solid var(--line);border-radius:15px;padding:9px 13px;font-weight:700}.progress{height:10px;background:#e9e2f1;border-radius:99px;overflow:hidden;margin:18px 0}.progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--purple),var(--orange));transition:.35s}.instruction{text-align:center;color:var(--muted);font-size:18px;margin:12px}
.memory-board{width:min(900px,100%);margin:18px auto;display:grid;grid-template-columns:repeat(var(--cols,4),minmax(72px,1fr));gap:clamp(9px,1.5vw,15px);perspective:1000px}.memory-card{position:relative;aspect-ratio:.78;border:0;background:transparent;cursor:pointer;transform-style:preserve-3d;transition:transform .42s}.memory-card.flipped,.memory-card.matched{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;border-radius:clamp(15px,2vw,23px);display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 12px 24px #40325f20}.card-back{background:linear-gradient(145deg,var(--purple2),var(--purple));border:6px solid #fff}.card-back:before{content:"✦";color:#ffffffaa;font-size:clamp(25px,5vw,48px)}.card-back:after{content:"";position:absolute;inset:12px;border:2px solid #ffffff42;border-radius:14px}.card-front{background:#fff;border:3px solid #eee8f4;transform:rotateY(180deg);font-size:clamp(34px,6vw,67px)}.memory-card.matched .card-front{background:#ebf8f1;border-color:#72bf9b}.feedback{min-height:36px;text-align:center;font-size:18px;font-weight:800;color:var(--purple)}
.finish-layout{grid-template-columns:.8fr 1.2fr}.finish-art{position:relative;min-height:340px;display:grid;place-items:center}.finish-art span{font-size:170px;filter:drop-shadow(0 25px 28px #8f6a2a31)}.finish-art i{position:absolute;color:var(--orange);font-style:normal;font-size:40px}.finish-art i:nth-child(2){top:20%;left:15%}.finish-art i:nth-child(3){right:12%;bottom:22%}.result-stats{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.result-stats span{min-width:120px;background:#fff;border:1px solid var(--line);border-radius:17px;padding:12px 17px;text-align:center}.result-stats b,.result-stats small{display:block}.result-stats b{font-size:24px;color:var(--purple)}.result-stats small{color:var(--muted)}
.finish-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;direction:rtl}.finish-btn{min-height:58px;padding:13px 28px;border-radius:18px;font:800 18px Cairo,Arial,sans-serif;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;white-space:nowrap}.finish-btn.next{border:0;background:linear-gradient(135deg,var(--purple),var(--purple2));color:#fff;box-shadow:0 12px 25px #6d55bb35}.finish-btn.secondary{border:1px solid #d8dfe7;background:#fff;color:var(--ink)}
.finish-btn[hidden]{display:none!important}
@media(max-width:900px) and (min-width:761px){.level-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){header{min-height:74px;padding:8px 13px}.brand img{width:58px;height:45px}.brand b{font-size:13px}.brand small{font-size:9px}.tool{width:40px;height:40px}.welcome-layout,.finish-layout{min-height:calc(100svh - 145px);grid-template-columns:1fr;gap:10px;padding:25px 8px;text-align:center}.welcome-copy,.finish-copy{text-align:center}.welcome-copy p,.finish-copy p{margin-left:auto;margin-right:auto}.memory-scene{height:250px;grid-row:1}.orbit{width:210px;height:210px}.brain{font-size:78px}.scene-card{width:75px;height:95px;border-width:5px;border-radius:17px}.scene-card i{font-size:35px}.card-a{left:5%}.card-b{right:4%}.card-c{left:12%}.level-select{min-height:calc(100svh - 145px);padding:28px 0}.level-grid{grid-template-columns:1fr;gap:9px;margin-top:22px}.level{min-height:0;display:grid;grid-template-columns:65px 1fr;text-align:right;align-items:center;padding:12px 18px}.level span{font-size:43px;grid-row:1/3;margin:0}.level small{margin:0}.game-shell{padding:22px 0}.game-top{align-items:flex-start;flex-direction:column}.game-stats{justify-content:flex-start}.memory-board{gap:8px;grid-template-columns:repeat(var(--cols,3),1fr)}.memory-board.large{grid-template-columns:repeat(4,1fr)}.card-back{border-width:4px}.finish-art{min-height:190px;grid-row:1}.finish-art span{font-size:105px}.result-stats{justify-content:center}.finish-actions{justify-content:center;gap:8px}.finish-btn{min-height:52px;padding:11px 15px;font-size:14px;border-radius:15px}}