@charset "UTF-8";
:root {
  color-scheme:dark;
  --bg:#090909;
  --panel:#131313;
  --line:#303030;
  --text:#f4f4ef;
  --muted:#aaa9a2;
  --accent:#c6f24e;
  --radiant:#c5c5c5;
  --dire:#f08b8c;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-synthesis:none
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  display:flex;
  flex-direction:column;
  font-size:16px;
  line-height:1.6
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button:focus-visible,a:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px
}

button,a {
  touch-action:manipulation
}

[hidden] {
  display:none!important
}

.container {
  width:min(1200px,calc(100% - 96px));
  margin-inline:auto
}

main {
  flex:1
}

.site-header {
  min-height:92px;
  padding:0 48px;
  display:flex;
  align-items:center;
  gap:28px;
  border-bottom:1px solid var(--line);
  background:#141414bb
}

.brand {
  display:flex;
  align-items:center;
  gap:13px;
  font-size:19px;
  font-weight:800;
  letter-spacing:2px;
  white-space:nowrap
}

.brand-light {
  color:var(--muted);
  font-weight:500
}

.brand-mark {
  width:33px;
  height:33px;
  display:grid;
  place-items:center;
  background:#bf654a;
  color:#fff;
  font-size:24px;
  font-family:Georgia,serif;
  transform:rotate(-8deg);
  border-radius:3px
}

.site-header nav {
  align-self:stretch;
  display:flex
}

.nav-link {
  display:flex;
  align-items:center;
  color:var(--muted);
  border-bottom:2px solid transparent;
  padding:0 4px
}

.nav-link.active,.nav-link[aria-current="page"] {
  color:var(--text);
  border-color:var(--accent)
}

.nav-link:hover,.back-link:hover {
  color:var(--accent)
}

.header-note {
  margin-left:auto;
  font-size:12px;
  letter-spacing:2px;
  color:var(--muted)
}

.page-heading {
  padding:58px 0 36px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px
}

h1 {
  font-size:clamp(30px,4vw,46px);
  font-weight:650;
  line-height:1.18;
  letter-spacing:-1.6px;
  margin:0;
  overflow-wrap:anywhere
}

.heading-dot {
  color:var(--accent)
}

.subtitle {
  color:var(--muted);
  font-size:16px;
  margin:14px 0 0
}

.source-label {
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--muted);
  font-size:14px;
  padding-bottom:4px;
  white-space:nowrap
}

.source-dot {
  width:6px;
  height:6px;
  background:var(--accent);
  border-radius:50%;
  box-shadow:none
}

.panel {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden
}

.panel-heading {
  padding:22px 26px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  border-bottom:1px solid var(--line)
}

h2 {
  font-size:18px;
  font-weight:600;
  margin:0
}

.muted {
  color:var(--muted)
}

.small {
  font-size:14px
}

.mono {
  font-variant-numeric:tabular-nums;
  font-family:inherit;
  font-size:inherit
}

.table-scroll {
  width:100%;
  overflow-x:auto;
  scrollbar-color:#4f4f4f var(--panel)
}

table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  white-space:nowrap
}

thead {
  background:#161616;
  color:var(--muted);
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase
}

th,td {
  padding:20px 26px
}

thead th {
  font-weight:500;
  padding-block:13px
}

tbody tr {
  border-bottom:1px solid #2c2c2c;
  transition:background .15s
}

tbody tr:last-child {
  border-bottom:0
}

tbody tr:hover {
  background:#232323
}

.date-cell {
  color:#d4d4d4
}

.match-id {
  color:var(--muted)
}

.badge {
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-radius:5px;
  padding:4px 10px;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  border:1px solid transparent
}

.badge:before {
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor
}

.badge.radiant {
  color:var(--radiant);
  background:#47474740;
  border-color:#6a6a6a55
}

.badge.dire {
  color:var(--dire);
  background:#63333440;
  border-color:#5d5d5d55
}

.badge.unknown {
  color:var(--muted);
  background:#303030
}

.action-cell {
  text-align:right
}

.button.match-link {
  color:#1d1711;
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:none;
  font-weight:700;
  min-height:44px;
  padding:9px 16px;
  font-size:14px;
  white-space:nowrap
}

.button.match-link:hover {
  color:#1d1711;
  background:#f5c18c;
  border-color:#f5c18c
}

.panel-footer {
  padding:19px 26px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  border-top:1px solid var(--line);
  background:#181818
}

.pagination {
  display:flex;
  align-items:center;
  gap:17px
}

.page-number {
  font-size:13px;
  color:var(--muted);
  white-space:nowrap
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:38px;
  padding:8px 16px;
  border:1px solid #606060;
  border-radius:5px;
  background:#2f2f2f;
  color:var(--text);
  cursor:pointer;
  font-size:14px;
  font-weight:500
}

.button:hover {
  background:#404040;
  border-color:#919191
}

.button-quiet {
  background:transparent;
  border-color:var(--line)
}

.button[aria-disabled=true] {
  opacity:.38;
  cursor:default;
  pointer-events:none
}

.page-note {
  color:var(--muted);
  font-size:14px;
  margin:22px 0 0
}

.site-footer {
  margin-top:78px;
  padding-block:25px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font-size:13px
}

.site-footer>span:first-child {
  letter-spacing:2px;
  font-size:12px
}

.status {
  min-height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 24px;
  gap:12px
}

.status p {
  margin:0;
  max-width:440px
}

.status h2 {
  font-size:20px;
  line-height:1.4
}

.status .button {
  margin-top:8px
}

.spinner {
  height:26px;
  width:26px;
  border-radius:50%;
  border:2px solid #414141;
  border-top-color:var(--accent);
  animation:spin 1s linear infinite;
  margin-bottom:4px
}

@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}

