/* BrowseRP public/member composition. Load after legacy page CSS and
   design-system.css. Shared tokens and control behaviour belong to that system;
   this sheet owns content layout only. No private staff selectors or data. */
:root {
  /* Display titles share the site's sturdy sans rather than a decorative serif. */
  --font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body:not(.staff-v3):not([data-staff-page]) {
  --public-card-inset: 24px;
  --public-section-gap: clamp(32px, 4vw, 56px);
}

/* Discovery is an open workspace. The search and choices precede the
   results rail so the advert begins with the content, independent of consent. */
body[data-page="servers"] .directory-intro-v3 { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-block: 28px 24px; margin-bottom: 0; }
:root body[data-page="servers"] .directory-intro-v3 h1 { max-width: none; font-size: clamp(26px, 2.5vw, 34px); line-height: 1.18; letter-spacing: -.035em; text-wrap: balance; }
body[data-page="servers"] .directory-intro-v3 .eyebrow-v3 { margin-bottom: 12px; }
body[data-page="servers"] .directory-intro-v3 p { margin: 8px 0 0; font-size: 14px; }
body[data-page="servers"] .directory-toolbar-v3 { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; flex: 0 0 auto; margin: 0; }
body[data-page="servers"] .directory-toolbar-v3 a { gap: 8px; font-size: 14px; }
body[data-page="servers"] .directory-main-v3 { min-width: 0; }
body[data-page="servers"] .directory-discovery.smart-discovery { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body[data-page="servers"] .directory-discovery .smart-search-row { max-width: none; margin: 0 0 12px; }
body[data-page="servers"] .directory-discovery .field-search-v3 { margin: 0; }
/* The real label remains available to assistive technology. */
body[data-page="servers"] .directory-discovery .field-search-v3 > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:root body[data-page="servers"] .directory-discovery .field-search-v3 input { min-height: 56px; padding: 16px 20px; background: var(--panel); border-color: var(--line); border-radius: 12px; font-size: 16px; box-shadow: none; }
:root body[data-page="servers"] .directory-discovery .field-search-v3 input:focus-visible { border-color: var(--violet); }
body[data-page="servers"] .directory-control-row { display: flex; flex-wrap: wrap; max-width: none; gap: 4px 12px; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
:root body[data-page="servers"] .directory-control-row button { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; flex: 0 1 auto; min-width: 0; min-height: 44px; padding: 8px 12px; font-size: 14px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--copy); }
body[data-page="servers"] .directory-game-choice img { width: 28px; height: 22px; border-radius: 4px; }
:root body[data-page="servers"] .directory-control-row .smart-filter-toggle { border: 1px solid var(--line); margin-left: auto; }
:root body[data-page="servers"] .directory-game-choice[aria-pressed="true"] { color: var(--text); background: var(--selection-surface); box-shadow: inset 0 -2px var(--violet); }
:root body[data-page="servers"] .directory-control-row button:hover { color: var(--text); background: var(--surface-hover); }
body[data-page="servers"] .directory-filter-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: transparent; }
body[data-page="servers"] .directory-filter-panel :is(.smart-primary-filters, .smart-refinements) { display: contents; }
body[data-page="servers"] .directory-filter-panel .field-v3 { margin: 0; grid-column: auto; }
body[data-page="servers"] .directory-filter-panel :is(.smart-checks, .smart-access-filters, .directory-game-hint) { grid-column: 1 / -1; }
body[data-page="servers"] .directory-filter-panel .smart-checks { display: flex; flex-direction: row; gap: 8px 20px; margin: 0; padding-top: 4px; }
body[data-page="servers"] .directory-filter-panel .check-v3 { min-height: 44px; margin: 0; font-size: 14px; }
body[data-page="servers"] #clear-filters { margin-left: auto; }
body[data-page="servers"] .directory-filter-panel .smart-access-filters { margin: 0; padding-top: 16px; border-top: 1px solid var(--line-soft); }
body[data-page="servers"] .directory-filter-panel .smart-access-help { color: var(--muted); font-size: 13px; line-height: 1.6; }
body[data-page="servers"] .directory-game-hint { margin: 0; font-size: 14px; }
body[data-page="servers"] .smart-filter-feedback { color: var(--muted); }
body[data-page="servers"] .smart-filter-feedback:not(:empty) { margin-bottom: 0; padding-top: 8px; font-size: 13px; }
body[data-page="servers"] .smart-filter-chips:not(:empty) { margin-top: 16px; }
body[data-page="servers"] .result-bar-v3 { min-height: 48px; margin-block: 16px 8px; gap: 4px 20px; align-items: center; flex-wrap: wrap; }
body[data-page="servers"] .result-bar-v3 .directory-sort { display: flex; align-items: center; gap: 8px; margin: 0 0 0 auto; }
body[data-page="servers"] .directory-sort > span { white-space: nowrap; font-size: 13px; color: var(--muted); }
body[data-page="servers"] .directory-sort :is(select, .modern-select) { width: 190px; max-width: 100%; }
body[data-page="servers"] .result-bar-v3 .smart-filter-chips { flex: 1 1 100%; margin: 0; }
body[data-page="servers"] #result-count { color: var(--text); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
body[data-page="servers"] .recommendations-v7 { padding: 14px 0 18px; }
body[data-page="servers"] .recommendation-heading { flex-direction: row; align-items: center; gap: 12px 24px; }
body[data-page="servers"] .recommendation-heading > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
body[data-page="servers"] .recommendation-heading h2 { margin: 0; font-size: 16px; letter-spacing: -.015em; }
body[data-page="servers"] .recommendation-message { font-size: 13px; }
:root body[data-page="servers"] .recommendation-actions button { border: 0; background: transparent; box-shadow: none; font-size: 13px; min-height: 44px; padding: 8px; color: var(--copy); }
:root body[data-page="servers"] .recommendation-actions button:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }

/* A community is one coherent card, with independent Save/Compare controls.
   Identity and readable content lead; metadata and tags no longer get boxes. */
