/* Farm Code — стили игрового движка.
   Палитра и сцена подобраны под оригинальную игру The Farmer Was Replaced:
   небесно-голубой фон, золотое поле, деревянные панели. */

* { box-sizing: border-box; }

:root {
	--sky-top: #8aa7ba;
	--sky-bottom: #6d8a9d;
	--wood: #2f2a26;
	--wood-light: #6f6862;
	--gold: #d8b25a;
	--gold-bright: #f0d585;
	--soil: #b9863f;
	--soil-dark: #9c6c2e;
	--green: #6f8f2f;
	--accent: #c70018;
	--panel-bg: rgba(34, 30, 27, 0.86);
	--text: #efe7da;
	/* адаптивные размеры раскладки */
	--side-w: 264px;        /* ширина боковой колонки */
	--top-h: 64px;          /* высота верхней панели */
	--gap: 16px;
}

html, body {
	margin: 0;
	height: 100%;
	font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--text);
	background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%);
	/* плавная смена неба день↔ночь (уровень 20+): цвет меняется постепенно */
	transition: background 1.2s linear;
}

.hidden { display: none !important; }

html, body { overflow: hidden; }

/* ---------- Верхняя панель ---------- */
.topbar {
	position: fixed; top: 0; left: 0; right: 0; z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 22px;
	background: rgba(20, 17, 15, 0.55);
	backdrop-filter: blur(3px);
}
.topbar__logo {
	display: flex; align-items: center; gap: 12px;
	color: var(--text); text-decoration: none; font-weight: 800; font-size: 20px;
	letter-spacing: .5px;
}
.topbar__logo img { width: 42px; height: 42px; object-fit: contain; }
/* внутренние часы суток — «пилюля» рядом с логотипом (с уровня 20) */
.topbar__clock {
	display: flex; align-items: center; gap: 8px;
	margin-right: auto;                 /* держим часы у логотипа слева */
	padding: 6px 14px; border-radius: 999px;
	background: rgba(10, 12, 20, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.topbar__clock-icon { font-size: 20px; line-height: 1; }
.topbar__clock-time {
	font-weight: 800; font-size: 20px; letter-spacing: 1px;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 2px 3px rgba(0,0,0,.5);
}
.topbar__resources { display: flex; gap: 22px; }
.resource {
	display: flex; align-items: center; gap: 8px;
	font-weight: 800; font-size: 20px;
	text-shadow: 0 2px 3px rgba(0,0,0,.5);
}
.resource img { width: 36px; height: 36px; object-fit: contain;
	filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }

.panel {
	background: var(--panel-bg);
	border: 1px solid rgba(255,255,255,.07);
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* ---------- Полноэкранное поле + зум ---------- */
.field3d {
	position: fixed; inset: 0; z-index: 0;
	background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%);
}
.field3d canvas { display: block; }

.stage__hint {
	position: fixed; left: 16px; bottom: 14px; z-index: 6;
	font-size: 12px; opacity: .7; background: rgba(0,0,0,.3);
	padding: 5px 12px; border-radius: 6px; pointer-events: none;
}

/* реплика дрона над полем (комикс-облако) */
.drone-bubble {
	position: fixed; z-index: 25; transform: translate(-50%, -100%);
	max-width: 300px; min-width: 110px; min-height: 22px; padding: 14px 18px;
	background: #fff; color: #1c1a17;
	border: 3px solid #1c1a17; border-radius: 24px;
	font-size: 15px; font-weight: 600; line-height: 1.45; white-space: pre-wrap;
	box-shadow: 0 12px 34px rgba(0,0,0,.4); pointer-events: none;
	animation: bubble-pop .2s ease-out;
}
.drone-bubble::after {  /* контур хвостика */
	content: ""; position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%);
	width: 0; height: 0; border: 11px solid transparent;
	border-top: 17px solid #1c1a17; border-bottom: 0;
}
.drone-bubble::before { /* белая заливка хвостика */
	content: ""; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
	width: 0; height: 0; border: 8px solid transparent;
	border-top: 12px solid #fff; border-bottom: 0; z-index: 1;
}
@keyframes bubble-pop { from { opacity: 0; transform: translate(-50%, -92%) scale(.9); } }
.drone-bubble.has-btn { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.bubble-text { display: block; }
/* код внутри реплики дрона — моноширинный, чтобы не путать с обычным текстом */
.bubble-code {
	font-family: "Consolas", "Menlo", "Courier New", monospace;
	background: rgba(40, 50, 70, 0.10);
	color: #2b6cb0; border-radius: 4px; padding: 0 3px;
	white-space: pre-wrap;
}
.task__says .bubble-code { background: rgba(255,255,255,0.10); color: #ffe08a; }
.bubble-btn {
	align-self: flex-end; border: none; cursor: pointer; pointer-events: auto;
	padding: 7px 18px; border-radius: 18px; font-weight: 800; font-size: 14px;
	background: linear-gradient(to top, #2e8b2e, #46b446); color: #fff;
	box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.bubble-btn:hover { filter: brightness(1.08); }
.drone-bubble { pointer-events: none; }
.drone-bubble.has-btn { pointer-events: auto; }
.bubble-think { display: inline-flex; gap: 5px; align-items: center; }
.bubble-think i {
	width: 8px; height: 8px; border-radius: 50%; background: #b9863f; display: block;
	animation: think-dot 1s infinite ease-in-out;
}
.bubble-think i:nth-child(2) { animation-delay: .15s; }
.bubble-think i:nth-child(3) { animation-delay: .3s; }
@keyframes think-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-5px); opacity: 1; } }

/* пшеница, летящая к иконке урожая */
.fly-wheat {
	position: fixed; z-index: 40; width: 52px; height: 52px;
	transform: translate(-50%, -50%); pointer-events: none;
	filter: drop-shadow(0 3px 4px rgba(0,0,0,.4));
	transition: transform .8s cubic-bezier(.5,-0.2,.7,1), opacity .8s ease-in;
}

.zoom-controls {
	position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
	z-index: 6; display: flex; flex-direction: row; gap: 8px;
}

/* кнопка «Дальше» — появляется после успешного задания */
.next-btn {
	position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%);
	z-index: 26; padding: 14px 34px; border: none; border-radius: 30px;
	background: linear-gradient(to top, #2e8b2e, #46b446); color: #fff;
	font-size: 18px; font-weight: 800; cursor: pointer;
	box-shadow: 0 8px 24px rgba(0,0,0,.4);
	animation: next-pop .25s ease-out;
}
.next-btn:hover { filter: brightness(1.08); }
@keyframes next-pop { from { opacity: 0; transform: translate(-50%, 10px); } }
.zoom-btn {
	width: 44px; height: 44px; border-radius: 10px;
	background: var(--panel-bg); color: var(--text);
	border: 1px solid rgba(255,255,255,.12);
	font-size: 24px; font-weight: 800; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 14px rgba(0,0,0,.3); transition: .15s;
}
.zoom-btn:hover { background: rgba(255,255,255,.16); }
.zoom-btn:active { transform: scale(.94); }
#zoomResetBtn { font-size: 18px; }

/* ---------- Боковая колонка (плавающая поверх поля) ---------- */
.sidebar {
	position: fixed; left: var(--gap); top: calc(var(--top-h) + var(--gap)); z-index: 20;
	width: var(--side-w); max-height: calc(100vh - var(--top-h) - 2 * var(--gap)); overflow-y: auto;
	display: flex; flex-direction: column; gap: 14px;
	padding-right: 4px;
	scrollbar-width: thin; scrollbar-color: var(--gold) rgba(0,0,0,.25);
}
.sidebar::-webkit-scrollbar { width: 9px; }
.sidebar::-webkit-scrollbar-track { background: rgba(0,0,0,.22); border-radius: 8px; }
.sidebar::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--gold-bright), var(--soil));
	border-radius: 8px; border: 2px solid rgba(0,0,0,.15);
}
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--gold-bright); }

