:root {
  --pg-bg: #080808;
  --pg-panel: #121212;
  --pg-panel-2: #1a1a1c;
  --pg-border: rgba(255,255,255,.08);
  --pg-text: #f5f1e8;
  --pg-muted: #b9afa2;
  --pg-accent: #c5162e;
  --pg-accent-2: #d7b56d;
  --pg-danger-soft: rgba(197, 22, 46, .14);
}

body {
  background: radial-gradient(circle at top, #2a1116 0%, #12090c 28%, var(--pg-bg) 62%, #030303 100%);
  color: var(--pg-text);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

a {
  text-decoration: none;
}

.navbar {
  background: rgba(8, 13, 24, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pg-border);
}

.navbar-brand span {
  color: var(--pg-accent-2);
}

.section-padding {
  padding: 5rem 0;
}

.section-heading .eyebrow {
  display: inline-block;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: rgba(215, 181, 109, .12);
  color: #f1d89c;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1rem;
}

.section-heading h2 {
  font-weight: 700;
  margin-bottom: .75rem;
}

.section-heading p,
.text-muted-custom {
  color: var(--pg-muted);
}

.hero-carousel {
  margin-top: 84px;
}

.carousel-item {
  min-height: 560px;
  border-radius: 1.5rem;
  overflow: hidden;
}

.hero-slide {
  min-height: 560px;
  display: flex;
  align-items: center;
  position: relative;
  isolation: isolate;
}

.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(4, 9, 18, .92) 18%, rgba(4, 9, 18, .62) 56%, rgba(4, 9, 18, .2) 100%);
  z-index: -1;
}

.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -2;
  transform: scale(1.02);
}

.slide-1::after {
  background-image: linear-gradient(135deg, rgba(197,22,46,.58), rgba(7,7,8,.78)), url('https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format&fit=crop&w=1600&q=80');
}

.slide-2::after {
  background-image: linear-gradient(135deg, rgba(87,10,20,.76), rgba(7,7,8,.72)), url('https://images.unsplash.com/photo-1511882150382-421056c89033?auto=format&fit=crop&w=1600&q=80');
}

.slide-3::after {
  background-image: linear-gradient(135deg, rgba(215,181,109,.26), rgba(7,7,8,.82)), url('https://images.unsplash.com/photo-1541278107931-e006523892df?auto=format&fit=crop&w=1600&q=80');
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .85rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  font-size: .85rem;
  color: #fff;
  margin-bottom: 1rem;
}

.hero-slide h1 {
  font-size: clamp(2.2rem, 4vw, 4.2rem);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 1rem;
}

.hero-slide p {
  font-size: 1.05rem;
  color: #d3dced;
  max-width: 680px;
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.hero-metric {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1rem;
  padding: 1rem;
}

.hero-metric .label {
  font-size: .8rem;
  color: #c7d1e4;
  text-transform: uppercase;
  letter-spacing: .08em;
  display: block;
  margin-bottom: .25rem;
}

.hero-metric .value {
  font-weight: 700;
  font-size: 1.3rem;
}

.btn-accent {
  background: linear-gradient(135deg, #c5162e, #ed4a60);
  border: none;
  color: #fff;
  font-weight: 700;
}

.btn-accent:hover {
  color: #fff;
  opacity: .95;
}

.btn-outline-light-soft {
  border-color: rgba(255,255,255,.25);
  color: #fff;
}

.btn-outline-light-soft:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.35);
}

.content-card {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border: 1px solid var(--pg-border);
  border-radius: 1.25rem;
  box-shadow: 0 1rem 2rem rgba(0,0,0,.18);
}

.streamer-card,
.event-card,
.stat-card {
  height: 100%;
  background: linear-gradient(180deg, var(--pg-panel), var(--pg-panel-2));
  border: 1px solid var(--pg-border);
  border-radius: 1.25rem;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.streamer-card:hover,
.event-card:hover,
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1rem 2rem rgba(0,0,0,.2);
}

.streamer-card .banner {
  height: 120px;
  background: linear-gradient(120deg, rgba(197,22,46,.95), rgba(20,20,20,.92));
  position: relative;
}

.streamer-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 4px solid var(--pg-panel);
  background: linear-gradient(135deg, #d7b56d, #f4dfaa);
  color: #1f1a14;
  font-size: 1.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 1.25rem;
  bottom: -42px;
}

.streamer-meta {
  padding: 3.25rem 1.25rem 1.25rem;
}

.streamer-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #f1d89c;
  background: rgba(215,181,109,.12);
  border: 1px solid rgba(215,181,109,.18);
  padding: .35rem .55rem;
  border-radius: 999px;
  margin-bottom: .75rem;
}

.streamer-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}

.streamer-stats span,
.event-chip,
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: #d6deef;
  font-size: .82rem;
}

.stat-card {
  padding: 1.5rem;
}

.stat-card .icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 1rem;
  background: rgba(215,181,109,.12);
  color: #f1d89c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 1rem;
}

.stat-value {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: .25rem;
}

.stats-shell {
  padding: 2rem;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.filter-group {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.filter-chip.active {
  background: rgba(197,22,46,.16);
  border-color: rgba(197,22,46,.3);
  color: #ffbac4;
}

.leaderboard-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--pg-text);
  --bs-table-border-color: rgba(255,255,255,.08);
  margin-bottom: 0;

  /* let the table grow naturally based on content */
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}

.leaderboard-table thead .event-head {
  /* remove fixed width behavior */
  min-width: 0;
  width: 1%;
  white-space: nowrap;
  padding: .75rem .5rem;
  vertical-align: bottom;
  text-align: center;
}

.event-head .event-title {
  display: block;
  color: #f1d89c;
  font-size: .78rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.15;
  margin-bottom: .35rem;
  white-space: nowrap;
}

