/* ═══════════════════════════════════════════════════════════════
   LWServers V2 — intel.css
   Server Intelligence page — mobile-first, glass UI
   Requires: base.css, nav.css
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   VIEW TABS — Warzone / Global Top 100
───────────────────────────────────────────────────────────── */

.intel-view-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-1);
  margin-top: 12px;
}

.intel-tab {
  flex: 1;
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--t-base);
  margin-bottom: -1px;
}

.intel-tab:hover { color: var(--text-1); }

.intel-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ─────────────────────────────────────────────────────────────
   GLOBAL TOP 100
───────────────────────────────────────────────────────────── */

.global-top100-note {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--border-1) !important;
}

/* PAGE HEADER*/

.intel-header {
  padding: 20px var(--page-px) 0;
  background: var(--glass-bg);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border-bottom: 1px solid var(--border-1);
  position: sticky;
  top: 56px;           /* below app-bar */
  z-index: 100;
}

.intel-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.intel-eyebrow {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
}

.intel-title {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-1);
}

/* Warzone selector button */
.wz-selector-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  background: var(--glass-bg-2);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--border-2);
  color: var(--text-1);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-base);
  white-space: nowrap;
  box-shadow: inset 0 1px 0 var(--glass-shine);
}

/* Excel export button — shown next to the WZ selector once a
   warzone is loaded.  Lower-emphasis than the selector since
   it's an action on the data, not the navigation. */
.wz-export-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--accent-glow-2);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.wz-export-btn:hover {
  background: var(--accent-glow);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.wz-export-btn.hidden { display: none; }
.wz-export-btn[disabled],
.wz-export-btn.loading {
  cursor: progress;
  opacity: 0.85;
}
.wz-export-btn.loading svg {
  animation: wz-export-spin 1.2s linear infinite;
}
@keyframes wz-export-spin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
  /* Drop the text label on small screens, keep the icon */
  .wz-export-btn .wz-export-label { display: none; }
  .wz-export-btn { padding: 8px 10px; }
}

.wz-selector-btn:hover {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-glow-2);
}

.wz-selector-label { font-family: var(--font-data); font-size: 12px; }

/* Stat strip under header */
.intel-stats {
  margin: 0 calc(-1 * var(--page-px));
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: 1px solid var(--border-1);
  border-bottom: none;
}

/* ─────────────────────────────────────────────────────────────
   INTEL BRIEFING — auto-generated tactical summary card
───────────────────────────────────────────────────────────── */

.intel-briefing {
  margin-top: 16px;
  margin-bottom: 14px;
  padding: 14px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(ellipse at top left, rgba(0,232,122,0.06), transparent 60%),
    var(--glass-bg);
  border: 1px solid var(--accent-border);
  position: relative;
  overflow: hidden;
}

.intel-briefing.hidden { display: none; }

.intel-briefing::before {
  /* faint scanline accent on the left edge */
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), transparent);
  opacity: 0.6;
}

.briefing-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.briefing-eyebrow {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}

.briefing-wz {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
}

.briefing-updated {
  margin-left: auto;
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-3);
}

.briefing-quad {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.briefing-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-2);
  background: var(--glass-bg-3);
  min-width: 0;
}

.briefing-cell-val {
  font-family: var(--font-data);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--text-1);
}

.briefing-cell-lbl {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 2px;
}

.briefing-cell-sub {
  font-size: 10px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.briefing-cell.q-mega .briefing-cell-val { color: var(--accent); }
.briefing-cell.q-rank .briefing-cell-val { color: var(--amber); }
.briefing-cell.q-top  .briefing-cell-val { color: var(--text-1); }
.briefing-cell.q-avg  .briefing-cell-val { color: var(--text-1); }

.briefing-summary {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-1);
  margin: 0 0 12px;
  letter-spacing: 0.1px;
}
.briefing-summary b { color: var(--accent); font-weight: 700; }

.briefing-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-1);
}

.briefing-bar-row {
  display: grid;
  grid-template-columns: minmax(60px, 80px) 1fr 36px;
  align-items: center;
  gap: 10px;
}

