/* =========================================================
   GOALBALL CENTRAL
   MAIN WEBSITE STYLES
   ========================================================= */


/* =========================================================
   GLOBAL
   ========================================================= */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


html,
body {
  margin: 0;
  padding: 0;
}


body {
  background: #050505;
  color: #ffffff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}


a {
  -webkit-tap-highlight-color: transparent;
}



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

.site-header {
  position: relative;

  background: #050505;

  border-top: 3px solid #00aaff;
  border-bottom: 1px solid #222;
}


.brand {
  text-align: center;

  padding:
    24px
    20px
    18px;

  background:
    radial-gradient(
      circle at center,
      rgba(0, 170, 255, 0.18),
      #050505 65%
    );
}


.brand h1 {
  margin: 0;

  color: #ffffff;

  font-size:
    clamp(
      30px,
      5vw,
      54px
    );

  font-weight: 900;

  letter-spacing: 4px;
}


.brand-line {
  width: 220px;
  max-width: 70%;

  height: 3px;

  margin:
    12px
    auto
    8px;

  background: #00aaff;

  border-radius: 10px;
}


.brand p {
  margin: 0;

  color: #d8d8d8;

  font-size: 18px;

  font-style: italic;
}



/* =========================================================
   DESKTOP NAV
   ========================================================= */

.desktop-nav {
  display: flex;

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

  background: #0c0c0c;

  border-top: 1px solid #222;
}


.desktop-nav a {
  padding:
    15px
    22px;

  color: #ffffff;

  border-right: 1px solid #222;

  text-decoration: none;

  text-transform: uppercase;

  font-size: 14px;

  font-weight: 800;
}


.desktop-nav a:first-child {
  border-left: 1px solid #222;
}


.desktop-nav a:hover {
  background: #00aaff;

  color: #000000;
}



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

.mobile-menu-button {
  display: none;
}


.mobile-nav {
  display: none;
}



/* =========================================================
   TOURNAMENT DASHBOARD
   ========================================================= */

.tournament-dashboard {
  display: grid;

  grid-template-columns:
    145px
    1.2fr
    1fr
    1.25fr
    1.4fr;

  width: 100%;

  background: #050505;

  border-bottom: 1px solid #222;
}


.status-badge {
  display: flex;

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

  padding:
    18px
    10px;

  text-align: center;

  font-size: 22px;

  font-weight: 900;
}


.status-badge.final {
  background: #2e7d32;

  color: #ffffff;
}


.status-badge.live {
  background: #d50000;

  color: #ffffff;
}


.status-badge.next {
  background: #00aaff;

  color: #000000;
}


.status-badge.update {
  background: #6a1b9a;

  color: #ffffff;
}


.dashboard-card {
  display: flex;

  flex-direction: column;

  justify-content: center;

  min-width: 0;

  min-height: 88px;

  padding:
    14px
    16px;

  border-right: 1px solid #333;
}


.dashboard-card:last-child {
  border-right: none;
}


.label {
  margin-bottom: 5px;

  color: #00aaff;

  font-size: 11px;

  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: 1px;
}


.dashboard-card strong {
  font-size: 16px;

  overflow-wrap: anywhere;
}


.subtext {
  margin-top: 5px;

  color: #cccccc;

  font-size: 13px;

  overflow-wrap: anywhere;
}



/* =========================================================
   TICKER
   ========================================================= */

.ticker {
  display: flex;

  align-items: center;

  min-height: 44px;

  overflow: hidden;

  border-bottom: 1px solid #222;
}


.ticker > strong {
  padding:
    14px
    18px;

  background: #111111;

  color: #00aaff;

  font-size: 13px;
}


.ticker-window {
  flex: 1;

  min-width: 0;

  overflow: hidden;

  white-space: nowrap;
}


.ticker-content {
  display: inline-block;

  min-width: 100%;

  padding-left: 100%;

  font-size: 14px;

  font-weight: 700;

  animation:
    tickerScroll
    45s
    linear
    infinite;
}


@keyframes tickerScroll {

  from {
    transform:
      translateX(0);
  }

  to {
    transform:
      translateX(-100%);
  }

}



/* =========================================================
   HOME SECTIONS
   ========================================================= */

.home-section {
  width: 100%;

  padding:
    58px
    24px;

  border-bottom: 1px solid #222;
}


.section-dark {
  background: #080808;
}


.section-heading {
  max-width: 1200px;

  margin:
    0
    auto
    30px;

  text-align: center;
}


.section-heading h2 {
  margin:
    0
    0
    8px;

  color: #ffffff;

  font-size:
    clamp(
      32px,
      5vw,
      52px
    );

  font-weight: 900;

  letter-spacing: 2px;

  text-transform: uppercase;
}


.section-subtitle {
  color: #00aaff;

  font-size: 18px;

  font-weight: 800;
}


.section-footer {
  margin-top: 28px;

  text-align: center;
}


.primary-button {
  display: inline-block;

  padding:
    13px
    22px;

  background: #00aaff;

  color: #000000;

  border-radius: 6px;

  text-decoration: none;

  font-size: 14px;

  font-weight: 900;

  text-transform: uppercase;
}


.primary-button:hover {
  background: #ffffff;
}



/* =========================================================
   UPCOMING GAMES
   ========================================================= */

.games-list {
  width: min(
    1000px,
    100%
  );

  margin:
    0
    auto;

  border:
    1px solid
    #292929;

  border-radius: 8px;

  overflow: hidden;

  background: #0b0b0b;
}


.game-row {
  display: grid;

  grid-template-columns:
    100px
    95px
    55px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 12px;

  min-height: 62px;

  padding:
    12px
    16px;

  border-bottom:
    1px solid
    #292929;
}


.game-row:last-child {
  border-bottom: none;
}


.game-row.live {
  background: #141414;

  border-left:
    6px solid
    #00ff88;
}


.game-row.up-next {
  background: #101010;

  border-left:
    6px solid
    #ffaa00;
}


.game-time {
  color: #dddddd;

  font-size: 16px;

  font-weight: 900;
}


.game-gym {
  color: #00aaff;

  font-size: 14px;

  font-weight: 900;
}


.game-division {
  color: #888888;

  font-size: 13px;

  font-weight: 900;
}


.game-match {
  color: #ffffff;

  font-size: 16px;

  font-weight: 800;
}


.game-status {
  min-width: 75px;

  text-align: right;

  font-size: 12px;

  font-weight: 900;

  letter-spacing: 0.5px;
}


.game-row.live .game-status {
  color: #00ff88;
}


.game-row.up-next .game-status {
  color: #ffaa00;
}



/* =========================================================
   LATEST RESULTS
   ========================================================= */

.results-grid {
  display: grid;

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

  gap: 18px;

  width: min(
    1200px,
    100%
  );

  margin:
    0
    auto;
}


.result-card {
  padding: 20px;

  background: #111111;

  border:
    1px solid
    #333333;

  border-radius: 8px;
}


.result-event {
  margin-bottom: 8px;

  color: #00aaff;

  font-size: 20px;

  font-weight: 900;

  text-transform: uppercase;
}


.result-meta {
  margin-bottom: 14px;

  color: #aaaaaa;

  font-size: 13px;
}


.result-match {
  margin-bottom: 12px;

  color: #ffffff;

  font-size: 18px;

  font-weight: 800;

  line-height: 1.35;
}


.result-score {
  color: #ffffff;

  font-size: 26px;

  font-weight: 900;
}



/* =========================================================
   LOADING / EMPTY STATES
   ========================================================= */

.home-loading,
.home-empty {
  padding:
    34px
    20px;

  color: #888888;

  text-align: center;

  font-size: 16px;

  font-weight: 800;

  letter-spacing: 1px;

  text-transform: uppercase;
}



/* =========================================================
   TEXT CONTENT
   ========================================================= */

.content-section {
  width: min(
    1000px,
    calc(100% - 40px)
  );

  margin:
    0
    auto;

  padding:
    70px
    0;
}


.content-section h2 {
  margin:
    0
    0
    30px;

  color: #ffffff;

  text-align: center;

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


.content-section p {
  max-width: 900px;

  margin:
    0
    auto
    20px;

  color: #dddddd;

  font-size: 17px;

  line-height: 1.7;
}


.alt-section {
  border-top: 1px solid #222;
}



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

footer {
  display: flex;

  flex-direction: column;

  gap: 5px;

  padding:
    30px
    20px;

  border-top:
    1px solid
    #222;

  color: #777777;

  text-align: center;

  font-size: 13px;
}


footer strong {
  color: #aaaaaa;
}



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

@media (max-width: 950px) {

  .desktop-nav a {
    padding:
      13px
      10px;

    font-size: 11px;
  }


  .tournament-dashboard {
    grid-template-columns:
      100px
      1fr
      1fr
      1fr
      1fr;
  }


  .dashboard-card {
    padding:
      12px
      10px;
  }


  .dashboard-card strong {
    font-size: 14px;
  }


  .subtext {
    font-size: 11px;
  }


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

}

.game-meta {
  display: none;
}

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

@media (max-width: 650px) {


  /* BRAND */

  .brand {
    padding:
      18px
      55px
      14px;
  }


  .brand h1 {
    white-space: nowrap;

    font-size: 22px;

    letter-spacing: 1.3px;
  }


  .brand-line {
    width: 105px;

    margin:
      8px
      auto
      5px;
  }


  .brand p {
    font-size: 13px;
  }



  /* NAV */

  .desktop-nav {
    display: none;
  }


  .mobile-menu-button {
    display: block;

    position: absolute;

    top: 17px;
    right: 14px;

    width: 42px;
    height: 42px;

    background: #111111;

    color: #ffffff;

    border:
      1px solid
      #333;

    border-radius: 6px;

    font-size: 22px;

    cursor: pointer;
  }


  .mobile-nav {
    display: none;

    flex-direction: column;

    background: #0c0c0c;

    border-top:
      1px solid
      #222;
  }


  .mobile-nav.open {
    display: flex;
  }


  .mobile-nav a {
    padding:
      15px
      18px;

    color: #ffffff;

    border-bottom:
      1px solid
      #222;

    text-decoration: none;

    text-transform: uppercase;

    font-size: 13px;

    font-weight: 800;
  }



  /* DASHBOARD */

  .tournament-dashboard {
    display: grid;

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

    grid-template-areas:
      "status tournament"
      "latest latest"
      "next next";
  }


  .status-badge {
    grid-area: status;

    min-height: 58px;

    padding: 7px;

    font-size: 12px;
  }


  .tournament-card {
    grid-area: tournament;
  }


  .desktop-status {
    display: none;
  }


  .next-card {
    grid-area: next;
  }


  .latest-dashboard-card {
    grid-area: latest;
  }


  .dashboard-card {
    min-height: auto;

    padding:
      9px
      10px;

    border-right: none;

    border-bottom:
      1px solid
      #333;
  }


  .label {
    font-size: 8px;
  }


  .dashboard-card strong {
    font-size: 12px;
  }


  .subtext {
    font-size: 9px;
  }


  .ticker {
    display: none;
  }



  /* HOME SECTIONS */

  .home-section {
    padding:
      42px
      15px;
  }


  .section-heading {
    margin-bottom: 22px;
  }


  .section-heading h2 {
    font-size: 30px;
  }


  .section-subtitle {
    font-size: 15px;
  }



  /* UPCOMING GAMES */

  .games-list {
    border-radius: 6px;
  }


  .game-row {
    display: grid;

    grid-template-columns:
      1fr
      auto;

    grid-template-areas:
      "meta status"
      "match match";

    gap:
      5px
      10px;

    padding:
      12px;
  }


  .game-meta {
    grid-area: meta;

    display: flex;

    flex-wrap: wrap;

    gap:
      5px
      9px;

    align-items: center;
  }


  .game-time,
  .game-gym,
  .game-division {
    font-size: 12px;
  }


  .game-match {
    grid-area: match;

    font-size: 14px;

    line-height: 1.35;
  }


  .game-status {
    grid-area: status;

    min-width: auto;

    font-size: 10px;
  }



  /* RESULTS */

  .results-grid {
    grid-template-columns: 1fr;

    gap: 12px;
  }


  .result-card {
    padding: 16px;
  }


  .result-event {
    font-size: 17px;
  }


  .result-match {
    font-size: 16px;
  }


  .result-score {
    font-size: 23px;
  }



  /* CONTENT */

  .content-section {
    width:
      calc(
        100% - 30px
      );

    padding:
      48px
      0;
  }


  .content-section h2 {
    margin-bottom: 22px;

    font-size: 28px;
  }


  .content-section p {
    font-size: 15px;

    line-height: 1.65;
  }

}



/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 350px) {

  .brand h1 {
    font-size: 19px;
  }


  .mobile-menu-button {
    width: 38px;
    height: 38px;

    font-size: 20px;
  }

}

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

.livestream-hero {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
  padding: 60px 0 25px;
  text-align: center;
}

.livestream-hero h2 {
  margin: 0 0 10px;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.livestream-hero p {
  margin: 0;
  color: #bbbbbb;
  font-size: 17px;
}


/* =========================================================
   TOURNAMENT SELECTOR
   ========================================================= */

.stream-search-section {
  width: min(900px, calc(100% - 40px));
  margin: 0 auto;
  padding: 10px 0 45px;
}

.stream-search-card {
  padding: 20px;
  background: #111111;
  border: 1px solid #333333;
  border-radius: 10px;
}

.stream-search-label {
  margin-bottom: 10px;
  color: #00aaff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.stream-select {
  width: 100%;
  padding: 13px 14px;
  background: #050505;
  color: #ffffff;
  border: 1px solid #444444;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.stream-select:focus {
  outline: 2px solid #00aaff;
  outline-offset: 2px;
}


/* =========================================================
   SELECTED TOURNAMENT
   ========================================================= */

.stream-content {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
  padding-bottom: 70px;
}

.stream-heading {
  text-align: center;
  margin-bottom: 28px;
}

.stream-heading h2 {
  margin: 0 0 8px;
  color: #00aaff;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.stream-heading p {
  margin: 0;
  color: #bbbbbb;
  font-size: 15px;
  font-weight: 700;
}


/* =========================================================
   DAY BLOCKS
   ========================================================= */

.stream-day {
  margin-bottom: 22px;
  overflow: hidden;
  background: #0d0d0d;
  border: 1px solid #333333;
  border-radius: 10px;
}

.stream-day-header {
  padding: 14px 18px;
  background: #111111;
  border-bottom: 1px solid #333333;
}

.stream-day-header h3 {
  margin: 0;
  color: #00aaff;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}


/* =========================================================
   GYM GRID
   ========================================================= */

.stream-gym-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  padding: 18px;
}

.stream-gym-card {
  background: #151515;
  border: 1px solid #303030;
  border-radius: 8px;
  padding: 18px;
}

.stream-gym-title {
  margin-bottom: 14px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
}


/* =========================================================
   STREAM LINKS
   ========================================================= */

.stream-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stream-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.stream-watch-button {
  display: inline-block;
  padding: 10px 14px;
  background: #00aaff;
  color: #000000;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 900;
}

.stream-watch-button:hover {
  background: #ffffff;
  color: #000000;
}


/* =========================================================
   STREAM STATUS
   ========================================================= */

.stream-status {
  display: inline-block;
  padding: 4px 8px;
  color: #bbbbbb;
  border: 1px solid #444444;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.stream-status.live {
  color: #00ff88;
  border-color: #00ff88;
}

.stream-status.upcoming {
  color: #ffaa00;
  border-color: #ffaa00;
}

.stream-status.complete {
  color: #999999;
  border-color: #555555;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.stream-empty {
  padding: 45px 20px;
  color: #888888;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}


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

@media (max-width: 650px) {

  .livestream-hero {
    width: calc(100% - 30px);
    padding: 40px 0 22px;
  }

  .livestream-hero h2 {
    font-size: 32px;
  }

  .livestream-hero p {
    font-size: 14px;
  }

  .stream-search-section {
    width: calc(100% - 30px);
    padding-bottom: 32px;
  }

  .stream-search-card {
    padding: 15px;
  }

  .stream-select {
    font-size: 14px;
  }

  .stream-content {
    width: calc(100% - 30px);
    padding-bottom: 50px;
  }

  .stream-heading h2 {
    font-size: 26px;
  }

  .stream-heading p {
    font-size: 13px;
  }

  .stream-day-header {
    padding: 12px 14px;
  }

  .stream-day-header h3 {
    font-size: 19px;
  }

  .stream-gym-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }

  .stream-gym-card {
    padding: 14px;
  }

  .stream-gym-title {
    font-size: 17px;
  }

  .stream-item {
    flex-direction: column;
    align-items: stretch;
  }

  .stream-watch-button {
    width: 100%;
    text-align: center;
  }

  .stream-status {
    align-self: center;
  }
}

/* =========================================================
   TOURNAMENT INFORMATION LANDING PAGE
   ========================================================= */

.tournament-info-hero {
  width: min(1100px, calc(100% - 40px));

  margin: 0 auto;

  padding:
    70px
    0
    35px;

  text-align: center;
}


.tournament-info-hero h2 {
  margin:
    0
    0
    12px;

  font-size:
    clamp(
      38px,
      6vw,
      62px
    );

  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: 2px;
}


.tournament-info-hero p {
  max-width: 700px;

  margin:
    0
    auto;

  color: #bbbbbb;

  font-size: 17px;

  line-height: 1.6;
}


/* =========================================================
   3-CARD GRID
   ========================================================= */

.tournament-info-grid {
  display: grid;

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

  gap: 20px;

  width: min(1200px, calc(100% - 40px));

  margin:
    0
    auto;

  padding-bottom: 80px;
}


.tournament-info-card {
  display: flex;

  flex-direction: column;

  min-height: 330px;

  padding: 28px;

  background: #111111;

  color: #ffffff;

  border:
    1px solid
    #333333;

  border-radius: 12px;

  text-decoration: none;

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


.tournament-info-card:hover {
  transform: translateY(-4px);

  border-color: #00aaff;

  background: #151515;
}


.tournament-info-card.featured {
  border-color: #00aaff;
}


.tournament-info-icon {
  margin-bottom: 18px;

  font-size: 38px;
}


.tournament-info-card h3 {
  margin:
    0
    0
    14px;

  color: #00aaff;

  font-size: 26px;

  font-weight: 900;

  line-height: 1.15;
}


.tournament-info-card p {
  flex: 1;

  margin:
    0
    0
    24px;

  color: #cccccc;

  font-size: 15px;

  line-height: 1.6;
}


.tournament-info-button {
  display: inline-block;

  align-self: flex-start;

  padding:
    11px
    15px;

  background: #00aaff;

  color: #000000;

  border-radius: 6px;

  font-size: 13px;

  font-weight: 900;

  text-transform: uppercase;
}


.tournament-info-card:hover
.tournament-info-button {
  background: #ffffff;
}


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

@media (max-width: 900px) {

  .tournament-info-grid {
    grid-template-columns: 1fr;
  }


  .tournament-info-card {
    min-height: auto;
  }

}


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

@media (max-width: 650px) {

  .tournament-info-hero {
    width: calc(100% - 30px);

    padding:
      45px
      0
      28px;
  }


  .tournament-info-hero h2 {
    font-size: 32px;
  }


  .tournament-info-hero p {
    font-size: 14px;
  }


  .tournament-info-grid {
    width: calc(100% - 30px);

    gap: 14px;

    padding-bottom: 50px;
  }


  .tournament-info-card {
    padding: 20px;
  }


  .tournament-info-icon {
    margin-bottom: 12px;

    font-size: 30px;
  }


  .tournament-info-card h3 {
    font-size: 22px;
  }


  .tournament-info-card p {
    font-size: 14px;
  }


  .tournament-info-button {
    width: 100%;

    text-align: center;
  }

}

/* =========================================================
   UPCOMING TOURNAMENTS PAGE
   ========================================================= */

.upcoming-hero {
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
  padding: 65px 0 32px;
  text-align: center;
}

.upcoming-hero h2 {
  margin: 0 0 10px;

  font-size:
    clamp(
      36px,
      6vw,
      60px
    );

  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.upcoming-hero p {
  margin: 0;
  color: #bbbbbb;
  font-size: 17px;
}


.upcoming-content {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
  padding-bottom: 80px;
}


.upcoming-tournament-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(280px, 1fr)
    );

  gap: 18px;
}


.upcoming-tournament-card {
  padding: 24px;

  background: #111111;

  border: 1px solid #333333;

  border-radius: 10px;
}


.upcoming-tournament-year {
  margin-bottom: 6px;

  color: #00aaff;

  font-size: 13px;

  font-weight: 900;

  letter-spacing: 1px;
}


.upcoming-tournament-card h3 {
  margin: 0 0 12px;

  color: #ffffff;

  font-size: 26px;

  font-weight: 900;
}


.upcoming-tournament-date {
  margin-bottom: 20px;

  color: #cccccc;

  font-size: 15px;

  line-height: 1.5;
}


.upcoming-empty {
  grid-column: 1 / -1;

  padding: 50px 20px;

  color: #888888;

  text-align: center;

  font-size: 16px;

  font-weight: 800;

  letter-spacing: 1px;

  text-transform: uppercase;
}


/* =========================================================
   UPCOMING TOURNAMENTS MOBILE
   ========================================================= */

@media (max-width: 650px) {

  .upcoming-hero {
    width: calc(100% - 30px);

    padding:
      42px
      0
      25px;
  }


  .upcoming-hero h2 {
    font-size: 30px;
  }


  .upcoming-hero p {
    font-size: 14px;
  }


  .upcoming-content {
    width: calc(100% - 30px);

    padding-bottom: 50px;
  }


  .upcoming-tournament-grid {
    grid-template-columns: 1fr;

    gap: 12px;
  }


  .upcoming-tournament-card {
    padding: 18px;
  }


  .upcoming-tournament-card h3 {
    font-size: 22px;
  }

}

/* =========================================================
   TOURNAMENT INFORMATION HUB
   ========================================================= */


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

.hub-page {
  min-height: 70vh;
}


.hub-hero {
  width: min(
    1100px,
    calc(100% - 40px)
  );

  margin: 0 auto;

  padding:
    65px
    0
    28px;

  text-align: center;
}


.hub-hero h2 {
  margin:
    0
    0
    12px;

  color: #ffffff;

  font-size:
    clamp(
      36px,
      6vw,
      60px
    );

  font-weight: 900;

  letter-spacing: 2px;

  text-transform: uppercase;
}


.hub-hero p {
  max-width: 760px;

  margin: 0 auto;

  color: #bbbbbb;

  font-size: 17px;

  line-height: 1.6;
}


/* =========================================================
   TOURNAMENT SELECTOR
   ========================================================= */

.hub-selector-section {
  width: min(
    850px,
    calc(100% - 40px)
  );

  margin:
    0
    auto;

  padding-bottom: 38px;
}


.hub-selector-card {
  padding: 20px;

  background: #111111;

  border:
    1px solid
    #333333;

  border-radius: 10px;
}


.hub-selector-label {
  display: block;

  margin-bottom: 9px;

  color: #00aaff;

  font-size: 13px;

  font-weight: 900;

  letter-spacing: 1px;

  text-transform: uppercase;
}


.hub-select {
  width: 100%;

  padding:
    13px
    14px;

  background: #050505;

  color: #ffffff;

  border:
    1px solid
    #444444;

  border-radius: 6px;

  font-size: 16px;

  font-weight: 800;

  cursor: pointer;
}


.hub-select:focus {
  outline:
    2px solid
    #00aaff;

  outline-offset: 2px;
}


/* =========================================================
   HUB CONTENT
   ========================================================= */

.hub-content {
  width: min(
    1250px,
    calc(100% - 40px)
  );

  margin:
    0
    auto;

  padding-bottom: 80px;
}


.hub-tournament-title {
  margin:
    0
    0
    28px;

  color: #00aaff;

  text-align: center;

  font-size:
    clamp(
      34px,
      5vw,
      56px
    );

  font-weight: 900;

  letter-spacing: 2px;

  text-transform: uppercase;

  text-shadow:
    0
    0
    12px
    rgba(
      0,
      170,
      255,
      0.25
    );
}


/* =========================================================
   MAIN TABS
   ========================================================= */

.main-tabs {
  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 25px;
}


.main-tab {
  appearance: none;

  padding:
    11px
    19px;

  background: #151515;

  color: #ffffff;

  border:
    1px solid
    #444444;

  border-radius: 6px;

  font-family: inherit;

  font-size: 14px;

  font-weight: 900;

  text-transform: uppercase;

  cursor: pointer;
}


.main-tab:hover {
  border-color: #00aaff;
}


.main-tab.active {
  background: #00aaff;

  color: #000000;

  border-color: #00aaff;
}


/* =========================================================
   DAY TABS
   ========================================================= */

.sub-tabs {
  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 9px;

  margin-bottom: 20px;
}


.sub-tab {
  appearance: none;

  padding:
    9px
    15px;

  background: #111111;

  color: #dddddd;

  border:
    1px solid
    #3b3b3b;

  border-radius: 999px;

  font-family: inherit;

  font-size: 13px;

  font-weight: 800;

  cursor: pointer;
}


.sub-tab:hover {
  border-color: #00aaff;

  color: #ffffff;
}


.sub-tab.active {
  background: #00aaff;

  color: #000000;

  border-color: #00aaff;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section {
  display: none;
}


.section.active {
  display: block;
}


/* =========================================================
   NOTICES
   ========================================================= */

.notice {
  padding:
    35px
    20px;

  color: #aaaaaa;

  text-align: center;

  font-size: 15px;

  font-weight: 700;
}


/* =========================================================
   TABLES
   ========================================================= */

.hub-table-wrap {
  width: 100%;

  overflow-x: auto;

  border:
    1px solid
    #333333;

  border-radius: 8px;

  background: #101010;
}


.hub-table {
  width: 100%;

  border-collapse: collapse;

  color: #ffffff;

  background: #101010;

  text-align: center;
}


.hub-table th {
  padding:
    12px
    10px;

  background: #191919;

  color: #00aaff;

  border-bottom:
    1px solid
    #444444;

  font-size: 12px;

  font-weight: 900;

  letter-spacing: 0.5px;

  text-transform: uppercase;

  white-space: nowrap;
}


.hub-table td {
  padding:
    12px
    10px;

  border-bottom:
    1px solid
    #292929;

  font-size: 14px;

  vertical-align: middle;
}


.hub-table tbody tr:last-child td {
  border-bottom: none;
}


.hub-table tbody tr:nth-child(even) {
  background: #141414;
}


.hub-table tbody tr:hover {
  background: #191919;
}


.hub-vs {
  color: #777777;

  font-weight: 900;
}


.hub-result {
  color: #ffffff;

  font-size: 16px;

  font-weight: 900;
}


.hub-team-cell {
  font-weight: 800;
}


/* =========================================================
   GYM BADGE
   ========================================================= */

.gym-badge {
  display: inline-block;

  padding:
    5px
    9px;

  background: #00aaff;

  color: #000000;

  border-radius: 5px;

  font-size: 11px;

  font-weight: 900;

  white-space: nowrap;
}


/* =========================================================
   POOLS
   ========================================================= */

.pool-block {
  margin-bottom: 32px;
}


.pool-title {
  margin:
    0
    0
    12px;

  color: #00aaff;

  font-size: 25px;

  font-weight: 900;

  text-transform: uppercase;
}


/* =========================================================
   FINAL STANDINGS
   ========================================================= */

.standings-wrap {
  display: grid;

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

  gap: 20px;

  width: min(
    900px,
    100%
  );

  margin:
    0
    auto;
}


.division-standings {
  overflow: hidden;

  background: #111111;

  border:
    1px solid
    #333333;

  border-radius: 10px;
}


.gc-section-title {
  padding:
    15px
    18px;

  background: #181818;

  color: #00aaff;

  border-bottom:
    1px solid
    #333333;

  font-size: 17px;

  font-weight: 900;

  letter-spacing: 1px;

  text-transform: uppercase;
}


.gc-list {
  list-style: none;

  margin: 0;

  padding: 0;
}


.gc-list li {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  min-height: 58px;

  padding:
    13px
    18px;

  border-bottom:
    1px solid
    #292929;
}


.gc-list li:last-child {
  border-bottom: none;
}


.gc-medal {
  font-size: 13px;

  font-weight: 900;

  letter-spacing: 0.5px;

  text-transform: uppercase;
}


.gc-medal.gold {
  color: #ffd54f;
}


.gc-medal.silver {
  color: #cfd8dc;
}


.gc-medal.bronze {
  color: #cd7f32;
}


.gc-team {
  color: #ffffff;

  text-align: right;

  font-size: 15px;

  font-weight: 800;
}


/* =========================================================
   HUB LIVESTREAMS
   ========================================================= */

.hub-stream-day {
  margin-bottom: 22px;

  overflow: hidden;

  background: #0d0d0d;

  border:
    1px solid
    #333333;

  border-radius: 10px;
}


.hub-stream-day-title {
  margin: 0;

  padding:
    14px
    18px;

  background: #151515;

  color: #00aaff;

  border-bottom:
    1px solid
    #333333;

  font-size: 22px;

  font-weight: 900;

  text-transform: uppercase;
}


.hub-stream-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        260px,
        1fr
      )
    );

  gap: 14px;

  padding: 16px;
}


