/*
 * Directory modules — the routes from an article into the games directory.
 *
 * Deliberately built on the THEME's own custom properties, not on a palette of
 * our own. Foxiz switches on [data-theme='dark'] and redefines --meta-fcolor
 * (#666 -> #bbb) there, and it expresses its lines and panels as TRANSLUCENT
 * grey — --flex-gray-15 is #88888826, --flex-gray-7 is #88888812 — which read
 * correctly on a white page and on a dark one without being redefined at all.
 * Borrowing those means dark mode needs no second rule set here; a hard-coded
 * palette would have needed one and would have drifted from the theme.
 *
 * Everything is scoped under .cg-mod — see feedback_css_deploy_debugging, a
 * bare .tile or .chip would collide with the theme within a release or two.
 */

.cg-mod {
	--cg-accent: var(--g-color, #488cbf);
	--cg-ink: var(--body-fcolor, #333);
	--cg-muted: var(--meta-fcolor, #666);
	--cg-hair: var(--flex-gray-15, rgba(136, 136, 136, .15));
	--cg-surface: var(--flex-gray-7, rgba(136, 136, 136, .07));
	--cg-live: #2f9e68;
	/* The falling red. A variable rather than a literal because s182 gave it a
	   second consumer — the band's 7d sparkline stroke — and a line disagreeing
	   with the number it illustrates is the failure this prevents. */
	--cg-down: #c0453e;
	--cg-soon: #b5623a;
	display: block;
	margin: 30px 0;
	font-family: var(--body-family, inherit);
	color: var(--cg-ink);
}

/*
 * ⚠️ Foxiz recolours EVERY link in the article body on hover:
 *   .rbct a:where(:not(.p-url)…:not(.no-link)…):hover { color: var(--g-color) }
 * That rule turned the solid button's label BLUE ON A BLUE BACKGROUND, and it
 * outranks a plain .cg-btn:hover on specificity, so the fix is not a stronger
 * colour here — it is the theme's OWN opt-out. Every anchor these modules print
 * carries `no-link` (see DirectoryModules). The states spelled out below are the
 * second line of defence, for the day something else tries the same thing.
 */
.cg-mod a { text-decoration: none; }
.cg-mod a:hover, .cg-mod a:focus { text-decoration: none; }
.cg-mod a:focus-visible { outline: 2px solid var(--cg-accent); outline-offset: 2px; }

.cg-mod-label {
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cg-muted);
	margin: 0 0 14px;
	font-weight: 600;
}

/* ---------- games in this article ---------- */

.cg-mod-games {
	border: 1px solid var(--cg-hair);
	border-left: 3px solid var(--cg-accent);
	border-radius: 8px;
	background: var(--cg-surface);
	padding: 17px 19px 19px;
}

.cg-game-card { display: flex; gap: 15px; align-items: flex-start; }
.cg-game-card + .cg-game-card {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--cg-hair);
}

/*
 * ⚠️ ShortPixel wraps every image it can serve in AVIF/WebP inside <picture>,
 * so the flex CHILD is the wrapper and the sizing on the <img> no longer holds
 * the column. This was invisible until the icons were fixed: a broken URL was
 * left as a bare <img>, and the moment it resolved the wrapper appeared and the
 * logo could squeeze. Size the wrapper as well.
 */
.cg-game-card > picture { display: block; flex: 0 0 56px; line-height: 0; }
.cg-gcard-thumb picture { display: block; line-height: 0; }

.cg-game-logo {
	width: 56px;
	height: 56px;
	flex: 0 0 56px;
	border-radius: 9px;
	object-fit: cover;
	border: 1px solid var(--cg-hair);
	background: var(--cg-surface);
}

.cg-game-main { min-width: 0; flex: 1; }

.cg-game-name {
	font-family: var(--heading-family, inherit);
	font-weight: 800;
	font-size: 17px;
	line-height: 1.25;
	color: var(--cg-ink);
	display: inline-block;
}
/* The owner asked for this: the name keeps its reading colour on hover and
 * signals the link with a line instead of turning blue. */
.cg-mod a.cg-game-name, .cg-mod a.cg-game-name:hover { color: var(--cg-ink); }
.cg-mod a.cg-game-name:hover { text-decoration: underline; text-underline-offset: 2px; }

.cg-game-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 9px; }