.briefing-bar-name {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.briefing-bar-track {
  height: 6px;
  border-radius: 3px;
  background: var(--glass-bg-3);
  overflow: hidden;
}

.briefing-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), rgba(0, 232, 122, 0.5));
  transition: width var(--t-slow) var(--ease);
}

.briefing-bar-pct {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-align: right;
}

@media (min-width: 769px) {
  .intel-briefing { padding: 18px 20px; }
  .briefing-quad  { grid-template-columns: repeat(4, 1fr); }
  .briefing-cell-val { font-size: 24px; }
  .briefing-summary  { font-size: 14px; max-width: 720px; }
}

/* ─────────────────────────────────────────────────────────────
   WARZONE MODAL
───────────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 15, 0.85);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  z-index: 500;
  display: flex;
  align-items: flex-end;
  padding: 0;
}

.modal-overlay.hidden { display: none; }

.modal-sheet {
  width: 100%;
  max-height: 80vh;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  padding: 16px var(--page-px) calc(var(--nav-h) + var(--safe-bottom) + 20px);
  overflow-y: auto;
  animation: slide-up var(--t-slow) var(--ease) both;
}

.modal-handle {
  width: 36px;
  height: 4px;
  background: var(--border-2);
  border-radius: 2px;
  margin: 0 auto 16px;
}

.modal-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.modal-title {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-1);
}

.modal-close-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--glass-bg-3);
  border: 1px solid var(--border-1);
  color: var(--text-2);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t-base);
}

.modal-close-btn:hover { color: var(--text-1); background: var(--border-1); }

/* Warzone grid in modal */
.modal-wz-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: none;
}

.modal-wz-grid::-webkit-scrollbar { display: none; }

.modal-wz-item {
  text-align: center;
  padding: 10px 4px;
  border-radius: var(--r-md);
  background: var(--glass-bg);
  border: 1px solid var(--border-1);
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--t-fast);
}

.modal-wz-item:hover {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-glow-2);
}

.modal-wz-item.active {
  border-color: var(--accent-border);
  background: var(--accent-glow-2);
  color: var(--accent);
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────
   WARZONE PICKER (mandatory) — segment tabs + subsegment groups
───────────────────────────────────────────────────────────── */

.wz-picker-sheet { max-height: 88vh; }

/* Two-step picker: segment cards (styles shared with the segment
   gate in nav.css), then the warzone grid with a back button */
.wz-picker-step.hidden { display: none; }

#wzSegmentList { max-height: 60vh; overflow-y: auto; }

.wz-seg-arrow {
  font-size: 14px;
  color: var(--text-3);
}

.seg-option:hover .wz-seg-arrow { color: var(--accent); }

.wz-picker-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 7px 14px;
  border-radius: 20px;
  background: var(--glass-bg-3);
  border: 1px solid var(--border-1);
  color: var(--text-2);
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all var(--t-fast);
}

.wz-picker-back:hover {
  color: var(--text-1);
  border-color: var(--border-3);
}

.wz-picker-eyebrow {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}

.wz-picker-sub {
  font-size: 12px;
  color: var(--text-2);
  margin: 0 0 12px;
  line-height: 1.45;
}

/* Segment tabs (shown only when multiple active segments exist) */
.wz-picker-segments {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-1);
}

.wz-picker-segments.hidden { display: none; }

.wz-picker-seg {
  flex: 1 1 auto;
  min-width: 110px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--glass-bg);
  border: 1px solid var(--border-2);
  cursor: pointer;
  transition: all var(--t-fast);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.2;
}
.wz-picker-seg:hover { color: var(--text-1); border-color: var(--border-3); }
.wz-picker-seg.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-glow-2);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}
.wz-picker-seg small {
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 400;
  color: var(--text-3);
  letter-spacing: 0.3px;
}
.wz-picker-seg.active small { color: var(--accent); opacity: 0.7; }

/* Scrollable list of subsegment groups */
.wz-picker-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 56vh;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

