/*
 * Dots & Boxes - web edition. Menu screens (owner: menus): main, setup, settings, howto.
 * Port of the UE Slate screens (SDBMainMenu / SDBSetupScreen / SDBSettingsScreen / SDBHowToPlay).
 *
 * Sizes use the shell's design units (--u = UE Slate units; see shell.css) and its type/metric tokens, which switch
 * with <html data-layout="wide|narrow">. The screen root also carries .mn-wide / .mn-narrow (DB.UI.isNarrow() at
 * build time). Colors come only from the theme custom properties set by DB.Themes.apply().
 * All class names are prefixed "mn-"; logical properties keep the layout right in RTL (Arabic) and LTR (English).
 */

/* ---------------------------------------------------------------------------------------------------- */
/* Screen root + tokens                                                                                   */
/* ---------------------------------------------------------------------------------------------------- */

.mn-screen {
	--mn-u: var(--u, 0.75px);
	--mn-fk: var(--fs-k, 1.3333); /* UE font points -> units (see shell.css) */
	--mn-side: calc(var(--mn-u) * 48);
	--mn-maxw: 1640;
	--mn-fs-title: var(--fs-title, calc(var(--mn-u) * 104));
	--mn-fs-h2: max(16px, var(--fs-h2, calc(var(--mn-u) * 34)));
	--mn-fs-body: max(14px, var(--fs-body, calc(var(--mn-u) * 24)));
	--mn-fs-small: max(12px, var(--fs-small, calc(var(--mn-u) * 19)));
	--mn-r-chip: var(--chip-r, calc(var(--mn-u) * 14));

	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: 0;
	color: var(--text);
	font-family: var(--font-body, 'Tajawal', 'Segoe UI', Tahoma, sans-serif);
}

.mn-screen.mn-narrow {
	--mn-side: calc(var(--mn-u) * 18);
}

.mn-screen [class*="mn-"],
.mn-screen [class*="mn-"]::before,
.mn-screen [class*="mn-"]::after {
	box-sizing: border-box;
}

.mn-screen p,
.mn-screen h1,
.mn-screen h2 {
	margin: 0;
}

/* Staggered entrance: 260 ms EaseOutCubic from +18 units / alpha 0 (delay set inline). */
.mn-enter {
	animation: mn-enter 260ms cubic-bezier(0.33, 1, 0.68, 1) var(--mn-d, 0s) backwards;
}

@keyframes mn-enter {
	from {
		opacity: 0;
		translate: 0 var(--mn-dist, calc(18 * var(--mn-u)));
	}
}

/* A screen rebuilt in place (language / theme / layout change) appears without replaying its entrance;
   elements added later (new player cards) still animate. */
.db-rebuilt .mn-enter:not(.mn-late) {
	animation: none;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Shared layout pieces                                                                                   */
/* ---------------------------------------------------------------------------------------------------- */

.mn-header {
	flex: none;
	width: 100%;
	max-width: calc(var(--mn-u) * var(--mn-maxw) + 2 * var(--mn-side));
	margin: 0 auto;
	padding: calc(var(--mn-u) * 28) var(--mn-side) calc(var(--mn-u) * 14);
}

.mn-narrow .mn-header {
	max-width: none;
	padding: calc(var(--mn-u) * 10) var(--mn-side) calc(var(--mn-u) * 8);
}

.mn-scroll-wrap {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.mn-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--text-muted) transparent;
	scrollbar-color: color-mix(in srgb, var(--text-muted) 35%, transparent) transparent;
}

.mn-scroll::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.mn-scroll::-webkit-scrollbar-track {
	background: transparent;
}

.mn-scroll::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: var(--text-muted);
	background: color-mix(in srgb, var(--text-muted) 35%, transparent);
}

.mn-scroll::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--text-muted) 65%, transparent);
}

/* Soft fade into the background at the bottom of a scroll area (content scrolls "under" the pinned bar). */
.mn-fade {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: calc(var(--mn-u) * 28);
	pointer-events: none;
	background: linear-gradient(to bottom, transparent, var(--bg-bottom));
	opacity: 0.85;
}

.mn-content {
	width: 100%;
	max-width: calc(var(--mn-u) * var(--mn-maxw) + 2 * var(--mn-side));
	margin: 0 auto;
	padding: calc(var(--mn-u) * 8) var(--mn-side) calc(var(--mn-u) * 36);
}

