/* =========================================================
   EVE NEO — tema oscuro cinematográfico para CloudArcade
   Cambia los colores en :root (ej. --accent:#e10600 para rojo)
   ========================================================= */
:root {
	--bg: #05070d;
	--panel: #0e1424;
	--panel-2: #141c31;
	--line: rgba(255, 255, 255, .08);
	--text: #e9eefb;
	--muted: #8e9ab6;
	--accent: #0a6cff;
	--accent-2: #00c6ff;
	--glow: rgba(0, 150, 255, .45);
	--radius: 14px;
	--head: "Rajdhani", "Barlow Condensed", system-ui, sans-serif;
	--body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
	font-family: var(--body);
	color: var(--text);
	background:
		radial-gradient(1100px 600px at 85% -10%, rgba(10, 108, 255, .22), transparent 60%),
		radial-gradient(900px 520px at -10% 30%, rgba(0, 198, 255, .10), transparent 60%),
		var(--bg);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
}
a { color: var(--accent-2); }
a:hover { color: #fff; text-decoration: none; }
b, strong { color: #fff; }
::selection { background: var(--accent); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #1f2a44; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.site-content, .copyright { background: transparent; }
.site-container { max-width: none; padding: 0; }
.container { max-width: 1400px; }

/* ---------- Header ---------- */
.top-nav {
	position: sticky; top: 0; z-index: 1000;
	background: rgba(5, 7, 13, .72);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	border-bottom: 1px solid var(--line);
	padding: 8px 0;
}
.site-logo { width: auto; max-width: 220px; height: 46px; object-fit: contain; padding: 0; }
a.nav-link {
	color: var(--text) !important;
	font-family: var(--head); font-weight: 700; font-size: 15px; letter-spacing: .1em;
	padding: 8px 16px !important; border-radius: 999px;
	transition: background .25s, color .25s;
}
li.nav-item:hover { background: transparent; }
li.nav-item:hover a.nav-link { background: rgba(255, 255, 255, .08); }
.search-bar .input-group { flex-wrap: nowrap; }
input.search, input.search:focus {
	height: 42px; min-width: 230px;
	background: rgba(255, 255, 255, .06) !important;
	border: 1px solid var(--line) !important;
	border-right: 0 !important;
	color: var(--text) !important;
	border-radius: 999px 0 0 999px !important;
	padding-left: 18px; box-shadow: none !important;
}
input.search::placeholder { color: var(--muted); }
.btn-search {
	height: 42px; padding: 0 18px; color: #fff;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	border: 0; border-radius: 0 999px 999px 0 !important;
}
.btn-search:hover { color: #fff; filter: brightness(1.15); }

/* Categorías */
.nav-categories { background: rgba(255, 255, 255, .02); border-bottom: 1px solid var(--line); }
ul.list-categories { display: flex; flex-wrap: nowrap; gap: 8px; padding: 10px 0; overflow: hidden; }
ul.list-categories > a { flex: none; }
.list-categories li {
	float: none; padding: 6px 15px; border-radius: 999px;
	border: 1px solid var(--line); color: var(--muted);
	font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
	transition: all .25s;
}
.list-categories a:hover li, .list-categories li:hover {
	color: #fff; background: rgba(10, 108, 255, .18); border-color: var(--accent);
}
nav.greedy button {
	flex: none; margin-left: 8px; padding: 6px 16px; border-radius: 999px;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	font-weight: 700; font-size: 13px; letter-spacing: .06em;
}
nav.greedy button::after {
	width: 22px; height: 22px; font-size: 12px;
	background: #fff; color: var(--accent);
	margin-left: 8px; margin-right: -6px;
}
ul.hidden-links {
	background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .6); overflow: hidden;
}
ul.hidden-links a, ul.hidden-links li { color: var(--text); }
ul.hidden-links li:hover { background: rgba(255, 255, 255, .06); }

/* ---------- Hero ---------- */
.neo-hero {
	position: relative; overflow: hidden;
	height: clamp(440px, 64vh, 660px);
	border-bottom: 1px solid var(--line);
}
.neo-slide {
	position: absolute; inset: 0; opacity: 0; visibility: hidden;
	transition: opacity .9s ease, visibility .9s;
}
.neo-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.neo-slide-bg {
	position: absolute; inset: -60px;
	background: var(--hero) center / cover no-repeat;
	filter: blur(30px) brightness(.55) saturate(1.35);
	transform: scale(1.12);
}
.neo-slide::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(90deg, var(--bg) 6%, rgba(5, 7, 13, .65) 45%, rgba(5, 7, 13, .1)),
		linear-gradient(0deg, var(--bg) 0%, transparent 45%);
}
.neo-slide-inner {
	position: relative; z-index: 2; height: 100%;
	display: flex; align-items: center; justify-content: space-between; gap: 48px;
	padding-bottom: 70px;
}
.neo-copy { flex: 1; max-width: 580px; }
.neo-kicker {
	display: inline-flex; align-items: center; gap: 10px;
	font: 700 13px var(--head); letter-spacing: .25em; text-transform: uppercase;
	color: var(--accent-2);
}
.neo-kicker::before { content: ""; width: 30px; height: 2px; background: var(--accent-2); }
.neo-copy h1 {
	margin: 14px 0 12px; color: #fff;
	font: 700 clamp(40px, 6vw, 80px)/.95 var(--head);
	text-transform: uppercase; letter-spacing: .01em;
	text-shadow: 0 12px 40px rgba(0, 0, 0, .55);
}
.neo-copy p {
	color: #c3cce2; font-size: 17px; line-height: 1.55; max-width: 500px; margin: 0;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.neo-btn {
	display: inline-flex; align-items: center; gap: 12px; margin-top: 26px;
	padding: 15px 34px; border-radius: 999px; color: #fff !important;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	font: 700 17px var(--head); letter-spacing: .16em; text-transform: uppercase;
	box-shadow: 0 12px 32px var(--glow);
	transition: transform .25s, box-shadow .25s;
}
.neo-btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 18px 44px var(--glow); }
.neo-art {
	flex: none; width: min(42vw, 540px); aspect-ratio: 4 / 3;
	border-radius: 22px; overflow: hidden; display: block;
	box-shadow: 0 30px 90px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .12), 0 0 80px rgba(0, 140, 255, .25);
	transform: perspective(1200px) rotateY(-12deg) rotateX(4deg);
}
.neo-slide.is-active .neo-art { animation: neoFloat 7s ease-in-out infinite; }
.neo-art img { width: 100%; height: 100%; object-fit: cover; }
@keyframes neoFloat {
	0%, 100% { transform: perspective(1200px) rotateY(-12deg) rotateX(4deg) translateY(0); }
	50%      { transform: perspective(1200px) rotateY(-8deg) rotateX(2deg) translateY(-12px); }
}
.neo-dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: 24px; }
.neo-dots .container { display: flex; gap: 12px; }
.neo-dot {
	position: relative; width: 68px; height: 68px; padding: 0; overflow: hidden;
	border-radius: 14px; border: 2px solid transparent; background: var(--panel);
	opacity: .5; cursor: pointer; transition: all .3s;
}
.neo-dot:hover { opacity: .85; }
.neo-dot.is-active { opacity: 1; border-color: #fff; transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, .5); }
.neo-dot img { width: 100%; height: 100%; object-fit: cover; }
.neo-dot-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--accent-2); }
.neo-dot.is-active .neo-dot-bar { animation: neoBar 6s linear forwards; }
.neo-hero.is-paused .neo-dot.is-active .neo-dot-bar { animation-play-state: paused; }
@keyframes neoBar { to { width: 100%; } }