.event-head .event-meta {
  display: block;
  color: var(--pg-muted);
  font-size: .7rem;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.15;
  white-space: nowrap;
}

.leaderboard-table tbody td.event-score {
  min-width: 0;
  width: 1%;
  white-space: nowrap;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding-left: .5rem;
  padding-right: .5rem;
  color: #efe5d5;
}

.leaderboard-shell {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}

.table-scroll-wrap {
  overflow: auto;
  max-width: 100%;
  max-height: 650px;
  scrollbar-width: thin;
}

.table-scroll-wrap::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.table-scroll-wrap::-webkit-scrollbar-thumb {
  background: rgba(215,181,109,.28);
  border-radius: 999px;
}

.leaderboard-table thead th {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #b8c4d8;
  border-bottom-width: 1px;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 5;
  background: #151515;
}

.leaderboard-table thead .summary-head {
  vertical-align: middle;
  min-width: 110px;
}

.leaderboard-table thead .summary-head.username-col {
  min-width: 220px;
}

.leaderboard-table thead .event-head {
  min-width: 132px;
  white-space: normal;
  padding: .85rem .75rem;
  vertical-align: bottom;
}

.event-head .event-title {
  display: block;
  color: #f1d89c;
  font-size: .8rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.2;
  margin-bottom: .45rem;
}

.event-head .event-meta {
  display: block;
  color: var(--pg-muted);
  font-size: .72rem;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.25;
}

.leaderboard-table tbody td {
  vertical-align: middle;
  padding-top: .95rem;
  padding-bottom: .95rem;
  white-space: nowrap;
  background: transparent;
}

.leaderboard-table tbody td.event-score {
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #efe5d5;
  min-width: 132px;
}

.leaderboard-table tbody td.event-score.empty {
  color: #7f7468;
}

.leaderboard-table tbody tr:hover {
  background: rgba(255,255,255,.03);
}

.sticky-col {
  position: sticky;
  z-index: 4;
  background: #131313 !important;
  box-shadow: 1px 0 0 rgba(255,255,255,.05);
}

.sticky-rank {
  left: 0;
  min-width: 78px;
  width: 78px;
}

.sticky-username {
  left: 78px;
  min-width: 240px;
  width: 240px;
}

.sticky-top10 {
  left: 318px;
  min-width: 110px;
  width: 110px;
}

.sticky-avg {
  left: 428px;
  min-width: 110px;
  width: 110px;
}

.sticky-played {
  left: 538px;
  min-width: 100px;
  width: 100px;
}

.leaderboard-table thead .sticky-col {
  z-index: 9;
  background: #171717 !important;
}

.month-links {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: 1rem;
}

.month-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem .95rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: #e9ddca;
  font-weight: 600;
  font-size: .9rem;
}

.month-link.active {
  background: rgba(197,22,46,.16);
  border-color: rgba(197,22,46,.28);
  color: #ffb8c2;
}

.matrix-caption {
  color: var(--pg-muted);
  font-size: .92rem;
  margin-bottom: 1rem;
}

.score-hit {
  color: #f3dfad;
  font-weight: 700;
}

.score-win {
  color: #9ef0bf;
  font-weight: 800;
}

.rank-pill {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(215,181,109,.12);
  color: #f1d89c;
  font-weight: 800;
  border: 1px solid rgba(215,181,109,.18);
}

.player-cell {
  display: flex;
  align-items: center;
  gap: .9rem;
}

.player-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c5162e, #531018);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
}

.player-name {
  font-weight: 700;
  display: block;
}

.player-sub {
  color: var(--pg-muted);
  font-size: .85rem;
}

.gain-up {
  color: #6ee7a8;
  font-weight: 700;
}

.event-card {
  padding: 1.35rem;
}

.event-date {
  width: 60px;
  height: 60px;
  border-radius: 1rem;
  background: rgba(197,22,46,.12);
  border: 1px solid rgba(197,22,46,.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffb7c0;
  font-weight: 800;
  flex-shrink: 0;
}

.event-date small {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cta-banner {
  background: linear-gradient(135deg, rgba(197,22,46,.92), rgba(18,18,18,.98));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1.5rem;
  padding: 2rem;
}

.footer {
  border-top: 1px solid var(--pg-border);
  color: var(--pg-muted);
}

@media (max-width: 991.98px) {
  .carousel-item,
  .hero-slide {
    min-height: 620px;
  }

  .hero-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .section-padding {
    padding: 4rem 0;
  }

  .stats-shell {
    padding: 1.2rem;
  }

  .filter-bar {
    align-items: flex-start;
  }
}
.player-profile-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.player-profile-main {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.player-profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #c5162e, #531018);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.2);
}

.player-profile-sub {
  color: var(--pg-muted);
  font-size: .95rem;
}

.player-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.player-results-table {
  min-width: 900px;
}

.player-results-table th,
.player-results-table td {
  white-space: nowrap;
}

.player-results-table tbody td:nth-child(1) {
  width: 70px;
}

.player-results-table tbody td:nth-child(4),
.player-results-table tbody td:nth-child(5),
.player-results-table tbody td:nth-child(6) {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
  .player-profile-header {
    align-items: flex-start;
  }

  .player-profile-main {
    width: 100%;
  }

  .player-profile-actions {
    width: 100%;
  }
}

.hero-slide,
.carousel-inner,
.carousel-item {
  position: relative;
}

.hero-actions {
  position: relative;
  z-index: 20;
}

.hero-actions .btn {
  position: relative;
  z-index: 21;
}

.hero-slide::before,
.hero-slide::after {
  pointer-events: none;
}

/* shrink the clickable overlay area for prev/next */
.carousel-control-prev,
.carousel-control-next {
  width: 72px;
  z-index: 5;
}