/* =========================
   GLOBAL
========================= */

@font-face {
  font-family: "Bender";
  src: url("../assets/fonts/Bender.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Bender";
  src: url("../assets/fonts/Bender-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

html {
  background-color: #111;
}

body {
  display: flex;
  flex-direction: column;
  font-family: "Bender", Arial, sans-serif;
  letter-spacing: 0.4px;
  color: #eee;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(245, 197, 66, 0.25);
  color: #fff;
}

/* Unified focus treatment: keyboard users get a consistent ring on
   interactive controls; mouse/touch focus stays quiet. */
:where(button, a, select, summary, [role="button"], [tabindex],
       input[type="range"], input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: 2px solid rgba(245, 197, 66, 0.7);
  outline-offset: 2px;
}

/* Text fields signal focus via border + soft glow instead of a ring */
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus {
  outline: none;
  border-color: rgba(245, 197, 66, 0.55);
  box-shadow: 0 0 0 3px rgba(245, 197, 66, 0.08);
}

/* =========================
   HEADER
========================= */

header {
  background: linear-gradient(to left, rgba(245, 197, 66, 0.07), transparent 50%), #1a1a1a;
  padding: 0 20px;
  height: 44px;
  border-bottom: 1px solid #333;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: height 0.3s ease;
}

.header-spacer {
  flex-shrink: 0;
  height: 44px;
  transition: height 0.2s ease;
}

.header-spacer.with-tab-bar {
  height: 78px; /* 44px header baseline + 34px tab bar */
}

header.header-expanded {
  height: 66px;
}

.header-scroll {
  height: 100%;
}

.header-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36px;
  pointer-events: none;
  opacity: 0;
}

.header-fade-left {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.6), transparent);
}

.header-fade-right {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.6), transparent);
}

/* =========================
   DESKTOP APP WINDOW CONTROLS
   Only present when frontend/modules/window-controls.js injects them (the
   packaged desktop app, which runs with no native title bar - the header
   bar doubles as one). header-content's padding-right / header-fade-right's
   offset reserve exactly the width of the 3 buttons so the existing header
   content (nav, lang switcher, clock) shifts left to make room, the same
   way it already reflows for narrower viewports.
========================= */

header.has-window-controls .header-content {
  padding-right: 118px; /* 3 buttons x 46px, minus the header's own 20px right padding */
}

header.has-window-controls .header-fade-right {
  right: 138px; /* clear the full 46px x 3 button strip flush against the window edge */
}

.window-controls {
  position: absolute;
  top: 0;
  right: 0; /* offsets on an absolutely-positioned child measure from header's border edge, ignoring its own padding - this is already flush with the real window edge */
  height: 100%;
  display: flex;
  z-index: 102;
}

.window-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 100%;
  background: transparent;
  border: none;
  color: #888;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.window-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #eee;
}

.window-btn:active {
  background: rgba(255, 255, 255, 0.14);
}

.window-btn-close:hover {
  background: #f44336;
  color: #fff;
}

.window-btn-close:active {
  background: #d32f2f;
}

/* =========================
   BUILD TABS
========================= */

#tab-bar {
  display: none;
  position: fixed;
  top: 44px;
  left: 0;
  right: 0;
  z-index: 99;
  height: 34px;
  background: linear-gradient(to left, rgba(245, 197, 66, 0.07), transparent 50%), #1a1a1a;
  opacity: 0;
  transform: translateY(-6px);
  transition: top 0.3s ease, opacity 0.16s ease, transform 0.16s ease;
}

#tab-bar.has-tabs {
  display: block;
}

#tab-bar.tab-bar-visible {
  opacity: 1;
  transform: translateY(0);
}

header.header-expanded ~ #tab-bar {
  top: 66px;
}

#tab-bar-scroll {
  display: flex;
  align-items: stretch;
  position: relative;
  height: 100%;
  padding: 0 8px;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#tab-bar-scroll::-webkit-scrollbar {
  display: none;
}

#tab-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #333;
  pointer-events: none;
}

.tab-bar-fade {
  position: absolute;
  top: 0;
  bottom: 1px;
  width: 36px;
  pointer-events: none;
  opacity: 0;
}

.tab-bar-fade-left {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.6), transparent);
}

.tab-bar-fade-right {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.6), transparent);
}

#tab-bar-count {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: #666;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  pointer-events: none;
  white-space: nowrap;
}

.tab-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  max-width: 220px;
  min-width: 96px;
  height: 26px;
  margin-top: 6px;
  padding: 0 10px;
  border-radius: 6px 6px 0 0;
  background: #202020;
  border: 1px solid #333;
  border-bottom: none;
  color: #999;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.tab-chip:hover {
  background: #262626;
  color: #ccc;
}

/* Keyboard-only ring - a click focuses the chip too, and an outline on every
   click would read as a rendering glitch. */
.tab-chip:focus {
  outline: none;
}

.tab-chip:focus-visible {
  outline: 1px solid #f5c542;
  outline-offset: -1px;
  color: #f5c542;
}

.tab-chip.active {
  background: #0e0e0e;
  border-color: #f5c542;
  color: #f5c542;
}

.tab-chip.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: #0e0e0e;
  pointer-events: none;
  z-index: 1;
}

.tab-chip-pin-icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  object-fit: contain;
}

.tab-chip.dragging {
  z-index: 60;
  cursor: grabbing;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}

.tab-bar-divider {
  flex-shrink: 0;
  align-self: center;
  width: 1px;
  height: 18px;
  margin: 0 2px;
  background: #333333;
}

.tab-chip-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.tab-chip-close {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  line-height: 14px;
  text-align: center;
  border-radius: 3px;
  border: none;
  background: transparent;
  color: #888;
  font-size: 14px;
  cursor: pointer;
}

.tab-chip-close:hover {
  background: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
}

.tab-chip.tab-chip-closing {
  min-width: 0;
  width: 0 !important;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  transform: scale(0.9);
  overflow: hidden;
  pointer-events: none;
  transition: width 0.15s ease, padding 0.15s ease, opacity 0.1s ease, transform 0.15s ease;
}

@keyframes tabChipEnter {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.tab-chip.tab-chip-enter {
  animation: tabChipEnter 0.16s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tab-context-menu {
  position: fixed;
  z-index: 300;
  display: flex;
  flex-direction: column;
  min-width: 150px;
  background: #202020;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.tab-context-menu button {
  background: transparent;
  border: none;
  color: #ccc;
  font-size: 13px;
  text-align: left;
  padding: 7px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.tab-context-menu button:hover {
  background: rgba(245, 197, 66, 0.12);
  color: #f5c542;
}

/* Tab chip hover preview - gun image + minified stats panel */
#tab-preview-tooltip {
  position: fixed;
  z-index: 9999;
  width: 288px;
  background: #1e1e1e;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
  padding: 10px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0s linear 0.12s;
}

#tab-preview-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.12s ease;
}

.tab-preview-img-wrap {
  position: relative;
  width: 100%;
  height: 150px;
  margin-bottom: 8px;
  overflow: hidden;
}

.tab-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.15s ease, filter 0.15s ease;
}

.tab-preview-img-wrap .bp-queue-overlay {
  width: 26px;
  height: 26px;
}

.tab-preview-gunname {
  font-size: 12px;
  font-weight: 700;
  color: #f5c542;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 8px;
}

#tab-preview-tooltip .stat-bar-row { margin-bottom: 5px; min-height: 17px; }
#tab-preview-tooltip .stat-bar-label { font-size: 11px; width: 72px; }
#tab-preview-tooltip .stat-bar-track { left: 72px; height: 5px; }
#tab-preview-tooltip .stat-bar-value { font-size: 11px; }
#tab-preview-tooltip .stats-divider { margin: 6px 0; }
#tab-preview-tooltip .stat-subsection { font-size: 11px; }
#tab-preview-tooltip .stat-subsection-cols { gap: 10px; }
#tab-preview-tooltip .stat-row { margin-bottom: 3px; }
#tab-preview-tooltip .stat-row .stat-label { width: auto; margin-right: 4px; }

body[data-mobile="true"] #tab-bar {
  display: none !important;
}

@keyframes tab-close-hint-float {
  0%   { opacity: 0; transform: translate(-50%, -100%); }
  12%  { opacity: 1; transform: translate(-50%, calc(-100% - 6px)); }
  75%  { opacity: 1; transform: translate(-50%, calc(-100% - 6px)); }
  100% { opacity: 0; transform: translate(-50%, calc(-100% - 30px)); }
}

.tab-close-hint {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  color: #f5c542;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  animation: tab-close-hint-float 3200ms ease forwards;
}

header h2 {
  margin: 0;
  color: #f5c542;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2px;
  user-select: none;
}

.header-logo-link {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
}

.header-logo-link:hover h2 {
  color: #ffd966;
}

.header-title-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header-tagline {
  font-style: italic;
  color: #777;
  font-size: 11px;
  letter-spacing: 0.5px;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  overflow: hidden;
  max-height: 0;
  padding-top: 0;
  opacity: 0;
  transition: opacity 0.25s ease, max-height 0.3s ease, padding-top 0.3s ease;
}

header.header-expanded .header-tagline {
  max-height: 18px;
  padding-top: 3px;
  opacity: 1;
}

.header-logo-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.9;
  transition: opacity 0.15s, width 0.3s ease, height 0.3s ease;
  user-select: none;
  pointer-events: none;
}

header.header-expanded .header-logo-img {
  width: 48px;
  height: 48px;
}

.header-logo-link:hover .header-logo-img {
  opacity: 1;
}

.header-content {
  display: flex;
  align-items: stretch;
  gap: 15px;
  height: 100%;
}

.header-btn {
  background: #222;
  border: 1px solid #333;
  color: #aaa;
  padding: 5px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-family: "Bender", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  margin-left: auto;
}

#lang-switcher {
  display: flex;
  align-self: center;
  transition: opacity 0.15s ease;
}
#lang-switcher .custom-select-trigger {
  background: #222;
  border-color: #333;
  color: #aaa;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  height: auto;
  padding: 5px 28px 5px 12px;
}

/* globe glyph sits before the language label - the source png is already
   gold, so it is desaturated to match the resting #aaa text */
#lang-switcher .custom-select-trigger::before {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-right: 6px;
  background: url("../assets/images/langGlobe.png") center / contain no-repeat;
  filter: grayscale(1) brightness(0.86);
  transition: filter 0.15s;
}

#lang-switcher .custom-select-trigger:hover {
  background: rgba(245, 197, 66, 0.1);
  color: #f5c542;
  border-color: rgba(245, 197, 66, 0.25);
}

#lang-switcher .custom-select-trigger:hover::before,
#lang-switcher .custom-select-wrapper.open .custom-select-trigger::before {
  filter: none;
}

.header-btn:hover {
  background: rgba(245, 197, 66, 0.1);
  color: #f5c542;
  border-color: rgba(245, 197, 66, 0.25);
}

.header-btn:active {
  transform: scale(0.95);
  transition: transform 0.08s ease, background 0.15s, color 0.15s, border-color 0.15s;
}

.header-nav {
  display: flex;
  align-self: stretch;
  border-left: 1px solid #2a2a2a;
  border-right: 1px solid #2a2a2a;
  transition: opacity 0.15s ease;
}

.header-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  position: relative;
  background: transparent;
  border: none;
  border-right: 1px solid #2a2a2a;
  color: #aaa;
  font-family: "Bender", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  padding: 0 14px;
  white-space: nowrap;
  min-width: 44px;
  transition: background 0.15s, color 0.15s;
  overflow: visible;
}

.header-nav-btn:hover {
  background: rgba(245, 197, 66, 0.08);
  color: #f5c542;
}

.header-nav-btn:active {
  background: rgba(245, 197, 66, 0.15);
}

.header-nav-btn-label {
  pointer-events: none;
  max-width: 200px;
  overflow: hidden;
}

.header-nav-btn-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
}

.header-nav-btn:last-child {
  border-right: none;
}

.profile-nav-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}

.profile-nav-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: #2a2a2a;
  display: block;
  flex-shrink: 0;
}

.profile-nav-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  max-width: 80px;
  overflow: hidden;
  white-space: nowrap;
}

.profile-nav-label-text {
  display: inline-block;
  white-space: nowrap;
}

header:not(.header-expanded) .profile-nav-label {
  display: none;
}

header:not(.header-expanded) .header-nav-btn {
  padding: 0;
}

header:not(.header-expanded) .header-nav-btn-label {
  opacity: 0;
  max-width: 0;
}

header:not(.header-expanded) .header-nav-btn-icon {
  opacity: 1;
}

#tarkov-clock {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 7px;
  padding: 0 12px;
  border-left: 1px solid #2a2a2a;
  user-select: none;
  cursor: default;
}

#tarkov-clock-label {
  font-family: "Bender", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #444;
  margin-right: 2px;
}

.tarkov-clock-entry {
  display: flex;
  align-items: center;
  gap: 5px;
}

.tarkov-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tarkov-dot-day   { background: #c4952a; }
.tarkov-dot-night { background: #5a5a8a; }

.tarkov-clock-time {
  font-family: "Bender", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  min-width: 58px;
}

/* colors are set dynamically via style.color in timeColor() in app.js */

#tarkov-clock-sep {
  color: #2e2e2e;
  font-size: 12px;
  font-family: "Bender", Arial, sans-serif;
}

/* =========================
   LAYOUT
========================= */

.container {
  display: flex;
  flex: 1;
  min-height: 0;
}

.left-panel {
  flex: 0 0 auto;
  width: 660px; /* overridden by JS */

  display: flex;
  flex-direction: column;
  padding: 20px 0 20px 20px;
  min-height: 0;
  overflow: hidden;
}

.panel-resizer {
  position: relative;
  flex: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  background: #111;
  border-left: 1px solid #2a2a2a;
  border-right: 1px solid #2a2a2a;
  user-select: none;
  transition: flex-basis 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.15s ease,
              border-color 0.15s ease;
  z-index: 10;
  margin-bottom: 19px;
}

.panel-resizer:hover,
.panel-resizer.dragging {
  flex: 0 0 28px;
  background: #1a1a1a;
  border-color: #444;
}

/* Dots */
.panel-resizer-handle {
  width: 3px;
  height: 28px;
  background-image: radial-gradient(circle, #555 1.5px, transparent 1.5px);
  background-size: 3px 7px;
  transition: opacity 0.15s ease;
}

.panel-resizer:hover .panel-resizer-handle,
.panel-resizer.dragging .panel-resizer-handle {
  opacity: 0;
}

/* Arrow - fades in after dots fade out */
.panel-resizer::after {
  content: '↔';
  position: absolute;
  font-size: 15px;
  color: #777;
  opacity: 0;
  transition: opacity 0.15s ease 0.1s, color 0.15s ease;
  pointer-events: none;
}

.panel-resizer:hover::after,
.panel-resizer.dragging::after {
  opacity: 1;
  color: #aaa;
}

/* Publish-mode resizer */
.panel-resizer.publish-mode,
.panel-resizer.publish-mode:hover {
  flex: 0 0 42px;
  background: #130f00;
  border-color: #c8a84b;
}

.panel-resizer.publish-mode .panel-resizer-handle {
  opacity: 0;
}

.panel-resizer.publish-mode::after {
  opacity: 0 !important;
}

.panel-resizer-publish-hint {
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 1px;
  position: absolute;
  pointer-events: none;
}

.panel-resizer.publish-mode .panel-resizer-publish-hint {
  display: flex;
}

.panel-resizer-publish-hint span {
  color: #c8a84b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  animation: pub-chevron-pulse 1.5s ease-in-out infinite;
}

/* Wave travels right-to-left: rightmost lights up first, pulling the eye left */
.panel-resizer-publish-hint span:nth-child(3) { animation-delay: 0s; }
.panel-resizer-publish-hint span:nth-child(2) { animation-delay: 0.2s; }
.panel-resizer-publish-hint span:nth-child(1) { animation-delay: 0.4s; }

@keyframes pub-chevron-pulse {
  0%, 100% { opacity: 0.1; }
  40%       { opacity: 1; }
  70%       { opacity: 0.1; }
}

#left-build-area {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

#stats {
  flex-shrink: 0;
  padding-right: 20px;
}

#slots {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #444 #111;
  scrollbar-gutter: stable;
  padding-right: 10px;
}

#weapon-selector {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #444 #111;
  scrollbar-gutter: stable;
  padding-right: 10px;
  padding-top: 22px;
}

#price-overview {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #444 #111;
  scrollbar-gutter: stable;
  padding-right: 10px;
  flex-direction: column;
}

#price-overview .stats-section {
  flex-shrink: 0;
}

#slots::-webkit-scrollbar,
#weapon-selector::-webkit-scrollbar,
#price-overview::-webkit-scrollbar {
  width: 10px;
}

#slots::-webkit-scrollbar-track,
#weapon-selector::-webkit-scrollbar-track,
#price-overview::-webkit-scrollbar-track {
  background: #111;
}

#slots::-webkit-scrollbar-thumb,
#weapon-selector::-webkit-scrollbar-thumb,
#price-overview::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 6px;
  border: 2px solid #111;
}

