:root {
  color-scheme: dark;
  --bg: #0b0f1a;
  --bg-2: #0f1a2e;
  --card: rgba(15, 26, 46, 0.84);
  --card-strong: #101b30;
  --border: rgba(139, 151, 168, 0.18);
  --muted: #a7b0c2;
  --text: #ffffff;
  --accent: #00e5ff;
  --accent-2: #0066ff;
  --accent-soft: rgba(0, 229, 255, 0.14);
  --teal: #00ffa3;
  --danger: #ff5b6e;
  --warning: #ffd166;
  --blue: #00e5ff;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  --fast: 150ms ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 10% 0%, rgba(0, 229, 255, 0.18), transparent 28rem),
    radial-gradient(circle at 92% 8%, rgba(0, 102, 255, 0.16), transparent 28rem),
    radial-gradient(circle at 50% 120%, rgba(0, 255, 163, 0.08), transparent 40rem),
    linear-gradient(180deg, #0b0f1a 0%, #0a1222 42%, #08111f 100%);
  color: var(--text);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.026) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.stadium-glow {
  position: fixed;
  inset: auto -20vw -35vh -20vw;
  height: 70vh;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 229, 255, 0.18), transparent 55%);
  filter: blur(10px);
  animation: breathe 6s ease-in-out infinite;
}

button, input, select { font: inherit; }
a { color: inherit; text-decoration: none; }
code {
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: var(--accent);
}

.app-shell {
  width: min(1220px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0 96px;
}

.topbar {
  position: sticky;
  top: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: rgba(11, 15, 26, 0.74);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  animation: slideDown 460ms ease both;
}

.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-logo { display: block; width: auto; height: 54px; max-width: min(44vw, 320px); filter: drop-shadow(0 14px 28px rgba(0, 102, 255, 0.22)); }
.brand-copy { display: flex; flex-direction: column; min-width: 0; }
.brand-copy strong { display: none; }
.brand-copy small { display: block; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #03111f;
  box-shadow: 0 12px 32px rgba(0, 102, 255, 0.28);
  animation: ballFloat 3.2s ease-in-out infinite;
}

.top-actions { display: flex; align-items: center; gap: 10px; }

.ghost-button, .mini-button {
  border: 1px solid var(--border);
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: transform var(--fast), border-color var(--fast), background var(--fast), box-shadow var(--fast);
}
.ghost-button { padding: 10px 14px; border-radius: 999px; }
.ghost-button:hover, .mini-button:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 229, 255, 0.42);
  background: rgba(0, 229, 255, 0.10);
  box-shadow: 0 12px 28px rgba(0,0,0,0.20);
}
.ghost-button:active, .mini-button:active, .match-card:active { transform: scale(0.985); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: max-content;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
}
.status-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
}
.status-pill.ok { color: var(--accent); }
.status-pill.bad { color: var(--danger); }

.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  margin-top: 18px;
}
.sidebar {
  position: sticky;
  top: 98px;
  align-self: start;
  display: grid;
  gap: 14px;
}
.nav-card, .panel, .hero-card, .match-card, .table-card, .message, .lineup-pitch-card {
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.nav-card { display: grid; padding: 8px; }
.nav-card a, .bottom-nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border-radius: 16px;
  color: var(--muted);
  font-weight: 750;
  transition: background var(--fast), color var(--fast), transform var(--fast);
}
.nav-card a:hover, .bottom-nav a:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.nav-card a.active, .bottom-nav a.active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 14px 24px rgba(0, 102, 255, 0.22);
}
.panel { padding: 16px; }
.panel.compact h2 { margin: 0 0 12px; font-size: 0.95rem; }
.panel p { margin: 0; color: var(--muted); line-height: 1.45; font-size: 0.92rem; }

.input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.065);
  color: var(--text);
  padding: 12px;
  outline: none;
  transition: border-color var(--fast), background var(--fast), box-shadow var(--fast);
}
.input:focus { border-color: rgba(0, 229, 255, 0.58); box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.10); }
select.input option { color: #f5f9ff; background-color: #101b30; }
.field-label { display: block; margin: 14px 0 7px; color: var(--muted); font-size: 0.84rem; font-weight: 800; }
.date-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.mini-button { padding: 9px 6px; border-radius: 12px; font-size: 0.78rem; }
.tiny-meter { height: 8px; margin-top: 14px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.08); }
.tiny-meter span { display: block; height: 100%; width: 35%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); animation: meterMove 3.5s ease-in-out infinite; }

.content { min-width: 0; }
.hero-card {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 24px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(0, 102, 255, 0.18), transparent 46%),
    linear-gradient(220deg, rgba(0, 229, 255, 0.10), transparent 42%),
    var(--card-strong);
  animation: fadeUp 480ms ease both;
}
.hero-card h1 { margin: 4px 0 7px; font-size: clamp(1.55rem, 4vw, 2.45rem); letter-spacing: -0.06em; line-height: 1; }
.hero-card p { margin: 0; color: var(--muted); }
.eyebrow { color: var(--accent) !important; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.74rem; font-weight: 900; }
.hero-stat {
  display: grid;
  place-items: center;
  min-width: 104px;
  height: 104px;
  border-radius: 28px;
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--border);
}
.hero-stat span { font-size: 2.2rem; font-weight: 950; color: var(--accent); letter-spacing: -0.08em; }
.hero-stat small { color: var(--muted); margin-top: -18px; }

.cards-grid { display: grid; gap: 14px; margin-top: 16px; }
.league-group { display: grid; gap: 10px; animation: fadeUp 420ms ease both; }
.league-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 5px 4px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 850;
}
.league-title img { width: 24px; height: 24px; object-fit: contain; }

.match-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
  overflow: hidden;
  transform-origin: center;
  animation: fadeUp 360ms ease both;
  transition: transform 170ms ease, border-color 170ms ease, background 170ms ease, box-shadow 170ms ease;
}
.match-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.05), transparent 45%);
  transform: translateX(-120%);
  transition: transform 650ms ease;
}
.match-card:hover {
  transform: translateY(-3px);
  border-color: rgba(57, 229, 140, 0.30);
  background: rgba(18, 45, 36, 0.92);
}
.match-card:hover::after { transform: translateX(120%); }
.match-card.is-live { border-color: rgba(57, 229, 140, 0.28); box-shadow: 0 18px 52px rgba(0, 184, 107, 0.10); }
.match-card.is-live::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: var(--accent);
  box-shadow: 0 0 22px rgba(57,229,140,0.45);
  animation: livePulse 1.7s ease-in-out infinite;
}
.teams { display: grid; gap: 8px; min-width: 0; }
.team-row {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto minmax(56px, auto);
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  border: 1px solid transparent;
  transition: background .16s ease, transform .16s ease;
}
.team-row:hover {
  background: rgba(255,255,255,.04);
  border-color: rgba(0,230,255,.12);
  transform: translateX(0);
}
.team-row img {
  width: 28px !important;
  height: 34px !important;
  padding: 3px;
  background: rgba(255,255,255,.93);
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
  border-radius: 50%;
  object-fit: contain;
}
.team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 760; }
.score { font-size: 1.15rem; font-weight: 950; color: var(--text); }
.match-meta {
  display: grid;
  justify-items: end;
  gap: 6px;
  align-content: center;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: right;
  max-width: 190px;
  min-width: 96px;
  overflow: hidden;
}
.match-meta > span:not(.live-time):not(.status-ft):not(.status-ns) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-time, .status-ft, .status-ns {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  max-width: 94px;
  padding: 5px 9px;
  border-radius: 999px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.live-time {
  gap: 7px;
  color: #fff;
  background: rgba(255, 70, 70, 0.16);
  border: 1px solid rgba(255, 70, 70, 0.38);
  box-shadow: 0 0 18px rgba(255, 70, 70, 0.16);
}
.live-time i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 999px;
  background: #ff4545;
  box-shadow: 0 0 0 0 rgba(255, 69, 69, 0.65);
  animation: redLivePulse 1.35s ease-in-out infinite;
}
.live-time span { line-height: 1; }
.status-ft { color: var(--text); background: rgba(255,255,255,0.11); }
.status-ns { color: var(--muted); background: rgba(255,255,255,0.06); }

.message { margin-top: 16px; padding: 16px; line-height: 1.55; animation: fadeUp 320ms ease both; }
.message.hidden { display: none; }
.message.bad { border-color: rgba(255, 107, 107, 0.28); color: #ffd6d6; }
.message.good { border-color: rgba(57, 229, 140, 0.28); color: var(--text); }
.muted { color: var(--muted); }

.loader {
  min-height: 260px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--card);
  animation: fadeUp 260ms ease both;
}
.loader > div { display: grid; justify-items: center; gap: 12px; color: var(--muted); }
.spinner {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 4px solid rgba(255,255,255,0.10);
  border-top-color: var(--accent);
  animation: spin 900ms linear infinite;
}

.table-card { padding: 16px; animation: fadeUp 420ms ease both; }
.table-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.table-card h2 { margin: 0; font-size: 1rem; letter-spacing: -0.02em; }
.table-scroll { overflow-x: auto; }
.standings-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.standings-table th, .standings-table td { padding: 10px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); text-align: left; }
.standings-table th { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.rank { color: var(--accent); font-weight: 950; }
.form { display: inline-flex; gap: 4px; }
.form span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 0.68rem; font-weight: 950; background: rgba(255,255,255,0.09); color: var(--muted); }
.form .W { background: rgba(57, 229, 140, 0.18); color: var(--accent); }
.form .D { background: rgba(255, 209, 102, 0.16); color: var(--warning); }
.form .L { background: rgba(255, 107, 107, 0.16); color: var(--danger); }

.match-detail { display: grid; gap: 16px; }
.scoreboard {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(57, 229, 140, 0.18), transparent 40%),
    var(--card-strong);
  box-shadow: var(--shadow);
  animation: popIn 420ms ease both;
}
.score-team { display: grid; justify-items: center; gap: 10px; min-width: 0; text-align: center; }
.score-team img { width: 78px; height: 78px; object-fit: contain; filter: drop-shadow(0 12px 20px rgba(0,0,0,0.25)); }
.score-team strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.big-score {
  min-width: 140px;
  padding: 16px 18px;
  border-radius: 24px;
  text-align: center;
  font-size: clamp(2rem, 8vw, 3.7rem);
  font-weight: 1000;
  letter-spacing: -0.09em;
  color: var(--accent);
  background: rgba(0,0,0,0.23);
  border: 1px solid rgba(57,229,140,0.16);
  box-shadow: inset 0 0 26px rgba(57,229,140,0.08);
}
.detail-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; align-items: start; }
.event-list { display: grid; gap: 9px; }
.event-item {
  display: grid;
  grid-template-columns: 48px 38px minmax(0, 1fr) minmax(90px, auto);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  animation: fadeUp 320ms ease both;
}
.event-time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 6px 8px;
  border-radius: 999px;
  color: var(--accent);
  background: rgba(57, 229, 140, 0.10);
  font-weight: 950;
  font-size: 0.78rem;
}
.event-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(0,0,0,0.24);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 1.04rem;
}
.event-main { min-width: 0; line-height: 1.25; }
.event-main b { color: var(--text); }
.event-assist { font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-item.away { text-align: right; grid-template-columns: minmax(90px, auto) minmax(0, 1fr) 38px 48px; }
.event-item.away .event-time { grid-column: 4; }
.event-item.away .event-icon { grid-column: 3; grid-row: 1; }
.event-item.away .event-main { grid-column: 2; grid-row: 1; }
.event-item.away .event-assist { grid-column: 1; grid-row: 1; }
.event-goal { border-color: rgba(57,229,140,0.22); background: rgba(57,229,140,0.055); }
.event-card { border-color: rgba(255, 209, 102, 0.24); background: rgba(255, 209, 102, 0.055); }
.event-red-card { border-color: rgba(255,107,107,0.26); background: rgba(255,107,107,0.065); }
.event-substitution { border-color: rgba(117,199,255,0.20); background: rgba(117,199,255,0.052); }
.event-var, .event-penalty { border-color: rgba(255,255,255,0.14); }

.stat-list { display: grid; gap: 12px; }
.stat-row { display: grid; gap: 7px; }
.stat-head { display: grid; grid-template-columns: 56px 1fr 56px; gap: 10px; align-items: center; font-weight: 850; }
.stat-head small { text-align: center; }
.stat-value-left { color: var(--text); }
.stat-value-right { color: var(--text); text-align: right; }
.stat-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; height: 8px; }
.stat-bar { border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.08); }
.stat-bar span { display: block; height: 100%; width: 0%; border-radius: inherit; animation: growBar 850ms ease forwards; }
.stat-bar.left span { margin-left: auto; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.stat-bar.right span { background: linear-gradient(90deg, var(--blue), rgba(117,199,255,0.58)); }

.lineups-section { display: grid; gap: 16px; }
.lineup-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lineup-item {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.04);
}
.team-logo { width: 36px; height: 36px; object-fit: contain; }
.pitch-wrap { display: grid; gap: 16px; }
.pitch-card {
  border: 1px solid var(--border);
  border-radius: 28px;
  overflow: hidden;
  background: rgba(0,0,0,0.22);
  box-shadow: var(--shadow);
  animation: fadeUp 420ms ease both;
}
.pitch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.pitch-header strong { display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pitch-header img { width: 28px; height: 28px; object-fit: contain; }
.pitch-header span { color: var(--muted); font-weight: 850; text-align: center; white-space: nowrap; }
.pitch {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.03) 50%, transparent 50%) 0 0 / 80px 80px,
    repeating-linear-gradient(90deg, rgba(57, 160, 95, 0.25) 0 12.5%, rgba(42, 129, 82, 0.25) 12.5% 25%),
    linear-gradient(180deg, #1f8a4d, #176d3e);
}
.pitch::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 2px solid rgba(255,255,255,0.55);
  border-radius: 20px;
}
.pitch::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 50%;
  border-top: 2px solid rgba(255,255,255,0.55);
  transform: translateY(-50%);
}
.center-circle {
  position: absolute;
  left: 50%; top: 50%;
  width: 118px; height: 118px;
  border: 2px solid rgba(255,255,255,0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.box-top, .box-bottom, .six-top, .six-bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid rgba(255,255,255,0.55);
}
.box-top { top: 18px; width: 48%; height: 92px; border-top: 0; }
.box-bottom { bottom: 18px; width: 48%; height: 92px; border-bottom: 0; }
.six-top { top: 18px; width: 25%; height: 42px; border-top: 0; }
.six-bottom { bottom: 18px; width: 25%; height: 42px; border-bottom: 0; }
.player-dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 78px;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 5px;
  text-align: center;
  z-index: 2;
  animation: playerDrop 540ms ease both;
  animation-delay: var(--delay, 0ms);
}
.player-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.72);
  background: linear-gradient(135deg, #101c2b, #214a72);
  box-shadow: 0 14px 24px rgba(0,0,0,0.32), 0 0 0 5px rgba(0,0,0,0.12);
  overflow: hidden;
  color: white;
}
.player-avatar img,
.bench-avatar img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: rgba(255,255,255,0.09);
}
.avatar-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  line-height: 1;
}
.avatar-fallback b {
  font-size: 0.95rem;
  font-weight: 1000;
}
.avatar-fallback small {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(0,0,0,0.50);
  color: white;
  font-size: 0.56rem;
  font-weight: 950;
}
.player-dot.home .player-avatar { background: linear-gradient(135deg, #103d2a, #19a35e); }
.player-dot.away .player-avatar { background: linear-gradient(135deg, #182642, #3b7eee); }
.player-dot small {
  display: block;
  max-width: 76px;
  min-height: 18px;
  padding: 3px 6px;
  border-radius: 999px;
  color: white;
  background: rgba(0,0,0,0.58);
  backdrop-filter: blur(5px);
  font-size: 0.60rem;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 8px 18px rgba(0,0,0,0.20);
}
.bench-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.bench-card { padding: 14px; border-radius: 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); }
.bench-card h3 { margin: 0 0 10px; font-size: 0.96rem; }
.bench-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.bench-player { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 0.86rem; }
.bench-player b { color: var(--text); }
.bench-avatar {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.34);
  background: rgba(255,255,255,0.10);
  color: white;
}
.bench-avatar .avatar-fallback b { font-size: 0.72rem; }
.bench-avatar .avatar-fallback small { display: none; }

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 14px;
  z-index: 30;
  display: none;
  width: min(520px, calc(100% - 28px));
  transform: translateX(-50%);
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(6, 19, 15, 0.88);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}
.bottom-nav a { justify-content: center; flex-direction: column; gap: 3px; padding: 9px 8px; font-size: 0.72rem; }
.bottom-nav a span { display: block; }

@media (max-width: 930px) {
  .app-shell { width: min(100% - 20px, 760px); padding-bottom: 104px; }
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; grid-template-columns: 1fr 1fr; }
  .nav-card { display: none; }
  .pulse-panel { display: none; }
  .bottom-nav { display: grid; }
  .detail-grid, .lineup-summary, .bench-grid { grid-template-columns: 1fr; }
  .pitch { min-height: 660px; }
}

@media (max-width: 620px) {
  .topbar { top: 8px; border-radius: 20px; }
  .brand small { display: none; }
  .brand-mark { width: 42px; height: 42px; }
  .top-actions { gap: 7px; }
  .ghost-button { padding: 9px 10px; }
  .status-pill { font-size: 0.74rem; padding: 8px; }
  .sidebar { grid-template-columns: 1fr; }
  .hero-card { padding: 18px; align-items: stretch; }
  .hero-stat { min-width: 82px; height: 82px; border-radius: 20px; }
  .match-card { grid-template-columns: 1fr; padding-right: 14px; }
  .match-meta {
    justify-items: start;
    text-align: left;
    max-width: none;
    min-width: 0;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .match-meta::-webkit-scrollbar { display: none; }
  .scoreboard { grid-template-columns: 1fr; }
  .big-score { order: -1; width: 100%; }
  .score-team img { width: 62px; height: 62px; }
  .event-item, .event-item.away { grid-template-columns: 38px 1fr; text-align: left; }
  .event-item .event-assist, .event-item.away .event-assist { display: none; }
  .event-item.away strong, .event-item.away .event-main { grid-column: auto; grid-row: auto; }
  .pitch-card { border-radius: 22px; }
  .pitch-header { padding: 12px; gap: 8px; font-size: 0.78rem; }
  .pitch-header strong { max-width: 31%; gap: 6px; }
  .pitch-header img { width: 22px; height: 22px; }
  .pitch-header span { font-size: 0.72rem; }
  .pitch { min-height: 640px; }
  .player-dot { width: 58px; gap: 3px; }
  .player-avatar { width: 38px; height: 38px; border-width: 1px; box-shadow: 0 10px 18px rgba(0,0,0,0.28), 0 0 0 3px rgba(0,0,0,0.12); }
  .player-avatar .avatar-fallback b { font-size: 0.68rem; }
  .player-avatar .avatar-fallback small { width: 15px; height: 15px; font-size: 0.46rem; right: 2px; bottom: 2px; }
  .player-dot small { max-width: 58px; min-height: 15px; padding: 2px 4px; font-size: 0.50rem; line-height: 1; }
  .bench-list { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .pitch { min-height: 600px; }
  .player-dot { width: 52px; }
  .player-avatar { width: 34px; height: 34px; }
  .player-dot small { max-width: 52px; font-size: 0.46rem; }
  .pitch::before { inset: 12px; }
  .box-top, .six-top { top: 12px; }
  .box-bottom, .six-bottom { bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes livePulse { 0%,100% { box-shadow: 0 0 0 rgba(57,229,140,0); } 50% { box-shadow: 0 0 22px rgba(57,229,140,0.45); } }
@keyframes ballFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(5deg); } }
@keyframes breathe { 0%,100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.05); } }
@keyframes meterMove { 0%,100% { transform: translateX(-20%); width: 32%; } 50% { transform: translateX(190%); width: 42%; } }
@keyframes growBar { from { width: 0%; } to { width: var(--w); } }
@keyframes playerDrop { from { opacity: 0; transform: translate(-50%, -72%) scale(0.86); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* Competitie/stand verbeteringen */
.season-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.helper-text {
  margin-top: 9px !important;
  font-size: 0.78rem !important;
  color: var(--muted);
}
.table-stack {
  display: grid;
  gap: 14px;
}
.competition-overview h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.league-crest {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.standings-section {
  animation: fadeUp 420ms ease both;
}
.standings-team {
  grid-template-columns: 28px minmax(160px, 1fr);
}
.team-row.standings-team {
  grid-template-columns: 28px minmax(150px, 1fr) !important;
}
.rank-cell {
  min-width: 86px;
}
.rank-cell .rank {
  display: block;
}
.rank-status {
  display: block;
  max-width: 120px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.15;
}
.rank-status.same,
.rank-status.up {
  color: var(--accent);
}
.rank-status.down {
  color: var(--danger);
}
.standings-table tbody tr {
  transition: background var(--fast), transform var(--fast);
}
.standings-table tbody tr:hover {
  background: rgba(57, 229, 140, 0.055);
}
select.input optgroup {
  color: #6fe6a8;
  background-color: #101b30;
  font-weight: 900;
}

/* Frontpage v2: filter is bewust optioneel, niet leidend */
.panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tiny-badge {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--muted);
  background: rgba(255,255,255,0.05);
  font-size: 0.72rem;
  font-weight: 950;
}
.tiny-badge.on {
  box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.12);
}
.switch-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 10px 0 10px;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}
.switch-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.filter-panel .input:not(.filter-active) {
  opacity: 0.86;
}
.mini-button.full {
  width: 100%;
  margin-top: 8px;
}
.player-avatar.no-photo img,
.bench-avatar.no-photo img {
  display: none !important;
}


/* Layout fix: live badge + formation spacing */
.match-card.is-live::before { content:""; left:0; top:12px; bottom:12px; right:auto; width:4px; padding:0; border-radius:0 999px 999px 0; }
.match-card.is-live .match-meta { padding-right: 0; }


/* Update: rood live-bolletje en betere opstelling zonder overlap */
.match-card.is-live::before {
  background: #ff4545;
  box-shadow: 0 0 22px rgba(255,69,69,0.45);
}
.pitch.pitch-rows {
  display: grid;
  grid-template-rows: 1fr 1fr;
  min-height: 820px;
  padding: 34px 28px;
}
.pitch-half {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: space-evenly;
  gap: clamp(14px, 2.2vw, 26px);
  min-height: 0;
}
.away-half { padding-bottom: 34px; }
.home-half { padding-top: 34px; }
.formation-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(70px, 1fr);
  justify-content: center;
  justify-items: center;
  align-items: start;
  gap: clamp(10px, 2vw, 28px);
}
.player-tile {
  width: min(86px, 100%);
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
  z-index: 3;
  animation: playerDrop 540ms ease both;
  animation-delay: var(--delay, 0ms);
}
.player-tile .player-avatar {
  width: 48px;
  height: 48px;
}
.player-name {
  display: block;
  max-width: 82px;
  padding: 3px 7px;
  border-radius: 999px;
  color: white;
  background: rgba(0,0,0,0.60);
  backdrop-filter: blur(5px);
  font-size: 0.60rem;
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 8px 18px rgba(0,0,0,0.20);
}
.player-pos {
  margin-top: -2px;
  color: rgba(255,255,255,0.76);
  font-size: 0.50rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}
@media (max-width: 930px) {
  .pitch.pitch-rows { min-height: 780px; padding: 28px 16px; }
  .formation-row { grid-auto-columns: minmax(58px, 1fr); gap: 8px; }
  .player-tile { width: 68px; }
  .player-tile .player-avatar { width: 42px; height: 42px; }
  .player-name { max-width: 66px; font-size: 0.54rem; padding: 3px 5px; }
}
@media (max-width: 620px) {
  .match-meta .live-time { min-width: auto; }
  .event-item, .event-item.away {
    grid-template-columns: 42px 32px minmax(0, 1fr);
    text-align: left;
  }
  .event-item .event-time, .event-item.away .event-time { grid-column: 1; }
  .event-item .event-icon, .event-item.away .event-icon { grid-column: 2; grid-row: 1; width: 30px; height: 30px; }
  .event-item .event-main, .event-item.away .event-main { grid-column: 3; grid-row: 1; }
  .event-item .event-assist, .event-item.away .event-assist { display: none; }
  .pitch.pitch-rows { min-height: 760px; padding: 24px 10px; }
  .pitch-half { gap: 14px; }
  .away-half { padding-bottom: 24px; }
  .home-half { padding-top: 24px; }
  .formation-row { grid-auto-columns: minmax(48px, 1fr); gap: 5px; }
  .player-tile { width: 55px; }
  .player-tile .player-avatar { width: 36px; height: 36px; border-width: 1px; box-shadow: 0 8px 14px rgba(0,0,0,0.28), 0 0 0 3px rgba(0,0,0,0.12); }
  .player-name { max-width: 54px; font-size: 0.47rem; padding: 2px 4px; }
  .player-pos { display: none; }
}
@media (max-width: 420px) {
  .pitch.pitch-rows { min-height: 720px; padding-left: 6px; padding-right: 6px; }
  .formation-row { grid-auto-columns: minmax(44px, 1fr); gap: 3px; }
  .player-tile { width: 50px; }
  .player-tile .player-avatar { width: 32px; height: 32px; }
  .player-name { max-width: 50px; font-size: 0.43rem; }
}
@keyframes redLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,69,69,0.62); transform: scale(1); }
  50% { box-shadow: 0 0 0 7px rgba(255,69,69,0); transform: scale(1.12); }
}

/* Player click stats */
.player-tile {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
  border-radius: 16px;
  animation-name: playerTileDrop !important;
  transition: transform 160ms ease, filter 160ms ease;
}
.player-tile:hover,
.player-tile:focus-visible {
  transform: translateY(-2px) scale(1.04);
  outline: none;
  filter: brightness(1.08);
}
.player-tile:focus-visible .player-avatar {
  box-shadow: 0 0 0 4px rgba(57, 229, 140, 0.24), 0 14px 24px rgba(0,0,0,0.32);
}
.player-click-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  margin-top: -2px;
  padding: 2px 5px;
  border-radius: 999px;
  color: rgba(255,255,255,0.88);
  background: rgba(57, 229, 140, 0.22);
  border: 1px solid rgba(57, 229, 140, 0.22);
  font-size: 0.46rem;
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.player-tile:hover .player-click-hint,
.player-tile:focus-visible .player-click-hint {
  opacity: 1;
  transform: translateY(0);
}
.bench-player {
  appearance: none;
  border: 0;
  width: 100%;
  padding: 7px;
  border-radius: 14px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--fast), transform var(--fast);
}
.bench-player:hover,
.bench-player:focus-visible {
  outline: none;
  background: rgba(57, 229, 140, 0.08);
  transform: translateY(-1px);
}

.player-modal.hidden { display: none; }
.player-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
}
.player-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.68);
  backdrop-filter: blur(8px);
  animation: fadeUp 180ms ease both;
}
.player-modal-card {
  position: relative;
  z-index: 1;
  width: min(850px, 100%);
  max-height: min(86vh, 900px);
  overflow: auto;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 0%, rgba(57, 229, 140, 0.16), transparent 28rem),
    var(--card-strong);
  box-shadow: 0 34px 100px rgba(0,0,0,0.55);
  animation: popIn 220ms ease both;
}
.player-modal-close {
  position: sticky;
  top: 12px;
  float: right;
  z-index: 3;
  width: 38px;
  height: 38px;
  margin: 12px 12px 0 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: var(--text);
  background: rgba(0,0,0,0.35);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
}
.player-modal-content { padding: 24px; }
.player-modal-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}
.player-modal-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.70);
  background: linear-gradient(135deg, #103d2a, #19a35e);
  box-shadow: 0 18px 34px rgba(0,0,0,0.35), 0 0 0 6px rgba(57, 229, 140, 0.10);
  overflow: hidden;
  color: white;
}
.player-modal-avatar img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.player-modal-avatar.no-photo img { display: none !important; }
.player-modal-avatar .avatar-fallback b { font-size: 1.25rem; }
.player-modal-title { min-width: 0; }
.player-modal-title small {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-weight: 850;
}
.player-modal-title small img { width: 20px; height: 20px; object-fit: contain; }
.player-modal-title h2 {
  margin: 4px 0 3px;
  font-size: clamp(1.35rem, 4vw, 2rem);
  letter-spacing: -0.045em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-modal-title p { margin: 0; color: var(--muted); }
.player-rating {
  display: grid;
  place-items: center;
  min-width: 78px;
  min-height: 72px;
  padding: 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
}
.player-rating span { font-size: 1.45rem; font-weight: 1000; color: var(--muted); }
.player-rating small { color: var(--muted); font-size: 0.66rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; }
.player-rating.good span { color: var(--accent); }
.player-rating.great { background: rgba(57, 229, 140, 0.13); border-color: rgba(57, 229, 140, 0.25); }
.player-rating.great span { color: var(--accent); }
.player-rating.low span { color: var(--warning); }
.player-stats-empty { margin: 0 0 16px; box-shadow: none; background: rgba(255,255,255,0.045); }
.player-stat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.player-stat-tile {
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.075);
}
.player-stat-tile small { color: var(--muted); font-weight: 850; line-height: 1.15; }
.player-stat-tile strong { font-size: 1.36rem; font-weight: 1000; color: var(--text); letter-spacing: -0.05em; }
.player-stat-tile span { color: var(--muted); font-size: 0.72rem; }
.player-stat-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.player-stat-columns section {
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}
.player-stat-columns h3 { margin: 0 0 10px; font-size: 0.94rem; }
.player-stat-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.055);
  color: var(--muted);
  font-size: 0.88rem;
}
.player-stat-line:last-child { border-bottom: 0; }
.player-stat-line b { color: var(--text); }
body.modal-open { overflow: hidden; }

@keyframes playerTileDrop {
  from { opacity: 0; transform: translateY(-10px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
  .player-modal { padding: 10px; align-items: end; }
  .player-modal-card { max-height: 92vh; border-radius: 24px 24px 0 0; }
  .player-modal-content { padding: 18px; }
  .player-modal-header { grid-template-columns: auto minmax(0, 1fr); }
  .player-rating { grid-column: 1 / -1; grid-auto-flow: column; min-height: 0; min-width: 0; justify-content: space-between; }
  .player-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .player-stat-columns { grid-template-columns: 1fr; }
  .player-click-hint { display: none; }
}

/* === LiveBal Pro Plus uitbreidingen === */
.search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.match-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.league-chip,
.league-title-link {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.league-chip {
  color: var(--muted);
  font-size: 12px;
  max-width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.league-chip:hover,
.league-title-link:hover {
  color: var(--accent);
}

.popular-tag,
.league-count {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--muted);
  background: rgba(255,255,255,.05);
}

.popular-strip {
  grid-column: 1 / -1;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(135deg, rgba(42, 255, 159, .08), rgba(255,255,255,.035));
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  margin-bottom: 14px;
}

.section-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.section-title-row h2 {
  font-size: 16px;
  margin: 0;
}

.popular-scroll {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.mini-match {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.18);
  color: var(--text);
  border-radius: 16px;
  padding: 12px;
  text-align: left;
  display: grid;
  gap: 5px;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.mini-match:hover {
  transform: translateY(-2px);
  border-color: rgba(42,255,159,.35);
  background: rgba(42,255,159,.07);
}

.mini-match span:first-child {
  color: var(--muted);
  font-size: 11px;
}

.icon-svg {
  width: 20px;
  height: 20px;
  display: block;
  flex: 0 0 auto;
}

.fav-button {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #ffd166;
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.fav-button .icon-svg { width: 16px; height: 16px; }

.fav-button.compact {
  width: 28px;
  height: 28px;
}

.fav-button.compact .icon-svg { width: 14px; height: 14px; }

.fav-button:hover {
  transform: scale(1.08);
  background: rgba(255,209,102,.12);
  border-color: rgba(255,209,102,.4);
}

.fav-button.active {
  background: rgba(255,209,102,.18);
  border-color: rgba(255,209,102,.55);
}

.team-link-row {
  cursor: pointer;
  border-radius: 10px;
}

.team-link-row:hover .team-name,
.team-profile-link:hover strong {
  color: var(--accent);
}

.profile-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  box-shadow: var(--shadow-soft);
  margin-bottom: 14px;
}

.profile-hero img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  padding: 8px;
}

.profile-hero h2 {
  margin: 0 0 4px;
  font-size: clamp(22px, 4vw, 34px);
}

.pill-button {
  border: 1px solid rgba(42,255,159,.28);
  background: rgba(42,255,159,.09);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
}

.detail-grid.wide {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.fixture-mini-list {
  display: grid;
  gap: 10px;
}

.fixture-mini-section .match-card {
  margin: 0;
}

.squad-grid,
.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.squad-player,
.result-row,
.favorite-card,
.favorite-head {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.045);
  border-radius: 16px;
}

.squad-player,
.result-row,
.favorite-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  color: var(--text);
  padding: 10px;
  text-align: left;
  cursor: pointer;
}

.squad-player span,
.result-row span,
.favorite-head span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.squad-player small,
.result-row small,
.favorite-head small {
  color: var(--muted);
  font-size: 12px;
}

.result-row img,
.favorite-head img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex: 0 0 auto;
}

.result-row:hover,
.squad-player:hover,
.favorite-head:hover {
  border-color: rgba(42,255,159,.28);
  background: rgba(42,255,159,.06);
}

.favorite-card {
  padding: 12px;
}

.favorite-head {
  border: 0;
  background: transparent;
  padding: 0;
}

.next-mini {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.toast-host {
  position: fixed;
  right: 18px;
  bottom: 92px;
  display: grid;
  gap: 10px;
  z-index: 80;
  pointer-events: none;
}

.toast {
  width: min(340px, calc(100vw - 28px));
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(5, 18, 14, .94);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  transform: translateY(12px);
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast strong,
.toast span {
  display: block;
}

.toast span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.toast.goal {
  border-color: rgba(42,255,159,.4);
}

.toast.card,
.toast.red-card {
  border-color: rgba(255, 111, 111, .35);
}

.score-team.team-profile-link {
  cursor: pointer;
  border-radius: 16px;
  padding: 8px;
}

.compact-standings {
  margin-top: 14px;
}

@media (max-width: 720px) {
  .profile-hero {
    grid-template-columns: auto 1fr;
  }
  .profile-hero .pill-button,
  .profile-hero .fav-button {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .popular-scroll {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .mini-match {
    min-width: 220px;
  }
  .toast-host {
    left: 12px;
    right: 12px;
    bottom: 82px;
  }
}


/* Pro Plus achtergrond-refresh fix: geen zichtbare refreshbalk in het linkermenu. */
.pulse-panel, .tiny-meter { display: none !important; }
.toast.card { border-color: rgba(255, 209, 102, .35); }


/* Stille live-refresh: geen flits, geen fadeUp, geen card-heranimatie tijdens background updates. */
#app.silent-refresh,
#app.silent-refresh * {
  animation: none !important;
  transition: none !important;
}

/* Geen zichtbare handmatige refresh-knop of refreshmeter meer. */
#refreshBtn, .pulse-panel, .tiny-meter, .refresh-panel, .refresh-meter {
  display: none !important;
}

/* === LiveBal Design Upgrade: premium graphics zonder gegenereerde afbeeldingen === */
:root {
  --radius: 24px;
  --shadow-soft: 0 18px 55px rgba(0, 0, 0, 0.28);
  --glass: rgba(10, 29, 24, 0.68);
  --glass-2: rgba(255,255,255,0.065);
  --line: rgba(255,255,255,0.10);
  --gold: #ffd166;
  --red-live: #ff4545;
}

body {
  background:
    radial-gradient(circle at 8% -10%, rgba(57, 229, 140, .28), transparent 32rem),
    radial-gradient(circle at 94% 4%, rgba(117, 199, 255, .14), transparent 30rem),
    radial-gradient(circle at 50% 120%, rgba(57, 229, 140, .12), transparent 42rem),
    linear-gradient(180deg, #06130f 0%, #03100c 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.8) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.6) 0 1px, transparent 1px);
  background-size: 38px 38px, 62px 62px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 78%);
}

.ambient-layer {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  filter: blur(22px);
  opacity: .72;
}
.ambient-layer-one {
  left: -14vw;
  top: 18vh;
  width: 28vw;
  height: 50vh;
  background: radial-gradient(ellipse at center, rgba(57,229,140,.22), transparent 64%);
  animation: floatOrb 11s ease-in-out infinite;
}
.ambient-layer-two {
  right: -16vw;
  top: 8vh;
  width: 34vw;
  height: 58vh;
  background: radial-gradient(ellipse at center, rgba(117,199,255,.16), transparent 62%);
  animation: floatOrb 13s ease-in-out infinite reverse;
}
.app-shell { position: relative; z-index: 1; }

.topbar {
  border-color: rgba(255,255,255,.12);
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
    rgba(4, 17, 13, .76);
}
.brand-mark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.44), transparent 70%);
  transform: translateX(-80%) rotate(18deg);
  animation: logoShine 4.5s ease-in-out infinite;
  z-index: -1;
}
.status-pill.ok {
  background: rgba(57,229,140,.10);
  border-color: rgba(57,229,140,.22);
}

.nav-card a,
.bottom-nav a {
  position: relative;
  overflow: hidden;
}
.nav-card a::after,
.bottom-nav a::after {
  content: "";
  position: absolute;
  inset: auto 12px 6px 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  opacity: 0;
  transform: scaleX(.5);
  transition: opacity .18s ease, transform .18s ease;
}
.nav-card a:hover::after,
.bottom-nav a:hover::after,
.nav-card a.active::after,
.bottom-nav a.active::after {
  opacity: 1;
  transform: scaleX(1);
}
.panel,
.nav-card,
.hero-card,
.match-card,
.table-card,
.message,
.pitch-card,
.profile-hero {
  background:
    linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.025)),
    rgba(8, 27, 21, .80);
  border-color: rgba(255,255,255,.105);
}

.hero-card {
  position: relative;
  min-height: 160px;
  border-radius: 32px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 20%, rgba(57,229,140,.24), transparent 24rem),
    radial-gradient(circle at 30% 0%, rgba(117,199,255,.15), transparent 22rem),
    linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.035)),
    rgba(9, 31, 24, .86);
}
.hero-card::before {
  content: "";
  position: absolute;
  right: -48px;
  bottom: -74px;
  width: 250px;
  height: 250px;
  border: 2px solid rgba(255,255,255,.09);
  border-radius: 50%;
  box-shadow: inset 0 0 0 34px rgba(255,255,255,.018);
}
.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0 38%, rgba(255,255,255,.075) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: heroSweep 7s ease-in-out infinite;
}
.hero-card h1 {
  text-shadow: 0 16px 42px rgba(0,0,0,.40);
}
.hero-stat {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(57,229,140,.18), transparent 65%),
    rgba(0,0,0,.28);
}
.hero-stat::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 22px;
  border: 1px solid rgba(57,229,140,.18);
}

