/* ============================================================
   NEXUS.GG — Components
   Cards · Badges · Pills · Match · Player · Tournament ·
   Prediction · Intel · Table · Input · Button · Toast · States
   ============================================================ */

/* ── Base card ────────────────────────────────────────────── */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.card-interactive { cursor: pointer; position: relative; overflow: hidden; }
.card-interactive:hover {
  border-color: var(--border-default);
  background: var(--bg-float);
  box-shadow: var(--shadow-sm);
}
/* Gold shimmer line at top on hover */
.card-interactive::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-dim) 30%, var(--gold) 50%, var(--gold-dim) 70%, transparent 100%);
  opacity: 0; transition: opacity var(--transition); pointer-events: none; z-index: 1;
}
.card-interactive:hover::after { opacity: 1; }

/* ── Stat card ────────────────────────────────────────────── */
.stat-card {
  padding: calc(var(--space)*2) calc(var(--space)*2.25);
  display: flex; flex-direction: column; gap: 4px;
  border-top: 2px solid var(--gold-border);
  position: relative; overflow: hidden;
}
/* Ambient gold tint wash behind stat value */
.stat-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 60px;
  background: linear-gradient(180deg, var(--gold-subtle), transparent);
  pointer-events: none;
}
.stat-label {
  font-family: 'JetBrains Mono', monospace; font-size: 0.625rem;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-faint);
  position: relative; z-index: 1;
}
.stat-value {
  font-family: 'Syne', sans-serif; font-size: 1.75rem; font-weight: 700;
  line-height: 1.1; color: var(--text-primary); position: relative; z-index: 1;
}
.stat-sub { font-size: 0.75rem; color: var(--text-muted); position: relative; z-index: 1; }
.stat-value.is-gold   { color: var(--gold); }
.stat-value.is-teal   { color: var(--accent-teal); }
.stat-value.is-live   { color: var(--accent-live); }
.stat-value.is-purple { color: var(--accent-purple); }
.stat-value.is-blue   { color: var(--accent-blue); }

