@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap");
:root {
	--ink: #202c2a;
	--muted: #71807a;
	--paper: #f6f5ef;
	--card: #fffefa;
	--line: #dfe3db;
	--teal: #1d766e;
	--teal-dark: #155c56;
	--coral: #ef785f;
	--yellow: #f5c767;
	--shadow: 0 24px 60px rgba(37, 54, 48, 0.09);
}
* {
	box-sizing: border-box;
	margin: 0;
}
body {
	min-height: 100vh;
	color: var(--ink);
	background: var(--paper);
	font-family: "Manrope", sans-serif;
}
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	opacity: 0.34;
	background-image: radial-gradient(#bfcac1 0.7px, transparent 0.7px);
	background-size: 18px 18px;
}
button,
input {
	font: inherit;
}
button {
	cursor: pointer;
}
.app-shell {
	position: relative;
	display: grid;
	grid-template-columns: 255px minmax(0, 1fr);
	max-width: 1440px;
	min-height: 100vh;
	margin: auto;
}
.player-rail {
	display: flex;
	flex-direction: column;
	padding: 38px 28px 28px;
	border-right: 1px solid var(--line);
	background: rgba(246, 245, 239, 0.78);
}
.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ink);
	text-decoration: none;
	font-size: 18px;
	letter-spacing: -0.7px;
}
.brand strong {
	font-weight: 800;
}
.brand-mark {
	display: grid;
	place-items: center;
	width: 35px;
	height: 35px;
	color: white;
	background: var(--teal);
	border-radius: 10px 10px 10px 3px;
	font-size: 18px;
	font-weight: 800;
}
.brand-mark span {
	color: var(--yellow);
}
.profile-block {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 76px 0 46px;
}
.avatar {
	display: grid;
	place-items: center;
	width: 41px;
	height: 41px;
	color: var(--teal-dark);
	background: #d7e8df;
	border-radius: 50%;
	font-weight: 800;
}
.profile-block h2 {
	font-size: 13px;
	font-weight: 700;
}
.eyebrow {
	color: var(--muted);
	font:
		500 10px "DM Mono",
		monospace;
	letter-spacing: 1.3px;
}
.accent {
	color: var(--coral);
}
.rail-nav {
	display: grid;
	gap: 8px;
}
.rail-nav a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 13px;
	color: var(--muted);
	border-radius: 8px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
}
.rail-nav a.active,
.rail-nav a:hover {
	color: var(--teal-dark);
	background: #e1eee7;
}
.nav-icon {
	width: 18px;
	color: var(--coral);
	font-size: 21px;
	line-height: 14px;
}
.rail-tip {
	margin-top: auto;
	padding: 16px;
	border: 1px solid #e5d9b8;
	border-radius: 8px;
	background: #fff8df;
}
.tip-icon {
	color: var(--coral);
	font-size: 20px;
}
.rail-tip p {
	margin-top: 8px;
	color: #837653;
	font-size: 11px;
	line-height: 1.6;
}
.rail-tip strong {
	color: var(--ink);
}
.creator-link {
	margin-top: 26px;
	color: var(--muted);
	text-decoration: none;
	font:
		10px "DM Mono",
		monospace;
}
.creator-link span {
	color: var(--coral);
}
.workspace {
	padding: 38px clamp(28px, 5vw, 78px) 24px;
}
.topbar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.topbar h1 {
	margin-top: 7px;
	font-size: clamp(27px, 3vw, 39px);
	line-height: 1.1;
	letter-spacing: -1.7px;
}
.topbar-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}
.icon-button {
	width: 35px;
	height: 35px;
	color: var(--muted);
	border: 1px solid var(--line);
	border-radius: 50%;
	background: transparent;
}
.icon-button:hover {
	color: var(--teal);
	border-color: var(--teal);
}
.date-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: 9px;
	color: var(--muted);
	font:
		10px "DM Mono",
		monospace;
}
.live-dot {
	width: 7px;
	height: 7px;
	background: var(--coral);
	border-radius: 50%;
}
.mode-switcher {
	display: flex;
	gap: 4px;
	width: fit-content;
	margin: 38px 0 25px;
	padding: 4px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #eceee7;
}
.mode-button {
	min-width: 120px;
	padding: 9px 15px;
	color: var(--muted);
	border: 0;
	border-radius: 5px;
	background: transparent;
	text-align: left;
}
.mode-button span,
.mode-button small {
	display: block;
}
.mode-button span {
	font-size: 12px;
	font-weight: 800;
}
.mode-button small {
	margin-top: 2px;
	font-size: 9px;
}
.mode-button.active {
	color: var(--teal-dark);
	background: var(--card);
	box-shadow: 0 2px 5px rgba(34, 47, 42, 0.08);
}
.dashboard-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 235px;
	gap: 22px;
	align-items: start;
}
.game-card,
.stat-card {
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--card);
	box-shadow: var(--shadow);
}
.game-card {
	min-height: 590px;
	padding: clamp(24px, 4vw, 43px);
}
.card-header {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}
.round-copy {
	margin-top: 8px;
	color: var(--muted);
	font-size: 12px;
}
.difficulty-pill {
	align-self: start;
	padding: 7px 10px;
	color: #a26a1c;
	background: #fff0c7;
	border-radius: 4px;
	font:
		500 10px "DM Mono",
		monospace;
}
.timer-wrap {
	margin: 36px 0 21px;
}
.timer-label {
	display: flex;
	justify-content: space-between;
	color: var(--muted);
	font:
		10px "DM Mono",
		monospace;
}
.timer-label strong {
	color: var(--coral);
	font-weight: 500;
}
.timer-track,
.focus-track {
	height: 5px;
	margin-top: 10px;
	overflow: hidden;
	border-radius: 4px;
	background: #e8ebe4;
}
.timer-track span,
.focus-track span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: var(--coral);
	transition: width 1s linear;
}
.scramble-zone {
	padding: 29px 20px 27px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	text-align: center;
}
.scramble-label {
	color: var(--muted);
	font:
		10px "DM Mono",
		monospace;
	letter-spacing: 1.5px;
}
.word {
	min-height: 62px;
	margin: 20px 0 14px;
	color: var(--teal-dark);
	font-size: clamp(33px, 5vw, 57px);
	font-weight: 800;
	letter-spacing: clamp(7px, 1.2vw, 18px);
	line-height: 1.1;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}
