/* ============================================================
   WG3ATHLON — Neon Dark Theme
   Overrides Bootstrap 5; CSS variables for all color tokens
   ============================================================ */

:root {
  /* Hintergründe */
  --bg-primary:      #0A0A12;
  --bg-card:         #1A0A2E;
  --bg-input:        #12121A;

  /* Akzentfarben */
  --color-cyan:      #00D9F5;
  --color-cyan-dk:   #00A3B8;
  --color-yellow:    #F5C800;
  --color-yellow-dk: #B8960A;
  --color-pink:      #E8175D;

  /* Text */
  --text-primary: #F5F5F0;
  --text-muted: #babac4;

  /* Borders */
  --border-default: 1px solid rgba(0, 217, 245, 0.3);
  --border-accent:  1px solid #00D9F5;

  /* Bootstrap-Variablen überschreiben — verhindert schwarze Texte in allen Komponenten */
  --bs-body-bg:           #0A0A12;
  --bs-body-color:        #F5F5F0;
  --bs-secondary-color:   #8A8A9A;
  --bs-emphasis-color:    #F5F5F0;
  --bs-card-bg:           #1A0A2E;
  --bs-card-color:        #F5F5F0;
  --bs-modal-bg:          #1A0A2E;
  --bs-modal-color:       #F5F5F0;
  --bs-border-color:      rgba(0, 217, 245, 0.3);
  --bs-table-color:       #F5F5F0;
  --bs-table-bg:          transparent;
  --bs-table-border-color: rgba(0, 217, 245, 0.15);
  --bs-table-striped-bg:  rgba(0, 217, 245, 0.03);
  --bs-table-hover-bg:    rgba(0, 217, 245, 0.06);
  --bs-light:             rgba(0, 217, 245, 0.06);
  --bs-light-rgb:         0, 30, 40;
  --bs-dark-rgb:          245, 245, 240;
}

/* ── Body ──────────────────────────────────────────────────── */
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { color: var(--text-primary); }
p, li, td, th, label, span, div { color: inherit; }
.text-muted   { color: var(--text-muted)   !important; }
.text-success { color: var(--color-cyan)   !important; }
.text-primary { color: var(--color-cyan)   !important; }
.text-warning { color: var(--color-yellow) !important; }
.text-danger  { color: var(--color-pink)   !important; }
.text-info    { color: var(--color-cyan)   !important; }
/* Bootstrap's .text-dark und .text-body zeigen sonst #212529 auf dunklem BG */
.text-dark    { color: var(--text-muted)   !important; }
.text-body    { color: var(--text-primary) !important; }
.text-black   { color: var(--text-primary) !important; }
.bg-white     { background-color: var(--bg-card) !important; color: var(--text-primary); }
a             { color: var(--color-cyan); }
a:hover       { color: var(--color-cyan-dk); }

/* ── Navbar ────────────────────────────────────────────────── */
.navbar {
  background: linear-gradient(135deg, #0D0D1A 0%, #150A28 100%) !important;
  border-bottom: var(--border-default);
}
.navbar-brand {
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--color-cyan) !important;
  letter-spacing: .5px;
}
.nav-link               { color: var(--text-primary)  !important; }
.nav-link:hover         { color: var(--color-cyan)     !important; }
.nav-link.points-display{ color: var(--color-yellow)   !important; font-weight: 600; }
.navbar-toggler         { border-color: rgba(0,217,245,.3); }
.navbar-toggler-icon    { filter: invert(1) brightness(.8); }

/* ── Dropdown ──────────────────────────────────────────────── */
.dropdown-menu {
  background: var(--bg-card);
  border: var(--border-default);
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
}
.dropdown-item           { color: var(--text-primary); }
.dropdown-item:hover,
.dropdown-item:focus     { background: rgba(0,217,245,.1); color: var(--color-cyan); }
.dropdown-divider        { border-color: rgba(0,217,245,.2); }

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: var(--border-default);
  border-radius: 12px;
  box-shadow: 0 2px 24px rgba(0,0,0,.5);
  color: var(--text-primary);
}
.card-header {
  background: rgba(0,217,245,.07);
  border-bottom: var(--border-default);
  color: var(--text-primary);
  border-radius: 12px 12px 0 0 !important;
}
.card-footer {
  background: rgba(0,217,245,.04);
  border-top: var(--border-default);
  color: var(--text-muted);
}

