/* ============================================================
   DBC – prematch.css  (v2 – 2026 redesign)
   Prematch panel: sticky header, tabs, charts, pitch, vector.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   PREMATCH STICKY HEADER
   ══════════════════════════════════════════════════════════ */
#prematchPanel .prematchStickyWrap {
  position: sticky; top: 10px; z-index: 80;
  background: rgba(6,9,20,.88);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--line-hi);
  border-radius: 16px;
  padding: 11px 14px;
  margin: -6px 0 12px 0;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 16px 40px rgba(0,0,0,.45),
    0 0 0 1px rgba(65,189,217,.06);
}

/* ══════════════════════════════════════════════════════════
   PANEL STICKY HEADER (shared)
   ══════════════════════════════════════════════════════════ */
.panel .header {
  position: sticky; top: 0; z-index: 3;
  background: linear-gradient(180deg, rgba(8,14,28,.97), rgba(7,11,22,.92));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line-hi);
  box-shadow: 0 8px 28px rgba(0,0,0,.3);
}
.panel .header::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 100px at 15% -80%, rgba(65,189,217,.1), transparent);
}
.panel .header b {
  font-family: "Roboto Slab", serif;
  letter-spacing: .25px;
}

/* ══════════════════════════════════════════════════════════
   TABS
   ══════════════════════════════════════════════════════════ */
