/* ==========================================================================
   Playcora — dark games-portal theme (PlayHop-style)
   ========================================================================== */

:root {
	--fgtp-bg:        #111118;
	--fgtp-bg-2:      #18181f;
	--fgtp-surface:   #1f2028;
	--fgtp-surface-2: #282a35;
	--fgtp-surface-3: #32343f;
	--fgtp-line:      #2c2d3a;
	--fgtp-text:      #ebedf3;
	--fgtp-muted:     #9aa0b4;
	--fgtp-accent:    #f97316;
	--fgtp-accent-2:  #fb923c;
	--fgtp-green:     #39b54a;
	--fgtp-green-2:   #2fa840;
	--fgtp-danger:    #ff5a7a;
	--fgtp-error:     #ff6b6b;
	--fgtp-error-light: #ffb3b3;
	--fgtp-star:      #ffc93c;
	--fgtp-deep:      #15151d;
	--fgtp-deep-2:    #0c0c12;
	--fgtp-deep-3:    #131319;
	--fgtp-rail-w:    64px;
	--fgtp-rail-open: 220px;
	--fgtp-topbar-h:  56px;
	--fgtp-radius:    10px;
	--fgtp-gap:       14px;
	/* Strong ease-out (Emil Kowalski) — punchier than built-in ease-out */
	--fgtp-ease-out:  cubic-bezier(0.23, 1, 0.32, 1);
	/* z-index scale */
	--z-card:     2;
	--z-row-arrow: 5;
	--z-topbar:   40;
	--z-scrim:    55;
	--z-sidebar:  60;
	--z-overlay:  100;
	--z-modal:    110;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--fgtp-bg);
	color: var(--fgtp-text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.45;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.fgtp-skip-link {
	position: absolute;
	left: -9999px; top: 8px; z-index: 200;
	background: var(--fgtp-accent); color: #fff;
	padding: 10px 16px; border-radius: 8px;
}
.fgtp-skip-link:focus { left: 8px; }

:focus-visible {
	outline: 2px solid var(--fgtp-accent-2);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ==========================================================================
   LAYOUT SHELL
   ========================================================================== */
.fgtp-app { min-height: 100vh; }

.fgtp-shell {
	margin-left: var(--fgtp-rail-w);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* ==========================================================================
   SIDEBAR / ICON RAIL (PlayHop: collapsed icons, expand on hover)
   ========================================================================== */
.fgtp-sidebar {
	position: fixed;
	inset: 0 auto 0 0;
	width: var(--fgtp-rail-w);
	background: var(--fgtp-bg-2);
	border-right: 1px solid var(--fgtp-line);
	z-index: var(--z-sidebar);
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: none;
	transition: width .2s cubic-bezier(.4,0,.2,1);
}
.fgtp-sidebar::-webkit-scrollbar { width: 0; }

/* Show a slim scrollbar only while the sidebar is open/expanded. */
.fgtp-sidebar.is-open,
.fgtp-sidebar:hover,
.fgtp-sidebar:focus-within {
	scrollbar-width: thin;
	scrollbar-color: var(--fgtp-surface-3) transparent;
}
.fgtp-sidebar.is-open::-webkit-scrollbar,
.fgtp-sidebar:hover::-webkit-scrollbar,
.fgtp-sidebar:focus-within::-webkit-scrollbar { width: 8px; }
.fgtp-sidebar.is-open::-webkit-scrollbar-thumb,
.fgtp-sidebar:hover::-webkit-scrollbar-thumb,
.fgtp-sidebar:focus-within::-webkit-scrollbar-thumb {
	background: var(--fgtp-surface-3);
	border-radius: 4px;
	border: 2px solid var(--fgtp-bg-2);
}

@media (hover: hover) {
	.fgtp-sidebar:hover,
	.fgtp-sidebar:focus-within {
		width: var(--fgtp-rail-open);
		box-shadow: 6px 0 24px rgba(0,0,0,.45);
	}
}

/* Rail inner */
.fgtp-rail { padding: 8px 0 16px; }
.fgtp-rail__list { list-style: none; margin: 0; padding: 0; }
.fgtp-rail__item { margin: 1px 6px; }

.fgtp-rail__link {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 42px;
	padding: 0 14px;
	border-radius: 10px;
	color: var(--fgtp-muted);
	white-space: nowrap;
	transition: background .12s ease, color .12s ease;
}
.fgtp-rail__link:hover { background: var(--fgtp-surface); color: var(--fgtp-text); }
.fgtp-rail__link.is-active { background: var(--fgtp-surface-2); color: #fff; }

.fgtp-rail__icon {
	flex: 0 0 auto;
	display: grid; place-items: center;
	width: 22px; height: 22px;
	transition: transform 150ms var(--fgtp-ease-out);
}

/* Micro-interaction: icon springs up + label nudges right on hover.
   Subtle + fast (seen often), transform-only, pointer devices only. */
.fgtp-rail__label { transition: opacity .1s ease, transform 150ms var(--fgtp-ease-out); }
@media (hover: hover) and (pointer: fine) {
	.fgtp-rail__link:hover .fgtp-rail__icon { transform: scale(1.18); }
	.fgtp-rail__link:hover .fgtp-rail__label { transform: translateX(3px); }
}
.fgtp-rail__icon .fgtp-icon { width: 22px; height: 22px; }

.fgtp-rail__label {
	font-size: 13px; font-weight: 600;
	opacity: 0;
	transition: opacity .1s ease;
}
@media (hover: hover) {
	.fgtp-sidebar:hover .fgtp-rail__label,
	.fgtp-sidebar:focus-within .fgtp-rail__label { opacity: 1; }
}

/* Section divider: a separator line when collapsed; a label when expanded */
.fgtp-rail__divider {
	margin: 10px 14px 4px;
	border-top: 1px solid var(--fgtp-line);
	padding-top: 10px;
	min-height: 1px;
}
.fgtp-rail__divider-text {
	display: block;
	font-size: 11px; font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .8px;
	color: var(--fgtp-muted);
	white-space: nowrap;
	opacity: 0;
	height: 0;
	transition: opacity .1s ease;
}
@media (hover: hover) {
	.fgtp-sidebar:hover .fgtp-rail__divider-text,
	.fgtp-sidebar:focus-within .fgtp-rail__divider-text { opacity: 1; height: auto; }
}

/* "New" count badge (green pill, like PlayHop) — only shown when expanded */
.fgtp-rail__badge {
	margin-left: auto;
	padding: 1px 7px; border-radius: 999px;
	background: var(--fgtp-green); color: #fff;
	font-size: 11px; font-weight: 700;
	opacity: 0;
	transition: opacity .1s ease;
}
@media (hover: hover) {
	.fgtp-sidebar:hover .fgtp-rail__badge,
	.fgtp-sidebar:focus-within .fgtp-rail__badge { opacity: 1; }
}

/* Contact us CTA — neutral (like other rail items) when collapsed,
   accent pill when the sidebar is expanded */
.fgtp-rail__cta { padding: 6px 6px 4px; }
.fgtp-rail__ctabtn {
	display: flex; align-items: center; gap: 12px;
	height: 42px; padding: 0 14px;
	border-radius: 10px;
	background: transparent; color: var(--fgtp-muted);
	white-space: nowrap;
	transition: background .12s ease, color .12s ease;
}
.fgtp-rail__ctabtn:hover { background: var(--fgtp-surface); color: var(--fgtp-text); }
@media (hover: hover) {
	.fgtp-sidebar:hover .fgtp-rail__ctabtn,
	.fgtp-sidebar:focus-within .fgtp-rail__ctabtn {
		background: var(--fgtp-accent); color: #fff;
	}
	.fgtp-sidebar:hover .fgtp-rail__ctabtn:hover,
	.fgtp-sidebar:focus-within .fgtp-rail__ctabtn:hover { background: var(--fgtp-accent-2); }
}
.fgtp-rail__ctabtn .fgtp-rail__icon { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; }
.fgtp-rail__ctabtn .fgtp-rail__label { font-size: 13px; font-weight: 700; opacity: 0; transition: opacity .1s ease; }
@media (hover: hover) {
	.fgtp-sidebar:hover .fgtp-rail__ctabtn .fgtp-rail__label,
	.fgtp-sidebar:focus-within .fgtp-rail__ctabtn .fgtp-rail__label { opacity: 1; }
}

/* Sidebar footer (links + social + copyright) — expanded only */
.fgtp-rail__footer {
	padding: 8px 16px 20px;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition: opacity .12s ease;
}
@media (hover: hover) {
	.fgtp-sidebar:hover .fgtp-rail__footer,
	.fgtp-sidebar:focus-within .fgtp-rail__footer { opacity: 1; max-height: 400px; }
}
.fgtp-rail__footerlinks { list-style: none; margin: 0 0 12px; padding: 0; }
.fgtp-rail__footerlinks li { margin-bottom: 5px; }
.fgtp-rail__footerlinks a { font-size: 13px; color: var(--fgtp-muted); white-space: nowrap; }
.fgtp-rail__footerlinks a:hover { color: var(--fgtp-text); }
.fgtp-rail__social { display: flex; gap: 8px; margin-bottom: 12px; }
.fgtp-rail__social a {
	width: 32px; height: 32px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--fgtp-surface);
	color: var(--fgtp-muted);
	transition: background 160ms ease, color 160ms ease, transform 160ms var(--fgtp-ease-out);
}
.fgtp-rail__social a svg { transition: transform 160ms var(--fgtp-ease-out); }
.fgtp-rail__social a:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) {
	.fgtp-rail__social a:hover { background: var(--fgtp-surface-2); transform: translateY(-2px); }
	.fgtp-rail__social a:hover svg { transform: scale(1.1); }
	/* Brand-color tint on hover for instant recognition */
	.fgtp-rail__social a[aria-label="Facebook"]:hover { color: #1877f2; }
	.fgtp-rail__social a[aria-label="YouTube"]:hover { color: #ff0000; }
	.fgtp-rail__social a[aria-label="X"]:hover,
	.fgtp-rail__social a[aria-label="TikTok"]:hover { color: var(--fgtp-text); }
}
@media (prefers-reduced-motion: reduce) {
	.fgtp-rail__social a:hover { transform: none; }
	.fgtp-rail__social a:hover svg { transform: none; }
}
.fgtp-rail__copy { margin: 0; font-size: 12px; color: var(--fgtp-muted); white-space: nowrap; }

/* ==========================================================================
   TOPBAR (PlayHop: logo left, search center, icons right)
   ========================================================================== */
.fgtp-topbar {
	position: sticky;
	top: 0; z-index: var(--z-topbar);
	display: flex;
	align-items: center;
	gap: 14px;
	height: var(--fgtp-topbar-h);
	padding: 0 16px;
	background: var(--fgtp-bg-2);
	border-bottom: 1px solid var(--fgtp-line);
}

.fgtp-brand {
	display: flex; align-items: center;
	flex-shrink: 0;
}
.fgtp-brand__logo { height: 40px; width: auto; display: block; }

.fgtp-search { flex: 1 1 400px; max-width: 480px; margin: 0 auto; }

.fgtp-searchform { position: relative; display: flex; align-items: center; }
.fgtp-searchform__icon {
	position: absolute; left: 14px;
	color: var(--fgtp-muted); pointer-events: none;
}
.fgtp-searchform__input {
	width: 100%; height: 38px;
	padding: 0 46px 0 40px;
	border-radius: 10px;
	border: 1px solid var(--fgtp-line);
	background: var(--fgtp-surface);
	color: var(--fgtp-text);
	font-size: 13px;
}
.fgtp-searchform__input::placeholder { color: var(--fgtp-muted); }
.fgtp-searchform__input:focus { outline: none; border-color: var(--fgtp-accent); }
.fgtp-searchform__submit {
	position: absolute; right: 6px;
	height: 28px; padding: 0 14px;
	border: 0; border-radius: 8px;
	background: var(--fgtp-accent); color: #fff;
	font-weight: 700; font-size: 12px;
}
.fgtp-searchform__submit:hover { background: var(--fgtp-accent-2); }
.fgtp-searchform__submit:disabled {
	background: var(--fgtp-line); color: var(--fgtp-muted);
	cursor: not-allowed; opacity: .8;
}

/* Live-search dropdown (desktop topbar) */
.fgtp-livesearch { position: relative; flex: 1 1 400px; max-width: 480px; margin: 0 auto; }
.fgtp-search .fgtp-livesearch { flex: 1; max-width: none; margin: 0; }
.fgtp-livesearch__panel {
	position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
	max-height: min(70vh, 460px); overflow-y: auto;
	padding: 6px;
	border-radius: 12px;
	border: 1px solid var(--fgtp-line);
	background: var(--fgtp-surface);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}
.fgtp-livesearch__list { list-style: none; margin: 0; padding: 0; }
.fgtp-livesearch__link {
	display: flex; align-items: center; gap: 12px;
	padding: 7px 9px; border-radius: 9px;
	color: var(--fgtp-text); text-decoration: none;
	transition: background .12s var(--fgtp-ease-out);
}
.fgtp-livesearch__link:hover,
.fgtp-livesearch__link.is-active { background: var(--fgtp-bg); }
.fgtp-livesearch__thumb {
	width: 56px; height: 35px; flex: 0 0 auto;
	object-fit: cover; border-radius: 6px; background: var(--fgtp-bg);
}
.fgtp-livesearch__title {
	font-size: 13px; font-weight: 600; line-height: 1.3;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fgtp-livesearch__empty {
	margin: 0; padding: 14px 12px;
	font-size: 13px; color: var(--fgtp-muted); text-align: center;
}

/* ==========================================================================
   HAMBURGER (mobile only)
   ========================================================================== */
.fgtp-hamburger {
	display: none;
	width: 38px; height: 38px;
	border: 1px solid var(--fgtp-line); border-radius: 8px;
	background: var(--fgtp-surface); color: var(--fgtp-text);
	align-items: center; justify-content: center;
}
.fgtp-hamburger__bars,
.fgtp-hamburger__bars::before,
.fgtp-hamburger__bars::after {
	content: ""; display: block;
	width: 16px; height: 2px; border-radius: 2px;
	background: currentColor; position: relative;
}
.fgtp-hamburger__bars::before { position: absolute; top: -5px; }
.fgtp-hamburger__bars::after  { position: absolute; top: 5px; }

/* ==========================================================================
   CONTENT AREA
   ========================================================================== */
.fgtp-content {
	flex: 1 0 auto;
	/* Fill the full width beside the rail (PlayHop/CrazyGames are edge-to-edge);
	   a high cap only prevents absurd stretching on ultra-wide monitors. */
	padding: 18px 24px 48px;
	max-width: 2200px;
	width: 100%;
}

.fgtp-section__head { margin: 4px 0 14px; }
.fgtp-section__title { margin: 0; font-size: clamp(18px, 2.5vw, 24px); font-weight: 800; }

.fgtp-empty { color: var(--fgtp-muted); padding: 40px 0; }

/* ==========================================================================
   GAME GRID (PlayHop: landscape ~16:10 cards, dense, title overlaid)
   ========================================================================== */
.fgtp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--fgtp-gap);
}

/* ==========================================================================
   GAME CARD (PlayHop-style: landscape thumb, overlaid title, info badges)
   ========================================================================== */
.fgtp-card { position: relative; }
.fgtp-card__link {
	display: block;
	position: relative;
	border-radius: var(--fgtp-radius);
	overflow: hidden;
}
.fgtp-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 3px solid transparent;
	pointer-events: none;
	z-index: var(--z-card);
	transition: border-color 150ms ease;
}

.fgtp-card__thumb {
	display: block; position: relative;
	aspect-ratio: 16 / 10;
	background: var(--fgtp-surface);
	overflow: hidden;
}
.fgtp-card__img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.fgtp-card__img--empty {
	display: block; width: 100%; height: 100%;
	background: linear-gradient(135deg, var(--fgtp-surface), var(--fgtp-surface-2));
}

/* Hover: orange stroke outline (CrazyGames / PlayHop-style). */
@media (hover: hover) and (pointer: fine) {
	.fgtp-card__link:hover::after {
		border-color: var(--fgtp-accent);
	}
}

/* Title overlay on thumbnail bottom — always visible on touch (mobile-first),
   hidden-until-hover only on pointer devices (CrazyGames/PlayHop desktop look). */
.fgtp-card__title {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	padding: 22px 10px 8px;
	background: linear-gradient(to top, rgba(0,0,0,.82) 0%, transparent 100%);
	font-size: 13px; font-weight: 700;
	color: #fff;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	opacity: 1;
	transition: opacity 150ms ease;
}
@media (hover: hover) and (pointer: fine) {
	.fgtp-card__title { opacity: 0; }
	.fgtp-card__link:hover .fgtp-card__title { opacity: 1; }
}
.fgtp-card__link:focus-visible .fgtp-card__title { opacity: 1; }

/* Category tag hidden on cards (too noisy, PlayHop doesn't show it) */
.fgtp-card__tag { display: none; }

/* Play-count badge (bottom-left corner of thumb, PlayHop-style) */
.fgtp-card__plays {
	position: absolute; bottom: 24px; left: 6px;
	display: inline-flex; align-items: center; gap: 3px;
	padding: 2px 6px; border-radius: 6px;
	background: rgba(0,0,0,.65);
	font-size: 10px; font-weight: 700; color: #ccc;
}

/* Favorite heart — reachable on touch (always visible); hover-revealed on
   pointer devices so it stays out of the way on desktop. */
.fgtp-fav {
	position: absolute; top: 6px; right: 6px;
	width: 28px; height: 28px;
	display: grid; place-items: center;
	border: 0; border-radius: 50%;
	background: rgba(0,0,0,.5);
	color: #fff;
	opacity: 1;
	transition: opacity .12s ease, color .12s ease;
}
@media (hover: hover) and (pointer: fine) {
	.fgtp-fav { opacity: 0; }
	.fgtp-card:hover .fgtp-fav,
	.fgtp-fav:focus-visible { opacity: 1; }
}
.fgtp-fav:focus-visible { opacity: 1; }
.fgtp-fav[aria-pressed="true"] { opacity: 1; color: var(--fgtp-danger); }
.fgtp-fav[aria-pressed="true"] svg { fill: var(--fgtp-danger); stroke: var(--fgtp-danger); }

/* ==========================================================================
   SQUARE CARD — "Continue playing" row (CrazyGames-style)
   ========================================================================== */
.fgtp-sq {
	display: block;
	width: 100%; aspect-ratio: 1 / 1;
	border-radius: 16px;
	overflow: hidden;
	transition: transform 200ms var(--fgtp-ease-out), box-shadow 200ms var(--fgtp-ease-out);
}
.fgtp-sq__img {
	display: block; width: 100%; height: 100%;
	object-fit: cover;
}
.fgtp-sq__img--empty {
	background: linear-gradient(135deg, var(--fgtp-surface), var(--fgtp-surface-2));
}
@media (hover: hover) and (pointer: fine) {
	.fgtp-sq:hover {
		transform: translateY(-4px);
		box-shadow: 0 10px 24px rgba(0,0,0,.4);
	}
}
.fgtp-sq:active { transform: scale(0.97); }

.fgtp-row--continue .fgtp-row__track {
	grid-auto-columns: 100px;
	gap: 10px;
}
@media (min-width: 901px) {
	.fgtp-row--continue .fgtp-row__track { grid-auto-columns: 120px; }
}

/* ==========================================================================
   PICK A VIBE (homepage empty-state mood tiles — shown when no recents)
   ========================================================================== */
.fgtp-vibes { margin-bottom: 24px; }
.fgtp-vibes__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
}
.fgtp-vibe {
	--accent: #9b8cff;
	position: relative;
	overflow: hidden;
	display: block;
	aspect-ratio: 2 / 1;
	padding: 12px 14px;
	border-radius: 16px;
	text-decoration: none;
	/* Dark tile, accent washing in from the LEFT and fading to near-black on the
	   right where the icon sits (CrazyGames-style). */
	background-color: var(--fgtp-deep);
	background-image: linear-gradient(95deg, color-mix(in srgb, var(--accent) 42%, var(--fgtp-deep)) 0%, var(--fgtp-deep-3) 62%);
}
/* Accent stroke on hover — same treatment as the game cards, no movement. */
.fgtp-vibe::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 2px solid transparent;
	pointer-events: none;
	transition: border-color 150ms ease;
}
.fgtp-vibe__icon {
	position: absolute;
	top: 4px;
	right: 6px;
	display: grid;
	place-items: center;
	width: clamp(58px, 6.2vw, 76px);
	height: clamp(58px, 6.2vw, 76px);
	line-height: 1;
	transition: transform 240ms var(--fgtp-ease-out);
	will-change: transform;
}
.fgtp-vibe__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .28));
}
.fgtp-vibe__label {
	position: absolute;
	left: 14px;
	bottom: 12px;
	max-width: calc(100% - 28px);
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .2px;
	color: var(--accent);
	text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
@media (hover: hover) and (pointer: fine) {
	.fgtp-vibe:hover::after { border-color: var(--accent); }
	.fgtp-vibe:hover .fgtp-vibe__icon { transform: scale(1.28) rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) {
	.fgtp-vibe__icon { transition: none; }
	.fgtp-vibe:hover .fgtp-vibe__icon { transform: scale(1.12); }
}

/* ==========================================================================
   ROWS / SHELVES (CrazyGames-style: hidden scrollbar, arrow buttons on hover)
   ========================================================================== */
.fgtp-row { margin-bottom: 24px; }
.fgtp-row__head {
	display: flex; align-items: baseline;
	justify-content: flex-start; gap: 12px;
	margin-bottom: 10px;
}
.fgtp-row__title { margin: 0; font-size: 16px; font-weight: 800; }
.fgtp-row__more {
	color: var(--fgtp-accent); font-size: 13px; font-weight: 700;
	transition: color 140ms ease, transform 140ms var(--fgtp-ease-out);
}
.fgtp-row__more:hover { color: var(--fgtp-accent-2); }
@media (hover: hover) and (pointer: fine) {
	.fgtp-row__more:hover { transform: translateX(2px); }
}

.fgtp-row__wrap { position: relative; }

.fgtp-row__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 268px;
	gap: var(--fgtp-gap);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	/* Hide scrollbar everywhere */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.fgtp-row__track::-webkit-scrollbar { display: none; }
.fgtp-row__track > .fgtp-card { scroll-snap-align: start; }

/* Drag cursor */
.fgtp-row__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.fgtp-row__track.is-dragging .fgtp-card__link { pointer-events: none; }

/* Arrow buttons (hidden by default, shown on row hover) */
.fgtp-row__arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	z-index: var(--z-row-arrow);
	width: 36px; height: 64px;
	display: grid; place-items: center;
	border: 0; border-radius: 8px;
	background: rgba(20,20,30,.92);
	color: #fff;
	opacity: 0;
	transition: opacity .15s ease;
	cursor: pointer;
}
.fgtp-row__arrow--left { left: 0; }
.fgtp-row__arrow--right { right: 0; }

@media (hover: hover) and (pointer: fine) {
	.fgtp-row__wrap:hover .fgtp-row__arrow:not([hidden]) { opacity: 1; }
	.fgtp-row__arrow:hover { background: rgba(40,42,53,.95); }
}
@media (pointer: coarse) {
	.fgtp-row__arrow { display: none; }
}

/* ==========================================================================
   SECTION HEADING
   ========================================================================== */
.fgtp-section-heading {
	font-size: 16px; font-weight: 800;
	margin: 0 0 12px;
}

/* ==========================================================================
   BROWSE CATEGORIES STRIP (CrazyGames-style: intro card + 2-row tile grid)
   ========================================================================== */
.fgtp-browse {
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-auto-flow: column;
	grid-auto-columns: 200px;
	gap: var(--fgtp-gap);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.fgtp-browse::-webkit-scrollbar { display: none; }

/* Desktop: the tiles wrapper dissolves so tiles are direct grid items (the
   layout is identical to before the wrapper existed). Mobile re-enables it. */
.fgtp-browse__tiles { display: contents; }

.fgtp-browse__intro {
	grid-row: 1 / 3;
	grid-column: span 2;
	display: flex; flex-direction: column; justify-content: center;
	padding: 24px;
	background: var(--fgtp-surface);
	border-radius: var(--fgtp-radius);
	scroll-snap-align: start;
}
.fgtp-browse__heading {
	font-size: 16px; font-weight: 800;
	margin: 0 0 10px; line-height: 1.3;
}
.fgtp-browse__text {
	font-size: 12px; color: var(--fgtp-muted);
	margin: 0 0 14px; line-height: 1.5;
}
.fgtp-browse__link {
	font-size: 13px; font-weight: 700;
	color: var(--fgtp-accent);
	transition: color 140ms ease;
}
.fgtp-browse__link:hover { color: var(--fgtp-accent-2); }

.fgtp-browse__tile {
	display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 8px;
	padding: 14px 8px;
	background: var(--fgtp-surface);
	border-radius: var(--fgtp-radius);
	scroll-snap-align: start;
	transition: background 140ms ease, transform 240ms var(--fgtp-ease-out);
}
.fgtp-browse__tile:hover { background: var(--fgtp-surface-2); }
@media (hover: hover) and (pointer: fine) {
	.fgtp-browse__tile:hover { transform: translateY(-3px); }
}
.fgtp-browse__tile:active { transform: scale(0.97); }

.fgtp-browse__icon { color: var(--fgtp-accent); }
.fgtp-browse__icon .fgtp-icon { width: 28px; height: 28px; }
.fgtp-browse__name {
	font-size: 12px; font-weight: 600;
	text-align: center; line-height: 1.2;
}

.fgtp-browse.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.fgtp-browse.is-dragging .fgtp-browse__tile,
.fgtp-browse.is-dragging .fgtp-browse__intro a { pointer-events: none; }

@media (max-width: 560px) {
	.fgtp-browse { grid-auto-columns: 160px; }
	.fgtp-browse__intro { padding: 16px; }
	.fgtp-browse__heading { font-size: 14px; }
}

/* ==========================================================================
   MOSAIC ROW (CrazyGames "Top picks": horizontal 2-row scroll,
   large hero spans 2 rows, small cards fill the 2×2 slots)
   ========================================================================== */
.fgtp-mosaic {
	--_mosaic-col: 200px;
	--_mosaic-row: calc(var(--_mosaic-col) * 10 / 16);
	display: grid;
	grid-template-rows: var(--_mosaic-row) var(--_mosaic-row);
	grid-auto-flow: column;
	grid-auto-columns: var(--_mosaic-col);
	gap: var(--fgtp-gap);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.fgtp-mosaic::-webkit-scrollbar { display: none; }

.fgtp-mosaic > .fgtp-card { scroll-snap-align: start; }

.fgtp-mosaic__hero {
	grid-row: 1 / 3;
	grid-column: span 2;
	scroll-snap-align: start;
}
.fgtp-mosaic__hero .fgtp-card,
.fgtp-mosaic__hero .fgtp-card__link { height: 100%; }
.fgtp-mosaic__hero .fgtp-card__thumb { aspect-ratio: auto; height: 100%; }
.fgtp-mosaic__hero .fgtp-card__title { font-size: 16px; font-weight: 800; }

.fgtp-mosaic.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.fgtp-mosaic.is-dragging .fgtp-card__link { pointer-events: none; }

@media (max-width: 560px) {
	.fgtp-mosaic { --_mosaic-col: 150px; }
}
@media (min-width: 561px) and (max-width: 900px) {
	.fgtp-mosaic { --_mosaic-col: 180px; }
}
@media (min-width: 1400px) {
	.fgtp-mosaic { --_mosaic-col: 230px; }
}

/* ==========================================================================
   SINGLE GAME PAGE (CrazyGames-style: 2 columns + player + cards)
   ========================================================================== */
.fgtp-game-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(260px, 22vw, 320px);
	grid-template-areas:
		"player next"
		"main   next"
		".      next";
	/* 3rd row is an empty 1fr spacer: when the Play next rail is taller than
	   player + main (e.g. when it collapses to a single column), the excess
	   height is absorbed here so the game-detail card stays directly under the
	   player instead of being pushed down by a gap. */
	grid-template-rows: max-content max-content 1fr;
	column-gap: 20px;
	row-gap: 0;
	align-items: start;
}
.fgtp-game-layout > .fgtp-player { grid-area: player; }
.fgtp-game-banner { grid-area: banner; }
.fgtp-game-main { grid-area: main; min-width: 0; }
.fgtp-playnext { grid-area: next; }

/* --- Player --- */
.fgtp-player {
	position: relative;
	background: var(--fgtp-deep-2);
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 14px;
}
.fgtp-player__stage {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
}
.fgtp-player__frame { position: absolute; inset: 0; }
.fgtp-player__frame iframe,
.fgtp-player__frame embed,
.fgtp-player__frame object {
	width: 100% !important;
	height: 100% !important;
	border: 0;
	display: block;
}

/* Poster / launch screen */
.fgtp-player__poster {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	overflow: hidden;
	transition: opacity 200ms var(--fgtp-ease-out);
}
.fgtp-player__poster.is-hidden { opacity: 0; pointer-events: none; }
.fgtp-player__bg {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	filter: blur(14px) brightness(.45);
	transform: scale(1.1);
}
.fgtp-player__launch {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; align-items: center; gap: 14px;
	text-align: center; padding: 20px;
}
.fgtp-player__icon {
	width: 96px; height: 96px;
	border-radius: 20px; object-fit: cover;
	box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.fgtp-player__name { font-size: 20px; font-weight: 800; color: #fff; }
.fgtp-player__play {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 30px;
	border: 0; border-radius: 999px;
	background: var(--fgtp-green); color: #fff;
	font-size: 16px; font-weight: 800;
	transition: transform 160ms var(--fgtp-ease-out), background 160ms ease;
}
.fgtp-player__play:hover { background: var(--fgtp-green-2); transform: scale(1.04); }
.fgtp-player__play:active { transform: scale(0.97); }
.fgtp-player__missing { color: var(--fgtp-muted); font-weight: 600; }

/* Toolbar */
.fgtp-player__bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px;
	padding: 8px 12px;
	background: var(--fgtp-deep);
}
.fgtp-player__bar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fgtp-player__bar-icon { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; }
.fgtp-player__bar-title { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fgtp-player__bar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

/* Icon-only tools are circular pills; the like button (with count) is a wider pill. */
.fgtp-tool {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	width: 38px; height: 38px; padding: 0;
	border: 0; border-radius: 999px;
	background: var(--fgtp-surface); color: var(--fgtp-muted);
	font-size: 13px; font-weight: 700;
	transition: background 140ms ease, color 140ms ease, transform 140ms var(--fgtp-ease-out);
}
.fgtp-tool[data-fgtp-like] { width: auto; padding: 0 14px; }
.fgtp-tool:hover { background: var(--fgtp-surface-2); color: var(--fgtp-text); }
.fgtp-tool:active { transform: scale(0.92); }
.fgtp-tool[aria-pressed="true"] { color: var(--fgtp-accent-2); }
.fgtp-tool[data-fgtp-fav][aria-pressed="true"] { color: var(--fgtp-danger); }
.fgtp-tool[data-fgtp-fav][aria-pressed="true"] svg { fill: var(--fgtp-danger); }

/* Player popover cards (Controls / Play-on-phone) — anchored to the toolbar */
.fgtp-sheet {
	position: absolute;
	right: 12px;
	bottom: 58px;
	z-index: var(--z-row-arrow);
	width: min(320px, calc(100% - 24px));
	padding: 18px 20px 20px;
	border-radius: 14px;
	background: rgba(20, 20, 28, .92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
	color: var(--fgtp-text);
	transform-origin: bottom right;
	transition: opacity 180ms var(--fgtp-ease-out), transform 180ms var(--fgtp-ease-out);
}
.fgtp-sheet[hidden] { display: none; }
/* Closed state (set before [hidden] is removed, then cleared on the next frame) */
.fgtp-sheet.is-closed {
	opacity: 0;
	transform: scale(.95) translateY(6px);
	pointer-events: none;
}
.fgtp-sheet__close {
	position: absolute; top: 10px; right: 10px;
	width: 30px; height: 30px;
	display: grid; place-items: center;
	border: 0; border-radius: 8px;
	background: transparent; color: var(--fgtp-muted);
	transition: background 140ms ease, color 140ms ease, transform 140ms var(--fgtp-ease-out);
}
.fgtp-sheet__close:hover { background: var(--fgtp-surface-2); color: var(--fgtp-text); }
.fgtp-sheet__close:active { transform: scale(.92); }
.fgtp-sheet__title { margin: 0 0 8px; font-size: 18px; font-weight: 800; }
.fgtp-sheet__body, .fgtp-sheet__text { font-size: 14px; line-height: 1.55; color: var(--fgtp-muted); }
.fgtp-sheet__body p { margin: 0 0 8px; }
.fgtp-sheet__list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.fgtp-sheet__list strong, .fgtp-sheet__body strong { color: var(--fgtp-text); }
.fgtp-sheet--qr { text-align: center; }
.fgtp-sheet__qr {
	width: 168px; height: 168px;
	margin: 6px auto 14px;
	border-radius: 12px;
	background: #fff;
	display: grid; place-items: center;
	overflow: hidden;
}
.fgtp-sheet__qr img { width: 152px; height: 152px; display: block; }
.fgtp-sheet--qr .fgtp-sheet__text strong { color: var(--fgtp-text); }
@media (max-width: 560px) {
	.fgtp-sheet { left: 12px; right: 12px; width: auto; transform-origin: bottom center; }
}

/* Fullscreen: stage fills screen */
.fgtp-player__stage:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; }
.fgtp-player__stage:fullscreen .fgtp-player__frame { position: absolute; inset: 0; }

/* --- Breadcrumb --- */
.fgtp-breadcrumb { font-size: 13px; color: var(--fgtp-muted); margin: 6px 0 8px; }
.fgtp-breadcrumb a { color: var(--fgtp-accent-2); }
.fgtp-breadcrumb a:hover { text-decoration: underline; }
.fgtp-breadcrumb__sep { margin: 0 6px; color: var(--fgtp-muted); }
.fgtp-breadcrumb__current { color: var(--fgtp-text); }

/* --- Title + share --- */
.fgtp-game-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.fgtp-game-title { margin: 0; font-size: clamp(20px, 3vw, 28px); font-weight: 800; }
.fgtp-share {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 9px 16px; border-radius: 999px;
	border: 1px solid var(--fgtp-line);
	background: var(--fgtp-surface); color: var(--fgtp-text);
	font-size: 13px; font-weight: 700;
	transition: background 140ms ease, transform 140ms var(--fgtp-ease-out);
}
.fgtp-share:hover { background: var(--fgtp-surface-2); }
.fgtp-share:active { transform: scale(0.97); }

/* --- Cards (info + description) --- */
.fgtp-card-panel {
	background: var(--fgtp-surface);
	border-radius: 14px;
	padding: 20px;
	margin-bottom: 16px;
}
.fgtp-muted { color: var(--fgtp-muted); }

.fgtp-gameinfo__grid {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 8px 16px;
	margin: 0 0 16px;
	font-size: 14px;
}
.fgtp-gameinfo__grid dt { color: var(--fgtp-muted); }
.fgtp-gameinfo__grid dd { margin: 0; color: var(--fgtp-text); }

/* Tags */
.fgtp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.fgtp-tag {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px; border-radius: 8px;
	background: var(--fgtp-surface-2);
	font-size: 13px; font-weight: 600; color: var(--fgtp-text);
	transition: background 140ms ease;
}
.fgtp-tag:hover { background: var(--fgtp-surface-3); }
.fgtp-tag__count { color: var(--fgtp-accent-2); font-weight: 700; font-size: 12px; }

/* Description */
.fgtp-gamedesc { color: var(--fgtp-text); font-size: 15px; line-height: 1.7; }
.fgtp-gamedesc__heading { font-size: 17px; font-weight: 800; color: var(--fgtp-text); margin: 20px 0 8px; }
.fgtp-gamedesc__text p { margin: 0 0 12px; }
.fgtp-gamedesc__text ul { margin: 0 0 12px; padding-left: 20px; }
.fgtp-gamedesc__text li { margin-bottom: 5px; }

/* --- Play next rail --- */
.fgtp-playnext { position: sticky; top: calc(var(--fgtp-topbar-h) + 16px); }
.fgtp-playnext__title { margin: 0 0 12px; font-size: 16px; font-weight: 800; }
.fgtp-playnext__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.fgtp-playnext__card {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--fgtp-surface);
	transition: transform 200ms var(--fgtp-ease-out);
}
.fgtp-playnext__card img { width: 100%; height: 100%; object-fit: cover; }
.fgtp-playnext__name {
	position: absolute; bottom: 0; left: 0; right: 0;
	padding: 16px 8px 6px;
	background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
	font-size: 11px; font-weight: 700; color: #fff;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
	.fgtp-playnext__card:hover { transform: translateY(-3px); }
}
.fgtp-playnext__card:active { transform: scale(0.98); }

/* --- Ad slots (game page) ---------------------------------------------------
   The wrapper is always in the markup but `hidden` (no layout gap) until ads
   are live or preview mode is on. The dashed look lives on the placeholder, so
   real ad code drops in clean. */
.fgtp-ad { display: block; }
.fgtp-ad[hidden] { display: none; }
.fgtp-ad__ph {
	display: grid; place-items: center; gap: 4px;
	width: 100%;
	border: 1px dashed var(--fgtp-line);
	border-radius: 12px;
	background: var(--fgtp-surface);
}
.fgtp-ad__label {
	font-size: 9px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .1em; color: var(--fgtp-muted); opacity: .7;
}
.fgtp-ad__size { font-size: 13px; font-weight: 800; color: var(--fgtp-muted); }

/* Game-info card = two columns split by a full-height divider:
   LEFT  (main)  → banner, then the game info flowing beneath where it stops;
   RIGHT (aside) → square ad spanning the full card height.
   The `:has` rules collapse the aside (and its divider/padding) to nothing
   when the square is hidden, so the card matches the original exactly. */
.fgtp-gameinfo { display: flex; align-items: stretch; }
.fgtp-gameinfo__main { flex: 1 1 auto; min-width: 0; }
.fgtp-gameinfo__main > .fgtp-gameinfo__grid:last-child,
.fgtp-gameinfo__main > .fgtp-tags:last-child { margin-bottom: 0; }
.fgtp-gameinfo__aside { flex: 0 0 0; display: flex; }
.fgtp-gameinfo:has(.fgtp-gameinfo__aside > .fgtp-ad:not([hidden])) .fgtp-gameinfo__main { padding-right: 20px; }
.fgtp-gameinfo:has(.fgtp-gameinfo__aside > .fgtp-ad:not([hidden])) .fgtp-gameinfo__aside {
	flex: 0 0 320px;
	padding-left: 20px;
	border-left: 1px solid var(--fgtp-line);
}
.fgtp-gameinfo__aside .fgtp-ad { width: 100%; }

/* Banner ad: lives inside the info card at wide widths; a standalone copy
   in .fgtp-game-banner swaps in at ≤1200px so it sits below the player. */
.fgtp-game-banner { display: none; min-width: 0; }
.fgtp-ad--leaderboard { margin: 0 0 16px; }
.fgtp-ad--leaderboard .fgtp-ad__ph { min-height: 90px; }
@media (max-width: 1200px) {
	.fgtp-game-banner { display: block; }
	.fgtp-game-banner .fgtp-ad--leaderboard { margin: 0; }
	.fgtp-gameinfo .fgtp-ad--leaderboard { display: none; }
}

/* Square at the top of the Play next rail */
.fgtp-ad--rail { margin: 0 0 16px; }
.fgtp-ad--rail .fgtp-ad__ph { height: 250px; max-width: 300px; margin: 0 auto; }

/* Square in the info card: fills the full column height; the ad itself stays
   centered at its 300×250 max so it reads as a square within the tall slot. */
.fgtp-ad--rail-2 .fgtp-ad__ph {
	height: 100%; min-height: 250px;
	max-width: 300px; margin: 0 auto;
}

/* Square ad between the info + description cards: phone-only (≤1024px).
   Hidden on desktop, where the square instead lives inside the info card. */
.fgtp-game-square { display: none; margin: 0 0 16px; }

/* Game page desktop fluid ------------------------------------------------
   >1340 → default 2-col grid, Play Next 2 columns
   1201–1340 → 2-col grid, Play Next drops to 1 column
   1025–1200 → single column: player full-width, banner ad, compact Play Next
               grid (3 rows), then info card (details | square ad)             */
@media (min-width: 1201px) and (max-width: 1340px) {
	.fgtp-playnext__grid { grid-template-columns: 1fr; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
	.fgtp-game-layout {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}
	.fgtp-game-layout > .fgtp-player { order: 1; }
	.fgtp-game-banner { order: 2; }
	.fgtp-playnext { order: 3; position: static; }
	.fgtp-game-main { order: 4; }
	.fgtp-playnext > .fgtp-ad--rail { display: none; }
	.fgtp-playnext__grid {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		grid-template-rows: repeat(3, auto);
		grid-auto-rows: 0;
		overflow: hidden;
	}
	.fgtp-game-head { flex-wrap: wrap; }
}

/* Game page responsive (CrazyGames mobile order): player → banner → related
   games → info/description. Flex column, order overrides DOM sequence. */
@media (max-width: 1024px) {
	.fgtp-game-layout {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}
	.fgtp-game-layout > .fgtp-player { order: 1; }
	.fgtp-game-banner { order: 2; }
	.fgtp-playnext { order: 3; position: static; }
	.fgtp-game-main { order: 4; }
	.fgtp-playnext__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	.fgtp-gameinfo__grid { grid-template-columns: auto 1fr; }

	/* Phone ad cleanup → banner + one square only:
	   drop the square inside the info card and the one atop Play next, and
	   show the standalone square between the info and description cards. */
	.fgtp-gameinfo__aside { display: none; }
	.fgtp-gameinfo:has(.fgtp-gameinfo__aside > .fgtp-ad:not([hidden])) .fgtp-gameinfo__main { padding-right: 0; }
	.fgtp-playnext > .fgtp-ad--rail { display: none; }
	.fgtp-game-square:has(> .fgtp-ad:not([hidden])) { display: block; }
}
@media (max-width: 400px) {
	.fgtp-gameinfo__grid { grid-template-columns: 1fr; }
	.fgtp-gameinfo__grid dt { color: var(--fgtp-accent-2); font-weight: 600; }
}

/* ==========================================================================
   FOOTER (PlayHop-style: action pills, link columns, social, copyright)
   ========================================================================== */
.fgtp-footer {
	margin-top: auto;
	padding: 24px 16px 16px;
	border-top: 1px solid var(--fgtp-line);
	color: var(--fgtp-muted);
	font-size: 13px;
}

/* Action pills */
.fgtp-footer__actions {
	display: flex; justify-content: center; gap: 10px;
	margin-bottom: 28px;
}
.fgtp-footer__btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 10px 20px;
	border: 1px solid var(--fgtp-line); border-radius: 999px;
	background: var(--fgtp-surface); color: var(--fgtp-text);
	font-size: 13px; font-weight: 600;
}
.fgtp-footer__btn:hover { background: var(--fgtp-surface-2); }

/* Link columns */
.fgtp-footer__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 24px;
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--fgtp-line);
}
.fgtp-footer__heading {
	margin: 0 0 10px;
	font-size: 14px; font-weight: 700;
	color: var(--fgtp-text);
}
.fgtp-footer__links {
	list-style: none; margin: 0; padding: 0;
}
.fgtp-footer__links li { margin-bottom: 6px; }
.fgtp-footer__links a { color: var(--fgtp-muted); }
.fgtp-footer__links a:hover { color: var(--fgtp-text); }

/* Social icons */
.fgtp-social { display: flex; gap: 10px; }
.fgtp-social__link {
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border-radius: 10px;
	background: var(--fgtp-surface);
	color: var(--fgtp-muted);
	transition: background .12s ease, color .12s ease;
}
.fgtp-social__link:hover { background: var(--fgtp-surface-2); color: var(--fgtp-text); }

/* Copyright */
.fgtp-footer__bottom { text-align: center; }
.fgtp-footer__copy { margin: 0; }

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.pagination,
.nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 32px;
	padding-bottom: 8px;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--fgtp-surface);
	color: var(--fgtp-muted);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: transform 180ms var(--fgtp-ease-out), background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

