/* ── Reset & Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #0b0b12;
  --surface:     #13131f;
  --surface2:    #1c1c2e;
  --surface3:    #252538;
  --border:      #2e2e48;
  --gold:        #c8a84b;
  --gold-dim:    #8a7030;
  --gold-glow:   rgba(200, 168, 75, 0.18);
  --text:        #d4d4e8;
  --text-dim:    #a0a0be;
  --text-muted:  #4a4a68;
  --red:         #c0392b;
  --green:       #27ae60;
  --blue:        #4a90d9;
  --blue-dim:    #2a5090;
  --blue-glow:   rgba(74, 144, 217, 0.25);
  --perk-sel:    #122a45;
  --perk-lock:   #111118;
  --lavender:    #b794f6;
  --lavender-glow: rgba(183, 148, 246, 0.30);
  --radius:      6px;
  --radius-lg:   10px;
}

html { font-size: 14px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, sans-serif;
  line-height: 1.4;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
header {
  background: var(--surface);
  border-bottom: 2px solid #5a5a7a;
  padding: 14px 24px;
  position: sticky;
  top: var(--banner-offset, 0px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transition: top 0.3s ease;
}

/* Desktop: top-row is invisible wrapper, title stays centered */
#header-top-row {
  position: static;
  display: contents;
}
#header-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  pointer-events: none; /* clicks pass through to children */
}
#header-title-name {
  text-align: center;
}
#header-title #header-patch {
  pointer-events: auto;
  position: absolute;
  right: calc(100% + 10px);
}
#header-title h1 {
  pointer-events: auto;
}

header h1 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #2a2a38;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#share-btn {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 6px 12px;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.75;
  flex-shrink: 0;
  margin-left: 60px;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
#share-btn .share-icon { vertical-align: -1px; margin-left: 2px; }
#share-btn:hover {
  opacity: 1;
  background: var(--gold);
  color: #0b0b12;
  box-shadow: 0 0 20px rgba(200, 168, 75, 0.7), 0 0 6px rgba(200, 168, 75, 0.4);
}

#reset-btn {
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 4px;
  padding: 6px 8px;
  background: transparent;
  cursor: pointer;
  opacity: 0.75;
  flex-shrink: 0;
  margin-left: 8px;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
#reset-btn:hover {
  opacity: 1;
  background: var(--red);
  color: #fff;
  box-shadow: 0 0 20px rgba(192, 57, 43, 0.7), 0 0 6px rgba(192, 57, 43, 0.4);
}

#feedback-btn {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 4px;
  padding: 6px 12px;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.75;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
#feedback-btn:hover {
  opacity: 1;
  background: var(--red);
  color: #fff;
  box-shadow: 0 0 20px rgba(192, 57, 43, 0.7), 0 0 6px rgba(192, 57, 43, 0.4);
}

#support-btn {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4caf50;
  border: 1px solid #4caf50;
  border-radius: 4px;
  padding: 6px 12px;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.75;
  margin-right: 12px;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
#support-btn:hover {
  opacity: 1;
  background: #4caf50;
  color: #0b0b12;
  box-shadow: 0 0 20px rgba(76, 175, 80, 0.7), 0 0 6px rgba(76, 175, 80, 0.4);
}

#header-sub {
  font-size: 0.8rem;
  color: var(--blue);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}
#header-patch {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-decoration: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  line-height: 1.4;
  text-align: right;
  margin: 0 40px;
}
#header-patch:hover { color: var(--text); }
.patch-line1, .patch-line2, .patch-line3, .patch-line4 { display: block; }
.changelog-hint { color: var(--accent); font-size: 0.9em; }
#header-patch:hover .changelog-hint { text-decoration: underline; }
.patch-mobile-line1, .patch-mobile-line2 { display: none; }

/* ── App Layout ──────────────────────────────────────────────────────────── */
.app-layout {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  width: 275px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 0 8px 10px;
  gap: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* ── Unlock Customizations Button ─────────────────────────────────────────── */
.unlock-btn {
  background: transparent;
  border: 1px solid #e8a838;
  border-radius: var(--radius);
  color: #e8a838;
  padding: 9px 12px;
  font-size: 0.75rem;
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  margin: 0 7px 4px 13px;
  transition: background 0.15s, color 0.15s;
}
.unlock-btn:hover { background: #e8a838; color: #0a0a14; }

.sidebar-aquila-lock {
  display: block;
  margin: 4px auto;
  width: 28px;
  height: auto;
  opacity: 0.7;
  filter: drop-shadow(0 0 4px rgba(106, 190, 48, 0.5));
}

/* ── Customization Lock State ─────────────────────────────────────────────── */

/* --- Tuning variables --- */
:root {
  /* Sidebar tab lock icon */
  --lock-icon-top:      5px;
  --lock-icon-right:    7px;
  --lock-icon-size:     19px;
  --lock-icon-opacity:  0.7;

  /* Tab pane large lock icon */
  --pane-lock-size:     48px;
  --pane-lock-opacity:  0.75;
  --pane-lock-top:      94%;
  --pane-lock-left:     1%;

  /* Tab pane darkening */
  --locked-pane-opacity: 0.6;
}

/* Small lock icon on sidebar tab buttons — !important needed to override has-class-bg/has-weapon-bg > * rules */
.sidebar-btn .lock-icon {
  position: absolute !important;
  top: var(--lock-icon-top) !important;
  right: var(--lock-icon-right) !important;
  width: var(--lock-icon-size);
  height: auto;
  opacity: var(--lock-icon-opacity);
  pointer-events: none;
  z-index: 100 !important;
  line-height: 1;
  color: #e8a838;
}
.sidebar-btn .lock-icon svg { width: 100%; height: auto; display: block; }

/* Large lock icon on tab panes — sits above the darkening overlay */
.pane-lock-icon {
  position: absolute;
  top: var(--pane-lock-top);
  left: var(--pane-lock-left);
  transform: translate(-50%, -50%);
  width: var(--pane-lock-size);
  height: auto;
  opacity: var(--pane-lock-opacity);
  pointer-events: none;
  z-index: 10;
  line-height: 1;
  color: #e8a838;
}
.pane-lock-icon svg { width: 100%; height: auto; display: block; }


/* Locked customization tab panes — tooltips still work, clicks intercepted by JS */
.customization-locked #tab-class,
.customization-locked #tab-difficulty,
.customization-locked #tab-weapon,
.customization-locked #tab-primary,
.customization-locked #tab-sidearm,
.customization-locked #tab-team {
  position: relative;
}

/* Jiggle animation for lock icon on click */
@keyframes lock-jiggle {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  20%  { transform: translate(-50%, -50%) rotate(-12deg); }
  40%  { transform: translate(-50%, -50%) rotate(10deg); }
  60%  { transform: translate(-50%, -50%) rotate(-6deg); }
  80%  { transform: translate(-50%, -50%) rotate(3deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}
.pane-lock-icon.jiggle {
  animation: lock-jiggle 0.4s ease-in-out 2;
}
/* Mobile-only lock icons — hidden on desktop */
.mobile-lock-icon, .mobile-header-lock { display: none; }

.em header                    { border-bottom-color: #33ff33; }
.em .sidebar-btn.active       { border-color: #33ff33; border-right-color: transparent; }
.em .main-body                { border-left-color: #33ff33; }
.em .damage-section           { border-top-color: #33ff33; }
.em .sidebar #modifier-group  { border-top-color: #33ff33; }
.em .sidebar #combo-modifier-group { border-top-color: #33ff33; }

.sidebar-btn {
  background: transparent;
  border: 2px solid #3a3a54;
  border-right: none;
  border-radius: 12px 0 0 12px;
  padding: 10px 12px;
  margin-left: 10px;
  margin-right: 0;
  margin-top: -2px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-height: 0;
  flex: 1;
  transition: background 0.15s, box-shadow 0.15s, margin 0.15s, padding 0.15s;
}
.sidebar-btn:first-child { margin-top: -2px; }
.sidebar-btn:hover:not([data-tab="combo"]):not(.active):not(.tab-disabled) { background: var(--surface2); }
.sidebar-btn.tab-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: auto;
}
.sidebar-btn.active {
  background: var(--bg);
  margin-left: 0;
  margin-right: -2px;
  padding-right: 14px;
  border-radius: 16px 0 0 16px;
  border: 2px solid #5a5a7a;
  border-right: none;
  z-index: 1;
}
.sidebar-btn.active .sidebar-class-img {
  right: 13px;
}
/* When active, button grows ~12px wider — pin image to same visual position
   and fade gradients to var(--bg) so tab blends into main content */
.sidebar-btn.active.has-class-bg {
  background: var(--bg);
  clip-path: inset(-2px 0 -2px -2px round 16px 0 0 16px);
}
.sidebar-btn.active.has-class-bg .class-bg-img {
  left: 77px;
  transform: none;
}
.sidebar-btn.active.has-class-bg .class-bg-img::before {
  background:
    linear-gradient(to right,
      rgba(11,11,18,1) 0%,
      rgba(11,11,18,0) 29%,
      rgba(11,11,18,0) 72%,
      rgba(11,11,18,1) 100%),
    linear-gradient(to bottom,
      rgba(11,11,18,0.6) 0%,
      rgba(11,11,18,0) 18%,
      rgba(11,11,18,0) 82%,
      rgba(11,11,18,0.6) 100%);
}
.sidebar-btn.active.has-class-bg::before {
  background:
    linear-gradient(to right,
      rgba(var(--sb-navy-dk, 11,11,18),1) 0%,
      rgba(var(--sb-navy-dk, 11,11,18),1) 25%,
      rgba(var(--sb-navy-dk, 11,11,18),0) 45%,
      rgba(var(--sb-navy-dk, 11,11,18),0) 85%,
      rgba(var(--sb-navy-dk, 11,11,18),0.7) 93%,
      rgba(var(--sb-navy-dk, 11,11,18),1) 100%);
}

.sidebar-btn-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.sidebar-btn-label { text-decoration: underline; }

.sidebar-btn-info {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.sidebar-btn-sub {
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.sidebar-class-img {
  display: none; /* replaced by background-image approach */
}
.sidebar-btn { position: relative; overflow: hidden; }

/* Weapon tab — background via .weapon-bg-img div (same pattern as class tabs) */
.sidebar-btn.has-weapon-bg {
  background: rgb(var(--sb-navy, 20,20,30));
}
.sidebar-btn.has-weapon-bg .weapon-bg-img {
  position: absolute;
  top: 0; bottom: 0;
  width: 177px;
  left: 65%;
  transform: translateX(-50%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
}
/* Gradient on the weapon image edges */
.sidebar-btn.has-weapon-bg .weapon-bg-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(20,20,30,1) 0%,
      rgba(20,20,30,0) 29%,
      rgba(20,20,30,0) 72%,
      rgba(20,20,30,1) 100%);
  z-index: 1;
  border-radius: inherit;
}
/* Extended gradient across full button width */
.sidebar-btn.has-weapon-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(var(--sb-navy, 20,20,30),1) 0%,
      rgba(var(--sb-navy, 20,20,30),1) 25%,
      rgba(var(--sb-navy, 20,20,30),0) 45%,
      rgba(var(--sb-navy, 20,20,30),0) 85%,
      rgba(var(--sb-navy, 20,20,30),0.7) 93%,
      rgba(var(--sb-navy, 20,20,30),1) 100%);
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
}
.sidebar-btn.has-weapon-bg > * {
  position: relative;
  z-index: 2;
}
.sidebar-btn.has-weapon-bg .sidebar-btn-info {
  text-shadow: 0 1px 4px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.5);
}
.sidebar-btn.has-weapon-bg .sidebar-btn-label {
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
/* Active weapon tab — per-weapon gradients & vignette via CSS custom properties */
.sidebar-btn.active.has-weapon-bg {
  background: var(--bg);
  clip-path: inset(-2px 0 -2px -2px round 16px 0 0 16px);
}
.sidebar-btn.active.has-weapon-bg .weapon-bg-img::before {
  background:
    linear-gradient(to right,
      rgba(11,11,18,1) 0%,
      rgba(11,11,18,0) var(--wact-imgL, 29%),
      rgba(11,11,18,0) var(--wact-imgR, 72%),
      rgba(11,11,18,1) 100%);
}
.sidebar-btn.active.has-weapon-bg::before {
  background:
    linear-gradient(to right,
      rgba(var(--sb-navy-dk, 11,11,18),1) 0%,
      rgba(var(--sb-navy-dk, 11,11,18),1) var(--wact-btnLS, 25%),
      rgba(var(--sb-navy-dk, 11,11,18),0) var(--wact-btnLF, 45%),
      rgba(var(--sb-navy-dk, 11,11,18),0) var(--wact-btnRS, 85%),
      rgba(var(--sb-navy-dk, 11,11,18),0.7) var(--wact-btnRM, 93%),
      rgba(var(--sb-navy-dk, 11,11,18),1) 100%);
}
/* Active weapon vignette */
.sidebar-btn.active.has-weapon-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse var(--wact-vigX, 69%) var(--wact-vigY, 67%) at center,
    transparent 0%,
    rgba(var(--sb-navy-dk, 11,11,18), var(--wact-vigO, 0)) 100%);
  z-index: 3;
  pointer-events: none;
}
/* Vignette + border on inactive weapon tabs — clip-path used because <button> ignores overflow:hidden */
.sidebar-btn.has-weapon-bg:not(.active) {
  margin-right: -2px;
  clip-path: inset(-2px 2px -2px -2px round 6px 0 0 6px);
}
.sidebar-btn.has-weapon-bg:not(.active)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse var(--inact-vx, 69%) var(--inact-vy, 67%) at center,
    transparent 0%, rgba(var(--sb-navy, 20,20,30), var(--inact-vo, 0.36)) 100%);
  z-index: 3;
  pointer-events: none;
}

/* ── Difficulty tab background ────────────────────────────────────────────── */
.sidebar-btn.has-diff-bg {
  background: rgb(var(--sb-navy, 20,20,30));
}
.diff-bg-img {
  position: absolute !important;
  top: 0; bottom: 0;
  width: 177px;
  left: var(--diff-x, 65%);
  transform: translateX(-50%);
  background: url('../assets/difficulty.png') center / var(--diff-zoom, 98%) no-repeat;
  background-position: var(--diff-bgx, 50%) var(--diff-bgy, 15%);
  z-index: 0 !important;
  border-radius: inherit;
  overflow: hidden;
}
.diff-bg-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(20,20,30,1) 0%,
      rgba(20,20,30,0) 29%,
      rgba(20,20,30,0) 72%,
      rgba(20,20,30,1) 100%);
  z-index: 1;
  border-radius: inherit;
}
.sidebar-btn.has-diff-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(var(--sb-navy, 20,20,30),1) 0%,
      rgba(var(--sb-navy, 20,20,30),1) 25%,
      rgba(var(--sb-navy, 20,20,30),0) 45%,
      rgba(var(--sb-navy, 20,20,30),0) 85%,
      rgba(var(--sb-navy, 20,20,30),0.7) 93%,
      rgba(var(--sb-navy, 20,20,30),1) 100%);
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
}
.sidebar-btn.has-diff-bg > * {
  position: relative;
  z-index: 2;
}
.sidebar-btn.has-diff-bg .sidebar-btn-info {
  text-shadow: 0 1px 4px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.5);
}
.sidebar-btn.has-diff-bg .sidebar-btn-label {
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.sidebar-btn.active.has-diff-bg {
  background: var(--bg);
  clip-path: inset(-2px 0 -2px -2px round 16px 0 0 16px);
}
.sidebar-btn.active.has-diff-bg .diff-bg-img::before {
  background:
    linear-gradient(to right,
      rgba(11,11,18,1) 0%,
      rgba(11,11,18,0) var(--dact-imgL, 15%),
      rgba(11,11,18,0) var(--dact-imgR, 93%),
      rgba(11,11,18,1) 100%);
}
.sidebar-btn.active.has-diff-bg::before {
  background:
    linear-gradient(to right,
      rgba(var(--sb-navy-dk, 11,11,18),1) 0%,
      rgba(var(--sb-navy-dk, 11,11,18),1) var(--dact-btnLS, 0%),
      rgba(var(--sb-navy-dk, 11,11,18),0) var(--dact-btnLF, 18%),
      rgba(var(--sb-navy-dk, 11,11,18),0) var(--dact-btnRS, 87%),
      rgba(var(--sb-navy-dk, 11,11,18),0.7) var(--dact-btnRM, 100%),
      rgba(var(--sb-navy-dk, 11,11,18),1) 100%);
}
.sidebar-btn.active.has-diff-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse var(--dact-vigX, 69%) var(--dact-vigY, 67%) at center,
    transparent 0%,
    rgba(var(--sb-navy-dk, 11,11,18), var(--dact-vigO, 0)) 100%);
  z-index: 3;
  pointer-events: none;
}
.sidebar-btn.has-diff-bg:not(.active) {
  margin-right: -2px;
  clip-path: inset(-2px 2px -2px -2px round 6px 0 0 6px);
}
.sidebar-btn.has-diff-bg:not(.active)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse var(--inact-vx, 69%) var(--inact-vy, 67%) at center,
    transparent 0%,
    rgba(var(--sb-navy, 20,20,30), var(--inact-vo, 0.36)) 100%);
  z-index: 3;
  pointer-events: none;
}

/* Auspex background — pre-rendered APNG with radar baked in */
.auspex-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: url('../assets/auspex_inactive.apng') center / 100% 100% no-repeat;
}
/* Switch to active APNG when combo has entries */
.auspex-bg.auspex-active {
  background-image: url('../assets/auspex_active.apng');
}
/* CRT: the APNG's left third is transparent and its opaque part starts in
   rgb(20,20,30), the Off sidebar colour. The phosphor filter turns that edge a
   lighter green than the unfiltered CRT sidebar showing through the transparent
   part, leaving a hard seam on the unselected, unconfigured tab (the other
   states' overlays already cover it). Filling under the image with the edge
   colour sends both sides through the filter together. */
html.crt .auspex-bg { background-color: rgb(20, 20, 30); }
/* Edge-blend gradient over the APNG (covers hard image boundary) */
/* Unselected + Unconfigured — fade left edge into sidebar bg */
.sidebar-btn:not(.active) .auspex-bg:not(.auspex-active)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(to right,
      rgba(19,19,31,1) 0%,
      rgba(19,19,31,0) 45%);
}
/* Selected + Unconfigured — fade left edge into active bg + right tint */
.sidebar-btn.active .auspex-bg:not(.auspex-active)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(to right,
      rgba(19,19,31,1) 40%,
      rgba(19,19,31,0) 46%);
}
/* Unselected + Configured — edge blend on inactive tab with entries */
.auspex-bg.auspex-active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(to right,
      rgba(20,20,30,1) 0%,
      rgba(20,20,30,1) 30%,
      rgba(20,20,30,0) 50%,
      rgba(20,20,30,0) 85%,
      rgba(20,20,30,1) 100%,
      rgba(20,20,30,1) 100%);
}
.sidebar-btn[data-tab="combo"] > .sidebar-btn-label,
.sidebar-btn[data-tab="combo"] > .sidebar-btn-info {
  position: relative;
  z-index: 2;
}
.sidebar-combo-status {
  display: flex; flex-direction: column; gap: 1px;
  font-size: 0.78rem; font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.5);
}
.sidebar-combo-status .sidebar-diff-group {
  color: var(--text-dim); font-size: 0.82rem;
}
.sidebar-combo-status .sidebar-diff-line {
  display: flex; align-items: center; gap: 6px; font-size: 1.05rem;
}
.sidebar-combo-status .sidebar-diff-name {
  color: var(--gold);
}
.sidebar-combo-status .badge-mods {
  display: inline-flex; gap: 5px; font-size: 0.88rem; font-weight: 700;
}
.sidebar-combo-status .badge-mod-pos { color: #4caf50; }
.sidebar-combo-status .badge-mod-neg { color: #e53935; }
/* Active combo tab */
.sidebar-btn.active[data-tab="combo"] {
  background: var(--bg);
}
/* Gradient overlay on active combo tab (text readability + edge blend) */
.sidebar-btn.active[data-tab="combo"]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(var(--sb-navy-lt, 19,19,31),0) 0%,
      rgba(var(--sb-navy-lt, 19,19,31),0) 33%,
      rgba(var(--sb-navy-lt, 19,19,31),0) 55%,
      rgba(var(--sb-navy-lt, 19,19,31),0) 90%,
      rgba(var(--sb-navy-lt, 19,19,31),0.84) 100%,
      rgba(var(--sb-navy-lt, 19,19,31),0.84) 100%);
}

