/*FONTS START*/
@font-face {
	font-family: "Xolonium";
	src: url("fonts/woff2/Xolonium-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Xolonium";
	src: url("fonts/woff2/Xolonium-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Meteora";
	src: url("fonts/ttf/Meteora-Light.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Meteora";
	src: url("fonts/ttf/Meteora-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "SpaceMono";
	src: url("fonts/ttf/SpaceMono-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "SpaceMono";
	src: url("fonts/ttf/SpaceMono-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "ApfelGrotezk";
	src: url("fonts/woff2/ApfelGrotezk-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "ApfelGrotezk";
	src: url("fonts/woff2/ApfelGrotezk-Fett.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "ApfelGrotezk";
	src: url("fonts/woff2/ApfelGrotezk-Brukt.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Sentient";
	src: url("fonts/woff2/Sentient-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Sentient";
	src: url("fonts/woff2/Sentient-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Sentient";
	src: url("fonts/woff2/Sentient-BoldItalic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "DMMono";
	src: url("fonts/ttf/DMMono-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DMMono";
	src: url("fonts/ttf/DMMono-Medium.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DMMono";
	src: url("fonts/ttf/DMMono-MediumItalic.ttf") format("truetype");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Runescape Plain 12";
	src: url("fonts/woff2/runescape_plain_12.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/*Xolonium     (NORMAL TITLE    / 400/700)*/
/*ApfelGrotezk (NORMAL TEXT     / 400/700)*/

/*Meteora      (SERIF TITLE     / 400/700)*/
/*Sentient     (SERIF TEXT      / 400/700)*/

/*SpaceMono    (MONOSPACE TITLE / 400/700)*/
/*DMMono       (MONOSPACE TEXT  / 400/700)*/

/*Runescape Plain 12       (NORMAL TEXT  / 400)*/

/*FONTS END*/

/*JQUERY UI RESET START*/
.ui-tabs .ui-tabs-panel {
	padding: unset;
}
/*JQUERY UI RESET END*/

/*HEADER HTML START*/
[data-type="skip-to-main"] {
	position: absolute;
	top: -200px;
	left: 50%;
	transform: translate(-50%, 0);
	width: fit-content;
	min-width: 540px;
	height: auto;
	z-index: -999;
	opacity: 0;
	visibility: hidden;
}

[data-type="skip-to-main"]:focus,
[data-type="skip-to-main"]:focus-visible,
[data-type="skip-to-main"]:active {
	top: var(--spacing-large);
	transform: scale(1) translate(-50%, 0);
	z-index: 9999;
	opacity: 1;
	visibility: visible;
}

[data-type="skip-to-main"]:hover {
	transform: scale(1) translate(-50%, 0);
	transition-duration: 250ms;
}

@media only screen and (max-width: 40rem) {
	[data-type="skip-to-main"] {
		min-width: unset;
		opacity: 0;
		visibility: hidden;
	}

	[data-type="skip-to-main"]:focus,
	[data-type="skip-to-main"]:focus-visible,
	[data-type="skip-to-main"]:active {
		opacity: 0;
		visibility: hidden;
	}
}

header {
	position: relative;
	z-index: 9999;
}

header > nav > ul {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding-inline-start: 0;
	list-style-type: none;
	width: 100%;
}

header > nav > ul > li {
	display: flex;
	column-gap: var(--spacing-medium);
	align-items: flex-start;
	width: 100%;
	white-space: nowrap;
}

header > nav > ul > li:nth-child(2) {
	width: fit-content;
}

header > nav > ul > li > a {
	width: 100%;
	text-decoration: none;
}

header > nav > ul > li > a > p {
	visibility: hidden;
	opacity: 0;
	transition:
		visibility 0s,
		opacity 0.25s linear;
	font-family: "Xolonium", sans-serif;
	color: var(--primary-color);
	transition-duration: 250ms;
}

[data-accessibility~="serif"] header > nav > ul > li > a > p {
	font-family: Meteora, serif;
}

[data-accessibility~="monospace"] header > nav > ul > li > a > p {
	font-family: SpaceMono, sans-serif;
}

header > nav > ul > li > a:hover > p,
header > nav > ul > li > a:focus-visible > p {
	visibility: visible;
	opacity: 1;
	transition-duration: 250ms;
}

header > nav > ul > li > a:first-child {
	align-self: flex-start;
}

img[data-type="back-button"] {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition-duration: 250ms;
}

img[data-type="back-button"]:hover {
	transform: scale(1.05);
	transition-duration: 250ms;
}

header > nav > ul > li > a:first-child img {
	width: 100%;
	max-width: 300px;
}

[data-accessibility~="dark"] header > nav > ul > li > a:first-child img {
	filter: invert(1);
}

[data-accessibility~="high-contrast"]
	header
	> nav
	> ul
	> li
	> a:first-child
	img {
	filter: invert(1) contrast(200%);
}

header > nav > ul > li:nth-child(2) {
	display: grid;
	grid-template-columns: auto auto;
	column-gap: var(--spacing-medium);
	font-family: "ApfelGrotezk", sans-serif;
}

[data-accessibility~="serif"] header > nav > ul > li:nth-child(2) {
	font-family: "Sentient", serif;
}

[data-accessibility~="monospace"] header > nav > ul > li:nth-child(2) {
	font-family: "DMMono", sans-serif;
}

header > nav > ul > li:nth-child(2) div:first-child {
	display: inherit;
	text-align: end;
}

header > nav > ul > li:nth-child(2) div:first-child p,
header > nav > ul > li:nth-child(2) div:first-child a {
	font-size: 16px;
	font-weight: 700;
	text-align: end;
	text-decoration: none;
	color: var(--primary-color);
	letter-spacing: 1.5px;
}

header > nav > ul > li:nth-child(2) div:nth-child(2) p {
	font-size: 16px;
	color: var(--focus-color);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-type="SAlogo"] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	width: fit-content;
	gap: var(--spacing-x-small);
}

[data-type="SAlogo"] p {
	line-height: 1;
}

[data-type="backButton"] {
	width: 100%;
	max-width: 75px;
	height: auto;
}

[data-logo="brand"] + p {
	display: none;
}

header > nav > ul > li:nth-child(2) div:first-child a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media only screen and (max-width: 40rem) {
	header > nav > ul {
		flex-direction: column;
		row-gap: var(--spacing-medium);
	}

	header > nav > ul > li:nth-child(2) {
		align-self: flex-end;
	}

	[data-type="SAlogo"] p,
	header > nav > ul > li > a > p {
		display: none;
	}
}

@media only screen and (max-width: 51.2rem) {
	header > nav > ul > li:nth-child(2) div {
		display: none;
	}

	header > nav > ul > li:nth-child(2) {
		column-gap: 0;
	}
}

@media only screen and (max-width: 38.4rem) {
	[data-type="backButton"] {
		display: none;
	}
}

/* Portfolio START */
[data-type="portfolio"],
[data-type="games"] {
	display: grid;
	gap: var(--spacing-normal);
	margin-top: var(--spacing-medium);
	margin-bottom: var(--spacing-large);
}

[data-type="portfolio"][data-category~="brand"] {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

[data-type="games"] {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

@media only screen and (min-width: 24rem) {
	[data-accessibility~="narrow"]
		[data-type="portfolio"][data-category~="brand"],
	[data-accessibility~="narrow"] [data-type="games"] {
		grid-template-columns: 1fr;
	}
}

@media only screen and (min-width: 38.4rem) {
	[data-accessibility~="narrow"]
		[data-type="portfolio"][data-category~="brand"],
	[data-accessibility~="narrow"] [data-type="games"] {
		grid-template-columns: 1fr 1fr;
	}
}

@media only screen and (min-width: 64rem) {
	[data-accessibility~="narrow"]
		[data-type="portfolio"][data-category~="brand"],
	[data-accessibility~="narrow"] [data-type="games"] {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media only screen and (min-width: 96rem) {
	[data-accessibility~="extra-wide"]
		[data-type="portfolio"][data-category~="brand"],
	[data-accessibility~="extra-wide"] [data-type="games"] {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	}
}

@media only screen and (min-width: 96rem) {
	[data-accessibility~="unlimited"]
		[data-type="portfolio"][data-category~="brand"],
	[data-accessibility~="unlimited"] [data-type="games"] {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	}
}

@media only screen and (min-width: 128rem) {
	[data-accessibility~="unlimited"]
		[data-type="portfolio"][data-category~="brand"] {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	}
}

[data-accessibility~="button"] [data-type="portfolio"][data-category~="brand"] {
	grid-template-columns: 1fr 1fr 1fr;
}

[data-type="portfolio"][data-category="beyond"] {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

[data-accessibility~="button"] [data-type="portfolio"][data-category="beyond"] {
	grid-template-columns: 1fr 1fr 1fr;
}

@media only screen and (max-width: 68.3rem) {
	[data-type="portfolio"][data-category~="brand"],
	[data-type="portfolio"][data-category="beyond"],
	[data-type="games"] {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media only screen and (max-width: 38.4rem) {
	[data-type="portfolio"][data-category~="brand"],
	[data-type="portfolio"][data-category="beyond"],
	[data-type="games"] {
		grid-template-columns: 1fr 1fr;
	}

	nav ul {
		display: none;
	}
}

@media only screen and (max-width: 24rem) {
	[data-type="portfolio"][data-category~="brand"],
	[data-type="portfolio"][data-category="beyond"],
	[data-type="games"] {
		grid-template-columns: 1fr;
	}
}
/* Portfolio END */
[data-type="portfolio-item"] a {
	position: relative;
}

[data-type="portfolio-item"] img,
[data-type="games"] img {
	border-radius: 15px;
}

[data-type="games"] img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

[data-accessibility~="dark"] [data-type="portfolio-item"] img {
	filter: invert(1);
}

[data-accessibility~="high-contrast"] [data-type="portfolio-item"] img {
	filter: invert(1) contrast(200%);
	border: 2px solid var(--primary-color);
}

[data-poster] a,
[data-type="portfolio-item"] a {
	cursor: pointer;
}

[data-type="portfolio"] img,
[data-type="games"] img {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-type="portfolio"] a:focus-visible img {
	transform: scale(1.02);
	outline: 2px solid var(--focus-color);
	outline-offset: var(--spacing-xx-small);
	border-radius: 17px;
	transition-duration: 250ms;
}

.contact-container p,
.contact-container a {
	font-family: "ApfelGrotezk", sans-serif;
	font-size: var(--font-size);
	font-weight: 400;
	letter-spacing: 1px;
}

.contact-container a {
	color: var(--focus-color);
	text-decoration: none;
}

.contact-container {
	padding: var(--spacing-normal);
	text-align: right;
	margin-right: var(--spacing-x-small);
}

@media only screen and (max-width: 48rem) {
	.contact-container {
		display: none;
	}
}

.footer-contact-container p,
.footer-contact-container a {
	font-family: "ApfelGrotezk", sans-serif;
	font-size: var(--font-size);
	font-weight: 400;
	letter-spacing: 1px;
}

.footer-contact-container a {
	color: var(--focus-color);
	text-decoration: none;
}

.footer-contact-container {
	text-align: left;
	padding: var(--spacing-normal);
	margin-bottom: var(--spacing-medium);
	margin-left: var(--spacing-x-small);
}

@media only screen and (min-width: 961px) {
	.footer-contact-container {
		display: none;
	}
}

@media only screen and (max-width: 460px) {
	.footer-contact-container {
		text-align: center;
		margin-left: 0;
	}
}

[data-type="footer-credits"] {
	display: flex;
	flex-direction: column;
	gap: 0;
	text-align: center;
}

[data-type="footer-credits"] span {
	white-space: nowrap;
}

@media only screen and (max-width: 460px) {
	[data-type="footer-credits"] {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
}

[data-type="info-box"] {
	text-align: center;
}

[data-button="back-to-top"][data-active="true"] {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease;
}

[data-button="back-to-top"][data-active="false"] {
	opacity: 0;
	visibility: hidden;
}

[data-button="back-to-top"] {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	bottom: var(--spacing-medium);
	right: var(--spacing-x-large);
	gap: var(--spacing-x-small);
	padding: var(--spacing-x-small) var(--spacing-medium) var(--spacing-x-small)
		var(--spacing-medium);
	width: fit-content;
	height: fit-content;
	font-size: 16px;
	letter-spacing: 1px;
	cursor: pointer;
	background-color: #252525;
	color: #f4f3f2;
	border: 2px solid #f4f3f2;
	border-radius: 5px;
}

[data-button="back-to-top"]::before {
	content: "TOP";
}

[data-button="back-to-top"]::after {
	content: "↑";
}

[data-accessibility~="button"] [data-button="back-to-top"] {
	padding: var(--spacing-small) var(--spacing-x-large) var(--spacing-small)
		var(--spacing-x-large);
}

@media only screen and (max-width: 86rem) {
	[data-button="back-to-top"] {
		right: var(--spacing-medium);
		padding: var(--spacing-x-small) var(--spacing-small)
			var(--spacing-x-small) var(--spacing-small);
		width: 50px;
		height: 50px;
	}

	[data-button="back-to-top"]::before {
		display: none;
	}
}

[data-type="logo-image"] {
	width: 100%;
	border-radius: unset;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-accessibility~="dark"] [data-type="logo-image"] {
	filter: invert(1);
}

[data-accessibility~="high-contrast"] [data-type="logo-image"] {
	filter: invert(1) contrast(200%);
}

[data-logo~="sa"] {
	height: 62px;
	width: auto;
	max-width: fit-content;
}

[data-logo~="saplus"] {
	height: 84px;
	width: auto;
	max-width: fit-content;
}

[data-logo~="saplustop"] {
	height: 80px;
	width: auto;
	max-width: fit-content;
	margin-top: -18px;
}

[data-type="explore-further"] {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-bottom: 25px;
}

footer hr:first-child {
	margin-top: var(--spacing-x-large);
	margin-bottom: var(--spacing-medium);
}

footer hr:nth-of-type(2) {
	margin-top: 32px;
	margin-bottom: 45px;
}

[data-type="explore-further"] span {
	font-size: 50px;
	font-family: "Xolonium", sans-serif;
	padding-left: 10px;
	padding-right: 10px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

@media only screen and (max-width: 38.4rem) {
	[data-type="explore-further"] {
		flex-direction: column;
		gap: 25px;
	}

	[data-type="explore-further"] a {
		width: 100%;
	}

	[data-type="explore-further"] span {
		display: none;
	}

	.ui-helper-clearfix:before,
	.ui-helper-clearfix:after {
		display: none;
	}
}

[data-type="footer"] {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--spacing-medium);
	margin-bottom: 50px;
}

[data-type="footer"] [data-footer="buttons"] {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	gap: 25px;
}

[data-button~="icon"] {
	padding: 0;
	margin: 0;
	background-color: unset;
	border: none;
	cursor: pointer;
	transition-duration: 250ms;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-accessibility~="dark"] [data-button~="icon"] {
	filter: invert(1);
}

[data-accessibility~="high-contrast"] [data-button~="icon"] {
	filter: invert(1) contrast(200%);
}

[data-type="title"] {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	gap: 25px;
	position: relative;
	width: 100%;
}

[data-type="title"] h1 {
	text-indent: -5px;
	text-indent: -5px each-line;
}

[data-project="summary"] p:has(+ figure) {
	margin-bottom: 0;
}

/* ── Page tools (snippets/page-tools.php) ──────────────────────────────────
   A dark tab hanging from the navbar line at the top right: previous / next,
   listen (only when the page has audio) and accessibility. It sits in the
   header, which is position: relative, and starts where the line does — the
   header's foot plus the gap above the line (measured 20px = --spacing-normal
   on every page) — so the two read as one shape.

   Its size is set here once, on body, so the space kept free for it below the
   line uses the same numbers: icon + padding = height; four buttons + gaps +
   padding = the widest tab (project pages). */
body {
	--page-tools-icon: 1.75rem;
	--page-tools-pad-y: var(--spacing-x-small);
	--page-tools-pad-x: var(--spacing-normal);
	--page-tools-gap: var(--spacing-small);
	--page-tools-h: calc(var(--page-tools-icon) + 2 * var(--page-tools-pad-y));
	--page-tools-n: 2;
	--page-tools-w: calc(var(--page-tools-n) * var(--page-tools-icon) + (var(--page-tools-n) - 1) * var(--page-tools-gap) + 2 * var(--page-tools-pad-x));
}

/* The tab's width follows its visible buttons: two on most pages (listen +
   accessibility), one without audio, three or four on projects. */
body:not(:has([data-type="page-tools"] > :nth-child(2 of :not([hidden])))) {
	--page-tools-n: 1;
}

body:has([data-type="page-tools"] > :nth-child(3 of :not([hidden]))) {
	--page-tools-n: 3;
}

body:has([data-type="page-tools"] > :nth-child(4 of :not([hidden]))) {
	--page-tools-n: 4;
}

[data-type="page-tools"] {
	position: absolute;
	top: calc(100% + var(--spacing-normal));
	right: 0;
	display: flex;
	align-items: center;
	gap: var(--page-tools-gap);
	padding: var(--page-tools-pad-y) var(--page-tools-pad-x);
	background-color: var(--primary-color);
	border-radius: 0 0 var(--spacing-small) var(--spacing-small);
}

[data-type="page-tools"] [data-button~="icon"] {
	display: inline-flex;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: transform 150ms ease;
}

[data-type="page-tools"] [data-button~="icon"]:hover,
[data-type="page-tools"] [data-button~="icon"]:focus-visible {
	transform: scale(1.1);
}

[data-type="page-tools"] [data-button~="icon"]:focus-visible {
	outline: 0.1rem solid var(--focus-color);
	outline-offset: 0.1rem;
	border-radius: var(--spacing-xx-small);
}

/* Icons are CSS masks painted in the page colour (#F4F3F2) on the tab's
   #252525 — exact colours, nothing drawn outside the icon's own shape. Both
   come from the theme, so dark mode swaps them together; the site-wide
   dark / high-contrast filters on icon buttons are not wanted here. The masks
   are the outline (-secondary) icons, which have no background of their own. */
[data-type="page-tools"] [data-button~="icon"] {
	filter: none;
}

[data-type="page-tools"] [data-icon] {
	display: block;
	width: var(--page-tools-icon);
	height: var(--page-tools-icon);
	background-color: var(--bg-color);
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

[data-type="page-tools"] [data-icon="reverse"] { --icon: url("../img/icons/reverse-secondary.svg"); }
[data-type="page-tools"] [data-icon="forward"] { --icon: url("../img/icons/forward-secondary.svg"); }
[data-type="page-tools"] [data-icon="listen"] { --icon: url("../img/icons/listen-secondary.svg"); }
[data-type="page-tools"] [data-icon="play"] { --icon: url("../img/icons/play-secondary.svg"); }
[data-type="page-tools"] [data-icon="pause"] { --icon: url("../img/icons/pause-secondary.svg"); }
[data-type="page-tools"] [data-icon="accessibility"] { --icon: url("../img/icons/accessibility-secondary.svg"); }

@media (prefers-reduced-motion: reduce) {
	[data-type="page-tools"] [data-button~="icon"] {
		transition: none;
	}
}

/* Nothing runs under the tab, and the page starts close to the line.
   Pages without a breadcrumb: the title sits beside the tab, its width
   capped at the tab's left edge (it wraps rather than slide underneath). */
body:not(:has(hr[data-type="navbar"] + nav[aria-label="breadcrumb"])) main h1 {
	padding-right: calc(var(--page-tools-w) + var(--spacing-normal));
}

/* Project pages on narrower screens: no room for the breadcrumb beside the
   tab, so the content starts below it. */
@media only screen and (max-width: 48rem) {
	hr[data-type="navbar"]:has(+ nav[aria-label="breadcrumb"]) {
		margin-bottom: calc(var(--page-tools-h) + var(--spacing-small));
	}
}

/* Project pages on wider screens keep the breadcrumb beside the tab: it
   keeps clear of the tab's width (wrapping if it must) and is at least as
   tall as the rest of the tab, so the title still starts below it. */
@media only screen and (min-width: 48rem) {
	hr[data-type="navbar"] + nav[aria-label="breadcrumb"] {
		box-sizing: border-box;
		min-height: calc(var(--page-tools-h) - var(--spacing-small));
		padding-right: calc(var(--page-tools-w) + var(--spacing-normal));
	}
}

@media only screen and (max-width: 38.4rem) {
	body {
		--page-tools-icon: 1.5rem;
		--page-tools-pad-y: var(--spacing-xx-small);
		--page-tools-pad-x: var(--spacing-small);
		--page-tools-gap: var(--spacing-x-small);
	}

	/* A phone is too narrow for a big title beside the tab — one word
	   ("Contacts") can be wider than what is left — so the content starts
	   just below the (small) tab and the title keeps the full width. */
	hr[data-type="navbar"] {
		margin-bottom: calc(var(--page-tools-h) + var(--spacing-x-small));
	}

	body:not(:has(hr[data-type="navbar"] + nav[aria-label="breadcrumb"])) main h1 {
		padding-right: 0;
	}
}

[data-type="main-accessibility"] {
	display: flex;
	flex-direction: row;
	gap: 25px;
	width: fit-content;
	margin-top: 15px;
}

[data-type="main-accessibility"] [data-button~="icon"]:hover,
[data-type="main-accessibility"] [data-button~="icon"]:focus-visible {
	transform: scale(1.05);
	transition-duration: 250ms;
}

@media only screen and (max-width: 48rem) {
	[data-type="main-accessibility"] [data-button~="icon"]:hover,
	[data-type="main-accessibility"] [data-button~="icon"]:focus-visible {
		transform: scale(1);
	}
}

[data-type="main-accessibility"] [data-button~="icon"]:focus-visible {
	outline: 2px solid var(--focus-color);
	outline-offset: 2px;
	border-radius: 10px;
}

@media only screen and (max-width: 48rem) {
	[data-type="title"] {
		align-items: flex-start;
	}

	[data-type="main-accessibility"] [data-button~="icon"] {
		width: 40px;
	}
}

@media only screen and (max-width: 38.4rem) {
	[data-type="title"] #main {
		order: 2;
		border-top: 1px solid rgba(37, 37, 37, 0.25);
		padding-top: 10px;
		width: 100%;
	}

	[data-type="title"] [data-type="main-accessibility"] {
		order: 1;
		justify-content: flex-end;
		width: 100%;
	}

	[data-page~="project"] [data-type="main-accessibility"] {
		border-top: 1px solid rgba(37, 37, 37, 0.25);
		border-bottom: 1px solid rgba(37, 37, 37, 0.25);
		margin-top: 0;
		margin-bottom: var(--spacing-small);
		padding-top: var(--spacing-small);
		padding-bottom: var(--spacing-small);
	}

	[data-type="title"] {
		flex-direction: column;
		gap: 0;
	}

	[data-type="main-accessibility"] {
		gap: 15px;
	}
}

[data-accessibility~="button"] [data-button~="icon"] {
	width: 80px;
	height: auto;
}

[data-type="footer"] > a:hover {
	color: var(--bg-color);
}

[data-type="footer"] button:focus-visible,
[data-type="footer"] a:focus-visible {
	outline: 2px solid var(--focus-color);
	outline-offset: 2px;
	border-radius: 1px;
	transition-duration: 250ms;
}

[data-type="footer"] a,
[data-type="navigation-explore"],
[data-type="navigation-deeper"],
[data-type="navigation-reverse"],
[data-type="navigation-forward"] {
	transition-duration: 250ms;
}

[data-type="footer"] a:hover,
[data-type="footer"] a:focus-visible,
[data-type="footer"] button:hover,
[data-type="footer"] button:focus-visible,
[data-type="navigation-explore"]:hover,
[data-type="navigation-deeper"]:hover,
[data-type="navigation-reverse"]:hover,
[data-type="navigation-forward"]:hover {
	transform: scale(1.05);
	transition-duration: 250ms;
}

@media only screen and (max-width: 48rem) {
	[data-type="footer"] a:hover,
	[data-type="footer"] a:focus-visible,
	[data-type="footer"] button:hover,
	[data-type="footer"] button:focus-visible,
	[data-type="navigation-explore"]:hover,
	[data-type="navigation-deeper"]:hover,
	[data-type="navigation-reverse"]:hover,
	[data-type="navigation-forward"]:hover {
		transform: scale(1);
	}
}

[data-type="footer"] a[data-type="contacts"]::before {
	content: "🌍 ";
	font-family: "Xolonium", sans-serif;
}

[data-type="navigation-reverse"]::before {
	content: "← 😃";
	font-family: "Xolonium", sans-serif;
	margin-right: var(--spacing-xx-small);
}

[data-type="navigation-forward"]::after {
	content: "😛 →";
	font-family: "Xolonium", sans-serif;
	margin-left: var(--spacing-xx-small);
}

[data-type="navigation-explore"]::before {
	content: "← 😃";
	font-family: "Xolonium", sans-serif;
	margin-right: var(--spacing-xx-small);
}

[data-type="navigation-deeper"]::after {
	content: "😊 →";
	font-family: "Xolonium", sans-serif;
	margin-left: var(--spacing-xx-small);
}

[data-type="navigation-explore"]:hover::before,
[data-type="navigation-explore"]:focus-visible::before {
	content: "← 😇";
	font-family: "Xolonium", sans-serif;
}

[data-type="navigation-deeper"]:hover::after,
[data-type="navigation-deeper"]:focus-visible::after {
	content: "😁 →";
	font-family: "Xolonium", sans-serif;
}

[data-type="footer"] a[data-type="contacts"]:hover::before,
[data-type="footer"] a[data-type="contacts"]:focus-visible::before {
	content: "🌎 ";
	font-family: "Xolonium", sans-serif;
}

[data-type="navigation-reverse"]:hover::before,
[data-type="navigation-reverse"]:focus-visible::before {
	content: "← 😉";
	font-family: "Xolonium", sans-serif;
}

[data-type="navigation-forward"]:hover::after,
[data-type="navigation-forward"]:focus-visible::after {
	content: "😝 →";
	font-family: "Xolonium", sans-serif;
}

[data-type="flex-row-wrap"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--spacing-medium);
}

[data-type="contact"] {
	margin-top: 10px;
}

[data-type="contact-grid"] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xx-small);
}

[data-type="contact-item"] {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-medium);
}

[data-type="contact-item"] p {
	font-size: 18px;
	width: fit-content;
	margin: 0 !important;
}

[data-type="contact-item"] p:first-child {
	color: var(--focus-color);
	width: 150px;
	text-align: end;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-type="contact-item"] p:last-child {
	font-weight: 700;
	letter-spacing: 1.2px;
	text-align: start;
}

@media only screen and (max-width: 48rem) {
	[data-type="contact-item"] {
		display: block;
	}

	[data-type="contact-item"] p:first-of-type {
		text-align: start;
	}
}

#scrollAccess,
#accessibilityButton a,
#accessibilityButtonFooter a {
	cursor: pointer;
}

/*EASY-TO-CONSUME START*/
[data-type~="easy-to-consume"] {
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 0 !important;
	margin-bottom: 40px;
}

[data-type~="easy-to-consume"] ul {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 25px;
	padding: 0 !important;
}

[data-type~="easy-to-consume"] > ul > li::before {
	display: none;
}

[data-type~="easy-to-consume"] > ul > li > a {
	padding: 0 !important;
}

[data-accessibility~="dark"] [data-type~="easy-to-consume"] > ul > li > a {
	filter: invert(1);
}

[data-accessibility~="high-contrast"]
	[data-type~="easy-to-consume"]
	> ul
	> li
	> a {
	filter: invert(1) contrast(200%);
}

[data-type~="easy-to-consume"] > ul > li:focus-visible {
	outline: 2px solid var(--focus-color);
	outline-offset: 2px;
	border-radius: 7px;
}

[data-type~="easy-to-consume"] > ul > li > a {
	background-color: #252525;
	border-radius: 15px;
	cursor: pointer;
}

[data-type~="easy-to-consume"] > ul > li > a > img {
	height: 80px;
	width: auto;
	border-radius: 15px;
}

[data-type~="easy-to-consume"] > ul > li {
	margin: 0;
}

@media only screen and (max-width: 38.4rem) {
	[data-type~="easy-to-consume"] ul {
		flex-direction: column-reverse;
	}

	[data-type~="easy-to-consume"] > ul > li {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	[data-type~="easy-to-consume"] > ul > li > a {
		background-color: #252525;
		border-radius: 15px;
		cursor: pointer;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	[data-type~="easy-to-consume"] > ul > li::before {
		display: none;
	}
}

[data-type~="easy-content"] {
	padding: var(--spacing-medium) !important;
	border: 2px solid #252525 !important;
	border-radius: 15px;
	width: fit-content;
	margin-top: var(--spacing-x-large);
}

[data-type~="easy-content"] ul {
	display: block;
}

[data-type~="easy-to-listen"] {
	width: 100%;
}

[data-type~="easy-to-listen"] h3 {
	margin-bottom: 20px;
	margin-top: 0;
}

[data-type~="easy-to-listen"] .essential_audio {
	opacity: 1;
	visibility: visible;
	margin-bottom: 20px;
}
/*EASY-TO-CONSUME END*/

/*BREADCRUMBS START*/
nav[aria-label="breadcrumb"] {
	margin-bottom: var(--spacing-xx-small);
}

nav[aria-label="breadcrumb"] ul {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spacing-small);
	row-gap: 0;
	line-height: 1;
	margin: 0;
	padding: 0;
}

nav[aria-label="breadcrumb"] ul li {
	font-size: 18px;
	line-height: 1;
}

nav[aria-label="breadcrumb"] ul li a {
	text-decoration: none;
	line-height: 1;
}

nav[aria-label="breadcrumb"] ul li.breadcrumb-separator {
	font-size: var(--font-size-medium);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/*BREADCRUMBS END*/

/*SITEMAP START*/
[data-type="sitemap"] {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

[data-type="sitemap"] li {
	padding-left: 35px;
	text-indent: -27px;
	line-height: 1.55;
}

[data-type="sitemap"] li:before {
	font-family: "Xolonium", sans-serif;
	content: "●";
	padding-right: 10px;
}

[data-type="sitemap"] li a {
	text-decoration: none;
}
/*SITEMAP END*/

#scrollAccess {
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: fixed;
	right: var(--spacing-medium);
	top: var(--spacing-medium);
	opacity: 0;
	visibility: hidden;
	z-index: 9998;
}

#scrollAccess img {
	width: 50px;
	height: auto;
	border: 2px solid #f4f3f2;
	background: #252525;
	border-radius: 15px;
}

#scrollAccess.show {
	opacity: 1;
	visibility: visible;
}

.ui-tooltip {
	font-size: 16px;
	text-wrap: wrap;
	text-transform: uppercase;
	text-align: center;
	color: var(--primary-text-color);
	background-color: var(--bg-color);
	padding: 10px 15px;
	border: 2px solid var(--primary-color);
	border-radius: 5px;
}

ul {
	list-style-type: none;
}

sitemap ul li:before {
	width: 24px;
	height: 24px;
	padding: 5px;
	position: relative;
	counter-increment: item;
	content: "▶";
	color: #252525;
	font-size: 20px;
	line-height: 16px;
	font-weight: 400;
}

@media only screen and (max-width: 48rem) {
	.ui-tooltip {
		display: none !important;
		visibility: hidden;
		opacity: 0;
	}
}

[data-accessibility~="button"] .ui-tooltip {
	font-size: var(--font-size);
	z-index: 9997;
}

[data-type="accessibility"] {
	display: none;
	position: fixed;
	z-index: 9998;
	background-color: var(--bg-color);
	overflow: auto;
}

[data-type="accessibility"] #accessibility-heading {
	display: block;
	font-size: var(--title-2-size);
	font-weight: 700;
	line-height: var(--title-2-line);
	margin-bottom: var(--spacing-x-small);
}

[data-accessibility~="navbar"] [data-type="accessibility"] {
	bottom: 0;
	left: 0;
	width: 100vw;
	height: fit-content;
	max-height: 100vh;
	border-top: 2px solid var(--primary-color);
}

[data-accessibility~="sidebar"] [data-type="accessibility"] {
	top: 0;
	right: 0;
	width: fit-content;
	max-width: 690px;
	height: 100vh;
	max-height: 100vh;
	border-left: 2px solid var(--primary-color);
}

[data-type="accessibility"] > div {
	width: 100%;
	max-width: var(--content-width);
	padding: var(--spacing-medium);
	margin-block-start: 1em;
	margin-inline-end: 10px;
}

[data-type="accessibility"] > div > div {
	padding-bottom: 40px;
}

[data-type="accessibility"] label {
	font-family: "ApfelGrotezk", sans-serif;
	font-size: var(--font-size);
	letter-spacing: 1px;
}

[data-type="accessibility"] [data-type="accessibility-content"] > span,
[data-type="accessibility"] [data-type="accessibility-category"] > span {
	display: block;
	font-size: var(--font-size);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-normal);
	margin-top: var(--spacing-small);
	margin-bottom: var(--spacing-xx-small);
}

[data-accessibility~="button"] .ui-button {
	font-size: var(--font-size-medium);
	padding: var(--spacing-small) var(--spacing-x-large);
}

.ui-checkboxradio-icon-space {
	margin-left: 0;
	margin-right: 0;
}

[data-accessibility~="button"] .ui-checkboxradio-icon-space {
	margin-left: 2px;
	margin-right: 2px;
}

[data-type~="banner"] {
	background-color: #252525;
	color: #f4f3f2;
	padding: 25px 15px;
	text-align: center;
	border: 2px solid #f4f3f2;
	border-radius: 15px;
	line-height: 1;
}

[data-type~="pref"] {
	position: fixed;
	left: 35px;
	bottom: 25px;
	width: 400px;
	color: #f4f3f2;
	background-color: var(--info-color);
}

@media only screen and (max-width: 48rem) {
	[data-type~="pref"] {
		left: 0;
		bottom: 0;
		width: 100%;
		border-radius: 0;
	}
}

[data-type~="pref"] p {
	margin-bottom: 25px !important;
}

#sa-pref-bar[data-type*="disabled"] {
	display: none;
}

#sa-pref-bar[data-type*="available"] {
	display: block;
}

#sa-pref-bar > div {
	display: flex;
	flex-direction: row;
	gap: 25px;
	justify-content: center;
}

#rssContainer {
	display: none;
}

.feed-item {
	display: flex;
	gap: 25px;
	margin-bottom: 20px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px;
}

.feed-title {
	font-size: var(--font-size);
	font-weight: bold;
}

.feed-date {
	font-size: 12px;
	color: gray;
}

.feed-description {
	margin: 10px 0;
}

.feed-image {
	width: fit-content;
}

.feed-content {
	width: 100%;
}

.feed-image img {
	width: 480px;
	max-width: 480px;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.checkbox-container {
	margin-bottom: 20px;
}

.checkbox-container label {
	margin-right: 10px;
}

.ui-button {
	border: 2px solid var(--primary-color);
	border-radius: 5px;
	padding: 11px 15px;
	margin-right: unset;
}

.ui-checkboxradio-label .ui-icon-background {
	box-shadow: unset;
	border: 2px solid var(--primary-color);
}

.ui-icon-background {
	background-color: var(--bg-color);
	width: 16px !important;
	height: 16px !important;
	color: green;
}

.ui-state-active .ui-icon-background {
	color: var(--focus-color);
}

.ui-checkboxradio-label {
	background-color: var(--bg-color);
	color: var(--primary-color);
}

.ui-checkboxradio-label.ui-checkboxradio-checked {
	background-color: var(--primary-color);
	color: var(--bg-color);
}

.ui-checkboxradio-radio-label.ui-checkboxradio-checked {
	background-color: var(--primary-color);
	color: var(--bg-color);
}

.ui-checkboxradio-checked .ui-icon-background {
	color: var(--bg-color);
	background-color: var(--primary-color);
	border: unset;
}

.ui-icon-check {
	position: relative;
}

.ui-icon-check::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	color: green;
	width: 16px;
	height: 16px;
	border: 2px solid var(--bg-color);
}

.ui-button .ui-icon {
	background-image: url("checked.svg");
	background-size: 50%;
	background-repeat: no-repeat;
	background-position: center;
}

[data-type="accessibility-container"] {
	display: flex;
	flex-wrap: wrap;
	column-gap: 10px;
	row-gap: 10px;
}

.essential_audio {
	opacity: 0;
	visibility: hidden;
	margin-top: 0;
	margin-bottom: 0;
}

[data-img~="blurOnLoad"] {
	filter: blur(10px);
	transition: filter 0.5s ease-out;
	margin: -5px -10px -10px -5px;
	background-color: #252525;
	transition-duration: 1000ms;
}

[data-img~="square"] {
	width: 100%;
	aspect-ratio: 1 / 1;
}

[data-img~="banner"] {
	width: 100%;
	aspect-ratio: 4 / 1;
	object-fit: cover;
}

[data-img~="banner"] {
	width: 100%;
	aspect-ratio: 4 / 1;
	object-fit: cover;
}

@media only screen and (max-width: 48rem) {
	[data-img~="banner"] {
		width: 100%;
		aspect-ratio: 4 / 2;
		object-fit: cover;
	}
}

[data-img~="landscape"] {
	width: 100%;
	height: auto;
}

[data-img~="imgLoaded"] {
	filter: unset;
	background-color: unset;
	margin: unset;
	transition-duration: 1000ms;
}

.sl-wrapper .sl-close {
	right: 25px;
	top: 25px;
	height: 50px;
	width: 50px;
	border: 2px solid var(--focus-color);
	background-color: var(--bg-color);
	border-radius: 15px;
	padding: 10px;
	margin-top: 0;
	margin-right: 0;
}

table {
	border: 1px solid #000;
}

table,
tr {
	height: fit-content;
}

[data-type="image-set"][data-layout="multi"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 25px;
}

[data-type="image-set"][data-layout="dual"] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px;
}

[data-type="image-set"][data-layout="triple"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 25px;
}

[data-type="image-set"][data-layout="quad"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 25px;
}

@media only screen and (max-width: 48rem) {
	[data-type="image-set"][data-layout="dual"],
	[data-type="image-set"][data-layout="triple"] {
		display: flex;
		flex-direction: column;
		gap: unset;
	}

	[data-type="image-set"][data-layout="multi"],
	[data-type="image-set"][data-layout="quad"] {
		grid-template-columns: 1fr 1fr;
	}
}

[data-type="main-title-navigation"] {
	display: flex;
	gap: 25px;
}

@media only screen and (max-width: 38.4rem) {
	[data-type="main-title-navigation"] {
		display: flex;
		gap: 15px;
	}
}

hr[data-type="dark"] {
	border-top: 2px solid var(--primary-color);
}

hr[data-type="light"] {
	border-top: 1px solid rgba(37, 37, 37, 0.25);
}

[data-type="link-tooltip"],
[data-tooltip="status-bar"] {
	visibility: hidden;
	opacity: 0;
	position: fixed;
	bottom: 0;
	left: 0;
	width: fit-content;
	padding: 10px;
	background-color: #f4f3f2;
	border-top: 2px solid #252525;
	border-right: 2px solid #252525;
	border-top-right-radius: 15px;
	z-index: 9999;
	color: #252525;
	transition:
		opacity 200ms,
		transform 200ms;
	transform: translateY(10px); /* Optional for a slide-in effect */
	margin-bottom: 0 !important;
	font-weight: 400;
}

[data-tooltip="status-bar"] span:not([data-info="links"]),
[data-type="link-tooltip"] span {
	text-decoration: underline;
	text-underline-offset: 6px;
}

[data-tooltip="status-bar"] span:not([data-info="links"]):after,
[data-type="link-tooltip"] span:after {
	content: " ↗";
}

[data-anchor="button"] > li:hover > [data-tooltip="status-bar"],
[data-type="portfolio"] a:hover > [data-type="link-tooltip"],
[data-type="portfolio"] a:hover > [data-tooltip="status-bar"],
[data-type="portfolio"] a:focus-visible > [data-type="link-tooltip"],
[data-type="explore-further"] a:hover + [data-type="link-tooltip"],
[data-type="main-title-navigation"] a:hover + [data-type="link-tooltip"],
[data-type="games"] a:hover > [data-type="link-tooltip"],
[data-type="entertainment-poster"] a:hover > [data-tooltip="status-bar"],
[data-type="games"] a:hover > [data-tooltip="status-bar"] {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

[data-accessibility~="tooltipsOFF"] [data-type="link-tooltip"] {
	display: none !important;
}

@media only screen and (max-width: 48rem) {
	[data-type="link-tooltip"] {
		display: none !important;
	}
}

[data-anchor="button"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px;
	row-gap: 20px;
}

[data-anchor="button"] li {
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: #252525;
	border-radius: 5px;
	text-indent: unset;
	padding-left: unset;
}

[data-anchor="button"] li a {
	height: 100%;
	padding: 0 14px;
	color: rgba(37, 37, 37, 0.5);
	cursor: default;
	border: 2px solid #252525;
	border-left: unset;
	background-color: #f4f3f2;
	border-radius: 5px;
	border-top-left-radius: unset;
	border-bottom-left-radius: unset;
	display: block;
	text-decoration: none;
}

[data-anchor="button"] li label {
	border-top-right-radius: unset;
	border-bottom-right-radius: unset;
}

[data-anchor="button"] li label.ui-checkboxradio-checked + a {
	color: #252525;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-anchor="button"] li::before {
	display: none;
}

nav a {
	cursor: pointer;
}

[data-type="search"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 16px;
}

[data-type="search"] input {
	flex: 1;
	border: 1px solid #252525;
	padding: 9px 17px;
	border-radius: 5px;
}

[data-type="search"] input:focus-visible {
	outline: unset;
	border: 2px solid #252525;
	padding: 8px 16px;
}

[data-type="search"] button {
	outline: unset;
	padding: 8px 16px;
	border-radius: 5px;
	cursor: pointer;
}

[data-type="search"] button {
	color: #f4f3f2;
	background-color: #252525;
	border: 2px solid #252525;
}

[data-type="search"] button#clearSearch {
	color: #252525;
	background-color: #f4f3f2;
	border: 2px solid #252525;
}

[data-type="search"] button:hover {
	color: #252525;
	background-color: #f4f3f2;
}

[data-type="search"] button#clearSearch:hover {
	color: #f4f3f2;
	background-color: #252525;
}

[data-type="upcoming-shows"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 20px;
}

@media only screen and (max-width: 72rem) {
	[data-type="upcoming-shows"] {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media only screen and (max-width: 48rem) {
	[data-type="upcoming-shows"] {
		grid-template-columns: 1fr 1fr;
	}
}

@media only screen and (max-width: 38.4rem) {
	[data-type="upcoming-shows"] {
		grid-template-columns: 1fr;
	}
}

[data-type="favorite-shows"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 20px;
}

@media only screen and (max-width: 72rem) {
	[data-type="favorite-shows"] {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

@media only screen and (max-width: 48rem) {
	[data-type="favorite-shows"] {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media only screen and (max-width: 38.4rem) {
	[data-type="favorite-shows"] {
		grid-template-columns: 1fr 1fr;
	}
}

[data-type="upcoming-shows"] li,
[data-type="favorite-shows"] li {
	padding-left: unset;
	text-indent: unset;
	line-height: unset;
}

[data-type="upcoming-shows"] li::before,
[data-type="favorite-shows"] li::before {
	content: unset;
}

/* ── Grid / list view (assets/includes/view_mode.php) ──────────────────────
   In list view each poster tile becomes a row: the poster, then the tile's
   own status-bar tooltip shown inline instead of docked at the bottom of the
   viewport. Wide screens put two rows side by side — each item still reads as
   a row.

   The switch is a small tab hanging from the light line above its section,
   the way the page tools hang from the navbar line: the page's own colour,
   outlined all round in the line's colour (main hr) — its top edge lies on
   the line, so the line runs on across it.

   A switchable section sits close to the line above it (--view-line-gap), and
   the tab is pinned to the heading row, reaching up that gap plus the line's
   own 2px box (1px line + the browser's 1px inset bottom border) so it meets
   the line itself. The heading sits beside the tab, its width capped at the
   tab's left edge: the tab is 6rem wide (two text buttons), plus a gap. */
body {
	--view-line-gap: var(--spacing-medium);
	--view-tab-w: 6rem;
}

/* The section is pulled up into the line's bottom margin; the two margins
   collapse (1.75rem + (gap - 1.75rem) = gap) whatever sits between them — an
   inline <style> (games, boardgames) or the line closing the previous
   section (movies, shows). */
main [data-view-key],
main [data-view-head]:has(> [data-view-switch]:only-child) {
	margin-top: calc(var(--view-line-gap) - var(--spacing-x-large));
}

[data-view-head] {
	position: relative;
	padding-right: calc(var(--view-tab-w) + var(--spacing-normal));
}

/* A page-wide switch (collections, wishlist) has a row of its own, right
   under its line: the row is as tall as the tab, so what follows starts
   below it. */
[data-view-head]:has(> [data-view-switch]:only-child) {
	padding-right: 0;
	min-height: calc(2rem - var(--view-line-gap));
}

[data-view-switch] {
	position: absolute;
	top: calc(-1 * (var(--view-line-gap) + 0.1rem));
	right: 0;
	display: inline-flex;
	gap: var(--spacing-xx-small);
	padding: var(--spacing-xx-small);
	background-color: var(--bg-color);
	border: 1px solid rgba(37, 37, 37, 0.25);
	border-radius: 0 0 var(--spacing-x-small) var(--spacing-x-small);
}

[data-view-switch] button {
	font: inherit;
	font-size: var(--font-size-small);
	line-height: 1.2;
	padding: var(--spacing-xx-small) var(--spacing-x-small);
	border: 0;
	border-radius: var(--spacing-xx-small);
	background: none;
	color: var(--primary-text-color);
	cursor: pointer;
}

[data-view-switch] button[aria-pressed="true"] {
	background-color: var(--primary-color);
	color: var(--bg-color);
}

[data-view="list"] :is([data-type="favorite-shows"], [data-type="games"], [data-type="portfolio"]) {
	grid-template-columns: 1fr;
	gap: var(--spacing-normal);
}

@media only screen and (min-width: 72rem) {
	[data-view="list"] :is([data-type="favorite-shows"], [data-type="games"], [data-type="portfolio"]) {
		grid-template-columns: 1fr 1fr;
	}
}

/* One shade-2 card per item: the poster flush on the left, the text beside
   it. The poster stretches to the card's height and crops to fill, so the two
   always meet edge to edge — on desktop the card is the poster's height and
   nothing is cut; on phones, where the text is taller, the poster loses a
   little at its sides. The card's corner is the poster radius, so the badges'
   corners (which read --poster-radius) match it. */
[data-view="list"]
	:is([data-type="favorite-shows"], [data-type="games"], [data-type="portfolio"])
	> [data-poster] {
	display: grid;
	grid-template-columns: var(--list-poster-w) 1fr;
	align-items: stretch;
	background-color: var(--shade-2);
	color: var(--primary-text-color);
	border-radius: var(--poster-radius);
	overflow: hidden;
	transition: transform 250ms ease;
}

/* The poster column follows the tile's own shape (data-ratio from the badge
   manager, or images flagged square), at widths that keep the card about the
   same height — so square art is not forced into a portrait slot and cropped. */
[data-view="list"] [data-poster] {
	--list-poster-w: 7.5rem;
	--list-poster-w-sm: 5.5rem;
}

[data-view="list"] [data-poster][data-ratio="portrait"] {
	--list-poster-w: 8.5rem;
	--list-poster-w-sm: 6rem;
}

[data-view="list"] [data-poster][data-ratio="square"],
[data-view="list"] [data-poster]:has(img[data-img~="square"]) {
	--list-poster-w: 10rem;
	--list-poster-w-sm: 5.5rem;
}

[data-view="list"] [data-poster][data-ratio="landscape"] {
	--list-poster-w: 13rem;
	--list-poster-w-sm: 8rem;
}

[data-view="list"] [data-poster][data-ratio="wide"] {
	--list-poster-w: 16rem;
	--list-poster-w-sm: 9rem;
}

/* The whole card lifts on hover, like a poster tile does in the grid. */
[data-view="list"]
	:is([data-type="favorite-shows"], [data-type="games"], [data-type="portfolio"])
	> [data-poster]:hover,
[data-view="list"]
	:is([data-type="favorite-shows"], [data-type="games"], [data-type="portfolio"])
	> [data-poster]:focus-within {
	transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
	[data-view="list"]
		:is([data-type="favorite-shows"], [data-type="games"], [data-type="portfolio"])
		> [data-poster] {
		transition: none;
	}
	[data-view="list"]
		:is([data-type="favorite-shows"], [data-type="games"], [data-type="portfolio"])
		> [data-poster]:hover,
	[data-view="list"]
		:is([data-type="favorite-shows"], [data-type="games"], [data-type="portfolio"])
		> [data-poster]:focus-within {
		transform: none;
	}
}

/* The image keeps its own shape at the top of the card, never stretched to
   the card's height (that cropped it whenever the text ran taller). Where the
   card does run taller, its colour continues below and the image's free
   corner is rounded; badges on that edge follow. */
[data-view="list"] [data-poster] [data-poster-frame] {
	display: block;
	align-self: start;
}

[data-view="list"] [data-poster] [data-poster-frame] > a:not([data-badge]) {
	display: block;
}

[data-view="list"] [data-poster] [data-poster-frame] img {
	height: auto;
	border-radius: 0 0 var(--poster-radius) 0;
}

[data-view="list"]
	:is([data-type="favorite-shows"], [data-type="games"], [data-type="portfolio"])
	[data-poster]
	[data-badge][data-pos="bottom-left"] {
	border-radius: 0 var(--poster-radius) 0 0;
}

[data-view="list"]
	:is([data-type="favorite-shows"], [data-type="games"], [data-type="portfolio"])
	[data-poster]
	[data-badge][data-pos="bottom-right"],
[data-view="list"]
	:is([data-type="favorite-shows"], [data-type="games"], [data-type="portfolio"])
	[data-type="entertainment-poster"]
	[data-upcoming]::before {
	border-radius: var(--poster-radius) 0 var(--poster-radius) 0;
}

@media only screen and (max-width: 38.4rem) {
	[data-view="list"]
		:is([data-type="favorite-shows"], [data-type="games"], [data-type="portfolio"])
		> [data-poster] {
		grid-template-columns: var(--list-poster-w-sm) 1fr;
	}

	/* Too narrow to share a line: the title gets the full width and the logos
	   sit under it as their own row. */
	[data-view="list"] [data-poster] [data-info="head"] {
		flex-wrap: wrap;
		row-gap: var(--spacing-x-small);
	}

	[data-view="list"] [data-poster] [data-info="links"] {
		flex-basis: 100%;
		margin-left: 0;
		padding-left: 0;
	}
}

[data-view="list"] [data-poster]:hover [data-poster-frame],
[data-view="list"] [data-poster]:focus-within [data-poster-frame] {
	transform: none;
}

[data-view="list"] [data-poster] a {
	pointer-events: auto;
}

/* Badges sized for a small poster, not a grid tile. */
[data-view="list"] [data-poster] [data-badge] {
	height: 1.5rem;
}

[data-view="list"] [data-poster] [data-badge][data-badge-style="icon"] {
	width: 1.5rem;
}

[data-view="list"] [data-poster] [data-badge][data-badge-style="text"] {
	min-width: 0;
	padding: 0 0.35rem;
	font-size: 0.6rem;
}

/* The poster's right edge meets the text, not the card's edge, so badges on
   that side keep only their rounded inner corner. */
[data-view="list"] [data-poster] [data-badge][data-pos="top-right"] {
	border-radius: 0 0 0 var(--poster-radius);
}

[data-view="list"] [data-poster] [data-badge][data-pos="bottom-right"] {
	border-radius: var(--poster-radius) 0 0 0;
}

[data-view="list"] [data-type="entertainment-poster"] [data-upcoming]::before {
	width: 1.5rem;
	height: 1.5rem;
	background-size: contain;
	border-radius: var(--poster-radius) 0 0 0;
}

[data-view="list"] [data-poster] > [data-tooltip="status-bar"] {
	position: static;
	visibility: visible;
	opacity: 1;
	transform: none;
	width: auto;
	padding: var(--spacing-normal);
	background: none;
	border: 0;
	border-radius: 0;
	z-index: auto;
	transition: none;
}

/* Header at the top, details at the bottom, level with the poster's foot:
   the block stretches to the row's height and space-between pushes the
   details down. */
[data-view="list"]
	:is([data-type="favorite-shows"], [data-type="games"], [data-type="portfolio"])
	> [data-poster]
	> [data-tooltip="status-bar"] {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

[data-view="list"] [data-poster] > [data-tooltip="status-bar"] hr {
	display: none;
}

[data-view="list"] [data-poster] > [data-tooltip="status-bar"] > div {
	flex-direction: column;
	gap: var(--spacing-x-small);
	margin-top: var(--spacing-small);
}

[data-view="list"] [data-poster] > [data-tooltip="status-bar"] small {
	max-width: none;
}

/* Items with many details (a moomin mug has seven) would make a very tall
   card; from four details up they take two columns. */
@media only screen and (min-width: 38.4rem) {
	[data-view="list"]
		[data-poster]
		> [data-tooltip="status-bar"]
		> div:has(> small:nth-child(4)) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Upcoming episodes as a list: one shade-2 card per episode — the show's
   poster flush left, the show, episode and description in the middle, the
   episode still on the right. Rows stay one per line: the description needs
   the width. The still's column collapses when an episode has none. */
[data-view="list"] [data-type="upcoming-shows"] {
	grid-template-columns: 1fr;
	gap: var(--spacing-normal);
}

[data-view="list"] [data-type="upcoming-shows"] > li {
	display: grid;
	grid-template-columns: 7.5rem 1fr auto;
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"poster head still"
		"poster desc still";
	column-gap: var(--spacing-normal);
	background-color: var(--shade-2);
	color: var(--primary-text-color);
	border-radius: var(--spacing-x-small);
	overflow: hidden;
	transition: transform 250ms ease;
}

[data-view="list"] [data-type="upcoming-shows"] > li:hover,
[data-view="list"] [data-type="upcoming-shows"] > li:focus-within {
	transform: scale(1.01);
}

@media (prefers-reduced-motion: reduce) {
	[data-view="list"] [data-type="upcoming-shows"] > li {
		transition: none;
	}
	[data-view="list"] [data-type="upcoming-shows"] > li:hover,
	[data-view="list"] [data-type="upcoming-shows"] > li:focus-within {
		transform: none;
	}
}

[data-view="list"] [data-type="upcoming-shows"] > li > figure {
	margin: 0;
	padding: 0;
}

[data-view="list"] [data-type="upcoming-shows"] > li > figure:first-of-type {
	grid-area: poster;
}

[data-view="list"]
	[data-type="upcoming-shows"]
	> li
	> figure[data-img="episode"] {
	grid-area: still;
	width: 16rem;
}

/* Poster and still keep their own shapes at the top of the card, as in the
   other lists; each rounds the corner that ends inside the card. */
[data-view="list"] [data-type="upcoming-shows"] > li > figure {
	align-self: start;
}

[data-view="list"] [data-type="upcoming-shows"] > li > figure > a {
	display: block;
}

[data-view="list"] [data-type="upcoming-shows"] > li > figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0 0 var(--spacing-x-small) 0;
}

[data-view="list"]
	[data-type="upcoming-shows"]
	> li
	> figure[data-img="episode"]
	img {
	border-radius: 0 0 0 var(--spacing-x-small);
}

[data-view="list"] [data-type="upcoming-shows"] > li > h3 {
	grid-area: head;
	margin: 0;
	padding-top: var(--spacing-normal);
}

[data-view="list"] [data-type="upcoming-shows"] > li > p {
	grid-area: desc;
	padding-block: var(--spacing-x-small) var(--spacing-normal);
}

/* Without a still the text would run to the card's edge. */
[data-view="list"]
	[data-type="upcoming-shows"]
	> li:not(:has(> figure[data-img="episode"]))
	> :is(h3, p) {
	padding-right: var(--spacing-normal);
}

/* Phones: poster and text side by side, the still across the foot of the
   card. The poster keeps its own shape, as in the other lists. */
@media only screen and (max-width: 38.4rem) {
	[data-view="list"] [data-type="upcoming-shows"] > li {
		grid-template-columns: 5.5rem 1fr;
		grid-template-rows: auto 1fr auto;
		grid-template-areas:
			"poster head"
			"poster desc"
			"still still";
		column-gap: var(--spacing-small);
	}

	[data-view="list"]
		[data-type="upcoming-shows"]
		> li
		> figure:first-of-type {
		align-self: start;
	}

	[data-view="list"]
		[data-type="upcoming-shows"]
		> li
		> figure:first-of-type
		img {
		height: auto;
		border-radius: 0 0 var(--spacing-x-small) 0;
	}

	[data-view="list"]
		[data-type="upcoming-shows"]
		> li
		> figure[data-img="episode"] {
		width: auto;
	}

	[data-view="list"]
		[data-type="upcoming-shows"]
		> li
		> figure[data-img="episode"]
		img {
		border-radius: 0;
	}

	[data-view="list"] [data-type="upcoming-shows"] > li > :is(h3, p) {
		padding-right: var(--spacing-small);
	}
}

[data-type="upcoming-shows"] h3 {
	line-height: 1.2;
	margin-bottom: 15px;
}

[data-type="upcoming-shows"] h3 span {
	font-family: "ApfelGrotezk";
	font-size: 20px;
}

[data-type="upcoming-shows"] p {
	font-size: 16px;
	margin-bottom: unset !important;
}

[data-type="upcoming-shows"] figure:first-of-type {
	padding-top: 10px;
}

[data-img="episode"] img {
	width: 100%;
	height: auto;
}

[data-type="episode-date"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-left: 60px;
	font-weight: 700;
}

[data-type="episode-date"] span {
	font-weight: 400;
}

[data-type="episode-date"]:first-of-type {
	margin-top: 30px;
}

[data-type="episode-date"]::before {
	content: "";
	background: url("../img/icons/calendar.svg");
	width: 50px;
	height: 50px;
	position: absolute;
	left: 0;
}

@media only screen and (max-width: 48rem) {
	[data-mobile="false"] {
		display: none;
	}
}

[data-type="entertainment-poster"],
[data-type="games"] {
	position: relative;
}

[data-type="entertainment-poster"] a,
[data-type="games"] a {
	display: flex;
	position: relative;
	cursor: pointer;
	pointer-events: auto;
	object-fit: cover;
}

[data-type="entertainment-poster"] img {
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

#owned-mugs [data-type="entertainment-poster"] img,
#all-mugs [data-type="entertainment-poster"] img,
#favorite-artists [data-type="entertainment-poster"] img,
#favorite-tracks [data-type="entertainment-poster"] img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Collections & Wishlist opt into square tiles via data-img="square" */
[data-type="entertainment-poster"] img[data-img~="square"] {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════════
   Poster component (assets/includes/poster.php)
   Every image-grid tile renders through renderPoster(), which stamps
   [data-poster] + [data-ratio] on the wrapper and emits badges as
   [data-badge][data-pos] siblings of the link. Both the ratio and the
   badge corners come from the DB (migration 050, local/badge-manager).
═══════════════════════════════════════════════════════════════ */

[data-poster] {
	position: relative;
	/* One source of truth for the tile's corner. base.css gives every img a
	   10px radius; the games/tools grids override their imgs to 15px. Badges
	   read this so their inner corner always matches the image. */
	--poster-radius: 10px;
}

[data-poster][data-type="portfolio-item"] {
	--poster-radius: 15px;
}

/* The frame wraps the link, image and badges. Hover scales the FRAME so the
   badges grow with the poster and stay glued to its corners — scaling only the
   image left the badges behind and let the image ride over them.
   The status-bar tooltip is deliberately OUTSIDE the frame: it is position:fixed,
   and a transformed ancestor would become its containing block and trap it. */
[data-poster-frame] {
	position: relative;
	display: block;
	transition: transform 250ms ease;
}

[data-poster]:hover [data-poster-frame],
[data-poster]:focus-within [data-poster-frame] {
	transform: scale(1.02);
}

/* Lift the hovered tile above its grid neighbours while it is scaled up. */
[data-poster]:hover,
[data-poster]:focus-within {
	z-index: 2;
}

/* Hover is tracked on the tile, so crossing onto a badge no longer drops it. */
[data-poster]:hover > [data-tooltip="status-bar"],
[data-poster]:focus-within > [data-tooltip="status-bar"] {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	[data-poster-frame] {
		transition: none;
	}
	[data-poster]:hover [data-poster-frame],
	[data-poster]:focus-within [data-poster-frame] {
		transform: none;
	}
}

[data-poster] img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

[data-poster][data-ratio="square"] img {
	aspect-ratio: 1 / 1;
}
[data-poster][data-ratio="poster"] img {
	aspect-ratio: 2 / 3;
}
[data-poster][data-ratio="portrait"] img {
	aspect-ratio: 3 / 4;
}
[data-poster][data-ratio="landscape"] img {
	aspect-ratio: 4 / 3;
}
[data-poster][data-ratio="wide"] img {
	aspect-ratio: 16 / 9;
}

/* ── Badges: corner, colour and icon all come from config ─────────────── */
[data-poster] [data-badge] {
	position: absolute;
	z-index: 3;
	height: var(--spacing-xx-large);
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--primary-color);
	color: var(--bg-color);
	pointer-events: none;
}

/* The review badge is the only interactive one */
[data-poster] a[data-badge] {
	pointer-events: auto;
	text-decoration: none;
}
[data-poster] a[data-badge]:hover,
[data-poster] a[data-badge]:focus {
	filter: brightness(1.12);
	color: var(--bg-color);
}

[data-poster] [data-badge][data-badge-style="icon"] {
	width: var(--spacing-xx-large);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60%;
}

[data-poster] [data-badge][data-badge-style="text"] {
	min-width: 50px;
	padding: 0 0.5rem;
	font-size: var(--font-size-small);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

[data-poster] [data-badge][data-pos="top-left"] {
	top: 0;
	left: 0;
	border-radius: var(--poster-radius) 0 var(--poster-radius) 0;
}
[data-poster] [data-badge][data-pos="top-right"] {
	top: 0;
	right: 0;
	border-radius: 0 var(--poster-radius) 0 var(--poster-radius);
}
[data-poster] [data-badge][data-pos="bottom-left"] {
	bottom: 0;
	left: 0;
	border-radius: 0 var(--poster-radius) 0 var(--poster-radius);
}
[data-poster] [data-badge][data-pos="bottom-right"] {
	bottom: 0;
	right: 0;
	border-radius: var(--poster-radius) 0 var(--poster-radius) 0;
}

/* Collections & Wishlist: de-emphasise disliked tiles */
#disliked [data-type="entertainment-poster"] img {
	filter: grayscale(0.4);
}

@media only screen and (max-width: 48rem) {
	[data-type="entertainment-poster"] a,
	[data-type="games"] a {
		pointer-events: none;
	}

	[data-type="entertainment-poster"] [data-tooltip="status-bar"],
	[data-type="games"] [data-tooltip="status-bar"] {
		pointer-events: auto;
	}

	[data-type="entertainment-poster"][data-status="active"]
		[data-tooltip="status-bar"],
	[data-type="games"][data-status="active"] [data-tooltip="status-bar"] {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
	}
}

[data-type="entertainment-poster"] [data-upcoming]::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: var(--spacing-xx-large);
	height: var(--spacing-xx-large);
	border-radius: 10px 0 10px 0;
	background-color: var(--primary-color);
}

[data-upcoming="true"]::before {
	background: url("../img/icons/upcoming-episodes.svg");
	border-top: 2px solid #ffd700;
	border-left: 2px solid #ffd700;
}

[data-upcoming="false"]::before {
	background: url("../img/icons/full-season.svg");
	border-top: 2px solid var(--success-color);
	border-left: 2px solid var(--success-color);
}

@media only screen and (max-width: 48rem) {
	[data-tooltip="status-bar"] {
		width: 100%;
		border-top: 2px solid var(--primary-color);
		border-right: unset;
		border-top-right-radius: unset;
	}
}

[data-type="entertainment-poster"] [data-tooltip="status-bar"] small,
[data-type="games"] [data-tooltip="status-bar"] small {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	margin-left: 3.75rem;
	max-width: 16rem;
	line-height: 1.2;
}

/* Config-driven tooltips (managed via local/tooltip-manager): the icon is a real
   <img> per line, laid out as a simple row (no position-based ::before icons). */
[data-tooltip="status-bar"][data-icons="managed"] small {
	margin-left: 0;
	gap: 0.5rem;
	flex-wrap: nowrap;
}
[data-tooltip="status-bar"][data-icons="managed"] small img {
	width: var(--spacing-xx-large);
	height: var(--spacing-xx-large);
	flex: 0 0 auto;
	object-fit: contain;
}

/* Status-bar header (tooltips.php): the title, then — on the right — small
   logo links (the item on TMDB, a search on EXT). Logo selectors match the
   specificity of the poster image rules ([data-poster][data-ratio] img),
   which would force them to 2:3, and win by coming later; base.css's img
   radius is taken off too. */
/* One line: a long title wraps inside its own box, the logos stay top-right.
   Baseline alignment sits the logos' foot on the title's first-line baseline,
   and at cap height (0.7em) their letters line up with the title's. */
[data-tooltip="status-bar"] [data-info="head"] {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	column-gap: 0.4em;
	margin: 0;
}

/* A plain-text source ("Title — Steam ↗") has no logos to keep beside the
   title, so the line simply wraps; the source stays in one piece. */
[data-tooltip="status-bar"] [data-info="head"]:not(:has([data-info="links"])) {
	flex-wrap: wrap;
}

[data-tooltip="status-bar"] [data-info="source"] {
	white-space: nowrap;
}

/* …except where a long host would not fit the narrow text column at all. */
@media only screen and (max-width: 38.4rem) {
	[data-view="list"] [data-tooltip="status-bar"] [data-info="source"] {
		white-space: normal;
		overflow-wrap: anywhere;
	}
}

[data-tooltip="status-bar"] [data-info="title"] {
	min-width: 0;
}

[data-tooltip="status-bar"] [data-info="links"] {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: baseline;
	gap: var(--spacing-x-small);
	margin-left: auto;
	padding-left: var(--spacing-normal);
}

/* Poster status bars share the list rows' shade-2 card colour. The text
   colour is the theme's, so dark mode (shade-2 = #525252) stays readable. */
[data-poster] > [data-tooltip="status-bar"] {
	background-color: var(--shade-2);
	color: var(--primary-text-color);
}

/* One width for every poster on desktop, so the docked bar does not jump
   between items; long titles wrap inside it. Phones keep the full-width bar. */
@media only screen and (min-width: 48rem) {
	[data-poster] > [data-tooltip="status-bar"] {
		width: 24rem;
	}
}

[data-tooltip="status-bar"] [data-info="link"] {
	display: inline-flex;
	line-height: 0;
	transition: transform 150ms ease;
}

/* A small lift says "this is a link" without underlines or tooltips. */
[data-tooltip="status-bar"] [data-info="link"]:hover,
[data-tooltip="status-bar"] [data-info="link"]:focus-visible {
	transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
	[data-tooltip="status-bar"] [data-info="link"] {
		transition: none;
	}
}

[data-tooltip="status-bar"] [data-info="link"] img {
	display: block;
	width: auto;
	height: 0.75em;
	aspect-ratio: auto;
	object-fit: contain;
	border-radius: 0;
}

/* EXT's letters read smaller than the TMDB wordmark at the same
   height, so it gets a little more. */
[data-tooltip="status-bar"] [data-info="link"] img[src$="ext-to.svg"] {
	height: 0.85em;
}

/* Tile links are switched off on touch (first tap opens the status bar), but
   the status bar's own links must stay tappable. */
[data-type="entertainment-poster"]
	[data-tooltip="status-bar"]
	[data-info="link"] {
	pointer-events: auto;
}

[data-type="entertainment-poster"] [data-tooltip="status-bar"] div,
[data-type="games"] [data-tooltip="status-bar"] div {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

[data-type="entertainment-poster"] hr,
[data-type="games"] hr {
	margin-top: var(--spacing-x-small);
	margin-bottom: var(--spacing-x-small);
}

[data-type="loader"] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #f4f3f2;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 19999;
}

[data-type="loader"] img {
	width: fit-content;
	height: auto;
}

[data-page="preview"] [data-type="loader"] {
	position: relative;
	top: unset;
	left: unset;
	width: 100%;
	height: 400px;
}

[data-page="preview"] [data-type="loader"] img {
	width: 400px;
	height: auto;
}

/* "Show duplicates only" filter on the games page: hide non-duplicate tiles
   and any library section that ends up with nothing left to show. */
main:has(#duplicate-filter:checked)
	[data-type="games"]
	> [data-type="portfolio-item"]:not([data-duplicate]) {
	display: none;
}
main:has(#duplicate-filter:checked)
	section[data-type="category"]:not(
		:has([data-type="portfolio-item"][data-duplicate])
	) {
	display: none;
}

[data-type="category"] > p {
	color: var(--shade-5);
}

[data-info="platforms"] {
	display: none;
}
main:has(#duplicate-filter:checked) [data-info="platforms"] {
	display: revert;
}

[data-tooltip="status-bar"][data-dup-tooltip] {
	display: none;
}
main:has(#duplicate-filter:checked)
	[data-tooltip="status-bar"][data-dup-tooltip] {
	display: revert;
}
main:has(#duplicate-filter:checked)
	[data-type="games"]
	[data-type="link-tooltip"] {
	display: none;
}

[data-type="notification"] {
	padding: 20px;
	border: 2px solid #252525;
	border-radius: 10px;
	width: fit-content;
}

figure[data-type="img-icon-banner"] {
	padding-top: unset;
}

figure[data-type="img-icon-banner"]:hover {
	transform: scale(1.0125);
}

figure[data-type="img-icon-banner"]:has(img) {
}

figure[data-type="img-icon-banner"] a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	border-radius: 1rem;
}

figure[data-type="img-icon-banner"] a[href="/assets/img/icons/design.webp"] {
	background-color: var(--focus-color);
}

figure[data-type="img-icon-banner"]
	a[href="/assets/img/icons/development.webp"] {
	background-color: #7ea16b;
}

figure[data-type="img-icon-banner"]
	a[href="/assets/img/icons/communications.webp"] {
	background-color: #9395d3;
}

figure[data-type="img-icon-banner"] img {
	height: 100%;
	width: auto;
	max-height: 10rem;
}

[data-type="hero"] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 1.25rem;
	padding: 1.25rem 0;
	border-radius: 1rem;
}

[data-accessibility~="narrow"] [data-type="hero"] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

[data-accessibility~="narrow"] [data-type="hero-img"] {
	display: none;
}

@media (max-width: 80rem) {
	[data-type="hero"] {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: fit-content;
	}
}

[data-type="hero"] h1 {
	line-height: 0.8;
	margin-bottom: 1.5rem;
}

[data-type="hero"] p {
	margin-bottom: 2rem !important;
}

[data-type="hero-img"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1rem;
	height: 20rem;
	width: 100%;
}

[data-type="hero-content"] br {
	margin-bottom: 0;
	margin-top: 0;
}

@media (max-width: 80rem) {
	[data-type="hero-img"] {
		gap: 1.5rem;
		order: 1;
		margin-top: 0;
		margin-bottom: 0;
		height: unset;
	}

	[data-type="hero-img"] div {
		border-radius: 1rem;
	}

	[data-type="hero-img"]
		div:has(img[src="assets/img/icons/development.svg"]) {
		background-color: #7ea16b;
	}

	[data-type="hero-img"] div:has(img[src="assets/img/icons/design.svg"]) {
		background-color: var(--focus-color);
	}

	[data-type="hero-img"]
		div:has(img[src="assets/img/icons/communications.svg"]) {
		background-color: #9395d3;
	}

	[data-type="hero-content"] {
		order: 2;
	}

	[data-type="hero-content"] br {
		display: none;
	}
}

@media (max-width: 48rem) {
	[data-type="hero-img"] {
		gap: unset;
		order: 2;
	}

	[data-type="hero-img"] > div:first-child > img {
		border-top-right-radius: unset;
		border-bottom-right-radius: unset;
	}

	[data-type="hero-img"] > div:nth-child(2) > img {
		border-radius: unset;
	}

	[data-type="hero-img"] > div:last-child > img {
		border-top-left-radius: unset;
		border-bottom-left-radius: unset;
	}

	[data-type="hero"] h1 {
		line-height: var(--title-1-line);
	}

	[data-type="hero-content"] br {
		display: none;
	}
}

@media (max-width: 30rem) {
	[data-type="hero-content"] br {
		display: none;
	}
}

[data-type="hero-img"] div {
	display: flex;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 100%;
}

[data-type="hero-img"] div img {
	width: 100%;
	height: auto;
	max-width: 12rem;
	aspect-ratio: 1 / 1;
}

@media (max-width: 80rem) {
	[data-type="hero-img"] div img {
		max-width: unset;
	}
}

[data-top-small],
[data-top-medium],
[data-top-large],
[data-bottom-small],
[data-bottom-medium],
[data-bottom-large] {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

/* Top variants */
[data-top-small] {
	top: 30%;
	transform: translate(-50%, -50%);
}
[data-top-medium] {
	top: 40%;
	transform: translate(-50%, -50%);
}
[data-top-large] {
	top: 50%;
	transform: translate(-50%, -50%);
}

/* Bottom variants */
[data-bottom-small] {
	bottom: 35%;
	transform: translate(-50%, 50%);
}
[data-bottom-medium] {
	bottom: 45%;
	transform: translate(-50%, 50%);
}
[data-bottom-large] {
	bottom: 55%;
	transform: translate(-50%, 50%);
}

[data-type="hero-content"] > div {
	display: flex;
	flex-direction: row;
	gap: 24px;
	flex-wrap: wrap;
}

@media (max-width: 80rem) {
	[data-top-small],
	[data-top-medium],
	[data-top-large],
	[data-bottom-small],
	[data-bottom-medium],
	[data-bottom-large] {
		position: relative;
		top: unset;
		bottom: unset;
		left: unset;
		transform: unset;
	}
}

[data-type="site-status-group"] {
	display: flex;
	flex-direction: column;
	margin-top: 25px;
}

[data-type="site-statuses"] {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
}

@media only screen and (max-width: 60rem) {
	[data-type="site-statuses"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (max-width: 40rem) {
	[data-type="site-statuses"] {
		grid-template-columns: repeat(1, 1fr);
	}
}

[data-type="site-status"] {
	border: 2px solid #252525;
	border-radius: 5px;
	padding: 0 20px 20px;
	background-color: #ebeae9;
	height: fit-content;
}

[data-type="site-status"] a {
	font-size: 18px;
	word-wrap: break-word;
	word-break: break-all;
	white-space: normal;
	display: block;
}

[data-status="up"] {
	border: 2px solid #7ea16b;
	border-top: 10px solid #7ea16b;
}

[data-status="down"] {
	border: 2px solid #c1292e;
	border-top: 10px solid #c1292e;
}

.up {
	color: #7ea16b;
}

.down {
	color: #c1292e;
}

.login-error {
	padding: 5px 10px;
	margin-top: 10px;
	background-color: var(--focus-color);
	color: #252525;
	letter-spacing: 0.8px;
	border-radius: 10px;
	width: 488px;
	text-align: center;
	font-weight: 700;
}

[data-page="login"] {
	height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

[data-type="login-container"] {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	gap: 20px;
}

[data-type="login-container"] > img {
	height: 100%;
	object-fit: cover;
	grid-column: 1;
}

[data-type="login-container"] > div {
	width: 100%;
	grid-column: span 2;
}

@media only screen and (max-width: 68.3rem) {
	[data-page="login"] {
		height: auto;
		justify-content: flex-start;
	}

	[data-type="login-container"] > img {
		aspect-ratio: 2 / 1;
		object-fit: cover;
	}

	[data-type="login-container"] {
		display: flex;
		flex-direction: column;
	}
}

/*********************************************************/
/*CHAT START**********************************************/
/*********************************************************/

/*CHAT EFFECTS START**************************************/
[data-text-mode="wave"] .char1 {
	display: inline-block;
	animation: wave 0.66s linear infinite -50ms;
}
[data-text-mode="wave"] .char2 {
	display: inline-block;
	animation: wave 0.66s linear infinite -100ms;
}
[data-text-mode="wave"] .char3 {
	display: inline-block;
	animation: wave 0.66s linear infinite -150ms;
}
[data-text-mode="wave"] .char4 {
	display: inline-block;
	animation: wave 0.66s linear infinite -200ms;
}
[data-text-mode="wave"] .char5 {
	display: inline-block;
	animation: wave 0.66s linear infinite -250ms;
}
[data-text-mode="wave"] .char6 {
	display: inline-block;
	animation: wave 0.66s linear infinite -300ms;
}
[data-text-mode="wave"] .char7 {
	display: inline-block;
	animation: wave 0.66s linear infinite -350ms;
}
[data-text-mode="wave"] .char8 {
	display: inline-block;
	animation: wave 0.66s linear infinite -400ms;
}
[data-text-mode="wave"] .char9 {
	display: inline-block;
	animation: wave 0.66s linear infinite -450ms;
}
[data-text-mode="wave"] .char10 {
	display: inline-block;
	animation: wave 0.66s linear infinite -500ms;
}
[data-text-mode="wave"] .char11 {
	display: inline-block;
	animation: wave 0.66s linear infinite -550ms;
}
[data-text-mode="wave"] .char12 {
	display: inline-block;
	animation: wave 0.66s linear infinite -600ms;
}
[data-text-mode="wave"] .char13 {
	display: inline-block;
	animation: wave 0.66s linear infinite -650ms;
}
[data-text-mode="wave"] .char14 {
	display: inline-block;
	animation: wave 0.66s linear infinite -700ms;
}
[data-text-mode="wave"] .char15 {
	display: inline-block;
	animation: wave 0.66s linear infinite -750ms;
}
[data-text-mode="wave"] .char16 {
	display: inline-block;
	animation: wave 0.66s linear infinite -800ms;
}
[data-text-mode="wave"] .char17 {
	display: inline-block;
	animation: wave 0.66s linear infinite -850ms;
}
[data-text-mode="wave"] .char18 {
	display: inline-block;
	animation: wave 0.66s linear infinite -900ms;
}
[data-text-mode="wave"] .char19 {
	display: inline-block;
	animation: wave 0.66s linear infinite -950ms;
}
[data-text-mode="wave"] .char20 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1000ms;
}
[data-text-mode="wave"] .char21 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1050ms;
}
[data-text-mode="wave"] .char22 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1100ms;
}
[data-text-mode="wave"] .char23 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1150ms;
}
[data-text-mode="wave"] .char24 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1200ms;
}
[data-text-mode="wave"] .char25 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1250ms;
}
[data-text-mode="wave"] .char26 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1300ms;
}
[data-text-mode="wave"] .char27 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1350ms;
}
[data-text-mode="wave"] .char28 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1400ms;
}
[data-text-mode="wave"] .char29 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1450ms;
}
[data-text-mode="wave"] .char30 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1500ms;
}
[data-text-mode="wave"] .char31 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1550ms;
}
[data-text-mode="wave"] .char32 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1600ms;
}
[data-text-mode="wave"] .char33 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1650ms;
}
[data-text-mode="wave"] .char34 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1700ms;
}
[data-text-mode="wave"] .char35 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1750ms;
}
[data-text-mode="wave"] .char36 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1800ms;
}
[data-text-mode="wave"] .char37 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1850ms;
}
[data-text-mode="wave"] .char38 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1900ms;
}
[data-text-mode="wave"] .char39 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1950ms;
}
[data-text-mode="wave"] .char40 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2000ms;
}
[data-text-mode="wave"] .char41 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2050ms;
}
[data-text-mode="wave"] .char42 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2100ms;
}
[data-text-mode="wave"] .char43 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2150ms;
}
[data-text-mode="wave"] .char44 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2200ms;
}
[data-text-mode="wave"] .char45 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2250ms;
}
[data-text-mode="wave"] .char46 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2300ms;
}
[data-text-mode="wave"] .char47 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2350ms;
}
[data-text-mode="wave"] .char48 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2400ms;
}
[data-text-mode="wave"] .char49 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2450ms;
}
[data-text-mode="wave"] .char50 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2500ms;
}