a.page-numbers:active { transform: scale(0.95); }

@media (hover: hover) and (pointer: fine) {
	a.page-numbers:hover {
		background: var(--fgtp-surface-2);
		color: #fff;
		transform: translateY(-2px);
	}
}

.page-numbers.current {
	background: var(--fgtp-accent);
	color: #fff;
	font-weight: 800;
	box-shadow: 0 0 0 2px rgba(249,115,22,.35);
}

.page-numbers.dots {
	background: transparent;
	color: var(--fgtp-muted);
	min-width: 28px;
	padding: 0;
	letter-spacing: 2px;
	pointer-events: none;
}

.prev.page-numbers,
.next.page-numbers {
	padding: 0 20px;
	gap: 6px;
	font-weight: 700;
	color: var(--fgtp-text);
}

/* ==========================================================================
   SCRIM (mobile drawer backdrop)
   ========================================================================== */
.fgtp-scrim {
	position: fixed; inset: 0;
	background: rgba(0,0,0,.6);
	border: 0; z-index: var(--z-scrim);
}

/* ==========================================================================
   STATIC / INFO PAGES
   ========================================================================== */
.fgtp-page { max-width: 760px; }
.fgtp-page__title { font-size: 24px; font-weight: 800; margin: 0 0 18px; }
.fgtp-page__content { color: var(--fgtp-muted); line-height: 1.7; }
.fgtp-page__content a { color: var(--fgtp-accent-2); }
.fgtp-page__content a:hover { text-decoration: underline; }

