/* ── 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: var(--banner-offset, 0px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transition: top 0.3s ease;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

.sidebar-btn {
  background: transparent;
  border: 2px solid #3a3a54;
  border-right: none;
  border-radius: 12px 0 0 12px;
  padding: 10px 12px;
  margin-left: 10px;
  margin-right: 0;
  margin-top: -2px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-height: 0;
  flex: 1;
  transition: background 0.15s, box-shadow 0.15s, margin 0.15s, padding 0.15s;
}
.sidebar-btn:first-child { margin-top: -2px; }
.sidebar-btn:hover:not([data-tab="combo"]):not(.active):not(.tab-disabled) { background: var(--surface2); }
.sidebar-btn.tab-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: auto;
}
.sidebar-btn.active {
  background: var(--bg);
  margin-left: 0;
  margin-right: -2px;
  padding-right: 14px;
  border-radius: 16px 0 0 16px;
  border: 2px solid #5a5a7a;
  border-right: none;
  z-index: 1;
}
.sidebar-btn.active .sidebar-class-img {
  right: 13px;
}
/* When active, button grows ~12px wider — pin image to same visual position
   and fade gradients to var(--bg) so tab blends into main content */
.sidebar-btn.active.has-class-bg {
  background: var(--bg);
  clip-path: inset(-2px 0 -2px -2px round 16px 0 0 16px);
}
.sidebar-btn.active.has-class-bg .class-bg-img {
  left: 77px;
  transform: none;
}
.sidebar-btn.active.has-class-bg .class-bg-img::before {
  background:
    linear-gradient(to right,
      rgba(11,11,18,1) 0%,
      rgba(11,11,18,0) 29%,
      rgba(11,11,18,0) 72%,
      rgba(11,11,18,1) 100%),
    linear-gradient(to bottom,
      rgba(11,11,18,0.6) 0%,
      rgba(11,11,18,0) 18%,
      rgba(11,11,18,0) 82%,
      rgba(11,11,18,0.6) 100%);
}
.sidebar-btn.active.has-class-bg::before {
  background:
    linear-gradient(to right,
      rgba(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) */
/* Unselected + Unconfigured — fade left edge into sidebar bg */
.sidebar-btn:not(.active) .auspex-bg:not(.auspex-active)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(to right,
      rgba(19,19,31,1) 0%,
      rgba(19,19,31,0) 45%);
}
/* Selected + Unconfigured — fade left edge into active bg + right tint */
.sidebar-btn.active .auspex-bg:not(.auspex-active)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(to right,
      rgba(19,19,31,1) 40%,
      rgba(19,19,31,0) 46%);
}
/* Unselected + Configured — edge blend on inactive tab with entries */
.auspex-bg.auspex-active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(to right,
      rgba(20,20,30,1) 0%,
      rgba(20,20,30,1) 30%,
      rgba(20,20,30,0) 50%,
      rgba(20,20,30,0) 85%,
      rgba(20,20,30,1) 100%,
      rgba(20,20,30,1) 100%);
}
.sidebar-btn[data-tab="combo"] > .sidebar-btn-label,
.sidebar-btn[data-tab="combo"] > .sidebar-btn-info {
  position: relative;
  z-index: 2;
}
.sidebar-combo-status {
  display: flex; flex-direction: column; gap: 1px;
  font-size: 0.78rem; font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.5);
}
.sidebar-combo-status .sidebar-diff-group {
  color: var(--text-dim); font-size: 0.82rem;
}
.sidebar-combo-status .sidebar-diff-line {
  display: flex; align-items: center; gap: 6px; font-size: 1.05rem;
}
.sidebar-combo-status .sidebar-diff-name {
  color: var(--gold);
}
.sidebar-combo-status .badge-mods {
  display: inline-flex; gap: 5px; font-size: 0.88rem; font-weight: 700;
}
.sidebar-combo-status .badge-mod-pos { color: #4caf50; }
.sidebar-combo-status .badge-mod-neg { color: #e53935; }
/* Active combo tab */
.sidebar-btn.active[data-tab="combo"] {
  background: var(--bg);
}
/* Gradient overlay on active combo tab (text readability + edge blend) */
.sidebar-btn.active[data-tab="combo"]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(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% - 42.5px);
  min-height: 0;
  border-top: 2px solid #5a5a7a;
  background: var(--surface);
  padding: 0 20px 16px;
  display: flex;
  flex-direction: column;
}

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

.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: #2a2200; border-color: #b0a010; color: #e0c020; }
.seg-btn.active[data-value="2"]    { background: #2a1200; border-color: #c06010; color: #e07020; }
.seg-btn.active[data-value="3"]    { background: #2a0a0a; border-color: #a02010; color: #c03020; }
.seg-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.seg-btn:disabled:hover { color: var(--text-muted); background: var(--surface2); }

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

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

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

/* ── Sidearm perk section ──────────────────────────────────────────────── */
#sidearm-perk-section { margin-top: 16px; }
#sidearm-perk-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
#sidearm-perk-counter {
  font-size: 0.85rem;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 10px;
}
#sidearm-perk-counter.at-limit { color: var(--gold); border-color: var(--gold-dim); }
#sidearm-config-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 0;
}
#sidearm-weapon-group { min-width: 180px; }
#sidearm-variant-group { min-width: 260px; }
#sidearm-variant-select {
  width: max-content;
  min-width: 100%;
}
#sidearm-variant-select .custom-select-list {
  width: max-content;
  min-width: 100%;
}
#sidearm-variant-stats {
  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,