@keyframes wave {
	0% {
		transform: translateY(0);
	}
	25% {
		transform: translateY(5px);
	}
	50% {
		transform: translateY(0);
	}
	75% {
		transform: translateY(-5px);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes scroll {
	0% {
		text-indent: 100%;
	}
	100% {
		text-indent: 0;
	}
}

@keyframes slide {
	0% {
		top: -1.5em;
	}
	10%,
	90% {
		top: 0;
	}
	100% {
		top: 1.5em;
	}
}

@keyframes flash1 {
	0% {
		color: #ff0000;
	}
	50% {
		color: #ff0;
	}
}

@keyframes flash2 {
	0% {
		color: #0000ff;
	}
	50% {
		color: #00ffff;
	}
}

@keyframes flash3 {
	0% {
		color: #00b000;
	}
	50% {
		color: #80ff80;
	}
}

@keyframes glow1 {
	0% {
		color: #ff0000;
	}
	33% {
		color: #00b000;
	}
	66% {
		color: #0000ff;
	}
	100% {
		color: #ff0000;
	}
}

@keyframes glow2 {
	0% {
		color: #ff0000;
	}
	33% {
		color: #800080;
	}
	66% {
		color: #0000ff;
	}
	100% {
		color: #ff0000;
	}
}

@keyframes glow3 {
	0% {
		color: #ffffff;
	}
	25% {
		color: #00b000;
	}
	50% {
		color: #ffffff;
	}
	67.5% {
		color: #00ffff;
	}
	75% {
		color: #0000ff;
	}
	100% {
		color: #ffffff;
	}
}

[data-text-mode="wave"],
[data-text-mode="scroll"],
[data-text-mode="slide"] {
	color: var(--focus-color);
}

[data-text-mode="wave"] {
	animation: wave 0.66s linear infinite -50ms;
}

[data-text-mode="wave"] span {
	display: inline-block;
	white-space: pre;
}

[data-text-mode="wave"] span::before {
	content: attr(data-char);
}

[data-text-mode="scroll"] {
	display: inline-block;
	white-space: nowrap;
	animation: scroll 8s infinite linear;
	width: 100%;
	overflow: hidden;
}

[data-text-mode="slide"] {
	animation: slide 3s linear;
	position: relative;
	top: -2em;
}

[data-text-mode="flash1"] {
	animation: flash1 0.45s steps(1, end) infinite;
}

[data-text-mode="flash2"] {
	animation: flash2 0.45s steps(1, end) infinite;
}

[data-text-mode="flash3"] {
	animation: flash3 0.45s steps(1, end) infinite;
}

[data-text-mode="glow1"] {
	animation: glow1 3s linear infinite;
}

[data-text-mode="glow2"] {
	animation: glow2 3s linear infinite;
}

[data-text-mode="glow3"] {
	animation: glow3 3s linear infinite;
}
/*CHAT EFFECTS END****************************************/

#user-count {
	font-size: var(--font-size-medium);
}

[data-type="chat"][data-chat] > li {
	position: relative;
	margin: var(--spacing-x-small) 0;
	padding: var(--spacing-x-small);
	border-radius: var(--spacing-xx-small);
	transition: background-color 0.2s;
	text-indent: unset;
}

[data-type="chat"][data-chat] > li::before {
	content: unset;
}

[data-type="chat"][data-chat] > li:hover {
	background: var(--shade-1);
}

[data-type="chat"][data-chat] > li.pending {
	opacity: 0.7;
}

[data-type="chat"][data-chat] > li small {
	display: block;
	font-size: 0.8rem;
	color: #666;
	margin-bottom: 0.2rem;
}

[data-type="chat"][data-chat] > li span {
	word-break: break-word;
}

[data-type="chat"][data-chat] > li > [data-action="delete"] {
	position: absolute;
	right: 0.5rem;
	top: -0.5rem;
	background: none;
	border: none;
	color: var(--error-color);
	cursor: pointer;
	font-size: 2rem;
	display: none;
}

[data-type="chat"][data-chat] > li:hover [data-action="delete"] {
	display: block;
}

.error-message {
	background: var(--error-color);
	color: white;
	padding: 0.5rem;
	border-radius: 4px;
	margin-bottom: 0.5rem;
	text-align: center;
	animation: fadeOut 3s forwards;
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		display: none;
	}
}

