:root{
  color-scheme:dark;
  --bg:#07111f;
  --panel:#0e1d31;
  --panel-2:#132842;
  --text:#f4f8ff;
  --muted:#a9bbd2;
  --line:rgba(198,218,242,.16);
  --green:#7ee1a3;
  --green-2:#34b76c;
  --pink:#f6a9ca;
  --violet:#9da8ff;
  --gold:#f6d776;
  --danger:#ff8f98;
  --good:#8fe0ac;
  --shadow:0 24px 70px rgba(0,0,0,.32);
  --radius:28px;
}
*{box-sizing:border-box}
html{background:var(--bg);font-family:Tahoma,"Noto Sans Arabic","Segoe UI",Arial,sans-serif;scroll-behavior:smooth}
body{margin:0;min-width:320px;background:radial-gradient(circle at 15% 10%,rgba(91,162,210,.08),transparent 34%),var(--bg);color:var(--text)}
button{font:inherit}
button:focus-visible{outline:3px solid #fff;outline-offset:3px}
[hidden]{display:none!important}
.app-shell{position:relative;min-height:100vh;overflow:hidden;padding:20px clamp(14px,3vw,34px) 14px;isolation:isolate}
.ambient{position:absolute;border-radius:999px;filter:blur(60px);opacity:.2;pointer-events:none;z-index:-1}
.ambient-a{width:280px;height:280px;background:#32b96c;top:9%;right:-120px}
.ambient-b{width:340px;height:340px;background:#875fc8;bottom:8%;left:-160px}
.topbar{max-width:1220px;margin:0 auto 20px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:linear-gradient(145deg,#183859,#11243b);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.brand div{display:grid;gap:2px}.brand strong{font-size:clamp(17px,2vw,21px)}.brand span:not(.brand-mark){font-size:12px;color:var(--muted)}
.top-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.icon-btn{min-height:44px;border:1px solid var(--line);background:rgba(16,34,56,.8);color:var(--text);border-radius:14px;padding:9px 13px;display:flex;align-items:center;gap:8px;cursor:pointer}.icon-btn[aria-pressed="true"]{background:#173d32;border-color:rgba(126,225,163,.5)}
.screen{max-width:1220px;margin:0 auto}.screen-active{display:block}.intro-screen{padding:clamp(20px,3vw,34px) 0 12px}.intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.9fr);gap:clamp(28px,5vw,74px);align-items:center;min-height:620px}
.eyebrow{display:inline-flex;align-items:center;gap:7px;color:var(--green);font-size:13px;font-weight:800;letter-spacing:.03em;background:rgba(126,225,163,.08);border:1px solid rgba(126,225,163,.18);border-radius:999px;padding:7px 12px}
.intro-copy h1{font-size:clamp(42px,6.4vw,86px);line-height:1.02;margin:18px 0 20px;max-width:760px;letter-spacing:-.035em}.lead{font-size:clamp(18px,2.1vw,24px);line-height:1.9;color:#d6e2f1;max-width:760px;margin:0 0 28px}.mission-track{display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:#cfe0f0}.mission-track span{display:flex;align-items:center;gap:7px;font-weight:700;font-size:14px}.mission-track b{display:grid;place-items:center;width:28px;height:28px;border-radius:10px;background:#18334f;color:#fff;border:1px solid var(--line)}.mission-track i{width:28px;height:1px;background:linear-gradient(90deg,transparent,#55708b,transparent)}
.intro-cta{margin-top:32px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.primary-btn,.secondary-btn,.next-btn{border:0;cursor:pointer;min-height:50px;border-radius:16px;font-weight:900;padding:13px 22px}.primary-btn{color:#06140d;background:linear-gradient(135deg,#9be5b5,#59cf83);box-shadow:0 12px 30px rgba(55,193,108,.2)}.primary-btn:hover{filter:brightness(1.04)}.secondary-btn{color:var(--text);background:#17304c;border:1px solid var(--line)}.small-note{font-size:13px;color:var(--muted)}
.hero-visual{position:relative;min-height:520px}.cell-orbit{position:absolute;display:grid;justify-items:center;gap:4px}.cell-orbit img{width:100%;height:auto;filter:drop-shadow(0 20px 36px rgba(0,0,0,.34))}.cell-orbit span{font-weight:900;color:#e8f3ff;background:rgba(9,19,34,.72);border:1px solid var(--line);border-radius:999px;padding:6px 11px;backdrop-filter:blur(8px)}.cell-orbit-plant{width:74%;top:0;right:0}.cell-orbit-animal{width:52%;bottom:2%;left:1%}.lens-ring{position:absolute;inset:10% 13% 8% 10%;border:1px solid rgba(147,177,210,.16);border-radius:50%;box-shadow:inset 0 0 80px rgba(104,186,211,.07)}
.footer-note{max-width:1220px;margin:12px auto 0;text-align:center;color:#6f839c;font-size:12px;padding:8px 0}
.game-screen{padding-top:6px}.status-rail{display:grid;grid-template-columns:minmax(140px,.8fr) minmax(240px,1.5fr) minmax(140px,.65fr);gap:14px;align-items:center;margin-bottom:14px}.status-block,.score-pill{background:rgba(14,29,49,.72);border:1px solid var(--line);border-radius:18px;padding:12px 14px;min-width:0}.status-label,.score-pill span{display:block;color:var(--muted);font-size:11px;margin-bottom:2px}.status-block strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score-pill{text-align:center}.score-pill strong{font-size:24px;color:var(--gold)}.progress-wrap{min-width:0}.progress-meta{display:flex;justify-content:space-between;gap:12px;color:#c7d5e5;font-size:12px;margin-bottom:8px}.progress-bar{height:10px;background:#12253d;border-radius:999px;overflow:hidden;border:1px solid var(--line)}.progress-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#56cf83,#9de4b8);transition:width .35s ease}
.question-stage{display:grid;grid-template-columns:minmax(340px,.92fr) minmax(360px,1.08fr);gap:18px;align-items:stretch;min-height:620px}.question-stage.no-visual{grid-template-columns:minmax(0,820px);justify-content:center}.visual-panel,.question-panel{background:linear-gradient(160deg,rgba(19,40,66,.92),rgba(12,25,43,.96));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0}.visual-panel{position:relative;padding:18px;display:flex;align-items:center;justify-content:center;overflow:hidden}.visual-panel::before{content:"";position:absolute;inset:16px;border:1px solid rgba(255,255,255,.05);border-radius:22px;pointer-events:none}.visual-caption{position:absolute;bottom:14px;right:18px;left:18px;z-index:3;text-align:center;color:#c7d6e7;font-size:12px}.cell-figure{position:relative;width:min(100%,650px);margin:auto}.cell-figure img{display:block;width:100%;height:auto}.cell-figure svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.arrow-line{stroke:#fff;stroke-width:1.4;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}.arrow-number{fill:#0c1b2e;stroke:#fff;stroke-width:.5}.arrow-num-text{fill:#fff;font-weight:900;font-size:5.5px;text-anchor:middle;dominant-baseline:middle;font-family:Tahoma,Arial,sans-serif}.visual-badge{position:absolute;top:14px;right:16px;background:rgba(7,17,31,.76);border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-size:12px;color:#dce9f7;z-index:3}.formula-visual{width:min(100%,580px);display:grid;gap:22px;text-align:center;align-content:center}.lens-icon{width:170px;height:170px;border-radius:50%;margin:auto;display:grid;place-items:center;font-size:70px;background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.18),rgba(86,138,180,.08) 44%,rgba(11,24,42,.72) 45%);border:10px solid #274d6b;box-shadow:inset 0 0 50px rgba(146,210,232,.12),0 18px 45px rgba(0,0,0,.22)}.formula-card{border:1px solid var(--line);border-radius:20px;background:#0d2037;padding:18px}.formula-card strong{font-size:clamp(20px,3vw,32px);display:block}.formula-card span{display:block;color:var(--muted);font-size:13px;margin-top:8px}
.question-panel{padding:clamp(20px,3vw,34px);display:flex;flex-direction:column}.question-kicker{display:flex;justify-content:space-between;gap:10px;color:var(--green);font-weight:800;font-size:12px}.question-panel h2{font-size:clamp(25px,3.5vw,42px);line-height:1.45;margin:14px 0 9px;letter-spacing:-.015em}.question-hint{color:var(--muted);font-size:14px;line-height:1.8;margin:0 0 20px;min-height:1.8em}.options-grid{display:grid;gap:11px;margin-top:auto}.option-btn{min-height:58px;text-align:right;border:1px solid var(--line);background:#122944;color:var(--text);border-radius:16px;padding:14px 16px;font-weight:800;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease;display:flex;gap:12px;align-items:center}.option-btn .choice-key{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:10px;background:#203b59;color:#bcd0e6;font-size:12px}.option-btn:hover{border-color:rgba(157,168,255,.5);transform:translateY(-1px)}.option-btn:disabled{cursor:default}.option-btn.correct{background:rgba(54,164,96,.21);border-color:rgba(126,225,163,.6)}.option-btn.wrong{background:rgba(200,70,84,.18);border-color:rgba(255,143,152,.55)}.option-btn.correct .choice-key{background:#377d51;color:#fff}.option-btn.wrong .choice-key{background:#8f3945;color:#fff}.feedback{margin-top:16px;border-radius:18px;border:1px solid var(--line);background:#0d2036;padding:13px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}.feedback-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:#17324e}.feedback-copy strong{font-size:15px}.feedback-copy p{margin:4px 0 0;color:#b9cbe0;line-height:1.7;font-size:13px}.next-btn{color:#07111f;background:#dceaf8;padding:11px 16px;white-space:nowrap}
.result-screen{padding:24px 0 18px}.result-card{position:relative;overflow:hidden;max-width:880px;margin:0 auto;background:linear-gradient(155deg,rgba(18,39,65,.96),rgba(10,24,41,.97));border:1px solid var(--line);border-radius:32px;box-shadow:var(--shadow);padding:clamp(24px,5vw,48px);text-align:center}.stars{display:flex;justify-content:center;gap:5px;margin:16px 0 5px;font-size:34px;min-height:44px}.stars .dim{opacity:.22;filter:grayscale(1)}.result-card h2{font-size:clamp(30px,4vw,48px);margin:4px 0 10px}.result-summary{color:#c8d8e9;font-size:16px;line-height:1.8;max-width:670px;margin:0 auto}.result-score{margin:24px auto;display:flex;align-items:end;justify-content:center;gap:10px}.result-score span{color:var(--muted);font-size:13px}.result-score strong{font-size:44px;color:var(--gold)}.mastery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;text-align:right}.mastery-item{background:#0c1e34;border:1px solid var(--line);border-radius:16px;padding:13px}.mastery-top{display:flex;justify-content:space-between;gap:10px;align-items:center;font-weight:800;font-size:13px}.mastery-top span:last-child{color:#bcd0e4}.mini-bar{height:7px;background:#152b47;border-radius:999px;overflow:hidden;margin-top:10px}.mini-bar i{display:block;height:100%;background:linear-gradient(90deg,#6cd895,#a3e4ba);border-radius:999px}.review-tip{margin:16px 0 0;border-radius:16px;background:rgba(143,169,255,.08);border:1px solid rgba(157,168,255,.18);padding:13px;color:#dbe6f5;line-height:1.8;text-align:right;font-size:14px}.result-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}.confetti{position:absolute;inset:0;pointer-events:none}.confetti i{position:absolute;width:8px;height:16px;border-radius:4px;animation:fall 1.7s ease-out forwards}.confetti i:nth-child(3n){background:#7ee1a3}.confetti i:nth-child(3n+1){background:#f6d776}.confetti i:nth-child(3n+2){background:#9da8ff}@keyframes fall{0%{transform:translateY(-40px) rotate(0);opacity:1}100%{transform:translateY(380px) rotate(520deg);opacity:0}}
.app-shell.classroom{padding-left:22px;padding-right:22px}.classroom .brand span:not(.brand-mark),.classroom .footer-note,.classroom .small-note{display:none}.classroom .question-panel h2{font-size:clamp(32px,4.3vw,52px)}.classroom .option-btn{font-size:clamp(18px,2vw,24px);min-height:68px}.classroom .question-hint{font-size:17px}.classroom .question-stage{min-height:700px}.classroom .feedback-copy{font-size:17px}.classroom .feedback-copy p{font-size:16px}
@media(max-width:860px){.intro-grid{grid-template-columns:1fr;min-height:auto}.intro-copy{text-align:center}.lead{margin-inline:auto}.mission-track,.intro-cta{justify-content:center}.hero-visual{min-height:460px;max-width:620px;width:100%;margin:auto}.question-stage,.question-stage.no-visual{grid-template-columns:1fr;min-height:0}.visual-panel{min-height:390px}.status-rail{grid-template-columns:1fr 1fr}.progress-wrap{grid-column:1/-1;grid-row:2}.status-block,.score-pill{padding:9px 12px}.mastery-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.app-shell{padding:12px 10px 10px}.topbar{margin-bottom:10px}.brand span:not(.brand-mark){display:none}.control-text{display:none}.icon-btn{width:44px;justify-content:center;padding:0}.intro-screen{padding-top:10px}.intro-grid{gap:14px}.intro-copy h1{font-size:clamp(36px,12vw,54px);margin:12px 0}.lead{font-size:17px;line-height:1.75}.mission-track{gap:8px}.mission-track i{display:none}.mission-track span{font-size:12px}.hero-visual{min-height:360px}.cell-orbit-plant{width:78%}.cell-orbit-animal{width:55%}.cell-orbit span{font-size:11px}.status-rail{gap:8px;margin-bottom:8px}.status-block strong{font-size:13px}.score-pill strong{font-size:20px}.question-stage{gap:8px}.visual-panel{min-height:310px;padding:10px}.visual-badge,.visual-caption{font-size:10px}.question-panel{padding:18px 14px;border-radius:22px}.question-panel h2{font-size:26px;margin-top:10px}.question-hint{font-size:13px;margin-bottom:14px}.option-btn{min-height:54px;padding:11px 12px;font-size:15px}.feedback{grid-template-columns:auto 1fr;align-items:start}.next-btn{grid-column:1/-1;width:100%}.mastery-grid{grid-template-columns:1fr}.result-card{padding:22px 14px;border-radius:24px}.result-score strong{font-size:38px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}.ambient{display:none}}