* {
	box-sizing: border-box;
}

:root {
	--page-background: #f4efe6;
	--panel-background: #fffdf8;
	--ink: #24313a;
	--muted-ink: #65717a;
	--accent: #d95d39;
	--accent-dark: #a84227;
	--x-color: #247a78;
	--o-color: #c4573c;
	--line: #d9cdbd;
	--cell-hover: #f9e1d7;
	--winning: #f5c85b;
	--shadow: 0 22px 60px rgba(64, 49, 36, 0.16);
}

body {
	min-width: 320px;
	min-height: 100vh;
	margin: 0;
	padding: 2rem 1rem;
	background:
		radial-gradient(circle at 15% 15%, rgba(217, 93, 57, 0.12), transparent 28%),
		linear-gradient(135deg, #f4efe6 0%, #e9f0ed 100%);
	color: var(--ink);
	font-family: "Trebuchet MS", Verdana, sans-serif;
}

.game-container {
	width: min(100%, 34rem);
	margin: 0 auto;
	padding: clamp(1.5rem, 5vw, 3rem);
	background: var(--panel-background);
	border: 1px solid rgba(217, 205, 189, 0.8);
	box-shadow: var(--shadow);
	backdrop-filter: blur(8px);
	animation: reveal 500ms ease both;
}

h1 {
	margin: 0 0 1.75rem;
	color: var(--accent-dark);
	font-family: Georgia, serif;
	font-size: clamp(2.25rem, 8vw, 3.5rem);
	line-height: 1;
	text-align: center;
}

#playerForm {
	display: grid;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

#playerForm > div {
	display: grid;
	gap: 0.4rem;
}

label {
	color: var(--muted-ink);
	font-size: 0.9rem;
	font-weight: 700;
}

input {
	width: 100%;
	padding: 0.75rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: 0.35rem;
	background: #ffffff;
	color: var(--ink);
	font: inherit;
}

input:focus,
button:focus-visible {
	outline: 3px solid rgba(217, 93, 57, 0.35);
	outline-offset: 3px;
}

button {
	border: 0;
	border-radius: 0.35rem;
	color: #ffffff;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	transition: background-color 160ms ease, transform 160ms ease;
}

button:hover {
	transform: translateY(-1px);
}

#startButton,
#resetButton {
	min-height: 2.75rem;
	padding: 0.7rem 1rem;
	background: var(--accent);
}

#startButton:hover,
#resetButton:hover {
	background: var(--accent-dark);
}

#gameStatus {
	min-height: 1.5rem;
	margin: 1.25rem 0;
	padding: 0.65rem 1rem;
	border: 1px solid var(--line);
	border-radius: 0.35rem;
	background: rgba(255, 255, 255, 0.68);
	color: var(--muted-ink);
	font-weight: 700;
	text-align: center;
	transition: background-color 220ms ease, color 220ms ease, transform 220ms ease;
}

.game-status--result {
	background: #fff3c9;
	border-color: var(--winning);
	color: #6f5111;
	transform: scale(1.02);
}

.game-status--draw {
	background: #e9f0ed;
	border-color: #9ebbb3;
	color: #315d58;
}

.scoreboard {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.7rem;
	margin: 0 0 1.25rem;
}

.player-card {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	min-width: 0;
	padding: 0.7rem;
	border: 1px solid var(--line);
	border-radius: 0.35rem;
	background: rgba(255, 255, 255, 0.62);
	transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.player-card--active {
	border-color: var(--accent);
	background: #fff8ed;
	box-shadow: 0 0 0 3px rgba(217, 93, 57, 0.12);
	transform: translateY(-2px);
}

.player-mark {
	display: grid;
	flex: 0 0 2rem;
	width: 2rem;
	height: 2rem;
	place-items: center;
	border-radius: 50%;
	font-family: Georgia, serif;
	font-size: 1.2rem;
	font-weight: 700;
}

.player-card--x .player-mark {
	background: rgba(36, 122, 120, 0.14);
	color: var(--x-color);
}

.player-card--o .player-mark {
	background: rgba(196, 87, 60, 0.14);
	color: var(--o-color);
}

.player-card div {
	min-width: 0;
}

.player-label,
.player-card strong {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.player-label {
	color: var(--muted-ink);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.player-card strong {
	margin-top: 0.15rem;
	font-size: 0.85rem;
}

.board {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.55rem;
	width: min(100%, 25rem);
	aspect-ratio: 1;
	margin: 0 auto 1.5rem;
	padding: 0.45rem;
	border: 1px solid rgba(217, 205, 189, 0.8);
	border-radius: 0.6rem;
	background: rgba(217, 205, 189, 0.42);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 12px 28px rgba(64, 49, 36, 0.1);
}

.cell {
	display: grid;
	min-width: 0;
	min-height: 0;
	place-items: center;
	aspect-ratio: 1;
	border: 2px solid var(--line);
	background: #ffffff;
	color: var(--ink);
	font-family: Georgia, serif;
	font-size: clamp(2.5rem, 13vw, 5rem);
	line-height: 1;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.cell:hover:not(:disabled) {
	background: var(--cell-hover);
	border-color: var(--accent);
}

.cell:disabled {
	cursor: default;
	opacity: 1;
}

.cell--x {
	color: var(--x-color);
	animation: mark-pop 220ms ease both;
}

.cell--o {
	color: var(--o-color);
	animation: mark-pop 220ms ease both;
}

.cell--winning {
	background: var(--winning);
	border-color: #d29b22;
	color: #3d321d;
	box-shadow: 0 0 0 3px rgba(245, 200, 91, 0.24);
	animation: winning-pulse 900ms ease-in-out infinite alternate;
}

#resetButton {
	display: block;
	width: 100%;
}

@keyframes reveal {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes mark-pop {
	from {
		opacity: 0;
		transform: scale(0.75);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes winning-pulse {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.025);
	}
}

@media (max-width: 420px) {
	body {
		padding: 1rem 0.75rem;
	}

	.game-container {
		padding: 1.5rem 1rem;
	}

	.scoreboard {
		gap: 0.5rem;
	}

	.player-card {
		padding: 0.6rem 0.5rem;
	}

	.player-mark {
		flex-basis: 1.75rem;
		width: 1.75rem;
		height: 1.75rem;
	}
}

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