.hub-stream-card {
  padding: 16px;

  background: #151515;

  border:
    1px solid
    #303030;

  border-radius: 8px;
}


.hub-stream-gym {
  margin-bottom: 12px;

  color: #ffffff;

  font-size: 18px;

  font-weight: 900;
}


.hub-stream-links {
  display: flex;

  flex-direction: column;

  gap: 9px;
}


.hub-stream-item {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;
}


.hub-stream-button {
  display: inline-block;

  padding:
    9px
    13px;

  background: #00aaff;

  color: #000000;

  border-radius: 6px;

  text-decoration: none;

  font-size: 13px;

  font-weight: 900;
}


.hub-stream-button:hover {
  background: #ffffff;
}


.hub-stream-status {
  color: #aaaaaa;

  font-size: 11px;

  font-weight: 800;
}


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

@media (max-width: 900px) {

  .standings-wrap {
    grid-template-columns: 1fr;
  }

}


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

@media (max-width: 650px) {

  .hub-hero {
    width:
      calc(
        100% - 30px
      );

    padding:
      42px
      0
      24px;
  }


  .hub-hero h2 {
    font-size: 29px;

    line-height: 1.1;
  }


  .hub-hero p {
    font-size: 14px;
  }


  .hub-selector-section {
    width:
      calc(
        100% - 30px
      );

    padding-bottom: 28px;
  }


  .hub-selector-card {
    padding: 15px;
  }


  .hub-select {
    font-size: 14px;
  }


  .hub-content {
    width:
      calc(
        100% - 30px
      );

    padding-bottom: 50px;
  }


  .hub-tournament-title {
    margin-bottom: 20px;

    font-size: 27px;

    line-height: 1.1;
  }


  /* MAIN TABS */

  .main-tabs {
    display: grid;

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

    gap: 7px;
  }


  .main-tab {
    width: 100%;

    padding:
      10px
      6px;

    font-size: 11px;
  }


  .main-tab:last-child {
    grid-column:
      1 / -1;
  }


  /* DAY TABS */

  .sub-tabs {
    justify-content: flex-start;

    overflow-x: auto;

    flex-wrap: nowrap;

    padding-bottom: 5px;
  }


  .sub-tab {
    flex: 0 0 auto;

    font-size: 11px;

    padding:
      8px
      12px;
  }


  /* =======================================================
     MOBILE GAME TABLE → CARDS
     ======================================================= */

  .hub-table-wrap {
    overflow: visible;

    border: none;

    background: transparent;
  }


  .game-table {
    display: block;

    background: transparent;
  }


  .game-table thead {
    display: none;
  }


  .game-table tbody {
    display: block;
  }


  .game-table tr {
    display: block;

    margin-bottom: 12px;

    padding: 11px;

    background: #111111;

    border:
      1px solid
      #333333;

    border-radius: 8px;
  }


  .game-table tbody tr:nth-child(even) {
    background: #111111;
  }


  .game-table td {
    display: grid;

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

    gap: 8px;

    align-items: center;

    padding:
      7px
      4px;

    border-bottom:
      1px solid
      #292929;

    text-align: left;

    font-size: 13px;
  }


  .game-table td:last-child {
    border-bottom: none;
  }


  .game-table td::before {
    content:
      attr(data-label);

    color: #00aaff;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.5px;

    text-transform: uppercase;
  }


  .game-table .hub-vs {
    display: none;
  }


  .game-table .hub-result {
    color: #ffffff;

    font-size: 15px;

    font-weight: 900;
  }


  /* =======================================================
     MOBILE POOL TABLE → CARDS
     ======================================================= */

  .pool-table {
    display: block;

    background: transparent;
  }


  .pool-table thead {
    display: none;
  }


  .pool-table tbody {
    display: block;
  }


  .pool-table tr {
    display: grid;

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

    gap: 8px;

    margin-bottom: 12px;

    padding: 12px;

    background: #111111;

    border:
      1px solid
      #333333;

    border-radius: 8px;
  }


  .pool-table tbody tr:nth-child(even) {
    background: #111111;
  }


  .pool-table td {
    display: flex;

    flex-direction: column;

    gap: 3px;

    padding: 4px;

    border: none;

    text-align: center;

    font-size: 12px;
  }


  .pool-table td::before {
    content:
      attr(data-label);

    color: #00aaff;

    font-size: 8px;

    font-weight: 900;

    text-transform: uppercase;
  }


  .pool-table .hub-team-cell {
    grid-column:
      1 / -1;

    padding-bottom: 10px;

    border-bottom:
      1px solid
      #292929;

    text-align: left;

    font-size: 15px;
  }


  .pool-table
  .hub-team-cell::before {
    display: none;
  }


  /* STANDINGS */

  .gc-list li {
    padding:
      12px
      14px;
  }


  .gc-team {
    font-size: 13px;
  }


  /* LIVESTREAM */

  .hub-stream-grid {
    grid-template-columns: 1fr;

    padding: 12px;
  }


  .hub-stream-item {
    flex-direction: column;

    align-items: stretch;
  }


  .hub-stream-button {
    width: 100%;

    text-align: center;
  }


  .hub-stream-status {
    text-align: center;
  }

}