.cg-chip {
	font-size: 10px;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 600;
	border: 1px solid var(--cg-hair);
	border-radius: 4px;
	padding: 3px 7px;
	color: var(--cg-muted);
	white-space: nowrap;
}
.cg-chip-live { color: var(--cg-live); border-color: rgba(47, 158, 104, .4); }
.cg-chip-soon { color: var(--cg-soon); border-color: rgba(181, 98, 58, .4); }

.cg-game-desc {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--cg-ink);
	opacity: .85;
	margin: 0 0 13px;
}

.cg-game-acts { display: flex; flex-wrap: wrap; gap: 9px; }

.cg-btn {
	font-size: 13.5px;
	font-weight: 700;
	padding: 8px 15px;
	border-radius: 5px;
	border: 1px solid var(--cg-accent);
	color: var(--cg-accent);
	white-space: nowrap;
	line-height: 1.3;
}
.cg-btn-solid { background: var(--cg-accent); color: #fff; }
.cg-btn:hover { opacity: .88; }

/* Held through hover and focus — equal specificity, so solid comes last. */
.cg-mod a.cg-btn, .cg-mod a.cg-btn:hover, .cg-mod a.cg-btn:focus { color: var(--cg-accent); }
.cg-mod a.cg-btn-solid, .cg-mod a.cg-btn-solid:hover, .cg-mod a.cg-btn-solid:focus { color: #fff; }

/* ---------- top games, in the sidebar ---------- */

/* No panel around the cards: a box inside a box reads as clutter in a 320px
 * column, and the cards are the objects the reader is meant to see. */
.cg-mod-rail {
	padding: 0;
	margin: 24px 0 0;
}

.cg-rail-head {
	font-family: var(--heading-family, inherit);
	font-weight: 800;
	font-size: 15px;
	margin: 0 0 2px;
	color: var(--cg-ink);
}

.cg-rail-sub {
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cg-muted);
	margin: 0 0 12px;
}

.cg-pulse {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cg-live);
	margin-right: 6px;
	vertical-align: 1px;
}
@media (prefers-reduced-motion: no-preference) {
	.cg-pulse { animation: cg-pulse 2.4s ease-in-out infinite; }
	@keyframes cg-pulse {
		0%, 100% { box-shadow: 0 0 0 0 rgba(47, 158, 104, .45); }
		50%      { box-shadow: 0 0 0 4px rgba(47, 158, 104, 0); }
	}
}

/* One card per game, the rank on the artwork rather than in a number column. */
.cg-gcard {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border: 1px solid var(--cg-hair);
	border-radius: 10px;
	background: var(--cg-surface);
	transition: border-color .15s ease, transform .15s ease;
}
.cg-gcard + .cg-gcard { margin-top: 8px; }
.cg-gcard:hover { border-color: var(--cg-accent); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
	.cg-gcard { transition: none; }
	.cg-gcard:hover { transform: none; }
}

.cg-gcard-thumb { position: relative; flex: 0 0 46px; }

.cg-gcard-logo {
	display: block;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	object-fit: cover;
	border: 1px solid var(--cg-hair);
	background: var(--cg-surface);
}

/* Solid accent, not the page's ink: there is no theme token that flips with
 * light/dark for a background, and white on the accent reads in both. */
