/**
 * Matematik Hız Oyunları
 * Main Public Styles
 *
 * @package Matematik_Hiz_Oyunlari
 */

/* =========================================================
   ROOT / BASE
   ========================================================= */

.mho-app {
	--mho-primary: #2563eb;
	--mho-primary-dark: #1d4ed8;
	--mho-primary-soft: #eff6ff;

	--mho-purple: #7c3aed;
	--mho-purple-dark: #6d28d9;

	--mho-green: #16a34a;
	--mho-green-dark: #15803d;
	--mho-green-soft: #f0fdf4;

	--mho-red: #dc2626;
	--mho-red-dark: #b91c1c;
	--mho-red-soft: #fef2f2;

	--mho-orange: #ea580c;
	--mho-orange-soft: #fff7ed;

	--mho-yellow: #ca8a04;
	--mho-yellow-soft: #fefce8;

	--mho-slate-950: #0f172a;
	--mho-slate-900: #172033;
	--mho-slate-800: #1e293b;
	--mho-slate-700: #334155;
	--mho-slate-600: #475569;
	--mho-slate-500: #64748b;
	--mho-slate-400: #94a3b8;
	--mho-slate-300: #cbd5e1;
	--mho-slate-200: #e2e8f0;
	--mho-slate-100: #f1f5f9;
	--mho-slate-50: #f8fafc;

	--mho-white: #ffffff;

	width: 100%;
	max-width: 1120px;
	margin: 30px auto;
	padding: 0;
	box-sizing: border-box;

	font-family:
		Inter,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Arial,
		sans-serif;

	color: var(--mho-slate-900);
	line-height: 1.5;
}

.mho-app *,
.mho-app *::before,
.mho-app *::after {
	box-sizing: border-box;
}

.mho-app button,
.mho-app input {
	font: inherit;
}

.mho-app button {
	cursor: pointer;
}

/* =========================================================
   MAIN SHELL
   ========================================================= */

.mho-shell {
	position: relative;
	overflow: hidden;

	background:
		radial-gradient(
			circle at 0% 0%,
			rgba(37, 99, 235, 0.08),
			transparent 28%
		),
		radial-gradient(
			circle at 100% 5%,
			rgba(124, 58, 237, 0.08),
			transparent 25%
		),
		#ffffff;

	border: 1px solid var(--mho-slate-200);
	border-radius: 26px;

	box-shadow:
		0 24px 60px rgba(15, 23, 42, 0.09),
		0 4px 14px rgba(15, 23, 42, 0.04);
}

/* =========================================================
   HEADER
   ========================================================= */

.mho-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;

	padding: 24px 30px;

	background: rgba(255, 255, 255, 0.94);

	border-bottom: 1px solid var(--mho-slate-200);
}

.mho-brand {
	display: flex;
	align-items: center;
	gap: 14px;
}

.mho-brand-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 52px;
	height: 52px;
	flex: 0 0 52px;

	border-radius: 15px;

	background: linear-gradient(
		135deg,
		var(--mho-primary),
		var(--mho-purple)
	);

	color: #ffffff;

	font-size: 27px;
	font-weight: 900;

	box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22);
}

.mho-brand-text {
	min-width: 0;
}

.mho-title {
	margin: 0 !important;
	padding: 0 !important;

	color: var(--mho-slate-950) !important;

	font-size: 24px !important;
	line-height: 1.2 !important;
	font-weight: 800 !important;
}

.mho-subtitle {
	margin: 4px 0 0 !important;

	color: var(--mho-slate-600) !important;

	font-size: 14px !important;
	line-height: 1.5 !important;
}

.mho-player-mini {
	display: flex;
	align-items: center;
	gap: 8px;

	padding: 9px 13px;

	background: var(--mho-slate-50);
	border: 1px solid var(--mho-slate-200);
	border-radius: 12px;
}

.mho-player-mini-label {
	color: var(--mho-slate-500);
	font-size: 12px;
}

.mho-player-mini-name {
	color: var(--mho-slate-900);
	font-size: 14px;
}

/* =========================================================
   SCREENS
   ========================================================= */

.mho-screen {
	padding: 34px 30px 38px;
}

.mho-screen[hidden] {
	display: none !important;
}