@media (max-width: 40rem) {
	body {
		padding: 1rem;
	}
	form {
		flex-direction: column;
	}
	form textarea,
	form textarea {
		flex: 1;
	}
}

[data-mode="preview"] {
	display: none;
	position: relative;
	margin-top: 1rem;
	padding: 20px 16px 8px 16px;
	border: 2px solid var(--info-color);
	border-radius: 5px;
	width: 100%;
}

[data-mode="preview"]::before {
	content: "PREVIEW";
	position: absolute;
	top: 0;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--info-color);
}

[data-mode="preview"]:has(*) {
	display: block;
}

[data-type="chat-message"] {
	position: relative;
}

[data-type="chat-message"] blockquote,
[data-mode="preview"] blockquote {
	padding-left: 3rem;
}

[data-type="chat-message"] blockquote::before,
[data-mode="preview"] blockquote::before {
	font-size: 45px;
	margin-bottom: unset;
	left: 10px;
}

[data-type="chat-message"] *:not(:last-child),
[data-mode="preview"] *:not(:last-child) {
	margin-bottom: unset;
}

[data-type="chat-settings"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem;
}

[data-type="chat"][data-chat] {
	width: 100%;
	height: calc(100vh - 545px);
	min-height: 400px;
	overflow-y: auto;
	padding: var(--spacing-normal);
	border: 1px solid var(--shade-2);
	border-radius: var(--spacing-x-small);
	background-color: #fbfbfb;
	list-style: none;
}

