/*
 * MiniGames Pro – main stylesheet.
 * Uses CSS logical properties (inline/block, start/end) so one file serves LTR and RTL.
 */

/* ---------- Tokens ---------- */
:root {
	--mgp-bg: #bfeefc;
	--mgp-bg2: #d4f3ff;
	--mgp-surface: #fff;
	--mgp-text: #002b50;
	--mgp-muted: #5d6b84;
	--mgp-accent: #009cff;
	--mgp-accent2: #ff4f8b;
	--mgp-cell: 94px;
	--mgp-gap: 16px;
	--mgp-radius: 16px;
	--mgp-pad: 16px;
	--mgp-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--mgp-shadow: 0 6px 12px rgba(0, 0, 0, .24);
	--mgp-shadow-soft: 0 6px 16px rgba(0, 43, 80, .12);
	--mgp-tile-m: calc(var(--mgp-cell) * 2 + var(--mgp-gap));
	--mgp-tile-l: calc(var(--mgp-cell) * 3 + var(--mgp-gap) * 2);
	--mgp-soft: #eef4fb;
	--mgp-soft-accent: #eaf6ff;
	--mgp-line: #e3ebf3;
	--mgp-input-bg: #f6fafe;
	--mgp-input-border: #dbe7f3;
	--mgp-more-hover: rgba(255, 255, 255, .6);
	--mgp-band-glow: rgba(255, 255, 255, .35);
	--mgp-band-stripe: rgba(255, 255, 255, .18);
	color-scheme: light;
}

/* ---------- Dark mode (colors come from the Customizer, see mgp_inline_css()) ---------- */
html[data-theme="dark"] {
	--mgp-bg: #0e1726;
	--mgp-bg2: #0a111d;
	--mgp-surface: #172338;
	--mgp-text: #e6eef9;
	--mgp-muted: #93a4bd;
	--mgp-soft: #22314a;
	--mgp-soft-accent: #1d3a5c;
	--mgp-line: #2a3a55;
	--mgp-input-bg: #111b2c;
	--mgp-input-border: #2a3a55;
	--mgp-more-hover: rgba(255, 255, 255, .08);
	--mgp-band-glow: rgba(255, 255, 255, .06);
	--mgp-band-stripe: rgba(255, 255, 255, .03);
	--mgp-shadow: 0 6px 14px rgba(0, 0, 0, .5);
	--mgp-shadow-soft: 0 6px 16px rgba(0, 0, 0, .35);
	color-scheme: dark;
}
html[data-theme="dark"] body.mgp-has-pattern {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='%23fff' fill-opacity='.035'%3E%3Cpath d='M70 20l40 60-40 60-40-60z'/%3E%3Cpath d='M300 150l55 80-55 80-55-80z'/%3E%3Cpath d='M150 300l25 38-25 38-25-38z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 420px 420px,
		linear-gradient(180deg, var(--mgp-bg) 0%, var(--mgp-bg2) 100%) fixed;
}
/* Pastel bands/cards are toned down so light text stays readable. */
html[data-theme="dark"] .mgp-band { background-color: color-mix(in srgb, var(--mgp-band) 22%, var(--mgp-bg)); }
html[data-theme="dark"] .mgp-cat--card { background: color-mix(in srgb, var(--mgp-cat, var(--mgp-surface)) 28%, var(--mgp-surface)); }
html[data-theme="dark"] .mgp-cat--circle .mgp-cat__media { border-color: color-mix(in srgb, var(--mgp-cat, var(--mgp-surface)) 45%, var(--mgp-surface)); }
html[data-theme="dark"] .mgp-hero__bg { opacity: .22; }
html[data-theme="dark"] .mgp-hero__playicon,
html[data-theme="dark"] .mgp-video__play { background: rgba(23, 35, 56, .92); }
html[data-theme="dark"] .mgp-player__exit { background: rgba(23, 35, 56, .9); }
html[data-theme="dark"] .mgp-overlay { background: rgba(0, 0, 0, .6); }

/* Logo variants for light / dark. */
.mgp-logo--dark { display: none !important; }
html[data-theme="dark"] .mgp-logo--dark { display: block !important; }
html[data-theme="dark"] .mgp-logo--light.has-dark { display: none !important; }

.mgp-theme-toggle .mgp-icon--sun { display: none; }
html[data-theme="dark"] .mgp-theme-toggle .mgp-icon--sun { display: inline-block; }
html[data-theme="dark"] .mgp-theme-toggle .mgp-icon--moon { display: none; }

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

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

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--mgp-font);
	font-size: 16px;
	line-height: 1.5;
	color: var(--mgp-text);
	background: linear-gradient(180deg, var(--mgp-bg) 0%, var(--mgp-bg2) 100%) fixed;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

body.mgp-has-pattern {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='%23fff' fill-opacity='.28'%3E%3Cpath d='M70 20l40 60-40 60-40-60z'/%3E%3Cpath d='M300 150l55 80-55 80-55-80z'/%3E%3Cpath d='M150 300l25 38-25 38-25-38z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 420px 420px,
		linear-gradient(180deg, var(--mgp-bg) 0%, var(--mgp-bg2) 100%) fixed;
}

img { max-width: 100%; height: auto; }
a { color: var(--mgp-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--mgp-accent); outline-offset: 2px; }
[hidden] { display: none !important; }

.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;
}
.mgp-skip:focus {
	clip: auto; width: auto; height: auto; margin: 0;
	inset-block-start: 8px; inset-inline-start: 8px;
	z-index: 1000; padding: 10px 16px;
	background: var(--mgp-surface); border-radius: 12px;
}

.mgp-icon { width: 24px; height: 24px; flex: none; display: inline-block; vertical-align: middle; }
[dir="rtl"] .mgp-icon--flip { transform: scaleX(-1); }

/* ---------- Layout ---------- */
.mgp-main {
	padding: 0 var(--mgp-pad) 40px;
	min-height: 60vh;
}

.mgp-card {
	background: var(--mgp-surface);
	border-radius: 20px;
	box-shadow: var(--mgp-shadow-soft);
	padding: 24px 28px;
	max-width: 1100px;
	margin: 24px auto;
}

/* ---------- Header ---------- */
.mgp-header {
	position: relative;
	z-index: 100;
	display: flex;
	margin-block: 12px 20px;
	pointer-events: none;
	padding-inline: var(--mgp-pad);
}
/* Like Poki: the header box floats over the content only on touch-size screens. */
@media (max-width: 900px) {
	.mgp-header { position: sticky; inset-block-start: 12px; }
	body.admin-bar .mgp-header { inset-block-start: 58px; }
}

.mgp-header__box {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 64px;
	padding: 8px 10px;
	background: var(--mgp-surface);
	border-radius: 20px;
	box-shadow: var(--mgp-shadow);
}

.mgp-header__logo {
	display: flex;
	align-items: center;
	padding-inline: 6px 12px;
	border-inline-end: 2px solid var(--mgp-line);
	min-height: 44px;
}
.mgp-header__logo img,
.mgp-header__logo .custom-logo { display: block; max-height: 44px; width: auto; }
.mgp-header__sitename {
	font-weight: 900;
	font-size: 1.45rem;
	letter-spacing: -.02em;
	color: var(--mgp-text);
	white-space: nowrap;
}
.mgp-header__sitename:hover { text-decoration: none; color: var(--mgp-accent); }

.mgp-iconbar { display: flex; align-items: center; gap: 2px; }
.mgp-iconbar__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }

.mgp-iconbar a,
.mgp-iconbar__btn {
	position: relative;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 14px;
	background: transparent;
	color: var(--mgp-text);
	transition: background-color .15s, color .15s, transform .15s;
}
.mgp-iconbar a:hover,
.mgp-iconbar__btn:hover,
.mgp-iconbar .current-menu-item > a {
	background: var(--mgp-soft-accent);
	color: var(--mgp-accent);
	text-decoration: none;
}
.mgp-iconbar a:active,
.mgp-iconbar__btn:active { transform: scale(.92); }
.mgp-iconbar .mgp-icon { width: 26px; height: 26px; }