/* =========================================================
   INTRO
   ========================================================= */

.mho-screen-intro {
	min-height: 460px;

	display: flex;
	align-items: center;
	justify-content: center;
}

.mho-intro-card {
	width: min(100%, 660px);
	margin: 0 auto;

	padding: 42px 38px;

	text-align: center;

	background: rgba(255, 255, 255, 0.96);

	border: 1px solid var(--mho-slate-200);
	border-radius: 24px;

	box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.mho-intro-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 82px;
	height: 82px;

	margin: 0 auto 18px;

	border-radius: 24px;

	background: linear-gradient(
		135deg,
		#dbeafe,
		#ede9fe
	);

	font-size: 40px;
}

.mho-intro-card h3 {
	margin: 0 0 10px !important;

	color: var(--mho-slate-950) !important;

	font-size: 30px !important;
	font-weight: 850 !important;
	line-height: 1.2 !important;
}

.mho-intro-card > p {
	max-width: 520px;
	margin: 0 auto 28px !important;

	color: var(--mho-slate-600) !important;

	font-size: 15px !important;
	line-height: 1.7 !important;
}

/* =========================================================
   NICKNAME
   ========================================================= */

.mho-nickname-area {
	text-align: left;
}

.mho-input-label {
	display: block;
	margin-bottom: 8px;

	color: var(--mho-slate-800);

	font-size: 14px;
	font-weight: 750;
}

.mho-input-group {
	display: flex;
	gap: 10px;
}

.mho-nickname-input {
	flex: 1;
	min-width: 0;

	height: 50px;

	padding: 0 16px !important;

	background: #ffffff !important;

	border: 2px solid var(--mho-slate-300) !important;
	border-radius: 13px !important;

	color: var(--mho-slate-950) !important;

	font-size: 15px !important;
	font-weight: 600 !important;

	outline: none !important;

	box-shadow: none !important;

	transition:
		border-color 0.18s ease,
		box-shadow 0.18s ease;
}

.mho-nickname-input::placeholder {
	color: var(--mho-slate-400) !important;
}

.mho-nickname-input:focus {
	border-color: var(--mho-primary) !important;

	box-shadow:
		0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}

.mho-field-message {
	min-height: 21px;

	margin: 8px 0 0 !important;

	color: var(--mho-red) !important;

	font-size: 13px !important;
	font-weight: 650 !important;
}

/* =========================================================
   BUTTONS - IMPORTANT READABILITY RULES
   ========================================================= */

/*
 * Buton yazıları özellikle !important ile sabitlenmiştir.
 * Tema CSS'lerinin normal durumda yazıyı açık/görünmez
 * hale getirmesini önler.
 */

.mho-primary-button,
.mho-submit-button {
	min-height: 48px;

	padding: 12px 20px !important;

	background: var(--mho-primary) !important;

	border: 2px solid var(--mho-primary) !important;
	border-radius: 12px !important;

	color: #ffffff !important;

	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;

	text-decoration: none !important;

	box-shadow: 0 6px 16px rgba(37, 99, 235, 0.20) !important;

	transition:
		transform 0.16s ease,
		background 0.16s ease,
		border-color 0.16s ease,
		box-shadow 0.16s ease !important;
}

.mho-primary-button:hover,
.mho-primary-button:focus,
.mho-submit-button:hover,
.mho-submit-button:focus {
	background: var(--mho-primary-dark) !important;
	border-color: var(--mho-primary-dark) !important;

	color: #ffffff !important;

	transform: translateY(-1px);

	box-shadow: 0 9px 22px rgba(37, 99, 235, 0.27) !important;
}

.mho-secondary-button,
.mho-next-button {
	min-height: 48px;

	padding: 12px 20px !important;

	background: #ffffff !important;

	border: 2px solid var(--mho-slate-300) !important;
	border-radius: 12px !important;

	color: var(--mho-slate-900) !important;

	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;

	text-decoration: none !important;

	box-shadow: none !important;

	transition:
		background 0.16s ease,
		border-color 0.16s ease,
		color 0.16s ease,
		transform 0.16s ease !important;
}

