@charset "UTF-8";
/* ==========================================================================
   Nexus Theme v2 - "TOP + LEFT + RIGHT" shell
   CrazyGames inspired portal layout.

   Structure
   ---------
   .nx-topbar   sticky full width bar (logo / search / user)
   .nx-shell    grid:  [ rail ] [ content column ]
   .nx-rail     left category directory (sticky, collapsible, drawer on mobile)
   .nx-col      right column = <main class="nx-content"> + <footer>

   Everything is fluid: no fixed breakpoints for the card grid (auto-fill +
   clamp), breakpoints only switch the shell mode.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
	--nx-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
		"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;

	--nx-bg: #f4f6fa;
	--nx-surface: #ffffff;
	--nx-surface-2: #f8f9fc;
	--nx-soft: #eef0f7;
	--nx-line: #e5e8f0;
	--nx-line-2: #eef0f6;

	--nx-ink: #14161f;
	--nx-ink-2: #4d5468;
	--nx-ink-3: #858da3;

	--nx-primary: #5b4bf5;
	--nx-primary-2: #6f61ff;
	--nx-primary-soft: #eceaff;
	--nx-star: #ffb020;
	--nx-danger: #e5484d;
	--nx-ok: #12a87a;

	--nx-stage: #0a0c14;

	--nx-r: 14px;
	--nx-r-sm: 10px;
	--nx-r-pill: 999px;

	--nx-sh-1: 0 1px 2px rgba(16, 20, 40, .05), 0 2px 8px rgba(16, 20, 40, .04);
	--nx-sh-2: 0 4px 12px rgba(16, 20, 40, .08), 0 14px 34px rgba(16, 20, 40, .10);

	/* Adaptive metrics */
	--nx-gutter: clamp(12px, 1.6vw, 32px);
	--nx-gap: clamp(10px, 1vw, 18px);
	--nx-card-min: 152px;
	--nx-row-card: clamp(146px, 13vw, 208px);

	--nx-topbar-h: 58px;
	--nx-rail-w: 252px;
	--nx-rail-w-mini: 68px;
	--nx-max: 2160px;

	--nx-ease: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 700px)  { :root { --nx-card-min: 158px; } }
@media (min-width: 1000px) { :root { --nx-card-min: 166px; } }
@media (min-width: 1400px) { :root { --nx-card-min: 176px; --nx-topbar-h: 62px; } }
@media (min-width: 1900px) { :root { --nx-card-min: 190px; --nx-rail-w: 272px; } }

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
	margin: 0;
	padding: 0;
	background: var(--nx-bg);
	color: var(--nx-ink);
	font-family: var(--nx-font);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; border: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--nx-primary); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 700; }
p { margin: 0 0 .8em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--nx-primary); outline-offset: 2px; border-radius: 8px; }

