/* ══════════════════════════════════════════════════════════
   LEAGUE — Tabelle (standings table) + Nächstes Spiel card
   Shared — used on index and potentially on dedicated league pages
══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────
   SECTION WRAPPER
───────────────────────────────────── */
.league-section {
  background:var(--surface);
  overflow-x:clip;
  width:100%;
}
.league-inner {
  max-width:90rem; margin:0 auto; padding:3rem 1.25rem;
  display:grid; grid-template-columns:minmax(0,1fr); gap:2rem; align-items:start;
}
@media (min-width:56.01rem) {
  .league-inner { padding:4.5rem 2rem; grid-template-columns:minmax(0,1fr) 30rem; gap:2rem; }
}

/* ─────────────────────────────────────
   STANDINGS TABLE (Tabelle)
───────────────────────────────────── */
.tabelle { width:100%; border-collapse:collapse; }
.tabelle thead tr { border-bottom:1px solid var(--border); }
.tabelle th {
  padding:.625rem .75rem;
  font-size: 1.2rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); text-align:center;
}
.tabelle th:nth-child(2) { text-align:left; padding-left:0; }
.tabelle tbody tr {
  border-bottom:1px solid rgba(var(--rgb-white),.04);
  transition:background .12s;
}
.tabelle tbody tr:hover { background:rgba(var(--rgb-white),.03); }

/* SV Lippstadt row — red text, normal background */
.tabelle tbody tr.svl { background: transparent; }
.tabelle tbody tr.svl td { color: var(--red) !important; }

.tabelle td {
  padding:.6875rem .75rem; font-size: 1.2rem;
  color:var(--muted); text-align:center; vertical-align:middle;
}
.tabelle td:nth-child(2) {
  text-align:left; font-size: 1.2rem; font-weight:600;
  color:var(--white); padding-left:0;
}
.td-rank {
  font-family:'Teko',sans-serif;
  font-size: 1.2rem; font-weight:900; color:var(--faint); width:2.25rem;
}
.svl .td-rank { color:var(--red)!important; }
.td-pts {
  font-family:'Teko',sans-serif;
  font-size: 1.2rem; font-weight:900; color:var(--white)!important;
}
.svl .td-pts { color:var(--red)!important; }
.tabelle tbody tr.svl td:nth-child(2) { color:var(--red)!important; }

/* Form dots */
.td-form { display:flex; gap:.1875rem; justify-content:center; }
.dot { width:.5rem; height:.5rem; }
.w { background:var(--green); }
.d { background:var(--amber); }
.l { background:var(--faint); }

/* Mobile table: hide S/U/N (col-sun) columns */
@media (max-width:56rem) {
  .tabelle-wrap { overflow-x:visible; }
  .tabelle .col-sun { display:none !important; }
  .tabelle th, .tabelle td { padding:.5rem .375rem; font-size: 1.2rem; }
  .tabelle td:nth-child(2),
  .tabelle thead th:nth-child(2) { padding-left:0; font-size: 1.2rem; white-space:normal; min-width:5rem; }
  .td-form { gap:.125rem; }
  .dot { width:.375rem; height:.375rem; }
}
@media screen and (max-width:896px) {
  th.col-sun, td.col-sun { display:none !important; }
}

/* ─────────────────────────────────────
   NÄCHSTES SPIEL CARD (NMC)
   Mobile-first: compact stacked layout.
───────────────────────────────────── */
.nmc {
  background:var(--off-black);
  border:1px solid var(--border);
  border-top:2px solid var(--red);

  padding:1.125rem;
  position:relative;
  width:100%; max-width:100%;
  box-sizing:border-box;
  min-width:0;
}
/* CI texture overlay */
.nmc::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:var(--ci-texture);
  background-size:18.75rem; opacity:.2;

}

.nmc-lbl {
  font-size: 1.2rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--red);
  margin-bottom:.875rem; position:relative; z-index:1;
  display:flex; align-items:center; gap:.5rem;
}
.nmc-league-logo-lg {
  height: 4rem;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  opacity: .8;
}

