:root {
  color-scheme: dark;
  --bg: #0b0f10;
  --panel: #151a1d;
  --panel-2: #1d2428;
  --line: #34505a;
  --text: #e7edf0;
  --muted: #96a7ad;
  --blue: #49a6c8;
  --green: #9ac95f;
  --yellow: #e9c94a;
  --red: #df654f;
  --purple: #aa73d7;
  --missile: #00aa9d;
  --ams: #85b82f;
  --compare-mech-column-width: 8.15rem;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

#app {
  height: 100vh;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.mechlab-workspace {
  -webkit-user-select: none;
  user-select: none;
}

.mechlab-workspace input,
.mechlab-workspace textarea,
.mechlab-workspace [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 1px solid var(--line);
  background: #263139;
  color: var(--text);
  padding: 0.48rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
}

button:hover,
button.active {
  border-color: var(--blue);
  background: #214557;
}

button.danger {
  border-color: #754036;
  background: #38211e;
}

input,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #0f1518;
  color: var(--text);
  padding: 0.5rem 0.6rem;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 1.15rem;
  text-transform: uppercase;
}

h2 {
  font-size: 1.35rem;
}

h3 {
  color: var(--blue);
  font-size: 0.9rem;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.muted {
  color: var(--muted);
  font-size: 0.88rem;
}

.donate-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.2rem;
  margin-left: auto;
  margin-bottom: 0.45rem;
  padding: 0.48rem 0.75rem;
  border: 1px solid #816235;
  border-radius: 4px;
  background: #392b16;
  color: #f7e4ad;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.donate-link:hover,
.donate-link:focus-visible {
  border-color: var(--yellow);
  background: #503b1b;
  color: #fff1c7;
}

.help-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  min-width: 2.2rem;
  min-height: 2.2rem;
  margin-bottom: 0.45rem;
  padding: 0;
  border: 1px solid #385f70;
  border-radius: 4px;
  background: #17313c;
  color: #d8f2fc;
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
}

.help-link:hover,
.help-link:focus-visible {
  border-color: var(--blue);
  background: #214b5d;
  color: #effbff;
}

body.donate-open,
body.help-open {
  overflow: hidden;
}

.donate-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 1rem;
  background:
    radial-gradient(circle at 50% 35%, #4a361b55, transparent 32rem),
    #020506e8;
  backdrop-filter: blur(5px);
}

.donate-overlay[hidden] {
  display: none;
}

.donate-dialog {
  display: grid;
  width: min(29rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  gap: 0.85rem;
  overflow: auto;
  padding: 1.1rem;
  border: 1px solid #8f6b30;
  border-radius: 10px;
  background: linear-gradient(145deg, #171b1d, #0d1214 65%);
  box-shadow: 0 1.5rem 5rem #000e, inset 0 1px #ffe5a91a;
}

.donate-dialog header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.donate-dialog-eyebrow {
  margin-bottom: 0.2rem;
  color: #d9b75c;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.donate-dialog h2 {
  color: #fff0bd;
  font-size: 1.35rem;
}

.donate-dialog-close {
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-color: #66522e;
  background: #251f15;
  color: #f3dfab;
  font-size: 1.35rem;
  line-height: 1;
}

.donate-qr-frame {
  display: grid;
  place-items: center;
  min-height: 15rem;
  padding: 0.75rem;
  border: 1px solid #3f4c51;
  border-radius: 8px;
  background: #050708;
}

.donate-qr-frame img {
  display: block;
  width: min(100%, 23rem);
  height: auto;
  border-radius: 3px;
}

.donate-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}

.donate-dialog-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.45rem;
  padding: 0.48rem 0.8rem;
  border: 1px solid #297d6a;
  border-radius: 4px;
  background: #174a40;
  color: #dcfff7;
  font-weight: 800;
  text-decoration: none;
}

.donate-dialog-actions a:hover,
.donate-dialog-actions a:focus-visible {
  border-color: #55d7ba;
  background: #20695a;
}

.help-overlay {
  background:
    radial-gradient(circle at 50% 35%, #173f5155, transparent 32rem),
    #020506e8;
}

.help-dialog {
  width: min(36rem, calc(100vw - 2rem));
  border-color: #386d82;
  box-shadow: 0 1.5rem 5rem #000e, inset 0 1px #bdeeff17;
}

.help-dialog > .donate-dialog-close {
  justify-self: end;
}

.help-section {
  display: grid;
  gap: 0.45rem;
  padding: 0.85rem;
  border: 1px solid #294750;
  border-radius: 6px;
  background: #0a1215;
}

.help-section h3,
.help-section h4,
.help-section p,
.help-section ul,
.help-section dl {
  margin: 0;
}

.help-section h3 {
  color: #7ed5f2;
  font-size: 0.82rem;
}

.help-section h4 {
  color: #d7e8ed;
  font-size: 0.82rem;
}

.help-section ul {
  display: grid;
  gap: 0.3rem;
  padding-left: 1.15rem;
  color: #c6d2d6;
  font-size: 0.84rem;
}

.help-terms {
  display: grid;
  gap: 0.55rem;
}

.help-terms > div {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.help-terms dt {
  flex: none;
  color: #f2ce71;
  font-size: 0.78rem;
  font-weight: 900;
}

.help-term-separator {
  flex: none;
  color: #71858c;
  font-size: 0.8rem;
}

.help-terms dd,
.help-section p {
  min-width: 0;
  color: #bdcdd2;
  font-size: 0.8rem;
  line-height: 1.55;
}

.help-external-link {
  width: fit-content;
  color: #79d6f4;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.help-external-link:hover,
.help-external-link:focus-visible {
  color: #c8f2ff;
}

.language-switch {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  margin-bottom: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: #11191d;
}

.language-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.2rem;
  padding: 0.45rem 0.65rem;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.language-switch a + a {
  border-left: 1px solid var(--line);
}

.language-switch a.active,
.language-switch a:hover,
.language-switch a:focus-visible {
  background: #214557;
  color: var(--text);
}

.summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.main-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  padding: 0.55rem 1rem 0;
  border-bottom: 1px solid var(--line);
  background: #0b0f10;
}

.tab-button {
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: #172024;
  color: var(--muted);
  min-width: 8rem;
}

.tab-button.active {
  color: var(--text);
  background: var(--panel);
}

.tab-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.app-main {
  min-height: 0;
  overflow: hidden;
}

.tab-panel[hidden] {
  display: none;
}

.equipment-info-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}

.equipment-info-content {
  display: grid;
  grid-auto-rows: max-content;
  gap: 1rem;
  align-content: start;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0 1rem 2rem;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.equipment-info-content > :first-child {
  margin-top: 1rem;
}

.equipment-info-group {
  --equipment-info-accent: var(--blue);
  width: max-content;
  max-width: none;
  min-width: 86rem;
  margin-inline: 0;
  overflow: visible;
  border: 1px solid #2b3e45;
  border-radius: 5px;
  background: #11181b;
}

.equipment-info-ballistic { --equipment-info-accent: var(--purple); }
.equipment-info-energy { --equipment-info-accent: var(--yellow); }
.equipment-info-missile { --equipment-info-accent: var(--missile); }
.equipment-info-ams { --equipment-info-accent: var(--ams); }
.equipment-info-spread-weapons { --equipment-info-accent: #d28bff; }
.equipment-info-critical-weapons { --equipment-info-accent: #ff9b42; }
.equipment-info-jam-weapons { --equipment-info-accent: var(--red); }
.equipment-info-ghost-heat {
  --equipment-info-accent: #ff8d5c;
  min-width: 76rem;
}

.equipment-info-ghost-heat .equipment-info-table {
  min-width: 76rem;
}

.equipment-info-ghost-heat .equipment-info-table td:not(:first-child):not(:nth-child(2)) {
  color: #ffb18f;
  font-weight: 900;
}

.equipment-info-ghost-rules {
  width: min(76rem, 100%);
  padding: 1rem 1.1rem 1.15rem;
  border: 1px solid #4b3a32;
  border-left: 4px solid #ff8d5c;
  border-radius: 5px;
  background: linear-gradient(135deg, #1b1716, #11181b 72%);
}

.equipment-info-ghost-rules header {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  margin-bottom: 0.75rem;
}

.equipment-info-ghost-rules header span {
  color: #ff8d5c;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14rem;
}

.equipment-info-ghost-rules h3,
.equipment-info-ghost-example h4 {
  margin: 0;
  color: var(--text);
}

.equipment-info-ghost-summary {
  display: grid;
  gap: 0.25rem;
  color: #c6d0d3;
  line-height: 1.55;
}

.equipment-info-ghost-summary p {
  margin: 0;
}

.equipment-info-ghost-examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.equipment-info-ghost-example {
  padding: 0.85rem;
  border: 1px solid #35464c;
  border-radius: 4px;
  background: #0d1416;
}

.equipment-info-ghost-example h4 {
  margin-bottom: 0.55rem;
  color: #ffb18f;
  font-size: 0.9rem;
}

.equipment-info-ghost-example p {
  margin: 0.28rem 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.equipment-info-ghost-example strong {
  display: block;
  margin-top: 0.55rem;
  color: var(--yellow);
  font-size: 0.86rem;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .equipment-info-ghost-examples {
    grid-template-columns: 1fr;
  }
}
.equipment-info-modules {
  --equipment-info-accent: var(--purple);
  width: max-content;
  max-width: none;
  min-width: 68rem;
}

.equipment-info-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.6rem;
  padding: 0.6rem 0.8rem;
  border-left: 4px solid var(--equipment-info-accent);
  border-bottom: 1px solid #2b3e45;
  background: #1a2428;
}

.equipment-info-group-title h3 {
  margin: 0;
  color: var(--equipment-info-accent);
  letter-spacing: 0.08rem;
}

.equipment-info-group-title span {
  min-width: 2rem;
  padding: 0.18rem 0.4rem;
  border-radius: 999px;
  background: #0c1214;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}

.equipment-info-table-wrap {
  overflow: visible;
}

.equipment-info-table {
  width: max-content;
  min-width: 86rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.equipment-info-modules .equipment-info-table {
  min-width: 68rem;
}

.equipment-info-table th,
.equipment-info-table td {
  padding: 0.52rem 0.65rem;
  border-right: 1px solid #24343a;
  border-bottom: 1px solid #24343a;
  text-align: right;
  white-space: nowrap;
}

.equipment-info-table th:first-child,
.equipment-info-table td:first-child {
  width: 3.25rem;
  text-align: center;
}

.equipment-info-table th:nth-child(2),
.equipment-info-table td:nth-child(2) {
  text-align: left;
}

.equipment-info-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 0;
  background: #0d1416;
  box-shadow: 0 1px 0 #34505a;
  color: #afbec3;
  font-size: 0.78rem;
  letter-spacing: 0.025rem;
  text-transform: uppercase;
}

.equipment-info-sort-button {
  display: flex;
  gap: 0.32rem;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-height: 2.55rem;
  padding: 0.52rem 0.65rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: 800;
  text-transform: inherit;
}

.equipment-info-table th:first-child .equipment-info-sort-button {
  justify-content: center;
}

.equipment-info-table th:nth-child(2) .equipment-info-sort-button {
  justify-content: flex-start;
}

.equipment-info-sort-button:hover,
.equipment-info-sort-button:focus-visible,
.equipment-info-sort-button.active {
  background: #1c3038;
  color: var(--text);
}

.equipment-info-sort-indicator {
  display: inline-block;
  width: 0.75rem;
  color: var(--yellow);
  font-size: 0.65rem;
  text-align: center;
}

.equipment-info-sort-indicator:empty {
  display: none;
}

.equipment-info-table tbody th {
  color: var(--text);
  font-weight: 700;
}

.equipment-info-table tbody tr:hover th,
.equipment-info-table tbody tr:hover td {
  background: #1b2b31;
}

.equipment-info-coming-soon {
  display: grid;
  place-items: center;
  gap: 0.65rem;
  min-height: 18rem;
  border: 1px dashed #425962;
  border-radius: 6px;
  background: #11191c;
  color: var(--muted);
  text-align: center;
}

.equipment-info-coming-soon span {
  color: var(--yellow);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.18rem;
}

.equipment-info-coming-soon strong {
  color: var(--text);
  font-size: 1rem;
}

.equipment-info-empty {
  min-height: 12rem;
  display: grid;
  place-items: center;
}

#tab-mechlab {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#tab-mechlab.mechlab-scale-limited {
  overflow: auto;
}

.pill {
  min-width: 4.5rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  background: var(--panel-2);
  text-align: center;
}

.pill strong {
  display: block;
  color: var(--green);
  font-size: 1.05rem;
}

.pill span {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.mech-browser-layout {
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.mech-browser-layout[hidden] {
  display: none;
}

.mech-browser-layout.large-mech-list-layout {
  grid-template-columns: minmax(34rem, 50vw) minmax(0, 1fr);
}

.mech-browser-layout.mechlab-browse-layout {
  grid-template-columns: minmax(34rem, 1fr) minmax(24rem, 27rem);
}

.mech-browser-layout.mechlab-browse-layout .sidebar {
  border-right: 1px solid var(--line);
}

.mech-browser-layout.mechlab-browse-layout .tab-content {
  display: none;
}

.mech-browser-preview {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  background: #090d0f;
}

.mech-browser-preview[hidden] {
  display: none;
}

.mech-browser-preview-content {
  display: grid;
  align-content: start;
  min-height: 100%;
}

.mech-browser-preview-empty {
  display: grid;
  place-items: center;
  min-height: 14rem;
}

.mech-browser-preview-header {
  position: sticky;
  z-index: 2;
  top: 0;
  padding: 1rem 1.1rem 0.9rem;
  border-bottom: 1px solid #314149;
  background: linear-gradient(180deg, #172126 0%, #101719 100%);
  box-shadow: 0 0.35rem 0.8rem #00000055;
}

.mech-browser-preview-header h2 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0.2rem 0 0;
  color: #e8f0f2;
  font-size: 1.35rem;
  letter-spacing: 0.025em;
}

.mech-browser-preview-header > div > span {
  color: #7196a4;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mech-browser-preview-section {
  padding: 0.75rem 0.9rem 0.85rem;
  border-bottom: 1px solid #263036;
}

.mech-browser-preview-section > h3 {
  margin: 0 0 0.55rem;
  color: #6d9caf;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mech-browser-preview-fit-row {
  display: flex;
  justify-content: center;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid #263036;
  background: #0d1315;
}

.mech-browser-preview-fit-row .fit-mech-button {
  width: 100%;
  min-width: 0;
}

.mech-browser-hardpoint-visual {
  width: 100%;
  margin: 0 auto;
}

.mech-browser-hardpoint-legend {
  display: flex;
  gap: 0.28rem;
  align-items: center;
  justify-content: flex-start;
  min-height: 1.35rem;
  margin-bottom: 0.35rem;
  flex-wrap: nowrap;
}

.mech-browser-hardpoint-legend.mech-slot-tags .hardpoint-chip {
  width: max-content;
}

.mech-browser-hardpoint-map {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-areas:
    "orientation orientation orientation orientation orientation"
    ". . head . ."
    "right-arm right-torso center left-torso left-arm"
    ". right-leg . left-leg .";
  gap: 0.35rem 0.22rem;
  align-items: stretch;
  padding: 0.35rem;
  border: 1px solid #343b3e;
  background: #171a1b;
}

.mech-browser-hardpoint-orientation {
  display: flex;
  grid-area: orientation;
  justify-content: space-between;
  padding: 0 0.3rem;
  color: #dce2e4;
  font-size: 0.8rem;
  font-weight: 900;
}

.mech-browser-hardpoint-location {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 3.25rem;
  padding: 0.3rem 0.12rem;
  border: 1px solid #3c464a;
  background: linear-gradient(180deg, #242a2c 0%, #1b2022 100%);
  box-shadow: inset 0 0 0 1px #111719;
}

.mech-browser-hardpoint-location.location-head {
  grid-area: head;
}

.mech-browser-hardpoint-location.location-right_arm {
  grid-area: right-arm;
}

.mech-browser-hardpoint-location.location-right_torso {
  grid-area: right-torso;
}

.mech-browser-hardpoint-location.location-centre_torso {
  grid-area: center;
  border-color: #66777e;
}

.mech-browser-hardpoint-location.location-left_torso {
  grid-area: left-torso;
}

.mech-browser-hardpoint-location.location-left_arm {
  grid-area: left-arm;
}

.mech-browser-hardpoint-location.location-right_leg {
  grid-area: right-leg;
  min-height: 4.2rem;
}

.mech-browser-hardpoint-location.location-left_leg {
  grid-area: left-leg;
  min-height: 4.2rem;
}

.mech-browser-hardpoint-values {
  display: flex;
  gap: 0.16rem;
  align-items: center;
  justify-content: center;
  min-height: 1.35rem;
  flex-wrap: nowrap;
}

.mech-browser-hardpoint-callout {
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  border-radius: 0.1rem;
  background: var(--hp-tone);
  color: #101314;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 0 0 1px #0005;
}

.mech-browser-hardpoint-callout.energy {
  --hp-tone: var(--yellow);
}

.mech-browser-hardpoint-callout.missile {
  --hp-tone: var(--missile);
}

.mech-browser-hardpoint-callout.ballistic {
  --hp-tone: var(--purple);
}

.mech-browser-hardpoint-callout.ams {
  --hp-tone: var(--ams);
}

.mech-browser-preview .mech-summary-section {
  padding: 0.75rem 0.9rem 0.85rem;
}

.mech-browser-preview .mech-summary-section > h3,
.mech-browser-preview .mech-summary-section-heading > h3 {
  text-transform: uppercase;
}

.mech-browser-preview .mech-summary-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mech-browser-preview .mech-summary-metric:last-child:nth-child(odd) {
  grid-column: auto;
}

.mech-browser-preview-durability .mech-summary-metrics {
  grid-template-columns: 1fr;
}

.mech-browser-preview .mech-summary-metric > span,
.mech-browser-preview .mech-summary-metric > strong {
  white-space: nowrap;
}

.mech-browser-preview-durability .spec-value {
  width: auto;
}

.mech-browser-preview-mobility .mech-summary-metric > strong {
  font-size: 0.84rem;
}

.mech-browser-preview-mobility .mech-summary-metric.full-row {
  grid-column: 1 / -1;
}

.mech-browser-preview-quirks .mech-summary-section:last-child {
  border-bottom: 0;
}

.mech-browser-layout.mechlab-focused-layout {
  grid-template-columns: minmax(0, 1fr);
}

.mech-browser-layout.mechlab-focused-layout .sidebar {
  display: none;
}

.mech-browser-layout.mechlab-focused-layout .tab-content {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.tab-content {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.sidebar {
  border-right: 1px solid var(--line);
  background: var(--panel);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}

.toolbar {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.mech-toolbar-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.5rem;
}

.mech-filter-button {
  min-width: 3.5rem;
  padding-inline: 0.65rem;
  font-weight: 800;
}

.mech-filter-button.active {
  border-color: var(--green);
  background: #17372b;
  color: #d9ffe8;
  box-shadow: 0 0 0.45rem #46d98b33;
}

.mech-list-view-toggle {
  min-width: 2.8rem;
  padding-inline: 0.45rem;
  font-weight: 800;
}

.mech-list,
.item-list {
  overflow: auto;
  min-height: 0;
}

.item-list {
  max-height: calc(100vh - 182px);
}

.class-section {
  border-bottom: 1px solid #22333a;
}

.class-heading {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
  min-height: 2.65rem;
  margin: 0.65rem 0.65rem 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid #315366;
  border-left: 4px solid var(--blue);
  border-radius: 3px;
  background: #18262d;
  box-shadow: inset 0 0 0 1px #0b1114;
  color: #bcecff;
  text-transform: uppercase;
  font-size: 0.98rem;
  letter-spacing: 0.06rem;
}

.class-heading span {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0;
  text-transform: none;
}

.chassis-list {
  display: grid;
}

.faction-section {
  border-top: 1px solid #1e2c32;
}

.faction-heading {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.25rem 0.75rem;
  background: #0d1417;
  border-left: 2px solid var(--blue);
  color: var(--blue);
  font-size: 0.7rem;
  letter-spacing: 0.03rem;
  text-transform: uppercase;
}

.faction-heading.faction-clan {
  border-left-color: var(--green);
  color: var(--green);
}

.faction-heading span {
  color: var(--muted);
  font-size: 0.64rem;
  letter-spacing: 0;
  text-transform: none;
}

.chassis-group {
  border-top: 1px solid #1e2c32;
}

.chassis-row {
  display: grid;
  gap: 0.25rem;
  width: 100%;
  padding: 0.62rem 0.75rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.chassis-row:hover,
.chassis-row.active,
.chassis-group.expanded > .chassis-row {
  background: #22313a;
}

.faction-section.faction-innersphere .chassis-title strong,
.faction-section.faction-innersphere .expand-indicator {
  color: var(--blue);
}

.faction-section.faction-clan .chassis-title strong,
.faction-section.faction-clan .expand-indicator {
  color: var(--green);
}

.faction-section.faction-clan .expand-indicator {
  border-color: #6f8f45;
}

.chassis-title {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  min-width: 0;
}

.small-chassis-title {
  display: grid;
  grid-template-columns: 1rem minmax(0, 10rem) 3rem;
  width: 100%;
}

.small-chassis-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.small-chassis-title .chassis-ton {
  color: var(--text);
  font-weight: 800;
  text-align: left;
}

.expand-indicator {
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border: 1px solid #41616d;
  border-radius: 3px;
  color: var(--blue);
  font-size: 0.78rem;
  line-height: 1;
}

.variant-list {
  display: grid;
  border-top: 1px solid #22333a;
  background: #0f1518;
}

.mech-row,
.item-row {
  display: grid;
  gap: 0.2rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 0;
  border-bottom: 1px solid #22333a;
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.mech-row:hover,
.item-row:hover,
.mech-row.active,
.item-row.active {
  background: #22313a;
}

.variant-row {
  padding-left: 1.4rem;
  background: #11191c;
}

.variant-row.active {
  border-left: 3px solid var(--blue);
  padding-left: calc(1.4rem - 3px);
}

.mech-list-large .mech-card-section {
  border-bottom: 1px solid #22333a;
}

.large-chassis-list {
  gap: 0;
  background: #0f1518;
}

.mech-list-large .faction-section {
  border-top: 0;
}

.mech-list-large .faction-heading {
  margin: 0.25rem 0.65rem 0;
  border-radius: 2px;
}

.large-chassis-list .chassis-group {
  border-top: 0;
  margin: 0.55rem 0.65rem;
}

.large-chassis-list .chassis-group + .chassis-group {
  margin-top: 0.35rem;
}

.large-chassis-row {
  position: relative;
  grid-template-columns: minmax(0, 1fr) 3rem;
  gap: 0.75rem;
  align-items: center;
  min-height: 2.45rem;
  padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--blue);
  border-radius: 3px;
  background: #202226;
}

.large-chassis-row .expand-indicator {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);
}

.faction-clan .large-chassis-row {
  border-left-color: var(--green);
}

.large-chassis-row:hover,
.large-chassis-row.active,
.large-chassis-list .chassis-group.expanded > .large-chassis-row {
  background: #282b31;
}

.faction-clan .large-chassis-row .chassis-title strong {
  color: var(--green);
}

.large-chassis-row .chassis-title strong {
  position: absolute;
  top: 50%;
  left: 2.45rem;
  width: 11.5rem;
  overflow: hidden;
  color: var(--blue);
  font-size: 0.95rem;
  letter-spacing: 0.03rem;
  text-align: left;
  text-overflow: ellipsis;
  text-transform: uppercase;
  transform: translateY(-50%);
  white-space: nowrap;
}

.large-chassis-ton,
.large-chassis-count {
  color: var(--text);
  font-weight: 800;
  text-align: right;
}

.large-chassis-ton {
  position: absolute;
  top: 50%;
  left: 14.5rem;
  width: 3.5rem;
  transform: translateY(-50%);
  text-align: left;
}

.mech-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 0.55rem;
  padding: 0.55rem 0 0;
  background: #0f1518;
}

.mech-card {
  display: grid;
  gap: 0.55rem;
  width: 100%;
  min-height: 8.2rem;
  padding: 0.65rem;
  border: 1px solid #263840;
  border-radius: 6px;
  background: #141d21;
  text-align: left;
}

.mech-card:hover,
.mech-card.active {
  border-color: var(--blue);
  background: #1c2b32;
}

.mech-card.active {
  box-shadow: inset 3px 0 0 var(--blue);
}

.mech-card-media {
  position: relative;
  min-width: 0;
  width: 100%;
  aspect-ratio: 100 / 72;
  border: 1px solid #263840;
  border-radius: 4px;
  background: #0d1214;
  overflow: hidden;
}

.mech-card-media[hidden] {
  display: none;
}

.mech-card-media img {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 90%;
  height: auto;
  max-width: 100%;
  clip-path: inset(10% 0 10% 0);
  transform: translate(-50%, -10%);
}

.mech-card-title {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.mech-card-title strong {
  display: inline-flex;
  gap: 0.38rem;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mech-card-title strong > span {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: inherit;
  text-overflow: ellipsis;
}

.mech-card-title span {
  color: var(--muted);
  font-size: 0.78rem;
}

.mech-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

.mech-card-stats > span {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  padding: 0.35rem;
  border: 1px solid #263840;
  border-radius: 4px;
  background: #101719;
}

.mech-card-stats span span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mech-card-stats strong {
  overflow: visible;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.1;
  text-overflow: clip;
  white-space: nowrap;
}

.mech-card-stats strong > span {
  overflow: visible;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.mech-card-stats strong .boosted,
.mech-card-stats strong.boosted {
  color: var(--green);
}

.row-title {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  justify-content: space-between;
  color: var(--text);
}

.mech-title-main {
  display: inline-flex;
  gap: 0.38rem;
  align-items: center;
  min-width: 0;
}

.mech-title-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omnipod-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.12rem;
  height: 1.12rem;
  color: rgba(255, 255, 255, 0.88);
}

.omnipod-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
}

.mech-card .omnipod-icon {
  width: 1.22rem;
  height: 1.22rem;
}

.mech-card-title .omnipod-icon {
  color: rgba(255, 255, 255, 0.88);
}

.badge-line {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 3px;
  background: #263139;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.badge.ballistic {
  color: var(--purple);
}

.badge.energy {
  color: var(--yellow);
}

.badge.missile {
  color: var(--missile);
}

.badge.error {
  color: var(--red);
}

.badge.ok {
  color: var(--green);
}

.hardpoint-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin-top: 0.4rem;
}

.hardpoint-chip {
  display: inline-grid;
  grid-template-columns: 2.25rem auto;
  align-items: center;
  min-height: 1.35rem;
  border: 1px solid #34454c;
  border-radius: 3px;
  background: #111719;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  overflow: hidden;
  text-transform: uppercase;
}

.hardpoint-icon {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 1.35rem;
  background: #263139;
  color: currentColor;
}

.hardpoint-count {
  min-width: 1.25rem;
  padding: 0 0.35rem;
  text-align: center;
}

.hardpoint-chip.energy {
  color: var(--yellow);
}

.hardpoint-chip.missile {
  color: var(--missile);
}

.hardpoint-chip.ballistic {
  color: var(--purple);
}

.hardpoint-chip.ams {
  color: var(--ams);
}

.hardpoint-chip.ecm {
  color: #ff9b42;
}

.mech-slot-tags .hardpoint-chip {
  grid-template-columns: auto auto;
}

.mech-slot-tags .hardpoint-icon {
  width: auto;
  min-width: 1.35rem;
  padding: 0 0.35rem;
}

.mech-slot-tags .hardpoint-chip.marker-only {
  grid-template-columns: auto;
}

.mech-slot-tags .hardpoint-chip.jumpjet,
.mech-slot-tags .hardpoint-chip.masc {
  color: #b9e9ff;
}

.workspace {
  min-width: 0;
  padding: 1rem;
}

.mechlab-workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.65rem;
  height: 100%;
  min-height: 0;
  padding: 0.75rem 1rem 1rem;
  overflow: hidden;
}

.info-workspace {
  padding: 1rem;
}

.stats-panel {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.stats-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  background: #101719;
}

.stats-toolbar-group {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.stats-toolbar-option {
  margin-left: auto;
}

.stats-toolbar-option[hidden] {
  display: none;
}

.stats-subnav {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--line);
  background: #0d1416;
}

.stats-category-nav {
  background: #101719;
}

.stats-expand-button {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  min-width: 2.1rem;
  min-height: 2rem;
  padding: 0;
  border-color: #586970;
  background: #182328;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
}

.stats-expand-button[aria-expanded="false"] {
  border-color: #816235;
  background: #2a2115;
}

.stats-button {
  min-width: 7rem;
  border-color: #49606a;
  background: #172024;
  color: var(--muted);
}

.stats-button.active {
  border-color: var(--blue);
  background: #214557;
  color: var(--text);
}

.stats-rank-toggle {
  display: inline-flex;
  gap: 0.15rem;
  align-items: center;
  padding: 0.16rem;
  border: 1px solid #40545b;
  border-radius: 999px;
  background: #090f11;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.stats-rank-button {
  min-width: 4.15rem;
  min-height: 1.75rem;
  padding: 0.28rem 0.58rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #aebdc2;
  font-size: 0.86rem;
  font-weight: 800;
}

.stats-rank-button:hover {
  background: #142024;
  color: var(--text);
}

.stats-rank-button.active {
  background: #c8b04b;
  color: #10140d;
}

.stats-aggregate-toggle[hidden] {
  display: none;
}

.stats-toolbar-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 1.8rem;
  margin-inline: 0.1rem;
  background: #40545b;
}

.stats-subbutton {
  min-width: 5.5rem;
  border-color: #37484f;
  background: #141d20;
  color: var(--muted);
}

.stats-subbutton.active {
  border-color: #d5a53f;
  background: #342916;
  color: var(--text);
}

.stats-subbutton:disabled {
  border-color: #2b383d;
  background: #11191c;
  color: #637077;
  cursor: not-allowed;
}

.stats-workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  padding: 1rem;
}

.stats-condition-controls {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) minmax(13rem, 16rem) minmax(0, 1fr);
  gap: 0.65rem;
  align-items: end;
  max-width: 82rem;
  margin-bottom: 0.85rem;
  padding: 0.75rem;
  border: 1px solid #263840;
  background: #11191c;
}

.stats-subnav[hidden],
.stats-condition-controls[hidden],
.stats-option-group[hidden],
.stats-subbutton[hidden] {
  display: none;
}

.stats-filter-field {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}

.stats-filter-field > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.stats-filter-field select {
  min-width: 0;
}

.stats-filter-toggle,
.stats-option-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

.stats-filter-toggle button,
.stats-option-button {
  min-height: 2rem;
  border-color: #394d55;
  background: #152024;
  color: var(--muted);
}

.stats-filter-toggle button {
  min-width: 4.5rem;
}

.stats-option-button {
  min-width: 4.2rem;
  padding: 0.3rem 0.55rem;
}

.stats-filter-toggle button.active,
.stats-option-button.active {
  border-color: var(--blue);
  background: #203d4b;
  color: var(--text);
}

.stats-list {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.stats-content {
  display: grid;
  grid-template-columns: minmax(44rem, 57rem) minmax(0, 1fr);
  gap: 0.8rem;
  align-items: stretch;
  width: 100%;
  max-width: none;
  min-height: 0;
  overflow: hidden;
}

.stats-detail {
  display: grid;
  grid-template-columns: repeat(3, minmax(14rem, 1fr));
  align-content: start;
  gap: 0.75rem;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.stats-detail .info-card {
  width: 100%;
}

.stats-detail-empty {
  grid-column: 1 / -1;
  min-height: 5rem;
}

.info-variant-heading,
.stats-detail-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
}

.info-variant-heading > div,
.stats-detail-summary {
  min-width: 0;
}

.fit-mech-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 12rem;
  min-height: 3.3rem;
  padding: 0.65rem 1.25rem;
  border: 1px solid #816235;
  border-radius: 4px;
  background: #392b16;
  color: #f7e4ad;
  font-size: inherit;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.fit-mech-button[hidden] {
  display: none;
}

.fit-mech-button:hover,
.fit-mech-button:focus-visible {
  border-color: var(--yellow);
  background: #503b1b;
  color: #fff1c7;
}

.stats-detail-heading {
  align-items: stretch;
}

.stats-detail-heading .fit-mech-button {
  min-width: 11rem;
}

.stats-row {
  display: grid;
  grid-template-columns: 3.1rem minmax(14rem, 1fr) 8rem minmax(16.5rem, 26.5rem);
  gap: 0.65rem;
  align-items: center;
  min-height: 3.45rem;
  padding: 0 0 0 0.75rem;
  border: 1px solid #22333a;
  border-left: 4px solid var(--blue);
  border-radius: 0;
  background: #11191c;
  content-visibility: auto;
  contain: layout style paint;
  contain-intrinsic-size: auto 3.45rem;
}

.stats-row:hover {
  background: #22313a;
}

.stats-row.active {
  border-color: #547b8a;
  background: #1b2b31;
}

.stats-row.faction-clan {
  border-left-color: var(--green);
}

.stats-row.faction-clan.active {
  border-color: #748b47;
}

.stats-rank {
  display: inline-grid;
  place-items: center;
  min-width: 2.2rem;
  height: 1.55rem;
  border: 1px solid #41616d;
  border-radius: 3px;
  color: var(--blue);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.stats-row.faction-clan .stats-rank {
  border-color: #6f8f45;
  color: var(--green);
}

.stats-detail-rank {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.55rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #263840;
}

.stats-detail-rank h3 {
  margin-bottom: 0;
}

.stats-detail-rank-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, auto);
  gap: 0.75rem;
  align-items: end;
}

.stats-detail-summary {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.stats-detail-section-title {
  grid-column: 1 / -1;
  color: var(--blue);
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
}

.stats-detail-title {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  min-width: 0;
  color: var(--blue);
}

.stats-detail-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-detail-meta {
  color: var(--muted);
  font-size: 0.78rem;
}

.stats-detail-rank-value {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.stats-detail-rank-value span {
  display: inline-grid;
  place-items: center;
  min-width: 2.1rem;
  height: 1.55rem;
  border: 1px solid #41616d;
  color: var(--blue);
  font-weight: 800;
}

.stats-detail-rank-value strong {
  color: var(--green);
  font-size: 0.95rem;
  text-align: right;
}

.stats-mech-main {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.stats-mech-main .mech-title-main strong {
  color: var(--blue);
  font-size: 0.95rem;
}

.stats-row.faction-clan .stats-mech-main .mech-title-main strong {
  color: var(--green);
}

.stats-subline {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.1;
}

.stats-value-block {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  padding: 0.35rem;
  border: 1px solid #263840;
  border-radius: 4px;
  background: #101719;
  text-align: right;
}

.stats-value-block span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-value-block strong {
  overflow: hidden;
  color: var(--green);
  font-size: 0.95rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-extra,
.stats-hardpoints {
  display: flex;
  min-width: 0;
  gap: 0.35rem;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

.stats-extra {
  align-self: stretch;
  min-height: 0;
  padding: 0.52rem 0.75rem;
  border: 0;
  border-left: 1px solid #ffffff1f;
  border-radius: 0;
  background: #00000024;
}

.stats-hardpoints {
  flex-wrap: wrap;
  gap: 0.18rem;
}

.stats-extra .badge,
.stats-hardpoints .badge {
  flex: 0 0 auto;
}

.weight-slot.weight-light {
  border-left: 3px solid var(--green);
  color: #b8dc86;
}

.stats-extra.weight-light {
  border-left-color: #6f8f45;
  background: #182815;
}

.weight-slot.weight-medium {
  border-left: 3px solid var(--blue);
  color: #8ed0ea;
}

.stats-extra.weight-medium {
  border-left-color: #41616d;
  background: #142833;
}

.weight-slot.weight-heavy {
  border-left: 3px solid var(--yellow);
  color: #f2da72;
}

.stats-extra.weight-heavy {
  border-left-color: #816f2d;
  background: #2b2715;
}

.weight-slot.weight-assault {
  border-left: 3px solid var(--red);
  color: #ee907f;
}

.stats-extra.weight-assault {
  border-left-color: #85463d;
  background: #2c1917;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(14rem, 1fr));
  gap: 0.75rem;
}

.compare-grid {
  min-width: 0;
}

.info-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 0.75rem;
}

.info-card-compact {
  padding: 0.55rem;
}

.info-card-compact h3 {
  margin-bottom: 0.45rem;
}

.info-quirks-card {
  grid-column: 1 / -1;
  background: #070909;
}

.info-quirks-card h3 {
  color: var(--blue);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.toggle-row {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  min-height: 2rem;
  color: var(--text);
  white-space: nowrap;
}

.toggle-row input {
  width: auto;
}

.info-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  justify-content: flex-end;
}

.info-clear-compare {
  min-height: 2rem;
  padding: 0.32rem 0.65rem;
  border-color: #49606a;
  background: #101719;
  color: var(--muted);
  white-space: nowrap;
}

.info-clear-compare:hover {
  border-color: var(--red);
  background: #38211e;
  color: var(--text);
}

.compare-group-toggle {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 0.45rem;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
}

.compare-group-toggle:hover {
  border-color: transparent;
  background: transparent;
  color: var(--blue);
}

.compare-group-icon {
  display: inline-grid;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #49606a;
  border-radius: 3px;
  color: var(--blue);
  font-size: 0.9rem;
  line-height: 1;
}

.compare-table-wrap {
  overflow: auto;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.compare-table {
  width: max-content;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.9rem;
}

.compare-table th,
.compare-table td {
  border-bottom: 1px solid #263840;
  border-right: 1px solid #263840;
  padding: 0.36rem 0.42rem;
  vertical-align: middle;
}

.compare-table th:last-child,
.compare-table td:last-child {
  border-right: 0;
}

.compare-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  width: var(--compare-mech-column-width);
  min-width: var(--compare-mech-column-width);
  background: var(--panel-2);
  color: var(--text);
  text-align: center;
}

.compare-table thead th[data-compare-baseline] {
  cursor: pointer;
}

.compare-table thead th.compare-baseline-column,
.compare-table td.compare-baseline-column {
  background: #172329;
  box-shadow: inset 3px 0 0 var(--blue), inset -3px 0 0 var(--blue);
}

.compare-table thead th.compare-baseline-column {
  color: #f4fbff;
}

.compare-table thead th:first-child,
.compare-table tbody th {
  width: 9rem;
  min-width: 9rem;
  text-align: left;
}

.compare-table thead th strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-title {
  display: flex;
  gap: 0.28rem;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.compare-baseline-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.2rem;
  align-items: center;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.compare-baseline-toggle input {
  width: auto;
  margin: 0;
  accent-color: var(--blue);
}

.compare-remove {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  padding: 0;
  border-radius: 50%;
  border-color: #49606a;
  background: #101719;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1;
}

.compare-remove:hover {
  border-color: var(--red);
  background: #38211e;
  color: var(--text);
}

.compare-table thead th .compare-meta {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 400;
}

.compare-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #101719;
  color: var(--text);
  font-weight: 700;
  line-height: 1.2;
}

.compare-table td {
  width: var(--compare-mech-column-width);
  min-width: var(--compare-mech-column-width);
  background: #101719;
  color: var(--text);
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

.compare-cell-value {
  display: block;
  font-size: 1rem;
  line-height: 1.15;
}

.compare-cell-value.compare-high {
  color: var(--green);
}

.compare-cell-value.compare-low {
  color: var(--red);
}

.compare-delta {
  display: inline-flex;
  gap: 0.14rem;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.12rem;
  font-size: 0.84rem;
  font-weight: 800;
  white-space: nowrap;
}

.compare-delta-up {
  color: var(--green);
}

.compare-delta-down {
  color: var(--red);
}

.compare-delta-icon {
  font-size: 0.68rem;
  line-height: 1;
}

.compare-table .compare-group th {
  position: static;
  background: #22313a;
  color: var(--blue);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.compare-group-toggle {
  min-height: 1.55rem;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.compare-table .compare-group.compare-group-collapsed th {
  color: var(--muted);
}

.compare-table .spec-value {
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.25rem;
  justify-content: end;
}

.compare-table .spec-detail {
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.compare-empty {
  padding: 0.9rem;
}

.info-table {
  display: grid;
  gap: 0.25rem;
  font-size: 0.92rem;
}

.info-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  gap: 0.5rem;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid #263840;
  border-radius: 4px;
  background: #101719;
}

.info-card-compact .info-table {
  gap: 0.18rem;
}

.info-card-compact .info-row {
  grid-template-columns: minmax(5.5rem, 1fr) minmax(7.6rem, 1.15fr);
  gap: 0.3rem;
  min-height: 1.55rem;
  padding: 0.22rem 0.32rem;
  font-size: 0.88rem;
}

.info-card-compact .spec-value {
  grid-template-columns: max-content 4.7rem;
  gap: 0.2rem;
}

.info-card-compact .spec-detail {
  min-width: 4.7rem;
  gap: 0.12rem;
}

.info-row > span:not(:first-child) {
  color: var(--text);
  font-weight: 700;
  text-align: right;
}

.spec-value {
  display: inline-grid;
  grid-template-columns: max-content 6.8rem;
  gap: 0.28rem;
  align-items: baseline;
  justify-content: end;
  width: 100%;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.spec-final {
  color: var(--green);
  font-size: 1rem;
  font-weight: 800;
  text-align: right;
}

.spec-final-base {
  color: var(--text);
}

.spec-header-final {
  color: var(--muted);
  font-weight: 700;
}

.spec-base {
  color: var(--text);
  font-weight: 700;
}

.spec-quirk {
  color: var(--yellow);
  font-weight: 800;
}

.spec-detail {
  display: inline-flex;
  gap: 0.18rem;
  align-items: baseline;
  justify-content: flex-start;
  min-width: 6.8rem;
}

.spec-detail-empty {
  visibility: hidden;
}

.spec-mobility-value {
  grid-template-columns: max-content;
}

.spec-mobility-value .spec-detail {
  display: none;
}

.spec-speed-sep {
  color: var(--muted);
  padding: 0 0.18rem;
}

.spec-speed-boosted {
  color: var(--green);
}

.spec-angle-boosted {
  color: var(--green);
}

.spec-sep,
.spec-op {
  color: var(--muted);
  font-weight: 600;
}

.info-head {
  background: var(--panel-2);
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.info-head > span:not(:first-child) {
  color: var(--muted);
}

.info-head .spec-value {
  color: var(--muted);
}

.variant-panel {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding-bottom: 1rem;
}

.variant-title-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.variant-title-row h2 {
  min-width: 0;
  margin: 0;
}

.show-mech-list-button {
  flex: 0 0 auto;
  min-height: 2rem;
  padding: 0.35rem 0.65rem;
  border-color: #426b7a;
  background: #132830;
  color: #bfe9f7;
  font-size: 0.74rem;
  font-weight: 800;
}

.info-workspace > .variant-panel #info-variant-meta {
  max-width: min(64rem, 70vw);
  overflow-wrap: anywhere;
}

.compare-header-overlay {
  position: fixed;
  z-index: 30;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 0.25rem 0.75rem #00000066;
}

.compare-header-overlay[hidden] {
  display: none;
}

.compare-header-overlay-cells {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: stretch;
}

.compare-header-overlay-track {
  display: flex;
  width: max-content;
  height: 100%;
}

.compare-header-overlay-cell {
  width: var(--compare-mech-column-width);
  min-width: var(--compare-mech-column-width);
  height: 100%;
  padding: 0.36rem 0.42rem;
  border-right: 1px solid #263840;
  border-bottom: 1px solid #263840;
  background: var(--panel-2);
  color: var(--text);
  text-align: center;
}

.compare-header-overlay-cell[data-compare-baseline] {
  cursor: pointer;
}

.compare-header-overlay-track .compare-header-overlay-cell:last-child {
  border-right: 0;
}

.compare-header-overlay-cell.compare-baseline-column {
  background: #172329;
  box-shadow: inset 3px 0 0 var(--blue), inset -3px 0 0 var(--blue);
}

.compare-header-overlay-item {
  width: 9rem;
  min-width: 9rem;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  background: var(--panel-2);
  text-align: left;
  font-weight: 700;
}

.compare-header-overlay-cell .compare-meta {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 400;
}

.compare-header-overlay-cell .compare-title {
  min-height: 1.25rem;
}

.compare-header-overlay-cell strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mechlab-grid {
  display: grid;
  grid-template-columns: minmax(28rem, 32rem) minmax(0, 1fr) minmax(21rem, 24rem);
  gap: 0.75rem;
  min-height: 0;
  overflow: hidden;
}

.mech-summary-panel {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border-right: 1px solid var(--line);
  background: #070909;
}

.mechlab-compact-list-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #37505a;
  background: #070b0d;
}

.mechlab-compact-list-panel[hidden] {
  display: none;
}

.mechlab-compact-list-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 2.35rem;
  gap: 0.4rem;
  padding: 0.5rem;
  border-bottom: 1px solid #37505a;
  background: #111a1e;
}

.mechlab-compact-list-close {
  width: 2.35rem;
  min-width: 2.35rem;
  padding: 0;
  border-color: #884b4b;
  background: #3a1717;
  color: #ffb0b0;
  font-size: 0.9rem;
  font-weight: 900;
}

.compact-mech-list {
  max-height: none;
  overflow: auto;
  background: #090e10;
}

.compact-mech-list .class-heading {
  min-height: 2.2rem;
  margin: 0.45rem 0.45rem 0;
  padding: 0.4rem 0.55rem;
  font-size: 0.86rem;
}

.compact-mech-list .faction-heading {
  min-height: 1.4rem;
  padding-inline: 0.5rem;
  font-size: 0.66rem;
}

.compact-mech-list .chassis-row,
.compact-mech-list .mech-row {
  border-radius: 0;
}

.mech-summary-content {
  display: grid;
  align-content: start;
}

.mech-summary-limits {
  display: grid;
  gap: 1px;
  padding: 0.65rem 0.7rem;
  border-bottom: 1px solid #263036;
  background: #26343a;
}

.mech-summary-limit {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 1.9rem;
  padding: 0.25rem 0.4rem;
  background: #101719;
}

.mech-summary-limit:nth-child(even) {
  background: #182328;
}

.mech-summary-limit > span {
  color: #7da2b0;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.mech-summary-limit strong {
  color: #64b8e8;
  font-size: 1.25rem;
  font-weight: 900;
}

.mech-summary-limit small {
  color: #d7e0e3;
  font-size: 0.8em;
}

.mech-summary-limit.over-limit strong {
  color: #ff5959;
  text-shadow: 0 0 0.35rem #ff303055;
}

.mech-summary-limit.over-limit small {
  color: #d7e0e3;
  text-shadow: none;
}

.mech-summary-section {
  padding: 0.55rem 0.7rem 0.65rem;
  border-bottom: 1px solid #263036;
}

.mech-summary-section > h3,
.mech-summary-section-heading > h3 {
  margin: 0 0 0.4rem;
  color: #6d9caf;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
}

.mech-summary-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.mech-summary-detail-button {
  min-height: 1.55rem;
  margin-bottom: 0.3rem;
  padding: 0.15rem 0.5rem;
  border-color: #47788a;
  background: #17323c;
  color: #bfeaff;
  font-size: 0.72rem;
  font-weight: 800;
}

.mech-summary-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  background: #26343a;
}

.mech-summary-metric {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.25rem 0.4rem;
  background: #101719;
}

.mech-summary-metric:nth-child(even) {
  background: #182328;
}

.mech-summary-metric:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.mech-summary-metric > span {
  min-width: 0;
  color: #7897a3;
  font-size: 0.78rem;
  line-height: 1.15;
}

.mech-summary-metric > strong {
  color: #d7e4e8;
  font-size: 0.9rem;
  text-align: right;
  white-space: nowrap;
}

.mechlab-action-panel {
  display: grid;
  gap: 0.5rem;
  padding: 0.65rem;
  border: 1px solid #37505a;
  border-radius: 3px;
  background: #10181c;
  box-shadow: inset 0 0 0 1px #0a0f11;
}

.mechlab-action-panel .simulation-open-button {
  min-height: 2.65rem;
}

.mechlab-action-panel .skill-apply-button {
  min-height: 2.35rem;
  border-color: #536f78;
  background: #1a292e;
  color: #d8e8ed;
  font-weight: 900;
}

.mechlab-action-panel .skill-apply-button.active {
  border-color: var(--green);
  background: #173d2b;
  color: #8fffc0;
  box-shadow: inset 0 0 0 1px #46d98b55, 0 0 0.45rem #46d98b33;
}

.mechlab-action-panel .loadout-code-actions button,
.mechlab-tool-button {
  min-height: 2.35rem;
}

.mechlab-tool-button {
  width: 100%;
  border-color: #64b7d2;
  background: #205061;
  color: #f2fbff;
  font-weight: 900;
  letter-spacing: 0.06em;
  box-shadow: inset 0 0 0 1px #9adef133, 0 0 0.4rem #52b9df33;
}

.mechlab-tool-button:hover {
  border-color: #9de7ff;
  background: #2c687c;
  box-shadow: inset 0 0 0 1px #c5f2ff55, 0 0 0.55rem #52b9df66;
}

.mech-summary-ammo-head,
.mech-summary-ammo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.7rem 3.3rem 3.3rem;
  gap: 0.3rem;
  align-items: center;
}

.mech-summary-ammo-head {
  padding: 0 0.25rem 0.25rem;
  color: #7897a3;
  font-size: 0.68rem;
  text-align: right;
}

.mech-summary-ammo-head span:first-child {
  text-align: left;
}

.mech-summary-ammo-rows {
  display: grid;
  gap: 1px;
  background: #25343a;
}

.mech-summary-ammo-row {
  min-height: 1.75rem;
  padding: 0.25rem;
  background: #11191c;
  color: #b8c8ce;
  font-size: 0.78rem;
  text-align: right;
}

.mech-summary-ammo-row:nth-child(even) {
  background: #182328;
}

.mech-summary-ammo-row strong {
  min-width: 0;
  overflow: hidden;
  color: #70b8cf;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mech-summary-quirks {
  display: grid;
  gap: 1px;
}

.mech-summary-quirk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  min-height: 1.45rem;
  padding: 0.18rem 0.25rem;
  background: #101719;
  font-size: 0.76rem;
}

.mech-summary-quirk:nth-child(even) {
  background: #192125;
}

.mech-summary-quirk span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mech-summary-quirk strong {
  white-space: nowrap;
}

.simulation-open-button {
  width: 100%;
  min-height: 3rem;
  border-color: #3f788d;
  background: #16313c;
  color: #bfeaff;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.simulation-open-button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.loadout-code-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.loadout-code-actions button {
  min-height: 2.35rem;
  border-color: #536f78;
  background: #1a292e;
  color: #d8e8ed;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.loadout-code-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.local-build-actions button {
  border-color: #6b7850;
  background: #292d1b;
  color: #eef3c7;
}

.local-build-actions button:hover {
  border-color: var(--yellow);
  background: #383c20;
}

body.loadout-code-open {
  overflow: hidden;
}

body.local-build-open {
  overflow: hidden;
}

body.mech-filter-open,
body.build-actions-open,
body.skill-open,
body.ui-settings-open {
  overflow: hidden;
}

.build-actions-overlay {
  position: fixed;
  inset: 0;
  z-index: 1150;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: #020506cf;
}

.build-actions-overlay[hidden] {
  display: none;
}

.build-actions-dialog {
  display: grid;
  width: min(25rem, calc(100vw - 2rem));
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid #4b707e;
  border-radius: 5px;
  background: #101a1e;
  box-shadow: 0 1rem 4rem #000d;
}

.build-actions-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.build-actions-dialog h2 {
  margin: 0;
  color: #d8edf5;
  font-size: 1rem;
  letter-spacing: 0.08em;
}

.build-actions-close {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 1rem;
}

.build-actions-list {
  display: grid;
  gap: 0.45rem;
}

.build-actions-list button {
  min-height: 2.65rem;
  border-color: #385864;
  background: #14252b;
  color: #d7e7eb;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-align: left;
}

.build-actions-list button:hover {
  border-color: #52b9df;
  background: #1b3944;
  color: #fff;
}

.build-actions-cancel {
  justify-self: end;
  min-width: 6rem;
}

.mech-filter-dialog {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(62rem, calc(100vw - 2rem));
  height: min(48rem, calc(100dvh - 3rem));
}

.skill-dialog {
  width: min(48rem, calc(100vw - 2rem));
}

.skill-dialog-description {
  margin: 0;
  color: #91aab3;
  font-size: 0.78rem;
}

.skill-category-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: min(30rem, calc(100dvh - 14rem));
  overflow-y: auto;
  padding-right: 0.2rem;
}

.skill-category-options button.skill-category-all,
.skill-category-options button.skill-category-recommended {
  grid-column: 1 / -1;
  min-height: 4.15rem;
  border-width: 2px;
  border-color: #69aabd;
  background: linear-gradient(135deg, #1d3b45, #142a31);
  box-shadow: inset 0 0 0 1px #8acbdd22, 0 0 0.45rem #52b9df2b;
}

.skill-category-options button.skill-category-all:hover,
.skill-category-options button.skill-category-recommended:hover {
  border-color: #92d9ef;
  background: linear-gradient(135deg, #285362, #193841);
  box-shadow: inset 0 0 0 1px #b8eafa33, 0 0 0.6rem #52b9df55;
}

.skill-category-options button.skill-category-all.active,
.skill-category-options button.skill-category-recommended.active {
  border-color: var(--green);
  background: linear-gradient(135deg, #1c5137, #153525);
  box-shadow: inset 0 0 0 1px #8fffc033, 0 0 0.6rem #46d98b66;
}

.skill-category-options button.skill-category-all .mech-filter-option-copy strong,
.skill-category-options button.skill-category-recommended .mech-filter-option-copy strong {
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}

.skill-category-options button {
  min-height: 3.8rem;
  padding-block: 0.55rem;
}

.skill-category-options .mech-filter-option-copy {
  width: 100%;
}

.skill-node-count {
  color: #708991 !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.04em;
}

.skill-category-options button.skill-category-all .skill-node-count,
.skill-category-options button.skill-category-recommended .skill-node-count {
  color: #a9cbd5 !important;
  font-size: 0.68rem !important;
}

@media (max-width: 640px) {
  .skill-category-options {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mech-filter-tabs {
  display: flex;
  gap: 0.45rem;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid #385864;
}

.mech-filter-tabs button {
  min-width: 7rem;
  min-height: 2.35rem;
  border-color: #385864;
  background: #14252b;
  color: #9fb5bc;
  font-weight: 900;
}

.mech-filter-tabs button.active {
  border-color: var(--green);
  background: #1b3944;
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--green);
}

.mech-filter-content {
  display: grid;
  gap: 0.8rem;
  min-height: 0;
  padding-right: 0.35rem;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.mech-filter-content[hidden] {
  display: none;
}

#mech-filter-quirks-content {
  align-content: start;
}

.mech-filter-panel {
  display: grid;
  gap: 0.75rem;
  padding: 0.8rem;
  border: 1px solid #29434c;
  border-radius: 4px;
  background: #0b1418;
}

.mech-filter-panel > h3 {
  margin: 0;
  color: #d8edf5;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
}

.mech-filter-section {
  display: grid;
  gap: 0.5rem;
}

.mech-filter-section h4 {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mech-filter-options {
  display: grid;
  gap: 0.45rem;
}

.mech-filter-faction-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mech-filter-weight-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mech-filter-type-options {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mech-filter-special-section {
  padding: 0.7rem;
  border-left: 2px solid #385864;
  background: #101d22;
}

.mech-filter-special-options {
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
}

.mech-special-feature-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mech-quirk-filter-mode {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mech-filter-quirk-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
}

.mech-filter-quirk-search {
  width: 100%;
  min-height: 2.35rem;
  border: 1px solid #385864;
  border-radius: 3px;
  background: #101d22;
  color: #e8f4f7;
}

.mech-filter-quirk-search:focus {
  border-color: #52b9df;
  outline: 1px solid #52b9df;
}

.mech-filter-quirk-clear {
  min-height: 2.35rem;
  border-color: #385864;
  background: #14252b;
  color: #d7e7eb;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.mech-filter-quirk-clear:disabled {
  border-color: #263b42;
  background: #101a1e;
  color: #61747b;
  cursor: default;
}

.mech-filter-quirk-empty {
  margin: 0;
  padding: 0.8rem;
  border: 1px dashed #385864;
  border-radius: 3px;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}

.mech-filter-quirk-empty[hidden] {
  display: none;
}

.mech-filter-options.mech-quirk-filter-options {
  grid-template-columns: minmax(0, 1fr);
}

.mech-filter-options.mech-quirk-filter-options button {
  min-height: 2rem;
  font-size: 0.72rem;
}

.mech-filter-options.mech-quirk-filter-options button > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mech-filter-options button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  min-width: 0;
  min-height: 2.65rem;
  padding-inline: 0.65rem;
  border-color: #385864;
  background: #14252b;
  color: #d7e7eb;
  font-weight: 800;
  text-align: left;
}

.mech-filter-option-copy {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}

.mech-filter-option-copy strong {
  color: inherit;
  font-size: 0.82rem;
  line-height: 1.2;
}

.mech-filter-option-copy small {
  color: #91aab3;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.25;
}

.mech-filter-options button:hover .mech-filter-option-copy small,
.mech-filter-options button.active .mech-filter-option-copy small {
  color: #c4dce4;
}

.mech-filter-options button::before {
  display: grid;
  flex: 0 0 1.05rem;
  width: 1.05rem;
  height: 1.05rem;
  place-items: center;
  border: 2px solid #66838d;
  border-radius: 3px;
  color: #07110c;
  content: "";
  font-size: 0.82rem;
  font-weight: 1000;
  line-height: 1;
}

.mech-filter-options button:hover,
.mech-filter-options button.active {
  border-color: #52b9df;
  background: #1b3944;
  color: #fff;
}

.mech-filter-options button.active {
  border-color: var(--green);
  box-shadow: 0 0 0.35rem #46d98b44;
}

.mech-filter-options button.active::before {
  border-color: var(--green);
  background: var(--green);
  box-shadow: 0 0 0.35rem #46d98b88;
  content: "✓";
}

.mech-filter-options button:disabled {
  cursor: not-allowed;
  border-color: #26363c;
  background: #10171a;
  color: #63747a;
  box-shadow: none;
  opacity: 0.55;
}

.mech-filter-options button:disabled::before {
  border-color: #52636a;
  background: #263237;
  color: #718087;
  box-shadow: none;
}

.mech-hardpoint-filter-table {
  overflow-x: auto;
  border: 1px solid #29434c;
  border-radius: 4px;
  background: #0d181c;
}

.mech-hardpoint-filter-header,
.mech-hardpoint-filter-row {
  display: grid;
  grid-template-columns: 2.6rem minmax(8rem, 1.5fr) repeat(6, minmax(3.8rem, 1fr));
  gap: 0.5rem;
  align-items: center;
  min-width: 48rem;
}

.mech-hardpoint-filter-header {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid #385864;
  background: #14252b;
  color: #8fa7ae;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-align: center;
}

.mech-hardpoint-filter-header span:first-child,
.mech-hardpoint-filter-header span:nth-child(2) {
  text-align: left;
}

.mech-hardpoint-filter-rows {
  display: grid;
}

.mech-hardpoint-filter-row {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid #22353c;
  transition: background 0.15s ease;
}

.mech-hardpoint-filter-row:last-child {
  border-bottom: 0;
}

.mech-hardpoint-filter-row.enabled {
  background: #122127;
}

.mech-hardpoint-filter-row > strong {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  min-width: 0;
  color: #d7e7eb;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.mech-hardpoint-filter-row > strong > span {
  display: grid;
  flex: 0 0 2rem;
  min-height: 1.55rem;
  place-items: center;
  border: 1px solid #536f78;
  border-radius: 3px;
  background: #17282e;
  color: #bfe2ed;
}

.mech-hardpoint-filter-enable {
  display: grid;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.3rem;
  border-color: #385864;
  background: #14252b;
  color: #a9bec4;
  font-size: 0.75rem;
  font-weight: 900;
}

.mech-hardpoint-filter-enable::before {
  display: grid;
  width: 1rem;
  height: 1rem;
  place-items: center;
  border: 2px solid #66838d;
  border-radius: 3px;
  color: #07110c;
  content: "";
  font-size: 0.78rem;
  font-weight: 1000;
  line-height: 1;
}

.mech-hardpoint-filter-enable:hover,
.mech-hardpoint-filter-enable.active {
  border-color: #52b9df;
  background: #1b3944;
  color: #fff;
}

.mech-hardpoint-filter-enable.active {
  border-color: var(--green);
}

.mech-hardpoint-filter-enable.active::before {
  border-color: var(--green);
  background: var(--green);
  box-shadow: 0 0 0.35rem #46d98b88;
  content: "✓";
}

.mech-hardpoint-filter-row input[type="number"] {
  width: 100%;
  min-width: 0;
  min-height: 2.25rem;
  padding: 0.35rem 0.4rem;
  border: 1px solid #46636d;
  border-radius: 3px;
  background: #091115;
  color: #e5f3f7;
  font-weight: 900;
  text-align: center;
  color-scheme: dark;
}

.mech-hardpoint-filter-row input[type="number"]:focus {
  border-color: #52b9df;
  outline: 1px solid #52b9df;
}

.mech-hardpoint-filter-row input[type="number"]:disabled {
  border-color: #26363c;
  background: #10171a;
  color: #63747a;
  opacity: 0.55;
}

.mech-hardpoint-filter-fixed-value,
.mech-hardpoint-filter-unavailable {
  display: grid;
  min-height: 2.25rem;
  place-items: center;
  border: 1px solid #263b43;
  border-radius: 3px;
  background: #111c20;
  color: #71858c;
  font-weight: 900;
}

.mech-hardpoint-filter-row.enabled .mech-hardpoint-filter-fixed-value {
  border-color: var(--green);
  background: #193128;
  color: #bff4d5;
}

.mech-hardpoint-filter-unavailable {
  border-color: transparent;
  background: transparent;
  color: #4f6269;
}

@media (max-width: 640px) {
  .mech-filter-type-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mech-filter-weight-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mech-special-feature-options {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ui-settings-dialog {
  width: min(28rem, calc(100vw - 2rem));
}

.ui-display-options {
  display: grid;
  gap: 0.5rem;
}

.ui-display-option {
  position: relative;
  cursor: pointer;
}

.ui-display-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ui-display-option span {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.65rem 0.8rem 0.65rem 2.35rem;
  border: 1px solid #385864;
  border-radius: 4px;
  background: #14252b;
  color: #d7e7eb;
  font-weight: 800;
}

.ui-display-option span::before {
  position: absolute;
  left: 0.8rem;
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid #66838d;
  border-radius: 50%;
  content: "";
}

.ui-display-option:hover span,
.ui-display-option.active span,
.ui-display-option input:focus-visible + span {
  border-color: #52b9df;
  background: #1b3944;
  color: #fff;
}

.ui-display-option.active span::before {
  border-color: var(--green);
  background: var(--green);
  box-shadow: inset 0 0 0 2px #14252b, 0 0 0.35rem #46d98b88;
}

.ui-toggle-option span {
  padding-right: 4.2rem;
}

.ui-toggle-option span::before {
  border-radius: 3px;
}

.ui-toggle-state {
  position: absolute;
  top: 50%;
  right: 0.85rem;
  color: #8199a2;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  pointer-events: none;
  transform: translateY(-50%);
}

.ui-toggle-option.active .ui-toggle-state {
  color: #8fffc0;
}

.mech-summary-ammo-quirks-active span {
  grid-column: 1 / -1;
  color: #e1b86a;
  font-weight: 800;
}

.loadout-code-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: #020506c7;
}

.loadout-code-overlay[hidden] {
  display: none;
}

.loadout-code-dialog {
  display: grid;
  width: min(42rem, calc(100vw - 2rem));
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid #3b5964;
  border-radius: 5px;
  background: #101a1e;
  box-shadow: 0 1rem 4rem #000c;
}

.loadout-code-dialog header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.loadout-code-dialog h2 {
  margin: 0;
  color: #d8edf5;
  font-size: 1rem;
  letter-spacing: 0.06em;
}

.loadout-code-dialog header p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.loadout-code-close {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
}

#loadout-code-text {
  width: 100%;
  min-height: 7rem;
  resize: vertical;
  border: 1px solid #38525c;
  border-radius: 3px;
  background: #071013;
  color: #d9edf4;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.84rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#loadout-code-text:focus {
  border-color: var(--blue);
  outline: 1px solid var(--blue);
}

.loadout-code-status {
  min-height: 1.2rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.loadout-code-status.error {
  color: #ff8d82;
}

.loadout-code-status.success {
  color: var(--green);
}

.loadout-code-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}

.loadout-code-dialog-actions button {
  min-width: 7rem;
}

.local-build-dialog {
  width: min(38rem, calc(100vw - 2rem));
}

.local-build-save-form {
  display: grid;
  gap: 0.35rem;
}

.local-build-save-form[hidden] {
  display: none;
}

.local-build-save-form > label {
  color: #9fb2b9;
  font-size: 0.76rem;
  font-weight: 800;
}

.local-build-save-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
}

#local-build-name {
  min-width: 0;
  border: 1px solid #38525c;
  border-radius: 3px;
  background: #071013;
  color: #d9edf4;
}

#local-build-name:focus {
  border-color: var(--yellow);
  outline: 1px solid var(--yellow);
}

.local-build-save-form.managing {
  opacity: 0.5;
}

#local-build-name:disabled,
#confirm-local-build-save:disabled {
  cursor: not-allowed;
}

.local-build-list {
  display: grid;
  max-height: min(25rem, 48vh);
  gap: 0.3rem;
  overflow-y: auto;
  padding: 0.15rem;
}

.local-build-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 2.75rem;
  gap: 0.65rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid #33474f;
  border-radius: 3px;
  background: #111b1f;
  color: #d5e2e6;
  text-align: left;
}

button.local-build-record:hover,
button.local-build-record:focus-visible {
  border-color: #66b3cf;
  background: #18313a;
}

.local-build-record.current {
  border-left: 3px solid var(--yellow);
  background: #222719;
}

.local-build-record-name {
  display: flex;
  min-width: 0;
  gap: 0.55rem;
  align-items: baseline;
}

.local-build-record-name strong,
.local-build-record-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.local-build-record-name strong {
  flex: 0 1 auto;
  color: #e5edf0;
}

.local-build-record-name i {
  color: #67808a;
  font-style: normal;
}

.local-build-record-name span {
  flex: 1 1 auto;
  color: #b8c8ce;
}

.local-build-record-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}

.local-build-record-actions small {
  color: var(--yellow);
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.local-build-delete-button {
  min-height: 1.85rem;
  padding: 0.25rem 0.6rem;
  border-color: #7b3d38;
  background: #351b19;
  color: #ffaaa2;
  font-size: 0.72rem;
  font-weight: 800;
}

.local-build-delete-button:hover,
.local-build-delete-button:focus-visible {
  border-color: #e6665b;
  background: #54231f;
  color: #fff;
}

.local-build-manage-button {
  width: 100%;
  min-height: 2.35rem;
  border-color: #66747a;
  background: #252d30;
  color: #dbe4e7;
  font-weight: 800;
}

.local-build-manage-button:hover {
  border-color: #90abb5;
  background: #344147;
}

.local-build-empty {
  padding: 1.4rem 0.75rem;
  border: 1px dashed #38505a;
  color: var(--muted);
  text-align: center;
}

body.simulation-open {
  overflow: hidden;
}

body.weapon-detail-open {
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.weapon-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: #020506c7;
}

.weapon-detail-overlay[hidden] {
  display: none;
}

.weapon-detail-dialog {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  width: min(64rem, calc(100vw - 2rem));
  height: min(56rem, calc(100vh - 1rem));
  height: min(56rem, calc(100dvh - 1rem));
  overflow: hidden;
  border: 1px solid #46798b;
  border-radius: 6px;
  background: #101719;
  box-shadow: 0 1.5rem 5rem #000d;
}

.weapon-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--line);
  background: #172328;
}

.weapon-detail-header h2 {
  color: var(--blue);
  font-size: 1.15rem;
  text-transform: uppercase;
}

.weapon-detail-distance {
  display: grid;
  gap: 0.45rem;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid #26383f;
  background: #0c1316;
}

.weapon-detail-distance > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.weapon-detail-distance label {
  color: #b8d7e2;
  font-weight: 800;
}

.weapon-detail-distance > div:first-child strong {
  color: var(--green);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.weapon-detail-distance > div:first-child strong[data-tone="normal"] { color: var(--blue); }
.weapon-detail-distance > div:first-child strong[data-tone="maximum"] { color: var(--blue); }
.weapon-detail-distance > div:first-child strong[data-tone="minimum"] { color: var(--red); }
.weapon-detail-distance > div:first-child strong[data-tone="zero"] { color: #26343a; }

.weapon-detail-distance > input[type="range"] {
  width: 100%;
  height: 1.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: transparent;
  box-shadow: none;
}

.weapon-detail-distance > input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.48rem;
  border-radius: 999px;
  background:
    var(--weapon-distance-boundaries, linear-gradient(transparent, transparent)),
    linear-gradient(
      to right,
      var(--weapon-distance-tone, var(--blue)) 0 var(--weapon-distance-percent),
      #26343a var(--weapon-distance-percent) 100%
    );
}

.weapon-detail-distance > input[type="range"]::-webkit-slider-thumb {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: -0.285rem;
  border: 2px solid #e9f8fc;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--weapon-distance-tone, var(--blue));
  box-shadow: 0 0 0.3rem color-mix(in srgb, var(--weapon-distance-tone, var(--blue)) 60%, transparent);
}

.weapon-detail-distance > input[type="range"]::-moz-range-track {
  width: 100%;
  height: 0.48rem;
  border: 0;
  border-radius: 999px;
  background:
    var(--weapon-distance-boundaries, linear-gradient(transparent, transparent)),
    linear-gradient(
      to right,
      var(--weapon-distance-tone, var(--blue)) 0 var(--weapon-distance-percent),
      #26343a var(--weapon-distance-percent) 100%
    );
}

.weapon-detail-distance > input[type="range"]::-moz-range-thumb {
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid #e9f8fc;
  border-radius: 50%;
  background: var(--weapon-distance-tone, var(--blue));
}

.weapon-detail-distance > input[type="range"][data-tone="normal"] {
  --weapon-distance-tone: var(--blue);
}

.weapon-detail-distance > input[type="range"][data-tone="maximum"] {
  --weapon-distance-tone: var(--blue);
}

.weapon-detail-distance > input[type="range"][data-tone="minimum"] {
  --weapon-distance-tone: var(--red);
}

.weapon-detail-distance > input[type="range"][data-tone="zero"] {
  --weapon-distance-tone: #26343a;
}

.weapon-detail-distance > input[type="range"]:focus-visible {
  outline: 0;
}

.weapon-detail-distance > input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 0.18rem #e9f8fc;
}

.weapon-detail-distance > input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 0.18rem #e9f8fc;
}

.weapon-detail-distance small {
  color: var(--muted);
}

.weapon-detail-distance-scale {
  position: relative;
  height: 0.52rem;
  overflow: hidden;
  border-radius: 2px;
  background: #1b272c;
}

.weapon-detail-distance-scale i {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 2px;
}

.weapon-detail-distance-scale i.maximum {
  background: var(--blue);
}

.weapon-detail-distance-scale i.minimum {
  background: var(--red);
}

.weapon-detail-distance-scale i.zero {
  background: #26343a;
}

.weapon-detail-distance-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.weapon-detail-distance-legend {
  display: flex;
  gap: 0.75rem;
  color: var(--muted);
  font-size: 0.7rem;
}

.weapon-detail-distance-legend span {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
}

.weapon-detail-distance-legend span::before {
  width: 0.65rem;
  height: 0.25rem;
  border-radius: 1px;
  background: currentColor;
  content: "";
}

.weapon-detail-distance-legend .maximum {
  color: var(--blue);
}

.weapon-detail-distance-legend .near-maximum {
  color: var(--green);
}

.weapon-detail-distance-legend .minimum {
  color: var(--red);
}

.weapon-detail-distance-legend .zero {
  color: #26343a;
}

.weapon-detail-distance-legend .zero::before {
  box-shadow: 0 0 0 1px #607780;
}

.weapon-detail-option-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  align-items: center;
  justify-content: flex-end;
}

.weapon-detail-option-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.4rem;
  align-items: center;
  color: #c7d7dc;
  font-size: 0.75rem;
  font-weight: 800;
}

.weapon-detail-option-toggle input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--red);
}

