:root{--night:#29264F;--violet:#955CF1;--cyan:#35C8E7;--pink:#FF6BB3;--text:#F8FAFF;--muted:#c8c9e5;--panel:#18172deb;--border:#72719c;--success:#88f2ce}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);background:#101020;font-family:Tahoma,Arial,sans-serif;font-size:17px;line-height:1.8;min-height:100vh}body:before{content:"";position:fixed;inset:0;background:linear-gradient(#11112477,#111124ee),url('assets/city.png') center/cover;z-index:-2}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}button{color:var(--text);border:1px solid var(--border);background:#252440;border-radius:14px;min-height:48px;padding:10px 19px;transition:background .2s,transform .2s}button:hover:not(:disabled){background:#423563;transform:translateY(-2px)}.primary{background:linear-gradient(110deg,#7340c6,#a23779);border-color:#bf9eff;font-weight:bold;box-shadow:0 6px 30px #955cf133}.primary:hover:not(:disabled){background:linear-gradient(110deg,#8950d8,#c0438d)}.secondary{border-color:var(--cyan);color:#bff5ff}.top{max-width:1320px;padding:20px 28px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;gap:12px;color:var(--text);text-decoration:none;font-weight:bold;font-size:20px;line-height:1.5}.brand small{display:block;color:var(--cyan);font-size:11px;letter-spacing:2px}.brand svg{width:47px;fill:none;stroke:var(--cyan);stroke-width:3;filter:drop-shadow(0 0 8px #35c8e777)}.tools{display:flex;gap:8px;flex-wrap:wrap}.tools button{font-size:12px;padding:6px 12px;min-height:42px}main{max-width:1200px;margin:auto;padding:15px 25px 50px;outline:0}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(31px,4.8vw,60px);line-height:1.35;letter-spacing:-1px;margin-bottom:20px}h2{font-size:clamp(24px,3vw,34px);line-height:1.6}h3{font-size:21px}p{color:var(--muted)}.eyebrow{color:var(--cyan);font-size:12px;letter-spacing:2px;font-weight:bold}.neon{color:#d9bbff;text-shadow:0 0 28px #955cf188}.muted{color:var(--muted)}.glass{background:linear-gradient(135deg,#29264fd9,#16172de8);backdrop-filter:blur(16px);border:1px solid #8b81ba66;border-radius:24px;padding:30px;box-shadow:0 18px 60px #0004}.landing{position:relative;min-height:580px;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:20px}.landing:before{content:"";position:absolute;inset:0 -25px;background:linear-gradient(90deg,transparent,#111124e0 78%),url('assets/city.png') center/cover;border-radius:28px;z-index:-1}.landing-copy{padding:35px 22px}.landing p{max-width:580px;color:#ecedff}.pill{display:inline-block;border:1px solid #7975aa;background:#29264fcc;border-radius:30px;padding:5px 14px;font-size:12px;color:#dbdcf7;margin-bottom:16px}.hero-art{align-self:end;position:relative}.hero-art .portrait{width:100%;max-width:450px;margin:auto;filter:drop-shadow(0 0 30px #955cf133);mask-image:linear-gradient(#000 85%,transparent)}.portrait{background-image:url('assets/detectives.png');background-size:300% 200%;aspect-ratio:1;--column:0;background-position-x:calc(var(--column)*50%);background-position-y:0%;background-repeat:no-repeat;border-radius:18px}.portrait.happy{background-position-y:100%}.row{display:flex;gap:15px;align-items:center;justify-content:space-between;flex-wrap:wrap}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.onboarding{margin-top:28px}.characters{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0}.character{padding:8px;overflow:hidden;text-align:right;background:#1b1b32}.character .portrait{width:100%;border-radius:12px}.character strong,.character small{display:block;padding:0 12px}.character small{font-size:12px;color:var(--muted);padding-bottom:8px}.character.selected{border:2px solid var(--cyan);box-shadow:0 0 28px #35c8e733}.field{display:block;margin:16px 0}input[type=text],input[type=number],select{background:#111323;color:white;border:1px solid #8b81ba;border-radius:12px;padding:12px 16px;min-height:52px;max-width:100%}input[type=text]{width:100%}input[type=number]{width:150px;direction:ltr}.error{color:#ffc0d9;min-height:24px}.city-map{background:linear-gradient(#14142620,#141426d9),url('assets/city.png') center/cover;min-height:400px;border:1px solid #78719d;border-radius:24px;padding:30px;position:relative;overflow:hidden}.gates{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;align-items:end;margin:40px 0 20px;position:relative}.gates:before{content:"";height:3px;background:linear-gradient(90deg,var(--pink),var(--cyan),var(--violet));box-shadow:0 0 13px var(--cyan);position:absolute;top:64%;right:8%;left:8%}.gate{position:relative;z-index:1;min-height:210px;background:#15152ad9;padding:15px 10px;border-radius:70px 70px 18px 18px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;border:2px solid #68637d}.gate .arch{height:90px;width:65px;border:3px solid var(--cyan);border-radius:45px 45px 4px 4px;display:grid;place-items:center;color:var(--cyan);font-size:26px;box-shadow:inset 0 0 20px #35c8e733,0 0 20px #35c8e733}.gate small{font-size:12px}.gate.available{border-color:var(--cyan);animation:breathe 3s infinite}.gate.done{border-color:var(--success)}.gate:disabled{opacity:.7;filter:saturate(.1)}.progress{height:6px;background:#595571;border-radius:10px;overflow:hidden;margin:20px 0}.progress div{height:100%;background:linear-gradient(90deg,var(--violet),var(--cyan));transition:width .6s}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:24px;margin-top:20px}.companion{align-self:start;text-align:center;padding:15px;position:sticky;top:20px}.companion p{font-size:13px}.companion .portrait{width:100%}.scene-head{border-bottom:1px solid #76709b55;padding-bottom:18px;margin-bottom:20px}.scene-head h2{margin:5px 0;font-size:27px}.question{font-size:21px;color:var(--text);line-height:1.9}.visual{background:#111627;border:1px solid #565c7c;border-radius:18px;padding:16px;margin:20px 0}.visual svg{display:block;width:100%;max-height:360px;overflow:visible}.visual text{font-family:Tahoma,Arial,sans-serif;fill:#F8FAFF;font-size:18px}.visual polygon,.visual rect.shape{fill:#955cf133;stroke:#b999ff;stroke-width:2.5;vector-effect:non-scaling-stroke}.visual .cyan{fill:#35c8e722;stroke:#35c8e7}.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.option{text-align:right;padding:16px}.option.selected{border:2px solid var(--cyan);background:#35c8e722}.feedback{border-radius:14px;padding:18px;margin-top:20px;background:#422837;border:1px solid #ff6bb377;color:#ffe1ef}.feedback.good{background:#123a38;border-color:#88f2ce;color:#d1fff3}.feedback p{color:inherit;margin:4px 0}.matching{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:22px;direction:ltr}.match-column{display:grid;gap:12px;position:relative;z-index:1}.match-column button{font-size:18px;background:#1c243a;touch-action:none;user-select:none}.match-column button.selected{border:2px solid var(--pink);box-shadow:0 0 14px #ff6bb355}.match-column button.paired{border-color:var(--cyan)}.connections{position:absolute;inset:0;pointer-events:none;width:100%;height:100%;z-index:0}.connections line{stroke:var(--cyan);stroke-width:3;filter:drop-shadow(0 0 5px #35c8e7)}.slider{width:100%;accent-color:var(--cyan);direction:ltr;margin:20px 0;min-height:40px}.readout{font-size:24px;color:var(--cyan);font-weight:bold;direction:ltr;text-align:center}.numeric-fields{display:flex;gap:15px;flex-wrap:wrap}.numeric-fields label{display:grid;gap:8px}.portal-scene{position:fixed;inset:0;background:#111222f5;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.portal-scene .portrait{width:260px;z-index:1;animation:travel 1.8s both}.portal-scene h2{position:absolute;bottom:10%;text-align:center;font-size:24px}.portal-orbit{position:absolute;width:300px;height:400px;border:7px solid var(--cyan);border-radius:50% 50% 20% 20%;box-shadow:0 0 50px var(--cyan),inset 0 0 80px #955cf1;animation:open 1.8s both}.hidden{display:none!important}.shake{animation:shake .3s}.enter{animation:enter .5s}.cinema{animation:cinema 1.5s both}.particles{position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:radial-gradient(circle,#35c8e7 1px,transparent 2px),radial-gradient(circle,#ff6bb3 1px,transparent 2px);background-size:160px 210px,270px 290px;opacity:.35;animation:drift 25s linear infinite}.certificate{background:radial-gradient(at top,#4b3573,#151c31);border:2px solid #b999ff;outline:6px double #67608b;outline-offset:-15px;text-align:center;padding:55px 30px}.certificate h1{font-size:40px}.certificate .student-name{color:var(--cyan);font-size:34px;overflow-wrap:anywhere}.score-ring{width:130px;height:130px;border:5px solid var(--cyan);border-radius:50%;margin:24px auto;display:grid;place-content:center;font-size:34px;line-height:1.2;box-shadow:0 0 30px #35c8e733}.score-ring small{font-size:14px;color:var(--muted)}.skill-list{display:grid;gap:12px;margin-top:25px}.skill{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 20px;border:1px solid #716b93;border-radius:14px;background:#21223a}.skill strong{color:var(--success);font-size:14px}.skill.needs strong{color:#ffb8d9}.confetti{position:fixed;inset:-10% 0 0;pointer-events:none;z-index:80;overflow:hidden}.confetti i{position:absolute;width:8px;height:15px;background:var(--cyan);animation:fall 3s both}.notice{font-size:13px;color:#c1c5e2;padding:14px;background:#1c213a;border-radius:12px;margin-top:16px}footer{text-align:center;color:#b8b6d1;font-size:12px;padding:25px;border-top:1px solid #716b9344}footer strong{color:#e4daf8}#toast{position:fixed;bottom:20px;left:20px;right:20px;z-index:100;text-align:center;pointer-events:none}#toast:not(:empty){background:#29364c;border:1px solid var(--cyan);padding:14px;border-radius:12px}.print-only{display:none}@keyframes breathe{50%{box-shadow:0 0 30px #35c8e755}}@keyframes travel{0%{transform:translateX(70vw) scale(.8);opacity:0}35%{transform:translateX(0) scale(1);opacity:1}70%{transform:translateX(0) scale(1);opacity:1}100%{transform:scale(.05);opacity:0}}@keyframes open{0%{transform:scale(.05);opacity:0}30%,70%{transform:scale(1);opacity:1}100%{transform:scale(2);opacity:0}}@keyframes drift{to{background-position:80px -420px,-130px -580px}}@keyframes shake{25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}@keyframes enter{from{opacity:0;transform:translateY(16px)}}@keyframes cinema{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:scale(1)}}@keyframes fall{to{transform:translateY(120vh) rotate(540deg)}}.reduce-motion *,.reduce-motion *:before,.reduce-motion *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(max-width:760px){main{padding:10px 15px 35px}.top{padding:15px;align-items:flex-start}.brand{font-size:14px;gap:7px}.brand svg{width:34px}.tools{justify-content:flex-end;max-width:180px}.tools button{font-size:11px;padding:5px 8px}.landing{grid-template-columns:1fr;gap:0;min-height:auto}.landing-copy{padding:25px 18px}.hero-art{display:none}.glass{padding:22px 16px}.characters{gap:8px}.character{padding:4px}.character strong,.character small{padding:0 4px}.character small{font-size:10px;line-height:1.7}.character strong{font-size:15px}.play-layout{grid-template-columns:1fr}.companion{display:flex;position:static;gap:15px;align-items:center;text-align:right;grid-row:1;padding:10px}.companion .portrait{width:90px;flex-shrink:0}.companion h3{font-size:15px;margin:0}.companion p{font-size:12px;margin:0}.gates{gap:7px;margin:20px 0;grid-template-columns:repeat(5,minmax(0,1fr))}.gate{padding:10px 3px;min-height:150px;border-radius:45px 45px 10px 10px}.gate .arch{width:35px;height:58px;font-size:18px}.gate small{font-size:9px}.city-map{padding:20px 10px;min-height:280px}.question{font-size:19px}.options{grid-template-columns:1fr}.scene-head h2{font-size:23px}.visual{padding:12px 5px}.certificate{padding:40px 18px}.certificate h1{font-size:28px}.skill{font-size:14px}.skill strong{font-size:12px}.matching{gap:30px}.match-column button{padding:10px 5px}.portal-scene .portrait{width:210px}.portal-orbit{width:240px;height:330px}}@media print{body{background:white!important;color:#17142d}body:before,.top,footer,.particles,.no-print,#toast{display:none!important}main{max-width:none;padding:0}main>*{display:none!important}main>.result-page{display:block!important}.result-page>*{display:none!important}.result-page>.certificate{display:block!important;background:white!important;box-shadow:none;color:#29264F;outline-color:#955cf1;border-color:#955cf1;break-inside:avoid}.certificate p,.certificate .student-name{color:#29264F}.certificate{margin-top:25px}.score-ring{color:#29264F;border-color:#955cf1}.score-ring small{color:#29264F}.print-only{display:block!important}}
.companion .portrait{animation:emerge .7s both}@keyframes emerge{from{opacity:0;transform:scale(.7);filter:brightness(2)}to{opacity:1;transform:scale(1);filter:brightness(1)}}body[data-district="1"]:before{background-position:30% center}body[data-district="2"]:before{background-position:60% center}body[data-district="3"]:before{background-position:80% center}body[data-district="4"]:before{background-position:right center}@media(max-width:760px){.visual text{font-size:23px}.visual{padding:20px 6px}}
@page{size:A4;margin:14mm}@media print{html,body{min-height:0!important;height:auto!important;margin:0!important;padding:0!important}.certificate .neon{color:#29264F;text-shadow:none}.certificate .score-ring{box-shadow:none}.result-page>.certificate{margin-top:0!important}.confetti,.portal-scene{display:none!important}}
@media print{*{animation:none!important;transition:none!important}#app{opacity:1!important;transform:none!important}}