.mn-narrow .mn-content {
	max-width: calc(var(--mn-u) * 640 + 2 * var(--mn-side));
	padding: calc(var(--mn-u) * 4) var(--mn-side) calc(var(--mn-u) * 30);
}

/* Main action pinned under the scroll area (Narrow). */
.mn-pinned {
	flex: none;
	display: flex;
	justify-content: center;
	padding: calc(var(--mn-u) * 6) var(--mn-side) calc(var(--mn-u) * 16);
	padding-bottom: max(calc(var(--mn-u) * 16), env(safe-area-inset-bottom, 0px));
}

.mn-pinned > * {
	width: 100%;
	max-width: calc(var(--mn-u) * 460);
}

.mn-panel-cell {
	min-width: 0;
}

.mn-panel-cell > * {
	width: 100%;
}

.mn-sec {
	padding: 0 calc(var(--mn-u) * 4) calc(var(--mn-u) * 8);
}

.mn-fill > * {
	width: 100%;
	max-width: 100%;
}

.mn-muted-small {
	font-size: var(--mn-fs-small);
	color: var(--text-muted);
}

.mn-ico {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
}

.mn-ico svg {
	width: calc(var(--mn-u) * 26);
	height: calc(var(--mn-u) * 26);
	min-width: 16px;
	min-height: 16px;
}

/* Two buttons side by side when both labels fit, stacked otherwise (SDBAdaptivePair). */
.mn-pair {
	display: flex;
	gap: calc(var(--mn-u) * 12);
}

.mn-screen .mn-pair > * {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
}

.mn-screen .mn-pair.mn-stacked {
	flex-direction: column;
}

.mn-screen .mn-pair.mn-stacked > * {
	flex: none;
	width: 100%;
}

.mn-screen .mn-pair.mn-measure > * {
	flex: none !important;
	width: max-content !important;
	max-width: none !important;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Main menu                                                                                              */
/* ---------------------------------------------------------------------------------------------------- */

.mn-main {
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
}

.mn-main::-webkit-scrollbar {
	display: none;
}

/* Short landscape windows (e.g. a phone on its side): tighten the column so it fits without scrolling. */
@media (max-height: 520px) {
	.mn-wide .mn-main-center {
		padding-top: calc(var(--mn-u) * 16);
	}

	.mn-wide .mn-menu {
		margin-top: calc(var(--mn-u) * 32);
	}

	.mn-wide .mn-footer {
		padding-bottom: max(calc(var(--mn-u) * 12), env(safe-area-inset-bottom, 0px));
	}
}

.mn-main-top {
	flex: none;
	display: flex;
	justify-content: flex-end;
	padding: calc(var(--mn-u) * 12) calc(var(--mn-u) * 20) 0;
}

.mn-wide .mn-main-top {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	z-index: 2;
	padding: calc(var(--mn-u) * 32);
}

.mn-quick {
	display: flex;
	align-items: center;
	gap: calc(var(--mn-u) * 12);
}

.mn-screen .mn-quick-btn {
	flex: none;
	min-width: 0;
}

.mn-screen .mn-lang-btn {
	padding-inline: calc(var(--mn-u) * 22);
	font-size: var(--mn-fs-body);
}

.mn-main-center {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: calc(var(--mn-u) * 36) var(--mn-side) calc(var(--mn-u) * 16);
}

.mn-narrow .mn-main-center {
	padding: calc(var(--mn-u) * 8) calc(var(--mn-u) * 20);
}

/* Animated logo: the canvas extends beyond the box so the ambient glow is not clipped. */
.mn-logo {
	position: relative;
	flex: none;
	width: calc(var(--mn-u) * 230);
	height: calc(var(--mn-u) * 230);
}

.mn-narrow .mn-logo {
	width: calc(var(--mn-u) * 170);
	height: calc(var(--mn-u) * 170);
}

.mn-logo canvas {
	position: absolute;
	left: -35%;
	top: -35%;
	width: 170%;
	height: 170%;
	display: block;
	pointer-events: none;
}

.mn-title-block {
	position: relative;
	margin-top: calc(var(--mn-u) * 8);
	padding: 0 calc(var(--mn-u) * 12);
}

.mn-narrow .mn-title-block {
	margin-top: calc(var(--mn-u) * 4);
}

.mn-title {
	position: relative;
	font-family: var(--font-display, 'Lalezar', 'Tajawal', sans-serif);
	font-weight: 400;
	font-size: var(--mn-fs-title);
	line-height: 1.3;
	color: var(--text);
	text-shadow: 0 calc(var(--mn-u) * 4) 0 var(--shadow);
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.mn-narrow .mn-title {
	text-shadow: 0 calc(var(--mn-u) * 3) 0 var(--shadow);
}

/* Wide, soft, slowly breathing Accent glow behind the title (STitleGlow). */
.mn-title-glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.mn-glow-a,
.mn-glow-b {
	position: absolute;
	left: 50%;
	top: 50%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.mn-glow-a {
	width: 150%;
	height: 220%;
	opacity: 0.28;
	background: radial-gradient(closest-side, var(--accent), transparent);
	background: radial-gradient(closest-side,
		var(--accent) 0%,
		color-mix(in srgb, var(--accent) 70%, transparent) 40%,
		color-mix(in srgb, var(--accent) 41%, transparent) 60%,
		color-mix(in srgb, var(--accent) 13%, transparent) 80%,
		transparent 100%);
	animation: mn-breath-a 5.712s ease-in-out infinite;
}

.mn-glow-b {
	width: 80%;
	height: 130%;
	opacity: 0.13;
	background: radial-gradient(closest-side, var(--accent2), transparent);
	background: radial-gradient(closest-side,
		var(--accent2) 0%,
		color-mix(in srgb, var(--accent2) 70%, transparent) 40%,
		color-mix(in srgb, var(--accent2) 41%, transparent) 60%,
		color-mix(in srgb, var(--accent2) 13%, transparent) 80%,
		transparent 100%);
	animation: mn-breath-b 5.712s ease-in-out infinite;
}

@keyframes mn-breath-a {
	0%, 50%, 100% { opacity: 0.28; }
	25% { opacity: 0.32; }
	75% { opacity: 0.24; }
}

@keyframes mn-breath-b {
	0%, 50%, 100% { opacity: 0.13; transform: translate(-50%, -50%); }
	25% { opacity: 0.1; transform: translate(-42.5%, -50%); }
	75% { opacity: 0.16; transform: translate(-57.5%, -50%); }
}

.mn-subtitle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--mn-u) * 12);
	margin-top: calc(var(--mn-u) * 2);
}