.weapon-detail-option-toggle strong {
  min-width: 2rem;
  color: var(--muted);
  text-align: right;
}

.weapon-detail-ghost-toggle.active strong {
  color: var(--red);
}

.weapon-detail-range-combination-toggle input {
  accent-color: var(--blue);
}

.weapon-detail-range-combination-toggle.active strong {
  color: var(--blue);
}

.weapon-detail-metric-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 0.4rem 0.85rem 0;
  background: #26383f;
}

.weapon-detail-metric-tabs button {
  min-height: 2.15rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: #10191d;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.weapon-detail-metric-tabs button:hover {
  color: #e7f4f6;
}

.weapon-detail-metric-tabs button.active {
  border-bottom-color: var(--blue);
  background: #17262c;
  color: var(--blue);
}

.weapon-detail-metrics {
  display: grid;
  gap: 1px;
  padding: 0.35rem 0.85rem 0.2rem;
  background: #26383f;
}

.weapon-detail-metric-row {
  display: grid;
  grid-template-columns: 5rem repeat(4, minmax(0, 1fr));
  gap: 1px;
}

.weapon-detail-metric-row.heat {
  border-top: 1px solid #38505a;
}

.weapon-detail-metric-row.heat + .weapon-detail-metric-row.damage {
  margin-top: 0.3rem;
  border-top: 1px solid #38505a;
}