/* ---------- Secciones ---------- */
.game-container { margin: 34px 0; }
.neo-section { margin: 46px 0; }
.neo-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; }
.neo-head h2, h3.item-title {
	display: flex; align-items: center; gap: 14px; margin: 0;
	padding: 0; background: none; border-radius: 0;
	font: 700 clamp(22px, 2.4vw, 32px) var(--head); color: #fff;
	text-transform: uppercase; letter-spacing: .06em;
}
h3.item-title { margin: 34px 0 20px; }
.neo-head h2::before, h3.item-title::before {
	content: ""; width: 6px; height: 28px; border-radius: 4px;
	background: linear-gradient(var(--accent-2), var(--accent));
	box-shadow: 0 0 18px var(--glow);
}
h3.item-title i { display: none; }
.neo-arrows { display: flex; gap: 10px; }
.neo-arrows button {
	width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: #fff;
	transition: all .25s;
}
.neo-arrows button:hover { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 20px var(--glow); }

/* ---------- Grid de juegos ---------- */
.grid-layout {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	grid-auto-rows: auto; grid-auto-flow: dense; gap: 18px;
}
.grid-wrapper { margin-bottom: 0; }
.grid-item { background: none !important; border-radius: var(--radius); min-width: 0; }
.grid-item.neo-big { grid-column: span 2; grid-row: span 2; }

