/* Homepage lobby */

body.pageMain{
  --hubHeaderStage:963px;
  --hubStage:873px;
  --hubPanel:rgba(7,14,24,.92);
  --hubPanelStrong:rgba(3,9,17,.97);
  --hubPanelSoft:rgba(17,29,45,.82);
  --hubLine:rgba(156,169,188,.18);
  --hubLineWarm:rgba(222,178,112,.48);
  --hubText:#f6f8fc;
  --hubMuted:#b5c0d2;
  --hubAccent:#4d86ff;
  --hubAccentSoft:#79a6ff;
  --hubWarm:#d9ad72;
  --hubRadius:12.6px;
  min-height:100%;
  overflow-x:hidden;
  background:#050a11;
  color:var(--hubText);
}

body.pageMain .pageVideo::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(2,7,13,.72),rgba(3,8,14,.84)),
    radial-gradient(circle at 50% 15%,rgba(0,0,0,.04),rgba(0,0,0,.34) 72%);
}

body.pageMain .pageVideo video{
  filter:saturate(.78) brightness(.61) contrast(1.08);
}

.hubHeadingIcon{
  color:#2f79ff;
  filter:drop-shadow(0 0 1.8px rgba(47,121,255,.88));
}

.hubHeadingGamepad svg{
  width:100%;
  height:100%;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hubMain{
  position:relative;
  z-index:1;
  min-height:100vh;
  padding:61.6px 14.4px 48.6px;
}

.hubShell{
  width:min(var(--hubStage),100%);
  min-width:0;
  margin:0 auto;
}

.hubPrimary{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.hubWelcome{
  margin:0 0 8.1px 9px;
  max-width:612px;
}

.hubSectionLabel{
  margin:0 0 4.5px;
  color:var(--hubAccentSoft);
  font-size:9.9px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.hubWelcome h1{
  margin:0;
  font-size:clamp(18.9px,2.4vw,22.5px);
  line-height:1.12;
  font-weight:500;
  letter-spacing:0;
  text-shadow:0 1.8px 16.2px rgba(0,0,0,.38);
}

.hubWelcome > p:last-child{
  margin:4.5px 0 0;
  color:#f3f5f8;
  font-size:11.7px;
  line-height:1.5;
}

.hubTopGrid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 198px;
  gap:16.2px;
  align-items:stretch;
}

.hubTopGrid > *,
.hubFeaturedGrid > *,
.hubCatalogGrid > *{
  min-width:0;
}

.hubPanel{
  min-width:0;
  border:0.9px solid var(--hubLine);
  border-radius:16.2px;
  background:
    linear-gradient(145deg,rgba(19,30,46,.78),rgba(4,10,18,.90)),
    var(--hubPanel);
  box-shadow:none;
}

.hubFeatured{
  position:relative;
  flex:1;
  padding:8.1px 16.2px 9.4px;
}

.hubSectionHeading,
.hubCatalogHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:21.6px;
}

.hubSectionHeading{
  margin-bottom:7.2px;
}

.hubSectionHeading h2,
.hubCatalogHeader h2{
  margin:0;
  display:flex;
  align-items:center;
  gap:7.2px;
  font-size:14.4px;
  font-weight:450;
  line-height:1.15;
  letter-spacing:0;
}

.hubHeadingIcon{
  width:16.2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16.2px;
  line-height:1;
}

.hubHeadingGamepad{
  width:21.8px;
  height:21.8px;
}

.hubFeatured .hubHeadingIcon{
  width:19.8px;
  font-size:18px;
  font-weight:900;
}

.hubFeaturedGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10.8px;
}

.hubGameCard{
  min-width:0;
  overflow:hidden;
  border:1.8px solid rgba(112,177,255,.46);
  border-radius:var(--hubRadius);
  background:rgba(12,27,49,.42);
  color:var(--hubText);
  box-shadow:0 7.2px 19.8px rgba(0,0,0,.22);
  transition:border-color .18s ease;
}

a.hubGameCard{
  display:block;
  text-decoration:none;
}

.hubGameCard:hover{
  border-color:rgba(112,190,255,.82);
}

.hubGameMedia{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  background:rgba(8,17,31,.82);
}

.hubGameMedia::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:28%;
  background:linear-gradient(180deg,transparent,rgba(4,11,21,.32));
  pointer-events:none;
}