.mgp-iconbar__label {
	position: absolute;
	inset-block-start: calc(100% + 8px);
	inset-inline-start: 50%;
	translate: -50% 0;
	padding: 4px 10px;
	border-radius: 8px;
	background: var(--mgp-text);
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s;
}
[dir="rtl"] .mgp-iconbar__label { translate: 50% 0; }
@media (hover: hover) {
	.mgp-iconbar a:hover .mgp-iconbar__label,
	.mgp-iconbar__btn:hover .mgp-iconbar__label { opacity: 1; }
}
@media (hover: none) {
	.mgp-iconbar__label { display: none; }
}

.mgp-header__extras { display: flex; align-items: center; gap: 8px; padding-inline-start: 8px; }
.mgp-header__extras .mgp-widget { margin: 0; }

/* ---------- Overlays: search & drawer ---------- */
.mgp-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(0, 25, 50, .45);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .2s;
}
.mgp-overlay.is-open { opacity: 1; }

.mgp-overlay__close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 14px;
	background: var(--mgp-soft);
	color: var(--mgp-text);
}

.mgp-search .mgp-overlay__panel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 720px;
	margin: 90px auto 0;
	padding: 14px;
	background: var(--mgp-surface);
	border-radius: 20px;
	box-shadow: var(--mgp-shadow);
	transform: translateY(-10px);
	transition: transform .2s;
}
.mgp-search.is-open .mgp-overlay__panel { transform: none; }
.mgp-search .mgp-overlay__panel > :not(.mgp-overlay__close) { flex: 1; min-width: 0; }
.mgp-search .mgp-overlay__close { order: 2; }

.mgp-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: min(360px, 88vw);
	overflow-y: auto;
	padding: 16px;
	background: var(--mgp-surface);
	box-shadow: var(--mgp-shadow);
	transform: translateX(-100%);
	transition: transform .25s ease;
}
[dir="rtl"] .mgp-drawer__panel { transform: translateX(100%); }
.mgp-drawer.is-open .mgp-drawer__panel { transform: none; }

.mgp-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-end: 12px; }
.mgp-drawer__title { font-weight: 900; font-size: 1.2rem; }
.mgp-drawer__langs { margin-block-end: 12px; }
.mgp-drawer__langs ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mgp-drawer__langs a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--mgp-soft); color: var(--mgp-text); font-weight: 600; }

.mgp-drawer__menu,
.mgp-drawer__menu ul { margin: 0; padding: 0; list-style: none; }
.mgp-drawer__menu ul { padding-inline-start: 14px; }
.mgp-drawer__menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 12px;
	color: var(--mgp-text);
	font-weight: 700;
}
.mgp-drawer__menu a:hover,
.mgp-drawer__menu .current-menu-item > a,
.mgp-drawer__menu .current-cat > a { background: var(--mgp-soft-accent); color: var(--mgp-accent); text-decoration: none; }
.mgp-drawer__menu a > .mgp-icon,
.mgp-drawer__menu .mgp-menu-emoji {
	flex: none;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 7px;
	border-radius: 11px;
	background: var(--mgp-soft-accent);
	color: var(--mgp-accent);
	font-size: 1.1rem;
	line-height: 1;
}
.mgp-header__menu { flex: none; }
.mgp-drawer .mgp-section { margin-block: 16px; }
.mgp-drawer .mgp-band { margin-inline: -16px; padding-inline: 16px; }

/* ---------- Section (widget) heading ---------- */
.mgp-section { margin-block: 26px; }
.mgp-area > .mgp-widget { margin-block: 0; }

.mgp-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-block-end: 12px;
}
.mgp-section__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
}
.mgp-section__title a { display: inherit; align-items: inherit; gap: inherit; color: inherit; }
.mgp-section__title a:hover { text-decoration: none; color: var(--mgp-accent); }
.mgp-section__icon { display: inline-grid; place-items: center; color: var(--mgp-text); }
.mgp-section__icon .mgp-icon { width: 30px; height: 30px; }
.mgp-section__icon--text { font-size: 1.6rem; line-height: 1; }

.mgp-section__more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: none;
	padding-block: 8px;
	padding-inline: 16px 10px;
	border-radius: 999px;
	color: var(--mgp-text);
	font-weight: 800;
	font-size: 1.12rem;
	background: var(--mgp-more-hover);
	transition: background-color .15s, color .15s;
}
.mgp-section__more .mgp-icon { width: 26px; height: 26px; }
.mgp-section__more:hover { background: var(--mgp-surface); color: var(--mgp-accent); text-decoration: none; }

/* Colored full-bleed band behind a section (Poki mobile rows). */
.mgp-band {
	position: relative;
	margin-block: 0;
	margin-inline: calc(var(--mgp-pad) * -1);
	padding: 22px var(--mgp-pad) 18px;
	background-color: var(--mgp-band);
	background-image:
		radial-gradient(ellipse 40% 60% at 12% 30%, var(--mgp-band-glow), transparent 70%),
		linear-gradient(135deg, transparent 62%, var(--mgp-band-stripe) 62%, var(--mgp-band-stripe) 78%, transparent 78%);
}
.mgp-band + .mgp-band,
.mgp-widget:has(> .mgp-band) + .mgp-widget:has(> .mgp-band) { margin-block-start: 0; }

/* Bands inside columns/cards become rounded boxes instead of full-bleed stripes. */
.mgp-gg__center .mgp-band,
.mgp-game-layout .mgp-band,
.mgp-game-details .mgp-band,
.mgp-page .mgp-band,
.mgp-sidebar .mgp-band,
.mgp-footer .mgp-band,
.mgp-card .mgp-band {
	--mgp-pad: 16px;
	margin: var(--mgp-gap) 0;
	border-radius: 20px;
	overflow: hidden;
}

/* ---------- Tiles ---------- */
.mgp-tile {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: var(--mgp-radius);
	background: var(--mgp-surface);
	box-shadow: var(--mgp-shadow);
	isolation: isolate;
	transition: transform .2s cubic-bezier(.25, .1, .25, 1.4), box-shadow .2s;
	-webkit-tap-highlight-color: transparent;
}
.mgp-tile--m,
.mgp-tile--l { border-radius: calc(var(--mgp-radius) * 1.25); }
.mgp-tile:hover,
.mgp-tile:focus-visible {
	z-index: 2;
	transform: scale(1.04);
	box-shadow: 0 12px 24px rgba(0, 0, 0, .3);
	text-decoration: none;
}
.mgp-tile:active { transform: scale(.97); }

.mgp-tile__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--mgp-soft);
}

.mgp-tile__title {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 1;
	padding: 26px 8px 8px;
	color: #fff;
	font-size: .82rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .78));
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .18s, transform .18s;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mgp-tile--m .mgp-tile__title { font-size: 1rem; padding: 34px 12px 12px; }
.mgp-tile--l .mgp-tile__title { font-size: 1.2rem; padding: 40px 14px 14px; }
.mgp-tile:hover .mgp-tile__title,
.mgp-tile:focus-visible .mgp-tile__title { opacity: 1; transform: none; }

.mgp-titles-always .mgp-tile__title { opacity: 1; transform: none; }
.mgp-titles-never .mgp-tile__title { display: none; }
.mgp-section.mgp-titles-hover .mgp-tile__title { display: -webkit-box; opacity: 0; transform: translateY(8px); }
.mgp-section.mgp-titles-hover .mgp-tile:hover .mgp-tile__title { opacity: 1; transform: none; }
.mgp-section.mgp-titles-always .mgp-tile__title { display: -webkit-box; opacity: 1; transform: none; }
.mgp-section.mgp-titles-never .mgp-tile__title { display: none; }