/* ── Status badges ────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: var(--radius-sm);
  font-family: 'JetBrains Mono', monospace; font-size: 0.625rem;
  font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase;
  width: fit-content; white-space: nowrap;
}
.badge-live     { background: rgba(229,76,76,0.12);  border: 1px solid rgba(229,76,76,0.30);  color: var(--accent-live); }
.badge-upcoming { background: rgba(74,144,217,0.10); border: 1px solid rgba(74,144,217,0.25); color: var(--accent-blue); }
.badge-finished { background: rgba(154,138,170,0.08);border: 1px solid var(--border-subtle);  color: var(--text-faint); }
.badge-major    { background: var(--gold-subtle);    border: 1px solid var(--gold-border);    color: var(--gold); }
.badge-teal     { background: rgba(45,225,178,0.10); border: 1px solid rgba(45,225,178,0.25); color: var(--accent-teal); }

/* ── Match card ───────────────────────────────────────────── */
.match-card {
  padding: calc(var(--space)*1.75) calc(var(--space)*2.25);
  display: grid; grid-template-columns: 140px 1fr auto;
  align-items: center; gap: calc(var(--space)*1.5);
  margin-bottom: var(--space);
}
.match-meta   { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.match-game   { font-family: 'JetBrains Mono', monospace; font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.match-league { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-teams  { display: flex; flex-direction: column; gap: 7px; }
.match-team-row { display: flex; align-items: center; gap: 10px; }
.match-vs     { font-size: 0.625rem; color: var(--text-faint); letter-spacing: 0.06em; text-align: center; font-family: 'JetBrains Mono', monospace; }
.match-format {
  font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; color: var(--text-faint);
  background: var(--bg-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); padding: 4px 10px; white-space: nowrap; align-self: center;
}

/* ── Team logo ────────────────────────────────────────────── */
.team-logo {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne', sans-serif; font-size: 0.5625rem; font-weight: 700;
  flex-shrink: 0; overflow: hidden;
}
.team-logo img       { width: 100%; height: 100%; object-fit: contain; }
.team-logo.placeholder { background: var(--bg-float); color: var(--text-muted); border: 1px solid var(--border-subtle); }
.team-name           { font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.team-name.is-winner { color: var(--text-primary); font-weight: 600; }
.team-score          { font-family: 'Syne', sans-serif; font-size: 1.125rem; font-weight: 700; min-width: 20px; text-align: right; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.team-score.is-winner { color: var(--accent-teal); }
.team-score.is-loser  { color: var(--text-faint); }

/* ── Filter pills ─────────────────────────────────────────── */
.filter-pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.filter-pill {
  padding: 5px 14px; border-radius: var(--radius-pill);
  font-family: 'Syne', sans-serif; font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.05em; border: 1px solid var(--border-subtle);
  color: var(--text-faint); background: transparent;
  transition: all var(--transition); white-space: nowrap;
}
.filter-pill:hover    { border-color: var(--border-default); color: var(--text-secondary); background: var(--bg-raised); }
.filter-pill.is-active { background: var(--gold-subtle); border-color: var(--gold-dim); color: var(--gold); }

/* ── Player row ───────────────────────────────────────────── */
.player-row {
  display: grid; grid-template-columns: 32px 1fr auto auto auto;
  align-items: center; gap: 12px;
  padding: calc(var(--space)*1.25) calc(var(--space)*2); margin-bottom: 6px;
}
.player-rank        { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--text-faint); text-align: center; font-variant-numeric: tabular-nums; }
.player-rank.is-top { color: var(--gold); font-weight: 700; }
.player-info        { min-width: 0; }
.player-ign         { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-team-label  { font-size: 0.6875rem; color: var(--text-muted); white-space: nowrap; }
.player-game-tag    { font-family: 'JetBrains Mono', monospace; font-size: 0.5625rem; color: var(--text-faint); border: 1px solid var(--border-subtle); border-radius: 3px; padding: 2px 6px; white-space: nowrap; }
.stat-bar-col       { display: flex; flex-direction: column; gap: 3px; min-width: 80px; }
.stat-bar-label     { font-family: 'JetBrains Mono', monospace; font-size: 0.5625rem; color: var(--text-faint); letter-spacing: 0.06em; }
.stat-bar-track     { background: var(--bg-raised); border-radius: 3px; height: 4px; overflow: hidden; }
.stat-bar-fill      { height: 4px; border-radius: 3px; transition: width 0.6s ease; }
.player-kda-value   { font-family: 'Syne', sans-serif; font-size: 0.875rem; font-weight: 700; color: var(--accent-teal); min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Prediction card ──────────────────────────────────────── */
.pred-card      { padding: calc(var(--space)*2.25); display: flex; flex-direction: column; gap: calc(var(--space)*1.75); }
.pred-matchup   { display: flex; align-items: center; justify-content: space-between; }
.pred-team      { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.pred-team-logo { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-size: 0.75rem; font-weight: 700; overflow: hidden; border: 1px solid var(--border-subtle); }
.pred-team-logo img { width: 100%; height: 100%; object-fit: contain; }
.pred-team-name { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); text-align: center; }
.pred-vs-label  { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--text-faint); padding: 0 12px; }
.pred-bar-wrap  { display: flex; flex-direction: column; gap: 6px; }
.pred-bar-row   { display: flex; align-items: center; gap: 8px; }
.pred-pct       { font-family: 'Syne', sans-serif; font-size: 0.8125rem; font-weight: 700; min-width: 36px; font-variant-numeric: tabular-nums; }
.pred-pct.is-a  { color: var(--gold); }
.pred-pct.is-b  { color: var(--accent-purple); text-align: right; }
.pred-bar-track { flex: 1; background: var(--bg-raised); border-radius: 4px; height: 8px; overflow: hidden; display: flex; }
.pred-fill-a    { height: 8px; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); border-radius: 4px 0 0 4px; transition: width 0.7s ease; }
.pred-fill-b    { flex: 1; height: 8px; background: linear-gradient(90deg, var(--accent-purple), #7050a8); border-radius: 0 4px 4px 0; }
.pred-factors   { display: flex; gap: 6px; flex-wrap: wrap; }
.pred-factor-tag { font-family: 'JetBrains Mono', monospace; font-size: 0.5625rem; color: var(--text-faint); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 3px 8px; white-space: nowrap; }

/* ── Tournament card ──────────────────────────────────────── */
.tournament-card    { padding: calc(var(--space)*2); display: flex; flex-direction: column; gap: calc(var(--space)*1.25); }
.tournament-header  { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tournament-logo    { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: contain; background: var(--bg-float); border: 1px solid var(--border-subtle); padding: 4px; flex-shrink: 0; }
.tournament-name    { font-family: 'Syne', sans-serif; font-size: 0.875rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.tournament-series  { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.tournament-meta    { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tournament-prizepool { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--gold); font-weight: 500; }
.tournament-dates   { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; color: var(--text-faint); }
.tournament-teams-count { font-size: 0.6875rem; color: var(--text-muted); }

/* ── Intel feed item ──────────────────────────────────────── */
.intel-item     { display: flex; gap: 14px; align-items: flex-start; padding: calc(var(--space)*1.5) calc(var(--space)*2); }
.intel-dot      { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.intel-body     { flex: 1; min-width: 0; }
.intel-headline { font-size: 0.8125rem; font-weight: 500; color: var(--text-primary); line-height: 1.45; margin-bottom: 4px; }
.intel-meta     { font-family: 'JetBrains Mono', monospace; font-size: 0.625rem; color: var(--text-faint); letter-spacing: 0.04em; }
.intel-type-tag { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.5625rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; margin-right: 6px; }
.intel-type-tag.roster { background: rgba(45,225,178,0.10); color: var(--accent-teal); }
.intel-type-tag.result { background: rgba(74,144,217,0.10); color: var(--accent-blue); }
.intel-type-tag.update { background: var(--gold-subtle);    color: var(--gold); }

/* ── Data tables ──────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.data-table th { font-family: 'JetBrains Mono', monospace; font-size: 0.5625rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-faint); text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.data-table th:first-child { padding-left: 0; }
.data-table th:last-child  { text-align: right; }
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: middle; }
.data-table td:first-child { padding-left: 0; }
.data-table td:last-child  { text-align: right; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg-float); }
.data-table .td-mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.data-table .td-gold { font-family: 'JetBrains Mono', monospace; color: var(--gold); font-weight: 500; }
.data-table .td-teal { font-family: 'JetBrains Mono', monospace; color: var(--accent-teal); font-weight: 600; }

/* ── Standings table ──────────────────────────────────────── */
.standings-table { width: 100%; border-collapse: collapse; }
.standings-table th,.standings-table td { padding: 8px 10px; text-align: center; font-size: 0.75rem; border-bottom: 1px solid var(--border-subtle); }
.standings-table th { font-family: 'JetBrains Mono', monospace; font-size: 0.5625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.standings-table td.td-team { text-align: left; padding-left: 0; }
.standings-table .td-rank { color: var(--text-faint); font-weight: 600; }
.standings-table .td-w    { color: var(--accent-teal); font-weight: 700; }
.standings-table .td-l    { color: var(--accent-live); }

/* ── Themed input ─────────────────────────────────────────── */
.nexus-input {
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-family: 'Inter', sans-serif; font-size: 0.8125rem;
  padding: 6px 14px; outline: none; width: 220px;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.nexus-input::placeholder { color: var(--text-faint); }
.nexus-input:focus { border-color: var(--border-default); background: var(--bg-float); box-shadow: 0 0 0 3px var(--gold-subtle); }

/* ── Button ───────────────────────────────────────────────── */
.nexus-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Syne', sans-serif; font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.06em; color: var(--text-muted);
  background: transparent; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill); padding: 5px 14px;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.nexus-btn:hover { color: var(--text-secondary); border-color: var(--border-default); background: var(--bg-raised); }
.nexus-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.nexus-btn.is-primary { background: var(--gold-subtle); border-color: var(--gold-border); color: var(--gold); }
.nexus-btn.is-primary:hover { background: rgba(184,149,44,0.18); border-color: var(--gold-border-hv); color: var(--gold-bright); }

/* ── Pagination button ────────────────────────────────────── */
.pagination-btn {
  font-family: 'Syne', sans-serif; font-size: 0.75rem; font-weight: 600;
  padding: 5px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle); background: transparent; color: var(--text-faint);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.pagination-btn:hover:not(:disabled) { border-color: var(--border-default); color: var(--text-secondary); background: var(--bg-raised); }
.pagination-btn.is-active,.pagination-btn:disabled { border-color: var(--gold-dim); background: var(--gold-subtle); color: var(--gold); cursor: default; }

/* ── Loading row + spinner ────────────────────────────────── */
.loading-row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: calc(var(--space)*4) calc(var(--space)*3);
  color: var(--text-faint); font-size: 0.8125rem;
  font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em;
}
.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border-subtle); border-top-color: var(--gold);
  border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0;
}

/* ── Toast ────────────────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: 24px; right: 28px;
  z-index: var(--z-toast);   /* 1000 > grain overlay 999 */
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  background: var(--bg-float); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: 12px 16px;
  font-size: 0.8125rem; color: var(--text-secondary);
  box-shadow: var(--shadow-md); animation: fadeIn 0.22s ease both;
  pointer-events: auto; display: flex; align-items: center; gap: 8px;
  max-width: 320px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.toast.is-error   { border-color: rgba(229,76,76,0.40); }
.toast.is-success { border-color: rgba(45,225,178,0.35); }

/* ── Empty / error state ──────────────────────────────────── */
.empty-state       { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--space)*6) calc(var(--space)*3); text-align: center; gap: calc(var(--space)*1.5); }
.empty-state-icon  { font-size: 2.25rem; opacity: 0.38; }
.empty-state-title { font-family: 'Syne', sans-serif; font-size: 0.9375rem; font-weight: 600; color: var(--text-muted); }
.empty-state-sub   { font-size: 0.8125rem; color: var(--text-faint); max-width: 280px; line-height: 1.55; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 860px) {
  .match-card { grid-template-columns: 110px 1fr; }
  .match-format { display: none; }
  .player-row { grid-template-columns: 28px 1fr auto; }
  .stat-bar-col, .player-game-tag { display: none; }
}
@media (max-width: 640px) {
  .pred-card { padding: calc(var(--space)*1.5); }
  .tournament-card { padding: calc(var(--space)*1.5); }
  .nexus-input { width: 160px; }
}