/* Конфетная фабрика — карамельная тема. Вся графика — inline SVG (data URI),
   без внешних ресурсов; анимации — чистый CSS. */

:root {
	--bg: #fdf6ec;          /* крем */
	--ink: #4a2c17;         /* шоколад */
	--ink-soft: #7a5b41;    /* какао */
	--accent: #d94f70;      /* малина */
	--accent-dark: #b23a58;
	--caramel: #f0b64b;
	--caramel-dark: #8a6410;
	--mint: #79cf8d;
	--mint-dark: #1d6b33;
	--wrap-grey: #d8d3cc;
	--paper: #fffdf8;       /* карточки/ячейки таблиц */
	--line: #e8d7bd;        /* рамки */
}

* { box-sizing: border-box; }
body {
	margin: 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--ink);
	background-color: var(--bg);
	/* едва заметные контурные конфеты по всему фону */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%23f3e7d2' stroke-width='2'%3E%3Cg transform='translate(34,40) rotate(-18)'%3E%3Cellipse rx='11' ry='8'/%3E%3Cpath d='M-11 0l-9 -6v12z'/%3E%3Cpath d='M11 0l9 -6v12z'/%3E%3C/g%3E%3Cg transform='translate(118,120) rotate(22)'%3E%3Cellipse rx='11' ry='8'/%3E%3Cpath d='M-11 0l-9 -6v12z'/%3E%3Cpath d='M11 0l9 -6v12z'/%3E%3C/g%3E%3Ccircle cx='124' cy='34' r='9'/%3E%3Cline x1='124' y1='43' x2='124' y2='62'/%3E%3C/g%3E%3C/svg%3E");
}
.page { max-width: 1400px; margin: 0 auto; padding: 16px; }
.page.narrow { max-width: 480px; }