[data-type="chat"][data-chat="runescape"] {
	font-family: "Runescape Plain 12";
	border-top: 15px solid transparent;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-image: url("../img/chat/rs/rs-border.webp") 15 round;
	background-image: url("../img/chat/rs/rs-fill.webp");
	background-repeat: repeat;
	background-position: center;
	margin-block-end: 0;
	padding: 0 0 0 2px;
}

[data-type="chat"][data-chat="runescape"] > li {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	font-family: "Runescape Plain 12";
	font-size: 1.2rem;
	line-height: 0.8;
	padding: unset;
	margin: unset;
}

[data-type="chat"][data-chat="runescape"] p {
	font-family: "Runescape Plain 12";
	font-size: 1.2rem;
}

[data-type="chat"][data-chat="runescape"] > li > div span {
	word-break: unset;
	white-space: nowrap;
	flex-shrink: 0;
}

[data-type="chat"][data-chat="runescape"] > li:hover {
	background-color: unset;
}

[data-type="chat"][data-chat="runescape"] > li:hover [data-action="delete"],
[data-type="chat"][data-chat="skype"] > li:hover [data-action="delete"],
[data-type="chat"][data-chat="runescape"] > li [data-type="avatar"] {
	display: none;
}

[data-type="chat"][data-chat="runescape"] > li [data-type="username"] {
	width: 100%;
}

