/*
Theme Name: Games Download Hub
Theme URI: https://example.com
Author: GameFato
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; }

.search-live-results{ display:none; max-height:360px; overflow-y:auto; }
.search-live-results.active{ display:block; }
.search-live-loading,
.search-live-empty{ color:var(--text-muted); font-size:13px; padding:10px 0; }
.search-live-row{
	display:flex; align-items:center; gap:12px; padding:9px 6px; border-radius:8px; transition:.15s;
}
.search-live-row:hover{ background:var(--bg-card); }
.search-live-thumb{ width:40px; height:52px; border-radius:6px; background:var(--bg-card) center/cover no-repeat; flex-shrink:0; }
.search-live-info{ display:flex; flex-direction:column; gap:2px; overflow:hidden; }
.search-live-info strong{ font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-live-info small{ color:var(--text-muted); font-size:11.5px; }
.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 !important; border-radius:var(--radius) !important; overflow:hidden !important;
	margin:20px 0 !important; height:480px !important; min-height:480px !important; max-height:none !important;
}
.hero-slide{
	position:absolute; inset:0; width:100%; height:100%; display:flex; align-items:center;
	background-size:cover; background-position:center;
	opacity:0; visibility:hidden; z-index:1;
	transition:opacity .6s ease, transform .6s ease;
}
.hero-slide.active{ opacity:1 !important; visibility:visible; z-index:2; position:absolute !important; transform:none !important; }

/* Effect variants - the starting/transform state before a slide becomes active */
.hero-slide[data-effect="slide-left"]{ transform:translateX(40px); }
.hero-slide[data-effect="slide-right"]{ transform:translateX(-40px); }
.hero-slide[data-effect="slide-up"]{ transform:translateY(40px); }
.hero-slide[data-effect="zoom-in"]{ transform:scale(.92); }
.hero-slide[data-effect="zoom-out"]{ transform:scale(1.08); }
.hero-slide[data-effect="none"]{ transition:opacity 0s, transform 0s; }
.hero-slide::before{
	content:''; position:absolute; inset:0;
	background:linear-gradient(90deg, rgba(10,13,22,.88) 10%, rgba(10,13,22,.4) 50%, rgba(10,13,22,.05) 100%);
}
.hero-content{ position:relative; z-index:2; padding:0 40px; max-width:640px; }
.hero-logo{ max-width:260px; max-height:80px; object-fit:contain; margin-bottom:14px; }
.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:12px; text-transform:uppercase; letter-spacing:.5px;
}
.hero-content h1{ font-size:36px; font-weight:800; line-height:1.15; margin-bottom:12px; color:#fff; }
.hero-content p{ color:#c7c9dc; font-size:13.5px; margin-bottom:12px; max-width:460px; line-height:1.6; }
.hero-meta{ display:inline-block; color:var(--accent-2); font-size:12px; font-weight:700; margin-bottom:12px; }
.hero-btns{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.hero-btns .btn-primary{
	display:inline-flex; align-items:center; gap:8px;
	background:var(--accent); color:#fff; padding:11px 24px; border-radius:8px; font-weight:700; font-size:13.5px;
	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:11px 24px; border-radius:8px; font-weight:700; font-size:13.5px;
}
.hero-progress-track{ width:140px; height:3px; background:rgba(255,255,255,.15); border-radius:2px; margin-top:16px; overflow:hidden; }
.hero-progress-bar{ height:100%; width:0%; background:var(--accent); border-radius:2px; }
.hero-progress-bar.animating{ transition:width linear; }

.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-grid-capped{ max-height:888px; overflow:hidden; }
.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; z-index:2;
}

.game-thumb-overlay{
	position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; justify-content:space-between;
	padding:10px; opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
	background:linear-gradient(180deg, rgba(10,13,22,.85) 0%, rgba(10,13,22,.35) 35%, rgba(10,13,22,.35) 65%, rgba(10,13,22,.92) 100%);
}
.game-card:hover .game-thumb-overlay{ opacity:1; visibility:visible; }
.overlay-top{ display:flex; justify-content:space-between; gap:6px; }
.overlay-cat{ background:rgba(255,255,255,.12); color:#fff; font-size:9px; font-weight:700; padding:4px 8px; border-radius:5px; text-transform:uppercase; }
.overlay-version{ background:var(--accent-2); color:#0a0d16; font-size:9px; font-weight:800; padding:4px 8px; border-radius:5px; }
.overlay-view-icon{
	align-self:center; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.12);
	backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; color:#fff;
	border:1px solid rgba(255,255,255,.25); transition:.2s;
}
.game-card:hover .overlay-view-icon{ background:var(--accent); }
.overlay-bottom strong{ display:block; color:#fff; font-size:12.5px; line-height:1.25; margin-bottom:5px; }
.overlay-meta{ display:flex; gap:10px; }
.overlay-meta span{ display:flex; align-items:center; gap:4px; color:#c7c9dc; font-size:10.5px; }
.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{
	position:relative; 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; overflow:hidden;
}
.spotlight-bg{
	position:absolute; inset:0; background-size:cover; background-position:center 20%;
	filter:grayscale(.3) brightness(.9); opacity:.14; z-index:0;
}
.spotlight > *:not(.spotlight-bg){ position:relative; z-index:1; }
.spotlight-thumb{ width:220px; border-radius:10px; overflow:hidden; flex-shrink:0; box-shadow:0 10px 24px rgba(0,0,0,.4); }
.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; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.spotlight-tags .tags-label{ display:flex; align-items:center; gap:3px; color:var(--text-muted); font-size:12px; font-weight:700; }
.spotlight-tags span:not(.tags-label),
.spotlight-tags a{ background:var(--bg); border:1px solid var(--border); padding:5px 12px; border-radius:6px; font-size:12px; transition:.2s; }
.spotlight-tags a:hover{ color:var(--accent); border-color:var(--accent); }
.btn-view-details{
	display:inline-flex; align-items:center; gap:10px;
	background:var(--accent); color:#fff !important; padding:11px 22px; border-radius:8px; font-weight:700;
	font-size:14px; transition:.2s;
}
.btn-view-details:hover{ background:var(--accent-hover); }
.btn-view-details span{ display:flex; flex-direction:column; text-align:left; line-height:1.3; }
.btn-view-details small{ font-size:10.5px; font-weight:600; opacity:.8; }

/* =========================================================
   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; aspect-ratio:16/10; display:block;
	transition:transform .25s ease, box-shadow .25s ease; border:1px solid transparent;
}
.collection-card:hover{ transform:translateY(-5px) scale(1.02); box-shadow:0 14px 30px rgba(0,0,0,.4); border-color:var(--accent); }
.collection-card .stack{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,1fr); }
.collection-card .stack a{ display:block; position:relative; overflow:hidden; }
.collection-card img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.collection-card .stack a:hover img{ transform:scale(1.12); }
.collection-card .overlay{
	position:absolute; left:0; right:0; bottom:0; background:linear-gradient(0deg, rgba(0,0,0,.9) 40%, transparent 100%);
	display:flex; flex-direction:column; justify-content:flex-end; padding:34px 14px 12px; z-index:2;
}
.collection-card h4{ color:#fff; font-size:16px; font-weight:700; transition:color .2s; }
.collection-card:hover h4{ color:var(--accent-2); }
.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 10%;
	filter:grayscale(.4) brightness(.9); opacity:.16; 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) 35%, rgba(10,13,22,.5) 70%, rgba(10,13,22,.25) 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; }
.game-hero-ad-html{ margin-top:10px; max-width:100%; overflow:hidden; }
.game-hero-ad-html iframe,
.game-hero-ad-html ins{ max-width:100%; }

.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); transition:.2s; }
.genre-tag:hover{ filter:brightness(1.3); transform:translateY(-1px); }
.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{ font-weight:700; font-size:14px; }
.gdh-modal-link-info{ flex:1; display:flex; flex-direction:column; gap:3px; }
.gdh-link-status{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; width:fit-content; }
.gdh-link-status-dot{ width:6px; height:6px; border-radius:50%; }
.gdh-link-status-live{ color:#4ade80; }
.gdh-link-status-live .gdh-link-status-dot{ background:#22c55e; box-shadow:0 0 5px #22c55e; }
.gdh-link-status-dead{ color:#ff8080; }
.gdh-link-status-dead .gdh-link-status-dot{ background:#ff3d3d; box-shadow:0 0 5px #ff3d3d; }
.gdh-link-status-unchecked{ color:var(--text-muted); }
.gdh-link-status-unchecked .gdh-link-status-dot{ background:#565c78; }
.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); }

/* Report Form */
.gdh-report-field{ margin-bottom:14px; }
.gdh-report-field label{ display:block; font-size:13px; font-weight:700; margin-bottom:6px; }
.gdh-report-field input[type="text"],
.gdh-report-field input[type="email"],
.gdh-report-field input[type="url"],
.gdh-report-field select,
.gdh-report-field textarea{
	width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text);
	border-radius:8px; padding:10px 12px; font-size:13px; resize:vertical;
}
.gdh-report-note{ font-size:11px; color:var(--text-muted); margin-top:5px; }
.gdh-report-status{ font-size:13px; margin-bottom:12px; min-height:0; }
.gdh-report-status-success{ color:#4ade80; }
.gdh-report-status-error{ color:#ff8080; }
.gdh-report-submit-btn{ width:100%; justify-content:center; border:none; cursor:pointer; font-family:inherit; }
.gdh-report-submit-btn:disabled{ opacity:.6; cursor:default; }

/* Request a Game page */
.gdh-request-page-wrap{ max-width:600px; margin:0 auto 60px; }
.gdh-request-form{
	background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:28px;
}
.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-badge-green{ background:#22c55e; color:#0a0d16; }
.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-num-green{ background:#22c55e; color:#0a0d16; }
.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:transform .25s ease, box-shadow .25s ease, border-color .25s ease; display:flex; flex-direction:column;
}
.collection-card-item:hover{ transform:translateY(-5px); box-shadow:0 14px 30px rgba(0,0,0,.4); border-color:var(--accent); }
.collection-card-cover{ aspect-ratio:16/10; overflow:hidden; background:var(--bg); flex-shrink:0; }
.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 a{ display:block; position:relative; overflow:hidden; }
.collection-mosaic img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.collection-mosaic a:hover img{ transform:scale(1.12); }
.collection-card-body{ display:block; padding:14px; flex:1; }
.collection-card-body h3{ font-size:15px; font-weight:700; margin-bottom:4px; transition:color .2s; }
.collection-card-item:hover .collection-card-body h3{ color:var(--accent); }
.collection-card-body span{ font-size:12px; color:var(--text-muted); }

.collection-single-header{ padding:36px 0 28px; }
.back-to-collections{
	display:inline-flex; align-items:center; gap:6px; color:var(--text-muted); font-size:13px; font-weight:600;
	background:var(--bg-card); border:1px solid var(--border); padding:8px 16px; border-radius:20px; margin-bottom:20px;
}
.back-to-collections .gdh-icon{ transform:rotate(180deg); }
.back-to-collections:hover{ color:var(--accent); border-color:var(--accent); }
.collection-single-header h1{ font-size:34px; font-weight:800; margin-bottom:10px; }
.collection-single-desc{ color:var(--text-muted); font-size:14px; max-width:640px; margin-bottom:16px; }
.collection-count-pill{
	display:inline-flex; align-items:center; gap:6px; background:var(--bg-card); border:1px solid var(--border);
	padding:7px 16px; border-radius:20px; font-size:13px; font-weight:700; color:var(--text);
}

/* =========================================================
   19. INFO / LEGAL PAGES (About, Privacy, Terms, DMCA, Contact)
========================================================= */
.legal-page-header{ text-align:center; padding:40px 0 30px; max-width:600px; margin:0 auto; }
.legal-page-icon{
	display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px;
	border-radius:16px; background:var(--bg-card); border:1px solid var(--border); color:var(--accent); margin-bottom:16px;
}
.legal-page-header h1{ font-size:30px; font-weight:800; margin-bottom:12px; }
.legal-page-subtitle{ color:var(--text-muted); font-size:14px; margin-bottom:14px; }
.legal-updated-badge{
	display:inline-flex; align-items:center; gap:6px; background:var(--bg-card); border:1px solid var(--border);
	color:var(--text-muted); font-size:12px; font-weight:600; padding:6px 14px; border-radius:14px;
}

/* Stats row (About Us) */
.info-stats-row{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:30px; }
.info-stat-item{
	background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm);
	padding:16px 26px; text-align:center; min-width:130px;
}
.info-stat-item strong{ display:block; font-size:22px; font-weight:800; color:var(--accent); margin-bottom:4px; }
.info-stat-item span{ font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.3px; }

/* Lead intro paragraph */
.info-intro{ font-size:15.5px; color:var(--text); line-height:1.8; margin-bottom:26px; font-weight:500; }

/* Feature card grid (About Us / Contact Us) */
.info-feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:28px; }
.info-feature-card{
	background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:20px; text-align:center;
	transition:.2s;
}
.info-feature-card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.info-feature-icon{
	display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:12px;
	background:var(--bg-card); color:var(--accent); margin-bottom:12px;
}
.info-feature-card h4{ font-size:14px; font-weight:700; margin-bottom:6px; }
.info-feature-card p{ font-size:12.5px; color:var(--text-muted); line-height:1.6; }

/* Contact hero cards (Contact Us) - Email + Discord side by side */
.contact-hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:28px; }
.contact-hero-card{
	background:linear-gradient(135deg, rgba(108,92,231,.15), rgba(0,212,170,.08)); border:1px solid var(--accent);
	border-radius:var(--radius); padding:34px; text-align:center; margin-bottom:0; display:block; transition:.2s;
}
.contact-hero-card-discord{
	background:linear-gradient(135deg, rgba(88,101,242,.18), rgba(88,101,242,.06)); border-color:#5865F2;
}
.contact-hero-card-discord:hover{ transform:translateY(-3px); box-shadow:0 12px 24px rgba(88,101,242,.25); }
.contact-hero-icon{
	display:inline-flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:16px;
	background:var(--accent); color:#fff; margin-bottom:14px;
}
.contact-hero-icon-discord{ background:#5865F2; }
.contact-hero-card h3{ font-size:18px; font-weight:800; margin-bottom:10px; }
.contact-hero-email{
	display:inline-block; font-size:20px; font-weight:800; color:var(--accent) !important; margin-bottom:10px;
	word-break:break-word;
}
.contact-hero-card-discord .contact-hero-email{ color:#8891f5 !important; font-size:16px; }
.contact-hero-card p{ color:var(--text-muted); font-size:13px; }

.legal-help-discord-btn{ margin-top:8px; background:#5865F2 !important; }
.legal-help-discord-btn:hover{ background:#4752c4 !important; }


/* Section cards (used by all info pages) */
.info-section-card{ background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:22px; margin-bottom:16px; }
.info-section-highlight{ border-color:#f5a623; background:rgba(245,166,35,.06); }
.info-section-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.info-section-icon{
	display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:9px;
	background:var(--bg-card); color:var(--accent); flex-shrink:0;
}
.info-section-highlight .info-section-icon{ color:#f5a623; }
.info-section-head h2{ font-size:16px; font-weight:700; margin:0; padding:0; border:none; }
.info-section-body p{ color:var(--text-muted); font-size:14px; line-height:1.75; margin-bottom:10px; }
.info-section-body p:last-child{ margin-bottom:0; }
.info-section-body ul, .info-section-body ol{ margin:8px 0 0; padding-left:0; list-style:none; }
.info-section-body ul li, .info-section-body ol li{
	position:relative; padding-left:22px; margin-bottom:9px; color:var(--text-muted); font-size:14px; line-height:1.6;
}
.info-section-body ul li::before{
	content:''; position:absolute; left:2px; top:8px; width:5px; height:5px; border-radius:50%; background:var(--accent);
}
.info-section-body ol{ counter-reset:info-counter; }
.info-section-body ol li{ counter-increment:info-counter; }
.info-section-body ol li::before{
	content:counter(info-counter); position:absolute; left:0; top:0; width:16px; height:16px; border-radius:5px;
	background:var(--accent); color:#fff; font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center;
}

.legal-page-wrap{ display:grid; grid-template-columns:1fr 280px; gap:26px; padding-bottom:60px; align-items:start; }
.legal-content-box{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:32px; }

.legal-prose h2{ font-size:20px; font-weight:800; margin:28px 0 14px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.legal-prose h2:first-child{ margin-top:0; }
.legal-prose h3{ font-size:16px; font-weight:700; margin:22px 0 10px; color:var(--accent); }
.legal-prose p{ color:var(--text-muted); font-size:14.5px; line-height:1.8; margin-bottom:16px; }
.legal-prose ul, .legal-prose ol{ margin:0 0 18px; padding-left:0; list-style:none; }
.legal-prose ul li, .legal-prose ol li{
	position:relative; padding-left:24px; margin-bottom:10px; color:var(--text-muted); font-size:14.5px; line-height:1.6;
}
.legal-prose ul li::before{
	content:''; position:absolute; left:2px; top:9px; width:6px; height:6px; border-radius:50%; background:var(--accent);
}
.legal-prose ol{ counter-reset:legal-counter; }
.legal-prose ol li{ counter-increment:legal-counter; }
.legal-prose ol li::before{
	content:counter(legal-counter); position:absolute; left:0; top:0; width:18px; height:18px; border-radius:5px;
	background:var(--accent); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.legal-prose a{ color:var(--accent); }
.legal-prose strong{ color:var(--text); }
.legal-prose hr{ border:none; border-top:1px solid var(--border); margin:30px 0; }

.legal-email-link{
	display:inline-flex; align-items:center; gap:6px; background:var(--bg); border:1px solid var(--accent);
	color:var(--accent) !important; padding:4px 12px; border-radius:16px; font-weight:700; font-size:13.5px; text-decoration:none;
}
.legal-email-link:hover{ background:var(--accent); color:#fff !important; }

.legal-sidebar .widget{ position:sticky; top:90px; }
.legal-nav-list li{ margin-bottom:4px; }
.legal-nav-list li a{
	display:block; padding:9px 12px; border-radius:6px; font-size:13.5px; color:var(--text-muted); font-weight:600;
}
.legal-nav-list li a:hover{ background:var(--bg); color:var(--accent); }
.legal-nav-list li.current a{ background:var(--accent); color:#fff; }
.legal-help-widget p{ color:var(--text-muted); font-size:13px; margin-bottom:14px; }
.legal-help-widget .btn-view-details{ width:100%; justify-content:center; padding:10px; }

/* =========================================================
   20. LANGUAGE SWITCHER
========================================================= */
.lang-switcher{ position:relative; }
.lang-switcher-btn{ font-size:11px; font-weight:800; letter-spacing:.3px; }
.lang-dropdown{
	position:absolute; top:calc(100% + 8px); right:0; background:var(--bg-elevated); border:1px solid var(--border);
	border-radius:10px; box-shadow:var(--shadow); padding:8px; min-width:180px; max-height:320px; overflow-y:auto;
	display:none; z-index:1000;
}
.lang-dropdown.active{ display:block; }
.lang-option{
	display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; text-align:left;
	padding:9px 10px; border-radius:6px; font-size:13px; color:var(--text); cursor:pointer;
}
.lang-option:hover{ background:var(--bg-card); }
.lang-option.active{ color:var(--accent); }
.lang-code-badge{
	display:inline-flex; align-items:center; justify-content:center; width:28px; height:20px; border-radius:4px;
	background:var(--bg-card); border:1px solid var(--border); font-size:10px; font-weight:800; color:var(--text-muted); flex-shrink:0;
}
.lang-option:hover .lang-code-badge{ border-color:var(--accent); color:var(--accent); }

/* =========================================================
   21. MOBILE DRAWER (right-side slide-in menu)
========================================================= */
.mobile-drawer-overlay{
	position:fixed; inset:0; background:rgba(5,6,12,.75); z-index:1100;
	display:none; opacity:0; transition:opacity .25s ease;
}
.mobile-drawer-overlay.active{ display:block; opacity:1; }
.mobile-drawer{
	position:absolute; top:0; right:0; bottom:0; width:300px; max-width:85vw; background:var(--bg-elevated);
	transform:translateX(100%); transition:transform .3s ease; overflow-y:auto; display:flex; flex-direction:column;
}
.mobile-drawer-overlay.active .mobile-drawer{ transform:translateX(0); }
.mobile-drawer-progress{ height:3px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); flex-shrink:0; }

.mobile-drawer-nav{ padding:16px; display:flex; flex-direction:column; gap:6px; }
.mobile-drawer-row{
	display:flex; align-items:center; gap:12px; padding:12px; border-radius:10px; color:var(--text); font-size:14px; font-weight:600;
}
.mobile-drawer-row:hover{ background:var(--bg-card); }
.mobile-drawer-row > *:last-child{ margin-left:auto; color:var(--text-muted); }
.mobile-drawer-icon{
	width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.mobile-drawer-icon-green{ background:rgba(34,197,94,.15); color:#4ade80; }
.mobile-drawer-icon-purple{ background:rgba(108,92,231,.15); color:#a99bff; }
.mobile-drawer-icon-orange{ background:rgba(245,166,35,.15); color:#fbbf24; }
.mobile-drawer-icon-red{ background:rgba(255,61,61,.15); color:#ff8080; }
.mobile-drawer-icon-blue{ background:rgba(59,130,246,.15); color:#93c5fd; }
.mobile-drawer-icon-teal{ background:rgba(0,212,170,.15); color:#5eead4; }
.mobile-drawer-icon-pink{ background:rgba(255,61,110,.15); color:#ff9db3; }

.mobile-drawer-lang{ margin-top:auto; padding:16px; border-top:1px solid var(--border); }
.mobile-drawer-lang-label{ display:flex; align-items:center; gap:6px; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted); font-weight:700; margin-bottom:10px; }
.mobile-drawer-lang-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mobile-lang-option{ background:var(--bg-card); border:1px solid var(--border); border-radius:8px; }

/* =========================================================
   22. AD SLOTS
========================================================= */
.gdh-ad-slot{ display:flex; justify-content:center; align-items:center; margin:24px 0; overflow:hidden; }
.gdh-ad-desktop,
.gdh-ad-mobile{ max-width:100%; overflow:hidden; text-align:center; }
.gdh-ad-mobile{ display:none; }
@media (max-width:768px){
	.gdh-ad-desktop{ display:none; }
	.gdh-ad-mobile{ display:block; }
}

/* Hide Google Translate's default banner/iframe - we use our own switcher UI instead */
.goog-te-banner-frame.skiptranslate,
#goog-gt-tt, .goog-te-balloon-frame{ display:none !important; }
body{ top:0 !important; }
.goog-text-highlight{ background:none !important; box-shadow:none !important; }

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

/* Tablets */
@media (max-width:1024px){
	.games-grid{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
	.games-grid-capped{ max-height:700px; }
	.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; }
	.hero-slider{ height:420px !important; min-height:420px !important; }
}

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

	.main-nav{ display:none; }
	.menu-toggle{ display:flex; }
	.lang-switcher{ display:none; }

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

	.hero-slider{ height:420px !important; min-height:420px !important; }
	.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-grid-capped{ max-height:600px; }
	.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; }

	.legal-page-wrap{ grid-template-columns:1fr; }
	.legal-content-box{ padding:20px; }
	.legal-sidebar .widget{ position:static; }
	.info-feature-grid{ grid-template-columns:1fr; }
	.info-stats-row{ gap:8px; }
	.info-stat-item{ padding:12px 16px; min-width:100px; }
	.info-stat-item strong{ font-size:18px; }
	.contact-hero-grid{ grid-template-columns:1fr; }
	.contact-hero-card{ padding:22px; }
	.contact-hero-email{ font-size:16px; }
}

@media (max-width:480px){
	.hero-content h1{ font-size:22px; }
	.hero-badge{ font-size:10px; }
	.games-grid{ grid-template-columns:repeat(2,1fr); }
	.games-grid-capped{ max-height:820px; }
	.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; }
}