/* Trending Games helper page */
:root { --directory-ink: #28134e; --directory-purple: #7430ea; --directory-lilac: #f6f1ff; --directory-paper: #fff; --directory-muted: #645d70; --directory-gold: #ffb447; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--directory-ink); background: #fff; font-family: "Inter Tight", Inter, Arial, sans-serif; }
/* Compact, opaque shell keeps the inherited homepage navigation distinct from this page's lead. */
body > header.gcu-region { position: relative; z-index: 2; min-height: 142px; color: #f8f4ff; background: #28134e; }
body > header.gcu-region .gcu-content { min-height: 142px; padding-inline: 1.4rem; background-color: #28134e; background-image: none; }
body > header.gcu-region .gcu-header { position: relative; min-height: 142px; border-bottom-color: rgba(248,244,255,.38); background: #28134e; backdrop-filter: none; }
body > header.gcu-region .gcu-brand, body > header.gcu-region .gcu-search, body > header.gcu-region .gcu-navigation a { background-color: #28134e; }
body > header.gcu-region .gcu-secondary-art { display: none; }
body > header.gcu-region .gcu-hero-copy { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.directory-page { color: var(--directory-ink); background: var(--directory-paper); font-family: "Inter Tight", Inter, Arial, sans-serif; line-height: 1.65; }
.directory-page * { box-sizing: border-box; }
.directory-page section { position: relative; padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1.25rem, 6vw, 6.5rem); }
.directory-page h1, .directory-page h2, .directory-page h3, .directory-page p { margin-top: 0; }
.directory-page h1 { max-width: 980px; margin-bottom: 1.35rem; color: #fff; font-size: clamp(2.8rem, 6.7vw, 6.8rem); font-weight: 850; line-height: .99; letter-spacing: -.055em; }
.directory-page h2 { margin-bottom: 1rem; font-size: clamp(2rem, 4.15vw, 3.8rem); font-weight: 800; line-height: 1.06; letter-spacing: -.04em; }
.directory-page h3 { margin-bottom: .65rem; font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.25; }
.directory-page p { max-width: 72ch; margin-bottom: 1rem; }
.directory-intro { min-height: 460px; display: flex; align-items: center; overflow: hidden; color: #fff; background: radial-gradient(ellipse at 86% 8%, rgba(116,48,234,.78), transparent 45%), linear-gradient(120deg,#28134e 0%,#381768 58%,#20103e 100%); }
.directory-intro::after { position: absolute; right: 8%; bottom: -30%; width: clamp(220px, 32vw, 470px); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 0 0 36px rgba(255,255,255,.035),0 0 0 72px rgba(255,255,255,.025); content: ""; }
.directory-intro__inner { position: relative; z-index: 1; width: min(100%, 1170px); margin-inline: auto; }
.directory-kicker { margin-bottom: 1rem; color: var(--directory-purple); font-size: .76rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.directory-intro .directory-kicker { color: #e0cbff; }
.directory-intro__summary { max-width: 700px; margin-bottom: 1.5rem; color: #f4efff; font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.55; }
.directory-intro__note { display: inline-flex; gap: .65rem; align-items: center; padding: .6rem .85rem; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: #fff; font-size: .9rem; }
.directory-intro__note span { color: var(--directory-gold); }
.directory-how { background: #fff; }
.directory-section-heading { width: min(100%, 1170px); margin: 0 auto 2rem; }
.directory-section-heading > p:last-child { margin-bottom: 0; color: var(--directory-muted); }
.directory-how__body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem,4vw,4.5rem); color: var(--directory-muted); }
.directory-how__body p { margin: 0; }
.directory-featured { color: #fff; background: #28134e; }
.directory-section-heading--light .directory-kicker { color: #d2b8ff; }
.directory-section-heading--light > p:last-child { color: #e0d7ee; }
.directory-featured__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; width: min(100%,1170px); margin-inline: auto; }
.directory-feature { min-height: 295px; padding: clamp(1.35rem,2.6vw,2.2rem); border: 1px solid rgba(255,255,255,.2); border-radius: 1.1rem; background: linear-gradient(150deg,#422173,#32155e); box-shadow: 0 18px 50px rgba(11,4,25,.18); }
.directory-feature__index { display: inline-block; margin-bottom: 2rem; color: #d5bfff; font-size: .8rem; font-weight: 800; letter-spacing: .16em; }
.directory-feature h3 { color: #fff; font-size: 1.4rem; }
.directory-feature p { color: #e5dff0; }
.directory-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.35rem 0 0; }
.directory-tags span, .directory-tag { display: inline-block; padding: .34rem .65rem; border: 1px solid rgba(116,48,234,.22); border-radius: 999px; color: #4c2a7c; background: #f0e7ff; font-size: .74rem; font-weight: 750; line-height: 1.4; }
.directory-tags span { border-color: rgba(255,255,255,.25); color: #fff; background: rgba(255,255,255,.1); }
.directory-group { background: #f8f6fb; }
.directory-group--strategy { background: #f8f6fb; }
.directory-group--fantasy { background: #fff; }
.directory-group--action { background: #f2edfb; }
.directory-name-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; width: min(100%,1170px); margin-inline: auto; }
.directory-name-grid--three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.directory-name-grid--feature { grid-template-columns: repeat(2,minmax(0,1fr)); }
.directory-name-card { min-height: 220px; display: flex; flex-direction: column; align-items: flex-start; padding: 1.4rem; border: 1px solid #e8e1f1; border-radius: .85rem; background: #fff; box-shadow: 0 8px 22px rgba(40,19,78,.055); }
.directory-name-card h3 { color: #28134e; }
.directory-name-card p { flex: 1; margin-bottom: 1.1rem; color: var(--directory-muted); font-size: .94rem; }
.directory-name-card .directory-tag { margin-top: auto; }
.directory-labels { color: #fff; background: #28134e; }
.directory-labels .directory-kicker { color: #d9c5ff; }
.directory-labels__inner { width: min(100%,1170px); margin-inline: auto; }
.directory-labels__columns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.directory-labels__columns article { padding: 1.35rem; border-top: 3px solid var(--directory-gold); background: rgba(255,255,255,.075); }
.directory-labels__columns h3 { color: #fff; }
.directory-labels__columns p { margin-bottom: 0; color: #e4dced; }
.directory-check { background: #fff; }
.directory-check__panel { width: min(100%,1170px); margin-inline: auto; padding: clamp(1.5rem,4vw,3.4rem); border-left: 5px solid var(--directory-purple); border-radius: 0 1rem 1rem 0; background: var(--directory-lilac); }
.directory-check__panel p { color: #514861; }
.directory-check__panel p:last-child { margin-bottom: 0; }
.directory-index { background: #f8f6fb; }
.directory-index__list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .7rem; width: min(100%,1170px); margin: 0 auto; padding: 0; list-style: none; }
.directory-index__list li { display: flex; align-items: center; min-height: 58px; padding: .8rem 1rem; border: 1px solid #e7e0ef; border-radius: .55rem; color: #35234e; background: #fff; font-weight: 700; }
.directory-index__list li::before { width: 1.7rem; flex: 0 0 1.7rem; color: var(--directory-purple); font-size: .78rem; content: attr(data-index-letter); }
.directory-index__footnote { width: min(100%,1170px); margin: 1.2rem auto 0; color: var(--directory-muted); font-size: .9rem; }
/* The dummy classes are inert compatibility hooks and intentionally have no design rules. */
@media (max-width: 900px) {
  body > header.gcu-region .gcu-content { padding-inline: .85rem; }
  body > header.gcu-region .gcu-header { margin-inline: 0; }
  body > header.gcu-region .gcu-header { min-height: 116px; }
  body > header.gcu-region, body > header.gcu-region .gcu-content { min-height: 116px; }
  body > header.gcu-region .gcu-navigation a { min-width: auto; padding-inline: .85rem; }
  .directory-featured__grid, .directory-name-grid, .directory-name-grid--three { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .directory-index__list { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  body > header.gcu-region, body > header.gcu-region .gcu-content, body > header.gcu-region .gcu-header { min-height: 88px; }
  body > header.gcu-region .gcu-brand { flex-basis: 108px; min-height: 87px; }
  body > header.gcu-region .gcu-brand img { max-height: 86px; }
  body > header.gcu-region .gcu-phone { display: none; }
  body > header.gcu-region .gcu-search { min-width: 0; padding-inline: .5rem; }
  body > header.gcu-region .gcu-search button { padding-inline: .6rem; }
  body > header.gcu-region .gcu-navigation { position: absolute; top: 100%; right: 0; left: 0; z-index: 5; }
  body > header.gcu-region .gcu-navigation a { flex: 1; min-height: 58px; font-size: .82rem; }
  .directory-page section { padding: 3.5rem 1.2rem; }
  .directory-intro { min-height: 390px; }
  .directory-intro::after { right: -24%; bottom: -25%; }
  .directory-page h1 { font-size: clamp(2.65rem,13vw,4rem); }
  .directory-how__body, .directory-featured__grid, .directory-name-grid, .directory-name-grid--three, .directory-name-grid--feature, .directory-labels__columns { grid-template-columns: 1fr; }
  .directory-feature { min-height: 0; }
  .directory-name-card { min-height: 190px; }
  .directory-index__list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .directory-index__list li { min-height: 64px; padding: .65rem; font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body > header.gcu-region .gcu-hero-copy .gcu-cta { display: none; }

/* Page-owned action surfaces stay legible over the inherited shell colors. */
body > header.gcu-region .gcu-search button,
body > header.gcu-region .gcu-nav-toggle,
body > footer.gc-footer .gc-footer__settings,
body > footer.gc-footer .gc-consent__actions button,
body > header.gcu-region .gcu-hero-copy .gcu-cta {
  color: #28134e;
  background-color: #fff;
  border: 1px solid #e6dcf4;
}
body > header.gcu-region .gcu-nav-toggle span { background-color: #fff; }
body > footer.gc-footer .gc-footer__settings,
body > footer.gc-footer .gc-consent__actions button { border-radius: .45rem; font-weight: 700; }
body > header.gcu-region .gcu-search button:hover,
body > header.gcu-region .gcu-nav-toggle:hover,
body > footer.gc-footer .gc-footer__settings:hover,
body > footer.gc-footer .gc-consent__actions button:hover {
  color: #fff;
  background-color: #28134e;
  border-color: #fff;
}
body > header.gcu-region .gcu-search button:focus-visible,
body > header.gcu-region .gcu-nav-toggle:focus-visible,
body > footer.gc-footer .gc-footer__settings:focus-visible,
body > footer.gc-footer .gc-consent__actions button:focus-visible {
  outline: 3px solid #ffb447;
  outline-offset: 3px;
}