/*
 * Gamers & Collectors — Browse Games V3
 * Premium mobile filter drawer + compact top controls.
 */

.browseGamesPage .gcBrowseV3Controls{
  --panel:#0a151d;
  --panel2:#0d1c25;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:13px;
  overflow:hidden;
  border:1px solid rgba(112,226,237,.16);
  border-radius:24px;
  background:
    radial-gradient(circle at 5% -20%,rgba(33,207,224,.16),transparent 38%),
    radial-gradient(circle at 95% 120%,rgba(123,91,229,.15),transparent 40%),
    linear-gradient(155deg,rgba(12,27,36,.98),rgba(6,14,20,.98));
  box-shadow:0 22px 65px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.035);
}

.browseGamesPage .gcBrowseV3Controls::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.025),transparent 32%);
}

.browseGamesPage .gcBrowseV4TopRow{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.browseGamesPage .gcBrowseV3Header{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.browseGamesPage .gcBrowseV3Header > div{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.browseGamesPage .gcBrowseV3Eyebrow{
  color:#71DDE7;
  font-size:9px;
  font-weight:950;
  letter-spacing:.17em;
  text-transform:uppercase;
}

.browseGamesPage .gcBrowseV3Header strong{
  color:#F5FAFC;
  font-size:15px;
  font-weight:900;
  letter-spacing:-.01em;
}

.browseGamesPage .gcBrowseV3Reset{
  appearance:none;
  min-height:34px;
  padding:6px 11px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:#9FB2BC;
  font:inherit;
  font-size:10px;
  font-weight:850;
  cursor:pointer;
}

.browseGamesPage .gcBrowseV3Reset:active{transform:scale(.97)}

.browseGamesPage .gcBrowseV3ReleaseRow{
  position:relative;
  z-index:1;
  width:auto;
  max-width:100%;
  display:inline-grid;
  grid-template-columns:repeat(3,max-content);
  justify-content:start;
  gap:4px;
  padding:4px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:rgba(2,9,13,.40);
}

.browseGamesPage .gcBrowseV3ReleaseButton{
  appearance:none;
  min-width:0;
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:6px 9px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:#8399A5;
  font:inherit;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
  transition:.16s ease;
}

.browseGamesPage .gcBrowseV3ReleaseDot{
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-radius:50%;
  background:#667985;
  box-shadow:0 0 0 3px rgba(102,121,133,.08);
}

.browseGamesPage .gcBrowseV3ReleaseButton.isAll .gcBrowseV3ReleaseDot{background:#5DE5EE}
.browseGamesPage .gcBrowseV3ReleaseButton.isReleased .gcBrowseV3ReleaseDot{background:#4BD59D}
.browseGamesPage .gcBrowseV3ReleaseButton.isUpcoming .gcBrowseV3ReleaseDot{background:#9D86FF}

.browseGamesPage .gcBrowseV3ReleaseButton.isActive{
  color:#F7FCFD;
  border-color:rgba(255,255,255,.09);
  background:rgba(255,255,255,.07);
  box-shadow:0 8px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035);
}

.browseGamesPage .gcBrowseV3ReleaseButton.isAll.isActive{background:linear-gradient(145deg,rgba(37,190,208,.22),rgba(20,100,121,.15))}
.browseGamesPage .gcBrowseV3ReleaseButton.isReleased.isActive{background:linear-gradient(145deg,rgba(51,187,133,.22),rgba(26,99,76,.15))}
.browseGamesPage .gcBrowseV3ReleaseButton.isUpcoming.isActive{background:linear-gradient(145deg,rgba(123,91,229,.24),rgba(69,55,143,.16))}

.browseGamesPage .gcBrowseV3ActionRow{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.browseGamesPage .gcBrowseV3ActionButton{
  appearance:none;
  min-width:0;
  min-height:56px;
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto auto;
  align-items:center;
  gap:8px;
  padding:10px 11px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:17px;
  background:rgba(255,255,255,.035);
  color:#DCE9ED;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}

.browseGamesPage .gcBrowseV3ActionButton > svg{
  width:22px;
  height:22px;
}

.browseGamesPage .gcBrowseV3ActionButton.isFilters{color:#65DDE8;border-color:rgba(69,207,220,.17)}
.browseGamesPage .gcBrowseV3ActionButton.isSort{color:#F2BB63;border-color:rgba(242,187,99,.16)}
.browseGamesPage .gcBrowseV3ActionButton.isOpen{background:rgba(255,255,255,.075);border-color:currentColor}
.browseGamesPage .gcBrowseV3ActionButton:active{transform:scale(.985)}

.browseGamesPage .gcBrowseV3ActionCopy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
  color:#EAF3F6;
}

.browseGamesPage .gcBrowseV3ActionCopy small,
.browseGamesPage .gcBrowseV3SelectCopy small,
.browseGamesPage .gcBrowseV3MyCopy small{
  color:#758B96;
  font-size:8px;
  font-weight:950;
  letter-spacing:.12em;
  line-height:1.1;
  text-transform:uppercase;
}

.browseGamesPage .gcBrowseV3ActionCopy strong{
  min-width:0;
  overflow:hidden;
  color:#F4F9FA;
  font-size:11px;
  font-weight:900;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.browseGamesPage .gcBrowseV3FilterCount{
  min-width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#59DCE7;
  color:#041014;
  font-size:10px;
  font-weight:950;
}

.browseGamesPage .gcBrowseV3Chevron{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  color:#72858F;
  transition:transform .16s ease;
}

.browseGamesPage .gcBrowseV3Chevron svg{width:16px;height:16px}
.browseGamesPage .gcBrowseV3ActionButton.isOpen .gcBrowseV3Chevron{transform:rotate(180deg)}

.browseGamesPage .gcBrowseV3Drawer{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:4px 0 0;
  animation:gcBrowseDrawerIn .18s ease both;
}

.browseGamesPage .gcBrowseV3Drawer[hidden]{display:none !important}

@keyframes gcBrowseDrawerIn{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:none}
}

.browseGamesPage .gcBrowseV3MyPlatforms{
  appearance:none;
  width:100%;
  min-height:76px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 43px;
  align-items:center;
  gap:11px;
  padding:12px;
  border:1px solid rgba(70,220,233,.18);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(28,146,163,.11),rgba(255,255,255,.025));
  color:#EAF8FA;
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.browseGamesPage .gcBrowseV3MyIcon,
.browseGamesPage .gcBrowseV3SelectIcon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  color:#69E1EA;
  background:rgba(45,190,205,.12);
  box-shadow:inset 0 0 0 1px rgba(82,225,236,.08);
}

.browseGamesPage .gcBrowseV3MyIcon svg,
.browseGamesPage .gcBrowseV3SelectIcon svg{width:23px;height:23px}

.browseGamesPage .gcBrowseV3MyCopy,
.browseGamesPage .gcBrowseV3SelectCopy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.browseGamesPage .gcBrowseV3MyCopy strong,
.browseGamesPage .gcBrowseV3SelectCopy strong{
  color:#F3F9FA;
  font-size:12px;
  font-weight:900;
}

.browseGamesPage .gcBrowseV3MyCopy em{
  color:#849AA5;
  font-size:9px;
  font-style:normal;
  line-height:1.35;
}

.browseGamesPage .gcBrowseV3ToggleTrack{
  width:42px;
  height:24px;
  display:flex;
  align-items:center;
  padding:3px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  transition:.16s ease;
}

.browseGamesPage .gcBrowseV3ToggleTrack span{
  width:16px;
  height:16px;
  border-radius:50%;
  background:#81939C;
  transition:.18s ease;
}

.browseGamesPage .gcBrowseV3MyPlatforms.isActive{
  border-color:rgba(86,226,237,.48);
  background:linear-gradient(145deg,rgba(31,190,205,.20),rgba(28,91,115,.12));
}
.browseGamesPage .gcBrowseV3MyPlatforms.isActive .gcBrowseV3ToggleTrack{background:rgba(67,217,229,.25);border-color:rgba(91,229,239,.42)}
.browseGamesPage .gcBrowseV3MyPlatforms.isActive .gcBrowseV3ToggleTrack span{transform:translateX(18px);background:#7DEAF1;box-shadow:0 0 12px rgba(87,224,235,.55)}

.browseGamesPage .gcBrowseV3FilterList{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}

.browseGamesPage .gcBrowseV3SelectCard,
.browseGamesPage .gcBrowseV3SortCard{
  min-width:0;
  min-height:72px;
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:10px;
  position:relative;
  border:1px solid rgba(255,255,255,.08);
  border-radius:17px;
  background:rgba(255,255,255,.032);
}

.browseGamesPage .gcBrowseV3SelectCard select,
.browseGamesPage .gcBrowseV3SortCard select{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}

.browseGamesPage .gcBrowseV3SelectCard::after,
.browseGamesPage .gcBrowseV3SortCard::after{
  content:"›";
  position:absolute;
  right:13px;
  top:50%;
  transform:translateY(-50%);
  color:#71858E;
  font-size:21px;
  font-weight:500;
}

.browseGamesPage .gcBrowseV3SelectCard.isPlatform{border-color:rgba(74,151,255,.18)}
.browseGamesPage .gcBrowseV3SelectCard.isPlatform .gcBrowseV3SelectIcon{color:#6CA8FF;background:rgba(69,133,235,.12)}
.browseGamesPage .gcBrowseV3SelectCard.isGenre{border-color:rgba(172,111,255,.18)}
.browseGamesPage .gcBrowseV3SelectCard.isGenre .gcBrowseV3SelectIcon{color:#B58BFF;background:rgba(132,83,214,.12)}
.browseGamesPage .gcBrowseV3SelectCard.isMode{border-color:rgba(72,214,154,.18)}
.browseGamesPage .gcBrowseV3SelectCard.isMode .gcBrowseV3SelectIcon{color:#60DEA4;background:rgba(54,184,129,.12)}
.browseGamesPage .gcBrowseV3SortCard{border-color:rgba(244,187,91,.19);background:linear-gradient(145deg,rgba(162,111,38,.09),rgba(255,255,255,.025))}
.browseGamesPage .gcBrowseV3SortCard .gcBrowseV3SelectIcon{color:#F1B85E;background:rgba(198,135,44,.13)}

.browseGamesPage .gcBrowseV3ActiveFilters{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:6px;
  min-height:24px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.browseGamesPage .gcBrowseV3ActiveFilters::-webkit-scrollbar{display:none}

.browseGamesPage .gcBrowseV2ShowingLabel{
  flex:0 0 auto;
  color:#6E838E;
  font-size:8px;
  font-weight:950;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.browseGamesPage .gcBrowseV2Chip{
  flex:0 0 auto;
  min-height:26px;
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border:1px solid rgba(89,221,233,.15);
  border-radius:999px;
  background:rgba(58,190,204,.075);
  color:#CFEFF2;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
}

.browseGamesPage .browseResults.isRefreshing{
  opacity:.72;
  transition:opacity .16s ease;
}

/* Controls remain interactive while a previous server request is finishing.
   V3 coalesces changes and sends only the latest state. */
.browseGamesPage .gcBrowseV3Controls.isRefreshing{pointer-events:auto}
.browseGamesPage .gcBrowseV3Controls.isRefreshing .gcBrowseV3Header::after{
  content:"Updating";
  margin-left:auto;
  color:#6DCDD5;
  font-size:8px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

/* Entire artwork remains visible; no top/bottom crop. */
.browseGamesPage .gcBrowseV2CoverShell{
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 50% 28%,rgba(65,154,170,.18),rgba(11,18,25,.96) 62%);
}

.browseGamesPage .gcBrowseV2CoverImage{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:transparent;
}

.browseGamesPage .gcBrowseV2Rating{
  position:absolute;
  z-index:5;
  top:9px;
  right:9px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:26px;
  padding:4px 8px;
  border:1px solid rgba(92,230,238,.37);
  border-radius:999px;
  color:#E9FCFF;
  background:rgba(5,17,22,.88);
  box-shadow:0 6px 18px rgba(0,0,0,.30),inset 0 0 0 1px rgba(255,255,255,.025);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:11px;
  font-weight:900;
}

.browseGamesPage .gcBrowseV2Rating span{ color:#75E5EC; }

.browseGamesPage .browseResults.isRefreshing{
  opacity:.72;
  transition:opacity .16s ease;
}

.browseGamesPage .gcBrowseV2Controls.isRefreshing{ pointer-events:none; }

.browseGamesPage .gcBrowseV2Controls.isRefreshing::after{
  content:"Updating…";
  align-self:flex-end;
  margin-top:-6px;
  color:#77CFD9;
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.browseGamesPage .browsePagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.browseGamesPage .gcBrowseV2PageButton{
  min-width:38px;
  height:38px;
  padding:0 10px;
  border-radius:11px;
  font-size:12px;
  font-weight:850;
}

.browseGamesPage .gcBrowseV2PageButton.isActive{
  border-color:rgba(66,221,235,.45);
  color:#FFFFFF;
  background:rgba(40,198,213,.18);
}

.browseGamesPage .gcBrowseV2PageButton:disabled{
  opacity:.28;
  cursor:default;
}

.browseGamesPage .gcBrowseV2PageEllipsis{
  padding:0 2px;
  color:#71828E;
}

.browseGamesPage .gcBrowseV2Error{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:18px;
}

.browseGamesPage .gcBrowseV2Error strong{ color:#FFFFFF; }
.browseGamesPage .gcBrowseV2Error span{ color:#9FB0BC; }
.browseGamesPage .gcBrowseV2Error button{ margin-top:4px; }

/* Keep any existing Metacritic badge away from the G&C badge. */
.browseGamesPage .gcBrowseV2CoverShell .metacriticBadge,
.browseGamesPage .gcBrowseV2CoverShell .browseMetacriticBadge{
  left:9px !important;
  right:auto !important;
}


@media(max-width:900px){
  .browseGamesPage .gcBrowseV3FilterList{grid-template-columns:1fr}
}

@media(max-width:600px){
  .browseGamesPage .gcBrowseV3Controls{
    gap:12px;
    padding:14px;
    border-radius:21px;
  }

  .browseGamesPage .gcBrowseV3Header strong{font-size:14px}
  .browseGamesPage .gcBrowseV3ReleaseButton{min-height:40px;font-size:10px}
  .browseGamesPage .gcBrowseV3ActionRow{gap:8px}
  .browseGamesPage .gcBrowseV3ActionButton{
    min-height:58px;
    grid-template-columns:27px minmax(0,1fr) auto auto;
    padding:9px;
    border-radius:16px;
  }
  .browseGamesPage .gcBrowseV3ActionButton > svg{width:20px;height:20px}
  .browseGamesPage .gcBrowseV3ActionCopy strong{font-size:10px}
  .browseGamesPage .gcBrowseV3FilterList{grid-template-columns:1fr;gap:8px}
  .browseGamesPage .gcBrowseV3SelectCard,
  .browseGamesPage .gcBrowseV3SortCard{min-height:68px}
  .browseGamesPage .gcBrowseV3MyPlatforms{min-height:72px}
  .browseGamesPage .gcBrowseV2CoverImage{object-fit:contain !important}
}

@media(min-width:901px){
  .browseGamesPage .gcBrowseV3ActionRow{grid-template-columns:220px minmax(260px,1fr)}
  .browseGamesPage .gcBrowseV3Drawer[hidden]{display:flex !important}
  .browseGamesPage #gcBrowseFilterToggle,
  .browseGamesPage #gcBrowseSortToggle{pointer-events:none}
  .browseGamesPage .gcBrowseV3Chevron{display:none}
}

@media(prefers-reduced-motion:reduce){
  .browseGamesPage .gcBrowseV3ReleaseButton,
  .browseGamesPage .gcBrowseV3ActionButton,
  .browseGamesPage .browseResults,
  .browseGamesPage .gcBrowseV3Drawer{transition:none !important;animation:none !important}
}


@media(max-width:700px){
  .browseGamesPage .gcBrowseV3Controls{
    gap:9px;
    padding:11px;
    border-radius:20px;
  }

  .browseGamesPage .gcBrowseV4TopRow{
    gap:7px;
  }

  .browseGamesPage .gcBrowseV3ReleaseRow{
    flex:1 1 auto;
    grid-template-columns:repeat(3,max-content);
  }

  .browseGamesPage .gcBrowseV3ReleaseButton{
    min-height:32px;
    padding:5px 8px;
    font-size:9px;
  }

  .browseGamesPage .gcBrowseV3ReleaseDot{
    width:6px;
    height:6px;
  }

  .browseGamesPage .gcBrowseV3Reset{
    flex:0 0 auto;
    min-height:32px;
    padding:5px 9px;
    font-size:9px;
  }

  .browseGamesPage .gcBrowseV3ActionRow{
    gap:7px;
  }

  .browseGamesPage .gcBrowseV3ActionButton{
    min-height:54px;
    border-radius:15px;
  }
}