.genres-page { overflow: clip; }
.genres-page .section { position: relative; }

.genres-hero { padding-top: var(--space-9); }
.genres-hero__panel { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-7); align-items: center; min-width: 0; overflow: hidden; border: var(--border-default); border-radius: var(--radius-hero); background: var(--color-surface); padding: var(--space-8); box-shadow: var(--shadow-elevated); }
.genres-hero__copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.genres-hero__copy > * { min-width: 0; margin: 0; }
.genres-hero__copy h1 { max-width: 38rem; }
.genres-hero__copy h1 span { color: var(--color-action); }
.genres-hero__lead { max-width: 38rem; font-size: var(--text-lead); line-height: var(--leading-lead); }
.genres-hero__actions { width: 100%; }
.genres-hero__route-link { display: inline-flex; min-height: 2.75rem; align-items: center; font-size: var(--text-small); font-weight: 700; }
.genres-hero__routes { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); padding-top: var(--space-2); }
.genres-hero__routes p { display: flex; min-width: 0; flex-direction: column; gap: var(--space-1); margin: 0; border-left: 2px solid var(--color-cyan); padding-left: var(--space-2); color: var(--color-muted); font-size: var(--text-small); line-height: var(--leading-small); }
.genres-hero__routes strong { color: var(--color-ink); }
.genres-hero__art { position: relative; min-width: 0; }
.genres-hero__image-frame { position: relative; z-index: 1; width: 100%; aspect-ratio: 16 / 9; }
.genres-hero__image-frame img { object-position: right center; }
.genres-hero__splash { position: absolute; z-index: 0; top: -14%; right: -12%; width: 90%; aspect-ratio: 1; border-radius: 58% 42% 36% 64% / 42% 54% 46% 58%; background: var(--gradient-pop); opacity: 0.22; transform: rotate(18deg); }
.genres-hero__diamond { position: absolute; z-index: 2; right: 8%; bottom: -4%; width: 2rem; height: 2rem; background: var(--color-yellow); transform: rotate(45deg); }

