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

.schedule-page {

  min-height: calc(100vh - 72px);

  position: relative;

  overflow: visible;

  padding:
    45px
    28px
    100px;

  box-sizing: border-box;

}


/* ============================================================
   SCHEDULE TITLE
   ============================================================ */

.schedule-title {

  margin:
    0
    0
    40px;

  text-align: center;

  font-family:
    "Alan Sans",
    sans-serif;

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

  font-weight: 900;

  color:
    #399447;

  text-transform:
    uppercase;

  line-height: 1;

}


/* ============================================================
   SESSIONS SECTION
   ============================================================ */

.sessions-section {

  width: 100%;

  position: relative;

  z-index: 2;

}


/* ============================================================
   SESSION GRID
   ============================================================ */

.sessions-grid {

  width:
    min(
      100%,
      1000px
    );

  margin:
    0
    auto;

  display: grid;

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

  column-gap:
    55px;

  row-gap:
    65px;

}


/* ============================================================
   SESSION CARD
   ============================================================ */

.session-card {

  min-width: 0;

  text-align: center;

}


/* ============================================================
   SESSION BUTTON
   ============================================================ */

.session-button {

  position: relative;

  width: 205px;

  height: 58px;

  margin:
    0
    auto
    10px;

  display: flex;

  align-items: center;

  justify-content: center;

  color:
    #4c3d49;

  font-family:
    "Alan Sans",
    sans-serif;

  font-size: 18px;

  font-weight: 800;

  text-decoration: none;

  background-image:
    url("assets/SessionButton.png");

  background-repeat:
    no-repeat;

  background-position:
    center;

  background-size:
    100%
    100%;

  transition:
    transform .15s ease,
    filter .15s ease;

}


.session-button:hover {

  transform:
    translateY(-2px);

  filter:
    brightness(1.05);

}


.session-button span {

  position: relative;

  z-index: 2;

}


/* ============================================================
   SESSION GROUPS
   ============================================================ */

.session-groups {

  font-family:
    "Alan Sans",
    sans-serif;

  font-size: 16px;

  font-weight: 500;

  color:
    #3e5a38;

  text-align: center;

  line-height: 1.5;

}


/* ============================================================
   GROUP STAGE SECTION
   ============================================================ */

.group-stage-section {

  width:
    min(
      100%,
      1200px
    );

  margin:
    120px
    auto
    0;

  position: relative;

  z-index: 2;

}


/* ============================================================
   GROUP STAGE TITLE
   ============================================================ */

.group-stage-title {

  margin: 0;

  text-align: center;

  color:
    #278d3e;

  font-family:
    "Alan Sans",
    sans-serif;

  font-size:
    clamp(
      30px,
      4vw,
      45px
    );

  font-weight: 900;

  text-transform:
    uppercase;

  line-height: 1;

}


.group-stage-subtitle {

  margin:
    8px
    0
    30px;

  text-align: center;

  color:
    #6d8b69;

  font-size: 13px;

  line-height: 1.5;

  opacity: .8;

}


/* ============================================================
   GROUP GRID
   ============================================================ */

.groups-grid {

  width: 100%;

  margin:
    0
    auto;

  display: grid;

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

  column-gap:
    28px;

  row-gap:
    36px;

  position: relative;

  z-index: 2;

}


/* ============================================================
   GROUP CARD
   ============================================================ */

.group-card {

  min-width: 0;

  background-image:
    url("assets/Group.png");

  background-repeat:
    no-repeat;

  background-position:
    center;

  background-size:
    100%
    125%;

  position: relative;

}


/* ============================================================
   CENTER LAST 3 GROUPS
   ============================================================ */

.group-card:nth-child(9) {

  grid-column:
    1;

}


.group-card:nth-child(10) {

  grid-column:
    2;

}


.group-card:nth-child(11) {

  grid-column:
    3;

}


.group-card:nth-child(9),
.group-card:nth-child(10),
.group-card:nth-child(11) {

  transform:
    translateX(50%);

}


/* ============================================================
   GROUP BANNER
   ============================================================ */

.group-banner {

  position: relative;

  height: 42px;

  display: flex;

  align-items: center;

  justify-content: center;

  background-image:
    url("assets/group_banner_template.png");

  background-repeat:
    no-repeat;

  background-position:
    center;

  background-size:
    100%
    100%;

  color:
    white;

  font-family:
    "Alan Sans",
    sans-serif;

  font-size: 16px;

  font-weight: 800;

  letter-spacing:
    .4px;

  text-transform:
    uppercase;

}


.group-banner span {

  position: relative;

  z-index: 2;

  color:
    white;

  text-shadow:
    0
    1px
    1px
    rgba(
      0,
      0,
      0,
      .18
    );

}