.mgp-tile__badge {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	background: var(--mgp-surface);
	color: var(--mgp-accent);
	border-end-end-radius: 14px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.mgp-tile__badge .mgp-icon { width: 20px; height: 20px; }
.mgp-tile__badge--hot { color: #ff5a1f; }
.mgp-tile__badge--top { color: #e2a400; }
.mgp-tile__badge--updated { color: #13b37a; }
.mgp-tile--m .mgp-tile__badge,
.mgp-tile--l .mgp-tile__badge { width: 42px; height: 42px; border-end-end-radius: 18px; }
.mgp-tile--m .mgp-tile__badge .mgp-icon,
.mgp-tile--l .mgp-tile__badge .mgp-icon { width: 24px; height: 24px; }

/* ---------- Mosaic grid (Poki desktop) ---------- */
.mgp-mosaic {
	display: grid;
	grid-template-columns: repeat(auto-fill, var(--mgp-cell));
	grid-auto-rows: var(--mgp-cell);
	grid-auto-flow: dense;
	gap: var(--mgp-gap);
	justify-content: center;
}
.mgp-mosaic .mgp-tile { aspect-ratio: auto; }
.mgp-mosaic .mgp-tile--m { grid-column: span 2; grid-row: span 2; }
.mgp-mosaic .mgp-tile--l { grid-column: span 3; grid-row: span 3; }
.mgp-mosaic > .mgp-tile.is-fill-off { display: none !important; }
/* Reserve tiles: only shown when main.js needs them to fill empty cells. */
.mgp-mosaic > .mgp-tile--extra:not(.is-fill-on) { display: none !important; }
/* Bigger thumbnails in page mosaics (home, categories), growing with the screen. */
@media (min-width: 601px) {
	.mgp-section--mosaic .mgp-mosaic { --mgp-cell: clamp(104px, 7.4vw, 150px); }
	/* "Large icons only": columns are one large icon wide, so no column is ever left empty. */
	.mgp-mosaic.mgp-mosaic--uniform-m {
		grid-template-columns: repeat(auto-fill, calc(var(--mgp-cell) * 2 + var(--mgp-gap)));
		grid-auto-rows: calc(var(--mgp-cell) * 2 + var(--mgp-gap));
	}
	.mgp-mosaic--uniform-m > .mgp-tile--m { grid-column: span 1; grid-row: span 1; }
}

/* ---------- Scroller (Poki mobile rows) ---------- */
.mgp-scroller { position: relative; }

.mgp-scroller__track {
	--mgp-w: var(--mgp-tile-m);
	--mgp-rows: 1;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--mgp-w);
	grid-template-rows: repeat(var(--mgp-rows), var(--mgp-w));
	gap: var(--mgp-gap);
	margin-inline: calc(var(--mgp-pad) * -1);
	padding: 8px var(--mgp-pad) 16px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--mgp-pad);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.mgp-scroller__track::-webkit-scrollbar { display: none; }
.mgp-scroller__track > * { scroll-snap-align: start; }
.mgp-scroller__track--s { --mgp-w: var(--mgp-cell); }
.mgp-scroller__track--m { --mgp-w: var(--mgp-tile-m); }
.mgp-scroller__track--l { --mgp-w: var(--mgp-tile-l); }
.mgp-scroller__track--rows-2 { --mgp-rows: 2; }
.mgp-scroller__track--rows-3 { --mgp-rows: 3; }
.mgp-scroller__track .mgp-tile { aspect-ratio: auto; }
.mgp-scroller__track .mgp-tile:hover { transform: scale(1.03); }

.mgp-scroller__btn {
	position: absolute;
	inset-block-start: 50%;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-block-start: -27px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--mgp-surface);
	color: var(--mgp-text);
	box-shadow: var(--mgp-shadow);
	opacity: 0;
	transition: opacity .2s, transform .15s;
}
.mgp-scroller__btn--prev { inset-inline-start: -6px; }
.mgp-scroller__btn--next { inset-inline-end: -6px; }
.mgp-scroller:hover .mgp-scroller__btn,
.mgp-scroller__btn:focus-visible { opacity: 1; }
.mgp-scroller__btn:hover { transform: scale(1.08); }
@media (hover: none) {
	.mgp-scroller__btn { display: none !important; }
}

/* ---------- Category tiles ---------- */
.mgp-cats--grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--mgp-tile-m), 1fr));
	gap: var(--mgp-gap);
}
.mgp-cats--grid.mgp-cats--circle { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.mgp-scroller__track.mgp-cats { grid-auto-columns: max-content; grid-template-rows: auto; }

.mgp-cat { color: var(--mgp-text); font-weight: 800; -webkit-tap-highlight-color: transparent; }
.mgp-cat:hover { text-decoration: none; }

.mgp-cat--card {
	display: flex;
	align-items: center;
	gap: 12px;
	width: var(--mgp-tile-m);
	height: var(--mgp-cell);
	overflow: hidden;
	border-radius: var(--mgp-radius);
	background: var(--mgp-cat, var(--mgp-surface));
	box-shadow: var(--mgp-shadow);
	transition: transform .2s cubic-bezier(.25, .1, .25, 1.4);
}
.mgp-cats--grid .mgp-cat--card { width: auto; }
.mgp-cat--card:hover { transform: scale(1.04); }
.mgp-cat--card .mgp-cat__media { flex: none; width: var(--mgp-cell); height: 100%; }
.mgp-cat--card .mgp-cat__name { padding-inline-end: 10px; line-height: 1.2; font-size: .95rem; overflow: hidden; }

.mgp-cat--circle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 104px;
	text-align: center;
}
.mgp-cat--circle .mgp-cat__media {
	width: 88px;
	height: 88px;
	overflow: hidden;
	border-radius: 50%;
	border: 4px solid var(--mgp-cat, var(--mgp-surface));
	box-shadow: var(--mgp-shadow);
	transition: transform .2s cubic-bezier(.25, .1, .25, 1.4);
}
.mgp-cat--circle:hover .mgp-cat__media { transform: scale(1.06); }
.mgp-cat--circle .mgp-cat__name { font-size: .85rem; line-height: 1.2; }

.mgp-cat__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mgp-cat__img--empty { display: grid; place-items: center; background: var(--mgp-soft-accent); color: var(--mgp-accent); }
.mgp-cat__count { display: block; font-size: .75rem; font-weight: 600; color: var(--mgp-muted); }

/* ---------- Page heads, archives ---------- */
.mgp-pagehead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin-block: 4px 18px;
}
.mgp-pagehead .mgp-breadcrumbs { flex-basis: 100%; }
.mgp-pagehead__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
	font-weight: 900;
	line-height: 1.15;
}
.mgp-pagehead__count {
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--mgp-surface);
	font-weight: 700;
	font-size: .9rem;
	box-shadow: var(--mgp-shadow-soft);
}
.mgp-pagehead__search { flex: 1 1 320px; max-width: 560px; }

.mgp-subcats { margin-block: 0 18px; }
.mgp-archive-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 32px 0 14px;
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	font-weight: 800;
}
.mgp-archive-grid { margin-block-start: 0; }

.mgp-breadcrumbs { font-size: 1rem; color: var(--mgp-muted); margin-block-end: 10px; }
.mgp-breadcrumbs a { color: inherit; font-weight: 700; }
.mgp-gg__center > .mgp-breadcrumbs { font-size: 1.1rem; font-weight: 700; color: var(--mgp-text); }

