/*
 * egamers-stitch.css — the pages AS the Stitch design, exactly.
 *
 * Owner 2026-10-02, second pass: "ΑΚΡΙΒΩΣ ΟΠΩΣ ΤΟ GOOGLE STITCH". The first
 * pass kept Pixwell's 66% article column and adapted the design into it —
 * not close enough. This stylesheet skins a full-width shell (.eg) whose
 * markup mirrors the design's own DOM section by section: breadcrumb strip,
 * hero band with the CTA column on the right, sticky underline tabs, the
 * 12-column 1440px grid (main span-8 / rail span-4), every section a
 * rounded-2xl card on surface-low, the sidebar's Game Information matrix.
 *
 * Tokens are the design contract's own values (its designMd): canvas
 * #0d0b14, surfaces #13111c / #1a1726 / #242038, violet #8b5cf6 (hover
 * #7c3aed, glow #a855f7), mint #10b981, cyan #38bdf8, text #f8fafc /
 * #94a3b8, dividers #332d4a; Plus Jakarta Sans headlines, Inter body;
 * 8px controls, 16px cards.
 *
 * The site chrome (header/footer) stays WordPress's — egamers-skin.css
 * paints it in the same palette. Scoped under .eg; never a body/html rule.
 */

.eg {
	/* surfaces */
	--eg-bg: #0d0b14;
	--eg-s-lowest: #0d0b14;
	--eg-s-low: #13111c;
	--eg-s: #1a1726;
	--eg-s-high: #242038;
	--eg-s-highest: #2b2836;
	/* accents */
	--eg-primary: #8b5cf6;
	--eg-primary-hover: #7c3aed;
	--eg-on-primary: #ffffff;
	--eg-mint: #10b981;
	--eg-mint-fill: rgba(16, 185, 129, .12);
	--eg-cyan: #38bdf8;
	--eg-red: #fb7185;
	/* text + lines */
	--eg-text: #f8fafc;
	--eg-muted: #94a3b8;
	--eg-dim: #6f6a8a;
	--eg-line: #332d4a;
	--eg-line-soft: rgba(255, 255, 255, .05);
	--eg-line-violet: rgba(139, 92, 246, .12);
	/* type */
	--eg-head: "Plus Jakarta Sans", "Poppins", sans-serif;
	--eg-ui: "Inter", "Poppins", sans-serif;
	--eg-hero: 800 40px/48px var(--eg-head);
	--eg-hero-m: 800 28px/36px var(--eg-head);
	--eg-h1: 700 28px/36px var(--eg-head);
	--eg-h2: 700 18px/26px var(--eg-head);
	--eg-h3: 600 15px/22px var(--eg-head);
	--eg-stat: 700 24px/28px var(--eg-head);
	--eg-body: 400 14px/22px var(--eg-ui);
	--eg-small: 400 13px/20px var(--eg-ui);
	--eg-label: 600 12px/16px var(--eg-ui);
	--eg-label-s: 600 11px/14px var(--eg-ui);
	/* effects */
	--eg-card-shadow: 0 12px 32px -12px rgba(0, 0, 0, .65);
	--eg-pop: 0 16px 40px -8px rgba(0, 0, 0, .75), 0 0 20px 0 rgba(139, 92, 246, .15);
	--eg-cta: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 20px -2px rgba(124, 58, 237, .45);

	background: var(--eg-bg);
	color: var(--eg-text);
	font: var(--eg-body);
	padding-top: 76px; /* the fixed site bar (egamers-skin) */
	padding-bottom: 48px;
}
.eg a { color: inherit; text-decoration: none; }
.eg img { max-width: 100%; }
.eg .material-symbols-outlined { line-height: 1; }
.eg :is(a, button, select, input, summary):focus-visible { outline: 2px solid var(--eg-primary) !important; outline-offset: 2px !important; }

/* the 1440px container */
.eg-container { max-width: 1440px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 767px) { .eg-container { padding: 0 16px; } }

/* ================= breadcrumb strip — full-width, surface-lowest ================= */
.eg-crumbs { background: var(--eg-s-lowest); border-bottom: 1px solid var(--eg-line-soft); }
.eg-crumbs-in { display: flex; align-items: center; gap: 8px; padding: 14px 0; font: var(--eg-label); color: var(--eg-muted); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.eg-crumbs-in::-webkit-scrollbar { display: none; }
.eg-crumbs-in a { display: inline-flex; align-items: center; gap: 4px; }
.eg-crumbs-in a:hover { color: var(--eg-primary); }
.eg-crumbs-in .sep { color: var(--eg-dim); }
.eg-crumbs-in .here { color: var(--eg-text); font-weight: 600; }
/* Pixwell's own trail (Breadcrumb NavXT) sits inside these wrappers */
.eg-crumbs .breadcrumb, .eg-crumbs .breadcrumb-inner { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; background: none; }
.eg-crumbs .breadcrumb-inner > span, .eg-crumbs .breadcrumb-inner a { font: var(--eg-label); color: var(--eg-muted); }
.eg-crumbs .breadcrumb-inner a:hover { color: var(--eg-primary); }

/* ================= hero band — the design's composition ================= */
.eg-hero { position: relative; overflow: hidden; background: var(--eg-s-lowest); }
.eg-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .3; transform: scale(1.05); filter: blur(2px) saturate(1.1); }
.eg-hero-scrim { position: absolute; inset: 0; background:
	linear-gradient(180deg, rgba(13, 11, 20, .6), rgba(13, 11, 20, .82) 55%, var(--eg-bg) 100%),
	linear-gradient(90deg, rgba(13, 11, 20, .75), rgba(13, 11, 20, .25) 45%, rgba(13, 11, 20, .88)); }
.eg-hero-in { position: relative; padding: 32px 0 24px; }
.eg-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
@media (max-width: 1023px) { .eg-hero-row { flex-direction: column; align-items: stretch; } }

.eg-hero-id { display: flex; align-items: center; gap: 20px; min-width: 0; }
.eg-hero-icon { position: relative; flex: 0 0 auto; width: 112px; height: 112px; padding: 6px; border-radius: 16px; background: var(--eg-s-high); box-shadow: 0 8px 32px rgba(0, 0, 0, .6), 0 0 0 1px rgba(139, 92, 246, .25); }
.eg-hero-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.eg-hero-live { position: absolute; bottom: -8px; right: -8px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--eg-mint-fill); border: 1px solid rgba(16, 185, 129, .3); color: var(--eg-mint); font: 700 11px/1.4 var(--eg-ui); letter-spacing: .05em; box-shadow: 0 0 10px rgba(16, 185, 129, .3); }
.eg-hero-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--eg-mint); animation: eg-pulse 2s infinite; }
@keyframes eg-pulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); } 70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }
@media (prefers-reduced-motion: reduce) { .eg-hero-live i { animation: none; } }

.eg-hero-text { min-width: 0; }
.eg-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.eg-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 8px; background: var(--eg-s-high); border: 1px solid rgba(255, 255, 255, .08); font: var(--eg-label); color: var(--eg-muted); }
a.eg-chip:hover { border-color: var(--eg-primary); color: var(--eg-text); }
.eg-chip-chain { color: var(--eg-primary); }
.eg-chip-genre { color: var(--eg-text); }
.eg-chip-f2p { color: var(--eg-mint); background: rgba(16, 185, 129, .12); border-color: rgba(16, 185, 129, .25); }
.eg-hero-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eg-hero h1 { margin: 0; font: var(--eg-hero); letter-spacing: -.02em; color: var(--eg-text); }
@media (max-width: 767px) { .eg-hero h1 { font: var(--eg-hero-m); } }
.eg-hero-badge { padding: 3px 10px; border-radius: 6px; background: rgba(139, 92, 246, .2); color: var(--eg-primary); font: 700 var(--eg-label); letter-spacing: .06em; text-transform: uppercase; }
.eg-hero-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; font: var(--eg-small); color: var(--eg-muted); }
.eg-hero-dev { display: inline-flex; align-items: center; gap: 6px; }
.eg-hero-dev .material-symbols-outlined { font-size: 18px; color: var(--eg-mint); }
.eg-hero-dev b { color: var(--eg-text); font-weight: 500; }
.eg-hero-rating { display: inline-flex; align-items: center; gap: 6px; }
.eg-stars { display: inline-flex; gap: 1px; }
.eg-stars .material-symbols-outlined { font-size: 16px; color: var(--eg-primary); font-variation-settings: 'FILL' 1; }
.eg-hero-rating b { color: var(--eg-text); }
.eg-hero-rating small { color: var(--eg-muted); }

