/* GENERATED by sanki.app.sveltekit/scripts/page-style-sync.mjs (ADR-0037).
   The app's page, byte for byte: do not edit here — change the app's sheets
   and run `npm run page:style`. */
:where(html) {
	--safe-top: env(safe-area-inset-top, 0px);
	--safe-right: env(safe-area-inset-right, 0px);
	--safe-bottom: env(safe-area-inset-bottom, 0px);
	--safe-left: env(safe-area-inset-left, 0px);
	--viewport-w: calc(100dvw - var(--safe-left) - var(--safe-right));
	--viewport-h: calc(100dvh - var(--safe-top) - var(--safe-bottom));
}

@media (orientation: landscape) {
	:where(html) {
		--content-size: var(--viewport-h);
	}
}

@media (orientation: portrait) {
	:where(html) {
		--content-size: var(--viewport-w);
	}
}

:where(html) {

	--game-squares-count: 8;
	--game-square-size: calc(var(--content-size) / (var(--game-squares-count) + 2));
	--game-board-size: calc(var(--game-square-size) * var(--game-squares-count));
	--game-piece-size: calc(var(--game-square-size) * 0.85);
	--game-piece-margin: calc((var(--game-square-size) - var(--game-piece-size)) / 2);

	--font-size-3: calc(var(--game-square-size) / 1.6);
	--font-size-2: calc(var(--font-size-3) / 1.5);
	--font-size-1: calc(var(--font-size-2) / 1.5);
	--font-size-0: calc(var(--font-size-1) / 1.5);

	--font-sans: 'Source Sans 3', system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, sans-serif;
	--font-display: var(--font-sans);
	--font-mono: 'Source Code Pro', ui-monospace, SF Mono, Menlo, Consolas, monospace;

	--space-1: calc(var(--game-square-size) / 16);
	--space-2: calc(var(--game-square-size) / 8);
	--space-3: calc(var(--game-square-size) / 4);

	--radius-1: var(--space-1);
	--radius-2: var(--space-2);

	--radius-3: calc(var(--game-square-size) / 4);

	--radius-round: calc(var(--game-square-size) * 100);

	--measure-1: calc(var(--game-square-size) * 2);
	--measure-2: calc(var(--game-square-size) * 2.75);
	--measure-3: calc(var(--game-square-size) * 3.25);
	--measure-4: calc(var(--game-square-size) * 4.5);
	--measure-5: calc(var(--game-square-size) * 5.75);
	--measure-6: calc(var(--game-square-size) * 8.5);

	--avatar-1: calc(var(--game-square-size) * 0.35);
	--avatar-2: calc(var(--game-square-size) * 0.45);
	--avatar-3: calc(var(--game-square-size) * 0.55);

	--hairline: calc(var(--game-square-size) / 80);
	--ring: calc(var(--hairline) * 2);
	--shadow-disc: 0 var(--ring) calc(var(--ring) * 3) rgba(0, 0, 0, 0.2);

	--shadow-overlay: 0 var(--ring) calc(var(--ring) * 4) rgb(0 0 0 / 0.25);

	--badge-height: calc(var(--font-size-2) + 2 * var(--space-1));

	--control-height: calc(var(--font-size-1) + 2 * var(--space-2));

	--transition-fast: 0.15s;
	--transition-medium: 0.2s;
}

:where(html):lang(ja) {
	--font-sans: 'Source Sans 3', 'Noto Sans JP', system-ui, sans-serif;
	--font-mono: 'Source Code Pro', 'Noto Sans JP', ui-monospace, monospace;
}

:where(html):lang(zh) {
	--font-sans: 'Source Sans 3', 'Noto Sans SC', system-ui, sans-serif;
	--font-mono: 'Source Code Pro', 'Noto Sans SC', ui-monospace, monospace;
}

:where(html):lang(th) {
	--font-sans: 'Source Sans 3', 'Noto Sans Thai Looped', system-ui, sans-serif;
	--font-mono: 'Source Code Pro', 'Noto Sans Thai Looped', ui-monospace, monospace;
}

:where(html) {
	--blue-0: #f5fafe;
	--blue-1: #cae5f8;
	--blue-2: #9ed0f7;
	--blue-3: #71bcf8;
	--blue-4: #4aa9f4;
	--blue-5: #2d95eb;
	--blue-6: #1383dd;
	--blue-7: #0272c9;
	--blue-8: #0062b1;
	--blue-9: #035497;
	--blue-10: #02467e;
	--blue-11: #003767;
	--blue-12: #00284b;
}

:where(html) {
	--green-0: #eefef1;
	--green-1: #c5eaca;
	--green-2: #9ad9a3;
	--green-3: #6dc97c;
	--green-4: #43b85b;
	--green-5: #19a73e;
	--green-6: #069432;
	--green-7: #03822a;
	--green-8: #007123;
	--green-9: #02611f;
	--green-10: #025119;
	--green-11: #014013;
	--green-12: #022e0d;
}

:where(html) {
	--orange-0: #fff9f1;
	--orange-1: #f4ddc2;
	--orange-2: #eac495;
	--orange-3: #e7a962;
	--orange-4: #e38f2e;
	--orange-5: #da7705;
	--orange-6: #cb6205;
	--orange-7: #be4d01;
	--orange-8: #aa3e02;
	--orange-9: #992d00;
	--orange-10: #802500;
	--orange-11: #671d00;
	--orange-12: #4c1300;
}

:where(html) {
	--pink-0: #fef8fa;
	--pink-1: #f9d8e5;
	--pink-2: #f4bbd0;
	--pink-3: #f39cbb;
	--pink-4: #f17da6;
	--pink-5: #eb6090;
	--pink-6: #e1447b;
	--pink-7: #d02c67;
	--pink-8: #bb1b56;
	--pink-9: #a11749;
	--pink-10: #87123d;
	--pink-11: #6d0d31;
	--pink-12: #510623;
}

:where(html) {
	--red-0: #fef8f8;
	--red-1: #f6dada;
	--red-2: #f3bdbd;
	--red-3: #f59e9f;
	--red-4: #f67f7f;
	--red-5: #f25f60;
	--red-6: #e94144;
	--red-7: #da232b;
	--red-8: #c50117;
	--red-9: #aa0012;
	--red-10: #8f020f;
	--red-11: #74010b;
	--red-12: #560006;
}

[data-color] {

	--body-bg-color: var(--pc-surface);
	--body-main-bg-color: var(--pc-surface-raised);
	--body-main-article-bg-color: var(--pc-surface-overlay);
}