.word-meta {
	color: var(--muted);
	font:
		10px "DM Mono",
		monospace;
}
.dot-separator {
	margin: 0 7px;
	color: var(--coral);
}
.hint-row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	color: var(--muted);
	font-size: 11px;
}
.hint-icon {
	display: grid;
	place-items: center;
	width: 19px;
	height: 19px;
	color: white;
	background: var(--coral);
	border-radius: 50%;
	font-size: 12px;
	font-weight: 800;
}
.hint-row p {
	flex: 1;
}
.text-button {
	color: var(--teal);
	border: 0;
	background: transparent;
	font-size: 10px;
	font-weight: 800;
	white-space: nowrap;
}
.text-button span {
	color: var(--coral);
}
.text-button:disabled {
	color: #adb7b0;
	cursor: not-allowed;
}
.answer-form label {
	display: block;
	margin-bottom: 8px;
	color: var(--muted);
	font:
		10px "DM Mono",
		monospace;
	text-transform: uppercase;
}
.answer-row {
	display: flex;
	gap: 9px;
}
.answer-row input {
	min-width: 0;
	flex: 1;
	height: 48px;
	padding: 0 15px;
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 5px;
	outline: none;
	background: #fcfcf7;
	font-size: 13px;
}
.answer-row input:focus {
	border-color: var(--teal);
	box-shadow: 0 0 0 3px rgba(29, 118, 110, 0.1);
}
.answer-row input.correct {
	border-color: var(--teal);
	background: #e5f2ea;
}
.answer-row input.incorrect {
	border-color: var(--coral);
	background: #fff0ed;
}
.submit-button {
	min-width: 105px;
	color: white;
	border: 0;
	border-radius: 5px;
	background: var(--teal);
	font-size: 12px;
	font-weight: 800;
}
.submit-button:hover {
	background: var(--teal-dark);
}
.submit-button span {
	margin-left: 7px;
	color: var(--yellow);
	font-size: 16px;
}
.message {
	min-height: 22px;
	padding-top: 10px;
	color: var(--teal);
	font-size: 11px;
	font-weight: 700;
}
.message.error {
	color: var(--coral);
}
.card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 9px;
}
.secondary-button {
	padding: 0;
	color: var(--muted);
	border: 0;
	background: none;
	font-size: 11px;
}
.secondary-button:hover {
	color: var(--coral);
}
.secondary-button span {
	margin-left: 5px;
	color: var(--coral);
}
.shortcut {
	color: #a5ada7;
	font-size: 10px;
}
kbd {
	padding: 3px 5px;
	border: 1px solid var(--line);
	border-radius: 3px;
	background: #f1f2ec;
	font:
		10px "DM Mono",
		monospace;
}
.stats-column {
	display: grid;
	gap: 13px;
}
.stat-card {
	padding: 20px;
	box-shadow: none;
}
.score-card {
	color: white;
	border-color: var(--teal);
	background: var(--teal);
}
.score-card .eyebrow {
	color: #acd4c6;
}
.score-card > strong {
	display: block;
	margin: 13px 0 2px;
	font-size: 39px;
	letter-spacing: -2px;
}
.score-change {
	color: #bde2d4;
	font-size: 10px;
}
.score-combo {
	margin-top: 8px;
	color: #f9f3d0;
	font:
		700 10px "DM Mono",
		sans-serif;
	letter-spacing: 0.12em;
	transition:
		transform 0.2s ease,
		filter 0.2s ease;
}
.combo-pop {
	transform: scale(1.12);
	filter: drop-shadow(0 0 10px rgba(255, 242, 160, 0.7));
}
.stat-heading {
	display: flex;
	justify-content: space-between;
}
.stat-icon {
	color: var(--coral);
	font-size: 20px;
}
.metric {
	display: flex;
	justify-content: space-between;
	padding: 14px 0 0;
	color: var(--muted);
	font-size: 11px;
}
.metric strong {
	color: var(--ink);
}
.leaderboard-card {
	padding-bottom: 12px;
}
.leaderboard-list {
	margin: 14px 0 0;
	padding-left: 18px;
	color: var(--ink);
	font-size: 11px;
}
.leaderboard-list li {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 5px 0;
	border-bottom: 1px dashed var(--line);
}
.leaderboard-list li:last-child {
	border-bottom: 0;
}
.leaderboard-list span {
	color: var(--muted);
}
.leaderboard-list strong {
	flex: 1;
	text-align: right;
}
.leaderboard-list small {
	color: var(--muted);
}
.focus-card {
	position: relative;
	overflow: hidden;
}
.focus-mark {
	position: absolute;
	top: 15px;
	right: 17px;
	color: var(--yellow);
}
.focus-card > strong {
	display: block;
	margin: 15px 0 3px;
	font-size: 27px;
}
.focus-track {
	height: 6px;
	margin: 0 0 13px;
}
.focus-track span {
	background: var(--yellow);
	transition: width 0.4s ease;
}
.focus-card p:last-child {
	color: var(--muted);
	font-size: 10px;
	line-height: 1.5;
}
.workspace-footer {
	display: flex;
	justify-content: space-between;
	margin-top: 29px;
	color: #a5ada7;
	font:
		9px "DM Mono",
		monospace;
	letter-spacing: 0.8px;
}
body.warm-mode {
	--paper: #f4eee8;
	--card: #fffaf5;
	--line: #e5d8cd;
	--ink: #302926;
	--teal: #a44f3b;
	--teal-dark: #803b2e;
}
.shake {
	animation: shake 0.35s linear;
}
@keyframes shake {
	25% {
		transform: translateX(-5px);
	}
	75% {
		transform: translateX(5px);
	}
}
@media (max-width: 900px) {
	.app-shell {
		grid-template-columns: 1fr;
	}
	.player-rail {
		display: block;
		padding: 20px 24px;
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}
	.profile-block,
	.rail-tip,
	.creator-link {
		display: none;
	}
	.rail-nav {
		display: none;
	}
	.workspace {
		padding: 31px 24px 22px;
	}
}
@media (max-width: 620px) {
	.topbar h1 {
		font-size: 28px;
	}
	.topbar-actions .icon-button {
		display: none;
	}
	.date-chip {
		margin-left: 0;
	}
	.mode-switcher {
		width: 100%;
	}
	.mode-button {
		min-width: 0;
		flex: 1;
	}
	.dashboard-grid {
		grid-template-columns: 1fr;
	}
	.game-card {
		min-height: 0;
		padding: 23px 18px 25px;
	}
	.word {
		letter-spacing: 6px;
		font-size: 35px;
	}
	.answer-row {
		flex-direction: column;
	}
	.submit-button {
		height: 45px;
	}
	.stats-column {
		grid-template-columns: repeat(2, 1fr);
	}
	.score-card,
	.focus-card {
		grid-column: span 2;
	}
	.workspace-footer {
		font-size: 8px;
	}
}