/* the CTA column on the right — vote pill, bookmark, PLAY NOW */
.eg-hero-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eg-socials { display: flex; gap: 6px; flex-wrap: wrap; }
.eg-socials a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--eg-s-high); border: 1px solid rgba(255, 255, 255, .04); color: var(--eg-muted) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.eg-socials a:hover { background: var(--eg-primary); color: #fff !important; }
.eg-play { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 12px; background: linear-gradient(135deg, #a078ff, var(--eg-primary) 45%, var(--eg-primary-hover)); color: var(--eg-on-primary) !important; font: 700 15px/22px var(--eg-head); letter-spacing: .02em; box-shadow: var(--eg-cta); transform: translateY(0); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.eg-play:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 30px -2px rgba(124, 58, 237, .6); }
.eg-play .material-symbols-outlined { font-size: 20px; }
.eg-play-lg { width: 100%; justify-content: center; }

/* KPI strip under the hero — 5 cells, border-t */
.eg-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(73, 68, 84, .35); }
.eg-kpi { padding: 12px 14px; border-radius: 12px; background: rgba(19, 17, 28, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.eg-kpi-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: var(--eg-label-s); letter-spacing: .05em; text-transform: uppercase; color: var(--eg-dim); margin-bottom: 4px; }
.eg-kpi-delta { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; }
.eg-kpi-delta .material-symbols-outlined { font-size: 14px; }
.eg-kpi-delta.up { color: var(--eg-mint); }
.eg-kpi-delta.down { color: var(--eg-red); }
.eg-kpi-value { display: block; font: var(--eg-stat); letter-spacing: -.02em; color: var(--eg-text); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eg-kpi-value.up { color: var(--eg-mint); }
.eg-kpi-value.cyan { color: var(--eg-cyan); }

/* notices (dead / upcoming) */
.eg-notice { margin: 0; padding: 14px 24px; background: var(--eg-s); font: var(--eg-small); color: var(--eg-muted); }
.eg-notice p { margin: 0; }
.eg-notice b { color: var(--eg-text); }
.eg-notice-dead { border-top: 2px solid var(--eg-red); }
.eg-notice-upcoming { border-top: 2px solid var(--eg-cyan); }

/* ================= sticky tabs — underline style, full width ================= */
.eg-tabs { position: sticky; top: 76px; z-index: 40; background: rgba(13, 11, 20, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid rgba(73, 68, 84, .35); border-bottom: 1px solid rgba(73, 68, 84, .35); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.eg-tabs-in { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 0; }
.eg-tabs-in::-webkit-scrollbar { display: none; }
.eg-tabs-in a { display: inline-flex; align-items: center; gap: 6px; padding: 12px 16px; font: 600 14px/20px var(--eg-ui); color: var(--eg-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .15s ease, border-color .15s ease; }
.eg-tabs-in a .material-symbols-outlined { font-size: 18px; }
.eg-tabs-in a:hover { color: var(--eg-text); border-color: var(--eg-line); }
.eg-tabs-in a.is-active { color: var(--eg-text); font-family: var(--eg-head); font-weight: 700; font-size: 15px; border-color: var(--eg-primary); }
.eg-tabs-in a.is-active .material-symbols-outlined { color: var(--eg-primary); }

/* ================= the 12-column workspace: main span-8 / rail span-4 ================= */
.eg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; padding: 32px 0; }
@media (min-width: 1024px) { .eg-grid { grid-template-columns: repeat(12, 1fr); } .eg-main { grid-column: span 8; } .eg-side { grid-column: span 4; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 128px; max-height: calc(100vh - 152px); overflow: auto; scrollbar-width: thin; padding-bottom: 4px; } }
@media (max-width: 1023px) { .eg-grid { padding: 24px 0; gap: 24px; } .eg-side { display: flex; flex-direction: column; gap: 24px; } }

/* every section is a rounded-2xl card on surface-low */
.eg-card { background: var(--eg-s-low); border-radius: 16px; padding: 20px; box-shadow: var(--eg-card-shadow); }
@media (max-width: 767px) { .eg-card { padding: 16px; border-radius: 14px; } }
.eg-card + .eg-card, .eg-main > * + * { margin-top: 24px; }
.eg-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.eg-card-title { display: flex; align-items: center; gap: 8px; margin: 0; font: var(--eg-h2); font-weight: 700; color: var(--eg-text); }
.eg-card-title .material-symbols-outlined { font-size: 22px; color: var(--eg-primary); }
.eg-card-sub { margin: 4px 0 0; font: var(--eg-small); color: var(--eg-dim); }
.eg-count { padding: 2px 8px; border-radius: 6px; background: var(--eg-s-high); color: var(--eg-muted); font: var(--eg-label-s); }

/* media showcase: featured spotlight + thumb grid */
.eg-media-spot { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--eg-s-lowest); margin-bottom: 12px; }
.eg-media-spot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.eg-media-spot:hover img { transform: scale(1.03); }
.eg-media-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; border: 0; background: rgba(139, 92, 246, .9); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 30px rgba(139, 92, 246, .5); }
.eg-media-play:hover { background: var(--eg-primary); }
.eg-media-play .material-symbols-outlined { font-size: 32px; }
.eg-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 767px) { .eg-media-grid { grid-template-columns: repeat(2, 1fr); } }
.eg-media-item { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--eg-s); cursor: pointer; }
.eg-media-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eg-media-item .material-symbols-outlined { position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; font-size: 28px; color: #fff; text-shadow: 0 0 8px rgba(0, 0, 0, .6); }

/* lightbox (kept from the first pass) */
.eg .cg-lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1200px); }
.eg .cg-lightbox::backdrop { background: rgba(0, 0, 0, .85); }
.eg .cg-lightbox img, .eg .cg-lightbox iframe { display: block; width: 100%; max-height: 85vh; object-fit: contain; aspect-ratio: 16 / 9; border-radius: 8px; background: #000; }
.eg .cg-lightbox-close { position: absolute; top: -40px; right: 0; border: 0; background: transparent; color: #fff; font-size: 32px; cursor: pointer; }

/* about prose */
.eg-about { font: var(--eg-body); color: #cbd5e1; }
.eg-about p { margin: 0 0 12px; }
.eg-about h3 { font: var(--eg-h2); color: var(--eg-text); margin: 16px 0 8px; }
.eg-about a { color: var(--eg-primary); }

/* what we like / what to watch */
.eg-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 767px) { .eg-proscons { grid-template-columns: 1fr; } }
.eg-proscol { padding: 16px 18px; border-radius: 12px; background: var(--eg-s); border: 1px solid var(--eg-line-soft); }
.eg-proscol h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: var(--eg-h3); }
.eg-proscol h3::before { font-family: 'Material Symbols Outlined'; font-size: 18px; }
.eg-proscol.like h3 { color: var(--eg-mint); }
.eg-proscol.like h3::before { content: 'thumb_up'; }
.eg-proscol.watch h3 { color: var(--eg-red); }
.eg-proscol.watch h3::before { content: 'report'; }
.eg-proscol ul { margin: 0; padding-left: 18px; font: var(--eg-small); color: #cbd5e1; }
.eg-proscol li { margin-bottom: 6px; }

/* our verdict — outlined quote card */
.eg-verdict { position: relative; margin: 0; padding: 20px 22px 16px; border: 1px solid var(--eg-line); border-radius: 12px; background: var(--eg-s-low); font: var(--eg-body); color: var(--eg-text); }
.eg-verdict::before { content: 'format_quote'; position: absolute; top: -15px; left: 16px; font-family: 'Material Symbols Outlined'; font-size: 28px; color: var(--eg-primary); background: var(--eg-s-low); padding: 0 4px; }
.eg-verdict cite { display: flex; justify-content: flex-end; margin-top: 8px; font: italic 700 var(--eg-label); letter-spacing: .04em; color: var(--eg-primary); }

/* token card — head with the price quote on the right */
.eg-token-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.eg-token-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.eg-token-id img { width: 44px; height: 44px; border-radius: 50%; background: var(--eg-s); }
.eg-token-id b { display: block; font: var(--eg-h2); color: var(--eg-text); }
.eg-token-id small { display: block; font: var(--eg-label); color: var(--eg-muted); }
.eg-token-price { text-align: right; }
.eg-token-price b { display: block; font: var(--eg-stat); letter-spacing: -.02em; color: var(--eg-text); font-variant-numeric: tabular-nums; }
.eg-token-price .up { color: var(--eg-mint); }
.eg-token-price .down { color: var(--eg-red); }
.eg-token-price small { font: var(--eg-label-s); color: var(--eg-muted); }
.eg-token-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.eg-token-stat { padding: 12px 14px; border-radius: 10px; background: var(--eg-s); border: 1px solid var(--eg-line-soft); }
.eg-token-stat span { display: block; font: var(--eg-label-s); letter-spacing: .05em; text-transform: uppercase; color: var(--eg-muted); margin-bottom: 2px; }
.eg-token-stat b { font: 700 18px/24px var(--eg-head); color: var(--eg-text); font-variant-numeric: tabular-nums; }
.eg-token-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.eg-token-links a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 10px; background: var(--eg-s-high); font: var(--eg-label); color: var(--eg-text); }
.eg-token-links a:hover { background: var(--eg-s-highest); color: var(--eg-primary); }
.eg-token-links a .material-symbols-outlined { font-size: 16px; color: var(--eg-primary); }
/* the chart partial's inside, on the card's surface */
.eg .cg-tok-chart { margin: 0; padding: 14px 0 0; background: none; border-radius: 0; border-top: 1px solid var(--eg-line-soft); }
.eg .cg-tok-chart-head { margin-bottom: 10px; }
.eg .cg-tok-chart-title { color: var(--eg-text); font-family: var(--eg-head); }
.eg .cg-tok-chart-ranges { background: var(--eg-s); border-color: var(--eg-line); }
.eg .cg-tok-chart-range.is-active { background: var(--eg-primary); color: #fff; }
.eg .cg-tok-chart-canvas { background: var(--eg-s); }
.eg .cg-metric-delta-pos { color: var(--eg-mint); }
.eg .cg-metric-delta-neg { color: var(--eg-red); }
.eg .cg-tok-chart-foot-min { color: var(--eg-primary); }
.eg .cg-tok-chart-foot-max { color: var(--eg-mint); }

/* funding & backers */
.eg-fund-sub { margin: 0 0 10px; font: var(--eg-h3); color: var(--eg-text); }
.eg-fund-sub + .eg-prof-cards, .eg-card .eg-prof-cards { margin-bottom: 0; }
.eg-rounds { display: grid; gap: 10px; }
.eg-round { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 12px; background: var(--eg-s); border: 1px solid var(--eg-line-soft); }
.eg-round .material-symbols-outlined { color: var(--eg-mint); font-size: 20px; }
.eg-round strong { display: block; font: 600 14px/20px var(--eg-head); color: var(--eg-text); }
.eg-round small { display: block; margin-top: 2px; font: var(--eg-label-s); color: var(--eg-muted); }

/* events */
.eg-events { display: grid; gap: 10px; }
.eg-event { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: var(--eg-s); border: 1px solid var(--eg-line-soft); }
.eg-event:hover { border-color: rgba(139, 92, 246, .45); }
.eg-event-badge { flex: 0 0 auto; min-width: 90px; text-align: center; }
.eg-ev-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--eg-s-high); border: 1px solid var(--eg-line); font: 700 var(--eg-label-s); letter-spacing: .05em; text-transform: uppercase; color: var(--eg-muted); }
.eg-ev-pill.live { background: var(--eg-mint-fill); border-color: rgba(16, 185, 129, .3); color: var(--eg-mint); box-shadow: 0 0 10px rgba(16, 185, 129, .25); }
.eg-ev-pill.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--eg-mint); animation: eg-pulse 2s infinite; }
.eg-event strong { display: block; font: 600 14.5px/20px var(--eg-head); color: var(--eg-text); }
.eg-event small { display: block; margin-top: 2px; font: var(--eg-label-s); color: var(--eg-muted); }
.eg-event .go { margin-left: auto; color: var(--eg-muted); font-size: 18px; }

