:root{--bg:#050c1b;--aqua:#6dffe7;--bright:#bbffca;--white:#ecfbff;--pale:#b8d3e8;--pink:#ff6794;--gold:#ffdd89;--deep:#12223b}
*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;color:var(--white);background:radial-gradient(ellipse at 50% 0,#2c365c 0,#10182e 36%,#050b19 79%);font-family:'Trebuchet MS',Arial,sans-serif}
button,a{-webkit-tap-highlight-color:transparent}.shell{width:min(1320px,calc(100% - 34px));margin:auto}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:128px;padding:16px 0}.brand-top{color:#83f5d4;letter-spacing:3px;font:900 11px 'Courier New',monospace}.brand h1{font:900 clamp(40px,5vw,74px)/.96 Impact,'Arial Black',sans-serif;letter-spacing:2px;margin:7px 0;text-shadow:4px 5px #154268}.brand h1 span{color:var(--pink)}.brand p{font:900 12px 'Courier New',monospace;letter-spacing:3px;color:#9bbedc;margin:0}.brand p span{color:var(--gold)}.home-link{flex-shrink:0;border:1px solid #508fa2;background:#142b42;color:#caffef;text-decoration:none;border-radius:9px;padding:13px 17px;font:900 12px 'Courier New',monospace}.home-link:hover{background:#22516a;border-color:#9affea}
.arcade{border:4px solid #62e2df;border-radius:19px;overflow:hidden;box-shadow:0 0 0 7px #17354a,0 28px 75px #0009,0 0 50px #25ffdc29}.hud{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 23px;background:linear-gradient(180deg,#203452,#14273e);border-bottom:2px solid #375e78}.hud>div{display:flex;flex-direction:column;gap:5px}.hud span{font:900 10px 'Courier New',monospace;color:#84bac6;letter-spacing:1.7px}.hud strong{font:900 clamp(13px,1.6vw,20px) 'Courier New',monospace;white-space:nowrap}.hud .shields{color:#ff8aa8;letter-spacing:5px}.sound-button{background:#16405a;border:1px solid #5ad9d4;color:#ddfff8;border-radius:8px;padding:11px 12px;cursor:pointer;font:900 11px 'Courier New',monospace}.sound-button:hover{background:#215978}.progress-track{height:9px;background:#061e30}.progress-track>div{height:100%;width:0;background:linear-gradient(90deg,#ff6090,#f6c86b,#6affce);transition:width .3s}
.field{height:clamp(520px,67vh,670px);position:relative;overflow:hidden;isolation:isolate;outline:none;background:linear-gradient(#081127 0,#101c43 52%,#2b1d55 100%);touch-action:none;cursor:crosshair}.field:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}.field::before{content:"";inset:0;position:absolute;z-index:1;pointer-events:none;opacity:.13;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 4px,#82b2d3 5px,transparent 6px)}
.starglow{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 30%,#354c856e,transparent 43%),radial-gradient(ellipse at 14% 52%,#256a7560,transparent 42%)}.stars{position:absolute;inset:-30px;background-repeat:repeat;animation:starsroll 36s linear infinite;opacity:.75}.stars-a{background-image:radial-gradient(circle,#effffe 1px,transparent 1.5px),radial-gradient(circle,#87ffdf 1.6px,transparent 2px);background-size:103px 83px,169px 133px;background-position:15px 17px,57px 68px}.stars-b{background-image:radial-gradient(circle,#ffe3ff 1px,transparent 1.5px),radial-gradient(circle,#d5eaff 1.5px,transparent 2px);background-size:223px 164px,307px 210px;background-position:42px 64px,105px 33px;animation-duration:54s;opacity:.4}.planet{position:absolute;border-radius:50%;pointer-events:none}.planet-one{width:230px;height:230px;top:9%;right:11%;background:radial-gradient(circle at 37% 30%,#83c9dd,#3b4c91 48%,#202d64 73%);box-shadow:0 0 45px #789ffb5c,0 0 95px #7ebeff18;border:3px solid #b1c7ff77;opacity:.66}.planet-one:after{content:"";position:absolute;top:39%;left:-24%;width:150%;height:20%;transform:rotate(-21deg);border:11px solid #a7bcfa64;border-radius:50%}.planet-two{width:65px;height:65px;right:44%;top:12%;background:radial-gradient(circle at 35% 33%,#feccdd,#a45491 61%,#5a376b);box-shadow:0 0 30px #c263ca66;opacity:.58}.horizon,.horizon-back{position:absolute;left:-5%;width:110%;bottom:0;pointer-events:none}.horizon{height:18%;background:linear-gradient(#192354,#130e35);clip-path:polygon(0 67%,6% 22%,12% 55%,20% 14%,30% 63%,39% 29%,46% 70%,56% 15%,63% 55%,75% 25%,83% 69%,91% 18%,100% 65%,100% 100%,0 100%);border-top:2px solid #d37bdf}.horizon-back{height:29%;background:#6c569247;clip-path:polygon(0 75%,8% 36%,16% 72%,24% 22%,33% 61%,41% 42%,53% 71%,64% 17%,76% 65%,89% 22%,100% 70%,100% 100%,0 100%)}
.top-hint{position:absolute;top:55px;left:0;width:100%;text-align:center;z-index:5;color:#a8dbe7;letter-spacing:2px;font:900 13px 'Courier New',monospace;text-shadow:0 2px 7px #091b35}.top-hint b{color:#9affc9}.top-hint span{color:#ffe99c}.level-tag{position:absolute;top:16px;left:20px;z-index:5;border:1px solid #4babbf;background:#132b48c9;color:#a2fddc;padding:9px 12px;border-radius:6px;letter-spacing:2px;font:900 12px 'Courier New',monospace}.flight-path{position:absolute;inset:0;pointer-events:none}.flight-path i{position:absolute;left:0;right:0;border-top:1px dashed #8bd3e014;transform:translateY(-50%)}.flight-path i:nth-child(1){top:21%}.flight-path i:nth-child(2){top:35%}.flight-path i:nth-child(3){top:49%}.flight-path i:nth-child(4){top:63%}.flight-path i:nth-child(5){top:77%}
.mission-tag{position:absolute;top:88px;left:20px;z-index:5;border:1px solid #e7c16f9c;background:#172a47e6;color:#ffdfa5;padding:7px 10px;border-radius:7px;letter-spacing:1px;font:900 11px 'Courier New',monospace;pointer-events:none;box-shadow:0 0 15px #ffdf8a13}.mission-tag.completed{border-color:#8dffd4;color:#b5ffdc;box-shadow:0 0 16px #75ffd12d}
.ship{position:absolute;z-index:10;left:11%;top:47%;width:112px;height:63px;transform:translateY(-50%);filter:drop-shadow(0 0 13px #8df9e7a0);pointer-events:none;transition:filter .15s}.ship svg{width:100%;height:100%}.ship-shadow{fill:#0e1c40;stroke:#99fff0;stroke-width:3}.ship-wing{fill:#3f91aa;stroke:#b8ffee;stroke-width:3}.ship-hull{fill:#b3ecff;stroke:#f2ffdf;stroke-width:3}.ship-canopy{fill:#2f678b;stroke:#c6ffcf;stroke-width:3}.ship-detail{fill:none;stroke:#4b93bd;stroke-width:3}.ship-engine{position:absolute;z-index:-1;left:-43px;top:27px;width:58px;height:13px;border-radius:50%;background:linear-gradient(90deg,transparent,#ff6f78 33%,#ffe99d 70%,#f9ffdc);filter:blur(4px);animation:engine .18s ease-in-out infinite alternate}.ship.hit{filter:drop-shadow(0 0 30px #ff5271);animation:hit .13s linear 5}
.objects{position:absolute;inset:0;z-index:7;pointer-events:none}.math-pod{position:absolute;top:50%;left:0;min-width:220px;max-width:330px;width:clamp(220px,29vw,330px);height:88px;transform:translate3d(0,-50%,0);border:3px solid #a5f5f5;border-radius:24px;background:linear-gradient(135deg,#0b2b49e8,#224166f0);box-shadow:0 0 0 5px #3ce9e91b,inset 0 0 25px #5bf0e52b,0 8px 26px #01101c77;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;white-space:nowrap}.math-pod::before{content:"◈ MATHEMATICAL SIGNAL ◈";font:800 9px 'Courier New',monospace;letter-spacing:1.4px;color:#89aeba}.math-pod .equation{display:block;font:900 clamp(22px,2.7vw,32px) 'Trebuchet MS',Arial,sans-serif;color:#f2ffff;text-shadow:0 2px 12px #b4f5f66b;letter-spacing:-.5px}.math-pod.long .equation{font-size:clamp(19px,2.25vw,25px)}.math-pod::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:2px;background:linear-gradient(90deg,transparent,#77fce5,transparent);opacity:.7}.math-pod.blast{opacity:0;transform:scale(1.5);transition:opacity .2s,transform .2s}.math-pod.bad{border-color:#ff718b;box-shadow:0 0 28px #ff5269a0}.math-pod.good{border-color:#beffa1;box-shadow:0 0 34px #d6ff80af}
.feedback{position:absolute;z-index:14;bottom:57px;left:50%;transform:translateX(-50%);width:min(650px,90%);min-height:0;pointer-events:none;text-align:center;opacity:0;padding:11px 17px;border-radius:12px;border:2px solid transparent;background:#0f2745de;box-shadow:0 0 30px #010e28a9;font-weight:900;font-size:15px;line-height:1.35;transition:opacity .18s}.feedback.show{opacity:1}.feedback.correct{border-color:#a3fabb;color:#d3ffdc}.feedback.wrong{border-color:#ff7b8c;color:#ffd1d5}.feedback.neutral{border-color:#9bd9e8;color:#e2f5f5}.steering{display:none;position:absolute;z-index:18;left:12px;bottom:38px;gap:9px}.steering button{border:2px solid #9bffe3;border-radius:13px;background:#124768d9;color:#e8fff8;font:900 14px 'Courier New',monospace;padding:15px 18px;touch-action:none}.steering button:active{background:#30a1a5}.ground-label{position:absolute;z-index:4;bottom:13px;left:20px;font:800 9px 'Courier New',monospace;letter-spacing:2px;color:#bad3e3ac}
.screen{position:absolute;z-index:30;inset:0;display:none;justify-content:center;align-items:center;background:#051024dc;backdrop-filter:blur(7px);padding:18px;cursor:default}.screen.active{display:flex}.screen-card{width:min(670px,100%);max-height:100%;overflow:auto;border:4px solid #a7ffe3;border-radius:27px;background:linear-gradient(140deg,#173859,#12223f 70%,#301e4b);padding:28px 28px 25px;box-shadow:0 0 60px #60fce664,inset 0 0 45px #69ffed12;text-align:center}.screen-overline{color:#91ffd8;font:900 12px 'Courier New',monospace;letter-spacing:2.7px}.screen-icon{font-size:59px;filter:drop-shadow(0 0 18px #89ffcc87);margin:5px 0}.screen-card h2{font:900 clamp(39px,5vw,64px)/1.04 Impact,'Arial Black',sans-serif;margin:10px 0;text-shadow:3px 4px #0c4263}.screen-card h2 em{color:#ff7c9e;font-style:normal}.screen-card p{font-size:17px;font-weight:700;color:#d6e7f1;line-height:1.55;max-width:530px;margin:13px auto}.screen-card p b{color:#bbffdf}.screen-summary{font:900 11px 'Courier New',monospace;letter-spacing:1.3px;color:#ffe69c}.screen-summary span{color:#ff82a3;margin:0 4px}.start-button{cursor:pointer;border:3px solid #d4fff6;background:linear-gradient(#c7ffdb,#7df3b7);color:#113b43;border-radius:13px;padding:14px 28px;margin:19px 0 12px;font:900 22px Impact,'Arial Black',sans-serif;box-shadow:0 6px #379187;letter-spacing:1px}.start-button:hover{filter:brightness(1.12);transform:translateY(-2px)}.start-button span{margin-left:12px}.screen-small{font:700 10px 'Courier New',monospace;color:#a0c1d3}
.toolbar{display:flex;justify-content:space-between;gap:15px;padding:16px;background:#162b44;font:900 10px 'Courier New',monospace;letter-spacing:1.2px;color:#95bfd0}.toolbar span:first-child{color:#a8ffcf}footer{text-align:center;padding:28px 10px;color:#93aebd;font:700 11px 'Courier New',monospace}footer a{color:#c5ffe4}
@keyframes starsroll{to{transform:translateX(-220px)}}@keyframes engine{to{width:40px;opacity:.6}}@keyframes hit{to{transform:translate(-6px,-50%)}}
@media(max-width:850px){.hud{gap:9px;padding:12px;flex-wrap:wrap;justify-content:space-around}.hud span{font-size:9px}.hud strong{font-size:14px}.toolbar{font-size:9px}.top-hint{font-size:10px;letter-spacing:1px}.planet-one{width:160px;height:160px}.math-pod{width:clamp(205px,34vw,270px);height:82px}.math-pod .equation{font-size:24px}.math-pod.long .equation{font-size:20px}}
@media(max-width:600px){.shell{width:100%}.site-header{padding:12px;min-height:95px;align-items:flex-start}.brand-top{font-size:8px;letter-spacing:1px}.brand h1{font-size:39px;margin:5px 0}.brand p{font-size:8px;letter-spacing:1px}.home-link{max-width:119px;font-size:9px;padding:9px}.arcade{border-radius:0;border-width:2px}.hud{padding:9px 7px;gap:8px}.hud>div{min-width:60px}.hud strong{font-size:12px}.hud span{font-size:7px;letter-spacing:0}.hud .shields{letter-spacing:0}.sound-button{padding:7px;font-size:8px}.field{height:clamp(540px,73vh,660px)}.level-tag{font-size:9px;top:12px;left:9px}.top-hint{top:47px;font-size:9px;padding:0 8px}.ship{width:67px;height:38px;left:4%}.ship-engine{left:-26px;top:16px;width:32px;height:9px}.math-pod{width:207px;min-width:207px;height:77px;border-radius:17px}.math-pod .equation{font-size:23px}.math-pod.long .equation{font-size:18px}.math-pod::before{font-size:8px}.feedback{bottom:99px;font-size:12px;padding:9px 11px}.steering{display:flex}.ground-label{font-size:8px;left:auto;right:8px;bottom:15px}.toolbar{display:block;text-align:center;font-size:8px;line-height:1.7;padding:10px}.toolbar span{display:block}.screen-card{padding:18px 16px}.screen-icon{font-size:47px}.screen-card h2{font-size:44px}.screen-card p{font-size:14px}.screen-summary{font-size:9px}.start-button{font-size:20px;padding:13px 24px;margin-top:13px}}
@media(prefers-reduced-motion:reduce){.stars,.ship-engine{animation:none}.math-pod,.feedback,.progress-track>div{transition:none}}
.flight-path i:nth-child(2){top:31.5%}.flight-path i:nth-child(3){top:42%}.flight-path i:nth-child(4){top:52.5%}.flight-path i:nth-child(5){top:63%}
.laser-shot{position:absolute;z-index:11;left:0;top:0;width:70px;height:8px;border-radius:99px;background:linear-gradient(90deg,#7dffe0,#fffce5 65%,#fff);box-shadow:0 0 12px 4px #7bffe8c9,0 0 32px #91eaff;pointer-events:none;transform-origin:center;will-change:transform}
.laser-shot::before{content:"";position:absolute;right:-7px;top:-5px;width:19px;height:19px;border-radius:50%;background:#f9ffff;box-shadow:0 0 20px 4px #7effdc}
.laser-shot.returning{background:linear-gradient(90deg,#fff4ac,#ff5c69 65%,#ff2759);box-shadow:0 0 17px 6px #ff3269b3,0 0 36px #f33b72;filter:drop-shadow(0 0 8px #ffb3c1)}
.laser-shot.returning::before{right:auto;left:-7px;background:#ffe2e2;box-shadow:0 0 22px 5px #ff4064}
.steering{display:flex;left:auto;right:17px;bottom:38px}
.steering #upButton,.steering #downButton,.steering #leftButton,.steering #rightButton{display:none}
.steering #fireButton{min-width:130px;border:3px solid #ffd9bc;border-bottom:7px solid #842044;border-radius:18px;background:linear-gradient(#ff9d9f,#ff4676 52%,#c02b58);box-shadow:0 0 22px #ff4c82a1;color:#fff;font:900 18px Impact,'Arial Black',sans-serif;letter-spacing:1.2px;text-shadow:0 2px #80203b;cursor:pointer}
.steering #fireButton:hover{filter:brightness(1.1)}
.steering #fireButton:active{transform:translateY(3px);border-bottom-width:4px}
@media(max-width:600px){.steering{display:flex;left:10px;right:10px;justify-content:space-between;gap:5px;bottom:38px}.steering #upButton,.steering #downButton,.steering #leftButton,.steering #rightButton{display:block;flex:1;min-width:0;padding:13px 4px;font-size:17px}.steering #fireButton{min-width:98px;font-size:16px;padding:13px 6px}.ground-label{display:none}}
@media(max-width:600px){.mission-tag{top:78px;left:9px;font-size:9px;padding:6px 8px;letter-spacing:0}}
/* The forward scout's visual feedback is driven by the ship's actual x-position. */
.ship{--vanguard:0;--hyper:0;filter:drop-shadow(0 0 13px #8df9e7a0) drop-shadow(0 0 calc(var(--vanguard)*32px) #5bfff0) drop-shadow(0 0 calc(var(--vanguard)*19px) #a3fff1);transition:filter .12s}
.ship::before{content:"";position:absolute;z-index:-2;inset:-57px -70px;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at center,#b5fffff5 0%,#56fff2b8 19%,#24e9f48a 39%,transparent 74%);filter:blur(15px);opacity:calc(var(--vanguard)*.98);transition:opacity .14s}
.ship::after{content:"";position:absolute;z-index:-2;inset:-19px -26px;border-radius:50%;pointer-events:none;border:3px solid #81fffb;box-shadow:0 0 18px 5px #62fffebd,0 0 34px 13px #2af7ee4a,inset 0 0 16px #6cfde68a;opacity:calc(var(--vanguard)*.74);transform:scale(calc(.9 + var(--vanguard)*.12));transition:opacity .14s}
.ship.hit::before,.ship.hit::after{opacity:0}
.vanguard-status{position:absolute;top:15px;right:17px;z-index:5;border:1px solid #5b829d9c;border-radius:7px;padding:9px 12px;background:#0c2345d4;color:#a6c6d4;font:900 11px 'Courier New',monospace;letter-spacing:1.1px;box-shadow:0 0 12px #142e4a60;pointer-events:none;transition:color .18s,border-color .18s,box-shadow .18s}
.vanguard-status b{color:#c8ecff;margin-left:7px}.vanguard-status.active{border-color:#a3ffde;color:#afffe4;box-shadow:0 0 18px #79ffe65a,inset 0 0 12px #61fdd729}.vanguard-status.active b{color:#ffed9b;text-shadow:0 0 9px #ffe1a08c}
@media(max-width:600px){.vanguard-status{top:13px;right:8px;max-width:54%;padding:7px 6px;font-size:8px;letter-spacing:0}.vanguard-status b{margin-left:2px}.ship::before{inset:-35px -43px;filter:blur(12px)}.ship::after{inset:-13px -17px;border-width:2px}}
.screen.between .screen-card{padding:21px 28px 24px;max-width:580px}
.screen.between .screen-icon{font-size:39px;margin:1px 0}
.screen.between .screen-card h2{font-size:clamp(30px,3.7vw,47px);line-height:1.08;margin:9px 0}
.screen.between .screen-card p{font-size:14px;line-height:1.4;margin:10px auto}
.screen.between .screen-summary{font-size:10px;line-height:1.5}
.screen.between .start-button{font-size:18px;padding:12px 21px;margin:13px 0 8px}
.vanguard-pop{position:absolute;z-index:19;pointer-events:none;white-space:nowrap;padding:10px 17px 11px;border-radius:14px 14px 14px 4px;border:2px solid #e2fff6;color:#e7ffb5;background:linear-gradient(145deg,#127e83f0,#0a385af5);box-shadow:0 0 0 4px #55ffff3d,0 0 30px #6fffeeab,inset 0 0 15px #6cfff34d;font:900 16px 'Courier New',monospace;text-shadow:0 0 10px #c2ffacb8;animation:vanguardFloat 1.75s ease-out both}
@keyframes vanguardFloat{0%{opacity:0;transform:translateY(12px) scale(.65)}15%{opacity:1;transform:translateY(-8px) scale(1.08)}75%{opacity:1;transform:translateY(-26px) scale(1)}100%{opacity:0;transform:translateY(-57px) scale(.92)}}
@media(max-width:600px){.screen.between .screen-card{padding:19px 15px}.screen.between .screen-card h2{font-size:32px}.screen.between .screen-card p{font-size:12px}.vanguard-pop{font-size:11px;padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.vanguard-pop{animation:none}}
/* The extra 10% beyond Vanguard is a more radiant violet-and-cyan scout tier. */
.ship.hyper{filter:drop-shadow(0 0 25px #7dfff7) drop-shadow(0 0 34px #5bffe8) drop-shadow(0 0 calc(var(--hyper)*42px) #dc8dff) drop-shadow(0 0 calc(var(--hyper)*27px) #ffc8ff)}
.ship.hyper::before{background:radial-gradient(ellipse at center,#fbf0ffff 0%,#a5fbffe8 18%,#b968ffc3 40%,#5a7aff42 61%,transparent 78%);opacity:calc(.75 + var(--hyper)*.25)}
.ship.hyper::after{border-color:#f3c6ff;box-shadow:0 0 24px 8px #b777ffcc,0 0 44px 15px #70f7ff96,inset 0 0 17px #e5aeffad;animation:hyperPulse 1.1s ease-in-out infinite alternate}
.ship.hyper .ship-engine{background:linear-gradient(90deg,transparent,#a462ff 28%,#75f8ff 66%,#fffdf2);box-shadow:0 0 24px 5px #b47affb0}
.ship.hit,.ship.hit.hyper{filter:drop-shadow(0 0 30px #ff5271)}
.ship.hit::before,.ship.hit::after,.ship.hit.hyper::before,.ship.hit.hyper::after{opacity:0;animation:none}
.vanguard-status.hyper{color:#ffe3ff;border-color:#d3a4ff;background:#432366e3;box-shadow:0 0 22px #d781ff9e,inset 0 0 13px #db99ff4f}
.vanguard-status.hyper b{color:#fff1a2;text-shadow:0 0 10px #ffe8a9}
.vanguard-pop.hyper{color:#fff0bc;background:linear-gradient(140deg,#6042a5f2,#273779f5);border-color:#e8c7ff;box-shadow:0 0 0 4px #e6afff4a,0 0 32px #b983ffbd,inset 0 0 15px #dcadff7a}
@keyframes hyperPulse{from{filter:brightness(1)}to{filter:brightness(1.7)}}
@media(prefers-reduced-motion:reduce){.ship.hyper::after{animation:none}}