/**
 * Start / login page – Agar Deluxe
 * See branding.md for design tokens.
 * Theme: data-theme="dark" (default) | data-theme="light"
 */

/* Design tokens – dark (default): dark blue/charcoal + blue primary */
#startMenuWrapper {
	--brand-bg: #1a202c;
	--brand-bg-muted: #252b38;
	--brand-card: #2d3748;
	--brand-card-border: #4a5568;
	--brand-primary: #0ea5e9;
	--brand-primary-hover: #38bdf8;
	--brand-muted: #718096;
	--brand-foreground: #f7fafc;
	--brand-border: #4a5568;
	--brand-input-bg: #2d3748;
	--brand-destructive: #ef4444;
	--brand-radius-sm: 2px;
	--brand-radius-md: 3px;
	--brand-radius-lg: 4px;
}

/* Light theme tokens */
#startMenuWrapper[data-theme="light"] {
	--brand-bg: #f0f9ff;
	--brand-bg-muted: #e0f2fe;
	--brand-card: #ffffff;
	--brand-card-border: #bae6fd;
	--brand-primary: #0284c7;
	--brand-primary-hover: #0ea5e9;
	--brand-muted: #64748b;
	--brand-foreground: #0f172a;
	--brand-border: #94a3b8;
	--brand-input-bg: #ffffff;
	--brand-destructive: #dc2626;
	background-color: #f0f9ff;
	background-image: linear-gradient(155deg, rgba(224, 242, 254, 0.88) 0%, rgba(240, 249, 255, 0.88) 35%, rgba(255, 255, 255, 0.88) 70%, rgba(224, 242, 254, 0.88) 100%);
	background-repeat: no-repeat;
	background-size: auto;
	background-position: 0 0;
}

#startMenuWrapper[data-theme="light"]::before {
	background:
		radial-gradient(ellipse 75% 45% at 50% -15%, rgba(2, 132, 199, 0.15), transparent 55%),
		radial-gradient(ellipse 50% 35% at 90% 90%, rgba(14, 165, 233, 0.1), transparent 50%);
}

#startMenuWrapper {
	position: fixed;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #1a202c;
	background-image: linear-gradient(155deg, rgba(26, 32, 44, 0.9) 0%, rgba(30, 41, 59, 0.9) 25%, rgba(26, 32, 44, 0.9) 50%, rgba(37, 43, 56, 0.9) 75%, rgba(26, 32, 44, 0.9) 100%);
	background-repeat: no-repeat;
	background-size: auto;
	background-position: 0 0;
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	overflow-x: hidden;
	overflow-y: auto;
	transition: max-height 1s ease, opacity 0.3s ease;
}

#startMenuWrapper::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 50% at 50% -20%, rgba(14, 165, 233, 0.2), transparent 50%),
		radial-gradient(ellipse 60% 40% at 85% 80%, rgba(2, 132, 199, 0.15), transparent 45%);
	pointer-events: none;
}

/* Background decorations: grid (back) + food + viruses (front), each with parallax */
.start-page__bg-deco {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

/* Grid layer – behind all, own parallax */
.start-page__bg-grid {
	position: absolute;
	inset: -20%;
	z-index: 0;
	opacity: 0.12;
	background-image:
		linear-gradient(to right, rgba(14, 165, 233, 0.4) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(14, 165, 233, 0.4) 1px, transparent 1px);
	background-size: 48px 48px;
	will-change: transform;
}

#startMenuWrapper[data-theme="light"] .start-page__bg-grid {
	opacity: 0.22;
	background-image:
		linear-gradient(to right, rgba(2, 132, 199, 0.5) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(2, 132, 199, 0.5) 1px, transparent 1px);
}

.start-page__bg-virus {
	position: absolute;
	z-index: 2;
	object-fit: contain;
	will-change: transform;
}

.start-page__bg-virus--1 { left: 8%;  top: 18%;  width: 20vw; height: auto; max-width: 200px; }
.start-page__bg-virus--2 { left: 75%; top: 12%;  width: 18vw; height: auto; max-width: 180px; }
.start-page__bg-virus--3 { right: 22%; bottom: 35%; width: 16vw; height: auto; max-width: 160px; }
.start-page__bg-virus--4 { left: 12%; bottom: 25%; width: 14vw; height: auto; max-width: 140px; }
.start-page__bg-virus--5 { left: 50%; top: 8%;   width: 12vw; height: auto; max-width: 120px; }

/* Food-like particles – behind viruses, separate parallax */
.start-page__bg-food {
	position: absolute;
	z-index: 1;
	border-radius: 50%;
	background: hsl(var(--hue, 0), 100%, 52%);
	box-shadow:
		inset -0.15em -0.15em 0.2em hsl(var(--hue, 0), 100%, 38%),
		inset 0.1em 0.1em 0.2em hsla(255, 100%, 100%, 0.35),
		0 0 0 1px hsl(var(--hue, 0), 100%, 40%);
	will-change: transform;
}

