/* =========================================================
   ArcadeX v1.1.3 theme for CloudArcade
   Full-width responsive arcade portal design.
   Layout: fixed topbar + icon-rail left sidebar (hover expand)
   + fluid content grid. Dark arcade look.
   ========================================================= */

:root{
	--ax-bg: #07100a;
	--ax-bg-rgb: 7,16,10;
	--ax-bg-soft: #0c1810;
	--ax-surface: #122018;
	--ax-surface-2: #192a20;
	--ax-border: rgba(140,230,130,.09);
	--ax-text: #eaf7ec;
	--ax-text-dim: #8ab898;
	--ax-text-soft: #bcdac4;
	--ax-accent: #4ade80;
	--ax-accent-rgb: 74,222,128;
	--ax-grad: #06b6d4;
	--ax-grad-rgb: 6,182,212;
	--ax-accent-2: #facc15;
	--ax-accent-2-rgb: 250,204,21;
	--ax-green: #a3e635;
	--ax-radius: 12px;
	--ax-topbar-h: 62px;
	--ax-rail-w: 70px;
	--ax-side-w: 264px;
	--ax-gap: 14px;
	--ax-shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body.ax-body{
	margin:0;
	background: var(--ax-bg);
	color: var(--ax-text);
	font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
}
a{ color: var(--ax-accent-2); text-decoration: none; }
a:hover{ text-decoration: none; }
img{ max-width: 100%; }

/* ================= TOPBAR ================= */
.ax-topbar{
	position: fixed;
	top:0; left:0; right:0;
	z-index: 1200;
	height: var(--ax-topbar-h);
	display:flex;
	align-items:center;
	gap: 14px;
	padding: 0 16px;
	background: rgba(var(--ax-bg-rgb),.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--ax-border);
}
.ax-icon-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width: 40px; height: 40px;
	flex: none;
	border: 1px solid var(--ax-border);
	border-radius: 10px;
	background: var(--ax-surface);
	color: var(--ax-text);
	cursor: pointer;
	transition: background .18s, color .18s;
}
.ax-icon-btn:hover{ background: var(--ax-surface-2); color:#fff; }

.ax-logo{
	display:inline-flex;
	align-items:center;
	gap: 9px;
	flex:none;
	min-width: 0;
	color: var(--ax-text);
}
.ax-logo-img{ height: 36px; width:auto; }
.ax-logo-mark{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width: 38px; height: 38px;
	border-radius: 10px;
	color:#fff;
	background: linear-gradient(135deg, var(--ax-accent), var(--ax-grad));
	box-shadow: 0 4px 14px rgba(var(--ax-accent-rgb),.35);
}
.ax-logo-text{
	font-weight: 800;
	font-size: 19px;
	letter-spacing: .5px;
	white-space: nowrap;
}

.ax-topbar-center{
	flex: 1 1 auto;
	display:flex;
	justify-content:center;
	min-width: 0;
}
.ax-topbar-right{
	flex: none;
	display:flex;
	align-items:center;
	gap: 10px;
}

/* Top navigation menu (desktop, next to login button) */
.ax-topnav-list{ display:flex; align-items:center; gap: 2px; }
.ax-topnav-item{ position: relative; }
.ax-topnav-item > a{
	display:inline-flex;
	align-items:center;
	gap: 5px;
	padding: 8px 12px;
	border-radius: 999px;
	color: var(--ax-text-dim);
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
	transition: background .15s, color .15s;
}
.ax-topnav-item > a:hover{ color:#fff; background: var(--ax-surface-2); }
.ax-caret{ font-size: 10px; }
.ax-topnav-sub{
	position:absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 180px;
	background: var(--ax-surface);
	border: 1px solid var(--ax-border);
	border-radius: var(--ax-radius);
	box-shadow: var(--ax-shadow);
	padding: 8px;
	display:none;
	z-index: 1300;
}
.ax-topnav-item:hover .ax-topnav-sub,
.ax-topnav-item:focus-within .ax-topnav-sub{ display:block; }
.ax-topnav-sub a{
	display:block;
	padding: 7px 10px;
	border-radius: 8px;
	color: var(--ax-text);
	font-size: 13.5px;
}
.ax-topnav-sub a:hover{ background: var(--ax-surface-2); }
@media (max-width: 1023px){
	.ax-topnav-list{ display:none; }
}

/* Sidebar menu block: hidden on desktop rail, shown in mobile drawer */
.ax-side-menu-sec{ display:none; }
@media (max-width: 1023px){
	.ax-side-menu-sec{
		display:block;
		margin-bottom: 10px;
		border-bottom: 1px solid var(--ax-border);
		padding-bottom: 10px;
	}
	.ax-side-menu-sec .ax-side-head{ opacity: 1; }
}

/* Search form */
.ax-search{
	position: relative;
	width: 100%;
	max-width: 460px;
}
.ax-search-input{
	width:100%;
	height: 40px;
	padding: 0 44px 0 16px;
	border-radius: 999px;
	border: 1px solid var(--ax-border);
	background: var(--ax-surface);
	color: var(--ax-text);
	outline: none;
	transition: border-color .18s, background .18s;
}
.ax-search-input::placeholder{ color: var(--ax-text-dim); }
.ax-search-input:focus{
	border-color: var(--ax-accent);
	background: var(--ax-surface-2);
}
.ax-search-btn{
	position:absolute;
	top: 4px; right: 4px;
	width: 32px; height: 32px;
	border:none;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--ax-accent), var(--ax-grad));
	color:#fff;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
}
.ax-search-toggle{ display:none; }