#slots::-webkit-scrollbar-thumb:hover,
#weapon-selector::-webkit-scrollbar-thumb:hover,
#price-overview::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.right-panel {
  flex: 1;
  min-width: 0;

  overflow-x: auto;
  overflow-y: auto;
  overflow-anchor: none;
  padding: 20px 20px 20px 20px;
  min-height: 0;
}

@property --blob-color {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(245, 197, 66, 0.10);
}

:root {
  transition: --blob-color 1s ease;
}

/* Gun modding background */
.container:not(.no-gun) {
  background:
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 20%, rgba(0,0,0,0.72) 100%),
    radial-gradient(ellipse 70% 70% at 85% 90%, var(--blob-color), transparent 70%),
    radial-gradient(circle, rgba(255,255,255,0.11) 1px, transparent 1px),
    linear-gradient(160deg, #141414 0%, #111111 50%, #0f0e0b 100%);
  background-size: 100% 100%, 100% 100%, 30px 30px, 100% 100%;
  background-position: 0 0, 0 0, var(--dot-parallax-pos, 0px 0px), 0 0;
  background-attachment: scroll, scroll, fixed, scroll;
}

.container:not(.no-gun) .left-panel,
.container:not(.no-gun) .right-panel {
  background-color: transparent;
}

/* Fullscreen selector mode */
.container.no-gun .left-panel {
  flex: 1 1 100%;
  width: 100% !important;
  overflow-y: auto;
  background:
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 20%, rgba(0,0,0,0.72) 100%),
    radial-gradient(ellipse 70% 70% at 85% 90%, var(--blob-color), transparent 70%),
    radial-gradient(circle, rgba(255,255,255,0.11) 1px, transparent 1px),
    linear-gradient(160deg, #141414 0%, #111111 50%, #0f0e0b 100%);
  background-size: 100% 100%, 100% 100%, 30px 30px, 100% 100%;
  background-position: 0 0, 0 0, var(--dot-parallax-pos, 0px 0px), 0 0;
  background-attachment: scroll, scroll, fixed, scroll;
}

.container.no-gun .right-panel {
  display: none;
}

.container.no-gun .panel-resizer {
  display: none;
}

/* =========================
   WEAPON LIST
========================= */

#guns {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gun-list-item {
  display: flex;
  gap: 10px;
  align-items: center;
}

.gun-list-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  background-color: #1a1a1a;
  border-radius: 4px;
}

.selected-gun {
  background-color: #333;
  padding: 6px;
  border-radius: 4px;
}

/* =========================
   SCROLLBARS
========================= */

.left-panel,
.right-panel {
  scrollbar-width: thin;
  scrollbar-color: #444 #111;
}

.left-panel::-webkit-scrollbar,
.right-panel::-webkit-scrollbar {
  width: 10px;
}

.left-panel::-webkit-scrollbar-track,
.right-panel::-webkit-scrollbar-track {
  background: #111;
}

.left-panel::-webkit-scrollbar-thumb,
.right-panel::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 6px;
  border: 2px solid #111;
}

.left-panel::-webkit-scrollbar-thumb:hover,
.right-panel::-webkit-scrollbar-thumb:hover {
  background: #555;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* =========================
   STATS SECTION
========================= */

.stats-section {
  background: linear-gradient(180deg, #181818, #141414);
  border: 1px solid #222;
  border-radius: 8px;
  padding: 14px 16px 12px 16px;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 6px 12px -2px rgba(0,0,0,0.7);
}

.section-title {
  color: #f5c542;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 8px;
  padding-left: 10px;
  border-left: 3px solid #f5c542;
  user-select: none;
  transition: color 0.2s ease, border-left-color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tree-view-toggle {
  margin-left: auto;
  display: flex;
  gap: 4px;
}
.tree-view-toggle .toggle-btn {
  font-size: 14px;
  padding: 2px 7px;
}

@keyframes sectionTitleIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.section-title-anim {
  animation: sectionTitleIn 0.18s ease both;
}

.stat-line {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
}

/* =========================
   HIDDEN STATS
========================= */

.stats-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hidden-stats-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  user-select: none;
  font-family: "Bender", Arial, sans-serif;
  flex-shrink: 0;
}

.hidden-stats-btn:hover .hidden-stats-label {
  color: #aaa;
}

.hidden-stats-label {
  font-size: 10px;
  color: #666;
  font-weight: 700;
  transition: color 0.15s;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.hidden-stats-arrow {
  font-size: 8px;
  color: #666;
  transition: transform 0.2s;
  display: inline-block;
}

.hidden-stats-btn.open .hidden-stats-arrow {
  transform: rotate(180deg);
}

.hidden-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}

.hidden-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 2px 0;
}

.hidden-stat-label {
  color: #888;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.hidden-stat-value {
  color: #ccc;
  font-weight: 700;
}

/* =========================
   AMMO SELECT
========================= */

/* native selects are hidden when the custom UI is active */
#ammo-select,
#ubgl-ammo-select,
#lang-select,
#cb-sort-select,
#dt-src-select {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* =========================
   CUSTOM SELECT
========================= */

.custom-select-wrapper {
  position: relative;
  user-select: none;
}

/* ammo dropdown fills remaining space in mag-controls */
.mag-controls .custom-select-wrapper {
  flex: 1;
  min-width: 0;
}

/* lang dropdown auto-sizes to its content */
#lang-switcher .custom-select-wrapper {
  height: auto;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  background: #1a1a1a;
  color: #eee;
  border: 1px solid #444;
  padding: 5px 28px 5px 12px;
  border-radius: 999px;
  font-family: "Bender", Arial, sans-serif;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  transition: border-color 0.15s;
  position: relative;
}

.custom-select-trigger::after {
  content: "▾";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
  transition: transform 0.2s ease;
}

.custom-select-wrapper.open .custom-select-trigger {
  border-color: #666;
}

.custom-select-wrapper.open .custom-select-trigger::after {
  transform: translateY(-50%) rotate(180deg);
}

.custom-select-trigger:hover {
  background: #222;
  border-color: #555;
}

.custom-select-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 10px;
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 300;
  display: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.8);
  scrollbar-width: thin;
  scrollbar-color: #444 #1a1a1a;
}

.custom-select-list::-webkit-scrollbar {
  width: 5px;
}

.custom-select-list::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.custom-select-list::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 3px;
}

.custom-select-list::-webkit-scrollbar-thumb:hover {
  background: #555;
}


@keyframes selectItemIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}

.custom-select-wrapper.open .custom-select-list {
  display: block;
}

.custom-select-wrapper.open .custom-select-option {
  animation: selectItemIn 0.16s ease both;
  animation-delay: calc(var(--i, 0) * 25ms);
}

.custom-select-option {
  padding: 5px 12px;
  cursor: pointer;
  font-family: "Bender", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.1s, color 0.1s;
}

.custom-select-option:first-child {
  border-radius: 10px 10px 0 0;
}

.custom-select-option:last-child {
  border-radius: 0 0 10px 10px;
}

.custom-select-option:only-child {
  border-radius: 10px;
}

.custom-select-option:hover {
  background: #252525;
  color: #f5c542;
}

.custom-select-option.selected {
  background: #1e1e1e;
  color: #f5c542;
}

.mag-controls {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

.mag-controls .compare-toggle {
  white-space: nowrap;
  flex-shrink: 0;
}

.ubgl-ammo-label {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: "Bender", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #555;
  user-select: none;
}

.mag-controls .custom-select-wrapper.ammo-disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.mag-controls .custom-select-wrapper.ammo-disabled .custom-select-trigger {
  cursor: not-allowed;
  pointer-events: none;
}



.mag-controls .compare-toggle.active {
  color: #555;
}

.mag-controls .compare-toggle.active:hover {
  color: #888;
}

.mag-controls .compare-toggle.active .compare-toggle-track {
  background: #1e1800;
  border-color: #f5c542;
}

.mag-controls .compare-toggle.active .compare-toggle-knob {
  background: #f5c542;
}

/* =========================
   ATTACHMENT TABLE
========================= */

.att-table-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}