/* ============================================================
   Info pages — About / Contact / FAQ / Legal
   ============================================================ */
.fgtp-info-page {
	width: min(1080px, 100%);
	margin: 0 auto;
	padding-bottom: 28px;
}

/* Entrance motion — staggered rise, gated for reduced motion */
@keyframes fgtp-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
.fgtp-rise {
	opacity: 0;
	animation: fgtp-rise 560ms var(--fgtp-ease-out) both;
}
.fgtp-stagger > * {
	opacity: 0;
	animation: fgtp-rise 560ms var(--fgtp-ease-out) both;
}
.fgtp-stagger > *:nth-child(1) { animation-delay: 40ms; }
.fgtp-stagger > *:nth-child(2) { animation-delay: 100ms; }
.fgtp-stagger > *:nth-child(3) { animation-delay: 160ms; }
.fgtp-stagger > *:nth-child(4) { animation-delay: 220ms; }
.fgtp-stagger > *:nth-child(5) { animation-delay: 280ms; }
.fgtp-stagger > *:nth-child(6) { animation-delay: 340ms; }
.fgtp-stagger > *:nth-child(7) { animation-delay: 400ms; }
.fgtp-stagger > *:nth-child(8) { animation-delay: 460ms; }
@media (prefers-reduced-motion: reduce) {
	.fgtp-rise,
	.fgtp-stagger > * { animation: none; opacity: 1; }
}

