/* S C R O L L B A R ---------------------------------------------------------------------------- */

html { scrollbar-width: thin; scrollbar-color: var(--bg 02) var(--bg 08); }

::-webkit-scrollbar { width: .25rem; }

::-webkit-scrollbar-thumb { background: var(--bg 02); }

::-webkit-scrollbar-track { background: var(--bg 08); }

/* S E L E C T I O N ---------------------------------------------------------------------------- */

::selection { background: var(--bg 15); color: var(--col 1); }

/* F O U N D A T I O N -------------------------------------------------------------------------- */

*, ::before, ::after { margin: 0; padding: 0; outline: none; box-sizing: border-box; }

html, body { height: 100vh; }

html { -webkit-tap-highlight-color: transparent; overflow-y: scroll; }

body {
	display: grid;
	grid-template-columns: 1fr var(--width page) 1fr;
	grid-template-rows: auto 1fr auto;
	grid-row-gap: var(--grid-row-gap body);
	background:
		url("/images/bg.webp")
		repeat
		hsl(0 0% 80%);
	shape-rendering: "geometricPrecision";
	text-rendering: geometricPrecision;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-display: optional;
	font-family: var(--font 1);
	font-size: 100%;
	letter-spacing: .085em;
	color: var(--col 2);
}

header, footer { grid-column: 1 / 4; display: flex; }

header, footer, main > .bar { background: var(--bg 02); }

header { height: var(--height header); padding-top: .25rem; position: relative; z-index: 9; }

footer { height: var(--height footer); position: relative; }

header::after, footer::after { content: ""; width: 100%; height: .5em; position: absolute; }

header::after { top: 100%; background: url("/images/border/bottom.png") top left / contain repeat-x; }

footer::after { bottom: 100%; background: url("/images/border/top.png") bottom left / contain repeat-x; }

main { grid-column: 2 / 3; display: flex; flex-direction: column; border-radius: .125rem; }

header > .wrapper, footer > .wrapper { display: flex; align-items: center; width: var(--width page); margin: 0 auto; }

header > .wrapper { justify-content: flex-end; }

footer > .wrapper { justify-content: center; }

/* B A R ---------------------------------------------------------------------------------------- ✓ */

main > .bar { display: flex; align-items: center; height: var(--height bar); }

main > .bar:first-child { border-radius: .125rem .125rem 0 0; }

main > .bar:first-child h1 {
	overflow-x: hidden;
	margin: -.05rem 1.25rem 0 1.25rem;
	text-overflow: ellipsis;
	text-overflow: " …";
	text-transform: uppercase;
	font-family: "Gotham Bold";
	font-size: 1.95em;
	/* letter-spacing: .2625em; */
	letter-spacing: .35em;
	white-space: nowrap;
}

main > .bar:last-child { padding: 0 1.25rem; border-radius: 0 0 .125rem .125rem; }

main > .bar:first-child > a { transition: opacity 300ms; aspect-ratio: 1/1; height: 1.35rem; margin: 0 1.25rem 0 auto; opacity: 0; }

main > .bar:first-child > a:is(:focus, :hover) { opacity: .9; }

main > .bar:first-child:is(:focus, :hover) > a { opacity: .5; }

main > .bar:first-child .change { height: 1.4rem; }

main > .bar:first-child .cancel { height: 1.75rem; transform: rotate(45deg); }

main > .bar:first-child .cancel svg * { stroke-width: 70; }

main > .bar:last-child .count { font-family: var(--font 5); font-size: .925rem; letter-spacing: .15em; color: var(--col 3); }

main > .bar:last-child .count span { font-family: var(--font 6); color: var(--col 1); }

main > .bar:last-child .menu { display: flex; column-gap: .75rem; margin-left: auto; }

main > .bar:last-child .menu * {
	transition: opacity 300ms;
	padding: .45rem .5rem .45rem .65rem;
	background: var(--bg 08);
	font-family: var(--font 5);
	font-size: 1em;
	letter-spacing: .15em;
	opacity: .8;
}

main > .bar:last-child .menu *:is(:focus, :hover) { opacity: 1; }

/* V I E W -------------------------------------------------------------------------------------- ✓ */

#view { padding: 1.25rem; background: var(--bg 13); }

main.games #view, #view.releases, #view.merchandise { padding: 1.25rem 0; }

/* H E A D I N G S ------------------------------------------------------------------------------ ✓ */

h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; }

h2 { background: var(--bg 05); font-size: 1.5em; }

h2 button {
	transition: background 300ms;
	width: 100%;
	padding: .5rem .825rem;
	position: relative;
	text-transform: uppercase;
	font-family: var(--font 8);
	letter-spacing: .15em;
}

h2 button:focus, h2 button:hover { background: var(--bg 03); }