.weapon-detail-metric-row > div {
  display: grid;
  gap: 0.2rem;
  padding: 0.5rem;
  background: #142026;
}

.weapon-detail-metrics .weapon-detail-metric-row-label {
  display: grid;
  place-items: center;
  padding: 0.4rem;
  background: #10191d;
  color: var(--blue);
  font-size: 0.72rem;
  text-align: center;
  text-transform: uppercase;
}

.weapon-detail-metric-row-label span {
  display: block;
}

.weapon-detail-metric-row-label span + span {
  color: inherit;
  font-size: 0.62rem;
  opacity: 0.72;
}

.weapon-detail-metric-row.heat .weapon-detail-metric-row-label {
  color: var(--red);
}

.weapon-detail-metrics span,
.weapon-detail-list-header {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.weapon-detail-metrics strong {
  color: var(--green);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.weapon-detail-list-header,
.weapon-detail-row {
  display: grid;
  grid-template-columns: minmax(15rem, 1.5fr) 7rem 10rem 5rem 7rem 10rem;
  gap: 0.55rem;
  align-items: center;
}

.weapon-detail-list-header {
  padding: 0.45rem 0.85rem;
  border-bottom: 1px solid #26383f;
  background: #172328;
}

.weapon-detail-table {
  min-height: 0;
  overflow: auto;
}

.weapon-detail-list {
  overflow: visible;
}

.weapon-detail-row {
  min-width: 57rem;
  min-height: 2.45rem;
  padding: 0.28rem 0.85rem;
  border-bottom: 1px solid #26343a;
  border-left: 4px solid #54717c;
  background: #101719;
  color: #c8d6da;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.weapon-detail-row:nth-child(even) {
  background: #172126;
}

.weapon-detail-row.energy { border-left-color: var(--yellow); }
.weapon-detail-row.missile { border-left-color: var(--missile); }
.weapon-detail-row.ballistic { border-left-color: var(--purple); }

.weapon-detail-row.disabled {
  opacity: 0.48;
}

.weapon-detail-name {
  display: flex;
  min-width: 0;
  gap: 0.4rem;
  align-items: center;
}

.weapon-detail-name strong {
  min-width: 0;
  overflow: hidden;
  color: #dce9ed;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weapon-detail-row.range-high .weapon-detail-name strong { color: var(--green); }
.weapon-detail-row.range-medium .weapon-detail-name strong { color: var(--yellow); }
.weapon-detail-row.range-low .weapon-detail-name strong { color: var(--red); }

.weapon-detail-row small {
  color: var(--muted);
}

.weapon-detail-weapon {
  display: grid;
  grid-template-columns: minmax(6rem, 1fr) minmax(5rem, 0.8fr) 2.6rem;
  min-width: 0;
  gap: 0.45rem;
  align-items: center;
}

.weapon-detail-weapon output {
  flex: 0 0 auto;
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 900;
}

.weapon-detail-weapon label,
.weapon-detail-weapon input {
  min-width: 0;
  width: 100%;
}

.weapon-detail-weapon input {
  display: block;
  height: 1.1rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: transparent;
  box-shadow: none;
}

.weapon-detail-weapon input::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.38rem;
  border: 1px solid #46606a;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--green) 0 var(--weapon-frequency-percent),
    #26343a var(--weapon-frequency-percent) 100%
  );
}

.weapon-detail-weapon input::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.31rem;
  border: 2px solid #dfffee;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--green);
  box-shadow: 0 0 0.3rem #46d98b88;
}

