/* A focused discovery polish. The current routes, themes and filtering model
   remain the source of truth; only presentation and link affordances change. */
.account-trigger-v3 .account-avatar-v3 {
  display: block;
  background: transparent;
  box-shadow: none;
}
:root body[data-page="home"] .home-hero-intro h1 .gradient-text-v3,
:root:is([data-theme="dark"], [data-theme="light"]) body[data-page="home"] .home-hero-intro h1 .gradient-text-v3 {
  background-image: var(--headline-gradient, linear-gradient(100deg, #ef398e 0%, #fc7cc1 24%, #a653cb 50%, #398ed9 76%, #12c6e5 100%)) !important;
  background-size: 210% 100%; background-clip: text; -webkit-background-clip: text;
  color: #ef398e; -webkit-text-fill-color: transparent;
}
/* Keep the logo hues readable on Light's pale hero surface. */
:root[data-theme="light"] {
  --headline-gradient: linear-gradient(100deg, #a90868 0%, #b51e78 24%, #6834ac 50%, #2468ab 76%, #006d84 100%);
}
@keyframes browse-headline-colours { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-brand-motion="off"]) body[data-page="home"] .home-hero-intro h1 .gradient-text-v3 {
    animation: browse-headline-colours 5.5s ease-in-out infinite alternate !important;
  }
}
.home-hero-intro .hero-copy-v3 > p [data-game-name="fivem"] { --platform-accent: #ffac69; }
.home-hero-intro .hero-copy-v3 > p [data-game-name="redm"] { --platform-accent: #ff797f; }
.home-hero-intro .hero-copy-v3 > p [data-game-name="roblox"] { --platform-accent: #f2eaf5; }
.home-hero-intro .hero-copy-v3 > p [data-game-name="minecraft"] { --platform-accent: #70d78a; }
.home-hero-intro .hero-copy-v3 > p a.game-name-v9 {
  color: var(--platform-accent) !important;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: .19em; text-decoration-thickness: 1px;
  transition: text-decoration-color .2s ease, filter .2s ease;
}
.home-hero-intro .hero-copy-v3 > p a.game-name-v9:hover { text-decoration-color: currentColor; filter: brightness(1.2); }
.home-hero-intro .hero-copy-v3 > p a.game-name-v9:focus-visible { outline: 2px solid #fa8acb; outline-offset: 3px; border-radius: 2px; }

/* One shared brand clock, with the existing gradient rather than a flyover. */
.public-nav-v6 > .navigation-brand-v6::after {
  background: linear-gradient(100deg, transparent 27%, rgb(255 107 186 / .44) 42%, rgb(193 136 255 / .52) 52%, rgb(100 219 239 / .43) 62%, transparent 77%) 0 0 / 240% 100%;
  animation-timing-function: linear;
}
@keyframes navigation-brand-wave {
  0%, 7%, 76%, 100% { background-position: 100% 0; opacity: 0; }
  17% { opacity: .8; }
  38% { background-position: 0 0; opacity: .75; }
  51% { opacity: 0; }
}
.public-nav-v6 > .navigation-brand-v6::before { filter: drop-shadow(0 0 4px rgb(236 79 166 / .58)) drop-shadow(0 0 12px rgb(89 205 224 / .38)); }

.public-nav-v6 > .button-primary-v3 { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .public-nav-v6[data-brand-motion="running"] > .button-primary-v3:is(:hover,:focus-visible) {
    animation: navigation-list-glow 1.8s ease-in-out infinite;
  }
}
@keyframes navigation-list-glow {
  0%, 100% { filter: brightness(1.05); }
  50% { filter: brightness(1.12); }
}
.navigation-find-v7,.navigation-toggle-v6 {
  border-radius: 12px;
  box-shadow: inset 0 1px rgb(255 255 255 / .06);
  transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease, filter .22s ease;
}
.navigation-find-v7 { background: color-mix(in srgb, var(--cyan) 5%, var(--panel)); }
.navigation-toggle-v6 { background: color-mix(in srgb, var(--pink) 4%, var(--panel)); }
.navigation-find-v7:hover,.navigation-find-v7[aria-expanded="true"] {
  background: color-mix(in srgb, var(--cyan) 13%, var(--panel));
  box-shadow: 0 4px 18px color-mix(in srgb, var(--cyan) 16%, transparent);
}
.navigation-toggle-v6:hover,.navigation-toggle-v6[aria-expanded="true"] {
  background: color-mix(in srgb, var(--pink) 12%, var(--panel));
  border-color: var(--pink);
  box-shadow: 0 4px 18px color-mix(in srgb, var(--pink) 17%, transparent);
}

/* Keep all four destinations and their art, but trade four framed blocks for
   an editorial row. Its existing horizontal swipe at small widths remains. */
:root body[data-page="home"] main .home-game-discovery .game-grid-v3 > a:not(.game-all-v3) {
  min-height: 0; padding: 0 0 12px; gap: 6px 0;
  border: 0; border-bottom: 2px solid color-mix(in srgb, var(--platform-accent) 65%, var(--line));
  border-radius: 0; background: transparent; box-shadow: none;
  transition: border-color .2s ease, filter .2s ease;
}
:root body[data-page="home"] main .home-game-discovery .game-grid-v3 > a:not(.game-all-v3) .game-art-v3 {
  width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0 0 6px;
  border: 0; border-radius: 8px; box-shadow: none;
}
:root body[data-page="home"] main .home-game-discovery .game-grid-v3 > a:not(.game-all-v3) strong {
  color: var(--platform-accent); font-size: clamp(18px, 1.6vw, 22px);
}
:root body[data-page="home"] main .home-game-discovery .game-grid-v3 > a:not(.game-all-v3):is(:hover,:focus-visible) {
  transform: none; border-color: var(--platform-accent); background: transparent;
  box-shadow: none; filter: brightness(1.13);
}
.future-game-v10 {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px 16px;
  width: fit-content; max-width: 100%; min-height: 50px;
  margin-top: 16px; padding: 10px 0;
  border-bottom: 1px solid var(--line-strong);
  color: var(--copy); font-size: 14px;
}
.future-game-v10 strong { color: var(--text); font-size: 17px; }
.future-game-kicker-v10 { color: var(--pink-strong); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.future-game-arrow-v10 { color: var(--cyan); font-weight: 750; white-space: nowrap; }
.future-game-v10:hover .future-game-arrow-v10 { text-decoration: underline; text-underline-offset: 4px; }

/* The title and View action open the listing; the facts are their own real links.
   The title's stretched hit area preserves the old whole-card click target. */
:root body:not(.staff-v3):not([data-staff-page]) .discovery-card-v10 {
  position: relative; display: flex !important; flex-direction: column; gap: 10px;
  padding: 20px !important; min-height: 0;
}
:root body[data-page="servers"] #server-list .discovery-card-v10 { padding: 20px 12px !important; }
:root body:not(.staff-v3):not([data-staff-page]) .discovery-card-v10 > :is(.server-description,.discovery-meta-v10,.server-tags,.server-card-bottom) {
  grid-area: auto !important; grid-column: auto !important; grid-row: auto !important;
}
.discovery-card-v10 .discovery-card-identity-v10 {
  position: relative; z-index: 2; display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center; gap: 12px;
}
.discovery-card-v10 .discovery-card-identity-v10 .server-card-media {
  grid-column: auto !important; grid-row: 1 !important;
  align-self: stretch; width: 64px !important; height: 64px !important;
}
.discovery-card-v10 .discovery-card-identity-v10 h3 { grid-column: 2; grid-row: 1; margin: 0; min-width: 0; }
.discovery-card-v10 .server-description { position: relative; z-index: 2; margin: 0; }
.discovery-card-v10 .server-card-bottom {
  position: relative; z-index: 2; display: flex !important; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 8px 14px;
  margin-top: 2px !important; padding-top: 10px !important; border-top: 1px solid var(--line) !important;
}
.discovery-card-v10 h3 .discovery-card-title-v10 { color: inherit; text-decoration: none; }
.discovery-card-v10 h3 .discovery-card-title-v10::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.discovery-card-v10 .discovery-meta-v10 { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.discovery-card-v10 .discovery-meta-v10 .metadata-value-v5::before { content: none; }
.discovery-card-v10 .discovery-meta-v10 > :is(a,span) {
  display: inline-flex; align-items: center; min-height: 31px; max-width: 100%;
  padding: 4px 10px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--surface-inset,var(--panel-2));
  color: var(--copy); font-size: 12px; font-weight: 700; line-height: 1.3;
  white-space: normal; text-align: left; text-decoration: none;
}
.discovery-card-v10 .discovery-meta-v10 > .platform-badge-v5 {
  color: var(--platform-accent); border-color: color-mix(in srgb,var(--platform-accent) 38%,var(--line));
  background: color-mix(in srgb,var(--platform-accent) 9%,var(--panel));
}
.discovery-card-v10 .discovery-meta-v10 > a:is(:hover,:focus-visible) {
  border-color: var(--pink); background: var(--selection-surface); color: var(--text);
}
.discovery-card-v10 .discovery-meta-v10 > a:focus-visible,
.discovery-card-v10 .server-card-action:focus-visible,
.discovery-card-v10 h3 a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.discovery-card-v10 .server-tags { position: relative; z-index: 2; }
.discovery-card-v10 .server-tags span {
  padding: 4px 8px !important; border: 1px solid var(--line) !important;
  border-radius: 6px; background: var(--panel-2) !important;
  color: var(--muted); font-weight: 600 !important;
}
.discovery-card-v10 .server-tags a {
  position: relative; z-index: 2; display: inline-flex; align-items: center;
  min-height: 30px; padding: 4px 8px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--panel-2); color: var(--copy);
  font-size: 12px; font-weight: 700; text-decoration: none;
}
.discovery-card-v10 .server-tags a:is(:hover,:focus-visible) { border-color: var(--pink); color: var(--text); background: var(--selection-surface); }
.discovery-card-v10 .server-tags a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.discovery-card-v10 .server-tags a.server-age-tag-v11,
#server-tags-v3 a.server-age-tag-v11 {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
  background: color-mix(in srgb, var(--danger) 12%, var(--panel));
  color: var(--danger); font-weight: 800;
}
.discovery-card-v10 .server-tags a.server-age-tag-v11:is(:hover,:focus-visible),
#server-tags-v3 a.server-age-tag-v11:is(:hover,:focus-visible) {
  border-color: var(--danger); background: color-mix(in srgb, var(--danger) 20%, var(--panel)); color: var(--danger);
}
#server-tags-v3 a.server-age-tag-v11::before { content: none; }
.discovery-card-v10 .server-card-bottom .player-count-v10 {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  min-height: 34px; padding: 5px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel-2); color: var(--copy);
  font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums;
}
:root body:not(.staff-v3):not([data-staff-page]) .discovery-card-v10 .server-card-bottom .player-count-v10.is-live {
  border-color: color-mix(in srgb,var(--success) 50%,var(--line)); color: var(--success);
}
:root body:not(.staff-v3):not([data-staff-page]) .discovery-card-v10 .server-card-bottom .player-count-v10.is-live::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--success);
}
:root[data-brand-motion="off"] .discovery-card-v10 .server-card-bottom .player-count-v10.is-live::before { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-brand-motion="off"]) .discovery-card-v10 .server-card-bottom .player-count-v10.is-live::before { animation: browse-live-dot 2.4s ease-in-out infinite; }
}
@keyframes browse-live-dot { 50% { box-shadow: 0 0 0 5px color-mix(in srgb,var(--success) 12%,transparent); } }
.server-shortlist-card .server-shortlist-actions .shortlist-button-v9 {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 7px 14px; border: 1px solid var(--line-strong);
  border-radius: 9px; background: var(--panel-2); color: var(--text);
  font-size: 13px; font-weight: 750;
}
.server-shortlist-card .server-shortlist-actions .shortlist-button-v9:not(:disabled):is(:hover,:focus-visible) {
  border-color: var(--pink); background: var(--selection-surface);
}
.server-shortlist-card .server-shortlist-actions .shortlist-button-v9[aria-pressed="true"] {
  border-color: var(--interactive-edge); background: var(--selection-surface);
}
.discovery-card-v10 .status {
  padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--panel-2);
  color: var(--copy); font-weight: 700;
}
.discovery-card-v10 .status.live {
  border-color: color-mix(in srgb,var(--success) 40%,var(--line));
  background: color-mix(in srgb,var(--success) 9%,var(--panel)); color: var(--success);
}
.discovery-card-v10 .status.stale { border-color: color-mix(in srgb,var(--pink) 32%,var(--line)); color: var(--pink-strong); }
.discovery-card-v10 .status.offline { color: var(--muted); }
:root body:not(.staff-v3):not([data-staff-page]) .discovery-card-v10 .server-card-action {
  position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 8px 15px; border: 1px solid color-mix(in srgb,var(--pink) 55%,var(--line));
  border-radius: 9px; background: color-mix(in srgb,var(--pink) 10%,var(--panel));
  color: var(--pink-strong); font-size: 13px; font-weight: 800; transform: none;
}
:root body:not(.staff-v3):not([data-staff-page]) .discovery-card-v10 .server-card-action:is(:hover,:focus-visible) {
  background: color-mix(in srgb,var(--pink) 18%,var(--panel)); border-color: var(--pink);
}
:root body:not(.staff-v3):not([data-staff-page]) .discovery-card-v10 .server-card-action::after { content: " ↗"; }
:root body[data-page="servers"] main #server-list .discovery-card-v10 .server-card-action { background: color-mix(in srgb,var(--pink) 10%,var(--panel)); color: var(--pink-strong); }
@media (max-width: 700px) {
  .future-game-v10 { align-items: flex-start; }
  :root body:not(.staff-v3):not([data-staff-page]) .discovery-card-v10 { padding: 16px !important; }
  :root body[data-page="servers"] #server-list .discovery-card-v10 { padding: 16px 0 !important; }
  .discovery-card-v10 .discovery-card-identity-v10 { grid-template-columns: 56px minmax(0,1fr); }
  .discovery-card-v10 .discovery-card-identity-v10 .server-card-media { width: 56px !important; height: 56px !important; }
  .discovery-card-v10 .discovery-meta-v10 > :is(a,span) { min-height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .public-nav-v6 > .button-primary-v3 { animation: none !important; }
  :root body[data-page="home"] main .home-game-discovery .game-grid-v3 > a:not(.game-all-v3) { transition: none; }
}
:root[data-brand-motion="off"] .public-nav-v6 > .button-primary-v3 { animation: none !important; filter: none; }
@media (forced-colors: active) {
  :root body[data-page="home"] .home-hero-intro h1 .gradient-text-v3 { background-image: none !important; }
  .discovery-card-v10 .discovery-meta-v10 > :is(a,span),
  .discovery-card-v10 .server-tags a,.discovery-card-v10 .player-count-v10 { border-color: CanvasText; background: Canvas; color: CanvasText; }
  .discovery-card-v10 .server-tags a.server-age-tag-v11,#server-tags-v3 a.server-age-tag-v11 { border-color: CanvasText; background: Canvas; color: CanvasText; }
  :root body:not(.staff-v3):not([data-staff-page]) .discovery-card-v10 .server-card-bottom .player-count-v10.is-live::before { background: Highlight; }
}

/* Boosted cards use the selected theme's button colours without obscuring content. */
:root body[data-page="home"] #featured-server-list > .server-boosted-v11 { position: relative; }
:root body[data-page="home"] #featured-server-list > .server-boosted-v11::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 2px;
  background-image: var(--brand-action-gradient); background-size: 160% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: filter 480ms ease;
}
@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  :root body[data-page="home"] #featured-server-list > .server-boosted-v11::after {
    animation: primary-colour-drift 6.5s ease-in-out infinite alternate;
  }
  :root:not([data-brand-motion="off"]) body[data-page="home"] #featured-server-list > .server-boosted-v11:focus-within::after { filter: brightness(1.14); }
  @media (hover: hover) and (pointer: fine) {
    :root:not([data-brand-motion="off"]) body[data-page="home"] #featured-server-list > .server-boosted-v11:hover::after { filter: brightness(1.14); }
  }
}
:root[data-brand-motion="off"] body[data-page="home"] #featured-server-list > .server-boosted-v11::after,
:root[data-primary-motion="paused"] body[data-page="home"] #featured-server-list > .server-boosted-v11::after,
:root body[data-page="home"] #featured-server-list > .server-boosted-v11[data-primary-motion="paused"]::after { animation-play-state: paused; }
@media (forced-colors: active) {
  :root body[data-page="home"] #featured-server-list > .server-boosted-v11 { outline: 2px solid Highlight; }
}