[data-type="chat"][data-chat="runescape"] > li [data-type="username"]::after {
	content: ":";
}

[data-type="chat"][data-chat="runescape"] [data-type="timestamp"] {
	display: none;
}

[data-type="chat"][data-chat="runescape"] + form {
	border-bottom: 15px solid transparent;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-image: url("../img/chat/rs/rs-border.webp") 15 round;
	background-image: url("../img/chat/rs/rs-fill.webp");
	background-repeat: repeat;
	background-position: center;
}

[data-type="chat"][data-chat="runescape"] + form textarea {
	background: transparent;
	border: unset;
	border-radius: unset;
	border-top: 2px solid #807660;
	padding: 8px 16px 8px 2px;
}

[data-type="chat"][data-chat="runescape"] + form button {
	display: none;
}

[data-type="chat"][data-chat="runescape"] [data-type="chat-message"] {
	display: inline-block;
	color: #7f0000;
	line-height: 0.8;
	letter-spacing: 0;
	white-space: pre-wrap;
	margin-top: 1px;
}

/* Target only elements with data-chat="runescape" */
[data-chat="runescape"]::-webkit-scrollbar {
	width: 16px;
}

[data-chat="runescape"]::-webkit-scrollbar-track {
	background-color: #252019;
}

[data-chat="runescape"]::-webkit-scrollbar-thumb {
	background-color: #61553e;
	border: 2px solid #000;
}

