@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap");
:root{--ink:#20364a;--muted:#667b84;--teal:#209b99;--teal2:#55c4b7;--coral:#ed765d;--soft:#e9f8f5;--line:#d9e8e5}
*{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% 25%,#f8d9c8 0 12%,transparent 12.2%),radial-gradient(circle at 92% 75%,#cfeee8 0 16%,transparent 16.2%),linear-gradient(145deg,#fffaf6,#effbf9);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 #315e5e12;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(--teal)}.brand small{font-size:11px;color:var(--muted)}.tools{display:flex;gap:8px}.tool{width:44px;height:44px;border:1px solid #d8e5e4;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,.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,.finish-copy{text-align:right}.eyebrow{display:inline-block;padding:8px 15px;border-radius:99px;background:#def3ef;color:#167d7c;font-weight:800}.welcome-copy h1,.finish-copy h1{font-size:clamp(42px,6vw,72px);line-height:1.15;margin:16px 0}.welcome-copy h1 span{color:var(--coral)}.welcome-copy p,.finish-copy p{font-size:clamp(17px,2vw,21px);line-height:1.9;color:var(--muted);max-width:610px;margin:0 0 24px}.primary{border:0;border-radius:18px;padding:15px 31px;background:linear-gradient(135deg,var(--teal),var(--teal2));color:#fff;font-weight:900;font-size:18px;cursor:pointer;box-shadow:0 14px 28px #209b9933}
.studio-scene{position:relative;height:430px;direction:ltr}.canvas{position:absolute;width:330px;height:270px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg);border:12px solid #fff;background:linear-gradient(#bfeef2 0 62%,#a6d77d 62%);border-radius:28px;box-shadow:0 25px 45px #355f6a28;display:grid;place-items:center;overflow:hidden}.canvas i{font-style:normal;font-size:150px}.canvas b{position:absolute;right:-2px;bottom:-2px;width:50%;height:50%;background:#fff;border:3px dashed #7bbab5;border-radius:16px 0 0 0}.piece{position:absolute;right:1%;bottom:8%;width:130px;height:105px;border:8px solid #fff;background:#dff5f2;border-radius:22px;display:grid;place-items:center;font-size:65px;box-shadow:0 18px 30px #355f6a25;transform:rotate(9deg)}.palette{position:absolute;left:0;bottom:5%;font-size:80px}.pencil{position:absolute;right:4%;top:4%;font-size:70px;transform:rotate(-25deg)}.spark{position:absolute;color:var(--coral);font-size:32px}.s1{left:8%;top:10%}.s2{right:13%;bottom:2%}
.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 #d9e7e4;background:#fff;border-radius:24px;padding:24px 15px;text-align:center;color:var(--ink);cursor:pointer;transition:.2s;box-shadow:0 13px 28px #285e5b10}.level:hover{transform:translateY(-4px);border-color:var(--teal2);box-shadow:0 16px 32px #278d8923}.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,48px) 0}.game-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.game-top small{color:var(--teal);font-weight:800}.game-top h2{margin:4px 0;font-size:clamp(25px,4vw,38px)}.stats{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}.stats span{background:#fff;border:1px solid var(--line);border-radius:15px;padding:9px 13px;font-weight:700}.progress{height:10px;background:#dfeeea;border-radius:99px;overflow:hidden;margin:18px 0}.progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--teal),var(--coral));transition:.35s}.instruction{text-align:center;color:var(--muted);font-size:18px;margin:12px}.picture-stage{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:clamp(20px,5vw,60px);width:min(980px,100%);margin:15px auto}.main-picture{aspect-ratio:4/3;background:#fff;border:10px solid #fff;border-radius:30px;overflow:hidden;box-shadow:0 22px 42px #2f686524}.main-picture svg{width:100%;height:100%;display:block}.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.piece-option{aspect-ratio:4/3;border:3px solid #dce9e7;background:#fff;border-radius:20px;padding:7px;overflow:hidden;cursor:pointer;transition:.2s;box-shadow:0 10px 22px #315e5b12}.piece-option:hover{transform:translateY(-3px);border-color:var(--teal)}.piece-option svg{width:100%;height:100%;display:block;border-radius:12px}.piece-option.correct{border-color:#38a978;background:#e8f8ef}.piece-option.wrong{border-color:#df6d6d;background:#fff0f0}.feedback{min-height:38px;text-align:center;font-size:19px;font-weight:800;color:var(--teal)}
.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:165px;filter:drop-shadow(0 25px 28px #2d777029)}.finish-art i{position:absolute;color:var(--coral);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(--teal)}.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(--teal),var(--teal2));color:#fff;box-shadow:0 12px 25px #209b9935}.finish-btn.secondary{border:1px solid #d8e1e7;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}.studio-scene{height:250px;grid-row:1}.canvas{width:210px;height:172px;border-width:8px}.canvas i{font-size:95px}.piece{width:82px;height:66px;font-size:40px;border-width:5px}.palette{font-size:52px}.pencil{font-size:48px}.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}.stats{justify-content:flex-start}.picture-stage{grid-template-columns:1fr;gap:18px}.main-picture{border-width:6px;border-radius:22px}.options{grid-template-columns:repeat(2,1fr)}.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}}

/* إظهار اكتمال الصورة بصريًا قبل الانتقال */
.main-picture{position:relative}
.main-picture.completed{animation:pictureComplete .65s ease}
.completion-mark{position:absolute;left:50%;top:50%;font-size:70px;transform:translate(-50%,-50%) scale(0);pointer-events:none;animation:completionSpark 1s ease forwards}
@keyframes pictureComplete{0%{transform:scale(.97)}55%{transform:scale(1.025);box-shadow:0 0 0 8px #55c4b733,0 25px 48px #2f686532}100%{transform:scale(1)}}
@keyframes completionSpark{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-15deg)}45%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(8deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.65) rotate(18deg)}}