/* Киоск голосования. Одна светлая тёплая тема на всю сеть, без брендбуков.
   Все цвета и размеры — здесь, в переменных: менять тему в одном месте.

   Основная ориентация — вертикальная (планшет стоит на стойке).
   Горизонтальная описана ниже отдельной секцией и не должна ломаться. */

:root {
	--bg: #FFF3E4;
	--bg-soft: #FFE8CF;
	--card: #FFFFFF;
	--card-active: #FFEEDC;
	--text: #2A2018;
	--text-dim: #7A6A5C;
	--accent: #F2611C;
	--accent-dark: #D44E0F;
	--accent-text: #FFFFFF;
	--ok: #1E8E4A;
	--ok-soft: #E4F5E9;
	--border: #E8D7C3;
	--shadow: 0 6px 20px rgba(80, 50, 20, 0.10);

	--radius: 28px;
	--gap: 20px;
	--pad: 28px;
	/* Минимальная зона нажатия — 64 px по заданию. */
	--tap: 72px;

	--fs-splash: 58px;
	--fs-title: 44px;
	--fs-card: 34px;
	--fs-body: 26px;
	--fs-small: 22px;
}

* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

html, body {
	height: 100%;
	margin: 0;
	overflow: hidden;
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
	font-size: var(--fs-body);
	line-height: 1.3;
	/* Киоск: ни выделения текста, ни двойного тапа для зума. */
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}

[hidden] {
	display: none !important;
}

.screen {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: var(--pad);
	gap: var(--gap);
}

.screen-center {
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* --- заставка --- */

.screen-splash {
	align-items: center;
	justify-content: flex-end;
	text-align: center;
	padding: 0;
	overflow: hidden;
}

.splash-slides {
	position: absolute;
	inset: 0;
}

.splash-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10vh 8vw;
	background-size: cover;
	background-position: center;
	font-size: var(--fs-splash);
	font-weight: 700;
	color: #FFFFFF;
	text-shadow: 0 4px 18px rgba(60, 30, 10, 0.45);
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

.splash-slide.is-active {
	opacity: 1;
}

/* Светлая вуаль поверх фото: тёмный текст остаётся читаемым на любой картинке. */
.splash-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 243, 228, 0.35) 0%, rgba(255, 243, 228, 0.86) 55%, var(--bg) 100%);
}

.splash-corner {
	position: absolute;
	top: 0;
	left: 0;
	width: 140px;
	height: 140px;
}

.splash-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 0 var(--pad) 8vh;
}

#splash-title {
	margin: 0 0 40px;
	font-size: var(--fs-splash);
	line-height: 1.12;
}

.btn-vote {
	width: min(100%, 560px);
	min-height: 104px;
	font-size: 40px;
	animation: pulse 2.4s ease-in-out infinite;
}

#splash-hint {
	margin: 24px 0 0;
	font-size: var(--fs-body);
	color: var(--text-dim);
}

@keyframes pulse {
	0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(242, 97, 28, 0.40); }
	50% { transform: scale(1.03); box-shadow: 0 0 0 28px rgba(242, 97, 28, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.btn-vote, .btn--pulse { animation: none; }
	.splash-slide { transition: none; }
}

/* --- верхняя полоса --- */

.bar {
	display: flex;
	align-items: center;
	gap: var(--gap);
	min-height: var(--tap);
}

.bar-title {
	flex: 1;
	margin: 0;
	font-size: var(--fs-title);
	line-height: 1.1;
}

.bar-question {
	margin: -8px 0 0;
	font-size: var(--fs-card);
	font-weight: 600;
	color: var(--accent);
}

.bar-note {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--text-dim);
}

.btn {
	min-height: var(--tap);
	min-width: 180px;
	padding: 0 40px;
	border: 0;
	border-radius: var(--radius);
	font-family: inherit;
	font-size: var(--fs-card);
	font-weight: 600;
	color: var(--accent-text);
	background: var(--accent);
	box-shadow: var(--shadow);
	cursor: pointer;
}

.btn:active {
	background: var(--accent-dark);
}

.btn[disabled] {
	opacity: 0.35;
}

