/* ============================================================================
   games-os.css: /games/ in the homepage's look (s334, owner 2026-09-27).
   Loaded by Theme\GamesOs only, and every rule is under body.cg-games-os,
   which only cryptogames.gg's /games/ archive carries (egamers.io keeps its
   own look, owner's order).

   ⭐ The palette is home-os.css's, restated as the page's own --cg-gp-* tokens
   (cryptogames.css Section 19), so the React app's rules repaint without
   being rewritten. Where Section 19 typed the orange as a literal, the rule
   is restated below with the accent.
   ============================================================================ */

/* ---------------------------------------------------------------- tokens */
body.cg-games-os .cg-games-page-v2 {
  --cg-gp-bg: #191919;
  --cg-gp-elev: #212121;
  --cg-gp-card: #212121;
  --cg-gp-hover: #333333;
  --cg-gp-border: rgba(255, 255, 255, .08);
  --cg-gp-border-strong: #3f3f3f;
  --cg-gp-text: #ffffff;
  --cg-gp-text-dim: #b5b5b5;
  --cg-gp-text-faint: #8c8c8c;
  --cg-gp-ink: #ffffff;
  --cg-gp-ink-rgb: 255, 255, 255;
  --cg-gp-elev-rgb: 33, 33, 33;
  --cg-gp-accent: #9d8cff;
  --cg-gp-accent-hover: #b6a9ff;
  --cg-gp-radius: 14px;
  --cg-gp-radius-sm: 10px;
  --cg-gp-shell: none;
  /* ours */
  --gos-s2: #333333;
  --gos-s3: #3f3f3f;
  --gos-grad: linear-gradient(135deg, #06707f 0%, #4a28c4 62%, #7b2fc0 100%);
  --gos-grad-soft: rgba(106, 80, 255, .16);
  --gos-glow: rgba(123, 47, 192, .55);
  --gos-glow-2: rgba(74, 40, 196, .28);
  --gos-title: linear-gradient(120deg, #4fd1e0 0%, #9d8cff 55%, #c792ff 100%);
  --gos-up: #35b477;
  /* the server-rendered table's palette (modules.css / native-catalog.css) */
  --cg-accent: #9d8cff;
  /* cryptogames.css's Material tokens, which the table and the list read:
     cyan-grey text, cyan prices, Space Grotesk names. The homepage's instead. */
  --color-on-surface: #ffffff;
  --color-on-surface-variant: #b5b5b5;
  --color-primary-fixed-dim: #9d8cff;
  --color-primary-container: #9d8cff;
  --rgb-primary-fixed-dim: 157, 140, 255;
  --font-headline: Inter, system-ui, sans-serif;
}
body:not([data-theme="dark"]).cg-games-os .cg-games-page-v2 {
  --cg-gp-bg: #ffffff;
  --cg-gp-elev: #f4f4f6;
  --cg-gp-card: #f4f4f6;
  --cg-gp-hover: #e9e9ee;
  --cg-gp-border: rgba(0, 0, 0, .08);
  --cg-gp-border-strong: #dedee6;
  --cg-gp-text: #191919;
  --cg-gp-text-dim: #6b6b6b;
  --cg-gp-text-faint: #8a8a8a;
  --cg-gp-ink: #191919;
  --cg-gp-ink-rgb: 25, 25, 25;
  --cg-gp-elev-rgb: 244, 244, 246;
  --cg-gp-accent: #4a28c4;
  --cg-gp-accent-hover: #5b3be0;
  --gos-s2: #e9e9ee;
  --gos-s3: #dedee6;
  --gos-glow: rgba(123, 47, 192, .22);
  --gos-glow-2: rgba(74, 40, 196, .12);
  --gos-title: linear-gradient(120deg, #06707f 0%, #4a28c4 60%, #7b2fc0 100%);
  --gos-up: #2f9e68;
  --cg-accent: #4a28c4;
  --color-on-surface: #191919;
  --color-on-surface-variant: #6b6b6b;
  --color-primary-fixed-dim: #4a28c4;
  --color-primary-container: #4a28c4;
  --rgb-primary-fixed-dim: 74, 40, 196;
}

/* ---------------------------------------------------------- page ground */
body.cg-games-os,
body.cg-games-os main.cg-main,
body.cg-games-os .cg-content-area { background: #191919; }
body:not([data-theme="dark"]).cg-games-os,
body:not([data-theme="dark"]).cg-games-os main.cg-main,
body:not([data-theme="dark"]).cg-games-os .cg-content-area { background: #ffffff; }

/* The homepage's icon rail (partials/sidebar.php). Section 19 zeroed this
   page's offset because it had no rail; now it has one, from 1024px up
   (below that the rail is hidden sitewide). */
@media (min-width: 1024px) {
  body.cg-games-os .cg-rail ~ main.cg-main,
  body.cg-games-os .cg-rail ~ .footer-wrap,
  body.cg-games-os .cg-rail ~ .cg-site-footer,
  body.cg-games-os .cg-rail ~ * .footer-wrap { margin-left: var(--cg-rail, 64px); }
}

/* The games bar, same place as on the homepage: first thing on the page. */
body.cg-games-os .cg-gos-bar { padding: 16px 24px 0; }

body.cg-games-os .cg-games-page-v2 { min-height: 0; }
body.cg-games-os .cg-games-page-v2 .cg-shell { max-width: none; padding: 0 24px; }

/* ------------------------------------------------------------------ hero */
body.cg-games-os .cg-games-page-v2 .cg-hero {
  width: auto; margin: 20px 24px 0;
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 100% 0%, var(--gos-glow) 0%, var(--gos-glow-2) 35%, transparent 70%),
    var(--cg-gp-elev);
}
body.cg-games-os .cg-games-page-v2 .cg-hero-art { display: none; }
body.cg-games-os .cg-games-page-v2 .cg-hero-inner {
  max-width: none; margin: 0; padding: 26px 28px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: end;
}
body.cg-games-os .cg-games-page-v2 .cg-hero-inner > * { grid-column: 1; }
body.cg-games-os .cg-games-page-v2 .cg-hero-breadcrumb { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cg-gp-text-dim); }
body.cg-games-os .cg-games-page-v2 .cg-hero-breadcrumb a:hover { color: var(--cg-gp-accent); }
body.cg-games-os .cg-games-page-v2 .cg-hero-title { font-family: Inter, system-ui, sans-serif; font-size: 40px; line-height: 1.05; letter-spacing: -.02em; font-weight: 800; color: var(--cg-gp-text); }
body.cg-games-os .cg-games-page-v2 .cg-hero-title em {
  font-style: normal; background: var(--gos-title);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.cg-games-os .cg-games-page-v2 .cg-hero-sub { color: var(--cg-gp-text-dim); max-width: 60ch; }

body.cg-games-os .cg-games-page-v2 .cg-hero-search { margin: 16px 0 0; max-width: 520px; }
body.cg-games-os .cg-games-page-v2 .cg-hero-search .cg-search-wrap {
  position: relative; display: flex; align-items: center; height: 46px;
  border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid var(--cg-gp-border);
}
body:not([data-theme="dark"]).cg-games-os .cg-games-page-v2 .cg-hero-search .cg-search-wrap { background: #ffffff; }
body.cg-games-os .cg-games-page-v2 .cg-hero-search .cg-search-wrap:focus-within { border-color: var(--cg-gp-accent); }
body.cg-games-os .cg-games-page-v2 .cg-hero-search .cg-search-icon { position: static; margin: 0 8px 0 14px; font-size: 20px; color: var(--cg-gp-text-dim); }
body.cg-games-os .cg-games-page-v2 .cg-hero-search .cg-search-input {
  flex: 1; min-width: 0; height: 100%; padding: 0 14px 0 0; border: 0; outline: 0; box-shadow: none;
  background: transparent; color: var(--cg-gp-text); font: 500 15px/1 Inter, system-ui, sans-serif;
}
body.cg-games-os .cg-games-page-v2 .cg-hero-search .cg-search-input::placeholder { color: var(--cg-gp-text-dim); }

body.cg-games-os .cg-games-page-v2 .cg-hero-stats {
  grid-column: 2; grid-row: 1 / span 5; align-self: end;
  display: grid; grid-template-columns: repeat(3, auto); gap: 10px; margin: 0;
}
body.cg-games-os .cg-games-page-v2 .cg-hero-stat {
  min-width: 118px; padding: 12px 16px; border-radius: 12px;
  background: rgba(0, 0, 0, .32); border: 1px solid var(--cg-gp-border);
}
body:not([data-theme="dark"]).cg-games-os .cg-games-page-v2 .cg-hero-stat { background: rgba(255, 255, 255, .7); }
body.cg-games-os .cg-games-page-v2 .cg-hero-stat dt { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cg-gp-text-dim); }
body.cg-games-os .cg-games-page-v2 .cg-hero-stat dd { margin: 2px 0 0; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cg-gp-text); }
body.cg-games-os .cg-games-page-v2 .cg-hero-stat dd.is-up { color: var(--gos-up); }

/* One focus ring, the box's: the theme's own input:focus ring drew a second
   box inside it (owner's screenshot, 09-27). */
body.cg-games-os .cg-games-page-v2 .cg-hero-search .cg-search-input:focus,
body.cg-games-os .cg-games-page-v2 .cg-hero-search .cg-search-input:focus-visible {
  outline: 0; box-shadow: none; border: 0; background: transparent;
}

/* The sidebar's search moved up into the hero. */
body.cg-games-os .cg-games-page-v2 .cg-sidebar-search { display: none; }

/* ---------------------------------------------------------- the toolbar */
body.cg-games-os .cg-games-page-v2 .cg-chip-bar { gap: 8px; padding: 20px 0 16px; }
body.cg-games-os .cg-games-page-v2 .cg-chip-toggle,
body.cg-games-os .cg-games-page-v2 .cg-sort-pill {
  height: 40px; padding: 0 14px; border-radius: 12px; border: 0;
  background: var(--cg-gp-elev); color: var(--cg-gp-text-dim);
  font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none;
}
body.cg-games-os .cg-games-page-v2 .cg-chip-toggle:hover { background: var(--gos-s2); color: var(--cg-gp-text); }
body.cg-games-os .cg-games-page-v2 .cg-chip-toggle-active,
body.cg-games-os .cg-games-page-v2 .cg-chip-toggle.cg-chip-toggle-active {
  background: var(--gos-grad-soft); color: var(--cg-gp-accent);
  box-shadow: inset 0 0 0 1px rgba(157, 140, 255, .45); border-color: transparent;
}
body.cg-games-os .cg-games-page-v2 .cg-sort-pill select { color: var(--cg-gp-text); background: transparent; }
body.cg-games-os .cg-games-page-v2 .cg-chip-toggle-active .cg-chip-toggle-icon { color: var(--cg-gp-accent); }

/* Active filters ("Search "axie"" ✕, Clear all filters). Section 19 styles
   .cg-active-chip, but ActiveFilters.tsx renders .cg-chip / .cg-chip-remove /
   .cg-chip-clear, so the buttons fell to the theme's grey button with white
   text: unreadable (owner's screenshot, 09-27). */
body.cg-games-os .cg-games-page-v2 .cg-active-filters .cg-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 12px;
  border-radius: 999px; background: var(--gos-grad-soft); color: var(--cg-gp-text);
  box-shadow: inset 0 0 0 1px rgba(157, 140, 255, .35); font-size: 13px; font-weight: 600;
}
body.cg-games-os .cg-games-page-v2 .cg-active-filters .cg-chip-label { text-transform: none; letter-spacing: 0; font-size: 13px; }
body.cg-games-os .cg-games-page-v2 .cg-active-filters .cg-chip-key {
  margin-right: 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cg-gp-accent);
}
body.cg-games-os .cg-games-page-v2 .cg-active-filters .cg-chip-remove {
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--cg-gp-text-dim); cursor: pointer;
}
body.cg-games-os .cg-games-page-v2 .cg-active-filters .cg-chip-remove:hover { background: var(--gos-s2); color: var(--cg-gp-text); }
body.cg-games-os .cg-games-page-v2 .cg-active-filters .cg-chip-remove .material-symbols-outlined { font-size: 16px; color: inherit; }
body.cg-games-os .cg-games-page-v2 .cg-active-filters .cg-chip-clear {
  height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent;
  color: var(--cg-gp-accent); font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer;
}
body.cg-games-os .cg-games-page-v2 .cg-active-filters .cg-chip-clear:hover { background: var(--gos-grad-soft); }