/* Mobile search bar */
.ax-searchbar-mobile{
	display:none;
	position: fixed;
	top: var(--ax-topbar-h);
	left:0; right:0;
	z-index: 1150;
	padding: 10px 14px;
	background: var(--ax-bg-soft);
	border-bottom: 1px solid var(--ax-border);
}
.ax-searchbar-mobile .ax-search{ max-width:none; }
.ax-searchbar-mobile.ax-open{ display:block; }

/* Login button / avatar */
.ax-login-btn{
	display:inline-flex;
	align-items:center;
	height: 38px;
	padding: 0 20px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
	color:#fff;
	background: linear-gradient(135deg, var(--ax-accent), var(--ax-grad));
	box-shadow: 0 4px 14px rgba(var(--ax-accent-rgb),.3);
	white-space: nowrap;
	transition: transform .15s, box-shadow .15s;
}
.ax-login-btn:hover{ color:#fff; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(var(--ax-accent-rgb),.45); }

.ax-user-box{ position: relative; }
.ax-avatar-btn{
	padding:0;
	border:none;
	background:none;
	cursor:pointer;
	display:inline-flex;
}
.ax-avatar{
	width: 38px; height: 38px;
	border-radius: 999px;
	object-fit: cover;
	border: 2px solid var(--ax-accent);
}
.ax-user-pop{
	position:absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 190px;
	background: var(--ax-surface);
	border: 1px solid var(--ax-border);
	border-radius: var(--ax-radius);
	box-shadow: var(--ax-shadow);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s, transform .18s, visibility .18s;
	z-index: 1300;
}
.ax-user-box:hover .ax-user-pop,
.ax-user-box:focus-within .ax-user-pop{
	opacity:1; visibility:visible; transform:none;
}
.ax-user-name{
	padding: 8px 10px 6px;
	font-weight: 700;
	border-bottom: 1px solid var(--ax-border);
	margin-bottom: 6px;
}
.ax-user-pop a{
	display:block;
	padding: 7px 10px;
	border-radius: 8px;
	color: var(--ax-text);
	font-size: 14px;
}
.ax-user-pop a:hover{ background: var(--ax-surface-2); }
.ax-user-pop a.ax-danger{ color: var(--ax-accent); }

/* ================= LEFT SIDEBAR (icon rail) ================= */
.ax-sidebar{
	position: fixed;
	top: var(--ax-topbar-h);
	left: 0;
	bottom: 0;
	width: var(--ax-rail-w);
	z-index: 1100;
	background: var(--ax-bg-soft);
	border-right: 1px solid var(--ax-border);
	overflow: hidden;
	transition: width .22s ease, box-shadow .22s ease;
}
/* Hover expands to full menu (desktop) */
.ax-sidebar:hover,
.ax-sidebar.ax-pinned{
	width: var(--ax-side-w);
	box-shadow: 12px 0 30px rgba(0,0,0,.35);
	overflow-y: auto;
}
/* visible scrollbar when the sidebar is expanded */
.ax-sidebar{ scrollbar-width: thin; scrollbar-color: var(--ax-surface-2) transparent; }
.ax-sidebar::-webkit-scrollbar{ width: 8px; }
.ax-sidebar::-webkit-scrollbar-track{ background: transparent; }
.ax-sidebar::-webkit-scrollbar-thumb{ background: var(--ax-surface-2); border-radius: 999px; }
.ax-sidebar::-webkit-scrollbar-thumb:hover{ background: var(--ax-surface-2); }
@media (min-width: 1024px){
	/* rail collapsed: hide scrollbar until expanded */
	.ax-sidebar::-webkit-scrollbar{ width: 0; }
	.ax-sidebar:hover::-webkit-scrollbar,
	.ax-sidebar.ax-pinned::-webkit-scrollbar{ width: 8px; }
}
.ax-side-scroll{
	padding: 12px 10px 24px;
	min-width: calc(var(--ax-side-w) - 20px);
}
.ax-side-item{
	display:flex;
	align-items:center;
	gap: 14px;
	height: 46px;
	padding: 0 12px;
	border-radius: 10px;
	color: var(--ax-text-dim);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	transition: background .15s, color .15s;
}
.ax-side-item:hover{ background: var(--ax-surface-2); color:#fff; }
.ax-side-item.ax-current{
	background: linear-gradient(135deg, rgba(var(--ax-accent-rgb),.18), rgba(var(--ax-grad-rgb),.18));
	color:#fff;
}
.ax-side-ico{
	flex: none;
	width: 24px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-size: 19px;
}
.ax-side-label{
	opacity: 0;
	transition: opacity .18s ease .05s;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ax-sidebar:hover .ax-side-label,
.ax-sidebar.ax-pinned .ax-side-label{ opacity: 1; }

.ax-side-divider{
	height:1px;
	background: var(--ax-border);
	margin: 10px 6px;
}
.ax-side-head{
	padding: 8px 12px 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.4px;
	color: var(--ax-text-dim);
	opacity: 0;
	transition: opacity .18s ease .05s;
	white-space: nowrap;
}
.ax-sidebar:hover .ax-side-head,
.ax-sidebar.ax-pinned .ax-side-head{ opacity: 1; }

.ax-drawer-backdrop{
	position: fixed;
	inset: 0;
	z-index: 1090;
	background: rgba(0,0,0,.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s, visibility .2s;
}
.ax-mobile-open .ax-drawer-backdrop{ opacity:1; visibility:visible; }

/* ================= CONTENT ================= */
.ax-content{
	margin-left: var(--ax-rail-w);
	padding-top: var(--ax-topbar-h);
	min-height: 100vh;
	display:flex;
	flex-direction:column;
}
.ax-main{
	flex: 1 0 auto;
	width: 100%;
	padding: 22px 24px 10px;
}

/* ================= SECTIONS ================= */
.ax-section{ margin-bottom: 34px; }
.ax-section-head{
	display:flex;
	align-items:center;
	gap: 12px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}
.ax-section-title{
	margin:0;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: .4px;
	display:flex;
	align-items:center;
	gap: 10px;
}
.ax-title-ico{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width: 34px; height: 34px;
	border-radius: 9px;
	font-size: 17px;
	color:#fff;
	background: linear-gradient(135deg, rgba(var(--ax-accent-rgb),.25), rgba(var(--ax-grad-rgb),.25));
}
.ax-section-count{
	color: var(--ax-text-dim);
	font-size: 13px;
}
.ax-section-more{
	margin-left:auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--ax-accent-2);
}
.ax-section-more:hover{ color:#fff; }

/* ================= HERO BANNER ================= */
.ax-hero{
	position: relative;
	margin: 0 0 30px;
	min-height: 300px;
	border-radius: 16px;
	overflow: hidden;
	display:flex;
	align-items: flex-end;
	background: linear-gradient(135deg, var(--ax-surface), var(--ax-surface-2));
	background-size: cover;
	background-position: center 30%;
	border: 1px solid var(--ax-border);
}
.ax-hero::before{
	content:'';
	position:absolute;
	inset:0;
	background: linear-gradient(90deg, rgba(var(--ax-bg-rgb),.92) 0%, rgba(var(--ax-bg-rgb),.55) 45%, rgba(var(--ax-bg-rgb),.12) 100%),
	            linear-gradient(0deg, rgba(var(--ax-bg-rgb),.85) 0%, rgba(var(--ax-bg-rgb),0) 55%);
}
.ax-hero-inner{
	position: relative;
	padding: 26px 30px;
	max-width: 620px;
}
.ax-hero-badge{
	display:inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--ax-accent), var(--ax-grad));
	color:#fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.6px;
	margin-bottom: 12px;
}
.ax-hero-title{
	margin: 0 0 8px;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.2;
	text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.ax-hero-meta{
	display:flex;
	align-items:center;
	gap: 16px;
	margin-bottom: 16px;
	color: var(--ax-text-dim);
	font-size: 13.5px;
	font-weight: 600;
}
.ax-hero-meta .ax-star{ color: var(--ax-accent-2); }
@media (max-width: 767px){
	.ax-hero{ min-height: 220px; margin-bottom: 22px; }
	.ax-hero-inner{ padding: 18px 18px; }
	.ax-hero-title{ font-size: 21px; }
}

/* ================= GAME GRID =================
   Column counts per breakpoint divide every section size:
   8 (>=1600) / 6 (>=1200) / 4 (>=860) / 3 (>=560) / 2 below.
   Sections render 24 slots => always full rows. */
.ax-grid{
	display:grid;
	grid-template-columns: repeat(8, minmax(0,1fr));
	gap: var(--ax-gap);
}
.ax-grid-side{ grid-template-columns: repeat(3, minmax(0,1fr)); }

/* Mixed-size category row (24 grid slots on every breakpoint).
   Wide cards (2 slots) are assigned per breakpoint so rows are
   always full and the arrow card ends the last row:
   >=1600 (8 cols): rows of [3 wide + 2 narrow]; game #15 hidden.
   1200-1599 (6 cols): alternating wide/narrow pairs [w+s][w+s]...
   860-1199 (4 cols): 4 rows of [2 wide] then standard rows.
   <860 (3 cols): alternating wide/narrow, unchanged. */
@media (min-width: 1600px){
	.ax-grid-mix .ax-w8{ grid-column: span 2; }
	.ax-grid-mix .ax-w8 .ax-card-thumb{ aspect-ratio: 2.05 / 1; }
	.ax-grid-mix .ax-d-hide{ display: none; }
}
@media (min-width: 1200px) and (max-width: 1599px){
	.ax-grid-mix .ax-w6{ grid-column: span 2; }
	.ax-grid-mix .ax-w6 .ax-card-thumb{ aspect-ratio: 2.15 / 1; }
}
@media (min-width: 860px) and (max-width: 1199px){
	.ax-grid-mix .ax-w4{ grid-column: span 2; }
	.ax-grid-mix .ax-w4 .ax-card-thumb{ aspect-ratio: 2.1 / 1; }
}
@media (max-width: 859px){
	.ax-grid-mix .ax-wm{ grid-column: span 2; }
	.ax-grid-mix .ax-wm .ax-card-thumb{ aspect-ratio: 2.05 / 1; }
}
@media (max-width: 559px){
	.ax-grid-mix .ax-wm .ax-card-thumb{ aspect-ratio: 2 / 1; }
	.ax-grid-mix .ax-wm .ax-card-title{ font-size: 12.5px; }
}

/* ================= GAME CARD ================= */
.ax-card{
	position: relative;
	display:block;
	border-radius: var(--ax-radius);
	overflow: hidden;
	background: var(--ax-surface);
	border: 1px solid var(--ax-border);
	color: var(--ax-text);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
/* Scroll-reveal: cards start hidden, then pop in one after another */
.ax-card.ax-pre{ opacity: 0; }
.ax-card.ax-in{ animation: axReveal .6s cubic-bezier(.22,.72,.28,1) backwards; }
@keyframes axReveal{
	from{ opacity: 0; transform: translateY(26px) scale(.94); filter: saturate(.5); }
	to{ opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce){
	.ax-card.ax-pre{ opacity: 1; }
	.ax-card.ax-in{ animation: none; }
}
.ax-card:hover{
	color: var(--ax-text);
	transform: translateY(-3px);
	border-color: rgba(var(--ax-accent-rgb),.5);
	box-shadow: 0 12px 26px rgba(0,0,0,.45);
}
.ax-card-thumb{
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--ax-surface-2);
	overflow: hidden;
}
/* Skeleton shimmer while the lazy image is still loading */
.ax-card-thumb::before{
	content:"";
	position:absolute;
	inset:0;
	background:
		linear-gradient(110deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%) var(--ax-surface-2);
	background-size: 220% 100%;
	animation: axShimmer 1.3s linear infinite;
}
@keyframes axShimmer{
	from{ background-position: 130% 0; }
	to{ background-position: -130% 0; }
}
.ax-card-thumb img{
	position: relative;
	width:100%; height:100%;
	object-fit: cover;
	display:block;
	opacity: 0;
	transition: transform .3s ease, opacity .55s ease;
}
.ax-card-thumb img.ax-img-on{ opacity: 1; }
.ax-card:hover .ax-card-thumb img{ transform: scale(1.07); }
.ax-card-play{
	position:absolute;
	inset: 0;
	display:flex;
	align-items:center;
	justify-content:center;
	background: rgba(10,13,18,.55);
	color:#fff;
	opacity: 0;
	transition: opacity .2s ease;
}
.ax-card-play svg{
	width: 46px; height: 46px;
	padding: 10px;
	border-radius: 999px;
	background: var(--ax-accent);
	box-shadow: 0 6px 20px rgba(var(--ax-accent-rgb),.5);
}
.ax-card:hover .ax-card-play{ opacity:1; }
.ax-card-body{ padding: 9px 11px 11px; }
.ax-card-title{
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ax-card-meta{
	display:flex;
	align-items:center;
	gap: 10px;
	margin-top: 3px;
	font-size: 11.5px;
	color: var(--ax-text-dim);
}
.ax-star{ color: var(--ax-accent-2); font-weight: 700; }

/* ================= ARROW CARD (last slot of category rows) ================= */
.ax-arrow-card{
	background: linear-gradient(135deg, rgba(var(--ax-accent-rgb),.16), rgba(var(--ax-grad-rgb),.16));
	border: 1px dashed rgba(var(--ax-accent-2-rgb),.55);
}
.ax-arrow-card:hover{
	border-color: var(--ax-accent-2);
	background: linear-gradient(135deg, rgba(var(--ax-accent-rgb),.28), rgba(var(--ax-grad-rgb),.28));
}
.ax-arrow-inner{
	height: 100%;
	min-height: 100%;
	aspect-ratio: auto;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap: 8px;
	padding: 16px 10px;
	text-align:center;
}
.ax-arrow-label{
	font-weight: 800;
	font-size: 14px;
	max-width: 100%;
	overflow:hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ax-arrow-ico{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width: 62px; height: 62px;
	border-radius: 999px;
	color:#fff;
	background: linear-gradient(135deg, var(--ax-accent), var(--ax-grad));
	box-shadow: 0 8px 22px rgba(var(--ax-accent-rgb),.4);
	transition: transform .2s ease;
}
.ax-arrow-card:hover .ax-arrow-ico{ transform: translateX(5px) scale(1.05); }
.ax-arrow-sub{
	font-size: 12px;
	color: var(--ax-text-dim);
	font-weight: 600;
}

/* ================= GAME PAGE ================= */
.ax-game-page{ margin-bottom: 20px; }
.ax-game-layout{ display:flex; gap: 22px; align-items:flex-start; }
.ax-game-left{ flex: 1 1 0; min-width: 0; }
.ax-game-side{ width: 360px; flex-shrink: 0; }
.ax-game-side .ax-grid-side{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.ax-game-frame-wrap{
	width: 100%;
	background:#000;
	border-radius: var(--ax-radius);
	overflow:hidden;
	border: 1px solid var(--ax-border);
	box-shadow: var(--ax-shadow);
	margin-bottom: 10px;
}
.ax-game-frame{ position:relative; width:100%; aspect-ratio: 16/9; max-height: calc(100vh - 260px); }
.ax-game-iframe{
	position:absolute;
	inset:0;
	width:100% !important;
	height:100% !important;
	border:0;
}
/* Mobile: stack vertically, game fills screen width */
@media (max-width: 1023px){
	.ax-game-layout{ flex-direction: column; }
	.ax-game-side{ width: 100%; }
	.ax-game-side .ax-grid-side{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 767px){
	.ax-game-layout{ gap: 16px; }
	.ax-game-frame{ max-height: calc(100vh - 200px); }
	.ax-game-frame-wrap{ margin: 0 -14px; width: calc(100% + 28px); border-radius: 0; border-left:0; border-right:0; }
}
@media (max-width: 559px){
	.ax-game-side .ax-grid-side{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.ax-game-toolbar{
	display:flex;
	align-items:center;
	gap: 16px;
	flex-wrap: wrap;
	margin: 16px 0;
	padding: 14px 16px;
	background: var(--ax-surface);
	border: 1px solid var(--ax-border);
	border-radius: var(--ax-radius);
}
.ax-toolbar-left{ min-width: 0; }
.ax-game-title{ margin:0; font-size: 21px; font-weight: 800; }
.ax-game-stats{
	display:flex; gap: 14px; flex-wrap: wrap;
	margin-top: 4px;
	font-size: 13px;
	color: var(--ax-text-dim);
}
.ax-toolbar-actions{
	margin-left:auto;
	display:flex;
	align-items:center;
	gap: 8px;
	flex-wrap: wrap;
}
.ax-action{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width: 40px; height: 40px;
	padding: 0 10px;
	border-radius: 10px;
	border: 1px solid var(--ax-border);
	background: var(--ax-surface-2);
	color: var(--ax-text);
	font-size: 15px;
	cursor: pointer;
	transition: background .15s, transform .15s;
}
.ax-action:hover{ background: var(--ax-surface-2); transform: translateY(-1px); color:#fff; }
.ax-action.ax-active{ border-color: var(--ax-accent); background: rgba(var(--ax-accent-rgb),.18); }
.ax-btn-style{ font-weight:700; }
.vote-status{ font-size:12px; color: var(--ax-text-dim); font-weight:700; }
.vote-status.ax-vote-ok{ color: var(--ax-green); }
.vote-status.ax-vote-no{ color: var(--ax-accent); }

.ax-game-detail-grid{
	display:block;
}
.ax-detail-main{ max-width: 100%; }
.ax-block{
	background: var(--ax-surface);
	border: 1px solid var(--ax-border);
	border-radius: var(--ax-radius);
	padding: 16px 18px;
	margin-bottom: 16px;
}
.ax-block-title{
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--ax-text);
}
.ax-block-text{ color: var(--ax-text-soft); font-size: 14.5px; overflow-wrap: anywhere; }
.ax-pill-row{ display:flex; flex-wrap:wrap; gap:8px; }
.ax-pill, .ax-tag{
	display:inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--ax-surface-2);
	border: 1px solid var(--ax-border);
	color: var(--ax-text);
	font-size: 13px;
	font-weight: 600;
	transition: background .15s, border-color .15s;
}
.ax-pill:hover, .ax-tag:hover{ background: rgba(var(--ax-accent-rgb),.15); border-color: var(--ax-accent); color:#fff; }

/* ================= ARCHIVE / SEARCH / EMPTY ================= */
.ax-archive-count{ color: var(--ax-text-dim); font-size: 13.5px; }
.ax-archive-desc{ color: var(--ax-text-dim); max-width: 900px; }
.ax-empty{
	text-align:center;
	padding: 60px 20px;
	background: var(--ax-surface);
	border: 1px dashed var(--ax-border);
	border-radius: var(--ax-radius);
}
.ax-empty-icon{ font-size: 52px; margin-bottom: 10px; }
.ax-404-icon{
	font-weight: 900;
	background: linear-gradient(135deg, var(--ax-accent), var(--ax-grad));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ax-empty h3{ font-weight: 800; margin: 0 0 6px; }
.ax-empty p{ color: var(--ax-text-dim); margin-bottom: 18px; }
.ax-btn-primary{
	display:inline-flex;
	align-items:center;
	height: 42px;
	padding: 0 24px;
	border-radius: 999px;
	font-weight: 700;
	color:#fff;
	background: linear-gradient(135deg, var(--ax-accent), var(--ax-grad));
}
.ax-btn-primary:hover{ color:#fff; opacity:.92; }

/* ================= PAGINATION ================= */
.ax-pagination{ margin-top: 22px; }
.ax-page-list{
	display:flex;
	flex-wrap:wrap;
	gap: 8px;
	list-style:none;
	margin:0; padding:0;
	justify-content:center;
}
.ax-page-list li a, .ax-page-list li span{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width: 40px; height: 40px;
	padding: 0 12px;
	border-radius: 10px;
	background: var(--ax-surface);
	border: 1px solid var(--ax-border);
	color: var(--ax-text);
	font-weight: 700;
}
.ax-page-list li a:hover{ border-color: var(--ax-accent); color:#fff; }
.ax-page-list li.active span{
	background: linear-gradient(135deg, var(--ax-accent), var(--ax-grad));
	border-color: transparent;
	color:#fff;
}
.ax-page-dots span{ background:none; border:none; }

/* ================= STATIC PAGE ================= */
.ax-page-title{ font-size: 26px; font-weight: 800; margin: 6px 0 16px; }
.ax-page-content{
	background: var(--ax-surface);
	border: 1px solid var(--ax-border);
	border-radius: var(--ax-radius);
	padding: 22px 24px;
	color: var(--ax-text-soft);
	max-width: 980px;
}
.ax-page-content img{ border-radius: 8px; }

/* ================= WIDGETS ================= */
.widget{ margin-bottom: 26px; }
.widget-title{
	font-weight: 800;
	letter-spacing: .4px;
	margin: 0 0 12px;
}

/* ================= FOOTER ================= */
.ax-footer{
	flex: none;
	background: var(--ax-bg-soft);
	border-top: 1px solid var(--ax-border);
}
.ax-footer-grid{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 26px;
	padding: 34px 26px 26px;
}
.ax-footer-widget{ min-width: 0; color: var(--ax-text-dim); font-size: 14px; }
.ax-footer-widget .widget-title{ color: var(--ax-text); }
.ax-footer-widget ul{ list-style:none; margin:0; padding:0; }
.ax-footer-widget ul li{ margin-bottom: 8px; }
.ax-footer-widget ul a{ color: var(--ax-text-dim); }
.ax-footer-widget ul a:hover{ color:#fff; }
.ax-copyright{
	border-top: 1px solid var(--ax-border);
	padding: 14px 26px;
	font-size: 13px;
	color: var(--ax-text-dim);
}
.ax-copyright-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.ax-copyright-logo{ flex:none; }
.ax-logo-mark-sm{ width: 30px; height: 30px; border-radius: 8px; }
.ax-logo-img-sm{ height: 30px; }
.ax-copyright-right{ margin-left:auto; }
/* keep HTML widget markup neat inside the copyright bar */
.ax-copyright-right .widget{ margin-bottom: 0; }
.ax-copyright-right p{ margin: 0; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1599px){
	.ax-grid{ grid-template-columns: repeat(6, minmax(0,1fr)); }
}
@media (max-width: 1199px){
	.ax-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
	.ax-game-layout{ flex-direction: column; }
	.ax-game-side{ width: 100%; }
	.ax-grid-side{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 1023px){
	/* Sidebar becomes off-canvas drawer */
	.ax-sidebar{
		transform: translateX(-100%);
		width: var(--ax-side-w) !important;
		transition: transform .25s ease;
		/* touch scrolling inside the drawer */
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}
	.ax-sidebar .ax-side-label, .ax-sidebar .ax-side-head{ opacity: 1; }
	.ax-mobile-open .ax-sidebar{ transform: none; box-shadow: 12px 0 30px rgba(0,0,0,.5); }
	.ax-content{ margin-left: 0; }
}
@media (max-width: 859px){
	.ax-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
	.ax-grid-side{ grid-template-columns: repeat(3, minmax(0,1fr)); }
	.ax-footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px){
	/* Topbar: hide centered search, show search toggle */
	.ax-topbar-center{ display:none; }
	.ax-search-toggle{ display:inline-flex; }
	.ax-main{ padding: 16px 14px 8px; }
	.ax-section-title{ font-size: 17px; }
	.ax-game-toolbar{ gap: 10px; }
	.ax-toolbar-actions{ margin-left: 0; width: 100%; }
}
@media (max-width: 559px){
	.ax-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
	.ax-card-body{ padding: 7px 8px 9px; }
	.ax-card-title{ font-size: 12px; }
	.ax-card-meta{ font-size: 10.5px; gap: 7px; }
	.ax-card-play svg{ width: 36px; height: 36px; padding: 8px; }
	.ax-footer-grid{ grid-template-columns: 1fr; padding: 26px 18px; }
	.ax-copyright{ padding: 12px 18px; }
	.ax-logo-text{ display:none; }
}

/* ================= SMALL CUSTOM EXTRAS ================= */
.ax-loadmore-wrap{ text-align:center; margin-top: 18px; }
.ax-loadmore-end{ color: var(--ax-text-dim); font-size: 13px; padding: 12px 0; }

/* Comment system color fixes on dark background */
.jquery-comments .comment-list .comment .wrapper .details,
.jquery-comments .comment-list .comment .wrapper .content{ color: var(--ax-text-soft); }

/* =========================================================
   COLOR SCHEMES (v1.1.7)
   Three distinct palettes, switchable via companion plugin
   or forced by body class. Ember = default (in :root above).
   ========================================================= */

/* Scheme 1: Ember (warm amber + coral) — rich dark arcade */
.ax-body.ax-scheme-ember{
	--ax-bg: #0f0d12;
	--ax-bg-rgb: 15,13,18;
	--ax-bg-soft: #15131c;
	--ax-surface: #1c1826;
	--ax-surface-2: #252030;
	--ax-border: rgba(255,187,90,.09);
	--ax-text: #f0ebf7;
	--ax-text-dim: #a69ab8;
	--ax-text-soft: #cfc4e0;
	--ax-accent: #ff6d3a;
	--ax-accent-rgb: 255,109,58;
	--ax-grad: #d946ef;
	--ax-grad-rgb: 217,70,239;
	--ax-accent-2: #fbbf24;
	--ax-accent-2-rgb: 251,191,36;
	--ax-green: #2ee6a8;
}

/* Scheme 2: Ocean (deep navy + ice cyan) — cool tech */
.ax-body.ax-scheme-ocean{
	--ax-bg: #060d1a;
	--ax-bg-rgb: 6,13,26;
	--ax-bg-soft: #0a1326;
	--ax-surface: #0f1a33;
	--ax-surface-2: #152240;
	--ax-border: rgba(100,180,255,.10);
	--ax-text: #e8f0ff;
	--ax-text-dim: #7a9ec0;
	--ax-text-soft: #b8cfe8;
	--ax-accent: #38bdf8;
	--ax-accent-rgb: 56,189,248;
	--ax-grad: #818cf8;
	--ax-grad-rgb: 129,140,248;
	--ax-accent-2: #f472b6;
	--ax-accent-2-rgb: 244,114,182;
	--ax-green: #34d399;
}

/* Scheme 3: Forest (emerald + lime) — deep woodland */
.ax-body.ax-scheme-forest{
	--ax-bg: #07100a;
	--ax-bg-rgb: 7,16,10;
	--ax-bg-soft: #0c1810;
	--ax-surface: #122018;
	--ax-surface-2: #192a20;
	--ax-border: rgba(140,230,130,.09);
	--ax-text: #eaf7ec;
	--ax-text-dim: #8ab898;
	--ax-text-soft: #bcdac4;
	--ax-accent: #4ade80;
	--ax-accent-rgb: 74,222,128;
	--ax-grad: #06b6d4;
	--ax-grad-rgb: 6,182,212;
	--ax-accent-2: #facc15;
	--ax-accent-2-rgb: 250,204,21;
	--ax-green: #a3e635;
}