/*
Theme Name:        GameCreatorX Theme
Theme URI:         https://gamecreatorx.com/gamecreatorx-theme
Author:            GameCreatorX
Author URI:        https://gamecreatorx.com
Description:       A professional, production-ready HTML5 Gaming Platform theme built specifically for the GameCreatorX ecosystem — a modern, dark-gaming-styled Home, Games, Single Game, Categories, Search, News, About, Contact, Archive, and Author experience. Reads GCX Upload Manager's own public game data (when active) through a read-only integration bridge and never modifies GCX Upload Manager, GCX Control Center, or GCX Engine. Fully functional as a standalone WordPress theme even when no GameCreatorX plugin is installed.
Version:           1.6.4
Requires at least: 6.0
Tested up to:      6.6
Requires PHP:      8.1
License:           GPL v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       gamecreatorx-theme
Tags:              two-columns, right-sidebar, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, dark-mode, grid-layout

GameCreatorX Theme is an original, independent WordPress theme. It is not
based on, and shares no code with, any existing theme. It integrates with
GCX Upload Manager as a strictly read-only consumer of its public game
data (Games_Table, Categories_Table, Tags_Table, Game/Category/Tag models,
Stats_Service, and its own shortcodes) and never edits, requires, or
duplicates that plugin's own database tables or admin screens. It has no
integration whatsoever with GCX Control Center's admin area, by design.
*/

/* ==========================================================================
   0. DESIGN TOKENS
   ========================================================================== */

:root {
	--gcxt-primary: #7c3aed;
	--gcxt-primary-rgb: 124, 58, 237;
	--gcxt-secondary: #06b6d4;
	--gcxt-secondary-rgb: 6, 182, 212;
	--gcxt-accent: #f43f5e;

	--gcxt-bg: #0b0e17;
	--gcxt-bg-elevated: #12172a;
	--gcxt-bg-card: #161c30;
	--gcxt-bg-glass: rgba(22, 28, 48, 0.6);
	--gcxt-border: rgba(255, 255, 255, 0.08);
	--gcxt-text: #f3f4f8;
	--gcxt-text-muted: #9aa1b9;
	--gcxt-text-dim: #656d87;

	--gcxt-radius-sm: 8px;
	--gcxt-radius: 14px;
	--gcxt-radius-lg: 22px;
	--gcxt-radius-pill: 999px;

	--gcxt-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
	--gcxt-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
	--gcxt-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45);
	--gcxt-shadow-glow: 0 0 0 1px rgba(var(--gcxt-primary-rgb), 0.35), 0 8px 30px rgba(var(--gcxt-primary-rgb), 0.25);

	--gcxt-gradient-primary: linear-gradient(135deg, var(--gcxt-primary) 0%, var(--gcxt-secondary) 100%);
	--gcxt-gradient-accent: linear-gradient(135deg, var(--gcxt-accent) 0%, var(--gcxt-primary) 100%);
	--gcxt-gradient-dark: linear-gradient(180deg, rgba(11, 14, 23, 0) 0%, rgba(11, 14, 23, 0.95) 100%);

	--gcxt-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", Helvetica, Arial, sans-serif;
	--gcxt-font-heading: "Poppins", var(--gcxt-font-body);

	--gcxt-container: 1320px;
	--gcxt-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
	--gcxt-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.gcxt-light-mode {
	--gcxt-bg: #f5f6fb;
	--gcxt-bg-elevated: #ffffff;
	--gcxt-bg-card: #ffffff;
	--gcxt-bg-glass: rgba(255, 255, 255, 0.7);
	--gcxt-border: rgba(15, 18, 30, 0.08);
	--gcxt-text: #14172a;
	--gcxt-text-muted: #565d78;
	--gcxt-text-dim: #8891ac;
	--gcxt-shadow-sm: 0 2px 8px rgba(20, 23, 42, 0.06);
	--gcxt-shadow: 0 8px 30px rgba(20, 23, 42, 0.08);
	--gcxt-shadow-lg: 0 20px 60px rgba(20, 23, 42, 0.12);
}

/* ==========================================================================
   1. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--gcxt-bg);
	color: var(--gcxt-text);
	font-family: var(--gcxt-font-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	transition: background var(--gcxt-transition), color var(--gcxt-transition);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--gcxt-font-heading);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 0.6em;
	color: var(--gcxt-text);
}

h1 { font-size: clamp(1.9rem, 3vw + 1rem, 3.2rem); }
h2 { font-size: clamp(1.5rem, 2vw + 1rem, 2.3rem); }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1em; color: var(--gcxt-text-muted); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.screen-reader-text:focus {
	position: fixed !important;
	top: 8px; left: 8px;
	width: auto; height: auto;
	padding: 12px 20px; z-index: 100000;
	background: var(--gcxt-primary); color: #fff;
	border-radius: var(--gcxt-radius-sm);
	clip: auto; white-space: normal;
}

:focus-visible {
	outline: 2px solid var(--gcxt-secondary);
	outline-offset: 3px;
}

.gcxt-container {
	max-width: var(--gcxt-container);
	margin: 0 auto;
	padding: 0 24px;
}

/* ==========================================================================
   2. LAYOUT / GRID SYSTEM
   ========================================================================== */

.gcxt-site { display: flex; flex-direction: column; min-height: 100vh; }
.gcxt-main { flex: 1 0 auto; }

.gcxt-content-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	padding: 48px 0 80px;
}
.gcxt-content-layout.has-sidebar {
	grid-template-columns: minmax(0, 1fr) 320px;
}
@media (max-width: 900px) {
	.gcxt-content-layout.has-sidebar { grid-template-columns: minmax(0, 1fr); }
}

.gcxt-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.gcxt-grid.gcxt-grid-list { grid-template-columns: 1fr; }
.gcxt-grid-4 { grid-template-columns: repeat(4, 1fr); }
.gcxt-grid-3 { grid-template-columns: repeat(3, 1fr); }
.gcxt-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .gcxt-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
	.gcxt-grid-4, .gcxt-grid-3, .gcxt-grid-2 { grid-template-columns: 1fr; }
}

.gcxt-section { padding: 64px 0; }
.gcxt-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}
.gcxt-section-head .gcxt-eyebrow {
	display: block;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gcxt-secondary);
	font-weight: 700;
	margin-bottom: 6px;
}
.gcxt-section-head h2 { margin: 0; }
.gcxt-section-link {
	color: var(--gcxt-secondary);
	font-weight: 600;
	white-space: nowrap;
}
.gcxt-section-link:hover { text-decoration: underline; }

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */

.gcxt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: var(--gcxt-radius-pill);
	font-weight: 600;
	font-size: 0.95rem;
	border: 1px solid transparent;
	transition: transform var(--gcxt-transition), box-shadow var(--gcxt-transition), background var(--gcxt-transition), opacity var(--gcxt-transition);
	white-space: nowrap;
}
.gcxt-btn:hover { transform: translateY(-2px); }
.gcxt-btn:active { transform: translateY(0); }
.gcxt-btn-primary {
	background: var(--gcxt-gradient-primary);
	color: #fff;
	box-shadow: var(--gcxt-shadow-glow);
}
.gcxt-btn-secondary {
	background: var(--gcxt-bg-card);
	color: var(--gcxt-text);
	border-color: var(--gcxt-border);
}
.gcxt-btn-secondary:hover { border-color: var(--gcxt-secondary); }
.gcxt-btn-ghost {
	background: transparent;
	color: var(--gcxt-text);
	border-color: var(--gcxt-border);
}
.gcxt-btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.gcxt-btn-block { width: 100%; }
.gcxt-btn[disabled], .gcxt-btn.is-disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ==========================================================================
   4. CARDS (rounded / glass / shadow)
   ========================================================================== */

.gcxt-card {
	background: var(--gcxt-bg-card);
	border: 1px solid var(--gcxt-border);
	border-radius: var(--gcxt-radius);
	box-shadow: var(--gcxt-shadow-sm);
	transition: transform var(--gcxt-transition-slow), box-shadow var(--gcxt-transition-slow), border-color var(--gcxt-transition);
	overflow: hidden;
}
.gcxt-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--gcxt-shadow-lg);
	border-color: rgba(var(--gcxt-primary-rgb), 0.4);
}
.gcxt-glass {
	background: var(--gcxt-bg-glass);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid var(--gcxt-border);
	border-radius: var(--gcxt-radius);
}

/* Game card */
.gcxt-game-card { display: flex; flex-direction: column; height: 100%; }
.gcxt-game-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--gcxt-bg-elevated);
}
.gcxt-game-card__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform var(--gcxt-transition-slow);
}
.gcxt-game-card:hover .gcxt-game-card__media img { transform: scale(1.08); }
.gcxt-game-card__badges {
	position: absolute; top: 10px; left: 10px;
	display: flex; gap: 6px; flex-wrap: wrap;
}
.gcxt-badge {
	padding: 4px 10px;
	border-radius: var(--gcxt-radius-pill);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	backdrop-filter: blur(4px);
}
.gcxt-badge-featured { background: var(--gcxt-gradient-accent); }
.gcxt-badge-trending { background: var(--gcxt-gradient-primary); }
.gcxt-badge-new { background: var(--gcxt-secondary); color: #08121a; }

.gcxt-game-card__overlay {
	position: absolute; inset: 0;
	background: var(--gcxt-gradient-dark);
	opacity: 0;
	display: flex; align-items: center; justify-content: center;
	transition: opacity var(--gcxt-transition);
}
.gcxt-game-card:hover .gcxt-game-card__overlay,
.gcxt-game-card:focus-within .gcxt-game-card__overlay { opacity: 1; }

.gcxt-game-card__body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.gcxt-game-card__title { font-size: 1.05rem; margin: 0; }
.gcxt-game-card__title a:hover { color: var(--gcxt-secondary); }
.gcxt-game-card__meta {
	display: flex; align-items: center; gap: 12px;
	font-size: 0.8rem; color: var(--gcxt-text-dim);
	margin-top: auto; padding-top: 10px;
}
.gcxt-game-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
.gcxt-game-card__category {
	color: var(--gcxt-secondary);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* List view variant */
.gcxt-grid-list .gcxt-game-card { flex-direction: row; }
.gcxt-grid-list .gcxt-game-card__media { width: 220px; flex: 0 0 220px; aspect-ratio: 16/10; }
@media (max-width: 640px) {
	.gcxt-grid-list .gcxt-game-card { flex-direction: column; }
	.gcxt-grid-list .gcxt-game-card__media { width: 100%; }
}

/* ==========================================================================
   5. HEADER
   ========================================================================== */

.gcxt-header {
	position: sticky; top: 0; z-index: 500;
	background: var(--gcxt-bg-glass);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--gcxt-border);
}
.gcxt-header__inner {
	display: flex; align-items: center; gap: 24px;
	padding: 14px 0;
}
.gcxt-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.3rem; margin-right: auto; }
.gcxt-logo img { max-height: 40px; width: auto; }
.gcxt-logo span { background: var(--gcxt-gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }

.gcxt-nav { display: flex; }
.gcxt-nav ul { display: flex; align-items: center; gap: 4px; }
.gcxt-nav a {
	display: block; padding: 10px 14px; border-radius: var(--gcxt-radius-pill);
	font-weight: 600; font-size: 0.92rem; color: var(--gcxt-text-muted);
	transition: background var(--gcxt-transition), color var(--gcxt-transition);
}
.gcxt-nav a:hover, .gcxt-nav .current-menu-item > a { background: rgba(var(--gcxt-primary-rgb), 0.15); color: var(--gcxt-text); }
.gcxt-nav .menu-item-has-children { position: relative; }
.gcxt-nav .menu-item-has-children:hover > ul,
.gcxt-nav .menu-item-has-children > ul:focus-within {
	display: block;
}
.gcxt-nav .menu-item-has-children > ul {
	display: none; position: absolute; top: 100%; left: 0;
	min-width: 200px; padding: 8px; margin-top: 8px;
	background: var(--gcxt-bg-card); border: 1px solid var(--gcxt-border);
	border-radius: var(--gcxt-radius); box-shadow: var(--gcxt-shadow);
	flex-direction: column;
}
.gcxt-nav .menu-item-has-children > ul a { padding: 8px 12px; }

.gcxt-header__actions { display: flex; align-items: center; gap: 8px; }
.gcxt-icon-btn {
	width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--gcxt-bg-card); border: 1px solid var(--gcxt-border);
	color: var(--gcxt-text); transition: background var(--gcxt-transition), transform var(--gcxt-transition);
}
.gcxt-icon-btn:hover { background: rgba(var(--gcxt-primary-rgb), 0.2); transform: translateY(-2px); }
.gcxt-search-form { display: flex; align-items: center; }
.gcxt-search-form input[type="search"] {
	background: var(--gcxt-bg-card); border: 1px solid var(--gcxt-border); color: var(--gcxt-text);
	padding: 9px 14px; border-radius: var(--gcxt-radius-pill); width: 200px;
	transition: width var(--gcxt-transition), border-color var(--gcxt-transition);
}
.gcxt-search-form input[type="search"]:focus { width: 260px; border-color: var(--gcxt-secondary); outline: none; }

