/**
 * Single-app header: title, version badge, icon actions, share row.
 *
 * Enqueued by hapk_app_header_assets() in includes/hapk-site-chrome.php, after `style`.
 * The theme's dark block (px_css_dark_theme) prints at wp_head priority 99, i.e. AFTER
 * this file, so anything it also targets is written here with an `html`/`body` prefix to
 * out-specify it; the .hapk-* classes are new and it never touches them.
 */

/* ------------------------------------------------------------------ title */

html h1.main-box-title {
	font-size: 26px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0 8px 2px 0;
}

html .app-spe .version {
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: #5b6475;
	background: rgba(0, 0, 0, .05);
	border: 1px solid rgba(0, 0, 0, .09);
	border-radius: 999px;
	padding: 5px 10px;
	position: relative;
	top: -3px;
}

body.theme-dark .app-spe .version {
	color: #cfd4df;
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .13);
}

/* --------------------------------------------------- report / watch icons */

/* One compact row under the rating instead of two stacked lines of prose.
   display:contents lifts the watch button out of its wrapper so it sits beside
   Report, while the wrapper's status line still gets its own full-width row. */
.hapk-icon-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 8px;
	margin-top: 12px;
}

.hapk-icon-actions .hapk-watch-wrap {
	display: contents;
}

.hapk-icon-actions .hapk-watch-label {
	display: none;
}

.hapk-icon-actions .hapk-watch-msg {
	flex: 0 0 100%;
	order: 9;
	margin: 0;
	font-size: 12px;
	opacity: .6;
	text-align: center;
	min-height: 0;
}

html .hapk-icon-action,
html .hapk-icon-actions .hapk-watch-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	margin: 0;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 10px;
	background: rgba(0, 0, 0, .03);
	color: #6b7280;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: color .15s, background .15s, border-color .15s;
}

html .hapk-icon-action:hover,
html .hapk-icon-actions .hapk-watch-btn:hover {
	color: #111;
	background: rgba(0, 0, 0, .07);
	border-color: rgba(0, 0, 0, .18);
}

html .hapk-icon-actions .hapk-watch-btn.is-on {
	color: #fff;
	background: #1bbc9b;
	border-color: #1bbc9b;
}

html .hapk-icon-action[disabled],
html .hapk-icon-actions .hapk-watch-btn[disabled] {
	opacity: .55;
	cursor: default;
}

body.theme-dark .hapk-icon-action,
body.theme-dark .hapk-icon-actions .hapk-watch-btn {
	border-color: rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .05);
	color: #b9bfcc;
}

body.theme-dark .hapk-icon-action:hover,
body.theme-dark .hapk-icon-actions .hapk-watch-btn:hover {
	color: #fff;
	background: rgba(255, 255, 255, .11);
	border-color: rgba(255, 255, 255, .22);
}

body.theme-dark .hapk-icon-actions .hapk-watch-btn.is-on {
	color: #fff;
	background: #1bbc9b;
	border-color: #1bbc9b;
}

/* ------------------------------------------------------------------ share */

.hapk-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	clear: both;
	margin: 4px 0 2px;
}

.hapk-share-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #9aa1ad;
	margin-right: 2px;
}

.hapk-share-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.hapk-share-list li {
	list-style: none;
	margin: 0;
	padding: 0;
}

html .hapk-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 10px;
	background: rgba(0, 0, 0, .03);
	color: #6b7280;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: color .15s, background .15s, border-color .15s, transform .15s;
}

html .hapk-share-btn:hover {
	color: #fff;
	transform: translateY(-1px);
}

body.theme-dark .hapk-share-btn {
	border-color: rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .05);
	color: #b9bfcc;
}

/* Brand colour arrives on hover only, so the row reads as one quiet control group
   until you reach for it. */
html .hapk-share-btn.is-facebook:hover  { background: #1877f2; border-color: #1877f2 }
html .hapk-share-btn.is-twitter:hover   { background: #000;    border-color: #000 }
html .hapk-share-btn.is-pinterest:hover { background: #e60023; border-color: #e60023 }
html .hapk-share-btn.is-telegram:hover  { background: #229ed9; border-color: #229ed9 }
html .hapk-share-btn.is-whatsapp:hover  { background: #25d366; border-color: #25d366 }
html .hapk-share-btn.is-copy:hover,
html .hapk-share-btn.is-native:hover    { background: #1bbc9b; border-color: #1bbc9b }

html .hapk-share-btn.is-copied {
	color: #fff;
	background: #1bbc9b;
	border-color: #1bbc9b;
}

/* The native share sheet only exists on devices that have one; JS unhides it. */
.hapk-share-list li.hapk-native-share {
	display: none;
}

@media (max-width: 500px) {
	html h1.main-box-title {
		font-size: 21px;
		line-height: 1.3;
	}

	html .app-spe .version {
		font-size: 11px;
		padding: 4px 9px;
	}

	.box:not(.box-download) .app-spe.s2.box-social {
		float: none;
		width: 100%;
		padding: 0;
		clear: both;
	}

	.hapk-share {
		justify-content: center;
		padding-top: 10px;
	}

	.hapk-share-label {
		display: none;
	}
}

/* ------------------------------------------------------------------- hero */
/* Game page top section (template-parts/single-infoapp.php). One grid:
     phone:   crumbs (+ report/notify/share at its right) / cover+head / download / info cards
     desktop: crumbs / cover | head (title + report/notify/share) + download / info cards */

.hapk-hero {
	position: relative;
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	grid-template-areas:
		"crumbs  crumbs"
		"cover   head"
		"cta     cta"
		"mlt     mlt"
		"stats   stats";
	column-gap: 14px;
	row-gap: 16px;
	padding: 2px 6px 4px;
}

.hapk-hero-crumbs  { grid-area: crumbs; min-width: 0; }
.hapk-hero-cover   { grid-area: cover; }
.hapk-hero-head    { grid-area: head; min-width: 0; }
.hapk-hero-cta     { grid-area: cta; }
.hapk-hero-stats   { grid-area: stats; }
.hapk-mlt          { grid-area: mlt; min-width: 0; }

.hapk-hero-crumbs #breadcrumbs {
	margin: 0;
	padding: 0;
	font-size: 13px;
	opacity: .75;
}

/* cover */
.hapk-hero .hapk-hero-cover .bloque-imagen {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	padding: 0;
	border-radius: 20px;
	overflow: hidden;
	background: #1d222d;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .06);
}

.hapk-hero .hapk-hero-cover .image-single {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

/* title + chips + rating */
html .hapk-hero h1.main-box-title {
	display: inline;
	margin: 0 6px 0 0;
	font-size: 24px;
	line-height: 1.25;
}

html .hapk-hero .version {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	top: -3px;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: #cfd4df;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .13);
}

.hapk-hero-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.hapk-hero-chips:empty {
	display: none;
}

.hapk-hero-chips .hapk-chip,
.hapk-hero-chips .b-type,
.hapk-hero-chips .amount-app li {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	color: #1bbc9b;
	background: rgba(27, 188, 155, .12);
	border: 1px solid rgba(27, 188, 155, .28);
	position: static;
	margin: 0;
}

.hapk-hero-chips .hapk-chip:hover {
	color: #fff;
	background: #1bbc9b;
}

.hapk-hero-chips .b-type {
	color: #fff;
	background: linear-gradient(135deg, #f0a020, #e0661b);
	border-color: transparent;
}

.hapk-hero-chips .amount-app {
	display: contents;
	list-style: none;
}

html .hapk-hero .box-rating,
html .hapk-hero .box-rating.movil {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 12px 0 0;
	padding: 0;
	text-align: left;
	background: none;
	border: 0;
}

html .hapk-hero .box-rating .rating-average {
	font-size: 14px;
	opacity: .7;
}

html .hapk-hero .box-rating .rating-average b {
	font-size: 18px;
	opacity: 1;
}

html .hapk-hero .box-rating .rating-text {
	width: auto;
	font-size: 13px;
	opacity: .6;
}

.hapk-hero-desc {
	margin-top: 14px;
	font-size: 14px;
	line-height: 1.6;
	opacity: .8;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hapk-hero-desc p {
	margin: 0;
}

/* download + secondary buttons */
.hapk-hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

html .hapk-hero .hapk-hero-cta .buttond {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: auto; /* style.min.css: .buttond{width:100%} */
	min-height: 46px;
	margin: 0;
	padding: 0 20px;
	border-radius: 14px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}

html .hapk-hero .hapk-hero-cta .buttond i {
	position: static;
	width: auto;
	height: auto;
	background: none;
	font-size: 16px;
	line-height: 1;
}

html .hapk-hero .hapk-hero-cta .hapk-dl-nav {
	flex: 1 1 100%;
	min-height: 52px;
	padding: 0 22px;
	font-size: 15px;
	background: linear-gradient(135deg, #22d3ac, #1bbc9b 45%, #129c80);
	box-shadow: 0 10px 24px rgba(27, 188, 155, .32), inset 0 1px 0 rgba(255, 255, 255, .25);
}

html .hapk-hero .hapk-hero-cta .hapk-dl-nav:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 30px rgba(27, 188, 155, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
}

html .hapk-hero .hapk-hero-cta .buttond.danv,
html .hapk-hero .hapk-hero-cta .buttond.t {
	flex: 1 1 0;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	text-transform: none;
	font-weight: 600;
}

html .hapk-hero .hapk-hero-cta .buttond.t:hover  { background: #229ed9; border-color: #229ed9; }
html .hapk-hero .hapk-hero-cta .buttond.danv:hover { background: #41495d; }

/* info cards (developer, released, version, size, Get it on...) */
.hapk-hero-stats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
}

.hapk-hero-stats:empty {
	display: none;
}

.hapk-hero-stats > span {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding: 12px 14px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .07);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: #e6e9ef;
}

.hapk-hero-stats > span > b {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #8a93a3;
}

.hapk-hero-stats > span > br {
	display: none;
}

.hapk-hero-stats > span > a {
	color: #1bbc9b;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.hapk-hero-stats > span > a:hover {
	text-decoration: underline;
}

.hapk-hero-stats > span > a img {
	display: block;
	max-width: 130px;
	height: auto;
}

/* title row: title + report / notify / share icons */
.hapk-hero-titlerow {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.hapk-hero-title {
	flex: 1 1 auto;
	min-width: 0;
}

.hapk-hero-tools {
	flex: 0 0 auto;
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
}

.hapk-hero-tools .hapk-icon-actions {
	display: contents;
}

/* the watch status line ("You'll get an email...") floats under the icons */
.hapk-hero-tools .hapk-watch-msg {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	width: max-content;
	max-width: 220px;
	text-align: right;
	pointer-events: none;
}

html .hapk-hero-tools .hapk-icon-action,
html .hapk-hero-tools .hapk-watch-btn {
	width: 36px;
	height: 36px;
	border-radius: 11px;
}

/* share: one button, menu drops down */
.hapk-share-dd {
	position: relative;
}

html .hapk-share-dd.is-open .hapk-share-toggle,
html .hapk-share-dd .hapk-share-toggle:hover {
	color: #fff;
	background: #1bbc9b;
	border-color: #1bbc9b;
}

.hapk-share-dd .hapk-share-toggle i {
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.hapk-share-dd.is-open .hapk-share-toggle i {
	transform: rotate(-20deg) scale(1.1);
}

.hapk-share-pop {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 50;
	min-width: 210px;
	padding: 8px;
	border-radius: 16px;
	background: rgba(32, 37, 49, .98);
	border: 1px solid rgba(255, 255, 255, .1);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px) scale(.94);
	transform-origin: top right;
	transition: opacity .2s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1), visibility 0s linear .3s;
}

.hapk-share-pop::before {
	content: "";
	position: absolute;
	top: -6px;
	right: 13px;
	width: 10px;
	height: 10px;
	background: inherit;
	border-left: 1px solid rgba(255, 255, 255, .1);
	border-top: 1px solid rgba(255, 255, 255, .1);
	transform: rotate(45deg);
}

.hapk-share-dd.is-open .hapk-share-pop {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .2s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1), visibility 0s;
}

html .hapk-share-pop .box-social,
html .box:not(.box-download) .hapk-share-pop .app-spe.s2.box-social {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	clear: none;
}

.hapk-share-pop .hapk-share {
	display: block;
	margin: 0;
	padding: 0;
}

.hapk-share-pop .hapk-share-label {
	display: block;
	margin: 4px 10px 8px;
}

.hapk-share-pop .hapk-share-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* each network as a labelled row; the label comes from the link's own title */
html .hapk-share-pop .hapk-share-btn {
	justify-content: flex-start;
	gap: 12px;
	width: 100%;
	height: 40px;
	padding: 0 12px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #dfe3ea;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	opacity: 0;
	transform: translateX(8px);
	transition: background .15s, color .15s, opacity .25s ease, transform .3s ease;
}

html .hapk-share-pop .hapk-share-btn i {
	width: 18px;
	text-align: center;
	font-size: 15px;
}

html .hapk-share-pop .hapk-share-btn::after {
	content: attr(title);
}

html .hapk-share-pop .hapk-share-btn:hover {
	transform: none;
}

.hapk-share-dd.is-open .hapk-share-btn {
	opacity: 1;
	transform: none;
}

/* rows cascade in */
.hapk-share-dd.is-open .hapk-share-list li:nth-child(1) .hapk-share-btn { transition-delay: .03s; }
.hapk-share-dd.is-open .hapk-share-list li:nth-child(2) .hapk-share-btn { transition-delay: .06s; }
.hapk-share-dd.is-open .hapk-share-list li:nth-child(3) .hapk-share-btn { transition-delay: .09s; }
.hapk-share-dd.is-open .hapk-share-list li:nth-child(4) .hapk-share-btn { transition-delay: .12s; }
.hapk-share-dd.is-open .hapk-share-list li:nth-child(5) .hapk-share-btn { transition-delay: .15s; }
.hapk-share-dd.is-open .hapk-share-list li:nth-child(6) .hapk-share-btn { transition-delay: .18s; }
.hapk-share-dd.is-open .hapk-share-list li:nth-child(7) .hapk-share-btn { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
	.hapk-share-pop,
	html .hapk-share-pop .hapk-share-btn,
	.hapk-share-dd .hapk-share-toggle i {
		transition-duration: .01s !important;
		transition-delay: 0s !important;
	}
}

@media (min-width: 768px) {
	.hapk-hero {
		grid-template-columns: 210px minmax(0, 1fr);
		grid-template-rows: auto auto 1fr auto auto;
		grid-template-areas:
			"crumbs  crumbs"
			"cover   head"
			"cover   cta"
			"mlt     mlt"
			"stats   stats";
		column-gap: 26px;
		row-gap: 18px;
		padding: 4px 14px 6px;
	}

	html .hapk-hero h1.main-box-title {
		font-size: 30px;
	}

	.hapk-hero-cta {
		align-self: end;
	}

	html .hapk-hero .hapk-hero-cta .hapk-dl-nav {
		flex: 0 1 auto;
		min-width: 260px;
	}

	html .hapk-hero .hapk-hero-cta .buttond.danv,
	html .hapk-hero .hapk-hero-cta .buttond.t {
		flex: 0 1 auto;
	}
}

@media (max-width: 767px) {
	html .hapk-hero h1.main-box-title {
		font-size: 20px;
	}

	/* the full Description box follows right below on phones */
	.hapk-hero-desc {
		display: none;
	}

	/* Next to the title the cover column leaves no room on phones, so the icons sit at
	   the top-right of the hero, on the breadcrumb line. */
	.hapk-hero-tools {
		position: absolute;
		top: -4px;
		right: 6px;
	}

	.hapk-hero-crumbs {
		padding-right: 130px;
		min-height: 28px;
	}

	html .hapk-hero-tools .hapk-icon-action,
	html .hapk-hero-tools .hapk-watch-btn {
		width: 34px;
		height: 34px;
	}
}

/* ------------------------------------------------ Description / What's new */
/* Collapsed to a fixed height with a fade and a "Show more" button
   (assets/js/hapk-single.js adds .hapk-collapse only when the text is long). */

.hapk-collapse {
	position: relative;
	max-height: 260px;
	overflow: hidden;
	transition: max-height .45s cubic-bezier(.2, .8, .2, 1);
}

.hapk-collapse::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 90px;
	background: linear-gradient(to bottom, rgba(40, 45, 58, 0), #282d3a 85%);
	pointer-events: none;
	transition: opacity .3s ease;
}

.hapk-collapse.is-open::after {
	opacity: 0;
}

html .hapk-collapse-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px auto 2px;
	padding: 9px 20px;
	border-radius: 999px;
	border: 1px solid rgba(27, 188, 155, .4);
	background: rgba(27, 188, 155, .1);
	color: #1bbc9b;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

html .hapk-collapse-btn:hover,
html .hapk-collapse-btn:focus {
	background: #1bbc9b;
	color: #fff;
}

.hapk-collapse-btn i {
	transition: transform .3s ease;
}

.hapk-collapse-btn[aria-expanded="true"] i {
	transform: rotate(180deg);
}

@media (max-width: 767px) {
	.hapk-collapse {
		max-height: 220px;
	}
}

/* -------------------------------------------------------------- Images strip */
/* Native horizontal scrolling. The theme's js.js sized this container once, before the
   lazy images had loaded (it ended up width:45px inline), then moved it with transforms
   and re-measured every item on each touchmove. Its touch handlers and arrow clicks are
   intercepted in assets/js/hapk-single.js; mouse drag is hapk-drag-scroll.js. */

html #slideimages .px-carousel-container {
	width: auto !important;
	min-width: 0 !important;
	max-width: 100%;
	transform: none !important;
	overflow-x: auto !important;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

html #slideimages .px-carousel-container::-webkit-scrollbar {
	display: none;
}

#slideimages .px-carousel-item {
	scroll-snap-align: start;
}

#slideimages .px-carousel-nav button {
	transition: opacity .2s ease;
}

#slideimages .px-carousel-nav button.is-off {
	opacity: 0;
	pointer-events: none;
}

/* ------------------------------------------------- "What next?" sections */
/* More like this (hero strip), Recently viewed, Players also downloaded
   (includes/hapk-next-games.php, assets/js/hapk-recent.js). */

.hapk-mlt {
	padding: 14px 0 2px;
	border-top: 1px solid rgba(255, 255, 255, .07);
}

.hapk-mlt-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.hapk-mlt-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.hapk-mlt-title i {
	color: #1bbc9b;
}

.hapk-mlt-hint {
	color: #6f7787;
	font-size: 12px;
}

@media (min-width: 900px) {
	.hapk-mlt-hint {
		display: none;
	}
}

/* horizontal row of small cards (native scroll + mouse drag via hapk-drag-scroll.js) */
.hapk-mini-row {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 2px 2px 8px;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.hapk-mini-row::-webkit-scrollbar {
	display: none;
}

html .hapk-mini-card {
	flex: 0 0 132px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	color: inherit;
	text-decoration: none;
	scroll-snap-align: start;
}

.hapk-mini-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 14px;
	overflow: hidden;
	background: #2a2f3c;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .07);
}

.hapk-mini-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

.hapk-mini-card:hover .hapk-mini-thumb img {
	transform: scale(1.06);
}

.hapk-mini-title {
	color: #e6e9ef;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hapk-mini-card:hover .hapk-mini-title {
	color: #1bbc9b;
}

.hapk-mini-meta {
	color: #8a93a3;
	font-size: 11.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hapk-mini-rating {
	color: #f5c518;
}

@media (max-width: 600px) {
	html .hapk-mini-card {
		flex-basis: 112px;
	}
}

/* Recently viewed (game page) + end-of-page grid */
.hapk-recent-box[hidden],
.hapk-recent-home[hidden] {
	display: none !important;
}

.hapk-recent-box .hapk-mini-row {
	padding-top: 4px;
}

.hapk-endgrid .hapk-endgrid-section {
	margin: 0;
	padding: 0;
	background: none;
	box-shadow: none;
}

.hapk-recent-home .hapk-mini-row {
	padding: 0 10px 8px;
}

/* Recently updated (includes/hapk-recently-updated.php) */
.hapk-mini-updated {
	color: #1bbc9b;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hapk-updated-home .title-section i {
	color: #1bbc9b;
	font-size: .8em;
	margin-right: 6px;
}

.hapk-updated-home .hapk-mini-row {
	padding: 0 10px 8px;
}

html .hapk-hero-chips .hapk-chip-updated {
	gap: 5px;
	color: #fff;
	background: rgba(27, 188, 155, .85);
	border-color: transparent;
}

/* Comments: newest first, latest 5 threads until "Show all" (comments.php) */
#comments ol.comment-list.hapk-comments-collapsed > li:nth-child(n+6) {
	display: none;
}

.hapk-comments-more {
	display: block;
	width: 100%;
	margin: 6px 0 4px;
	padding: 11px 16px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 10px;
	background: rgba(255, 255, 255, .04);
	color: inherit;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.hapk-comments-more:hover,
.hapk-comments-more:focus-visible {
	border-color: #1bbc9b;
	color: #1bbc9b;
	background: rgba(27, 188, 155, .08);
}

#comments #respond + .comment-list,
#comments #respond ~ .comment-list {
	margin-top: 18px;
}