/* ------------------------------------------------------- filter sidebar */
body.cg-games-os .cg-games-page-v2 .cg-layout-split { gap: 20px; }
body.cg-games-os .cg-games-page-v2 aside.cg-sidebar {
  background: var(--cg-gp-elev); border: 0; border-radius: 16px; padding: 8px;
}
body.cg-games-os .cg-games-page-v2 .cg-sidebar-section { border-color: var(--cg-gp-border); padding-left: 8px; padding-right: 8px; }
body.cg-games-os .cg-games-page-v2 .cg-sidebar-list-item { border-radius: 9px; }
body.cg-games-os .cg-games-page-v2 .cg-sidebar-list-item:hover { background: var(--gos-s2); }
body.cg-games-os .cg-games-page-v2 .cg-sidebar-showmore { color: var(--cg-gp-accent); }

/* ------------------------------------------------------ list and table */
body.cg-games-os .cg-games-page-v2 .cg-stats-title { font-family: Inter, system-ui, sans-serif; font-size: 18px; font-weight: 700; }
body.cg-games-os .cg-games-page-v2 .cg-stats-count strong,
body.cg-games-os .cg-games-page-v2 .cg-stats-count b { color: var(--cg-gp-text); }
body.cg-games-os .cg-games-page-v2 .cg-list-view-wrap { border-radius: 16px; overflow: hidden; background: var(--cg-gp-elev); }
/* The table as the homepage's rankings panel: one surface, hairline rows,
   white prices (the cyan was the old palette's). */