/* Hero — lives on the page background, not in a box */
.fgtp-info-hero {
	position: relative;
	padding: clamp(28px, 6vw, 60px) 4px clamp(20px, 3vw, 32px);
	margin-bottom: 12px;
}
.fgtp-info-hero::before {
	content: "";
	position: absolute;
	inset: -8% -25% auto -25%;
	height: 300px;
	background: radial-gradient(58% 100% at 28% 0%, rgba(249,115,22,.16), transparent 70%);
	pointer-events: none;
	z-index: -1;
}
.fgtp-info-hero__eyebrow,
.fgtp-info-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	color: var(--fgtp-accent-2);
	font-size: 13px;
	font-weight: 700;
}
.fgtp-info-hero__eyebrow::before,
.fgtp-info-eyebrow::before {
	content: "";
	width: 3px;
	height: 14px;
	border-radius: 2px;
	background: var(--fgtp-accent);
	flex-shrink: 0;
}
.fgtp-info-hero__title {
	max-width: 760px;
	margin: 0;
	font-size: clamp(32px, 5vw, 52px);
	line-height: 1.04;
	font-weight: 900;
	letter-spacing: -.02em;
}
.fgtp-info-hero__text {
	max-width: 640px;
	margin: 18px 0 0;
	color: var(--fgtp-muted);
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 1.65;
}
.fgtp-info-meta {
	margin: 18px 0 0;
	color: var(--fgtp-muted);
	font-size: 13px;
}

/* Section heading (used above grids) */
.fgtp-info-eyebrow { margin-bottom: 6px; }
.fgtp-info-section-title {
	margin: 0 0 20px;
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 850;
	letter-spacing: -.01em;
}
.fgtp-info-section { margin-bottom: 36px; }

/* Category pills (About) */
.fgtp-info-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
}
.fgtp-info-pill {
	padding: 8px 15px;
	border-radius: 999px;
	background: var(--fgtp-surface);
	border: 1px solid var(--fgtp-line);
	color: var(--fgtp-muted);
	font-size: 13px;
	font-weight: 600;
	transition: transform 200ms var(--fgtp-ease-out), color 180ms ease, border-color 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
	.fgtp-info-pill:hover {
		transform: translateY(-2px);
		color: var(--fgtp-text);
		border-color: rgba(249,115,22,.4);
	}
}

/* Stat row (About) */
.fgtp-info-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-bottom: 36px;
}
.fgtp-info-stat {
	padding: 22px 24px;
	border-radius: 16px;
	background: var(--fgtp-surface);
	border: 1px solid var(--fgtp-line);
}
.fgtp-info-stat strong {
	display: block;
	margin-bottom: 6px;
	color: var(--fgtp-text);
	font-size: 20px;
	font-weight: 850;
}
.fgtp-info-stat span {
	color: var(--fgtp-muted);
	font-size: 14px;
	line-height: 1.5;
}

