:root {
	--bg: #f6f7f9;
	--panel: #ffffff;
	--panel-2: #eef1f5;
	--ink: #18202a;
	--muted: #626d7a;
	--line: #d7dde5;
	--accent: #2563eb;
	--accent-ink: #ffffff;
	--shadow: 0 18px 40px rgba(24, 32, 42, .12);
	--radius: 18px;
	color-scheme: light;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="dark"] {
	--bg: #121417;
	--panel: #1b1f24;
	--panel-2: #262b31;
	--ink: #f3f5f7;
	--muted: #aab3bd;
	--line: #363d46;
	--accent: #8ab4ff;
	--accent-ink: #0d1420;
	--shadow: 0 18px 40px rgba(0, 0, 0, .35);
	color-scheme: dark;
}

html[data-contrast="high"] {
	--accent: #005fcc;
	--line: currentColor;
}

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

html[data-reduced-motion="true"] *,
html[data-reduced-motion="true"] *::before,
html[data-reduced-motion="true"] *::after {
	animation-duration: .01ms !important;
	animation-iteration-count: 1 !important;
	scroll-behavior: auto !important;
	transition-duration: .01ms !important;
}


* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100svh;
	background: var(--bg);
	color: var(--ink);
	display: grid;
	align-items: start;
	justify-items: center;
	padding: 18px 12px calc(28px + env(safe-area-inset-bottom));
}

h1 {
	font-size: clamp(1.45rem, 6vw, 2.2rem);
	line-height: 1;
	margin: 0;
}

h2 {
	font-size: 1.45rem;
	margin: 0;
}

p {
	color: var(--muted);
	line-height: 1.5;
	margin: 0;
}

button {
	border: 0;
	color: inherit;
	background: transparent;
	cursor: pointer;
	font: inherit;
	-webkit-tap-highlight-color: transparent;
}

.app {
	width: min(720px, 100%);
	align-content: start;
	gap: 14px;
}

.align-center {
	text-align: center;
}

.topbar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
}

.brand {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.logo {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--accent);
	color: var(--accent-ink);
	display: grid;
	place-items: center;
	font-weight: 900;
}

.subtitle {
	color: var(--muted);
	font-size: .88rem;
	margin-top: 4px;
}

.icon-row {
	justify-self: end;
}

.icon-btn,
.primary-btn,
.ghost-btn {
	min-height: 42px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--panel);
	display: inline-grid;
	grid-auto-flow: column;
	place-items: center;
	gap: 8px;
	padding: 0 14px;
}

.icon-btn {
	width: 42px;
	padding: 0;
	font-weight: 800;
}

.primary-btn {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
	font-weight: 800;
}

.ghost-btn {
	background: transparent;
}

.panel {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.info-panel,
.instructions-panel,
.game-panel {
	padding: 14px;
}

.info-panel {
	padding-bottom: 10px;
}

.stats-strip {
	display: grid;
	gap: 10px;
}

.stats-grid {
	display: grid;
	gap: 10px;
}

.stats-strip > .grid-row,
.stats-grid > .grid-row,
.archive-list,
.modal-actions {
	gap: 10px;
}

.stats-strip > .grid-row {
	align-items: stretch;
}

.stat-box,
.stat-card,
.archive-item {
	background: var(--panel-2);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 12px;
	min-width: 0;
}

.stat-label {
	color: var(--muted);
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 800;
}

.stat-value,
.stat-card strong {
	display: block;
	font-size: 1.08rem;
	font-weight: 850;
	margin-top: 3px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.game-panel {
	min-height: 320px;
	display: grid;
	place-items: center;
	text-align: center;
}

.placeholder {
	gap: 8px;
}


/**********************************************
* 
* Toast
* 
**********************************************/
.toast {
	position: fixed;
	left: 50%;
	bottom: calc(18px + env(safe-area-inset-bottom));
	transform: translateX(-50%) translateY(20px);
	background: var(--ink);
	color: var(--bg);
	border-radius: 999px;
	padding: 11px 16px;
	font-weight: 800;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
	z-index: 30;
	max-width: calc(100% - 28px);
	text-align: center;
}
	.toast.show {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}


/**********************************************
* 
* Modal
* 
**********************************************/
.modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .42);
	display: none;
	place-items: center;
	padding: 16px;
	z-index: 20;
}
	.modal-backdrop.open {
		display: grid;
	}

.modal {
	width: min(590px, 100%);
	max-height: min(86svh, 760px);
	overflow: auto;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: var(--shadow);
	padding: 18px;
}
	.modal-head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 12px;
		margin-bottom: 12px;
	}
	.modal-actions {
		margin-top: 14px;
	}


/**********************************************
* 
* Archive
* 
**********************************************/
.archive-list {
	margin-top: 12px;
}

.archive-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 12px;
	row-gap: 4px;
}

.archive-item strong,
.archive-meta {
	grid-column: 1;
	min-width: 0;
}

.archive-status-btn {
	grid-column: 2;
	grid-row: 1 / span 2;
	justify-self: end;
	white-space: nowrap;
	min-height: 36px;
	padding: 0 12px;
}

.archive-item span,
.stat-card span {
	color: var(--muted);
	font-size: .86rem;
}


/**********************************************
* 
* Settings
* 
**********************************************/
.setting-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-top: 1px solid var(--line);
}

.setting-row:first-of-type {
	border-top: 0;
}


/**********************************************
* 
* Switch
* 
**********************************************/
.switch {
	width: 54px;
	height: 32px;
	border-radius: 999px;
	background: var(--panel-2);
	border: 1px solid var(--line);
	padding: 3px;
}
	.switch span {
		display: block;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: var(--muted);
		transition: transform .18s ease, background .18s ease;
	}
	.switch[aria-checked="true"] span {
		transform: translateX(22px);
		background: var(--accent);
	}


@media (max-width: 560px) {
	body {
		padding-inline: 8px;
	}
	.topbar {
		align-items: start;
	}
	.icon-row {
		gap: 6px;
	}
	.icon-btn {
		width: 38px;
		min-height: 38px;
	}
}