#game-root{position:relative;max-width:100%;background:#050814;border-radius:18px;overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.35)}#game{display:block;width:100%;height:auto;aspect-ratio:16/9;cursor:crosshair;background:#050814;image-rendering:auto}#overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(circle at 50% 45%,rgba(33,54,92,.55),rgba(5,8,20,.92));color:#eef3ff;text-align:center;padding:24px}#overlay.hide{display:none}#overlay p{margin:0;color:#b9c5da;max-width:560px}.game-panel{min-width:0}.wide-game-shell{align-items:start}
.btn{cursor:pointer}

.hud{position:absolute;inset:0;pointer-events:none;color:#eef4ff;font:600 14px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-shadow:0 1px 1px rgba(0,0,0,.6)}
.hud-panel{position:absolute;background:rgba(2,10,26,.58);border:2px solid rgba(72,150,210,.55);box-shadow:0 0 0 1px rgba(51,122,175,.15) inset;padding:12px 14px;backdrop-filter:blur(2px);min-width:260px}
.hud-left-top{top:14px;left:14px;max-width:34vw}.hud-right-top{top:14px;right:14px;max-width:34vw}.hud-left-bottom{left:14px;bottom:14px;min-width:260px}.hud-minimap{left:22px;bottom:94px;padding:8px;width:196px;height:196px}.minimap-canvas{display:block;width:180px;height:180px}
.hud-crosshair{position:absolute;left:50%;top:50%;width:86px;height:86px;transform:translate(-50%,-50%)}
.hud-crosshair .ring{position:absolute;left:50%;top:50%;width:74px;height:74px;transform:translate(-50%,-50%);border:3px solid rgba(237,192,93,.55);border-radius:50%}.hud-crosshair .h,.hud-crosshair .v{position:absolute;background:rgba(237,192,93,.72)}.hud-crosshair .h{left:12px;right:12px;top:50%;height:2px;transform:translateY(-50%)}.hud-crosshair .v{top:12px;bottom:12px;left:50%;width:2px;transform:translateX(-50%)}
.hud-message{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);padding:8px 14px;border-radius:10px;background:rgba(7,20,38,.72);border:1px solid rgba(103,177,255,.28);opacity:0;transition:opacity .25s ease}
.bar{height:10px;background:rgba(255,255,255,.12);margin:4px 0 10px;border:1px solid rgba(255,255,255,.12)}.bar span{display:block;height:100%;background:#ff726a}.bar.shield span{background:#6cd9ff}.bar.energy span{background:#f0d86c}.bar.heat span{background:#7d8490}
.hud-upgrades{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:auto;background:rgba(2,10,26,.92);border:2px solid rgba(72,150,210,.55);padding:16px 18px;display:flex;flex-direction:column;gap:8px;min-width:280px}.hud-upgrades.hidden{display:none}.hud-upgrades button{cursor:pointer;border:1px solid rgba(103,177,255,.28);background:#0e2440;color:#eef4ff;padding:8px 10px;text-align:left;border-radius:8px}


.hud-scope{position:absolute;inset:0;pointer-events:none}
.hud-scope::before{content:"";position:absolute;inset:0;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);-webkit-mask:radial-gradient(circle at 50% 50%, transparent 0 36vmin, #000 36.6vmin 100%);mask:radial-gradient(circle at 50% 50%, transparent 0 36vmin, #000 36.6vmin 100%);}
.hud-scope.hidden{display:none}
.hud-scope .scope-ring{position:absolute;left:50%;top:50%;width:min(72vh,72vw);height:min(72vh,72vw);transform:translate(-50%,-50%);border:2px solid rgba(210,224,248,.85);border-radius:50%;box-shadow:0 0 0 200vmax rgba(0,0,0,.58)}
.hud-scope .scope-h,.hud-scope .scope-v{position:absolute;background:rgba(210,224,248,.72)}
.hud-scope .scope-h{left:50%;top:50%;width:min(72vh,72vw);height:2px;transform:translate(-50%,-50%)}
.hud-scope .scope-v{left:50%;top:50%;width:2px;height:min(72vh,72vw);transform:translate(-50%,-50%)}
.hud-scope .scope-dot{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:#f4d66a;transform:translate(-50%,-50%);box-shadow:0 0 10px rgba(244,214,106,.8)}
.scope-readout{position:absolute;left:50%;top:calc(50% - min(36vh,36vw) - 34px);transform:translateX(-50%);padding:5px 12px;border:1px solid rgba(180,205,245,.35);background:rgba(3,10,22,.66);color:#eef4ff;border-radius:999px;white-space:nowrap}

.upgrade-title{font-size:20px;color:#9de6ff;margin-bottom:6px;letter-spacing:.06em}
.upgrade-subtitle{color:#cdd9e8;margin-bottom:12px;font-size:13px}
.upgrade-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.upgrade-grid section{border:1px solid rgba(103,177,255,.28);background:rgba(255,255,255,.04);padding:10px;border-radius:8px}
.upgrade-grid section strong{display:block;color:#9de6ff;margin-bottom:5px}
.upgrade-options{display:grid;grid-template-columns:1fr;gap:8px}
.upgrade-option{display:grid;grid-template-columns:34px 1.15fr 1fr 1.25fr .75fr 1.3fr;align-items:center;gap:8px;width:100%;text-align:left}
.upgrade-option:disabled{opacity:.52;cursor:not-allowed}
.upgrade-key{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#163b61;color:#fff}
.upgrade-name{font-weight:800;color:#fff}
.upgrade-stat{color:#a8c7dc}
.upgrade-change{color:#e5f6ff}
.upgrade-cost{color:#ffd986}
.upgrade-tip{color:#b8c4d0;font-size:12px}
@media (max-width: 1100px){.upgrade-grid{grid-template-columns:repeat(2,minmax(150px,1fr))}.upgrade-option{grid-template-columns:28px 1fr}.upgrade-option span{display:block}}

.hud-version{position:absolute;right:12px;bottom:8px;color:rgba(205,225,245,.72);font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-shadow:0 1px 2px rgba(0,0,0,.75);pointer-events:none}

.upgrade-option.shop-upgrade{border-color:rgba(255,210,110,.42);background:rgba(68,52,18,.32)}
.upgrade-option.shop-upgrade .upgrade-key{background:#6b4b18}

.hud.prestart .hud-panel,
.hud.prestart .hud-crosshair,
.hud.prestart .hud-scope,
.hud.prestart .hud-message,
.hud.prestart .hud-version {
  display: none !important;
}

.grouped-upgrades {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
  align-items: start;
}
.upgrade-group-section {
  border: 1px solid rgba(110, 180, 255, 0.25);
  background: rgba(3, 11, 18, 0.42);
  border-radius: 10px;
  padding: 10px;
}
.upgrade-group-section h3 {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: #9fd6ff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.upgrade-group-list {
  display: grid;
  gap: 8px;
}
.upgrade-key {
  display: none !important;
}
@media (max-width: 900px) {
  .grouped-upgrades {
    grid-template-columns: 1fr;
  }
}

/* v85 upgrade layout fix: compact vertical cards inside grouped columns */
.upgrade-options.grouped-upgrades {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.upgrade-group-section {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.upgrade-group-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-width: 0;
}
.upgrade-group-section .upgrade-option {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: auto;
  gap: 4px !important;
  align-items: start !important;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  padding: 10px 10px !important;
  line-height: 1.22;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
  box-sizing: border-box;
}
.upgrade-group-section .upgrade-option span {
  display: block !important;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
}
.upgrade-group-section .upgrade-name {
  font-size: 13px;
  line-height: 1.18;
}
.upgrade-group-section .upgrade-stat,
.upgrade-group-section .upgrade-change,
.upgrade-group-section .upgrade-cost,
.upgrade-group-section .upgrade-tip {
  font-size: 11px;
  line-height: 1.2;
}
.upgrade-group-section .upgrade-cost {
  font-weight: 800;
}
.upgrade-key {
  display: none !important;
}
@media (max-width: 1200px) {
  .upgrade-options.grouped-upgrades {
    grid-template-columns: 1fr !important;
  }
}

.hud-crosshair .beam-hud-flash{
  position:absolute;
  left:50%;
  top:50%;
  width:132px;
  height:132px;
  margin-left:-66px;
  margin-top:-66px;
  border-radius:50%;
  border:2px solid rgba(125,220,255,.88);
  box-shadow:0 0 18px rgba(110,200,255,.78), inset 0 0 22px rgba(120,220,255,.45);
  pointer-events:none;
}
.hud-crosshair .beam-hud-flash::before,
.hud-crosshair .beam-hud-flash::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:220px;
  height:3px;
  margin-left:-110px;
  margin-top:-1.5px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  box-shadow:0 0 12px rgba(120,220,255,.9);
}
.hud-crosshair .beam-hud-flash::after{ transform:rotate(90deg); }

/* v3.0012: directional hit indicator, top=front, bottom=back; single red outward triangle */
.hud-crosshair .hit-indicator{
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
  pointer-events:none;
}
.hud-crosshair .hit-indicator::before{
  content:"";
  position:absolute;
  left:-13px;
  top:-58px;
  width:0;
  height:0;
  border-left:13px solid transparent;
  border-right:13px solid transparent;
  border-bottom:26px solid rgba(255,36,28,.94);
  filter:drop-shadow(0 0 9px rgba(255,35,25,.82));
}
.hud-crosshair .hit-indicator::after{
  content:none !important;
}


/* v3.0015: browser-viewport-fitted play mode, not monitor/screen-sized */
html.titan-play-maximized,
body.titan-play-maximized{
  width:var(--titan-vw,100dvw) !important;
  height:var(--titan-vh,100dvh) !important;
  margin:0 !important;
  overflow:hidden !important;
  background:#02050b !important;
}
#game-root.play-maximized{
  position:fixed !important;
  left:0 !important;
  top:0 !important;
  z-index:2147483000 !important;
  width:var(--titan-vw,100dvw) !important;
  height:var(--titan-vh,100dvh) !important;
  max-width:var(--titan-vw,100dvw) !important;
  max-height:var(--titan-vh,100dvh) !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  overflow:hidden !important;
  background:#02050b !important;
  box-shadow:none !important;
}
#game-root.play-maximized #game{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:var(--titan-vw,100dvw) !important;
  height:var(--titan-vh,100dvh) !important;
  max-width:var(--titan-vw,100dvw) !important;
  max-height:var(--titan-vh,100dvh) !important;
  aspect-ratio:auto !important;
  display:block !important;
}
#game-root.play-maximized .hud,
#game-root.play-maximized #overlay{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:var(--titan-vw,100dvw) !important;
  height:var(--titan-vh,100dvh) !important;
}

/* v3.0016 upgrade bay layout: mech + weapons upper row, trading/support lower row */
.hud-upgrades{
  width:min(980px, calc(var(--titan-vw, 100dvw) - 34px)) !important;
  max-height:calc(var(--titan-vh, 100dvh) - 34px) !important;
  overflow:auto !important;
  padding:12px 14px !important;
}
.hud-upgrades .upgrade-title{
  font-size:18px;
  margin-bottom:2px;
}
.hud-upgrades .upgrade-subtitle{
  margin-bottom:8px;
}
.hud-upgrades .upgrade-grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:8px !important;
  margin-bottom:10px !important;
}
.hud-upgrades .upgrade-grid section{
  padding:8px !important;
  font-size:12px !important;
}
.upgrade-options.grouped-upgrades{
  grid-template-columns:1fr 1fr !important;
  grid-template-areas:
    "mech weapon"
    "shop shop" !important;
  gap:10px !important;
}
.upgrade-group-mech{ grid-area:mech; }
.upgrade-group-weapon{ grid-area:weapon; }
.upgrade-group-shop{
  grid-area:shop;
  border-color:rgba(255,210,110,.46) !important;
  background:rgba(34,27,12,.40) !important;
}
.upgrade-group-shop .upgrade-group-list{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.upgrade-group-section{
  padding:9px !important;
}
.upgrade-group-section h3{
  margin-bottom:7px !important;
}
.upgrade-group-section .upgrade-option{
  padding:8px 9px !important;
  gap:3px !important;
}
.upgrade-group-section .upgrade-name{ font-size:12px !important; }
.upgrade-group-section .upgrade-stat,
.upgrade-group-section .upgrade-change,
.upgrade-group-section .upgrade-cost,
.upgrade-group-section .upgrade-tip{
  font-size:10.5px !important;
}
@media (max-width: 880px) {
  .upgrade-options.grouped-upgrades{
    grid-template-columns:1fr !important;
    grid-template-areas:"mech" "weapon" "shop" !important;
  }
  .upgrade-group-shop .upgrade-group-list{
    grid-template-columns:1fr !important;
  }
  .hud-upgrades .upgrade-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* v3.0018 fixed weapons/target HUD: prevents panel width/height flapping */
.hud-right-top{
  width:430px !important;
  min-width:430px !important;
  max-width:430px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
#hudWeapons{
  white-space:normal;
}
#hudWeapons > div{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.target-box{
  box-sizing:border-box;
  width:100%;
  min-height:35px;
  margin:3px 0 4px 0;
  padding:2px 0 1px 0;
  overflow:hidden;
}
.target-main{
  display:grid;
  grid-template-columns:54px minmax(76px, 1fr) 108px 68px;
  align-items:center;
  gap:6px;
  min-width:0;
}
.target-label{
  color:#d9e6f8;
  font-weight:900;
}
.target-name{
  color:#f2f7ff;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:900;
}
.target-hpbar{
  display:block;
  height:8px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  overflow:hidden;
}
.target-hpbar span{
  display:block;
  height:100%;
  background:linear-gradient(90deg, #ff3c35, #ffd15a);
  box-shadow:0 0 6px rgba(255,90,45,.52);
}
.target-hptext{
  text-align:right;
  font-size:12px;
  color:#f5e5b8;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.target-meta{
  margin-top:1px;
  padding-left:60px;
  color:#cdd9e8;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.target-box.no-target .target-hpbar span{
  width:0 !important;
}
.target-box.no-target .target-name,
.target-box.no-target .target-hptext,
.target-box.no-target .target-meta{
  color:#c7d3e3;
}
@media (max-width: 980px) {
  .hud-right-top{
    width:390px !important;
    min-width:390px !important;
    max-width:390px !important;
  }
  .target-main{
    grid-template-columns:50px minmax(68px, 1fr) 88px 56px;
    gap:5px;
  }
  .target-meta{
    padding-left:55px;
  }
}

/* v3.0020 browser-safe atmosphere/depth and player hit feedback */
.hud-atmosphere{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(to bottom, rgba(10,22,42,0) 0%, rgba(25,50,72,.07) 43%, rgba(95,135,150,.12) 55%, rgba(6,14,24,.18) 100%),
    radial-gradient(ellipse at 50% 58%, rgba(180,210,205,.08), rgba(10,20,38,0) 46%);
  mix-blend-mode:screen;
  opacity:.72;
}
.hud-damage{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
  opacity:0;
  transition:opacity .08s linear;
}
.hud-damage.shield{
  background:
    radial-gradient(circle at 50% 50%, rgba(120,220,255,0) 42%, rgba(75,205,255,.12) 75%, rgba(30,145,255,.20) 100%),
    linear-gradient(90deg, rgba(95,220,255,.08), transparent 16%, transparent 84%, rgba(95,220,255,.08));
}
.hud-damage.hull{
  background:
    radial-gradient(circle at 50% 50%, rgba(255,70,42,0) 38%, rgba(255,58,36,.13) 72%, rgba(160,18,12,.30) 100%),
    linear-gradient(90deg, rgba(255,70,42,.11), transparent 18%, transparent 82%, rgba(255,70,42,.11));
}
.hud-panel,.hud-minimap,.hud-crosshair,.hud-scope,.hud-message,.hud-upgrades,.hud-version{z-index:2}
.hud-scope{z-index:5}

/* v3.0025 save/load controls */
.overlay-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
#saveGameBtn.disabled,
#saveGameBtn:disabled{
  opacity:.46;
  cursor:not-allowed;
}
.save-file-input{
  display:none !important;
}

/* v3.0026 stable overlay controls */
#game-root #overlay{
  z-index:1000 !important;
  pointer-events:auto !important;
}
#overlay:not(.hide) ~ .hud .hud-crosshair,
#overlay:not(.hide) ~ .hud #scopeOverlay{
  display:none !important;
}
.overlay-actions{
  display:grid;
  grid-template-columns:repeat(4,minmax(112px,1fr));
  gap:10px;
  width:min(620px,92vw);
}
.overlay-actions .btn{
  text-align:center;
  white-space:nowrap;
}
.overlay-actions .btn.disabled,
.overlay-actions .btn:disabled{
  opacity:.46;
  cursor:not-allowed;
}
@media (max-width:640px){
  .overlay-actions{grid-template-columns:repeat(2,minmax(112px,1fr));}
}

/* v5.0001 story-backed overlay and expedition UI */
#overlay{
  overflow:hidden;
}
#overlay .story-scroll{
  position:absolute;
  inset:0;
  padding:44px max(8vw,28px);
  color:rgba(210,235,255,.18);
  text-align:center;
  white-space:pre-line;
  font-family:Georgia, 'Times New Roman', serif;
  font-size:clamp(14px,1.6vw,22px);
  line-height:1.55;
  z-index:0;
  animation:titan-story-scroll 40s linear infinite;
  pointer-events:none;
}
#overlay .overlay-actions,
#overlay p{
  position:relative;
  z-index:2;
}
@keyframes titan-story-scroll{
  0%{transform:translateY(33vh);}
  100%{transform:translateY(-72%);}
}
.upgrade-title::after{
  content:' · SAFE ZONE';
  color:#8be8ff;
}

/* v5.0003 hangar/docking polish */
#upgradePanel.docking-scene{
  background:
    radial-gradient(circle at 50% 18%, rgba(120,230,255,.16), transparent 34%),
    linear-gradient(180deg, rgba(9,16,28,.98), rgba(5,9,18,.98) 52%, rgba(10,18,26,.98));
  border:1px solid rgba(139,232,255,.42);
  box-shadow:0 0 0 1px rgba(139,232,255,.18) inset, 0 22px 80px rgba(0,0,0,.72);
}
#upgradePanel.docking-scene::before{
  content:'';
  position:absolute;
  inset:18px 28px auto 28px;
  height:150px;
  border-radius:20px;
  background:
    linear-gradient(90deg, transparent, rgba(139,232,255,.16), transparent),
    repeating-linear-gradient(90deg, rgba(139,232,255,.10) 0 2px, transparent 2px 36px);
  opacity:.7;
  pointer-events:none;
}
#upgradePanel.docking-scene .upgrade-title,
#upgradePanel.docking-scene .upgrade-subtitle,
#upgradePanel.docking-scene .upgrade-grid,
#upgradePanel.docking-scene .upgrade-options{
  position:relative;
  z-index:1;
}
#overlay .story-scroll{
  animation:titan-story-scroll 40s linear infinite;
  color:rgba(220,238,255,.20);
}

/* v5.0004 docking, hangar collision, target bar */
#overlay .story-scroll{
  animation:titan-story-scroll 40s linear infinite !important;
}
.hud.hangar-docked .panel,
.hud.hangar-docked .hud-crosshair,
.hud.hangar-docked #scopeOverlay,
.hud.hangar-docked #hudMessage{
  display:none !important;
}
.crosshair-target-hp{
  position:absolute;
  left:50%;
  top:calc(50% - 62px);
  transform:translateX(-50%);
  width:210px;
  height:24px;
  border:1px solid rgba(255,211,106,.82);
  background:rgba(5,9,18,.78);
  box-shadow:0 0 12px rgba(255,140,60,.26);
  color:#f8e8b4;
  font:700 10px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  pointer-events:none;
  overflow:hidden;
}
.crosshair-target-hp b{
  position:absolute;
  left:0;
  bottom:0;
  height:5px;
  background:linear-gradient(90deg,#ff4c4c,#ffd36a);
}
.crosshair-target-hp .ct-name{
  position:absolute;
  left:8px;
  top:4px;
}
.crosshair-target-hp em{
  position:absolute;
  right:8px;
  top:4px;
  font-style:normal;
  color:#fff1c2;
}

#upgradePanel.docking-scene{
  overflow:auto;
}
#upgradePanel .dock-visual{
  position:relative;
  height:260px;
  margin:16px 0 18px 0;
  border:1px solid rgba(139,232,255,.28);
  border-radius:18px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(120,230,255,.16), transparent 32%),
    linear-gradient(180deg,#101a25 0%,#08101a 52%,#070b11 100%);
  box-shadow:inset 0 0 60px rgba(111,210,255,.08);
}
.dock-wall{
  position:absolute;
  inset:0 0 56px 0;
  background:
    repeating-linear-gradient(90deg,rgba(139,232,255,.07) 0 2px,transparent 2px 52px),
    linear-gradient(180deg,rgba(255,255,255,.05),transparent);
}
.dock-floor{
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:-28px;
  height:110px;
  background:
    repeating-linear-gradient(90deg,rgba(139,232,255,.11) 0 3px,transparent 3px 72px),
    linear-gradient(180deg,#1c2d38,#0d151d);
  transform:perspective(260px) rotateX(55deg);
  transform-origin:top center;
}
.dock-mech{
  position:absolute;
  left:50%;
  top:36px;
  width:138px;
  height:186px;
  transform:translateX(-50%);
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.55));
}
.dock-mech span{position:absolute;display:block;border-radius:6px;background:#6e7881;border:1px solid rgba(190,220,235,.25);}
.dock-head{left:49px;top:0;width:40px;height:30px;background:#93a0a9!important;}
.dock-torso{left:33px;top:34px;width:72px;height:70px;background:#586570!important;}
.dock-arm-l{left:3px;top:48px;width:28px;height:82px;transform:rotate(8deg);background:#4e5963!important;}
.dock-arm-r{right:3px;top:48px;width:28px;height:82px;transform:rotate(-8deg);background:#4e5963!important;}
.dock-leg-l{left:35px;top:104px;width:28px;height:78px;transform:rotate(3deg);background:#48525c!important;}
.dock-leg-r{right:35px;top:104px;width:28px;height:78px;transform:rotate(-3deg);background:#48525c!important;}
.dock-arm{
  position:absolute;
  top:48px;
  width:180px;
  height:8px;
  background:#5b7382;
  box-shadow:0 0 12px rgba(139,232,255,.20);
}
.dock-arm-left{left:calc(50% - 250px);transform:rotate(9deg);}
.dock-arm-right{right:calc(50% - 250px);transform:rotate(-9deg);}
.dock-spark{
  width:5px!important;height:5px!important;border-radius:50%!important;border:0!important;background:#ffd36a!important;
  box-shadow:0 0 12px #ffd36a,0 0 22px #ff7a38;
  opacity:0;
  animation:dock-spark 2.4s infinite;
}
.dock-spark.s1{left:30px;top:58px;animation-delay:.1s;}
.dock-spark.s2{right:26px;top:86px;animation-delay:.8s;}
.dock-spark.s3{left:62px;top:122px;animation-delay:1.4s;}
.dock-spark.s4{right:45px;top:38px;animation-delay:2.0s;}
@keyframes dock-spark{
  0%,78%,100%{opacity:0;transform:scale(.4) translate(0,0);}
  82%{opacity:1;transform:scale(1.35) translate(4px,-5px);}
  88%{opacity:.65;transform:scale(.8) translate(-5px,6px);}
}

/* v5.0006 transparent hangar UI + doctrine side selector */
#upgradePanel.docking-scene{
  background:
    radial-gradient(circle at 50% 18%, rgba(120,230,255,.10), transparent 35%),
    rgba(4, 9, 16, .46) !important;
  border-color:rgba(139,232,255,.34) !important;
  box-shadow:0 0 0 1px rgba(139,232,255,.14) inset, 0 22px 80px rgba(0,0,0,.48) !important;
  backdrop-filter:blur(1.5px);
}
#upgradePanel.docking-scene::before{
  opacity:.24 !important;
}
#upgradePanel.docking-scene .upgrade-title,
#upgradePanel.docking-scene .upgrade-subtitle{
  background:rgba(2, 8, 14, .38);
  border:1px solid rgba(139,232,255,.16);
  border-radius:10px;
  padding:8px 10px;
}
#upgradePanel.docking-scene .dock-visual{
  background:
    radial-gradient(circle at 50% 35%, rgba(120,230,255,.09), transparent 34%),
    rgba(7,14,24,.30) !important;
  border-color:rgba(139,232,255,.20) !important;
}
#upgradePanel.docking-scene .upgrade-grid section,
#upgradePanel.docking-scene .upgrade-group-section,
#upgradePanel.docking-scene .upgrade-option,
#upgradePanel.docking-scene .doctrine-panel,
#upgradePanel.docking-scene .doctrine-details,
#upgradePanel.docking-scene .doctrine-choice{
  background:rgba(3, 10, 18, .34) !important;
  border-color:rgba(139,232,255,.20) !important;
  box-shadow:none !important;
}
#upgradePanel.docking-scene .upgrade-option:hover,
#upgradePanel.docking-scene .doctrine-choice:hover{
  background:rgba(12, 34, 52, .48) !important;
}
#upgradePanel.docking-scene .upgrade-option:disabled{
  background:rgba(3, 10, 18, .20) !important;
}