.weapon-detail-weapon input:focus-visible {
  outline: 0;
}

.weapon-detail-weapon input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 0.18rem #bfeaff, 0 0 0.3rem #46d98b88;
}

.weapon-detail-weapon input::-moz-range-track {
  width: 100%;
  height: 0.38rem;
  border: 1px solid #46606a;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--green) 0 var(--weapon-frequency-percent),
    #26343a var(--weapon-frequency-percent) 100%
  );
}

.weapon-detail-weapon input::-moz-range-thumb {
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid #dfffee;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0.3rem #46d98b88;
}

.weapon-detail-weapon input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 0.18rem #bfeaff, 0 0 0.3rem #46d98b88;
}

.simulation-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 0.5rem;
  background: #020506b8;
}

.simulation-overlay[hidden] {
  display: none;
}

.simulation-dialog {
  display: grid;
  grid-template-rows: auto auto auto auto auto auto auto minmax(0, 1fr);
  width: min(54rem, calc(100vw - 1rem));
  height: 75vh;
  height: 75dvh;
  min-width: 44rem;
  overflow: hidden;
  border: 1px solid #46798b;
  border-radius: 6px;
  background: #101719;
  box-shadow: 0 1.5rem 5rem #000c;
}

.simulation-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--line);
  background: #172328;
}

.simulation-header h2 {
  color: var(--blue);
  font-size: 1.15rem;
  text-transform: uppercase;
}

.simulation-header p {
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.simulation-close-button {
  min-width: 2rem;
  min-height: 2rem;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1;
}

.simulation-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  padding: 0.48rem 0.7rem;
  border-bottom: 1px solid #26383f;
  background: #0a1012;
}

.simulation-metrics > div {
  display: grid;
  gap: 0.15rem;
  padding: 0.36rem 0.55rem;
  border-left: 3px solid var(--blue);
  background: #142026;
}

.simulation-metrics span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.simulation-metrics strong {
  color: var(--green);
  font-size: 1.35rem;
}

.simulation-heat-metric {
  border-left-color: var(--yellow) !important;
}

#simulation-heat-label {
  min-height: 1em;
  white-space: nowrap;
}

.simulation-heat-readout {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
  white-space: nowrap;
}

.simulation-heat-readout strong {
  color: var(--yellow);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.simulation-heat-readout small {
  color: #f0a74d;
  font-size: 0.68rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.simulation-heat-bar {
  position: relative;
  height: 0.9rem;
  margin-top: 0.22rem;
  overflow: hidden;
  border-radius: 999px;
  background: #3b3230;
}

.simulation-heat-bar i {
  position: absolute;
  inset: 0;
  display: block;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--yellow), #ef8d3e 65%, var(--red));
  box-shadow: 0 0 0.4rem #df654f88;
  will-change: transform;
}

.simulation-heat-bar small {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff4dc;
  font-size: 0.58rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 1px 2px #000, 0 0 0.3rem #000;
}

.simulation-heat-metric.overheated {
  border-left-color: var(--red) !important;
  background: #371714;
  animation: simulation-overheat-pulse 0.7s ease-in-out infinite alternate;
}

.simulation-heat-metric.overheated strong,
.simulation-heat-metric.overheated small,
.simulation-heat-metric.overheated > span {
  color: #ff8974;
}

@keyframes simulation-overheat-pulse {
  from { box-shadow: inset 0 0 0 #df654f00; }
  to { box-shadow: inset 0 0 1.1rem #df654f44; }
}

.simulation-scenario-panel {
  display: grid;
  gap: 0.38rem;
  padding: 0.42rem 0.7rem 0.48rem;
  border-bottom: 1px solid #26383f;
  background: #0d1518;
}

.simulation-scenario-toolbar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.simulation-scenario-toolbar > strong {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 0.78rem;
}

.simulation-scenario-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 1;
  gap: 0.3rem;
}

.simulation-scenario-option {
  min-width: 0;
  cursor: pointer;
}

.simulation-scenario-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.simulation-scenario-option span {
  display: grid;
  place-items: center;
  min-height: 1.55rem;
  padding: 0.12rem 0.38rem;
  overflow: hidden;
  border: 1px solid #344d57;
  border-radius: 3px;
  background: #172227;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simulation-scenario-option:hover span,
.simulation-scenario-option.active span,
.simulation-scenario-option input:focus-visible + span {
  border-color: var(--blue);
  background: #1f4453;
  color: #fff;
}

.simulation-target-stage {
  position: relative;
  min-height: 13.5rem;
  overflow: hidden;
  border: 1px solid #304850;
  border-radius: 4px;
  background:
    linear-gradient(#08101344, #081013aa),
    repeating-linear-gradient(90deg, #17282e 0 1px, transparent 1px 4rem),
    linear-gradient(180deg, #15262c 0 72%, #202b2c 72%);
  box-shadow: inset 0 0 2rem #0009;
}

.simulation-target-stage::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 27%;
  left: 0;
  height: 1px;
  background: #45606a88;
  box-shadow: 0 0 0.7rem #5c8b9c55;
}

.simulation-enemy {
  position: absolute;
  z-index: 2;
  bottom: 0.18rem;
  left: 50%;
  display: grid;
  width: 18rem;
  padding-bottom: 0.85rem;
  justify-items: center;
  transform: translateX(-50%);
  transition: filter 0.55s ease, opacity 0.55s ease;
}

.simulation-enemy-hud {
  display: grid;
  width: 100%;
  grid-template-columns: 5.4rem 5.2rem 5.4rem;
  align-items: end;
  gap: 1rem;
}

.simulation-enemy-center {
  display: grid;
  width: 5.2rem;
  justify-items: center;
}

.simulation-enemy-damage-hud {
  position: relative;
  z-index: 9;
  display: grid;
  width: 5.4rem;
  min-height: 2.25rem;
  place-items: end center;
  pointer-events: none;
}

.simulation-enemy-damage-hud > strong {
  color: #fff2a3;
  font-size: 1.12rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 0 0.2rem #000, 0 0 0.55rem #e9c94aaa;
}

#simulation-enemy-damage-events {
  position: relative;
  width: 100%;
  height: 1rem;
}

.simulation-damage-event {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ff8b79;
  font-size: 0.76rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 0.25rem #000, 0 0 0.45rem #df654f;
  animation: simulation-damage-event 760ms ease-out forwards;
}

@keyframes simulation-damage-event {
  from { opacity: 1; transform: translate(var(--damage-offset), 0) scale(1.12); }
  to { opacity: 0; transform: translate(var(--damage-offset), 0.65rem) scale(0.92); }
}

.simulation-enemy-group-cooldowns {
  display: grid;
  align-self: end;
  justify-self: end;
  width: 4.23rem;
  gap: 0.32rem;
  padding-bottom: 1rem;
}

.simulation-enemy-group-cooldowns > div {
  display: grid;
  width: 100%;
  grid-template-columns: 0.75rem 3.2rem;
  align-items: center;
  gap: 0.28rem;
}

.simulation-enemy-group-cooldowns span {
  display: block;
  width: 0.75rem;
  color: #a9c3cc;
  font-size: 0.68rem;
  font-weight: 900;
  text-align: center;
}

.simulation-enemy-group-cooldowns b {
  display: block;
  width: 3.2rem;
  height: 0.58rem;
  overflow: hidden;
  border: 1px solid #3b4c52;
  border-radius: 2px;
  background: #080d0f;
  box-shadow: inset 0 0 0.2rem #000;
}

.simulation-enemy-group-cooldowns b i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #327fa0, var(--blue));
  box-shadow: 0 0 0.35rem #49a6c877;
  will-change: transform;
}

.simulation-enemy-group-cooldowns .ready span {
  color: var(--yellow);
}

.simulation-enemy-group-cooldowns .ready b i {
  background: linear-gradient(90deg, #d6a914, var(--yellow));
  box-shadow: 0 0 0.4rem #f2cf4f99;
}

.simulation-enemy-group-cooldowns .unassigned {
  opacity: 0.35;
}

.simulation-enemy-heat {
  position: relative;
  align-self: end;
  justify-self: center;
  width: 0.72rem;
  height: 5.8rem;
  margin-bottom: 0.7rem;
  overflow: hidden;
  border: 1px solid #59483a;
  border-radius: 3px;
  background: #130d0b;
  box-shadow: inset 0 0 0.25rem #000;
}

.simulation-enemy-heat i {
  position: absolute;
  inset: 0;
  display: block;
  transform: scaleY(0);
  transform-origin: center bottom;
  background: linear-gradient(0deg, var(--yellow), #ef8d3e 65%, var(--red));
  box-shadow: 0 0 0.45rem #df654f88;
  will-change: transform;
}

.simulation-enemy-heat.overheated {
  border-color: #ff7463;
  box-shadow: 0 0 0.55rem #df654f88, inset 0 0 0.25rem #000;
}

.simulation-enemy small {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  color: #ff756b;
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-shadow: 0 0 0.4rem #ff3f3488;
}

.simulation-enemy-figure {
  position: relative;
  width: 5.1rem;
  height: 5.6rem;
  filter: drop-shadow(0 0 0.45rem #dc4e47aa);
}

.simulation-hit-effect {
  position: absolute;
  z-index: 8;
  display: block;
  width: 0.72rem;
  height: 0.72rem;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.simulation-hit-effect.energy {
  border: 2px solid #8be8ff;
  border-radius: 50%;
  background: #e8fbff;
  box-shadow: 0 0 0.35rem #56d9ff, 0 0 0.7rem #56d9ffaa;
  animation: simulation-energy-hit 360ms ease-out forwards;
}

.simulation-hit-effect.energy::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.35rem;
  width: 1.35rem;
  height: 2px;
  background: #d8f8ff;
  box-shadow: 0 0 0.3rem #56d9ff;
  transform: rotate(-32deg);
}

.simulation-hit-effect.ballistic {
  background: conic-gradient(from 10deg, #fff4bd, transparent 8%, #ffb23e 14%, transparent 22%, #fff4bd 30%, transparent 38%, #ff8a31 46%, transparent 58%, #fff4bd 68%, transparent 78%, #ffb23e 88%, transparent);
  clip-path: polygon(50% 0, 60% 37%, 100% 24%, 68% 50%, 100% 72%, 61% 63%, 48% 100%, 39% 63%, 0 76%, 31% 50%, 0 27%, 39% 37%);
  filter: drop-shadow(0 0 0.22rem #ff8a31);
  animation: simulation-ballistic-hit 300ms ease-out forwards;
}

.simulation-hit-effect.missile {
  width: 1rem;
  height: 1rem;
  border: 1px solid #ffd06a;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8cf 0 12%, #ffb13c 20%, #e94d32 48%, transparent 70%);
  box-shadow: 0 0 0.6rem #ff5b3dbb;
  animation: simulation-missile-hit 420ms ease-out forwards;
}

.simulation-hit-effect.other {
  border: 1px solid #e6eef1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0.4rem #d7f3ff;
  animation: simulation-energy-hit 300ms ease-out forwards;
}

@keyframes simulation-energy-hit {
  from { opacity: 1; transform: translate(-50%, -50%) scale(0.35); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.65); }
}

@keyframes simulation-ballistic-hit {
  from { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(0.45); }
  to { opacity: 0; transform: translate(-50%, -50%) rotate(70deg) scale(1.6); }
}

@keyframes simulation-missile-hit {
  from { opacity: 1; transform: translate(-50%, -50%) scale(0.25); }
  55% { opacity: 0.9; }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.85); }
}

@media (prefers-reduced-motion: reduce) {
  .simulation-hit-effect {
    animation-duration: 1ms !important;
  }
}

.simulation-enemy-figure > i:not(.simulation-hit-effect) {
  position: absolute;
  display: block;
  border: 1px solid #ff9a90;
  background: #a93431;
}

.simulation-enemy-head {
  top: 0;
  left: 50%;
  width: 1.52rem;
  height: 1.13rem;
  transform: translateX(-50%);
  clip-path: polygon(18% 0, 82% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%);
}

.simulation-enemy-body {
  top: 1.01rem;
  left: 50%;
  width: 2.89rem;
  height: 2.54rem;
  transform: translateX(-50%);
  clip-path: polygon(12% 0, 88% 0, 100% 28%, 82% 100%, 18% 100%, 0 28%);
}

.simulation-enemy-arm {
  top: 1.36rem;
  width: 0.82rem;
  height: 2.54rem;
}

.simulation-enemy-arm.left {
  left: 0.35rem;
  transform: rotate(8deg);
}

.simulation-enemy-arm.right {
  right: 0.35rem;
  transform: rotate(-8deg);
}

.simulation-enemy-leg {
  top: 3.35rem;
  width: 0.94rem;
  height: 2.05rem;
}

.simulation-enemy-leg.left {
  left: 1.29rem;
  transform: rotate(4deg);
}

.simulation-enemy-leg.right {
  right: 1.29rem;
  transform: rotate(-4deg);
}

.simulation-wall {
  position: absolute;
  z-index: 4;
  top: 0;
  right: -60%;
  bottom: 0;
  width: 60%;
  border-left: 4px solid #728188;
  background:
    linear-gradient(90deg, #1b2326cc, transparent 20%),
    repeating-linear-gradient(0deg, transparent 0 1rem, #192124 1rem 1.08rem),
    repeating-linear-gradient(90deg, #465258 0 2.5rem, #3a454a 2.5rem 5rem);
  box-shadow: -0.8rem 0 1.5rem #000b;
  transform: translateX(0);
  transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
}

.simulation-target-stage.target-hidden .simulation-wall {
  transform: translateX(-100%);
}

.simulation-target-stage.target-hidden .simulation-enemy {
  filter: brightness(0.55);
  opacity: 0.7;
}

.simulation-target-stage.scenario-finished {
  border-color: #627077;
}

.simulation-target-readout {
  position: absolute;
  z-index: 5;
  top: 0.45rem;
  right: 0.55rem;
  left: 0.55rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem;
  pointer-events: none;
}

.simulation-target-readout > span {
  padding: 0.18rem 0.38rem;
  border-radius: 3px;
  background: #071013cc;
  color: var(--blue);
  font-size: 0.65rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.simulation-environment-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  pointer-events: auto;
}

.simulation-environment-options > label {
  display: grid;
  grid-template-columns: auto minmax(4rem, auto);
  align-items: center;
  gap: 0.3rem;
  min-height: 1.55rem;
  padding: 0.16rem 0.3rem;
  border: 1px solid #304850;
  border-radius: 3px;
  background: #071013e8;
  color: #a9c3cc;
  font-size: 0.62rem;
  font-weight: 800;
}

.simulation-option-label {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  white-space: nowrap;
}

.simulation-option-help {
  position: relative;
  display: inline-grid;
  width: 0.9rem;
  height: 0.9rem;
  padding: 0;
  place-items: center;
  border: 1px solid #52727e;
  border-radius: 50%;
  background: #17292f;
  color: var(--blue);
  cursor: help;
  font: 900 0.58rem/1 sans-serif;
}

.simulation-option-help::before,
.simulation-option-help::after {
  position: absolute;
  z-index: 30;
  left: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -0.2rem);
  transition: opacity 120ms ease, transform 120ms ease;
}

.simulation-option-help::before {
  content: "";
  top: calc(100% + 0.18rem);
  border-right: 0.28rem solid transparent;
  border-bottom: 0.32rem solid #65848f;
  border-left: 0.28rem solid transparent;
}

.simulation-option-help::after {
  content: attr(data-tooltip);
  top: calc(100% + 0.48rem);
  width: max-content;
  max-width: min(16rem, 70vw);
  padding: 0.4rem 0.48rem;
  border: 1px solid #65848f;
  border-radius: 3px;
  background: #071013f5;
  box-shadow: 0 0.35rem 0.8rem #0009;
  color: #d7e7eb;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
}

.simulation-option-help:hover,
.simulation-option-help:focus-visible {
  border-color: var(--blue);
  outline: none;
}

.simulation-option-help:hover::before,
.simulation-option-help:hover::after,
.simulation-option-help:focus-visible::before,
.simulation-option-help:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.simulation-environment-options > label:first-child .simulation-option-help::after {
  left: -0.5rem;
  transform: translate(0, -0.2rem);
}

.simulation-environment-options > label:first-child .simulation-option-help:hover::after,
.simulation-environment-options > label:first-child .simulation-option-help:focus-visible::after {
  transform: translate(0, 0);
}

.simulation-environment-options select,
.simulation-environment-options input {
  min-width: 0;
  height: 1.35rem;
  border: 1px solid #41616d;
  border-radius: 2px;
  background: #13242a;
  color: #e8f3f6;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.simulation-environment-options select {
  padding: 0 1.25rem 0 0.25rem;
}

.simulation-environment-options input {
  width: 3.5rem;
  padding: 0 0.25rem;
  text-align: right;
}

.simulation-environment-options .simulation-overheat-option {
  grid-template-columns: auto 1rem;
}

.simulation-environment-options .simulation-splash-option {
  grid-template-columns: auto 1rem;
}

.simulation-environment-options .simulation-overheat-option input,
.simulation-environment-options .simulation-splash-option input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

.simulation-environment-options select:focus-visible,
.simulation-environment-options input:focus-visible {
  border-color: var(--blue);
  outline: 1px solid var(--blue);
}

.simulation-distance-input {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--blue);
}

.simulation-distance-input small {
  font-size: 0.6rem;
}

.simulation-group-status {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  padding: 0.38rem 0.7rem;
  border-bottom: 1px solid #26383f;
}

.simulation-group-key {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2rem;
  padding: 0.15rem 0.35rem;
  border: 1px solid #35505b;
  border-radius: 4px;
  background: #111b1f;
  color: inherit;
  cursor: pointer;
  font: inherit;
  touch-action: none;
  user-select: none;
}

.simulation-group-key strong {
  color: var(--blue);
  font-size: 1.15rem;
}

.simulation-group-key span {
  color: var(--muted);
  font-size: 0.75rem;
}

.simulation-group-key.ready {
  border-color: #ffe45c;
  background: #ffe45c;
  color: #181400;
  box-shadow: 0 0 9px #ffe45c66, inset 0 0 0 1px #fff3a0;
}

.simulation-group-key.firing {
  border-color: #ff7463;
  background: #a83226;
  color: #fff;
  box-shadow: 0 0 9px #df654f66, inset 0 0 0 1px #ff8b7c88;
}

.simulation-group-key.held {
  border-color: var(--blue);
  background: #185f7a;
  color: #fff;
  box-shadow: 0 0 9px #49a6c866, inset 0 0 0 1px #70c6e688;
}

.simulation-group-key.ready strong,
.simulation-group-key.ready span {
  color: #181400;
}

.simulation-group-key.firing strong,
.simulation-group-key.firing span,
.simulation-group-key.held strong,
.simulation-group-key.held span {
  color: #fff;
}

.simulation-group-key:not(.ready):not(.firing):not(.held):hover {
  border-color: var(--blue);
  background: #172a31;
}

.simulation-fire-hint {
  margin: 0;
  padding: 0.22rem 0.7rem 0.3rem;
  border-bottom: 1px solid #26383f;
  background: #0d1518;
  color: var(--muted);
  font-size: 0.68rem;
  text-align: center;
}

.simulation-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0.7rem;
}

.simulation-toolbar > strong {
  color: var(--text);
  font-size: 0.82rem;
}

.simulation-list-header,
.simulation-weapon-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) 3.2rem 4.8rem 4.5rem 9rem;
  align-items: center;
  gap: 0.35rem;
}

.simulation-list-header {
  min-height: 1.45rem;
  padding: 0 0.55rem;
  border-block: 1px solid #29414a;
  background: #1a282d;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.simulation-weapon-list {
  min-height: 0;
  overflow: auto;
  padding-bottom: 0;
}

.simulation-weapon-row {
  min-height: 2.05rem;
  padding: 0.16rem 0.55rem;
  border-bottom: 1px solid #223238;
}

.simulation-weapon-row > span {
  color: #dce6e9;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.simulation-weapon-name {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  padding-left: 0.32rem;
  border-left: 3px solid var(--purple);
}

.simulation-weapon-name.energy { border-left-color: var(--yellow); }
.simulation-weapon-name.missile { border-left-color: var(--missile); }
.simulation-weapon-name.ballistic { border-left-color: var(--purple); }

.simulation-weapon-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.45rem;
  min-width: 0;
}

.simulation-weapon-title strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.76rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simulation-weapon-title span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
}

.simulation-cooldown {
  position: relative;
  height: 0.58rem;
  overflow: hidden;
  border: 1px solid #3b4c52;
  border-radius: 2px;
  background: #080d0f;
  box-shadow: inset 0 0 0.2rem #000;
}

.simulation-cooldown i {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, #327fa0, var(--blue));
  box-shadow: 0 0 0.35rem #49a6c877;
  transition: background 0.12s ease, box-shadow 0.12s ease;
  will-change: transform;
}

.simulation-cooldown.ready i {
  background: linear-gradient(90deg, #d6a914, var(--yellow));
  box-shadow: 0 0 0.4rem #f2cf4f99;
}

.simulation-cooldown.jammed {
  border-color: #ff5b4d;
}

.simulation-cooldown.jammed i {
  background: linear-gradient(90deg, #7e1717, #ef4538);
  box-shadow: 0 0 0.4rem #ff493899;
}

.simulation-cooldown b {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 0.48rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 2px #000, 0 0 0.25rem #000;
  pointer-events: none;
}

.simulation-group-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.14rem;
}

.simulation-group-option {
  cursor: pointer;
}

.simulation-group-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.simulation-group-option span {
  display: grid;
  place-items: center;
  min-height: 1.35rem;
  border: 1px solid #38525c;
  border-radius: 3px;
  background: #182328;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.simulation-group-option:hover span,
.simulation-group-option.active span,
.simulation-group-option input:focus-visible + span {
  border-color: var(--blue);
  background: #214557;
  color: #fff;
}

.simulation-empty {
  display: grid;
  place-items: center;
  min-height: 10rem;
  color: var(--muted);
}

.section-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.info-quirks-card .section-title-row {
  border-bottom: 1px solid #263840;
  padding-bottom: 0.35rem;
}

.quirks {
  display: block;
  margin-top: 0.4rem;
}

.quirk-overview-card {
  border: 1px solid #34505a;
  border-radius: 4px;
  background: #111719;
  margin: 0 0 0.8rem;
  padding: 0.75rem;
}

.info-quirk-summary-card {
  margin: 0;
}

.quirk-overview-card h3 {
  color: var(--blue);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

.quirk-overview-table {
  display: grid;
  gap: 0.25rem;
}

.quirk-overview-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(5rem, auto);
  align-items: center;
  min-height: 2.25rem;
  border: 1px solid #263840;
  background: #0b1417;
  padding: 0.35rem 0.55rem;
}

.quirk-overview-head {
  background: #1a2428;
  color: var(--muted);
  font-weight: 700;
}

.quirk-overview-special-row {
  grid-template-columns: minmax(5rem, auto) minmax(0, 1fr);
  align-items: start;
  gap: 0.6rem;
}

.quirk-overview-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem 0;
  min-width: 0;
}

.quirk-overview-tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  border: 1px solid #31505b;
  border-radius: 999px;
  background: #142026;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.1;
  padding: 0.22rem 0.55rem;
}

.quirk-overview-tag:not(:last-child)::after {
  content: ",";
  margin-left: 0.35rem;
  color: var(--muted);
}

.quirk-overview-empty-text {
  color: var(--muted);
  font-weight: 700;
}

.quirk-overview-row > span,
.quirk-overview-row > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quirk-overview-row > strong {
  color: var(--text);
  text-align: right;
}

.quirk-summary {
  --summary-accent: var(--blue);
  border-bottom: 1px solid #263840;
  margin-bottom: 0.7rem;
  padding: 0.15rem 0 0.75rem;
}

.quirk-summary-cooldown {
  --summary-accent: #4cb5f5;
}

.quirk-summary-heat {
  --summary-accent: #f0e51e;
}

.quirk-summary-velocity {
  --summary-accent: #9ac95f;
}

.quirk-summary-range {
  --summary-accent: #6fb8ff;
}

.quirk-summary-duration {
  --summary-accent: #aa73d7;
}

.quirk-summary-spread {
  --summary-accent: #3b8c95;
}

.quirk-summary-durability {
  --summary-accent: #f3f4ee;
}

.quirk-summary-title {
  color: var(--summary-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.25;
  margin: 0 0 0.22rem;
}

.quirk-summary-accent {
  width: min(18rem, 100%);
  height: 0.18rem;
  margin: 0 0 0.35rem;
  background: var(--summary-accent);
}

.quirk-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.6rem, 8.6rem));
  gap: 0.28rem;
}

