/* Shared card-game surface tokens for card tiles and search toolbar actions. */

:root {
  --fdc-game-card-min-width: 132px;
  --fdc-game-card-gap: 12px;
  --fdc-game-card-aspect: 1000 / 1397;
  --fdc-game-card-padding-top: 139.7%;
  --fdc-mobile-filter-fab-size: 56px;
  --fdc-mobile-filter-fab-offset: 16px;
  --fdc-mobile-filter-fab-shadow: 0 18px 34px rgba(15, 23, 42, 0.22);
  --fdc-mobile-filter-fab-icon-size: 20px;
  --fdc-toolbar-action-lift-distance: -1px;
  --fdc-toolbar-action-hover-border: color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 28%, white);
  --fdc-toolbar-action-hover-bg: color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 8%, white);
  --fdc-toolbar-action-hover-color: var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6)));
  --fdc-toolbar-action-hover-shadow: 0 10px 22px rgba(59, 130, 246, 0.12);
  --fdc-toolbar-action-primary-shadow: 0 12px 24px color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 24%, transparent);
  --fdc-filter-trigger-hover-border: var(--fdc-toolbar-action-hover-border);
  --fdc-filter-trigger-hover-bg: var(--fdc-toolbar-action-hover-bg);
  --fdc-filter-trigger-hover-color: var(--fdc-toolbar-action-hover-color);
  --fdc-filter-trigger-hover-shadow: 0 10px 22px color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 14%, transparent);
  --fdc-filter-trigger-active-border: var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6)));
  --fdc-filter-trigger-active-bg: color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 10%, white);
  --fdc-filter-trigger-active-color: var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6)));
  --fdc-filter-trigger-active-shadow: 0 12px 24px color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 18%, transparent);
  --fdc-sort-trigger-hover-border: color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 18%, white);
  --fdc-sort-trigger-hover-bg: color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 5%, white);
  --fdc-sort-trigger-hover-color: inherit;
  --fdc-sort-trigger-hover-shadow: 0 8px 18px color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 10%, transparent);
}

:root[data-theme='dark'] {
  --fdc-toolbar-action-hover-border: color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 44%, transparent);
  --fdc-toolbar-action-hover-bg: color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 18%, transparent);
  --fdc-toolbar-action-hover-color: #dbeafe;
  --fdc-toolbar-action-hover-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
  --fdc-toolbar-action-primary-shadow: 0 16px 30px color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 28%, transparent);
  --fdc-filter-trigger-hover-border: color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 40%, transparent);
  --fdc-filter-trigger-hover-bg: color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 18%, transparent);
  --fdc-filter-trigger-hover-color: #dbeafe;
  --fdc-filter-trigger-hover-shadow: 0 12px 28px rgba(15, 23, 42, 0.26);
  --fdc-filter-trigger-active-border: color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 54%, transparent);
  --fdc-filter-trigger-active-bg: color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 24%, transparent);
  --fdc-filter-trigger-active-color: #dbeafe;
  --fdc-filter-trigger-active-shadow: 0 14px 30px rgba(15, 23, 42, 0.28);
  --fdc-sort-trigger-hover-border: color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 24%, transparent);
  --fdc-sort-trigger-hover-bg: color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 10%, transparent);
  --fdc-sort-trigger-hover-color: inherit;
  --fdc-sort-trigger-hover-shadow: 0 10px 22px rgba(15, 23, 42, 0.22);
  --fdc-mobile-filter-fab-shadow: 0 18px 34px rgba(2, 6, 23, 0.42);
}