.sidebar-btn.has-class-bg {
  background: rgb(var(--sb-navy, 20,20,30));
}
/* Class card image layer — narrower than button, biased right */
.sidebar-btn.has-class-bg .class-bg-img {
  position: absolute;
  top: 0; bottom: 0;
  width: 177px;
  left: 65%;
  transform: translateX(-50%);
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
}
/* Gradient on the image edges */
.sidebar-btn.has-class-bg .class-bg-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(20,20,30,1) 0%,
      rgba(20,20,30,0) 29%,
      rgba(20,20,30,0) 72%,
      rgba(20,20,30,1) 100%);
  z-index: 1;
  border-radius: inherit;
}
/* Extended gradient across full button width */
.sidebar-btn.has-class-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(var(--sb-navy, 20,20,30),1) 0%,
      rgba(var(--sb-navy, 20,20,30),1) 25%,
      rgba(var(--sb-navy, 20,20,30),0) 45%,
      rgba(var(--sb-navy, 20,20,30),0) 85%,
      rgba(var(--sb-navy, 20,20,30),0.7) 93%,
      rgba(var(--sb-navy, 20,20,30),1) 100%);
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
}
.sidebar-btn.has-class-bg > * {
  position: relative;
  z-index: 2;
}
.sidebar-btn.has-class-bg .sidebar-btn-info {
  text-shadow: 0 1px 4px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.5);
}
.sidebar-btn.has-class-bg .sidebar-btn-label {
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
/* Vignette on inactive configured class tabs */
.sidebar-btn.has-class-bg:not(.active) {
  margin-right: -2px;
  clip-path: inset(-2px 2px -2px -2px round 6px 0 0 6px);
}
.sidebar-btn.has-class-bg:not(.active)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse var(--inact-vx, 69%) var(--inact-vy, 67%) at center,
    transparent 0%, rgba(var(--sb-navy, 20,20,30), var(--inact-vo, 0.36)) 100%);
  z-index: 3;
  pointer-events: none;
}

/* ── Team Tab — split-image sidebar button ──────────────────────────────── */
.sidebar-btn-team {
  position: relative;
  overflow: hidden;
}
.tm-split-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
}
.tm-split-im1, .tm-split-im2 {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.tm-split-im1 {
  -webkit-mask-image: linear-gradient(136.5deg,
    black 44%, rgba(0,0,0,0.75) 46%,
    rgba(0,0,0,0.25) 50%, transparent 52%);
  mask-image: linear-gradient(136.5deg,
    black 44%, rgba(0,0,0,0.75) 46%,
    rgba(0,0,0,0.25) 50%, transparent 52%);
}
.tm-split-im2 {
  -webkit-mask-image: linear-gradient(136.5deg,
    transparent 48%, rgba(0,0,0,0.25) 50%,
    rgba(0,0,0,0.75) 54%, black 56%);
  mask-image: linear-gradient(136.5deg,
    transparent 48%, rgba(0,0,0,0.25) 50%,
    rgba(0,0,0,0.75) 54%, black 56%);
}
.tm-split-im-inner {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
}
.tm-split-atmo {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 12% 52%, rgba(11,11,18,0) 20%, rgba(11,11,18,0.58) 100%),
    radial-gradient(ellipse at 88% 48%, rgba(11,11,18,0) 20%, rgba(11,11,18,0.58) 100%);
  z-index: 3; pointer-events: none;
}
.tm-split-tgrad {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      rgba(11,11,18, var(--tg-lo, 1.00)) 0%,
      rgba(11,11,18, var(--tg-lm, 0.77)) var(--tg-lp, 0%),
      rgba(11,11,18, 0) var(--tg-le, 34%),
      rgba(11,11,18, 0) var(--tg-rs, 92%),
      rgba(11,11,18, var(--tg-rm, 0.79)) var(--tg-rp, 100%),
      rgba(11,11,18, var(--tg-ro, 0.65)) 100%);
  z-index: 5; pointer-events: none;
}
.tm-split-line {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 6; pointer-events: none;
  overflow: visible;
}
.sidebar-btn-team > .sidebar-btn-label,
.sidebar-btn-team > .sidebar-btn-info {
  position: relative;
  z-index: 20;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.5);
}
/* Team tab inactive vignette */
.sidebar-btn-team.has-team-bg:not(.active)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse var(--inact-vx, 69%) var(--inact-vy, 67%) at center,
    transparent 0%, rgba(var(--sb-navy, 20,20,30), var(--inact-vo, 0.36)) 100%);
  z-index: 10;
  pointer-events: none;
}
/* Hide split bg when no classes selected */
.sidebar-btn-team:not(.has-team-bg) .tm-split-bg { display: none; }
/* Stacked class names on team tab */
.sidebar-btn-team .sidebar-btn-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.2;
}

/* Difficulty tab — sidebar status display */
.sidebar-btn[data-tab="difficulty"] > .sidebar-btn-label,
.sidebar-btn[data-tab="difficulty"] > .sidebar-btn-info,
.sidebar-btn[data-tab="difficulty"] > .sidebar-combo-status {
  position: relative;
  z-index: 2;
}

/* ── Team switcher (class portrait cards for tm1/tm2) ────────────────────── */
.tm-switcher {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  padding: 0 2px;
}
.tm-switcher-card {
  position: relative;
  flex: 0 0 auto;
  width: 80px;
  height: 88px;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: var(--font);
}
.tm-switcher-card:hover {
  border-color: #5a5a7a;
}
.tm-switcher-card.active {
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(232, 168, 56, 0.25);
}
.tm-switcher-img {
  position: absolute;
  inset: 0;
  background-size: 220%;
  background-position: center 15%;
  background-repeat: no-repeat;
  border-radius: inherit;
}
.tm-switcher-card.has-class .tm-switcher-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(11,11,18,0) 40%, rgba(11,11,18,0.85) 100%);
  border-radius: inherit;
}
.tm-switcher-plus {
  position: relative;
  z-index: 1;
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--text-dim);
  line-height: 1;
  margin-bottom: 4px;
}
.tm-switcher-card.has-class .tm-switcher-plus {
  display: none;
}
.tm-switcher-label {
  position: relative;
  z-index: 1;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.tm-switcher-card.active .tm-switcher-label {
  color: #fff;
}
.tm-switcher-card.has-class .tm-switcher-label {
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  color: #c8c8d8;
}
.tm-switcher-card.active.has-class .tm-switcher-label {
  color: #fff;
}
/* Toolbar row: switcher cards + dropdown + clear perks, all inline */
.tm-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.tm-toolbar .tm-switcher {
  margin-bottom: 0;
}
.tm-config-group {
  margin: 0;
  padding: 0;
}
.tm-config-group label { display: none; }
.tm-config-group .custom-select,
.tm-config-group .custom-select-btn {
  width: 160px;
  min-width: 160px;
}
.tm-perk-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tm-toolbar .clear-tm-perks-btn {
  margin: 0 0 0 8px;
  white-space: nowrap;
}
.tm-inner-pane {
  display: none;
}
.tm-inner-pane.active {
  display: block;
}
/* Team tab right-edge gradient */
#tab-team {
  position: relative;
}
#tab-team::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--tm-rgrad-w, 60px);
  background: linear-gradient(to right,
    transparent,
    rgba(11,11,18, var(--tm-rgrad-o, 0.8)));
  pointer-events: none;
  z-index: 10;
}

/* ── Main Body ───────────────────────────────────────────────────────────── */
.main-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-left: 2px solid #5a5a7a;
}

.tab-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 12px 20px 20px 10px;
}

.tab-pane { display: none; }
.tab-pane.active { display: block; height: 100%; }

#tab-combo.active {
  display: flex; flex-direction: column; height: 100%;
}
#tab-combo .combo-tab-hint { flex: 0 0 auto; }

/* ── Damage Section (always visible) ─────────────────────────────────────── */
.damage-section {
  flex: 0 0 calc(50% - 42.5px);
  min-height: 0;
  border-top: 2px solid #5a5a7a;
  background: var(--surface);
  padding: 0 20px 16px;
  display: flex;
  flex-direction: column;
}

#attack-section-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* The bottom panel's top edge is a drag handle (js/panel-resize.js): a gold grip in the middle
   of the line, the whole edge lit on hover. Desktop only. */
.damage-section { position: relative; }
.panel-handle { position: absolute; left: 0; right: 0; top: -6px; height: 10px; cursor: row-resize; z-index: 20; touch-action: none; }
.panel-handle::after { content: ''; position: absolute; left: 50%; top: 5px; width: 48px; height: 4px; margin-left: -24px; border-radius: 2px; background: var(--gold, #e8c558); }
.panel-handle:hover, .panel-handle:focus-visible { background: rgba(232, 197, 88, 0.25); outline: none; }
body.panel-resizing, body.panel-resizing * { cursor: row-resize !important; user-select: none; -webkit-user-select: none; }

.team-placeholder {
  color: var(--text);
  font-style: italic;
  padding: 40px 20px;
  text-align: center;
}

/* ── Teammate Tabs ────────────────────────────────────────────────────────── */
.teammate-tab-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
}

.teammate-tab-body > .config-group {
  max-width: 420px;
  flex-direction: row;
  align-items: center;
}
.teammate-tab-body > .config-group > label { display: none; }
.teammate-tab-body > .config-group .custom-select { flex: 1; min-width: 0; }

/* Teammate perk tree — full class tree with some perks grayed out */
.tm-perk-tree-section {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.tm-perk-tree {
  display: flex;
  gap: 0;
  width: fit-content;
  overflow-x: auto;
}

/* Locked perks in teammate tree — non-interactive, grayed out */
.tm-perk-tree .perk-btn.tm-locked {
  opacity: 0.75;
  cursor: default;
  pointer-events: none;
}

/* Prestige section inside teammate tabs */
.tm-prestige-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 1px solid var(--border);
  padding-left: 16px;
  margin-left: 16px;
  flex-shrink: 0;
}

/* Clear class/teammate button (desktop + mobile) */
.mobile-clear-class-btn {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border: 1px solid var(--red);
  border-radius: var(--radius);
  background: transparent;
  color: var(--red);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.mobile-clear-class-btn:hover { background: var(--red); color: #1a0a08; }

.clear-tm-perks-btn {
  background: transparent;
  border: 1px solid var(--red);
  border-radius: var(--radius);
  color: var(--red);
  padding: 8px 18px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  margin-bottom: 12px;
}
.clear-tm-perks-btn:hover { background: var(--red); color: #1a0a08; }

.tm-prestige-tree {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 6px 12px;
}

/* Sidebar teammate info */
#sidebar-tm1-info,
#sidebar-tm2-info {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.3;
}
.tm-info-class {
  display: block;
  font-size: 0.82rem;
  color: var(--text);
}
.tm-info-perk {
  display: block;
}
.tm-info-empty {
  display: block;
}

/* Tier colors */
.tier-standard      { color: var(--text); }
.tier-mastercrafted { color: #4caf72; }
.tier-artificer     { color: #9b6dcc; }
.tier-relic         { color: #e07a20; }
.tier-heroic        { color: var(--red); }


#config-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.config-group { display: flex; flex-direction: column; gap: 8px; }
.config-group label, .config-group .group-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

/* Weapon + Variant selects */
#weapon-group  { min-width: 180px; }
#variant-group { min-width: 260px; }

/* Class selector cards */
.tab-pane.active:has(.class-cards-grid:not([style*="display: none"])) {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.class-cards-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16px;
  flex: 1;
  align-content: center;
  justify-content: center;
  padding: 16px 0;
  max-width: 1400px;
  margin: 0 auto;
}
.class-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--surface);
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.2s ease;
  /* No native long-press callout (save/copy/share image) on mobile */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.class-card:hover {
  border-color: var(--gold);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px rgba(212, 175, 55, 0.25);
  transform: translateY(-12px) scale(1.05);
  z-index: 2;
}
/* Poker-hand effect on teammate class cards */
#tab-team .class-card {
  position: relative;
}
#tab-team .class-card:not(.is-forbidden):not(.is-tm0):not(.is-tm1):hover {
  transform: translateY(-12px) scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px rgba(212, 175, 55, 0.25);
  z-index: 2;
}
/* Selected teammate cards — stay popped up */
#tab-team .class-card.is-tm0,
#tab-team .class-card.is-tm1 {
  transform: translateY(-14px) scale(1.06);
  border-color: var(--gold);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6), 0 0 14px rgba(212, 175, 55, 0.3);
  z-index: 2;
}
#tab-team .class-card.is-tm0 .class-card-label,
#tab-team .class-card.is-tm1 .class-card-label {
  color: var(--gold);
}
.class-card:hover .class-card-label {
  color: var(--gold);
}
.class-card img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  /* Long-press lands on the card button, not the image, so no native image menu */
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.class-card-label {
  padding: 8px 4px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text);
  text-transform: uppercase;
}
.class-card.is-forbidden {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
  border-color: var(--border);
}
.class-card.is-forbidden:hover {
  border-color: var(--border);
  box-shadow: none;
}
.class-card.is-forbidden:hover .class-card-label {
  color: var(--text);
}

/* ── Weapon Cards ─────────────────────────────────────────────────────────── */
.weapon-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 270px);
  justify-content: start;
  gap: 12px;
  align-content: start;
  padding: 12px 0;
}
.weapon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.weapon-card:hover {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.25);
}
.weapon-card:hover .weapon-card-label {
  color: var(--gold);
}
.weapon-card-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
}
.weapon-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.weapon-card[data-sidearm="infernoPistol"] img {
  object-position: 50% 50%;
  object-view-box: inset(11% 11%);
}
.weapon-card[data-primary="heavyBoltRifle"] img {
  object-position: 39% 50%;
}
.weapon-card[data-primary="heavyBolter"] img {
  object-position: 50% 37%;
}
.weapon-card[data-primary="pyrecannon"] img {
  object-position: 37% 53%;
}
.weapon-card-label {
  padding: 8px 4px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text);
  text-transform: uppercase;
  transition: color 0.15s;
}
#tab-weapon.active:has(#weapon-cards:not([style*="display: none"])) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#class-panel-body { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
#class-panel-body .config-group { width: 420px; max-width: 420px; flex-direction: row; align-items: center; }
#class-panel-body .config-group > label { display: none; }
#class-panel-body .config-group #class-select { flex: 1; min-width: 0; }

#class-select,
#weapon-select,
#primary-weapon-select,
#sidearm-weapon-select {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 7px 10px;
  min-width: 240px;
  font-size: 0.9rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a7a9a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
#class-select:focus,
#weapon-select:focus,
#primary-weapon-select:focus,
#sidearm-weapon-select:focus { outline: none; border-color: var(--gold-dim); }

/* Custom variant dropdown */
#variant-select,
.custom-select { position: relative; }

.custom-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 7px 10px;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.custom-select-btn:focus { outline: none; border-color: var(--gold-dim); }
.custom-select-arrow { flex-shrink: 0; opacity: 0.5; }

.custom-select-btn.tier-standard      { color: var(--text); }
.custom-select-btn.tier-mastercrafted { color: #4caf72; }
.custom-select-btn.tier-artificer     { color: #9b6dcc; }
.custom-select-btn.tier-relic         { color: #e07a20; }
.custom-select-btn.tier-heroic        { color: var(--red); }

.custom-select-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  list-style: none;
  z-index: 200;
  max-height: 600px;
  overflow-y: auto;
  padding: 4px 0;
}
.custom-select-option {
  padding: 7px 12px;
  font-size: 0.88rem;
  cursor: pointer;
}
.custom-select-option:hover                          { background: var(--surface3); }
.custom-select-option.is-selected                    { background: rgba(255,255,255,0.04); }
.custom-select-option.is-forbidden                   { text-decoration: line-through; color: var(--text-dim); cursor: not-allowed; }
.custom-select-option.is-forbidden:hover             { background: transparent; }
.custom-select-btn .custom-select-placeholder        { color: var(--text-dim); }

#variant-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
#variant-stats span {
  font-size: 0.78rem;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
}
#variant-stats span strong { color: var(--gold); }

/* Modifiers */
#modifier-group { gap: 10px; }
.modifier-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.modifier-label { font-size: 0.82rem; color: var(--text); min-width: 110px; }
.modifier-pair-row { display: flex; gap: 20px; flex-wrap: wrap; }

/* Modifiers in sidebar — flex basis matches damage-section to align borders */
.sidebar #modifier-group {
  border-top: 2px solid #5a5a7a;
  padding: 14px 12px 12px;
  margin-left: -10px; margin-right: 0;
  padding-left: 22px;
  gap: 12px;
  width: auto;
  flex: 0 0 calc(40% - 42px);
  overflow-y: auto;
}
.sidebar #modifier-group > .group-label  { font-weight: 700; text-decoration: underline; }
.sidebar #modifier-group .modifier-label { min-width: 0; flex: 1; }
.sidebar #modifier-group .toggle-text   { width: 48px; text-align: right; flex-shrink: 0; font-weight: 600; letter-spacing: 0.072em; }
.sidebar #modifier-group .modifier-row   { flex-wrap: nowrap; }
#condition-toggles .modifier-row          { margin-top: 2px; }
.sidebar #block-charges-row              { flex-direction: column; align-items: flex-start; gap: 8px; }
.sidebar #block-charges-row .block-charges-controls { display: flex; align-items: center; gap: 8px; width: 100%; }
.sidebar #block-charges-row .block-charges-controls > #block-charges-bonus { margin-left: auto; }
.sidebar #block-charges-group            { flex-wrap: nowrap; gap: 4px; }
.sidebar #block-charges-group .seg-btn   { flex: 0 0 44px; text-align: center; padding: 5px 4px; }

/* Combo enemy selector in sidebar — match modifier-group sizing */
.sidebar #combo-modifier-group {
  border-top: 2px solid #5a5a7a;
  padding: 6px 0 12px 2px;
  margin-left: -10px; margin-right: 0;
  padding-left: 12px;
  gap: 0;
  width: auto;
  flex: 0 0 calc(40% - 42px);
  overflow-y: auto;
}
.sidebar #combo-modifier-group > .group-label { font-weight: 700; text-decoration: underline; }

/* Toggle */
.toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.toggle input { display: none; }
.toggle-track {
  width: 36px; height: 20px;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 10px;
  position: relative;
  transition: background 0.2s;
}
.toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.toggle input:checked + .toggle-track { background: var(--gold-dim); border-color: var(--gold); }
.toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(16px); background: var(--gold); }
.toggle-text { font-size: 0.8rem; color: var(--text); }

/* Blue toggle variant (Armour Remaining) */
.toggle-blue input:checked + .toggle-track { background: var(--blue-dim); border-color: var(--blue); }
.toggle-blue input:checked + .toggle-track .toggle-thumb { transform: translateX(16px); background: var(--blue); }
/* Locked toggle (e.g. Armour Remaining forced on by Great Responsibility) — on but non-interactive. */
.toggle.toggle-locked { cursor: not-allowed; opacity: 0.65; }
.toggle.toggle-locked input { cursor: not-allowed; }