.hubGameMedia img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .28s ease,filter .28s ease;
}

.hubGameMediaLogo img{
  object-fit:contain;
  padding:7.2px 10.8px;
  background:rgba(5,14,28,.96);
}

.hubGameCard:hover .hubGameMedia img{
  transform:scale(1.025);
  filter:saturate(1.08) brightness(1.04);
}

.hubGameBody{
  position:relative;
  min-width:0;
  padding:10.8px 12.6px 11.7px;
  background:rgba(16,27,43,.96);
}

.hubGameBody h3{
  margin:0;
  color:#fff;
  font-size:14.4px;
  font-weight:450;
  line-height:1.2;
  letter-spacing:0;
}

.hubGameBody p{
  min-height:37.8px;
  margin:7.2px 0 9px;
  color:var(--hubMuted);
  font-size:10.8px;
  line-height:1.45;
}

.hubFeaturedTitleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7.2px;
}

.hubGameCardFeatured .hubGameBody{
  padding:9px 10.8px 8.1px;
}

.hubGameCardFeatured .hubGameBody p{
  min-height:0;
  margin:5.4px 0 0;
  font-size:9.9px;
  line-height:1.35;
}

.hubFeaturedPlay{
  min-width:43.2px;
  min-height:22.5px;
  padding:3.6px 9.9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border:0.9px solid rgba(112,190,255,.74);
  border-radius:899.1px;
  background:linear-gradient(180deg,#4f86f0,#336bd4);
  color:#fff;
  font-size:11px;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  box-shadow:none;
  box-sizing:border-box;
  transition:background .16s ease,border-color .16s ease;
}

.hubFeaturedPlay:hover,
.hubFeaturedPlay:focus-visible{
  border-color:rgba(112,190,255,.82);
  background:linear-gradient(180deg,#477fe6,#3164c8);
  outline:none;
}

.hubGameTag{
  display:inline-flex;
  align-items:center;
  min-height:21.6px;
  padding:3.6px 8.1px;
  border:0.9px solid rgba(123,164,224,.18);
  border-radius:899.1px;
  background:rgba(77,134,255,.12);
  color:#a9c5ff;
  font-size:9px;
  font-size:9.9px;
  font-weight:700;
  line-height:1;
  white-space:normal;
}

.hubSidePanel{
  min-height:0;
  margin:0;
  padding:12.6px;
  display:flex;
  flex-direction:column;
}

.hubSideLabel{
  display:block;
  margin-bottom:10.8px;
  color:var(--hubMuted);
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  text-align:center;
  text-transform:uppercase;
}

.hubAdPlaceholder{
  flex:1;
  min-height:238.5px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12.6px;
  padding:19.8px;
  border:0.9px dashed rgba(169,188,216,.30);
  border-radius:5.4px;
  background:rgba(255,255,255,.025);
  color:#8999af;
  text-align:center;
}

.hubAdMark{
  color:var(--hubWarm);
  font-family:Georgia,serif;
  font-size:28.8px;
  line-height:1;
}

.hubAdPlaceholder p{
  max-width:135px;
  margin:0;
  font-size:10.8px;
  line-height:1.5;
}

.hubCatalog{
  margin-top:15.3px;
  padding:13.5px 17.1px 17.1px;
}

.hubCatalogHeader{
  margin-bottom:13.5px;
}

.hubSort{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
}

.hubSortLabel{
  color:#d1d9e6;
  font-size:12.8px;
  font-weight:550;
  white-space:nowrap;
}

.hubFilters{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6.3px;
  flex-wrap:wrap;
}

.hubFilter{
  min-height:27px;
  padding:4.5px 12.6px;
  border:0.9px solid transparent;
  border-radius:899.1px;
  background:transparent;
  color:var(--hubMuted);
  font:inherit;
  font-size:11.7px;
  font-weight:500;
  cursor:pointer;
}

.hubFilter:hover{
  color:#fff;
  background:rgba(255,255,255,.045);
}

.hubFilter:focus-visible{
  outline:1.8px solid var(--hubAccentSoft);
  outline-offset:1.8px;
}

.hubFilter.is-active{
  border-color:rgba(77,134,255,.8);
  background:rgba(77,134,255,.13);
  color:#8eb3ff;
}

.hubCatalogGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12.6px;
}

.hubCatalogCard{
  display:flex;
  flex-direction:column;
}

.hubCatalogCard[hidden]{
  display:none;
}

.hubCatalogCard .hubGameBody{
  flex:1;
  display:flex;
  flex-direction:column;
}

.hubCatalogCard .hubGameBody p{
  font-size:12.8px;
}

.hubPlayBtn,
.hubComingSoon{
  width:100%;
  min-height:34.2px;
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:899.1px;
  font-size:12.8px;
  font-weight:800;
  letter-spacing:.1em;
  line-height:1;
  text-align:center;
  box-sizing:border-box;
}

.hubPlayBtn{
  border:0.9px solid rgba(112,190,255,.74);
  background:linear-gradient(180deg,#4f86f0,#336bd4);
  color:#fff;
  text-decoration:none;
  box-shadow:none;
  transition:background .16s ease,border-color .16s ease;
}

.hubPlayBtn:hover{
  border-color:rgba(112,190,255,.82);
  background:linear-gradient(180deg,#6498ff,#3c75eb);
}

.hubPlayBtn:focus-visible{
  border-color:rgba(112,190,255,.82);
  background:linear-gradient(180deg,#6498ff,#3c75eb);
  outline:none;
}

.hubComingSoon{
  border:0.9px solid rgba(176,190,211,.17);
  background:rgba(255,255,255,.035);
  color:#8291a8;
}

.hubCatalogCard.is-coming-soon .hubGameMedia img{
  filter:saturate(.6) brightness(.72);
}

.hubCatalogCard.is-coming-soon:hover{
  transform:none;
  border-color:rgba(112,177,255,.28);
  box-shadow:0 7.2px 19.8px rgba(0,0,0,.22);
}

.hubEmptyState{
  margin:25.2px 0 10.8px;
  color:var(--hubMuted);
  font-size:11.7px;
  text-align:center;
}

@media (max-width:1050px){
  body.pageMain{
    --hubStage:711px;
  }
  .hubCatalogGrid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media (max-width:820px){
  body.pageMain{
    --hubStage:calc(100% - 39.6px);
  }
  .hubTopGrid{grid-template-columns:1fr;}
  .hubSidePanel{min-height:auto;margin-bottom:0;}
  .hubAdPlaceholder{min-height:117px;}
  .hubCatalogGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:640px){
  .hubMain{padding:55.8px 9px 43.2px;}
  .hubWelcome{margin-left:5.4px;}
  .hubWelcome h1{font-size:21.6px;}
  .hubSectionHeading{display:block;}
  .hubSectionHeading > p{margin-top:7.2px;text-align:left;}
  .hubFeaturedGrid{grid-template-columns:1fr;}
  .hubGameCardFeatured{display:grid !important;grid-template-columns:minmax(0,42%) minmax(0,58%);width:100%;min-height:84.6px;}
  .hubGameCardFeatured .hubGameMedia{height:100%;aspect-ratio:auto;}
  .hubGameCardFeatured .hubGameBody{display:flex;flex-direction:column;justify-content:center;}
  .hubCatalogHeader{display:block;}
  .hubSort{display:block;margin-top:12.6px;}
  .hubSortLabel{display:block;margin-bottom:6.3px;}
  .hubFilters{justify-content:flex-start;}
  .hubCatalogGrid{grid-template-columns:1fr 1fr;gap:9px;}
  .hubCatalog{padding:12.6px;}
  .hubGameBody{padding:9.9px;}
  .hubGameBody h3{font-size:13.5px;}
  .hubGameBody p{font-size:9.9px;}
  .hubSidePanel{display:none;}
}

@media (max-width:560px){
  .hubCatalogGrid{grid-template-columns:1fr;}
  .hubGameCardFeatured{grid-template-columns:minmax(0,44%) minmax(0,56%);}
  .hubFilters{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4.5px;
  }
  .hubFilter{
    width:100%;
    min-width:0;
    padding-left:4.5px;
    padding-right:4.5px;
    font-size:9px;
    white-space:nowrap;
  }
}

@media (prefers-reduced-motion:reduce){
  .hubGameCard,
  .hubGameMedia img,
  .hubFeaturedPlay,
  .hubPlayBtn,
  .hubHeaderNav a::after{
    transition:none;
  }
}