/*
Theme Name: Games Download Hub
Theme URI: https://example.com
Author: Your Name
Description: A modern gaming download website theme with dark/light mode, hero slider, trending games, and curated collections. Games are published using the standard WordPress Post section.
Version: 2.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gamesdownload
*/

/* =========================================================
   1. ROOT VARIABLES / THEME TOKENS
========================================================= */
:root{
	--bg:#0a0d16;
	--bg-elevated:#12172a;
	--bg-card:#161c33;
	--border:#232a45;
	--text:#e8e9f3;
	--text-muted:#8b90a8;
	--accent:#6c5ce7;
	--accent-hover:#5849c4;
	--accent-2:#00d4aa;
	--radius:12px;
	--radius-sm:8px;
	--shadow:0 10px 30px rgba(0,0,0,.35);
	--container-pad:24px;
}

[data-theme="light"]{
	--bg:#f4f5fa;
	--bg-elevated:#ffffff;
	--bg-card:#ffffff;
	--border:#e3e5f0;
	--text:#151827;
	--text-muted:#666b85;
	--shadow:0 8px 24px rgba(20,20,40,.08);
}

/* =========================================================
   2. RESET / BASE
========================================================= */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
	background:var(--bg);
	color:var(--text);
	font-family:'Segoe UI',system-ui,-apple-system,Tahoma,sans-serif;
	transition:background .25s, color .25s;
	overflow-x:hidden;
}
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
input, textarea{ font-family:inherit; }

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

/* Icon base sizing (all icons are inline SVG, no emoji anywhere) */
.gdh-icon{ flex-shrink:0; vertical-align:middle; }

.empty-note{ color:var(--text-muted); padding:24px 0; text-align:center; font-size:14px; }
.highlight{ color:var(--accent); }
.block-title{ font-size:16px; font-weight:700; margin-bottom:14px; }

/* =========================================================
   3. HEADER / NAVBAR
========================================================= */
.site-header{
	background:var(--bg-elevated);
	border-bottom:1px solid var(--border);
	position:sticky; top:0; z-index:1000;
}
.header-inner{
	display:flex; align-items:center; justify-content:space-between;
	padding:14px 0; gap:16px;
}

.footer-logo-text{
	font-size:20px; font-weight:800; display:inline-block;
	background:linear-gradient(90deg,var(--text) 40%,var(--accent) 100%);
	-webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:.5px;
}

.main-nav ul{ display:flex; gap:22px; flex-wrap:wrap; }
.main-nav a{ font-size:14px; font-weight:600; color:var(--text-muted); transition:.2s; white-space:nowrap; }
.main-nav a:hover{ color:var(--accent); }

.header-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn{
	width:38px; height:38px; border-radius:50%; flex-shrink:0;
	background:var(--bg-card); border:1px solid var(--border);
	display:flex; align-items:center; justify-content:center;
	color:var(--text); transition:.2s;
}
.icon-btn:hover{ border-color:var(--accent); color:var(--accent); }

/* Dark/Light toggle: show moon in dark mode, sun in light mode */
#theme-toggle .icon-sun{ display:none; }
[data-theme="light"] #theme-toggle .icon-moon{ display:none; }
[data-theme="light"] #theme-toggle .icon-sun{ display:inline-flex; }

.btn-community{
	background:var(--accent); color:#fff !important; font-weight:700; font-size:13px;
	padding:9px 16px; border-radius:20px; display:flex; align-items:center; gap:6px;
	transition:.2s;
}
.btn-community:hover{ background:var(--accent-hover); }

.menu-toggle{
	display:none; background:none; border:none; color:var(--text);
	width:38px; height:38px; align-items:center; justify-content:center;
}
.menu-toggle .icon-close{ display:none; }
.menu-toggle.active .icon-menu{ display:none; }
.menu-toggle.active .icon-close{ display:inline-flex; }

/* =========================================================
   4. SEARCH MODAL
========================================================= */
.search-modal-overlay{
	position:fixed; inset:0; background:rgba(5,6,12,.75);
	display:none; align-items:flex-start; justify-content:center;
	padding:12vh 16px 0; z-index:2000; backdrop-filter:blur(3px);
}
.search-modal-overlay.active{ display:flex; }
.search-modal{
	background:var(--bg-elevated); border:1px solid var(--border);
	border-radius:var(--radius); width:100%; max-width:600px; box-shadow:var(--shadow);
	overflow:hidden;
}
.search-modal-input{
	display:flex; align-items:center; gap:12px; padding:16px 18px;
	border-bottom:1px solid var(--border); color:var(--text-muted);
}
.search-modal-input input{
	flex:1; background:none; border:none; outline:none; color:var(--text); font-size:15px;
}
.search-modal-input .esc{ font-size:11px; color:var(--text-muted); border:1px solid var(--border); padding:2px 8px; border-radius:4px; }
.search-modal-body{ padding:16px 18px; }
.search-modal-body h4{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--accent); text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px; }
.popular-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.popular-tags a{
	background:var(--bg-card); border:1px solid var(--border); padding:7px 14px;
	border-radius:16px; font-size:13px; color:var(--text-muted);
}
.popular-tags a:hover{ color:var(--accent); border-color:var(--accent); }

