/* ======================= دفاع الكوكب — الستايل (نسخة التصميم المصقول) ======================= */
/* الأرقام العربية (٠–٩) بخط Cairo: في الخط الكرتوني الـ٢ والـ٣ شبه بعض والأطفال بيلخبطوا بينهم */
@font-face{font-family:"DM Digits";font-weight:100 900;font-display:swap;src:url(vendor/fonts/Cairo-800-12.woff2) format("woff2");unicode-range:U+0660-0669}
:root{--sp-font:"DM Digits","Baloo Bhaijaan 2","Cairo","IBM Plex Sans Arabic",sans-serif;--sp-gold:#ffd166;--sp-gold2:#f59e0b;--sp-cyan:#7ff3ff;--sp-ink:#0f2142;--sp-deep:#050b1f;--glass:rgba(10,20,52,.55);--glass-b:rgba(255,255,255,.16)}
body[data-screen]{background:var(--sp-deep) url(img/space/bg.webp) center/cover fixed;color:#fff;font-family:"Cairo","IBM Plex Sans Arabic",sans-serif}
body[data-screen] .app{background:transparent}
.sp-screen{min-height:100dvh;display:flex;flex-direction:column;position:relative;color:#fff}
.sp-screen .num,.sp-screen h1,.sp-screen h2,.sp-screen h3,.sp-screen .btn,.sp-top .title,.hud,.pad,.typed,.banner,.combo,.pl-num,.pl-cap b,.mc .mq,.mast-sum b,.stars-pill{font-family:var(--sp-font)}
/* ---- شريط علوي زجاجي ---- */
.sp-top{padding:calc(10px + env(safe-area-inset-top)) 14px 8px;display:flex;flex-direction:column;gap:6px}
.sp-top .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sp-top .title{font-size:24px;font-weight:800;color:var(--sp-gold);text-align:center;flex:1;letter-spacing:.3px;text-shadow:0 2px 0 rgba(0,0,0,.5),0 6px 24px rgba(255,209,102,.35)}
.sp-top .sub{font-size:13px;color:#c9d8ff;text-align:center;line-height:1.8}
.sp-screen .icon-btn{width:42px;height:42px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-b);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(8px);text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.sp-screen .icon-btn svg{transform:scaleX(-1)}
.stars-pill{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(180deg,rgba(255,209,102,.22),rgba(255,209,102,.1));border:1px solid rgba(255,209,102,.55);color:var(--sp-gold);border-radius:999px;padding:5px 12px;font-weight:800;font-size:15px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
/* ---- أزرار ---- */
.sp-screen .btn{font-weight:800;border-radius:18px;padding:15px 18px;font-size:17px;text-align:center;text-decoration:none;cursor:pointer;border:0;transition:transform .15s,filter .15s,box-shadow .15s;letter-spacing:.2px}
.sp-screen .btn.btn-main{background:linear-gradient(180deg,#ffe08a 0%,#ffc442 48%,#f08c0a 100%);color:var(--sp-ink);box-shadow:0 14px 34px -10px rgba(255,170,40,.75),inset 0 -4px 0 rgba(120,60,0,.28),inset 0 2px 0 rgba(255,255,255,.55);text-shadow:0 1px 0 rgba(255,255,255,.4)}
.sp-screen .btn.btn-main:hover{transform:translateY(-2px);filter:brightness(1.04)}
.sp-screen .btn.btn-main:active{transform:translateY(1px);box-shadow:0 6px 16px -8px rgba(255,170,40,.6),inset 0 -1px 0 rgba(120,60,0,.28)}
.sp-screen .btn.btn-line{background:var(--glass);border:1.5px solid var(--glass-b);color:#fff;backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.sp-screen .btn.btn-line:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.12)}
.sp-screen .muted{color:#c9d8ff}
.digits-toggle.on-ink{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:center}
.digits-toggle.on-ink>span{color:#c9d8ff;font-size:13px}
.digits-toggle.on-ink button{background:var(--glass);border:1px solid var(--glass-b);color:#fff;border-radius:999px;padding:8px 14px;font-weight:800;font-family:var(--sp-font);cursor:pointer;font-size:14px;backdrop-filter:blur(6px)}
.digits-toggle.on-ink button[aria-pressed="true"]{background:linear-gradient(180deg,#ffe08a,#f5b43a);color:var(--sp-ink);border-color:#ffd166;box-shadow:0 6px 16px -6px rgba(255,180,50,.8)}
/* ---- البوابة ---- */
.gate-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:14px}
.lock-ring{width:130px;height:130px;border-radius:50%;display:grid;place-items:center;font-size:54px;background:radial-gradient(circle,rgba(255,209,102,.3),transparent 70%);border:2px dashed rgba(255,209,102,.7);animation:spinSlow 14s linear infinite}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.gate-body h1{margin:6px 0 0;font-size:30px;color:var(--sp-gold)}
.gate-body p{margin:0;line-height:1.9;color:#dbe6ff;max-width:34ch;font-size:15.5px}
.gate-prog{width:min(320px,80%);height:14px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}.gate-prog i{display:block;height:100%;background:linear-gradient(90deg,#ffd166,#f59e0b);border-radius:99px;box-shadow:0 0 14px rgba(255,209,102,.8)}
/* ---- المقدمة ---- */
.intro-hero{padding:12px 12px 0}.intro-poster{display:block;width:100%;height:auto;border-radius:26px;box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.1),0 0 60px -10px rgba(127,243,255,.25)}
.intro-body{padding:16px 16px 28px;display:flex;flex-direction:column;gap:14px}
.intro-go{font-size:22px;padding:18px;animation:pulseGo 1.6s ease-in-out infinite}
@keyframes pulseGo{50%{transform:scale(1.03);box-shadow:0 18px 44px -8px rgba(255,180,50,.95),inset 0 -4px 0 rgba(120,60,0,.28)}}
.intro-points{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.intro-points li{display:flex;gap:10px;align-items:flex-start;background:var(--glass);border:1px solid var(--glass-b);border-radius:16px;padding:11px 14px;line-height:1.75;font-size:14.5px;backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.intro-points li::before{content:"✦";color:var(--sp-gold);font-size:14px;line-height:1.9;flex:none}
.intro-points b{color:var(--sp-gold);font-family:var(--sp-font);font-size:16px}
/* ---- خريطة الكواكب ---- */
.map-sub{padding:0 14px 8px;display:flex;flex-direction:column;gap:8px;text-align:center;font-size:13px;color:#c9d8ff}
.galaxy{position:relative;flex:1;min-height:0}
.gal-stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 12%,#fff,transparent),radial-gradient(2px 2px at 85% 60%,#cfe7ff,transparent),radial-gradient(1px 1px at 40% 80%,#fff,transparent),radial-gradient(1.5px 1.5px at 10% 70%,#ffd166,transparent),radial-gradient(1px 1px at 55% 50%,#fff,transparent);background-size:300px 300px;animation:twinkle 4s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.55}}
.orbit-path{position:absolute;inset:0;width:100%;height:100%}
.orbits{position:relative;display:flex;flex-direction:column}
.orbit-row{height:178px;display:flex;align-items:center;padding:0 8%}
.orbit-row.r{justify-content:flex-start}.orbit-row.l{justify-content:flex-end}
.planet{position:relative;width:140px;height:140px;border:0;background:none;cursor:pointer;padding:0;display:grid;place-items:center;transition:transform .2s}
.planet img{width:122px;height:122px;object-fit:contain;filter:drop-shadow(0 16px 26px rgba(0,0,0,.65));animation:floatP 5s ease-in-out infinite;position:relative;z-index:1}
.orbit-row.r .planet img{animation-delay:-2.5s}
@keyframes floatP{50%{transform:translateY(-8px) rotate(2deg)}}
.pl-glow{position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle,var(--c1) 0%,transparent 70%);opacity:.45;filter:blur(14px)}
.planet.next .pl-glow{opacity:.85;animation:glowP 1.6s ease-in-out infinite alternate}
@keyframes glowP{to{opacity:.35;transform:scale(1.2)}}
.pl-num{position:absolute;top:-6px;inset-inline-end:-6px;z-index:2;width:42px;height:42px;border-radius:14px;background:linear-gradient(180deg,#ffe08a,#f59e0b);color:var(--sp-ink);font-weight:800;font-size:22px;display:grid;place-items:center;box-shadow:0 8px 16px rgba(0,0,0,.5),inset 0 -3px 0 rgba(120,60,0,.25),inset 0 2px 0 rgba(255,255,255,.5)}
.pl-lock{position:absolute;z-index:2;font-size:32px;filter:drop-shadow(0 4px 8px #000)}
.planet.locked img{filter:grayscale(.85) brightness(.45)}
.planet.locked .pl-glow{opacity:.1}
.pl-cap{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:-4px;white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:3px;z-index:2}
.pl-cap b{font-size:15px;font-weight:700;background:var(--glass);border:1px solid var(--glass-b);padding:4px 13px;border-radius:999px;backdrop-filter:blur(6px);box-shadow:0 4px 12px rgba(0,0,0,.4)}
.pl-cap .st{color:var(--sp-gold);font-size:14px;letter-spacing:2px;text-shadow:0 1px 4px #000}
.planet:hover{transform:scale(1.06)}
.map-foot{padding:26px 16px 30px;text-align:center;font-size:13.5px}
/* ---- الإتقان ---- */
.mast-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.mast-sum div{background:var(--glass);border:1px solid var(--glass-b);border-radius:16px;padding:10px;text-align:center;display:flex;flex-direction:column;gap:2px;backdrop-filter:blur(6px)}
.mast-sum b{font-size:28px;color:var(--sp-gold);line-height:1.1}.mast-sum span{font-size:12px;color:#c9d8ff}
.mast-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mc{border-radius:14px;padding:9px 4px;text-align:center;display:flex;flex-direction:column;gap:2px;background:var(--glass);border:1px solid var(--glass-b)}
.mc .mq{font-weight:800;font-size:17px}.mc .ms{font-size:10px;letter-spacing:.6px;color:var(--sp-gold)}
.mc.b0{opacity:.55}.mc.b3,.mc.b4{background:rgba(255,209,102,.16);border-color:rgba(255,209,102,.45)}.mc.b5{background:linear-gradient(135deg,rgba(46,204,113,.4),rgba(46,204,113,.15));border-color:#2ecc71;box-shadow:0 0 14px -4px rgba(46,204,113,.8)}
/* ---- اللعب ---- */
.play{height:100dvh;min-height:0;overflow:hidden;background:var(--sp-deep)}
.hud{display:flex;align-items:center;gap:8px;padding:calc(8px + env(safe-area-inset-top)) 10px 8px;background:linear-gradient(180deg,rgba(5,11,31,.92),rgba(5,11,31,.35));position:relative;z-index:3}
.hud-btn{width:40px;height:40px;border-radius:13px;background:var(--glass);border:1px solid var(--glass-b);color:#fff;font-weight:800;cursor:pointer;backdrop-filter:blur(6px)}
.hud-mid{flex:1;display:flex;flex-direction:column;align-items:center;line-height:1.15}
.hud-title{font-weight:800;color:var(--sp-gold);font-size:17px;text-shadow:0 2px 8px rgba(0,0,0,.6)}.hud-wave{font-size:12.5px;color:#c9d8ff;font-family:"Cairo"}
.hud-right{display:flex;align-items:center;gap:8px;background:var(--glass);border:1px solid var(--glass-b);border-radius:999px;padding:5px 10px 5px 12px;backdrop-filter:blur(6px)}
.hud-shield{display:inline-flex;gap:2px}.hud-shield i{color:rgba(255,255,255,.18);display:inline-flex;transition:color .3s,transform .3s}.hud-shield i.on{color:#4fd2ff;filter:drop-shadow(0 0 6px #4fd2ff)}
.hud-score{font-weight:800;font-size:21px;min-width:46px;text-align:end;color:#fff;text-shadow:0 2px 8px #000}
.arena{flex:1;position:relative;min-height:0;overflow:hidden}
#cv{display:block;position:absolute;inset:0}
.typed{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);min-width:150px;height:56px;border-radius:18px;background:linear-gradient(180deg,rgba(14,28,66,.92),rgba(6,14,38,.95));color:var(--sp-cyan);font-weight:800;font-size:32px;display:grid;place-items:center;box-shadow:0 12px 34px rgba(0,0,0,.55),0 0 0 2px rgba(255,209,102,.75),0 0 24px -4px rgba(127,243,255,.6);z-index:2;padding:0 18px;direction:ltr;letter-spacing:2px;text-shadow:0 0 14px rgba(127,243,255,.8)}
.typed span:empty::before{content:attr(data-ph);font-family:"Cairo";font-size:14px;color:#8fa3d6;letter-spacing:0;text-shadow:none;direction:rtl}
.combo{position:absolute;top:13%;left:50%;transform:translateX(-50%);z-index:2;font-weight:800;font-size:30px;color:var(--sp-gold);text-shadow:0 3px 0 rgba(0,0,0,.55),0 8px 22px rgba(0,0,0,.6);text-align:center;pointer-events:none;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.combo small{font-size:17px;color:var(--sp-cyan)}.combo em{font-style:normal;font-size:14px;color:#fff;font-family:"Cairo";margin-top:4px;background:rgba(255,255,255,.14);padding:2px 10px;border-radius:999px}
.combo.pop{animation:comboPop .5s cubic-bezier(.22,1,.36,1)}
@keyframes comboPop{from{transform:translateX(-50%) scale(.5);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
.banner{position:absolute;top:36%;left:0;right:0;text-align:center;z-index:2;font-weight:800;font-size:42px;line-height:1.2;color:#fff;background:linear-gradient(180deg,#fff 20%,#ffd166 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 0 rgba(0,0,0,.6)) drop-shadow(0 10px 30px rgba(255,209,102,.55));pointer-events:none;padding:0 10px}
.banner.in{animation:bannerIn 1.5s cubic-bezier(.22,1,.36,1) forwards}
@keyframes bannerIn{0%{transform:scale(.4);opacity:0}22%{transform:scale(1.08);opacity:1}75%{transform:scale(1);opacity:1}100%{transform:scale(1.1);opacity:0}}
.pad{direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:9px 10px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(5,11,31,.55),#050b1f 40%);position:relative;z-index:3}
.pad button{height:54px;border-radius:16px;border:1px solid rgba(255,255,255,.2);background:linear-gradient(180deg,#223766,#13254d);color:#fff;font-weight:800;font-size:27px;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;box-shadow:0 5px 0 #0a1633,0 10px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.22);transition:transform .06s,box-shadow .06s;text-shadow:0 2px 4px rgba(0,0,0,.5)}
.pad button:active{transform:translateY(4px);box-shadow:0 1px 0 #0a1633,0 4px 8px rgba(0,0,0,.4);background:linear-gradient(180deg,#2d4b85,#1a3366)}
.pad .k-del{background:linear-gradient(180deg,#8a2f22,#5c1d14);box-shadow:0 5px 0 #3a1009,0 10px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.2)}
.pad .k-fire{background:linear-gradient(180deg,#ffe08a,#f08c0a);color:var(--sp-ink);font-size:24px;box-shadow:0 5px 0 #8a4a05,0 10px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.6);text-shadow:none}
.pad.bad{animation:padBad .4s}
@keyframes padBad{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@media (min-height:760px){.pad button{height:60px}}
.pause-layer{position:absolute;inset:0;z-index:10;background:rgba(5,11,31,.82);display:grid;place-items:center;backdrop-filter:blur(8px)}
.pause-card{background:var(--glass);border:1px solid var(--glass-b);border-radius:24px;padding:26px;display:flex;flex-direction:column;gap:10px;min-width:250px;text-align:center;box-shadow:0 30px 60px rgba(0,0,0,.6)}
.pause-card h2{margin:0 0 6px;font-size:28px;color:var(--sp-gold)}
/* ---- النتيجة ---- */
.res-body{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 18px 28px;gap:12px}
.res-planet{width:150px;height:150px;object-fit:contain;filter:drop-shadow(0 16px 30px rgba(0,0,0,.7));animation:floatP 5s ease-in-out infinite}.res-planet.dim{filter:grayscale(.6) brightness(.6)}
.res-body h2{margin:0;font-size:26px;color:var(--sp-gold);line-height:1.4;text-shadow:0 2px 0 rgba(0,0,0,.5),0 8px 24px rgba(255,209,102,.35)}
.big-stars{font-size:48px;letter-spacing:6px;color:var(--sp-gold);text-shadow:0 0 22px rgba(255,209,102,.8),0 4px 0 rgba(0,0,0,.4)}.big-stars .off{color:rgba(255,255,255,.18);text-shadow:none}
.res-body .statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;width:100%}
.res-body .statgrid div{background:var(--glass);border:1px solid var(--glass-b);border-radius:16px;padding:9px 4px;display:flex;flex-direction:column;gap:2px;backdrop-filter:blur(6px)}
.res-body .statgrid .num{font-weight:800;font-size:23px;color:#fff;line-height:1.1}.res-body .statgrid span:last-child{font-size:11px;color:#c9d8ff;font-family:"Cairo"}
.res-body .cheer{background:linear-gradient(180deg,rgba(255,209,102,.18),rgba(255,209,102,.08));border:1px solid rgba(255,209,102,.5);border-radius:16px;padding:11px 14px;line-height:1.75;font-size:14.5px}
.res-actions{margin-top:auto;width:100%;display:flex;flex-direction:column;gap:9px}
/* ---- فيديو الوصول ---- */
.sp-voyage .vy-cap{position:absolute;bottom:90px;left:0;right:0;text-align:center;font-family:var(--sp-font);font-size:24px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.6),0 8px 24px rgba(0,0,0,.8)}
/* ---- الكمبيوتر ---- */
@media (min-width:900px){body[data-screen] .app{max-width:560px}
.play{max-width:560px;margin-inline:auto;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 100px rgba(0,0,0,.7)}
.mast-grid{grid-template-columns:repeat(6,1fr)}}

/* ---- البوابة (رسالة قيادة الفضاء) ---- */
.gate-body{padding:18px 16px 30px}
.gate-card{width:min(460px,100%);display:flex;flex-direction:column;align-items:center;gap:12px;background:linear-gradient(180deg,rgba(18,32,80,.78),rgba(8,16,44,.85));border:1px solid rgba(127,243,255,.22);border-radius:28px;padding:18px 18px 22px;box-shadow:0 30px 70px -24px rgba(0,0,0,.9),0 0 50px -16px rgba(127,243,255,.35);backdrop-filter:blur(10px)}
.gate-poster{position:relative;width:100%;aspect-ratio:16/10;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.gate-poster img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;filter:saturate(.9) brightness(.62) blur(.5px);transform:scale(1.04)}
.gate-lock{position:absolute;inset:0;margin:auto;width:86px;height:86px;border-radius:50%;display:grid;place-items:center;font-size:38px;background:radial-gradient(circle,rgba(255,209,102,.35),rgba(5,11,31,.55) 70%);border:2px dashed rgba(255,209,102,.8);animation:gatePulse 2.4s ease-in-out infinite}
@keyframes gatePulse{50%{box-shadow:0 0 0 12px rgba(255,209,102,.08),0 0 36px rgba(255,209,102,.5);transform:scale(1.05)}}
.gate-badge{display:inline-flex;gap:6px;align-items:center;font-weight:800;font-size:13.5px;color:var(--sp-cyan);background:rgba(127,243,255,.1);border:1px solid rgba(127,243,255,.35);padding:5px 14px;border-radius:999px}
.gate-card h1{margin:2px 0 0;font-size:27px;line-height:1.35;color:var(--sp-gold);text-align:center;text-shadow:0 4px 20px rgba(255,209,102,.35)}
.gate-card p{margin:0;line-height:1.9;color:#dbe6ff;font-size:15.5px;text-align:center}
.gate-card p b{color:#fff}
.gate-isles{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px 8px;width:100%}
.gate-isles li{display:flex;flex-direction:column;align-items:center;gap:4px;color:#9fb2dc;font-size:12px;font-weight:700}
.gi-dot{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:18px;color:#c9d6f5;background:rgba(255,255,255,.06);border:1.5px dashed rgba(255,255,255,.28)}
.gate-isles li.ok .gi-dot{background:linear-gradient(180deg,#5eead4,#0d9488);color:#04252a;border:0;box-shadow:0 6px 16px -6px rgba(45,212,191,.8)}
.gate-isles li.ok{color:#99f6e4}
.gate-isles li.next .gi-dot{border:2px solid var(--sp-gold);color:var(--sp-gold);box-shadow:0 0 0 5px rgba(255,209,102,.12),0 0 18px rgba(255,209,102,.45);animation:gatePulse 2s ease-in-out infinite}
.gate-left{font-weight:800;color:var(--sp-gold)!important}
.gate-go,.gate-share,.intro-share{width:100%;justify-content:center}
.gate-go{font-size:19px;padding:15px 18px}