.mn-narrow .mn-subtitle {
	gap: calc(var(--mn-u) * 10);
	margin-top: 0;
}

.mn-subtitle-text {
	font-weight: 700;
	font-size: var(--mn-fs-body);
	line-height: 1.35;
	color: var(--text-muted);
}

/* Small symmetric "-*-" ornament flanking the subtitle. */
.mn-orn {
	position: relative;
	flex: none;
	width: calc(var(--mn-u) * 44);
	height: 10px;
}

.mn-narrow .mn-orn {
	width: calc(var(--mn-u) * 28);
}

.mn-orn::before {
	content: '';
	position: absolute;
	inset-inline: 2px;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
	background: var(--accent);
	opacity: 0.45;
}

.mn-orn::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 7px;
	height: 7px;
	margin: -3.5px 0 0 -3.5px;
	border-radius: 50%;
	background: var(--accent);
}

.mn-menu {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: calc(var(--mn-u) * 16);
	width: calc(var(--mn-u) * 360);
	max-width: 100%;
	margin-top: calc(var(--mn-u) * 48);
}

.mn-narrow .mn-menu {
	width: 100%;
	max-width: calc(var(--mn-u) * 460);
	gap: calc(var(--mn-u) * 14);
	margin-top: calc(var(--mn-u) * 36);
}

.mn-screen .mn-menu > * {
	width: 100%;
	min-width: 0;
}

.mn-screen .mn-hero-btn {
	font-size: calc(var(--fs-button, calc(var(--mn-u) * 27)) + 2 * var(--mn-fk) * var(--mn-u));
}

.mn-footer {
	flex: none;
	text-align: center;
	white-space: pre-wrap;
	font-size: var(--mn-fs-small);
	line-height: 1.4;
	color: var(--text-muted);
	padding: calc(var(--mn-u) * 8) var(--mn-side) calc(var(--mn-u) * 24);
	padding-bottom: max(calc(var(--mn-u) * 24), env(safe-area-inset-bottom, 0px));
}

.mn-narrow .mn-footer {
	padding: calc(var(--mn-u) * 8) calc(var(--mn-u) * 20) calc(var(--mn-u) * 18);
	padding-bottom: max(calc(var(--mn-u) * 18), env(safe-area-inset-bottom, 0px));
}

