/* V I E W P O R T <= 1 2 8 0 p x --------------------------------------------------------------- ✓ */

@media only screen and (max-width: 1280px) {

	/* M A I N ---------------------------------------------------------------------------------- ✓ */

	html, body { height: -webkit-fill-available !important; height: 100% !important; }

	html { scroll-padding-top: var(--height header); }

	body { grid-template-rows: 1fr auto; font-size: 90%; }

	header { width: var(--width page); position: fixed; top: 0; }

	main { margin-top: calc(var(--height header) + var(--grid-row-gap body)); }

	main, main > .bar { border-radius: 0 !important; }

	main > .bar span { border-radius: 0 0 0 .75rem !important; }

	/* H E A D E R ------------------------------------------------------------------------------ ✓ */

	header #home { margin-right: 1.25rem; }

	header #home svg { width: 4rem; }

	/* u s e r ---------------------------------------------------------------------------------- ✓ */

	dialog.user {
		width: 50%;
		height: calc(100vh - var(--height header));
		top: var(--height header);
		left: calc(-100% - .5rem);
		transform: none;
		background: transparent;
		z-index: -1;
	}

	dialog.user[aria-hidden="false"], dialog.user[aria-hidden="true"] { will-change: left; }

	dialog.user[aria-hidden="false"] { animation: slideInLeft 500ms ease-in-out forwards; }

	dialog.user[aria-hidden="true"] { animation: slideOutLeft 500ms ease-in-out forwards; }

	dialog.user .container {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		transform: none;
		background: hsl(0 0% 18%);
		border-radius: 0;
		animation: none;
	}

	dialog.user .container::after {
		content: "";
		width: .5rem;
		height: 100%;
		position: absolute;
		top: 0;
		left: 100%;
		background: inherit;
		-webkit-mask: url("/images/border/right.png") top left / contain repeat-y;
		mask: url("/images/border/right.png") top left / contain repeat-y;
	}

	dialog.user form::-webkit-scrollbar { display: none; }

	dialog.user form {
		overflow: auto;
		scrollbar-width: none;
		width: 100%;
		height: 100%;
		padding-top: 1.25rem;
	}

	dialog.user .tooltip .hint span { display: inline; }

	dialog.user .remember-me { flex-shrink: 0; }

	dialog.user .interface { width: 100%; }

	/* n a v ------------------------------------------------------------------------------------ ✓ */

	header #nav { display: flex; margin-right: 1rem; }

	header nav::-webkit-scrollbar { display: none; }

	header nav {
		width: 50%;
		height: calc(100vh - var(--height header));
		position: fixed;
		top: var(--height header);
		background: var(--bg 08);
	}

	header nav::after {
		content: "";
		width: .5rem;
		height: 100%;
		position: absolute;
		right: 100%;
		background: inherit;
		-webkit-mask: url("/images/border/left.png") top right / contain repeat-y;
		mask: url("/images/border/left.png") top right / contain repeat-y;
	}

	header nav[aria-expanded="true"] {
		transition: right 500ms ease-in-out;
		visibility: visible;
		right: 0;
	}

	header nav[aria-expanded="false"] {
		transition:
			visibility 0ms 500ms ease-in-out,
			right 500ms ease-in-out;
		visibility: hidden;
		right: -100%;
	}

	header nav ul { overflow: auto; scrollbar-width: none; flex-direction: column; width: 100%; }

	header nav li { margin-left: auto; list-style-type: none; }

	header nav li:first-of-type { padding-top: 1rem; }

	header nav li:last-of-type { padding-bottom: 1rem; }

	header nav a {
		margin-top: 0;
		padding: 1rem;
		border: none;
		text-transform: uppercase;
		font-size: 1.25rem;
	}

	header nav a::after {
		transition: background-color 300ms;
		content: "";
		visibility: visible;
		width: var(--height header button);
		height: var(--height header button);
		margin-left: 1rem;
		position: static;
		transform: none;
		background: 
			center center
			no-repeat
			var(--bg 11);
		border-radius: .625rem; 
		opacity: 1;
	}

	header nav a:focus::after, header nav a:hover::after { background-color: transparent; }

	header nav a.games::after { background-image: url("/images/header/nav/games.svg"); background-size: 1.5rem 1.5rem; }

	header nav a.franchises::after { background-image: url("/images/header/nav/franchises.svg"); background-size: 1.6rem 1.6rem; }

	header nav a.platforms::after { background-image: url("/images/header/nav/platforms.svg"); background-size: 1.6rem 1.6rem; }

	header nav a.genres::after { background-image: url("/images/header/nav/genres.svg"); background-size: 1.6rem 1.6rem; }

}

/* V I E W P O R T <= 1 0 2 4 p x --------------------------------------------------------------- ✓ */