.cg-gcard-rank {
	position: absolute;
	left: -5px;
	top: -5px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 6px;
	background: var(--cg-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 19px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.cg-gcard-txt { min-width: 0; }

/*
 * ⚠️ `min-width: 0` on the flex child is not enough for a name that is ONE long
 * word: there is no break opportunity, so it spills out of the card instead of
 * wrapping. Measured at 390px, two across — "ChainersGame" ran 9px past its
 * box. Affects the 320px sidebar rail the same way; fixed for both here.
 */
.cg-gcard-name {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--cg-ink);
	overflow-wrap: anywhere;
}
.cg-gcard:hover .cg-gcard-name { text-decoration: underline; text-underline-offset: 2px; }

.cg-gcard-meta {
	display: block;
	font-size: 11.5px;
	color: var(--cg-muted);
	margin-top: 3px;
	/* One line, always — the same constraint the teaser below carries. This
	   line can now hold three facets ("Ethereum · Ronin · RPG") because a
	   multi-chain game must not be described by one of its chains; the card's
	   height is the owner's constraint, so the third facet clips instead. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cg-gcard-teaser {
	display: block;
	font-size: 11.5px;
	line-height: 1.3;
	color: var(--cg-accent);
	margin-top: 2px;
	/* One line, always. The card's height is the owner's constraint — "not
	   huge widgets in height" — and a three-fragment teaser on a narrow
	   sidebar would otherwise wrap to two. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cg-gcard:hover .cg-gcard-go { transform: translateX(2px); }
.cg-gcard-go { display: inline-block; transition: transform .15s ease; }

.cg-rail-cta {
	display: block;
	text-align: center;
	margin-top: 14px;
	padding: 9px;
	font-size: 13px;
	font-weight: 700;
	border-radius: 5px;
	border: 1px solid var(--cg-hair);
	color: var(--cg-accent);
}
.cg-rail-cta:hover { border-color: var(--cg-accent); }

/* ---------- three doors out ---------- */

.cg-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.cg-tile {
	display: block;
	border: 1px solid var(--cg-hair);
	border-radius: 8px;
	background: var(--cg-surface);
	padding: 17px;
}
.cg-tile:hover { border-color: var(--cg-accent); }

.cg-tile-n {
	display: block;
	font-family: var(--heading-family, inherit);
	font-size: 28px;
	font-weight: 900;
	letter-spacing: -.03em;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
	color: var(--cg-ink);
}

.cg-tile-l {
	display: block;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--cg-ink);
	opacity: .8;
	margin-top: 5px;
}

.cg-tile-go {
	display: block;
	font-size: 11px;
	letter-spacing: .09em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--cg-accent);
	margin-top: 12px;
}

/* ---------- the homepage strip ---------- */

/*
 * The homepage has no article body around it, so the strip has to say where it
 * begins and ends on its own: a panel, unlike the rail, which sits inside a
 * sidebar column that already frames it.
 */
.cg-mod-home {
	border: 1px solid var(--cg-hair);
	border-radius: 10px;
	background: var(--cg-surface);
	padding: 20px 22px 22px;
	margin: 34px 0;
}

.cg-home-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.cg-mod-home .cg-rail-head { margin-bottom: 3px; }
.cg-mod-home .cg-rail-sub { margin-bottom: 0; }

.cg-home-all {
	flex: 0 0 auto;
	font-size: 12px;
	letter-spacing: .07em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--cg-accent);
	border: 1px solid var(--cg-hair);
	border-radius: 5px;
	padding: 9px 13px;
	white-space: nowrap;
}
.cg-home-all:hover { border-color: var(--cg-accent); }

/*
 * ⭐ `auto-fill` with a floor, not a fixed column count: the strip is printed
 * inside whichever Elementor column the homepage's first titled block lives in,
 * and that width is the theme's to change. A fixed 4-up would overflow the day
 * the owner moves it into a narrower section.
 */
.cg-home-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 10px;
	margin-bottom: 18px;
}
/* The rail stacks its cards; in a grid the gap owns the spacing. */
.cg-home-grid .cg-gcard + .cg-gcard { margin-top: 0; }
.cg-mod-home .cg-mod-explore { margin: 0; }

@media (max-width: 620px) {
	.cg-tiles { grid-template-columns: 1fr; }
	.cg-game-card { gap: 12px; }
	.cg-game-card > picture { flex-basis: 46px; }
	.cg-game-logo { width: 46px; height: 46px; flex-basis: 46px; }
	.cg-mod-home { padding: 16px 15px 18px; }
	.cg-home-all { width: 100%; text-align: center; }
	/*
	 * ⚠️ Two across on the phone, not one. Measured at 390px: eight stacked
	 * cards plus three stacked tiles is a ~1,100px wall dropped into the middle
	 * of the homepage feed, which is a scroll tax on the reader who did not want
	 * it. The card is a 46px logo and two short lines, so it survives a 160px
	 * column; the strip loses ~400px of height.
	 */
	.cg-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.cg-mod-home .cg-gcard { padding: 9px; gap: 9px; }
	.cg-mod-home .cg-gcard-name { font-size: 13px; }
}