/* Green toggle variant (Dev Bonus) */
.toggle-green input:checked + .toggle-track { background: rgba(51, 255, 51, 0.15); border-color: #33ff33; }
.toggle-green input:checked + .toggle-track .toggle-thumb { transform: translateX(16px); background: #33ff33; }

/* Segmented button group */
.btn-group { display: flex; gap: 2px; }
.seg-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  padding: 5px 10px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.seg-btn:hover { color: var(--text); background: var(--surface3); }
.seg-btn.active {
  background: var(--gold-dim);
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 600;
}
/* Block charges per-value active colors */
.seg-btn.active[data-value="none"] { background: var(--surface3); border-color: #888; color: var(--text); }
.seg-btn.active[data-value="1"]    { background: #2a2200; border-color: #b0a010; color: #e0c020; }
.seg-btn.active[data-value="2"]    { background: #2a1200; border-color: #c06010; color: #e07020; }
.seg-btn.active[data-value="3"]    { background: #2a0a0a; border-color: #a02010; color: #c03020; }
.seg-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.seg-btn:disabled:hover { color: var(--text-muted); background: var(--surface2); }

/* Stack stepper widget */
.stack-stepper { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.stepper-btn { background: var(--surface2); border: none; color: var(--text); padding: 4px 10px; cursor: pointer; font-size: 0.85rem; }
.stepper-btn:hover:not(:disabled) { background: var(--surface3); }
.stepper-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper-none, .stepper-max { font-size: 0.72rem; color: var(--text-dim); padding: 4px 6px; }
.stepper-value { min-width: 28px; text-align: center; font-weight: 600; color: var(--gold); background: var(--surface); padding: 4px 6px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.stepper-bonus { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.8px; color: var(--text); width: 48px; text-align: right; flex-shrink: 0; margin-left: auto; }

/* Stack segmented button group */
.stack-btn-group { display: flex; gap: 2px; }
.stack-btn-group .seg-btn { min-width: 32px; text-align: center; }
.modifier-stack-row { flex-direction: column; align-items: flex-start; gap: 8px; }

/* ── Perk Section ────────────────────────────────────────────────────────── */
#perk-section { margin-top: 16px; }
#primary-perk-section { margin-top: 16px; }
#primary-perk-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
#primary-perk-counter {
  font-size: 0.85rem;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 10px;
}
#primary-perk-counter.at-limit { color: var(--gold); border-color: var(--gold-dim); }
#primary-config-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 0;
}
#primary-weapon-group { min-width: 180px; }
#primary-variant-group { min-width: 360px; }
#primary-heroic-group { min-width: 100px; }
#primary-heroic-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}
#primary-heroic-container .perk-btn { width: 140px; }

/* ── Sidearm perk section ──────────────────────────────────────────────── */
#sidearm-perk-section { margin-top: 16px; }
#sidearm-perk-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
#sidearm-perk-counter {
  font-size: 0.85rem;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 10px;
}
#sidearm-perk-counter.at-limit { color: var(--gold); border-color: var(--gold-dim); }
#sidearm-config-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 0;
}
#sidearm-weapon-group { min-width: 180px; }
#sidearm-variant-group { min-width: 260px; }
#sidearm-variant-select {
  width: max-content;
  min-width: 100%;
}
#sidearm-variant-select .custom-select-list {
  width: max-content;
  min-width: 100%;
}
#sidearm-variant-stats,
#primary-variant-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#sidearm-variant-stats .stats-row,
#primary-variant-stats .stats-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
#sidearm-variant-stats span,
#primary-variant-stats span {
  font-size: 0.78rem;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
}
#sidearm-variant-stats span strong,
#primary-variant-stats span strong { color: var(--gold); }
#sidearm-variant-stats span.has-falloff,
#primary-variant-stats span.has-falloff,
#sidearm-variant-stats span.has-spread,
#primary-variant-stats span.has-spread,
#sidearm-variant-stats span.has-altfire,
#primary-variant-stats span.has-altfire,
#sidearm-variant-stats span.has-pen,
#primary-variant-stats span.has-pen,
#sidearm-variant-stats span.has-rpm,
#primary-variant-stats span.has-rpm { cursor: help; }
/* Ammo-capacity perk/modifier is boosting this value — lavender trim */
#sidearm-variant-stats span.has-ammo-buff,
#primary-variant-stats span.has-ammo-buff {
  border-color: var(--lavender);
  box-shadow: 0 0 0 1px var(--lavender-glow) inset;
  cursor: help;
}
#sidearm-variant-stats span.has-ammo-buff strong,
#primary-variant-stats span.has-ammo-buff strong { color: var(--lavender); }
/* Touch: a tap opens the tile's tooltip, so no text selection / callout, and a gold
   outline while it is open (matches the perk buttons). */
@media (hover: none) {
  #sidearm-variant-stats span,
  #primary-variant-stats span {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  #sidearm-variant-stats span.touch-tooltip-active,
  #primary-variant-stats span.touch-tooltip-active { border-color: var(--gold); box-shadow: 0 0 8px rgba(212, 175, 55, 0.35); }
}
/* The third stats row (damage chips + pen) costs 26px. Desktop wins it back from the empty
   space around it, so the tallest perk trees (specials above and below) fit the pane as they
   did with two rows: tighter chip rows, a smaller gap to the tree, and less of the spare room
   outside the above / below specials (they hang off the connectors, so they do not move). */
@media (min-width: 769px) {
  #sidearm-variant-stats,
  #primary-variant-stats { gap: 4px; }
  #sidearm-perk-section,
  #primary-perk-section { margin-top: 8px; }
  #sidearm-perk-tree .perk-chain.has-above-specials,
  #primary-perk-tree .perk-chain.has-above-specials { padding-top: 92px; }
  #sidearm-perk-tree .perk-chain.has-below-specials,
  #primary-perk-tree .perk-chain.has-below-specials { padding-bottom: 86px; }
}
#sidearm-heroic-group { min-width: 100px; }
#sidearm-heroic-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}
#sidearm-heroic-container .perk-btn { width: 140px; }

#perk-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Heroic perks panel — to the right of modifiers in config-row */
#heroic-group { min-width: 100px; }

#heroic-perk-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}
#heroic-perk-container .perk-btn { width: 140px; }

.section-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
}

#perk-counter {
  font-size: 0.85rem;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 10px;
}
#perk-counter.at-limit { color: var(--gold); border-color: var(--gold-dim); }

#clear-perks-btn,
#clear-sidearm-perks-btn,
#clear-primary-perks-btn {
  background: transparent;
  border: 1px solid var(--red);
  border-radius: var(--radius);
  color: var(--red);
  padding: 4px 12px;
  font-size: 0.72rem;
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
#clear-perks-btn:hover,
#clear-sidearm-perks-btn:hover,
#clear-primary-perks-btn:hover { background: var(--red); color: #1a0a08; }

#no-data-banner {
  font-size: 0.82rem;
  color: var(--red);
  background: rgba(180, 60, 60, 0.06);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  padding: 8px 14px;
  margin-bottom: 14px;
}


/* ── Perk Tree ───────────────────────────────────────────────────────────── */
#perk-tree,
#sidearm-perk-tree,
#primary-perk-tree {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

/* Main chain: two rows */
.perk-chain {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding-top: 12px;
}

/* Each node column: top perk + connector + bottom perk */
.perk-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* The horizontal arrow between nodes */
.perk-arrow {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 0 4px;
  flex-shrink: 0;
  gap: 4px;
}
.perk-arrow-line {
  width: 18px;
  height: 1px;
  background: var(--border);
  position: relative;
}
.perk-arrow-line::after {
  content: '';
  position: absolute;
  right: -4px;
  top: -3px;
  border: 3px solid transparent;
  border-left: 5px solid var(--border);
}

/* Perk buttons */
.perk-btn {
  width: 98px;
  min-height: 80px;
  background: var(--perk-lock);
  border: 2px solid #404060;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 500;
  cursor: default;
  padding: 6px;
  text-align: center;
  line-height: 1.3;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  position: relative;
  word-break: break-word;
}

.perk-btn.passive {
  /* prereq not yet met, or at perk cap — visible but not interactive */
  color: var(--text);
}

.perk-btn.available {
  background: var(--surface2);
  border: 2px solid rgba(255, 255, 255, 0.75);
  color: var(--text);
  cursor: pointer;
}
.perk-btn.available:hover {
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.35);
}

.perk-btn.selected {
  background: var(--perk-sel);
  border: 2px solid var(--blue);
  color: var(--blue);
  cursor: pointer;
  box-shadow: 0 0 10px var(--blue-glow);
}
.perk-btn.selected:hover { border-color: var(--blue); color: var(--blue); }

.perk-btn.heroic-locked {
  border-style: dashed;
  border-color: #5a1a1a;
  color: #7a3030;
}

.perk-btn.heroic-active {
  background: #2a0a0a;
  border-color: var(--red);
  color: #e87070;
  cursor: default;
  box-shadow: 0 0 10px rgba(192, 57, 43, 0.2);
}

/* Icon perk variant (class perks & prestige perks) */
.perk-btn.icon-perk {
  width: 84px;
  min-height: 84px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.perk-btn.icon-perk .perk-dmg-tag {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  text-align: center;
  margin-top: 0;
  font-size: 0.78rem;
}
.perk-btn.icon-perk img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  pointer-events: none;
  transition: opacity 0.15s, filter 0.15s;
}
.perk-btn.locked.icon-perk img,
.perk-btn.passive.icon-perk img,
.perk-btn.heroic-locked.icon-perk img {
  opacity: 0.3;
  filter: grayscale(100%);
}
.perk-btn.available.icon-perk img { opacity: 0.7; }
.perk-btn.available.icon-perk:hover img { opacity: 1; }
.perk-btn.selected.icon-perk img { opacity: 1; }

/* Perk column (top + bottom stacked, specials below) */
.perk-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
/* Inline special perks — separated from the chain pair */
.perk-special-inline { margin-top: 6px; }

/* Thin spacer between top/bottom rows; visible line only at the juncture node */
.perk-col-divider {
  width: 2px;
  height: 8px;
}
.perk-col-divider.junction {
  background: #404060;
}

/* Connector between chain columns — horizontal lines + optional special perks */
.chain-connector {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 45px;
  flex-shrink: 0;
  position: relative;
}
.conn-row-top,
.conn-row-bot {
  flex: 1;
  display: flex;
  align-items: center;
}
.conn-v-gap {
  height: 8px;
  flex-shrink: 0;
}
.conn-h-line {
  width: 100%;
  height: 2px;
  background: #404060;
}

/* Special perks positioned above/below the connector (between columns) */
/* Centered on the connector: left = C/2 - W/2 = 20 - 45 = -25px (C=40, W=90) */
.conn-special {
  position: absolute;
  left: -25px;
  width: 90px;
}
.conn-special-above {
  bottom: calc(100% + 6px);
}
.conn-special-below {
  top: calc(100% + 6px);
}
/* L-shape: horizontal width = C/2 = 20px, left = -(C/2) = -20px relative to special.
   A real child, not ::before: CRT Low leaves a special's wrapper unfiltered when it
   holds a kept element (damage badge, selected perk), and a pseudo-element on that
   wrapper then kept its #404060 while every other line turned green. */
.conn-special-above > .conn-special-line {
  position: absolute;
  left: -20px;
  top: 50%;
  width: 20px;
  height: calc(50% + 6px);
  border-top: 2px solid #404060;
  border-left: 2px solid #404060;
}
.conn-special-below > .conn-special-line {
  position: absolute;
  left: -20px;
  bottom: 50%;
  width: 20px;
  height: calc(50% + 6px);
  border-left: 2px solid #404060;
  border-bottom: 2px solid #404060;
}
/* Padding on perk-chain to make room for above/below specials */
.perk-chain.has-above-specials { padding-top: 96px; }
.perk-chain.has-below-specials { padding-bottom: 96px; }

/* Vertical bar removed — was visually confusing */

/* Power Sword Speed/Power style label */
.style-tag {
  display: inline-block;
  font-size: 0.6rem;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 4px;
  color: var(--text-muted);
  vertical-align: middle;
  margin-left: 4px;
}

/* Damage bonus tag on perk buttons */
.perk-dmg-tag {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  color: #f5c518;
  margin-top: 3px;
  letter-spacing: 0.02em;
  line-height: 1;
}
.perk-dmg-tag.inactive {
  color: #6a6a80;
}
/* Survivability badges: green +HP (more max health), blue +DR (damage reduction).
   Match the damage-tag text style; only the colour differs. */
.perk-surv-tag {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  margin-top: 3px;
  letter-spacing: 0.02em;
  line-height: 1;
  /* Subtle dark shadow for readability (matches the damage tag's clean look). */
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.perk-surv-tag.surv-hp { color: #66dd66; }
.perk-surv-tag.surv-dr { color: #5aa9ff; }
.perk-surv-tag.surv-ability { color: #ff6b6b; }
/* On icon perks the tag is absolutely positioned: bottom by default (like the
   damage tag), or top when a damage tag already occupies the bottom. */
.perk-btn.icon-perk .perk-surv-tag {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  margin-top: 0;
  font-size: 0.78rem;
  z-index: 2;   /* above the icon img (z-index:1), matching the damage tag */
}
.perk-btn.icon-perk .perk-surv-tag.surv-bottom { bottom: 4px; }
.perk-btn.icon-perk .perk-surv-tag.surv-top    { top: 4px; }
/* Lavender ammo-capacity badge (+15% MAG, +20% RES, etc.) — same style as the
   damage/surv tags; sits at the bottom (ammo perks have no other badge). */
.perk-ammo-tag {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--lavender);
  margin-top: 3px;
  letter-spacing: 0.02em;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.perk-btn.icon-perk .perk-ammo-tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  text-align: center;
  margin-top: 0;
  font-size: 0.78rem;
  z-index: 2;
}
/* Perk type badge */
.perk-type-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 4px;
  border-radius: 3px;
  margin-bottom: 3px;
}
.badge-heroic  { background: #2a0a0a; color: #e87070; }

/* Special + heroic perks row */
.perk-extras {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.perk-extras .perk-btn { width: 140px; }

/* Vertical branch indicator between top/bot of same node */
.perk-branch-divider {
  width: 1px;
  height: 8px;
  background: var(--border);
  margin: 0 auto;
}

/* ── Column Filter Flyout ────────────────────────────────────────────────── */
th.filterable {
  cursor: pointer;
  user-select: none;
}
th.filterable .filter-icon {
  color: #f5c518;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
th.has-filter .filter-icon { fill: #f5c518; }

#col-flyout {
  position: fixed;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  z-index: 500;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
}
#col-flyout[hidden] { display: none; }

#flyout-check-list {
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-top: 1px solid var(--border);
  padding-top: 4px;
  margin-top: 2px;
}

.flyout-check-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text-dim);
  white-space: nowrap;
  user-select: none;
}
.flyout-check-item:hover { background: var(--surface3); color: var(--text); }
.flyout-check-item input[type="checkbox"] { accent-color: var(--gold); cursor: pointer; flex-shrink: 0; }

.flyout-check-header {
  color: var(--text);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding-bottom: 2px;
}

#col-flyout-types { display: flex; gap: 4px; flex-wrap: wrap; }

.type-filter-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  padding: 4px 10px;
  font-size: 0.75rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.type-filter-btn:hover { color: var(--text); background: var(--surface3); }
.type-filter-btn.active { background: var(--surface3); border-color: var(--text-dim); color: var(--text); }
.type-filter-btn.active[data-type="Light"]   { border-color: #6ab0de; color: #6ab0de; background: rgba(106,176,222,0.08); }
.type-filter-btn.active[data-type="Heavy"]   { border-color: #e07060; color: #e07060; background: rgba(224,112, 96,0.08); }
.type-filter-btn.active[data-type="Sprint"]  { border-color: #80c880; color: #80c880; background: rgba(128,200,128,0.08); }
.type-filter-btn.active[data-type="Special"] { border-color: #a88be0; color: #a88be0; background: rgba(168,139,224,0.08); }

#col-flyout-clear {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  padding: 3px 8px;
  font-size: 0.75rem;
  font-family: inherit;
  cursor: pointer;
  align-self: flex-end;
}
#col-flyout-clear:hover { color: var(--text); border-color: var(--text-dim); }

/* ── Gear Button (pinned top-right of table area) ────────────────────────── */
#attack-section-body { position: relative; }
#col-gear-btn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  background: var(--surface2);
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 10px 14px;
  line-height: 0;
  border-radius: 0 0 0 var(--radius);
  transition: color 0.15s;
}
#col-gear-btn:hover { color: var(--gold); }

/* ── Column Config Flyout ────────────────────────────────────────────────── */
#col-config-flyout {
  position: fixed;
  z-index: 600;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
  min-width: 240px;
  display: flex;
  flex-direction: column;
  /* max-height set dynamically in JS to available space below the button */
}
#col-config-flyout[hidden] { display: none; }

/* Right-click menu of the Reset button: Reset build / Reset build and difficulty */
#reset-menu {
  position: fixed;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  padding: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
#reset-menu button {
  background: none;
  border: 0;
  border-radius: 4px;
  padding: 7px 12px;
  color: #fff;
  font: inherit;
  font-size: 1rem;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
#reset-menu button:hover,
#reset-menu button:focus-visible { background: var(--surface3); }
#col-config-flyout .col-config-all {
  flex-shrink: 0;
}
#col-config-list {
  overflow-y: auto;
  padding: 4px 0;
}
.col-config-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  cursor: grab;
  transition: background 0.12s;
}
.col-config-item:hover { background: var(--surface3); }
.col-config-all {
  cursor: default;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 2px;
}
.col-config-all span {
  font-size: 0.9rem;
  color: var(--text);
}
.col-config-all input[type="checkbox"] { accent-color: var(--gold); }
.col-config-item.dragging { opacity: 0.35; }
.col-config-grip {
  color: #fff;
  font-size: 0.85rem;
  flex-shrink: 0;
  user-select: none;
}
.col-config-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.col-config-label input[type="checkbox"] { accent-color: var(--gold); }

/* ── Tier group with nested enemy columns ───────────────────────────────── */
.col-config-tier-group {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
}
.col-config-tier-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
}
.col-config-tier-group:hover > .col-config-tier-header { background: var(--surface3); }
.col-config-expand {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  padding: 0 2px 0 0;
  flex-shrink: 0;
  line-height: 1;
}
.col-config-expand:hover { color: var(--gold); }
.col-config-children {
  padding-left: 62px;
  border-top: 1px solid var(--border);
  padding-top: 3px;
  padding-bottom: 3px;
}
.col-config-child-item {
  display: flex;
  align-items: center;
  padding: 5px 14px 5px 0;
}
.col-config-child-item:hover { background: var(--surface3); }
.col-config-child-label {
  font-size: 0.85rem;
  color: #fff;
}

/* ── Header Drag Feedback ────────────────────────────────────────────────── */
th.configurable-col { cursor: grab; }
th.configurable-col:active { cursor: grabbing; }
th.th-dragging { opacity: 0.35; }
th.drop-left  { box-shadow: inset 3px 0 0 var(--gold); }
th.drop-right { box-shadow: inset -3px 0 0 var(--gold); }

/* ── Attack Table ─────────────────────────────────────────────────────────── */
#table-wrapper {
  overflow-x: auto;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

#attack-table {
  border-collapse: collapse;
  font-size: 0.95rem;
}

#attack-table th {
  background: var(--surface2);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: underline;
  letter-spacing: 0.06em;
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
#attack-table th:not(:first-child) { text-align: right; }

#attack-table td {
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
#attack-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }

#attack-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
#attack-table tbody tr:hover td { background: var(--surface2); }