:where(body:not(.staff-v3):not([data-staff-page])) .server-list { gap: 16px; }
:root body:not(.staff-v3):not([data-staff-page]) .server-shortlist-card { border: 1px solid var(--line-soft); border-radius: 14px; background: var(--panel); box-shadow: none; overflow: hidden; }
:root body:not(.staff-v3):not([data-staff-page]) .server-card:not(.server-card-skeleton) { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 8px 20px; padding: 24px 24px 4px; min-height: 0; border: 0; border-radius: 14px; background: transparent; box-shadow: none; transform: none; }
:root body:not(.staff-v3):not([data-staff-page]) .server-card:not(.server-card-skeleton)::before,
:root body:not(.staff-v3):not([data-staff-page]) .server-card:not(.server-card-skeleton)::after { content: none; }
:root body:not(.staff-v3):not([data-staff-page]) .server-card .server-card-top { display: contents; }
:root body:not(.staff-v3):not([data-staff-page]) .server-card .server-card-media { grid-column: 1; grid-row: 1 / 4; align-self: start; width: 72px; height: 72px; border: 0; border-radius: 12px; background: var(--surface-inset); box-shadow: none; }
:root body:not(.staff-v3):not([data-staff-page]) .server-card .server-card-media-image { object-fit: contain; padding: 4px; transform: none; }
:root body:not(.staff-v3):not([data-staff-page]) .server-card .status { grid-column: 3; grid-row: 1; align-self: center; font-size: 12px; }
:root body:not(.staff-v3):not([data-staff-page]) .server-card > h3 { grid-column: 2; grid-row: 1; align-self: center; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.025em; }
:root body:not(.staff-v3):not([data-staff-page]) .server-card > .server-description { grid-column: 2 / 4; grid-row: 2; color: var(--copy); font-size: 14px; line-height: 1.6; margin: 0; }
:root body:not(.staff-v3):not([data-staff-page]) .server-card > .server-meta { grid-column: 2 / 4; grid-row: 3; font-size: 12px; line-height: 1.6; font-weight: 500; }
:root body:not(.staff-v3):not([data-staff-page]) .server-card > .server-tags { grid-column: 2 / 4; grid-row: 4; gap: 6px 12px; }
:root body:not(.staff-v3):not([data-staff-page]) .server-card .server-tags span { border: 0; background: transparent; box-shadow: none; padding: 0; font-size: 12px; font-weight: 400; color: var(--muted); }
:root body:not(.staff-v3):not([data-staff-page]) .server-card .server-meta .platform-badge { border: 0; background: transparent; padding: 0; }
:root body:not(.staff-v3):not([data-staff-page]) .server-card > .server-card-bottom { grid-column: 2 / 4; grid-row: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin: 0; padding: 4px 0 0; border: 0; }
:root body:not(.staff-v3):not([data-staff-page]) .server-card-bottom > strong { font-size: 12px; font-weight: 500; color: var(--muted); line-height: 1.5; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
:root body:not(.staff-v3):not([data-staff-page]) .server-card-bottom .server-card-action { color: var(--cyan); font-size: 13px; font-weight: 600; transform: none; }
:root body:not(.staff-v3):not([data-staff-page]) .server-card-action::after { content: " ↗"; }
:root body:not(.staff-v3):not([data-staff-page]) .server-shortlist-actions { gap: 4px 8px; padding: 0 16px 8px 108px; border: 0; background: transparent; }
:root body:not(.staff-v3):not([data-staff-page]) .shortlist-button-v9 { border-color: transparent; background: transparent; font-weight: 500; font-size: 12px; }
:root body:not(.staff-v3):not([data-staff-page]) .shortlist-button-v9[aria-pressed="true"] { color: var(--violet); background: var(--selection-surface); }
:root body:not(.staff-v3):not([data-staff-page]) .shortlist-open-v9 { color: var(--violet); font-size: 12px; }
:where(body:not(.staff-v3):not([data-staff-page])) .shortlist-detail-v9 { border: 0; background: transparent; padding: 8px 0 0; }
:where(body:not(.staff-v3):not([data-staff-page])) .shortlist-status-v9 { background: var(--panel-2); color: var(--text); border-color: var(--line); box-shadow: var(--shadow-md); }
@media (hover: hover) and (pointer: fine) {
  :root body:not(.staff-v3):not([data-staff-page]) .server-shortlist-card:hover { background: var(--surface-hover); border-color: var(--line); }
  :root body:not(.staff-v3):not([data-staff-page]) .server-card:not(.server-card-skeleton):hover { background: transparent; }
}
/* Compact recommendation grids keep their existing content and card actions. */
:root body:not(.staff-v3):not([data-staff-page]) .recommendation-results .server-card:not(.server-card-skeleton) { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
:root body:not(.staff-v3):not([data-staff-page]) .recommendation-results .server-card .server-card-top { display: flex; }
:root body:not(.staff-v3):not([data-staff-page]) .recommendation-results .server-card .server-card-media { width: 56px; height: 56px; }
:root body:not(.staff-v3):not([data-staff-page]) .recommendation-results .server-card > .server-card-bottom { margin-top: auto; }
:root body:not(.staff-v3):not([data-staff-page]) .recommendation-results .server-shortlist-actions { padding-left: 12px; }

/* Public section rhythm. Pattern geometry and shared header are Main's lane. */
:where(body:not(.staff-v3):not([data-staff-page])) .section-head-v3 { gap: 24px; margin-bottom: 24px; }
:where(body:not(.staff-v3):not([data-staff-page])) .section-head-v3 h2 { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.18; letter-spacing: -.025em; }
:where(body:not(.staff-v3):not([data-staff-page])) .section-head-v3 p { font-size: 16px; line-height: 1.65; }
:root body:not(.staff-v3):not([data-staff-page]) .game-showcase-v3 { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
:root body:not(.staff-v3):not([data-staff-page]) .game-grid-v3 > a { padding: 12px; gap: 8px; border: 1px solid transparent; border-radius: var(--control-radius, 12px); background: transparent; box-shadow: none; }
:where(body:not(.staff-v3):not([data-staff-page])) .game-grid-v3 .game-art-v3 { border-radius: 10px; }
:where(body:not(.staff-v3):not([data-staff-page])) .game-grid-v3 strong { font-size: 18px; line-height: 1.35; }
:where(body:not(.staff-v3):not([data-staff-page])) .game-grid-v3 small { font-size: 14px; line-height: 1.5; color: var(--muted); }
:root body:not(.staff-v3):not([data-staff-page]) .game-official-card-v6 { background: transparent; border-color: transparent; border-radius: var(--control-radius, 12px); box-shadow: none; }
:where(body:not(.staff-v3):not([data-staff-page])) .game-official-card-v6 .game-hub-copy-v4 strong { font-size: 21px; line-height: 1.3; }
:where(body:not(.staff-v3):not([data-staff-page])) .game-official-card-v6 .game-hub-copy-v4 small { font-size: 14px; color: var(--muted); }
:root body:not(.staff-v3):not([data-staff-page]) .game-future-combined-v7 { background: transparent; border: 0; border-radius: 0; gap: 28px; }
:where(body:not(.staff-v3):not([data-staff-page])) .game-future-combined-copy-v7 { padding: clamp(24px, 3vw, 40px); }
:root body:not(.staff-v3):not([data-staff-page]) .game-page-mark-v4 { box-shadow: none; }

/* Details: a clear identity lead, readable community copy and quieter facts. */
:root #server-detail-v3.server-page-v7 .detail-banner-v3 { min-height: 0; border: 0; border-radius: 0; background: transparent; }
:root #server-detail-v3.server-page-v7 .detail-title-v3 { padding: 24px 0 32px; gap: 24px; border-bottom: 1px solid var(--line); background: transparent; }
#server-detail-v3.server-page-v7 .detail-title-v3 h1 { font-weight: 750; line-height: 1.12; }
:root #server-detail-v3.server-page-v7 .detail-logo-v3 { width: 96px; height: 96px; border-radius: var(--control-radius, 12px); background: var(--panel); border-color: var(--line); box-shadow: none; }
:root #server-detail-v3.server-page-v7 .panel-v3 { padding: 24px; border: 0; border-radius: var(--control-radius, 12px); background: var(--panel); box-shadow: none; }
#server-detail-v3.server-page-v7 .server-community-v7 p { max-width: 72ch; line-height: 1.75; }
#server-detail-v3.server-page-v7 .server-info-card-v5 { padding-block: 14px; gap: 16px; }
#server-detail-v3.server-page-v7 .server-info-card-v5 dt { font-size: 14px; color: var(--muted); }
#server-detail-v3.server-page-v7 .server-info-card-v5 dd { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#server-detail-v3.server-page-v7 .server-facts-v3 > p { font-size: 13px; }
:root #server-detail-v3.server-page-v7 .server-report-v7 { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
#server-detail-v3.server-page-v7 .server-report-v7 > .panel-v3 { box-shadow: none; }
:root #server-detail-v3 .comment-v3 { padding: 20px 0; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: transparent; }
#server-detail-v3 .comment-heading-v3 { align-items: flex-start; gap: 12px; }
#server-detail-v3 .comment-author-line-v3 { gap: 8px; }
#server-detail-v3 .comment-v3 :is(time, .comment-dates-v3) { font-size: 13px; }
#server-detail-v3 .comment-parent-v3 { border-left-width: 2px; background: var(--panel-2); }
#server-detail-v3 .comment-actions-v3 { margin-top: 12px; }
#server-detail-v3 .recommendations-v7 { padding-block: 32px; }

/* Comparison remains a real table with its existing contained scroll region. */
body[data-page="compare"] .compare-heading { margin-bottom: 24px; }
body[data-page="compare"] .compare-heading p { font-size: 16px; max-width: 64ch; }
body[data-page="compare"] .compare-toolbar { padding: 16px 0; border: 0; border-block: 1px solid var(--line); border-radius: 0; background: transparent; }
body[data-page="compare"] .compare-toolbar > strong { color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; }
body[data-page="compare"] .compare-results { border: 0; border-block: 1px solid var(--line); border-radius: 0; box-shadow: none; }
body[data-page="compare"] .compare-table :is(th, td) { padding: 20px; }
body[data-page="compare"] .compare-table th.compare-row-heading { background: var(--panel-2); color: var(--copy); font-size: 14px; }
body[data-page="compare"] .compare-table td { font-size: 15px; font-variant-numeric: tabular-nums; }
body[data-page="compare"] .compare-server-media { width: 76px; height: 76px; border-color: var(--line); border-radius: var(--card-radius, 16px); }
body[data-page="compare"] .compare-server-media img { object-fit: contain; padding: 8px; }
body[data-page="compare"] .compare-server-name { font-size: 21px; }
body[data-page="compare"] .compare-tags li { border: 0; border-radius: 6px; font-size: 13px; }
body[data-page="compare"] :is(.compare-status, .compare-footnote, .compare-scroll-hint, .compare-server-error) { font-size: 14px; }
body[data-page="compare"] .compare-empty { max-width: 760px; padding-block: 40px; }

/* Member areas: summary values lead; settings stay grouped with their actions.
   Body scope excludes both private workspaces even though they reuse classes. */
body:is([data-page="profile"], [data-page="dashboard"]) .portal-stage { padding-block: 32px 64px; }
body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .portal-head { gap: 24px; margin-bottom: 24px; }
body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .portal-head h1 { font-size: clamp(32px, 3.4vw, 48px); letter-spacing: -.035em; }
body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .portal-head p { font-size: 16px; color: var(--copy); }
:root body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .portal-head .portal-avatar { width: 80px; height: 80px; box-shadow: none; }
:root body:is([data-page="profile"], [data-page="dashboard"]) .metric-grid-v2 { gap: 0; margin-bottom: 24px; border-block: 1px solid var(--line); }
:root body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .metric-v2 { min-height: 0; padding: 24px; border: 0; border-right: 1px solid var(--line-soft); border-radius: 0; background: transparent; box-shadow: none; }
body:is([data-page="profile"], [data-page="dashboard"]) .metric-v2 strong { color: var(--text); font-size: 36px; line-height: 1.15; font-variant-numeric: tabular-nums; }
body:is([data-page="profile"], [data-page="dashboard"]) .metric-v2 small { margin-top: 12px; font-size: 14px; line-height: 1.5; }
:root body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .portal-panel-v2 { padding: 32px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
:root body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .portal-panel-head { margin-bottom: 24px; padding-bottom: 0; border: 0; gap: 16px 24px; }
:root body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .portal-panel-head h2 { font-size: clamp(23px, 2.2vw, 28px); line-height: 1.2; }
body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .portal-panel-head p { font-size: 15px; color: var(--copy); }
body:is([data-page="profile"], [data-page="dashboard"]) .portal-item { gap: 16px; padding-block: 20px; }
body:is([data-page="profile"], [data-page="dashboard"]) .portal-item-main strong { color: var(--text); font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }
body:is([data-page="profile"], [data-page="dashboard"]) .portal-item-actions { gap: 8px; }
body:is([data-page="profile"], [data-page="dashboard"]) .profile-settings-layout-v7 { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 32px; }
:root body:is([data-page="profile"], [data-page="dashboard"]) .profile-settings-layout-v7 > .member-connections { padding: 0 0 0 28px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; }
:root body:is([data-page="profile"], [data-page="dashboard"]) .profile-settings-layout-v7 .member-connection { padding: 18px 0; border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; border-radius: 0; }
body:is([data-page="profile"], [data-page="dashboard"]) .profile-settings-layout-v7 .member-connection-title strong { font-size: 16px; }
body:is([data-page="profile"], [data-page="dashboard"]) .profile-settings-layout-v7 .member-connection-unavailable { font-size: 13px; }
:root body:is([data-page="profile"], [data-page="dashboard"]) .profile-picture-editor-v3 { padding: 0; border: 0; border-radius: 0; background: transparent; }
body:is([data-page="profile"], [data-page="dashboard"]) .profile-picture-editor-v3 .portal-help { font-size: 14px; }
:root body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .portal-empty-v2 { padding: 20px 0; background: transparent; border: 0; justify-items: start; text-align: left; }
:root body:is([data-page="profile"], [data-page="dashboard"]) :is(.member-moderation-card-v3, .privacy-request-card, .recommendation-settings) { padding: 20px 0; background: transparent; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; }
body:is([data-page="profile"], [data-page="dashboard"]) .privacy-requests [data-privacy-requests-content] { padding-inline: 0; }
body:is([data-page="profile"], [data-page="dashboard"]) .privacy-request-badge { color: var(--copy); background: var(--panel); border-color: var(--line); }
body:is([data-page="profile"], [data-page="dashboard"]) .privacy-request-copy { background: var(--panel); border-color: var(--line); }
body:is([data-page="profile"], [data-page="dashboard"]) .member-moderation-evidence-v3 { background: var(--panel); border-left-color: var(--violet); }
:root body:is([data-page="profile"], [data-page="dashboard"]) .access-gate-v2 { padding: clamp(24px, 4vw, 48px); border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body:is([data-page="profile"], [data-page="dashboard"]) .access-gate-v2 h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.15; }

/* Editorial and quieter routes keep their existing section order and wording. */
:where(body:not(.staff-v3):not([data-staff-page])) .journal-heading-v6 { gap: 16px; align-items: baseline; margin-bottom: 24px; }
:root body:not(.staff-v3):not([data-staff-page]) .journal-grid-v6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
:root body:not(.staff-v3):not([data-staff-page]) .journal-card-v6 { padding: 28px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
:root body:not(.staff-v3):not([data-staff-page]) .journal-card-featured-v6 { grid-column: 1 / -1; background: transparent; }
:where(body:not(.staff-v3):not([data-staff-page])) .journal-card-v6 h3 { margin-block: 20px 12px; line-height: 1.2; }
:where(body:not(.staff-v3):not([data-staff-page])) .journal-card-v6 p { font-size: 16px; line-height: 1.7; }
:where(body:not(.staff-v3):not([data-staff-page])) :is(.journal-card-meta-v6, .journal-article-meta-v6) { font-size: 13px; gap: 12px 20px; }
:where(body:not(.staff-v3):not([data-staff-page])) .journal-card-meta-v6 > span { color: var(--pink); }
:root body:not(.staff-v3):not([data-staff-page]) .journal-read-v6 { min-height: 44px; padding-top: 8px; border: 0; color: var(--cyan); }
:where(body:not(.staff-v3):not([data-staff-page])) .journal-prose-v6 { max-width: 72ch; font-size: 18px; line-height: 1.8; color: var(--copy); }
:where(body:not(.staff-v3):not([data-staff-page])) .journal-prose-v6 :is(h2, h3) { color: var(--text); }
:where(body:not(.staff-v3):not([data-staff-page])) .journal-article-head-v6 { margin-bottom: 32px; padding-bottom: 24px; }
:where(body:not(.staff-v3):not([data-staff-page])) .journal-article-head-v6 > p { font-size: 19px; line-height: 1.65; }
:where(body:not(.staff-v3):not([data-staff-page])) :is(.journal-prose-v6, .legal-v3) a:not(.button-v3) { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
:where(body:not(.staff-v3):not([data-staff-page])) .legal-v3 { max-width: 960px; }
:where(body:not(.staff-v3):not([data-staff-page])) .legal-v3 :is(p, li) { max-width: 72ch; font-size: 16px; line-height: 1.75; }
:where(body:not(.staff-v3):not([data-staff-page])) .legal-v3 section { padding-block: 28px; }
:where(body:not(.staff-v3):not([data-staff-page])) .legal-v3 h2 { font-size: clamp(24px, 2.5vw, 30px); line-height: 1.25; }
:where(body:not(.staff-v3):not([data-staff-page])) .legal-v3 li + li { margin-top: 8px; }
:where(body:not(.staff-v3):not([data-staff-page])) .listing-form-v3 { gap: 24px; }
:root body:not(.staff-v3):not([data-staff-page]) .listing-form-v3 fieldset { padding: 24px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
:where(body:not(.staff-v3):not([data-staff-page])) :is(.listing-form-v3, #appeal-form-v3, #advertising-enquiry-form) .field-v3 { gap: 8px; }
:root body:not(.staff-v3):not([data-staff-page]) .finder-form { padding: 24px 0; border: 0; border-block: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
:root body:not(.staff-v3):not([data-staff-page]) .finder-summary { padding: 24px; background: var(--panel); border: 0; border-radius: var(--control-radius, 12px); }
:where(body:not(.staff-v3):not([data-staff-page])) .finder-summary dd { color: var(--text); font-size: 16px; }
:where(body:not(.staff-v3):not([data-staff-page])) .finder-help { font-size: 16px; }
:where(body:not(.staff-v3):not([data-staff-page])) .finder-choice-copy strong { font-size: 16px; }
:where(body:not(.staff-v3):not([data-staff-page])) .finder-game-art { border-radius: 8px; }
:root body:not(.staff-v3):not([data-staff-page]) .staff-public-card { padding: 24px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
:root body:not(.staff-v3):not([data-staff-page]) .staff-public-hero { padding-block: 48px; background: transparent; }
:where(body:not(.staff-v3):not([data-staff-page])) .staff-public-hero h1 { font-size: clamp(36px, 4.5vw, 60px); }
:where(body:not(.staff-v3):not([data-staff-page])) .staff-public-section { min-height: 0; }
:where(body:not(.staff-v3):not([data-staff-page])) :is(.empty-v3, .journal-empty-v6) { padding: 32px 24px; border-radius: var(--panel-radius, 20px); background: var(--panel); border-color: var(--line); }
:where(body:not(.staff-v3):not([data-staff-page])) .footer-v3 { margin-top: 0; }
:where(body:not(.staff-v3):not([data-staff-page])) .footer-grid-v3 { gap: 28px 32px; padding-block: 44px 28px; }
:where(body:not(.staff-v3):not([data-staff-page])) .footer-brand-v3 p { color: var(--copy); line-height: 1.55; }
:where(body:not(.staff-v3):not([data-staff-page])) .footer-home-v3 { display: inline-flex; max-width: 100%; }
:where(body:not(.staff-v3):not([data-staff-page])) .footer-home-v3:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
:where(body:not(.staff-v3):not([data-staff-page])) .footer-column-v3 strong { margin-bottom: 8px; color: var(--text); font-size: 15px; line-height: 1.4; }
:where(body:not(.staff-v3):not([data-staff-page])) .footer-column-v3 :is(a, .cookie-preferences-trigger-v3) { display: flex; align-items: center; width: 100%; min-height: 44px; padding-block: 8px; color: var(--copy); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
:where(body:not(.staff-v3):not([data-staff-page])) .footer-column-v3 :is(a, .cookie-preferences-trigger-v3):hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
:where(body:not(.staff-v3):not([data-staff-page])) .footer-bottom-v3 { padding-block: 20px; gap: 12px 24px; color: var(--copy); font-size: 14px; }
@media (max-width: 1100px) {
  :where(body:not(.staff-v3):not([data-staff-page])) .footer-grid-v3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(body:not(.staff-v3):not([data-staff-page])) .footer-brand-v3 { grid-column: 1 / -1; }
}
@media (max-width: 430px) {
  :where(body:not(.staff-v3):not([data-staff-page])) .footer-grid-v3 { grid-template-columns: minmax(0, 1fr); }
  :where(body:not(.staff-v3):not([data-staff-page])) .footer-column-v3 + .footer-column-v3 { border-top: 1px solid var(--line-soft); padding-top: 14px; }
}

/* Existing chart geometry, gaps and real observations remain unchanged. */
:root #server-detail-v3 .player-history { margin-block: 8px 24px; padding: 28px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
#server-detail-v3 .player-history-heading { gap: 16px; }
:root #server-detail-v3 .player-history-chart { padding: 12px 0 4px; border-radius: 0; background: transparent; }
#server-detail-v3 .player-history-point { fill: var(--cyan); opacity: 1; }
#server-detail-v3 .player-history-axis { fill: var(--copy); }
#server-detail-v3 .player-history :is(p, summary, table, .field-v3 > span) { font-size: 14px; }
#server-detail-v3 .player-history summary { min-height: 44px; }
#server-detail-v3 .player-history [data-history-table] { border-radius: 8px; background: var(--panel-2); padding: 8px 12px; }

/* Real game media leads discovery; no replacement imagery or new actions. */
:root body[data-page="home"] .home-game-discovery .game-grid-v3 > a:not(.game-all-v3) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: start; gap: 8px; padding: 8px; }
:root body[data-page="home"] .home-game-discovery .game-grid-v3 > a:not(.game-all-v3) .game-art-v3 { grid-row: auto; width: 100%; height: auto; aspect-ratio: 460 / 215; border: 0; border-radius: 8px; box-shadow: none; }
:root body[data-page="home"] .home-game-discovery .game-grid-v3 > a:not(.game-all-v3) :is(strong, small) { padding-inline: 4px; }
:root body[data-page="home"] .home-game-discovery .game-grid-v3 > a[aria-pressed="true"] { background: var(--panel); border-color: transparent; box-shadow: inset 0 -2px var(--platform-accent, var(--violet)); }
:root body[data-page="home"] .home-game-discovery .game-grid-v3 > a:hover { transform: none; box-shadow: none; background: var(--surface-hover); }
:root body[data-page="home"] .home-game-discovery .game-grid-v3 > a[aria-pressed="true"]:hover { box-shadow: inset 0 -2px var(--platform-accent, var(--violet)); }
:root body:not(.staff-v3):not([data-staff-page]) .game-official-card-v6:is(:hover, :focus-within) { transform: none; background: transparent; box-shadow: none; }
:root body:not(.staff-v3):not([data-staff-page]) .game-official-card-v6 .game-hub-mark-v4 { border-radius: 10px; }
:root body:not(.staff-v3):not([data-staff-page]) .game-official-card-v6 .game-hub-copy-v4 { padding-left: 0; }
:root body:not(.staff-v3):not([data-staff-page]) .game-official-card-v6 > b { margin-right: 0; }

/* Existing community banners become actual media above the identity and join
   controls. The text stays on the page canvas in either theme. */
:root #server-detail-v3.server-page-v7 .detail-banner-v3.has-server-artwork-v3 { display: block; min-height: 0; }
:root #server-detail-v3.server-page-v7 .detail-banner-v3 > .server-import-banner-v3 { position: static; inset: auto; z-index: auto; display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; opacity: 1; border-radius: var(--control-radius, 12px); }
:root #server-detail-v3.server-page-v7 .detail-banner-v3 .detail-title-v3.detail-title-launch-v6 { padding: 24px 0 28px; background: transparent; }
:root #server-detail-v3.server-page-v7 .detail-title-launch-v6 .detail-actions-v3 { gap: 8px 12px; }
:root #server-detail-v3.server-page-v7 .detail-title-launch-v6 .detail-actions-v3 .button-v3 { min-height: var(--control-height, 48px); border-radius: var(--control-radius, 12px); }
:root #server-detail-v3.server-page-v7 #comment-form-v3 { padding: 20px 0 0; border: 0; border-radius: 0; background: transparent; }
:root #server-detail-v3.server-page-v7 .server-report-v7 > .panel-v3 { background: transparent; padding-inline: 0; }
:root #server-detail-v3.server-page-v7 .server-report-v7 > summary { padding-inline: 0; }
:root #server-detail-v3.server-page-v7 .server-information-v7 { align-content: start; }

/* Account tasks read as one workspace with an aligned summary strip and rows. */
:root body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .portal-stack { gap: 0; }
:root body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .metric-v2:last-child { border-right: 0; }
:root body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .metric-v2 span { font-size: 14px; font-weight: 550; }
:root body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .portal-list { border-top: 0; }
:root body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .portal-item:last-child { border-bottom: 0; }
:root body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .portal-item-actions { --control-height: 44px; max-width: 100%; }
:root body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .portal-item-actions > * { max-width: 100%; white-space: normal; }
:root body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .portal-nav { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--bg); box-shadow: none; }
:root body:is([data-page="profile"], [data-page="dashboard"]) .profile-settings-layout-v7 > .profile-form-v2 { gap: 20px; }
:root body:is([data-page="profile"], [data-page="dashboard"]) .profile-settings-layout-v7 .member-connections-grid { gap: 0; }
:root body:is([data-page="profile"], [data-page="dashboard"]) .profile-settings-layout-v7 .member-connection-unavailable { max-width: none; }
:root body:is([data-page="profile"], [data-page="dashboard"]) .profile-form-v2 > .button { justify-self: start; min-width: 152px; }
:root body:is([data-page="profile"], [data-page="dashboard"]) .profile-form-v2 .portal-field > :is(input, select, textarea) { width: 100%; }
:root body:is([data-page="profile"], [data-page="dashboard"]) #your-data > summary { min-height: 48px; padding-block: 12px; color: var(--text); font-size: 22px; font-weight: 650; cursor: pointer; }

/* An editorial lead and open article rows replace a wall of matching cards. */
:root body:not(.staff-v3):not([data-staff-page]) .journal-hero-v6 { background: transparent; }
:root body:not(.staff-v3):not([data-staff-page]) .journal-grid-v6 > .journal-card-v6:is(:hover, :focus-within) { background: transparent; box-shadow: none; border-color: var(--line); }
:root body:not(.staff-v3):not([data-staff-page]) .journal-card-v6 h3 a:hover { color: var(--cyan); }
:root body[data-blog-page="index"] .journal-card-featured-v6 { max-width: none; }
:root body[data-blog-page="index"] .journal-card-featured-v6 h3 { max-width: 28ch; font-size: clamp(28px, 3.2vw, 40px); }
:root body[data-page="compare"] :is(.compare-remove, .compare-clear, .compare-toolbar-actions .button-v3) { min-height: 44px; }
:root body[data-page="compare"] .compare-table tr > * + * { border-left-color: var(--line-soft); }

/* Public staff is a roster of people, not a second private workspace. */
:root body[data-page="staff-public"] .staff-public-hero::after,
:root body[data-page="staff-public"] .staff-public-mark::before,
:root body[data-page="staff-public"] .staff-public-card::before { content: none; }
:root body[data-page="staff-public"] .staff-public-mark img { filter: none; }
:root body[data-page="staff-public"] .staff-public-card:hover { transform: none; box-shadow: none; border-color: var(--line); }
:root body[data-page="staff-public"] .staff-public-card h3 { white-space: normal; overflow-wrap: anywhere; }
:root body[data-page="staff-public"] .staff-public-avatar { border: 0; border-radius: 50%; background: var(--panel); box-shadow: none; }
:root body[data-page="staff-public"] .staff-public-role { color: var(--violet); background: transparent; border: 0; border-radius: 0; padding: 4px 0; letter-spacing: 0; font-weight: 600; }
:root body[data-page="staff-public"] .staff-public-role::before { box-shadow: none; }
:root body[data-page="staff-public"] .staff-public-presence { border: 0; background: transparent; padding: 4px 0; font-weight: 550; letter-spacing: 0; }
:root body[data-page="staff-public"] .staff-public-presence.is-online { color: var(--success); }
:root body[data-page="staff-public"] .staff-public-presence.is-online .staff-public-presence-dot { background: var(--success); box-shadow: none; }
:root body[data-page="staff-public"] .staff-public-presence-dot::after { content: none; }
:root body[data-page="staff-public"] .staff-public-joined { margin-top: 18px; padding-top: 0; border: 0; }

/* Middle-slice responsive rules stay separate from directory/ad ownership. */
@media (max-width: 1040px) {
  :root body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .metric-grid-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .metric-v2:nth-child(2n) { border-right: 0; }
  :root body:is([data-page="profile"], [data-page="dashboard"]) .profile-settings-layout-v7 { grid-template-columns: minmax(0, 1fr); }
  :root body:is([data-page="profile"], [data-page="dashboard"]) .profile-settings-layout-v7 > .member-connections { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  :root body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .metric-v2 { padding: 20px 16px; border-bottom: 1px solid var(--line-soft); }
  :root body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .metric-v2:nth-child(2n) { border-right: 0; }
  :root body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .portal-head-actions { max-width: none; width: 100%; }
  :root body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .portal-panel-v2 { padding: 28px 0; }
  :root body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .portal-item { grid-template-columns: minmax(0, 1fr); }
  :root body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .portal-item-actions { justify-content: flex-start; }
  :root body:not(.staff-v3):not([data-staff-page]) .journal-grid-v6 { grid-template-columns: minmax(0, 1fr); }
  :root body:not(.staff-v3):not([data-staff-page]) .journal-card-v6 { padding: 24px 0; }
  :root #server-detail-v3.server-page-v7 .panel-v3 { padding: 20px 16px; }
  :root #server-detail-v3.server-page-v7 .detail-logo-v3 { width: 72px; height: 72px; }
  :root #server-detail-v3.server-page-v7 .player-history { padding: 24px 0; }
}
@media (max-width: 540px) {
  :root body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .metric-grid-v2 { grid-template-columns: minmax(0, 1fr); }
  :root body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .metric-v2 { border-right: 0; }
  :root body[data-page="home"] .home-game-discovery .game-grid-v3 > a:not(.game-all-v3) { padding: 6px; }
  :root body[data-page="home"] .home-game-discovery .game-grid-v3 > a:not(.game-all-v3) strong { font-size: 16px; }
  :root #server-detail-v3.server-page-v7 .detail-banner-v3 > .server-import-banner-v3 { aspect-ratio: 2 / 1; }
}
@media (forced-colors: active) {
  :root #server-detail-v3.server-page-v7 .detail-banner-v3 > .server-import-banner-v3 { display: none; }
  :root body[data-page="home"] .home-game-discovery .game-grid-v3 > a[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -3px; }
}


/* Controls stay outside the copy and the disclosure remains distinct
   from organic community cards. */
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .ad-label-v3 { padding: 0 2px 8px; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--muted); }
/* One artwork/overlay family for every slot. Layout follows slot width, not
   page name. Content sizes the stage so long copy and CTAs cannot be clipped. */
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 { container-type: inline-size; }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .side-ad-stage-v3 { border: 0; border-radius: 12px; }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3:not(.artwork-unavailable) .side-ad-stage-v3 { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; height: auto; min-height: 190px; max-height: none; aspect-ratio: auto; padding: 12px; }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3:not(.artwork-unavailable) .side-ad-image-v3 { position: absolute; inset: 0; display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 45%; }
/* First-party portrait artwork has different subjects, not interchangeable
   centre crops. Focal points change with the image, never stage geometry. */
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3:not(.artwork-unavailable) .side-ad-image-v3[src$="/serious-roleplay.jpg"] { object-position: center 88%; }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3:not(.artwork-unavailable) .side-ad-image-v3[src$="/custom-cars.jpg"] { object-position: center 76%; }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3:not(.artwork-unavailable) .side-ad-shade-v3 { display: block; background: linear-gradient(90deg, #090911ee, #09091188 65%, #09091144); }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .side-ad-copy-v3 { min-width: 0; gap: 8px; overflow-wrap: anywhere; }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3:not(.artwork-unavailable) .side-ad-copy-v3 { position: relative; inset: auto; grid-area: 1 / 2 / 2 / 3; width: 100%; max-width: 680px; min-height: 0; margin: 0; padding: 13px 0; }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .side-ad-copy-v3 strong { max-width: none; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; letter-spacing: -.025em; }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .side-ad-copy-v3 span { font-size: 13px; line-height: 1.6; }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .side-ad-copy-v3 a { max-width: 100%; min-height: 44px; margin-top: 0; font-size: 13px; line-height: 1.5; }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3:not(.artwork-unavailable) .side-ad-copy-v3 strong { color: #fff; }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3:not(.artwork-unavailable) .side-ad-copy-v3 span { color: #e0dce6; }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3:not(.artwork-unavailable) .side-ad-copy-v3 a { color: #68dafa; border-bottom-color: #68dafa; }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3:not(.artwork-unavailable) .ad-arrow-v3 { position: relative; inset: auto; grid-row: 1; margin: 0; }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3:not(.artwork-unavailable) .ad-arrow-previous-v3 { grid-column: 1; }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3:not(.artwork-unavailable) .ad-arrow-next-v3 { grid-column: 3; justify-self: end; }
@container (min-width: 481px) {
  :root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3:not(.artwork-unavailable) .side-ad-stage-v3 { min-height: clamp(280px, 35cqi, 560px); }
}
@container (max-width: 480px) {
  :root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3:not(.artwork-unavailable) .side-ad-stage-v3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 280px; align-content: end; }
  :root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3:not(.artwork-unavailable) .side-ad-copy-v3 { grid-area: 1 / 1 / 2 / -1; padding: 12px 4px 0; }
  :root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3:not(.artwork-unavailable) .side-ad-shade-v3 { background: linear-gradient(180deg, #09091133, #09091188 35%, #090911aa); }
  :root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .side-ad-copy-v3 strong { font-size: 22px; }
  :root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3:not(.artwork-unavailable) .ad-arrow-v3 { grid-row: 2; }
  :root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3:not(.artwork-unavailable) .ad-arrow-next-v3 { grid-column: 2; }
}
/* At genuine 160–240px rail widths, show the whole portrait above the copy,
   blending into the same dark stage instead of slicing off the vehicle. */
@container (max-width: 240px) {
  :root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3:not(.artwork-unavailable) .side-ad-stage-v3 { min-height: calc(125cqi + 360px); }
  :root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3:not(.artwork-unavailable) .side-ad-image-v3 { height: auto; object-fit: contain; }
  :root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3:not(.artwork-unavailable) .side-ad-copy-v3 { padding-top: 125cqi; }
  :root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3:not(.artwork-unavailable) .side-ad-shade-v3 { background: linear-gradient(180deg, transparent calc(125cqi - 32px), #0c0e13 125cqi); }
}
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3,
:root body:not(.staff-v3):not([data-staff-page]) .banner-ad-v7.side-ad-v3 { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .ad-controls-v3 { padding: 8px 12px; border: 0; background: transparent; box-shadow: none; gap: 4px 12px; flex-wrap: wrap; align-items: center; }
:where(body:not(.staff-v3):not([data-staff-page])) .side-ad-v3 .ad-controls-v3 .ad-dots-v3 { display: flex; flex: 1 1 132px; min-width: 44px; flex-wrap: wrap; gap: 0; }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .ad-dot-v3 { flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border: 0; background: transparent; box-shadow: none; }
/* Plain arrows at rest; reveal the face only for interaction. The existing
   44px targets and artwork/copy placement remain unchanged. */
:where(body:not(.staff-v3):not([data-staff-page])) .side-ad-v3 .ad-arrow-v3 { border-radius: var(--control-radius, 12px); color: #fff; }
:where(body:not(.staff-v3):not([data-staff-page])) .side-ad-v3 .ad-arrow-v3::before { inset: 0; border-radius: inherit; background: #16181e; border-color: #ffffff80; opacity: 0; backdrop-filter: none; transition: opacity 160ms ease; }
:where(body:not(.staff-v3):not([data-staff-page])) .side-ad-v3 .ad-arrow-v3::after { filter: drop-shadow(0 1px 1px #000); }
:where(body:not(.staff-v3):not([data-staff-page])) .side-ad-v3 .ad-arrow-v3:is(:focus-visible, :active)::before { opacity: 1; background: #16181e; transform: none; }
@media (hover: hover) and (pointer: fine) {
  :where(body:not(.staff-v3):not([data-staff-page])) .side-ad-v3 .ad-arrow-v3:hover::before { opacity: 1; background: #16181e; }
}
:where(body:not(.staff-v3):not([data-staff-page])) .side-ad-v3.artwork-unavailable .ad-arrow-v3 { color: var(--text); }
:where(body:not(.staff-v3):not([data-staff-page])) .side-ad-v3.artwork-unavailable .ad-arrow-v3::after { filter: none; }
:where(body:not(.staff-v3):not([data-staff-page])) .side-ad-v3.artwork-unavailable .ad-arrow-v3::before { background: var(--control-bg, var(--panel)); border-color: var(--interactive-edge, var(--line)); }
:where(body:not(.staff-v3):not([data-staff-page])) .side-ad-v3 :is(.ad-arrow-v3, .ad-dot-v3):focus-visible { outline: 2px solid var(--focus, var(--pink-strong)); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  :where(body:not(.staff-v3):not([data-staff-page])) .side-ad-v3 .ad-arrow-v3::before { transition: none; }
}
@media (forced-colors: active) {
  :where(body:not(.staff-v3):not([data-staff-page])) .side-ad-v3 .ad-arrow-v3 { color: ButtonText; }
  :where(body:not(.staff-v3):not([data-staff-page])) .side-ad-v3 .ad-arrow-v3::before { background: ButtonFace; border-color: ButtonText; opacity: 1; }
  :where(body:not(.staff-v3):not([data-staff-page])) .side-ad-v3 :is(.ad-arrow-v3, .ad-dot-v3):focus-visible { outline-color: Highlight; }
}
:where(body:not(.staff-v3):not([data-staff-page])) .side-ad-v3.artwork-unavailable .side-ad-stage-v3 { background: var(--panel-2); }
:where(body:not(.staff-v3):not([data-staff-page])) .side-ad-v3.artwork-unavailable .side-ad-copy-v3 :is(strong, span) { color: var(--text); }
:where(body:not(.staff-v3):not([data-staff-page])) .side-ad-v3.artwork-unavailable .side-ad-copy-v3 a { color: var(--cyan); }

/* Light has its own depth and artwork treatment. It is not a neon inversion.
   Main/Task3 remove the pattern and veil themselves; no duplicate motion code. */
:root[data-theme="light"] :is(.server-shortlist-card, .journal-card-v6, .game-official-card-v6) { background: var(--panel); box-shadow: var(--shadow-sm); }
:root[data-theme="light"] .server-card:not(.server-card-skeleton) { background: var(--panel); }
:root[data-theme="light"] .server-card:not(.server-card-skeleton)::before { opacity: .8; }
:root[data-theme="light"] .server-card .server-card-media { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="light"] .journal-card-featured-v6 { background: var(--panel); border-top-color: var(--violet); }
:root[data-theme="light"] #server-detail-v3.server-page-v7 .detail-title-v3 { color: var(--text); background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, transparent), var(--panel)); }
:root[data-theme="light"] .side-ad-v3:not(.artwork-unavailable) .side-ad-copy-v3 :is(strong, span, a) { color: #fff; }
:root[data-theme="light"] .side-ad-v3.artwork-unavailable .side-ad-copy-v3 :is(strong, span) { color: var(--text); }
:root[data-theme="light"] .side-ad-v3.artwork-unavailable .side-ad-copy-v3 a { color: var(--cyan); }
:root[data-theme="light"] .staff-public-hero { background: var(--panel-2); }
:root[data-theme="light"] .staff-public-hero::after { content: none; }

@media (hover: hover) and (pointer: fine) {
  :where(body:not(.staff-v3):not([data-staff-page])) .server-card:not(.server-card-skeleton):hover { transform: none; background: var(--surface-hover); box-shadow: none; border-color: var(--line); }
  :where(body:not(.staff-v3):not([data-staff-page])) .server-shortlist-card:hover { border-color: var(--interactive-edge); }
  :root[data-theme="light"] .server-card:not(.server-card-skeleton):hover { background: var(--surface-hover); box-shadow: none; }
  :where(body:not(.staff-v3):not([data-staff-page])) :is(.game-official-card-v6, .journal-card-v6):hover { transform: none; background: var(--surface-hover); border-color: var(--interactive-edge); box-shadow: var(--shadow-sm); }
}
@media (max-width: 1040px) {
  body:is([data-page="profile"], [data-page="dashboard"]) .profile-settings-layout-v7 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 1100px) {
  body[data-page="servers"] .directory-game-choice { flex-direction: column; gap: 4px; }
}
@media (max-width: 760px) {
  body:not(.staff-v3):not([data-staff-page]) { --public-card-inset: 16px; }
  body[data-page="servers"] .directory-toolbar-v3 { align-items: flex-start; gap: 16px; }
  body[data-page="servers"] .directory-control-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body[data-page="servers"] .directory-control-row .smart-filter-toggle { grid-column: 1 / -1; min-height: 44px; }
  body[data-page="servers"] .directory-control-row button { min-height: 68px; padding: 8px 4px; font-size: 13px; }
  body[data-page="servers"] .directory-filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  body[data-page="servers"] .result-bar-v3 { flex-wrap: wrap; }
  :where(body:not(.staff-v3):not([data-staff-page])) .server-card:not(.server-card-skeleton) { grid-template-columns: 64px minmax(0, 1fr); gap: 10px 16px; }
  :where(body:not(.staff-v3):not([data-staff-page])) .server-card:not(.server-card-skeleton) .server-card-media { width: 64px; height: 64px; }
  :where(body:not(.staff-v3):not([data-staff-page])) .server-card:not(.server-card-skeleton) > .server-card-bottom { padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); gap: 12px; }
  :where(body:not(.staff-v3):not([data-staff-page])) .server-shortlist-actions { padding-inline: 8px; }
  #server-detail-v3.server-page-v7 .detail-title-v3 { padding: 24px 16px; gap: 16px; }
  #server-detail-v3.server-page-v7 .detail-logo-v3 { width: 72px; height: 72px; }
  #server-detail-v3.server-page-v7 .panel-v3 { padding: 20px 16px; }
  #server-detail-v3 .player-history { padding: 20px 12px; }
  body[data-page="compare"] .compare-toolbar { padding: 16px; }
  body[data-page="compare"] .compare-table :is(th, td) { padding: 16px; }
  body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .portal-head .portal-avatar { width: 64px; height: 64px; }
  body:is([data-page="profile"], [data-page="dashboard"]) .dashboard-view .metric-v2 { padding: 20px 16px; }
  body:is([data-page="profile"], [data-page="dashboard"]) .profile-settings-layout-v7 > .member-connections { padding: 16px; }
  body:is([data-page="profile"], [data-page="dashboard"]) .portal-item { grid-template-columns: minmax(0, 1fr); }
  body:is([data-page="profile"], [data-page="dashboard"]) .portal-item-actions { justify-content: flex-start; }
  :where(body:not(.staff-v3):not([data-staff-page])) .journal-card-v6 { padding: 20px; }
  :where(body:not(.staff-v3):not([data-staff-page])) .journal-prose-v6 { font-size: 17px; }
  :where(body:not(.staff-v3):not([data-staff-page])) .footer-grid-v3 { gap: 24px; padding-block: 32px 16px; }
  :where(body:not(.staff-v3):not([data-staff-page])) .ad-controls-v3 { flex-wrap: wrap; }
}
@media (max-width: 420px) {
  body[data-page="servers"] .directory-filter-panel { grid-template-columns: minmax(0, 1fr); }
  body[data-page="servers"] .directory-control-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="servers"] .directory-game-choice { flex-direction: row; }
  body[data-page="servers"] #clear-filters { margin-left: 0; }
  :where(body:not(.staff-v3):not([data-staff-page])) .shortlist-open-v9 { margin-left: 0; }
}

/* Directory-only list composition. Other routes retain their own card layout. */
/* Static fallback uses the same skeleton treatment before deferred scripts and
   the first request. SSR replaces these rows; no loaded result is held back. */
body[data-page="servers"] .directory-search-skeleton { display: block; width: 100%; height: 56px; margin: 0; }
body[data-page="servers"] .directory-choice-skeleton { width: 88px; height: 44px; flex: 0 0 88px; }
body[data-page="servers"] .directory-filter-skeleton { margin-left: auto; }
body[data-page="servers"] [data-directory-loading-controls] .server-title-skeleton,
body[data-page="servers"] [data-directory-loading-controls] .server-description-skeleton { animation: none; }
:root body[data-page="servers"] #server-list .directory-initial-skeleton { display: grid; grid-template-columns: 88px minmax(0, 1fr) 164px; grid-template-areas: none; gap: 10px 24px; padding: 24px 12px; min-height: 200px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
:root body[data-page="servers"] #server-list .directory-initial-skeleton > * { animation: none; }
:root body[data-page="servers"] #server-list .directory-initial-skeleton .server-card-top-skeleton { grid-area: 1 / 1 / 4 / 2; width: 88px; height: 88px; }
:root body[data-page="servers"] #server-list .directory-initial-skeleton .server-title-skeleton { grid-area: 1 / 2 / 2 / 3; }
:root body[data-page="servers"] #server-list .directory-initial-skeleton .server-description-skeleton { grid-area: 2 / 2 / 3 / 3; }
:root body[data-page="servers"] #server-list .directory-initial-skeleton .server-meta-skeleton { grid-area: 3 / 2 / 4 / 3; }
:root body[data-page="servers"] #server-list .directory-initial-skeleton .server-card-action-skeleton { grid-area: 2 / 3 / 3 / 4; }
:root body[data-page="servers"] #main > .shell-v3 { max-width: 1248px; }
:root body[data-page="servers"] .directory-layout-v3 { display: block; }
:root body[data-page="servers"] #server-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
:root body[data-page="servers"] #server-list > .server-shortlist-card { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
/* Keep the shared 2px focus outline inside the row's clipping boundary. */
:root body[data-page="servers"] #server-list > .server-shortlist-card > .server-card:focus-visible { outline-offset: -2px; }
/* Skip offscreen listing layout during document-wide modal updates. Keep
   Save/Compare siblings, adverts and overlays outside containment. Auto keeps
   listing text searchable/focusable; remembered sizes replace these estimates.
   Firefox uses regular layout: its tested offscreen text-find did not reveal
   the match reliably. This optimisation is optional, never a content gate. */
@supports (content-visibility: auto) and (contain-intrinsic-block-size: auto 160px) and (not (-moz-appearance: none)) {
  @media screen {
    :root body[data-page="servers"] #server-list > .server-shortlist-card > .server-card:not(.server-card-skeleton) {
      content-visibility: auto;
      contain-intrinsic-block-size: auto 160px;
    }
  }
  @media screen and (max-width: 760px) {
    :root body[data-page="servers"] #server-list > .server-shortlist-card > .server-card:not(.server-card-skeleton) {
      contain-intrinsic-block-size: auto 260px;
    }
  }
}
:root body[data-page="servers"] #server-list .server-card:not(.server-card-skeleton) { grid-template-columns: 88px minmax(0, 1fr) 164px; grid-template-areas: none; gap: 6px 24px; padding: 24px 12px 0; border-radius: 0; background: transparent; }
:root body[data-page="servers"] #server-list .server-card .server-card-media { grid-area: 1 / 1 / 5 / 2; width: 88px; height: 88px; border-radius: 10px; background: var(--panel); }
/* A neutral midtone mat keeps both white and dark transparent community artwork
   visible in light mode. Initials keep the normal themed surface. */
:root[data-theme="light"] body:not(.staff-v3):not([data-staff-page]) .server-card .server-card-media:has(.server-card-media-image),
:root[data-theme="light"] body[data-page="servers"] #server-list .server-card .server-card-media:has(.server-card-media-image) { background: #767676; }
:root body[data-page="servers"] #server-list .server-card > h3 { grid-area: 1 / 2 / 2 / 3; margin: 0; font-size: 23px; overflow-wrap: anywhere; }
:root body[data-page="servers"] #server-list .server-card .status { grid-area: 1 / 3 / 2 / 4; justify-self: end; text-align: right; }
:root body[data-page="servers"] #server-list .server-card > .server-description { grid-area: 2 / 2 / 3 / 3; max-width: 68ch; -webkit-line-clamp: 2; }
:root body[data-page="servers"] #server-list .server-card > .server-meta { grid-area: 3 / 2 / 4 / 3; gap: 4px 10px; }
:root body[data-page="servers"] #server-list .server-card > .server-tags { grid-area: 4 / 2 / 5 / 3; }
:root body[data-page="servers"] #server-list .server-card > .server-tags:empty { display: none; }
:root body[data-page="servers"] #server-list .server-card > .server-card-bottom { grid-area: 2 / 3 / 5 / 4; flex-direction: column; align-items: flex-end; justify-content: flex-start; text-align: right; padding: 0; gap: 8px; }
:root body[data-page="servers"] #server-list .server-card-action { display: inline-flex; align-items: center; min-height: 44px; }
:root body[data-page="servers"] #server-list .server-shortlist-actions { justify-content: flex-end; padding: 0 4px 12px; gap: 0 4px; }
:root body[data-page="servers"] #server-list .server-shortlist-actions button { min-height: 44px; }
:root body[data-page="servers"] .recommendations-v7 { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }

/* One existing carousel follows six organic rows. Strong route/id selectors
   beat the legacy rail chrome, without changing its campaign or controls. */
:root body[data-page="servers"] #directory-advert { position: static; inset: auto; width: 100%; max-width: none; margin: 24px 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
:root body[data-page="servers"] #server-list:not(:has(.server-card:not(.server-card-skeleton))) > #directory-advert { display: none; }
@media (max-width: 1100px) {
  body[data-page="servers"] .directory-intro-v3 { align-items: flex-start; flex-direction: column; gap: 4px; padding-block: 24px 16px; }
  body[data-page="servers"] .directory-toolbar-v3 { justify-content: flex-start; margin-left: -12px; }
}
@media (max-width: 760px) {
  :root body[data-page="servers"] #server-list .directory-initial-skeleton { grid-template-columns: 64px minmax(0, 1fr); min-height: 280px; padding: 20px 0; gap: 10px 14px; }
  :root body[data-page="servers"] #server-list .directory-initial-skeleton .server-card-top-skeleton { grid-area: 1 / 1 / 3 / 2; width: 64px; height: 64px; }
  :root body[data-page="servers"] #server-list .directory-initial-skeleton .server-description-skeleton { grid-area: 3 / 1 / 4 / -1; }
  :root body[data-page="servers"] #server-list .directory-initial-skeleton .server-meta-skeleton { grid-area: 4 / 1 / 5 / -1; }
  :root body[data-page="servers"] #server-list .directory-initial-skeleton .server-card-action-skeleton { grid-area: 5 / 1 / 6 / -1; }
  body[data-page="servers"] .recommendation-heading { flex-wrap: wrap; gap: 0 16px; }
  body[data-page="servers"] .directory-filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root body[data-page="servers"] .directory-control-row { gap: 4px; }
  :root body[data-page="servers"] .directory-control-row button { font-size: 13px; padding: 8px; min-height: 44px; }
  :root body[data-page="servers"] .directory-control-row .smart-filter-toggle { margin-right: 0; }
  :root body:not(.staff-v3):not([data-staff-page]) .server-card:not(.server-card-skeleton) { grid-template-columns: 56px minmax(0, 1fr); gap: 8px 14px; padding: 20px 16px 4px; }
  :root body:not(.staff-v3):not([data-staff-page]) .server-card .server-card-media { width: 56px; height: 56px; grid-row: 1 / 3; }
  :root body:not(.staff-v3):not([data-staff-page]) .server-card .status { grid-column: 2; grid-row: 2; }
  :root body:not(.staff-v3):not([data-staff-page]) .server-card > h3 { font-size: 20px; }
  :root body:not(.staff-v3):not([data-staff-page]) .server-card > .server-description { grid-column: 1 / -1; grid-row: 3; margin-top: 4px; }
  :root body:not(.staff-v3):not([data-staff-page]) .server-card > .server-meta { grid-column: 1 / -1; grid-row: 4; }
  :root body:not(.staff-v3):not([data-staff-page]) .server-card > .server-tags { grid-column: 1 / -1; grid-row: 5; }
  :root body:not(.staff-v3):not([data-staff-page]) .server-card > .server-card-bottom { grid-column: 1 / -1; grid-row: 6; }
  :root body:not(.staff-v3):not([data-staff-page]) .server-shortlist-actions { padding-left: 8px; }
  :root body[data-page="servers"] #server-list .server-card:not(.server-card-skeleton) { grid-template-columns: 64px minmax(0, 1fr); gap: 6px 14px; padding: 20px 0 0; }
  :root body[data-page="servers"] #server-list .server-card .server-card-media { grid-area: 1 / 1 / 3 / 2; width: 64px; height: 64px; }
  :root body[data-page="servers"] #server-list .server-card > h3 { grid-area: 1 / 2 / 2 / 3; font-size: 20px; }
  :root body[data-page="servers"] #server-list .server-card .status { grid-area: 2 / 2 / 3 / 3; justify-self: start; text-align: left; }
  :root body[data-page="servers"] #server-list .server-card > .server-description { grid-area: 3 / 1 / 4 / -1; }
  :root body[data-page="servers"] #server-list .server-card > .server-meta { grid-area: 4 / 1 / 5 / -1; }
  :root body[data-page="servers"] #server-list .server-card > .server-tags { grid-area: 5 / 1 / 6 / -1; }
  :root body[data-page="servers"] #server-list .server-card > .server-card-bottom { grid-area: 6 / 1 / 7 / -1; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
  :root body[data-page="servers"] #server-list .server-shortlist-actions { justify-content: flex-start; padding: 0 0 12px; }
}
@media (max-width: 420px) {
  body[data-page="servers"] .result-bar-v3 { min-height: 73px; }
  body[data-page="servers"] .directory-filter-skeleton { margin-left: 0; }
  body[data-page="servers"] .directory-filter-panel { grid-template-columns: minmax(0, 1fr); }
  :root body[data-page="servers"] .directory-control-row .directory-game-choice { flex: 0 1 auto; }
  :root body[data-page="servers"] .directory-control-row .smart-filter-toggle { flex: 0 1 auto; margin-left: 0; }
  body[data-page="servers"] .directory-game-choice img { width: 22px; height: 18px; }
  body[data-page="servers"] .result-bar-v3 .directory-sort { flex: 1 1 100%; margin-left: 0; }
}

/* Simple first step: search and detailed filters share one line. Game choices
   remain direct shortcuts; every existing refinement stays in the disclosure. */
:root body[data-page="servers"] .directory-discovery .smart-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 10px; max-width: none; margin: 0 0 14px; }
:root body[data-page="servers"] .directory-discovery .smart-search-row .field-search-v3 { min-width: 0; margin: 0; }
:root body[data-page="servers"] .directory-discovery .smart-filter-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 120px; min-height: 56px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); box-shadow: none; font-weight: 700; }
:root body[data-page="servers"] .directory-discovery .smart-filter-toggle::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
:root body[data-page="servers"] .directory-discovery .smart-filter-toggle[aria-expanded="true"]::after { transform: rotate(225deg) translate(-2px, -1px); }
:root body[data-page="servers"] .directory-discovery .smart-filter-toggle:is(:hover,:focus-visible) { border-color: var(--violet); background: var(--surface-hover); }

/* A quiet progress rail replaces round carousel dots. Each bar selects its
   creative; automatic rotation follows the site's motion preference. */
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .ad-controls-v3 { justify-content: center; min-height: 48px; padding: 2px 8px; }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .ad-controls-v3 .ad-dots-v3 { flex: 0 1 auto; min-width: 0; max-width: 100%; flex-wrap: wrap; justify-content: center; gap: 2px; }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .ad-dot-v3 { position: relative; flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border: 0; background: transparent; }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .ad-dot-v3::after { content: ""; position: absolute; left: 5px; right: 5px; top: 20px; width: auto; height: 4px; border-radius: 4px; background: var(--line-strong); }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .ad-dot-v3::before { content: ""; display: none; position: absolute; z-index: 1; left: 5px; top: 20px; width: 34px; height: 4px; border-radius: 4px; background: linear-gradient(90deg,var(--pink),var(--violet),var(--cyan)); }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .ad-dot-v3[aria-current="true"]::before { display: block; }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3.ad-is-playing .ad-dot-v3[aria-current="true"]::before { transform-origin: left center; animation: browse-ad-progress 7s linear forwards; }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .ad-dot-v3:is(:hover,:focus-visible)::after { background: var(--line-strong); filter: brightness(1.3); }
@keyframes browse-ad-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
:root[data-brand-motion="off"] body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .ad-dot-v3::before,
:root[data-brand-motion="off"] body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .side-ad-copy-v3.ad-copy-enter-v3 { animation: none; }
:root[data-brand-motion="off"] body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .ad-transition-image-v3 { transition: none; }

/* An outgoing copy of the old creative stays until the new image has loaded.
   Both layers use the same object-fit and artwork-specific focal positions. */
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3:not(.artwork-unavailable) .ad-transition-image-v3 { pointer-events: none; opacity: 1; transition: opacity .42s ease; }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3:not(.artwork-unavailable) .ad-transition-image-v3.is-leaving { opacity: 0; }
:root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .side-ad-copy-v3.ad-copy-enter-v3 { animation: browse-ad-copy-enter .34s ease both; }
@keyframes browse-ad-copy-enter { from { opacity: .45; } to { opacity: 1; } }

/* The server identity and facts should read as one designed component rather
   than a game badge followed by punctuation-separated plain text. */
:root #server-detail-v3 .detail-heading-copy-launch-v6 { display: grid; gap: 14px; }
:root #server-detail-v3 .detail-title-launch-v6 .eyebrow-v3 { margin: 0; }
:root #server-detail-v3 .detail-meta-v3 .platform-meta-v5 { gap: 8px; }
:root #server-detail-v3 .detail-meta-v3 .metadata-value-v5 { display: inline-flex; align-items: center; max-width: 100%; min-height: 31px; padding: 5px 10px; border: 1px solid rgb(255 255 255 / .23); border-radius: 8px; background: rgb(13 10 20 / .38); color: #fff; font-size: 12px; font-weight: 650; line-height: 1.25; }
:root #server-detail-v3 .detail-meta-v3 .metadata-value-v5::before { content: none; }
:root #server-detail-v3.server-page-v7 .server-info-grid-v5 { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 16px 0 0; }
:root #server-detail-v3.server-page-v7 .server-info-card-v5 { min-height: 80px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 7px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: color-mix(in srgb,var(--panel-2) 42%,var(--panel)); box-shadow: none; }
:root #server-detail-v3.server-page-v7 .server-info-card-v5:last-child { border-bottom: 1px solid var(--line-soft); }
:root #server-detail-v3.server-page-v7 .server-info-card-v5 dt { min-width: 0; font-size: 13px; font-weight: 650; letter-spacing: .01em; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
:root #server-detail-v3.server-page-v7 .server-info-card-v5 dd { min-width: 0; max-width: 100%; text-align: left; font-size: 14px; font-weight: 700; line-height: 1.45; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
:root #server-detail-v3.server-page-v7 .server-info-wide-v5 { grid-column: 1 / -1; min-height: 68px; }
:root #server-detail-v3 #server-status-v3.is-live-v3 { display: inline-flex; align-items: center; gap: 9px; color: var(--success); }
:root #server-detail-v3 #server-status-v3.is-live-v3::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb,var(--success) 14%,transparent); animation: browse-live 2.6s ease-in-out infinite; }
@keyframes browse-live { 50% { box-shadow: 0 0 0 7px color-mix(in srgb,var(--success) 4%,transparent); } }
:root[data-brand-motion="off"] #server-detail-v3 #server-status-v3.is-live-v3::before { animation: none; }

@media (max-width: 520px) {
  :root #server-detail-v3 .detail-heading-copy-launch-v6 { gap: 11px; }
  :root body[data-page="servers"] .directory-discovery .smart-filter-toggle { min-width: 104px; padding: 0 12px; }
}
@media (max-width: 360px) {
  /* At narrow phone widths, facts need the full line to remain legible when
     browser text is enlarged or a community supplies a long value. */
  :root #server-detail-v3.server-page-v7 .server-info-grid-v5 { grid-template-columns: minmax(0, 1fr); }
  :root #server-detail-v3.server-page-v7 .server-info-card-v5 { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .ad-dot-v3::before,
  :root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .side-ad-copy-v3.ad-copy-enter-v3 { animation: none; }
  :root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .side-ad-image-v3 { transition: none; }
  :root #server-detail-v3 #server-status-v3.is-live-v3::before { animation: none; }
}
@media (forced-colors: active) {
  :root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .ad-dot-v3::after { background: ButtonText; }
  :root body:not(.staff-v3):not([data-staff-page]) .side-ad-v3 .ad-dot-v3[aria-current="true"]::before { background: Highlight; }
  :root #server-detail-v3.server-page-v7 .server-info-card-v5,
  :root #server-detail-v3 .detail-meta-v3 .metadata-value-v5 { border-color: ButtonText; }
  :root #server-detail-v3 #server-status-v3.is-live-v3::before { background: Highlight; box-shadow: none; }
}
/* On a phone the account sheet owns the bottom edge. Brief feedback moves
   below the header rather than covering its actions or the shortlist notice. */
@media (max-width: 760px) {
  /* Backdrop-filter makes a fixed child relative to the sticky header in
     browsers. Remove it only while the bottom account sheet is open. */
  :root body:not(.staff-v3):not([data-staff-page]) :is(.header-v3, .site-header):has(.account-popover-v3[data-open="true"]) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  :root body:not(.staff-v3):not([data-staff-page]):has(.account-popover-v3[data-open="true"]) .toast {
    top: calc(84px + env(safe-area-inset-top, 0px));
    right: 12px;
    bottom: auto;
    max-width: calc(100% - 24px);
  }
  :root body:not(.staff-v3):not([data-staff-page]):has(.account-popover-v3[data-open="true"]) .shortlist-status-v9 {
    top: calc(164px + env(safe-area-inset-top, 0px));
    bottom: auto;
  }
  :root body:not(.staff-v3):not([data-staff-page]):has(.account-popover-v3[data-open="true"]):not(:has(.toast.show)) .shortlist-status-v9 {
    top: calc(84px + env(safe-area-inset-top, 0px));
  }
}
.server-listed-by-v7 { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; color: var(--muted); font-size: 13px; }
.server-listed-by-v7[hidden] { display: none; }
.server-listed-by-v7 a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: var(--text); }
.server-listed-by-v7 a:hover strong { color: var(--pink-strong); text-decoration: underline; text-underline-offset: 3px; }
.server-listed-by-v7 a img,.server-listed-by-v7 a span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; object-fit: cover; background: var(--panel-2); color: var(--pink-strong); font-size: 12px; font-weight: 750; }

/* Public editorial layer. The shared theme supplies the ink and accents;
   these frames give discovery, reading and account tasks one visual rhythm. */
body:not(.staff-v3):not([data-staff-page]) {
  --public-frame: color-mix(in srgb, var(--pink) 28%, var(--line));
  --public-tint: color-mix(in srgb, var(--pink) 8%, var(--panel));
  --public-teal-tint: color-mix(in srgb, var(--cyan) 5%, var(--bg-soft));
}
:root body:not(.staff-v3):not([data-staff-page]) main :is(.eyebrow-v3, .ds-eyebrow) {
  color: var(--pink); font-size: 12px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase;
}
:root body:not(.staff-v3):not([data-staff-page]) :is(main.section-v3, main .section-v3, main .journal-feed-v6) {
  padding-block: clamp(54px, 6vw, 88px);
}
:root body:not(.staff-v3):not([data-staff-page]) main :is(.section-head-v3, .journal-heading-v6) {
  border-left: 4px solid var(--pink); padding-left: clamp(18px, 2.5vw, 30px); margin-bottom: 32px;
}
:root body:not(.staff-v3):not([data-staff-page]) main :is(.section-head-v3, .journal-heading-v6) h2 {
  font-size: clamp(32px, 3.5vw, 46px); line-height: 1.08; letter-spacing: -.05em; text-wrap: balance;
}
:root body:not(.staff-v3):not([data-staff-page]) main :is(.section-head-v3, .journal-heading-v6) p {
  max-width: 64ch; color: var(--copy); line-height: 1.65;
}

/* Large full-width leads retain the original artwork and pattern layers. */
:root body:not(.staff-v3):not([data-staff-page]) :is(.home-hero-intro, .game-page-hero-v4, .journal-hero-v6, .staff-public-hero) {
  background: linear-gradient(120deg, var(--public-tint), var(--public-teal-tint) 58%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}
:root body[data-page="home"] .home-hero-intro { padding-block: clamp(82px, 9vw, 142px) clamp(50px, 6vw, 86px); }
:root body[data-page="home"] .home-hero-intro h1 {
  max-width: 14ch; font-size: clamp(58px, 7vw, 106px); line-height: .97; letter-spacing: -.07em; text-wrap: balance;
}
:root body[data-page="home"] .home-hero-intro .hero-copy-v3 > p {
  max-width: 55ch; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.62;
}
:root body:not(.staff-v3):not([data-staff-page]) :is(.game-page-hero-v4, .journal-hero-v6, .staff-public-hero) {
  padding-block: clamp(62px, 7vw, 104px);
}
:root body:not(.staff-v3):not([data-staff-page]) :is(.game-page-hero-v4, .journal-hero-v6, .staff-public-hero) h1 {
  font-size: clamp(46px, 5.7vw, 78px); line-height: 1.02; letter-spacing: -.06em; text-wrap: balance;
}
:root body:not([data-page="home"]):not(.staff-v3):not([data-staff-page]) main .hero-v3 {
  padding-block: clamp(68px, 8vw, 116px); background: linear-gradient(120deg, var(--public-tint), var(--public-teal-tint) 60%, var(--bg));
}
:root body:not([data-page="home"]):not(.staff-v3):not([data-staff-page]) main .hero-v3 h1 {
  max-width: 15ch; font-size: clamp(48px, 6vw, 82px); line-height: 1.02; letter-spacing: -.06em;
}
:root body:not(.staff-v3):not([data-staff-page]) main :is(.public-intro-surface-v7, .directory-intro-v3, .finder-heading, .journal-article-head-v6) {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(28px, 4vw, 56px); border: 1px solid var(--line); border-left: 4px solid var(--pink);
  border-radius: 20px; background: linear-gradient(140deg, var(--public-tint), var(--panel) 72%);
  box-shadow: var(--shadow-sm);
}
:root body:not(.staff-v3):not([data-staff-page]) main :is(.public-intro-surface-v7, .directory-intro-v3, .finder-heading, .journal-article-head-v6) h1 {
  max-width: 18ch; font-size: clamp(40px, 5.1vw, 68px); line-height: 1.05; letter-spacing: -.055em; text-wrap: balance;
}
:root body:not(.staff-v3):not([data-staff-page]) main :is(.public-intro-surface-v7, .directory-intro-v3, .finder-heading, .journal-article-head-v6) p {
  max-width: 66ch; color: var(--copy); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65;
}
:root body:not(.staff-v3):not([data-staff-page]) main .legal-v3 > h1 {
  max-width: 20ch; font-size: clamp(42px, 5vw, 66px); line-height: 1.05; letter-spacing: -.055em; text-wrap: balance;
}
:root body:not(.staff-v3):not([data-staff-page]) main .legal-v3 > .prose-v3 { max-width: 68ch; font-size: 18px; line-height: 1.7; }

/* Search and choice controls feel like part of the page canvas. */
:root body[data-page="home"] main .search-v3 {
  padding: 8px; border-color: var(--line-strong); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow-md);
}
:root body[data-page="servers"] main .directory-discovery.smart-discovery {
  padding: clamp(18px, 2.7vw, 30px); border: 1px solid var(--line); border-radius: 18px;
  background: var(--panel); box-shadow: var(--shadow-sm);
}
:root body:not(.staff-v3):not([data-staff-page]) main :is(.listing-form-v3, #appeal-form-v3, #advertising-enquiry-form, .finder-form) {
  padding: clamp(22px, 3vw, 38px); border: 1px solid var(--line); border-radius: 18px;
  background: var(--panel); box-shadow: var(--shadow-sm);
}
:root body:not(.staff-v3):not([data-staff-page]) main :is(.field-v3, .portal-field) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea) {
  min-height: 50px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--bg-soft);
  color: var(--text); font-size: 16px;
}
:root body:not(.staff-v3):not([data-staff-page]) main :is(.field-v3, .portal-field) :is(input, select, textarea):focus-visible {
  border-color: var(--pink); outline: 2px solid var(--focus); outline-offset: 2px;
}
:root body:not(.staff-v3):not([data-staff-page]) main :is(.button-v3, .button):not(.button-quiet-v3):not(.button-ghost) {
  min-height: 52px; padding-inline: 20px; border-radius: 10px; font-size: 15px; font-weight: 700;
}
:root body:not(.staff-v3):not([data-staff-page]) main :is(.button-secondary-v3, .button-secondary) {
  border-color: var(--line-strong); background: var(--panel);
}

/* Cards use warm or cool theme surfaces instead of an undifferentiated list. */
:root body:not(.staff-v3):not([data-staff-page]) main :is(.server-shortlist-card, .game-grid-v3 > a, .game-official-card-v6, .trust-grid-v3 article, .staff-public-card, .finder-choice, .finder-summary, .empty-v3) {
  border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow-sm);
}
:root body:not(.staff-v3):not([data-staff-page]) main .server-shortlist-card { border-left: 3px solid var(--public-frame); }
:root body:not(.staff-v3):not([data-staff-page]) main .trust-grid-v3 article { min-height: 154px; padding: 26px; border-top: 3px solid var(--public-frame); }
:root body:not(.staff-v3):not([data-staff-page]) main .game-grid-v3 > a { padding: 14px; }
:root body[data-page="home"] main .home-game-discovery .game-grid-v3 > a:not(.game-all-v3) {
  padding: 14px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--panel); box-shadow: var(--shadow-sm);
}
:root body:not(.staff-v3):not([data-staff-page]) main .game-grid-v3 > a:is(:hover, :focus-within),
:root body:not(.staff-v3):not([data-staff-page]) main .game-official-card-v6:is(:hover, :focus-within),
:root body:not(.staff-v3):not([data-staff-page]) main .server-shortlist-card:is(:hover, :focus-within) {
  border-color: var(--public-frame); background: var(--surface-hover); box-shadow: var(--shadow-md); transform: none;
}
:root body:not(.staff-v3):not([data-staff-page]) main .finder-choice:has(input:checked) {
  border-color: var(--pink); background: var(--public-tint); box-shadow: inset 0 0 0 1px var(--pink);
}
:root body:not(.staff-v3):not([data-staff-page]) main .finder-summary { border-top: 3px solid var(--public-frame); }
:root body:not(.staff-v3):not([data-staff-page]) main .empty-v3 { border-style: solid; }

/* Reading and comparison keep real text and table semantics intact. */
:root body:not(.staff-v3):not([data-staff-page]) main .journal-grid-v6 { gap: 24px; }
:root body:not(.staff-v3):not([data-staff-page]) main .journal-card-v6 {
  padding: clamp(24px, 3vw, 38px); border: 1px solid var(--line); border-radius: 18px;
  background: var(--panel); box-shadow: var(--shadow-sm);
}
:root body:not(.staff-v3):not([data-staff-page]) main .journal-card-featured-v6 {
  border-left: 4px solid var(--pink); background: linear-gradient(135deg, var(--public-tint), var(--panel) 72%);
}
:root body:not(.staff-v3):not([data-staff-page]) main .journal-card-v6:is(:hover, :focus-within) {
  border-color: var(--public-frame); background: var(--surface-hover); box-shadow: var(--shadow-md);
}
:root body:not(.staff-v3):not([data-staff-page]) main .legal-v3 section {
  margin-block: 18px; padding: clamp(24px, 3vw, 38px); scroll-margin-top: 110px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--panel);
}
:root body:not(.staff-v3):not([data-staff-page]) main .legal-v3 section h2 { font-size: clamp(26px, 2.9vw, 36px); letter-spacing: -.04em; }
:root body[data-page="compare"] main :is(.compare-toolbar, .compare-results) {
  border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow-sm);
}
:root body[data-page="compare"] main .compare-toolbar { padding: 22px; }

/* Signed-in pages become one clear workspace with distinct summary and tasks. */
:root body:is([data-page="profile"], [data-page="dashboard"]) main.portal-stage { padding-block: clamp(44px, 5vw, 76px); }
:root body:is([data-page="profile"], [data-page="dashboard"]) main .portal-head { padding-bottom: 28px; border-bottom: 3px solid var(--public-frame); }
:root body:is([data-page="profile"], [data-page="dashboard"]) main .metric-grid-v2 {
  gap: 0; margin-block: 28px 36px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--panel); box-shadow: var(--shadow-sm); overflow: hidden;
}
:root body:is([data-page="profile"], [data-page="dashboard"]) main .dashboard-view .portal-panel-v2 {
  margin-block: 18px; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); border-radius: 18px;
  background: var(--panel); box-shadow: var(--shadow-sm);
}
:root body:is([data-page="profile"], [data-page="dashboard"]) main .portal-item { padding-block: 18px; border-bottom-color: var(--line-soft); }

/* Public member profiles retain their chosen banner while joining the same frame system. */
:root body[data-page="member"] main.member-page-v7 { padding-block: clamp(36px, 5vw, 68px) 88px; }
:root body[data-page="member"] main.member-page-v7 .member-hero-v7 {
  border: 1px solid var(--line); border-left: 4px solid var(--pink); border-radius: 22px;
  background: var(--panel); box-shadow: var(--shadow-md);
}
:root body[data-page="member"] main.member-page-v7 .member-heading-v7 h1 {
  font-size: clamp(38px, 4.5vw, 60px); line-height: 1.03; letter-spacing: -.055em;
}
:root body[data-page="member"] main.member-page-v7 .member-section-head-v7 {
  border-left: 4px solid var(--pink); padding-left: 24px; margin-bottom: 28px;
}
:root body[data-page="member"] main.member-page-v7 .member-section-head-v7 h2 {
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1;
}
:root body[data-page="member"] main.member-page-v7 .member-report-v7 {
  max-width: 720px; margin-top: 56px; padding: 22px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel);
}
:root body[data-page="member"] main.member-page-v7 .member-report-v7 :is(select, textarea) {
  border-color: var(--line-strong); background: var(--bg-soft); font-size: 16px;
}
:root body[data-page="member"] main.member-page-v7 .member-empty-v7 {
  padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel);
}

@media (max-width: 760px) {
  :root body[data-page="home"] .home-hero-intro { padding-block: 64px 46px; }
  :root body[data-page="home"] .home-hero-intro h1 { font-size: clamp(48px, 11vw, 72px); }
  :root body:not(.staff-v3):not([data-staff-page]) :is(.game-page-hero-v4, .journal-hero-v6, .staff-public-hero) { padding-block: 56px; }
  :root body:not(.staff-v3):not([data-staff-page]) main :is(.public-intro-surface-v7, .directory-intro-v3, .finder-heading, .journal-article-head-v6) { padding: 24px; border-left-width: 3px; }
  :root body:not(.staff-v3):not([data-staff-page]) main :is(.section-head-v3, .journal-heading-v6) { padding-left: 16px; border-left-width: 3px; }
  :root body:not(.staff-v3):not([data-staff-page]) main .trust-grid-v3 article { padding: 20px; }
  :root body:not(.staff-v3):not([data-staff-page]) main .legal-v3 section { padding: 22px; }
  :root body[data-page="member"] main.member-page-v7 .member-section-head-v7 { padding-left: 16px; border-left-width: 3px; }
  :root body[data-page="member"] main.member-page-v7 .member-report-v7 { padding: 18px; }
}
@media (max-width: 420px) {
  :root body:not(.staff-v3):not([data-staff-page]) main :is(.public-intro-surface-v7, .directory-intro-v3, .finder-heading, .journal-article-head-v6) { padding: 20px; }
  :root body:not(.staff-v3):not([data-staff-page]) main .game-grid-v3 > a { padding: 10px; }
  :root body:not(.staff-v3):not([data-staff-page]) main :is(.listing-form-v3, #appeal-form-v3, #advertising-enquiry-form, .finder-form) { padding: 20px; }
  :root body:is([data-page="profile"], [data-page="dashboard"]) main .dashboard-view .portal-panel-v2 { padding: 20px; }
}
@media (forced-colors: active) {
  :root body:not(.staff-v3):not([data-staff-page]) main :is(.public-intro-surface-v7, .directory-intro-v3, .finder-heading, .journal-article-head-v6, .journal-card-v6, .legal-v3 section, .portal-panel-v2, .server-shortlist-card) {
    background: Canvas; border-color: CanvasText; box-shadow: none;
  }
}

/* Second visual pass: stronger identity on editorial, game and reading pages.
   Artwork and content remain real; the glow is a non-interactive backdrop. */
:root body:not(.staff-v3):not([data-staff-page]) main :is(.public-intro-surface-v7, .finder-heading, .journal-article-head-v6) {
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--pink) 23%, transparent), transparent 36%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 44%),
    var(--panel);
  box-shadow: var(--shadow-md);
}
:root body:not(.staff-v3):not([data-staff-page]) main :is(.public-intro-surface-v7, .finder-heading, .journal-article-head-v6)::after {
  content: ""; position: absolute; right: -68px; top: -68px; width: 230px; height: 230px;
  border: 1px solid color-mix(in srgb, var(--pink) 38%, transparent);
  border-radius: 50%; box-shadow: 0 0 0 34px color-mix(in srgb, var(--pink) 5%, transparent),
    0 0 0 68px color-mix(in srgb, var(--cyan) 4%, transparent);
  opacity: .65; pointer-events: none; z-index: -1;
}
:root body:not(.staff-v3):not([data-staff-page]) :is(.game-page-hero-v4, .journal-hero-v6, .staff-public-hero) {
  background:
    radial-gradient(circle at 84% 15%, color-mix(in srgb, var(--pink) 27%, transparent), transparent 37%),
    radial-gradient(circle at 5% 90%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 44%),
    var(--bg-soft);
}
:root body:not(.staff-v3):not([data-staff-page]) .game-page-hero-v4[data-platform] {
  background:
    radial-gradient(circle at 86% 24%, color-mix(in srgb, var(--platform-accent) 28%, transparent), transparent 40%),
    linear-gradient(135deg, var(--bg-soft), var(--bg));
}
:root body:not(.staff-v3):not([data-staff-page]) :is(.game-page-hero-v4, .journal-hero-v6, .staff-public-hero) h1 {
  max-width: 16ch; font-weight: 850;
}
:root body:not(.staff-v3):not([data-staff-page]) main .game-grid-v3 > a[data-platform] {
  border-top: 4px solid var(--platform-accent, var(--pink));
  background: linear-gradient(150deg, color-mix(in srgb, var(--platform-accent, var(--pink)) 10%, var(--panel)), var(--panel) 60%);
}
:root body:not(.staff-v3):not([data-staff-page]) main .game-grid-v3 > a[data-platform]:is(:hover, :focus-visible) {
  border-color: var(--platform-accent, var(--pink));
  box-shadow: var(--shadow-md);
}
:root body:not(.staff-v3):not([data-staff-page]) main .journal-card-v6 {
  border-top: 4px solid color-mix(in srgb, var(--pink) 58%, var(--cyan));
  background: linear-gradient(160deg, var(--panel), color-mix(in srgb, var(--cyan) 3%, var(--panel)));
}
:root body:not(.staff-v3):not([data-staff-page]) main .journal-card-featured-v6 {
  border-top-color: var(--pink);
  background: linear-gradient(145deg, color-mix(in srgb, var(--pink) 15%, var(--panel)), var(--panel) 72%);
}
:root body[data-page="about"] main .legal-v3 > section {
  border-left: 4px solid color-mix(in srgb, var(--pink) 56%, var(--cyan));
  background: linear-gradient(145deg, color-mix(in srgb, var(--pink) 5%, var(--panel)), var(--panel) 72%);
}
:root body[data-page="about"] main .legal-v3 > section:nth-of-type(even) {
  border-left-color: var(--cyan);
  background: linear-gradient(145deg, color-mix(in srgb, var(--cyan) 6%, var(--panel)), var(--panel) 72%);
}
:root body:not(.staff-v3):not([data-staff-page]) main .hero-actions-v3 .button-primary-v3 {
  box-shadow: 0 12px 26px color-mix(in srgb, var(--pink) 26%, transparent);
}
:root[data-theme="light"] body:not(.staff-v3):not([data-staff-page]) main .game-grid-v3 > a[data-platform="roblox"] {
  --platform-accent: #526b82;
}
:root body:not(.staff-v3):not([data-staff-page]) .footer-v3 {
  position: relative; margin-top: 0; padding-top: clamp(44px, 5vw, 72px);
  border-top: 1px solid var(--line);
  background: linear-gradient(160deg, color-mix(in srgb, var(--cyan) 5%, var(--bg-soft)), var(--bg-soft) 64%);
}
:root body:not(.staff-v3):not([data-staff-page]) .footer-v3::before {
  content: ""; position: absolute; inset: -2px 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--pink), var(--violet) 44%, var(--cyan));
  pointer-events: none;
}
:root body:not(.staff-v3):not([data-staff-page]) .footer-column-v3 strong {
  display: block; margin-bottom: 16px; color: var(--text); font-size: 12px;
  font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
}
:root body:not(.staff-v3):not([data-staff-page]) .footer-column-v3 a:is(:hover, :focus-visible) {
  color: var(--pink-strong); text-decoration: underline; text-underline-offset: 5px;
}
@media (max-width: 760px) {
  :root body:not(.staff-v3):not([data-staff-page]) main :is(.public-intro-surface-v7, .finder-heading, .journal-article-head-v6)::after {
    width: 160px; height: 160px; right: -92px; top: -74px;
  }
}
@media (forced-colors: active), print {
  :root body:not(.staff-v3):not([data-staff-page]) main :is(.public-intro-surface-v7, .finder-heading, .journal-article-head-v6)::after { content: none; }
}

