.arcade-banner .banner-art {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-block-size: clamp(7rem, 10.546875vw, 18rem);
  background: #2a224b url("../ui-release-art-07363e3e80db/header.webp") center / cover no-repeat;
}

.arcade-banner .masthead {
  color: #fff;
  background: linear-gradient(180deg, rgb(20 13 37 / 83%), rgb(20 13 37 / 38%), transparent);
  border-color: transparent;
}

.arcade-banner .brand {
  color: #fff;
  text-shadow: 0 1px 5px #170e30;
}

.catalog-controls {
  background: rgb(25 17 47 / 82%);
  border-block: 1px solid rgb(255 255 255 / 18%);
}

.catalog-controls .filters {
  mask-image: none;
}

.arcade-banner :is(button, a):focus-visible,
.arcade-banner .search:focus-within {
  outline: 2px solid #ffe099;
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .arcade-banner .banner-art {
    min-block-size: 11rem;
    background-position: 50% center;
  }
}

@media (max-width: 480px) {
  .arcade-banner .brand-name,
  .arcade-banner #brand-name {
    white-space: normal;
    line-height: 1.15;
  }

  .arcade-banner .mark,
  .arcade-banner .language {
    flex-shrink: 0;
  }
}

.arcade-banner {
  --control-fill: rgb(29 22 57 / 89%);
  --control-border: #a89ac6;
  --control-text: #faf6ff;
  --control-muted: #ded5f1;
}

.arcade-banner .masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(11rem, 18vw, 18rem) auto;
  grid-template-areas: "brand search language";
}

.arcade-banner .brand { grid-area: brand; }
.arcade-banner .search {
  grid-area: search;
  inline-size: 100%;
  max-inline-size: none;
  margin: 0;
}
.arcade-banner .language {
  grid-area: language;
  margin: 0;
  justify-self: end;
}
.arcade-banner :is(.search, .language) {
  background: var(--control-fill);
  border-color: var(--control-border);
}
.arcade-banner :is(.search input, .language button:hover) { color: var(--control-text); }
.arcade-banner :is(.search input::placeholder, .language button, .clear) {
  color: var(--control-muted);
}
.arcade-banner .search-icon { stroke: var(--control-muted); }
.arcade-banner .language [aria-pressed="true"] {
  background: #d8c9ff;
  color: #211638;
}
.catalog-controls { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 720px) {
  .arcade-banner .masthead {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand language" "search search";
    gap: 8px 12px;
  }
}

.catalog-controls .filters {
  scrollbar-color: rgb(216 201 255 / 42%) transparent;
}

.catalog-controls .filters button {
  border-color: transparent;
  background: transparent;
  color: var(--control-text);
}


.catalog-controls .filters button:hover {
  background: rgb(216 201 255 / 14%);
}

.catalog-controls .filters button[aria-pressed="true"] {
  background: rgb(216 201 255 / 24%);
  border-color: rgb(216 201 255 / 38%);
  color: var(--control-text);
}


.catalog-controls .filters button:focus-visible {
  outline-offset: -3px;
}

@media (forced-colors: active) {
  .catalog-controls .filters button[aria-pressed="true"] {
    border-color: Highlight;
  }
}

.catalog-controls .filters button::after { content: none; }

.catalog-controls {
  background: var(--paper);
  border-block: 0;
  border-block-end: 1px solid var(--line);
  padding-block: 9px 5px;
}

.catalog-controls .filters {
  scrollbar-color: var(--line-strong) transparent;
}

.catalog-controls .filters button {
  border-radius: 8px;
  color: var(--ink-2);
}

.catalog-controls .filters button:hover {
  background: var(--surface);
}

.catalog-controls .filters .fx-pill {
  display: none;
}

.catalog-controls .filters button[aria-pressed="true"],
.catalog-controls .filters button[aria-pressed="true"]:hover {
  background: #e4d9fa;
  border-color: transparent;
  color: #2b1a49;
}

.catalog-controls .filters button:focus-visible {
  outline-color: var(--accent);
  outline-offset: -3px;
}

@media (forced-colors: active) {
  .catalog-controls .filters button[aria-pressed="true"],
  .catalog-controls .filters button[aria-pressed="true"]:hover {
    background: Highlight;
    border-color: Highlight;
    color: HighlightText;
  }
}

.catalog-controls {
  position: sticky;
  inset-block-start: 0;
  z-index: 5;
}

.arcade-banner :is(.search, .language) {
  --control-text: #241a36;
  --control-muted: #53446e;
  --control-fill: rgb(249 246 255 / 88%);
  --control-border: rgb(255 255 255 / 56%);
}

.arcade-banner .language button[aria-pressed="false"]:hover {
  background: rgb(216 201 255 / 45%);
}

.arcade-banner .language button[aria-pressed="true"] {
  background: #d8c9ff;
  color: #241a36;
}