/* ---------- token movers (gainers / losers, 24h) ---------- */
.cg-mod-movers { margin: 0 0 18px; }
.cg-movers-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 10px;
}
.cg-movers-col {
	border: 1px solid var(--cg-hair);
	background: var(--cg-surface);
	border-radius: 10px;
	padding: 12px 14px;
}
.cg-movers-head {
	font-family: var(--heading-family, inherit);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--cg-muted);
	margin: 0 0 8px;
}
.cg-mover {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	color: var(--cg-ink);
	text-decoration: none;
}
.cg-mover + .cg-mover { border-top: 1px solid var(--cg-hair); }
.cg-mover-icon {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	object-fit: cover;
	flex: 0 0 28px;
}
.cg-mover-icon-blank { display: block; background: var(--cg-hair); }
/* min-width:0 lets a wrapped name shrink; ellipsis handles the one-word name. */
.cg-mover-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	font-size: 14px;
}
.cg-mover-price {
	font-variant-numeric: tabular-nums;
	color: var(--cg-muted);
	font-size: 13px;
}
.cg-mover-delta {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 13px;
	min-width: 58px;
	text-align: right;
}
.cg-delta-pos { color: var(--cg-live); }
.cg-delta-neg { color: var(--cg-down); }
.cg-mod a.cg-mover, .cg-mod a.cg-mover:hover { color: var(--cg-ink); }
.cg-movers-all {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--cg-accent);
}

/* =============================================================================
   Section — the homepage bands (s180)
   =============================================================================
   Three bands spread over the homepage's titled blocks: the games list, the
   token movers, the events. Measured before this shipped: all three rendered in
   one 720px lump at y=1498 of a 6,920px page, with no catalog data anywhere
   below it.

   ⛔⛔ EVERYTHING HERE IS SELF-CONTAINED ON PURPOSE. The band prints
   GamesTable's markup, whose usual styles live in cryptogames.css — and that
   stylesheet opens with an UNSCOPED `*, *::before, *::after { margin: 0;
   padding: 0 }` plus a `body` background, because it is only ever meant to load
   on our own CPT templates. Enqueued on the Foxiz homepage it would flatten
   every margin on the page, so the band asks GamesTable for `no_style` and
   dresses the same classes here instead. ⚠️ Do not "simplify" this by loading
   cryptogames.css on the homepage.

   The palette comes from the block above, which reads FOXIZ's own custom
   properties — so on the magazine homepage these are the theme's colours, not
   a second opinion about them.
   ========================================================================== */

.cg-band { display: block; }
.cg-band + .cg-band { margin-top: 20px; }

.cg-band-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}
.cg-band-title {
	font-family: var(--heading-family);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
	color: var(--cg-ink);
}
.cg-mod a.cg-band-cta {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	white-space: nowrap;
	color: var(--cg-accent);
	border: 1px solid var(--cg-hair);
	border-radius: 8px;
	padding: 8px 12px;
}
.cg-mod a.cg-band-cta:hover { border-color: var(--cg-accent); }

/* The chip strip. Every chip is a curated facet page — a real, published URL,
 * never a hand-built query string against the React directory. */
