* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #04060f;
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: #cfe3ff;
  user-select: none;
  -webkit-user-select: none;
  /* stop pull-to-refresh, double-tap zoom and long-press callouts on mobile */
  overscroll-behavior: none;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#game { display: block; width: 100vw; height: 100vh; cursor: crosshair; touch-action: none; }
#overlay {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  pointer-events: none; z-index: 5;
}

/* ===== Menus ===== */
.overlay {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(10,18,40,.92), rgba(2,4,10,.97));
  z-index: 20;
}
.overlay h1 {
  font-size: 56px; letter-spacing: 12px; font-weight: 300;
  color: #7fd4ff; text-shadow: 0 0 30px rgba(80,180,255,.6);
  margin-bottom: 8px;
}
.overlay .sub { color: #8fa8cc; margin-bottom: 40px; }
.overlay .sub b { color: #cfe3ff; }
.overlay .hint { margin-top: 30px; font-size: 12px; color: #5f78a0; letter-spacing: 1px; }

.overlay .warn {
  margin-top: 22px; padding: 9px 20px;
  font-size: 12px; letter-spacing: 1px; color: #ffb27f;
  border: 1px solid rgba(255, 140, 80, .35); border-radius: 8px;
  background: rgba(60, 26, 12, .45);
}

.ships { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; max-width: 1180px; }
.shipCard {
  width: 218px; padding: 18px;
  border: 1px solid #2a4a7a; border-radius: 8px;
  background: rgba(15,30,60,.5);
  cursor: pointer; text-align: center;
  transition: all .15s;
}
.shipCard:hover {
  border-color: #7fd4ff; background: rgba(25,50,95,.6);
  box-shadow: 0 0 24px rgba(80,180,255,.25);
  transform: translateY(-4px);
}
.shipCard h2 { color: #aee0ff; font-weight: 400; margin-bottom: 12px; }
.shipCard p { font-size: 13px; color: #8fa8cc; margin-top: 10px; line-height: 1.4; }
.shipCard .ability { color: #ffd27f; }
.shipArt { height: 70px; margin: 0 auto; background-position: center; background-repeat: no-repeat; }
.shipArt.bc { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="70" viewBox="0 0 140 70"><polygon points="10,35 45,20 120,28 132,35 120,42 45,50" fill="%234a7ab0" stroke="%237fd4ff" stroke-width="2"/><rect x="50" y="14" width="30" height="8" fill="%233a5a88" stroke="%237fd4ff"/><rect x="50" y="48" width="30" height="8" fill="%233a5a88" stroke="%237fd4ff"/></svg>'); }
.shipArt.cr { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="70" viewBox="0 0 140 70"><ellipse cx="70" cy="35" rx="55" ry="16" fill="%23b09a4a" stroke="%23ffd27f" stroke-width="2"/><rect x="30" y="26" width="80" height="18" rx="9" fill="%23887539" stroke="%23ffd27f"/></svg>'); }
.shipArt.ds { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="70" viewBox="0 0 140 70"><polygon points="6,35 38,28 128,31 136,35 128,39 38,42" fill="%234a7ab0" stroke="%237fd4ff" stroke-width="2"/><rect x="28" y="18" width="44" height="6" fill="%233a5a88" stroke="%237fd4ff"/><rect x="28" y="46" width="44" height="6" fill="%233a5a88" stroke="%237fd4ff"/></svg>'); }
.shipArt.sp { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="70" viewBox="0 0 140 70"><ellipse cx="64" cy="38" rx="40" ry="20" fill="%233a8868" stroke="%237fffc0" stroke-width="2"/><circle cx="64" cy="18" r="9" fill="none" stroke="%237fffc0" stroke-width="2"/><line x1="64" y1="9" x2="64" y2="28" stroke="%237fffc0" stroke-width="2"/><rect x="98" y="31" width="20" height="14" rx="7" fill="%232f6a52" stroke="%237fffc0" stroke-width="2"/></svg>'); }
.shipArt.dn { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="70" viewBox="0 0 140 70"><polygon points="8,35 34,18 116,24 134,35 116,46 34,52" fill="%234a7ab0" stroke="%237fd4ff" stroke-width="2"/><rect x="40" y="10" width="42" height="10" fill="%233a5a88" stroke="%237fd4ff"/><rect x="40" y="50" width="42" height="10" fill="%233a5a88" stroke="%237fd4ff"/><rect x="56" y="24" width="26" height="8" fill="%23264b73" stroke="%237fd4ff"/><circle cx="100" cy="35" r="6" fill="%237fd4ff"/></svg>'); }

.hidden { display: none !important; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }

/* ===== Multiplayer ===== */
#mpPanel {
  margin-top: 26px; padding: 16px 22px;
  border: 1px solid rgba(110, 165, 230, .25); border-radius: 12px;
  background: rgba(12, 22, 40, .6);
  text-align: center;
}
.mpTitle { font-size: 10px; letter-spacing: 3px; color: #7fd4ff; margin-bottom: 10px; }
.mpRow { display: flex; gap: 8px; justify-content: center; }
.mpRow input {
  width: 130px; padding: 7px 10px;
  font-family: inherit; font-size: 12px; color: #cfe3ff;
  background: rgba(0, 0, 0, .4);
  border: 1px solid #2a4a7a; border-radius: 6px;
}
.mpRow input:focus { outline: none; border-color: #7fd4ff; }
.mpRow button { padding: 7px 18px; font-size: 12px; }
#mpStatus { margin-top: 10px; font-size: 11px; color: #7f9bbd; }
#mpStatus code {
  background: rgba(0, 0, 0, .4); padding: 1px 6px; border-radius: 4px;
  color: #7fe8ff; font-size: 11px;
}
@keyframes netPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
#netPlayers { display: flex; flex-direction: column; gap: 2px; margin-top: 5px; }

/* ===== Generic buttons ===== */
button {
  font-family: inherit; font-size: 13px; color: #cfe3ff;
  background: rgba(20,40,75,.85);
  border: 1px solid #2a4a7a; border-radius: 6px;
  padding: 10px 14px; cursor: pointer;
  transition: all .1s;
}
button:hover:not(:disabled) { border-color: #7fd4ff; background: rgba(35,65,115,.9); }
button:disabled { opacity: .45; cursor: default; }
#endScreen button { font-size: 18px; padding: 14px 40px; margin-top: 20px; }

/* ===== Admin panel ===== */
#adminPanel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 340px; z-index: 30;
  display: flex; flex-direction: column;
  background: rgba(6,12,26,.96);
  border-left: 1px solid #2a4a7a;

}
#admHead {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid #2a4a7a;
  font-size: 12px; letter-spacing: 2px; color: #7fd4ff;
}
#admHead button { padding: 4px 10px; font-size: 12px; }
#admActions {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 14px; border-bottom: 1px solid #2a4a7a;
}
#admActions button { padding: 6px 10px; font-size: 11px; }
/* leaving a match throws away a game in progress — set apart from the tuning actions */
#quitMatch { color: #ff9a8c; border-color: rgba(255, 110, 90, .5); }
#quitMatch:hover { border-color: #ff7a6a; color: #fff; }
#admPresets { padding: 8px 14px; border-bottom: 1px solid #2a4a7a; }
.presetRow { display: flex; gap: 6px; margin-bottom: 6px; }
.presetRow input[type="text"], .presetRow select {
  flex: 1; min-width: 0; padding: 4px 7px;
  font-family: inherit; font-size: 11px; color: #cfe3ff;
  background: rgba(0,0,0,.4); border: 1px solid #2a4a7a; border-radius: 3px;
}
.presetRow input[type="text"]:focus, .presetRow select:focus { outline: none; border-color: #7fd4ff; }
.presetRow button { padding: 4px 10px; font-size: 11px; }
#admStatus {
  height: 12px; font-size: 10px; color: #6aff8a; letter-spacing: 1px;
  opacity: 0; transition: opacity .25s;
}

#admBody { flex: 1; overflow-y: auto; padding: 8px 14px 40px; }
#admBody::-webkit-scrollbar { width: 8px; }
#admBody::-webkit-scrollbar-thumb { background: #2a4a7a; border-radius: 4px; }

#admBody details {
  margin-bottom: 6px;
  border: 1px solid rgba(42,74,122,.5); border-radius: 5px;
  background: rgba(15,28,52,.4);
}
#admBody details details { margin: 4px 6px; background: rgba(20,38,68,.5); }
#admBody summary {
  padding: 7px 10px; cursor: pointer;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: #aee0ff;
}
#admBody summary:hover { color: #fff; }
.admRow {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; padding: 3px 10px 3px 16px;
}
.admRow span { font-size: 11px; color: #8fa8cc; flex: 1; }
.admRow input[type="number"] {
  width: 84px; padding: 3px 6px;
  font-family: inherit; font-size: 11px; color: #cfe3ff;
  background: rgba(0,0,0,.4);
  border: 1px solid #2a4a7a; border-radius: 3px;
}
.admRow input[type="number"]:focus { outline: none; border-color: #7fd4ff; }
.admRow input[type="checkbox"] { width: 16px; height: 16px; accent-color: #5ad0ff; }
#btnCancel { display: none; }
body.targeting #btnCancel { display: block; border-color: rgba(150,255,200,.7); color: #9effc0; }

/* Landscape prompt */
#rotatePrompt {
  position: fixed; inset: 0; z-index: 60;
  display: none; align-items: center; justify-content: center;
  background: #04060f; text-align: center;
}
#rotatePrompt .rotIcon { font-size: 54px; color: #7fd4ff; animation: rot 2.4s ease-in-out infinite; }
#rotatePrompt h2 { margin-top: 14px; font-size: 17px; letter-spacing: 4px; font-weight: 400; color: #aee0ff; }
#rotatePrompt p { margin-top: 8px; font-size: 12px; color: #7f9bbd; }
@keyframes rot { 0%,100% { transform: rotate(0); } 50% { transform: rotate(90deg); } }
@media (orientation: portrait) and (max-width: 950px){
  /* real devices only — a narrowed desktop window is for testing, not rotating */
  body.touch.realTouch #rotatePrompt { display: flex; }
}
@media (max-width: 900px), (max-height: 620px){
  .overlay {
    justify-content: flex-start;
    overflow-y: auto; overflow-x: hidden;
    padding: 10px 10px 16px;
    -webkit-overflow-scrolling: touch;
  }
  .overlay h1 { font-size: 22px; letter-spacing: 5px; margin-bottom: 2px; }
  .overlay .sub { font-size: 10px; margin-bottom: 10px; text-align: center; }
  .overlay .hint { font-size: 9px; margin-top: 8px; text-align: center; line-height: 1.5; }
  .overlay .warn { font-size: 9px; margin-top: 8px; padding: 5px 10px; text-align: center; }

  /* cards become a compact grid instead of a row that runs off-screen */
  /* all five hulls on one row so the panels below stay on screen */
  .ships {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px; width: 100%; max-width: none;
  }
  .shipCard { width: auto; padding: 7px; border-radius: 8px; }
  .shipCard h2 { font-size: 11px; margin-bottom: 2px; }
  .shipCard p { font-size: 8px; margin-top: 2px; line-height: 1.25; }
  .shipCard .ability { font-size: 7.5px; }
  .shipArt { height: 22px; background-size: contain; }

  #mpPanel { margin-top: 8px; padding: 7px 10px; width: 100%; max-width: none; }
  .mpTitle { font-size: 9px; margin-bottom: 6px; }
  .mpRow { flex-wrap: wrap; }
  .mpRow input { width: auto; flex: 1 1 110px; min-width: 0; padding: 7px 8px; font-size: 11px; }
  .mpRow button { padding: 7px 14px; font-size: 11px; }
  #mpStatus { font-size: 9px; margin-top: 6px; }

  #endScreen { justify-content: center; }
  #endScreen h1 { font-size: 28px; }
  #endScreen button { font-size: 14px; padding: 10px 26px; }
}
body.touch .shipCard { padding: 14px; }
@media (max-width: 700px){
  #adminPanel { width: 100%; }
  .admRow input[type="number"] { width: 96px; padding: 7px; font-size: 12px; }
  #admActions button { padding: 9px 12px; }
}

/* ===== Account panel (admin) ===== */
#admAccount { padding: 10px 14px; border-bottom: 1px solid #2a4a7a; }
.acctTitle { font-size: 9px; letter-spacing: 1.5px; color: #7fd4ff; margin-bottom: 8px; }
.acctWho { font-size: 11px; color: #8fa8cc; }
.acctWho b { color: #cfe3ff; }
#admAccount .presetRow input { flex: 1 1 0; }
#admAccount button { padding: 5px 10px; font-size: 11px; white-space: nowrap; }
#acctStatus { min-height: 12px; font-size: 10px; letter-spacing: .5px; color: #6aff8a; }

/* ============================================================
   Auth screen
   ============================================================ */
#authScreen {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(40, 90, 170, .28), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(120, 60, 170, .22), transparent 60%),
    linear-gradient(160deg, #060b18, #02040a);
  z-index: 40;
}
.authCard {
  position: relative;
  width: min(430px, 92vw);
  padding: 26px 26px 20px;
  border: 1px solid rgba(120, 175, 240, .26);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(18, 30, 52, .92), rgba(8, 14, 26, .95));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(160, 205, 255, .16);

  overflow: hidden;
}
.authGlow {
  position: absolute; top: -60%; left: -20%; right: -20%; height: 120%;
  background: radial-gradient(ellipse at 50% 0%, rgba(90, 208, 255, .16), transparent 65%);
  pointer-events: none;
}
.authBrand {
  position: relative;
  font-size: 26px; font-weight: 300; letter-spacing: 9px; text-align: center;
  color: #9fe0ff; text-shadow: 0 0 26px rgba(80, 180, 255, .55);
}
.authSub {
  position: relative; margin: 8px 0 18px;
  font-size: 11px; line-height: 1.5; text-align: center; color: #7f9bbd;
}
.authTabs {
  position: relative; display: flex; gap: 4px; margin-bottom: 16px;
  padding: 3px; border-radius: 10px; background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(110, 165, 230, .16);
}
.authTab {
  flex: 1; padding: 8px 0; border: none; border-radius: 8px;
  background: transparent; color: #7f9bbd;
  font-size: 10px; font-weight: 700; letter-spacing: 1.6px;
}
.authTab.on {
  background: linear-gradient(160deg, rgba(60, 110, 175, .85), rgba(30, 62, 105, .9));
  color: #eaf4ff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(160, 205, 255, .25);
}
.authField { position: relative; display: block; margin-bottom: 11px; }
.authField > span {
  display: block; margin-bottom: 5px;
  font-size: 9px; font-weight: 600; letter-spacing: 1.6px; color: #6f8cae;
}
.authField input {
  width: 100%; padding: 11px 13px;
  font-family: inherit; font-size: 13px; color: #eaf3ff;
  background: rgba(0, 0, 0, .38);
  border: 1px solid rgba(110, 165, 230, .26); border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.authField input::placeholder { color: #4e6684; }
.authField input:focus {
  outline: none; border-color: rgba(127, 212, 255, .85);
  box-shadow: 0 0 0 3px rgba(90, 180, 255, .14);
}
.authAdv { margin: 2px 0 14px; }
.authAdv summary {
  font-size: 10px; letter-spacing: 1.2px; color: #6f8cae;
  cursor: pointer; padding: 4px 0;
}
.authAdv summary:hover { color: #9fd0ff; }
.authAdv[open] summary { margin-bottom: 8px; }
.authGo {
  width: 100%; padding: 13px 0; margin-top: 2px;
  border: 1px solid rgba(127, 212, 255, .5); border-radius: 11px;
  background: linear-gradient(160deg, #2f7fc4, #1b4c7d);
  color: #f2faff; font-size: 12px; font-weight: 700; letter-spacing: 2.4px;
  box-shadow: 0 8px 24px rgba(30, 110, 190, .35), inset 0 1px 0 rgba(190, 230, 255, .3);
}
.authGo:hover:not(:disabled) {
  background: linear-gradient(160deg, #3a95e0, #22598f);
  border-color: #9fe0ff;
}
.authGo:disabled { opacity: .55; }
#authMsg {
  min-height: 15px; margin-top: 9px;
  font-size: 10.5px; letter-spacing: .4px; text-align: center; color: #6aff8a;
}
#authMsg.bad { color: #ff9a8a; }
.authGuest {
  display: block; width: 100%; margin-top: 10px; padding: 8px 0;
  background: none; border: none; color: #6f8cae;
  font-size: 11px; letter-spacing: .6px;
}
.authGuest:hover { color: #9fd0ff; background: none; border: none; }

/* account chip on the main menu */
#acctChip {
  position: absolute; top: 14px; right: 14px;
  padding: 7px 14px; border-radius: 20px;
  font-size: 10px; font-weight: 600; letter-spacing: 1.4px;
  background: rgba(14, 26, 46, .8);
  border: 1px solid rgba(110, 165, 230, .3);
  color: #9fd0ff; z-index: 3;
}
#acctChip.signedIn { border-color: rgba(106, 255, 138, .5); color: #9effc0; }
@media (max-width: 900px), (max-height: 620px){
  .authCard { width: min(400px, 94vw); padding: 16px 18px 14px; border-radius: 14px; }
  .authBrand { font-size: 18px; letter-spacing: 6px; }
  .authSub { font-size: 9px; margin: 6px 0 12px; }
  .authTabs { margin-bottom: 11px; }
  .authTab { padding: 7px 0; font-size: 9px; }
  .authField { margin-bottom: 8px; }
  .authField > span { font-size: 8px; margin-bottom: 3px; }
  .authField input { padding: 9px 11px; font-size: 12px; border-radius: 8px; }
  .authGo { padding: 11px 0; font-size: 11px; }
  .authGuest { font-size: 10px; margin-top: 6px; }
  #authMsg { font-size: 9.5px; }
  #acctChip { top: 8px; right: 8px; padding: 5px 11px; font-size: 9px; }
}

/* ============================================================
   HANGAR — ship selection  (v2: angular military-HUD language)
   ============================================================ */
@font-face {
  font-family: 'Rajdhani';
  src: url('vendor/fonts/rajdhani-500.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Rajdhani';
  src: url('vendor/fonts/rajdhani-600.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Rajdhani';
  src: url('vendor/fonts/rajdhani-700.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

:root {
  --hg-cyan: #35c8ff;
  --hg-cyan-dim: rgba(53, 200, 255, .55);
  --hg-line: rgba(53, 170, 240, .38);
  --hg-ink: #0a1626;
  --hg-panel: rgba(7, 16, 30, .86);
  --hg-text: #e8f4ff;
  --hg-mute: #6d90b5;
}

body, button, input, select {
  font-family: 'Rajdhani', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif;
}

#shipSelect {
  justify-content: stretch; align-items: stretch;
  padding: 0; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 118%, rgba(24, 90, 160, .38), transparent 55%),
    radial-gradient(ellipse at 12% -8%, rgba(28, 80, 150, .30), transparent 50%),
    radial-gradient(ellipse at 88% 6%, rgba(20, 60, 120, .26), transparent 45%),
    linear-gradient(178deg, #060d1a 0%, #030710 45%, #051022 100%);
}
/* hangar floor: perspective grid + hot centre glow */
#shipSelect::before {
  content: ''; position: absolute; left: -25%; right: -25%; bottom: -14%; height: 60%;
  background:
    radial-gradient(ellipse at 44% 100%, rgba(45, 150, 235, .20), transparent 60%),
    linear-gradient(transparent 0, rgba(58, 150, 235, .10) 1px, transparent 2px) 0 0 / 100% 30px,
    linear-gradient(90deg, transparent 0, rgba(58, 150, 235, .10) 1px, transparent 2px) 0 0 / 46px 100%;
  transform: perspective(560px) rotateX(60deg);
  transform-origin: 50% 100%;
  pointer-events: none;
}
/* whisper of scanlines over everything */
#shipSelect::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(140, 200, 255, .022) 0 1px, transparent 1px 3px);
}

/* --- top chrome: angular command strip --- */
.hgTop {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  height: 46px; padding: 0 18px 0 22px;
  background: linear-gradient(180deg, rgba(10, 22, 40, .92), rgba(6, 13, 26, .88));
  border-bottom: 1px solid var(--hg-line);
  box-shadow: 0 1px 0 rgba(53, 200, 255, .12), 0 8px 26px rgba(0, 0, 0, .45);
}
.hgTop::after {
  content: ''; position: absolute; left: 0; right: 62%; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--hg-cyan), transparent);
  filter: drop-shadow(0 0 6px var(--hg-cyan));
}
.hgTitle {
  font-size: 19px; font-weight: 700; letter-spacing: 5px; color: var(--hg-text);
  text-transform: uppercase;
}
.hgTitle em { font-style: normal; color: var(--hg-cyan); margin-right: 10px; }
#acctChip {
  position: static; border-radius: 3px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  background: rgba(16, 34, 58, .9);
  border: 1px solid var(--hg-line);
  font-family: inherit; font-weight: 700; letter-spacing: 2px;
}

/* --- centre stage --- */
.hgMain { position: relative; flex: 1; min-height: 0; z-index: 1; }
#hangarCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hgStage { position: absolute; top: 4.5%; left: 0; right: 348px; text-align: center; pointer-events: none; }
.hgClass {
  display: inline-block; padding: 3px 16px;
  font-size: 12px; font-weight: 700; letter-spacing: 5px; color: var(--hg-cyan);
  text-transform: uppercase;
}
.hgName {
  margin-top: 1px;
  font-size: clamp(34px, 5.8vw, 64px); font-weight: 700; letter-spacing: 12px;
  color: #fff; text-transform: uppercase;
  text-shadow: 0 0 38px rgba(70, 180, 255, .65), 0 0 8px rgba(140, 220, 255, .4), 0 3px 0 rgba(0, 0, 0, .5);
}
.hgTag { margin-top: 3px; font-size: 13px; font-weight: 600; letter-spacing: 4.5px; color: #58b7ef; text-transform: uppercase; }

.hgArrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 54px; height: 92px; z-index: 2; padding: 0;
  font-size: 42px; line-height: 1; color: var(--hg-cyan);
  background: linear-gradient(100deg, rgba(14, 32, 56, .72), rgba(7, 16, 30, .78));
  border: 1px solid var(--hg-line); border-radius: 0;
  clip-path: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  text-shadow: 0 0 12px var(--hg-cyan-dim);
  transition: all .15s;
}
.hgArrow:hover {
  color: #fff; border-color: var(--hg-cyan);
  box-shadow: 0 0 22px rgba(53, 200, 255, .35), inset 0 0 16px rgba(53, 200, 255, .12);
  background: linear-gradient(100deg, rgba(22, 48, 82, .85), rgba(10, 24, 44, .9));
}
.hgArrow.left { left: 20px; }
.hgArrow.right { right: 366px; }

.hgDots { position: absolute; bottom: 18px; left: 0; right: 348px; display: flex; gap: 10px; justify-content: center; z-index: 2; }
.hgDots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(90, 150, 210, .28); transition: all .2s; }
.hgDots i.on { background: var(--hg-cyan); box-shadow: 0 0 12px var(--hg-cyan); transform: scale(1.3); }

/* --- spec panel: chamfered plate with corner brackets --- */
.hgPanel {
  position: absolute; top: 14px; right: 16px; bottom: 14px;
  width: 324px; z-index: 2;
  display: flex; flex-direction: column;
  padding: 20px 20px 16px;
  background: var(--hg-panel);
  border: 1px solid var(--hg-line);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  box-shadow: inset 0 1px 0 rgba(140, 210, 255, .14), inset 0 0 60px rgba(10, 40, 80, .35);

}
/* glowing top edge */
.hgPanel::before {
  content: ''; position: absolute; top: 0; left: 0; width: 55%; height: 2px;
  background: linear-gradient(90deg, var(--hg-cyan), transparent);
  filter: drop-shadow(0 0 6px var(--hg-cyan));
}

.hgPanelName { font-size: 26px; font-weight: 700; letter-spacing: 3px; color: #fff; text-transform: uppercase; }
.hgPanelClass {
  margin-top: 0; padding-bottom: 11px;
  font-size: 12px; font-weight: 700; letter-spacing: 3.6px; color: var(--hg-cyan);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(53, 170, 240, .25);
}
.hgDesc { margin: 11px 0 13px; font-size: 13px; font-weight: 500; line-height: 1.5; color: #9db8d8; }

.hgStats { display: flex; flex-direction: column; gap: 8px; }
.hgStat { display: flex; align-items: center; gap: 9px; }
.hgStat > span { width: 56px; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; color: var(--hg-mute); }
.hgStat .segs { flex: 1; display: flex; gap: 3px; }
.hgStat .segs i { flex: 1; height: 11px; background: rgba(70, 130, 195, .16); transform: skewX(-14deg); }
.hgStat .segs i.on {
  background: linear-gradient(180deg, #6fd8ff, #1f8fd8);
  box-shadow: 0 0 8px rgba(60, 190, 255, .6);
}
.hgStat > b { width: 30px; text-align: right; font-size: 15px; font-weight: 700; color: #fff; }

.hgAbility {
  position: relative;
  margin-top: 14px; padding: 11px 13px;
  background: linear-gradient(160deg, rgba(52, 34, 78, .45), rgba(24, 16, 40, .55));
  border: 1px solid rgba(168, 110, 255, .3);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.hgAbilityHead { font-size: 10px; font-weight: 700; letter-spacing: 3px; color: #a678e8; }
.hgAbilityName { margin-top: 2px; font-size: 16px; font-weight: 700; letter-spacing: 1px; color: #d9b8ff; text-transform: uppercase; }
.hgAbilityDesc { margin-top: 2px; font-size: 11.5px; font-weight: 500; line-height: 1.45; color: #9585b5; }

.hgSelect {
  margin-top: auto; padding: 16px 0;
  font-family: inherit; font-size: 19px; font-weight: 700; letter-spacing: 7px;
  color: #241703; text-transform: uppercase;
  background: linear-gradient(178deg, #ffcf5e 0%, #f0a92e 55%, #d18a15 100%);
  border: 1px solid #ffe9a8; border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  box-shadow: 0 0 28px rgba(240, 170, 45, .4), inset 0 1px 0 rgba(255, 246, 214, .9), inset 0 -10px 22px rgba(140, 85, 5, .35);
  text-shadow: 0 1px 0 rgba(255, 240, 190, .6);
  transition: all .12s;
}
.hgSelect:hover {
  background: linear-gradient(178deg, #ffdd7d 0%, #ffb83c 55%, #e09a1e 100%);
  box-shadow: 0 0 40px rgba(250, 185, 60, .55), inset 0 1px 0 rgba(255, 248, 220, .95);
}
.hgSelect span { font-weight: 500; }
.hgPerma { margin-top: 9px; font-size: 9.5px; font-weight: 600; letter-spacing: 1.6px; text-align: center; color: #a4713f; }

/* --- bottom nav: continuous divided strip --- */
.hgNav {
  position: relative; z-index: 2;
  display: flex; gap: 0; justify-content: stretch;
  height: 48px; padding: 0;
  background: linear-gradient(180deg, rgba(9, 19, 36, .94), rgba(5, 11, 22, .96));
  border-top: 1px solid var(--hg-line);
  box-shadow: 0 -8px 26px rgba(0, 0, 0, .45);
}
.hgNavBtn {
  flex: 1; min-width: 0; padding: 0;
  font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 3.4px;
  color: var(--hg-mute); text-transform: uppercase;
  background: none; border: none; border-radius: 0;
  border-right: 1px solid rgba(53, 170, 240, .14);
}
.hgNavBtn:last-child { border-right: none; }
.hgNavBtn:hover { color: #d6ecff; background: rgba(40, 90, 150, .14); border-color: rgba(53, 170, 240, .14); }
.hgNavBtn.on { color: #fff; background: linear-gradient(180deg, rgba(45, 110, 180, .30), rgba(25, 60, 105, .18)); position: relative; }
.hgNavBtn.on::after {
  content: ''; position: absolute; left: 18%; right: 18%; top: 0; height: 2px;
  background: var(--hg-cyan); filter: drop-shadow(0 0 6px var(--hg-cyan));
}

/* --- multiplayer modal --- */
#mpModal {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 5, 12, .74);

}
#mpModal #mpPanel {
  position: relative; margin: 0;
  width: min(440px, 92vw); padding: 20px 22px;
  background: var(--hg-panel);
  border: 1px solid var(--hg-line); border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(140, 210, 255, .14);
}
#mpModal .mpTitle { font-size: 14px; font-weight: 700; letter-spacing: 5px; }
#mpClose { position: absolute; top: 10px; right: 10px; padding: 5px 11px; font-size: 12px; border-radius: 0; }

/* auth screen inherits the same plate language */
.authCard {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}
.authBrand { font-family: inherit; font-weight: 700; }
.authGo {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
@media (max-width: 900px), (max-height: 620px){
  .hgTop { height: 34px; padding: 0 10px 0 14px; }
  .hgTitle { font-size: 12px; letter-spacing: 3px; }
  .hgStage { right: 238px; top: 3%; }
  .hgName { letter-spacing: 6px; }
  .hgTag { font-size: 9px; letter-spacing: 2.4px; }
  .hgClass { font-size: 9px; letter-spacing: 3px; padding: 2px 10px; }

  .hgArrow { width: 40px; height: 64px; font-size: 30px; }
  .hgArrow.left { left: 8px; }
  .hgArrow.right { right: 246px; }
  .hgDots { right: 238px; bottom: 8px; gap: 7px; }
  .hgDots i { width: 7px; height: 7px; }

  .hgPanel { right: 8px; top: 8px; bottom: 8px; width: 228px; padding: 12px 13px 10px; }
  .hgPanelName { font-size: 17px; letter-spacing: 1.6px; }
  .hgPanelClass { font-size: 9px; letter-spacing: 2.4px; padding-bottom: 7px; }
  .hgDesc { margin: 7px 0 8px; font-size: 9.5px; line-height: 1.4; }
  .hgStats { gap: 5px; }
  .hgStat > span { width: 42px; font-size: 8px; letter-spacing: 1px; }
  .hgStat .segs { gap: 2px; }
  .hgStat .segs i { height: 7px; }
  .hgStat > b { width: 22px; font-size: 11px; }
  .hgAbility { margin-top: 8px; padding: 8px 10px; }
  .hgAbilityHead { font-size: 7.5px; letter-spacing: 2px; }
  .hgAbilityName { font-size: 11.5px; }
  .hgAbilityDesc { font-size: 8.5px; }
  .hgSelect { padding: 12px 0; font-size: 14px; letter-spacing: 4.5px; }
  .hgPerma { font-size: 7px; margin-top: 6px; }

  .hgNav { height: 38px; }
  .hgNavBtn { font-size: 10px; letter-spacing: 2px; }
}

/* ============================================================
   HUD v2 — the in-game console adopts the hangar's angular language
   ============================================================ */

/* fix: global touch-action:none killed scrolling in panels on mobile */
#adminPanel, #admBody, .overlay, .authCard {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 900px), (max-height: 620px){
  /* superseded by the bottom detail panel below */

}
#upgradeGrid { display: grid; grid-template-columns: repeat(4, 62px); gap: 4px; }
@media (max-width: 900px), (max-height: 620px){
  #upgradeGrid { grid-template-columns: repeat(4, 54px); gap: 3px; }

  /* ---- Hangar: make the spec panel a scrollable sheet with LAUNCH pinned ---- */
  .hgPanel {
    width: 246px; padding: 10px 12px 0;
    display: flex; flex-direction: column;
    max-height: calc(100% - 12px); overflow: hidden;
  }
  .hgPanelName { font-size: 15px; }
  .hgPanelClass { font-size: 8px; }
  .hgDesc { font-size: 9px; line-height: 1.4; }
  .hgStats { font-size: 9px; }
  .hgAbility { padding: 6px 8px; }
  .hgAbilityHead { font-size: 7px; }
  .hgAbilityName { font-size: 10px; }
  .hgAbilityDesc { font-size: 8.5px; line-height: 1.35; }
  /* everything above LAUNCH scrolls; LAUNCH itself never leaves the screen */
  .hgPanel > :not(.hgSelect):not(.hgPerma) { flex: 0 0 auto; }
  .hgPanel { overflow-y: auto; }
  .hgSelect {
    position: sticky; bottom: 0; z-index: 2;
    margin-top: 8px; padding: 12px 0; font-size: 12px;
  }
  .hgPerma { position: sticky; bottom: 0; font-size: 7.5px; padding-bottom: 8px; }
  .hgStage { left: 14px; }
  .hgName { font-size: 26px; }
  .hgClass, .hgTag { font-size: 8px; }
  .hgTop { padding: 6px 10px; }
  .hgTitle { font-size: 10px; }
  .hgNav { padding: 4px; gap: 4px; }
  .hgNavBtn { padding: 7px 12px; font-size: 9px; }
  .hgArrow { width: 34px; height: 34px; font-size: 20px; }

  /* ---- Admin panel: full-screen sheet, real touch targets, scrolls ---- */
  #adminPanel { width: 100%; left: 0; }
  #admHead { padding: 14px; font-size: 13px; }
  #admHead button { padding: 10px 16px; font-size: 15px; }
  #admActions { padding: 10px; gap: 7px; }
  #admActions button { padding: 11px 13px; font-size: 12px; flex: 1 1 auto; min-width: 92px; }
  #admAccount, #admPresets { padding: 12px; }
  #admAccount .presetRow, .presetRow { gap: 7px; margin-bottom: 8px; }
  #admAccount button, .presetRow button { padding: 11px 13px; font-size: 12px; }
  .presetRow input[type="text"], .presetRow select, #admAccount input {
    padding: 11px 12px; font-size: 13px;
  }
  #admBody { padding: 10px 12px 60px; }
  #admBody summary { padding: 13px 12px; font-size: 12px; }
  .admRow { padding: 8px 12px; }
  .admRow span { font-size: 12px; }
  .admRow input[type="number"] { width: 110px; padding: 10px; font-size: 13px; }
  .admRow input[type="checkbox"] { width: 24px; height: 24px; }
}
@media (max-height: 480px){
  /* column flex: justify-content is the vertical axis here */
  #authScreen { justify-content: flex-start; padding: 6px 0; overflow-y: auto; }
  .authCard { padding: 12px 16px 10px; }
  .authBrand { font-size: 15px; letter-spacing: 4px; }
  .authSub { font-size: 8px; margin: 4px 0 8px; }
  .authTabs { margin-bottom: 8px; padding: 2px; }
  .authTab { padding: 6px 0; font-size: 8.5px; }
  .authField { margin-bottom: 6px; }
  .authField > span { font-size: 7.5px; margin-bottom: 2px; }
  .authField input { padding: 7px 10px; font-size: 11px; }
  .authAdv { margin: 0 0 8px; }
  .authAdv summary { font-size: 9px; padding: 2px 0; }
  .authGo { padding: 9px 0; font-size: 10px; }
  #authMsg { min-height: 10px; margin-top: 5px; font-size: 9px; }
  .authGuest { margin-top: 4px; padding: 6px 0; font-size: 10px; }
}
@media (max-width: 900px), (max-height: 620px){
  #upgradeGrid { grid-template-columns: repeat(4, 62px); }
}
@media (max-width: 900px), (max-height: 620px){
  #adminPanel {
    display: block;
    overflow-y: auto; overflow-x: hidden;
    touch-action: pan-y; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #admHead { position: sticky; top: 0; z-index: 5; background: rgba(6, 12, 26, .98); }
  #admBody { flex: none; overflow: visible; max-height: none; padding-bottom: 80px; }
}




/* ============================================================
   Lobby
   ============================================================ */
#lobbyName {
  font-size: 12px; font-weight: 800; letter-spacing: 3px;
  color: #9fd0ff; text-shadow: 0 0 10px rgba(90,180,255,.4);
  margin: 4px 0 10px; text-align: center;
}
#lobbyTeams { display: flex; gap: 10px; }
.lobbyCol {
  flex: 1; min-width: 0;
  border: 1px solid #2c455f; border-radius: 6px;
  background: linear-gradient(180deg, rgba(8,14,24,.9), rgba(5,9,16,.95));
  padding: 8px;
}
.lobbyColHead {
  font-size: 9px; font-weight: 800; letter-spacing: 2.4px;
  padding-bottom: 6px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(88,138,196,.25); text-align: center;
}
.lobbyColHead.blue { color: #7fc4ff; }
.lobbyColHead.red  { color: #ff9a86; }
.lobbyList { min-height: 96px; display: flex; flex-direction: column; gap: 3px; }
.lobP {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: 4px;
  background: rgba(30,50,78,.35);
  font-size: 11px; color: #d5e8fa; letter-spacing: .4px;
}
.lobP.me { background: rgba(45,90,150,.4); box-shadow: inset 0 0 0 1px rgba(127,196,255,.35); }
.lobP em {
  font-style: normal; font-size: 7.5px; font-weight: 800; letter-spacing: 1px;
  padding: 2px 5px; border-radius: 3px;
}
.lobHost { background: rgba(255,200,80,.18); color: #ffd76e; }
.lobAi   { background: rgba(150,170,195,.15); color: #9fb4cc; }
.lobYou  { background: rgba(90,208,255,.2); color: #9fe0ff; }
.lobShip { margin-left: auto; font-size: 9px; color: #7fa8d0; letter-spacing: 1px; }
.lobEmpty { padding: 8px; font-size: 10px; color: #4e6684; text-align: center; }
.lobbySwitch {
  width: 100%; margin-top: 7px; padding: 6px 0;
  font-size: 9px; font-weight: 700; letter-spacing: 1.6px;
}
.lobbyHostRow { margin-top: 10px; }
#lobbyStart {
  flex: 1;
  background: linear-gradient(180deg, #2f7fc4, #1b4c7d);
  border-color: rgba(127,212,255,.5); color: #f2faff;
  font-weight: 800; letter-spacing: 2px;
}
#lobbyHint { margin-top: 8px; font-size: 10px; color: #7f9bbd; text-align: center; }
.mpHint { margin-top: 6px; font-size: 10px; color: #5e7a9c; }


/* ============================================================
   HUD — single coherent pass. Dark glass, clean 1px cyan trim
   with a soft glow, gold accents, block bars, colored numbers.
   One aesthetic, desktop and touch.
   ============================================================ */
:root {
  --h-line: rgba(56, 178, 230, .55);
  --h-line-hi: rgba(120, 214, 255, .8);
  --h-glow: rgba(56, 178, 230, .22);
  --h-glass-a: rgba(8, 16, 27, .93);
  --h-glass-b: rgba(3, 8, 15, .96);
  --h-gold: #eab543;
  --h-text: #d8e9f8;
}
@media (min-width: 901px) and (min-height: 621px){
  #upgradeGrid { grid-template-columns: repeat(4, 62px); gap: 4px; }
}