.nx-sr {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nx-skip {
	position: absolute; left: -9999px; top: 0; z-index: 2000;
	background: var(--nx-primary); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.nx-skip:focus { left: 0; color: #fff; }

.nx-i { display: block; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.nx-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 9px 16px; border-radius: var(--nx-r-pill);
	font-weight: 600; font-size: 14px; white-space: nowrap;
	transition: background-color .18s var(--nx-ease), color .18s var(--nx-ease),
		transform .18s var(--nx-ease), box-shadow .18s var(--nx-ease), border-color .18s;
}
.nx-btn:active { transform: translateY(1px); }
.nx-btn-primary { background: var(--nx-primary); color: #fff; box-shadow: 0 4px 14px rgba(91, 75, 245, .28); }
.nx-btn-primary:hover { background: var(--nx-primary-2); color: #fff; box-shadow: 0 6px 20px rgba(91, 75, 245, .34); }
.nx-btn-outline { background: #fff; color: var(--nx-ink); border: 1px solid var(--nx-line); }
.nx-btn-outline:hover { border-color: var(--nx-primary); color: var(--nx-primary); }
.nx-btn-ghost { background: transparent; color: var(--nx-ink-2); }
.nx-btn-ghost:hover { background: var(--nx-soft); color: var(--nx-ink); }
.nx-btn-lg { padding: 12px 22px; font-size: 15px; }

.nx-iconbtn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 12px; color: var(--nx-ink-2);
	transition: background-color .18s var(--nx-ease), color .18s var(--nx-ease);
}
.nx-iconbtn:hover { background: var(--nx-soft); color: var(--nx-ink); }

/* --------------------------------------------------------------------------
   4. TOP bar
   -------------------------------------------------------------------------- */
.nx-topbar {
	position: sticky; top: 0; z-index: 1000;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--nx-line-2);
	transition: box-shadow .22s var(--nx-ease), border-color .22s var(--nx-ease);
}
.nx-topbar.is-stuck { box-shadow: 0 4px 20px rgba(16, 20, 40, .10); border-bottom-color: var(--nx-line); }

.nx-topbar-inner {
	display: flex; align-items: center; gap: clamp(6px, .8vw, 14px);
	height: var(--nx-topbar-h);
	max-width: var(--nx-max); margin: 0 auto;
	padding: 0 var(--nx-gutter);
}

.nx-rail-toggle { margin-right: 2px; }

.nx-brand { display: flex; align-items: center; flex: 0 0 auto; }
.nx-logo { height: clamp(26px, 2.4vw, 34px); width: auto; display: block; }
.nx-brand:hover { color: inherit; }

.nx-topnav { display: none; }
@media (min-width: 1080px) { .nx-topnav { display: block; } }
.nx-topnav-list { display: flex; align-items: center; gap: 4px; }
.nx-topnav-item > a {
	display: block; padding: 7px 12px; border-radius: var(--nx-r-pill);
	font-size: 14px; font-weight: 600; color: var(--nx-ink-2);
	transition: background-color .16s var(--nx-ease), color .16s var(--nx-ease);
}
.nx-topnav-item > a:hover { background: var(--nx-soft); color: var(--nx-ink); }

/* search */
.nx-searchbox { position: relative; flex: 1 1 auto; min-width: 0; max-width: 560px; margin-left: auto; }
.nx-search {
	display: flex; align-items: center; gap: 8px;
	background: var(--nx-surface-2);
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-r-pill);
	padding: 0 6px 0 12px; height: 40px;
	transition: border-color .18s var(--nx-ease), box-shadow .18s var(--nx-ease), background-color .18s;
}
.nx-search:focus-within { background: #fff; border-color: var(--nx-primary); box-shadow: 0 0 0 3px rgba(91, 75, 245, .14); }
.nx-search-i { color: var(--nx-ink-3); }
.nx-search-input {
	flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none;
	font: inherit; font-size: 14.5px; color: var(--nx-ink);
}
.nx-search-input::placeholder { color: var(--nx-ink-3); }
.nx-search-input::-webkit-search-cancel-button { display: none; }
.nx-search-clear { display: flex; padding: 4px; border-radius: 50%; color: var(--nx-ink-3); }
.nx-search-clear:hover { color: var(--nx-ink); background: var(--nx-soft); }
.nx-search-btn {
	display: none; flex: 0 0 auto; padding: 7px 16px; border-radius: var(--nx-r-pill);
	background: var(--nx-primary); color: #fff; font-size: 14px; font-weight: 600;
	transition: background-color .18s var(--nx-ease);
}
.nx-search-btn:hover { background: var(--nx-primary-2); color: #fff; }
@media (min-width: 720px) { .nx-search-btn { display: block; } }

/* static suggestion popover */
.nx-suggest {
	position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
	background: #fff; border: 1px solid var(--nx-line); border-radius: var(--nx-r);
	box-shadow: var(--nx-sh-2); padding: 10px;
	animation: nx-pop .16s var(--nx-ease);
}
.nx-suggest[hidden] { display: none; }
.nx-suggest-label { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--nx-ink-3); }
.nx-suggest-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px; }
.nx-suggest-item {
	display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: var(--nx-r-sm);
	font-size: 14px; color: var(--nx-ink-2);
}
.nx-suggest-item:hover { background: var(--nx-soft); color: var(--nx-ink); }
.nx-suggest-item.is-hidden { display: none; }
@keyframes nx-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.nx-topbar-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
@media (max-width: 719px) { .nx-topbar-actions { margin-left: 0; } }

/* scroll progress line */
.nx-topbar-progress {
	position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
	background: linear-gradient(90deg, var(--nx-primary), #a08bff);
	transition: width .1s linear;
}

/* --------------------------------------------------------------------------
   5. SHELL (left + right)
   -------------------------------------------------------------------------- */
.nx-shell {
	display: grid;
	grid-template-columns: var(--nx-rail-w) minmax(0, 1fr);
	align-items: start;
	max-width: var(--nx-max);
	margin: 0 auto;
}
.nx-col { min-width: 0; display: flex; flex-direction: column; }
.nx-content { min-width: 0; flex: 1 1 auto; }

.nx-scrim { display: none; }

/* --------------------------------------------------------------------------
   6. LEFT rail - category directory
   -------------------------------------------------------------------------- */
.nx-rail {
	position: sticky; top: var(--nx-topbar-h);
	display: flex; flex-direction: column;
	height: calc(100vh - var(--nx-topbar-h));
	background: var(--nx-surface);
	border-right: 1px solid var(--nx-line-2);
	overflow: hidden;
	z-index: 900;
}
.nx-rail-scroll {
	flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
	padding: 12px 10px 18px;
	scrollbar-width: thin;
	scrollbar-color: var(--nx-line) transparent;
}
.nx-rail-scroll::-webkit-scrollbar { width: 8px; }
.nx-rail-scroll::-webkit-scrollbar-thumb { background: var(--nx-line); border-radius: 8px; border: 2px solid #fff; }
.nx-rail-scroll:hover::-webkit-scrollbar-thumb { background: #d3d8e6; }

.nx-rail-group + .nx-rail-group { margin-top: 14px; }
.nx-rail-label {
	margin: 6px 8px 8px; font-size: 11.5px; font-weight: 800;
	letter-spacing: .07em; text-transform: uppercase; color: var(--nx-ink-3);
}
.nx-rail-list { display: flex; flex-direction: column; gap: 2px; }
.nx-rail-link {
	position: relative;
	display: flex; align-items: center; gap: 11px;
	padding: 8px 10px; border-radius: var(--nx-r-sm);
	font-size: 14.5px; font-weight: 500; color: var(--nx-ink-2);
	transition: background-color .16s var(--nx-ease), color .16s var(--nx-ease), transform .16s var(--nx-ease);
}
.nx-rail-link:hover { background: var(--nx-soft); color: var(--nx-ink); transform: translateX(2px); }
.nx-rail-link.is-active { background: var(--nx-primary-soft); color: var(--nx-primary); font-weight: 650; }
.nx-rail-link.is-active::before {
	content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
	width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--nx-primary);
}
.nx-rail-link.is-active .nx-i { color: var(--nx-primary); }
.nx-rail-ico { display: flex; color: var(--nx-ink-3); transition: color .16s var(--nx-ease); }
.nx-rail-link:hover .nx-rail-ico { color: var(--nx-ink); }
.nx-rail-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nx-rail-foot {
	flex: 0 0 auto; padding: 10px 16px 14px; border-top: 1px solid var(--nx-line-2);
	background: var(--nx-surface-2);
}
.nx-rail-mini { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 6px; }
.nx-rail-mini a { font-size: 12.5px; color: var(--nx-ink-3); }
.nx-rail-mini a:hover { color: var(--nx-primary); }
.nx-rail-copy { margin: 0; font-size: 12px; color: var(--nx-ink-3); }

/* collapsed (icon only) rail - desktop only, default state.
   The grid column stays a constant 68px; hovering slides the full rail
   open OVER the content (transform only, so nothing else on the page
   moves - including the top bar). Clicking the toggle pins/unpins it. */
@media (min-width: 1100px) {
	body.nx-rail-mini .nx-shell { grid-template-columns: var(--nx-rail-w-mini) minmax(0, 1fr); }
	body.nx-rail-mini .nx-rail {
		width: var(--nx-rail-w);
		transform: translateX(calc(var(--nx-rail-w-mini) - var(--nx-rail-w)));
		transition: transform .26s var(--nx-ease), box-shadow .26s var(--nx-ease);
		will-change: transform;
	}
	body.nx-rail-mini .nx-rail:hover,
	body.nx-rail-mini .nx-rail:focus-within {
		transform: translateX(0);
		box-shadow: 16px 0 46px rgba(10, 12, 20, .14);
	}
	body.nx-rail-mini .nx-rail-link { justify-content: center; padding: 10px 0; }
	body.nx-rail-mini .nx-rail-text,
	body.nx-rail-mini .nx-rail-label,
	body.nx-rail-mini .nx-rail-foot { display: none; }
	body.nx-rail-mini .nx-rail-group + .nx-rail-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--nx-line-2); }
	body.nx-rail-mini .nx-rail-link:hover { transform: none; }
	body.nx-rail-mini .nx-rail-link.is-active::before { left: -10px; }

	/* hovered / keyboard focused: fully expanded rail */
	body.nx-rail-mini .nx-rail:hover .nx-rail-link,
	body.nx-rail-mini .nx-rail:focus-within .nx-rail-link { justify-content: flex-start; padding: 8px 10px; }
	body.nx-rail-mini .nx-rail:hover .nx-rail-text,
	body.nx-rail-mini .nx-rail:focus-within .nx-rail-text { display: block; }
	body.nx-rail-mini .nx-rail:hover .nx-rail-label,
	body.nx-rail-mini .nx-rail:focus-within .nx-rail-label { display: block; }
	body.nx-rail-mini .nx-rail:hover .nx-rail-foot,
	body.nx-rail-mini .nx-rail:focus-within .nx-rail-foot { display: block; }
}

/* theater mode (game page): hide the rail completely */
body.nx-theater .nx-rail { display: none; }
body.nx-theater .nx-shell { grid-template-columns: minmax(0, 1fr); }

/* --------------------------------------------------------------------------
   7. RIGHT column content
   -------------------------------------------------------------------------- */
.nx-wrap {
	width: 100%; max-width: var(--nx-max);
	margin: 0 auto; padding: clamp(14px, 1.6vw, 28px) var(--nx-gutter) clamp(28px, 3vw, 56px);
}
.nx-narrow { max-width: 900px; }
.nx-content > .nx-wrap:first-child { padding-top: clamp(14px, 1.6vw, 28px); }

/* breadcrumb */
.nx-crumb { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; color: var(--nx-ink-3); margin-bottom: 12px; }
.nx-crumb a:hover { color: var(--nx-primary); }
.nx-crumb-sep { color: #c6cbd9; }

/* hero */
.nx-hero {
	position: relative; overflow: hidden;
	border-radius: var(--nx-r); padding: clamp(24px, 3.4vw, 54px) clamp(20px, 3vw, 46px);
	background: linear-gradient(120deg, #4a3bf0 0%, #7a5cff 45%, #b06bff 100%);
	color: #fff; box-shadow: var(--nx-sh-2); margin-bottom: clamp(18px, 2vw, 30px);
}
.nx-hero-bg {
	position: absolute; inset: 0; opacity: .5;
	background:
		radial-gradient(900px 320px at 12% 120%, rgba(255, 255, 255, .28), transparent 70%),
		radial-gradient(700px 280px at 88% -20%, rgba(255, 255, 255, .22), transparent 70%),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 16px);
	animation: nx-drift 22s linear infinite alternate;
}
@keyframes nx-drift { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-40px, -18px, 0) scale(1.12); } }
.nx-hero-body { position: relative; max-width: 720px; }
.nx-hero-kicker { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.nx-hero-title { font-size: clamp(26px, 4vw, 46px); font-weight: 800; letter-spacing: -.02em; }
.nx-hero-sub { margin: 10px 0 18px; font-size: clamp(14px, 1.2vw, 17px); opacity: .92; max-width: 60ch; }
.nx-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.nx-hero .nx-btn-outline { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); color: #fff; }
.nx-hero .nx-btn-outline:hover { background: #fff; color: var(--nx-primary); border-color: #fff; }
.nx-hero .nx-btn-primary { background: #fff; color: var(--nx-primary); box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
.nx-hero .nx-btn-primary:hover { background: #f4f2ff; color: var(--nx-primary); }

/* generic block (section) */
.nx-block { margin-bottom: clamp(20px, 2.2vw, 34px); }
.nx-block-head {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
	flex-wrap: wrap; margin-bottom: 14px;
}
.nx-block-title { font-size: clamp(18px, 1.7vw, 24px); font-weight: 800; letter-spacing: -.01em; }
.nx-block-meta { margin: 4px 0 0; font-size: 13.5px; color: var(--nx-ink-3); }
.nx-block-desc {
	margin: 0 0 16px; padding: 14px 16px; border-radius: var(--nx-r-sm);
	background: var(--nx-surface); border: 1px solid var(--nx-line-2); color: var(--nx-ink-2); font-size: 14.5px;
}
.nx-block-body { color: var(--nx-ink-2); }

.nx-row-more { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 650; color: var(--nx-primary); }
.nx-row-more-i { transition: transform .18s var(--nx-ease); }
.nx-row-more:hover .nx-row-more-i { transform: translateX(3px); }

/* sort tabs */
.nx-sorts { display: flex; flex-wrap: wrap; gap: 6px; }
.nx-sort {
	padding: 6px 13px; border-radius: var(--nx-r-pill); font-size: 13.5px; font-weight: 600;
	background: #fff; border: 1px solid var(--nx-line); color: var(--nx-ink-2);
	transition: all .18s var(--nx-ease);
}
.nx-sort:hover { border-color: var(--nx-primary); color: var(--nx-primary); transform: translateY(-1px); }
.nx-sort.is-active { background: var(--nx-primary); border-color: var(--nx-primary); color: #fff; }

/* --------------------------------------------------------------------------
   8. Game cards + grid + mosaic
   -------------------------------------------------------------------------- */
.nx-card { min-width: 0; }
.nx-card-link { display: block; color: inherit; }
.nx-card-link:hover { color: inherit; }

.nx-thumb {
	position: relative; display: block; overflow: hidden;
	border-radius: var(--nx-r-sm); background: var(--nx-soft);
	aspect-ratio: 16 / 9;
	transition: box-shadow .22s var(--nx-ease), transform .22s var(--nx-ease);
}
.nx-thumb-img {
	display: block; width: 100%; height: 100%; object-fit: cover;
	transition: transform .32s var(--nx-ease), opacity .3s ease;
}
.nx-thumb-img.is-loading { opacity: 0; }
.nx-thumb-empty { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #e9ecf5, #dfe3f0); }

/* shimmer placeholder until the image is decoded */
.nx-thumb::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
	transform: translateX(-100%);
	animation: nx-shimmer 1.4s infinite;
}
.nx-thumb.is-loaded::after { display: none; }
@keyframes nx-shimmer { to { transform: translateX(100%); } }

.nx-thumb-play {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(to top, rgba(10, 12, 20, .55), rgba(10, 12, 20, 0) 60%);
	opacity: 0; transition: opacity .22s var(--nx-ease);
}
.nx-thumb-play::before {
	content: ""; width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255, 255, 255, .95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2314161f' d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") center / 22px no-repeat;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
	transform: scale(.7); transition: transform .24s var(--nx-ease);
}
.nx-card-link:hover .nx-thumb { transform: translateY(-3px); box-shadow: var(--nx-sh-2); }
.nx-card-link:hover .nx-thumb-img { transform: scale(1.07); }
.nx-card-link:hover .nx-thumb-play { opacity: 1; }
.nx-card-link:hover .nx-thumb-play::before { transform: scale(1); }

.nx-card-body { display: block; padding: 7px 2px 0; }
.nx-card-title {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; font-size: 13.8px; font-weight: 650; line-height: 1.35;
}
.nx-card-link:hover .nx-card-title { color: var(--nx-primary); }
.nx-card-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--nx-ink-3); }
.nx-card-cat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nx-grid {
	display: grid; gap: var(--nx-gap);
	grid-template-columns: repeat(auto-fill, minmax(var(--nx-card-min), 1fr));
}
.nx-mosaic .nx-card.is-wide { grid-column: span 2; }
@media (max-width: 480px) { .nx-mosaic .nx-card.is-wide { grid-column: auto; } }

.nx-empty { padding: 30px 0; text-align: center; color: var(--nx-ink-3); }

/* --------------------------------------------------------------------------
   9. Section card set: exact "1 big (2 rows tall) + 4 top + 3 bottom +
      arrow" mosaic. No horizontal swiping.

      desktop: 5 columns x 2 rows
        [ BIG (span 2 rows) ] [ s1 ] [ s2 ] [ s3 ] [ s4 ]
        [          -        ] [ s5 ] [ s6 ] [ s7 ] [ARROW]
   -------------------------------------------------------------------------- */
.nx-row { margin-bottom: clamp(18px, 2vw, 30px); }
.nx-row .nx-block-head { margin-bottom: 12px; }

.nx-set {
	display: grid; gap: var(--nx-gap);
	grid-template-columns: repeat(2, 1fr);
	align-items: stretch;
}
.nx-set + .nx-set { margin-top: var(--nx-gap); }
.nx-set > .nx-card.is-big { grid-column: 1 / -1; }

@media (min-width: 720px) {
	.nx-set { grid-template-columns: repeat(4, 1fr); }
	.nx-set > .nx-card.is-big { grid-column: auto; grid-row: span 2; }

	/* the big card fills its 2-row cell completely */
	.nx-set > .nx-card.is-big .nx-card-link { display: flex; flex-direction: column; height: 100%; }
	.nx-set > .nx-card.is-big .nx-thumb { flex: 1 1 auto; aspect-ratio: auto; height: 100%; min-height: 150px; }
	.nx-set > .nx-card.is-big .nx-thumb-img { height: 100%; }
	.nx-set > .nx-card.is-big .nx-card-title { font-size: clamp(15px, 1.3vw, 19px); }
}
@media (min-width: 1000px) {
	/* 7 columns x 2 rows: 2 big (span 2 rows each) + 5 small on top
	   + 4 small + arrow on the bottom row (= 12 cards + arrow cells) */
	.nx-set { grid-template-columns: repeat(7, 1fr); }
}

/* arrow tile -> directory of the section */
.nx-card-more {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 10px; min-height: 130px; padding: 14px;
	border: 2px dashed var(--nx-line); border-radius: var(--nx-r-sm);
	background: var(--nx-surface); color: var(--nx-ink-2);
	font-size: 13.5px; font-weight: 650; text-align: center;
	transition: border-color .2s var(--nx-ease), color .2s var(--nx-ease),
		transform .2s var(--nx-ease), box-shadow .2s var(--nx-ease), background-color .2s var(--nx-ease);
}
.nx-more-circle {
	display: flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--nx-primary-soft); color: var(--nx-primary);
	transition: background-color .2s var(--nx-ease), color .2s var(--nx-ease), transform .2s var(--nx-ease);
}
.nx-card-more:hover {
	border-color: var(--nx-primary); color: var(--nx-primary);
	transform: translateY(-3px); box-shadow: var(--nx-sh-2); background: #fff;
}
.nx-card-more:hover .nx-more-circle { background: var(--nx-primary); color: #fff; transform: translateX(3px); }

/* --------------------------------------------------------------------------
   9b. "Pyramid" directory (Top Rated - ordered by play count, views DESC)
       rows of 1 / 2 / 3 / 4 cards, narrow on top, full width at the bottom
   -------------------------------------------------------------------------- */
.nx-pyramid { display: flex; flex-direction: column; gap: var(--nx-gap); }
.nx-pyr-row { display: grid; gap: var(--nx-gap); margin-inline: auto; width: 100%; }
.nx-pyr-r1 { grid-template-columns: 1fr; }
.nx-pyr-r2 { grid-template-columns: repeat(2, 1fr); }
.nx-pyr-r3 { grid-template-columns: repeat(3, 1fr); }
.nx-pyr-r4 { grid-template-columns: repeat(2, 1fr); }
.nx-pyr-r1 .nx-card-title { font-size: clamp(16px, 1.8vw, 22px); }
.nx-pyr-r2 .nx-card-title { font-size: clamp(14px, 1.4vw, 18px); }
@media (min-width: 720px) {
	.nx-pyr-r1 { max-width: 46%; }
	.nx-pyr-r2 { max-width: 66%; }
	.nx-pyr-r3 { max-width: 86%; }
	.nx-pyr-r4 { grid-template-columns: repeat(4, 1fr); max-width: 100%; }
	/* apex card reads like a wide banner */
	.nx-pyr-r1 .nx-thumb { aspect-ratio: 16 / 8; }
}

/* --------------------------------------------------------------------------
   10. Stars / votes / chips
   -------------------------------------------------------------------------- */
.nx-stars { display: inline-flex; align-items: center; gap: 2px; color: var(--nx-star); }
.nx-stars .nx-star { width: 14px; height: 14px; }
.nx-stars-count { color: var(--nx-ink-3); font-size: 12px; margin-left: 4px; }

.nx-chip {
	display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--nx-r-pill);
	background: var(--nx-primary-soft); color: var(--nx-primary);
	font-size: 13px; font-weight: 600;
	transition: background-color .18s var(--nx-ease), transform .18s var(--nx-ease);
}
.nx-chip:hover { background: var(--nx-primary); color: #fff; transform: translateY(-1px); }
.nx-chip-ghost { background: var(--nx-soft); color: var(--nx-ink-2); }
.nx-chip-ghost:hover { background: var(--nx-ink); color: #fff; }
.nx-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.nx-badge {
	display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--nx-r-pill);
	background: var(--nx-ok); color: #fff; font-size: 12.5px; font-weight: 700;
}
.nx-share { font-size: 13px; font-weight: 600; color: var(--nx-ink-3); }
.nx-share:hover { color: var(--nx-primary); }
.nx-report { color: var(--nx-danger); }
.nx-article-share { display: inline-flex; gap: 12px; align-items: center; }

/* --------------------------------------------------------------------------
   11. Game page stage
   -------------------------------------------------------------------------- */
.nx-stage {
	position: relative; border-radius: var(--nx-r); overflow: hidden;
	background: var(--nx-stage); box-shadow: var(--nx-sh-2);
	margin-bottom: clamp(16px, 1.8vw, 26px);
}
.nx-stage-inner {
	position: relative; width: 100%;
	max-height: min(78vh, 900px);
	aspect-ratio: var(--gw, 800) / var(--gh, 600);
	margin: 0 auto; background: #000;
	display: flex; align-items: center; justify-content: center;
}
.nx-game-frame { display: block; width: 100%; height: 100%; border: 0; background: #000; }

.nx-stage-bar {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 8px 12px; background: #14161f; color: #cfd3e2; font-size: 13px;
}
.nx-stage-bar-left { display: flex; align-items: center; gap: 8px; }
.nx-stage-dot { width: 8px; height: 8px; border-radius: 50%; background: #2dd4a7; box-shadow: 0 0 0 4px rgba(45, 212, 167, .18); animation: nx-pulse 2.2s infinite; }
@keyframes nx-pulse { 50% { box-shadow: 0 0 0 7px rgba(45, 212, 167, 0); } }
.nx-stage-bar-right { display: flex; align-items: center; gap: 6px; }
.nx-pill {
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
	border-radius: var(--nx-r-pill); background: rgba(255, 255, 255, .10); color: #e8ebf5;
	font-size: 13px; font-weight: 600;
	transition: background-color .18s var(--nx-ease), color .18s var(--nx-ease);
}
.nx-pill:hover { background: #fff; color: var(--nx-ink); }
@media (max-width: 560px) { .nx-pill-text { display: none; } .nx-pill { padding: 7px 10px; } }

/* --------------------------------------------------------------------------
   12. Article (game / page / post)
   -------------------------------------------------------------------------- */
.nx-article {
	background: var(--nx-surface); border: 1px solid var(--nx-line-2);
	border-radius: var(--nx-r); padding: clamp(16px, 2vw, 28px); box-shadow: var(--nx-sh-1);
}
.nx-article-head { margin-bottom: 10px; }
.nx-article-title { font-size: clamp(20px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.02em; }
.nx-article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.nx-article-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.nx-post-meta { font-size: 13px; color: var(--nx-ink-3); margin: 6px 0 16px; }
.nx-rich { font-size: 15px; color: var(--nx-ink-2); }
.nx-rich img { border-radius: var(--nx-r-sm); }
.nx-rich a { color: var(--nx-primary); text-decoration: underline; }

.nx-vote { display: inline-flex; align-items: center; gap: 10px; }
.nx-vote-pct { font-weight: 800; color: var(--nx-ok); }
.nx-vote-count { font-size: 12.5px; color: var(--nx-ink-3); }
.nx-vote-actions { display: inline-flex; align-items: center; gap: 4px; }
.nx-vote-btn {
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%; color: var(--nx-ink-3);
	transition: background-color .18s var(--nx-ease), color .18s var(--nx-ease), transform .18s var(--nx-ease);
}
.nx-vote-btn:hover { background: var(--nx-soft); color: var(--nx-ink); transform: scale(1.08); }
.nx-vote-btn.is-on { color: var(--nx-danger); background: #fdecec; }
.nx-views { font-size: 13px; color: var(--nx-ink-3); }

.nx-leaderboard-body { min-height: 60px; }

/* mini list (related games) */
.nx-list-vertical { display: flex; flex-direction: column; gap: 8px; }
.nx-mini { display: flex; gap: 10px; align-items: center; padding: 6px; border-radius: var(--nx-r-sm); }
.nx-mini:hover { background: var(--nx-surface-2); }
.nx-mini-thumb { width: 84px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--nx-soft); flex: 0 0 auto; }
.nx-mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nx-mini-title { display: block; font-size: 13.5px; font-weight: 650; }
.nx-mini-cat { display: block; font-size: 12px; color: var(--nx-ink-3); }

/* widget boxes */
.nx-widget { background: var(--nx-surface); border: 1px solid var(--nx-line-2); border-radius: var(--nx-r); padding: 16px; margin-bottom: 16px; }
.nx-widget-title { font-size: 15px; font-weight: 800; margin-bottom: 10px; }

/* --------------------------------------------------------------------------
   13. Posts / 404 / comments
   -------------------------------------------------------------------------- */
.nx-post-list { display: flex; flex-direction: column; gap: 8px; }
.nx-post-item {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 16px; border-radius: var(--nx-r-sm);
	background: var(--nx-surface); border: 1px solid var(--nx-line-2);
	transition: transform .18s var(--nx-ease), box-shadow .18s var(--nx-ease), border-color .18s;
}
.nx-post-item:hover { transform: translateY(-2px); box-shadow: var(--nx-sh-1); border-color: var(--nx-line); color: var(--nx-primary); }
.nx-post-item-title { font-weight: 650; }
.nx-post-item-date { font-size: 13px; color: var(--nx-ink-3); }

.nx-404 { text-align: center; padding: clamp(28px, 5vw, 70px) 20px; }
.nx-404-code { margin: 0; font-size: clamp(64px, 12vw, 130px); font-weight: 900; line-height: 1; color: var(--nx-primary-soft); letter-spacing: -.04em; }
.nx-404-title { font-size: clamp(20px, 2.4vw, 30px); margin-bottom: 8px; }
.nx-404-text { color: var(--nx-ink-3); margin-bottom: 20px; }
.nx-404-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.nx-comment-box { margin-top: 10px; }

/* --------------------------------------------------------------------------
   14. Pagination
   -------------------------------------------------------------------------- */
.nx-pagination { margin-top: 22px; }
.nx-pages { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.nx-page-link {
	display: flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px; padding: 0 12px; border-radius: var(--nx-r-sm);
	background: var(--nx-surface); border: 1px solid var(--nx-line); color: var(--nx-ink-2);
	font-size: 14px; font-weight: 600;
	transition: all .18s var(--nx-ease);
}
.nx-page-link:hover { border-color: var(--nx-primary); color: var(--nx-primary); transform: translateY(-1px); }
.nx-page-item.is-current .nx-page-link { background: var(--nx-primary); border-color: var(--nx-primary); color: #fff; }
.nx-page-item.is-disabled .nx-page-link { opacity: .45; pointer-events: none; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.nx-footer { border-top: 1px solid var(--nx-line); background: var(--nx-surface); margin-top: auto; }
.nx-footer-inner { max-width: var(--nx-max); margin: 0 auto; padding: clamp(22px, 2.6vw, 40px) var(--nx-gutter) 24px; }
.nx-footer-cols {
	display: grid; gap: clamp(16px, 2vw, 30px);
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.nx-footer-col-brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .nx-footer-col-brand { grid-column: auto; } }
.nx-footer-brand img { height: 30px; width: auto; margin-bottom: 10px; }
.nx-footer-desc { color: var(--nx-ink-3); font-size: 13.5px; max-width: 42ch; }
.nx-footer-bottom {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--nx-line-2);
	font-size: 12.5px; color: var(--nx-ink-3);
}
/* copyright sits on the right, meta links on the left */
.nx-copyright { order: 2; text-align: right; }
.nx-footer-meta { order: 1; }
.nx-footer-meta a { color: var(--nx-ink-3); }
.nx-footer-meta a:hover { color: var(--nx-primary); }

/* --------------------------------------------------------------------------
   16. User area (dynamic slot) / flash / back to top
   -------------------------------------------------------------------------- */
.nx-user { position: relative; }
.nx-user-btn { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: var(--nx-r-pill); }
.nx-user-btn:hover { background: var(--nx-soft); }
.nx-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--nx-soft); }
.nx-avatar-fallback {
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; color: var(--nx-primary); background: var(--nx-primary-soft); text-transform: uppercase;
}
.nx-user-name { font-size: 14px; font-weight: 650; }
@media (max-width: 860px) { .nx-user-name { display: none; } }

.nx-user-menu {
	position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; min-width: 190px;
	background: #fff; border: 1px solid var(--nx-line); border-radius: var(--nx-r);
	box-shadow: var(--nx-sh-2); padding: 8px; animation: nx-pop .16s var(--nx-ease);
}
.nx-user-menu[hidden] { display: none; }
.nx-user-menu a { display: block; padding: 8px 10px; border-radius: var(--nx-r-sm); font-size: 14px; }
.nx-user-menu a:hover { background: var(--nx-soft); color: var(--nx-ink); }
.nx-user-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px 8px; border-bottom: 1px solid var(--nx-line-2); margin-bottom: 6px; font-size: 14px; }
.nx-xp { font-size: 12px; color: var(--nx-ink-3); }
.nx-logout { color: var(--nx-danger); }

.nx-flash {
	position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1500;
	background: var(--nx-ink); color: #fff; padding: 11px 18px; border-radius: var(--nx-r-pill);
	box-shadow: var(--nx-sh-2); font-size: 14px;
	animation: nx-pop .2s var(--nx-ease);
}

.nx-totop {
	position: fixed; right: 16px; bottom: 16px; z-index: 1200;
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--nx-surface); border: 1px solid var(--nx-line); color: var(--nx-ink);
	box-shadow: var(--nx-sh-2);
	opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
	transition: opacity .22s var(--nx-ease), transform .22s var(--nx-ease);
}
.nx-totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.nx-totop:hover { background: var(--nx-primary); border-color: var(--nx-primary); color: #fff; }
.nx-totop[hidden] { display: none; }

/* --------------------------------------------------------------------------
   17. Responsive: rail becomes an off canvas drawer
   -------------------------------------------------------------------------- */
@media (max-width: 1099px) {
	.nx-shell { grid-template-columns: minmax(0, 1fr); }

	.nx-rail {
		position: fixed; top: 0; left: 0; bottom: 0; z-index: 1300;
		width: min(300px, 84vw); height: 100%;
		border-right: 1px solid var(--nx-line);
		box-shadow: none;
		transform: translateX(-101%);
		transition: transform .3s var(--nx-ease), box-shadow .3s var(--nx-ease);
		will-change: transform;
	}
	body.nx-drawer .nx-rail { transform: none; box-shadow: 0 0 60px rgba(10, 12, 20, .28); }

	.nx-scrim {
		display: block; position: fixed; inset: 0; z-index: 1250;
		background: rgba(12, 14, 24, .48);
		opacity: 0; pointer-events: none;
		transition: opacity .28s var(--nx-ease);
	}
	body.nx-drawer .nx-scrim { opacity: 1; pointer-events: auto; }
	body.nx-drawer { overflow: hidden; }

	.nx-topnav { display: none !important; }
}

@media (max-width: 620px) {
	.nx-topbar-inner { gap: 4px; }
	.nx-searchbox { max-width: none; }
	.nx-search { padding-left: 10px; }
	.nx-wrap { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 640px) { .nx-hide-sm { display: none !important; } }

/* --------------------------------------------------------------------------
   18. Motion preferences & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}
@media print {
	.nx-topbar, .nx-rail, .nx-scrim, .nx-totop, .nx-stage-bar { display: none !important; }
	.nx-shell { display: block; }
}