:root{ /* корневые переменные темы (квесты могут отличаться от общего) */
  --bg:#0b0f17; /* фон */ --fg:#e7e9ee; /* текст */ --muted:#98a2b3; /* приглушённый */ --card:#111826; /* фон карточек */
  --border:#203043; /* цвет границ */ --accent:#7c3aed; /* акцент градиента 1 */ --accent-2:#2563eb; /* акцент 2 */
  --radius:16px; /* радиус скругления */ --shadow:0 12px 28px rgba(0,0,0,.35); /* тень */
}
*{box-sizing:border-box} /* единая модель коробки */
html,body{height:100%} /* растягиваем высоту */
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;background:var(--bg);color:var(--fg)} /* базовое оформление */
/* Чтобы последнее задание не перекрывалось нижним меню */
body {
  padding-bottom: 100px; /* подстрой под реальную высоту нижнего меню */
}
.topbar{position:sticky;top:0;z-index:10;background:linear-gradient(180deg,rgba(17,24,38,.92),rgba(17,24,38,.68));backdrop-filter:blur(8px);border-bottom:1px solid var(--border)} /* верхняя панель */
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px} /* контейнер внутри топбара */
.title{margin:0;font-size:20px;font-weight:700} /* заголовок страницы */
.actions{display:flex;gap:8px;align-items:center} /* блок кнопок справа */
.container{max-width:960px;margin:16px auto;padding:0 12px} /* основной контейнер */
.stages{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px} /* список этапов */
.stage-tab{border:1px solid var(--border);background:#0f1522;color:var(--fg);padding:10px 14px;border-radius:12px;cursor:pointer} /* кнопка этапа */
.stage-tab.active{border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent-2))} /* активный этап */
.panel{display:none} /* панель этапа скрыта */
.panel.active{display:block} /* активная панель */
.task-list{display:flex;flex-direction:column;gap:12px} /* список задач */
.task{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)} /* карточка задачи */
.task__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px} /* шапка задачи */
.task__title{font-weight:700} /* заголовок задачи */
.task-list {
  padding-bottom: 100px; /* дополнительная страховка */
}
.badge{background:#182030;color:#98a2b3;border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:12px;white-space:nowrap} /* бейджик статуса */
.locked{opacity:.6} /* заблокированное состояние */
.answer{display:flex;flex-wrap:wrap;gap:8px;width:100%} /* контейнер ответа */
.answer input[type="text"]{flex:1 1 240px;min-width:200px;background:#0b1220;color:var(--fg);border:1px solid var(--border);border-radius:10px;padding:10px 12px;outline:none} /* поле ввода ответа */
.btn{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border:none;border-radius:10px;padding:10px 14px;cursor:pointer} /* кнопка отправки */
.btn:disabled{opacity:.5;cursor:not-allowed} /* отключенная кнопка */
.btn.outline{background:transparent;color:var(--fg);border:1px solid var(--border)} /* обводка-кнопка */
.modal{position:fixed;inset:0;display:none} /* модальное окно скрыто */
.modal[aria-hidden="false"]{display:block} /* отображение модалки */
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)} /* фон подложка */
.modal__dialog{position:relative;z-index:1;max-width:720px;margin:8vh auto;background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)} /* окно модалки */
.modal__header,.modal__footer{padding:14px 16px;border-bottom:1px solid var(--border)} /* шапка/подвал модалки */
.modal__footer{border-top:1px solid var(--border);border-bottom:none} /* убираем нижнюю границу */
.modal__body{padding:16px;color:var(--fg)} /* тело модалки */
.icon-btn{background:transparent;color:var(--fg);border:none;font-size:24px;cursor:pointer} /* кнопка иконка (закрыть) */
@media (max-width:480px){.title{font-size:18px}} /* адаптив уменьшает заголовок */

/* Grid cells (moved from main.css) */ /* сетка ячеек уровня */
.cells{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:8px 0 16px} /* сетка ячеек */
.cell{ border:1px solid var(--border); border-radius:12px; padding:10px; background:#141a2c} /* отдельная ячейка */
.cell.locked{ opacity:.55; filter:saturate(.4) } /* закрытая ячейка */
.cell .num{ font-weight:600; display:block; margin-bottom:8px } /* номер ячейки */
.cell .state{ font-size:12px; color:var(--muted) } /* статус */
.cell .answer{ width:100%; padding:8px; border-radius:8px; border:1px solid var(--border); background:#0e1424; color:#e7e9ee; margin:8px 0} /* поле ввода в ячейке */
.cell .send{ width:100%; } /* кнопка отправки */


/* Lock styling for quests */
.task.locked { opacity: 0.6; pointer-events: none; }
.task.locked .task__answer input,
.task.locked .task__answer button { opacity: 0.7; cursor: not-allowed; }