.mho-secondary-button:hover,
.mho-secondary-button:focus,
.mho-next-button:hover,
.mho-next-button:focus {
	background: var(--mho-slate-100) !important;
	border-color: var(--mho-slate-400) !important;

	color: var(--mho-slate-950) !important;

	transform: translateY(-1px);
}

.mho-primary-button:disabled,
.mho-submit-button:disabled,
.mho-next-button:disabled,
.mho-secondary-button:disabled {
	opacity: 0.55 !important;
	cursor: not-allowed !important;
	transform: none !important;
}

/* =========================================================
   GAME SELECT SCREEN
   ========================================================= */

.mho-section-heading {
	max-width: 720px;
	margin: 0 auto 25px;
	text-align: center;
}

.mho-section-eyebrow {
	display: inline-flex;

	margin-bottom: 8px;

	color: var(--mho-primary);

	font-size: 12px;
	font-weight: 850;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mho-section-heading h3 {
	margin: 0 0 7px !important;

	color: var(--mho-slate-950) !important;

	font-size: 27px !important;
	line-height: 1.25 !important;
	font-weight: 850 !important;
}

.mho-section-heading p {
	margin: 0 !important;

	color: var(--mho-slate-600) !important;

	font-size: 14px !important;
	line-height: 1.6 !important;
}

/* =========================================================
   GAME BUTTONS
   ========================================================= */

.mho-game-tabs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;

	margin: 0 auto 26px;
}

.mho-game-tab {
	position: relative;

	display: flex !important;
	align-items: center !important;
	gap: 14px !important;

	width: 100% !important;
	min-height: 112px !important;

	padding: 18px !important;

	text-align: left !important;

	background: #ffffff !important;

	border: 2px solid var(--mho-slate-200) !important;
	border-radius: 18px !important;

	color: var(--mho-slate-900) !important;

	box-shadow:
		0 7px 20px rgba(15, 23, 42, 0.06) !important;

	transition:
		transform 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.18s ease,
		background 0.18s ease !important;
}

/*
 * NORMAL durumda yazılar koyu.
 * Hover beklemeye gerek yok.
 */
.mho-game-tab,
.mho-game-tab span,
.mho-game-tab strong {
	color: var(--mho-slate-900) !important;
}

.mho-game-tab:hover,
.mho-game-tab:focus {
	background: var(--mho-primary-soft) !important;

	border-color: var(--mho-primary) !important;

	color: var(--mho-slate-950) !important;

	transform: translateY(-3px);

	box-shadow:
		0 13px 30px rgba(37, 99, 235, 0.14) !important;
}

.mho-game-tab:hover span,
.mho-game-tab:hover strong,
.mho-game-tab:focus span,
.mho-game-tab:focus strong {
	color: var(--mho-slate-950) !important;
}

.mho-game-tab-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 52px;
	height: 52px;
	flex: 0 0 52px;

	background: var(--mho-slate-100);

	border-radius: 15px;

	font-size: 25px !important;
}

.mho-game-tab-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.mho-game-tab-title {
	display: block;

	margin-bottom: 4px;

	color: var(--mho-slate-950) !important;

	font-size: 16px !important;
	line-height: 1.25 !important;
	font-weight: 850 !important;
}

.mho-game-tab-description {
	display: block;

	color: var(--mho-slate-600) !important;

	font-size: 12px !important;
	line-height: 1.45 !important;
	font-weight: 550 !important;
}

.mho-game-tab-arrow {
	color: var(--mho-slate-500) !important;

	font-size: 28px !important;
	font-weight: 700 !important;

	transition: transform 0.18s ease;
}

.mho-game-tab:hover .mho-game-tab-arrow {
	transform: translateX(3px);
}

/* =========================================================
   RULES
   ========================================================= */

.mho-rules-box {
	padding: 20px;

	background: var(--mho-slate-50);

	border: 1px solid var(--mho-slate-200);
	border-radius: 18px;
}

.mho-rules-box h4 {
	margin: 0 0 14px !important;

	color: var(--mho-slate-900) !important;

	font-size: 15px !important;
	font-weight: 800 !important;
}

.mho-score-rule-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 9px;
}

.mho-score-rule {
	padding: 12px 8px;

	background: #ffffff;

	border: 1px solid var(--mho-slate-200);
	border-radius: 11px;

	text-align: center;
}