.start-page__bg-food--1 { left: 15%; top: 22%; width: 14px; height: 14px; }
.start-page__bg-food--2 { left: 82%; top: 28%; width: 10px; height: 10px; }
.start-page__bg-food--3 { left: 72%; bottom: 42%; width: 12px; height: 12px; }
.start-page__bg-food--4 { left: 8%; bottom: 38%; width: 8px; height: 8px; }
.start-page__bg-food--5 { left: 45%; top: 15%; width: 11px; height: 11px; }
.start-page__bg-food--6 { right: 18%; top: 35%; width: 9px; height: 9px; }
.start-page__bg-food--7 { left: 28%; bottom: 22%; width: 13px; height: 13px; }
.start-page__bg-food--8 { right: 28%; bottom: 28%; width: 10px; height: 10px; }
.start-page__bg-food--9 { left: 55%; bottom: 18%; width: 8px; height: 8px; }
.start-page__bg-food--10 { right: 12%; top: 55%; width: 11px; height: 11px; }
.start-page__bg-food--11 { left: 22%; top: 42%; width: 9px; height: 9px; }
.start-page__bg-food--12 { left: 88%; top: 48%; width: 12px; height: 12px; }
.start-page__bg-food--13 { left: 5%; top: 58%; width: 8px; height: 8px; }
.start-page__bg-food--14 { left: 62%; top: 65%; width: 10px; height: 10px; }
.start-page__bg-food--15 { left: 38%; bottom: 45%; width: 11px; height: 11px; }
.start-page__bg-food--16 { right: 8%; top: 18%; width: 9px; height: 9px; }
.start-page__bg-food--17 { left: 50%; top: 38%; width: 8px; height: 8px; }
.start-page__bg-food--18 { left: 18%; bottom: 55%; width: 13px; height: 13px; }
.start-page__bg-food--19 { right: 35%; bottom: 12%; width: 10px; height: 10px; }
.start-page__bg-food--20 { left: 92%; bottom: 48%; width: 9px; height: 9px; }
.start-page__bg-food--21 { left: 35%; top: 8%; width: 8px; height: 8px; }
.start-page__bg-food--22 { right: 42%; top: 52%; width: 11px; height: 11px; }
.start-page__bg-food--23 { left: 68%; top: 35%; width: 9px; height: 9px; }
.start-page__bg-food--24 { left: 12%; top: 48%; width: 10px; height: 10px; }
.start-page__bg-food--25 { right: 15%; bottom: 38%; width: 8px; height: 8px; }
.start-page__bg-food--26 { left: 78%; bottom: 55%; width: 12px; height: 12px; }
.start-page__bg-food--27 { left: 42%; top: 58%; width: 9px; height: 9px; }
.start-page__bg-food--28 { right: 22%; top: 22%; width: 10px; height: 10px; }
.start-page__bg-food--29 { left: 58%; bottom: 32%; width: 8px; height: 8px; }
.start-page__bg-food--30 { left: 8%; top: 35%; width: 11px; height: 11px; }
.start-page__bg-food--31 { left: 92%; top: 62%; width: 9px; height: 9px; }
.start-page__bg-food--32 { left: 32%; bottom: 15%; width: 10px; height: 10px; }
.start-page__bg-food--33 { right: 38%; top: 42%; width: 8px; height: 8px; }
.start-page__bg-food--34 { left: 48%; top: 72%; width: 12px; height: 12px; }
.start-page__bg-food--35 { right: 5%; bottom: 22%; width: 9px; height: 9px; }

/* Top bar – full width, minimal */
.start-page__topbar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	background: rgba(26, 32, 44, 0.55);
	backdrop-filter: blur(10px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#startMenuWrapper[data-theme="light"] .start-page__topbar {
	background: rgba(255, 255, 255, 0.6);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.start-page__topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 960px;
	margin: 0 auto;
	padding: 14px 24px;
	box-sizing: border-box;
}

#startMenu {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: 40px 24px 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	box-sizing: border-box;
}

.start-page__hero-img {
	display: block;
	width: 100%;
	max-width: 400px;
	max-height: 240px;
	height: auto;
	object-fit: contain;
	margin: 0 0 -3px 0;
	vertical-align: bottom;
	will-change: transform;
	position: relative;
	z-index: 0;
}

.start-page__hero-img + .start-page__login {
	margin-top: 0;
	position: relative;
	z-index: 1;
}

.start-page__card {
	width: 100%;
	background: var(--brand-card);
	border-radius: var(--brand-radius-lg);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	box-sizing: border-box;
}

