.games-hub {
  --games-ink: var(--color-base-content);
  --games-muted: color-mix(in oklab, var(--games-ink) 68%, transparent);
  --games-line: var(--color-base-300);
  --games-mint: var(--color-primary);
  --games-pink: var(--color-secondary);
  --games-amber: var(--color-accent);
  --games-blue: var(--color-info);
  --games-green: var(--color-success);
  overflow: hidden;
}

.games-hub__hero {
  position: relative;
  isolation: isolate;
  border-bottom: 0;
  background:
    radial-gradient(circle at 8% 12%, color-mix(in oklab, var(--games-mint) 38%, transparent) 0 12rem, transparent 28rem),
    radial-gradient(circle at 78% 0%, color-mix(in oklab, var(--games-pink) 24%, transparent) 0 14rem, transparent 32rem),
    linear-gradient(135deg, color-mix(in oklab, var(--games-amber) 11%, var(--color-base-100)), var(--color-base-100) 58%);
}

.games-hub__hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(color-mix(in oklab, var(--games-ink) 14%, transparent) 1px, transparent 1px);
  background-size: 1.1rem 1.1rem;
  content: "";
  mask-image: linear-gradient(100deg, black, transparent 58%);
  opacity: .25;
  pointer-events: none;
}

.games-hub__hero::after {
  position: absolute;
  right: -8rem;
  bottom: -12rem;
  z-index: -1;
  width: 26rem;
  height: 26rem;
  border: 2rem solid color-mix(in oklab, var(--games-pink) 18%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.games-hub__hero-inner {
  position: relative;
}

.games-hub__hero-copy {
  position: relative;
  z-index: 1;
}

.games-hub__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: color-mix(in oklab, var(--games-pink) 72%, var(--games-ink));
  font-weight: 850;
}

.games-hub__eyebrow::before {
  width: .6rem;
  height: .6rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--games-pink);
  box-shadow: .55rem 0 0 var(--games-amber), 1.1rem 0 0 var(--games-mint);
  content: "";
  margin-right: .55rem;
}

.games-hub__hero-title {
  max-width: 16ch;
  font-size: clamp(3rem, 7vw, 5.75rem);
  font-weight: 950;
  letter-spacing: -.065em;
  line-height: .98;
}

.games-hub__hero-title-accent {
  color: color-mix(in oklab, var(--games-pink) 72%, var(--games-ink));
  text-decoration: underline;
  text-decoration-color: var(--games-amber);
  text-decoration-thickness: .12em;
  text-underline-offset: .08em;
}

.games-hub__hero-body,
.games-hub__library-intro,
.games-hub__closing-copy {
  color: var(--games-muted);
}

.games-hub__hero-actions .btn-primary {
  border-color: color-mix(in oklab, var(--games-mint), var(--games-ink) 15%);
  background: var(--games-mint);
  color: var(--color-primary-content);
  box-shadow: 0 .3rem 0 color-mix(in oklab, var(--games-mint), var(--games-ink) 18%), 0 .9rem 1.8rem color-mix(in oklab, var(--games-mint) 25%, transparent);
}

.games-hub__hero-actions .btn-primary:hover {
  background: color-mix(in oklab, var(--games-mint) 88%, var(--games-ink));
  transform: translateY(-2px);
}

.games-hub__hero-actions .btn-outline {
  border-color: color-mix(in oklab, var(--games-pink) 48%, var(--games-line));
  color: color-mix(in oklab, var(--games-pink) 70%, var(--games-ink));
}

.games-hub__hero-actions .btn-outline:hover {
  border-color: var(--games-pink);
  background: color-mix(in oklab, var(--games-pink) 10%, var(--color-base-100));
  color: var(--games-ink);
}

.games-hub__hero-note {
  color: color-mix(in oklab, var(--games-ink) 56%, transparent);
}

.games-hub__hero-card {
  border: 2px solid color-mix(in oklab, var(--games-mint) 28%, var(--color-neutral));
  background:
    radial-gradient(circle at 100% 0%, color-mix(in oklab, var(--games-pink) 50%, transparent) 0 9rem, transparent 18rem),
    linear-gradient(145deg, var(--color-neutral), color-mix(in oklab, var(--color-neutral) 72%, var(--color-base-content)));
  box-shadow: 0 1.5rem 3rem color-mix(in oklab, var(--color-neutral) 25%, transparent);
}