.feed-dashboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.feed-stat-card {
  position: relative;
  overflow: hidden;
  min-height: 104px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.105);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    rgba(9, 30, 24, .78);
  box-shadow: var(--shadow-soft);
  animation: fadeUp .42s ease both;
}
.feed-stat-card::after {
  content: "";
  position: absolute;
  right: -36px;
  bottom: -42px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
}
.feed-stat-card.wide { grid-column: span 2; }
.feed-stat-card small {
  display: block;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .10em;
}
.feed-stat-card strong {
  display: block;
  margin-top: 6px;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  letter-spacing: -.06em;
  line-height: 1;
}
.feed-stat-card em {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-style: normal;
  font-size: .82rem;
}
.stat-orb {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red-live);
  box-shadow: 0 0 0 0 rgba(255,69,69,.55);
  animation: redLivePulse 1.35s ease-in-out infinite;
}
.stat-orb.blue {
  background: var(--blue);
  box-shadow: 0 0 22px rgba(117,199,255,.28);
  animation: none;
}

.popular-strip {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at 14% -20%, rgba(57,229,140,.22), transparent 22rem),
    linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.028)),
    rgba(8, 28, 22, .82) !important;
  box-shadow: var(--shadow);
}
.popular-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 32px 100%;
}
.mini-match {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.035)),
    rgba(0,0,0,.20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.mini-match::before {
  content: "";
  position: absolute;
  inset: auto 12px 10px 12px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: .72;
  z-index: -1;
}

.league-title {
  position: sticky;
  top: 92px;
  z-index: 4;
  margin-top: 8px;
  border-radius: 18px;
  padding: 10px 10px;
  background: rgba(4, 16, 13, .72);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.07);
}
.league-title-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.league-title-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.league-count,
.popular-tag {
  background: rgba(57,229,140,.10);
  border-color: rgba(57,229,140,.18);
  color: var(--accent);
}

.match-card {
  isolation: isolate;
  min-height: 142px;
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.080), rgba(255,255,255,.026)),
    rgba(7, 25, 20, .86);
}
.match-card:hover {
  transform: translateY(-4px) scale(1.004);
  border-color: rgba(57,229,140,.34);
  box-shadow: 0 30px 90px rgba(0,0,0,.35), 0 0 0 1px rgba(57,229,140,.06);
}
.match-card.is-live {
  border-color: rgba(255,69,69,.26);
  box-shadow: 0 24px 74px rgba(255,69,69,.08), var(--shadow-soft);
}
.match-ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: .36;
}
.ghost-logo {
  position: absolute;
  width: 154px;
  height: 154px;
  object-fit: contain;
  filter: grayscale(.18) blur(.2px);
  opacity: .18;
}
.ghost-home { left: -42px; top: -38px; transform: rotate(-12deg); }
.ghost-away { right: -44px; bottom: -42px; transform: rotate(14deg); }
.match-card-top {
  position: relative;
  z-index: 1;
}
.league-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: min(72%, 360px);
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
}
.league-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(57,229,140,.55);
}
.score {
  min-width: 38px;
  display: inline-grid;
  place-items: center;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.07);
  font-variant-numeric: tabular-nums;
}
.match-meta {
  position: relative;
  min-width: 110px;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.07);
}
.live-time {
  background: rgba(255,69,69,.15);
  border-color: rgba(255,69,69,.36);
  text-shadow: 0 0 16px rgba(255,69,69,.35);
}
.status-ns,
.status-ft {
  border: 1px solid rgba(255,255,255,.08);
}

.loader {
  overflow: hidden;
  position: relative;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(8, 27, 21, .78);
}
.loader::before,
.loader::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  height: 62px;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.10), rgba(255,255,255,.04));
  background-size: 220% 100%;
  animation: skeletonShine 1.25s ease-in-out infinite;
}
.loader::before { top: 24px; }
.loader::after { top: 98px; opacity: .7; }
.spinner {
  width: 48px;
  height: 48px;
  border-width: 3px;
  box-shadow: 0 0 42px rgba(57,229,140,.18);
}

.scoreboard {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% -18%, rgba(57,229,140,.22), transparent 35rem),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.030)),
    rgba(7, 26, 20, .88);
}
.scoreboard::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -80px;
  width: 260px;
  height: 260px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 28px rgba(255,255,255,.015);
  pointer-events: none;
}
.big-score {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(57,229,140,.16), transparent 75%),
    rgba(0,0,0,.30);
}
.big-score::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.12), transparent 56%);
  transform: translateX(-110%);
  animation: scoreSweep 4.8s ease-in-out infinite;
}

.event-list {
  position: relative;
  padding-left: 12px;
}
.event-list::before {
  content: "";
  position: absolute;
  left: 29px;
  top: 5px;
  bottom: 5px;
  width: 2px;
  border-radius: 99px;
  background: linear-gradient(to bottom, transparent, rgba(57,229,140,.42), transparent);
}
.event-item {
  position: relative;
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  backdrop-filter: blur(10px);
}
.event-icon {
  box-shadow: 0 0 0 4px rgba(0,0,0,.18);
}
.event-goal .event-icon {
  background: rgba(57,229,140,.18);
  border-color: rgba(57,229,140,.26);
}
.event-red-card .event-icon,
.event-card .event-icon {
  background: rgba(255,107,107,.14);
}

.pitch-card {
  border-radius: 34px;
  overflow: hidden;
  background: rgba(0,0,0,.22);
}
.pitch-header {
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}
.pitch {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 9rem),
    linear-gradient(90deg, rgba(255,255,255,.03) 50%, transparent 50%) 0 0 / 80px 80px,
    repeating-linear-gradient(90deg, rgba(52, 165, 98, .46) 0 12.5%, rgba(28, 130, 74, .46) 12.5% 25%),
    linear-gradient(180deg, #239556, #176d3e) !important;
}
.player-tile .player-avatar,
.bench-avatar,
.player-modal-avatar {
  box-shadow: 0 12px 24px rgba(0,0,0,.34), 0 0 0 4px rgba(255,255,255,.08), 0 0 30px rgba(57,229,140,.10);
}
.player-tile:hover .player-avatar {
  box-shadow: 0 14px 28px rgba(0,0,0,.38), 0 0 0 4px rgba(57,229,140,.22), 0 0 34px rgba(57,229,140,.20);
}
.player-name {
  background: rgba(0,0,0,.68);
  border: 1px solid rgba(255,255,255,.10);
}
.bench-card,
.player-modal-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(8, 27, 21, .88);
}
.bench-player:hover {
  background: rgba(57,229,140,.09);
}

.standings-table tbody tr:hover {
  transform: translateX(2px);
}
.form span,
.rank,
.player-rating strong {
  text-shadow: 0 0 16px rgba(57,229,140,.20);
}
.toast {
  backdrop-filter: blur(16px);
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    rgba(4, 17, 13, .92);
}
.toast.goal {
  box-shadow: 0 24px 70px rgba(57,229,140,.12), 0 24px 70px rgba(0,0,0,.38);
}

@media (max-width: 930px) {
  .league-title { top: 84px; }
  .feed-dashboard { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .feed-stat-card.wide { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .hero-card { border-radius: 26px; padding: 18px; }
  .hero-stat { min-width: 82px; height: 82px; border-radius: 22px; }
  .hero-stat span { font-size: 1.72rem; }
  .feed-dashboard { grid-template-columns: 1fr; }
  .feed-stat-card.wide { grid-column: auto; }
  .match-card { grid-template-columns: 1fr; min-height: unset; padding: 14px; }
  .match-meta {
    grid-template-columns: auto 1fr;
    display: grid;
    justify-items: start;
    text-align: left;
    max-width: unset;
    min-width: 0;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.07);
    padding: 10px 0 0;
  }
  .match-meta span:last-child { grid-column: 1 / -1; }
  .team-row { grid-template-columns: 30px minmax(0, 1fr) auto minmax(34px, auto); gap: 8px; }
  .team-row img { width: 28px; height: 28px; }
  .score { min-width: 32px; padding: 5px 7px; }
  .league-title { position: static; }
  .ghost-logo { width: 120px; height: 120px; }
}

@keyframes logoShine { 0%, 62% { transform: translateX(-90%) rotate(18deg); } 78%, 100% { transform: translateX(90%) rotate(18deg); } }
@keyframes heroSweep { 0%, 65% { transform: translateX(-120%); } 82%, 100% { transform: translateX(120%); } }
@keyframes scoreSweep { 0%, 56% { transform: translateX(-110%); } 74%, 100% { transform: translateX(110%); } }
@keyframes liveGlowPulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes skeletonShine { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@keyframes floatOrb { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(28px,-18px,0) scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  .hero-card::after,
  .brand-mark::after,
  .big-score::after,
  .ambient-layer,
  .stat-orb,
  .stadium-glow {
    animation: none !important;
  }
}

/* =========================================================
   LiveBal Ultra Premium Layer v2
   Pure CSS/JS upgrade: richer graphics, no generated images
   ========================================================= */
:root {
  --ultra-bg: #030907;
  --glass: rgba(10, 27, 22, .72);
  --glass-2: rgba(255,255,255,.055);
  --line-soft: rgba(255,255,255,.105);
  --neon-red: #ff375f;
  --gold: #ffd166;
  --purple: #a78bfa;
  --cyan: #65d8ff;
  --field-a: #1fa15c;
  --field-b: #11713f;
}

body {
  background:
    radial-gradient(circle at 18% -8%, rgba(57,229,140,.26), transparent 24rem),
    radial-gradient(circle at 82% 4%, rgba(101,216,255,.15), transparent 30rem),
    radial-gradient(circle at 78% 72%, rgba(167,139,250,.10), transparent 28rem),
    linear-gradient(180deg, #050f0c 0%, #020705 100%);
}

.grain-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .24;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.09) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.08) 0 1px, transparent 1.5px);
  background-size: 34px 34px, 46px 46px;
  mix-blend-mode: soft-light;
}

.ultra-orb {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  border-radius: 999px;
  filter: blur(28px);
  opacity: .55;
  animation: ultraDrift 13s ease-in-out infinite;
}
.ultra-orb-a { width: 320px; height: 320px; left: -120px; top: 22vh; background: rgba(57,229,140,.16); }
.ultra-orb-b { width: 260px; height: 260px; right: -95px; top: 10vh; background: rgba(101,216,255,.12); animation-delay: -4s; }
.ultra-orb-c { width: 380px; height: 380px; right: 12vw; bottom: -200px; background: rgba(255,55,95,.08); animation-delay: -7s; }

.app-shell,
.topbar,
.layout,
.bottom-nav { position: relative; z-index: 1; }

.topbar {
  border-radius: 30px;
  padding: 10px 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.025)),
    rgba(3, 12, 9, .76);
  border-color: rgba(255,255,255,.13);
  box-shadow: 0 26px 95px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.10);
}
.topbar::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(110deg, rgba(57,229,140,.45), transparent 38%, rgba(101,216,255,.24), transparent 70%, rgba(255,209,102,.20));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.brand-mark {
  position: relative;
  overflow: hidden;
  font-size: 1.35rem;
  background:
    radial-gradient(circle at 35% 20%, rgba(255,255,255,.75), transparent 24%),
    linear-gradient(135deg, #72f8ae, #00bf73 58%, #0a7c51);
}
.brand-mark::after {
  content: "";
  position: absolute;
  width: 80%;
  height: 180%;
  transform: translateX(-140%) rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.46), transparent);
  animation: premiumShine 4.4s ease-in-out infinite;
}
.brand strong {
  font-size: 1.18rem;
  background: linear-gradient(90deg, #fff, #d8ffec 45%, #75ffb4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.status-pill {
  background: rgba(255,255,255,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}

.sidebar { gap: 16px; }
.nav-card,
.panel,
.hero-card,
.match-card,
.table-card,
.message,
.pitch-card,
.popular-strip,
.ultra-wall,
.feed-stat-card {
  box-shadow: 0 22px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.075);
}
.nav-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.025)),
    rgba(5, 18, 14, .75);
}
.nav-card a {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
}
.nav-card a::before,
.bottom-nav a::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 15% 50%, rgba(57,229,140,.20), transparent 50%);
  transition: opacity 180ms ease;
}
.nav-card a:hover::before,
.bottom-nav a:hover::before,
.nav-card a.active::before,
.bottom-nav a.active::before { opacity: 1; }
.nav-card a.active,
.bottom-nav a.active {
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.45), transparent 24%),
    linear-gradient(135deg, #76ffb2, #00be72);
  box-shadow: 0 14px 34px rgba(57,229,140,.17);
}

.hero-card {
  position: relative;
  min-height: 176px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 88% 8%, rgba(255,209,102,.16), transparent 18rem),
    radial-gradient(circle at 10% 10%, rgba(57,229,140,.23), transparent 22rem),
    linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.026)),
    rgba(7, 24, 18, .78);
}
.hero-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, transparent, black 16%, black 72%, transparent);
}
.hero-card h1 {
  font-size: clamp(1.9rem, 5vw, 3.25rem);
  letter-spacing: -.08em;
  text-wrap: balance;
}
.hero-stat {
  position: relative;
  overflow: hidden;
  min-width: 116px;
  height: 116px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 18%, rgba(57,229,140,.20), transparent 60%),
    rgba(0,0,0,.30);
}
.hero-stat::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 25px;
  border: 1px dashed rgba(57,229,140,.20);
  animation: slowSpin 18s linear infinite;
}

.ultra-wall {
  display: grid;
  grid-template-columns: .88fr 1.6fr;
  gap: 16px;
  padding: 18px;
  margin-top: 16px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 34px;
  background:
    radial-gradient(circle at 0% 0%, rgba(57,229,140,.18), transparent 22rem),
    radial-gradient(circle at 100% 0%, rgba(101,216,255,.10), transparent 18rem),
    linear-gradient(145deg, rgba(255,255,255,.078), rgba(255,255,255,.026)),
    rgba(6, 18, 14, .78);
  backdrop-filter: blur(16px);
  animation: fadeUp 480ms ease both;
}
.ultra-wall-main {
  display: grid;
  align-content: center;
  min-height: 150px;
  padding: 10px;
}
.ultra-wall-main h2 {
  margin: 6px 0 8px;
  font-size: clamp(1.35rem, 3.5vw, 2.25rem);
  line-height: .98;
  letter-spacing: -.06em;
}
.ultra-wall-main p { margin: 0; color: var(--muted); line-height: 1.45; }
.spotlight-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.spotlight-card {
  display: grid;
  gap: 12px;
  min-height: 154px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 26px;
  color: var(--text);
  background:
    linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.035)),
    rgba(0,0,0,.22);
  cursor: pointer;
  text-align: left;
  transform: translateY(8px);
  opacity: 0;
  animation: spotlightIn 540ms ease forwards;
  animation-delay: var(--d, 0ms);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.spotlight-card:hover { transform: translateY(-4px); border-color: rgba(57,229,140,.35); box-shadow: 0 20px 55px rgba(0,0,0,.34); }
.spotlight-card.is-live { border-color: rgba(255,55,95,.32); box-shadow: inset 0 0 0 1px rgba(255,55,95,.10); }
.spotlight-league { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .76rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.spotlight-league img { width: 18px; height: 18px; object-fit: contain; }
.spotlight-teams { display: grid; gap: 8px; }
.spotlight-teams b { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .9rem; }
.spotlight-teams b img { width: 24px; height: 24px; object-fit: contain; }
.spotlight-teams strong { font-size: 1.55rem; letter-spacing: -.05em; color: var(--accent); }
.spotlight-status { justify-self: start; display: inline-flex; align-items: center; min-height: 28px; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.075); color: var(--muted); font-size: .78rem; font-weight: 900; }

.feed-dashboard {
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.feed-stat-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 112px;
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.025)),
    rgba(7, 25, 19, .72);
}
.feed-stat-card::after {
  content: "";
  position: absolute;
  right: -34px;
  top: -38px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(57,229,140,.10);
  z-index: -1;
}
.feed-stat-card.hot::after { background: rgba(255,55,95,.13); }
.feed-stat-card strong { letter-spacing: -.07em; }
.feed-stat-card.wide { grid-column: span 2; }

.league-group {
  padding: 2px;
  border-radius: 30px;
}
.league-title {
  position: sticky;
  top: 92px;
  z-index: 5;
  margin: 8px 0 0;
  padding: 9px 10px;
  border-radius: 18px;
  background: rgba(3, 12, 9, .62);
  backdrop-filter: blur(13px);
  border: 1px solid rgba(255,255,255,.075);
}
.league-title-link {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}
.league-count {
  margin-left: auto;
  min-width: 28px;
  text-align: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.075);
  color: var(--text);
  font-size: .76rem;
}

.match-card {
  min-height: 150px;
  border-radius: 30px;
  padding: 17px;
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.085), transparent 17rem),
    linear-gradient(145deg, rgba(255,255,255,.082), rgba(255,255,255,.025)),
    rgba(7, 24, 19, .80);
  border-color: rgba(255,255,255,.105);
  box-shadow: 0 20px 70px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.065);
}
.match-card:hover {
  transform: translateY(-4px) scale(1.006);
  border-color: rgba(57,229,140,.34);
  box-shadow: 0 34px 90px rgba(0,0,0,.42), 0 0 0 1px rgba(57,229,140,.09), inset 0 1px 0 rgba(255,255,255,.10);
}
.match-card.is-live {
  border-color: rgba(255,55,95,.32);
  box-shadow: 0 24px 80px rgba(255,55,95,.08), 0 24px 80px rgba(0,0,0,.40);
}
.match-card.is-live::before {
  background: linear-gradient(180deg, var(--neon-red), #ff8fa3) !important;
  box-shadow: 0 0 28px rgba(255,55,95,.45);
}
.match-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.match-badges { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.live-mini-dot,
.kickoff-mini,
.country-mini,
.popular-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .01em;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
}
.live-mini-dot {
  color: var(--teal);
  background: rgba(0,255,163,.08);
  border-color: rgba(0,255,163,.42);
  box-shadow: 0 0 18px rgba(0,255,163,.14), inset 0 0 12px rgba(0,255,163,.08);
}
.live-mini-dot i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 10px var(--teal);
  animation: liveDotBeat .9s ease-in-out infinite;
}
.kickoff-mini,
.country-mini { color: rgba(255,255,255,.76); background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.07); }
.league-chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(255,255,255,.07);
}
.league-dot { box-shadow: 0 0 18px rgba(57,229,140,.45); }

.teams { gap: 8px; }
.team-name { font-weight: 900; letter-spacing: -.02em; }
.score {
  min-width: 40px;
  padding: 6px 9px;
  border-radius: 14px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.18), transparent 65%),
    rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.09);
  font-size: 1.05rem;
  font-weight: 1000;
}
.match-meta {
  align-content: center;
  justify-items: end;
}
.live-time,
.status-ns,
.status-ft {
  min-height: 34px;
  border-radius: 999px;
  font-weight: 1000;
}
.live-time {
  color: #fff;
  background: linear-gradient(135deg, rgba(255,55,95,.24), rgba(255,55,95,.10));
  border-color: rgba(255,55,95,.34);
}
.live-time i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neon-red);
  box-shadow: 0 0 0 0 rgba(255,55,95,.55);
  animation: livePulse 1.2s ease-in-out infinite;
}
.status-ns { color: #ebfff5; background: rgba(57,229,140,.08); }
.status-ft { background: rgba(255,255,255,.075); }

.popular-strip {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 30px;
  padding: 16px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,209,102,.10), transparent 18rem),
    linear-gradient(145deg, rgba(255,255,255,.080), rgba(255,255,255,.022)),
    rgba(6, 20, 15, .75);
}
.section-title-row h2 { letter-spacing: -.04em; }
.popular-scroll { padding-bottom: 2px; }
.mini-match {
  min-width: 236px;
  border-radius: 22px;
  border-color: rgba(255,255,255,.095);
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.026));
  transition: transform 170ms ease, border-color 170ms ease, background 170ms ease;
}
.mini-match:hover { transform: translateY(-3px); border-color: rgba(255,209,102,.30); background: rgba(255,255,255,.085); }

.table-card,
.competition-overview,
.bench-card,
.player-modal-card {
  border-radius: 30px;
  border-color: rgba(255,255,255,.105);
  background:
    linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.024)),
    rgba(7, 23, 18, .78);
}
.table-card header h2 { letter-spacing: -.04em; }

.scoreboard {
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 110px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.08);
}
.scoreboard-team img,
.lineup-item .team-logo,
.league-crest {
  background: rgba(255,255,255,.92);
  border-radius: 18px;
  padding: 4px;
  box-shadow: 0 10px 28px rgba(0,0,0,.24);
}
.big-score {
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  text-shadow: 0 0 28px rgba(57,229,140,.20);
}

.event-list::before { background: linear-gradient(to bottom, transparent, rgba(57,229,140,.50), rgba(101,216,255,.22), transparent); }
.event-item {
  border: 1px solid rgba(255,255,255,.075);
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.026)),
    rgba(0,0,0,.18);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.event-item:hover { transform: translateX(3px); border-color: rgba(57,229,140,.20); }
.event-item.away:hover { transform: translateX(-3px); }
.event-time {
  font-variant-numeric: tabular-nums;
  font-weight: 1000;
  color: #fff;
}
.event-icon { font-size: 1.05rem; background: rgba(255,255,255,.08); }
.event-goal { border-color: rgba(57,229,140,.20); }
.event-red-card { border-color: rgba(255,55,95,.22); }

.pitch-card {
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 30px 110px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
.pitch-header {
  min-height: 62px;
  background:
    radial-gradient(circle at 50% 0%, rgba(57,229,140,.18), transparent 70%),
    linear-gradient(90deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
}
.pitch {
  border-top: 1px solid rgba(255,255,255,.10);
  min-height: 760px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.115), transparent 9rem),
    linear-gradient(rgba(255,255,255,.09) 2px, transparent 2px) 0 50% / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, rgba(31,161,92,.76) 0 10%, rgba(17,113,63,.76) 10% 20%),
    linear-gradient(180deg, #19874d, #0f5e36) !important;
}
.pitch::before,
.pitch::after {
  opacity: .72;
}
.player-tile {
  min-width: 86px;
  padding: 5px 5px 6px;
  border-radius: 19px;
  background: rgba(0,0,0,.08);
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.player-tile:hover {
  transform: translateY(-5px) scale(1.035);
  background: rgba(255,255,255,.10);
  box-shadow: 0 15px 34px rgba(0,0,0,.28);
}
.player-tile .player-avatar {
  width: 46px;
  height: 46px;
  border-radius: 16px;
}
.player-name {
  max-width: 82px;
  padding: 4px 6px;
  border-radius: 10px;
  font-weight: 1000;
  font-size: .70rem;
  backdrop-filter: blur(10px);
}
.player-pos,
.player-click-hint {
  box-shadow: 0 8px 18px rgba(0,0,0,.16);
}
.bench-player {
  border-radius: 17px;
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease;
}
.bench-player:hover { transform: translateY(-2px); border-color: rgba(57,229,140,.22); }

.player-modal-backdrop {
  backdrop-filter: blur(18px);
  background: rgba(1, 6, 4, .72);
}
.player-modal-card {
  box-shadow: 0 40px 140px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.08);
}
.player-rating strong {
  color: var(--accent);
  font-size: 1.7rem;
}
.stat-row {
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}
.stat-bars { height: 9px; }
.stat-bar span { box-shadow: 0 0 18px rgba(57,229,140,.20); }

.bottom-nav {
  border-top: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    rgba(3, 12, 9, .88);
  backdrop-filter: blur(18px);
}
.bottom-nav a { position: relative; overflow: hidden; }
.bottom-nav a.active { color: #022014; }

.toast {
  border-radius: 22px;
  border-color: rgba(255,255,255,.11);
  box-shadow: 0 26px 90px rgba(0,0,0,.42);
}

@media (max-width: 1050px) {
  .ultra-wall { grid-template-columns: 1fr; }
  .spotlight-grid { grid-template-columns: repeat(3, minmax(180px,1fr)); overflow-x: auto; }
}
@media (max-width: 930px) {
  .league-title { top: 82px; }
  .feed-dashboard { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .feed-stat-card.wide { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .app-shell { width: min(100% - 22px, 1220px); }
  .topbar { border-radius: 24px; top: 8px; }
  .brand small { display: none; }
  .hero-card { min-height: 150px; border-radius: 28px; }
  .hero-card h1 { font-size: 2rem; }
  .ultra-wall { border-radius: 28px; padding: 14px; }
  .spotlight-grid { grid-template-columns: minmax(240px, 1fr); }
  .spotlight-card { min-height: 138px; }
  .feed-dashboard { grid-template-columns: 1fr; }
  .feed-stat-card.wide { grid-column: auto; }
  .match-card { border-radius: 24px; }
  .match-card-top { align-items: flex-start; }
  .match-badges { justify-content: flex-start; }
  .team-row { grid-template-columns: 31px minmax(0, 1fr) auto minmax(36px, auto); min-height: 42px; }
  .team-row img { width: 30px; height: 30px; }
  .score { min-width: 36px; font-size: .98rem; }
  .pitch { min-height: 700px; }
  .player-tile { min-width: 74px; }
  .player-tile .player-avatar { width: 40px; height: 40px; border-radius: 14px; }
  .player-name { max-width: 72px; font-size: .64rem; }
}

@keyframes ultraDrift {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(34px,-22px,0) scale(1.08); }
}
@keyframes premiumShine {
  0%, 62% { transform: translateX(-140%) rotate(18deg); }
  78%, 100% { transform: translateX(140%) rotate(18deg); }
}
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes spotlightIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(255,55,95,.56); }
  70% { box-shadow: 0 0 0 8px rgba(255,55,95,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,55,95,0); }
}


/* Ultra atmosphere v3: rijkere app-achtergrond zonder externe afbeeldingen */
:root {
  --deep-a: #020805;
  --deep-b: #061813;
  --glass-strong: rgba(9, 28, 22, .78);
  --live-red: #ff394d;
}

body {
  background:
    radial-gradient(circle at 12% 4%, rgba(57,229,140,.30) 0 18%, transparent 38%),
    radial-gradient(circle at 86% 8%, rgba(117,199,255,.22) 0 16%, transparent 38%),
    radial-gradient(circle at 50% 110%, rgba(255,209,102,.12), transparent 45%),
    linear-gradient(145deg, #020805 0%, #061813 48%, #071021 100%) !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -7;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(255,255,255,.035) 10%, transparent 11% 24%, rgba(255,255,255,.025) 25%, transparent 26% 74%, rgba(255,255,255,.025) 75%, transparent 76% 89%, rgba(255,255,255,.035) 90%, transparent 91%),
    linear-gradient(0deg, transparent 0 49%, rgba(255,255,255,.045) 50%, transparent 51%);
  mask-image: radial-gradient(ellipse at 50% 45%, black 0 55%, transparent 78%);
  opacity: .8;
}

body::after {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: -6;
  pointer-events: none;
  background:
    conic-gradient(from 210deg at 50% 18%, transparent 0 18deg, rgba(57,229,140,.16) 28deg, transparent 42deg 108deg, rgba(117,199,255,.12) 122deg, transparent 140deg 360deg);
  filter: blur(24px);
  opacity: .72;
  animation: slowAurora 18s ease-in-out infinite alternate;
}

@keyframes slowAurora {
  from { transform: translate3d(-2%, -1%, 0) rotate(-2deg) scale(1); }
  to { transform: translate3d(2%, 1%, 0) rotate(2deg) scale(1.04); }
}

.grain-layer {
  opacity: .52;
  mix-blend-mode: overlay;
}

.stadium-glow {
  opacity: .95;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(255,255,255,.14), transparent 28%),
    radial-gradient(ellipse at 85% 0%, rgba(255,255,255,.12), transparent 30%),
    radial-gradient(ellipse at 50% 100%, rgba(57,229,140,.18), transparent 55%) !important;
}

.ambient-layer-one {
  background:
    linear-gradient(110deg, transparent 0 30%, rgba(57,229,140,.08) 44%, transparent 58%),
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.035), transparent 45%) !important;
  animation: sweepLight 10s ease-in-out infinite alternate;
}

.ambient-layer-two {
  background:
    linear-gradient(250deg, transparent 0 28%, rgba(117,199,255,.075) 43%, transparent 60%) !important;
  animation: sweepLightReverse 13s ease-in-out infinite alternate;
}

@keyframes sweepLight {
  from { transform: translateX(-3%) skewX(-5deg); opacity: .48; }
  to { transform: translateX(3%) skewX(5deg); opacity: .76; }
}
@keyframes sweepLightReverse {
  from { transform: translateX(3%) skewX(4deg); opacity: .36; }
  to { transform: translateX(-3%) skewX(-4deg); opacity: .62; }
}

.topbar,
.nav-card,
.panel,
.hero-card,
.table-card,
.match-card,
.pitch-card,
.scoreboard,
.player-modal-card {
  backdrop-filter: blur(22px) saturate(1.22);
  -webkit-backdrop-filter: blur(22px) saturate(1.22);
  box-shadow:
    0 20px 70px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.22);
}

.hero-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(57,229,140,.20) !important;
}
.hero-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(57,229,140,.18), transparent 38%),
    linear-gradient(110deg, transparent, rgba(255,255,255,.09), transparent);
  opacity: .9;
}
.hero-card > * { position: relative; z-index: 1; }

.match-card {
  border-color: rgba(255,255,255,.095) !important;
}
.match-card:hover {
  transform: translateY(-4px) scale(1.006);
  box-shadow: 0 24px 80px rgba(0,0,0,.42), 0 0 0 1px rgba(57,229,140,.16), inset 0 1px 0 rgba(255,255,255,.10);
}
.match-card.is-live {
  box-shadow: 0 18px 60px rgba(255,57,77,.08), inset 4px 0 0 rgba(255,57,77,.72), inset 0 1px 0 rgba(255,255,255,.09);
}

.live-time.live-clock {
  gap: 7px;
  min-width: 64px;
  justify-content: center;
  border-color: rgba(255,57,77,.28);
  background: linear-gradient(135deg, rgba(255,57,77,.20), rgba(255,57,77,.08));
  box-shadow: 0 0 0 1px rgba(255,57,77,.10), 0 0 22px rgba(255,57,77,.10);
}
.live-time.live-clock [data-live-clock-label] {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.live-time.live-clock i {
  background: var(--live-red);
  box-shadow: 0 0 0 5px rgba(255,57,77,.14), 0 0 18px rgba(255,57,77,.70);
  animation: liveDotBeat 1.15s ease-in-out infinite;
}
@keyframes liveDotBeat {
  0%,100% { transform: scale(.92); opacity: .78; }
  50% { transform: scale(1.18); opacity: 1; }
}

.spotlight-status .live-time {
  margin-inline: auto;
}

/* Wissels in timeline, opstelling en spelerkaart */
.event-substitution .event-icon {
  background: linear-gradient(135deg, rgba(117,199,255,.30), rgba(57,229,140,.20));
  color: #d8f7ff;
}
.sub-player-in {
  color: var(--accent);
  font-weight: 900;
}
.sub-player-out {
  color: rgba(255,255,255,.78);
  text-decoration: line-through;
  text-decoration-color: rgba(255,57,77,.65);
  text-decoration-thickness: 2px;
}
.sub-arrow {
  display: inline-flex;
  margin: 0 7px;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.player-tile {
  position: relative;
}
.player-tile .player-avatar,
.bench-avatar {
  position: relative;
}
.player-tile.is-subbed .player-avatar {
  filter: saturate(.92);
}
.player-tile.is-sub-out .player-avatar {
  opacity: .70;
}
.player-tile.is-sub-out .player-name {
  text-decoration: line-through;
  text-decoration-color: rgba(255,57,77,.70);
  text-decoration-thickness: 2px;
}
.player-tile.is-sub-in .player-avatar {
  box-shadow: 0 0 0 2px rgba(57,229,140,.72), 0 0 22px rgba(57,229,140,.20), 0 8px 14px rgba(0,0,0,.32) !important;
}
.sub-badge {
  position: absolute;
  top: 3px;
  right: 2px;
  z-index: 4;
  padding: 2px 5px;
  border-radius: 999px;
  font-size: .58rem;
  line-height: 1;
  font-weight: 950;
  color: white;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.72);
  box-shadow: 0 8px 16px rgba(0,0,0,.28);
}
.sub-badge.in { background: rgba(57,229,140,.88); color: #03140d; }
.sub-badge.out { background: rgba(255,57,77,.86); }
.player-tile.is-subbed .player-click-hint {
  opacity: 1;
  background: rgba(117,199,255,.14);
  color: #dff5ff;
}

.bench-player {
  position: relative;
  padding-right: 46px;
}
.bench-player.is-sub-in {
  border-color: rgba(57,229,140,.26);
  background: rgba(57,229,140,.07);
}
.bench-sub-badge {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 7px;
  border-radius: 999px;
  font-style: normal;
  font-size: .64rem;
  font-weight: 950;
  border: 1px solid rgba(255,255,255,.13);
}
.bench-sub-badge.in { background: rgba(57,229,140,.18); color: var(--accent); }
.bench-sub-badge.out { background: rgba(255,57,77,.16); color: #ffb4be; }

.player-substitution-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
}
.player-substitution-note > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  font-weight: 950;
  background: rgba(255,255,255,.075);
}
.player-substitution-note.is-in {
  border-color: rgba(57,229,140,.22);
  background: rgba(57,229,140,.075);
}
.player-substitution-note.is-out {
  border-color: rgba(255,57,77,.24);
  background: rgba(255,57,77,.065);
}
.player-substitution-note strong {
  display: block;
  margin-bottom: 2px;
}
.player-substitution-note small {
  color: var(--muted);
}

.pitch.pitch-rows {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.07), transparent 18%),
    linear-gradient(90deg, rgba(57,229,140,.08) 0 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px),
    linear-gradient(180deg, rgba(20,94,60,.96), rgba(5,43,30,.96)) !important;
  background-size: auto, 12.5% 100%, 100% 12.5%, auto !important;
  box-shadow: inset 0 0 80px rgba(0,0,0,.30), 0 30px 80px rgba(0,0,0,.32);
}
.pitch-card {
  border-color: rgba(57,229,140,.16) !important;
}

@media (max-width: 720px) {
  .live-time.live-clock { min-width: 58px; }
  .sub-badge { top: -1px; right: -4px; font-size: .52rem; padding: 2px 4px; }
  .bench-player { padding-right: 42px; }
  .player-substitution-note { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  .ambient-layer-one,
  .ambient-layer-two,
  .live-time.live-clock i {
    animation: none !important;
  }
}


/* Line-up availability upgrade */
.lineup-source-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 18px 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 184, 77, 0.14), rgba(66, 240, 164, 0.08));
  color: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.lineup-source-note b {
  white-space: nowrap;
  color: #ffd28a;
  letter-spacing: -0.01em;
}
.lineup-source-note span {
  font-size: 0.82rem;
  line-height: 1.35;
  color: rgba(255,255,255,0.68);
}
.lineup-item.is-derived {
  border-color: rgba(255, 184, 77, 0.22);
  background: linear-gradient(135deg, rgba(255,184,77,0.08), rgba(255,255,255,0.035));
}
.lineup-empty-card {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,184,77,0.12), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035));
}
.pitch-card.is-derived-lineup .pitch {
  border-color: rgba(255, 184, 77, 0.18);
}
@media (max-width: 720px) {
  .lineup-source-note {
    align-items: flex-start;
    flex-direction: column;
    margin: 0 12px 14px;
  }
}