.cg-band-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	border-bottom: 1px solid var(--cg-hair);
	margin-bottom: 2px;
}
.cg-mod a.cg-band-tab {
	font-size: 12.5px;
	color: var(--cg-muted);
	padding: 8px 11px;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.cg-mod a.cg-band-tab:hover { color: var(--cg-ink); }
.cg-mod a.cg-band-tab-on {
	color: var(--cg-accent);
	border-bottom-color: var(--cg-accent);
	font-weight: 600;
}

.cg-mod a.cg-band-foot {
	display: block;
	padding: 13px 2px 0;
	border-top: 1px solid var(--cg-hair);
	font-size: 13px;
	color: var(--cg-accent);
}

/* ── the table ─────────────────────────────────────────────────────────────
   A real table, like playtoearn's (theirs is <table class="SnowTable">, 107px
   rows, 11 cells). The columns line up because the table lays them out; the
   first attempt used a grid per row and the edges drifted. */
.cg-band .cg-dt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cg-band .cg-data-table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	font-family: var(--body-family);
}
/* Theirs: 14.4px, weight 600, NOT uppercase. */
.cg-band .cg-data-table th {
	font-size: 12px;
	font-weight: 600;
	color: var(--cg-muted);
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--cg-hair);
	white-space: nowrap;
}
.cg-band .cg-data-table th.cg-dt-num { text-align: right; }
/* No row rules — theirs have none. A near-invisible zebra keeps 25 rows
 * trackable across the width without drawing 25 lines. */
.cg-band .cg-data-table td {
	padding: 6px 12px;
	vertical-align: middle;
	font-size: 13px;
	color: var(--cg-muted);
	border: 0;
}
.cg-band .cg-data-table tbody tr { height: 52px; }
.cg-band .cg-data-table tbody tr:nth-child(even) { background: var(--cg-surface); }
.cg-band .cg-data-table tbody tr:hover { background: var(--cg-hair); }