td.type-light  { color: #6ab0de; }
td.type-heavy  { color: #e07060; }
td.type-sprint { color: #80c880; }
td.type-special{ color: #a88be0; }
td.type-ground-pound { color: #e0a840; }
td.type-diving-kick  { color: #e07890; }
td.type-gunstrike    { color: #c8a060; }

td.col-damage  { color: var(--gold); font-weight: 600; }
td.col-no-data { color: var(--text-muted); font-style: italic; }
tr.empty-state td { color: var(--text-muted); font-style: italic; text-align: center; padding: 2rem 0; }

/* Multi-hit toggle */
.multi-hit td:first-child { cursor: pointer; }
.hit-badge { font-size: 0.85em; margin-left: 4px; color: var(--gold); }
.multi-hit-active .hit-badge { color: var(--gold); }
#attack-table .multi-hit-active td.col-damage { color: #f0d060; font-weight: 700; }

/* Attack note tooltip */
.has-note td:first-child { cursor: default; }

/* Attack description tooltip */
.has-atk-tooltip td:first-child { cursor: default; }
.atk-tooltip-icon {
  color: var(--gold);
  font-size: 1.1em;
  vertical-align: middle;
  margin-left: 3px;
  font-style: normal;
}

/* DoT (per second) toggle */
.dot-attack td:first-child { cursor: pointer; }
.dot-badge { font-size: 0.85em; margin-left: 4px; }
.dot-active .dot-badge { color: #f0d060; }
#attack-table .dot-active td.col-damage { color: #f0d060; font-weight: 700; }

/* Total row */
#attack-tfoot .total-row td {
  border-top: 2px solid var(--border);
  padding: 6px 10px;
  text-align: right;
}
#attack-tfoot .total-row td:first-child { text-align: left; }
#attack-tfoot .total-row td.col-damage { color: var(--gold); }

/* ── Tooltip ─────────────────────────────────────────────────────────────── */
#tooltip {
  position: fixed;
  z-index: 9999;
  background: #1a1a2e;
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.5;
  max-width: 280px;
  padding: 8px 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
#tooltip.visible { opacity: 1; }
.tooltip-note { color: #ff6b6b; display: block; margin-top: 6px; }
.tooltip-mech-note { color: #f5c518; display: block; margin-top: 6px; font-style: italic; }
.tooltip-impact { color: #4caf72; display: block; margin-top: 6px; font-weight: 600; }
.tooltip-impact .impact-negative { color: #e74c4c; }

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 3px; }

/* ── Class Perk Tree ─────────────────────────────────────────────────────── */
#class-perk-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

#class-tree-col {
  display: flex;
  flex-direction: column;
}

#class-perk-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

#class-perk-counter {
  font-size: 0.85rem;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 10px;
}

#clear-class-perks-btn {
  background: transparent;
  border: 1px solid var(--red);
  border-radius: var(--radius);
  color: var(--red);
  padding: 8px 18px;
  font-size: 0.82rem;
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
#clear-class-perks-btn:hover { background: var(--red); color: #1a0a08; }

#class-perk-scroll {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding-bottom: 4px;
  align-items: flex-start;
}

/* ── Prestige Perks ──────────────────────────────────────────────────────── */
#prestige-section {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  padding-left: 16px;
  margin-left: 16px;
  flex-shrink: 0;
}

#prestige-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

#prestige-counter {
  font-size: 0.85rem;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 10px;
}

#clear-prestige-btn {
  background: transparent;
  border: 1px solid var(--red);
  border-radius: var(--radius);
  color: var(--red);
  padding: 8px 18px;
  font-size: 0.82rem;
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
#clear-prestige-btn:hover { background: var(--red); color: #1a0a08; }

#prestige-perk-tree {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 6px 12px;
  justify-content: start;
  padding-top: calc(0.68rem * 1.4 + 8px); /* align first tile row with class perk tiles */
}

.prestige-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#class-perk-tree {
  display: flex;
  gap: 0;
  width: fit-content;
}

.class-perk-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.class-perk-group + .class-perk-group {
  border-left: 1px solid var(--border);
  padding-left: 12px;
  margin-left: 12px;
}

.class-perk-group-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  text-align: center;
}

.class-perk-cols {
  display: flex;
  gap: 8px;
}

.class-perk-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Hexagonal Class Perk Nodes ─────────────────────────────────────────── */

#class-perk-tree .perk-btn.icon-perk,
.tm-perk-tree .perk-btn.icon-perk,
#prestige-perk-tree .perk-btn.icon-perk {
  width: 94px;
  height: 84px;
  min-height: 84px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  position: relative;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Outer hex — border layer */
#class-perk-tree .perk-btn.icon-perk::before,
.tm-perk-tree .perk-btn.icon-perk::before,
#prestige-perk-tree .perk-btn.icon-perk::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #404060;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  z-index: 0;
  pointer-events: none;
  transition: background 0.15s, filter 0.15s;
}

/* Inner hex — fill layer */
#class-perk-tree .perk-btn.icon-perk::after,
.tm-perk-tree .perk-btn.icon-perk::after,
#prestige-perk-tree .perk-btn.icon-perk::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--perk-lock);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  z-index: 0;
  pointer-events: none;
  transition: background 0.15s;
}

/* Ensure icon + tag sit above hex layers */
#class-perk-tree .perk-btn.icon-perk img,
.tm-perk-tree .perk-btn.icon-perk img,
#prestige-perk-tree .perk-btn.icon-perk img {
  position: relative;
  z-index: 1;
}
#class-perk-tree .perk-btn.icon-perk .perk-dmg-tag,
.tm-perk-tree .perk-btn.icon-perk .perk-dmg-tag,
#prestige-perk-tree .perk-btn.icon-perk .perk-dmg-tag {
  z-index: 2;
}

/* ── Hex state: available ─── */
#class-perk-tree .perk-btn.icon-perk.available::before,
.tm-perk-tree .perk-btn.icon-perk.available::before,
#prestige-perk-tree .perk-btn.icon-perk.available::before {
  background: rgba(255, 255, 255, 0.75);
}
#class-perk-tree .perk-btn.icon-perk.available::after,
.tm-perk-tree .perk-btn.icon-perk.available::after,
#prestige-perk-tree .perk-btn.icon-perk.available::after {
  background: var(--surface2);
}
#class-perk-tree .perk-btn.icon-perk.available:hover::before,
.tm-perk-tree .perk-btn.icon-perk.available:hover::before,
#prestige-perk-tree .perk-btn.icon-perk.available:hover::before {
  background: var(--gold);
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.4));
}

/* ── Hex state: selected ─── */
#class-perk-tree .perk-btn.icon-perk.selected::before,
.tm-perk-tree .perk-btn.icon-perk.selected::before,
#prestige-perk-tree .perk-btn.icon-perk.selected::before {
  background: var(--blue);
  filter: drop-shadow(0 0 8px var(--blue-glow));
}
#class-perk-tree .perk-btn.icon-perk.selected::after,
.tm-perk-tree .perk-btn.icon-perk.selected::after,
#prestige-perk-tree .perk-btn.icon-perk.selected::after {
  background: var(--perk-sel);
}

/* ── Header Build Name ───────────────────────────────────────────────────── */
.header-build-name {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23999'%3E%3Cpath d='M12.15 1.85a1.5 1.5 0 0 1 2.12 2.12L5.7 12.54l-3.08.77.77-3.08z'/%3E%3C/svg%3E") no-repeat right 10px center / 18px 18px;
  border: 1px solid var(--text-muted);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-weight: 700;
  padding: 0 34px 0 10px;
  font-size: 1rem;
  font-family: var(--font);
  letter-spacing: 0.04em;
  width: 243px;
  height: 46px;
  box-sizing: border-box;
  transition: border-color 0.15s;
  text-align: center;
  margin-right: 8px;
  flex-shrink: 0;
}
.header-build-name:focus {
  outline: none;
  border-color: var(--blue);
}
.header-build-name::placeholder { color: var(--text-secondary); opacity: 0.5; }

/* ── Wiki + Data stack ──────────────────────────────────────────────────── */
#data-wiki-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin-right: 12px;
  flex-shrink: 0;
}
#wiki-btn {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 4px 12px;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
#wiki-btn:hover {
  opacity: 1;
  background: var(--gold);
  color: #0b0b12;
  box-shadow: 0 0 20px rgba(200, 168, 75, 0.7), 0 0 6px rgba(200, 168, 75, 0.4);
}

/* ── Data Modal ─────────────────────────────────────────────────────────── */
#data-btn {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 4px;
  padding: 6px 12px;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.75;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
#data-btn:hover {
  opacity: 1;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 0 20px rgba(74, 144, 217, 0.7), 0 0 6px rgba(74, 144, 217, 0.4);
}

#data-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#data-modal[hidden] { display: none; }
#data-modal .help-backdrop { background: rgba(0, 0, 0, 0.65); }
.help-dialog.data-dialog {
  width: 71vw;
  max-width: none;
}
.data-dialog .help-header {
  align-items: center;
}

.data-tab-pane { display: none; }
.data-tab-pane.active { display: block; }

.data-tab-btn {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  padding: 8px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.data-tab-btn:hover { color: var(--gold); }
.data-tab-btn.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.data-tab-wiki-link {
  margin-left: auto;
  color: var(--gold);
  font-size: 0.92rem;
  text-decoration: none;
  border-bottom-color: transparent !important;
}
.data-tab-wiki-link:hover { text-decoration: none; color: #d4b86e; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.05rem;
}
#data-body {
  padding-top: 0;
  overscroll-behavior: contain;
}
.data-table th {
  background: var(--surface2);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 10px;
  text-align: right;
  border-bottom: none;
  box-shadow: inset 0 -2px 0 var(--text-muted);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.data-table th:first-child {
  text-align: left;
  min-width: 140px;
}
.data-table td {
  padding: 6px 10px;
  text-align: right;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: #fff;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.data-table td:first-child {
  text-align: left;
}
.data-table tr:hover td {
  background: var(--surface2);
}
.data-table .faction-header,
.data-table .tier-header {
  text-align: left;
}
.data-table .mc-sep td {
  border-top: 2px dashed #4caf72;
}
.data-table .artificer-sep td {
  border-top: 2px dashed #9b6dcc;
}
.data-table .relic-sep td {
  border-top: 2px dashed #e07a20;
}
.data-table .heroic-sep td {
  border-top: 2px dashed var(--red);
}
#data-pane-diffscaled .data-table td:nth-child(1),
#data-pane-diffscaled .data-table th:nth-child(1) { width: 1%; white-space: nowrap; }
#data-pane-diffscaled .data-table td:nth-child(2),
#data-pane-diffscaled .data-table th:nth-child(2),
#data-pane-diffscaled .data-table td:nth-child(3),
#data-pane-diffscaled .data-table th:nth-child(3) { width: 1%; white-space: nowrap; text-align: left; }
.data-diff-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}
.data-diff-label {
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#gs-diff-select {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: #fff;
  padding: 5px 28px 5px 10px;
  font-size: 0.92rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a7a9a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
#gs-diff-select:focus { outline: none; border-color: var(--gold-dim); }

/* ── Comparisons Header Button & Dropdowns ──────────────────────────────── */
.comparisons-wrapper {
  position: absolute;
  right: calc(100% + 120px);
  flex-shrink: 0;
  display: none;
  pointer-events: auto;
}
body.em .comparisons-wrapper {
  display: block;
}
body.em #share-btn {
  margin-left: 12px;
  margin-right: 12px;
}
#comparisons-btn {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 6px 12px;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.75;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
#comparisons-btn:hover,
#comparisons-btn.cmp-btn-open {
  opacity: 1;
  background: var(--gold);
  color: #000;
  box-shadow: 0 0 20px rgba(232, 168, 56, 0.7), 0 0 6px rgba(232, 168, 56, 0.4);
}
.comparisons-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 500;
}
.cmp-dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: #fff;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
  position: relative;
}
.cmp-dropdown-item:hover {
  background: var(--surface2);
}
.cmp-dropdown-item + .cmp-dropdown-item {
  border-top: 1px solid rgba(255,255,255,0.06);
}
.cmp-arrow {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.cmp-load-item {
  position: relative;
}
.cmp-load-submenu {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 240px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 501;
}
.saved-cmp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.12s;
}
.saved-cmp-row:hover {
  background: var(--surface);
}
.saved-cmp-row:last-child {
  border-bottom: none;
}
.saved-cmp-active {
  background: rgba(232, 168, 56, 0.1);
}
.saved-cmp-name {
  flex: 1;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
}
.saved-cmp-date {
  color: var(--text-muted);
  font-size: 0.72rem;
  white-space: nowrap;
}
.saved-cmp-delete {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.12s;
}
.saved-cmp-delete:hover {
  color: var(--red);
}
.saved-cmp-empty {
  padding: 12px;
  color: var(--text-muted);
  font-size: 0.82rem;
  text-align: center;
}

/* ── Combo URL Import ───────────────────────────────────────────────────── */
/* combo-import-row no longer needed — import is inline in header */
.combo-import-url {
  flex: 1;
  min-width: 180px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 12px;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  background: transparent;
  color: #fff;
  outline: none;
  margin-right: -24px;
  transition: border-color 0.15s;
}
.combo-import-url::placeholder {
  color: #fff;
}
.combo-import-url:hover {
  border-color: var(--gold);
}
.combo-import-url:focus {
  border-color: var(--blue);
}
.combo-import-btn {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.combo-import-btn:hover {
  background: var(--gold);
  color: #000;
}

/* ── Help Modal ──────────────────────────────────────────────────────────── */
#help-btn {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--text-muted);
  border-radius: 4px;
  padding: 6px 12px;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.75;
  margin-right: 12px;
  flex-shrink: 0;
  transition: opacity 0.15s, border-color 0.15s, color 0.15s;
}
#help-btn:hover {
  opacity: 1;
  border-color: var(--text);
  color: var(--text);
  box-shadow: 0 0 20px rgba(212, 212, 232, 0.45), 0 0 6px rgba(212, 212, 232, 0.25);
}

#help-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#help-modal[hidden] { display: none; }

#changelog-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#changelog-modal[hidden] { display: none; }

/* ── Confirm Dialog ─────────────────────────────────────────────────────── */
#confirm-modal, #cfg-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
}
#confirm-modal[hidden] { display: none; }
#confirm-modal .help-backdrop, #cfg-overlay .help-backdrop { background: rgba(0,0,0,0.73); }

.confirm-dialog {
  position: absolute;
  left: 0;
  top: 0;
  background: #0c0c13;
  border: 1px solid #e9a838;
  border-radius: 12px;
  padding: 32px 28px;
  max-width: 420px;
  width: 90vw;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  text-align: center;
}
.confirm-dialog #confirm-title {
  font-size: 17px;
  color: #e9a838;
  margin: 0 0 20px;
  line-height: 1.5;
}
.confirm-actions {
  display: flex;
  gap: 23px;
  justify-content: center;
}
.confirm-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 9px 24px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.confirm-btn-cancel {
  background: transparent;
  border: 1px solid #e9a838;
  color: #e9a838;
}
.confirm-btn-cancel:hover {
  background: #e9a838;
  border-color: #e9a838;
  color: #0b0b12;
}
.confirm-btn-ok {
  background: #030305;
  border: 1px solid #c03a2b;
  color: #c03a2b;
}
.confirm-btn-ok:hover {
  background: #c03a2b;
  border-color: #c03a2b;
  color: #0b0b12;
}

.help-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

.help-dialog {
  position: relative;
  background: var(--surface);
  border: 1px solid #fff;
  border-radius: var(--radius-lg);
  width: 891px;
  max-width: 92vw;
  height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.help-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.help-header h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.help-header.servo-skull-banner h2 {
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
.help-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: color 0.15s;
}
.help-close:hover { color: var(--text); }
.help-close-bottom { display: none; }

/* ── Help Modal Tabs ──────────────────────────────────── */
.help-tab-bar {
  display: flex;
  justify-content: space-evenly;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.help-tab-btn {
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--font);
  font-size: 1.26rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.help-tab-btn:hover {
  color: var(--text);
}
.help-tab-btn.active {
  color: #44ff44;
  border-bottom-color: #44ff44;
}
.help-tab-pane {
  display: none;
}
.help-tab-pane.active {
  display: block;
}

/* ── GIF placeholder boxes ────────────────────────────── */
.help-gif-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  margin: 10px 0 4px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.8rem;
  font-style: italic;
  background: rgba(255,255,255,0.02);
}
.help-gif-wrap {
  position: relative;
  display: block;
  margin: 10px 0 4px;
  cursor: pointer;
}
.help-gif-wrap::after {
  content: '';
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  background: rgba(0,0,0,0.55);
  border-radius: 5px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E");
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-color 0.15s;
}
.help-gif-wrap:hover::after { background-color: rgba(0,0,0,0.75); }
.help-gif {
  width: 100%;
  border: 1px solid #fff;
  border-radius: 6px;
  display: block;
  transition: opacity 0.15s;
}
.help-gif-wrap:hover .help-gif { opacity: 0.85; }

.gif-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.gif-lightbox img {
  max-width: 95vw;
  max-height: 95vh;
  border-radius: 6px;
  box-shadow: 0 4px 40px rgba(0,0,0,0.6);
}

/* ── Help Videos ────────────────────────────────────────────────────────────── */
.help-video-wrap {
  position: relative;
  display: block;
  margin: 10px 0 4px;
}
.help-video {
  width: 100%;
  border: 1px solid #fff;
  border-radius: 6px;
  display: block;
  background: #000;
  cursor: pointer;
}
.help-video-replay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.help-video-wrap.ended .help-video-replay,
.help-video-wrap.paused .help-video-replay {
  opacity: 1;
  pointer-events: auto;
}
.help-video-wrap.paused .help-video-replay {
  background: rgba(0, 0, 0, 0.5);
}
.help-video-replay:hover {
  background: rgba(0, 0, 0, 0.7);
}
/* ── Video progress bar ── */
.help-video-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 16px;
  z-index: 5;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  display: flex;
  align-items: flex-end;
}
.help-video-wrap:hover .help-video-progress {
  opacity: 1;
}
/* Hide progress bar when overlay is showing */
.help-video-wrap.paused .help-video-progress,
.help-video-wrap.ended .help-video-progress {
  opacity: 0;
}
.help-video-progress-track {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0 0 6px 6px;
  transition: height 0.15s;
}
.help-video-progress:hover .help-video-progress-track {
  height: 6px;
}
.help-video-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--gold);
  border-radius: 0 0 0 6px;
  position: relative;
}
.help-video-progress-thumb {
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.15s;
}
.help-video-progress:hover .help-video-progress-thumb {
  opacity: 1;
}

/* Icon visibility: replay icon for ended, play icon for paused */
.help-video-replay .icon-play { display: none; }
.help-video-replay .icon-replay { display: none; }
.help-video-wrap.ended .help-video-replay .icon-replay { display: block; }
.help-video-wrap.ended .help-video-replay .icon-play { display: none; }
.help-video-wrap.paused .help-video-replay .icon-play { display: block; }
.help-video-wrap.paused .help-video-replay .icon-replay { display: none; }
.help-video-replay svg {
  width: 64px;
  height: 64px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.8));
  transition: background 0.15s, border-color 0.15s;
}
.help-video-replay:hover svg {
  background: rgba(255, 255, 255, 0.22);
}

/* ── Video expand (fullscreen) button ── */
.help-video-expand {
  position: absolute;
  bottom: 14px;
  right: 10px;
  z-index: 8;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  border-radius: 5px;
  color: #e0e0e0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, background 0.15s;
}
.help-video-wrap:hover .help-video-expand {
  opacity: 1;
  pointer-events: auto;
}
.help-video-expand:hover {
  background: rgba(0, 0, 0, 0.75);
}
/* Hide expand button when overlay is showing */
.help-video-wrap.paused .help-video-expand,
.help-video-wrap.ended .help-video-expand {
  opacity: 0;
  pointer-events: none;
}

/* ── Video lightbox ── */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.video-lightbox video {
  max-width: 95vw;
  max-height: 90vh;
  border-radius: 6px;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
}
.video-lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  transition: background 0.15s;
}
.video-lightbox-close:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* ── Desktop/mobile section visibility ── */
.help-mobile-only { display: none; }

.help-body {
  overflow-y: auto;
  padding: 16px 20px 20px;
  flex: 1;
  min-height: 0;
}