.skip-link {
  position:absolute;
  left:16px;
  top:-100px;
  z-index:5;
  background:var(--panel);
  padding:12px
}

.skip-link:focus {
  top:10px
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.notice {
  padding:20px;
  border:1px solid var(--accent);
  border-radius:6px
}

.back-link {
  display:inline-block;
  margin-top:30px;
  color:var(--muted);
  font-size:14px;
  padding:6px 0
}

.match-heading {
  padding-top:28px;
  padding-bottom:30px
}

.match-heading h1 {
  font-size:clamp(28px,4vw,40px)
}

.match-summary {
  display:grid;
  grid-template-columns:1fr 1fr 1.2fr 1.4fr;
  gap:16px;
  margin-bottom:30px
}

.stat-card {
  padding:24px 26px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:8px
}

.stat-label {
  display:block;
  color:var(--muted);
  font-size:13px;
  margin-bottom:12px
}

.stat-value {
  font-size:26px;
  line-height:1.5;
  min-height:39px
}

.stat-value .badge {
  font-size:20px;
  padding:3px 12px
}

.stat-date {
  font-size:20px
}

.stat-mode {
  font-size:20px;
  overflow-wrap:anywhere
}

.draft-panel {
  margin-bottom:26px
}

.draft-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  padding:24px 26px
}

.draft-side {
  min-width:0
}

.draft-group {
  margin-top:18px
}

.draft-label {
  margin:0 0 10px;
  color:var(--muted);
  font-size:13px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase
}

.draft-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none
}

.draft-hero {
  min-width:0;
  max-width:100%;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#161616;
  font-size:14px;
  overflow-wrap:anywhere
}

.draft-bans .hero-icon {
  opacity:.65;
  filter:grayscale(.65)
}

.draft-empty,.draft-unavailable {
  margin:0
}

.draft-unavailable {
  grid-column:1/-1
}

.teams {
  display:grid;
  gap:24px
}

.team-panel.radiant {
  border-top:2px solid #a5a5a5
}

.team-panel.dire {
  border-top:2px solid #7a7a7a
}

.team-title-group {
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0
}

.team-identity {
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0
}

.team-logo {
  width:44px;
  height:44px;
  flex-shrink:0;
  object-fit:contain;
  border-radius:6px
}

.team-title {
  font-size:20px
}

.radiant .team-title {
  color:var(--radiant)
}

.dire .team-title {
  color:var(--dire)
}

.team-name {
  color:var(--muted);
  font-size:15px;
  overflow-wrap:anywhere;
  min-width:0
}

.team-meta {
  color:var(--muted);
  font-size:14px;
  white-space:nowrap
}

.players-table th,.players-table td {
  padding:17px 24px
}

.players-table thead th {
  padding-block:13px
}

.players-table .player-identity {
  font-weight:400;
  white-space:normal;
  min-width:220px;
  max-width:300px
}

.player-name {
  display:block;
  overflow-wrap:anywhere;
  font-weight:500
}

.player-identity-content {
  display:flex;
  align-items:center;
  gap:12px
}

.player-avatar {
  position:relative;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  flex-shrink:0;
  overflow:hidden;
  border:1px solid #575757;
  border-radius:7px;
  background:#343434;
  color:#e4e4e4;
  font-size:19px;
  font-weight:600
}

.avatar-image {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}

.player-details {
  min-width:0
}

.player-account {
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:4px
}

a.player-account {
  color:#c6f24e;
  text-decoration:underline;
  text-decoration-color:#737373;
  text-underline-offset:3px
}

a.player-account:hover {
  color:var(--accent);
  text-decoration-color:currentColor
}

.hero-cell {
  color:var(--muted);
  font-size:14px
}

.hero-identity {
  display:inline-flex;
  align-items:center;
  gap:9px
}

.hero-icon {
  width:32px;
  height:32px;
  flex-shrink:0;
  object-fit:contain
}

.kda-divider {
  color:#717171
}

.kills {
  color:#d7e6dc
}

.damage {
  color:#e5bf96
}

.team-empty {
  padding:16px 26px
}

.team-panel .table-scroll {
  border-radius:0 0 8px 8px
}

@media(min-width:1500px) {
  .site-header {
    padding-inline:max(48px,calc((100vw - 1200px)/2))
  }
}

@media(max-width:900px) {
  .container {
    width:calc(100% - 48px)
  }
  .site-header {
    padding-inline:24px;
    gap:32px
  }
  .header-note {
    display:none
  }
  th,td {
    padding-inline:20px
  }
  .panel-footer {
    align-items:flex-start;
    flex-direction:column
  }
  .pagination {
    align-self:flex-end
  }
  .match-summary {
    grid-template-columns:1fr 1fr
  }
  .team-title-group {
    align-items:flex-start;
    flex-direction:column;
    gap:4px
  }
}