/* =========================================================
   5. HERO SLIDER
========================================================= */
.hero-slider{
	position:relative; border-radius:var(--radius); overflow:hidden;
	margin:20px 0; min-height:420px;
}
.hero-slide{
	position:absolute; inset:0; display:flex; align-items:flex-end;
	background-size:cover; background-position:center;
	opacity:0; visibility:hidden; transition:opacity .6s ease;
	z-index:1;
}
.hero-slide.active{ opacity:1; visibility:visible; z-index:2; position:relative; }
.hero-slide::before{
	content:''; position:absolute; inset:0;
	background:linear-gradient(90deg, rgba(10,13,22,.95) 10%, rgba(10,13,22,.5) 60%, transparent 100%);
}
.hero-content{ position:relative; z-index:2; padding:36px; max-width:650px; }
.hero-logo{ max-width:280px; max-height:90px; object-fit:contain; margin-bottom:16px; }
.hero-badge{
	display:inline-flex; align-items:center; gap:5px; background:var(--accent); color:#fff; font-size:11px; font-weight:700;
	padding:5px 12px; border-radius:12px; margin-bottom:14px; text-transform:uppercase; letter-spacing:.5px;
}
.hero-content h1{ font-size:40px; font-weight:800; line-height:1.1; margin-bottom:14px; color:#fff; }
.hero-content p{ color:#c7c9dc; font-size:14px; margin-bottom:14px; max-width:480px; }
.hero-meta{ display:inline-block; color:var(--accent-2); font-size:12px; font-weight:700; margin-bottom:14px; }
.hero-btns{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.hero-btns .btn-primary{
	display:inline-flex; align-items:center; gap:8px;
	background:var(--accent); color:#fff; padding:12px 26px; border-radius:8px; font-weight:700; font-size:14px;
	transition:.2s;
}
.hero-btns .btn-primary:hover{ background:var(--accent-hover); }
.hero-btns .btn-secondary{
	display:inline-flex; align-items:center; gap:6px;
	background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff;
	padding:12px 26px; border-radius:8px; font-weight:700; font-size:14px;
}
.hero-dots{ position:absolute; bottom:16px; right:24px; display:flex; gap:6px; z-index:5; }
.hero-dots span{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.3); transition:.3s; cursor:pointer; }
.hero-dots span.active{ background:var(--accent); width:20px; border-radius:4px; }

/* =========================================================
   6. SOCIAL STRIP (below hero)
========================================================= */
.social-strip{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:18px 0 30px; }
.social-strip-btn{
	display:flex; align-items:center; gap:8px; padding:10px 20px; border-radius:8px;
	font-weight:700; font-size:13px; color:#fff; transition:.2s; opacity:.92;
}
.social-strip-btn:hover{ opacity:1; transform:translateY(-2px); }
.social-strip-btn.discord{ background:#5865F2; }
.social-strip-btn.donate{ background:#22c55e; }
.social-strip-btn.console{ background:#3b82f6; }
.social-strip-btn.instagram{ background:#e1306c; }

/* =========================================================
   7. SECTION HEADERS / TABS
========================================================= */
.section-header{
	display:flex; align-items:center; justify-content:space-between; margin:36px 0 18px;
	flex-wrap:wrap; gap:12px;
}
.section-header h2{ display:flex; align-items:center; gap:10px; font-size:21px; font-weight:800; }
.section-header .see-all{ display:flex; align-items:center; gap:4px; font-size:13px; color:var(--accent); font-weight:600; }
.tabs{ display:flex; gap:8px; background:var(--bg-card); border:1px solid var(--border); padding:4px; border-radius:20px; flex-wrap:wrap; }
.tabs a{ padding:7px 16px; border-radius:16px; font-size:13px; font-weight:600; color:var(--text-muted); }
.tabs a.active{ background:var(--accent); color:#fff; }

/* =========================================================
   8. GAME CARDS / GRIDS
========================================================= */
.games-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; }
.games-row{ display:grid; grid-auto-flow:column; grid-auto-columns:150px; gap:16px; overflow-x:auto; padding-bottom:10px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }

.game-card{
	background:var(--bg-card); border:1px solid var(--border); border-radius:10px; overflow:hidden;
	transition:transform .2s, border-color .2s; display:block;
}
.game-card:hover{ transform:translateY(-4px); border-color:var(--accent); }
.game-thumb{ position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--border); }
.game-thumb img{ width:100%; height:100%; object-fit:cover; }
.game-thumb .badge{
	position:absolute; top:8px; left:8px; background:var(--accent); color:#fff; font-size:10px;
	font-weight:700; padding:3px 8px; border-radius:5px; text-transform:uppercase;
}
.game-info{ padding:10px; }
.game-info h3{ font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; }
.game-info .cat{ font-size:11px; color:var(--text-muted); }

/* =========================================================
   9. FEATURED SPOTLIGHT
========================================================= */
.spotlight{
	background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
	display:flex; gap:24px; padding:24px; margin:36px 0; flex-wrap:wrap;
}
.spotlight-thumb{ width:220px; border-radius:10px; overflow:hidden; flex-shrink:0; }
.spotlight-info{ flex:1; min-width:250px; }
.spotlight-pick{
	display:inline-flex; align-items:center; gap:6px;
	background:linear-gradient(90deg,#ff7a00,#ff3d3d); color:#fff; font-size:11px;
	font-weight:700; padding:5px 12px; border-radius:12px; margin-bottom:10px; text-transform:uppercase;
}
.spotlight-info h3{ font-size:24px; font-weight:800; margin-bottom:10px; }
.spotlight-meta{ display:flex; gap:16px; flex-wrap:wrap; color:var(--text-muted); font-size:13px; margin-bottom:12px; }
.spotlight-meta span{ display:flex; align-items:center; gap:5px; }
.spotlight-meta strong{ color:var(--text); }
.spotlight-desc{ color:var(--text-muted); font-size:14px; margin-bottom:16px; max-width:600px; }
.spotlight-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.spotlight-tags span{ background:var(--bg); border:1px solid var(--border); padding:5px 12px; border-radius:6px; font-size:12px; }
.btn-view-details{
	display:inline-flex; align-items:center; gap:8px;
	background:var(--accent); color:#fff !important; padding:12px 24px; border-radius:8px; font-weight:700;
	font-size:14px; transition:.2s;
}
.btn-view-details:hover{ background:var(--accent-hover); }

/* =========================================================
   10. CURATED COLLECTIONS
========================================================= */
.collections-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.collection-card{ position:relative; border-radius:var(--radius); overflow:hidden; height:160px; display:block; }
.collection-card .stack{ position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.collection-card img{ width:100%; height:100%; object-fit:cover; }
.collection-card .overlay{
	position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.85), transparent 60%);
	display:flex; flex-direction:column; justify-content:flex-end; padding:14px;
}
.collection-card h4{ color:#fff; font-size:16px; font-weight:700; }
.collection-card p{ color:#c7c9dc; font-size:12px; }

/* =========================================================
   11. ARCHIVE / GAMES LIBRARY PAGE
========================================================= */
.archive-header{ padding:30px 0 10px; }
.archive-header h1{ font-size:28px; font-weight:800; margin-bottom:8px; }
.archive-header p{ color:var(--text-muted); font-size:14px; }

.breadcrumb{ display:flex; align-items:center; gap:8px; padding:18px 0 0; font-size:13px; color:var(--text-muted); }
.breadcrumb a:hover{ color:var(--accent); }
.breadcrumb .current{ color:var(--text); font-weight:600; }

.library-header{ text-align:center; padding:24px 0 20px; max-width:600px; margin:0 auto; }
.library-header h1{ font-size:30px; font-weight:800; margin-bottom:8px; }
.library-header p{ color:var(--text-muted); font-size:14px; }

.library-accordion{
	max-width:600px; margin:0 auto 16px; background:var(--bg-card); border:1px solid var(--border);
	border-radius:var(--radius-sm); overflow:hidden;
}
.library-accordion summary{
	display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
	cursor:pointer; font-weight:600; font-size:14px; list-style:none;
}
.library-accordion summary::-webkit-details-marker{ display:none; }
.library-accordion summary::marker{ display:none; content:''; }
.library-accordion summary::-moz-list-bullet{ list-style-type:none; }
.library-accordion summary span{ display:flex; align-items:center; gap:8px; }
.library-accordion[open] summary .gdh-icon-chevron-right{ transform:rotate(90deg); }
.library-accordion-body{ padding:0 18px 16px; color:var(--text-muted); font-size:13px; }

.library-search{
	max-width:560px; margin:0 auto 20px; display:flex; align-items:center; gap:10px;
	background:var(--bg-card); border:1px solid var(--border); border-radius:24px; padding:12px 20px;
	color:var(--text-muted);
}
.library-search input{ flex:1; background:none; border:none; outline:none; color:var(--text); font-size:14px; }

.library-tabs{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.library-tabs a{
	padding:9px 20px; border-radius:20px; font-size:13px; font-weight:700;
	background:var(--bg-card); border:1px solid var(--border); color:var(--text-muted);
}
.library-tabs a.active{ background:var(--accent); border-color:var(--accent); color:#fff; }

.library-alphabet{ text-align:center; margin-bottom:24px; }
.alpha-title{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted); font-weight:700; margin-bottom:10px; }
.alpha-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.alpha-row a{
	width:34px; height:34px; display:flex; align-items:center; justify-content:center;
	border-radius:8px; background:var(--bg-card); border:1px solid var(--border); font-size:12px; font-weight:600; color:var(--text-muted);
}
.alpha-row a.active{ background:var(--accent); border-color:var(--accent); color:#fff; }

.library-random-wrap{ text-align:center; margin-bottom:30px; }
.btn-random{
	display:inline-flex; align-items:center; gap:8px; background:linear-gradient(90deg,#ff3d6e,#ff6a3d);
	color:#fff; padding:12px 26px; border-radius:24px; font-weight:700; font-size:14px; transition:.2s;
}
.btn-random:hover{ opacity:.9; transform:translateY(-2px); }

.library-results-bar{
	display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;
	font-size:13px; color:var(--text-muted); flex-wrap:wrap; gap:10px;
}
.library-results-bar strong{ color:var(--text); }
.library-sort-select select{
	background:var(--bg-card); border:1px solid var(--border); color:var(--text);
	padding:7px 12px; border-radius:6px; font-size:13px;
}

/* Generic content card - used on Pages and for the Screenshots block */
.single-game-content{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; margin-bottom:22px; }
.single-game-content p{ margin-bottom:12px; color:var(--text-muted); }
.game-screenshots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:10px; }
.game-screenshots img{ border-radius:8px; border:1px solid var(--border); aspect-ratio:16/9; object-fit:cover; }

/* =========================================================
   12. SINGLE GAME PAGE (redesigned)
========================================================= */
.back-link{ display:inline-flex; align-items:center; gap:6px; color:var(--text-muted); font-size:13px; font-weight:600; margin:20px 0 0; }
.back-link:hover{ color:var(--accent); }
.single-game{ padding-bottom:60px; }

/* --- Hero --- */
.game-hero{ position:relative; display:grid; grid-template-columns:280px 1fr; gap:30px; margin-top:20px; padding:24px; border-radius:var(--radius); overflow:hidden; }
.game-hero-bg{
	position:absolute; inset:0; background-size:cover; background-position:center 20%;
	filter:blur(2px) brightness(.45); transform:scale(1.1); z-index:0;
}
.game-hero-bg::after{ content:''; }
.game-hero > *:not(.game-hero-bg){ position:relative; z-index:1; }
.game-hero::before{
	content:''; position:absolute; inset:0; z-index:0;
	background:linear-gradient(90deg, var(--bg) 15%, rgba(10,13,22,.55) 60%, rgba(10,13,22,.15) 100%);
}
.game-hero-poster{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,.5); }
.game-hero-poster img{ width:100%; height:100%; object-fit:cover; }
.game-hero-info{ display:flex; flex-direction:column; gap:10px; }
.game-eyebrow{ color:var(--text-muted); font-size:13px; }
.game-hero-info h1{ font-size:32px; font-weight:800; }

.game-hero-ad{ display:inline-block; margin-top:10px; align-self:flex-start; border-radius:8px; overflow:hidden; }
.game-hero-ad img{ max-width:100%; display:block; }

.btn-join-discord{
	position:absolute; top:0; right:0; display:flex; align-items:center; gap:8px;
	background:#5865F2; color:#fff !important; padding:10px 18px; border-radius:10px; font-weight:700; font-size:13px;
}

.game-rating-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; }
.rating-label{ font-size:11px; font-weight:700; color:var(--text-muted); letter-spacing:.4px; }
.rating-stars{ color:#f5b400; letter-spacing:1px; }
.rating-text{ color:var(--text-muted); }
.rating-recommend{ display:flex; align-items:center; gap:5px; color:var(--accent-2); font-weight:600; }

.game-meta-row{ display:flex; gap:14px; flex-wrap:wrap; color:var(--text-muted); font-size:13px; }

.game-badges-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.badge-version{ background:var(--accent-2); color:#0a0d16; font-weight:800; font-size:12px; padding:5px 12px; border-radius:6px; }
.badge-latest{ display:flex; align-items:center; gap:6px; background:var(--bg-card); border:1px solid var(--border); padding:5px 12px; border-radius:6px; font-size:12px; font-weight:700; }
.badge-latest .dot{ width:7px; height:7px; border-radius:50%; background:#22c55e; display:inline-block; }
.btn-favorite,.btn-report{
	display:flex; align-items:center; gap:6px; background:var(--bg-card); border:1px solid var(--border);
	padding:8px 14px; border-radius:8px; font-size:12px; font-weight:700; color:var(--text);
}
.btn-favorite.active{ color:#ff3d6e; border-color:#ff3d6e; }
.btn-favorite .heart-icon{ font-size:14px; }
.btn-vote{
	display:flex; align-items:center; gap:6px; background:var(--bg-card); border:1px solid var(--border);
	padding:8px 12px; border-radius:8px; font-size:12px; font-weight:700; color:var(--text);
}
.btn-vote:hover{ border-color:var(--accent); }

.game-genres-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; }
.genres-label{ display:flex; align-items:center; gap:4px; color:var(--text-muted); font-weight:700; }
.genre-tag{ padding:6px 14px; border-radius:6px; font-size:12px; font-weight:700; border:1px solid var(--border); }
.genre-tag-0{ background:rgba(108,92,231,.15); color:#a99bff; border-color:rgba(108,92,231,.4); }
.genre-tag-1{ background:rgba(0,212,170,.15); color:#5eead4; border-color:rgba(0,212,170,.4); }
.genre-tag-2{ background:rgba(255,122,0,.15); color:#ffb46b; border-color:rgba(255,122,0,.4); }
.genre-tag-3{ background:rgba(59,130,246,.15); color:#93c5fd; border-color:rgba(59,130,246,.4); }
.genre-tag-4{ background:rgba(34,197,94,.15); color:#86efac; border-color:rgba(34,197,94,.4); }
.genre-tag-5{ background:rgba(255,61,110,.15); color:#ff9db3; border-color:rgba(255,61,110,.4); }

.btn-download-main{
	display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
	background:linear-gradient(90deg,#ff3d6e,#ff5c3d); color:#fff; border:none;
	padding:13px 28px; border-radius:10px; font-weight:800; font-size:14px; margin-top:6px;
}
.btn-download-main:hover{ opacity:.92; }

/* --- Sections --- */
.game-section{ margin-top:40px; }
.game-section-title{ display:flex; align-items:center; gap:10px; font-size:19px; font-weight:800; margin-bottom:16px; }
.game-section-body.prose p{ margin-bottom:14px; color:var(--text-muted); font-size:14px; line-height:1.7; }
.game-section-body.prose a{ color:var(--accent); }

/* --- Two column: Installation Guide + System Requirements --- */
.game-two-col{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px; }
.game-card-box{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; }
.card-box-header{ display:flex; align-items:center; gap:12px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--border); }
.card-box-icon{ width:40px; height:40px; border-radius:8px; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--accent); flex-shrink:0; }
.card-box-header h3{ font-size:15px; font-weight:700; }
.card-box-header p{ font-size:12px; color:var(--text-muted); }

.install-steps{ list-style:none; margin-bottom:20px; }
.install-steps li{ display:flex; align-items:flex-start; gap:12px; padding:0 0 16px 0; position:relative; font-size:13px; color:var(--text-muted); }
.install-steps li:not(:last-child)::before{ content:''; position:absolute; left:11px; top:24px; bottom:0; width:1px; background:var(--border); }
.step-num{
	width:24px; height:24px; border-radius:50%; border:1px solid var(--accent); color:var(--accent);
	display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0;
}

.important-notes-box{ background:var(--bg); border-radius:var(--radius-sm); padding:16px; }
.important-notes-box h4{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; margin-bottom:4px; color:#f5a623; }
.important-notes-box .notes-sub{ font-size:11px; color:var(--text-muted); margin-bottom:10px; }
.important-notes-box ul{ padding-left:0; }
.important-notes-box ul li{ font-size:12.5px; color:var(--text-muted); margin-bottom:8px; padding-left:16px; position:relative; }
.important-notes-box ul li::before{ content:''; position:absolute; left:0; top:6px; width:5px; height:5px; border-radius:50%; background:#f5a623; }

.req-note-bar{
	background:var(--bg); border:1px solid var(--border); border-radius:6px; text-align:center;
	padding:8px; font-size:11px; font-weight:700; letter-spacing:.4px; color:var(--text-muted); margin-bottom:16px;
	text-transform:uppercase;
}
.sysreq-list{ display:flex; flex-direction:column; }
.sysreq-row{ display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--border); font-size:13px; }
.sysreq-row:last-child{ border-bottom:none; }
.sysreq-row .sysreq-label{ color:var(--text-muted); font-weight:600; }
.sysreq-row .sysreq-value{ color:var(--text); font-weight:700; text-align:right; }

/* --- Download Now (below sysreq) --- */
.download-now-wrap{ display:flex; align-items:center; justify-content:center; gap:20px; margin:40px 0; }
.btn-download-now{
	display:flex; align-items:center; gap:12px; background:linear-gradient(90deg,#00d4aa,#00b894);
	color:#0a0d16; border:none; padding:16px 34px; border-radius:12px; box-shadow:0 0 30px rgba(0,212,170,.35);
	cursor:pointer;
}
.btn-download-now span{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.btn-download-now strong{ font-size:15px; font-weight:800; }
.btn-download-now small{ font-size:11px; opacity:.75; font-weight:600; }
.download-arrow-nav{ color:var(--accent); font-size:20px; font-weight:700; opacity:.5; }

/* --- Reviews --- */
.reviews-list{ margin-bottom:30px; }
.review-item{ display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--border); }
.review-avatar{
	width:40px; height:40px; border-radius:50%; background:var(--accent); color:#fff;
	display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;
}
.review-content{ flex:1; }
.review-top{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.review-name{ font-weight:700; font-size:14px; }
.review-date{ color:var(--text-muted); font-size:12px; }
.review-stars{ color:#f5b400; font-size:13px; margin-bottom:6px; letter-spacing:1px; }
.review-text{ color:var(--text-muted); font-size:13px; }

.review-form-box{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:24px; }
.review-form-box h3{ font-size:17px; font-weight:800; margin-bottom:18px; }
.review-rating-field label,
.comment-form-author label,
.comment-form-comment label{ display:block; font-size:13px; font-weight:700; margin-bottom:8px; }
.gdh-star-input{ display:inline-flex; gap:6px; font-size:24px; color:#3a3f5c; cursor:pointer; }
.gdh-star-input span.active{ color:#f5b400; }
.review-form-box input[type="text"],
.review-form-box textarea{
	width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text);
	border-radius:8px; padding:11px 14px; font-size:13px; margin-bottom:16px; resize:vertical;
}
.submit-review-btn{
	background:var(--accent); color:#fff; border:none; padding:11px 26px; border-radius:8px;
	font-weight:700; font-size:13px; cursor:pointer;
}
.submit-review-btn:hover{ background:var(--accent-hover); }

/* --- Download Link Modal --- */
.gdh-modal-overlay{
	position:fixed; inset:0; background:rgba(5,6,12,.8); display:none; align-items:center; justify-content:center;
	z-index:3000; padding:16px; backdrop-filter:blur(4px);
}
.gdh-modal-overlay.active{ display:flex; }
.gdh-modal{ background:var(--bg-elevated); border:1px solid var(--accent); border-radius:var(--radius); width:100%; max-width:480px; box-shadow:0 0 40px rgba(108,92,231,.25); }
.gdh-modal-header{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border); }
.gdh-modal-title{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:15px; }
.gdh-modal-close{ background:var(--bg-card); border:1px solid var(--border); color:var(--text); width:30px; height:30px; border-radius:8px; font-size:16px; }
.gdh-modal-body{ padding:18px 20px; }
.gdh-modal-group-label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); margin-bottom:10px; }
.gdh-modal-link-row{
	display:flex; align-items:center; gap:12px; background:var(--bg-card); border:1px solid var(--border);
	border-radius:10px; padding:12px 14px; margin-bottom:10px;
}
.gdh-modal-link-icon{ width:32px; height:32px; border-radius:8px; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--accent); }
.gdh-modal-link-name{ flex:1; font-weight:700; font-size:14px; }
.gdh-modal-download-btn{
	display:flex; align-items:center; gap:6px; background:var(--accent); color:#fff !important;
	padding:8px 16px; border-radius:8px; font-size:12px; font-weight:700;
}
.gdh-modal-download-btn:hover{ background:var(--accent-hover); }
.game-screenshots img{ border-radius:8px; border:1px solid var(--border); aspect-ratio:16/9; object-fit:cover; }

.content-wrap{ display:grid; grid-template-columns:1fr 300px; gap:24px; }
.widget{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:18px; }
.widget h3{ display:flex; align-items:center; gap:8px; font-size:15px; margin-bottom:12px; border-bottom:2px solid var(--accent); padding-bottom:8px; }
.widget ul li{ margin-bottom:9px; font-size:13px; }
.widget ul li a:hover{ color:var(--accent); }

.pagination{ display:flex; justify-content:center; gap:8px; margin:30px 0; flex-wrap:wrap; }
.pagination a,.pagination span{ padding:8px 14px; background:var(--bg-card); border:1px solid var(--border); border-radius:6px; font-size:13px; }
.pagination .current{ background:var(--accent); color:#fff; }

/* =========================================================
   13. 404 PAGE
========================================================= */
.error-404-page{ padding:80px 0; text-align:center; }
.error-404-page h1{ font-size:60px; color:var(--accent); font-weight:800; }
.error-404-page p{ color:var(--text-muted); margin:15px 0 25px; }
.error-404-page .btn-view-details{ display:inline-flex; }

/* =========================================================
   14. FOOTER
========================================================= */
.site-footer{ background:var(--bg-elevated); border-top:1px solid var(--border); padding:40px 0 20px; margin-top:50px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; margin-bottom:30px; }
.footer-grid > div:first-child p{ margin-bottom:18px; color:var(--text-muted); font-size:13px; }
.join-title{ font-size:12px; letter-spacing:.5px; color:var(--text-muted); margin-bottom:12px; font-weight:700; }
.footer-social-buttons{ display:flex; gap:10px; flex-wrap:wrap; }
.social-btn{
	display:flex; align-items:center; gap:8px; padding:9px 16px; border-radius:8px;
	background:var(--bg-card); border:1px solid var(--border); font-size:13px; font-weight:600; color:var(--text);
	transition:.2s;
}
.social-btn:hover{ border-color:var(--accent); color:var(--accent); }
.footer-grid h4{ font-size:14px; margin-bottom:14px; }
.footer-grid ul li{ margin-bottom:8px; }
.footer-grid ul li a{ color:var(--text-muted); font-size:13px; }
.footer-grid ul li a:hover{ color:var(--accent); }
.footer-bottom{ border-top:1px solid var(--border); padding-top:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; color:var(--text-muted); font-size:13px; align-items:center; }
.footer-bottom .designed-by{ color:var(--accent-2); font-weight:600; }
.footer-share{ display:flex; align-items:center; gap:12px; font-size:13px; flex-wrap:wrap; }
.footer-share a{
	width:32px; height:32px; border-radius:50%; background:var(--bg-card); border:1px solid var(--border);
	display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:.2s;
}
.footer-share a:hover{ color:var(--accent); border-color:var(--accent); }

/* =========================================================
   16. TOP / TRENDING RANKING PAGES
========================================================= */
.rank-page-header{
	background:linear-gradient(135deg,var(--bg-card),var(--bg)); border:1px solid var(--border);
	border-radius:var(--radius); padding:36px; margin-top:20px; position:relative; overflow:hidden;
}
.rank-header-badge{
	display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:#fff;
	font-size:11px; font-weight:700; padding:5px 12px; border-radius:12px; margin-bottom:14px; text-transform:uppercase;
}
.rank-badge-red{ background:#ff3d3d; }
.rank-page-header h1{ font-size:30px; font-weight:800; margin-bottom:6px; }
.rank-page-header p{ color:var(--text-muted); font-size:14px; margin-bottom:18px; }
.rank-header-stats{ display:flex; gap:14px; flex-wrap:wrap; }
.rank-header-stats span{
	display:flex; align-items:center; gap:8px; background:var(--bg-elevated); border:1px solid var(--border);
	padding:9px 16px; border-radius:20px; font-size:13px; color:var(--text-muted);
}
.rank-header-stats strong{ color:var(--text); }

.rank-spotlight-wrap{ display:grid; grid-template-columns:1.6fr 1fr; gap:20px; margin-top:24px; }
.rank-spotlight-card{
	position:relative; border-radius:var(--radius); overflow:hidden; min-height:260px;
	display:flex; align-items:flex-end; border:1px solid var(--border);
}
.rank-spotlight-bg{ position:absolute; inset:0; background:var(--bg-card) center/cover no-repeat; }
.rank-spotlight-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,13,22,.95),rgba(10,13,22,.4)); }
.rank-spotlight-badge{
	position:absolute; top:16px; left:16px; z-index:2; display:flex; align-items:center; gap:6px;
	background:var(--accent); color:#fff; font-size:11px; font-weight:700; padding:6px 14px; border-radius:12px; text-transform:uppercase;
}
.rank-spotlight-red{ }
.rank-spotlight-info{ position:relative; z-index:2; padding:24px; }
.rank-spotlight-info h2{ color:#fff; font-size:24px; font-weight:800; margin-bottom:8px; }
.rank-spotlight-info span{ display:flex; align-items:center; gap:6px; color:var(--accent-2); font-size:13px; font-weight:700; }

.rank-list{ display:flex; flex-direction:column; gap:10px; }
.rank-list-row{
	display:flex; align-items:center; gap:12px; background:var(--bg-card); border:1px solid var(--border);
	border-radius:var(--radius-sm); padding:10px; flex:1;
}
.rank-num{
	width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; font-weight:800;
	font-size:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.rank-num-red{ background:#ff3d3d; }
.rank-thumb{ width:44px; height:44px; border-radius:8px; background:var(--bg) center/cover no-repeat; flex-shrink:0; }
.rank-info{ display:flex; flex-direction:column; overflow:hidden; }
.rank-info strong{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-info small{ color:var(--text-muted); font-size:11px; }

.rank-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:24px 0; }
.rank-stat-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px; }
.rank-stat-highlight{ border-color:var(--accent); }
.stat-label{ display:block; font-size:11px; color:var(--text-muted); margin-bottom:8px; text-transform:uppercase; letter-spacing:.4px; }
.stat-value{ display:block; font-size:24px; font-weight:800; margin-bottom:8px; }
.stat-green{ color:#22c55e; } .stat-blue{ color:#3b82f6; } .stat-orange{ color:#f5a623; } .stat-red{ color:#ff3d3d; }
.stat-tag{ font-size:10px; font-weight:700; padding:3px 8px; border-radius:10px; text-transform:uppercase; }
.stat-tag-green{ background:rgba(34,197,94,.15); color:#4ade80; }
.stat-tag-blue{ background:rgba(59,130,246,.15); color:#93c5fd; }
.stat-tag-orange{ background:rgba(245,166,35,.15); color:#fbbf24; }
.stat-tag-red{ background:rgba(255,61,61,.15); color:#ff8080; }

.rank-section-title{ font-size:20px; font-weight:800; margin:36px 0 16px; }

/* =========================================================
   17. COLLECTIONS (front-end)
========================================================= */
.collections-page-header{ text-align:center; padding:36px 0 24px; max-width:680px; margin:0 auto; }
.collections-badge{
	display:inline-flex; align-items:center; gap:6px; background:var(--bg-card); border:1px solid var(--border);
	color:var(--accent); font-size:11px; font-weight:700; padding:6px 14px; border-radius:12px; margin-bottom:14px; text-transform:uppercase;
}
.collections-page-header h1{ font-size:32px; font-weight:800; margin-bottom:10px; }
.collections-page-header p{ color:var(--text-muted); font-size:14px; margin-bottom:18px; }
.collections-about-accordion{ text-align:left; }

.collections-cards-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; margin:24px 0 50px; }
.collection-card-item{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:.2s; }
.collection-card-item:hover{ border-color:var(--accent); transform:translateY(-3px); }
.collection-card-cover{ aspect-ratio:16/10; overflow:hidden; background:var(--bg); }
.collection-card-cover img{ width:100%; height:100%; object-fit:cover; }
.collection-mosaic{ display:grid; grid-template-columns:repeat(4,1fr); height:100%; }
.collection-mosaic img{ width:100%; height:100%; object-fit:cover; }
.collection-card-body{ padding:14px; }
.collection-card-body h3{ font-size:15px; font-weight:700; margin-bottom:4px; }
.collection-card-body span{ font-size:12px; color:var(--text-muted); }

/* =========================================================
   18. RESPONSIVE / MOBILE OPTIMIZATION
========================================================= */

/* Tablets */
@media (max-width:1024px){
	.games-grid{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
	.games-row{ grid-auto-columns:130px; }
	.content-wrap{ grid-template-columns:1fr 260px; }
}

/* Small tablets / large phones */
@media (max-width:900px){
	.content-wrap{ grid-template-columns:1fr; }
	.footer-grid{ grid-template-columns:1fr 1fr; }
	.hero-content h1{ font-size:32px; }
}

@media (max-width:768px){
	:root{ --container-pad:16px; }

	.main-nav{
		display:none; position:absolute; top:100%; left:0; width:100%; background:var(--bg-elevated);
		flex-direction:column; padding:16px; border-bottom:1px solid var(--border); box-shadow:var(--shadow);
	}
	.main-nav.active{ display:flex; }
	.main-nav ul{ flex-direction:column; gap:6px; width:100%; }
	.main-nav ul li a{ display:block; padding:10px 4px; border-bottom:1px solid var(--border); }
	.menu-toggle{ display:flex; }

	.btn-community-text{ display:none; }
	.btn-community{ padding:9px; width:38px; height:38px; justify-content:center; border-radius:50%; }

	.hero-slider{ min-height:340px; }
	.hero-content{ padding:24px; max-width:100%; }
	.hero-content h1{ font-size:26px; }
	.hero-content p{ font-size:13px; }
	.hero-btns .btn-primary,.hero-btns .btn-secondary{ padding:11px 18px; font-size:13px; flex:1; justify-content:center; }

	.section-header h2{ font-size:18px; }
	.games-grid{ grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; }
	.games-row{ grid-auto-columns:120px; gap:10px; }
	.game-info h3{ font-size:12px; }

	.spotlight{ flex-direction:column; padding:16px; gap:16px; }
	.spotlight-thumb{ width:100%; }
	.spotlight-info h3{ font-size:20px; }

	.collections-grid{ grid-template-columns:1fr 1fr; }
	.collection-card{ height:120px; }

	.footer-grid{ grid-template-columns:1fr; gap:24px; text-align:left; }
	.footer-bottom{ flex-direction:column; align-items:flex-start; }

	.single-game-header h1{ font-size:22px; }
	.search-modal-overlay{ padding-top:6vh; }
	.sysreq-grid{ grid-template-columns:1fr; }

	.library-header h1{ font-size:24px; }
	.alpha-row a{ width:30px; height:30px; font-size:11px; }
	.library-results-bar{ flex-direction:column; align-items:flex-start; }

	.game-hero{ grid-template-columns:1fr; }
	.game-hero-poster{ max-width:220px; margin:0 auto; }
	.game-hero-info h1{ font-size:24px; }
	.btn-join-discord{ position:static; margin-top:10px; align-self:flex-start; }
	.game-two-col{ grid-template-columns:1fr; }
	.download-now-wrap{ flex-direction:column; gap:10px; }
	.download-arrow-nav{ display:none; }
	.review-form-box{ padding:18px; }

	.rank-spotlight-wrap{ grid-template-columns:1fr; }
	.rank-stats-grid{ grid-template-columns:1fr 1fr; }
	.rank-page-header{ padding:22px; }
	.rank-page-header h1{ font-size:24px; }
	.collections-cards-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:480px){
	.hero-content h1{ font-size:22px; }
	.hero-badge{ font-size:10px; }
	.games-grid{ grid-template-columns:repeat(2,1fr); }
	.rank-stats-grid{ grid-template-columns:1fr; }
	.collections-cards-grid{ grid-template-columns:1fr; }
	.collections-grid{ grid-template-columns:1fr; }
	.social-strip{ gap:8px; }
	.social-strip-btn{ padding:9px 14px; font-size:12px; }
	.game-screenshots{ grid-template-columns:1fr 1fr; }
	.icon-btn{ width:34px; height:34px; }
}