/* ── List Groups ───────────────────────────────────────────── */
.list-group-item {
  background: transparent;
  border-color: rgba(0,217,245,.15);
  color: var(--text-primary);
}
.list-group-item:hover        { background: rgba(0,217,245,.05); }
.list-group-flush .list-group-item { border-color: rgba(0,217,245,.12); }

/* Own-team highlight: pink instead of Bootstrap yellow */
.list-group-item-warning {
  background: rgba(232,23,93,.1) !important;
  border-left: 3px solid var(--color-pink) !important;
  color: var(--text-primary) !important;
}

/* ── Buttons — primary / success ──────────────────────────── */
.btn-primary,
.btn-success {
  background: var(--color-cyan);
  border-color: var(--color-cyan);
  color: #0A0A12;
  font-weight: 700;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus,
.btn-success:hover, .btn-success:active, .btn-success:focus {
  background: var(--color-cyan-dk);
  border-color: var(--color-cyan-dk);
  color: #0A0A12;
}

/* Outline buttons → transparent + cyan border */
.btn-outline-primary,
.btn-outline-success,
.btn-outline-secondary,
.btn-outline-light {
  background: transparent;
  border: var(--border-accent);
  color: var(--color-cyan);
}
.btn-outline-primary:hover,  .btn-outline-primary:focus,
.btn-outline-success:hover,  .btn-outline-success:focus,
.btn-outline-secondary:hover,.btn-outline-secondary:focus,
.btn-outline-light:hover,    .btn-outline-light:focus {
  background: rgba(0,217,245,.15);
  border-color: var(--color-cyan);
  color: var(--color-cyan);
}
.btn-outline-primary.disabled,
.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
  color: var(--text-muted);
  border-color: rgba(138,138,154,.3);
  background: transparent;
}