/* ---------------------------------------------------------------------------------------------------- */
/* Match setup                                                                                            */
/* ---------------------------------------------------------------------------------------------------- */

.mn-setup {
	--mn-maxw: 1640;
}

.mn-setup-grid {
	display: flex;
	align-items: flex-start;
	gap: calc(var(--mn-u) * 28);
}

.mn-players-cell {
	flex: 1 1 0;
	min-width: 0;
}

.mn-board-col {
	flex: 0 0 calc(var(--mn-u) * 500);
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: calc(var(--mn-u) * 24);
}

.mn-screen .mn-start-cell > *,
.mn-screen .mn-start-btn {
	width: 100%;
	min-width: 0;
}

.mn-wide .mn-start-btn {
	font-size: calc(var(--fs-button, calc(var(--mn-u) * 27)) + 2 * var(--mn-fk) * var(--mn-u));
}

/* Players panel header (Wide): section label at the start, "Number of players" + [2][3][4] at the end. */
.mn-ph-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--mn-u) * 8) calc(var(--mn-u) * 14);
}

.mn-ph-label {
	flex: 1 1 auto;
	min-width: 0;
}

.mn-count {
	flex: none;
}

.mn-count-seg {
	min-width: calc(var(--mn-u) * 192);
}

.mn-wide .mn-count-seg {
	height: calc(var(--mn-u) * 48);
}

.mn-narrow .mn-count-seg {
	min-width: calc(var(--mn-u) * 174);
}

.mn-quick-presets {
	margin-top: calc(var(--mn-u) * 18);
}

.mn-narrow .mn-quick-presets {
	margin-top: calc(var(--mn-u) * 14);
}

.mn-screen .mn-preset-btn {
	min-width: 0;
	font-size: calc(var(--mn-u) * var(--mn-fk) * 22);
}

.mn-narrow .mn-preset-btn {
	font-size: max(12.5px, var(--fs-small, calc(var(--mn-u) * 17)));
}

/* Players panel row (Narrow). */
.mn-np-row {
	display: flex;
	align-items: center;
	gap: calc(var(--mn-u) * 12);
}

.mn-np-label {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 700;
	font-size: var(--mn-fs-body);
	line-height: 1.3;
	color: var(--text);
}

/* Player cards: 2 columns (Wide) / stacked (Narrow). A squarer wide window (4:3 tablet, 1024 x 768) has no room for
   two cards whose segmented labels stay readable: the cards then stack instead of cutting "ذكاء اصطناعي" short. */
.mn-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--mn-u) * 430)), 1fr));
	gap: calc(var(--mn-u) * 16);
	margin-top: calc(var(--mn-u) * 22);
}

.mn-narrow .mn-cards {
	grid-template-columns: minmax(0, 1fr);
	gap: calc(var(--mn-u) * 14);
	margin-top: calc(var(--mn-u) * 14);
}

.mn-pcard {
	--mn-pc: var(--accent);
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: calc(var(--mn-u) * 18);
	border-radius: calc(var(--mn-u) * 22);
	border: 1.5px solid var(--mn-pc);
	border-color: color-mix(in srgb, var(--mn-pc) 90%, transparent);
	background: var(--panel);
	transition: border-color 0.2s ease;
}

.mn-narrow .mn-pcard {
	padding: calc(var(--mn-u) * 16);
	border-radius: calc(var(--mn-u) * 16);
	box-shadow: 0 calc(var(--mn-u) * 10) calc(var(--mn-u) * 24) var(--shadow);
}

.mn-pcard-head {
	display: flex;
	align-items: flex-end;
	gap: calc(var(--mn-u) * 14);
}

/* Glowing avatar circle in the player's color: initial for named humans, person / robot icon otherwise. */
.mn-avatar {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--mn-u) * 52);
	height: calc(var(--mn-u) * 52);
	min-width: 34px;
	min-height: 34px;
	border-radius: 50%;
	color: #fff;
	background: var(--mn-pc);
	box-shadow: 0 0 calc(var(--mn-u) * 24) var(--mn-pc);
	box-shadow: 0 0 calc(var(--mn-u) * 24) color-mix(in srgb, var(--mn-pc) 45%, transparent);
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.mn-avatar::before {
	content: '';
	position: absolute;
	left: 20%;
	top: 5%;
	width: 60%;
	height: 60%;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
}