/* Game hubs keep artwork and copy inside their columns at laptop and phone sizes. */
:root body[data-page="games"] .game-page-hero-grid-v4:has(.game-page-all-logo-v5) {
  grid-template-columns: minmax(0, 240px) minmax(0, 760px);
  justify-content: center; gap: clamp(28px, 5vw, 70px);
}
:root body[data-page="games"] .game-page-mark-v4:has(.game-page-all-logo-v5) {
  width: min(100%, 240px); height: auto; aspect-ratio: 1;
  border: 0; background: transparent; box-shadow: none;
}
:root body[data-page="games"] .game-page-hero-grid-v4:has(.game-official-artwork-v6) {
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  align-items: center;
}
:root body[data-page="games"] .game-page-hero-grid-v4 > *,
:root body[data-page="games"] .game-hub-grid-v4 > * { min-width: 0; max-width: 100%; }
:root body[data-page="games"] .game-page-hero-v4 h1 { overflow-wrap: normal; word-break: normal; }
:root body[data-page="games"] .game-page-nav-v4 { display: flex; flex-wrap: wrap; justify-content: center; }
@media (max-width: 900px) {
  :root body[data-page="games"] .game-page-hero-grid-v4:has(.game-page-all-logo-v5) { grid-template-columns: minmax(0,1fr); justify-items: start; }
  :root body[data-page="games"] .game-page-mark-v4:has(.game-page-all-logo-v5) { width: min(36vw,180px); }
  :root body[data-page="games"] .game-page-hero-grid-v4:has(.game-official-artwork-v6) { grid-template-columns: minmax(0,1fr); }
  :root body[data-page="games"] .game-primary-grid-v5 { grid-template-columns: minmax(0,1fr); }
  :root body[data-page="games"] .game-page-mark-v4:has(.game-official-artwork-v6) { width: min(100%,540px); }
}