/* ReShop /games. Backgrounds are clipped separately from character pop-outs. */
.rs-games-page {
  --games-font: Nunito, "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  position: relative;
  padding: 144px 24px 84px;
  color: #fff;
  font-family: var(--games-font);
  -webkit-font-smoothing: antialiased;
}
.rs-games-page, .rs-games-page * { box-sizing: border-box; }
.rs-games-page__inner { width: 100%; max-width: 1280px; margin-inline: auto; }
.rs-games-page__head { margin-bottom: 86px; text-align: center; }
.rs-games-page__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 6px 13px;
  border: 1px solid rgba(var(--cl-accent-rgb, 255,116,23), .3);
  border-radius: 999px;
  background: rgba(var(--cl-accent-rgb, 255,116,23), .09);
  color: #EEC5A9;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .06em;
}
.rs-games-page__badge svg { width: 16px; height: 16px; flex: 0 0 16px; }
.rs-games-page__head h1 {
  margin: 14px 0 0;
  color: #fff;
  font-family: var(--games-font);
  font-size: clamp(44px, 4.8vw, 64px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.04em;
  text-shadow: none;
}
.rs-games-page__head > p { margin: 14px 0 0; color: #a6a2b5; font-size: 16px; line-height: 1.65; }
.rs-games-page__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 28px; }
.rs-game-banner {
  --game-rgb: 255,116,23;
  --game-color: #FF7417;
  --game-button-start: #FF8636;
  --game-button-end: #FF7417;
  --game-art-width: 60%;
  --game-art-image-width: 112%;
  --game-art-image-right: -7%;
  --game-overhang: 42px;
  position: relative;
  isolation: isolate;
  min-width: 0;
  height: 266px;
  border-radius: 20px;
}
.rs-game-banner--valorant { --game-rgb: 0,200,206; --game-color: #00c8ce; --game-button-start: #11c9ce; --game-button-end: #009fa8; --game-art-width: 55%; --game-art-image-width: 133%; --game-art-image-right: -15%; --game-overhang: 56px; }
.rs-game-banner--cs2 { --game-rgb: 126,130,138; --game-color: #91949c; --game-art-width: 49%; --game-art-image-width: 110%; --game-art-image-right: -8%; }
.rs-game-banner--apex { --game-rgb: 255,37,61; --game-color: #ff253d; --game-button-start: #ff3348; --game-button-end: #ec1027; --game-art-width: 53%; --game-art-image-width: 102%; --game-art-image-right: -4%; }
.rs-game-banner--minecraft { --game-rgb: 111,209,24; --game-color: #72d119; --game-button-start: #a9e900; --game-button-end: #76d500; --game-art-width: 58%; --game-art-image-width: 120%; --game-art-image-right: -11%; --game-overhang: 39px; }
.rs-game-banner--supercell { --game-rgb: 30,139,255; --game-color: #1688ff; --game-button-start: #209eff; --game-button-end: #076be7; --game-art-width: 61%; --game-art-image-width: 90%; --game-art-image-right: -2%; --game-overhang: 44px; }
.rs-game-banner--brawl-stars { --game-rgb: 242,22,160; --game-color: #f216a0; --game-button-start: #ff33b4; --game-button-end: #df0083; --game-art-width: 54%; --game-art-image-width: 105%; --game-art-image-right: -10%; --game-overhang: 32px; }
.rs-game-banner--chess { --game-rgb: 13,190,109; --game-color: #0dbe6d; --game-button-start: #19d97c; --game-button-end: #02a958; }
.rs-game-banner--steam { --game-rgb: 0,156,255; --game-color: #009cff; --game-button-start: #17afff; --game-button-end: #0875ed; grid-column: 1 / -1; }
.rs-game-banner__surface { position: absolute; z-index: 0; inset: 0; overflow: hidden; border: 1.5px solid rgba(var(--game-rgb), .78); border-radius: inherit; background: #1B1613; box-shadow: 0 14px 36px -24px rgba(var(--game-rgb), .2); transition: border-color .25s, box-shadow .25s; }
.rs-game-banner__background { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.rs-game-banner__surface::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(15,12,10,.88), rgba(15,12,10,.52) 39%, rgba(15,12,10,.04) 75%), linear-gradient(0deg, rgba(15,12,10,.14), transparent 55%); }
.rs-game-banner__art { position: absolute; z-index: 1; inset: calc(-1 * var(--game-overhang)) 0 0 auto; width: var(--game-art-width); overflow: hidden; pointer-events: none; border-bottom-right-radius: inherit; }
.rs-game-banner__art > img { position: absolute; top: 0; right: var(--game-art-image-right); display: block; width: var(--game-art-image-width); max-width: none; height: auto; user-select: none; transition: transform .35s ease; transform-origin: 65% 65%; }
.rs-game-banner__copy { position: relative; z-index: 2; display: flex; height: 100%; width: 62%; align-items: flex-start; flex-direction: column; justify-content: center; padding: 24px 0 24px 28px; }
.rs-game-banner__title { display: flex; align-items: center; margin: 0; width: 218px; max-width: 100%; height: 76px; font-size: inherit; line-height: 1; }
.rs-game-banner__title > img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.rs-game-banner--fortnite .rs-game-banner__title { width: 220px; height: 68px; }
.rs-game-banner--valorant .rs-game-banner__title { width: 205px; height: 92px; margin-left: -11px; }
.rs-game-banner--cs2 .rs-game-banner__title { width: 242px; height: 90px; }
.rs-game-banner--apex .rs-game-banner__title { width: 159px; height: 97px; }
.rs-game-banner--minecraft .rs-game-banner__title { width: 238px; height: 61px; }
.rs-game-banner--supercell .rs-game-banner__title { width: 114px; height: 94px; }
.rs-game-banner--brawl-stars .rs-game-banner__title { width: 121px; height: 98px; }
.rs-game-banner--chess .rs-game-banner__title { width: 224px; height: 75px; }
.rs-game-banner--minecraft .rs-game-banner__surface::after { background: linear-gradient(90deg,rgba(2,12,7,.82),rgba(2,12,7,.46) 43%,transparent 78%); }
.rs-game-banner--supercell .rs-game-banner__surface::after { background: linear-gradient(90deg,rgba(1,10,37,.83),rgba(1,10,37,.5) 42%,transparent 78%); }
.rs-game-banner--brawl-stars .rs-game-banner__surface::after { background: linear-gradient(90deg,rgba(27,11,1,.84),rgba(27,11,1,.48) 45%,transparent 80%); }
.rs-game-banner--chess .rs-game-banner__surface::after { background: linear-gradient(90deg,rgba(0,20,18,.57),rgba(0,20,18,.28) 53%,transparent 90%); }
.rs-game-banner--minecraft .rs-game-banner__art > img { top: -7px; }
.rs-game-banner--supercell .rs-game-banner__art > img { top: auto; bottom: 0; }
.rs-game-banner--brawl-stars .rs-game-banner__art > img { top: -2px; }
.rs-game-banner--minecraft .rs-game-banner__button { color: #142300; }
.rs-game-banner--brawl-stars .rs-game-banner__subtitle, .rs-game-banner--supercell .rs-game-banner__subtitle { margin-top: 6px; }
.rs-game-banner--brawl-stars .rs-game-banner__count, .rs-game-banner--supercell .rs-game-banner__count { margin-top: 10px; }
.rs-game-banner--brawl-stars .rs-game-banner__button, .rs-game-banner--supercell .rs-game-banner__button { margin-top: 10px; }
.rs-game-banner--cs2 .rs-game-banner__background { filter: grayscale(1) blur(1.6px) brightness(.72); transform: scale(1.015); }
.rs-game-banner--cs2 .rs-game-banner__art > img { filter: grayscale(1) blur(1.4px) brightness(.66); }
.rs-game-banner--cs2 .rs-game-banner__title > img { filter: grayscale(1) brightness(1.15); }
.rs-game-banner--cs2 .rs-game-banner__copy { justify-content: flex-start; padding-top: 20px; }
.rs-game-banner__chains { position: absolute; z-index: 3; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.rs-game-banner__chains > img { display: block; width: 100%; height: 100%; object-fit: fill; }
.rs-game-banner__coming-soon { position: absolute; z-index: 4; top: 60%; left: 28px; display: inline-flex; align-items: center; gap: 8px; min-height: 39px; padding: 9px 16px; border: 1.5px solid #b8bac0; border-radius: 999px; background: rgba(16,14,12,.91); box-shadow: 0 5px 17px rgba(0,0,0,.3); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .03em; line-height: 1; white-space: nowrap; cursor: default; }
.rs-game-banner__coming-soon > svg { width: 15px; height: 15px; flex: 0 0 15px; }
.rs-game-banner__subtitle { max-width: 100%; margin: 10px 0 0; color: #d1cdda; font-size: 13px; font-weight: 500; line-height: 1.55; text-wrap: balance; }
.rs-game-banner__count { margin: 17px 0 0; color: #fff; font-size: 14px; font-weight: 800; line-height: 1.35; }
.rs-game-banner__button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 15px; max-width: 100%; margin-top: 14px; padding: 12px 22px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: #fff; background: linear-gradient(110deg, var(--game-button-start), var(--game-button-end)); font-family: inherit; font-size: 13px; font-weight: 800; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: filter .2s, box-shadow .2s, transform .2s; }
.rs-game-banner__button > svg { display: block; width: 17px; height: 17px; flex: 0 0 17px; transition: transform .2s; }
.rs-game-banner__button:hover { color: #fff; filter: brightness(1.12); box-shadow: 0 6px 22px -9px rgba(var(--game-rgb), .6); }
.rs-game-banner__button:hover > svg { transform: translateX(3px); }
.rs-game-banner__button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.rs-game-banner--steam .rs-game-banner__surface::after { background: linear-gradient(90deg, rgba(4,12,26,.97), rgba(4,12,26,.72) 26%, rgba(4,12,26,.12) 58%, rgba(4,12,26,.55)), linear-gradient(0deg, rgba(4,12,26,.28), transparent 50%); }
.rs-game-banner--steam .rs-game-banner__copy { width: 65%; }
.rs-game-banner--steam .rs-game-banner__title { width: 244px; height: 86px; margin-left: -8px; }
.rs-game-banner--steam .rs-game-banner__art { top: -19px; right: 30px; bottom: auto; width: 272px; height: 272px; overflow: visible; border-radius: 50%; border: 2px solid #149fff; background: #0a203a; box-shadow: 0 0 24px -10px rgba(0,156,255,.65), 0 15px 32px -17px #000; }
.rs-game-banner--steam .rs-game-banner__art > img { top: 0; right: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }
@media (hover: hover) and (pointer: fine) {
  .rs-game-banner:hover .rs-game-banner__surface { border-color: rgba(var(--game-rgb), .95); box-shadow: 0 18px 45px -26px rgba(var(--game-rgb), .35); }
  .rs-game-banner:hover .rs-game-banner__art > img { transform: translateY(-3px); }
  .rs-game-banner--cs2:hover .rs-game-banner__art > img { transform: none; }
}
@media (min-width: 900px) and (max-width: 1119px) {
  .rs-game-banner { height: 256.5px; }
  .rs-game-banner__copy { width: 65%; padding-left: 22px; }
  .rs-game-banner__title { max-width: 190px; }
  .rs-game-banner--valorant .rs-game-banner__title { width: 176px; height: 80px; }
  .rs-game-banner--cs2 .rs-game-banner__title { width: 205px; height: 80px; }
  .rs-game-banner--apex .rs-game-banner__title { width: 145px; height: 89px; }
  .rs-game-banner--minecraft .rs-game-banner__title { width: 197px; height: 55px; }
  .rs-game-banner--supercell .rs-game-banner__title { width: 100px; height: 84px; }
  .rs-game-banner--brawl-stars .rs-game-banner__title { width: 106px; height: 86px; }
  .rs-game-banner--chess .rs-game-banner__title { width: 190px; height: 69px; }
  .rs-game-banner__subtitle { max-width: 222px; font-size: 12px; }
  .rs-game-banner__count { font-size: 13px; }
  .rs-game-banner__button { gap: 12px; padding-inline: 18px; font-size: 12px; }
}
@media (max-width: 899px) {
  .rs-games-page { padding: 126px 24px 64px; }
  .rs-games-page__inner { max-width: 680px; }
  .rs-games-page__head { margin-bottom: 77px; }
  .rs-games-page__grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .rs-game-banner { height: 266px; }
  .rs-game-banner--steam { grid-column: auto; }
  .rs-game-banner--steam .rs-game-banner__art { top: -13px; right: 18px; width: 232px; height: 232px; }
  .rs-game-banner--steam .rs-game-banner__copy { width: 66%; }
  .rs-game-banner--steam .rs-game-banner__title { width: 216px; height: 78px; }
}
@media (max-width: 479px) {
  .rs-games-page { padding: 112px 16px 54px; }
  .rs-games-page__head { margin-bottom: 67px; }
  .rs-games-page__head h1 { font-size: 42px; }
  .rs-games-page__head > p { max-width: 290px; margin-inline: auto; font-size: 13px; }
  .rs-games-page__badge { min-height: 28px; padding: 5px 11px; font-size: 10px; }
  .rs-games-page__grid { row-gap: 40px; }
  .rs-game-banner { --game-overhang: 28px; height: 224px; border-radius: 17px; }
  .rs-game-banner--valorant { --game-overhang: 42px; }
  .rs-game-banner__surface::after { background: linear-gradient(90deg, rgba(15,12,10,.92), rgba(15,12,10,.57) 46%, rgba(15,12,10,.09)); }
  .rs-game-banner__copy { width: 66%; padding: 18px 0 18px 18px; }
  .rs-game-banner__title, .rs-game-banner--fortnite .rs-game-banner__title { width: 168px; height: 56px; }
  .rs-game-banner--valorant .rs-game-banner__title { width: 159px; height: 72px; margin-left: -7px; }
  .rs-game-banner--cs2 .rs-game-banner__title { width: 181px; height: 68px; }
  .rs-game-banner--cs2 .rs-game-banner__chains > img { position: absolute; width: 145%; left: -4%; }
  .rs-game-banner--cs2 .rs-game-banner__copy { padding-top: 30px; }
  .rs-game-banner--cs2 .rs-game-banner__coming-soon { top: 47%; left: 18px; }
  .rs-game-banner__coming-soon { min-height: 34px; gap: 6px; padding: 7px 11px; font-size: 10px; }
  .rs-game-banner__coming-soon > svg { width: 13px; height: 13px; flex-basis: 13px; }
  .rs-game-banner--apex .rs-game-banner__title { width: 121px; height: 78px; }
  .rs-game-banner--minecraft .rs-game-banner__title { width: 172px; height: 46px; }
  .rs-game-banner--supercell .rs-game-banner__title { width: 80px; height: 67px; }
  .rs-game-banner--brawl-stars .rs-game-banner__title { width: 88px; height: 72px; }
  .rs-game-banner--chess .rs-game-banner__title { width: 169px; height: 56px; }
  .rs-game-banner--minecraft { --game-art-width: 57%; --game-art-image-width: 133%; --game-art-image-right: -18%; --game-overhang: 12px; }
  .rs-game-banner--supercell { --game-art-width: 60%; --game-art-image-width: 125%; --game-art-image-right: -20%; --game-overhang: 22px; }
  .rs-game-banner--brawl-stars { --game-art-width: 53%; --game-art-image-width: 119%; --game-art-image-right: -16%; --game-overhang: 18px; }
  .rs-game-banner--minecraft .rs-game-banner__copy, .rs-game-banner--chess .rs-game-banner__copy { width: 71%; }
  .rs-game-banner--supercell .rs-game-banner__count, .rs-game-banner--brawl-stars .rs-game-banner__count { margin-top: 9px; }
  .rs-game-banner__subtitle { max-width: 176px; margin-top: 6px; font-size: 11px; line-height: 1.5; }
  .rs-game-banner__count { margin-top: 13px; font-size: 12px; }
  .rs-game-banner__button { min-height: 42px; gap: 10px; margin-top: 12px; padding: 11px 15px; font-size: 11px; }
  .rs-game-banner__button > svg { width: 15px; height: 15px; flex-basis: 15px; }
  .rs-game-banner--steam .rs-game-banner__copy { width: 70%; }
  .rs-game-banner--steam .rs-game-banner__title { width: 178px; height: 66px; margin-left: -5px; }
  .rs-game-banner--steam .rs-game-banner__art { top: 37px; right: 10px; width: 135px; height: 135px; border-width: 1px; }
  .rs-game-banner--steam .rs-game-banner__subtitle { max-width: 167px; }
}
@media (max-width: 359px) {
  .rs-games-page { padding-inline: 12px; }
  .rs-game-banner__copy { width: 73%; padding-left: 15px; }
  .rs-game-banner--cs2 .rs-game-banner__coming-soon { left: 15px; }
  .rs-game-banner--steam .rs-game-banner__art { right: 7px; width: 108px; height: 108px; top: 51px; }
  .rs-game-banner--steam .rs-game-banner__title { width: 155px; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-game-banner__surface, .rs-game-banner__art > img, .rs-game-banner__button, .rs-game-banner__button > svg { transition: none; }
  .rs-game-banner:hover .rs-game-banner__art > img, .rs-game-banner__button:hover > svg { transform: none; }
}