.garage-layout{
  display:grid;
  grid-template-columns:minmax(250px, 310px) minmax(0, 1fr);
  gap:14px;
  align-items:start;
}
.garage-main{
  min-width:0;
}
.doctrine-panel{
  border:1px solid rgba(139,232,255,.24);
  border-radius:12px;
  padding:12px;
  color:#d9f3ff;
  position:sticky;
  top:10px;
}
.doctrine-panel h3{
  margin:0 0 8px 0;
  color:#9de6ff;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.doctrine-summary,
.doctrine-role{
  margin:5px 0;
  font-size:12px;
  color:#c9ddeb;
}
.doctrine-role{
  color:#ffd986;
}
.doctrine-list{
  display:grid;
  gap:7px;
  margin:10px 0;
}
.doctrine-choice{
  display:grid;
  grid-template-columns:1fr;
  gap:3px;
  width:100%;
  padding:8px 9px;
  text-align:left;
  border:1px solid rgba(139,232,255,.20);
  border-radius:9px;
  color:#e9f8ff;
  cursor:pointer;
}
.doctrine-choice span{
  font-weight:800;
  font-size:12px;
}
.doctrine-choice em{
  font-style:normal;
  font-size:10.5px;
  color:#a9bfd0;
  line-height:1.18;
}
.doctrine-choice.selected{
  border-color:rgba(255,211,106,.75) !important;
  background:rgba(80, 57, 17, .42) !important;
}
.doctrine-choice.selected span{
  color:#ffe0a0;
}
.doctrine-details{
  border:1px solid rgba(255,211,106,.22);
  border-radius:10px;
  padding:10px;
  font-size:11px;
}
.doctrine-details strong{
  color:#ffe0a0;
}
.doctrine-details p{
  margin:5px 0;
  color:#dcebf5;
}
.doctrine-details ul{
  margin:6px 0 0 16px;
  padding:0;
}
.doctrine-details li{
  margin:4px 0;
  color:#c9ddeb;
}
#upgradePanel.docking-scene .upgrade-options.grouped-upgrades{
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
}
@media (max-width: 1180px){
  .garage-layout{grid-template-columns:1fr;}
  .doctrine-panel{position:relative;top:auto;}
  #upgradePanel.docking-scene .upgrade-options.grouped-upgrades{grid-template-columns:1fr !important;}
}