.mho-score-rule strong,
.mho-score-rule span {
	display: block;
}

.mho-score-rule strong {
	margin-bottom: 3px;

	color: var(--mho-slate-800);

	font-size: 12px;
}

.mho-score-rule span {
	color: var(--mho-green);
	font-size: 12px;
	font-weight: 800;
}

.mho-score-rule.is-wrong span {
	color: var(--mho-red);
}

.mho-score-rule.is-timeout span {
	color: var(--mho-slate-500);
}

/* =========================================================
   ACTIVE GAME TOP BAR
   ========================================================= */

.mho-game-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;

	margin-bottom: 18px;
}

.mho-game-info {
	display: flex;
	align-items: center;
	gap: 11px;
}

.mho-active-game-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 46px;
	height: 46px;

	background: var(--mho-primary-soft);

	border-radius: 13px;

	font-size: 22px;
}

.mho-small-label {
	display: block;

	margin-bottom: 2px;

	color: var(--mho-slate-500);

	font-size: 11px;
}

.mho-active-game-title {
	display: block;

	color: var(--mho-slate-950);

	font-size: 16px;
	font-weight: 850;
}

.mho-live-stats {
	display: flex;
	gap: 8px;
}

.mho-stat {
	min-width: 82px;

	padding: 8px 12px;

	background: #ffffff;

	border: 1px solid var(--mho-slate-200);
	border-radius: 11px;

	text-align: center;
}

.mho-stat-label {
	display: block;

	color: var(--mho-slate-500);

	font-size: 10px;
	font-weight: 650;
}

.mho-stat-value {
	display: block;

	margin-top: 1px;

	color: var(--mho-slate-950);

	font-size: 17px;
	font-weight: 850;
}

/* =========================================================
   PROGRESS
   ========================================================= */

.mho-progress-area {
	margin-bottom: 22px;
}

.mho-progress-header {
	display: flex;
	align-items: center;
	justify-content: space-between;

	margin-bottom: 7px;

	color: var(--mho-slate-600);

	font-size: 11px;
	font-weight: 700;
}

.mho-progress-track {
	overflow: hidden;

	width: 100%;
	height: 8px;

	background: var(--mho-slate-200);

	border-radius: 999px;
}

.mho-progress-fill {
	width: 10%;
	height: 100%;

	background: linear-gradient(
		90deg,
		var(--mho-primary),
		var(--mho-purple)
	);

	border-radius: inherit;

	transition: width 0.3s ease;
}

/* =========================================================
   TIMER
   ========================================================= */

.mho-timer-area {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;

	margin: 2px 0 21px;
}

.mho-timer-circle {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 94px;
	height: 94px;
	flex: 0 0 94px;

	padding: 6px;

	border-radius: 50%;

	background: conic-gradient(
		var(--mho-green) 0deg,
		var(--mho-green) 360deg
	);

	box-shadow: 0 7px 20px rgba(22, 163, 74, 0.15);
}

.mho-timer-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	background: #ffffff;

	border-radius: 50%;
}

.mho-timer-number {
	color: var(--mho-slate-950);

	font-size: 28px;
	line-height: 1;
	font-weight: 900;
}

.mho-timer-unit {
	margin-top: 3px;

	color: var(--mho-slate-500);

	font-size: 9px;
	font-weight: 700;
}

.mho-timer-circle.is-warning {
	box-shadow: 0 7px 20px rgba(234, 88, 12, 0.19);
}

.mho-timer-circle.is-danger {
	box-shadow: 0 7px 22px rgba(220, 38, 38, 0.23);
}

.mho-timer-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.mho-live-score-badge {
	display: inline-flex;
	align-items: center;

	padding: 7px 11px;

	background: var(--mho-green-soft);

	border: 1px solid #bbf7d0;
	border-radius: 999px;

	color: var(--mho-green-dark);

	font-size: 12px;
	font-weight: 850;
}

.mho-timer-hint {
	max-width: 300px;

	color: var(--mho-slate-500);

	font-size: 11px;
	line-height: 1.45;
}

/* =========================================================
   QUESTION CARD
   ========================================================= */