.games-hub__hero-card::after {
  position: absolute;
  right: 1.5rem;
  bottom: 1.25rem;
  width: 6rem;
  height: 6rem;
  border: 1px solid color-mix(in oklab, var(--color-neutral-content) 25%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 .65rem color-mix(in oklab, var(--color-neutral-content) 7%, transparent), 0 0 0 1.3rem color-mix(in oklab, var(--color-neutral-content) 5%, transparent);
  content: "";
  pointer-events: none;
}

.games-hub__hero-orb {
  opacity: .9;
}

.games-hub__hero-orb--top {
  background: color-mix(in oklab, var(--games-mint) 68%, transparent);
}

.games-hub__hero-orb--bottom {
  background: color-mix(in oklab, var(--games-amber) 56%, transparent);
}

.games-hub__hero-card-content {
  z-index: 1;
}

.games-hub__hero-tile {
  position: relative;
  z-index: 1;
  box-shadow: 0 .65rem 1.1rem color-mix(in oklab, var(--color-base-content) 22%, transparent);
}

.games-hub__hero-tile--mint {
  background: var(--games-mint);
  color: var(--color-primary-content);
}

.games-hub__hero-tile--pink {
  background: var(--games-pink);
  color: var(--color-secondary-content);
}

.games-hub__hero-tile--amber {
  background: var(--games-amber);
  color: var(--color-accent-content);
}

.games-hub__daily {
  border-color: var(--games-line);
  background:
    radial-gradient(circle at 88% 10%, color-mix(in oklab, var(--games-amber) 14%, transparent), transparent 20rem),
    color-mix(in oklab, var(--games-mint) 4%, var(--color-base-100));
}

.games-hub__daily-inner {
  position: relative;
}

.games-hub__daily-streak {
  border-color: color-mix(in oklab, var(--games-pink) 28%, var(--games-line));
  background: color-mix(in oklab, var(--games-pink) 8%, var(--color-base-100));
  color: color-mix(in oklab, var(--games-pink) 70%, var(--games-ink));
}

.games-hub__daily-grid {
  position: relative;
}

.games-hub__daily-card {
  --daily-color: var(--games-mint);
  border-color: color-mix(in oklab, var(--daily-color) 30%, var(--games-line));
  background: color-mix(in oklab, var(--daily-color) 5%, var(--color-base-100));
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.games-hub__daily-card--secondary {
  --daily-color: var(--games-pink);
}

.games-hub__daily-card--accent {
  --daily-color: var(--games-amber);
}

.games-hub__daily-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .7rem 1.4rem color-mix(in oklab, var(--daily-color) 13%, transparent);
}

.games-hub__daily-mark {
  background: color-mix(in oklab, var(--daily-color) 17%, var(--color-base-100));
  color: color-mix(in oklab, var(--daily-color) 80%, var(--games-ink));
}

.games-hub__daily-shelf,
.games-hub__daily-detail {
  color: color-mix(in oklab, var(--daily-color) 72%, var(--games-ink));
}

.games-hub__daily-description {
  color: var(--games-muted);
}

.games-hub__daily-card .border-t {
  border-color: color-mix(in oklab, var(--daily-color) 18%, var(--games-line));
}

.games-hub__daily-button {
  border-color: color-mix(in oklab, var(--daily-color) 48%, var(--games-line)) !important;
  background: color-mix(in oklab, var(--daily-color) 90%, var(--games-ink)) !important;
  color: var(--color-base-content) !important;
}

.games-hub__daily-button:hover {
  background: var(--daily-color) !important;
}

.games-hub__library {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--games-mint) 4%, var(--color-base-100)), var(--color-base-100) 18rem),
    var(--color-base-100);
}

.games-hub__library-inner {
  position: relative;
}

.games-hub__game-count {
  border-color: color-mix(in oklab, var(--games-amber) 45%, var(--games-line));
  background: color-mix(in oklab, var(--games-amber) 14%, var(--color-base-100));
  color: color-mix(in oklab, var(--games-amber) 62%, var(--games-ink));
}

.games-hub__filter-groups {
  display: grid;
  gap: 1.25rem;
  max-width: 100%;
}

.games-hub__filter-group {
  display: grid;
  gap: .45rem;
}

.games-hub__filter-label {
  padding-left: .35rem;
  color: var(--games-muted);
}

