:root{--ink:#070a12;--panel:#11182ae8;--cyan:#38f2e0;--violet:#8b5cff;--gold:#ffc857;--coral:#ff5f6d;--white:#f6f8ff;--muted:#a8b3cf;--safe-top:max(18px,env(safe-area-inset-top));--safe-bottom:max(18px,env(safe-area-inset-bottom));font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--white);background:#02040a;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#02040a}button,input{font:inherit}button{color:inherit}.game-shell{position:relative;width:min(100vw,56.25vh);height:min(100vh,177.78vw);max-width:620px;max-height:1102px;margin:auto;overflow:hidden;background:var(--ink);box-shadow:0 0 80px #000,0 0 36px #38f2e014;isolation:isolate;touch-action:manipulation;user-select:none}
.screen{position:absolute;inset:0;display:none;flex-direction:column;padding:var(--safe-top) clamp(20px,5vw,36px) var(--safe-bottom);background-color:var(--ink);background-size:cover;background-position:center;overflow:hidden}.screen.active{display:flex}.screen[data-bg="1"]{background-image:linear-gradient(180deg,#02040a40 0%,#070a1260 45%,#070a12f5 100%),url("assets/sector-1-first-light.webp")}.screen[data-bg="2"]{background-image:linear-gradient(180deg,#02040a40 0%,#070a1268 48%,#070a12f5 100%),url("assets/sector-2-echo-district.webp")}.screen[data-bg="3"]{background-image:linear-gradient(180deg,#02040a50 0%,#070a126c 48%,#070a12f5 100%),url("assets/sector-3-solar-forge.webp")}
.brand-logo{width:48%;max-width:245px;height:44px;object-fit:contain;align-self:center;filter:drop-shadow(0 0 12px #000);margin-top:1vh}.brand-logo.small{height:34px;width:38%}.eyebrow{font-size:clamp(11px,1.35vh,14px);font-weight:800;letter-spacing:.3em;color:var(--cyan)}
.title-lockup{margin:auto 0 7vh;text-align:center}.title-lockup h1{font-size:clamp(64px,10.5vh,106px);line-height:.76;letter-spacing:-.055em;margin:18px 0 24px;font-weight:950;text-shadow:0 0 12px #38f2e099,0 0 28px #38f2e044}.title-lockup h1 em{font-style:normal;background:linear-gradient(180deg,#f6f8ff 5%,#78bfff 45%,#8b5cff 92%);-webkit-background-clip:text;background-clip:text;color:transparent}.title-lockup p{letter-spacing:.5em;margin:0 0 0 .5em;font-weight:700;font-size:clamp(13px,1.8vh,18px)}.orbit-o{display:inline-block;color:transparent;border:4px solid var(--cyan);border-radius:50%;width:.76em;height:.76em;vertical-align:.02em;box-shadow:0 0 18px var(--cyan);position:relative}.orbit-o:after{content:"";position:absolute;left:-35%;right:-35%;top:45%;height:3px;background:var(--cyan);box-shadow:0 0 10px var(--cyan);transform:rotate(-10deg)}
.start-actions{display:grid;gap:8px;width:min(88%,420px);margin:0 auto 8vh}.primary-button,.secondary-button,.text-button{border:0;cursor:pointer;text-transform:uppercase;font-weight:900;letter-spacing:.13em;min-height:58px;border-radius:999px;transition:transform .15s ease,filter .15s ease}.primary-button{background:linear-gradient(100deg,var(--cyan),#198dff 47%,var(--violet));color:#fff;box-shadow:0 0 22px #38f2e077,inset 0 1px 0 #ffffffaa;border:2px solid #c9ffff}.secondary-button{background:#07101dda;border:1px solid #63e9ff;color:var(--white);box-shadow:inset 0 0 18px #8b5cff20}.text-button{background:transparent;color:#c4cee3;min-height:40px}.primary-button:active,.secondary-button:active,.icon-button:active{transform:scale(.97)}.corner-controls{position:absolute;bottom:calc(var(--safe-bottom) + 10px);right:18px;display:flex;gap:10px}.icon-button{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid #5cefffaa;background:#07101dcc;color:var(--white);font-size:23px;cursor:pointer;box-shadow:0 0 15px #38f2e027}.tap-hint{position:absolute;bottom:calc(var(--safe-bottom) + 17px);left:20px;margin:0;color:#8792ab;font-size:12px;letter-spacing:.08em}
.loading-screen{align-items:center;justify-content:space-between;padding-top:7vh;padding-bottom:8vh}.loading-orbit{position:relative;width:44vw;max-width:260px;aspect-ratio:1;border-radius:50%;margin:auto;background:radial-gradient(circle,#07101d 0 42%,#38f2e0 43% 45%,transparent 46%);filter:drop-shadow(0 0 22px #38f2e0aa)}.loading-orbit:after,.loading-orbit:before{content:"";position:absolute;inset:10%;border:2px solid #8b5cff;border-radius:50%;transform:rotate(28deg) scaleY(.55)}.loading-orbit:before{inset:-10%;border-color:#38f2e0;transform:rotate(-18deg) scaleY(.62)}.loading-orbit i{position:absolute;width:15px;height:15px;border-radius:50%;background:var(--cyan);left:4%;top:46%;box-shadow:0 0 15px var(--cyan);animation:float 1.5s ease-in-out infinite}.loading-orbit i:nth-child(2){background:var(--violet);left:78%;top:18%;animation-delay:.3s}.loading-orbit i:nth-child(3){background:var(--gold);left:73%;top:79%;animation-delay:.6s}.loading-copy{width:min(88%,440px);text-align:center;letter-spacing:.26em}.load-track{height:15px;padding:3px;border:1px solid var(--cyan);border-radius:20px;margin:18px 0 10px;box-shadow:0 0 15px #38f2e055}.load-track span{display:block;width:0;height:100%;border-radius:12px;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:width .2s}.loading-copy small{color:var(--cyan)}
.screen-header{display:grid;grid-template-columns:50px 1fr 50px;align-items:center;text-align:center;gap:8px}.screen-header h2{font-size:clamp(25px,4vh,40px);letter-spacing:.14em;margin:4px 0;text-shadow:0 0 13px #38f2e088}.screen-header.compact{margin-bottom:3vh}.sector-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:2vh 0}.sector-tab{border:1px solid #50627d;background:#07101dcc;border-radius:14px;color:#7f8ca8;padding:10px 4px;font-weight:900;font-size:20px;cursor:pointer}.sector-tab small{display:block;font-size:8px;letter-spacing:.06em;margin-top:3px}.sector-tab.active{color:#fff;border-color:var(--cyan);box-shadow:0 0 15px #38f2e044;background:linear-gradient(135deg,#122a3ddd,#281749dd)}.level-map{position:relative;flex:1;min-height:340px;margin:0 5%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:6px}.level-map:before{content:"";position:absolute;inset:8% 15%;background:linear-gradient(90deg,transparent 47%,#38f2e088 49% 51%,transparent 53%);filter:drop-shadow(0 0 8px var(--cyan));transform:rotate(-14deg);z-index:-1}.level-node{place-self:center;width:clamp(58px,9vh,82px);aspect-ratio:1;border-radius:50%;border:2px solid #47536b;background:#080e19;color:#72809d;display:grid;place-items:center;font-size:23px;font-weight:900;cursor:pointer;position:relative}.level-node:nth-child(2n){transform:translateY(16%)}.level-node.complete{border-color:var(--cyan);color:#fff;box-shadow:0 0 18px #38f2e077,inset 0 0 18px #38f2e044}.level-node.current{width:clamp(70px,11vh,96px);border-color:#d8c6ff;color:#fff;background:radial-gradient(circle,#4c20b8aa,#09101c 70%);box-shadow:0 0 28px var(--violet),inset 0 0 20px #8b5cff88}.level-node.locked:after{content:"⌑";font-size:12px;position:absolute;top:8px;color:#7a8497}.level-card{display:flex;justify-content:space-between;gap:16px;border:1px solid #4c94be;background:#07101de8;padding:14px 18px;border-radius:18px;margin:1vh 0}.level-card div{display:grid;gap:4px}.level-card div:last-child{text-align:right}.level-card span{font-size:11px;letter-spacing:.16em;color:#aab4c9}.level-card strong{font-size:16px;color:var(--cyan)}.map-screen>.primary-button{margin-top:1vh}
.tutorial-demo{position:relative;width:80%;aspect-ratio:1.7;margin:2vh auto}.demo-orbit{position:absolute;inset:8%;border:3px solid var(--cyan);border-radius:50%;transform:rotate(-8deg) scaleY(.55);box-shadow:0 0 15px #38f2e055}.demo-pulse,.demo-gate{position:absolute;width:24px;height:24px;border-radius:50%;top:42%;box-shadow:0 0 18px currentColor}.demo-pulse{left:28%;color:var(--violet);background:var(--violet);animation:demoMove 2s ease-in-out infinite}.demo-gate{right:-3%;color:var(--gold);border:5px solid var(--gold);background:#fff}.demo-tap{position:absolute;right:3%;top:36%;font-size:64px;color:#fff;text-shadow:0 0 16px var(--cyan);animation:pulse 1s ease-in-out infinite}.instructions{padding:0;margin:0;display:grid;gap:12px;list-style:none}.instructions li{display:flex;align-items:center;gap:15px;padding:14px;border:1px solid #426e91;border-radius:18px;background:#07101de5}.instructions b{display:grid;place-items:center;min-width:48px;height:48px;border-radius:50%;border:2px solid var(--cyan);font-size:22px;box-shadow:0 0 12px #38f2e055}.instructions span{display:grid;gap:4px}.instructions strong{letter-spacing:.08em;font-size:14px}.instructions small{color:#9ca8bf;line-height:1.3}.gold-note{text-align:center;color:var(--gold);letter-spacing:.12em;font-weight:800;font-size:12px;margin:2vh 0}.tutorial-screen>.primary-button{margin-top:auto}
.play-screen{padding:0;background-position:center}.play-screen:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#050711cc 0,#05071122 22%,transparent 55%,#050711d9 100%);z-index:0;pointer-events:none}.play-screen canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}.hud{position:absolute;z-index:3}.top-hud{top:var(--safe-top);left:22px;right:22px;display:grid;grid-template-columns:1fr 1fr 46px;align-items:start}.top-hud span,.energy-hud span{display:block;font-size:11px;letter-spacing:.18em;color:#c3cce0;font-weight:700}.top-hud strong{display:block;font-size:clamp(23px,3.8vh,36px);color:var(--cyan);text-shadow:0 0 12px #38f2e088}.wave-label{text-align:center}.wave-label strong{font-size:20px;color:#fff}.energy-hud{position:absolute;z-index:3;top:calc(var(--safe-top) + 66px);left:22px;right:22px;display:flex;align-items:center;gap:12px}.energy-track{flex:1;height:15px;border:1px solid #77efff;border-radius:20px;padding:2px;background:#07101dbb}.energy-track i{display:block;width:70%;height:100%;border-radius:20px;background:linear-gradient(90deg,var(--cyan),var(--violet));box-shadow:0 0 10px #38f2e088;transition:width .25s}.bottom-hud{position:absolute;z-index:3;left:12%;right:12%;bottom:calc(var(--safe-bottom) + 4vh);display:grid;gap:14px;text-align:center}.bottom-hud strong{font-size:18px;letter-spacing:.18em}.bottom-hud em{font-size:32px;font-style:normal;color:var(--cyan);text-shadow:0 0 12px #38f2e0}.bottom-hud small{font-size:10px;color:#8792a8;letter-spacing:.12em}.beat-track{height:7px;border-radius:7px;background:#27324a;overflow:hidden}.beat-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--gold))}.tap-zone{position:absolute;inset:100px 0 0;z-index:2;background:transparent;border:0;cursor:crosshair}.feedback{position:absolute;z-index:4;left:0;right:0;top:28%;text-align:center;font-size:clamp(26px,5vh,46px);font-weight:950;letter-spacing:.12em;line-height:1.05;white-space:pre-line;opacity:0;transform:scale(.72);pointer-events:none}.feedback.show{animation:feedback .55s ease-out}.feedback.perfect{color:var(--gold);text-shadow:0 0 20px var(--gold)}.feedback.good{color:var(--cyan);text-shadow:0 0 20px var(--cyan)}.feedback.miss{color:var(--coral);text-shadow:0 0 20px var(--coral)}
.result-screen{align-items:center;text-align:center;padding-top:3vh}.result-heading{margin:3vh 0 1vh}.result-heading h2{font-size:clamp(25px,4.4vh,44px);letter-spacing:.13em;margin:0 0 12px;text-shadow:0 0 14px #38f2e0}.result-heading span{display:inline-block;border:1px solid var(--gold);color:var(--gold);padding:6px 18px;border-radius:999px;font-weight:800;font-size:12px;letter-spacing:.15em}.final-score{font-size:clamp(58px,9vh,92px);color:var(--cyan);text-shadow:0 0 22px #38f2e0aa;line-height:1}.rank-medal{width:clamp(150px,25vh,230px);aspect-ratio:1;border-radius:50%;border:7px double var(--gold);display:grid;place-content:center;margin:2vh 0;background:#1c140b99;box-shadow:0 0 32px #ffc85788,inset 0 0 32px #ffc85755}.rank-medal span{letter-spacing:.22em}.rank-medal strong{font-size:clamp(70px,11vh,110px);line-height:.9;color:var(--gold);text-shadow:0 0 20px var(--gold)}.stats-card{display:grid;grid-template-columns:repeat(3,1fr);width:100%;background:#07101de8;border:1px solid #4b87ae;border-radius:18px;padding:15px 6px}.stats-card div+div{border-left:1px solid #44617d}.stats-card span{display:block;font-size:9px;letter-spacing:.08em;color:#bbc3d4}.stats-card strong{display:block;color:var(--cyan);font-size:21px;margin-top:7px}.earned-row{width:100%;display:flex;justify-content:space-between;padding:14px 20px;border:1px solid #6a4c27;background:#15120de8;border-radius:18px;margin:12px 0;color:#d6dbe8;font-size:12px;letter-spacing:.11em}.earned-row strong{color:var(--gold);font-size:20px}.result-screen>.primary-button,.result-screen>.secondary-button{width:100%;margin-top:9px}
.modal{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:24px;background:#02040ad9;backdrop-filter:blur(10px)}.modal.open{display:flex}.modal-panel{position:relative;width:100%;max-width:460px;border:1px solid #55dcea;border-radius:28px;padding:28px 24px 20px;background:linear-gradient(160deg,#101a2bf5,#080b17f8);box-shadow:0 0 32px #38f2e044,inset 0 0 32px #8b5cff22;text-align:center}.modal-close{position:absolute;right:16px;top:12px;border:0;background:transparent;color:#fff;font-size:34px;cursor:pointer}.pause-mark{width:72px;height:72px;border:3px solid var(--cyan);border-radius:50%;display:grid;place-items:center;margin:0 auto;color:#fff;font-size:34px;box-shadow:0 0 20px #38f2e077}.modal h2{letter-spacing:.18em;font-size:32px;margin:12px 0 18px}.modal label{min-height:58px;display:grid;grid-template-columns:104px 1fr 58px;gap:10px;align-items:center;text-align:left;padding:0 12px;border:1px solid #344e6a;border-radius:14px;margin:9px 0;background:#07101dcc;font-size:12px;font-weight:800;letter-spacing:.08em}.modal input[type="range"]{width:100%;accent-color:var(--cyan)}.modal output{text-align:right}.toggle-row{grid-template-columns:1fr auto!important}.toggle-row input{position:absolute;opacity:0}.toggle-row span{width:48px;height:28px;border-radius:30px;background:#344159;position:relative}.toggle-row span:after{content:"";position:absolute;width:22px;height:22px;top:3px;left:3px;border-radius:50%;background:#bdc7d8;transition:left .2s,background .2s}.toggle-row input:checked+span{background:var(--cyan);box-shadow:0 0 12px #38f2e077}.toggle-row input:checked+span:after{left:23px;background:white}.modal .primary-button,.modal .secondary-button{width:100%;margin-top:10px;min-height:50px}.modal .danger{color:#a9b2c3;margin-top:8px}
@keyframes float{50%{transform:translateY(-12px)}}@keyframes pulse{50%{transform:scale(1.15);opacity:.68}}@keyframes demoMove{0%,15%{left:15%}70%,100%{left:88%}}@keyframes feedback{0%{opacity:0;transform:scale(.65)}30%{opacity:1;transform:scale(1.06)}100%{opacity:0;transform:scale(1.28)}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
.reduce-motion *,.reduce-motion *:before,.reduce-motion *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
@media (max-height:720px){.title-lockup{margin-bottom:3vh}.title-lockup h1{font-size:58px}.brand-logo{height:32px}.instructions{gap:7px}.instructions li{padding:9px}.tutorial-demo{margin:0 auto}.rank-medal{width:130px}.result-heading{margin:1.5vh 0 .5vh}.modal-panel{transform:scale(.9)}}

/* Keep the complete result and both actions above mobile browser controls. */
.result-screen{overflow-y:auto;overscroll-behavior:contain}
@media (max-width:600px){
  .game-shell{width:100vw;height:100svh;max-height:100svh}
  .screen{padding:max(10px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom))}
  .brand-logo{height:28px;width:42%;margin-top:0}
  .primary-button,.secondary-button{min-height:48px}
  .text-button{min-height:34px}
  .icon-button{width:40px;height:40px;font-size:20px}

  .loading-screen{padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(20px,env(safe-area-inset-bottom))}
  .loading-orbit{width:min(42vw,21svh);max-width:180px}
  .loading-copy{width:min(84%,380px);font-size:13px}
  .load-track{height:12px;margin:10px 0 6px}

  .title-lockup{margin:auto 0 3svh}
  .title-lockup h1{font-size:clamp(54px,9svh,72px);margin:10px 0 14px}
  .title-lockup p{font-size:12px;letter-spacing:.38em}
  .start-actions{width:min(84%,380px);margin:0 auto 5svh;gap:5px}
  .corner-controls{bottom:calc(var(--safe-bottom) + 4px);right:14px;gap:7px}
  .tap-hint{bottom:calc(var(--safe-bottom) + 12px);left:14px;font-size:10px}

  .screen-header{grid-template-columns:42px 1fr 42px;gap:5px}
  .screen-header h2{font-size:clamp(22px,3.3svh,30px);margin:1px 0}
  .screen-header.compact{margin-bottom:4px}
  .eyebrow{font-size:10px}
  .sector-tabs{gap:5px;margin:7px 0}
  .sector-tab{padding:6px 3px;border-radius:11px;font-size:16px}
  .sector-tab small{font-size:7px;margin-top:1px}
  .level-map{min-height:0;margin:0 4%;gap:3px}
  .level-node{width:clamp(46px,7svh,62px);font-size:18px}
  .level-node.current{width:clamp(54px,8.2svh,70px)}
  .level-node.locked:after{top:5px;font-size:10px}
  .level-card{padding:8px 13px;border-radius:14px;margin:6px 0}
  .level-card span{font-size:9px}
  .level-card strong{font-size:14px}
  .map-screen>.primary-button{margin-top:2px}

  .tutorial-demo{width:65%;max-height:19svh;margin:2px auto}
  .demo-pulse,.demo-gate{width:18px;height:18px}
  .demo-gate{border-width:4px}
  .demo-tap{font-size:46px}
  .instructions{gap:6px}
  .instructions li{gap:10px;padding:7px 9px;border-radius:13px}
  .instructions b{min-width:36px;height:36px;font-size:17px}
  .instructions span{gap:1px}
  .instructions strong{font-size:12px}
  .instructions small{font-size:10px}
  .gold-note{font-size:10px;margin:7px 0}
  .tutorial-screen>.primary-button{min-height:48px}

  .top-hud{top:max(10px,env(safe-area-inset-top));left:16px;right:16px;grid-template-columns:1fr 1fr 40px}
  .top-hud span,.energy-hud span{font-size:9px}
  .top-hud strong{font-size:clamp(21px,3.4svh,29px)}
  .wave-label strong{font-size:17px}
  .energy-hud{top:calc(max(10px,env(safe-area-inset-top)) + 48px);left:16px;right:16px;gap:8px}
  .energy-track{height:12px}
  .bottom-hud{left:10%;right:10%;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 14px);gap:8px}
  .bottom-hud strong{font-size:15px}
  .bottom-hud em{font-size:26px}
  .beat-track{height:5px}
  .feedback{top:25%;font-size:clamp(24px,4.5svh,36px)}

  .modal{padding:max(10px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}
  .modal-panel{max-height:calc(100svh - 24px);overflow-y:auto;border-radius:20px;padding:16px 16px 12px}
  .modal-close{right:11px;top:7px;font-size:29px}
  .pause-mark{width:48px;height:48px;font-size:23px}
  .modal h2{font-size:24px;margin:7px 0 9px}
  .modal label{min-height:44px;grid-template-columns:86px 1fr 52px;padding:0 9px;margin:5px 0;border-radius:11px;font-size:10px}
  .modal .primary-button,.modal .secondary-button{min-height:44px;margin-top:6px}
  .modal .danger{min-height:30px;margin-top:2px}

  .result-screen{padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom));gap:0}
  .result-screen>.brand-logo{height:27px}
  .result-heading{margin:10px 0 4px}
  .result-heading h2{font-size:clamp(24px,3.8vh,34px);margin-bottom:6px}
  .result-heading span{padding:4px 14px;font-size:10px}
  .final-score{font-size:clamp(52px,8vh,70px)}
  .rank-medal{width:clamp(118px,18vh,160px);border-width:5px;margin:8px 0}
  .rank-medal span{font-size:12px}
  .rank-medal strong{font-size:clamp(54px,8vh,76px)}
  .stats-card{padding:9px 4px;border-radius:15px}
  .stats-card span{font-size:8px}
  .stats-card strong{font-size:18px;margin-top:3px}
  .earned-row{padding:9px 16px;margin:7px 0;border-radius:15px}
  .earned-row strong{font-size:18px}
  .result-screen>.primary-button,.result-screen>.secondary-button{min-height:50px;margin-top:7px}
}