/* ── 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;
  --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: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* 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% + 40px);
}
#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;
  margin-right: auto;
  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;
}

#feedback-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;
  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(--blue);
  color: #fff;
}

#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;
}

#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.5;
}
#header-patch:hover { color: var(--text); }
.patch-line1, .patch-line2 { display: block; }
.changelog-hint { color: var(--accent); margin-left: 4px; 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;
}

/* ── Paid-Mode Border Tint (dev only — css class toggled by dev-tools.js) ── */
.paid-mode header                    { border-bottom-color: #33ff33; }
.paid-mode .sidebar-btn.active       { border-color: #33ff33; border-right-color: transparent; }
.paid-mode .main-body                { border-left-color: #33ff33; }
.paid-mode .damage-section           { border-top-color: #33ff33; }
.paid-mode .sidebar #modifier-group  { border-top-color: #33ff33; }
.paid-mode .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(11,11,18,1) 0%,
      rgba(11,11,18,1) 25%,
      rgba(11,11,18,0) 45%,
      rgba(11,11,18,0) 85%,
      rgba(11,11,18,0.7) 93%,
      rgba(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: #14141e;
}
.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(20,20,30,1) 0%,
      rgba(20,20,30,1) 25%,
      rgba(20,20,30,0) 45%,
      rgba(20,20,30,0) 85%,
      rgba(20,20,30,0.7) 93%,
      rgba(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(11,11,18,1) 0%,
      rgba(11,11,18,1) var(--wact-btnLS, 25%),
      rgba(11,11,18,0) var(--wact-btnLF, 45%),
      rgba(11,11,18,0) var(--wact-btnRS, 85%),
      rgba(11,11,18,0.7) var(--wact-btnRM, 93%),
      rgba(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(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(20,20,30, var(--inact-vo, 0.36)) 100%);
  z-index: 3;
  pointer-events: none;
}

/* ── Difficulty tab background ────────────────────────────────────────────── */
.sidebar-btn.has-diff-bg {
  background: #14141e;
}
.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(20,20,30,1) 0%,
      rgba(20,20,30,1) 25%,
      rgba(20,20,30,0) 45%,
      rgba(20,20,30,0) 85%,
      rgba(20,20,30,0.7) 93%,
      rgba(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(11,11,18,1) 0%,
      rgba(11,11,18,1) var(--dact-btnLS, 0%),
      rgba(11,11,18,0) var(--dact-btnLF, 18%),
      rgba(11,11,18,0) var(--dact-btnRS, 87%),
      rgba(11,11,18,0.7) var(--dact-btnRM, 100%),
      rgba(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(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(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');
}
/* Edge-blend gradient over the APNG (covers hard image boundary) */
/* Selected + Unconfigured — subtle edge tint on active tab with no entries */
.sidebar-btn.active .auspex-bg:not(.auspex-active)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(to right,
      rgba(86,86,118,0) 0%,
      rgba(86,86,118,0) 30%,
      rgba(86,86,118,0) 50%,
      rgba(86,86,118,0) 14%,
      rgba(86,86,118,0.31) 100%,
      rgba(86,86,118,0.31) 100%);
}
/* 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(19,19,31,0) 0%,
      rgba(19,19,31,0) 33%,
      rgba(19,19,31,0) 55%,
      rgba(19,19,31,0) 90%,
      rgba(19,19,31,0.84) 100%,
      rgba(19,19,31,0.84) 100%);
}

.sidebar-btn.has-class-bg {
  background: #14141e;
}
/* 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(20,20,30,1) 0%,
      rgba(20,20,30,1) 25%,
      rgba(20,20,30,0) 45%,
      rgba(20,20,30,0) 85%,
      rgba(20,20,30,0.7) 93%,
      rgba(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(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(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% - 42px);
  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;
}

.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;
}
.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;
}
.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; }
.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-group            { flex-wrap: wrap; gap: 4px; }
.sidebar #block-charges-group .seg-btn   { flex: 1; text-align: center; }

/* 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); }

/* 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: #2a1200; border-color: #c06010; color: #e07020; }
.seg-btn.active[data-value="2"]    { 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: 260px; }
#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-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
#sidearm-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 { color: var(--gold); }
#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 {
  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 */
.conn-special-above::before {
  content: '';
  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::before {
  content: '';
  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;
}
/* 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; }
#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: var(--text-muted);
  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: var(--text-muted);
  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: 52px;
  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: var(--text-muted);
}

/* ── 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;
}

/* 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; }

/* ── 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);
}

#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 {
  position: fixed;
  inset: 0;
  z-index: 1100;
}
#confirm-modal[hidden] { display: none; }
#confirm-modal .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 var(--border);
  border-radius: var(--radius-lg);
  width: 660px;
  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;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.help-tab-btn {
  flex: 1;
  padding: 8px 4px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--font);
  font-size: 0.72rem;
  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 {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 10px 0 4px;
}

.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: 1rem;
  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: 0.82rem;
  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: 0.82rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  line-height: 1.5;
}
.help-badge-table td:first-child {
  width: 60px;
  text-align: center;
  white-space: nowrap;
}
.help-badge-inline {
  display: inline-block;
  vertical-align: middle;
}
.help-section code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.78rem;
  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: 0.75rem;
  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: 0.78rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 6px;
}
.help-formula-terms dt:first-child { margin-top: 0; }
.help-formula-terms dd {
  font-size: 0.78rem;
  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: 0.82rem;
  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: 0.82rem;
  color: var(--text);
  line-height: 1.5;
}

.help-indicators dt {
  font-size: 0.78rem;
  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: 0.82rem;
  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);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
}
.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); }

.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: 20%; 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%; }
.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: 17%; }
.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 10px;
  border-radius: var(--radius); transition: color 0.15s, background 0.15s;
}
.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: 447px;
  max-height: 513px;
  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;
}

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

  /* -- Hide combo builder on mobile -- */
  .sidebar-btn[data-tab="combo"] { display: none; }
  .col-combo-header, .col-combo-add { display: none; }

  /* -- Scroll model: let page scroll naturally -- */
  body { height: auto; overflow: auto; }
  .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; }
  #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 { flex-direction: column; gap: 8px; }
  #weapon-group { min-width: 0; width: 100%; }
  #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; }
  /* 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; }
  #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::before { left: -14px; width: 14px; }
  .conn-special-below::before { 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 hidden on mobile unless Table tab active -- */
  .damage-section { display: none; }
  .damage-section.mobile-table-visible { display: flex; }

  /* Lock page scroll when table tab is active; only table rows scroll */
  body.mobile-table-active { height: 100vh; overflow: hidden; }
  body.mobile-table-active .app-layout { height: 100vh; min-height: 100vh; }
  body.mobile-table-active .main-body { flex: 1; min-height: 0; overflow: hidden; }
  body.mobile-table-active .damage-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  body.mobile-table-active #attack-section-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  body.mobile-table-active #table-wrapper {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    max-height: none;
  }
  #attack-table {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  /* border-collapse: collapse breaks position: sticky on th */
  body.mobile-table-active #attack-table {
    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 { position: relative; }
  #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; }
}

/* ── 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::before { left: -11px; width: 11px; }
  .conn-special-below::before { 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; }

  /* -- 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; }
}