.mgp-pagination { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-block: 28px; }
.mgp-pagination ul,
.mgp-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
	box-shadow: none;
}
.mgp-pagination li { display: block; }
.mgp-pagination li > .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border-radius: 14px;
	background: var(--mgp-surface);
	color: var(--mgp-text);
	font-weight: 800;
	box-shadow: var(--mgp-shadow-soft);
}
.mgp-pagination .page-numbers.current { background: var(--mgp-accent); color: #fff; }
.mgp-pagination a.page-numbers:hover { text-decoration: none; color: var(--mgp-accent); }
.mgp-pagination .dots { background: transparent; box-shadow: none; }

/* ---------- Buttons & forms ---------- */
.mgp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--mgp-soft);
	color: var(--mgp-text);
	font-weight: 800;
	line-height: 1;
	transition: transform .15s, background-color .15s, filter .15s;
}
.mgp-btn:hover { text-decoration: none; filter: brightness(.97); transform: translateY(-1px); }
.mgp-btn:active { transform: scale(.96); }
.mgp-btn--primary { background: var(--mgp-accent); color: #fff; }
.mgp-btn--icon { width: 44px; height: 44px; padding: 0; border-radius: 14px; }
.mgp-load-more { min-width: 220px; box-shadow: var(--mgp-shadow-soft); background: var(--mgp-surface); }
.mgp-shelves-more { display: flex; justify-content: center; padding-block: 24px; }
.mgp-load-more.is-loading { opacity: .6; pointer-events: none; }

.mgp-searchform { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; }
.mgp-searchform__icon { position: absolute; inset-inline-start: 14px; color: var(--mgp-muted); pointer-events: none; }
.mgp-searchform__input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding-inline: 46px 14px;
	border: 2px solid var(--mgp-input-border);
	border-radius: 14px;
	background: var(--mgp-input-bg);
	color: var(--mgp-text);
	font: inherit;
	font-size: 1.05rem;
}
.mgp-searchform__input:focus { outline: none; border-color: var(--mgp-accent); background: var(--mgp-surface); }

/* ---------- Game page ---------- */
/* Poki-style grid (main.js adds .is-grid and the column / span variables). */
.mgp-gg { --gg-cell: var(--mgp-cell); --gg-gap: var(--mgp-gap); }
.mgp-gg__center { min-width: 0; }
.mgp-gg:not(.is-grid) > .mgp-gg__tile,
.mgp-gg:not(.is-grid) > .mgp-gg__ad--tower { display: none; }
.mgp-gg:not(.is-grid) > .mgp-gg__ad--box { display: flex; justify-content: center; margin-block-start: var(--mgp-gap); }
.mgp-gg.is-grid {
	display: grid;
	grid-template-columns: repeat(var(--gg-cols), var(--gg-cell));
	grid-auto-rows: var(--gg-cell);
	grid-auto-flow: dense;
	gap: var(--gg-gap);
	justify-content: center;
}
.mgp-gg.is-grid > .mgp-gg__center { align-self: start; }
.mgp-gg.is-grid > .mgp-gg__tile { width: auto; height: auto; aspect-ratio: auto; }
.mgp-gg.is-grid > .mgp-tile--m { grid-column: span 2; grid-row: span 2; }
.mgp-gg.is-grid > .mgp-gg__tile.is-gg-off { display: none; }
.mgp-gg.is-grid > .mgp-gg__tile.is-gg-small { grid-column: span 1; grid-row: span 1; }
.mgp-gg__ad { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; overflow: hidden; }
.mgp-gg__ad .mgp-widget { margin: 0; }
.mgp-gg__ad .mgp-widget__title { margin: 0; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mgp-muted); text-align: center; }
.mgp-gg.is-grid > .mgp-gg__ad.is-gg-off { display: none; }
/* Strip banner above the game. */
.mgp-strip { display: flex; justify-content: center; overflow: hidden; }
.mgp-strip .mgp-widget { margin: 0; max-width: 100%; }
/* Advanced Ads placements (inc/ads.php): centred, never wider than the page. */
.mgp-ad { display: flex; justify-content: center; max-width: 100%; overflow: hidden; }
.mgp-ad > * { max-width: 100%; }
.mgp-area--ad { margin-block: 16px; }
.mgp-area--top-ad { margin-block: 0 16px; }
.mgp-gg__ad .mgp-ad,
.mgp-preloader__ad .mgp-ad { width: 100%; }
@media (max-width: 760px) {
	.mgp-gg > .mgp-gg__tile { display: none !important; }
}

.mgp-player {
	overflow: hidden;
	border-radius: calc(var(--mgp-radius) * 1.25);
	background: var(--mgp-surface);
	box-shadow: var(--mgp-shadow);
}
.mgp-player__screen {
	background: radial-gradient(ellipse at center, #1b2f4a 0%, #0b1626 70%);
}
.mgp-player__stage {
	--mgp-ar: 1.7778;
	position: relative;
	margin-inline: auto;
}
/* "fit": a single iframe/embed scaled into a box with the game's aspect ratio. */
.mgp-player__stage--fit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(100%, calc((100vh - 200px) * var(--mgp-ar)));
	aspect-ratio: var(--mgp-ar);
	background: #000;
	overflow: hidden;
}
.mgp-player__stage--fit > :not(.mgp-player__exit):not(.mgp-preloader):not(script):not(style),
.mgp-player__stage--fit iframe,
.mgp-player__stage--fit embed,
.mgp-player__stage--fit object,
.mgp-player__stage--fit ruffle-player,
.mgp-player__stage--fit #playframe {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	border: 0;
}
/* "natural": composite embeds (e.g. EmulatorJS with toolbars and panels) lay themselves out. */
.mgp-player__stage--natural {
	display: block;
	width: 100%;
	min-height: 200px;
}
.mgp-player__stage--natural iframe { max-width: 100%; border: 0; }
.mgp-player__stage:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; overflow: auto; }
.mgp-player__stage:-webkit-full-screen { width: 100%; height: 100%; }
.mgp-player__stage.is-pseudo-fs {
	position: fixed;
	inset: 0;
	z-index: 99999;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	aspect-ratio: auto;
}
.mgp-player__exit {
	position: absolute;
	inset-block-start: max(10px, env(safe-area-inset-top));
	inset-inline-end: max(10px, env(safe-area-inset-right));
	z-index: 10;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: var(--mgp-text);
}
html.mgp-noscroll,
html.mgp-noscroll body { overflow: hidden; }

.mgp-player__bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.mgp-player__thumb { flex: none; width: 48px; height: 48px; overflow: hidden; border-radius: 12px; box-shadow: var(--mgp-shadow-soft); }
.mgp-player__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mgp-player__info { min-width: 0; }
.mgp-player__title { margin: 0; font-size: 1.15rem; font-weight: 800; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgp-player__cat { font-size: .85rem; font-weight: 600; color: var(--mgp-muted); }
.mgp-player__actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }

.mgp-gg__center > .mgp-area,
.mgp-gg__center > .mgp-breadcrumbs { margin-block: 0 12px; }
.mgp-game-layout > .mgp-area--mgp-game-below { margin-block: 16px 0; }
.mgp-game-details {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 24px;
	align-items: start;
	max-width: 1320px;
	margin: 24px auto 0;
}
.mgp-game-details .mgp-card { margin: 0; }
.mgp-game-details__main { display: grid; gap: 24px; align-content: start; min-width: 0; }
/* Related games (YARPP and similar plugins) in their own card under the description. */
.mgp-game-related > :first-child { margin-block-start: 0; }
.mgp-game-related .yarpp-thumbnails-horizontal { display: flex; flex-wrap: wrap; gap: 12px; }
.mgp-game-related .yarpp-thumbnail { margin: 0 !important; border: 0 !important; border-radius: 14px; overflow: hidden; }
.mgp-game-related .yarpp-thumbnail img { border-radius: 14px; }
.mgp-game-details__side { display: grid; gap: 16px; }
.mgp-game-after { max-width: 1320px; margin-inline: auto; }
@media (max-width: 1000px) {
	.mgp-game-details { grid-template-columns: minmax(0, 1fr); }
}