/* Always-available lineups upgrade */
.pitch-header span small {
  display: block;
  margin-top: 3px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.46);
}
.lineup-source-note.source-squad {
  background: linear-gradient(135deg, rgba(77, 166, 255, 0.16), rgba(66, 240, 164, 0.08));
  border-color: rgba(77, 166, 255, 0.22);
}
.lineup-source-note.source-squad b { color: #9fd0ff; }
.lineup-source-note.source-placeholder {
  background: linear-gradient(135deg, rgba(255, 99, 132, 0.13), rgba(255, 184, 77, 0.08));
  border-color: rgba(255, 99, 132, 0.18);
}
.lineup-source-note.source-placeholder b { color: #ffb3c1; }
.pitch-card.source-squad .pitch {
  border-color: rgba(77, 166, 255, 0.18);
}
.pitch-card.source-placeholder .pitch {
  filter: saturate(0.82);
  border-color: rgba(255, 99, 132, 0.16);
}
.lineup-item.is-derived small {
  text-transform: lowercase;
}

/* Pro Form Upgrade: probable lineup ratings + form */
.player-tile.has-season-context {
  min-height: 118px;
  padding-bottom: 8px;
}
.player-season-mini {
  display: grid;
  gap: 2px;
  justify-items: center;
  margin-top: 2px;
  padding: 3px 5px;
  border-radius: 10px;
  background: rgba(0,0,0,.48);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  max-width: 76px;
}
.player-season-mini b {
  line-height: 1;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .01em;
}
.player-season-mini b.great { color: #39e58c; }
.player-season-mini b.good { color: #b9f6ca; }
.player-season-mini b.low { color: #ffb3b3; }
.player-season-mini small {
  line-height: 1;
  font-size: .48rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-season-mini em {
  font-style: normal;
  font-size: .46rem;
  color: rgba(255,255,255,.62);
}
.season-form.hot { color: #39e58c; }
.season-form.good { color: #a7f3d0; }
.season-form.stable { color: #d8ffe8; }
.season-form.mixed { color: #ffd166; }
.season-form.low { color: #ff8fa3; }
.season-form.muted { color: rgba(255,255,255,.58); }
.lineup-context-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px 16px 0;
}
.lineup-form-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px 10px;
  padding: 11px 12px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 15% 0%, rgba(57,229,140,.14), transparent 38%),
    rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 16px 42px rgba(0,0,0,.18);
}
.lineup-form-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avg-rating-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  border-radius: 999px;
  padding: 5px 8px;
  color: #07140e;
  background: linear-gradient(135deg, #39e58c, #d7ffe7);
  font-weight: 900;
  font-size: .75rem;
  box-shadow: 0 0 24px rgba(57,229,140,.20);
}
.avg-rating-chip.muted-chip {
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.08);
  box-shadow: none;
}
.mini-form-row {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.form-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 9px;
  font-weight: 900;
  font-size: .64rem;
  color: #07140e;
}
.form-dot.w { background: #39e58c; }
.form-dot.d { background: #ffd166; }
.form-dot.l { background: #ff5c7a; color: white; }
.lineup-form-card small:last-child {
  grid-column: 1 / -1;
  color: rgba(255,255,255,.66);
}
.bench-season {
  display: block;
  margin-top: 2px;
  color: rgba(57,229,140,.82) !important;
  font-size: .67rem !important;
}
.season-context-panel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.season-context-panel div {
  min-width: 0;
  padding: 12px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 0%, rgba(57,229,140,.12), transparent 42%),
    rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
}
.season-context-panel small {
  display: block;
  color: rgba(255,255,255,.58);
  font-size: .72rem;
  margin-bottom: 4px;
}
.season-context-panel strong {
  color: var(--text);
  font-size: 1rem;
}
.season-context-panel strong.hot { color: #39e58c; }
.season-context-panel strong.good { color: #a7f3d0; }
.season-context-panel strong.stable { color: #d8ffe8; }
.season-context-panel strong.mixed { color: #ffd166; }
.season-context-panel strong.low { color: #ff8fa3; }
.season-context-panel strong.muted { color: rgba(255,255,255,.62); }

@media (max-width: 780px) {
  .lineup-context-strip { grid-template-columns: 1fr; padding: 10px 10px 0; }
  .player-tile.has-season-context { min-height: 108px; }
  .player-season-mini { max-width: 64px; padding: 2px 4px; }
  .player-season-mini small { max-width: 58px; font-size: .42rem; }
  .season-context-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .player-tile.has-season-context { min-height: 101px; }
  .player-season-mini b { font-size: .58rem; }
  .player-season-mini small { display: none; }
  .season-context-panel { grid-template-columns: 1fr; }
}

/* Knock-out brackets */
.bracket-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  margin: 18px 0;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 30px;
  background:
    radial-gradient(circle at 12% 0%, rgba(57,229,140,.18), transparent 28rem),
    linear-gradient(135deg, rgba(16,39,31,.94), rgba(7,20,16,.84));
  box-shadow: 0 24px 70px rgba(0,0,0,.34);
}
.bracket-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 88%);
}
.bracket-card > * { position: relative; z-index: 1; }
.bracket-card header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.bracket-card h2 { margin: 0; font-size: clamp(1.1rem, 2vw, 1.55rem); letter-spacing: -.045em; }
.bracket-pill {
  display: inline-flex;
  align-items: center;
  min-width: max-content;
  padding: 8px 12px;
  border-radius: 999px;
  color: #03140e;
  background: linear-gradient(135deg, var(--accent), #9affc2);
  font-size: .82rem;
  font-weight: 900;
  box-shadow: 0 16px 36px rgba(57,229,140,.18);
}
.bracket-round {
  min-width: 255px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 24px;
  background: rgba(255,255,255,.045);
  backdrop-filter: blur(10px);
}
.bracket-round-head {
  min-height: 54px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bracket-round-head strong { font-size: .95rem; letter-spacing: -.02em; }
.bracket-round-head small { color: var(--muted); line-height: 1.25; }
.bracket-ties { display: grid; gap: 10px; }
.bracket-tie {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(4,16,13,.74), rgba(255,255,255,.04));
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
}
.bracket-tie.is-live { border-color: rgba(255,76,76,.45); box-shadow: 0 16px 36px rgba(255,76,76,.12); }
.bracket-tie.is-live::before {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background: #ff4d4d;
  box-shadow: 0 0 22px #ff4d4d;
  animation: livePulse 1.2s ease-in-out infinite;
}
.bracket-tie-main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 12px;
}
.bracket-team {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px;
  border-radius: 14px;
  color: var(--muted);
  cursor: pointer;
}
.bracket-team:hover { background: rgba(255,255,255,.06); color: var(--text); }
.bracket-team img, .bracket-team i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: contain;
  background: rgba(255,255,255,.08);
  flex: 0 0 auto;
}
.bracket-team b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .86rem; }
.bracket-team.is-winner { color: var(--text); background: rgba(57,229,140,.1); }
.bracket-team.is-winner b::after { content:" ✓"; color: var(--accent); }
.bracket-aggregate {
  padding: 7px 9px;
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 950;
  color: var(--text);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.1);
}
.bracket-legs {
  display: grid;
  gap: 6px;
  padding: 0 10px 10px;
}
.bracket-leg {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  color: var(--muted);
  background: rgba(255,255,255,.035);
  cursor: pointer;
}
.bracket-leg:hover {
  color: var(--text);
  background: rgba(57,229,140,.075);
  border-color: rgba(57,229,140,.24);
}
.bracket-leg span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .78rem; }
.bracket-leg span:last-child { text-align: right; }
.bracket-leg small { min-width: max-content; }
.bracket-empty p { margin: 0; line-height: 1.55; }
.brackets-hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.bracket-hub-card {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 26px;
  color: var(--text);
  text-align: left;
  background: linear-gradient(135deg, var(--card-strong), var(--bg-2));
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  cursor: pointer;
  transition: transform var(--fast), border-color var(--fast), background var(--fast);
}
.bracket-hub-card:hover { transform: translateY(-3px); border-color: rgba(0,229,255,.35); background: linear-gradient(135deg, rgba(0,102,255,.14), var(--bg-2)); }
.bracket-hub-card span { display: block; margin-bottom: 20px; }
.bracket-hub-icon .icon-svg { width: 32px; height: 32px; color: var(--accent); }
.bracket-hub-card b { display: block; font-size: 1.05rem; letter-spacing: -.025em; }
.bracket-hub-card small { display: block; margin-top: 4px; color: var(--muted); }
@media (max-width: 720px) {
  .bracket-card { padding: 14px; border-radius: 24px; }
  .bracket-card header { flex-direction: column; }
  .bracket-tie-main { grid-template-columns: 1fr; }
  .bracket-aggregate { justify-self: center; }
  .bracket-leg { grid-template-columns: 1fr; text-align: left; }
  .bracket-leg span:last-child { text-align: left; }
}

/* Bracket als overzichtelijke stapel: per ronde een sectie, geen
   verbindingslijnen. Lijnen bleven onduidelijk zodra een ronde ongelijke
   aantallen ties had (byes, samengevoegde kwalificatierondes). */
.bracket-card-visual {
  background:
    radial-gradient(circle at 8% 8%, rgba(57,229,140,.24), transparent 25rem),
    radial-gradient(circle at 94% 14%, rgba(90,135,255,.16), transparent 22rem),
    linear-gradient(135deg, rgba(13,31,26,.96), rgba(4,14,13,.9));
}
.bracket-rounds-stack {
  display: grid;
  gap: 20px;
}
.bracket-card-visual .bracket-round {
  padding: 14px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.028)),
    rgba(3,14,12,.36);
  border-color: rgba(255,255,255,.105);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 18px 50px rgba(0,0,0,.23);
}
.bracket-card-visual .bracket-round-head {
  min-height: 44px;
  padding: 10px 14px;
  margin: 0 0 14px;
  border-radius: 18px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: linear-gradient(135deg, rgba(57,229,140,.12), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.08);
}
.bracket-card-visual .bracket-round-head strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
}
.bracket-card-visual .bracket-round-head strong::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(57,229,140,.75);
}
.bracket-card-visual .bracket-ties {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.bracket-card-visual .bracket-tie {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(circle at 15% 10%, rgba(57,229,140,.12), transparent 60%),
    linear-gradient(180deg, rgba(8,27,22,.94), rgba(255,255,255,.045));
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 16px 42px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform var(--fast), border-color var(--fast), box-shadow var(--fast);
}
.bracket-card-visual .bracket-tie:hover {
  transform: translateY(-2px);
  border-color: rgba(57,229,140,.34);
  box-shadow: 0 22px 52px rgba(0,0,0,.34), 0 0 0 1px rgba(57,229,140,.08) inset;
}
.bracket-card-visual .bracket-tie-main {
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  padding: 12px 12px 9px;
}
.bracket-card-visual .bracket-team {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.045);
}
.bracket-card-visual .bracket-team.is-winner {
  border-color: rgba(57,229,140,.24);
  box-shadow: inset 0 0 0 1px rgba(57,229,140,.06), 0 8px 20px rgba(57,229,140,.06);
}
.bracket-card-visual .bracket-aggregate {
  color: #03140e;
  background: linear-gradient(135deg, var(--accent), #b6ffd2);
  border: 0;
  box-shadow: 0 12px 28px rgba(57,229,140,.16);
}
.bracket-card-visual .bracket-aggregate.muted-chip {
  color: var(--muted);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: none;
}
@media (max-width: 720px) {
  .bracket-card-visual .bracket-ties { grid-template-columns: 1fr; }
  .bracket-card-visual .bracket-tie-main { grid-template-columns: 1fr; }
  .bracket-card-visual .bracket-aggregate { justify-self: center; }
}


/* Date + kickoff time badges for upcoming matches */
.status-kickoff {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  max-width: 132px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #ebfff5;
  background: linear-gradient(135deg, rgba(57,229,140,.13), rgba(117,199,255,.08));
  border: 1px solid rgba(57,229,140,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  white-space: nowrap;
  font-weight: 1000;
  line-height: 1;
}
.status-kickoff::before {
  content: "⌚";
  font-size: .75rem;
  opacity: .88;
  filter: saturate(1.2);
}
.status-kickoff b,
.status-kickoff em {
  display: inline-block;
  line-height: 1;
  font-style: normal;
}
.status-kickoff b {
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .72rem;
  color: rgba(235,255,245,.78);
}
.status-kickoff em {
  font-size: .86rem;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.match-meta > .status-kickoff {
  justify-self: end;
}
.match-card.is-live .status-kickoff {
  display: none;
}
.mini-match .status-kickoff,
.spotlight-status .status-kickoff,
.bracket-leg .status-kickoff {
  max-width: 160px;
  min-height: 30px;
  padding: 4px 8px;
}
.mini-match .status-kickoff b,
.spotlight-status .status-kickoff b,
.bracket-leg .status-kickoff b {
  max-width: 78px;
}
@media (max-width: 720px) {
  .status-kickoff {
    max-width: 112px;
    gap: 5px;
    padding: 5px 8px;
  }
  .status-kickoff::before { display: none; }
  .status-kickoff b { max-width: 56px; font-size: .68rem; }
  .status-kickoff em { font-size: .82rem; }
  .match-meta { min-width: 96px; }
}

/* Match detail center: show kickoff date/time before the match, live timer during the match */
.big-score-status {
  min-width: 190px;
  padding: 15px 18px;
  display: grid;
  place-items: center;
  gap: 6px;
  letter-spacing: 0;
  line-height: 1.05;
}
.big-score-status .score-line,
.big-score-status .score-subline {
  position: relative;
  z-index: 1;
}
.big-score-status .score-line {
  font-size: clamp(1.55rem, 4vw, 2.75rem);
  font-weight: 1000;
  letter-spacing: -0.055em;
  color: #fff;
}
.big-score-status .score-subline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .10em;
}
.big-score-status .status-kickoff {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.big-score-status .status-kickoff b {
  font-size: clamp(1.08rem, 3.4vw, 2rem);
  color: #fff;
  letter-spacing: -0.045em;
  line-height: 1.05;
}
.big-score-status .status-kickoff em {
  color: var(--accent);
  font-size: clamp(1.6rem, 6vw, 3.25rem);
  font-weight: 1000;
  font-style: normal;
  letter-spacing: -0.07em;
  line-height: .95;
}
.big-score-status.is-live-score {
  border-color: rgba(255, 76, 76, .22);
  box-shadow: inset 0 0 26px rgba(255,76,76,.06), 0 0 52px rgba(255,76,76,.06);
}
.big-score-status.is-live-score .score-subline .live-time {
  font-size: 1rem;
  padding: 7px 12px;
}
.big-score-status.is-upcoming-score {
  border-color: rgba(101,216,255,.18);
  box-shadow: inset 0 0 26px rgba(101,216,255,.06), 0 0 52px rgba(101,216,255,.04);
}
.big-score-status.is-finished-score .score-subline {
  color: rgba(255,255,255,.62);
}
@media (max-width: 720px) {
  .big-score-status {
    width: 100%;
    min-width: 0;
  }
}

/* Fix: readable upcoming kickoff block in the match detail header */
.big-score-status .score-line.score-date {
  display: block;
  width: 100%;
  font-size: 1rem;
  letter-spacing: 0;
}
.big-score-status .score-line.score-date .status-kickoff {
  min-width: 172px;
  max-width: none;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 5px;
  padding: 2px 4px;
  white-space: normal;
}
.big-score-status .score-line.score-date .status-kickoff::before {
  display: none;
}
.big-score-status .score-line.score-date .status-kickoff b {
  max-width: none;
  width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  font-size: clamp(.72rem, 1.35vw, .95rem);
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(235,255,245,.72);
  line-height: 1.05;
}
.big-score-status .score-line.score-date .status-kickoff em {
  font-size: clamp(2.1rem, 7vw, 4rem);
  font-weight: 1000;
  letter-spacing: -0.08em;
  line-height: .9;
  color: var(--accent);
}
@media (max-width: 720px) {
  .big-score-status .score-line.score-date .status-kickoff {
    min-width: 150px;
  }
  .big-score-status .score-line.score-date .status-kickoff b {
    font-size: .72rem;
    letter-spacing: .07em;
  }
  .big-score-status .score-line.score-date .status-kickoff em {
    font-size: 2.35rem;
  }
}


/* === LiveBal Ultra Hype Pack: extra animaties & graphics, zonder afbeeldingen === */
:root {
  --mx: 50vw;
  --my: 20vh;
  --hype-red: #ff4d5d;
  --hype-gold: #ffd166;
  --neon-blue: #64d7ff;
}

body {
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.055), transparent 19rem),
    radial-gradient(circle at 12% 0%, rgba(57, 229, 140, 0.25), transparent 30rem),
    radial-gradient(circle at 88% 12%, rgba(100, 215, 255, 0.16), transparent 30rem),
    radial-gradient(circle at 48% 115%, rgba(255, 77, 93, 0.10), transparent 42rem),
    linear-gradient(180deg, #06130f 0%, #030b09 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  mix-blend-mode: overlay;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.18), transparent 36rem);
  animation: scanlineDrift 11s linear infinite;
  z-index: 0;
}

.stadium-glow {
  background:
    radial-gradient(ellipse at center, rgba(57, 229, 140, 0.20), transparent 52%),
    radial-gradient(ellipse at 35% 60%, rgba(100,215,255,.12), transparent 48%);
  animation: stadiumBreathe 5.5s ease-in-out infinite;
}

.stadium-beams {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  opacity: .62;
  mix-blend-mode: screen;
}
.stadium-beams span {
  position: absolute;
  top: -18vh;
  width: 18vw;
  height: 118vh;
  transform-origin: 50% 0%;
  background: linear-gradient(to bottom, rgba(255,255,255,.16), rgba(57,229,140,.055) 38%, transparent 80%);
  filter: blur(18px);
  animation: beamSweep 9s ease-in-out infinite;
}
.stadium-beams span:nth-child(1) { left: 7vw; transform: rotate(17deg); animation-delay: -1s; }
.stadium-beams span:nth-child(2) { left: 31vw; transform: rotate(-11deg); animation-delay: -5s; background: linear-gradient(to bottom, rgba(100,215,255,.13), rgba(57,229,140,.05), transparent 80%); }
.stadium-beams span:nth-child(3) { right: 20vw; transform: rotate(12deg); animation-delay: -2.8s; }
.stadium-beams span:nth-child(4) { right: 2vw; transform: rotate(-18deg); animation-delay: -6.5s; background: linear-gradient(to bottom, rgba(255,209,102,.11), rgba(255,255,255,.045), transparent 82%); }

.score-sparks {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.score-sparks i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  box-shadow: 0 0 18px rgba(57,229,140,.75), 0 0 34px rgba(100,215,255,.35);
  animation: sparkFloat 8s linear infinite;
}
.score-sparks i:nth-child(1) { left: 14%; top: 82%; animation-delay: -1s; }
.score-sparks i:nth-child(2) { left: 27%; top: 68%; animation-delay: -4s; }
.score-sparks i:nth-child(3) { left: 44%; top: 88%; animation-delay: -2.1s; }
.score-sparks i:nth-child(4) { left: 61%; top: 76%; animation-delay: -5.6s; }
.score-sparks i:nth-child(5) { left: 78%; top: 84%; animation-delay: -3.2s; }
.score-sparks i:nth-child(6) { left: 90%; top: 70%; animation-delay: -6.8s; }

.topbar {
  box-shadow: 0 24px 70px rgba(0,0,0,.38), 0 0 0 1px rgba(57,229,140,.045), inset 0 1px 0 rgba(255,255,255,.12);
}
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 0 38%, rgba(255,255,255,.08) 48%, transparent 58%);
  transform: translateX(-120%);
  animation: premiumBarSweep 8s ease-in-out infinite;
}

.brand-mark {
  animation: ballFloat 3.2s ease-in-out infinite, brandPulse 2.7s ease-in-out infinite;
}
.brand-mark::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 22px;
  border: 1px solid rgba(57,229,140,.33);
  opacity: .0;
  animation: logoRing 2.8s ease-in-out infinite;
}

.nav-card a.active,
.bottom-nav a.active {
  box-shadow: inset 0 0 18px rgba(57,229,140,.10), 0 8px 20px rgba(0,0,0,.18);
}
.nav-card a span,
.bottom-nav a:first-child {
  transform-origin: center;
}
.nav-card a:hover span { animation: iconPop .55s cubic-bezier(.2,1.5,.3,1) both; }

.hero-card {
  box-shadow: 0 30px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(57,229,140,.04);
}
.hero-card::before {
  animation: heroRings 9s linear infinite;
}
.hero-stat span,
#matchCount {
  text-shadow: 0 0 24px rgba(57,229,140,.35);
}

.ultra-wall {
  position: relative;
  overflow: hidden;
}
.ultra-wall::before {
  content: "";
  position: absolute;
  inset: -40%;
  pointer-events: none;
  background: conic-gradient(from 0deg, transparent, rgba(57,229,140,.12), transparent, rgba(100,215,255,.11), transparent);
  animation: slowSpin 18s linear infinite;
  opacity: .65;
}
.ultra-wall > * { position: relative; z-index: 1; }

.feed-stat-card {
  transition: transform .22s cubic-bezier(.2,1,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.feed-stat-card:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: rgba(57,229,140,.28);
  box-shadow: 0 26px 74px rgba(0,0,0,.34), 0 0 30px rgba(57,229,140,.08);
}
.feed-stat-card.hot .stat-orb {
  animation: heatBeat 1.45s ease-in-out infinite;
}
.stat-orb::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  border: 1px solid currentColor;
  opacity: .35;
  animation: orbPing 2.1s ease-out infinite;
}

.match-card {
  isolation: isolate;
  box-shadow: 0 16px 46px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.075);
}
.match-card:hover {
  transform: translateY(-6px) scale(1.006);
  box-shadow: 0 28px 80px rgba(0,0,0,.38), 0 0 32px rgba(57,229,140,.08), inset 0 1px 0 rgba(255,255,255,.12);
}
.match-card .match-ambient::after {
  content: "";
  position: absolute;
  inset: -30%;
  pointer-events: none;
  opacity: .0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), transparent 42%);
  transition: opacity .25s ease;
  animation: cardAurora 8s ease-in-out infinite;
}
.match-card:hover .match-ambient::after { opacity: .32; }
.match-card.is-live {
  border-color: rgba(255,77,93,.34);
  box-shadow: 0 20px 64px rgba(255,77,93,.11), 0 0 0 1px rgba(255,77,93,.06), inset 0 1px 0 rgba(255,255,255,.10);
}
.match-card.is-live::before {
  background: linear-gradient(to bottom, #ff4057, #ffd166, #39e58c);
  box-shadow: 0 0 22px rgba(255,64,87,.55), 0 0 34px rgba(57,229,140,.25);
}
.live-time i {
  animation: liveDotBeat .9s ease-in-out infinite !important;
}
.match-card.is-live .score {
  color: #fff;
  text-shadow: 0 0 18px rgba(255,255,255,.10), 0 0 22px rgba(255,76,76,.20);
}
.score {
  position: relative;
  transition: transform .18s ease, color .18s ease, text-shadow .18s ease;
}
.team-row:hover .score { transform: scale(1.08); color: var(--accent); }
.team-row img {
  transition: transform .25s cubic-bezier(.2,1.45,.3,1), filter .25s ease;
}
.team-row:hover img {
  transform: translateY(-2px) scale(1.12) rotate(-3deg);
  filter: drop-shadow(0 0 14px rgba(0,229,255,.18));
}
.match-card.score-burst {
  animation: goalCardBurst 1.2s ease both, fadeUp 360ms ease both;
}
.match-card.score-burst .score {
  animation: scorePop 1.15s cubic-bezier(.14,1.55,.32,1) both;
}
.match-card.score-burst::after {
  background: linear-gradient(105deg, transparent 12%, rgba(255,209,102,.22), rgba(255,255,255,.20), transparent 55%);
  animation: goalSweep .95s ease both;
}

.league-title {
  position: sticky;
  top: 88px;
  z-index: 8;
  backdrop-filter: blur(16px);
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(6,19,15,.84), rgba(6,19,15,.44), transparent);
}
.league-title-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(57,229,140,.55), transparent);
  transform: scaleX(.22);
  opacity: .0;
  transition: opacity .2s ease, transform .2s ease;
}
.league-title-link:hover::after { opacity: 1; transform: scaleX(1); }

.spotlight-card {
  overflow: hidden;
  transform-style: preserve-3d;
}
.spotlight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.12), transparent 18rem);
  opacity: .18;
}
.spotlight-card:hover {
  transform: translateY(-5px) rotateX(1deg);
}
.spotlight-card.is-live {
  animation: liveCardBreath 2.4s ease-in-out infinite;
}

.scoreboard {
  position: relative;
  overflow: hidden;
  box-shadow: 0 32px 100px rgba(0,0,0,.42), 0 0 60px rgba(57,229,140,.06), inset 0 1px 0 rgba(255,255,255,.10);
}
.scoreboard::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -45%;
  width: min(560px, 88vw);
  height: min(560px, 88vw);
  transform: translateX(-50%);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 44px rgba(255,255,255,.012), inset 0 0 0 88px rgba(57,229,140,.012);
}
.scoreboard::after {
  content: none;
}
.scoreboard > * { position: relative; z-index: 1; }
.score-team img {
  animation: crestFloat 3.6s ease-in-out infinite;
}
.score-team:nth-child(3) img { animation-delay: -1.7s; }
.big-score-status.is-live-score,
.big-score {
  position: relative;
  overflow: hidden;
}
.big-score::after {
  content: none;
}

.big-score-status.is-live-score::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(0, 255, 163, .18), transparent 70%);
  animation: liveGlowPulse 2.6s ease-in-out infinite;
  pointer-events: none;
}

.event-list {
  position: relative;
}
.event-list::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(57,229,140,.24), rgba(100,215,255,.18), transparent);
}
.event-item {
  position: relative;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.event-item:hover {
  transform: translateX(4px) scale(1.006);
  border-color: rgba(57,229,140,.26);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
.event-item.away:hover { transform: translateX(-4px) scale(1.006); }
.event-goal {
  animation: eventGoalFlash .85s ease both, fadeUp 320ms ease both;
}
.event-goal .event-icon {
  animation: goalIconBounce 1.4s cubic-bezier(.2,1.6,.3,1) both;
  box-shadow: 0 0 24px rgba(57,229,140,.18);
}
.event-card .event-icon { box-shadow: 0 0 18px rgba(255,209,102,.12); }
.event-red-card .event-icon { box-shadow: 0 0 22px rgba(255,77,93,.18); }

.stat-row {
  transition: transform .18s ease, background .18s ease;
  border-radius: 16px;
  padding: 3px 0;
}
.stat-row:hover { transform: translateX(3px); background: rgba(255,255,255,.025); }
.bar > span,
.stat-bar > span {
  position: relative;
  overflow: hidden;
}
.bar > span::after,
.stat-bar > span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
  transform: translateX(-110%);
  animation: barGlint 3.4s ease-in-out infinite;
}

.pitch-card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 32px 90px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.11);
}
.pitch-card::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: .18;
  background: conic-gradient(from 70deg, transparent, rgba(57,229,140,.12), transparent, rgba(100,215,255,.11), transparent);
  animation: slowSpin 24s linear infinite;
}
.pitch-card > * { position: relative; z-index: 1; }
.pitch.pitch-rows {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), transparent 9%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 62px),
    linear-gradient(180deg, rgba(22,122,68,.78), rgba(7,61,35,.88));
}
.player-tile {
  transition: transform .22s cubic-bezier(.2,1.5,.3,1), filter .22s ease;
}
.player-tile:hover,
.player-tile:focus-visible {
  transform: translateY(-8px) scale(1.08) !important;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.28));
}
.player-tile .player-avatar {
  position: relative;
}
.player-tile .player-avatar::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 1px solid rgba(57,229,140,.0);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.player-tile:hover .player-avatar::after {
  border-color: rgba(57,229,140,.42);
  box-shadow: 0 0 22px rgba(57,229,140,.18);
}
.player-tile.subbed-player .player-avatar,
.bench-player.has-substitution .player-avatar {
  animation: subbedGlow 2.2s ease-in-out infinite;
}

.bracket-tie {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.bracket-tie:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: rgba(57,229,140,.34);
  box-shadow: 0 24px 58px rgba(0,0,0,.32), 0 0 28px rgba(57,229,140,.08);
}
.bracket-line {
  filter: drop-shadow(0 0 8px rgba(57,229,140,.28));
  stroke-dasharray: 12 8;
  animation: bracketLineIn .75s ease both, bracketDash 12s linear infinite;
}

.toast.goal {
  animation: toastGoalShake .52s ease both;
}
.toast.show.goal {
  box-shadow: 0 22px 70px rgba(0,0,0,.36), 0 0 30px rgba(57,229,140,.18);
}