/* ---------- Ресурсы дрона (память) ---------- */
.resources-dr { padding: 14px 16px; }
.resources-dr__head { font-weight: 700; opacity: .8; margin-bottom: 10px; }
/* иконки ресурсов идут в ряд, рядом друг с другом */
.resources-dr__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.resource-chip {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	width: 70px; padding: 8px 6px; border-radius: 10px; cursor: pointer;
	background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
	color: var(--text); transition: .15s; text-align: center;
}
.resource-chip:hover { background: rgba(255,255,255,.13); border-color: var(--gold); }
.resource-chip__label { font-weight: 700; font-size: 12px; }
.resource-chip__gb { font-weight: 800; color: var(--gold-bright); font-size: 12px; }
.chip-icon {
	width: 30px; height: 26px; flex: none; border-radius: 5px; position: relative;
	background: linear-gradient(135deg, #4a5f2a, #6f8f2f);
	border: 2px solid #2f2a26;
	box-shadow:
		-5px -3px 0 -4px #2f2a26, -5px 3px 0 -4px #2f2a26,   /* ножки слева */
		 5px -3px 0 -4px #2f2a26,  5px 3px 0 -4px #2f2a26;   /* ножки справа */
}
.chip-icon::after {
	content: ""; position: absolute; inset: 5px; border-radius: 3px;
	border: 1.5px solid rgba(240,213,133,.6);
}

/* ---------- Шпаргалка (память) ---------- */
.cheat { display: flex; gap: 14px; min-height: 280px; max-height: min(64vh, 540px); }
.cheat__menu {
	list-style: none; margin: 0; padding: 0; width: 220px; flex: none;
	overflow-y: auto; border-right: 1px solid rgba(255,255,255,.1); padding-right: 8px;
}
.cheat__menu li {
	padding: 10px 12px; border-radius: 8px; cursor: pointer; margin-bottom: 6px;
	font-weight: 600; font-size: 14px; background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.08);
}
.cheat__menu li:hover { background: rgba(255,255,255,.12); }
.cheat__menu li.active { background: linear-gradient(90deg, rgba(216,178,90,.3), rgba(216,178,90,.05)); border-color: var(--gold); }
.cheat__detail { flex: 1; overflow-y: auto; padding-right: 4px; }
.cheat__exhead { font-size: 13px; opacity: .65; margin: 12px 0 6px; text-transform: uppercase; letter-spacing: .5px; }
.cheat__detail h3 { margin: 0 0 8px; }
.cheat__detail p { line-height: 1.5; opacity: .95; margin: 0 0 12px; }
.cheat__detail .task__example { margin-bottom: 10px; }
.cheat__detail code {
	background: rgba(0,0,0,.4); padding: 2px 6px; border-radius: 4px;
	font-family: "Fira Code", Consolas, monospace; color: var(--gold-bright);
}

