/* ============================================================================= CryptoGames.gg Design System Phase 6 — Plugin stylesheet (scoped to CPT pages only) Source of truth: .planning/phases/06-redesign/06-UI-SPEC.md ============================================================================= */ /* Section 1 — Fonts The TEXT faces (Space Grotesk, Inter) used to be `@import` rules right here. An @import cannot begin downloading until the stylesheet containing it has itself been fetched AND parsed, so they arrived on a third serialised round trip — measured landing at ~1,980ms on /games/. They are enqueued from PHP now (utils/functions.php). Do not put them back here. The ICON face is not here either, and it is not here on purpose. We serve it ourselves, and its @font-face plus the `.material-symbols-outlined` rule now live in **assets/css/icons.css**, printed inline in on EVERY page by Assets\IconFace. ⛔ DO NOT MOVE THEM BACK. This stylesheet is scoped to CPT singulars and CPT archives, because its body reset, sidebar rules and main-content offset would fight the theme on an ordinary page template. `/investors/`, `/guilds/` and `/calendar/` are ordinary WordPress Pages hosting our shortcodes, so they never load this file — and while the face lived here, `/investors/` rendered its 12 icons AS THE WORD. A second copy here would be the copy that goes stale. */ /* Section 2 — CSS custom properties */ :root { /* Surface hierarchy */ --color-surface: #131314; --color-surface-dim: #131314; --color-surface-container-lowest: #0e0e0f; --color-surface-container-low: #1c1b1c; --color-surface-container: #201f20; --color-surface-container-high: #2a2a2b; --color-surface-container-highest: #353436; --color-surface-variant: #353436; --color-surface-bright: #3a393a; --color-background: #131314; /* Borders */ --color-outline: #849495; --color-outline-variant: #3b494b; /* Text */ --color-on-surface: #e5e2e3; --color-on-surface-variant: #b9cacb; --color-on-primary-container: #006970; --color-on-tertiary-container: #506600; --color-on-secondary-container: #480063; /* Accents */ --color-primary-container: #00f0ff; --color-primary-fixed-dim: #00dbe9; --color-primary-fixed: #7df4ff; --color-primary: #dbfcff; --color-secondary-container: #cf5cff; --color-secondary-fixed-dim: #ecb2ff; --color-secondary: #ecb2ff; --color-tertiary-container: #bbea00; --color-tertiary-fixed-dim: #abd600; --color-tertiary: #e9ffa8; /* Semantic */ --color-error: #ffb4ab; --color-error-container: #93000a; /* Typography */ --font-headline: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --font-label: 'Inter', sans-serif; /* Spacing */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; } /* Section 3 — Base reset and body */ /* * ⛔⛔⛔ THESE FOUR RULES ARE THE ONLY ONES IN THIS FILE THAT CAN ESCAPE OUR OWN * PAGES, AND THEY MUST NOT. Measured 2026-08-18 across the whole file: of 1,004 * top-level rules, exactly four selectors were unscoped — the `*` reset below, * `body`, `a` and `img`. Everything else already anchors on `.cg…`, `.dapp-…` * or `body.cg-layout`. * * ⭐⭐⭐ WHY IT MATTERS EVEN THOUGH NOTHING IS BROKEN TODAY. Every one of the 11 * Elementor widgets declares `cryptogames-css` in `Base::get_style_depends()`, * so Elementor enqueues this file WHEREVER a widget lands — editor included. * A widget dropped on an ordinary Foxiz page therefore brings this file to a * page whose has no `cg-layout`, and a bare `*{margin:0;padding:0}` * plus `a{color:inherit}` would strip the spacing and every link colour off * the theme's header, nav and footer. Latent, not firing: no page hosts a * widget yet. That is precisely why it is cheap to fix now. * * ⭐⭐⭐ `:where()` CONTRIBUTES ZERO SPECIFICITY — that is the whole point of * using it here rather than plain `body.cg-layout …`. Each selector below keeps * the exact weight it had as a bare `*` / `body` / `a` / `img`, so on every page * where these already applied, the same declaration still wins. Scoping with a * plain class would have raised `body` from (0,0,1) to (0,1,1) and could have * taken the font or background off Foxiz on seven live page types. * * Measured the same day: all seven page types that load this file — /games/, * a game singular, /tokens/, a token singular, /dashboard/, /guilds/, * /investors/ — carry `cg-layout` on ; the two that do not (/ and * /calendar/) do not load the file at all. The scope is exact, not a guess. * * `.cg-scope` is the wrapper `Base::render()` puts around every widget, so a * widget keeps its own reset on a foreign page. ⛔ ONE LIST, not a list of root * classes to keep in sync — see the s182 header-vs-cell drift. */ :where(body.cg-layout, .cg-scope) *, :where(body.cg-layout, .cg-scope) *::before, :where(body.cg-layout, .cg-scope) *::after, .cg-scope { box-sizing: border-box; margin: 0; padding: 0; } body:where(.cg-layout), .cg-scope { background: var(--color-background); color: var(--color-on-surface); font-family: var(--font-body); } /* * ⛔⛔ THE LINE ABOVE HAS NEVER APPLIED, AND ITS BEING CORRECT IS WHY NOBODY * LOOKED. Foxiz's `main.css` carries `body { color: var(--body-fcolor) }` * — the same bare `body` selector, i.e. the SAME SPECIFICITY (0,0,1) — and it * is enqueued AFTER ours, so source order hands the theme the win on every * page we own. `--body-fcolor` is the theme's LIGHT-mode ink, `#333333`, and * our surfaces are `#131314`: a measured 1.47:1 against a 4.5 requirement. * * ⭐⭐⭐ So our dark pages have only ever been dark in the BACKGROUND. Anything * carrying its own explicit colour looked right, which is nearly everything — * and every element somebody forgot to colour inherited the light theme's ink * and went invisible in a way that produces no error, no console message and a * plausible-looking page. Measured casualties: the whole FAQ block on every * game page (question AND answer), the editorial-assessment note, and * `/tokens/`'s pagination label and search icon. * * ⭐ The fix is the SELECTOR, not the value. `.cg-layout` is our own class on * , so `body.cg-layout` is (0,1,1) and outranks a bare `body` no matter * which stylesheet loads last — the failure mode here was never about which * colour we asked for. */ body.cg-layout { color: var(--color-on-surface); } :where(body.cg-layout, .cg-scope) a { color: inherit; text-decoration: none; } :where(body.cg-layout, .cg-scope) img { max-width: 100%; height: auto; } /* The `.material-symbols-outlined` rule that used to sit here — the one whose `width: 1em` turns the icon face's arrival into a repaint instead of an 0.0841 layout shift — has moved to assets/css/icons.css, beside the @font-face it depends on. It is printed inline in on every page. ⛔ Do not re-add it here; see Section 1. */ /* The same failure one storey down, and much bigger. The /games/ PHP fallback — the crawler / no-JS list that React later throws away — puts ~40 inline curated-facet links ABOVE ~2,400px of card markup. The theme's stack is `Jost, Verdana, Geneva, sans-serif`, and Jost is the narrower face: when it lands the block re-wraps from 723px to 641px, two wrapped lines fewer, and every card below it jumps up 82px. Measured 0.2921 CLS on /games/, on five loads in six. ⭐ It is the FALLBACK'S OWN reflow, not the React takeover: with the bundle blocked the shift still scores 0.2921 on 4 runs of 4, and with webfonts blocked it disappears entirely. Those two experiments are what identified it; a CLS summary had blamed the hero for two sessions. Pinning to the NON-WEBFONT half of the stack the theme already declares is what makes first paint final: the block renders exactly as it does today and there is simply no second state for it to shift into. This markup is deleted for every visitor who has JavaScript, so its typography is worth nothing and its stability is worth 0.29 of CLS. `!important` is the point of the rule, not sloppiness — nothing may re-type this block. */ .cg-facet-nav, .cg-facet-nav * { font-family: Verdana, Geneva, sans-serif !important; } /* Section 4 — Page layout shell */ .cg-layout { min-height: 100vh; background: var(--color-background); } /* ⭐⭐⭐ s249 — THE HEADER IS THE THEME'S, ON EVERY PAGE. partials/nav.php now calls foxiz_render_header() (Theme\ThemeHeader), exactly as the homepage does, so the logo, the menu, the toggle and the Telegram button are the same because they are one thing. Foxiz's header is ~60px and sits in NORMAL FLOW, taking its own space; it goes sticky on scroll at that same height. ⚠️ `.cg-top-nav`, the plugin's own bar, is now the FALLBACK — rendered only where the theme has no header to lend (egamers.io runs Pixwell). It is a 64px bar FIXED to the viewport, so everything after it needs pushing down. The two variables say which case we are in, and the bar's own sibling rule flips them — the shell never has to know which theme it is on: --cg-hd the height of whatever is stuck to the top when scrolled; sticky/fixed children (rail, tab navs) start below it. --cg-hd-pad the top padding the content needs to clear a FIXED bar at load: nothing under a header in flow, the bar's height under the fallback. */ .cg-layout { --cg-hd: 60px; --cg-hd-pad: 0px; } .cg-top-nav ~ .cg-main, .cg-top-nav ~ .cg-sidebar { --cg-hd: 64px; --cg-hd-pad: 64px; } .cg-main { margin-left: 256px; padding-top: var(--cg-hd-pad); min-height: 100vh; background: var(--color-background); } /* /games/ archive owns its own filter sidebar — no left nav offset. */ .cg-layout--games-archive .cg-main { margin-left: 0; } /* Top nav */ .cg-top-nav { position: fixed; top: 0; width: 100%; z-index: 50; height: 64px; background: #131314; box-shadow: 0 0 20px rgba(0,240,255,0.08); font-family: var(--font-headline); display: flex; align-items: center; justify-content: space-between; padding: 0 32px; } .cg-nav-logo { font-size: 24px; font-weight: 700; letter-spacing: -0.05em; color: #00dbe9; } .cg-nav-links { display: flex; align-items: center; gap: 32px; } .cg-nav-link { color: #b9cacb; font-size: 14px; transition: color 150ms ease; } .cg-nav-link:hover { color: #e5e2e3; } .cg-nav-link.active { color: #00dbe9; border-bottom: 2px solid #00dbe9; padding-bottom: 4px; } .cg-nav-icon-btn { padding: 8px; border-radius: 9999px; background: transparent; border: none; cursor: pointer; color: #b9cacb; } .cg-nav-icon-btn:hover { background: rgba(58,57,58,0.4); backdrop-filter: blur(24px); } .cg-nav-actions { display: flex; align-items: center; gap: 8px; } /* Sidebar */ .cg-sidebar { width: 256px; position: fixed; left: 0; top: var(--cg-hd); background: #1c1b1c; display: flex; flex-direction: column; padding: 24px 0; gap: 4px; z-index: 40; font-family: var(--font-headline); font-size: 14px; letter-spacing: 0.025em; height: calc(100vh - var(--cg-hd)); overflow-y: auto; } .cg-sidebar-section-label { padding: 8px 24px 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #849495; } .cg-sidebar-nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 24px; color: #b9cacb; opacity: 0.8; transition: all 300ms ease; text-decoration: none; border-left: 4px solid transparent; } .cg-sidebar-nav-item:hover { background: #201f20; color: #e5e2e3; opacity: 1; transform: translateX(4px); } .cg-sidebar-nav-item.active { background: linear-gradient(to right, rgba(0,240,255,0.1), transparent); border-left: 4px solid #00dbe9; color: #00dbe9; font-weight: 700; opacity: 1; box-shadow: inset 0 0 10px rgba(0,240,255,0.1); } .cg-sidebar-play-btn { width: calc(100% - 48px); margin: 0 24px; background: #2a2a2b; color: #00dbe9; border: 1px solid rgba(59,73,75,0.2); border-radius: 2px; font-weight: 700; padding: 12px 24px; font-family: var(--font-headline); font-size: 14px; cursor: pointer; text-align: center; display: block; } .cg-sidebar-footer { margin-top: auto; padding: 16px 0; border-top: 1px solid rgba(59,73,75,0.1); } /* Section 5 — Buttons */ .cg-cta-primary { background: linear-gradient(to right, #00f0ff, #00dbe9); color: #006970; font-weight: 700; border-radius: 2px; box-shadow: 0 0 15px rgba(0,219,233,0.3); transition: all 150ms ease; border: none; cursor: pointer; padding: 12px 24px; font-family: var(--font-headline); font-size: 14px; display: inline-block; text-align: center; } .cg-cta-primary:active { transform: scale(0.95); } .cg-btn-ghost { background: #201f20; border: 1px solid rgba(59,73,75,0.2); color: #e5e2e3; border-radius: 2px; padding: 12px 24px; font-family: var(--font-headline); font-size: 14px; cursor: pointer; transition: background 150ms ease; } .cg-btn-ghost:hover { background: #2a2a2b; } .cg-btn-ghost-cyan { background: rgba(0,240,255,0.1); border: 1px solid rgba(0,240,255,0.2); color: #00f0ff; border-radius: 2px; font-weight: 700; padding: 12px 24px; font-family: var(--font-headline); font-size: 14px; cursor: pointer; transition: all 150ms ease; } .cg-btn-ghost-cyan:hover { background: #00f0ff; color: #006970; } .cg-fab { position: fixed; bottom: 32px; right: 32px; width: 56px; height: 56px; border-radius: 9999px; background: linear-gradient(135deg, #00f0ff, #00dbe9); color: #006970; border: none; cursor: pointer; z-index: 60; box-shadow: 0 8px 32px rgba(0,219,233,0.3); display: flex; align-items: center; justify-content: center; font-size: 24px; transition: all 150ms ease; } .cg-fab:hover { transform: scale(1.1); } .cg-fab:active { transform: scale(0.9); } /* View toggle pills */ .cg-view-toggle { background: #1c1b1c; padding: 4px; border-radius: 8px; display: inline-flex; } .cg-view-toggle-active { padding: 6px 16px; background: #201f20; color: #00dbe9; border-radius: 6px; } .cg-view-toggle-inactive { padding: 6px 16px; color: #b9cacb; cursor: pointer; } .cg-view-toggle-inactive:hover { color: #e5e2e3; } /* Section 6 — Cards and containers */ .cg-card { background: #201f20; border-radius: 8px; border: 1px solid rgba(59,73,75,0.1); transition: all 300ms ease; } .cg-card:hover { border-color: rgba(0,219,233,0.3); background: #2a2a2b; } .cg-card-low { background: #1c1b1c; border-radius: 8px; border: 1px solid rgba(59,73,75,0.1); } .cg-metric-card { background: #1c1b1c; padding: 24px; border-radius: 8px; border: 1px solid rgba(59,73,75,0.1); } .cg-metric-label { font-family: var(--font-label); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #b9cacb; margin-bottom: 4px; } .cg-metric-value { font-family: var(--font-headline); font-size: 30px; font-weight: 700; color: #e5e2e3; } .cg-metric-delta-pos { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: #bbea00; } .cg-metric-delta-neg { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: #ffb4ab; } .cg-glass-panel, .cg-glass-card { background: rgba(58,57,58,0.4); backdrop-filter: blur(24px); } .cg-neon-glow:hover { box-shadow: 0 0 15px rgba(0,219,233,0.2); } /* Event card */ .cg-event-card { display: flex; flex-direction: column; background: #1c1b1c; border-radius: 8px; padding: 16px; gap: 24px; border: 1px solid transparent; transition: all 150ms ease; } .cg-event-card:hover { border-color: rgba(0,240,255,0.2); background: #2a2a2b; } @media (min-width: 768px) { .cg-event-card { flex-direction: row; } } .cg-event-card-image { width: 100%; height: 128px; border-radius: 8px; object-fit: cover; transition: transform 500ms ease; } @media (min-width: 768px) { .cg-event-card-image { width: 192px; } } .cg-event-card:hover .cg-event-card-image { transform: scale(1.05); } .cg-event-countdown { font-family: var(--font-headline); font-size: 18px; font-weight: 700; color: #00dbe9; } /* Guild card */ .cg-guild-card { display: flex; flex-direction: column; background: #201f20; border-radius: 8px; overflow: hidden; border: 1px solid rgba(59,73,75,0.1); transition: all 300ms ease; } .cg-guild-card:hover { border-color: rgba(0,219,233,0.3); background: #2a2a2b; } .cg-guild-card-banner { height: 128px; overflow: hidden; } .cg-guild-card-banner img { opacity: 0.5; width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; } .cg-guild-card:hover .cg-guild-card-banner img { transform: scale(1.05); } .cg-guild-logo { width: 48px; height: 48px; border-radius: 8px; background: #131314; border: 2px solid #00dbe9; } .cg-guild-card-body { padding: 24px; } .cg-guild-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: -0.025em; color: #b9cacb; } .cg-guild-stat-value { font-size: 14px; font-weight: 700; } .cg-guild-tag { padding: 4px 8px; background: #0e0e0f; border-radius: 2px; font-size: 10px; border: 1px solid rgba(59,73,75,0.2); } /* Investor card */ .cg-investor-card { display: block; background: #201f20; border-radius: 8px; padding: 24px; border: 1px solid rgba(59,73,75,0.05); transition: all 150ms ease; } .cg-investor-card:hover { border-color: rgba(0,219,233,0.3); transform: translateY(-4px); } .cg-investor-logo { width: 64px; height: 64px; border-radius: 8px; background: #2a2a2b; } .cg-investor-role { color: #cf5cff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .cg-investor-series { color: #bbea00; font-size: 10px; font-weight: 700; text-transform: uppercase; } .cg-investor-footer { border-top: 1px solid rgba(59,73,75,0.1); padding-top: 16px; margin-top: 16px; display: flex; justify-content: space-between; align-items: center; } /* Section 7 — Data table */ .cg-data-table-wrap { background: #201f20; border-radius: 16px; border: 1px solid rgba(59,73,75,0.15); overflow: hidden; } .cg-data-table-header { padding: 24px; border-bottom: 1px solid rgba(59,73,75,0.1); display: flex; justify-content: space-between; align-items: center; } .cg-data-table-header-title { font-family: var(--font-headline); font-size: 20px; font-weight: 700; } .cg-data-table-action { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #00f0ff; } .cg-data-table-action:hover { text-decoration: underline; } .cg-data-table { width: 100%; border-collapse: collapse; } .cg-data-table thead { background: rgba(28,27,28,0.5); } .cg-data-table th { padding: 16px 24px; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: #b9cacb; text-align: left; } .cg-data-table td { padding: 16px 24px; border-top: 1px solid rgba(59,73,75,0.05); font-size: 14px; } .cg-data-table tbody tr:hover { background: rgba(58,57,58,0.05); } /* Section 7b — Games table (the Elementor widget / [cryptogames_games_table]) * * A table is the one block that cannot reflow: on a phone the columns have to * scroll sideways rather than wrap into unreadable stacks. The wrap above sets * overflow:hidden for its rounded corners, so the scroller is a layer inside * it. -webkit-overflow-scrolling keeps it from feeling stuck on iOS. * * Colours are literal, not Foxiz custom properties: this widget can be dropped * on an Elementor Canvas page where the theme never loads, and a var() that * falls back to its light-page default renders #333 on #201f20. */ .cg-games-table .cg-dt-scroll, .cg-tokens-table .cg-dt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ⭐⭐⭐ THE SWIPE SHADOW — the scroll was real, the invitation was not. * MEASURED at 390px, s191: the table is 969px inside a 279px window, so 71% * of it — genre, chain, device, market cap and the 7d sparkline — is one swipe * away. s181 made that swipe POSSIBLE (`.cg-mod.cg-band{min-width:0}`); nothing * ever said it was there. Desktop Chrome paints a 15px scrollbar here and looks * fine, which is why this survived: every phone browser uses an OVERLAY * scrollbar that is invisible until you already scrolled. * * ⭐⭐ IT COSTS NO MEDIA QUERY BECAUSE IT CANNOT LIE. Two `local` covers scroll * with the content, two `scroll` shadows are pinned to the box. With no * overflow the covers sit exactly on the shadows and nothing paints; at the * left end the left shadow is covered, at the right end the right one is. * VERIFIED in all three states: 1440 (overflow 0) paints neither edge, 390 at * scrollLeft 0 paints only the right, 390 at scrollLeft 690 only the left. * * ⚠️ THE COVER COLOUR IS LOAD-BEARING AND MUST EQUAL THE WRAP'S BACKGROUND. * `.cg-data-table-wrap` is `#201f20`, declared once at the top of this section * and overridden in no stylesheet — a cover that does not match reads as a * grey bar welded to the edge, not as an absence. Literal for the same reason * the rest of this section is: an Elementor Canvas page never loads the theme. * * ⚠️ Painted BEHIND the rows, which are a 9.4%-alpha zebra, so the fade reads * at ~90% over a striped row. That is why the shadow is .60 and not .35. */ /* ⭐ THE SWIPE SHADOW for this table now lives with the other two that need * it, at the END of this file — see "CROSS-CUTTING: THE SWIPE AFFORDANCE". * It had to move: `.cg-tab-nav-sticky` declares its own `background` at line * ~2231, so a shared rule up here would lose the cascade to it and paint * nothing, on the one caller whose scroll hides the most. */ .cg-games-table .cg-data-table-header-title, .cg-tokens-table .cg-data-table-header-title { color: #e5e2e3; } /* The counter tiles are links now (CatalogCounts), and a link's children are * inline — without this the label and the value sit on one line. */ .cg-metric-card .cg-metric-label, .cg-metric-card .cg-metric-value { display: block; } .cg-metric-link { display: block; text-decoration: none; transition: border-color .18s ease, transform .18s ease; } .cg-metric-link:hover { border-color: rgba(0,219,233,0.35); transform: translateY(-2px); } .cg-games-table .cg-data-table-action, .cg-tokens-table .cg-data-table-action { text-decoration: none; } .cg-games-table .cg-badge-f2p, .cg-tokens-table .cg-badge-f2p { background: rgba(34,197,94,0.14); color: #6ee7a0; } .cg-games-table .cg-data-table, .cg-tokens-table .cg-data-table { min-width: 640px; } .cg-games-table .cg-data-table td, .cg-tokens-table .cg-data-table td { color: #b9cacb; vertical-align: middle; } .cg-games-table .cg-dt-num, .cg-tokens-table .cg-dt-num { text-align: right; white-space: nowrap; } .cg-games-table th.cg-dt-num, .cg-tokens-table th.cg-dt-num { text-align: right; } .cg-games-table .cg-dt-rank, .cg-tokens-table .cg-dt-rank { color: #7c8c8d; font-variant-numeric: tabular-nums; width: 1%; } .cg-games-table .cg-dt-link, .cg-tokens-table .cg-dt-link { display: flex; align-items: center; gap: 12px; text-decoration: none; } .cg-games-table .cg-dt-icon, .cg-tokens-table .cg-dt-icon { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; flex-shrink: 0; } .cg-games-table .cg-dt-icon-blank, .cg-tokens-table .cg-dt-icon-blank { display: block; background: #2a2a2b; } .cg-games-table .cg-dt-name, .cg-tokens-table .cg-dt-name { font-weight: 700; color: #e5e2e3; } .cg-games-table .cg-dt-link:hover .cg-dt-name, .cg-tokens-table .cg-dt-link:hover .cg-dt-name { color: #00dbe9; } .cg-games-table .cg-dt-mcap, .cg-tokens-table .cg-dt-mcap { display: block; color: #e5e2e3; font-weight: 600; font-variant-numeric: tabular-nums; } /* A dated reading still prints — labelled, never hidden — but it must not read * as current, so the date sits under the number in the quiet colour. */ .cg-games-table .cg-dt-asof, .cg-tokens-table .cg-dt-asof { display: block; font-size: 11px; color: #7c8c8d; } .cg-games-table .cg-dt-empty, .cg-tokens-table .cg-dt-empty { color: #5f6b6c; } .cg-games-table .cg-dt-caption, .cg-tokens-table .cg-dt-caption { margin: 10px 2px 0; font-size: 12px; color: #7c8c8d; } /* ⭐ THE TOKEN TABLE'S OWN FOUR CLASSES — everything else it renders is shared * with .cg-games-table above, widened rather than copied. These exist because * /tokens/ sorts from its header row and /games/ does not. * * ⚠️ THE SORT CONTROL IS A