@keyframes scanlineDrift { from { background-position: 0 0, 0 0; } to { background-position: 0 56px, 0 0; } }
@keyframes stadiumBreathe { 0%,100% { opacity: .48; transform: scale(1); } 50% { opacity: .94; transform: scale(1.06) translateY(-8px); } }
@keyframes beamSweep { 0%,100% { opacity: .23; transform: rotate(var(--r, 12deg)) translateX(-4vw); } 50% { opacity: .75; transform: rotate(calc(var(--r, 12deg) * -1)) translateX(5vw); } }
@keyframes sparkFloat { 0% { transform: translateY(0) scale(.7); opacity: 0; } 14% { opacity: .75; } 100% { transform: translateY(-85vh) scale(1.45); opacity: 0; } }
@keyframes premiumBarSweep { 0%, 68% { transform: translateX(-130%); } 82%, 100% { transform: translateX(130%); } }
@keyframes brandPulse { 0%,100% { box-shadow: 0 12px 32px rgba(57,229,140,.25); } 50% { box-shadow: 0 15px 44px rgba(57,229,140,.44), 0 0 26px rgba(100,215,255,.13); } }
@keyframes logoRing { 0% { transform: scale(.88); opacity: .0; } 42% { opacity: .55; } 100% { transform: scale(1.26); opacity: 0; } }
@keyframes iconPop { 0% { transform: scale(1) rotate(0); } 55% { transform: scale(1.28) rotate(-8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes heroRings { to { transform: rotate(360deg); } }
@keyframes heatBeat { 0%,100% { transform: scale(1); box-shadow: 0 0 0 rgba(255,77,93,0); } 50% { transform: scale(1.18); box-shadow: 0 0 26px rgba(255,77,93,.38); } }
@keyframes orbPing { 0% { transform: scale(.65); opacity: .45; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes cardAurora { 0%,100% { transform: translate(-10%, 0) rotate(0deg); } 50% { transform: translate(10%, -4%) rotate(8deg); } }
@keyframes goalCardBurst { 0% { transform: translateY(0) scale(1); border-color: rgba(255,209,102,.65); } 28% { transform: translateY(-8px) scale(1.018); border-color: rgba(255,209,102,.92); box-shadow: 0 0 58px rgba(255,209,102,.25), 0 0 34px rgba(57,229,140,.18); } 100% { transform: translateY(0) scale(1); } }
@keyframes scorePop { 0% { transform: scale(1); } 28% { transform: scale(1.52) rotate(-4deg); color: #ffd166; text-shadow: 0 0 24px rgba(255,209,102,.65); } 100% { transform: scale(1); } }
@keyframes goalSweep { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@keyframes liveCardBreath { 0%,100% { box-shadow: 0 16px 42px rgba(0,0,0,.30), 0 0 0 rgba(255,77,93,0); } 50% { box-shadow: 0 24px 60px rgba(0,0,0,.36), 0 0 34px rgba(255,77,93,.16); } }
@keyframes scoreHaloRotate { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes scoreHeaderSweep { 0%,66% { transform: translateX(-130%); } 82%,100% { transform: translateX(130%); } }
@keyframes crestFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.035); } }
@keyframes eventGoalFlash { 0% { box-shadow: 0 0 0 rgba(57,229,140,0); } 35% { box-shadow: 0 0 38px rgba(57,229,140,.18); } 100% { box-shadow: 0 0 0 rgba(57,229,140,0); } }
@keyframes goalIconBounce { 0% { transform: scale(.8) rotate(-10deg); } 45% { transform: scale(1.28) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes subSwap { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } }
@keyframes barGlint { 0%,60% { transform: translateX(-110%); } 82%,100% { transform: translateX(110%); } }
@keyframes subbedGlow { 0%,100% { box-shadow: 0 10px 22px rgba(0,0,0,.28); } 50% { box-shadow: 0 10px 24px rgba(0,0,0,.30), 0 0 20px rgba(100,215,255,.22); } }
@keyframes bracketDash { to { stroke-dashoffset: -180; } }
@keyframes toastGoalShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 760px) {
  .stadium-beams { opacity: .38; }
  .league-title { top: 10px; }
  .match-card:hover { transform: translateY(-2px) scale(1); }
  .scoreboard::before { width: 122vw; height: 122vw; }
  .event-list::before { left: 19px; }
}

/* Team info / market value upgrade */
.premium-team-hero {
  position: relative;
  overflow: hidden;
}
.premium-team-hero::after {
  content: '';
  position: absolute;
  inset: -40% -15% auto auto;
  width: 340px;
  height: 340px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(57,229,140,.22), transparent 62%);
  pointer-events: none;
  animation: teamHeroGlow 8s ease-in-out infinite;
}
.team-hero-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
}
.team-value-badge {
  display: grid;
  gap: 2px;
  min-width: 130px;
  padding: 10px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(57,229,140,.14), rgba(100,215,255,.09));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.22);
}
.team-value-badge small { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.team-value-badge b { font-size: 1.05rem; color: #fff; }
.team-info-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.team-info-tile {
  min-height: 96px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  box-shadow: 0 18px 44px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06);
  display: grid;
  align-content: center;
  gap: 4px;
  position: relative;
  overflow: hidden;
}
.team-info-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.08), transparent);
  transform: translateX(-120%);
  animation: premiumBarSweep 9s ease-in-out infinite;
}
.team-info-tile span,
.team-info-tile small { color: var(--muted); }
.team-info-tile span { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.team-info-tile strong { font-size: 1.08rem; color: #fff; }
.team-info-tile.highlight {
  border-color: rgba(57,229,140,.25);
  background: linear-gradient(145deg, rgba(57,229,140,.16), rgba(100,215,255,.07));
}
.team-stat-hero {
  display: grid;
  grid-template-columns: 1.4fr .8fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.team-stat-hero > div,
.team-kpi-grid article {
  padding: 13px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.045);
}
.team-stat-hero small,
.team-kpi-grid span,
.team-kpi-grid small { color: var(--muted); }
.team-stat-hero strong,
.team-kpi-grid strong { display: block; margin-top: 4px; font-size: 1.24rem; color: #fff; }
.team-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.form-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.form-pills b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: .8rem;
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.form-pills .win { background: rgba(57,229,140,.82); }
.form-pills .draw { background: rgba(255,209,102,.78); }
.form-pills .loss { background: rgba(255,77,93,.78); }
.coach-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 88px;
}
.coach-profile img,
.coach-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  object-fit: cover;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  display: grid;
  place-items: center;
  font-size: 2rem;
}
.coach-profile strong { display: block; color: #fff; font-size: 1.08rem; }
.coach-profile small { color: var(--muted); }
.enhanced-squad-card { overflow: hidden; }
.market-note {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,209,102,.18);
  background: rgba(255,209,102,.08);
  color: var(--muted);
  line-height: 1.45;
}
.market-note code {
  color: #fff;
  background: rgba(0,0,0,.25);
  padding: 2px 6px;
  border-radius: 8px;
}
.squad-table {
  display: grid;
  gap: 8px;
}
.squad-row-pro {
  width: 100%;
  display: grid;
  grid-template-columns: 52px minmax(170px, 1fr) repeat(5, minmax(76px, .45fr));
  gap: 10px;
  align-items: center;
  text-align: left;
  color: inherit;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.squad-row-pro:hover {
  transform: translateY(-2px);
  border-color: rgba(57,229,140,.28);
  background: linear-gradient(135deg, rgba(57,229,140,.10), rgba(255,255,255,.035));
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
}
.squad-avatar-pro {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  position: relative;
  display: grid;
  place-items: center;
}
.squad-avatar-pro img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.squad-avatar-pro.no-photo img { display: none; }
.squad-row-pro .avatar-fallback { position: relative; z-index: 1; }
.squad-main b { display: block; color: #fff; font-size: .96rem; }
.squad-main small,
.squad-row-pro small { color: var(--muted); }
.squad-row-pro > span:not(.squad-main):not(.squad-avatar-pro) b { display: block; color: #fff; font-size: .92rem; margin-top: 2px; }
.market-cell b { color: #39e58c !important; }
.transfer-list { display: grid; gap: 9px; }
.transfer-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr);
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.transfer-row b { color: #fff; }
.transfer-row small,
.transfer-row span { color: var(--muted); }
.transfer-row span { text-align: right; }
@keyframes teamHeroGlow { 0%,100% { opacity: .45; transform: translateY(0) scale(1); } 50% { opacity: .85; transform: translateY(-14px) scale(1.08); } }

@media (max-width: 1040px) {
  .team-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-info-tile.highlight { grid-column: 1 / -1; }
  .squad-row-pro { grid-template-columns: 52px minmax(140px, 1fr) repeat(3, minmax(62px, .4fr)); }
  .squad-row-pro > span:nth-last-child(-n+2) { display: none; }
}
@media (max-width: 760px) {
  .premium-team-hero { align-items: flex-start; }
  .team-hero-actions { width: 100%; justify-content: space-between; margin-left: 0; }
  .team-info-grid,
  .team-stat-hero,
  .team-kpi-grid { grid-template-columns: 1fr; }
  .squad-row-pro { grid-template-columns: 46px minmax(0, 1fr) 58px 58px; gap: 8px; }
  .squad-row-pro > span:nth-last-child(-n+3) { display: none; }
  .transfer-row { grid-template-columns: 1fr; }
  .transfer-row span { text-align: left; }
}

/* Open-data market value import panel */
.market-note.success {
  border-color: rgba(58, 232, 158, .28);
  background: linear-gradient(135deg, rgba(58,232,158,.12), rgba(58,232,158,.04));
  color: rgba(233,255,246,.86);
}
.market-note.warn {
  border-color: rgba(255, 209, 102, .28);
  background: linear-gradient(135deg, rgba(255,209,102,.12), rgba(255,209,102,.04));
}
.market-import-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.market-import-card b {
  display: block;
  color: #fff;
  margin-bottom: 4px;
}
.market-import-card p { margin: 0; }
.primary-action {
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 12px 16px;
  color: #04120d;
  font-weight: 900;
  background: linear-gradient(135deg, #5dffb1, #88f7ff);
  box-shadow: 0 16px 36px rgba(93,255,177,.18), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
  white-space: nowrap;
}
.primary-action:hover { transform: translateY(-1px); filter: brightness(1.04); }
.primary-action:disabled { opacity: .65; cursor: wait; transform: none; }
.primary-action.compact { padding: 10px 14px; font-size: .86rem; }
@media (max-width: 720px) {
  .market-import-card { align-items: stretch; flex-direction: column; }
  .primary-action { width: 100%; }
}

/* Player profile everywhere upgrade */
.player-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  padding: 0;
  color: #fff;
  background: transparent;
  font: inherit;
  font-weight: 950;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid rgba(57,229,140,.38);
  transition: color .16s ease, border-color .16s ease, text-shadow .16s ease, transform .16s ease;
}
.player-inline-link:hover,
.player-inline-link:focus-visible {
  outline: none;
  color: #39e58c;
  border-color: rgba(57,229,140,.95);
  text-shadow: 0 0 18px rgba(57,229,140,.35);
  transform: translateY(-1px);
}
.event-assist .player-inline-link,
.sub-player-in .player-inline-link,
.sub-player-out .player-inline-link { font-size: inherit; }
.player-profile-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}
.player-profile-panel article,
.player-season-total-card,
.player-recent-card {
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  border-radius: 20px;
}
.player-profile-panel article {
  min-height: 82px;
  padding: 12px;
  display: grid;
  align-content: center;
  gap: 5px;
}
.player-profile-panel small,
.player-season-total-card header span,
.player-recent-card header span { color: var(--muted); font-weight: 850; }
.player-profile-panel strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 1000;
  min-width: 0;
}
.player-profile-panel strong img,
.player-season-total-card header img { width: 20px; height: 20px; object-fit: contain; }
.player-profile-panel em { color: var(--muted); font-style: normal; font-size: .76rem; }
.market-profile-tile { background: linear-gradient(135deg, rgba(57,229,140,.12), rgba(255,255,255,.03)) !important; border-color: rgba(57,229,140,.22) !important; }
.market-profile-tile strong { color: #39e58c; }
.player-season-total-card,
.player-recent-card { padding: 14px; margin: 0 0 14px; }
.player-season-total-card header,
.player-recent-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.player-season-total-card h3,
.player-recent-card h3 { margin: 0; }
.season-total-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.player-recent-list { display: grid; gap: 8px; }
.player-recent-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(4, minmax(54px, .28fr));
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.player-recent-row:hover,
.player-recent-row:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(57,229,140,.22);
  background: rgba(57,229,140,.07);
}
.player-recent-row small { color: var(--muted); display: block; }
.player-recent-row b { color: #fff; }
button.result-row.player-result { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
button.result-row.player-result:hover { border-color: rgba(57,229,140,.24); }
@media (max-width: 860px) {
  .player-profile-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .season-total-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .player-recent-row { grid-template-columns: minmax(0, 1fr) repeat(2, 52px); }
  .player-recent-row > span:nth-last-child(-n+2) { display: none; }
}
@media (max-width: 520px) {
  .player-profile-panel { grid-template-columns: 1fr; }
  .player-recent-row { grid-template-columns: minmax(0, 1fr) 50px; }
  .player-recent-row > span:nth-last-child(-n+3) { display: none; }
}

/* Player club/country upgrade */
.player-club-strip {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin: 0 0 14px;
  border-radius: 24px;
  border: 1px solid rgba(57,229,140,.22);
  background:
    radial-gradient(circle at 14% 10%, rgba(57,229,140,.22), transparent 34%),
    linear-gradient(135deg, rgba(57,229,140,.105), rgba(255,255,255,.035));
  box-shadow: 0 16px 42px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
  overflow: hidden;
}
.player-club-strip::after {
  content: '';
  position: absolute;
  inset: -40% auto -40% 58%;
  width: 180px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transform: rotate(18deg);
  animation: clubShine 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes clubShine {
  0%, 72%, 100% { opacity: 0; translate: -70px 0; }
  82% { opacity: 1; }
  95% { opacity: 0; translate: 70px 0; }
}
.club-strip-logo {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 26px rgba(0,0,0,.24);
  overflow: hidden;
}
.club-strip-logo img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.28)); }
.club-strip-logo span { font-size: 1.35rem; }
.player-club-strip small {
  display: block;
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .68rem;
}
.player-club-strip strong {
  display: block;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 1000;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-club-strip em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-style: normal;
  font-size: .82rem;
  margin-top: 2px;
}
.club-source-badge {
  position: relative;
  z-index: 1;
  padding: 7px 10px;
  border-radius: 999px;
  color: #06120d;
  background: #39e58c;
  font-size: .72rem;
  font-weight: 1000;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(57,229,140,.20);
}
.club-source-badge.subtle {
  color: var(--muted);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: none;
}
.country-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15em;
  font-size: 1.06em;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
}
.team-logo-name {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.team-logo-name img {
  flex: 0 0 auto;
  width: 24px !important;
  height: 24px !important;
  object-fit: contain;
}
.team-logo-name > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.team-logo-name b {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-logo-name em {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.club-profile-tile { grid-column: span 2; }
@media (max-width: 720px) {
  .player-club-strip { grid-template-columns: auto minmax(0, 1fr); }
  .club-source-badge { grid-column: 1 / -1; width: max-content; }
  .club-profile-tile { grid-column: auto; }
}

/* Player club/national-team separation fix */
.player-club-strip.is-missing-club {
  border-style: dashed;
  opacity: .95;
}
.player-club-strip.is-missing-club .club-strip-logo {
  filter: grayscale(.2);
}
.national-profile-tile {
  background: linear-gradient(135deg, rgba(59,130,246,.16), rgba(14,165,233,.08));
  border-color: rgba(96,165,250,.26) !important;
}

/* LiveBal 3D match view */
.live3d-card {
  position: relative;
  overflow: hidden;
  margin: 22px 0;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 30px;
  background:
    radial-gradient(circle at 20% 0%, rgba(57,229,140,.22), transparent 38%),
    radial-gradient(circle at 86% 16%, rgba(255,43,95,.18), transparent 34%),
    linear-gradient(140deg, rgba(8,16,29,.96), rgba(11,20,35,.82) 58%, rgba(5,10,18,.96));
  box-shadow: 0 24px 70px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  isolation: isolate;
}
.live3d-card::before,
.live3d-card::after {
  content: '';
  position: absolute;
  pointer-events: none;
  inset: -30%;
  background: conic-gradient(from 180deg, transparent, rgba(57,229,140,.08), transparent, rgba(255,255,255,.05), transparent);
  animation: live3dOrbit 18s linear infinite;
  z-index: -1;
}
.live3d-card::after {
  animation-duration: 24s;
  animation-direction: reverse;
  filter: blur(18px);
  opacity: .55;
}
@keyframes live3dOrbit { to { transform: rotate(360deg); } }
.live3d-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.live3d-head h2 {
  margin: 3px 0 6px;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  letter-spacing: -.04em;
}
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .73rem;
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7cf0af;
}
.section-kicker::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 18px rgba(124,240,175,.85);
}
.live3d-status {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 120px;
}
.live3d-status strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 13px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.live3d-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 18px;
  align-items: stretch;
}
.pitch3d-shell {
  position: relative;
  min-height: 430px;
  perspective: 900px;
}
.pitch3d {
  position: absolute;
  inset: 24px 8px 12px;
  overflow: hidden;
  border-radius: 34px;
  border: 1px solid rgba(169,255,205,.24);
  background:
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px) 0 0 / 12.5% 100%,
    linear-gradient(0deg, rgba(255,255,255,.08) 1px, transparent 1px) 0 0 / 100% 12.5%,
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), transparent 16%),
    repeating-linear-gradient(90deg, rgba(32,143,72,.92) 0 70px, rgba(23,119,60,.92) 70px 140px);
  box-shadow: 0 36px 80px rgba(0,0,0,.46), inset 0 0 0 2px rgba(255,255,255,.06), inset 0 0 65px rgba(0,0,0,.32);
  transform: rotateX(58deg) rotateZ(0deg) translateY(18px);
  transform-origin: center bottom;
}
.pitch3d::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.12), transparent 16%),
    radial-gradient(circle at 78% 80%, rgba(255,43,95,.10), transparent 16%),
    linear-gradient(120deg, transparent 30%, rgba(255,255,255,.10), transparent 64%);
  mix-blend-mode: screen;
  animation: pitchLightSweep 7.5s ease-in-out infinite;
}
@keyframes pitchLightSweep {
  0%, 100% { transform: translateX(-8%) skewX(-8deg); opacity: .45; }
  50% { transform: translateX(9%) skewX(8deg); opacity: .85; }
}
.pitch3d-line.halfway,
.pitch3d-circle,
.pitch3d-box,
.pitch3d-light {
  position: absolute;
  pointer-events: none;
}
.pitch3d-line.halfway {
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: rgba(255,255,255,.35);
}
.pitch3d-circle {
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255,255,255,.34);
  border-radius: 50%;
}
.pitch3d-box {
  left: 50%;
  width: 40%;
  height: 20%;
  transform: translateX(-50%);
  border: 2px solid rgba(255,255,255,.28);
  border-radius: 0 0 18px 18px;
}
.pitch3d-box.top { top: 0; border-top: 0; }
.pitch3d-box.bottom { bottom: 0; border-bottom: 0; border-radius: 18px 18px 0 0; }
.pitch3d-light {
  width: 30%;
  height: 80%;
  top: -20%;
  background: linear-gradient(180deg, rgba(255,255,255,.20), transparent);
  filter: blur(10px);
  opacity: .35;
  transform: skewX(-18deg);
  animation: stadiumBeam 5.8s ease-in-out infinite;
}
.pitch3d-light.beam-a { left: 3%; }
.pitch3d-light.beam-b { right: 3%; animation-delay: -2.2s; transform: skewX(18deg); }
@keyframes stadiumBeam { 0%,100% { opacity: .18; } 50% { opacity: .55; } }
.pitch3d-team {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(8,16,29,.74);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 28px rgba(0,0,0,.26);
  font-weight: 900;
  max-width: 44%;
}
.pitch3d-team img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.pitch3d-team span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pitch3d-team.home { left: 18px; bottom: 0; }
.pitch3d-team.away { right: 18px; top: 0; }
.pitch3d-marker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 5;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: white;
  transform: translate(-50%, -50%) translateZ(80px) rotateX(-58deg);
  animation: markerDrop .7s cubic-bezier(.2,1.6,.3,1) both, markerFloat 2.2s ease-in-out infinite;
  animation-delay: var(--d), calc(var(--d) + .7s);
  cursor: default;
}
@keyframes markerDrop {
  from { opacity: 0; transform: translate(-50%, -120%) translateZ(120px) rotateX(-58deg) scale(.6); }
  to { opacity: 1; transform: translate(-50%, -50%) translateZ(80px) rotateX(-58deg) scale(1); }
}
@keyframes markerFloat {
  0%,100% { filter: drop-shadow(0 0 10px rgba(57,229,140,.25)); }
  50% { transform: translate(-50%, -56%) translateZ(80px) rotateX(-58deg) scale(1.04); filter: drop-shadow(0 0 18px rgba(255,255,255,.35)); }
}
.pitch3d-marker::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.32);
  opacity: .8;
  animation: markerRing 1.8s ease-out infinite;
}
@keyframes markerRing { to { width: 82px; height: 82px; opacity: 0; } }
.marker-core {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: linear-gradient(135deg, #35e887, #10a85c);
  box-shadow: 0 12px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35);
  font-size: 1.22rem;
}
.marker-goal .marker-core,
.marker-own-goal .marker-core { background: linear-gradient(135deg, #fff176, #39e58c); color: #0b1a11; }
.marker-card .marker-core { background: linear-gradient(135deg, #ffe66d, #ffb703); color: #2a1d00; }
.marker-red-card .marker-core { background: linear-gradient(135deg, #ff4d6d, #b3002d); }
.marker-substitution .marker-core { background: linear-gradient(135deg, #6de7ff, #2176ff); }
.marker-var .marker-core { background: linear-gradient(135deg, #b392ff, #6d4cff); }
.marker-woodwork .marker-core,
.marker-penalty .marker-core,
.marker-penalty-miss .marker-core { background: linear-gradient(135deg, #ff8a3d, #ff2b5f); }
.marker-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 180px;
  transform: translateX(-50%) scale(.92);
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(4,9,16,.92);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 16px 34px rgba(0,0,0,.34);
  opacity: 0;
  pointer-events: none;
  transition: .18s ease;
}
.marker-tooltip b,
.marker-tooltip small { display: block; }
.marker-tooltip small { color: var(--muted); margin-top: 2px; }
.pitch3d-marker:hover .marker-tooltip { opacity: 1; transform: translateX(-50%) scale(1); }
.pitch3d-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(76%, 340px);
  transform: translate(-50%, -50%) rotateX(-58deg);
  display: grid;
  gap: 6px;
  text-align: center;
  padding: 18px;
  border-radius: 22px;
  background: rgba(4,9,16,.62);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}
.pitch3d-empty span { color: var(--muted); }
.moment-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  min-width: 0;
}
.pressure-card,
.moment-list3d {
  padding: 16px;
  border-radius: 24px;
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.pressure-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 9px;
  font-size: .82rem;
}
.pressure-head b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pressure-bar {
  position: relative;
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(57,229,140,.95) 0 var(--home), rgba(255,43,95,.92) var(--home) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 24px rgba(0,0,0,.24);
}
.pressure-bar span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  transform: translateX(-100%);
  animation: pressureSweep 2.7s ease-in-out infinite;
}
@keyframes pressureSweep { 50%,100% { transform: translateX(100%); } }
.moment-list3d header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.moment-list3d h3 {
  margin: 0;
  font-size: 1.02rem;
}
.moment-list3d header span {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(57,229,140,.18);
  color: #7cf0af;
  font-weight: 1000;
}
.moment-chip {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  margin-top: 8px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  animation: momentSlide .5s ease both;
  animation-delay: var(--d, 0ms);
}
@keyframes momentSlide { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
.moment-chip-time {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-weight: 1000;
  font-size: .78rem;
}
.moment-chip-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
}
.moment-chip-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.moment-chip-text b,
.moment-chip-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.moment-chip-text small { color: var(--muted); }
.moment-goal { border-color: rgba(57,229,140,.25); background: linear-gradient(135deg, rgba(57,229,140,.16), rgba(255,255,255,.05)); }
.moment-red-card { border-color: rgba(255,43,95,.28); }
.moment-card { border-color: rgba(255,214,102,.28); }
.moment-woodwork,
.moment-penalty,
.moment-penalty-miss { border-color: rgba(255,138,61,.28); }
@media (max-width: 980px) {
  .live3d-grid { grid-template-columns: 1fr; }
  .pitch3d-shell { min-height: 390px; }
  .moment-panel { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .live3d-card { border-radius: 24px; padding: 16px; }
  .live3d-head { display: grid; }
  .live3d-status { justify-items: start; }
  .pitch3d-shell { min-height: 335px; }
  .pitch3d { inset: 28px -18px 4px; transform: rotateX(60deg) scale(.88) translateY(28px); }
  .pitch3d-team { max-width: 68%; font-size: .78rem; }
  .pitch3d-team.home { left: 4px; }
  .pitch3d-team.away { right: 4px; }
  .pitch3d-marker { width: 36px; height: 36px; }
  .marker-core { width: 36px; height: 36px; font-size: 1rem; }
  .moment-chip { grid-template-columns: auto auto minmax(0, 1fr); padding: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .live3d-card::before,
  .live3d-card::after,
  .pitch3d::before,
  .pitch3d-light,
  .pitch3d-marker,
  .pitch3d-marker::after,
  .pressure-bar span,
  .moment-chip { animation: none !important; }
}

/* 3D event tokens: replaces flat emoji icons in the Live Match View */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.marker-core {
  overflow: visible;
  transform-style: preserve-3d;
  perspective: 420px;
}
.marker-core::before {
  content: '';
  position: absolute;
  inset: 5px 7px auto 8px;
  height: 34%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,0));
  opacity: .55;
  z-index: 3;
  pointer-events: none;
}
.marker-core::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 52%;
  height: 10px;
  transform: translateX(-50%) rotateX(70deg);
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  filter: blur(3px);
  z-index: 0;
  pointer-events: none;
}
.token3d {
  --token-a: #35e887;
  --token-b: #087c52;
  --token-c: rgba(255,255,255,.62);
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.28));
}
.token3d i,
.token3d em {
  position: absolute;
  display: block;
  pointer-events: none;
}
.token3d::before,
.token3d::after {
  content: '';
  position: absolute;
  display: block;
  pointer-events: none;
}
.token3d::after {
  inset: 2px 4px auto 5px;
  height: 28%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.74), transparent);
  opacity: .72;
}
.marker-core .token3d { animation: tokenHover3d 2.25s ease-in-out infinite; }
@keyframes tokenHover3d {
  0%,100% { transform: translateZ(8px) rotateX(0deg) rotateY(-8deg); }
  50% { transform: translateZ(18px) rotateX(-8deg) rotateY(10deg) scale(1.05); }
}

/* Goal: CSS football sphere */
.token-goal,
.token-own-goal {
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.95) 0 12%, transparent 13%),
    radial-gradient(circle at 54% 52%, #111827 0 13%, transparent 14%),
    conic-gradient(from 22deg, #f8fafc 0 15%, #111827 15% 23%, #f8fafc 23% 42%, #111827 42% 50%, #f8fafc 50% 72%, #111827 72% 80%, #f8fafc 80% 100%);
  box-shadow: inset -8px -8px 12px rgba(0,0,0,.22), inset 5px 5px 10px rgba(255,255,255,.70), 0 0 18px rgba(57,229,140,.45);
}
.token-own-goal::before {
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(255,43,95,.78);
  transform: rotate(-18deg);
}

/* Cards: tilted 3D card slab */
.token-card,
.token-red-card {
  width: 18px;
  height: 25px;
  border-radius: 5px;
  background: linear-gradient(145deg, #fff6a8 0%, #ffd23f 45%, #c98900 100%);
  box-shadow: inset 2px 2px 4px rgba(255,255,255,.58), inset -4px -5px 7px rgba(0,0,0,.22), 0 0 18px rgba(255,211,63,.44);
  transform: rotateZ(-9deg) rotateY(-18deg) translateZ(7px);
}
.token-card::before,
.token-red-card::before {
  left: 3px;
  top: 3px;
  right: 3px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.68);
}
.token-red-card {
  background: linear-gradient(145deg, #ff8a9b 0%, #ff2b5f 46%, #920022 100%);
  box-shadow: inset 2px 2px 4px rgba(255,255,255,.44), inset -4px -5px 7px rgba(0,0,0,.26), 0 0 20px rgba(255,43,95,.52);
}

/* Substitution: two extruded swap arrows */
.token-substitution {
  width: 30px;
  height: 25px;
}
.token-substitution::before,
.token-substitution::after {
  left: 3px;
  width: 22px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #b8f3ff, #23a7ff 55%, #0a58ca);
  box-shadow: inset 1px 1px 2px rgba(255,255,255,.55), inset -2px -2px 4px rgba(0,0,0,.22), 0 0 12px rgba(35,167,255,.42);
}
.token-substitution::before {
  top: 5px;
  clip-path: polygon(0 0, 72% 0, 72% -20%, 100% 50%, 72% 120%, 72% 100%, 0 100%);
}
.token-substitution::after {
  bottom: 5px;
  transform: rotate(180deg) translateZ(8px);
  clip-path: polygon(0 0, 72% 0, 72% -20%, 100% 50%, 72% 120%, 72% 100%, 0 100%);
}

/* VAR: floating screen with base */
.token-var {
  width: 29px;
  height: 23px;
  border-radius: 7px;
  background: linear-gradient(145deg, #d6c5ff, #7c5cff 52%, #33206d);
  box-shadow: inset 2px 2px 4px rgba(255,255,255,.45), inset -5px -5px 8px rgba(0,0,0,.26), 0 0 18px rgba(124,92,255,.55);
  transform: rotateY(-13deg) translateZ(8px);
}
.token-var::before {
  content: 'VAR';
  inset: 6px 4px auto;
  color: #fff;
  font-size: 7px;
  line-height: 1;
  font-style: normal;
  font-weight: 1000;
  letter-spacing: .6px;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.token-var i {
  left: 9px;
  bottom: -5px;
  width: 11px;
  height: 5px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #9f8cff, #42338f);
}

/* Penalty / missed: 3D target */
.token-penalty,
.token-penalty-miss {
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 15%, #ff8a3d 16% 31%, #fff 32% 46%, #ff2b5f 47% 65%, #741c39 66% 100%);
  box-shadow: inset -7px -7px 12px rgba(0,0,0,.24), inset 4px 4px 8px rgba(255,255,255,.56), 0 0 18px rgba(255,95,77,.48);
}
.token-penalty-miss::before,
.token-penalty-miss::after {
  left: 5px;
  top: 13px;
  width: 19px;
  height: 4px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.token-penalty-miss::before { transform: rotate(45deg); }
.token-penalty-miss::after { transform: rotate(-45deg); }

/* Shot and woodwork: comet / impact */
.token-shot {
  width: 30px;
  height: 20px;
}
.token-shot::before {
  right: 2px;
  top: 4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff, #6de7ff 45%, #216dff 100%);
  box-shadow: inset -4px -4px 8px rgba(0,0,0,.23), 0 0 18px rgba(109,231,255,.55);
}
.token-shot::after {
  left: 0;
  top: 8px;
  width: 20px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(109,231,255,.42), #fff);
  filter: blur(.2px);
}
.token-woodwork {
  width: 30px;
  height: 26px;
}
.token-woodwork::before {
  left: 4px;
  top: 5px;
  width: 20px;
  height: 15px;
  border: 4px solid rgba(255,255,255,.90);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  box-shadow: 0 0 14px rgba(255,255,255,.36), inset 0 0 8px rgba(255,138,61,.28);
}
.token-woodwork::after {
  right: 0;
  top: 1px;
  width: 15px;
  height: 15px;
  background: radial-gradient(circle, #fff 0 9%, #ffb703 11% 28%, #ff2b5f 29% 52%, transparent 54%);
  filter: drop-shadow(0 0 10px rgba(255,183,3,.7));
}

/* Generic moment: small hologram dot */
.token-moment {
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff, #39e58c 42%, #086340 100%);
  box-shadow: inset -7px -7px 12px rgba(0,0,0,.24), 0 0 18px rgba(57,229,140,.45);
}

.moment-chip-icon {
  transform-style: preserve-3d;
  background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.16), rgba(255,255,255,.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 20px rgba(0,0,0,.20);
}
.moment-chip-icon .token3d {
  width: 24px;
  height: 24px;
  animation: tokenChipPulse 2.4s ease-in-out infinite;
}
.moment-chip-icon .token-card,
.moment-chip-icon .token-red-card { width: 15px; height: 21px; }
.moment-chip-icon .token-var { width: 25px; height: 20px; }
.moment-chip-icon .token-substitution { width: 25px; height: 21px; }
@keyframes tokenChipPulse {
  0%,100% { transform: translateZ(3px) rotateY(-7deg); }
  50% { transform: translateZ(9px) rotateY(8deg) scale(1.04); }
}
@media (max-width: 620px) {
  .token3d { width: 24px; height: 24px; }
  .token-var { width: 25px; height: 20px; }
  .token-card, .token-red-card { width: 16px; height: 22px; }
}


/* === 3D Match View depth/readability fix ===
   Maakt de live 3D-weergave minder vlak en de key moments duidelijk leesbaar.
   Alleen CSS: geen afbeeldingen, geen extra API-calls. */
.live3d-card {
  overflow: visible;
  border-color: rgba(124, 240, 175, .20);
  background:
    radial-gradient(circle at 16% 0%, rgba(57,229,140,.28), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(255,77,93,.24), transparent 32%),
    radial-gradient(circle at 50% 118%, rgba(100,215,255,.16), transparent 46%),
    linear-gradient(145deg, rgba(3,8,15,.99), rgba(8,18,31,.94) 52%, rgba(2,7,13,.99));
  box-shadow:
    0 34px 120px rgba(0,0,0,.56),
    0 0 0 1px rgba(57,229,140,.045),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -26px 70px rgba(0,0,0,.32);
}
.live3d-card::before {
  opacity: .78;
  filter: blur(2px);
}
.live3d-head {
  position: relative;
  z-index: 8;
}
.live3d-grid {
  grid-template-columns: minmax(0, 1.22fr) minmax(340px, .78fr);
  gap: clamp(18px, 2.4vw, 26px);
  align-items: stretch;
  perspective: 1400px;
}
.pitch3d-shell {
  min-height: 540px;
  perspective: 1400px;
  overflow: visible;
  transform-style: preserve-3d;
  border-radius: 34px;
  background:
    radial-gradient(ellipse at 50% 104%, rgba(0,0,0,.56), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}
.pitch3d-shell::before {
  content: '';
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 6px;
  height: 42px;
  border-radius: 999px;
  background: rgba(0,0,0,.54);
  filter: blur(20px);
  transform: rotateX(72deg);
  z-index: 0;
}
.pitch3d-shell::after {
  content: '';
  position: absolute;
  inset: 24px 7px 18px;
  border-radius: 36px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent),
    radial-gradient(circle at 50% 50%, rgba(124,240,175,.10), transparent 55%);
  filter: blur(.2px);
  transform: rotateX(65deg) translateY(42px) translateZ(-28px);
  opacity: .55;
  z-index: 1;
}
.pitch3d {
  inset: 30px 18px 34px;
  overflow: visible;
  border-radius: 40px;
  border: 1px solid rgba(185,255,214,.34);
  transform: rotateX(65deg) translateY(44px) translateZ(0) scale(.96);
  transform-style: preserve-3d;
  background:
    linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px) 0 0 / 12.5% 100%,
    linear-gradient(0deg, rgba(255,255,255,.095) 1px, transparent 1px) 0 0 / 100% 12.5%,
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.15), transparent 16%),
    repeating-linear-gradient(90deg, rgba(38,159,80,.98) 0 70px, rgba(20,113,58,.98) 70px 140px);
  box-shadow:
    0 62px 95px rgba(0,0,0,.62),
    0 20px 44px rgba(0,0,0,.42),
    inset 0 0 0 2px rgba(255,255,255,.08),
    inset 0 0 85px rgba(0,0,0,.38);
}
.pitch3d::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -22px;
  height: 28px;
  border-radius: 0 0 36px 36px;
  background: linear-gradient(180deg, rgba(5,55,29,.86), rgba(0,0,0,.46));
  transform: rotateX(-72deg);
  transform-origin: top center;
  pointer-events: none;
  box-shadow: 0 24px 42px rgba(0,0,0,.40);
}
.pitch3d-line.halfway,
.pitch3d-circle,
.pitch3d-box {
  filter: drop-shadow(0 0 7px rgba(255,255,255,.26));
}
.pitch3d-team {
  z-index: 12;
  color: #fff;
  background: rgba(3,8,15,.88);
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 20px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.10);
}
.pitch3d-team.home { bottom: -2px; }
.pitch3d-team.away { top: -2px; }
.pitch3d-marker {
  z-index: 20;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%) translateZ(170px) rotateX(-65deg);
  filter: drop-shadow(0 24px 24px rgba(0,0,0,.46));
}
@keyframes markerDrop {
  from { opacity: 0; transform: translate(-50%, -140%) translateZ(210px) rotateX(-65deg) scale(.58); }
  to { opacity: 1; transform: translate(-50%, -50%) translateZ(170px) rotateX(-65deg) scale(1); }
}
@keyframes markerFloat {
  0%,100% { transform: translate(-50%, -50%) translateZ(170px) rotateX(-65deg) scale(1); filter: drop-shadow(0 24px 24px rgba(0,0,0,.46)) drop-shadow(0 0 12px rgba(57,229,140,.30)); }
  50% { transform: translate(-50%, -62%) translateZ(190px) rotateX(-65deg) scale(1.065); filter: drop-shadow(0 30px 28px rgba(0,0,0,.52)) drop-shadow(0 0 24px rgba(255,255,255,.42)); }
}
.pitch3d-marker::after {
  width: 70px;
  height: 70px;
  border-color: rgba(255,255,255,.38);
  box-shadow: 0 0 22px rgba(57,229,140,.24);
}
@keyframes markerRing { to { width: 118px; height: 118px; opacity: 0; } }
.marker-core {
  width: 56px;
  height: 56px;
  box-shadow:
    0 22px 42px rgba(0,0,0,.44),
    0 0 28px rgba(57,229,140,.22),
    inset 0 2px 0 rgba(255,255,255,.42),
    inset 0 -12px 18px rgba(0,0,0,.18);
}
.token3d {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 12px 14px rgba(0,0,0,.38));
}
.marker-tooltip {
  bottom: calc(100% + 18px);
  max-width: 240px;
  padding: 11px 13px;
  border-radius: 17px;
  background: rgba(1,6,12,.96);
  border-color: rgba(124,240,175,.24);
  box-shadow: 0 24px 56px rgba(0,0,0,.55), 0 0 22px rgba(57,229,140,.12);
  backdrop-filter: blur(18px);
  color: #fff;
}
.marker-tooltip b { font-size: .88rem; line-height: 1.12; }
.marker-tooltip small { color: rgba(226,244,237,.82); font-size: .78rem; }

/* Key moments: vanaf nu echte leesbare 3D-panels i.p.v. platte chips */
.moment-panel {
  position: relative;
  z-index: 14;
  gap: 16px;
}
.pressure-card,
.moment-list3d {
  background:
    radial-gradient(circle at 16% 0%, rgba(57,229,140,.15), transparent 34%),
    linear-gradient(150deg, rgba(5,12,22,.94), rgba(9,18,31,.88));
  border-color: rgba(255,255,255,.15);
  box-shadow:
    0 28px 76px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -22px 50px rgba(0,0,0,.18);
}
.moment-list3d header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.moment-list3d header h3 {
  margin: 0;
  font-size: 1.08rem;
  letter-spacing: -.02em;
  color: #fff;
}
.moment-list3d header span {
  min-width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #03130d;
  background: linear-gradient(135deg, #b9ffd6, #39e58c);
  font-weight: 1000;
  box-shadow: 0 12px 28px rgba(57,229,140,.22);
}
.moment-chip {
  position: relative;
  grid-template-columns: 64px 54px minmax(0, 1fr);
  gap: 12px;
  min-height: 76px;
  padding: 13px 14px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.045)),
    radial-gradient(circle at 0% 0%, rgba(124,240,175,.16), transparent 44%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 18px 42px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -15px 34px rgba(0,0,0,.18);
  transform-style: preserve-3d;
}
.moment-chip::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: 22px 0 0 22px;
  background: linear-gradient(180deg, #39e58c, #64d7ff);
  box-shadow: 0 0 20px rgba(57,229,140,.36);
}
.moment-chip::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0 36%, rgba(255,255,255,.13) 50%, transparent 64%);
  transform: translateX(-130%);
  animation: momentPanelShine 6.8s ease-in-out infinite;
}
@keyframes momentPanelShine { 0%, 68% { transform: translateX(-130%); } 83%, 100% { transform: translateX(130%); } }
.moment-chip:hover {
  transform: translateY(-3px) scale(1.012);
  border-color: rgba(124,240,175,.28);
  box-shadow: 0 24px 54px rgba(0,0,0,.38), 0 0 24px rgba(57,229,140,.11);
}
.moment-chip-time {
  align-self: center;
  justify-self: stretch;
  display: grid;
  place-items: center;
  min-height: 46px;
  padding: 8px 9px;
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 24px rgba(0,0,0,.20);
  color: #fff;
  font-size: .95rem;
  line-height: 1;
  letter-spacing: -.02em;
}
.moment-chip-icon {
  width: 46px;
  height: 46px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.26), rgba(255,255,255,.06)),
    linear-gradient(150deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 16px 30px rgba(0,0,0,.26);
}
.moment-chip-icon .token3d {
  width: 32px;
  height: 32px;
}
.moment-chip-icon .token-card,
.moment-chip-icon .token-red-card { width: 20px; height: 28px; }
.moment-chip-icon .token-var { width: 33px; height: 25px; }
.moment-chip-icon .token-substitution { width: 34px; height: 28px; }
.moment-chip-text {
  align-self: center;
  gap: 5px;
}
.moment-chip-text b {
  color: #fff;
  font-size: .98rem;
  line-height: 1.12;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.moment-chip-text small {
  color: rgba(226,244,237,.78);
  font-size: .82rem;
  line-height: 1.25;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.moment-goal::before { background: linear-gradient(180deg, #b9ffd6, #39e58c); }
.moment-red-card::before { background: linear-gradient(180deg, #ffb3c1, #ff2b5f); box-shadow: 0 0 22px rgba(255,43,95,.36); }
.moment-card::before { background: linear-gradient(180deg, #fff3a3, #ffb703); box-shadow: 0 0 22px rgba(255,183,3,.34); }
.moment-substitution::before { background: linear-gradient(180deg, #b8f3ff, #2176ff); box-shadow: 0 0 22px rgba(35,167,255,.32); }
.moment-woodwork::before,
.moment-penalty::before,
.moment-penalty-miss::before { background: linear-gradient(180deg, #ffd0a6, #ff2b5f); box-shadow: 0 0 22px rgba(255,138,61,.34); }

@media (max-width: 980px) {
  .live3d-grid { grid-template-columns: 1fr; }
  .pitch3d-shell { min-height: 500px; }
  .moment-panel { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .pitch3d-shell { min-height: 410px; }
  .pitch3d { inset: 34px -6px 22px; transform: rotateX(62deg) translateY(34px) scale(.90); }
  .pitch3d-marker { width: 46px; height: 46px; }
  .marker-core { width: 46px; height: 46px; }
  .token3d { width: 29px; height: 29px; }
  .moment-chip { grid-template-columns: 54px 46px minmax(0, 1fr); min-height: 70px; padding: 11px 12px; }
  .moment-chip-time { min-height: 40px; font-size: .82rem; }
  .moment-chip-icon { width: 40px; height: 40px; border-radius: 15px; }
  .moment-chip-text b { font-size: .9rem; }
  .moment-chip-text small { font-size: .76rem; }
}

/* LiveBal 3D Match View v2 — readable, stable hitboxes, no off-position hover */
.live3d-card {
  --lb-green: #39e58c;
  --lb-blue: #64d7ff;
  --lb-red: #ff4d5d;
  --lb-gold: #ffd166;
}
.live3d-grid {
  align-items: stretch;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr);
}
.pitch3d-shell {
  min-height: 620px;
  padding: 26px 22px 34px;
  perspective: none;
  transform-style: flat;
  overflow: visible;
}
.pitch3d-shell::before {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 18px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.58), transparent 68%);
  filter: blur(14px);
  opacity: .75;
  pointer-events: none;
}
.pitch3d {
  inset: 76px 34px 58px;
  min-height: 500px;
  transform: none !important;
  border-radius: 34px;
  overflow: visible;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 12.5%),
    linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 12.5%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.12), transparent 18%),
    repeating-linear-gradient(90deg, rgba(26,124,70,.96) 0 10%, rgba(20,104,60,.96) 10% 20%);
  border: 2px solid rgba(230,255,241,.32);
  box-shadow:
    0 34px 80px rgba(0,0,0,.55),
    0 12px 0 rgba(5,37,24,.95),
    0 24px 0 rgba(3,21,15,.75),
    inset 0 0 0 2px rgba(255,255,255,.06),
    inset 0 0 70px rgba(0,0,0,.34);
  transform-style: flat;
}
.pitch3d::before {
  inset: -42px -28px -34px;
  border-radius: 46px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 18%, rgba(0,0,0,.32) 100%),
    radial-gradient(circle at 20% 12%, rgba(100,215,255,.22), transparent 28%),
    radial-gradient(circle at 80% 4%, rgba(255,209,102,.18), transparent 28%);
  animation: none !important;
  opacity: 1;
  z-index: -2;
  transform: skewX(-2deg);
}
.pitch3d::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -28px;
  height: 34px;
  border-radius: 0 0 34px 34px;
  background: linear-gradient(180deg, rgba(14,72,44,.95), rgba(2,10,8,.98));
  border: 1px solid rgba(255,255,255,.10);
  border-top: 0;
  transform: skewX(-8deg);
  transform-origin: top;
  pointer-events: none;
  z-index: -1;
}
.pitch3d-line.halfway,
.pitch3d-circle,
.pitch3d-box {
  opacity: .98;
  border-color: rgba(245,255,250,.62) !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.28));
  pointer-events: none;
}
.pitch3d-line.halfway {
  top: 50%;
  width: 100%;
  height: 2px;
  background: rgba(245,255,250,.58);
}
.pitch3d-circle {
  width: 112px;
  height: 112px;
  border-width: 2px;
}
.pitch3d-box {
  left: 25%;
  right: 25%;
  height: 92px;
  border-width: 2px;
}
.pitch3d-light { display: none !important; }
.pitch3d-team {
  z-index: 10;
  pointer-events: none;
  max-width: 46%;
  background: rgba(2,8,14,.82);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 14px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12);
}
.pitch3d-team.home { left: 34px; bottom: 8px; }
.pitch3d-team.away { right: 34px; top: 8px; }
.pitch3d-marker {
  z-index: 25;
  width: 70px;
  height: 70px;
  transform: translate(-50%, -50%) !important;
  animation: markerDropStable .34s cubic-bezier(.2,1.25,.25,1) both !important;
  animation-delay: var(--d, 0ms) !important;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 999px;
  outline: none;
  isolation: isolate;
}
@keyframes markerDropStable {
  from { opacity: 0; transform: translate(-50%, -38%) scale(.78) !important; }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1) !important; }
}
.pitch3d-marker::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 42px;
  transform: translate(-50%, 18px) perspective(80px) rotateX(64deg);
  border-radius: 999px;
  background: rgba(0,0,0,.46);
  filter: blur(8px);
  opacity: .84;
  z-index: -1;
  pointer-events: none;
}
.pitch3d-marker::after {
  width: 76px;
  height: 76px;
  border-width: 2px;
  border-color: rgba(255,255,255,.26);
  animation: markerRingStable 2.1s ease-out infinite !important;
  pointer-events: none;
}
@keyframes markerRingStable {
  0% { transform: translate(-50%, -50%) scale(.78); opacity: .72; }
  100% { transform: translate(-50%, -50%) scale(1.45); opacity: 0; }
}
.marker-core {
  width: 62px;
  height: 62px;
  margin: 4px;
  border-radius: 20px;
  transform: translateY(-12px) rotateX(0deg) !important;
  box-shadow:
    0 18px 24px rgba(0,0,0,.40),
    0 7px 0 rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -12px 18px rgba(0,0,0,.22);
  overflow: visible;
}
.marker-core::before {
  inset: 5px 8px auto 8px;
  height: 24%;
  opacity: .78;
}
.marker-core::after { display: none; }
.pitch3d-marker:hover,
.pitch3d-marker:focus-visible,
.pitch3d-marker:focus {
  z-index: 80;
}
.pitch3d-marker:hover .marker-core,
.pitch3d-marker:focus-visible .marker-core,
.pitch3d-marker:focus .marker-core {
  transform: translateY(-18px) scale(1.08) !important;
  filter: brightness(1.1) saturate(1.14);
}
.token3d {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  overflow: hidden;
  transform: none !important;
  animation: none !important;
  filter: none;
}
.marker-core .token3d { animation: none !important; }
.token3d::before,
.token3d::after,
.token3d i,
.token3d em {
  opacity: .32;
}
.token3d-label {
  position: relative;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 2px;
  color: #fff;
  font-size: .72rem;
  font-weight: 1000;
  letter-spacing: -.05em;
  line-height: .88;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,.65), 0 0 12px rgba(0,0,0,.55);
}
.token-goal .token3d-label,
.token-own-goal .token3d-label,
.token-card .token3d-label { color: #06110b; text-shadow: 0 1px 0 rgba(255,255,255,.45); }
.token-red-card .token3d-label,
.token-var .token3d-label,
.token-substitution .token3d-label,
.token-penalty .token3d-label,
.token-penalty-miss .token3d-label,
.token-woodwork .token3d-label,
.token-shot .token3d-label { color: #fff; }
.marker-tooltip {
  left: 50%;
  bottom: calc(100% + 12px);
  width: max-content;
  min-width: 170px;
  max-width: min(300px, 76vw);
  padding: 12px 13px;
  border-radius: 18px;
  background: rgba(2,8,14,.97);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 22px 46px rgba(0,0,0,.50), 0 0 0 1px rgba(57,229,140,.10);
  opacity: 0;
  transform: translateX(-50%) translateY(8px) scale(.96) !important;
  pointer-events: none;
  z-index: 90;
  color: #fff;
}
.marker-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: rgba(2,8,14,.97);
}
.marker-tooltip b {
  font-size: .9rem;
  line-height: 1.15;
  white-space: normal;
}
.marker-tooltip small {
  color: rgba(226,244,237,.78);
  font-size: .78rem;
  line-height: 1.25;
  white-space: normal;
}
.pitch3d-marker:hover .marker-tooltip,
.pitch3d-marker:focus-visible .marker-tooltip,
.pitch3d-marker:focus .marker-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}
.pitch3d-empty {
  transform: translate(-50%, -50%) !important;
  z-index: 30;
  background: rgba(2,8,14,.88);
}
.moment-panel {
  min-width: 330px;
}
.moment-list3d,
.pressure-card {
  background: rgba(3,10,18,.76);
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 20px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(16px);
}
.moment-list3d {
  max-height: 620px;
  overflow: auto;
}
.moment-chip {
  grid-template-columns: 64px 54px minmax(0, 1fr);
  gap: 12px;
  min-height: 84px;
  padding: 13px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.12), transparent 38%),
    rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.13);
}
.moment-chip:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.10);
}
.moment-chip-time {
  min-width: 58px;
  min-height: 48px;
  font-size: .9rem;
}
.moment-chip-text b,
.moment-chip-text small {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
}
.moment-chip-text b { font-size: 1rem; }
.moment-chip-text small { font-size: .84rem; }
@media (max-width: 1100px) {
  .live3d-grid { grid-template-columns: 1fr; }
  .moment-panel { min-width: 0; }
}
@media (max-width: 620px) {
  .pitch3d-shell { min-height: 470px; padding: 16px 10px 28px; }
  .pitch3d { inset: 72px 10px 56px; min-height: 350px; border-radius: 26px; }
  .pitch3d-team { max-width: 78%; font-size: .76rem; }
  .pitch3d-team.home { left: 12px; bottom: 4px; }
  .pitch3d-team.away { right: 12px; top: 4px; }
  .pitch3d-marker { width: 58px; height: 58px; }
  .marker-core { width: 50px; height: 50px; margin: 4px; border-radius: 17px; }
  .token3d { width: 42px; height: 42px; border-radius: 14px; }
  .token3d-label { font-size: .58rem; letter-spacing: -.06em; }
  .marker-tooltip { min-width: 148px; max-width: 66vw; font-size: .82rem; }
  .moment-chip { grid-template-columns: 56px 46px minmax(0, 1fr); min-height: 76px; padding: 11px; }
  .moment-chip-time { min-width: 50px; min-height: 42px; font-size: .82rem; }
  .moment-chip-icon { width: 42px; height: 42px; }
}
/* Strong readable token backgrounds for the stable match map */
.token3d { background: linear-gradient(145deg, #39e58c, #0c8d58); }
.token-goal { background: radial-gradient(circle at 32% 24%, #fff 0 13%, transparent 14%), linear-gradient(145deg, #fff176, #39e58c) !important; }
.token-own-goal { background: linear-gradient(145deg, #ffd166, #ff4d5d) !important; }
.token-card { background: linear-gradient(145deg, #fff176, #ffb703) !important; }
.token-red-card { background: linear-gradient(145deg, #ff8094, #d90036) !important; }
.token-substitution { background: linear-gradient(145deg, #7deaff, #2176ff) !important; }
.token-var { background: linear-gradient(145deg, #c4a6ff, #6d4cff) !important; }
.token-woodwork,
.token-penalty,
.token-penalty-miss { background: linear-gradient(145deg, #ffbd7a, #ff2b5f) !important; }
.token-shot,
.token-moment { background: linear-gradient(145deg, #e2e8f0, #64748b) !important; }

/* === LiveBal Pro Matchmap v3: correct football pitch + premium visuals ===
   Vervangt de eerdere platte/goedkope matchmap zonder hover-posities te breken. */
.live3d-card {
  background:
    radial-gradient(circle at 18% -8%, rgba(57,229,140,.30), transparent 34%),
    radial-gradient(circle at 86% 0%, rgba(100,215,255,.21), transparent 32%),
    radial-gradient(circle at 50% 116%, rgba(255,77,93,.14), transparent 45%),
    linear-gradient(145deg, rgba(2,7,13,.99), rgba(7,18,31,.96) 52%, rgba(2,6,12,.99));
  border-color: rgba(124,240,175,.22);
}
.live3d-grid {
  grid-template-columns: minmax(420px, 1.28fr) minmax(330px, .72fr);
  gap: clamp(18px, 2.3vw, 30px);
}
.pitch3d-shell {
  min-height: 680px;
  padding: 34px 22px 42px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 88%, rgba(0,0,0,.58), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}
.pitch3d-shell::before {
  left: 12%;
  right: 12%;
  bottom: 26px;
  height: 78px;
  background: radial-gradient(ellipse, rgba(0,0,0,.66), transparent 70%);
  filter: blur(18px);
}
.pitch3d.pro-pitch {
  position: relative;
  inset: auto !important;
  width: min(100%, 500px);
  aspect-ratio: 68 / 105;
  min-height: 0;
  transform: none !important;
  overflow: visible;
  border-radius: 28px;
  border: 3px solid rgba(235,255,245,.78);
  outline: 1px solid rgba(124,240,175,.28);
  outline-offset: 10px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 8.333%),
    linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7.692%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.085), transparent 22%),
    repeating-linear-gradient(90deg, #1e9b55 0 8.333%, #17854b 8.333% 16.666%);
  box-shadow:
    0 46px 100px rgba(0,0,0,.62),
    0 16px 0 rgba(5,47,28,.96),
    0 30px 0 rgba(1,18,12,.86),
    inset 0 0 0 2px rgba(255,255,255,.10),
    inset 0 0 72px rgba(0,0,0,.34);
  isolation: isolate;
}
.pitch3d.pro-pitch::before {
  content: '';
  position: absolute;
  inset: -36px -30px;
  z-index: -2;
  border-radius: 42px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 26%, rgba(0,0,0,.34) 100%),
    radial-gradient(circle at 18% 10%, rgba(100,215,255,.22), transparent 32%),
    radial-gradient(circle at 84% 4%, rgba(255,209,102,.18), transparent 30%);
  transform: skewX(-1.5deg);
  opacity: .95;
}
.pitch3d.pro-pitch::after {
  content: '';
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: -31px;
  height: 32px;
  border-radius: 0 0 28px 28px;
  background: linear-gradient(180deg, rgba(12,76,42,.96), rgba(2,12,8,.98));
  border: 1px solid rgba(255,255,255,.12);
  border-top: 0;
  transform: skewX(-7deg);
  transform-origin: top center;
  pointer-events: none;
  z-index: -1;
}
.pitch3d.pro-pitch .pitch3d-line.halfway,
.pitch3d.pro-pitch .pitch3d-circle,
.pitch3d.pro-pitch .pitch3d-box,
.pitch3d.pro-pitch .pitch3d-spot,
.pitch3d.pro-pitch .pitch3d-arc,
.pitch3d.pro-pitch .pitch3d-center-dot,
.pitch3d.pro-pitch .pitch3d-goal,
.pitch3d.pro-pitch .pitch3d-corner {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.24));
}
.pitch3d.pro-pitch .pitch3d-line.halfway {
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  background: rgba(246,255,250,.82);
}
.pitch3d.pro-pitch .pitch3d-circle {
  left: 50%;
  top: 50%;
  width: 26.9%;
  aspect-ratio: 1;
  height: auto;
  transform: translate(-50%, -50%);
  border: 3px solid rgba(246,255,250,.78);
  border-radius: 50%;
}
.pitch3d.pro-pitch .pitch3d-center-dot {
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(246,255,250,.95);
  box-shadow: 0 0 10px rgba(255,255,255,.36);
}
/* Correct field proportions: penalty area = 16.5m deep / 40.32m wide. */
.pitch3d.pro-pitch .pitch3d-box.penalty {
  left: 50%;
  width: 59.3%;
  height: 15.7%;
  transform: translateX(-50%);
  border: 3px solid rgba(246,255,250,.76);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent);
}
.pitch3d.pro-pitch .pitch3d-box.penalty.top { top: 0; border-top: 0; }
.pitch3d.pro-pitch .pitch3d-box.penalty.bottom { bottom: 0; border-bottom: 0; }
/* Correct field proportions: six-yard box = 5.5m deep / 18.32m wide. */
.pitch3d.pro-pitch .pitch3d-box.six {
  left: 50%;
  width: 26.9%;
  height: 5.24%;
  transform: translateX(-50%);
  border: 3px solid rgba(246,255,250,.76);
  border-radius: 0;
}
.pitch3d.pro-pitch .pitch3d-box.six.top { top: 0; border-top: 0; }
.pitch3d.pro-pitch .pitch3d-box.six.bottom { bottom: 0; border-bottom: 0; }
.pitch3d.pro-pitch .pitch3d-spot {
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(246,255,250,.92);
  box-shadow: 0 0 10px rgba(255,255,255,.34);
}
.pitch3d.pro-pitch .pitch3d-spot.top { top: 10.48%; }
.pitch3d.pro-pitch .pitch3d-spot.bottom { bottom: calc(10.48% - 7px); }
.pitch3d.pro-pitch .pitch3d-arc {
  left: 50%;
  width: 26.9%;
  aspect-ratio: 1;
  border: 3px solid rgba(246,255,250,.74);
  border-radius: 50%;
  transform: translateX(-50%);
}
.pitch3d.pro-pitch .pitch3d-arc.top {
  top: 10.7%;
  clip-path: inset(45% 0 0 0);
}
.pitch3d.pro-pitch .pitch3d-arc.bottom {
  bottom: 10.7%;
  clip-path: inset(0 0 45% 0);
}
.pitch3d.pro-pitch .pitch3d-goal {
  left: 50%;
  width: 16.5%;
  height: 14px;
  transform: translateX(-50%);
  border: 2px solid rgba(236,255,246,.82);
  background:
    linear-gradient(90deg, rgba(255,255,255,.24) 1px, transparent 1px) 0 0 / 10px 100%,
    linear-gradient(0deg, rgba(255,255,255,.16) 1px, transparent 1px) 0 0 / 100% 7px,
    rgba(255,255,255,.05);
  box-shadow: 0 8px 16px rgba(0,0,0,.28), inset 0 0 12px rgba(255,255,255,.10);
}
.pitch3d.pro-pitch .pitch3d-goal.goal-top {
  top: -16px;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}
.pitch3d.pro-pitch .pitch3d-goal.goal-bottom {
  bottom: -16px;
  border-top: 0;
  border-radius: 0 0 10px 10px;
}
.pitch3d.pro-pitch .pitch3d-corner {
  width: 26px;
  height: 26px;
  border: 3px solid rgba(246,255,250,.70);
}
.pitch3d.pro-pitch .pitch3d-corner.c1 { left: -3px; top: -3px; border-right: 0; border-bottom: 0; border-radius: 28px 0 0 0; }
.pitch3d.pro-pitch .pitch3d-corner.c2 { right: -3px; top: -3px; border-left: 0; border-bottom: 0; border-radius: 0 28px 0 0; }
.pitch3d.pro-pitch .pitch3d-corner.c3 { left: -3px; bottom: -3px; border-right: 0; border-top: 0; border-radius: 0 0 0 28px; }
.pitch3d.pro-pitch .pitch3d-corner.c4 { right: -3px; bottom: -3px; border-left: 0; border-top: 0; border-radius: 0 0 28px 0; }
.pitch3d.pro-pitch .pitch3d-light { display: none !important; }
/* Premium, less-cheap markers while keeping stable hitboxes. */
.pitch3d.pro-pitch .pitch3d-marker {
  width: 78px;
  height: 78px;
  transform: translate(-50%, -50%) !important;
}
.pitch3d.pro-pitch .pitch3d-marker::before {
  width: 34px;
  height: 48px;
  transform: translate(-50%, 23px) perspective(120px) rotateX(68deg);
  background: rgba(0,0,0,.50);
  filter: blur(9px);
}
.pitch3d.pro-pitch .marker-core {
  width: 64px;
  height: 64px;
  margin: 7px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.26);
  box-shadow:
    0 20px 30px rgba(0,0,0,.44),
    0 8px 0 rgba(0,0,0,.24),
    inset 0 2px 0 rgba(255,255,255,.48),
    inset 0 -14px 18px rgba(0,0,0,.24);
}
.pitch3d.pro-pitch .token3d {
  width: 54px;
  height: 54px;
  border-radius: 18px;
}
.pitch3d.pro-pitch .token3d-label {
  font-size: .74rem;
  letter-spacing: -.055em;
}
.pitch3d.pro-pitch .marker-tooltip {
  min-width: 190px;
  background: rgba(1,7,12,.985);
  border-color: rgba(124,240,175,.30);
  box-shadow: 0 26px 58px rgba(0,0,0,.56), 0 0 0 1px rgba(124,240,175,.12), 0 0 28px rgba(57,229,140,.12);
}
.pitch3d.pro-pitch .pitch3d-empty {
  max-width: 330px;
  padding: 18px;
  background: rgba(2,8,14,.90);
  border-color: rgba(124,240,175,.24);
  box-shadow: 0 22px 54px rgba(0,0,0,.42);
}
@media (max-width: 1100px) {
  .live3d-grid { grid-template-columns: 1fr; }
  .pitch3d-shell { min-height: 660px; }
}
@media (max-width: 620px) {
  .pitch3d-shell { min-height: 585px; padding: 22px 8px 36px; }
  .pitch3d.pro-pitch { width: min(100%, 360px); border-radius: 22px; outline-offset: 7px; }
  .pitch3d.pro-pitch .pitch3d-marker { width: 62px; height: 62px; }
  .pitch3d.pro-pitch .marker-core { width: 52px; height: 52px; margin: 5px; border-radius: 18px; }
  .pitch3d.pro-pitch .token3d { width: 44px; height: 44px; border-radius: 15px; }
  .pitch3d.pro-pitch .token3d-label { font-size: .60rem; }
  .pitch3d.pro-pitch .pitch3d-circle { border-width: 2px; }
  .pitch3d.pro-pitch .pitch3d-box.penalty,
  .pitch3d.pro-pitch .pitch3d-box.six,
  .pitch3d.pro-pitch .pitch3d-arc { border-width: 2px; }
  .pitch3d.pro-pitch .pitch3d-team { max-width: 82%; font-size: .75rem; }
}

/* LiveBal all API features - extra cards keep the existing Ultra UI style */
.api-addons-grid { align-items: stretch; }
.api-addon-card { position: relative; overflow: hidden; }
.api-addon-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 20% 0%, rgba(79, 255, 173, .13), transparent 34%), radial-gradient(circle at 100% 20%, rgba(255, 70, 104, .08), transparent 32%);
  opacity: .75;
}
.coverage-grid, .team-kpi-grid, .season-total-grid { position: relative; z-index: 1; }
.coverage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.coverage-tile {
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 12px;
  display: grid;
  gap: 4px;
}
.coverage-tile b { font-size: 1.2rem; color: rgba(255,255,255,.45); }
.coverage-tile.on { border-color: rgba(70,255,170,.28); background: rgba(70,255,170,.075); }
.coverage-tile.on b { color: #61ffad; text-shadow: 0 0 16px rgba(97,255,173,.42); }
.coverage-tile span { color: rgba(255,255,255,.75); font-size: .83rem; }
.leaderboard-list { display: grid; gap: 8px; position: relative; z-index: 1; }
.leaderboard-row {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.leaderboard-row:hover { transform: translateY(-2px); border-color: rgba(92,255,182,.35); background: rgba(92,255,182,.07); }
.leaderboard-row .rank {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 10px;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); font-weight: 800;
}
.leader-main { min-width: 0; display: grid; gap: 2px; }
.leader-main b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leader-main small { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.56); min-width: 0; }
.leader-main img, .injury-row img { width: 16px; height: 16px; object-fit: contain; }
.leader-value { font-size: 1.15rem; color: #fff; }
.injury-list, .h2h-list, .trophy-list, .sidelined-list { display: grid; gap: 8px; position: relative; z-index: 1; }
.injury-row, .h2h-row, .trophy-list article, .sidelined-list article {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  border-radius: 15px;
  padding: 10px;
}
.injury-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) auto;
  align-items: center;
  gap: 10px;
}
.injury-row > span { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.65); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.injury-row > b { color: #ffd36b; }
.prediction-hero {
  border: 1px solid rgba(97,255,173,.22);
  background: linear-gradient(135deg, rgba(97,255,173,.12), rgba(255,255,255,.03));
  border-radius: 18px;
  padding: 14px;
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}
.prediction-hero strong { font-size: 1.1rem; }
.prediction-hero small { color: rgba(255,255,255,.62); }
.prediction-bars { display: grid; gap: 10px; }
.prediction-bar { display: grid; grid-template-columns: 70px 1fr 52px; gap: 10px; align-items: center; }
.prediction-bar span, .prediction-bar strong { font-size: .85rem; color: rgba(255,255,255,.72); }
.prediction-bar i { height: 9px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.08); }
.prediction-bar i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5cffb6, #e8ff7a); box-shadow: 0 0 18px rgba(92,255,182,.3); }
.bookmaker-block { position: relative; z-index: 1; display: grid; gap: 10px; margin-bottom: 12px; }
.bookmaker-block > strong { color: #fff; }
.odds-bet { border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); border-radius: 14px; padding: 10px; display: grid; gap: 8px; }
.odds-bet small { color: rgba(255,255,255,.6); }
.odds-bet div { display: flex; flex-wrap: wrap; gap: 8px; }
.odds-bet span { border-radius: 999px; padding: 6px 9px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.78); }
.odds-bet b { color: #fff; margin-left: 4px; }
.h2h-row { width: 100%; color: inherit; text-align: left; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; cursor: pointer; }
.h2h-row:hover { border-color: rgba(92,255,182,.35); }
.h2h-row span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.h2h-row b { color: #fff; }
.player-extra-grid { margin: 14px 0; }
.trophy-list article, .sidelined-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
.trophy-list small, .sidelined-list small { color: rgba(255,255,255,.58); }
.trophy-list strong { color: #ffe47a; }
.coach-trophy-mini { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.coach-trophy-mini small { color: rgba(255,255,255,.55); width: 100%; }
.coach-trophy-mini span { border-radius: 999px; padding: 6px 9px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.78); }
.api-status-pre { max-height: 420px; overflow: auto; white-space: pre-wrap; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.08); padding: 14px; border-radius: 16px; color: rgba(255,255,255,.72); }
@media (max-width: 760px) {
  .leaderboard-row { grid-template-columns: 28px 36px minmax(0, 1fr) auto; }
  .injury-row { grid-template-columns: 1fr; }
  .prediction-bar { grid-template-columns: 58px 1fr 44px; }
  .h2h-row { grid-template-columns: 1fr; }
}

/* UI relayout: compact odds + timeline before matchmap */
.match-priority-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}
.timeline-priority-card {
  min-height: 320px;
  border-color: rgba(76, 229, 146, .22) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.timeline-priority-card .event-list {
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}
.stats-priority-card .stat-list {
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}
.matchmap-lower-wrap {
  margin-top: 18px;
}
.matchmap-lower-wrap .live3d-card {
  padding: 16px !important;
  border-radius: 24px !important;
}
.matchmap-lower-wrap .live3d-head {
  margin-bottom: 12px !important;
}
.matchmap-lower-wrap .live3d-head h2 {
  font-size: 1.12rem !important;
}
.matchmap-lower-wrap .live3d-grid {
  grid-template-columns: minmax(0, .95fr) minmax(280px, .55fr) !important;
  gap: 14px !important;
}
.matchmap-lower-wrap .pitch3d-shell {
  min-height: 420px !important;
  padding: 14px !important;
}
.matchmap-lower-wrap .pitch3d {
  min-height: 360px !important;
  max-height: 430px;
}
.matchmap-lower-wrap .moment-list3d {
  max-height: 430px;
  overflow: auto;
}
.odds-card-compact {
  grid-column: 1 / -1;
}
.odds-compact-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 410px);
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 4px 14px;
  scroll-snap-type: x proximity;
}
.bookmaker-compact-card {
  position: relative;
  z-index: 1;
  scroll-snap-align: start;
  display: grid;
  gap: 10px;
  min-height: 220px;
  max-height: 430px;
  overflow: auto;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 13px;
  background:
    radial-gradient(circle at 18% 0%, rgba(76,229,146,.15), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.028));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 45px rgba(0,0,0,.22);
}
.bookmaker-compact-card.is-featured {
  border-color: rgba(76,229,146,.24);
}
.bookmaker-compact-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  position: sticky;
  top: -13px;
  z-index: 2;
  padding: 11px 0 10px;
  background: linear-gradient(180deg, rgba(15,23,32,.96), rgba(15,23,32,.76));
  backdrop-filter: blur(10px);
}
.bookmaker-compact-head strong { color: #fff; font-size: 1rem; }
.bookmaker-compact-head span {
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.64);
  font-size: .72rem;
}
.odds-market-strip {
  display: grid;
  gap: 9px;
}
.odds-market-strip.more { margin-top: 10px; }
.odds-market-chip {
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(4,8,14,.30);
  border-radius: 14px;
  padding: 9px;
}
.odds-market-chip small {
  display: block;
  color: rgba(255,255,255,.62);
  margin-bottom: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.odds-market-chip div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.odds-market-chip span {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  border-radius: 12px;
  padding: 8px 9px;
  background: rgba(255,255,255,.085);
  color: rgba(255,255,255,.78);
}
.odds-market-chip em {
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.odds-market-chip b { color: #fff; }
.odds-more {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 8px;
}
.odds-more summary {
  cursor: pointer;
  color: rgba(255,255,255,.68);
  font-size: .82rem;
  user-select: none;
}
@media (max-width: 980px) {
  .match-priority-grid { grid-template-columns: 1fr; }
  .matchmap-lower-wrap .live3d-grid { grid-template-columns: 1fr !important; }
  .matchmap-lower-wrap .pitch3d-shell { min-height: 360px !important; }
  .matchmap-lower-wrap .pitch3d { min-height: 320px !important; }
  .odds-compact-scroller { grid-auto-columns: minmax(280px, 86vw); }
}
@media (max-width: 620px) {
  .timeline-priority-card .event-list,
  .stats-priority-card .stat-list { max-height: none; }
  .matchmap-lower-wrap .pitch3d-shell { min-height: 330px !important; }
  .matchmap-lower-wrap .pitch3d { min-height: 300px !important; }
  .odds-market-chip div { grid-template-columns: 1fr; }
}


/* === LiveBall branding integration === */
.brand-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 18px;
}
.brand-grid .span-2 { grid-column: 1 / -1; }
.brand-card {
  padding: 18px;
}
.brand-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.brand-card header h2 {
  margin: 0;
  font-size: 1.05rem;
}
.brand-card p { color: var(--muted); line-height: 1.55; }
.brand-hero-box {
  display: grid;
  gap: 14px;
  align-items: start;
}
.brand-hero-box img {
  width: min(100%, 520px);
  height: auto;
  display: block;
  filter: drop-shadow(0 22px 34px rgba(0, 102, 255, 0.18));
}
.brand-tagline-big {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.brand-tagline-big span {
  color: var(--teal);
}
.brand-swatch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.brand-swatch {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
}
.brand-swatch-chip {
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.brand-swatch b, .brand-swatch small { display: block; }
.brand-swatch small { color: var(--muted); }
.brand-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.brand-preview {
  display: grid;
  gap: 12px;
}
.brand-preview img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.brand-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.brand-points article {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
}
.brand-points span {
  display: block;
  color: var(--teal);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 7px;
  font-weight: 800;
}
.brand-points strong { display: block; font-size: 1rem; margin-bottom: 4px; }
.brand-inline-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.10), rgba(0, 229, 255, 0.05));
}
.brand-inline-logo img {
  width: min(100%, 360px);
  height: auto;
}
.brand-inline-logo .mini-note {
  max-width: 440px;
  color: var(--muted);
}
@media (max-width: 960px) {
  .brand-grid, .brand-preview-grid, .brand-points, .brand-swatch-grid { grid-template-columns: 1fr; }
  .brand-grid .span-2 { grid-column: auto; }
}
@media (max-width: 720px) {
  .brand-copy { display: none; }
  .brand-logo { height: 48px; max-width: 220px; }
}


/* =========================================================
   LiveBall Full Brand Restyle v2
   Echte CSS-doorvoering van het brandingpakket.
   ========================================================= */
:root {
  --bg: #0b0f1a;
  --bg-2: #0f1a2e;
  --card: rgba(15, 26, 46, 0.76);
  --card-strong: rgba(19, 33, 58, 0.92);
  --border: rgba(0, 229, 255, 0.16);
  --muted: #a7b0c2;
  --text: #ffffff;
  --accent: #00e5ff;
  --accent-2: #0066ff;
  --accent-soft: rgba(0, 229, 255, 0.13);
  --teal: #00ffa3;
  --brand-navy: #0b0f1a;
  --brand-panel: #0f1a2e;
  --brand-blue: #0066ff;
  --brand-cyan: #00e5ff;
  --brand-teal: #00ffa3;
  --brand-gray: #a7b0c2;
  --shadow: 0 26px 80px rgba(0, 0, 0, 0.46);
}

html {
  background: #0b0f1a;
}

body {
  background:
    radial-gradient(circle at var(--mx, 20%) var(--my, 5%), rgba(0, 229, 255, 0.12), transparent 24rem),
    radial-gradient(circle at 8% -10%, rgba(0, 102, 255, 0.30), transparent 34rem),
    radial-gradient(circle at 92% 4%, rgba(0, 229, 255, 0.16), transparent 28rem),
    radial-gradient(circle at 72% 105%, rgba(0, 255, 163, 0.10), transparent 36rem),
    linear-gradient(180deg, #0b0f1a 0%, #071120 46%, #070d18 100%) !important;
}

body::before {
  opacity: 0.56;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.035) 1px, transparent 1px);
  background-size: 54px 54px;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(112deg, transparent 0 31%, rgba(0, 102, 255, 0.12) 32%, transparent 39%),
    linear-gradient(126deg, transparent 0 52%, rgba(0, 229, 255, 0.08) 53%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 102, 255, 0.12), transparent 55%);
  mix-blend-mode: screen;
  animation: liveballBeams 10s ease-in-out infinite alternate;
}

.grain-layer {
  opacity: 0.18 !important;
  mix-blend-mode: overlay;
}

.stadium-glow {
  background:
    radial-gradient(ellipse at center, rgba(0, 229, 255, 0.18), transparent 52%),
    radial-gradient(ellipse at 30% 70%, rgba(0, 102, 255, 0.16), transparent 44%) !important;
}

.topbar {
  min-height: 82px;
  padding: 10px 16px;
  border: 1px solid rgba(0, 229, 255, 0.20);
  background:
    linear-gradient(135deg, rgba(11, 15, 26, 0.82), rgba(15, 26, 46, 0.72)),
    radial-gradient(circle at 8% 50%, rgba(0, 229, 255, 0.12), transparent 30%);
  box-shadow:
    0 22px 70px rgba(0,0,0,0.46),
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 0 0 1px rgba(0, 102, 255, 0.08);
}

.brand {
  gap: 16px;
}

.brand-logo {
  height: 64px;
  max-width: min(48vw, 390px);
  object-fit: contain;
  filter:
    drop-shadow(0 10px 22px rgba(0, 102, 255, 0.30))
    drop-shadow(0 0 18px rgba(0, 229, 255, 0.16));
  transform-origin: left center;
  transition: transform 220ms ease, filter 220ms ease;
}

.brand:hover .brand-logo {
  transform: translateY(-1px) scale(1.015);
  filter:
    drop-shadow(0 14px 30px rgba(0, 102, 255, 0.42))
    drop-shadow(0 0 26px rgba(0, 229, 255, 0.26));
}

.brand-copy small {
  color: rgba(255,255,255,0.74);
  letter-spacing: 0.16em;
}

.status-pill {
  border-color: rgba(0, 229, 255, 0.20);
  background:
    linear-gradient(135deg, rgba(0, 102, 255, 0.12), rgba(0, 229, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.layout {
  gap: 20px;
}

.nav-card, .panel, .hero-card, .match-card, .table-card, .message, .lineup-pitch-card,
.player-modal-card, .favorite-card, .team-card, .search-card, .bracket-round {
  background:
    linear-gradient(145deg, rgba(15, 26, 46, 0.82), rgba(9, 18, 34, 0.76)) !important;
  border-color: rgba(0, 229, 255, 0.15) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255,255,255,0.055);
}

.sidebar .panel,
.nav-card {
  position: relative;
  overflow: hidden;
}

.sidebar .panel::before,
.nav-card::before,
.table-card::before,
.match-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(0, 229, 255, 0.07), transparent 30%, transparent 70%, rgba(0, 102, 255, 0.07));
  opacity: 0.7;
}

.nav-card a {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  color: rgba(255,255,255,0.68);
}

.nav-card a:hover {
  color: #fff;
  border-color: rgba(0, 229, 255, 0.16);
  background: rgba(0, 229, 255, 0.065);
  transform: translateX(2px);
}

.nav-card a.active,
.bottom-nav a.active {
  color: #fff !important;
  border-color: rgba(0, 229, 255, 0.35);
  background:
    linear-gradient(135deg, rgba(0, 102, 255, 0.95), rgba(0, 229, 255, 0.70)) !important;
  box-shadow:
    0 16px 34px rgba(0, 102, 255, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

.hero-card {
  min-height: 172px;
  border-color: rgba(0, 229, 255, 0.22) !important;
  background:
    radial-gradient(circle at 17% 15%, rgba(0, 229, 255, 0.18), transparent 30%),
    radial-gradient(circle at 88% 5%, rgba(0, 102, 255, 0.30), transparent 32%),
    linear-gradient(135deg, rgba(19, 33, 58, 0.92), rgba(7, 17, 32, 0.92)) !important;
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, transparent 0 35%, rgba(0, 229, 255, 0.08) 42%, transparent 52%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 26px);
  mask-image: linear-gradient(90deg, transparent, black 30%, black 70%, transparent);
  pointer-events: none;
  animation: liveballSweep 4.8s ease-in-out infinite;
}

.hero-card h1 {
  text-transform: none;
  letter-spacing: -0.07em;
  text-shadow: 0 0 24px rgba(0, 229, 255, 0.16);
}

.eyebrow {
  color: var(--brand-cyan) !important;
  text-shadow: 0 0 18px rgba(0, 229, 255, 0.28);
}

.hero-stat {
  border: 1px solid rgba(0, 229, 255, 0.22);
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 229, 255, 0.24), transparent 70%),
    linear-gradient(180deg, rgba(0, 102, 255, 0.18), rgba(0,0,0,0.10));
  box-shadow:
    0 18px 42px rgba(0, 102, 255, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

.input {
  background: rgba(7, 17, 32, 0.72);
  border-color: rgba(0, 229, 255, 0.13);
}

.input:focus {
  border-color: rgba(0, 229, 255, 0.60) !important;
  box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.11) !important;
}

.mini-button, .ghost-button, .primary-button {
  background:
    linear-gradient(135deg, rgba(0, 102, 255, 0.18), rgba(0, 229, 255, 0.08));
  border-color: rgba(0, 229, 255, 0.22);
}

.mini-button:hover, .ghost-button:hover, .primary-button:hover {
  background:
    linear-gradient(135deg, rgba(0, 102, 255, 0.30), rgba(0, 229, 255, 0.16)) !important;
  border-color: rgba(0, 229, 255, 0.50) !important;
}

.match-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.match-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 229, 255, 0.32) !important;
  box-shadow:
    0 30px 88px rgba(0,0,0,0.48),
    0 0 0 1px rgba(0, 229, 255, 0.10),
    0 0 36px rgba(0, 102, 255, 0.10);
}

.match-card.is-live {
  border-color: rgba(255, 80, 105, 0.42) !important;
  box-shadow:
    0 24px 72px rgba(0,0,0,0.46),
    0 0 38px rgba(255, 45, 85, 0.10) !important;
}

.match-card.is-live::after {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff375f, #ff8a00);
  box-shadow: 0 0 20px rgba(255,55,95,0.65);
}

.league-title, .section-title, .panel-title-row h2, .table-card h2 {
  letter-spacing: -0.02em;
}

.score-pill, .score-badge, .match-score, .live-score {
  background:
    linear-gradient(135deg, rgba(0, 102, 255, 0.28), rgba(0, 229, 255, 0.12)) !important;
  border-color: rgba(0, 229, 255, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 14px 26px rgba(0,102,255,0.14);
}

.tiny-badge.on, .live-badge, .status-live, .chip.live {
  background:
    linear-gradient(135deg, rgba(255, 45, 85, 0.28), rgba(255, 138, 0, 0.14)) !important;
  color: #fff !important;
  border-color: rgba(255, 75, 110, 0.42) !important;
}

.form .W,
.player-rating.great,
.season-context-panel strong.hot {
  color: var(--brand-teal) !important;
}

.market-cell b,
.market-profile-tile strong {
  color: var(--brand-cyan) !important;
}

.lineup-pitch, .matchmap-pitch, .pitch-field {
  box-shadow:
    inset 0 0 0 1px rgba(0, 229, 255, 0.08),
    0 24px 60px rgba(0,0,0,0.36) !important;
}

.timeline-event, .moment-card, .event-card {
  border-color: rgba(0, 229, 255, 0.14) !important;
  background:
    linear-gradient(135deg, rgba(0, 102, 255, 0.10), rgba(15, 26, 46, 0.70)) !important;
}

.brand-preview img {
  box-shadow:
    0 20px 60px rgba(0,0,0,0.44),
    0 0 0 1px rgba(0,229,255,0.10);
}

.bottom-nav {
  border-color: rgba(0, 229, 255, 0.18) !important;
  background:
    linear-gradient(135deg, rgba(11, 15, 26, 0.88), rgba(15, 26, 46, 0.78)) !important;
  box-shadow:
    0 -18px 60px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.07);
}

@keyframes liveballBeams {
  from { opacity: 0.55; transform: translateX(-1.5vw); }
  to { opacity: 0.95; transform: translateX(1.5vw); }
}

@keyframes liveballSweep {
  0%, 100% { transform: translateX(-18%); opacity: 0.22; }
  50% { transform: translateX(18%); opacity: 0.55; }
}

@media (max-width: 720px) {
  .topbar {
    min-height: 70px;
    padding: 10px 12px;
  }
  .brand-logo {
    height: 52px;
    max-width: 240px;
  }
}


/* =========================================================
   Branded match center
   ========================================================= */

.match-detail {
  display: grid !important;
  gap: 18px !important;
}

body[data-route="match"] .top-controls,
body[data-route="team"] .top-controls,
body[data-route="match"] .hero-card,
body[data-route="team"] .hero-card {
  display: none !important;
}

body[data-route="match"] .content,
body[data-route="team"] .content {
  padding-top: 4px;
}

.match-score-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--lb-line);
  border-top: 2px solid var(--lb-blue);
  border-radius: 17px;
  background:
    radial-gradient(circle at 50% 45%, rgba(0, 102, 255, .15), transparent 34%),
    linear-gradient(145deg, rgba(19, 33, 58, .97), rgba(6, 15, 29, .99));
  box-shadow: 0 22px 56px rgba(0, 0, 0, .36), var(--lb-blue-glow);
}