/* ── Servo Skull Banner (help-header background) ──────── */
.servo-skull-banner {
  position: relative;
  height: 149px;
  min-height: 149px;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.servo-skull-banner .help-close {
  position: relative;
  z-index: 2;
}
.servo-skull-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}
.servo-skull-float {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 149px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: skull-float 4s ease-in-out infinite;
  margin-top: 29px;
}
.servo-skull-img {
  max-height: 180px;
  width: auto;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.8));
}
.servo-skull-eye {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff2200;
  box-shadow: 0 0 10px 5px rgba(255, 34, 0, 1), 0 0 25px 10px rgba(255, 34, 0, 0.5);
  animation: eye-pulse 1.1s ease-in-out infinite;
  top: 50%;
  left: 50%;
  transform: translate(-22px, -34px);
}

@keyframes skull-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes eye-pulse {
  0%, 100% {
    box-shadow: 0 0 8px 4px rgba(255, 34, 0, 0.6), 0 0 20px 8px rgba(255, 34, 0, 0.3);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 14px 7px rgba(255, 34, 0, 0.8), 0 0 35px 14px rgba(255, 34, 0, 0.5);
    opacity: 0.85;
  }
}

.help-section { margin-bottom: 20px; }
.help-section:last-child { margin-bottom: 0; }
.help-section h3 {
  font-family: 'Courier New', Consolas, monospace;
  font-size: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #44ff44;
  text-shadow: 0 0 6px rgba(51, 255, 51, 0.4);
  text-align: center;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.help-section h3::before {
  content: '═══ \2720  ';
}
.help-section h3::after {
  content: ' \2720  ═══';
}
.help-section p {
  font-size: 1.23rem;
  color: var(--text);
  margin: 6px 0;
  line-height: 1.55;
}

.help-badge-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
}
.help-badge-table td {
  padding: 5px 10px;
  font-size: 1.23rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  line-height: 1.5;
}
.help-badge-table td:first-child {
  width: 90px;
  text-align: center;
  white-space: nowrap;
}
.help-badge-inline {
  display: inline-block;
  vertical-align: middle;
}
.help-badge-table .perk-dmg-tag,
.help-badge-table .perk-surv-tag,
.help-badge-table .perk-ammo-tag {
  font-size: 1.23rem;
}
.help-section code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.17rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 4px;
}

.help-formula {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.125rem;
  color: var(--text);
  line-height: 1.6;
  margin: 8px 0;
  overflow-x: auto;
}
.help-formula-terms {
  margin: 8px 0 0;
}
.help-formula-terms dt {
  font-size: 1.17rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 6px;
}
.help-formula-terms dt:first-child { margin-top: 0; }
.help-formula-terms dd {
  font-size: 1.17rem;
  color: var(--text-dim);
  margin: 1px 0 0 0;
  line-height: 1.5;
}

.help-list {
  padding-left: 20px;
  margin: 0;
}
.help-list li {
  margin-bottom: 6px;
  font-size: 1.23rem;
  color: var(--text);
  line-height: 1.5;
}

.help-privacy-list {
  padding-left: 20px;
  margin: 4px 0 0 0;
}
.help-privacy-list li {
  margin-bottom: 6px;
  font-size: 1.23rem;
  color: var(--text);
  line-height: 1.5;
}

.help-indicators dt {
  font-size: 1.17rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 10px;
}
.help-indicators dt:first-child { margin-top: 0; }
.help-indicators dd {
  font-size: 1.23rem;
  color: var(--text-dim);
  margin: 2px 0 0 0;
  line-height: 1.5;
}

/* ── Combo Builder ──────────────────────────────────────────────────────── */

.combo-section { margin-bottom: 16px; }

/* Combo chip bar */
.combo-chip-bar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.combo-tab-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: 6px; padding: 4px 10px; font-size: 0.78rem;
  color: var(--text-dim); cursor: pointer; font-family: inherit;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.combo-tab-chip:hover { color: var(--text); background: var(--surface2); }
.combo-tab-chip.active {
  background: var(--surface3);
  color: #fff; font-weight: 600;
}
.combo-chip-count { font-size: 0.7rem; opacity: 0.7; }
.combo-chip-delete {
  font-size: 0.9rem; font-weight: bold; margin-left: 2px;
  opacity: 0.5; transition: opacity 0.15s;
}
.combo-chip-delete:hover { opacity: 1; }
.combo-tab-chip.combo-add-new {
  border-style: dashed; border-color: var(--border); color: var(--text-dim);
}
.combo-tab-chip.combo-add-new:hover { border-color: var(--blue); color: var(--blue); }

/* Add Combo button at bottom of combo list */
.combo-add-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 24px;
  margin-top: 12px;
  margin-bottom: 60px;
  background: transparent;
  border: 2px dashed rgba(255, 255, 255, 0.35);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.combo-add-bottom:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(100, 160, 255, 0.05);
}
.combo-add-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.combo-chip-rename-input {
  background: transparent; border: none; border-bottom: 1px solid var(--blue);
  color: inherit; font-size: inherit; font-family: inherit;
  outline: none; padding: 0;
}

/* Combo group headers */
.combo-group:first-child {
  margin-top: 6px;
}
.combo-group {
  margin-bottom: 12px;
  border: none;
  border-radius: var(--radius);
  padding: 0;
  --combo-border-color: rgba(255, 255, 255, 0.6);
}
.combo-group.combo-active {
  --combo-border-color: #44ff44;
}
.combo-active-badge {
  font-family: 'Courier New', Consolas, monospace;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #44ff44;
  text-shadow: 0 0 8px rgba(51, 255, 51, 0.5);
  display: block;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  padding: 4px 0 2px;
}
.config-locked {
  opacity: 0.45;
  pointer-events: none;
}
[data-config-pane="difficulties"] {
  pointer-events: auto;
}
.combo-diff-badge {
  font-size: 0.72rem;
  color: var(--text-dim);
  background: rgba(255,255,255,0.06);
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 8px;
  white-space: nowrap;
  align-self: center;
}
.combo-group-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 8px; margin-bottom: 0;
  position: sticky;
  top: 3px;
  z-index: 3;
  background: var(--surface);
  border: 1px solid var(--combo-border-color);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  transition: border-color 0.2s;
}
.combo-group.combo-active .combo-group-header {
  box-shadow: 0 0 8px rgba(51, 255, 51, 0.15);
}
.combo-table,
.combo-empty-state {
  border: 1px solid var(--combo-border-color);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: border-color 0.2s;
}
.combo-group.combo-active .combo-table,
.combo-group.combo-active .combo-empty-state {
  box-shadow: 0 0 8px rgba(51, 255, 51, 0.15);
}
.combo-group-name {
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.04em; cursor: text; outline: none;
  border: 1px solid var(--text); border-radius: var(--radius);
  padding: 3px 24px 3px 12px;
  min-width: 180px;
  position: relative;
  transition: border-color 0.15s;
}
.combo-group-name:hover { border-color: var(--text); }
.combo-group-name:focus { border-color: var(--blue); }
.combo-group-name::after {
  content: '\270E';
  font-size: 0.7rem;
  color: var(--muted);
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%) scaleX(-1);
}
.combo-group-left { display: flex; align-items: center; gap: 32px; }
.combo-group-delete {
  font-size: 0.78rem; padding: 3px 12px; font-family: inherit;
  background: transparent; border: 1px solid #e04040; border-radius: var(--radius);
  color: #e04040; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.combo-group-delete:hover { background: #e04040; color: #fff; }
.combo-group-clear {
  font-size: 0.78rem; padding: 3px 12px; font-family: inherit;
  background: transparent; border: 1px solid #e8a838; border-radius: var(--radius);
  color: #e8a838; cursor: pointer; transition: background 0.15s, color 0.15s;
  margin-left: auto;
}
.combo-group-clear:hover { background: #e8a838; color: #0a0a14; }
.combo-clone-build-btn {
  font-size: 0.78rem; padding: 3px 12px; font-family: inherit;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.combo-clone-build-btn:hover { background: var(--border); color: var(--text-primary); }

/* Enemy chips, faction toggles → css/combo-analysis.css (not deployed) */

/* Combo list */
.combo-list { max-height: 40vh; overflow-y: auto; }
.combo-empty-state {
  color: var(--text-dim); font-style: italic; font-size: 0.82rem;
  padding: 16px 0; text-align: center;
}

/* Combo table */
.combo-table {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.95rem;
  table-layout: fixed;
}
.combo-table th {
  text-align: center; padding: 8px 4px; font-size: 0.88rem;
  font-weight: 600; text-transform: uppercase; text-decoration: underline;
  letter-spacing: 0.06em; color: #fff;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.combo-table th.combo-col-name { text-align: left; }
.combo-table th.combo-col-mods { text-align: left; }
.combo-table td { padding: 5px 4px; text-align: center; border-bottom: 1px solid var(--border); }

/* Reorder is HTML5 drag-and-drop with the whole row as the drag source and no
   drag handle. Blink's UA stylesheet quietly applies user-select: none to
   [draggable=true], so this never bit on Chrome — but WebKit does not, so on iOS
   a press-and-move resolved to Safari's text-selection gesture before it ever
   became a drag. Declared for the whole table so dragging works from anywhere on
   a row, including the number and damage cells. */
.combo-table {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.combo-entry { cursor: grab; transition: opacity 0.15s, background 0.15s; position: relative; }
.combo-entry:hover { background: var(--surface2); }
.combo-dragging { opacity: 0.35; }
.combo-insert-before::before,
.combo-insert-after::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: #fff;
  z-index: 10;
  pointer-events: none;
}
.combo-insert-before::before { top: -1px; }
.combo-insert-after::after { bottom: -1px; }
.combo-drop-target { outline: 2px solid #fff; outline-offset: -2px; }

.combo-col-num { color: var(--text-dim); width: 3%; overflow: visible; position: relative; }
.combo-col-name { text-align: left !important; width: 16%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-col-mods { text-align: left !important; width: 17%; white-space: normal; }
.combo-col-dmg { color: var(--gold); font-weight: 600; white-space: nowrap; width: 9%; }
.combo-col-tier { font-weight: 500; white-space: nowrap; width: 11%; }
.combo-col-rm { width: 3%; position: relative; overflow: visible; }
.combo-col-enemy { width: 9%; overflow: hidden; text-overflow: ellipsis; }
.combo-table th.combo-col-enemy { color: var(--text-dim); border-left: 1px solid var(--border); }
.combo-table td.combo-col-enemy { border-left: 1px solid rgba(255,255,255,0.06); }
.combo-table.has-enemy-cols .combo-col-tier { width: 9%; }
.combo-table.has-enemy-cols .combo-col-mods { width: 14%; }
.combo-table.has-enemy-cols .combo-col-enemy { width: 11%; }
.combo-enemy-total-kill { color: #4caf82 !important; }
.combo-enemy-total-nok { color: var(--gold); }

.combo-hit-badge { color: var(--blue); font-size: 0.72rem; font-weight: 600; }
.combo-mod-tag {
  display: inline-block;
  border-radius: 3px; padding: 1px 5px; font-size: 0.7rem;
  margin: 1px 2px; vertical-align: middle;
}
.combo-mod-tag.combo-mod-active {
  background: #e8e8e8; border: 1px solid #ccc; color: #1a1a1a; font-weight: 600;
}
.combo-mod-tag.combo-mod-inactive {
  background: var(--bg); border: 1px solid var(--border); color: var(--text-muted);
}
.combo-mod-none { color: var(--text-muted); font-size: 0.75rem; }

.combo-entry-remove {
  background: none; border: none; color: #e04040; cursor: pointer;
  font-size: 1.2rem; line-height: 1; padding: 6px 8px;
  border-radius: var(--radius); transition: color 0.15s, background 0.15s;
  position: relative;
  left: -6px;
  z-index: 2;
}
.combo-entry-remove:hover { color: #e74c4c; background: rgba(231,76,76,0.12); }

/* ── Link button (between # and name columns, straddling row border) ──── */
.combo-num-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.combo-link-btn {
  position: absolute; top: -19px; right: -5px;
  background: transparent; border: none;
  cursor: pointer; color: var(--text-muted);
  padding: 1px; line-height: 1; z-index: 2;
  transition: color 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.combo-link-btn svg { width: 14px; height: 14px; }
.combo-link-btn.active { color: #fff; top: -26px; }
.combo-link-btn:hover { color: #fff; }

/* Linked entry visual indicator — smushed together */
.combo-entry-linked td { padding-top: 2px; padding-bottom: 2px; border-bottom-color: rgba(255,255,255,0.03); }
.combo-entry-linked + .combo-entry:not(.combo-entry-linked) td { padding-top: 5px; } /* restore after linked group */
/* Also reduce bottom padding on the row BEFORE a linked row */
.combo-entry.combo-has-linked-next td { padding-bottom: 2px; border-bottom-color: rgba(255,255,255,0.03); }
.combo-entry-linked .combo-col-num { color: var(--text-dim); }
/* Zebra striping by attack number */
.combo-entry.combo-stripe-even { background: rgba(255,255,255,0.03); }
.combo-entry.combo-stripe-odd { background: transparent; }

/* Total row, chart, breakpoints → css/combo-analysis.css (not deployed) */

/* "+" button in attack table */
.col-combo-header { width: 28px; min-width: 28px; padding: 0 !important; }
.col-combo-add { width: 28px; min-width: 28px; padding: 2px !important; text-align: center; }
.combo-add-btn {
  width: 22px; height: 22px; border-radius: 50%;
  background: transparent; border: 1.5px solid #44ff44; color: #44ff44;
  font-size: 0.9rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}
.combo-add-btn:hover { background: #44ff44; color: #0a0a14; }

/* Row sweep animation when attack is added to combo */
@keyframes combo-row-sweep {
  0%   { background-position: -100% 0; }
  40%  { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}
/* Suppress hover highlight during flash */
#attack-table tbody tr.no-hover td { background: transparent !important; }

tr.combo-added-flash {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(68, 255, 68, 0.2) 30%,
    rgba(68, 255, 68, 0.35) 50%,
    rgba(68, 255, 68, 0.2) 70%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: combo-row-sweep 0.6s ease-out forwards;
}
tr.combo-added-flash td {
  background: transparent !important;
}

/* Green flash on combo builder sidebar tab */
@keyframes combo-tab-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(68, 255, 68, 0.7); }
  50%  { box-shadow: 0 0 20px 8px rgba(68, 255, 68, 0.6); }
  100% { box-shadow: 0 0 0 0 rgba(68, 255, 68, 0); }
}
.sidebar-btn.combo-tab-flash {
  animation: combo-tab-pulse 0.45s ease-out forwards;
}
/* Weapon tabs use clip-path which clips box-shadow — expand during flash */
.sidebar-btn.has-weapon-bg.combo-tab-flash {
  clip-path: inset(-20px round 6px);
}

/* Combo Builder tab label turns green when activated */
.sidebar-btn.combo-activated .sidebar-btn-label {
  color: #33ff33;
}

/* ── Electric pulse trace (Show Build) ───────────────────────────────────── */
.pulse-trace-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}
.pulse-h-sweep {
  position: absolute;
  height: 3px;
  border-radius: 2px;
  background: #44ff44;
  box-shadow: 0 0 8px 2px rgba(68, 255, 68, 0.6), 0 0 20px 4px rgba(68, 255, 68, 0.3);
  transform-origin: right center;
  transform: scaleX(0);
  animation: pulse-h-expand 0.3s ease-out forwards;
}
@keyframes pulse-h-expand {
  0%   { transform: scaleX(0); opacity: 1; }
  80%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
.pulse-v-trace {
  position: absolute;
  width: 3px;
  height: 20px;
  border-radius: 2px;
  background: #44ff44;
  box-shadow: 0 0 8px 3px rgba(68, 255, 68, 0.7), 0 0 24px 6px rgba(68, 255, 68, 0.3);
  opacity: 0;
}
.pulse-v-trail {
  position: absolute;
  width: 2px;
  border-radius: 1px;
  background: rgba(68, 255, 68, 0.3);
  box-shadow: 0 0 6px 1px rgba(68, 255, 68, 0.2);
  transform-origin: bottom center;
  transform: scaleY(0);
}
@keyframes pulse-trail-grow {
  0%   { transform: scaleY(0); opacity: 0.6; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ── Cogitator Terminal Changelog ─────────────────────────────────────────── */

#changelog-modal .help-dialog {
  background: #080c08;
  border: 2px solid #3a4a2a;
  width: min(447px, 95vw);
  max-height: min(513px, 90dvh);
  box-shadow:
    0 0 0 1px #1a1a10,
    0 0 0 3px #2a3020,
    0 0 30px rgba(51, 255, 51, 0.08),
    0 8px 40px rgba(0, 0, 0, 0.8);
}

/* Cogitator frame — sibling of dialog, positioned to overlap */
#changelog-modal .cogitator-frame {
  position: fixed;
  pointer-events: none;
  z-index: 1002;
  object-fit: fill;
  filter: brightness(0.8) contrast(1.65) saturate(0.8);
}

/* Cogitator frame color overlay — masked to frame shape */
#changelog-modal .cogitator-frame-overlay {
  position: fixed;
  pointer-events: none;
  z-index: 1003;
  -webkit-mask-image: url(../assets/cogitator-frame.png);
  mask-image: url(../assets/cogitator-frame.png);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background: rgba(0, 0, 0, 0.3);
}

/* Vignette overlay */
#changelog-modal .help-dialog::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
}

#changelog-modal .help-header {
  border-bottom: 1px solid rgba(51, 255, 51, 0.15);
  padding: 0 20px 16px;
  min-height: 83px;
  flex-direction: column;
  align-items: center;
}

#changelog-modal .help-header h2 {
  font-family: 'Courier New', Consolas, monospace;
  color: #33ff33;
  text-shadow: 0 0 6px rgba(51, 255, 51, 0.5);
  letter-spacing: 0.12em;
  font-size: 0.9rem;
  width: 100%;
  text-align: center;
}

#changelog-modal .help-close {
  color: rgba(51, 255, 51, 0.6);
  position: absolute;
  right: 8px;
  top: 6px;
  z-index: 4;
  font-size: 2rem;
  padding: 6px 12px;
}
#changelog-modal .help-close:hover {
  color: #33ff33;
  text-shadow: 0 0 8px rgba(51, 255, 51, 0.6);
}

/* Aquila image in header */
#changelog-modal .changelog-aquila {
  display: block;
  margin: 0 auto 8px;
  max-height: 60px;
  width: auto;
  mix-blend-mode: screen;
  opacity: 0.85;
  filter: drop-shadow(0 0 8px rgba(51, 255, 51, 0.4));
}

#changelog-modal .help-body {
  font-family: 'Courier New', Consolas, monospace;
  color: #33ff33;
  text-shadow: 0 0 4px rgba(51, 255, 51, 0.3);
  position: relative;
  padding: 60px 20px 20px;
}

/* Fade overlays — anchored to dialog, not scrolling body */
#changelog-modal .cog-fade-top {
  position: absolute;
  left: 0; right: 0;
  height: 97px;
  opacity: 0.85;
  background: linear-gradient(to bottom, #080c08, transparent);
  z-index: 4;
  pointer-events: none;
}
#changelog-modal .cog-fade-bot {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 120px;
  opacity: 0.9;
  background: linear-gradient(to top, #080c08, transparent);
  z-index: 4;
  pointer-events: none;
}

/* Scanline overlay */
#changelog-modal .help-body::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.06) 2px,
    rgba(0, 0, 0, 0.06) 4px
  );
  pointer-events: none;
  z-index: 2;
}

/* Green scrollbar */
#changelog-modal .help-body::-webkit-scrollbar { width: 6px; }
#changelog-modal .help-body::-webkit-scrollbar-track { background: #0a0f0a; }
#changelog-modal .help-body::-webkit-scrollbar-thumb {
  background: rgba(51, 255, 51, 0.25);
  border-radius: 3px;
}
#changelog-modal .help-body::-webkit-scrollbar-thumb:hover {
  background: rgba(51, 255, 51, 0.4);
}

#changelog-modal .help-section h3 {
  font-family: 'Courier New', Consolas, monospace;
  color: #44ff44;
  text-shadow: 0 0 6px rgba(51, 255, 51, 0.4);
  border-bottom: 1px solid rgba(51, 255, 51, 0.12);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}