/* Card grid */
.fgtp-info-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}
.fgtp-info-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 24px;
	border-radius: 16px;
	background: var(--fgtp-surface);
	border: 1px solid var(--fgtp-line);
	transition: transform 240ms var(--fgtp-ease-out), border-color 200ms ease, background 200ms ease;
}
.fgtp-info-card h2 {
	margin: 0 0 8px;
	color: var(--fgtp-text);
	font-size: 17px;
	font-weight: 800;
}
.fgtp-info-card p {
	margin: 0;
	color: var(--fgtp-muted);
	font-size: 14.5px;
	line-height: 1.62;
}
.fgtp-info-card__icon {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	margin-bottom: 16px;
	border-radius: 12px;
	background: rgba(249,115,22,.12);
	color: var(--fgtp-accent-2);
}
.fgtp-info-card__icon svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.fgtp-info-card__action {
	margin-top: auto;
	padding-top: 16px;
	color: var(--fgtp-accent-2);
	font-size: 14px;
	font-weight: 700;
}
.fgtp-info-card--link:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
	.fgtp-info-card:hover {
		transform: translateY(-4px);
		border-color: rgba(249,115,22,.35);
	}
	.fgtp-info-card--link:hover { background: var(--fgtp-surface-2); }
}

/* Highlight band (About niche) */
.fgtp-info-band {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: 28px;
	align-items: center;
	padding: clamp(24px, 4vw, 40px);
	border-radius: 18px;
	background:
		radial-gradient(120% 150% at 0% 0%, rgba(249,115,22,.14), transparent 55%),
		var(--fgtp-bg-2);
	border: 1px solid var(--fgtp-line);
}
.fgtp-info-band h2 {
	margin: 6px 0 0;
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 850;
	letter-spacing: -.01em;
}
.fgtp-info-band p {
	margin: 0;
	color: var(--fgtp-muted);
	line-height: 1.72;
}

/* Split panels (Contact) */
.fgtp-info-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.fgtp-info-panel {
	padding: 24px;
	border-radius: 16px;
	background: var(--fgtp-surface);
	border: 1px solid var(--fgtp-line);
}
.fgtp-info-panel h2 {
	margin: 0 0 16px;
	color: var(--fgtp-text);
	font-size: 17px;
	font-weight: 800;
}
.fgtp-info-panel p {
	margin: 0;
	color: var(--fgtp-muted);
	line-height: 1.7;
}
.fgtp-checklist {
	display: grid;
	gap: 13px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fgtp-checklist li {
	position: relative;
	padding-left: 30px;
	color: var(--fgtp-muted);
	line-height: 1.55;
}
.fgtp-checklist li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .12em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(57,181,74,.16);
	border: 1px solid rgba(57,181,74,.5);
}
.fgtp-checklist li::after {
	content: "";
	position: absolute;
	left: 8px;
	top: .34em;
	width: 4px;
	height: 8px;
	border-right: 2px solid var(--fgtp-green);
	border-bottom: 2px solid var(--fgtp-green);
	transform: rotate(45deg);
}

/* Legal layout (Privacy / Terms) */
.fgtp-legal-layout {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}
.fgtp-legal-summary {
	position: sticky;
	top: calc(var(--fgtp-topbar-h) + 18px);
	padding: 24px;
	border-radius: 16px;
	background:
		radial-gradient(130% 120% at 0% 0%, rgba(249,115,22,.12), transparent 60%),
		var(--fgtp-bg-2);
	border: 1px solid var(--fgtp-line);
}
.fgtp-legal-summary h2 {
	margin: 0 0 10px;
	color: var(--fgtp-text);
	font-size: 15px;
	font-weight: 800;
}
.fgtp-legal-summary p {
	margin: 0;
	color: var(--fgtp-muted);
	font-size: 14px;
	line-height: 1.65;
}
.fgtp-legal-card {
	padding: clamp(24px, 3vw, 38px);
	border-radius: 16px;
	background: var(--fgtp-surface);
	border: 1px solid var(--fgtp-line);
}
.fgtp-legal-card section + section {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--fgtp-line);
}
.fgtp-legal-card h2 {
	margin: 0 0 12px;
	color: var(--fgtp-text);
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -.01em;
}
.fgtp-legal-card p {
	margin: 0 0 12px;
	color: var(--fgtp-muted);
	line-height: 1.72;
}
.fgtp-legal-card p:last-child { margin-bottom: 0; }
.fgtp-legal-card ul {
	display: grid;
	gap: 10px;
	margin: 4px 0 0;
	padding-left: 20px;
}
.fgtp-legal-card li {
	color: var(--fgtp-muted);
	line-height: 1.6;
}

/* FAQ accordion */
:root { interpolate-size: allow-keywords; }
.fgtp-faq-list {
	display: grid;
	gap: 10px;
	margin-bottom: 32px;
}
.fgtp-faq-item {
	border-radius: 14px;
	background: var(--fgtp-surface);
	border: 1px solid var(--fgtp-line);
	overflow: hidden;
	transition: border-color 200ms ease, background 200ms ease;
}
.fgtp-faq-item[open] { border-color: rgba(249,115,22,.32); }
@media (hover: hover) and (pointer: fine) {
	.fgtp-faq-item:hover { background: var(--fgtp-surface-2); }
}
.fgtp-faq-item summary {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 60px;
	padding: 18px 58px 18px 22px;
	color: var(--fgtp-text);
	font-size: 16px;
	font-weight: 750;
	list-style: none;
	cursor: pointer;
	transition: transform 150ms var(--fgtp-ease-out);
}
.fgtp-faq-item summary::-webkit-details-marker { display: none; }
.fgtp-faq-item summary:active { transform: scale(.99); }
.fgtp-faq-item summary::after {
	content: "";
	position: absolute;
	right: 22px;
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--fgtp-muted);
	border-bottom: 2px solid var(--fgtp-muted);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 240ms var(--fgtp-ease-out), border-color 200ms ease;
}
.fgtp-faq-item[open] summary::after {
	transform: translateY(-30%) rotate(225deg);
	border-color: var(--fgtp-accent-2);
}
.fgtp-faq-item p {
	margin: 0;
	padding: 0 22px 20px;
	color: var(--fgtp-muted);
	line-height: 1.72;
}
/* Smooth open/close where supported; graceful instant toggle elsewhere */
.fgtp-faq-item::details-content {
	height: 0;
	overflow: hidden;
	opacity: 0;
	content-visibility: hidden;
	transition: height 300ms var(--fgtp-ease-out), opacity 260ms ease, content-visibility 300ms allow-discrete;
}
.fgtp-faq-item[open]::details-content {
	height: auto;
	opacity: 1;
	content-visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
	.fgtp-faq-item::details-content { transition: opacity 200ms ease; }
}

/* Inline help CTA (FAQ footer) */
.fgtp-info-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: clamp(24px, 3vw, 34px);
	border-radius: 18px;
	background:
		radial-gradient(120% 170% at 100% 0%, rgba(57,181,74,.15), transparent 55%),
		var(--fgtp-bg-2);
	border: 1px solid var(--fgtp-line);
}
.fgtp-info-cta h2 {
	margin: 0 0 4px;
	color: var(--fgtp-text);
	font-size: 20px;
	font-weight: 850;
}
.fgtp-info-cta p {
	margin: 0;
	color: var(--fgtp-muted);
}
.fgtp-info-cta__btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 999px;
	background: var(--fgtp-accent);
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	transition: transform 160ms var(--fgtp-ease-out), background 160ms ease;
}
.fgtp-info-cta__btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
	.fgtp-info-cta__btn:hover {
		transform: translateY(-2px);
		background: var(--fgtp-accent-2);
	}
}

/* Responsive */
@media (max-width: 900px) {
	.fgtp-info-grid,
	.fgtp-info-stats { grid-template-columns: 1fr; }
	.fgtp-info-band,
	.fgtp-info-split,
	.fgtp-legal-layout { grid-template-columns: 1fr; }
	.fgtp-legal-summary { position: static; }
}
@media (max-width: 560px) {
	.fgtp-info-cta { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   HELPER PAGES (All Games / Most Played / Most Popular)
   ========================================================================== */
.fgtp-helper-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding: 24px 0 8px;
	margin-bottom: 16px;
}
.fgtp-helper-head__icon {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(249,115,22,.12);
	color: var(--fgtp-accent-2);
	flex-shrink: 0;
}
.fgtp-helper-head__icon svg { width: 22px; height: 22px; }
.fgtp-helper-head__title {
	margin: 0;
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 850;
	letter-spacing: -.01em;
}
.fgtp-helper-head__count {
	color: var(--fgtp-muted);
	font-size: 13px;
	font-weight: 700;
}
.fgtp-helper-head__desc {
	width: 100%;
	margin: 0;
	color: var(--fgtp-muted);
	font-size: 14px;
	line-height: 1.5;
}

/* 404 */
.fgtp-404 { text-align: center; padding: 60px 0; }
.fgtp-404__title { font-size: 32px; font-weight: 800; margin: 0 0 10px; }
.fgtp-404__text { color: var(--fgtp-muted); margin: 0 0 20px; }

/* Archive description */
.fgtp-section__desc { color: var(--fgtp-muted); margin: 4px 0 0; font-size: 14px; }

/* All Tags index page (grouped A-Z, like CrazyGames) */
.fgtp-tagindex__group { margin-bottom: 8px; }
.fgtp-tagindex__letter {
	font-size: 28px; font-weight: 800;
	color: var(--fgtp-muted);
	margin: 18px 0 12px;
}
.fgtp-tagindex__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
	margin-bottom: 12px;
}
.fgtp-tagpill {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--fgtp-surface);
	font-size: 14px; font-weight: 600;
	transition: background .12s ease;
}
.fgtp-tagpill:hover { background: var(--fgtp-surface-2); }
.fgtp-tagpill__count { color: var(--fgtp-accent-2); font-weight: 700; font-size: 13px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
	.fgtp-shell { margin-left: 0; }
	.fgtp-hamburger { display: inline-flex; }
	.fgtp-sidebar {
		width: var(--fgtp-rail-open);
		transform: translateX(-100%);
		box-shadow: 6px 0 30px rgba(0,0,0,.5);
	}
	.fgtp-sidebar.is-open { transform: translateX(0); }
	/* Drawer is always "expanded" on mobile → reveal labels/footer/CTA */
	.fgtp-rail__label { opacity: 1; }
	.fgtp-rail__divider-text { opacity: 1; height: auto; }
	.fgtp-rail__badge { opacity: 1; }
	.fgtp-rail__ctabtn { background: var(--fgtp-accent); color: #fff; }
	.fgtp-rail__ctabtn .fgtp-rail__label { opacity: 1; }
	.fgtp-rail__footer { opacity: 1; max-height: none; }
}

@media (max-width: 560px) {
	.fgtp-brand__logo { height: 24px; }
	.fgtp-content { padding: 12px 10px 36px; }
	/* Tighten the topbar so brand + icons + Log in all fit on phones. */
	.fgtp-topbar { gap: 6px; padding: 0 8px; }
	.fgtp-actions { gap: 6px; }
	.fgtp-login-btn { padding: 0 13px; font-size: 13px; }
}

/* ==========================================================================
   TOPBAR ACTIONS (notifications, My games, Log in)
   ========================================================================== */
.fgtp-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.fgtp-iconbtn {
	position: relative;
	width: 38px; height: 38px;
	display: grid; place-items: center;
	border: 0; border-radius: 50%;
	background: var(--fgtp-surface); color: var(--fgtp-muted);
	transition: background 140ms ease, color 140ms ease, transform 140ms var(--fgtp-ease-out);
}
.fgtp-iconbtn:active { transform: scale(0.92); }
.fgtp-iconbtn[aria-expanded="true"] { background: var(--fgtp-surface-2); color: var(--fgtp-text); }
.fgtp-iconbtn__dot {
	position: absolute; top: -2px; right: -2px;
	min-width: 16px; height: 16px; padding: 0 4px;
	display: grid; place-items: center;
	border-radius: 999px; background: var(--fgtp-danger); color: #fff;
	font-size: 10px; font-weight: 800; line-height: 1;
}
.fgtp-login-btn {
	display: inline-flex; align-items: center;
	height: 38px; padding: 0 18px;
	border-radius: 999px;
	background: var(--fgtp-accent); color: #fff;
	font-weight: 800; font-size: 14px; white-space: nowrap;
	transition: background 140ms ease, transform 140ms var(--fgtp-ease-out);
}
.fgtp-login-btn:active { transform: scale(0.97); }
@media (hover:hover) and (pointer:fine) {
	.fgtp-iconbtn:hover { background: var(--fgtp-surface-2); color: var(--fgtp-text); }
	.fgtp-login-btn:hover { background: var(--fgtp-accent-2); }
}

/* ---- Popover panels (origin-aware scale-in from the trigger) ---- */
.fgtp-pop { position: relative; }
.fgtp-pop__panel {
	position: absolute; top: calc(100% + 10px); right: 0;
	z-index: var(--z-sidebar);
	width: 340px; max-width: calc(100vw - 24px);
	border-radius: 16px;
	background: var(--fgtp-bg-2);
	border: 1px solid var(--fgtp-line);
	box-shadow: 0 20px 50px rgba(0,0,0,.55);
	transform-origin: top right;
	transition: opacity 170ms var(--fgtp-ease-out), transform 170ms var(--fgtp-ease-out);
}
.fgtp-pop__panel[hidden] { display: none; }
.fgtp-pop__panel.is-closing { opacity: 0; transform: scale(0.96) translateY(-6px); pointer-events: none; }
.fgtp-pop__panel--notif { width: 300px; }

.fgtp-pop__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 16px; border-bottom: 1px solid var(--fgtp-line);
	font-size: 15px;
}
.fgtp-pop__head--center { justify-content: center; position: relative; }
.fgtp-pop__close {
	position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
	width: 30px; height: 30px; display: grid; place-items: center;
	border: 0; border-radius: 8px; background: transparent; color: var(--fgtp-muted);
	transition: background 140ms ease, color 140ms ease, transform 120ms var(--fgtp-ease-out);
}
.fgtp-pop__close:hover { background: var(--fgtp-surface-2); color: var(--fgtp-text); }
.fgtp-pop__close:active { transform: translateY(-50%) scale(0.9); }

