:root{
  --bg:#eef7f3;--panel:#ffffff;--ink:#102b2a;--muted:#5d7471;--line:#d5e5df;
  --primary:#0b6b60;--primary-2:#0f8c7c;--teal:#65d6c4;--green:#78b84d;--lime:#c9e56b;
  --blue:#4d85c6;--purple:#8e6ac7;--warning:#e3a62f;--danger:#c95a59;--good:#167d5c;
  --shadow:0 18px 50px rgba(20,69,63,.12);--radius:28px;
}
*{box-sizing:border-box}
html{background:var(--bg);color-scheme:light}
body{margin:0;min-width:320px;font-family:Tahoma,"Noto Sans Arabic","Segoe UI",Arial,sans-serif;color:var(--ink);background:
radial-gradient(circle at 12% 8%,rgba(101,214,196,.22),transparent 24rem),
radial-gradient(circle at 90% 18%,rgba(142,106,199,.12),transparent 20rem),var(--bg)}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid rgba(11,107,96,.34);outline-offset:3px}
.hidden{display:none!important}
.app-shell{width:min(1180px,calc(100% - 28px));margin:18px auto 34px}
.topbar{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px;padding:12px 16px;border:1px solid rgba(213,229,223,.9);border-radius:22px;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(20,69,63,.07);position:sticky;top:10px;z-index:20}
.brand-mini{display:flex;align-items:center;gap:10px;min-width:0}.brand-orb{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--teal));color:#fff;box-shadow:inset 0 0 0 7px rgba(255,255,255,.16)}
.brand-mini div{display:flex;flex-direction:column;min-width:0}.brand-mini strong{font-size:.98rem}.brand-mini span:last-child{font-size:.78rem;color:var(--muted);white-space:nowrap}
.hud{display:flex;gap:8px}.hud-item{min-width:76px;padding:6px 12px;border-radius:14px;background:#f5faf8;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center}.hud-item span{font-size:.7rem;color:var(--muted)}.hud-item strong{font-size:1.05rem}.hud-item.energy strong{font-size:.75rem;color:var(--good);letter-spacing:1px}
.icon-btn{width:44px;height:44px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--primary);font-weight:800;font-size:1.25rem}
main{padding-top:22px}.screen{display:none}.screen.active{display:block}
.start-screen{min-height:650px;display:none;grid-template-columns:1.04fr .96fr;gap:34px;align-items:center;padding:34px 20px 26px}.start-screen.active{display:grid}
.hero-copy{padding:12px 8px}.eyebrow{display:inline-block;font-size:.78rem;font-weight:800;color:var(--primary);background:rgba(101,214,196,.18);border:1px solid rgba(11,107,96,.12);padding:7px 11px;border-radius:999px}
h1,h2{margin:12px 0 10px;line-height:1.24;letter-spacing:-.025em}h1{font-size:clamp(2.15rem,5vw,4.3rem);max-width:780px}h2{font-size:clamp(1.7rem,3vw,2.5rem)}
.hero-copy p{font-size:1.08rem;line-height:1.95;color:var(--muted);max-width:700px}.mission-tags{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0}.mission-tags span{padding:9px 13px;border-radius:13px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 18px rgba(20,69,63,.05);font-size:.9rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.primary-btn,.secondary-btn{min-height:48px;border-radius:15px;padding:0 19px;font-weight:800;border:0;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.primary-btn{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 10px 22px rgba(11,107,96,.22)}.secondary-btn{background:#fff;color:var(--ink);border:1px solid var(--line)}
@media (hover:hover) and (pointer:fine){.primary-btn:hover,.secondary-btn:hover,.choice-btn:hover,.org-btn:hover,.num-marker:hover{transform:translateY(-2px)}}
.microcopy{font-size:.78rem!important;color:#78918e!important}
.hero-visual{position:relative;min-height:520px;border-radius:42px;background:linear-gradient(155deg,#0f615a,#0a3d3c 63%,#182f48);overflow:hidden;box-shadow:var(--shadow);isolation:isolate;border:1px solid rgba(255,255,255,.25)}
.hero-visual:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(to bottom,#000,transparent)}
.cell-orbit{position:absolute;width:370px;height:370px;border:1px solid rgba(157,235,220,.35);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 54px rgba(255,255,255,.025),0 0 0 108px rgba(255,255,255,.018)}
.orbit-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--lime);box-shadow:0 0 22px var(--lime)}.d1{top:-6px;left:48%}.d2{right:24px;bottom:54px}.d3{left:26px;bottom:62px;background:#8dd5ff;box-shadow:0 0 22px #8dd5ff}
.plant-mini{position:absolute;width:210px;height:290px;right:14%;top:17%;border:12px solid rgba(181,223,100,.8);border-radius:38px;background:rgba(239,255,248,.16);box-shadow:inset 0 0 0 5px rgba(198,255,238,.55),0 24px 60px rgba(0,0,0,.25)}
.mini-vacuole{position:absolute;inset:38px 32px 42px 52px;background:rgba(202,242,232,.36);border:2px solid rgba(255,255,255,.45);border-radius:42% 50% 46% 45%}.mini-nucleus{position:absolute;width:50px;height:58px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#9c82d1,#51407d);box-shadow:inset 0 0 0 7px rgba(255,255,255,.1)}.plant-mini .mini-nucleus{right:24px;top:105px}.plant-mini i{position:absolute;width:34px;height:18px;border-radius:50%;background:#78c759;box-shadow:inset 0 0 0 5px rgba(50,122,48,.3)}.plant-mini i:nth-of-type(1){right:18px;top:40px}.plant-mini i:nth-of-type(2){left:22px;top:58px}.plant-mini i:nth-of-type(3){right:14px;bottom:42px}.plant-mini i:nth-of-type(4){left:18px;bottom:70px}
.animal-mini{position:absolute;width:185px;height:170px;left:11%;bottom:12%;background:radial-gradient(circle at 38% 35%,rgba(255,255,255,.28),rgba(101,214,196,.25));border:4px solid rgba(216,255,248,.65);border-radius:46% 54% 58% 42%/55% 40% 60% 45%;transform:rotate(-8deg);box-shadow:0 25px 55px rgba(0,0,0,.25)}.animal-mini .mini-nucleus{right:56px;top:44px}.animal-mini b{position:absolute;width:7px;height:7px;background:#c9e56b;border-radius:50%}.animal-mini b:nth-of-type(1){right:25px;top:38px}.animal-mini b:nth-of-type(2){left:30px;top:54px}.animal-mini b:nth-of-type(3){left:48px;bottom:25px}.scan-line{position:absolute;left:5%;right:5%;top:23%;height:2px;background:linear-gradient(90deg,transparent,#a8f6e7,transparent);box-shadow:0 0 24px #65d6c4;animation:scan 4s ease-in-out infinite alternate}
@keyframes scan{to{top:78%}}
.game-screen{padding:12px 8px 24px}.mission-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:10px 0 18px}.mission-head p{margin:0;color:var(--muted)}.progress-wrap{min-width:220px;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.82rem}.progress-track{height:10px;flex:1;border-radius:999px;background:#dcebe7;overflow:hidden}.progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--teal));transition:width .3s ease}
.stage{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(18px,3vw,34px);min-height:420px}.question-card{max-width:850px;margin:0 auto}.question-number{color:var(--primary);font-weight:800;font-size:.82rem}.question-card h3{font-size:clamp(1.35rem,3vw,2rem);line-height:1.55;margin:8px 0 22px}.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.choice-btn,.org-btn{min-height:74px;border-radius:18px;border:1px solid var(--line);background:#f8fcfa;color:var(--ink);font-weight:800;padding:14px;transition:.18s}.choice-btn small,.org-btn small{display:block;font-size:.73rem;color:var(--muted);font-weight:500;margin-top:5px}.choice-btn.correct,.org-btn.correct{background:#e7f7ef;border-color:#7dccaa;color:#0b684b}.choice-btn.wrong,.org-btn.wrong{background:#fff0ef;border-color:#e2aaa7;color:#a33d3d}.choice-btn:disabled,.org-btn:disabled{cursor:default;opacity:.82}
.visual-stage{display:grid;grid-template-columns:minmax(280px,1.05fr) minmax(270px,.95fr);gap:26px;align-items:center}.cell-diagram{position:relative;width:min(100%,520px);aspect-ratio:1.16;margin:auto;background:linear-gradient(160deg,#f8fcfb,#eef7f4);border:1px solid var(--line);border-radius:28px;overflow:hidden}.cell-diagram svg{width:100%;height:100%;display:block}.num-marker{position:absolute;width:42px;height:42px;border:3px solid #fff;border-radius:50%;background:#153e4d;color:#fff;font-weight:900;box-shadow:0 6px 15px rgba(14,47,58,.22);transform:translate(50%,-50%);transition:.18s}.num-marker.selected{background:var(--warning)}.num-marker.correct{background:var(--good)}.num-marker.wrong{background:var(--danger)}
.diagram-legend{margin-top:12px;text-align:center;font-size:.78rem;color:var(--muted)}.visual-question h3{font-size:1.7rem;margin:.45rem 0 1rem}.visual-question p{color:var(--muted);line-height:1.8}.tip-box{padding:13px 15px;border-radius:14px;background:#f2f8f6;border:1px solid var(--line);font-size:.88rem;color:var(--muted)}
.org-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.function-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:#f2f8f6;color:var(--primary);font-size:.8rem;font-weight:800}.calc-card{display:grid;grid-template-columns:.85fr 1.15fr;gap:22px;align-items:stretch}.calc-visual{border-radius:24px;background:linear-gradient(145deg,#103f4b,#17365d);color:#fff;padding:24px;display:flex;flex-direction:column;justify-content:space-between;min-height:270px;overflow:hidden;position:relative}.calc-visual:after{content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(255,255,255,.12);border-radius:50%;left:-40px;bottom:-60px;box-shadow:0 0 0 36px rgba(255,255,255,.025),0 0 0 72px rgba(255,255,255,.018)}.scale-line{position:relative;height:70px;margin-top:20px}.scale-line:before{content:"";position:absolute;right:7%;left:7%;top:28px;height:3px;background:#d7ffef;border-radius:3px}.scale-line i{position:absolute;top:18px;width:3px;height:24px;background:#d7ffef}.scale-line i:first-child{right:7%}.scale-line i:last-child{left:7%}.scale-line b{position:absolute;top:48px;right:50%;transform:translateX(50%);font-size:1.2rem}.calc-form{display:flex;flex-direction:column;justify-content:center}.calc-form h3{font-size:1.6rem;line-height:1.55;margin:4px 0 18px}.equation{padding:12px 14px;border-radius:14px;background:#f2f8f6;border:1px dashed #a8c7bf;text-align:center;font-weight:800;color:#315a56;margin:0 0 14px}.answer-row{display:flex;gap:10px}.answer-input{min-height:52px;min-width:0;flex:1;border:1px solid #bcd3ce;border-radius:14px;padding:0 14px;background:#fff;font-size:1.05rem}.unit-pill{display:grid;place-items:center;min-width:64px;border-radius:14px;background:#eef6f3;color:var(--primary);font-weight:800;border:1px solid var(--line)}
.feedback{min-height:58px;margin:12px 0 0;padding:0 4px;display:flex;align-items:center;font-weight:700}.feedback.good{color:var(--good)}.feedback.bad{color:var(--danger)}.feedback.info{color:#315a56}.stage-actions{display:flex;justify-content:space-between;gap:10px;margin-top:4px}
.level-screen,.finish-screen{max-width:820px;margin:30px auto;text-align:center;padding:46px 28px;background:#fff;border:1px solid var(--line);border-radius:32px;box-shadow:var(--shadow)}.result-medal{width:94px;height:94px;margin:0 auto 14px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#f8e690,#e3a62f);font-size:2.6rem;color:#fff;box-shadow:0 14px 30px rgba(202,153,43,.22)}.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px auto;max-width:460px}.result-stats div{padding:16px;border-radius:16px;background:#f4f9f7;border:1px solid var(--line);display:flex;flex-direction:column}.result-stats span{font-size:.8rem;color:var(--muted)}.result-stats strong{font-size:1.65rem}.final-badge{width:120px;height:120px;border-radius:30px;margin:0 auto 18px;display:grid;place-items:center;background:linear-gradient(145deg,#0f615a,#17365d);color:#fff;transform:rotate(-4deg);box-shadow:0 18px 34px rgba(23,54,93,.25)}.final-badge span{font-size:.8rem;opacity:.8}.final-badge strong{font-size:3rem;line-height:1}.final-score-card{max-width:430px;margin:24px auto;padding:20px;border-radius:22px;background:#eff8f5;border:1px solid var(--line);display:flex;flex-direction:column}.final-score-card span{color:var(--muted);font-size:.8rem}.final-score-card strong{font-size:2rem;margin:5px}.stars{font-size:1.55rem;color:#e3a62f;letter-spacing:3px}.review-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;text-align:right;margin:22px 0}.review-item{padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:#fbfdfc}.review-item strong{display:block;color:var(--primary);margin-bottom:4px}.review-item span{font-size:.82rem;color:var(--muted);line-height:1.55}
.game-dialog{max-width:560px;border:0;border-radius:28px;padding:0;box-shadow:0 30px 70px rgba(10,45,42,.28);color:var(--ink)}.game-dialog::backdrop{background:rgba(7,38,36,.5);backdrop-filter:blur(5px)}.game-dialog form{padding:28px;position:relative}.game-dialog h2{margin-top:0}.game-dialog ol{padding-right:22px;line-height:2;color:var(--muted)}.dialog-close{position:absolute;left:16px;top:16px;width:42px;height:42px;border:0;border-radius:50%;background:#f0f6f4;color:var(--ink);font-size:1.5rem}
.confetti{position:fixed;width:8px;height:14px;border-radius:4px;z-index:50;pointer-events:none;animation:fall 1.2s ease-in forwards}@keyframes fall{to{transform:translate(var(--dx),260px) rotate(500deg);opacity:0}}
@media(max-width:860px){.topbar{grid-template-columns:1fr auto}.hud{grid-column:1/-1;grid-row:2;justify-content:space-between}.hud-item{flex:1}.start-screen.active{grid-template-columns:1fr}.hero-visual{min-height:430px;order:-1}.mission-head{align-items:flex-start;flex-direction:column}.progress-wrap{width:100%}.visual-stage,.calc-card{grid-template-columns:1fr}.visual-question{order:-1}.choice-grid{grid-template-columns:1fr}.org-grid{grid-template-columns:1fr 1fr}.calc-visual{min-height:210px}.review-list{grid-template-columns:1fr}}
@media(max-width:520px){.app-shell{width:min(100% - 16px,1180px);margin-top:8px}.topbar{top:5px;padding:10px;border-radius:18px}.brand-mini span:last-child{white-space:normal}.hud-item{min-width:0;padding:5px}.hud-item.energy{display:none}.start-screen{padding:10px 2px 22px;min-height:auto}.hero-visual{min-height:350px;border-radius:28px}.plant-mini{width:150px;height:215px;right:13%;top:15%;border-width:9px}.plant-mini .mini-nucleus{width:40px;height:46px;right:16px;top:80px}.plant-mini i{width:27px;height:15px}.animal-mini{width:130px;height:120px;left:10%;bottom:10%}.animal-mini .mini-nucleus{width:38px;height:43px;right:40px;top:32px}.cell-orbit{width:280px;height:280px}.stage{padding:16px;border-radius:22px}.question-card h3,.visual-question h3,.calc-form h3{font-size:1.3rem}.choice-grid,.org-grid{grid-template-columns:1fr}.cell-diagram{aspect-ratio:1.08}.num-marker{width:38px;height:38px}.stage-actions{padding-top:6px}.level-screen,.finish-screen{padding:34px 16px;border-radius:24px}.result-stats{grid-template-columns:1fr 1fr}.answer-row{flex-wrap:wrap}.unit-pill{min-height:48px;min-width:72px}.hero-actions>*{flex:1;min-width:135px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}