.mgp-side-card { padding: 18px 20px; }
.mgp-side-card__title,
.mgp-side-card__label {
	display: block;
	margin: 0 0 12px;
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mgp-muted);
}
.mgp-share { display: flex; flex-wrap: wrap; gap: 8px; }
.mgp-share__btn {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: var(--mgp-soft);
	color: var(--mgp-text);
	font-weight: 900;
	transition: transform .15s, background-color .15s, color .15s;
}
.mgp-share__btn:hover { transform: translateY(-2px); text-decoration: none; color: #fff; background: var(--mgp-accent); }
.mgp-share__btn--facebook:hover { background: #1877f2; }
.mgp-share__btn--x:hover { background: #000; }
.mgp-share__btn--whatsapp:hover { background: #25d366; }
.mgp-share__btn--telegram:hover { background: #229ed9; }
.mgp-share__btn .mgp-icon { width: 20px; height: 20px; }

.mgp-info-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.mgp-info-table th,
.mgp-info-table td { padding: 9px 0; border-block-end: 1px solid var(--mgp-line); vertical-align: top; }
.mgp-info-table tr:last-child th,
.mgp-info-table tr:last-child td { border-block-end: 0; }
.mgp-info-table th { text-align: start; font-weight: 600; color: var(--mgp-muted); padding-inline-end: 12px; }
.mgp-info-table td { text-align: end; font-weight: 800; unicode-bidi: plaintext; }

.mgp-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.mgp-gallery a { display: block; overflow: hidden; border-radius: 14px; box-shadow: var(--mgp-shadow-soft); }
.mgp-gallery img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .25s; }
.mgp-gallery a:hover img { transform: scale(1.06); }
@media (min-width: 600px) and (max-width: 1000px) {
	.mgp-gallery { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Game landing (pre-game) page ---------- */
.mgp-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(220px, 380px) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 44px);
	align-items: center;
	max-width: 1320px;
	margin-inline: auto;
	padding: clamp(16px, 2.4vw, 32px);
	overflow: hidden;
	isolation: isolate;
	border-radius: 32px;
	background: var(--mgp-surface);
	box-shadow: var(--mgp-shadow-soft);
}
.mgp-hero.is-playing { display: none; }
.mgp-hero__bg {
	position: absolute;
	inset: -40px;
	z-index: -1;
	background-position: center;
	background-size: cover;
	filter: blur(48px) saturate(1.5);
	opacity: .35;
}
.mgp-hero__cover {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: 28px;
	box-shadow: 0 16px 36px rgba(0, 30, 60, .3);
	background: #0b1626;
}
.mgp-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.mgp-hero__cover:hover .mgp-hero__img { transform: scale(1.05); }
.mgp-hero__playicon {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	margin: -44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--mgp-accent);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	transition: transform .2s cubic-bezier(.25, .1, .25, 1.4);
}
.mgp-hero__playicon .mgp-icon { width: 40px; height: 40px; fill: currentColor; margin-inline-start: 4px; }
[dir="rtl"] .mgp-hero__playicon .mgp-icon { margin-inline-start: 0; margin-inline-end: 4px; }
.mgp-hero__cover:hover .mgp-hero__playicon { transform: scale(1.12); }
.mgp-hero__body { min-width: 0; }
.mgp-hero__title {
	margin: 0 0 14px;
	font-size: clamp(2rem, 1.3rem + 3vw, 4.2rem);
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -.02em;
	overflow-wrap: anywhere;
}
.mgp-hero__chips { margin-block: 0 16px; }
.mgp-hero__excerpt { margin: 0 0 22px; max-width: 62ch; font-size: 1.08rem; line-height: 1.6; color: var(--mgp-muted); }
.mgp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.mgp-btn--xl { min-height: 60px; padding: 16px 34px; font-size: 1.15rem; letter-spacing: .02em; text-transform: uppercase; }
.mgp-btn--xl .mgp-icon { fill: currentColor; }
.mgp-btn--xl-icon { width: 60px; height: 60px; border-radius: 18px; }
.mgp-btn--glow { box-shadow: 0 10px 26px color-mix(in srgb, var(--mgp-accent) 45%, transparent); }
.mgp-btn--glow:hover { box-shadow: 0 14px 34px color-mix(in srgb, var(--mgp-accent) 60%, transparent); }

.mgp-game--landing > .mgp-game-layout { margin-block-start: 0; }
.mgp-game--landing > .mgp-area--mgp-landing { max-width: 1320px; margin: 24px auto 0; }

@media (max-width: 700px) {
	.mgp-hero { grid-template-columns: minmax(0, 1fr); border-radius: 24px; text-align: center; }
	.mgp-hero__cover { width: min(100%, 320px); margin-inline: auto; }
	.mgp-hero__chips,
	.mgp-hero__actions { justify-content: center; }
	.mgp-hero__excerpt { margin-inline: auto; }
	.mgp-hero__actions .mgp-btn--primary { flex: 1; }
}

/* ---------- Preloader ---------- */
.mgp-preloader {
	position: absolute;
	inset: 0;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 16px;
	background: #0b1626;
	color: #fff;
	transition: opacity .35s;
}
.mgp-preloader.is-done { opacity: 0; pointer-events: none; }
.mgp-preloader__bg {
	position: absolute;
	inset: -40px;
	background-position: center;
	background-size: cover;
	filter: blur(36px) brightness(.45) saturate(1.3);
}
.mgp-preloader__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: min(100%, 460px);
	max-height: 100%;
	overflow-y: auto;
	scrollbar-width: none;
	margin: auto;
	text-align: center;
}
.mgp-preloader__head { display: flex; align-items: center; gap: 12px; max-width: 100%; }
.mgp-preloader__thumb { flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 14px; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
.mgp-preloader__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mgp-preloader__title { font-size: 1.25rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgp-preloader__ad { max-width: 100%; overflow: hidden; }
.mgp-preloader__ad .mgp-widget { margin: 0; }
.mgp-progress {
	position: relative;
	width: 100%;
	height: 14px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(255, 255, 255, .18);
}
.mgp-progress__bar {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--mgp-accent), var(--mgp-accent2));
	box-shadow: 0 0 16px color-mix(in srgb, var(--mgp-accent) 70%, transparent);
}
[dir="rtl"] .mgp-progress__bar { background: linear-gradient(270deg, var(--mgp-accent), var(--mgp-accent2)); }
.mgp-preloader__status { display: flex; justify-content: space-between; width: 100%; font-size: .9rem; font-weight: 700; opacity: .9; }
.mgp-preloader.is-ready .mgp-preloader__label { visibility: hidden; }
.mgp-preloader__note { margin: 0; font-size: .9rem; opacity: .85; }
.mgp-preloader__play { animation: mgp-pulse 1.4s ease-in-out infinite; }
@keyframes mgp-pulse { 50% { transform: scale(1.05); } }
.mgp-player__stage.is-preloading { width: 100%; aspect-ratio: auto; height: auto; min-height: min(500px, 88vh); }

/* ---------- Lightbox ---------- */
.mgp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 64px;
	background: rgba(4, 12, 24, .92);
	opacity: 0;
	transition: opacity .2s;
}
.mgp-lightbox.is-open { opacity: 1; }
.mgp-lightbox__fig { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; max-width: 100%; max-height: 100%; }
.mgp-lightbox__fig img { max-width: 100%; max-height: calc(100vh - 140px); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.mgp-lightbox__fig figcaption { color: #fff; font-weight: 700; opacity: .8; }
.mgp-lightbox__close,
.mgp-lightbox__nav {
	position: absolute;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 2rem;
	line-height: 1;
}
.mgp-lightbox__close:hover,
.mgp-lightbox__nav:hover { background: rgba(255, 255, 255, .28); }
.mgp-lightbox__close { inset-block-start: 12px; inset-inline-end: 12px; }
.mgp-lightbox__nav { inset-block-start: 50%; margin-block-start: -24px; }
.mgp-lightbox__nav::before { content: ""; width: 14px; height: 14px; border: solid currentColor; border-width: 0 3px 3px 0; }
.mgp-lightbox__nav--prev { inset-inline-start: 10px; }
.mgp-lightbox__nav--prev::before { transform: translateX(3px) rotate(135deg); }
.mgp-lightbox__nav--next { inset-inline-end: 10px; }
.mgp-lightbox__nav--next::before { transform: translateX(-3px) rotate(-45deg); }
[dir="rtl"] .mgp-lightbox__nav--prev::before { transform: translateX(-3px) rotate(-45deg); }
[dir="rtl"] .mgp-lightbox__nav--next::before { transform: translateX(3px) rotate(135deg); }
.mgp-lightbox.is-single .mgp-lightbox__nav { display: none; }
@media (max-width: 600px) {
	.mgp-lightbox { padding: 56px 8px; }
	.mgp-lightbox__nav { inset-block-start: auto; inset-block-end: 12px; margin: 0; }
}

/* ---------- MyArcadePlugin player integration (body.mgp-player-integrated) ---------- */
/* The emulator draws itself (its toolbar sits inside the game window, see EJS_TOPBAR_OVERLAY);
   the theme only removes its own dark frame around it and never restyles the emulator. */
.mgp-player__screen--natural { background: none; }
.mgp-player-integrated .mgp-player__screen { position: relative; z-index: 1; background: none; }
/* Pseudo-fullscreen (iPhone): no stacking context, so the game covers the sticky header. */
.mgp-player-integrated .mgp-player__screen:has(.is-pseudo-fs) { z-index: auto; }
/* The plugin's dark page panel around the game (the "black frame"). */
html body.mgp-player-integrated .mgp-player .page { background: transparent !important; padding: 0 !important; }
/* Duplicates of the theme's own buttons (the elements stay in the DOM for the engine). */
html body.mgp-player-integrated .mgp-player__stage .ejs-bottom-fs,
html body.mgp-player-integrated .mgp-player__stage .divbutton-fullscreen,
html body.mgp-player-integrated .mgp-player__stage .button-cast { display: none !important; }

/* Every game type (EmulatorJS, JS-DOS, Flash, iframe, HTML5): no card around the game; the
   name and buttons sit in a white bar attached under the game window. */
.mgp-player-integrated .mgp-player { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.mgp-player-integrated .mgp-player .mgp-player__bar {
	margin-block-start: 12px;
	padding: 10px 14px;
	background: var(--mgp-surface);
	border-radius: calc(var(--mgp-radius) * 1.25);
	box-shadow: var(--mgp-shadow);
}
/* Attached to the game window (main.js sets --mgp-game-w to its width): one card, the bar
   tucked under the game's bottom edge. */
.mgp-player-integrated .mgp-player .mgp-player__bar.is-attached {
	position: relative;
	z-index: 0;
	width: var(--mgp-game-w);
	max-width: 100%;
	margin: -14px auto 0;
	padding-block-start: 24px;
	border-radius: 0 0 calc(var(--mgp-radius) * 1.25) calc(var(--mgp-radius) * 1.25);
}
/* Game grid: the height left over in the game block's last row is shared by the bar's padding. */
.mgp-gg.is-grid .mgp-player-integrated .mgp-player__bar.is-attached,
.mgp-player-integrated .mgp-gg.is-grid .mgp-player .mgp-player__bar.is-attached {
	padding-block: calc(24px + var(--gg-slack, 0px) / 2) calc(10px + var(--gg-slack, 0px) / 2);
}
.mgp-player-integrated .mgp-player .mgp-player__controls {
	margin-block-start: 12px;
	border: 0;
	border-radius: 18px;
	background: var(--mgp-surface);
	box-shadow: var(--mgp-shadow-soft);
}
/* Scaled games (iframe / HTML5): rounded top corners like the emulator window. */
.mgp-player-integrated .mgp-player__stage--fit:not(:fullscreen):not(.is-pseudo-fs) { border-radius: 18px 18px 0 0; }
/* Phones: the emulator is 100vw wide there, so the game area spans the screen edge to edge. */
@media (max-width: 500px) {
	.mgp-player-integrated .mgp-player--natural .mgp-player__screen { margin-inline: calc(50% - 50vw); }
}
/* Rounded top corners of the game window (the bar under it closes the card at the bottom); no
   engine shadow beside the game (it showed as a grey strip along both sides). */
@media (min-width: 761px) {
	html body.mgp-player-integrated:not(.fullscreen-mode) .mgp-player #gameWrap { border-radius: 18px 18px 0 0 !important; overflow: hidden !important; box-shadow: none !important; border: 0 !important; }
	html body.mgp-player-integrated .mgp-player .mabp-ovl-host:not(:fullscreen) { border-radius: 18px 18px 0 0; overflow: hidden; }
}
/* The keyboard controls panel is as wide as the game window. */
.mgp-player-integrated .mgp-player.has-game-w .mgp-player__controls { width: var(--mgp-game-w); max-width: 100%; margin-inline: auto; }

/* Like button */
.mgp-like { gap: 6px; min-width: 44px; padding-inline: 12px; }
.mgp-like .mgp-icon { width: 22px; height: 22px; transition: transform .2s cubic-bezier(.25, .1, .25, 1.4); }
.mgp-like.is-liked { color: var(--mgp-accent2); }
.mgp-like.is-liked .mgp-icon { fill: currentColor; transform: scale(1.12); }
.mgp-like__count:empty { display: none; }
.mgp-btn--xl-like { min-height: 60px; padding-inline: 20px; border-radius: 18px; font-size: 1.05rem; }

/* Phones: long mosaics keep only their first tiles (option "On phones show at most"). */
@media (max-width: 600px) {
	.mgp-tile--desktop-only { display: none !important; }
}

/* Drag-to-scroll rows with the mouse. */
@media (pointer: fine) {
	.mgp-scroller__track { cursor: grab; }
	.mgp-scroller__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
	.mgp-scroller__track.is-dragging .mgp-tile { pointer-events: none; }
}

/* Keyboard controls panel (the plugin's .ejs-kb-legend, moved here by main.js). */
.mgp-player__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	padding: 12px 14px;
	border-block-start: 1px solid var(--mgp-line);
}
.mgp-player__controls-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mgp-muted);
}
.mgp-player__controls-title .mgp-icon { width: 22px; height: 22px; }
.mgp-player__controls .ejs-kb-legend {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}
.mgp-player__controls .ejs-kb-sysbox,
.mgp-player__controls .ejs-kb-sys,
.mgp-player__controls .ejs-kb-act {
	padding: 8px 12px;
	background: var(--mgp-soft);
	border: 0;
	border-radius: 12px;
}
.mgp-player__controls .ejs-kb-sysbox-solo { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
.mgp-player__controls .ejs-kb-act { flex: 1 1 auto; gap: 6px 18px; }
.mgp-player__controls .ejs-kb-pair { gap: 8px; }
.mgp-player__controls .ejs-kb-key,
.mgp-player__controls .ejs-kb-dpad {
	min-width: 26px;
	height: 28px;
	padding: 0 8px;
	font-family: var(--mgp-font);
	font-size: .85rem;
	font-weight: 800;
	line-height: 26px;
	color: var(--mgp-text);
	background: var(--mgp-surface);
	border: 1px solid var(--mgp-line);
	border-bottom-width: 3px;
	border-radius: 8px;
	box-shadow: none;
	text-shadow: none;
}
.mgp-player__controls .ejs-kb-dpad { width: 28px; padding: 0; justify-content: center; }
.mgp-player__controls .ejs-kb-lbl { font-family: var(--mgp-font); font-size: .9rem; font-weight: 600; color: var(--mgp-text); }
@media (hover: none) and (pointer: coarse) {
	.mgp-player__controls { display: none !important; }
}

/* Cast to TV in the player bar (shown by the plugin's game-cast.js when casting is possible). */
.mgp-cast.is-casting { background: var(--mgp-accent); color: #fff; }

/* Install-app dialog */
.mgp-app .mgp-overlay__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: min(92vw, 360px);
	margin: 14vh auto 0;
	padding: 26px 22px 22px;
	background: var(--mgp-surface);
	border-radius: 24px;
	box-shadow: var(--mgp-shadow);
	text-align: center;
}
.mgp-app .mgp-overlay__close { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; }
.mgp-app__icon { width: 72px; height: 72px; border-radius: 18px; box-shadow: var(--mgp-shadow-soft); }
.mgp-app__title { margin: 4px 0 0; font-size: 1.2rem; font-weight: 800; }
.mgp-app__text { margin: 0; color: var(--mgp-muted); font-weight: 600; line-height: 1.5; }

/* QR share dialog */
.mgp-qr .mgp-overlay__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: min(92vw, 340px);
	margin: 12vh auto 0;
	padding: 22px;
	background: var(--mgp-surface);
	border-radius: 24px;
	box-shadow: var(--mgp-shadow);
	text-align: center;
}
.mgp-qr .mgp-overlay__close { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; }
.mgp-qr__title { margin: 4px 0 0; padding-inline: 40px; font-size: 1.1rem; font-weight: 800; }
.mgp-qr__img { width: 240px; height: 240px; padding: 10px; background: #fff; border-radius: 16px; }
.mgp-qr__url { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; color: var(--mgp-muted); font-size: .85rem; }

/* ---------- Hover video preview on tiles ---------- */
.mgp-tile__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	background: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s;
}
/* 16:9 player cropped to fill the tile. */
.mgp-tile__video--frame {
	inset: 0 auto;
	left: 50%;
	width: 178%;
	transform: translateX(-50%);
}
.mgp-tile.is-previewing .mgp-tile__video { opacity: 1; }

/* "All N games" card at the end of a row. */
.mgp-tile--all {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px;
	color: var(--mgp-text);
	font-weight: 800;
	text-align: center;
	background: var(--mgp-surface);
	box-shadow: var(--mgp-shadow-soft);
}
.mgp-tile--all:hover { color: var(--mgp-accent); }
.mgp-tile--all__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--mgp-accent);
	color: #fff;
	transition: transform .2s;
}
.mgp-tile--all:hover .mgp-tile--all__icon { transform: scale(1.1); }
.mgp-tile--all__label { font-size: 1rem; line-height: 1.2; }
.mgp-tile--s.mgp-tile--all { gap: 4px; padding: 6px; }
.mgp-tile--s .mgp-tile--all__icon { width: 34px; height: 34px; }
.mgp-tile--s .mgp-tile--all__label { font-size: .75rem; }
.mgp-tile__badge,
.mgp-tile__title { z-index: 1; }