@media(max-width:540px) {
  .draft-grid {
    grid-template-columns:minmax(0,1fr);
    padding:18px
  }
  .container {
    width:calc(100% - 32px)
  }
  .site-header {
    padding-inline:16px;
    min-height:76px;
    gap:20px;
    justify-content:space-between
  }
  .brand {
    font-size:15px;
    letter-spacing:1px;
    gap:9px
  }
  .brand-mark {
    width:28px;
    height:28px;
    font-size:20px
  }
  .nav-link {
    font-size:13px
  }
  .page-heading {
    padding:34px 0 24px;
    align-items:flex-start;
    flex-direction:column;
    gap:18px
  }
  h1 {
    letter-spacing:-1px
  }
  .subtitle {
    font-size:15px
  }
  .source-label {
    font-size:13px
  }
  .panel-heading {
    padding:18px
  }
  .panel-footer {
    padding:16px;
    gap:15px
  }
  .panel-footer>.small {
    font-size:12px
  }
  .pagination {
    width:100%;
    justify-content:space-between;
    gap:8px
  }
  .button {
    padding-inline:12px;
    min-height:42px
  }
  .status {
    padding-inline:18px;
    min-height:230px
  }
  .site-footer {
    margin-top:50px;
    font-size:12px;
    flex-direction:column;
    gap:4px
  }
  .match-heading {
    padding-top:20px
  }
  .match-summary {
    gap:10px;
    margin-bottom:24px
  }
  .stat-card {
    padding:18px 16px
  }
  .stat-value {
    font-size:24px
  }
  .stat-value .badge {
    font-size:17px
  }
  .stat-date {
    font-size:18px
  }
  .team-heading {
    gap:10px
  }
  .team-meta {
    font-size:12px
  }
  .team-title {
    font-size:18px
  }
  .players-table th,.players-table td {
    padding-inline:18px
  }
  .players-table .player-identity {
    min-width:190px
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}

/* History shares the match overview palette; all rules stay on this page. */
.stats-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:24px }
.stats-summary .stat-card { background:var(--panel); min-width:0; padding:20px }
.stats-summary .stat-value { font-size:24px; overflow-wrap:anywhere }
.stats-summary .stat-value + .small { display:block; margin-top:8px }
.stats-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start }
.stats-grid > * { min-width:0 }
.stats-table th, .stats-table td { padding:14px 18px; font-size:14px }
.stats-table thead { background:#1a1a1a }
.stats-table .stats-row-name { font-weight:500; min-width:180px; white-space:normal }
.stats-row-name .hero-identity > span { overflow-wrap:anywhere }
.stats-row-name .hero-icon { width:28px; height:28px }
.stats-explanation { margin:0; padding:16px 20px; line-height:1.7 }
.stats-coverage { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 22px }
.stats-coverage p { margin:0; max-width:900px }
.stats-coverage button { flex-shrink:0 }
.stats-controls { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; padding:20px; background:var(--panel); border:1px solid var(--line); border-radius:8px }
.stats-control-label { display:flex; flex-direction:column; gap:8px; min-width:0; color:var(--muted); font-size:14px; max-width:100% }
.stats-select { width:100%; max-width:420px; min-width:180px; padding:10px 12px; font:inherit; color:var(--text); background:#151515; border:1px solid #535353; border-radius:5px }
.stats-select:focus-visible { outline:2px solid var(--accent); outline-offset:3px }
.stats-player-heading { display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; padding:24px 0 }
.stats-player-heading h2 { font-size:20px; overflow-wrap:anywhere }
.stats-player-heading .player-account { margin:0 }
.stats-player-heading > :last-child { margin-left:auto }
.stats-player-link { color:#c6f24e; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere }
.stats-item { display:inline-flex; align-items:center; gap:10px }
.stats-item-icon { width:36px; height:27px; object-fit:cover; border-radius:3px; flex-shrink:0 }
.stats-sort-tools { padding:14px 20px; border-bottom:1px solid var(--line); background:#1a1a1a }
.stats-sort-tools > p { margin:0 0 10px; font-size:13px }
.stats-sort-tools > .button { margin-top:10px; padding:5px 10px; min-height:32px; font-size:13px }
.sort-priorities { display:flex; flex-wrap:wrap; gap:7px; list-style:none; padding:0; margin:0 }
.sort-priority { display:flex; align-items:center; gap:6px; padding:4px 7px 4px 10px; border:1px solid #565656; background:#2b2b2b; border-radius:5px; font-size:13px }
.sort-priority-action { display:grid; place-items:center; min-width:28px; min-height:28px; padding:0; background:#ffffff0a; color:var(--text); border:0; border-radius:3px; cursor:pointer }
.sort-priority-action:disabled { opacity:.3; cursor:default }
.stats-sort-button { padding:7px 0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; white-space:nowrap }
.stats-sort-button[aria-pressed=true] { color:#c6f24e }
.stats-sort-indicator { color:#c6f24e }
.stats-table thead th { padding-block:4px; letter-spacing:0; text-transform:none; font-size:13px }
.player-summary { max-width:760px; margin-inline:auto; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; text-align:center }
.player-summary .stat-card { padding:22px; display:flex; flex-direction:column; align-items:center; justify-content:center }
.player-summary .stat-label { margin-bottom:8px }
.player-summary .stat-value { font-size:22px; min-height:32px; line-height:1.4 }
.player-summary .small { font-size:14px }
.stats-avatar { width:32px; height:32px; border-radius:5px; font-size:15px }
.stats-player-identity { display:inline-flex; align-items:center; gap:10px; text-decoration:none }
.stats-player-text { display:flex; flex-direction:column; gap:3px; min-width:0; overflow-wrap:anywhere }
.stats-player-text .small { font-size:12px }
.player-picker { margin-bottom:18px }
.player-picker-heading { padding:18px 20px; cursor:pointer; color:#c6f24e; font-size:16px; overflow-wrap:anywhere }
.player-picker-heading:focus-visible { outline:2px solid var(--accent); outline-offset:-4px }
.player-picker-tools { display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px; padding:0 20px 16px }
.player-picker-tools > :first-child { flex:1; min-width:200px }
.player-search { max-width:none }
.player-search-count { margin:0; padding:0 20px 12px; font-size:13px }
.player-search-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; list-style:none; padding:0 20px; margin:0 0 16px }
.player-search-list > li { min-width:0 }
.player-choice { display:grid; grid-template-columns:32px minmax(0,1fr); align-items:center; gap:10px; padding:12px; border:1px solid var(--line); border-radius:5px; background:#181818; height:100%; font-size:14px }
.player-choice:hover { background:#272727; border-color:#717171 }
.player-choice[aria-current] { border-color:#c6f24e; background:#2b2b2b }
.player-choice-stats { grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; font-size:13px }
.player-choice-stats .small { font-size:12px }
.player-search-more { margin:0 20px 20px }
.ally-controls { margin-top:18px }
@media(max-width:1200px) { .player-search-list { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:1000px) { .stats-grid { grid-template-columns:minmax(0,1fr) } }
@media(max-width:600px) {
  .player-search-list { grid-template-columns:minmax(0,1fr); padding-inline:14px }
  .player-picker-tools { padding-inline:14px }
  .player-picker-tools > :first-child { min-width:0; flex-basis:100% }
  .player-picker-tools > label { width:100% }
  .player-choice { flex-wrap:wrap }
  .player-summary { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .player-summary .stat-card { padding:14px }
  .stats-summary { grid-template-columns:minmax(0,1fr); gap:10px }
  .stats-summary .stat-card { padding:16px }
  .stats-controls { padding:16px }
  .stats-control-label { width:100% }
  .stats-select { max-width:100%; min-width:0 }
  .stats-coverage { align-items:flex-start }
  .stats-player-heading > :last-child { margin-left:0 }
}
.history-layout {
  --bg:#121212;
  --panel:#1c1c1c;
  --line:#353535;
  --accent:#c6f24e;
  background:var(--bg)
}
.history-layout .container { width:min(1440px,calc(100% - 64px)) }
.history-layout .site-header { min-height:72px; background:#1c1c1c }
.history-layout .brand-mark { background:#424242; color:#dfdfdf }
.history-layout .page-heading { padding:38px 0 30px }
.history-layout h1 { font-size:clamp(28px,3vw,36px); letter-spacing:-.8px }
.history-layout .source-dot { box-shadow:none }
.history-layout .panel { border-radius:8px }
.history-layout .panel-heading { padding:20px 24px; background:#242424 }
.history-layout #match-count { font-size:14px; white-space:nowrap }
.history-columns, .history-match { display:grid; grid-template-columns:minmax(180px,1fr) minmax(320px,1.6fr) 130px 160px; gap:24px; align-items:center; padding:20px 24px }
.history-columns { padding-block:12px; background:#1a1a1a; color:var(--muted); font-size:12px; letter-spacing:.6px; text-transform:uppercase }
.history-columns > :last-child { text-align:right }
.match-list { list-style:none; padding:0; margin:0 }
.history-entry + .history-entry { border-top:1px solid var(--line) }
.history-match { transition:background .15s }
.history-match:hover, .history-match:focus-within { background:#272727 }
.history-info { min-width:0; display:flex; flex-direction:column; gap:7px }
.history-match-id { margin:0; font-size:16px; font-weight:600; overflow-wrap:anywhere }
.history-date { color:#b6b6b6; font-size:13px; font-variant-numeric:tabular-nums }
.history-mode { color:#c6f24e; font-size:13px; overflow-wrap:anywhere }
.history-lineups { display:flex; flex-direction:column; gap:10px; min-width:0 }
.history-team { display:grid; grid-template-columns:100px minmax(0,1fr); gap:10px; align-items:center; min-width:0 }
.history-team-label { display:flex; align-items:center; gap:6px; min-width:0; font-size:13px; color:var(--muted) }
.history-team-label > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.history-team.radiant .history-team-label { color:var(--radiant) }
.history-team.dire .history-team-label { color:var(--dire) }
.history-team-logo { width:18px; height:18px; object-fit:contain; flex-shrink:0 }
.history-heroes { display:flex; gap:4px; flex-wrap:wrap; list-style:none; padding:0; margin:0 }
.history-hero { display:grid; place-items:center; position:relative; width:40px; height:24px; overflow:hidden; border:1px solid #4c4c4c; border-radius:3px; background:#313131 }
.history-hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.history-hero-fallback { color:#c6f24e; font-size:11px }
.history-result { display:flex; flex-direction:column; align-items:flex-start; gap:7px }
.history-result > .small { font-size:12px }
.history-duration { color:#c6c6c6; font-size:14px }
.history-action { text-align:right }
.history-layout .button.match-link { background:#c6f24e; border-color:#c6f24e; color:#1c1c1c; box-shadow:none; }
.history-layout .button.match-link:hover { background:#c6f24e; border-color:#c6f24e }
.history-layout .panel-footer { background:#1a1a1a }
.history-layout .button-quiet:hover { background:#2c2c2c; border-color:#7f7f7f }
@media(max-width:1150px) {
  .history-columns, .history-match { grid-template-columns:minmax(160px,1fr) minmax(260px,1.6fr) 110px 145px; gap:16px; padding-inline:18px }
  .history-team { grid-template-columns:70px minmax(0,1fr); gap:8px }
  .history-hero { width:34px; height:21px }
}
@media(max-width:950px) {
  .history-columns { display:none }
  .history-layout .container { width:calc(100% - 36px) }
  .history-layout #history-panel { background:transparent; border:0; overflow:visible }
  .history-layout #history-panel > .panel-heading { border:1px solid var(--line); border-radius:8px; margin-bottom:14px }
  .history-entry + .history-entry { border:0; margin-top:12px }
  .history-match { grid-template-columns:minmax(0,1fr) auto; gap:18px; padding:20px; border:1px solid var(--line); border-radius:8px; background:var(--panel) }
  .history-lineups { grid-column:1 / -1; grid-row:2; padding-block:16px; border-block:1px solid var(--line) }
  .history-team { grid-template-columns:minmax(90px,130px) minmax(0,1fr) }
  .history-hero { width:40px; height:24px }
  .history-result { grid-column:2; grid-row:1; align-items:flex-end }
  .history-action { grid-column:1 / -1 }
  .history-layout .panel-footer { margin-top:16px; border:1px solid var(--line); border-radius:8px }
}
@media(max-width:540px) {
  .history-layout .container { width:calc(100% - 24px) }
  .history-layout .page-heading { padding:30px 0 24px }
  .history-layout .panel-heading { padding:16px }
  .history-match { padding:16px; gap:12px }
  .history-match-id { font-size:15px }
  .history-team { grid-template-columns:70px minmax(0,1fr) }
  .history-hero { width:30px; height:20px }
  .history-heroes { gap:3px }
  .history-action .match-link { width:100% }
}

/* Hero history reuses the match list and keyboard-accessible pagination. */
.hero-matches { margin-bottom:28px }
.hero-matches-button { padding:6px 0; border:0; background:none; color:#c6f24e; font:inherit; text-align:left; cursor:pointer }
.hero-matches-button:hover, .hero-matches-button[aria-expanded=true] { color:#e9e9e9; text-decoration:underline; text-underline-offset:4px }
.hero-matches .panel-heading { gap:16px; flex-wrap:wrap }
.hero-matches .panel-heading h2 { overflow-wrap:anywhere }
.hero-matches .pagination { flex-wrap:wrap; justify-content:center; gap:16px }
.button:disabled { opacity:.45; cursor:default }

.insight-nav { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 24px }
.insight-nav a { display:block; padding:10px 16px; border:1px solid var(--line); border-radius:6px; color:var(--muted); font-size:14px }
.insight-nav a:hover { color:var(--text); background:#2a2a2a }
.insight-nav a[aria-current="page"] { color:#ececec; background:#424242; border-color:#5c5c5c }
@media (max-width:600px) {
  .insight-nav { gap:6px }
  .insight-nav a { padding:9px 12px; font-size:13px }
}
.insight-controls { margin-bottom:24px }
.match-calendar { width:100%; max-width:440px; padding:16px; margin-bottom:24px; }
.calendar-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.calendar-month-title { margin:0; font-size:18px; text-transform:capitalize; }
.calendar-month-button { width:36px; height:36px; border:1px solid var(--line); border-radius:5px; background:transparent; color:var(--text); cursor:pointer; }
.calendar-month-button:hover { background:#ffffff0b; }
.calendar-month-button:disabled { opacity:.35; cursor:default; }
.calendar-table { width:100%; min-width:0; table-layout:fixed; border-collapse:separate; border-spacing:3px; }
.calendar-table th, .calendar-table td { padding:0; border:0; text-align:center; background:transparent; }
.calendar-table th { padding-bottom:8px; color:var(--muted); font-size:12px; font-weight:500; }
.calendar-day { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; min-height:50px; padding:0; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--muted); font:inherit; font-size:14px; line-height:1.3; font-variant-numeric:tabular-nums; cursor:pointer; }
.calendar-day:hover { border-color:#c6f24e; color:var(--text); background:#ffffff08; }
.calendar-has-matches { background:#343434; border-color:#5c5c5c; color:#dbdbdb; font-weight:600; }
.calendar-has-matches:hover { background:#484848; border-color:#aeaeae; }
.calendar-day[aria-current="date"] { outline:2px solid var(--accent); outline-offset:1px; }
.calendar-match-count { font-size:10px; color:#bfbfbf; font-weight:400; }
.calendar-legend { display:flex; align-items:center; gap:8px; margin:12px 0 0; font-size:12px; color:var(--muted); }
.calendar-legend::before { content:""; width:8px; height:8px; flex-shrink:0; border-radius:50%; background:#bfbfbf; }
.range-date-picker { position:relative; flex:1; min-width:220px; max-width:380px; }
.range-date-summary { padding:11px 14px; border:1px solid var(--line); border-radius:5px; background:var(--panel); color:var(--text); font-size:14px; cursor:pointer; }
.range-date-summary:focus-visible { outline:2px solid var(--accent); }
.range-date-popup { position:absolute; left:0; top:calc(100% + 8px); z-index:10; width:380px; max-width:calc(100vw - 48px); padding-bottom:12px; border:1px solid var(--line); border-radius:7px; background:var(--panel); box-shadow:0 12px 32px #0008; }
.range-date-picker:nth-last-child(2) .range-date-popup { left:auto; right:0; }
.range-date-popup .match-calendar { margin:0; border:0; }
.range-date-popup > .button { margin-left:16px; }
@media (max-width:600px) {
  .range-date-picker { min-width:0; flex-basis:100%; max-width:none; }
  .range-date-popup { position:static; width:100%; max-width:100%; margin-top:8px; }
}
.insight-controls + .panel, .insight-heading { margin-top:24px }
.insight-record { padding:20px }
.insight-record h2 { margin:0 0 12px; font-size:18px }
.insight-record .stat-value { font-size:28px }
.record-data-note { margin:0 0 12px; line-height:1.5; }
.comparison-players { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.comparison-picker { min-width:0; }
.comparison-picker .player-picker-tools { flex-direction:column; align-items:stretch; gap:12px; }
.comparison-picker .player-picker-tools > label { width:100%; min-width:0; }
.comparison-picker .player-search-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
.comparison-picker .player-choice { width:100%; color:var(--text); font:inherit; font-size:14px; text-align:left; cursor:pointer; }
@media (max-width:800px) {
  .comparison-players { grid-template-columns:minmax(0,1fr); gap:0; }
}
@media (max-width:480px) {
  .comparison-picker .player-search-list { grid-template-columns:minmax(0,1fr); }
}
.record-entry { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px 0; border-top:1px solid var(--line) }
.favorite-editor { padding:12px 20px; border-top:1px solid var(--line); font-size:14px }
.favorite-editor summary { cursor:pointer; color:#c6f24e; padding:4px 0 }
.favorite-editor .stats-control-label { margin:14px 0; max-width:700px }
.favorite-editor .button { margin:0 10px 8px 0 }
.favorite-note { width:100%; resize:vertical; padding:12px; font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:5px }
.favorite-note:focus-visible { outline:2px solid var(--accent) }
.favorite-saved-note { margin:0; padding:16px 20px; white-space:pre-wrap; overflow-wrap:anywhere; border-top:1px solid var(--line) }
#match-favorite { margin-bottom:24px }
.insight-record .button { margin-top:12px }
.insight-record .hero-identity { max-width:100% }

.site-header .main-nav { flex:1; min-width:0; gap:14px; overflow-x:auto; scrollbar-width:thin; }
.main-nav .nav-link { flex-shrink:0; padding:16px 8px; white-space:nowrap; font-size:14px; }
.site-header .header-note { white-space:nowrap; }
@media (max-width:1300px) {
  .site-header .header-note { display:none; }
}
@media (max-width:1100px) {
  .site-header { flex-wrap:wrap; gap:0 20px; padding-top:12px; }
  .site-header .brand { min-height:40px; }
  .site-header .main-nav { order:3; flex:1 0 100%; width:100%; min-height:48px; gap:10px; }
  .main-nav .nav-link { padding:12px 8px; }
}

/* Tournament protocol: shared shell and controls for every route. */
.history-layout, .match-layout {
  --bg:#090909; --panel:#131313; --line:#303030;
  --text:#f4f4ef; --muted:#aaa9a2; --accent:#c6f24e;
  --radiant:#c6f24e; --dire:#f08a82;
  background:var(--bg);
}
body { font-size:14px; line-height:1.5; accent-color:var(--accent); }
::selection { background:#c6f24e; color:#090909; }
input, textarea { caret-color:var(--accent); }
html { scrollbar-color:#555 var(--bg); scrollbar-width:thin; }
.history-layout .container, .match-layout .container { width:min(1320px,92%); min-width:0; }
.history-layout .site-header, .match-layout .site-header { min-height:76px; padding-inline:4%; gap:40px; background:var(--bg); }
.brand { font-size:19px; font-weight:700; letter-spacing:-.03em; }
.brand-light { color:var(--muted); font-weight:400; }
.site-header .main-nav { gap:24px; }
.main-nav .nav-link { padding:20px 0; font-size:14px; }
.nav-link:hover { color:var(--text); }
.history-layout .page-heading, .match-layout .match-heading { padding:38px 0 30px; }
.history-layout h1, .match-layout .match-heading h1 { font-size:28px; font-weight:600; letter-spacing:-.03em; line-height:1.2; }
.subtitle { margin-top:10px; font-size:14px; }
.source-label { font-size:12px; color:var(--muted); }
.small, .page-note { font-size:12px; }
.mono { font-family:inherit; font-size:inherit; font-variant-numeric:tabular-nums; }
.history-layout .panel, .match-layout .panel { border-radius:12px; background:var(--panel); }
.history-layout .panel-heading, .match-layout .panel-heading { padding:18px 22px; background:transparent; }
h2 { font-size:18px; letter-spacing:-.02em; }
.history-layout .panel-footer { background:transparent; }
.button { border-color:#444; background:#242424; border-radius:6px; min-height:38px; box-shadow:none; }
.button:hover { background:#303030; border-color:#777; }
.button-quiet { background:transparent; }
.button.match-link, .history-layout .button.match-link { background:transparent; color:var(--text); border-color:#444; box-shadow:none; font-weight:500; }
.button.match-link:hover, .history-layout .button.match-link:hover { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.history-layout .button-quiet:hover { background:#242424; border-color:#777; }
.badge { padding:3px 8px; border-radius:4px; font-size:12px; font-weight:500; }
.badge:before { display:none; }
.badge.radiant { background:#c6f24e0c; border-color:#c6f24e30; color:var(--radiant); }
.badge.dire { background:#f08a820c; border-color:#f08a8230; color:var(--dire); }
.history-columns, .history-match { grid-template-columns:minmax(160px,1fr) minmax(290px,1.6fr) 115px 150px; gap:20px; padding:20px 22px; }
.history-columns { font-size:12px; text-transform:none; letter-spacing:0; padding-block:12px; background:#181818; }
.history-match:hover, .history-match:focus-within { background:#1b1b1b; }
.history-match-id { font-size:15px; }
.history-date, .history-mode, .history-duration { color:var(--muted); font-size:12px; }
.history-team { grid-template-columns:100px minmax(0,1fr); }
.history-hero { width:40px; height:26px; border-color:#383838; background:#242424; }
.history-hero-fallback { color:var(--muted); }
.favorite-editor { padding:10px 22px; font-size:12px; }
.favorite-editor summary { color:var(--muted); }
.favorite-editor[open] summary { color:var(--text); }
.stats-summary { gap:0; border-block:1px solid var(--line); margin-bottom:28px; }
.stats-summary .stat-card { border:0; border-radius:0; background:transparent; padding:20px 22px; }
.stats-summary .stat-card + .stat-card { border-left:1px solid var(--line); }
.stats-summary .stat-value { font-size:24px; min-height:0; }
.stat-label { margin-bottom:8px; font-size:12px; }
.stats-grid { gap:22px; }
.stats-controls { background:var(--panel); border-radius:12px; }
.stats-select { background:var(--bg); border-color:#444; min-height:42px; }
.stats-control-label { font-size:12px; }
.stats-coverage { gap:16px; align-items:flex-start; }
.stats-coverage p { max-width:90ch; }
.stats-sort-tools, .stats-table thead { background:#181818; }
.sort-priority { background:#252525; border-color:#555; }
.stats-sort-indicator, .stats-sort-button[aria-pressed=true] { color:var(--accent); }
thead { text-transform:none; letter-spacing:0; background:#181818; }
th, td { padding:14px 18px; }
tbody tr { border-color:#292929; }
tbody tr:hover { background:#202020; }
.player-avatar { border-color:#444; background:#242424; color:var(--text); }
.player-picker-heading { color:var(--text); font-size:14px; }
.player-choice { background:#181818; border-radius:6px; }
.player-choice:hover { background:#252525; border-color:#777; }
.player-choice[aria-current] { background:#20241a; border-color:var(--accent); }
.stats-player-link, .hero-matches-button, a.player-account { color:var(--text); text-decoration-color:#666; }
.stats-player-link:hover, .hero-matches-button:hover { color:var(--accent); }
.player-summary { max-width:none; text-align:left; }
.player-summary .stat-card { align-items:flex-start; }
.insight-nav { gap:24px; border-bottom:1px solid var(--line); margin-top:0; }
.insight-nav a { border:0; border-bottom:2px solid transparent; border-radius:0; padding:12px 0; }
.insight-nav a:hover { background:transparent; color:var(--text); }
.insight-nav a[aria-current="page"] { background:transparent; color:var(--text); border-color:var(--accent); }
.insight-record { padding:22px; }
.insight-record .stat-value { font-size:28px; line-height:1.2; margin-block:16px; }
.record-data-note { max-width:65ch; font-size:12px; }
.record-entry { gap:10px 16px; }
.calendar-month-title { font-size:16px; }
.calendar-day { min-height:46px; }
.calendar-has-matches { background:#193d2b; border-color:#2d6c46; color:#a2efba; }
.calendar-has-matches:hover { background:#245438; border-color:#6ec48a; }
.calendar-match-count { color:#79d897; }
.calendar-legend::before { background:#79d897; }
.range-date-popup { background:#181818; }
.site-footer { margin-top:56px; padding-block:24px; font-size:12px; }
.site-footer>span:first-child { letter-spacing:0; }
.back-link { margin-top:24px; font-size:12px; }

/* Team builder: 340px roster + 22px gutter + remaining width for two role lineups.
   At 1320px: 340 + 22 + 958; each team (958 - 22) / 2 = 468px. */
.balance-screen { --balance-control:#444; --balance-raised:#242424; --balance-row:#202020; --balance-primary:var(--text); --balance-primary-ink:var(--bg); min-width:0; }
.balance-screen .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.balance-toolbar, .balance-actions, .balance-result-heading, .balance-team-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.balance-toolbar { margin-bottom:16px; flex-wrap:wrap; }
.balance-selection { margin:0; font-variant-numeric:tabular-nums; }
.balance-selection strong { font-size:24px; font-weight:500; }
.balance-actions { justify-content:flex-end; flex-wrap:wrap; }
.balance-screen .balance-primary { background:var(--balance-primary); color:var(--balance-primary-ink); border-color:var(--balance-primary); }
.balance-screen .balance-primary:hover { opacity:.88; }
.balance-screen .button:disabled { cursor:default; opacity:.65; }
.balance-status, .balance-warning { overflow-wrap:anywhere; }
.balance-status { margin:0 0 16px; }
.balance-status:empty, .balance-warning:empty { display:none; }
.balance-screen .balance-warning { color:var(--dire); }
.balance-grid { display:grid; grid-template-columns:340px minmax(0,1fr); gap:22px; align-items:start; }
.balance-screen .panel { border:0; box-shadow:none; }
.balance-friends { overflow:hidden; }
.balance-friends .panel-heading { padding:18px; }
.balance-add { padding:0 18px 18px; }
.balance-add-fields { padding:0; margin:0; border:0; min-width:0; display:grid; gap:12px; }
.balance-add label { font-size:12px; color:var(--muted); }
.balance-add .stats-select, .balance-search .stats-select { width:100%; min-width:0; font:inherit; }
.balance-add p { margin:0; }
.balance-database { display:grid; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.balance-database-choices { display:grid; gap:12px; min-width:0; }
.balance-database-choices[hidden] { display:none; }
.balance-database-list { list-style:none; padding:0; margin:0; max-height:300px; overflow-y:auto; }
.balance-database-player { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--line); }
.balance-database-player .balance-person { flex:1; }
.balance-database-player .button { flex:none; font-size:12px; padding:6px 8px; }
.balance-role-choices { display:flex; gap:6px; border:0; padding:0; margin:0; min-width:0; }
.balance-role-choice { display:grid; place-items:center; position:relative; cursor:pointer; width:36px; height:36px; flex:none; }
.balance-role-choice input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.balance-role-choice span { display:grid; place-items:center; width:100%; height:100%; border:1px solid var(--balance-control); border-radius:5px; color:var(--muted); font-variant-numeric:tabular-nums; pointer-events:none; }
.balance-role-choice input:checked + span { background:var(--balance-raised); color:var(--text); border-color:var(--text); }
.balance-role-choice input:focus-visible + span { outline:2px solid var(--accent); outline-offset:3px; }
.balance-role-choice:hover span { border-color:var(--muted); }
.balance-search { padding:0 18px 16px; }
.balance-friends-list, .balance-lineup { list-style:none; padding:0; margin:0; }
.balance-friends-list { max-height:640px; overflow-y:auto; scrollbar-gutter:stable; }
.balance-friend { padding:16px 18px; border-top:1px solid var(--line); }
.balance-friend.is-selected { background:var(--balance-row); }
.balance-friend-top { display:flex; align-items:center; gap:12px; }
.balance-friend-top > input { width:18px; height:18px; flex:none; margin:0; }
.balance-identity { display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
.balance-avatar { width:32px; height:32px; flex:none; border-radius:50%; background:var(--balance-raised); position:relative; display:grid; place-items:center; font-size:12px; overflow:hidden; }
.balance-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.balance-person { min-width:0; display:flex; flex-direction:column; gap:2px; }
.balance-name { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.balance-name:hover { text-decoration:underline; }
.balance-person .small { overflow-wrap:anywhere; }
.balance-screen .balance-remove { padding:0; min-width:32px; min-height:32px; border:0; font-size:20px; color:var(--muted); }
.balance-friend-bottom { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding-left:30px; margin-top:10px; }
.balance-friend-bottom .balance-role-choices { gap:5px; }
.balance-friend-bottom .balance-role-choice { width:30px; height:30px; }
.balance-freshness { width:100%; }
.balance-manual-rating { display:grid; gap:6px; margin:12px 0 0 30px; }
.balance-manual-rating .stats-select { width:100%; min-width:0; font:inherit; }
.balance-empty { color:var(--muted); padding:18px; margin:0; }
.balance-result { min-width:0; }
.balance-result-heading { min-height:40px; margin-bottom:18px; flex-wrap:wrap; }
.balance-result-heading h2 { margin:0; }
.balance-variant-label { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); }
.balance-variant-label select { min-height:38px; font:inherit; color:var(--text); max-width:240px; }
.balance-difference { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0 24px; }
.balance-difference strong { font-size:30px; font-weight:500; line-height:1.2; font-variant-numeric:tabular-nums; }
.balance-teams { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.balance-team { min-width:0; overflow:hidden; }
.balance-team-heading { padding:18px; gap:10px; flex-wrap:wrap; }
.balance-team-heading h3 { font-size:18px; font-weight:600; margin:0; }
.balance-team.radiant h3 { color:var(--radiant); }
.balance-team.dire h3 { color:var(--dire); }
.balance-total { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.balance-slot { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:16px 18px; border-top:1px solid var(--line); min-height:126px; align-content:start; }
.balance-position { display:flex; gap:8px; align-items:baseline; grid-column:1/-1; font-size:12px; color:var(--muted); }
.balance-position strong { color:var(--text); font-size:14px; font-weight:500; font-variant-numeric:tabular-nums; }
.balance-slot .balance-identity { align-self:center; }
.balance-slot .balance-person .small { font-size:11px; }
.balance-screen .balance-swap { padding:4px 8px; min-height:32px; font-size:11px; align-self:center; }
.balance-swap[aria-pressed=true] { border-color:var(--text); background:var(--balance-raised); }
.balance-slot .balance-warning { grid-column:1/-1; }
.balance-slot-conflict { background:var(--balance-row); }
.balance-unfilled { font-size:14px; padding-block:6px; }
.balance-result-note { margin:16px 0; }
.balance-method { padding:18px; margin-top:22px; }
.balance-method summary { cursor:pointer; font-weight:500; }
.balance-method-body { max-width:85ch; color:var(--muted); }
.balance-method-body p { margin:14px 0; }
.balance-method-body a { text-decoration:underline; }
@media(max-width:1200px) {
  .balance-grid { grid-template-columns:310px minmax(0,1fr); }
  .balance-teams { grid-template-columns:1fr; }
  .balance-slot { min-height:100px; grid-template-columns:110px minmax(0,1fr) auto; align-items:center; }
  .balance-position { grid-column:auto; }
  .balance-slot .balance-warning { grid-column:2/-1; }
}
@media(max-width:760px) {
  .balance-grid { grid-template-columns:1fr; }
  .balance-friends-list { max-height:440px; }
  .balance-result-heading { margin-top:6px; }
}
@media(max-width:480px) {
  .balance-actions { width:100%; justify-content:space-between; gap:8px; }
  .balance-actions .button { padding:8px 10px; }
  .balance-slot { grid-template-columns:minmax(0,1fr) auto; min-height:126px; }
  .balance-position { grid-column:1/-1; }
  .balance-slot .balance-warning { grid-column:1/-1; }
  .balance-result-heading { align-items:flex-start; }
  .balance-variant-label { width:100%; justify-content:space-between; }
  .balance-difference { padding-top:8px; }
}

@media(max-width:1100px) {
  .history-layout .site-header, .match-layout .site-header { gap:0 20px; padding-top:14px; }
  .site-header .main-nav { gap:24px; }
  .main-nav .nav-link { padding:12px 0; }
  .history-columns, .history-match { grid-template-columns:minmax(145px,1fr) minmax(240px,1.6fr) 100px 140px; gap:14px; }
  .history-team { grid-template-columns:72px minmax(0,1fr); }
  .history-hero { width:32px; height:23px; }
}
@media(max-width:950px) {
  .history-match { grid-template-columns:minmax(0,1fr) auto; padding:18px; }
  .history-team { grid-template-columns:100px minmax(0,1fr); }
  .history-hero { width:40px; height:26px; }
  .history-layout #history-panel > .panel-heading { background:transparent; border:0; padding:0 0 18px; margin:0; }
}
@media(max-width:600px) {
  .history-layout h1, .match-layout .match-heading h1 { font-size:24px; }
  .history-layout .page-heading, .match-layout .match-heading { padding:28px 0 24px; gap:12px; }
  .history-layout .panel-heading, .match-layout .panel-heading { padding:16px; gap:12px; flex-wrap:wrap; }
  .history-match { padding:16px; gap:12px; }
  .history-team { grid-template-columns:66px minmax(0,1fr); }
  .history-hero { width:30px; height:22px; }
  .stats-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats-summary .stat-card { padding:16px 12px; }
  .stats-summary .stat-card + .stat-card { border-left:0; }
  .stats-summary .stat-card:nth-child(even) { border-left:1px solid var(--line); }
  .stats-summary .stat-card:nth-child(n+3) { border-top:1px solid var(--line); }
  .stats-coverage { flex-wrap:wrap; }
  .insight-nav { gap:8px 20px; }
  .insight-nav a { padding:10px 0; font-size:13px; }
  .insight-record { padding:18px; }
  .favorite-editor { padding-inline:16px; }
  .source-label { white-space:normal; }
}