/*
 * egamers-skin.css — the sitewide Pixwell skin (project 12, 2026-09-14).
 *
 * The owner approved a mockup of the redesigned homepage and asked for its
 * header and ground colour on every page. This file paints Pixwell's own
 * markup — header, ground, block titles, category chips, post cards — and
 * the plugin's modules, from one token set. Enqueued by Native\SiteSkin on
 * egamers only (Config `site_skin`), after Pixwell's main.css + dynamic.css
 * and after the plugin's modules.css / native-catalog.css when they are on
 * the page, so most rules win by order; the few that fight Pixwell's
 * `!important` or a footer-enqueued stylesheet carry the specificity they need.
 *
 * Dark mode is Pixwell's `body[data-theme="dark"]`, the site's default; the
 * light theme is left to Pixwell. Under 768px nothing from native-catalog.css's
 * phone rules changes — the card strip, the tokens strip, the 10 rows.
 */

/* ============================================================ tokens */
body[data-theme="dark"] {
	--eg-bg: #0e0d14;
	--eg-surface: #16151f;
	--eg-raised: #1d1c28;
	--eg-line: rgba(255, 255, 255, .07);
	--eg-line-2: rgba(255, 255, 255, .12);
	--eg-text: #f3f1fa;
	--eg-muted: #9b98ad;
	--eg-dim: #6d6a80;
	--eg-accent: #a879ff;
	--eg-accent-2: #ff5fb0;
	--eg-grad: linear-gradient(90deg, #a879ff, #ff5fb0);
	--eg-up: #34d399;
	--eg-down: #fb6f7a;
	--eg-head: "Quicksand", "Poppins", sans-serif;
	--eg-ui: "Poppins", sans-serif;
}

/* ============================================================ ground + aurora */
body[data-theme="dark"] { background-color: var(--eg-bg) !important; color: var(--eg-text); position: relative; }
body[data-theme="dark"]::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 900px;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(60% 40% at 50% -5%, rgba(168, 121, 255, .26), transparent 70%),
		radial-gradient(35% 30% at 85% 8%, rgba(255, 95, 176, .11), transparent 70%);
}
body[data-theme="dark"] .site-outer { position: relative; z-index: 1; }