h2 button::after {
	content: "";
	transition:
		transform 300ms,
		opacity 300ms;
	display: inline-block;
	height: .75rem;
	aspect-ratio: 1/1;
	position: absolute;
	top: 50%;
	left: calc(100% - 1.755rem);
	background:
		url("/images/table/order.svg")
		center center / contain;
	transform:
		translateY(-50%)
		rotate(180deg);
	opacity: .8;
}

h2 button.on::after { transform: translateY(-50%); }

h2 button:focus::after, h2 button:hover::after { opacity: 1; }

/* I N T E R A C T I V E - E L E M E N T S ------------------------------------------------------ ✓ */

[disabled] { cursor: default !important; }

a, a:link, a:visited { transition: color 300ms; outline: none; text-decoration: none; color: inherit; }

button, input[type="checkbox"] { cursor: pointer; }

button {
	background: transparent;
	outline: none;
	border: none;
	text-align: inherit;
	font-feature-settings: inherit;
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	color: inherit;
	-webkit-user-select: none;
	user-select: none;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: inherit;
	border: 0;
	color: inherit;
	cursor: pointer;
}

textarea { scrollbar-width: thin; background: transparent; border: 0; caret-color: var(--col 3); resize: none; }

/* I N P U T ------------------------------------------------------------------------------------ ✓ */

label { font-family: var(--font 5); letter-spacing: .1em; }

input { background: transparent; outline: none; border: none; border-radius: 0; }

input:is([type="text"], [type="email"], [type="password"], [type="search"]) { caret-color: var(--col 3); }

input[type="number"] { appearance: textfield; color: inherit; }

input::file-selector-button { margin-inline-end: initial; background: initial; border: initial; }

input[type="checkbox"] { appearance: initial; width: inherit; height: inherit; position: absolute; }

/* input[type="text"], */

input[type="search"], input[type="email"], input[type="password"] {
	transition:
		background 300ms,
		color 300ms;
	background: var(--bg 11);
	font-family: var(--font 4);
	letter-spacing: .15em;
	caret-color: hsl(0 0% 93%);
	color: hsl(0 0% 93% /.9);
}

/* input[type="text"]:focus, input[type="text"]:hover, */

input[type="search"]:focus, input[type="search"]:hover,

input[type="email"]:focus, input[type="email"]:hover,

input[type="password"]:focus, input[type="password"]:hover,

input[type="text"].on, input[type="search"].on, input[type="password"].on

{ background: var(--bg 13); color: var(--col 4); }

/* I N P U T - P L A C E H O L D E R ------------------------------------------------------------ */

::-webkit-input-placeholder { color: var(--col 4); }

::placeholder { opacity: .5; }

/* S E A R C H : C A N C E L - B U T T O N ------------------------------------------------------ */

input[type="search"]::-webkit-search-decoration,

input[type="search"]::-webkit-search-cancel-button,

input[type="search"]::-webkit-search-results-button,

input[type="search"]::-webkit-search-results-decoration { display: none; }

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* D I A L O G ---------------------------------------------------------------------------------- ✓ */

dialog {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	background: hsl(0 0% 0% /.5);
	border: none;
	color: inherit;
	z-index: 2;
}

dialog::backdrop { background: hsl(0 0% 0% /.5); }

dialog[aria-hidden="true"] { animation: fadeOut 300ms ease 300ms forwards; }

dialog[aria-hidden="false"] { animation: fadeIn 600ms ease; }

dialog > * { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

dialog[aria-hidden="false"] > * { animation: fadeIn 300ms ease 300ms backwards; }

dialog[aria-hidden="true"] > * { animation: fadeOut 300ms ease forwards; }

dialog > *, fieldset, legend { border-radius: .25rem; }

/* G R A P H I C - E L E M E N T S -------------------------------------------------------------- ✓ */

img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	text-align: center;
	font-family: var(--font 4);
	letter-spacing: .15em;
}

svg { width: 100%; height: 100%; }

/* F O N T - S T Y L I N G ---------------------------------------------------------------------- ✓ */

sup {
	display: inline-block;
	margin-bottom: .625em;
	margin-left: .45em;
	vertical-align: middle;
	font-family: var(--font 5);
	font-size: .75em;
	line-height: 0;
	letter-spacing: .125em;
	user-select: none;
	opacity: .5;
}

b, strong, th { font-weight: normal; }

em { font-style: normal; }

/* N A V . S U B P A G E ------------------------------------------------------------------------ */

nav.subpage { overflow-x: auto; display: flex; background: var(--bg 06); }

nav.subpage a {
	display: flex;
	align-items: center;
	height: var(--height nav page a);
	padding: 0 1.2rem 0 1.25rem;
	background: var(--bg 08);
	font-family: var(--font 2);
	letter-spacing: .09em;
	color: var(--col 2);
}