.mho-question-card {
	max-width: 830px;
	margin: 0 auto;

	padding: 26px;

	background: #ffffff;

	border: 1px solid var(--mho-slate-200);
	border-radius: 20px;

	box-shadow: 0 13px 35px rgba(15, 23, 42, 0.07);
}

.mho-question-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;

	margin-bottom: 15px;
}

.mho-question-type {
	display: inline-flex;

	padding: 6px 10px;

	background: var(--mho-primary-soft);

	border-radius: 999px;

	color: var(--mho-primary-dark);

	font-size: 10px;
	font-weight: 850;
}

.mho-question-number {
	color: var(--mho-slate-500);

	font-size: 11px;
	font-weight: 700;
}

.mho-question-text {
	margin: 0 0 8px !important;

	color: var(--mho-slate-950) !important;

	font-size: 23px !important;
	line-height: 1.4 !important;
	font-weight: 850 !important;

	text-align: center;
}

.mho-question-instruction {
	margin: 0 0 22px !important;

	color: var(--mho-slate-500) !important;

	font-size: 12px !important;
	line-height: 1.5 !important;

	text-align: center;
}

/* =========================================================
   ANSWER AREA
   ========================================================= */

.mho-answer-area {
	margin: 0 auto 20px;
}

/* Multiple choice */

.mho-options-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 11px;
}

.mho-option-button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 100% !important;
	min-height: 58px !important;

	padding: 12px 15px !important;

	background: #ffffff !important;

	border: 2px solid var(--mho-slate-300) !important;
	border-radius: 13px !important;

	color: var(--mho-slate-950) !important;

	font-size: 16px !important;
	font-weight: 800 !important;

	box-shadow: none !important;

	transition:
		border-color 0.15s ease,
		background 0.15s ease,
		transform 0.15s ease !important;
}

.mho-option-button:hover,
.mho-option-button:focus {
	background: var(--mho-primary-soft) !important;

	border-color: var(--mho-primary) !important;

	color: var(--mho-slate-950) !important;

	transform: translateY(-1px);
}

.mho-option-button.is-selected {
	background: #dbeafe !important;

	border-color: var(--mho-primary) !important;

	color: #1e3a8a !important;
}

.mho-option-button.is-correct {
	background: var(--mho-green-soft) !important;

	border-color: var(--mho-green) !important;

	color: #14532d !important;
}

.mho-option-button.is-wrong {
	background: var(--mho-red-soft) !important;

	border-color: var(--mho-red) !important;

	color: #7f1d1d !important;
}

/* Number input */

.mho-number-answer-wrap {
	max-width: 380px;
	margin: 0 auto;
}

.mho-number-answer {
	width: 100%;
	height: 62px;

	padding: 0 18px !important;

	background: #ffffff !important;

	border: 2px solid var(--mho-slate-300) !important;
	border-radius: 14px !important;

	color: var(--mho-slate-950) !important;

	font-size: 22px !important;
	font-weight: 850 !important;

	text-align: center !important;

	outline: none !important;

	box-shadow: none !important;
}

.mho-number-answer:focus {
	border-color: var(--mho-primary) !important;

	box-shadow:
		0 0 0 4px rgba(37, 99, 235, 0.11) !important;
}

/* Checkbox / multi-select */

.mho-multi-options {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.mho-check-option {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	min-height: 56px;

	padding: 10px;

	background: #ffffff;

	border: 2px solid var(--mho-slate-300);
	border-radius: 12px;

	color: var(--mho-slate-950);

	font-size: 16px;
	font-weight: 800;

	cursor: pointer;

	user-select: none;
}

.mho-check-option:hover {
	border-color: var(--mho-primary);
	background: var(--mho-primary-soft);
}

.mho-check-option input {
	position: absolute;

	width: 1px;
	height: 1px;

	opacity: 0;
}

.mho-check-option.is-selected {
	background: #dbeafe;

	border-color: var(--mho-primary);

	color: #1e3a8a;
}

/* =========================================================
   DRAG AND DROP
   ========================================================= */

.mho-drag-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px;
}

.mho-drag-source,
.mho-drop-zone {
	padding: 16px;

	border-radius: 15px;
}

.mho-drag-source {
	background: var(--mho-slate-50);

	border: 1px solid var(--mho-slate-200);
}

