/* Accounts Category Page Styles */

/* ===== Heading ===== */
.accounts-category-heading {
  max-width: 1080px;
  margin: 0 30px 4px 30px;
  font-family: "Exo", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 26px;
  line-height: 34px;
  letter-spacing: 0;
  text-align: left;
  color: rgba(25, 2, 6, 1);
}

/* global.css's `#center_column h1, #old_center_column h1` (1 id + 1 type)
   otherwise beats the class selector above (1 class) and forces its own
   font-size/font-weight/padding-bottom. Match its id-scoping to win instead
   of reaching for !important. */
#center_column .accounts-category-heading,
#old_center_column .accounts-category-heading {
  font-size: 26px;
  font-weight: 400;
  padding-bottom: 0;
}

.accounts-category-subheading {
  max-width: 1080px;
  margin: 0 30px 60px 30px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0;
  text-align: left;
  color: rgba(25, 2, 6, 1);
}

/* ===== Games Grid 4x2 ===== */
.accounts-category-games-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1080px;
  margin: 0 30px 40px 30px;
}

/* ===== Game Card ===== */
.accounts-category-game-card {
  position: relative;
  text-decoration: none;
  display: block;
  border-radius: 12px;
  overflow: visible;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.accounts-category-game-card-bg {
  position: relative;
  width: 100%;
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 6px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  /* 5th layer (0 0 = invisible) preloads the -hover.svg photo below so the
     browser has it fetched/decoded before hover ever happens - otherwise
     the first hover briefly shows the solid fallback fill while the new
     image loads. */
  background-size: auto, auto, cover, auto, 0 0;
}

/* Overlay artwork - a sibling of accounts-category-game-card-bg (not nested
   inside it) so it can spill outside the card while the gradient box above
   still clips its own rounded corners */
.accounts-category-game-card-character {
  position: absolute;
  bottom: 0;
  height: 103%;
  max-height: 250px;
  width: auto;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
  transform-origin: bottom;
}

.accounts-category-game-card:hover .accounts-category-game-card-character {
  transform: scale(1.1);
}

/* Cards 1-3 grow toward the top-left on hover instead of straight up */
.accounts-character-grow-left {
  transform-origin: bottom right;
}

/* Per-card horizontal offset - each game's artwork is cropped/aligned
   differently, so `right` needs to be tuned individually per card */
.accounts-char-pokemon {
  right: -18px;
}
.accounts-char-pokemon-tcg {
  right: -2px;
}
.accounts-char-league-of-legends {
  right: -19px;
}
.accounts-char-fortnite {
  right: -18px;
}
.accounts-char-dragon-ball-legends {
  right: -14px;
}
.accounts-char-raid-shadow-legends {
  right: -16px;
}
.accounts-char-valorant {
  right: -11px;
}
.accounts-char-watcher-of-realm {
  right: -18px;
}

.accounts-category-game-card-content {
  position: relative;
  z-index: 2;
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 0px 0px 0px 12px;
  background: linear-gradient(90deg, #190206 0%, rgba(25, 2, 6, 0) 100%);
}

.accounts-category-game-card-header {
  display: flex;
  align-items: center;
  gap: 4px;
}

.accounts-category-game-card-title {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  font-family: "Exo", sans-serif;
}

/* Wraps one or two buttons - a single button fills the row (via the 100%
   flex-basis below); add --double when there are two so they split 50/50,
   matching the pattern already used on the WoW category page. */
.accounts-category-game-card-buttons {
  display: flex;
  gap: 8px;
  width: 100%;
}

.accounts-category-game-card-buttons--double .accounts-category-game-card-button {
  flex: 1 1 50%;
}

.accounts-category-game-card-button {
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 100%;
  min-width: 0;
  min-height: 34px;
  padding: 6px 1px;
  border: none;
  border-radius: 4px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Exo", sans-serif;
  cursor: pointer;
  transition:
    background 0.3s ease,
    transform 0.2s ease;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(94.65deg, rgba(215, 138, 35, 1) -10.47%, rgba(136, 0, 0, 1) 97.39%);
}

.accounts-category-game-card-button:hover,
.accounts-category-game-card:hover .accounts-category-game-card-button {
  background: linear-gradient(274.65deg, rgba(215, 138, 35, 1) -10.47%, rgba(136, 0, 0, 1) 97.39%);
  color: #ffffff;
  transform: scale(1.01);
}

/* Label font-size scales with the button's OWN rendered width (via
   container queries), not the viewport - so it stays correct whether the
   button is alone (100%), one of two (~50%), or one of three (~33%) in the
   row. Keeps text on one line without discrete breakpoint jumps. Very long
   labels in a 2-3 button row may still need shorter copy - a uniform cqi
   scale can't fit arbitrary text length perfectly. */
.accounts-category-game-card-button-label {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  font-size: clamp(6px, 12cqi, 16px);
}

/* Exactly 2 buttons - labels here tend to be longer ("Buy Accounts Now"),
   so a lower ceiling is needed to reliably keep them from overflowing. */
.accounts-category-game-card-buttons:has(> .accounts-category-game-card-button:nth-child(2):last-child)
  .accounts-category-game-card-button-label {
  font-size: clamp(6px, 11cqi, 16px);
}

/* Exactly 3 buttons - labels here are short single words ("Accounts"),
   so a higher ceiling still fits and reads better than the default. */
.accounts-category-game-card-buttons:has(> .accounts-category-game-card-button:nth-child(3):last-child)
  .accounts-category-game-card-button-label {
  font-size: clamp(6px, 20cqi, 16px);
}

/* ===== Background Gradient Variants ===== */
/* Layer order (top -> bottom): diagonal color tint (kept fully transparent,
   both at rest and on hover), bottom fade, game background photo, dark
   backing fill. CSS stacks the FIRST layer listed on top, so the
   semi-transparent tint/fade must come before the (fully opaque) photo or
   they'd be hidden behind it. On hover, only the photo layer swaps to its
   `-hover` variant - no color/tint change. Uses background-image (not the
   `background` shorthand) so the base class's background-size/position/
   repeat aren't reset by these rules. */

.accounts-bg-pokemon {
  background-image:
    linear-gradient(270deg, rgba(0, 255, 166, 0) 0%, rgba(0, 121, 18, 0) 100%),
    linear-gradient(180deg, rgba(25, 2, 6, 0) 50%, #190206 80%),
    url("/themes/default/css/components/accounts-category/img/pokemon-go-background.svg"),
    linear-gradient(0deg, #190206, #190206),
    url("/themes/default/css/components/accounts-category/img/pokemon-go-background-hover.svg");
}
.accounts-category-game-card:hover .accounts-bg-pokemon {
  background-image:
    linear-gradient(270deg, rgba(0, 255, 166, 0) 0%, rgba(0, 121, 18, 0) 100%),
    linear-gradient(180deg, rgba(25, 2, 6, 0) 50%, #190206 80%),
    url("/themes/default/css/components/accounts-category/img/pokemon-go-background-hover.svg"),
    linear-gradient(0deg, #190206, #190206);
}

.accounts-bg-pokemon-tcg {
  background-image:
    linear-gradient(270deg, rgba(113, 103, 255, 0) 0%, rgba(17, 0, 255, 0) 100%),
    linear-gradient(180deg, rgba(25, 2, 6, 0) 50%, #190206 80%),
    url("/themes/default/css/components/accounts-category/img/pokemon-tcg-pocket-background.svg"),
    linear-gradient(0deg, #190206, #190206),
    url("/themes/default/css/components/accounts-category/img/pokemon-tcg-pocket-background-hover.svg");
}
.accounts-category-game-card:hover .accounts-bg-pokemon-tcg {
  background-image:
    linear-gradient(270deg, rgba(113, 103, 255, 0) 0%, rgba(17, 0, 255, 0) 100%),
    linear-gradient(180deg, rgba(25, 2, 6, 0) 50%, #190206 80%),
    url("/themes/default/css/components/accounts-category/img/pokemon-tcg-pocket-background-hover.svg"),
    linear-gradient(0deg, #190206, #190206);
}

.accounts-bg-league-of-legends {
  background-image:
    linear-gradient(270deg, rgba(191, 0, 255, 0) 0%, rgba(94, 0, 255, 0) 100%),
    linear-gradient(180deg, rgba(25, 2, 6, 0) 50%, #190206 80%),
    url("/themes/default/css/components/accounts-category/img/league-of-legends-background.svg"),
    linear-gradient(0deg, #190206, #190206),
    url("/themes/default/css/components/accounts-category/img/league-of-legends-background-hover.svg");
}
.accounts-category-game-card:hover .accounts-bg-league-of-legends {
  background-image:
    linear-gradient(270deg, rgba(191, 0, 255, 0) 0%, rgba(94, 0, 255, 0) 100%),
    linear-gradient(180deg, rgba(25, 2, 6, 0) 50%, #190206 80%),
    url("/themes/default/css/components/accounts-category/img/league-of-legends-background-hover.svg"),
    linear-gradient(0deg, #190206, #190206);
}

.accounts-bg-fortnite {
  background-image:
    linear-gradient(270deg, rgba(0, 217, 255, 0) 0%, rgba(0, 115, 135, 0) 100%),
    linear-gradient(180deg, rgba(25, 2, 6, 0) 50%, #190206 80%),
    url("/themes/default/css/components/accounts-category/img/fortnite-background.svg"),
    linear-gradient(0deg, #190206, #190206),
    url("/themes/default/css/components/accounts-category/img/fortnite-background-hover.svg");
}
.accounts-category-game-card:hover .accounts-bg-fortnite {
  background-image:
    linear-gradient(270deg, rgba(0, 217, 255, 0) 0%, rgba(0, 115, 135, 0) 100%),
    linear-gradient(180deg, rgba(25, 2, 6, 0) 50%, #190206 80%),
    url("/themes/default/css/components/accounts-category/img/fortnite-background-hover.svg"),
    linear-gradient(0deg, #190206, #190206);
}

.accounts-bg-dragon-ball-legends {
  background-image:
    linear-gradient(270deg, rgba(255, 128, 0, 0) 0%, rgba(255, 60, 0, 0) 100%),
    linear-gradient(180deg, rgba(25, 2, 6, 0) 50%, #190206 80%),
    url("/themes/default/css/components/accounts-category/img/dragon-ball-legends-background.svg"),
    linear-gradient(0deg, #190206, #190206),
    url("/themes/default/css/components/accounts-category/img/dragon-ball-legends-background-hover.svg");
}
.accounts-category-game-card:hover .accounts-bg-dragon-ball-legends {
  background-image:
    linear-gradient(270deg, rgba(255, 128, 0, 0) 0%, rgba(255, 60, 0, 0) 100%),
    linear-gradient(180deg, rgba(25, 2, 6, 0) 50%, #190206 80%),
    url("/themes/default/css/components/accounts-category/img/dragon-ball-legends-background-hover.svg"),
    linear-gradient(0deg, #190206, #190206);
}

.accounts-bg-raid-shadow-legends {
  background-image:
    linear-gradient(270deg, rgba(255, 220, 103, 0) 0%, rgba(191, 124, 0, 0) 100%),
    linear-gradient(180deg, rgba(25, 2, 6, 0) 50%, #190206 80%),
    url("/themes/default/css/components/accounts-category/img/raid-shadow-legends-background.svg"),
    linear-gradient(0deg, #190206, #190206),
    url("/themes/default/css/components/accounts-category/img/raid-shadow-legends-background-hover.svg");
}
.accounts-category-game-card:hover .accounts-bg-raid-shadow-legends {
  background-image:
    linear-gradient(270deg, rgba(255, 220, 103, 0) 0%, rgba(191, 124, 0, 0) 100%),
    linear-gradient(180deg, rgba(25, 2, 6, 0) 50%, #190206 80%),
    url("/themes/default/css/components/accounts-category/img/raid-shadow-legends-background-hover.svg"),
    linear-gradient(0deg, #190206, #190206);
}

.accounts-bg-valorant {
  background-image:
    linear-gradient(270deg, rgba(229, 45, 45, 0) 0%, rgba(33, 11, 78, 0) 100%),
    linear-gradient(180deg, rgba(25, 2, 6, 0) 50%, #190206 80%),
    url("/themes/default/css/components/accounts-category/img/valorant-background.svg"),
    linear-gradient(0deg, #190206, #190206),
    url("/themes/default/css/components/accounts-category/img/valorant-background-hover.svg");
}
.accounts-category-game-card:hover .accounts-bg-valorant {
  background-image:
    linear-gradient(270deg, rgba(229, 45, 45, 0) 0%, rgba(33, 11, 78, 0) 100%),
    linear-gradient(180deg, rgba(25, 2, 6, 0) 50%, #190206 80%),
    url("/themes/default/css/components/accounts-category/img/valorant-background-hover.svg"),
    linear-gradient(0deg, #190206, #190206);
}

.accounts-bg-watcher-of-realm {
  background-image:
    linear-gradient(270deg, rgba(235, 0, 0, 0) 0%, rgba(78, 0, 0, 0) 100%),
    linear-gradient(180deg, rgba(25, 2, 6, 0) 50%, #190206 80%),
    url("/themes/default/css/components/accounts-category/img/watcher-of-realms-background.svg"),
    linear-gradient(0deg, #190206, #190206),
    url("/themes/default/css/components/accounts-category/img/watcher-of-realms-background-hover.svg");
}
.accounts-category-game-card:hover .accounts-bg-watcher-of-realm {
  background-image:
    linear-gradient(270deg, rgba(235, 0, 0, 0) 0%, rgba(78, 0, 0, 0) 100%),
    linear-gradient(180deg, rgba(25, 2, 6, 0) 50%, #190206 80%),
    url("/themes/default/css/components/accounts-category/img/watcher-of-realms-background-hover.svg"),
    linear-gradient(0deg, #190206, #190206);
}

/* ===== Responsive Styles ===== */

/* Tablet - keep 4 columns, tighten padding */
@media only screen and (max-width: 1024px) {
  .accounts-category-games-grid {
    grid-template-columns: repeat(4, 1fr);
    padding: 0 10px;
  }

  .accounts-category-game-card-button {
    padding: 10px 0px;
  }
}

@media only screen and (max-width: 990px) {
  .accounts-category-game-card-title {
    font-size: 11px;
  }

  .accounts-category-games-grid {
    gap: 14px;
    margin: 0 0px 40px 0px;
  }
}

/* Smaller tablet - 2 columns */
@media only screen and (max-width: 767px) {
  .accounts-category-games-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .accounts-category-game-card-bg {
    height: 180px;
  }

  .accounts-category-game-card-title {
    font-size: 16px;
  }

  .accounts-category-game-card-button {
    padding: 8px 0px;
  }
}

/* Mobile - 1 column */
@media only screen and (max-width: 500px) {
  .accounts-category-games-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
    padding: 0 16px;
  }

  .accounts-category-game-card-bg {
    height: 160px;
  }
}