*{box-sizing:border-box}body{color:#e7f1ff;background:#080f20;margin:0;font-family:Segoe UI,Arial,sans-serif}main{max-width:1150px;margin:auto;padding:30px 42px;position:relative}header{justify-content:space-between;align-items:center;display:flex}.brand{color:#e7f1ff;letter-spacing:3px;font-size:22px;text-decoration:none}.brand b{color:#8bdcff}.brand span{letter-spacing:2.8px;color:#7e91ad;margin-top:8px;font-size:9px;display:block}button{font:inherit;cursor:pointer;color:#d8e8fa;background:#17283d;border:1px solid #334960;border-radius:10px;padding:10px 17px}button:focus-visible{outline-offset:3px;outline:3px solid #8bdcff}.intro{width:42%;position:absolute;top:240px;left:42px}.eyebrow{color:#8bdcff;letter-spacing:2px;font-size:10px}h1{letter-spacing:-2px;margin:25px 0;font-size:48px;font-weight:500;line-height:1.14}p{color:#8d9fb8;font-size:15px;line-height:1.9}.game{background:radial-gradient(at 50% 60%,#183765,#0b172e 80%);border:1px solid #30425d;border-radius:23px;width:400px;margin:36px 20px 0 auto;position:relative;overflow:hidden;box-shadow:0 30px 100px #0006}.bar,.bottom{justify-content:space-between;align-items:center;padding:17px 20px;display:flex}.bar{font-size:22px}.bar small{letter-spacing:2px;color:#a0b4d1;margin-left:10px;font-size:10px}.bar button{padding:8px 12px;font-size:12px}#viewport{touch-action:none;height:440px;position:relative}canvas{width:100%;height:100%;display:block}.bottom{color:#a6bdd8;border-top:1px solid #ffffff10;min-height:52px;font-size:11px}#count{color:#68849e}footer{letter-spacing:1px;color:#667d9c;justify-content:space-between;margin-top:32px;font-size:10px;display:flex}#loading{text-align:center;color:#a6bdd8;position:absolute;inset:45% 0}#result{text-align:center;background:#101f34f5;border:1px solid #536b82;border-radius:18px;padding:25px;position:absolute;top:110px;left:24px;right:24px;box-shadow:0 12px 35px #0008}#result[hidden]{display:none}#result-label{letter-spacing:2px;color:#91e8c7;font-size:9px}h2{margin:13px 0 0;font-size:30px}#result p{font-size:13px}#again{color:#143b32;background:#b2ead4;border:0}@media (width<=800px){main{padding:20px}.intro{text-align:center;width:auto;margin:28px 0 20px;position:static}.eyebrow{font-size:8px}h1{margin:12px 0;font-size:29px}h1 br{display:none}.intro p{margin:8px;font-size:12px;line-height:1.6}.intro p br{display:none}.game{width:min(100%,400px);margin:0 auto}footer{text-align:center;justify-content:center}footer span:last-child{display:none}#viewport{height:min(440px,55vh)}}#level-picker{color:#e7f1ff;font:inherit;background:#15263c;border:1px solid #334960;border-radius:8px;max-width:215px;padding:9px;font-size:13px}.level-nav{justify-content:space-between;align-items:center;gap:12px;padding:0 20px 10px;display:flex}.level-nav button{padding:4px 15px}.level-nav span{color:#a6bdd8;font-size:11px}button:disabled{opacity:.3;cursor:default}#continue{color:#143b32;background:#b2ead4;border:0}#continue[hidden]{display:none}#viewport{background:linear-gradient(#06112670,#06112685),url(/starfield-remastered.png) 50%/cover no-repeat}.level-progress{flex-direction:column;justify-content:center;align-items:center;gap:7px;min-height:61px;display:flex}.completion-badge{background:linear-gradient(110deg,#50311e,#302638);border:1px solid #eea45170;border-radius:30px;align-items:center;gap:8px;padding:4px 12px 4px 4px;display:inline-flex;box-shadow:0 3px 12px #0003,inset 0 1px #ffe7bd16}.completion-badge[hidden]{display:none}.level-nav .completion-orb{color:#fff5d6;text-shadow:0 1px 2px #91410b;background:radial-gradient(circle at 32% 24%,#ffe8a4 0%,#ffbd53 29%,#f58923 58%,#b84412 100%);border-radius:50%;flex:0 0 26px;place-items:center;width:26px;height:26px;font-size:16px;display:grid;box-shadow:inset 0 1px 2px #fff8,inset 0 -2px 3px #7d290977,0 2px 7px #ff902b33}.level-nav .completion-label{color:#ffdba6;letter-spacing:.7px;font-size:11px;font-weight:600}.level-progress #progress{color:#91a8c4;font-size:10px}.level-nav{padding-bottom:13px}#level-picker{flex:1;min-width:0}.bar{gap:12px}.completion-badge{box-shadow:none;background:#20273a;border-color:#b176a54d;border-radius:10px;gap:9px;padding:5px 12px 5px 5px}.level-nav .completion-orb{box-shadow:none;text-shadow:none;color:#fff;background:linear-gradient(135deg,#ffcc49 0%,#ff8736 28%,#fa426c 55%,#b735cd 80%,#6246e5 100%);font-size:15px}.level-nav .completion-label{color:#f4dfef;letter-spacing:.4px;font-weight:600}.audio-controls{align-items:center;gap:8px;display:flex}.audio-controls button{padding:9px 12px;font-size:12px}@media (width<=480px){header{flex-wrap:wrap;gap:18px}.audio-controls{margin-left:auto}.audio-controls button{padding:8px 10px;font-size:11px}}button{background:#283d56;border:0}button:hover{background:#36516e}#level-picker{background:#24384f;border:0}.bar button,.audio-controls button{background:#283d56}.bar button:hover,.audio-controls button:hover{background:#36516e}html,body{height:100%;overflow:hidden}main{flex-direction:column;width:100%;max-width:none;height:100dvh;margin:0;padding:0;display:flex}header{background:#0d182b;flex:none;gap:16px;padding:12px 24px}.brand{font-size:18px}.brand span{margin-top:4px;font-size:8px}.game{width:100%;min-height:0;box-shadow:none;background:#101d32;border:0;border-radius:0;flex:1;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:1fr 1fr;margin:0;display:grid}.bar{justify-self:end;gap:12px;width:min(100%,340px);padding:10px 16px}.level-nav{gap:14px;width:min(100%,360px);padding:8px 16px}.level-progress{gap:4px;min-height:40px}.completion-badge{padding:3px 9px 3px 3px}.level-nav .completion-orb{flex-basis:22px;width:22px;height:22px;font-size:13px}#viewport{grid-column:1/-1;width:100%;height:auto;min-height:0;overflow:hidden}#viewport canvas{max-width:100%;margin:0 auto}.bottom{background:#0d182b;grid-column:1/-1;min-height:34px;padding:8px 24px}#result{z-index:5;width:min(360px,100% - 32px);top:50%;left:50%;right:auto;transform:translate(-50%,-50%)}.audio-controls{margin-left:auto}.audio-controls button{white-space:nowrap}button[hidden]{display:none}@media (width<=600px){header{flex-wrap:wrap;gap:8px;padding:9px 12px}.brand{letter-spacing:2px;font-size:15px}.brand span{display:none}.audio-controls{gap:5px}.audio-controls button{padding:8px;font-size:10px}.game{grid-template-columns:1fr}.bar{justify-self:center;width:100%;padding:8px 12px}.level-nav{grid-row:2;width:100%;padding:0 12px 7px}.game{grid-template-rows:auto auto minmax(0,1fr) auto}#viewport{grid-row:3}.bottom{padding:8px 12px;font-size:10px}.level-progress{flex-direction:row;gap:10px;min-height:36px}}@media (height<=500px){header{padding:6px 12px}.brand span{display:none}.bar{padding:5px 12px}.level-nav{padding:3px 12px}.level-progress{flex-direction:row;min-height:30px}.bottom{min-height:26px;padding:5px 12px}}#viewport:before,#viewport:after{content:"";width:max(0px,calc((100% - var(--playfield-width,100%))/2));pointer-events:none;z-index:2;opacity:0;transition:opacity .3s;position:absolute;top:0;bottom:0}#viewport:before{background:linear-gradient(90deg,#080f20 0%,#080f20e6 30%,#080f2080 70%,#080f2000 100%);left:0}#viewport:after{background:linear-gradient(270deg,#080f20 0%,#080f20e6 30%,#080f2080 70%,#080f2000 100%);right:0}#viewport.side-fade:before,#viewport.side-fade:after{opacity:1}.audio-controls{flex-wrap:wrap;justify-content:flex-end}@media (prefers-reduced-motion:reduce){#viewport:before,#viewport:after{transition:none}}#level-picker[hidden]{display:none}.level-menu{z-index:10;flex:1;min-width:0;max-width:215px;font-size:13px;position:relative}.level-menu summary{cursor:pointer;white-space:nowrap;background:#24384f;border-radius:8px;align-items:center;gap:7px;padding:9px 27px 9px 10px;list-style:none;display:flex;overflow:hidden}.level-menu summary::-webkit-details-marker{display:none}.level-menu summary:after{content:"⌄";color:#a6bdd8;position:absolute;right:10px}.level-star,.level-nav .level-star{color:#0000;background:linear-gradient(135deg,#ffac36 0%,#ff702c 45%,#ef393b 100%);-webkit-background-clip:text;background-clip:text;flex:none;font-size:17px;line-height:1}.level-menu-options{background:#17283d;border-radius:10px;width:max(100%,220px);max-height:min(420px,55dvh);padding:6px;position:absolute;top:calc(100% + 7px);left:0;overflow:auto;box-shadow:0 12px 30px #0007}.level-menu-options button{text-align:left;background:0 0;border-radius:6px;align-items:center;gap:8px;width:100%;padding:10px;font-size:13px;display:flex}.level-menu-options button:hover,.level-menu-options button[aria-current=true]{background:#304861}.level-menu-heading{color:#91a8c4;letter-spacing:1px;padding:9px 10px;font-size:10px}.level-menu summary:focus-visible{outline-offset:3px;outline:3px solid #8bdcff}#result{border:0}#result.completed #result-label,#result.completed #result-title,#result.completed #result-text{display:none}#result.completed{width:auto;padding:18px 24px}#continue{color:#102b47;background:#78b9ee}#continue:hover{background:#94cbf5}#again{color:#102b47;background:#78b9ee}#again:hover{background:#94cbf5}#level-transition{opacity:0;z-index:1000;pointer-events:none;background:#000;position:fixed;inset:0}#level-transition.active{pointer-events:auto}#level-transition{background:0 0}#level-transition.active{opacity:1}.transition-scene{position:absolute;overflow:hidden;-webkit-mask-image:linear-gradient(#0000 45%,#000 55%);mask-image:linear-gradient(#0000 45%,#000 55%);-webkit-mask-position:0 100%;mask-position:0 100%;-webkit-mask-size:100% 300%;mask-size:100% 300%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.completion-badge{gap:7px;padding:5px 9px}@font-face{font-family:Outfit;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/outfit-regular.ttf)format("truetype")}@font-face{font-family:Outfit;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/outfit-medium.ttf)format("truetype")}@font-face{font-family:Outfit;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/outfit-semibold.ttf)format("truetype")}body{font-family:Outfit,Segoe UI,Arial,sans-serif;font-weight:400}button,#level-picker,.level-menu{font-family:inherit;font-weight:500}.brand,.brand b,h1,h2{font-weight:600}.brand span,.level-menu-heading{font-weight:400}#result{opacity:1;visibility:visible;transition:opacity .28s,visibility linear}#result[hidden]{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s,visibility 0s linear .22s;display:block}@media (prefers-reduced-motion:reduce){#result,#result[hidden]{transition:none}}.completion-badge[hidden]{visibility:hidden;display:inline-flex}.level-menu summary{height:36px;line-height:18px}.level-progress #progress{font-variant-numeric:tabular-nums;white-space:nowrap}#result.completed.collection-complete{width:min(360px,100% - 32px);padding:25px}#result.collection-complete #result-label{display:inline}#result.collection-complete #result-title,#result.collection-complete #result-text{display:block}#welcome{color:#e7f1ff;opacity:1;background:radial-gradient(at 50% 35%,#1b457c44,#0000 65%),linear-gradient(#080f20b8,#080f20ed),url(/starfield-remastered.png) 50%/cover;border:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:28px 20px;transition:opacity .35s;position:fixed;inset:0;overflow:auto}#welcome::backdrop{background:#080f20}#welcome.leaving{opacity:0}.welcome-content{text-align:center;flex-direction:column;justify-content:center;align-items:center;max-width:600px;min-height:100%;margin:auto;display:flex}.welcome-eyebrow{letter-spacing:3.5px;color:#90aac8;font-size:10px}.welcome-mark{width:clamp(110px,23vh,190px);height:auto;margin:20px 0 9px}#welcome-title{letter-spacing:5px;margin:0;font-size:clamp(43px,8vw,68px);font-weight:600;line-height:.95}#welcome-title span,#welcome-title strong{display:block}#welcome-title span{color:#edf8ff}#welcome-title strong{color:#0000;background:linear-gradient(140deg,#a2edff,#4f9be9);-webkit-background-clip:text;background-clip:text;margin-top:7px;font-weight:600}.welcome-tagline{color:#b9cce2;margin:21px 0 0;font-size:16px;line-height:1.5}.welcome-instructions{color:#8fa8c6;margin:17px 0 24px;font-size:14px;line-height:1.7}#welcome-play{color:#102c50;background:linear-gradient(115deg,#86d8f9,#649df0);border:0;border-radius:16px;min-width:230px;padding:16px 32px;font-size:18px;font-weight:600;transition:filter .2s,transform .2s}#welcome-play:hover{filter:brightness(1.1);transform:translateY(-2px)}.welcome-footer{letter-spacing:2px;color:#7e99b7;margin-top:30px;font-size:9px}.welcome-footer i{color:#ff9551;margin:0 12px;font-style:normal}@media (height<=650px){#welcome{padding:18px}.welcome-mark{width:100px;margin:10px 0}#welcome-title{font-size:43px}.welcome-tagline{margin-top:14px}.welcome-instructions{margin:12px 0 16px}.welcome-footer{margin-top:20px}}@media (prefers-reduced-motion:reduce){#welcome,#welcome-play{transition:none}}main.ad-layout{grid-template-rows:110px auto minmax(0,1fr);grid-template-columns:160px minmax(0,1fr) 160px;gap:12px;padding:12px;display:grid}main.ad-layout>header{border-radius:12px;grid-area:2/2;padding:10px 16px}main.ad-layout>.game{border-radius:12px;grid-area:3/2;min-width:0}.ad-slot{color:#69809d;flex-direction:column;align-self:start;align-items:center;gap:7px;min-width:0;display:flex}.ad-slot>span{letter-spacing:2px;font-size:8px;font-weight:400;line-height:10px}.ad-creative{color:#7288a3;background:#14233a80;border:1px dashed #748eac35;border-radius:10px;place-items:center;width:100%;font-size:12px;display:grid;overflow:hidden}.ad-slot-top{grid-area:1/1/auto/-1;justify-self:center;width:min(728px,100%)}.ad-slot-top .ad-creative{height:90px}.ad-slot-left{grid-area:2/1/4}.ad-slot-right{grid-area:2/3/4}.ad-slot-left,.ad-slot-right{align-self:center;width:160px}.ad-slot-left .ad-creative,.ad-slot-right .ad-creative{height:min(600px,100dvh - 165px)}#welcome.ad-layout[open]{grid-template-rows:110px minmax(min-content,1fr);grid-template-columns:160px minmax(0,1fr) 160px;gap:12px;padding:12px;display:grid}#welcome.ad-layout .welcome-content{grid-area:2/2;width:100%;min-height:0;padding:12px 0}#welcome.ad-layout .ad-slot-left,#welcome.ad-layout .ad-slot-right{grid-row:2}#welcome.ad-layout .welcome-mark{width:clamp(90px,17vh,150px);margin:10px 0}#welcome.ad-layout #welcome-title{font-size:clamp(38px,6vw,56px)}#welcome.ad-layout .welcome-tagline{margin-top:15px}#welcome.ad-layout .welcome-instructions{margin:12px 0 18px}#welcome.ad-layout .welcome-footer{margin-top:22px}@media (width<=1050px){main.ad-layout,#welcome.ad-layout[open]{grid-template-columns:minmax(0,1fr)}main.ad-layout>header,main.ad-layout>.game,#welcome.ad-layout .welcome-content{grid-column:1}.ad-slot-left,.ad-slot-right{display:none}}@media (width<=760px),(height<=550px){main.ad-layout,#welcome.ad-layout[open]{grid-template-rows:70px auto minmax(0,1fr);gap:8px;padding:8px}#welcome.ad-layout[open]{grid-template-rows:70px minmax(min-content,1fr)}.ad-slot-top{width:min(320px,100%)}.ad-slot-top .ad-creative{height:50px}}@media (width<=600px){main.ad-layout>header{padding:8px}.ad-layout .audio-controls button{padding:7px;font-size:10px}.ad-layout .brand{font-size:13px}}main.ad-layout>header{z-index:20;flex-wrap:nowrap;gap:12px;position:relative}header>.brand{white-space:nowrap;flex:none;order:1}header>.audio-controls{flex-wrap:nowrap;flex:none;order:3;gap:6px;margin-left:0}header>.game-controls{flex-wrap:nowrap;flex:1;order:2;justify-content:center;align-items:center;gap:8px;min-width:0;display:flex}.game-controls .bar{flex:1;gap:8px;width:auto;min-width:0;max-width:280px;padding:0}.game-controls .level-nav{flex:none;gap:6px;width:auto;padding:0}.game-controls .level-progress{flex-direction:row;gap:8px;min-height:36px}.game-controls .level-nav button{min-width:32px;height:36px;padding:6px 10px}.game-controls #retry{white-space:nowrap;height:36px;padding:8px 10px;font-size:12px}.game-controls .level-menu{min-width:100px;max-width:none}main.ad-layout>.game{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}main.ad-layout>.game>#viewport{grid-area:1/1}.sr-status{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=1600px){.game-controls .level-progress{display:none}}@media (width<=1300px){main.ad-layout>header{gap:8px}header>.brand{letter-spacing:1.5px;font-size:14px}header>.brand span{letter-spacing:1px;font-size:6px}header>.audio-controls button,#retry{position:relative}header>.audio-controls button{width:34px;height:36px;padding:0!important;font-size:0!important}header>.audio-controls button:after{font-size:17px}#fullscreen:after{content:"⛶"}#music:after{content:"♫"}#sound:after{content:"♪"}header>.audio-controls button[aria-pressed=false]:after{opacity:.5;text-decoration:line-through}}@media (width<=700px){main.ad-layout>header{gap:5px;padding:8px}header>.brand{letter-spacing:.6px;white-space:normal;width:57px;line-height:1.25;font-size:9px!important}header>.brand span{display:none}header>.game-controls,.game-controls .bar,.game-controls .level-nav,header>.audio-controls{gap:4px}.game-controls .level-menu{min-width:76px}.game-controls .level-menu summary{gap:3px;height:32px;padding:7px 16px 7px 6px;font-size:10px}.game-controls .level-menu summary:after{right:5px}.game-controls .level-menu summary .level-star{font-size:12px}.game-controls #retry{flex-shrink:0;width:28px;height:32px;padding:0;font-size:0}.game-controls #retry:after{content:"↻";font-size:17px}.game-controls .level-nav button{width:26px;min-width:26px;height:32px;padding:0}header>.audio-controls button{width:28px;height:32px}}