.wz-picker-group { display: flex; flex-direction: column; gap: 8px; }

.wz-picker-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--border-1);
}

.wz-picker-group-label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-1);
}

.wz-picker-group-range {
  margin-left: auto;
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.3px;
}

.wz-picker-pills {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 5px;
}

.wz-picker-pill {
  padding: 9px 4px;
  border-radius: var(--r-sm);
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--glass-bg);
  border: 1px solid var(--border-2);
  cursor: pointer;
  transition: all var(--t-fast);
}
.wz-picker-pill:hover {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-glow-2);
  transform: translateY(-1px);
}
.wz-picker-pill.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-glow);
  box-shadow: 0 0 0 1px var(--accent-border) inset;
  font-weight: 700;
}

/* Warzones that have uploaded data get a status dot + brighter
   text, mirroring the Status page (green = fresh, amber = stale).
   Warzones without any data stay muted. */
.wz-picker-pill {
  position: relative;
}
.wz-picker-pill.has-data { color: var(--text-1); }
.wz-picker-pill .wz-pill-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.wz-picker-pill.wz-active .wz-pill-dot {
  background: var(--accent);
  box-shadow: 0 0 5px var(--accent);
}
.wz-picker-pill.wz-stale .wz-pill-dot {
  background: var(--amber);
}
.wz-picker-pill.wz-active {
  border-color: var(--accent-border);
}
.wz-picker-pill.wz-stale {
  border-color: var(--amber-border);
}

@media (min-width: 769px) {
  .wz-picker-pills      { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); }
  .wz-picker-pill       { padding: 10px 4px; font-size: 13px; }
  .wz-picker-list       { max-height: 60vh; }
}

/* ─────────────────────────────────────────────────────────────
   EMPTY STATE
───────────────────────────────────────────────────────────── */

.intel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 32px;
  text-align: center;
}

.intel-empty-icon { opacity: 0.3; }

.intel-empty-text {
  font-size: 14px;
  color: var(--text-2);
}

/* ─────────────────────────────────────────────────────────────
   META BAR
───────────────────────────────────────────────────────────── */

.intel-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 11px;
  color: var(--text-3);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-1);
  margin-bottom: 14px;
}

.intel-meta-updated { font-family: var(--font-data); font-size: 10px; color: var(--text-3); }
.intel-meta-born { font-family: var(--font-data); font-size: 10px; color: var(--text-2); }
.intel-meta-born:empty { display: none; }
.intel-meta-born b { color: var(--accent); font-weight: 700; }

.discord-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  background: rgba(88, 101, 242, 0.1);
  border: 1px solid rgba(88, 101, 242, 0.25);
  color: #818cf8;
  text-decoration: none;
  transition: background var(--t-base);
}

.discord-cta:hover { background: rgba(88, 101, 242, 0.18); }
.discord-cta svg { fill: currentColor; }

/* ─────────────────────────────────────────────────────────────
   ACTION BUTTONS ROW
───────────────────────────────────────────────────────────── */

.intel-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--glass-bg);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--border-1);
  cursor: pointer;
  transition: all var(--t-base);
  box-shadow: inset 0 1px 0 var(--glass-shine);
  text-decoration: none;
}

.action-btn:hover {
  color: var(--text-1);
  border-color: var(--border-2);
  background: var(--glass-bg-2);
}

.action-btn.active {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-glow-2);
}

/* Primary variant — used by the standalone "Head to Head" CTA on
   the intel actions row.  Bigger, accent-green filled, with an
   arrow nudge on hover.  Designed to stand alone, not in a row. */
.action-btn-primary {
  padding: 12px 18px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--accent);
  background: var(--accent-glow);
  border: 1px solid var(--accent);
  box-shadow:
    0 4px 14px rgba(0, 232, 122, 0.10),
    inset 0 1px 0 var(--glass-shine);
}
.action-btn-primary:hover {
  color: var(--accent);
  background: var(--accent-glow);
  border-color: var(--accent);
  box-shadow:
    0 6px 20px rgba(0, 232, 122, 0.20),
    inset 0 1px 0 var(--glass-shine);
  transform: translateY(-1px);
}
.action-btn-primary svg {
  filter: drop-shadow(0 0 4px var(--accent-glow));
}
.action-btn-arrow {
  margin-left: 4px;
  font-family: var(--font-data);
  font-size: 16px;
  font-weight: 800;
  transition: transform var(--t-base) var(--ease);
}
.action-btn-primary:hover .action-btn-arrow {
  transform: translateX(4px);
}