.match-score-shell::before,
.match-score-shell::after {
  content: "";
  position: absolute;
  top: 70px;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(0, 229, 255, .08);
  border-radius: 50%;
  pointer-events: none;
}

.match-score-shell::before {
  left: -150px;
}

.match-score-shell::after {
  right: -150px;
}

.match-score-shell.is-live {
  border-top-color: var(--lb-teal);
  box-shadow: 0 0 34px rgba(0, 255, 163, .08), 0 22px 56px rgba(0, 0, 0, .36);
}

.match-score-meta {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 13px 17px;
  border-bottom: 1px solid rgba(75, 133, 194, .18);
  background: rgba(4, 13, 25, .38);
}

.match-competition-link {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 10px;
  min-width: 0;
  padding: 5px 7px;
  border: 0;
  border-radius: 9px;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.match-competition-link:hover {
  background: rgba(0, 102, 255, .1);
}

.match-competition-link img {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  object-fit: contain;
}

.match-competition-link span {
  display: grid;
  min-width: 0;
}

.match-competition-link small {
  overflow: hidden;
  color: #74869e;
  font-size: .6rem;
  letter-spacing: .1em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.match-competition-link b {
  overflow: hidden;
  color: #e4edf8;
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-round-label {
  justify-self: center;
  color: #899bb2;
  font-size: .7rem;
  font-weight: 600;
  text-align: center;
}

.match-state-label {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(75, 133, 194, .22);
  border-radius: 999px;
  color: #9eb0c7;
  background: rgba(8, 19, 35, .7);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.match-state-label.live {
  border-color: rgba(0, 255, 163, .35);
  color: var(--lb-teal);
  background: rgba(0, 255, 163, .07);
}

.match-state-label.live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lb-teal);
  box-shadow: 0 0 10px var(--lb-teal);
  animation: livePulse 1.6s ease-in-out infinite;
}

.match-score-shell .scoreboard {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(18px, 5vw, 64px) !important;
  min-height: 260px;
  padding: 28px clamp(20px, 6vw, 76px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.match-score-shell .score-team {
  display: grid !important;
  justify-items: center !important;
  gap: 11px !important;
  min-width: 0;
  padding: 12px !important;
  border: 1px solid transparent;
  border-radius: 14px !important;
  background: transparent !important;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.match-score-shell .score-team:hover {
  border-color: rgba(0, 229, 255, .24);
  background: rgba(0, 102, 255, .07) !important;
  transform: translateY(-2px);
}

.match-score-shell .score-team > img {
  width: clamp(76px, 9vw, 112px) !important;
  height: clamp(76px, 9vw, 112px) !important;
  object-fit: contain;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .35));
}

.match-score-shell .score-team > strong {
  max-width: 100%;
  overflow: hidden;
  color: #f5f9ff;
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.38rem);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-overflow: ellipsis;
}

.match-score-shell .score-team .fav-button {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(75, 133, 194, .25) !important;
  border-radius: 9px !important;
  background: rgba(7, 18, 33, .72) !important;
}

.match-score-shell .big-score-status,
.match-score-shell .big-score {
  display: grid !important;
  justify-items: center !important;
  gap: 10px !important;
  min-width: 150px;
  padding: 17px 18px !important;
  border: 1px solid rgba(0, 102, 255, .62) !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, rgba(12, 29, 53, .96), rgba(5, 16, 30, .98)) !important;
  box-shadow: inset 0 0 26px rgba(0, 102, 255, .09), var(--lb-blue-glow) !important;
}

.match-score-shell .is-live-score {
  border-color: rgba(0, 255, 163, .42) !important;
  box-shadow: inset 0 0 24px rgba(0, 255, 163, .07), 0 0 26px rgba(0, 255, 163, .08) !important;
}

.match-score-shell .score-line {
  color: white !important;
  font-family: "Rajdhani", "Inter", sans-serif !important;
  font-size: clamp(2.7rem, 7vw, 4.7rem) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  line-height: .85 !important;
  white-space: nowrap;
}

.match-score-shell .score-line.score-date {
  font-size: clamp(1.15rem, 2.5vw, 1.65rem) !important;
  line-height: 1.1 !important;
  text-align: center;
  white-space: normal;
}

.match-score-shell .score-subline {
  color: var(--lb-cyan) !important;
  font-size: .8rem !important;
  font-weight: 800 !important;
}

.match-score-shell .is-live-score .score-subline {
  color: var(--lb-teal) !important;
}

.match-score-footer {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 17px;
  border-top: 1px solid rgba(75, 133, 194, .18);
  color: #7f91a8;
  background: rgba(4, 13, 25, .38);
  font-size: .69rem;
}

.match-score-footer span:nth-child(2) {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-section-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--lb-line);
  border-radius: 12px;
  background: rgba(7, 17, 31, .88);
}

.match-section-tabs button {
  min-width: max-content;
  padding: 9px 15px;
  border: 0;
  border-radius: 8px;
  color: #8799b0;
  background: transparent;
  cursor: pointer;
  font-size: .76rem;
  font-weight: 700;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}

.match-section-tabs button:hover,
.match-section-tabs button.active {
  color: white;
  background: linear-gradient(110deg, rgba(0, 102, 255, .85), rgba(0, 174, 237, .72));
  box-shadow: 0 8px 20px rgba(0, 102, 255, .2);
}

.match-anchor-section {
  scroll-margin-top: 118px;
}

.match-priority-grid {
  gap: 18px !important;
  align-items: start !important;
}

.timeline-priority-card,
.stats-priority-card {
  overflow: hidden;
  border-top: 2px solid var(--lb-blue) !important;
}

.timeline-priority-card {
  border-top-color: var(--lb-cyan) !important;
}

.match-section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 15px !important;
  padding: 16px 18px !important;
  background: rgba(5, 15, 28, .34);
}

.match-section-header > span {
  display: grid;
  gap: 2px;
}

