/* style.css — CELLIO Jam Kit 2: тёмная космическая тема («Вселенная Волны»). Цвета — в :root.
   Модули добавляют свои стили сами (тег <style> с префиксом .jk-<модуль>). RTL (арабский) — через [dir=rtl]. */
:root {
  --bg: #0a0f24;
  --panel: rgba(10, 15, 36, 0.82);
  --panel-solid: #141c3a;
  --line: rgba(94, 214, 232, 0.28);
  --text: #e6eaf5;
  --muted: #8f9bbd;
  --accent: #5ed6e8;      /* бирюза Волны */
  --accent2: #8a5cff;     /* фиолет Волны */
  --warm: #ffb347;        /* тёплый свет */
  --amber: #ffc857;
  --danger: #ff3d5a;
  --ok: #6fe39a;
  --radius: 14px;
  --font: "Segoe UI", "Noto Sans", Tahoma, Arial, sans-serif;
  --text-scale: 1;        /* JK.Settings: размер текста */
  --vs: 1; --vx: 0px; --vy: 0px;  /* масштаб и сдвиг сцены (ставит core.js) */
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #04060d; color: var(--text);
  font-family: var(--font);
  font-size: calc(16px * var(--text-scale));
  -webkit-user-select: none; user-select: none;
}

canvas#game { position: fixed; inset: 0; display: block; touch-action: none; }
.hidden { display: none !important; }
.muted { color: var(--muted); }

/* ---------- слой DOM-игры (карточки и т.п.) ---------- */
#game-dom { position: fixed; inset: 0; pointer-events: none; display: none; }
body.dom-game #game-dom { display: block; }
#game-dom > * { pointer-events: auto; }

/* ---------- меню и экраны ---------- */
#ui { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 20; }

.screen {
  pointer-events: auto;
  display: flex; flex-direction: column; gap: 12px;
  /* высота — с запасом под строку подсказок #menu-hint внизу: она не накрывает «Сбросить прогресс» / «Назад» */
  width: min(92vw, 540px); max-height: calc(100vh - 44px - 2.2em); overflow-y: auto;
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(6px);
}
.screen.wide { width: min(94vw, 760px); }
.screen p { margin: 0; line-height: 1.45; white-space: pre-line; }   /* \n в about.third, about.ai, тексте концовки — новая строка */
#settings-custom { display: flex; flex-direction: column; gap: 12px; }
#settings-custom:empty { display: none; }

.title { margin: 0 0 4px; font-size: 2.6em; font-weight: 700; letter-spacing: 0.02em; text-align: center; color: var(--text); text-shadow: 0 0 22px rgba(94, 214, 232, 0.45); }
.title.small { font-size: 1.8em; }
.subtitle { margin: 0 0 14px; text-align: center; color: var(--muted); }
.section-title { margin-top: 10px !important; color: var(--accent); font-weight: 600; }
.about-name { font-size: 1.3em; font-weight: 600; color: var(--accent); }

.btn {
  display: block; width: 100%;
  padding: 12px 16px;
  font: inherit; font-size: 1.1em; color: var(--text);
  background: rgba(20, 28, 58, 0.9);
  border: 1px solid rgba(94, 214, 232, 0.18); border-radius: 10px;
  cursor: pointer; text-align: center;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.btn:focus { outline: none; background: rgba(94, 214, 232, 0.16); border-color: var(--accent); box-shadow: 0 0 0 2px rgba(94, 214, 232, 0.18); }
/* курсор над кнопкой, а фокус клавиатуры / геймпада на другой (экран открылся под неподвижной мышью): подсветка слабее —
   выделенной выглядит одна кнопка, та, что нажмётся по Enter. Любое движение мыши отдаёт фокус кнопке под курсором */
.btn:hover:not(:focus) { background: rgba(94, 214, 232, 0.07); border-color: rgba(94, 214, 232, 0.34); }
.btn:active { transform: scale(0.985); }
.btn.row, label.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: start; }
label.row { padding: 6px 4px; }
.val { color: var(--accent); }
.slider { display: flex; align-items: center; gap: 10px; }
.slider input[type=range] { width: 170px; accent-color: var(--accent); }
.slider input[type=range]:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
.pct { width: 48px; text-align: end; color: var(--muted); }
.todo { display: none; color: var(--amber); font-size: 0.9em; }
body.dev .todo { display: block; }

.progress { height: 10px; background: rgba(255, 255, 255, 0.08); border-radius: 6px; overflow: hidden; }
#loading-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width 0.2s; }

.credits { display: flex; flex-direction: column; gap: 6px; max-height: 38vh; overflow-y: auto; padding: 6px 2px; }
.credit { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px dashed rgba(255, 255, 255, 0.07); padding: 3px 0; }
.credit .role { color: var(--muted); }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; font-size: 1em; }
#hud.overlay { opacity: 0.35; }
.hud-area { position: absolute; display: flex; flex-direction: column; gap: 8px; }
#hud-tl { top: 14px; inset-inline-start: 14px; }
#hud-tr { top: 14px; inset-inline-end: 14px; align-items: flex-end; }
#hud-bl { bottom: 14px; inset-inline-start: 14px; }
#hud-br { bottom: 14px; inset-inline-end: 14px; align-items: flex-end; }
#hud-top { top: 12px; left: 50%; transform: translateX(-50%); align-items: center; }
#hud-hint { bottom: 16px; left: 50%; transform: translateX(-50%); align-items: center; color: var(--muted); font-size: 0.85em; text-align: center; text-shadow: 0 1px 3px #000; }
#hud-time { font-size: 1.05em; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; background: rgba(10, 15, 36, 0.55); border: 1px solid rgba(94, 214, 232, 0.18); padding: 3px 12px; border-radius: 999px; }

#menu-hint { position: fixed; bottom: 14px; left: 0; right: 0; text-align: center; color: var(--muted); font-size: 0.85em; pointer-events: none; z-index: 21; }

/* ---------- RTL ---------- */
[dir=rtl] .slider { flex-direction: row-reverse; }
[dir=rtl] body { font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif; }

/* ---------- узкие экраны / телефоны ---------- */
@media (max-width: 640px), (max-height: 520px) {
  .screen { padding: 18px; gap: 9px; }
  .title { font-size: 2em; }
  .btn { padding: 10px 12px; font-size: 1em; }
  .slider input[type=range] { width: 120px; }
}

/* уважение к настройке «меньше движения» */
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }