/*
 * SyboGame 2026 design layer.
 * These rules adapt the updated Astro prototype to CloudArcade's PHP markup.
 */

:root {
	--sybo-bg: #000000;
	--sybo-bg-soft: #190424;
	--sybo-card: #1a1b28;
	--sybo-card-2: #3c1550;
	--sybo-text: #ffffff;
	--sybo-muted: rgba(255, 255, 255, .68);
	--sybo-border: rgba(255, 255, 255, .16);
	--sybo-cyan: #3fedfd;
	--sybo-pink: #086cec;
	--sybo-lime: #fca705;
	--sybo-amber: #fca705;
	--sybo-gradient: linear-gradient(135deg, #086cec, #3fedfd);
	--sybo-gradient-cool: linear-gradient(135deg, #086cec, #3fedfd);
	--sybo-shadow: 0 5px 15px rgba(0, 0, 0, .28);
	--sybo-glow: none;
	--sybo-header-height: 64px;
	--sybo-sidebar-width: 240px;
}

.sybo-body {
	background: #000000;
	font-family: "Space Grotesk", system-ui, sans-serif;
}

html[dir="rtl"] .sybo-layout { direction: ltr; }
html[dir="rtl"] .sybo-main,
html[dir="rtl"] .sybo-sidebar { direction: rtl; }
html[dir="rtl"] .sybo-sidebar {
	border-left: 1px solid rgba(255, 255, 255, .05);
	border-right: 0;
}
html[dir="rtl"] .sybo-nav-item.is-active::before {
	border-radius: 3px 0 0 3px;
	left: auto;
	right: -.8rem;
}
html[dir="rtl"] .sybo-search > span {
	left: auto;
	right: 1rem;
}
html[dir="rtl"] .sybo-search input {
	padding-left: 1.1rem;
	padding-right: 3rem;
	text-align: right;
}
html[dir="rtl"] .sybo-autocomplete { text-align: right; }

.sybo-header {
	background: #1a1b28;
	border-bottom: 1px solid rgba(255, 255, 255, .05);
	gap: 1rem;
	height: 64px;
	padding: 0 1rem;
}

.sybo-icon-button,
.sybo-header-icon {
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 13px;
	color: #fff;
	height: 42px;
	width: 42px;
}

.sybo-icon-button { background: #321044; }
.sybo-header-icon {
	align-items: center;
	background: #373952;
	display: flex;
	font-size: 1.45rem;
	justify-content: center;
	text-decoration: none;
}
.sybo-header-icon svg {
	fill: none;
	height: 20px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
	width: 20px;
}
.sybo-header-icon--friends {
	gap: .55rem;
	padding: 0 .9rem;
	width: auto;
}
.sybo-header-icon--friends span,
.sybo-header-icon--my-games span {
	font-size: .88rem;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}
.sybo-header-icon--my-games {
	gap: .55rem;
	padding: 0 .9rem;
	width: auto;
}
.sybo-header-icon--friends[aria-expanded="true"] { background: #484b69; }

.sybo-icon-button:hover { background: #3c1550; }
.sybo-header-icon:hover { background: #44465f; }

.sybo-brand { gap: .45rem; }
.sybo-brand__mascot { display: block; height: 42px; object-fit: contain; width: 42px; }
.sybo-brand__wordmark { display: block; height: 29px; object-fit: contain; width: 118px; }

.sybo-search {
	flex: 0 1 480px;
	max-width: 480px;
	width: min(480px, 34vw);
}
.sybo-search input {
	background: #373952;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: .88rem;
	height: 42px;
	padding-inline: 1rem 3rem;
}
.sybo-search input:focus {
	background: #373952;
	border-color: rgba(63, 237, 253, .7);
	box-shadow: 0 0 0 2px rgba(63, 237, 253, .08);
}
.sybo-search > span:not(.sybo-search__icon) { display: none; }
.sybo-search > .sybo-search__icon {
	align-items: center;
	background: transparent;
	border: 0;
	color: #c8cad9;
	cursor: pointer;
	display: flex;
	font-size: 0;
	height: 24px;
	inset-inline: auto 12px;
	justify-content: center;
	left: auto;
	line-height: 1;
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
}
.sybo-search__icon svg {
	fill: none;
	height: 20px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
	width: 20px;
}
html[dir="rtl"] .sybo-search > .sybo-search__icon {
	left: 12px;
	right: auto;
}
html[dir="rtl"] .sybo-search input {
	padding-left: 3rem;
	padding-right: 1rem;
}

.sybo-autocomplete {
	background: #1a1b28;
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 18px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
	left: 0;
	max-height: min(70vh, 560px);
	opacity: 0;
	overflow-x: hidden;
	overflow-y: auto;
	padding: .55rem;
	position: absolute;
	right: 0;
	scrollbar-color: #747892 transparent;
	scrollbar-width: thin;
	top: calc(100% + 9px);
	transform: translateY(-6px);
	transition: opacity 180ms ease-out, transform 180ms ease-out;
	z-index: 140;
}
.sybo-autocomplete[hidden] { display: none; }
.sybo-autocomplete.is-open {
	opacity: 1;
	transform: translateY(0);
}
.sybo-autocomplete__group-label {
	color: #9297ad;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .08em;
	padding: .45rem .7rem .3rem;
	text-transform: uppercase;
}
.sybo-autocomplete__result {
	align-items: center;
	border-radius: 11px;
	color: #fff;
	display: grid;
	font-size: .9rem;
	font-weight: 700;
	gap: .75rem;
	min-height: 48px;
	padding: .38rem .65rem;
	text-decoration: none;
	transition: background-color 160ms ease-out;
}
.sybo-autocomplete__result:hover,
.sybo-autocomplete__result.is-active {
	background: #373952;
	color: #fff;
}
.sybo-autocomplete__result--taxonomy {
	grid-template-columns: 28px minmax(0, 1fr) auto;
}
.sybo-autocomplete__result--game {
	grid-template-columns: 64px minmax(0, 1fr);
}
.sybo-autocomplete__result--game img {
	aspect-ratio: 512 / 340;
	background: #0d0e16;
	border-radius: 8px;
	height: auto;
	object-fit: contain;
	width: 64px;
}
.sybo-autocomplete__title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sybo-autocomplete__title mark {
	background: transparent;
	color: #aeb3ff;
	font-weight: 900;
}
.sybo-autocomplete__icon {
	align-items: center;
	color: #aeb3ff;
	display: inline-flex;
	height: 26px;
	justify-content: center;
	width: 26px;
}
.sybo-autocomplete__icon svg {
	fill: none;
	height: 23px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.9;
	width: 23px;
}
.sybo-autocomplete__count {
	color: #9297ad;
	font-size: .82rem;
	font-variant-numeric: tabular-nums;
}
.sybo-autocomplete__result--search-all {
	border-radius: 0 0 12px 12px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	grid-template-columns: 28px minmax(0, 1fr) auto;
	margin-top: .35rem;
	min-height: 52px;
}
.sybo-autocomplete__chevron {
	color: #fff;
	font-size: 1.65rem;
	font-weight: 400;
	line-height: 1;
}
.sybo-autocomplete__state {
	align-items: center;
	color: #c2c5d4;
	display: flex;
	font-size: .88rem;
	gap: .65rem;
	justify-content: center;
	min-height: 74px;
	padding: 1rem;
	text-align: center;
}
.sybo-autocomplete__state--empty {
	color: #9297ad;
	min-height: 62px;
}
.sybo-autocomplete__spinner {
	animation: sybo-autocomplete-spin .7s linear infinite;
	border: 2px solid rgba(255, 255, 255, .22);
	border-radius: 50%;
	border-top-color: #fff;
	height: 18px;
	width: 18px;
}
@keyframes sybo-autocomplete-spin {
	to { transform: rotate(360deg); }
}

.sybo-header__actions { gap: .5rem; }
.sybo-header-icon--notifications { position: relative; }
.sybo-header-icon--notifications > b {
	align-items: center;
	background: #086cec;
	border: 2px solid #190424;
	border-radius: 999px;
	display: flex;
	font-size: .58rem;
	height: 18px;
	justify-content: center;
	position: absolute;
	right: -3px;
	top: -4px;
	width: 18px;
}
.sybo-app-button {
	background: #086cec;
	border-radius: 999px;
	color: #fff;
	display: none;
	font-size: .8rem;
	font-weight: 800;
	min-height: 38px;
	padding: .55rem .9rem;
	text-decoration: none;
}
.sybo-login-button {
	background: #fff;
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	color: #29053a;
	cursor: pointer;
	font-family: inherit;
	min-height: 42px;
	padding: .65rem 1.35rem;
}
.sybo-user-link {
	align-items: center;
	background: #27293b;
	border: 2px solid #6d43ff;
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgba(0,0,0,.35);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 44px;
	height: 44px;
	justify-content: center;
	min-height: 44px;
	overflow: hidden;
	padding: 2px;
	transition: border-color 180ms ease-out, background-color 180ms ease-out, transform 180ms ease-out;
	width: 44px;
}
.sybo-user-link:hover {
	background: #373952;
	border-color: #9279ff;
	transform: scale(1.04);
}
.sybo-user-link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.sybo-user-link img {
	background: #373952;
	border-radius: 50%;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}
.sybo-user-link span { display: none; }

.sybo-sidebar {
	background: #000000;
	border-right: 1px solid rgba(255, 255, 255, .05);
}
.sybo-sidebar__nav { gap: .22rem; padding: .75rem .8rem; }
.sybo-nav-item {
	border-radius: 12px;
	color: #fff;
	min-height: 46px;
	padding: .65rem .75rem;
}
.sybo-nav-item:hover { background: #151622; }
.sybo-nav-item.is-active { background: transparent; color: #8d78ff; }
.sybo-nav-item.is-active::before {
	background: #6843ff;
	border-radius: 0 3px 3px 0;
	height: 36px;
	left: -.8rem;
	top: 5px;
}
.sybo-nav-item > span,
.sybo-contact-button > span { align-items: center; display: flex; justify-content: center; }
.sybo-nav-item > span svg,
.sybo-contact-button > span svg {
	fill: none;
	height: 19px;
	stroke: #9390ff;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
	width: 19px;
}
.sybo-nav-item.is-active > span svg { stroke: #8d78ff; }
.sybo-nav-divider { border-color: rgba(255, 255, 255, .08); }
.sybo-nav-label { color: rgba(255, 255, 255, .55); }
.sybo-contact-button {
	background: #fff;
	color: #000;
	min-height: 40px;
	padding: .55rem .8rem;
}
.sybo-contact-button > span svg { stroke: #000; }
.sybo-contact-button:hover {
	background: #f0f0f0;
	color: #000;
}
.sybo-nav-divider--footer {
	margin: .65rem 0 .35rem;
}
.sybo-tags-link {
	color: #fff;
	font-weight: 700;
}
.sybo-tags-link > span svg {
	fill: #8d78ff;
	stroke: #8d78ff;
}
.sybo-sidebar__links {
	padding: 0 .55rem;
}
.sybo-prototype-links {
	display: grid;
	gap: .42rem;
	list-style: none;
	margin: .15rem 0 1.15rem;
	padding: 0;
}
.sybo-prototype-links li { margin: 0; }
.sybo-prototype-links a {
	color: #a9adc8;
	font-size: .9rem;
	line-height: 1.2;
	text-decoration: none;
}
.sybo-prototype-links a:hover { color: #fff; }
.sybo-sidebar-socials {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(4, 38px);
	margin: 0 0 2.4rem;
}
.sybo-sidebar-socials a {
	align-items: center;
	background: transparent;
	border: 2px solid #393c5a;
	border-radius: 50%;
	color: #f5f5fb;
	display: flex;
	height: 38px;
	justify-content: center;
	text-decoration: none;
	transition:
		background 180ms ease-out,
		border-color 180ms ease-out,
		transform 180ms ease-out;
	width: 38px;
}
.sybo-sidebar-socials a:hover {
	background: #34364f;
	border-color: #777b9e;
	transform: translateY(-1px);
}
.sybo-sidebar-socials svg {
	fill: none;
	height: 18px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
	width: 18px;
}
.sybo-sidebar-socials a[data-network="facebook"] svg,
.sybo-sidebar-socials a[data-network="twitter"] svg,
.sybo-sidebar-socials a[data-network="tiktok"] svg { fill: currentColor; stroke: none; }
.sybo-sidebar-socials a[data-network="twitter"] { color: #fff; }
.sybo-sidebar-socials b {
	font-size: .9rem;
	letter-spacing: -.04em;
}
.sybo-sidebar__copyright {
	color: #6f748f;
	font-size: .7rem;
	margin: 0;
	padding: .7rem .55rem 1.2rem;
}

@media (min-width: 768px) {
	body.sybo-sidebar-collapsed .sybo-sidebar {
		border-right: 0;
		flex-basis: 0;
		opacity: 0;
		overflow: hidden;
		pointer-events: none;
		transform: translateX(-100%);
		visibility: hidden;
		width: 0;
	}
	body.sybo-sidebar-collapsed #sybo-menu-toggle span:first-child,
	body.sybo-sidebar-collapsed #sybo-menu-toggle span:last-child {
		transform: translateX(-3px);
		width: 14px;
	}
}

.sybo-main { background: #000000; }
.sybo-page {
	max-width: none;
	padding: 1.5rem 1.5rem 3.5rem;
}
.sybo-reading-page {
	margin: 0;
	max-width: none;
	padding: 32px 28px 56px;
}
.sybo-reading-page .sybo-article {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}
.sybo-reading-page .sybo-article > h1 {
	color: #fff;
	font-family: Sora, sans-serif;
	font-size: clamp(26px, 2vw, 32px);
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.15;
	margin: 0 0 20px;
}
.sybo-reading-panel {
	background: #1a1c2b;
	border: 1px solid rgba(255, 255, 255, .04);
	border-radius: 18px;
	box-shadow: none;
	min-height: 240px;
	padding: clamp(24px, 2.2vw, 38px);
}
.sybo-reading-panel .sybo-rich-text {
	color: #c5cae0;
	font-size: 15px;
	line-height: 1.8;
	max-width: none;
}
.sybo-reading-panel .sybo-rich-text > :first-child { margin-top: 0; }
.sybo-reading-panel .sybo-rich-text > :last-child { margin-bottom: 0; }
.sybo-reading-panel .sybo-rich-text h2,
.sybo-reading-panel .sybo-rich-text h3,
.sybo-reading-panel .sybo-rich-text h4 {
	color: #fff;
	font-family: Sora, sans-serif;
	font-weight: 800;
	line-height: 1.3;
	margin: 28px 0 14px;
}
.sybo-reading-panel .sybo-rich-text h2 { font-size: 21px; }
.sybo-reading-panel .sybo-rich-text h3 { font-size: 18px; }
.sybo-reading-panel .sybo-rich-text p,
.sybo-reading-panel .sybo-rich-text ul,
.sybo-reading-panel .sybo-rich-text ol { margin: 0 0 18px; }
.sybo-reading-panel .sybo-rich-text ul,
.sybo-reading-panel .sybo-rich-text ol { padding-inline-start: 24px; }
.sybo-reading-panel .sybo-rich-text a {
	color: #8d72ff;
	font-weight: 700;
}
.sybo-reading-panel .sybo-rich-text a[href="/"],
.sybo-reading-panel .sybo-rich-text a[href="/"]:visited,
.sybo-reading-panel .sybo-rich-text a[href="/"]:hover,
.sybo-reading-panel .sybo-rich-text a[href="/"]:focus-visible,
.sybo-reading-panel .sybo-rich-text a[href^="mailto:"],
.sybo-reading-panel .sybo-rich-text a[href^="mailto:"]:visited,
.sybo-reading-panel .sybo-rich-text a[href^="mailto:"]:hover,
.sybo-reading-panel .sybo-rich-text a[href^="mailto:"]:focus-visible {
	background-image: none !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
	color: #fff !important;
	text-decoration: none !important;
}

/* Full public 404 experience, also used for direct visits to /login. */
.sybo-not-found-page {
	padding: 24px 24px 64px;
}
.sybo-not-found {
	align-items: center;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	max-width: 980px;
	padding: 0 12px;
	text-align: center;
}
.sybo-not-found .sybo-visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}
.sybo-not-found .sybo-not-found__hero {
	display: flex;
	flex-direction: column;
	margin: 4px 0 24px;
	position: relative;
}
.sybo-not-found__hero span {
	color: #f8f8fc;
	font-family: Sora, sans-serif;
	font-size: clamp(92px, 11vw, 170px);
	font-weight: 800;
	letter-spacing: -.085em;
	line-height: .78;
	position: relative;
	text-shadow: 3px 0 #1ef0d0, -3px 0 #ff6d61;
}
.sybo-not-found__hero span::after {
	background: #000;
	content: "";
	height: 20%;
	left: 1%;
	position: absolute;
	right: -1%;
	top: 34%;
	transform: translateX(-2%);
}
.sybo-not-found__hero span:nth-child(2)::after {
	left: 5%;
	right: 2%;
	top: 40%;
	transform: translateX(2%);
}
.sybo-not-found .sybo-not-found__message {
	color: #fff;
	font-size: 23px;
	line-height: 1.45;
	margin: 0;
}
.sybo-not-found__message strong,
.sybo-not-found__message span { display: block; font-weight: 500; }
.sybo-not-found__home {
	align-items: center;
	background: #7043ff;
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-weight: 800;
	gap: 9px;
	justify-content: center;
	margin-top: 52px;
	min-height: 50px;
	text-decoration: none;
	width: min(300px, 100%);
}
.sybo-not-found__home:hover { background: #8058ff; color: #fff; }
.sybo-not-found__home svg { fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 20px; }
.sybo-not-found__games {
	margin-top: 58px;
	width: 100%;
}
.sybo-not-found__games h2 {
	color: #fff;
	font-family: Sora, sans-serif;
	font-size: 18px;
	font-weight: 800;
	margin: 0 0 44px;
}
.sybo-not-found .sybo-not-found__game-grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0 auto;
	max-width: 740px;
}
.sybo-not-found__game-grid .sybo-game-card {
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	min-width: 0;
}
.sybo-not-found__game-grid .sybo-game-card__content,
.sybo-not-found__game-grid .sybo-game-card__shade { display: none; }
.sybo-not-found__actions {
	display: grid;
	gap: 42px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 48px auto 0;
	max-width: 760px;
	width: 100%;
}
.sybo-not-found__actions a {
	align-items: center;
	background: #fff;
	border: 1px solid #fff;
	border-radius: 999px;
	color: #171827;
	display: flex;
	font-weight: 800;
	gap: 10px;
	justify-content: center;
	min-height: 50px;
	padding: 10px 20px;
	text-decoration: none;
}
.sybo-not-found__actions a:hover { background: #ececf4; color: #171827; }
@media (max-width: 767px) {
	.sybo-not-found-page { padding: 26px 12px 92px; }
	.sybo-not-found { padding: 0; }
	.sybo-not-found__hero { margin-bottom: 20px; }
	.sybo-not-found__hero span { font-size: clamp(68px, 24vw, 105px); }
	.sybo-not-found__message { font-size: 17px; }
	.sybo-not-found__home { margin-top: 32px; }
	.sybo-not-found__games { margin-top: 42px; }
	.sybo-not-found__games h2 { font-size: 16px; margin-bottom: 28px; }
	.sybo-not-found__game-grid { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sybo-not-found__actions { gap: 10px; grid-template-columns: 1fr; margin-top: 32px; }
}
@media (max-width: 767px) {
	.sybo-reading-page { padding: 20px 14px 42px; }
	.sybo-reading-page .sybo-article > h1 { font-size: 25px; margin-bottom: 14px; }
	.sybo-reading-panel { border-radius: 14px; padding: 20px 16px; }
	.sybo-reading-panel .sybo-rich-text { font-size: 14px; line-height: 1.7; }
}
.sybo-home { gap: 20px; padding-top: 12px; }

.sybo-desktop-continue__heading {
	align-items: center;
	display: flex;
	gap: 1rem;
	margin-bottom: 8px;
	min-height: 36px;
}
.sybo-desktop-continue__heading h2 {
	color: #fff;
	font-family: "Nunito", sans-serif;
	font-size: 30px;
	font-weight: 900;
	letter-spacing: -.6px;
	line-height: 1.1;
	margin: 0;
}
.sybo-desktop-continue__heading button {
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, .76);
	cursor: pointer;
	font-size: .8rem;
	font-weight: 800;
}
.sybo-desktop-continue__row {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 8px 0 4px 6px;
	scrollbar-width: none;
}
.sybo-desktop-continue__row::-webkit-scrollbar { display: none; }
.sybo-desktop-continue .sybo-game-card {
	aspect-ratio: 1;
	border-radius: 14px;
	flex: 0 0 86px;
	width: 86px;
}
.sybo-desktop-continue .sybo-game-card__content,
.sybo-desktop-continue .sybo-game-card__shade { display: none; }

.sybo-category-rail {
	min-height: 120px;
	overflow: hidden;
	position: relative;
}
.sybo-category-rail__track {
	display: grid;
	gap: .65rem;
	grid-auto-columns: 168px;
	grid-auto-flow: column;
	overflow-x: auto;
	padding: 12px 0;
	scroll-behavior: smooth;
	scrollbar-width: none;
	width: 100%;
}
.sybo-category-rail__track::-webkit-scrollbar { display: none; }
.sybo-category-rail a {
	background: #321044;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 14px;
	display: grid;
	height: 96px;
	padding: .9rem;
	text-decoration: none;
	transition: .15s ease;
}
.sybo-category-rail a:hover { background: #3c1550; border-color: #fca705; }
.sybo-category-rail span { align-self: start; font-size: 1.75rem; justify-self: center; }
.sybo-category-rail strong { align-self: end; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sybo-category-rail__arrow {
	background: #321044;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	font-size: 1.8rem;
	height: 48px;
	position: absolute;
	right: 8px;
	top: 36px;
	width: 48px;
	z-index: 5;
}

.sybo-section { position: relative; }
.sybo-section__heading { margin-bottom: 8px; min-height: 32px; }
.sybo-section__heading h1,
.sybo-section__heading h2 {
	color: #fff;
	font-family: "Nunito", sans-serif;
	font-size: 30px;
	font-weight: 900;
	letter-spacing: -.6px;
	line-height: 1.1;
	margin: 0;
}
.sybo-top-games .sybo-section__heading { margin-bottom: 12px; }
.sybo-top-games .sybo-section__heading h1 { font-size: 30px; line-height: 1.1; }
.sybo-section__actions > a { color: #fff; }
.sybo-section__actions > a::after { content: "›"; margin-left: .3rem; }
.sybo-game-row__viewport {
	min-width: 0;
	overflow: hidden;
	position: relative;
}
.sybo-row-arrow {
	align-items: center;
	backdrop-filter: blur(8px);
	background: #000000;
	border: 1px solid #ffffff;
	border-radius: 18px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .38);
	color: #fff;
	display: flex;
	height: 56px;
	justify-content: center;
	opacity: 0;
	padding: 0;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: opacity 200ms ease-out, background 200ms ease-out, transform 200ms ease-out;
	width: 56px;
	z-index: 12;
}
.sybo-row-arrow svg {
	fill: none;
	height: 26px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 26px;
}
.sybo-row-arrow--previous { left: 8px; }
.sybo-row-arrow--next { right: 8px; }
.sybo-game-row__viewport:hover .sybo-row-arrow:not([hidden]),
.sybo-game-row__viewport:focus-within .sybo-row-arrow:not([hidden]) {
	opacity: 1;
	pointer-events: auto;
}
.sybo-row-arrow:hover,
.sybo-row-arrow:focus-visible {
	background: #000000;
	border-color: #ffffff;
	color: #ffffff;
	outline: 0;
}
.sybo-row-arrow:active { transform: translateY(-50%) scale(.94); }
.sybo-row-arrow[hidden] { display: none; }

.sybo-top-games__grid {
	display: grid;
	flex: 0 0 1812px;
	gap: 8px;
	grid-template-columns: 512px 252px 252px 512px 252px;
	grid-template-rows: repeat(2, 142px);
	height: 292px;
	min-width: 1812px;
	overflow: visible;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	width: 1812px;
}
.sybo-top-games { min-width: 0; padding-bottom: 4px; }
.sybo-top-games__viewport { min-width: 0; overflow: hidden; position: relative; }
.sybo-top-games__track {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 8px 0 0 6px;
	overscroll-behavior-inline: contain;
	scroll-behavior: smooth;
	scroll-snap-type: none;
	scrollbar-width: none;
	touch-action: pan-x;
}
.sybo-top-games__track::-webkit-scrollbar { display: none; }
.sybo-top-games__arrow {
	align-items: center;
	backdrop-filter: blur(8px);
	background: #000000;
	border: 1px solid #ffffff;
	border-radius: 18px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .38);
	color: #fff;
	cursor: pointer;
	display: flex;
	height: 56px;
	justify-content: center;
	line-height: 1;
	opacity: 0;
	padding: 0;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: opacity 200ms ease-out, background 200ms ease-out, transform 200ms ease-out;
	width: 56px;
	z-index: 12;
}
.sybo-top-games__arrow svg {
	fill: none;
	height: 26px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 26px;
}
.sybo-top-games__arrow--previous { left: 8px; }
.sybo-top-games__arrow--next { right: 8px; }
.sybo-top-games__viewport:hover .sybo-top-games__arrow:not([hidden]),
.sybo-top-games__viewport:focus-within .sybo-top-games__arrow:not([hidden]) {
	opacity: 1;
	pointer-events: auto;
}
.sybo-top-games__arrow:hover,
.sybo-top-games__arrow:focus-visible {
	background: #000000;
	border-color: #ffffff;
	color: #ffffff;
	outline: 0;
}
.sybo-top-games__arrow:active { transform: translateY(-50%) scale(.94); }
.sybo-top-games__arrow[hidden] { display: none; }
@media (hover: none), (pointer: coarse) {
	.sybo-row-arrow,
	.sybo-top-games__arrow,
	.sybo-category-discovery__arrow { display: none !important; }
}
.sybo-top-game { min-height: 0; min-width: 0; }
.sybo-top-game--1 { grid-column: 1; grid-row: 1 / span 2; }
.sybo-top-game--2 { grid-column: 2; grid-row: 1; }
.sybo-top-game--3 { grid-column: 2; grid-row: 2; }
.sybo-top-game--4 { grid-column: 3; grid-row: 1; }
.sybo-top-game--5 { grid-column: 3; grid-row: 2; }
.sybo-top-game--6 { grid-column: 4; grid-row: 1 / span 2; }
.sybo-top-game--7 { grid-column: 5; grid-row: 1; }
.sybo-top-game--8 { grid-column: 5; grid-row: 2; }
.sybo-top-games__grid--2 { grid-template-columns: 252px 512px 252px 252px 512px; }
.sybo-top-games__grid--2 .sybo-top-game--1 { grid-column: 1; grid-row: 1; }
.sybo-top-games__grid--2 .sybo-top-game--2 { grid-column: 1; grid-row: 2; }
.sybo-top-games__grid--2 .sybo-top-game--3 { grid-column: 2; grid-row: 1 / span 2; }
.sybo-top-games__grid--2 .sybo-top-game--4 { grid-column: 3; grid-row: 1; }
.sybo-top-games__grid--2 .sybo-top-game--5 { grid-column: 3; grid-row: 2; }
.sybo-top-games__grid--2 .sybo-top-game--6 { grid-column: 4; grid-row: 1; }
.sybo-top-games__grid--2 .sybo-top-game--7 { grid-column: 4; grid-row: 2; }
.sybo-top-games__grid--2 .sybo-top-game--8 { grid-column: 5; grid-row: 1 / span 2; }
.sybo-top-game .sybo-game-card { height: 100%; width: 100%; }

.sybo-game-row {
	gap: 8px;
	grid-auto-columns: 252px;
	padding: 8px 0 4px 6px;
	scroll-snap-type: none;
}
.sybo-originals-section .sybo-game-row { grid-auto-columns: 180px; }
.sybo-originals-section .sybo-game-card--portrait { aspect-ratio: 3 / 4; }

.sybo-category-discovery {
	display: grid;
	gap: 8px;
	grid-template-columns: 424px minmax(0, 1fr);
	min-width: 0;
}
.sybo-category-discovery__intro {
	background: #1a1b28;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	height: 216px;
	justify-content: center;
	min-width: 0;
	padding: 20px;
}
.sybo-category-discovery__intro h2 {
	font-family: Sora, sans-serif;
	font-size: 24px;
	letter-spacing: -.035em;
	line-height: 1.3;
	margin: 0;
	max-width: 300px;
}
.sybo-category-discovery__intro p {
	color: rgba(255, 255, 255, .68);
	display: -webkit-box;
	font-size: 14px;
	line-height: 1.5;
	margin: 14px 0 0;
	max-width: 370px;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}
.sybo-category-discovery__learn-more {
	background: transparent;
	border: 0;
	color: #9d7bff;
	cursor: pointer;
	font-size: 14px;
	font-weight: 800;
	margin-top: 12px;
	padding: 0;
	text-align: left;
	text-decoration: none;
	width: fit-content;
}
.sybo-category-discovery__learn-more:hover,
.sybo-category-discovery__learn-more:focus-visible {
	color: #fff;
	outline: 0;
	text-decoration: underline;
}
.sybo-category-discovery__carousel {
	min-width: 0;
	overflow: hidden;
	position: relative;
}
.sybo-category-discovery__track {
	display: grid;
	gap: 8px;
	grid-auto-columns: 172px;
	grid-auto-flow: column;
	grid-template-rows: repeat(2, 102px);
	height: 216px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	touch-action: pan-x;
	width: 100%;
}
.sybo-category-discovery__track::-webkit-scrollbar { display: none; }
.sybo-category-discovery__card {
	align-items: flex-start;
	background: #1a1b28;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 12px;
	color: #fff;
	display: flex;
	flex-direction: column;
	font-size: 15px;
	font-weight: 800;
	gap: 14px;
	justify-content: center;
	min-width: 0;
	padding: 16px;
	scroll-snap-align: start;
	text-decoration: none;
	transition: background 180ms ease-out, border-color 180ms ease-out;
}
.sybo-category-discovery__card:hover,
.sybo-category-discovery__card:focus-visible {
	background: #252738;
	border-color: rgba(157, 123, 255, .8);
	outline: 0;
}
.sybo-category-discovery__icon {
	color: #9ca5ff;
	display: block;
	height: 28px;
	width: 28px;
}
.sybo-category-discovery__icon svg {
	fill: none;
	height: 100%;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.9;
	width: 100%;
}
.sybo-category-discovery__card strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}
.sybo-category-discovery__arrow {
	align-items: center;
	backdrop-filter: blur(8px);
	background: #000000;
	border: 1px solid #ffffff;
	border-radius: 18px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .38);
	color: #fff;
	cursor: pointer;
	display: flex;
	height: 56px;
	justify-content: center;
	line-height: 1;
	opacity: 0;
	padding: 0;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: opacity 200ms ease-out, background 200ms ease-out, transform 200ms ease-out;
	width: 56px;
	z-index: 12;
}
.sybo-category-discovery__arrow svg {
	fill: none;
	height: 26px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 26px;
}
.sybo-category-discovery__arrow--previous { left: 8px; }
.sybo-category-discovery__arrow--next { right: 8px; }
.sybo-category-discovery__carousel:hover .sybo-category-discovery__arrow:not([hidden]),
.sybo-category-discovery__carousel:focus-within .sybo-category-discovery__arrow:not([hidden]) {
	opacity: 1;
	pointer-events: auto;
}
.sybo-category-discovery__arrow:hover,
.sybo-category-discovery__arrow:focus-visible {
	background: #000000;
	border-color: #ffffff;
	color: #ffffff;
	outline: 0;
}
.sybo-category-discovery__arrow:active { transform: translateY(-50%) scale(.94); }
.sybo-category-discovery__arrow[hidden] { display: none; }

.sybo-game-card {
	background: #321044;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 10px;
	box-shadow: none;
	overflow: visible;
}
.sybo-game-card__link {
	border-radius: inherit;
	overflow: hidden;
	position: relative;
	width: 100%;
}
.sybo-game-card:hover {
	border-color: rgba(255, 255, 255, .38);
	box-shadow: none;
	transform: none;
}
.sybo-game-card__image {
	filter: brightness(1);
	opacity: 1;
	transform: none;
	transition: filter 200ms ease-out, opacity 200ms ease-out;
}
.sybo-game-card__preview-video {
	background: #080912;
	height: 100%;
	inset: 0;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 200ms ease-out;
	width: 100%;
	z-index: 1;
}
.sybo-game-card.is-previewing .sybo-game-card__image { opacity: 0; }
.sybo-game-card.is-previewing .sybo-game-card__preview-video { opacity: 1; }
.sybo-game-row .sybo-game-card__image,
.sybo-game-grid .sybo-game-card__image {
	height: 100%;
	inset: 0;
	object-fit: cover;
	object-position: center;
	position: absolute;
	transform: none !important;
	width: 100%;
	z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
	.sybo-game-card:hover .sybo-game-card__image {
		filter: brightness(1.08) saturate(1.04);
		transform: none !important;
	}
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
	.sybo-game-card::after {
		border: 2px solid #fff;
		border-radius: inherit;
		content: "";
		inset: 0;
		opacity: 0;
		pointer-events: none;
		position: absolute;
		transition: opacity 150ms ease;
		z-index: 4;
	}
	.sybo-game-card:hover::after { opacity: 1; }
}
.sybo-game-card--portrait { aspect-ratio: 3 / 4; }
.sybo-game-card--square { aspect-ratio: 1; }
.sybo-game-card--landscape { aspect-ratio: 16 / 9; }
.sybo-game-row .sybo-game-card--landscape,
.sybo-game-grid .sybo-game-card--landscape { aspect-ratio: 512 / 340; }
.sybo-category-all-card {
	background: #1a1b28;
	border-color: rgba(255, 255, 255, .16);
}
.sybo-category-all-card:hover,
.sybo-category-all-card:focus-within {
	background: #232536;
	border-color: rgba(156, 165, 255, .9);
}
.sybo-category-all-card__link {
	align-items: flex-start;
	color: #fff;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: space-between;
	padding: 18px;
	width: 100%;
}
.sybo-category-all-card__link strong {
	font-family: Sora, sans-serif;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.3;
	max-width: 78%;
}
.sybo-category-all-card__link svg {
	align-self: flex-end;
	fill: none;
	height: 38px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
	width: 38px;
}
.sybo-game-card__shade {
	background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, .78));
	opacity: 0;
	transition: opacity .15s ease;
	z-index: 2;
}
.sybo-game-card__content {
	opacity: 0;
	padding: .65rem;
	transition: none;
	z-index: 3;
}
.sybo-game-card__meta { display: none; }
.sybo-game-card__title { font-size: .86rem; }
.sybo-badge {
	align-items: center;
	background: #fff;
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: 7px;
	box-shadow: 0 3px 9px rgba(0, 0, 0, .28);
	color: #6740ff;
	display: inline-flex;
	font-size: 0;
	height: 22px;
	justify-content: center;
	left: 4px;
	line-height: 1;
	margin: 0;
	max-width: none;
	min-height: 22px;
	overflow: hidden;
	padding: 0;
	pointer-events: none;
	top: 4px;
	width: 22px;
}
.sybo-game-card > .sybo-badge { z-index: 5; }
.sybo-badge svg {
	fill: none;
	height: 14px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 14px;
}
.sybo-badge--top { background: #ffe36c; border-color: #ffe36c; color: #493d00; }
.sybo-badge--hot { background: #ff5b32; border-color: #ff5b32; color: #fff; }
.sybo-badge--new { background: #3fedfd; border-color: #3fedfd; color: #041f4d; }
.sybo-badge--trending { background: #a762ff; border-color: #a762ff; color: #fff; }
.sybo-badge--multiplayer,
.sybo-badge--updated { background: #1678ee; border-color: #1678ee; color: #fff; }
.sybo-badge--editors-pick { background: #fff; border-color: #fff; color: #086cec; }
.sybo-badge--originals { background: #fff; border-color: #fff; color: #6842ff; }
.sybo-game-card .sybo-badge {
	inset-inline-end: auto;
	inset-inline-start: auto;
	left: -5px;
	position: absolute;
	right: auto;
	top: -6px;
	z-index: 5;
}
.sybo-info-block,
.sybo-content-card,
.sybo-aside-card,
.sybo-article,
.sybo-post-card {
	background: #321044;
	border-color: rgba(255, 255, 255, .16);
	box-shadow: none;
}
.sybo-info-block {
	grid-template-columns: 1.4fr 1fr;
	padding: 2rem;
}
.sybo-info-block h2 { font-size: 2rem; }
.sybo-info-block p { color: rgba(255, 255, 255, .68); line-height: 1.65; }
.sybo-learn-more {
	background: transparent;
	border: 0;
	color: #3fedfd;
	cursor: pointer;
	font-weight: 800;
	margin-top: 1rem;
	padding: 0;
}
.sybo-info-categories {
	display: grid;
	gap: .65rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sybo-info-categories a {
	align-items: center;
	aspect-ratio: 1;
	background: #29053a;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: .45rem;
	text-align: center;
	text-decoration: none;
}
.sybo-info-categories a:hover { border-color: #3fedfd; }
.sybo-info-categories span { font-size: 1.55rem; }
.sybo-info-categories strong { font-size: .58rem; margin-top: .35rem; text-transform: uppercase; }
.sybo-info-block__stats strong { background: #29053a; color: #3fedfd; }
.sybo-eyebrow { background: #3b0a52; }
.sybo-button--gradient {
	background: #fff;
	color: #29053a;
}
.sybo-button--secondary {
	background: #321044;
	border-color: rgba(255, 255, 255, .2);
}

.sybo-archive-hero {
	padding: 1rem 1rem 1.6rem;
	text-align: left;
}
.sybo-breadcrumb {
	color: #086cec;
	font-size: .82rem;
	font-weight: 700;
}
.sybo-breadcrumb a { color: #086cec; text-decoration: none; }
.sybo-breadcrumb span { margin: 0 .3rem; }
.sybo-breadcrumb strong { color: #086cec; }
.sybo-archive-hero h1 {
	font-family: Sora, sans-serif;
	font-size: clamp(2.4rem, 4.2vw, 4.3rem);
	letter-spacing: -.065em;
	margin: 1rem 0 .25rem;
}
.sybo-archive-hero > p {
	color: rgba(255, 255, 255, .76);
	font-size: 1rem;
	font-weight: 400;
	margin: 0;
	max-width: 800px;
}
.sybo-archive-hero > small { color: rgba(255, 255, 255, .5); display: block; margin-top: .5rem; }
.sybo-archive-toolbar {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding: 0 1rem 1rem;
}
.sybo-archive-toolbar > strong {
	color: rgba(255, 255, 255, .62);
	font-size: .85rem;
}
.sybo-archive-toolbar label {
	align-items: center;
	display: flex;
	gap: .6rem;
}
.sybo-archive-toolbar label > span {
	color: rgba(255, 255, 255, .62);
	font-size: .78rem;
	font-weight: 700;
}
.sybo-archive-sort {
	appearance: none;
	background: #321044;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
	font: 700 .8rem "Space Grotesk", sans-serif;
	min-height: 40px;
	padding: .55rem 2rem .55rem .8rem;
}
.sybo-game-grid {
	gap: 1rem;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	padding: 0 1rem;
}
.sybo-archive-description {
	background: #321044;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 14px;
	color: rgba(255, 255, 255, .76);
	line-height: 1.65;
	margin: 4.5rem 1rem 1rem;
	max-width: none;
	padding: 2rem;
}
.sybo-pagination__link { background: #321044; }
.sybo-pagination__link:hover,
.sybo-pagination__item.is-current .sybo-pagination__link {
	background: #086cec;
	color: #fff;
}

.sybo-dialog {
	background: #321044;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 18px;
	color: #fff;
	max-height: 78vh;
	max-width: 560px;
	padding: 0;
	width: calc(100vw - 28px);
}
.sybo-dialog::backdrop { background: rgba(10, 1, 16, .8); backdrop-filter: blur(5px); }
.sybo-dialog header {
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	display: flex;
	justify-content: space-between;
	padding: 1.2rem 1.4rem;
}
.sybo-dialog h2,
.sybo-dialog h3 { font-family: Sora, sans-serif; }
.sybo-dialog h2 { font-size: 1.3rem; margin: 0; }
.sybo-dialog h3 { font-size: 1.05rem; margin: 1.5rem 0 .4rem; }
.sybo-dialog header button { background: transparent; border: 0; color: #fff; cursor: pointer; font-size: 1rem; }
.sybo-dialog article { color: rgba(255, 255, 255, .7); line-height: 1.65; max-height: calc(78vh - 70px); overflow-y: auto; padding: 1.3rem 1.5rem 1.7rem; }
.sybo-dialog-open { overflow: hidden; }
.sybo-dialog--learn-more {
	background: #202131;
	border-color: rgba(255, 255, 255, .08);
	border-radius: 14px;
	height: min(574px, calc(100dvh - 48px));
	max-height: none;
	max-width: 600px;
	overflow: hidden;
	width: calc(100vw - 32px);
}
.sybo-dialog--learn-more::backdrop {
	backdrop-filter: none;
	background: rgba(0, 0, 0, .78);
}
.sybo-dialog--learn-more header {
	background: #202131;
	border-bottom: 0;
	min-height: 72px;
	padding: 20px 56px 12px 24px;
	position: relative;
}
.sybo-dialog--learn-more header h2 {
	font-size: 22px;
	line-height: 1.3;
}
.sybo-dialog--learn-more header button {
	align-items: center;
	display: flex;
	font-size: 25px;
	height: 44px;
	justify-content: center;
	position: absolute;
	right: 8px;
	top: 6px;
	width: 44px;
}
.sybo-dialog--learn-more header button:hover,
.sybo-dialog--learn-more header button:focus-visible {
	background: rgba(255, 255, 255, .08);
	border-radius: 10px;
	outline: 0;
}
.sybo-dialog--learn-more article {
	color: #c7cae0;
	font-size: 14px;
	line-height: 1.55;
	max-height: calc(100% - 72px);
	padding: 2px 24px 28px;
	scrollbar-color: #aaaec4 transparent;
	scrollbar-width: thin;
}
.sybo-dialog--learn-more article::-webkit-scrollbar { width: 7px; }
.sybo-dialog--learn-more article::-webkit-scrollbar-track { background: transparent; }
.sybo-dialog--learn-more article::-webkit-scrollbar-thumb {
	background: #aaaec4;
	border-radius: 999px;
}
.sybo-dialog--learn-more article > p { margin: 0 0 14px; }
.sybo-dialog--learn-more article section { margin-top: 18px; }
.sybo-dialog--learn-more article h3 {
	color: #fff;
	font-size: 19px;
	line-height: 1.3;
	margin: 0 0 12px;
}
.sybo-dialog--learn-more article section p { margin: 0; }
.sybo-dialog--learn-more article ul {
	margin: 12px 0 0;
	padding-left: 20px;
}
.sybo-dialog--learn-more article a { color: #9d7bff; }
.sybo-learn-more-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-top: 10px;
}
.sybo-learn-more-categories a {
	font-weight: 700;
	text-underline-offset: 3px;
}

.sybo-tags-index {
	scroll-margin-top: calc(var(--sybo-header-height) + 1rem);
}
.sybo-tags-index > .sybo-section__heading { margin-bottom: 1rem; }
.sybo-tags-grid {
	display: grid;
	gap: .55rem;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}
.sybo-tags-grid a {
	align-items: center;
	background: #321044;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 8px;
	display: flex;
	gap: .5rem;
	justify-content: space-between;
	min-width: 0;
	padding: .65rem .8rem;
	text-decoration: none;
}
.sybo-tags-grid strong { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sybo-tags-grid span { color: #3fedfd; font-size: .78rem; font-weight: 800; }

.sybo-game-layout { grid-template-columns: minmax(0, 1fr) 300px; }
.sybo-player-card {
	background: #101521;
	border-color: rgba(255, 255, 255, .16);
	border-radius: 12px;
	box-shadow: none;
	padding: .65rem;
}
.sybo-progress-notice {
	align-items: center;
	background: #4a090d;
	border-radius: 16px;
	display: flex;
	gap: .55rem;
	justify-content: center;
	margin-bottom: .6rem;
	min-height: 46px;
	padding: .5rem .9rem;
}
.sybo-progress-notice strong { font-size: .8rem; }
.sybo-progress-notice button,
.sybo-progress-notice a {
	background: #3b0a52;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	font-size: .76rem;
	font-weight: 700;
	padding: .45rem .8rem;
	text-decoration: none;
}
.sybo-progress-notice a { background: #fff; color: #29053a; }
.sybo-game-frame { background: #101521; }
.sybo-player-bar {
	background: #3b0a52;
	border-radius: 0 0 8px 8px;
	padding: .7rem .8rem;
}
.sybo-player-bar > div:first-child {
	align-items: center;
	display: grid;
	gap: .1rem .6rem;
	grid-template-columns: 34px minmax(0, 1fr);
}
.sybo-player-bar__thumb {
	border-radius: 8px;
	grid-row: 1 / span 3;
	height: 34px;
	object-fit: cover;
	width: 34px;
}
.sybo-player-bar h1 { font-size: .9rem; }
.sybo-player-bar .sybo-eyebrow,
.sybo-player-bar p { display: none; }
.sybo-game-actions button,
.sybo-game-actions a {
	background: transparent;
	border: 0;
	border-radius: 8px;
}
.sybo-game-actions button:hover,
.sybo-game-actions a:hover { background: #321044; color: #fff; }
.sybo-game-aside .widget,
.sybo-aside-card { background: #321044; }
.sybo-content-card { border-radius: 14px; }
.sybo-chip-list a { background: #3b0a52; border-color: rgba(255, 255, 255, .12); color: #fff; }
.sybo-chip-list a:hover { background: #086cec; color: #fff; }
.sybo-report-form { display: grid; gap: .7rem; padding: 1.2rem 1.5rem 1.5rem; }
.sybo-report-form > p { color: rgba(255, 255, 255, .68); margin: 0 0 .3rem; }
.sybo-report-form > label {
	background: rgba(255, 255, 255, .06);
	border-radius: 10px;
	cursor: pointer;
	font-size: .88rem;
	padding: .8rem;
}
.sybo-report-form > .sybo-button { border: 0; justify-content: center; margin-top: .4rem; }

.sybo-footer {
	border-color: rgba(255, 255, 255, .08);
}
.sybo-footer__brand p,
.sybo-footer__bottom { color: rgba(255, 255, 255, .55); }
.widget { background: #321044; border-color: rgba(255, 255, 255, .12); }

.sybo-visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.sybo-panel-backdrop {
	background: rgba(10, 1, 16, .76);
	backdrop-filter: blur(5px);
	inset: var(--sybo-header-height) 0 0;
	position: fixed;
	z-index: 105;
}
.sybo-panel-backdrop[hidden],
.sybo-side-panel[hidden] { display: none; }

.sybo-account-backdrop {
	background: rgba(0, 0, 0, .72);
	inset: var(--sybo-header-height) 0 0;
	opacity: 0;
	position: fixed;
	transition: opacity 220ms ease-out;
	z-index: 112;
}
.sybo-account-backdrop.is-open { opacity: 1; }
.sybo-account-backdrop[hidden],
.sybo-account-drawer[hidden] { display: none; }
.sybo-account-drawer {
	background: #1a1b28;
	border-left: 1px solid rgba(255, 255, 255, .1);
	bottom: 0;
	box-shadow: -22px 0 54px rgba(0, 0, 0, .48);
	color: #fff;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: fixed;
	right: 0;
	top: var(--sybo-header-height);
	transform: translateX(102%);
	transition: transform 220ms ease-out;
	width: min(410px, 100vw);
	z-index: 116;
}
.sybo-account-drawer.is-open { transform: translateX(0); }
.sybo-account-drawer svg {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}
.sybo-account-drawer__top {
	align-items: center;
	display: flex;
	flex: 0 0 52px;
	justify-content: flex-end;
	padding: .35rem .8rem 0;
	position: relative;
}
.sybo-account-settings-back,
.sybo-account-settings-title {
	display: none;
}
.sybo-account-settings-back {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 12px;
	color: #fff;
	cursor: pointer;
	height: 42px;
	justify-content: center;
	width: 42px;
}
.sybo-account-settings-back:hover,
.sybo-account-settings-back:focus-visible { background: #2b2d40; }
.sybo-account-settings-back svg { height: 27px; width: 27px; }
.sybo-account-settings-title {
	font: 900 .95rem "Nunito", sans-serif;
	left: 50%;
	position: absolute;
	top: calc(50% + .15rem);
	transform: translate(-50%, -50%);
	white-space: nowrap;
}
.sybo-account-drawer.is-account-settings-view .sybo-account-drawer__top {
	justify-content: space-between;
}
.sybo-account-drawer.is-account-settings-view .sybo-account-settings-back,
.sybo-account-drawer.is-account-settings-view .sybo-account-settings-title {
	display: flex;
}
.sybo-account-close {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 12px;
	color: #fff;
	cursor: pointer;
	display: flex;
	height: 42px;
	justify-content: center;
	transition: background-color 180ms ease-out;
	width: 42px;
}
.sybo-account-close:hover,
.sybo-account-close:focus-visible { background: #2b2d40; }
.sybo-account-close svg { height: 25px; width: 25px; }
.sybo-account-drawer__scroll {
	flex: 1;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: .2rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
	scrollbar-color: #56596f transparent;
	scrollbar-width: thin;
}
.sybo-account-identity {
	align-items: center;
	display: flex;
	flex-direction: column;
	padding: .2rem 0 1.25rem;
	text-align: center;
}
.sybo-account-identity img {
	background: #373952;
	border: 2px solid #fff;
	border-radius: 50%;
	height: 64px;
	object-fit: cover;
	width: 64px;
}
.sybo-account-identity strong {
	font-family: "Nunito", sans-serif;
	font-size: 1.25rem;
	font-weight: 900;
	line-height: 1.15;
	margin-top: .65rem;
}
.sybo-account-identity span {
	color: #b7bacd;
	font-size: .78rem;
	margin-top: .12rem;
	overflow-wrap: anywhere;
}
.sybo-account-actions {
	display: grid;
	gap: .55rem;
	grid-template-columns: minmax(0, 1fr) 44px 44px;
	margin-bottom: 1.2rem;
}
.sybo-account-actions > a,
.sybo-account-actions > button {
	align-items: center;
	border: 0;
	cursor: pointer;
	display: flex;
	font: 800 .9rem "Space Grotesk", sans-serif;
	justify-content: center;
	min-height: 44px;
	text-decoration: none;
}
.sybo-account-profile-action {
	background: #6d42ff;
	border-radius: 999px;
	color: #fff;
	gap: .55rem;
	transition: background-color 180ms ease-out;
}
.sybo-account-profile-action:hover,
.sybo-account-profile-action:focus-visible { background: #7d56ff; }
.sybo-account-actions > button {
	background: #373952;
	border-radius: 50%;
	color: #fff;
	transition: background-color 180ms ease-out;
}
.sybo-account-actions > button:hover,
.sybo-account-actions > button:focus-visible { background: #484b69; }
.sybo-account-actions svg { height: 19px; width: 19px; }
.sybo-account-menu {
	border-top: 1px solid rgba(255, 255, 255, .1);
	display: grid;
	padding: .85rem 0;
}
.sybo-account-menu > a,
.sybo-account-menu > button,
.sybo-account-contact {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
	display: flex;
	font: 500 .9rem "Space Grotesk", sans-serif;
	gap: .8rem;
	min-height: 42px;
	padding: .55rem .7rem;
	text-align: left;
	text-decoration: none;
	transition: background-color 180ms ease-out;
	width: 100%;
}
.sybo-account-menu > a:hover,
.sybo-account-menu > button:hover,
.sybo-account-contact:hover,
.sybo-account-menu > a:focus-visible,
.sybo-account-menu > button:focus-visible,
.sybo-account-contact:focus-visible { background: #282a3b; }
.sybo-account-menu svg,
.sybo-account-contact svg {
	color: #8c90aa;
	flex: 0 0 19px;
	height: 19px;
	width: 19px;
}
.sybo-account-menu [data-sybo-account-logout] i {
	border: 2px solid rgba(255, 255, 255, .25);
	border-radius: 50%;
	display: none;
	height: 18px;
	margin-left: auto;
	width: 18px;
}
.sybo-account-menu [data-sybo-account-logout].is-loading i {
	animation: sybo-account-spin .8s linear infinite;
	border-top-color: #fff;
	display: block;
}
.sybo-account-logout-message {
	color: #ff9d9d;
	font-size: .76rem;
	line-height: 1.4;
	margin: .1rem .7rem .35rem 2.2rem;
}
@keyframes sybo-account-spin { to { transform: rotate(360deg); } }
.sybo-account-divider {
	background: rgba(255, 255, 255, .1);
	height: 1px;
	margin: .2rem -1.25rem;
}
.sybo-account-contact { margin: .75rem 0; }
.sybo-account-language { margin-top: 1.1rem; position: relative; }
.sybo-account-language > button {
	align-items: center;
	background: #11121c;
	border: 1px solid #4a4d61;
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
	display: flex;
	font: 800 .86rem "Space Grotesk", sans-serif;
	gap: .65rem;
	min-height: 48px;
	padding: .65rem .85rem;
	transition: border-color 180ms ease-out, background-color 180ms ease-out;
}
.sybo-account-language > button:hover,
.sybo-account-language > button:focus-visible { background: #232536; border-color: #6b6f8a; }
.sybo-account-language > button svg { height: 19px; width: 19px; }
.sybo-account-language__chevron { margin-left: auto; transition: transform 180ms ease-out; }
.sybo-account-language > button[aria-expanded="true"] .sybo-account-language__chevron { transform: rotate(180deg); }
.sybo-account-language__list {
	background: #303247;
	border: 1px solid #4f526a;
	border-radius: 10px;
	bottom: calc(100% + .45rem);
	box-shadow: 0 16px 38px rgba(0, 0, 0, .48);
	display: grid;
	left: 0;
	max-height: min(52vh, 420px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: .3rem;
	position: absolute;
	scrollbar-color: #a2a6bd #303247;
	scrollbar-width: thin;
	top: auto;
	width: 180px;
	z-index: 12;
}
.sybo-account-language__list[hidden] { display: none; }
.sybo-account-language__list a {
	border-radius: 7px;
	color: #fff;
	font: 800 .9rem "Space Grotesk", sans-serif;
	min-height: 39px;
	padding: .62rem .7rem;
	text-decoration: none;
}
.sybo-account-language__list a:hover,
.sybo-account-language__list a:focus-visible,
.sybo-account-language__list a[aria-current="true"] { background: #373952; color: #fff; }
.sybo-account-footer-links {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: .45rem;
	margin-top: 1.25rem;
}
.sybo-account-footer-links a {
	color: #9da1bc;
	font-size: .76rem;
	text-decoration: none;
}
.sybo-account-footer-links a:hover,
.sybo-account-footer-links a:focus-visible { color: #fff; text-decoration: underline; }
.sybo-account-socials {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: 1.5rem;
}
.sybo-account-socials a {
	align-items: center;
	border: 1px solid #44475c;
	border-radius: 50%;
	color: #b8bbce;
	display: flex;
	font-size: .75rem;
	font-weight: 800;
	height: 38px;
	justify-content: center;
	text-decoration: none;
	transition: border-color 180ms ease-out, color 180ms ease-out, background-color 180ms ease-out;
	width: 38px;
}
.sybo-account-socials a:hover,
.sybo-account-socials a:focus-visible { background: #373952; border-color: #777b98; color: #fff; }
.sybo-account-socials svg,
.sybo-auth-company__socials svg {
	fill: none;
	height: 17px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
	width: 17px;
}
.sybo-account-socials a[data-network="facebook"] svg,
.sybo-account-socials a[data-network="twitter"] svg,
.sybo-account-socials a[data-network="tiktok"] svg,
.sybo-auth-company__socials a[data-network="facebook"] svg,
.sybo-auth-company__socials a[data-network="twitter"] svg,
.sybo-auth-company__socials a[data-network="tiktok"] svg { fill: currentColor; stroke: none; }
.sybo-account-settings-view[hidden] { display: none; }
.sybo-account-drawer.is-account-settings-view .sybo-account-drawer__scroll {
	padding-top: 1.15rem;
}
.sybo-account-drawer.is-account-settings-view .sybo-account-drawer__scroll > :not(.sybo-account-settings-view):not(.sybo-account-settings-subview) {
	display: none;
}
.sybo-account-settings-view {
	display: grid;
}
.sybo-account-settings-view > button {
	align-items: center;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	color: #fff;
	cursor: pointer;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	min-height: 82px;
	padding: .8rem .2rem;
	text-align: left;
	width: 100%;
}
.sybo-account-settings-view > button:hover,
.sybo-account-settings-view > button:focus-visible {
	background: rgba(255, 255, 255, .035);
}
.sybo-account-settings-view > button span {
	display: grid;
	gap: .38rem;
	min-width: 0;
}
.sybo-account-settings-view > button small {
	color: #777c9c;
	font: 500 .76rem "Space Grotesk", sans-serif;
}
.sybo-account-settings-view > button strong {
	color: #fff;
	font: 800 .87rem "Space Grotesk", sans-serif;
	overflow-wrap: anywhere;
}
.sybo-account-settings-view > button > svg {
	color: #777b93;
	flex: 0 0 22px;
	height: 22px;
	width: 22px;
}
.sybo-account-settings-subview[hidden] { display: none; }
.sybo-account-settings-subview {
	color: #fff;
	display: block;
}
.sybo-account-privacy-view {
	padding: .15rem 0 1.5rem;
}
.sybo-account-privacy-view > h3 {
	color: #fff;
	font: 900 1rem "Nunito", sans-serif;
	margin: 1.05rem 0 .75rem;
}
.sybo-account-privacy-view > h3:first-child {
	margin-top: .25rem;
}
.sybo-account-privacy-card {
	background: #2b2d42;
	border: 1px solid rgba(255, 255, 255, .035);
	border-radius: 16px;
	display: grid;
	padding: .65rem .85rem;
}
.sybo-account-privacy-option {
	align-items: center;
	cursor: pointer;
	display: grid;
	gap: .8rem;
	grid-template-columns: minmax(0, 1fr) 54px;
	min-height: 48px;
	position: relative;
}
.sybo-account-privacy-option > span {
	color: #fff;
	font: 500 .82rem/1.35 "Space Grotesk", sans-serif;
	padding: .35rem 0;
}
.sybo-account-privacy-option input {
	height: 1px;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	width: 1px;
}
.sybo-account-privacy-option > i {
	background: #555970;
	border-radius: 999px;
	display: block;
	height: 30px;
	position: relative;
	transition: background-color 180ms ease-out, opacity 180ms ease-out;
	width: 54px;
}
.sybo-account-privacy-option > i::after {
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
	content: "";
	height: 23px;
	left: 4px;
	position: absolute;
	top: 3.5px;
	transition: transform 180ms ease-out;
	width: 23px;
}
.sybo-account-privacy-option input:checked + i {
	background: #19d8cb;
}
.sybo-account-privacy-option input:checked + i::after {
	transform: translateX(23px);
}
.sybo-account-privacy-option input:focus-visible + i {
	box-shadow: 0 0 0 3px rgba(109, 67, 255, .6);
}
.sybo-account-privacy-option input:disabled + i {
	cursor: wait;
	opacity: .58;
}
.sybo-account-privacy-policy {
	align-items: center;
	background: #2b2d42;
	border: 1px solid rgba(255, 255, 255, .035);
	border-radius: 14px;
	color: #fff;
	display: flex;
	font: 800 .83rem "Space Grotesk", sans-serif;
	gap: .8rem;
	justify-content: space-between;
	min-height: 55px;
	padding: .85rem 1rem;
	text-decoration: none;
	transition: background-color 180ms ease-out, border-color 180ms ease-out;
}
.sybo-account-privacy-policy:hover,
.sybo-account-privacy-policy:focus-visible {
	background: #373952;
	border-color: #555974;
}
.sybo-account-privacy-policy svg {
	flex: 0 0 21px;
	height: 21px;
	width: 21px;
}
.sybo-account-privacy-view .sybo-account-form-status {
	margin-top: .8rem;
	text-align: center;
}
.sybo-account-notification-view {
	display: grid;
	gap: 1.15rem;
	padding: .15rem 0 1.5rem;
}
.sybo-account-notification-view[hidden] {
	display: none;
}
.sybo-account-notification-group > h3 {
	color: #fff;
	font: 900 1rem "Nunito", sans-serif;
	margin: .1rem 0 .45rem;
}
.sybo-account-notification-group > p {
	color: #c4c7da;
	font: 500 .82rem/1.45 "Space Grotesk", sans-serif;
	margin: 0 0 .85rem;
}
.sybo-account-notification-view .sybo-account-privacy-card {
	padding-block: .68rem;
}
.sybo-account-notification-view .sybo-account-form-status {
	margin: -.35rem 0 0;
	position: sticky;
	bottom: .25rem;
	text-align: center;
	z-index: 2;
}
.sybo-account-settings-copy {
	color: #c4c7da;
	font-size: .86rem;
	line-height: 1.55;
	margin: .15rem 0 1rem;
	text-align: center;
}
.sybo-account-settings-subview form {
	display: grid;
	gap: .85rem;
}
.sybo-account-field {
	background: #11121c;
	border: 2px solid #464957;
	border-radius: 9px;
	display: block;
	min-height: 53px;
	padding: .55rem .75rem;
	position: relative;
	transition: border-color 180ms ease-out;
}
.sybo-account-field:focus-within { border-color: #7046ff; }
.sybo-account-field > span {
	color: #b8bbd0;
	display: block;
	font-size: .8rem;
	line-height: 1;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: font-size 160ms ease-out, top 160ms ease-out;
}
.sybo-account-field:focus-within > span,
.sybo-account-field:has(input:not(:placeholder-shown)) > span {
	font-size: .65rem;
	top: .72rem;
	transform: none;
}
.sybo-account-field input {
	background: transparent;
	border: 0;
	color: #fff;
	font: 500 .92rem "Space Grotesk", sans-serif;
	height: 34px;
	outline: 0;
	padding: .7rem 2.2rem 0 0;
	width: 100%;
}
.sybo-account-field input::placeholder { color: transparent; }
.sybo-account-field--password > button {
	align-items: center;
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
	display: flex;
	height: 40px;
	justify-content: center;
	position: absolute;
	right: .4rem;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
}
.sybo-account-field--password > button svg { height: 18px; width: 18px; }
.sybo-account-confirm,
.sybo-account-danger,
.sybo-account-cancel {
	align-items: center;
	border: 0;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	display: flex;
	font: 900 .88rem "Nunito", sans-serif;
	justify-content: center;
	min-height: 45px;
	padding: .7rem 1rem;
	width: 100%;
}
.sybo-account-confirm { background: #6d42ff; }
.sybo-account-confirm:disabled,
.sybo-account-danger:disabled {
	background: #2a2c43;
	color: #595d7d;
	cursor: not-allowed;
}
.sybo-account-danger { background: #ed075d; }
.sybo-account-cancel { background: #6740ff; }
.sybo-account-confirm:not(:disabled):hover,
.sybo-account-confirm:not(:disabled):focus-visible,
.sybo-account-cancel:hover,
.sybo-account-cancel:focus-visible { filter: brightness(1.1); }
.sybo-account-danger:not(:disabled):hover,
.sybo-account-danger:not(:disabled):focus-visible { background: #ff176d; }
.sybo-account-form-status {
	background: #292b3e;
	border-radius: 8px;
	color: #bfc3d8;
	font-size: .76rem;
	line-height: 1.4;
	margin: 0;
	padding: .55rem .7rem;
	text-align: center;
}
.sybo-account-form-status[hidden] { display: none; }
.sybo-account-form-status.is-error { background: rgba(237, 7, 93, .14); color: #ff9dc1; }
.sybo-account-form-status.is-success { background: rgba(37, 213, 154, .14); color: #79efc5; }
.sybo-account-password-rules {
	display: grid;
	gap: 3px;
	margin-top: -.45rem;
}
.sybo-account-password-rules span {
	background: #202333;
	border-radius: 999px;
	color: #8990ae;
	font-size: .69rem;
	line-height: 1.45;
	padding: .08rem .55rem;
}
.sybo-account-password-rules span.is-valid {
	color: #48e3ac;
}
.sybo-account-forgot {
	color: #8d6cff;
	font-size: .72rem;
	font-weight: 800;
	justify-self: center;
	margin-top: .25rem;
	text-decoration: none;
}
.sybo-account-settings-subview--sessions {
	padding: .45rem .8rem 0;
}
.sybo-account-settings-subview--sessions h3,
.sybo-account-settings-subview--delete-confirm h3 {
	font: 900 1.12rem/1.35 "Nunito", sans-serif;
	margin: .5rem 0 1.1rem;
}
.sybo-account-settings-subview--sessions ul {
	color: #c4c7da;
	font-size: .82rem;
	line-height: 1.45;
	margin: 0 0 1.45rem;
	padding-left: 1.1rem;
}
.sybo-account-settings-subview--sessions li + li { margin-top: .9rem; }
.sybo-account-settings-subview--sessions .sybo-account-cancel { margin-top: .65rem; }
.sybo-account-settings-subview--delete {
	padding-top: .45rem;
	text-align: center;
}
.sybo-account-delete-mascot {
	height: 116px;
	margin: 0 auto .25rem;
	position: relative;
	width: 140px;
}
.sybo-account-delete-mascot img {
	display: block;
	height: 112px;
	object-fit: contain;
	width: 112px;
}
.sybo-account-delete-mascot b {
	align-items: center;
	background: #fb2869;
	clip-path: polygon(10% 0, 88% 8%, 100% 72%, 55% 100%, 0 69%);
	display: flex;
	font: 900 .74rem/1 "Nunito", sans-serif;
	height: 63px;
	justify-content: center;
	padding: .3rem;
	position: absolute;
	right: 0;
	text-align: center;
	top: 4px;
	transform: rotate(8deg);
	width: 58px;
}
.sybo-account-settings-subview--delete h3 {
	font: 900 1.15rem "Nunito", sans-serif;
	margin: .25rem 0 1rem;
}
.sybo-account-settings-subview--delete > p:not(.sybo-account-form-status) {
	color: #c4c7da;
	font-size: .8rem;
	line-height: 1.5;
	margin: 0 auto 1.5rem;
	max-width: 320px;
}
.sybo-account-delete-options {
	display: grid;
	gap: .45rem;
	margin-bottom: .9rem;
}
.sybo-account-delete-options > button {
	align-items: center;
	background: #292b41;
	border: 1px solid #3a3d55;
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
	display: grid;
	font: 800 .84rem "Space Grotesk", sans-serif;
	gap: .7rem;
	grid-template-columns: 21px minmax(0, 1fr) 21px;
	min-height: 52px;
	padding: .65rem .8rem;
	text-align: left;
}
.sybo-account-delete-options > button:hover,
.sybo-account-delete-options > button:focus-visible { background: #34364e; border-color: #555976; }
.sybo-account-delete-options svg { height: 19px; width: 19px; }
.sybo-account-settings-subview--delete-confirm {
	padding: .55rem .35rem 0;
	text-align: center;
}
.sybo-account-settings-subview--delete-confirm > p {
	color: #c4c7da;
	font-size: .82rem;
	line-height: 1.5;
	margin: 0 0 1rem;
}
.sybo-account-settings-subview--delete-confirm form { text-align: left; }
.sybo-account-settings-subview--delete-confirm > .sybo-account-danger,
.sybo-account-settings-subview--delete-confirm > .sybo-account-cancel {
	margin-top: .7rem;
}
body.sybo-account-open { overflow: hidden; }

@media (max-width: 767px) {
	.sybo-account-backdrop { inset: 0; }
	.sybo-account-drawer {
		border-left: 0;
		top: 0;
		width: 100%;
	}
	.sybo-account-drawer__top {
		flex-basis: calc(58px + env(safe-area-inset-top));
		padding-top: env(safe-area-inset-top);
	}
	.sybo-account-drawer__scroll {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	.sybo-account-drawer.is-account-settings-view .sybo-account-drawer__scroll {
		padding-left: 1.75rem;
		padding-right: 1.75rem;
	}
	.sybo-account-divider { margin-inline: -1rem; }
	.sybo-account-identity img { height: 72px; width: 72px; }
	.sybo-account-drawer.is-settings-only .sybo-account-actions {
		display: none;
	}
	.sybo-account-drawer.is-settings-only .sybo-account-identity {
		padding-bottom: 1.65rem;
	}
}

.sybo-contact-backdrop {
	background: rgba(0, 0, 0, .76);
	inset: 0;
	opacity: 0;
	position: fixed;
	transition: opacity 220ms ease-out;
	z-index: 121;
}
.sybo-contact-backdrop.is-open { opacity: 1; }
.sybo-contact-backdrop[hidden],
.sybo-contact-drawer[hidden] { display: none; }
.sybo-contact-drawer {
	background: #1a1b28;
	border-right: 1px solid rgba(255, 255, 255, .1);
	bottom: 0;
	box-shadow: 22px 0 54px rgba(0, 0, 0, .48);
	color: #fff;
	display: flex;
	flex-direction: column;
	left: 0;
	overflow: hidden;
	position: fixed;
	top: 0;
	transform: translateX(-102%);
	transition: transform 220ms ease-out;
	width: min(410px, 100vw);
	z-index: 122;
}
.sybo-contact-drawer.is-open { transform: translateX(0); }
.sybo-contact-drawer svg {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}
.sybo-contact-drawer__header {
	align-items: center;
	display: flex;
	flex: 0 0 calc(64px + env(safe-area-inset-top));
	justify-content: center;
	padding: env(safe-area-inset-top) .8rem 0;
	position: relative;
}
.sybo-contact-drawer__header h2 {
	font: 900 1.05rem/1 "Nunito", sans-serif;
	margin: 0;
}
.sybo-contact-heading {
	display: grid;
	gap: .35rem;
	text-align: center;
}
.sybo-contact-heading p {
	color: #b9bdd0;
	font: 500 .9rem/1.2 "Space Grotesk", sans-serif;
	margin: 0;
}
.sybo-contact-heading p[hidden] { display: none; }
.sybo-contact-close,
.sybo-contact-back {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 11px;
	color: #fff;
	cursor: pointer;
	display: flex;
	height: 42px;
	justify-content: center;
	position: absolute;
	top: calc(.7rem + env(safe-area-inset-top));
	transition: background-color 180ms ease-out;
	width: 42px;
}
.sybo-contact-back[hidden] { display: none; }
.sybo-contact-close { right: .65rem; }
.sybo-contact-back { left: .65rem; }
.sybo-contact-close:hover,
.sybo-contact-close:focus-visible,
.sybo-contact-back:hover,
.sybo-contact-back:focus-visible { background: #2b2d40; }
.sybo-contact-close svg,
.sybo-contact-back svg { height: 25px; width: 25px; }
.sybo-contact-drawer__scroll {
	flex: 1;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 2.15rem 1.45rem calc(1.75rem + env(safe-area-inset-bottom));
	scrollbar-color: #56596f transparent;
	scrollbar-width: thin;
}
.sybo-contact-menu h3 {
	color: #85899f;
	font: 700 .76rem/1.2 "Space Grotesk", sans-serif;
	letter-spacing: .02em;
	margin: 0 0 .85rem;
	text-transform: uppercase;
}
.sybo-contact-menu > button {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
	display: grid;
	font: 500 .9rem/1.25 "Space Grotesk", sans-serif;
	gap: .9rem;
	grid-template-columns: 28px minmax(0, 1fr) 22px;
	min-height: 48px;
	padding: .45rem .15rem;
	text-align: left;
	transition: background-color 180ms ease-out;
	width: 100%;
}
.sybo-contact-menu > button:hover,
.sybo-contact-menu > button:focus-visible { background: #252737; }
.sybo-contact-menu > button > svg:first-child {
	color: #7046ff;
	height: 26px;
	width: 26px;
}
.sybo-contact-menu__chevron {
	color: #777b94;
	height: 22px;
	justify-self: end;
	width: 22px;
}
.sybo-game-feedback-select h3 {
	color: #fff;
	font: 900 .94rem/1.2 "Nunito", sans-serif;
	margin: 0 0 .85rem;
}
.sybo-game-feedback-select h3:not(:first-child) { margin-top: 1.55rem; }
.sybo-feedback-game-search {
	align-items: center;
	background: #3a3c56;
	border: 2px solid transparent;
	border-radius: 999px;
	display: flex;
	gap: .65rem;
	min-height: 44px;
	padding: 0 .85rem;
	transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}
.sybo-feedback-game-search:focus-within {
	border-color: #6d43ff;
	box-shadow: 0 0 0 1px #6d43ff;
}
.sybo-feedback-game-search svg {
	color: #c7cada;
	flex: 0 0 20px;
	height: 20px;
	width: 20px;
}
.sybo-feedback-game-search input {
	background: transparent;
	border: 0;
	color: #fff;
	font: 600 .88rem/1.2 "Space Grotesk", sans-serif;
	min-width: 0;
	outline: 0;
	padding: .72rem 0;
	width: 100%;
}
.sybo-feedback-game-search input::placeholder { color: #b5b8ca; opacity: 1; }
.sybo-feedback-game-results {
	display: grid;
	gap: .5rem;
}
.sybo-feedback-game-result {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 9px;
	color: #fff;
	cursor: pointer;
	display: grid;
	font: 600 .88rem/1.25 "Space Grotesk", sans-serif;
	gap: .7rem;
	grid-template-columns: 72px minmax(0, 1fr);
	min-height: 47px;
	padding: .22rem;
	text-align: left;
	transition: background-color 180ms ease-out;
	width: 100%;
}
.sybo-feedback-game-result:hover,
.sybo-feedback-game-result:focus-visible { background: #2a2c40; outline: 0; }
.sybo-feedback-game-result img {
	aspect-ratio: 512 / 340;
	border-radius: 7px;
	height: auto;
	object-fit: contain;
	width: 72px;
}
.sybo-feedback-game-result span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sybo-feedback-game-empty,
.sybo-feedback-game-loading {
	color: #9ca0b6;
	font: 500 .84rem/1.45 "Space Grotesk", sans-serif;
	margin: .25rem 0;
}
.sybo-feedback-game-loading::before {
	animation: sybo-spin .8s linear infinite;
	border: 2px solid rgba(255, 255, 255, .22);
	border-radius: 50%;
	border-top-color: #fff;
	content: "";
	display: inline-block;
	height: 15px;
	margin-right: .55rem;
	vertical-align: -2px;
	width: 15px;
}
.sybo-game-feedback-form-view form,
.sybo-site-feedback-form-view form {
	display: flex;
	flex-direction: column;
	gap: .72rem;
	min-height: calc(100vh - 118px);
}
.sybo-feedback-field {
	display: grid;
	gap: .55rem;
}
.sybo-feedback-field > span {
	color: #fff;
	font: 800 .8rem/1.2 "Nunito", sans-serif;
}
.sybo-feedback-issue { position: relative; }
.sybo-feedback-issue__toggle {
	align-items: center;
	background: #12131c;
	border: 2px solid #4b4e5e;
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
	display: flex;
	font: 700 .9rem/1.2 "Space Grotesk", sans-serif;
	justify-content: space-between;
	min-height: 60px;
	padding: .75rem 1rem;
	text-align: left;
	transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
	width: 100%;
}
.sybo-feedback-issue__toggle:hover,
.sybo-feedback-issue__toggle:focus-visible,
.sybo-feedback-issue.is-open .sybo-feedback-issue__toggle {
	border-color: #ececf4;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
	outline: 0;
}
.sybo-feedback-issue__toggle svg {
	flex: 0 0 22px;
	height: 22px;
	transition: transform 180ms ease-out;
	width: 22px;
}
.sybo-feedback-issue.is-open .sybo-feedback-issue__toggle svg { transform: rotate(180deg); }
.sybo-feedback-issue__list {
	background: #34364f;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 9px;
	box-shadow: 0 16px 34px rgba(0, 0, 0, .45);
	display: grid;
	left: 0;
	margin-top: .45rem;
	max-height: 320px;
	overflow-y: auto;
	padding: .35rem 0;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 5;
}
.sybo-feedback-issue__list[hidden] { display: none; }
.sybo-feedback-issue__list button {
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
	font: 700 .86rem/1.3 "Space Grotesk", sans-serif;
	min-height: 40px;
	padding: .55rem .85rem;
	text-align: left;
	width: 100%;
}
.sybo-feedback-issue__list button:hover,
.sybo-feedback-issue__list button:focus-visible,
.sybo-feedback-issue__list button.is-active {
	background: #454861;
	outline: 0;
}
.sybo-feedback-issue__list button[aria-selected="true"] { color: #b9a9ff; }
.sybo-feedback-floating-field {
	background: #12131c;
	border: 2px solid #464957;
	border-radius: 9px;
	display: grid;
	gap: .2rem;
	padding: .48rem .75rem .58rem;
	transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}
.sybo-feedback-floating-field:focus-within {
	border-color: #6d43ff;
	box-shadow: 0 0 0 1px #6d43ff;
}
.sybo-feedback-floating-field > span {
	color: #c1c4d5;
	font: 500 .7rem/1.2 "Space Grotesk", sans-serif;
}
.sybo-feedback-floating-field input,
.sybo-feedback-floating-field textarea {
	background: transparent;
	border: 0;
	color: #fff;
	font: 500 .9rem/1.35 "Space Grotesk", sans-serif;
	outline: 0;
	padding: 0;
	resize: none;
	width: 100%;
}
.sybo-feedback-floating-field--message {
	border-color: #464957;
	min-height: 150px;
}
.sybo-feedback-floating-field--message:focus-within {
	border-color: #6d43ff;
	box-shadow: 0 0 0 1px #6d43ff;
}
.sybo-feedback-floating-field--message.is-invalid,
.sybo-feedback-floating-field--message.is-invalid:focus-within {
	border-color: #ff4f87;
	box-shadow: 0 0 0 1px #ff4f87;
}
.sybo-feedback-floating-field textarea { min-height: 116px; }
.sybo-feedback-validation {
	color: #ff4f87;
	font: 600 .72rem/1.35 "Space Grotesk", sans-serif;
	margin: -.35rem 0 .1rem;
}
.sybo-feedback-validation[hidden] { display: none; }
.sybo-feedback-submit { margin-top: auto; }
.sybo-feedback-submit:disabled {
	background: #2b2d43;
	color: #626680;
	cursor: not-allowed;
	opacity: 1;
}
.sybo-contact-form-view > p {
	color: #b7bacd;
	font-size: .84rem;
	line-height: 1.55;
	margin: 0 0 1.25rem;
	text-align: center;
}
.sybo-contact-form-view form {
	display: grid;
	gap: .95rem;
}
.sybo-contact-form-view label {
	display: grid;
	gap: .42rem;
}
.sybo-contact-form-view label > span {
	color: #c5c8d9;
	font: 600 .78rem/1.2 "Space Grotesk", sans-serif;
}
.sybo-contact-form-view input,
.sybo-contact-form-view textarea {
	background: #12131c;
	border: 2px solid #454858;
	border-radius: 10px;
	color: #fff;
	font: 500 .9rem/1.45 "Space Grotesk", sans-serif;
	outline: 0;
	padding: .82rem .9rem;
	resize: vertical;
	transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
	width: 100%;
}
.sybo-contact-form-view input:focus,
.sybo-contact-form-view textarea:focus {
	border-color: #6d43ff;
	box-shadow: 0 0 0 1px #6d43ff;
}
.sybo-contact-form-view textarea { min-height: 150px; }
.sybo-contact-submit {
	background: #6d43ff;
	border: 0;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	font: 900 .94rem/1 "Nunito", sans-serif;
	min-height: 50px;
	padding: .8rem 1rem;
	transition: background-color 180ms ease-out, opacity 180ms ease-out;
}
.sybo-contact-submit:hover,
.sybo-contact-submit:focus-visible { background: #7d56ff; }
.sybo-contact-submit:disabled { cursor: wait; opacity: .62; }
.sybo-contact-status {
	border-radius: 9px;
	font-size: .8rem;
	line-height: 1.45;
	margin: 0;
	padding: .7rem .8rem;
}
.sybo-contact-status.is-error { background: rgba(255, 75, 106, .12); color: #ff9daf; }
.sybo-contact-status.is-success { background: rgba(42, 220, 174, .12); color: #63e7c4; }
body.sybo-contact-open { overflow: hidden; }

@media (max-width: 767px) {
	.sybo-contact-drawer {
		border-right: 0;
		width: 100%;
	}
	.sybo-contact-drawer__scroll { padding: 1.65rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom)); }
	.sybo-game-feedback-form-view form,
	.sybo-site-feedback-form-view form { min-height: calc(100dvh - 112px - env(safe-area-inset-top)); }
}

.sybo-side-panel {
	background: #321044;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 24px;
	bottom: 8px;
	box-shadow: -18px 20px 55px rgba(0, 0, 0, .44);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: fixed;
	right: 8px;
	top: calc(var(--sybo-header-height) + 8px);
	width: min(410px, calc(100vw - 16px));
	z-index: 110;
}
.sybo-side-panel__header {
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, .09);
	display: flex;
	flex: 0 0 64px;
	justify-content: space-between;
	padding: 0 1.3rem;
}
.sybo-side-panel__header--center { justify-content: center; }
.sybo-side-panel__header--plain { border: 0; justify-content: space-between; }
.sybo-side-panel__header h2 {
	font-family: Sora, sans-serif;
	font-size: 1.1rem;
	margin: 0;
}
.sybo-side-panel__header button {
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: rgba(255, 255, 255, .72);
	cursor: pointer;
	font-size: 1.1rem;
	height: 40px;
	position: absolute;
	right: 1rem;
	width: 40px;
}
.sybo-side-panel__header button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sybo-side-panel__body { flex: 1; overflow-y: auto; padding: 1rem; }

.sybo-notification-card {
	background: rgba(8, 108, 236, .2);
	border: 1px solid rgba(63, 237, 253, .28);
	border-radius: 14px;
	display: grid;
	gap: .75rem;
	grid-template-columns: 56px minmax(0, 1fr) 32px;
	padding: 1rem;
}
.sybo-notification-card__icon {
	align-items: center;
	background: #086cec;
	border-radius: 999px;
	display: flex;
	font-size: 1.5rem;
	height: 56px;
	justify-content: center;
	width: 56px;
}
.sybo-notification-card strong { display: block; font-size: .9rem; }
.sybo-notification-card p { color: rgba(255, 255, 255, .78); font-size: .85rem; line-height: 1.45; margin: .25rem 0 .9rem; }
.sybo-notification-card .sybo-button { min-height: 38px; padding: .5rem 1rem; }
.sybo-notification-card__remove {
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, .64);
	cursor: pointer;
	font-size: 1.3rem;
	height: 32px;
}

.sybo-panel-tabs {
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	padding: 0 .75rem;
}
.sybo-panel-tabs button {
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	color: rgba(255, 255, 255, .6);
	cursor: pointer;
	font-weight: 700;
	min-height: 48px;
}
.sybo-panel-tabs button.is-active { border-bottom-color: #3fedfd; color: #fff; }
.sybo-games-empty {
	align-items: center;
	color: rgba(255, 255, 255, .65);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 360px;
	padding: 2rem;
	text-align: center;
}
.sybo-games-empty > span {
	align-items: center;
	border: 4px solid rgba(255, 255, 255, .32);
	border-radius: 999px;
	display: flex;
	font-size: 2.5rem;
	height: 96px;
	justify-content: center;
	width: 96px;
}
.sybo-games-empty h3 { color: #fff; margin: 1.2rem 0 .4rem; }
.sybo-panel-game {
	align-items: center;
	background: rgba(255, 255, 255, .055);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 14px;
	display: flex;
	gap: .75rem;
	margin-bottom: .7rem;
	padding: .6rem;
}
.sybo-panel-game > a { align-items: center; display: flex; flex: 1; gap: .75rem; min-width: 0; text-decoration: none; }
.sybo-panel-game img { border-radius: 10px; height: 56px; object-fit: cover; width: 66px; }
.sybo-panel-game strong,
.sybo-panel-game small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sybo-panel-game small { color: rgba(255, 255, 255, .55); font-size: .72rem; margin-top: .2rem; }
.sybo-panel-game > button { background: transparent; border: 0; color: rgba(255, 255, 255, .55); cursor: pointer; font-size: 1rem; }

.sybo-friends-panel {
	animation: sybo-friends-panel-in 220ms ease-out both;
	background: #1a1b28;
	border-color: rgba(255, 255, 255, .1);
	border-radius: 14px;
	isolation: isolate;
}
@keyframes sybo-friends-panel-in {
	from { opacity: 0; transform: translateX(24px); }
	to { opacity: 1; transform: translateX(0); }
}
html[dir="rtl"] .sybo-friends-panel { animation-name: sybo-friends-panel-in-rtl; }
@keyframes sybo-friends-panel-in-rtl {
	from { opacity: 0; transform: translateX(-24px); }
	to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
	.sybo-friends-panel { animation: none; }
}
.sybo-friends-panel .sybo-side-panel__header {
	border-bottom: 0;
	flex-basis: 58px;
	position: relative;
	z-index: 4;
}
.sybo-friends-panel .sybo-side-panel__header h2 {
	font-family: "Nunito", sans-serif;
	font-size: 1rem;
	font-weight: 900;
}
.sybo-friends-panel .sybo-side-panel__header button {
	position: absolute;
	right: .8rem;
}
html[dir="rtl"] .sybo-friends-panel .sybo-side-panel__header button {
	left: .8rem;
	right: auto;
}
.sybo-friends-panel__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
	padding: 0 1rem 1rem;
	position: relative;
	z-index: 3;
}
.sybo-friends-search {
	align-items: center;
	background: #11121c;
	border: 1px solid #4a4d61;
	border-radius: 999px;
	display: flex;
	flex: 0 0 42px;
	gap: .65rem;
	padding: 0 .85rem;
	transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}
.sybo-friends-search:focus-within {
	border-color: #8170ff;
	box-shadow: 0 0 0 2px rgba(109, 66, 255, .15);
}
.sybo-friends-search svg,
.sybo-friends-action svg {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}
.sybo-friends-search svg {
	color: #d7d9e5;
	flex: 0 0 19px;
	height: 19px;
	width: 19px;
}
.sybo-friends-search input {
	background: transparent;
	border: 0;
	color: #fff;
	font: 600 .86rem "Space Grotesk", sans-serif;
	min-width: 0;
	outline: 0;
	padding: 0;
	width: 100%;
}
.sybo-friends-search input::placeholder { color: #a8abbd; opacity: 1; }
.sybo-friends-actions {
	display: grid;
	gap: .7rem;
	margin-top: 1rem;
}
.sybo-friends-action {
	align-items: center;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	display: flex;
	font: 800 .9rem "Space Grotesk", sans-serif;
	gap: .55rem;
	justify-content: center;
	min-height: 42px;
	padding: .65rem 1rem;
	text-decoration: none;
	transition: filter 180ms ease-out, background-color 180ms ease-out;
	width: 100%;
}
.sybo-friends-action svg { height: 19px; width: 19px; }
.sybo-friends-action--play { background: #59eb8a; color: #07120c; }
.sybo-friends-action--play:hover,
.sybo-friends-action--play:focus-visible { filter: brightness(1.07); }
.sybo-friends-action--share { background: #373952; color: #fff; }
.sybo-friends-action--share:hover,
.sybo-friends-action--share:focus-visible { background: #484b69; }
.sybo-friends-empty {
	margin: 2.35rem auto 0;
	max-width: 310px;
	text-align: center;
}
.sybo-friends-empty h3 {
	font-family: "Nunito", sans-serif;
	font-size: 1.55rem;
	font-weight: 900;
	letter-spacing: -.4px;
	line-height: 1.15;
	margin: 0 0 .5rem;
}
.sybo-friends-empty p {
	color: #b9bbcc;
	font-size: .9rem;
	line-height: 1.5;
	margin: 0;
}
.sybo-friends-empty button {
	background: transparent;
	border: 0;
	color: #a88cff;
	cursor: pointer;
	font: inherit;
	font-weight: 800;
	padding: 0;
}
.sybo-friends-empty button:hover,
.sybo-friends-empty button:focus-visible { color: #c6b7ff; text-decoration: underline; }
.sybo-friends-panel__image {
	bottom: 0;
	height: 57%;
	left: 0;
	object-fit: cover;
	object-position: center bottom;
	position: absolute;
	width: 100%;
	z-index: 1;
}
.sybo-friends-panel::after {
	background: linear-gradient(180deg, #1a1b28 0%, rgba(26, 27, 40, .97) 12%, rgba(26, 27, 40, .24) 55%, transparent 75%);
	content: "";
	inset: 42% 0 0;
	pointer-events: none;
	position: absolute;
	z-index: 2;
}
.sybo-friends-results {
	background: #202231;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 14px;
	box-shadow: 0 16px 34px rgba(0, 0, 0, .4);
	margin-top: .75rem;
	max-height: min(42vh, 340px);
	overflow-y: auto;
	padding: .35rem;
	position: relative;
	z-index: 5;
}
.sybo-friends-results[hidden] { display: none; }
.sybo-friends-result {
	align-items: center;
	border-radius: 10px;
	color: #fff;
	display: grid;
	gap: .7rem;
	grid-template-columns: 42px minmax(0, 1fr) auto;
	min-height: 54px;
	padding: .4rem .5rem;
	text-decoration: none;
	transition: background-color 160ms ease-out;
}
.sybo-friends-result:hover,
.sybo-friends-result:focus-visible { background: #373952; outline: 0; }
.sybo-friends-result img {
	background: #373952;
	border-radius: 50%;
	height: 42px;
	object-fit: cover;
	width: 42px;
}
.sybo-friends-result strong,
.sybo-friends-result small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sybo-friends-result strong { font-size: .86rem; }
.sybo-friends-result small { color: #aeb1c5; font-size: .72rem; margin-top: .15rem; }
.sybo-friends-result span {
	background: #44475f;
	border-radius: 999px;
	color: #d8daea;
	font-size: .67rem;
	font-weight: 800;
	padding: .3rem .5rem;
}
.sybo-friends-results__state {
	color: #b7bacd;
	font-size: .82rem;
	line-height: 1.45;
	margin: 0;
	padding: .85rem;
	text-align: center;
}

.sybo-auth-panel { width: min(390px, calc(100vw - 16px)); }
.sybo-auth-panel__content { margin: 0 auto; max-width: 350px; overflow-y: auto; padding: .5rem 1rem 2rem; width: 100%; }
.sybo-auth-panel__content h2 { font-family: Sora, sans-serif; font-size: 1.55rem; text-align: center; }
.sybo-social-auth { display: grid; gap: .7rem; margin-top: 1.6rem; }
.sybo-social-auth a {
	align-items: center;
	background: #fff;
	border-radius: 999px;
	color: #171927;
	display: flex;
	font-size: .85rem;
	font-weight: 800;
	justify-content: center;
	min-height: 44px;
	position: relative;
	text-decoration: none;
}
.sybo-social-auth a:nth-child(2) { background: #086cec; color: #fff; }
.sybo-social-auth b { font-size: 1.1rem; left: 1.2rem; position: absolute; }
.sybo-auth-divider { align-items: center; display: flex; gap: .75rem; margin: 1.1rem 0; }
.sybo-auth-divider span { background: rgba(255, 255, 255, .15); flex: 1; height: 1px; }
.sybo-auth-divider b { color: rgba(255, 255, 255, .5); font-size: .7rem; }
.sybo-auth-form { display: grid; gap: .75rem; }
.sybo-auth-form > input {
	background: rgba(25, 4, 36, .6);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 12px;
	color: #fff;
	font: 500 .9rem "Space Grotesk", sans-serif;
	min-height: 50px;
	padding: .75rem 1rem;
}
.sybo-auth-form .sybo-button { border: 0; font-weight: 800; justify-content: center; min-height: 46px; }
.sybo-auth-remember { color: rgba(255, 255, 255, .68); font-size: .78rem; }
.sybo-auth-register { color: rgba(255, 255, 255, .65); font-size: .82rem; text-align: center; }
.sybo-auth-register a { color: #3fedfd; }
body.sybo-panel-open { overflow: hidden; }

/* Server-backed multi-step authentication drawer */
.sybo-auth-panel {
	background: #1a1b28;
	border: 0;
	border-left: 1px solid #343648;
	border-radius: 0;
	bottom: 0;
	color: #fff;
	right: 0;
	top: var(--sybo-header-height);
	width: min(410px, 100vw);
}
.sybo-auth-progress {
	background: rgba(255, 255, 255, .06);
	height: 3px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}
.sybo-auth-progress span {
	background: #6d43ff;
	display: block;
	height: 100%;
	transition: width 220ms ease-out;
	width: 0;
}
.sybo-auth-header {
	align-items: center;
	display: grid;
	flex: 0 0 62px;
	grid-template-columns: 44px 1fr 44px;
	padding: .45rem .9rem 0;
}
.sybo-auth-header > strong {
	font: 900 1rem "Nunito", sans-serif;
	text-align: center;
}
.sybo-auth-header button {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 12px;
	color: #fff;
	cursor: pointer;
	display: flex;
	height: 42px;
	justify-content: center;
	width: 42px;
}
.sybo-auth-header button:hover,
.sybo-auth-header button:focus-visible { background: #292b3d; }
.sybo-auth-header button[hidden] { display: none; }
.sybo-auth-header svg {
	fill: none;
	height: 25px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 25px;
}
.sybo-auth-back { grid-column: 1; }
.sybo-auth-header > strong { grid-column: 2; }
.sybo-auth-close { grid-column: 3; }
.sybo-auth-panel__scroll {
	flex: 1;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1rem 24px calc(2rem + env(safe-area-inset-bottom));
	scrollbar-color: #65687f transparent;
	scrollbar-width: thin;
}
.sybo-auth-step {
	margin: 0 auto;
	max-width: 362px;
	opacity: 0;
	transform: translateX(18px);
	transition: opacity 180ms ease-out, transform 180ms ease-out;
	width: 100%;
}
.sybo-auth-step.is-active { opacity: 1; transform: translateX(0); }
.sybo-auth-step[hidden] { display: none; }
.sybo-auth-step h2 {
	font: 900 clamp(1.55rem, 3vw, 1.8rem)/1.12 "Nunito", sans-serif;
	letter-spacing: -.45px;
	margin: 1rem 0 1.75rem;
	text-align: center;
}
.sybo-auth-intro {
	color: #b8bbcf;
	font-size: .95rem;
	line-height: 1.55;
	margin: -1rem auto 1.35rem;
	max-width: 330px;
	text-align: center;
}
.sybo-auth-intro strong { color: #fff; overflow-wrap: anywhere; }
.sybo-social-auth { display: grid; gap: .7rem; margin-top: 0; }
.sybo-social-auth button {
	align-items: center;
	background: #fff;
	border: 0;
	border-radius: 999px;
	color: #23253a;
	cursor: pointer;
	display: flex;
	font: 800 .93rem "Nunito", sans-serif;
	justify-content: center;
	min-height: 43px;
	position: relative;
	transition: filter 180ms ease-out, transform 180ms ease-out;
	width: 100%;
}
.sybo-social-auth button:hover { filter: brightness(.94); }
.sybo-social-auth .sybo-social-auth__facebook { background: #3578df; color: #fff; }
.sybo-social-auth b { font-size: 1.25rem; left: 1.35rem; position: absolute; }
.sybo-social-auth__icon {
	fill: currentColor;
	height: 21px;
	left: 1.28rem;
	position: absolute;
	width: 21px;
}
.sybo-auth-divider { margin: 1.65rem 0 1.35rem; }
.sybo-auth-divider b { color: #fff; font-size: .9rem; }
.sybo-auth-step form { display: grid; gap: .8rem; }
.sybo-auth-field {
	background: #11121c;
	border: 2px solid #424557;
	border-radius: 10px;
	display: grid;
	min-height: 60px;
	padding: .55rem 3rem .45rem .85rem;
	position: relative;
	transition: border-color 160ms ease-out, background-color 160ms ease-out;
}
.sybo-auth-field:focus-within { border-color: #7448ff; }
.sybo-auth-field > span:not(.sybo-visually-hidden) {
	color: #a7abc3;
	font-size: .7rem;
	line-height: 1;
}
.sybo-auth-field input,
.sybo-auth-field select {
	appearance: none;
	background: transparent;
	border: 0;
	color: #fff;
	font: 500 1rem "Space Grotesk", sans-serif;
	min-width: 0;
	outline: 0;
	padding: .18rem 0 0;
	width: 100%;
}
.sybo-auth-field input[readonly] { color: #9296ad; }
.sybo-auth-field select { cursor: pointer; }
.sybo-auth-field:has(select)::after {
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	content: "";
	height: 9px;
	pointer-events: none;
	position: absolute;
	right: 1rem;
	top: 21px;
	transform: rotate(45deg);
	width: 9px;
}
.sybo-auth-field > button {
	background: transparent;
	border: 0;
	color: #d6d8e7;
	cursor: pointer;
	font-size: 1.05rem;
	height: 42px;
	position: absolute;
	right: .45rem;
	top: 8px;
	width: 42px;
}
.sybo-auth-field--large { min-height: 60px; }
.sybo-auth-primary,
.sybo-auth-secondary {
	align-items: center;
	border-radius: 999px;
	cursor: pointer;
	display: flex;
	font: 900 1rem "Nunito", sans-serif;
	justify-content: center;
	min-height: 52px;
	padding: .75rem 1.1rem;
	transition: background-color 180ms ease-out, opacity 180ms ease-out, transform 180ms ease-out;
	width: 100%;
}
.sybo-auth-primary {
	background: #6d43ff;
	border: 0;
	color: #fff;
	margin-top: 1rem;
}
.sybo-auth-primary:hover:not(:disabled) { background: #7b55ff; }
.sybo-auth-primary:active:not(:disabled) { transform: scale(.985); }
.sybo-auth-primary:disabled {
	background: #2b2d43;
	color: #70758f;
	cursor: not-allowed;
}
.sybo-auth-primary.is-loading { color: transparent; pointer-events: none; position: relative; }
.sybo-auth-primary.is-loading::after {
	animation: sybo-account-spin .75s linear infinite;
	border: 2px solid rgba(255,255,255,.35);
	border-radius: 50%;
	border-top-color: #fff;
	content: "";
	height: 20px;
	left: calc(50% - 10px);
	position: absolute;
	top: calc(50% - 10px);
	width: 20px;
}
.sybo-auth-secondary {
	background: transparent;
	border: 1px solid #fff;
	color: #fff;
	margin-top: .8rem;
}
.sybo-auth-secondary:hover { background: rgba(255,255,255,.07); }
.sybo-auth-check {
	align-items: flex-start;
	color: #d1d3e3;
	display: flex;
	font-size: .81rem;
	gap: .75rem;
	line-height: 1.48;
	margin: .65rem 0 0;
}
.sybo-auth-check input {
	accent-color: #6d43ff;
	flex: 0 0 auto;
	height: 19px;
	margin-top: 2px;
	width: 19px;
}
.sybo-auth-check a,
.sybo-auth-text-link { color: #987cff; font-weight: 800; }
.sybo-auth-check--compact { align-items: center; margin-top: 0; }
.sybo-auth-text-link {
	font-size: .83rem;
	margin-top: .25rem;
	text-align: center;
	text-decoration: none;
}
.sybo-auth-rules { display: grid; gap: .3rem; margin-top: -.3rem; }
.sybo-auth-rules span {
	background: #222535;
	border-radius: 999px;
	color: #a9adc3;
	font-size: .72rem;
	padding: .27rem .7rem .27rem 2rem;
	position: relative;
}
.sybo-auth-rules span::before {
	content: "×";
	font-size: 1rem;
	left: .65rem;
	line-height: 1;
	position: absolute;
	top: .2rem;
}
.sybo-auth-rules span.is-valid { color: #3ee8ac; }
.sybo-auth-rules span.is-valid::before { content: "✓"; }
.sybo-auth-rules span.is-checking::before {
	animation: sybo-account-spin .7s linear infinite;
	border: 1px solid currentColor;
	border-radius: 50%;
	border-top-color: transparent;
	content: "";
	height: 10px;
	top: .42rem;
	width: 10px;
}
.sybo-auth-error {
	background: rgba(225, 51, 107, .13);
	border-radius: 8px;
	color: #ff83aa;
	font-size: .78rem;
	line-height: 1.4;
	margin: 0;
	padding: .58rem .7rem;
}
.sybo-auth-error[hidden] { display: none; }
.sybo-auth-safety {
	color: #d2d4e4;
	font-size: .78rem;
	line-height: 1.5;
	margin: 1.35rem auto 0;
	max-width: 310px;
	text-align: center;
}
.sybo-auth-birthday {
	border: 0;
	display: grid;
	gap: .6rem;
	grid-template-columns: 1fr 1fr;
	margin: .6rem 0 0;
	padding: 0;
}
.sybo-auth-birthday legend {
	font: 800 .92rem "Nunito", sans-serif;
	grid-column: 1 / -1;
	margin-bottom: .15rem;
}
.sybo-auth-dropdown {
	min-width: 0;
	position: relative;
}
.sybo-auth-dropdown__label {
	color: #a7abc3;
	font-size: .7rem;
	left: .9rem;
	line-height: 1;
	pointer-events: none;
	position: absolute;
	top: .62rem;
	z-index: 2;
}
.sybo-auth-dropdown__trigger {
	align-items: center;
	appearance: none;
	background: #11121c;
	border: 2px solid #424557;
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
	display: grid;
	font: 500 1rem "Space Grotesk", sans-serif;
	grid-template-columns: minmax(0, 1fr) 20px;
	min-height: 60px;
	outline: 0;
	padding: 1.28rem .9rem .38rem;
	text-align: left;
	transition: border-color 160ms ease-out, background-color 160ms ease-out, box-shadow 160ms ease-out;
	width: 100%;
}
.sybo-auth-dropdown--compact .sybo-auth-dropdown__trigger {
	min-height: 58px;
	padding-block: .65rem;
}
.sybo-auth-dropdown__trigger:hover { background: #151724; }
.sybo-auth-dropdown__trigger:focus-visible,
.sybo-auth-dropdown.is-open .sybo-auth-dropdown__trigger {
	border-color: #7448ff;
	box-shadow: 0 0 0 1px rgba(116,72,255,.28);
}
.sybo-auth-dropdown__trigger [data-sybo-dropdown-value] {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sybo-auth-dropdown__trigger [data-sybo-dropdown-value].is-placeholder { color: #d0d2df; }
.sybo-auth-dropdown__chevron {
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	height: 9px;
	justify-self: end;
	margin: -5px 3px 0 0;
	transform: rotate(45deg);
	transition: transform 180ms ease-out, margin 180ms ease-out;
	width: 9px;
}
.sybo-auth-dropdown.is-open .sybo-auth-dropdown__chevron {
	margin-top: 5px;
	transform: rotate(225deg);
}
.sybo-auth-dropdown__menu {
	background: #1d1f2d;
	border: 1px solid #565a73;
	border-radius: 11px;
	box-shadow: 0 16px 38px rgba(0,0,0,.48);
	display: flex;
	flex-direction: column;
	left: 0;
	max-height: var(--sybo-dropdown-max-height, 320px);
	opacity: 0;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	transform: translateY(-5px) scale(.99);
	transform-origin: top center;
	transition: opacity 150ms ease-out, transform 150ms ease-out;
	z-index: 80;
}
.sybo-auth-dropdown.is-upward .sybo-auth-dropdown__menu {
	bottom: calc(100% + 6px);
	top: auto;
	transform: translateY(5px) scale(.99);
	transform-origin: bottom center;
}
.sybo-auth-dropdown__menu.is-open {
	opacity: 1;
	transform: translateY(0) scale(1);
}
.sybo-auth-dropdown__menu[hidden] { display: none; }
.sybo-auth-dropdown__search {
	align-items: center;
	background: #1d1f2d;
	border-bottom: 1px solid rgba(255,255,255,.09);
	display: grid;
	flex: 0 0 auto;
	gap: .55rem;
	grid-template-columns: 18px minmax(0,1fr);
	padding: .55rem .65rem;
}
.sybo-auth-dropdown__search > span[aria-hidden="true"] {
	color: #969bb5;
	font-size: 1.1rem;
}
.sybo-auth-dropdown__search input {
	appearance: none;
	background: #12141f;
	border: 1px solid #44485d;
	border-radius: 8px;
	color: #fff;
	font: 500 .9rem "Space Grotesk", sans-serif;
	height: 38px;
	min-width: 0;
	outline: 0;
	padding: 0 .7rem;
	width: 100%;
}
.sybo-auth-dropdown__search input:focus {
	border-color: #7448ff;
	box-shadow: 0 0 0 1px rgba(116,72,255,.25);
}
.sybo-auth-dropdown__search input::placeholder { color: #858aa3; }
.sybo-auth-dropdown__list {
	max-height: var(--sybo-dropdown-list-max-height, 270px);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: .3rem;
	scrollbar-color: #656a82 transparent;
	scrollbar-width: thin;
}
.sybo-auth-dropdown__option {
	align-items: center;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 7px;
	color: #fff;
	cursor: pointer;
	display: flex;
	font: 600 .91rem "Space Grotesk", sans-serif;
	gap: .7rem;
	justify-content: space-between;
	min-height: 43px;
	outline: 0;
	padding: .55rem .7rem;
	text-align: left;
	transition: background-color 130ms ease-out, color 130ms ease-out;
	width: 100%;
}
.sybo-auth-dropdown__option[hidden] { display: none; }
.sybo-auth-dropdown__option:hover,
.sybo-auth-dropdown__option:focus-visible { background: #373952; }
.sybo-auth-dropdown__option[aria-selected="true"] {
	background: rgba(116,72,255,.2);
	color: #fff;
}
.sybo-auth-dropdown__check {
	color: #9b82ff;
	font-size: 1rem;
	font-weight: 900;
	opacity: 0;
}
.sybo-auth-dropdown__option[aria-selected="true"] .sybo-auth-dropdown__check { opacity: 1; }
.sybo-auth-dropdown__empty {
	color: #9da1b8;
	font-size: .85rem;
	margin: 0;
	padding: 1rem .7rem;
	text-align: center;
}
.sybo-auth-dropdown__empty[hidden] { display: none; }
.sybo-auth-dropdown--year { grid-column: 1 / -1; }
.sybo-auth-success { padding-top: 1rem; text-align: center; }
.sybo-auth-success__mascot {
	align-items: center;
	background: radial-gradient(circle, rgba(109,67,255,.34), transparent 70%);
	display: flex;
	height: 150px;
	justify-content: center;
	margin: 0 auto .3rem;
	position: relative;
}
.sybo-auth-success__mascot::before,
.sybo-auth-success__mascot::after {
	color: #ff3e9c;
	content: "◆  ·  ◆";
	font-size: 1.3rem;
	position: absolute;
	top: 20px;
	transform: rotate(16deg);
}
.sybo-auth-success__mascot::before { left: 30px; }
.sybo-auth-success__mascot::after { color: #49daf5; right: 30px; transform: rotate(-18deg); }
.sybo-auth-success__mascot img { display: block; height: 130px; object-fit: contain; width: 130px; }
.sybo-auth-success h2 { margin-bottom: 1rem; }
.sybo-auth-success p,
.sybo-auth-success small,
.sybo-auth-discard p {
	color: #b8bbcf;
	line-height: 1.55;
}
.sybo-auth-success small { display: block; font-size: .78rem; margin-top: 1.4rem; }
.sybo-auth-discard { padding-top: 20vh; text-align: center; }
.sybo-auth-status {
	background: #2b2d40;
	border: 1px solid #4b4e63;
	border-radius: 10px;
	bottom: 18px;
	color: #fff;
	font-size: .78rem;
	left: 24px;
	opacity: 0;
	padding: .7rem .85rem;
	pointer-events: none;
	position: fixed;
	right: 24px;
	transform: translateY(8px);
	transition: opacity 180ms ease-out, transform 180ms ease-out;
}
.sybo-auth-status.is-visible { opacity: 1; transform: translateY(0); }
.sybo-auth-company {
	border-top: 1px solid rgba(255,255,255,.09);
	margin: 2.35rem -24px 0;
	padding: 1.6rem 24px 0;
}
.sybo-auth-company .sybo-account-language { margin: 0 0 1.5rem; }
.sybo-auth-company .sybo-account-language > button {
	align-items: center;
	background: #11121c;
	border: 1px solid #484b60;
	border-radius: 9px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-size: .84rem;
	font-weight: 800;
	gap: .6rem;
	min-height: 52px;
	padding: .7rem .9rem;
	width: auto;
}
.sybo-auth-company .sybo-account-language__list {
	bottom: calc(100% + .55rem);
	max-height: min(52vh, 420px);
	top: auto;
	width: min(220px, calc(100vw - 48px));
	z-index: 40;
}
.sybo-auth-company > nav {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem 1rem;
}
.sybo-auth-company > nav a {
	color: #9397ae;
	font-size: .75rem;
	text-decoration: none;
}
.sybo-auth-company > nav a:hover { color: #fff; }
.sybo-auth-company > .sybo-auth-company__links {
	align-items: flex-start;
	flex-direction: column;
	gap: .55rem;
}
.sybo-auth-company .sybo-auth-company__socials { margin-top: 1.3rem; }
.sybo-auth-company__socials a {
	align-items: center;
	border: 1px solid #45485b;
	border-radius: 50%;
	display: flex;
	height: 34px;
	justify-content: center;
	width: 34px;
}

@media (max-width: 767px) {
	.sybo-auth-panel {
		border-left: 0;
		top: 0;
		width: 100%;
	}
	.sybo-auth-header {
		flex-basis: calc(62px + env(safe-area-inset-top));
		padding-top: env(safe-area-inset-top);
	}
	.sybo-auth-panel__scroll { padding-inline: max(20px, env(safe-area-inset-left)); }
	.sybo-auth-status { bottom: calc(16px + env(safe-area-inset-bottom)); }
}
.sybo-mobile-toast {
	background: #fff;
	border-radius: 999px;
	bottom: 76px;
	color: #29053a;
	font-size: .78rem;
	font-weight: 800;
	left: 50%;
	max-width: calc(100vw - 28px);
	padding: .7rem 1rem;
	position: fixed;
	text-align: center;
	transform: translateX(-50%);
	z-index: 130;
}

.sybo-mobile-search-view,
.sybo-mobile-bottom-nav { display: none; }
.sybo-mobile-home { display: none; }
.sybo-home-layout--mobile .sybo-mobile-home { display: block; }
.sybo-home-widgets { padding: 0 1.5rem; }

@media (min-width: 1201px) {
	.sybo-game-row { grid-auto-columns: calc((100% - 54px) / 7); }
	.sybo-originals-section .sybo-game-row { grid-auto-columns: 180px; }
}

@media (min-width: 1500px) {
	.sybo-game-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

@media (min-width: 1101px) {
	.sybo-search {
		left: 50%;
		position: absolute;
		transform: translateX(-50%);
		width: min(480px, 32vw);
	}
	.sybo-header__actions { margin-left: auto; }
}

@media (max-width: 1200px) {
	.sybo-desktop-continue__heading h2,
	.sybo-section__heading h1,
	.sybo-section__heading h2,
	.sybo-top-games .sybo-section__heading h1 { font-size: 26px; }
	.sybo-top-games__grid { grid-template-rows: repeat(2, 142px); }
	.sybo-game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) and (min-width: 768px) {
	.sybo-game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sybo-search { flex-basis: 330px; width: 34vw; }
	.sybo-header-icon--friends,
	.sybo-header-icon--my-games {
		padding: 0;
		width: 42px;
	}
	.sybo-header-icon--friends span,
	.sybo-header-icon--my-games span { display: none; }
}

@media (max-width: 767px) {
	:root { --sybo-header-height: 58px; }
	.sybo-body { padding-bottom: 62px; }
	#sybo-menu-toggle { display: none; }
	.sybo-header {
		gap: .45rem;
		height: 58px;
		padding: 0 .75rem;
	}
	.sybo-icon-button { height: 40px; width: 40px; }
	.sybo-brand { margin-right: auto; }
	.sybo-brand__mascot { height: 36px; width: 36px; }
	.sybo-brand__wordmark { height: 24px; width: 96px; }
	.sybo-search { display: none; }
	.sybo-header__actions { display: flex; }
	.sybo-header-icon { height: 38px; width: 38px; }
	.sybo-header-icon--friends,
	.sybo-header-icon--my-games { padding: 0; width: 38px; }
	.sybo-header-icon--friends span,
	.sybo-header-icon--my-games span { display: none; }
	.sybo-header-icon--my-games { display: none; }
	.sybo-app-button { display: inline-flex; align-items: center; }
	.sybo-login-button { display: none; }
	.sybo-user-link {
		display: none;
	}
	.sybo-view--home #sybo-menu-toggle,
	.sybo-view--home .sybo-header-icon--favorites,
	.sybo-view--home .sybo-login-button { display: none; }
	.sybo-view--home .sybo-header-icon--friends { order: 1; }
	.sybo-view--home .sybo-header-icon--notifications { order: 2; }
	.sybo-view--home .sybo-app-button { order: 3; }
	.sybo-view--game .sybo-app-button,
	.sybo-view--archive .sybo-app-button { display: none; }
	.sybo-layout { display: block; min-height: 0; }
	.sybo-main { min-height: calc(100vh - 58px); }
	.sybo-footer { display: none; }
	.sybo-home-layout--mobile .sybo-desktop-home { display: none; }
	.sybo-mobile-home {
		display: block;
		padding: 1rem .8rem 2.5rem;
	}
	.sybo-home-widgets { padding: 0 .8rem; }

	.sybo-mobile-search-view {
		background: #11121c;
		bottom: 62px;
		display: block;
		left: 0;
		opacity: 0;
		overflow: hidden;
		pointer-events: none;
		position: fixed;
		right: 0;
		top: 0;
		transform: translateY(10px);
		transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 180ms ease-out;
		visibility: hidden;
		z-index: 79;
	}
	.sybo-mobile-search-view.is-open {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
		visibility: visible;
	}
	.sybo-mobile-search-view__content {
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 .9rem;
		scrollbar-width: thin;
	}
	body.sybo-mobile-search-open {
		overflow: hidden;
	}
	body.sybo-mobile-search-open .sybo-header {
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
	}
	.sybo-mobile-search {
		align-items: center;
		background: #373952;
		border: 1px solid rgba(255, 255, 255, .08);
		border-radius: 999px;
		display: flex;
		gap: .55rem;
		margin: 0 -.15rem .5rem;
		padding: .3rem .8rem;
		position: sticky;
		top: .35rem;
		z-index: 20;
	}
	.sybo-mobile-search:focus-within {
		border-color: rgba(255, 255, 255, .16);
	}
	.sybo-mobile-search__icon {
		background: transparent;
		border: 0;
		color: #a8acc7;
		cursor: pointer;
		display: grid;
		flex: 0 0 20px;
		place-items: center;
	}
	.sybo-mobile-search__icon svg {
		fill: none;
		height: 20px;
		stroke: currentColor;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-width: 2;
		width: 20px;
	}
	.sybo-mobile-search input[type="search"] {
		background: transparent;
		border: 0;
		color: #fff;
		flex: 1;
		font: 600 .9rem "Space Grotesk", sans-serif;
		height: 36px;
		min-width: 0;
		outline: 0;
		padding: 0;
	}
	.sybo-mobile-search input[type="search"]::placeholder {
		color: #b6bad1;
		opacity: 1;
	}
	.sybo-mobile-search .sybo-autocomplete {
		left: 0;
		max-height: min(70vh, 560px);
		right: 0;
		top: calc(100% + 7px);
	}
	.sybo-mobile-discovery-quick {
		display: grid;
		gap: .45rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin: .4rem 0 2rem;
	}
	.sybo-mobile-discovery-quick__item {
		background: #17354d;
		border: 1px solid rgba(255, 255, 255, .04);
		border-radius: 13px;
		color: #55d8ff;
		display: flex;
		flex-direction: column;
		height: 104px;
		justify-content: space-between;
		min-width: 0;
		padding: .75rem .65rem;
		text-decoration: none;
	}
	.sybo-mobile-discovery-quick__item--2 {
		background: #35203c;
		color: #f05ab4;
	}
	.sybo-mobile-discovery-quick__item--3 {
		background: #17423f;
		color: #73edbb;
	}
	.sybo-mobile-discovery-quick__item span {
		font-size: 1.65rem;
		line-height: 1;
		text-align: center;
	}
	.sybo-mobile-discovery-quick__item strong {
		font-size: .9rem;
		line-height: 1.2;
		max-width: 82px;
	}
	.sybo-mobile-discovery-section {
		margin-bottom: .9rem;
	}
	.sybo-mobile-discovery-section > h2 {
		color: #fff;
		font-family: "Nunito", sans-serif;
		font-size: 20px;
		font-weight: 900;
		letter-spacing: -.4px;
		line-height: 1.1;
		margin: 0 0 .65rem;
	}
	.sybo-mobile-discovery-featured {
		display: grid;
		gap: .65rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.sybo-mobile-discovery-featured a {
		background: #282a40;
		border: 1px solid rgba(255, 255, 255, .04);
		border-radius: 14px;
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 72px;
		padding: .75rem .85rem;
		text-decoration: none;
	}
	.sybo-mobile-discovery-featured a:active {
		background: #30334d;
	}
	.sybo-mobile-discovery-featured span {
		color: #9299ff;
		display: grid;
		height: 25px;
		place-items: center start;
		width: 25px;
	}
	.sybo-mobile-discovery-featured svg,
	.sybo-mobile-discovery-categories span svg {
		fill: none;
		height: 100%;
		stroke: currentColor;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-width: 1.8;
		width: 100%;
	}
	.sybo-mobile-discovery-featured strong {
		font-size: .92rem;
	}
	.sybo-mobile-discovery-categories {
		margin-bottom: 0;
		margin-top: 1rem;
	}
	.sybo-mobile-discovery-categories nav {
		display: grid;
	}
	.sybo-mobile-discovery-categories a {
		align-items: center;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
		color: #fff;
		display: grid;
		gap: .85rem;
		grid-template-columns: 28px minmax(0, 1fr) 18px;
		min-height: 56px;
		padding: .25rem .2rem;
		text-decoration: none;
	}
	.sybo-mobile-discovery-categories a:active {
		background: rgba(255, 255, 255, .035);
	}
	.sybo-mobile-discovery-categories a:last-child {
		border-bottom: 0;
	}
	.sybo-mobile-discovery-categories a > span {
		color: #9299ff;
		display: grid;
		height: 27px;
		place-items: center;
		width: 27px;
	}
	.sybo-mobile-discovery-categories a > strong {
		font-size: .91rem;
	}
	.sybo-mobile-discovery-categories__chevron {
		fill: none;
		height: 18px;
		stroke: #85899e;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-width: 1.8;
		width: 18px;
	}
	[dir="rtl"] .sybo-mobile-discovery-categories__chevron {
		transform: rotate(180deg);
	}

	.sybo-mobile-section { margin-bottom: 2rem; }
	.sybo-mobile-heading {
		align-items: center;
		display: flex;
		justify-content: space-between;
		margin-bottom: .8rem;
	}
	.sybo-mobile-heading h2 {
		color: #fff;
		font-family: "Nunito", sans-serif;
		font-size: 23px;
		font-weight: 900;
		letter-spacing: -.6px;
		line-height: 1.1;
		margin: 0;
	}
	.sybo-mobile-curated__heading h2 {
		color: #fff;
		font-family: "Nunito", sans-serif;
		font-size: 23px;
		font-weight: 900;
		letter-spacing: -.6px;
		line-height: 1.1;
	}
	.sybo-mobile-heading span { font-size: 1.7rem; }
	.sybo-mobile-scroll {
		display: grid;
		gap: .55rem;
		grid-auto-columns: 82px;
		grid-auto-flow: column;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.sybo-mobile-scroll::-webkit-scrollbar { display: none; }
	.sybo-mobile-scroll .sybo-game-card { aspect-ratio: 1; }
	.sybo-mobile-scroll--wide { grid-auto-columns: 132px; }
	.sybo-mobile-scroll--wide .sybo-game-card { aspect-ratio: 1; }
	.sybo-mobile-scroll--portrait {
		gap: .55rem;
		grid-auto-columns: clamp(96px, 27vw, 112px);
		scroll-snap-type: inline proximity;
	}
	.sybo-mobile-scroll--portrait > div {
		scroll-snap-align: start;
	}
	.sybo-mobile-scroll--portrait .sybo-game-card {
		aspect-ratio: 3 / 4;
	}
	.sybo-mobile-featured-games {
		background: linear-gradient(180deg, rgba(93, 31, 68, .82), rgba(30, 27, 40, .96));
		border: 1px solid rgba(255, 255, 255, .1);
		border-radius: 16px;
		margin-inline: -.15rem;
		padding: .85rem;
	}
	.sybo-mobile-new-games {
		background: #11121c;
		border: 1px solid rgba(255, 255, 255, .08);
		border-radius: 16px;
		margin-inline: -.15rem;
		overflow: hidden;
		padding: 0 .85rem .9rem;
	}
	.sybo-mobile-new-games__heading {
		background: linear-gradient(90deg, rgba(88, 65, 18, .72), rgba(48, 39, 18, .38));
		margin: 0 -.85rem .85rem;
		padding: .85rem;
	}
	.sybo-mobile-new-games__heading h2 {
		align-items: center;
		display: flex;
		gap: .35rem;
	}
	.sybo-mobile-new-games__heading h2 > span {
		color: #ffbf4a;
		font-size: 1.05em;
	}
	.sybo-mobile-new-games__top {
		display: grid;
		gap: .5rem;
		grid-auto-columns: clamp(84px, 24vw, 98px);
		grid-auto-flow: column;
		margin-bottom: .85rem;
		overflow-x: auto;
		scroll-snap-type: inline proximity;
		scrollbar-width: none;
	}
	.sybo-mobile-new-games__top::-webkit-scrollbar {
		display: none;
	}
	.sybo-mobile-new-games__top .sybo-game-card {
		aspect-ratio: 3 / 4;
		scroll-snap-align: start;
	}
	.sybo-mobile-new-games__top .sybo-game-card__content,
	.sybo-mobile-new-games__top .sybo-game-card__shade {
		display: none;
	}
	.sybo-mobile-new-games__feature {
		margin-bottom: .85rem;
	}
	.sybo-mobile-new-games__grid {
		display: grid;
		gap: .7rem .55rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.sybo-mobile-new-games__grid .sybo-game-card {
		aspect-ratio: 1 / 1;
	}
	.sybo-mobile-new-games__grid .sybo-game-card__content,
	.sybo-mobile-new-games__grid .sybo-game-card__shade {
		display: none;
	}
	.sybo-mobile-new-games__grid > div > strong {
		display: block;
		font-size: .7rem;
		margin-top: .35rem;
		overflow: hidden;
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.sybo-mobile-heading h2 .sybo-mobile-heading__featured-icon {
		color: #ffbf4a;
		display: inline;
		font-family: inherit;
		font-size: .9em;
		margin-inline-end: .35rem;
		vertical-align: .04em;
	}
	.sybo-mobile-scroll > div > strong {
		display: block;
		font-size: .75rem;
		margin-top: .35rem;
		overflow: hidden;
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.sybo-mobile-scroll .sybo-game-card__content,
	.sybo-mobile-scroll .sybo-game-card__shade { display: none; }
	.sybo-mobile-category-section .sybo-category-all-card__link { padding: 14px; }
	.sybo-mobile-category-section .sybo-category-all-card__link strong {
		font-size: 13px;
		max-width: 100%;
	}
	.sybo-mobile-category-section .sybo-category-all-card__link svg {
		height: 32px;
		width: 32px;
	}

	.sybo-mobile-feature {
		aspect-ratio: 16 / 9;
		border: 1px solid rgba(255, 255, 255, .3);
		border-radius: 13px;
		display: block;
		margin-bottom: .7rem;
		overflow: hidden;
		position: relative;
	}
	.sybo-mobile-feature::after {
		background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .85));
		content: "";
		inset: 0;
		position: absolute;
	}
	.sybo-mobile-feature img { height: 100%; object-fit: cover; width: 100%; }
	.sybo-mobile-feature span {
		bottom: .75rem;
		display: grid;
		left: .8rem;
		position: absolute;
		z-index: 2;
	}
	.sybo-mobile-feature small { color: rgba(255, 255, 255, .7); }
	.sybo-mobile-feature > b {
		background: #086cec;
		border-radius: 999px;
		bottom: .7rem;
		padding: .55rem .9rem;
		position: absolute;
		right: .7rem;
		z-index: 2;
	}
	.sybo-mobile-picks__grid {
		display: grid;
		gap: .65rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.sybo-mobile-picks__grid .sybo-game-card { aspect-ratio: 1; }
	.sybo-mobile-picks__grid > div > strong {
		display: block;
		font-size: .75rem;
		margin-top: .35rem;
		overflow: hidden;
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.sybo-mobile-picks__grid .sybo-game-card__content,
	.sybo-mobile-picks__grid .sybo-game-card__shade { display: none; }

	.sybo-mobile-curated {
		background: linear-gradient(135deg, rgba(8, 108, 236, .14), rgba(63, 237, 253, .04));
		border: 1px solid rgba(255, 255, 255, .09);
		border-radius: 16px;
		margin-inline: -.15rem;
		padding: .9rem;
	}
	.sybo-mobile-curated__heading {
		align-items: center;
		display: grid;
		gap: .65rem;
		grid-template-columns: 42px minmax(0, 1fr) 24px;
		margin-bottom: .8rem;
	}
	.sybo-mobile-curated__heading > span { font-size: 1.8rem; }
	.sybo-mobile-curated__heading h2 {
		color: #fff;
		font-family: "Nunito", sans-serif;
		font-size: 23px;
		font-weight: 900;
		letter-spacing: -.6px;
		line-height: 1.1;
		margin: 0;
	}
	.sybo-mobile-curated__heading p { color: rgba(255, 255, 255, .6); font-size: .7rem; line-height: 1.35; margin: .15rem 0 0; }
	.sybo-mobile-curated__heading > a { font-size: 1.7rem; text-decoration: none; }

	.sybo-mobile-leaderboard__hero {
		background: #10111c;
		border: 1px solid rgba(255, 255, 255, .08);
		border-radius: 14px;
		height: 128px;
		margin: 0 0 .75rem;
		overflow: hidden;
	}
	.sybo-mobile-leaderboard__hero img { height: 100%; object-fit: cover; width: 100%; }
	.sybo-mobile-leaderboard__list { display: grid; gap: .45rem; }
	.sybo-mobile-leaderboard__list a {
		align-items: center;
		background: #321044;
		border: 1px solid rgba(255, 255, 255, .08);
		border-radius: 12px;
		display: grid;
		gap: .65rem;
		grid-template-columns: 22px 46px minmax(0, 1fr) auto;
		padding: .45rem .65rem;
		text-decoration: none;
	}
	.sybo-mobile-leaderboard__list > a > b { color: #fca705; text-align: center; }
	.sybo-mobile-leaderboard__list img { border-radius: 8px; height: 42px; object-fit: cover; width: 46px; }
	.sybo-mobile-leaderboard__list span strong,
	.sybo-mobile-leaderboard__list span small { display: block; }
	.sybo-mobile-leaderboard__list span strong { font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.sybo-mobile-leaderboard__list span small { color: rgba(255, 255, 255, .5); font-size: .63rem; }
	.sybo-mobile-leaderboard__list em { color: #fca705; font-size: .7rem; font-style: normal; font-weight: 800; }

	.sybo-mobile-desktop-only {
		background: #321044;
		border-radius: 16px;
		padding: 1rem;
	}
	.sybo-mobile-desktop-only > p { color: rgba(255, 255, 255, .62); font-size: .75rem; margin: -.45rem 0 .9rem; }
	.sybo-mobile-seo {
		background: #321044;
		border: 1px solid rgba(255, 255, 255, .1);
		border-radius: 16px;
		padding: 1.2rem;
	}
	.sybo-mobile-seo h2 { font-family: Sora, sans-serif; font-size: 1.2rem; margin: 0; }
	.sybo-mobile-seo p { color: rgba(255, 255, 255, .65); font-size: .82rem; line-height: 1.55; }
	.sybo-mobile-seo button { background: transparent; border: 0; color: #3fedfd; cursor: pointer; font-weight: 800; padding: 0; }

	.sybo-mobile-category-info {
		background: #1a1b28;
		border: 1px solid rgba(255, 255, 255, .1);
		border-radius: 14px;
		margin-bottom: 1.1rem;
		padding: 1.2rem;
	}
	.sybo-mobile-category-info h2 {
		color: #fff;
		font-family: "Nunito", sans-serif;
		font-size: 23px;
		font-weight: 900;
		letter-spacing: -.5px;
		line-height: 1.15;
		margin: 0 0 .8rem;
	}
	.sybo-mobile-category-info p {
		color: #b7b9cb;
		font-size: .82rem;
		line-height: 1.52;
		margin: 0 0 .8rem;
	}
	.sybo-mobile-category-info button {
		background: transparent;
		border: 0;
		color: #9275ff;
		cursor: pointer;
		font: inherit;
		font-weight: 800;
		padding: 0;
	}

	.sybo-mobile-categories {
		display: flex;
		gap: .6rem;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-inline: contain;
		scroll-behavior: smooth;
		scroll-snap-type: inline mandatory;
		scrollbar-width: none;
		touch-action: pan-x pan-y;
		-webkit-overflow-scrolling: touch;
	}
	.sybo-mobile-categories::-webkit-scrollbar {
		display: none;
	}
	.sybo-mobile-categories__page {
		display: grid;
		flex: 0 0 100%;
		gap: .6rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: repeat(2, minmax(88px, auto));
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
	.sybo-mobile-categories a {
		align-items: center;
		background: #321044;
		border: 1px solid rgba(255, 255, 255, .1);
		border-radius: 12px;
		display: flex;
		flex-direction: column;
		gap: .35rem;
		min-height: 88px;
		justify-content: center;
		padding: .6rem;
		text-align: center;
		text-decoration: none;
	}
	.sybo-mobile-categories__icon {
		color: #9390ff;
		display: block;
		height: 25px;
		width: 25px;
	}
	.sybo-mobile-categories__icon svg {
		fill: none;
		height: 100%;
		stroke: currentColor;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-width: 1.9;
		width: 100%;
	}
	.sybo-mobile-categories strong { font-size: .68rem; }

	.sybo-mobile-bottom-nav {
		background: #1b0327;
		border-top: 1px solid rgba(255, 255, 255, .08);
		bottom: 0;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		height: 62px;
		left: 0;
		position: fixed;
		right: 0;
		z-index: 80;
	}
	.sybo-mobile-bottom-nav a,
	.sybo-mobile-bottom-nav button {
		align-items: center;
		background: transparent;
		border: 0;
		color: rgba(255, 255, 255, .72);
		display: flex;
		flex-direction: column;
		gap: 2px;
		justify-content: center;
		min-height: 44px;
		padding: 4px 2px 3px;
		text-decoration: none;
	}
	.sybo-mobile-bottom-nav [data-sybo-mobile-nav].is-active { color: #fff; }
	.sybo-mobile-bottom-nav b {
		font: 800 10px/1.1 "Nunito", sans-serif;
		white-space: nowrap;
	}
	.sybo-mobile-bottom-nav .sybo-mobile-nav-icon {
		display: grid;
		height: 22px;
		place-items: center;
		width: 22px;
	}
	.sybo-mobile-bottom-nav .sybo-mobile-nav-icon svg {
		fill: none;
		height: 22px;
		stroke: currentColor;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-width: 1.9;
		width: 22px;
	}
	.sybo-mobile-bottom-nav .sybo-mobile-nav-avatar {
		background: #282a40;
		border: 2px solid #6b45ff;
		border-radius: 50%;
		display: block;
		height: 28px;
		overflow: hidden;
		padding: 1px;
		width: 28px;
	}
	.sybo-mobile-bottom-nav .sybo-mobile-nav-avatar img {
		border-radius: inherit;
		display: block;
		height: 100%;
		object-fit: cover;
		width: 100%;
	}

	.sybo-panel-backdrop { inset: 0; }
	.sybo-side-panel {
		border: 0;
		border-radius: 0;
		bottom: 0;
		right: 0;
		top: 0;
		width: 100%;
	}
	.sybo-friends-panel { border-radius: 0; }
	.sybo-friends-panel__body {
		padding-bottom: calc(1rem + env(safe-area-inset-bottom));
	}
	.sybo-friends-panel__image { height: 60%; }
	.sybo-auth-panel { width: 100%; }

	.sybo-page:not(.sybo-home) { padding: 1rem .75rem 2rem; }
	.sybo-archive-hero { padding: .5rem 0 1.3rem; }
	.sybo-archive-hero h1 { font-size: 2.25rem; }
	.sybo-archive-toolbar { padding: 0 0 .8rem; }
	.sybo-archive-toolbar label > span { display: none; }
	.sybo-game-grid { gap: .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
	.sybo-archive-description { margin: 2rem 0 0; padding: 1.2rem; }
	.sybo-tags-index { padding: 1rem .8rem 2rem; }
	.sybo-tags-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sybo-game-card__content,
	.sybo-game-card__shade { opacity: 1; }

	.sybo-game-layout { display: block; }
	.sybo-player-card { padding: .55rem; }
	.sybo-game-frame { position: relative; }
	.sybo-progress-notice { flex-wrap: wrap; }
	.sybo-progress-notice strong { flex: 1 0 100%; text-align: center; }
	.sybo-player-bar { align-items: center; flex-direction: row; }
	.sybo-player-bar h1 { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.sybo-game-actions { flex-wrap: nowrap; }
	.sybo-game-actions button,
	.sybo-game-actions a { padding: .4rem; }
	.sybo-game-aside { margin-top: .8rem; }
	.sybo-content-card { padding: 1.1rem; }
	.sybo-bottom-actions { align-items: stretch; flex-direction: row; }

	#cookieConsentBanner { bottom: 62px !important; }
}

@media (max-width: 420px) {
	.sybo-login-button { padding-inline: .75rem; }
	.sybo-view--game .sybo-header-icon,
	.sybo-view--archive .sybo-header-icon { height: 34px; width: 34px; }
}

@media (max-width: 350px) {
	.sybo-brand__wordmark { height: 22px; width: 82px; }
}

/* Individual game page: compact CrazyGames-inspired player and content rail. */
body.sybo-view--game {
	--sybo-header-height: 58px;
	background: #0c0d15;
}
.sybo-view--game .sybo-header {
	background: #232435;
	height: 58px;
}
.sybo-view--game .sybo-main { background: #0c0d15; }
.sybo-view--game.sybo-sidebar-collapsed .sybo-sidebar {
	background: #0f1019;
	flex-basis: 60px;
	top: 58px;
	width: 60px;
}
.sybo-view--game.sybo-sidebar-collapsed .sybo-sidebar__nav {
	padding: 12px 8px;
}
.sybo-view--game.sybo-sidebar-collapsed .sybo-nav-item {
	border-radius: 9px;
	min-height: 34px;
	padding: 7px 4px;
}
.sybo-view--game.sybo-sidebar-collapsed .sybo-nav-item > span svg {
	height: 18px;
	stroke: #939af8;
	width: 18px;
}
.sybo-view--game .sybo-page.sybo-game-page {
	padding: 18px 8px 48px 16px;
}
.sybo-view--game .sybo-game-layout {
	align-items: start;
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr) 358px;
}
.sybo-game-primary { min-width: 0; }
.sybo-player-stage {
	align-items: flex-start;
	display: flex;
	justify-content: center;
	width: 100%;
}
.sybo-view--game .sybo-player-card {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	max-width: 1176px;
	overflow: visible;
	padding: 0;
	width: 100%;
}
.sybo-view--game .sybo-game-frame {
	aspect-ratio: 1176 / 618;
	background: #11131d;
	overflow: hidden;
	position: relative;
	width: 100%;
}
.sybo-game-launch {
	align-items: center;
	background: #11131d;
	display: flex;
	inset: 0;
	justify-content: center;
	overflow: hidden;
	position: absolute;
	z-index: 8;
}
.sybo-game-launch.is-hidden { display: none; }
.sybo-game-launch__media {
	inset: 0;
	overflow: hidden;
	position: absolute;
}
.sybo-game-launch::after {
	background: rgba(7, 8, 14, .5);
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}
.sybo-game-launch__backdrop {
	filter: blur(20px) brightness(.58) saturate(1.15);
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	transform: scale(1.1);
	width: 100%;
}
.sybo-game-launch__preview {
	display: none;
}
.sybo-game-launch__content {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: min(760px, 82%);
	position: relative;
	text-align: center;
	z-index: 2;
}
.sybo-game-launch__icon {
	aspect-ratio: 1;
	border: 2px solid rgba(255, 255, 255, .45);
	border-radius: 12px;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .42);
	height: 136px;
	object-fit: cover;
	width: 136px;
}
.sybo-game-launch strong {
	color: #fff;
	font-family: "Nunito", sans-serif;
	font-size: clamp(28px, 2.3vw, 38px);
	font-weight: 900;
	letter-spacing: -.7px;
	line-height: 1.12;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .7);
}
.sybo-game-launch small {
	color: rgba(255, 255, 255, .82);
	display: none;
	font-size: 15px;
	font-weight: 700;
}
.sybo-game-launch button {
	align-items: center;
	background: #6843ff;
	border: 0;
	border-radius: 999px;
	box-shadow: 0 10px 26px rgba(36, 15, 92, .45);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font: 900 20px "Nunito", sans-serif;
	gap: 10px;
	justify-content: center;
	min-height: 58px;
	padding: 12px 34px;
	transition: background 180ms ease-out, transform 180ms ease-out;
}
.sybo-game-launch button:hover {
	background: #795aff;
	transform: translateY(-1px);
}
.sybo-game-launch button:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}
.sybo-game-launch button svg {
	fill: currentColor;
	height: 24px;
	width: 24px;
}
.sybo-game-launch__mobile-label { display: none; }
.sybo-view--game .sybo-progress-notice {
	align-items: center;
	background: rgba(73, 41, 77, .94);
	border: 0;
	border-radius: 7px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
	display: flex;
	gap: 10px;
	height: 46px;
	left: 10px;
	margin: 0;
	min-height: 0;
	padding: 6px 12px;
	position: absolute;
	right: 10px;
	top: 10px;
	transition: opacity 200ms ease-out, transform 200ms ease-out;
	z-index: 12;
}
.sybo-view--game .sybo-progress-notice[hidden] { display: none !important; }
.sybo-view--game .sybo-progress-notice.is-dismissing {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-6px);
}
.sybo-view--game .sybo-progress-notice strong {
	color: #f3a7ca;
	font-size: 12px;
}
.sybo-progress-notice__actions {
	align-items: center;
	display: flex;
	gap: 8px;
}
.sybo-view--game .sybo-progress-notice button {
	background: #39394f;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 999px;
	font-size: 13px;
	min-height: 34px;
	padding: 5px 18px;
}
.sybo-view--game .sybo-progress-notice .sybo-progress-notice__login {
	background: #fff;
	color: #171825;
}
.sybo-view--game .sybo-player-bar {
	align-items: center;
	background: #232435;
	border-radius: 0;
	display: flex;
	gap: 12px;
	height: 44px;
	justify-content: space-between;
	padding: 5px 8px;
}
.sybo-player-identity {
	align-items: center;
	display: flex;
	gap: 8px;
	min-width: 0;
}
.sybo-view--game .sybo-player-bar__thumb {
	border-radius: 7px;
	grid-row: auto;
	height: 24px;
	width: 24px;
}
.sybo-view--game .sybo-player-bar h1 {
	font: 700 14px "Space Grotesk", sans-serif;
	margin: 0;
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sybo-view--game .sybo-game-actions {
	align-items: center;
	flex-wrap: nowrap;
	gap: 7px;
}
.sybo-view--game .sybo-game-actions button,
.sybo-view--game .sybo-game-actions a {
	align-items: center;
	background: #343548;
	border: 0;
	border-radius: 999px;
	color: #f8f8fc;
	display: inline-flex;
	font-size: 11px;
	font-weight: 700;
	gap: 6px;
	height: 32px;
	justify-content: center;
	min-height: 0;
	min-width: 40px;
	padding: 5px 10px;
}
.sybo-view--game .sybo-game-actions button:hover,
.sybo-view--game .sybo-game-actions a:hover {
	background: #45465d;
	color: #fff;
}
.sybo-view--game .sybo-game-actions svg,
.sybo-game-share-button svg {
	fill: none;
	height: 18px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
	width: 18px;
}
.sybo-view--game .sybo-game-actions #favorite.is-active {
	background: #6843ff;
	color: #fff;
}
.sybo-game-banner {
	align-items: center;
	background: #12131d;
	display: flex;
	height: 110px;
	justify-content: center;
	margin: 0;
	min-height: 110px;
	overflow: hidden;
	position: relative;
}
.sybo-game-banner__slot {
	align-items: center;
	background: #181925;
	display: flex;
	height: 90px;
	justify-content: center;
	overflow: hidden;
	width: min(970px, calc(100% - 20px));
}
.sybo-game-banner__slot > * {
	margin: 0 !important;
	max-height: 90px;
	max-width: 970px !important;
}
.sybo-game-banner > span {
	bottom: 1px;
	color: #9da2bf;
	font-size: 10px;
	position: absolute;
}
.sybo-game-info-grid {
	align-items: start;
	background: #12131d;
	display: grid;
	gap: 8px;
	grid-template-columns: minmax(0, 1fr) 310px;
	margin-top: 8px;
}
.sybo-game-info-main { min-width: 0; }
.sybo-view--game .sybo-content-card {
	background: #12131d;
	border: 0;
	border-radius: 14px;
	box-shadow: none;
	margin-top: 8px;
	padding: 24px;
}
.sybo-view--game .sybo-game-details-card {
	border-radius: 0;
	margin: 8px 0 0;
	min-width: 0;
}
.sybo-game-breadcrumb {
	align-items: center;
	color: #8e77ff;
	display: flex;
	flex-wrap: wrap;
	font-size: 12px;
	font-weight: 700;
	gap: 6px;
	margin-bottom: 18px;
}
.sybo-game-breadcrumb a {
	color: #8e77ff;
	text-decoration: none;
}
.sybo-game-breadcrumb strong {
	color: #b6a8ff;
	font-weight: 700;
}
.sybo-view--game .sybo-game-details-title {
	font: 800 27px Sora, sans-serif;
	letter-spacing: -.035em;
	margin: 0 0 16px;
}
.sybo-game-share-button {
	align-items: center;
	background: #3b3c55;
	border: 0;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font: 700 14px "Space Grotesk", sans-serif;
	gap: 8px;
	min-height: 36px;
	padding: 7px 17px;
}
.sybo-game-meta {
	margin: 12px 0 18px;
}
.sybo-game-meta > div {
	display: grid;
	font-size: 15px;
	gap: 10px;
	grid-template-columns: 98px minmax(0, 1fr);
	line-height: 1.45;
	margin: 9px 0;
}
.sybo-game-meta dt { color: #858baa; }
.sybo-game-meta dd {
	color: #f4f4fa;
	font-weight: 700;
	margin: 0;
}
.sybo-game-meta dd strong { color: #fff; }
.sybo-game-meta dd small {
	color: #fff;
	font-size: 11px;
}
.sybo-game-meta > div:first-child dd { color: #8f6eff; }
.sybo-game-taxonomy {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.sybo-game-taxonomy a {
	background: #242538;
	border-radius: 8px;
	color: #a7abc7;
	font-size: 14px;
	font-weight: 700;
	padding: 9px 16px;
	text-decoration: none;
}
.sybo-game-taxonomy b {
	color: #8e6bff;
	margin-left: 5px;
}
.sybo-view--game .sybo-game-store-card {
	align-items: center;
	display: flex;
	justify-content: center;
	margin-top: 8px;
	min-height: 86px;
	padding: 16px 20px;
}
.sybo-game-store-links {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	max-width: 100%;
}
.sybo-store-badge {
	align-items: center;
	background: #050505;
	border: 1px solid rgba(255,255,255,.42);
	border-radius: 8px;
	box-sizing: border-box;
	color: #fff;
	display: inline-flex;
	flex: 0 0 auto;
	gap: 7px;
	height: 40px;
	justify-content: flex-start;
	min-height: 0;
	min-width: 0;
	padding: 4px 9px;
	text-decoration: none;
	transition: border-color 160ms ease, transform 160ms ease;
	width: auto;
}
.sybo-store-badge--apple { min-width: 126px; }
.sybo-store-badge--google { min-width: 140px; }
.sybo-store-badge--steam { min-width: 128px; }
.sybo-store-badge:hover {
	border-color: #fff;
	color: #fff;
	transform: translateY(-1px);
}
.sybo-store-badge:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.sybo-store-badge svg { fill: currentColor; flex: 0 0 22px; height: 24px; max-width: 22px; object-fit: contain; width: 22px; }
.sybo-store-badge--google svg { flex-basis: 20px; height: 24px; max-width: 20px; width: 20px; }
.sybo-store-badge span { display: flex; flex-direction: column; line-height: 1; }
.sybo-store-badge small { color: #fff; font-size: 7.5px; font-weight: 500; letter-spacing: .01em; line-height: 1.1; }
.sybo-store-badge strong { color: #fff; font: 600 15px/1.08 "Space Grotesk", sans-serif; white-space: nowrap; }
.sybo-details-ad {
	align-items: center;
	background: #181925;
	display: flex;
	height: 250px;
	justify-content: center;
	justify-self: start;
	min-height: 250px;
	overflow: hidden;
	position: relative;
	width: 300px;
}
.sybo-details-ad > span {
	bottom: 2px;
	color: #9da2bf;
	font-size: 11px;
	position: absolute;
}
.sybo-details-ad__slot {
	align-items: center;
	display: flex;
	height: 250px;
	justify-content: center;
	overflow: hidden;
	width: 300px;
}
.sybo-details-ad__slot > * {
	margin: 0 !important;
	max-height: 250px;
	max-width: 300px !important;
}
.sybo-view--game .sybo-game-description-card {
	color: #afb4d0;
	line-height: 1.55;
	margin-top: 8px;
	min-height: 190px;
}
.sybo-view--game .sybo-game-description-card h2 {
	color: #fff;
	opacity: 1;
}
.sybo-view--game .sybo-rich-text {
	color: #afb4d0;
	font-size: 15px;
	line-height: 1.55;
}
.sybo-game-controls {
	margin-top: 24px;
	scroll-margin-top: 70px;
}
.sybo-view--game .sybo-game-controls h2 {
	font: 800 19px Sora, sans-serif;
	margin: 0 0 14px;
}
.sybo-back-to-game {
	background: #6843ff;
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-size: 14px;
	font-weight: 800;
	left: 50%;
	margin: 0;
	opacity: 0;
	padding: 14px 24px;
	pointer-events: none;
	position: fixed;
	bottom: 24px;
	text-decoration: none;
	transform: translate(-50%, 12px);
	transition:
		opacity 200ms ease-out,
		transform 200ms ease-out,
		visibility 200ms ease-out;
	visibility: hidden;
	white-space: nowrap;
	z-index: 125;
}
.sybo-back-to-game.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
	visibility: visible;
}
.sybo-view--game .sybo-game-aside {
	align-self: stretch;
	background: #11121c;
	margin: 0;
	min-width: 0;
	padding: 18px 20px 32px;
}
.sybo-game-rail-ad {
	align-items: center;
	background: #1a1b29;
	display: flex;
	height: 268px;
	justify-content: center;
	margin-bottom: 10px;
	overflow: hidden;
	position: relative;
}
.sybo-game-rail-ad > span {
	bottom: 1px;
	color: #b0b3ca;
	font-size: 11px;
	position: absolute;
}
.sybo-game-rail-ad > *:not(span) {
	margin: 0 !important;
	max-height: 250px;
	max-width: 100% !important;
	overflow: hidden;
}
.sybo-play-next h2 {
	font: 800 16px Sora, sans-serif;
	margin: 10px 0 12px;
}
.sybo-play-next__list {
	display: grid;
	gap: 10px;
}
.sybo-play-next__item[hidden] {
	display: none !important;
}
.sybo-play-next .sybo-game-card {
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 8px;
	width: 100%;
}
.sybo-play-next .sybo-game-card:hover { border-color: transparent; }
.sybo-play-next .sybo-game-card__content,
.sybo-play-next .sybo-game-card__shade { display: none; }
.sybo-play-next__more {
	align-items: center;
	background: #373952;
	border: 0;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	display: flex;
	font: 900 14px/1 "Nunito", sans-serif;
	gap: 7px;
	justify-content: center;
	margin-top: 14px;
	min-height: 42px;
	padding: 10px 16px;
	width: 100%;
}
.sybo-play-next__more:hover {
	background: #474a68;
}
.sybo-play-next__more span {
	font-size: 23px;
	font-weight: 400;
	line-height: .7;
}
.sybo-play-next__more:focus-visible {
	outline: 3px solid #8a70ff;
	outline-offset: 2px;
}

@media (max-width: 1480px) {
	.sybo-view--game .sybo-game-layout { grid-template-columns: minmax(0, 1fr) 328px; }
	.sybo-view--game .sybo-game-aside { padding-inline: 14px; }
	.sybo-game-info-grid { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 1100px) {
	.sybo-view--game .sybo-game-layout { display: block; }
	.sybo-view--game .sybo-game-aside { display: none; }
	.sybo-view--game .sybo-player-card { max-width: none; }
}

@media (max-width: 767px) {
	.sybo-view--game .sybo-page.sybo-game-page { padding: 0 0 78px; }
	.sybo-view--game.sybo-sidebar-collapsed .sybo-sidebar {
		top: 58px;
		width: min(280px, 88vw);
	}
	.sybo-view--game .sybo-game-frame { aspect-ratio: 16 / 10; }
	.sybo-view--game .sybo-game-frame.is-awaiting-play {
		aspect-ratio: auto;
		height: auto;
		min-height: 0;
	}
	.sybo-game-launch {
		align-items: stretch;
		background: #11121c;
		flex-direction: column;
		inset: auto;
		justify-content: flex-start;
		position: relative;
	}
	.sybo-game-launch::after { display: none; }
	.sybo-game-launch__media {
		aspect-ratio: 16 / 9;
		background: #11131d;
		flex: 0 0 auto;
		inset: auto;
		position: relative;
		width: 100%;
	}
	.sybo-game-launch__media::after {
		background: linear-gradient(180deg, rgba(8, 9, 15, .06) 20%, rgba(17, 18, 28, .55) 55%, #11121c 91%);
		content: "";
		inset: 0;
		position: absolute;
		z-index: 1;
	}
	.sybo-game-launch__backdrop {
		filter: brightness(.72) saturate(1.05);
		transform: none;
	}
	.sybo-game-launch__preview {
		display: block;
		height: 100%;
		inset: 0;
		object-fit: cover;
		opacity: 0;
		pointer-events: none;
		position: absolute;
		transition: opacity 180ms ease-out;
		width: 100%;
		z-index: 0;
	}
	.sybo-game-launch.has-active-preview .sybo-game-launch__preview { opacity: 1; }
	.sybo-game-launch.has-active-preview .sybo-game-launch__backdrop { opacity: 0; }
	.sybo-game-launch__content {
		gap: 9px;
		margin: -42px auto 18px;
		max-width: calc(100% - 34px);
		width: 100%;
	}
	.sybo-game-launch__icon {
		aspect-ratio: 16 / 9;
		border-radius: 14px;
		height: auto;
		max-width: 190px;
		width: 52vw;
	}
	.sybo-game-launch strong {
		font-size: 23px;
		letter-spacing: -.5px;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.sybo-game-launch small {
		display: block;
		margin-bottom: 4px;
	}
	.sybo-game-launch button {
		font-size: 17px;
		min-height: 48px;
		width: min(280px, 88%);
	}
	.sybo-game-launch__desktop-label { display: none; }
	.sybo-game-launch__mobile-label { display: inline; }
	.sybo-view--game .sybo-progress-notice {
		background: rgba(73, 41, 77, .96);
		border-radius: 9px;
		flex-wrap: nowrap;
		gap: 7px;
		height: auto;
		left: 8px;
		min-height: 42px;
		padding: 5px 7px 5px 10px;
		right: 8px;
		top: 8px;
	}
	.sybo-view--game .sybo-progress-notice strong {
		flex: 1 1 auto;
		font-size: 11px;
		line-height: 1.2;
		text-align: left;
	}
	.sybo-view--game .sybo-progress-notice button {
		font-size: 11px;
		min-height: 30px;
		padding: 4px 10px;
		white-space: nowrap;
	}
	.sybo-progress-notice__actions { flex: 0 0 auto; gap: 5px; }
	.sybo-mobile-game-mode .sybo-progress-notice {
		top: calc(max(8px, env(safe-area-inset-top)) + 48px);
		z-index: 29;
	}
	.sybo-view--game .sybo-player-bar {
		border-radius: 0;
		height: 48px;
		padding: 6px 8px;
	}
	.sybo-view--game .sybo-player-bar h1 { max-width: 105px; }
	.sybo-view--game .sybo-game-actions {
		overflow-x: auto;
		scrollbar-width: none;
	}
	.sybo-view--game .sybo-game-actions::-webkit-scrollbar { display: none; }
	.sybo-view--game .sybo-game-actions button { flex: 0 0 34px; height: 34px; min-width: 34px; padding: 6px; }
	.sybo-game-banner {
		margin: 0;
		min-height: 76px;
	}
	.sybo-game-info-grid {
		display: block;
		margin: 8px;
	}
	.sybo-details-ad { display: none; }
	.sybo-view--game .sybo-content-card {
		border-radius: 12px;
		margin: 8px;
		padding: 18px;
	}
	.sybo-view--game .sybo-game-details-card { margin: 8px 0 0; }
	.sybo-view--game .sybo-game-details-title { font-size: 22px; }
	.sybo-game-meta > div {
		font-size: 13px;
		grid-template-columns: 82px minmax(0, 1fr);
	}
	.sybo-game-taxonomy a { font-size: 12px; padding: 8px 10px; }
	.sybo-back-to-game {
		bottom: calc(72px + env(safe-area-inset-bottom));
		max-width: calc(100vw - 32px);
		padding: 12px 20px;
	}
}

@media (min-width: 768px) {
	body.sybo-view--game.sybo-sidebar-collapsed .sybo-sidebar {
		border-right: 0;
		flex-basis: 0;
		opacity: 0;
		overflow: hidden;
		pointer-events: none;
		transform: translateX(-100%);
		visibility: hidden;
		width: 0;
	}
}

/* Unified neutral surface: replaces the former #321044 purple panel color. */
.sybo-icon-button,
.sybo-category-rail a,
.sybo-category-rail__arrow,
.sybo-game-card,
.sybo-info-block,
.sybo-content-card,
.sybo-aside-card,
.sybo-article,
.sybo-post-card,
.sybo-button--secondary,
.sybo-archive-sort,
.sybo-archive-description,
.sybo-pagination__link,
.sybo-dialog,
.sybo-tags-grid a,
.sybo-game-aside .widget,
.widget,
.sybo-side-panel,
.sybo-mobile-leaderboard__list a,
.sybo-mobile-desktop-only,
.sybo-mobile-seo,
.sybo-mobile-categories a {
	background-color: #1a1b28;
}

.sybo-game-actions button:hover,
.sybo-game-actions a:hover {
	background-color: #1a1b28;
}

/* Mobile game player controls: actions, reveal cue, and compact recommendations. */
.sybo-mobile-player-extras {
	display: none;
}

.sybo-mobile-game-controls,
.sybo-mobile-rotate-notice,
.sybo-mobile-game-status {
	display: none;
}

@media (max-width: 767px) {
	body.sybo-mobile-game-open {
		overflow: hidden;
		touch-action: none;
	}

	.sybo-view--game .sybo-game-frame.sybo-mobile-game-mode {
		align-items: center;
		aspect-ratio: auto;
		background: #0d0e17;
		display: flex;
		height: 100dvh !important;
		inset: 0;
		justify-content: center;
		max-height: none;
		min-height: 0;
		position: fixed;
		width: 100vw;
		z-index: 10000;
	}

	.sybo-view--game .sybo-game-frame.sybo-mobile-game-mode iframe {
		aspect-ratio: var(--sybo-game-aspect);
		display: block;
		flex: 0 0 auto;
		height: min(100dvh, calc(100vw / var(--sybo-game-aspect))) !important;
		inset: auto;
		max-height: 100dvh;
		max-width: 100vw;
		position: relative;
		width: min(100vw, calc(100dvh * var(--sybo-game-aspect))) !important;
	}

	.sybo-mobile-game-mode .sybo-mobile-game-controls {
		align-items: center;
		display: flex;
		inset: max(8px, env(safe-area-inset-top)) 8px auto;
		justify-content: space-between;
		pointer-events: none;
		position: absolute;
		z-index: 30;
	}

	.sybo-mobile-game-controls button {
		align-items: center;
		backdrop-filter: blur(8px);
		background: rgba(22, 23, 36, .9);
		border: 1px solid rgba(255, 255, 255, .62);
		border-radius: 12px;
		color: #fff;
		display: inline-flex;
		height: 42px;
		justify-content: center;
		min-width: 42px;
		padding: 8px;
		pointer-events: auto;
	}

	.sybo-mobile-game-controls button:focus-visible {
		outline: 3px solid #8a70ff;
		outline-offset: 2px;
	}

	.sybo-mobile-game-controls svg {
		fill: none;
		height: 23px;
		stroke: currentColor;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-width: 2;
		width: 23px;
	}

	.sybo-mobile-game-controls .sybo-mobile-game-exit {
		background: #6843ff;
		border-color: rgba(255, 255, 255, .85);
		border-radius: 9px;
		font: 900 13px "Nunito", sans-serif;
		gap: 5px;
		height: 38px;
		padding: 6px 10px;
	}

	.sybo-mobile-game-exit svg {
		height: 19px;
		width: 19px;
	}

	.sybo-mobile-game-controls__end {
		display: flex;
		gap: 8px;
	}

	.sybo-mobile-game-controls [data-sybo-mobile-save-progress] {
		background: #fff;
		color: #171825;
	}

	.sybo-mobile-game-controls .sybo-sound-off {
		display: none;
	}

	.sybo-mobile-game-controls [data-sybo-mobile-game-mute].is-muted .sybo-sound-on {
		display: none;
	}

	.sybo-mobile-game-controls [data-sybo-mobile-game-mute].is-muted .sybo-sound-off {
		display: block;
	}

	.sybo-mobile-game-mode .sybo-mobile-rotate-notice {
		align-items: center;
		backdrop-filter: blur(10px);
		background: rgba(10, 11, 18, .94);
		border: 1px solid rgba(255, 255, 255, .15);
		border-radius: 12px;
		box-shadow: 0 8px 26px rgba(0, 0, 0, .42);
		color: #fff;
		display: flex;
		gap: 10px;
		left: 50%;
		max-width: calc(100vw - 110px);
		padding: 12px 13px;
		position: absolute;
		top: max(66px, calc(env(safe-area-inset-top) + 58px));
		transform: translateX(-50%);
		z-index: 31;
	}

	.sybo-mobile-rotate-notice[hidden] {
		display: none !important;
	}

	.sybo-mobile-rotate-notice > svg {
		fill: none;
		flex: 0 0 32px;
		height: 32px;
		stroke: currentColor;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-width: 1.8;
		width: 32px;
	}

	.sybo-mobile-rotate-notice strong {
		font: 900 15px/1.05 "Nunito", sans-serif;
	}

	.sybo-mobile-rotate-notice button {
		background: transparent;
		border: 0;
		color: #fff;
		font-size: 18px;
		padding: 4px;
	}

	.sybo-mobile-game-mode .sybo-mobile-game-status {
		background: rgba(10, 11, 18, .94);
		border: 1px solid rgba(255, 255, 255, .15);
		border-radius: 999px;
		bottom: max(18px, env(safe-area-inset-bottom));
		color: #fff;
		display: block;
		font: 800 13px "Nunito", sans-serif;
		left: 50%;
		opacity: 0;
		padding: 9px 14px;
		pointer-events: none;
		position: absolute;
		transform: translate(-50%, 8px);
		transition: opacity 180ms ease-out, transform 180ms ease-out;
		white-space: nowrap;
		z-index: 32;
	}

	.sybo-mobile-game-mode .sybo-mobile-game-status.is-visible {
		opacity: 1;
		transform: translate(-50%, 0);
	}

	.sybo-view--game .sybo-player-bar {
		background: #0d0e17;
		height: auto;
		justify-content: center;
		padding: 10px 14px 4px;
	}

	.sybo-view--game .sybo-player-bar > .sybo-player-identity {
		display: none;
	}

	.sybo-view--game .sybo-game-actions {
		display: flex;
		flex: 0 1 auto;
		gap: 4px;
		justify-content: center;
		max-width: 100%;
		overflow-x: visible;
	}

	.sybo-view--game .sybo-game-actions button {
		background: #303142;
		border: 1px solid rgba(255, 255, 255, .08);
		flex: 0 0 42px;
		height: 38px;
		min-width: 42px;
		padding: 8px;
	}

	.sybo-view--game .sybo-game-actions #upvote {
		flex-basis: auto;
		min-width: 68px;
		order: 1;
		padding-inline: 12px;
	}

	.sybo-view--game .sybo-game-actions #upvote span {
		display: inline;
		font-size: 10px;
	}

	.sybo-view--game .sybo-game-actions #downvote { order: 2; }
	.sybo-view--game .sybo-game-actions #favorite { order: 3; }
	.sybo-view--game .sybo-game-actions [data-sybo-share] { order: 4; }
	.sybo-view--game .sybo-game-actions #report-game,
	.sybo-view--game .sybo-game-actions [data-sybo-dialog-open="sybo-report-game"] { order: 5; }

	.sybo-view--game .sybo-game-actions [data-sybo-scroll-controls],
	.sybo-view--game .sybo-game-actions [data-sybo-scroll-details],
	.sybo-view--game .sybo-game-actions [data-sybo-mute],
	.sybo-view--game .sybo-game-actions [onclick="openFullscreen()"] {
		display: none;
	}

	.sybo-mobile-player-extras {
		background: #0d0e17;
		display: block;
		padding: 4px 16px 12px;
	}

	.sybo-mobile-player-more {
		align-items: center;
		background: #222331;
		border: 1px solid rgba(255, 255, 255, .12);
		border-radius: 999px;
		color: #85889d;
		display: flex;
		height: 28px;
		justify-content: center;
		margin: 6px auto 14px;
		width: 52px;
	}

	.sybo-mobile-player-more svg {
		fill: none;
		height: 22px;
		stroke: currentColor;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-width: 2.5;
		width: 22px;
	}

	.sybo-mobile-player-next {
		display: grid;
		column-gap: 8px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 13px;
		scroll-margin-top: 64px;
	}

	.sybo-mobile-player-next__item {
		min-width: 0;
	}

	.sybo-mobile-player-next__item[hidden] {
		display: none !important;
	}

	.sybo-mobile-player-next .sybo-game-card {
		aspect-ratio: 1;
		border: 0;
		border-radius: 11px;
		min-width: 0;
		width: 100%;
	}

	.sybo-mobile-player-next .sybo-game-card__image {
		object-fit: cover;
	}

	.sybo-mobile-player-next .sybo-game-card__content,
	.sybo-mobile-player-next .sybo-game-card__shade {
		display: none;
	}

	.sybo-mobile-player-next .sybo-badge {
		font-size: 0;
		height: 20px;
		inset-inline-start: auto;
		left: -4px;
		min-height: 20px;
		padding: 0;
		right: auto;
		top: -5px;
		width: 20px;
	}

	.sybo-mobile-player-next .sybo-badge svg {
		height: 13px;
		width: 13px;
	}

	.sybo-mobile-player-next__title {
		color: #fff;
		display: block;
		font: 800 11px/1.25 "Nunito", sans-serif;
		margin-top: 5px;
		overflow: hidden;
		text-align: center;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.sybo-mobile-show-more-games {
		align-items: center;
		background: #373952;
		border: 0;
		border-radius: 999px;
		color: #fff;
		display: flex;
		font: 900 15px/1 "Nunito", sans-serif;
		gap: 8px;
		justify-content: center;
		margin: 22px 0 4px;
		min-height: 42px;
		padding: 10px 18px;
		width: 100%;
	}

	.sybo-mobile-show-more-games span {
		font-size: 25px;
		font-weight: 400;
		line-height: .7;
	}

	.sybo-mobile-show-more-games:focus-visible {
		outline: 3px solid #8a70ff;
		outline-offset: 2px;
	}
}

/* Tag Manager: co-occurring tags shown on eligible public tag archives. */
.sybo-related-tags {
	margin: 2rem 0 0;
	padding: 1.25rem;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 18px;
	background: rgba(24, 28, 49, .76);
}

.sybo-related-tags h2 {
	margin: 0 0 .9rem;
	font: 800 clamp(1.15rem, 2vw, 1.45rem)/1.2 "Sora", sans-serif;
}

.sybo-related-tags__list {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
}

.sybo-related-tags__list a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem .8rem;
	border-radius: 999px;
	background: rgba(100, 79, 231, .2);
	color: #8be9ff;
	font-weight: 800;
	text-decoration: none;
}

.sybo-related-tags__list a:hover,
.sybo-related-tags__list a:focus-visible {
	background: rgba(100, 79, 231, .42);
	color: #fff;
}

.sybo-related-tags__list span {
	min-width: 1.5rem;
	padding: .13rem .38rem;
	border-radius: 999px;
	background: rgba(42, 201, 160, .18);
	color: #6ff5c8;
	font-size: .72rem;
	text-align: center;
}

.sybo-category-faq {
	margin: 2rem 0 0;
	padding: clamp(1.2rem, 3vw, 2rem);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 18px;
	background: rgba(24, 28, 49, .76);
}

.sybo-category-faq h2 {
	margin: 0 0 .8rem;
	font: 800 clamp(1.2rem, 2vw, 1.55rem)/1.25 "Sora", sans-serif;
}

.sybo-category-faq div {
	color: var(--sybo-muted);
	line-height: 1.7;
}
.sybo-managed-categories,.sybo-managed-seo,.sybo-managed-ad,.sybo-managed-all-games{margin:0 0 22px}.sybo-managed-categories__track{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}.sybo-managed-categories__track a{display:flex;align-items:center;gap:9px;min-height:58px;padding:10px 12px;border:1px solid rgba(137,148,194,.22);border-radius:10px;background:#181e32;color:#fff;text-decoration:none}.sybo-managed-categories__track a span{display:grid;place-items:center;width:30px;height:30px;color:#6d5dfc}.sybo-managed-categories__track svg{width:24px;height:24px}.sybo-managed-seo{padding:22px;border:1px solid rgba(137,148,194,.22);border-radius:12px;background:#181e32;color:#c7cce2}.sybo-managed-seo h2{color:#fff}.sybo-managed-seo a{color:#39d9ff}.sybo-managed-ad__reserved{display:grid;place-items:center;min-height:110px;border:1px dashed rgba(137,148,194,.3);border-radius:10px;background:#151a2a;color:#8d96b4;font-size:11px}.sybo-managed-collection{scroll-margin-top:80px}.sybo-managed-all-games .sybo-game-grid{margin-bottom:14px}.sybo-managed-load-more{display:flex;margin:0 auto}@media(max-width:767px){.sybo-mobile-home .sybo-managed-categories,.sybo-mobile-home .sybo-managed-seo,.sybo-mobile-home .sybo-managed-ad,.sybo-mobile-home .sybo-managed-collection,.sybo-mobile-home .sybo-managed-all-games{margin:0 14px 18px}.sybo-managed-categories__track{display:flex;overflow-x:auto}.sybo-managed-categories__track a{min-width:145px}.sybo-mobile-home .sybo-game-row{overflow-x:auto}}
.sybo-brand__image{display:block;max-width:220px;max-height:46px;width:auto;height:auto;object-fit:contain}.sybo-game-video{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:12px}.sybo-game-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.sybo-home-faq{max-width:1200px;margin:24px auto;padding:20px}.sybo-home-faq details{border-bottom:1px solid #343d59;padding:12px 0}.sybo-home-faq summary{font-weight:700;cursor:pointer}
.sybo-badge--recent{background:#7955de;border-color:#7955de;color:#fff}.sybo-game-launch button{background:linear-gradient(135deg,var(--theme-icon-effect-color-1,#6843ff),var(--theme-icon-effect-color-2,#795aff))}.sybo-game-launch button:hover{background:linear-gradient(135deg,var(--theme-icon-effect-color-2,#795aff),var(--theme-icon-effect-color-1,#6843ff))}.sybo-feedback-game-loading::before{border-right-color:var(--theme-loading-color-1,#FFD600);border-top-color:var(--theme-loading-color-2,#ff1a88)}

/* Keep primary public actions consistent with the white Contact us button. */
.sybo-account-profile-action,
.sybo-account-confirm:not(:disabled),
.sybo-account-cancel,
.sybo-contact-submit:not(:disabled),
.sybo-auth-primary:not(:disabled),
.sybo-game-launch button,
.sybo-back-to-game,
.sybo-mobile-game-controls .sybo-mobile-game-exit,
.tpl-post-comment-btn,
.btn-primary {
	background: #fff;
	color: #000;
}

.sybo-account-profile-action:hover,
.sybo-account-profile-action:focus-visible,
.sybo-account-confirm:not(:disabled):hover,
.sybo-account-confirm:not(:disabled):focus-visible,
.sybo-account-cancel:hover,
.sybo-account-cancel:focus-visible,
.sybo-contact-submit:not(:disabled):hover,
.sybo-contact-submit:not(:disabled):focus-visible,
.sybo-auth-primary:not(:disabled):hover,
.sybo-auth-primary:not(:disabled):focus-visible,
.sybo-game-launch button:hover,
.sybo-game-launch button:focus-visible,
.sybo-back-to-game:hover,
.sybo-back-to-game:focus-visible,
.sybo-mobile-game-controls .sybo-mobile-game-exit:hover,
.sybo-mobile-game-controls .sybo-mobile-game-exit:focus-visible,
.tpl-post-comment-btn:hover,
.tpl-post-comment-btn:focus-visible,
.btn-primary:hover,
.btn-primary:focus-visible {
	background: #f0f0f0;
	color: #000;
	filter: none;
}

.sybo-auth-primary.is-loading:not(:disabled) {
	background: #fff;
	color: transparent;
}
.sybo-auth-primary.is-loading::after {
	border-color: rgba(0, 0, 0, .25);
	border-top-color: #000;
}

@font-face {
	font-family: "Twemoji Country Flags";
	src: url("../public/fonts/TwemojiCountryFlags.woff2") format("woff2");
	font-display: swap;
}

.sybo-country-heading {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.sybo-country-flag {
	font-family: "Twemoji Country Flags", "Segoe UI Emoji", sans-serif;
	font-size: .9em;
	font-weight: 400;
	line-height: 1;
}

.sybo-game-share-dialog {
	background: #202132;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 18px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, .65);
	color: #fff;
	margin: auto;
	max-width: calc(100vw - 40px);
	padding: 26px 24px 28px;
	width: 400px;
}

.sybo-game-share-dialog::backdrop {
	background: rgba(2, 3, 10, .78);
	backdrop-filter: blur(2px);
}

.sybo-game-share-dialog__header {
	align-items: center;
	display: flex;
	justify-content: center;
	position: relative;
}

.sybo-game-share-dialog__header h2 {
	font: 800 24px/1.2 "Sora", sans-serif;
	margin: 0;
}

.sybo-game-share-dialog__header > button {
	align-items: center;
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
	display: flex;
	height: 38px;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: -7px;
	top: -8px;
	width: 38px;
}

.sybo-game-share-dialog__header > button svg {
	fill: none;
	height: 24px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 2;
	width: 24px;
}

.sybo-game-share-dialog__socials {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin: 22px 0 18px;
}

.sybo-game-share-dialog__social {
	align-items: center;
	border-radius: 50%;
	color: #fff;
	display: flex;
	height: 60px;
	justify-content: center;
	transition: filter 160ms ease, transform 160ms ease;
	width: 60px;
}

.sybo-game-share-dialog__social:hover,
.sybo-game-share-dialog__social:focus-visible {
	filter: brightness(1.12);
	transform: translateY(-2px);
}

.sybo-game-share-dialog__social svg {
	fill: currentColor;
	height: 31px;
	stroke: none;
	width: 31px;
}

.sybo-game-share-dialog__social--facebook { background: #316ff6; }
.sybo-game-share-dialog__social--x { background: #050507; }
.sybo-game-share-dialog__social--x svg {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 2;
}
.sybo-game-share-dialog__social--whatsapp { background: #4fc35b; }
.sybo-game-share-dialog__social--whatsapp svg {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
}

.sybo-game-share-dialog__copy {
	align-items: center;
	background: #181927;
	border: 2px solid #4a4c60;
	border-radius: 10px;
	display: flex;
	height: 58px;
	overflow: hidden;
	padding: 5px;
}

.sybo-game-share-dialog__copy input {
	background: transparent;
	border: 0;
	color: #fff;
	font: 500 15px "Space Grotesk", sans-serif;
	min-width: 0;
	outline: 0;
	padding: 0 10px;
	text-overflow: ellipsis;
	width: 100%;
}

.sybo-game-share-dialog__copy button {
	background: #7045ff;
	border: 0;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	flex: 0 0 auto;
	font: 800 14px "Sora", sans-serif;
	min-width: 76px;
	padding: 12px 15px;
}

.sybo-game-share-dialog__copy button:hover,
.sybo-game-share-dialog__copy button:focus-visible { background: #825fff; }

.sybo-game-share-dialog__status {
	height: 0;
	margin: 0;
	overflow: hidden;
}

@media (max-width: 767px) {
	.sybo-game-share-dialog { display: none !important; }
}

/* Game-page ad labels sit below the reserved ad area, matching the Play Next rail. */
.sybo-view--game .ads-manager-slot {
	display: flex;
	flex-direction: column;
}

.sybo-view--game .ads-manager-reserved { order: 1; }

.sybo-view--game .ads-manager-label {
	margin: 4px 0 0;
	order: 2;
	width: 100%;
}

@media (min-width: 768px) {
.sybo-game-rail-ad > .ads-manager-slot {
	height: 268px;
	max-height: 268px;
}

.sybo-game-rail-ad .ads-manager-reserved {
	height: 250px;
	min-height: 250px;
}

.sybo-game-rail-ad .ads-manager-label,
.sybo-details-ad .ads-manager-label {
	padding-right: 2px;
	text-align: right;
}

.sybo-game-rail-ad > span,
.sybo-details-ad > span {
	right: 2px;
	text-align: right;
}

.sybo-game-banner__slot {
	height: 106px;
}

.sybo-game-banner__slot > .ads-manager-slot {
	height: 106px;
	max-height: 106px !important;
}

.sybo-game-banner__slot .ads-manager-reserved {
	height: 90px;
	min-height: 90px !important;
}

.sybo-details-ad {
	height: 268px;
	min-height: 268px;
}

.sybo-details-ad__slot {
	height: 268px;
}

.sybo-details-ad__slot > .ads-manager-slot {
	height: 268px;
	max-height: 268px !important;
}

.sybo-details-ad .ads-manager-reserved {
	height: 250px;
	min-height: 250px;
}
}