body.cg-games-os .cg-games-page-v2 .cg-games-table thead,
body.cg-games-os .cg-games-page-v2 .cg-games-table tbody tr { background: transparent; }
body.cg-games-os .cg-games-page-v2 .cg-games-table tbody tr:hover { background: var(--cg-gp-hover); }
body.cg-games-os .cg-games-page-v2 .cg-games-table th,
body.cg-games-os .cg-games-page-v2 .cg-games-table td { border-color: var(--cg-gp-border); }
body.cg-games-os .cg-games-page-v2 .cg-games-table .cg-dt-price { color: var(--cg-gp-text); font-weight: 700; }
body.cg-games-os .cg-games-page-v2 .cg-games-table .cg-gpill { background: var(--gos-s2); border-color: transparent; }
/* Bigger rows, owner 09-27 ("it looks so small"): icon 30 -> 44px, name
   13.5 -> 16px, tagline 11 -> 13px, cells 13 -> 15px, pills and badges up.
   The :is() also covers the table the server prints before React mounts
   (.cg-data-table in .cryptogames-dapps-list-root); without it the page
   painted the small rows first, then the big ones. */
body.cg-games-os :is(.cg-games-page-v2 .cg-games-table, .cryptogames-dapps-list-root .cg-band--list .cg-data-table) td { font-size: 15px; padding-top: 12px; padding-bottom: 12px; }
body.cg-games-os :is(.cg-games-page-v2 .cg-games-table, .cryptogames-dapps-list-root .cg-band--list .cg-data-table) th { font-size: 12.5px; }
body.cg-games-os :is(.cg-games-page-v2 .cg-games-table, .cryptogames-dapps-list-root .cg-band--list .cg-data-table) th.cg-dt-mcap-h { white-space: nowrap; min-width: 0; cursor: help; }
body.cg-games-os :is(.cg-games-page-v2 .cg-games-table, .cryptogames-dapps-list-root .cg-band--list .cg-data-table) .cg-dt-link { gap: 14px; }
body.cg-games-os :is(.cg-games-page-v2 .cg-games-table, .cryptogames-dapps-list-root .cg-band--list .cg-data-table) .cg-dt-icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 11px; }
body.cg-games-os :is(.cg-games-page-v2 .cg-games-table, .cryptogames-dapps-list-root .cg-band--list .cg-data-table) .cg-dt-name { font-size: 16px; line-height: 1.3; }
body.cg-games-os :is(.cg-games-page-v2 .cg-games-table, .cryptogames-dapps-list-root .cg-band--list .cg-data-table) .cg-dt-tagline { font-size: 13px; line-height: 1.4; margin-top: 2px; }
body.cg-games-os :is(.cg-games-page-v2 .cg-games-table, .cryptogames-dapps-list-root .cg-band--list .cg-data-table) .cg-gpill { font-size: 12px; padding: 3px 8px; }
body.cg-games-os :is(.cg-games-page-v2 .cg-games-table, .cryptogames-dapps-list-root .cg-band--list .cg-data-table) .cg-chain-name { font-size: 14px; }
body.cg-games-os :is(.cg-games-page-v2 .cg-games-table, .cryptogames-dapps-list-root .cg-band--list .cg-data-table) .cg-chain-icon { width: 22px; height: 22px; }
body.cg-games-os :is(.cg-games-page-v2 .cg-games-table, .cryptogames-dapps-list-root .cg-band--list .cg-data-table) .cg-dev-icon { font-size: 20px; }
body.cg-games-os :is(.cg-games-page-v2 .cg-games-table, .cryptogames-dapps-list-root .cg-band--list .cg-data-table) .cg-badge { font-size: 11.5px; padding: 3px 8px; }
body.cg-games-os .cg-games-page-v2 .cg-game-card { border-radius: 14px; }
body.cg-games-os .cg-games-page-v2 .cg-game-card:hover { border-color: rgba(157, 140, 255, .45); background: var(--cg-gp-hover); }