nav.subpage a:focus, nav.subpage a:hover, nav.subpage a[aria-current="page"] { background: var(--bg 02); }

/* V E R B O S E - E R R O R -------------------------------------------------------------------- ✓ */

#verbose-error { background: var(--bg 11); }

#verbose-error > * { overflow-wrap: break-word; }

#verbose-error :is(h1, h2) { text-transform: uppercase; letter-spacing: .15em; }

#verbose-error h1 { padding: .385rem .9125rem .3625rem .9125rem; background: var(--bg 06); font-family: var(--font 6); font-size: 2.75em; }

#verbose-error h2 { padding: .5rem .9625rem .5rem .9625rem; background: var(--bg 09); font-family: var(--font 5); font-size: 2em; }

#verbose-error p { background: var(--bg 11); font-family: var(--font 4); font-size: 1.25em; line-height: 1.5em; letter-spacing: .1em; }

#verbose-error p:first-of-type { padding: .75rem 1rem .25rem 1rem; }

#verbose-error p:last-of-type { padding: .25rem 1rem .75rem 1.05rem; }

#verbose-error p b { font-family: var(--font 6); }

#verbose-error p:first-of-type b { text-transform: uppercase; font-size: 1.125em; letter-spacing: .15em; }

#verbose-error pre {
	padding: .75rem 1rem;
	background: var(--bg 08);
	font-family: var(--font 7);
	line-height: 2em;
	letter-spacing: .1em;
	white-space: pre-wrap;
}

/* C O N C I S E - E R R O R -------------------------------------------------------------------- ✓ */

#concise-error { display: flex; flex-direction: column; align-items: center; }

#concise-error > :not(svg) { text-transform: uppercase; font-family: var(--font 6); }

#concise-error h1 { margin: .75rem 0; font-size: 2.75em; letter-spacing: .15em; }

#concise-error p { margin: .75rem 0; font-size: 1.75em; letter-spacing: .1em; }

#concise-error svg { width: 12.5rem; margin: 1.5rem 0; fill: var(--col 2); }

#concise-error svg g:first-of-type { animation: blink 1s infinite; }

#concise-error svg g:last-of-type { animation: blink 1s infinite reverse; }

/* S Q U A R E ---------------------------------------------------------------------------------- ✓ */

.square { flex-shrink: 0; aspect-ratio: 1/1; padding: 0; text-align: center; line-height: 0; }

/* S C R E E N - R E A D E R -------------------------------------------------------------------- ✓ */

.sr:not(:focus):not(:active) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	margin: -1px;
	padding: 0;
	border: 0;
	word-wrap: normal !important;
}

/* D I S A B L E D - S C R O L L B A R ---------------------------------------------------------- ✓ */

.dsb { -ms-overflow-style: none; scrollbar-width: none; }

.dsb::-webkit-scrollbar { display: none; }

/* G O T H A M ---------------------------------------------------------------------------------- ✓ */

@font-face { font-family: "Gotham Bold"; src: url("/fonts/gotham/gotham-bold.otf"); }

/* J E T B R A I N S - M O N O ------------------------------------------------------------------ ✓ */

@font-face { font-family: "JetBrains Mono NL Regular"; src: url("/fonts/jetbrains-mono/jetbrains-mono-nl-regular.otf"); }

@font-face { font-family: "JetBrains Mono NL Medium"; src: url("/fonts/jetbrains-mono/jetbrains-mono-nl-medium.otf"); }

@font-face { font-family: "JetBrains Mono NL Semibold"; src: url("/fonts/jetbrains-mono/jetbrains-mono-nl-semibold.otf"); }

@font-face { font-family: "JetBrains Mono NL Bold"; src: url("/fonts/jetbrains-mono/jetbrains-mono-nl-bold.otf"); }

@font-face { font-family: "JetBrains Mono Regular"; src: url("/fonts/jetbrains-mono/jetbrains-mono-regular.ttf"); }

/* R O B O T O ---------------------------------------------------------------------------------- ✓ */

@font-face { font-family: "Roboto Regular"; src: url("/fonts/roboto/roboto-regular.otf"); }

@font-face { font-family: "Roboto Medium"; src: url("/fonts/roboto/roboto-medium.otf"); }

@font-face { font-family: "Roboto Bold"; src: url("/fonts/roboto/roboto-bold.otf"); }

@font-face { font-family: "Roboto Italic"; src: url("/fonts/roboto/roboto-italic.otf"); }

/* S F - C O M P A C T - T E X T ---------------------------------------------------------------- ✓ */

@font-face { font-family: "SF Compact Text Semibold"; src: url("/fonts/sf-compact-text/sf-compact-text-semibold.otf"); }

@font-face { font-family: "SF Compact Text Bold"; src: url("/fonts/sf-compact-text/sf-compact-text-bold.ttf"); }