:root {
	color-scheme: light dark;
	--bg-page: #f0f0f2;
	--text: #1a1a1c;
	--text-muted: #6a6a70;
	--text-faint: #9a9aa0;
	--surface: #ffffff;
	--border: #b8b8c0;
	--accent: #4455ee;
	--accent-text: #ffffff;
	--deck-link: #5b34f0;
	--deck-link-hover: #4726cc;
	--card-black-bg: #0d0d10;
	--card-black-text: #ececf0;
	--li-span: #e8e8ec;
	--input-bg: #ffffff;
	--input-border: #8a8a94;
	--input-focus-ring: rgba(68, 85, 238, 0.35);
	--submission-link-bg: #ebebef;
	--submission-border: #5c5c66;
	--spec: #888890;
	--suggestion-link: #a8a8b0;
	--system-msg: #707078;
	--error: #c41e3a;
	--join-glow-core: rgba(68, 85, 238, 0.95);
	--join-glow-halo: rgba(68, 85, 238, 0.45);
	font-family:
		system-ui,
		-apple-system,
		"Segoe UI",
		Roboto,
		"Noto Sans",
		"Noto Sans JP",
		"Hiragino Sans",
		"Hiragino Kaku Gothic ProN",
		"Hiragino Kaku Gothic Pro",
		"Yu Gothic UI",
		"Meiryo",
		sans-serif;
	font-size: 10pt;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg-page: #121214;
		--text: #e8e8ec;
		--text-muted: #9898a0;
		--text-faint: #686870;
		--surface: #1e1e22;
		--border: #3c3c44;
		--accent: #7b8cff;
		--accent-text: #0c0c10;
		--deck-link: #b39aff;
		--deck-link-hover: #cfbeff;
		--card-black-bg: #050508;
		--card-black-text: #e4e4e8;
		--li-span: #2a2a32;
		--input-bg: #1a1a1e;
		--input-border: #5c5c68;
		--input-focus-ring: rgba(123, 140, 255, 0.4);
		--submission-link-bg: #1e1e24;
		--submission-border: #4a4a54;
		--spec: #787880;
		--suggestion-link: #686870;
		--system-msg: #909098;
		--error: #ff6b7a;
		--join-glow-core: rgba(123, 140, 255, 0.98);
		--join-glow-halo: rgba(123, 140, 255, 0.5);
	}
}

body {
	background-color: var(--bg-page);
	color: var(--text);
}
h1 {
	display: inline;
}
li {
	position: relative;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: 5px;
	display: block;
	float: left;
	font-weight: bold;
	margin: 0.5em;
	padding: 0.5em;
	width: 9em;
	min-height: 13em;
}
li.black {
	background-color: var(--card-black-bg);
	color: var(--card-black-text);
	margin-bottom: 1em;
}
li.normal {
	color: var(--text-faint);
}
li.selected {
	background-color: var(--accent);
	color: var(--accent-text);
	margin-top: -1em;
	margin-bottom: 2em;
}
li.selecting {
	border-color: var(--accent);
	color: var(--text);
	margin-top: -0.5em;
	margin-bottom: 1.5em;
}
.unlocked li.normal {
	color: var(--text-muted);
	cursor: pointer;
}
.unlocked li.normal:hover {
	border-color: var(--accent);
}
li span {
	bottom: -0.2em;
	color: var(--li-span);
	font-size: 50pt;
	position: absolute;
	right: 0;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-ms-user-select: none;
	z-index: 1;
}
li a {
	position: relative;
	z-index: 2;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#account {
	float: right;
}
#account #username {
	box-sizing: border-box;
	width: 8em;
	padding: 0.25em 0.4em;
	border: 1px solid var(--input-border);
	border-radius: 4px;
	background-color: var(--input-bg);
	color: var(--text);
	outline-offset: 2px;
}
#account #username:focus {
	outline: 2px solid var(--input-focus-ring);
	border-color: var(--accent);
}
#account > input {
	float: right;
}

@keyframes join-pulse-glow {
	0%,
	100% {
		box-shadow:
			0 0 6px 1px var(--join-glow-core),
			0 0 16px 3px var(--join-glow-halo),
			0 0 28px 6px transparent;
	}
	50% {
		box-shadow:
			0 0 10px 3px var(--join-glow-core),
			0 0 26px 8px var(--join-glow-halo),
			0 0 42px 12px var(--join-glow-halo);
	}
}

