/*
Gamified Homepage Styles for Arcade-One Theme
Hover effects and animations for a more interactive gaming experience
*/

/* Animated Background Particles */
body {
	position: relative;
	overflow-x: hidden;
}

body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><circle cx="100" cy="100" r="2" fill="rgba(26,188,156,0.1)"><animate attributeName="cy" values="100;900;100" dur="15s" repeatCount="indefinite"/></circle><circle cx="300" cy="200" r="1.5" fill="rgba(52,152,219,0.1)"><animate attributeName="cy" values="200;800;200" dur="12s" repeatCount="indefinite"/></circle><circle cx="500" cy="150" r="2.5" fill="rgba(155,89,182,0.1)"><animate attributeName="cy" values="150;850;150" dur="18s" repeatCount="indefinite"/></circle><circle cx="700" cy="300" r="2" fill="rgba(241,196,15,0.1)"><animate attributeName="cy" values="300;700;300" dur="14s" repeatCount="indefinite"/></circle><circle cx="900" cy="250" r="1.5" fill="rgba(231,76,60,0.1)"><animate attributeName="cy" values="250;750;250" dur="16s" repeatCount="indefinite"/></circle></svg>');
	pointer-events: none;
	z-index: 0;
	opacity: 0.2;
}

.g-content,
.container-fluid {
	position: relative;
	z-index: 1;
}

/* Gamified Game Cards - Arcade-One */
.grid-1,
.grid-2,
.grid-3 {
	transition: transform 0.3s ease, z-index 0.3s ease;
	position: relative;
	animation: cardFloat 4s ease-in-out infinite;
}

.grid-1:nth-child(1) { animation-delay: 0s; }
.grid-1:nth-child(2) { animation-delay: 0.2s; }
.grid-1:nth-child(3) { animation-delay: 0.4s; }
.grid-1:nth-child(4) { animation-delay: 0.6s; }
.grid-1:nth-child(5) { animation-delay: 0.8s; }
.grid-1:nth-child(6) { animation-delay: 1s; }

@keyframes cardFloat {
	0%, 100% {
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		transform: translateY(-8px) rotate(1deg);
	}
}

.grid-1:hover,
.grid-2:hover,
.grid-3:hover {
	transform: translateY(-15px) scale(1.08) rotate(2deg) !important;
	z-index: 10;
	animation-play-state: paused;
}

.game-item {
	transition: all 0.3s ease;
}

.list-game {
	position: relative;
	overflow: hidden;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.list-game::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
	transform: rotate(45deg);
	transition: all 0.6s ease;
	opacity: 0;
	z-index: 1;
}

.list-game:hover::before {
	opacity: 1;
	animation: shine 1.5s ease-in-out;
}

@keyframes shine {
	0% {
		left: -50%;
		top: -50%;
	}
	100% {
		left: 150%;
		top: 150%;
	}
}

.list-game:hover {
	transform: scale(1.05);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0, 0, 0, 0.2);
}

.list-thumbnail {
	position: relative;
	overflow: hidden;
	transition: all 0.4s ease;
}

.list-thumbnail img {
	transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.list-game:hover .list-thumbnail {
	transform: scale(1.1);
}

.list-game:hover .list-thumbnail img {
	transform: scale(1.15) rotate(2deg);
	filter: brightness(1.1) saturate(1.2);
}

.list-info {
	position: relative;
	transition: all 0.3s ease;
	z-index: 2;
}

.list-game:hover .list-info {
	transform: translateY(-3px);
}

.list-title {
	transition: all 0.3s ease;
}

.list-game:hover .list-title {
	transform: scale(1.05);
	color: #1abc9c !important;
	text-shadow: 0 2px 8px rgba(26, 188, 156, 0.3);
}

.list-b-play {
	transition: all 0.3s ease;
}

.list-game:hover .list-b-play {
	transform: scale(1.2) rotate(10deg);
	filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.5));
}

/* Section Titles */
.section-title {
	position: relative;
	padding-left: 60px;
}