/* Matchup */
.nmc-matchup {
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; margin-bottom:.875rem;
  position:relative; z-index:1;
  width:100%;
}
.nmc-club {
  display:flex; flex-direction:column; align-items:center;
  gap:.3rem; flex:1; min-width:0;
}
.club-logo {
  width:2.75rem; height:2.75rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.club-logo svg { width:100%; height:100%; display:block; }
.club-logo img { width:100%; height:100%; object-fit:contain; display:block; }

.club-short { display:none; }
.club-name {
  font-family:'Teko',sans-serif;
  font-size: 1rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.03em; color:var(--white); text-align:center;
  word-break:break-word; max-width:100%;
}

.nmc-vs-block {
  flex-shrink:0; padding:0 .25rem;
  display:flex; align-items:center; justify-content:center;
}
.nmc-vs {
  font-family:'Teko',sans-serif;
  font-size: 1.2rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint);
}
.nmc-score {
  font-family:'Teko',sans-serif;
  font-size:2rem; font-weight:900; letter-spacing:.02em;
  color:var(--white); line-height:1;
}

/* Live state */
.live-dot {
  display:inline-block; width:.5rem; height:.5rem;
  border-radius:50%; background:var(--red);
  animation:live-pulse 1.4s ease-in-out infinite;
}
@keyframes live-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.4; transform:scale(.75); }
}
.nmc-live-info {
  display:flex; align-items:center; justify-content:center;
  margin-bottom:.875rem; position:relative; z-index:1;
}
.nmc-live-label {
  font-family:'Teko',sans-serif;
  font-size:1.2rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--red);
}

/* Details — stacked on mobile */
.nmc-details {
  display:flex; flex-direction:column; gap:.375rem;
  margin-bottom:.875rem;
  padding:.75rem;
  background:var(--surface2);
  width:100%; box-sizing:border-box;
  position:relative; z-index:1;
}
.nmc-detail-item {
  display:flex; align-items:center; gap:.4375rem;
  font-size: 1.2rem; color:var(--white);
  line-height:1.3;
}
.nmc-detail-item svg {
  width:.875rem; height:.875rem;
  flex-shrink:0; stroke:var(--faint);
  fill:none; stroke-width:1.5; stroke-linecap:round;
}
.nmc-detail-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.15);
  transition: color .15s, border-color .15s;
}
.nmc-detail-link:hover {
  color: var(--white);
  border-color: rgba(255,255,255,.45);
}

/* Vorbericht-Link footer — mirrors hero-result-footer */
.nmc-footer {
  display: flex; flex-direction: column; align-items: flex-end; gap: .25rem;
  padding-top: .5rem;
  position: relative; z-index: 1;
}

/* Countdown */
.nmc-countdown {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:.5rem; margin-bottom:.875rem;
  position:relative; z-index:1;
  width:100%; box-sizing:border-box;
}
.cd-unit {
  background:var(--black); border:1px solid var(--border);
 padding:.5rem .375rem; text-align:center;
}
.cd-num {
  font-family:'Teko',sans-serif;
  font-size:1.625rem; font-weight:900; line-height:1; color:var(--white);
}
.cd-lbl {
  font-size: 1.2rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); margin-top:.125rem;
}

/* Desktop enhancements */
@media (min-width:56.01rem) {
  .nmc { padding:1.5rem; }
  .club-logo { width:3.25rem; height:3.25rem; }
  .nmc-vs     { font-size: 1.2rem; }
  .cd-num     { font-size:1.875rem; }
  .nmc-details { flex-direction:row; flex-wrap:wrap; gap:.5rem 1.2rem; }
  .nmc-detail-item { font-size: 1.2rem; }
}


/* ─────────────────────────────────────
   PLAYER AVATAR (used in league context)
───────────────────────────────────── */
.player-avatar {
  width:3.5rem; height:3.5rem;
  background:var(--surface2); border:2px solid var(--border);
  margin-bottom:.875rem; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.player-avatar svg { width:2rem; height:2rem; stroke:var(--faint); fill:none; stroke-width:1.5; }

/* ── Empty states ── */
.tabelle-empty,
.nmc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 2.5rem 1.2rem;
  color: var(--muted);
  font-size: 1.2rem;
  text-align: center;
}
.tabelle-empty svg,
.nmc-empty svg { stroke: var(--faint); }