.att-table-gun-img {
  height: 56px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.85;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

.att-table-slot-placeholder {
  opacity: 1;
  filter: none;
}

.att-table-icon-preview {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.att-table-header h3 {
  margin: 0;
  color: #f5c542;
  font-weight: normal;
}

.attachment-table {
  /* Cap on the name cell content (fav star + icon + name text). Tune here. */
  --att-name-max: 420px;
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  margin-top: 15px;
}

.attachment-table th,
.attachment-table td {
  padding: 8px 10px;
}

.attachment-table th {
  text-align: left;
  color: #aaa;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  position: sticky;
  top: -40px;
  padding-top: 29px;
  background: transparent;
  transition: background 0.25s ease, backdrop-filter 0.25s ease;
  z-index: 2;
  box-shadow: 0 1px 0 #333;
}

.attachment-table.header-pinned th {
  background: rgba(17, 17, 17, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.attachment-table td {
  border-bottom: 1px solid #1f1f1f;
  vertical-align: middle;
  font-size: 12.5px;
}

/* Name column absorbs the leftover width so the stat columns are never squeezed,
   but the name CONTENT is capped at --att-name-max. Names that don't fit
   marquee-scroll on hover; stat values can't scroll, so they get space first. */
.attachment-table th:nth-child(1),
.attachment-table td:nth-child(1) {
  width: 100%;
}

/* max-width is ignored on table cells in auto layout, so cap the inner block */
.attachment-table .attachment-name-wrapper {
  max-width: var(--att-name-max);
}

/* Stat columns: shrink to content, right-aligned, no wrapping */
.attachment-table th:not(:first-child),
.attachment-table td:not(:first-child) {
  width: 1px;
  white-space: nowrap;
  text-align: right;
  font-weight: 700;
  font-family: "Bender", Arial, sans-serif;
}

/* Heat/Cool/Burn is a compact combined column - normal weight, same size as the other stat columns */
.attachment-table .hcb-cell {
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: -0.2px;
}

/* Auto-hide empty columns */
/* Column order: 1=name 2=price 3=₽/recoil 4=weight 5=recoil 6=acc 7=ergo 8=evo 9=R+E 10=heat/cool/burn 11=velocity */
.attachment-table.hide-col-price th:nth-child(2),
.attachment-table.hide-col-price td:nth-child(2) { display: none; }
.attachment-table.hide-col-rub-recoil th:nth-child(3),
.attachment-table.hide-col-rub-recoil td:nth-child(3) { display: none; }
.attachment-table.hide-col-weight th:nth-child(4),
.attachment-table.hide-col-weight td:nth-child(4) { display: none; }
.attachment-table.hide-col-recoil th:nth-child(5),
.attachment-table.hide-col-recoil td:nth-child(5) { display: none; }
.attachment-table.hide-col-acc th:nth-child(6),
.attachment-table.hide-col-acc td:nth-child(6) { display: none; }
.attachment-table.hide-col-ergo th:nth-child(7),
.attachment-table.hide-col-ergo td:nth-child(7) { display: none; }
.attachment-table.hide-col-evo th:nth-child(8),
.attachment-table.hide-col-evo td:nth-child(8) { display: none; }
.attachment-table.hide-col-balance th:nth-child(9),
.attachment-table.hide-col-balance td:nth-child(9) { display: none; }
.attachment-table.hide-col-heat th:nth-child(10),
.attachment-table.hide-col-heat td:nth-child(10) { display: none; }
.attachment-table.hide-col-vel th:nth-child(11),
.attachment-table.hide-col-vel td:nth-child(11) { display: none; }

/* Balance controls: slider shown when R+E sort is active */
.balance-controls {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  font-size: 12px;
}
.balance-controls .balance-label {
  color: #888;
  white-space: nowrap;
}
.balance-controls input[type="range"] {
  flex: 1;
  height: 4px;
  cursor: pointer;
  accent-color: #c8a84b;
}
.balance-value {
  color: #c8a84b;
  font-weight: 700;
  min-width: 32px;
  text-align: right;
  font-family: "Bender", Arial, sans-serif;
}

/* Price cell display in attachment table */
.att-price-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}
.att-price-portrait {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}
.att-price-vendor {
  font-size: 9px;
  color: #888;
}
.att-price-flea {
  font-size: 8px;
  font-weight: 700;
  color: #c8a84b;
  flex-shrink: 0;
}

/* Attachment name + icon */
.attachment-name-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.attachment-name-text {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.attachment-icon {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.attachment-icon-wrapper {
    position: relative;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

/* Prevent tall rows */
.attachment-table tbody tr {
  height: 58px;
  cursor: pointer;
}

.attachment-table tbody tr:has(.combo-name-cell) {
    /* im too fucked up to figure why this is but combo rows have to be slightly taller than normal rows or otherwise iconLinks' bottoms get cut-off */
  height: 60px;
}

.attachment-table tbody tr:hover {
  background-color: rgba(30, 30, 30, 0.75);
}

.attachment-table tbody tr.attachment-row-installed:hover {
  background: linear-gradient(
    90deg,
    rgba(255, 196, 0, 0.18),
    rgba(255, 196, 0, 0.06)
  );
}

/* =========================
   ATTACHMENT RATING BUTTONS
========================= */

.att-name-and-rating {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.att-task-unlock {
  font-size: 9.5px;
  color: #f5c542;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.att-rating {
  display: flex;
  gap: 6px;
  align-items: center;
}

.att-vote-btn {
  background: none;
  border: 1px solid #333;
  border-radius: 4px;
  color: #666;
  font-size: 10.5px;
  padding: 1px 6px;
  min-width: 40px;
  cursor: pointer;
  line-height: 1.55;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}

.att-vote-btn:hover {
  border-color: #555;
  color: #aaa;
}

.att-vote-icon {
  width: 13px;
  height: 13px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.45;
  transition: opacity 0.15s;
}

.att-vote-like .att-vote-icon {
  width: 15px;
  height: 15px;
}

.att-vote-dislike .att-vote-icon {
  width: 12px;
  height: 12px;
}

.att-vote-btn:hover .att-vote-icon {
  opacity: 0.7;
}

.att-vote-like.active {
  border-color: #4caf50;
  color: #4caf50;
}

.att-vote-like.active .att-vote-icon {
  opacity: 1;
}

.att-vote-dislike.active {
  border-color: #f44336;
  color: #f44336;
}

.att-vote-dislike.active .att-vote-icon {
  opacity: 1;
}

.att-vote-count {
  font-weight: 700;
  font-family: "Bender", Arial, sans-serif;
  min-width: 10px;
  text-align: left;
}

/* =========================
   ATTACHMENT FAVORITES
========================= */

.att-fav-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0 2px;
  line-height: 1;
  font-size: 16px;
  color: #555;
  cursor: pointer;
  transition: color 0.1s;
  align-self: center;
}

.att-fav-btn.active {
  color: #f0c040;
}

.att-fav-btn:hover {
  color: #f0c040;
}

/* =========================
   COMPARE MODE
========================= */

.att-table-header-toggles {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.compare-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: none;
  color: #555;
  cursor: pointer;
  font-family: "Bender", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  user-select: none;
  transition: color 0.2s;
}

.compare-toggle:hover {
  color: #888;
}

.compare-toggle-track {
  position: relative;
  width: 36px;
  height: 20px;
  background: #1e1e1e;
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}

.compare-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #444;
  border-radius: 50%;
  transition: transform 0.2s ease, background 0.2s;
}

.compare-toggle.active {
  color: #00c8b4;
}

.compare-toggle.active .compare-toggle-track {
  background: #0d2420;
  border-color: #00c8b4;
}

.compare-toggle.active .compare-toggle-knob {
  transform: translateX(16px);
  background: #00c8b4;
}

.bp-imggen-toggle.active { color: #555; }
.bp-imggen-toggle.active:hover { color: #888; }
.bp-imggen-toggle.active .compare-toggle-track { background: #1e1800; border-color: #f5c542; }
.bp-imggen-toggle.active .compare-toggle-knob  { background: #f5c542; }

.bp-imggen-globally-disabled {
    opacity: 0.45;
    cursor: not-allowed !important;
}
.bp-imggen-globally-disabled * {
    cursor: not-allowed !important;
    pointer-events: none;
}

#favorites-filter-btn.active,
#purchasable-toggle-btn.active { color: #555; }
#favorites-filter-btn.active:hover,
#purchasable-toggle-btn.active:hover { color: #888; }
#favorites-filter-btn.active .compare-toggle-track,
#purchasable-toggle-btn.active .compare-toggle-track { background: #1e1800; border-color: #f5c542; }
#favorites-filter-btn.active .compare-toggle-knob,
#purchasable-toggle-btn.active .compare-toggle-knob  { background: #f5c542; }

.compare-mode-hint {
  font-size: 12px;
  color: #777;
  padding: 5px 10px;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  margin-bottom: 8px;
  text-align: center;
}

.compare-baseline-row {
  background: linear-gradient(90deg, rgba(0,200,180,0.12), rgba(0,200,180,0.04)) !important;
  border-left: 3px solid #00c8b4;
}

.compare-baseline-row td:first-child {
  padding-left: 9px;
}

.compare-baseline-row:hover {
  background: linear-gradient(90deg, rgba(0,200,180,0.20), rgba(0,200,180,0.08)) !important;
}

.cmp-delta {
  font-size: 11px;
  font-weight: 600;
  margin-top: 1px;
  line-height: 1.2;
}

.cmp-baseline-tag {
  font-size: 10px;
  color: #00c8b4;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.ghost-combo-icon {
  flex-shrink: 0;
}

.ghost-combo-plus {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  color: #f5c542;
  align-self: center;
  padding: 0 2px;
}

.combo-name-cell {
  position: relative;
}

.combo-icon-scroll {
  position: absolute;
  inset: 8px 0 8px 12px;
  overflow: hidden;
}

.combo-marquee {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  will-change: transform;
}

/* Combo mode */

.combo-view-btns {
  display: flex;
  gap: 0;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #333;
}

.combo-view-btns .toggle-btn {
  flex: none;
  padding: 5px 10px;
  font-size: 11px;
  border-radius: 0;
  border: none;
  border-right: 1px solid #333;
}

.combo-view-btns .toggle-btn:last-of-type,
.combo-view-btns:not(.has-combo) #graph-view-btn {
  border-right: none;
}

/* ===========================
   ATTACHMENT GRAPH VIEW
=========================== */

.att-graph-container {
  width: 100%;
  padding: 0 0 4px;
  box-sizing: border-box;
}

.graph-body {
  position: relative;
}

.att-graph-svg {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.att-graph-dot {
  transition: opacity 0.15s ease;
}
.att-graph-dot circle:first-of-type {
  transition: fill 0.12s ease, transform 0.12s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.att-graph-dot:hover circle:first-of-type,
.att-graph-dot.graph-dot-hovered circle:first-of-type {
  fill: #ffe566;
  transform: scale(0.6);
}
.att-graph-dot:hover .graph-dot-ring,
.att-graph-dot.graph-dot-hovered .graph-dot-ring {
  stroke-opacity: 0.55;
  transition: stroke-opacity 0.12s ease;
}

/* Dim all non-hovered items when any item is hovered */
.att-graph-svg.has-hover .att-graph-dot:not(.graph-dot-hovered) {
  opacity: 0.2;
}
.att-graph-svg.graph-instant .att-graph-dot {
  transition: none;
}

.att-graph-dot-click {
  cursor: pointer;
}

.att-graph-dot-click:hover .graph-item-name {
  fill: #eee;
}

.graph-item-name {
  font-family: "Bender", Arial, sans-serif;
  font-weight: 600;
  fill: #aaa;
  text-shadow: 0 0 3px rgba(0,0,0,0.9);
  pointer-events: none;
  user-select: none;
}

.graph-cluster-tip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 110px;
}
.gct-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #888;
}
.gct-row.gct-active {
  color: #f5c542;
}
.gct-hint {
  font-size: 9px;
  color: #555;
  margin-top: 2px;
  text-align: center;
}
.gct-stats {
  font-size: 10px;
  color: #666;
  border-top: 1px solid #2a2a2a;
  padding-top: 4px;
  margin-top: 1px;
}

@keyframes graph-row-flash {
  0%   { background: #ffffff28; }
  60%  { background: #ffffff28; }
  100% { background: transparent; }
}

.graph-row-highlight {
  animation: graph-row-flash 1s ease forwards;
}

.graph-scroll-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  z-index: 20;
  transition: background 0.15s ease;
}
.graph-scroll-hint.graph-scroll-hint-active {
  background: rgba(0, 0, 0, 0.45);
}
.graph-scroll-hint span {
  color: #fff;
  font-family: "Bender", Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.05em;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.graph-scroll-hint.graph-scroll-hint-active span {
  opacity: 1;
}

@keyframes graph-grid-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes graph-dot-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.graph-grid-init {
  animation: graph-grid-in 0.4s ease both;
}

.graph-labels-init {
  animation: graph-grid-in 0.35s ease both;
  animation-delay: 0.09s;
}

.graph-dot-appear {
  animation: graph-dot-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--dot-i, 0) * 28ms + 160ms);
}

.att-graph-scale-v {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 6px;
  height: 100%;
  cursor: pointer;
  accent-color: #f5c542;
  opacity: 0.45;
  transition: opacity 0.15s;
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
}
.att-graph-scale-v:hover,
.att-graph-scale-v:focus {
  opacity: 1;
}

.graph-export-preview {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  display: block;
  border-radius: 4px;
  border: 1px solid #2a2a2a;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.graph-zoom-box {
  fill: rgba(245, 197, 66, 0.08);
  stroke: #f5c542;
  stroke-width: 1;
  stroke-dasharray: 4, 3;
  pointer-events: none;
}

.graph-ch-toggle-btn rect,
.graph-lbl-toggle-btn rect,
.graph-yaxis-toggle-btn rect,
.graph-xaxis-toggle-btn rect,
.graph-hints-toggle-btn rect,
.graph-export-btn rect,
.graph-reset-svg-btn rect {
  transition: fill 0.1s ease;
}
.graph-ch-toggle-btn:hover rect,
.graph-lbl-toggle-btn:hover rect,
.graph-yaxis-toggle-btn:hover rect,
.graph-xaxis-toggle-btn:hover rect,
.graph-hints-toggle-btn:hover rect,
.graph-export-btn:hover rect,
.graph-reset-svg-btn:hover rect {
  fill: #2a2a2a;
}
.graph-reset-svg-btn:hover text {
  fill: #f5c542;
}

/* Graph top bar and search panel */
.graph-top-bar {
  display: none;
}

.graph-sel-section {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.graph-sel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 3px;
  background: #0a0a0a;
  flex-shrink: 0;
  border-bottom: 1px solid #181818;
}

.graph-sel-label {
  font-size: 9px;
  font-family: "Bender", Arial, sans-serif;
  font-weight: 700;
  color: #665500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.graph-sel-clear-btn {
  background: none;
  border: 1px solid #2a2a00;
  border-radius: 2px;
  color: #665500;
  font-size: 9px;
  font-family: "Bender", Arial, sans-serif;
  padding: 1px 5px;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
}
.graph-sel-clear-btn:hover {
  color: #f5c542;
  border-color: #888800;
}

.graph-search-panel {
  position: absolute;
  left: 0;
  top: 0;
  width: 640px;
  height: 100%;
  z-index: 10;
  background: #0d0d0d;
  border: 1px solid #1e1e1e;
  border-radius: 3px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  box-shadow: 4px 0 32px rgba(0, 0, 0, 0.85);
}

.graph-panel-strip {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.graph-search-strip {
  flex: 3;
  border-right: 1px solid #1e1e1e;
}

.graph-plotted-strip {
  flex: 2;
}

.graph-axis-strip {
  flex: 0 0 168px;
  border-left: 1px solid #1e1e1e;
}

.graph-axis-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.graph-axis-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.graph-axis-label {
  font-size: 8px;
  font-family: "Bender", Arial, sans-serif;
  color: #444;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 2px 2px;
}

.graph-axis-btn {
  width: 100%;
  padding: 3px 6px;
  font-size: 9px;
  background: #0d0d0d;
  border: 1px solid #222;
  color: #555;
  cursor: pointer;
  border-radius: 2px;
  text-align: left;
  font-family: "Bender", Arial, sans-serif;
}
.graph-axis-btn:hover {
  background: #181818;
  border-color: #333;
  color: #888;
}
.graph-axis-btn.gab-x-sel {
  background: #1a1400;
  border-color: #554400;
  color: #f5c542;
}
.graph-axis-btn.gab-x-sel:hover {
  background: #252000;
}
.graph-axis-btn.gab-y-sel {
  background: #1a1400;
  border-color: #554400;
  color: #f5c542;
}
.graph-axis-btn.gab-y-sel:hover {
  background: #252000;
}

.graph-search-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-bottom: 1px solid #181818;
}

.graph-search-input {
  flex: 1;
  background: #111;
  border: 1px solid #252525;
  border-radius: 3px;
  color: #ccc;
  font-size: 11px;
  font-family: "Bender", Arial, sans-serif;
  padding: 3px 7px;
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.graph-search-filters {
  display: flex;
  gap: 4px;
  padding: 4px 8px;
  border-bottom: 1px solid #181818;
}
.gsf-btn {
  flex: 1;
  padding: 2px 0;
  font-size: 9px;
  font-family: "Bender", Arial, sans-serif;
  background: #0d0d0d;
  border: 1px solid #222;
  color: #555;
  border-radius: 2px;
  cursor: pointer;
}
.gsf-btn:hover {
  background: #181818;
  color: #888;
  border-color: #333;
}
.gsf-btn.gsf-active {
  background: #1a1400;
  border-color: #554400;
  color: #f5c542;
}

.graph-search-results {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.graph-search-cat-header {
  font-size: 9px;
  font-family: "Bender", Arial, sans-serif;
  font-weight: 700;
  color: #555;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 8px 3px;
  background: #0a0a0a;
  position: sticky;
  top: 0;
  z-index: 1;
}

.graph-search-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease;
}
.graph-search-item:hover {
  background: #181818;
}
.graph-search-item.gsi-selected {
  background: #1a1800;
}
.graph-search-item.gsi-selected:hover {
  background: #1f0808;
}
.graph-search-item.gsi-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.graph-search-item img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.graph-search-item-name {
  font-size: 11px;
  font-family: "Bender", Arial, sans-serif;
  color: #bbb;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.graph-search-item.gsi-selected .graph-search-item-name {
  color: #f5c542;
  transition: color 0.12s ease;
}
.graph-search-item.gsi-selected:hover .graph-search-item-name {
  color: #e84040;
}

.graph-search-item-badge {
  font-size: 9px;
  font-family: "Bender", Arial, sans-serif;
  background: #1e1e1e;
  color: #666;
  border-radius: 2px;
  padding: 1px 4px;
  flex-shrink: 0;
}
.graph-search-item.gsi-selected .graph-search-item-badge {
  background: #2a2000;
  color: #f5c542;
  transition: background 0.12s ease, color 0.12s ease;
}
.graph-search-item.gsi-selected:hover .graph-search-item-badge {
  background: #2a0a0a;
  color: #e84040;
}

.graph-no-results {
  padding: 14px 8px;
  font-size: 11px;
  color: #444;
  font-family: "Bender", Arial, sans-serif;
  text-align: center;
}

.graph-custom-dot {
  cursor: pointer;
}
.graph-custom-dot:hover circle:first-of-type {
  fill: #ff6b6b;
}

.combo-child-label {
  font-size: 9px;
  font-weight: 700;
  color: #888;
  letter-spacing: 0.05em;
  margin-top: 2px;
  text-transform: uppercase;
  font-family: "Bender", Arial, sans-serif;
}

.combo-status-row {
  text-align: center;
  padding: 24px 12px;
  color: #666;
  font-size: 13px;
}

.combo-status-row.combo-error {
  color: #f44336;
}

.combo-loading-main {
  font-size: 13px;
  color: #666;
}

.combo-loading-progress {
  margin-top: 6px;
  font-size: 11px;
  color: #444;
  min-height: 16px;
}

.combo-capped-notice td {
  font-size: 11px;
  color: #888;
  text-align: center;
  padding: 4px 12px;
  background: #141414;
  border-bottom: 1px solid #2a2a2a;
}

.combo-price-sum {
  font-size: 9px;
  color: #888;
  margin-right: 3px;
  font-weight: 700;
}

.price-bd {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 180px;
}

.price-bd-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.price-bd-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.price-bd-name {
  flex: 1;
  font-size: 11px;
  color: #ccc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.price-bd-vendor {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 2px;
}

.price-bd-vendor-label,
.price-bd-flea {
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.price-bd-vendor-label { color: #888; }
.price-bd-flea { color: #c8a84b; }

.price-bd-price {
  font-size: 11px;
  color: #eee;
  font-weight: 700;
  white-space: nowrap;
}

.price-bd-total {
  display: flex;
  justify-content: space-between;
  padding-top: 4px;
  border-top: 1px solid #3a3a3a;
  font-size: 11px;
  color: #f5c542;
  font-weight: 700;
}

/* =========================
   VALUE COLORS
========================= */

.positive {
  color: #4CAF50;
  font-weight: 700;
}

.negative {
  color: #f44336;
  font-weight: 700;
}

/* Accuracy column */
.acc-cell {
  white-space: nowrap;
}
.acc-coi-val {
  display: block;
  font-weight: 600;
  color: #eee;
}
.acc-sub {
  display: block;
  font-size: 10px;
  color: #888;
  margin-top: 1px;
}

/* Base Ergo */
.ergo-positive {
  color: #4CAF50;
  font-weight: 700;
}

.ergo-negative {
  color: #f44336;
  font-weight: 700;
}

/* EvoErgo column - muted */
.evo-positive {
  color: #6ea86e;
  font-weight: 600;
}

.evo-negative {
  color: #c96a6a;
  font-weight: 600;
}

/* =========================
   SEARCH INPUT
========================= */

.search-input {
  width: 100%;
  padding: 6px 10px;
  margin-bottom: 12px;
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 4px;
  color: #eee;
  font-family: "Bender", Arial, sans-serif;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input::placeholder {
  color: #5a5a5a;
  user-select: none;
}

/* =========================
   ACTIVE INDICATION
========================= */

.left-panel,
.right-panel {
  transition: background-color 0.15s ease;
  background-color: #111;
  contain: paint; /* establishes a containing block for position:fixed overlay children */
}

.weapon-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  align-items: stretch;
}

.toggle-divider {
  width: 1px;
  background-color: #333;
  margin: 0 4px;
  flex-shrink: 0;
}

.toggle-btn {
  flex: 1;
  padding: 6px 0;
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 4px;
  color: #aaa;
  cursor: pointer;
  font-family: "Bender", Arial, sans-serif;
  font-weight: 700;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.toggle-btn:hover {
  background-color: #252525;
  color: #ccc;
  border-color: #444;
}

.toggle-btn.active {
  background-color: #333;
  color: #f5c542;
  border-color: #444;
}

.toggle-btn.active:hover {
  background-color: #3a3a3a;
  border-color: #555;
}

.toggle-btn:active {
  transform: scale(0.95);
  transition: transform 0.08s ease;
}

button {
  font-family: "Bender", Arial, sans-serif;
  user-select: none;
}

/* Button badge - add data-badge="New!" or data-badge="3" to any button */
button[data-badge]:not([data-badge=""]) {
  position: relative;
  overflow: visible;
}

button[data-badge]:not([data-badge=""])::after {
  content: attr(data-badge);
  position: absolute;
  top: -9px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #f5c542;
  color: #1a1400;
  font-size: 10px;
  font-weight: 800;
  font-family: "Bender", Arial, sans-serif;
  letter-spacing: 0.3px;
  border-radius: 9px;
  line-height: 18px;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
  pointer-events: none;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
  animation: btn-badge-pulse 2.2s ease-in-out infinite;
  z-index: 10;
}

button[data-badge]:not([data-badge=""])[data-badge-pulse="false"]::after {
  animation: none;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
}

/* Header nav buttons fill the full header height, so the standard top:-9px badge
   would be clipped above the sticky header's viewport edge. Pull it inside instead. */
.header-nav-btn[data-badge]:not([data-badge=""])::after {
  top: 5px;
  right: 5px;
}

/* Collapsed header: buttons are small squares — shrink badge to a dot so it doesn't bury the icon */
header:not(.header-expanded) .header-nav-btn[data-badge]:not([data-badge=""])::after {
  content: '';
  width: 8px;
  height: 8px;
  min-width: unset;
  padding: 0;
  border-radius: 50%;
  top: 7px;
  right: 7px;
}

@keyframes btn-badge-pulse {
  0%, 100% { box-shadow: 0 1px 5px rgba(0,0,0,0.7), 0 0 0 0px rgba(245,197,66,0.55); }
  55%       { box-shadow: 0 1px 5px rgba(0,0,0,0.7), 0 0 0 5px rgba(245,197,66,0); }
}

.back-button {
  background-color: #1a1a1a;
  color: #eee;
  border: 1px solid #333;
  padding: 6px 12px;
  border-radius: 4px;
  font-family: "Bender", Arial, sans-serif;
  font-size: 13px;
  cursor: pointer;
  margin: 8px 20px 12px 0;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
  width: calc(100% - 20px);
}

.back-button:hover {
  background-color: #252525;
  color: #fff;
  border-color: #444;
}

.back-button:active {
  transform: scale(0.96);
  transition: transform 0.08s ease, background-color 0.15s ease;
}

#build-controls {
  display: flex;
  gap: 8px;
  margin: 8px 20px 4px 0;
}

#build-controls .back-button {
  font-size: 12px;
  padding: 5px 6px;
  white-space: nowrap;
  margin: 0;
  width: auto;
  flex: 1;
}

#view-toggle {
  display: flex;
  gap: 8px;
  margin: 6px 20px 12px 0;
}

#view-toggle .toggle-btn {
  font-size: 12px;
  padding: 5px 6px;
}

.conflict-row {
    background-color: rgba(255, 0, 0, 0.12);
}

.attachment-table tbody tr.conflict-row:hover {
    background-color: rgba(255, 0, 0, 0.35) !important;
}

/* =========================
   GLOBAL TOOLTIP
========================= */

#eft-tooltip {
    position: fixed;
    z-index: 9999;
    max-width: 320px;
    background: #1e1e1e;
    color: #bbb;
    font-family: "Bender", Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    padding: 7px 10px;
    border-radius: 4px;
    border: 1px solid #3a3a3a;
    box-shadow: 0 6px 20px rgba(0,0,0,0.55);
    white-space: pre-line;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    text-transform: none;
    letter-spacing: normal;
}

#eft-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

#eft-tooltip.html-tip {
    white-space: normal;
    pointer-events: none;
}

/* =========================
   TOAST NOTIFICATIONS
========================= */

/* Registering --toast-accent as a typed <color> is what lets replaceToast() cross-fade
   the accent color (border + icon) instead of snapping to the new color instantly. */
@property --toast-accent {
  syntax: '<color>';
  inherits: true;
  initial-value: #f44336;
}

#toast-container {
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  position: relative;
  display: flex;
  align-items: stretch;
  background: #1e1e1e;
  border: 1px solid rgba(255,255,255,0.07);
  border-top: 4px solid var(--toast-accent, #f44336);
  color: #ddd;
  padding-right: 32px;
  min-width: 260px;
  max-width: 320px;
  border-radius: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.45);
  font-size: 13px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.22s ease, transform 0.22s ease, border-top-color 0.4s ease, width 0.3s ease;
  overflow: hidden;
}

.toast.dismissible { cursor: pointer; }
.toast.dismissible:hover { background: #232323; }

.toast-dismiss-hint {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 13px;
  color: #888;
  opacity: 0.4;
  line-height: 1;
  pointer-events: none;
  transition: opacity 0.15s;
}
.toast.dismissible:hover .toast-dismiss-hint { opacity: 0.85; }

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast-icon-col {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  color: var(--toast-accent, #f44336);
  transition: opacity 0.18s ease, color 0.4s ease;
}

.toast-content {
  flex: 1;
  padding: 10px 0 12px 0;
  min-width: 0;
  transition: opacity 0.18s ease;
}

/* Applied briefly by replaceToast() while swapping title/message/icon text so the
   change reads as a cross-fade instead of an instant cut. */
.toast-fade-swap {
  opacity: 0;
}

.toast-title {
  font-weight: 600;
  margin-bottom: 3px;
  color: #d8d8d8;
}

.toast-body {
  font-weight: 400;
  white-space: pre-line;
  color: #888;
  font-size: 12px;
  min-height: 14px;
  line-height: 1.5;
}

@keyframes toast-dot-pulse {
  0%, 60%, 100% { opacity: 0.15; }
  30% { opacity: 1; }
}
.toast-dot {
  display: inline-block;
  animation: toast-dot-pulse 1.2s infinite both;
}
.toast-dot:nth-child(2) { animation-delay: 0.2s; }
.toast-dot:nth-child(3) { animation-delay: 0.4s; }

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: rgba(255,255,255,0.55);
  transform-origin: left center;
  animation-fill-mode: forwards;
}

@keyframes toast-progress-drain {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

.toast-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.toast-action-btn {
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  color: #ccc;
  font-family: "Bender", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 4px 12px;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.toast-action-btn:hover {
  background: #333;
  border-color: #555;
}

/* =========================
   GUN GRID
========================= */

.gun-grid {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

/* Fullscreen */
.container.no-gun .gun-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* Dual panel mode */
.container:not(.no-gun) .gun-grid {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

@keyframes gunCardEntrance {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes panelEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.panel-enter {
  animation: panelEnter 0.2s ease forwards;
}

@keyframes tableSlideIn {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}

.table-slide-in {
  animation: tableSlideIn 0.18s ease forwards;
}

@keyframes placeholderSlideIn {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 0.65; transform: translateX(0); }
}

.placeholder-slide-in {
  animation: placeholderSlideIn 0.18s ease forwards;
}

@keyframes graphPanelSlideIn {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes graphPanelSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-60px); }
}

.graph-panel-open {
  animation: graphPanelSlideIn 0.2s ease forwards;
}

.graph-panel-closing {
  animation: graphPanelSlideOut 0.18s ease forwards;
}

.gun-card-entering {
  opacity: 0;
  animation: gunCardEntrance 0.3s ease forwards;
}

.gun-card {
  background: #151515;
  border: 1px solid #222;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  box-shadow: 0 6px 12px -2px rgba(0,0,0,0.7);
  transition: transform 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.gun-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 1px;
  background: radial-gradient(
    circle 110px at var(--mouse-x, -200px) var(--mouse-y, -200px),
    rgba(245, 197, 66, 0.75),
    transparent 70%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

.gun-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: radial-gradient(
    circle 220px at var(--mouse-x, -450px) var(--mouse-y, -450px),
    rgba(255, 255, 255, 0.05),
    transparent 70%
  );
  pointer-events: none;
  z-index: 2;
}

.gun-card img {
  width: 100%;
  height: 60px;
  object-fit: contain;
  object-position: center;
  margin-bottom: 6px;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  position: relative;
  z-index: 1;

  transition: transform 0.18s ease, filter 0.25s ease;
}

.gun-name {
  font-size: 14px;
  font-weight: 500;
  margin-top: auto;
  color: #cfcfcf;
  opacity: 0.87;
  user-select: none;
  position: relative;
  z-index: 1;
}

/* No scale on hover: upscaling a composited layer mid-animation blurs it,
   since the browser stretches the 1:1 raster instead of re-rasterizing */
.gun-card:hover img {
  filter: brightness(1.1);
}

/* Target-lock corner brackets: only opacity/transform animate (compositor-only) */
.gun-card-corners {
  position: absolute;
  inset: 7px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transform: scale(1.18);
  transition: opacity 0.14s ease-out, transform 0.22s cubic-bezier(0.2, 1.1, 0.3, 1.15);
  --corner-color: rgba(245, 197, 66, 0.9);
}

.gun-card-corners i {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid var(--corner-color);
}

.gun-card-corners i:nth-child(1) { top: 0;    left: 0;  border-right: 0; border-bottom: 0; border-top-left-radius: 4px; }
.gun-card-corners i:nth-child(2) { top: 0;    right: 0; border-left: 0;  border-bottom: 0; border-top-right-radius: 4px; }
.gun-card-corners i:nth-child(3) { bottom: 0; left: 0;  border-right: 0; border-top: 0;    border-bottom-left-radius: 4px; }
.gun-card-corners i:nth-child(4) { bottom: 0; right: 0; border-left: 0;  border-top: 0;    border-bottom-right-radius: 4px; }

.gun-card:hover .gun-card-corners {
  opacity: 1;
  transform: scale(1);
}

/* ===== Display-case depth layers ===================================
   All hover/parallax motion below animates transform/opacity only,
   so it stays on the compositor. Gradients are painted once. */

/* Shadow the gun casts on the back wall. JS drifts it slightly more
   than the gun image so they separate with viewing angle. */
.gun-card-shadow {
  position: absolute;
  left: 14%;
  top: 54px;
  width: 72%;
  height: 12px;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent);
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 0.25s ease;
}

.gun-card:hover .gun-card-shadow {
  opacity: 0.85;
}

/* Overhead display light switching on over the inspected item */
.gun-card-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 2;
  background: radial-gradient(120% 95% at 50% -12%,
    rgba(255, 248, 224, 0.05),
    rgba(255, 248, 224, 0.015) 45%,
    transparent 65%);
}

.gun-card:hover .gun-card-light {
  opacity: 1;
}

.gun-card.selected {
  border: 1px solid #f5c542;
  background: #1f1a10;
}

/* Mid-build highlight is a mobile-only safety net - desktop uses the tab strip instead */
body[data-mobile="true"] .gun-card.mid-build {
  border-color: #c8a84b;
  background: #191408;
  animation: mid-build-pulse 2.4s ease-in-out infinite;
}

@keyframes mid-build-pulse {
  0%, 100% { box-shadow: 0 0 0 0px rgba(200, 168, 75, 0); }
  55%       { box-shadow: 0 0 0 3px rgba(200, 168, 75, 0.18); }
}

.caliber-header {
  grid-column: 1 / -1;
  margin-top: 18px;

  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;

  color: #f5c542;
  opacity: 0.9;

  padding-left: 4px;
}

.tree-slot {
    margin-bottom: 6px;
    cursor: pointer;
    position: relative;
}

.tree-children {
    margin-left: 20px;
    border-left: 1px dashed rgba(255,255,255,0.25);
    padding-left: 10px;
    overflow: hidden;
    transition: height 0.15s ease-out, opacity 0.15s ease-out;
}

/* =========================
   TREE CONNECTORS
========================= */

.tree-slot::after {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    width: 10px;
    border-top: 1px dashed rgba(255,255,255,0.25);
}

/* root level should have no connector */
.tree-slot.depth-0::before,
.tree-slot.depth-0::after {
    display: none;
}

.tree-slot-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #181818;
    border: 1px solid #222;
    border-radius: 6px;
    padding: 4px 8px;
    transition: all 0.15s ease;
}

.tree-slot-inner {
    overflow: hidden;
    position: relative;
}

.tree-slot-inner::after {
    content: "";
    position: absolute;
    top: -150%;
    left: 0;
    width: 100%;
    height: 400%;
    pointer-events: none;
    opacity: 0;
}

.slot-flash-install .tree-slot-inner::after {
    background: linear-gradient(
        90deg,
        rgba(80, 200, 80, 0) 0%,
        rgba(80, 200, 80, 0.5) 50%,
        rgba(80, 200, 80, 0) 100%
    );
    opacity: 1;
    animation: sweepLeft 0.6s ease-out forwards;
}

.slot-flash-remove .tree-slot-inner::after {
    background: linear-gradient(
        90deg,
        rgba(200, 60, 60, 0) 0%,
        rgba(200, 60, 60, 0.5) 50%,
        rgba(200, 60, 60, 0) 100%
    );
    opacity: 1;
    animation: sweepRight 0.6s ease-out forwards;
}

.slot-flash-reveal .tree-slot-inner::after {
    background: linear-gradient(
        90deg,
        rgba(180, 180, 180, 0) 0%,
        rgba(180, 180, 180, 0.2) 50%,
        rgba(180, 180, 180, 0) 100%
    );
    opacity: 1;
    animation: sweepLeft 0.6s ease-out forwards;
}

.slot-flash-conflict .tree-slot-inner::after {
    background: linear-gradient(
        90deg,
        rgba(220, 50, 50, 0) 0%,
        rgba(220, 50, 50, 0.6) 50%,
        rgba(220, 50, 50, 0) 100%
    );
    opacity: 1;
    animation: conflictPulse 0.15s ease-out forwards;
}

@keyframes sweepLeft {
    from { transform: translateX(-200%) rotate(-30deg); }
    to   { transform: translateX(200%) rotate(-30deg); }
}

@keyframes sweepRight {
    from { transform: translateX(200%) rotate(-30deg); }
    to   { transform: translateX(-200%) rotate(-30deg); }
}

@keyframes conflictPulse {
    0%   { opacity: 0; }
    40%  { opacity: 1; }
    100% { opacity: 0; }
}

.tree-flash-overlay {
    pointer-events: none;
    overflow: hidden;
    z-index: 9999;
}

.tree-flash-overlay::after {
    content: "";
    position: absolute;
    top: -150%;
    left: 0;
    width: 100%;
    height: 400%;
}

.tree-flash-overlay.reset::after {
    background: linear-gradient(
        90deg,
        rgba(80, 200, 80, 0) 0%,
        rgba(80, 200, 80, 0.35) 50%,
        rgba(80, 200, 80, 0) 100%
    );
    animation: sweepLeft 0.5s ease-out forwards;
}

.tree-flash-overlay.strip::after {
    background: linear-gradient(
        90deg,
        rgba(200, 60, 60, 0) 0%,
        rgba(200, 60, 60, 0.35) 50%,
        rgba(200, 60, 60, 0) 100%
    );
    animation: sweepRight 0.5s ease-out forwards;
}

/* ===========================
   ATTACHMENT GRID
=========================== */

/* Reset tree-list styles for grid cells */
.tree-slot.ag-cell {
    margin: 0 !important;
    padding: 0;
    border: 1px solid #2a2a2a;
    border-radius: 0;
    background: #161616;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
    user-select: none;
}
.tree-slot.ag-cell::before,
.tree-slot.ag-cell::after { display: none !important; }
.tree-slot.ag-cell:hover { background: rgba(255, 255, 255, 0.07); border-color: #3a3a3a; }
.tree-slot.ag-cell.active-slot {
    border-color: #6b5a28;
    background: #1e1b12;
}

/* Inner wrapper - needed by flash CSS (::after) and removeAttachment swipe strip */
.ag-cell .tree-slot-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    /* reset tree styles */
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}
/* Item container - needed by updateSlotIcon (querySelector(".tree-slot-item")) */
.ag-cell .tree-slot-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    position: relative;
}

/* Installed attachment icon */
.ag-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* updateSlotIcon writes .tree-slot-icon into .tree-slot-item */
.ag-cell .tree-slot-icon {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
}
.ag-cell .tree-slot-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Short name: top-left corner of cell */
.ag-cell .slot-shortname {
    position: absolute;
    top: 2px;
    left: 2px;
    font-family: "Bender", sans-serif;
    font-size: 10px;
    color: #ccc;
    text-shadow: 0 0 3px #000, 0 0 6px #000;
    pointer-events: none;
    user-select: none;
    line-height: 1;
}

/* Empty slot placeholder */
.ag-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2e2e2e;
    font-size: 20px;
}

/* Slot placeholder image (grid view) */
.slot-placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 1;
    pointer-events: none;
}

/* Slot placeholder image (list view - fixed size to match .empty-slot) */
.tree-slot:not(.ag-cell) .tree-slot-item > .slot-placeholder-img {
    width: 48px;
    height: 48px;
}

/* Slot name label beneath the icon */
.ag-label {
    font-size: 10px;
    color: #aaa;
    text-align: center;
    line-height: 1;
    max-width: 54px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    flex-shrink: 0;
    padding-bottom: 1px;
}

/* Grid wrapper and grid */
.attachment-grid-wrapper {
    padding-top: 4px;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
    scrollbar-color: #444 #111;
}

/* Grid view - center the grid horizontally and vertically in the panel */
#slots[data-view="grid"] {
    display: flex;
    flex-direction: column;
}

#slots[data-view="grid"] .stats-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

#slots[data-view="grid"] #tree-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#slots[data-view="grid"] .attachment-grid-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.attachment-grid {
    display: grid;
    grid-template-columns: repeat(10, 56px);
    /* grid-template-rows set dynamically in JS: repeat(N, 66px) */
    gap: 0;
    user-select: none;
    -webkit-user-select: none;
}

.attachment-grid img,
.attachment-grid .slot-placeholder-img {
    -webkit-user-drag: none;
    pointer-events: none;
}

/* Re-enable selection and drag in dev mode */
.attachment-grid[data-ag-dev="1"] {
    user-select: auto;
    -webkit-user-select: auto;
}

.attachment-grid[data-ag-dev="1"] img,
.attachment-grid[data-ag-dev="1"] .slot-placeholder-img {
    -webkit-user-drag: auto;
    pointer-events: auto;
}

/* Gun image cell - non-interactive, spans 3 columns */
.ag-gun-cell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    pointer-events: none;
    background: #161616;
    border: 1px solid #2a2a2a;
    position: relative;
    overflow: hidden;
}
.ag-gun-cell img {
    flex: 1;
    min-height: 0;
    width: 100%;
    object-fit: contain;
}
/* Queue overlay - shown on gun images while waiting in server generation queue */
.bp-gun-img-wrap {
    position: relative;
    display: inline-block;
}
.bp-queue-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    z-index: 1;
}
.ag-gun-cell .bp-queue-overlay {
    width: 20px;
    height: 20px;
}
.ag-gun-label {
    max-width: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* Extras row - slots without a defined grid position */
.ag-extras {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}
.ag-extras .tree-slot.ag-cell {
    position: relative;
    width: 56px;
    height: 66px;
}

/* Mobile scaling */
@media (max-width: 480px) {
    .attachment-grid { grid-template-columns: repeat(10, 40px); }
    .ag-extras .tree-slot.ag-cell { width: 40px; height: 48px; }
    .ag-empty { font-size: 14px; }
}

/* Parent slot pulse when hovering a child slot */
@keyframes ag-parent-pulse {
    0%, 100% { opacity: 0.15; }
    50%       { opacity: 1; }
}
.ag-pulse-overlay {
    position: absolute;
    inset: 0;
    background: rgba(100, 160, 220, 0.18);
    border: 1px solid rgba(100, 160, 220, 0.35);
    box-sizing: border-box;
    pointer-events: none;
    animation: ag-parent-pulse 1.2s ease-in-out infinite;
    z-index: 10;
}

/* Conflict flash overlay for grid cells */
@keyframes ag-conflict-flash {
    0%   { opacity: 0; }
    20%  { opacity: 1; }
    50%  { opacity: 0; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}
.ag-conflict-overlay {
    position: absolute;
    inset: 0;
    background: rgba(220, 50, 50, 0.45);
    pointer-events: none;
    animation: ag-conflict-flash 0.55s ease-in-out forwards;
    z-index: 10;
}

/* Neutralise tree hover/active styles that bleed into grid cells */
.ag-cell .tree-slot-inner:hover { background: transparent; }
.tree-slot.ag-cell.active-slot .tree-slot-inner { border: none; border-radius: 0; }

.tree-slot-inner:hover {
    background: #202020;
}

.tree-slot.active-slot .tree-slot-inner {
    border-color: #f5c542;
}

.tree-slot-name {
    font-size: 14px;
    color: #aaa;
    font-weight: 400;

    display: inline-flex;
    align-items: center;

    padding: 2px 4px;
    border-radius: 4px;
    user-select: none;
}

.tree-slot-name.collapsible {
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.tree-slot-name.collapsible:hover {
    background: #2a2a2a;
    color: #f5c542;
}

/* Price chip in tree rows */
.tree-slot-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.price-chip {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.price-chip-portrait {
    width: 12px;
    height: 12px;
    object-fit: contain;
    border-radius: 1px;
    flex-shrink: 0;
    opacity: 0.85;
}

.price-chip-value {
    font-size: 10px;
    color: #888;
    white-space: nowrap;
}

.price-chip-vendor {
    font-size: 9px;
    color: #888;
}

.price-chip-flea {
    font-size: 8px;
    font-weight: 700;
    color: #7a7a50;
}

/* Price overview panel */
.cost-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.cost-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.cost-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 12px;
    min-height: 26px;
    border-bottom: 1px solid #1e1e1e;
}

.cost-row-label {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.cost-item-name-wrap {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.cost-item-name {
    white-space: nowrap;
    color: #bbb;
}

.cost-item-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
    user-select: none;
    pointer-events: none;
}

.cost-trader-portrait {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 2px;
    user-select: none;
    flex-shrink: 0;
}

.cost-trader-text {
    font-size: 9px;
    color: #777;
    flex-shrink: 0;
}

.cost-flea-ts {
    font-size: 10px;
    font-weight: bold;
    color: #555;
    margin-top: 4px;
    user-select: none;
}

.cost-flea-refetch-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 10px;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    text-decoration: underline;
}

.cost-flea-refetch-btn:hover {
    color: #aaa;
}
.cost-flea-refetch-btn:disabled {
    cursor: default;
    text-decoration: none;
    color: #666;
}
.cost-flea-refetch-btn:disabled:hover {
    color: #666;
}

.cost-flea-icon {
    font-size: 8px;
    font-weight: 700;
    color: #7a7a50;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
}

.cost-price {
    font-family: "Bender", Arial, sans-serif;
    font-weight: 700;
    color: #c8a84b;
    font-size: 12px;
    white-space: nowrap;
    margin-left: 8px;
    flex-shrink: 0;
}

.cost-no-price {
    color: #444;
    font-size: 12px;
    margin-left: 8px;
    flex-shrink: 0;
}


.cost-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    margin-top: 6px;
    border-top: 1px solid #333;
    font-family: "Bender", Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #f5c542;
}

/* Trader levels section */

.trader-levels-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    user-select: none;
    font-family: "Bender", Arial, sans-serif;
    flex-shrink: 0;
}

.trader-levels-toggle-btn:hover .trader-levels-label {
    color: #aaa;
}

.trader-levels-label {
    font-size: 10px;
    color: #666;
    font-weight: 700;
    transition: color 0.15s;
}

.trader-levels-arrow {
    font-size: 8px;
    color: #666;
    transition: transform 0.2s;
    display: inline-block;
}

.trader-levels-toggle-btn.open .trader-levels-arrow {
    transform: rotate(180deg);
}

.trader-levels-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 8px;
    transition: height 0.2s ease, opacity 0.2s ease;
    overflow: hidden;
}