.genres-browser { padding-top: calc(var(--section-space) + var(--space-4)); }
.genres-browser__intro { width: min(100%, 37.5rem); }
.genres-filter-wrap { display: flex; min-width: 0; flex-direction: column; gap: var(--space-2); margin-top: var(--space-6); }
.genres-filter-wrap__label, .genres-filter-wrap__helper { margin: 0; color: var(--color-muted); font-size: var(--text-small); font-weight: 700; }
.genres-filter-wrap__helper { display: none; font-weight: 500; }
.genres-filter { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-2); }
.genres-filter__button { min-width: 0; min-height: 2.75rem; border: var(--border-default); border-radius: 999px; background: var(--color-surface); padding: 0.5rem 0.75rem; color: var(--color-ink); font-size: var(--text-small); font-weight: 700; line-height: 1.25; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.genres-filter__button[aria-pressed="true"] { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-surface); }
.genres-filter__button:hover { border-color: var(--color-action-dark); color: var(--color-action-dark); }
.genres-filter__button[aria-pressed="true"]:hover { background: var(--color-action-dark); color: var(--color-surface); }
.genres-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.genres-card-grid > * { min-width: 0; width: 100%; }
.genres-genre-card { display: flex; min-height: 100%; flex-direction: column; text-decoration: none; }
.genres-genre-card .card__body { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.genres-genre-card .card__body > * { min-width: 0; margin: 0; }
.genres-genre-card__title { font-family: var(--font-heading); font-size: var(--text-component); font-weight: 800; letter-spacing: -0.02em; line-height: var(--leading-heading); }
.genres-genre-card__text { color: var(--color-muted); font-size: var(--text-small); line-height: var(--leading-small); }
.genres-genre-card__link { margin-top: auto; color: var(--color-ink); font-size: var(--text-small); font-weight: 700; text-decoration: underline; text-decoration-color: var(--color-action); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.genres-genre-card__art { display: grid; width: 100%; place-items: center; background: linear-gradient(135deg, #3b1c63, #8b4dff 56%, #19c8d8); color: var(--color-surface); font-family: var(--font-heading); font-size: clamp(3rem, 7vw, 5rem); }
.genres-genre-card__art--simulation { background: linear-gradient(135deg, #19c8d8, #d9cbff 58%, #8b4dff); }
.genres-genre-card__art--racing { background: linear-gradient(135deg, #e91e83, #8b4dff 52%, #ffd447); }
.genres-genre-card__art--multiplayer { background: linear-gradient(135deg, #24113f, #e91e83 52%, #19c8d8); }

.genres-spotlight__intro { width: min(100%, 42.5rem); }
.genres-spotlight__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); align-items: start; margin-top: var(--space-6); }
.genres-spotlight__grid > * { min-width: 0; width: 100%; }
.genres-feature-card .card__media { aspect-ratio: 16 / 9; }
.genres-feature-card .card__media img { object-position: right center; }
.genres-feature-card__body { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); }
.genres-feature-card__body > * { min-width: 0; margin: 0; }
.genres-feature-card__body p { max-width: 27.5rem; }
.genres-feature-card__tags { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-2); }
.genres-spotlight__rail { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); }
.genres-quest-card { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); border: var(--border-default); border-radius: var(--radius-card); background: var(--color-surface); padding: var(--space-5); }
.genres-quest-card > * { min-width: 0; margin: 0; }
.genres-quest-card__top { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-3); }
.genres-quest-card__star { color: var(--color-yellow); font-size: 2rem; line-height: 1; }
.genres-signal-list { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-2); padding: 0; list-style: none; }
.genres-signal-list li { border-radius: var(--radius-small); background: var(--color-canvas); padding: var(--space-1) var(--space-2); color: var(--color-ink); font-size: var(--text-meta); font-weight: 700; }
.genres-mission-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); min-width: 0; border: var(--border-default); border-left: 3px solid var(--color-cyan); border-radius: var(--radius-card); background: var(--color-surface); padding: var(--space-4); }
.genres-mission-card > * { min-width: 0; }
.genres-mission-card__number { color: var(--color-action); font-family: var(--font-heading); font-size: 1.75rem; font-weight: 800; line-height: 1; }
.genres-mission-card__content { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.genres-mission-card__content > * { min-width: 0; margin: 0; }
.genres-mission-card__content h3 { font-size: var(--text-component); }

.genres-records { background: var(--color-surface); }
.genres-records__intro { width: min(100%, 38.75rem); }
.genres-inline-star { color: var(--color-yellow); }
.genres-record-list { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.genres-review-record { display: grid; grid-template-columns: 8.25rem minmax(0, 1fr) 9.375rem; gap: var(--space-5); align-items: center; min-width: 0; border-top: var(--border-default); padding-top: var(--space-5); }
.genres-review-record > * { min-width: 0; }
.genres-review-record__score { display: flex; min-height: 6.25rem; flex-direction: column; justify-content: center; border: var(--border-default); border-left: 4px solid var(--color-action); border-radius: var(--radius-card); background: var(--color-surface); padding: var(--space-3); color: var(--color-muted); font-size: var(--text-meta); font-weight: 700; }
.genres-review-record__score--cyan { border-left-color: var(--color-cyan); }
.genres-review-record__score--yellow { border-left-color: var(--color-yellow); }
.genres-review-record__copy { min-width: 0; }
.genres-review-record__copy h3 { margin-bottom: var(--space-2); }
.genres-review-record__copy p { max-width: 32.5rem; }
.genres-review-record__copy ul { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-2); margin-bottom: 0; padding: 0; list-style: none; }
.genres-review-record__copy li { border-radius: var(--radius-small); background: var(--color-canvas); padding: var(--space-1) var(--space-2); font-size: var(--text-meta); font-weight: 700; }
.genres-review-record__link { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: flex-start; font-size: var(--text-small); font-weight: 700; }

.genres-missions { padding-top: calc(var(--section-space) + var(--space-4)); }
.genres-missions__intro { width: min(100%, 38.75rem); }
.genres-missions__intro .tag { margin-right: var(--space-2); vertical-align: middle; }
.genres-missions__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.genres-missions__grid > * { min-width: 0; width: 100%; }
.genres-missions__grid .genres-mission-card { min-height: 100%; }

.genres-radar__intro { width: min(100%, 38.75rem); }
.genres-radar__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.genres-radar__grid > * { min-width: 0; width: 100%; }
.genres-update-module { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); border: var(--border-default); border-top: 3px solid var(--color-action); border-radius: var(--radius-card); background: var(--color-surface); padding: var(--space-5); }
.genres-update-module--release { border-top-color: var(--color-cyan); }
.genres-update-module > * { min-width: 0; margin: 0; }
.genres-update-row { display: flex; width: 100%; min-width: 0; flex-direction: column; gap: var(--space-2); border-top: var(--border-default); padding-top: var(--space-3); }
.genres-update-row > * { min-width: 0; margin: 0; }
.genres-update-row h4 { font-family: var(--font-body); font-size: var(--text-small); font-weight: 700; letter-spacing: 0; line-height: var(--leading-small); }
.genres-update-row p:last-child { color: var(--color-muted); font-size: var(--text-meta); line-height: var(--leading-meta); }