/* news rows — thumb, title, date, READ */
.eg-news { display: grid; gap: 10px; }
.eg-news-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; background: var(--eg-s); border: 1px solid var(--eg-line-soft); }
.eg-news-row:hover { border-color: rgba(139, 92, 246, .4); }
.eg-news-row img { width: 108px; height: 68px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.eg-news-row .t { flex: 1 1 auto; min-width: 0; }
.eg-news-row .t a { display: block; font: 600 14px/20px var(--eg-head); color: var(--eg-text); }
.eg-news-row:hover .t a { color: var(--eg-primary); }
.eg-news-row time { display: block; margin-top: 3px; font: var(--eg-label-s); color: var(--eg-muted); }
.eg-news-read { flex: 0 0 auto; padding: 7px 14px; border-radius: 8px; background: var(--eg-s-high); font: 700 11px/1 var(--eg-label); letter-spacing: .08em; color: var(--eg-text); }
.eg-news-row:hover .eg-news-read { background: var(--eg-primary); color: #fff; }

/* FAQ accordion */
.eg-faq { display: grid; gap: 8px; }
.eg-faq details { background: var(--eg-s); border: 1px solid var(--eg-line-soft); border-radius: 10px; padding: 0 16px; }
.eg-faq summary { cursor: pointer; padding: 15px 28px 15px 0; font: 600 14.5px/20px var(--eg-ui); color: var(--eg-text); list-style: none; position: relative; }
.eg-faq summary::-webkit-details-marker { display: none; }
.eg-faq summary::after { content: 'expand_more'; position: absolute; right: 0; top: 14px; font-family: 'Material Symbols Outlined'; font-size: 20px; color: var(--eg-muted); }
.eg-faq details[open] summary::after { content: 'expand_less'; }
.eg-faq .a { padding: 0 0 15px; font: var(--eg-small); color: var(--eg-muted); }

/* similar games — cover cards */
.eg-similar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 767px) { .eg-similar { grid-template-columns: repeat(2, 1fr); } }
.eg-sim { display: block; border-radius: 12px; overflow: hidden; background: var(--eg-s); border: 1px solid var(--eg-line-soft); transition: transform .18s ease, border-color .18s ease; }
.eg-sim:hover { transform: translateY(-2px); border-color: rgba(139, 92, 246, .45); }
.eg-sim img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.eg-sim span { display: block; padding: 10px 12px; font: 600 14px/20px var(--eg-head); color: var(--eg-text); }
.eg-sim:hover span { color: var(--eg-primary); }

/* ================= the sidebar rail — the design's cards ================= */
.eg-side-card { background: var(--eg-s-low); border-radius: 16px; padding: 24px; box-shadow: var(--eg-card-shadow); }
@media (max-width: 767px) { .eg-side-card { padding: 18px; } }
.eg-side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid rgba(73, 68, 84, .35); }
.eg-side-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: var(--eg-h2); font-weight: 700; color: var(--eg-text); }
.eg-side-head h3 .material-symbols-outlined { font-size: 20px; color: var(--eg-primary); }
.eg-side-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--eg-mint); box-shadow: 0 0 8px rgba(16, 185, 129, .6); }
/* the key-value matrix */
.eg-facts { margin: 0; }
.eg-facts-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(73, 68, 84, .25); font: var(--eg-small); }
.eg-facts-row:last-child { border-bottom: 0; }
.eg-facts-row dt { color: var(--eg-dim); margin: 0; flex: 0 0 auto; }
.eg-facts-row dd { margin: 0; text-align: right; color: var(--eg-text); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.eg-facts-row dd a { color: var(--eg-primary); font-weight: 700; }
.eg-facts-row dd .cg-btn-site { margin-top: 2px; }
.eg-facts-row dd .material-symbols-outlined { font-size: 18px; vertical-align: -4px; }
/* the quick action links under the matrix */
.eg-side-actions { display: grid; gap: 10px; padding-top: 18px; margin-top: 6px; }
.eg-side-actions a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; border-radius: 12px; background: var(--eg-s-high); font: var(--eg-label); color: var(--eg-text); }
.eg-side-actions a:hover { background: var(--eg-s-highest); }
.eg-side-actions a .l { display: inline-flex; align-items: center; gap: 8px; }
.eg-side-actions a .material-symbols-outlined:first-child { font-size: 18px; color: var(--eg-primary); }
.eg-side-actions a .launch { font-size: 16px; color: var(--eg-dim); }
/* community channel rows */
.eg-side-list { list-style: none; margin: 0; padding: 0; }
.eg-side-list li { border-bottom: 1px solid rgba(73, 68, 84, .25); }
.eg-side-list li:last-child { border-bottom: 0; }
.eg-side-list a { display: flex; align-items: center; gap: 12px; padding: 11px 2px; font: var(--eg-small); color: var(--eg-text); }
.eg-side-list a:hover { color: var(--eg-primary); }
.eg-side-list .material-symbols-outlined { font-size: 18px; color: var(--eg-muted); }
/* play card */
.eg-play-devs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.eg-play-dev { padding: 5px 11px; border-radius: 999px; background: var(--eg-s); border: 1px solid var(--eg-line-soft); font: var(--eg-label-s); color: var(--eg-muted); }
/* top in genre */
.eg-top-list { margin: 0; padding: 0; list-style: none; counter-reset: egtop; }
.eg-top-list li { counter-increment: egtop; border-bottom: 1px solid rgba(73, 68, 84, .25); }
.eg-top-list li:last-child { border-bottom: 0; }
.eg-top-list a { display: flex; align-items: center; gap: 12px; padding: 10px 2px; font: var(--eg-small); color: var(--eg-text); }
.eg-top-list a::before { content: counter(egtop, decimal-leading-zero); font: 700 12px/1 var(--eg-head); color: var(--eg-dim); }
.eg-top-list a:hover { color: var(--eg-primary); }
.eg-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font: var(--eg-label); color: var(--eg-primary); }