/* =========================================================
   TOURNAMENT FINAL RESULTS PAGE
   ========================================================= */

.final-results-hero {
  width: min(
    1100px,
    calc(100% - 40px)
  );

  margin: 0 auto;

  padding:
    65px
    0
    30px;

  text-align: center;
}


.final-results-hero h2 {
  margin:
    0
    0
    10px;

  color: #ffffff;

  font-size:
    clamp(
      36px,
      6vw,
      60px
    );

  font-weight: 900;

  letter-spacing: 2px;

  text-transform: uppercase;
}


.final-results-hero p {
  max-width: 700px;

  margin: 0 auto;

  color: #bbbbbb;

  font-size: 17px;

  line-height: 1.6;
}


/* =========================================================
   SELECTOR
   ========================================================= */

.final-results-selector-section {
  width: min(
    850px,
    calc(100% - 40px)
  );

  margin: 0 auto;

  padding-bottom: 38px;
}


.final-results-selector-card {
  padding: 20px;

  background: #111111;

  border:
    1px solid
    #333333;

  border-radius: 10px;
}


.final-results-selector-label {
  display: block;

  margin-bottom: 9px;

  color: #00aaff;

  font-size: 13px;

  font-weight: 900;

  letter-spacing: 1px;

  text-transform: uppercase;
}