.genres-moods__intro { position: relative; width: min(100%, 35rem); margin-inline: auto; text-align: center; }
.genres-moods__intro .splash-accent { top: -2rem; right: -4rem; }
.genres-moods__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.genres-moods__grid > * { min-width: 0; width: 100%; }
.genres-mood-card { display: flex; min-height: 100%; flex-direction: column; }
.genres-mood-card__main-link { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; color: inherit; text-decoration: none; }
.genres-mood-card .card__body { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.genres-mood-card .card__body > * { min-width: 0; margin: 0; }
.genres-mood-card .card__body h3 { font-size: var(--text-component); }
.genres-mood-card .card__body p { color: var(--color-muted); font-size: var(--text-small); line-height: var(--leading-small); }
.genres-mood-card__tags { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); }
.genres-mood-card__tags a { font-size: var(--text-meta); font-weight: 700; }
.genres-mood-card__art { display: grid; width: 100%; place-items: center; background: linear-gradient(135deg, #24113f, #e91e83 56%, #ffd447); color: var(--color-surface); font-size: clamp(3rem, 8vw, 5rem); }
.genres-mood-card__art--together { background: linear-gradient(135deg, #19c8d8, #8b4dff 52%, #e91e83); }

.genres-editorial { background: var(--color-surface); }
.genres-editorial__intro { width: min(100%, 40rem); }
.genres-editorial__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.genres-editorial__grid > * { min-width: 0; width: 100%; }
.genres-editorial-tile { display: flex; min-height: 100%; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-2); border: var(--border-default); border-radius: var(--radius-card); background: var(--color-surface); padding: var(--space-4); text-decoration: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
.genres-editorial-tile > * { min-width: 0; margin: 0; }
.genres-editorial-tile h3 { font-size: var(--text-component); }
.genres-editorial-tile p { color: var(--color-muted); font-size: var(--text-small); line-height: var(--leading-small); }
.genres-editorial-tile__accent { color: var(--color-action); font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; line-height: 1; }
.genres-editorial-tile__accent--cyan { color: var(--color-cyan); }
.genres-editorial-tile__accent--yellow { color: var(--color-yellow); }
.genres-editorial-tile__accent--purple { color: #8b4dff; }

.genres-adjacent { padding-top: calc(var(--section-space) + var(--space-4)); }
.genres-adjacent__intro { width: min(100%, 37.5rem); }
.genres-adjacent__layout { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); gap: var(--space-5); align-items: end; margin-top: var(--space-6); }
.genres-adjacent__layout > * { min-width: 0; width: 100%; }
.genres-adjacent__list { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); }
.genres-overlap { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-5); min-width: 0; border: var(--border-default); border-radius: var(--radius-card); background: var(--color-surface); padding: var(--space-4); }
.genres-overlap > * { min-width: 0; }
.genres-overlap__labels { display: flex; min-width: 0; flex-wrap: wrap; align-content: start; align-items: center; gap: var(--space-2); }
.genres-overlap__labels a { font-size: var(--text-small); font-weight: 700; }
.genres-overlap__labels span { color: var(--color-action); font-size: var(--text-small); }
.genres-overlap h3 { margin-bottom: var(--space-2); font-size: var(--text-lead); }
.genres-overlap p { max-width: 28.75rem; margin-bottom: 0; color: var(--color-muted); font-size: var(--text-small); line-height: var(--leading-small); }
.genres-overlap p strong { color: var(--color-ink); }
.genres-adjacent__cta { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); border-left: 3px solid var(--color-action); padding: var(--space-4); }
.genres-adjacent__cta > * { min-width: 0; margin: 0; }
.genres-adjacent__cta p { max-width: 18rem; font-size: var(--text-small); line-height: var(--leading-small); }

.genres-utility { padding-top: var(--space-9); }
.genres-utility__panel { width: min(100%, 43.75rem); margin-inline: auto; border: var(--border-default); border-left: 3px solid var(--color-cyan); border-radius: var(--radius-card); background: var(--color-surface); padding: var(--space-5); }
.genres-utility__panel > :last-child { margin-bottom: 0; }
.genres-utility__note + .genres-utility__note { margin-top: var(--space-4); border-top: var(--border-default); padding-top: var(--space-4); }
.genres-utility__note h3 { margin-bottom: var(--space-2); font-size: var(--text-lead); }

@media (hover: hover) and (pointer: fine) {
  .genres-editorial-tile:hover { border-color: var(--color-action); box-shadow: var(--shadow-elevated); transform: translateY(-2px); }
}

@media (max-width: 63.9375rem) {
  .genres-hero__panel { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); gap: var(--space-5); padding: var(--space-6); }
  .genres-hero__routes { grid-template-columns: 1fr; gap: var(--space-2); }
  .genres-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  .genres-spotlight__grid { grid-template-columns: minmax(0, 5fr) minmax(17.5rem, 3fr); gap: var(--space-4); }
  .genres-missions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .genres-moods__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .genres-editorial__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 58.75rem) {
  .genres-review-record { grid-template-columns: 8.25rem minmax(0, 1fr); }
  .genres-review-record__link { grid-column: 2; }
  .genres-adjacent__layout { grid-template-columns: 1fr; align-items: start; }
  .genres-adjacent__cta { width: min(100%, 28rem); }
}