/* ================= the directory pages (lists) ================= */
.eg-pagehead { padding: 28px 0 0; }
.eg-pagehead h1 { margin: 0; font: var(--eg-hero); letter-spacing: -.02em; color: var(--eg-text); }
@media (max-width: 767px) { .eg-pagehead h1 { font: var(--eg-hero-m); } }
.eg-grad { background: linear-gradient(90deg, #a78bfa, var(--eg-primary) 45%, var(--eg-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eg-pagehead .sub { margin: 8px 0 0; max-width: 640px; font: 400 16px/26px var(--eg-ui); color: var(--eg-muted); }
/* the header row: title left, search right */
.eg-pagehead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.eg-search { display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 14px; border-radius: 12px; background: var(--eg-s); border: 1px solid var(--eg-line); box-shadow: 0 4px 24px rgba(0, 0, 0, .35); }
.eg-search .material-symbols-outlined { font-size: 20px; color: var(--eg-dim); }
.eg-search input { width: 240px; border: 0; background: transparent; color: var(--eg-text); font: var(--eg-small); padding: 9px 6px; }
.eg-search input::placeholder { color: var(--eg-dim); }
.eg-search input:focus { outline: none; }
.eg-search button { border: 0; border-radius: 9px; background: var(--eg-primary); color: #fff; padding: 9px 14px; cursor: pointer; box-shadow: 0 0 12px rgba(139, 92, 246, .35); }
@media (max-width: 767px) { .eg-search { width: 100%; } .eg-search input { width: 100%; min-width: 0; flex: 1; } }
/* KPI telemetry bar */
.eg-kpibar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 20px; padding: 8px; border-radius: 14px; background: var(--eg-s-low); border: 1px solid var(--eg-line-violet); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); }
@media (min-width: 768px) { .eg-kpibar { grid-template-columns: repeat(4, 1fr); } }
.eg-kpibar .cell { padding: 12px 16px; border-radius: 10px; background: var(--eg-s); border: 1px solid var(--eg-line-soft); }
.eg-kpibar .cell span { display: block; font: var(--eg-label-s); letter-spacing: .05em; text-transform: uppercase; color: var(--eg-dim); }
.eg-kpibar .cell b { display: block; margin-top: 2px; font: var(--eg-stat); letter-spacing: -.02em; color: var(--eg-text); font-variant-numeric: tabular-nums; }
.eg-kpibar .cell.mint b { color: var(--eg-mint); }
.eg-kpibar .cell.violet b { color: var(--eg-primary); }
/* the tokens stats strip reuses the same cells */
.eg .cg-tk-stats, .eg .cg-prof-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 8px; margin: 20px 0 0; border-radius: 14px; background: var(--eg-s-low); border: 1px solid var(--eg-line-violet); }
@media (min-width: 768px) { .eg .cg-tk-stats, .eg .cg-prof-stats { grid-template-columns: repeat(4, 1fr); } }
.eg .cg-tk-stat, .eg .cg-prof-stat { padding: 12px 16px; border-radius: 10px; background: var(--eg-s); border: 1px solid var(--eg-line-soft); }
.eg .cg-tk-stat-label, .eg .cg-prof-stat-label { display: block; font: var(--eg-label-s); letter-spacing: .05em; text-transform: uppercase; color: var(--eg-dim); margin-bottom: 2px; }
.eg .cg-tk-stat-value, .eg .cg-prof-stat-value { display: block; font: var(--eg-stat); letter-spacing: -.02em; color: var(--eg-text); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* action bar: filters toggle + dropdown pills + sort */
.eg-action { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 12px; border-radius: 14px; background: var(--eg-s); border: 1px solid var(--eg-line); box-shadow: 0 4px 24px rgba(0, 0, 0, .3); }
.eg-action .cg-filters { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; }
.eg-action .cg-dd > summary { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--eg-s-high); border: 1px solid rgba(255, 255, 255, .08); color: var(--eg-text); font: var(--eg-label); cursor: pointer; list-style: none; }
.eg-action .cg-dd > summary::-webkit-details-marker { display: none; }
.eg-action .cg-dd > summary::after { content: 'expand_more'; font-family: 'Material Symbols Outlined'; font-size: 16px; color: var(--eg-muted); }
.eg-action .cg-dd[open] > summary { border-color: var(--eg-primary); box-shadow: 0 0 10px rgba(139, 92, 246, .3); }
.eg-action .cg-dd-list { position: absolute; z-index: 30; min-width: 240px; max-height: 340px; overflow: auto; margin: 8px 0 0; padding: 6px; list-style: none; background: var(--eg-s-low); border: 1px solid rgba(139, 92, 246, .25); border-radius: 12px; box-shadow: var(--eg-pop); }
.eg-action .cg-dd-opt { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; font: var(--eg-small); color: var(--eg-text); }
.eg-action .cg-dd-opt:hover, .eg-action .cg-dd-opt.is-active { background: var(--eg-s); color: var(--eg-primary); }
.eg-action .cg-dd-n { font: 700 11px/1 var(--eg-ui); color: var(--eg-muted); }
.eg-action .cg-sort { display: flex; align-items: center; gap: 8px; margin-left: auto; font: var(--eg-label); color: var(--eg-muted); }
.eg-action .cg-sort select { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--eg-line); background: var(--eg-s-high); color: var(--eg-text); font: 600 13px/1.4 var(--eg-ui); }
.eg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.eg-chips .cg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--eg-primary); border: 1px solid rgba(139, 92, 246, .4); color: #fff; font: var(--eg-label); box-shadow: 0 0 10px rgba(139, 92, 246, .3); }
.eg-chips .cg-chip-clear { background: transparent; color: var(--eg-muted); border-color: var(--eg-line); box-shadow: none; }
/* the workspace split: rail + table */
.eg-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 24px; }
@media (min-width: 1024px) { .eg-split { grid-template-columns: 272px minmax(0, 1fr); } .eg-split .cg-filter-bar { display: none; } }
@media (max-width: 1023px) { .eg-rail { display: none; } }
.eg-rail { position: sticky; top: 128px; display: flex; flex-direction: column; gap: 18px; padding: 18px; border-radius: 16px; background: var(--eg-s-low); border: 1px solid var(--eg-line-violet); box-shadow: var(--eg-card-shadow); max-height: calc(100vh - 152px); overflow: auto; scrollbar-width: thin; }
.eg-rail-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--eg-line-soft); }
.eg-rail-head .t { display: inline-flex; align-items: center; gap: 8px; font: var(--eg-h3); color: var(--eg-text); }
.eg-rail-head .t .material-symbols-outlined { font-size: 20px; color: var(--eg-primary); }
.eg-rail-head .reset { font: var(--eg-label-s); color: var(--eg-muted); }
.eg-rail-head .reset:hover { color: var(--eg-primary); }
.eg-rail .group { display: flex; flex-direction: column; gap: 2px; }
.eg-rail .group > .glabel { font: var(--eg-h3); color: var(--eg-text); margin-bottom: 6px; }
.eg-rail .group ul { list-style: none; margin: 0; padding: 0; }
.eg-rail .group a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 8px; border-radius: 8px; font: var(--eg-small); color: var(--eg-muted); }
.eg-rail .group a:hover { background: var(--eg-s); color: var(--eg-text); }
.eg-rail .group a.is-active { background: var(--eg-s); color: var(--eg-primary); font-weight: 600; }
.eg-rail .n { flex: 0 0 auto; padding: 2px 7px; border-radius: 6px; background: var(--eg-s); border: 1px solid rgba(255, 255, 255, .05); font: 700 11px/16px var(--eg-ui); color: var(--eg-muted); font-variant-numeric: tabular-nums; }
.eg-rail .group a.is-active .n { color: var(--eg-primary); }
/* the table card */
.eg .cg-mod.cg-band { background: var(--eg-s-low); border: 1px solid var(--eg-line-violet); border-radius: 16px; padding: 6px 18px 12px; box-shadow: var(--eg-card-shadow); }
.eg .cg-band .cg-band-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(73, 68, 84, .35); }
.eg .cg-band .cg-band-tabs::-webkit-scrollbar { display: none; }
.eg .cg-band a.cg-band-tab { padding: 12px 14px; font: var(--eg-label); color: var(--eg-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.eg .cg-band a.cg-band-tab:hover { color: var(--eg-text); }
.eg .cg-band a.cg-band-tab-on { color: var(--eg-text); font-weight: 700; border-color: var(--eg-primary); }
.eg .cg-band .cg-data-table thead th { padding: 12px 12px; font: var(--eg-label-s); letter-spacing: .05em; text-transform: uppercase; color: var(--eg-dim); background: none !important; border-bottom: 1px solid rgba(73, 68, 84, .5); }
.eg .cg-band .cg-data-table td { padding: 12px; border-bottom: 1px solid var(--eg-line-soft); font: var(--eg-small); color: var(--eg-text); }
.eg .cg-band .cg-data-table tbody tr { height: auto; border-top: 0; }
.eg .cg-band .cg-data-table tbody tr:hover { background: rgba(139, 92, 246, .05); }
.eg .cg-band .cg-data-table tbody tr:last-child td { border-bottom: 0; }
.eg .cg-band .cg-data-table .cg-dt-game { min-width: 190px; }
.eg .cg-band .cg-dt-tagline { color: var(--eg-dim); }
.eg .cg-dt-icon { border-radius: 10px; }
.eg .cg-dt-name { font: 600 14.5px/20px var(--eg-head); }
.eg .cg-gpill { background: var(--eg-s-high); color: var(--eg-text); border-radius: 6px; padding: 3px 8px; font: var(--eg-label-s); }
.eg .cg-native-band .cg-badge { border-radius: 999px; font: 700 10px/1.4 var(--eg-ui); letter-spacing: .05em; padding: 4px 10px; }
.eg .cg-native-band .cg-badge-live { background: var(--eg-mint-fill); color: var(--eg-mint) !important; box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .3); }
.eg .cg-native-band .cg-badge-upcoming { background: rgba(56, 189, 248, .12); color: var(--eg-cyan) !important; }
.eg .cg-native-band .cg-badge-past { background: var(--eg-s-high); color: var(--eg-muted) !important; }
.eg .cg-band .cg-dt-chg .cg-delta-pos { color: var(--eg-mint); }
.eg .cg-band .cg-dt-chg .cg-delta-neg { color: var(--eg-red); }
/* pagination */
.eg .cg-pagination { margin: 24px 0 0; }
.eg .cg-pagination .page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.eg .cg-pagination a.page-numbers, .eg .cg-pagination span.page-numbers { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--eg-line); background: var(--eg-s); color: var(--eg-text); font: var(--eg-label); }
.eg .cg-pagination a.page-numbers:hover { border-color: var(--eg-primary); color: var(--eg-primary); }
.eg .cg-pagination span.current { background: var(--eg-primary); border-color: var(--eg-primary); color: #fff; }
.eg-empty, .eg .cg-empty, .eg .cg-sorted-note { padding: 24px 4px; color: var(--eg-muted); font: var(--eg-body); }
.eg .cg-sorted-note a { color: var(--eg-primary); }

/* ================= profile pages (token / investor / guild / developer) ================= */
.eg-prof-hero { position: relative; overflow: hidden; background: var(--eg-s-lowest); border-bottom: 1px solid var(--eg-line-soft); }
.eg-prof-hero .eg-hero-scrim { background: radial-gradient(60% 80% at 20% 0%, rgba(139, 92, 246, .18), transparent 70%), linear-gradient(180deg, rgba(13, 11, 20, .4), var(--eg-bg)); }
.eg-prof-hero-in { position: relative; padding: 32px 0; }
.eg-prof-id { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.eg-prof-icon { width: 96px; height: 96px; border-radius: 16px; object-fit: cover; background: var(--eg-s-high); box-shadow: 0 8px 32px rgba(0, 0, 0, .6), 0 0 0 1px rgba(139, 92, 246, .25); }
.eg-kind { display: block; font: 700 var(--eg-label-s); letter-spacing: .12em; text-transform: uppercase; color: var(--eg-primary); margin-bottom: 4px; }
.eg-prof-id h1 { margin: 0; font: var(--eg-hero); letter-spacing: -.02em; color: var(--eg-text); }
@media (max-width: 767px) { .eg-prof-id h1 { font: var(--eg-hero-m); } .eg-prof-icon { width: 72px; height: 72px; } }
.eg-prof-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.eg-prof-tag { display: inline-block; padding: 4px 10px; border-radius: 8px; background: var(--eg-s-high); border: 1px solid rgba(255, 255, 255, .08); font: var(--eg-label); color: var(--eg-muted); }
a.eg-prof-tag:hover { border-color: var(--eg-primary); color: var(--eg-text); }
.eg-prof-cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.eg-prof-socials { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.eg-prof-social { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--eg-s-high); border: 1px solid rgba(255, 255, 255, .04); color: var(--eg-muted) !important; }
.eg-prof-social img { width: 18px; height: 18px; object-fit: contain; }
.eg-prof-social:hover { background: var(--eg-primary); color: #fff !important; }
/* the site button lives in native-catalog (cg-btn-site); repaint it exactly here */
.eg .cg-btn-site { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #a078ff, var(--eg-primary) 45%, var(--eg-primary-hover)); color: #fff !important; font: 700 15px/22px var(--eg-head); box-shadow: var(--eg-cta); }
.eg .cg-btn-site:hover { filter: brightness(1.06); color: #fff; }
.eg .cg-btn-site .material-symbols-outlined { font-size: 18px; }
.eg .cg-btn-site-lg { padding: 13px 24px; }
/* price quote card on token profiles */
.eg-quote { margin-top: 20px; padding: 20px 24px; border-radius: 16px; background: linear-gradient(135deg, rgba(139, 92, 246, .16), rgba(124, 58, 237, .05)), var(--eg-s-low); border: 1px solid rgba(139, 92, 246, .3); box-shadow: var(--eg-card-shadow); }
.eg-quote-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; font: var(--eg-hero); letter-spacing: -.02em; color: var(--eg-text); font-variant-numeric: tabular-nums; }
.eg-quote-price .up { color: var(--eg-mint); }
.eg-quote-price .down { color: var(--eg-red); }
.eg-quote-sub { margin-top: 4px; font: var(--eg-label); color: var(--eg-muted); }
/* entity cards grid (games backed, guilds, similar) */
.eg-prof-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 900px) { .eg-prof-cards { grid-template-columns: repeat(3, 1fr); } }
.eg-prof-card { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 16px; border-radius: 12px; background: var(--eg-s); border: 1px solid var(--eg-line-soft); transition: border-color .18s ease, transform .18s ease; }
.eg-prof-card:hover { border-color: rgba(139, 92, 246, .5); transform: translateY(-2px); }
.eg-prof-card img, .eg-prof-card .blank { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; background: var(--eg-s-high); }
.eg-prof-card .txt { flex: 1 1 auto; min-width: 0; }
.eg-prof-card .txt strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14.5px/20px var(--eg-head); color: var(--eg-text); }
.eg-prof-card:hover .txt strong { color: var(--eg-primary); }
.eg-prof-card .txt small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--eg-label-s); color: var(--eg-muted); }
.eg-prof-card .go { color: var(--eg-muted); font-size: 16px; }
/* links chips row */
.eg .cg-prof-links { display: flex; flex-wrap: wrap; gap: 8px; }
.eg .cg-prof-link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px; background: var(--eg-s-high); border: 1px solid rgba(255, 255, 255, .06); color: var(--eg-text); font: var(--eg-label); }
.eg .cg-prof-link .material-symbols-outlined { font-size: 15px; color: var(--eg-muted); }
.eg .cg-prof-link:hover { border-color: var(--eg-primary); color: var(--eg-primary); }
/* prose + note + reviews/chart fits on profile pages too */
.eg .cg-prof-prose { font: var(--eg-body); color: #cbd5e1; }
.eg .cg-prof-prose p { margin: 0 0 10px; }
.eg .cg-prof-note { font: var(--eg-small); color: var(--eg-muted); }
.eg .cg-prof-note a { color: var(--eg-primary); }
/* the buy/perf tables on token profiles */
.eg .cg-tk-chart svg { background: var(--eg-s); border-radius: 12px; }
.eg .cg-tk-perf-cell { background: var(--eg-s); border: 1px solid var(--eg-line-soft); border-radius: 12px; }
.eg .cg-tk-perf-label { color: var(--eg-muted); }
.eg .cg-tk-perf-cell .cg-delta-pos { color: var(--eg-mint); }
.eg .cg-tk-perf-cell .cg-delta-neg { color: var(--eg-red); }
.eg .cg-prof-tablewrap { border: 1px solid var(--eg-line-soft); border-radius: 12px; background: var(--eg-s-low); }
.eg .cg-prof-table th { background: var(--eg-s); color: var(--eg-muted); border-bottom: 1px solid var(--eg-line); }
.eg .cg-prof-table td { border-bottom: 1px solid var(--eg-line-soft); color: var(--eg-text); }
.eg .cg-prof-trade { color: var(--eg-primary); }

/* ============================================================ the game page's cg-* blocks, composed by the builders — painted at the design's exact values */
/* hero: the container row — identity left, CTA column right, KPI strip full */
.eg .cg-hero { position: relative; overflow: hidden; background: var(--eg-s-lowest); }
.eg .cg-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .3; transform: scale(1.05); filter: blur(2px) saturate(1.1); }
.eg .cg-hero-scrim { position: absolute; inset: 0; background:
	linear-gradient(180deg, rgba(13, 11, 20, .38), rgba(13, 11, 20, .62) 60%, var(--eg-bg) 100%),
	linear-gradient(90deg, rgba(13, 11, 20, .55), rgba(13, 11, 20, .12) 45%, rgba(13, 11, 20, .7)); }