.fdc-toolbar-action-btn,
.filter-trigger,
.format-toggle .format-chip,
.toolbar-format .format-chip,
.toolbar-format-inline .format-chip {
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.fdc-toolbar-action-btn .toolbar-filter-toggle-caret {
  color: currentColor;
  transition: color 0.18s ease;
}

.fdc-toolbar-action-btn:hover:not(:disabled),
.fdc-toolbar-action-btn:focus-visible,
.filter-trigger:hover:not([disabled]),
.filter-trigger:focus-visible {
  transform: translateY(var(--fdc-toolbar-action-lift-distance));
}

.btn.fdc-toolbar-action-btn.fdc-toolbar-secondary-btn:hover:not(:disabled),
.btn.fdc-toolbar-action-btn.fdc-toolbar-secondary-btn:focus-visible,
:root[data-theme='dark'] .btn.fdc-toolbar-action-btn.fdc-toolbar-secondary-btn:hover:not(:disabled),
:root[data-theme='dark'] .btn.fdc-toolbar-action-btn.fdc-toolbar-secondary-btn:focus-visible,
.fdc-toolbar-action-btn.fdc-toolbar-secondary-btn:hover:not(:disabled),
.fdc-toolbar-action-btn.fdc-toolbar-secondary-btn:focus-visible {
  border-color: var(--fdc-toolbar-action-hover-border);
  background: var(--fdc-toolbar-action-hover-bg);
  color: var(--fdc-toolbar-action-hover-color);
  box-shadow: var(--fdc-toolbar-action-hover-shadow);
}

.btn.fdc-toolbar-action-btn.fdc-toolbar-secondary-btn[aria-expanded='true'],
.btn.fdc-toolbar-action-btn.fdc-toolbar-secondary-btn.is-active,
:root[data-theme='dark'] .btn.fdc-toolbar-action-btn.fdc-toolbar-secondary-btn[aria-expanded='true'],
:root[data-theme='dark'] .btn.fdc-toolbar-action-btn.fdc-toolbar-secondary-btn.is-active,
.fdc-toolbar-action-btn.fdc-toolbar-secondary-btn[aria-expanded='true'],
.fdc-toolbar-action-btn.fdc-toolbar-secondary-btn.is-active {
  border-color: var(--fdc-filter-trigger-active-border);
  background: var(--fdc-filter-trigger-active-bg);
  color: var(--fdc-filter-trigger-active-color);
  box-shadow: var(--fdc-filter-trigger-active-shadow);
}

.btn.fdc-toolbar-action-btn.fdc-search-submit:hover:not(:disabled),
.btn.fdc-toolbar-action-btn.fdc-search-submit:focus-visible,
.btn.fdc-toolbar-action-btn.primary:hover:not(:disabled),
.btn.fdc-toolbar-action-btn.primary:focus-visible,
:root[data-theme='dark'] .btn.fdc-toolbar-action-btn.fdc-search-submit:hover:not(:disabled),
:root[data-theme='dark'] .btn.fdc-toolbar-action-btn.fdc-search-submit:focus-visible,
:root[data-theme='dark'] .btn.fdc-toolbar-action-btn.primary:hover:not(:disabled),
:root[data-theme='dark'] .btn.fdc-toolbar-action-btn.primary:focus-visible,
.fdc-toolbar-action-btn.fdc-search-submit:hover:not(:disabled),
.fdc-toolbar-action-btn.fdc-search-submit:focus-visible,
.fdc-toolbar-action-btn.primary:hover:not(:disabled),
.fdc-toolbar-action-btn.primary:focus-visible {
  border-color: var(--primary-strong, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #2563eb))));
  background: var(--primary-strong, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #2563eb))));
  color: #fff;
  box-shadow: var(--fdc-toolbar-action-primary-shadow);
}

.fdc-toolbar-action-btn:focus-visible {
  outline: 3px solid var(--fdc-focus-ring-color, rgba(59, 130, 246, 0.34));
  outline-offset: 1px;
}

.filter-trigger:focus-visible,
.toolbar-sort-button:focus-visible {
  outline: 3px solid var(--fdc-focus-ring-color, rgba(59, 130, 246, 0.34));
  outline-offset: 1px;
}

.btn.filter-trigger:not(.toolbar-sort-button):not(.rune-slot-trigger):hover:not([disabled]),
.btn.filter-trigger:not(.toolbar-sort-button):not(.rune-slot-trigger):focus-visible,
.filter-trigger:not(.toolbar-sort-button):not(.rune-slot-trigger):hover:not([disabled]),
.filter-trigger:not(.toolbar-sort-button):not(.rune-slot-trigger):focus-visible {
  border-color: var(--fdc-filter-trigger-hover-border);
  background: var(--fdc-filter-trigger-hover-bg);
  color: var(--fdc-filter-trigger-hover-color);
  box-shadow: var(--fdc-filter-trigger-hover-shadow);
}

.btn.filter-trigger:not(.toolbar-sort-button):not(.rune-slot-trigger)[aria-expanded='true'],
.btn.filter-trigger:not(.toolbar-sort-button):not(.rune-slot-trigger).is-active,
.filter-trigger:not(.toolbar-sort-button):not(.rune-slot-trigger)[aria-expanded='true'],
.filter-trigger:not(.toolbar-sort-button):not(.rune-slot-trigger).is-active {
  border-color: var(--fdc-filter-trigger-active-border);
  background: var(--fdc-filter-trigger-active-bg);
  color: var(--fdc-filter-trigger-active-color);
  box-shadow: var(--fdc-filter-trigger-active-shadow);
}

.btn.filter-trigger:not(.toolbar-sort-button):not(.rune-slot-trigger)[aria-expanded='true'] .filter-trigger-caret,
.filter-trigger:not(.toolbar-sort-button):not(.rune-slot-trigger)[aria-expanded='true'] .filter-trigger-caret {
  transform: rotate(180deg);
  color: var(--fdc-dropdown-caret-active-color, currentColor);
}

.filter-trigger:not(.toolbar-sort-button)[disabled]:hover {
  background: var(--fdc-filter-trigger-disabled-bg, #f3f6fb);
  border-color: var(--hs-line, var(--fdc-color-border-strong, #c3d4e8));
  color: inherit;
  box-shadow: none;
  transform: none;
}

.btn.filter-trigger.toolbar-sort-button:hover:not([disabled]),
.btn.filter-trigger.toolbar-sort-button:focus-visible,
.toolbar-sort-dropdown.is-open .btn.filter-trigger.toolbar-sort-button,
.btn.filter-trigger.toolbar-sort-button[aria-expanded='true'],
.toolbar-sort-dropdown #sortFilterButton.toolbar-sort-button:hover:not([disabled]),
.toolbar-sort-dropdown #sortFilterButton.toolbar-sort-button:focus-visible,
.toolbar-sort-dropdown.is-open #sortFilterButton.toolbar-sort-button,
#sortFilterButton.toolbar-sort-button:hover:not([disabled]),
#sortFilterButton.toolbar-sort-button:focus-visible,
#sortFilterButton.toolbar-sort-button[aria-expanded='true'],
#sortFilterButton.toolbar-sort-button.is-active,
.toolbar-sort-dropdown #boardSortButton.toolbar-sort-button:hover:not([disabled]),
.toolbar-sort-dropdown #boardSortButton.toolbar-sort-button:focus-visible,
.toolbar-sort-dropdown.is-open #boardSortButton.toolbar-sort-button,
#boardSortButton.toolbar-sort-button:hover:not([disabled]),
#boardSortButton.toolbar-sort-button:focus-visible,
#boardSortButton.toolbar-sort-button[aria-expanded='true'],
#boardSortButton.toolbar-sort-button.is-active,
.toolbar-sort-button:hover:not([disabled]),
.toolbar-sort-button:focus-visible,
.toolbar-sort-dropdown.is-open .toolbar-sort-button,
.toolbar-sort-button[aria-expanded='true'] {
  border-color: var(--fdc-sort-trigger-hover-border);
  background: var(--fdc-sort-trigger-hover-bg);
  color: var(--fdc-sort-trigger-hover-color);
  box-shadow: var(--fdc-sort-trigger-hover-shadow);
}

@media (max-width: 640px) {
  body.hs-mobile-filters-open {
    overflow: hidden;
  }

  .fdc-mobile-filter-fab {
    position: fixed !important;
    left: max(var(--fdc-mobile-filter-fab-offset), calc(env(safe-area-inset-left, 0px) + 12px));
    bottom: max(var(--fdc-mobile-filter-fab-offset), calc(env(safe-area-inset-bottom, 0px) + 12px));
    z-index: 2140;
    width: var(--fdc-mobile-filter-fab-size) !important;
    min-width: var(--fdc-mobile-filter-fab-size) !important;
    height: var(--fdc-mobile-filter-fab-size) !important;
    min-height: var(--fdc-mobile-filter-fab-size) !important;
    padding: 0 !important;
    border-radius: 999px !important;
    justify-content: center !important;
    gap: 0 !important;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 18%, #d7e3f4) !important;
    background: color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 4%, #fff) !important;
    color: var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #2563eb))) !important;
    box-shadow: var(--fdc-mobile-filter-fab-shadow);
    font-size: 0 !important;
    line-height: 0 !important;
    transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
  }

  body.hs-card-modal-open .fdc-mobile-filter-fab,
  body:has(.shared-card-detail-modal.is-open) .fdc-mobile-filter-fab,
  body:has(.shared-card-detail-modal.open) .fdc-mobile-filter-fab,
  body:has(.shared-card-detail-modal.active) .fdc-mobile-filter-fab {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate3d(0, 10px, 0);
  }

  .fdc-mobile-filter-fab:hover:not([disabled]),
  .fdc-mobile-filter-fab:focus-visible {
    border-color: color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 32%, #d7e3f4) !important;
    background: color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 10%, #fff) !important;
    color: var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #2563eb))) !important;
  }

  .fdc-mobile-filter-fab[aria-expanded='true'],
  .fdc-mobile-filter-fab.is-active {
    border-color: var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #2563eb))) !important;
    background: var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #2563eb))) !important;
    color: #fff !important;
  }

  .fdc-mobile-filter-fab::before {
    content: '';
    display: block;
    flex: 0 0 auto;
    width: var(--fdc-mobile-filter-fab-icon-size);
    height: var(--fdc-mobile-filter-fab-icon-size);
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5.25A2.25 2.25 0 0 1 5.25 3h13.5a2.25 2.25 0 0 1 1.676 3.75L14.25 13.69v4.56a2.25 2.25 0 0 1-3.62 1.785l-1.5-1.125a2.25 2.25 0 0 1-.9-1.8v-3.42L3.574 6.75A2.25 2.25 0 0 1 3 5.25Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5.25A2.25 2.25 0 0 1 5.25 3h13.5a2.25 2.25 0 0 1 1.676 3.75L14.25 13.69v4.56a2.25 2.25 0 0 1-3.62 1.785l-1.5-1.125a2.25 2.25 0 0 1-.9-1.8v-3.42L3.574 6.75A2.25 2.25 0 0 1 3 5.25Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .fdc-mobile-filter-fab > span,
  .fdc-mobile-filter-fab .toolbar-filter-toggle-caret,
  .fdc-mobile-filter-fab .filter-trigger-caret,
  .fdc-mobile-filter-fab .filter-trigger-label,
  .fdc-mobile-filter-fab .sort-direction-indicator {
    display: none !important;
  }

  .fdc-mobile-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2120;
    background: rgba(13, 24, 35, 0.58);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }

  .fdc-mobile-filter-backdrop[hidden] {
    display: block !important;
    opacity: 0;
    pointer-events: none;
  }

  .fdc-mobile-filter-backdrop:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
  }

  .fdc-mobile-filter-sheet {
    position: fixed !important;
    left: 12px;
    right: 12px;
    top: 76px;
    z-index: 2130;
    max-height: calc(100dvh - 92px);
    overflow: auto;
    border-radius: 24px;
    box-shadow: 0 28px 44px rgba(15, 23, 42, 0.28);
  }
}

.format-toggle .format-chip:hover:not(:disabled),
.format-toggle .format-chip:focus-visible,
.toolbar-format .format-chip:hover:not(:disabled),
.toolbar-format .format-chip:focus-visible,
.toolbar-format-inline .format-chip:hover:not(:disabled),
.toolbar-format-inline .format-chip:focus-visible {
  transform: translateY(var(--fdc-toolbar-action-lift-distance));
  border-color: var(--fdc-toolbar-action-hover-border);
  background: var(--fdc-toolbar-action-hover-bg);
  color: var(--fdc-toolbar-action-hover-color);
  box-shadow: var(--fdc-toolbar-action-hover-shadow);
}

.format-toggle .format-chip.is-active:hover:not(:disabled),
.format-toggle .format-chip.is-active:focus-visible,
.toolbar-format .format-chip.is-active:hover:not(:disabled),
.toolbar-format .format-chip.is-active:focus-visible,
.toolbar-format-inline .format-chip.is-active:hover:not(:disabled),
.toolbar-format-inline .format-chip.is-active:focus-visible {
  transform: translateY(var(--fdc-toolbar-action-lift-distance));
  border-color: var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6)));
  background: var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6)));
  color: #fff;
  box-shadow: var(--fdc-toolbar-action-primary-shadow);
}