/* First-visit choices remain complete, but sit beside the page rather than
   covering the headline and search that a new visitor came to use. */
:root body:not(.staff-v3):not([data-staff-page]) .cookie-prompt-v3 {
  left: auto; right: 20px; bottom: 20px; width: min(460px, calc(100% - 40px));
  max-height: min(72dvh, 620px); margin: 0; padding: 22px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
  align-items: start; border: 1px solid var(--line-strong); border-top: 4px solid var(--pink);
  border-radius: 18px; background: var(--surface-raised); box-shadow: var(--shadow-lg);
  scrollbar-width: thin;
}
:root body:not(.staff-v3):not([data-staff-page]) .cookie-prompt-v3[hidden] { display: none; }
:root body:not(.staff-v3):not([data-staff-page]) .cookie-prompt-v3 h2 {
  font-size: 21px; letter-spacing: -.03em;
}
:root body:not(.staff-v3):not([data-staff-page]) .cookie-prompt-actions-v3 {
  position: sticky; bottom: -22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; padding: 14px 0 0; border-top: 1px solid var(--line-soft);
  background: var(--surface-raised);
}
:root body:not(.staff-v3):not([data-staff-page]) .cookie-prompt-actions-v3 > :last-child {
  grid-column: 1 / -1;
}
:root body:not(.staff-v3):not([data-staff-page]) .cookie-prompt-actions-v3 .button-v3 {
  min-height: 44px; padding-inline: 10px; font-size: 13px; line-height: 1.35;
}
@media (max-width: 640px) {
  :root body:not(.staff-v3):not([data-staff-page]) .cookie-prompt-v3 {
    position: relative; left: auto; right: auto; bottom: auto;
    width: calc(100% - 24px); max-height: min(50dvh, 430px);
    margin: 12px auto 0; padding: 16px; gap: 10px;
    display: flex; flex-direction: column; overflow: hidden;
  }
  :root body:not(.staff-v3):not([data-staff-page]) .cookie-prompt-copy-v3 {
    min-height: 0; overflow-y: auto; scrollbar-width: thin;
  }
  :root body:not(.staff-v3):not([data-staff-page]) .cookie-prompt-actions-v3 {
    position: static; flex-shrink: 0; padding-top: 10px;
  }
  :root body:not(.staff-v3):not([data-staff-page]) .cookie-prompt-spacer-v3 { display: none; }
  html:has([data-cookie-prompt]:not([hidden])) { scroll-padding-bottom: 0; }
}
@media (forced-colors: active) {
  :root body:not(.staff-v3):not([data-staff-page]) .cookie-prompt-v3,
  :root body:not(.staff-v3):not([data-staff-page]) .cookie-prompt-actions-v3 {
    background: Canvas; border-color: CanvasText; box-shadow: none;
  }
}