/* ============================================================
   TEAM LIST
   ============================================================ */

.team-list {

  margin:
    0
    12px;

  padding:
    9px;

  list-style:
    none;

}


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

.team {

  min-height:
    35px;

  padding:
    7px
    8px
    6px;

  box-sizing:
    border-box;

  text-align:
    center;

  font-family:
    "Alan Sans",
    sans-serif;

  font-size:
    12px;

  line-height:
    1.1;

  font-weight:
    1000;

  color:
    #399447;

  background:
    #f2ecdd;

  border-bottom:
    3px solid
    rgba(
      126,
      176,
      108,
      .7
    );

  text-transform:
    uppercase;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

}


.team:last-child {

  border-bottom:
    0;

}


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

@media (max-width: 1100px) {

  .schedule-page {

    padding:
      40px
      22px
      90px;

  }


  .sessions-grid {

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

    column-gap:
      30px;

    row-gap:
      50px;

  }


  .session-button {

    width: 190px;

    height: 55px;

    font-size: 16px;

  }


  .group-stage-section {

    margin-top:
      100px;

  }


  .groups-grid {

    column-gap:
      20px;

    row-gap:
      30px;

  }

}


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

@media (max-width: 800px) {

  .schedule-page {

    padding:
      35px
      20px
      80px;

  }


  .schedule-title {

    font-size:
      38px;

    margin-bottom:
      32px;

  }


  /* =========================
     SESSIONS
     ========================= */

  .sessions-grid {

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

    column-gap:
      25px;

    row-gap:
      45px;

  }


  .session-button {

    width:
      190px;

    height:
      54px;

    font-size:
      15px;

  }


  .session-groups {

    font-size:
      14px;

  }


  /* =========================
     GROUP STAGE
     ========================= */

  .group-stage-section {

    margin-top:
      90px;

  }


  .group-stage-title {

    font-size:
      36px;

  }


  .groups-grid {

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

    column-gap:
      18px;

    row-gap:
      30px;

  }


  /* Remove desktop centering */
  .group-card:nth-child(9),
  .group-card:nth-child(10),
  .group-card:nth-child(11) {

    transform:
      none;

  }


  .group-card:nth-child(9) {

    grid-column:
      1;

  }


  .group-card:nth-child(10) {

    grid-column:
      2;

  }


  .group-card:nth-child(11) {

    grid-column:
      3;

  }


  .group-banner {

    height:
      40px;

    font-size:
      14px;

  }


  .team-list {

    margin:
      0
      10px;

    padding:
      8px;

  }


  .team {

    min-height:
      34px;

    font-size:
      11px;

  }

}


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