.account { padding: 16px; }
.account__title { font-weight: 700; opacity: .8; margin-bottom: 10px; }
.account__guest { display: flex; flex-direction: column; gap: 8px; }
.account__user { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.account__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.account__avatar {
	width: 40px; height: 40px; border-radius: 50%;
	background: linear-gradient(135deg, var(--gold-bright), var(--soil));
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; color: #3a2a14; font-size: 20px;
}
.account__name { font-weight: 700; flex: 1; }

/* Личный кабинет: почта / ID / биллинг-баланс */
.account__meta { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.account__meta-row { display: flex; justify-content: space-between; gap: 10px; }
.account__meta-label { opacity: .6; white-space: nowrap; }
.account__meta-val { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.account__balance {
	display: flex; justify-content: space-between; align-items: center; gap: 10px;
	margin-top: 2px; padding: 8px 10px; border-radius: 10px;
	background: rgba(126, 217, 87, .12); border: 1px solid rgba(126, 217, 87, .3);
}
.account__balance-val { font-weight: 800; color: #7ed957; font-size: 15px; white-space: nowrap; }

/* Окно оплаты (пейвол) */
.paywall { text-align: left; margin: 0 0 16px; }
.paywall__email {
	display: inline-block; margin: 0 0 12px; padding: 8px 14px; cursor: pointer;
	font-weight: 700; font-size: 15px; color: var(--gold-bright);
	border: 1px dashed rgba(212, 160, 23, .6); border-radius: 10px;
	background: rgba(212, 160, 23, .1);
}
.paywall__email:hover { background: rgba(212, 160, 23, .2); }
.paywall__letter-wrap { display: flex; flex-direction: column; gap: 8px; }
.paywall__letter {
	white-space: pre-wrap; word-break: break-word; margin: 0; padding: 12px;
	border-radius: 10px; background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12); font-size: 14px; line-height: 1.5;
}
.paywall__copy { align-self: flex-start; }
.paywall__status { min-height: 18px; margin-top: 8px; font-size: 13px; color: #7ed957; }

/* Админ: пополнение баланса */
.billing-find { display: flex; gap: 8px; margin: 0 0 12px; }
.billing-find input { flex: 1; }
.billing-info { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; }
.billing-actions { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.site-sep { border: none; border-top: 1px solid rgba(255, 255, 255, .12); margin: 18px 0; }

.btn-mini {
	padding: 8px 12px; border: 1px solid rgba(255,255,255,.18);
	background: rgba(255,255,255,.06); color: var(--text);
	border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;
	transition: .15s;
}
.btn-mini:hover { background: rgba(255,255,255,.14); }
.btn-mini--accent {
	background: linear-gradient(to top, #b00116, #d40019); border-color: transparent;
}

.balance { padding: 14px 16px; }
.balance__label { font-size: 13px; opacity: .7; text-transform: uppercase; letter-spacing: 1px; }
.balance__value { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.balance__value img { width: 30px; height: 30px; }
.balance__value span { font-size: 26px; font-weight: 800; }

.levels { padding: 14px 16px 18px; }
.levels__head { font-weight: 700; margin-bottom: 12px; font-size: 16px; }
.levels__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.level-item {
	display: flex; align-items: center; gap: 10px;
	padding: 11px 12px; border-radius: 8px;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.08);
	cursor: pointer; transition: .15s;
}
.level-item:hover { background: rgba(255,255,255,.1); }
.level-item__num {
	width: 30px; height: 30px; flex: none; border-radius: 7px;
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; background: rgba(0,0,0,.25);
}
.level-item__title { flex: 1; font-size: 14px; font-weight: 600; }
.level-item__icon { font-size: 18px; opacity: .9; }

.level-item.is-open {
	background: linear-gradient(90deg, rgba(216,178,90,.25), rgba(216,178,90,.06));
	border-color: var(--gold);
}
.level-item.is-open .level-item__num { background: linear-gradient(135deg, var(--gold-bright), var(--soil)); color:#3a2a14; }
.level-item.is-locked { opacity: .65; }
.level-item.is-locked .level-item__title { opacity: .8; }
.level-item.is-soon { opacity: .4; cursor: default; }

.reset-level-btn { width: 100%; margin-top: 12px; opacity: .85; }
.reset-level-btn:hover { opacity: 1; }

/* ---------- Плавающие окна (задание, редактор) ---------- */
.floating {
	position: fixed; z-index: 30;
	display: flex; flex-direction: column;
	max-width: calc(100vw - 24px);
}
.floating__bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px; padding: 8px 12px; cursor: grab; user-select: none;
	background: rgba(0,0,0,.4);
	border-bottom: 1px solid rgba(255,255,255,.08);
	border-radius: 10px 10px 0 0;
	touch-action: none;
}
.floating.is-dragging { box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.floating.is-dragging .floating__bar { cursor: grabbing; }
.floating__title { font-weight: 700; color: var(--gold-bright); font-family: monospace; }
.floating__body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.floating.is-min { height: auto !important; min-height: 0 !important; }
.floating.is-min .floating__body { display: none; }
.floating.is-min .floating__bar { border-radius: 10px; border-bottom: none; }
.min-btn {
	width: 28px; height: 28px; flex: none; border-radius: 6px; border: none;
	background: rgba(255,255,255,.12); color: var(--text);
	cursor: pointer; font-size: 16px; line-height: 1;
}
.min-btn:hover { background: rgba(255,255,255,.22); }

/* ---------- Панель культур (перетаскиваемое окно) ---------- */
#cropsBar {
	left: calc(var(--side-w) + 2 * var(--gap)); top: calc(var(--top-h) + var(--gap));
	width: max-content; max-width: calc(100vw - 2 * var(--gap));
}
.crops-bar .floating__body { padding: 12px 14px 14px; }
.crops-bar__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Склад завода (ООП, ур.26+) ---------- */
#factoryStore {
	left: var(--gap); bottom: 46px; top: auto;
	width: 232px; max-width: calc(100vw - 2 * var(--gap));
}
.factory-store .floating__body { padding: 10px 14px 12px; gap: 8px; }
.fstore__row { display: flex; align-items: center; gap: 8px; }
.fstore__ico { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.fstore__ico img { width: 22px; height: 22px; object-fit: contain; }
.fstore__lbl { flex: 1; color: var(--text); font-size: 13px; }
.fstore__val { font-family: monospace; font-weight: 700; font-size: 18px; color: var(--gold-bright); min-width: 2ch; text-align: right; }
.fstore__val.bump { animation: count-bump .45s ease; }
.fstore__hint { margin-top: 2px; font-size: 11px; opacity: .6; }

/* ---------- Окно реплик дрона (с задания 3-6) ---------- */
/* по умолчанию — строго под «окном культур», той же ширины (ставит JS), а высота
   адаптивная под текст (height не задаём — окно растёт по содержимому) */
#droneDialog {
	left: calc(var(--side-w) + 2 * var(--gap)); top: calc(var(--top-h) + 150px);
	width: min(340px, calc(100vw - var(--side-w) - 3 * var(--gap)));
	min-width: 200px; min-height: 0;
}
#droneDialog.hidden { display: none; }
.dialog-bar .floating__body { padding: 0; }
.dialog-bar__body {
	min-height: 0; max-height: 40vh; overflow-y: auto; padding: 12px 14px;
	font-size: 15px; line-height: 1.45; color: var(--text);
}
.dialog-bar__body .bubble-btn { margin-top: 10px; display: inline-block; }

/* ---------- Подсказки культур / функций ---------- */
#hintsBar, #fnHintsBar {
	left: calc(var(--side-w) + 2 * var(--gap));
	width: max-content; max-width: calc(100vw - 2 * var(--gap));
}
#hintsBar { top: calc(var(--top-h) + 200px); }
/* «Команды дрона» — на правую сторону, чтобы под подсказками культур
   освободить место для окна «Ферма 1» */
#fnHintsBar { left: auto; right: var(--gap); top: calc(var(--top-h) + var(--gap)); }
/* «Команды дрона»/«Подсказки культур»: список может быть длинным (много команд).
   Даём ПРОКРУТКУ и возможность менять ВЫСОТУ (тянуть за нижний правый угол). */
.hints-bar .floating__body {
	padding: 10px 12px 12px;
	overflow-y: auto; overscroll-behavior: contain;
	resize: vertical;                 /* тянуть высоту за нижний правый угол */
	min-height: 90px; max-height: 78vh;
}
.hints__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hint-item {
	display: flex; align-items: center; gap: 10px;
	padding: 7px 9px; border-radius: 9px; cursor: pointer;
	background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
	transition: .12s;
}
.hint-item:hover { background: rgba(255,255,255,.12); }
.hint-item:active { transform: scale(.98); }
.hint-item__icon {
	width: 34px; height: 34px; flex: none; border-radius: 6px;
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hint-item__icon img { width: 32px; height: 32px; object-fit: contain; }
.hint-item__icon--soil { background: linear-gradient(180deg, #6f8f2f 0 35%, #c79a5a 35% 100%); }
.hint-item__name { font-size: 13px; font-weight: 600; opacity: .85; min-width: 64px; }
.hint-item__name--fn { font-family: "Fira Code", Consolas, monospace; color: var(--gold-bright); opacity: 1; }
.hint-item__desc { font-size: 12px; opacity: .8; }
.hint-item__code {
	font-family: "Fira Code", Consolas, monospace; font-size: 14px; font-weight: 700;
	color: var(--gold-bright); background: rgba(0,0,0,.4);
	padding: 3px 8px; border-radius: 5px;
}
.hint-item__copy { margin-left: auto; font-size: 12px; opacity: .6; white-space: nowrap; }
.hint-item.copied .hint-item__copy { color: #7fdc7f; opacity: 1; }
.crop-slot {
	width: 72px; padding: 8px 6px 6px; border-radius: 12px;
	background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
	display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.crop-slot img { width: 44px; height: 44px; object-fit: contain;
	filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.crop-slot__q { font-size: 30px; font-weight: 800; opacity: .55; line-height: 44px; }
.crop-slot__name { font-size: 11px; opacity: .75; white-space: nowrap; }
.crop-slot__count {
	font-size: 15px; font-weight: 800; color: var(--gold-bright);
	line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.5);
	transition: transform .15s;
}
.crop-slot__count.bump { animation: count-bump .45s ease; }
@keyframes count-bump {
	0% { transform: scale(1); }
	40% { transform: scale(1.6); color: #fff; }
	100% { transform: scale(1); }
}
.crop-slot.is-active {
	border-color: var(--gold);
	background: linear-gradient(135deg, rgba(216,178,90,.28), rgba(216,178,90,.06));
}
.crop-slot.is-locked { opacity: .8; }

/* ---------- Окно задания ---------- */
#taskPanel {
	left: calc(var(--side-w) + 2 * var(--gap)); top: calc(var(--top-h) + var(--gap));
	width: min(440px, calc(100vw - var(--side-w) - 3 * var(--gap)));
}
#taskPanel .floating__body { padding: 16px 18px; overflow: auto; max-height: 52vh; }
.task__top { display: flex; gap: 14px; align-items: flex-start; }
.task__drone-mini {
	width: 56px; height: 56px; flex: none; border-radius: 50%;
	background: radial-gradient(circle at 50% 40%, rgba(240,213,133,.5), rgba(0,0,0,.2));
	display: flex; align-items: center; justify-content: center;
}
.task__drone-mini img { width: 44px; height: 44px; object-fit: contain; }
.task__bubble { flex: 1; }
.task__progress { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; opacity: .65; }
.task__title { font-size: 20px; font-weight: 800; margin: 2px 0 6px; }
.task__says {
	background: rgba(255,255,255,.07); border-left: 3px solid var(--gold);
	padding: 8px 12px; border-radius: 0 8px 8px 0; font-style: italic;
}
.task__desc { margin-top: 12px; line-height: 1.5; font-size: 15px; opacity: .95; }
.task__desc code {
	background: rgba(0,0,0,.4); padding: 2px 6px; border-radius: 4px;
	font-family: "Fira Code", Consolas, monospace; color: var(--gold-bright);
}
/* с 3-7: код в описании нельзя выделить/скопировать — ребёнок пишет сам */
.task__desc.nocopy code { user-select: none; -webkit-user-select: none; cursor: default; }
.shop-sub { margin: 14px 0 6px; font-size: 14px; opacity: .8; }
.task__example {
	margin: 8px 0 0; padding: 10px 12px; border-radius: 8px;
	background: #14110f; color: #b7e08a;
	font-family: "Fira Code", Consolas, monospace; font-size: 13px; line-height: 1.5;
	white-space: pre; overflow-x: auto;
}
.nocopy { user-select: none; -webkit-user-select: none; -moz-user-select: none; }

/* «Показать подсказку» — кнопка раскрывает точный код-ответ (его нельзя копировать) */
.task__solution { margin-top: 10px; }
.task__solution.hidden { display: none; }
.task__hint-btn {
	background: #2a2118; color: var(--gold-bright);
	border: 1px solid #5a4a2e; border-radius: 8px;
	padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.task__hint-btn:hover { background: #362a1d; }
.task__solution .task__example.hidden { display: none; }

/* ---------- Шляпы дрона ---------- */
.hat-dot {
	width: 26px; height: 26px; border-radius: 50%; display: inline-block;
	background: #d4a017; border: 2px solid #2f2a26;
	box-shadow: inset 0 -3px 4px rgba(0,0,0,.25);
}
.hats-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid;
	grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hat-slot { display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 10px; border-radius: 10px; background: #1d1813; border: 2px solid transparent; }
.hat-slot.is-current { border-color: var(--gold-bright); }
.hat-slot.is-locked { opacity: 0.6; }
.hat-swatch { width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(0,0,0,.25); }
.hat-swatch--q { display: flex; align-items: center; justify-content: center;
	background: #333; color: #888; font-size: 20px; font-weight: bold; }
.hat-name { font-size: 12px; color: #cdbfa6; }
.hat-on { font-size: 11px; color: var(--gold-bright); }
.hat-pick { font-size: 12px; padding: 4px 10px; border-radius: 6px; cursor: pointer;
	background: #2a2118; color: var(--gold-bright); border: 1px solid #5a4a2e; }
.hat-pick:hover { background: #362a1d; }
.hat-pick:disabled { opacity: .45; cursor: default; }

/* ---------- Магазин семян ---------- */
.seed-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid;
	grid-template-columns: repeat(2, 1fr); gap: 12px; }
.seed-slot { display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 12px; border-radius: 10px; background: #1d1813; }
.seed-img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; }

/* ---------- Окно редактора кода ---------- */
#editorWin {
	left: calc(var(--side-w) + 2 * var(--gap)); top: 472px;
	width: min(440px, calc(100vw - var(--side-w) - 3 * var(--gap)));
	height: 320px; min-width: 260px; min-height: 180px;
}
/* «Ферма 1» — СПРАВА от основного редактора «Мой код» (не под панелью задания),
   чтобы автономная ферма и «Мой код» были видны рядом. На узких экранах окно
   всё равно можно перетащить — оно плавающее. */
#editorWin2 {
	left: calc(var(--side-w) + 440px + 3 * var(--gap)); top: calc(var(--top-h) + var(--gap));
	width: min(360px, calc(100vw - var(--side-w) - 440px - 4 * var(--gap)));
	height: 320px; min-width: 240px; min-height: 140px;
}
#editorWin2.hidden { display: none; }
/* окно «Дрон 2» — по умолчанию под блоком «Культуры» (слева сверху) */
#editorWin3 {
	left: calc(var(--side-w) + 2 * var(--gap)); top: calc(var(--top-h) + 185px);
	width: min(320px, calc(100vw - var(--side-w) - 3 * var(--gap)));
	height: 232px; min-width: 220px; min-height: 130px;
}
#editorWin3.hidden { display: none; }
/* простой редактор второго окна (без подсветки) */
.editor__code--plain { position: relative; color: #cfe8a8; background: #14110f; -webkit-text-fill-color: #cfe8a8; }
.editor__bar { background: rgba(0,0,0,.5); }
.editor__buttons { display: flex; gap: 8px; align-items: center; }

/* ручка изменения размера в правом нижнем углу */
.floating__resize {
	position: absolute; right: 0; bottom: 0; width: 18px; height: 18px;
	cursor: nwse-resize; z-index: 2;
	background:
		linear-gradient(135deg, transparent 50%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.35) 60%,
		transparent 60%, transparent 72%, rgba(255,255,255,.35) 72%, rgba(255,255,255,.35) 82%, transparent 82%);
	border-bottom-right-radius: 10px;
}
.floating.is-min .floating__resize { display: none; }
.run-btn {
	background: linear-gradient(to top, #2e8b2e, #46b446);
	color: #fff; border: none; padding: 8px 16px; border-radius: 6px;
	font-weight: 800; cursor: pointer; font-size: 14px;
}
.run-btn:hover { filter: brightness(1.08); }
.run-btn:disabled { opacity: .5; cursor: default; }
.run-btn.hidden, .zoom-btn.hidden, .stop-btn.hidden { display: none; }
.reset-btn {
	background: rgba(255,255,255,.1); color: var(--text); border: none;
	padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 16px;
}
/* «Стоп» — отдельная красная иконка рядом с «Запустить» (с 3-го уровня) */
.stop-btn {
	background: linear-gradient(to top, #b43c2e, #d65a46); color: #fff; border: none;
	padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: 800;
}
.stop-btn:hover { filter: brightness(1.08); }

/* Бейдж-счётчик над полем: визуализирует переменную count. Держим ПОВЕРХ
   панелей (они z-index 30) и пониже центра, чтобы он был виден над полем. */
.count-badge {
	position: fixed; top: 42%; left: 56%; transform: translateX(-50%);
	z-index: 36; background: #14110f; color: var(--gold-bright);
	border: 2px solid var(--gold-bright); border-radius: 12px; padding: 10px 22px;
	font-family: "Fira Code", Consolas, monospace; font-size: 22px; font-weight: 800;
	box-shadow: 0 6px 24px rgba(0,0,0,.5);
}
.count-badge.hidden { display: none; }
.count-badge b { color: #fff; font-size: 22px; }
/* редактор с подсветкой: прозрачная textarea поверх подсвеченного <pre> */
.editor__wrap { position: relative; flex: 1; min-height: 160px; overflow: hidden; background: #14110f; }
.editor__hl, .editor__code {
	margin: 0; border: 0; padding: 14px;
	font-family: "Fira Code", Consolas, "Courier New", monospace;
	font-size: 15px; line-height: 1.55; tab-size: 4;
	white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}
.editor__hl {
	position: absolute; inset: 0; overflow: auto; pointer-events: none;
	color: #e8e2d6;
}
.editor__code {
	position: absolute; inset: 0; resize: none; overflow: auto;
	background: transparent; color: transparent; caret-color: #f0d585; outline: none;
}
/* токены подсветки Python */
.editor__hl .tok-kw  { color: #e58fb1; font-weight: 700; }
.editor__hl .tok-fn  { color: #7fd1ff; }
.editor__hl .tok-bi  { color: #c9a3ff; }
.editor__hl .tok-str { color: #b7e08a; }
.editor__hl .tok-num { color: #f0b96b; }
.editor__hl .tok-com { color: #7c8a76; font-style: italic; }
.console {
	background: #0d0b0a; border-top: 1px solid rgba(255,255,255,.08);
	max-height: 150px; overflow: auto;
}
.console__head {
	font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
	opacity: .55; padding: 6px 14px; position: sticky; top: 0; background: #0d0b0a;
}
.console__out {
	margin: 0; padding: 0 14px 12px; font-family: monospace; font-size: 14px;
	white-space: pre-wrap; word-break: break-word;
}
.console__out .ok { color: #7fdc7f; }
.console__out .err { color: #ff8d8d; }
.console__out .sys { color: #9fb6c8; }

/* ---------- Модальные окна ---------- */
.modal-bg {
	position: fixed; inset: 0; background: rgba(8,6,5,.7);
	z-index: 50; backdrop-filter: blur(2px);
}
.modal {
	position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%);
	z-index: 60; width: min(92vw, 400px);
	background: #221e1b; border: 1px solid rgba(255,255,255,.12);
	border-radius: 14px; padding: 26px; text-align: center;
	box-shadow: 0 20px 60px rgba(0,0,0,.5);
	/* на маленьких экранах высокий магазин не влезал и уходил за экран —
	   ограничиваем высоту и даём прокрутку ВНУТРИ окна */
	max-height: 90vh; overflow-y: auto; overscroll-behavior: contain;
}
.modal h2 { margin: 6px 0 14px; }
.modal__close {
	position: absolute; right: 12px; top: 8px; background: none; border: none;
	color: var(--text); font-size: 26px; cursor: pointer; opacity: .6;
}
.modal__close:hover { opacity: 1; }
.modal input {
	width: 100%; padding: 12px 14px; margin-bottom: 10px;
	background: #15120f; border: 1px solid rgba(255,255,255,.15);
	border-radius: 8px; color: var(--text); font-size: 15px;
}
.modal__lead { opacity: .85; margin: 0 0 16px; line-height: 1.5; }
.modal__note { margin-top: 14px; font-size: 14px; opacity: .8; }
.modal__note a { color: var(--gold-bright); }
.modal__err { color: #ff8d8d; min-height: 18px; font-size: 14px; margin-bottom: 8px; }
.modal__icon { font-size: 46px; margin-bottom: 4px; }
.modal__icon img { width: 64px; height: 64px; object-fit: contain; }
.btn-modal {
	width: 100%; padding: 13px; border: none; border-radius: 8px;
	background: linear-gradient(to top, #b00116, #d40019); color: #fff;
	font-weight: 800; font-size: 16px; cursor: pointer;
}
.btn-modal:hover { filter: brightness(1.07); }

/* ---------- Админ: меню и каталог объектов ---------- */
.admin-tools { padding: 14px 16px; }
.admin-tools__head { font-weight: 700; opacity: .8; margin-bottom: 10px; }
.admin-tools .btn-mini { width: 100%; }

.modal--wide { width: min(94vw, 760px); text-align: left; }

/* редактор заданий */
.tadmin { display: flex; flex-direction: column; gap: 14px; }
.tadmin__nav { display: flex; gap: 12px; flex-wrap: wrap; }
.tadmin__form { display: flex; flex-direction: column; gap: 10px;
	max-height: min(64vh, 560px); overflow-y: auto; padding-right: 4px; }
.tadmin label { display: flex; flex-direction: column; gap: 4px;
	font-size: 13px; opacity: .9; font-weight: 600; }
.tadmin input, .tadmin textarea, .tadmin select {
	width: 100%; padding: 8px 10px; margin: 0;
	background: #15120f; border: 1px solid rgba(255,255,255,.15);
	border-radius: 8px; color: var(--text); font-size: 14px; font-weight: 400;
}
.tadmin textarea { font-family: "Fira Code", Consolas, monospace; resize: vertical; line-height: 1.5; }
.tadmin code { background: rgba(0,0,0,.4); padding: 1px 5px; border-radius: 4px; color: var(--gold-bright); }
.tadmin__row { display: flex; gap: 10px; flex-wrap: wrap; }
.tadmin__row label { flex: 1; min-width: 70px; }
.tadmin__actions { display: flex; align-items: center; gap: 14px; }
.tadmin__actions .btn-modal { width: auto; padding: 11px 22px; }
.tadmin__saved { color: #7fdc7f; font-weight: 700; }
.objects { max-height: min(70vh, 620px); overflow-y: auto; padding-right: 4px; }
.objects__loading { opacity: .8; padding: 20px 0; text-align: center; }
/* Админ: воронка конверсии по уровням */
.funnel { max-height: 60vh; overflow-y: auto; }
.funnel__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.funnel__table th {
	text-align: left; font-size: 12px; text-transform: uppercase;
	letter-spacing: .04em; opacity: .65; padding: 6px 8px;
	border-bottom: 1px solid rgba(255,255,255,.12); position: sticky; top: 0;
	background: #1b2130;
}
.funnel__row td { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.06); }
.funnel__lvl span { opacity: .7; font-size: 12px; }
.funnel__num { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.funnel__conv, .funnel__conv2 { text-align: right; font-variant-numeric: tabular-nums; }
.funnel__conv { font-weight: 700; }
.funnel__conv2 { opacity: .6; font-size: 13px; }
.funnel__barcell { width: 34%; }
.funnel__bar {
	display: inline-block; height: 12px; border-radius: 6px; min-width: 2px;
	background: linear-gradient(90deg, #46d06a, #7ad6ff);
}
.funnel__row--drop .funnel__conv { color: #ff8a8a; }
.funnel__row--drop .funnel__bar { background: linear-gradient(90deg, #e0704a, #ffb347); }

.objects__group { margin-bottom: 18px; }
.objects__title {
	font-weight: 800; font-size: 16px; margin-bottom: 10px;
	border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 6px;
}
.objects__count {
	font-size: 12px; font-weight: 700; opacity: .7;
	background: rgba(255,255,255,.1); padding: 1px 8px; border-radius: 10px; margin-left: 4px;
}
.objects__empty { opacity: .55; font-style: italic; padding: 2px 0 4px; }
.objects__grid {
	display: grid; gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.object-card {
	background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
	border-radius: 10px; padding: 12px 8px; text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.object-card__icon {
	width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
}
.object-card__icon img { max-width: 60px; max-height: 60px; object-fit: contain;
	filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.object-card__cube { font-size: 40px; opacity: .8; }
.object-card__name { font-weight: 700; font-size: 14px; }
.object-card__model { font-size: 11px; opacity: .55; font-family: monospace; word-break: break-all; }

/* ---------- Адаптивность ---------- */
@media (max-width: 1024px) { :root { --side-w: 216px; } }
@media (max-width: 720px) {
	:root { --side-w: 168px; --top-h: 56px; --gap: 10px; }
	.topbar__logo span { display: none; }
	.crop-slot { width: 60px; padding: 6px 4px; }
	.crop-slot img { width: 36px; height: 36px; }
	.crops-bar__head { font-size: 13px; }
}
@media (max-width: 480px) {
	:root { --side-w: 124px; }
	.objects__grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
	.object-card__icon { width: 52px; height: 52px; }
}

/* админ: быстрый переход на уровень/задание */
.admin-goto { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.admin-goto label { font-size: 12px; color: #cdd6e6; display: flex; align-items: center; gap: 3px; }
.admin-goto select { background: #1d2740; color: #eaf0ff; border: 1px solid #36507e; border-radius: 5px; padding: 2px 4px; }

/* Админ: настройки сайта (подвал + Метрика) */
.site-field { display: block; margin: 14px 0; }
.site-field > span { display: block; font-size: 13px; opacity: .8; margin-bottom: 6px; }
.site-field textarea, .site-field input {
	width: 100%; box-sizing: border-box; padding: 9px 11px;
	background: rgba(0,0,0,.28); color: var(--text);
	border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
	font-family: inherit; font-size: 14px; resize: vertical;
}
.site-field textarea:focus, .site-field input:focus { outline: none; border-color: var(--gold); }
.site-hint { font-size: 12px; opacity: .6; margin: 6px 0 14px; }
.site-actions { display: flex; align-items: center; gap: 14px; }
.site-status { font-size: 13px; opacity: .85; }

/* Согласие на обработку перс. данных в форме регистрации */
.consent-row {
	display: flex; align-items: flex-start; gap: 9px;
	margin: 4px 0 10px; font-size: 13px; line-height: 1.4; color: var(--text);
	text-align: left; cursor: pointer;
}
.consent-row input[type="checkbox"] { margin-top: 2px; width: 16px; height: 16px; flex: 0 0 auto; cursor: pointer; }
.consent-row a { color: #7ab8ff; text-decoration: underline; }
.consent-row a:hover { color: #a8d1ff; }

/* Правовой текст в модалке (согласие/политика) — читаемый скролл */
.modal--legal { z-index: 60; }
.legal-text {
	white-space: pre-wrap;
	max-height: 62vh; overflow-y: auto;
	font-size: 14px; font-weight: 400; line-height: 1.6;
	color: #e7ddf3; text-align: left;
	padding-right: 6px;
}