/* Warning */
.btn-warning {
  background: var(--color-yellow);
  border-color: var(--color-yellow);
  color: #0A0A12;
  font-weight: 700;
}
.btn-warning:hover { background: var(--color-yellow-dk); border-color: var(--color-yellow-dk); color: #0A0A12; }

/* Danger */
.btn-danger         { background: var(--color-pink); border-color: var(--color-pink); color: #fff; }
.btn-danger:hover   { background: #c0104a; border-color: #c0104a; color: #fff; }
.btn-outline-danger { border-color: var(--color-pink); color: var(--color-pink); background: transparent; border: 1px solid var(--color-pink); }
.btn-outline-danger:hover { background: rgba(232,23,93,.15); color: var(--color-pink); border-color: var(--color-pink); }

/* Info */
.btn-outline-info {
  border: 1px solid var(--color-cyan);
  color: var(--color-cyan);
  background: transparent;
}
.btn-outline-info:hover, .btn-outline-info:focus {
  background: rgba(0,217,245,.15);
  border-color: var(--color-cyan);
  color: var(--color-cyan);
}

/* Warning outline */
.btn-outline-warning {
  border: 1px solid var(--color-yellow);
  color: var(--color-yellow);
  background: transparent;
}
.btn-outline-warning:hover, .btn-outline-warning:focus {
  background: rgba(245,200,0,.15);
  border-color: var(--color-yellow);
  color: var(--color-yellow);
}

/* Link */
.btn-link       { color: var(--color-cyan); }
.btn-link:hover { color: var(--color-cyan-dk); }

/* ── Forms ─────────────────────────────────────────────────── */
.form-control,
.form-select {
  background: var(--bg-input);
  border: var(--border-default);
  color: var(--text-primary);
}
.form-control:focus,
.form-select:focus {
  background: var(--bg-input);
  border-color: var(--color-cyan);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px rgba(0,217,245,.2);
}
.form-control::placeholder { color: var(--text-muted); }
.form-select option        { background: var(--bg-card); color: var(--text-primary); }
.form-label                { color: var(--text-primary); font-weight: 600; }
.form-text                 { color: var(--text-muted); }
.form-check-input {
  background-color: var(--bg-input);
  border-color: rgba(0,217,245,.4);
}
.form-check-input:checked {
  background-color: var(--color-cyan);
  border-color: var(--color-cyan);
}
.input-group-text {
  background: var(--bg-card);
  border: var(--border-default);
  color: var(--text-muted);
}

/* ── Alerts ────────────────────────────────────────────────── */
.alert {
  background: var(--bg-card);
  border: var(--border-default);
  color: var(--text-primary);
}
.alert-info    { background: rgba(0,217,245,.08);  border-color: rgba(0,217,245,.4);  color: var(--color-cyan); }
.alert-success { background: rgba(0,217,245,.08);  border-color: rgba(0,217,245,.4);  color: var(--color-cyan); }
.alert-warning { background: rgba(245,200,0,.08);  border-color: rgba(245,200,0,.4);  color: var(--color-yellow); }
.alert-danger  { background: rgba(232,23,93,.08);  border-color: rgba(232,23,93,.4);  color: var(--color-pink); }
.alert-light   { background: var(--bg-card);       border-color: rgba(0,217,245,.2);  color: var(--text-muted); }
.btn-close     { filter: invert(1) brightness(.7); }

/* ── Badges ────────────────────────────────────────────────── */
.badge.bg-success   { background: var(--color-cyan)   !important; color: #0A0A12 !important; }
.badge.bg-primary   { background: var(--color-cyan)   !important; color: #0A0A12 !important; }
.badge.bg-warning   { background: var(--color-yellow) !important; color: #0A0A12 !important; }
.badge.bg-danger    { background: var(--color-pink)   !important; color: #fff    !important; }
.badge.bg-secondary {
  background: rgba(0,217,245,.15) !important;
  color: var(--color-cyan) !important;
  border: var(--border-default);
}
.badge.bg-info      { background: rgba(0,217,245,.2)  !important; color: var(--color-cyan) !important; }
/* Die .badge.bg-* Regeln oben haben Spezifizität (0,2,0) und schlagen
   damit .text-dark (0,1,0) — kein weiteres Override nötig. */

/* ── Tables ────────────────────────────────────────────────── */
.table {
  color: var(--text-primary);
  border-color: rgba(0,217,245,.15);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(0,217,245,.03);
  --bs-table-hover-bg:   rgba(0,217,245,.06);
  --bs-table-border-color: rgba(0,217,245,.12);
}
.table thead th {
  background: rgba(0,217,245,.1);
  color: var(--color-cyan);
  border-color: rgba(0,217,245,.3);
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.table-dark {
  --bs-table-bg: rgba(0,217,245,.08);
  background: rgba(0,217,245,.08);
  color: var(--color-cyan);
}
/* Won/lost row highlights */
.table-success {
  --bs-table-bg: rgba(0,217,245,.07);
  --bs-table-hover-bg: rgba(0,217,245,.12);
  color: var(--text-primary) !important;
}
.table-danger {
  --bs-table-bg: rgba(232,23,93,.07);
  --bs-table-hover-bg: rgba(232,23,93,.12);
  color: var(--text-primary) !important;
}
.table-bordered { border-color: rgba(0,217,245,.15); }

/* Bootstrap's table-light bleibt sonst hell → dunkles Theme überschreiben */
.table-light {
  --bs-table-bg:    rgba(0,217,245,.08);
  --bs-table-color: var(--color-cyan);
}
.table > :not(caption) > .table-light > * {
  background-color: rgba(0,217,245,.08) !important;
  color: var(--color-cyan) !important;
}

/* Bootstrap's bg-light ist weiß/hellgrau → im Dark Theme unsichtbarer Text */
.bg-light {
  background-color: rgba(0,217,245,.06) !important;
  color: var(--text-primary) !important;
}
code { color: var(--color-cyan); }
pre  { color: var(--text-primary); }

/* ── Accordion ─────────────────────────────────────────────── */
.accordion-item {
  background: var(--bg-card);
  border-color: rgba(0,217,245,.2);
  color: var(--text-primary);
}
.accordion-button {
  background: var(--bg-card);
  color: var(--text-primary);
}
.accordion-button:not(.collapsed) {
  background: rgba(0,217,245,.1);
  color: var(--color-cyan);
  box-shadow: none;
}
.accordion-button::after { filter: invert(1) brightness(.7); }
.accordion-body { background: var(--bg-card); color: var(--text-primary); }

/* ── Hero Section ──────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, #0D0D1A 0%, #1A0A2E 100%);
  color: var(--text-primary);
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2rem;
  border: var(--border-default);
  box-shadow: 0 0 48px rgba(0,217,245,.08);
}

/* ── Round / Phase title ───────────────────────────────────── */
.round-title {
  background: linear-gradient(135deg, #0D0D1A, #1A0A2E);
  color: var(--color-cyan);
  border-radius: 8px;
  padding: .6rem 1.2rem;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  border: var(--border-default);
}

/* ── Odds pills ────────────────────────────────────────────── */
.odds-pill { display:inline-block; min-width:48px; text-align:center; font-weight:700; border-radius:6px; padding:2px 8px; font-size:.85rem; }
.odds-1  { background: rgba(0,217,245,.18);  color: var(--color-cyan);   border: 1px solid rgba(0,217,245,.4); }
.odds-x  { background: rgba(138,138,154,.15);color: var(--text-muted);   border: 1px solid rgba(138,138,154,.3); }
.odds-2  { background: rgba(245,200,0,.15);  color: var(--color-yellow); border: 1px solid rgba(245,200,0,.4); }
.odds-na { background: rgba(138,138,154,.1); color: var(--text-muted); }

/* ── Status badges ─────────────────────────────────────────── */
.status-upcoming { background: var(--color-cyan);  color: #0A0A12; }
.status-running  { background: var(--color-yellow); color: #0A0A12; }
.status-finished { background: rgba(138,138,154,.3); color: var(--text-muted); }

/* ── Match rows ────────────────────────────────────────────── */
.match-row        { transition: background .15s; }
.match-row:hover  { background: rgba(0,217,245,.05); }
.match-row.own-team {
  background: rgba(232,23,93,.07);
  border-left: 3px solid var(--color-pink);
}
.match-row.own-team:hover { background: rgba(232,23,93,.12); }

/* ── Leaderboard rank ──────────────────────────────────────── */
.leaderboard-rank { font-size: 1.5rem; font-weight: 800; }
.rank-1           { color: var(--color-yellow); }
.rank-2           { color: #C0C0C0; }
.rank-3           { color: #cd7f32; }

.rank-circle {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.85rem; flex-shrink:0;
  background: rgba(138,138,154,.2); color: var(--text-muted);
}
.rank-circle.rank-1 { background: linear-gradient(135deg,#ffd700,#f59e0b); color:#0A0A12; }
.rank-circle.rank-2 { background: linear-gradient(135deg,#d1d5db,#94a3b8); color:#0A0A12; }
.rank-circle.rank-3 { background: linear-gradient(135deg,#cd7f32,#b45309); color:#fff; }

/* ── Rules ─────────────────────────────────────────────────── */
.rules-card { border-left: 4px solid var(--color-cyan) !important; }

/* ── Footer ────────────────────────────────────────────────── */
footer {
  color: var(--text-muted);
  font-size: .85rem;
  padding: 2rem 0 1rem;
  text-align: center;
  border-top: var(--border-default);
  margin-top: 2rem;
}

/* ── Scrollbar (webkit) ────────────────────────────────────── */
::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: rgba(0,217,245,.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-cyan); }

/* =============================================================
   Dashboard-specific components
   ============================================================= */

/* Pulse dots */
.soon-dot    { display:inline-block; width:12px; height:12px; border-radius:50%; flex-shrink:0; background: var(--color-yellow); animation: pulse-y 1.5s infinite; }
.running-dot { display:inline-block; width:12px; height:12px; border-radius:50%; flex-shrink:0; background: var(--color-pink);   animation: pulse-r 1.5s infinite; }
@keyframes pulse-y { 0%,100%{ box-shadow:0 0 0 3px rgba(245,200,0,.3) } 50%{ box-shadow:0 0 0 7px rgba(245,200,0,.05) } }
@keyframes pulse-r { 0%,100%{ box-shadow:0 0 0 3px rgba(232,23,93,.3) } 50%{ box-shadow:0 0 0 7px rgba(232,23,93,.05) } }

/* "Starts soon" card */
.game-card-soon {
  border: 1px solid rgba(245,200,0,.35) !important;
  background: var(--bg-card);
}
.soon-header {
  background: rgba(245,200,0,.08) !important;
  border-bottom: 1px solid rgba(245,200,0,.25) !important;
  border-radius: 10px 10px 0 0;
}
.badge-round-label { font-size:.8rem; font-weight:700; color: var(--color-yellow); }
.countdown-badge   { background: var(--color-yellow); color:#0A0A12; font-weight:700; font-size:.8rem; padding:3px 10px; border-radius:20px; }

/* Teams VS circle */
.teams-vs  { display:flex; align-items:center; gap:8px; }
.team-box  { flex:1; text-align:center; }
.team-name { font-weight:700; font-size:.95rem; }
.vs-circle {
  width:32px; height:32px; flex-shrink:0; border-radius:50%;
  background: rgba(0,217,245,.08);
  border: 1px solid rgba(0,217,245,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:700; color: var(--text-muted);
}

/* Odds bar strip */
.odds-strip { display:flex; flex-direction:column; gap:6px; }
.odds-item  { display:grid; grid-template-columns:20px 48px 1fr 60px; align-items:center; gap:6px; }
.odds-key   { font-size:.7rem; font-weight:700; color: var(--text-muted); text-align:center; }
.odds-num   { font-size:.95rem; font-weight:800; text-align:right; }
.odds-bar-h { height:8px; background: rgba(138,138,154,.2); border-radius:4px; overflow:hidden; }
.odds-fill  { height:100%; border-radius:4px; }
.fill-1     { background: linear-gradient(90deg, var(--color-cyan), var(--color-cyan-dk)); }
.fill-2     { background: linear-gradient(90deg, var(--color-yellow), var(--color-yellow-dk)); }
.odds-tip-count { font-size:.75rem; color: var(--text-muted); }

/* My-tip pill */
.my-tip-pill {
  background: rgba(0,217,245,.07);
  border: 1px solid rgba(0,217,245,.25);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: .8rem;
  color: var(--text-primary);
}

/* Running row */
.running-row { border-left: 4px solid var(--color-pink); }

/* Upcoming row */
.upcoming-row:hover { background: rgba(0,217,245,.05) !important; }

/* Wett-Feed */
.feed-item { border-left: 4px solid rgba(138,138,154,.3); }
.feed-won  { border-left-color: var(--color-cyan);   background: rgba(0,217,245,.05); }
.feed-lost { border-left-color: var(--color-pink);   background: rgba(232,23,93,.05); }
.feed-open { border-left-color: var(--color-yellow); }

.feed-status-badge { display:inline-flex; align-items:center; gap:3px; font-size:.7rem; font-weight:700; padding:2px 7px; border-radius:20px; white-space:nowrap; }
.badge-won     { background: rgba(0,217,245,.2);  color: var(--color-cyan); }
.badge-lost    { background: rgba(232,23,93,.2);  color: var(--color-pink); }
.badge-open    { background: rgba(245,200,0,.2);  color: var(--color-yellow); }
.badge-running { background: rgba(0,217,245,.15); color: var(--color-cyan); }

/* =============================================================
   Spielplan (schedule) components
   ============================================================= */

/* Tournament flow pills */
.tournament-flow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 1rem 1.25rem;
  background: var(--bg-card);
  border-radius: 12px;
  border: var(--border-default);
  box-shadow: 0 2px 16px rgba(0,0,0,.4);
}
.phase-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px;
  font-weight: 600; font-size: .85rem;
  text-decoration: none;
  transition: transform .15s;
  border: 2px solid transparent;
}
.phase-pill:hover { transform: translateY(-1px); }
.phase-upcoming { background: rgba(138,138,154,.15); color: var(--text-muted);   border-color: rgba(138,138,154,.3); }
.phase-partial  { background: rgba(245,200,0,.12);   color: var(--color-yellow); border-color: rgba(245,200,0,.4); }
.phase-live     { background: rgba(232,23,93,.12);   color: var(--color-pink);   border-color: rgba(232,23,93,.4); animation: pulse-border 2s infinite; }
.phase-done     { background: rgba(0,217,245,.1);    color: var(--color-cyan);   border-color: rgba(0,217,245,.35); }
.phase-count    { background: rgba(0,0,0,.25); border-radius: 10px; padding: 1px 7px; font-size: .75rem; }
.flow-arrow     { color: var(--text-muted); font-size: .8rem; }
@keyframes pulse-border { 0%,100%{opacity:1} 50%{opacity:.55} }

/* Phase section header */
.phase-section { scroll-margin-top: 80px; }
.phase-header {
  display: flex; align-items: center; gap: 10px;
  padding: .75rem 1.25rem;
  background: var(--bg-card);
  border-radius: 10px;
  border-left: 5px solid var(--color-cyan);
  border: var(--border-default);
  border-left-width: 5px;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
  margin-bottom: 1rem;
}
.phase-title { font-size: 1.15rem; font-weight: 800; flex: 1; color: var(--text-primary); }
.phase-badge {
  background: rgba(0,217,245,.12);
  color: var(--color-cyan);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: .8rem;
  font-weight: 600;
}
.sub-phase-label {
  font-size: .9rem; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em;
  margin: 1rem 0 .5rem; padding-left: .5rem;
  border-left: 3px solid rgba(0,217,245,.3);
}

/* Discipline block */
.discipline-block  { margin-bottom: 1.25rem; }
.discipline-header {
  display: flex; align-items: center;
  padding: .5rem 1rem; border-radius: 8px;
  font-weight: 700; font-size: .95rem; margin-bottom: .5rem;
  color: #0A0A12;
}
.discipline-flunkyball  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.discipline-bierpong    { background: linear-gradient(135deg, var(--color-cyan), var(--color-cyan-dk)); }
.discipline-bierpong_1  { background: linear-gradient(135deg, #00D9F5, #00A3B8); }
.discipline-bierpong_2  { background: linear-gradient(135deg, #00BFA5, #00897B); }
.discipline-ragecage    { background: linear-gradient(135deg, var(--color-pink), #c0104a); }

/* Match table */
.match-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--bg-card);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 12px rgba(0,0,0,.4);
  margin-bottom: .5rem;
  border: var(--border-default);
}
.match-table thead tr { background: rgba(0,217,245,.1); }
.match-table thead th {
  padding: .6rem .75rem; font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-cyan); border-bottom: var(--border-default);
}
.match-table tbody tr  { border-bottom: 1px solid rgba(0,217,245,.08); color: var(--text-primary); }
.match-table tbody tr:last-child { border-bottom: none; }
.match-table tbody tr:hover { background: rgba(0,217,245,.05); }
.match-table tbody tr.own-team-row {
  background: rgba(232,23,93,.07);
  border-left: 3px solid var(--color-pink);
}
.match-table tbody tr.own-team-row:hover { background: rgba(232,23,93,.12); }
.match-table td { padding: .65rem .75rem; vertical-align: middle; font-size: .9rem; }

/* Venue badge */
.venue-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(0,217,245,.08); color: var(--text-muted);
  border-radius: 10px; padding: 1px 8px; font-size: .75rem;
  font-weight: 500; margin-left: 6px;
  border: var(--border-default);
}

/* Award card */
.award-card {
  background: var(--bg-card);
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,.5);
  overflow: hidden;
  border: var(--border-default);
  border-color: rgba(232,23,93,.3);
}
.award-card-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: .5rem;
  padding: .75rem 1rem;
  background: rgba(232,23,93,.08);
  border-bottom: 1px solid rgba(232,23,93,.2);
  color: var(--text-primary);
}
.award-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1px;
  background: rgba(0,217,245,.08);
  padding: 1px;
}
.award-result-item {
  background: var(--bg-card); padding: .75rem 1rem;
  display: flex; align-items: center; gap: .5rem;
}
.award-result-item.own-award {
  background: rgba(232,23,93,.1);
}
.award-placement {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.85rem; flex-shrink:0;
  background: rgba(138,138,154,.2); color: var(--text-muted);
}
.placement-1 { background: linear-gradient(135deg,#ffd700,#f59e0b); color:#0A0A12; }
.placement-2 { background: linear-gradient(135deg,#d1d5db,#9ca3af); color:#0A0A12; }
.placement-3 { background: linear-gradient(135deg,#cd7f32,#b45309); color:#fff; }
.placement-4,.placement-5,.placement-6,.placement-7,.placement-8 { background: rgba(232,23,93,.2); color: var(--color-pink); }
.award-team-name { flex:1; font-weight:600; font-size:.85rem; color: var(--text-primary); }
.award-pts       { font-weight:700; color: var(--color-yellow); font-size:.85rem; white-space:nowrap; }

/* =============================================================
   Rules page components
   ============================================================= */

.rule-card {
  background: var(--bg-card);
  border-radius: 14px;
  box-shadow: 0 2px 20px rgba(0,0,0,.5);
  overflow: hidden;
  border-left: 6px solid rgba(0,217,245,.3);
  border-top: var(--border-default);
  border-right: var(--border-default);
  border-bottom: var(--border-default);
}
.rule-card.discipline-flunkyball { border-left-color: #f59e0b; }
.rule-card.discipline-bierpong   { border-left-color: var(--color-cyan); }
.rule-card.discipline-ragecage   { border-left-color: var(--color-pink); }
.rule-card.discipline-kostuem    { border-left-color: #a855f7; }

.rule-card-header {
  display:flex; align-items:center; gap:1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(0,217,245,.12);
  background: rgba(0,217,245,.04);
}
.rule-icon-wrap {
  width:52px; height:52px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; flex-shrink:0;
}
.discipline-flunkyball .rule-icon-wrap { background: rgba(245,158,11,.15); color: #f59e0b; }
.discipline-bierpong   .rule-icon-wrap { background: rgba(0,217,245,.12);  color: var(--color-cyan); }
.discipline-ragecage   .rule-icon-wrap { background: rgba(232,23,93,.12);  color: var(--color-pink); }
.discipline-kostuem    .rule-icon-wrap { background: rgba(168,85,247,.12); color: #a855f7; }

.rule-title   { font-size:1.2rem; font-weight:800; color: var(--text-primary); }
.rule-content {
  padding: 1.25rem 1.5rem;
  white-space: pre-wrap; line-height: 1.7;
  color: var(--text-primary);
}

/* =============================================================
   Admin components
   ============================================================= */

.rule-admin-item {
  padding: .75rem 1rem; border-radius: 8px;
  border-left: 4px solid rgba(0,217,245,.3);
  background: rgba(0,217,245,.04);
  color: var(--text-primary);
}
.rule-admin-item.discipline-flunkyball { border-left-color: #f59e0b; }
.rule-admin-item.discipline-bierpong   { border-left-color: var(--color-cyan); }
.rule-admin-item.discipline-ragecage   { border-left-color: var(--color-pink); }
.rule-admin-item.discipline-kostuem    { border-left-color: #a855f7; }

.faq-admin-item {
  padding: .6rem .75rem; border-radius: 8px;
  background: rgba(0,217,245,.04);
  border: var(--border-default);
  color: var(--text-primary);
}
.btn-xs { padding: 1px 6px; font-size: .75rem; border-radius: 4px; }

/* ── Modals ────────────────────────────────────────────────── */
.modal-content {
  background-color: var(--bg-card);
  border: var(--border-default);
  color: var(--text-primary);
  box-shadow: 0 8px 40px rgba(0,0,0,.7);
}
.modal-header {
  background: rgba(0,217,245,.07);
  border-bottom: var(--border-default);
  color: var(--text-primary);
}
.modal-footer {
  background: rgba(0,217,245,.04);
  border-top: var(--border-default);
}
.modal-title { color: var(--text-primary); }
.modal-body  { color: var(--text-primary); }
.modal-backdrop { --bs-backdrop-opacity: 0.7; }

/* Placement badge (admin/award.html) */
.placement-badge {
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1rem;
  background: rgba(138,138,154,.2); color: var(--text-muted);
}

/* ── Code wrapping ─────────────────────────────────────────── */
code {
  overflow-wrap: break-word;
  word-break: break-all;
}

/* =============================================================
   Mobile responsive overrides (≤575px / iPhone-class screens)
   ============================================================= */
@media (max-width: 575px) {

  /* Bump table header font to meet 14px minimum */
  .table thead th,
  .match-table thead th {
    font-size: 0.875rem;
  }

  /* Hero section: reduce padding so it doesn't swallow the screen */
  .hero {
    padding: 1.5rem 1.25rem;
  }

  /* Phase pills: allow narrower pills so they stay on fewer rows */
  .phase-pill {
    font-size: .8rem;
    padding: 5px 10px;
  }

  /* Match-table action buttons: ensure adequate tap target height */
  .match-table .btn-sm {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Leaderboard rank number: slightly smaller on very narrow screens */
  .leaderboard-rank {
    font-size: 1.25rem;
  }

  /* Admin page heading + back-button rows: allow wrapping */
  .d-flex.justify-content-between.align-items-center.mb-4 {
    flex-wrap: wrap;
    gap: .5rem;
  }
}