/* G-Sports Watch page layout: responsive player + matchups sidebar */
.event-page > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
}
.event-page .event-stream-container { grid-column: 1; grid-row: 1; min-width: 0; }
.event-page .event-details-component { display: contents; }
.event-page .teams-section { grid-column: 1; grid-row: 2; min-width: 0; }
.event-page .event-info-section { grid-column: 1; grid-row: 3; min-width: 0; }
.event-page .related-events-section {
  grid-column: 2;
  grid-row: 1 / span 5;
  min-width: 0;
  align-self: stretch;
  margin: 0;
  padding: 20px;
  background: #090a0d;
  border: 1px solid #30343b;
  border-radius: 14px;
  box-sizing: border-box;
  color: #f5f6f8;
}
.event-page .event-stream-container .stream-wrapper { width: 100%; }
.event-page .event-stream-container .stream-wrapper .player-wrapper {
  width: 100%; max-width: none; padding: 0 0 16px; box-sizing: border-box;
}
.event-page .event-stream-container .stream-wrapper .player { width: 100% !important; margin: 0 auto !important; }
.event-page .event-stream-container .embed-responsive { overflow: hidden; border-radius: 12px; background: #000; }
.event-page .event-stream-container .player-component { width: 100%; }
.event-page .event-stream-container > div[style*="display: contents"] { text-align: center; padding: 0 0 8px; }
.event-page .event-details-component .teams-section { padding: 0; }
.event-page .event-details-component .event-info-section { padding-top: 16px; }
.event-page .gs-matchups-panel .cards { display: block; width: 100%; }
.event-page .gs-matchups-panel .cardIntro { display: block; margin: 0 0 14px; }
.event-page .gs-matchups-panel .cardIntro h2 { color: #fff; font-size: 21px; font-weight: 700; margin: 0 0 14px; }
.event-page .gs-matchups-search-label { display: none; }
.event-page .gs-matchups-search-wrap {
  display: flex; align-items: stretch; gap: 6px; width: 100%; margin: 0 0 14px;
}
.event-page .gs-matchups-search {
  display: block; flex: 1 1 auto; min-width: 0; width: 100%; height: 40px; padding: 8px 12px; margin: 0;
  color: #fff; background: #24262a; border: 1px solid #41454d; border-radius: 7px;
  box-sizing: border-box; outline: none; font: inherit; font-size: 13px;
}
.event-page .gs-matchups-search:focus { border-color: #71839b; }
.event-page .gs-matchups-search-button {
  display: inline-flex; flex: 0 0 40px; width: 40px; height: 40px; align-items: center; justify-content: center;
  padding: 0; color: #fff; background: #30343b; border: 1px solid #41454d; border-radius: 7px;
  cursor: pointer;
}
.event-page .gs-matchups-search-button:hover { background: #41454d; }
.event-page .gs-matchups-search-button:focus-visible { outline: 2px solid #9db6d8; outline-offset: 2px; }
.event-page .gs-matchups-panel .cardIntro { position: relative; z-index: 30; }
.event-page .gs-matchups-suggestions {
  position: absolute; top: 100%; left: 0; right: 46px; max-height: 220px; overflow-y: auto;
  background: #202228; border: 1px solid #41454d; border-radius: 7px;
  box-shadow: 0 8px 20px rgba(0,0,0,.4); z-index: 60;
}
.event-page .gs-matchups-suggestions[hidden] { display: none !important; }
.event-page .gs-matchups-suggestion {
  display: block; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid #34373e;
  color: #fff; background: transparent; text-align: left; font: inherit; font-size: 12px; cursor: pointer;
}
.event-page .gs-matchups-suggestion:last-child { border-bottom: 0; }
.event-page .gs-matchups-suggestion:hover,
.event-page .gs-matchups-suggestion[aria-selected="true"] { background: #343943; }
.event-page .gs-matchups-panel .glide-wrapper,
.event-page .gs-matchups-panel .cards-container,
.event-page .gs-matchups-panel .embla { width: 100%; overflow: visible; }
.event-page .gs-matchups-panel .embla__container { display: block; transform: none !important; }
.event-page .gs-matchups-panel .embla__slide { width: 100% !important; max-width: none; margin: 0; padding: 0; }
.event-page .gs-matchups-panel .embla__slide > a { display: block; color: inherit; text-decoration: none; }
.event-page .gs-matchups-panel .event-card {
  min-height: 88px; margin: 0 0 12px; border: 0 !important; border-bottom: 1px solid #303238 !important;
  border-radius: 0 !important; box-shadow: none !important; background: transparent !important;
}
.event-page .gs-matchups-panel .event-card:hover { transform: none; background: #15171b !important; }
.event-page .gs-matchups-panel .event-card .event-header { min-height: 0; }
.event-page .gs-matchups-panel .event-card .card-bottom { padding-bottom: 10px; }
.event-page .gs-matchups-panel .event-card .card-headline,
.event-page .gs-matchups-panel .event-card .name { color: #f2f3f5; }
@media (max-width: 991px) {
  .event-page > div { display: flex; flex-direction: column; gap: 20px; padding: 16px; }
  .event-page .event-stream-container, .event-page .teams-section, .event-page .event-info-section,
  .event-page .related-events-section { width: 100%; grid-column: auto; grid-row: auto; }
  .event-page .related-events-section { order: 4; }
}
@media (max-width: 545px) {
  .event-page > div { padding: 10px; gap: 14px; }
  .event-page .related-events-section { padding: 14px; }
  .event-page .gs-matchups-panel .cardIntro h2 { font-size: 18px; }
}


/* v1.6: six matchup cards per page, compact layout close to the reference */
.event-page .related-events-section { align-self: start; height: auto; }
.event-page .gs-matchups-panel .embla__slide[hidden] { display: none !important; }
.event-page .gs-matchups-panel .wrapper {
  display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center;
  column-gap: 10px; min-height: 76px; padding: 8px 0; box-sizing: border-box;
}
.event-page .gs-matchups-panel .event-card {
  grid-column: 1; grid-row: 1; display: grid; grid-template-columns: 27px 16px 27px;
  grid-template-rows: 34px; align-items: center; justify-content: center;
  width: 82px; height: 48px; min-height: 48px; margin: 0; padding: 0;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background: transparent !important; overflow: visible;
}
.event-page .gs-matchups-panel .event-card .top-badges,
.event-page .gs-matchups-panel .event-card .bottom-badges { display: none !important; }
.event-page .gs-matchups-panel .event-card .left,
.event-page .gs-matchups-panel .event-card .right,
.event-page .gs-matchups-panel .event-card .middle { width: 27px; height: 34px; min-width: 0; display:flex; align-items:center; justify-content:center; }
.event-page .gs-matchups-panel .event-card .logo-container { width: 27px; height: 34px; padding: 0; display:flex; align-items:center; justify-content:center; background:transparent !important; }
.event-page .gs-matchups-panel .event-card .logo { display:block; max-width:27px; max-height:32px; width:auto; height:auto; object-fit:contain; }
.event-page .gs-matchups-panel .event-card .vs-container { position:static; width:16px; height:26px; display:flex; align-items:center; justify-content:center; font-size:9px; }
.event-page .gs-matchups-panel .event-metadata { grid-column: 2; grid-row: 1; min-width:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.event-page .gs-matchups-panel .event-metadata .heading-container { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.event-page .gs-matchups-panel .event-metadata .title { width:100%; min-width:0; color:#f2f3f5; font-size:14px; line-height:1.25; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.event-page .gs-matchups-panel .event-metadata .activity-badge { display:inline-flex; align-items:center; max-width:100%; min-height:17px; padding:1px 5px; font-size:9px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.event-page .gs-matchups-panel .event-metadata .sub-heading-container { display:flex; flex-direction:column; gap:2px; }
.event-page .gs-matchups-panel .event-metadata .date-and-time { font-size:11px; line-height:1.25; color:#aeb4be; }
.event-page .gs-matchups-panel .event-metadata .location { display:none !important; }
.event-page .gs-matchups-panel .event-card:hover { transform:none; }
.event-page .gs-matchups-panel .gs-matchups-pagination { display:flex; justify-content:center; align-items:center; gap:6px; padding:12px 0 2px; border-top:1px solid #303238; }
.event-page .gs-matchups-panel .gs-matchups-pagination[hidden] { display:none !important; }
.event-page .gs-matchups-panel .gs-page-button { min-width:27px; height:28px; padding:0 7px; border:1px solid #30343b; border-radius:5px; color:#dce0e6; background:#090a0d; font:inherit; font-size:12px; cursor:pointer; }
.event-page .gs-matchups-panel .gs-page-button.is-active { color:#111827; background:#f4f5f7; border-color:#f4f5f7; }
.event-page .gs-matchups-panel .gs-page-button:disabled { opacity:.35; cursor:default; }
@media (max-width: 545px) {
  .event-page .gs-matchups-panel .wrapper { grid-template-columns:72px minmax(0,1fr); column-gap:8px; min-height:72px; }
  .event-page .gs-matchups-panel .event-card { width:72px; grid-template-columns:24px 14px 24px; }
  .event-page .gs-matchups-panel .event-card .left, .event-page .gs-matchups-panel .event-card .right, .event-page .gs-matchups-panel .event-card .middle,
  .event-page .gs-matchups-panel .event-card .logo-container { width:24px; }
  .event-page .gs-matchups-panel .event-card .logo { max-width:24px; }
  .event-page .gs-matchups-panel .event-card .vs-container { width:14px; }
  .event-page .gs-matchups-panel .event-metadata .title { font-size:12px; }
}

/* Match schedule overlay in the lower-right corner of the video player */
.event-page .event-stream-container .embed-responsive {
  position: relative;
}
.event-page .gs-player-schedule {
  position: absolute;
  right: 22px;
  bottom: 48px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: calc(100% - 32px);
  color: #fff;
  text-align: right;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}
.event-page .gs-player-upcoming {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 4px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .04em;
}
.event-page .gs-player-schedule-time {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 3px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
}
@media (max-width: 545px) {
  .event-page .gs-player-schedule { right: 10px; bottom: 40px; gap: 5px; }
  .event-page .gs-player-upcoming { padding: 3px 6px; font-size: 9px; }
  .event-page .gs-player-schedule-time { font-size: 10px; }
}