.tlt-arcade-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.tlt-arcade-hub {
	--tlt-black: #070908;
	--tlt-cream: #f4efe6;
	--tlt-orange: #f26a1b;
	position: relative;
	isolation: isolate;
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
	background: var(--tlt-black);
	color: var(--tlt-cream);
	overflow: hidden;
	box-shadow: 0 22px 70px rgba(0, 0, 0, 0.54);
}

.tlt-arcade-viewport {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	scroll-behavior: smooth;
	scrollbar-color: rgba(242, 106, 27, 0.82) rgba(7, 9, 8, 0.92);
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.tlt-arcade-viewport::-webkit-scrollbar {
	height: 9px;
}

.tlt-arcade-viewport::-webkit-scrollbar-track {
	background: rgba(7, 9, 8, 0.94);
}

.tlt-arcade-viewport::-webkit-scrollbar-thumb {
	background: linear-gradient(90deg, #9b461d, var(--tlt-orange), #9b461d);
	border: 2px solid rgba(7, 9, 8, 0.94);
	border-radius: 999px;
}

.tlt-arcade-viewport:focus-visible {
	outline: 3px solid var(--tlt-cream);
	outline-offset: -5px;
}

.tlt-arcade-stage {
	position: relative;
	width: max(100%, var(--tlt-stage-min-width, 0px));
	aspect-ratio: 12 / 5;
	flex: 0 0 auto;
	overflow: hidden;
	background: #050706;
	contain: layout paint style;
}

.tlt-arcade-stage img,
.tlt-arcade-stage video {
	max-width: none;
}

.tlt-arcade-scene,
.tlt-arcade-flicker {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
	pointer-events: none;
	user-select: none;
}

.tlt-arcade-scene--backplate {
	z-index: 0;
}

.tlt-arcade-scene--reflections {
	z-index: 1;
}

.tlt-arcade-flicker {
	z-index: 30;
	inset: 0 auto auto 0;
	width: 59.375%;
	height: 81.25%;
}

.tlt-arcade-machine {
	position: absolute;
	z-index: 5;
	left: var(--tlt-x);
	top: var(--tlt-y);
	width: var(--tlt-w);
	height: var(--tlt-h);
	display: block;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: inherit;
	text-decoration: none;
	transform: translateZ(0) scale(1);
	transform-origin: var(--tlt-origin-x) var(--tlt-origin-y);
	transition:
		transform 260ms cubic-bezier(0.2, 0.75, 0.2, 1),
		z-index 0ms linear 260ms;
	-webkit-tap-highlight-color: transparent;
}

.tlt-arcade-machine__visual {
	position: absolute;
	inset: 0;
	display: block;
	filter: none;
	transition:
		filter 260ms ease,
		opacity 260ms ease;
}

.tlt-arcade-cabinet-image {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	pointer-events: none;
	user-select: none;
}

.tlt-arcade-cabinet-dead {
	z-index: 3;
}

.tlt-arcade-screen-window {
	position: absolute;
	z-index: 3;
	left: var(--tlt-screen-left);
	top: var(--tlt-screen-top);
	display: block;
	width: var(--tlt-screen-width);
	height: var(--tlt-screen-height);
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--tlt-accent) 18%, transparent), transparent 68%),
		#050908;
	clip-path: var(--tlt-screen-clip);
	isolation: isolate;
}

.tlt-arcade-screen-window::before,
.tlt-arcade-screen-window::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.tlt-arcade-screen-window::before {
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.025) 0,
		rgba(255, 255, 255, 0.025) 1px,
		rgba(0, 0, 0, 0.065) 2px,
		rgba(0, 0, 0, 0.065) 4px
	);
	background-size: 100% 4px;
	mix-blend-mode: overlay;
}

.tlt-arcade-screen-window::after {
	background:
		radial-gradient(ellipse at 50% 42%, transparent 38%, rgba(0, 0, 0, 0.34) 100%),
		linear-gradient(105deg, rgba(255, 255, 255, 0.05), transparent 24% 78%, rgba(255, 255, 255, 0.025));
}

.tlt-arcade-screen-base,
.tlt-arcade-screen-media {
	position: absolute;
	z-index: 1;
	display: block;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: fill;
}

.tlt-arcade-screen-media {
	inset: -2%;
	width: 104%;
	height: 104%;
	object-fit: cover;
	filter: saturate(0.86) contrast(1.06) brightness(0.78);
	transition: filter 240ms ease;
}

.tlt-arcade-screen-media.has-media-error {
	display: none;
}

.tlt-arcade-machine--operational {
	cursor: default;
}

.tlt-arcade-machine--linked {
	cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
	.tlt-arcade-machine--operational:hover,
	.tlt-arcade-machine--operational:focus-visible {
		z-index: 18;
		transform: translateZ(0) scale(1.037);
		transition-delay: 0ms;
	}

	.tlt-arcade-machine--operational:hover .tlt-arcade-machine__visual,
	.tlt-arcade-machine--operational:focus-visible .tlt-arcade-machine__visual {
		filter:
			drop-shadow(0 0 8px color-mix(in srgb, var(--tlt-accent) 72%, transparent))
			drop-shadow(0 0 22px color-mix(in srgb, var(--tlt-accent) 42%, transparent));
	}

	.tlt-arcade-machine--operational:hover .tlt-arcade-screen-media,
	.tlt-arcade-machine--operational:focus-visible .tlt-arcade-screen-media {
		filter: saturate(1.04) contrast(1.08) brightness(0.98);
	}
}

