@font-face {
	font-family: 'Essay Text';
	src: url('/Essay-Text-W01-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Iowan Old Style BT';
	src: url('/IowanOldStyleBT-Italic.otf') format('opentype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
:root {
	color-scheme: dark;
	-webkit-tap-highlight-color: transparent;
	--md-ref-typeface-brand: 'Essay Text', 'Iowan Old Style BT', 'Roboto', system-ui, sans-serif;
	--md-ref-typeface-plain: 'Essay Text', 'Iowan Old Style BT', 'Roboto', system-ui, sans-serif;
	--md-sys-color-primary: #d4b89b;
	--md-sys-color-on-primary: #3e2d1a;
	--md-sys-color-primary-container: #5c4328;
	--md-sys-color-on-primary-container: #f0dcc6;
	--md-sys-color-secondary: #c1b5a8;
	--md-sys-color-on-secondary: #2b241d;
	--md-sys-color-secondary-container: #423a32;
	--md-sys-color-on-secondary-container: #ded3c7;
	--md-sys-color-tertiary: #b0c2a5;
	--md-sys-color-on-tertiary: #222b1b;
	--md-sys-color-tertiary-container: #38412f;
	--md-sys-color-on-tertiary-container: #d4e7c7;
	--md-sys-color-error: #f2b8b5;
	--md-sys-color-on-error: #601410;
	--md-sys-color-error-container: #8c1d18;
	--md-sys-color-on-error-container: #f9dedc;
	--md-sys-color-background: #1a1714;
	--md-sys-color-on-background: #e1ddd8;
	--md-sys-color-surface: #1a1714;
	--md-sys-color-on-surface: #e1ddd8;
	--md-sys-color-surface-variant: #4d463f;
	--md-sys-color-on-surface-variant: #ccc5bc;
	--md-sys-color-outline: #958f87;
	--md-sys-color-outline-variant: #4d463f;
	--md-sys-color-surface-bright: #3d3732;
	--md-sys-color-surface-dim: #1a1714;
	--md-sys-color-surface-container: #23201c;
	--md-sys-color-surface-container-low: #1e1b18;
	--md-sys-color-surface-container-lowest: #110f0d;
	--md-sys-color-surface-container-high: #2d2925;
	--md-sys-color-surface-container-highest: #383430;
	--md-sys-color-inverse-surface: #e1ddd8;
	--md-sys-color-inverse-on-surface: #322f2b;
	--md-sys-color-inverse-primary: #7a6044;
	--md-sys-color-scrim: #000;
	--md-sys-color-shadow: #000;
	--md-sys-shape-corner-extra-small: 8px;
	--md-sys-shape-corner-small: 12px;
	--md-sys-shape-corner-medium: 16px;
	--md-sys-shape-corner-large: 20px;
	--md-sys-shape-corner-extra-large: 28px;
	--md-sys-shape-corner-full: 28px;
	--md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);
	--md-sys-typescale-headline-small-size: 1.5rem;
	--md-sys-typescale-headline-small-line-height: 2rem;
	--md-sys-typescale-headline-small-weight: 400;
	--md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);
	--md-sys-typescale-title-large-size: 1.375rem;
	--md-sys-typescale-title-large-line-height: 1.75rem;
	--md-sys-typescale-title-large-weight: 400;
	--md-sys-typescale-title-medium-font: var(--md-ref-typeface-brand);
	--md-sys-typescale-title-medium-size: 1rem;
	--md-sys-typescale-title-medium-line-height: 1.5rem;
	--md-sys-typescale-title-medium-weight: 500;
	--md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);
	--md-sys-typescale-body-medium-size: 0.875rem;
	--md-sys-typescale-body-medium-line-height: 1.25rem;
	--md-sys-typescale-body-medium-weight: 400;
	--md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);
	--md-sys-typescale-label-large-size: 0.875rem;
	--md-sys-typescale-label-large-line-height: 1.25rem;
	--md-sys-typescale-label-large-weight: 500;
	--md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);
	--md-sys-typescale-label-medium-size: 0.75rem;
	--md-sys-typescale-label-medium-line-height: 1rem;
	--md-sys-typescale-label-medium-weight: 500;
	--md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);
	--md-sys-typescale-label-small-size: 0.6875rem;
	--md-sys-typescale-label-small-line-height: 1rem;
	--md-sys-typescale-label-small-weight: 500;
	--gold: #ffd76a;
	--gold-deep: #c9971f;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
	font-family: var(--md-ref-typeface-plain);
	font-size: 16px;
	background:
		radial-gradient(1200px 500px at 50% -10%, color-mix(in srgb, var(--md-sys-color-primary) 7%, transparent), transparent 70%),
		var(--md-sys-color-surface);
	color: var(--md-sys-color-on-surface);
	min-height: 100vh;
	-webkit-text-size-adjust: 100%;
	display: flex;
	flex-direction: column;
}
a { color: inherit; text-decoration: none; }
.material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: 'liga'; }
md-icon { --md-icon-size: 24px; }
.page-shell {
	width: 100%;
	max-width: 72rem;
	margin: 0 auto;
	padding: 0.75rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.5rem 0.5rem 0.5rem 1rem;
	background: var(--md-sys-color-surface-container);
	border-radius: var(--md-sys-shape-corner-extra-large);
	margin-block-end: 0.75rem;
}
.page-title {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-width: 0;
}
.page-title h1 {
	margin: 0;
	font-family: var(--md-sys-typescale-title-large-font);
	font-size: var(--md-sys-typescale-title-large-size);
	line-height: var(--md-sys-typescale-title-large-line-height);
	font-weight: var(--md-sys-typescale-title-large-weight);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.page-logo {
	height: 1.75rem;
	width: 1.75rem;
	display: block;
	flex-shrink: 0;
}
.header-links { display: flex; align-items: center; gap: 0.125rem; flex-shrink: 0; }
.controls-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem;
	background: var(--md-sys-color-surface-container);
	border-radius: var(--md-sys-shape-corner-large);
	margin-block-end: 0.75rem;
}
.controls-group {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.controls-label {
	font-family: var(--md-sys-typescale-label-large-font);
	font-size: var(--md-sys-typescale-label-large-size);
	line-height: var(--md-sys-typescale-label-large-line-height);
	font-weight: var(--md-sys-typescale-label-large-weight);
	color: var(--md-sys-color-on-surface-variant);
}
.controls-spacer { flex: 1 1 0; min-width: 0.5rem; }
md-chip-set { display: inline-flex; }
md-filter-chip { --md-filter-chip-container-shape: var(--md-sys-shape-corner-small); }
md-filled-button.spin-all {
	--md-filled-button-container-shape: var(--md-sys-shape-corner-full);
	font-family: var(--md-sys-typescale-label-large-font);
	font-weight: var(--md-sys-typescale-label-large-weight);
}
.session-stats {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	padding: 0.875rem 0.75rem;
	background: var(--md-sys-color-surface-container-lowest);
	border: 1px solid var(--md-sys-color-outline-variant);
	border-radius: var(--md-sys-shape-corner-large);
	margin-block-end: 0.75rem;
}
.stat { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; }
.stat-value {
	font-family: var(--md-sys-typescale-headline-small-font);
	font-size: var(--md-sys-typescale-headline-small-size);
	line-height: var(--md-sys-typescale-headline-small-line-height);
	font-weight: var(--md-sys-typescale-headline-small-weight);
	color: var(--md-sys-color-primary);
	font-variant-numeric: tabular-nums;
}
.stat-label {
	font-family: var(--md-sys-typescale-label-medium-font);
	font-size: var(--md-sys-typescale-label-medium-size);
	line-height: var(--md-sys-typescale-label-medium-line-height);
	font-weight: var(--md-sys-typescale-label-medium-weight);
	color: var(--md-sys-color-on-surface-variant);
}
md-circular-progress#loading {
	display: block;
	margin: 0 auto 0.5rem;
	--md-circular-progress-size: 2.25rem;
}
md-circular-progress#loading[hidden] { display: none; }
.wheels-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin-block-end: 0.75rem;
}
.wheels-grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 480px) {
	.wheels-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
	.wheels-grid[data-count="3"] { grid-template-columns: repeat(2, 1fr); }
	.wheels-grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.wheels-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
	.wheels-grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
	.wheels-grid[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
}
.wheel-card {
	position: relative;
	background: var(--md-sys-color-surface-container-low);
	border: 1px solid var(--md-sys-color-outline-variant);
	border-radius: var(--md-sys-shape-corner-large);
	padding: 0.75rem 0.75rem 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	opacity: 0;
	transform: translateY(10px) scale(0.98);
	animation: mdc-enter 420ms cubic-bezier(0.2, 0, 0, 1) forwards;
	transition: box-shadow 280ms cubic-bezier(0.2, 0, 0, 1), transform 200ms cubic-bezier(0.2, 0, 0, 1), border-color 280ms cubic-bezier(0.2, 0, 0, 1);
}
.wheel-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.32); }
.wheel-card.won {
	border-color: var(--md-sys-color-primary);
	box-shadow: 0 4px 24px color-mix(in srgb, var(--md-sys-color-primary) 35%, transparent);
}
@keyframes mdc-enter {
	from { opacity: 0; transform: translateY(10px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
.wheel-player-label {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-family: var(--md-sys-typescale-label-large-font);
	font-size: var(--md-sys-typescale-label-large-size);
	line-height: var(--md-sys-typescale-label-large-line-height);
	font-weight: var(--md-sys-typescale-label-large-weight);
	color: var(--md-sys-color-on-surface-variant);
}
.wheel-player-label span[data-i18n-edit] {
	outline: none;
	border-bottom: 1px dashed transparent;
	transition: border-color 0.2s ease;
}
.wheel-player-label span[data-i18n-edit]:hover { border-bottom-color: var(--md-sys-color-outline); }
.wheel-player-label span[data-i18n-edit][data-editing] { border-bottom-color: var(--md-sys-color-primary); }
.wheel-player-label md-icon { --md-icon-size: 1rem; }
.wheel-stage {
	position: relative;
	width: 100%;
	max-width: 21rem;
	aspect-ratio: 1;
	margin: 0 auto;
	touch-action: manipulation;
	cursor: pointer;
	user-select: none;
}
.wheel-stage canvas { display: block; width: 100%; height: 100%; }
.wheel-result {
	position: absolute;
	z-index: 5;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transform: translateX(-10px) scale(0.9);
	transition: opacity 0.35s ease, transform 0.4s cubic-bezier(.2,1.6,.4,1);
}
.wheel-result.show { opacity: 1; transform: none; }
.wheel-result-inner {
	position: absolute;
	left: 0;
	top: 0;
	width: 48%;
	height: 100%;
}
.wheel-result-img {
	width: 100%;
	height: 94%;
	object-fit: contain;
	object-position: left bottom;
	display: block;
	filter: drop-shadow(0 8px 20px rgba(0,0,0,0.55));
}
.wheel-result-name {
	position: absolute;
	top: 4%;
	left: 4%;
	text-align: left;
	font-family: var(--md-sys-typescale-title-medium-font);
	font-size: var(--md-sys-typescale-title-medium-size);
	line-height: var(--md-sys-typescale-title-medium-line-height);
	font-weight: var(--md-sys-typescale-title-medium-weight);
	color: #fff;
	text-shadow: 0 2px 10px rgba(0,0,0,0.7), 0 0 2px rgba(0,0,0,0.5);
	white-space: nowrap;
	overflow: visible;
}
.wheel-result-sub { display: none; }
.wheel-spin-hint {
	font-family: var(--md-sys-typescale-label-medium-font);
	font-size: var(--md-sys-typescale-label-medium-size);
	line-height: var(--md-sys-typescale-label-medium-line-height);
	font-weight: var(--md-sys-typescale-label-medium-weight);
	color: var(--md-sys-color-on-surface-variant);
	transition: opacity 0.3s;
}
.wheel-spin-hint.hidden { opacity: 0; }
.wheel-spin-btn { --md-filled-tonal-button-container-shape: var(--md-sys-shape-corner-full); }
.page-footer {
	padding: 0.5rem 0.75rem 1rem;
	text-align: center;
	font-family: var(--md-sys-typescale-label-small-font);
	font-size: var(--md-sys-typescale-label-small-size);
	line-height: var(--md-sys-typescale-label-small-line-height);
	font-weight: var(--md-sys-typescale-label-small-weight);
	color: var(--md-sys-color-on-surface-variant);
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.admin-card {
	background: var(--md-sys-color-surface-container-lowest);
	border: 1px solid var(--md-sys-color-outline-variant);
	border-radius: var(--md-sys-shape-corner-large);
	padding: 1rem;
	margin-block-end: 0.75rem;
}
.admin-card h2 {
	margin: 0 0 0.75rem;
	font-family: var(--md-sys-typescale-title-medium-font);
	font-size: var(--md-sys-typescale-title-medium-size);
	line-height: var(--md-sys-typescale-title-medium-line-height);
	font-weight: var(--md-sys-typescale-title-medium-weight);
	display: flex;
	align-items: center;
	gap: 0.375rem;
}
.admin-card h2 md-icon { color: var(--md-sys-color-primary); }
.stat-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
@media (min-width: 640px) { .stat-cards { grid-template-columns: repeat(4, 1fr); } }
.stat-card {
	background: var(--md-sys-color-surface-container);
	border-radius: var(--md-sys-shape-corner-medium);
	padding: 0.875rem 0.75rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.125rem;
}
.stat-card-value {
	font-family: var(--md-sys-typescale-headline-small-font);
	font-size: var(--md-sys-typescale-headline-small-size);
	line-height: var(--md-sys-typescale-headline-small-line-height);
	font-weight: var(--md-sys-typescale-headline-small-weight);
	color: var(--md-sys-color-primary);
	font-variant-numeric: tabular-nums;
}
.stat-card-label {
	font-family: var(--md-sys-typescale-label-small-font);
	font-size: var(--md-sys-typescale-label-small-size);
	line-height: var(--md-sys-typescale-label-small-line-height);
	font-weight: var(--md-sys-typescale-label-small-weight);
	color: var(--md-sys-color-on-surface-variant);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-align: center;
}
.admin-form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 22rem; margin: 0 auto; }
.admin-form md-outlined-text-field { --md-outlined-text-field-container-shape: var(--md-sys-shape-corner-small); }
.admin-error {
	color: var(--md-sys-color-error);
	font-family: var(--md-sys-typescale-body-medium-font);
	font-size: var(--md-sys-typescale-body-medium-size);
	line-height: var(--md-sys-typescale-body-medium-line-height);
	text-align: center;
	min-height: 1.25rem;
	margin: 0;
}
.admin-list { --md-list-item-container-shape: var(--md-sys-shape-corner-medium); }
.admin-list md-list-item { --md-list-item-label-text-font: var(--md-ref-typeface-plain); }
.admin-list-bar {
	height: 0.375rem;
	border-radius: var(--md-sys-shape-corner-small);
	background: var(--md-sys-color-surface-container-highest);
	overflow: hidden;
	margin-top: 0.125rem;
}
.admin-list-bar > span {
	display: block;
	height: 100%;
	border-radius: var(--md-sys-shape-corner-small);
	background: linear-gradient(90deg, var(--md-sys-color-primary-container), var(--md-sys-color-primary));
}
.empty-state {
	padding: 1rem;
	text-align: center;
	color: var(--md-sys-color-on-surface-variant);
	font-family: var(--md-sys-typescale-body-medium-font);
	font-size: var(--md-sys-typescale-body-medium-size);
	line-height: var(--md-sys-typescale-body-medium-line-height);
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
@media (min-width: 640px) {
	.page-shell { padding: 1rem; }
	.page-header { margin-block-end: 1rem; }
	.page-title h1 { font-size: var(--md-sys-typescale-title-large-size); }
	.admin-card { padding: 1.5rem; border-radius: var(--md-sys-shape-corner-extra-large); }
}