.trader-level-master-row .trader-level-name {
    color: #666;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.trader-levels-divider {
    border-top: 1px solid #1e1e1e;
    margin: 2px 0 2px;
}

.trader-level-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.trader-level-name {
    flex: 1;
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trader-level-btns {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.trader-level-btn {
    width: 20px;
    height: 20px;
    font-size: 10px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #444;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-family: "Bender", Arial, sans-serif;
    font-weight: 700;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.trader-level-btn:hover {
    border-color: #555;
    color: #888;
}

.trader-level-btn.active {
    background: #162016;
    border-color: #3a6a3a;
    color: #6abf6a;
}

.trader-level-btn.active:hover {
    border-color: #5a9a5a;
    color: #8cd48c;
}

.tree-slot-item .tree-slot-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.empty-slot {
    width: 48px;
    height: 48px;
    border: 1px dashed #444;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 18px;
}


.tree-slot-icon {
    position: relative;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

.tree-slot-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.slot-shortname {
    position: absolute;
    top: 2px;
    right: 2px;

    font-family: "Bender";
    font-weight: 400;
    font-size: 9px;

    text-align: right;
    line-height: 1.05;

    max-width: 52px;
    word-break: break-word;
    white-space: normal;

    color: #ccc;

    text-shadow:
        0 0 2px #000,
        0 0 4px #000;

    pointer-events: none;
    user-select: none;

    transform: scaleY(1.05);
    transform-origin: top right;
}

.attachment-icon-wrapper .slot-shortname,
.att-table-icon-preview .slot-shortname {
    font-family: "Bender";
    font-weight: 600;
    font-size: 10px;
    color: #aaa;

    text-shadow:
        0 0 2px #000,
        0 0 4px #000;

    opacity: 0;
}

.attachment-icon-wrapper:has(img.loaded) .slot-shortname,
.att-table-icon-preview:has(img.loaded) .slot-shortname {
    opacity: 1;
}

/* =========================
   ATTACHMENT PLACEHOLDER
========================= */

.att-table-close-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}
.att-table-close-btn:hover { color: #eee; }

.attachment-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px dashed #2a2a2a;
    border-radius: 8px;

    margin: 40px;

    color: #555;
    font-size: 16px;
    letter-spacing: 0.5px;

    opacity: 0.65;
    text-align: center;

    height: calc(100% - 80px);
}

.price-fetch-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #2a2a2a;
    border-radius: 8px;
    margin: 40px;
    color: #555;
    font-size: 13px;
    letter-spacing: 0.5px;
    opacity: 0.65;
    height: calc(100% - 80px);
}

.placeholder-inner {
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: center;
    user-select: none;
}

/* Gun image + name shown in the placeholder while modding.
   Shared by the static markup and build-manager's rebuilt placeholder. */
.gun-display-image {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
    margin-bottom: 16px;
}

.gun-display-name {
    font-size: 22px;
    font-weight: 700;
    color: #f5c542;
    margin-bottom: 8px;
}

.build-display-tags {
    margin-bottom: 8px;
}

.placeholder-sub {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-style: italic;
    color: #444;
    opacity: 0.8;
}

.attachment-row-installed {
    background: linear-gradient(
        90deg,
        rgba(255, 196, 0, 0.10),
        rgba(255, 196, 0, 0.03)
    );
    border-left: 3px solid #ffc400;
}

/* =========================
   ARM STAMINA SECTION
========================= */

.stamina-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #555;
    color: #777;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    margin-left: 2px;
    margin-right: 2px;
    vertical-align: middle;
    transition: border-color 0.15s, color 0.15s;
    user-select: none;
    flex-shrink: 0;
}

.stamina-info-btn:hover {
    border-color: #aaa;
    color: #ccc;
}

#lb-mode-builds #lb-builds-info-btn {
    border-color: #888;
    color: #aaa;
}

