/*
 * BeTube Gaming widget set styles (widgets/gaming-*.php).
 *
 * Every color here comes from the theme's real Theme Options via CSS variables emitted
 * globally by themes/betube/assets/colors.php (betubepro_load_head()) - the one place in
 * this theme where Theme Options become CSS:
 *  - Page canvas background + default text: --btp-gm-body-bg / --btp-gm-body-color, from
 *    Body Background and Body Font color. This is the fix for admins who don't want a
 *    black background - change either option and the whole layout follows, the same as
 *    it already does for every other page on the site.
 *  - Navbar / "panel" sections (Streamers, News, Shorts): --btp-gm-nav-bg/--btp-gm-nav-link
 *    and --btp-gm-topbar-bg/--btp-gm-topbar-link, from Navbar Background/Navbar Link and
 *    Topbar Background/Topbar Link.
 *  - Every accent - buttons, links, badges, live pill, chips, the navbar logo mark, avatar
 *    backgrounds, hover borders, the membership band: --btp-gm-primary/secondary/danger,
 *    from Primary/Secondary/Danger.
 *  - Card/row/thumbnail-placeholder surfaces (guide cards, trending rows, streamer cards,
 *    esports rows, short cards, etc): --btp-gm-surface, a slight lightening of
 *    --btp-gm-body-bg via color-mix() (there's no dedicated "card background" Theme
 *    Option, so this keeps them moving together with Body Background rather than being
 *    frozen at one fixed color).
 * Where a variable feeds a translucent tint, it's declared twice: a static rgba() first
 * as a fallback, then a color-mix() using the real option's variable as the modern
 * override - browsers without color-mix() support just keep the fallback.
 *
 * The literal hex values still visible below (#100d0c, #f5ead8, etc.) are ONLY fallbacks
 * for when a variable is somehow undefined - they are not what actually renders once
 * colors.php's :root block is on the page. Everything here is scoped to these btp-gm-*
 * classes, so none of it can leak onto any other page.
 */