.fgtp-notif { display: flex; gap: 10px; padding: 14px 16px; }
.fgtp-notif__icon { width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0; }
.fgtp-notif__title { margin: 0 0 2px; font-weight: 700; font-size: 13px; }
.fgtp-notif__text { margin: 0; font-size: 12px; color: var(--fgtp-muted); line-height: 1.45; }

/* ---- My games tabs + lists ---- */
.fgtp-tabs { display: flex; gap: 4px; padding: 6px 10px 0; border-bottom: 1px solid var(--fgtp-line); }
.fgtp-tab {
	position: relative; flex: 1; padding: 10px 4px;
	border: 0; background: transparent; color: var(--fgtp-muted);
	font-weight: 700; font-size: 13px;
	transition: color 140ms ease;
}
.fgtp-tab::after {
	content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
	height: 2px; border-radius: 2px; background: var(--fgtp-accent-2);
	transform: scaleX(0); transition: transform 180ms var(--fgtp-ease-out);
}
.fgtp-tab.is-active { color: var(--fgtp-text); }
.fgtp-tab.is-active::after { transform: scaleX(1); }
.fgtp-tab:hover { color: var(--fgtp-text); }

.fgtp-mygames__body { max-height: 360px; overflow-y: auto; padding: 8px; }
.fgtp-grow {
	display: flex; align-items: center; gap: 10px;
	padding: 6px; border-radius: 10px;
	transition: background 120ms ease, transform 120ms var(--fgtp-ease-out);
}
.fgtp-grow:hover { background: var(--fgtp-surface); }
.fgtp-grow:active { transform: scale(0.99); }
.fgtp-grow__thumb {
	width: 56px; height: 40px; border-radius: 8px; overflow: hidden;
	flex-shrink: 0; background: var(--fgtp-surface-2);
}
.fgtp-grow__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fgtp-grow__title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fgtp-mygames__empty { margin: 0; padding: 28px 16px; text-align: center; color: var(--fgtp-muted); font-size: 13px; }

/* ---- Guest/login wall (Favorites / Liked) ---- */
.fgtp-wall { padding: 24px 18px; text-align: center; }
.fgtp-wall__icon {
	display: inline-grid; place-items: center;
	width: 52px; height: 52px; margin-bottom: 12px;
	border-radius: 50%; color: var(--fgtp-danger); background: rgba(255,90,122,.12);
}
.fgtp-wall__icon svg { width: 24px; height: 24px; }
.fgtp-wall__icon--like { color: var(--fgtp-accent-2); background: rgba(249,115,22,.14); }
.fgtp-wall__title { margin: 0 0 16px; font-weight: 700; font-size: 15px; line-height: 1.4; }
.fgtp-wall__btn {
	display: block; padding: 11px; border-radius: 10px;
	background: var(--fgtp-accent); color: #fff; font-weight: 800;
	transition: background 140ms ease, transform 140ms var(--fgtp-ease-out);
}
.fgtp-wall__btn:hover { background: var(--fgtp-accent-2); }
.fgtp-wall__btn:active { transform: scale(0.98); }
.fgtp-wall__guest {
	display: block; width: 100%; margin-top: 10px; padding: 8px;
	border: 0; background: transparent; color: var(--fgtp-muted);
	font-weight: 700; font-size: 13px; transition: color 140ms ease;
}
.fgtp-wall__guest:hover { color: var(--fgtp-text); text-decoration: underline; }



/* Empty state (e.g. Recently played page with no history) */
.fgtp-empty { padding: 48px 16px; text-align: center; color: var(--fgtp-muted); font-size: 15px; }
.fgtp-empty a { color: var(--fgtp-accent-2); font-weight: 700; }
.fgtp-empty a:hover { text-decoration: underline; }

/* ==========================================================================
   BOTTOM BAR (Random game / Back to top)
   ========================================================================== */
.fgtp-bottombar { display: flex; justify-content: center; gap: 14px; padding: 44px 16px 60px; }
.fgtp-bottombtn {
	display: inline-flex; align-items: center; gap: 9px;
	height: 46px; padding: 0 22px;
	border-radius: 999px; border: 1px solid var(--fgtp-line);
	background: var(--fgtp-bg-2); color: var(--fgtp-text);
	font-weight: 800; font-size: 14px; cursor: pointer;
	transition: transform 200ms var(--fgtp-ease-out), background 160ms ease, border-color 160ms ease, box-shadow 220ms ease;
}
.fgtp-bottombtn__ico { display: inline-grid; place-items: center; transition: transform 240ms var(--fgtp-ease-out); }
.fgtp-bottombtn:active { transform: scale(0.97); }
.fgtp-bottombtn--primary { background: var(--fgtp-accent); border-color: transparent; color: #fff; }
@media (hover:hover) and (pointer:fine) {
	.fgtp-bottombtn:hover { transform: translateY(-3px); border-color: var(--fgtp-surface-3); box-shadow: 0 10px 26px rgba(0,0,0,.4); }
	.fgtp-bottombtn:hover .fgtp-bottombtn__ico { transform: rotate(-15deg) scale(1.12); }
	.fgtp-bottombtn--primary:hover { background: var(--fgtp-accent-2); box-shadow: 0 12px 32px rgba(249,115,22,.4); }
	.fgtp-bottombtn--primary:hover .fgtp-bottombtn__ico { transform: translateY(-2px) rotate(0); }
}

/* ==========================================================================
   LOGIN / ACCOUNT PAGE (PlayHop-style collage + card)
   ========================================================================== */
.fgtp-auth {
	position: relative;
	min-height: calc(100vh - var(--fgtp-topbar-h) - 32px);
	display: grid; place-items: center;
	padding: 48px 16px; overflow: hidden;
}
.fgtp-auth__collage {
	position: absolute; inset: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 12px; padding: 14px; opacity: .55; pointer-events: none;
}
.fgtp-auth__tile { aspect-ratio: 1; border-radius: 14px; overflow: hidden; }
.fgtp-auth__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fgtp-auth::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(ellipse at center, rgba(17,17,24,.62) 0%, rgba(17,17,24,.93) 72%);
}
.fgtp-auth__panel { position: relative; z-index: 2; width: 100%; max-width: 380px; }
.fgtp-authcard {
	background: rgba(20,20,28,.96);
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--fgtp-line); border-radius: 18px;
	padding: 28px 24px; box-shadow: 0 30px 70px rgba(0,0,0,.6); text-align: center;
}
.fgtp-auth__brand { display: block; width: 64px; height: 64px; margin: 0 auto 14px; }
.fgtp-pupil { transition: transform 80ms ease-out; }

.fgtp-authtabs { display: flex; gap: 6px; margin-bottom: 20px; border-bottom: 1px solid var(--fgtp-line); }
.fgtp-authtab {
	position: relative; flex: 1; padding: 10px;
	border: 0; background: transparent; color: var(--fgtp-muted);
	font-weight: 800; font-size: 14px; transition: color 140ms ease;
}
.fgtp-authtab::after {
	content: ""; position: absolute; left: 20%; right: 20%; bottom: -1px;
	height: 2px; background: var(--fgtp-accent-2);
	transform: scaleX(0); transition: transform 180ms var(--fgtp-ease-out);
}
.fgtp-authtab.is-active { color: var(--fgtp-text); }
.fgtp-authtab.is-active::after { transform: scaleX(1); }

.fgtp-authpanel { text-align: left; }
.fgtp-authpanel label { display: block; font-size: 12px; font-weight: 700; color: var(--fgtp-muted); margin-bottom: 6px; }
.fgtp-authpanel input[type="text"],
.fgtp-authpanel input[type="email"],
.fgtp-authpanel input[type="password"] {
	width: 100%; height: 44px; padding: 0 14px; margin-bottom: 12px;
	border-radius: 10px; border: 1px solid var(--fgtp-line);
	background: var(--fgtp-bg); color: var(--fgtp-text); font-size: 14px;
	transition: border-color 140ms ease, box-shadow 140ms ease;
}
.fgtp-authpanel input[type="text"]:focus,
.fgtp-authpanel input[type="email"]:focus,
.fgtp-authpanel input[type="password"]:focus {
	outline: none; border-color: var(--fgtp-accent); box-shadow: 0 0 0 3px rgba(249,115,22,.25);
}
.fgtp-authpanel .login-remember { display: flex; align-items: center; font-size: 13px; color: var(--fgtp-muted); margin: 2px 0 14px; }
.fgtp-authpanel .login-remember label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.fgtp-authpanel .login-remember input { width: auto; height: auto; margin: 0; }
.fgtp-authpanel .button,
.fgtp-authpanel input[type="submit"],
.fgtp-authbtn {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 46px; border: 0; border-radius: 999px;
	background: var(--fgtp-accent); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer;
	transition: background 150ms ease, transform 150ms var(--fgtp-ease-out);
}
.fgtp-authpanel input[type="submit"] { display: block; -webkit-appearance: none; appearance: none; }
.fgtp-authpanel .button:hover,
.fgtp-authpanel input[type="submit"]:hover,
.fgtp-authbtn:hover { background: var(--fgtp-accent-2); }
.fgtp-authpanel .button:active,
.fgtp-authpanel input[type="submit"]:active,
.fgtp-authbtn:active { transform: scale(0.98); }
.fgtp-authbtn--primary { background: var(--fgtp-accent); }
.fgtp-authbtn--primary:hover { background: var(--fgtp-accent-2); }

.fgtp-auth__forgot { display: block; margin-top: 12px; text-align: center; font-size: 13px; color: var(--fgtp-accent-2); }
.fgtp-auth__forgot:hover { text-decoration: underline; }
.fgtp-authdivider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--fgtp-muted); font-size: 12px; }
.fgtp-authdivider::before, .fgtp-authdivider::after { content: ""; flex: 1; height: 1px; background: var(--fgtp-line); }
.fgtp-authsocial { display: flex; justify-content: center; gap: 12px; }
.fgtp-authsocial__btn {
	width: 46px; height: 46px; display: grid; place-items: center;
	border-radius: 50%; border: 1px solid var(--fgtp-line);
	background: var(--fgtp-surface); color: var(--fgtp-text);
	transition: transform 140ms var(--fgtp-ease-out), background 140ms ease;
}
.fgtp-authsocial__btn:not([disabled]):hover { background: var(--fgtp-surface-2); transform: translateY(-2px); }
.fgtp-authsocial__btn[disabled] { opacity: .5; cursor: not-allowed; }

.fgtp-authcard__title { margin: 0 0 6px; font-size: 22px; }
.fgtp-authcard__sub { margin: 0 0 16px; color: var(--fgtp-muted); font-size: 14px; }
.fgtp-authcard__why { margin: 16px 0 0; font-size: 12px; color: var(--fgtp-muted); line-height: 1.5; }
.fgtp-authperks { text-align: left; margin: 0 0 18px; padding-left: 18px; display: grid; gap: 8px; color: var(--fgtp-muted); font-size: 13px; }
.fgtp-auth__logout { display: inline-block; margin-top: 14px; color: var(--fgtp-muted); font-size: 13px; }
.fgtp-auth__logout:hover { color: var(--fgtp-text); text-decoration: underline; }