.section-title h3 {
	animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
	0%, 100% {
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
	50% {
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 20px rgba(26, 188, 156, 0.5);
	}
}

.section-title .g-icon {
	position: absolute;
	left: 0;
	top: 0;
	transition: all 0.3s ease;
	animation: iconPulse 2s ease-in-out infinite;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

@keyframes iconPulse {
	0%, 100% {
		transform: scale(1) rotate(0deg);
	}
	50% {
		transform: scale(1.1) rotate(5deg);
	}
}

.section-title:hover .g-icon {
	transform: scale(1.2) rotate(15deg);
	animation: none;
}

/* Load More Button */
.btn-load-more,
.btn-capsule {
	background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
	border: none;
	border-radius: 25px;
	padding: 12px 30px;
	font-weight: 600;
	color: white;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(26, 188, 156, 0.4);
	position: relative;
	overflow: hidden;
	text-transform: uppercase;
	letter-spacing: 1px;
	animation: buttonFloat 3s ease-in-out infinite;
}

@keyframes buttonFloat {
	0%, 100% {
		transform: translateY(0);
		box-shadow: 0 4px 15px rgba(26, 188, 156, 0.4);
	}
	50% {
		transform: translateY(-5px);
		box-shadow: 0 8px 25px rgba(26, 188, 156, 0.6);
	}
}

.btn-load-more:hover,
.btn-capsule:hover {
	transform: translateY(-8px) scale(1.05);
	box-shadow: 0 12px 35px rgba(26, 188, 156, 0.7);
	background: linear-gradient(135deg, #16a085 0%, #1abc9c 100%);
	animation: none;
}

.btn-load-more::before,
.btn-capsule::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
}

.btn-load-more:hover::before,
.btn-capsule:hover::before {
	width: 300px;
	height: 300px;
}

/* Navigation arrows */
.b-left,
.b-right {
	transition: all 0.3s ease;
}

.b-left:hover,
.b-right:hover {
	transform: scale(1.1);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Smooth page transitions */
section {
	animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.listing {
	animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Category items.
   NOTE: this block used to also include a teal ripple/lift/shadow hover
   effect (rgba(26,188,156,...)) that clashed with the brand-purple hover
   pill fixed further down this file (search "hover pill existed in markup")
   - that later fix properly scopes itself to (hover:hover) so it doesn't get
   stuck showing on mobile after a tap, but this older block wasn't scoped at
   all, so both were firing together and looked like mismatched, stuck
   coloring. Removed rather than scoped, since the purple pill already
   covers the same "give feedback on hover" job and matches the site's
   actual palette. */
.category-item {
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	position: relative;
	overflow: hidden;
}

/* Search input: no explicit :focus styling existed for it, so typing (or
   Chrome offering/applying autofill from previous searches) fell back to
   the browser's own defaults - Chrome forces a bright yellow background on
   autofilled fields that can't be overridden via background-color directly,
   only worked around with a huge inset box-shadow of the color we actually
   want, plus a long transition-delay so the browser's paint doesn't flash
   yellow first. */
.search-bar input.search:focus {
	outline: none;
	box-shadow: none;
	border-color: rgba(140, 88, 250, 0.6);
}

.search-bar input.search:-webkit-autofill,
.search-bar input.search:-webkit-autofill:hover,
.search-bar input.search:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff;
	caret-color: #fff;
	-webkit-box-shadow: 0 0 0 1000px #262653 inset;
	box-shadow: 0 0 0 1000px #262653 inset;
	transition: background-color 5000s ease-in-out 0s;
}

/* Search-suggest dropdown: game results (with thumbnail) shown live while
   typing in the search bar. position:fixed on purpose, not absolute - the
   mobile search bar lives inside <li class="category-item"> which has
   overflow:hidden (see that rule above), so an absolutely-positioned
   dropdown anchored to .search-bar was getting clipped and never visible.
   Fixed positioning escapes that clipping since it's placed relative to the
   viewport; js/custom.js computes top/left/width from the input's actual
   on-screen position (getBoundingClientRect) since there's no CSS anchor
   to rely on anymore. */
.search-bar .search-suggest {
	position: fixed;
	background: #262653;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	max-height: 360px;
	overflow-y: auto;
	z-index: 2000;
}
.search-suggest .search-suggest-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 14px;
	text-decoration: none;
	color: #fff;
}
.search-suggest .search-suggest-item:hover,
.search-suggest .search-suggest-item.active {
	background: rgba(140, 88, 250, 0.18);
}
.search-suggest .search-suggest-item img {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.06);
}
.search-suggest .search-suggest-item span {
	font-size: 13px;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.search-suggest .search-suggest-empty {
	padding: 14px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
	text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.grid-1,
	.grid-2,
	.grid-3 {
		animation: none;
	}
	
	.grid-1:hover,
	.grid-2:hover,
	.grid-3:hover {
		transform: translateY(-10px) scale(1.05) !important;
	}
	
	body::before {
		opacity: 0.1;
	}
}

/* Smooth scroll behavior */
html {
	scroll-behavior: smooth;
}

/* Game Content Alignment - Match game dimensions exactly */
.game-content {
	width: 100%;
	margin: 0;
	padding: 0;
	display: block;
	text-align: center;
	background: transparent;
}

.game-iframe-container {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	background: #000000;
	min-height: 600px;
}

/* Ensure iframe matches container exactly - maintains original absolute positioning */
.game-iframe-container .game-iframe {
	object-fit: contain;
	background: #000000;
}

/* Remove any extra spacing that might misalign the game */
.game-container {
	padding: 0;
	margin: 0;
	background: transparent;
}

/* Fix User Profile Dropdown - Ensure it appears above ALL content */
.user-nav {
	position: relative !important;
	z-index: 99999 !important;
	overflow: visible !important;
}

.user-btn {
	position: relative !important;
	z-index: 99999 !important;
}

.user-avatar {
	position: relative !important;
	z-index: 99999 !important;
}

.user-dropdown {
	z-index: 99999 !important;
	pointer-events: none !important;
	overflow: visible !important;
}

/* Desktop dropdown floats below the avatar; on mobile (<=992px) style.css
   switches it to a fixed full-width bar under the header instead of
   floating off invisibly under the fixed-height mobile top bar. */
@media (min-width: 993px) {
	.user-dropdown {
		position: absolute !important;
	}
}

.user-dropdown.show {
	opacity: 1 !important;
	pointer-events: auto !important;
	z-index: 99999 !important;
	visibility: visible !important;
	display: block !important;
}

/* Ensure parent containers don't clip the dropdown */
.top-nav,
.navbar,
.navbar-collapse,
.navbar-nav {
	overflow: visible !important;
	position: relative;
	z-index: 99998 !important;
}

nav#mainNav {
	position: relative !important;
	z-index: 99998 !important;
	overflow: visible !important;
}

.g-content,
.container-fluid,
.container-section {
	overflow: visible !important;
	position: relative;
}

/* Ensure sections don't cover the dropdown */
section.trending-games,
section.new-games,
section.popular,
section.recomendation {
	position: relative;
	z-index: 1 !important;
}

/* Ensure dropdown links are clickable and above everything, but ONLY while the
   dropdown is actually open (.show). Without this scoping the links stay
   pointer-events:auto even when the menu is closed (opacity:0), creating an
   invisible clickable overlay near the avatar that hijacks clicks on whatever
   sits underneath it (e.g. the game page's Fullscreen/Open-in-new-window
   buttons). */
.user-dropdown.show .item,
.user-dropdown.show .profile-menu .item,
.user-dropdown.show .profile-menu .profile-header {
	pointer-events: auto !important;
	cursor: pointer;
	position: relative;
	z-index: 100000 !important;
	display: block;
}

.user-dropdown.show .item a,
.user-dropdown.show .profile-menu .item a,
.user-dropdown.show .profile-menu .profile-header a {
	pointer-events: auto !important;
	cursor: pointer !important;
	position: relative;
	z-index: 100000 !important;
	display: block !important;
	text-decoration: none;
}

/* Make sure game cards don't cover the dropdown */
.grid-1,
.grid-2,
.grid-3,
.list-1-wrapper,
.game-item {
	z-index: 1 !important;
}

.grid-1:hover,
.grid-2:hover,
.grid-3:hover {
	z-index: 10 !important;
}

/* Ensure game content fills container completely */
#game-player {
	background: #000000;
	width: 100%;
	height: 100%;
}

/* Mobile top bar: sound + avatar, aligned in-line with the logo inside .side-header */
@media only screen and (max-width: 992px) {
	.topbar-user-controls {
		flex: 0 0 auto;
		height: 80px;
		display: flex;
		align-items: center;
		padding-right: 20px;
	}
	.topbar-user-controls .mute-button {
		margin-right: 10px !important;
		width: 32px !important;
		height: 32px !important;
		font-size: 1rem !important;
	}
	.topbar-user-controls .user-avatar {
		margin-left: 0;
		width: 44px;
		height: 44px;
	}
	.topbar-user-controls .user-avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* style.css caps the category list at calc(100vh - 80px), but 100vh on
	   mobile Safari/Chrome includes space hidden behind the address bar /
	   toolbar - the list can render taller than what's actually visible or
	   reachable, so the last couple of categories get cut off with no way to
	   scroll to them. 100dvh reflects the real visible viewport; the plain
	   vh line above it stays as a fallback for browsers without dvh support. */
	.left-categories {
		max-height: calc(100vh - 80px);
		max-height: calc(100dvh - 80px);
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	/* .categories-scroll-hint and .categories-scrollbar-track are siblings of
	   .left-categories, all inside .left-sidebar - and on mobile .left-sidebar
	   itself sits at left:-100vw (off-canvas), with only .side-header and
	   .left-categories individually compensating with their own left:100vw to
	   land back at the real viewport edge (see style.css). These two never
	   got that compensation, so they were rendering 100vw off-screen on every
	   mobile device - the hint and the big scrollbar only ever showed up on
	   desktop. Shift them the same +100vw, but only while the drawer itself
	   is open (.left-categories.show), so they don't sit on top of other
	   content while the list is closed. */
	.categories-scroll-hint,
	.categories-scrollbar-track {
		transform: translateX(-100vw);
		transition: var(--anim);
	}
	.left-categories.show ~ .categories-scroll-hint,
	.left-categories.show ~ .categories-scrollbar-track {
		transform: translateX(100vw);
	}
}

/* Trending section: swipe/drag slider instead of arrow buttons */
.list-1-wrapper {
	/* style.css reserved 70px on the left for the removed arrow button */
	padding-left: 0 !important;
	overflow-x: auto !important;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	cursor: grab;
	scrollbar-width: none;
	-ms-overflow-style: none;
	user-select: none;
	/* Horizontal scroll here is driven manually by JS (js/script.js), not
	   native overflow-x scrolling - without this, the browser starts its
	   own horizontal pan gesture the instant a touch begins, fighting the
	   manual scrollLeft writes before touchmove's preventDefault() has a
	   chance to stop it. pan-y keeps vertical page-scroll working through
	   this element while ceding all horizontal handling to the JS. */
	touch-action: pan-y;
}

.list-1-wrapper::-webkit-scrollbar {
	display: none;
	height: 0;
}

.list-1-wrapper.dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
}

.list-1-wrapper .game-item {
	scroll-snap-align: start;
}

/* Pulsing chevron hinting the row can be dragged/swiped; purely decorative,
   never intercepts clicks, and fades out once the user has scrolled it.
   Lives as the last item INSIDE .list-1-wrapper (not a sibling positioned
   absolute against the row) so it naturally sits inline at the same
   vertical position as the circle thumbnails instead of depending on the
   row's overall box height - and position:sticky keeps it pinned to the
   right edge of the visible scroll area as the row scrolls. */
.slide-hint {
	position: sticky;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	width: 38px;
	height: 38px;
	margin-left: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 18px;
	pointer-events: none;
	z-index: 2;
	animation: slide-hint-nudge 1.6s ease-in-out infinite;
	transition: opacity .4s ease;
}

.slide-hint.hide {
	opacity: 0;
}

@keyframes slide-hint-nudge {
	0%, 100% { transform: translateX(0); opacity: .85; }
	50% { transform: translateX(6px); opacity: .35; }
}

/* Left-edge swipe hint: nudges right to show the category drawer can be
   swiped open from here (see js/script.js's edge-swipe-to-open gesture and
   the .burger-left button it complements) - same "show once, then get out
   of the way" convention as .slide-hint/.categories-scroll-hint above,
   dismissed the first time the drawer is actually opened (js/script.js). */
.edge-swipe-hint {
	position: fixed;
	left: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(135deg, #8c58fa 0%, #6758fa 100%);
	color: #fff;
	font-size: 17px;
	z-index: 20;
	pointer-events: none;
	animation: edge-swipe-hint-nudge 1.8s ease-in-out infinite,
	           edge-swipe-hint-glow 1.8s ease-in-out infinite;
	transition: opacity .3s ease;
}

.edge-swipe-hint.hide {
	opacity: 0;
	animation-play-state: paused;
}

@keyframes edge-swipe-hint-nudge {
	0%, 100% { transform: translateY(-50%) translateX(0); }
	50%      { transform: translateY(-50%) translateX(8px); }
}

@keyframes edge-swipe-hint-glow {
	0%, 100% { box-shadow: 0 4px 14px rgba(103, 88, 250, 0.5), 0 0 0 0 rgba(140, 88, 250, 0.45); }
	50%      { box-shadow: 0 4px 14px rgba(103, 88, 250, 0.5), 0 0 0 9px rgba(140, 88, 250, 0); }
}

/* Play and Win Prizes section - money/prize themed animations */
.prizes-section {
	position: relative;
	overflow: hidden;
	background: radial-gradient(ellipse at top, rgba(255, 195, 0, 0.08) 0%, transparent 60%);
}

/* Gold trophy badge for the section title, pulsing like a jackpot glow */
.prize-icon {
	background: linear-gradient(135deg, #ffd54a 0%, #ff9d00 100%) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	color: #3a2400;
	font-size: 19px;
	animation: prize-icon-glow 2s ease-in-out infinite;
}

@keyframes prize-icon-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.55); }
	50% { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); }
}