[data-chat="runescape"]::-webkit-scrollbar-thumb:hover {
	opacity: 0.8;
}

[data-type="chat"][data-chat="skype"] {
	border-radius: unset;
	border-bottom: unset;
	margin-bottom: unset;
}

[data-type="chat"][data-chat="skype"] > li {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	gap: 24px;
}

[data-type="chat"][data-chat="skype"] > li[data-user="self"] {
	justify-content: flex-end;
}

[data-type="chat"][data-chat="skype"] > li [data-type="chat-message"] {
	order: 1;
	width: 100%;
	background-color: #b6eefd;
	border-radius: 5px;
	padding: 10px;
}

[data-type="chat"][data-chat="skype"]
	> li[data-user="self"]
	[data-type="chat-message"] {
	background-color: #def7fc;
}

[data-type="chat"][data-chat="skype"] > li [data-type="chat-message"]::after,
[data-type="chat"][data-chat="skype"]
	> li[data-user="self"]
	[data-type="chat-message"]::after {
	content: "";
	position: absolute;
	top: 10px;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}

[data-type="chat"][data-chat="skype"] > li [data-type="chat-message"]::after {
	left: -10px;
	border-right: 10px solid #b6eefd;
}

[data-type="chat"][data-chat="skype"]
	> li[data-user="self"]
	[data-type="chat-message"]::after {
	left: unset;
	right: -10px;
	border-right: unset;
	border-left: 10px solid #def7fc;
}