.mgp-video { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 14px; background: #000; }
.mgp-video iframe,
.mgp-video__media { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.mgp-video__facade { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; }
.mgp-video__facade img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .2s; }
.mgp-video__facade:hover img { opacity: 1; }
.mgp-video__play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	margin: -30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--mgp-accent);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
	transition: transform .2s;
}
.mgp-video__play .mgp-icon { width: 28px; height: 28px; fill: currentColor; }
.mgp-video__facade:hover .mgp-video__play { transform: scale(1.1); }

.mgp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 20px; }
.mgp-chips a {
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--mgp-soft);
	color: var(--mgp-text);
	font-weight: 700;
	font-size: .9rem;
}
.mgp-chips a:hover { background: var(--mgp-accent); color: #fff; text-decoration: none; }

/* ---------- Content typography ---------- */
.mgp-content { line-height: 1.7; overflow-wrap: break-word; }
.mgp-content > :first-child { margin-block-start: 0; }
.mgp-content > :last-child { margin-block-end: 0; }
.mgp-content h1,
.mgp-content h2,
.mgp-content h3 { line-height: 1.25; font-weight: 800; }
.mgp-content h2 { font-size: 1.5rem; }
.mgp-content h3 { font-size: 1.2rem; margin-block-start: 1.6em; }
.mgp-content img { border-radius: 12px; }
.mgp-content blockquote { margin-inline: 0; padding-inline-start: 16px; border-inline-start: 4px solid var(--mgp-accent); color: var(--mgp-muted); }
.mgp-content table { width: 100%; border-collapse: collapse; }
.mgp-content th,
.mgp-content td { padding: 8px; border-block-end: 1px solid var(--mgp-line); text-align: start; }
.mgp-content .alignleft { float: inline-start; margin-inline-end: 1em; }
.mgp-content .alignright { float: inline-end; margin-inline-start: 1em; }
.mgp-content .aligncenter { display: block; margin-inline: auto; }

.mgp-article__title { margin-block: 0 8px; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); font-weight: 900; }
.mgp-article__meta { color: var(--mgp-muted); font-size: .9rem; margin-block-end: 18px; }
.mgp-article__image img { width: 100%; border-radius: 16px; }
.mgp-article__image { margin: 0 0 20px; }