.final-results-select {
  width: 100%;

  padding:
    13px
    14px;

  background: #050505;

  color: #ffffff;

  border:
    1px solid
    #444444;

  border-radius: 6px;

  font-size: 16px;

  font-weight: 800;

  cursor: pointer;
}


.final-results-select:focus {
  outline:
    2px solid
    #00aaff;

  outline-offset: 2px;
}


/* =========================================================
   CONTENT
   ========================================================= */

.final-results-content {
  width: min(
    1000px,
    calc(100% - 40px)
  );

  margin: 0 auto;

  padding-bottom: 80px;
}


.final-results-title {
  margin:
    0
    0
    28px;

  color: #00aaff;

  text-align: center;

  font-size:
    clamp(
      32px,
      5vw,
      50px
    );

  font-weight: 900;

  letter-spacing: 2px;

  text-transform: uppercase;
}


/* =========================================================
   RESULTS GRID
   ========================================================= */

.final-results-grid {
  display: grid;

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

  gap: 20px;
}


.final-division-card {
  overflow: hidden;

  background: #111111;

  border:
    1px solid
    #333333;

  border-radius: 10px;
}


.final-division-title {
  padding:
    16px
    18px;

  background: #181818;

  color: #00aaff;

  border-bottom:
    1px solid
    #333333;

  font-size: 18px;

  font-weight: 900;

  letter-spacing: 1px;

  text-transform: uppercase;
}


