:root {
	--color-signal: #f68d1f;
	--color-amber: #ecab37;
	--color-error: #e6362e;
	--color-canvas: #7a8aba;
	--color-canvas-soft: #c7d4ec;
	--color-chrome-indigo: #3d4f97;
	--color-carbon: #21242e;
	--color-surface: #ffffff;
	--color-ink: #21242e;
	--color-on-dark: #ffffff;
	--color-success: #2fae63;

	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 12px;
	--space-lg: 16px;
	--space-xl: 24px;
	--space-xxl: 32px;

	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-full: 9999px;

	--font-display: "Press Start 2P", "Arial Black", sans-serif;
	--font-body: system-ui, "Segoe UI", Arial, sans-serif;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	min-height: 100%;
}

body {
	font-family: var(--font-body);
	background: var(--color-canvas);
	color: var(--color-ink);
	display: flex;
	justify-content: center;
}

.app {
	width: 100%;
	max-width: 600px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--color-canvas);
}

.status-bar {
	background: var(--color-carbon);
	color: var(--color-on-dark);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-md) var(--space-lg);
	font-family: var(--font-display);
	font-size: clamp(10px, 3vw, 13px);
	letter-spacing: 0.5px;
}

.level-progress {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin: var(--space-md) var(--space-lg) 0;
	padding: var(--space-xs) var(--space-md);
	background: var(--color-carbon);
	border-radius: var(--radius-full);
}

.level-progress-track {
	position: relative;
	flex: 1;
	height: 8px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-full);
	overflow: hidden;
}

.level-progress-fill {
	height: 100%;
	background: var(--color-signal);
	width: 0%;
	transition: width 300ms ease;
}

.level-progress-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--color-on-dark);
	white-space: nowrap;
}

.level-tabs {
	display: flex;
	gap: var(--space-sm);
	padding: var(--space-md) var(--space-lg) 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.level-tab {
	flex: 0 0 auto;
	padding: var(--space-sm) var(--space-md);
	border: none;
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12px;
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 0 var(--color-chrome-indigo);
}

.level-tab.active {
	background: var(--color-signal);
	color: var(--color-on-dark);
}

.level-tab.locked {
	opacity: 0.5;
	cursor: not-allowed;
}

.level-tab:disabled {
	cursor: not-allowed;
}

.word-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: var(--space-xl) var(--space-lg);
	padding: var(--space-xxl) var(--space-lg);
	background: var(--color-canvas-soft);
	border-radius: var(--radius-lg);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.5) inset, 0 3px 0 var(--color-chrome-indigo);
	min-height: 30vh;
}

.prompt {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: clamp(32px, 9vw, 56px);
	color: var(--color-ink);
	text-align: center;
	word-break: break-word;
}

.translation,
.phrase {
	text-align: center;
	color: var(--color-chrome-indigo);
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition: opacity 250ms ease;
}

.translation.revealed,
.phrase.revealed {
	opacity: 1;
	max-height: 60px;
	margin-top: var(--space-sm);
}

.translation {
	font-size: 14px;
	font-weight: 700;
	font-style: italic;
}

.phrase {
	font-size: 13px;
	font-weight: 400;
}

.word-card.shake {
	animation: card-shake 400ms ease;
}

@keyframes card-shake {
	0%,
	100% {
		transform: translateX(0);
	}
	20% {
		transform: translateX(-8px);
	}
	40% {
		transform: translateX(8px);
	}
	60% {
		transform: translateX(-8px);
	}
	80% {
		transform: translateX(8px);
	}
}

.buttons {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: 0 var(--space-lg) var(--space-xxl);
}

@media (min-width: 480px) {
	.buttons {
		flex-direction: row;
	}
}

.article-button {
	flex: 1;
	min-height: 64px;
	border: none;
	border-radius: var(--radius-md);
	background: var(--color-surface);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.7) inset, 0 3px 0 var(--color-chrome-indigo);
	transition: transform 120ms ease, background-color 120ms ease, color 120ms ease;
}

.article-button:disabled {
	cursor: default;
}

.article-button.correct {
	background: var(--color-success);
	color: var(--color-on-dark);
	animation: bounce 500ms ease;
}

.article-button.incorrect {
	background: var(--color-error);
	color: var(--color-on-dark);
	animation: shake 400ms ease;
}

.article-button.reveal-correct {
	animation: pulse 800ms ease 2;
}

@keyframes bounce {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.08);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes shake {
	0%,
	100% {
		transform: translateX(0);
	}
	20% {
		transform: translateX(-6px);
	}
	40% {
		transform: translateX(6px);
	}
	60% {
		transform: translateX(-6px);
	}
	80% {
		transform: translateX(6px);
	}
}

@keyframes pulse {
	0%,
	100% {
		background: var(--color-surface);
	}
	50% {
		background: var(--color-success);
		color: var(--color-on-dark);
	}
}

.toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 16px);
	background: var(--color-carbon);
	color: var(--color-on-dark);
	padding: var(--space-md) var(--space-lg);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-weight: 700;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease, transform 200ms ease;
}

.toast.visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.toast.milestone {
	background: var(--color-signal);
	font-size: 18px;
}

.screen-flash {
	position: fixed;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	z-index: 40;
}

.screen-flash.flash-correct {
	background: radial-gradient(circle, rgba(47, 174, 99, 0.35), transparent 70%);
	animation: flash-in-out 500ms ease;
}

.screen-flash.flash-incorrect {
	background: radial-gradient(circle, transparent 55%, rgba(230, 54, 46, 0.35));
	animation: flash-in-out 450ms ease;
}

@keyframes flash-in-out {
	0% {
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.confetti-layer {
	position: fixed;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 50;
}

.confetti-piece {
	position: absolute;
	top: -20px;
	width: 8px;
	height: 14px;
	opacity: 0.95;
	animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: translateY(105vh) rotate(540deg);
		opacity: 0;
	}
}

.hidden {
	display: none !important;
}

.hint-button {
	align-self: center;
	margin: var(--space-sm) auto 0;
	padding: var(--space-xs) var(--space-md);
	border: none;
	border-radius: var(--radius-full);
	background: transparent;
	color: var(--color-on-dark);
	opacity: 0.6;
	font-family: var(--font-body);
	font-size: 15px;
	cursor: pointer;
	transition: opacity 120ms ease, transform 120ms ease;
}

.hint-button:hover {
	opacity: 1;
	transform: scale(1.08);
}

.share-button {
	align-self: center;
	margin: var(--space-md) var(--space-lg) var(--space-xl);
	padding: var(--space-sm) var(--space-lg);
	border: none;
	border-radius: var(--radius-md);
	background: var(--color-carbon);
	color: var(--color-on-dark);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.15) inset, 0 3px 0 var(--color-chrome-indigo);
}