.eg .cg-hero-in { position: relative; z-index: 2; padding: 32px 0 24px; }
.eg .cg-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
@media (max-width: 1023px) { .eg .cg-hero-row { flex-direction: column; align-items: stretch; } }
.eg .cg-hero-id { display: flex; align-items: center; gap: 20px; min-width: 0; }
.eg .cg-hero-icon { position: relative; flex: 0 0 auto; width: 112px; height: 112px; padding: 6px; border-radius: 16px; background: var(--eg-s-high); box-shadow: 0 8px 32px rgba(0, 0, 0, .6), 0 0 0 1px rgba(139, 92, 246, .25); }
.eg .cg-hero-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.eg .cg-hero-status { position: absolute; bottom: -8px; right: -8px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font: 700 11px/1.4 var(--eg-ui); letter-spacing: .05em; }
.eg .cg-hero-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--eg-mint); animation: eg-pulse 2s infinite; }
.eg .cg-hero-status-live { background: var(--eg-mint-fill); border: 1px solid rgba(16, 185, 129, .3); color: var(--eg-mint); box-shadow: 0 0 10px rgba(16, 185, 129, .3); }
.eg .cg-hero-text { min-width: 0; }
.eg .cg-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.eg .cg-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 8px; background: var(--eg-s-high); border: 1px solid rgba(255, 255, 255, .08); font: var(--eg-label); color: var(--eg-muted); }
.eg a.cg-chip:hover { border-color: var(--eg-primary); color: var(--eg-text); }
.eg .cg-chip-chain { color: var(--eg-primary); }
.eg .cg-chip-genre { color: var(--eg-text); }
.eg .cg-chip-f2p { color: var(--eg-mint); background: rgba(16, 185, 129, .12); border-color: rgba(16, 185, 129, .25); }
.eg .cg-hero-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eg .cg-hero h1 { margin: 0; font: var(--eg-hero); letter-spacing: -.02em; color: var(--eg-text); }
@media (max-width: 767px) { .eg .cg-hero h1 { font: var(--eg-hero-m); } .eg .cg-hero-icon { width: 84px; height: 84px; } }
.eg .cg-hero-badge { padding: 3px 10px; border-radius: 6px; background: rgba(139, 92, 246, .2); color: var(--eg-primary); font: 700 var(--eg-label); letter-spacing: .06em; text-transform: uppercase; }
.eg .cg-hero-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; font: var(--eg-small); color: var(--eg-muted); }
.eg .cg-hero-dev { display: inline-flex; align-items: center; gap: 6px; }
.eg .cg-hero-dev .material-symbols-outlined { font-size: 18px; color: var(--eg-mint); }
.eg .cg-hero-dev b { color: var(--eg-text); font-weight: 500; }
.eg .cg-hero-rating { display: inline-flex; align-items: center; gap: 6px; }
.eg .cg-stars { display: inline-flex; gap: 1px; }
.eg .cg-stars .material-symbols-outlined { font-size: 16px; color: var(--eg-primary); font-variation-settings: 'FILL' 1; }
.eg .cg-hero-rating b { color: var(--eg-text); }
.eg .cg-hero-rating small { color: var(--eg-muted); }
.eg .cg-hero-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eg .cg-play { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 12px; background: linear-gradient(135deg, #a078ff, var(--eg-primary) 45%, var(--eg-primary-hover)); color: var(--eg-on-primary) !important; font: 700 15px/22px var(--eg-head); letter-spacing: .02em; box-shadow: var(--eg-cta); transform: translateY(0); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.eg .cg-play:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.06); }
.eg .cg-play .material-symbols-outlined { font-size: 20px; }
.eg .cg-play.eg-play-lg { width: 100%; justify-content: center; }
.eg .cg-socials { display: flex; gap: 6px; flex-wrap: wrap; }
.eg .cg-socials a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--eg-s-high); border: 1px solid rgba(255, 255, 255, .04); color: var(--eg-muted) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.eg .cg-socials a:hover { background: var(--eg-primary); color: #fff !important; }
.eg .cg-hero-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(73, 68, 84, .35); flex-basis: 100%; }
.eg .cg-kpi { padding: 12px 14px; border-radius: 12px; background: rgba(19, 17, 28, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.eg .cg-kpi-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: var(--eg-label-s); letter-spacing: .05em; text-transform: uppercase; color: var(--eg-dim); margin-bottom: 4px; }
.eg .cg-kpi-label .cg-kpi-head { display: inline-flex; margin-left: auto; }
.eg .cg-kpi-head { display: none; }
.eg .cg-kpi-delta { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; }
.eg .cg-kpi-delta .material-symbols-outlined { font-size: 14px; }
.eg .cg-kpi-value { display: block; font: var(--eg-stat); letter-spacing: -.02em; color: var(--eg-text); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eg .cg-notice { padding: 14px 0; }
.eg .cg-notice-dead { border-top: 2px solid var(--eg-red); }
.eg .cg-notice-upcoming { border-top: 2px solid var(--eg-cyan); }

/* tabs: the design's underline bar */
.eg .cg-tabs { position: sticky; top: 76px; z-index: 40; background: rgba(13, 11, 20, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid rgba(73, 68, 84, .35); border-bottom: 1px solid rgba(73, 68, 84, .35); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); margin: 0; padding: 0; border-radius: 0; overflow: visible; }
.eg .cg-tabs-in { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.eg .cg-tabs-in::-webkit-scrollbar { display: none; }
.eg .cg-tabs-in a { display: inline-flex; align-items: center; gap: 6px; padding: 12px 16px; font: 600 14px/20px var(--eg-ui); color: var(--eg-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; background: none; box-shadow: none; border-radius: 0; transition: color .15s ease, border-color .15s ease; }
.eg .cg-tabs-in a .material-symbols-outlined { font-size: 18px; }
.eg .cg-tabs-in a:hover { color: var(--eg-text); border-color: var(--eg-line); background: none; }
.eg .cg-tabs-in a.is-active { color: var(--eg-text); font-family: var(--eg-head); font-weight: 700; font-size: 15px; border-color: var(--eg-primary); background: none; box-shadow: none; }
.eg .cg-tabs-in a.is-active .material-symbols-outlined { color: var(--eg-primary); }

/* sections: every one a rounded-2xl card on surface-low */
.eg .cg-section { background: var(--eg-s-low); border-radius: 16px; padding: 20px; box-shadow: var(--eg-card-shadow); scroll-margin-top: 130px; }
.eg .cg-section + .cg-section { margin-top: 24px; }
.eg-main .entry-content > * + * { margin-top: 24px; }
.eg .cg-section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font: var(--eg-h2); font-weight: 700; color: var(--eg-text); }
.eg .cg-section-title .material-symbols-outlined { font-size: 22px; color: var(--eg-primary); }
@media (max-width: 767px) { .eg .cg-section { padding: 16px; border-radius: 14px; } }

/* media showcase */
.eg .cg-media-spot { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--eg-s-lowest); margin-bottom: 12px; }
.eg .cg-media-spot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.eg .cg-media-spot:hover img { transform: scale(1.03); }
.eg .cg-media-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; border: 0; background: rgba(139, 92, 246, .9); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 30px rgba(139, 92, 246, .5); }
.eg .cg-media-play:hover { background: var(--eg-primary); }
.eg .cg-media-play .material-symbols-outlined { font-size: 32px; }
.eg .cg-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 767px) { .eg .cg-media-grid { grid-template-columns: repeat(2, 1fr); } }
.eg .cg-gallery-item { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--eg-s); cursor: pointer; flex: none; scroll-snap-align: none; }
.eg .cg-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.eg .cg-gallery-item .material-symbols-outlined { position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; font-size: 28px; color: #fff; text-shadow: 0 0 8px rgba(0, 0, 0, .6); }

/* about + pros/cons + verdict on the design's patterns */
.eg .cg-about { font: var(--eg-body); color: #cbd5e1; margin: 0; }
.eg .cg-about p { margin: 0 0 12px; }
.eg .cg-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: none; border-radius: 0; padding: 0; box-shadow: none; }
.eg .cg-pros, .eg .cg-cons { padding: 16px 18px; border-radius: 12px; background: var(--eg-s); border: 1px solid var(--eg-line-soft); box-shadow: none; }
.eg .cg-pros h3, .eg .cg-cons h3 { font: var(--eg-h3); }
.eg .cg-pros h3 { color: var(--eg-mint); }
.eg .cg-cons h3 { color: var(--eg-red); }
.eg .cg-pros ul, .eg .cg-cons ul { font: var(--eg-small); color: #cbd5e1; }
.eg .cg-verdict { position: relative; margin: 0; padding: 20px 22px 16px; border: 1px solid var(--eg-line); border-radius: 12px; background: var(--eg-s-low); box-shadow: none; font: var(--eg-body); color: var(--eg-text); }
.eg .cg-verdict::before { content: 'format_quote'; position: absolute; top: -15px; left: 16px; font-family: 'Material Symbols Outlined'; font-size: 28px; color: var(--eg-primary); background: var(--eg-s-low); padding: 0 4px; }
.eg .cg-verdict cite { display: flex; justify-content: flex-end; margin-top: 8px; font: 700 var(--eg-label); font-style: italic; letter-spacing: .04em; color: var(--eg-primary); }

/* token card head — price on the right */
.eg .cg-token { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.eg .cg-token-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 14px; }
.eg .cg-token-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.eg .cg-token-id img { width: 44px; height: 44px; border-radius: 50%; background: var(--eg-s); }
.eg .cg-token-id b { display: block; font: var(--eg-h2); color: var(--eg-text); }
.eg .cg-token-id small { display: block; font: var(--eg-label); color: var(--eg-muted); margin-top: 1px; }
.eg .cg-token-price { display: flex; align-items: baseline; gap: 10px; text-align: right; }
.eg .cg-token-price b.cg-token-price { font: var(--eg-stat); letter-spacing: -.02em; color: var(--eg-text); font-variant-numeric: tabular-nums; }
.eg .cg-token-delta { font: 700 13px/1 var(--eg-ui); padding: 4px 10px; border-radius: 999px; }
.eg .cg-token-delta small { font-weight: 600; color: inherit; opacity: .8; }
.eg .cg-token-delta.cg-delta-pos { color: var(--eg-mint); background: var(--eg-mint-fill); }
.eg .cg-token-delta.cg-delta-neg { color: var(--eg-red); background: rgba(251, 113, 133, .14); }
.eg .cg-token-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 4px; }
.eg .cg-token-stat { padding: 12px 14px; border-radius: 10px; background: var(--eg-s); border: 1px solid var(--eg-line-soft); }
.eg .cg-token-stat span { display: block; font: var(--eg-label-s); letter-spacing: .05em; text-transform: uppercase; color: var(--eg-muted); margin-bottom: 2px; }
.eg .cg-token-stat b { font: 700 18px/24px var(--eg-head); color: var(--eg-text); font-variant-numeric: tabular-nums; }
.eg .cg-token-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.eg .cg-token-links a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 10px; background: var(--eg-s-high); font: var(--eg-label); color: var(--eg-text); }
.eg .cg-token-links a:hover { background: var(--eg-s-highest); color: var(--eg-primary); }
.eg .cg-token-links a .material-symbols-outlined { font-size: 16px; color: var(--eg-primary); }
.eg .cg-delta-pos { color: var(--eg-mint); }
.eg .cg-delta-neg { color: var(--eg-red); }