/* ============================================================ header */
body[data-theme="dark"] #site-header .navbar-wrap,
body[data-theme="dark"] .sticky-holder .navbar-wrap,
body[data-theme="dark"] .navbar-wrap.is-sticky,
body[data-theme="dark"] .mobile-sticky-nav .mobile-navbar,
body[data-theme="dark"] .mobile-sticky-nav {
	background: rgba(14, 13, 20, .72) !important;
	background-image: none !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--eg-line);
	box-shadow: none;
}
body[data-theme="dark"] .main-menu > li > a {
	font-family: var(--eg-ui);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #dcd9ea;
}
body[data-theme="dark"] .main-menu > li > a:hover,
body[data-theme="dark"] .main-menu > li:hover > a { color: #fff; }
body[data-theme="dark"] .main-menu > li > a > span { position: relative; }
body[data-theme="dark"] .main-menu > li.current-menu-item > a > span::after,
body[data-theme="dark"] .main-menu > li.current-menu-ancestor > a > span::after,
body[data-theme="dark"] .main-menu > li.current_page_item > a > span::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	border-radius: 2px;
	background: var(--eg-grad);
}
body[data-theme="dark"] .main-menu .sub-menu,
body[data-theme="dark"] .navbar-holder .main-menu .sub-menu { background: var(--eg-raised); border: 1px solid var(--eg-line); border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
body[data-theme="dark"] .main-menu .sub-menu a:hover { color: var(--eg-accent); }
body[data-theme="dark"] .header-social .social-icons a,
body[data-theme="dark"] .navbar-right a { color: #cfcbe0; }
body[data-theme="dark"] .navbar-search-popup,
body[data-theme="dark"] .trend-lightbox,
body[data-theme="dark"] .off-canvas-wrap { background: var(--eg-surface) !important; }

/* ============================================================ type + links */
body[data-theme="dark"] .entry-title,
body[data-theme="dark"] .entry-title a,
body[data-theme="dark"] h1, body[data-theme="dark"] h2, body[data-theme="dark"] h3, body[data-theme="dark"] h4 { color: var(--eg-text); }
body[data-theme="dark"] .p-url:hover,
body[data-theme="dark"] .entry-title a:hover { color: var(--eg-accent); }
body[data-theme="dark"] .entry-content a:not(.no-link):not(.btn):not(.cg-btn) { color: var(--eg-accent); }
body[data-theme="dark"] .p-meta-info, body[data-theme="dark"] .meta-info-el, body[data-theme="dark"] .date, body[data-theme="dark"] .rtime,
body[data-theme="dark"] .p-meta-info a, body[data-theme="dark"] .breadcrumb-inner, body[data-theme="dark"] .breadcrumb-inner a { color: var(--eg-muted); }
body[data-theme="dark"] .p-meta-info .meta-info-author a { color: #cfcbe0; font-weight: 500; }

/* ---------- block + widget titles: Quicksand, sentence case, the gradient underline */
body[data-theme="dark"] .block-header { margin-bottom: 20px; align-items: baseline; }
body[data-theme="dark"] .block-title,
body[data-theme="dark"] .widget-title,
body[data-theme="dark"] .heading-title {
	position: relative;
	padding: 0 0 10px !important;
	margin: 0;
	font-family: var(--eg-head);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: lowercase;
	border: 0;
	background: none;
}
body[data-theme="dark"] .widget-title { font-size: 18px; }
body[data-theme="dark"] .block-title::first-letter,
body[data-theme="dark"] .widget-title::first-letter,
body[data-theme="dark"] .heading-title::first-letter { text-transform: uppercase; }
body[data-theme="dark"] .block-title::before,
body[data-theme="dark"] .widget-title::before,
body[data-theme="dark"] .heading-title::before,
body[data-theme="dark"] .block-title > a::before,
body[data-theme="dark"] .block-title > a::after,
body[data-theme="dark"] .block-title > span::before,
body[data-theme="dark"] .block-title > span::after { display: none !important; content: none !important; }
body[data-theme="dark"] .block-title::after,
body[data-theme="dark"] .widget-title::after,
body[data-theme="dark"] .heading-title::after {
	content: "" !important;
	display: block !important;
	position: absolute;
	left: 0;
	right: auto;
	top: auto;
	bottom: 0;
	width: 44px;
	height: 3px;
	border: 0;
	border-radius: 3px;
	background: var(--eg-grad);
	transform: none;
	opacity: 1;
}
body[data-theme="dark"] .widget-title::after { width: 32px; }
body[data-theme="dark"] .block-title a { color: var(--eg-text); }
body[data-theme="dark"] .block-view-more a { font-family: var(--eg-ui); font-size: 12.5px; font-weight: 600; color: var(--eg-muted); text-transform: none; letter-spacing: 0; }
body[data-theme="dark"] .block-view-more a:hover { color: var(--eg-accent); }

/* ---------- category chips: glass; Blockchain Games (cat 2) tinted violet */
body[data-theme="dark"] .cat-info-el,
body[data-theme="dark"] .p-categories a,
body[data-theme="dark"] .s-cats a {
	font-family: var(--eg-ui);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1;
	padding: 6px 9px;
	border-radius: 999px;
	color: #fff !important;
	background: rgba(255, 255, 255, .14) !important;
	border: 1px solid rgba(255, 255, 255, .14);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
body[data-theme="dark"] .cat-info-el:hover { background: rgba(255, 255, 255, .24) !important; }
body[data-theme="dark"] .cat-info-el.cat-info-id-2 { background: rgba(168, 121, 255, .38) !important; border-color: rgba(168, 121, 255, .55); }

/* ---------- post cards */
body[data-theme="dark"] .p-feat .rb-iwrap,
body[data-theme="dark"] .p-feat img { border-radius: 10px; }
body[data-theme="dark"] .p-feat { border-radius: 10px; overflow: hidden; background-color: var(--eg-raised); } /* background-COLOR: the slider paints its image as a background */
body[data-theme="dark"] .p-feat img { transition: transform .5s ease; }
body[data-theme="dark"] .p-wrap:hover .p-feat img { transform: scale(1.04); }
body[data-theme="dark"] .p-grid .entry-title, body[data-theme="dark"] .p-grid-2 .entry-title { font-family: var(--eg-head); font-size: 16.5px; line-height: 1.32; }
body[data-theme="dark"] .p-grid-1 .entry-title { font-size: 19px; }
body[data-theme="dark"] .p-list .entry-title, body[data-theme="dark"] .p-list-4 .entry-title { font-family: var(--eg-head); font-size: 14px; line-height: 1.35; }
body[data-theme="dark"] .p-list .p-feat img, body[data-theme="dark"] .p-list-4 .p-feat img { border-radius: 8px; }
body[data-theme="dark"] .block-wrap .btn.p-link { display: none; }
body[data-theme="dark"] .p-footer .p-meta-info { font-size: 12px; }
body[data-theme="dark"] .fw-block .p-wrap.p-list { border-color: var(--eg-line); }

/* ---------- the hero (fw-feat-1) and every overlay card */
body[data-theme="dark"] .p-overlay .p-feat { border-radius: 14px; }
body[data-theme="dark"] .p-overlay .content-overlay,
body[data-theme="dark"] .p-overlay .p-feat::after {
	background: linear-gradient(180deg, rgba(14, 13, 20, 0) 35%, rgba(14, 13, 20, .55) 65%, rgba(14, 13, 20, .95)) !important;
}
body[data-theme="dark"] .p-overlay .overlay-holder { padding: 24px 28px; }
body[data-theme="dark"] .p-overlay-1 .entry-title.h1 { font-family: var(--eg-head); font-size: 34px; line-height: 1.15; margin-top: 12px; max-width: 22ch; }
body[data-theme="dark"] .p-overlay .entry-title { font-family: var(--eg-head); line-height: 1.3; margin-top: 10px; }
body[data-theme="dark"] .p-overlay .p-meta-info, body[data-theme="dark"] .p-overlay .p-meta-info a { color: #c9c5da; }

/* ---------- the technology slider (fw-feat-14): the wide feature card */
body[data-theme="dark"] .fw-feat-14 .p-wrap,
body[data-theme="dark"] .fw-feat-14 .content-wrap,
body[data-theme="dark"] .fw-feat-14 .slick-slide { background: var(--eg-surface) !important; border-radius: 14px; overflow: hidden; }
body[data-theme="dark"] .fw-feat-14 .content-inner { border: 1px solid var(--eg-line); border-radius: 14px; }
body[data-theme="dark"] .fw-feat-14 .entry-title { font-family: var(--eg-head); font-size: 28px; line-height: 1.2; }
body[data-theme="dark"] .fw-feat-14 .p-feat, body[data-theme="dark"] .fw-feat-14 .p-feat img, body[data-theme="dark"] .fw-feat-14 .rb-iwrap { border-radius: 0; }
body[data-theme="dark"] .slick-dots li button::before, body[data-theme="dark"] .slick-dots li.slick-active button::before { color: var(--eg-accent); }

/* ---------- sidebars, widgets, follower panel, footer */
body[data-theme="dark"] .w-sidebar { margin-bottom: 36px; }
body[data-theme="dark"] .social-follower .follower-el { border-radius: 10px; background: var(--eg-raised) !important; border: 1px solid var(--eg-line); margin-bottom: 8px; }
body[data-theme="dark"] .social-follower .follower-el .follower-icon { border-radius: 8px; }
body[data-theme="dark"] .social-follower .num-count, body[data-theme="dark"] .social-follower .text-count, body[data-theme="dark"] .social-follower .right-el { color: var(--eg-text); }
body[data-theme="dark"] .footer-wrap { background: var(--eg-surface) !important; border-top: 1px solid var(--eg-line); }
body[data-theme="dark"] .footer-wrap a:hover { color: var(--eg-accent); }
body[data-theme="dark"] .single-post-related, body[data-theme="dark"] .rb-section, body[data-theme="dark"] .rbc-sidebar .widget { border-color: var(--eg-line); }
body[data-theme="dark"] .rb-cookie, body[data-theme="dark"] .back-top { background: var(--eg-raised) !important; }
body[data-theme="dark"] .pagination-link, body[data-theme="dark"] .page-numbers, body[data-theme="dark"] .loadmore-link { background: var(--eg-raised) !important; color: var(--eg-text) !important; border-radius: 8px; }
body[data-theme="dark"] .pagination-link:hover, body[data-theme="dark"] .page-numbers:hover, body[data-theme="dark"] .page-numbers.current { background: var(--eg-accent) !important; color: #fff !important; }

/* ============================================================ the plugin's modules */
/* Higher specificity than native-catalog.css's palette blocks: on an article that
   stylesheet is enqueued from the body and prints in the footer, after this file. */
html body[data-theme="dark"] .cg-mod {
	--cg-accent: var(--eg-accent);
	--cg-ink: var(--eg-text);
	--cg-muted: var(--eg-muted);
	--cg-hair: var(--eg-line);
	--cg-surface: var(--eg-surface);
	--cg-live: var(--eg-up);
	--cg-down: var(--eg-down);
}
body[data-theme="dark"] .cg-native {
	--cg-bg: var(--eg-bg);
	--cg-surface: var(--eg-surface);
	--cg-surface-2: var(--eg-raised);
	--cg-text: var(--eg-text);
	--cg-muted: var(--eg-muted);
	--cg-line: var(--eg-line);
	--cg-accent: var(--eg-accent);
	--cg-secondary: #8fb4ff;
	--cg-live: var(--eg-up);
	--cg-radius: 12px;
}
body[data-theme="dark"] .cg-mod.cg-band-games,
body[data-theme="dark"] .cg-mod.cg-band-tokens,
body[data-theme="dark"] .cg-hc-card {
	background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0)), var(--eg-surface);
	border-color: var(--eg-line);
	border-radius: 14px;
}
body[data-theme="dark"] .cg-hc-card { padding: 16px 16px 10px; }
body[data-theme="dark"] .cg-hc-head .material-symbols-outlined { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 16px; background: rgba(168, 121, 255, .16); }
body[data-theme="dark"] .cg-hc-title, body[data-theme="dark"] .cg-band-title { font-family: var(--eg-ui); }
body[data-theme="dark"] .cg-band-title { font-family: var(--eg-head); font-size: 20px; }
body[data-theme="dark"] .cg-hc-pill, body[data-theme="dark"] .cg-tk-mini-chg, body[data-theme="dark"] .cg-hc-pill.cg-delta-pos, body[data-theme="dark"] .cg-hc-pill.cg-delta-neg { border-radius: 7px; padding: 5px 7px; font-size: 11px; }
body[data-theme="dark"] .cg-hc-pill.cg-delta-pos { background: rgba(52, 211, 153, .14); }
body[data-theme="dark"] .cg-hc-pill.cg-delta-neg { background: rgba(251, 111, 122, .14); }
body[data-theme="dark"] .cg-band .cg-data-table th { font-family: var(--eg-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--eg-dim); background: rgba(255, 255, 255, .015) !important; border-color: var(--eg-line); }
body[data-theme="dark"] .cg-band .cg-data-table td { border-color: var(--eg-line); }
body[data-theme="dark"] .cg-band .cg-data-table tbody tr:nth-child(even) { background: transparent; }
body[data-theme="dark"] .cg-band .cg-data-table tbody tr:hover { background: rgba(255, 255, 255, .025); }
body[data-theme="dark"] .cg-band .cg-dt-rank { color: var(--eg-dim); }
body[data-theme="dark"] .cg-band-cta, body[data-theme="dark"] .cg-mod a.cg-hc-more { color: var(--eg-accent) !important; border-color: transparent; background: none; text-transform: none; letter-spacing: 0; font-weight: 600; }
body[data-theme="dark"] .cg-band-foot { color: var(--eg-muted); font-weight: 600; }
body[data-theme="dark"] .cg-band-foot:hover { color: var(--eg-accent); }
body[data-theme="dark"] .cg-mod-rail .cg-gcard { background: var(--eg-surface); border-color: var(--eg-line); border-radius: 12px; }
body[data-theme="dark"] .cg-mod-rail .cg-gcard-rank { background: var(--eg-accent); }
body[data-theme="dark"] .cg-rail-head { font-family: var(--eg-head); font-size: 18px; }

/* ---------- the live strip */
.cg-mod.cg-live-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 18px 0 14px; font-family: var(--eg-ui, inherit); font-size: 12.5px; color: var(--cg-muted); }
.cg-live-strip .cg-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cg-live); box-shadow: 0 0 0 0 rgba(52, 211, 153, .5); animation: cg-live-pulse 2s infinite; }
.cg-live-strip b { color: var(--cg-ink); font-weight: 600; }
.cg-live-strip .cg-live-item + .cg-live-item { padding-left: 14px; border-left: 1px solid var(--cg-hair); }
@keyframes cg-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .5); } 70% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
@media (prefers-reduced-motion: reduce) { .cg-live-strip .cg-live-dot { animation: none; } body[data-theme="dark"] .p-feat img { transition: none; } }
@media (max-width: 767px) {
	.cg-live-strip { font-size: 11.5px; gap: 8px 10px; margin: 12px 0 10px; }
	.cg-live-strip .cg-live-note { display: none; }
	.cg-live-strip .cg-live-item + .cg-live-item { padding-left: 10px; }
	/* the hero's headline at phone width, and the strip's tiles stay a desktop thing */
	body[data-theme="dark"] .p-overlay-1 .entry-title.h1 { font-size: 22px; max-width: none; margin-top: 8px; }
	body[data-theme="dark"] .p-overlay .overlay-holder { padding: 16px 16px 14px; }
	.cg-band-compact .cg-tk-stats { display: none; }
}