.quirk-summary-item {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  border-left: 2px solid currentColor;
  background: #111517;
  color: #4cb5f5;
  padding: 0.4rem 0.48rem;
}

.quirk-summary-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: currentColor;
  font-size: 0.72rem;
  line-height: 1.15;
}

.quirk-summary-item strong {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.1;
}

.quirk-summary-max {
  color: var(--yellow);
}

.quirk-summary-empty {
  visibility: hidden;
}

.quirk-section + .quirk-section {
  margin-top: 1rem;
}

.quirk-section-title {
  border-bottom: 1px solid #263840;
  color: var(--blue);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.3;
  margin-bottom: 0.25rem;
  padding-bottom: 0.35rem;
}

.quirk-rows {
  display: grid;
  gap: 0;
}

.quirk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  min-height: 1.5rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0.05rem 1.35rem 0.05rem 1.2rem;
}

.quirk:nth-child(even) {
  background: #1f2023;
}

.quirk-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  line-height: 1.25;
}

.quirk-value {
  font-size: 0.92rem;
  line-height: 1.25;
  min-width: 4.1rem;
  text-align: right;
  white-space: nowrap;
}

.quirk-tone-default,
.quirk-tone-default .quirk-value {
  color: #4cb5f5;
}

.quirk-tone-global,
.quirk-tone-global .quirk-value {
  color: #4cb5f5;
}

.quirk-tone-energy,
.quirk-tone-energy .quirk-value {
  color: #f0e51e;
}

.quirk-tone-missile,
.quirk-tone-missile .quirk-value {
  color: #45da86;
}

.quirk-tone-ballistic,
.quirk-tone-ballistic .quirk-value {
  color: #cb78f5;
}

.quirk-tone-other,
.quirk-tone-other .quirk-value {
  color: #ff9b42;
}

.quirk-tone-armor,
.quirk-tone-armor .quirk-value {
  color: #f3f4ee;
}

.quirk-tone-structure,
.quirk-tone-structure .quirk-value {
  color: #b8c8ce;
}

.quirk-tone-ammo,
.quirk-tone-ammo .quirk-value {
  color: #ff9b42;
}

.quirk-tone-harmful .quirk-value,
.mech-summary-quirk.quirk-tone-harmful strong,
.omnipod-tooltip-quirk.quirk-tone-harmful strong {
  color: var(--red);
}

.quirk.inactive,
.quirk.inactive .quirk-value,
.mech-summary-quirk.inactive,
.mech-summary-quirk.inactive strong,
.omnipod-tooltip-quirk.inactive,
.omnipod-tooltip-quirk.inactive strong {
  color: #596267 !important;
}

.components-panel,
.equipment-panel {
  min-width: 0;
  min-height: 0;
}

.components-panel {
  position: relative;
  overflow: auto;
  padding-right: 0.15rem;
}

.mechlab-panel-title {
  height: 1.8rem;
  margin: 0;
  color: #aebdc2;
  font-size: 0.85rem;
  line-height: 1.8rem;
}

.ghost-heat-warning {
  position: absolute;
  z-index: 8;
  top: 0.2rem;
  left: 0.4rem;
  display: grid;
  width: 1.55rem;
  height: 1.45rem;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 1px solid #ff8d5c;
  border-radius: 3px;
  background: #301a14;
  box-shadow: inset 0 0 0 1px #ff8d5c24;
  color: #ffc0a3;
  cursor: help;
  font: 900 0.9rem/1 sans-serif;
}

.ghost-heat-warning[hidden] {
  display: none;
}

.ghost-heat-warning:hover,
.ghost-heat-warning:focus-visible {
  border-color: #ffd1bc;
  background: #482219;
  color: #fff;
  outline: none;
}

.mechlab-workspace .hardpoint-chip {
  min-height: 1.45rem;
  font-size: 0.8rem;
}

.mechlab-workspace .hardpoint-icon {
  height: 1.45rem;
}

.components {
  display: grid;
  grid-template-columns: repeat(5, minmax(12rem, 1fr));
  align-items: start;
  gap: 0.55rem;
  min-width: 62rem;
  padding-bottom: 0.5rem;
}

.component-column {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  align-content: start;
}

.component-column-right-body,
.component-column-left-body {
  padding-top: 1.25rem;
}

.component-column-right-arm,
.component-column-left-arm {
  padding-top: 2.5rem;
}

.component {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel);
  overflow: hidden;
  transition: border-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

.component.invalid {
  border-color: #7c433a;
}

.component.drop-valid {
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green), 0 0 0 1px rgba(73, 191, 127, 0.22);
}

.component.drop-invalid {
  border-color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red), 0 0 0 1px rgba(220, 78, 71, 0.22);
}

.component-head {
  min-height: 9.5rem;
  padding: 0.5rem 0.55rem;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}

.component-title {
  color: #d7e2e5;
  font-size: 0.86rem;
  font-weight: 700;
  text-transform: uppercase;
}

.component-stat-title {
  margin: 0.4rem -0.55rem 0;
  padding: 0.2rem 0.55rem;
  border-top: 1px solid #344147;
  border-bottom: 1px solid #28343a;
  background: #111719;
  color: #bec9cd;
  font-size: 0.78rem;
  font-weight: 800;
}

.component-armor-controls {
  display: grid;
  gap: 0.28rem;
  margin: 0 -0.55rem;
  padding: 0.2rem 0;
  background: #171e22;
}

.component-armor-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: center;
  min-height: 2.12rem;
  padding: 0.12rem 0.35rem;
  background: #090d0f;
}

.component-armor-allocation {
  display: grid;
  grid-template-columns: minmax(1.8rem, 1fr) auto 1.9rem;
  gap: 0.18rem;
  align-items: center;
  min-width: 0;
  padding-right: 0.35rem;
  border-right: 1px solid #28343a;
}

.component-armor-capacity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  min-width: 0;
  padding-left: 0.4rem;
}

.component-armor-side,
.component-armor-limit-label,
.component-armor-max-row > div > span {
  color: #93a4aa;
  font-size: 0.7rem;
  font-weight: 800;
}

.component-armor-value {
  width: 2.65rem;
  min-width: 0;
  height: 1.62rem;
  padding: 0.05rem 0.28rem;
  border: 1px solid #48575e;
  border-radius: 2px;
  background: #111719;
  color: #f3f4ee;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
  text-align: right;
  appearance: textfield;
}

.component-armor-value::-webkit-inner-spin-button,
.component-armor-value::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.component-armor-value:focus {
  border-color: #e5c84e;
  outline: 1px solid rgba(229, 200, 78, 0.35);
}

.component-armor-value.empty {
  color: #667177;
}

.component-armor-value.quirk-only {
  color: var(--yellow);
}

.component-armor-value.allocated {
  color: #f3f4ee;
}

.component-armor-value.quirk-applied {
  color: var(--green);
}

.component-armor-stepper {
  display: grid;
  grid-template-rows: repeat(2, 1rem);
  gap: 1px;
  width: 1.8rem;
}

.component-armor-stepper button {
  display: grid;
  place-items: center;
  width: 1.8rem;
  min-width: 1.8rem;
  height: 1rem;
  padding: 0;
  border-color: #45545b;
  border-radius: 2px;
  background: #252c31;
  color: #e8edef;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
}

.component-armor-stepper button:disabled {
  border-color: #283238;
  background: #171d20;
  color: #56636a;
  cursor: default;
  opacity: 1;
}

.component-armor-limit {
  color: #f3f4ee;
  font-size: 0.86rem;
  text-align: right;
}

.component-armor-maximum {
  color: #c8d0d3;
}

.component-armor-limit.quirk-applied > .component-armor-max-final,
.component-armor-max-value.quirk-applied > .component-armor-max-final {
  color: var(--green);
}