.gcxt-mobile-toggle { display: none; }
@media (max-width: 960px) {
	.gcxt-nav { display: none; }
	.gcxt-mobile-toggle { display: inline-flex; }
	.gcxt-search-form input[type="search"] { width: 140px; }
}

.gcxt-mobile-nav {
	display: none;
	position: fixed; inset: 0; z-index: 999;
	background: var(--gcxt-bg); padding: 24px;
	overflow-y: auto;
}
.gcxt-mobile-nav.is-open { display: block; }
.gcxt-mobile-nav ul { display: flex; flex-direction: column; gap: 4px; }
.gcxt-mobile-nav a { display: block; padding: 14px 8px; font-size: 1.1rem; font-weight: 600; border-bottom: 1px solid var(--gcxt-border); }
.gcxt-mobile-nav__close { margin-left: auto; display: block; }

/* ==========================================================================
   6. HERO
   ========================================================================== */

.gcxt-hero {
	position: relative;
	padding: 100px 0 80px;
	overflow: hidden;
	background:
		radial-gradient(circle at 15% 20%, rgba(var(--gcxt-primary-rgb), 0.35), transparent 45%),
		radial-gradient(circle at 85% 30%, rgba(var(--gcxt-secondary-rgb), 0.3), transparent 45%),
		var(--gcxt-bg);
}
.gcxt-hero__content { max-width: 720px; position: relative; z-index: 2; }
.gcxt-hero__eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 16px; border-radius: var(--gcxt-radius-pill);
	background: var(--gcxt-bg-glass); border: 1px solid var(--gcxt-border);
	font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
	color: var(--gcxt-secondary); margin-bottom: 20px;
}
.gcxt-hero h1 { margin-bottom: 20px; }
.gcxt-hero h1 .gcxt-gradient-text {
	background: var(--gcxt-gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gcxt-hero p { font-size: 1.1rem; max-width: 560px; margin-bottom: 32px; }
.gcxt-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.gcxt-hero__stats { display: flex; gap: 32px; margin-top: 48px; flex-wrap: wrap; }
.gcxt-hero__stat strong { display: block; font-size: 1.7rem; font-family: var(--gcxt-font-heading); }
.gcxt-hero__stat span { font-size: 0.85rem; color: var(--gcxt-text-dim); }

/* ==========================================================================
   7. STATS / CTA / NEWSLETTER
   ========================================================================== */

.gcxt-stats-band {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
	padding: 40px; border-radius: var(--gcxt-radius-lg);
}
@media (max-width: 800px) { .gcxt-stats-band { grid-template-columns: repeat(2, 1fr); } }
.gcxt-stat-item { text-align: center; }
.gcxt-stat-item strong { display: block; font-size: 2.2rem; font-family: var(--gcxt-font-heading); background: var(--gcxt-gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gcxt-stat-item span { color: var(--gcxt-text-muted); font-size: 0.9rem; }

.gcxt-cta {
	text-align: center; padding: 72px 40px; border-radius: var(--gcxt-radius-lg);
	background: var(--gcxt-gradient-primary); color: #fff;
}
.gcxt-cta h2, .gcxt-cta p { color: #fff; }
.gcxt-cta .gcxt-btn-primary { background: #fff; color: var(--gcxt-primary); box-shadow: none; }

.gcxt-newsletter { display: flex; align-items: center; gap: 40px; padding: 48px; border-radius: var(--gcxt-radius-lg); flex-wrap: wrap; }
.gcxt-newsletter__form { display: flex; gap: 10px; flex: 1; min-width: 280px; }
.gcxt-newsletter__form input[type="email"] {
	flex: 1; padding: 13px 18px; border-radius: var(--gcxt-radius-pill);
	border: 1px solid var(--gcxt-border); background: var(--gcxt-bg); color: var(--gcxt-text);
}

/* ==========================================================================
   8. CATEGORY TILES / BANNER
   ========================================================================== */

.gcxt-category-tile {
	position: relative; padding: 28px 20px; border-radius: var(--gcxt-radius);
	background: var(--gcxt-bg-card); border: 1px solid var(--gcxt-border);
	text-align: center; transition: transform var(--gcxt-transition), border-color var(--gcxt-transition);
}
.gcxt-category-tile:hover { transform: translateY(-4px); border-color: rgba(var(--gcxt-secondary-rgb), 0.5); }
.gcxt-category-tile__icon { font-size: 2rem; margin-bottom: 10px; }
.gcxt-category-tile strong { display: block; margin-bottom: 4px; }
.gcxt-category-tile span { font-size: 0.8rem; color: var(--gcxt-text-dim); }

.gcxt-category-banner {
	position: relative; padding: 64px 0; margin-bottom: 40px; overflow: hidden;
	background: radial-gradient(circle at 20% 30%, rgba(var(--gcxt-primary-rgb), 0.3), transparent 50%), var(--gcxt-bg-elevated);
	border-bottom: 1px solid var(--gcxt-border);
}
.gcxt-category-banner h1 { margin-bottom: 10px; }
.gcxt-category-banner__count { color: var(--gcxt-secondary); font-weight: 700; }

/* ==========================================================================
   9. TOOLBAR / FILTERS (Games page)
   ========================================================================== */

.gcxt-toolbar {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	padding: 18px; margin-bottom: 28px; border-radius: var(--gcxt-radius);
	background: var(--gcxt-bg-card); border: 1px solid var(--gcxt-border);
}
.gcxt-toolbar__search { flex: 1; min-width: 220px; }
.gcxt-toolbar select, .gcxt-toolbar input[type="search"] {
	background: var(--gcxt-bg-elevated); border: 1px solid var(--gcxt-border); color: var(--gcxt-text);
	padding: 9px 14px; border-radius: var(--gcxt-radius-sm);
}
.gcxt-view-toggle { display: flex; gap: 4px; background: var(--gcxt-bg-elevated); padding: 4px; border-radius: var(--gcxt-radius-sm); }
.gcxt-view-toggle button {
	width: 34px; height: 34px; border-radius: 6px; background: transparent; border: none; color: var(--gcxt-text-dim);
}
.gcxt-view-toggle button.is-active { background: var(--gcxt-primary); color: #fff; }

.gcxt-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.gcxt-pagination a, .gcxt-pagination span {
	min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--gcxt-radius-sm); background: var(--gcxt-bg-card); border: 1px solid var(--gcxt-border);
	font-weight: 600; font-size: 0.9rem;
}
.gcxt-pagination .current { background: var(--gcxt-gradient-primary); color: #fff; border-color: transparent; }
.gcxt-pagination a:hover { border-color: var(--gcxt-secondary); }

/* ==========================================================================
   10. SINGLE GAME PAGE
   ========================================================================== */

.gcxt-game-hero {
	position: relative; border-radius: var(--gcxt-radius-lg); overflow: hidden;
	margin-bottom: 32px; background: var(--gcxt-bg-elevated);
}
.gcxt-game-hero__image { width: 100%; aspect-ratio: 21/8; object-fit: cover; }
.gcxt-game-hero__overlay {
	position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 60%);
	display: flex; align-items: flex-end; padding: 32px;
}
.gcxt-game-hero__info { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.gcxt-game-hero__cover { width: 96px; height: 96px; border-radius: var(--gcxt-radius); object-fit: cover; box-shadow: var(--gcxt-shadow-lg); flex-shrink: 0; }
.gcxt-game-hero__title { color: #fff; margin: 0 0 8px; }
.gcxt-game-hero__meta { display: flex; gap: 16px; flex-wrap: wrap; color: rgba(255,255,255,0.8); font-size: 0.9rem; }

.gcxt-player-frame {
	position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--gcxt-radius);
	overflow: hidden; background: #000; margin-bottom: 32px; border: 1px solid var(--gcxt-border);
}
.gcxt-player-frame iframe { width: 100%; height: 100%; border: 0; }
.gcxt-player-frame__cta {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 16px; background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)); background-size: cover;
}
.gcxt-play-btn {
	width: 84px; height: 84px; border-radius: 50%; background: var(--gcxt-gradient-primary);
	display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.8rem;
	box-shadow: var(--gcxt-shadow-glow); transition: transform var(--gcxt-transition);
}
.gcxt-play-btn:hover { transform: scale(1.08); }

.gcxt-game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; }
@media (max-width: 960px) { .gcxt-game-layout { grid-template-columns: 1fr; } }

.gcxt-info-list { display: flex; flex-direction: column; gap: 0; }
.gcxt-info-list__row {
	display: flex; justify-content: space-between; gap: 12px; padding: 12px 0;
	border-bottom: 1px solid var(--gcxt-border); font-size: 0.9rem;
}
.gcxt-info-list__row dt { color: var(--gcxt-text-dim); }
.gcxt-info-list__row dd { margin: 0; font-weight: 600; text-align: right; }

.gcxt-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 24px 0; }
.gcxt-gallery img { aspect-ratio: 16/10; object-fit: cover; border-radius: var(--gcxt-radius-sm); cursor: zoom-in; transition: transform var(--gcxt-transition), border-color var(--gcxt-transition); border: 2px solid transparent; }
.gcxt-gallery img:hover { transform: scale(1.04); }
.gcxt-gallery img.is-active { border-color: var(--gcxt-secondary); }
[data-gcxt-gallery-main] { cursor: zoom-in; }

/* Gallery lightbox (Single Game page) */
.gcxt-lightbox {
	display: none; position: fixed; inset: 0; z-index: 1000;
	background: rgba(5, 6, 12, 0.92); padding: 40px;
	align-items: center; justify-content: center;
}
.gcxt-lightbox.is-open { display: flex; }
.gcxt-lightbox img { max-width: min(1200px, 92vw); max-height: 86vh; width: auto; object-fit: contain; border-radius: var(--gcxt-radius); box-shadow: var(--gcxt-shadow-lg); }
.gcxt-lightbox__close {
	position: absolute; top: 20px; right: 20px;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--gcxt-bg-card); border: 1px solid var(--gcxt-border); color: var(--gcxt-text);
	display: inline-flex; align-items: center; justify-content: center;
}

.gcxt-tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.gcxt-tag {
	padding: 6px 14px; border-radius: var(--gcxt-radius-pill); background: var(--gcxt-bg-card);
	border: 1px solid var(--gcxt-border); font-size: 0.8rem; color: var(--gcxt-text-muted);
}
.gcxt-tag:hover { border-color: var(--gcxt-secondary); color: var(--gcxt-text); }

.gcxt-share { display: flex; gap: 10px; margin: 20px 0; }
.gcxt-controls-box { background: var(--gcxt-bg-card); border: 1px solid var(--gcxt-border); border-radius: var(--gcxt-radius); padding: 18px; margin: 20px 0; }

/* ==========================================================================
   11. SIDEBAR WIDGETS
   ========================================================================== */

.widget { margin-bottom: 32px; background: var(--gcxt-bg-card); border: 1px solid var(--gcxt-border); border-radius: var(--gcxt-radius); padding: 22px; }
.widget-title { font-size: 1.05rem; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--gcxt-border); }
.gcxt-widget-list { display: flex; flex-direction: column; gap: 14px; }
.gcxt-widget-list__item { display: flex; gap: 12px; align-items: center; }
.gcxt-widget-list__item img { width: 56px; height: 56px; border-radius: var(--gcxt-radius-sm); object-fit: cover; flex-shrink: 0; }
.gcxt-widget-list__item h4 { font-size: 0.88rem; margin: 0 0 4px; }
.gcxt-widget-list__item span { font-size: 0.75rem; color: var(--gcxt-text-dim); }
.gcxt-tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.gcxt-ad-slot { border: 1px dashed var(--gcxt-border); border-radius: var(--gcxt-radius); padding: 20px; text-align: center; color: var(--gcxt-text-dim); font-size: 0.8rem; }

/* ==========================================================================
   12. NEWS / ARCHIVE / BLOG
   ========================================================================== */

.gcxt-news-card { display: flex; flex-direction: column; }
.gcxt-news-card__media { aspect-ratio: 16/9; overflow: hidden; }
.gcxt-news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--gcxt-transition-slow); }
.gcxt-news-card:hover .gcxt-news-card__media img { transform: scale(1.06); }
.gcxt-news-card__body { padding: 18px; }
.gcxt-news-card__category { color: var(--gcxt-secondary); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.gcxt-news-card__excerpt { font-size: 0.9rem; }
.gcxt-news-card__meta { font-size: 0.78rem; color: var(--gcxt-text-dim); }

.gcxt-featured-news { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-bottom: 40px; }
@media (max-width: 800px) { .gcxt-featured-news { grid-template-columns: 1fr; } }

.gcxt-breadcrumbs { font-size: 0.82rem; color: var(--gcxt-text-dim); margin-bottom: 24px; }
.gcxt-breadcrumbs a:hover { color: var(--gcxt-secondary); }
.gcxt-breadcrumbs .sep { margin: 0 6px; }

/* ==========================================================================
   13. FORMS (search / contact / newsletter / comments)
   ========================================================================== */

.gcxt-form-row { margin-bottom: 18px; }
.gcxt-form-row label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.88rem; }
.gcxt-form-row input, .gcxt-form-row select, .gcxt-form-row textarea {
	width: 100%; padding: 12px 14px; border-radius: var(--gcxt-radius-sm);
	background: var(--gcxt-bg-elevated); border: 1px solid var(--gcxt-border); color: var(--gcxt-text);
}
.gcxt-form-row input:focus, .gcxt-form-row select:focus, .gcxt-form-row textarea:focus { outline: none; border-color: var(--gcxt-secondary); }

