/* RFES Dashboard — Design-System
   Palette an mega-bowl.de angelehnt: sehr dunkler Grund, Deep-Indigo-Glas-
   Karten, Gold als Akzent, Sky-Blue als zweiter Akzent (Wahrscheinlichkeits-
   balken, Links). Dark-mode-only, mobile-first. */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&display=swap');

:root {
  --bg: #07070b;
  --indigo: #352f59;
  --indigo-glass: rgba(53, 47, 89, 0.45);
  --indigo-glass-strong: rgba(53, 47, 89, 0.72);
  --gold: #d29500;
  --gold-soft: rgba(210, 149, 0, 0.16);
  --sky: #80b8e0;
  --sky-soft: rgba(128, 184, 224, 0.16);
  --border: rgba(255, 255, 255, 0.09);
  --text: #f5f3fb;
  --text-muted: #b3aec6;
  --text-faint: #7d7896;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --max-width: 1080px;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  /* Dezente Yard-Line-Streifen als Anklang ans Spielfeld - sehr niedrige
     Deckkraft, liegt unter allen Karten/Inhalten, keine Ablenkung. */
  background:
    repeating-linear-gradient(
      0deg,
      rgba(128, 184, 224, 0.035) 0px,
      rgba(128, 184, 224, 0.035) 1px,
      transparent 1px,
      transparent 96px
    ),
    radial-gradient(ellipse 140% 90% at 50% -10%, #1a1530 0%, var(--bg) 55%);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--sky); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px 48px;
}

/* ── Header / Nav ─────────────────────────────────────────────── */
.site-header {
  padding: 20px 16px 12px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
}
.brand-icon { flex: 0 0 auto; width: 40px; height: 40px; object-fit: contain; }

.hero-logo { display: flex; justify-content: center; margin: 4px 0 18px; }
.hero-logo img { width: 110px; height: 110px; object-fit: contain; }
.brand .cco {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, var(--gold), var(--sky));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand .sub {
  font-size: 12px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.main-nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid transparent;
  white-space: nowrap;
}
.main-nav a:hover { text-decoration: none; color: var(--text); }
.main-nav a.active {
  color: var(--text);
  background: var(--indigo-glass-strong);
  border-color: var(--border);
}

/* ── Cards / Glass ────────────────────────────────────────────── */
.card {
  background: var(--indigo-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  margin: 28px 0 12px;
}
.section-title:first-child { margin-top: 0; }

/* ── Week nav ─────────────────────────────────────────────────── */
.week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}
.week-nav button {
  background: var(--indigo-glass-strong);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.week-nav button:disabled { opacity: 0.35; cursor: default; }
.week-nav button:not(:disabled):hover { border-color: var(--sky); }
.week-nav .week-label {
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}
.week-nav .week-label small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 2px;
}

/* ── Owner-Pillen (Wochen-Prognose je Owner) ─────────────────────── */
.week-overview {
  display: flex;
  gap: 16px;
  margin-bottom: 22px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.owner-pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  flex: 1 1 320px;
}
.week-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 150px;
  flex: 0 0 auto;
}
.week-stats .stat-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: var(--indigo-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text-muted);
}
.week-stats .stat-row strong { color: var(--text); font-size: 14px; }
.week-stats .stat-row.correct strong { color: #6fcf7c; }
.week-stats .stat-row.wrong strong { color: #e5383b; }
.owner-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--indigo-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid var(--owner-color, var(--border));
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  overflow: hidden;
}
/* "Fuellstand" = Anteil prognostizierter Siege dieser Woche (predicted_wins/5),
   liegt als Balken hinter dem Inhalt - Inhalt braucht daher z-index. */
.owner-pill .pill-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--owner-color, var(--gold));
  opacity: 0.3;
  z-index: 0;
}
.owner-pill .pill-owner-logo { width: 25px; height: 25px; border-radius: 7px; position: relative; z-index: 1; flex: 0 0 auto; }
.owner-pill .pill-teams { display: flex; gap: 3px; position: relative; z-index: 1; }
.owner-pill .team-dot {
  width: 23px; height: 23px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 8.5px; font-weight: 800;
  border: 1.5px solid transparent;
  color: #fff;
  -webkit-text-stroke: 0.4px rgba(0,0,0,0.5);
}
.owner-pill .team-dot.predicted-win { border-color: var(--gold); }
.owner-pill .team-dot.predicted-loss { opacity: 0.4; }
.owner-pill .team-dot.correct { border-color: #6fcf7c; }
.owner-pill .team-dot.wrong { border-color: #e5383b; opacity: 0.75; }
.owner-pill .team-dot.bye { opacity: 0.22; }
.owner-pill .pill-count {
  font-size: 14px;
  font-weight: 800;
  color: var(--gold);
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

/* ── Game cards ───────────────────────────────────────────────── */
.game-list { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .game-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .game-list { grid-template-columns: repeat(3, 1fr); }
}

.game-card {
  position: relative;
  background-color: var(--indigo-glass);
  background-image: var(--favor-gradient, none);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.game-card.decided { opacity: 0.88; }

.watch-badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--gold);
  color: var(--bg);
  box-shadow: 0 2px 10px rgba(210,149,0,0.4);
  white-space: nowrap;
}

.result-badge {
  display: block;
  width: fit-content;
  margin: 10px auto 0;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.result-badge.correct { color: #0a1a0a; background: #6fcf7c; }
.result-badge.wrong { color: #1a0a0a; background: #e5383b; }

.kickoff-time {
  text-align: center;
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 10px;
}

.game-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.team-block { display: flex; flex-direction: column; gap: 4px; flex: 0 1 auto; min-width: 0; }
.team-block.away { align-items: flex-end; text-align: right; }
.team-block.home { align-items: flex-start; text-align: left; }

.team-abbr {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow:
    -1px -1px 0 var(--stroke, #fff), 1px -1px 0 var(--stroke, #fff),
    -1px  1px 0 var(--stroke, #fff), 1px  1px 0 var(--stroke, #fff),
    0 -1px 0 var(--stroke, #fff), 0 1px 0 var(--stroke, #fff),
    -1px 0 0 var(--stroke, #fff), 1px 0 0 var(--stroke, #fff);
}
.team-owner {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-faint);
}
.owner-logo { width: 16px; height: 16px; border-radius: 4px; object-fit: cover; }

.team-abbr-row { display: inline-flex; align-items: center; gap: 6px; }
.status-marker {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--border);
  flex: 0 0 auto;
}
.status-marker.favorite { background: var(--gold); border-color: var(--gold); }
.status-marker.underdog { background: transparent; }
.status-marker.won { background: #6fcf7c; border-color: #6fcf7c; }
.status-marker.lost { background: #e5383b; border-color: #e5383b; }
.status-marker.was-favorite { border-color: var(--gold); border-width: 2px; }
.owner-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 4px;
  background: var(--indigo);
  font-size: 8px;
  font-weight: 800;
  color: var(--sky);
}

.game-score {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-faint);
  text-align: center;
  min-width: 46px;
}
.game-score .vs { color: var(--text-faint); font-weight: 600; }
.game-score .final { color: var(--gold); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; display:block; margin-top:2px; }

/* Win-probability bar */
.prob-bar-wrap { margin-top: 14px; }
/* Zwei Segmente statt einem wachsenden Balken: Segment-Reihenfolge und
   -Breite folgen exakt den Labels darunter (away links, home rechts) -
   sonst sieht ein Away-Favorit optisch so aus, als fuehre das Home-Team. */
.prob-bar {
  display: flex;
  height: 5px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
}
.prob-bar-seg {
  height: 100%;
  background: var(--seg-color, rgba(255,255,255,0.15));
  opacity: 0.38;
}
.prob-bar-seg.favorite {
  opacity: 1;
}
.prob-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}
.prob-labels strong { color: var(--text); }

.game-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-faint);
}
.confidence-chip {
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--border);
}
.confidence-chip.toss-up { color: var(--sky); border-color: rgba(128,184,224,0.28); }
.confidence-chip.lean { color: var(--sky); border-color: rgba(128,184,224,0.55); }
.confidence-chip.likely { color: var(--gold); border-color: rgba(210,149,0,0.35); }
.confidence-chip.strong { color: var(--gold); border-color: rgba(210,149,0,0.65); }
.confidence-chip.lock { color: var(--bg); background: var(--gold); border-color: var(--gold); }

.no-prediction { font-size: 11px; color: var(--text-faint); font-style: italic; }

.upset-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sky);
  background: var(--sky-soft);
  border: 1px solid rgba(128,184,224,0.35);
}

/* ── Powerranking ─────────────────────────────────────────────── */
.rank-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.rank-columns { display: flex; flex-direction: column; gap: 8px; }
.rank-columns .rank-list { flex: 1; min-width: 0; margin-bottom: 0; }
@media (min-width: 640px) {
  .rank-columns { flex-direction: row; gap: 16px; }
}
.rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--indigo-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.rank-number {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-faint);
  width: 24px;
  text-align: center;
  flex: 0 0 auto;
}
.rank-movement {
  font-size: 11px;
  font-weight: 700;
  width: 30px;
  text-align: center;
  flex: 0 0 auto;
}
.rank-movement.up { color: #6fcf7c; }
.rank-movement.down { color: #e5383b; }
.rank-movement.flat { color: var(--text-faint); }
.rank-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.rank-main img, .rank-main .owner-badge { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; }
.rank-main .rank-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 0 1 auto;
  text-shadow:
    -1px -1px 0 var(--stroke, transparent), 1px -1px 0 var(--stroke, transparent),
    -1px  1px 0 var(--stroke, transparent), 1px  1px 0 var(--stroke, transparent),
    0 -1px 0 var(--stroke, transparent), 0 1px 0 var(--stroke, transparent),
    -1px 0 0 var(--stroke, transparent), 1px 0 0 var(--stroke, transparent);
}
.rank-main .rank-sub {
  font-size: 11px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
.rank-value {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  flex: 0 0 auto;
  font-size: 14px;
  white-space: nowrap;
}
.rank-prev-value {
  font-weight: 600;
  color: var(--text-faint);
  font-size: 11px;
}

/* ── Owner-Filter (Teams-Seite) ──────────────────────────────────── */
.owner-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.owner-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-muted);
  background: var(--indigo-glass);
  border: 1px solid var(--border);
  cursor: pointer;
}
.owner-filter-btn img, .owner-filter-btn .owner-badge { width: 16px; height: 16px; border-radius: 4px; }
.owner-filter-btn:hover { color: var(--text); }
.owner-filter-btn.active { color: var(--text); background: var(--indigo-glass-strong); border-color: var(--gold); }