[data-type="chat"][data-chat="skype"] > li [data-type="meta-information"] {
	order: 2;
	white-space: nowrap;
	color: #c8e5e9;
}

[data-type="chat"][data-chat="skype"]
	> li
	[data-type="meta-information"]
	[data-type="username"],
[data-type="chat"][data-chat="skype"]
	> li
	[data-type="meta-information"]
	[data-type="date"] {
	display: none;
}

[data-type="chat"][data-chat="skype"] + form {
	background-color: #fbfbfb;
	padding: 32px 64px 32px 118px;
	border-left: 1px solid var(--shade-2);
	border-right: 1px solid var(--shade-2);
	border-bottom: 1px solid var(--shade-2);
}

[data-type="chat"][data-chat="skype"] + form textarea {
	border: 2px solid #19b2ee;
	border-radius: unset;
}

[data-type="chat"][data-chat="skype"] + form [data-button] {
	font-size: 0;
	color: transparent;
	user-select: none;
	transition: none;
	background-color: transparent;
	border: unset;
	padding: unset;
}

[data-type="chat"][data-chat="skype"] + form [data-button]::after {
	content: "";
	display: inline-block;
	width: 32px;
	height: 32px;
	background-image: url("../img/chat/skype/skype-send.svg");
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-top: 8px;
}

[data-search="match"] {
	background-color: var(--shade-1);
	position: relative;
	opacity: 0.75;
}

[data-search="active-match"],
[data-search="active-match"] img {
	outline: 2px solid var(--info-color);
	outline-offset: var(--spacing-xx-small);
	transition-duration: 250ms;
	z-index: 9998;
}

[data-search="active-match"] {
	border-radius: 1px;
	position: relative;
}

/* Scale only the img, never the <a>: a transform on the <a> would make it
   the containing block for the position:fixed status-bar tooltip */
[data-search="active-match"] img {
	border-radius: 17px;
	transform: scale(1.02);
}

#custom-search-bar {
	width: 460px;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background-color: #f4f3f2;
	padding: 20px;
	border: 2px solid #252525;
	border-top: unset;
	z-index: 9999;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	visibility: hidden;
	opacity: 0;
	transition:
		opacity 200ms ease,
		visibility 0s linear 200ms;
}

#custom-search-bar[data-status="open"] {
	visibility: visible;
	opacity: 1;
	transition: opacity 200ms ease;
}

#custom-search {
	padding: 5px 10px;
	font-size: 16px;
	width: 100%;
}

#match-count {
	margin-left: 10px;
	font-size: 14px;
}

/* Search: hide every tooltip while a match is active... */
main:has([data-search="active-match"])
	:is([data-tooltip="status-bar"], [data-type="link-tooltip"]) {
	visibility: hidden !important;
	opacity: 0 !important;
}

/* ...then reveal only the active match's own tooltip, whatever the item/tooltip type */
main:has([data-search="active-match"])
	[data-search="active-match"]
	:is([data-tooltip="status-bar"], [data-type="link-tooltip"]) {
	visibility: visible !important;
	opacity: 1 !important;
	transform: translateY(0);
}

[data-search="active-match"]::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(240, 128, 0, 0.2);
	pointer-events: none;
	transform: scale(1.02);
	border-radius: 15px;
}

[data-type="sitemap"] a {
	text-decoration: none;
	transition-duration: 200ms;
}

[data-type="sitemap"] a:hover {
	text-decoration: underline;
	transition-duration: 200ms;
}