.mn-avatar svg {
	position: relative;
	width: 54%;
	height: 54%;
	color: #fff;
}

.mn-avatar-initial {
	position: relative;
	font-weight: 800;
	font-size: max(15px, calc(var(--mn-u) * var(--mn-fk) * 23));
	line-height: 1;
	color: #fff;
}

.mn-namecol {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.mn-name-label {
	padding: 0 calc(var(--mn-u) * 2) calc(var(--mn-u) * 6);
	font-weight: 700;
	font-size: var(--mn-fs-small);
	line-height: 1.3;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mn-name-input {
	display: block;
	width: 100%;
	min-width: 0;
	height: max(40px, calc(var(--mn-u) * 46));
	margin: 0;
	padding: 0 calc(var(--mn-u) * 14);
	border: 1.5px solid var(--panel-border);
	border-radius: var(--mn-r-chip);
	background: var(--control);
	color: var(--text);
	font-family: inherit;
	font-weight: 700;
	font-size: max(16px, var(--mn-fs-body));   /* >= 16px: no iOS zoom on focus */
	line-height: 1.2;
	text-align: start;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.mn-narrow .mn-name-input {
	height: max(44px, calc(var(--mn-u) * 52));
}

.mn-name-input::placeholder {
	color: var(--text-muted);
	opacity: 0.75;
}

@media (hover: hover) and (pointer: fine) {
	.mn-name-input:hover {
		border-color: var(--text-muted);
		border-color: color-mix(in srgb, var(--text-muted) 70%, transparent);
	}
}

.mn-screen .mn-name-input:focus,
.mn-screen .mn-name-input:focus-visible {
	border-color: var(--accent);
	outline: none;
	box-shadow: 0 0 0 1px var(--accent);
}

.mn-pcard-type {
	margin-top: calc(var(--mn-u) * 14);
}

.mn-wide .mn-type-seg {
	height: calc(var(--mn-u) * 46);
}

.mn-pcard-diff {
	margin-top: calc(var(--mn-u) * 10);
}

.mn-wide .mn-diff-seg {
	height: calc(var(--mn-u) * 44);
}

.mn-diff-seg {
	--fs-seg: calc(var(--mn-u) * var(--mn-fk) * 19);
}

.mn-narrow .mn-diff-seg {
	--fs-seg: calc(var(--mn-u) * var(--mn-fk) * 17);
}

.mn-pcard-diff[hidden] {
	display: none;
}

/* Palette swatches, evenly spread over the card width, aligned at the bottom of equal-height cards. */
.mn-swatches {
	margin-top: auto;
	padding-top: calc(var(--mn-u) * 16);
}

.mn-swatch-row {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	justify-items: center;
	align-items: center;
}

/* Board panel. */
.mn-step-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--mn-u) * 16);
	margin-top: calc(var(--mn-u) * 12);
}

.mn-step-row.mn-step-first {
	margin-top: calc(var(--mn-u) * 18);
}

.mn-step-label {
	min-width: 0;
	font-weight: 700;
	font-size: var(--mn-fs-body);
	line-height: 1.3;
	color: var(--text);
}

.mn-stepper {
	flex: none;
	min-width: 0;
}

.mn-steppers {
	display: flex;
	gap: calc(var(--mn-u) * 10);
}

.mn-step-col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--mn-u) * 8);
}

.mn-step-col .mn-stepper {
	max-width: 100%;
}

.mn-step-col .mn-stepper > * {
	width: calc(var(--mn-u) * 176);
	max-width: 100%;
}

.mn-step-col .mn-step-label {
	font-size: var(--mn-fs-small);
	color: var(--text-muted);
	text-align: center;
}

.mn-sub-label {
	margin: calc(var(--mn-u) * 22) 0 calc(var(--mn-u) * 10);
	padding-inline: calc(var(--mn-u) * 2);
	font-weight: 700;
	font-size: var(--mn-fs-small);
	color: var(--text-muted);
}

.mn-narrow .mn-sub-label {
	margin-top: calc(var(--mn-u) * 20);
}

.mn-wide .mn-preset-seg {
	height: calc(var(--mn-u) * 48);
	--fs-seg: calc(var(--mn-u) * var(--mn-fk) * 21);
}

.mn-narrow .mn-preset-seg {
	--fs-seg: max(12px, calc(var(--mn-u) * var(--mn-fk) * 17));
}

