:root {
  --es-lol: #C89B3C;
  --es-val: #FF4655;
  --es-cs:  #F5A623;
  --es-cod: #7FB640;
  --es-rl:  #4FC3F7;
}


#esport-head {
  max-width: 1200px; margin: 0 auto; padding: 108px 2.5rem 0;
  position: relative; z-index: 1; width: 100%; flex-shrink: 0;
}
.esport-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.esport-head-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; font-size: .68rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}
.esport-head-eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse-dot 1.8s infinite; }
.esport-head-title {
  font-family: 'Outfit', sans-serif; font-size: 2rem; font-weight: 900;
  display: flex; align-items: center; gap: 12px; letter-spacing: -0.02em;
}
.esport-head-title i { color: var(--text); }
.esport-head-sub { color: var(--text-dim); font-size: .92rem; margin-top: .45rem; max-width: 46ch; }
.esport-head-credit { color: var(--text-muted); font-size: .68rem; margin-top: .5rem; opacity: .65; }


.esport-jump {
  position: sticky; top: 87px; z-index: 5; display: flex; gap: 4px;
  padding: 5px; border-radius: 50px; background: rgba(8,8,8,.72);
  border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35); overflow-x: auto; scrollbar-width: none;
}
.esport-jump::-webkit-scrollbar { display: none; }
.esport-jump-indicator { display: none; }
.esport-jump-btn {
  display: flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 50px;
  color: var(--text-muted); font-size: .82rem; font-weight: 700; white-space: nowrap;
  transition: color .2s ease, background .2s ease; cursor: pointer; position: relative; z-index: 1;
}
.esport-jump-btn:hover { color: var(--text); background: rgba(255,255,255,.06); }
.esport-jump-btn.active { color: var(--text); background: rgba(255,255,255,.1); }
.esport-jump-btn .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px currentColor; }
.esport-jump-logo {
  width: 16px; height: 16px; flex-shrink: 0; object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1); opacity: .85;
}
.esport-jump-btn.active .esport-jump-logo, .esport-jump-btn:hover .esport-jump-logo { opacity: 1; }


#esport-body { max-width: 1200px; margin: 0 auto; padding: 2.4rem 2.5rem 100px; position: relative; z-index: 1; width: 100%; flex: 1; display: flex; flex-direction: column; gap: 1.4rem; }


.esport-game {
  position: relative; overflow: hidden;
  border: 1px solid var(--glass-border); background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(13,13,13,.4) 40%);
  border-radius: var(--radius); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  scroll-margin-top: 150px; transition: border-color .3s, transform .3s;
}
.esport-game:hover { border-color: rgba(255,255,255,.2); }
.esport-game::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--game-color, var(--blue)) 0%, transparent 85%);
}

.esport-game::after {
  content: ''; position: absolute; top: -50%; right: -10%; width: 320px; height: 320px;
  background: var(--game-color, var(--blue)); opacity: .09; filter: blur(120px); border-radius: 50%; pointer-events: none;
}

.esport-game-watermark {
  position: absolute; top: 50%; right: -30px; transform: translateY(-50%);
  width: 240px; max-width: 45%; height: auto; z-index: 0; pointer-events: none; user-select: none;
  opacity: .05; filter: grayscale(1) brightness(0) invert(1);
}

.esport-game-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; padding: 20px 26px; border-bottom: 1px solid var(--glass-border); }

.esport-game-badge {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; padding: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, color-mix(in srgb, var(--game-color, var(--blue)) 30%, #0A0A0A), #0A0A0A);
  border: 1px solid color-mix(in srgb, var(--game-color, var(--blue)) 55%, var(--glass-border));
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35), inset 0 0 14px color-mix(in srgb, var(--game-color, var(--blue)) 30%, transparent);
}
.esport-game-badge img {
  width: 100%; height: 100%; object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1) drop-shadow(0 0 6px color-mix(in srgb, var(--game-color, var(--blue)) 70%, transparent));
}
.esport-game-titles { flex: 1; min-width: 0; }
.esport-game-name { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.12rem; letter-spacing: -0.01em; }
.esport-game-meta { font-size: .76rem; color: var(--text-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; font-weight: 650; }


.esport-game-live-pill {
  display: flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 50px;
  background: rgba(255,70,85,.12); border: 1px solid rgba(255,70,85,.4);
  font-size: .72rem; font-weight: 750; letter-spacing: .02em; color: #FF6B78; flex-shrink: 0;
}
.esport-game-live-pill .pulse { width: 6px; height: 6px; background: #FF6B78; border-radius: 50%; animation: pulse-dot 1.6s infinite; }


.esport-game-cols { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; }
.esport-col + .esport-col { border-left: 1px solid var(--glass-border); }
.esport-col-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 26px;
  font-size: .72rem; font-weight: 750; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--glass-border); background: rgba(255,255,255,.015);
}
.esport-col-head i { width: 13px; height: 13px; color: var(--text-muted); }
.esport-col-body { min-height: 64px; }