#lb-mode-builds #lb-builds-info-btn:hover {
    border-color: #ccc;
    color: #eee;
}

.stamina-info-btn.eed-warn-active {
    border-color: #c8962a;
    color: #c8962a;
}

.stamina-info-btn.eed-warn-active:hover {
    border-color: #e0aa3a;
    color: #e0aa3a;
}

.stamina-panel {
    margin-top: 8px;
    padding: 8px 10px;
    background: #141414;
    border: 1px solid #222;
    border-radius: 6px;
    overflow: hidden;
    transition: height 0.2s ease, opacity 0.2s ease, margin-top 0.2s ease, padding 0.2s ease, border-width 0.2s ease;
}

.stamina-disclaimer {
    font-size: 12px;
    color: #555;
    font-style: italic;
    margin-top: 5px;
    margin-bottom: 8px;
    line-height: 1.4;
}

.strength-control label {
    font-size: 13px;
    color: #888;
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
}

.strength-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.strength-input-row input[type="range"] {
    flex: 1;
    accent-color: #f5c542;
    cursor: pointer;
}

.strength-input-row input[type="number"] {
    width: 46px;
    background: #1a1a1a;
    border: 1px solid #444;
    color: #eee;
    padding: 3px 6px;
    border-radius: 4px;
    font-family: "Bender", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    appearance: textfield;
}

.strength-input-row input[type="number"]::-webkit-outer-spin-button,
.strength-input-row input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.input-suffix, .input-prefix {
    font-size: 13px;
    color: #888;
    font-weight: 700;
    flex-shrink: 0;
}

.eed-warning-icon {
    font-size: 14px;
    color: #c8962a;
    margin-left: 5px;
    cursor: pointer;
    flex-shrink: 0;
}

/* =========================
   STAT BARS
========================= */

.stat-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  position: relative;
  min-height: 20px;
}

.stat-bar-label {
  font-size: 14px;
  color: #aaa;
  font-weight: 700;
  width: 88px;
  flex-shrink: 0;
  transform: scaleY(1.05);
  transform-origin: center left;
  z-index: 1;
  position: relative;
}

.stat-bar-track {
  position: absolute;
  left: 88px;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  background: #2a2a2a;
  border-radius: 3px;
}

.stat-bar-fill {
  position: absolute;
  height: 100%;
  border-radius: 3px;
  transition: width 0.35s ease, background 0.15s ease;
}

.delta-bar {
  position: absolute;
  height: 100%;
  border-radius: 3px;
  transition: transform 0.25s ease, opacity 0.15s ease;
}

.ergo-bar,
.recoil-bar {
  background: #444;
}

.accuracy-bar {
  background: #444;
}

.stat-bar-value {
  font-size: 13px;
  font-weight: 700;
  color: #eee;
  white-space: nowrap;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  text-shadow: 0 0 3px #000;
  line-height: 1;
}

.stats-divider {
  border: none;
  border-top: 1px solid #222;
  margin: 8px 0;
}

.stat-label {
    color: #aaa;
    user-select: none;
}

.stat-row {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    white-space: nowrap;
}

.stat-row .stat-label {
    width: 130px;
    flex-shrink: 0;
}

/* Stat subsection (lower text stats) */
.stat-subsection {
    font-size: 13px;
}

.stat-subsection-cols {
    display: flex;
    gap: 16px;
}

.stat-subsection-cols .stat-col {
    flex: 1;
    min-width: 0;
}

/* =========================
   MODAL
========================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalFadeIn 0.15s ease;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-window {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 10px;
  min-width: 360px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  animation: modalSlideIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 40px);
}

@keyframes modalSlideIn {
  from { transform: translateY(-10px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0)     scale(1);    opacity: 1; }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px 18px;
  border-bottom: 1px solid #2a2a2a;
}

.modal-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #f5c542;
  user-select: none;
}

.modal-close-btn {
  background: none;
  border: none;
  color: #666;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  line-height: 1;
}

.modal-close-btn:hover {
  color: #eee;
  background: #2a2a2a;
}

.modal-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #444 #111;
}

.modal-body::-webkit-scrollbar {
  width: 10px;
}

.modal-body::-webkit-scrollbar-track {
  background: #111;
}

.modal-body::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 6px;
  border: 2px solid #111;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.modal-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #777;
  margin-bottom: 8px;
  user-select: none;
}

.modal-section {
  display: flex;
  flex-direction: column;
}

.modal-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.modal-divider {
  border: none;
  border-top: 1px solid #242424;
  margin: 0;
}

.modal-btn {
  background: #222;
  border: 1px solid #333;
  color: #ccc;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  font-family: "Bender", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.modal-btn:hover {
  background: #2a2a2a;
  color: #eee;
}

.modal-btn.primary {
  background: #2a2400;
  border-color: #f5c542;
  color: #f5c542;
}

.modal-btn.primary:hover {
  background: #3a3000;
}

.modal-btn.full-width {
  width: 100%;
  text-align: center;
}

/* --- Book-tab layout --- */

.modal-outer {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  max-height: calc(100vh - 40px);
}

.modal-outer .modal-window {
  min-height: 320px;
}

.modal-tab-rail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 20px;
  flex-shrink: 0;
}

.modal-tab {
  writing-mode: vertical-lr;
  background: #111;
  border: 1px solid #2a2a2a;
  border-right: none;
  border-radius: 6px 0 0 6px;
  color: #444;
  font-family: "Bender", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 10px 7px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  white-space: nowrap;
  user-select: none;
  line-height: 1;
}

.modal-tab:hover {
  background: #181818;
  color: #888;
  border-color: #333;
}

.modal-tab.active {
  background: #1a1a1a;
  border-color: #333;
  border-right: 2px solid #1a1a1a;
  color: #f5c542;
  margin-right: -1px;
  position: relative;
  z-index: 1;
}

.modal-tab-panel {
  display: none;
}

.modal-tab-panel.active {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  animation: tabPanelIn 0.18s ease;
}

@keyframes tabPanelIn {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* =========================
   MEDIA VIEWER
========================= */

.mv-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.mv-overlay.mv-visible {
  background: rgba(0, 0, 0, 0.88);
}

.mv-overlay.mv-panning,
.mv-overlay.mv-panning * {
  cursor: grabbing !important;
}

.mv-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8);
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  animation: mv-img-in 0.2s ease forwards;
}

@keyframes mv-img-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* =========================
   SAVED BUILDS
========================= */

#saved-builds-section {
    margin-bottom: 12px;
    padding-right: 10px;
}

#saved-builds-header {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #f5c542;
    padding: 4px 0 6px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

#saved-builds-count {
    font-size: 11px;
    color: #777;
    font-weight: 400;
    letter-spacing: 0;
}

.saved-build-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    background: #151515;
    border: 1px solid #222;
    border-radius: 6px;
    margin-bottom: 5px;
}

.saved-build-info {
    flex: 1;
    min-width: 0;
}

.saved-build-name {
    font-size: 14px;
    font-weight: 700;
    color: #eee;
    white-space: nowrap;
    overflow: hidden;
}

.marquee-text {
    display: inline-block;
    white-space: nowrap;
    will-change: transform, opacity;
}

.saved-build-gun {
    font-size: 11px;
    color: #666;
    margin-top: 2px;
    overflow: hidden;
}

