/* Пиксельный шрифт игры (как в iOS — PressStart2P) */
@font-face {
  font-family: 'PressStart2P';
  src: url('PressStart2P-Regular.ttf') format('truetype');
  font-display: swap;
}

/* Overlay поверх всего. Фон бежевый #F1EFEB как iOS-сцена; точечная сетка
   рисуется внутри SVG (совпадает с клетками), здесь — сплошной фон под letterbox. */
.neurons-overlay {
  position: fixed; inset: 0; z-index: 100000;
  background: #F1EFEB;
  display: none;
}
/* Появление: фон проявляется плавно (только opacity, без зум-скачка). */
.neurons-overlay.open { display: block; animation: neurons-overlay-in .22s ease-out; }
@keyframes neurons-overlay-in { from { opacity: 0; } to { opacity: 1; } }
.neurons-svg { width: 100%; height: 100%; display: block; }

/* Порядок появления контента: сначала дороги, потом нейроны — сразу на местах
   (fade-in, без scale-«скачков»). С fill both: во время delay невидимы (backwards),
   после — остаются (forwards). При reduced-motion анимации off → базово видимы. */
@keyframes ng-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* Дорога — L-образная бежевая лента (как iOS #DDDACD), скруглённые углы/концы */
.neuron-road {
  stroke: #DDDACD; stroke-width: 44; stroke-linecap: round; stroke-linejoin: round; fill: none;
  animation: ng-fade-in .35s ease-out .1s both;
}
/* Свежепостроенная дорога «прилетает» из левого-верхнего угла, вырастая из точки
   (как iOS animateRoadSegment: move + scale 0.1→1 + fadeIn, easeOut). Вектор от
   центра дороги к углу сцены передаётся в --ng-dx/--ng-dy (user units viewBox). */
.neuron-road.ng-fly {
  transform-box: fill-box; transform-origin: center;
  animation: ng-road-fly 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ng-road-fly {
  from { transform: translate(var(--ng-dx, 0), var(--ng-dy, 0)) scale(0.1); opacity: 0; }
  to   { transform: translate(0, 0) scale(1); opacity: 1; }
}
/* Декор-ландшафт (деревья/кактусы/2dot): пиксельный, появляется рано — с фоном,
   и «прыгает» покадрово СИНХРОННО с нейронами (тот же neuron-breathe). */
.ng-decor { image-rendering: pixelated; transform-box: fill-box; animation: ng-fade-in .3s ease-out both, neuron-breathe 1.1s linear infinite; }

/* HUD — пиксельный шрифт (как iOS), тёмный текст на светлом бежевом фоне */
.neurons-hud {
  position: absolute; top: 18px; left: 18px;
  color: #2E2E32; font-family: 'PressStart2P', monospace; font-size: 11px; line-height: 1.5;
  display: flex; gap: 22px; align-items: center;
}
/* Крестик: flex-центрирование — символ × ровно по центру кнопки */
.neurons-close {
  position: absolute; top: 12px; right: 12px;
  width: 40px; height: 40px; border: none; border-radius: 10px; padding: 0;
  background: rgba(0,0,0,0.07); color: #2E2E32; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;
}
.neurons-close:hover { background: rgba(0,0,0,0.14); }

/* Дыхание ПОКАДРОВОЕ (как iOS / старые игры): мгновенные скачки верх-низ с
   паузами. Все элементы дышат СИНХРОННО — один период, без фазового сдвига. */
.br { animation: neuron-breathe 1.1s linear infinite; }
@keyframes neuron-breathe { 0%, 49% { transform: translateY(0); } 50%, 100% { transform: translateY(-3px); } }

/* Нейроны появляются ПОСЛЕ дорог (delay > длительности дорог), сразу на своих
   местах — мягкий fade-in без scale-«скачков». */
.neuron { animation: ng-fade-in .35s ease-out .5s both; }

/* Состояние нейрона (как iOS): подключённый «прыгает» (думает) и НЕ водит глазами;
   одинокий — стоит на месте и водит глазами в поиске связи. */
.neuron.lonely .br { animation: none; }
.neuron.connected .ng-eyes { animation: none; }

/* Движение глаз — покадрово, синхронно: центр → влево → центр → вправо → центр */
.ng-eyes { animation: ng-eyes 5s linear infinite; }
@keyframes ng-eyes {
  0%, 18% { transform: translateX(0); }
  22%, 40% { transform: translateX(-1.5px); }
  44%, 62% { transform: translateX(0); }
  66%, 84% { transform: translateX(1.5px); }
  88%, 100% { transform: translateX(0); }
}
/* Реакция нейрона при постройке дороги — короткий всплеск (scale-пульс) */
.ng-body.react { animation: ng-react .45s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes ng-react { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* Кнопка постройки + подсказка под ней — внизу по центру */
.neurons-build-wrap { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.neurons-build-btn {
  border: none; border-radius: 12px; padding: 14px 22px; cursor: pointer;
  background: #2E2E32; color: #F1EFEB;
  font-family: 'PressStart2P', monospace; font-size: 11px; line-height: 1.4;
}
.neurons-build-btn:hover { background: #3c3c42; }
.neurons-build-btn[disabled] { opacity: .45; cursor: default; }
/* Подсказка под кнопкой — читабельный обычный шрифт, приглушённый */
.neurons-hint { max-width: 340px; text-align: center; color: #6b6b6b; font-family: 'PressStart2P', monospace; font-size: 9px; line-height: 1.7; }
/* Intro-карточка по центру (первый заход) */
.neurons-intro { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); max-width: 420px; background: #FFFFFF; border-radius: 14px; padding: 26px 28px; text-align: center; box-shadow: 0 10px 34px rgba(0,0,0,0.16); }
.neurons-intro p { margin: 0 0 20px; color: #2E2E32; font-family: 'PressStart2P', monospace; font-size: 11px; line-height: 1.9; }
.neurons-intro-ok { border: none; border-radius: 10px; padding: 13px 22px; background: #2E2E32; color: #F1EFEB; cursor: pointer; font-family: 'PressStart2P', monospace; font-size: 11px; line-height: 1; }
.neurons-intro-ok:hover { background: #3c3c42; }
/* Событийное «письмо» — карточка по центру (как intro), пиксельный шрифт */
.neurons-msg { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); max-width: 420px; background: #FFFFFF; border-radius: 14px; padding: 26px 28px; text-align: center; box-shadow: 0 10px 34px rgba(0,0,0,0.16); }
.neurons-msg-title { margin: 0 0 12px; color: #2E2E32; font-family: 'PressStart2P', monospace; font-size: 13px; line-height: 1.5; }
.neurons-msg p:not(.neurons-msg-title) { margin: 0 0 20px; color: #2E2E32; font-family: 'PressStart2P', monospace; font-size: 11px; line-height: 1.9; }
.neurons-msg-ok { border: none; border-radius: 10px; padding: 13px 22px; background: #2E2E32; color: #F1EFEB; cursor: pointer; font-family: 'PressStart2P', monospace; font-size: 11px; line-height: 1; }
.neurons-msg-ok:hover { background: #3c3c42; }

/* Карточка нейрона по тапу (как iOS-шторка): бежевый верх с крупным живым
   персонажем и именем, белый низ с выбором цвета антенны, подсказка Esc. */
.neurons-sheet { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 340px; max-width: 86vw; background: #FFFFFF; border-radius: 22px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,0.20); animation: ng-fade-in .18s ease-out; }
.neurons-sheet-top { position: relative; background: #F1EFEB; padding: 34px 24px 26px; text-align: center; }
.neurons-sheet-char { display: flex; justify-content: center; margin-bottom: 18px; }
.neurons-sheet-svg { width: 184px; height: 202px; image-rendering: pixelated; }
.neurons-sheet-close { position: absolute; top: 10px; right: 12px; z-index: 1; width: 34px; height: 34px; border: none; border-radius: 9px; background: rgba(0,0,0,0.06); color: #6b6b6b; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.neurons-sheet-close:hover { background: rgba(0,0,0,0.12); }
.neurons-sheet-name { margin: 0; color: #2E2E32; font-family: 'PressStart2P', monospace; font-size: 13px; line-height: 1.5; }
.neurons-sheet-bottom { background: #FFFFFF; padding: 22px 24px 8px; }
.neurons-swatches { display: flex; gap: 14px; justify-content: center; }
.ng-swatch { width: 66px; height: 66px; border-radius: 14px; border: 2px solid #E2E0DA; background: #FFFFFF; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ng-swatch.sel { border-color: #2E2E32; border-width: 3px; }
.ng-swatch:hover { border-color: #C8C6C1; }
.ng-swatch.sel:hover { border-color: #2E2E32; }
.ng-swatch span { width: 38px; height: 38px; border-radius: 8px; display: block; }
.neurons-sheet-hint { margin: 0; padding: 14px 0 18px; text-align: center; color: #9a988f; font-family: 'PressStart2P', monospace; font-size: 8px; line-height: 1.5; }

/* Лёгкий неблокирующий тост (частые события — постройка дороги). Сам исчезает. */
.neurons-toast {
  position: absolute; left: 50%; top: 64px; transform: translateX(-50%);
  background: #2E2E32; color: #F1EFEB; font-family: 'PressStart2P', monospace;
  font-size: 10px; line-height: 1.5; padding: 10px 16px; border-radius: 10px;
  opacity: 0; pointer-events: none; white-space: nowrap;
}
.neurons-toast.show { animation: ng-toast 2s ease-out; }
@keyframes ng-toast {
  0% { opacity: 0; transform: translate(-50%, -8px); }
  15% { opacity: 1; transform: translate(-50%, 0); }
  80% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -8px); }
}

/* Треснувшая дорога — оранжевая, пульсирует толщиной (как iOS) */
.neuron-road.cracked { stroke: #FF5816; animation: ng-crack 1.2s ease-in-out infinite; }
@keyframes ng-crack { 0%, 100% { stroke-width: 44; } 50% { stroke-width: 40; } }

@media (prefers-reduced-motion: reduce) {
  .neuron, .neuron-road, .neuron-road.ng-fly, .neuron-road.cracked, .ng-decor, .ng-eyes, .ng-body.react, .br, .br2, .br3, .neurons-overlay.open { animation: none; }
  /* Тост без анимации был бы невидим (базовый opacity:0) — показываем статично. */
  .neurons-toast.show { animation: none; opacity: 1; }
}