/* Pagination: the current page is the homepage's primary button. */
body.cg-games-os .cg-games-page-v2 .cg-page-btn { border-radius: 10px; }
body.cg-games-os .cg-games-page-v2 .cg-page-btn-active,
body.cg-games-os .cg-games-page-v2 .cg-page-btn.cg-page-btn-active {
  background: var(--gos-grad); border-color: transparent; color: #ffffff;
}

/* Section 19's orange literals, restated with the accent. */
body.cg-games-os .cg-games-page-v2 .cg-strip-arrow:hover { background: var(--gos-grad-soft); border-color: var(--cg-gp-accent); color: var(--cg-gp-accent); }
body.cg-games-os .cg-games-page-v2 .cg-genre-tile-v2:hover,
body.cg-games-os .cg-games-page-v2 .cg-genre-tile-v2.is-active { border-color: var(--cg-gp-accent); }
body.cg-games-os .cg-games-page-v2 .cg-genre-tile-v2.is-active .cg-genre-tile-overlay { background: var(--gos-grad-soft); }
body.cg-games-os .cg-games-page-v2 .cg-badge-p2e { background: var(--gos-grad-soft); color: var(--cg-gp-accent); }
body.cg-games-os .cg-game-card--sponsored { outline-color: var(--cg-gp-accent, #9d8cff); }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  body.cg-games-os .cg-games-page-v2 .cg-hero-inner { grid-template-columns: minmax(0, 1fr); }
  body.cg-games-os .cg-games-page-v2 .cg-hero-stats { grid-column: 1; grid-row: auto; margin-top: 18px; justify-self: start; }
}
@media (max-width: 760px) {
  body.cg-games-os .cg-gos-bar { padding: 12px 16px 0; }
  body.cg-games-os .cg-games-page-v2 .cg-shell { padding: 0 16px; }
  body.cg-games-os .cg-games-page-v2 .cg-hero { margin: 14px 16px 0; }
  body.cg-games-os .cg-games-page-v2 .cg-hero-inner { padding: 18px; }
  body.cg-games-os .cg-games-page-v2 .cg-hero-title { font-size: 30px; }
  body.cg-games-os .cg-games-page-v2 .cg-hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  body.cg-games-os .cg-games-page-v2 .cg-hero-stat { min-width: 0; padding: 10px; }
  body.cg-games-os .cg-games-page-v2 .cg-hero-stat dd { font-size: 17px; }
}