/* v5.0007 docking visibility and tactical info */
.hud-right-bottom{
  right:14px;
  bottom:14px;
  width:min(360px, 32vw);
  min-width:280px;
  max-width:360px;
}
#hudInfo strong{
  display:block;
  color:#9de6ff;
  margin-bottom:6px;
  letter-spacing:.06em;
}
#hudInfo div{
  margin:4px 0;
  line-height:1.22;
}
@media (max-width: 1100px){
  .hud-right-bottom{display:none;}
}

#upgradePanel.docking-scene{
  background:
    radial-gradient(circle at 50% 18%, rgba(120,230,255,.06), transparent 36%),
    rgba(3, 8, 14, .28) !important;
  border-color:rgba(139,232,255,.24) !important;
  box-shadow:0 0 0 1px rgba(139,232,255,.10) inset, 0 22px 80px rgba(0,0,0,.36) !important;
  backdrop-filter:blur(.6px) !important;
}
#upgradePanel.docking-scene::before{
  opacity:.12 !important;
}
#upgradePanel.docking-scene .upgrade-title,
#upgradePanel.docking-scene .upgrade-subtitle{
  background:rgba(2, 8, 14, .24) !important;
  border-color:rgba(139,232,255,.12) !important;
}
#upgradePanel.docking-scene .dock-visual{
  background:
    radial-gradient(circle at 50% 35%, rgba(120,230,255,.04), transparent 34%),
    rgba(7,14,24,.16) !important;
  border-color:rgba(139,232,255,.14) !important;
}
#upgradePanel.docking-scene .upgrade-grid section,
#upgradePanel.docking-scene .upgrade-group-section,
#upgradePanel.docking-scene .upgrade-option,
#upgradePanel.docking-scene .doctrine-panel,
#upgradePanel.docking-scene .doctrine-details,
#upgradePanel.docking-scene .doctrine-choice{
  background:rgba(3, 10, 18, .20) !important;
  border-color:rgba(139,232,255,.16) !important;
}
#upgradePanel.docking-scene .upgrade-option:hover,
#upgradePanel.docking-scene .doctrine-choice:hover{
  background:rgba(12, 34, 52, .34) !important;
}
#upgradePanel.docking-scene .upgrade-option:disabled{
  background:rgba(3, 10, 18, .12) !important;
}
#upgradePanel.docking-scene .dock-mech{
  top:8px !important;
  width:170px !important;
  height:232px !important;
  filter:drop-shadow(0 0 14px rgba(155,230,255,.45)) drop-shadow(0 18px 22px rgba(0,0,0,.50)) !important;
}
#upgradePanel.docking-scene .dock-spark{
  width:2px!important;
  height:2px!important;
  box-shadow:0 0 6px #ffd36a,0 0 9px #ff7a38!important;
  animation:dock-spark-soft 6.5s infinite!important;
}
#upgradePanel.docking-scene .dock-spark.s1{animation-delay:.6s!important;}
#upgradePanel.docking-scene .dock-spark.s2{animation-delay:2.2s!important;}
#upgradePanel.docking-scene .dock-spark.s3{animation-delay:4.1s!important;}
#upgradePanel.docking-scene .dock-spark.s4{animation-delay:5.4s!important;}
@keyframes dock-spark-soft{
  0%,92%,100%{opacity:0;transform:scale(.35) translate(0,0);}
  94%{opacity:.8;transform:scale(.8) translate(2px,-2px);}
  96%{opacity:.35;transform:scale(.55) translate(-2px,2px);}
}