.start-page__login {
	max-width: 400px;
	padding: 32px 28px;
}

.start-page__logo {
	display: flex;
	align-items: center;
	gap: 10px;
}

.start-page__header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.start-page__header-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: var(--brand-radius-md);
	background: transparent;
	color: var(--brand-foreground);
	cursor: pointer;
	opacity: 0.85;
	transition: opacity 0.15s ease, background 0.15s ease;
}

.start-page__header-btn:hover {
	opacity: 1;
	background: var(--brand-bg-muted);
}

.start-page__header-btn svg {
	width: 20px;
	height: 20px;
}

/* Theme button: icon switches by data-theme (moon = dark, sun = light) */
.start-page__theme-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.start-page__theme-icon svg {
	width: 20px;
	height: 20px;
}

.start-page__theme-icon--sun {
	display: none;
}

.start-page__theme-icon--moon {
	display: inline-flex;
}

#startMenuWrapper[data-theme="light"] .start-page__theme-icon--sun {
	display: inline-flex;
}

#startMenuWrapper[data-theme="light"] .start-page__theme-icon--moon {
	display: none;
}

.start-page__logo-icon,
.start-page__logo > svg {
	width: 36px;
	height: 36px;
	opacity: 0.9;
	flex-shrink: 0;
}

.start-page__logo-icon {
	display: block;
	object-fit: contain;
}

.start-page__logo > svg {
	color: var(--brand-primary);
}

.start-page__logo-text {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--brand-foreground);
	letter-spacing: -0.02em;
}

/* Form block */
.start-page__form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
}

.start-page__input-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--brand-muted);
	margin-bottom: 2px;
}

.start-page__label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--brand-foreground);
	margin-bottom: 6px;
}

/* Input */
#playerNameInput {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	font-size: 0.875rem;
	font-family: inherit;
	color: var(--brand-foreground);
	background: var(--brand-input-bg);
	border: 1px solid var(--brand-border);
	border-radius: var(--brand-radius-md);
	box-sizing: border-box;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#playerNameInput::placeholder {
	color: var(--brand-muted);
}

#playerNameInput:hover {
	border-color: #3f3f46;
}

#startMenuWrapper[data-theme="light"] #playerNameInput:hover {
	border-color: #a1a1aa;
}

#playerNameInput:focus {
	border-color: var(--brand-primary);
	box-shadow: 0 0 0 1px var(--brand-primary);
}

#startMenu .input-error {
	display: none;
	font-size: 0.75rem;
	color: var(--brand-destructive);
	margin-top: 4px;
	margin-bottom: 0;
}

#startMenu .input-error.visible {
	display: block;
}

/* Buttons: Play (6) + Spectate (4) on one row */
.start-page__actions {
	display: grid;
	grid-template-columns: 6fr 4fr;
	gap: 10px;
	margin-top: 8px;
}

.start-page__actions > a {
	display: block;
	min-width: 0;
}

.start-page__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 44px;
	min-width: 0;
	padding: 0 16px;
	font-size: 0.9375rem;
	font-weight: 500;
	font-family: inherit;
	border: none;
	border-radius: var(--brand-radius-md);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.05s ease;
	box-sizing: border-box;
}

.start-page__btn:active {
	transform: scale(0.99);
}

.start-page__btn--primary {
	color: #fff;
	background: var(--brand-primary);
}

.start-page__btn--primary:hover {
	background: var(--brand-primary-hover);
}

.start-page__btn--secondary {
	color: var(--brand-foreground);
	background: var(--brand-bg-muted);
	border: none;
}

.start-page__btn--secondary:hover {
	background: rgba(45, 55, 72, 0.95);
}

#startMenuWrapper[data-theme="light"] .start-page__btn--secondary:hover {
	background: rgba(226, 232, 240, 0.95);
}

.start-page__btn svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* Settings popup */
.start-page__popup {
	position: fixed;
	inset: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.start-page__popup--open {
	opacity: 1;
	visibility: visible;
}

.start-page__popup-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	cursor: pointer;
}

.start-page__popup-content {
	position: relative;
	width: 100%;
	max-width: 360px;
	padding: 0;
	background: var(--brand-card);
	border: 1px solid var(--brand-card-border);
	border-radius: var(--brand-radius-lg);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.start-page__popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--brand-border);
}

.start-page__popup-header .start-page__section-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--brand-foreground);
}

.start-page__settings-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--brand-primary);
}

.start-page__popup-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: var(--brand-radius-md);
	background: transparent;
	color: var(--brand-foreground);
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.15s ease, background 0.15s ease;
}

.start-page__popup-close:hover {
	opacity: 1;
	background: var(--brand-bg-muted);
}