/* --- Native auth forms (AJAX): field errors, honeypot, meter, busy --- */
.fgtp-field { margin-bottom: 2px; }
.fgtp-authform .fgtp-field input { margin-bottom: 6px; }
.fgtp-field__err { display: block; margin: -2px 0 10px; font-size: 12px; color: var(--fgtp-error); }
.fgtp-authform input[aria-invalid="true"] { border-color: var(--fgtp-error); box-shadow: 0 0 0 3px rgba(255,107,107,.18); }
.fgtp-authform__error {
	margin: 0 0 14px; padding: 10px 12px; border-radius: 10px;
	background: rgba(255,107,107,.12); border: 1px solid rgba(255,107,107,.4);
	color: var(--fgtp-error-light); font-size: 13px; text-align: left;
}
/* Honeypot: removed from layout & a11y tree, but present for bots. */
.fgtp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fgtp-remember { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px; font-size: 13px; font-weight: 600; color: var(--fgtp-muted); }
.fgtp-remember input { width: auto; height: auto; margin: 0; accent-color: var(--fgtp-accent); }
.fgtp-authbtn.is-busy { opacity: .7; cursor: progress; }

.fgtp-meter { display: block; margin: -4px 0 10px; }
.fgtp-meter__bar { display: block; height: 5px; border-radius: 999px; background: var(--fgtp-surface-2); overflow: hidden; }
.fgtp-meter__bar i {
	display: block; height: 100%; width: 100%; border-radius: 999px; background: var(--fgtp-error);
	transform: scaleX(0); transform-origin: left center;
	transition: transform 180ms var(--fgtp-ease-out), background 180ms ease;
}
.fgtp-meter[data-score="2"] .fgtp-meter__bar i { background: #f7b500; }
.fgtp-meter[data-score="3"] .fgtp-meter__bar i { background: #8bd24a; }
.fgtp-meter[data-score="4"] .fgtp-meter__bar i { background: var(--fgtp-green); }
.fgtp-meter__label { display: block; margin-top: 4px; font-size: 11px; color: var(--fgtp-muted); }

/* --- Topbar account menu (logged in) --- */
.fgtp-avatar {
	position: relative; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
	background: var(--fgtp-accent); color: #fff; cursor: pointer; overflow: hidden;
	display: grid; place-items: center;
	transition: transform 150ms var(--fgtp-ease-out), box-shadow 150ms ease;
}
.fgtp-avatar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.fgtp-avatar__initial { font-weight: 800; font-size: 15px; }
.fgtp-avatar:active { transform: scale(0.94); }
.fgtp-avatar[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--fgtp-accent-2); }
@media (hover: hover) and (pointer: fine) {
	.fgtp-avatar:hover { transform: translateY(-1px); }
}
.fgtp-pop__panel--account { width: 240px; padding: 6px; }
.fgtp-account__head { padding: 10px 12px 12px; border-bottom: 1px solid var(--fgtp-line); margin-bottom: 6px; }
.fgtp-account__name { display: block; font-weight: 800; font-size: 14px; color: var(--fgtp-text); }
.fgtp-account__email { display: block; font-size: 12px; color: var(--fgtp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fgtp-account__link {
	display: block; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--fgtp-text);
	transition: background 120ms ease, color 120ms ease;
}
.fgtp-account__link:hover { background: var(--fgtp-surface-2); }
.fgtp-account__link--logout { color: var(--fgtp-muted); }
.fgtp-account__link--logout:hover { color: var(--fgtp-error); }

@media (max-width: 560px) {
	.fgtp-pop__panel { position: fixed; left: 12px; right: 12px; top: calc(var(--fgtp-topbar-h) + 8px); width: auto; transform-origin: top center; }
	.fgtp-bottombar { flex-wrap: wrap; }
}

/* ==========================================================================
   MOBILE SEARCH OVERLAY (CrazyGames-style) + topbar search trigger
   ========================================================================== */
/* The inline topbar search is swapped for an icon that opens a full-screen
   overlay once the bar would be cramped. */
.fgtp-search-trigger { display: none; }

.fgtp-noscroll { overflow: hidden; }

.fgtp-msearch {
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
	display: flex;
	flex-direction: column;
	background: var(--fgtp-bg);
	opacity: 0;
	transition: opacity 200ms var(--fgtp-ease-out);
}
.fgtp-msearch[hidden] { display: none; }
.fgtp-msearch.is-open { opacity: 1; }

.fgtp-msearch__top {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--fgtp-line);
}
.fgtp-msearch__form { position: relative; flex: 1; display: flex; align-items: center; }
.fgtp-msearch__icon { position: absolute; left: 14px; color: var(--fgtp-muted); pointer-events: none; }
.fgtp-msearch__input {
	width: 100%;
	height: 44px;
	padding: 0 14px 0 42px;
	border-radius: 12px;
	border: 1px solid var(--fgtp-line);
	background: var(--fgtp-surface);
	color: var(--fgtp-text);
	font-size: 16px; /* >=16px so iOS doesn't zoom the page on focus */
}
.fgtp-msearch__input:focus { outline: none; border-color: var(--fgtp-accent); }
.fgtp-msearch__cancel {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: var(--fgtp-accent-2);
	font-size: 15px;
	font-weight: 700;
	padding: 8px 4px;
}
.fgtp-msearch__browse { flex: 1; overflow-y: auto; padding: 18px 14px 32px; }
.fgtp-msearch__browse[hidden] { display: none; }
.fgtp-msearch__heading {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--fgtp-muted);
}

/* Pick-a-vibe row inside the overlay: big SQUARE tiles, horizontal scroll. */
.fgtp-msearch__vibes {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 168px;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	margin-bottom: 28px;
	-webkit-overflow-scrolling: touch;
}
.fgtp-msearch__vibes::-webkit-scrollbar { display: none; }
.fgtp-msearch__vibes .fgtp-vibe { scroll-snap-align: start; aspect-ratio: 1 / 1; }
.fgtp-msearch__vibes .fgtp-vibe__icon {
	top: 8px;
	right: 8px;
	width: clamp(82px, 24vw, 106px);
	height: clamp(82px, 24vw, 106px);
}
.fgtp-msearch__vibes .fgtp-vibe__label { font-size: 1rem; }

/* "Featured" shortcuts inside the overlay: 2×2 grid. */
.fgtp-msearch__featured {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 28px;
}
.fgtp-feat {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px;
	border-radius: 12px;
	background: var(--fgtp-surface);
	color: var(--fgtp-text);
	font-size: 13px;
	font-weight: 700;
	transition: background 140ms ease, transform 140ms var(--fgtp-ease-out);
}
.fgtp-feat:active { transform: scale(0.98); }
.fgtp-feat__icon { flex: 0 0 auto; display: grid; place-items: center; color: var(--fgtp-accent); }
.fgtp-feat__icon .fgtp-icon { width: 20px; height: 20px; }
.fgtp-feat__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fgtp-feat__badge {
	margin-left: auto;
	flex: 0 0 auto;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--fgtp-green);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
}