.btn-ghost {
	background: transparent;
	border: 2px solid var(--border);
	color: var(--text-dim);
	box-shadow: none;
	min-width: 150px;
}

.btn-wide {
	width: 100%;
	min-height: 96px;
	font-size: 36px;
}

/* Выбрано во всех блюдах — «Готово» мягко зовёт нажать. */
.btn--pulse {
	animation: pulse 2.4s ease-in-out infinite;
}

/* --- карточки --- */

.grid {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
	overflow-y: auto;
	/* Карточек мало — растягиваем на всю высоту, чтобы не было пустого низа. */
	grid-auto-rows: minmax(300px, 1fr);
}

.card {
	display: flex;
	flex-direction: column;
	padding: 0;
	border: 3px solid transparent;
	border-radius: var(--radius);
	background: var(--card);
	color: var(--text);
	font-family: inherit;
	font-size: inherit;
	text-align: left;
	overflow: hidden;
	box-shadow: var(--shadow);
	cursor: pointer;
}

.card:active {
	background: var(--card-active);
}

.card-photo {
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	/* Фото блюд готовим 4:3; лишнее обрезаем по центру. */
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
	background: var(--bg-soft);
}

.card-body {
	flex: 0 0 auto;
	padding: 20px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.card-name {
	font-size: var(--fs-card);
	font-weight: 600;
}

.card-note {
	font-size: var(--fs-small);
	color: var(--text-dim);
}

.card-chosen {
	margin-top: 4px;
	padding: 8px 16px;
	border-radius: 16px;
	background: var(--ok-soft);
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--ok);
}

.card--voted {
	border-color: var(--ok);
}

/* «Не моё» — служебный вариант, намеренно не похож на блюдо. */
.card--optout {
	grid-row: span 1;
	min-height: 140px;
	justify-content: center;
	background: transparent;
	border: 3px dashed var(--border);
	box-shadow: none;
	color: var(--text-dim);
}

.card--optout .card-name {
	color: var(--text-dim);
}

/* --- нижняя панель --- */

.actionbar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 96px;
}

.done-hint {
	margin: 0;
	font-size: var(--fs-card);
	color: var(--text-dim);
}

/* --- спасибо и состояния --- */

.thanks h1,
.status h1 {
	margin: 0;
	font-size: var(--fs-title);
	line-height: 1.2;
}

.thanks-mark {
	width: 160px;
	height: 160px;
	margin: 0 auto 40px;
	border-radius: 50%;
	background: var(--ok);
	color: #FFFFFF;
	font-size: 96px;
	line-height: 160px;
}

.status p {
	margin: 24px 0 0;
	font-size: var(--fs-card);
	color: var(--text-dim);
}

.status-id {
	margin-top: 48px !important;
	font-size: var(--fs-body) !important;
}

.mono {
	font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
	color: var(--text);
}

/* --- служебный экран --- */

.service-list {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 12px 32px;
	margin: 0;
	font-size: var(--fs-small);
}

.service-list dt {
	color: var(--text-dim);
}

.service-list dd {
	margin: 0;
}

.service-sub {
	margin: 8px 0 0;
	font-size: var(--fs-body);
	color: var(--text-dim);
}

.service-log {
	flex: 1;
	margin: 0;
	padding-left: 24px;
	overflow-y: auto;
	font-size: var(--fs-small);
	color: var(--text-dim);
}

.dev-badge {
	position: fixed;
	right: 12px;
	bottom: 10px;
	z-index: 10;
	padding: 4px 12px;
	border-radius: 10px;
	background: var(--accent);
	color: var(--accent-text);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* --- горизонтальная ориентация: запасная, не основная --- */

@media (orientation: landscape) {
	:root {
		--fs-splash: 52px;
		--fs-title: 40px;
		--fs-card: 30px;
		--fs-body: 24px;
	}

	.grid {
		grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
		grid-auto-rows: minmax(260px, 1fr);
	}

	.card-photo {
		aspect-ratio: 4 / 3;
	}

	.splash-inner {
		padding-bottom: 6vh;
	}

	.btn-wide {
		width: min(100%, 640px);
	}
}