.mn-preview {
	position: relative;
	flex: none;
	width: calc(var(--mn-u) * 220);
	height: calc(var(--mn-u) * 220);
	margin: calc(var(--mn-u) * 26) auto 0;
}

.mn-preview canvas,
.mn-theme-pv canvas,
.mn-rule-art canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.mn-summary {
	margin-top: calc(var(--mn-u) * 14);
	text-align: center;
	font-weight: 700;
	font-size: var(--mn-fs-body);
	line-height: 1.35;
	color: var(--text);
}

.mn-prev-row {
	display: flex;
	align-items: center;
	gap: calc(var(--mn-u) * 18);
	margin-top: calc(var(--mn-u) * 20);
}

.mn-narrow .mn-preview {
	width: calc(var(--mn-u) * 150);
	height: calc(var(--mn-u) * 150);
	margin: 0;
}

.mn-screen.mn-narrow .mn-summary {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	text-align: start;
}

.mn-sec-board {
	margin-top: calc(var(--mn-u) * 28);
}

/* ---------------------------------------------------------------------------------------------------- */
/* Settings                                                                                               */
/* ---------------------------------------------------------------------------------------------------- */

.mn-settings {
	--mn-maxw: 1480;
}

.mn-set-grid {
	display: flex;
	align-items: flex-start;
	gap: calc(var(--mn-u) * 28);
}

.mn-set-display {
	flex: 1.45 1 0;
}

.mn-set-side {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: calc(var(--mn-u) * 28);
}

.mn-narrow .mn-set-grid {
	flex-direction: column;
	align-items: stretch;
	gap: calc(var(--mn-u) * 18);
}

.mn-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--mn-u) * 14);
}

.mn-row-label {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: calc(var(--mn-u) * 14);
	font-weight: 700;
	font-size: var(--mn-fs-body);
	line-height: 1.3;
	color: var(--text);
}

.mn-row-label-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

.mn-row-ctl {
	flex: none;
}

.mn-lang-row {
	margin-top: calc(var(--mn-u) * 16);
}

.mn-lang-seg {
	min-width: calc(var(--mn-u) * 280);
}

.mn-wide .mn-lang-seg {
	height: calc(var(--mn-u) * 48);
}

.mn-narrow .mn-lang-seg {
	min-width: calc(var(--mn-u) * 208);
}

.mn-theme-row {
	margin: calc(var(--mn-u) * 26) 0 calc(var(--mn-u) * 14);
}

.mn-theme-current {
	flex: none;
	font-weight: 700;
	font-size: var(--mn-fs-small);
	color: var(--accent);
}

/* Theme gallery: 3 cards per row (Wide) / 2 (Narrow). */
.mn-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: calc(var(--mn-u) * 14);
}

.mn-narrow .mn-gallery {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(var(--mn-u) * 12);
}

.mn-theme-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: calc(var(--mn-r-chip) + var(--mn-u) * 6);
	background: var(--control);
	box-shadow: inset 0 0 0 1.5px var(--panel-border);
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, background-color 0.12s ease-out;
}

.mn-theme-card.is-selected {
	box-shadow:
		inset 0 0 0 3px var(--accent),
		0 0 calc(var(--mn-u) * 26) var(--accent);
	box-shadow:
		inset 0 0 0 3px var(--accent),
		0 0 calc(var(--mn-u) * 26) color-mix(in srgb, var(--accent) 30%, transparent);
}

@media (hover: hover) and (pointer: fine) {
	.mn-theme-card:hover {
		transform: scale(1.025);
		background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05));
		box-shadow: inset 0 0 0 1.5px var(--text-muted);
		box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text-muted) 60%, var(--panel-border));
	}

	.mn-theme-card.is-selected:hover {
		box-shadow:
			inset 0 0 0 3px var(--accent),
			0 0 calc(var(--mn-u) * 26) color-mix(in srgb, var(--accent) 30%, transparent);
	}
}

.mn-theme-card:active {
	transform: scale(0.97);
}

.mn-screen .mn-theme-card:focus-visible {
	outline: max(2px, calc(var(--mn-u) * 3)) solid var(--accent2);
	outline-offset: 3px;
}

.mn-theme-pv {
	position: relative;
	display: block;
	margin: calc(var(--mn-u) * 8) calc(var(--mn-u) * 8) 0;
	aspect-ratio: 2 / 1;
	border-radius: var(--mn-r-chip);
	overflow: hidden;
}