.games-hub__filters {
  --filter-color: var(--games-mint);
  width: fit-content;
  max-width: 100%;
  padding: .4rem;
  border: 1px solid color-mix(in oklab, var(--filter-color) 24%, var(--games-line));
  border-radius: 1.2rem;
  background: color-mix(in oklab, var(--filter-color) 5%, var(--color-base-100));
  box-shadow: 0 .7rem 1.7rem color-mix(in oklab, var(--games-ink) 6%, transparent);
}

.games-hub__filters--audience {
  --filter-color: var(--games-pink);
}

.games-hub__filter {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.75rem;
  border-color: transparent;
  color: var(--games-muted);
}

.games-hub__filter-range {
  font-size: .7rem;
  font-weight: 800;
  opacity: .62;
}

.games-hub__filter[aria-pressed="true"] {
  border-color: var(--games-ink);
  background: var(--games-ink);
  color: var(--color-base-100);
  box-shadow: 0 .25rem 0 color-mix(in oklab, var(--filter-color) 68%, var(--games-ink));
}

.games-hub__filter:hover:not([aria-pressed="true"]) {
  border-color: color-mix(in oklab, var(--filter-color) 55%, var(--games-line));
  background: color-mix(in oklab, var(--filter-color) 8%, var(--color-base-100));
  color: var(--games-ink);
}

.games-hub__filter:focus-visible {
  outline-color: var(--filter-color);
}

.games-hub__section {
  --section-color: var(--games-mint);
  --section-ink: color-mix(in oklab, var(--section-color) 62%, var(--games-ink));
}

.games-hub__section--think {
  --section-color: var(--games-pink);
}

.games-hub__section--together {
  --section-color: var(--games-amber);
}

.games-hub__section--speak {
  --section-color: var(--games-green);
}

.games-hub__section--calm {
  --section-color: var(--games-blue);
}

.games-hub__section--create {
  --section-color: var(--games-green);
}

.games-hub__section-header {
  position: relative;
  border-left: 0;
  border: 1px solid color-mix(in oklab, var(--section-color) 34%, var(--games-line));
  border-radius: 1.15rem;
  padding: 1.15rem 1.25rem 1.2rem 1.5rem;
  background: linear-gradient(105deg, color-mix(in oklab, var(--section-color) 11%, var(--color-base-100)), var(--color-base-100) 74%);
  box-shadow: 0 .5rem 1.2rem color-mix(in oklab, var(--section-color) 8%, transparent);
}

.games-hub__section-header::before {
  position: absolute;
  top: 1.1rem;
  bottom: 1.1rem;
  left: .45rem;
  width: .35rem;
  border-radius: 999px;
  background: var(--section-color);
  content: "";
}

.games-hub__section-eyebrow,
.games-hub__section-count {
  color: var(--section-ink);
}

.games-hub__section-count {
  border-color: color-mix(in oklab, var(--section-color) 34%, var(--games-line));
  background: color-mix(in oklab, var(--section-color) 10%, var(--color-base-100));
}

.games-hub__section-description {
  color: var(--games-muted);
}

.games-hub__speak-note {
  border-color: color-mix(in oklab, var(--section-color) 30%, var(--games-line));
  background: color-mix(in oklab, var(--section-color) 7%, var(--color-base-100));
  color: var(--games-muted);
}

.games-hub__speak-note strong {
  color: var(--section-ink);
}

.games-hub__card {
  --card-color: var(--games-mint);
  --card-soft: color-mix(in oklab, var(--card-color) 12%, var(--color-base-100));
  --card-ink: color-mix(in oklab, var(--card-color) 64%, var(--games-ink));
  position: relative;
  border-width: 2px;
  border-color: color-mix(in oklab, var(--card-color) 32%, var(--games-line));
  background: linear-gradient(145deg, var(--card-soft), var(--color-base-100) 62%);
  box-shadow: 0 .65rem 1.2rem color-mix(in oklab, var(--card-color) 9%, transparent);
}

.games-hub__card::before {
  position: absolute;
  inset: 0 0 auto;
  height: .45rem;
  background: linear-gradient(90deg, var(--card-color), color-mix(in oklab, var(--card-color) 30%, var(--games-amber)));
  content: "";
}

.games-hub__card--secondary {
  --card-color: var(--games-pink);
}

.games-hub__card--accent {
  --card-color: var(--games-amber);
}

.games-hub__card:hover {
  border-color: var(--card-color);
  box-shadow: 0 1rem 2rem color-mix(in oklab, var(--card-color) 16%, transparent);
}

.games-hub__card-content {
  position: relative;
  z-index: 1;
}