/* ─────────────────────────────────────────────────────────────
   FILTER PILLS
───────────────────────────────────────────────────────────── */

/* Board pills — same visual language as the ranking sort bar
   (intel doesn't load ranking.css, so the styles live here too) */
.ranking-sortbar-label {
  flex-shrink: 0;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-3);
  align-self: center;
  margin-right: 4px;
}

.sort-pill {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: 20px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--glass-bg);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--border-1);
  cursor: pointer;
  transition: all var(--t-base);
  white-space: nowrap;
  box-shadow: inset 0 1px 0 var(--glass-shine);
}

.sort-pill:hover   { color: var(--text-1); border-color: var(--border-2); }
.sort-pill.active  { color: var(--accent); border-color: var(--accent-border); background: var(--accent-glow-2); }

.filter-pill {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: 20px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--glass-bg);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--border-1);
  cursor: pointer;
  transition: all var(--t-base);
  box-shadow: inset 0 1px 0 var(--glass-shine);
  white-space: nowrap;
}

.filter-pill:hover { color: var(--text-1); border-color: var(--border-2); }

.filter-pill.active {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-glow-2);
}

/* ─────────────────────────────────────────────────────────────
   POWER SEGMENTS
───────────────────────────────────────────────────────────── */

.power-segments-wrap { margin-bottom: 16px; }

.power-segments {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}

.power-seg {
  background: var(--glass-bg);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  padding: 10px 8px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.power-seg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--glass-shine) 0%, transparent 50%);
  pointer-events: none;
}

.power-seg-label {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}

.power-seg-value {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.5px;
}

.power-seg-value.positive { color: var(--accent); }
.power-seg-value.negative { color: var(--red); }

.power-seg-sub {
  font-family: var(--font-data);
  font-size: 9px;
  color: var(--text-3);
  margin-top: 3px;
}

/* ─────────────────────────────────────────────────────────────
   SQUAD META — first-squad type mix bars
───────────────────────────────────────────────────────────── */
.squad-meta-bars { display: flex; flex-direction: column; gap: 8px; }
.squad-bar-row {
  display: grid;
  grid-template-columns: 88px 1fr 64px;
  align-items: center;
  gap: 10px;
}
.squad-bar-lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-1);
}
.squad-sw { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.squad-bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--glass-bg-3);
  overflow: hidden;
}
.squad-bar-fill { height: 100%; border-radius: 999px; transition: width var(--t-base); }
.squad-bar-val {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-1);
  text-align: right;
}
.squad-meta-callout {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.45;
  margin: 12px 0 0;
}
.squad-meta-note {
  font-size: 11px;
  line-height: 1.4;
  margin-top: 6px;
}

/* ─────────────────────────────────────────────────────────────
   TOP 5 GLORY GRID
───────────────────────────────────────────────────────────── */

.top5-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}

.glory-card {
  background: var(--glass-bg);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  padding: 14px 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-base);
}

.glory-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--glass-shine) 0%, transparent 50%);
  pointer-events: none;
}

.glory-card:hover { border-color: var(--border-2); }

.glory-rank-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 28px;
  height: 28px;
  border-radius: 0 var(--r-lg) 0 var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
}