.start-page__popup-close svg {
	width: 20px;
	height: 20px;
}

/* Settings dialog – rows with toggles */
.start-page__settings-list {
	padding: 8px 0;
}

.start-page__settings-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 20px;
}

.start-page__settings-label {
	display: flex;
	flex-direction: column;
	gap: 2px;
	cursor: pointer;
	min-width: 0;
	flex: 1;
}

.start-page__settings-name {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--brand-foreground);
}

.start-page__settings-desc {
	font-size: 0.75rem;
	color: var(--brand-muted);
	line-height: 1.4;
}

/* Toggle switch */
.start-page__toggle {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	cursor: pointer;
}

.start-page__toggle-input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.start-page__toggle-track {
	display: block;
	width: 44px;
	height: 22px;
	border-radius: var(--brand-radius-md);
	background: var(--brand-bg-muted);
	border: 1px solid var(--brand-border);
	position: relative;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.start-page__toggle-track::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 2px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border-radius: var(--brand-radius-sm);
	background: var(--brand-foreground);
	transition: transform 0.2s ease;
}

.start-page__toggle-input:focus-visible + .start-page__toggle-track {
	outline: 1px solid var(--brand-primary);
	outline-offset: 2px;
}

.start-page__toggle-input:checked + .start-page__toggle-track {
	background: var(--brand-primary);
	border-color: var(--brand-primary);
}

.start-page__toggle-input:checked + .start-page__toggle-track::after {
	transform: translateX(22px);
	background: #fff;
}

#startMenuWrapper[data-theme="light"] .start-page__toggle-input:checked + .start-page__toggle-track::after {
	background: #fff;
}

.start-page__section-title {
	margin: 0 0 12px 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--brand-foreground);
}

#startMenu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#startMenu ul li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	font-size: 0.875rem;
	color: var(--brand-foreground);
}

#startMenu ul label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	width: 100%;
}

#startMenu ul input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--brand-primary);
	cursor: pointer;
}

/* How to play – card grid */
.start-page__features {
	width: 100%;
	margin-top: 44px;
}

.start-page__features-title {
	margin: 0 0 16px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand-muted);
	text-align: center;
}

.start-page__features-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	max-width: 520px;
	margin: 0 auto;
}

.start-page__feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 20px 12px;
	background: var(--brand-card);
	border-radius: var(--brand-radius-md);
	box-sizing: border-box;
}

.start-page__feature-icon {
	width: 44px;
	height: 44px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--brand-primary);
}

.start-page__feature-icon svg {
	width: 24px;
	height: 24px;
}

.start-page__feature-heading {
	margin: 0 0 4px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--brand-foreground);
	line-height: 1.2;
}

.start-page__feature-text {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.35;
	color: var(--brand-muted);
}

.start-page__feature-text .start-page__kbd {
	vertical-align: middle;
}

/* Keyboard key styling (Space, W, etc.) */
.start-page__kbd,
kbd.start-page__kbd {
	display: inline-block;
	min-width: 1.5em;
	height: 1.5em;
	line-height: 1.35;
	padding: 0.15em 0.45em;
	margin: 0 0.1em;
	font-size: 0.8em;
	font-weight: 600;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	text-align: center;
	color: var(--brand-foreground);
	background: var(--brand-kbd-bg, var(--brand-bg-muted));
	border: 1px solid var(--brand-kbd-border, var(--brand-border));
	border-radius: var(--brand-radius-sm);
	box-shadow: var(--brand-kbd-shadow, 0 1px 0 var(--brand-border));
	vertical-align: middle;
}

/* Dark theme: keycap-style keys with clearer contrast */
#startMenuWrapper:not([data-theme="light"]) .start-page__kbd,
#startMenuWrapper:not([data-theme="light"]) kbd.start-page__kbd {
	--brand-kbd-bg: #2d3748;
	--brand-kbd-border: #4a5568;
	--brand-kbd-shadow: 0 1px 0 #4a5568;
}

#startMenuWrapper[data-theme="light"] .start-page__kbd,
#startMenuWrapper[data-theme="light"] kbd.start-page__kbd {
	--brand-kbd-bg: #e0f2fe;
	--brand-kbd-border: #7dd3fc;
	--brand-kbd-shadow: 0 1px 0 #7dd3fc;
	color: #0f172a;
}


@media (max-width: 560px) {
	.start-page__features-grid {
		grid-template-columns: repeat(2, 1fr);
		max-width: 320px;
	}
}

@media (max-width: 340px) {
	.start-page__actions {
		grid-template-columns: 1fr;
	}
	.start-page__topbar-inner {
		padding: 12px 16px;
	}
	#startMenu {
		padding: 36px 16px 32px;
	}
}