.component-armor-max-detail,
.component-armor-max-base,
.component-armor-max-operator {
  color: #93a4aa;
}

.component-armor-max-bonus {
  color: var(--yellow);
}

.component-armor-limit,
.component-armor-max-value {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.22rem;
  min-width: 0;
  margin-left: auto;
  white-space: nowrap;
}

.component-armor-max-detail {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1rem;
  font-size: 0.68rem;
  font-weight: 700;
}

.component-armor-limit.compact,
.component-armor-max-value.compact {
  gap: 0.12rem;
  font-size: 0.72rem;
}

.component-armor-limit.compact .component-armor-max-detail,
.component-armor-max-value.compact .component-armor-max-detail {
  gap: 0.06rem;
  font-size: 0.58rem;
}

.component-armor-max-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: center;
  min-height: 1.55rem;
  padding: 0.18rem 0.35rem;
  background: #090d0f;
}

.component-armor-max-row > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  min-width: 0;
  padding-left: 0.4rem;
  border-left: 1px solid #28343a;
}

.component-structure-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 1.55rem;
  padding: 0.18rem 0.35rem;
}

.component-armor-max-row strong {
  color: #c8d0d3;
  font-size: 0.8rem;
}

.component-structure-row strong {
  color: #c8d0d3;
  font-size: 0.8rem;
}

.component-structure-value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
}

.component-structure-value.boosted > span:first-child {
  color: var(--green);
}

.component-structure-detail {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18rem;
  color: #93a4aa;
  font-weight: 600;
}

.component-structure-bonus {
  color: var(--yellow);
}

.component-structure-row {
  margin: 0 -0.55rem -0.5rem;
  border-top: 1px solid #344147;
  background: #20272b;
  color: #b9c4c8;
  font-size: 0.78rem;
  font-weight: 800;
}

.component-hardpoint-line {
  min-height: 1.45rem;
  align-content: flex-start;
}

.component-hardpoint-line.empty {
  visibility: hidden;
}

.component-omnipod-card {
  margin: 0.42rem -0.2rem 0;
  padding: 0.28rem;
  border: 1px solid #5088b4;
  border-radius: 3px;
  background: linear-gradient(145deg, #172a36, #101b22);
  box-shadow: inset 0 0 0 1px rgba(112, 181, 232, 0.12);
}

.component-omnipod-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.12rem 0.35rem;
  align-items: center;
}