h1, h2, h3 { color: var(--ink); }
h1 { font-size: 1.7rem; margin: 8px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* леденец у главного заголовка */
h1::before {
	content: "";
	flex: none;
	width: 30px; height: 30px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26' width='24' height='26'%3E%3Cline x1='12' y1='12' x2='12' y2='25' stroke='%23b98a5a' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='9' r='8' fill='%23d94f70'/%3E%3Cpath d='M12 4a5 5 0 1 1 -5 5a3.5 3.5 0 1 0 3.5 -3.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* карамельное полосатое подчёркивание */
h2 {
	font-size: 1.2rem; margin: 18px 0 8px; padding-bottom: 5px;
	display: table;
	border-bottom: 4px solid transparent;
	border-image: repeating-linear-gradient(120deg, var(--accent) 0 8px, #fff 8px 12px, var(--caramel) 12px 20px, #fff 20px 24px) 1;
}
a { color: var(--accent-dark); }
code { background: #f3e6d2; padding: 1px 5px; border-radius: 6px; }

.board-header { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.timer {
	font-size: 2.2rem; font-weight: 700; font-variant-numeric: tabular-nums;
	color: var(--ink);
	background: var(--paper);
	border: 2px solid var(--line);
	border-radius: 14px;
	padding: 2px 18px;
	box-shadow: 0 2px 0 var(--line);
}
.offline { background: #c0392b; color: #fff; padding: 4px 12px; border-radius: 999px; }
.team-badge, .status-badge {
	font-size: 1rem; font-weight: 600;
	background: var(--caramel); color: var(--ink);
	padding: 2px 14px; border-radius: 999px;
}

.error { color: #c0392b; }
.error-box { background: #fdecea; border: 1px solid #d98a80; padding: 8px 12px; border-radius: 10px; margin: 8px 0; }
.warn-box { background: #fff6dd; border: 1px solid #e5c67a; padding: 8px 12px; border-radius: 10px; margin: 12px 0; }
.hint { color: var(--ink-soft); font-size: 0.9rem; }

table.list { border-collapse: collapse; margin: 8px 0; width: auto; background: var(--paper); }
table.list th, table.list td { border: 1px solid var(--line); padding: 4px 10px; text-align: left; vertical-align: top; }
table.list th { background: #f6e8d3; }
tr.disabled-event td { text-decoration: line-through; color: #a08c76; }
tr.disabled-event td.actions { text-decoration: none; }

.login-form label { display: block; margin: 10px 0; }
.login-form input { display: block; width: 100%; padding: 7px; margin-top: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
fieldset { margin: 12px 0; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,253,248,0.7); }
fieldset label { display: inline-block; margin: 6px 12px 6px 0; }
fieldset input, fieldset textarea, fieldset select { padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }

button, .button {
	display: inline-block; padding: 6px 16px; border: none; border-radius: 999px;
	background: var(--accent); color: #fff; font-size: 0.95rem; cursor: pointer; text-decoration: none;
	box-shadow: 0 2px 0 var(--accent-dark);
}
button:active, .button:active { transform: translateY(1px); box-shadow: none; }
button.secondary, .button.secondary { background: #a58a70; box-shadow: 0 2px 0 #7a5b41; }
form.inline { display: inline; }
.actions form { margin-right: 6px; }

/* Колонки команд: одинаковые карточки независимо от длины имён */
.teams {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 320px));
	gap: 20px;
	margin: 12px 0;
}
.team-col {
	display: flex; flex-direction: column;
	background: var(--paper);
	border: 2px solid var(--line);
	border-radius: 14px;
	padding: 10px 14px 14px;
	box-shadow: 0 2px 0 var(--line);
}
.team-col h3 { margin: 4px 0; overflow-wrap: anywhere; }
.team-col .stats { margin: 4px 0 8px; font-size: 1.05rem; }
.team-col .stats b { font-variant-numeric: tabular-nums; }
/* Конвейер + сетка — единым блоком прижаты к низу карточки: у карточек одного
   ряда конвейер и ячейки на одном уровне, зазор между ними одинаков, а длинное
   имя не сдвигает конвейер относительно сетки. */
.team-col .team-bottom { margin-top: auto; display: flex; flex-direction: column; }
.team-col .team-bottom .speed-stripe { margin-bottom: 10px; }

/* Сетка задач: простые ячейки (тема — в цветах). Отступы с запасом под
   бейджи, торчащие над ячейкой, — чтобы не наезжали на соседей. */
.grid { display: grid; gap: 10px 6px; padding-top: 8px; }
.cell {
	position: relative;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-width: 46px; min-height: 40px; padding: 2px 8px;
	font-weight: 700;
	color: #6d6459;
	background: #ddd8d1;
	border: 1px solid rgba(74,44,23,0.12);
	border-radius: 8px;
	line-height: 1.05;
}
.cell .solved-time {
	font-size: 0.62rem; font-weight: 700; opacity: 0.85;
	font-variant-numeric: tabular-nums; margin-top: 1px;
}
.cell.hidden { background: #ddd8d1; }
.cell.bought { background: var(--caramel); color: var(--caramel-dark); }
.cell.passed { background: var(--mint); color: var(--mint-dark); }
.cell a { color: inherit; text-decoration: underline; }
.cell .tests-badge {
	position: absolute; top: -8px; right: -6px; z-index: 1;
	background: var(--accent); color: #fff; border-radius: 50%;
	font-size: 0.7rem; min-width: 17px; height: 17px; line-height: 17px; text-align: center;
	box-shadow: 0 1px 0 var(--accent-dark);
}
.cell .solved-badge {
	position: absolute; top: -8px; right: -6px; z-index: 1;
	background: var(--mint-dark); color: #fff; border-radius: 50%;
	font-size: 0.7rem; width: 17px; height: 17px; line-height: 17px; text-align: center;
}
.cell.clickable { cursor: pointer; }
.legend .cell { display: inline-flex; margin-right: 8px; min-height: 30px; }

/* Конвейер фабрики: лента с конфетами, скорость = скорость производства */
.speed-stripe {
	height: 16px; border-radius: 8px; overflow: hidden; margin: 4px 0;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='16'%3E%3Cg transform='translate(18,8)'%3E%3Cpath d='M-6 0l-4 -3v6z' fill='%23f0b64b'/%3E%3Cpath d='M6 0l4 -3v6z' fill='%23f0b64b'/%3E%3Cellipse rx='6' ry='4.5' fill='%23f0b64b'/%3E%3Cellipse rx='2.2' ry='4.5' fill='%23fff' fill-opacity='0.45'/%3E%3C/g%3E%3Cg transform='translate(54,8)'%3E%3Cpath d='M-6 0l-4 -3v6z' fill='%23e87d9a'/%3E%3Cpath d='M6 0l4 -3v6z' fill='%23e87d9a'/%3E%3Cellipse rx='6' ry='4.5' fill='%23e87d9a'/%3E%3Cellipse rx='2.2' ry='4.5' fill='%23fff' fill-opacity='0.45'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 0 / 72px 16px,
		linear-gradient(#6b4a2f, #503620);
	/* Движение ленты задаёт JS (requestAnimationFrame от настенных часов):
	   при ежесекундной перерисовке табло фаза не сбивается. */
	box-shadow: inset 0 2px 3px rgba(0,0,0,0.35);
}

/* Гистограмма запасов */
.histogram .bar-row { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.histogram .bar-label { width: 220px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.histogram .bar-track { flex: 1; background: #f1e3cb; border-radius: 999px; height: 28px; border: 1px solid var(--line); }
.histogram .bar {
	height: 100%;
	background: linear-gradient(180deg, #e87d9a, var(--accent) 55%, var(--accent-dark));
	border-radius: 999px;
	color: #fff; font-size: 0.85rem; line-height: 26px; padding: 0 10px 0 12px;
	/* полоска не уже своей подписи: числа не вылезают на трек */
	min-width: max-content; white-space: nowrap; transition: width 0.5s;
}

.two-col { display: flex; gap: 40px; flex-wrap: wrap; }

/* Меню ячейки в админке */
.cell-menu {
	position: absolute; z-index: 10; background: var(--paper); border: 2px solid var(--line);
	border-radius: 12px; padding: 10px; box-shadow: 0 6px 16px rgba(74,44,23,0.25);
	display: flex; flex-direction: column; gap: 6px; min-width: 220px;
}
.cell-menu button:disabled { background: #cfc4b5; box-shadow: none; cursor: not-allowed; }

/* Собственная таблица команды: запас под бейджи и кнопку покупки */
#own-table td { padding: 10px; text-align: center; }
#own-table th { vertical-align: middle; }

/* Кнопка покупки в таблице команды */
.buy-btn { display: block; margin: 8px auto 0; padding: 3px 12px; font-size: 0.85rem; }
.buy-btn:disabled { background: #cfc4b5; box-shadow: none; cursor: wait; }

/* Условие математической задачи текстом (в ячейке своей таблицы) */
.cell-statement {
	margin-top: 6px; padding: 6px 8px; max-width: 22em;
	background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
	font-size: 0.85rem; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Форма ответа (математический режим) */
.answer-form { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 8px; justify-content: center; }
.answer-input { width: 8em; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 0.85rem; }
.answer-form button { padding: 3px 10px; font-size: 0.85rem; }
.answer-form button:disabled { background: #cfc4b5; box-shadow: none; cursor: wait; }
.answer-msg { width: 100%; text-align: center; font-size: 0.85rem; font-weight: 600; }
.answer-msg.right { color: var(--mint-dark); }
.answer-msg.wrong { color: #c0392b; animation: answer-shake 0.4s; }
@keyframes answer-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

/* Сетка задач математического режима в форме */
.manual-level { margin: 8px 0; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; }
.manual-task { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.manual-task-label { min-width: 5em; padding-top: 4px; color: var(--ink-soft); font-size: 0.9rem; }
.manual-task textarea { flex: 1; min-width: 260px; }

details form { margin: 6px 0; display: flex; flex-direction: column; gap: 4px; }
details form label { font-size: 0.9rem; }
details summary { cursor: pointer; }

/* Победитель: постоянный баннер после финиша */
.winner-banner {
	display: flex; align-items: center; gap: 16px;
	margin: 14px 0; padding: 12px 20px;
	background: linear-gradient(120deg, #fff3d6, #ffe3ec);
	border: 2px solid var(--caramel);
	border-radius: 14px;
	box-shadow: 0 2px 0 var(--line);
}
.winner-trophy { font-size: 2.4rem; line-height: 1; }
.winner-title { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.winner-name { font-size: 1.5rem; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.winner-score { color: var(--accent-dark); font-weight: 600; }

/* Победитель: торжественная заставка в момент финиша */
.winner-overlay {
	position: fixed; inset: 0; z-index: 70;
	display: flex; align-items: center; justify-content: center;
	background: rgba(74,44,23,0.45);
	transition: opacity 1s;
}
.winner-overlay.fade-out { opacity: 0; pointer-events: none; }
.winner-card {
	background: var(--paper);
	border: 3px solid var(--caramel);
	border-radius: 20px;
	padding: 32px 56px;
	text-align: center;
	box-shadow: 0 12px 40px rgba(0,0,0,0.35);
	animation: winner-pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1);
	max-width: 80vw;
}
.winner-overlay-trophy { font-size: 4rem; line-height: 1.2; animation: winner-bounce 1.2s ease-in-out infinite; }
.winner-overlay-name { font-size: 2.2rem; font-weight: 800; color: var(--ink); margin: 6px 0; overflow-wrap: anywhere; }
@keyframes winner-pop { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes winner-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Конфетти при решении задачи */
.candy-pop {
	position: absolute; z-index: 50; pointer-events: none;
	font-size: 21px; line-height: 1;
	animation: candy-pop 2.1s ease-out forwards;
}
@keyframes candy-pop {
	from { transform: translate(0, 0) rotate(0deg); opacity: 1; }
	80%  { opacity: 1; }
	to   { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

/* Финальный дождь из конфет */
.candy-rain {
	position: fixed; top: -40px; z-index: 60; pointer-events: none;
	font-size: 26px; line-height: 1;
	animation: candy-fall linear forwards;
}
@keyframes candy-fall {
	to { transform: translateY(108vh) rotate(var(--rot, 360deg)); }
}

@media (prefers-reduced-motion: reduce) {
	.speed-stripe { animation: none; }
	.candy-pop, .candy-rain { display: none; }
}

/* ==================== Тема «Токены и нейросети» ==================== */
body[data-theme="neuro"] {
	--bg: #eef1f8;
	--ink: #232946;
	--ink-soft: #5b6690;
	--accent: #6c5ce7;
	--accent-dark: #5246c9;
	--caramel: #7ee0f2;      /* «куплена»: голубое свечение чипа */
	--caramel-dark: #0f5e70;
	--paper: #fbfcff;
	--line: #d5dbef;
	/* контурные чипы и связи нейросети */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cg fill='none' stroke='%23dde3f3' stroke-width='2'%3E%3Crect x='24' y='28' width='26' height='26' rx='4'/%3E%3Cpath d='M24 34h-8M24 48h-8M50 34h8M50 48h8M31 28v-8M43 28v-8M31 54v8M43 54v8'/%3E%3Ccircle cx='120' cy='40' r='5'/%3E%3Ccircle cx='150' cy='70' r='5'/%3E%3Ccircle cx='118' cy='96' r='5'/%3E%3Cpath d='M124 43l21 24M146 73l-23 19'/%3E%3Crect x='60' y='120' width='26' height='26' rx='4'/%3E%3Cpath d='M60 126h-8M60 140h-8M86 126h8M86 140h8'/%3E%3C/g%3E%3C/svg%3E");
}
body[data-theme="neuro"] h1::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' width='26' height='26'%3E%3Crect x='5' y='5' width='16' height='16' rx='3' fill='%236c5ce7'/%3E%3Cpath d='M9 5V1M13 5V1M17 5V1M9 25v-4M13 25v-4M17 25v-4M5 9H1M5 13H1M5 17H1M25 9h-4M25 13h-4M25 17h-4' stroke='%235246c9' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='12' r='1.8' fill='%23fff'/%3E%3Ccircle cx='16' cy='12' r='1.8' fill='%23fff'/%3E%3Cpath d='M9.5 16.5c2 1.6 5 1.6 7 0' stroke='%23fff' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
body[data-theme="neuro"] .speed-stripe {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='16'%3E%3Cg transform='translate(18,8)'%3E%3Crect x='-5' y='-4' width='10' height='8' rx='1.5' fill='%237ee0f2'/%3E%3Cpath d='M-5 -2h-3M-5 2h-3M5 -2h3M5 2h3' stroke='%237ee0f2' stroke-width='1.4'/%3E%3C/g%3E%3Cg transform='translate(54,8)'%3E%3Cpath d='M1.5 -6L-3 1h3L-1.5 6L4 -1H1z' fill='%23b7a6ff'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 0 / 72px 16px,
		linear-gradient(#2b3151, #1d2240);
}
body[data-theme="neuro"] h2 {
	border-image: repeating-linear-gradient(120deg, var(--accent) 0 8px, #fff 8px 12px, #7ee0f2 12px 20px, #fff 20px 24px) 1;
}
body[data-theme="neuro"] .histogram .bar {
	background: linear-gradient(180deg, #9b8cff, var(--accent) 55%, var(--accent-dark));
}
body[data-theme="neuro"] .winner-banner {
	background: linear-gradient(120deg, #e5e0ff, #d8f4fb);
	border-color: var(--accent);
}
body[data-theme="neuro"] .team-badge,
body[data-theme="neuro"] .status-badge { background: #cfd8ff; }

/* ==================== Тема «Тапаем хомяка» ==================== */
body[data-theme="hamster"] {
	--bg: #fff3dd;
	--ink: #4a3413;
	--ink-soft: #86683a;
	--accent: #f0940a;
	--accent-dark: #c26e03;
	--caramel: #ffd34d;
	--caramel-dark: #7a5a00;
	--paper: #fffaf0;
	--line: #eeddb8;
	/* контурные монеты и лапки */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='165' height='165'%3E%3Cg fill='none' stroke='%23f3e2bd' stroke-width='2'%3E%3Ccircle cx='38' cy='42' r='14'/%3E%3Cpath d='M38 34v16M33 38h10M33 46h10'/%3E%3Ccircle cx='128' cy='118' r='14'/%3E%3Cpath d='M128 110v16M123 114h10M123 122h10'/%3E%3Cg transform='translate(120,36)'%3E%3Cellipse cx='0' cy='6' rx='6' ry='5'/%3E%3Ccircle cx='-6' cy='-3' r='2.4'/%3E%3Ccircle cx='0' cy='-5' r='2.4'/%3E%3Ccircle cx='6' cy='-3' r='2.4'/%3E%3C/g%3E%3Cg transform='translate(46,124)'%3E%3Cellipse cx='0' cy='6' rx='6' ry='5'/%3E%3Ccircle cx='-6' cy='-3' r='2.4'/%3E%3Ccircle cx='0' cy='-5' r='2.4'/%3E%3Ccircle cx='6' cy='-3' r='2.4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
body[data-theme="hamster"] h1::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='12' fill='%23f0b429'/%3E%3Ccircle cx='13' cy='13' r='9.5' fill='none' stroke='%23c98a06' stroke-width='1.6'/%3E%3Ccircle cx='7.5' cy='7' r='3' fill='%23f0b429' stroke='%23c98a06' stroke-width='1.2'/%3E%3Ccircle cx='18.5' cy='7' r='3' fill='%23f0b429' stroke='%23c98a06' stroke-width='1.2'/%3E%3Ccircle cx='10' cy='12' r='1.4' fill='%234a3413'/%3E%3Ccircle cx='16' cy='12' r='1.4' fill='%234a3413'/%3E%3Cellipse cx='13' cy='15.5' rx='1.6' ry='1.1' fill='%23c26e03'/%3E%3Cpath d='M10.5 18c1.6 1.2 3.4 1.2 5 0' stroke='%234a3413' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
body[data-theme="hamster"] .speed-stripe {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='16'%3E%3Cg transform='translate(18,8)'%3E%3Ccircle r='5.5' fill='%23ffd34d'/%3E%3Ccircle r='3.8' fill='none' stroke='%23c98a06' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='translate(54,8)'%3E%3Ccircle r='5.5' fill='%23f0b429'/%3E%3Ccircle r='3.8' fill='none' stroke='%23a06d00' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 0 / 72px 16px,
		linear-gradient(#6e4f1e, #543a10);
}
body[data-theme="hamster"] h2 {
	border-image: repeating-linear-gradient(120deg, var(--accent) 0 8px, #fff 8px 12px, #ffd34d 12px 20px, #fff 20px 24px) 1;
}
body[data-theme="hamster"] .histogram .bar {
	background: linear-gradient(180deg, #ffc25e, var(--accent) 55%, var(--accent-dark));
}
body[data-theme="hamster"] .winner-banner {
	background: linear-gradient(120deg, #ffedbf, #ffe1c2);
	border-color: var(--accent);
}

@media (max-width: 700px) {
	.timer { font-size: 1.5rem; }
	.histogram .bar-label { width: 100px; }
	.teams { gap: 16px; }
}