/* Categories inside the overlay: plain vertical list, one row per category. */
.fgtp-msearch__cats {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.fgtp-mcat {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 13px 16px;
	border-radius: 12px;
	background: var(--fgtp-surface);
	color: var(--fgtp-text);
	font-size: 14px;
	font-weight: 600;
	transition: background 140ms ease, transform 140ms var(--fgtp-ease-out);
}
.fgtp-mcat:active { transform: scale(0.99); }
.fgtp-mcat__icon { flex: 0 0 auto; display: grid; place-items: center; color: var(--fgtp-accent); }
.fgtp-mcat__icon .fgtp-icon { width: 20px; height: 20px; }

@media (max-width: 900px) {
	/* Swap the inline search for the icon trigger; push the whole action
	   cluster (search, notifications, my games, log in) to the far right. */
	.fgtp-topbar .fgtp-search { display: none; }
	.fgtp-search-trigger { display: grid; }
	.fgtp-actions { margin-left: auto; }

	/* Pick a vibe → horizontal drag/scroll row on the homepage. */
	.fgtp-vibes__grid {
		display: grid;
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 160px;
		gap: 10px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.fgtp-vibes__grid::-webkit-scrollbar { display: none; }
	.fgtp-vibes__grid .fgtp-vibe { scroll-snap-align: start; }
}

/* ==========================================================================
   MOBILE GAME CARDS (phone): square thumb, title below in white, no fav,
   no overlay animation — matches CrazyGames' phone layout.
   Scoped to the grid + horizontal shelves; the "Top picks" mosaic keeps its
   own overlaid-title layout (excluded on purpose).
   ========================================================================== */
.fgtp-player__meta { display: none; }   /* mobile-only meta line */
.fgtp-tool--mshare { display: none; }   /* mobile-only share button */
.fgtp-player__play-m { display: none; } /* desktop keeps "Play game"; phone shows "Play now" */

/* Subtle heartbeat "bump" to invite the tap (phones only; see media query). */
@keyframes fgtp-heartbeat {
	0%   { transform: scale(1); }
	10%  { transform: scale(1.045); }
	20%  { transform: scale(1); }
	30%  { transform: scale(1.035); }
	42%  { transform: scale(1); }
	100% { transform: scale(1); }
}

@media (max-width: 900px) {
	.fgtp-grid .fgtp-card__link,
	.fgtp-row__track .fgtp-card__link,
	.fgtp-playnext__grid .fgtp-card__link { overflow: visible; border-radius: 0; }
	.fgtp-grid .fgtp-card__link::after,
	.fgtp-row__track .fgtp-card__link::after,
	.fgtp-playnext__grid .fgtp-card__link::after { content: none; }
	.fgtp-grid .fgtp-card__thumb,
	.fgtp-row__track .fgtp-card__thumb,
	.fgtp-playnext__grid .fgtp-card__thumb { aspect-ratio: 1 / 1; border-radius: 16px; }
	.fgtp-grid .fgtp-card__title,
	.fgtp-row__track .fgtp-card__title,
	.fgtp-playnext__grid .fgtp-card__title {
		display: block;          /* span is inline by default; block needed for ellipsis */
		position: static;
		opacity: 1;
		max-width: 100%;
		padding: 7px 2px 0;
		background: none;
		color: #fff;
		font-size: 12px;
		font-weight: 600;
		line-height: 1.3;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.fgtp-fav { display: none; }         /* favorites live on the game page only */
	.fgtp-card__plays { display: none; } /* play badge was tied to the old overlay */

	/* Rounder corners across every list item on phones. */
	.fgtp-mosaic .fgtp-card__link,
	.fgtp-mosaic .fgtp-card__thumb { border-radius: 16px; }

	/* Archive / search / category pages: clean 3-up grid that fits the screen
	   (no horizontal scroll); rows grow with posts-per-page.
	   minmax(0,1fr) (not 1fr) keeps all three columns exactly equal even when a
	   game title is long and can't wrap. */
	.fgtp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }

	/* Homepage category shelves: fluid item width so ~3.5 games always show,
	   auto-adjusting to any phone width (calc off the visible track width). */
	.fgtp-row__track { grid-auto-columns: calc((100% - 24px) / 3.5); gap: 8px; }

	/* Related games on the game page: identical 3-up square grid, all uniform.
	   minmax(0,1fr) (not 1fr) so a long un-wrapping title can't widen its column.
	   The cards themselves render the homepage .fgtp-card markup, so the phone
	   card styling above (scoped to add .fgtp-playnext__grid) makes them match
	   the homepage exactly: square thumb, title below, no overlay/badges. */
	.fgtp-playnext__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }

	/* ----------------------------------------------------------------------
	   GAME PAGE HERO (CrazyGames mobile): game banner → overlapping icon →
	   title → rating/category → big Play → centered action-icon row.
	   ---------------------------------------------------------------------- */
	.fgtp-player { display: flex; flex-direction: column; background: transparent; border-radius: 0; overflow: visible; margin-bottom: 0; }
	.fgtp-player__stage { aspect-ratio: auto; background: transparent; border-radius: 0; overflow: visible; }
	.fgtp-player__poster { position: static; display: flex; flex-direction: column; align-items: center; }
	.fgtp-player__bg {
		position: relative;
		inset: auto;
		width: 100%;
		aspect-ratio: 16 / 9;
		filter: none;
		transform: none;
		border-radius: 14px;
	}
	.fgtp-player__launch { position: relative; z-index: 1; width: 100%; margin-top: -42px; padding: 0 16px 4px; gap: 10px; }
	.fgtp-player__icon { width: 88px; height: 88px; border-radius: 20px; border: 3px solid var(--fgtp-bg); }
	.fgtp-player__name { font-size: 23px; }
	.fgtp-player__meta { display: flex; align-items: center; gap: 16px; color: var(--fgtp-muted); font-size: 14px; font-weight: 600; }
	.fgtp-player__rating { display: inline-flex; align-items: center; gap: 5px; color: var(--fgtp-text); }
	.fgtp-player__rating svg { color: var(--fgtp-star); }
	.fgtp-player__cat { color: var(--fgtp-muted); }
	.fgtp-player__play {
		width: 100%; max-width: 440px; height: 54px; font-size: 17px; margin-top: 4px;
		justify-content: center; /* center icon + label in the full-width button */
		animation: fgtp-heartbeat 2s var(--fgtp-ease-out) infinite;
		will-change: transform;
	}
	.fgtp-player__play:active { animation: none; } /* let the press-scale show, then resume */
	.fgtp-player__play-d { display: none; }   /* hide "Play game" on phones */
	.fgtp-player__play-m { display: inline; }  /* show "Play now" on phones */

	/* Action-icon row (like / dislike / favorite / share / report) */
	.fgtp-player__bar { justify-content: center; background: transparent; padding: 16px 12px 4px; }
	.fgtp-player__bar-left { display: none; }
	.fgtp-player__bar-right { gap: 10px; flex-wrap: wrap; justify-content: center; }
	#fgtp-controls-btn,
	#fgtp-qr-btn,
	.fgtp-tool--fs { display: none; } /* phone goes fullscreen on play; these aren't needed */
	.fgtp-tool--mshare { display: inline-flex; }
}

/* ==========================================================================
   TOP PICKS — mobile stacked layout (CrazyGames phone style):
   full-width hero banner + 3×2 grid, repeating. Desktop keeps the mosaic.
   ========================================================================== */
.fgtp-toppicks { display: none; } /* desktop uses the mosaic */

@media (max-width: 900px) {
	#recommended .fgtp-row__wrap { display: none; } /* hide the horizontal mosaic */
	.fgtp-toppicks { display: block; }

	.fgtp-tphero {
		position: relative;
		display: block;
		width: 100%;
		aspect-ratio: 16 / 9;
		border-radius: 16px;
		overflow: hidden;
		margin-bottom: 14px;
		background: var(--fgtp-surface);
	}
	.fgtp-tphero__bg { width: 100%; height: 100%; object-fit: cover; }
	.fgtp-tphero__overlay {
		position: absolute;
		inset: auto 0 0 0;
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 34px 12px 12px;
		background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 55%, transparent 100%);
	}
	.fgtp-tphero__icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
	.fgtp-tphero__meta { flex: 1 1 auto; min-width: 0; }
	.fgtp-tphero__title { display: block; color: #fff; font-weight: 800; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.fgtp-tphero__cat { display: block; color: rgba(255,255,255,.7); font-size: 12px; font-weight: 600; }
	.fgtp-tphero__play {
		flex: 0 0 auto;
		padding: 10px 22px;
		border-radius: 999px;
		background: var(--fgtp-accent);
		color: #fff;
		font-weight: 800;
		font-size: 14px;
		transition: transform 140ms var(--fgtp-ease-out), background 140ms ease;
	}
	.fgtp-tphero:active .fgtp-tphero__play { transform: scale(0.96); }
	.fgtp-toppicks__grid { margin-bottom: 22px; }
}

/* ==========================================================================
   BROWSE-CATEGORIES strip on phones: intro card full-width on top, then the
   category tiles as a 2-row horizontal-scrolling strip below it.
   ========================================================================== */
@media (max-width: 900px) {
	.fgtp-row--browse .fgtp-row__arrow { display: none; }
	.fgtp-browse {
		display: block;     /* card stacks above the scroller */
		overflow: visible;
	}
	.fgtp-browse__intro {
		margin-bottom: 12px; /* full width on top */
	}
	/* Real 2-row horizontal scroller now (wrapper no longer display:contents). */
	.fgtp-browse__tiles {
		display: grid;
		grid-template-rows: 1fr 1fr;
		grid-auto-flow: column;
		grid-auto-columns: 88px;
		gap: 8px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.fgtp-browse__tiles::-webkit-scrollbar { display: none; }
	/* Smaller, more compact tiles to match the game shelf items. */
	.fgtp-browse__tile { scroll-snap-align: start; padding: 10px 6px; gap: 6px; border-radius: 12px; }
	.fgtp-browse__icon .fgtp-icon { width: 22px; height: 22px; }
	.fgtp-browse__name { font-size: 11px; }
}

/* ==========================================================================
   NO HORIZONTAL OVERFLOW on phones/tablets (incl. landscape). Every page —
   the game page especially — stays within the viewport at any size/orientation
   instead of forcing a horizontal scroll. overflow-x: clip leaves vertical
   scrolling and sticky/fixed elements untouched.
   ========================================================================== */
@media (max-width: 1024px) {
	/* Master guard: nothing (topbar, grids, wide content) can make the page
	   wider than the viewport. overflow-x: clip is not a scroll container, so it
	   doesn't break the sticky topbar or the fixed sidebar drawer. */
	.fgtp-app { overflow-x: clip; }
	.fgtp-content { overflow-x: clip; }
	.fgtp-game-layout { max-width: 100%; }
	.fgtp-game-main { min-width: 0; }
}
@media (max-width: 900px) {
	/* Long game titles wrap instead of widening the hero. */
	.fgtp-player__name { max-width: 100%; overflow-wrap: anywhere; text-align: center; }
	/* SEO/description content (tables, wide media, long URLs) can't push width. */
	.fgtp-gamedesc__text { overflow-wrap: break-word; }
	.fgtp-gamedesc__text img,
	.fgtp-gamedesc__text iframe,
	.fgtp-gamedesc__text video,
	.fgtp-gamedesc__text pre,
	.fgtp-gamedesc__text table { max-width: 100%; }
}

/* ==========================================================================
   TOUCH TARGETS — bump interactive controls to >=44px on touch devices
   (WCAG 2.5.5 / PRODUCT.md "44x44 min on mobile"); desktop stays compact.
   ========================================================================== */
@media (pointer: coarse) {
	.fgtp-fav { width: 44px; height: 44px; }
	.fgtp-tool { width: 44px; height: 44px; }
	.fgtp-iconbtn { width: 44px; height: 44px; }
	.fgtp-avatar { width: 44px; height: 44px; }
	.fgtp-sheet__close,
	.fgtp-pop__close { width: 44px; height: 44px; }
	.fgtp-maccount__langclose { width: 44px; height: 44px; }
}

/* ==========================================================================
   MOBILE ACCOUNT OVERLAY (CrazyGames-style guest account page)
   ========================================================================== */
/* Login button: text pill on desktop, person icon on mobile. */
.fgtp-login-icon { display: none; }

@media (max-width: 900px) {
	.fgtp-login-btn--desktop { display: none; }
	.fgtp-login-icon { display: grid; }
}

.fgtp-maccount {
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
	display: flex;
	flex-direction: column;
	background: var(--fgtp-bg);
	opacity: 0;
	transition: opacity 200ms var(--fgtp-ease-out);
}
.fgtp-maccount[hidden] { display: none; }
.fgtp-maccount.is-open { opacity: 1; }

.fgtp-maccount__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: var(--fgtp-surface);
	color: var(--fgtp-muted);
	transition: background 140ms ease, color 140ms ease, transform 140ms var(--fgtp-ease-out);
}
.fgtp-maccount__close:active { transform: scale(0.92); }

.fgtp-maccount__scroll {
	flex: 1;
	overflow-y: auto;
	padding: 20px 20px 40px;
	-webkit-overflow-scrolling: touch;
}

/* Hero section */
.fgtp-maccount__hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 32px 0 24px;
}

/* Icon with blinking eyelids */
.fgtp-maccount__icon {
	position: relative;
	width: 80px;
	height: 80px;
	margin-bottom: 16px;
}
.fgtp-maccount__iconimg {
	width: 100%;
	height: 100%;
	border-radius: 18px;
}
.fgtp-maccount__lid {
	position: absolute;
	width: 27%;
	height: 28%;
	top: 34%;
	background: #f97316;
	border-radius: 50%;
	transform: scaleY(0);
	transform-origin: center top;
	animation: fgtp-blink 4s ease-in-out infinite;
	pointer-events: none;
}
.fgtp-maccount__lid--l { left: 17%; }
.fgtp-maccount__lid--r { left: 56%; }
@keyframes fgtp-blink {
	0%, 90%, 100% { transform: scaleY(0); }
	94%, 96% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
	.fgtp-maccount__lid { animation: none; }
}

.fgtp-maccount__title {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 800;
	color: var(--fgtp-text);
}
.fgtp-maccount__sub {
	margin: 0 0 20px;
	color: var(--fgtp-muted);
	font-size: 14px;
}
.fgtp-maccount__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 320px;
	height: 50px;
	border-radius: 999px;
	background: var(--fgtp-accent);
	color: #fff;
	font-size: 16px;
	font-weight: 800;
	transition: background 140ms ease, transform 140ms var(--fgtp-ease-out);
}
.fgtp-maccount__cta:active { transform: scale(0.97); }
.fgtp-maccount__guest {
	display: block;
	margin-top: 12px;
	padding: 8px;
	border: 0;
	background: transparent;
	color: var(--fgtp-muted);
	font-weight: 700;
	font-size: 13px;
	transition: color 140ms ease;
}
.fgtp-maccount__guest:active { color: var(--fgtp-text); }

/* Divider */
.fgtp-maccount__divider {
	height: 1px;
	margin: 8px 0 16px;
	background: var(--fgtp-line);
}

/* Language selector */
.fgtp-maccount__lang {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 24px;
}
.fgtp-maccount__langbtn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 22px;
	border: 1px solid var(--fgtp-line);
	border-radius: 999px;
	background: var(--fgtp-surface);
	color: var(--fgtp-muted);
	font-size: 14px;
	font-weight: 700;
	transition: background 140ms ease, color 140ms ease;
}
.fgtp-maccount__langbtn:active { background: var(--fgtp-surface-2); color: var(--fgtp-text); }
.fgtp-maccount__langbtn[aria-expanded="true"] { background: var(--fgtp-surface-2); color: var(--fgtp-text); }
.fgtp-maccount__langchev {
	transition: transform 200ms var(--fgtp-ease-out);
}
.fgtp-maccount__langbtn[aria-expanded="true"] .fgtp-maccount__langchev {
	transform: rotate(180deg);
}

/* Language dialog (fixed overlay — appears as a centered modal) */
.fgtp-maccount__langdlg {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 16px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms var(--fgtp-ease-out);
}
.fgtp-maccount__langdlg[hidden] { display: none; }
.fgtp-maccount__langdlg.is-open { opacity: 1; pointer-events: auto; }
.fgtp-maccount__langscrim {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.55);
}
.fgtp-maccount__langmenu {
	position: relative;
	width: 100%;
	max-width: 340px;
	max-height: 70vh;
	overflow-y: auto;
	border-radius: 18px;
	background: var(--fgtp-bg-2);
	border: 1px solid var(--fgtp-line);
	box-shadow: 0 -8px 40px rgba(0,0,0,.5);
	transform: translateY(20px);
	transition: transform 240ms var(--fgtp-ease-out);
}
.fgtp-maccount__langdlg.is-open .fgtp-maccount__langmenu {
	transform: translateY(0);
}
.fgtp-maccount__langhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	border-bottom: 1px solid var(--fgtp-line);
	font-size: 16px;
	font-weight: 800;
	color: var(--fgtp-text);
}
.fgtp-maccount__langclose {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: var(--fgtp-surface);
	color: var(--fgtp-muted);
	transition: background 120ms ease, color 120ms ease;
}
.fgtp-maccount__langclose:active { background: var(--fgtp-surface-2); color: var(--fgtp-text); }
.fgtp-maccount__langopt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 15px 18px;
	border: 0;
	background: transparent;
	color: var(--fgtp-muted);
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	transition: background 120ms ease, color 120ms ease;
}
.fgtp-maccount__langopt + .fgtp-maccount__langopt {
	border-top: 1px solid var(--fgtp-line);
}
.fgtp-maccount__langopt:active { background: var(--fgtp-surface); }
.fgtp-maccount__langopt.is-active {
	color: var(--fgtp-accent-2);
	font-weight: 800;
}
.fgtp-maccount__langcheck {
	width: 20px;
	height: 20px;
	color: var(--fgtp-accent-2);
	opacity: 0;
}
.fgtp-maccount__langopt.is-active .fgtp-maccount__langcheck { opacity: 1; }

/* Footer links */
.fgtp-maccount__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
	padding: 0 8px;
	margin-bottom: 24px;
}
.fgtp-maccount__links a {
	color: var(--fgtp-muted);
	font-size: 13px;
	font-weight: 600;
	line-height: 2;
	transition: color 140ms ease;
}
.fgtp-maccount__links a:active { color: var(--fgtp-text); }

/* Social icons */
.fgtp-maccount__social {
	display: flex;
	justify-content: center;
	gap: 16px;
}
.fgtp-maccount__social a {
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--fgtp-muted);
	transition: color 140ms ease, transform 140ms var(--fgtp-ease-out);
}
.fgtp-maccount__social a:active { transform: scale(0.9); color: var(--fgtp-text); }

@media (prefers-reduced-motion: reduce) {
	* { transition-duration: 0s !important; animation-duration: 0s !important; }
}