[data-color='pink'] {

	--pc-0: var(--pink-0);
	--pc-1: var(--pink-1);
	--pc-2: var(--pink-2);
	--pc-3: var(--pink-3);
	--pc-4: var(--pink-4);
	--pc-5: var(--pink-5);
	--pc-6: var(--pink-6);
	--pc-7: var(--pink-7);
	--pc-8: var(--pink-8);
	--pc-9: var(--pink-9);
	--pc-10: var(--pink-10);
	--pc-11: var(--pink-11);
	--pc-12: var(--pink-12);

	--pc-surface: var(--pink-0);
	--pc-surface-raised: var(--pink-1);
	--pc-surface-overlay: var(--pink-2);
	--pc-text-muted: var(--pink-8);
	--pc-text: var(--pink-10);
	--pc-text-emphasis: var(--pink-12);
	--pc-accent: var(--pink-9);
	--pc-accent-hover: var(--pink-11);
	--pc-on-accent: var(--pink-0);
	--pc-border: var(--pink-3);
	--pc-border-emphasis: var(--pink-5);
}

[data-theme='dark'] [data-color='pink'] {

	--pc-0: var(--pink-12);
	--pc-1: var(--pink-11);
	--pc-2: var(--pink-10);
	--pc-3: var(--pink-9);
	--pc-4: var(--pink-8);
	--pc-5: var(--pink-7);
	--pc-6: var(--pink-6);
	--pc-7: var(--pink-5);
	--pc-8: var(--pink-4);
	--pc-9: var(--pink-3);
	--pc-10: var(--pink-2);
	--pc-11: var(--pink-1);
	--pc-12: var(--pink-0);

	--pc-surface: var(--pink-12);
	--pc-surface-raised: var(--pink-11);
	--pc-surface-overlay: var(--pink-10);
	--pc-text-muted: var(--pink-4);
	--pc-text: var(--pink-2);
	--pc-text-emphasis: var(--pink-0);
	--pc-accent: var(--pink-3);
	--pc-accent-hover: var(--pink-1);
	--pc-on-accent: var(--pink-12);
	--pc-border: var(--pink-9);
	--pc-border-emphasis: var(--pink-7);
}

@media (prefers-color-scheme: dark) {

	html:not([data-theme]) [data-color='pink'] {

		--pc-0: var(--pink-12);
		--pc-1: var(--pink-11);
		--pc-2: var(--pink-10);
		--pc-3: var(--pink-9);
		--pc-4: var(--pink-8);
		--pc-5: var(--pink-7);
		--pc-6: var(--pink-6);
		--pc-7: var(--pink-5);
		--pc-8: var(--pink-4);
		--pc-9: var(--pink-3);
		--pc-10: var(--pink-2);
		--pc-11: var(--pink-1);
		--pc-12: var(--pink-0);

		--pc-surface: var(--pink-12);
		--pc-surface-raised: var(--pink-11);
		--pc-surface-overlay: var(--pink-10);
		--pc-text-muted: var(--pink-4);
		--pc-text: var(--pink-2);
		--pc-text-emphasis: var(--pink-0);
		--pc-accent: var(--pink-3);
		--pc-accent-hover: var(--pink-1);
		--pc-on-accent: var(--pink-12);
		--pc-border: var(--pink-9);
		--pc-border-emphasis: var(--pink-7);
	}

}

:root {
	--danger: var(--red-7);
	--danger-hover: var(--red-8);

	--danger-text: var(--red-9);
	--on-danger: var(--red-0);
	--warning: var(--orange-6);
	--warning-hover: var(--orange-7);
	--warning-text: var(--orange-9);
	--on-warning: var(--orange-0);
	--success: var(--green-7);
	--success-hover: var(--green-8);
	--success-text: var(--green-9);
	--on-success: var(--green-0);
	--info: var(--blue-7);
	--info-hover: var(--blue-8);
	--on-info: var(--blue-0);
}

[data-theme='dark'] {
	--danger: var(--red-5);
	--danger-hover: var(--red-4);
	--danger-text: var(--red-2);
	--warning: var(--orange-4);
	--warning-hover: var(--orange-3);
	--warning-text: var(--orange-2);
	--success: var(--green-5);
	--success-hover: var(--green-4);
	--success-text: var(--green-2);
	--info: var(--blue-5);
	--info-hover: var(--blue-4);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--danger: var(--red-5);
		--danger-hover: var(--red-4);
		--danger-text: var(--red-2);
		--warning: var(--orange-4);
		--warning-hover: var(--orange-3);
		--warning-text: var(--orange-2);
		--success: var(--green-5);
		--success-hover: var(--green-4);
		--success-text: var(--green-2);
		--info: var(--blue-5);
		--info-hover: var(--blue-4);
	}
}