.mgp-page { max-width: 1100px; margin-inline: auto; }
.mgp-page .mgp-card { margin-block: 0 24px; }
@media (min-width: 1000px) {
	.mgp-page.has-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; max-width: 1440px; }
}
.mgp-sidebar .mgp-widget { margin-block-end: 20px; }
.mgp-sidebar .mgp-widget:not(:has(> .mgp-section)) { background: var(--mgp-surface); border-radius: 20px; padding: 18px; box-shadow: var(--mgp-shadow-soft); }
.mgp-widget__title { margin: 0 0 12px; font-size: 1.2rem; font-weight: 800; }

.mgp-home-content,
.mgp-archive-desc { margin-block-start: 36px; }
.mgp-fullwidth-content > * { margin-block: 20px; }

.mgp-empty { text-align: center; }
.mgp-404 { text-align: center; }
.mgp-404__code { margin: 0; font-size: 6rem; font-weight: 900; line-height: 1; color: var(--mgp-accent); }
.mgp-404 .mgp-searchform { max-width: 520px; margin: 20px auto 0; }

/* ---------- Comments ---------- */
.mgp-comments__list { list-style: none; margin: 0 0 20px; padding: 0; }
.mgp-comments__list .children { list-style: none; padding-inline-start: 24px; }
.mgp-comments__list .comment-body { padding: 14px 0; border-block-end: 1px solid var(--mgp-line); }
.mgp-comments__list .avatar { border-radius: 50%; vertical-align: middle; margin-inline-end: 8px; }
.mgp-comments textarea,
.mgp-comments input[type="text"],
.mgp-comments input[type="email"],
.mgp-comments input[type="url"] { width: 100%; padding: 10px 12px; border: 2px solid var(--mgp-input-border); border-radius: 12px; font: inherit; }
.mgp-comments .submit { padding: 12px 22px; border: 0; border-radius: 999px; background: var(--mgp-accent); color: #fff; font-weight: 800; }

/* ---------- Footer ---------- */
.mgp-footer {
	margin-block-start: 40px;
	padding: 32px var(--mgp-pad) 22px;
	background: var(--mgp-surface);
	border-start-start-radius: 28px;
	border-start-end-radius: 28px;
	box-shadow: var(--mgp-shadow-soft);
}
.mgp-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; max-width: 1300px; margin: 0 auto 24px; }
.mgp-footer__col .mgp-widget { margin-block-end: 16px; }
.mgp-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; max-width: 1300px; margin-inline: auto; padding-block-start: 16px; border-block-start: 1px solid var(--mgp-line); color: var(--mgp-muted); font-size: .9rem; }
.mgp-footer__menu { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.mgp-footer__menu a { color: var(--mgp-text); font-weight: 700; }

.mgp-totop {
	position: fixed;
	inset-block-end: 18px;
	inset-inline-end: 18px;
	z-index: 90;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 16px;
	background: var(--mgp-surface);
	color: var(--mgp-text);
	box-shadow: var(--mgp-shadow);
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
	.mgp-header__box { flex: 1; }
	.mgp-iconbar { flex: 1; justify-content: space-around; }
	.mgp-iconbar__list { display: contents; }
	.mgp-header__extras { display: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
	html:root {
		--mgp-pad: 10px;
		--mgp-gap: 10px;
	}
	.mgp-main { padding-block-end: 24px; }
	.mgp-header { inset-block-start: 8px; margin-block: 8px 14px; }
	body.admin-bar .mgp-header { inset-block-start: 8px; }
	.mgp-header__box { min-height: 58px; min-width: 0; max-width: 100%; gap: 2px; padding: 6px 8px; border-radius: 18px; }
	.mgp-header__logo { flex: 0 1 auto; min-width: 0; max-width: 34vw; overflow: hidden; padding-inline: 4px 8px; }
	.mgp-header__logo img,
	.mgp-header__logo .custom-logo { max-height: 36px; max-width: 100%; }
	.mgp-header__sitename { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 1.1rem; }
	.mgp-iconbar,
	.mgp-iconbar__list { min-width: 0; gap: 0; justify-content: space-between; }
	.mgp-iconbar__list > li { display: flex; flex: 0 1 38px; min-width: 28px; justify-content: center; }
	.mgp-iconbar__list > li > a { width: 100%; }
	.mgp-iconbar a,
	.mgp-iconbar__btn { flex: 0 1 38px; min-width: 28px; width: 38px; height: 42px; border-radius: 12px; }
	.mgp-iconbar .mgp-icon { width: 24px; height: 24px; }
	/* The logo already links home: room for the other icons. */
	.mgp-iconbar__item--home { display: none !important; }

	/* Three equal columns; medium & large tiles become 2x2. */
	.mgp-mosaic {
		--mgp-cell: calc((100vw - var(--mgp-pad) * 2 - var(--mgp-gap) * 2) / 3);
		grid-template-columns: repeat(3, var(--mgp-cell));
	}
	.mgp-mosaic .mgp-tile--l { grid-column: span 2; grid-row: span 2; }
	/* "Large icons only": two big icons per row. */
	.mgp-mosaic.mgp-mosaic--uniform-m,
	.mgp-mosaic.mgp-mosaic--uniform-l {
		--mgp-cell: calc((100vw - var(--mgp-pad) * 2 - var(--mgp-gap)) / 2);
		grid-template-columns: repeat(2, var(--mgp-cell));
	}
	.mgp-mosaic--uniform-m .mgp-tile--m,
	.mgp-mosaic--uniform-l .mgp-tile--l { grid-column: span 1; grid-row: span 1; }
	.mgp-tile { border-radius: 14px; }
	.mgp-tile__title { font-size: .72rem; padding: 20px 6px 6px; }

	.mgp-scroller__track--s { --mgp-w: 23vw; }
	.mgp-scroller__track--m { --mgp-w: 29vw; }
	.mgp-scroller__track--l { --mgp-w: 58vw; }

	.mgp-section { margin-block: 20px; }
	.mgp-band { padding-block: 18px 12px; }
	.mgp-section__head { margin-block-end: 6px; }
	.mgp-section__more-text { display: none; }
	.mgp-section__more { padding: 6px; }

	.mgp-cat--card { --mgp-cell: 76px; width: 190px; }

	.mgp-card { padding: 18px; border-radius: 18px; }

	.mgp-player { border-radius: 16px; margin-inline: calc(var(--mgp-pad) * -1); border-radius: 0; }
	.mgp-player__stage--fit { width: 100%; max-height: 70vh; }
	.mgp-player__title { font-size: 1rem; }


	.mgp-footer__bottom { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- 1.6.0: games display switch (category / search / list pages) ---------- */
.mgp-viewswitch {
	display: inline-flex;
	gap: 2px;
	margin-inline-start: auto;
	padding: 4px;
	border-radius: 999px;
	background: var(--mgp-surface);
	box-shadow: var(--mgp-shadow-soft);
}
.mgp-viewswitch__btn {
	display: grid;
	place-items: center;
	width: 42px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--mgp-muted);
	cursor: pointer;
	transition: background-color .15s, color .15s;
}
.mgp-viewswitch__btn .mgp-icon { width: 22px; height: 22px; }
.mgp-viewswitch__btn:hover { background: var(--mgp-soft); color: var(--mgp-text); }
html:not(.mgp-view-cards) .mgp-viewswitch__btn[data-mgp-view="mosaic"],
html.mgp-view-cards .mgp-viewswitch__btn[data-mgp-view="cards"] { background: var(--mgp-accent); color: #fff; }

/* Equal squares with the game name under the picture. */
html.mgp-view-cards .mgp-archive-grid .mgp-mosaic {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	grid-auto-rows: auto;
	grid-auto-flow: row;
	justify-content: stretch;
}
html.mgp-view-cards .mgp-archive-grid .mgp-mosaic > .mgp-tile {
	grid-column: auto !important;
	grid-row: auto !important;
	display: flex;
	flex-direction: column;
	aspect-ratio: auto;
	border-radius: var(--mgp-radius);
	background: var(--mgp-surface);
}
html.mgp-view-cards .mgp-archive-grid .mgp-mosaic > .mgp-tile--extra { display: none !important; }
html.mgp-view-cards .mgp-archive-grid .mgp-tile__img { flex: none; height: auto; aspect-ratio: 1 / 1; }
html.mgp-view-cards .mgp-archive-grid .mgp-tile__video { inset: 0 0 auto; height: auto; aspect-ratio: 1 / 1; }
html.mgp-view-cards .mgp-archive-grid .mgp-tile__title {
	position: static;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	min-height: calc(2.5em + 18px);
	padding: 9px 10px;
	background: var(--mgp-surface);
	color: var(--mgp-text);
	font-size: .92rem;
	line-height: 1.25;
	text-shadow: none;
	opacity: 1;
	transform: none;
}
html.mgp-view-cards .mgp-archive-grid .mgp-tile__title { display: -webkit-box; }
@media (min-width: 1400px) {
	html.mgp-view-cards .mgp-archive-grid .mgp-mosaic { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
}
@media (max-width: 600px) {
	html.mgp-view-cards .mgp-archive-grid .mgp-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
	html.mgp-view-cards .mgp-archive-grid .mgp-tile__title { padding: 6px; font-size: .78rem; min-height: calc(2.5em + 12px); }
	.mgp-viewswitch__btn { width: 36px; height: 32px; }
}

/* ---------- 1.6.0: "For you" – clear the list ---------- */
.mgp-section__clear {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	padding: 7px 14px 7px 10px;
	border: 0;
	border-radius: 999px;
	background: var(--mgp-more-hover);
	color: var(--mgp-text);
	font: inherit;
	font-size: .95rem;
	font-weight: 800;
	cursor: pointer;
	transition: background-color .15s, color .15s;
}
.mgp-section__clear .mgp-icon { width: 18px; height: 18px; }
.mgp-section__clear:hover { background: var(--mgp-surface); color: #e5484d; }
@media (max-width: 600px) { .mgp-section__clear { padding: 6px; } }

/* ---------- 1.6.0: "Play online together" (MyArcadePlugin netplay lobby) ---------- */
.mgp-lobby__intro { margin: -4px 0 12px; color: var(--mgp-muted); font-weight: 600; }
.mgp-lobby:has(> .mabp-lp[hidden]) { display: none; }
.mgp-lobby .mabp-lp {
	/* The plugin sets these inline (style attribute): !important lets the theme colors win. */
	--lp-btn: var(--mgp-accent) !important;
	--lp-radius: var(--mgp-radius) !important;
	--lp-card: var(--mgp-surface);
	--lp-line: transparent;
	--lp-text: var(--mgp-text);
	--lp-dim: var(--mgp-muted);
	--lp-link: var(--mgp-accent);
	margin: 0;
	font: inherit;
}
.mgp-lobby .mabp-lp .mabp-lp-head { margin-block: -6px 8px; }
.mgp-lobby .mabp-lp .mabp-lp-list { gap: var(--mgp-gap); }
.mgp-lobby .mabp-lp .mabp-lp-item { padding: 10px; border: 0; box-shadow: var(--mgp-shadow-soft); }
.mgp-lobby .mabp-lp .mabp-lp-item.here { box-shadow: 0 0 0 2px var(--lp-accent), var(--mgp-shadow-soft); }
.mgp-lobby .mabp-lp .mabp-lp-name { font-size: 1rem; }
.mgp-lobby .mabp-lp .mabp-lp-game { font-weight: 700; font-size: .9rem; }
.mgp-lobby .mabp-lp .mabp-lp-join { border-radius: 999px; padding: 9px 18px; font: 800 .9rem/1 var(--mgp-font); }
.mgp-lobby .mabp-lp .mabp-lp-watch { border-radius: 999px; border-color: var(--mgp-line); }
.mgp-lobby .mabp-lp .mabp-lp-empty {
	margin: 0 !important;
	padding: 16px 18px;
	border-radius: var(--mgp-radius);
	background: var(--mgp-surface);
	box-shadow: var(--mgp-shadow-soft);
	color: var(--mgp-muted);
	font-size: .95rem;
	font-weight: 600;
	opacity: 1;
}