@supports not (aspect-ratio: 2 / 1) {
	.mn-theme-pv {
		height: 0;
		padding-top: 50%;
	}
}

.mn-theme-foot {
	display: flex;
	align-items: center;
	gap: calc(var(--mn-u) * 8);
	min-height: calc(var(--mn-u) * 44);
	padding-block: calc(var(--mn-u) * 8) calc(var(--mn-u) * 10);
	padding-inline: calc(var(--mn-u) * 12) calc(var(--mn-u) * 10);
}

.mn-theme-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 700;
	font-size: max(12.5px, calc(var(--mn-fs-small) + var(--mn-u) * var(--mn-fk)));
	line-height: 1.3;
	color: var(--text-muted);
}

.mn-theme-card.is-selected .mn-theme-name {
	color: var(--text);
}

.mn-check {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--mn-u) * 24);
	height: calc(var(--mn-u) * 24);
	min-width: 18px;
	min-height: 18px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--button-text);
}

.mn-check svg {
	width: 72%;
	height: 72%;
	stroke-width: 3;
}

/* Full-width tappable settings row with a toggle at the end (STapRow). */
.mn-toggle-row {
	min-height: calc(var(--mn-u) * 56);
	margin-inline: calc(var(--mn-u) * -12);
	padding: calc(var(--mn-u) * 4) calc(var(--mn-u) * 12);
	border-radius: var(--mn-r-chip);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.12s ease;
}

.mn-narrow .mn-toggle-row {
	min-height: max(48px, calc(var(--mn-u) * 60));
}

@media (hover: hover) and (pointer: fine) {
	.mn-toggle-row:hover {
		background: var(--control);
		background: color-mix(in srgb, var(--control) 55%, transparent);
	}
}

.mn-toggle-row:active {
	background: var(--control);
}

.mn-toggle-holder {
	flex: none;
	display: flex;
	align-items: center;
}

.mn-fs-row {
	margin-top: calc(var(--mn-u) * 18);
}

.mn-speed-label {
	margin: calc(var(--mn-u) * 16) 0 calc(var(--mn-u) * 12);
}

.mn-wide .mn-speed-seg {
	height: calc(var(--mn-u) * 48);
	--fs-seg: calc(var(--mn-u) * var(--mn-fk) * 21);
}

.mn-narrow .mn-speed-seg {
	--fs-seg: max(12.5px, calc(var(--mn-u) * var(--mn-fk) * 18));
}

.mn-hints-row {
	margin-top: calc(var(--mn-u) * 16);
}

.mn-confirm-row,
.mn-chat-row {
	margin-top: calc(var(--mn-u) * 4);
}

.mn-sound-row {
	margin-top: calc(var(--mn-u) * 12);
}

.mn-vol {
	margin-top: calc(var(--mn-u) * 14);
	transition: opacity 0.2s ease;
}

.mn-vol.is-dim {
	opacity: 0.45;
}

.mn-vol-pct {
	flex: none;
	font-weight: 700;
	font-size: var(--mn-fs-body);
	color: var(--accent);
	direction: ltr;
	unicode-bidi: isolate;
}

.mn-vol-slider {
	padding: calc(var(--mn-u) * 16) calc(var(--mn-u) * 4) calc(var(--mn-u) * 6);
}

/* ---------------------------------------------------------------------------------------------------- */
/* How to play                                                                                            */
/* ---------------------------------------------------------------------------------------------------- */

.mn-howto {
	--mn-maxw: 1560;
}

.mn-rules {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(var(--mn-u) * 28);
}

.mn-narrow .mn-rules {
	grid-template-columns: minmax(0, 1fr);
	gap: calc(var(--mn-u) * 16);
}

.mn-rule-cell {
	display: flex;
}

.mn-rule-cell > * {
	flex: 1 1 auto;
}

.mn-rule-in {
	display: flex;
	align-items: center;
	gap: calc(var(--mn-u) * 26);
}

.mn-narrow .mn-rule-in {
	flex-direction: column;
	align-items: stretch;
	gap: calc(var(--mn-u) * 14);
}

.mn-rule-art {
	position: relative;
	flex: none;
	width: calc(var(--mn-u) * 232);
	height: calc(var(--mn-u) * 178);
}

.mn-narrow .mn-rule-art {
	width: 100%;
	height: calc(var(--mn-u) * 150);
}

.mn-rule-text {
	flex: 1 1 auto;
	min-width: 0;
}

