:root {
  --bg: #02080a;
  --bg-2: #061216;

  --surface: rgba(5, 13, 16, 0.92);
  --surface-2: rgba(8, 19, 22, 0.84);
  --surface-3: rgba(255, 255, 255, 0.035);

  --text: #f4f7f7;
  --muted: rgba(224, 234, 235, 0.66);
  --muted-2: rgba(224, 234, 235, 0.46);

  --teal: #08b8bb;
  --teal-2: #07959e;
  --cyan: #4ce4e5;

  --amber: #f09232;
  --amber-2: #ffba62;

  --green: #69d698;

  --line: rgba(102, 222, 224, 0.16);
  --line-soft: rgba(255, 255, 255, 0.075);

  --shadow-lg: 0 34px 100px rgba(0, 0, 0, 0.56);
  --shadow-md: 0 20px 60px rgba(0, 0, 0, 0.38);

  --radius-xl: 34px;
  --radius-lg: 24px;
  --radius-md: 16px;

  --content: 1440px;
}

@media(max-width:600px){body[data-page="archive"] .archive-toolbar{grid-template-columns:1fr!important}body[data-page="match"] .match-hero,body[data-page="match"] .overview-grid,body[data-page="match"] .match-tabs{max-width:100%;overflow:visible}body[data-page="match"] .match-tabs{display:flex;overflow-x:auto}body[data-page="match"] .match-tab{min-height:44px;flex:0 0 auto}.match-meta,.match-stat,.overview-card{display:block!important}}


* {
  box-sizing: border-box;
}


html {
  min-height: 100%;
}


body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;

  color: var(--text);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:
    radial-gradient(
      1000px 700px at 95% -10%,
      rgba(8, 184, 187, 0.13),
      transparent 64%
    ),
    radial-gradient(
      900px 700px at 0% 5%,
      rgba(240, 146, 50, 0.10),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      #010608 0%,
      #031013 55%,
      #06191b 100%
    );
}


body::before {
  content: "";

  position: fixed;
  inset: 0;
  z-index: -2;

  pointer-events: none;

  background:
    linear-gradient(
      rgba(255,255,255,.012) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.012) 1px,
      transparent 1px
    );

  background-size: 48px 48px;

  mask-image:
    linear-gradient(
      180deg,
      rgba(0,0,0,.55),
      transparent 72%
    );
}


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


button,
select,
input {
  font: inherit;
}


button {
  color: inherit;
}


.site-shell {
  width: min(
    var(--content),
    calc(100% - 40px)
  );

  margin: 0 auto;

  padding:
    18px
    0
    56px;
}


/* =========================================================
   HEADER
   ========================================================= */

.topbar {
  position: sticky;
  top: 12px;
  z-index: 30;

  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  gap: 28px;

  min-height: 82px;

  padding:
    12px
    18px;

  margin-bottom: 22px;

  border:
    1px
    solid
    var(--line);

  border-radius: 22px;

  background:
    linear-gradient(
      180deg,
      rgba(4, 11, 14, 0.94),
      rgba(2, 8, 10, 0.91)
    );

  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255,255,255,.035);

  backdrop-filter:
    blur(18px);
}


.brand {
  display: inline-flex;
  align-items: center;

  width: 225px;
  min-width: 225px;
}


.brand img {
  display: block;

  width: auto;
  height: 50px;

  max-width: 225px;

  object-fit: contain;
}


.nav {
  display: flex;

  align-items: center;
  justify-content: center;

  gap:
    clamp(
      15px,
      2vw,
      30px
    );

  min-width: 0;

  color:
    rgba(
      224,
      234,
      235,
      0.72
    );

  font-size: 14px;
  font-weight: 760;
}


.nav a {
  position: relative;
  white-space: nowrap;

  transition:
    color .2s ease;
}


.nav a::after {
  content: "";

  position: absolute;

  right: 50%;
  bottom: -11px;
  left: 50%;

  height: 2px;

  border-radius: 2px;

  background:
    var(--teal);

  transition:
    right .2s ease,
    left .2s ease;
}


.nav a:hover,
.nav a.active {
  color: #fff;
}


.nav a:hover::after,
.nav a.active::after {
  right: 0;
  left: 0;
}


.header-cta {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 48px;

  padding:
    13px
    19px;

  border:
    1px
    solid
    rgba(
      8,
      184,
      187,
      .62
    );

  border-radius: 14px;

  background:
    linear-gradient(
      180deg,
      rgba(11,193,196,.96),
      rgba(5,137,146,.94)
    );

  color: #ecffff;

  font-weight: 850;

  box-shadow:
    0 16px 40px rgba(0, 170, 176, .22),
    inset 0 1px 0 rgba(255,255,255,.24);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.header-cta:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 18px 46px
    rgba(0,0,0,.36);
}


/* =========================================================
   ARCHIVE HERO
   ========================================================= */

.archive-hero {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(260px, 360px);

  align-items: stretch;

  gap: 20px;

  margin-bottom: 22px;
}


.hero-copy,
.hero-stat {
  position: relative;

  overflow: hidden;

  border:
    1px
    solid
    var(--line);

  border-radius:
    var(--radius-xl);

  background:
    radial-gradient(
      circle at 88% 20%,
      rgba(8,184,187,.13),
      transparent 30%
    ),
    radial-gradient(
      circle at 95% 90%,
      rgba(240,146,50,.08),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      rgba(7,17,20,.93),
      rgba(3,10,12,.94)
    );

  box-shadow:
    var(--shadow-md);
}


.hero-copy {
  padding:
    clamp(
      32px,
      4vw,
      58px
    );
}


.eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 14px;

  color:
    var(--teal);

  font-size: 12px;

  font-weight: 850;

  letter-spacing: .11em;

  text-transform: uppercase;
}


.eyebrow::before {
  content: "";

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background:
    var(--teal);

  box-shadow:
    0 0 0 6px rgba(8,184,187,.10),
    0 0 22px rgba(8,184,187,.46);
}


.archive-hero h1 {
  margin: 0;

  max-width: 900px;

  font-size:
    clamp(
      42px,
      5.4vw,
      78px
    );

  line-height: .97;

  letter-spacing: -.055em;
}


.archive-hero p {
  max-width: 720px;

  margin:
    22px
    0
    0;

  color:
    var(--muted);

  font-size: 16px;

  line-height: 1.7;
}


.hero-stat {
  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 32px;
}


.hero-stat::before {
  content: "";

  position: absolute;

  width: 190px;
  height: 190px;

  top: -72px;
  right: -55px;

  border:
    1px
    solid
    rgba(8,184,187,.20);

  border-radius: 50%;

  box-shadow:
    0 0 80px
    rgba(8,184,187,.10);
}


.hero-stat-label {
  margin-bottom: 10px;

  color:
    var(--muted);

  font-size: 13px;

  font-weight: 750;

  text-transform: uppercase;

  letter-spacing: .08em;
}


.hero-stat strong {
  font-size:
    clamp(
      48px,
      6vw,
      78px
    );

  line-height: .95;

  letter-spacing: -.05em;
}


.hero-stat > span:last-child {
  margin-top: 14px;

  color:
    var(--muted-2);

  font-size: 13px;
}


/* =========================================================
   ARCHIVE PANEL
   ========================================================= */

.archive-panel {
  padding: 22px;

  border:
    1px
    solid
    var(--line);

  border-radius:
    var(--radius-xl);

  background:
    radial-gradient(
      circle at 95% 0%,
      rgba(8,184,187,.06),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      rgba(7,16,19,.91),
      rgba(3,10,12,.93)
    );

  box-shadow:
    var(--shadow-md);

  backdrop-filter:
    blur(16px);
}


.archive-toolbar {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(145px, .9fr))
    minmax(190px, 1.25fr)
    minmax(150px, .85fr)
    auto;

  gap: 12px;

  align-items: end;
}


.filter-field {
  min-width: 0;
}


.filter-field label {
  display: block;

  margin:
    0
    0
    7px
    2px;

  color:
    var(--muted-2);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: .07em;

  text-transform: uppercase;
}


select,
.filter-field input {
  width: 100%;

  min-height: 49px;

  border:
    1px
    solid
    var(--line);

  border-radius: 13px;

  outline: none;

  background:
    rgba(255,255,255,.045);

  color:
    var(--text);

  font-weight: 700;
}


select {
  padding:
    11px
    13px;

  cursor: pointer;
}


select option {
  background: #061216;
  color: var(--text);
}


.filter-field input {
  padding:
    11px
    13px;
}


.filter-field input[type="date"] {
  color-scheme: dark;
}


select:focus,
.filter-field input:focus {
  border-color:
    rgba(8,184,187,.62);

  box-shadow:
    0 0 0 3px
    rgba(8,184,187,.10);
}


.search-input-wrap {
  position: relative;
}


.search-input-wrap span {
  position: absolute;

  top: 50%;
  left: 14px;

  transform:
    translateY(-50%);

  color:
    var(--muted-2);

  pointer-events: none;
}


.search-input-wrap input {
  padding-left: 38px;
}


.ghost-button,
.refresh-button {
  min-height: 49px;

  padding:
    0
    18px;

  border:
    1px
    solid
    var(--line);

  border-radius: 13px;

  font-weight: 800;

  cursor: pointer;

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}


.ghost-button {
  background:
    rgba(255,255,255,.035);

  color:
    var(--muted);
}


.ghost-button:hover {
  border-color:
    rgba(255,255,255,.18);

  background:
    rgba(255,255,255,.055);
}


.refresh-button {
  background:
    rgba(8,184,187,.08);

  color:
    #dfffff;

  border-color:
    rgba(8,184,187,.25);
}


.ghost-button:hover,
.refresh-button:hover {
  transform:
    translateY(-1px);
}


.archive-summary {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin:
    22px
    2px
    14px;

  color:
    var(--muted);

  font-size: 13px;
}


.archive-summary strong {
  color:
    var(--text);

  font-size: 15px;
}


.matches-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 14px;
}


