/*
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.7.0
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)
   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.
   ========================================================================== */

.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;
}
.gcxt-ad-zone__video { aspect-ratio: 16 / 9; }

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

/* ==========================================================================
   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%; }
}