@media only screen and (max-width: 1024px) {

	body:has(main.user) { background: hsl(0 0% 18%) !important; }

	/* H E A D E R ------------------------------------------------------------------------------ ✓ */

	header nav { width: 90%; }

	/* U S E R ---------------------------------------------------------------------------------- ✓ */

	.user .menu > * { font-size: .95rem !important; }

	dialog.user { width: 90%; }

	main.user .bar { display: none; }

	main.user #view { flex-wrap: wrap; padding: 0 !important; background: transparent; }

	main.user form { width: 100%; padding: 0 .75rem; background: transparent; }

	main.user form:target { display: flex; }

	main.user form:target ~ form { display: none; }

	main.user form.off { display: none; }

	main.user h1, main.user .body { background: var(--bg 04); }

	main.user h1 {
		align-self: flex-start;
		height: auto;
		margin-bottom: -.645rem;
		padding: .5125rem .525rem 0 .75rem;
		border-radius: .25rem .25rem 0 0;
		font-size: 1.125rem;
		z-index: 1;
	}

	main.user .body { padding: 1.5rem .75rem .75rem .75rem; border-radius: .25rem; }

	main.user .group label { font-size: .95rem; }

	main.user .group input { font-size: 1rem; }

	main.user .forgot-password { font-size: .9375rem; }

	main.user .remember-me { margin: .75rem 0 0 0; background: var(--bg 04); }

	main.user .remember-me:hover, main.user .remember-me:focus { background: var(--bg 02); }

	main.user .menu > * {
		height: 2.5rem;
		margin-top: .75rem;
		background: var(--bg 04);
		border-radius: .25rem;
		font-feature-settings: normal;
		font-variant-ligatures: discretionary-ligatures;
		letter-spacing: .105em;
	}

	/* main.user .menu > *:not(:first-of-type) { display: flex; } */

	main.user .menu > :nth-child(2) { display: flex; }

}

/* V I E W P O R T <= 7 2 0 p x ----------------------------------------------------------------- ✓ */

@media only screen and (max-width: 720px) {

	body { font-size: 80%; }

	/* H E A D E R ------------------------------------------------------------------------------ ✓ */

	header .search { position: static; }

	header .search label { width: 100%; position: absolute; top: 100%; left: 0; }

	header .search label::after {
		transition: background 300ms;
		content: "";
		width: 100%;
		height: .5em;
		position: absolute;
		top: 100%;
		background: var(--bg 11);
		-webkit-mask: url("/images/border/bottom.png") top left / contain repeat-x;
		mask: url("/images/border/bottom.png") top left / contain repeat-x;
	}

	header .search label:focus-within::after, header .search label:hover::after { background: var(--bg 13); }

	header .search input {
		width: 100% !important;
		padding: .5em .875rem 0 !important;
		right: auto;
		border-radius: 0;
		text-align: left;
		font-size: 1.05rem;
	}

	header .search label[aria-hidden="false"],

	header .search label[aria-hidden="false"] input { height: calc(var(--height header) * .9 ); }

	header .search label[aria-hidden="false"] { transition: height 300ms ease; }

	header .search label[aria-hidden="false"] input {
		transition:
			height 300ms ease,
			padding 300ms ease,
			background 300ms,
			color 300ms 300ms ease;
	}

	header .search label[aria-hidden="true"], header .search label[aria-hidden="true"] input { height: 0; }

	header .search label[aria-hidden="true"] { transition: height 300ms 300ms ease; }

	header .search label[aria-hidden="true"] input {
		transition:
			visibility 0ms 600ms,
			height 300ms 300ms ease,
			padding 300ms 300ms ease,
			background 300ms,
			color 300ms ease;
		padding-top: 0 !important;
	}

	header nav { width: 100%; }

	/* U S E R ---------------------------------------------------------------------------------- ✓ */

	.user .tooltip { padding: 0.65rem 0.825rem; }

	.user .tooltip .hint { font-size: .9rem; hyphens: auto; }

	.user .tooltip .hint span { display: none !important; }

	.user .tooltip .hint { font-size: 1em; }

	.user .check-mark { height: 1.075rem; }

	.user .error { font-size: .9rem; hyphens: auto; }

	.user .privacy-policy svg { width: 2.875rem; }

	.user .privacy-policy p, .user .privacy-policy p a { font-size: .925rem; line-height: 1.25rem; }

	dialog.user { width: 100%; }

	/* M A I N ---------------------------------------------------------------------------------- ✓ */

	main > .bar .entries { font-size: 1em; }

	main > .bar:first-child h1 { margin: 0 1rem; }

	main > .bar:first-child:focus .change, main > .bar:first-child:hover .change,

	main > .bar:first-child .change { height: 1.2rem; margin-right: 1rem; opacity: .8; }

	main > .bar:first-child .change:focus, main > .bar:first-child .change:hover { opacity: 1; }

	main > .bar:last-child { padding: 0 .75rem; }

	#view { padding: 1.25rem 0 !important; }

	nav.subpage a { padding: 0 .9625rem 0 1rem; }

}