@media (max-width: 620px) {

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

  .schedule-page {

    min-height:
      calc(
        100vh - 64px
      );

    padding:
      35px
      16px
      70px;

  }


  /* =========================
     TITLE
     ========================= */

  .schedule-title {

    margin:
      0
      28px;

    font-size:
      30px;

    line-height:
      1;

  }


  /* =========================
     SESSIONS
     ========================= */

  .sessions-grid {

    width:
      100%;

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

    column-gap:
      12px;

    row-gap:
      30px;

  }


  .session-card {

    width:
      100%;

  }


  .session-button {

    width:
      100%;

    max-width:
      165px;

    height:
      48px;

    margin:
      0
      auto
      7px;

    font-size:
      13px;

  }


  .session-groups {

    padding:
      0
      4px;

    font-size:
      11px;

    line-height:
      1.45;

  }


  /* =========================
     GROUP STAGE
     ========================= */

  .group-stage-section {

    width:
      100%;

    margin:
      75px
      auto
      0;

  }


  .group-stage-title {

    font-size:
      29px;

    line-height:
      1;

  }


  .group-stage-subtitle {

    margin:
      7px
      0
      24px;

    font-size:
      11px;

    line-height:
      1.5;

  }


  /* =========================
     GROUP GRID
     ========================= */

  .groups-grid {

    width:
      100%;

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

    column-gap:
      12px;

    row-gap:
      24px;

  }


  /* =========================
     LAST 3 GROUPS
     ========================= */

  .group-card:nth-child(9),
  .group-card:nth-child(10),
  .group-card:nth-child(11) {

    transform:
      none;

  }


  .group-card:nth-child(9),
  .group-card:nth-child(10),
  .group-card:nth-child(11) {

    grid-column:
      auto;

  }


  /* =========================
     GROUP BANNER
     ========================= */

  .group-banner {

    height:
      34px;

    font-size:
      11px;

    letter-spacing:
      .3px;

  }


  /* =========================
     TEAM LIST
     ========================= */

  .team-list {

    margin:
      0
      7px;

    padding:
      6px;

  }


  .team {

    min-height:
      30px;

    padding:
      6px
      5px
      5px;

    font-size:
      9px;

    border-bottom:
      2px solid
      rgba(
        126,
        176,
        108,
        .7
      );

  }


  /* =========================================================
     NAVBAR - MOBILE
     ========================================================= */

  .nav-toggle {

    display:
      none;

  }


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

  .navbar {

    width:
      100%;

    min-height:
      64px;

    padding:
      0
      18px;

    box-sizing:
      border-box;

    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;

    position:
      relative;

    z-index:
      1000;

  }


  /* =========================
     LOGO
     ========================= */

  .nav-logo {

    display:
      flex;

    align-items:
      center;

    flex-shrink:
      0;

  }


  .nav-logo img {

    width:
      78px;

    height:
      auto;

    display:
      block;

  }


  /* =========================
     HAMBURGER
     ========================= */

  .nav-toggle {

    width:
      42px;

    height:
      42px;

    padding:
      0;

    border:
      none;

    background:
      transparent;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      center;

    justify-content:
      center;

    gap:
      5px;

    cursor:
      pointer;

    position:
      relative;

    z-index:
      1002;

  }


  .nav-toggle span {

    width:
      22px;

    height:
      2px;

    display:
      block;

    background:
      #f8f8f8;

    border-radius:
      2px;

    transition:
      transform .25s ease,
      opacity .2s ease;

  }


  /* =========================
     HAMBURGER -> X
     ========================= */

  .nav-toggle.active span:nth-child(1) {

    transform:
      translateY(7px)
      rotate(45deg);

  }


  .nav-toggle.active span:nth-child(2) {

    opacity:
      0;

  }


  .nav-toggle.active span:nth-child(3) {

    transform:
      translateY(-7px)
      rotate(-45deg);

  }


  /* =========================
     MENU
     ========================= */

  .nav-menu {

    position:
      absolute;

    top:
      64px;

    left:
      12px;

    right:
      12px;

    padding:
      12px;

    box-sizing:
      border-box;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      4px;

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

    box-shadow:
      0
      10px
      30px
      rgba(
        40,
        70,
        40,
        .15
      );

    border:
      1px solid
      rgba(
        39,
        141,
        62,
        .08
      );

    opacity:
      0;

    visibility:
      hidden;

    transform:
      translateY(-10px);

    transition:
      opacity .2s ease,
      transform .2s ease,
      visibility .2s ease;

    z-index:
      1001;

  }


  /* =========================
     OPEN MENU
     ========================= */

  .nav-menu.active {

    opacity:
      1;

    visibility:
      visible;

    transform:
      translateY(0);

  }


  /* =========================
     MENU LINKS
     ========================= */

  .nav-menu > a:not(.play-now) {

    width:
      100%;

    min-height:
      45px;

    padding:
      0
      16px;

    box-sizing:
      border-box;

    display:
      flex;

    align-items:
      center;

    justify-content:
      flex-start;

    font-size:
      12px;

    font-weight:
      800;

    letter-spacing:
      1.5px;

    text-decoration:
      none;

    color:
      #52634e;

    background:
      transparent;

    transition:
      background .2s ease,
      color .2s ease;

  }


  .nav-menu > a:not(.play-now):hover {

    color:
      #278d3e;

    background:
      rgba(
        39,
        141,
        62,
        .06
      );

  }


  /* =========================
     ACTIVE
     ========================= */

  .nav-menu > a.active {

    color:
      #278d3e;

    background:
      rgba(
        39,
        141,
        62,
        .08
      );

  }


  /* =========================
     PLAY NOW
     ========================= */

  .nav-menu .play-now {

    width:
      100%;

    height:
      44px;

    margin-top:
      7px;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    box-sizing:
      border-box;

    font-size:
      11px;

  }

}


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

@media (max-width: 400px) {

  .schedule-page {

    padding:
      30px
      12px
      60px;

  }


  /* =========================
     TITLE
     ========================= */

  .schedule-title {

    font-size:
      26px;

    margin-bottom:
      25px;

  }


  /* =========================
     SESSIONS
     ========================= */

  .sessions-grid {

    column-gap:
      8px;

    row-gap:
      25px;

  }


  .session-button {

    max-width:
      145px;

    height:
      44px;

    font-size:
      11px;

  }


  .session-groups {

    font-size:
      10px;

  }


  /* =========================
     GROUP STAGE
     ========================= */

  .group-stage-section {

    margin-top:
      60px;

  }


  .group-stage-title {

    font-size:
      25px;

  }


  .group-stage-subtitle {

    font-size:
      10px;

    margin-bottom:
      20px;

  }


  /* =========================
     GROUP GRID
     ========================= */

  .groups-grid {

    column-gap:
      8px;

    row-gap:
      20px;

  }


  .group-banner {

    height:
      31px;

    font-size:
      10px;

  }


  .team-list {

    margin:
      0
      5px;

    padding:
      5px;

  }


  .team {

    min-height:
      27px;

    padding:
      5px
      3px
      4px;

    font-size:
      8px;

  }


  /* =========================
     NAVBAR
     ========================= */

  .navbar {

    min-height:
      60px;

    padding:
      0
      15px;

  }


  .nav-logo img {

    width:
      70px;

  }


  .nav-toggle {

    width:
      40px;

    height:
      40px;

  }


  .nav-menu {

    top:
      60px;

    left:
      10px;

    right:
      10px;

  }

}