.active-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
  background: transparent;
  flex-wrap: wrap;
  border: none;
}

.active-filters[hidden] {
  display: none !important;
}

.active-filter-list {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
}

.active-filter-chip {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 24%, #bdd4f2);
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 10%, #e9f2ff);
  color: var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #2563eb)));
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  max-width: 100%;
  white-space: nowrap;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.active-filter-chip:hover,
.active-filter-chip:focus-visible {
  border-color: color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 32%, #bdd4f2);
  background: color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 14%, #e9f2ff);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 16%, transparent);
}

.active-filter-chip:focus-visible {
  outline: 3px solid var(--fdc-focus-ring-color, rgba(59, 130, 246, 0.26));
  outline-offset: 1px;
}

.active-filter-chip .text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}

.active-filter-chip .close {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}

:root[data-theme='dark'] .active-filters {
  background: transparent;
  border-color: transparent;
}

:root[data-theme='dark'] .active-filter-chip {
  background: color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 18%, transparent);
  border-color: color-mix(in srgb, var(--primary, var(--fdc-shell-primary, var(--fdc-color-accent, #3b82f6))) 30%, transparent);
  color: #dbeafe;
}

.active-filter-chip.is-locked:hover,
.active-filter-chip.is-locked:focus-visible {
  border-color: #f5c089;
  background: #fff1df;
  box-shadow: none;
  outline: none;
}

.class-chip:hover .class-chip__icon,
.class-chip:focus-visible .class-chip__icon {
  border-radius: 999px;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.96),
    0 0 0 5px color-mix(in srgb, var(--hs-selection-ring-color) 52%, transparent);
  color: var(--hs-sub, var(--fdc-color-text-sub, #64748b));
}

.builder-card-button:hover .builder-card-preview img {
  transform: translateY(-2px);
  box-shadow: none;
}

.builder-card-button:focus-visible .builder-card-preview img {
  outline: 2px solid var(--fdc-focus-ring-color);
  outline-offset: 2px;
}

.fdc-game-toolbar-row {
  width: 100%;
  max-width: none;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.fdc-game-toolbar-row > * {
  min-width: 0;
}

.fdc-game-toolbar-row > .fdc-search-shell {
  flex: 1 1 360px;
  width: min(100%, 360px);
  max-width: 360px;
  min-width: 0;
  min-height: 44px;
}

.fdc-game-toolbar-row > .fdc-search-shell :is(.fdc-game-search-input, .fdc-search-input, .search-input, .field, .search, .input) {
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 44px;
  min-height: 44px;
}

.fdc-game-toolbar-row > :is(.btn, .toolbar-sort-dropdown, .toolbar-dropdown, .toolbar-toggle) {
  flex: 0 0 auto;
  width: auto;
  min-height: 44px;
}

.fdc-game-toolbar-row > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding-top: 0;
  padding-bottom: 0;
}

.fdc-game-toolbar-row > :is(.toolbar-meta, .toolbar-meta-stack) {
  margin-left: 0;
  min-width: 0;
}

.fdc-game-toolbar-row > .toolbar-meta {
  flex: 0 1 auto;
  text-align: left;
}

.fdc-game-toolbar-row > .toolbar-meta-stack,
.fdc-game-toolbar-meta-stack {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
}

.fdc-game-toolbar-row > .toolbar-meta-stack {
  flex: 0 0 auto;
}

.fdc-game-toolbar-row > .toolbar-meta-stack > *,
.fdc-game-toolbar-meta-stack > * {
  min-width: 0;
}

@media (max-width: 980px) {
  .fdc-game-toolbar-row > .toolbar-meta-stack,
  .fdc-game-toolbar-meta-stack {
    justify-content: flex-start;
  }
}

.cards-grid {
  gap: var(--fdc-game-card-gap);
}

#cardsView .cards-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--fdc-game-card-min-width), 1fr));
}

.cards-grid .card-poster img {
  aspect-ratio: var(--fdc-game-card-aspect);
}

.grid .card::before,
.pool-card-media::before {
  padding-top: var(--fdc-game-card-padding-top);
}

.pool-card-media {
  aspect-ratio: var(--fdc-game-card-aspect);
}

@media (max-width: 1200px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--fdc-game-card-min-width), 1fr));
  }
}