/* Gold "Load More" button with a shimmer sweep to invite the next click */
.prize-load-btn {
	position: relative;
	overflow: hidden;
	background: linear-gradient(270deg, #ff9d00 0%, #ffd54a 100%) !important;
	color: #3a2400 !important;
	font-weight: 700;
	animation: prize-btn-pulse 2.4s ease-in-out infinite;
}

.prize-load-btn::after {
	content: '';
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: skewX(-20deg);
	animation: prize-btn-shine 2.8s ease-in-out infinite;
}

@keyframes prize-btn-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 157, 0, 0.5); }
	50% { box-shadow: 0 0 14px 4px rgba(255, 193, 7, 0.35); }
}

@keyframes prize-btn-shine {
	0% { left: -60%; }
	100% { left: 130%; }
}

/* Subtle gold ring on prize cards to reinforce the "win" theme on hover */
.prizes-section .list-game {
	transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.prizes-section .list-game:hover {
	box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.6), 0 8px 20px rgba(255, 157, 0, 0.25);
}

/* Category badge under game card titles */
.cat-badge {
	display: flex !important;
	align-items: center;
	gap: 5px;
}

.cat-badge-icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	opacity: 0.85;
}

/* Premium-game badge: gold trophy pill on the corner of a card's thumbnail,
   so premium games (currently stack-jump / Jetpack Heroes - see
   includes/portal-access.php) stand out from the rest at a glance on the
   homepage, category pages, and search results/suggestions. Reuses the same
   gold gradient already established for the "Play and Win Prizes" section
   icon (.prize-icon above) rather than inventing a new color language for
   "premium" - the two are meant to read as the same idea. */