.btp-gm-navbar, .btp-gm-hero, .btp-gm-section, .btp-gm-streamer-card, .btp-gm-esports,
.btp-gm-guide-card, .btp-gm-news, .btp-gm-short-card, .btp-gm-trending, .btp-gm-loadmore-wrap,
.btp-gm-membership {
	font-family: "Figtree", system-ui, sans-serif;
	/* Body Background / Body Font color option pair - this is what puts the layout's
	   canvas and default text in the admin's hands (Appearance > Theme Options). */
	color: var(--btp-gm-body-color, #f5ead8);
	/* An "elevated" card/row tone derived from the real Body Background, since there is
	   no dedicated "card background" Theme Option to bind to directly - lightening
	   Body Background slightly reads as elevation whether the admin's canvas ends up
	   dark or light, and it moves together with Body Background instead of staying
	   frozen at one fixed color. Used by every card/row/thumbnail-placeholder below. */
	--btp-gm-surface: color-mix(in srgb, var(--btp-gm-body-bg, #100d0c) 100%, white 7%);
	--btp-gm-surface-2: color-mix(in srgb, var(--btp-gm-body-bg, #100d0c) 100%, white 4%);
	box-sizing: border-box;
}
/* Navbar/"panel" sections sit on a real Theme Options background (--btp-gm-nav-bg /
   --btp-gm-topbar-bg) - their text follows the matching Navbar Link / Topbar Link
   option instead of the body-color pairing above, so it stays readable and admin-managed
   however those two options are set. */
.btp-gm-navbar { color: var(--btp-gm-nav-link, #f5ead8); }
.btp-gm-section--panel { color: var(--btp-gm-topbar-link, #f5ead8); }
/*
 * The theme's own global "a:hover{ color: ... }" rule (themes/betube/assets/colors.php)
 * has higher CSS specificity (a type selector + a pseudo-class) than a single class like
 * ".btp-gm-trending-row" - so on hover it was overriding every card here that's built as
 * an <a> tag straight back to the theme's default link-hover color (plus its underline),
 * which is the red/underlined text seen on hover instead of the intended card styling.
 * Re-asserting color on :hover with a matching "tag.class:hover" selector restores it -
 * this list is every top-level element in this widget set that's an <a>.
 */
a.btp-gm-navbar__brand,
a.btp-gm-navbar__brand:hover,
a.btp-gm-navbar__brand:visited,
a.btp-gm-queue-item,
a.btp-gm-queue-item:hover,
a.btp-gm-queue-item:visited,
a.btp-gm-game-tile,
a.btp-gm-game-tile:hover,
a.btp-gm-game-tile:visited,
a.btp-gm-trending__hero,
a.btp-gm-trending__hero:hover,
a.btp-gm-trending__hero:visited,
a.btp-gm-trending-row,
a.btp-gm-trending-row:hover,
a.btp-gm-trending-row:visited,
a.btp-gm-streamer-card__name,
a.btp-gm-streamer-card__name:hover,
a.btp-gm-streamer-card__name:visited,
a.btp-gm-guide-card,
a.btp-gm-guide-card:hover,
a.btp-gm-guide-card:visited,
a.btp-gm-news__feature,
a.btp-gm-news__feature:hover,
a.btp-gm-news__feature:visited,
a.btp-gm-news-row,
a.btp-gm-news-row:hover,
a.btp-gm-news-row:visited,
a.btp-gm-card,
a.btp-gm-card:hover,
a.btp-gm-card:visited,
a.btp-gm-short-card,
a.btp-gm-short-card:hover,
a.btp-gm-short-card:visited,
a.btp-gm-live-card,
a.btp-gm-live-card:hover,
a.btp-gm-live-card:visited {
	color: inherit !important;
	text-decoration: none !important;
}
.btp-gm-navbar *, .btp-gm-hero *, .btp-gm-section *, .btp-gm-streamer-card *, .btp-gm-esports *,
.btp-gm-guide-card *, .btp-gm-news *, .btp-gm-short-card *, .btp-gm-trending *, .btp-gm-loadmore-wrap * {
	box-sizing: border-box;
}
.btp-gm-hero__title, .btp-gm-section__title, .btp-gm-trending__hero_title, .btp-gm-esports__feature_title,
.btp-gm-navbar__logo-text {
	font-family: "Caprasimo", system-ui, sans-serif;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0;
}
@keyframes btp-gm-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.45; transform: scale(0.82); }
}

/* ---------- shared atoms ---------- */
.btp-gm-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: 0;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	padding: 12px 22px;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s, transform 0.15s;
}
.btp-gm-btn--primary {
	background: var(--btp-gm-primary, #d67f48);
	color: #20140d;
}
.btp-gm-btn--primary:hover {
	filter: brightness(1.12);
	color: #20140d;
}
.btp-gm-btn--lg {
	font-family: "Caprasimo", system-ui, sans-serif;
	font-size: 16px;
	padding: 15px 26px;
}
.btp-gm-btn--ghost {
	background: rgba(245, 234, 216, 0.06);
	border: 1px solid rgba(245, 234, 216, 0.2);
	color: var(--btp-gm-body-color, #f5ead8);
}
.btp-gm-btn--ghost:hover {
	background: rgba(245, 234, 216, 0.13);
	color: var(--btp-gm-body-color, #f5ead8);
}
.btp-gm-btn--outline {
	background: transparent;
	border: 1px solid rgba(245, 234, 216, 0.22);
	color: var(--btp-gm-body-color, #f5ead8);
}
.btp-gm-btn--sm {
	padding: 8px 16px;
	font-size: 12.5px;
}
.btp-gm-btn:disabled {
	opacity: 0.7;
	cursor: default;
}
.btp-gm-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--btp-gm-primary, #d67f48);
	color: #20140d;
	font-size: 13px;
	font-weight: 800;
}
.btp-gm-avatar--nav { width: 36px; height: 36px; text-decoration: none; }
.btp-gm-avatar--xs { width: 20px; height: 20px; font-size: 9px; }
.btp-gm-avatar--sm { width: 30px; height: 30px; font-size: 11px; }
.btp-gm-avatar--lg { width: 46px; height: 46px; font-size: 15px; }
.btp-gm-avatar--xl { width: 62px; height: 62px; font-size: 19px; margin-top: -32px; border: 3px solid #1c1613; box-shadow: 0 0 0 2px var(--btp-gm-danger, #e04a2f); }
/* Real profile image instead of initials (betube_gaming_avatar_url()) - the <img> fills
   the same circle every .btp-gm-avatar size already defines, cropped to match. */
.btp-gm-avatar--img { background: transparent; padding: 0; overflow: hidden; }
.btp-gm-avatar--img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.btp-gm-chip {
	display: inline-flex;
	align-items: center;
	background: rgba(16, 13, 12, 0.8);
	border-radius: 8px;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #f5ead8;
	backdrop-filter: blur(6px);
}
.btp-gm-chip--accent {
	background: rgba(214, 127, 72, 0.92);
	background: color-mix(in srgb, var(--btp-gm-primary, #d67f48) 92%, transparent);
	color: #20140d;
}
.btp-gm-chip--muted { background: rgba(245, 234, 216, 0.08); color: rgba(245, 234, 216, 0.6); }
.btp-gm-live-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--btp-gm-danger, #e04a2f);
	color: #fff;
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}
.btp-gm-live-pill--sm { padding: 3px 9px; border-radius: 8px; }
.btp-gm-pulse {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: #fff;
	animation: btp-gm-pulse 1.8s ease-in-out infinite;
}
.btp-gm-dot-sep {
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 999px;
	background: rgba(245, 234, 216, 0.35);
	margin: 0 6px;
	vertical-align: middle;
}
.btp-gm-play-circle {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: rgba(214, 127, 72, 0.94);
	background: color-mix(in srgb, var(--btp-gm-primary, #d67f48) 94%, transparent);
	color: #20140d;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}
.btp-gm-rank-badge {
	font-family: "Caprasimo", system-ui, sans-serif;
	font-size: 20px;
	color: var(--btp-gm-primary, #f6a06b);
	background: rgba(16, 13, 12, 0.78);
	border-radius: 10px;
	padding: 3px 12px;
}
.btp-gm-arrow-pair { display: flex; gap: 8px; }
.btp-gm-arrow-btn {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid rgba(245, 234, 216, 0.2);
	background: rgba(245, 234, 216, 0.05);
	color: #f5ead8;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.btp-gm-arrow-btn:hover { background: rgba(245, 234, 216, 0.13); }

/* ---------- Navbar ---------- */
.btp-gm-navbar {
	position: sticky;
	top: 0;
	z-index: 60;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	background: rgba(16, 13, 12, 0.9);
	background: color-mix(in srgb, var(--btp-gm-nav-bg, #100d0c) 90%, transparent);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(245, 234, 216, 0.09);
	padding: 14px 32px;
}
.btp-gm-navbar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex-shrink: 0; }
.btp-gm-navbar__logo-img { max-height: 32px; width: auto; }
.btp-gm-navbar__logo-mark { width: 34px; height: 34px; border-radius: 12px; background: var(--btp-gm-primary, #d67f48); display: flex; align-items: center; justify-content: center; color: #20140d; }
.btp-gm-navbar__logo-text { font-size: 20px; }
.btp-gm-dot { color: var(--btp-gm-primary, #f6a06b); }
.btp-gm-navbar__badge { font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--btp-gm-secondary, #aebf92); border: 1px solid rgba(174, 191, 146, 0.35); border-radius: 999px; padding: 3px 8px; }
.btp-gm-navbar__links { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.btp-gm-navbar__links::-webkit-scrollbar { display: none; }
.btp-gm-navbar__links a { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: rgba(245, 234, 216, 0.68); text-decoration: none; white-space: nowrap; }
.btp-gm-navbar__links a:hover { background: rgba(245, 234, 216, 0.08); color: var(--btp-gm-nav-link, #f5ead8); }
.btp-gm-navbar__links a.is-active { color: #201e1d; background: #f5ead8; font-weight: 700; }
.btp-gm-navbar__spacer { flex: 1 1 auto; min-width: 8px; }
.btp-gm-navbar__search { display: flex; align-items: center; gap: 9px; background: rgba(245, 234, 216, 0.06); border: 1px solid rgba(245, 234, 216, 0.1); border-radius: 999px; padding: 9px 16px; flex: 0 1 280px; min-width: 44px; color: rgba(245, 234, 216, 0.5); }
.btp-gm-navbar__search input { all: unset; flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: inherit; }
.btp-gm-navbar__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
@media (max-width: 900px) {
	.btp-gm-navbar__links { order: 3; flex-basis: 100%; }
}

/* ---------- Hero ---------- */
.btp-gm-hero {
	position: relative;
	overflow: hidden;
	/* Solid Body Background, not the previous 3-stop gradient (only its last stop was
	   ever tied to the option, so most of the hero still showed the fixed warm literal
	   regardless of what Body Background was set to). The featured image + scrim above
	   still provide the visual depth; this is just the base layer underneath them. */
	background: var(--btp-gm-body-bg, #14100e);
	border-bottom: 1px solid rgba(245, 234, 216, 0.07);
}
.btp-gm-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
/* The bottom fade has to match --btp-gm-body-bg exactly (not a fixed near-black) so the
   hero blends seamlessly into the section below it whatever the admin sets that option to. */
.btp-gm-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,13,12,0.94) 0%, rgba(16,13,12,0.72) 45%, rgba(16,13,12,0.35) 100%), linear-gradient(0deg, var(--btp-gm-body-bg, #100d0c) 0%, transparent 55%); }
.btp-gm-hero__inner { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 40px; align-items: end; padding: 56px 32px 40px; max-width: 1480px; margin: 0 auto; }
.btp-gm-hero__tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.btp-gm-hero__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245, 234, 216, 0.5); }
.btp-gm-hero__title { font-size: clamp(34px, 5vw, 66px); margin-bottom: 18px; }
.btp-gm-hero__desc { font-size: 16px; line-height: 1.6; color: rgba(245, 234, 216, 0.72); max-width: 560px; margin: 0 0 24px; }
.btp-gm-hero__cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.btp-gm-hero__stats { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding-top: 20px; border-top: 1px solid rgba(245, 234, 216, 0.12); font-size: 13px; color: rgba(245, 234, 216, 0.6); }
.btp-gm-hero__queue { display: flex; flex-direction: column; gap: 12px; max-width: 460px; width: 100%; justify-self: end; }
.btp-gm-hero__queue_label { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245, 234, 216, 0.55); margin-bottom: 2px; }
.btp-gm-queue-item { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: 18px; background: rgba(245, 234, 216, 0.05); border: 1px solid rgba(245, 234, 216, 0.09); text-decoration: none; color: inherit; }
.btp-gm-queue-item:hover { background: rgba(245, 234, 216, 0.1); border-color: rgba(214, 127, 72, 0.4); border-color: color-mix(in srgb, var(--btp-gm-primary, #d67f48) 40%, transparent); }
.btp-gm-queue-item__thumb { position: relative; width: 120px; flex-shrink: 0; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: var(--btp-gm-surface, #14100e); }
.btp-gm-queue-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.btp-gm-queue-item__dur { position: absolute; right: 6px; bottom: 6px; background: rgba(16, 13, 12, 0.85); border-radius: 6px; padding: 2px 5px; font-size: 10px; font-weight: 700; }
.btp-gm-queue-item__meta { min-width: 0; }
.btp-gm-queue-item__title { display: block; font-size: 14px; font-weight: 700; line-height: 1.35; margin-bottom: 4px; }
.btp-gm-queue-item__sub { display: block; font-size: 12px; color: rgba(245, 234, 216, 0.55); }

/* ---------- Section shell ---------- */
/*
 * Real bug fix: this rule never actually set a background, so on the Home Layout
 * Manager delivery path (no Elementor section wrapping it at all) and on any Elementor
 * section left at its default transparent background, the site's real (non-gaming)
 * Body Background color option showed straight through - that's the blue-gray seen
 * behind Guides/Trending/etc. Giving it the same fixed dark canvas literal as the
 * navbar/hero/panel sections makes every section dark by default on both delivery
 * paths; an Elementor section background set manually still overrides it either way.
 */
.btp-gm-section {
	padding: 56px 32px;
	background: var(--btp-gm-body-bg, #100d0c);
}
/* Content stays constrained/centered via the direct children, not the section itself,
   so the dark background always spans the full viewport width (edge to edge) regardless
   of the surrounding page width - matters most on the Home Layout Manager delivery path,
   where there's no Elementor container to constrain the section from the outside. */
.btp-gm-section > * {
	max-width: 1480px;
	margin-left: auto;
	margin-right: auto;
}
.btp-gm-section--panel {border-top: 1px solid rgba(245, 234, 216, 0.07); border-bottom: 1px solid rgba(245, 234, 216, 0.07); }
.btp-gm-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.btp-gm-section__title { font-size: clamp(26px, 3.2vw, 38px); }

/* ---------- Games grid ---------- */
.btp-gm-games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 18px; }
.btp-gm-game-tile { position: relative; display: block; aspect-ratio: 3/4; border-radius: 20px; overflow: hidden; background: linear-gradient(160deg, var(--btp-gm-tile-accent, #4a2a1b) 0%, var(--btp-gm-surface, #14100e) 78%); border: 1px solid rgba(245, 234, 216, 0.09); text-decoration: none; transition: transform 0.2s, border-color 0.2s; }
.btp-gm-game-tile:hover { transform: translateY(-4px); border-color: var(--btp-gm-tile-accent, #d67f48); }
.btp-gm-game-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.btp-gm-game-tile__glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: "Caprasimo", system-ui, sans-serif; font-size: 26px; text-transform: uppercase; color: rgba(245, 234, 216, 0.3); text-align: center; padding: 0 8px; }
.btp-gm-game-tile__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(16,13,12,0.96) 0%, rgba(16,13,12,0.35) 45%, transparent 75%);
	background: linear-gradient(0deg, color-mix(in srgb, var(--btp-gm-body-bg, #100d0c) 96%, transparent) 0%, color-mix(in srgb, var(--btp-gm-body-bg, #100d0c) 35%, transparent) 45%, transparent 75%);
}
.btp-gm-game-tile__info { position: absolute; left: 14px; right: 14px; bottom: 14px; }
.btp-gm-game-tile__name { display: block; font-size: 16px; font-weight: 800; margin-bottom: 4px; color: #f5ead8; }
.btp-gm-game-tile__count { font-size: 12px; color: rgba(245, 234, 216, 0.6); }

/* ---------- Trending ---------- */
.btp-gm-trending { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); gap: 28px; align-items: start; }
.btp-gm-trending__hero { display: block; text-decoration: none; color: inherit; }
.btp-gm-trending__hero_thumb { position: relative; display: block; aspect-ratio: 16/9; border-radius: 22px; overflow: hidden; background: var(--btp-gm-surface, #1a1513); border: 1px solid rgba(245, 234, 216, 0.1); }
.btp-gm-trending__hero_thumb img { width: 100%; height: 100%; object-fit: cover; }
.btp-gm-trending__hero_scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(16,13,12,0.72) 0%, transparent 55%); }
.btp-gm-trending__hero_top { position: absolute; left: 16px; top: 16px; display: flex; align-items: center; gap: 8px; }
.btp-gm-trending__hero_dur { position: absolute; right: 14px; bottom: 14px; background: rgba(16, 13, 12, 0.88); border-radius: 10px; padding: 5px 10px; font-size: 12px; font-weight: 700; }
.btp-gm-trending__hero_body { display: flex; gap: 14px; padding: 18px 4px 0; }
.btp-gm-trending__hero_meta { min-width: 0; }
.btp-gm-trending__hero_title { display: block; font-size: clamp(19px, 2.1vw, 24px); margin-bottom: 8px; }
.btp-gm-trending__hero_stats { font-size: 13px; color: rgba(245, 234, 216, 0.58); }
.btp-gm-trending__list { display: flex; flex-direction: column; gap: 12px; }
.btp-gm-trending-row { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 18px; border: 1px solid rgba(245, 234, 216, 0.08); background: var(--btp-gm-surface, #1a1513); text-decoration: none; color: inherit; }
.btp-gm-trending-row:hover { border-color: rgba(214, 127, 72, 0.5); border-color: color-mix(in srgb, var(--btp-gm-primary, #d67f48) 50%, transparent); background: var(--btp-gm-surface-2, #221a16); }
.btp-gm-trending-row__rank { font-family: "Caprasimo", system-ui, sans-serif; font-size: 18px; color: rgba(245, 234, 216, 0.35); width: 22px; text-align: center; flex-shrink: 0; }
.btp-gm-trending-row__thumb { position: relative; width: clamp(110px, 15vw, 150px); flex-shrink: 0; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: var(--btp-gm-surface, #14100e); }
.btp-gm-trending-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.btp-gm-trending-row__dur { position: absolute; right: 6px; bottom: 6px; background: rgba(16, 13, 12, 0.85); border-radius: 6px; padding: 2px 6px; font-size: 10px; font-weight: 700; }
.btp-gm-trending-row__meta { min-width: 0; }
.btp-gm-trending-row__title { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.35; margin-bottom: 5px; }
.btp-gm-trending-row__sub { display: block; font-size: 12px; color: rgba(245, 234, 216, 0.55); }

/* ---------- Streamers ---------- */
.btp-gm-streamers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.btp-gm-streamer-card { border-radius: 22px; background: var(--btp-gm-surface, #1c1613); border: 1px solid rgba(245, 234, 216, 0.09); overflow: hidden; }
.btp-gm-streamer-card__banner {
	height: 70px;
	background: linear-gradient(120deg, #3b241c, #16110f);
	background: linear-gradient(120deg, var(--btp-gm-surface, #3b241c), var(--btp-gm-topbar-bg, #16110f));
}
.btp-gm-streamer-card__body { padding: 0 18px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.btp-gm-streamer-card__name { display: block; font-size: 16px; font-weight: 800; margin: 12px 0 4px; color: inherit; text-decoration: none; }
.btp-gm-streamer-card__sub { display: block; font-size: 12.5px; color: rgba(245, 234, 216, 0.55); margin-bottom: 14px; }
.btp-gm-follow-btn { width: 100%; border: 0; border-radius: 999px; background: var(--btp-gm-primary, #d67f48); color: #20140d; font-size: 13.5px; font-weight: 800; padding: 10px 14px; cursor: pointer; }
.btp-gm-follow-btn:hover { filter: brightness(1.12); }
.btp-gm-follow-btn.is-following { background: rgba(245, 234, 216, 0.08); color: inherit; border: 1px solid rgba(245, 234, 216, 0.2); }

/* ---------- Esports ---------- */
.btp-gm-esports { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 22px; align-items: stretch; }
.btp-gm-esports__feature {
	position: relative; border-radius: 26px; overflow: hidden; min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; background: var(--btp-gm-surface, #14100e);
	border: 1px solid rgba(224, 74, 47, 0.4);
	border-color: color-mix(in srgb, var(--btp-gm-danger, #e04a2f) 40%, transparent);
}
.btp-gm-esports__feature_bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.btp-gm-esports__feature_scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(16,13,12,0.96) 10%, rgba(16,13,12,0.5) 55%, rgba(16,13,12,0.2) 100%); }
.btp-gm-esports__feature_top { position: relative; display: flex; align-items: center; gap: 10px; padding: 20px 24px 0; }
.btp-gm-esports__feature_body { position: relative; padding: 24px; }
.btp-gm-esports__feature_eyebrow { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #ff9b7f; margin-bottom: 10px; }
.btp-gm-esports__feature_title { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 18px; }
.btp-gm-esports__score { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.btp-gm-esports__team { display: flex; align-items: center; gap: 10px; }
.btp-gm-esports__score_num { font-family: "Caprasimo", system-ui, sans-serif; font-size: 24px; }
.btp-gm-esports__vs { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: rgba(245, 234, 216, 0.45); }
.btp-gm-esports__viewers { font-size: 12px; color: rgba(245, 234, 216, 0.6); margin-left: auto; }
.btp-gm-esports__list { display: flex; flex-direction: column; gap: 14px; }
.btp-gm-esports-row { border-radius: 20px; background: var(--btp-gm-surface, #1a1513); border: 1px solid rgba(245, 234, 216, 0.09); padding: 16px 18px; }
.btp-gm-esports-row__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.btp-gm-esports-row__round { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(245, 234, 216, 0.5); }
.btp-gm-esports-row__bottom { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btp-gm-esports-row__team { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; }
.btp-gm-esports-row__score { font-family: "Caprasimo", system-ui, sans-serif; font-size: 17px; color: var(--btp-gm-primary, #f6a06b); }

/* ---------- Guides ---------- */
.btp-gm-guides-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.btp-gm-guide-card { display: block; border-radius: 20px; background: var(--btp-gm-surface, #1a1513); border: 1px solid rgba(245, 234, 216, 0.09); overflow: hidden; text-decoration: none; color: inherit; }
.btp-gm-guide-card:hover { border-color: rgba(174, 191, 146, 0.55); }
.btp-gm-guide-card__thumb { position: relative; display: block; aspect-ratio: 16/9; background: var(--btp-gm-surface, #14100e); }
.btp-gm-guide-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.btp-gm-guide-card__tag { position: absolute; left: 12px; top: 12px; }
.btp-gm-guide-card__dur { position: absolute; right: 10px; bottom: 10px; background: rgba(16, 13, 12, 0.85); border-radius: 7px; padding: 3px 8px; font-size: 11px; font-weight: 700; }
.btp-gm-guide-card__body { display: block; padding: 15px 16px 16px; }
.btp-gm-guide-card__title { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; margin-bottom: 8px; }
.btp-gm-guide-card__sub { font-size: 12px; color: rgba(245, 234, 216, 0.55); }

/* ---------- News ---------- */
.btp-gm-news { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 22px; }
.btp-gm-news__feature { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; border-radius: 24px; overflow: hidden; border: 1px solid rgba(245, 234, 216, 0.1); text-decoration: none; color: inherit; background: var(--btp-gm-surface, #14100e); }
.btp-gm-news__feature_bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.btp-gm-news__feature_scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(16,13,12,0.96) 8%, rgba(16,13,12,0.45) 58%, rgba(16,13,12,0.15) 100%); }
.btp-gm-news__feature_body { position: relative; padding: 26px; display: block; }
.btp-gm-news__feature_title { display: block; font-family: "Caprasimo", system-ui, sans-serif; font-size: clamp(22px, 2.8vw, 30px); line-height: 1.1; margin: 12px 0; }
.btp-gm-news__feature_desc { display: block; font-size: 14px; color: rgba(245, 234, 216, 0.7); margin-bottom: 12px; }
.btp-gm-news__feature_meta { font-size: 12px; color: rgba(245, 234, 216, 0.55); }
.btp-gm-news__list { display: flex; flex-direction: column; gap: 12px; }
.btp-gm-news-row { display: flex; gap: 16px; align-items: center; padding: 12px; border-radius: 18px; border: 1px solid rgba(245, 234, 216, 0.08); background: var(--btp-gm-surface, #1c1613); text-decoration: none; color: inherit; }
.btp-gm-news-row:hover { border-color: rgba(214, 127, 72, 0.5); border-color: color-mix(in srgb, var(--btp-gm-primary, #d67f48) 50%, transparent); }
.btp-gm-news-row__thumb { position: relative; width: 110px; flex-shrink: 0; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; background: var(--btp-gm-surface-2, #14100e); }
.btp-gm-news-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.btp-gm-news-row__meta { min-width: 0; }
.btp-gm-news-row__tag { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--btp-gm-primary, #f6a06b); margin-bottom: 6px; }
.btp-gm-news-row__title { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.35; margin-bottom: 5px; }
.btp-gm-news-row__date { font-size: 11.5px; color: rgba(245, 234, 216, 0.5); }

/* ---------- Latest videos grid + card (also used by trending's card look) ---------- */
.btp-gm-latest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; margin-bottom: 24px; }
.btp-gm-card { display: block; text-decoration: none; color: inherit; }
.btp-gm-card__thumb { position: relative; display: block; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; background: var(--btp-gm-surface, #1a1513); border: 1px solid rgba(245, 234, 216, 0.09); }
.btp-gm-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.btp-gm-card:hover .btp-gm-card__thumb img { transform: scale(1.05); }
.btp-gm-card__badge { position: absolute; left: 10px; top: 10px; background: rgba(16, 13, 12, 0.78); backdrop-filter: blur(6px); border-radius: 8px; padding: 4px 9px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.btp-gm-card__duration { position: absolute; right: 10px; bottom: 10px; background: rgba(16, 13, 12, 0.86); border-radius: 7px; padding: 3px 8px; font-size: 11px; font-weight: 700; }
.btp-gm-card__body { display: flex; gap: 12px; padding: 13px 2px 0; }
.btp-gm-card__meta { min-width: 0; }
.btp-gm-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; font-weight: 700; line-height: 1.38; margin-bottom: 5px; }
.btp-gm-card__channel { display: block; font-size: 12.5px; color: rgba(245, 234, 216, 0.55); margin-bottom: 2px; }
.btp-gm-card__stats { display: block; font-size: 12px; color: rgba(245, 234, 216, 0.42); }
.btp-gm-loadmore-wrap { display: flex; justify-content: center; }
.btp-gm-loadmore-spinner { display: none; }
.btp-gm-loadmore:disabled .btp-gm-loadmore-spinner { display: inline-block; }

/* ---------- Shorts ---------- */
.btp-gm-shorts-track { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; padding: 4px 4px 10px; scroll-snap-type: x mandatory; }
.btp-gm-shorts-track::-webkit-scrollbar { display: none; }
.btp-gm-short-card { position: relative; display: block; flex: 0 0 auto; width: clamp(170px, 15vw, 210px); aspect-ratio: 9/16; border-radius: 20px; overflow: hidden; background: var(--btp-gm-surface, #14100e); border: 1px solid rgba(245, 234, 216, 0.1); scroll-snap-align: start; text-decoration: none; color: inherit; }
.btp-gm-short-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.btp-gm-short-card__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(16,13,12,0.92) 0%, transparent 55%); }
.btp-gm-short-card__dur { position: absolute; right: 10px; top: 10px; background: rgba(16, 13, 12, 0.8); border-radius: 8px; padding: 3px 7px; font-size: 10px; font-weight: 700; }
.btp-gm-short-card__body { position: absolute; left: 12px; right: 12px; bottom: 12px; }
.btp-gm-short-card__title { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; }
.btp-gm-short-card__sub { display: flex; align-items: center; gap: 7px; font-size: 11px; color: rgba(245, 234, 216, 0.65); }

/* ---------- Live now ---------- */
.btp-gm-live-count { font-size: 13px; font-weight: 700; color: var(--btp-gm-body-color, #f5ead8); opacity: 0.6; margin-left: 10px; }
.btp-gm-section__head h2.btp-gm-section__title { flex-basis: 100%; margin-top: 10px; }
.btp-gm-live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.btp-gm-live-card { display: block; border-radius: 22px; background: var(--btp-gm-surface, #1a1513); border: 1px solid rgba(245, 234, 216, 0.09); padding: 10px; transition: border-color 0.18s, transform 0.18s; }
.btp-gm-live-card:hover { border-color: var(--btp-gm-danger, #e04a2f); transform: translateY(-3px); }
.btp-gm-live-card__thumb { position: relative; display: block; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; background: var(--btp-gm-surface-2, #14100e); }
.btp-gm-live-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.btp-gm-live-card__thumb .btp-gm-live-pill { position: absolute; left: 10px; top: 10px; }
.btp-gm-live-card__viewers { position: absolute; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px; background: rgba(16, 13, 12, 0.82); backdrop-filter: blur(8px); border-radius: 8px; padding: 4px 8px; font-size: 11px; font-weight: 700; }
.btp-gm-live-card__body { display: flex; gap: 12px; padding: 14px 6px 8px; }
.btp-gm-live-card__meta { min-width: 0; }
.btp-gm-live-card__title { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; margin-bottom: 5px; }
.btp-gm-live-card__sub { display: block; font-size: 12.5px; color: rgba(245, 234, 216, 0.55); }

/* ---------- Membership band (Paid Memberships Pro) ---------- */
.btp-gm-membership { padding: 24px 32px; max-width: 1480px; margin: 0 auto; font-family: "Figtree", system-ui, sans-serif; }
.btp-gm-membership__band {
	display: flex; align-items: center; gap: 22px; flex-wrap: wrap; border-radius: 26px; padding: 26px 30px;
	background: linear-gradient(100deg, rgba(214, 127, 72, 0.16), rgba(86, 99, 63, 0.16));
	background: linear-gradient(100deg, color-mix(in srgb, var(--btp-gm-primary, #d67f48) 16%, transparent), color-mix(in srgb, var(--btp-gm-secondary, #aebf92) 16%, transparent));
	border: 1px solid rgba(214, 127, 72, 0.32);
	border-color: color-mix(in srgb, var(--btp-gm-primary, #d67f48) 32%, transparent);
}
.btp-gm-membership__icon {
	width: 52px; height: 52px; border-radius: 999px; color: #20140d; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
	background: rgba(214, 127, 72, 0.9);
	background: color-mix(in srgb, var(--btp-gm-primary, #d67f48) 90%, transparent);
}
.btp-gm-membership__body { flex: 1 1 260px; min-width: 0; }
.btp-gm-membership__title { display: block; font-family: "Caprasimo", system-ui, sans-serif; font-size: clamp(19px, 2.2vw, 24px); color: inherit; margin-bottom: 6px; }
.btp-gm-membership__desc { display: block; font-size: 14px; color: rgba(245, 234, 216, 0.65); }
.btp-gm-membership__cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Reused pill-bar widget (betube-yt-categories-bar), placed on this page ---------- */
.btp-gaming-home .btp-yt-catbar__pill { background: rgba(245, 234, 216, 0.04); border: 1px solid rgba(245, 234, 216, 0.09); font-family: "Figtree", system-ui, sans-serif; }
.btp-gaming-home .btp-yt-catbar__pill.is-active { background: var(--btp-gm-primary, #d67f48); color: #20140d; }

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
	.btp-gm-navbar, .btp-gm-section, .btp-gm-hero__inner { padding-left: 18px; padding-right: 18px; }
	.btp-gm-trending, .btp-gm-esports { grid-template-columns: 1fr; }
}