#join {
	position: relative;
	z-index: 1;
	margin-inline-start: 0.35em;
	padding: 0.4em 0.85em;
	font-weight: 700;
	font-size: 1.05em;
	letter-spacing: 0.02em;
	border: 1px solid var(--accent);
	border-radius: 6px;
	background-color: var(--accent);
	color: var(--accent-text);
	cursor: pointer;
	animation: join-pulse-glow 1.6s ease-in-out infinite;
}

#join:hover {
	filter: brightness(1.08);
}

#join:active {
	filter: brightness(0.94);
}

@media (prefers-reduced-motion: reduce) {
	#join {
		animation: none;
		box-shadow:
			0 0 8px 2px var(--join-glow-core),
			0 0 20px 5px var(--join-glow-halo);
	}
}

#chat {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: 3px;
	float: left;
	margin: 0.25em 0;
	padding: 5px;
	width: 30em;
}
#chat input {
	width: 99%;
	margin: 0;
	padding: 0;
}
#messages {
	overflow: scroll;
	height: 13em;
	margin-bottom: 5px;
}
#messages p {
	margin: 0.2em;
}
#messages .system {
	color: var(--system-msg);
}
#roster {
	float: left;
	overflow: auto;
	margin: 0.25em 0.5em;
	padding: 0.25em;
	text-align: right;
	height: 15em;
	white-space: nowrap;
	width: 10em;
}
#roster em {
	font-style: normal;
	color: var(--accent);
}
#roster .dealer {
	font-weight: bold;
}
#roster .abandoned {
	text-decoration: line-through;
}
#roster .ready {
	padding-left: 14px;
	background: url("ready.png") no-repeat left center;
	background-size: 10px 10px;
}
#roster .spec {
	color: var(--spec);
}
#social {
	clear: right;
	float: right;
}
#deckLinks {
	clear: both;
	margin: 1em 0 0.25em;
	text-align: center;
}
#deckLinks a {
	margin-left: 0.5em;
	color: var(--deck-link);
	text-decoration: none;
	font-weight: 600;
}
#deckLinks a:hover,
#deckLinks a:focus {
	color: var(--deck-link-hover);
	text-decoration: underline;
}
#status {
	clear: both;
	font-weight: bold;
	text-align: left;
	padding: 0.5em 0.5em 0 0.5em;
	margin: 0;
}
#status.error {
	color: var(--error);
}
#submissions {
	float: left;
	margin: 0.5em;
}
#submissions a {
	background-color: var(--submission-link-bg);
	border: 1px solid var(--submission-border);
	border-radius: 2px;
	display: block;
	padding: 0.4em 1em;
	margin-bottom: 1px;
}
#submissions a.winner,
#submissions a.winner b {
	background-color: var(--accent);
	color: var(--accent-text);
}
#submissions a b {
	color: var(--accent);
}
#submissions.electing a {
	background-color: var(--surface);
	border-color: var(--accent);
	cursor: pointer;
}
#submissions.electing a:hover {
	border-color: #ffffff;
}
#suggestions {
	visibility: hidden;
	clear: both;
	padding-top: 2em;
	size: small;
	text-align: right;
}
#suggestions a {
	color: var(--suggestion-link);
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
	#myHand {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.4em;
	}

	#myHand li {
		float: none;
		box-sizing: border-box;
		margin: 0;
		width: auto;
		min-width: 0;
	}

	#social {
		float: none;
		clear: both;
		display: block;
	}

	.desktop-only {
		display: none !important;
	}

	#roster,
	#chat {
		float: none;
		width: auto;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	#chat,
	#social #chat {
		display: none !important;
	}

	#chat {
		display: block !important;
	}

	#roster {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.25em 0.5em;
		height: auto;
		white-space: normal;
		text-align: left;
	}

	#roster p {
		margin: 0;
	}

	#social {
		margin-top: 0.25em;
	}
}

#cam-fx-layer {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 10000;
	overflow: hidden;
}

@keyframes cam-fx-float {
	to {
		transform: translate(var(--cam-dx), var(--cam-dy)) scale(0.2);
		opacity: 0;
	}
}

.cam-fx-dot {
	position: fixed;
	border-radius: 50%;
	pointer-events: none;
	animation-name: cam-fx-float;
	animation-timing-function: cubic-bezier(0.22, 0.84, 0.38, 1);
	animation-fill-mode: forwards;
	opacity: 0.92;
	will-change: transform, opacity;
}

.cam-fx-dot--pop {
	animation-timing-function: cubic-bezier(0.15, 0.86, 0.22, 1);
}

.cam-fx-dot--glow {
	box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.28);
}

@media (prefers-reduced-motion: reduce) {
	.cam-fx-dot {
		animation: none !important;
		opacity: 0 !important;
	}
}