.glory-rank-badge.r1 { background: rgba(245,158,11,0.2); color: var(--amber); }
.glory-rank-badge.r2 { background: rgba(148,163,184,0.15); color: #94a3b8; }
.glory-rank-badge.r3 { background: rgba(180,120,80,0.15); color: #c8956a; }
.glory-rank-badge.rn { background: var(--glass-bg-3); color: var(--text-3); }

.glory-name {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}

.glory-alliance {
  position: relative;
  z-index: 1;
  margin-bottom: 8px;
}

.glory-power {
  font-family: var(--font-data);
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  position: relative;
  z-index: 1;
}

/* ─────────────────────────────────────────────────────────────
   ALLIANCE PILLS
───────────────────────────────────────────────────────────── */

.alliance-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.alliance-pill {
  padding: 6px 12px;
  border-radius: 20px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--glass-bg);
  border: 1px solid var(--border-1);
  cursor: pointer;
  transition: all var(--t-base);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}

.alliance-pill:hover { color: var(--text-1); border-color: var(--border-2); }
.alliance-pill.active { color: var(--accent); border-color: var(--accent-border); background: var(--accent-glow-2); }

/* ─────────────────────────────────────────────────────────────
   ALLIANCE GRID — tile style matching tier counts
   Click to filter players by alliance
───────────────────────────────────────────────────────────── */

.alliance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 6px;
}

.alliance-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 8px;
  border-radius: var(--r-md);
  background: var(--glass-bg);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--border-1);
  box-shadow: inset 0 1px 0 var(--glass-shine);
  cursor: pointer;
  text-align: center;
  transition: all var(--t-base);
  position: relative;
  overflow: hidden;
}

.alliance-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--glass-shine) 0%, transparent 55%);
  pointer-events: none;
}

.alliance-tile:hover {
  border-color: var(--border-2);
  transform: translateY(-1px);
}

.alliance-tile.active {
  border-color: var(--accent-border);
  background: var(--accent-glow-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05),
              0 0 12px rgba(0,232,122,0.08);
}

.alliance-tile-count {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.5px;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.alliance-tile.active .alliance-tile-count { color: var(--accent); }

.alliance-tile-name {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--text-3);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  position: relative;
  z-index: 1;
}

.alliance-tile.active .alliance-tile-name { color: rgba(0,232,122,0.7); }

.alliance-tile-power {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-3);
  position: relative;
  z-index: 1;
}

.alliance-tile.active .alliance-tile-power { color: var(--accent); opacity: 0.8; }

/* "+N more" tile → opens the all-alliances / all-nations modal */
.alliance-tile-more { border-style: dashed; }
.alliance-tile-more .alliance-tile-count { color: var(--accent); }
.alliance-tile-more .alliance-tile-name  { color: var(--text-2); }

/* Scrollable grid inside the overflow modal */
.overflow-grid {
  max-height: 62vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─────────────────────────────────────────────────────────────
   PLAYER LIST
───────────────────────────────────────────────────────────── */

.player-list-wrap {
  display: flex;
  flex-direction: column;
}

/* Column grid — shared by .pl-head and every .player-row.
   Numbers chosen so columns align across the header + body. */
.pl-head,
.player-row {
  display: grid;
  grid-template-columns:
    28px            /* rank */
    minmax(0, 1fr)  /* player (name + alliance) */
    auto            /* tier */
    auto            /* fsp */
    minmax(48px, 0.8fr) /* power bar */
    auto            /* power value */
    auto            /* seen */
    18px;           /* verified ✓ */
  align-items: center;
  gap: 10px;
  padding: 9px var(--page-px);
}

/* Header row — small uppercase labels, mobile hides it */
.pl-head {
  border-bottom: 1px solid var(--border-1);
  padding-top: 6px;
  padding-bottom: 6px;
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-3);
}
.pl-head.hidden { display: none; }
.pl-head .plh-rank,
.pl-head .plh-power,
.pl-head .plh-fsp,
.pl-head .plh-seen,
.pl-head .plh-vfd { text-align: right; }
.pl-head .plh-bar { text-align: center; }

.player-row {
  border-bottom: 1px solid var(--border-1);
  transition: background var(--t-fast);
  min-width: 0;
}
.player-row:hover { background: var(--hover-overlay); }
.player-row:last-child { border-bottom: none; }