.neo-card {
	position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; isolation: isolate;
	border-radius: var(--radius); background: var(--panel);
	box-shadow: 0 0 0 1px var(--line), 0 8px 24px rgba(0, 0, 0, .35);
	transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s;
	animation: neoIn .7s cubic-bezier(.2, .8, .2, 1) both;
	animation-delay: var(--d, 0s);
}
.neo-big .neo-card { height: 100%; }
.neo-card img.small-thumb {
	width: 100%; height: 100%; object-fit: cover; border-radius: 0;
	transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .4s;
}
.neo-card::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(0deg, rgba(3, 5, 12, .92) 0%, rgba(3, 5, 12, .25) 45%, transparent 70%);
	opacity: 0; transition: opacity .4s;
}
.neo-shine {
	position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
	transform: translateX(-130%);
}
.neo-play {
	position: absolute; z-index: 3; top: 50%; left: 50%;
	width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
	display: grid; place-items: center; color: #fff; font-size: 20px;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	box-shadow: 0 0 0 6px rgba(255, 255, 255, .12), 0 10px 30px var(--glow);
	opacity: 0; transform: scale(.6); transition: all .35s cubic-bezier(.2, .8, .2, 1);
}
.neo-play i { margin-left: 4px; }
.neo-meta {
	position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 12px 14px;
	opacity: 0; transform: translateY(10px); transition: all .35s;
}
.neo-title {
	display: block; color: #fff; font-weight: 700; font-size: 14px; line-height: 1.25;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.neo-tag {
	display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px;
	background: var(--accent); color: #fff;
	font: 700 11px var(--head); letter-spacing: .18em; text-transform: uppercase;
}
.neo-card-big::after, .neo-card-big .neo-meta { opacity: 1; transform: none; }
.neo-card-big .neo-meta { padding: 22px; }
.neo-card-big .neo-title { font: 700 clamp(22px, 2.4vw, 34px)/1.05 var(--head); text-transform: uppercase; white-space: normal; }
.neo-card-big .neo-play { width: 76px; height: 76px; margin: -38px 0 0 -38px; font-size: 26px; }

.neo-card:hover, .neo-card:focus-visible {
	transform: translateY(-6px) scale(1.03); z-index: 5; outline: none;
	box-shadow: 0 0 0 2px var(--accent-2), 0 22px 50px rgba(0, 0, 0, .6), 0 0 40px var(--glow);
}
.neo-card:hover img.small-thumb { transform: scale(1.1); filter: saturate(1.2); }
.neo-card:hover::after, .neo-card:hover .neo-meta { opacity: 1; transform: none; }
.neo-card:hover .neo-play { opacity: 1; transform: scale(1); }
.neo-card:hover .neo-shine { transform: translateX(130%); transition: transform .9s ease; }
@media (hover: none) {
	.neo-card::after, .neo-meta { opacity: 1; transform: none; }
}
@keyframes neoIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }

/* Carrusel "Más jugados" */
.neo-rail {
	display: grid; grid-auto-flow: column; grid-auto-columns: clamp(170px, 18vw, 230px);
	gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	padding: 8px 4px 22px; margin: -8px -4px 0; scrollbar-width: none; counter-reset: neoRank;
}
.neo-rail::-webkit-scrollbar { display: none; }
.neo-rail .grid-item { scroll-snap-align: start; }
.neo-rail .neo-card::before {
	counter-increment: neoRank; content: counter(neoRank);
	position: absolute; z-index: 4; top: 10px; left: 10px;
	min-width: 30px; padding: 2px 9px; border-radius: 9px; text-align: center;
	font: 700 15px var(--head); color: #fff;
	background: rgba(3, 5, 12, .65); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, .15);
}

/* ---------- Página de juego ---------- */
.content-wrapper { margin-top: 10px; }
.game-iframe-container {
	border-radius: 20px; background: #000;
	box-shadow: 0 30px 90px rgba(0, 0, 0, .65), 0 0 0 1px var(--line), 0 0 70px rgba(0, 140, 255, .22);
}
.single-info-container {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
	margin: 22px 0; padding: 20px 24px;
	background: linear-gradient(180deg, var(--panel-2), var(--panel));
	border: 1px solid var(--line); border-radius: 18px;
}
.single-info-container .header-left { flex: 1; }
h1.single-title, .single-title {
	margin: 0; color: #fff;
	font: 700 clamp(26px, 3vw, 38px)/1.05 var(--head); text-transform: uppercase; letter-spacing: .03em;
}
.single-info-container p { color: var(--muted); margin: 6px 0 0; }
.stats-vote { margin: 0; }
.stats-vote i {
	width: 42px; height: 42px; line-height: 42px; text-align: center; border-radius: 50%;
	background: rgba(255, 255, 255, .06); color: var(--text); transition: all .25s;
}
.stats-vote i:hover { background: var(--accent); color: #fff; box-shadow: 0 0 20px var(--glow); }
.action-btn { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.single-icon {
	display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px;
	background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
}
.single-icon a { color: var(--text); font-weight: 600; font-size: 14px; }
.single-icon i { color: var(--accent-2); }
.social-icon { border-radius: 50%; }
.single-description, .single-instructions { color: #c3cce2; line-height: 1.7; margin: 8px 0 18px; }
.cat-link {
	display: inline-block; margin: 0 8px 8px 0; padding: 6px 16px; border-radius: 999px;
	background: rgba(10, 108, 255, .12); border: 1px solid rgba(10, 108, 255, .4); color: var(--text);
}
.cat-link:hover { background: var(--accent); color: #fff; }

/* Barra lateral */
.sidebar .widget, .sidebar > div {
	background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px;
}
h4.widget-title {
	color: #fff; border-bottom: 1px solid var(--line);
	font: 700 20px var(--head); text-transform: uppercase; letter-spacing: .08em;
}
.list-tile img, .sidebar img { border-radius: 12px; transition: transform .3s; }
.list-tile:hover img { transform: scale(1.06); }
.sidebar .list-title, .list-tile .list-title { color: var(--text); font-size: 13px; }

/* Paginación */
.page-link { background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.page-link:hover, .page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: #fff; }
.page-item.disabled .page-link { background: var(--panel) !important; color: var(--muted); border-color: var(--line); }

/* Footer */
.footer { background: transparent; border-top: 1px solid var(--line); margin-top: 40px; }
.copyright { color: var(--muted); border-top: 1px solid var(--line); }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.top-nav { padding: 6px 0; }
	#navb { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
	li.nav-item:hover { background: transparent; }
	input.search { min-width: 0; }
}
@media (max-width: 767px) {
	.neo-hero { height: 470px; }
	.neo-art { display: none; }
	.neo-slide-inner { padding-bottom: 90px; }
	.neo-dot { width: 52px; height: 52px; border-radius: 12px; }
	.grid-layout { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
	.grid-item.neo-big { grid-column: 1 / -1; grid-row: auto; }
	.neo-section { margin: 34px 0; }
	.neo-arrows { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}