.mn-rule-title {
	display: flex;
	align-items: center;
	gap: calc(var(--mn-u) * 12);
	font-weight: 700;
	font-size: var(--mn-fs-h2);
	line-height: 1.3;
	color: var(--text);
}

.mn-rule-title-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Numbered Accent circle (rule number). */
.mn-badge {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--mn-u) * 40);
	height: calc(var(--mn-u) * 40);
	min-width: 24px;
	min-height: 24px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--button-text);
	font-weight: 800;
	font-size: max(13px, calc(var(--mn-u) * var(--mn-fk) * 20));
	line-height: 1;
	box-shadow: 0 0 calc(var(--mn-u) * 20) var(--accent);
	box-shadow: 0 0 calc(var(--mn-u) * 20) color-mix(in srgb, var(--accent) 35%, transparent);
}

.mn-narrow .mn-badge {
	width: calc(var(--mn-u) * 36);
	height: calc(var(--mn-u) * 36);
	font-size: max(13px, calc(var(--mn-u) * var(--mn-fk) * 18));
}

.mn-rule-body {
	margin-top: calc(var(--mn-u) * 12);
	padding-inline-start: calc(var(--mn-u) * 2);
	font-size: var(--mn-fs-body);
	line-height: 1.5;
	color: var(--text-muted);
}

.mn-narrow .mn-rule-body {
	margin-top: calc(var(--mn-u) * 10);
	padding-inline: calc(var(--mn-u) * 2);
}

.mn-how-bottom {
	display: flex;
	align-items: center;
	gap: calc(var(--mn-u) * 28);
	margin-top: calc(var(--mn-u) * 28);
}

.mn-controls-cell {
	flex: 1 1 auto;
	min-width: 0;
}

.mn-narrow .mn-controls-cell {
	margin-top: calc(var(--mn-u) * 16);
}

.mn-how-play {
	flex: 0 0 calc(var(--mn-u) * 320);
	min-width: 0;
}

.mn-screen .mn-how-play > *,
.mn-screen .mn-howto-play {
	width: 100%;
	min-width: 0;
}

.mn-controls-in {
	display: flex;
	align-items: center;
	gap: calc(var(--mn-u) * 16);
}

.mn-controls-icon {
	flex: none;
	display: inline-flex;
	color: var(--accent);
}

.mn-controls-icon svg {
	width: calc(var(--mn-u) * 30);
	height: calc(var(--mn-u) * 30);
	min-width: 18px;
	min-height: 18px;
}

.mn-controls-text {
	flex: 1 1 auto;
	min-width: 0;
}

.mn-controls-title {
	font-weight: 700;
	font-size: var(--mn-fs-body);
	line-height: 1.3;
	color: var(--text);
}

.mn-controls-body {
	margin-top: calc(var(--mn-u) * 4);
	font-size: var(--mn-fs-small);
	line-height: 1.45;
	color: var(--text-muted);
}

/* ---------------------------------------------------------------------------------------------------- */
/* Reduced motion                                                                                         */
/* ---------------------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.mn-enter,
	.mn-glow-a,
	.mn-glow-b {
		animation: none !important;
	}

	.mn-theme-card,
	.mn-toggle-row,
	.mn-name-input,
	.mn-pcard,
	.mn-avatar,
	.mn-vol {
		transition: none !important;
	}

	.mn-theme-card:hover,
	.mn-theme-card:active {
		transform: none !important;
	}
}

/* ---- Settings: privacy & terms links, child note ---- */

.mn-legal {
	display: flex;
	flex-wrap: wrap;
	gap: calc(10 * var(--u));
	margin-top: calc(14 * var(--u));
}

.mn-legal-link {
	flex: 1 1 calc(160 * var(--u));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: max(44px, calc(52 * var(--u)));
	padding: 0 calc(16 * var(--u));
	border-radius: var(--chip-r);
	border: 1.5px solid var(--panel-border);
	background: var(--secondary);
	color: var(--text);
	font-weight: 700;
	font-size: max(13.5px, var(--fs-small));
	text-decoration: none;
	text-align: center;
}

.mn-legal-link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.mn-note {
	margin: calc(14 * var(--u)) 0 0;
	color: var(--text-muted);
	font-size: max(13px, var(--fs-small));
	line-height: 1.45;
}

@media (hover: hover) {
	.mn-legal-link:hover {
		border-color: var(--accent);
	}
}