.gcxt-advanced-search { padding: 32px; border-radius: var(--gcxt-radius-lg); margin-bottom: 40px; }
.gcxt-advanced-search__row { display: flex; gap: 14px; flex-wrap: wrap; }
.gcxt-advanced-search__row .gcxt-form-row { flex: 1; min-width: 180px; margin-bottom: 0; }
.gcxt-search-type-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.gcxt-search-type-tabs a {
	padding: 8px 18px; border-radius: var(--gcxt-radius-pill); background: var(--gcxt-bg-card);
	border: 1px solid var(--gcxt-border); font-size: 0.85rem; font-weight: 600; color: var(--gcxt-text-muted);
}
.gcxt-search-type-tabs a.is-active, .gcxt-search-type-tabs a:hover { background: var(--gcxt-gradient-primary); color: #fff; border-color: transparent; }

/* ==========================================================================
   14. 404 / EMPTY STATES
   ========================================================================== */

.gcxt-empty-state { text-align: center; padding: 80px 20px; }
.gcxt-empty-state__icon { font-size: 4rem; margin-bottom: 20px; }
.gcxt-404 { text-align: center; padding: 100px 20px; }
.gcxt-404 .gcxt-404-code {
	font-size: 8rem; font-weight: 800; font-family: var(--gcxt-font-heading); line-height: 1;
	background: var(--gcxt-gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.gcxt-footer { background: var(--gcxt-bg-elevated); border-top: 1px solid var(--gcxt-border); margin-top: 80px; }
.gcxt-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding: 64px 0 40px; }
@media (max-width: 900px) { .gcxt-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gcxt-footer__grid { grid-template-columns: 1fr; } }
.gcxt-footer h4 { font-size: 0.95rem; margin-bottom: 18px; }
.gcxt-footer ul { display: flex; flex-direction: column; gap: 10px; }
.gcxt-footer a { color: var(--gcxt-text-muted); font-size: 0.88rem; }
.gcxt-footer a:hover { color: var(--gcxt-secondary); }
.gcxt-footer__about p { font-size: 0.88rem; }
.gcxt-social-links { display: flex; gap: 10px; margin-top: 16px; }
.gcxt-footer__bottom {
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
	padding: 24px 0; border-top: 1px solid var(--gcxt-border); font-size: 0.82rem; color: var(--gcxt-text-dim);
}
.gcxt-footer__credits a { color: var(--gcxt-secondary); }

/* ==========================================================================
   16. ANIMATIONS
   ========================================================================== */

@keyframes gcxt-fade-in-up {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}
.gcxt-animate-in { animation: gcxt-fade-in-up 0.6s cubic-bezier(0.4, 0, 0.2, 1) both; }
.gcxt-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.gcxt-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Smart Navigation's own transition (see Section 20) is already
   covered by the blanket "*" rule above — no separate override
   needed. */

/* ==========================================================================
   17. UTILITIES / ALIGNMENT (WP core support)
   ========================================================================== */

.alignwide { max-width: 1100px; }
.alignfull { max-width: none; width: 100%; }
.aligncenter { margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin-right: 20px; }
.alignright { float: right; margin-left: 20px; }
.gcxt-text-center { text-align: center; }
.gcxt-mt-0 { margin-top: 0; }
.gcxt-visually-loading { min-height: 40px; }

img.lazyload, img.lazyloading { opacity: 0; }
img.lazyloaded { opacity: 1; transition: opacity 0.4s ease; }

/* ==========================================================================
   18. RESPONSIVE BREAKPOINTS SUMMARY
   ========================================================================== */

@media (max-width: 1280px) { .gcxt-container { padding: 0 20px; } }
@media (max-width: 1100px) { .gcxt-footer__grid { padding: 48px 0 32px; } }
@media (max-width: 782px) {
	.gcxt-section { padding: 44px 0; }
	.gcxt-hero { padding: 64px 0 48px; }
	.gcxt-game-layout, .gcxt-content-layout.has-sidebar { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.gcxt-hero__stats { gap: 20px; }
	.gcxt-stats-band { padding: 24px; }
}

/* ==========================================================================
   19. GAMING HUB (Version 1.4.0)
   Reuses existing design tokens (--gcxt-*), .gcxt-card, .gcxt-grid,
   .gcxt-section, .gcxt-btn, and .gcxt-reveal — only the differences
   from a game card are defined below.
   ========================================================================== */

.gcxt-hub-card { display: flex; flex-direction: column; height: 100%; }
.gcxt-hub-card__media {
	aspect-ratio: 16 / 10;
	display: flex; align-items: center; justify-content: center;
	background: var(--gcxt-bg-elevated);
	font-size: 2.4rem;
}
.gcxt-hub-card__body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.gcxt-hub-card__category {
	color: var(--gcxt-secondary);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.gcxt-hub-card__title { font-size: 1.05rem; margin: 0; }
.gcxt-hub-card__desc { font-size: 0.88rem; margin: 0; }
.gcxt-hub-card__source { font-size: 0.78rem; color: var(--gcxt-text-dim); margin: 0; }
.gcxt-hub-card__link { margin-top: auto; align-self: flex-start; }

@media (max-width: 700px) {
	.gcxt-hub-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   20. SMART NAVIGATION (Version 1.5.0)
   First 5 top-level menu items, then a "›" button pages to the
   remaining items ("‹" returns) — reused identically inside both the
   desktop .gcxt-nav bar and the .gcxt-mobile-nav off-canvas panel, so
   Desktop / Tablet / Mobile all get the same working behavior. See
   inc/navigation.php for the markup this styles.
   ========================================================================== */

.gcxt-smart-nav { display: flex; align-items: center; gap: 4px; }
.gcxt-smart-nav__page { display: flex; align-items: center; gap: 4px; margin: 0; }
.gcxt-smart-nav__page[hidden] { display: none !important; }
.gcxt-smart-nav__page--overflow {
	opacity: 0;
	transform: translateX(8px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.gcxt-smart-nav__page--overflow.is-visible { opacity: 1; transform: translateX(0); }

.gcxt-smart-nav__next,
.gcxt-smart-nav__prev {
	flex: none;
	width: 32px; height: 32px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--gcxt-border);
	background: var(--gcxt-bg-card);
	color: var(--gcxt-text);
	font-size: 1.1rem; line-height: 1;
	cursor: pointer;
	transition: background var(--gcxt-transition), transform var(--gcxt-transition);
}
.gcxt-smart-nav__next:hover, .gcxt-smart-nav__prev:hover { background: rgba(var(--gcxt-primary-rgb), 0.2); transform: translateY(-1px); }
.gcxt-smart-nav__next:focus-visible, .gcxt-smart-nav__prev:focus-visible { outline: 2px solid var(--gcxt-secondary); outline-offset: 2px; }

/* Inside the off-canvas mobile panel the list is vertical, so the
   paged group stacks instead of sliding sideways, and the paging
   buttons become full-width rows to match the existing mobile menu
   items. */
.gcxt-mobile-nav .gcxt-smart-nav { flex-direction: column; align-items: stretch; gap: 4px; }
.gcxt-mobile-nav .gcxt-smart-nav__page { flex-direction: column; align-items: stretch; }
.gcxt-mobile-nav .gcxt-smart-nav__page--overflow { transform: translateY(8px); }
.gcxt-mobile-nav .gcxt-smart-nav__page--overflow.is-visible { transform: translateY(0); }
.gcxt-mobile-nav .gcxt-smart-nav__next,
.gcxt-mobile-nav .gcxt-smart-nav__prev {
	width: 100%; border-radius: var(--gcxt-radius-pill);
	padding: 12px; font-weight: 700; gap: 8px;
}

/* ==========================================================================
   21. ADVERTISEMENTS (Version 1.5.0; Uploaded Video / YouTube /
   Dailymotion added in Version 1.6.3 "Advertisement Media & Video
   Edition"; bounded layout + Marketing Overlay added in Version 1.6.4
   "Advertisement Video Layout & Marketing Controls")
   Five dedicated, admin-controlled ad zones (Homepage Hero, Homepage
   Middle, Sidebar, Single Game, Footer) — reuses .gcxt-reveal for the
   scroll-in animation and the theme's existing design tokens; no new
   grid system, no external CSS framework. The four video-bearing media
   types (legacy Video URL, Uploaded Video, YouTube, Dailymotion) render
   inside .gcxt-ad-marketing (added in 1.6.4) — a bounded, ~1100px-max
   "marketing area" instead of stretching edge-to-edge across whatever
   wide section the ad zone happens to sit in. Image and Custom HTML are
   untouched.
   ========================================================================== */

.gcxt-ad-zone {
	margin: 24px 0;
	display: flex;
	justify-content: center;
	overflow: hidden;
	border-radius: var(--gcxt-radius);
}
.gcxt-ad-zone--sidebar,
.gcxt-ad-zone--single_game { margin: 0 0 24px; }
.gcxt-ad-zone__img,
.gcxt-ad-zone__video {
	max-width: 100%;
	width: 100%;
	height: auto;
	border-radius: var(--gcxt-radius);
	display: block;
	border: 0;
}
/* Default 16:9 box for any video/iframe ad that doesn't carry its own
   inline aspect-ratio (see below) — overridden per-element by
   gcxt_ad_render_uploaded_video()'s inline `style="aspect-ratio:…"`
   whenever WordPress recorded the uploaded video's real width/height,
   so a non-16:9 upload is never stretched or cropped to fit. */
.gcxt-ad-zone__video { aspect-ratio: 16 / 9; }

/* Uploaded Video (1.6.3): letterbox rather than stretch/distort when
   the real aspect ratio (set inline, above) differs from the
   surrounding box on odd viewport widths. */
video.gcxt-ad-zone__video {
	background: #000;
	object-fit: contain;
}

/* YouTube / Dailymotion (1.6.3): identical responsive treatment to the
   existing self-hosted/legacy video embed — no separate sizing rules
   needed since both reuse .gcxt-ad-zone__video. */
iframe.gcxt-ad-zone__embed { background: #000; }

@media (max-width: 600px) {
	.gcxt-ad-zone { margin: 16px 0; }
}

/* ---- Marketing area / bounded video layout (1.6.4) ----
   Wraps the four video-bearing types (legacy Video URL, Uploaded Video,
   YouTube, Dailymotion) — never Image or Custom HTML. .gcxt-ad-zone's
   own `display:flex; justify-content:center;` (above) centers this
   bounded box, so a small video leaves clean, intentional empty space
   on either side instead of stretching to fill its parent. */
.gcxt-ad-marketing {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
	width: 100%;
	max-width: 1100px;
}
.gcxt-ad-marketing--pos-left { flex-direction: row; }
.gcxt-ad-marketing--pos-right { flex-direction: row-reverse; }
.gcxt-ad-marketing--pos-top { flex-direction: column; }
.gcxt-ad-marketing--pos-bottom { flex-direction: column-reverse; }

.gcxt-ad-marketing__media {
	display: flex;
	justify-content: center;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
}
/* No overlay configured (or overlay disabled): the media block is the
   marketing area's only child — center it with breathing room rather
   than letting it stretch to the full 1100px. */
.gcxt-ad-marketing:not(.gcxt-ad-marketing--has-overlay) { justify-content: center; }
.gcxt-ad-marketing:not(.gcxt-ad-marketing--has-overlay) .gcxt-ad-marketing__media { flex: 0 1 auto; }

/* Overlay present, side positions: genuine two-column layout — video
   keeps its own (already-capped) size, the overlay text takes the
   remaining space. */
.gcxt-ad-marketing--has-overlay.gcxt-ad-marketing--pos-left .gcxt-ad-marketing__overlay,
.gcxt-ad-marketing--has-overlay.gcxt-ad-marketing--pos-right .gcxt-ad-marketing__overlay {
	flex: 1 1 240px;
	min-width: 220px;
}
/* Overlay present, top/bottom positions: a caption-style block above
   or below the (already-capped) video, not a second column. */
.gcxt-ad-marketing--has-overlay.gcxt-ad-marketing--pos-top .gcxt-ad-marketing__overlay,
.gcxt-ad-marketing--has-overlay.gcxt-ad-marketing--pos-bottom .gcxt-ad-marketing__overlay {
	flex: 0 0 auto;
	width: 100%;
	max-width: 100%;
	text-align: center;
}

.gcxt-ad-marketing__media video,
.gcxt-ad-marketing__media iframe {
	width: 100%;
	height: auto;
	/* max-width comes from each element's own inline style (Uploaded
	   Video: gcxt_ad_render_uploaded_video()'s computed, natural-size-
	   aware cap; YouTube/Dailymotion/legacy Video URL: the existing
	   .gcxt-ad-zone__video rules above) — never forced wider here. */
	object-fit: contain;
}

.gcxt-ad-marketing__overlay {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.gcxt-ad-marketing__label {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gcxt-text-dim);
}
.gcxt-ad-marketing__title {
	margin: 0;
	font-size: 1.35rem;
}
.gcxt-ad-marketing__desc {
	margin: 0 0 6px;
	color: var(--gcxt-text-muted);
	font-size: 0.95rem;
	line-height: 1.5;
}
.gcxt-ad-marketing__cta { align-self: flex-start; }
.gcxt-ad-marketing--pos-top .gcxt-ad-marketing__cta,
.gcxt-ad-marketing--pos-bottom .gcxt-ad-marketing__cta { align-self: center; }

/* Overlay Style variants — reuse the theme's own glass/gradient design
   tokens, never new colors. "Minimal" is deliberately plain (no panel
   background at all) so it never reads as spam. */
.gcxt-ad-marketing--style-dark_glass .gcxt-ad-marketing__overlay {
	background: var(--gcxt-bg-glass);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid var(--gcxt-border);
	border-radius: var(--gcxt-radius);
	padding: 24px;
}
.gcxt-ad-marketing--style-gradient .gcxt-ad-marketing__overlay {
	background: var(--gcxt-gradient-primary);
	border-radius: var(--gcxt-radius);
	padding: 24px;
}
.gcxt-ad-marketing--style-gradient .gcxt-ad-marketing__label,
.gcxt-ad-marketing--style-gradient .gcxt-ad-marketing__title,
.gcxt-ad-marketing--style-gradient .gcxt-ad-marketing__desc { color: #fff; }
.gcxt-ad-marketing--style-gradient .gcxt-ad-marketing__cta.gcxt-btn-primary {
	background: #fff;
	color: var(--gcxt-primary);
	box-shadow: none;
}

@media (max-width: 900px) {
	.gcxt-ad-marketing { gap: 20px; }
}

/* Mobile: always stack, video first (Section 4 of the 1.6.4 brief) —
   overrides every Overlay Position, since a side-by-side or
   above/below layout has no room on a narrow screen. */
@media (max-width: 640px) {
	.gcxt-ad-marketing,
	.gcxt-ad-marketing--pos-left,
	.gcxt-ad-marketing--pos-right,
	.gcxt-ad-marketing--pos-top,
	.gcxt-ad-marketing--pos-bottom {
		flex-direction: column;
		gap: 14px;
	}
	.gcxt-ad-marketing__media { order: -1; width: 100%; justify-content: center; }
	.gcxt-ad-marketing__overlay,
	.gcxt-ad-marketing--has-overlay.gcxt-ad-marketing--pos-left .gcxt-ad-marketing__overlay,
	.gcxt-ad-marketing--has-overlay.gcxt-ad-marketing--pos-right .gcxt-ad-marketing__overlay {
		width: 100%;
		max-width: 100%;
		text-align: center;
		align-items: center;
	}
	.gcxt-ad-marketing__cta { align-self: center; }
}

/* ==========================================================================
   22. USER ACCOUNTS (Version 1.6.0 "User Accounts Foundation")
   Login / Register / Player Profile / Dashboard / Settings / the ❤️
   Favorite + 👍 Like buttons — reuses .gcxt-form-row, .gcxt-btn,
   .gcxt-card, .gcxt-glass, .gcxt-stats-band, .gcxt-info-list, and
   .gcxt-category-banner throughout; only the differences are defined
   below.
   ========================================================================== */

/* ---- Login / Register shell ---- */
.gcxt-auth-shell { max-width: 460px; margin: 0 auto; padding: 20px 0 60px; }
.gcxt-auth-card { padding: 36px; }
.gcxt-auth-form .gcxt-form-row--inline {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.gcxt-checkbox-label { display: flex !important; align-items: flex-start; gap: 8px; font-weight: 500 !important; cursor: pointer; }
.gcxt-checkbox-label input[type="checkbox"] { width: auto; margin-top: 3px; }
.gcxt-form-hint { display: block; margin-top: 6px; font-size: 0.78rem; color: var(--gcxt-text-dim); }
.gcxt-form-status { padding: 12px 16px; border-radius: var(--gcxt-radius-sm); margin-bottom: 18px; font-size: 0.9rem; }
.gcxt-form-status.is-success { background: rgba(var(--gcxt-secondary-rgb), 0.12); color: var(--gcxt-secondary); }
.gcxt-form-status.is-error { background: rgba(244, 63, 94, 0.12); color: var(--gcxt-accent); }
.gcxt-form-status[hidden] { display: none; }
.gcxt-auth-switch { text-align: center; margin-top: 20px; font-size: 0.9rem; color: var(--gcxt-text-muted); }
.gcxt-resend-form { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.gcxt-resend-form input { flex: 1; min-width: 160px; padding: 10px 14px; border-radius: var(--gcxt-radius-sm); background: var(--gcxt-bg-elevated); border: 1px solid var(--gcxt-border); color: var(--gcxt-text); }

/* ---- Player Profile (public, /player/username/) ---- */
.gcxt-player-profile__avatar { border-radius: 50%; border: 3px solid var(--gcxt-border); margin-bottom: 16px; object-fit: cover; }
.gcxt-player-profile__handle { color: var(--gcxt-text-dim); }
.gcxt-player-profile__body { max-width: 640px; margin: 0 auto; padding: 32px 0 60px; }
.gcxt-player-profile__meta { margin-bottom: 24px; }
.gcxt-player-profile__bio h2 { font-size: 1.1rem; margin-bottom: 8px; }

/* ---- Dashboard header ---- */
.gcxt-dashboard-header {
	display: flex; align-items: center; gap: 20px;
	padding: 28px; margin: 24px 0; border-radius: var(--gcxt-radius-lg);
}
.gcxt-dashboard-header__avatar { border-radius: 50%; object-fit: cover; flex: none; }
.gcxt-dashboard-header h1 { font-size: 1.4rem; margin-bottom: 4px; }
.gcxt-dashboard-header__meta { font-size: 0.85rem; color: var(--gcxt-text-dim); }

/* ---- Dashboard tabs (WAI-ARIA Tabs pattern) ---- */
.gcxt-dashboard { padding-bottom: 60px; }
.gcxt-dashboard__tabs {
	display: flex; gap: 6px; flex-wrap: wrap;
	border-bottom: 1px solid var(--gcxt-border); margin-bottom: 24px; padding-bottom: 4px;
	overflow-x: auto;
}
.gcxt-dashboard__tab {
	padding: 10px 18px; border-radius: var(--gcxt-radius-pill);
	font-weight: 600; font-size: 0.88rem; color: var(--gcxt-text-muted);
	background: transparent; border: 1px solid transparent; white-space: nowrap;
	transition: background var(--gcxt-transition), color var(--gcxt-transition);
}
.gcxt-dashboard__tab:hover { background: var(--gcxt-bg-card); color: var(--gcxt-text); }
.gcxt-dashboard__tab.is-active { background: var(--gcxt-gradient-primary); color: #fff; }
.gcxt-dashboard__tab--logout { margin-left: auto; color: var(--gcxt-accent); }
.gcxt-dashboard__tab:focus-visible { outline: 2px solid var(--gcxt-secondary); outline-offset: 2px; }
.gcxt-dashboard__panel[hidden] { display: none !important; }
.gcxt-dashboard__stats { margin-bottom: 0; }

/* ---- Settings form ---- */
.gcxt-settings-avatar-row { display: flex; align-items: center; gap: 16px; }
.gcxt-settings-avatar-preview { border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--gcxt-border); }
.gcxt-settings-avatar-row input[type="file"] { width: auto; padding: 0; border: 0; background: transparent; }

/* ---- ❤️ Favorite / 👍 Like buttons ---- */
.gcxt-engagement { display: flex; gap: 8px; margin-top: 10px; }
.gcxt-engagement__btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px; border-radius: var(--gcxt-radius-pill);
	background: var(--gcxt-bg-elevated); border: 1px solid var(--gcxt-border);
	color: var(--gcxt-text-muted); font-size: 0.82rem; font-weight: 600;
	cursor: pointer; transition: background var(--gcxt-transition), color var(--gcxt-transition), transform var(--gcxt-transition);
}
.gcxt-engagement__btn:hover { transform: translateY(-1px); }
.gcxt-engagement__btn.is-active { color: var(--gcxt-text); border-color: var(--gcxt-secondary); background: rgba(var(--gcxt-secondary-rgb), 0.12); }
.gcxt-engagement__btn:focus-visible { outline: 2px solid var(--gcxt-secondary); outline-offset: 2px; }
.gcxt-game-card__body .gcxt-engagement { margin-top: 12px; }

@media (max-width: 600px) {
	.gcxt-auth-card { padding: 24px; }
	.gcxt-dashboard-header { flex-direction: column; text-align: center; padding: 20px; }
	.gcxt-dashboard__tab--logout { margin-left: 0; }
	.gcxt-settings-avatar-row { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   23. GCX PLAYER ACCOUNT SYSTEM (Version 1.6.2 "Independent Player
   Account System")
   The independent-player Login/Register/Account pages reuse EVERY
   class from Section 22 above (.gcxt-auth-shell, .gcxt-auth-card,
   .gcxt-form-row, .gcxt-checkbox-label, .gcxt-form-status,
   .gcxt-auth-switch, .gcxt-dashboard*, .gcxt-settings-avatar-row) —
   same dark GameCreatorX chrome, wired to the new gcxp_* endpoints
   instead of WordPress users. Only what's genuinely NEW is defined
   here: the Register page's large hero banner (Task 2), the optional/
   disabled social-login button row (Task 3), and the Achievements
   placeholder card (Task 4).
   ========================================================================== */

/* ---- Register page hero (Task 2 — "large hero section") ---- */
.gcxp-register-hero {
	padding: 56px 0 40px;
	background: radial-gradient(circle at top, rgba(124, 58, 237, 0.22), transparent 65%), var(--gcxt-bg);
	border-bottom: 1px solid var(--gcxt-border);
}
.gcxp-register-hero h1 { font-size: 2rem; margin-bottom: 10px; }
.gcxp-register-hero p { color: var(--gcxt-text-dim); max-width: 520px; margin: 0 auto; }

/* ---- Social login row (Task 3 — placeholders only, no OAuth wired) ---- */
.gcxp-social-row {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin-top: 20px; padding-top: 20px;
	border-top: 1px solid var(--gcxt-border);
}
.gcxp-social-btn {
	flex: 1 1 auto; min-width: 90px;
	padding: 10px 12px; border-radius: var(--gcxt-radius-sm);
	background: var(--gcxt-bg-elevated); border: 1px solid var(--gcxt-border);
	color: var(--gcxt-text-muted); font-size: 0.82rem; font-weight: 600;
	cursor: not-allowed; opacity: 0.55;
}
.gcxp-social-note {
	margin-top: 10px; font-size: 0.78rem; color: var(--gcxt-text-dim); text-align: center;
}

/* ---- Achievements placeholder (Task 4 — "Achievements (placeholder)") ---- */
.gcxp-achievements-placeholder {
	padding: 48px 32px; text-align: center; max-width: 480px; margin: 0 auto;
}
.gcxp-achievements-placeholder__icon { font-size: 2.4rem; margin-bottom: 12px; }
.gcxp-achievements-placeholder h3 { margin-bottom: 8px; }
.gcxp-achievements-placeholder p { color: var(--gcxt-text-dim); font-size: 0.9rem; }

@media (max-width: 600px) {
	.gcxp-register-hero { padding: 40px 0 28px; }
	.gcxp-register-hero h1 { font-size: 1.5rem; }
	.gcxp-social-btn { min-width: 45%; }
}