.match-card {
  position: relative;

  overflow: hidden;

  min-width: 0;

  border:
    1px
    solid
    var(--line-soft);

  border-radius: 20px;

  background:
    linear-gradient(
      180deg,
      rgba(9,20,23,.92),
      rgba(3,11,13,.94)
    );

  box-shadow:
    inset
    0
    1px
    0
    rgba(255,255,255,.025);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


.match-card:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(8,184,187,.30);

  box-shadow:
    0 22px 50px
    rgba(0,0,0,.24);
}


.match-card-link {
  display: block;
  height: 100%;

  padding: 22px;
}


.match-card-top {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 22px;
}


.match-date {
  color:
    var(--muted);

  font-size: 12px;

  font-weight: 750;
}


.match-location {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  min-width: 0;

  color:
    var(--muted-2);

  font-size: 11px;

  font-weight: 750;

  text-transform: uppercase;

  letter-spacing: .04em;
}


.match-location span {
  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.match-scoreboard {
  display: grid;

  gap: 9px;
}


.player-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 18px;

  min-height: 42px;
}


.player-name {
  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color:
    rgba(244,247,247,.88);

  font-size:
    clamp(
      16px,
      1.8vw,
      20px
    );

  font-weight: 720;
}


.player-row.winner .player-name {
  color: #fff;
  font-weight: 900;
}


.player-score {
  min-width: 34px;

  text-align: right;

  color:
    rgba(244,247,247,.62);

  font-size: 25px;

  font-weight: 850;

  font-variant-numeric:
    tabular-nums;
}


.player-row.winner .player-score {
  color:
    var(--amber-2);
}


.winner-dot {
  display: inline-block;

  width: 7px;
  height: 7px;

  margin:
    0
    9px
    2px
    0;

  border-radius: 50%;

  background:
    var(--teal);

  box-shadow:
    0 0 12px
    rgba(8,184,187,.55);
}


.match-divider {
  height: 1px;

  margin:
    15px
    0;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--line),
      transparent
    );
}


.match-card-bottom {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;
}


.final-status {
  display: flex;

  align-items: center;

  gap: 9px;

  color:
    var(--muted-2);

  font-size: 11px;

  font-weight: 850;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.final-status::before {
  content: "";

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--green);
}


.view-match {
  color:
    var(--teal);

  font-size: 12px;

  font-weight: 850;
}


.archive-message {
  grid-column: 1 / -1;

  padding:
    58px
    24px;

  border:
    1px
    dashed
    var(--line);

  border-radius: 20px;

  color:
    var(--muted);

  text-align: center;

  background:
    rgba(255,255,255,.018);
}


.archive-message strong {
  display: block;

  margin-bottom: 8px;

  color:
    var(--text);

  font-size: 18px;
}


/* =========================================================
   MATCH DETAIL
   ========================================================= */

.back-link {
  display: inline-flex;

  margin:
    4px
    0
    16px
    4px;

  color:
    var(--muted);

  font-size: 13px;

  font-weight: 780;
}


.back-link:hover {
  color:
    var(--teal);
}


.match-hero {
  overflow: hidden;

  padding:
    clamp(
      26px,
      4vw,
      46px
    );

  border:
    1px
    solid
    var(--line);

  border-radius:
    var(--radius-xl);

  background:
    radial-gradient(
      circle at 85% 5%,
      rgba(8,184,187,.13),
      transparent 29%
    ),
    radial-gradient(
      circle at 5% 100%,
      rgba(240,146,50,.07),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      rgba(7,17,20,.94),
      rgba(3,10,12,.96)
    );

  box-shadow:
    var(--shadow-md);
}


.detail-meta {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap:
    7px
    12px;

  margin-bottom: 26px;

  color:
    var(--muted-2);

  font-size: 11px;

  font-weight: 780;

  text-transform: uppercase;

  letter-spacing: .07em;
}


.detail-meta .final-pill {
  padding:
    6px
    9px;

  border:
    1px
    solid
    rgba(105,214,152,.25);

  border-radius: 999px;

  background:
    rgba(105,214,152,.08);

  color:
    rgba(199,255,219,.90);
}


.detail-scoreboard {
  max-width: 820px;
}


.detail-player {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 25px;

  min-height: 68px;
}


.detail-player-name {
  overflow: hidden;

  text-overflow: ellipsis;

  color:
    rgba(244,247,247,.80);

  font-size:
    clamp(
      25px,
      4vw,
      46px
    );

  font-weight: 720;

  letter-spacing: -.035em;
}


.detail-player.winner
.detail-player-name {
  color: #fff;
  font-weight: 900;
}


.detail-player-score {
  min-width: 58px;

  color:
    rgba(244,247,247,.58);

  font-size:
    clamp(
      40px,
      6vw,
      68px
    );

  font-weight: 900;

  text-align: right;

  letter-spacing: -.05em;

  font-variant-numeric:
    tabular-nums;
}


.detail-player.winner
.detail-player-score {
  color:
    var(--amber-2);
}


.detail-divider {
  height: 1px;

  margin:
    8px
    0;

  background:
    linear-gradient(
      90deg,
      var(--line),
      transparent
    );
}


.match-content {
  margin-top: 20px;
}


.match-tabs {
  display: flex;

  gap: 8px;

  overflow-x: auto;

  padding: 6px;

  margin-bottom: 14px;

  border:
    1px
    solid
    var(--line);

  border-radius: 16px;

  background:
    rgba(3,11,13,.90);
}


.match-tab {
  flex:
    0
    0
    auto;

  min-height: 43px;

  padding:
    0
    17px;

  border: 0;

  border-radius: 11px;

  background: transparent;

  color:
    var(--muted);

  font-weight: 800;

  cursor: pointer;
}


.match-tab.active {
  background:
    rgba(8,184,187,.12);

  color:
    #eaffff;

  box-shadow:
    inset
    0
    0
    0
    1px
    rgba(8,184,187,.20);
}


.tab-panel {
  display: none;

  padding: 22px;

  border:
    1px
    solid
    var(--line);

  border-radius:
    var(--radius-lg);

  background:
    linear-gradient(
      180deg,
      rgba(7,16,19,.90),
      rgba(3,10,12,.92)
    );
}


.tab-panel.active {
  display: block;
}


.overview-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap: 12px;
}


.info-card {
  min-width: 0;

  padding: 18px;

  border:
    1px
    solid
    var(--line-soft);

  border-radius: 16px;

  background:
    rgba(255,255,255,.025);
}


.info-label {
  display: block;

  margin-bottom: 8px;

  color:
    var(--muted-2);

  font-size: 10px;

  font-weight: 850;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.info-value {
  overflow-wrap:
    anywhere;

  color:
    rgba(244,247,247,.92);

  font-size: 15px;

  font-weight: 780;
}


.timeline-list {
  display: grid;
  gap: 8px;
}


.timeline-event {
  display: grid;

  grid-template-columns:
    auto
    minmax(0,1fr)
    auto;

  align-items: center;

  gap: 14px;

  padding:
    14px
    15px;

  border:
    1px
    solid
    var(--line-soft);

  border-radius: 14px;

  background:
    rgba(255,255,255,.022);
}


.timeline-type {
  min-width: 54px;

  color:
    var(--teal);

  font-size: 10px;

  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: .08em;
}


.timeline-main {
  min-width: 0;
}


.timeline-title {
  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color:
    rgba(244,247,247,.92);

  font-size: 13px;

  font-weight: 760;
}


.timeline-score {
  margin-top: 3px;

  color:
    var(--muted-2);

  font-size: 11px;
}


.timeline-time {
  color:
    var(--muted-2);

  font-size: 10px;

  font-weight: 700;

  font-variant-numeric:
    tabular-nums;
}


.highlights-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap: 12px;
}


.highlight-card {
  overflow: hidden;

  border:
    1px
    solid
    var(--line-soft);

  border-radius: 16px;

  background:
    rgba(255,255,255,.022);
}


.highlight-preview {
  display: flex;

  align-items: center;
  justify-content: center;

  min-height: 140px;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(8,184,187,.11),
      transparent 50%
    ),
    #02090b;

  color:
    var(--teal);

  font-size: 28px;
}


.highlight-copy {
  padding: 14px;
}


.highlight-copy strong {
  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 13px;
}


