.sponi-stats-page {
  --stats-gold: #f5b942;
  --stats-orange: #ff7a18;
  --stats-panel: rgba(15, 20, 31, .94);
  --stats-line: rgba(255, 255, 255, .11);
  color: #f7f8fb;
  display: grid;
  gap: 28px;
  padding-bottom: 64px;
}

.stats-hero {
  align-items: end;
  background: radial-gradient(circle at 90% 10%, rgba(255, 122, 24, .25), transparent 38%), linear-gradient(135deg, #171d2b, #0c1018);
  border: 1px solid var(--stats-line);
  border-radius: 22px;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  overflow: hidden;
  padding: 34px;
  position: relative;
}

.stats-hero::after {
  color: rgba(255,255,255,.035);
  content: "S";
  font-size: 230px;
  font-weight: 900;
  line-height: .7;
  position: absolute;
  right: 18px;
  top: 10px;
  transform: rotate(-8deg);
}

.stats-hero-copy { max-width: 760px; position: relative; z-index: 1; }
.stats-kicker, .stats-section-heading > div:first-child, .stats-section-heading > div > div:first-child {
  color: var(--stats-gold);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .16em;
}
.stats-hero h1 { font-size: clamp(2rem, 5vw, 4rem); line-height: 1; margin: 8px 0 13px; }
.stats-hero p { color: #aeb6c5; margin: 0; max-width: 650px; }

.stats-scope-switch {
  background: rgba(0,0,0,.3);
  border: 1px solid var(--stats-line);
  border-radius: 12px;
  display: flex;
  padding: 4px;
  position: relative;
  z-index: 1;
}
.stats-scope-switch button {
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: #aeb6c5;
  cursor: pointer;
  font-weight: 700;
  padding: 10px 15px;
  white-space: nowrap;
}
.stats-scope-switch button.active { background: linear-gradient(135deg, var(--stats-gold), var(--stats-orange)); color: #161009; }

.stats-hall, .stats-board {
  background: var(--stats-panel);
  border: 1px solid var(--stats-line);
  border-radius: 20px;
  padding: 24px;
}
.stats-section-heading { margin-bottom: 18px; }
.stats-section-heading h2 { font-size: clamp(1.35rem, 3vw, 2rem); margin: 5px 0 0; }
.stats-hall-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-hall-card {
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border: 1px solid var(--stats-line);
  border-radius: 15px;
  cursor: pointer;
  min-height: 135px;
  padding: 18px;
  position: relative;
  transition: border-color .2s, transform .2s;
}
.stats-hall-card:hover, .stats-hall-card:focus { border-color: rgba(245,185,66,.55); outline: none; transform: translateY(-2px); }
.stats-hall-card.is-antimate { background: linear-gradient(145deg, rgba(207,49,64,.18), rgba(255,255,255,.018)); }
.stats-hall-icon { font-size: 1.45rem; position: absolute; right: 15px; top: 13px; }
.stats-hall-label { color: var(--stats-gold); display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; padding-right: 28px; text-transform: uppercase; }
.stats-hall-card strong { display: block; font-size: 1.12rem; margin-top: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-hall-card p { color: #9da7b8; font-size: .82rem; margin: 6px 0 0; }

.stats-board-heading { align-items: end; display: flex; gap: 20px; justify-content: space-between; }
.stats-search {
  background: #0c111a;
  border: 1px solid var(--stats-line);
  border-radius: 10px;
  color: #fff;
  min-width: 220px;
  padding: 11px 13px;
}
.stats-search:focus { border-color: var(--stats-gold); outline: none; }
.stats-table-wrap { overflow-x: auto; }
.stats-table { border-collapse: collapse; min-width: 1050px; width: 100%; }
.stats-table th, .stats-table td { border-bottom: 1px solid rgba(255,255,255,.07); padding: 13px 11px; text-align: right; white-space: nowrap; }
.stats-table th:nth-child(2), .stats-table td:nth-child(2) { text-align: left; }
.stats-table thead th { color: #7f899a; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; }
.stats-table tbody tr { cursor: pointer; transition: background .15s; }
.stats-table tbody tr:hover, .stats-table tbody tr:focus { background: rgba(245,185,66,.07); outline: none; }
.stats-table tbody tr:nth-child(1) td:first-child { color: #ffd65a; font-weight: 900; }
.stats-table tbody tr:nth-child(2) td:first-child { color: #d4dae3; font-weight: 900; }
.stats-table tbody tr:nth-child(3) td:first-child { color: #d38c4c; font-weight: 900; }
.stats-table tbody td:nth-child(3) { color: var(--stats-gold); font-weight: 800; }
.stats-empty { color: #919bad; padding: 32px !important; text-align: center !important; }
.stats-loading, .stats-error { color: #aab3c2; padding: 38px 16px; text-align: center; }
.stats-error strong { color: #fff; display: block; font-size: 1.2rem; }
.stats-error p { margin: 8px auto 15px; max-width: 600px; }
.stats-error button { background: var(--stats-gold); border: 0; border-radius: 9px; cursor: pointer; font-weight: 800; padding: 10px 14px; }

.stats-detail-layer {
  align-items: flex-start;
  background: rgba(3,6,11,.78);
  display: none;
  inset: 0;
  justify-content: center;
  overflow-y: auto;
  padding: 44px 18px;
  position: fixed;
  z-index: 5000;
}
.stats-detail-layer.open { display: flex; }
.stats-detail {
  background: #121824;
  border: 1px solid var(--stats-line);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  max-width: 850px;
  padding: 28px;
  position: relative;
  width: 100%;
}
.stats-detail h2 { font-size: 2rem; margin: 6px 0 0; }
.stats-steamid { color: #707b8d; font-size: .78rem; margin: 4px 0 22px; }
.stats-detail-close { background: rgba(255,255,255,.08); border: 0; border-radius: 50%; color: #fff; cursor: pointer; font-size: 1.5rem; height: 38px; position: absolute; right: 18px; top: 18px; width: 38px; }
.stats-detail-metrics { display: grid; gap: 9px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-detail-metrics > div { background: #0c111a; border: 1px solid rgba(255,255,255,.07); border-radius: 11px; padding: 12px; }
.stats-detail-metrics span { color: #8490a2; display: block; font-size: .72rem; }
.stats-detail-metrics strong { display: block; font-size: 1.18rem; margin-top: 3px; }
.stats-detail-section { border-top: 1px solid var(--stats-line); margin-top: 22px; padding-top: 18px; }
.stats-detail-section h3 { margin: 0 0 12px; }
.stats-weapon-list { display: grid; gap: 7px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats-weapon-list > div, .stats-match { align-items: center; background: #0c111a; border-radius: 9px; display: flex; justify-content: space-between; padding: 10px 12px; }
.stats-weapon-list span { color: #aab3c2; }
.stats-match-list { display: grid; gap: 7px; }
.stats-match { display: grid; gap: 12px; grid-template-columns: 90px 1fr auto; }
.stats-match.won strong, .stats-match.won b { color: #67d391; }
.stats-match.lost strong, .stats-match.lost b { color: #ff7783; }
.stats-match span { color: #aab3c2; }
.stats-detail-loading { align-self: center; background: #121824; border-radius: 12px; color: #fff; padding: 25px; }

@media (max-width: 1050px) {
  .stats-hall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-detail-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .stats-hero { align-items: stretch; flex-direction: column; padding: 24px; }
  .stats-scope-switch { align-self: flex-start; }
  .stats-hall, .stats-board { border-radius: 15px; padding: 16px; }
  .stats-board-heading { align-items: stretch; flex-direction: column; }
  .stats-search { min-width: 0; width: 100%; }
  .stats-detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 470px) {
  .stats-hall-grid, .stats-weapon-list { grid-template-columns: 1fr; }
  .stats-detail { padding: 21px 15px; }
  .stats-match { grid-template-columns: 75px 1fr auto; }
}