/* ============================================================================
   dir-os.css: /guilds/ and /investors/ in the homepage's look (owner 2026-09-27).
   Loaded by Theme\DirectoryOs only, and every rule is under body.cg-dir-os,
   which only cryptogames.gg's two shell pages carry (egamers.io keeps its own
   look, owner's order).

   The palette is home-os.css's, the layout tokens-os.css's. The tables are
   Lists\GuildsTable / InvestorsTable's shared markup, so this file re-points
   the variables they read (.cg-mod's --cg-*, cryptogames.css's Material
   --color-*) and restyles only what the look changes.
   Approved layout: artifact 5sd1z2X8qsuEoxwPVgTheh.
   ============================================================================ */

/* ---------------------------------------------------------------- tokens */
body.cg-dir-os {
  --dos-bg: #191919;
  --dos-s1: #212121;
  --dos-s2: #333333;
  --dos-s3: #3f3f3f;
  --dos-line: rgba(255, 255, 255, .08);
  --dos-text: #ffffff;
  --dos-muted: #b5b5b5;
  --dos-faint: #6f6f6f;
  --dos-accent: #9d8cff;
  --dos-grad: linear-gradient(135deg, #06707f 0%, #4a28c4 62%, #7b2fc0 100%);
  --dos-soft: rgba(106, 80, 255, .16);
  --dos-glow: rgba(123, 47, 192, .55);
  --dos-glow-2: rgba(74, 40, 196, .28);
  --dos-title: linear-gradient(120deg, #4fd1e0 0%, #9d8cff 55%, #c792ff 100%);
  --dos-well: rgba(0, 0, 0, .32);
  --dos-up: #35b477;
  --dos-down: #d65a52;
}
body:not([data-theme="dark"]).cg-dir-os {
  --dos-bg: #ffffff;
  --dos-s1: #f4f4f6;
  --dos-s2: #e9e9ee;
  --dos-s3: #dedee6;
  --dos-line: rgba(0, 0, 0, .08);
  --dos-text: #191919;
  --dos-muted: #6b6b6b;
  --dos-faint: #9a9a9a;
  --dos-accent: #4a28c4;
  --dos-soft: rgba(74, 40, 196, .10);
  --dos-glow: rgba(123, 47, 192, .22);
  --dos-glow-2: rgba(74, 40, 196, .12);
  --dos-title: linear-gradient(120deg, #06707f 0%, #4a28c4 60%, #7b2fc0 100%);
  --dos-well: rgba(255, 255, 255, .7);
  --dos-up: #2f9e68;
  --dos-down: #c0453e;
}

/* What the shared tables and the shell read, pointed at the palette above. */
body.cg-dir-os .cg-content-area {
  --color-on-surface: var(--dos-text);
  --color-on-surface-variant: var(--dos-muted);
  --color-muted-bright: var(--dos-muted);
  --color-primary-fixed-dim: var(--dos-accent);
  --color-surface: var(--dos-s1);
  --color-surface-container: var(--dos-s1);
  --font-headline: Inter, system-ui, sans-serif;
  --heading-family: Inter, system-ui, sans-serif;
  --body-family: Inter, system-ui, sans-serif;
}
body.cg-dir-os .cg-shellpage .cg-mod {
  --cg-ink: var(--dos-text);
  --cg-muted: var(--dos-muted);
  --cg-accent: var(--dos-accent);
  --cg-hair: var(--dos-line);
  --cg-surface: transparent;
  --cg-live: var(--dos-up);
  --cg-down: var(--dos-down);
}

/* ---------------------------------------------------------- page ground */
body.cg-dir-os,
body.cg-dir-os main.cg-main,
body.cg-dir-os .cg-content-area { background: var(--dos-bg); }
body.cg-dir-os .cg-content-area { max-width: none; padding: 20px 24px 40px; font-family: Inter, system-ui, sans-serif; }

/* ------------------------------------------------------------------ hero */
body.cg-dir-os .cg-dos-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end;
  margin: 0 0 18px; padding: 26px 28px; border-radius: 18px;
  background:
    radial-gradient(120% 140% at 100% 0%, var(--dos-glow) 0%, var(--dos-glow-2) 35%, transparent 70%),
    var(--dos-s1);
}
body.cg-dir-os .cg-dos-hero-main { min-width: 0; }
body.cg-dir-os .cg-dos-crumb { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dos-muted); }
body.cg-dir-os .cg-dos-crumb a { color: inherit; text-decoration: none; }
body.cg-dir-os .cg-dos-crumb a:hover { color: var(--dos-accent); }
body.cg-dir-os .cg-dos-title { margin: 0; font: 800 40px/1.05 Inter, system-ui, sans-serif; letter-spacing: -.02em; color: var(--dos-text); text-wrap: balance; }
body.cg-dir-os .cg-dos-title em {
  font-style: normal; background: var(--dos-title);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.cg-dir-os .cg-dos-sub { margin: 8px 0 18px; max-width: 60ch; font-size: 15px; color: var(--dos-muted); }

body.cg-dir-os .cg-dos-search {
  display: flex; align-items: center; gap: 10px; max-width: 520px; height: 46px; padding: 0 6px 0 14px;
  border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid var(--dos-line);
}
body:not([data-theme="dark"]).cg-dir-os .cg-dos-search { background: #ffffff; }
body.cg-dir-os .cg-dos-search:focus-within { border-color: var(--dos-accent); }
body.cg-dir-os .cg-dos-search .material-symbols-outlined { font-size: 20px; color: var(--dos-muted); }
body.cg-dir-os .cg-dos-search input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; box-shadow: none;
  background: transparent; color: var(--dos-text); font: 500 15px/1 Inter, system-ui, sans-serif;
}
body.cg-dir-os .cg-dos-search input::placeholder { color: var(--dos-muted); }
body.cg-dir-os .cg-dos-search button {
  height: 34px; padding: 0 16px; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--dos-grad); color: #ffffff; font: 600 14px/1 Inter, system-ui, sans-serif;
}
body.cg-dir-os .cg-dos-search button:focus-visible { outline: 2px solid var(--dos-accent); outline-offset: 2px; }

/* Four tiles, two by two, beside the title. */
body.cg-dir-os .cg-dos-stats { display: grid; grid-template-columns: repeat(2, minmax(128px, auto)); gap: 10px; }
body.cg-dir-os .cg-dos-stat { min-width: 128px; padding: 12px 16px; border-radius: 12px; background: var(--dos-well); border: 1px solid var(--dos-line); }
body.cg-dir-os .cg-dos-stat-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dos-muted); }
body.cg-dir-os .cg-dos-stat-value { display: block; font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--dos-text); font-variant-numeric: tabular-nums; }
body.cg-dir-os .cg-dos-stat-value a { color: inherit; text-decoration: none; }
body.cg-dir-os .cg-dos-stat-value a:hover { color: var(--dos-accent); }
body.cg-dir-os .cg-dos-stat-n { margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--dos-muted); }