.list-thumbnail {
	position: relative;
}
.premium-badge {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient(135deg, #ffd54a 0%, #ff9d00 100%);
	color: #3a2400;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
	z-index: 2;
}

/* Same badge, smaller, for the search-suggest dropdown rows (js/custom.js) -
   those thumbnails are only 40px, so the full-size corner pill would
   overwhelm them. */
.search-suggest-item .premium-badge {
	position: static;
	width: 16px;
	height: 16px;
	font-size: 9px;
	flex-shrink: 0;
	box-shadow: none;
}

/* Left sidebar category nav: the hover pill existed in markup (::before) but
   was never actually shown - it only had opacity:0 with no :hover rule to
   reveal it, and was capped at 60px wide so it wouldn't even reach the label.
   Give it a real hover state that matches the active pill's shape. */
.left-categories li a {
	transition: color 0.25s ease;
}

.left-categories li a::before {
	width: 100%;
	border-radius: 100px;
	transition: opacity 0.25s ease;
}

/* style.css also has an unscoped ".left-categories li a:hover { color:
   rgba(140,88,250,1) }" - on touch, tapping fakes :hover and it gets stuck
   showing that purple text (plus, previously, the pill below) until the user
   taps elsewhere, reading as broken/odd coloring. Neutralize it here first
   (same color as the non-hover state, so tapping is a visual no-op)... */
.left-categories li a:hover {
	color: rgba(255,255,255,0.8);
}

/* ...then only devices with a real pointer (mouse/trackpad) get the actual
   hover treatment, since (hover: hover) is never true on tap. */
@media (hover: hover) and (pointer: fine) {
	.left-categories li a:hover {
		color: #fff;
	}

	.left-categories li a:hover::before {
		opacity: 1;
		background: rgba(140, 88, 250, 0.16);
	}
}

/* Smoother, more reliable scrolling for the category list itself (both the
   fixed-height desktop panel and the mobile slide-out one share this rule). */
.left-categories {
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	scroll-behavior: smooth;
	touch-action: pan-y;
}

/* "More categories" hint: a fading gradient + pulsing down-arrow pinned to
   the bottom of .left-sidebar (not inside the scrolling <ul> itself - list
   items here are float:left, which doesn't support position:sticky
   reliably, unlike the trending row's inline-block items). Shown/hidden by
   script.js based on actual scroll position, so it disappears once there's
   nothing left below to scroll to and reappears if the user scrolls back up. */
.categories-scroll-hint {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 70px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding-bottom: 12px;
	background: linear-gradient(to bottom, rgba(38,38,83,0) 0%, rgba(38,38,83,0.96) 65%);
	color: rgba(255,255,255,0.9);
	font-size: 12px;
	letter-spacing: .02em;
	pointer-events: none;
	z-index: 3;
	opacity: 1;
	transition: opacity 0.3s ease;
	animation: categories-hint-nudge 1.6s ease-in-out infinite;
}

.categories-scroll-hint i {
	font-size: 16px;
	margin-bottom: 2px;
}

.categories-scroll-hint.hide {
	opacity: 0;
}

@keyframes categories-hint-nudge {
	0%, 100% { transform: translateY(0); opacity: .95; }
	50% { transform: translateY(4px); opacity: .55; }
}

/* Big, visible "gamified" scrollbar for the category list, built as real DOM
   elements (#categories-scrollbar-track/-thumb, driven by script.js) instead
   of ::-webkit-scrollbar pseudo-element styling - mobile Safari and Chrome
   (the primary audience here, via the Telebirr app) ignore ::-webkit-scrollbar
   customization entirely and always show their own thin native overlay, so
   that approach was invisible on the devices that matter most. The native
   scrollbar is hidden below and this thumb both mirrors scroll position AND
   is itself draggable, so dragging it is always a working way to scroll even
   if native touch-scroll ever misbehaves on a given device. */
.left-categories {
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-right: 24px !important;
	/* Tell the browser only vertical panning is expected here, so it can
	   commit to native touch-scroll immediately instead of waiting to see
	   if a horizontal gesture might be starting. */
	touch-action: pan-y;
}

.left-categories::-webkit-scrollbar {
	display: none;
	width: 0;
}

.left-categories li {
	padding-right: 6px;
}

.categories-scrollbar-track {
	/* top/height are set in px by script.js to match .left-categories'
	   actual rendered position - .side-header above it isn't a fixed size
	   (differs by breakpoint), so top:0/bottom:0 against .left-sidebar
	   would run the track through the logo/burger area too. */
	position: absolute;
	right: 4px;
	/* Scaled back down from an earlier 32px (itself grown from 20px) - the
	   sidebar is half-width now (style.css), so a thick scrollbar reads as
	   oversized next to the search bar and category list in that narrower
	   space. padding-right on .left-categories above shrank to match. */
	width: 14px;
	border-radius: 99px;
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(140, 88, 250, 0.15);
	z-index: 4;
	display: none;
}

.categories-scrollbar-track.visible {
	display: block;
}

.categories-scrollbar-thumb {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	min-height: 44px;
	border-radius: 99px;
	background: linear-gradient(180deg, rgba(103,88,250,1) 0%, rgba(140,88,250,1) 100%);
	box-shadow: 0 0 10px rgba(140, 88, 250, 0.7);
	cursor: grab;
	touch-action: none;
}

.categories-scrollbar-thumb:hover,
.categories-scrollbar-thumb.dragging {
	background: linear-gradient(180deg, rgba(123,108,255,1) 0%, rgba(160,108,255,1) 100%);
	box-shadow: 0 0 14px rgba(160, 108, 255, 0.9);
}

.categories-scrollbar-thumb.dragging {
	cursor: grabbing;
}

/* ===== DEV ONLY: temporary Telebirr token grabber — remove this whole block
   (and its HTML in header.php / JS in script.js) before production. ===== */
.dev-token-section {
	margin-top: 20px;
	margin-bottom: 20px;
}

.dev-token-btn {
	width: 100%;
	max-width: 420px;
	display: block;
	background: #7a3b00;
	border: 1px dashed #ffb84d;
	color: #ffd699;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.dev-token-btn:disabled {
	opacity: .6;
	cursor: default;
}

.dev-token-btn:hover:not(:disabled) {
	background: #944a00;
}

.dev-token-box {
	margin-top: 8px;
	max-width: 420px;
}

.dev-token-row {
	display: flex;
	gap: 6px;
}

.dev-token-hint {
	margin-top: 6px;
	font-size: 10px;
	color: #ffcf99;
	opacity: .8;
}

.dev-token-value {
	flex: 1;
	min-width: 0;
	background: #1a1a1a;
	color: #7CFC7C;
	font-family: monospace;
	font-size: 11px;
	border: 1px solid #444;
	border-radius: 6px;
	padding: 8px;
}

.dev-token-copy {
	flex-shrink: 0;
	background: #ffb84d;
	color: #3a2400;
	border: none;
	border-radius: 6px;
	padding: 0 12px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}
/* ===== END DEV ONLY ===== */

/* Browse by Category (homepage) - each row starts as an empty spinner
   shell; js/script.js fills it in via includes/fetch.php only once the row
   scrolls into view (IntersectionObserver). See home.php for why. */
.category-row {
	margin-top: 22px;
}
.category-row-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.category-row-header h4 {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	margin: 0;
}
.category-row-seeall {
	font-size: 13px;
	font-weight: 600;
	color: #8c58fa;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	margin-left: 12px;
}
.category-row-seeall:hover {
	text-decoration: underline;
}
.category-row-games {
	min-height: 90px;
}
.category-row-spinner {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 0;
}
.category-row-loader {
	width: 30px;
	height: 30px;
	border: 3px solid rgba(140, 88, 250, 0.2);
	border-top-color: #8c58fa;
	border-radius: 50%;
	animation: category-row-spin 0.8s linear infinite;
}
@keyframes category-row-spin {
	to { transform: rotate(360deg); }
}

/* Portal access status on the user's own profile page
   (includes/page-user-profile.php) - a small pill next to gender/join date,
   matching the compact badge language used elsewhere on the site
   (.cat-badge, .pkg-value) rather than a full section card, since it's a
   one-line status, not a block of content. */
.badge-portal-access {
	display: inline-block;
	margin: 6px 0;
	padding: 5px 12px;
	border-radius: 99px;
	font-size: 12.5px;
	font-weight: 600;
}
.badge-portal-access.active {
	background: rgba(0, 151, 57, 0.15);
	color: #34C468;
}
.badge-portal-access.inactive {
	background: rgba(140, 88, 250, 0.15);
	color: #8c58fa;
	text-decoration: none;
	cursor: pointer;
}
.badge-portal-access.inactive:hover {
	background: rgba(140, 88, 250, 0.25);
}

/* My Game Lives page (page-lives.php) */
.lives-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.lives-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border-radius: 10px;
	background: rgba(140, 88, 250, 0.06);
}
.lives-thumb {
	width: 52px;
	height: 52px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
}
.lives-info {
	flex: 1;
	min-width: 0;
}
.lives-title {
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lives-count {
	font-size: 13px;
	color: #6B7280;
	margin-top: 2px;
}

/* Account dropdown menu icons (functions.php's show_user_profile_header) */
.profile-menu .item a i {
	width: 16px;
	margin-right: 8px;
	text-align: center;
	opacity: .85;
}