/* funding + events */
.eg .cg-fund-sub { margin: 0 0 10px; font: var(--eg-h3); color: var(--eg-text); }
.eg .cg-funding .cg-prof-cards { margin-bottom: 20px; }
.eg .cg-rounds { display: grid; gap: 10px; }
.eg .cg-round { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 12px; background: var(--eg-s); border: 1px solid var(--eg-line-soft); }
.eg .cg-round .material-symbols-outlined { color: var(--eg-mint); font-size: 20px; }
.eg .cg-round-body strong { display: block; font: 600 14px/20px var(--eg-head); color: var(--eg-text); }
.eg .cg-round-body small { display: block; margin-top: 2px; font: var(--eg-label-s); color: var(--eg-muted); }
.eg .cg-events { display: grid; gap: 10px; }
.eg .cg-event { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: var(--eg-s); border: 1px solid var(--eg-line-soft); }
.eg .cg-event:hover { border-color: rgba(139, 92, 246, .45); }
.eg .cg-event-date { flex: 0 0 auto; min-width: 90px; text-align: center; }
.eg .cg-ev-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--eg-s-high); border: 1px solid var(--eg-line); font: 700 var(--eg-label-s); letter-spacing: .05em; text-transform: uppercase; color: var(--eg-muted); }
.eg .cg-ev-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--eg-mint); animation: eg-pulse 2s infinite; }
.eg .cg-ev-live { background: var(--eg-mint-fill); border-color: rgba(16, 185, 129, .3); color: var(--eg-mint); box-shadow: 0 0 10px rgba(16, 185, 129, .25); }
.eg .cg-event-body { flex: 1 1 auto; min-width: 0; }
.eg .cg-event-body strong { display: block; font: 600 14.5px/20px var(--eg-head); color: var(--eg-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eg .cg-event-body small { display: block; margin-top: 2px; font: var(--eg-label-s); color: var(--eg-muted); }
.eg .cg-event-go { margin-left: auto; color: var(--eg-muted); font-size: 18px; }

/* news rows */
.eg .cg-news-list { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.eg .cg-news-list li { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; background: var(--eg-s); border: 1px solid var(--eg-line-soft); }
.eg .cg-news-list li:hover { border-color: rgba(139, 92, 246, .4); }
.eg .cg-news-list img { width: 108px; height: 68px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.eg .cg-news-list li > div { flex: 1 1 auto; min-width: 0; }
.eg .cg-news-list li > div > a { font: 600 14px/20px var(--eg-head); color: var(--eg-text); }
.eg .cg-news-list li:hover .t a, .eg .cg-news-list li > div > a:hover { color: var(--eg-primary); }
.eg .cg-news-list time { display: block; margin-top: 3px; font: var(--eg-label-s); color: var(--eg-muted); }
.eg .cg-news-read { flex: 0 0 auto; padding: 7px 14px; border-radius: 8px; background: var(--eg-s-high); font: 700 11px/1 var(--eg-ui); letter-spacing: .08em; color: var(--eg-text); }
.eg .cg-news-list li:hover .cg-news-read { background: var(--eg-primary); color: #fff; }

/* FAQ */
.eg .cg-faq-list { display: grid; gap: 8px; }
.eg .cg-faq-item { background: var(--eg-s); border: 1px solid var(--eg-line-soft); border-radius: 10px; padding: 0 16px; }
.eg .cg-faq-q { cursor: pointer; padding: 15px 28px 15px 0; font: 600 14.5px/20px var(--eg-ui); color: var(--eg-text); }
.eg .cg-faq-q::after { content: 'expand_more'; position: absolute; right: 0; top: 14px; font-family: 'Material Symbols Outlined'; font-size: 20px; color: var(--eg-muted); }
.eg .cg-faq-item[open] > .cg-faq-q::after { content: 'expand_less'; }
.eg .cg-faq-a { padding: 0 0 15px; font: var(--eg-small); color: var(--eg-muted); }

/* similar */
.eg .cg-similar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 767px) { .eg .cg-similar-grid { grid-template-columns: repeat(2, 1fr); } }
.eg .cg-similar-card { display: block; border-radius: 12px; overflow: hidden; background: var(--eg-s); border: 1px solid var(--eg-line-soft); }
.eg .cg-similar-card:hover { transform: translateY(-2px); border-color: rgba(139, 92, 246, .45); }
.eg .cg-similar-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.eg .cg-similar-card span { display: block; padding: 10px 12px; font: 600 14px/20px var(--eg-head); color: var(--eg-text); }
.eg .cg-similar-card:hover span { color: var(--eg-primary); }

/* the sidebar rail's facts matrix + quick-facts widget, at the design's values */
.eg .cg-facts { display: block; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.eg .cg-facts-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(73, 68, 84, .25); font: var(--eg-small); }
.eg .cg-facts-row dt { color: var(--eg-dim); flex: 0 0 auto; }
.eg .cg-facts-row dd { text-align: right; color: var(--eg-text); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.eg .cg-facts-row dd a { color: var(--eg-primary); font-weight: 700; }
.eg .cg-facts-row dd .material-symbols-outlined { font-size: 18px; vertical-align: -4px; }
.eg .cg-quick-facts .widget-title { display: flex; align-items: center; gap: 8px; padding: 0 0 12px; margin: 0 0 4px; border-bottom: 1px solid rgba(73, 68, 84, .35); font: var(--eg-h2); }
.eg .cg-quick-facts .cg-facts-row:last-child { border-bottom: 0; }
.eg .cg-btn-site { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: 10px; background: var(--eg-s-high); color: var(--eg-text) !important; font: var(--eg-label); box-shadow: none; }
.eg .cg-btn-site:hover { background: var(--eg-s-highest); color: var(--eg-primary) !important; filter: none; transform: none; }
.eg .cg-btn-site .material-symbols-outlined { font-size: 15px; color: var(--eg-primary); }
.eg .rbc-sidebar .widget { background: var(--eg-s-low); border: 1px solid var(--eg-line-violet); border-radius: 16px; padding: 20px; margin-bottom: 24px; box-shadow: var(--eg-card-shadow); }

/* ---------- the owner's 10-02 evening list ---------- */
/* the verdict's quote is a real glyph, never a ligature */
.eg .cg-verdict-glyph { position: absolute; top: 4px; left: 16px; font: 800 52px/1 var(--st-head, sans-serif); color: var(--eg-primary); opacity: .9; }
.eg .cg-verdict { padding-top: 34px; }
.eg .cg-verdict::before { content: none; }
/* the About disclosure */
.eg .cg-about-more summary { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 9px 18px; border-radius: 10px; background: var(--eg-s-high); color: var(--eg-text); font: var(--eg-label); cursor: pointer; list-style: none; }
.eg .cg-about-more summary::-webkit-details-marker { display: none; }
.eg .cg-about-more summary .material-symbols-outlined { font-size: 18px; transition: transform .2s ease; }
.eg .cg-about-more[open] summary .material-symbols-outlined { transform: rotate(180deg); }
.eg .cg-about-more[open] summary { color: var(--eg-primary); }
.eg .cg-about-rest { margin-top: 12px; }
.eg .cg-about-rest p { margin: 0 0 12px; }
/* the price chart, the design's violet */
.eg .cg-tok-chart-svg [data-role="chart-line"] { stroke: #a78bfa; stroke-width: 2; }
.eg .cg-tok-chart-svg stop { stop-color: #8b5cf6; }
.eg .cg-tok-chart-svg stop:first-child { stop-opacity: .35; }
.eg .cg-tok-chart-svg stop:last-child { stop-opacity: 0; }
.eg .cg-tok-chart-canvas { background: rgba(139, 92, 246, .04); border: 1px solid rgba(139, 92, 246, .12); }
/* the sidebar matrix the design draws */
.eg .cg-facts-row dt { font: var(--eg-small); }
.eg .cg-facts-row dd a { color: var(--eg-primary); font-weight: 500; }
.eg .cg-facts-row dd .material-symbols-outlined { font-size: 18px; vertical-align: -4px; }
.eg .cg-facts-row dd .cg-btn-site { background: var(--eg-s-high); color: var(--eg-text) !important; font: var(--eg-label); padding: 8px 14px; border-radius: 10px; box-shadow: none; }
.eg .cg-facts-row dd .cg-btn-site .material-symbols-outlined { color: var(--eg-primary); }
.eg .cg-hero .flex.text-primary .material-symbols-outlined { font-variation-settings: 'FILL' 1; }

/* profile grid columns (the shell reuses eg-grid on profile pages too) */
.eg .eg-main-col { min-width: 0; }
@media (min-width: 1024px) { .eg .eg-grid > .eg-main-col { grid-column: span 8; } }
@media (min-width: 1024px) { .eg .eg-grid > aside.eg-side { grid-column: span 4; position: sticky; top: 128px; max-height: calc(100vh - 152px); overflow: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 24px; } }
/* every price line chart on the pages paints the design's violet */
.eg .cg-tk-chart svg, .eg .cg-tok-chart-svg { background: rgba(139, 92, 246, .04); border-radius: 12px; }
.eg .cg-tk-chart svg path, .eg .cg-tk-chart svg polyline { stroke: #a78bfa !important; }
.eg .cg-tk-chart svg .cg-line, .eg .cg-tok-chart-svg [data-role="chart-line"] { stroke: #a78bfa !important; stroke-width: 2; }
.eg .cg-tk-chart.is-up svg path { stroke: #a78bfa !important; }
.eg .cg-tk-chart.is-down svg path { stroke: #a78bfa !important; }
.eg .cg-tk-chart-axis, .eg .cg-tk-chart-foot { color: var(--eg-muted) !important; }
.eg .cg-prof-table { background: var(--eg-s-low); }

/* the chain tabs live in the verbatim table wrapper now */
.eg-twrap .cg-band-tabs { display: flex; gap: 2px; padding: 10px 18px 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(73, 68, 84, .5); }
.eg-twrap .cg-band-tabs::-webkit-scrollbar { display: none; }
.eg-twrap .cg-band-tabs a.cg-band-tab { padding: 10px 14px; font: 600 12px/16px var(--eg-ui); color: var(--eg-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.eg-twrap .cg-band-tabs a.cg-band-tab:hover { color: var(--eg-text); }
.eg-twrap .cg-band-tabs a.cg-band-tab-on { color: var(--eg-text); font-weight: 700; border-color: var(--eg-primary); }
.eg-twrap .cg-data-table { margin: 0; }