/* ================================================
   PUBLIC GROUP STANDINGS - ROBLOX OLYMPIC STYLE
   Added after the existing Schedule CSS.
   ================================================ */

/* The old group renderer from script.js/script2.js is left in place,
   hidden until those unprovided scripts can be integrated safely. */
.groups-grid.legacy-groups {
  display: none !important;
}

.standings-layout {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 38px 26px;
}

.standing-group-card {
  min-width: 0;
  position: relative;
  background: #fff;
}

.standing-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: #fff;
  font-family: "Alan Sans", sans-serif;
}

.standing-col-team { width: 33%; }
.standing-col-wp { width: 19%; }
.standing-col-ca { width: 22%; }
.standing-col-status { width: 26%; }

.standing-header {
  background: #45a3d4;
  color: #fff;
}

.standing-header th {
  padding: 13px 3px;
  font-size: clamp(11px, 1.35vw, 17px);
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  border: 0;
  text-transform: uppercase;
}

.standing-header .standing-header-group {
  position: relative;
  color: #fff;
  background: #c7be56;
  text-align: left;
  padding-left: 16px;
  clip-path: polygon(4% 0, 100% 0, 88% 100%, 0% 100%);
}

.standing-team-row td,
.standing-empty-row td {
  border: 2px solid #45a3d4;
  text-align: center;
  vertical-align: middle;
}

.standing-team-row td {
  height: 120px;
  padding: 6px 4px;
}

.standing-team-cell { padding: 8px !important; }
.standing-team-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 100%;
  min-width: 0;
  height: 100px;
}

.standing-logo-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.standing-team-fallback {
  color: #318bb9;
  font-weight: 900;
  font-size: clamp(10px, 1vw, 14px);
  text-align: center;
  overflow-wrap: anywhere;
}

.standing-value {
  color: #388fbd;
  font-size: clamp(12px, 1.3vw, 19px);
  font-weight: 600;
  white-space: nowrap;
}

.standing-status {
  font-size: clamp(10px, 1.32vw, 18px);
  font-weight: 900;
  letter-spacing: -.2px;
  white-space: nowrap;
}

.standing-status-qualified { color: #6cb342; }
.standing-status-eliminated { color: #d23d39; }
.standing-status-pending { color: #798894; }

.standing-empty-row td {
  padding: 35px 12px;
  color: #668090;
  font-size: 12px;
}

.standings-message {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px;
  color: #607889;
}

.standing-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .standings-layout { grid-template-columns: 1fr; max-width: 800px; margin: 0 auto; }
  .standing-header th { font-size: clamp(13px, 2.3vw, 21px); }
  .standing-team-row td { height: 150px; }
  .standing-team-logo { height: 130px; }
  .standing-value { font-size: clamp(14px, 2.7vw, 22px); }
  .standing-status { font-size: clamp(12px, 2.5vw, 20px); }
}

@media (max-width: 620px) {
  .standings-layout { gap: 28px; }
  .standing-header th { padding: 10px 2px; font-size: clamp(10px, 3vw, 15px); }
  .standing-header .standing-header-group { padding-left: 9px; }
  .standing-team-row td { height: 94px; padding: 4px 2px; border-width: 1.5px; }
  .standing-team-cell { padding: 5px !important; }
  .standing-team-logo { height: 84px; }
  .standing-value { font-size: clamp(9px, 2.8vw, 13px); }
  .standing-status { font-size: clamp(9px, 2.7vw, 12px); }
  .standing-col-team { width: 33%; }
  .standing-col-wp { width: 19%; }
  .standing-col-ca { width: 21%; }
  .standing-col-status { width: 27%; }
}

@media (max-width: 370px) {
  .standing-header th { font-size: 9px; }
  .standing-value { font-size: 9px; }
  .standing-status { font-size: 9px; }
  .standing-team-logo { height: 72px; }
  .standing-team-row td { height: 82px; }
}