.mho-drag-label {
	display: block;

	margin-bottom: 10px;

	color: var(--mho-slate-600);

	font-size: 11px;
	font-weight: 800;

	text-align: center;
}

.mho-drag-items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 9px;

	min-height: 48px;
}

.mho-drag-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 52px;
	min-height: 46px;

	padding: 8px 13px;

	background: #ffffff;

	border: 2px solid var(--mho-primary);
	border-radius: 11px;

	color: var(--mho-slate-950);

	font-size: 16px;
	font-weight: 850;

	cursor: grab;

	box-shadow: 0 4px 10px rgba(37, 99, 235, 0.08);

	user-select: none;

	transition:
		transform 0.14s ease,
		box-shadow 0.14s ease;
}

.mho-drag-item:hover {
	transform: translateY(-2px);

	box-shadow: 0 7px 15px rgba(37, 99, 235, 0.14);
}

.mho-drag-item:active {
	cursor: grabbing;
}

.mho-drag-item.is-dragging {
	opacity: 0.45;
}

.mho-drop-zone {
	min-height: 94px;

	background: var(--mho-primary-soft);

	border: 2px dashed #60a5fa;

	transition:
		background 0.16s ease,
		border-color 0.16s ease;
}

.mho-drop-zone.is-over {
	background: #dbeafe;
	border-color: var(--mho-primary);
}

.mho-drop-zone .mho-drag-items {
	min-height: 55px;
}

/* =========================================================
   QUESTION ACTIONS
   ========================================================= */

.mho-question-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	margin-top: 18px;
}

.mho-submit-button,
.mho-next-button {
	min-width: 170px;
}

/* =========================================================
   FEEDBACK
   ========================================================= */

.mho-answer-feedback {
	display: flex;
	align-items: center;
	gap: 12px;

	margin-top: 18px;

	padding: 14px 16px;

	background: var(--mho-green-soft);

	border: 1px solid #bbf7d0;
	border-radius: 14px;
}

.mho-answer-feedback[hidden] {
	display: none !important;
}

.mho-answer-feedback.is-wrong {
	background: var(--mho-red-soft);
	border-color: #fecaca;
}

.mho-answer-feedback.is-timeout {
	background: var(--mho-slate-50);
	border-color: var(--mho-slate-300);
}

.mho-feedback-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;
	flex: 0 0 38px;

	background: var(--mho-green);

	border-radius: 50%;

	color: #ffffff;

	font-size: 19px;
	font-weight: 900;
}

.mho-answer-feedback.is-wrong .mho-feedback-icon {
	background: var(--mho-red);
}

.mho-answer-feedback.is-timeout .mho-feedback-icon {
	background: var(--mho-slate-500);
}