.tlt-arcade-machine--linked:focus-visible {
	outline: 3px solid var(--tlt-cream);
	outline-offset: 7px;
	border-radius: 7px;
}

.tlt-arcade-machine__label {
	position: absolute;
	z-index: 12;
	left: 50%;
	bottom: 2%;
	display: grid;
	min-width: min(170%, 250px);
	max-width: 210%;
	padding: clamp(6px, 0.6vw, 11px) clamp(8px, 0.8vw, 15px);
	border: 1px solid color-mix(in srgb, var(--tlt-accent) 68%, #f4efe6 12%);
	border-radius: 8px;
	background:
		linear-gradient(180deg, rgba(18, 23, 21, 0.91), rgba(6, 9, 8, 0.96)),
		rgba(7, 9, 8, 0.94);
	box-shadow:
		0 10px 28px rgba(0, 0, 0, 0.62),
		inset 0 1px rgba(244, 239, 230, 0.08);
	color: var(--tlt-cream);
	line-height: 1.05;
	text-align: center;
	text-decoration: none;
	opacity: 0;
	transform: translate(-50%, 10px);
	transition:
		opacity 180ms ease,
		transform 220ms ease;
	pointer-events: none;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.tlt-arcade-machine__status {
	display: block;
	margin-bottom: 3px;
	color: var(--tlt-accent);
	font: 700 clamp(8px, 0.58vw, 11px)/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: 0.17em;
}

.tlt-arcade-machine__title {
	display: block;
	overflow: hidden;
	color: var(--tlt-cream);
	font: 800 clamp(10px, 0.76vw, 15px)/1.08 "Arial Narrow", Impact, system-ui, sans-serif;
	letter-spacing: 0.035em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.tlt-arcade-machine--linked:hover .tlt-arcade-machine__label,
.tlt-arcade-machine--linked:focus-visible .tlt-arcade-machine__label {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media (hover: none) {
	.tlt-arcade-machine--linked .tlt-arcade-machine__label {
		opacity: 1;
		transform: translate(-50%, 0);
	}

	.tlt-arcade-machine--linked:active {
		z-index: 18;
		transform: translateZ(0) scale(1.022);
	}

	.tlt-arcade-machine--linked:active .tlt-arcade-machine__visual {
		filter: drop-shadow(0 0 15px color-mix(in srgb, var(--tlt-accent) 48%, transparent));
	}
}

.tlt-arcade-nav {
	position: absolute;
	z-index: 50;
	top: 50%;
	display: none;
	place-items: center;
	width: 44px;
	height: 68px;
	padding: 0;
	border: 1px solid rgba(244, 239, 230, 0.36);
	border-radius: 10px;
	background: rgba(7, 9, 8, 0.78);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
	color: var(--tlt-cream);
	font: 400 42px/1 system-ui, sans-serif;
	cursor: pointer;
	transform: translateY(-50%);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.tlt-arcade-hub.is-scrollable .tlt-arcade-nav {
	display: grid;
}

.tlt-arcade-nav--previous {
	left: 10px;
}

.tlt-arcade-nav--next {
	right: 10px;
}

.tlt-arcade-nav:hover,
.tlt-arcade-nav:focus-visible {
	border-color: var(--tlt-orange);
	color: #ffb17d;
}

.tlt-arcade-nav:focus-visible {
	outline: 3px solid var(--tlt-cream);
	outline-offset: 3px;
}

.tlt-arcade-nav[disabled] {
	opacity: 0.24;
	cursor: default;
}

.tlt-arcade-scroll-cue {
	position: absolute;
	z-index: 45;
	left: 50%;
	bottom: 15px;
	display: none;
	width: min(180px, 36vw);
	height: 3px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(244, 239, 230, 0.14);
	transform: translateX(-50%);
	pointer-events: none;
}

.tlt-arcade-hub.is-scrollable .tlt-arcade-scroll-cue {
	display: block;
}

.tlt-arcade-scroll-cue span {
	position: absolute;
	inset-block: 0;
	left: var(--tlt-scroll-progress, 0%);
	width: 28%;
	border-radius: inherit;
	background: linear-gradient(90deg, #9b461d, var(--tlt-orange), #e1b457);
	transform: translateX(calc(var(--tlt-scroll-progress, 0%) * -0.28));
}

.tlt-arcade-noscript {
	display: block;
	width: 100%;
	height: auto;
}

.tlt-arcade-hub.is-dragging,
.tlt-arcade-hub.is-dragging * {
	cursor: grabbing !important;
	user-select: none !important;
}

@media (max-width: 1199px) {
	.tlt-arcade-stage {
		--tlt-stage-min-width: 1728px;
	}
}

@media (max-width: 767px) {
	.tlt-arcade-nav {
		top: auto;
		bottom: 25px;
		width: 42px;
		height: 48px;
		font-size: 32px;
		transform: none;
	}

	.tlt-arcade-nav--previous {
		left: 12px;
	}

	.tlt-arcade-nav--next {
		right: 12px;
	}

	.tlt-arcade-scroll-cue {
		bottom: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tlt-arcade-viewport {
		scroll-behavior: auto;
	}

	.tlt-arcade-machine,
	.tlt-arcade-machine__visual,
	.tlt-arcade-machine__label,
	.tlt-arcade-screen-media {
		transition: none !important;
	}

	.tlt-arcade-machine--operational:hover,
	.tlt-arcade-machine--operational:focus-visible {
		transform: none;
	}

	.tlt-arcade-flicker {
		display: none;
	}
}