#changelog-modal .help-section ul {
  list-style: none;
  padding-left: 0;
}

#changelog-modal .help-section li {
  color: #22cc22;
  text-shadow: 0 0 3px rgba(51, 255, 51, 0.2);
  font-size: 0.78rem;
  line-height: 1.6;
  padding: 2px 0;
  padding-left: 1.2em;
  text-indent: -1.2em;
}

#changelog-modal .help-section li::before {
  content: '> ';
  color: rgba(51, 255, 51, 0.7);
}

/* Frame glow — horizontal scan lines that scroll with text, only on frame edges */
#changelog-modal .cog-glow-l,
#changelog-modal .cog-glow-r {
  position: fixed;
  pointer-events: none;
  z-index: 1003;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 24px,
    rgba(51, 255, 51, 0.07) 24px,
    rgba(51, 255, 51, 0.07) 33px
  );
  mix-blend-mode: screen;
}

/* Bottom spacer for scroll clearance past bottom gradient */
#changelog-modal .changelog-spacer {
  height: 100px;
}

/* ── Mobile-only elements: hidden on desktop ──────────────────────────────── */
#mobile-header-bar { display: none; }
#mobile-landing { display: none; }
#mobile-sheet-handle { display: none; }
#mobile-enemy-selector { display: none; }

/* ── Responsive: Tablet (≤768px) ─────────────────────────────────────────── */
@media (max-width: 768px) {

  /* -- Mobile lock icons -- */
  .pane-lock-icon { display: none !important; }

  .mobile-lock-icon {
    display: inline-flex;
    position: absolute;
    top: 8px;
    right: 10px;
    width: 20px;
    height: 20px;
    color: #e8a838;
    opacity: 0.85;
    pointer-events: none;
  }
  .mobile-lock-icon svg { width: 100%; height: 100%; }

  .mobile-header-lock {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: #e8a838;
    opacity: 0.85;
    margin-left: 8px;
    vertical-align: middle;
    pointer-events: none;
  }
  .mobile-header-lock svg { width: 100%; height: 100%; }

  /* -- Combo builder: hide header column but show add button -- */
  .col-combo-header { display: none; }
  /* Hide gear icon on mobile */
  #col-gear-btn { display: none !important; }

  /* -- Scroll model: let page scroll naturally -- */
  /* overflow-x is clip, not auto: `overflow: auto` is both axes and body's
     overflow propagates to the viewport, so any stray wide element pans the
     whole document sideways and drags the sticky mobile chrome with it. */
  body { height: auto; overflow-y: visible; overflow-x: clip; }
  .app-layout { flex-direction: column; min-height: auto; }
  .main-body { border-left: none; overflow: visible; }
  .tab-content { overflow: visible; flex: none; }
  .damage-section { flex: none; border-top: none; }
  .panel-handle { display: none; }
  #attack-section-body { flex: none; }
  #table-wrapper { overflow-y: visible; max-height: none; }

  /* -- Header compact: scrolls away on mobile, nav tabs stay sticky -- */
  header {
    flex-wrap: wrap;
    justify-content: center;
    padding: 8px 12px;
    gap: 5px;
    position: static;
    z-index: auto;
  }
  /* Top row: title centered, patch overlaid top-left */
  #header-top-row {
    display: block;
    position: relative;
    width: 100%;
  }
  #header-patch {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    text-align: left;
    line-height: 1.3;
  }
  #header-title {
    position: static;
    transform: none;
    text-align: center;
    width: 100%;
  }
  header h1 { font-size: 1.15rem; }
  #header-sub { font-size: 0.6rem; }
  #header-patch { display: none; }
  /* Buttons: centered */
  #help-btn { font-size: 0.65rem; padding: 5px 8px; margin-right: 0; }
  #share-btn { margin-right: 0; font-size: 0.65rem; padding: 5px 8px; }
  #support-btn { margin-right: 0; font-size: 0.65rem; padding: 5px 8px; }
  #feedback-btn { font-size: 0.65rem; padding: 5px 8px; }

  /* -- Sidebar → sticky top nav bar -- */
  .sidebar {
    flex-direction: row;
    width: 100%;
    border-bottom: 1px solid var(--border);
    padding: 6px 8px;
    gap: 4px;
    z-index: 50;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    background: var(--surface);
  }
  .sidebar-btn {
    flex: 1;
    padding: 8px 4px;
    margin-right: 0;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    min-width: 0;
  }
  .sidebar-btn.active { margin-right: 0; border-radius: var(--radius); border-right: 1px solid var(--border); }
  .sidebar-btn-info, .sidebar-btn-sub, .sidebar-class-img { display: none; }
  .sidebar-btn[data-tab="weapon"].has-weapon-bg { background-image: none !important; }
  .sidebar-btn[data-tab="weapon"].has-weapon-bg::before { display: none; }
  .sidebar-btn.has-class-bg { background-image: none !important; }
  .sidebar-btn.has-class-bg::before { display: none; }
  .sidebar-btn-label { font-size: 0.68rem; text-align: center; }
  .clear-all-btn { font-size: 0.58rem; padding: 4px 6px; margin-bottom: 0; flex: 0 0 auto; white-space: nowrap; }

  /* -- Modifier group: collapsible panel below nav -- */
  .sidebar #modifier-group {
    flex: none;
    width: 100%;
    border-top: 1px solid var(--border);
    padding: 10px 8px;
    margin-right: 0;
    overflow: visible;
  }
  .sidebar #modifier-group.mods-collapsed {
    display: none;
  }
  .modifier-pair-row { flex-direction: column; gap: 8px; }
  .sidebar #modifier-group .modifier-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .sidebar .mods-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    flex: 0 0 auto;
    padding: 8px 6px;
  }

  /* -- Class & weapon card grids: bigger cards on mobile -- */
  .class-cards-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  .class-card-label { font-size: 0.65rem; padding: 5px 2px; letter-spacing: 0.02em; }
  .weapon-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* -- Tab content -- */
  .tab-content { padding: 10px 12px 16px; }
  #config-row,
  #sidearm-config-row,
  #primary-config-row { flex-direction: column; gap: 8px; }
  #weapon-group,
  #sidearm-weapon-group,
  #primary-weapon-group { min-width: 0; width: 100%; }
  #variant-group,
  #sidearm-variant-group,
  #primary-variant-group { min-width: 0; width: 100%; }
  .config-group { width: 100%; flex-direction: row; align-items: center; gap: 8px; }
  .config-group label, .config-group .group-label { white-space: nowrap; min-width: fit-content; display: revert; }
  #modifier-group { flex-direction: column; align-items: stretch; }
  /* Clear class button on mobile */
  .mobile-clear-class-btn {
    flex: 0 0 auto;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border: 1px solid var(--red);
    border-radius: 4px;
    background: transparent;
    color: var(--red);
    cursor: pointer;
    white-space: nowrap;
  }

  /* Hide perk-header inside weapon-group on mobile (moved to stats row via JS) */
  #weapon-group #perk-header { display: none; }
  #sidearm-weapon-group #sidearm-perk-header { display: none; }
  #primary-weapon-group #primary-perk-header { display: none; }
  /* Primary mirrors the sidearm layout below; without it the perk header stayed
     inline in the config row and pushed 121px off the right edge. */
  #mobile-primary-stats-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
  }
  #mobile-primary-stats-row #primary-variant-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 8px;
    flex: 1;
  }
  #mobile-primary-stats-row #primary-perk-header {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
  }
  #mobile-sidearm-stats-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
  }
  #mobile-sidearm-stats-row #sidearm-variant-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 8px;
    flex: 1;
  }
  #mobile-sidearm-stats-row #sidearm-perk-header {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
  }
  /* Stats + perk counter row below dropdowns */
  #mobile-stats-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
  }
  #mobile-stats-row #variant-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
    flex: 1;
  }
  #mobile-stats-row #perk-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
  }

  /* -- Weapon perk tree: shrink -- */
  .perk-btn { width: 76px; min-height: 60px; font-size: 0.65rem; padding: 4px 6px;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent; }
  .perk-btn:focus:not(:focus-visible) { outline: none; }
  .perk-btn.available:hover { border-color: rgba(255, 255, 255, 0.75); box-shadow: none; }
  /* Prevent text selection on modifier rows (interferes with long-press) */
  .modifier-row, .modifier-row *, .modifier-label {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  /* Gold highlight while long-press tooltip is showing */
  .perk-btn.touch-tooltip-active,
  .perk-btn.available.touch-tooltip-active:hover { border-color: var(--gold); box-shadow: 0 0 8px rgba(212, 175, 55, 0.35); }
  .modifier-row.touch-tooltip-active { outline: 1px solid var(--gold); box-shadow: 0 0 8px rgba(212, 175, 55, 0.35); border-radius: 4px; }
  .config-list-item.touch-tooltip-active { outline: 1px solid var(--gold); box-shadow: 0 0 8px rgba(212, 175, 55, 0.35); }
  /* Difficulty page: long-press shows the tooltip, so no native text-selection / callout */
  #difficulty-tab-content { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .class-card.touch-tooltip-active { border-color: var(--gold); box-shadow: 0 0 12px rgba(212, 175, 55, 0.4); transform: scale(1.04); transition: transform 0.15s, box-shadow 0.15s; }
  #class-perk-tree .perk-btn.icon-perk.touch-tooltip-active::before,
  #class-perk-tree .perk-btn.icon-perk.available.touch-tooltip-active:hover::before,
  .tm-perk-tree .perk-btn.icon-perk.touch-tooltip-active::before,
  .tm-perk-tree .perk-btn.icon-perk.available.touch-tooltip-active:hover::before,
  #prestige-perk-tree .perk-btn.icon-perk.touch-tooltip-active::before,
  #prestige-perk-tree .perk-btn.icon-perk.available.touch-tooltip-active:hover::before {
    background: var(--gold);
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.4));
  }
  .chain-connector { width: 28px; }
  .perk-chain.has-above-specials { padding-top: 72px; }
  .perk-chain.has-below-specials { padding-bottom: 72px; }
  /* Recalculate special perk position: C/2 - W/2 = 14 - 38 = -24px */
  .conn-special { left: -24px; width: 76px; }
  /* L-shape: width = C/2 = 14px, left = -14px */
  .conn-special-above > .conn-special-line { left: -14px; width: 14px; }
  .conn-special-below > .conn-special-line { left: -14px; width: 14px; }
  .perk-arrow { padding: 0 2px; }
  .perk-arrow-line { width: 12px; }

  /* -- Disable sticky hover on perk buttons (touch devices) -- */
  #class-perk-tree .perk-btn.icon-perk.available:hover::before,
  .tm-perk-tree .perk-btn.icon-perk.available:hover::before,
  #prestige-perk-tree .perk-btn.icon-perk.available:hover::before {
    background: rgba(255, 255, 255, 0.75);
    filter: none;
  }

  /* -- Class perk grid -- */
  #class-perk-tree .perk-btn.icon-perk,
  .tm-perk-tree .perk-btn.icon-perk,
  #prestige-perk-tree .perk-btn.icon-perk { width: 78px; height: 70px; min-height: 70px; }
  #class-perk-tree .perk-btn.icon-perk img,
  .tm-perk-tree .perk-btn.icon-perk img,
  #prestige-perk-tree .perk-btn.icon-perk img { width: 52px; height: 52px; }

  /* -- Damage table: frozen Attack column + compact -- */
  #attack-table th:first-child,
  #attack-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
  }
  #attack-table th:first-child {
    background: var(--surface2);
    z-index: 3;
  }
  #attack-table td:first-child {
    box-shadow: 2px 0 4px rgba(0,0,0,0.3);
  }
  #attack-table th, #attack-table td { padding: 6px 8px; font-size: 0.85rem; }

  /* -- Damage table: now managed by bottom sheet on mobile -- */
  /* Old table-tab toggle styles disabled — bottom sheet handles visibility */
  #attack-table {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    /* border-collapse: collapse breaks position: sticky on th */
    border-collapse: separate;
    border-spacing: 0;
  }

  /* -- Tooltip -- */
  #tooltip { max-width: min(280px, 90vw); }
  #tooltip.visible { pointer-events: auto; }

  /* -- Help modal -- */
  .help-dialog { width: 95vw; max-height: 90dvh; overflow: hidden; }
  .help-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface);
    padding: 14px 16px 10px;
  }
  .help-close {
    font-size: 2rem;
    padding: 8px 14px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
  }
  .help-close-bottom {
    display: block;
    width: 100%;
    padding: 14px;
    margin-top: 16px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    cursor: pointer;
  }

  /* -- Touch targets -- */
  .seg-btn { min-height: 44px; }
  .toggle { min-height: 44px; display: inline-flex; align-items: center; }
  #col-gear-btn { min-width: 44px; min-height: 44px; }
  .flyout-check-item { min-height: 44px; display: flex; align-items: center; }
  .custom-select-option { min-height: 44px; display: flex; align-items: center; }

  /* -- Perk tree scroll indicator (gradient fade) -- */
  #perk-tree,
  #sidearm-perk-tree,
  #primary-perk-tree { position: relative; }
  #perk-tree::after,
  #sidearm-perk-tree::after,
  #primary-perk-tree::after {
    content: '';
    position: sticky;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    min-height: 100%;
    background: linear-gradient(to right, transparent, var(--bg));
    pointer-events: none;
    flex-shrink: 0;
  }

  /* -- Teammate perk tree: scroll only the tree, not the whole page -- */
  .tm-perk-tree-section { overflow-x: auto; }
  .tm-perk-tree { overflow-x: visible; }

  /* -- Data Tables modal: full width, scrollable tabs -- */
  .help-dialog.data-dialog { width: 95vw; }
  .help-tab-bar { flex-wrap: wrap; gap: 0; }
  .data-tab-btn { font-size: 0.72rem; padding: 8px 10px; min-height: 44px; flex: 1; text-align: center; }
  .data-table { font-size: 0.82rem; }
  .data-table th, .data-table td { padding: 5px 6px; }

  /* -- Changelog modal: responsive -- */
  #changelog-modal .help-dialog { width: 95vw; max-height: 90dvh; }
  #changelog-modal .cogitator-frame,
  #changelog-modal .cogitator-frame-overlay,
  #changelog-modal .cog-glow-l,
  #changelog-modal .cog-glow-r { display: none; }
  #changelog-modal .help-close { font-size: 1.6rem; padding: 6px 10px; min-width: 44px; min-height: 44px; }

  /* -- Combo tab on mobile: config tabs, panes, difficulty grid -- */
  .config-tabs { flex-wrap: wrap; }
  .config-tab-btn { font-size: 0.72rem; padding: 8px 4px; min-height: 44px; }
  .config-list-item { min-height: 44px; padding: 8px 10px; }
  .config-item-label { font-size: 0.92rem; }
  .diff-pane-grid { grid-template-columns: 1fr; gap: 8px; overflow: visible; }
  .diff-pane-col { overflow: visible; }
  .diff-pane-col .config-scroll-list { overflow-y: visible; }
  .combo-breakpoints { flex-direction: column; }
  .bp-card { min-width: 0; width: 100%; }
  .combo-chart-wrap { min-height: 220px; }
  .config-difficulty-badge { flex-wrap: wrap; font-size: 0.68rem; padding: 5px 8px; }
  .config-difficulty-badge .badge-mods { margin-left: 0; margin-top: 4px; width: 100%; }
  .combo-faction-btn { min-height: 44px; font-size: 0.72rem; }
  .config-mod-type-btn { min-height: 44px; font-size: 0.72rem; }

  /* ── Mobile Header Bar ──────────────────────────────────────── */
  /* Single source of truth for the pinned header's height: anything that pins
     beneath it (the combo chart) offsets from this rather than a magic number. */
  :root { --mobile-header-h: 64px; }
  #mobile-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 8px 12px;
    min-height: 48px;
  }
  #mobile-back-btn {
    background: rgba(28, 28, 46, 0.65);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text);
    cursor: pointer;
    padding: 10px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  #mobile-back-btn svg { width: 26px; height: 26px; }
  #mobile-back-btn:active { background: rgba(37, 37, 56, 0.8); }
  /* Hide back button when on landing page */
  body.mobile-on-landing #mobile-back-btn { visibility: hidden; }
  #mobile-reset-btn {
    background: rgba(28, 28, 46, 0.65);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--red);
    cursor: pointer;
    padding: 10px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
    visibility: hidden;
    position: absolute;
    left: 12px;
  }
  #mobile-reset-btn svg { width: 26px; height: 26px; }
  #mobile-reset-btn:active { background: rgba(37, 37, 56, 0.8); }
  body.mobile-on-landing #mobile-reset-btn { visibility: visible; }
  .help-desktop-only { display: none !important; }
  .help-mobile-only { display: block !important; }
  #mobile-header-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text);
    text-align: center;
    flex: 1;
  }
  #mobile-info-btn {
    background: rgba(28, 28, 46, 0.65);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text);
    cursor: pointer;
    padding: 10px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  #mobile-info-btn svg { width: 26px; height: 26px; }
  #mobile-info-btn:active { background: rgba(37, 37, 56, 0.8); }
  #mobile-info-dropdown {
    position: absolute;
    top: 100%;
    right: 12px;
    z-index: 70;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    overflow: hidden;
  }
  .mobile-info-item {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
  }
  .mobile-info-item:last-child { border-bottom: none; }
  .mobile-info-item:active { background: var(--surface3); }
  /* CRT mode picker (info menu). The menu itself stays open while picking. */
  .mobile-info-item[data-action="crt"] { display: flex; align-items: center; gap: 4px; }
  /* Drawn chevron: down when closed, up when open */
  .crt-mode-caret {
    margin-left: auto;
    margin-top: -4px;
    width: 8px;
    height: 8px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
  }
  .mobile-info-item[aria-expanded="true"] .crt-mode-caret { transform: rotate(135deg); margin-top: 4px; }
  .mobile-info-item[aria-expanded="true"] { background: var(--surface3); }
  .crt-mode-menu[hidden] { display: none; }
  .crt-mode-option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    color: #fff;
    font-size: 1rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
  }
  .crt-mode-option::after { content: ''; margin-left: auto; padding-left: 16px; }
  .crt-mode-option.is-current { font-weight: 700; }
  .crt-mode-option.is-current::after { content: '\2713'; color: var(--gold); font-weight: 700; }
  .crt-mode-option:active { background: var(--surface3); }
  .crt-mode-menu { border-bottom: 1px solid var(--border); background: var(--surface); }
  .crt-mode-menu .crt-mode-option { padding-left: 28px; }

  /* Hide desktop header on mobile when new mobile header is active */
  header { display: none; }

  /* ── Mobile Landing Page ────────────────────────────────────── */
  #mobile-landing {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
    gap: 20px;
  }
  body.mobile-on-landing #mobile-landing { display: flex; }
  /* Hide sidebar, tab content, and main-body border on landing — but keep damage section visible */
  body.mobile-on-landing .sidebar { display: none; }
  body.mobile-on-landing .tab-content { display: none; }
  body.mobile-on-landing .main-body { border-left: none; overflow: visible; flex: none; }
  .mobile-landing-title {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold);
  }
  .mobile-build-name {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text);
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23999'%3E%3Cpath d='M12.15 1.85a1.5 1.5 0 0 1 2.12 2.12L5.7 12.54l-3.08.77.77-3.08z'/%3E%3C/svg%3E") no-repeat right 10px center / 16px 16px;
    border: 1px solid var(--text-muted);
    border-radius: var(--radius);
    text-align: center;
    width: 100%;
    padding: 8px 32px 8px 8px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.15s;
  }
  .mobile-build-name:focus {
    outline: none;
    border-color: var(--blue);
  }
  .mobile-build-name::placeholder {
    color: var(--text-secondary);
    opacity: 0.5;
  }
  .mobile-landing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 400px;
  }
  .mobile-landing-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px 12px;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-family: inherit;
    min-height: 90px;
  }
  .mobile-landing-btn:active { background: var(--surface2); border-color: var(--gold-dim); }
  .mobile-landing-btn.tab-disabled { opacity: 0.3; pointer-events: none; }
  .mobile-landing-btn-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text);
  }
  .mobile-landing-btn-info {
    font-size: 0.72rem;
    color: var(--text-dim);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .mobile-landing-btn-sub {
    font-size: 0.72rem;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    position: relative;
    z-index: 1;
  }
  /* Team configured: info span takes label styling, shows class names */
  .ml-team-configured {
    white-space: normal;
    line-height: 1.4;
    position: relative;
    z-index: 1;
  }
  /* Full-width button for Combo Builder */
  .mobile-landing-btn-combo {
    grid-column: 1 / -1;
  }

  /* Mobile landing button background images */
  .mobile-landing-btn {
    position: relative;
    overflow: hidden;
  }
  .mobile-landing-btn .ml-btn-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.2s;
  }
  .mobile-landing-btn.has-ml-bg .mobile-landing-btn-label,
  .mobile-landing-btn.has-ml-bg .mobile-landing-btn-info,
  .mobile-landing-btn.has-ml-bg .ml-diff-arrows {
    position: relative;
    z-index: 1;
  }

  /* Difficulty modifier arrows on landing button */
  .ml-diff-arrows {
    display: inline-flex;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
  }
  .ml-diff-arrows .badge-mod-pos { color: #4caf50; }
  .ml-diff-arrows .badge-mod-neg { color: #e53935; }

  /* Team button split-style background on landing */
  .mobile-landing-btn .ml-team-split {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    overflow: hidden;
  }
  .mobile-landing-btn .ml-team-split .ml-team-half {
    position: absolute;
    inset: 0;
  }
  .mobile-landing-btn .ml-team-split .ml-team-half-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .mobile-landing-btn .ml-team-split .ml-team-half-0 {
    -webkit-mask-image: linear-gradient(136.5deg, black 44%, rgba(0,0,0,0.75) 46%, rgba(0,0,0,0.25) 50%, transparent 52%);
    mask-image: linear-gradient(136.5deg, black 44%, rgba(0,0,0,0.75) 46%, rgba(0,0,0,0.25) 50%, transparent 52%);
    opacity: 0.55;
    overflow: hidden;
  }
  .mobile-landing-btn .ml-team-split .ml-team-half-1 {
    -webkit-mask-image: linear-gradient(136.5deg, transparent 48%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.75) 54%, black 56%);
    mask-image: linear-gradient(136.5deg, transparent 48%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.75) 54%, black 56%);
    opacity: 0.55;
    overflow: hidden;
  }
  .mobile-landing-btn .ml-team-split .ml-team-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
  }

  /* Combo builder button auspex background on landing */
  .mobile-landing-btn .ml-auspex-bg {
    position: absolute;
    inset: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.7;
  }
  /* CRT: same seam fix as the desktop .auspex-bg (the image's transparent left
     third vs its filtered navy edge) */
  html.crt .mobile-landing-btn .ml-auspex-bg { background-color: rgb(20, 20, 30); }

  /* ── Mobile Bottom Sheet (attack table) ─────────────────────── */
  #mobile-sheet-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--surface2);
    border-top: 2px solid var(--border);
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    min-height: 44px;
    position: relative;
  }
  #mobile-sheet-handle:active { background: var(--surface3); }
  #mobile-sheet-arrow {
    transition: transform 0.2s;
    color: var(--text);
  }
  #mobile-sheet-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text);
  }
  /* Swap button in sheet handle */
  #mobile-sheet-swap-btn {
    display: none;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-dim);
    cursor: pointer;
    padding: 8px 10px;
    border-radius: var(--radius);
    align-items: center;
    justify-content: center;
    margin-left: auto;
    position: absolute;
    right: 12px;
    min-width: 44px;
    min-height: 44px;
    z-index: 5;
  }
  .damage-section.mobile-sheet-expanded #mobile-sheet-swap-btn { display: flex; }
  #mobile-sheet-swap-btn svg { width: 22px; height: 22px; }
  #mobile-sheet-swap-btn:active { background: var(--surface3); color: var(--text); }
  #mobile-sheet-swap-btn.swap-active { color: var(--gold); border-color: var(--gold-dim); }

  /* Mobile modifiers panel */
  #mobile-modifiers-body.mobile-mods-hidden { display: none !important; }
  #attack-section-body.mobile-atk-hidden { display: none !important; }
  #mobile-modifiers-body {
    padding: 12px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }
  #mobile-modifier-content .modifier-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
  }
  #mobile-modifier-content .modifier-label {
    font-size: 0.82rem;
    color: var(--text);
  }
  #mobile-modifier-content .group-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gold);
    margin-bottom: 8px;
  }
  /* Bottom sheet collapsed state */
  .damage-section.mobile-sheet-collapsed #attack-section-body,
  .damage-section.mobile-sheet-collapsed #combo-section-body,
  .damage-section.mobile-sheet-collapsed #mobile-modifiers-body { display: none; }
  /* Arrow points down when expanded (default SVG), rotates up when collapsed */
  .damage-section.mobile-sheet-collapsed #mobile-sheet-arrow { transform: rotate(180deg); }

  /* Bottom sheet positioning: fixed at bottom — always visible on mobile */
  .damage-section {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 55;
    max-height: 60vh;
    background: var(--surface);
    transition: max-height 0.2s;
  }
  .damage-section.mobile-sheet-collapsed {
    max-height: 70px;
    background: transparent;
  }
  /* Base bar across the bottom */
  .damage-section.mobile-sheet-collapsed::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 26px;
    background: var(--surface2);
    border-top: 2px solid var(--border);
    z-index: 0;
  }
  /* Tab shape: handle extends above the base bar */
  .damage-section.mobile-sheet-collapsed #mobile-sheet-handle {
    position: relative;
    border-radius: 16px 16px 0 0;
    border: 2px solid var(--border);
    border-bottom: none;
    margin: 0 auto;
    width: 60%;
    min-height: 44px;
    padding: 8px 16px;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
    z-index: 1;
  }
  /* Curved corners connecting tab to base bar */
  .damage-section.mobile-sheet-collapsed #mobile-sheet-handle::before,
  .damage-section.mobile-sheet-collapsed #mobile-sheet-handle::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 24px;
    height: 24px;
    background: transparent;
    z-index: 2;
  }
  .damage-section.mobile-sheet-collapsed #mobile-sheet-handle::before {
    left: -24px;
    border-radius: 0 0 12px 0;
    box-shadow: 8px 0 0 0 var(--surface2);
  }
  .damage-section.mobile-sheet-collapsed #mobile-sheet-handle::after {
    right: -24px;
    border-radius: 0 0 0 12px;
    box-shadow: -8px 0 0 0 var(--surface2);
  }
  .damage-section.mobile-sheet-expanded {
    height: 60vh;
    max-height: 60vh;
    background: var(--surface);
  }
  .damage-section.mobile-sheet-expanded #attack-section-body,
  .damage-section.mobile-sheet-expanded #combo-section-body,
  .damage-section.mobile-sheet-expanded #mobile-modifiers-body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
  .damage-section.mobile-sheet-expanded #table-wrapper { overflow-y: auto; flex: 1; min-height: 0; }
  .damage-section.mobile-sheet-expanded #mobile-enemy-selector { display: flex; }

  /* Hide build name input and combo group name on mobile */
  .combo-group-name { display: none; }
  .header-build-name { display: none; }

  /* Add padding so content isn't hidden behind bottom sheet */
  .main-body { padding-bottom: 50px; }
  body.mobile-on-landing {
    height: 100dvh;
    overflow: hidden;
  }
  body.mobile-on-landing #mobile-landing {
    padding-bottom: 80px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }

  /* Override old mobile table toggle styles — bottom sheet replaces them */
  .damage-section.mobile-table-visible { display: flex; }
  /* Same both-axes trap as the `body` rule above, and it outranks it (0,1,1),
     so it has to be fixed here too or the bottom sheet re-opens the bug. */
  body.mobile-table-active { height: auto; overflow-y: visible; overflow-x: clip; }
  body.mobile-table-active .app-layout { height: auto; min-height: auto; }
  body.mobile-table-active .main-body { flex: none; min-height: 0; overflow: visible; }

  /* Ensure mobile-on-landing still shows the bottom sheet handle area */
  body.mobile-on-landing .app-layout { min-height: 0; flex: none; }

  /* ── Mobile enemy selector in bottom sheet ────────────────── */
  #mobile-enemy-selector {
    display: none;
    padding: 6px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    align-items: center;
    gap: 8px;
  }
  /* enemy selector visibility now handled by .mobile-sheet-expanded rule above */
  #mobile-enemy-selector label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-dim);
    white-space: nowrap;
  }
  #mobile-enemy-select {
    flex: 1;
    padding: 6px 28px 6px 8px;
    background: var(--surface2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center / 10px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.78rem;
    font-family: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  /* ── Combo builder: hide tier columns on mobile when enemies selected ── */
  .combo-table.has-enemy-cols .combo-col-tier:not(.combo-col-enemy) { display: none; }
  .combo-table.has-enemy-cols thead .combo-col-tier:not(.combo-col-enemy) { display: none; }

  /* Combo list inside tab-combo on mobile (moved from bottom sheet) */
  #tab-combo #combo-section-body {
    display: block;
    /* No inner vertical scroll and no tall bottom padding. The 60px reserve
       was dead space under the list, and combined with the .combo-list cap
       below it left a gap above the Attack Table handle while the list itself
       was squeezed. */
    overflow-y: visible;
    padding: 0 4px 8px;
  }
  #tab-combo #combo-section-body .combo-list-section { padding: 0; }

  /* .combo-list is `max-height: 40vh; overflow-y: auto` for desktop, which on a
     660px phone is a 264px box holding ~528px of combo. That is an independent
     scroll region inside the page — you had to scroll within it to reach the
     Total row, which is why the total looked missing — and it left the rest of
     the screen blank. Let the list flow and let the PAGE scroll instead. */
  #tab-combo .combo-list {
    max-height: none;
    overflow-y: visible;
    /* The table is table-layout: fixed at width 100%, so its columns always fit
       the screen; the only thing that ever crossed the edge was ~4px of row
       decoration, which was enough to make the whole list drag sideways. */
    overflow-x: clip;
  }
  #tab-combo .combo-chart-wrap {
    min-height: 200px;
    max-height: 250px;
    /* Pin the chart under the header bar. --mobile-header-h is set alongside
       #mobile-header-bar's min-height so the two cannot drift apart. */
    position: sticky;
    top: var(--mobile-header-h, 64px);
    z-index: 40;
    background: var(--bg);
  }

  /* These two were written to stick inside the .combo-list scroller, which no
     longer exists on mobile. With body no longer shadowing the viewport they
     would wake up and pin against the PAGE instead — landing behind the header
     bar (z-index 3 and 2 against its 60) and detaching from their own rows, and
     colliding with the pinned chart. The list should flow as one block. */
  #tab-combo .combo-group-header,
  #tab-combo .combo-table th { position: static; }
  #tab-combo .combo-breakpoints { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; }

  /* Hide old sidebar on mobile — replaced by landing page */
  .sidebar { display: none; }
  body:not(.mobile-on-landing) .sidebar { display: none; }

  /* Show tab content when drilling into a config tab */
  body:not(.mobile-on-landing) .tab-content { display: block; }

  /* Guard against tap-through when navigating between mobile pages */
  body.mobile-nav-guard .tab-content,
  body.mobile-nav-guard #mobile-landing { pointer-events: none; }
}

