* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; overflow:hidden; background:#04050d; }
body {
  font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
  color:#dff6ff; user-select:none; -webkit-user-select:none;
  touch-action:none; overscroll-behavior:none;
  position:fixed; inset:0; width:100%;
}
#wrap { position:fixed; inset:0; }
#game { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }

.hidden { display:none !important; }

/* ---------- HUD ---------- */
#hud { position:absolute; inset:0; pointer-events:none; z-index:5; }
#topleft { position:absolute; top:calc(10px + env(safe-area-inset-top)); left:calc(12px + env(safe-area-inset-left)); width:min(38vw,300px); }
.barlabel { font-size:10px; letter-spacing:3px; color:#46f6ff; opacity:.8; margin-bottom:2px; }
#hpbar { position:relative; height:20px; background:rgba(70,246,255,.12); border:1px solid rgba(70,246,255,.5); border-radius:10px; overflow:hidden; }
#hpfill { height:100%; width:100%; border-radius:9px;
  background:linear-gradient(90deg,#1de9b6,#46f6ff); transition:width .15s ease-out; }
#hpbar.low #hpfill { background:linear-gradient(90deg,#ff5252,#ff9e57); }
#hptext { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#eafcff; text-shadow:0 1px 3px #000; }
#xpbar { margin-top:5px; height:7px; background:rgba(178,255,89,.14); border:1px solid rgba(178,255,89,.4); border-radius:4px; overflow:hidden; }
#xpfill { height:100%; width:0%; background:#b2ff59; border-radius:3px; transition:width .2s; }
#lvltext { margin-top:3px; font-size:11px; letter-spacing:2px; color:#b2ff59; }
#topcenter { position:absolute; top:calc(8px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); text-align:center; }
#timer { font-size:22px; font-weight:800; letter-spacing:2px; color:#eafcff; text-shadow:0 0 12px rgba(70,246,255,.7); }
#score { font-size:13px; letter-spacing:3px; color:#8fd8ff; }
#bossbar { position:relative; margin-top:6px; width:min(50vw,420px); height:14px;
  background:rgba(255,77,255,.12); border:1px solid rgba(255,77,255,.6); border-radius:7px; overflow:hidden; }
#bossfill { height:100%; width:100%; background:linear-gradient(90deg,#ff4dff,#ff9e57); transition:width .2s; }
#bossbar span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:9px; letter-spacing:4px; font-weight:800; color:#fff; text-shadow:0 1px 2px #000; }
#topright { position:absolute; top:calc(10px + env(safe-area-inset-top)); right:calc(12px + env(safe-area-inset-right));
  display:flex; gap:8px; pointer-events:auto; align-items:center; }
#mptick { font-size:11px; font-weight:800; letter-spacing:1px; color:#7dffb0;
  background:rgba(4,8,20,.55); border:1px solid rgba(125,255,176,.4); border-radius:8px;
  padding:5px 7px; white-space:nowrap; }