/* v5.0008 tabbed garage and colored docked mech overlay */
#upgradePanel.docking-scene .upgrade-tabs{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:8px;
  margin:10px 0 8px 0;
}
#upgradePanel.docking-scene .upgrade-tab{
  border:1px solid rgba(139,232,255,.22);
  background:rgba(3,10,18,.22);
  color:#d9f3ff;
  border-radius:10px;
  padding:9px 10px;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
}
#upgradePanel.docking-scene .upgrade-tab.active{
  border-color:rgba(255,211,106,.78);
  background:rgba(80,57,17,.42);
  color:#ffe0a0;
}
#upgradePanel.docking-scene .upgrade-tab-help{
  border:1px solid rgba(139,232,255,.16);
  background:rgba(2,8,14,.20);
  border-radius:10px;
  padding:8px 10px;
  margin-bottom:10px;
  color:#b9d4e5;
  font-size:11.5px;
}
#upgradePanel.docking-scene .upgrade-options.tabbed-upgrades{
  display:block !important;
}
#upgradePanel.docking-scene .upgrade-tab-section{
  margin:0;
}
#upgradePanel.docking-scene .upgrade-tab-section .upgrade-group-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:9px;
}
#upgradePanel.docking-scene .upgrade-empty{
  color:#9fb7c8;
  padding:12px;
  border:1px dashed rgba(139,232,255,.18);
  border-radius:10px;
}
#upgradePanel.docking-scene .compact-status{
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:8px !important;
}
#upgradePanel.docking-scene .dock-mech .dock-head{background:#d7e8f4!important;}
#upgradePanel.docking-scene .dock-mech .dock-torso{background:#2f73b8!important;}
#upgradePanel.docking-scene .dock-mech .dock-arm-l,
#upgradePanel.docking-scene .dock-mech .dock-arm-r{background:#d98232!important;}
#upgradePanel.docking-scene .dock-mech .dock-leg-l,
#upgradePanel.docking-scene .dock-mech .dock-leg-r{background:#516271!important;}
@media (max-width: 1180px){
  #upgradePanel.docking-scene .upgrade-tab-section .upgrade-group-list{grid-template-columns:1fr;}
  #upgradePanel.docking-scene .compact-status{grid-template-columns:1fr 1fr !important;}
}