#sidearm-perk-tree,
#primary-perk-tree {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Special perks positioned above/below the connector (between columns) */
/* Centered on the connector: left = C/2 - W/2 = 20 - 45 = -25px (C=40, W=90) */
.conn-special {
  position: absolute;
  left: -25px;
  width: 90px;
}
.conn-special-above {
  bottom: calc(100% + 6px);
}
.conn-special-below {
  top: calc(100% + 6px);
}
/* L-shape: horizontal width = C/2 = 20px, left = -(C/2) = -20px relative to special */
.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: #fff;
  font-size: 0.85rem;
  flex-shrink: 0;
  user-select: none;
}
.col-config-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.col-config-label input[type="checkbox"] { accent-color: var(--gold); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.combo-entry { cursor: grab; transition: opacity 0.15s, background 0.15s; position: relative; }
.combo-entry:hover { background: var(--surface2); }
.combo-dragging { opacity: 0.35; }
.combo-insert-before::before,
.combo-insert-after::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: #fff;
  z-index: 10;
  pointer-events: none;
}
.combo-insert-before::before { top: -1px; }
.combo-insert-after::after { bottom: -1px; }
.combo-drop-target { outline: 2px solid #fff; outline-offset: -2px; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* -- Scroll model: let page scroll naturally -- */
  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; border-top: none; }
  #attack-section-body { flex: none; }
  #table-wrapper { overflow-y: visible; max-height: none; }

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

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

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

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

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

  /* Hide perk-header inside weapon-group on mobile (moved to stats row via JS) */
  #weapon-group #perk-header { display: none; }
  #sidearm-weapon-group #sidearm-perk-header { display: none; }
  #mobile-sidearm-stats-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
  }
  #mobile-sidearm-stats-row #sidearm-variant-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 8px;
    flex: 1;
  }
  #mobile-sidearm-stats-row #sidearm-perk-header {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
  }
  /* Stats + perk counter row below dropdowns */
  #mobile-stats-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
  }
  #mobile-stats-row #variant-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
    flex: 1;
  }
  #mobile-stats-row #perk-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
  }

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

  /* Gold highlight while long-press tooltip is showing */
  .perk-btn.touch-tooltip-active,
  .perk-btn.available.touch-tooltip-active:hover { border-color: var(--gold); box-shadow: 0 0 8px rgba(212, 175, 55, 0.35); }
  .modifier-row.touch-tooltip-active { outline: 1px solid var(--gold); box-shadow: 0 0 8px rgba(212, 175, 55, 0.35); border-radius: 4px; }
  .class-card.touch-tooltip-active { border-color: var(--gold); box-shadow: 0 0 12px rgba(212, 175, 55, 0.4); transform: scale(1.04); transition: transform 0.15s, box-shadow 0.15s; }
  #class-perk-tree .perk-btn.icon-perk.touch-tooltip-active::before,
  #class-perk-tree .perk-btn.icon-perk.available.touch-tooltip-active:hover::before,
  .tm-perk-tree .perk-btn.icon-perk.touch-tooltip-active::before,
  .tm-perk-tree .perk-btn.icon-perk.available.touch-tooltip-active:hover::before,
  #prestige-perk-tree .perk-btn.icon-perk.touch-tooltip-active::before,
  #prestige-perk-tree .perk-btn.icon-perk.available.touch-tooltip-active:hover::before {
    background: var(--gold);
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.4));
  }
  .chain-connector { width: 28px; }
  .perk-chain.has-above-specials { padding-top: 72px; }
  .perk-chain.has-below-specials { padding-bottom: 72px; }
  /* Recalculate special perk position: C/2 - W/2 = 14 - 38 = -24px */
  .conn-special { left: -24px; width: 76px; }
  /* L-shape: width = C/2 = 14px, left = -14px */
  .conn-special-above::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: now managed by bottom sheet on mobile -- */
  /* Old table-tab toggle styles disabled — bottom sheet handles visibility */
  #attack-table {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    /* border-collapse: collapse breaks position: sticky on th */
    border-collapse: separate;
    border-spacing: 0;
  }

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

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

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

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

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

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

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

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

  /* ── Mobile Header Bar ──────────────────────────────────────── */
  #mobile-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 8px 12px;
    min-height: 48px;
  }
  #mobile-back-btn {
    background: rgba(28, 28, 46, 0.65);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text);
    cursor: pointer;
    padding: 10px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  #mobile-back-btn svg { width: 26px; height: 26px; }
  #mobile-back-btn:active { background: rgba(37, 37, 56, 0.8); }
  /* Hide back button when on landing page */
  body.mobile-on-landing #mobile-back-btn { visibility: hidden; }
  #mobile-reset-btn {
    background: rgba(28, 28, 46, 0.65);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--red);
    cursor: pointer;
    padding: 10px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
    visibility: hidden;
    position: absolute;
    left: 12px;
  }
  #mobile-reset-btn svg { width: 26px; height: 26px; }
  #mobile-reset-btn:active { background: rgba(37, 37, 56, 0.8); }
  body.mobile-on-landing #mobile-reset-btn { visibility: visible; }
  .help-desktop-only { display: none !important; }
  .help-mobile-only { display: block !important; }
  #mobile-header-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text);
    text-align: center;
    flex: 1;
  }
  #mobile-info-btn {
    background: rgba(28, 28, 46, 0.65);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text);
    cursor: pointer;
    padding: 10px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  #mobile-info-btn svg { width: 26px; height: 26px; }
  #mobile-info-btn:active { background: rgba(37, 37, 56, 0.8); }
  #mobile-info-dropdown {
    position: absolute;
    top: 100%;
    right: 12px;
    z-index: 70;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    overflow: hidden;
  }
  .mobile-info-item {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
  }
  .mobile-info-item:last-child { border-bottom: none; }
  .mobile-info-item:active { background: var(--surface3); }

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

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

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

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

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

  /* Combo builder button auspex background on landing */
  .mobile-landing-btn .ml-auspex-bg {
    position: absolute;
    inset: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.7;
  }

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

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

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

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

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

  /* Override old mobile table toggle styles — bottom sheet replaces them */
  .damage-section.mobile-table-visible { display: flex; }
  body.mobile-table-active { height: auto; overflow: auto; }
  body.mobile-table-active .app-layout { height: auto; min-height: auto; }
  body.mobile-table-active .main-body { flex: none; min-height: 0; overflow: visible; }

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

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

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

  /* Combo list inside tab-combo on mobile (moved from bottom sheet) */
  #tab-combo #combo-section-body {
    display: block;
    overflow-y: auto;
    padding: 0 4px 60px;
  }
  #tab-combo #combo-section-body .combo-list-section { padding: 0; }
  #tab-combo .combo-chart-wrap { min-height: 200px; max-height: 250px; }
  #tab-combo .combo-breakpoints { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; }

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

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

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

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

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

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

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

  /* -- Weapon perk tree: further shrink -- */
  .perk-btn { width: 68px; min-height: 54px; font-size: 0.6rem; padding: 3px 4px; }
  .chain-connector { width: 22px; }
  /* Recalculate: C/2 - W/2 = 11 - 34 = -23px */
  .conn-special { left: -23px; width: 68px; }
  .conn-special-above::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; }
  .servo-skull-banner { height: 90px; min-height: 90px; }
  .servo-skull-float { height: 90px; margin-top: 10px; }
  .servo-skull-img { max-height: 110px; }
  .servo-skull-eye { display: none; }
  .help-tab-btn { font-size: 0.85rem; padding: 6px 6px; }
  .help-video { max-height: 55vh; width: auto; max-width: 100%; margin: 0 auto; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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