:root{
  color-scheme:dark;
  --bg:#050711;
  --panel:#0a1020ee;
  --panel-solid:#0a1020;
  --line:#24314d;
  --cyan:#45f4ff;
  --cyan2:#18bfe7;
  --pink:#ff48cf;
  --purple:#8c5cff;
  --lime:#c6ff00;
  --text:#eef9ff;
  --muted:#91a4bb;
  --danger:#ff416c;
  --amber:#ffd85a;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -15%,#142449 0,#080b18 36%,var(--bg) 70%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
body{min-height:100dvh}
button,select{font:inherit}
button{touch-action:manipulation}
a{color:inherit}
.game-shell{min-height:100dvh;display:flex;flex-direction:column}
.topbar{min-height:58px;padding:8px clamp(10px,2vw,22px);display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #263553;background:#050914f0;backdrop-filter:blur(10px);position:relative;z-index:20}
.game-brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.brand-mark{width:34px;height:34px;filter:drop-shadow(0 0 8px #45f4ff55)}
.game-brand span{display:flex;flex-direction:column;min-width:0}
.game-brand strong{font-size:clamp(.82rem,2.2vw,1rem);letter-spacing:.08em;white-space:nowrap}
.game-brand small{color:var(--muted);font-size:.68rem}
.top-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.small-btn,.gfx-control{border:1px solid #31445f;background:#0c1425;color:var(--text);border-radius:9px;min-height:36px;padding:7px 10px;font-weight:800;font-size:.72rem;letter-spacing:.03em}
.small-btn{cursor:pointer}
.small-btn:hover,.small-btn:focus-visible{border-color:var(--cyan);outline:none}
.gfx-control{display:flex;align-items:center;gap:6px;color:var(--muted)}
.gfx-control select{background:#07101d;color:var(--text);border:0;outline:none;font-weight:800;max-width:74px}
.game-stage{position:relative;width:min(1500px,100%);margin:0 auto;padding:8px clamp(6px,1.4vw,16px) 12px;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
.hud{display:grid;grid-template-columns:minmax(170px,1.4fr) .55fr .8fr minmax(170px,1.25fr);gap:7px}
.hud-block{min-height:51px;border:1px solid #263a57;border-radius:10px;background:linear-gradient(180deg,#0e1830e8,#091120e8);padding:6px 10px;display:flex;align-items:center;gap:8px;box-shadow:inset 0 1px #ffffff08}
.hud-label{font-size:.61rem;letter-spacing:.11em;color:var(--muted);font-weight:900}
.hud-block strong{font-size:1.1rem}
.station-block{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto}
.station-block .hud-label{grid-row:1/3;align-self:center}
.station-block small{font-size:.59rem;color:var(--cyan);font-weight:900;letter-spacing:.1em}
.health-pips{display:flex;gap:5px}
.health-pip{width:22px;height:12px;border:1px solid #ff7b9a;border-radius:3px;background:linear-gradient(90deg,#ff285f,#ff629e);box-shadow:0 0 8px #ff416c77;transform:skewX(-10deg)}
.health-pip.off{background:#2b2030;border-color:#5c3342;box-shadow:none}
.energy-block{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto}
.energy-block .hud-label{grid-row:1/3;align-self:center}
.energy-track{height:10px;background:#101b2e;border:1px solid #2e4865;border-radius:999px;overflow:hidden;min-width:80px}
.energy-track span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#11b8ee,#5fffff);box-shadow:0 0 10px #45f4ffaa;transition:width .12s linear}
.energy-block small{font-size:.59rem;color:#b8f8ff;font-weight:800}
.canvas-wrap{position:relative;flex:1;min-height:240px;aspect-ratio:16/9;max-height:calc(100dvh - 228px);margin:auto;width:100%;border:1px solid #30486f;border-radius:14px;overflow:hidden;background:#050711;box-shadow:0 0 32px #0ae5ff18,0 18px 70px #0008}
canvas{display:block;width:100%;height:100%;background:#050711;touch-action:none}
.toast{position:absolute;top:13px;left:50%;transform:translate(-50%,-12px);opacity:0;pointer-events:none;background:#07101ee8;border:1px solid #45f4ff88;color:#dffcff;padding:8px 12px;border-radius:999px;font-size:.72rem;font-weight:900;letter-spacing:.05em;transition:.2s;z-index:6;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}
.toast.show{opacity:1;transform:translate(-50%,0)}
.panel-overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:16px;background:#03050ac7;backdrop-filter:blur(8px);z-index:12}
.panel-overlay.show{display:flex}
.panel{width:min(650px,94%);max-height:94%;overflow:auto;border:1px solid #36517a;border-radius:18px;background:linear-gradient(155deg,#0b162aeF,#080d1aF5);box-shadow:0 0 34px #31d9ff22,0 22px 70px #000c;padding:clamp(18px,3.5vw,34px);text-align:center}
.panel h1,.panel h2{margin:.15em 0 .35em;line-height:1}
.panel h1{font-size:clamp(2rem,7vw,4.5rem);letter-spacing:-.055em;text-shadow:0 0 20px #45f4ff3d}
.panel h2{font-size:clamp(1.5rem,5vw,2.7rem)}
.eyebrow{margin:0 0 8px;color:var(--cyan);font:900 .68rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.13em}
.lead{color:#bdcbe0;margin:0 auto 18px;max-width:52ch;line-height:1.5}
.mission-card,.unlock-card{display:flex;flex-direction:column;gap:5px;margin:14px auto;border:1px solid #694fe0;background:linear-gradient(110deg,#15143b,#101f3a);border-radius:12px;padding:13px 15px;max-width:520px}
.mission-card strong,.unlock-card strong{color:#fff;letter-spacing:.05em}
.mission-card span,.unlock-card span,.unlock-card small{color:#aebcdc;font-size:.76rem}
.unlock-card strong{color:var(--lime);font-size:1.35rem;text-shadow:0 0 16px #c6ff0055}
.controls-copy{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:15px auto;max-width:520px;text-align:left}
.controls-copy span{border:1px solid #243a58;background:#091426;border-radius:8px;padding:8px 10px;color:#9fb1c9;font-size:.75rem}
.controls-copy b{color:#fff}
.primary-btn,.secondary-btn{border-radius:11px;padding:11px 18px;min-width:150px;font-weight:950;cursor:pointer;letter-spacing:.04em}
.primary-btn{border:1px solid #5effff;background:linear-gradient(100deg,#10b8de,#445dff);color:white;box-shadow:0 0 18px #2eeaff2e}
.primary-btn:hover,.primary-btn:focus-visible{filter:brightness(1.12);outline:2px solid white;outline-offset:2px}
.secondary-btn{border:1px solid #40506b;background:#11192a;color:#dce8f7;margin-top:8px}
.secondary-link{display:block;margin-top:14px;color:#a9bdd3;font-weight:800;font-size:.8rem}
.rotate-note{margin:12px 0 0;color:#788ba5;font-size:.68rem}
.dialog-panel{display:grid;grid-template-columns:92px 1fr;gap:20px;text-align:left;align-items:center}
.dialog-text{font-size:clamp(1rem,2.4vw,1.25rem);line-height:1.45;color:#e8f7ff;margin:4px 0 16px}
.sidekick-face{width:86px;height:104px;border-radius:46px 46px 34px 34px;background:linear-gradient(#ebbb8e 0 55%,#1c2438 56%);position:relative;box-shadow:0 0 22px #ff48cf3c;border:2px solid #ff48cf88}
.sidekick-face:before{content:"";position:absolute;left:13px;right:13px;top:29px;height:27px;background:#19152d;border-radius:50% 50% 42% 42%;transform:rotate(-3deg)}
.sidekick-face:after{content:"";position:absolute;width:18px;height:7px;left:21px;top:39px;border-radius:50%;background:#5fffff;box-shadow:29px 0 #5fffff,0 0 10px #5fffff,29px 0 10px #5fffff}
.sidekick-face .mask{position:absolute;bottom:5px;left:26px;width:34px;height:30px;border-radius:10px 10px 14px 14px;background:linear-gradient(150deg,#ff3b92,#8036ff);clip-path:polygon(50% 0,100% 30%,87% 100%,13% 100%,0 30%)}
.compact-panel{width:min(430px,94%)}
.finish-panel{width:min(560px,94%)}
.touch-controls{display:none;align-items:center;justify-content:space-between;gap:10px;min-height:72px;user-select:none;-webkit-user-select:none}
.move-cluster,.action-cluster{display:flex;gap:8px}
.touch-btn{border:1px solid #36506f;color:#eaf8ff;background:#0c1729cc;box-shadow:inset 0 1px #ffffff11;border-radius:14px;min-width:64px;height:60px;font-weight:950;letter-spacing:.03em;touch-action:none}
.touch-btn.active,.touch-btn:active{transform:translateY(1px);background:#153154;border-color:#53f7ff;box-shadow:0 0 15px #45f4ff33}
.action.jump-btn{border-color:#6e65ee}
.action.hit-btn{border-color:#ff4fa7}
.action.arc-btn{border-color:#38eaf4;color:#70f7ff}
.help-line{margin:0;text-align:center;color:#7f91aa;font-size:.68rem;min-height:1.1em}
.game-footer{border-top:1px solid #1d2b43;background:#050812;color:#6f8197;padding:11px clamp(12px,2vw,22px);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.66rem}
@media (hover:none),(pointer:coarse){
  .touch-controls{display:flex}
  .canvas-wrap{max-height:calc(100dvh - 302px)}
}
@media (max-width:720px){
  .topbar{min-height:48px;padding:5px 7px}
  .brand-mark{width:28px;height:28px}
  .game-brand strong{font-size:.7rem}
  .game-brand small{font-size:.57rem}
  .small-btn,.gfx-control{padding:5px 7px;min-height:32px;font-size:.61rem}
  .hud{grid-template-columns:1.3fr .55fr .8fr 1.25fr;gap:4px}
  .hud-block{min-height:43px;padding:4px 6px;border-radius:7px}
  .hud-label{font-size:.49rem}
  .hud-block strong{font-size:.87rem}
  .health-pip{width:14px;height:9px;gap:3px}
  .station-block small,.energy-block small{font-size:.48rem}
  .energy-track{min-width:50px;height:8px}
  .game-stage{padding:5px}
  .touch-btn{min-width:56px;height:54px;font-size:.72rem}
  .game-footer{display:none}
  .help-line{font-size:.58rem}
  .controls-copy{grid-template-columns:1fr}
}
@media (max-width:520px){
  .top-actions .gfx-control{display:none}
  .top-actions{gap:4px}
  .hud{grid-template-columns:1.4fr .5fr .72fr 1.15fr}
  .hud-block{gap:4px}
  .health-pips{gap:2px}
  .touch-btn{min-width:50px;height:50px;border-radius:12px}
  .action-cluster,.move-cluster{gap:5px}
}
@media (orientation:portrait) and (max-width:780px){
  .canvas-wrap{width:100%;aspect-ratio:16/10;max-height:none;min-height:0}
  .touch-controls{min-height:68px}
  .panel{padding:16px}
  .dialog-panel{grid-template-columns:64px 1fr;gap:12px}
  .sidekick-face{width:62px;height:76px}
  .sidekick-face:before{left:9px;right:9px;top:21px;height:20px}
  .sidekick-face:after{width:13px;height:5px;left:15px;top:29px;box-shadow:21px 0 #5fffff,0 0 8px #5fffff,21px 0 8px #5fffff}
  .sidekick-face .mask{left:18px;width:26px;height:22px}
}
@media (orientation:landscape) and (max-height:620px){
  .topbar{min-height:42px;padding:4px 8px}
  .game-brand small{display:none}
  .hud-block{min-height:38px;padding:3px 6px}
  .game-stage{gap:4px;padding:4px 6px}
  .canvas-wrap{max-height:calc(100dvh - 168px)}
  .touch-controls{position:absolute;inset:auto 8px 7px 8px;z-index:8;pointer-events:none;min-height:56px}
  .touch-controls button{pointer-events:auto;opacity:.78;height:50px;min-width:54px}
  .help-line{display:none}
  .game-footer{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}