:root{--ink:#eef6ff;--muted:#b7c9df;--cyan:#6de8ff;--gold:#ffd66b;--glass:rgba(9,20,43,.82);--ok:#42d392;--bad:#ff647c}
*{box-sizing:border-box} html,body{margin:0;min-height:100%;font-family:"Tahoma","Arial",sans-serif;background:#030713;color:var(--ink)}
body{overflow-x:hidden;background:
radial-gradient(circle at 50% 10%,rgba(57,102,171,.32),transparent 34%),
radial-gradient(circle at 18% 70%,rgba(18,121,143,.18),transparent 30%),
linear-gradient(#030713,#071225 58%,#040713)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.7;background-image:
radial-gradient(#fff 1px,transparent 1.5px),radial-gradient(#8eeaff 1px,transparent 1.5px);
background-size:79px 79px,113px 113px;background-position:11px 17px,47px 39px;animation:stars 7s ease-in-out infinite alternate}
@keyframes stars{to{opacity:.35;transform:translateY(5px)}} 
.app{max-width:1180px;margin:auto;min-height:100vh;padding:20px 22px 90px;position:relative}
.top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.brand{font-weight:900;font-size:clamp(19px,2.4vw,30px)} .brand span{color:var(--cyan)}
.hud{display:flex;gap:8px;flex-wrap:wrap}.pill{background:#0b1830;border:1px solid #29456d;border-radius:999px;padding:9px 14px;font-weight:800}
.progress{height:8px;background:#101b30;border-radius:20px;overflow:hidden;margin:10px 0 18px}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--gold));transition:.45s}
.screen{display:none;animation:in .45s ease}.screen.active{display:block}@keyframes in{from{opacity:0;transform:translateY(8px)}}
.panel{background:var(--glass);border:1px solid #284263;border-radius:25px;padding:clamp(18px,3vw,34px);box-shadow:0 20px 70px #0008,inset 0 1px #ffffff10}
.hero{min-height:68vh;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden}
.orbit{width:min(420px,72vw);aspect-ratio:1;border:1px solid #4bdfff55;border-radius:50%;position:absolute;animation:spin 18s linear infinite}
.orbit:before,.orbit:after{content:"✦";position:absolute;color:var(--gold);font-size:28px;text-shadow:0 0 18px var(--gold)}
.orbit:before{top:8%;left:14%}.orbit:after{bottom:12%;right:10%}@keyframes spin{to{transform:rotate(360deg)}}
.heroContent{position:relative;z-index:2;max-width:820px}.kicker{color:var(--cyan);font-weight:900;letter-spacing:.5px}
h1{font-size:clamp(42px,7vw,78px);margin:8px 0;text-shadow:0 0 30px #5fdfff44}h2{font-size:clamp(27px,4vw,43px);margin:0 0 12px}
.lead{font-size:clamp(18px,2.1vw,25px);line-height:1.9;color:#f6fbff}.note{color:var(--gold);font-weight:900}
button,.card{font:inherit}.btn{border:0;border-radius:16px;padding:13px 20px;font-weight:900;cursor:pointer;color:#06111f;background:linear-gradient(135deg,var(--cyan),#d5f9ff);box-shadow:0 8px 28px #44dfff2a;transition:.18s}
.btn:hover{transform:translateY(-2px)}.btn.gold{background:linear-gradient(135deg,var(--gold),#fff0b2)}.btn.ghost{color:#e9f6ff;background:#10223e;border:1px solid #31537d}
.nav{position:fixed;z-index:30;bottom:16px;left:50%;transform:translateX(-50%);width:min(1120px,calc(100% - 30px));display:flex;justify-content:space-between;pointer-events:none}
.nav .btn{pointer-events:auto;min-width:120px}.nav .prev{order:1;margin-left:auto}.nav .next{order:2;margin-right:auto}
.mapwrap{display:grid;grid-template-columns:1.3fr .8fr;gap:20px;align-items:center}.mapimg{width:100%;border-radius:20px;background:white;padding:8px}
.nodes{display:grid;gap:12px}.node{border:1px solid #31557e;background:#0b1930;border-radius:18px;padding:14px;cursor:pointer;transition:.25s;font-size:18px;line-height:1.7}
.node:before{content:"";display:inline-block;width:14px;height:14px;border-radius:50%;background:#34516f;margin-left:9px;box-shadow:0 0 0 5px #152942}
.node.on{transform:scale(1.025);border-color:var(--cyan);background:#102849}.node.on:before{background:var(--cyan);box-shadow:0 0 20px 8px #55e7ff88}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:13px}.card{background:#0c1a31;border:1px solid #2c4a70;border-radius:18px;padding:16px;line-height:1.65;font-size:18px;cursor:pointer;color:#eef6ff}
.card:hover{border-color:#5bcfe6}.card.ok{background:#103a31;border-color:var(--ok)}.card.bad{background:#421a27;border-color:var(--bad);animation:shake .3s}
@keyframes shake{25%{transform:translateX(5px)}75%{transform:translateX(-5px)}}
.instruction{font-size:20px;color:#dcecff;margin:0 0 18px;line-height:1.7}.small{font-size:15px;color:var(--muted)}
.lab{display:grid;grid-template-columns:1fr 1fr;gap:18px}.chamber{min-height:310px;border:1px solid #2b527d;border-radius:22px;padding:18px;background:radial-gradient(circle at 50% 30%,#17365c,#081326 65%)}
.dna{font-size:72px;text-align:center;filter:drop-shadow(0 0 20px #63dfff);animation:pulse 2s infinite alternate}@keyframes pulse{to{transform:scale(1.07);filter:drop-shadow(0 0 35px #ffe07a)}}
.clue{display:block;width:100%;text-align:right;color:#eef6ff;padding:13px 15px;border-radius:13px;background:#122744;border:1px solid #31577f;margin:9px 0;cursor:pointer;font:inherit;line-height:1.7}.clue:disabled{cursor:default;opacity:.78}.clue.revealed{background:#183d3b;border-color:#4ad6b0}
.sequence{display:flex;flex-wrap:wrap;gap:10px;min-height:70px}.verse{flex:1 1 250px}
.match{display:grid;grid-template-columns:1fr 1fr;gap:16px}.col{display:grid;gap:10px}.selected{outline:3px solid var(--gold)}
.blankline{display:flex;flex-wrap:wrap;gap:8px;align-items:center;line-height:2.2;font-size:21px}.blank{min-width:110px;display:inline-block;border-bottom:2px dashed #71dced;color:var(--gold);text-align:center;padding:0 7px}
.bank{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.chip{background:#183050;border:1px solid #39658e;border-radius:999px;padding:9px 13px;cursor:pointer;font-weight:800}
.lesson{border-right:4px solid var(--gold);padding:11px 16px;margin:10px 0;background:#0d1b31;border-radius:12px;line-height:1.75;font-size:18px}
.final{text-align:center}.seal{font-size:90px;filter:drop-shadow(0 0 28px #ffd45f);animation:pulse 1.2s infinite alternate}
.toast{position:fixed;z-index:50;top:18px;left:50%;transform:translateX(-50%) translateY(-90px);padding:12px 20px;border-radius:14px;background:#10223c;border:1px solid #45678e;font-weight:900;transition:.25s}.toast.show{transform:translateX(-50%) translateY(0)}
@media(max-width:800px){.mapwrap,.lab,.match{grid-template-columns:1fr}.app{padding-inline:12px}.nav .btn{min-width:95px}.top{align-items:flex-start}}
/* 2026-09 final mobile corrections: ex3 + ex6 */
.match{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important;align-items:start}
.match .col{min-width:0}.match .card{font-size:clamp(14px,3.6vw,18px);padding:12px 10px;line-height:1.55;overflow-wrap:anywhere}
#bank{margin:10px 0 8px!important;gap:6px!important;transition:.25s}
#bank .chip{font-size:clamp(14px,3.5vw,17px);padding:7px 10px}
#fill .lesson{margin:5px 0;padding:8px 11px;font-size:clamp(16px,4vw,20px);line-height:1.85}
@media(max-width:800px){.match{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}.match .card{font-size:14px;padding:10px 8px}.blank{min-width:78px}.blankline{gap:4px!important}}