/* ── Responsive: Phone (≤480px) ──────────────────────────────────────────── */
@media (max-width: 480px) {

  /* -- Header: further compact -- */
  header h1 { font-size: 1.1rem; }
  #header-sub { font-size: 0.65rem; }
  .patch-mobile-line1, .patch-mobile-line2 { font-size: 0.56rem; }
  #support-btn, #feedback-btn { font-size: 0.58rem; padding: 4px 6px; }

  /* -- Sidebar: tighter -- */
  .sidebar { padding: 4px 6px; gap: 2px; }
  .sidebar-btn { padding: 6px 2px; }
  .sidebar-btn-label { font-size: 0.6rem; letter-spacing: 0.04em; }
  .clear-all-btn { font-size: 0.58rem; padding: 3px 6px; }

  /* -- Tab content -- */
  .tab-content { padding: 8px 8px 12px; }
  .damage-section { padding: 0 8px 12px; }

  /* -- Weapon perk tree: further shrink -- */
  .perk-btn { width: 68px; min-height: 54px; font-size: 0.6rem; padding: 3px 4px; }
  .chain-connector { width: 22px; }
  /* Recalculate: C/2 - W/2 = 11 - 34 = -23px */
  .conn-special { left: -23px; width: 68px; }
  .conn-special-above > .conn-special-line { left: -11px; width: 11px; }
  .conn-special-below > .conn-special-line { left: -11px; width: 11px; }
  .perk-chain.has-above-specials { padding-top: 60px; }
  .perk-chain.has-below-specials { padding-bottom: 60px; }

  /* -- Class perk grid: compact -- */
  #class-perk-tree .perk-btn.icon-perk,
  .tm-perk-tree .perk-btn.icon-perk,
  #prestige-perk-tree .perk-btn.icon-perk { width: 64px; height: 58px; min-height: 58px; padding: 6px; }
  #class-perk-tree .perk-btn.icon-perk img,
  .tm-perk-tree .perk-btn.icon-perk img,
  #prestige-perk-tree .perk-btn.icon-perk img { width: 42px; height: 42px; }
  .class-perk-group { gap: 4px; padding: 0 4px; }

  /* -- Prestige section: stack below class perks -- */
  #class-perk-scroll { flex-direction: column; overflow-x: auto; }
  #prestige-section {
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    margin-left: 0;
    padding-top: 12px;
    margin-top: 12px;
  }

  /* -- Damage table: extra compact -- */
  #attack-table th, #attack-table td { padding: 4px 6px; font-size: 0.78rem; }

  /* -- Help modal: full screen -- */
  .help-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; overflow: hidden; }
  .servo-skull-banner { height: 90px; min-height: 90px; }
  .servo-skull-float { height: 90px; margin-top: 10px; }
  .servo-skull-img { max-height: 110px; }
  .servo-skull-eye { display: none; }
  .help-tab-btn { font-size: 0.85rem; padding: 6px 6px; }
  .help-video { max-height: 55vh; width: auto; max-width: 100%; margin: 0 auto; }

  /* -- Data Tables modal: full screen on phone -- */
  .help-dialog.data-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .data-tab-btn { font-size: 0.65rem; padding: 6px 6px; }
  .data-table { font-size: 0.75rem; }
  .data-table th, .data-table td { padding: 4px 4px; }

  /* -- Changelog modal: full screen on phone -- */
  #changelog-modal .help-dialog { width: 100vw; max-height: 100dvh; border-radius: 0; }
  #changelog-modal .help-section li { font-size: 0.72rem; }

  /* -- Combo: tighter on phone -- */
  .config-tab-btn { font-size: 0.65rem; padding: 6px 2px; }
  .config-item-label { font-size: 0.85rem; }
  .bp-card { padding: 6px 8px; font-size: 0.75rem; }

  /* -- Teammate config -- */
  .teammate-tab-body > .config-group { max-width: 100%; }

  /* -- Teammate perk tree: scroll only the tree, not the whole page -- */
  .tm-perk-tree-section { overflow-x: auto; }
  .tm-perk-tree { overflow-x: visible; }
}

/* ── Banner / Toast Notifications ──────────────────────────────────────────── */
#banner-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9990;
  pointer-events: none;
}

.banner-toast {
  position: relative;
  width: 400px; /* default medium, overridden by JS */
  max-width: calc(100vw - 48px);
  background: var(--surface2);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg);
  padding: 16px 40px 16px 16px;
  color: #fff;
  font-size: 13px;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.banner-toast-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Center-modal variant: scale-in instead of slide-from-right */
.banner-toast.banner-toast-center {
  transform: scale(0.95);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.banner-toast.banner-toast-center.banner-toast-visible {
  transform: scale(1);
}
.banner-toast.banner-toast-center.banner-toast-hiding {
  transform: scale(0.95);
}

.banner-toast-hiding {
  opacity: 0;
  transform: translateX(100%);
}

.banner-toast-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  opacity: 0.6;
}
.banner-toast-close:hover { opacity: 1; }

.banner-toast-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 6px;
}

.banner-toast-message {
  color: #fff;
  line-height: 1.5;
  margin-bottom: 10px;
}

.banner-toast-cta {
  display: inline-block;
  padding: 6px 14px;
  background: var(--gold);
  color: #0b0b12;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.banner-toast-cta:hover { background: #d4b65a; }

/* Banner bar (full-width strip below header) */
.banner-bar {
  width: 100%;
  background: var(--surface2);
  border-bottom: 1px solid var(--gold-dim);
  padding: 10px 48px 10px 16px;
  color: #fff;
  font-size: 13px;
  position: sticky;
  top: 0;
  z-index: 101;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease;
}
.banner-bar-visible {
  opacity: 1;
  max-height: 80px;
  padding: 10px 48px 10px 16px;
}
.banner-bar-hiding {
  opacity: 0;
  max-height: 0;
  padding: 0 48px 0 16px;
}
.banner-bar-text { color: #fff; }
.banner-bar-text strong { color: var(--gold); }
.banner-bar-cta {
  display: inline-block;
  margin-left: 12px;
  padding: 3px 10px;
  background: var(--gold);
  color: #0b0b12;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius);
  text-decoration: none;
}
.banner-bar-cta:hover { background: #d4b65a; }
.banner-bar-close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.6;
  padding: 4px;
}
.banner-bar-close:hover { opacity: 1; }

/* Mobile: toasts at top with some breathing room */
@media (max-width: 768px) {
  #banner-toast-container {
    top: 12px !important;
    bottom: auto !important;
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
    width: auto;
  }
  .banner-toast {
    width: 100% !important;
    max-width: 100%;
    border-radius: var(--radius);
    padding: 12px 36px 12px 12px;
    font-size: 12px;
    transform: translateY(-120%);
  }
  .banner-toast-visible {
    transform: translateY(0);
  }
  .banner-toast-hiding {
    transform: translateY(-120%);
  }
  .banner-toast-title { font-size: 24px !important; margin-bottom: 10px; }
  .banner-toast-message { font-size: 20px !important; margin-bottom: 8px; line-height: 1.5; }
  .banner-toast-cta { font-size: 16px; padding: 6px 14px; }
  .banner-toast-close { font-size: 28px; top: 8px; right: 10px; padding: 8px; }
}

/* ============================================================================
   Mobile horizontal-overflow fix
   The page must never be the sideways scroller on a phone: body's overflow
   propagates to the viewport, and a panned viewport unpins the sticky
   #mobile-header-bar from the fixed bottom sheet.
   ========================================================================== */

@media (max-width: 768px) {
  /* A desktop width that leaked into mobile: 420px inside a 390px phone put the
     document at 428px, which panned the page 44px and unpinned the sticky
     #mobile-header-bar. */
  #class-panel-body .config-group { width: 100%; max-width: 420px; }

  /* Belt and braces: the page can no longer widen, so the next stray element is
     a clipped edge instead of a shipped bug. clip (not hidden) keeps the
     viewport from becoming a scroll container, which sticky chrome relies on.
     Must come AFTER the rule above: clamping first would hide the class panel's
     select rather than fix it. */
  /* overflow-y stays VISIBLE here, deliberately. Viewport overflow propagates
     from body only while the root element's overflow is visible on both axes,
     and `html { overflow-x: clip }` disqualifies it. So an `overflow-y: auto`
     on body is NOT propagated: body keeps it and becomes a real scroll
     container — but with `height: auto` its scrollport is exactly as tall as
     its content, so it has zero scroll range. position: sticky then resolves
     against body, which never scrolls, and every sticky element on mobile
     silently stops pinning. That is what unpinned #mobile-header-bar.
     clip + visible is a legal pair that creates no scroll container on either
     axis, so the horizontal-pan protection is untouched. */
  html { overflow-x: clip; }
  body { overflow-y: visible; overflow-x: clip; }
  body.mobile-table-active { overflow-y: visible; overflow-x: clip; }

  /* ── Weapon config rows ────────────────────────────────────────────────
     On mobile .config-group is a row: [label][control]. Any control sized to
     its own content rather than the leftover space overflows, because the
     label has already eaten part of the row. */

  /* #sidearm-variant-select is width: max-content / min-width: 100% for the
     desktop flyout. On a 390px phone that resolved to the full group width and
     then started AFTER the 67px label, so it ran 51px off the right edge. */
  #variant-select,
  #sidearm-variant-select,
  #primary-variant-select {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
  }
  #variant-select .custom-select-list,
  #sidearm-variant-select .custom-select-list,
  #primary-variant-select .custom-select-list {
    width: 100%;
    min-width: 0;
  }
  /* The variant button is what the user actually taps; let it use the row and
     keep its label on one line instead of wrapping into a tall square. */
  #variant-select .custom-select-btn,
  #sidearm-variant-select .custom-select-btn,
  #primary-variant-select .custom-select-btn {
    width: 100%;
    min-width: 0;
    text-align: left;
  }
  #variant-select-label,
  #sidearm-variant-select-label,
  #primary-variant-select-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* These <select>s share min-width: 240px with #class-select (line ~1434).
     240px + the label overflowed once the label got long. */
  #weapon-select,
  #sidearm-weapon-select,
  #primary-weapon-select {
    min-width: 0;
    width: 100%;
    flex: 1 1 auto;
  }

  /* ── Team toolbar ──────────────────────────────────────────────────────
     Was one flex row: [Clear Team][class dropdown][Clear Class Perks], which
     ran the last button off the right edge. display: contents lifts the
     controls out of their wrapper so the whole toolbar can be one grid:
     Clear Team sits beside the two teammate cards, and row 2 gives the
     dropdown all the leftover width. The inactive .tm-perk-controls keeps the
     inline display:none that app.js sets, so it stays hidden. */
  .tm-perk-controls { display: contents; }
  .tm-toolbar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
  }
  .tm-toolbar .tm-switcher { grid-column: 1; grid-row: 1; }
  .tm-toolbar .clear-tm-btn {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .tm-toolbar .tm-config-group {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
  }
  .tm-toolbar .clear-tm-perks-btn {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    margin: 0;
  }
  .tm-config-group .custom-select,
  .tm-config-group .custom-select-btn {
    width: 100%;
    min-width: 0;
  }
}