.esport-match { padding: 14px 26px; border-bottom: 1px solid var(--glass-border); transition: background .15s; }
.esport-match:last-child { border-bottom: none; }
.esport-match:hover { background: rgba(255,255,255,.03); }
.esport-match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }

.esport-team { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: .84rem; font-weight: 700; }
.esport-team.right { justify-content: flex-end; text-align: right; }

.esport-team-logo {
  width: 27px; height: 27px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--team-bg, var(--glass)); border: 1px solid var(--team-border, var(--glass-border));
  font-size: .6rem; font-weight: 800; font-family: 'Outfit', sans-serif; color: var(--team-fg, var(--text-dim));
  box-shadow: inset 0 0 8px rgba(255,255,255,.1);
}
.esport-team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esport-team.winner .esport-team-name { color: var(--text); }
.esport-team.loser .esport-team-name { color: var(--text-muted); font-weight: 600; }
.esport-team.loser .esport-team-logo { opacity: .5; }
.esport-team.winner .esport-team-logo { box-shadow: inset 0 0 8px rgba(255,255,255,.1), 0 0 0 1px rgba(255,255,255,.25); }

.esport-score {
  font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 1rem; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 6px 15px; border-radius: 10px; background: rgba(0,0,0,.35);
  border: 1px solid color-mix(in srgb, var(--game-color, var(--blue)) 30%, var(--glass-border));
  color: var(--text-muted); box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.esport-score .sep { color: var(--text-muted); font-weight: 500; font-size: .8em; }
.esport-score .win { color: var(--text); text-shadow: 0 0 12px rgba(255,255,255,.35); }

.esport-match-meta { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: .7rem; color: var(--text-muted); }
.esport-match-tag { padding: 3px 11px; border-radius: 50px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: .66rem; background: var(--glass); border: 1px solid var(--glass-border); }
.esport-match-tag.live { color: #FF6B78; background: rgba(255,70,85,.12); border-color: rgba(255,70,85,.4); }


.esport-fixture { display: flex; align-items: center; gap: 14px; padding: 12px 26px; border-bottom: 1px solid var(--glass-border); transition: background .15s; }
.esport-fixture:last-child { border-bottom: none; }
.esport-fixture:hover { background: rgba(255,255,255,.03); }
.esport-fixture-time {
  flex-shrink: 0; width: 54px; text-align: center; font-family: 'Outfit', sans-serif; font-weight: 800;
  font-size: .76rem; padding: 6px 4px; border-radius: 10px; background: rgba(0,0,0,.35);
  border: 1px solid color-mix(in srgb, var(--game-color, var(--blue)) 30%, var(--glass-border));
  color: var(--text); font-variant-numeric: tabular-nums;
}
.esport-fixture-time small { display: block; font-size: .56rem; font-weight: 650; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 1px; }
.esport-fixture-teams { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: .83rem; font-weight: 700; }
.esport-fixture-teams .vs { color: var(--text-muted); font-weight: 600; font-size: .68rem; text-transform: uppercase; }
.esport-fixture-comp { flex-shrink: 0; font-size: .7rem; color: var(--text-muted); text-align: right; max-width: 140px; text-transform: uppercase; letter-spacing: .03em; }

.esport-empty-col { padding: 2.3rem 26px; text-align: center; color: var(--text-muted); font-size: .84rem; }

@media (max-width: 860px) {
  .esport-game-cols { grid-template-columns: 1fr; }
  .esport-col + .esport-col { border-left: none; border-top: 1px solid var(--glass-border); }
}
@media (max-width: 640px) {
  #esport-head, #esport-body { padding-left: 1.2rem; padding-right: 1.2rem; }
  .esport-jump { position: static; }
  .esport-fixture-comp { display: none; }
  .esport-team-name { max-width: 88px; }
  .esport-game-badge { width: 38px; height: 38px; padding: 6px; }
  .esport-game-watermark { width: 140px; right: -20px; opacity: .045; }
}