.final-medal-list {
  list-style: none;

  margin: 0;

  padding: 0;
}


.final-medal-row {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 18px;

  min-height: 62px;

  padding:
    14px
    18px;

  border-bottom:
    1px solid
    #292929;
}


.final-medal-row:last-child {
  border-bottom: none;
}


.final-medal {
  font-size: 13px;

  font-weight: 900;

  letter-spacing: 0.5px;

  text-transform: uppercase;
}


.final-medal.gold {
  color: #ffd54f;
}


.final-medal.silver {
  color: #cfd8dc;
}


.final-medal.bronze {
  color: #cd7f32;
}


.final-team {
  color: #ffffff;

  text-align: right;

  font-size: 16px;

  font-weight: 800;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.final-results-empty {
  padding:
    50px
    20px;

  color: #888888;

  text-align: center;

  font-size: 16px;

  font-weight: 800;

  letter-spacing: 1px;

  text-transform: uppercase;
}


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

@media (max-width: 800px) {

  .final-results-grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 650px) {

  .final-results-hero {
    width:
      calc(
        100% - 30px
      );

    padding:
      42px
      0
      24px;
  }


  .final-results-hero h2 {
    font-size: 30px;

    line-height: 1.1;
  }


  .final-results-hero p {
    font-size: 14px;
  }


  .final-results-selector-section {
    width:
      calc(
        100% - 30px
      );

    padding-bottom: 28px;
  }


  .final-results-selector-card {
    padding: 15px;
  }


  .final-results-select {
    font-size: 14px;
  }


  .final-results-content {
    width:
      calc(
        100% - 30px
      );

    padding-bottom: 50px;
  }


  .final-results-title {
    margin-bottom: 20px;

    font-size: 26px;

    line-height: 1.1;
  }


  .final-division-title {
    font-size: 16px;

    padding:
      13px
      14px;
  }


  .final-medal-row {
    min-height: 56px;

    padding:
      12px
      14px;
  }


  .final-medal {
    font-size: 11px;
  }


  .final-team {
    font-size: 13px;
  }

}

/* =========================================================
   TEAM & PLAYER PROFILES PAGE
   ========================================================= */

.profiles-hero {
  width: min(
    1100px,
    calc(100% - 40px)
  );

  margin: 0 auto;

  padding:
    65px
    0
    28px;

  text-align: center;
}


.profiles-hero h2 {
  margin:
    0
    0
    10px;

  color: #ffffff;

  font-size:
    clamp(
      36px,
      6vw,
      60px
    );

  font-weight: 900;

  letter-spacing: 2px;

  text-transform: uppercase;
}


.profiles-hero p {
  max-width: 760px;

  margin: 0 auto;

  color: #bbbbbb;

  font-size: 17px;

  line-height: 1.6;
}


/* =========================================================
   MAIN PROFILE TABS
   ========================================================= */

.profiles-tab-section {
  width: min(
    700px,
    calc(100% - 40px)
  );

  margin: 0 auto;

  padding-bottom: 38px;
}


.profiles-main-tabs {
  display: grid;

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

  gap: 10px;
}


.profiles-main-tab {
  appearance: none;

  padding:
    13px
    18px;

  background: #141414;

  color: #ffffff;

  border:
    1px solid
    #444444;

  border-radius: 7px;

  font-family: inherit;

  font-size: 14px;

  font-weight: 900;

  letter-spacing: 0.5px;

  text-transform: uppercase;

  cursor: pointer;
}


.profiles-main-tab:hover {
  border-color: #00aaff;
}


.profiles-main-tab.active {
  background: #00aaff;

  color: #000000;

  border-color: #00aaff;
}


/* =========================================================
   PROFILE SECTIONS
   ========================================================= */

.profiles-section {
  display: none;

  width: min(
    1250px,
    calc(100% - 40px)
  );

  margin: 0 auto;

  padding-bottom: 80px;
}


.profiles-section.active {
  display: block;
}


.profiles-section-heading {
  margin-bottom: 28px;

  text-align: center;
}


.profiles-section-heading h3 {
  margin:
    0
    0
    7px;

  color: #00aaff;

  font-size:
    clamp(
      28px,
      4vw,
      44px
    );

  font-weight: 900;

  text-transform: uppercase;
}


.profiles-section-heading p {
  margin: 0;

  color: #aaaaaa;

  font-size: 15px;
}


/* =========================================================
   SHARED CONTROLS
   ========================================================= */

.team-profile-controls,
.player-profile-controls {
  display: grid;

  grid-template-columns:
    minmax(220px, 1fr)
    repeat(
      3,
      minmax(150px, 190px)
    );

  gap: 12px;

  margin-bottom: 20px;
}


.profile-control label {
  display: block;

  margin-bottom: 6px;

  color: #aaaaaa;

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 0.6px;

  text-transform: uppercase;
}


.profile-control input,
.profile-control select {
  width: 100%;

  min-height: 44px;

  padding:
    10px
    12px;

  background: #111111;

  color: #ffffff;

  border:
    1px solid
    #3b3b3b;

  border-radius: 7px;

  font-size: 14px;
}


.profile-control input:focus,
.profile-control select:focus {
  outline:
    2px solid
    #00aaff;

  outline-offset: 1px;
}


/* =========================================================
   STATUS
   ========================================================= */

.profiles-status {
  padding:
    35px
    20px;

  background: #111111;

  color: #aaaaaa;

  border:
    1px solid
    #333333;

  border-radius: 8px;

  text-align: center;
}


.profiles-error {
  color: #ff8585;
}


/* =========================================================
   TEAM SUMMARY
   ========================================================= */

.team-summary-grid {
  display: grid;

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

  gap: 12px;

  margin-bottom: 20px;
}


.team-summary-card {
  padding: 15px;

  background: #111111;

  border:
    1px solid
    #333333;

  border-radius: 8px;
}


.team-summary-label {
  display: block;

  color: #aaaaaa;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 0.5px;

  text-transform: uppercase;
}


.team-summary-value {
  display: block;

  margin-top: 5px;

  color: #ffffff;

  font-size: 25px;

  font-weight: 900;
}


/* =========================================================
   SUBHEADINGS
   ========================================================= */

.profiles-subheading {
  margin:
    34px
    0
    14px;

  color: #ffffff;

  font-size: 22px;

  font-weight: 900;

  text-transform: uppercase;
}


/* =========================================================
   TEAM PROFILE CARDS
   ========================================================= */

.team-profile-grid {
  display: grid;

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

  gap: 14px;
}


.team-profile-card {
  min-width: 0;

  overflow: hidden;

  background: #111111;

  border:
    1px solid
    #333333;

  border-radius: 10px;
}


.team-profile-card-header {
  padding: 15px;

  background: #181818;

  border-bottom:
    1px solid
    #333333;
}


.team-profile-name {
  margin: 0;

  color: #ffffff;

  font-size: 19px;

  font-weight: 900;

  overflow-wrap: anywhere;
}


.team-profile-meta {
  margin-top: 5px;

  color: #aaaaaa;

  font-size: 12px;
}


.team-profile-record {
  margin-top: 9px;

  color: #00aaff;

  font-size: 27px;

  font-weight: 900;
}


.team-profile-stat-grid {
  display: grid;

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

  gap: 1px;

  background: #333333;
}


.team-profile-stat {
  padding:
    11px
    6px;

  background: #111111;

  text-align: center;
}


.team-profile-stat strong {
  display: block;

  font-size: 17px;

  font-weight: 900;
}


.team-profile-stat span {
  display: block;

  margin-top: 3px;

  color: #999999;

  font-size: 9px;

  font-weight: 900;

  text-transform: uppercase;
}


.team-positive {
  color: #77d18b;
}


.team-negative {
  color: #ff8585;
}


.team-profile-details {
  padding:
    5px
    14px
    12px;
}


.team-profile-detail {
  padding:
    10px
    0;

  border-bottom:
    1px solid
    #292929;
}


.team-profile-detail:last-child {
  border-bottom: none;
}


.team-profile-detail span {
  display: block;

  margin-bottom: 3px;

  color: #999999;

  font-size: 9px;

  font-weight: 900;

  text-transform: uppercase;
}


.team-profile-detail strong {
  color: #ffffff;

  font-size: 13px;

  overflow-wrap: anywhere;
}


/* =========================================================
   TEAM TABLE
   ========================================================= */

.team-stats-table-wrap {
  width: 100%;

  overflow-x: auto;

  border:
    1px solid
    #333333;

  border-radius: 8px;
}


.team-stats-table {
  width: 100%;

  min-width: 1050px;

  border-collapse: collapse;

  background: #111111;
}


.team-stats-table th,
.team-stats-table td {
  padding:
    11px
    9px;

  border-bottom:
    1px solid
    #292929;

  text-align: center;

  white-space: nowrap;

  font-size: 13px;
}


.team-stats-table th {
  background: #181818;

  color: #aaaaaa;

  font-size: 10px;

  text-transform: uppercase;
}


.team-stats-table th:first-child,
.team-stats-table td:first-child {
  position: sticky;

  left: 0;

  background: #111111;

  text-align: left;
}


.team-stats-table th:first-child {
  background: #181818;
}


.team-stats-updated {
  margin-top: 14px;

  color: #777777;

  text-align: center;

  font-size: 11px;
}


/* =========================================================
   PLAYER PROFILE GRID
   ========================================================= */

.player-profile-grid {
  display: grid;

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

  gap: 16px;
}


.player-profile-card {
  overflow: hidden;

  background: #111111;

  border:
    1px solid
    #333333;

  border-radius: 10px;
}


.player-profile-card h4 {
  margin: 0;

  padding:
    14px
    16px;

  background: #181818;

  color: #00aaff;

  border-bottom:
    1px solid
    #333333;

  text-align: center;

  font-size: 18px;

  font-weight: 900;

  text-transform: uppercase;
}


.player-stat-row {
  display: flex;

  justify-content: space-between;

  gap: 16px;

  padding:
    11px
    14px;

  border-bottom:
    1px solid
    #292929;
}


.player-stat-row:last-child {
  border-bottom: none;
}


.player-stat-row strong {
  color: #aaaaaa;

  font-size: 13px;
}


.player-stat-row span {
  color: #ffffff;

  text-align: right;

  font-size: 13px;

  font-weight: 700;
}


.years-card h4 {
  background: #00aaff;

  color: #000000;
}


.years-played-value {
  padding:
    35px
    20px;

  color: #ffffff;

  text-align: center;

  font-size: 34px;

  font-weight: 900;
}


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

@media (max-width: 1000px) {

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


  .team-profile-controls,
  .player-profile-controls {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


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

@media (max-width: 650px) {

  .profiles-hero {
    width:
      calc(
        100% - 30px
      );

    padding:
      42px
      0
      24px;
  }


  .profiles-hero h2 {
    font-size: 29px;

    line-height: 1.1;
  }


  .profiles-hero p {
    font-size: 14px;
  }


  .profiles-tab-section {
    width:
      calc(
        100% - 30px
      );

    padding-bottom: 28px;
  }


  .profiles-main-tab {
    padding:
      11px
      8px;

    font-size: 11px;
  }


  .profiles-section {
    width:
      calc(
        100% - 30px
      );

    padding-bottom: 50px;
  }


  .team-profile-controls,
  .player-profile-controls {
    grid-template-columns: 1fr;
  }


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


  .team-profile-grid {
    grid-template-columns: 1fr;
  }


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


  .player-profile-grid {
    grid-template-columns: 1fr;
  }


  .profiles-subheading {
    font-size: 18px;
  }


  .player-stat-row strong,
  .player-stat-row span {
    font-size: 12px;
  }

}

/* =========================================================
   TEAM RATING INDEX PAGE
   ========================================================= */

.ratings-hero {
  width: min(
    1100px,
    calc(100% - 40px)
  );

  margin: 0 auto;

  padding:
    65px
    0
    28px;

  text-align: center;
}


.ratings-hero h2 {
  margin:
    0
    0
    10px;

  color: #ffffff;

  font-size:
    clamp(
      36px,
      6vw,
      60px
    );

  font-weight: 900;

  letter-spacing: 2px;

  text-transform: uppercase;
}


.ratings-hero p {
  margin: 0;

  color: #bbbbbb;

  font-size: 17px;
}


/* =========================================================
   RATINGS EMBED
   ========================================================= */

.ratings-frame-section {
  width: min(
    1250px,
    calc(100% - 40px)
  );

  margin: 0 auto;

  padding-bottom: 55px;
}


.ratings-frame-wrap {
  width: 100%;

  overflow: hidden;

  background: #111111;

  border:
    1px solid
    #333333;

  border-radius: 10px;
}


.ratings-frame {
  display: block;

  width: 100%;

  height: 850px;

  border: 0;

  background: #000000;
}


/* =========================================================
   TEAM RATING INDEX EXPLANATION
   ========================================================= */

.ratings-info {
  width: min(1150px, calc(100% - 40px));
  margin: 0 auto;
  padding-bottom: 80px;
}


.ratings-info-heading {
  max-width: 800px;
  margin: 0 auto 35px;
  text-align: center;
}


.ratings-info-heading h3 {
  margin: 0 0 12px;

  color: #ffffff;

  font-size: clamp(30px, 5vw, 46px);

  font-weight: 900;

  letter-spacing: 1px;

  text-transform: uppercase;
}


.ratings-info-heading p {
  margin: 0;

  color: #aaaaaa;

  font-size: 16px;

  line-height: 1.7;
}


/* EXPLANATION CARDS */

.ratings-explanation-grid {
  display: grid;

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

  gap: 16px;
}


.ratings-explanation-card {
  position: relative;

  padding: 24px;

  background: #111111;

  border: 1px solid #333333;

  border-radius: 10px;

  overflow: hidden;
}


.ratings-step {
  margin-bottom: 12px;

  color: #00aaff;

  font-size: 12px;

  font-weight: 900;

  letter-spacing: 2px;
}


.ratings-explanation-card h4 {
  margin: 0 0 13px;

  color: #ffffff;

  font-size: 20px;

  font-weight: 900;

  text-transform: uppercase;
}


.ratings-explanation-card p {
  margin: 10px 0;

  color: #bbbbbb;

  font-size: 14px;

  line-height: 1.65;
}


/* MATCH POINTS */

.ratings-points {
  display: grid;

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

  gap: 8px;

  margin: 20px 0;
}


.ratings-points div {
  padding: 15px 8px;

  background: #080808;

  border: 1px solid #292929;

  border-radius: 7px;

  text-align: center;
}


.ratings-points strong {
  display: block;

  color: #00aaff;

  font-size: 28px;

  font-weight: 900;
}


.ratings-points span {
  display: block;

  margin-top: 3px;

  color: #aaaaaa;

  font-size: 11px;

  font-weight: 900;

  text-transform: uppercase;
}


/* FORMULAS */

.ratings-formula {
  margin: 20px 0;

  padding: 20px;

  background: #050505;

  border-left: 4px solid #00aaff;

  border-radius: 6px;
}


.ratings-formula span {
  display: block;

  margin-bottom: 8px;

  color: #00aaff;

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 1px;

  text-transform: uppercase;
}


.ratings-formula strong {
  display: block;

  color: #ffffff;

  font-size: 18px;

  line-height: 1.5;
}


.ratings-mini-formula {
  margin-top: 15px;

  padding: 12px;

  background: #080808;

  color: #dddddd;

  border: 1px solid #292929;

  border-radius: 6px;

  text-align: center;

  font-size: 13px;

  font-weight: 800;
}


/* PLACEMENT BONUSES */

.ratings-bonus-columns {
  display: grid;

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

  gap: 10px;

  margin-top: 20px;
}


.ratings-bonus-group {
  overflow: hidden;

  background: #080808;

  border: 1px solid #292929;

  border-radius: 7px;
}


.ratings-bonus-group h5 {
  margin: 0;

  padding: 11px;

  background: #181818;

  color: #00aaff;

  text-align: center;

  font-size: 13px;

  font-weight: 900;

  text-transform: uppercase;
}


.ratings-bonus-group.nationals h5 {
  color: #ffffff;
}


.ratings-bonus-row {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 10px;

  padding: 11px 12px;

  border-top: 1px solid #222222;
}


.ratings-bonus-row span {
  color: #cccccc;

  font-size: 12px;
}


.ratings-bonus-row strong {
  color: #ffffff;

  font-size: 15px;
}


/* EXAMPLE */

.ratings-example {
  margin-top: 35px;

  padding: 28px;

  background: #111111;

  border: 1px solid #00aaff;

  border-radius: 10px;
}


.ratings-example-label {
  margin-bottom: 7px;

  color: #00aaff;

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 2px;

  text-transform: uppercase;
}


.ratings-example h4 {
  margin: 0 0 10px;

  color: #ffffff;

  font-size: 24px;

  font-weight: 900;

  text-transform: uppercase;
}


.ratings-example > p {
  color: #aaaaaa;

  line-height: 1.6;
}


.ratings-example-steps {
  display: grid;

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

  gap: 8px;

  margin-top: 22px;
}


.ratings-example-steps div {
  padding: 14px 10px;

  background: #050505;

  border: 1px solid #292929;

  border-radius: 6px;

  text-align: center;
}


.ratings-example-steps span {
  display: block;

  min-height: 30px;

  color: #888888;

  font-size: 10px;

  font-weight: 900;

  text-transform: uppercase;
}


.ratings-example-steps strong {
  display: block;

  margin-top: 8px;

  color: #ffffff;

  font-size: 14px;
}


.ratings-example-final {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-top: 12px;

  padding: 17px 20px;

  background: #00aaff;

  color: #000000;

  border-radius: 6px;

  font-weight: 900;
}


.ratings-example-final span {
  text-transform: uppercase;
}


.ratings-example-final strong {
  font-size: 27px;
}


/* NOTE */

.ratings-note {
  margin-top: 25px;

  padding: 22px;

  background: #0a0a0a;

  border-left: 4px solid #00aaff;
}


.ratings-note strong {
  color: #ffffff;

  font-size: 16px;

  text-transform: uppercase;
}


.ratings-note p {
  margin: 8px 0 0;

  color: #aaaaaa;

  font-size: 14px;

  line-height: 1.7;
}


/* =========================================================
   TEAM RATING EXPLANATION - MOBILE
   ========================================================= */

@media (max-width: 750px) {

  .ratings-explanation-grid {
    grid-template-columns: 1fr;
  }


  .ratings-bonus-columns {
    grid-template-columns: 1fr;
  }


  .ratings-example-steps {
    grid-template-columns: 1fr;
  }


  .ratings-example-steps span {
    min-height: 0;
  }

}


@media (max-width: 650px) {

  .ratings-info {
    width: calc(100% - 30px);

    padding-bottom: 50px;
  }


  .ratings-info-heading h3 {
    font-size: 27px;
  }


  .ratings-info-heading p {
    font-size: 14px;
  }


  .ratings-explanation-card {
    padding: 18px;
  }


  .ratings-explanation-card h4 {
    font-size: 17px;
  }


  .ratings-points strong {
    font-size: 23px;
  }


  .ratings-formula strong {
    font-size: 15px;
  }


  .ratings-example {
    padding: 18px;
  }


  .ratings-example h4 {
    font-size: 19px;
  }

}


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

@media (max-width: 650px) {

  .ratings-hero {
    width:
      calc(
        100% - 30px
      );

    padding:
      42px
      0
      24px;
  }


  .ratings-hero h2 {
    font-size: 30px;
  }


  .ratings-hero p {
    font-size: 14px;
  }


  .ratings-frame-section {
    width:
      calc(
        100% - 30px
      );

    padding-bottom: 40px;
  }


  .ratings-frame {
    height: 900px;
  }


  .ratings-info {
    width:
      calc(
        100% - 30px
      );

    padding-bottom: 50px;
  }


  .ratings-rule-grid {
    grid-template-columns: 1fr;
  }

}

/* =========================================================
   MOBILE APP PAGE
   ========================================================= */

.mobile-app-hero {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
  padding: 70px 0 55px;
}


.mobile-app-hero-content {
  display: grid;
  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(260px, 0.8fr);

  gap: 50px;
  align-items: center;
}


.mobile-app-eyebrow {
  display: inline-block;
  margin-bottom: 12px;

  color: #00aaff;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}


.mobile-app-copy h2 {
  margin: 0 0 18px;

  color: #ffffff;

  font-size: clamp(38px, 6vw, 64px);
  font-weight: 900;
  line-height: 1.05;
}


.mobile-app-copy p {
  max-width: 650px;

  margin: 0;

  color: #bbbbbb;

  font-size: 17px;
  line-height: 1.7;
}


.mobile-app-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  margin-top: 26px;
}


.app-store-button {
  display: inline-block;

  padding: 13px 20px;

  background: #00aaff;

  color: #000000;

  border-radius: 7px;

  text-decoration: none;

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


.app-store-button:hover {
  background: #ffffff;
}


.app-store-button.disabled {
  background: #222222;
  color: #777777;
  cursor: default;
}


.app-store-button.large {
  padding: 15px 24px;
  font-size: 16px;
}


/* =========================================================
   PHONE PREVIEW
   ========================================================= */

.mobile-app-preview {
  display: flex;
  justify-content: center;
}


.phone-shell {
  width: 250px;
  padding: 12px;

  background: #151515;

  border: 2px solid #333333;

  border-radius: 32px;

  box-shadow:
    0 0 35px
    rgba(0, 170, 255, 0.12);
}


.phone-screen {
  min-height: 470px;

  padding: 24px 14px;

  background: #050505;

  border-radius: 24px;
}


.phone-brand {
  margin-bottom: 24px;

  color: #ffffff;

  text-align: center;

  font-size: 18px;
  font-weight: 900;
}


.phone-card {
  margin-bottom: 12px;

  padding: 16px;

  background: #111111;

  color: #00aaff;

  border:
    1px solid
    #333333;

  border-radius: 9px;

  text-align: center;

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


/* =========================================================
   FEATURES
   ========================================================= */

.mobile-app-features {
  width: min(1150px, calc(100% - 40px));
  margin: 0 auto;
  padding: 25px 0 75px;
}


.mobile-app-section-heading {
  max-width: 700px;
  margin: 0 auto 30px;

  text-align: center;
}


.mobile-app-section-heading h3 {
  margin: 0 0 10px;

  color: #ffffff;

  font-size: clamp(30px, 5vw, 46px);

  font-weight: 900;

  text-transform: uppercase;
}


.mobile-app-section-heading p {
  margin: 0;

  color: #aaaaaa;

  font-size: 15px;
}


.mobile-app-feature-grid {
  display: grid;

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

  gap: 16px;
}


.mobile-app-feature-card {
  padding: 22px;

  background: #111111;

  border:
    1px solid
    #333333;

  border-radius: 10px;
}


.mobile-app-feature-card h4 {
  margin: 0 0 10px;

  color: #00aaff;

  font-size: 18px;

  font-weight: 900;
}


.mobile-app-feature-card p {
  margin: 0;

  color: #bbbbbb;

  font-size: 14px;

  line-height: 1.6;
}


/* =========================================================
   DOWNLOAD CTA
   ========================================================= */

.mobile-app-download {
  width: min(900px, calc(100% - 40px));
  margin: 0 auto;
  padding: 45px 30px 70px;

  text-align: center;
}


.mobile-app-download h3 {
  margin: 0 0 10px;

  color: #ffffff;

  font-size: 30px;

  font-weight: 900;

  text-transform: uppercase;
}


.mobile-app-download p {
  margin: 0 0 22px;

  color: #aaaaaa;

  font-size: 15px;
}


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

@media (max-width: 900px) {

  .mobile-app-hero-content {
    grid-template-columns: 1fr;
  }


  .mobile-app-copy {
    text-align: center;
  }


  .mobile-app-copy p {
    margin: 0 auto;
  }


  .mobile-app-buttons {
    justify-content: center;
  }


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

}


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

@media (max-width: 650px) {

  .mobile-app-hero {
    width: calc(100% - 30px);

    padding:
      42px
      0
      38px;
  }


  .mobile-app-copy h2 {
    font-size: 34px;
  }


  .mobile-app-copy p {
    font-size: 14px;
  }


  .mobile-app-buttons {
    flex-direction: column;
  }


  .app-store-button {
    width: 100%;

    text-align: center;
  }


  .phone-shell {
    width: 220px;
  }


  .phone-screen {
    min-height: 410px;
  }


  .mobile-app-features {
    width:
      calc(
        100% - 30px
      );

    padding-bottom: 50px;
  }


  .mobile-app-feature-grid {
    grid-template-columns: 1fr;
  }


  .mobile-app-download {
    width:
      calc(
        100% - 30px
      );

    padding:
      35px
      10px
      50px;
  }

}

/* =========================================================
   GOALBALL RESOURCES PAGE
   ========================================================= */

.resources-hero {
  width: min(
    1100px,
    calc(100% - 40px)
  );

  margin: 0 auto;

  padding:
    65px
    0
    30px;

  text-align: center;
}


.resources-hero h2 {
  margin:
    0
    0
    10px;

  color: #ffffff;

  font-size:
    clamp(
      36px,
      6vw,
      60px
    );

  font-weight: 900;

  letter-spacing: 2px;

  text-transform: uppercase;
}


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

  margin: 0 auto;

  color: #bbbbbb;

  font-size: 17px;

  line-height: 1.6;
}


.resources-content {
  width: min(
    1150px,
    calc(100% - 40px)
  );

  margin: 0 auto;

  padding-bottom: 80px;
}


.resources-grid {
  display: grid;

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

  gap: 16px;
}


.resource-card {
  display: flex;

  flex-direction: column;

  min-height: 230px;

  padding: 22px;

  background: #111111;

  border:
    1px solid
    #333333;

  border-radius: 10px;
}


.resource-card h3 {
  margin:
    0
    0
    10px;

  color: #00aaff;

  font-size: 20px;

  font-weight: 900;
}


.resource-card p {
  flex: 1;

  margin:
    0
    0
    18px;

  color: #bbbbbb;

  font-size: 14px;

  line-height: 1.6;
}


.resource-card a {
  display: inline-block;

  align-self: flex-start;

  padding:
    10px
    14px;

  background: #00aaff;

  color: #000000;

  border-radius: 6px;

  text-decoration: none;

  font-size: 13px;

  font-weight: 900;
}


.resource-card a:hover {
  background: #ffffff;
}


@media (max-width: 900px) {

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

}


@media (max-width: 650px) {

  .resources-hero {
    width:
      calc(
        100% - 30px
      );

    padding:
      42px
      0
      24px;
  }


  .resources-hero h2 {
    font-size: 30px;
  }


  .resources-hero p {
    font-size: 14px;
  }


  .resources-content {
    width:
      calc(
        100% - 30px
      );

    padding-bottom: 50px;
  }


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


  .resource-card {
    min-height: auto;
  }


  .resource-card a {
    width: 100%;

    text-align: center;
  }

}

/* =========================================================
   GOALBALL RULES PAGE
   ========================================================= */

.rules-hero {
  width: min(
    1100px,
    calc(100% - 40px)
  );

  margin: 0 auto;

  padding:
    65px
    0
    28px;

  text-align: center;
}


.rules-hero h2 {
  margin:
    0
    0
    10px;

  color: #ffffff;

  font-size:
    clamp(
      36px,
      6vw,
      60px
    );

  font-weight: 900;

  letter-spacing: 2px;

  text-transform: uppercase;
}


.rules-hero p {
  max-width: 700px;

  margin: 0 auto;

  color: #bbbbbb;

  font-size: 17px;

  line-height: 1.6;
}


/* =========================================================
   RULE TOOLS
   ========================================================= */

.rules-tools {
  width: min(
    1150px,
    calc(100% - 40px)
  );

  margin: 0 auto;

  padding-bottom: 30px;
}


.rules-search-wrap {
  margin-bottom: 20px;

  padding: 18px;

  background: #111111;

  border:
    1px solid
    #333333;

  border-radius: 9px;
}


.rules-search-wrap label {
  display: block;

  margin-bottom: 8px;

  color: #00aaff;

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 1px;

  text-transform: uppercase;
}


.rules-search-wrap input {
  width: 100%;

  padding:
    13px
    14px;

  background: #050505;

  color: #ffffff;

  border:
    1px solid
    #444444;

  border-radius: 6px;

  font-size: 15px;
}


.rules-search-wrap input:focus {
  outline:
    2px solid
    #00aaff;

  outline-offset: 1px;
}


/* =========================================================
   PART TABS
   ========================================================= */

.rules-part-tabs {
  display: grid;

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

  gap: 10px;

  margin-bottom: 14px;
}


.rules-part-tab {
  appearance: none;

  padding:
    13px
    16px;

  background: #151515;

  color: #ffffff;

  border:
    1px solid
    #444444;

  border-radius: 7px;

  font-family: inherit;

  font-size: 13px;

  font-weight: 900;

  text-transform: uppercase;

  cursor: pointer;
}


.rules-part-tab:hover {
  border-color: #00aaff;
}


.rules-part-tab.active {
  background: #00aaff;

  color: #000000;

  border-color: #00aaff;
}


/* =========================================================
   SECTION TABS
   ========================================================= */

.rules-section-tabs {
  display: flex;

  gap: 8px;

  overflow-x: auto;

  padding-bottom: 7px;
}


.rules-section-tab {
  flex: 0 0 auto;

  appearance: none;

  padding:
    9px
    13px;

  background: #111111;

  color: #cccccc;

  border:
    1px solid
    #3b3b3b;

  border-radius: 999px;

  font-family: inherit;

  font-size: 11px;

  font-weight: 800;

  cursor: pointer;
}


.rules-section-tab:hover {
  color: #ffffff;

  border-color: #00aaff;
}


.rules-section-tab.active {
  background: #00aaff;

  color: #000000;

  border-color: #00aaff;
}


/* =========================================================
   CONTENT
   ========================================================= */

.rules-content {
  width: min(
    1150px,
    calc(100% - 40px)
  );

  margin: 0 auto;

  padding-bottom: 80px;
}


.rules-status,
.rules-empty {
  padding:
    45px
    20px;

  background: #111111;

  color: #999999;

  border:
    1px solid
    #333333;

  border-radius: 9px;

  text-align: center;

  font-size: 15px;
}


.rules-section-heading {
  margin-bottom: 22px;

  text-align: center;
}


.rules-section-heading span {
  display: block;

  margin-bottom: 5px;

  color: #00aaff;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 1px;

  text-transform: uppercase;
}


.rules-section-heading h2 {
  margin:
    0
    0
    6px;

  color: #ffffff;

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

  font-weight: 900;

  text-transform: uppercase;
}


.rules-section-heading p {
  margin: 0;

  color: #888888;

  font-size: 12px;
}


.rules-search-summary {
  margin-bottom: 18px;

  color: #00aaff;

  font-size: 13px;

  font-weight: 900;

  text-transform: uppercase;
}


/* =========================================================
   RULE CARDS
   ========================================================= */

.rules-card-list {
  display: flex;

  flex-direction: column;

  gap: 14px;
}


.rule-card {
  overflow: hidden;

  background: #111111;

  border:
    1px solid
    #333333;

  border-radius: 10px;
}


.rule-card-header {
  padding:
    16px
    18px;

  background: #181818;

  border-bottom:
    1px solid
    #333333;
}


.rule-number {
  margin-bottom: 5px;

  color: #00aaff;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 1px;

  text-transform: uppercase;
}


.rule-card-header h3 {
  margin:
    0
    0
    6px;

  color: #ffffff;

  font-size: 20px;

  font-weight: 900;
}


.rule-section-name {
  color: #888888;

  font-size: 10px;

  font-weight: 800;

  text-transform: uppercase;
}


.rule-card-body {
  padding:
    17px
    18px;
}


.rule-card-body p {
  margin:
    0
    0
    13px;

  color: #cccccc;

  font-size: 14px;

  line-height: 1.7;
}


.rule-card-body p:last-child {
  margin-bottom: 0;
}


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

@media (max-width: 650px) {

  .rules-hero {
    width:
      calc(
        100% - 30px
      );

    padding:
      42px
      0
      24px;
  }


  .rules-hero h2 {
    font-size: 30px;
  }


  .rules-hero p {
    font-size: 14px;
  }


  .rules-tools,
  .rules-content {
    width:
      calc(
        100% - 30px
      );
  }


  .rules-part-tabs {
    grid-template-columns: 1fr;
  }


  .rules-part-tab {
    font-size: 11px;
  }


  .rule-card-header,
  .rule-card-body {
    padding:
      14px;
  }


  .rule-card-header h3 {
    font-size: 17px;
  }


  .rule-card-body p {
    font-size: 13px;
  }

}

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

.footer-info {
  margin-top: 10px;
  color: #888;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.footer-divider {
  margin: 0 8px;
  color: #00aaff;
}

@media (max-width: 650px) {

  .footer-info {
    max-width: 320px;
    margin: 10px auto 0;
    font-size: 11px;
  }

  .footer-divider {
    margin: 0 5px;
  }

}

/* =========================================================
   PAGE HERO IMAGES
   ========================================================= */

.page-hero {
  position: relative;

  width: 100%;
  max-width: none;
  min-height: 380px;

  margin: 0;

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

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  overflow: hidden;
}


/* =========================================================
   HERO DARK OVERLAY
   ========================================================= */

.page-hero-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.35),
      rgba(0, 0, 0, 0.72)
    );
}


/* =========================================================
   HERO TEXT CONTENT
   ========================================================= */

.page-hero-content {
  position: relative;
  z-index: 1;

  width: min(900px, calc(100% - 40px));

  text-align: center;
}


/* HERO TITLE */

.page-hero-content h1 {
  margin: 0;

  color: #ffffff;

  font-size: clamp(44px, 7vw, 76px);
  font-weight: 900;

  letter-spacing: 2px;
  text-transform: uppercase;

  text-shadow:
    0 3px 15px
    rgba(0, 0, 0, 0.9);
}


/* BLUE LINE */

.page-hero-line {
  width: 180px;
  height: 4px;

  margin: 14px auto;

  background: #00aaff;
}


/* HERO DESCRIPTION */

.page-hero-content p {
  margin: 0;

  color: #eeeeee;

  font-size: 17px;
  font-weight: 600;

  text-shadow:
    0 2px 8px
    rgba(0, 0, 0, 0.95);
}


/* =========================================================
   DESKTOP HERO IMAGE POSITIONS
   ========================================================= */


/* WATCH LIVE */

.livestreaming-hero {
  background-position: center 18% !important;
}


/* TOURNAMENT INFORMATION HUB */

.tournament-hero {
  background-position: center 35% !important;
}


/* TEAM & PLAYER PROFILES */

.profiles-hero {
  background-position: center 30% !important;
}


/* TEAM RANKINGS */

.rankings-hero {
  background-position: center 38% !important;
}


/* MOBILE APP */

.mobile-app-hero-image {
  background-position: center 40% !important;
}


/* GOALBALL RESOURCES */

.resources-hero-image {
  background-position: center 35% !important;
}


/* GOALBALL RULES */

.rules-hero-image {
  background-position: center 65% !important;
}


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

@media (max-width: 650px) {

  .page-hero {
    min-height: 220px;
  }

  .page-hero-content {
    width: calc(100% - 30px);
  }

  .page-hero-content h1 {
    font-size: 34px;
    letter-spacing: 1px;
  }

  .page-hero-content p {
    font-size: 14px;
  }

  .page-hero-line {
    width: 110px;
    height: 3px;

    margin: 10px auto;
  }


  /* KEEP MOBILE CROPS SEPARATE */

  .livestreaming-hero {
    background-position: center 20% !important;
  }

  .tournament-hero {
    background-position: center 40% !important;
  }

  .profiles-hero {
    background-position: center 25% !important;
  }

  .rankings-hero {
    background-position: center 40% !important;
  }

  .mobile-app-hero-image {
    background-position: center 40% !important;
  }

  .resources-hero-image {
    background-position: center 35% !important;
  }

  .rules-hero-image {
    background-position: center 65% !important;
  }

}