.highlight-copy span {
  display: block;

  margin-top: 5px;

  color:
    var(--muted-2);

  font-size: 11px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  margin-top: 18px;

  padding:
    10px
    4px
    0;

  color:
    var(--muted-2);

  font-size: 12px;

  font-weight: 750;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {

  .archive-toolbar {
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }


  .ghost-button {
    width: 100%;
  }


  .overview-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}


@media (max-width: 920px) {

  .site-shell {
    width:
      min(
        100% - 28px,
        var(--content)
      );

    padding-top: 14px;
  }


  .topbar {
    position: relative;
    top: auto;

    grid-template-columns:
      1fr
      auto;

    min-height: 70px;
  }


  .brand {
    width: 195px;
    min-width: 195px;
  }


  .brand img {
    height: 43px;
    max-width: 195px;
  }


  .nav {
    display: none;
  }


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


  .hero-stat {
    min-height: 190px;
  }


  .matches-grid {
    grid-template-columns: 1fr;
  }


  .highlights-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}


@media (max-width: 680px) {

  .site-shell {
    width:
      calc(100% - 18px);

    padding-top: 9px;
  }


  .topbar {
    gap: 8px;

    padding:
      9px
      10px;

    border-radius: 16px;
  }


  .brand {
    width: 158px;
    min-width: 158px;
  }


  .brand img {
    height: 35px;
    max-width: 158px;
  }


  .header-cta {
    min-height: 40px;

    padding:
      10px
      11px;

    font-size: 11px;
  }


  .hero-copy,
  .hero-stat,
  .archive-panel,
  .match-hero,
  .tab-panel {
    border-radius: 22px;
  }


  .hero-copy {
    padding:
      30px
      21px;
  }


  .archive-hero h1 {
    font-size: 44px;
  }


  .hero-stat {
    min-height: 155px;
    padding: 23px;
  }


  .archive-panel {
    padding: 15px;
  }


  .archive-toolbar {
    grid-template-columns: 1fr;
  }


  .archive-summary {
    margin-top: 18px;
  }


  .match-card-link {
    padding: 18px;
  }


  .match-card-top {
    align-items: flex-start;
    flex-direction: column;

    gap: 6px;

    margin-bottom: 18px;
  }


  .player-name {
    font-size: 16px;
  }


  .match-hero {
    padding:
      25px
      19px;
  }


  .detail-player {
    min-height: 58px;
  }


  .detail-player-name {
    font-size: 27px;
  }


  .detail-player-score {
    font-size: 44px;
  }


  .overview-grid,
  .highlights-grid {
    grid-template-columns: 1fr;
  }


  .timeline-event {
    grid-template-columns:
      auto
      minmax(0,1fr);
  }


  .timeline-time {
    display: none;
  }


  .footer {
    align-items: flex-start;
    flex-direction: column;
  }

}

/* ===== VOXCOURT MATCH ARCHIVE WHITE START ===== */

/*
   Premium white VoxCourt archive.
   VISUAL ONLY.

   Important:
   - matches.js untouched
   - API untouched
   - filters untouched
   - match routes untouched
   - scoped ONLY to body[data-page="archive"]
*/


/* =========================================================
   PAGE
   ========================================================= */

body[data-page="archive"]{
  background:#f5f8fa !important;
  color:#10233a !important;
}

body[data-page="archive"]::before{
  display:none !important;
}

body[data-page="archive"] .site-shell{
  width:min(1500px,calc(100% - 40px)) !important;
  margin:0 auto !important;
  padding:20px 0 42px !important;
}


/* =========================================================
   NAVIGATION — SAME LANGUAGE AS HOME / LIVE
   ========================================================= */

body[data-page="archive"] .topbar{
  position:relative !important;
  top:auto !important;

  min-height:78px !important;

  display:grid !important;
  grid-template-columns:240px 1fr auto 190px !important;
  align-items:center !important;
  gap:20px !important;

  padding:10px 18px !important;
  margin:0 0 17px !important;

  border:1px solid #dce7ec !important;
  border-radius:18px !important;

  background:#ffffff !important;

  box-shadow:
    0 8px 30px rgba(27,61,82,.06) !important;

  backdrop-filter:none !important;
}


body[data-page="archive"] .brand{
  width:max-content !important;
  min-width:0 !important;

  display:flex !important;
  align-items:center !important;

  padding:7px 11px !important;

  border-radius:11px !important;

  background:#071a27 !important;
}


body[data-page="archive"] .brand img{
  width:auto !important;
  height:auto !important;

  max-width:190px !important;
  max-height:48px !important;
}


body[data-page="archive"] .nav{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  gap:42px !important;

  color:#294057 !important;

  font-size:13px !important;
  font-weight:800 !important;
}


body[data-page="archive"] .nav a{
  padding:12px 0 !important;

  color:#294057 !important;
}


body[data-page="archive"] .nav a:hover,
body[data-page="archive"] .nav a.active{
  color:#079ba6 !important;
}


body[data-page="archive"] .nav a::after{
  bottom:4px !important;

  background:#0aabb5 !important;
}


body[data-page="archive"] .header-cta{
  justify-self:end !important;

  min-height:46px !important;

  padding:0 20px !important;

  border:0 !important;
  border-radius:12px !important;

  color:#ffffff !important;

  background:
    linear-gradient(
      135deg,
      #12bdc6,
      #078f9a
    ) !important;

  font-size:13px !important;
  font-weight:850 !important;

  box-shadow:
    0 10px 25px rgba(8,157,167,.20) !important;
}


/* =========================================================
   COMPACT ARCHIVE HERO
   ========================================================= */

body[data-page="archive"] .archive-hero{
  display:grid !important;

  grid-template-columns:
    minmax(0,1fr)
    250px !important;

  align-items:stretch !important;

  gap:14px !important;

  margin-bottom:14px !important;
}


body[data-page="archive"] .hero-copy,
body[data-page="archive"] .hero-stat{
  border:1px solid #dbe6eb !important;
  border-radius:18px !important;

  background:#ffffff !important;

  box-shadow:
    0 8px 28px rgba(24,61,82,.06) !important;
}


body[data-page="archive"] .hero-copy{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;

  min-height:225px !important;

  padding:28px 34px !important;
}


body[data-page="archive"] .eyebrow{
  display:inline-flex !important;
  align-items:center !important;

  gap:9px !important;

  width:max-content !important;

  margin:0 0 11px !important;

  color:#079ba6 !important;

  font-size:10px !important;
  font-weight:900 !important;

  letter-spacing:.11em !important;
  text-transform:uppercase !important;
}


body[data-page="archive"] .eyebrow::before{
  width:7px !important;
  height:7px !important;

  background:#0aabb5 !important;

  box-shadow:
    0 0 0 5px rgba(10,171,181,.10) !important;
}


body[data-page="archive"] .archive-hero h1{
  max-width:none !important;

  margin:0 !important;

  color:#10233a !important;

  font-size:
    clamp(36px,3.4vw,52px) !important;

  line-height:1.00 !important;

  font-weight:900 !important;

  letter-spacing:-.045em !important;
}


body[data-page="archive"] .archive-hero p{
  max-width:760px !important;

  margin:14px 0 0 !important;

  color:#62778a !important;

  font-size:14px !important;
  line-height:1.55 !important;
}


body[data-page="archive"] .hero-stat{
  position:relative !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;

  min-height:225px !important;

  padding:25px !important;

  overflow:hidden !important;
}


body[data-page="archive"] .hero-stat::before{
  content:"" !important;

  position:absolute !important;

  width:145px !important;
  height:145px !important;

  top:-80px !important;
  right:-60px !important;

  border:1px solid rgba(10,171,181,.13) !important;
  border-radius:50% !important;

  box-shadow:none !important;
}


body[data-page="archive"] .hero-stat-label{
  margin:0 0 8px !important;

  color:#718496 !important;

  font-size:9px !important;
  font-weight:900 !important;

  letter-spacing:.09em !important;
}


body[data-page="archive"] .hero-stat strong{
  color:#10233a !important;

  font-size:48px !important;
  line-height:1 !important;

  font-weight:950 !important;

  letter-spacing:-.05em !important;
}


body[data-page="archive"] .hero-stat > span:last-child{
  margin-top:8px !important;

  color:#8393a2 !important;

  font-size:11px !important;
}


/* =========================================================
   FILTER PANEL
   ========================================================= */

body[data-page="archive"] .archive-panel{
  padding:18px !important;

  border:1px solid #dbe6eb !important;
  border-radius:18px !important;

  background:#ffffff !important;

  box-shadow:
    0 8px 28px rgba(24,61,82,.055) !important;

  backdrop-filter:none !important;
}


body[data-page="archive"] .archive-toolbar{
  display:grid !important;

  grid-template-columns:
    repeat(3,minmax(130px,.86fr))
    minmax(190px,1.2fr)
    minmax(145px,.82fr)
    auto !important;

  align-items:end !important;

  gap:10px !important;
}


body[data-page="archive"] .filter-field label{
  display:block !important;

  margin:0 0 6px 2px !important;

  color:#718496 !important;

  font-size:9px !important;
  font-weight:900 !important;

  letter-spacing:.08em !important;
}


body[data-page="archive"] select,
body[data-page="archive"] .filter-field input{
  width:100% !important;
  min-height:44px !important;

  border:1px solid #d9e4e9 !important;
  border-radius:10px !important;

  outline:none !important;

  color:#20384f !important;

  background:#f8fafb !important;

  font-size:12px !important;
  font-weight:750 !important;

  box-shadow:none !important;
}


body[data-page="archive"] select{
  padding:9px 12px !important;
}


body[data-page="archive"] select option{
  color:#20384f !important;
  background:#ffffff !important;
}


body[data-page="archive"] .filter-field input{
  padding:9px 12px !important;
}


body[data-page="archive"] .filter-field input[type="date"]{
  color-scheme:light !important;
}


body[data-page="archive"] select:focus,
body[data-page="archive"] .filter-field input:focus{
  border-color:#72cbd0 !important;

  box-shadow:
    0 0 0 3px rgba(10,171,181,.09) !important;

  background:#ffffff !important;
}


body[data-page="archive"] .search-input-wrap{
  position:relative !important;
}


body[data-page="archive"] .search-input-wrap > span{
  position:absolute !important;

  left:12px !important;
  top:50% !important;

  z-index:2 !important;

  transform:translateY(-50%) !important;

  color:#7e91a2 !important;

  font-size:13px !important;

  pointer-events:none !important;
}


body[data-page="archive"] .search-input-wrap input{
  padding-left:34px !important;
}


body[data-page="archive"] .ghost-button,
body[data-page="archive"] .refresh-button{
  min-height:44px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:0 15px !important;

  border:1px solid #d8e3e8 !important;
  border-radius:10px !important;

  color:#334d63 !important;

  background:#ffffff !important;

  font-size:11px !important;
  font-weight:850 !important;

  box-shadow:none !important;

  cursor:pointer !important;
}


body[data-page="archive"] .ghost-button:hover,
body[data-page="archive"] .refresh-button:hover{
  color:#078e98 !important;

  border-color:#9fdadd !important;

  background:#f4fbfb !important;

  transform:none !important;
}


body[data-page="archive"] .refresh-button:disabled{
  opacity:.55 !important;
  cursor:default !important;
}


/* =========================================================
   RESULTS SUMMARY
   ========================================================= */

body[data-page="archive"] .archive-summary{
  display:flex !important;

  align-items:center !important;
  justify-content:space-between !important;

  gap:14px !important;

  margin-top:15px !important;
  padding-top:14px !important;

  border-top:1px solid #e6ecef !important;
}


body[data-page="archive"] .archive-summary > div{
  display:flex !important;

  align-items:baseline !important;

  gap:5px !important;

  color:#64798b !important;

  font-size:11px !important;
}


body[data-page="archive"] #resultCount{
  color:#10233a !important;

  font-size:18px !important;
  font-weight:950 !important;
}