/* ── Tables ───────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; background: var(--indigo-glass); backdrop-filter: blur(14px); }
th, td { padding: 12px 14px; text-align: left; font-size: 13px; white-space: nowrap; }
th {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-faint); border-bottom: 1px solid var(--border);
  font-weight: 700;
}
tbody tr { border-bottom: 1px solid rgba(255,255,255,0.05); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: rgba(255,255,255,0.03); }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th.sortable.active { color: var(--gold); }
th.sortable::after { content: '⇅'; margin-left: 4px; opacity: 0.4; font-size: 9px; }
th.sortable.active[data-dir="desc"]::after { content: '↓'; opacity: 1; }
th.sortable.active[data-dir="asc"]::after { content: '↑'; opacity: 1; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.rank { color: var(--text-faint); font-weight: 700; width: 24px; }

.team-cell { white-space: normal; }
.team-cell-owner {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-faint);
}
.team-swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

/* ── Modell page ──────────────────────────────────────────────── */
.prose { max-width: 720px; }
.prose h2 { font-size: 18px; margin: 28px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--text-muted); margin: 0 0 12px; }
.prose code {
  background: var(--indigo-glass-strong);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--sky);
}
.callout {
  border-left: 3px solid var(--gold);
  background: var(--gold-soft);
  padding: 12px 16px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px;
  color: var(--text);
  margin: 16px 0;
}

/* ── Misc ─────────────────────────────────────────────────────── */
.loading, .empty-state {
  text-align: center;
  color: var(--text-faint);
  padding: 40px 16px;
  font-size: 13px;
}
.footer-note {
  text-align: center;
  color: var(--text-faint);
  font-size: 11px;
  margin-top: 36px;
  line-height: 1.7;
}

@media (min-width: 640px) {
  body { font-size: 15.5px; }
  .game-teams { grid-template-columns: 1fr auto 1fr; }
  .team-abbr { font-size: 26px; }
}