.tabs {
  display: flex; gap: 5px;
  margin: 8px 0 10px 0;
  position: sticky; top: 46px; z-index: 3;
  background: rgba(6,9,20,.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--line);
  width: fit-content;
}
.tabs button {
  padding: 6px 13px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px; font-weight: 600;
  letter-spacing: .25px;
  box-shadow: none;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.tabs button::after { display: none; } /* Remove parent ::after from button */
.tabs button:hover { color: var(--fg); background: rgba(255,255,255,.04); }
.tabs button.active {
  background: linear-gradient(160deg, #152040, #0f1830);
  border-color: rgba(65,189,217,.25);
  color: var(--fg);
  box-shadow: 0 2px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07);
}
.tabs button:hover  { transform: none; filter: none; }
.tabs button:active { transform: none; box-shadow: none; }

.tabs-pane        { display: none; }
.tabs-pane.active { display: block; }

/* ══════════════════════════════════════════════════════════
   TEAMS ROW
   ══════════════════════════════════════════════════════════ */
.teamsRow  { display: flex; gap: 16px; align-items: center; margin: 10px 0 14px; }
.teamTag   { display: flex; align-items: center; gap: 8px; }
.teamTag img {
  width: 36px; height: 36px; object-fit: contain;
  background: var(--bg1); border: 1px solid var(--line-hi);
  border-radius: 9px; padding: 2px;
}

/* ── A+ highlight ── */
.teamTag.team-a-plus {
  padding: 7px 10px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,107,53,.16), rgba(65,189,217,.08));
  border: 1px solid rgba(255,107,53,.3);
  box-shadow:
    0 0 0 1px rgba(255,107,53,.12),
    0 12px 30px rgba(255,107,53,.1);
}
.teamNameWrap        { position: relative; display: inline-block; padding-right: 28px; }
.teamNameWrap.a-plus strong {
  background: linear-gradient(180deg, rgba(255,107,53,.2), rgba(255,107,53,.05));
  padding: 4px 10px; border-radius: 10px;
  border: 1px solid rgba(255,107,53,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.aPlusBadge {
  position: absolute; top: -10px; right: -10px;
  font-size: 10px; font-weight: 900; letter-spacing: .4px;
  padding: 3px 7px; border-radius: 999px;
  background: linear-gradient(160deg, #FF7A45, #FF6B35);
  color: #04020D;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 6px 20px rgba(255,107,53,.3);
  font-family: "DM Sans", sans-serif;
}

/* ══════════════════════════════════════════════════════════
   CHART BOX
   ══════════════════════════════════════════════════════════ */
.chartbox {
  background: linear-gradient(160deg, #0b1120, #080e1c);
  border: 1px solid var(--line-hi);
  border-radius: 15px;
  padding: 14px;
  position: relative; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
/* Cyan accent line at top */
.chartbox::before {
  content: '';
  position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(65,189,217,.3), transparent);
  pointer-events: none;
}
/* Subtle radial glow behind charts */
.chartbox::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(65,189,217,.04), transparent);
}

/* ══════════════════════════════════════════════════════════
   DONUT GRID
   ══════════════════════════════════════════════════════════ */
.donutGrid            { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.donutGrid.responsive { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.donutCaption         { text-align: center; margin-top: 6px; font-size: 11px; color: var(--muted); letter-spacing: .2px; font-family: "DM Sans", sans-serif; }

/* ══════════════════════════════════════════════════════════
   PITCH / LINEUPS
   ══════════════════════════════════════════════════════════ */
.pitchWrap {
  width: 100%; overflow: auto;
  background: linear-gradient(160deg, #08101e, #060b17);
  border: 1px solid var(--line-hi);
  border-radius: 13px;
  padding: 10px;
  box-shadow: inset 0 0 40px rgba(0,0,0,.3);
}
.pitchLegend { display: flex; gap: 12px; align-items: center; font-family: "DM Sans", sans-serif; font-size: 13px; }
.dot         { width: 10px; height: 10px; border-radius: 50%; }

/* ══════════════════════════════════════════════════════════
   VECTOR CARDS
   ══════════════════════════════════════════════════════════ */
#vectorSummary {
  white-space: normal; line-height: 1.55;
  word-break: keep-all;
  font-family: "DM Sans", sans-serif;
  font-size: 14px; color: var(--text);
}
.vcard {
  background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 13px;
  padding: 12px 14px;
  margin-top: 10px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.vcard:hover {
  border-color: rgba(65,189,217,.2);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.vtitle {
  font-weight: 700; line-height: 1.25;
  font-family: "Roboto Slab", serif; font-size: 14px;
}
.vmeta  { margin-top: 6px; font-size: 12px; color: var(--muted); }
.vlist  { margin: 8px 0 0 18px; font-family: "DM Sans", sans-serif; font-size: 13px; line-height: 1.6; }
.vlist li { margin: 5px 0; }
.vbreak {
  margin-top: 10px; padding: 8px 10px;
  font-size: 12px; color: var(--muted);
  background: rgba(255,107,53,.06);
  border: 1px solid rgba(255,107,53,.15);
  border-radius: 8px;
}
.stack > :first-child { margin-top: 0; }

/* ══════════════════════════════════════════════════════════
   AUTH SPLIT
   ══════════════════════════════════════════════════════════ */
.authSplit {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin: 8px 0 14px 0;
}
@media (max-width: 820px) { .authSplit { grid-template-columns: 1fr; } }

.authCard {
  background: linear-gradient(160deg, #0d1729, #090f1e);
  border: 1px solid var(--line-hi);
  border-radius: 15px;
  padding: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 24px rgba(0,0,0,.2);
}

/* ── Auth links ── */
#authPanel a              { color: var(--accent) !important; text-decoration: underline dotted; }
#authPanel a:hover        { text-decoration: underline solid; filter: brightness(1.15); }

/* ══════════════════════════════════════════════════════════
   PER-CHART PNG DOWNLOAD BUTTON
   ══════════════════════════════════════════════════════════ */
.dlTools {
  position: absolute; top: .6rem; right: .6rem;
  display: flex; gap: .25rem; z-index: 5;
}
.btnMini {
  font: 600 10px/1.2 "DM Sans", system-ui, sans-serif;
  padding: .25rem .5rem;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: .45rem;
  background: rgba(4,2,13,.6);
  backdrop-filter: blur(6px);
  cursor: pointer;
  color: rgba(255,255,255,.75);
  letter-spacing: .3px;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btnMini:hover {
  background: rgba(4,2,13,.85);
  color: #fff;
  border-color: rgba(65,189,217,.3);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .donutGrid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .tabs      { flex-wrap: wrap; }
}