html,body{margin:0;padding:0;background:#000;height:100%;overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
@supports (height:100dvh){html,body{height:100dvh}}
canvas{touch-action:none;-webkit-touch-callout:none}
html.touch body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.touch input,html.touch textarea{-webkit-user-select:text;user-select:text}
body{display:flex;align-items:center;justify-content:center}
/* The game is drawn on a fixed 1536x1024 (3:2) canvas. Scale it to fit whatever window it is in, keeping the
   aspect ratio, so nothing is cut off by the taskbar or a small window (letterboxed in black). */
canvas{display:block;background:#000;image-rendering:pixelated;outline:none;
  width:min(100vw, calc(100vh * 1.5));height:min(100vh, calc(100vw / 1.5))}
@supports (height:100dvh){canvas{width:min(100vw, calc(100dvh * 1.5));height:min(100dvh, calc(100vw / 1.5))}}

/* ---------- overlay panels (menu, pause, settings, level complete...) in the same cockpit style as the in-game HUD ---------- */
#overlay{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none}
.panel{
  --a:#7fe3ff;                       /* accent colour (corner brackets, headings) */
  pointer-events:auto;text-align:center;padding:20px 28px;color:#e8f4ff;font-family:monospace;
  border:2px solid rgba(127,227,255,.35);border-radius:6px;box-sizing:border-box;max-width:96vw;max-height:96vh;overflow-y:auto;overflow-x:hidden;overflow-wrap:anywhere;
  background:
    linear-gradient(var(--a),var(--a)) top left/28px 3px no-repeat,    linear-gradient(var(--a),var(--a)) top left/3px 28px no-repeat,
    linear-gradient(var(--a),var(--a)) top right/28px 3px no-repeat,   linear-gradient(var(--a),var(--a)) top right/3px 28px no-repeat,
    linear-gradient(var(--a),var(--a)) bottom left/28px 3px no-repeat, linear-gradient(var(--a),var(--a)) bottom left/3px 28px no-repeat,
    linear-gradient(var(--a),var(--a)) bottom right/28px 3px no-repeat,linear-gradient(var(--a),var(--a)) bottom right/3px 28px no-repeat,
    rgba(5,9,16,.90);
  box-shadow:0 0 40px rgba(0,0,0,.6);
}
.panel h2{margin:0 0 10px;font-size:28px;letter-spacing:4px;color:var(--a);text-shadow:0 0 14px rgba(127,227,255,.45)}
.panel h3{margin:0 0 8px;font-size:20px;letter-spacing:3px;color:var(--a)}
.panel div{line-height:1.5}
button{font-family:monospace;font-weight:700;font-size:15px;letter-spacing:1px;padding:11px 20px;margin:0 4px;border-radius:6px;
  border:2px solid rgba(127,227,255,.5);background:rgba(127,227,255,.08);color:#e8f4ff;cursor:pointer;transition:background .12s,box-shadow .12s}
button:hover,button:focus-visible,button.padfocus{background:rgba(127,227,255,.22);box-shadow:0 0 14px rgba(127,227,255,.5);outline:none}
.row{margin-top:12px}
.panel label{display:inline-flex;gap:8px;align-items:center}
.panel input[type=range]{width:160px;accent-color:#7fe3ff}
.panel input[type=checkbox]{accent-color:#7fe3ff;width:16px;height:16px}
kbd{display:inline-block;min-width:22px;padding:3px 8px;margin:0 2px;border:2px solid #7fe3ff;border-bottom-width:4px;border-radius:6px;
  background:#0c1626;color:#e8f4ff;font:700 14px monospace;text-align:center}
.keys{margin-top:10px}

/* ---------- start menu ---------- */
/* Everything inside is sized in em, and the base size follows the window height, so the whole menu scales down on
   short windows instead of needing to scroll. It is wide (up to 1500px) and laid out in columns to keep it short. */
.menu{--a:#7fe3ff;width:min(1500px,98vw);height:min(790px,95vh);display:flex;flex-direction:column;text-align:left;
  padding:1.1em 1.6em 1em;font-size:clamp(10px,1.5vh,15px)}
.menu header{display:flex;align-items:center;gap:1.4em;margin-bottom:.5em}
.menu .logo{flex:1}
.menu .logo h1{margin:0;font-size:3em;letter-spacing:.22em;color:#fff;text-shadow:0 0 18px #7fe3ff,0 0 4px #7fe3ff}
.menu .logo .tag{color:#ffd23f;letter-spacing:.35em;font-size:.85em;margin-top:.1em}
.menu .hero{display:flex;align-items:center;gap:1.1em}
.menu .hero img{height:3.4em;image-rendering:pixelated}
.menu .best{text-align:right}
.menu .best small{display:block;color:#7f93a8;letter-spacing:.15em;font-size:.75em}
.menu .best b{font-size:1.7em;color:#fff}
.menu nav{display:flex;gap:.4em;border-bottom:2px solid rgba(127,227,255,.25);margin-bottom:.8em}
.menu .tab{margin:0;border-radius:6px 6px 0 0;border-bottom:none;font-size:.9em;padding:.6em 1.2em;background:transparent;color:#7f93a8;border-color:transparent}
.menu .tab:hover{color:#fff;box-shadow:none;background:rgba(127,227,255,.10)}
.menu .tab.on{color:#05101a;background:#7fe3ff;border-color:#7fe3ff;box-shadow:0 0 14px rgba(127,227,255,.5)}
.menu .body{overflow:auto;padding-right:.7em;min-height:0;flex:1;scrollbar-width:thin;scrollbar-color:#7fe3ff rgba(127,227,255,.12)}
.menu .body::-webkit-scrollbar{width:10px}
.menu .body::-webkit-scrollbar-track{background:rgba(127,227,255,.10);border-radius:5px}
.menu .body::-webkit-scrollbar-thumb{background:#7fe3ff;border-radius:5px}
.menu section{display:none}
.menu section.on{display:block}
.menu footer{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-top:.7em;padding-top:.7em;border-top:2px solid rgba(127,227,255,.25)}
.menu footer .hint{color:#7f93a8;font-size:.85em}
.menu button{font-size:.95em;padding:.7em 1.3em}
.menu button.go{font-size:1.25em;padding:.7em 2.2em;letter-spacing:.2em;background:linear-gradient(#5fe6ff,#2aa8e8);color:#031018;border-color:#bff4ff;box-shadow:0 0 20px rgba(95,230,255,.55)}
.menu button.go:hover{box-shadow:0 0 30px rgba(95,230,255,.9);background:linear-gradient(#8ff0ff,#46bdf2)}
.menu kbd{font-size:.95em;min-width:1.6em;padding:.2em .5em}

.menu h4{margin:.9em 0 .5em;font-size:.85em;letter-spacing:.25em;color:#ffd23f;border-bottom:1px solid rgba(255,210,63,.3);padding-bottom:.3em}
.menu h4:first-child{margin-top:0}
.menu p{margin:.4em 0;color:#c9d6e4;line-height:1.5;font-size:.95em}
.menu p b,.menu .ds b{color:#fff}
.grid2,.grid3,.grid4,.cols2{display:grid;gap:.6em 1.1em}
.grid2{grid-template-columns:1fr 1fr}
.grid3{grid-template-columns:repeat(3,1fr)}
.grid4{grid-template-columns:repeat(4,1fr)}
.cols2{grid-template-columns:1.3fr 1fr;gap:1.4em}
.stack{display:grid;gap:.6em}
@media (max-width:1000px){.grid3,.grid4,.cols2{grid-template-columns:1fr 1fr}.menu .logo h1{font-size:2.2em}}
@media (max-width:640px){.grid2,.grid3,.grid4,.cols2{grid-template-columns:1fr}}

/* one entry: icon on the left, name and description on the right */
.item{display:flex;gap:.7em;align-items:flex-start;padding:.45em .65em;border:1px solid rgba(127,227,255,.16);border-radius:8px;background:rgba(127,227,255,.04)}
.item .ico{flex:none;width:3em;height:3em}
.item img.spr{flex:none;width:4.4em;height:3em;object-fit:contain;image-rendering:pixelated}
.item .nm{font-weight:700;letter-spacing:.08em;font-size:1em;color:var(--c,#fff)}
.item .ds{color:#b6c4d4;font-size:.88em;line-height:1.4}
.item .tagline{display:inline-block;margin-left:.5em;padding:.05em .45em;border-radius:4px;font-size:.7em;letter-spacing:.08em;background:rgba(255,74,58,.22);color:#ff9a8a}

/* controls */
.ctrl{display:flex;align-items:center;gap:1em;padding:.5em .7em;border:1px solid rgba(127,227,255,.16);border-radius:8px;background:rgba(127,227,255,.04)}
.ctrl .k{min-width:15em}
.ctrl .what{font-size:.95em}
.ctrl .what small{display:block;color:#7f93a8;font-size:.85em}

/* levels */
.lvl{display:flex;align-items:center;gap:.8em;padding:.4em .7em;border:1px solid rgba(127,227,255,.16);border-radius:8px;background:rgba(127,227,255,.04);margin-bottom:.45em}
.lvl .num{width:2.2em;height:2.2em;display:grid;place-items:center;border:2px solid #7fe3ff;border-radius:6px;font-weight:700;font-size:1.2em;color:#7fe3ff}
.lvl .info{flex:1}
.lvl .info b{letter-spacing:.08em}
.lvl .info small{display:block;color:#7f93a8;font-size:.8em}
.lvl img{height:2.8em;max-width:6.5em;object-fit:contain;image-rendering:pixelated}
.lvl .boss{min-width:10em;text-align:right;font-size:.85em;color:#ff9a6a;letter-spacing:.06em}

/* the little HUD diagram on the controls tab */
.hudmap{position:relative;aspect-ratio:3/2;width:100%;max-width:26em;border:2px solid rgba(127,227,255,.35);border-radius:6px;
  background:radial-gradient(circle at 70% 30%,#223 0,#05070f 60%)}
.hudmap i{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;font-style:normal;font-size:.65em;line-height:1.15;
  border:2px solid var(--c);border-radius:4px;background:rgba(5,9,16,.8);color:var(--c);padding:2px}

/* ---------- difficulty picker (start menu header) and level select ---------- */
.menu .diff{flex:none;text-align:center}
.menu .diff small{display:block;color:#7f93a8;letter-spacing:.2em;font-size:.7em;margin-bottom:.25em}
.menu .seg{display:flex;gap:.3em;justify-content:center}
.menu .dbtn{margin:0;padding:.45em .9em;font-size:.8em;letter-spacing:.1em;color:var(--c);border-color:transparent;background:rgba(127,227,255,.05)}
.menu .dbtn:hover{background:rgba(127,227,255,.14)}
.menu .dbtn.on{background:var(--c);color:#04101a;border-color:var(--c);box-shadow:0 0 14px var(--c)}
.menu .dblurb{margin-top:.35em;font-size:.78em;min-height:2.4em;max-width:28em;line-height:1.3}
.menu button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

.lvlsel{width:min(760px,96vw);font-size:clamp(11px,1.9vh,16px)}
.lvlsel .sub{letter-spacing:.2em;font-size:.85em;margin:-.3em 0 .8em}
.lvlsel .lrows{display:grid;gap:.45em}
.lvlsel .lrow{display:flex;align-items:center;gap:.8em;width:100%;margin:0;padding:.45em .8em;text-align:left;font-size:1em;letter-spacing:0;
  border:1px solid rgba(127,227,255,.25);border-radius:8px;background:rgba(127,227,255,.05)}
.lvlsel .lrow:hover:not(.locked){background:rgba(127,227,255,.2);box-shadow:0 0 14px rgba(127,227,255,.5)}
.lvlsel .lrow.locked{opacity:.4;cursor:not-allowed;box-shadow:none}
.lvlsel .num{width:2.2em;height:2.2em;display:grid;place-items:center;border:2px solid #7fe3ff;border-radius:6px;font-weight:700;font-size:1.2em;color:#7fe3ff;flex:none}
.lvlsel .info{flex:1}
.lvlsel .info small{display:block;color:#7f93a8;font-size:.8em;font-weight:400}
.lvlsel img{height:2.6em;max-width:6em;object-fit:contain;image-rendering:pixelated}
.lvlsel .boss{min-width:9em;text-align:right;font-size:.8em;color:#ff9a6a;letter-spacing:.06em}

/* compact difficulty list on the mission tab */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:.4em}
.mode{padding:.3em .6em;border:1px solid rgba(127,227,255,.16);border-left:3px solid var(--c);border-radius:6px;background:rgba(127,227,255,.04);line-height:1.25}
.mode b{display:block;color:var(--c);letter-spacing:.1em;font-size:.85em}
.mode span{color:#b6c4d4;font-size:.78em}

/* ---------- meta: hangar, medals, codex, stats, loadout, briefing ---------- */
.stars span{color:#3a4658}.stars span.on{color:#ffd23f;text-shadow:0 0 8px rgba(255,210,63,.6)}
.panel .stars{font-size:1.6em;letter-spacing:.15em;margin:.2em 0}
.panel .starnote{color:#7f93a8;font-size:.85em}
.lvl .stars,.lvlsel .stars{font-size:.95em;letter-spacing:.08em;margin-left:.5em}
.menu .lvl .info small .stars{font-size:1em}
.rankbar{display:flex;align-items:center;gap:1.2em;margin-bottom:.6em;padding:.5em .8em;border:1px solid rgba(127,227,255,.2);border-radius:8px;background:rgba(127,227,255,.05)}
.rankbar small{display:block;color:#7f93a8;letter-spacing:.2em;font-size:.7em}
.rankbar b{font-size:1.3em;color:#fff;letter-spacing:.08em}
.rankbar .cr b{color:#ffb347}
.rankbar .xp{flex:1;position:relative;height:1.7em;background:rgba(0,0,0,.5);border:1px solid rgba(127,227,255,.3);border-radius:4px;overflow:hidden}
.rankbar .xp .fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#2aa8e8,#7fe3ff)}
.rankbar .xp span{position:relative;display:block;text-align:center;line-height:1.7em;font-size:.8em;color:#fff;text-shadow:0 0 4px #000}
.ups .up{display:flex;flex-direction:column;gap:.35em;padding:.5em .7em;border:1px solid rgba(127,227,255,.16);border-left:3px solid var(--c);border-radius:8px;background:rgba(127,227,255,.04)}
.ups .uh{display:flex;justify-content:space-between;align-items:center}
.ups .uh b{color:var(--c);letter-spacing:.08em;font-size:.9em}
.pips i{display:inline-block;width:.8em;height:.8em;margin-left:.2em;border:2px solid var(--c);border-radius:2px}
.pips i.on{background:var(--c)}
.ups .ds{color:#b6c4d4;font-size:.82em;flex:1}
.ups button,.coss button{margin:0;padding:.4em .6em;font-size:.8em}
.coss .cos{display:flex;flex-direction:column;gap:.3em;padding:.45em .7em;border:1px solid rgba(127,227,255,.16);border-radius:8px;background:rgba(127,227,255,.04)}
.coss .cos.on{border-color:#7fe3ff;background:rgba(127,227,255,.14)}
.coss .cos b{font-size:.85em;letter-spacing:.08em}
.ranks{display:grid;gap:.35em}
.rk{display:grid;grid-template-columns:11em 6em 1fr;gap:.6em;align-items:baseline;padding:.3em .7em;border:1px solid rgba(127,227,255,.12);border-radius:6px;opacity:.55}
.rk.on{opacity:1;border-color:rgba(255,210,63,.4);background:rgba(255,210,63,.05)}
.rk b{letter-spacing:.06em}.rk small{color:#7f93a8}.rk span{color:#b6c4d4;font-size:.85em}
.medals .medal{display:flex;align-items:center;gap:.7em;padding:.4em .7em;border:1px solid rgba(127,227,255,.14);border-radius:8px;background:rgba(127,227,255,.03);opacity:.6}
.medals .medal.on{opacity:1;border-color:rgba(255,210,63,.5);background:rgba(255,210,63,.07)}
.medal .mi{font-size:1.6em;color:#566}.medal.on .mi{color:#ffd23f}
.medal div b{display:block;letter-spacing:.06em}.medal small{color:#9fb0c4;font-size:.8em}.medal span{margin-left:auto;color:#ffb347;font-size:.85em}
.stats{display:grid;gap:.3em}
.st{display:flex;justify-content:space-between;padding:.35em .7em;border:1px solid rgba(127,227,255,.12);border-radius:6px;background:rgba(127,227,255,.03)}
.st b{color:#fff}
.stars-tbl .srow{display:grid;grid-template-columns:1.6em 1fr repeat(4,4.2em);gap:.4em;align-items:center;padding:.25em .5em;border-bottom:1px solid rgba(127,227,255,.08);font-size:.9em}
.srow .n{color:#7fe3ff;font-weight:700}.srow .ss{font-size:.8em;letter-spacing:.02em;text-align:center}

/* sub panels: loadout, briefing, save data */
.sub-panel{font-size:clamp(11px,1.7vh,15px);text-align:left}
.loadout{width:min(1250px,97vw);max-height:96vh;overflow:auto}
.loadout h2{text-align:center}
.lsec{margin:.8em 0 .35em;color:#ffd23f;letter-spacing:.25em;font-size:.8em;border-bottom:1px solid rgba(255,210,63,.3);padding-bottom:.25em}
.lsec small{color:#7f93a8;letter-spacing:.05em}
.cards{display:grid;gap:.5em}
.cards.ships{grid-template-columns:repeat(5,1fr)}
.cards.abil,.cards.perks{grid-template-columns:repeat(auto-fill,minmax(14.5em,1fr))}
.card{margin:0;text-align:left;font-weight:400;letter-spacing:0;display:flex;flex-direction:column;gap:.2em;padding:.55em .7em;border:2px solid rgba(127,227,255,.2);border-radius:8px;background:rgba(127,227,255,.05);position:relative}
.card b{color:var(--c);letter-spacing:.08em}
.card small{color:#9fb0c4;font-size:.8em;line-height:1.3}
.card.on{border-color:var(--c);background:rgba(127,227,255,.14);box-shadow:0 0 14px var(--c)}
.card.locked{opacity:.4;cursor:not-allowed;box-shadow:none}
.card em{font-style:normal;font-size:.65em;letter-spacing:.1em;color:#ffd23f}
.card .cdl{position:absolute;right:.6em;top:.5em;color:#7f93a8;font-size:.75em}
.card.ship img{height:4.2em;max-width:100%;object-fit:contain;image-rendering:pixelated;align-self:center;margin-bottom:.2em}
.card .stt{display:grid;grid-template-columns:3.6em 1fr;gap:.15em .4em;align-items:center;font-size:.72em;color:#7f93a8;margin-top:.3em}
.card .stt .bar{display:block;height:.55em;background:rgba(255,255,255,.12);border-radius:3px;overflow:hidden}
.card .stt .bar i{display:block;height:100%;background:var(--c)}
.card .lk{font-size:.75em;color:#ff9a8a;margin-top:.3em}
.cosrow{display:flex;gap:.4em;align-items:center;margin:.3em 0;flex-wrap:wrap}
.cosrow span{width:5em;color:#7f93a8;font-size:.75em;letter-spacing:.15em}
.mini{margin:0;padding:.3em .7em;font-size:.78em}
.mini.on{background:#7fe3ff;color:#04101a}
.loadout .row{text-align:center;margin-top:1em}
.loadout button.go,.brief button.go{font-size:1.15em;padding:.7em 2.2em;letter-spacing:.2em;background:linear-gradient(#5fe6ff,#2aa8e8);color:#031018;border-color:#bff4ff;box-shadow:0 0 20px rgba(95,230,255,.55)}
.brief{width:min(760px,95vw);text-align:center}
.brief .act{color:#ffd23f;letter-spacing:.35em;font-size:.8em;margin-bottom:.3em}
.brief .spk{color:#7fe3ff;letter-spacing:.3em;font-size:.85em;margin-top:.4em}
.brief .msg{font-size:1.15em;line-height:1.6;color:#e3eef9;margin:.6em 1em}
.brief .meta{display:flex;gap:1.4em;justify-content:center;flex-wrap:wrap;margin:1em 0;padding:.7em;border-top:1px solid rgba(127,227,255,.2);border-bottom:1px solid rgba(127,227,255,.2)}
.brief .meta small{display:block;color:#7f93a8;letter-spacing:.2em;font-size:.7em}
.brief .hint{color:#7f93a8;font-size:.8em;margin-top:.7em}
.savep{width:min(620px,95vw)}
.savep textarea{width:100%;box-sizing:border-box;background:#04080f;color:#9fe7ff;border:1px solid rgba(127,227,255,.4);border-radius:6px;font:12px monospace;padding:.6em;resize:vertical;word-break:break-all}
.savep .msg2{min-height:1.4em;margin-top:.4em;font-size:.9em}
.savep p{color:#b6c4d4;font-size:.9em}
.lvlsel .lrows{max-height:68vh;overflow:auto;padding-right:.4em;scrollbar-width:thin}
.menu{font-size:clamp(10px,1.5vh,15px)}

/* ---------- phase 5/6: settings, modes, drafts, controls ---------- */
.settings{width:min(900px,96vw);max-height:94vh;overflow:auto;text-align:left;font-size:clamp(11px,1.8vh,15px)}
.settings h3{text-align:center}
.settings .cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2em}
.settings h5{margin:.2em 0 .4em;color:#ffd23f;letter-spacing:.25em;font-size:.8em;border-bottom:1px solid rgba(255,210,63,.3);padding-bottom:.25em}
.settings .row{margin-top:.55em}
.settings .btnrow{text-align:center;margin-top:1.1em}
@media (max-width:760px){.settings .cols3{grid-template-columns:1fr}}
.menu .nudge{color:#9fd8ff;background:rgba(159,216,255,.08);border:1px solid rgba(159,216,255,.3);border-radius:6px;padding:.4em .7em}

.modesp{width:min(1280px,97vw);max-height:96vh;overflow:auto}
.modesp h2{text-align:center}
.msetup{display:flex;gap:1.6em;align-items:center;flex-wrap:wrap;padding:.5em .8em;border:1px solid rgba(127,227,255,.2);border-radius:8px;background:rgba(127,227,255,.05)}
.msetup small{color:#7f93a8;margin-left:.4em}
.msetup .mulx b{color:#ffd23f}
.modesp select{background:#0c1626;color:#e8f4ff;border:1px solid rgba(127,227,255,.5);border-radius:5px;padding:.3em .5em;font:inherit}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:.45em;margin:.7em 0}
.chip{margin:0;text-align:left;display:flex;flex-direction:column;gap:.15em;padding:.45em .7em;font-weight:400;letter-spacing:0;border-radius:8px;border:2px solid rgba(127,227,255,.2);background:rgba(127,227,255,.04)}
.chip b{letter-spacing:.06em;font-size:.85em}.chip small{color:#9fb0c4;font-size:.75em}
.chip.on{border-color:#ffd23f;background:rgba(255,210,63,.12);box-shadow:0 0 12px rgba(255,210,63,.35)}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6em}
.mcard{display:flex;flex-direction:column;gap:.35em;padding:.6em .8em;border:1px solid rgba(127,227,255,.16);border-top:3px solid var(--c);border-radius:8px;background:rgba(127,227,255,.04)}
.mcard .mh{display:flex;align-items:center;gap:.5em}.mcard .mi{font-size:1.4em;color:var(--c)}.mcard b{color:var(--c);letter-spacing:.1em}
.mcard .md{color:#b6c4d4;font-size:.82em;flex:1;line-height:1.4}
.mcard .mr{color:#ffd23f;font-size:.78em}
.mcard button{margin:0;padding:.5em;font-size:.85em}
@media (max-width:1000px){.mgrid,.chips{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.mgrid,.chips{grid-template-columns:1fr}}

.draft{width:min(860px,96vw);text-align:center}
.draft .dl{color:#cfe0f0}
.draft .cards.offers{grid-template-columns:repeat(3,1fr);margin-top:.5em}
.draft .offer{align-items:center;text-align:center;padding:1em .8em;gap:.5em}
.draft .offer em{font-style:normal;color:var(--c);letter-spacing:.2em;font-size:.7em}
.draft .offer small{font-size:.85em}

.ctlp{width:min(820px,96vw);max-height:94vh;overflow:auto;text-align:left}
.ctlp h2{text-align:center}.ctlp .cols{display:grid;grid-template-columns:1fr 1fr;gap:1.4em}
.ctlp h4{margin:.4em 0;color:#ffd23f;letter-spacing:.25em;font-size:.85em}
.bind{display:flex;justify-content:space-between;align-items:center;gap:.6em;padding:.2em 0;border-bottom:1px solid rgba(127,227,255,.08)}
.bind button{margin:0;min-width:9em;padding:.4em .6em;font-size:.8em}
.bind button.wait{background:#ffd23f;color:#111;border-color:#ffd23f}
.ctlp .gp{margin-top:.8em;padding:.6em .8em;border:1px solid rgba(127,227,255,.2);border-radius:8px;font-size:.85em}
.ctlp .gp small{display:block;color:#7f93a8;margin-top:.3em}
.ctlp .row{text-align:center}

/* pilots (save slots) */
.pilotbtn{margin-top:.35em;padding:.2em .7em;font-size:.8em}
.pilotsp .plist{display:flex;flex-direction:column;gap:.5em;max-height:46vh;overflow:auto;margin:.8em 0}
.pilotsp .prow{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:.6em .9em;border:1px solid #2a4a66;border-radius:6px;background:rgba(10,24,40,.6)}
.pilotsp .prow.on{border-color:#ffb347;background:rgba(60,40,10,.45)}
.pilotsp .pn small{display:block;opacity:.75;margin-top:.15em}
.pilotsp .pn em{font-style:normal;font-size:.7em;color:#ffb347;border:1px solid #ffb347;border-radius:3px;padding:0 .4em;margin-left:.4em}
.pilotsp .pb{display:flex;gap:.4em}
.pilotsp input{background:#0a1828;color:#cfe8ff;border:1px solid #2a4a66;border-radius:4px;padding:.4em .6em;font:inherit}

/* =====================================================================================================================
   TITLE SCREEN + HUB (the modern main menu). Both sit over the live space scene. Explanations are tooltips (#tip).
   ===================================================================================================================== */
.title,.hub{position:fixed;inset:0;pointer-events:auto;color:#e8f4ff;font-family:Bahnschrift,"Segoe UI Variable Display","Segoe UI",Roboto,system-ui,sans-serif;font-size:clamp(11px,1.75vh,18px);
  background:radial-gradient(ellipse at 30% 40%,rgba(2,8,16,.35),rgba(1,3,8,.82) 75%)}
.title button,.hub button{font-family:inherit;letter-spacing:.14em;text-transform:uppercase;margin:0}
.title{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5em;animation:hfade .6s ease both}
.tlogo{text-align:center}
.tlogo h1{margin:0;font-size:6.2em;font-weight:300;letter-spacing:.38em;padding-left:.38em;color:#fff;text-shadow:0 0 40px rgba(127,227,255,.55),0 0 6px rgba(127,227,255,.8)}
.ttag{margin-top:.6em;color:#ffd23f;letter-spacing:.7em;padding-left:.7em;font-size:1em;opacity:.9}
.tmenu{display:flex;flex-direction:column;gap:.9em;width:24em;align-items:stretch}
.tbtn{position:relative;padding:1.05em 1.5em;font-size:1.25em;font-weight:600;color:#dbeaf7;border:none;border-left:3px solid transparent;border-radius:0;background:linear-gradient(90deg,rgba(127,227,255,.10),rgba(127,227,255,0));text-align:left;cursor:pointer;transition:all .16s}
.tbtn:hover:not(:disabled),.tbtn:focus-visible,.tbtn.padfocus{border-left-color:#7fe3ff;background:linear-gradient(90deg,rgba(127,227,255,.30),rgba(127,227,255,0));color:#fff;padding-left:2em;box-shadow:none;outline:none}
.tbtn:disabled{opacity:.3;cursor:default}
.tbtn.ghost{font-size:.95em;opacity:.7}
.tinput{padding:1em 1.2em;font:inherit;font-size:1.25em;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:rgba(127,227,255,.08);border:none;border-bottom:2px solid #7fe3ff;outline:none;text-align:center}
.plist2{display:flex;flex-direction:column;gap:.6em;max-height:44vh;overflow:auto}
.prow2{display:flex;gap:.4em;align-items:stretch}
.pmain{flex:1;display:flex;align-items:center;gap:1em;padding:.7em 1em;text-align:left;color:#e8f4ff;border:none;border-left:3px solid transparent;border-radius:0;background:rgba(127,227,255,.08);cursor:pointer;text-transform:none!important;letter-spacing:.05em!important}
.pmain:hover{border-left-color:#7fe3ff;background:rgba(127,227,255,.22);box-shadow:none}
.pmain img{height:2.6em;width:4em;object-fit:contain;image-rendering:pixelated}
.pmain b{display:block;font-size:1.2em;letter-spacing:.14em;text-transform:uppercase}
.pmain small{color:#8fa6bb;font-size:.85em}
.pico{width:3em;padding:0;border:none;border-radius:0;background:rgba(127,227,255,.08);color:#9fb6c8;cursor:pointer;font-size:1em}
.pico:hover{background:rgba(127,227,255,.22);color:#fff;box-shadow:none}
.pico.arm{width:7em;background:#8a2a22;color:#fff}

.hub{display:flex;flex-direction:column;padding:2.2vh 3.2vw;box-sizing:border-box}
.hub.anim{animation:hfade .5s ease both}
@keyframes hfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hub::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(2,6,12,.88),rgba(2,6,12,.45) 55%,rgba(2,6,12,.15))}
.htop{display:flex;align-items:center;gap:1.4em;min-width:0}
.brand{font-size:1.5em;font-weight:300;letter-spacing:.4em;color:#fff;text-shadow:0 0 14px rgba(127,227,255,.6);white-space:nowrap}
.htabs{display:flex;gap:.1em;flex:1;justify-content:center;min-width:0;flex-wrap:wrap}
.htab{position:relative;padding:.8em 1.1em;border:none;border-radius:0;background:none;color:#7f93a8;font-size:.95em;font-weight:600;cursor:pointer;transition:color .15s}
.htab::after{content:"";position:absolute;left:1.1em;right:1.1em;bottom:.2em;height:2px;background:#7fe3ff;transform:scaleX(0);transition:transform .2s;box-shadow:0 0 10px #7fe3ff}
.htab:hover{color:#fff;background:none;box-shadow:none}
.htab.on{color:#fff}.htab.on::after{transform:scaleX(1)}
.huser{display:flex;align-items:center;gap:.6em}
.pilotchip{flex-shrink:0;white-space:nowrap;display:flex;align-items:center;gap:.7em;padding:.35em .9em .35em .6em;border:1px solid rgba(127,227,255,.25);border-radius:2em;background:rgba(127,227,255,.07);color:#fff;cursor:pointer;text-align:left;text-transform:none!important}
.pilotchip:hover{background:rgba(127,227,255,.2);box-shadow:none}
.pilotchip img{height:2em;width:3em;object-fit:contain;image-rendering:pixelated}
.pilotchip b{display:block;font-size:.95em;letter-spacing:.14em;text-transform:uppercase}
.pilotchip small{color:#ffb347;font-size:.8em;letter-spacing:.06em}
.gear{width:2.8em;height:2.8em;padding:0;border:1px solid rgba(127,227,255,.25);border-radius:50%;background:rgba(127,227,255,.07);color:#cfe6f7;font-size:1.2em;cursor:pointer;transition:transform .25s,background .15s}
.gear:hover{background:rgba(127,227,255,.2);box-shadow:none;transform:rotate(60deg)}
.hbody{flex:1;min-height:0;overflow:auto;margin:2.2vh 0 1vh;padding-right:.6em;scrollbar-width:thin;scrollbar-color:rgba(127,227,255,.5) transparent}
.hbody section{display:none;height:100%}.hbody section.on{display:block;animation:hfade .3s ease both}
.hub h4{margin:1.6em 0 .7em;font-size:.8em;font-weight:600;letter-spacing:.4em;color:#7f93a8}
.hub h4:first-child{margin-top:0}
.hub .stars span{color:#3a4658}.hub .stars span.on{color:#ffd23f;text-shadow:0 0 8px rgba(255,210,63,.6)}
.hub .empty{height:100%;display:grid;place-items:center;color:#4e6277;letter-spacing:.5em;font-size:1.1em}
.hbot{display:flex;align-items:center;justify-content:space-between;gap:2em}
.hsum{display:flex;gap:2.2em}
.hsum button{border:none;background:none;text-align:left;cursor:pointer;color:#fff;padding:.2em 0;text-transform:none!important}
.hsum button:hover{background:none;box-shadow:none}.hsum button:hover b{color:#7fe3ff}
.hsum small{display:block;color:#7f93a8;letter-spacing:.3em;font-size:.7em}
.hsum b{font-size:1.05em;letter-spacing:.14em;font-weight:600;text-transform:uppercase}
.launch{padding:1.1em 4.2em;font-size:1.45em;font-weight:700;color:#04101a;border:none;border-radius:0;background:linear-gradient(135deg,#8ff0ff,#35b6ee);clip-path:polygon(7% 0,100% 0,93% 100%,0 100%);cursor:pointer;transition:filter .15s,transform .15s}
.launch:hover{filter:brightness(1.18) drop-shadow(0 0 14px rgba(95,230,255,.9));box-shadow:none;background:linear-gradient(135deg,#8ff0ff,#35b6ee);transform:translateX(3px)}

/* mission */
.mission{display:grid;grid-template-columns:minmax(18em,30%) 1fr;gap:3vw;height:100%}
.mlist{display:flex;flex-direction:column;gap:.35em;overflow:auto;padding-right:.5em;scrollbar-width:thin}
.act{margin:.8em 0 .2em;color:#7f93a8;letter-spacing:.4em;font-size:.75em}
.mrow{display:flex;align-items:center;gap:1em;padding:.8em 1em;border:none;border-left:3px solid transparent;border-radius:0;background:rgba(127,227,255,.06);color:#c9d6e4;text-align:left;cursor:pointer;font-size:.95em;transition:all .14s}
.mrow .n{color:#7fe3ff;font-weight:700;width:1.6em}.mrow b{flex:1;font-weight:600;letter-spacing:.1em}
.mrow:hover{background:rgba(127,227,255,.18);color:#fff;box-shadow:none;padding-left:1.4em}
.mrow.on{border-left-color:#7fe3ff;background:linear-gradient(90deg,rgba(127,227,255,.32),rgba(127,227,255,.06));color:#fff}
.mprev{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:0}
.pimg{position:absolute;inset:0 0 18% 0;display:flex;align-items:center;justify-content:center;opacity:.9;filter:drop-shadow(0 0 30px rgba(127,227,255,.25))}
.pimg img{height:58%;width:auto;max-width:85%;object-fit:contain;image-rendering:pixelated}
.ptxt{position:relative;padding:0 0 .4em .2em}
.ptxt small{letter-spacing:.45em;color:#7f93a8}
.ptxt h2{margin:.15em 0 .1em;font-size:3.4em;font-weight:300;letter-spacing:.14em;color:#fff;text-shadow:0 0 24px rgba(127,227,255,.4)}
.stars.big{font-size:1.7em;letter-spacing:.1em}
.obj{margin-top:.5em;display:inline-block;padding:.4em 1em;border:1px solid rgba(255,154,106,.5);color:#ff9a6a;letter-spacing:.25em;font-size:.8em}

/* difficulty */
.diffs{height:100%;display:flex;align-items:center;justify-content:center;gap:1.6em}
.dcard{display:flex;flex-direction:column;align-items:center;gap:1.4em;width:14em;padding:3em 1em;border:1px solid rgba(255,255,255,.12);border-bottom:3px solid var(--c);border-radius:0;background:rgba(127,227,255,.05);color:var(--c);cursor:pointer;transition:all .18s}
.dcard b{font-size:1.7em;font-weight:600;letter-spacing:.2em}
.dcard .lives{display:flex;gap:.45em}.dcard .lives i{width:.9em;height:.9em;background:var(--c);clip-path:polygon(50% 0,100% 100%,50% 75%,0 100%);opacity:.8}
.dcard:hover{background:rgba(127,227,255,.14);transform:translateY(-4px);box-shadow:none}
.dcard.on{background:linear-gradient(180deg,rgba(255,255,255,.04),color-mix(in srgb,var(--c) 28%,transparent));box-shadow:0 0 36px color-mix(in srgb,var(--c) 45%,transparent);transform:translateY(-6px)}

/* loadout */
.lcards{display:flex;gap:1em;flex-wrap:wrap}
.lcard{display:flex;flex-direction:column;align-items:center;gap:.5em;width:12em;padding:1em;border:1px solid rgba(255,255,255,.1);border-bottom:3px solid transparent;border-radius:0;background:rgba(127,227,255,.05);color:#fff;cursor:pointer;transition:all .15s}
.lcard img{height:4.4em;max-width:100%;object-fit:contain;image-rendering:pixelated}
.lcard b{letter-spacing:.16em;font-weight:600}
.lcard:hover{background:rgba(127,227,255,.15);box-shadow:none;transform:translateY(-3px)}
.lcard.on{border-bottom-color:var(--c);background:linear-gradient(180deg,rgba(255,255,255,.04),color-mix(in srgb,var(--c) 25%,transparent));box-shadow:0 0 24px color-mix(in srgb,var(--c) 40%,transparent)}
.lcard .stt{display:grid;grid-template-columns:auto 1fr;gap:.2em .6em;align-items:center;width:100%;font-size:.7em;color:#7f93a8;letter-spacing:.2em}
.lcard .bar,.xpbar{display:block;height:.4em;background:rgba(255,255,255,.1);border-radius:1em;overflow:hidden}
.lcard .bar i,.xpbar i{display:block;height:100%;background:linear-gradient(90deg,#35b6ee,#8ff0ff)}
.lchips,.hchips{display:flex;flex-wrap:wrap;gap:.5em;margin-bottom:.5em}
.lchip,.hchip{display:flex;align-items:baseline;gap:.7em;padding:.7em 1.2em;border:1px solid rgba(255,255,255,.12);border-radius:0;background:rgba(127,227,255,.05);color:#d6e4f0;cursor:pointer;font-size:.9em;transition:all .14s}
.lchip b,.hchip{font-weight:600}.lchip small,.hchip small{color:#8fa6bb;font-size:.8em}
.lchip:hover,.hchip:hover:not(:disabled){background:rgba(127,227,255,.18);box-shadow:none}
.lchip.on,.hchip.on{border-color:var(--c,#7fe3ff);background:color-mix(in srgb,var(--c,#7fe3ff) 22%,transparent);color:#fff;box-shadow:0 0 16px color-mix(in srgb,var(--c,#7fe3ff) 35%,transparent)}
.hchip:disabled{opacity:.35;cursor:default}

/* hangar */
.hrank{display:flex;align-items:center;gap:2em;margin-bottom:1.6em}
.hrank .hr1,.hrank .hr2{white-space:nowrap}.hrank .hr2{text-align:right}
.hrank small{display:block;color:#7f93a8;letter-spacing:.35em;font-size:.7em}
.hrank b{font-size:1.6em;font-weight:600;letter-spacing:.14em;color:#fff}.hrank .hr2 b{color:#ffb347}
.hrank .xpbar{flex:1;height:.5em}
.ugrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15em,1fr));gap:.8em}
.ucard{display:flex;flex-direction:column;gap:.8em;padding:1em 1.1em;border:1px solid rgba(255,255,255,.1);border-top:3px solid var(--c);background:rgba(127,227,255,.05)}
.ucard .uh{display:flex;justify-content:space-between;align-items:center}.ucard b{color:var(--c);letter-spacing:.14em;font-weight:600}
.pips{display:flex;gap:.25em;padding-right:.3em}.pips i{width:.7em;height:.7em;border:1px solid var(--c);transform:rotate(45deg)}.pips i.on{background:var(--c)}
.ucard button{padding:.6em;border:1px solid rgba(255,210,63,.5);border-radius:0;background:rgba(255,210,63,.08);color:#ffd23f;cursor:pointer;font-weight:600}
.ucard button:hover:not(:disabled){background:rgba(255,210,63,.25);box-shadow:none}
.ucard button:disabled{opacity:.4;cursor:default;border-color:rgba(255,255,255,.2);color:#9fb0c4;background:none}

/* modes */
.hub .msetup{display:flex;gap:2.4em;align-items:center;flex-wrap:wrap;padding:.8em 1.2em;border:none;border-left:3px solid #7fe3ff;border-radius:0;background:rgba(127,227,255,.06)}
.hub .msetup select,.hub #talevel{background:#0a1626;color:#e8f4ff;border:1px solid rgba(127,227,255,.4);padding:.45em .7em;font:inherit;border-radius:0}
.hub .chips{grid-template-columns:repeat(8,1fr);margin:1em 0}
.hub .chip{flex-direction:row;justify-content:space-between;align-items:baseline;border-radius:0;border-width:1px;background:rgba(127,227,255,.04);color:#d6e4f0;text-transform:none}
.hub .chip.on{border-color:#ffd23f;background:rgba(255,210,63,.14)}
.hub .mgrid{grid-template-columns:repeat(auto-fill,minmax(14em,1fr));gap:.8em}
.hub .mcard{border-radius:0;padding:1em 1.1em;gap:.6em}
.hub .mcard button{border-radius:0;border:1px solid var(--c);background:none;color:var(--c);cursor:pointer;padding:.6em;font-weight:600}
.hub .mcard button:hover{background:var(--c);color:#04101a;box-shadow:none}
.hub .mcard select{background:#0a1626;color:#e8f4ff;border:1px solid rgba(127,227,255,.4);padding:.4em;font:inherit;border-radius:0}

/* codex / medals / stats */
.cxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9em,1fr));gap:.7em}
.cx{display:flex;flex-direction:column;align-items:center;gap:.6em;padding:1em .5em;border:1px solid rgba(255,255,255,.1);background:rgba(127,227,255,.05);text-align:center;font-size:.8em;letter-spacing:.1em;color:#c9d6e4}
.cx.boss{border-color:rgba(255,154,106,.4);color:#ff9a6a}
.cx .ico{width:3.2em;height:3.2em}.cx img.spr{width:5em;height:3.2em;object-fit:contain;image-rendering:pixelated}
.cx:hover{background:rgba(127,227,255,.16)}
.hub .medals{display:grid;grid-template-columns:repeat(auto-fill,minmax(14em,1fr));gap:.6em}
.hub .medal{display:flex;align-items:center;gap:.7em;padding:.7em 1em;border:1px solid rgba(255,255,255,.08);background:rgba(127,227,255,.03);opacity:.5;font-size:.85em;letter-spacing:.08em}
.hub .medal.on{opacity:1;border-color:rgba(255,210,63,.5);background:rgba(255,210,63,.08);color:#fff}
.hub .medal i{font-style:normal;font-size:1.5em;color:#566}.hub .medal.on i{color:#ffd23f}
.hub .medal span{margin:0;color:inherit}
.hub .cols2{display:grid;grid-template-columns:1fr 1.2fr;gap:3vw}
.hub .stats{align-content:start}
.hub .st{border-radius:0;border:none;border-bottom:1px solid rgba(255,255,255,.08);background:none}

#tip{position:fixed;z-index:60;max-width:22em;padding:.7em .95em;background:rgba(5,10,20,.97);border:1px solid rgba(127,227,255,.5);border-left:3px solid #7fe3ff;color:#dbe9f6;font:13px/1.45 Bahnschrift,"Segoe UI",system-ui,sans-serif;pointer-events:none;opacity:0;transition:opacity .12s;box-shadow:0 8px 30px rgba(0,0,0,.6)}
#tip.on{opacity:1}#tip b{color:#fff;letter-spacing:.08em}#tip small{color:#ffb347}
@media (max-width:1100px){.htabs{flex-wrap:wrap}.brand{display:none}.hub .chips{grid-template-columns:repeat(4,1fr)}}

/* ---- ARENA (multiplayer) ---- */
.arhub{display:flex;flex-direction:column;align-items:center;gap:14px;padding:34px 0;max-width:420px;margin:0 auto}
.arlogo{font-size:46px;font-weight:800;letter-spacing:12px;color:#fff;text-shadow:0 0 24px rgba(255,106,90,.6);margin-bottom:8px}
.arhub .tbtn{width:100%}.arjoin{display:flex;gap:10px;width:100%}.arjoin .tinput{flex:1;min-width:0;box-sizing:border-box;text-transform:uppercase;letter-spacing:.4em;text-align:center}.arjoin .tbtn{width:auto;padding:0 28px}
.arhub .tinput.small{box-sizing:border-box;width:100%;font-size:13px;letter-spacing:.05em;opacity:.8}.arerr{min-height:1.4em;color:#ff8a7a;font-size:14px}
.arlobby{min-width:520px;max-width:640px}.arcode{display:flex;gap:14px;align-items:baseline;justify-content:center;margin:2px 0 12px}.arcode b{font-size:44px;letter-spacing:.3em;color:#ffd23f;text-shadow:0 0 18px rgba(255,210,63,.5)}.arcode small{color:#7f93a8;letter-spacing:.14em}.arcode.off small{color:#ffb347}
.arplist{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;max-height:38vh;overflow:auto}
.arprow{display:flex;align-items:center;gap:12px;padding:8px 12px;background:rgba(255,255,255,.05);border-left:4px solid var(--c)}.arprow i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.arprow b{flex:1;text-align:left;letter-spacing:.08em}.arprow span{color:#7f93a8;font-size:13px;letter-spacing:.1em}.arprow em{font-style:normal;font-size:11px;padding:2px 7px;border:1px solid #7f93a8;color:#9fb6c8;letter-spacing:.1em}.arprow em.you{border-color:#7fe3ff;color:#7fe3ff}
.arprow .x{padding:2px 8px;min-width:0;background:none;border:1px solid rgba(255,255,255,.2);color:#9fb6c8}
.arme{display:flex;gap:18px;justify-content:center;margin-bottom:14px}.arwins{margin:0 4px}.arwait{color:#7f93a8;align-self:center;margin-right:auto}
.ardraft{min-width:min(1120px,94vw);text-align:center}.arcards{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.arcard{position:relative;width:200px;min-height:250px;padding:14px 14px 18px;background:linear-gradient(180deg,rgba(18,26,46,.97),rgba(8,12,24,.97));border:2px solid var(--rc);box-shadow:0 0 22px color-mix(in srgb,var(--rc) 45%,transparent);cursor:pointer;transition:transform .12s,opacity .15s,box-shadow .12s;text-align:center}
.arcard:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 0 36px var(--rc)}.arcard .rr{font-size:10px;letter-spacing:.24em;color:var(--rc)}.arcard h4{margin:10px 0 4px;font-size:21px;letter-spacing:.06em;color:#fff}.arcard .cc{font-size:10px;letter-spacing:.2em;color:var(--cc);margin-bottom:12px}
.arcard p{margin:0;font-size:14px;line-height:1.45;color:#c9d6e4}.arcard kbd{position:absolute;left:8px;bottom:8px;opacity:.6}.arcard.picked{transform:translateY(-10px) scale(1.05);box-shadow:0 0 44px var(--rc);background:linear-gradient(180deg,#1b2a4d,#0b1226)}.arcard.dim{opacity:.28;transform:scale(.96);pointer-events:none}
.artimer{font-size:30px;color:#ffd23f;font-weight:800;min-height:1.2em}.arnote{color:#9fb6c8;margin:8px 0}
.arwho{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:6px 0}.arwc{padding:3px 10px;border:1px solid var(--c);color:#ccd;font-size:13px;opacity:.7}.arwc.done{opacity:1;color:#fff;background:color-mix(in srgb,var(--c) 28%,transparent)}.arwc.won{border-style:dashed;opacity:.5}
.arhave{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:8px}.chip2{font-size:11px;padding:2px 7px;border:1px solid var(--rc);color:var(--rc);background:rgba(255,255,255,.04)}
.armatch{min-width:min(900px,94vw)}.arboard{display:flex;flex-direction:column;gap:6px;max-height:55vh;overflow:auto;margin:10px 0}
.arbrow{display:grid;grid-template-columns:18px 160px 90px 1fr;align-items:center;gap:10px;text-align:left;padding:8px 12px;background:rgba(255,255,255,.05);border-left:4px solid var(--c)}.arbrow i{width:12px;height:12px;border-radius:50%;background:var(--c)}.arbrow .arhave{justify-content:flex-start;margin:0}

.arstatbox{margin:10px 0 4px}.arstatbox h5{margin:0 0 6px;font-size:12px;letter-spacing:.3em;color:#7f93a8}
table.arstats{border-collapse:collapse;margin:0 auto;font-size:13px;width:100%}.arstats th{font-size:10px;letter-spacing:.14em;color:#7f93a8;font-weight:700;padding:3px 8px;text-align:right}
.arstats td{padding:4px 8px;text-align:right;color:#cfe0f0;border-top:1px solid rgba(255,255,255,.07)}.arstats td.who{text-align:left;color:#fff;font-weight:700;letter-spacing:.06em;white-space:nowrap}
.arstats td.who i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);margin-right:8px;box-shadow:0 0 8px var(--c)}.arstats td.best{color:#ffd23f;font-weight:800}
.armedals{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:8px 0 12px}
.armatch{max-height:94vh;overflow:auto}
.armedal{width:158px;padding:10px 8px;background:linear-gradient(180deg,rgba(20,30,52,.95),rgba(8,12,24,.95));border:1px solid var(--c);border-top:3px solid var(--c);text-align:center;animation:medalin .5s both}
.armedal .mi{display:block;font-size:30px;line-height:1.1;filter:drop-shadow(0 0 8px var(--c))}.armedal b{display:block;font-size:13px;letter-spacing:.06em;color:#fff;margin-top:4px}.armedal i{display:block;font-style:normal;font-size:13px;color:var(--c);font-weight:700}.armedal small{display:block;font-size:11px;color:#9fb6c8;margin-top:2px}
@keyframes medalin{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}}
.armedal:nth-child(2){animation-delay:.08s}.armedal:nth-child(3){animation-delay:.16s}.armedal:nth-child(4){animation-delay:.24s}.armedal:nth-child(5){animation-delay:.32s}.armedal:nth-child(n+6){animation-delay:.4s}
.arcardsum{margin:8px 0;text-align:left}.arcardsum summary{cursor:pointer;color:#7f93a8;font-size:12px;letter-spacing:.25em;text-align:center}
.ardraft .arstatbox{max-width:900px;margin-left:auto;margin-right:auto}

.aropts{display:flex;gap:18px;justify-content:center;align-items:center;margin:0 0 12px;color:#9fb6c8;font-size:13px;letter-spacing:.1em;flex-wrap:wrap}
.arlog{min-height:1.2em;max-height:96px;overflow:auto;margin:6px 0;font-size:13px;color:#ffd23f;text-align:center}.arlog div{padding:1px 0}

.lcard.locked,.lchip.locked{opacity:.6;border-style:dashed}
.lcard .price,.lchip .price{display:block;color:#ffd23f}
.lchip:disabled{opacity:.4}
.tinybtn{margin-left:.8em;padding:.2em .7em;font-size:.7em}

.arguide{position:fixed;inset:0;z-index:60;background:rgba(2,4,10,.82);display:flex;align-items:center;justify-content:center;padding:16px}
.arguidebox{width:min(860px,100%);max-height:100%;display:flex;flex-direction:column;background:#0b1220;border:1px solid #2a3b55;border-radius:10px;box-shadow:0 0 40px rgba(0,0,0,.6)}
.arguidehead{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid #22324a}
.arguidehead h2{margin:0;font-size:22px;letter-spacing:.12em;color:#ffd23f}.arguidehead button{padding:.2em .6em}
.arguidenav{display:flex;flex-wrap:wrap;gap:6px 14px;padding:8px 18px;border-bottom:1px solid #22324a;font-size:13px}
.arguidenav a{color:#7fe3ff;text-decoration:none}.arguidenav a:hover{text-decoration:underline}
.arguidebody{overflow-y:auto;padding:6px 18px 18px;text-align:left;line-height:1.5}
.arguidebody h3{margin:18px 0 6px;color:#7fe3ff;letter-spacing:.1em;font-size:16px}
.arguidebody p,.arguidebody li{color:#c8d4e2;font-size:14px}.arguidebody ul{padding-left:20px;margin:6px 0}.arguidebody li{margin:4px 0}
.argt{border-collapse:collapse;margin:6px 0}.argt td{padding:4px 14px 4px 0;font-size:14px;color:#c8d4e2}.argt td:first-child{color:#ffd23f;white-space:nowrap}
.padhint{margin-top:.5em;font-size:.8em;opacity:.7;letter-spacing:.06em}

#padcursor{position:fixed;left:0;top:0;width:22px;height:22px;z-index:99999;pointer-events:none;display:none;
  background:#7fe3ff;clip-path:polygon(0 0,0 100%,28% 76%,48% 100%,62% 92%,44% 68%,78% 68%);filter:drop-shadow(0 0 4px #000)}

/* hangar: upgrade levels past 4 or 5 wrap inside their card instead of spilling out of it */
.ucard{min-width:0;overflow:hidden}
.ucard .uh{flex-wrap:wrap;gap:.5em .8em}
.ucard .pips{flex-wrap:wrap;justify-content:flex-end;gap:.45em;margin-left:auto;max-width:100%;padding:.3em .45em .3em 0}

/* remote co-op lobby */
.huser{position:relative}
.cowrap{display:flex;flex-direction:column;align-items:flex-end}
.cotop{display:flex;align-items:center;gap:.5em}
.cotog{display:flex;align-items:center;gap:.7em;padding:.5em .9em;border:1px solid rgba(127,227,255,.3);border-radius:2em;background:rgba(127,227,255,.07);color:#cfe6f7;cursor:pointer;font-size:.8em;letter-spacing:.14em;white-space:nowrap}
.cotog i{position:relative;width:2.4em;height:1.2em;border-radius:1em;background:#26364a;transition:background .2s}
.cotog i::after{content:"";position:absolute;top:.15em;left:.15em;width:.9em;height:.9em;border-radius:50%;background:#9fb0c4;transition:transform .2s,background .2s}
.cotog.on{border-color:#3fe07a;color:#fff;background:rgba(63,224,122,.14)}
.cotog.on i{background:#1f8f4e}.cotog.on i::after{transform:translateX(1.2em);background:#fff}
.cotog:hover{background:rgba(127,227,255,.2)}
.coin{width:4.4em;padding:.5em .6em;border:1px solid rgba(127,227,255,.3);background:#0a1626;color:#fff;font:inherit;font-size:.8em;letter-spacing:.3em;text-align:center;text-transform:uppercase;border-radius:.4em}
.cogo{padding:.5em .9em;border:1px solid rgba(255,210,63,.5);background:rgba(255,210,63,.08);color:#ffd23f;font-size:.75em;cursor:pointer;border-radius:.4em}
.cogo:hover{background:rgba(255,210,63,.25);box-shadow:none}
.copanel{position:absolute;top:calc(100% + .5em);right:0;width:26em;z-index:6;padding:.8em;border:1px solid rgba(63,224,122,.45);background:rgba(4,12,22,.95);box-shadow:0 8px 30px rgba(0,0,0,.5);text-transform:none;letter-spacing:normal}
.copanel.static{position:static;width:auto;box-shadow:none;background:rgba(127,227,255,.05)}
.cocode{display:flex;align-items:baseline;gap:.8em;margin-bottom:.7em}
.cocode small{color:#7f93a8;letter-spacing:.3em;font-size:.7em}
.cocode b{font-size:2em;letter-spacing:.3em;color:#ffd23f;margin-right:auto}
.corow2{display:flex;align-items:center;gap:.7em;padding:.5em .4em;border-top:1px solid rgba(255,255,255,.08)}
.corow2 img{height:2em;width:3em;object-fit:contain;image-rendering:pixelated}
.corow2 .cotag{font-size:.65em;letter-spacing:.2em;color:#04101a;background:#7fe3ff;padding:.2em .5em;min-width:2.6em;text-align:center}
.corow2.empty{color:#587088;font-size:.85em;letter-spacing:.12em}
.coinfo b{display:block;font-size:.95em;letter-spacing:.1em;text-transform:uppercase}
.coinfo small{color:#ffb347;font-size:.75em}
.cohint{color:#7f93a8;font-size:.8em;margin:.7em 0 0;line-height:1.4}
.comsg{margin-top:.4em;color:#ff9a3a;font-size:.8em;max-width:22em;text-align:right}
.cocode2{font-size:1.8em;letter-spacing:.3em;color:#ffd23f;font-weight:700;margin-right:auto}
.coinfo2{display:grid;gap:.6em}.coinfo2 small{display:block;color:#7f93a8;letter-spacing:.2em;font-size:.7em}.coinfo2 b{font-size:1.05em;letter-spacing:.08em}
.cowait{margin-left:auto;color:#ffd23f;letter-spacing:.3em;font-size:.9em;animation:cowait 1.6s ease-in-out infinite}
@keyframes cowait{50%{opacity:.35}}
.coguest .hbody section{display:block}
#coleave{position:fixed;top:1.2vh;right:1.2vw;z-index:60;padding:.5em 1em;border:1px solid rgba(255,90,70,.6);background:rgba(40,8,8,.8);color:#ff8a7a;font:bold 12px monospace;letter-spacing:.14em;cursor:pointer}
.coview{display:contents}.coview *{pointer-events:none!important}
.cohost{position:fixed;bottom:2vh;left:50%;transform:translateX(-50%);padding:.4em 1.2em;background:rgba(0,0,0,.7);color:#7fe3ff;font:bold 13px monospace;letter-spacing:.2em}
.cowrap{max-width:13em}.cotop{flex-wrap:wrap;justify-content:flex-end}
.cotog{padding:.4em .8em;font-size:.72em;gap:.5em}
.coin{width:5.2em;padding:.35em .5em}.cogo{padding:.4em .8em}

/* the long title */
.tlogo h1{font-size:3.7em;letter-spacing:.22em;padding-left:.22em;line-height:1.12}
.brand{font-size:1em;letter-spacing:.2em}

/* custom difficulty page */
.dcard{width:12.5em}.diffs{gap:1.2em}
.cust{padding:.4em 1.2em 2em}
.cuhead{display:grid;grid-template-columns:auto 1fr;gap:.6em 2em;align-items:center;padding:1em 1.2em;margin-bottom:1em;border:1px solid rgba(127,227,255,.2);background:rgba(127,227,255,.05)}
.cuhead small{letter-spacing:.3em;color:#8fa6bf;font-size:.7em}
.cumult{font-size:3em;font-weight:300;letter-spacing:.1em;color:#fff}.cumult.hard{color:#ffb347}.cumult.easy{color:#7fe3ff}.cumult.zero{color:#ff5a4a}
.cunote{color:#c9d6e4;font-size:.95em}.cumult.zero~.cunote,.cunote:empty{color:#ff8a7a}
.cubtns{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.6em;align-items:center}.cubtns span{color:#8fa6bf;font-size:.75em;letter-spacing:.25em;margin:0 .4em 0 1em}
.cubtns button{padding:.55em 1.1em;font-size:.8em;letter-spacing:.15em}.cubtns #cuuse{border-color:#c98aff;color:#e9d4ff}.cubtns #cuuse.on{background:rgba(201,138,255,.28);color:#fff}
.cugrid{display:grid;grid-template-columns:1fr 1fr;gap:.2em 2.4em}
.cugrp{grid-column:1/-1;margin:1.1em 0 .3em;color:#7fe3ff;letter-spacing:.3em;font-size:.8em;font-weight:600;border-bottom:1px solid rgba(127,227,255,.2);padding-bottom:.3em}
.cuin{display:grid;grid-template-columns:11em 1fr 5.5em 4.6em;align-items:center;gap:.8em;padding:.45em 0}
.cuin .cul{font-size:.78em;letter-spacing:.14em;color:#c9d6e4}.cuin input{width:100%}.cuin .cuv{text-align:right;color:#fff;font-weight:600}
.cuin .cum{font-style:normal;text-align:right;font-size:.8em;color:#8fa6bf}.cuin .cum.hard{color:#ffb347}.cuin .cum.easy{color:#7fe3ff}
@media (max-width:1100px){.cugrid{grid-template-columns:1fr}}
/* ten hub tabs: tighter so they stay on two rows */
.htab{padding:.7em .62em;font-size:.88em;letter-spacing:.06em}.htab::after{left:.62em;right:.62em}
.brand{font-size:.9em;letter-spacing:.14em}

/* ---------- touch devices (touch.js adds html.touch): readable text and 44px targets ---------- */
html.touch .title, html.touch .hub{font-size:max(16px,1.75vh)}
html.touch .cotog, html.touch .coin, html.touch .cogo, html.touch .hub input[type=text]{min-height:44px;box-sizing:border-box}
html.touch .htop{gap:.6em;flex-wrap:nowrap}
html.touch .htabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;-webkit-overflow-scrolling:touch}
html.touch .htabs::-webkit-scrollbar{display:none}
html.touch .htab{flex:0 0 auto;min-height:44px}
html.touch .hub button, html.touch .title button, html.touch .panel button{min-height:44px}
html.touch .hub select, html.touch .hub input:not([type=checkbox]):not([type=range]), html.touch .title input{min-height:44px;box-sizing:border-box}
html.touch .hub input[type=checkbox]{width:24px;height:24px}
html.touch .hub .gear{width:44px;height:44px;flex:0 0 auto}
html.touch .panel{font-size:15px}
html.touch .panel input[type=range]{width:min(160px,40vw)}
html.touch .hbody{-webkit-overflow-scrolling:touch}
html.touch .tmenu{width:min(24em,86vw)}
@media (max-width:700px){
  html.touch .hub{padding:1.2vh 3vw}
  html.touch .ptxt h2{font-size:1.9em;letter-spacing:.08em}
  html.touch .tlogo h1{font-size:3em;letter-spacing:.18em;padding-left:.18em}
  html.touch .ttag{letter-spacing:.3em;padding-left:.3em;font-size:.85em}
  html.touch .title{gap:2.5em}
  html.touch .hub .cols2{grid-template-columns:1fr}
  html.touch .diffs{flex-wrap:wrap;gap:.8em}
  html.touch .dcard{width:9em;padding:1.4em .6em}
}
html.touch input[type=range]{height:34px;min-height:34px}
html.touch .cuin{min-height:44px;box-sizing:border-box}
html.touch .cowrap{max-width:none}
html.touch .cotop{flex-wrap:nowrap}
html.touch .hbot{gap:.8em}
html.touch .hsum{gap:1em;min-width:0}
html.touch .hsum button{min-width:0}
html.touch .hsum b{display:block;max-width:11em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.touch .launch{padding:.7em 2.2em;font-size:1.25em;flex:0 0 auto}
html.touch .hub input:not([type=checkbox]):not([type=range]), html.touch .title input, html.touch .panel input[type=text]{font-size:16px}
@media (max-width:700px){
  html.touch .htop{flex-wrap:wrap}
  html.touch .htabs{order:3;flex:1 0 100%}
  html.touch .hsum small{letter-spacing:.15em}
  html.touch .hsum b{max-width:6.5em}
  html.touch .hbot{flex-wrap:wrap;justify-content:center}
}
@media (max-height:480px){
  html.touch .panel{padding:10px 16px}
  html.touch .panel h2{font-size:18px;letter-spacing:2px;margin-bottom:6px}
  html.touch .panel h3{font-size:15px;margin-bottom:4px}
  html.touch .brief .msg{font-size:1em;line-height:1.4;margin:.3em .5em}
  html.touch .brief .meta{margin:.5em 0;padding:.4em}
  html.touch .brief .hint{display:none}
  html.touch .row{margin-top:8px}
}
@media (max-width:700px){
  html.touch .mission{grid-template-columns:1fr;gap:1em;height:auto}
  html.touch .mlist{overflow:visible}
  html.touch .mprev{min-height:15em}
  html.touch .ptxt h2{font-size:1.6em}
  html.touch .hub .medals,html.touch .hub .mgrid{grid-template-columns:1fr}
  html.touch .lcards{justify-content:center}
}
@media (max-width:700px){
  html.touch .cuin{grid-template-columns:1fr auto auto;grid-template-areas:"l v m" "s s s";gap:.2em .6em;padding:.5em 0}
  html.touch .cuin .cul{grid-area:l}html.touch .cuin .cuv{grid-area:v}html.touch .cuin .cum{grid-area:m}html.touch .cuin input{grid-area:s;width:100%}
}
@media (max-width:700px){
  html.touch .huser{flex:1 0 100%;flex-wrap:wrap;justify-content:space-between;order:2}
  html.touch .pilotchip{flex:1 1 auto}
}