/* ---------- desktop_rows: the band shows N rows above 768px, "Show all" lifts it */
@media (min-width: 768px) {
	.cg-band-desk-5:not(.cg-band-expanded) .cg-data-table tbody tr:nth-child(n+6) { display: none; }
	.cg-band-desk-10:not(.cg-band-expanded) .cg-data-table tbody tr:nth-child(n+11) { display: none; }
}
.cg-band-more {
	display: block;
	width: 100%;
	margin: 6px 0 0;
	padding: 12px 18px;
	border: 0;
	border-top: 1px solid var(--cg-hair);
	background: rgba(255, 255, 255, .015);
	color: var(--cg-muted);
	font: 600 12.5px/1 var(--eg-ui, inherit);
	cursor: pointer;
	text-align: center;
}
.cg-band-more:hover { color: var(--cg-accent); }
.cg-band-more:focus-visible { outline: 2px solid var(--cg-accent); outline-offset: -2px; }
@media (max-width: 767px) { .cg-band-more { display: none; } }

/* ---------- compact=1: the tokens band at a third of the width */
.cg-band-compact .cg-tk-wide, .cg-band-compact .cg-tk-game, .cg-band-compact .cg-dt-num.cg-tk-wide { display: none; }
.cg-band-compact .cg-data-table { table-layout: auto; }
.cg-band-compact .cg-tk-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 14px 0 6px; }
.cg-band-compact .cg-tk-stat { padding: 8px 10px; border-radius: 10px; background: var(--eg-raised, var(--cg-surface)); }
.cg-band-compact .cg-tk-stat-label { font-size: 10px; letter-spacing: .06em; margin-bottom: 2px; white-space: nowrap; }
.cg-band-compact .cg-tk-stat-value { font-size: 13px; }
.cg-band-compact .cg-band-title { font-size: 18px !important; }
.cg-band-compact .cg-band-head { flex-wrap: wrap; gap: 6px 12px; }