/* ------------------------------------------------------------- sort tabs */
body.cg-dir-os .cg-dir-band .cg-band-tabs {
  display: inline-flex; max-width: 100%; gap: 4px; padding: 4px; margin: 0 0 14px;
  border: 0; border-radius: 12px; background: var(--dos-s1);
}
body.cg-dir-os .cg-mod a.cg-band-tab {
  height: 32px; padding: 0 12px; border: 0; border-radius: 9px;
  font: 600 13px/1 Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none;
  color: var(--dos-muted); text-decoration: none;
}
body.cg-dir-os .cg-mod a.cg-band-tab:hover { color: var(--dos-text); }
body.cg-dir-os .cg-mod a.cg-band-tab-on { background: var(--dos-s3); color: var(--dos-text); }
body.cg-dir-os .cg-mod a.cg-band-tab:focus-visible { outline: 2px solid var(--dos-accent); outline-offset: 2px; }

/* ----------------------------------------------------------------- table */
body.cg-dir-os .cg-dir-band .cg-dt-scroll { border-radius: 16px; background: var(--dos-s1); --cg-swipe-bg: var(--dos-s1); }
body.cg-dir-os .cg-band .cg-data-table,
body.cg-dir-os .cg-band .cg-data-table th,
body.cg-dir-os .cg-band .cg-data-table td { border-left: 0; border-right: 0; }
body.cg-dir-os .cg-band .cg-data-table th {
  padding: 14px 12px 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dos-muted); border-bottom: 1px solid var(--dos-line);
}
body.cg-dir-os .cg-shellpage .cg-dir-table thead th { background: var(--dos-s1) !important; }
body.cg-dir-os .cg-band .cg-data-table td {
  padding: 10px 12px; border-top: 0; border-bottom: 1px solid var(--dos-line);
  font-size: 14px; vertical-align: middle; font-variant-numeric: tabular-nums; color: var(--dos-text);
}
body.cg-dir-os .cg-band .cg-data-table tbody tr:last-child td { border-bottom: 0; }
body.cg-dir-os .cg-band .cg-data-table tbody tr,
body.cg-dir-os .cg-band .cg-data-table tbody tr:nth-child(even) { background: transparent; }
body.cg-dir-os .cg-band .cg-data-table tbody tr:hover { background: rgba(127, 127, 127, .06); }

body.cg-dir-os .cg-dos-rk {
  display: inline-grid; place-items: center; width: 30px; height: 26px; border-radius: 8px;
  background: var(--dos-s2); color: var(--dos-muted); font-size: 12px; font-weight: 700;
}
body.cg-dir-os .cg-dos-rk-top { background: var(--dos-grad); color: #ffffff; }

/* Guilds and investors are organisations: rounded squares, like the homepage's studio tiles. */
body.cg-dir-os .cg-dir-table .cg-dt-link { display: inline-flex; align-items: center; gap: 10px; color: var(--dos-text); text-decoration: none; }
body.cg-dir-os .cg-dir-table .cg-dt-link:hover .cg-dt-name { color: var(--dos-accent); }
body.cg-dir-os .cg-dir-table .cg-dt-link picture { display: contents; }
body.cg-dir-os .cg-shellpage .cg-dir-table .cg-dt-icon { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; object-fit: cover; background: var(--dos-s2); }
body.cg-dir-os .cg-dir-table .cg-dt-name { font-weight: 700; font-size: 14px; }
body.cg-dir-os .cg-shellpage .cg-dir-pill {
  margin-left: 4px; padding: 3px 8px; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--dos-accent); background: var(--dos-soft);
}