.cg-band .cg-dt-num { text-align: right; white-space: nowrap; }
.cg-band .cg-dt-rank {
	width: 40px;
	text-align: center;
	font-size: 11.5px;
	color: var(--cg-muted);
	font-variant-numeric: tabular-nums;
}
.cg-band .cg-dt-game { min-width: 280px; }
.cg-mod .cg-band .cg-dt-link,
.cg-band .cg-dt-link { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cg-band .cg-dt-icon {
	width: 30px; height: 30px; border-radius: 8px;
	object-fit: cover; flex-shrink: 0;
}
.cg-band .cg-dt-icon-blank { display: block; background: var(--cg-hair); }

/* Name and tagline stacked, the way their row does it. `min-width: 0` is what
 * lets the ellipsis happen — a flex child will not shrink below its content
 * without it. */
.cg-band .cg-dt-ident { display: flex; flex-direction: column; min-width: 0; }
.cg-band .cg-dt-name {
	font-family: var(--heading-family);
	font-weight: 700;
	font-size: 13.5px;
	line-height: 1.3;
	color: var(--cg-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cg-band .cg-dt-link:hover .cg-dt-name { color: var(--cg-accent); }
.cg-band .cg-dt-tagline {
	font-size: 11px;
	line-height: 1.35;
	color: var(--cg-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── chain marks ───────────────────────────────────────────────────────────
   18px discs: an authored SVG for the nine chains that carry 84% of the
   catalog, a brand-coloured initial for the tail, a coin for the "Other"
   bucket. */
.cg-band .cg-dt-chain { white-space: nowrap; }
.cg-chain-first { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.cg-chain-name {
	max-width: 88px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	color: var(--cg-ink);
}
.cg-chain-extra { display: inline-flex; vertical-align: middle; margin-left: 3px; }
svg.cg-cmark { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.cg-cmark-letter, .cg-cmark-other {
	width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	vertical-align: middle;
	background: var(--cg-cmark-bg, #4a5658);
	color: #0d0f0f;
	font-size: 9.5px;
	font-weight: 700;
	font-family: var(--body-family);
}
.cg-cmark-other { background: var(--cg-hair); color: var(--cg-muted); }
.cg-cmark-other .material-symbols-outlined { font-size: 13px; width: 13px; }

/* ── device glyphs ─────────────────────────────────────────────────────────
   The real Material Symbols already in the plugin's subsetted face. ⛔ A glyph
   that is not in the subset renders as its own name spelled out — see
   Catalog\DeviceIcons, whose test pins every value against the built manifest. */
.cg-band .cg-dt-devices { white-space: nowrap; }
.cg-dev-icon {
	font-size: 17px;
	color: var(--cg-muted);
	margin-right: 6px;
	vertical-align: middle;
}
.cg-more { font-size: 10px; color: var(--cg-muted); padding: 0 2px; }

.cg-band .cg-dt-mcap {
	display: block;
	color: var(--cg-ink);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.cg-band .cg-dt-asof { display: block; font-size: 10px; color: var(--cg-muted); }

/* The token's 7-day move. Same two colours the movers module already uses, so
   green and red mean one thing across the page; `flat` is deliberately muted,
   because "it did not move" is a fact and not an event. The sign is printed in
   the text as well, so the colour is never the only carrier of direction. */
.cg-band .cg-dt-delta {
	display: block;
	font-weight: 700;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}
.cg-band .cg-delta-flat { color: var(--cg-muted); }

/* The 7-day line, beside the 7-day number. `flex-end` keeps the figures on the
   right edge where the column reads, and the line sits to their left so the
   eye crosses shape-then-value in the header's order.

   ⚠️ NOWRAP AND A FIXED 64px: this cell is inside a table that already scrolls
   horizontally on a phone, and a line that wrapped under its number would take
   the row height from 52px to ~75px on 25 rows. */
.cg-band .cg-dt-chg {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 9px;
	white-space: nowrap;
}
/* The stroke is the only place the line takes colour, and it takes the SAME
   two the number does — one definition, so the two halves of the cell cannot
   drift apart. `flat` is muted for the same reason the number is. */
.cg-band .cg-dt-spark {
	display: block;
	flex: 0 0 auto;
	overflow: visible;
}
.cg-band .cg-dt-spark-up { stroke: var(--cg-live); }
.cg-band .cg-dt-spark-down { stroke: var(--cg-down); }
.cg-band .cg-dt-spark-flat { stroke: var(--cg-muted); }
.cg-band .cg-dt-empty { color: var(--cg-muted); opacity: .6; }
.cg-band .cg-dt-caption { margin: 10px 2px 0; font-size: 12px; color: var(--cg-muted); }

/* ⭐⭐⭐ MEASURED ON A 390px VIEWPORT, s181: the band showed the rank, the game
   name and a tagline clipped mid-word, and NOTHING else. Genre, chain, device,
   the market cap and the 7d move were all past the right edge — not squashed,
   not scrollable, simply unreachable. The page itself never overflowed, so no
   horizontal scrollbar ever appeared to say so, which is how five columns went
   missing on every phone without anyone seeing it.

   ⭐⭐⭐ AND THE SCROLLER WAS NEVER MISSING. `.cg-dt-scroll` around the table has
   carried `overflow-x: auto` all along; it simply never had a narrow box to
   scroll inside. The band is a FLEX ITEM in Elementor's column wrap, and a flex
   item's default `min-width: auto` refuses to shrink below its content — so the
   aside laid itself out at 865px inside a 375px column and overflowed upward
   into an ancestor that clips. The fix is one property on the item, not another
   overflow rule on a container: adding overflow to the wrap changed nothing,
   because the wrap was 865px wide too.

   ⚠️ It applies to all three bands, which are all flex items in that column. */
.cg-mod.cg-band { min-width: 0; }

@media (max-width: 600px) {
	.cg-band-head { flex-direction: column; align-items: flex-start; }
	.cg-band .cg-data-table th,
	.cg-band .cg-data-table td { padding: 6px 8px; }

	/* A row is 52px of information; the tagline is the part that has to give
	   when the name column narrows, not the row's height.
	   ⚠️ `display: block` is load-bearing — the tagline is a <span>, and
	   max-width, overflow and text-overflow are all inert on an inline box.
	   The ellipsis visible today comes from Tagline::MAX in PHP, not from this
	   rule, which is why nobody noticed it was doing nothing. */
	.cg-band .cg-dt-tagline { display: block; max-width: 46vw; }
}

/* Genre pills in the band. Character-budgeted in PHP (see
 * GamesTable::genre_pills) because two pills fit when they read "Casual" and
 * "RPG" and clip when they read "NFT Metaverse Games". */
.cg-band .cg-dt-genre { white-space: nowrap; }
.cg-gpill {
	display: inline-block;
	font-size: 10.5px;
	line-height: 1.5;
	color: var(--cg-muted);
	background: var(--cg-surface);
	border-radius: 5px;
	padding: 2px 6px;
	margin-right: 4px;
	white-space: nowrap;
}