.match-section-header small {
  color: var(--lb-cyan);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.match-section-header h2 {
  margin: 0 !important;
  color: #f1f7ff;
  font-size: 1.22rem !important;
}

.match-section-header > b {
  color: #8fa2b9;
  font-size: .68rem;
  font-weight: 700;
}

.event-list {
  padding: 10px 14px 16px !important;
}

.event-item {
  position: relative;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 68px;
  margin: 0 !important;
  padding: 10px 8px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(75, 133, 194, .14) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.event-item .event-time,
.event-item .event-icon,
.event-item .event-assist { flex: 0 0 auto !important; }

.event-item .event-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.event-item.away {
  flex-direction: row-reverse !important;
}

.event-item:last-child {
  border-bottom: 0 !important;
}

.event-item:hover {
  background: rgba(0, 102, 255, .055) !important;
}

.event-time {
  justify-self: center;
  min-width: 42px;
  padding: 6px 7px;
  border: 1px solid rgba(0, 102, 255, .34);
  border-radius: 8px;
  color: var(--lb-cyan) !important;
  background: rgba(0, 102, 255, .09);
  font-family: "Rajdhani", sans-serif;
  font-weight: 700 !important;
  text-align: center;
}

.event-icon {
  display: grid !important;
  width: 36px !important;
  height: 36px !important;
  place-items: center;
  border: 1px solid rgba(75, 133, 194, .24);
  border-radius: 10px !important;
  background: rgba(8, 19, 35, .84) !important;
  color: var(--muted);
}

.event-icon .icon-svg { width: 18px; height: 18px; }

.event-goal .event-icon {
  border-color: rgba(0, 255, 163, .35);
  color: var(--lb-teal);
  background: rgba(0, 255, 163, .08) !important;
}

.event-card .event-icon {
  border-color: rgba(255, 209, 102, .34);
  background: rgba(255, 209, 102, .08) !important;
  color: #ffd166;
}

.event-red-card .event-icon {
  border-color: rgba(255, 77, 93, .4);
  background: rgba(255, 77, 93, .1) !important;
  color: #ff4d5d;
}

.event-substitution .event-icon {
  color: #75c7ff;
}

.event-var .event-icon,
.event-penalty .event-icon {
  color: var(--lb-cyan);
}

.event-main {
  line-height: 1.35;
}

.event-main > b {
  color: #eef6ff;
}

.match-stat-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(75, 133, 194, .15);
  background: rgba(5, 15, 28, .22);
}

.match-stat-legend span {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  overflow: hidden;
  color: #bdcbe0;
  font-size: .7rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-stat-legend img {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  object-fit: contain;
}

.stat-list {
  padding: 12px 18px 18px !important;
}

.stat-row {
  padding: 11px 0 !important;
  border-bottom: 1px solid rgba(75, 133, 194, .1);
}

.stat-row:last-child {
  border-bottom: 0;
}

.stat-head {
  grid-template-columns: 54px minmax(0, 1fr) 54px !important;
}

.stat-head small {
  color: #9baac0 !important;
  font-size: .68rem !important;
  font-weight: 600;
  text-align: center;
}

.stat-value-left,
.stat-value-right {
  color: #f0f6ff !important;
  font-family: "Rajdhani", sans-serif;
  font-size: 1rem;
  font-weight: 700 !important;
}

.stat-bars {
  gap: 5px !important;
  height: 5px !important;
}

.stat-bar {
  overflow: hidden;
  border-radius: 999px;
  background: rgba(75, 133, 194, .12) !important;
}

.stat-bar.left span {
  background: linear-gradient(90deg, var(--lb-blue), var(--lb-cyan)) !important;
}

.stat-bar.right span {
  background: linear-gradient(90deg, var(--lb-teal), #00b995) !important;
}

.lineups-section {
  display: grid !important;
  gap: 16px !important;
}

.pitch-card {
  overflow: hidden;
  border: 1px solid var(--lb-line) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(12, 28, 49, .96), rgba(6, 17, 31, .98)) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .3) !important;
}

.pitch-header {
  padding: 14px 17px !important;
  border-bottom: 1px solid rgba(75, 133, 194, .18) !important;
  background: rgba(4, 13, 25, .42) !important;
}

.pitch-header strong {
  color: #e8f1fc !important;
}

.pitch-header span {
  color: var(--lb-cyan) !important;
}

.pitch {
  border-color: rgba(0, 229, 255, .24) !important;
  background:
    linear-gradient(rgba(0, 229, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, .04) 1px, transparent 1px),
    linear-gradient(180deg, #0a3851 0 50%, #093349 50% 100%) !important;
  background-size: 44px 44px, 44px 44px, 100% 100% !important;
}

.pitch::before,
.pitch::after,
.pitch .center-circle,
.pitch .box-top,
.pitch .box-bottom,
.pitch .six-top,
.pitch .six-bottom {
  border-color: rgba(191, 255, 245, .6) !important;
}

.player-tile {
  border: 1px solid rgba(0, 229, 255, .3) !important;
  border-radius: 11px !important;
  background: rgba(5, 17, 29, .88) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3) !important;
}

.player-tile:hover {
  border-color: var(--lb-cyan) !important;
  box-shadow: 0 0 20px rgba(0, 229, 255, .16) !important;
}

.player-tile.away {
  border-color: rgba(0, 255, 163, .32) !important;
}

.bench-card {
  border: 1px solid var(--lb-line) !important;
  border-radius: 14px !important;
  background: var(--lb-panel) !important;
}

.bench-card h3 {
  border-bottom: 1px solid rgba(75, 133, 194, .18) !important;
  font-family: "Rajdhani", sans-serif;
}

.bench-player {
  border-color: rgba(75, 133, 194, .14) !important;
  background: rgba(6, 17, 31, .5) !important;
}

.bench-player:hover {
  border-color: rgba(0, 229, 255, .32) !important;
  background: rgba(0, 102, 255, .07) !important;
}

@media (max-width: 820px) {
  .match-score-shell .scoreboard {
    grid-template-columns: minmax(0, 1fr) minmax(112px, auto) minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 220px;
    padding: 22px 12px !important;
  }

  .match-score-shell .big-score-status,
  .match-score-shell .big-score {
    min-width: 112px;
    padding: 14px 10px !important;
  }

  .match-score-footer {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .match-score-footer span:nth-child(2) {
    display: none;
  }

  .match-priority-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  .match-score-shell {
    border-radius: 13px;
  }

  .match-score-meta {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .match-round-label {
    display: none;
  }

  .match-score-shell .scoreboard {
    grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr) !important;
    gap: 4px !important;
    min-height: 196px;
    padding: 18px 5px !important;
  }

  .match-score-shell .score-team {
    gap: 7px !important;
    padding: 6px !important;
  }

  .match-score-shell .score-team > img {
    width: 62px !important;
    height: 62px !important;
  }

  .match-score-shell .score-team > strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: .9rem;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .match-score-shell .score-team .fav-button {
    width: 30px !important;
    height: 30px !important;
  }

  .match-score-shell .big-score-status,
  .match-score-shell .big-score {
    min-width: 86px;
    padding: 12px 5px !important;
  }

  .match-score-shell .score-line {
    font-size: 2.2rem !important;
  }

  .match-score-shell .score-subline {
    font-size: .66rem !important;
  }

  .match-score-footer {
    padding: 10px 12px;
  }

  .match-score-footer span:last-child {
    text-align: right;
  }

  .match-section-tabs {
    width: 100%;
  }

  .match-section-tabs button {
    flex: 1 0 auto;
    text-align: center;
  }

  .event-list {
    padding-inline: 8px !important;
  }

  .event-item,
  .event-item.away {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
  }

  .event-item .event-time,
  .event-item.away .event-time { order: 1; }

  .event-item .event-icon,
  .event-item.away .event-icon { order: 2; }

  .event-item .event-main,
  .event-item.away .event-main {
    order: 3;
    flex: 1 1 100%;
    min-width: 0;
  }

  .event-assist {
    display: none !important;
  }

  .event-icon {
    width: 32px !important;
    height: 32px !important;
  }

  .match-stat-legend {
    padding-inline: 12px;
  }
}


/* =========================================================
   Team + player dashboard system
   ========================================================= */

.premium-team-hero {
  position: relative;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(18px, 4vw, 38px) !important;
  min-height: 210px;
  overflow: hidden;
  padding: clamp(22px, 4vw, 38px) !important;
  border-top: 2px solid var(--lb-blue) !important;
}

.premium-team-hero::before {
  content: "";
  position: absolute;
  top: 50%;
  left: clamp(20px, 5vw, 70px);
  width: 190px;
  height: 190px;
  border: 1px solid rgba(0, 229, 255, .12);
  border-radius: 50%;
  transform: translate(-25%, -50%);
  box-shadow:
    0 0 0 24px rgba(0, 102, 255, .025),
    0 0 0 48px rgba(0, 229, 255, .018);
  animation: profileOrbit 12s linear infinite;
}

.premium-team-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(108deg, transparent 20%, rgba(0, 229, 255, .07) 45%, transparent 70%);
  transform: translateX(-130%);
  animation: profileSweep 8s ease-in-out infinite;
}

.premium-team-hero > * {
  position: relative;
  z-index: 1;
}

.premium-team-hero > img {
  width: clamp(96px, 12vw, 138px) !important;
  height: clamp(96px, 12vw, 138px) !important;
  padding: 15px !important;
  object-fit: contain;
}

.team-hero-copy {
  min-width: 0;
}

.team-hero-copy h2 {
  margin: 2px 0 5px !important;
  overflow: hidden;
  color: #f7fbff;
  font-size: clamp(2rem, 5vw, 3.8rem) !important;
  line-height: .94 !important;
  text-overflow: ellipsis;
}

.team-hero-copy > p:not(.eyebrow) {
  margin: 0;
  color: #91a2b9;
}

.team-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

.team-profile-tags span {
  padding: 7px 10px;
  border: 1px solid rgba(75, 133, 194, .22);
  border-radius: 999px;
  color: #9eb0c5;
  background: rgba(7, 17, 31, .58);
  font-size: .66rem;
  font-weight: 700;
}

.team-profile-tags .market-active {
  border-color: rgba(0, 255, 163, .3);
  color: var(--lb-teal);
  background: rgba(0, 255, 163, .07);
}

.team-hero-actions {
  display: grid !important;
  justify-items: end !important;
  gap: 10px !important;
}

.team-value-badge {
  min-width: 145px;
  padding: 12px 15px !important;
  border-radius: 11px !important;
  text-align: right;
}

.team-value-badge small {
  color: #8da0b7 !important;
  font-size: .62rem !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.team-value-badge b {
  font-size: 1.42rem !important;
}

.team-info-grid {
  gap: 12px !important;
}

.team-info-tile {
  position: relative;
  min-height: 108px !important;
  overflow: hidden;
  padding: 17px !important;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.team-info-tile::after,
.team-kpi-grid article::after,
.admin-kpi-grid article::after {
  content: "";
  position: absolute;
  right: -32px;
  bottom: -42px;
  width: 88px;
  height: 88px;
  border: 1px solid rgba(0, 229, 255, .08);
  border-radius: 50%;
}

.team-info-tile:hover {
  border-color: rgba(0, 229, 255, .34) !important;
  background: rgba(0, 102, 255, .07) !important;
  transform: translateY(-2px);
}

.team-info-tile > span,
.team-kpi-grid article > span {
  color: #7f91a9 !important;
  font-size: .61rem !important;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.team-info-tile > strong,
.team-kpi-grid article > strong {
  color: #edf5ff !important;
  font-family: "Rajdhani", sans-serif;
  font-size: 1.24rem !important;
}

.team-stat-hero {
  gap: 10px !important;
  padding: 14px !important;
  border: 1px solid rgba(75, 133, 194, .17);
  border-radius: 12px;
  background: rgba(5, 15, 28, .34);
}

.team-stat-hero > div {
  border-right-color: rgba(75, 133, 194, .16) !important;
}

.enhanced-squad-card,
.transfers-card {
  overflow: hidden;
  border-top: 2px solid var(--lb-blue) !important;
}

.enhanced-squad-card > header,
.transfers-card > header {
  background: rgba(4, 13, 25, .34);
}

.squad-table {
  padding: 10px !important;
}

.squad-row-pro {
  position: relative;
  min-height: 72px !important;
  margin-bottom: 5px !important;
  border-radius: 10px !important;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.squad-row-pro:hover {
  transform: translateX(3px);
}

.squad-avatar-pro {
  border: 1px solid rgba(0, 229, 255, .22) !important;
  background: #0a182b !important;
}

.market-cell {
  padding: 8px 10px;
  border-left: 1px solid rgba(0, 255, 163, .16);
  border-radius: 8px;
  background: rgba(0, 255, 163, .045);
}

.transfer-list {
  padding: 10px !important;
}

.transfer-row {
  min-height: 64px;
  margin-bottom: 5px;
  border-radius: 10px !important;
}

/* Player profile modal */
.player-modal-backdrop {
  background:
    radial-gradient(circle at 50% 20%, rgba(0, 102, 255, .18), transparent 40%),
    rgba(2, 8, 16, .82) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
}

.player-modal-card {
  width: min(1080px, calc(100% - 28px)) !important;
  max-height: min(90vh, 980px) !important;
  overflow: auto;
  border: 1px solid var(--lb-line) !important;
  border-top: 2px solid var(--lb-cyan) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(16, 31, 54, .99), rgba(5, 14, 27, .99)) !important;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .62), 0 0 42px rgba(0, 102, 255, .12) !important;
  animation: playerDashboardIn .32s cubic-bezier(.2, .85, .3, 1) both;
}

.player-modal-close {
  top: 13px !important;
  right: 13px !important;
  z-index: 5;
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(75, 133, 194, .3) !important;
  border-radius: 10px !important;
  color: #b8c8db !important;
  background: rgba(5, 15, 28, .82) !important;
}

.player-modal-header {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  padding: 28px 64px 28px 28px !important;
  border-bottom: 1px solid rgba(75, 133, 194, .18);
  background:
    radial-gradient(circle at 12% 50%, rgba(0, 229, 255, .12), transparent 24%),
    linear-gradient(110deg, rgba(0, 102, 255, .16), transparent 62%);
}

.player-modal-header::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -110px;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(0, 229, 255, .1);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(0, 102, 255, .025);
}

.player-modal-header > * {
  position: relative;
  z-index: 1;
}

.player-modal-avatar {
  width: 126px !important;
  height: 126px !important;
  border: 1px solid rgba(0, 229, 255, .4) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #142b4b, #071526) !important;
  box-shadow: 0 0 26px rgba(0, 229, 255, .1) !important;
}

.player-modal-title h2 {
  margin: 4px 0 !important;
  color: white;
  font-size: clamp(2rem, 4vw, 3.15rem) !important;
  line-height: .95 !important;
}

.player-modal-title > small {
  color: var(--lb-cyan) !important;
  font-size: .7rem !important;
  font-weight: 700;
}

.player-rating {
  display: grid !important;
  width: 82px !important;
  height: 82px !important;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(0, 255, 163, .38) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(0, 255, 163, .12), rgba(5, 16, 29, .96)) !important;
  box-shadow: 0 0 26px rgba(0, 255, 163, .1);
}

.player-rating span {
  color: var(--lb-teal) !important;
  font-family: "Rajdhani", sans-serif;
  font-size: 1.8rem !important;
}

.player-club-strip {
  margin: 16px 20px 0 !important;
  border: 1px solid rgba(75, 133, 194, .22) !important;
  border-radius: 12px !important;
  background: rgba(7, 18, 33, .72) !important;
}

.club-strip-logo {
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .95) !important;
}

.player-profile-panel,
.season-context-panel,
.season-total-grid,
.player-stat-grid {
  gap: 10px !important;
  padding-inline: 20px !important;
}

.player-profile-panel article,
.season-context-panel > div,
.player-stat-tile {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(75, 133, 194, .2) !important;
  border-radius: 11px !important;
  background: rgba(7, 18, 33, .68) !important;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

.player-profile-panel article:hover,
.season-context-panel > div:hover,
.player-stat-tile:hover {
  border-color: rgba(0, 229, 255, .32) !important;
  background: rgba(0, 102, 255, .07) !important;
  transform: translateY(-2px);
}

.market-profile-tile {
  border-color: rgba(0, 255, 163, .28) !important;
  background: rgba(0, 255, 163, .055) !important;
}

.market-profile-tile strong {
  color: var(--lb-teal) !important;
}

.player-season-total-card,
.player-recent-card,
.player-stat-columns > section {
  margin-inline: 20px !important;
  border: 1px solid rgba(75, 133, 194, .2) !important;
  border-radius: 13px !important;
  background: rgba(6, 17, 31, .66) !important;
}

.player-season-total-card > header,
.player-recent-card > header,
.player-stat-columns > section > h3 {
  border-bottom: 1px solid rgba(75, 133, 194, .16) !important;
  background: rgba(4, 13, 25, .28);
  font-family: "Rajdhani", sans-serif;
}

.player-stat-columns {
  gap: 12px !important;
  padding: 0 20px 24px !important;
}

.player-stat-columns > section {
  margin: 0 !important;
}

/* =========================================================
   LiveBall motion system
   ========================================================= */

body::after {
  opacity: .72 !important;
  background:
    radial-gradient(520px circle at var(--mx, 50vw) var(--my, 16vh), rgba(0, 229, 255, .08), transparent 62%),
    radial-gradient(720px circle at calc(var(--mx, 50vw) * .45) calc(var(--my, 16vh) * .3), rgba(0, 102, 255, .055), transparent 68%) !important;
  transition: background .18s linear;
}

.ambient-layer {
  opacity: .4 !important;
  will-change: transform, opacity;
}

.ambient-layer-one {
  inset: -25vh -20vw auto !important;
  height: 72vh !important;
  background:
    conic-gradient(from 215deg at 46% 28%, transparent 0 16%, rgba(0, 102, 255, .16) 24%, transparent 34% 58%, rgba(0, 229, 255, .11) 68%, transparent 78%) !important;
  filter: blur(54px) !important;
  animation: brandAuroraOne 18s ease-in-out infinite alternate !important;
}

.ambient-layer-two {
  inset: auto -18vw -28vh 10vw !important;
  height: 65vh !important;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 255, 163, .11), transparent 58%),
    radial-gradient(ellipse at 80% 40%, rgba(0, 102, 255, .14), transparent 56%) !important;
  filter: blur(64px) !important;
  animation: brandAuroraTwo 23s ease-in-out infinite alternate !important;
}

.ultra-orb {
  opacity: .38 !important;
  mix-blend-mode: screen;
  will-change: transform;
}

.ultra-orb-a {
  background: radial-gradient(circle at 35% 35%, rgba(0, 255, 163, .2), rgba(0, 102, 255, .05) 48%, transparent 72%) !important;
  animation: orbRouteA 16s ease-in-out infinite !important;
}

.ultra-orb-b {
  background: radial-gradient(circle at 55% 45%, rgba(0, 229, 255, .18), rgba(0, 102, 255, .05) 52%, transparent 74%) !important;
  animation: orbRouteB 19s ease-in-out infinite !important;
}

.ultra-orb-c {
  background: radial-gradient(circle at 45% 45%, rgba(0, 102, 255, .15), rgba(0, 255, 163, .04) 54%, transparent 74%) !important;
  animation: orbRouteC 22s ease-in-out infinite !important;
}

.stadium-beams {
  opacity: .66 !important;
  perspective: 900px;
}

.stadium-beams span {
  width: 12vw !important;
  min-width: 90px;
  height: 78vh !important;
  transform-origin: 50% 0;
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  background: linear-gradient(to bottom, rgba(0, 229, 255, .17), rgba(0, 102, 255, .045) 42%, transparent 84%) !important;
  filter: blur(2px);
  will-change: transform, opacity;
  animation: brandedBeam 12s ease-in-out infinite !important;
}

.stadium-beams span:nth-child(1) { --beam-x: -4vw; --beam-x2: 4vw; --beam-r: 14deg; --beam-r2: -8deg; animation-delay: -1s !important; }
.stadium-beams span:nth-child(2) { --beam-x: 5vw; --beam-x2: -5vw; --beam-r: -10deg; --beam-r2: 6deg; animation-delay: -5.5s !important; }
.stadium-beams span:nth-child(3) { --beam-x: -3vw; --beam-x2: 3vw; --beam-r: 9deg; --beam-r2: -5deg; animation-delay: -8s !important; }
.stadium-beams span:nth-child(4) { --beam-x: 4vw; --beam-x2: -4vw; --beam-r: -15deg; --beam-r2: 8deg; animation-delay: -3s !important; }

.score-sparks {
  opacity: .8 !important;
}

.score-sparks i {
  width: 2px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(to top, transparent, var(--lb-cyan)) !important;
  box-shadow: 0 0 9px rgba(0, 229, 255, .5) !important;
  will-change: transform, opacity;
  animation: brandedParticle 9s linear infinite !important;
}

.score-sparks i:nth-child(2n) {
  height: 11px !important;
  background: linear-gradient(to top, transparent, var(--lb-teal)) !important;
  animation-duration: 12s !important;
}

.score-sparks i:nth-child(3n) {
  animation-duration: 15s !important;
}

.uikit-match-card::after,
.table-card::after,
.feed-stat-card::after {
  content: "";
  position: absolute;
  top: -45%;
  left: -35%;
  width: 24%;
  height: 190%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, .09), transparent);
  transform: rotate(16deg) translateX(-160%);
  opacity: 0;
}

.uikit-match-card:hover::after,
.table-card:hover::after,
.feed-stat-card:hover::after {
  opacity: 1;
  animation: interactiveGlint .8s ease-out both;
}

.uikit-match-card,
.table-card,
.feed-stat-card {
  position: relative;
}

.hero-card {
  isolation: isolate;
}

.hero-card::after {
  content: "";
  position: absolute;
  inset: -80% auto -80% -30%;
  z-index: -1;
  width: 28%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, .09), transparent);
  transform: rotate(16deg);
  animation: heroEnergyPass 9s ease-in-out infinite;
}

@keyframes profileOrbit {
  0% { transform: translate(-25%, -50%) rotate(0deg) scale(.96); opacity: .55; }
  50% { transform: translate(-25%, -50%) rotate(180deg) scale(1.05); opacity: .9; }
  100% { transform: translate(-25%, -50%) rotate(360deg) scale(.96); opacity: .55; }
}

@keyframes profileSweep {
  0%, 62% { transform: translateX(-130%); opacity: 0; }
  72% { opacity: .7; }
  90%, 100% { transform: translateX(130%); opacity: 0; }
}

@keyframes playerDashboardIn {
  from { opacity: 0; transform: translateY(20px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes brandAuroraOne {
  0% { transform: translate3d(-5vw, -2vh, 0) rotate(-4deg) scale(.96); opacity: .28; }
  100% { transform: translate3d(7vw, 5vh, 0) rotate(8deg) scale(1.08); opacity: .52; }
}

@keyframes brandAuroraTwo {
  0% { transform: translate3d(6vw, 3vh, 0) rotate(4deg) scale(1.05); opacity: .3; }
  100% { transform: translate3d(-8vw, -5vh, 0) rotate(-7deg) scale(.95); opacity: .48; }
}

@keyframes orbRouteA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.92); }
  35% { transform: translate3d(8vw, -7vh, 0) scale(1.06); }
  68% { transform: translate3d(3vw, 9vh, 0) scale(.98); }
}

@keyframes orbRouteB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  42% { transform: translate3d(-10vw, 8vh, 0) scale(1.1); }
  74% { transform: translate3d(-4vw, -6vh, 0) scale(.94); }
}

@keyframes orbRouteC {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.96); }
  50% { transform: translate3d(-6vw, -12vh, 0) scale(1.08); }
}

@keyframes brandedBeam {
  0%, 100% { transform: translate3d(var(--beam-x), -6vh, 0) rotate(var(--beam-r)) rotateX(8deg); opacity: .16; }
  45% { transform: translate3d(var(--beam-x2), 1vh, 0) rotate(var(--beam-r2)) rotateX(-3deg); opacity: .58; }
  72% { opacity: .3; }
}

@keyframes brandedParticle {
  0% { transform: translate3d(0, 12vh, 0) scaleY(.45); opacity: 0; }
  12% { opacity: .72; }
  55% { transform: translate3d(18px, -42vh, 0) scaleY(1); opacity: .5; }
  100% { transform: translate3d(-12px, -104vh, 0) scaleY(.7); opacity: 0; }
}

@keyframes interactiveGlint {
  from { transform: rotate(16deg) translateX(-160%); }
  to { transform: rotate(16deg) translateX(720%); }
}

@keyframes heroEnergyPass {
  0%, 65% { transform: rotate(16deg) translateX(-180%); opacity: 0; }
  74% { opacity: 1; }
  92%, 100% { transform: rotate(16deg) translateX(650%); opacity: 0; }
}

@media (max-width: 760px) {
  .premium-team-hero {
    grid-template-columns: auto minmax(0, 1fr) !important;
    min-height: 180px;
  }

  .team-hero-actions {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: stretch !important;
    width: 100%;
  }

  .team-value-badge {
    text-align: left;
  }

  .player-modal-card {
    width: calc(100% - 14px) !important;
    max-height: 94vh !important;
    border-radius: 14px !important;
  }

  .player-modal-header {
    grid-template-columns: 86px minmax(0, 1fr) !important;
    min-height: 150px;
    padding: 20px 52px 20px 16px !important;
  }

  .player-modal-avatar {
    width: 86px !important;
    height: 86px !important;
  }

  .player-modal-title {
    min-width: 0;
  }

  .player-modal-title h2 {
    display: block !important;
    overflow: visible !important;
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
    line-height: 1 !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .player-modal-title > small {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .player-rating {
    grid-column: 1 / -1;
    width: auto !important;
    height: auto !important;
    padding: 8px 12px;
    border-radius: 10px !important;
  }

  .player-rating span {
    font-size: 1.25rem !important;
  }

  .player-club-strip,
  .player-season-total-card,
  .player-recent-card {
    margin-inline: 10px !important;
  }

  .player-profile-panel,
  .season-context-panel,
  .season-total-grid,
  .player-stat-grid {
    padding-inline: 10px !important;
  }

  .player-stat-columns {
    padding-inline: 10px !important;
  }

  .stadium-beams {
    opacity: .24 !important;
  }

  .score-sparks i:nth-child(n+4) {
    display: none;
  }

  .ambient-layer {
    opacity: .24 !important;
  }
}

@media (max-width: 500px) {
  .premium-team-hero {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 13px !important;
    padding: 18px 14px !important;
  }

  .premium-team-hero > img {
    width: 72px !important;
    height: 72px !important;
    padding: 8px !important;
  }

  .team-hero-copy h2 {
    font-size: 1.85rem !important;
  }

  .team-profile-tags span:nth-child(2) {
    display: none;
  }

  .squad-row-pro {
    min-height: 66px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-layer,
  .ultra-orb,
  .stadium-beams span,
  .score-sparks i,
  .premium-team-hero::before,
  .premium-team-hero::after,
  .hero-card::after {
    animation: none !important;
  }
}


/* =========================================================
   LiveBall UI Kit Style Integration
   Referentie: aangeleverde branding/style board
   ========================================================= */
:root {
  --brand-bg: #0b1220;
  --brand-panel: #0f1a2e;
  --brand-panel-2: #13213a;
  --brand-blue: #0a6cff;
  --brand-cyan: #00e6ff;
  --brand-teal: #1de9b6;
  --brand-gray: #8b97a8;
}

body {
  background:
    radial-gradient(circle at 18% 0%, rgba(0, 230, 255, 0.11), transparent 22rem),
    radial-gradient(circle at 94% 4%, rgba(10, 108, 255, 0.16), transparent 24rem),
    radial-gradient(circle at 50% 120%, rgba(29, 233, 182, 0.06), transparent 40rem),
    linear-gradient(180deg, #08111f 0%, #07101d 42%, #08101b 100%) !important;
}

.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 12px 18px;
  border-radius: 22px;
  border: 1px solid rgba(31, 97, 206, 0.28);
  background:
    linear-gradient(180deg, rgba(10, 18, 32, 0.92), rgba(12, 25, 44, 0.88));
  box-shadow:
    0 16px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(0, 230, 255, 0.03);
}

.top-linkbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.top-linkbar a {
  position: relative;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  font-size: .96rem;
  font-weight: 600;
  padding: 12px 14px;
  border-radius: 14px;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.top-linkbar a:hover {
  color: #fff;
  background: rgba(255,255,255,.045);
  transform: translateY(-1px);
}
.top-linkbar a.active {
  color: #fff;
}
.top-linkbar a.active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 5px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan));
  box-shadow: 0 0 14px rgba(0,230,255,.45);
}

.top-actions {
  gap: 10px;
}
.top-icon-button,
.top-login-button {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(20, 32, 56, .96), rgba(12, 21, 39, .92));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.top-icon-button {
  width: 42px;
  height: 42px;
  font-size: 1.16rem;
}
.top-login-button {
  padding: 0 16px;
  height: 42px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--brand-blue), #1979ff);
  border-color: rgba(10,108,255,.55);
}
.top-icon-button:hover,
.top-login-button:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 230, 255, 0.26);
}
.top-login-button:hover {
  background: linear-gradient(135deg, #1b7dff, var(--brand-cyan));
}
.status-pill {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border-radius: 14px;
  padding: 0 14px;
  color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(20, 32, 56, .96), rgba(12, 21, 39, .92));
}

.brand-logo {
  height: 58px;
  max-width: 300px;
}
.brand-copy {
  display: none;
}

.sidebar {
  gap: 14px;
}
.nav-card,
.panel {
  border-radius: 20px !important;
  border: 1px solid rgba(28, 70, 150, .28) !important;
  background: linear-gradient(180deg, rgba(11, 22, 39, .93), rgba(10, 18, 32, .90)) !important;
}
.nav-card {
  padding: 10px;
}
.nav-card a {
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  font-weight: 700;
}
.nav-card a span { opacity: .96; }
.nav-card a:hover {
  background: rgba(255,255,255,.045);
  border-color: rgba(0,230,255,.10);
  transform: none;
}
.nav-card a.active,
.bottom-nav a.active {
  background: linear-gradient(135deg, rgba(10,108,255,.92), rgba(31,129,255,.82)) !important;
  border-color: rgba(94,169,255,.34) !important;
  color: #fff !important;
  box-shadow:
    0 10px 24px rgba(10,108,255,.25),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.nav-card a.active::before,
.bottom-nav a.active::before {
  display: none !important;
}

.panel h2,
.panel-title-row h2 {
  color: var(--brand-cyan);
  font-size: 1rem;
  letter-spacing: .02em;
}
.helper-text,
.field-label,
.brand-copy small {
  color: var(--brand-gray);
}

.hero-card {
  grid-template-columns: 1fr auto;
  min-height: 128px;
  border-radius: 24px !important;
  border: 1px solid rgba(28, 70, 150, .28) !important;
  background:
    radial-gradient(circle at 10% 18%, rgba(0, 230, 255, .08), transparent 26%),
    linear-gradient(180deg, rgba(11, 22, 39, .96), rgba(10, 18, 32, .92)) !important;
}
.hero-card::before,
.hero-card::after {
  opacity: .45 !important;
}
.eyebrow {
  color: var(--brand-cyan) !important;
  font-size: .84rem;
  letter-spacing: .16em;
  font-weight: 800;
}
.hero-card h1 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 850;
  letter-spacing: -.05em;
}
#pageSubtitle {
  max-width: 72ch;
  color: rgba(255,255,255,.70);
}
.hero-stat {
  min-width: 110px;
  min-height: 100px;
  border-radius: 20px;
  border: 1px solid rgba(0,230,255,.18);
  background: linear-gradient(180deg, rgba(16, 33, 58, .86), rgba(10, 18, 32, .92));
}
.hero-stat span {
  color: #fff;
}

.message {
  border-radius: 20px;
}
.cards-grid {
  gap: 18px;
}
.league-block {
  display: grid;
  gap: 12px;
}
.league-header {
  margin-bottom: 2px;
}
.league-title {
  color: var(--brand-cyan);
  font-weight: 800;
  letter-spacing: -.02em;
}
.league-title-link {
  border-radius: 999px;
  border: 1px solid rgba(0,230,255,.12);
  background: rgba(255,255,255,.03);
}
.league-title-link:hover {
  border-color: rgba(0,230,255,.28);
}

.match-card {
  border-radius: 22px !important;
  border: 1px solid rgba(28, 70, 150, .30) !important;
  background:
    radial-gradient(circle at 0% 50%, rgba(0, 230, 255, .06), transparent 32%),
    radial-gradient(circle at 100% 0%, rgba(10, 108, 255, .10), transparent 26%),
    linear-gradient(180deg, rgba(11, 22, 39, .98), rgba(10, 18, 32, .94)) !important;
  overflow: hidden;
}
.match-card::before { opacity: .22 !important; }
.match-card .match-card-top {
  gap: 10px;
  align-items: center;
}
.match-card .league-chip {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
  color: rgba(255,255,255,.92);
  font-weight: 700;
}
.match-card .league-chip:hover { border-color: rgba(0,230,255,.20); }
.match-badges {
  gap: 8px;
  flex-wrap: wrap;
}
.teams {
  gap: 12px;
}
.team-name {
  font-size: 1.02rem;
  font-weight: 760;
}
.score {
  min-width: 56px;
  justify-self: end;
  text-align: center;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(10,108,255,.38);
  background: linear-gradient(180deg, rgba(13, 33, 62, .96), rgba(11, 23, 41, .96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -.04em;
}
.match-card.is-live .score {
  border-color: rgba(0,230,255,.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(0,230,255,.04),
    0 0 20px rgba(0,230,255,.08);
}
.match-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.match-meta span,
.match-meta time,
.match-meta strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  text-align: center;
}
.match-card.is-live::after {
  width: 5px !important;
  top: 14px !important;
  bottom: 14px !important;
  background: linear-gradient(180deg, #ff3d64, #ff6f3d) !important;
}

.table-card,
.detail-card,
.favorite-card,
.team-profile-card,
.lineup-pitch-card,
.player-modal-card,
.api-addon-card,
.coach-card,
.transfer-card,
.bracket-card {
  border-radius: 22px !important;
  border: 1px solid rgba(28, 70, 150, .28) !important;
  background: linear-gradient(180deg, rgba(11, 22, 39, .96), rgba(10, 18, 32, .92)) !important;
}

.bottom-nav {
  border-radius: 20px 20px 0 0;
  border-top: 1px solid rgba(28, 70, 150, .28) !important;
  background: linear-gradient(180deg, rgba(10, 18, 32, .98), rgba(8, 15, 27, .96)) !important;
}
.bottom-nav a {
  border-radius: 14px;
}

/* Brand page closer to the design board */
.brand-grid {
  gap: 18px;
}
.brand-card {
  border-radius: 22px !important;
  border: 1px solid rgba(28, 70, 150, .28) !important;
  background: linear-gradient(180deg, rgba(11, 22, 39, .98), rgba(10, 18, 32, .94)) !important;
}
.brand-card header {
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(0,230,255,.14);
}
.brand-tagline-big {
  font-size: clamp(1.65rem, 4vw, 2.3rem);
}
.brand-swatch-chip {
  border-radius: 12px;
}
.brand-preview img {
  border-radius: 20px;
}

@media (max-width: 1180px) {
  .topbar {
    grid-template-columns: auto 1fr;
  }
  .top-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
  .top-linkbar {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }
}

@media (max-width: 820px) {
  .top-linkbar {
    display: none;
  }
  .topbar {
    grid-template-columns: auto auto;
  }
  .top-login-button { display: none; }
  .hero-card {
    grid-template-columns: 1fr;
  }
  .hero-stat {
    min-height: 76px;
    width: fit-content;
  }
}

@media (max-width: 640px) {
  .brand-logo {
    height: 48px;
    max-width: 220px;
  }
  .topbar {
    padding: 10px 12px;
  }
  .status-pill {
    display: none;
  }
  .team-row {
    grid-template-columns: 32px minmax(0, 1fr) auto minmax(50px, auto) !important;
    min-height: 48px;
  }
  .score {
    min-width: 50px;
    font-size: 1.35rem;
  }
  .match-meta {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   LiveBall timeline/statistics responsive fix
   - timeline newest -> oldest is handled in JS
   - no internal scrollbars on timeline/stats
   ========================================================= */
.match-priority-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 18px;
  align-items: start;
}

.timeline-priority-card,
.stats-priority-card {
  min-width: 0;
  overflow: visible !important;
}

.timeline-priority-card .event-list,
.stats-priority-card .stat-list,
.stats-priority-card .stats-list,
.stats-priority-card .stat-grid,
.table-card .event-list,
.table-card .stat-list {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  scrollbar-width: none;
}

.timeline-priority-card .event-list::-webkit-scrollbar,
.stats-priority-card .stat-list::-webkit-scrollbar,
.stats-priority-card .stats-list::-webkit-scrollbar,
.stats-priority-card .stat-grid::-webkit-scrollbar {
  display: none;
}

.timeline-priority-card header span {
  white-space: normal;
  text-align: right;
  color: var(--brand-cyan);
}

.timeline-priority-card .event-list {
  display: grid;
  gap: 10px;
}

.timeline-priority-card .event-item,
.timeline-priority-card .timeline-event,
.timeline-priority-card .event-row {
  width: 100%;
}

.stats-priority-card .stat-list {
  display: grid;
  gap: 10px;
}

.stats-priority-card .stat-row,
.stats-priority-card .stat-line {
  min-width: 0;
}

.stats-priority-card header,
.timeline-priority-card header {
  gap: 12px;
  align-items: flex-start;
}

@media (max-width: 1080px) {
  .match-priority-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .match-priority-grid {
    gap: 14px;
  }

  .timeline-priority-card,
  .stats-priority-card {
    padding: 14px !important;
  }

  .timeline-priority-card header,
  .stats-priority-card header {
    display: grid;
    grid-template-columns: 1fr;
  }

  .timeline-priority-card header span,
  .stats-priority-card header span {
    text-align: left;
  }
}


/* LiveBall no-flash background refresh fix */
#app.silent-update,
#app.silent-update * {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

#app.silent-update .match-card,
#app.silent-update .table-card,
#app.silent-update .timeline-event,
#app.silent-update .event-item,
#app.silent-update .stat-row,
#app.silent-update .team-row {
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}


/* =========================================================
   LiveBall Actual UI Kit Restyle
   De branding uit het UI kit board zit nu in de echte website.
   ========================================================= */
:root {
  --lb-bg: #0b1220;
  --lb-bg-2: #0f1a2e;
  --lb-bg-3: #13213a;
  --lb-blue: #0a6cff;
  --lb-cyan: #00e6ff;
  --lb-teal: #1de9b6;
  --lb-gray: #8b97a8;
  --lb-white: #ffffff;
  --lb-red: #ff4057;
}

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 230, 255, .12), transparent 26rem),
    radial-gradient(circle at 92% 4%, rgba(10, 108, 255, .18), transparent 30rem),
    radial-gradient(circle at 52% 108%, rgba(29, 233, 182, .06), transparent 42rem),
    linear-gradient(180deg, #081220 0%, #08101d 48%, #07101c 100%) !important;
}

.app-shell {
  width: min(1420px, calc(100% - 36px));
}

.topbar {
  grid-template-columns: auto minmax(320px, 1fr) auto !important;
  gap: 18px;
  border-radius: 22px !important;
  min-height: 84px;
  border: 1px solid rgba(64, 118, 215, .26) !important;
  background:
    linear-gradient(180deg, rgba(10, 19, 34, .96), rgba(9, 18, 32, .92)) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.brand-logo {
  height: 58px !important;
  max-width: 310px !important;
  filter: drop-shadow(0 0 16px rgba(0,230,255,.16)) drop-shadow(0 12px 24px rgba(0,0,0,.25));
}

.top-linkbar {
  justify-content: center;
  gap: 2px;
}

.top-linkbar a {
  font-size: .95rem;
  font-weight: 650;
  color: rgba(255,255,255,.74);
  padding: 13px 15px;
  border-radius: 12px;
}

.top-linkbar a.active::after {
  bottom: 4px;
  height: 3px;
  left: 18px;
  right: 18px;
  background: linear-gradient(90deg, var(--lb-blue), var(--lb-cyan));
}

.status-pill {
  min-height: 42px;
  background: linear-gradient(180deg, #152238, #0f1a2e) !important;
  border-radius: 13px;
}

.top-icon-button {
  border-radius: 13px;
  background: linear-gradient(180deg, #1a2740, #111c30);
}

.top-login-button {
  border-radius: 13px;
  background: linear-gradient(135deg, #0a6cff, #047bff);
  box-shadow: 0 12px 28px rgba(10,108,255,.25);
}

.layout {
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 22px;
}

.nav-card {
  padding: 12px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(12, 23, 40, .98), rgba(9, 18, 32, .94)) !important;
  border: 1px solid rgba(61, 116, 206, .25) !important;
}

.nav-card a {
  min-height: 48px;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  font-weight: 750;
  color: rgba(255,255,255,.70) !important;
}

.nav-card a.active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(10,108,255,.98), rgba(24,113,238,.85)) !important;
  border-color: rgba(117, 177, 255, .35) !important;
}

.panel {
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(12, 23, 40, .95), rgba(9, 18, 32, .91)) !important;
  border: 1px solid rgba(61, 116, 206, .22) !important;
}

.panel h2,
.panel-title-row h2 {
  color: var(--lb-cyan) !important;
  text-transform: uppercase;
  font-size: .86rem !important;
  letter-spacing: .08em;
}

.hero-card {
  min-height: 142px;
  border-radius: 24px !important;
  padding: 26px 28px !important;
  border: 1px solid rgba(61, 116, 206, .24) !important;
  background:
    radial-gradient(circle at 14% 10%, rgba(0,230,255,.10), transparent 26%),
    radial-gradient(circle at 86% 0%, rgba(10,108,255,.18), transparent 32%),
    linear-gradient(180deg, rgba(13, 25, 44, .98), rgba(9, 18, 32, .94)) !important;
}

.hero-card h1 {
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  font-weight: 900;
}

.eyebrow {
  color: var(--lb-cyan) !important;
  letter-spacing: .18em !important;
}

.hero-stat {
  min-width: 118px;
  min-height: 104px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(18, 34, 58, .92), rgba(10, 18, 32, .92)) !important;
  border: 1px solid rgba(0,230,255,.16);
}