.mho-feedback-content {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.mho-feedback-content strong {
	color: var(--mho-slate-950);
	font-size: 14px;
}

.mho-feedback-content span {
	margin-top: 2px;

	color: var(--mho-slate-600);
	font-size: 11px;
}

.mho-feedback-score {
	color: var(--mho-green-dark);

	font-size: 19px;
	font-weight: 900;
}

.mho-answer-feedback.is-wrong .mho-feedback-score {
	color: var(--mho-red);
}

.mho-answer-feedback.is-timeout .mho-feedback-score {
	color: var(--mho-slate-600);
}

/* =========================================================
   RESULT SCREEN
   ========================================================= */

.mho-screen-result {
	min-height: 490px;

	display: flex;
	align-items: center;
	justify-content: center;
}

.mho-result-card {
	width: min(100%, 690px);
	margin: 0 auto;

	padding: 36px;

	background: #ffffff;

	border: 1px solid var(--mho-slate-200);
	border-radius: 24px;

	text-align: center;

	box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.mho-result-emoji {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 82px;
	height: 82px;

	margin: 0 auto 14px;

	background: linear-gradient(
		135deg,
		#fef3c7,
		#ffedd5
	);

	border-radius: 24px;

	font-size: 40px;
}

.mho-result-label {
	display: block;

	margin-bottom: 5px;

	color: var(--mho-primary);

	font-size: 11px;
	font-weight: 850;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.mho-result-title {
	margin: 0 0 8px !important;

	color: var(--mho-slate-950) !important;

	font-size: 28px !important;
	line-height: 1.25 !important;
	font-weight: 900 !important;
}

.mho-result-player {
	margin: 0 0 19px !important;

	color: var(--mho-slate-600) !important;

	font-size: 13px !important;
}

.mho-result-player strong {
	color: var(--mho-slate-950);
}

.mho-final-score-box {
	display: inline-flex;
	flex-direction: column;
	align-items: center;

	min-width: 185px;

	padding: 17px 28px;

	background: var(--mho-primary-soft);

	border: 1px solid #bfdbfe;
	border-radius: 18px;
}

.mho-final-score-box span {
	color: var(--mho-slate-600);

	font-size: 11px;
	font-weight: 700;
}

.mho-final-score-box strong {
	margin: 2px 0;

	color: var(--mho-primary-dark);

	font-size: 41px;
	line-height: 1;
	font-weight: 950;
}

.mho-final-score-box small {
	color: var(--mho-slate-500);
	font-size: 10px;
}

.mho-result-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;

	max-width: 460px;
	margin: 22px auto;
}

.mho-result-stat {
	display: flex;
	flex-direction: column;
	align-items: center;

	padding: 12px;

	background: var(--mho-slate-50);

	border: 1px solid var(--mho-slate-200);
	border-radius: 13px;
}

.mho-result-stat > span {
	font-size: 17px;
	font-weight: 900;
}

.mho-result-stat strong {
	margin: 2px 0;

	color: var(--mho-slate-950);

	font-size: 21px;
	line-height: 1;
	font-weight: 900;
}

.mho-result-stat small {
	color: var(--mho-slate-500);

	font-size: 10px;
	font-weight: 700;
}

.mho-result-stat.is-correct > span {
	color: var(--mho-green);
}

.mho-result-stat.is-wrong > span {
	color: var(--mho-red);
}

.mho-result-stat.is-timeout > span {
	color: var(--mho-slate-500);
}

.mho-result-message {
	max-width: 560px;
	margin: 0 auto 22px;

	padding: 14px 18px;

	background: var(--mho-slate-50);

	border-radius: 13px;
}

.mho-result-message p {
	margin: 0 !important;

	color: var(--mho-slate-700) !important;

	font-size: 13px !important;
	line-height: 1.6 !important;
	font-weight: 650 !important;
}

.mho-result-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* =========================================================
   TOAST
   ========================================================= */

.mho-toast {
	position: fixed;
	z-index: 999999;

	right: 24px;
	bottom: 24px;

	display: flex;
	align-items: center;
	gap: 9px;

	max-width: 360px;

	padding: 13px 16px;

	background: var(--mho-slate-950);

	border-radius: 12px;

	color: #ffffff;

	box-shadow: 0 14px 38px rgba(15, 23, 42, 0.24);
}

.mho-toast[hidden] {
	display: none !important;
}

.mho-toast-icon {
	font-weight: 900;
}

.mho-toast-text {
	font-size: 12px;
	font-weight: 650;
}

/* =========================================================
   POWERED BY PHMATH
   JS WILL INSERT THIS AT THE BOTTOM OF THE GAME
   ========================================================= */

.mho-powered-by {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;

	padding: 13px 20px 16px;

	border-top: 1px solid var(--mho-slate-100);

	color: var(--mho-slate-500);

	font-size: 11px;
	font-weight: 600;

	text-align: center;
}

.mho-powered-by span {
	color: var(--mho-slate-500);
}

.mho-powered-by a {
	display: inline-flex;
	align-items: center;

	color: var(--mho-primary-dark) !important;

	font-size: 11px !important;
	font-weight: 850 !important;

	text-decoration: none !important;

	transition:
		color 0.15s ease,
		transform 0.15s ease;
}

.mho-powered-by a:hover,
.mho-powered-by a:focus {
	color: var(--mho-purple-dark) !important;

	text-decoration: underline !important;

	transform: translateY(-1px);
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.mho-app button:focus-visible,
.mho-app input:focus-visible,
.mho-powered-by a:focus-visible {
	outline: 3px solid rgba(37, 99, 235, 0.30) !important;
	outline-offset: 3px !important;
}

.mho-app [hidden] {
	display: none !important;
}