/* Build tags */
.saved-build-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.build-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--tag-bg, #1e2a1e);
    border: 1px solid var(--tag-border, #2a4a2a);
    color: var(--tag-color, #6dbf6d);
    font-size: 10px;
    font-weight: 700;
    font-family: "Bender", Arial, sans-serif;
    padding: 1px 6px;
    border-radius: 10px;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.build-tag-chip[data-tag="meta"]     { --tag-bg: #2a2010; --tag-border: #f5c542; --tag-color: #f5c542; }
.build-tag-chip[data-tag="budget"]   { --tag-bg: #1e2a1e; --tag-border: #6dbf6d; --tag-color: #6dbf6d; }
.build-tag-chip[data-tag="cqb"]      { --tag-bg: #2a1a1a; --tag-border: #e05555; --tag-color: #e05555; }
.build-tag-chip[data-tag="sniper"]   { --tag-bg: #18222e; --tag-border: #5ba8e5; --tag-color: #5ba8e5; }
.build-tag-chip[data-tag="recoil"]   { --tag-bg: #221830; --tag-border: #b07ed6; --tag-color: #b07ed6; }
.build-tag-chip[data-tag="ergo"]     { --tag-bg: #2a1e12; --tag-border: #e08840; --tag-color: #e08840; }
.build-tag-chip[data-tag="pve"]      { --tag-bg: #182828; --tag-border: #5bc4c4; --tag-color: #5bc4c4; }
.build-tag-chip[data-tag="beginner"] { --tag-bg: #1a2820; --tag-border: #7ac4a0; --tag-color: #7ac4a0; }
.build-tag-chip[data-tag="hybrid"]   { --tag-bg: #1a1e28; --tag-border: #8899bb; --tag-color: #8899bb; }

button.build-tag-chip {
    cursor: pointer;
    background: #1a1a1a;
    border-color: #333;
    color: #666;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    line-height: 1;
    box-sizing: border-box;
    vertical-align: middle;
}

button.build-tag-chip:hover {
    background: var(--tag-bg, #1e2a1e);
    border-color: var(--tag-border, #6dbf6d);
    color: var(--tag-color, #6dbf6d);
}

button.build-tag-chip.active {
    background: var(--tag-bg, #1e2a1e);
    border-color: var(--tag-border, #6dbf6d);
    color: var(--tag-color, #6dbf6d);
}

.build-tag-remove {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    line-height: 1;
    opacity: 0.7;
}

.build-tag-remove:hover {
    opacity: 1;
}

.build-tag-input-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}

.build-tag-chips-edit {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.build-tag-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    margin-bottom: 6px;
    border-bottom: 1px solid #222;
}

.build-tag-filter-label {
    font-size: 11px;
    color: #555;
    white-space: nowrap;
}

.saved-build-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.has-new-comment {
    position: relative;
    overflow: visible !important;
}
.has-new-comment::after {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    width: 8px;
    height: 8px;
    background: #f5c542;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(245, 197, 66, 0.8);
    pointer-events: none;
    z-index: 10;
}

.saved-build-btn {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #aaa;
    padding: 3px 9px;
    border-radius: 4px;
    cursor: pointer;
    font-family: "Bender", Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.saved-build-btn:hover {
    background: #252525;
    color: #eee;
}

.saved-build-btn.load-btn:hover {
    color: #f5c542;
    border-color: #f5c542;
}

.saved-build-btn.delete-btn:hover {
    color: #f44336;
    border-color: #f44336;
}

.saved-build-btn.publish-btn:not(:disabled):hover {
    color: #4CAF50;
    border-color: #4CAF50;
}

.saved-build-btn.unlist-btn:hover {
    color: #f5c542;
    border-color: #f5c542;
}

/* Community build controls */
.cb-controls { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.cb-controls .cb-search-input { flex:1; font-size:13px; margin:0; }
.cb-controls .custom-select-wrapper { flex-shrink:0; width:138px; }
.cb-count-label { font-size:11px; color:#555; font-weight:400; letter-spacing:0; margin-left:auto; }

/* Community build cards */
#public-builds-list { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; align-items:start; }
#public-builds-list > div:not(.cb-card) { grid-column:1/-1; }
#my-community-list { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; align-items:start; }
#my-community-list > div:not(.cb-card) { grid-column:1/-1; }
.cb-card { background:#141414; border:1px solid #2a2a2a; border-radius:6px; overflow:hidden; display:flex; flex-direction:column; position:relative; }
.cb-card.featured { border-color:#f5c542; }
.cb-featured-label { position:absolute; top:0; right:0; background:#f5c542; color:#111; font-size:9px; font-weight:700; letter-spacing:0.8px; padding:3px 7px; border-bottom-left-radius:4px; text-transform:uppercase; }
.cb-gun-area { width:100%; background:#0f0f0f; display:flex; align-items:center; justify-content:center; padding:10px 12px; box-sizing:border-box; border-bottom:1px solid #1e1e1e; min-height:72px; }
.cb-gun-img { width:100%; max-height:64px; object-fit:contain; }
.cb-card-body { padding:8px 10px 6px; border-bottom:1px solid #1e1e1e; display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:6px; row-gap:3px; }
.cb-build-name { font-size:13px; font-weight:700; color:#f5c542; overflow:hidden; display:flex; align-items:center; gap:5px; min-width:0; }
.cb-author { display:flex; align-items:center; gap:5px; font-size:11px; color:#666; min-width:0; }
.cb-author-name { overflow:hidden; min-width:0; flex:1; white-space:nowrap; }
.cb-publish-date { font-size:10px; color:#666; white-space:nowrap; text-align:right; line-height:1; }
.cb-load-count { font-size:10px; color:#666; white-space:nowrap; text-align:right; line-height:1; }
.cb-card-tags { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:3px; padding-top:2px; }
#cb-tag-filter-row:empty { display:none !important; }
.cb-avatar { width:14px; height:14px; border-radius:50%; object-fit:cover; background:#2a2a2a; flex-shrink:0; }
.cb-stats { display:grid; grid-template-columns:1fr 1fr; background:#0f0f0f; }
.cb-stat { text-align:center; padding:5px 4px; border-right:1px solid #1e1e1e; border-bottom:1px solid #1e1e1e; }
.cb-stat:nth-child(even) { border-right:none; }
.cb-stat-label { font-size:9px; color:#565656; text-transform:uppercase; letter-spacing:0.3px; }
.cb-stat-val { font-size:12px; color:#c0c0c0; font-weight:600; margin-top:2px; }
.cb-stat-val.positive { color:#4CAF50; }
.cb-stat-val.negative { color:#f44336; }
.cb-price { color:#c8a84b; }
.cb-stats-note { font-size:9px; color:#444; text-align:center; padding:3px 8px; border-bottom:1px solid #1e1e1e; }
.cb-card-footer { display:flex; align-items:center; justify-content:flex-end; gap:6px; padding:5px 8px; margin-top:auto; border-top:1px solid #1e1e1e; }
.cb-card-footer .cb-rating { margin-right:auto; }

/* Community build comments */
.cb-comments-section {
    border-top: 1px solid #222;
    padding: 8px 10px 10px;
    background: #0f0f0f;
}

.cb-comments-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.cb-comment {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    padding: 6px 8px;
}

.cb-comment-author {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
}

.cb-comment-author-name {
    font-size: 11px;
    font-weight: 600;
    color: #999;
}

.cb-comment-date {
    font-size: 10px;
    color: #555;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.cb-comment-content {
    font-size: 12px;
    color: #ccc;
    line-height: 1.5;
    word-break: break-word;
}

.cb-comment-delete-btn {
    background: none;
    border: none;
    color: #f44336;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    line-height: 1;
    opacity: 0.6;
}

.cb-comment-delete-btn:hover { opacity: 1; }

.cb-no-comments, .cb-comments-loading, .cb-comments-error {
    font-size: 12px;
    color: #555;
    font-style: italic;
    padding: 4px 0;
}

.cb-comment-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cb-comment-textarea {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    color: #ccc;
    font-size: 12px;
    font-family: inherit;
    padding: 6px 8px;
    resize: vertical;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cb-comment-form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.cb-comment-charcount {
    font-size: 11px;
    color: #555;
}

.cb-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #555;
    color: #777;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    cursor: default;
    vertical-align: middle;
    margin-left: 5px;
    flex-shrink: 0;
    user-select: none;
}
.cb-info-icon:hover { border-color: #999; color: #bbb; }

.modal-divider {
    border: none;
    border-top: 1px solid #222;
    margin: 12px 0;
}

#import-build-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
}

/* =========================
   PANEL LOADING FLASH
========================= */

@keyframes panelLoadingSweep {
  0%   { transform: translateX(-100%); }
  25%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

.panel-loading-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}

.panel-loading-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(180, 180, 180, 0) 0%,
    rgba(180, 180, 180, 0.12) 50%,
    rgba(180, 180, 180, 0) 100%
  );
  animation: panelLoadingSweep 1.5s ease-out infinite;
}

/* =========================
   IMAGE PLACEHOLDER SHIMMER
========================= */

@keyframes eft-img-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.gun-card img:not(.loaded),
.tree-slot-icon img:not(.loaded),
.attachment-icon:not(.loaded),
.att-table-gun-img:not(.loaded),
.cb-gun-img:not(.loaded),
.cb-avatar:not(.loaded),
.cost-item-icon:not(.loaded),
.cost-trader-portrait:not(.loaded),
.price-chip-portrait:not(.loaded) {
  background: linear-gradient(
    90deg,
    #181818 25%,
    #242424 50%,
    #181818 75%
  );
  background-size: 600px 100%;
  animation: eft-img-shimmer 1.4s linear infinite;
}

/* =========================
   NEWS PAGE
========================= */

#news-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

#news-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

#news-overlay {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  min-width: 380px;
  max-width: 720px;
  background: #141414;
  border-left: 1px solid #2a2a2a;
  box-shadow: -12px 0 48px rgba(0, 0, 0, 0.7);
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

#news-overlay.visible {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.news-header {
  flex-shrink: 0;
  background: #1a1a1a;
  border-bottom: 1px solid #2a2a2a;
  padding: 0 20px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.news-header-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #f5c542;
  user-select: none;
}

.news-close-btn {
  background: none;
  border: none;
  color: #888;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
  margin-left: auto;
  transition: color 0.15s;
}

.news-close-btn:hover { color: #eee; }

.news-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 28px 24px;
  scrollbar-width: thin;
  scrollbar-color: #444 #111;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

@keyframes news-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes news-in-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes news-out-left {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-40px); }
}
@keyframes news-out-right {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(40px); }
}
.news-page { animation: news-in-right 0.22s cubic-bezier(0.4,0,0.2,1) both; }
.news-page--back { animation: news-in-left 0.22s cubic-bezier(0.4,0,0.2,1) both; }
.news-page--exit-left { animation: news-out-left 0.16s cubic-bezier(0.4,0,0.2,1) both; }
.news-page--exit-right { animation: news-out-right 0.16s cubic-bezier(0.4,0,0.2,1) both; }

.news-body::-webkit-scrollbar { width: 10px; }
.news-body::-webkit-scrollbar-track { background: #111; }
.news-body::-webkit-scrollbar-thumb {
  background: #3a3a3a;
  border-radius: 6px;
  border: 2px solid #111;
}
.news-body::-webkit-scrollbar-thumb:hover { background: #555; }

/* Post list grid */
.news-post-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Cards follow the toast design language: squared corners,
   hairline border, top accent bar. */
.news-post-card {
  --news-accent: #f5c542;
  --news-accent-hover: #ffd966;
  background: #1e1e1e;
  border: 1px solid rgba(255,255,255,0.07);
  border-top: 4px solid var(--news-accent);
  border-radius: 3px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.45);
  padding: 18px 20px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  min-height: 90px;
  overflow: hidden;
}

.news-post-card:hover {
  background: #232323;
  border-color: rgba(255,255,255,0.12);
  border-top-color: var(--news-accent-hover);
  transform: translateY(-2px);
}

.news-post-card:active {
  transform: translateY(0);
  transition: transform 0.08s ease;
}

.news-card-media-wrap {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.news-card-media-wrap::before,
.news-card-media-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 65%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Fade colors must match the card's resting/hover backgrounds */
.news-card-media-wrap::before {
  background: linear-gradient(to right, #1e1e1e, transparent);
}

.news-card-media-wrap::after {
  background: linear-gradient(to right, #232323, transparent);
  opacity: 0;
  transition: opacity 0.2s;
}

.news-post-card:hover .news-card-media-wrap::after {
  opacity: 1;
  transition: opacity 0.08s;
}

.news-card-media {
  height: 100%;
  width: auto;
  object-fit: cover;
  display: block;
  border-radius: 0;
  margin: 0;
}

.news-card-logo-bg {
  width: 38%;
  background: #0d0d0d;
  justify-content: center;
}

.news-card-logo-bg img {
  height: 55px;
  width: auto;
  display: block;
}

.news-card-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 72%;
}

.news-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #e8e8e8;
  letter-spacing: 0.3px;
}

.news-card-date {
  font-size: 11px;
  color: #555;
  letter-spacing: 1px;
}

.news-card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.news-card-tag {
  font-size: 10px;
  font-weight: 700;
  color: #f5c542;
  border: 1px solid #3a3000;
  background: #1f1900;
  border-radius: 3px;
  padding: 1px 7px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: "Bender", Arial, sans-serif;
}
.news-card-tag--minor-update {
  color: #81c784;
  border-color: #1a3d1c;
  background: #0d1f0e;
}
.news-card-tag--small-patch {
  color: #29b6f6;
  border-color: #0d3a4f;
  background: #061e2a;
}
.news-card-tag--major-update {
  color: #ce93d8;
  border-color: #3b1a4a;
  background: #1e0d27;
}
.news-card-tag--dev {
  color: #ef5350;
  border-color: #4f1010;
  background: #2a0808;
}
.news-post-card--dev {
  --news-accent: #ef5350;
  --news-accent-hover: #ef9a9a;
}
.news-card-tag--news {
  color: #29b6f6;
  border-color: #0d3a4f;
  background: #061e2a;
}
.news-post-card--news {
  --news-accent: #29b6f6;
  --news-accent-hover: #64d8ff;
}

.news-card-summary {
  font-size: 13px;
  color: #777;
  line-height: 1.6;
  margin-top: 4px;
}

.news-empty,
.news-loading,
.news-error {
  text-align: center;
  color: #444;
  font-size: 14px;
  padding: 70px 20px;
  letter-spacing: 1px;
}

.news-error {
  border: 1px dashed #2a2a2a;
  border-radius: 8px;
  color: #666;
}

/* Single post view */
.news-post-view {
  max-width: 760px;
  margin: 0 auto;
}

.news-post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.news-post-meta-date {
  font-size: 12px;
  color: #555;
  letter-spacing: 1px;
}

.news-back-btn {
  background: none;
  border: 1px solid #2a2a2a;
  color: #888;
  font-family: "Bender", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 5px 14px;
  border-radius: 4px;
  letter-spacing: 1px;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  display: inline-block;
}

.news-back-btn:hover {
  color: #f5c542;
  background: #1a1a1a;
  border-color: #444;
}

.news-back-btn:active {
  transform: scale(0.95);
}

/* Markdown content styling */
.news-post-content {
  color: #c8c8c8;
  font-size: 15px;
  line-height: 1.8;
}

.news-post-content h1 {
  font-size: 24px;
  font-weight: 700;
  color: #f5c542;
  letter-spacing: 1px;
  margin: 0 0 10px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #222;
}

.news-post-content h2 {
  font-size: 18px;
  font-weight: 700;
  color: #e8e8e8;
  margin: 30px 0 12px 0;
  padding-left: 12px;
  border-left: 3px solid #f5c542;
}

.news-post-content h3 {
  font-size: 15px;
  font-weight: 700;
  color: #ddd;
  margin: 22px 0 8px 0;
}

.news-post-content h4,
.news-post-content h5,
.news-post-content h6 {
  font-size: 13px;
  font-weight: 700;
  color: #bbb;
  margin: 16px 0 6px 0;
}

.news-post-content p { margin: 0 0 14px 0; }

.news-post-content a {
  color: #5b9bd5;
  text-decoration: none;
}

.news-post-content a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.news-post-content ul,
.news-post-content ol {
  margin: 0 0 14px 0;
  padding-left: 26px;
}

.news-post-content li { margin-bottom: 5px; }

.news-post-content code {
  background: #1e1e1e;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 1px 6px;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 13px;
  color: #e0c080;
}

.news-post-content pre {
  background: #161616;
  border: 1px solid #222;
  border-radius: 6px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 0 0 16px 0;
}

.news-post-content pre code {
  background: none;
  border: none;
  padding: 0;
  color: #bbb;
  font-size: 13px;
}

.news-post-content blockquote {
  margin: 0 0 14px 0;
  padding: 10px 16px;
  border-left: 3px solid #3a3a3a;
  background: #161616;
  color: #888;
  border-radius: 0 6px 6px 0;
}

.news-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 14px auto;
}

.news-post-content video {
  max-width: 100%;
  border-radius: 6px;
  display: block;
  margin: 14px 0;
}

.news-title-hero {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  margin: 0 0 24px 0;
  background: #0d0d0d;
  max-height: 1000px;
}
.news-title-hero video,
.news-title-hero img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
}
.news-title-hero--logo img {
  width: auto;
  height: 180px;
  max-width: 28%;
  margin: 0 auto;
  object-fit: contain;
}
.news-title-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(transparent, #141414);
  z-index: 1;
  pointer-events: none;
}
.news-title-overlay {
  padding: 0 20px 16px;
  background: none;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  z-index: 2;
}
.news-title-overlay h1 {
  margin: 0;
  padding: 0;
  border: none;
  color: #f5c542;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}

.news-post-content hr {
  border: none;
  border-top: 1px solid #222;
  margin: 24px 0;
}

.news-post-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 13px;
}

.news-post-content th {
  background: #1a1a1a;
  color: #f5c542;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #2a2a2a;
  font-weight: 700;
}

.news-post-content td {
  padding: 8px 12px;
  border-bottom: 1px solid #1c1c1c;
}

.news-post-content strong { color: #e8e8e8; }
.news-post-content em    { color: #b8b8b8; }

/* News responsive overrides */
@media (max-width: 640px) {
  #news-overlay {
    width: 100%;
    min-width: unset;
    max-width: unset;
  }

  .news-body {
    padding: 16px 14px;
  }

  .news-post-content h1 { font-size: 20px; }
  .news-post-content h2 { font-size: 16px; }

  .news-header {
    padding: 0 14px;
  }
}

/* =========================
   LEADERBOARD PANEL
========================= */

#leaderboard-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

#leaderboard-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

#leaderboard-overlay {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: 50%;
  min-width: 380px;
  max-width: 720px;
  background: #111;
  border-left: 1px solid #2a2a2a;
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

#leaderboard-overlay.visible {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.leaderboard-header {
  flex-shrink: 0;
  background: #1a1a1a;
  border-bottom: 1px solid #2a2a2a;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 14px;
}

.leaderboard-header-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #f5c542;
  flex: 1;
  user-select: none;
}

.leaderboard-close-btn {
  background: none;
  border: none;
  color: #888;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
  transition: color 0.15s;
}

.leaderboard-close-btn:hover { color: #eee; }

.leaderboard-controls {
  flex-shrink: 0;
  padding: 12px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid #1e1e1e;
  padding-bottom: 12px;
}

.lb-toggle-row {
  display: flex;
  gap: 6px;
  align-items: center;
}


.lb-gun-row {
  margin-top: 8px;
}

.lb-gun-search {
  position: relative;
}

.lb-gun-input {
  width: 100%;
  box-sizing: border-box;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 999px;
  color: #eee;
  font-family: "Bender", Arial, sans-serif;
  font-size: 13px;
  padding: 5px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lb-gun-input::placeholder {
  color: #666;
}

.lb-gun-dropdown {
  scrollbar-width: thin;
  scrollbar-color: #444 #111;
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 6px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 200;
}

.lb-gun-dropdown.open {
  display: block;
}

.lb-gun-dropdown::-webkit-scrollbar { width: 6px; }
.lb-gun-dropdown::-webkit-scrollbar-track { background: #111; }
.lb-gun-dropdown::-webkit-scrollbar-thumb { background: #444; border-radius: 6px; border: 1px solid #111; }

.lb-gun-option {
  padding: 7px 14px;
  font-size: 13px;
  color: #ccc;
  cursor: pointer;
  font-family: "Bender", Arial, sans-serif;
}

.lb-gun-option:hover,
.lb-gun-option.selected {
  background: #252525;
  color: #eee;
}

.lb-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.lb-select-wrap {
  position: relative;
  width: 148px;
  flex-shrink: 0;
}

#lb-period-select,
#lb-sort-select,
#lb-category-select {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.lb-select-wrap .custom-select-wrapper {
  width: 100%;
}

.lb-cap-label {
  font-size: 11px;
  color: #555;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.leaderboard-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: #444 #111;
}

.leaderboard-body::-webkit-scrollbar { width: 6px; }
.leaderboard-body::-webkit-scrollbar-track { background: #111; }
.leaderboard-body::-webkit-scrollbar-thumb { background: #444; border-radius: 6px; border: 1px solid #111; }

.lb-loading,
.lb-empty {
  padding: 40px 20px;
  text-align: center;
  color: #555;
  font-size: 13px;
}

.lb-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

@keyframes lb-entry-in {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

.lb-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid #1a1a1a;
  min-height: 52px;
  transition: background 0.12s;
  animation: lb-entry-in 0.2s ease both;
  animation-delay: calc(var(--lb-i, 0) * 38ms);
}

.lb-entry-build {
  min-height: 10px;
  cursor: pointer;
}

.lb-entry-att {
  height: 52px;
  overflow: hidden;
}

.lb-entry-build:hover { background: #181818; }

.lb-rank {
  font-size: 13px;
  font-weight: 700;
  color: #555;
  min-width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.lb-rank-gold   { color: #c9a227; }
.lb-rank-silver { color: #9e9e9e; }
.lb-rank-bronze { color: #a0522d; }

.lb-build-img {
  width: 220px;
  height: 72px;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: 2px;
}

.lb-build-img-placeholder {
  width: 220px;
  height: 72px;
  flex-shrink: 0;
  margin-right: 2px;
}

.lb-att-icon {
  width: 36px;
  height: 36px;
  max-width: 36px;
  max-height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  background: #1a1a1a;
}

.lb-att-icon-placeholder {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: #1a1a1a;
}

.lb-entry-info {
  flex: 1;
  min-width: 0;
}

.lb-att-name {
  font-size: 13px;
  color: #ddd;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
}

.lb-build-name {
  font-size: 13px;
  color: #f5c542;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}

.lb-build-meta {
  font-size: 11px;
  color: #666;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-build-author {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}

.lb-author-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.lb-build-author span {
  font-size: 11px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-vote-count {
  font-size: 12px;
  color: #888;
  font-weight: 600;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.lb-vote-icon {
  object-fit: contain;
  opacity: 0.75;
}

.lb-vote-icon-like {
  width: 17px;
  height: 17px;
}

.lb-vote-icon-dislike {
  width: 13px;
  height: 13px;
}

@media (max-width: 640px) {
  #leaderboard-overlay {
    width: 100%;
    min-width: unset;
    max-width: unset;
  }
  .leaderboard-header { padding: 0 14px; }
  .leaderboard-controls { padding: 10px 12px 10px; }
  .lb-entry { padding: 10px 12px; }
}

/* =============================================
   STAT TRACKER PANEL
============================================= */

#tracker-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
#tracker-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

#tracker-overlay {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: 72%;
  min-width: 620px;
  max-width: 1100px;
  background: #111;
  border-left: 1px solid #2a2a2a;
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
#tracker-overlay.visible {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.tracker-header {
  flex-shrink: 0;
  background: #1a1a1a;
  border-bottom: 1px solid #2a2a2a;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 14px;
}
.tracker-header-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #f5c542;
  flex: 1;
  user-select: none;
}
.tracker-close-btn {
  background: none;
  border: none;
  color: #888;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
  transition: color 0.15s;
}
.tracker-close-btn:hover { color: #eee; }
.tracker-last-synced {
  font-size: 11px;
  color: #666;
  white-space: nowrap;
  user-select: none;
}

.tracker-controls {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #151515;
  border-bottom: 1px solid #222;
}
.tracker-search {
  flex: 1;
  min-width: 0;
  background: #0e0e0e;
  border: 1px solid #2e2e2e;
  color: #ddd;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 3px;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tracker-search::placeholder { color: #444; }
.tracker-type-filter {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.tracker-filter-btn {
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  color: #777;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s;
  font-family: inherit;
}
.tracker-filter-btn:hover { border-color: #555; color: #bbb; }
.tracker-filter-btn.active { background: #252525; border-color: #f5c542; color: #f5c542; }

.tracker-columns {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow-x: auto;
}
.tracker-col {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #1e1e1e;
  overflow: hidden;
}
.tracker-col:last-child { border-right: none; }
.tracker-col-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  border-bottom: 1px solid;
}
.tracker-col-new .tracker-col-header  { background: #0d1420; color: #64b5f6; border-bottom-color: #17294d; }
.tracker-col-buff .tracker-col-header { background: #0d1a0d; color: #81c784; border-bottom-color: #173317; }
.tracker-col-nerf .tracker-col-header { background: #1a0d0d; color: #ef9a9a; border-bottom-color: #331717; }
.tracker-col-mixed .tracker-col-header { background: #1a1700; color: #f5c542; border-bottom-color: #333000; }
.tracker-col-count {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 10px;
  min-width: 18px;
  text-align: center;
}
.tracker-col-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}
.tracker-col-body::-webkit-scrollbar { width: 4px; }
.tracker-col-body::-webkit-scrollbar-track { background: transparent; }
.tracker-col-body::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }

.tracker-empty {
  padding: 24px 12px;
  text-align: center;
  color: #444;
  font-size: 12px;
}

.tracker-no-change-hint {
  padding: 32px 24px;
  text-align: center;
  color: #666;
  font-size: 12px;
  line-height: 1.7;
  flex-shrink: 0;
}

.tracker-date-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #3a3a3a;
  padding: 8px 10px 3px;
}

@keyframes tr-entry-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

.tracker-entry {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid #181818;
  transition: background 0.12s;
  animation: tr-entry-in 0.2s ease both;
  animation-delay: calc(var(--tr-i, 0) * 18ms);
}
.tracker-entry:hover { background: #181818; }
.tracker-item-icon {
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  background: #1a1a1a;
  margin-top: 1px;
}
.tracker-item-icon-placeholder {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: #1a1a1a;
}
.tracker-entry-info {
  flex: 1;
  min-width: 0;
}
.tracker-item-name {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #ddd;
  font-weight: 500;
  margin-bottom: 2px;
}
.tracker-item-name-wrap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.tracker-item-name-wrap .marquee-text {
  white-space: nowrap;
}
.tracker-stat-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 2px;
  flex-wrap: wrap;
}
.tracker-stat-label {
  font-size: 10px;
  color: #555;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.tracker-stat-change {
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.tracker-stat-up   { color: #81c784; }
.tracker-stat-down { color: #ef9a9a; }
.tracker-stat-pct {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.8;
}
.tracker-new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border-radius: 50%;
  background: rgba(100, 181, 246, 0.15);
  color: #64b5f6;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

@media (max-width: 640px) {
  #tracker-overlay {
    width: 100%;
    min-width: unset;
    max-width: unset;
  }
  .tracker-controls { padding: 6px 10px; flex-wrap: wrap; }
  .tracker-type-filter { width: 100%; }
  .tracker-filter-btn { flex: 1; }
  .tracker-col { min-width: 160px; }
}

/* =============================================
   AMMO TABLE OVERLAY
============================================= */

#ammo-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
#ammo-backdrop.visible { opacity: 1; pointer-events: auto; }

#ammo-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(1320px, 98vw);
  background: #1a1a1a;
  z-index: 1101;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #3a3a3a #1a1a1a;
  --ammo-hdr-h: 46px;
}
#ammo-overlay::-webkit-scrollbar { width: 6px; }
#ammo-overlay::-webkit-scrollbar-track { background: #1a1a1a; }
#ammo-overlay::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 3px; }
#ammo-overlay::-webkit-scrollbar-thumb:hover { background: #555; }
#ammo-overlay.visible { transform: translateX(0); opacity: 1; }

.ammo-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #333;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: var(--ammo-hdr-h, 46px);
  box-sizing: border-box;
  background: #1a1a1a;
  z-index: 5;
}
.ammo-panel-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #f5c542;
  text-transform: uppercase;
}
.ammo-close-btn {
  background: none; border: none; color: #aaa; font-size: 18px;
  cursor: pointer; line-height: 1; padding: 4px 6px;
}
.ammo-close-btn:hover { color: #fff; }

.ammo-panel-body {
  flex: 1;
  padding: 14px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Disclaimer ---- */
.ammo-disclaimer {
  font-size: 11px; color: #777; line-height: 1.5;
  background: #1c1c1c; border: 1px solid #2e2e2e; border-radius: 4px;
  padding: 8px 12px;
}
.ammo-disclaimer-link { color: #a08828; text-decoration: underline; }
.ammo-disclaimer-link:hover { color: #f5c542; }
.ammo-legend-eff { font-weight: 700; border-radius: 3px; padding: 2px 8px !important; }

/* ---- Caliber nav ---- */
.ammo-nav-title { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #ccc; text-transform: uppercase; margin-bottom: 8px; }
.ammo-cal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ammo-cal-type-label {
  grid-column: 1 / -1; font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
  color: #666; text-transform: uppercase; padding: 6px 2px 2px; margin-top: 2px;
}
.ammo-cal-type-label:first-child { padding-top: 0; margin-top: 0; }
.ammo-cal-chip {
  background: #252525; border: 1px solid #383838; border-radius: 3px;
  color: #999; font-size: 11px; font-family: inherit; padding: 4px 8px;
  cursor: pointer; white-space: nowrap; line-height: 1.4; text-align: left;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ammo-cal-chip:hover { background: #2e2e2e; border-color: #f5c542; color: #f5c542; }

/* ---- Denotation notes ---- */
.ammo-notes { font-size: 11px; color: #888; }

/* ---- Controls ---- */
.ammo-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ammo-search {
  flex: 1; min-width: 160px;
  background: #2a2a2a; border: 1px solid #444; border-radius: 3px;
  color: #eee; font-size: 12px; padding: 6px 10px; outline: none;
  font-family: inherit;
}
.ammo-search:focus { border-color: #f5c542; }

/* ---- Main table ---- */
/* No overflow-x here: the drawer is wide enough to avoid horizontal scroll,
   and keeping overflow-x on this container would block position:sticky on th
   (CSS forces overflow-y:auto too, making this a scroll ancestor). */
.ammo-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ammo-th {
  position: sticky; top: var(--ammo-hdr-h, 0); background: #1e1e1e; z-index: 2;
  padding: 6px 8px; text-align: center; font-weight: 700; font-size: 11px;
  letter-spacing: 0.5px; color: #bbb; border-bottom: 2px solid #333;
  white-space: nowrap; text-transform: uppercase; user-select: none;
}
.ammo-th-sortable { cursor: pointer; }
.ammo-th-sortable:hover { color: #f5c542; }
.ammo-sort-asc::after  { content: ' ↑'; color: #f5c542; }
.ammo-sort-desc::after { content: ' ↓'; color: #f5c542; }
.ammo-th.ammo-col-name { text-align: left; }

.ammo-caliber-row { scroll-margin-top: calc(var(--ammo-hdr-h, 46px) + 32px); }
.ammo-caliber-row td {
  background: #242424;
  font-size: 11px; font-weight: 700; color: #f5c542;
  letter-spacing: 0.8px; text-transform: uppercase;
  padding: 6px 8px;
  border-top: 1px solid #3a3a3a;
}
.ammo-data-row { height: 56px; }
.ammo-data-row:hover { background: #252525; }
.ammo-td { padding: 4px 6px; text-align: center; border-bottom: 1px solid #252525; color: #ddd; }
.ammo-td.ammo-col-name { text-align: left; white-space: nowrap; color: #eee; }
.ammo-th.ammo-col-icon { width: 54px; padding: 0; }
.ammo-td.ammo-col-icon { padding: 3px 3px; width: 54px; }
.ammo-icon-wrapper {
    position: relative;
    width: 48px;
    height: 48px;
    display: inline-block;
    flex-shrink: 0;
}
.ammo-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* In-game style shortname: top-right, light text with a hard black outline */
.ammo-icon-wrapper .slot-shortname {
    top: 1px;
    right: 2px;
    left: auto;
    max-width: 46px;
    text-align: right;
    transform: none;
    transform-origin: top right;
    font-family: "Bender", sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.2px;
    color: #d6d6d6;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000,
         0    0   2px #000;
}
.ammo-col-num { min-width: 32px; }
.ammo-col-delta { min-width: 38px; }
.ammo-col-class { min-width: 24px; font-weight: 700; }
/* Effectiveness columns carry text labels - keep them tight so all 6 fit */
.ammo-th.ammo-col-class { padding: 6px 3px; }
.ammo-td.ammo-col-class { padding: 4px 3px; }

/* ---- Delta colors ---- */
.delta-pos { color: #6dcf6d !important; }
.delta-neg { color: #e06060 !important; }

/* ---- Superscripts ---- */
.ammo-sup { font-size: 9px; font-weight: 700; margin-left: 2px; vertical-align: super; }
.ammo-sup-sub   { color: #7ecfed; }
.ammo-sup-tracer { color: #f5a623; }

/* ---- Effectiveness cell tiers (in-game scale) ---- */
.ammo-eff { font-weight: 700; font-size: 10px; white-space: nowrap; text-align: center; }
.eff-vhigh { background: #1a3d1a; color: #5de85d; }
.eff-high  { background: #1c3020; color: #4caf6a; }
.eff-med   { background: #332a08; color: #c9a720; }
.eff-low   { background: #3a1f0a; color: #d4854a; }
.eff-vlow  { background: #3d1515; color: #e06060; }

/* ---- Legend eff cell colors match table ---- */
.ammo-legend-eff.eff-vhigh { color: #5de85d; background: #1a3d1a; }
.ammo-legend-eff.eff-high  { color: #4caf6a; background: #1c3020; }
.ammo-legend-eff.eff-med   { color: #c9a720; background: #332a08; }
.ammo-legend-eff.eff-low   { color: #d4854a; background: #3a1f0a; }
.ammo-legend-eff.eff-vlow  { color: #e06060; background: #3d1515; }

/* ---- States ---- */
.ammo-loading, .ammo-error, .ammo-no-results {
  padding: 40px; text-align: center; color: #666; font-size: 13px;
}

@media (max-width: 640px) {
  #ammo-overlay { width: 100%; min-width: unset; }
  .ammo-cal-chip { font-size: 10px; padding: 3px 6px; }
  .ammo-cal-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: the table is wider than the viewport. Let the whole drawer scroll
   both ways - vertical swipe to read the list, horizontal swipe to reach the far
   columns - by making the overlay itself the both-axis scroller (like the
   attachment table's panel). The column header stays pinned vertically (sticky
   top) while scrolling with its columns horizontally. The panel header is pinned
   to the top-left so the title and close button never scroll off-screen.
   Desktop keeps overflow-x hidden, so none of this affects it. */
body[data-mobile="true"] #ammo-overlay { overflow: auto; }
body[data-mobile="true"] .ammo-panel-header { left: 0; }
body[data-mobile="true"] .ammo-table {
  width: auto;
  min-width: 100%;
}

/* =============================================
   MOBILE LAYOUT
   Uses body[data-mobile="true"] (set by JS via
   isMobileLayout()) so it applies on ALL touch
   devices regardless of screen orientation.
   Portrait-specific cosmetic rules use a media
   query as well.
============================================= */

/* --- Core single-panel layout (all touch devices, portrait AND landscape) --- */

/* Portrait: whole panel scrolls as one column; landscape: individual grid cells scroll */
body[data-mobile="true"] .left-panel { width: 100% !important; overflow-y: auto; overflow-x: hidden; }
body[data-mobile="true"] .panel-resizer { display: none !important; }

/* Profile exists to attribute published builds/comments - neither is possible on mobile */
body[data-mobile="true"] #profile-nav-btn { display: none; }
body[data-mobile="true"] .header-nav-btn:nth-last-child(2) { border-right: none; }

/* Portrait: single-column, full-panel scroll */
body[data-mobile="true"] #left-build-area {
  flex: none;
  min-height: 0;
}
body[data-mobile="true"] #slots {
  overflow: visible;
  flex: none;
}
body[data-mobile="true"] #price-overview {
  overflow: visible;
  flex: none;
}

/* Landscape: two-column grid (stats left | slot tree right),
   both columns scroll independently within the panel height. */
@media (orientation: landscape) {
  body[data-mobile="true"] .left-panel { overflow: hidden; }
  body[data-mobile="true"] #left-build-area {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr;
  }
  body[data-mobile="true"] #build-controls { grid-column: 1 / -1; }
  body[data-mobile="true"] #view-toggle    { grid-column: 1 / -1; }
  body[data-mobile="true"] #stats {
    grid-column: 1;
    grid-row: 3;
    overflow-y: auto;
    min-height: 0;
    padding-right: 8px;
    border-right: 1px solid #1e1e1e;
  }
  body[data-mobile="true"] #slots {
    grid-column: 2;
    grid-row: 3;
    overflow-y: auto;
    min-height: 0;
    padding-left: 8px;
    flex: none;
    overflow-x: hidden;
  }
  body[data-mobile="true"] #price-overview {
    grid-column: 1 / -1;
    grid-row: 3;
    overflow-y: auto;
    min-height: 0;
    flex: none;
  }

}

body[data-mobile="true"] .right-panel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: 25%;
  z-index: 150;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: #111;
  padding: 0 12px 16px;
  contain: none; /* remove paint containment so fixed children use the viewport */
  overflow-y: auto;
  overflow-x: auto;
}

body[data-mobile="true"].mobile-right-open .right-panel { transform: translateY(0); }
body[data-mobile="true"] .container:not(.no-gun) .right-panel { background-color: #111; }

/* Dim backdrop behind the open drawer */
#mobile-panel-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 149;
}
body[data-mobile="true"].mobile-right-open #mobile-panel-backdrop { display: block; }

/* Drag-handle pip: hidden by default, shown as sticky bar on mobile */
.mobile-drag-handle { display: none; }
body[data-mobile="true"] .mobile-drag-handle {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0 8px;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 -12px;
  z-index: 2;
  background: #111;
  flex-shrink: 0;
}
body[data-mobile="true"] .mobile-drag-handle::after {
  content: "";
  width: 36px;
  height: 4px;
  background: #333;
  border-radius: 2px;
}

/* Back button hidden on mobile - swipe down closes the drawer instead */
body[data-mobile="true"] #mobile-drawer-back { display: none; }

/* Scrollbars: hidden on touch */
body[data-mobile="true"] .right-panel,
body[data-mobile="true"] .left-panel,
body[data-mobile="true"] #slots,
body[data-mobile="true"] #stats,
body[data-mobile="true"] #weapon-selector,
body[data-mobile="true"] #price-overview { scrollbar-width: none; }
body[data-mobile="true"] .right-panel::-webkit-scrollbar,
body[data-mobile="true"] .left-panel::-webkit-scrollbar,
body[data-mobile="true"] #slots::-webkit-scrollbar,
body[data-mobile="true"] #stats::-webkit-scrollbar { display: none; }

/* Swipe-to-remove: reveal strip */
body[data-mobile="true"] .swipe-removable {
  position: relative;
  overflow: hidden;
  transition: transform 0.12s ease;
}
body[data-mobile="true"] .swipe-removable::after {
  content: "Remove";
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 80px;
  background: #c0392b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  transform: translateX(100%);
  transition: transform 0.12s ease;
  pointer-events: none;
}
body[data-mobile="true"] .swipe-removable.swipe-revealing::after { transform: translateX(0); }

/* Modals: centered, constrained to screen on all mobile orientations */
body[data-mobile="true"] .modal-window {
  min-width: unset;
  max-width: calc(100vw - 32px) !important;
  max-height: 85vh;
  overflow-y: auto;
}

/* Tabbed modals: stack vertically on mobile (tab rail becomes top bar) */
body[data-mobile="true"] .modal-outer {
  flex-direction: column;
  align-items: stretch;
  max-width: calc(100vw - 32px);
  max-height: 90vh;
}
body[data-mobile="true"] .modal-tab-rail {
  flex-direction: row;
  padding: 8px 8px 0;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
}
body[data-mobile="true"] .modal-tab {
  writing-mode: horizontal-tb;
  border-radius: 4px;
  border: 1px solid #2a2a2a;
  border-right: 1px solid #2a2a2a;
  flex: 1;
  padding: 8px 4px;
  text-align: center;
}
body[data-mobile="true"] .modal-tab.active {
  margin-right: 0;
  border-right: 1px solid #333;
  border-color: #333;
  color: #f5c542;
  background: #1a1a1a;
}

/* Community builds: 1 column on mobile */
body[data-mobile="true"] #public-builds-list,
body[data-mobile="true"] #my-community-list { grid-template-columns: 1fr; }

/* Touch targets (apply on all touch devices) */
body[data-mobile="true"] .tree-slot-inner { padding: 5px 8px; font-size: 13px; }
.tree-swipe-hint { display: none; }
body[data-mobile="true"] .tree-swipe-hint {
  display: inline;
  font-size: 10px;
  font-weight: 400;
  color: #555;
  letter-spacing: 0.5px;
  margin-left: 8px;
  text-transform: none;
  vertical-align: middle;
}
body[data-mobile="true"] .toggle-btn { padding: 10px 0; font-size: 13px; }
body[data-mobile="true"] .modal-close-btn { padding: 8px 10px; }
body[data-mobile="true"] .custom-select-option { padding: 10px 12px; }
body[data-mobile="true"] .back-button { padding: 8px 10px; }
body[data-mobile="true"] .saved-build-btn { padding: 8px 10px; }

/* Attachment table: sticky header fix */
body[data-mobile="true"] .attachment-table th { top: 24px; padding-top: 10px; background: #111; }

/* Gun cards: disable mouse-only effects, add tap feedback */
body[data-mobile="true"] .gun-card::before,
body[data-mobile="true"] .gun-card::after { display: none; }
body[data-mobile="true"] .gun-card:hover img { filter: none; }
body[data-mobile="true"] .gun-card:active { border-color: #f5c542; opacity: 0.85; }
body[data-mobile="true"] .gun-card-corners { display: none; }
body[data-mobile="true"] .gun-card-light { display: none; }

/* Toasts: nudge position on mobile */
body[data-mobile="true"] #toast-container { right: 12px; bottom: 12px; }

/* Tree: reduced indentation */
body[data-mobile="true"] .tree-children { margin-left: 12px; padding-left: 8px; }
body[data-mobile="true"] .tree-slot-name { font-size: 13px; }

/* Community builds: keep 2 columns, scaled-down cards */
body[data-mobile="true"] #public-builds-list,
body[data-mobile="true"] #my-community-list { grid-template-columns: repeat(2,1fr); }
body[data-mobile="true"] .cb-gun-area { min-height: 48px; padding: 6px 10px; }
body[data-mobile="true"] .cb-gun-img { max-height: 44px; }
body[data-mobile="true"] .cb-card-body { padding: 5px 8px 4px; }
body[data-mobile="true"] .cb-build-name { font-size: 11px; }
body[data-mobile="true"] .cb-author { font-size: 10px; }
body[data-mobile="true"] .cb-publish-date,
body[data-mobile="true"] .cb-load-count { font-size: 9px; }
body[data-mobile="true"] .cb-stat { padding: 3px 4px; }
body[data-mobile="true"] .cb-stat-label { font-size: 8px; }
body[data-mobile="true"] .cb-stat-val { font-size: 11px; }
body[data-mobile="true"] .cb-card-footer { padding: 4px 6px; }

/* Mobile: restore acc(6) and ergo(7) hidden by the 767px media query */
body[data-mobile="true"] .attachment-table th:nth-child(6),
body[data-mobile="true"] .attachment-table td:nth-child(6),
body[data-mobile="true"] .attachment-table th:nth-child(7),
body[data-mobile="true"] .attachment-table td:nth-child(7) { display: table-cell; }
/* Let hide-col-* autohide still work - these selectors are more specific so they win */
body[data-mobile="true"] .attachment-table.hide-col-acc th:nth-child(6),
body[data-mobile="true"] .attachment-table.hide-col-acc td:nth-child(6),
body[data-mobile="true"] .attachment-table.hide-col-ergo th:nth-child(7),
body[data-mobile="true"] .attachment-table.hide-col-ergo td:nth-child(7) { display: none; }
/* Compact name cell: drop vote buttons, shrink icon, tighten layout */
body[data-mobile="true"] .att-rating { display: none; }
body[data-mobile="true"] .attachment-icon,
body[data-mobile="true"] .attachment-icon-wrapper { width: 32px; height: 32px; }
body[data-mobile="true"] .attachment-name-wrapper { gap: 6px; }
body[data-mobile="true"] .attachment-table td { padding: 5px 5px; }
body[data-mobile="true"] .attachment-table tbody tr { height: 46px; }
body[data-mobile="true"] .att-table-close-btn { display: none; }

/* Mobile: attachment table horizontal scroll handled by right-panel */

/* Mobile: attachment table header */
body[data-mobile="true"] .att-table-header { flex-wrap: wrap; gap: 8px; }
body[data-mobile="true"] .att-table-gun-img { height: 72px; max-width: 200px; }
body[data-mobile="true"] .att-table-header h3 { font-size: 14px; flex: 1; }
body[data-mobile="true"] .att-table-header-toggles { flex-direction: row; flex-wrap: wrap; width: 100%; margin-left: 0; gap: 8px; }
body[data-mobile="true"] .combo-view-btns { flex: 1; }
body[data-mobile="true"] .combo-view-btns .toggle-btn { flex: 1; padding: 6px 4px; }
/* Mobile: hide short name badge on attachment icons in table */
body[data-mobile="true"] .attachment-table .slot-shortname { display: none; }
/* Mobile: combo name cell needs minimum width to show icons; table scrolls to cover stats */
body[data-mobile="true"] .attachment-table td.combo-name-cell { min-width: 200px; }
/* Mobile: combo icon area is touch-scrollable instead of hover-animated */
body[data-mobile="true"] .combo-icon-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
body[data-mobile="true"] .combo-icon-scroll::-webkit-scrollbar { display: none; }

/* Mobile: disabled features */
body[data-mobile="true"] .saved-build-btn.publish-btn { display: none; }
body[data-mobile="true"] #view-grid-btn,
body[data-mobile="true"] #view-list-btn { display: none !important; }
body[data-mobile="true"] #graph-view-btn { display: none !important; }
body[data-mobile="true"] .ag-export-img-btn { display: none !important; }
body[data-mobile="true"] #compare-toggle-btn { display: none !important; }

/* Mobile: prevent horizontal overflow in left panel */
body[data-mobile="true"] #left-build-area { overflow-x: hidden; max-width: 100%; }
body[data-mobile="true"] #stats { overflow-x: hidden; max-width: 100%; }
body[data-mobile="true"] #slots { max-width: 100%; }
body[data-mobile="true"] .stats-section { overflow-x: hidden; }
/* Mobile: keep the sub-stats single-column (desktop-only space-saving layout) */
body[data-mobile="true"] .stat-subsection-cols { display: block; }
body[data-mobile="true"] #build-controls { flex-wrap: wrap; }
body[data-mobile="true"] #build-controls .back-button { white-space: normal; min-width: 0; }

/* =============================================
   PORTRAIT PHONE - cosmetic only
   Extra compression for very narrow screens.
   Core layout comes from body[data-mobile] above.
============================================= */

@media (max-width: 767px) {
  /* Header compression */
  header { padding: 0 10px; gap: 8px; }
  .header-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
  .header-scroll::-webkit-scrollbar { display: none; }
  .header-content { min-width: max-content; }
  #tarkov-clock { display: none; }
  .header-btn { padding: 5px 8px; font-size: 11px; letter-spacing: 0.5px; }
  .header-nav-btn { padding: 0 10px; font-size: 11px; }
  /* #about-btn visible on mobile */
  .header-title-group { display: none; }

  /* iOS zoom-on-focus fix */
  .search-input, input[type="text"] { font-size: 16px; }

  /* Hide ergo and evo columns on mobile (too narrow) */
  .attachment-table th:nth-child(6),
  .attachment-table td:nth-child(6),
  .attachment-table th:nth-child(7),
  .attachment-table td:nth-child(7) { display: none; }

}

/* =============================================
   TABLET - non-touch large tablets or devtools
   Only applies when body[data-mobile] is NOT set
   (i.e. a mouse-driven tablet or desktop resized)
============================================= */

@media (min-width: 768px) and (max-width: 1023px) {
  body:not([data-mobile="true"]) .left-panel { width: 420px !important; }
  body:not([data-mobile="true"]) #tarkov-clock { display: none; }
}

/* #mobile-drawer-back is hidden on desktop by default */
#mobile-drawer-back { display: none; }
#mobile-publish-tray { display: none; }
body[data-mobile="true"].mobile-publish-mode #mobile-publish-tray {
  display: flex;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 50px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #12110a;
  border-top: 2px solid #f5c542;
  color: #f5c542;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 148;
  user-select: none;
}
body[data-mobile="true"].mobile-publish-mode #mobile-publish-tray::before {
  content: "\25B2";
  font-size: 10px;
}
/* Push panel content up so the tray doesn't cover it */
body[data-mobile="true"].mobile-publish-mode #left-build-area {
  padding-bottom: 58px;
}
.beian-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 0;
  font-size: 11px;
  color: #333;
  pointer-events: none;
  z-index: 9995;
  gap: 12px;
}
.beian-footer a {
  color: #333;
  text-decoration: none;
  pointer-events: auto;
}
.beian-footer-gong {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Dev modal debugger panels */
.dev-debugger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px;
  border-top: 1px solid #222;
}
.dev-debugger-row-label {
  font-size: 13px;
  color: #aaa;
  letter-spacing: 0.5px;
}
.dev-debugger-run-btn {
  background: #222;
  border: 1px solid #333;
  color: #888;
  font-family: "Bender", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.dev-debugger-run-btn:hover {
  background: #2a2a2a;
  color: #f5c542;
  border-color: #444;
}
.dev-debugger-output {
  display: none;
  margin: 0 18px 12px 18px;
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 10px 12px;
  max-height: 40vh;
  overflow-y: auto;
  font-family: monospace;
  font-size: 11px;
  color: #bbb;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
}
.dev-debugger-output.visible { display: block; }
.dev-out-ok    { color: #4caf50; }
.dev-out-warn  { color: #f5c542; }
.dev-out-error { color: #e05252; }
.dev-out-dim   { color: #555; }

.dev-ls-list {
  margin: 0 18px 14px;
  border: 1px solid #222;
  border-radius: 4px;
  overflow: hidden;
}
.dev-ls-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-top: 1px solid #1e1e1e;
  min-height: 32px;
}
.dev-ls-row:first-child {
  border-top: none;
}
.dev-ls-key {
  font-family: monospace;
  font-size: 11px;
  color: #f5c542;
  flex-shrink: 0;
  min-width: 0;
}
.dev-ls-val {
  font-family: monospace;
  font-size: 10px;
  color: #555;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.dev-ls-clear-btn {
  background: #1e1212;
  border: 1px solid #3a1a1a;
  color: #884444;
  font-family: "Bender", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.dev-ls-clear-btn:hover {
  background: #2e1a1a;
  border-color: #662222;
  color: #e05252;
}
.dev-ls-empty {
  padding: 10px 12px;
  font-size: 11px;
  color: #444;
  font-family: monospace;
}

/* Dev modal trigger button - sits right after the Tarkov clock, localhost only */
.dev-modal-trigger {
  align-self: center;
  margin-left: -3px;
  background: #1a1a1a;
  border: 1px solid #3a3a3a;
  color: #555;
  font-family: "Bender", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  z-index: 101;
}
.dev-modal-trigger:hover {
  color: #f5c542;
  border-color: #555;
}

/* Dev modal rows */
.dev-modal-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #444;
  padding: 14px 18px 8px 18px;
  text-transform: uppercase;
}
.dev-modal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px;
  border-top: 1px solid #222;
}
.dev-modal-row-label {
  font-size: 13px;
  color: #aaa;
  letter-spacing: 0.5px;
}
.dev-modal-toggle {
  background: #222;
  border: 1px solid #333;
  color: #555;
  font-family: "Bender", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
  min-width: 46px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.dev-modal-toggle.active {
  background: #1a2e1a;
  border-color: #2e6b2e;
  color: #4caf50;
}
.dev-item-id-badge {
  font-family: "Courier New", monospace;
  font-size: 10px;
  color: #f5c542;
  background: #1a1600;
  border: 1px solid #3a3000;
  border-radius: 3px;
  padding: 1px 5px;
  margin-top: 2px;
  cursor: pointer;
  user-select: none;
  display: inline-block;
  letter-spacing: 0.3px;
  transition: background 0.1s, color 0.1s;
}
.dev-item-id-badge:hover {
  background: #2a2200;
  color: #ffe082;
}
.dev-item-id-badge--copied {
  background: #1a2e1a;
  border-color: #2e6b2e;
  color: #4caf50;
}