/* =========================================================
   MATCH GRID / EMPTY STATE
   ========================================================= */

body[data-page="archive"] .matches-grid{
  display:grid !important;

  grid-template-columns:
    repeat(auto-fill,minmax(300px,1fr)) !important;

  gap:12px !important;

  margin-top:14px !important;
}


body[data-page="archive"] .archive-message{
  grid-column:1 / -1 !important;

  min-height:150px !important;

  display:flex !important;
  flex-direction:column !important;

  align-items:center !important;
  justify-content:center !important;

  gap:6px !important;

  padding:24px !important;

  border:1px dashed #cedce3 !important;
  border-radius:14px !important;

  color:#6d8192 !important;

  background:#f9fbfc !important;

  text-align:center !important;

  box-shadow:none !important;
}


body[data-page="archive"] .archive-message strong{
  color:#1d354b !important;

  font-size:14px !important;
  font-weight:900 !important;
}


body[data-page="archive"] .archive-message span{
  color:#7a8d9d !important;

  font-size:11px !important;
}


/* =========================================================
   DYNAMIC MATCH CARDS
   Existing matches.js classes — no JS change.
   ========================================================= */

body[data-page="archive"] .match-card{
  position:relative !important;

  overflow:hidden !important;

  border:1px solid #dbe5ea !important;
  border-radius:14px !important;

  color:#10233a !important;

  background:#ffffff !important;

  box-shadow:
    0 6px 20px rgba(24,61,82,.055) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease !important;
}


body[data-page="archive"] .match-card::before,
body[data-page="archive"] .match-card::after{
  display:none !important;
}


body[data-page="archive"] .match-card:hover{
  transform:translateY(-2px) !important;

  border-color:#bcd9de !important;

  box-shadow:
    0 12px 28px rgba(24,61,82,.09) !important;
}


body[data-page="archive"] .match-card-link{
  display:block !important;

  height:100% !important;

  padding:14px !important;

  color:#10233a !important;

  background:#ffffff !important;
}


body[data-page="archive"] .match-card-top{
  display:flex !important;

  align-items:center !important;
  justify-content:space-between !important;

  gap:10px !important;
}


body[data-page="archive"] .match-date{
  color:#748797 !important;

  font-size:9px !important;
  font-weight:800 !important;
}


body[data-page="archive"] .match-location{
  display:inline-flex !important;

  align-items:center !important;

  min-width:0 !important;

  padding:5px 8px !important;

  border-radius:999px !important;

  color:#087f88 !important;

  background:#edf9f9 !important;

  font-size:9px !important;
  font-weight:850 !important;
}


body[data-page="archive"] .match-location span{
  overflow:hidden !important;

  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}


body[data-page="archive"] .match-scoreboard{
  display:grid !important;

  gap:6px !important;

  margin-top:12px !important;
  padding:0 !important;

  border:0 !important;

  background:transparent !important;
}


body[data-page="archive"] .player-row{
  min-height:43px !important;

  display:flex !important;

  align-items:center !important;
  justify-content:space-between !important;

  gap:12px !important;

  padding:8px 10px !important;

  border:1px solid #e2e9ed !important;
  border-radius:9px !important;

  color:#2b4358 !important;

  background:#f8fafb !important;
}


body[data-page="archive"] .player-row.winner{
  color:#102f37 !important;

  border-color:#bce0e2 !important;

  background:
    linear-gradient(
      90deg,
      #eaf8f8,
      #f7fbfb
    ) !important;

  box-shadow:
    inset 3px 0 0 #0aabb5 !important;
}


body[data-page="archive"] .player-name{
  min-width:0 !important;

  display:flex !important;
  align-items:center !important;

  gap:7px !important;

  color:inherit !important;

  font-size:12px !important;
  font-weight:850 !important;

  overflow-wrap:anywhere !important;
}


body[data-page="archive"] .winner-dot{
  width:7px !important;
  height:7px !important;

  flex:0 0 7px !important;

  border-radius:50% !important;

  background:#0aabb5 !important;

  box-shadow:
    0 0 0 4px rgba(10,171,181,.11) !important;
}


body[data-page="archive"] .player-score{
  min-width:34px !important;

  color:#10233a !important;

  font-size:19px !important;
  line-height:1 !important;

  font-weight:950 !important;

  text-align:right !important;

  font-variant-numeric:tabular-nums !important;
}


body[data-page="archive"] .match-divider{
  height:1px !important;

  margin:12px 0 !important;

  background:#e6ecef !important;
}


body[data-page="archive"] .match-card-bottom{
  display:flex !important;

  align-items:center !important;
  justify-content:space-between !important;

  gap:10px !important;
}


body[data-page="archive"] .final-status{
  display:inline-flex !important;

  align-items:center !important;

  padding:5px 8px !important;

  border-radius:999px !important;

  color:#617688 !important;

  background:#f0f4f6 !important;

  font-size:8px !important;
  font-weight:900 !important;

  letter-spacing:.06em !important;

  text-transform:uppercase !important;
}