.iconbtn { width:42px; height:42px; border-radius:50%; border:1px solid rgba(70,246,255,.55);
  background:rgba(4,8,20,.55); color:#46f6ff; font-size:18px; font-weight:700; cursor:pointer; backdrop-filter:blur(2px); }
.iconbtn:active { background:rgba(70,246,255,.25); }
.iconbtn.off { color:#556; border-color:#334; }

/* ---------- Overlays ---------- */
.overlay { position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center;
  background:rgba(2,4,12,.72); backdrop-filter:blur(3px); padding:16px; }
.panel { text-align:center; max-width:min(92vw,520px); max-height:92vh; overflow-y:auto;
  background:rgba(6,10,26,.9); border:1px solid rgba(70,246,255,.35); border-radius:16px;
  padding:26px 30px; box-shadow:0 0 40px rgba(70,246,255,.15), inset 0 0 60px rgba(70,246,255,.04); }
h1 { font-size:clamp(34px,7vw,54px); letter-spacing:8px; font-weight:900; color:#eafcff;
  text-shadow:0 0 18px #46f6ff, 0 0 60px rgba(70,246,255,.5); }
h2 { font-size:clamp(24px,5vw,34px); letter-spacing:5px; font-weight:800; color:#eafcff;
  text-shadow:0 0 14px #46f6ff; margin-bottom:6px; }
h2.red { color:#ffdfe8; text-shadow:0 0 14px #ff4d6d; }
.tag { color:#8fd8ff; letter-spacing:3px; font-size:12px; margin:4px 0 14px; text-transform:uppercase; }
.howto { text-align:left; display:inline-block; margin:0 auto 18px; font-size:14px; line-height:1.9; color:#b9e6ff; }
.howto .k { display:inline-block; min-width:118px; color:#46f6ff; font-weight:700; }
.bigbtn { display:block; width:100%; margin:8px 0; padding:15px; font-size:17px; font-weight:800; letter-spacing:3px;
  color:#04121a; background:linear-gradient(180deg,#6ff7ff,#25c8e8); border:none; border-radius:12px; cursor:pointer;
  box-shadow:0 0 24px rgba(70,246,255,.45); }
.bigbtn:active { transform:scale(.97); }
.ghostbtn { display:block; width:100%; margin:8px 0; padding:12px; font-size:14px; letter-spacing:2px;
  color:#8fd8ff; background:transparent; border:1px solid rgba(143,216,255,.4); border-radius:12px; cursor:pointer; }
.ghostbtn:active { background:rgba(143,216,255,.12); }
.best { margin-top:12px; color:#ffd76a; letter-spacing:2px; font-size:14px; font-weight:700; }

/* upgrade cards */
#cards { display:flex; gap:10px; justify-content:center; margin-top:10px; flex-wrap:wrap; }
.card { flex:1 1 130px; max-width:160px; min-height:150px; padding:14px 10px; cursor:pointer;
  background:rgba(10,18,40,.9); border:1px solid rgba(178,255,89,.45); border-radius:12px;
  transition:transform .08s; }
.card:active { transform:scale(.95); background:rgba(178,255,89,.12); }
.card .ico { font-size:30px; margin-bottom:8px; }
.card .ico svg { width:46px; height:46px; display:block; margin:0 auto; }
.card .nm { font-size:13px; font-weight:800; letter-spacing:1px; color:#eafcff; margin-bottom:6px; }
.card .ds { font-size:11.5px; line-height:1.45; color:#9fc6dd; }

/* multiplayer compact level-up bar: top strip, between the timer and the
   sound/pause buttons, out of the gameplay area */
#mplevelup { position:absolute; right:calc(132px + env(safe-area-inset-right));
  top:calc(6px + env(safe-area-inset-top)); z-index:6;
  pointer-events:auto; text-align:center; padding:6px 8px 8px;
  background:rgba(8,14,32,.9); border:1px solid rgba(178,255,89,.5); border-radius:14px;
  box-shadow:0 0 22px rgba(178,255,89,.25); touch-action:none; }
#mplevelup.pop { animation:mppop .18s ease-out; }
@keyframes mppop { from { transform:scale(.82); opacity:0; } to { transform:scale(1); opacity:1; } }
#mplevelup .mplabel { font-size:10px; font-weight:800; letter-spacing:2px; color:#b2ff59; margin-bottom:5px; }
#mplevelup .mplabel #mpcount { color:#ffd76a; }
#mpcards { display:flex; gap:7px; justify-content:center; }
.mpcard { width:70px; padding:7px 3px 5px; cursor:pointer; border-radius:10px;
  background:rgba(20,32,64,.92); border:1px solid rgba(143,216,255,.35); touch-action:none;
  -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; }
.mpcard:active { transform:scale(.93); background:rgba(178,255,89,.14); }
.mpcard .ico { font-size:24px; line-height:1.1; margin-bottom:3px; }
.mpcard .nm { font-size:8px; font-weight:800; letter-spacing:.4px; color:#eafcff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:760px) {
  #mplevelup { right:calc(104px + env(safe-area-inset-right)); }
  .mpcard { width:58px; }
  .mpcard .ico { font-size:20px; }
}

#stats, #storydstats { display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; margin:14px 0; text-align:left; font-size:14px; }
#stats .sv, #storydstats .sv { color:#46f6ff; font-weight:800; font-size:18px; }
#stats .sl, #storydstats .sl { color:#8fd8ff; font-size:11px; letter-spacing:2px; }

/* storyline HUD + badges */
#storyline { margin-top:6px; font-size:12px; letter-spacing:3px; color:#b14dff; font-weight:700;
  text-shadow:0 0 10px rgba(177,77,255,.7); white-space:nowrap; }
#storyline.soon { color:#ff4dd9; text-shadow:0 0 10px rgba(255,77,217,.8); animation:blink .5s steps(2) infinite; }
#badgeline { margin-top:10px; display:flex; gap:6px; justify-content:flex-start; flex-wrap:wrap; }
.badge { font-size:10px; letter-spacing:2px; padding:5px 10px; border-radius:20px;
  border:1px solid rgba(143,216,255,.25); color:rgba(143,216,255,.38); font-weight:700; white-space:nowrap; }
.badge.on { border-color:#ffd76a; color:#ffd76a; box-shadow:0 0 12px rgba(255,215,106,.4); }
.bigbtn.green { background:linear-gradient(180deg,#7dffb0,#2bd97c); box-shadow:0 0 24px rgba(81,255,158,.45); }
.ghostbtn.red { border-color:rgba(255,90,110,.55); color:#ff8fa0; }

/* menu force-update button (top-left corner of the main menu) */
.updatebtn { position:absolute; top:calc(10px + env(safe-area-inset-top));
  left:calc(12px + env(safe-area-inset-left)); z-index:12;
  padding:9px 13px; font-size:11px; font-weight:800; letter-spacing:1px;
  color:#8fd8ff; background:rgba(8,14,32,.88); border:1px solid rgba(143,216,255,.5);
  border-radius:10px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.updatebtn:active { background:rgba(143,216,255,.18); }
.updatebtn[disabled] { opacity:.65; cursor:default; }
h2.violet { color:#e9d8ff; text-shadow:0 0 14px #b14dff, 0 0 50px rgba(177,77,255,.5); }
h2.cyan { color:#d8fbff; text-shadow:0 0 14px #46f6ff, 0 0 50px rgba(70,246,255,.4); }
h2.gold { color:#fff3d8; text-shadow:0 0 14px #ffb454, 0 0 50px rgba(255,180,84,.4); }

/* dev hub + live ops */
.hubbtn { display:block; width:100%; margin:10px 0; text-align:center; }
.hubbtn .sub { display:block; font-size:10px; letter-spacing:2px; opacity:.65; font-weight:400; margin-top:5px; }
.wipebtn { border-color:rgba(255,77,109,.6); color:#ff8ba0; margin:10px 0; }
.wipebtn .sub { display:block; font-size:10px; letter-spacing:2px; opacity:.65; font-weight:400; margin-top:5px; }
.wipebtn.armed { background:rgba(255,77,109,.18); border-color:#ff4d6d; color:#fff; }
.livebtn { padding:10px 8px; font-size:11px; letter-spacing:1px; font-weight:700;
  background:rgba(20,30,60,.9); border:1px solid rgba(255,180,84,.45); color:#ffd9a0;
  border-radius:8px; cursor:pointer; font-family:inherit; }
.livebtn:active { background:rgba(255,180,84,.25); }
#liveopsbody .tag { margin:8px 0; }
@media (max-width:700px) {
  #badgeline { justify-content:center; }
}

#toast { position:absolute; left:50%; bottom:22%; transform:translateX(-50%); z-index:8;
  padding:10px 22px; border-radius:24px; background:rgba(6,12,28,.85); border:1px solid rgba(70,246,255,.5);
  color:#eafcff; font-size:15px; letter-spacing:2px; font-weight:700; pointer-events:none;
  box-shadow:0 0 24px rgba(70,246,255,.35); white-space:nowrap; }
#warnbanner { position:absolute; top:22%; left:50%; transform:translateX(-50%); z-index:8;
  color:#ff6b81; font-size:clamp(18px,4vw,30px); font-weight:900; letter-spacing:4px; pointer-events:none;
  text-shadow:0 0 18px #ff4d6d; animation:blink .5s steps(2) infinite; white-space:nowrap; }
@keyframes blink { 50% { opacity:.25; } }

@media (max-width:700px) {
  #topleft { width:44vw; }
  .howto .k { min-width:104px; }
  .panel { padding:20px 18px; }
}

#nukeline { margin-top:4px; font-size:12px; letter-spacing:2px; color:#ffd76a; font-weight:700; }
#fxline { margin-top:2px; font-size:11px; letter-spacing:2px; color:#7df9ff; font-weight:700; }
.pts { margin-top:10px; color:#ffd76a; letter-spacing:2px; font-size:14px; font-weight:700; }
.pts.big { font-size:18px; margin:2px 0 10px; }

/* ---------- Store: dense grid, small but readable ---------- */
.storepanel { width:min(96vw,1040px); max-width:min(96vw,1040px); max-height:94vh; padding:14px 22px 12px; }
.storepanel h2 { font-size:clamp(20px,3.2vw,27px); margin-bottom:0; }
#storepts.big { font-size:17px; margin:0 0 2px; text-shadow:0 0 18px rgba(255,215,106,.55); cursor:pointer; }
.storepanel h3 { margin:10px 0 8px; font-size:12px; letter-spacing:4px; font-weight:800;
  display:flex; align-items:center; gap:12px; }
.storepanel h3::before, .storepanel h3::after { content:''; flex:1; height:1px; }
.storepanel h3.up { color:#46f6ff; }
.storepanel h3.up::before, .storepanel h3.up::after { background:linear-gradient(90deg,transparent,rgba(70,246,255,.5),transparent); }
.storepanel h3.item { color:#ffd76a; }
.storepanel h3.item::before, .storepanel h3.item::after { background:linear-gradient(90deg,transparent,rgba(255,215,106,.5),transparent); }
.storepanel h3.wpn { color:#ff4dd9; }
.storepanel h3.wpn::before, .storepanel h3.wpn::after { background:linear-gradient(90deg,transparent,rgba(255,77,217,.5),transparent); }
.storepanel h3.slot { color:#b2ff59; }
.storepanel h3.slot::before, .storepanel h3.slot::after { background:linear-gradient(90deg,transparent,rgba(178,255,89,.5),transparent); }

/* skill drops page: help reference + loadout picker */
#skillgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin:10px 0 4px; }
#enemygrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin:10px 0 4px; }
#enemygrid .st { font-size:11px; color:#8fd8ff; margin:2px 0 6px; letter-spacing:1px; }
.scard { position:relative; max-width:none; min-height:132px; }
.scard.sel { border-color:rgba(178,255,89,.9); background:rgba(178,255,89,.08);
  box-shadow:0 0 16px rgba(178,255,89,.18); }
.scard .tick { position:absolute; top:6px; right:10px; color:#b2ff59; font-weight:800; font-size:16px; }
#storeups, #storeitems, #storeweapons { display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.srow { display:flex; align-items:center; gap:10px; padding:8px 10px; margin-bottom:0;
  background:linear-gradient(180deg,rgba(12,22,48,.95),rgba(8,14,32,.95));
  border:1px solid rgba(70,246,255,.28); border-radius:10px; text-align:left;
  transition:border-color .15s, box-shadow .15s; }
.srow.up { border-color:rgba(70,246,255,.35); }
.srow.up:hover { border-color:rgba(70,246,255,.7); box-shadow:0 0 18px rgba(70,246,255,.15); }
.srow.item { border-color:rgba(255,215,106,.35); }
.srow.item:hover { border-color:rgba(255,215,106,.7); box-shadow:0 0 18px rgba(255,215,106,.15); }
.srow.wpn { border-color:rgba(255,77,217,.35); }
.srow.wpn:hover { border-color:rgba(255,77,217,.7); box-shadow:0 0 18px rgba(255,77,217,.15); }
.srow.equipped { border-color:rgba(178,255,89,.7); box-shadow:0 0 18px rgba(178,255,89,.2); }
.sinfo { flex:1; display:flex; gap:10px; align-items:center; min-width:0; }
.sicotx { font-size:24px; flex:0 0 auto; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:rgba(4,10,24,.8); border:1px solid rgba(255,255,255,.12); border-radius:10px; }
.snm { font-size:13px; font-weight:800; letter-spacing:1px; color:#eafcff; }
.sds { font-size:11px; color:#9fc6dd; margin-top:2px; line-height:1.35; }
.spips { font-size:10px; color:#b2ff59; letter-spacing:2px; margin-top:4px; }
.sbuy { flex:0 0 auto; padding:9px 13px; font-size:13px; font-weight:800; letter-spacing:1px;
  color:#04121a; background:linear-gradient(180deg,#ffe27a,#f5b942); border:none; border-radius:10px; cursor:pointer;
  box-shadow:0 0 16px rgba(255,215,106,.4); white-space:nowrap; }
.sbuy:active { transform:scale(.95); }
.sbuy.maxed { background:rgba(120,140,160,.22); color:#8fa3b8; box-shadow:none; cursor:default; }
#storeback { margin:12px 0 0; padding:10px; font-size:14px; }
.storefoot { display:flex; gap:8px; align-items:stretch; }
.storefoot #storeback { flex:2; margin:12px 0 0; }
.storefoot #shopdevbtn { flex:1; margin:12px 0 0; padding:10px; font-size:13px;
  border-color:rgba(255,77,217,.55); color:#ff9eef; }

/* ---------- Main menu: fill the available space, no scroll box ---------- */
#menu { background:transparent; padding:0; }
#menu .panel.menupanel { background:rgba(6,10,28,.78); width:100%; max-width:100%; height:100%; max-height:100%;
  overflow:visible; padding:18px 30px; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:0; border-left:none; border-right:none; }
.menupanel h1 { font-size:clamp(28px,5.5vw,44px); letter-spacing:6px; }
.menupanel .tag { margin:2px 0 12px; font-size:11px; }
.menugrid { display:flex; align-items:center; justify-content:center; gap:40px; flex-wrap:wrap; width:100%; }
.menugrid .howto { margin:0; font-size:13px; line-height:2.1; flex:0 0 auto; }
.menuactions { display:flex; flex-direction:column; gap:8px; width:min(300px,30vw); flex:0 0 auto; }
.menuactions .bigbtn { margin:0; padding:13px; font-size:15px; }
.menuactions .ghostbtn { margin:0; padding:10px; font-size:13px; }
.menustats { flex:0 0 auto; text-align:left; min-width:110px; }
.menustats .pts { margin:0 0 8px; font-size:15px; }
.menustats .best { margin:0; font-size:13px; }
@media (max-width:700px) {
  .menugrid { flex-direction:column; gap:14px; }
  .menuactions { width:100%; }
  .menugrid .howto { font-size:14px; }
  .menustats { text-align:center; }
}

/* ---------- Dev console ---------- */
#devlogo { position:absolute; right:12px; bottom:8px; font-size:10px; letter-spacing:1px;
  color:rgba(143,216,255,.35); cursor:pointer; padding:8px 6px; }
#devlogo:active { color:rgba(143,216,255,.7); }
#devbtn.devbtn { border-color:rgba(255,77,217,.55); color:#ff9eef; }
.devpanel { width:min(96vw,920px); max-width:min(96vw,920px); max-height:94vh;
  padding:14px 20px 12px; text-align:left; }
.devpanel h2 { text-align:center; }
.devpanel .tag { text-align:center; }
.devsec { margin:12px 0 6px; font-size:12px; letter-spacing:4px; color:#b2ff59; font-weight:800; }
.devtype { margin-top:8px; font-size:11px; letter-spacing:2px; color:#8fd8ff; font-weight:700; }
.devgrid { display:grid; gap:6px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.devrow { display:flex; align-items:center; gap:6px; background:rgba(10,18,40,.85);
  border:1px solid rgba(178,255,89,.25); border-radius:8px; padding:5px 8px; }
.devrow label { flex:1; font-size:11px; color:#cfe9ff; letter-spacing:.5px; min-width:0; }
.devrow .v { min-width:54px; text-align:center; font-size:12px; font-weight:700; color:#b2ff59;
  font-variant-numeric:tabular-nums; }
.devrow button { width:24px; height:24px; flex:0 0 auto; border-radius:6px;
  border:1px solid rgba(178,255,89,.4); background:rgba(178,255,89,.08);
  color:#b2ff59; font-size:14px; font-weight:800; cursor:pointer; line-height:1; }
.devrow button:active { background:rgba(178,255,89,.25); }
.devactions { display:flex; gap:8px; margin-top:14px; }
.devactions .bigbtn, .devactions .ghostbtn { margin:0; padding:10px; font-size:13px; }
.devhelpwrap { text-align:center; margin:2px 0 4px; }
.devhelpbtn { font-size:11px; padding:6px 14px; letter-spacing:2px; margin:0; }
.devhelpbtn.on { border-color:#b2ff59; color:#b2ff59; box-shadow:0 0 12px rgba(178,255,89,.35); }
.devrow.hashelp { cursor:default; }
body.showhelp .devrow.hashelp { cursor:help; border-color:rgba(178,255,89,.55); }
body.showhelp .devrow.hashelp label::after { content:' ?'; color:#b2ff59; font-weight:800; }
/* dev help popup */
.helppanel { max-width:420px; text-align:center; }
.helppanel h3 { font-size:16px; letter-spacing:3px; color:#b2ff59; margin:0 0 8px;
  text-shadow:0 0 14px rgba(178,255,89,.5); }
.helppanel p { font-size:13px; color:#cfe9ff; line-height:1.55; margin:6px 0; }
.helppanel .helpcurrent { font-size:12px; color:#8fd8ff; letter-spacing:1px; }
.helppanel .bigbtn { margin-top:10px; }
/* weapon level badge in store */
.wlvl { font-size:10px; color:#b2ff59; letter-spacing:1px; }

/* orientation gate — phone browser fullscreen cycle */
#orientgate { z-index:50; background:rgba(2,6,18,.96); }
.gatepanel { text-align:center; padding:24px; max-width:420px; }
.gatepanel h1 { font-size:22px; letter-spacing:5px; color:#27e6ff;
  text-shadow:0 0 18px rgba(39,230,255,.7); margin:0 0 10px; }
.gatepanel p { font-size:14px; color:#cfe9ff; margin:6px 0; }
.gatepanel .gatehelp { font-size:12px; letter-spacing:2px; color:#8fd8ff; opacity:.85; }
.gatephone { width:36px; height:64px; border:3px solid #27e6ff; border-radius:9px;
  margin:0 auto 22px; position:relative;
  box-shadow:0 0 18px rgba(39,230,255,.55), inset 0 0 10px rgba(39,230,255,.25);
  animation:gatespin 2.4s ease-in-out infinite; }
.gatephone::after { content:''; position:absolute; bottom:6px; left:50%;
  transform:translateX(-50%); width:7px; height:7px; border-radius:50%;
  background:#27e6ff; box-shadow:0 0 8px rgba(39,230,255,.9); }
@keyframes gatespin {
  0%, 18% { transform:rotate(0deg); }
  48%, 72% { transform:rotate(-90deg); }
  100% { transform:rotate(-90deg); }
}

/* ---- co-op multiplayer lobby ---- */
.mpcode {
  font-size: 44px; font-weight: 800; letter-spacing: 12px; text-align: center;
  color: #7df9ff; text-shadow: 0 0 18px rgba(125,249,255,.8);
  margin: 10px 0 16px; font-family: "Segoe UI", system-ui, sans-serif;
}
.mpinput {
  display: block; width: 240px; margin: 8px auto; padding: 10px 12px;
  font-size: 18px; text-align: center; letter-spacing: 2px;
  background: rgba(10,16,40,.8); border: 1px solid #46f6ff; border-radius: 8px;
  color: #eafcff; text-transform: uppercase; outline: none;
}
.mpinput::placeholder { color: #5a6f9e; }
.mptickset { display:block; margin:10px auto 2px; font-size:11px; font-weight:800;
  letter-spacing:2px; color:#8fd8ff; text-align:center; }
.mptickset select.mpinput { width:150px; font-size:15px; padding:7px 10px; margin-top:5px; }
.mprow2 { display: flex; gap: 10px; justify-content: center; margin: 10px 0; }
.mprow2 .bigbtn { flex: 1; max-width: 220px; }
.mprow {
  padding: 8px 12px; margin: 6px auto; max-width: 300px; text-align: center;
  background: rgba(70,246,255,.08); border: 1px solid rgba(70,246,255,.35);
  border-radius: 8px; color: #dffcff; letter-spacing: 2px; font-size: 15px;
}
.mperr { color: #ff6b81; min-height: 20px; text-align: center; font-size: 14px; }
#mpanel .bigbtn, #mpanel .ghostbtn { margin: 6px auto; display: block; }

/* hangar ship cards */
#hangarlist { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:10px; margin:10px 0 4px; }
.shipcard { background:linear-gradient(180deg,rgba(12,22,48,.95),rgba(8,14,32,.95)); border:1px solid rgba(70,246,255,.28);
  border-radius:12px; padding:12px 12px 10px; cursor:pointer; text-align:left; transition:border-color .15s, box-shadow .15s; }
.shipcard:hover { border-color:rgba(70,246,255,.7); box-shadow:0 0 18px rgba(70,246,255,.15); }
.shipcard.sel { border-color:rgba(178,255,89,.9); background:linear-gradient(180deg,rgba(24,36,20,.95),rgba(10,18,10,.95));
  box-shadow:0 0 16px rgba(178,255,89,.18); }
.shipcard .shiptop { display:flex; align-items:center; gap:10px; }
.shipcard .shipico { color:#46f6ff; flex:0 0 auto; }
.shipcard .shipnm { font-size:16px; font-weight:800; letter-spacing:1.5px; color:#eafcff; }
.shipcard .shiptag { font-size:11px; color:#8fd8ff; letter-spacing:.6px; }
.shipcard .shipstats { margin:9px 0 6px; display:grid; gap:3px; }
.shipcard .sstat { display:flex; align-items:center; gap:7px; font-size:10px; letter-spacing:1px; color:#6f96b8; }
.shipcard .sstat > span:first-child { flex:0 0 60px; } /* fixed label column — every bar starts at the same x regardless of label length */
.shipcard .sstat .bar { flex:1; height:5px; background:rgba(70,246,255,.12); border-radius:3px; overflow:hidden; }
.shipcard .sstat .bar i { display:block; height:100%; background:#46f6ff; border-radius:3px; }
.shipcard .sstat .val { width:34px; text-align:right; color:#cfe9ff; font-size:10.5px; }
.shipcard .shipspec { font-size:11.5px; color:#ffd76a; line-height:1.4; min-height:16px; }
.shipcard .shipbtn { margin-top:8px; width:100%; padding:7px 0; border-radius:8px; border:1px solid rgba(70,246,255,.4);
  background:rgba(70,246,255,.08); color:#46f6ff; font-weight:700; letter-spacing:1.5px; font-size:12px; cursor:pointer; }
.shipcard.sel .shipbtn { border-color:rgba(178,255,89,.7); background:rgba(178,255,89,.12); color:#b2ff59; }

/* hangar evolution lines */
.hangarpts { text-align:center; font-weight:800; letter-spacing:1px; color:#ffd76a; margin:2px 0 14px; font-size:14px; }
.shipline { margin-bottom:18px; }
.shiplinename { font-size:15px; font-weight:800; letter-spacing:2px; color:#eafcff; margin-bottom:8px; }
.shiplinecards { display:flex; align-items:stretch; gap:8px; }
.shiplinecards .shipcard { flex:1; }
.shiplinecards .shiparrow { align-self:center; font-size:20px; color:#46f6ff; }
.shiptier { font-size:10px; letter-spacing:2px; color:#6f96b8; margin-bottom:4px; }
.shipcard.unowned { opacity:.72; }
.shipbtn.evolve { background:linear-gradient(180deg,#2a4d1e,#16280f); border-color:rgba(178,255,89,.6); color:#c9ff8a; }
.shipbtn.evolve.poor { opacity:.55; }
.shipbtn.locked { opacity:.55; }
#hangarlist { display:block; }
.shiplinecards .shipcard { min-width:0; }

/* encyclopedia */
#encyhome { display:grid; gap:10px; margin:12px 0 4px; }
.encyfoot { margin-top:8px; font-size:11.5px; line-height:1.5; letter-spacing:.4px; color:#ffd76a; }
.encyfoot .own { color:#b2ff59; font-weight:700; }
.encyfoot .lock { color:#8fb6d9; font-weight:700; }
#encygrid .shipcard { cursor:default; }

/* save transfer (v67) */
.tf-note { font-size: 13px; line-height: 1.45; opacity: 0.85; margin: 8px 0 4px; }
.tf-h { margin: 16px 0 6px; font-size: 13px; letter-spacing: 0.12em; color: #7df9ff; }
.tf-box { width: 100%; box-sizing: border-box; background: rgba(4, 12, 24, 0.85); color: #b8f6ff;
  border: 1px solid rgba(70, 246, 255, 0.35); border-radius: 8px; padding: 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; resize: vertical; }
.tf-msg { min-height: 18px; font-size: 13px; color: #ffd76a; margin: 8px 0; }