.component-omnipod-card-head > span:first-child {
  color: #75b9ea;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.component-omnipod-card-head strong {
  min-width: 0;
  overflow: hidden;
  color: #d8efff;
  font-size: 0.68rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.component-omnipod-card.fixed {
  border-color: #59646a;
  background: linear-gradient(145deg, #252b2e, #171c1f);
  box-shadow: inset 0 0 0 1px rgba(192, 204, 210, 0.07);
}

.component-omnipod-card.fixed .component-omnipod-card-head > span:first-child,
.component-omnipod-card.fixed .component-omnipod-card-head strong {
  color: #879399;
}

.component-omnipod-card.fixed .hardpoint-chip {
  border-color: #4d565b;
  background: #151a1d;
  filter: grayscale(0.72);
}

.component-omnipod-hardpoints {
  gap: 0.2rem;
  margin-top: 0.26rem;
}

.component-omnipod-hardpoints .hardpoint-chip {
  border-color: #49697b;
  background: #0a1217;
  box-shadow: inset 0 0 0 1px rgba(112, 181, 232, 0.08);
}

.component-items {
  display: grid;
  grid-auto-rows: minmax(1.694rem, auto);
  gap: 1px;
  padding: 3px;
  background: #080d0f;
}

.slot-item {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  grid-row: span var(--slot-span, 1);
  gap: 0.35rem;
  align-items: center;
  min-height: calc(1.694rem * var(--slot-span, 1) + (var(--slot-span, 1) - 1) * 1px);
  padding: 0 0.32rem 0 0;
  border: 1px solid #4b7483;
  border-radius: 2px;
  background: repeating-linear-gradient(to bottom, #1b3540 0, #1b3540 1.65rem, #294c59 1.65rem, #294c59 calc(1.65rem + 1px));
  cursor: grab;
  overflow: hidden;
  touch-action: none;
}

.slot-item:active {
  cursor: grabbing;
}

.component-items .slot-item.ghost-heat-triggered,
.critical-slot.fixed-slot.ghost-heat-triggered {
  border-color: #ff4938;
  outline: 2px solid #ff4938;
  outline-offset: -2px;
  box-shadow: 0 0 0.42rem rgba(255, 73, 56, 0.72);
}

.slot-item.dragging {
  filter: brightness(0.97);
}

.item-row.dragging {
  filter: brightness(0.97);
}

.pointer-drag-layer {
  position: fixed;
  z-index: 2147483647;
  top: 0;
  left: 0;
  opacity: 0.8;
  pointer-events: none;
  will-change: transform;
}

.pointer-drag-visual {
  margin: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  transform-origin: top left;
  pointer-events: none !important;
}

body.pointer-drag-active,
body.pointer-drag-active * {
  cursor: grabbing !important;
  user-select: none !important;
}

.slot-item strong {
  min-width: 0;
  overflow: hidden;
  color: #e5eef0;
  font-size: 0.858rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot-item-mark {
  align-self: stretch;
  display: grid;
  place-items: center;
  background: #263e47;
  color: #c7d9df;
  font-size: 0.792rem;
  font-weight: 900;
}

.slot-item-slots {
  color: #9fb2b8;
  font-size: 0.781rem;
  font-weight: 800;
}

.slot-item.energy {
  border-color: #d5c724;
  background: repeating-linear-gradient(to bottom, #59520b 0, #59520b 1.65rem, #716a11 1.65rem, #716a11 calc(1.65rem + 1px));
}
.slot-item.energy .slot-item-mark { background: #77700b; color: #fff45c; }
.slot-item.missile {
  border-color: var(--missile);
  background: repeating-linear-gradient(to bottom, #064c47 0, #064c47 1.65rem, #08645d 1.65rem, #08645d calc(1.65rem + 1px));
}
.slot-item.missile .slot-item-mark { background: #007c73; color: #9dfff7; }
.slot-item.ballistic {
  border-color: #b970dd;
  background: repeating-linear-gradient(to bottom, #4f2267 0, #4f2267 1.65rem, #65317e 1.65rem, #65317e calc(1.65rem + 1px));
}
.slot-item.ballistic .slot-item-mark { background: #6f358a; color: #edc2ff; }
.slot-item.ams {
  border-color: var(--ams);
  background: repeating-linear-gradient(to bottom, #34470f 0, #34470f 1.65rem, #465f16 1.65rem, #465f16 calc(1.65rem + 1px));
}
.slot-item.ams .slot-item-mark { background: #587b1a; color: #dbff94; }
.slot-item.ecm {
  border-color: #ff9b42;
  background: repeating-linear-gradient(to bottom, #65300d 0, #65300d 1.65rem, #824313 1.65rem, #824313 calc(1.65rem + 1px));
  box-shadow: inset 3px 0 #ffad61;
}
.slot-item.ecm .slot-item-mark { background: #91470f; color: #ffe0bd; }

.slot-item.energy.ammo {
  border-color: #7d761f;
  background: repeating-linear-gradient(to bottom, #2c2908 0, #2c2908 1.65rem, #39350a 1.65rem, #39350a calc(1.65rem + 1px));
}
.slot-item.missile.ammo {
  border-color: #176f69;
  background: repeating-linear-gradient(to bottom, #052c29 0, #052c29 1.65rem, #073c38 1.65rem, #073c38 calc(1.65rem + 1px));
}
.slot-item.ballistic.ammo {
  border-color: #725083;
  background: repeating-linear-gradient(to bottom, #281333 0, #281333 1.65rem, #351a43 1.65rem, #351a43 calc(1.65rem + 1px));
}
.slot-item.ams.ammo {
  border-color: #5f7929;
  background: repeating-linear-gradient(to bottom, #202b0b 0, #202b0b 1.65rem, #2b3a0f 1.65rem, #2b3a0f calc(1.65rem + 1px));
}

.slot-item.energy.ammo .slot-item-mark { background: #3d390b; color: #c8bd50; }
.slot-item.missile.ammo .slot-item-mark { background: #07514c; color: #70cfc7; }
.slot-item.ballistic.ammo .slot-item-mark { background: #3a2047; color: #ad83bf; }
.slot-item.ams.ammo .slot-item-mark { background: #384c12; color: #a8cc62; }

.slot-item.module,
.slot-item.masc,
.slot-item.jumpjet {
  border-color: #69baf0;
  background: repeating-linear-gradient(to bottom, #285c7c 0, #285c7c 1.65rem, #34789f 1.65rem, #34789f calc(1.65rem + 1px));
  box-shadow: inset 3px 0 #84c9f7;
}

.slot-item.module .slot-item-mark,
.slot-item.masc .slot-item-mark,
.slot-item.jumpjet .slot-item-mark {
  background: #176b9e;
  color: #b9e9ff;
}

.slot-item.engine-main-slot {
  align-items: stretch;
  border-color: #69baf0;
  background: linear-gradient(135deg, #34789f, #285c7c);
  box-shadow: inset 3px 0 #84c9f7;
}

.engine-slot-content {
  display: grid;
  align-content: start;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.5rem 0.15rem;
}

.engine-rating-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  min-height: 1.5rem;
  margin-top: 2px;
}

.engine-rating-controls button {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 1.5rem;
  padding: 0;
  border-color: #81b8d7;
  border-radius: 2px;
  background: #1d5778;
  color: #eaf8ff;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.engine-rating-controls button:disabled {
  border-color: #42677b;
  background: #24485c;
  color: #668a9c;
  cursor: default;
}

.engine-main-slot .engine-slot-content {
  grid-column: 1 / -1;
  grid-row: 1;
  padding-inline: 2.6rem;
}

.engine-main-slot .slot-item-mark,
.engine-main-slot .slot-item-slots {
  z-index: 1;
  grid-row: 1;
}

.engine-main-slot .slot-item-mark { grid-column: 1; }
.engine-main-slot .slot-item-slots { grid-column: 3; }

.engine-slot-content > strong,
.engine-slot-name {
  min-width: 0;
  overflow: hidden;
  color: #edf8ff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fixed-slot.engine-fixed-slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 0.65rem;
  padding: 0.65rem;
  border-color: #6d7b80;
  background: #353d40;
  box-shadow: inset 4px 0 #96a2a7, inset 0 0 0 1px #1d2528;
}

.engine-fixed-slot .engine-inline-heat-sinks {
  grid-column: 1 / -1;
}

.engine-slot-size {
  color: #bfe6ff;
  font-weight: 800;
}

.engine-fixed-slot .engine-slot-size {
  color: #c0c8cb;
}

.engine-fixed-slot .engine-slot-name {
  color: #c0c8cb;
}

.engine-inline-heat-sinks {
  display: grid;
  grid-template-columns: repeat(var(--engine-heat-sink-columns, 3), 3.3rem);
  align-items: flex-start;
  justify-self: center;
  gap: 0.38rem;
  width: max-content;
  max-width: 100%;
  padding: 0.3rem;
  border: 1px solid transparent;
  border-radius: 3px;
  transition: border-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

.engine-inline-heat-sinks.drop-valid {
  border-color: #39b9ff;
  background: rgba(16, 133, 204, 0.22);
  box-shadow: 0 0 0.55rem rgba(57, 185, 255, 0.7);
}

.engine-inline-heat-sinks.drop-invalid {
  border-color: var(--red);
  background: rgba(148, 38, 32, 0.18);
  box-shadow: 0 0 0.55rem rgba(220, 78, 71, 0.5);
}

.engine-heat-sink-box {
  display: block;
  flex: 0 0 3.3rem;
  width: 3.3rem;
  height: 1.65rem;
  border: 2px solid #d5dadd;
  border-radius: 2px;
}

.engine-heat-sink-box.filled {
  border-color: #b6e8ff;
  background: #159cff;
  box-shadow: 0 0 0.45rem rgba(21, 156, 255, 0.9), inset 0 0 0 2px #0877c9;
}

.installed-engine-heat-sink {
  cursor: grab;
  touch-action: none;
}

.installed-engine-heat-sink:active {
  cursor: grabbing;
}

.installed-engine-heat-sink.dragging {
  filter: brightness(0.97);
}

.fixed-engine-heat-sink {
  cursor: default;
}

.engine-heat-sink-box.filled.omnipod-engine-heat-sink {
  border-color: #b9c0c5;
  background: #747d83;
  box-shadow: inset 0 0 0 2px #555e64;
}

.engine-heat-sink-box.empty-engine-heat-sink {
  border-color: #d5dadd;
  background: #8b9298;
  box-shadow: inset 0 0 0 2px #697177;
}

.engine-main-slot.drop-valid,
.engine-fixed-slot.drop-valid {
  outline: 2px solid #39b9ff;
  outline-offset: -2px;
  box-shadow: 0 0 0.7rem rgba(57, 185, 255, 0.75), inset 3px 0 #84c9f7;
}

.engine-main-slot.drop-invalid,
.engine-fixed-slot.drop-invalid {
  outline: 2px solid var(--red);
  outline-offset: -2px;
  box-shadow: 0 0 0.7rem rgba(220, 78, 71, 0.55), inset 3px 0 #c46b66;
}

.critical-slot {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 1.694rem;
  padding: 0 0.35rem;
  border: 1px solid #24343a;
  border-radius: 2px;
  overflow: hidden;
  color: #7f9197;
  font-size: 0.792rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fixed-slot {
  grid-row: span var(--slot-span, 1);
  min-height: calc(1.694rem * var(--slot-span, 1) + (var(--slot-span, 1) - 1) * 1px);
  border-color: #6d7b80;
  background: #353d40;
  box-shadow: inset 4px 0 #96a2a7, inset 0 0 0 1px #1d2528;
  color: #7d878a;
  font-weight: 800;
  letter-spacing: 0.025em;
}

.empty-slot {
  justify-content: center;
  border-color: #1f2c31;
  background: #0d1315;
  color: #34454b;
}

.structure-upgrade-slot {
  justify-content: flex-start;
  border-color: #263238;
  border-style: dotted;
  background: #0d1315;
  color: #536167;
}

.structure-upgrade-slot-occupied {
  border-color: #647176;
  border-style: solid;
  background: #394144;
  color: #101617;
  font-weight: 600;
}

.armor-upgrade-slot {
  justify-content: flex-start;
  border-color: #35312d;
  border-style: dotted;
  background: #0d1315;
  color: #6a625a;
}

.armor-upgrade-slot-occupied {
  border-color: #647176;
  border-style: solid;
  background: #394144;
  color: #171411;
  font-weight: 600;
}

.structure-upgrade-slot-occupied,
.armor-upgrade-slot-occupied {
  box-shadow: inset 4px 0 #96a2a7, inset 0 0 0 1px #1d2528;
  color: #c0c8cb;
  font-weight: 800;
  letter-spacing: 0.025em;
}

.slot-item button {
  padding: 0.25rem 0.45rem;
}

.empty {
  color: var(--muted);
  padding: 0.5rem;
  border: 1px dashed #34454c;
  border-radius: 4px;
}

.equipment-category-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 3.1rem;
  margin: 0 -0.55rem 0.55rem;
  border-bottom: 1px solid #456773;
  background: #080d0f;
}

.equipment-category-tabs.has-omnipods {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.equipment-category-tab {
  min-width: 0;
  padding: 0.65rem 0.25rem;
  border: 0;
  border-right: 1px solid #263b43;
  border-radius: 0;
  background: #080d0f;
  color: #91a3aa;
  font-size: 0.82rem;
  font-weight: 900;
}

.equipment-category-tab:last-child {
  border-right: 0;
}

.equipment-category-tab:hover {
  background: #142126;
  color: #d7e2e5;
}

.equipment-category-tab.active {
  background: #c9cac3;
  color: #080b0c;
}

.equipment-category-tab[data-equipment-category="weapons"].active { background: #f0d529; }
.equipment-category-tab[data-equipment-category="ammo"].active { background: #f07726; }
.equipment-category-tab[data-equipment-category="equipment"].active { background: #39c77c; }
.equipment-category-tab[data-equipment-category="omnipods"].active { background: #4e98f1; }

.equipment-panel {
  position: relative;
  display: grid;
  grid-template-rows: 1.8rem auto auto minmax(4rem, 1fr) auto;
  padding: 0 0.55rem 0.55rem;
  border: 1px solid #34454c;
  border-radius: 3px;
  background: #0d1416;
  overflow: hidden;
}

.upgrade-panel {
  margin: 0.55rem -0.55rem -0.55rem;
  padding: 0.55rem;
  border-top: 1px solid #456773;
  background: #080b0c;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.upgrade-panel h4 {
  margin: 0 0 0.45rem;
  color: #aebdc2;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.upgrade-controls {
  display: grid;
  gap: 0.55rem;
}

.upgrade-group-label {
  margin-bottom: 0.25rem;
  color: #d7e2e5;
  font-size: 0.82rem;
}

.upgrade-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.28rem;
}

.upgrade-option {
  min-width: 0;
  min-height: 2rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid #37484f;
  border-radius: 4px;
  background: #141d20;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upgrade-option:hover:not(:disabled) {
  border-color: #816235;
  background: #2a2115;
  color: var(--text);
}

.upgrade-option.active {
  border-color: #d5a53f;
  background: #342916;
  color: var(--text);
}

.upgrade-option:disabled {
  border-color: #2b383d;
  background: #11191c;
  color: #637077;
  cursor: not-allowed;
}

.upgrade-option.active:disabled {
  border-color: #d5a53f;
  background: #342916;
  color: var(--text);
}

.equipment-panel.drop-valid {
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green);
}

.equipment-panel.drop-valid::after {
  content: "REMOVE";
  position: absolute;
  inset: 38% 1rem auto;
  z-index: 5;
  display: grid;
  place-items: center;
  min-height: 4rem;
  border: 1px solid var(--green);
  background: rgba(9, 24, 15, 0.94);
  color: var(--green);
  font-weight: 900;
  pointer-events: none;
}

.warehouse-columns,
.item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3rem 3rem;
  align-items: center;
}

.warehouse-columns.omnipod-columns,
.omnipod-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(5, 2.15rem);
  align-items: center;
}

.warehouse-columns {
  min-height: 1.65rem;
  border: 1px solid #263840;
  border-bottom: 0;
  background: #172126;
  color: #82959c;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.warehouse-columns span,
.item-row > span:not(.item-row-name) {
  padding: 0 0.35rem;
  text-align: right;
}

.warehouse-columns span:first-child {
  text-align: left;
}

.equipment-panel .item-list {
  align-self: stretch;
  min-height: 0;
  max-height: none;
  border: 1px solid #263840;
  background: #090f11;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.warehouse-section-title {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 1.55rem;
  padding: 0.3rem 0.45rem;
  border-bottom: 1px solid var(--warehouse-accent, #50636b);
  border-left: 4px solid var(--warehouse-accent, #50636b);
  background: var(--warehouse-background, #202c31);
  color: var(--warehouse-foreground, #dbe5e8);
  font-size: 0.74rem;
  font-weight: 900;
}

.warehouse-energy { --warehouse-accent: #ffeb24; --warehouse-background: #514b00; --warehouse-foreground: #fff47a; }
.warehouse-missile { --warehouse-accent: #31db8a; --warehouse-background: #075a36; --warehouse-foreground: #8fffc0; }
.warehouse-ballistic { --warehouse-accent: #cf73ff; --warehouse-background: #52206b; --warehouse-foreground: #e7b0ff; }
.warehouse-ams { --warehouse-accent: #36df7c; --warehouse-background: #075a2e; --warehouse-foreground: #82ffb5; }
.warehouse-ammo { --warehouse-accent: #ff842d; --warehouse-background: #713100; --warehouse-foreground: #ffb47d; }
.warehouse-ammo-item.warehouse-energy { --warehouse-accent: #827a21; --warehouse-background: #2c2908; --warehouse-foreground: #d8cf62; }
.warehouse-ammo-item.warehouse-missile { --warehouse-accent: #337b57; --warehouse-background: #092f20; --warehouse-foreground: #82caa1; }
.warehouse-ammo-item.warehouse-ballistic { --warehouse-accent: #785789; --warehouse-background: #2c1737; --warehouse-foreground: #c29bd3; }
.warehouse-ammo-item.warehouse-ams { --warehouse-accent: #3c7751; --warehouse-background: #0c2d1b; --warehouse-foreground: #83c99b; }
.warehouse-heatsinks { --warehouse-accent: #3ba9ff; --warehouse-background: #064d7b; --warehouse-foreground: #8fd0ff; }
.warehouse-target-computers { --warehouse-accent: #45baff; --warehouse-background: #0b527d; --warehouse-foreground: #a5ddff; }
.warehouse-equipment { --warehouse-accent: #45baff; --warehouse-background: #0b527d; --warehouse-foreground: #a5ddff; }
.warehouse-engine-xl { --warehouse-accent: #ff4242; --warehouse-background: #761b1b; --warehouse-foreground: #ff9b9b; }
.warehouse-engine-light { --warehouse-accent: #ffb62d; --warehouse-background: #704600; --warehouse-foreground: #ffd47e; }
.warehouse-engine-std { --warehouse-accent: #d6dde0; --warehouse-background: #455158; --warehouse-foreground: #f2f7f8; }
.warehouse-omnipods { --warehouse-accent: #579dff; --warehouse-background: #174c83; --warehouse-foreground: #a8ceff; }

.warehouse-section-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
}

.warehouse-section-toggle:hover {
  background: var(--warehouse-background, #2a3940);
  color: #d5e1e4;
  filter: brightness(1.18);
}

.warehouse-section-indicator {
  font-size: 0.9rem;
  line-height: 1;
}

.equipment-tooltip {
  position: fixed;
  z-index: 120;
  width: min(20.9rem, calc(100vw - 1rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  pointer-events: auto;
  filter: drop-shadow(0 0.65rem 1.25rem rgba(0, 0, 0, 0.62));
}

.equipment-tooltip[hidden] {
  display: none;
}

.equipment-tooltip.ghost-heat-tooltip-open {
  width: max-content;
  min-width: min(32rem, calc(100vw - 1rem));
  max-width: calc(100vw - 1rem);
  overflow-x: auto;
}

.equipment-tooltip-card {
  --tooltip-accent: #b9c8cd;
  overflow: hidden;
  border: 1px solid var(--tooltip-accent);
  background: rgba(3, 6, 7, 0.98);
  color: #f0f5f6;
}

.equipment-tooltip-card.tooltip-energy { --tooltip-accent: #ffea2d; }
.equipment-tooltip-card.tooltip-missile { --tooltip-accent: #35da8b; }
.equipment-tooltip-card.tooltip-ballistic { --tooltip-accent: #cb78f5; }
.equipment-tooltip-card.tooltip-ams { --tooltip-accent: #45da86; }
.equipment-tooltip-card.tooltip-ecm { --tooltip-accent: #ff9b42; }
.equipment-tooltip-card.tooltip-equipment { --tooltip-accent: #45baff; }
.equipment-tooltip-card.tooltip-ammo { --tooltip-accent: #ff842d; }
.equipment-tooltip-card.tooltip-heatsink { --tooltip-accent: #45aaff; }
.equipment-tooltip-card.tooltip-engine { --tooltip-accent: #ff5555; }
.equipment-tooltip-card.tooltip-ghost-heat {
  --tooltip-accent: #ff8d5c;
  width: max-content;
  min-width: 100%;
}

.ghost-heat-warning-tooltip-lines {
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem;
}

.ghost-heat-warning-tooltip-lines p {
  margin: 0;
  color: #e7edef;
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: nowrap;
}

.ghost-heat-extra-value {
  color: #ffc0a3;
  font-weight: 900;
}

.ghost-heat-capacity-percent {
  color: #ffb18f;
  font-weight: 900;
}

.ghost-heat-total-value {
  color: #fff;
  font-weight: 900;
}

.equipment-tooltip-title {
  margin: 0.88rem;
  padding: 0.462rem 0.605rem;
  background: var(--tooltip-accent);
  color: #06090a;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}

.equipment-tooltip-stats {
  display: grid;
  gap: 1.05rem;
  padding: 0.22rem 1.045rem 0.825rem;
}

.equipment-tooltip-group {
  display: grid;
  gap: 0.242rem;
}

.equipment-tooltip-group > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.1rem;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.968rem;
}

.equipment-tooltip-stats span {
  color: #e5ecee;
  font-weight: 800;
}

.equipment-tooltip-stats strong {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.35rem;
  color: #fff;
  font-size: 1.045rem;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

.equipment-tooltip-final {
  color: #fff;
}

.equipment-tooltip-stats strong .equipment-tooltip-final.quirk-applied {
  color: var(--green);
  font-weight: 800;
}

.equipment-tooltip-stats strong .equipment-tooltip-quirk-detail {
  margin: 0;
  color: #fff;
  font-size: 0.84em;
  font-weight: 500;
  white-space: nowrap;
}

.equipment-tooltip-stats strong .equipment-tooltip-base,
.equipment-tooltip-stats strong .equipment-tooltip-operator {
  color: #fff;
  font-weight: 500;
}

.equipment-tooltip-stats strong .equipment-tooltip-quirk-value {
  color: var(--yellow);
  font-weight: 800;
}

.equipment-tooltip-stats strong .equipment-tooltip-final.quirk-harmful,
.equipment-tooltip-stats strong .equipment-tooltip-quirk-value.quirk-harmful {
  color: var(--red);
}

.equipment-tooltip-stats strong .equipment-tooltip-ghost-heat {
  color: #ff4938;
  font-weight: 900;
}

.equipment-tooltip-stats strong .equipment-tooltip-splash {
  color: #ffe34f;
}

.equipment-tooltip-stats strong .equipment-tooltip-negative {
  color: #ff6262;
  font-weight: 900;
}

.equipment-tooltip-card p {
  margin: 0;
  padding: 0.715rem 1.045rem 0.935rem;
  border-top: 1px solid #29363a;
  color: #aab9be;
  font-size: 0.792rem;
  line-height: 1.4;
}

.omnipod-tooltip-card {
  min-width: min(19rem, calc(100vw - 1rem));
}

.omnipod-tooltip-section {
  border-top: 1px solid #263840;
  padding: 0.55rem 0.65rem;
}

.omnipod-tooltip-section-title {
  color: #70b8cf;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
}

.omnipod-tooltip-so8-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.omnipod-tooltip-so8-title strong {
  color: #596267;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
}

.omnipod-tooltip-so8-title strong.active {
  color: #45da86;
}

.omnipod-tooltip-rows {
  display: grid;
  gap: 1px;
}

.omnipod-tooltip-hardpoints {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-height: 1.55rem;
}

.omnipod-tooltip-hardpoints .hardpoint-chip {
  min-height: 1.55rem;
  border-color: #49697b;
  background: #0a1217;
  box-shadow: inset 0 0 0 1px rgba(112, 181, 232, 0.08);
}

.omnipod-tooltip-hardpoints .hardpoint-icon {
  height: 1.55rem;
}

.omnipod-tooltip-quirk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  min-height: 1.45rem;
  background: #111719;
  padding: 0.18rem 0.35rem;
  font-size: 0.75rem;
}

.omnipod-tooltip-quirk:nth-child(even) {
  background: #192125;
}

.omnipod-tooltip-quirk span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omnipod-tooltip-quirk strong {
  color: currentColor;
  white-space: nowrap;
}

.omnipod-tooltip-empty {
  color: #596267;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.35rem;
}

.equipment-panel .item-row {
  min-height: 1.5rem;
  padding: 0;
  border-bottom-color: #1f2d32;
  color: #b8c8cd;
  cursor: grab;
  touch-action: none;
}

.equipment-panel .item-row:active {
  cursor: grabbing;
}

.omnipod-row {
  width: 100%;
  min-height: 1.85rem;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #1f2d32;
  border-radius: 0;
  background: transparent;
  color: #b8c8cd;
  cursor: grab;
  text-align: left;
}

.omnipod-row:hover,
.omnipod-row.active {
  background: #22313a;
}

.omnipod-row.active {
  box-shadow: inset 3px 0 0 var(--blue);
}

.omnipod-row strong {
  min-width: 0;
  padding: 0 0.45rem;
  overflow: hidden;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omnipod-hardpoint {
  padding: 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 900;
  text-align: center;
}

.omnipod-hardpoint.zero {
  font-weight: 400;
}

.omnipod-hardpoint.energy { color: var(--yellow); }
.omnipod-hardpoint.missile { color: var(--missile); }
.omnipod-hardpoint.ballistic { color: #c8a1dd; }
.omnipod-hardpoint.ams { color: var(--ams); }
.omnipod-hardpoint.ecm { color: #ff9b42; }

.item-row-name {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  height: 100%;
}

.item-row-name strong {
  min-width: 0;
  padding: 0 0.35rem;
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-type-mark {
  align-self: stretch;
  display: grid;
  place-items: center;
  background: #26363d;
  color: #aebfc5;
  font-size: 0.72rem;
  font-weight: 900;
}

.item-row.energy .item-type-mark { background: #4c4815; color: var(--yellow); }
.item-row.missile .item-type-mark { background: #075f58; color: #8cf7ef; }
.item-row.ballistic .item-type-mark { background: #402b50; color: #c8a1dd; }
.item-row.ams .item-type-mark { background: #435b16; color: #d2f58c; }
.item-row.ecm .item-type-mark { background: #91470f; color: #ffe0bd; }
.item-row.module .item-type-mark,
.item-row.masc .item-type-mark,
.item-row.jumpjet .item-type-mark { background: #176b9e; color: #b9e9ff; }
.item-row.energy.ammo .item-type-mark { background: #3d390b; color: #c8bd50; }
.item-row.missile.ammo .item-type-mark { background: #073f3b; color: #68bdb7; }
.item-row.ballistic.ammo .item-type-mark { background: #3a2047; color: #ad83bf; }
.item-row.ams.ammo .item-type-mark { background: #344511; color: #9fbd61; }

.warnings {
  margin-top: 0.45rem;
  color: var(--red);
  font-size: 0.8rem;
}

@media (max-width: 1280px) {
  .info-grid {
    grid-template-columns: repeat(2, minmax(16rem, 1fr));
  }

  .stats-detail {
    grid-template-columns: repeat(2, minmax(16rem, 1fr));
  }
}

@media (max-width: 1050px) {
  .simulation-dialog {
    width: min(54rem, calc(100vw - 1rem));
    min-width: 0;
  }

  .mech-browser-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .mech-browser-layout.large-mech-list-layout {
    grid-template-columns: 1fr;
  }

  .mech-browser-layout.mechlab-browse-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(18rem, 45%) minmax(0, 1fr);
  }

  .mech-browser-layout.mechlab-browse-layout .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .mech-list {
    max-height: 18rem;
  }

  .mechlab-grid {
    grid-template-columns: minmax(16rem, 18rem) minmax(0, 1fr) minmax(19rem, 22rem);
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .stats-condition-controls {
    grid-template-columns: 1fr;
  }

  .stats-content {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }

  .stats-detail {
    grid-template-columns: 1fr;
  }

  .components { min-width: 48rem; }
}

@media (max-width: 680px) {
  .weapon-detail-overlay {
    padding: 0;
  }

  .weapon-detail-dialog {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .weapon-detail-metrics {
    padding-right: 0.55rem;
    padding-left: 0.55rem;
  }

  .weapon-detail-metric-tabs {
    padding-right: 0.55rem;
    padding-left: 0.55rem;
  }

  .weapon-detail-metric-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .weapon-detail-metric-row-label {
    grid-column: 1 / -1;
  }

  .weapon-detail-list-header {
    min-width: 57rem;
  }

  .simulation-overlay {
    padding: 0;
  }

  .simulation-dialog {
    width: 100vw;
    height: 100vh;
    min-width: 0;
    border: 0;
    border-radius: 0;
  }

  .simulation-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem;
    padding-inline: 0.55rem;
  }

  .simulation-metrics > div {
    padding-inline: 0.4rem;
  }

  .simulation-metrics strong {
    font-size: 1.15rem;
  }

  .simulation-scenario-panel {
    padding-inline: 0.55rem;
  }

  .simulation-scenario-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 0.4rem;
  }

  .simulation-scenario-options {
    grid-template-columns: repeat(4, minmax(8.5rem, 1fr));
    overflow-x: auto;
    padding-bottom: 0.15rem;
  }

  .simulation-target-stage {
    min-height: 12.8rem;
  }

  .simulation-list-header,
  .simulation-weapon-row {
    grid-template-columns: minmax(8rem, 1fr) 3rem 4rem 4rem 8.5rem;
  }

  .simulation-weapon-list {
    overflow: auto;
  }

  .simulation-weapon-row,
  .simulation-list-header {
    min-width: 29rem;
  }

  .variant-panel {
    grid-template-columns: 1fr;
    display: grid;
  }

  .summary-strip,
  .actions {
    justify-content: start;
  }

  .main-tabs {
    flex-wrap: wrap;
    padding-inline: 0.75rem;
  }

  .donate-link {
    margin-left: auto;
  }

  .workspace {
    padding: 0.75rem;
  }

  #tab-mechlab {
    height: auto;
    overflow: visible;
  }

  .mechlab-workspace {
    display: block;
    height: auto;
    overflow: visible;
  }

  .mech-browser-layout.mechlab-focused-layout .tab-content {
    overflow: auto;
  }

  .mechlab-grid {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .mech-summary-panel {
    min-height: 12rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .mechlab-compact-list-panel {
    min-height: 18rem;
    max-height: 28rem;
  }

  .components-panel {
    overflow-x: auto;
  }

  .components {
    grid-template-columns: repeat(2, minmax(11rem, 1fr));
    min-width: 22.5rem;
  }

  .component-column {
    display: contents;
  }

  .component-location-head { grid-column: 1 / -1; order: 1; }
  .component-location-right_arm { order: 2; }
  .component-location-left_arm { order: 3; }
  .component-location-right_torso { order: 4; }
  .component-location-left_torso { order: 5; }
  .component-location-centre_torso { grid-column: 1 / -1; order: 6; }
  .component-location-right_leg { order: 7; }
  .component-location-left_leg { order: 8; }

  .equipment-panel {
    min-height: 34rem;
    margin-top: 0.75rem;
  }

  .mech-card-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quirk-summary-grid {
    grid-template-columns: repeat(auto-fill, minmax(6.6rem, 8.6rem));
  }

  .stats-workspace {
    padding: 0.75rem;
  }

  .stats-toolbar {
    padding: 0.65rem 0.75rem;
  }

  .stats-subnav {
    padding: 0.55rem 0.75rem;
  }

  .stats-subbutton {
    flex: 1 1 0;
    min-width: 0;
  }

  .stats-condition-controls {
    padding: 0.65rem;
  }

  .stats-row {
    grid-template-columns: 2.8rem minmax(10rem, 1fr) 6rem minmax(12rem, 16rem);
    gap: 0.45rem;
    padding: 0 0 0 0.45rem;
    overflow-x: auto;
  }

  .stats-detail-rank-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .stats-detail-rank-value {
    justify-content: flex-start;
  }

  .stats-rank {
    min-width: 2rem;
  }
}

/* MechLab keeps its 16:9 desktop canvas while the viewport scales the canvas as a whole. */
#tab-mechlab .mechlab-grid {
  grid-template-columns: minmax(18rem, 21rem) minmax(0, 1fr) minmax(21rem, 24rem);
  overflow: hidden;
}

#tab-mechlab .components {
  grid-template-columns: repeat(5, minmax(12rem, 1fr));
  min-width: 62rem;
}

@media (max-width: 680px) {
  #tab-mechlab {
    height: 100%;
    overflow: hidden;
  }

  #tab-mechlab.mechlab-scale-limited {
    overflow: auto;
  }

  #tab-mechlab .mechlab-workspace {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    padding: 0.75rem 1rem 1rem;
    overflow: hidden;
  }

  #tab-mechlab .variant-panel {
    display: flex;
  }

  #tab-mechlab .actions {
    justify-content: flex-end;
  }

  #tab-mechlab .mech-summary-panel {
    min-height: 0;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  #tab-mechlab .components-panel {
    overflow: auto;
  }

  #tab-mechlab .component-column {
    display: grid;
  }

  #tab-mechlab .component {
    grid-column: auto;
    order: initial;
  }

  #tab-mechlab .equipment-panel {
    min-height: 0;
    margin-top: 0;
  }

  .mech-browser-layout.mechlab-focused-layout .tab-content {
    overflow: hidden;
  }
}