.cards-grid {
  gap: 20px !important;
}

.league-block {
  display: grid;
  gap: 13px;
}

.league-title-link {
  padding: 9px 13px;
  border-radius: 999px;
  color: var(--lb-cyan);
  border: 1px solid rgba(0,230,255,.13);
  background: rgba(255,255,255,.025);
}

.uikit-match-card {
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px;
  padding: 18px 20px 16px !important;
  min-height: 190px;
  border-radius: 24px !important;
  overflow: hidden;
  border: 1px solid rgba(61, 116, 206, .28) !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(0,230,255,.07), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(10,108,255,.11), transparent 28%),
    linear-gradient(180deg, rgba(13, 25, 44, .99), rgba(9, 18, 32, .95)) !important;
}

.uikit-match-card:hover {
  border-color: rgba(0,230,255,.28) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 64px rgba(0,0,0,.40), 0 0 28px rgba(0,108,255,.08) !important;
}

.uikit-match-card.is-live {
  border-color: rgba(255, 64, 87, .36) !important;
}

.uikit-match-card.is-live::after {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, #ff4057, #ff7a45);
  box-shadow: 0 0 18px rgba(255,64,87,.6);
}

.uikit-match-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.uikit-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.uikit-match-body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(128px, 170px) minmax(150px, 1fr);
  align-items: center;
  gap: 18px;
}

.uikit-team {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  border-radius: 18px;
  transition: background .18s ease, transform .18s ease;
}

.uikit-team:hover {
  background: rgba(255,255,255,.04);
  transform: translateY(-1px);
}

.uikit-team img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 50%;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.32));
}

.uikit-team span {
  max-width: 100%;
  text-align: center;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uikit-team .favorite-button,
.uikit-team [data-favorite] {
  position: absolute;
  transform: translate(42px, -30px);
}

.uikit-score-block {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.uikit-score-block strong {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 128px;
  min-height: 62px;
  padding: 8px 18px;
  border-radius: 18px;
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 950;
  letter-spacing: .02em;
  background:
    radial-gradient(circle at 50% 0%, rgba(0,230,255,.17), transparent 65%),
    linear-gradient(180deg, rgba(12,38,78,.96), rgba(8,20,44,.96));
  border: 1px solid rgba(10,108,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 16px 32px rgba(0,0,0,.22);
}

.uikit-score-block small {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lb-cyan);
  font-size: .95rem;
  font-weight: 850;
}

.uikit-score-block .live-time,
.uikit-score-block .status-kickoff,
.uikit-score-block .status-ft,
.uikit-score-block .status-ns {
  margin: 0;
}

.uikit-match-footer {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 10px;
  opacity: .88;
}

.uikit-match-footer span {
  display: inline-flex;
  min-width: 0;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 12px;
  color: rgba(255,255,255,.66);
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.055);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.league-chip {
  border-radius: 999px !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.92) !important;
  padding: 9px 12px !important;
  font-weight: 760 !important;
}

.league-dot {
  background: var(--lb-cyan) !important;
  box-shadow: 0 0 14px rgba(0,230,255,.6) !important;
}

.table-card header h2,
.detail-card header h2,
.lineup-pitch-card header h2 {
  color: var(--lb-cyan);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .9rem;
}

.timeline-event,
.event-item,
.stat-row,
.prediction-card,
.odds-card,
.player-modal-card,
.team-kpi-grid article {
  border-radius: 18px !important;
  border: 1px solid rgba(61, 116, 206, .16) !important;
  background:
    linear-gradient(180deg, rgba(16, 33, 58, .72), rgba(10, 18, 32, .72)) !important;
}

.scoreboard,
.match-detail .scoreboard {
  border-radius: 28px !important;
  border: 1px solid rgba(61,116,206,.25) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(0,230,255,.10), transparent 42%),
    linear-gradient(180deg, rgba(13, 25, 44, .98), rgba(9, 18, 32, .95)) !important;
}

.big-score,
.score-line {
  color: #fff;
  text-shadow: 0 0 24px rgba(0,230,255,.12);
}

.matchmap-wrap,
.matchmap-stage,
.lineup-pitch {
  border-color: rgba(0,230,255,.14) !important;
}

@media (max-width: 1180px) {
  .topbar {
    grid-template-columns: auto 1fr !important;
  }
  .top-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
  .top-linkbar {
    justify-content: flex-start;
    overflow-x: auto;
  }
}

@media (max-width: 920px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
  }
  .uikit-match-body {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .uikit-team {
    grid-template-columns: 44px minmax(0,1fr) auto;
    justify-items: start;
    width: 100%;
  }
  .uikit-team img {
    width: 44px;
    height: 44px;
  }
  .uikit-team span {
    text-align: left;
  }
  .uikit-team .favorite-button,
  .uikit-team [data-favorite] {
    position: static;
    transform: none;
  }
  .uikit-score-block {
    order: -1;
  }
  .uikit-score-block strong {
    min-width: 150px;
  }
}

@media (max-width: 680px) {
  .top-linkbar {
    display: none;
  }
  .topbar {
    grid-template-columns: 1fr auto !important;
  }
  .top-actions {
    grid-column: auto;
  }
  .top-icon-button,
  .top-login-button {
    display: none;
  }
  .brand-logo {
    height: 48px !important;
    max-width: 220px !important;
  }
  .uikit-match-card {
    padding: 14px !important;
    min-height: unset;
  }
  .uikit-match-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .uikit-match-footer {
    grid-template-columns: 1fr;
  }
  .uikit-badges {
    justify-content: flex-start;
  }
}


/* LiveBall all substitutes fix */
.bench-grid {
  align-items: start;
}

.bench-card h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.bench-card h3 small {
  color: var(--lb-gray, var(--muted));
  font-size: 0.78rem;
  font-weight: 750;
}

.bench-list {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  display: grid;
  gap: 9px;
}

.bench-player {
  min-width: 0;
}

@media (min-width: 980px) {
  .bench-list {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }
}

@media (max-width: 640px) {
  .bench-card h3 {
    align-items: flex-start;
  }
}


/* =========================================================
   LiveBall Safe Mobile Performance Pack
   Veilige versie: behoudt wedstrijd-rendering op mobiel.
   ========================================================= */

/* Desktop blijft rijk. Mobiel krijgt lichtere effecten zonder de app-logica te raken. */
@media (max-width: 820px), (pointer: coarse) {
  html.mobile-perf *,
  html.mobile-perf *::before,
  html.mobile-perf *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 100ms !important;
  }

  .stadium-beams,
  .score-sparks,
  .ultra-orb,
  .ambient-layer {
    display: none !important;
  }

  .grain-layer {
    opacity: 0.04 !important;
  }

  .stadium-glow {
    opacity: 0.35 !important;
    filter: none !important;
  }

  body::after {
    opacity: 0.22 !important;
    animation: none !important;
  }

  .topbar,
  .nav-card,
  .panel,
  .hero-card,
  .match-card,
  .table-card,
  .message,
  .lineup-pitch-card,
  .favorite-card,
  .team-card,
  .search-card,
  .bracket-card,
  .api-addon-card,
  .scoreboard,
  .bottom-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
      0 12px 28px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  .brand-logo {
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.25)) !important;
  }

  .ghost-logo,
  .match-ambient {
    display: none !important;
  }

  .match-card::before,
  .match-card::after,
  .hero-card::before,
  .hero-card::after,
  .nav-card::before,
  .panel::before,
  .table-card::before {
    opacity: 0.10 !important;
    filter: none !important;
  }

  .match-card:hover,
  .uikit-match-card:hover,
  .team-row:hover,
  .uikit-team:hover,
  .nav-card a:hover,
  .mini-button:hover,
  .ghost-button:hover,
  .top-icon-button:hover,
  .top-login-button:hover {
    transform: none !important;
  }

  .live-mini-dot i,
  .status-pill::before,
  .live-time i {
    animation: none !important;
  }
}

/* Alleen niet-kritieke zware detailblokken offscreen optimaliseren.
   Matchcards zelf blijven normaal renderen zodat Safari/telefoon niets verbergt. */
@supports (content-visibility: auto) {
  .table-card,
  .panel,
  .bench-card,
  .lineup-pitch-card {
    content-visibility: auto;
    contain-intrinsic-size: 1px 260px;
  }

  .match-card,
  .cards-grid,
  #app {
    content-visibility: visible !important;
    contain: none !important;
  }
}

@media (max-width: 520px) {
  .app-shell {
    width: min(100% - 18px, 1420px) !important;
    padding-top: 10px;
  }

  .topbar {
    border-radius: 18px !important;
    min-height: 64px !important;
  }

  .layout {
    margin-top: 12px;
    gap: 12px;
  }

  .hero-card {
    min-height: 110px !important;
    padding: 18px !important;
  }

  .hero-card h1 {
    font-size: clamp(1.55rem, 8vw, 2.15rem) !important;
  }

  .cards-grid {
    gap: 12px !important;
  }

  .uikit-match-card,
  .match-card,
  .table-card,
  .panel {
    border-radius: 18px !important;
  }

  .uikit-match-card {
    gap: 12px !important;
  }

  .uikit-score-block strong {
    min-height: 54px !important;
    font-size: clamp(1.55rem, 9vw, 2rem) !important;
  }
}


/* =========================================================
   LiveBall Top Menu + Search Layout
   Linker menu verwijderd; zoekfunctie en filters bovenin.
   ========================================================= */
.topbar-single {
  grid-template-columns: auto minmax(360px, 1fr) minmax(260px, 360px) auto !important;
  align-items: center;
}

.top-search {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto;
  gap: 8px;
  min-width: 0;
}

.top-search-input {
  width: 100%;
  height: 42px;
  border: 1px solid rgba(0,230,255,.18);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(20,32,56,.96), rgba(12,21,39,.94));
  color: #fff;
  padding: 0 14px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.top-search-input::placeholder {
  color: rgba(167,176,194,.72);
}

.top-search-input:focus {
  border-color: rgba(0,230,255,.50);
  box-shadow: 0 0 0 4px rgba(0,230,255,.10), inset 0 1px 0 rgba(255,255,255,.06);
}

.top-search-button {
  height: 42px;
  border: 1px solid rgba(10,108,255,.55);
  border-radius: 14px;
  background: linear-gradient(135deg, #0a6cff, #00a2ff);
  color: #fff;
  font-weight: 850;
  padding: 0 15px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(10,108,255,.22);
}

.top-search-button:hover {
  background: linear-gradient(135deg, #1678ff, #00e6ff);
}

.layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

.sidebar {
  display: none !important;
}

.content {
  min-width: 0;
  width: 100%;
}

.top-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(220px, .8fr) minmax(340px, 1.1fr);
  gap: 12px;
  align-items: stretch;
  margin-bottom: 0;
}

.top-filter-group {
  min-width: 0;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid rgba(61, 116, 206, .22);
  background:
    radial-gradient(circle at 10% 0%, rgba(0,230,255,.06), transparent 40%),
    linear-gradient(180deg, rgba(12,23,40,.94), rgba(9,18,32,.91));
  box-shadow: 0 12px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
}

.top-control-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--lb-cyan, #00e6ff);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .76rem;
  font-weight: 900;
}

.top-control-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.top-switch {
  flex: 0 0 auto;
  height: 42px;
  margin: 0 !important;
  padding: 0 11px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.035);
}

.top-select,
.top-date,
.top-season {
  height: 42px;
  min-width: 0;
}

.top-select {
  flex: 1 1 auto;
}

.top-season {
  width: 110px;
}

.top-date {
  width: 158px;
}

.top-mini {
  height: 42px;
  min-width: 62px;
  padding: 0 10px !important;
  border-radius: 14px !important;
}

.top-date-buttons {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 8px !important;
  margin: 0 !important;
}

.hero-card {
  margin-top: 0;
}

.bottom-nav {
  display: none !important;
}

@media (max-width: 1280px) {
  .topbar-single {
    grid-template-columns: auto minmax(260px, 1fr) minmax(220px, 320px) !important;
  }

  .top-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .top-controls {
    grid-template-columns: 1fr 1fr;
  }

  .date-top-filter {
    grid-column: 1 / -1;
  }
}

@media (max-width: 920px) {
  .topbar-single {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .brand {
    justify-content: center;
  }

  .top-linkbar {
    display: flex !important;
    justify-content: flex-start;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 4px;
  }

  .top-search {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .top-actions {
    display: none !important;
  }

  .top-controls {
    grid-template-columns: 1fr;
  }

  .date-top-filter {
    grid-column: auto;
  }

  .top-control-row {
    flex-wrap: wrap;
  }

  .top-select,
  .top-date {
    flex: 1 1 160px;
  }

  .top-date-buttons {
    flex: 1 1 100%;
  }

  .top-date-buttons .top-mini {
    flex: 1 1 0;
  }
}

@media (max-width: 560px) {
  .topbar-single {
    padding: 10px !important;
  }

  .brand-logo {
    height: 44px !important;
    max-width: 210px !important;
  }

  .top-linkbar a {
    padding: 10px 11px;
    font-size: .86rem;
    white-space: nowrap;
  }

  .top-search-input,
  .top-search-button,
  .top-select,
  .top-date,
  .top-season,
  .top-mini,
  .top-switch {
    height: 40px;
  }

  .top-search-button {
    padding: 0 12px;
  }

  .top-filter-group {
    padding: 10px;
    border-radius: 18px;
  }
}


/* =========================================================
   LiveBall Topbar Alignment Fix
   Voorkomt overlap tussen logo, menu en zoekbalk.
   ========================================================= */

.topbar.topbar-single {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) minmax(250px, 340px) !important;
  grid-template-areas: "brand nav search" !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 12px !important;
  min-height: unset !important;
  height: auto !important;
  overflow: hidden !important;
}

.topbar-single .brand {
  grid-area: brand;
  min-width: 0 !important;
  max-width: 270px;
}

.topbar-single .brand-logo {
  height: 50px !important;
  max-width: 220px !important;
  object-fit: contain;
}

.topbar-single .brand-copy {
  display: none !important;
}

.topbar-single .top-linkbar {
  grid-area: nav;
  min-width: 0 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 5px !important;
}

.topbar-single .top-linkbar::-webkit-scrollbar {
  display: none;
}

.topbar-single .top-linkbar a {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  padding: 10px 12px !important;
  line-height: 1 !important;
}

.topbar-single .top-search {
  grid-area: search;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 340px !important;
  justify-self: end !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.topbar-single .top-search-input {
  min-width: 0 !important;
}

.topbar-single .top-actions {
  display: none !important;
}

/* Net onder desktopbreedte krijgt zoeken een eigen rij, zodat niets knelt. */
@media (max-width: 1180px) {
  .topbar.topbar-single {
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas:
      "brand nav"
      "search search" !important;
    align-items: center !important;
  }

  .topbar-single .brand {
    max-width: 240px;
  }

  .topbar-single .top-linkbar {
    justify-content: flex-end !important;
  }

  .topbar-single .top-search {
    max-width: 620px !important;
    justify-self: center !important;
  }
}

/* Tablet/telefoon: alles netjes onder elkaar, menu horizontaal scrollbaar. */
@media (max-width: 760px) {
  .topbar.topbar-single {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "brand"
      "nav"
      "search" !important;
    gap: 9px !important;
    padding: 10px !important;
    border-radius: 22px !important;
  }

  .topbar-single .brand {
    justify-self: center !important;
    max-width: 100% !important;
  }

  .topbar-single .brand-logo {
    height: 44px !important;
    max-width: 210px !important;
  }

  .topbar-single .top-linkbar {
    justify-content: flex-start !important;
    width: 100% !important;
    padding-bottom: 4px !important;
  }

  .topbar-single .top-linkbar a {
    padding: 9px 11px !important;
    font-size: .85rem !important;
  }

  .topbar-single .top-search {
    max-width: none !important;
    justify-self: stretch !important;
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
}

/* Kleine telefoons: zoekknop compact zodat input ruimte houdt. */
@media (max-width: 420px) {
  .topbar-single .top-search-button {
    padding: 0 11px !important;
    min-width: 54px !important;
  }

  .topbar-single .top-search-input {
    font-size: .9rem !important;
    padding-left: 12px !important;
    padding-right: 10px !important;
  }
}


/* =========================================================
   LiveBall Full Responsive System
   Eén consistente responsive laag voor desktop, tablet en mobiel.
   ========================================================= */

:root {
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Globaal: voorkom horizontale overflow door lange namen/rijen. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

.app-shell {
  width: min(100% - max(24px, calc(var(--safe-left) + var(--safe-right) + 24px)), 1440px) !important;
  max-width: 1440px !important;
  margin-inline: auto !important;
  padding-left: max(0px, var(--safe-left)) !important;
  padding-right: max(0px, var(--safe-right)) !important;
}

.content,
.layout,
#app,
.cards-grid,
.match-priority-grid,
.team-grid,
.favorite-grid,
.search-grid,
.stats-grid,
.table-wrap,
.table-card,
.panel,
.hero-card,
.match-card,
.uikit-match-card {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Topbar: brede desktop in één rij, daarna nette rijen. */
.topbar.topbar-single {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(150px, 230px) minmax(360px, 1fr) minmax(260px, 360px) !important;
  grid-template-areas: "brand nav search" !important;
  align-items: center !important;
  gap: clamp(8px, 1vw, 14px) !important;
  overflow: visible !important;
}

.topbar-single .brand {
  grid-area: brand !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
}

.topbar-single .brand-logo {
  width: auto !important;
  max-width: min(220px, 100%) !important;
  height: clamp(42px, 4.8vw, 54px) !important;
  object-fit: contain !important;
  flex: 0 1 auto !important;
}

.topbar-single .top-linkbar {
  grid-area: nav !important;
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(4px, .6vw, 8px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 2px 2px 6px !important;
}

.topbar-single .top-linkbar::-webkit-scrollbar {
  display: none !important;
}

.topbar-single .top-linkbar a {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  white-space: nowrap !important;
  padding: clamp(9px, .9vw, 12px) clamp(10px, 1vw, 14px) !important;
  font-size: clamp(.82rem, .88vw, .95rem) !important;
}

.topbar-single .top-search {
  grid-area: search !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 380px !important;
  justify-self: end !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
}

.topbar-single .top-search-input {
  min-width: 0 !important;
  width: 100% !important;
}

.topbar-single .top-search-button {
  flex: 0 0 auto !important;
}

/* Filterbalk: vloeit automatisch mee. */
.top-controls {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1vw, 14px) !important;
  align-items: stretch !important;
}

.top-filter-group {
  min-width: 0 !important;
  max-width: 100% !important;
}

.top-control-row {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.top-select,
.top-date,
.top-season,
.input,
select,
input {
  min-width: 0 !important;
  max-width: 100% !important;
}

.top-select {
  flex: 1 1 160px !important;
}

.top-season {
  flex: 0 0 108px !important;
}

.top-date {
  flex: 1 1 155px !important;
}

.top-date-buttons {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 8px !important;
}

.top-date-buttons .top-mini,
.top-mini {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

/* Grids worden fluid i.p.v. vaste kolommen. */
.cards-grid,
.favorite-grid,
.team-grid,
.search-grid,
.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
  gap: clamp(12px, 1.4vw, 18px) !important;
}

.match-priority-grid,
.match-detail-grid,
.detail-grid,
.profile-grid,
.api-grid,
.bracket-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)) !important;
  gap: clamp(12px, 1.4vw, 18px) !important;
  align-items: start !important;
}

/* Wedstrijdkaart: veilig tegen lange teamnamen. */
.uikit-match-card,
.match-card {
  width: 100% !important;
  overflow: hidden !important;
}

.uikit-match-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(92px, auto) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(8px, 1vw, 14px) !important;
  min-width: 0 !important;
}

.uikit-team {
  min-width: 0 !important;
  max-width: 100% !important;
}

.uikit-team img {
  flex: 0 0 auto !important;
  width: clamp(34px, 4vw, 48px) !important;
  height: clamp(34px, 4vw, 48px) !important;
  object-fit: contain !important;
}

.uikit-team span,
.team-name,
.player-name,
.league-name,
.table-card td,
.table-card th,
.uikit-match-footer span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.uikit-team span {
  white-space: nowrap !important;
}

.uikit-score-block {
  min-width: 86px !important;
  max-width: 132px !important;
  justify-self: center !important;
}

.uikit-score-block strong {
  font-size: clamp(1.45rem, 3.2vw, 2.15rem) !important;
  min-width: 86px !important;
  padding-inline: clamp(10px, 1vw, 16px) !important;
}

/* Tabellen mogen horizontaal scrollen binnen hun kaart, niet de hele pagina. */
.table-card,
.panel {
  overflow: hidden !important;
}

.table-scroll,
.standings-table-wrap,
.table-wrap,
.table-card .table-body,
.table-card table {
  max-width: 100% !important;
}

.table-card table {
  width: 100% !important;
  border-collapse: collapse;
}

.table-card:has(table),
.panel:has(table) {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Timeline/statistieken/detailblokken geen interne hoogteproblemen. */
.event-list,
.stat-list,
.timeline-list,
.bench-list {
  max-height: none !important;
  overflow: visible !important;
}

/* Line-ups en banken vloeien netjes mee. */
.lineup-teams,
.bench-grid,
.lineups-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
  gap: clamp(12px, 1.2vw, 18px) !important;
}

.bench-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)) !important;
  gap: 9px !important;
}

.bench-player,
.player-row,
.team-row,
.stat-row,
.event-item,
.timeline-event {
  min-width: 0 !important;
}

/* Buttons/rijen blijven tappable en breken netjes. */
.filter-row,
.action-row,
.button-row,
.section-actions,
.league-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
}

button,
.mini-button,
.ghost-button,
.top-icon-button,
.top-login-button {
  touch-action: manipulation;
}

/* Breakpoint: normale laptops/tablets. */
@media (max-width: 1180px) {
  .topbar.topbar-single {
    grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) !important;
    grid-template-areas:
      "brand nav"
      "search search" !important;
  }

  .topbar-single .top-linkbar {
    justify-content: flex-end !important;
  }

  .topbar-single .top-search {
    width: min(100%, 680px) !important;
    max-width: 680px !important;
    justify-self: center !important;
  }

  .top-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .date-top-filter {
    grid-column: 1 / -1 !important;
  }
}

/* Breakpoint: tablets en grote telefoons. */
@media (max-width: 820px) {
  .app-shell {
    width: min(100% - 18px, 1440px) !important;
    padding-top: 10px !important;
  }

  .topbar.topbar-single {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "brand"
      "nav"
      "search" !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 22px !important;
  }

  .topbar-single .brand {
    justify-self: center !important;
  }

  .topbar-single .top-linkbar {
    justify-content: flex-start !important;
    width: 100% !important;
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 24px), transparent 100%);
    padding-inline: 14px !important;
  }

  .topbar-single .top-search {
    max-width: none !important;
    justify-self: stretch !important;
  }

  .top-controls {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .date-top-filter {
    grid-column: auto !important;
  }

  .top-control-row {
    flex-wrap: wrap !important;
  }

  .top-select,
  .top-date {
    flex: 1 1 180px !important;
  }

  .top-season {
    flex: 1 1 100px !important;
  }

  .top-date-buttons {
    flex: 1 1 100% !important;
  }

  .top-date-buttons .top-mini {
    flex: 1 1 0 !important;
  }

  .hero-card {
    padding: 18px !important;
    min-height: auto !important;
  }

  .hero-card h1 {
    font-size: clamp(1.65rem, 7.5vw, 2.4rem) !important;
    line-height: 1.04 !important;
  }

  .hero-card p {
    font-size: .95rem !important;
  }

  .cards-grid,
  .favorite-grid,
  .team-grid,
  .search-grid,
  .stats-grid,
  .match-priority-grid,
  .match-detail-grid,
  .detail-grid,
  .profile-grid,
  .api-grid,
  .bracket-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Breakpoint: telefoons. */
@media (max-width: 560px) {
  .app-shell {
    width: min(100% - 12px, 1440px) !important;
    padding-inline: max(0px, var(--safe-left)) max(0px, var(--safe-right)) !important;
  }

  .layout {
    margin-top: 10px !important;
    gap: 10px !important;
  }

  .topbar.topbar-single {
    border-radius: 18px !important;
  }

  .topbar-single .brand-logo {
    height: 40px !important;
    max-width: 188px !important;
  }

  .topbar-single .top-linkbar a {
    padding: 9px 10px !important;
    font-size: .82rem !important;
  }

  .top-search {
    grid-template-columns: minmax(0, 1fr) 58px !important;
  }

  .top-search-input,
  .top-search-button,
  .top-select,
  .top-date,
  .top-season,
  .top-mini,
  .top-switch {
    height: 40px !important;
  }

  .top-search-button {
    padding: 0 8px !important;
    font-size: .84rem !important;
  }

  .top-filter-group {
    padding: 10px !important;
    border-radius: 16px !important;
  }

  .top-control-title {
    font-size: .7rem !important;
    margin-bottom: 7px !important;
  }

  .uikit-match-card {
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .uikit-match-top,
  .uikit-match-footer {
    gap: 8px !important;
  }

  .uikit-match-body {
    grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .uikit-team {
    gap: 6px !important;
  }

  .uikit-team img {
    width: 30px !important;
    height: 30px !important;
  }

  .uikit-team span {
    font-size: .78rem !important;
    max-width: 100% !important;
  }

  .uikit-score-block {
    min-width: 78px !important;
    max-width: 78px !important;
  }

  .uikit-score-block strong {
    min-width: 78px !important;
    min-height: 48px !important;
    font-size: 1.35rem !important;
    padding-inline: 6px !important;
  }

  .uikit-score-block small {
    font-size: .68rem !important;
  }

  .league-chip,
  .country-mini,
  .popular-tag,
  .live-mini-dot {
    max-width: 100% !important;
    font-size: .68rem !important;
  }

  .panel,
  .table-card,
  .hero-card,
  .message,
  .lineup-pitch-card,
  .bench-card {
    border-radius: 18px !important;
  }

  .bench-list {
    grid-template-columns: 1fr !important;
  }
}

/* Extra smal: geen overlap, desnoods meer verticale layout. */
@media (max-width: 380px) {
  .topbar-single .brand-logo {
    max-width: 168px !important;
  }

  .top-search {
    grid-template-columns: 1fr !important;
  }

  .top-search-button {
    width: 100% !important;
  }

  .uikit-match-body {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  .uikit-team {
    justify-content: center !important;
  }

  .uikit-score-block {
    order: -1;
    max-width: 112px !important;
    min-width: 112px !important;
    margin-inline: auto !important;
  }

  .uikit-score-block strong {
    min-width: 112px !important;
  }
}


/* =========================================================
   LiveBall Team/Profile Page Layout Fix
   Fix voor rare lange kolommen op team pages.
   #app blijft cards-grid voor wedstrijdkaarten, maar profiel-secties
   moeten altijd full-width zijn.
   ========================================================= */

/* Directe profiel/detail-secties in #app mogen niet als losse matchcards naast elkaar. */
#app.cards-grid > .profile-hero,
#app.cards-grid > .team-info-grid,
#app.cards-grid > .detail-grid,
#app.cards-grid > .enhanced-squad-card,
#app.cards-grid > .squad-card,
#app.cards-grid > .transfers-card,
#app.cards-grid > .api-addons-grid,
#app.cards-grid > .coverage-card,
#app.cards-grid > .leaderboard-card,
#app.cards-grid > .injury-card,
#app.cards-grid > .bracket-card,
#app.cards-grid > .brand-grid {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Team hero terug als normale horizontale header i.p.v. uitgerekte grid-tegel. */
#app.cards-grid > .profile-hero.team-hero,
#app.cards-grid > .premium-team-hero {
  min-height: unset !important;
  height: auto !important;
  align-self: stretch !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
}

/* Team info mag intern responsive zijn, maar niet zelf in 1 smalle app-kolom vallen. */
#app.cards-grid > .team-info-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
  margin-bottom: 0 !important;
}

#app.cards-grid > .team-info-grid .team-info-tile {
  min-height: 104px !important;
  height: auto !important;
}

/* Detailblokken op team pages: desktop 2 kolommen, mobiel 1 kolom. */
#app.cards-grid > .detail-grid.wide {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
}

/* Next/latest matchcards op team pages niet laten samendrukken. */
#app.cards-grid > .detail-grid.wide .fixture-mini-section {
  min-width: 0 !important;
  width: 100% !important;
}

.fixture-mini-section .fixture-mini-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.fixture-mini-section .uikit-match-card,
.fixture-mini-section .match-card {
  width: 100% !important;
  min-width: 0 !important;
}

.fixture-mini-section .uikit-team-open img {
  width: clamp(28px, 4vw, 36px) !important;
  height: clamp(28px, 4vw, 36px) !important;
}

.fixture-mini-section .uikit-team-open span {
  font-size: .82rem !important;
}

.fixture-mini-section .fav-button {
  width: 26px !important;
  height: 26px !important;
}

.fixture-mini-section .fav-button .icon-svg {
  width: 13px;
  height: 13px;
}

/* Squad tabel netjes full-width, met horizontale scroll alleen binnen de kaart. */
#app.cards-grid > .enhanced-squad-card,
#app.cards-grid > .squad-card,
#app.cards-grid > .transfers-card {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

#app.cards-grid > .enhanced-squad-card .squad-table {
  min-width: min(100%, 760px) !important;
}

/* Voorkom mega-stretch in grid layouts. */
#app.cards-grid > .profile-hero,
#app.cards-grid > .team-info-grid,
#app.cards-grid > .detail-grid,
#app.cards-grid > .table-card {
  align-self: start !important;
}

/* Tablet */
@media (max-width: 900px) {
  #app.cards-grid > .detail-grid.wide {
    grid-template-columns: 1fr !important;
  }

  #app.cards-grid > .profile-hero.team-hero,
  #app.cards-grid > .premium-team-hero {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  #app.cards-grid > .profile-hero.team-hero .team-hero-actions,
  #app.cards-grid > .premium-team-hero .team-hero-actions {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    justify-content: space-between !important;
    margin-left: 0 !important;
  }
}

/* Mobiel */
@media (max-width: 560px) {
  #app.cards-grid > .profile-hero.team-hero,
  #app.cards-grid > .premium-team-hero {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  #app.cards-grid > .profile-hero.team-hero img,
  #app.cards-grid > .premium-team-hero img {
    width: 52px !important;
    height: 52px !important;
  }

  #app.cards-grid > .profile-hero.team-hero h2,
  #app.cards-grid > .premium-team-hero h2 {
    font-size: clamp(1.35rem, 7vw, 1.8rem) !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
  }

  #app.cards-grid > .team-info-grid {
    grid-template-columns: 1fr !important;
  }

  #app.cards-grid > .team-info-grid .team-info-tile {
    min-height: 86px !important;
  }

  .team-stat-hero,
  .team-kpi-grid {
    grid-template-columns: 1fr !important;
  }

  .fixture-mini-section .uikit-match-body {
    grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr) !important;
  }
}


/* =========================================================
   LiveBall Real No-Flash Silent Refresh Fix
   Stille refreshes mogen geen nieuwe enter/hover/glow animaties tonen.
   ========================================================= */

html.silent-refreshing,
html.silent-refreshing *,
html.silent-refreshing *::before,
html.silent-refreshing *::after,
#app.silent-update,
#app.silent-update *,
#app.silent-update *::before,
#app.silent-update *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

html.silent-refreshing body,
#app.silent-update {
  overflow-anchor: none !important;
}

#app.silent-update .league-group,
#app.silent-update .hero-card,
#app.silent-update .match-card,
#app.silent-update .uikit-match-card,
#app.silent-update .table-card,
#app.silent-update .panel,
#app.silent-update .timeline-event,
#app.silent-update .event-item,
#app.silent-update .stat-row,
#app.silent-update .team-row,
#app.silent-update .fixture-mini-section,
#app.silent-update .profile-hero,
#app.silent-update .team-info-grid,
#app.silent-update .scoreboard,
#app.silent-update img {
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}

#app.silent-update .match-ambient,
#app.silent-update .ghost-logo,
#app.silent-update .stadium-beams,
#app.silent-update .score-sparks,
#app.silent-update .ultra-orb,
#app.silent-update .ambient-layer {
  animation: none !important;
  transition: none !important;
}

/* Voorkom dat afbeeldingen kort faden tijdens een echte score/event-update. */
#app.silent-update img {
  will-change: auto !important;
}


/* =========================================================
   LiveBall Blessuretijd / Extra Tijd Label
   Toont naast 90+1 ook los hoeveel minuten extra er nu lopen.
   ========================================================= */
.live-clock-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  vertical-align: middle;
}

.extra-time-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 198, 41, .28);
  background:
    radial-gradient(circle at 25% 10%, rgba(255, 198, 41, .18), transparent 52%),
    rgba(255, 198, 41, .075);
  color: #ffd66b;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.extra-time-label:empty {
  display: none;
}

.big-score .live-clock-wrap,
.score-subline .live-clock-wrap {
  margin-top: 4px;
}

.big-score .extra-time-label,
.score-subline .extra-time-label {
  font-size: .72rem;
  padding: 4px 9px;
}

.uikit-score-block small .live-clock-wrap {
  gap: 5px;
}

.uikit-score-block small .extra-time-label {
  font-size: .58rem;
  padding: 2px 6px;
  min-height: 18px;
}

@media (max-width: 560px) {
  .live-clock-wrap {
    gap: 5px;
  }

  .extra-time-label {
    font-size: .62rem;
    padding: 2px 6px;
  }

  .uikit-score-block small .extra-time-label {
    font-size: .54rem;
    padding-inline: 5px;
  }
}


/* Announced stoppage-time label refinement */
.extra-time-label {
  max-width: 100%;
}

.extra-time-label::before {
  content: "⏱";
  margin-right: 4px;
  opacity: .9;
}

.uikit-score-block small .extra-time-label::before {
  margin-right: 3px;
}


/* =========================================================
   LiveBall Per-Second Match Clock
   Laat live-tijd echt per seconde lopen: 88:32, 90+1:23, etc.
   ========================================================= */
.live-clock [data-live-clock-label],
.live-time [data-live-clock-label] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: .01em;
  min-width: 5.2ch;
  text-align: center;
  display: inline-block;
}

.uikit-score-block small .live-clock [data-live-clock-label],
.uikit-score-block small .live-time [data-live-clock-label] {
  min-width: 4.8ch;
}

.big-score .live-clock [data-live-clock-label],
.score-subline .live-clock [data-live-clock-label] {
  min-width: 5.4ch;
}


/* Pause status timer fix */
.live-clock[data-code="BT"] [data-live-clock-label],
.live-clock[data-code="HT"] [data-live-clock-label] {
  font-variant-numeric: tabular-nums;
}


/* =========================================================
   LiveBall Smooth Invisible Clock
   Timer loopt lokaal per seconde, zonder zichtbare refresh/redraw.
   ========================================================= */
.live-clock-wrap,
.live-clock,
.live-time {
  will-change: contents;
}

.live-clock [data-live-clock-label],
.live-time [data-live-clock-label] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  min-width: 5.4ch;
  text-align: center;
  display: inline-block;
}

#app.silent-update .live-clock-wrap,
#app.silent-update .live-clock,
#app.silent-update .live-time,
html.silent-refreshing .live-clock-wrap,
html.silent-refreshing .live-clock,
html.silent-refreshing .live-time {
  transition: none !important;
  animation: none !important;
}


/* =========================================================
   LiveBall Private Admin
   ========================================================= */
.admin-login-card,
.private-api-card {
  grid-column: 1 / -1 !important;
  max-width: 760px !important;
  width: 100% !important;
  margin-inline: auto !important;
}

.admin-login-form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.admin-login-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.admin-password-input {
  height: 46px;
  border-radius: 14px;
}

.primary-button,
.admin-primary-button,
.admin-primary-link {
  min-height: 44px;
  border: 1px solid rgba(10,108,255,.55);
  border-radius: 14px;
  background: linear-gradient(135deg, #0a6cff, #00a2ff);
  color: #fff !important;
  font-weight: 900;
  padding: 0 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 14px 28px rgba(10,108,255,.22);
}

.primary-button:disabled,
.admin-primary-button:disabled {
  opacity: .6;
  cursor: wait;
}

.admin-dashboard {
  grid-column: 1 / -1 !important;
  width: 100%;
  display: grid;
  gap: 16px;
}

.admin-dashboard-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(61, 116, 206, .22);
  background:
    radial-gradient(circle at 8% 0%, rgba(0,230,255,.08), transparent 40%),
    linear-gradient(180deg, rgba(12,23,40,.96), rgba(9,18,32,.92));
  box-shadow: 0 16px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}

.admin-dashboard-top h2 {
  margin: 0 0 4px;
  font-size: clamp(1.45rem, 3vw, 2.15rem);
}

.admin-dashboard-top p {
  margin: 0;
}