/* Games: app icons overlapping, the count beside them. */
body.cg-dir-os .cg-shellpage .cg-dir-games { gap: 0; }
body.cg-dir-os .cg-dir-mini-link picture { display: contents; }
body.cg-dir-os .cg-shellpage .cg-dir-mini { width: 24px; height: 24px; border-radius: 7px; background: var(--dos-s3); box-shadow: 0 0 0 2px var(--dos-s1); }
body.cg-dir-os .cg-shellpage .cg-dir-mini-link + .cg-dir-mini-link { margin-left: -7px; }
body.cg-dir-os .cg-dir-mini-link:hover .cg-dir-mini { box-shadow: 0 0 0 2px var(--dos-accent); }
body.cg-dir-os .cg-shellpage .cg-dir-count { min-width: 18px; margin-left: 8px; text-align: right; color: var(--dos-text); }
body.cg-dir-os .cg-shellpage .cg-dir-n { margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--dos-muted); }
body.cg-dir-os .cg-dt-empty { color: var(--dos-faint); }
body.cg-dir-os .cg-delta-pos { color: var(--dos-up); font-weight: 700; }
body.cg-dir-os .cg-delta-neg { color: var(--dos-down); font-weight: 700; }

/* Token: a chip, like the game chip on /tokens/. */
body.cg-dir-os .cg-shellpage a.cg-dir-token {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 10px;
  background: var(--dos-s2); color: var(--dos-text); font-weight: 600;
}
body.cg-dir-os .cg-shellpage a.cg-dir-token:hover { background: var(--dos-s3); }
body.cg-dir-os .cg-shellpage .cg-dir-token .cg-tk-symbol { color: var(--dos-text); font-size: 12px; }
body.cg-dir-os .cg-shellpage .cg-dir-token .cg-tk-price { color: var(--dos-text); }

/* Links: two small square buttons. */
body.cg-dir-os .cg-shellpage .cg-dir-links { gap: 6px; }
body.cg-dir-os .cg-shellpage a.cg-dir-ext {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: var(--dos-s2); color: var(--dos-muted); font-size: 14px; font-weight: 700;
}
body.cg-dir-os .cg-shellpage a.cg-dir-ext:hover { background: var(--dos-s3); color: var(--dos-text); }
body.cg-dir-os .cg-shellpage a.cg-dir-ext:focus-visible,
body.cg-dir-os .cg-dir-table a:focus-visible { outline: 2px solid var(--dos-accent); outline-offset: 2px; }
body.cg-dir-os .cg-shellpage .cg-dir-ext .material-symbols-outlined { font-size: 17px; }

/* ------------------------------------------------------------ pagination */
body.cg-dir-os .cg-list-nav span { color: var(--dos-muted) !important; font: 600 13px/1 Inter, system-ui, sans-serif !important; }
body.cg-dir-os .cg-list-nav a.cg-badge {
  display: inline-grid; place-items: center; height: 38px; padding: 0 16px; border-radius: 10px;
  background: var(--dos-grad); color: #ffffff; font: 600 14px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0; text-transform: none; text-decoration: none;
}
body.cg-dir-os .cg-list-nav a.cg-badge:hover { filter: brightness(1.12); }
body.cg-dir-os .cg-list-nav a.cg-badge:focus-visible { outline: 2px solid var(--dos-accent); outline-offset: 2px; }

/* ----------------------------------------------------------------- sizes */
@media (max-width: 900px) {
  body.cg-dir-os .cg-dos-hero { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  body.cg-dir-os .cg-content-area { padding: 12px 12px 32px; }
  body.cg-dir-os .cg-dos-hero { padding: 18px; gap: 14px; }
  body.cg-dir-os .cg-dos-title { font-size: 28px; }
  body.cg-dir-os .cg-dos-sub { margin-bottom: 14px; font-size: 14px; }
  body.cg-dir-os .cg-dos-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.cg-dir-os .cg-dos-stat { min-width: 0; padding: 10px; }
  body.cg-dir-os .cg-dos-stat-value { font-size: 17px; }
  body.cg-dir-os .cg-dir-band .cg-band-tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
  body.cg-dir-os .cg-band .cg-data-table td,
  body.cg-dir-os .cg-band .cg-data-table th { padding-left: 6px; padding-right: 6px; }
  body.cg-dir-os .cg-dos-rk { width: 26px; height: 24px; font-size: 11px; }
  body.cg-dir-os .cg-shellpage .cg-dir-table .cg-dt-rank { width: 30px; }
}