body[data-page="archive"] .view-match{
  color:#078f99 !important;

  font-size:10px !important;
  font-weight:900 !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

body[data-page="archive"] .footer{
  display:flex !important;

  align-items:center !important;
  justify-content:space-between !important;

  gap:20px !important;

  margin-top:18px !important;
  padding:16px 4px 0 !important;

  border-top:1px solid #dfe7eb !important;

  color:#718596 !important;

  font-size:10px !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1100px){

  body[data-page="archive"] .archive-toolbar{
    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;
  }

  body[data-page="archive"] .search-field{
    grid-column:span 2 !important;
  }

  body[data-page="archive"] .ghost-button{
    width:100% !important;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */
.mobile-nav-toggle{display:none}
.archive-language{display:flex;align-items:center;gap:4px}
.archive-language button{min-width:38px;min-height:38px;border:1px solid transparent;border-radius:9px;background:none;color:#526a7c;font-weight:850;cursor:pointer}.archive-language button:is(:hover,:focus-visible,.active){border-color:#b9dfe2;background:#e8f7f7;color:#076b73}

@media (max-width:760px){
  body[data-page="archive"] .mobile-nav-toggle{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:10px;background:#edf7f7;color:#15354a;font-size:20px}
  body[data-page="archive"] .archive-language{display:flex;grid-column:1/-1;gap:8px}
  body[data-page="archive"] .archive-language button{min-width:54px;min-height:40px;border:1px solid #dce7ec;border-radius:9px}
  body[data-page="archive"] .header-cta{display:none!important}
  body[data-page="archive"] .nav{display:none!important;grid-column:1/-1!important;flex-direction:column;align-items:stretch!important}
  body.archive-menu-open[data-page="archive"] .nav{display:flex!important}
  body[data-page="archive"] .nav a{min-height:50px;display:flex;align-items:center;padding:0 13px!important;border-bottom:1px solid #dfe9ec;border-radius:8px;font-size:14px!important}
  body[data-page="archive"] .nav a.active{background:#e4f5f5;color:#076d75!important}

  body[data-page="archive"] .site-shell{
    width:min(100% - 20px,1500px) !important;

    padding-top:10px !important;
  }


  body[data-page="archive"] .topbar{
    grid-template-columns:1fr auto !important;

    gap:8px 12px !important;

    padding:9px 10px !important;
  }


  body[data-page="archive"] .brand{
    padding:6px 9px !important;
  }


  body[data-page="archive"] .brand img{
    max-width:145px !important;
    max-height:40px !important;
  }


  body[data-page="archive"] .header-cta{
    min-height:40px !important;

    padding:0 12px !important;

    font-size:10px !important;
  }


  body[data-page="archive"] .nav{
    grid-column:1 / -1 !important;

    justify-content:space-between !important;

    gap:10px !important;

    padding:2px 5px 0 !important;

    font-size:10px !important;
  }


  body[data-page="archive"] .nav a{
    padding:8px 0 !important;
  }


  body[data-page="archive"] .archive-hero{
    grid-template-columns:1fr !important;

    gap:10px !important;
  }


  body[data-page="archive"] .hero-copy{
    min-height:0 !important;

    padding:22px !important;
  }


  body[data-page="archive"] .archive-hero h1{
    font-size:
      clamp(32px,10vw,42px) !important;
  }


  body[data-page="archive"] .archive-hero p{
    font-size:12px !important;
  }


  body[data-page="archive"] .hero-stat{
    min-height:0 !important;

    display:grid !important;

    grid-template-columns:1fr auto !important;
    grid-template-rows:auto auto !important;

    align-items:center !important;

    padding:16px 18px !important;
  }


  body[data-page="archive"] .hero-stat-label{
    grid-column:1 !important;
    grid-row:1 !important;

    margin:0 !important;
  }


  body[data-page="archive"] .hero-stat strong{
    grid-column:2 !important;
    grid-row:1 / 3 !important;

    font-size:38px !important;
  }


  body[data-page="archive"] .hero-stat > span:last-child{
    grid-column:1 !important;
    grid-row:2 !important;

    margin-top:3px !important;
  }


  body[data-page="archive"] .archive-panel{
    padding:12px !important;
  }


  body[data-page="archive"] .archive-toolbar{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:8px !important;
  }


  body[data-page="archive"] .search-field{
    grid-column:1 / -1 !important;
  }


  body[data-page="archive"] .filter-field:nth-child(5){
    grid-column:1 !important;
  }


  body[data-page="archive"] .ghost-button{
    grid-column:2 !important;
  }


  body[data-page="archive"] .matches-grid{
    grid-template-columns:1fr !important;
  }


  body[data-page="archive"] .footer{
    flex-direction:column !important;

    align-items:flex-start !important;

    gap:5px !important;
  }
}


@media (max-width:460px){

  body[data-page="archive"] .archive-toolbar{
    grid-template-columns:1fr !important;
  }


  body[data-page="archive"] .search-field,
  body[data-page="archive"] .filter-field:nth-child(5),
  body[data-page="archive"] .ghost-button{
    grid-column:1 !important;
  }


  body[data-page="archive"] .archive-summary{
    align-items:center !important;
  }
}

/* ===== VOXCOURT MATCH ARCHIVE WHITE END ===== */

/* ===== VOXCOURT ARCHIVE COMPACT V2 START ===== */

/*
   Final compact pass for /matches/.
   Visual only.
*/

@media (min-width:761px){

  body[data-page="archive"] .archive-hero{
    grid-template-columns:
      minmax(0,1fr)
      215px !important;

    gap:12px !important;
    margin-bottom:12px !important;
  }

  body[data-page="archive"] .hero-copy{
    min-height:165px !important;
    padding:20px 27px !important;
  }

  body[data-page="archive"] .eyebrow{
    margin-bottom:8px !important;
    font-size:9px !important;
  }

  body[data-page="archive"] .archive-hero h1{
    font-size:
      clamp(31px,2.7vw,42px) !important;

    line-height:1 !important;
    letter-spacing:-.04em !important;
  }

  body[data-page="archive"] .archive-hero h1 br{
    display:none !important;
  }

  body[data-page="archive"] .archive-hero p{
    max-width:850px !important;

    margin-top:10px !important;

    font-size:12px !important;
    line-height:1.5 !important;
  }

  body[data-page="archive"] .hero-stat{
    min-height:165px !important;

    padding:20px !important;
  }

  body[data-page="archive"] .hero-stat-label{
    margin-bottom:5px !important;

    font-size:8px !important;
  }

  body[data-page="archive"] .hero-stat strong{
    font-size:38px !important;
  }

  body[data-page="archive"] .hero-stat > span:last-child{
    margin-top:5px !important;

    font-size:9px !important;
  }

  body[data-page="archive"] .hero-stat::before{
    width:115px !important;
    height:115px !important;

    top:-65px !important;
    right:-48px !important;
  }

  body[data-page="archive"] .archive-panel{
    padding:16px !important;
  }

  body[data-page="archive"] .archive-summary{
    margin-top:12px !important;
    padding-top:11px !important;
  }

  body[data-page="archive"] .matches-grid{
    margin-top:11px !important;
  }

  body[data-page="archive"] .archive-message{
    min-height:125px !important;
  }
}

/* ===== VOXCOURT ARCHIVE COMPACT V2 END ===== */

/* ===== VOXCOURT MATCH DETAIL WHITE START ===== */

/*
   Individual archived match page.
   Premium white VoxCourt treatment.

   Visual only:
   - match.js untouched
   - archived data untouched
   - overview untouched
   - highlights untouched
   - timeline untouched
*/


/* =========================================================
   PAGE
   ========================================================= */

body[data-page="match"]{
  margin:0 !important;

  color:#10233a !important;

  background:#f5f8fa !important;
}

body[data-page="match"]::before{
  display:none !important;
}

body[data-page="match"] .site-shell{
  width:min(1500px,calc(100% - 40px)) !important;

  margin:0 auto !important;

  padding:20px 0 42px !important;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

body[data-page="match"] .topbar{
  position:relative !important;
  top:auto !important;

  z-index:30 !important;

  display:grid !important;

  grid-template-columns:
    240px
    1fr
    auto
    190px !important;

  align-items:center !important;

  gap:20px !important;

  min-height:78px !important;

  padding:10px 18px !important;
  margin:0 0 17px !important;

  border:1px solid #dce7ec !important;
  border-radius:18px !important;

  background:#ffffff !important;

  box-shadow:
    0 8px 30px rgba(27,61,82,.06) !important;

  backdrop-filter:none !important;
}


body[data-page="match"] .brand{
  width:max-content !important;
  min-width:0 !important;

  display:flex !important;
  align-items:center !important;

  padding:7px 11px !important;

  border-radius:11px !important;

  background:#071a27 !important;
}


body[data-page="match"] .brand img{
  width:auto !important;
  height:auto !important;

  max-width:190px !important;
  max-height:48px !important;
}


body[data-page="match"] .nav{
  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  gap:42px !important;

  color:#294057 !important;

  font-size:13px !important;
  font-weight:800 !important;
}


body[data-page="match"] .nav a{
  position:relative !important;

  padding:12px 0 !important;

  color:#294057 !important;

  text-decoration:none !important;
}


body[data-page="match"] .nav a:hover,
body[data-page="match"] .nav a.active{
  color:#079ba6 !important;
}


body[data-page="match"] .nav a::after{
  bottom:4px !important;

  background:#0aabb5 !important;
}


body[data-page="match"] .header-cta{
  justify-self:end !important;

  min-height:46px !important;

  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  padding:0 20px !important;

  border:0 !important;
  border-radius:12px !important;

  color:#ffffff !important;

  background:
    linear-gradient(
      135deg,
      #12bdc6,
      #078f9a
    ) !important;

  font-size:13px !important;
  font-weight:850 !important;

  text-decoration:none !important;

  box-shadow:
    0 10px 25px rgba(8,157,167,.20) !important;
}


/* =========================================================
   BACK
   ========================================================= */

body[data-page="match"] .back-link{
  display:inline-flex !important;

  align-items:center !important;

  gap:6px !important;

  margin:2px 0 10px 3px !important;

  padding:7px 0 !important;

  color:#60788b !important;

  font-size:11px !important;
  font-weight:800 !important;

  text-decoration:none !important;
}


body[data-page="match"] .back-link:hover{
  color:#078e98 !important;
}

body[data-page="match"] .match-page-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

body[data-page="match"] .share-match-button{
  min-height:38px;
  padding:0 14px;
  border:1px solid #b9dfe2;
  border-radius:10px;
  color:#076b73;
  background:#e8f7f7;
  font:800 12px/1.35 Inter,sans-serif;
  cursor:pointer;
}

body[data-page="match"] .share-match-button:is(:hover,:focus-visible){
  border-color:#079ba6;
  background:#dff3f4;
}

body[data-page="match"] .share-status{
  min-height:0;
  margin:0 3px 7px;
  color:#526a7c;
  font-size:11px;
  font-weight:700;
}

body[data-page="match"] .share-status:empty{
  display:none;
}


/* =========================================================
   RESULT HERO
   ========================================================= */

body[data-page="match"] .match-hero{
  display:grid !important;

  grid-template-columns:
    minmax(210px,.55fr)
    minmax(0,1.45fr) !important;

  align-items:stretch !important;

  gap:18px !important;

  min-height:185px !important;

  padding:20px !important;
  margin:0 0 13px !important;

  border:1px solid #dbe6eb !important;
  border-radius:18px !important;

  background:#ffffff !important;

  box-shadow:
    0 8px 28px rgba(24,61,82,.06) !important;

  overflow:hidden !important;
}


body[data-page="match"] .detail-meta{
  min-width:0 !important;

  display:flex !important;

  flex-direction:column !important;

  align-items:flex-start !important;
  justify-content:center !important;

  gap:7px !important;

  padding:4px 4px 4px 6px !important;

  color:#718496 !important;

  font-size:10px !important;
  line-height:1.45 !important;
}


body[data-page="match"] .detail-meta > span:not(.final-pill){
  max-width:100% !important;

  overflow-wrap:anywhere !important;
}


body[data-page="match"] .final-pill{
  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  min-height:25px !important;

  padding:0 9px !important;

  border:1px solid #bce2e4 !important;
  border-radius:999px !important;

  color:#087f88 !important;

  background:#eaf8f8 !important;

  font-size:8px !important;
  font-weight:950 !important;

  letter-spacing:.08em !important;

  text-transform:uppercase !important;
}


/* SCOREBOARD */

body[data-page="match"] .detail-scoreboard{
  min-width:0 !important;

  display:grid !important;

  grid-template-columns:
    minmax(0,1fr)
    1px
    minmax(0,1fr) !important;

  align-items:stretch !important;

  gap:13px !important;

  padding:0 !important;

  border:0 !important;

  background:transparent !important;
}


body[data-page="match"] .detail-divider{
  width:1px !important;
  height:auto !important;

  align-self:stretch !important;

  margin:5px 0 !important;

  background:#e3eaee !important;
}


body[data-page="match"] .detail-player{
  min-width:0 !important;
  min-height:140px !important;

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;
  justify-content:center !important;

  gap:10px !important;

  padding:17px !important;

  border:1px solid #e1e8ec !important;
  border-radius:14px !important;

  color:#294157 !important;

  background:#f8fafb !important;
}


body[data-page="match"] .detail-player.winner{
  color:#153842 !important;

  border-color:#b8dfe1 !important;

  background:
    linear-gradient(
      180deg,
      #eaf9f9 0%,
      #f8fcfc 100%
    ) !important;

  box-shadow:
    inset 0 3px 0 #0aabb5 !important;
}


body[data-page="match"] .detail-player-name{
  min-width:0 !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  gap:8px !important;

  color:inherit !important;

  font-size:
    clamp(14px,1.35vw,20px) !important;

  line-height:1.15 !important;

  font-weight:900 !important;

  text-align:center !important;

  overflow-wrap:anywhere !important;
}


body[data-page="match"] .winner-dot{
  width:8px !important;
  height:8px !important;

  flex:0 0 8px !important;

  border-radius:50% !important;

  background:#0aabb5 !important;

  box-shadow:
    0 0 0 4px rgba(10,171,181,.11) !important;
}


body[data-page="match"] .detail-player-score{
  color:#10233a !important;

  font-size:
    clamp(32px,3vw,47px) !important;

  line-height:1 !important;

  font-weight:950 !important;

  letter-spacing:-.05em !important;

  font-variant-numeric:tabular-nums !important;
}


/* =========================================================
   MATCH CONTENT + TABS
   ========================================================= */

body[data-page="match"] .match-content{
  display:block !important;

  padding:0 !important;

  border:0 !important;

  background:transparent !important;
}


body[data-page="match"] .match-content[hidden]{
  display:none !important;
}


body[data-page="match"] .match-tabs{
  display:flex !important;

  align-items:center !important;

  gap:5px !important;

  padding:5px !important;
  margin:0 0 12px !important;

  border:1px solid #dce6eb !important;
  border-radius:13px !important;

  background:#ffffff !important;

  box-shadow:
    0 5px 18px rgba(24,61,82,.045) !important;
}


body[data-page="match"] .match-tab{
  min-height:38px !important;

  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  padding:0 16px !important;

  border:0 !important;
  border-radius:9px !important;

  color:#64798b !important;

  background:transparent !important;

  font-size:10px !important;
  font-weight:900 !important;

  cursor:pointer !important;
}


body[data-page="match"] .match-tab:hover{
  color:#087f88 !important;

  background:#f1f9f9 !important;
}


body[data-page="match"] .match-tab.active{
  color:#ffffff !important;

  background:
    linear-gradient(
      135deg,
      #12b9c2,
      #078f99
    ) !important;

  box-shadow:
    0 6px 16px rgba(8,157,167,.16) !important;
}


body[data-page="match"] .tab-panel{
  display:none !important;
}


body[data-page="match"] .tab-panel.active{
  display:block !important;
}


/* =========================================================
   OVERVIEW
   ========================================================= */

body[data-page="match"] .overview-grid{
  display:grid !important;

  grid-template-columns:
    repeat(4,minmax(0,1fr)) !important;

  gap:10px !important;
}


body[data-page="match"] .info-card{
  min-width:0 !important;
  min-height:105px !important;

  display:flex !important;

  flex-direction:column !important;

  justify-content:center !important;

  gap:8px !important;

  padding:15px 16px !important;

  border:1px solid #dde6ea !important;
  border-radius:13px !important;

  background:#ffffff !important;

  box-shadow:
    0 5px 18px rgba(24,61,82,.045) !important;
}


body[data-page="match"] .info-label{
  color:#7a8d9d !important;

  font-size:8px !important;
  font-weight:950 !important;

  letter-spacing:.09em !important;

  text-transform:uppercase !important;
}


body[data-page="match"] .info-value{
  color:#173149 !important;

  font-size:14px !important;
  line-height:1.3 !important;

  font-weight:900 !important;

  overflow-wrap:anywhere !important;
}


/* =========================================================
   HIGHLIGHTS
   ========================================================= */

body[data-page="match"] .highlights-grid{
  display:grid !important;

  grid-template-columns:
    repeat(3,minmax(0,1fr)) !important;

  gap:10px !important;
}


body[data-page="match"] .highlight-card{
  min-width:0 !important;

  display:grid !important;

  grid-template-columns:70px minmax(0,1fr) !important;

  align-items:center !important;

  gap:12px !important;

  min-height:92px !important;

  padding:11px !important;

  border:1px solid #dde6ea !important;
  border-radius:13px !important;

  color:#1a354b !important;

  background:#ffffff !important;

  text-decoration:none !important;

  box-shadow:
    0 5px 18px rgba(24,61,82,.045) !important;

  transition:
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease !important;
}


body[data-page="match"] .highlight-card:hover{
  transform:translateY(-2px) !important;

  border-color:#b8dce0 !important;

  box-shadow:
    0 10px 25px rgba(24,61,82,.08) !important;
}


body[data-page="match"] .highlight-preview{
  width:70px !important;
  height:64px !important;

  display:grid !important;

  place-items:center !important;

  border:1px solid #bde1e3 !important;
  border-radius:10px !important;

  color:#078f99 !important;

  background:
    linear-gradient(
      135deg,
      #e8f8f8,
      #f5fbfb
    ) !important;

  font-size:18px !important;
}


body[data-page="match"] .highlight-copy{
  min-width:0 !important;

  display:flex !important;

  flex-direction:column !important;

  gap:5px !important;
}


body[data-page="match"] .highlight-copy strong{
  color:#173149 !important;

  font-size:11px !important;
  line-height:1.3 !important;

  font-weight:900 !important;

  overflow-wrap:anywhere !important;
}


body[data-page="match"] .highlight-copy span{
  color:#748797 !important;

  font-size:9px !important;
  line-height:1.35 !important;

  overflow-wrap:anywhere !important;
}


/* =========================================================
   TIMELINE
   ========================================================= */

body[data-page="match"] .timeline-list{
  display:grid !important;

  gap:7px !important;
}


body[data-page="match"] .timeline-event{
  min-width:0 !important;
  min-height:62px !important;

  display:grid !important;

  grid-template-columns:
    90px
    minmax(0,1fr)
    auto !important;

  align-items:center !important;

  gap:12px !important;

  padding:10px 12px !important;

  border:1px solid #dfe7eb !important;
  border-radius:11px !important;

  color:#243f56 !important;

  background:#ffffff !important;

  box-shadow:
    0 4px 14px rgba(24,61,82,.035) !important;
}


body[data-page="match"] .timeline-type{
  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  min-height:28px !important;

  padding:0 8px !important;

  border-radius:8px !important;

  color:#087f88 !important;

  background:#ebf8f8 !important;

  font-size:8px !important;
  font-weight:950 !important;

  letter-spacing:.06em !important;
}


body[data-page="match"] .timeline-main{
  min-width:0 !important;

  display:flex !important;

  flex-direction:column !important;

  gap:3px !important;
}


body[data-page="match"] .timeline-title{
  color:#183249 !important;

  font-size:11px !important;
  font-weight:900 !important;

  overflow-wrap:anywhere !important;
}


body[data-page="match"] .timeline-score{
  color:#788b9b !important;

  font-size:9px !important;

  overflow-wrap:anywhere !important;
}


body[data-page="match"] .timeline-time{
  color:#8798a6 !important;

  font-size:9px !important;
  font-weight:750 !important;

  white-space:nowrap !important;
}


/* =========================================================
   EMPTY / ERROR
   ========================================================= */

body[data-page="match"] .archive-message{
  min-height:135px !important;

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;
  justify-content:center !important;

  gap:6px !important;

  padding:22px !important;

  border:1px dashed #cfdde3 !important;
  border-radius:13px !important;

  color:#758898 !important;

  background:#f9fbfc !important;

  text-align:center !important;

  box-shadow:none !important;
}


body[data-page="match"] .archive-message strong{
  color:#1c354b !important;

  font-size:13px !important;
  font-weight:900 !important;
}


body[data-page="match"] .archive-message span{
  color:#7d8f9e !important;

  font-size:10px !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

body[data-page="match"] .footer{
  display:flex !important;

  align-items:center !important;
  justify-content:space-between !important;

  gap:20px !important;

  margin-top:18px !important;

  padding:16px 4px 0 !important;

  border-top:1px solid #dfe7eb !important;

  color:#718596 !important;

  font-size:10px !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1000px){

  body[data-page="match"] .match-hero{
    grid-template-columns:1fr !important;
  }


  body[data-page="match"] .detail-meta{
    display:grid !important;

    grid-template-columns:
      auto
      1fr !important;

    align-items:center !important;

    gap:6px 12px !important;
  }


  body[data-page="match"] .final-pill{
    grid-row:1 / 3 !important;
  }


  body[data-page="match"] .overview-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }


  body[data-page="match"] .highlights-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:760px){

  body[data-page="match"] .site-shell{
    width:min(100% - 20px,1500px) !important;

    padding-top:10px !important;
  }


  body[data-page="match"] .topbar{
    grid-template-columns:
      1fr
      auto !important;

    gap:8px 12px !important;

    padding:9px 10px !important;
  }

  body[data-page="match"] .mobile-nav-toggle{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:0;
    border-radius:10px;
    background:#edf7f7;
    color:#15354a;
    font-size:20px;
  }

  body[data-page="match"] .archive-language{
    grid-column:1 / -1;
  }

  body[data-page="match"] .archive-language button{
    min-width:54px;
    min-height:40px;
  }

  body[data-page="match"] .header-cta{
    display:none !important;
  }

  body[data-page="match"] .nav{
    display:none !important;
    grid-column:1 / -1 !important;
    flex-direction:column;
    align-items:stretch !important;
    gap:0 !important;
    padding:0 !important;
    font-size:14px !important;
  }

  body.archive-menu-open[data-page="match"] .nav{
    display:flex !important;
  }

  body[data-page="match"] .nav a{
    min-height:50px;
    display:flex;
    align-items:center;
    padding:0 13px !important;
    border-bottom:1px solid #dfe9ec;
    border-radius:8px;
  }


  body[data-page="match"] .brand{
    padding:6px 9px !important;
  }


  body[data-page="match"] .brand img{
    max-width:145px !important;
    max-height:40px !important;
  }


  body[data-page="match"] .header-cta{
    min-height:40px !important;

    padding:0 12px !important;

    font-size:10px !important;
  }


  body[data-page="match"] .nav{
    grid-column:1 / -1 !important;

    justify-content:space-between !important;

    gap:10px !important;

    padding:2px 5px 0 !important;

    font-size:10px !important;
  }


  body[data-page="match"] .nav a{
    padding:8px 0 !important;
  }


  body[data-page="match"] .back-link{
    margin-bottom:7px !important;
  }


  body[data-page="match"] .match-hero{
    gap:10px !important;

    min-height:0 !important;

    padding:12px !important;
  }


  body[data-page="match"] .detail-meta{
    display:flex !important;

    flex-direction:column !important;

    align-items:flex-start !important;

    gap:4px !important;
  }


  body[data-page="match"] .detail-scoreboard{
    grid-template-columns:1fr !important;

    gap:7px !important;
  }


  body[data-page="match"] .detail-divider{
    width:100% !important;
    height:1px !important;

    margin:0 !important;
  }


  body[data-page="match"] .detail-player{
    min-height:80px !important;

    flex-direction:row !important;

    justify-content:space-between !important;

    padding:12px 14px !important;
  }


  body[data-page="match"] .detail-player-name{
    justify-content:flex-start !important;

    font-size:13px !important;

    text-align:left !important;
  }


  body[data-page="match"] .detail-player-score{
    font-size:30px !important;
  }


  body[data-page="match"] .match-tabs{
    display:grid !important;

    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;
  }


  body[data-page="match"] .match-tab{
    min-width:0 !important;

    padding:0 5px !important;

    font-size:9px !important;
  }


  body[data-page="match"] .overview-grid,
  body[data-page="match"] .highlights-grid{
    grid-template-columns:1fr !important;
  }


  body[data-page="match"] .info-card{
    min-height:82px !important;
  }


  body[data-page="match"] .timeline-event{
    grid-template-columns:
      72px
      minmax(0,1fr) !important;

    gap:8px !important;
  }


  body[data-page="match"] .timeline-time{
    grid-column:2 !important;

    justify-self:start !important;
  }


  body[data-page="match"] .footer{
    flex-direction:column !important;

    align-items:flex-start !important;

    gap:5px !important;
  }
}


/* ===== VOXCOURT MATCH DETAIL WHITE END ===== */

/* ===== VC MATCH DETAIL FINAL V4 START ===== */


/* =========================================================
   MAIN PANEL
   ========================================================= */

body[data-page="match"] .tab-panel.active{
  padding:20px !important;

  border:
    1px solid #d8e5ea !important;

  border-radius:
    18px !important;

  background:
    #f1f6f8 !important;

  box-shadow:
    inset 0 1px 0 #ffffff !important;
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

body[data-page="match"]
.match-panel-head{
  margin:
    0 0 18px !important;

  padding:
    4px 2px 15px !important;

  border-bottom:
    1px solid #d5e3e8 !important;
}


body[data-page="match"]
.match-panel-head > span{
  display:block !important;

  margin-bottom:
    5px !important;

  color:
    #0797a0 !important;

  font-size:
    10px !important;

  line-height:
    1 !important;

  font-weight:
    950 !important;

  letter-spacing:
    .12em !important;
}


body[data-page="match"]
.match-panel-head h2{
  margin:
    0 !important;

  color:
    #10283e !important;

  font-size:
    21px !important;

  line-height:
    1.1 !important;

  font-weight:
    950 !important;

  letter-spacing:
    -.025em !important;
}


body[data-page="match"]
.match-panel-head p{
  margin:
    5px 0 0 !important;

  color:
    #60778a !important;

  font-size:
    12px !important;

  line-height:
    1.45 !important;

  font-weight:
    650 !important;
}


/* =========================================================
   PLAYER HERO — PHOTO + NAME + SCORE
   ========================================================= */

body[data-page="match"]
.detail-player{
  display:grid !important;

  grid-template-columns:
    64px
    minmax(0,1fr)
    auto !important;

  align-items:
    center !important;

  gap:
    13px !important;

  min-height:
    140px !important;

  padding:
    17px 18px !important;
}


body[data-page="match"]
.detail-player-photo{
  width:
    64px !important;

  height:
    64px !important;

  overflow:
    hidden !important;

  border:
    2px solid #93dce0 !important;

  border-radius:
    50% !important;

  background:
    #ffffff !important;

  box-shadow:
    0 5px 15px
    rgba(16,35,58,.12) !important;
}


body[data-page="match"]
.detail-player.winner
.detail-player-photo{
  border-color:
    #0aabb5 !important;

  box-shadow:
    0 0 0 4px
    rgba(10,171,181,.08),
    0 6px 18px
    rgba(16,35,58,.12) !important;
}


body[data-page="match"]
.detail-player-photo img{
  display:block !important;

  width:
    100% !important;

  height:
    100% !important;

  object-fit:
    cover !important;

  object-position:
    center !important;
}


body[data-page="match"]
.detail-player-name{
  justify-content:
    flex-start !important;

  color:
    #173148 !important;

  font-size:
    clamp(
      14px,
      1.25vw,
      19px
    ) !important;

  text-align:
    left !important;
}


body[data-page="match"]
.detail-player-score{
  min-width:
    42px !important;

  font-size:
    clamp(
      34px,
      3vw,
      46px
    ) !important;
}


/* =========================================================
   OVERVIEW — NO MORE MICROSCOPIC LABELS
   ========================================================= */

body[data-page="match"]
.info-card{
  min-height:
    110px !important;

  padding:
    17px 18px !important;

  border:
    1px solid #d8e4e9 !important;

  background:
    #ffffff !important;

  box-shadow:
    0 5px 15px
    rgba(16,35,58,.045) !important;
}


body[data-page="match"]
.info-label{
  margin-bottom:
    9px !important;

  color:
    #526b7f !important;

  font-size:
    11px !important;

  line-height:
    1.1 !important;

  font-weight:
    950 !important;

  letter-spacing:
    .085em !important;
}


body[data-page="match"]
.info-value{
  color:
    #122d44 !important;

  font-size:
    16px !important;

  line-height:
    1.3 !important;

  font-weight:
    850 !important;
}


/* =========================================================
   TIMELINE
   ========================================================= */

body[data-page="match"]
.timeline-list{
  display:grid !important;

  gap:
    9px !important;
}


/* ---------- SET HEADER ---------- */

body[data-page="match"]
.timeline-set-header{
  position:relative !important;

  display:grid !important;

  grid-template-columns:
    auto
    1fr !important;

  grid-template-areas:
    "kicker heading"
    "kicker description" !important;

  align-items:
    center !important;

  column-gap:
    14px !important;

  row-gap:
    2px !important;

  margin:
    28px 0
    5px !important;

  padding:
    15px 18px !important;

  border:
    1px solid #bfe3e5 !important;

  border-radius:
    15px !important;

  background:
    linear-gradient(
      135deg,
      #eaf9f9 0%,
      #f7fcfc 100%
    ) !important;

  box-shadow:
    0 5px 18px
    rgba(16,35,58,.045) !important;
}


body[data-page="match"]
.timeline-set-header:first-child{
  margin-top:
    0 !important;
}


body[data-page="match"]
.timeline-set-kicker{
  grid-area:
    kicker !important;

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

  min-width:
    76px !important;

  min-height:
    38px !important;

  padding:
    0 12px !important;

  border-radius:
    999px !important;

  color:
    #ffffff !important;

  background:
    linear-gradient(
      135deg,
      #12b8c0,
      #078f99
    ) !important;

  font-size:
    10px !important;

  font-weight:
    950 !important;

  letter-spacing:
    .11em !important;

  box-shadow:
    0 5px 14px
    rgba(8,157,167,.16) !important;
}


body[data-page="match"]
.timeline-set-heading{
  grid-area:
    heading !important;

  color:
    #123047 !important;

  font-size:
    17px !important;

  line-height:
    1.1 !important;

  font-weight:
    950 !important;
}


body[data-page="match"]
.timeline-set-description{
  grid-area:
    description !important;

  color:
    #61798c !important;

  font-size:
    11px !important;

  font-weight:
    700 !important;
}


/* ---------- EVENT ROW ---------- */

body[data-page="match"]
.timeline-event{
  display:grid !important;

  grid-template-columns:
    116px
    minmax(0,1fr)
    auto !important;

  align-items:
    center !important;

  gap:
    13px !important;

  min-height:
    66px !important;

  padding:
    10px 14px !important;

  border:
    1px solid #d7e4e9 !important;

  border-left:
    4px solid #b9d9df !important;

  border-radius:
    13px !important;

  color:
    #173148 !important;

  background:
    #ffffff !important;

  box-shadow:
    0 4px 13px
    rgba(16,35,58,.035) !important;
}


body[data-page="match"]
.timeline-event--point{
  border-left-color:
    #68cfd5 !important;
}


body[data-page="match"]
.timeline-event--game{
  border-left-color:
    #079ba6 !important;

  background:
    #f6fbfb !important;
}


body[data-page="match"]
.timeline-event--set{
  border-left-color:
    #d99b37 !important;

  background:
    #fffbf4 !important;
}


/* LEADING AREA */

body[data-page="match"]
.timeline-leading{
  display:flex !important;

  align-items:center !important;

  gap:
    8px !important;
}


body[data-page="match"]
.timeline-player-photo{
  width:
    34px !important;

  height:
    34px !important;

  flex:
    0 0 34px !important;

  display:block !important;

  object-fit:
    cover !important;

  border:
    2px solid #a6dfe2 !important;

  border-radius:
    50% !important;

  background:
    #ffffff !important;
}


body[data-page="match"]
.timeline-type{
  min-width:
    66px !important;

  display:inline-flex !important;

  align-items:center !important;

  justify-content:center !important;

  padding:
    6px 8px !important;

  border:
    1px solid #cbe5e7 !important;

  border-radius:
    8px !important;

  color:
    #087f88 !important;

  background:
    #eaf8f8 !important;

  font-size:
    9px !important;

  font-weight:
    950 !important;

  letter-spacing:
    .08em !important;
}


body[data-page="match"]
.timeline-event--game
.timeline-type{
  color:
    #ffffff !important;

  border-color:
    #079ba6 !important;

  background:
    #079ba6 !important;
}


body[data-page="match"]
.timeline-event--set
.timeline-type{
  color:
    #765019 !important;

  border-color:
    #ecd2a7 !important;

  background:
    #fff0d6 !important;
}


/* TEXT */

body[data-page="match"]
.timeline-title{
  color:
    #163149 !important;

  font-size:
    13px !important;

  line-height:
    1.3 !important;

  font-weight:
    900 !important;
}


body[data-page="match"]
.timeline-score{
  margin-top:
    4px !important;

  color:
    #647d90 !important;

  font-size:
    10.5px !important;

  line-height:
    1.3 !important;

  font-weight:
    700 !important;
}


body[data-page="match"]
.timeline-time{
  color:
    #647a8c !important;

  font-size:
    10px !important;

  line-height:
    1 !important;

  font-weight:
    800 !important;

  font-variant-numeric:
    tabular-nums !important;
}


/* =========================================================
   HIGHLIGHTS
   ========================================================= */

body[data-page="match"]
.highlights-grid{
  gap:
    12px !important;
}


body[data-page="match"]
.highlight-card{
  border:
    1px solid #d8e4e9 !important;

  background:
    #ffffff !important;

  box-shadow:
    0 5px 15px
    rgba(16,35,58,.045) !important;
}


body[data-page="match"]
.archive-message{
  border-color:
    #c9dbe2 !important;

  color:
    #5f778a !important;

  background:
    #ffffff !important;
}


body[data-page="match"]
.archive-message strong{
  color:
    #173148 !important;

  font-size:
    15px !important;
}


body[data-page="match"]
.archive-message span{
  color:
    #657d8f !important;

  font-size:
    11px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:760px){

  body[data-page="match"]
  .tab-panel.active{
    padding:
      13px !important;
  }


  body[data-page="match"]
  .detail-player{
    grid-template-columns:
      48px
      minmax(0,1fr)
      auto !important;

    min-height:
      82px !important;

    padding:
      11px 12px !important;
  }


  body[data-page="match"]
  .detail-player-photo{
    width:
      48px !important;

    height:
      48px !important;
  }


  body[data-page="match"]
  .timeline-event{
    grid-template-columns:
      1fr !important;

    gap:
      7px !important;
  }


  body[data-page="match"]
  .timeline-leading{
    grid-row:
      1 !important;
  }


  body[data-page="match"]
  .timeline-time{
    display:block !important;

    justify-self:
      start !important;
  }


  body[data-page="match"]
  .timeline-set-header{
    grid-template-columns:
      1fr !important;

    grid-template-areas:
      "kicker"
      "heading"
      "description" !important;

    gap:
      6px !important;

    padding:
      13px !important;
  }


  body[data-page="match"]
  .timeline-set-kicker{
    justify-self:
      start !important;
  }

}


/* ===== VC MATCH DETAIL FINAL V4 END ===== */

/* ===== VC ARCHIVE MEDIA V1 START ===== */


/* ARCHIVE LIST PLAYER PHOTOS */

body[data-page="archive"]
.match-scoreboard
.player-row{
  display:grid !important;

  grid-template-columns:
    38px
    minmax(0,1fr)
    auto !important;

  align-items:center !important;

  gap:10px !important;
}


body[data-page="archive"]
.match-card-player-photo{
  width:38px !important;
  height:38px !important;

  display:block !important;

  object-fit:cover !important;
  object-position:center !important;

  border:
    2px solid #a4dde1 !important;

  border-radius:
    50% !important;

  background:
    #ffffff !important;

  box-shadow:
    0 3px 10px
    rgba(16,35,58,.10) !important;
}


body[data-page="archive"]
.player-row.winner
.match-card-player-photo{
  border-color:
    #0ba7b0 !important;

  box-shadow:
    0 0 0 3px
    rgba(11,167,176,.08),
    0 4px 12px
    rgba(16,35,58,.11) !important;
}


/* ARCHIVED HIGHLIGHT THUMBNAILS */

body[data-page="match"]
.highlight-preview{
  position:relative !important;

  min-height:
    140px !important;

  overflow:
    hidden !important;

  display:grid !important;

  place-items:
    center !important;

  background:
    #dbe9ee !important;
}


body[data-page="match"]
.highlight-preview-image{
  position:absolute !important;

  inset:0 !important;

  width:100% !important;
  height:100% !important;

  display:block !important;

  object-fit:cover !important;

  object-position:center !important;
}


body[data-page="match"]
.highlight-preview::after{
  content:"" !important;

  position:absolute !important;

  inset:0 !important;

  background:
    linear-gradient(
      180deg,
      rgba(9,25,38,.02),
      rgba(9,25,38,.24)
    ) !important;

  pointer-events:none !important;
}


body[data-page="match"]
.highlight-preview-play{
  position:relative !important;

  z-index:2 !important;

  width:48px !important;
  height:48px !important;

  display:grid !important;

  place-items:center !important;

  border:
    2px solid rgba(255,255,255,.95) !important;

  border-radius:
    50% !important;

  color:
    #ffffff !important;

  background:
    rgba(8,33,50,.72) !important;

  font-size:
    18px !important;

  box-shadow:
    0 6px 18px
    rgba(0,0,0,.24) !important;
}


/* ===== VC ARCHIVE MEDIA V1 END ===== */

/* Compact navigation remains usable at tablet widths. */
@media (min-width:761px) and (max-width:900px){
  body[data-page="archive"] .topbar,
  body[data-page="match"] .topbar{
    grid-template-columns:1fr auto auto !important;
    gap:10px !important;
  }

  body[data-page="archive"] .mobile-nav-toggle,
  body[data-page="match"] .mobile-nav-toggle{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:0;
    border-radius:10px;
    background:#edf7f7;
    color:#15354a;
    font-size:20px;
  }

  body[data-page="archive"] .header-cta,
  body[data-page="match"] .header-cta{
    display:none !important;
  }

  body[data-page="archive"] .nav,
  body[data-page="match"] .nav{
    display:none !important;
    grid-column:1 / -1 !important;
    flex-direction:column;
    align-items:stretch !important;
    gap:0 !important;
  }

  body.archive-menu-open[data-page="archive"] .nav,
  body.archive-menu-open[data-page="match"] .nav{
    display:flex !important;
  }

  body[data-page="archive"] .nav a,
  body[data-page="match"] .nav a{
    min-height:48px;
    display:flex;
    align-items:center;
    padding:0 13px !important;
    border-bottom:1px solid #dfe9ec;
    border-radius:8px;
  }
}

html[lang="el"] body[data-page="archive"] :is(a,button,label,span,p,h1,h2),
html[lang="el"] body[data-page="match"] :is(a,button,label,span,p,h1,h2){
  line-height:1.35;
}

/* ===== VC RESPONSIVE PUBLIC HEADER FINAL ===== */

.mobile-nav-toggle{
  display:none;
}

@media (max-width:900px){

  body[data-page="archive"] .topbar,
  body[data-page="match"] .topbar{
    position:relative;
    grid-template-columns:1fr auto !important;
    gap:10px !important;
  }

  body[data-page="archive"] .header-cta,
  body[data-page="match"] .header-cta{
    display:none !important;
  }

  body[data-page="archive"] .mobile-nav-toggle,
  body[data-page="match"] .mobile-nav-toggle{
    display:flex !important;
    align-items:center;
    justify-content:center;
    min-width:72px;
    min-height:46px;
    padding:0 14px;
    border:1px solid #d8e5e8;
    border-radius:10px;
    background:#edf5f6;
    color:#173044;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
  }

  body[data-page="archive"] .nav,
  body[data-page="match"] .nav{
    display:none !important;
    grid-column:1 / -1 !important;
    width:100%;
    flex-direction:column;
    align-items:stretch !important;
    gap:3px !important;
    padding:10px;
    margin-top:2px;
    border:1px solid #cbdde2;
    border-radius:14px;
    background:#fff;
    box-shadow:0 18px 38px rgba(7,26,46,.14);
  }

  body.archive-menu-open[data-page="archive"] .nav,
  body.archive-menu-open[data-page="match"] .nav{
    display:flex !important;
  }

  body[data-page="archive"] .nav a,
  body[data-page="match"] .nav a{
    min-height:50px;
    display:flex;
    align-items:center;
    padding:0 14px !important;
    border-radius:8px;
    border-bottom:1px solid #e5edef;
    font-size:14px !important;
  }

  body[data-page="archive"] .nav a:last-child,
  body[data-page="match"] .nav a:last-child{
    border-bottom:0;
  }

  body[data-page="archive"] .nav a.active,
  body[data-page="match"] .nav a.active{
    background:#dff3f3;
    color:#086f78 !important;
  }
}

/* ===== VC RESPONSIVE PUBLIC HEADER FINAL END ===== */



/* =========================================================
   VOXCOURT PREMIUM SYSTEM — 2026-10
   Visual-only layer. No JS/HTML contracts changed.
========================================================= */
:root{
  --vc-bg:#06131b;--vc-bg-2:#0a1f2a;--vc-panel:#0d2633;--vc-panel-2:#123746;
  --vc-cyan:#1bc8ce;--vc-cyan-hi:#56e4df;--vc-teal:#0c848c;
  --vc-ice:#f5fbfc;--vc-ice-2:#eaf5f7;--vc-ink:#071c2b;--vc-muted:#607985;
  --vc-line:rgba(117,229,232,.18);--vc-glass:rgba(7,24,34,.78);
  --vc-shadow:0 18px 50px rgba(0,0,0,.24);--vc-shadow-soft:0 12px 34px rgba(0,0,0,.16);
  --vc-r1:10px;--vc-r2:14px;--vc-r3:18px;--vc-r4:24px;--vc-tap:44px;
}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease,transform .16s ease,opacity .16s ease}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(27,200,206,.28);outline-offset:2px}

body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;background:radial-gradient(900px 520px at 88% -12%,rgba(27,200,206,.14),transparent 55%),linear-gradient(180deg,#071821,#06131b)!important;color:#eef9fa!important}
header,.topbar,.page-header,.site-header{border-bottom:1px solid var(--vc-line)!important;background:rgba(4,17,25,.9)!important;backdrop-filter:blur(18px)!important}
button,.btn,input,select,textarea{min-height:44px;border-radius:11px!important}
button,.btn{font-weight:800!important}
.card,.panel,.match-card,.admin-card,.member-card,.setup-card{border:1px solid var(--vc-line)!important;border-radius:18px!important;box-shadow:var(--vc-shadow-soft)!important}
input,select,textarea{border:1px solid #bdd6db!important;background:#f7fcfd!important;color:#071c2b!important}
a{color:var(--vc-cyan-hi)}