/* ---------- the homepage's Elementor sections: one ground, one width */
body[data-theme="dark"].home .elementor-section.elementor-top-section { background-color: transparent !important; }
body[data-theme="dark"].home .elementor-section.elementor-section-boxed > .elementor-container { max-width: 1300px; }

/* ---------- the 66/33 dashboard section: the games table fits its two thirds */
@media (min-width: 768px) {
	.elementor-col-66 .cg-band-games .cg-data-table { width: 100%; table-layout: fixed; }
	.elementor-col-66 .cg-band-games .cg-data-table th:nth-child(n+6), .elementor-col-66 .cg-band-games .cg-data-table td:nth-child(n+6) { display: none; } /* mcap + 7d: empty for all but a few */
	.elementor-col-66 .cg-band-games .cg-data-table th:nth-child(1) { width: 36px; }
	.elementor-col-66 .cg-band-games .cg-data-table th:nth-child(3) { width: 170px; }
	.elementor-col-66 .cg-band-games .cg-data-table th:nth-child(4) { width: 140px; }
	.elementor-col-66 .cg-band-games .cg-data-table th:nth-child(5) { width: 104px; }
	.elementor-col-66 .cg-band-games .cg-dt-game { min-width: 0; }
	.elementor-col-66 .cg-band-games .cg-dt-tagline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.elementor-col-66 .cg-band-games .cg-dt-scroll { overflow-x: hidden; }
	/* the compact tokens list at a third: rank · name/symbol stacked · price · 24h · 7-day line */
	.cg-band-compact .cg-data-table { width: 100%; min-width: 0; table-layout: fixed; } /* min-width: native-catalog pins the tokens table at 720px */
	.cg-band-compact .cg-data-table th:nth-child(1) { width: 28px; }
	.cg-band-compact .cg-data-table th:nth-child(3) { width: 74px; }
	.cg-band-compact .cg-data-table th:nth-child(4) { width: 58px; }
	.cg-band-compact .cg-data-table th:nth-child(10) { width: 68px; }
	.cg-band-compact .cg-data-table td, .cg-band-compact .cg-data-table th { padding-left: 6px; padding-right: 6px; font-size: 12px; }
	.cg-band-compact .cg-dt-game { min-width: 0; }
	.cg-band-compact .cg-dt-link { display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
	.cg-band-compact .cg-dt-link .cg-dt-icon { grid-row: 1 / span 2; }
	.cg-band-compact .cg-dt-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-size: 12.5px; line-height: 1.2; }
	.cg-band-compact .cg-tk-symbol { display: block; margin: 0; font-size: 10px; line-height: 1.2; }
	.cg-band-compact .cg-data-table th:nth-child(10) { font-size: 0; }
	.cg-band-compact .cg-data-table th:nth-child(10)::after { content: "7d"; font-size: 11px; }
	.cg-band-compact .cg-dt-icon { width: 26px; height: 26px; }
	.cg-band-compact .cg-band-cta { font-size: 12px; }
}

/* ---------- the 66/33 dashboard section: the two panels share a top edge */
body[data-theme="dark"] .elementor-column .cg-mod.cg-band-games,
body[data-theme="dark"] .elementor-column .cg-mod.cg-band-tokens { margin-top: 0; }