/* v5.0009 dock layout, transparency, and no-pop event discipline */
#upgradePanel.docking-scene{
  padding-top:12px !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(110,210,255,.035), transparent 48%),
    rgba(3,8,14,.16) !important;
  backdrop-filter:none !important;
}
#upgradePanel.docking-scene .dock-visual{
  position:absolute !important;
  inset:72px 16px 16px 16px !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  opacity:.08 !important;
  z-index:0 !important;
  pointer-events:none !important;
}
#upgradePanel.docking-scene .upgrade-title,
#upgradePanel.docking-scene .upgrade-subtitle{
  position:relative !important;
  z-index:3 !important;
  background:rgba(2,8,14,.18) !important;
  border-color:rgba(139,232,255,.10) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.75);
}
#upgradePanel.docking-scene .garage-layout{
  position:relative !important;
  z-index:2 !important;
  margin-top:10px !important;
  align-items:start !important;
}
#upgradePanel.docking-scene .upgrade-grid section,
#upgradePanel.docking-scene .upgrade-group-section,
#upgradePanel.docking-scene .upgrade-option,
#upgradePanel.docking-scene .doctrine-panel,
#upgradePanel.docking-scene .doctrine-details,
#upgradePanel.docking-scene .doctrine-choice,
#upgradePanel.docking-scene .upgrade-tab-help,
#upgradePanel.docking-scene .upgrade-tab{
  background:rgba(3,10,18,.13) !important;
  border-color:rgba(139,232,255,.14) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.72);
}
#upgradePanel.docking-scene .upgrade-option:hover,
#upgradePanel.docking-scene .doctrine-choice:hover,
#upgradePanel.docking-scene .upgrade-tab:hover{
  background:rgba(12,34,52,.26) !important;
}
#upgradePanel.docking-scene .upgrade-option:disabled{
  background:rgba(3,10,18,.08) !important;
}
#upgradePanel.docking-scene .upgrade-tab.active,
#upgradePanel.docking-scene .doctrine-choice.selected{
  background:rgba(90,62,16,.28) !important;
  border-color:rgba(255,211,106,.68) !important;
}
#upgradePanel.docking-scene .compact-status{
  margin-top:0 !important;
}

/* v5.0011 performance HUD/debug */
#hudInfo .perf-debug{
  margin-top:6px;
  padding-top:5px;
  border-top:1px solid rgba(139,232,255,.24);
  color:#9de6ff;
  font-size:10.5px;
  line-height:1.18;
}


/* v5.0033 performance/tracking screen */
.hud-perf-panel{
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:min(340px, 31vw);
  min-width:285px;
  max-width:340px;
  padding:10px 12px;
  background:rgba(2,10,26,.66);
}
.hud-perf-panel.hidden{display:none !important}
#hudPerfGraph{
  display:block;
  width:100%;
  height:96px;
  border:1px solid rgba(103,177,255,.22);
  background:rgba(0,0,0,.22);
  margin-bottom:8px;
}
#hudPerfText strong{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#9de6ff;
  margin-bottom:6px;
  letter-spacing:.06em;
}
#hudPerfText strong span{
  color:#ffd36a;
  font-size:11px;
  letter-spacing:0;
}
#hudPerfText div{
  margin:3px 0;
  line-height:1.18;
  font-size:12px;
  color:#d7ecff;
}
@media (max-width: 1200px){
  .hud-perf-panel{display:none !important;}
}