:where(*) {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:where(html, body) {
	height: 100%;
	font-family: var(--font-sans);
	color: var(--pc-text);
}

:where(body) {
	background: var(--body-bg-color);
}

html,
body {
	height: 100dvh;
	margin: 0;
	overflow: hidden;
}

body:not([data-scroll='document']) {
	position: absolute;
	inset: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
	height: auto;
	contain: layout;
}

main {
	position: absolute;
	top: var(--game-square-size);
	right: 0;
	bottom: 0;
	left: 0;

	margin: 0 var(--game-piece-margin) 0;
	border-radius: var(--radius-3) var(--radius-3) 0 0;
	overflow-y: auto;
	background: var(--body-main-bg-color);
}

main[data-at-bottom] {
	margin-bottom: var(--game-piece-margin);
	border-bottom-left-radius: var(--radius-3);
	border-bottom-right-radius: var(--radius-3);
}

html:has(> body[data-scroll='document']),
body[data-scroll='document'] {
	height: auto;
	min-height: 100dvh;
	overflow: visible;
}
body[data-scroll='document'] main {
	position: static;
	min-height: calc(var(--viewport-h) - var(--game-square-size) - var(--game-piece-margin));
	margin: var(--game-square-size) var(--game-piece-margin) var(--game-piece-margin);
	border-radius: var(--radius-3);
	overflow: visible;
}
body[data-scroll='document'] nav.main-menu,
body[data-scroll='document'] aside.user-session {
	position: absolute;
}

body[data-app$='-page']:has(.game-board) nav.main-menu > a[aria-current],
body[data-app$='-page']:has(.game-board) aside.user-session > a[aria-current] {
	background: none;
	border-bottom-left-radius: var(--radius-2);
	border-bottom-right-radius: var(--radius-2);
}
body[data-app$='-page']:has(.game-board) nav.main-menu > a[aria-current]::before,
body[data-app$='-page']:has(.game-board) aside.user-session > a[aria-current]::before {
	content: none;
}

body[data-app$='-page'] aside.user-session:not(:has(> details)) {
	padding-inline-end: var(--game-square-size);
}

@media (max-aspect-ratio: 7/5) {
	body[data-app$='-page']:has(.game-board:not([data-kind='puzzle']))
		aside.user-session
		> a:first-of-type {
		display: none;
	}
}
@media (max-aspect-ratio: 6/5) {
	body[data-app$='-page']:has(.game-board:not([data-kind='puzzle']))
		aside.user-session
		> a:nth-of-type(2) {
		display: none;
	}
}
@media (max-aspect-ratio: 1/1) {
	body[data-app$='-page']:has(.game-board:not([data-kind='puzzle'])) aside.user-session > details {
		display: none;
	}
}

@media print {
	body[data-app$='-page'] main aside {
		display: none;
	}

	html,
	body {
		height: auto;
		overflow: visible;
	}

	main {
		position: static;
		margin: 0;
		border-radius: 0;
		overflow: visible;
	}
}

body[data-app$='-page'] .game-board > header > .identity,
body[data-app$='-page'] .game-board > footer > .identity {
	margin-inline-start: var(--game-square-size);
}
body[data-app$='-page'] .game-board > footer {
	position: relative;
}
body[data-app$='-page'] .game-board > footer > .game-actions {
	position: absolute;
	inset-inline-start: 0;
	inset-block: 0;
	width: var(--game-square-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

@media print {
	body[data-app$='-page'] main > header.listing {
		position: static !important;
		height: auto !important;
		padding: 0 !important;
		border: none !important;
		background: none !important;
	}
	body[data-app$='-page'] main > header.listing > h1 {
		line-height: 1.25;
	}

	body[data-app$='-page'] main > footer.listing {
		display: none;
	}
}

body[data-app$='-page'] main:has(> .game-board) {
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: calc(var(--game-square-size) * 8);
	min-height: calc(var(--game-square-size) * 10);
	overflow: hidden;
}
body[data-app$='-page'] .game-board {

	position: relative;
	top: auto;
	left: auto;
	flex: 1;
	width: 100%;
	height: auto;
	grid-template-columns: none;
	grid-template-rows: 1fr auto 1fr;
}

body[data-app$='-page'] .game-board > header,
body[data-app$='-page'] .game-board > footer {
	grid-column: 1;
	justify-self: center;
	width: var(--game-board-size);
	min-height: var(--game-square-size);
}
body[data-app$='-page'] .game-board > header {
	grid-row: 1;
	align-self: end;
}
body[data-app$='-page'] .game-board > footer {
	grid-row: 3;
	align-self: start;
}

body[data-app$='-page'] .game-board > table {
	grid-column: 1;
	grid-row: 2;
	justify-self: center;
}
body[data-app$='-page'] .game-board > .annotation-layer {
	grid-column: 1;
	grid-row: 2;
	justify-self: center;
	width: var(--game-board-size);
	height: var(--game-board-size);
}

body[data-app$='-page'] table[data-style],
body[data-app$='-page'] .game-board[data-turn] > table {
	background-color: transparent;
	box-shadow: none;
}

body[data-app$='-page'] .game-board > header > ul.in-hand,
body[data-app$='-page'] .game-board > footer > ul.in-hand {
	position: absolute;
	height: var(--game-board-size);
}
body[data-app$='-page'] .game-board > header > ul.in-hand {
	top: 100%;
	right: 100%;
	bottom: auto;
	left: auto;
	align-items: flex-end;
	justify-content: flex-start;
}
body[data-app$='-page'] .game-board > footer > ul.in-hand {
	top: auto;
	right: auto;
	bottom: 100%;
	left: 100%;
	align-items: flex-start;
	justify-content: flex-end;
}

body[data-app$='-page'] .game-board > header {
	position: relative;
}

@media (orientation: portrait) {
	html:has(body[data-app='chess-page']),
	html:has(body[data-app='xiongqi-page']) {
		--game-square-size: min(calc(var(--viewport-w) / 8), calc(var(--viewport-h) / 10));
	}
}

main > :is(article, form) {
	background: var(--body-main-article-bg-color);

	--pc-text-muted: var(--pc-9);
}

aside.user-session {
	position: fixed;
	top: 0;
	right: 0;
	height: var(--game-square-size);
	display: flex;
	align-items: center;
	z-index: 100;
}

aside.user-session > a {
	display: grid;
	place-items: center;
	width: var(--game-piece-size);
	height: var(--game-piece-size);
	margin: var(--game-piece-margin);
	border-radius: var(--radius-2);
	color: var(--pc-text-muted);
	text-decoration: none;
	transition:
		color var(--transition-medium),
		background-color var(--transition-medium);
}

aside.user-session > a:hover,
aside.user-session > a:focus-visible {
	color: var(--pc-accent-hover);
	background: var(--body-main-bg-color);
}

aside.user-session > a[aria-current] {
	color: var(--pc-text-emphasis);
	background: var(--body-main-bg-color);

	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;

	position: relative;
}

aside.user-session > a[aria-current]::before {
	content: '';
	position: absolute;
	top: 100%;
	left: calc(-1 * var(--game-piece-margin));
	right: calc(-1 * var(--game-piece-margin));
	height: var(--game-piece-margin);
	background:
		radial-gradient(
				circle at top left,
				transparent var(--game-piece-margin),
				var(--body-main-bg-color) calc(var(--game-piece-margin) + var(--hairline))
			)
			0 0 / var(--game-piece-margin) var(--game-piece-margin) no-repeat,
		radial-gradient(
				circle at top right,
				transparent var(--game-piece-margin),
				var(--body-main-bg-color) calc(var(--game-piece-margin) + var(--hairline))
			)
			100% 0 / var(--game-piece-margin) var(--game-piece-margin) no-repeat,
		linear-gradient(var(--body-main-bg-color), var(--body-main-bg-color)) var(--game-piece-margin)
			0 / calc(100% - 2 * var(--game-piece-margin)) 100% no-repeat;
}

body:has(aside.user-session > a:last-child[aria-current]) main {
	border-top-right-radius: 0;
}
aside.user-session > a:last-child[aria-current]::before {
	right: 0;
	background:
		radial-gradient(
				circle at top left,
				transparent var(--game-piece-margin),
				var(--body-main-bg-color) calc(var(--game-piece-margin) + var(--hairline))
			)
			0 0 / var(--game-piece-margin) var(--game-piece-margin) no-repeat,
		linear-gradient(var(--body-main-bg-color), var(--body-main-bg-color)) var(--game-piece-margin)
			0 / calc(100% - var(--game-piece-margin)) 100% no-repeat;
}

aside.user-session > a > svg {
	width: var(--font-size-3);
	height: var(--font-size-3);
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
}

aside.user-session > a > figure.avatar > :is(img, svg) {
	width: 100%;
	height: 100%;
}

aside.user-session > a[data-count] {
	position: relative;
}

aside.user-session > a[data-count]::after {
	content: attr(data-count);
	position: absolute;
	top: 0;
	right: 0;
	display: grid;
	place-items: center;
	min-width: var(--font-size-1);
	height: var(--font-size-1);
	background: var(--danger);
	color: var(--on-danger);
	font-family: var(--font-sans);
	font-size: var(--font-size-0);
	font-weight: bold;
	border-radius: var(--font-size-1);
}

aside.user-session > a[data-count='0']::after {
	display: none;
}

header.chrome {
	display: contents;
}

nav.main-menu {
	position: fixed;
	top: 0;
	left: 0;
	height: var(--game-square-size);
	display: flex;
	align-items: center;
	z-index: 100;
}

nav.main-menu > a {
	display: grid;
	place-items: center;
	width: var(--game-piece-size);
	height: var(--game-piece-size);
	margin: var(--game-piece-margin);
	border-radius: var(--radius-2);
	color: var(--pc-text-muted);
	text-decoration: none;
	transition:
		color var(--transition-medium),
		background-color var(--transition-medium);
}

nav.main-menu > a:hover,
nav.main-menu > a:focus-visible {
	color: var(--pc-accent-hover);
	background: var(--body-main-bg-color);
	outline: none;
}

nav.main-menu > a[aria-current] {
	color: var(--pc-text-emphasis);
	background: var(--body-main-bg-color);

	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;

	position: relative;
}

nav.main-menu > a[aria-current]::before {
	content: '';
	position: absolute;
	top: 100%;
	left: calc(-1 * var(--game-piece-margin));
	right: calc(-1 * var(--game-piece-margin));
	height: var(--game-piece-margin);
	background:
		radial-gradient(
				circle at top left,
				transparent var(--game-piece-margin),
				var(--body-main-bg-color) calc(var(--game-piece-margin) + var(--hairline))
			)
			0 0 / var(--game-piece-margin) var(--game-piece-margin) no-repeat,
		radial-gradient(
				circle at top right,
				transparent var(--game-piece-margin),
				var(--body-main-bg-color) calc(var(--game-piece-margin) + var(--hairline))
			)
			100% 0 / var(--game-piece-margin) var(--game-piece-margin) no-repeat,
		linear-gradient(var(--body-main-bg-color), var(--body-main-bg-color)) var(--game-piece-margin)
			0 / calc(100% - 2 * var(--game-piece-margin)) 100% no-repeat;
}

body:has(nav.main-menu > a:first-child[aria-current]) main {
	border-top-left-radius: 0;
}
nav.main-menu > a:first-child[aria-current]::before {
	left: 0;
	background:
		radial-gradient(
				circle at top right,
				transparent var(--game-piece-margin),
				var(--body-main-bg-color) calc(var(--game-piece-margin) + var(--hairline))
			)
			100% 0 / var(--game-piece-margin) var(--game-piece-margin) no-repeat,
		linear-gradient(var(--body-main-bg-color), var(--body-main-bg-color)) 0 0 /
			calc(100% - var(--game-piece-margin)) 100% no-repeat;
}

nav.main-menu > a > svg {
	width: var(--font-size-3);
	height: var(--font-size-3);
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

nav.main-menu > a > img {
	display: block;
	width: var(--font-size-3);
	height: var(--font-size-3);
}

header.listing {
	position: sticky;
	top: 0;
	z-index: 1;

	flex: none;
	height: var(--game-square-size);
	display: flex;
	align-items: baseline;
	padding-inline-start: var(--space-3);
	background: var(--body-main-bg-color);
	border-bottom: var(--hairline) solid var(--pc-2);
}

header.listing > h1 {
	font-family: var(--font-display);
	font-size: var(--font-size-2);
	font-weight: 600;
	line-height: var(--game-square-size);
	color: var(--pc-text-emphasis);
}
header.listing > h1 > a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition-fast);
}
header.listing > h1 > a:hover,
header.listing > h1 > a:focus-visible {
	color: var(--pc-accent-hover);
	outline: none;
}

header.listing > nav + * {
	margin-inline-start: auto;
}
header.listing > nav ~ * ~ * {
	margin-inline-start: var(--space-2);
}

footer.listing {
	margin-top: auto;
	flex: none;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	height: var(--game-square-size);
	padding-inline: var(--space-3);
	background: var(--body-main-bg-color);
}

main:has(> footer.listing, > form) {
	display: flex;
	flex-direction: column;
}
main:has(> footer.listing, > form) > :is(article, form) {
	flex: 1 0 auto;
}

header.listing > nav {
	height: 100%;
}

header.listing > * + nav {
	margin-inline-start: var(--space-3);
}
header.listing > nav > menu {
	display: flex;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
header.listing > nav > menu > li {
	height: 100%;
}
header.listing > nav > menu > li > a {
	height: 100%;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding-inline: var(--space-3);
	text-decoration: none;
	color: var(--pc-text-muted);
	font-family: var(--font-sans);
	font-size: var(--font-size-1);
	font-weight: 600;
	transition:
		color var(--transition-fast),
		background-color var(--transition-fast);
}
header.listing > nav > menu > li > a > svg {
	width: var(--font-size-1);
	height: var(--font-size-1);
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
header.listing > nav > menu > li > a:hover,
header.listing > nav > menu > li > a:focus-visible {
	color: var(--pc-accent-hover);
	outline: none;
}
header.listing > nav > menu > li > a[aria-current='page'] {
	color: var(--pc-text-emphasis);
	background: var(--body-main-article-bg-color);
}

@media (aspect-ratio < 11/10) {
	header.listing > nav > menu > li > a {
		font-size: 0;
		gap: 0;
	}
}

article.listing > ol > li + li {
	border-top: var(--hairline) solid var(--body-main-bg-color);
}

article.listing > nav[aria-label='Pagination'] > menu {
	display: flex;
	align-items: center;
	height: var(--game-square-size);
	margin: 0;
	padding: 0;
	list-style: none;
}
article.listing > nav[aria-label='Pagination'] > menu > li:has(> a[aria-label='Next page']) {
	margin-inline-start: auto;
}
article.listing > nav[aria-label='Pagination'] > menu > li > a {
	display: grid;
	place-items: center;
	width: var(--game-piece-size);
	height: var(--game-piece-size);
	margin: var(--game-piece-margin);
	border-radius: var(--radius-2);
	color: var(--pc-text-muted);
	text-decoration: none;
	transition:
		color var(--transition-medium),
		background-color var(--transition-medium);
}
article.listing > nav[aria-label='Pagination'] > menu > li > a:hover,
article.listing > nav[aria-label='Pagination'] > menu > li > a:focus-visible {
	color: var(--pc-accent-hover);
	background: var(--pc-surface-overlay);
	outline: none;
}
article.listing > nav[aria-label='Pagination'] > menu > li > a[aria-disabled='true'] {
	opacity: 0.35;
	pointer-events: none;
}
article.listing > nav[aria-label='Pagination'] > menu > li > a > svg {
	width: var(--font-size-3);
	height: var(--font-size-3);
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

article.listing > p.signed-out,
article.listing > p.empty {
	display: flex;
	align-items: center;
	min-height: var(--game-square-size);
	margin: 0;
	padding: 0 var(--space-3);
	color: var(--pc-text-muted);
	font-family: var(--font-sans);
	font-size: var(--font-size-1);
}

:root {
	--board-chess-light: #f0d9b5;
	--board-chess-dark: #b58863;
}

:where(article:has(> footer[data-style='Chess' i]) > table tr:nth-child(odd) > td:nth-child(odd)),
:where(article:has(> footer[data-style='Chess' i]) > table tr:nth-child(even) > td:nth-child(even)),
:where(table[data-style='Chess' i] tr:nth-child(odd) > td:nth-child(odd)),
:where(table[data-style='Chess' i] tr:nth-child(even) > td:nth-child(even)) {
	background-color: var(--board-chess-light);
}

:where(article:has(> footer[data-style='Chess' i]) > table tr:nth-child(odd) > td:nth-child(even)),
:where(article:has(> footer[data-style='Chess' i]) > table tr:nth-child(even) > td:nth-child(odd)),
:where(table[data-style='Chess' i] tr:nth-child(odd) > td:nth-child(even)),
:where(table[data-style='Chess' i] tr:nth-child(even) > td:nth-child(odd)) {
	background-color: var(--board-chess-dark);
}

article:has(> footer[data-style='Chess' i]) > table tr:nth-child(odd) > td:first-child::before,
table[data-style='Chess' i] tr:nth-child(odd) > td:first-child::before {
	color: var(--board-chess-dark);
}

article:has(> footer[data-style='Chess' i]) > table tr:nth-child(even) > td:first-child::before,
table[data-style='Chess' i] tr:nth-child(even) > td:first-child::before {
	color: var(--board-chess-light);
}

article:has(> footer[data-style='Chess' i]) > table tr:last-child > td:nth-child(odd)::after,
table[data-style='Chess' i] tr:last-child > td:nth-child(odd)::after {
	color: var(--board-chess-light);
}

article:has(> footer[data-style='Chess' i]) > table tr:last-child > td:nth-child(even)::after,
table[data-style='Chess' i] tr:last-child > td:nth-child(even)::after {
	color: var(--board-chess-dark);
}

:root {
	--board-ogi-fill: #cc8844;
	--board-ogi-line: rgba(0, 0, 0, 0.25);
	--board-ogi-coord: #ffcc99;
}

:where(article:has(> footer[data-style='Ogi' i]) > table td, table[data-style='Ogi' i] td) {
	background-color: var(--board-ogi-fill);
	box-shadow: inset calc(-1 * var(--hairline)) calc(-1 * var(--hairline)) 0 0 var(--board-ogi-line);
}

article:has(> footer[data-style='Ogi' i]) > table td:first-child::before,
article:has(> footer[data-style='Ogi' i]) > table tr:last-child > td::after,
table[data-style='Ogi' i] td:first-child::before,
table[data-style='Ogi' i] tr:last-child > td::after {
	color: var(--board-ogi-coord);
}

img.print-piece {
	display: none !important;
}

@media print {
	img.print-piece {
		display: block !important;
	}

	img.screen-piece,
	.drag-ghost {
		display: none !important;
	}
}

@media print {
	:root,
	:root * {
		--pc-text: #000 !important;
		--pc-text-muted: #333 !important;
		--pc-text-emphasis: #000 !important;
		--pc-surface: #fff !important;
		--pc-surface-raised: #fff !important;
		--pc-surface-overlay: #fff !important;
		--pc-border: #bbb !important;
		--pc-border-emphasis: #000 !important;
		--pc-accent: #000 !important;
		--pc-accent-hover: #000 !important;
		--pc-on-accent: #fff !important;
	}
	html,
	body,
	main {
		background: #fff !important;
		color: #000 !important;
	}

	nav.main-menu,
	aside.user-session,
	nav.review-corners,
	details.game-actions,
	nav.move-history,
	dialog,
	.toast {
		display: none !important;
	}

	header.chrome h1 {
		position: static !important;
		height: auto !important;
		padding: 0 0 var(--space-2) !important;
		color: #000 !important;
	}

	main {
		position: static !important;
		top: auto !important;
		min-width: 0 !important;
		min-height: 0 !important;
		overflow: visible !important;
	}

	a {
		color: #000 !important;
		text-decoration: underline;
	}

	table,
	figure {
		break-inside: avoid;
	}

	article.game-board table td {
		border: 0.5pt solid #999 !important;
	}
}

@page {
	margin: 1.5cm;
}

:root {
	color-scheme: light dark;
}
:root[data-theme='light'] {
	color-scheme: light;
}
:root[data-theme='dark'] {
	color-scheme: dark;
}

:where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.1;
	color: var(--pc-text-emphasis);
}

:where(a) {
	color: var(--pc-accent);
}
:where(a:hover) {
	color: var(--pc-accent-hover);
}

:where(:focus-visible) {
	outline: var(--ring) solid var(--pc-accent);
	outline-offset: var(--space-1);
}

.skip-link {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 200;
	padding: var(--space-1) var(--space-2);
	background: var(--body-main-bg-color);
	color: var(--pc-text-emphasis);
}
.skip-link:focus {
	top: 0;
}

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

.truncate[data-address] {
	display: inline-block;
	max-width: 9ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
	padding-inline: 0.3em;
	font-family: var(--font-mono);
	font-size: 0.85em;
	font-weight: 400;
	color: var(--pc-text-muted);
	background: var(--pc-surface);
	border: var(--hairline) solid var(--pc-border);
	border-radius: var(--radius-1);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

article.rules {

	isolation: isolate;

	container-type: inline-size;

	padding: var(--space-2) var(--space-3);

	font-size: max(var(--font-size-1), 1rem);
	line-height: 1.6;
	color: var(--pc-text);
}

article.rules :is(h1, h2, h3, h4, h5) {
	line-height: 1.25;
	color: var(--pc-text-emphasis);
}

article.rules h1 {
	margin: 0 0 1em;
	font-size: var(--font-size-2);
}

article.rules {
	counter-reset: section;
}
article.rules > section {
	counter-increment: section;
	counter-reset: subsection;
}
article.rules > section > h2::before {
	content: counter(section) '. ';
}
article.rules > section h3 {
	counter-increment: subsection;
	counter-reset: subsubsection;
}
article.rules > section h3::before {
	content: counter(section) '.' counter(subsection) ' ';
}
article.rules > section h4 {
	counter-increment: subsubsection;
	counter-reset: subsubsubsection;
}
article.rules > section h4::before {
	content: counter(section) '.' counter(subsection) '.' counter(subsubsection) ' ';
}
article.rules > section h5 {
	counter-increment: subsubsubsection;
}
article.rules > section h5::before {
	content: counter(section) '.' counter(subsection) '.' counter(subsubsection) '.'
		counter(subsubsubsection) ' ';
}

article.rules h2 {
	margin: 2.5em 0 1em;
	padding-bottom: 0.3em;
	border-bottom: var(--hairline) solid var(--pc-border);
}
article.rules :is(h3, h4, h5) {
	margin: 1.5em 0 0.5em;
}

article.rules a {
	color: var(--pc-accent);
}
article.rules a:focus-visible {
	outline: var(--ring) solid var(--pc-accent);
	outline-offset: var(--space-1);
}

article.rules q {
	color: var(--pc-accent);
}

article.rules :is(cite, em) {
	font-style: normal;
}

article.rules hr {
	border: none;
	border-top: var(--hairline) solid var(--pc-border);
	margin: 2em 0;
}

article.rules p {
	margin: 1em 0;
}

article.rules figure {
	margin: 1.5em 0;
	text-align: center;
}
article.rules figure img:not(.piece) {
	display: inline-block;
	max-width: 100%;
	max-height: calc(0.9 * var(--viewport-h));
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 0.5em;
}
article.rules figcaption {
	font-size: 0.9em;
	color: var(--pc-text-muted);
	margin-top: 0.5em;
}
article.rules img {
	max-width: 100%;
	height: auto;
}

article.rules blockquote {
	margin: 1.5em 0;
	padding: 0.75em 1.25em;
	background: var(--pc-surface-raised);
	border-inline-start: calc(3 * var(--hairline)) solid var(--pc-accent);
	border-radius: 0 0.5em 0.5em 0;
}
article.rules blockquote p {
	margin: 0.5em 0;
}

article.rules > nav {
	display: inline-block;
	margin: 1em 0;
	padding: 1em 1.25em;
	background: var(--pc-surface-raised);
	border: var(--hairline) solid var(--pc-border);
	border-radius: 1em;
}
article.rules > nav h2 {
	margin: 0 0 0.5em;
	padding: 0;
	border: none;
	font-size: 1.1em;
}
article.rules > nav ol {
	margin: 0;
	padding-left: 1.5em;
}
article.rules > nav li {
	margin: 0.3em 0;
}

article.rules code {
	font-family: var(--font-mono);
	background: var(--pc-surface-raised);
	border: var(--hairline) solid var(--pc-border);
	border-radius: 0.3em;
	padding: 0.1em 0.35em;
	font-size: 0.95em;
}
article.rules dt {
	font-weight: 600;
	margin-top: 0.75em;
}
article.rules li {
	margin: 0.25em 0;
}
article.rules :is(ul, ol) {
	margin: 0.75em 0;
	padding-inline-start: 1.5em;
}
article.rules dd {
	margin-inline-start: 1.5em;
}

article.rules table {
	border-collapse: collapse;
	margin: 1em 0;
	width: 100%;
}
article.rules caption {
	caption-side: top;
	font-weight: 600;
	padding-bottom: 0.5em;
	text-align: left;
}
article.rules :is(th, td) {
	border: var(--hairline) solid var(--pc-border);
	padding: 0.4em 0.7em;
	text-align: center;
}
article.rules th[scope='row'] {
	text-align: left;
}
article.rules thead th {
	background: var(--pc-surface-raised);
}
article.rules tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--pc-surface-raised) 55%, transparent);
}

@container (inline-size < 30em) {
	article.rules table:not(.squares):not(figure.board > table) {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}
}

article.rules table.pieces img.piece {
	display: block;
	height: 2.2em;
	margin-inline: auto;
}
article.rules table.pieces caption {
	caption-side: top;
}
article.rules dl.pieces img.piece {
	height: var(--game-piece-size);
}
article.rules dl.pieces figure {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
}

article.rules {

	--rules-square: min(5.5em, calc(100cqi / 8));
	--rules-piece: calc(var(--rules-square) * 0.85);
}

article.rules table.squares {
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	width: calc(var(--rules-square) * 8);
	height: calc(var(--rules-square) * 8);
	margin: 1.5em auto;
	border-radius: var(--radius-1);
	overflow: hidden;
}
article.rules table.squares tbody tr {
	background: none;
}
article.rules table.squares tr.rank {
	height: var(--rules-square);
}
article.rules table.squares td.square {
	width: var(--rules-square);
	height: var(--rules-square);
	padding: 0;
	border: none;
	text-align: center;
	vertical-align: middle;
}
article.rules table.squares img.piece {
	display: block;
	width: var(--rules-piece);
	height: var(--rules-piece);
	margin: auto;
	border-radius: 0;
}
article.rules table.squares caption {
	caption-side: bottom;
	padding-top: 0.5em;
	font-weight: normal;
	font-size: 0.9em;
	color: var(--pc-text-muted);
	text-align: center;
}

article.rules table.squares tr:nth-child(odd) > td:nth-child(odd),
article.rules table.squares tr:nth-child(even) > td:nth-child(even) {
	background-color: var(--board-chess-light);
}
article.rules table.squares tr:nth-child(odd) > td:nth-child(even),
article.rules table.squares tr:nth-child(even) > td:nth-child(odd) {
	background-color: var(--board-chess-dark);
}

article.rules table.squares:has(img[data-style='ogi' i]) td.square {
	background-color: var(--board-ogi-fill);
	box-shadow: inset calc(-1 * var(--hairline)) calc(-1 * var(--hairline)) 0 0 var(--board-ogi-line);
}

article.rules table.squares td.square.focus {
	background-color: hsla(330, 100%, 80%, 0.65);
	background-clip: content-box;
	padding: calc(var(--rules-square) / 20);
}

article.rules figure.board table {
	width: calc(var(--rules-square) * 8);
	height: calc(var(--rules-square) * 8);
	margin: 0 auto;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	background: url('../images/games/xiongqi/sides/first/board.svg') no-repeat;
	background-size: 100% 100%;
}
article.rules figure.board tbody tr {
	background: none;
}
article.rules figure.board td {
	position: relative;
	width: var(--rules-square);
	height: var(--rules-square);
	padding: 0;
	border: none;
	text-align: center;
	vertical-align: middle;
}
article.rules figure.board td > img {
	position: relative;
	z-index: 1;
	display: block;
	width: var(--rules-piece);
	height: var(--rules-piece);
	margin: auto;
	border-radius: 0;
}
article.rules figure.board td::before,
article.rules figure.board td::after {
	position: absolute;
	font-size: calc(var(--rules-square) / 5.4);
	font-weight: 700;
	line-height: 1;
	color: var(--pc-text-muted);
	pointer-events: none;
}
article.rules figure.board td:first-child::before {
	top: calc(var(--rules-square) / 16);
	left: calc(var(--rules-square) / 16);
}
article.rules figure.board tr:last-child > td::after {
	bottom: calc(var(--rules-square) / 16);
	right: calc(var(--rules-square) / 16);
}
article.rules figure.board td:first-child[data-cell$='1']::before {
	content: '1';
}
article.rules figure.board td:first-child[data-cell$='2']::before {
	content: '2';
}
article.rules figure.board td:first-child[data-cell$='3']::before {
	content: '3';
}
article.rules figure.board td:first-child[data-cell$='4']::before {
	content: '4';
}
article.rules figure.board td:first-child[data-cell$='5']::before {
	content: '5';
}
article.rules figure.board td:first-child[data-cell$='6']::before {
	content: '6';
}
article.rules figure.board td:first-child[data-cell$='7']::before {
	content: '7';
}
article.rules figure.board td:first-child[data-cell$='8']::before {
	content: '8';
}
article.rules figure.board tr:last-child > td[data-cell^='a']::after {
	content: 'a';
}
article.rules figure.board tr:last-child > td[data-cell^='b']::after {
	content: 'b';
}
article.rules figure.board tr:last-child > td[data-cell^='c']::after {
	content: 'c';
}
article.rules figure.board tr:last-child > td[data-cell^='d']::after {
	content: 'd';
}
article.rules figure.board tr:last-child > td[data-cell^='e']::after {
	content: 'e';
}
article.rules figure.board tr:last-child > td[data-cell^='f']::after {
	content: 'f';
}
article.rules figure.board tr:last-child > td[data-cell^='g']::after {
	content: 'g';
}
article.rules figure.board tr:last-child > td[data-cell^='h']::after {
	content: 'h';
}

article.rules > footer {
	margin-top: 2em;
	padding-top: 1em;
	border-top: var(--hairline) solid var(--pc-border);
	color: var(--pc-text-muted);
	font-size: 0.95em;
}

@media print {
	article.rules {
		padding: 0;
		font-size: 11pt;
		line-height: 1.45;
		color: #000;

		--rules-square: 1.5cm;
	}
	article.rules table.squares:has(td.square.focus) {
		--rules-square: 1cm;
	}
	article.rules h1 {
		font-size: 1.8em;
	}
	article.rules h2 {
		font-size: 1.4em;
		border-bottom-color: #000;
	}
	article.rules h3 {
		font-size: 1.2em;
	}
	article.rules :is(h4, h5) {
		font-size: 1.05em;
	}
	article.rules :is(h1, h2, h3, h4, h5) {
		break-after: avoid;
	}
	article.rules :is(p, li, dd, dt) {
		orphans: 3;
		widows: 3;
	}
	article.rules > nav {
		display: none;
	}

	article.rules a[href^='#'] {
		text-decoration: none;
	}
	article.rules :is(q, a, code, blockquote, dt, figcaption, footer) {
		color: #000;
	}
	article.rules :is(blockquote, code, thead th, tbody tr:nth-child(even)) {
		background: none;
	}
	article.rules blockquote {
		border-inline-start: 1.5pt solid #000;
		border-radius: 0;
		padding-inline-start: 1em;
	}
	article.rules code {
		border: 0.5pt solid #000;
	}
	article.rules :is(hr, h2),
	article.rules > footer {
		border-color: #000;
	}
	article.rules :is(th, td) {
		border: 0.5pt solid #000;
	}
	article.rules figure img:not(.piece) {
		max-height: 12cm;
		border-radius: 0;
	}
	article.rules dl.pieces img.piece {
		height: 1.2cm;
	}
	article.rules figure.board td::before,
	article.rules figure.board td::after {
		color: #000;
	}

	article.rules table.squares,
	article.rules figure.board {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		break-inside: avoid;
	}
	article.rules table:not(.squares) tr {
		break-inside: avoid;
	}
	article.rules table.squares {
		border-radius: 0;
		background: url('../images/boards/8x8/media/print/variants/chess/sides/first/board.svg') no-repeat;
		background-size: 100% 100%;
	}
	article.rules table.squares:has(img[data-style='ogi' i]) {
		background-image: url('../images/boards/8x8/media/print/variants/ogi/sides/first/board.svg');
	}

	article.rules table.squares td.square {
		background-color: transparent !important;
		box-shadow: none !important;
	}
	article.rules table.squares td.square.focus {
		background-color: #ccc !important;
	}
	article.rules figure.board table {
		background-image: url('../images/boards/8x8/media/print/variants/xiongqi/sides/first/board.svg');
	}

	article.rules img {
		filter: grayscale(1);
	}

	article.rules img[src$='/first/representations/western/bishop.svg'] {
		content: url('../images/boards/8x8/media/print/variants/chess/sides/first/bishop.svg');
	}
	article.rules img[src$='/first/representations/western/king.svg'] {
		content: url('../images/boards/8x8/media/print/variants/chess/sides/first/king.svg');
	}
	article.rules img[src$='/first/representations/western/knight.svg'] {
		content: url('../images/boards/8x8/media/print/variants/chess/sides/first/knight.svg');
	}
	article.rules img[src$='/first/representations/western/pawn.svg'] {
		content: url('../images/boards/8x8/media/print/variants/chess/sides/first/pawn.svg');
	}
	article.rules img[src$='/first/representations/western/queen.svg'] {
		content: url('../images/boards/8x8/media/print/variants/chess/sides/first/queen.svg');
	}
	article.rules img[src$='/first/representations/western/rook.svg'] {
		content: url('../images/boards/8x8/media/print/variants/chess/sides/first/rook.svg');
	}
	article.rules img[src$='/second/representations/western/bishop.svg'] {
		content: url('../images/boards/8x8/media/print/variants/chess/sides/second/bishop.svg');
	}
	article.rules img[src$='/second/representations/western/king.svg'] {
		content: url('../images/boards/8x8/media/print/variants/chess/sides/second/king.svg');
	}
	article.rules img[src$='/second/representations/western/knight.svg'] {
		content: url('../images/boards/8x8/media/print/variants/chess/sides/second/knight.svg');
	}
	article.rules img[src$='/second/representations/western/pawn.svg'] {
		content: url('../images/boards/8x8/media/print/variants/chess/sides/second/pawn.svg');
	}
	article.rules img[src$='/second/representations/western/queen.svg'] {
		content: url('../images/boards/8x8/media/print/variants/chess/sides/second/queen.svg');
	}
	article.rules img[src$='/second/representations/western/rook.svg'] {
		content: url('../images/boards/8x8/media/print/variants/chess/sides/second/rook.svg');
	}

	article.rules img[src$='/perspectives/default/bishop.svg'] {
		content: url('../images/boards/8x8/media/print/variants/ogi/perspectives/default/bishop.svg');
	}
	article.rules img[src$='/perspectives/default/fu.svg'] {
		content: url('../images/boards/8x8/media/print/variants/ogi/perspectives/default/fu.svg');
	}
	article.rules img[src$='/perspectives/default/jeweled-king.svg'] {
		content: url('../images/boards/8x8/media/print/variants/ogi/perspectives/default/jeweled-king.svg');
	}
	article.rules img[src$='/perspectives/default/king.svg'] {
		content: url('../images/boards/8x8/media/print/variants/ogi/perspectives/default/king.svg');
	}
	article.rules img[src$='/perspectives/default/knight.svg'] {
		content: url('../images/boards/8x8/media/print/variants/ogi/perspectives/default/knight.svg');
	}
	article.rules img[src$='/perspectives/default/princess.svg'] {
		content: url('../images/boards/8x8/media/print/variants/ogi/perspectives/default/princess.svg');
	}
	article.rules img[src$='/perspectives/default/rook.svg'] {
		content: url('../images/boards/8x8/media/print/variants/ogi/perspectives/default/rook.svg');
	}
	article.rules img[src$='/perspectives/default/tokin.svg'] {
		content: url('../images/boards/8x8/media/print/variants/ogi/perspectives/default/tokin.svg');
	}
	article.rules img[src$='/perspectives/rotated/bishop.svg'] {
		content: url('../images/boards/8x8/media/print/variants/ogi/perspectives/rotated/bishop.svg');
	}
	article.rules img[src$='/perspectives/rotated/fu.svg'] {
		content: url('../images/boards/8x8/media/print/variants/ogi/perspectives/rotated/fu.svg');
	}
	article.rules img[src$='/perspectives/rotated/jeweled-king.svg'] {
		content: url('../images/boards/8x8/media/print/variants/ogi/perspectives/rotated/jeweled-king.svg');
	}
	article.rules img[src$='/perspectives/rotated/king.svg'] {
		content: url('../images/boards/8x8/media/print/variants/ogi/perspectives/rotated/king.svg');
	}
	article.rules img[src$='/perspectives/rotated/knight.svg'] {
		content: url('../images/boards/8x8/media/print/variants/ogi/perspectives/rotated/knight.svg');
	}
	article.rules img[src$='/perspectives/rotated/princess.svg'] {
		content: url('../images/boards/8x8/media/print/variants/ogi/perspectives/rotated/princess.svg');
	}
	article.rules img[src$='/perspectives/rotated/rook.svg'] {
		content: url('../images/boards/8x8/media/print/variants/ogi/perspectives/rotated/rook.svg');
	}
	article.rules img[src$='/perspectives/rotated/tokin.svg'] {
		content: url('../images/boards/8x8/media/print/variants/ogi/perspectives/rotated/tokin.svg');
	}

	article.rules img[src$='/pieces/first/bear.svg'] {
		content: url('../images/boards/8x8/media/print/variants/xiongqi/sides/first/bear.svg');
	}
	article.rules img[src$='/pieces/first/chariot.svg'] {
		content: url('../images/boards/8x8/media/print/variants/xiongqi/sides/first/chariot.svg');
	}
	article.rules img[src$='/pieces/first/empress.svg'] {
		content: url('../images/boards/8x8/media/print/variants/xiongqi/sides/first/empress.svg');
	}
	article.rules img[src$='/pieces/first/general.svg'] {
		content: url('../images/boards/8x8/media/print/variants/xiongqi/sides/first/general.svg');
	}
	article.rules img[src$='/pieces/first/horse.svg'] {
		content: url('../images/boards/8x8/media/print/variants/xiongqi/sides/first/horse.svg');
	}
	article.rules img[src$='/pieces/first/soldier.svg'] {
		content: url('../images/boards/8x8/media/print/variants/xiongqi/sides/first/soldier.svg');
	}
	article.rules img[src$='/pieces/second/bear.svg'] {
		content: url('../images/boards/8x8/media/print/variants/xiongqi/sides/second/bear.svg');
	}
	article.rules img[src$='/pieces/second/chariot.svg'] {
		content: url('../images/boards/8x8/media/print/variants/xiongqi/sides/second/chariot.svg');
	}
	article.rules img[src$='/pieces/second/empress.svg'] {
		content: url('../images/boards/8x8/media/print/variants/xiongqi/sides/second/empress.svg');
	}
	article.rules img[src$='/pieces/second/general.svg'] {
		content: url('../images/boards/8x8/media/print/variants/xiongqi/sides/second/general.svg');
	}
	article.rules img[src$='/pieces/second/horse.svg'] {
		content: url('../images/boards/8x8/media/print/variants/xiongqi/sides/second/horse.svg');
	}
	article.rules img[src$='/pieces/second/soldier.svg'] {
		content: url('../images/boards/8x8/media/print/variants/xiongqi/sides/second/soldier.svg');
	}
}