/* ── Columns ── */
.pr-rank {
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--text-3);
  text-align: right;
  line-height: 1;
}
.pr-rank.r1 { color: var(--amber);  font-weight: 700; font-size: 13px; }
.pr-rank.r2 { color: #94a3b8;       font-weight: 600; }
.pr-rank.r3 { color: #c8956a; }

.pr-player { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pr-player-txt { min-width: 0; }

/* Player avatar thumbnail — custom photo (pic_ver) with an initials
   monogram fallback (same source as the modal, js/player-modal.js). */
.pr-avatar {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: var(--glass-bg-3);
  border: 1px solid var(--border-1);
  overflow: hidden;
  user-select: none;
}
.pr-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pr-name {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* Country flag next to the player name (Supabase data) */
.pr-flag {
  font-size: 12px;
  margin-right: 1px;
  cursor: default;
}

/* Roster rows open the shared player modal (js/player-modal.js, which
   carries its own styles — this page no longer defines a modal). */
.player-row { cursor: pointer; }


.pr-alliance {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-3);
  margin-top: 2px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Per-day growth, inline under the alliance line on EVERY row (both the
   warzone roster and Segment Top 100). Three rates at once, so reading
   them no longer costs a trip through the board pills — those now only
   change the ranking. Kept to one dim line so it reads as annotation on
   the player, not as a fourth column competing with hero power. */
.pr-growth {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px 8px;
  margin-top: 3px;
  font-family: var(--font-data);
  font-size: 9.5px;
  line-height: 1.35;
  letter-spacing: 0.2px;
  color: var(--text-2);
}
.pr-growth .pg { white-space: nowrap; }
.pr-growth .pg i {
  font-style: normal;
  color: var(--text-3);
  margin-right: 3px;
  letter-spacing: 0.6px;
}
/* Hero power and one-hero power can fall between sweeps (gear swapped,
   hero re-spec), so a negative rate is a real reading — same red the
   rest of the site uses for one. */
.pr-growth .pg.neg { color: var(--red, #f87171); }
/* "No reading", not "no growth" — never the same symbol as a measured 0. */
.pr-growth .pg-none { color: var(--text-3); opacity: 0.5; }

.pr-tier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.pr-tier-pos {
  font-family: var(--font-data);
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 0.4px;
}

.pr-fsp {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--text-2);
  text-align: right;
  white-space: nowrap;
}

/* A growth pill puts its gain in this slot. Hero power and one-hero power
   can fall between sweeps (gear swapped, hero re-spec), so a negative is a
   real reading and gets the same red the rest of the site uses for one. */
.pr-fsp .neg { color: var(--red, #f87171); }

/* Tier-coloured FSP pill — same palette as the tier badge so the
   eye can scan FSP and tier as a unit ("a Whale at 92.34M FSP"). */
.pr-fsp-tier {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid;
  font-weight: 700;
  letter-spacing: 0.2px;
  font-size: 11px;
}
.pr-fsp-tier.tier-mega {
  color: var(--tier-mega);
  background: rgba(248, 113, 113, 0.10);
  border-color: rgba(248, 113, 113, 0.32);
}
.pr-fsp-tier.tier-whale {
  color: var(--tier-whale);
  background: rgba(192, 132, 252, 0.10);
  border-color: rgba(192, 132, 252, 0.32);
}
.pr-fsp-tier.tier-shark {
  color: var(--tier-shark);
  background: rgba(96, 165, 250, 0.10);
  border-color: rgba(96, 165, 250, 0.32);
}
.pr-fsp-tier.tier-piranha {
  color: var(--tier-piranha);
  background: rgba(0, 232, 122, 0.10);
  border-color: rgba(0, 232, 122, 0.32);
}
.pr-fsp-tier.tier-shrimp {
  color: var(--tier-shrimp);
  background: rgba(107, 114, 128, 0.12);
  border-color: rgba(107, 114, 128, 0.32);
}

/* Tier-progress bar — fills based on the player's position between
   tier-entry and the next tier's threshold.  Colour matches the tier
   they're currently in. */
.pr-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--glass-bg-3);
  overflow: hidden;
  border: 1px solid var(--border-1);
  --bar-color: var(--accent);
}
.pr-bar-fill {
  height: 100%;
  background: var(--bar-color);
  border-radius: 3px 0 0 3px;
  transition: width var(--t-slow) var(--ease);
  opacity: 0.85;
}

.pr-bar-mega    { --bar-color: var(--tier-mega);    }
.pr-bar-whale   { --bar-color: var(--tier-whale);   }
.pr-bar-shark   { --bar-color: var(--tier-shark);   }
.pr-bar-piranha { --bar-color: var(--tier-piranha); }
.pr-bar-shrimp  { --bar-color: var(--tier-shrimp);  }

.pr-power {
  font-family: var(--font-data);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  text-align: right;
  white-space: nowrap;
}

/* On a growth board this column holds a gain, and hero power can fall
   between sweeps (gear swapped, hero re-spec) — a negative is a real
   reading, so it gets the same red the rest of the site uses for one. */
.pr-power.neg { color: var(--red, #f87171); }

.pr-seen {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-3);
  text-align: right;
  white-space: nowrap;
}

.pr-vfd { text-align: right; }

.pr-verified {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  opacity: 0.85;
}

/* ── Mobile collapse: 3-row card per player ── */
@media (max-width: 768px) {
  .pl-head { display: none; }

  .player-row {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    grid-template-areas:
      "rank player power"
      ".    meta   fsp"
      ".    seen   ."
      "bar  bar    bar";
    column-gap: 10px;
    row-gap: 3px;
    padding: 10px var(--page-px);
  }

  .pr-rank   { grid-area: rank;   align-self: center; }
  .pr-player { grid-area: player; }
  .pr-tier   { grid-area: meta;   align-self: start; }
  .pr-fsp    { grid-area: fsp;    justify-self: end; align-self: start; }
  .pr-power  { grid-area: power;  align-self: center; }
  .pr-seen   { grid-area: seen;   align-self: start; }
  .pr-bar    { grid-area: bar;    margin-top: 4px; height: 4px; }

  /* Drop verified ✓ on mobile — every visible row is confirmed
   * anyway (the Firestore query filters on powerSource). */
  .pr-vfd { display: none; }

  .pr-name { font-size: 13.5px; }
  .pr-power { font-size: 14px; }

  /* Narrow enough that three chips wrap to two lines — let them, rather
     than shrinking past legibility or dropping a metric. */
  .pr-growth { font-size: 9px; gap: 1px 7px; }
}

/* ─────────────────────────────────────────────────────────────
   ADMIN BAR
───────────────────────────────────────────────────────────── */

.admin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px var(--page-px);
  background: rgba(239, 68, 68, 0.08);
  border-bottom: 1px solid rgba(239, 68, 68, 0.2);
}

.admin-badge {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--red);
}

/* ─────────────────────────────────────────────────────────────
   DISCORD MODAL INFO
───────────────────────────────────────────────────────────── */

.discord-modal-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-1);
  padding: 10px 0;
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  margin-bottom: 12px;
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — desktop
───────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  .intel-header {
    top: 0;   /* no app-bar on desktop */
    padding: 24px var(--page-px-desk) 0;
  }

  .intel-actions { padding: 0 var(--page-px-desk); }
  .power-segments-wrap { padding: 0 var(--page-px-desk); }

  .intel-stats { margin: 0; border-radius: var(--r-lg); border: 1px solid var(--border-1); }

  .top5-grid { grid-template-columns: repeat(5, 1fr); }

  .modal-overlay { align-items: center; }
  .modal-sheet {
    width: min(500px, 90vw);
    max-height: 70vh;
    border-radius: var(--r-xl);
    padding-bottom: 20px;
    animation: scale-in var(--t-slow) var(--ease) both;
  }
  .modal-handle { display: none; }

  .modal-wz-grid { grid-template-columns: repeat(6, 1fr); }

  .player-row { padding: 11px var(--page-px-desk); }
  .pr-name { max-width: 280px; }
}