@media (max-width: 51.25rem) {
  .genres-radar__grid { grid-template-columns: 1fr; }
}

@media (max-width: 47.5rem) {
  .genres-hero { padding-top: var(--space-6); }
  .genres-hero__panel { grid-template-columns: 1fr; padding: var(--space-5); }
  .genres-hero__copy { order: 1; }
  .genres-hero__art { order: 2; }
  .genres-hero__copy h1, .genres-hero__lead { max-width: none; }
  .genres-hero__image-frame { aspect-ratio: 4 / 3; }
  .genres-hero__image-frame img { object-position: 65% center; }
  .genres-spotlight__grid { grid-template-columns: 1fr; }
  .genres-feature-card .card__media { aspect-ratio: 4 / 3; }
  .genres-feature-card .card__media img { object-position: 65% center; }
  .genres-review-record { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-4); border: var(--border-default); border-radius: var(--radius-card); }
  .genres-review-record__score { width: min(100%, 10rem); min-height: auto; }
  .genres-review-record__link { grid-column: auto; }
  .genres-overlap { grid-template-columns: 1fr; gap: var(--space-3); }
}

@media (max-width: 39.9375rem) {
  .genres-hero__panel { padding: var(--space-4); }
  .genres-hero__copy { gap: var(--space-3); }
  .genres-hero__copy h1 { font-size: clamp(2.375rem, 10vw, 2.625rem); }
  .genres-hero__routes { margin-top: var(--space-2); }
  .genres-hero__splash { opacity: 0.14; }
  .genres-browser, .genres-missions, .genres-adjacent { padding-top: calc(var(--section-space) + var(--space-3)); }
  .genres-filter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2); scrollbar-width: none; }
  .genres-filter::-webkit-scrollbar { display: none; }
  .genres-filter__button { flex: 0 0 auto; }
  .genres-filter-wrap__helper { display: block; }
  .genres-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .genres-genre-card .card__body { gap: var(--space-2); }
  .genres-genre-card__title { font-size: 1.2rem; }
  .genres-genre-card__text { font-size: var(--text-meta); line-height: var(--leading-meta); }
  .genres-feature-card__body { padding: var(--space-4); }
  .genres-missions__grid, .genres-moods__grid, .genres-editorial__grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .genres-update-module { padding: var(--space-4); }
  .genres-mood-card__tags { padding: 0 var(--space-3) var(--space-3); }
  .genres-overlap { padding: var(--space-4); }
  .genres-utility { padding-top: var(--space-6); }
  .genres-utility__panel { padding: var(--space-4); }
}

@media (max-width: 23.75rem) {
  .genres-card-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .genres-editorial-tile:hover { transform: none; }
}