/* ── CRT mode: green phosphor monochrome monitor ────────────────────────────
   bindCrtMode() in app.js cycles Off / High (html[data-crt="high"], all
   green) / Low (html[data-crt="low"]: colour-coded elements keep their hue).
   #crt-phosphor (SVG filter in index.html) maps luminance to P1 green.
   Safari skips a filter on canvases, sticky/fixed bars and scroll areas when it
   sits on an ancestor, so app.js marks the largest blocks holding none of those
   with [data-crt-f] and filters only them (plus each canvas in High).
   Unfiltered containers use the filter's output colours directly (html.crt
   body vars), filtered blocks use the greyscale levels that the filter turns
   into those same greens, and Low's kept elements ([data-crt-k]) get the
   original palette back. */
/* Fixed width, anchored to the title's centre (which never moves, while the
   title's width changes with the CRT fonts), so the button never shifts as
   its label changes between CRT: OFF / LOW / HIGH. */
#crt-btn {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  border: 1px solid var(--text-dim);
  border-radius: 4px;
  width: 70px;
  padding: 6px 0;
  text-align: center;
  position: absolute;
  /* 8px left of the widest (Off) title, which is 210px wide; kept tight so
     the button clears Reset down to a 1366px-wide window */
  right: calc(50% + 113px);
  pointer-events: auto;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.75;
  transition: opacity 0.15s;
}
/* Members: Comparisons sits just left of the CRT button */
body.em .comparisons-wrapper { right: calc(50% + 191px); }
#crt-btn:hover { opacity: 1; }
/* High: green (it is filtered); Low: white (kept out of the filter) */
html.crt #crt-btn { opacity: 1; border-radius: 0; color: #fff; border-color: #fff; }

html.crt { background: #000; }
html.crt body {
  --bg:          #000000;
  --surface:     #030d06;
  --surface2:    #061a0a;
  --surface3:    #09250f;
  --border:      #11431b;
  --gold:        #41ff68;
  --gold-dim:    #2aa644;
  --gold-glow:   rgba(65, 255, 104, 0.16);
  --text:        #3be65e;
  --text-dim:    #30be4e;
  --text-muted:  #1f7b32;
  --red:         #3ceb60;
  --green:       #34cc54;
  --blue:        #37d658;
  --blue-dim:    #1b692b;
  --blue-glow:   rgba(65, 255, 104, 0.2);
  --perk-sel:    #0f3b18;
  --perk-lock:   #020904;
  --lavender:    #39df5b;
  --lavender-glow: rgba(65, 255, 104, 0.22);
  font-family: 'Share Tech Mono', ui-monospace, Menlo, Consolas, monospace;
  text-shadow: 0 0 3px rgba(65, 255, 104, 0.5), 0 0 9px rgba(65, 255, 104, 0.16);
}
html.crt [data-crt-f] {
  /* !important: beats the app's own element filters (greyscale locked icons,
     drop-shadow glows), which the phosphor mapping replaces anyway */
  filter: url(#crt-phosphor) !important;
  --bg:          #000000;
  --surface:     #080808;
  --surface2:    #111111;
  --surface3:    #1a1a1a;
  --border:      #353535;
  --gold:        #ffffff;
  --gold-dim:    #9a9a9a;
  --gold-glow:   rgba(255, 255, 255, 0.16);
  --text:        #e2e2e2;
  --text-dim:    #b4b4b4;
  --text-muted:  #6c6c6c;
  --red:         #e8e8e8;
  --green:       #c4c4c4;
  --blue:        #d0d0d0;
  --blue-dim:    #5a5a5a;
  --blue-glow:   rgba(255, 255, 255, 0.2);
  --perk-sel:    #2e2e2e;
  --perk-lock:   #050505;
  --lavender:    #dadada;
  --lavender-glow: rgba(255, 255, 255, 0.22);
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.5), 0 0 9px rgba(255, 255, 255, 0.16);
}
/* Low's kept elements get the original accent colours back; neutral surfaces,
   borders and body text stay green around them */
html.crt [data-crt-k] {
  --gold:        #c8a84b;
  --gold-dim:    #8a7030;
  --gold-glow:   rgba(200, 168, 75, 0.18);
  --red:         #c0392b;
  --green:       #27ae60;
  --blue:        #4a90d9;
  --blue-dim:    #2a5090;
  --blue-glow:   rgba(74, 144, 217, 0.25);
  --perk-sel:    #122a45;
  --lavender:    #b794f6;
  --lavender-glow: rgba(183, 148, 246, 0.30);
  text-shadow: none;
}
html.crt input, html.crt select, html.crt button, html.crt textarea { font-family: inherit; }
html.crt header h1 {
  font-family: 'VT323', 'Share Tech Mono', monospace;
  font-size: 2.1rem;
  font-weight: 400;
  color: #fff;
}
html.crt header h1::before { content: '> '; }
html.crt #mobile-header-title { font-family: 'VT323', 'Share Tech Mono', monospace; font-size: 1.5rem; text-transform: uppercase; }
html.crt header h1::after { content: '\2588'; margin-left: 3px; animation: crt-blink 1.1s steps(1) infinite; }
@keyframes crt-blink { 50% { opacity: 0; } }
/* Scanlines + tube vignette (static, so the filters never re-render per frame) */
html.crt body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483647;
  background:
    radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, 0.5) 100%),
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.26) 3px, rgba(0, 0, 0, 0) 4px);
}
/* Barrier elements stay unfiltered, so their hard-coded colours get the
   filter's green equivalents directly */
html.crt :is(.damage-section, .config-group):not([data-crt-f]),
html.crt .sidebar :is(#modifier-group, #combo-modifier-group):not([data-crt-f]),
html.crt .sidebar-btn.active:not([data-crt-f]) { border-color: #1b6b2c; }
html.crt header:not([data-crt-f]) { border-bottom-color: #1b6b2c; }
html.crt .main-body:not([data-crt-f]) { border-left-color: #1b6b2c; }
html.crt .config-list-item.active:not([data-crt-f]) { background: rgba(65, 255, 104, 0.06); }
html.crt .config-list-item:not([data-crt-f]) { border-bottom-color: rgba(65, 255, 104, 0.05); }
html.crt #tooltip:not([data-crt-f]) { background: #0a2610; }
html[data-crt="high"] #tooltip.tooltip-positive { border-color: #29a042; }
html[data-crt="high"] #tooltip.tooltip-negative { border-color: #207c33; }
/* Low: perk impact text is white so it stands out from the green UI (negative
   impacts keep their red span). */
html[data-crt="low"] .tooltip-impact:not([data-crt-f], [data-crt-f] *) { color: #fff; }
html.crt .help-dialog:not([data-crt-f]) { border-color: #41ff68; }
html.crt #attack-table th:not([data-crt-f]) { color: #41ff68; }
/* Elements left unfiltered (Low: they hold kept content; either mode: a
   barrier or own layer) paint their own hard-coded colours directly, so those
   take the filter's greens. U = "really unfiltered": neither marked nor inside a
   filtered block, where a pre-greened colour would be filtered a second time. */
/* Sidebar tabs: border, fill and edge-blend gradients (the gradients read their
   navy from --sb-navy*, with the Off-mode values as fallbacks) */
html.crt .sidebar-btn:not([data-crt-f], [data-crt-f] *) {
  border-color: #134a1e;        /* #3a3a54 */
  --sb-navy:    8, 30, 12;      /* rgb(20,20,30) */
  --sb-navy-dk: 5, 18, 8;       /* rgb(11,11,18) */
  --sb-navy-lt: 7, 29, 12;      /* rgb(19,19,31) */
}
html.crt #tab-team:not([data-crt-f], [data-crt-f] *)::after {
  background: linear-gradient(to right, transparent, rgba(5, 18, 8, var(--tm-rgrad-o, 0.8)));
}
/* Combo Builder: the sticky header cells and group headers are barriers */
html.crt .combo-table th:not(.combo-col-enemy):not([data-crt-f], [data-crt-f] *) { color: #41ff68; }
html.crt .combo-group:not(.combo-active) > :is(.combo-group-header, .combo-table, .combo-empty-state):not([data-crt-f], [data-crt-f] *) {
  --combo-border-color: rgba(65, 255, 104, 0.6);
}
html.crt .combo-insert-before:not([data-crt-f], [data-crt-f] *)::before,
html.crt .combo-insert-after:not([data-crt-f], [data-crt-f] *)::after { background: #41ff68; }
html.crt .combo-drop-target:not([data-crt-f], [data-crt-f] *) { outline-color: #41ff68; }
html[data-crt="high"] [data-faction="tyranid"] .toggle.on .toggle-track:not([data-crt-f], [data-crt-f] *) {
  background: rgba(32, 125, 51, 0.3);
  border-color: #207d33;
}
/* Zebra stripes on cells / rows around kept content (and the mobile table's
   sticky first column) */
html.crt #attack-table tbody tr:nth-child(even) td:not([data-crt-f], [data-crt-f] *) { background: rgba(65, 255, 104, 0.02); }
html.crt .combo-entry.combo-stripe-even:not([data-crt-f], [data-crt-f] *) { background: rgba(65, 255, 104, 0.03); }
html.crt :is(.combo-entry-linked, .combo-entry.combo-has-linked-next) td:not([data-crt-f], [data-crt-f] *) { border-bottom-color: rgba(65, 255, 104, 0.03); }
/* Text sitting directly beside kept content (an info icon, blue armour
   segments) can't be filtered, so its hard-coded white takes the filter's green */
html.crt .data-table td:not([data-crt-f], [data-crt-f] *) { color: #41ff68; }
html.crt .surv-eh-name:not([data-crt-f], [data-crt-f] *) { color: #41ff68; }
/* Low: the Health chart tooltip holds the kept series swatches */
html.crt .surv-chart-tip:not([data-crt-f], [data-crt-f] *) { background: rgba(7, 26, 11, 0.97); border-color: rgba(65, 255, 104, 0.2); }
/* Collapsed table borders are painted by the table, which is never filtered
   (it holds sticky headers), even when the cells are: they always need the
   greens. (Mobile's attack table uses separate borders, painted by the cells.) */
@media (min-width: 769px) {
  html.crt #attack-table :is(th, td) { border-bottom-color: #11431b; }
}
html.crt .data-table td { border-bottom-color: rgba(65, 255, 104, 0.04); }
html[data-crt="high"] .data-table .artificer-sep td { border-top-color: #248c39; }
html[data-crt="high"] .data-table .relic-sep td { border-top-color: #26973e; }
html[data-crt="high"] .data-table .heroic-sep td { border-top-color: #3ceb60; }
/* Low keeps gear-tier colours; var(--red) would resolve to the filtered grey */
html[data-crt="low"] .data-table .heroic-sep td { border-top-color: #c0392b; }
/* Members: the Comparisons "Load Saved Comparison" row holds a scroll area */
html.crt .cmp-dropdown-item:not([data-crt-f], [data-crt-f] *) { color: #41ff68; }
html.crt .cmp-dropdown-item + .cmp-dropdown-item:not([data-crt-f], [data-crt-f] *) { border-top-color: rgba(65, 255, 104, 0.06); }
/* Modifier / enemy rows hold an own-layer toggle: hover tint, long-press glow */
html.crt .config-list-item:not([data-crt-f], [data-crt-f] *):hover { background: rgba(65, 255, 104, 0.04); }
@media (max-width: 768px) {
  html.crt :is(.modifier-row, .config-list-item).touch-tooltip-active:not([data-crt-f], [data-crt-f] *) { box-shadow: 0 0 8px rgba(47, 184, 76, 0.35); }
}
/* Keyboard focus ring (Chrome also focuses scroll areas, which are barriers);
   kept elements keep their Off-mode ring */
html.crt :not([data-crt-f], [data-crt-k], [data-crt-f] *, [data-crt-k] *):focus-visible { outline-color: #196228; }
/* Low: perk buttons that hold a kept badge can't be filtered as a whole, so
   their hard-coded border colours get the filter's green equivalents */
html[data-crt="low"] .perk-btn:not([data-crt-f]):not([data-crt-k]) { border-color: #155121; }
html[data-crt="low"] .perk-btn.available:not([data-crt-f]):not([data-crt-k]) { border-color: rgba(65, 255, 104, 0.75); }
html[data-crt="low"] .perk-btn.available:not([data-crt-f]):not([data-crt-k]):hover { border-color: var(--gold); }
html[data-crt="low"] :is(#class-perk-tree, .tm-perk-tree, #prestige-perk-tree) .perk-btn.icon-perk:not([data-crt-f]):not([data-crt-k])::before { background: #155121; }
html[data-crt="low"] :is(#class-perk-tree, .tm-perk-tree, #prestige-perk-tree) .perk-btn.icon-perk.available:not([data-crt-f]):not([data-crt-k])::before { background: rgba(65, 255, 104, 0.75); }
html[data-crt="low"] :is(#class-perk-tree, .tm-perk-tree, #prestige-perk-tree) .perk-btn.icon-perk.available:not([data-crt-f]):not([data-crt-k]):hover::before { background: var(--gold); }
/* ...and their hover and long-press glows (hover only where hover exists, so
   the mobile no-sticky-hover rules still win) */
@media (hover: hover) {
  html[data-crt="low"] .perk-btn.available:not([data-crt-f], [data-crt-k], [data-crt-f] *):hover { box-shadow: 0 0 8px rgba(47, 184, 76, 0.35); }
  html[data-crt="low"] :is(#class-perk-tree, .tm-perk-tree, #prestige-perk-tree) .perk-btn.icon-perk.available:not([data-crt-f], [data-crt-k], [data-crt-f] *):hover::before {
    filter: drop-shadow(0 0 6px rgba(47, 184, 76, 0.4));
  }
}
html[data-crt="low"] .perk-btn.touch-tooltip-active:not([data-crt-f], [data-crt-k], [data-crt-f] *) { box-shadow: 0 0 8px rgba(47, 184, 76, 0.35); }
html[data-crt="low"] :is(#class-perk-tree, .tm-perk-tree, #prestige-perk-tree) .perk-btn.icon-perk.touch-tooltip-active:not([data-crt-f], [data-crt-k], [data-crt-f] *)::before {
  filter: drop-shadow(0 0 6px rgba(47, 184, 76, 0.4));
}
/* Low: selected perks are a bright green outline and green fill with white text */
html[data-crt="low"] .perk-btn.selected:not([data-crt-f]):not([data-crt-k]) {
  border-color: #41ff68;
  background: #17602a;
  color: #fff;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.45);
  box-shadow: none;
}
/* Hex (icon) perks draw their shape with ::before/::after; the button box
   itself stays transparent, or the fill shows as a square */
html[data-crt="low"] :is(#class-perk-tree, .tm-perk-tree, #prestige-perk-tree) .perk-btn.icon-perk.selected:not([data-crt-f]):not([data-crt-k]) {
  background: transparent;
  border-color: transparent;
}
html[data-crt="low"] :is(#class-perk-tree, .tm-perk-tree, #prestige-perk-tree) .perk-btn.icon-perk.selected:not([data-crt-f]):not([data-crt-k])::before {
  background: #41ff68;
  filter: none;
}
html[data-crt="low"] :is(#class-perk-tree, .tm-perk-tree, #prestige-perk-tree) .perk-btn.icon-perk.selected:not([data-crt-f]):not([data-crt-k])::after {
  background: #17602a;
}
/* Low: selected icon perks show a white icon, like the white text on
   selected weapon perks (replaces the phosphor filter on that image) */
html[data-crt="low"] .perk-btn.icon-perk.selected:not([data-crt-f]):not([data-crt-k]) img[data-crt-f] {
  filter: grayscale(1) brightness(2.2) !important;
}
/* Low: the header buttons keep their full Off-mode look (the kept-element
   rule above only restores accent colours; #help-btn also uses the text greys) */
html[data-crt="low"] :is(#share-btn, #reset-btn, #mobile-reset-btn, #comparisons-btn, #wiki-btn, #data-btn, #help-btn, #support-btn, #feedback-btn)[data-crt-k] {
  --surface:     #13131f;
  --surface2:    #1c1c2e;
  --surface3:    #252538;
  --border:      #2e2e48;
  --text:        #d4d4e8;
  --text-dim:    #a0a0be;
  --text-muted:  #4a4a68;
}
/* Low: the Incognito title is white (!important beats the members module's
   inline green) */
html[data-crt="low"] #header-title h1 {
  color: #fff !important;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.5), 0 0 9px rgba(255, 255, 255, 0.16);
}
/* Low: badges on selected perks get a dark outline so their colours stay
   readable against the green selected fill */
html[data-crt="low"] .perk-btn.selected:not([data-crt-f]):not([data-crt-k]) :is(.perk-dmg-tag, .perk-surv-tag, .perk-ammo-tag) {
  text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 4px #000, 0 1px 1px #000;
}
/* Low: the CRT fonts have no ☆, and the monospace fallback draws a small
   hairline star, so the stratagem stars keep the Off-mode font */
html[data-crt="low"] .config-item-wired { font-family: 'Segoe UI', system-ui, sans-serif; }
/* Low: softer scanlines + vignette */
html[data-crt="low"] body::after {
  background:
    radial-gradient(ellipse at center, transparent 65%, rgba(0, 0, 0, 0.3) 100%),
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.11) 3px, rgba(0, 0, 0, 0) 4px);
}
html.crt ::selection { background: #fff; color: #000; text-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  html.crt header h1::after { animation: none; }
}