/* Scroll-linked entrances are one shot, never a hidden-content gate.  Only
   opacity and translation animate; large, live server lists paint in place. */
:root body:not(.staff-v3):not([data-staff-page]) main :is(section, article, h2, h3)[id] {
  scroll-margin-block-start: clamp(80px, 8vw, 104px);
}
/* This affects anchor/programmatic navigation, not finger-driven scrolling. */
@media screen and (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  :root:has(body:not(.staff-v3):not([data-staff-page])) { scroll-behavior: smooth; }
}
@media screen and (prefers-reduced-motion: no-preference) {
  :root body:not(.staff-v3):not([data-staff-page]) main :is(.journal-card-v6, .game-grid-v3 > a, .game-official-card-v6, .trust-grid-v3 article, .staff-public-card, .finder-choice, .server-shortlist-card) {
    transition: transform 220ms var(--motion-ease, ease-out), border-color 220ms ease,
      background-color 220ms ease, box-shadow 220ms ease;
  }
}
@media screen and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :root body:not(.staff-v3):not([data-staff-page]) main :is(.journal-card-v6, .game-grid-v3 > a, .game-official-card-v6, .trust-grid-v3 article, .staff-public-card, .finder-choice):is(:hover, :focus-within) {
    transform: translate3d(0, -2px, 0);
  }
}
@media screen and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  @keyframes public-scroll-enter-v7 {
    from { opacity: .84; transform: translate3d(0, 13px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  :root body:not(.staff-v3):not([data-staff-page]) .reveal-on-scroll.is-revealed:not(.section-v3:has(.server-list-v3, #game-server-list-v4)) {
    animation: public-scroll-enter-v7 520ms var(--motion-ease, ease-out) var(--reveal-delay, 0ms) 1 backwards;
  }
}
@media screen and (max-width: 640px) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  :root body:not(.staff-v3):not([data-staff-page]) .reveal-on-scroll.is-revealed:not(.section-v3:has(.server-list-v3, #game-server-list-v4)) {
    animation-duration: 440ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root:has(body:not(.staff-v3):not([data-staff-page])) { scroll-behavior: auto; }
  :root body:not(.staff-v3):not([data-staff-page]) .reveal-on-scroll.is-revealed { animation: none; }
}