.admin-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.admin-kpi-grid article {
  min-width: 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(61, 116, 206, .22);
  background:
    radial-gradient(circle at 20% 0%, rgba(10,108,255,.10), transparent 45%),
    rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.admin-kpi-grid span {
  display: block;
  color: var(--muted);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
  margin-bottom: 6px;
}

.admin-kpi-grid strong {
  display: block;
  color: #fff;
  font-size: clamp(1.15rem, 2.2vw, 1.65rem);
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-kpi-grid small {
  display: block;
  color: var(--muted);
  margin-top: 5px;
  overflow-wrap: anywhere;
}

.admin-grid {
  grid-column: 1 / -1 !important;
}

.admin-inline-message {
  margin-top: 12px;
}

.admin-pre {
  max-height: 420px;
  overflow: auto;
}

.tiny-note {
  color: var(--muted);
  font-size: .82rem;
  margin-top: 10px;
}

.tiny-note code,
.admin-login-card code {
  color: var(--lb-cyan, #00e6ff);
}

@media (max-width: 980px) {
  .admin-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-dashboard-top {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .admin-kpi-grid {
    grid-template-columns: 1fr;
  }

  .admin-dashboard-top,
  .admin-login-card {
    border-radius: 18px !important;
  }

  .admin-action-row {
    width: 100%;
  }

  .admin-action-row > * {
    flex: 1 1 auto;
  }
}


/* =========================================================
   LiveBall feed layout spacing fix
   Houdt de spotlight-blokken naast elkaar, maar voorkomt lange
   uitgerekte vakken door de feed-secties full-width te maken.
   ========================================================= */

/* De homepage/feed gebruikt #app.cards-grid. Deze wrappers voorkomen
   dat ultra-wall, dashboard, popular-strip en league-groepen als losse
   smalle kolommen naast elkaar worden gezet. */
#app.cards-grid > .feed-top-stack,
#app.cards-grid > .feed-league-stack {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.feed-top-stack,
.feed-league-stack {
  display: grid !important;
  gap: 18px !important;
  align-items: start !important;
}

.feed-top-stack > *,
.feed-league-stack > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Match spotlight: structuur blijft hetzelfde als de goede versie:
   links de grote spotlight, rechts 3 cards naast elkaar.
   Alleen iets meer lucht en minder rek. */
.feed-top-stack .ultra-wall {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(250px, .88fr) minmax(0, 1.6fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
  margin-top: 0 !important;
}

.feed-top-stack .ultra-wall-main {
  min-height: 160px !important;
  height: auto !important;
}

.feed-top-stack .spotlight-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
  overflow: visible !important;
}

.feed-top-stack .spotlight-card {
  min-height: 150px !important;
  height: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  align-self: stretch !important;
  margin: 0 !important;
}

.feed-top-stack .spotlight-teams b,
.feed-top-stack .spotlight-league {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.feed-top-stack .spotlight-teams b {
  white-space: nowrap !important;
}

/* De 3 dashboard/KPI cards mogen nooit als smalle hoge pilaren worden. */
.feed-top-stack .feed-dashboard {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(150px, .85fr) minmax(150px, .85fr) minmax(260px, 1.55fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.feed-top-stack .feed-stat-card,
.feed-top-stack .feed-stat-card.wide {
  grid-column: auto !important;
  min-height: 132px !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

.feed-top-stack .feed-stat-card strong {
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  line-height: .95 !important;
  overflow-wrap: anywhere !important;
}

.feed-top-stack .feed-stat-card.wide strong {
  font-size: clamp(1.55rem, 3vw, 2.45rem) !important;
}

/* Populaire wedstrijden: niet veranderen naar een aparte verticale grid.
   Gewoon wat meer gap, zodat de boxen niet tegen elkaar/over elkaar zitten. */
.feed-top-stack .popular-strip {
  grid-column: 1 / -1 !important;
  display: block !important;
  padding: 18px !important;
  overflow: hidden !important;
}

.feed-top-stack .popular-scroll {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
  padding: 2px 2px 4px !important;
}

.feed-top-stack .mini-match {
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Competitieblokken onder de header: ook full-width, met eigen spacing. */
.feed-league-stack .league-group {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  gap: 12px !important;
  align-items: start !important;
}

/* Desktop-small / tablet */
@media (max-width: 1180px) {
  .feed-top-stack .ultra-wall {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .feed-top-stack .spotlight-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
    overflow-x: auto !important;
    padding-bottom: 3px !important;
  }

  .feed-top-stack .spotlight-card {
    min-width: 180px !important;
  }

  .feed-top-stack .feed-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .feed-top-stack .feed-stat-card.wide {
    grid-column: 1 / -1 !important;
  }
}

/* Mobiel */
@media (max-width: 680px) {
  .feed-top-stack,
  .feed-league-stack {
    gap: 14px !important;
  }

  .feed-top-stack .ultra-wall {
    border-radius: 22px !important;
    padding: 14px !important;
  }

  .feed-top-stack .spotlight-grid {
    grid-template-columns: minmax(240px, 1fr) !important;
    overflow: visible !important;
  }

  .feed-top-stack .spotlight-card {
    min-width: 0 !important;
  }

  .feed-top-stack .feed-dashboard {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .feed-top-stack .feed-stat-card,
  .feed-top-stack .feed-stat-card.wide {
    min-height: 116px !important;
  }

  .feed-top-stack .popular-scroll {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}


/* Render-safe market values notice */
.message.warn {
  border-color: rgba(255, 198, 41, .28) !important;
  background: rgba(255, 198, 41, .08) !important;
}


/* =========================================================
   LiveBall brand system v2
   Gebaseerd op de officiële UI kit, brand guidelines,
   logo system en marketing asset sheet.
   ========================================================= */

:root {
  --lb-deep: #0b0f1a;
  --lb-navy: #0f1a2e;
  --lb-surface: #13213a;
  --lb-blue: #0066ff;
  --lb-cyan: #00e5ff;
  --lb-teal: #00ffa3;
  --lb-white: #ffffff;
  --lb-gray: #a7b0c2;
  --lb-line: rgba(75, 133, 194, .28);
  --lb-line-strong: rgba(0, 155, 255, .48);
  --lb-panel: linear-gradient(145deg, rgba(19, 33, 58, .94), rgba(8, 18, 34, .96));
  --lb-panel-soft: rgba(15, 26, 46, .88);
  --lb-blue-glow: 0 0 28px rgba(0, 102, 255, .18);
  --lb-cyan-glow: 0 0 24px rgba(0, 229, 255, .16);

  --bg: var(--lb-deep);
  --bg-2: var(--lb-navy);
  --card: var(--lb-panel-soft);
  --card-strong: var(--lb-navy);
  --border: var(--lb-line);
  --muted: var(--lb-gray);
  --text: var(--lb-white);
  --accent: var(--lb-cyan);
  --accent-2: var(--lb-blue);
  --teal: var(--lb-teal);
  --shadow: 0 18px 50px rgba(0, 0, 0, .32);
}

html {
  background: var(--lb-deep);
}

body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  background:
    radial-gradient(circle at 12% -8%, rgba(0, 102, 255, .18), transparent 34rem),
    radial-gradient(circle at 92% 2%, rgba(0, 229, 255, .09), transparent 28rem),
    linear-gradient(180deg, #07101e 0%, var(--lb-deep) 46%, #07111f 100%);
}

body::before {
  opacity: .35;
  background-image:
    linear-gradient(rgba(0, 229, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, .03) 1px, transparent 1px);
  background-size: 64px 64px;
}

.grain-layer {
  opacity: .16 !important;
}

.stadium-glow,
.ultra-orb,
.ambient-layer {
  opacity: .28 !important;
  filter: blur(28px) !important;
}

h1, h2, h3,
.hero-stat span,
.uikit-score-block strong,
.spotlight-teams strong,
.feed-stat-card strong,
.team-value-badge b,
.match-score-main {
  font-family: "Rajdhani", "Inter", sans-serif;
  font-weight: 700;
}

button, input, select {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

.app-shell {
  width: min(1440px, calc(100% - 40px)) !important;
  padding-top: 14px !important;
}

/* Navigation */
.topbar.topbar-single {
  top: 10px;
  min-height: 78px;
  padding: 10px 14px !important;
  border: 1px solid var(--lb-line) !important;
  border-radius: 18px !important;
  background: rgba(7, 16, 30, .92) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .025) !important;
  backdrop-filter: blur(22px) saturate(125%) !important;
}

.brand-logo {
  height: 48px !important;
  max-width: min(30vw, 230px) !important;
  filter: drop-shadow(0 0 14px rgba(0, 102, 255, .28)) !important;
}

.brand-copy small {
  color: #7f91ab !important;
  font-size: .66rem !important;
  letter-spacing: .16em !important;
}

.top-linkbar {
  gap: 2px !important;
  padding: 3px !important;
  border: 0 !important;
  background: transparent !important;
}

.top-linkbar a {
  position: relative;
  padding: 12px 13px !important;
  border-radius: 8px !important;
  color: #9ba9bd !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
}

.top-linkbar a::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 3px;
  left: 12px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--lb-blue), var(--lb-cyan));
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity .18s ease, transform .18s ease;
}

.top-linkbar a:hover,
.top-linkbar a.active {
  color: var(--lb-white) !important;
  background: rgba(0, 102, 255, .09) !important;
}

.top-linkbar a:hover::after,
.top-linkbar a.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.top-search {
  min-height: 42px !important;
  border: 1px solid var(--lb-line) !important;
  border-radius: 11px !important;
  background: #0c1729 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025) !important;
}

.top-search:focus-within {
  border-color: var(--lb-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0, 229, 255, .08), var(--lb-cyan-glow) !important;
}

.top-search-button,
.top-login-button,
.primary-button,
.primary-action {
  border: 1px solid rgba(0, 229, 255, .46) !important;
  border-radius: 9px !important;
  color: #fff !important;
  background: linear-gradient(110deg, var(--lb-blue), #087dff 55%, #00bde8) !important;
  box-shadow: 0 8px 24px rgba(0, 102, 255, .24) !important;
  font-weight: 700 !important;
}

.top-icon-button,
.ghost-button,
.mini-button {
  border-radius: 9px !important;
  background: rgba(19, 33, 58, .74) !important;
}

.status-pill {
  border-color: rgba(0, 255, 163, .28) !important;
  border-radius: 999px !important;
  background: rgba(0, 255, 163, .06) !important;
}

.status-pill.ok {
  color: var(--lb-teal) !important;
}

/* Filters */
.top-controls {
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid var(--lb-line) !important;
  border-radius: 15px !important;
  background: rgba(8, 18, 34, .84) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .22) !important;
}

.top-filter-group {
  border: 1px solid rgba(75, 133, 194, .18) !important;
  border-radius: 11px !important;
  background: rgba(15, 26, 46, .72) !important;
}

.top-control-title span {
  color: #c6d3e5 !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}

.input,
.top-search-input,
.admin-password-input {
  border-radius: 9px !important;
  border-color: var(--lb-line) !important;
  background: #0b1628 !important;
}

.input:focus,
.admin-password-input:focus {
  border-color: var(--lb-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0, 229, 255, .09) !important;
}

/* Main header */
.hero-card {
  min-height: 132px;
  padding: 24px 28px !important;
  border: 1px solid var(--lb-line) !important;
  border-left: 3px solid var(--lb-cyan) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(100deg, rgba(0, 102, 255, .14), transparent 48%),
    linear-gradient(160deg, rgba(19, 33, 58, .96), rgba(7, 17, 31, .98)) !important;
  box-shadow: var(--lb-blue-glow), 0 18px 44px rgba(0, 0, 0, .28) !important;
}

.hero-card h1 {
  margin-top: 3px !important;
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  letter-spacing: -.035em !important;
  line-height: .96 !important;
}

.eyebrow {
  color: var(--lb-cyan) !important;
  font-family: "Rajdhani", "Inter", sans-serif !important;
  font-size: .74rem !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
}

.hero-stat {
  min-width: 94px !important;
  width: 94px !important;
  height: 82px !important;
  border: 1px solid var(--lb-line-strong) !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, rgba(0, 102, 255, .17), rgba(5, 15, 29, .8)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .04), var(--lb-blue-glow) !important;
}

.hero-stat span {
  color: var(--lb-cyan) !important;
}

/* Shared surfaces */
.table-card,
.message,
.lineup-pitch-card,
.popular-strip,
.ultra-wall,
.feed-stat-card,
.profile-hero,
.admin-login-card,
.admin-dashboard-top {
  border-color: var(--lb-line) !important;
  border-radius: 15px !important;
  background: var(--lb-panel) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .025) !important;
}

.table-card > header,
.section-title-row {
  border-bottom-color: rgba(75, 133, 194, .2) !important;
}

.table-card > header h2,
.section-title-row h2 {
  font-family: "Rajdhani", "Inter", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}

/* Spotlight and dashboard */
.ultra-wall {
  overflow: hidden !important;
  padding: 16px !important;
}

.ultra-wall-main {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--lb-line) !important;
  border-radius: 13px !important;
  background:
    linear-gradient(120deg, rgba(0, 102, 255, .22), transparent 60%),
    #0a1729 !important;
}

.ultra-wall-main::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -80px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(0, 229, 255, .2);
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(0, 102, 255, .16);
}

.spotlight-card,
.mini-match {
  border: 1px solid var(--lb-line) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, rgba(19, 33, 58, .94), rgba(9, 19, 34, .98)) !important;
  box-shadow: none !important;
}

.spotlight-card:hover,
.mini-match:hover {
  border-color: var(--lb-line-strong) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--lb-blue-glow) !important;
}

.spotlight-card.is-live {
  border-color: rgba(0, 255, 163, .48) !important;
}

.spotlight-teams strong {
  padding: 5px 12px !important;
  border: 1px solid rgba(0, 102, 255, .7) !important;
  border-radius: 9px !important;
  background: #0a172a !important;
  color: white !important;
}

.feed-stat-card {
  border-top: 2px solid var(--lb-blue) !important;
}

.feed-stat-card.hot {
  border-top-color: var(--lb-teal) !important;
}

.feed-stat-card strong {
  color: white !important;
}

.stat-orb {
  background: var(--lb-teal) !important;
  box-shadow: 0 0 18px rgba(0, 255, 163, .68) !important;
}

.stat-orb.blue {
  background: var(--lb-cyan) !important;
  box-shadow: 0 0 18px rgba(0, 229, 255, .62) !important;
}

/* Match cards */
.uikit-match-card {
  padding: 0 !important;
  border: 1px solid var(--lb-line) !important;
  border-left: 3px solid var(--lb-blue) !important;
  border-radius: 15px !important;
  background: linear-gradient(145deg, rgba(19, 33, 58, .95), rgba(8, 18, 33, .98)) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .23) !important;
}

.uikit-match-card:hover {
  border-color: rgba(0, 229, 255, .48) !important;
  border-left-color: var(--lb-cyan) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--lb-cyan-glow), 0 18px 44px rgba(0, 0, 0, .3) !important;
}

.uikit-match-card.is-live {
  border-left-color: var(--lb-teal) !important;
  box-shadow: 0 0 26px rgba(0, 255, 163, .08), 0 16px 40px rgba(0, 0, 0, .28) !important;
}

.uikit-match-top,
.uikit-match-footer {
  border-color: rgba(75, 133, 194, .18) !important;
  background: rgba(5, 14, 27, .34) !important;
}

.league-chip,
.league-title-link {
  font-weight: 700 !important;
}

.league-dot {
  background: var(--lb-cyan) !important;
  box-shadow: 0 0 10px rgba(0, 229, 255, .72) !important;
}

.uikit-score-block strong {
  min-width: 106px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(0, 102, 255, .74) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #0c1b31, #071425) !important;
  color: var(--lb-white) !important;
  box-shadow: inset 0 0 18px rgba(0, 102, 255, .08) !important;
}

.uikit-score-block small {
  color: var(--lb-cyan) !important;
  font-weight: 700 !important;
}

.popular-tag,
.league-count,
.tiny-badge.on {
  border-color: rgba(0, 229, 255, .3) !important;
  background: rgba(0, 102, 255, .13) !important;
  color: var(--lb-cyan) !important;
}

/* Profiles, tables and admin */
.premium-team-hero {
  border-left: 3px solid var(--lb-cyan) !important;
  background:
    linear-gradient(100deg, rgba(0, 102, 255, .18), transparent 54%),
    var(--lb-panel) !important;
}

.premium-team-hero > img {
  border: 1px solid var(--lb-line-strong) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: var(--lb-blue-glow) !important;
}

.team-info-tile,
.team-kpi-grid article,
.admin-kpi-grid article {
  border: 1px solid rgba(75, 133, 194, .22) !important;
  border-radius: 11px !important;
  background: rgba(8, 19, 35, .76) !important;
}

.team-info-tile.highlight,
.team-value-badge {
  border-color: rgba(0, 255, 163, .34) !important;
  background: rgba(0, 255, 163, .06) !important;
}

.team-value-badge b,
.market-cell b {
  color: var(--lb-teal) !important;
}

.squad-row-pro,
.transfer-row {
  border-color: rgba(75, 133, 194, .16) !important;
  background: rgba(7, 17, 31, .56) !important;
}

.squad-row-pro:hover,
.transfer-row:hover {
  border-color: rgba(0, 229, 255, .36) !important;
  background: rgba(0, 102, 255, .08) !important;
}

.form-pills b.win {
  border-color: rgba(0, 255, 163, .42) !important;
  background: rgba(0, 255, 163, .13) !important;
  color: var(--lb-teal) !important;
}

.admin-login-card {
  border-top: 2px solid var(--lb-blue) !important;
}

.message.success {
  border-color: rgba(0, 255, 163, .34) !important;
  background: rgba(0, 255, 163, .07) !important;
}

/* Mobile navigation */
.bottom-nav {
  border: 1px solid var(--lb-line) !important;
  border-radius: 14px !important;
  background: rgba(7, 16, 30, .96) !important;
  box-shadow: 0 -12px 34px rgba(0, 0, 0, .34) !important;
}

.bottom-nav a {
  border-radius: 9px !important;
}

.bottom-nav a.active {
  color: var(--lb-cyan) !important;
  background: rgba(0, 102, 255, .14) !important;
  box-shadow: inset 0 -2px var(--lb-cyan) !important;
}

/* Focus and motion */
:where(a, button, input, select):focus-visible {
  outline: 2px solid var(--lb-cyan) !important;
  outline-offset: 3px !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 1120px) {
  .topbar.topbar-single {
    border-radius: 15px !important;
  }

  .brand-logo {
    height: 44px !important;
  }
}

@media (max-width: 720px) {
  .app-shell {
    width: min(100% - 20px, 1440px) !important;
    padding-top: 8px !important;
  }

  .topbar.topbar-single {
    top: 6px;
    padding: 10px !important;
  }

  .brand-logo {
    height: 42px !important;
    max-width: 210px !important;
  }

  .brand-copy {
    display: none !important;
  }

  .top-linkbar a {
    padding: 10px 12px !important;
  }

  .hero-card {
    min-height: 118px;
    padding: 20px !important;
  }

  .hero-card h1 {
    font-size: clamp(1.8rem, 10vw, 2.65rem) !important;
  }

  .hero-stat {
    width: 76px !important;
    min-width: 76px !important;
    height: 70px !important;
  }

  .uikit-match-body {
    padding: 17px 12px !important;
  }

  .uikit-score-block strong {
    min-width: 82px !important;
    padding: 7px 9px !important;
  }
}

@media (max-width: 480px) {
  .hero-card {
    align-items: flex-start !important;
  }

  .hero-stat {
    width: 64px !important;
    min-width: 64px !important;
    height: 62px !important;
  }

  .uikit-match-card,
  .table-card,
  .popular-strip,
  .ultra-wall,
  .profile-hero {
    border-radius: 12px !important;
  }
}


/* =========================================================
   Branded homepage + match cards
   ========================================================= */

.league-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0;
  color: #d7e4f4 !important;
}

.league-chip img {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px;
  object-fit: contain;
}

.league-chip > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uikit-match-body {
  grid-template-columns: minmax(0, 1fr) minmax(104px, auto) minmax(0, 1fr) !important;
  gap: clamp(14px, 3vw, 34px) !important;
  padding: 24px clamp(18px, 4vw, 42px) !important;
}

.uikit-team {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.uikit-team-away {
  grid-template-columns: auto minmax(0, 1fr) !important;
}

.uikit-team-away .uikit-team-open {
  grid-column: 2;
}

.uikit-team-away .fav-button {
  grid-column: 1;
  grid-row: 1;
}

.uikit-team-open {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 8px;
  border: 0;
  border-radius: 11px;
  color: var(--lb-white);
  background: transparent;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.uikit-team-away .uikit-team-open {
  flex-direction: row-reverse;
  text-align: right;
}

.uikit-team-open:hover {
  background: rgba(0, 102, 255, .09);
  transform: translateY(-1px);
}

.uikit-team-open img {
  width: clamp(48px, 6vw, 66px) !important;
  height: clamp(48px, 6vw, 66px) !important;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .28));
}

.uikit-team-open span {
  min-width: 0;
  overflow: hidden;
  color: #f7fbff;
  font-size: clamp(.88rem, 1.8vw, 1.08rem);
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.uikit-team .fav-button {
  position: static !important;
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px;
  border: 1px solid rgba(75, 133, 194, .24) !important;
  border-radius: 9px !important;
  background: rgba(8, 19, 35, .72) !important;
}

.uikit-score-block {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 8px !important;
}

.uikit-score-block strong {
  font-size: clamp(1.9rem, 4.5vw, 2.7rem) !important;
  line-height: .92 !important;
  letter-spacing: .04em !important;
}

.uikit-score-block small {
  min-height: 20px;
  font-size: .76rem !important;
  letter-spacing: .04em;
}

.uikit-match-footer {
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 16px !important;
}

.match-meta-item {
  min-width: 0;
  color: #8090a6 !important;
  font-size: .73rem;
}

.match-venue {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-open-label {
  color: #a9bbd1 !important;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

.match-open-label b {
  margin-left: 3px;
  color: var(--lb-cyan);
}

.uikit-match-card:hover .match-open-label {
  color: white !important;
}

.spotlight-metrics {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.spotlight-metrics span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(75, 133, 194, .23);
  border-radius: 999px;
  color: #a9b8cc;
  background: rgba(5, 15, 29, .56);
  font-size: .72rem;
  font-weight: 700;
}

.spotlight-metrics span.active {
  border-color: rgba(0, 255, 163, .32);
  color: var(--lb-teal);
  background: rgba(0, 255, 163, .07);
}

.spotlight-metrics i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lb-teal);
  box-shadow: 0 0 12px var(--lb-teal);
  animation: livePulse 1.6s ease-in-out infinite;
}

.ultra-wall-main > p strong {
  color: var(--lb-cyan);
}

.feed-stat-card {
  position: relative;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-areas:
    "icon label"
    "icon value"
    "icon note" !important;
  column-gap: 15px !important;
  align-content: center !important;
  padding: 20px !important;
}

.feed-stat-icon {
  grid-area: icon;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  align-self: center;
  border: 1px solid rgba(0, 229, 255, .32);
  border-radius: 12px;
  color: var(--lb-cyan);
  background: linear-gradient(145deg, rgba(0, 102, 255, .2), rgba(0, 229, 255, .06));
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
  font-family: "Rajdhani", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
}

.feed-stat-icon .icon-svg { width: 24px; height: 24px; }

.feed-stat-icon.live {
  border-color: rgba(0, 255, 163, .34);
  color: var(--lb-teal);
  background: linear-gradient(145deg, rgba(0, 255, 163, .14), rgba(0, 255, 163, .04));
}

.feed-stat-icon.live .icon-svg {
  filter: drop-shadow(0 0 6px rgba(0, 255, 163, .75));
}

.feed-stat-icon.trophy {
  color: #72a8ff;
}

.feed-stat-card small {
  grid-area: label;
  align-self: end;
}

.feed-stat-card strong {
  grid-area: value;
  align-self: center;
}

.feed-stat-card em {
  grid-area: note;
  align-self: start;
}

.mini-match {
  display: grid !important;
  gap: 14px !important;
  min-height: 178px !important;
  padding: 14px !important;
  color: inherit;
  text-align: left;
}

.mini-match-head,
.mini-match-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mini-match-head > span {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
  overflow: hidden;
  color: #9aabc0;
  font-size: .69rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-match-head img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.mini-match-head > b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--lb-teal);
  font-size: .64rem;
}

.mini-match-head > b i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lb-teal);
  box-shadow: 0 0 9px var(--lb-teal);
}

.mini-match-head > em {
  color: var(--lb-cyan);
  font-size: .66rem;
  font-style: normal;
}

.mini-match-teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.mini-match-teams > span {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  text-align: center;
}

.mini-match-teams img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.mini-match-teams b {
  max-width: 100%;
  overflow: hidden;
  color: #eaf2fc;
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-match-teams > strong {
  min-width: 54px;
  padding: 6px 8px;
  border: 1px solid rgba(0, 102, 255, .52);
  border-radius: 8px;
  color: white;
  background: #09172a;
  font-family: "Rajdhani", sans-serif;
  font-size: 1.08rem;
  text-align: center;
}

.mini-match-foot {
  padding-top: 10px;
  border-top: 1px solid rgba(75, 133, 194, .15);
  color: var(--lb-cyan);
  font-size: .68rem;
}

.mini-match-foot > b {
  color: #8ea1b9;
  font-size: .64rem;
}

.mini-match:hover .mini-match-foot > b {
  color: white;
}

@media (max-width: 760px) {
  .uikit-match-body {
    grid-template-columns: minmax(0, 1fr) minmax(84px, auto) minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 18px 10px !important;
  }

  .uikit-team {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .uikit-team-away {
    flex-direction: column-reverse !important;
  }

  .uikit-team-open,
  .uikit-team-away .uikit-team-open {
    flex-direction: column !important;
    gap: 7px;
    width: 100%;
    padding: 4px;
    text-align: center;
  }

  .uikit-team-open span {
    display: -webkit-box;
    overflow: hidden;
    font-size: .78rem;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .uikit-team .fav-button {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px;
  }

  .uikit-match-footer {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .match-venue {
    display: none;
  }
}

@media (max-width: 520px) {
  .uikit-match-top {
    align-items: flex-start !important;
  }

  .country-mini {
    display: none !important;
  }

  .uikit-score-block strong {
    min-width: 72px !important;
    font-size: 1.7rem !important;
  }

  .match-open-label {
    font-size: .66rem;
  }

  .feed-stat-card {
    min-height: 108px !important;
  }
}

/* =========================================================
   LiveBall Premium UI Polish v3
   Focus: matchcards, homepage dashboard en subtiele motion.
   ========================================================= */

:root {
  --lb-electric: #0a6cff;
  --lb-ice: #00e5ff;
  --lb-mint: #00ffa3;
  --lb-ink: rgba(5, 12, 25, .72);
  --lb-card-glow: 0 22px 60px rgba(0, 0, 0, .34), 0 0 34px rgba(0, 102, 255, .10);
}

body {
  background:
    radial-gradient(circle at 9% -6%, rgba(0, 229, 255, .22), transparent 31rem),
    radial-gradient(circle at 86% 2%, rgba(0, 102, 255, .22), transparent 34rem),
    radial-gradient(circle at 50% 118%, rgba(0, 255, 163, .11), transparent 42rem),
    linear-gradient(180deg, #050b16 0%, #081220 44%, #050b14 100%) !important;
}

.grain-layer {
  opacity: .18 !important;
  animation: lbGrainDrift 18s linear infinite;
}

.stadium-glow {
  background:
    radial-gradient(ellipse at center, rgba(0, 229, 255, .18), transparent 54%),
    radial-gradient(ellipse at 42% 58%, rgba(0, 255, 163, .12), transparent 48%) !important;
  animation: lbStadiumPulse 7.5s ease-in-out infinite !important;
}

.stadium-beams {
  opacity: .52 !important;
}

.stadium-beams span {
  width: 20vw !important;
  background: linear-gradient(to bottom, rgba(0, 229, 255, .17), rgba(0, 102, 255, .075) 42%, transparent 82%) !important;
  filter: blur(22px) !important;
  animation: lbBeamSweep 11s ease-in-out infinite !important;
}

.stadium-beams span:nth-child(2),
.stadium-beams span:nth-child(4) {
  background: linear-gradient(to bottom, rgba(0, 255, 163, .13), rgba(0, 229, 255, .065) 42%, transparent 82%) !important;
}

.score-sparks i {
  width: 4px !important;
  height: 4px !important;
  background: rgba(0, 229, 255, .88) !important;
  box-shadow: 0 0 18px rgba(0, 229, 255, .76), 0 0 36px rgba(0, 255, 163, .30) !important;
  animation: lbSparkLift 10s linear infinite !important;
}

.hero-card {
  background:
    linear-gradient(112deg, rgba(0, 102, 255, .24), transparent 56%),
    radial-gradient(circle at 86% 22%, rgba(0, 229, 255, .20), transparent 22rem),
    radial-gradient(circle at 28% -10%, rgba(0, 255, 163, .14), transparent 20rem),
    rgba(7, 18, 34, .88) !important;
}

.hero-card::after {
  content: "";
  position: absolute;
  inset: auto 26px 20px 26px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, .58), rgba(0, 255, 163, .34), transparent);
  opacity: .78;
}

.feed-top-stack .ultra-wall {
  border-color: rgba(0, 229, 255, .24) !important;
  background:
    linear-gradient(135deg, rgba(0, 102, 255, .16), transparent 58%),
    rgba(6, 16, 31, .72) !important;
  box-shadow: var(--lb-card-glow) !important;
}

.feed-top-stack .ultra-wall::after {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 20%, rgba(0, 229, 255, .12) 42%, transparent 62%);
  transform: translateX(-120%);
  animation: lbPanelSweep 8s ease-in-out infinite;
}

.feed-top-stack .ultra-wall-main {
  min-height: 220px !important;
  padding: clamp(22px, 4vw, 36px) !important;
  border-color: rgba(0, 229, 255, .30) !important;
  background:
    radial-gradient(circle at 78% 24%, rgba(0, 229, 255, .18), transparent 18rem),
    linear-gradient(125deg, rgba(0, 102, 255, .30), rgba(7, 18, 34, .90) 58%) !important;
}

.ultra-wall-main h2 {
  max-width: 780px;
  font-size: clamp(2rem, 4vw, 3.55rem) !important;
  line-height: .95 !important;
  text-transform: uppercase;
}

.spotlight-metrics span {
  border-color: rgba(0, 229, 255, .22) !important;
  background: rgba(3, 12, 24, .48) !important;
}

.feed-top-stack .spotlight-grid {
  gap: 14px !important;
}

.spotlight-card,
.mini-match {
  position: relative;
  overflow: hidden;
}

.spotlight-card::after,
.mini-match::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, .09) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .72s ease;
}

.spotlight-card:hover::after,
.mini-match:hover::after {
  transform: translateX(130%);
}

.spotlight-card.is-live {
  box-shadow: 0 0 26px rgba(0, 255, 163, .13), inset 0 0 0 1px rgba(0, 255, 163, .22) !important;
}

.feed-top-stack .feed-dashboard {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.feed-stat-card,
.feed-stat-card.wide {
  min-height: 136px !important;
  border-color: rgba(0, 229, 255, .18) !important;
  background:
    linear-gradient(145deg, rgba(19, 33, 58, .86), rgba(6, 16, 31, .92)),
    rgba(8, 18, 34, .82) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .24) !important;
}

.feed-stat-card:hover {
  border-color: rgba(0, 229, 255, .42) !important;
  box-shadow: var(--lb-cyan-glow), 0 24px 60px rgba(0, 0, 0, .32) !important;
}

.feed-stat-card.hot {
  border-color: rgba(0, 255, 163, .30) !important;
}

.feed-stat-card.calm .feed-stat-icon {
  color: #8fb2ff;
  border-color: rgba(143, 178, 255, .30);
  background: linear-gradient(145deg, rgba(143, 178, 255, .16), rgba(0, 102, 255, .05));
}

.feed-stat-card strong {
  letter-spacing: -.02em;
}

.uikit-match-card {
  --status-accent: var(--lb-electric);
  position: relative !important;
  overflow: hidden !important;
  border-left-color: var(--status-accent) !important;
  background:
    radial-gradient(circle at 8% 20%, color-mix(in srgb, var(--status-accent) 18%, transparent), transparent 15rem),
    radial-gradient(circle at 92% 82%, rgba(0, 229, 255, .10), transparent 16rem),
    linear-gradient(145deg, rgba(19, 33, 58, .96), rgba(5, 14, 28, .98)) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .025) !important;
}

.uikit-match-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0 34%, rgba(255, 255, 255, .08) 46%, transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 28%);
  opacity: 0;
  transform: translateX(-42%);
  transition: opacity .25s ease, transform .65s ease;
}

.uikit-match-card:hover::after {
  opacity: 1;
  transform: translateX(42%);
}

.uikit-match-card.is-live {
  --status-accent: var(--lb-mint);
  animation: lbLiveCardGlow 3s ease-in-out infinite;
}

.uikit-match-card.is-upcoming {
  --status-accent: var(--lb-ice);
}

.uikit-match-card.is-finished {
  --status-accent: #8b97a8;
  opacity: .94;
}

.uikit-match-card.score-burst {
  animation: lbScoreBurst 1.4s ease both, lbLiveCardGlow 3s ease-in-out infinite;
}

.match-ambient {
  opacity: .30 !important;
}

.ghost-logo {
  width: 190px !important;
  height: 190px !important;
  opacity: .14 !important;
  filter: grayscale(.08) blur(.1px) drop-shadow(0 0 22px rgba(0, 229, 255, .18)) !important;
}

.ghost-home {
  left: -52px !important;
  top: -48px !important;
}

.ghost-away {
  right: -54px !important;
  bottom: -54px !important;
}

.uikit-match-top,
.uikit-match-body,
.uikit-match-footer {
  position: relative;
  z-index: 2;
}

.uikit-match-top {
  padding: 13px 16px !important;
  background: linear-gradient(90deg, rgba(5, 14, 27, .64), rgba(5, 14, 27, .28)) !important;
}

.uikit-badges {
  gap: 7px !important;
}

.status-mini-pill {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 7px 10px;
  border: 1px solid rgba(0, 229, 255, .24);
  border-radius: 999px;
  color: var(--lb-cyan);
  background: rgba(0, 102, 255, .10);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .02em;
  white-space: nowrap;
}

.status-mini-pill.status-upcoming {
  color: #dceaff;
  border-color: rgba(0, 229, 255, .24);
  background: rgba(0, 229, 255, .08);
}

.status-mini-pill.status-finished {
  color: #a7b0c2;
  border-color: rgba(167, 176, 194, .20);
  background: rgba(167, 176, 194, .07);
}

.live-mini-dot {
  color: var(--lb-mint) !important;
  border-color: rgba(0, 255, 163, .48) !important;
  background: rgba(0, 255, 163, .10) !important;
  box-shadow: 0 0 18px rgba(0, 255, 163, .15), inset 0 0 14px rgba(0, 255, 163, .08) !important;
}

.live-mini-dot i {
  animation: lbLiveDot 1.05s ease-in-out infinite !important;
}

.uikit-match-body {
  grid-template-columns: minmax(0, 1fr) minmax(116px, 160px) minmax(0, 1fr) !important;
  padding: 26px clamp(18px, 4vw, 46px) !important;
}

.uikit-team-open {
  min-height: 82px;
  border: 1px solid transparent !important;
}

.uikit-team-open:hover {
  border-color: rgba(0, 229, 255, .16) !important;
  background: rgba(0, 102, 255, .09) !important;
}

.uikit-team-open img {
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .20), 0 0 20px rgba(0, 229, 255, .09);
}

.uikit-score-block {
  position: relative;
}

.uikit-score-block::before {
  content: "";
  position: absolute;
  inset: 9px -12px;
  z-index: -1;
  border-radius: 24px;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--status-accent) 20%, transparent), transparent 70%);
  filter: blur(10px);
  opacity: .72;
}

.uikit-score-block strong {
  min-width: 118px !important;
  min-height: 58px;
  display: inline-grid;
  place-items: center;
  border-color: color-mix(in srgb, var(--status-accent) 72%, rgba(255, 255, 255, .12)) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(16, 35, 64, .98), rgba(5, 14, 28, .98)),
    #071425 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 0 24px color-mix(in srgb, var(--status-accent) 14%, transparent),
    0 12px 28px rgba(0, 0, 0, .24) !important;
}

.uikit-score-block small {
  color: color-mix(in srgb, var(--status-accent) 86%, white) !important;
}

.uikit-match-footer {
  background: rgba(5, 14, 27, .42) !important;
}

.match-open-label {
  color: color-mix(in srgb, var(--status-accent) 80%, #a7b0c2) !important;
}

.popular-strip {
  background:
    linear-gradient(135deg, rgba(0, 102, 255, .12), transparent 60%),
    rgba(7, 18, 34, .72) !important;
}

.mini-match-teams > strong {
  border-color: rgba(0, 229, 255, .56) !important;
  background: linear-gradient(180deg, rgba(13, 30, 55, .98), rgba(6, 16, 31, .98)) !important;
}

@keyframes lbGrainDrift {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-34px, 34px, 0); }
}

@keyframes lbStadiumPulse {
  0%, 100% { opacity: .62; transform: scale(1); }
  50% { opacity: .92; transform: scale(1.035); }
}

@keyframes lbBeamSweep {
  0%, 100% { transform: translateX(-8vw) rotate(14deg); opacity: .34; }
  45% { transform: translateX(9vw) rotate(-10deg); opacity: .72; }
  70% { transform: translateX(4vw) rotate(8deg); opacity: .46; }
}

@keyframes lbSparkLift {
  0% { transform: translate3d(0, 16vh, 0) scale(.72); opacity: 0; }
  12% { opacity: .78; }
  78% { opacity: .48; }
  100% { transform: translate3d(18px, -84vh, 0) scale(1.2); opacity: 0; }
}

@keyframes lbPanelSweep {
  0%, 52% { transform: translateX(-120%); }
  78%, 100% { transform: translateX(120%); }
}

@keyframes lbLiveDot {
  0%, 100% { transform: scale(.82); opacity: .72; box-shadow: 0 0 8px var(--lb-mint); }
  50% { transform: scale(1.35); opacity: 1; box-shadow: 0 0 18px var(--lb-mint), 0 0 34px rgba(0, 255, 163, .28); }
}

@keyframes lbLiveCardGlow {
  0%, 100% { box-shadow: 0 18px 50px rgba(0, 0, 0, .28), 0 0 24px rgba(0, 255, 163, .08); }
  50% { box-shadow: 0 22px 60px rgba(0, 0, 0, .32), 0 0 36px rgba(0, 255, 163, .17); }
}

@keyframes lbScoreBurst {
  0% { transform: scale(1); }
  34% { transform: scale(1.018); }
  100% { transform: scale(1); }
}

@media (max-width: 980px) {
  .feed-top-stack .feed-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .feed-top-stack .ultra-wall-main {
    min-height: 180px !important;
  }
}

@media (max-width: 720px) {
  .uikit-match-body {
    grid-template-columns: minmax(0, 1fr) minmax(82px, 96px) minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 18px 10px !important;
  }

  .uikit-team-open {
    min-height: 0;
  }

  .uikit-team-open img {
    padding: 6px;
    border-radius: 14px;
  }

  .uikit-score-block strong {
    min-width: 78px !important;
    min-height: 50px;
  }
}

@media (max-width: 560px) {
  .feed-top-stack .feed-dashboard {
    grid-template-columns: 1fr !important;
  }

  .feed-stat-card,
  .feed-stat-card.wide {
    min-height: 112px !important;
  }

  .status-mini-pill,
  .live-mini-dot,
  .country-mini,
  .popular-tag {
    font-size: .66rem !important;
    padding-inline: 8px !important;
  }
}