:root{--navy:#020817;--panel:rgba(5,18,42,.88);--blue:#18a8ff;--cyan:#5deaff;--green:#64ff72;--yellow:#ffd84c;--purple:#a77bff;--white:#f7fcff}
*{box-sizing:border-box;user-select:none;-webkit-user-select:none}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#01040c;color:var(--white);font-family:"Nirmala UI","Latha","Arial Unicode MS",system-ui,sans-serif}
button{font:inherit;color:inherit}
#app{width:100vw;height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#0b2b50,#01040c 72%)}
#frame{position:relative;width:min(100vw,177.7778vh);height:min(100vh,56.25vw);overflow:hidden;background:#031024;box-shadow:0 0 90px #0b82aa55}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}.screen{position:absolute;inset:0;display:none}.screen.active{display:flex}
.hud{position:absolute;z-index:20;top:1.3%;left:1.2%;right:1.2%;height:6.5%;align-items:center;gap:.55%;padding:.4% .6%;border:1px solid #5deaff55;border-radius:14px;background:linear-gradient(90deg,rgba(2,10,28,.93),rgba(7,31,58,.78));box-shadow:0 8px 30px #0009,inset 0 1px #fff2;backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:.6vw;padding:0 1vw;font-size:clamp(10px,1.05vw,18px);flex:1}.brand-dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 15px var(--green)}
.stat{height:100%;min-width:6.3vw;display:flex;flex-direction:column;justify-content:center;align-items:center;border-left:1px solid #ffffff1c}.stat small{font-size:clamp(8px,.65vw,12px);color:#85c8e8}.stat b{font:800 clamp(12px,1.15vw,21px)/1 system-ui;color:white}
.icon-button{width:2.8vw;height:2.8vw;min-width:32px;min-height:32px;border-radius:10px;border:1px solid #5deaff66;background:#0b3152;cursor:pointer}
#toast{position:absolute;z-index:35;top:9%;left:50%;translate:-50% -20px;opacity:0;padding:.7% 1.4%;border:1px solid #62ffb2aa;border-radius:100px;background:#04152dea;box-shadow:0 0 25px #54ff9d55;font-weight:700;font-size:clamp(11px,1vw,17px);transition:.25s}
#toast.show{opacity:1;translate:-50% 0}
#prompt{position:absolute;z-index:30;bottom:3%;left:50%;translate:-50% 0;min-width:28%;padding:.8% 1.6%;text-align:center;border:1px solid #67e8f988;border-radius:12px;background:#031126e8;box-shadow:0 8px 30px #000a;font-weight:700;font-size:clamp(11px,1vw,18px);opacity:0;transition:.2s}
#prompt.show{opacity:1}
.title-screen{z-index:10;background:radial-gradient(circle at 73% 45%,transparent 0 19%,#05182b33 45%),linear-gradient(105deg,rgba(1,6,18,.97) 0 49%,rgba(1,8,22,.18) 67%,rgba(1,6,18,.65));overflow:hidden}
.title-screen:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#5deaff0a 1px,transparent 1px),linear-gradient(#5deaff0a 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to right,#000,transparent 70%)}
.title-copy{position:relative;z-index:4;width:56%;padding:5.2% 0 3% 5.5%}.eyebrow{letter-spacing:.18em;color:#64e7ff;font:800 clamp(9px,.85vw,15px)/1.2 system-ui;text-transform:uppercase}
h1{margin:2.3% 0 1%;font-size:clamp(42px,5.5vw,98px);line-height:.98;letter-spacing:-.04em;text-shadow:0 8px 35px #000}h1 span{color:var(--green);text-shadow:0 0 32px #33ff8877}
.title-copy>p{max-width:90%;margin:2% 0 3%;color:#d6effd;font-size:clamp(13px,1.35vw,24px);line-height:1.5}
.menu{display:grid;grid-template-columns:repeat(3,1fr);gap:.65vw;width:92%}.menu-button{position:relative;display:grid;grid-template-columns:2.2vw 1fr;grid-template-rows:1fr 1fr;align-items:center;text-align:left;min-height:4.2vw;padding:.6vw .8vw;border:1px solid #35c9ff50;border-radius:12px;background:linear-gradient(135deg,#092d4bdd,#07182add);box-shadow:inset 0 1px #fff1;cursor:pointer;transition:.18s}
.menu-button span{grid-row:1/3;display:grid;place-items:center;width:1.8vw;height:1.8vw;border-radius:50%;background:#1275aa;color:#c8f7ff;font-weight:900}.menu-button b{font-size:clamp(10px,.92vw,17px)}.menu-button small{color:#78a9c3;font-size:clamp(8px,.62vw,11px)}
.menu-button.compact{grid-template-rows:1fr;min-height:3.35vw}.menu-button.compact span{grid-row:1}.menu-button.selected,.menu-button:hover,.menu-button:focus-visible{outline:none;transform:translateY(-2px);border-color:var(--green);background:linear-gradient(135deg,#126c65,#0a3653);box-shadow:0 0 25px #53ff8d55,inset 0 0 18px #57ff8d22}.menu-button.selected span{background:var(--green);color:#061a22}
.title-hero{position:absolute;z-index:2;right:-2%;top:6%;width:50%;height:90%;pointer-events:none}.hero-glow{position:absolute;inset:12% 4% 3% 12%;border-radius:50%;background:radial-gradient(circle,#67ff9638,transparent 60%);filter:blur(18px)}.hero-badge{position:absolute;right:8%;top:2%;padding:.5vw 1vw;border:1px solid #64ff72aa;color:#64ff72;border-radius:99px;font:800 1vw system-ui;letter-spacing:.16em}.hero-callout{position:absolute;right:8%;bottom:3%;width:52%;padding:1vw;border-left:4px solid var(--yellow);background:#06162dcc;box-shadow:0 10px 35px #0008}.hero-callout b,.hero-callout span{display:block}.hero-callout b{color:var(--yellow);font-size:1.05vw}.hero-callout span{color:#aad2e8;font-size:.8vw;margin-top:.4vw}
.title-orbit{position:absolute;z-index:1;right:4%;top:18%;width:38vw;height:38vw;border:1px solid #64ff7238;border-radius:50%;animation:spin 18s linear infinite}.title-orbit:before,.title-orbit:after{content:"";position:absolute;border:2px solid #5deaff77;border-radius:50%}.title-orbit:before{inset:9%}.title-orbit:after{inset:22%;border-style:dashed}.orbit-two{right:8%;top:25%;width:27vw;height:27vw;animation-direction:reverse;animation-duration:12s}@keyframes spin{to{rotate:360deg}}
.attract-message{position:absolute;z-index:7;right:6%;top:44%;width:36%;text-align:center;opacity:0;transform:scale(.8);transition:.5s;padding:1.5vw;border:1px solid #64ff72;background:#03172de8;box-shadow:0 0 50px #45ff7a55}.attract-message.show{opacity:1;transform:scale(1)}.attract-message b,.attract-message span{display:block}.attract-message b{font-size:1.6vw;color:var(--green)}.attract-message span{margin-top:.6vw;font-size:1.1vw}
.modal-screen,.pause-screen,.complete-screen,.result-screen{z-index:50;align-items:center;justify-content:center;background:#010713d9;backdrop-filter:blur(10px)}
.modal-card,.pause-card,.fact-card,.result-card{position:relative;width:min(90%,900px);max-height:86%;overflow:auto;padding:3%;border:1px solid #59e5ff88;border-radius:24px;background:linear-gradient(145deg,#0a2844f2,#041224f5);box-shadow:0 25px 80px #000c,0 0 45px #16b8dc2b;text-align:center}.close-button{position:absolute;right:2%;top:2%;width:42px;height:42px;border:1px solid #fff3;border-radius:50%;background:#ffffff12;font-size:26px;cursor:pointer}.modal-card h2,.pause-card h2,.fact-card h2,.result-card h2{font-size:clamp(28px,3vw,52px);margin:.3em 0;color:white}.modal-card p,.modal-card li,.fact-card p{font-size:clamp(13px,1.2vw,20px);line-height:1.65;color:#cbe8f6}.modal-card ul{text-align:left}
.mission-screen{z-index:45;align-items:center;justify-content:center;background:radial-gradient(circle,#0b4160ee,#010816f5)}.mission-card{position:relative;width:60%;padding:3% 4%;border:1px solid #64efff88;border-radius:28px;background:linear-gradient(145deg,#0b2e4c,#041326);box-shadow:0 0 70px #28ddff33;overflow:hidden}.mission-card:after{content:"";position:absolute;right:-8%;top:-55%;width:45%;height:180%;background:linear-gradient(90deg,transparent,#5deaff13,transparent);rotate:18deg}.mission-index{color:var(--green);font:800 1vw system-ui;letter-spacing:.22em}.mission-card h2{font-size:3.2vw;margin:.25em 0}.stars{color:var(--yellow);letter-spacing:.2em;font-size:1.5vw}.mission-card>p{font-size:1.15vw;line-height:1.6;color:#c7e5f2}.mission-grid{display:grid;grid-template-columns:1fr 3fr;gap:1vw;margin-top:2%}.mission-grid div{padding:1vw;border-radius:12px;background:#ffffff0a;border:1px solid #ffffff12}.mission-grid small,.mission-grid b{display:block}.mission-grid small{color:#64dfff}.mission-grid b{margin-top:.4em}.loading-line{height:4px;margin-top:2vw;background:#ffffff15}.loading-line span{display:block;width:0;height:100%;background:var(--green);box-shadow:0 0 14px var(--green);animation:load 3s linear forwards}@keyframes load{to{width:100%}}.plain-button{display:block;margin:1.5vw auto 0;border:0;background:transparent;color:#9acde5;cursor:pointer}
.pause-card{width:min(90%,520px)}.pause-icon{margin:auto;display:grid;place-items:center;width:76px;height:76px;border:2px solid #59e5ff;border-radius:50%;font-size:34px;color:#59e5ff}.pause-card button,.result-actions button,.primary-button{display:block;width:100%;margin:.7em 0;padding:.9em;border:1px solid #4ddaff77;border-radius:12px;background:#0b4168;cursor:pointer}.pause-card button:hover,.result-actions button:hover,.primary-button:hover{background:#11648a}
.fact-card{width:min(92%,820px)}.fact-icon,.result-burst{display:grid;place-items:center;margin:auto;width:84px;height:84px;border-radius:50%;color:#07151f;background:var(--green);box-shadow:0 0 40px #64ff72;font-size:40px}.fact-label{margin-top:1.2em;color:#5deaff;letter-spacing:.16em;font-weight:900}.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:1vw}.quiz-options button{padding:1em;border:1px solid #56dfff66;border-radius:12px;background:#061c36;cursor:pointer}.quiz-options button:hover{border-color:#64ff72}.quiz-options button.correct{background:#12643e}.quiz-options button.wrong{background:#742c3a}
.result-screen{background:radial-gradient(circle,#134e53ee,#020713f5)}.result-card{width:min(94%,950px);padding:2% 3%}.result-burst{background:var(--yellow);box-shadow:0 0 50px #ffe45d}.result-card h2{color:var(--yellow)}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8vw;margin:1.5vw 0}.result-grid div{padding:1vw;border:1px solid #ffffff1f;border-radius:12px;background:#ffffff0a}.result-grid small,.result-grid b{display:block}.result-grid small{color:#84cde9}.result-grid b{margin-top:.3em;font-size:1.25vw}.result-card blockquote{color:#ccebf5;font-size:1vw;line-height:1.5}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:1vw}
.touch-controls{display:none;position:absolute;z-index:25;inset:0;pointer-events:none}.touch-stick,.touch-actions{position:absolute;bottom:3%;display:grid;gap:5px;pointer-events:auto}.touch-stick{left:3%;grid-template-columns:repeat(3,50px);grid-template-rows:repeat(2,50px)}.touch-stick button:first-child{grid-column:2}.touch-stick button{background:#062845cc;border:1px solid #6ce5ff77;border-radius:12px}.touch-actions{right:3%;grid-template-columns:65px 85px}.touch-actions button{height:65px;border-radius:50%;border:1px solid #64ff72aa;background:#0a493ccc;font-weight:900}
@media(pointer:coarse){.touch-controls:not(.hidden){display:block!important}}@media(max-width:900px){.brand{display:none}.stat{min-width:12vw}.title-copy{width:66%}.menu{grid-template-columns:repeat(2,1fr)}.menu-button{min-height:6vw}.title-hero{right:-12%}.mission-card{width:80%}}