[data-type="sitemap"] [data-type="sitemap-category"] {
	font-weight: 400;
	padding-left: unset;
	text-indent: unset;
}

[data-type="sitemap-category"]:not(:last-child) {
	margin-bottom: 24px;
}

[data-type="sitemap-category"]::before {
	display: none;
}

[data-type="site-status"] [role="tablist"] h3 {
	padding: 5px 5px 5px 0;
}

[data-type="site-status"] .ui-accordion-content {
	padding: 0 0 0 35px;
}

[data-type="site-status"] p {
	margin-bottom: 0 !important;
}

[data-type="site-status"] [role="tablist"] h3 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 5px;
}

[data-type="site-status"] [role="tablist"] h3::before {
	content: "";
	background-image: url("../img/icons/incident.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	padding-right: 24px;
}

[data-type="site-status"] > div {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 1rem;
}

[data-type="site-status"] div.accordion,
[data-type="site-status"] div.accordion * {
	font-size: 18px;
}

[data-type="site-status"] div.accordion {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	margin-top: 10px;
}

[data-type="site-status"] hr {
	margin-top: var(--spacing-large);
	margin-bottom: var(--spacing-large);
}

[data-type="site-status"] > p {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}

[data-size="xs"] {
	/* Extra Small */
}
[data-size="sm"] {
	/* Small */
}
[data-size="md"] {
	/* Medium / default */
}
[data-size="lg"] {
	/* Large */
}
[data-size="xl"] {
	/* Extra Large */
}

/**************************/
/*ACCORDION ELEMENTS START*/
/**************************/
#etl h3 {
	margin-top: 0;
	margin-bottom: 20px;
}

#etl div {
	margin-bottom: 20px;
}

#filter-container h3,
#dates-container h3 {
	padding: unset;
	margin: unset;
}

#dates-container h3,
#filter-container h3 {
	display: flex;
	align-items: center;
}

#filter-container nav,
#dates-container nav {
	padding: unset;
}

#filter-container h3::before,
#dates-container h3::before {
	content: "→ ";
	width: 24px;
}

#filter-container h3[aria-expanded="true"]::before,
#dates-container h3[aria-expanded="true"]::before {
	content: "↓ ";
	width: 24px;
}
/************************/
/*ACCORDION ELEMENTS END*/
/************************/

/**************/
/*BADGES START*/
/**************/
[data-type="badge"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: fit-content;
	padding: 4px 8px;
	border-radius: 4px;
	font-weight: bold;
	color: #f4f3f2;
	line-height: 1;
	text-transform: uppercase;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-type="badge"][data-size="md"] {
	font-size: 16px;
}

[data-type="badge"][data-size="sm"] {
	font-size: 12px;
}

[data-badge="success"],
[data-badge="up"],
[data-badge="high"] {
	background-color: var(--success-color);
}

[data-badge="medium"] {
	background-color: var(--caution-color);
}

[data-badge="warning"],
[data-badge="error"] {
	background-color: var(--focus-color);
}

[data-badge="error"],
[data-badge="down"],
[data-badge="low"] {
	background-color: var(--error-color);
}

[data-badge="info"] {
	background-color: var(--info-color);
}

[data-badge="primary"] {
	background-color: var(--primary-color);
}

[data-badge="secondary"] {
	background-color: var(--shade-3);
}

[data-badge="light"] {
	background-color: var(--shade-1);
	color: var(--primary-text-color);
}

[data-badge="dark"] {
	background-color: var(--shade-4);
}

[data-type="badge"][data-icon="lock"] {
	align-items: center;
	gap: 0.4em;
}

[data-type="badge"][data-icon="lock"]::before {
	content: "";
	width: 1em;
	height: 1em;
	background-image: url("../img/icons/lock.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	flex-shrink: 0;
}
/************/
/*BADGES END*/
/************/

/******************/
/*TEXT ICONS START*/
/******************/
[data-icon="time"] {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

[data-icon="time"]::before {
	content: "";
	width: 1.125rem;
	height: 1.125rem;
	background-image: url("../img/icons/time.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
/****************/
/*TEXT ICONS END*/
/****************/

form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

form textarea {
	height: auto;
	min-height: 0;
	resize: none;
	overflow-y: hidden;
	border: 2px solid var(--shade-2);
	padding: 8px 16px;
	border-radius: 5px;
}

form textarea:focus-visible {
	outline: unset;
	border: 2px solid #252525;
}

form textarea:not(:placeholder-shown) {
	border-width: 2px;
}

form textarea[name="content"] {
	flex: 1;
}

form:has(textarea:placeholder-shown) button {
	opacity: 0.4;
	pointer-events: none;
	transition: 0.2s ease;
}

form:has(textarea:not(:placeholder-shown)) button {
	opacity: 1;
	pointer-events: auto;
}

form button:hover {
	transform: scale(1) !important;
}

form > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-indent: 4px;
}

form > div > label {
	font-size: 18px;
}

input,
form > div > input,
form > div > textarea {
	border-radius: 5px;
	padding: 11px 15px;
	border: 2px solid var(--shade-2);
	background-color: #fdfffc;
}

input:active,
input:focus,
form > div > input:active,
form > div > input:focus {
	border: 2px solid var(--primary-color);
	outline: none;
	box-shadow: unset;
}

form[data-type="watch-picker"] select {
	border-radius: 5px;
	padding: 11px 15px;
	border: 2px solid var(--shade-2);
	background-color: #fdfffc;
	width: 100%;
}

form[data-type="watch-picker"] fieldset {
	border: 2px solid var(--shade-2);
	border-radius: 5px;
	padding: var(--spacing-small);
}

form[data-type="watch-picker"] legend {
	padding-right: var(--spacing-x-small);
	padding-left: var(--spacing-x-small);
	font-size: 18px;
}

[data-type="watch-picker-grid"] {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	text-indent: 0;
}

[data-type="watch-picker-options"] {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	text-indent: 0;
}

[data-type="watch-picker-options"] label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border: 1px solid var(--shade-2);
	border-radius: 5px;
	background-color: #fdfffc;
}

[data-type="watch-picker-results"] {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

[data-type="watch-picker-results"] > li {
	padding-left: 0;
	text-indent: 0;
}

[data-type="watch-picker-results"] > li::before {
	content: none;
}

[data-type="watch-picker-results"] article {
	display: grid;
	grid-template-columns: minmax(90px, 140px) 1fr;
	gap: 20px;
	align-items: start;
}

[data-type="watch-picker-results"] img {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

[data-type="watch-picker-results"] h3 {
	margin-bottom: var(--spacing-xx-small);
}

[data-type="watch-picker-results"] ul {
	margin-top: var(--spacing-x-small);
}

[data-type="watch-picker-warning"] {
	color: #7a1f1f;
	font-weight: 700;
}

@media only screen and (max-width: 48rem) {
	[data-type="watch-picker-grid"],
	[data-type="watch-picker-results"] article {
		grid-template-columns: 1fr;
	}

	[data-type="watch-picker-results"] article {
		gap: 12px;
	}

	[data-type="watch-picker-results"] img {
		max-width: 180px;
	}
}

.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
	margin: unset;
}

.ui-button[aria-expanded="false"] {
	border: 2px solid var(--shade-2);
}

.ui-button[aria-expanded="true"] {
	border: 2px solid var(--primary-color);
}

.ui-selectmenu-menu .ui-menu {
	width: 100% !important;
}

.ui-selectmenu-button.ui-button {
	width: 100%;
	background-color: #fdfffc;
}

.ui-selectmenu-button .ui-icon {
	width: 25px;
	height: 25px;
	background-size: 50%;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.2;
}

.ui-selectmenu-button-open {
	border-bottom: unset !important;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.ui-selectmenu-button-open .ui-icon {
	background-image: url("/assets/img/icons/close.svg");
}

.ui-selectmenu-button-closed .ui-icon {
	background-image: url("/assets/img/icons/chevron.svg");
}

.ui-selectmenu-menu,
.ui-autocomplete {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: var(--shade-1);
}

.ui-selectmenu-menu {
	position: relative;
	width: 100%;
	border: 2px solid var(--primary-color);
}

.ui-menu-item:has(.ui-state-active) {
	color: var(--bg-color);
	background-color: var(--shade-3);
}

.ui-autocomplete {
	border-left: 2px solid var(--primary-color);
	border-right: 2px solid var(--primary-color);
	border-bottom: 2px solid var(--primary-color);
}

.ui-autocomplete.ui-menu .ui-state-active {
	margin: unset;
}

.ui-autocomplete.ui-menu .ui-state-active::before {
	content: "→ ";
}

[data-type~="carousel"] {
	width: 100%;
	padding: 25px 15px 25px 10px;
	border-radius: 15px;
	overflow: hidden;
	border: 2px solid #252525;
}

[data-type~="dark"][data-type~="carousel"] {
	background-color: #252525;
}

[data-type~="light"][data-type~="carousel"] {
	background-color: #f4f3f2;
}

[data-type~="carousel"] .slick-list {
	border-radius: 15px;
}

[data-type~="carousel"] [data-type="portfolio-item"] {
	margin: 0;
	padding: 10px;
	border-radius: 15px;
}

[data-type~="carousel"][data-type~="dark"] [data-type="portfolio-item"] {
	background-color: #252525;
}

[data-type~="carousel"][data-type~="light"] [data-type="portfolio-item"] {
	background-color: #f4f3f2;
}

[data-slick~="arrow"] {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	outline: none;
	box-shadow: none;
	border-radius: 9px;
	border: 2px solid #252525;
	width: 60px;
	height: 20px;
	cursor: pointer;
	color: #252525;
	background-color: #f4f3f2;
}

[data-slick~="arrow"][data-slick~="pre"] {
	top: 7.5px;
	left: 19px;
}

[data-slick~="arrow"][data-slick~="next"] {
	bottom: 7.5px;
	right: 21px;
}

[data-type="color-container"]:first-of-type h3 {
	margin-top: 0;
}

[data-type="color-container"] > div {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	flex-direction: row;
}

[data-type="color-example"] {
	width: 200px;
	height: 200px;
	border: 2px solid var(--primary-color);
	border-radius: 15px;
}

[data-color="main"] {
	background-color: var(--primary-color);
}

[data-color="bg"] {
	background-color: var(--bg-color);
}

[data-color="shade-1"] {
	background-color: var(--shade-1);
}

[data-color="shade-2"] {
	background-color: var(--shade-2);
}

[data-color="shade-3"] {
	background-color: var(--shade-3);
}

[data-color="shade-4"] {
	background-color: var(--shade-4);
}

[data-color="shade-5"] {
	background-color: var(--shade-5);
}

[data-color="caution-color"] {
	background-color: var(--caution-color);
}

[data-color="focus-color"] {
	background-color: var(--focus-color);
}

[data-color="error-color"] {
	background-color: var(--error-color);
}

[data-color="success-color"] {
	background-color: var(--success-color);
}

[data-color="info-color"] {
	background-color: var(--info-color);
}

[data-type="preview"] {
	position: relative;
	margin-top: 15px;
	padding: 20px;
	border-radius: 15px;
	background-color: var(--shade-2);
}

[data-page="preview"] .ui-selectmenu-menu {
	width: calc(100% - 40px) !important;
}

[data-type="preview"] #sa-pref-bar[data-type*="disabled"] {
	position: relative;
	display: block;
	left: unset;
	bottom: unset;
}

[data-type="breadcrumb"] {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

[data-type="breadcrumb"] li {
	padding-left: unset;
	text-indent: unset;
	line-height: 1;
}

[data-type="breadcrumb"] li:before {
	font-family: unset;
	content: unset;
	padding-right: unset;
}

[data-accessibility~="dark"] [data-button~="icon"]#closeAccessibility img {
	filter: invert(1);
}

[data-accessibility~="high-contrast"]
	[data-button~="icon"]#closeAccessibility
	img {
	filter: invert(1) contrast(200%);
}

[data-type="error-message"] {
	text-align: center;
}

[data-component="email-gate-container"] {
	display: flex;
	flex-direction: row;
	gap: 2rem;
	align-items: stretch;
}

@media only screen and (max-width: 60rem) {
	[data-component="email-gate-container"] {
		flex-direction: column;
	}
}

[data-component="email-gate"],
[data-type="email-gate-image"] {
	flex: 1 1 0;
	min-width: 0;
}

[data-component="email-gate"] {
	background-color: var(--shade-2);
	border-radius: 0.5rem;
	border: 1px solid var(--shade-3);
}

[data-component="email-gate"] > form,
[data-component="email-gate"] > p,
[data-component="email-gate"] > h2 {
	padding-inline: 1rem;
}

[data-component="email-gate"] > h2 {
	padding-top: 1rem;
}

[data-component="email-gate"] > form {
	padding-bottom: 1rem;
}

[data-type="email-gate-image"] {
	position: relative;
	overflow: hidden;
}

[data-type="email-gate-image"] img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media only screen and (max-width: 60rem) {
	[data-type="email-gate-image"] {
		flex: 1;
	}

	[data-type="email-gate-image"] img {
		position: static;
		height: auto;
	}
}

altcha-widget {
	width: 100%;
	max-width: fit-content;
}

[data-type="email-gate-consent-group"] {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	text-indent: unset;
}

[data-type="email-gate-consent-group"] .ui-checkboxradio-label {
	text-align: left;
}

/* Listen buttons hidden by main.js on pages without a player: the tab's
   display: inline-flex and the floating column's img rules would otherwise
   override the hidden attribute. */
[data-type="page-tools"] [hidden],
#scrollAccess [hidden] {
	display: none;
}