.games-hub__mark {
  background: var(--card-color);
  color: var(--color-base-content);
  box-shadow: .35rem .35rem 0 color-mix(in oklab, var(--card-color) 42%, var(--games-ink));
  transform: rotate(-4deg);
}

.games-hub__mark--secondary {
  transform: rotate(5deg);
}

.games-hub__mark--accent {
  transform: rotate(-7deg);
}

.games-hub__availability {
  border-color: color-mix(in oklab, var(--card-color) 38%, var(--games-line));
  background: color-mix(in oklab, var(--card-color) 10%, var(--color-base-100));
  color: var(--card-ink);
}

.games-hub__card-category,
.games-hub__featured-label {
  color: var(--card-ink);
}

.games-hub__card-title {
  font-weight: 850;
}

.games-hub__card-description {
  color: var(--games-muted);
}

.games-hub__card-footer {
  border-color: color-mix(in oklab, var(--card-color) 22%, var(--games-line));
}

.games-hub__card-detail,
.games-hub__card-note {
  color: color-mix(in oklab, var(--games-ink) 58%, transparent);
}

.games-hub__related-link {
  color: var(--card-ink);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.games-hub__card-note {
  border-color: color-mix(in oklab, var(--card-color) 54%, transparent);
}

.games-hub__play-button {
  border-color: color-mix(in oklab, var(--card-color), var(--games-ink) 16%) !important;
  background: var(--card-color) !important;
  color: var(--color-base-content) !important;
  box-shadow: 0 .25rem 0 color-mix(in oklab, var(--card-color), var(--games-ink) 20%), 0 .65rem 1.2rem color-mix(in oklab, var(--card-color) 20%, transparent);
}

.games-hub__play-button:hover {
  background: color-mix(in oklab, var(--card-color) 88%, var(--games-ink)) !important;
  transform: translateY(-2px);
}

.games-hub__featured-panel {
  border-left: 1px solid color-mix(in oklab, var(--card-color) 22%, var(--games-line));
  background:
    radial-gradient(circle at 100% 0%, color-mix(in oklab, var(--card-color) 28%, transparent), transparent 12rem),
    color-mix(in oklab, var(--card-color) 11%, var(--color-base-100));
}

.games-hub__featured-bars div {
  background: var(--card-color);
  opacity: .2;
}

.games-hub__featured-bars div:nth-child(2) {
  opacity: .32;
}

.games-hub__featured-bars div:nth-child(3) {
  opacity: .48;
}

.games-hub__featured-bars div:nth-child(4) {
  opacity: .16;
}

.games-hub__empty {
  border-color: color-mix(in oklab, var(--games-pink) 30%, var(--games-line));
  background: color-mix(in oklab, var(--games-pink) 7%, var(--color-base-100));
}

.games-hub__empty-copy,
.games-hub__idea-copy {
  color: var(--games-muted);
}

.games-hub__closing {
  border-color: var(--games-line);
  background:
    radial-gradient(circle at 12% 0%, color-mix(in oklab, var(--games-amber) 18%, transparent), transparent 22rem),
    color-mix(in oklab, var(--games-mint) 5%, var(--color-base-200));
}

.games-hub__idea-card {
  border-color: color-mix(in oklab, var(--games-pink) 40%, var(--games-line));
  background: linear-gradient(145deg, color-mix(in oklab, var(--games-pink) 12%, var(--color-base-100)), color-mix(in oklab, var(--games-amber) 8%, var(--color-base-100)));
  box-shadow: 0 .8rem 1.8rem color-mix(in oklab, var(--games-pink) 10%, transparent);
}

.games-hub__idea-eyebrow {
  color: color-mix(in oklab, var(--games-pink) 72%, var(--games-ink));
}

.games-hub__idea-card .btn-outline {
  border-color: color-mix(in oklab, var(--games-pink) 48%, var(--games-line));
  color: color-mix(in oklab, var(--games-pink) 70%, var(--games-ink));
}

.games-hub__idea-card .btn-outline:hover {
  border-color: var(--games-pink);
  background: var(--games-pink);
  color: var(--color-secondary-content);
}

@media (max-width: 767px) {
  .games-hub__hero-title {
    max-width: 12ch;
  }

  .games-hub__filters {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .games-hub__filter {
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .games-hub__hero-actions .btn-primary:hover,
  .games-hub__play-button:hover,
  .games-hub__card:hover {
    transform: none;
  }
}