/* =========================================================================
   base.css - сброс стилей, базовая типографика
   Фон — cubes-bg.js (плавающие изометрические кубы).
   ========================================================================= */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* iOS: не раздувать шрифты при повороте экрана в альбомную ориентацию */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100svh;          /* мобильные: без скачка от адресной строки */
  font-family: var(--font-body);
  color: var(--text);
  background-color: #101218;   /* тёмный край графитового радиального фона (фолбэк) */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Отклик на тап: серый системный блик заменяем на лаймовый в цвет бренда.
     Полностью убирать нельзя — :active-состояний в проекте почти нет (4 на весь
     сайт), и без подсветки тапы по ссылкам/карточкам казались бы «непрожатыми». */
  -webkit-tap-highlight-color: rgba(184, 255, 60, 0.15);
}

/* ── МОБИЛЬНЫЕ БАЗОВЫЕ ПРАВИЛА ──
   iOS Safari АВТОМАТИЧЕСКИ ЗУМИТ страницу при фокусе на поле с font-size < 16px
   (и обратно уже не отзумливает). Поэтому на узких экранах у всех полей ввода
   минимум 16px — это касается и обязательной регистрации ника, и вывода GEM.
   Правило общее: новые поля на любых страницах чинятся автоматически.
   Кнопки сюда НЕ входят: они зум не вызывают, а принудительные 16px сломали бы
   мелкие подписи (кнопки cookie-баннера, фильтры периода и т.п.).
   ⚠️ !important обязателен: в проекте размеры часто заданы АТРИБУТОМ style=""
   (напр. поля дат в окне «История» профиля — 12px), а инлайн-стиль перебивает
   обычное правило, и защита молча не сработала бы именно там, где нужна. */
@media (max-width: 860px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea { font-size: max(16px, 1em) !important; }
}

/* ── Фон с плавающими кубами (cubes-bg.js) ── */
.toxic-cubes-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* База — тот же радиальный графитовый градиент, что на фоне аватаров
     (#1b1e26 → #101218). Синхронно с cubes-bg.js. Сверху — едва заметные
     лаймовые пятна для фирменного оттенка. */
  background:
    radial-gradient(circle at 18% 18%, rgba(184,255,60,0.05), transparent 24%),
    radial-gradient(circle at 82% 72%, rgba(57,255,20,0.035), transparent 28%),
    radial-gradient(circle at 50% 50%, rgba(184,255,60,0.02), transparent 34%),
    radial-gradient(ellipse at 38% 30%, #1b1e26 0%, #101218 72%);
}
.toxic-cubes-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Мягкая виньетка — не уводит края в чёрный, чтобы графит из радиального
     градиента оставался виден (как на фоне аватара). */
  background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.10) 55%, rgba(0,0,0,0.34) 100%);
  pointer-events: none;
}
/* Тёмная вуаль НАД кубами (но ПОД контентом): приглушает яркость/свечение
   движущихся кубов, чтобы текст читался. Сила регулируется альфой (~0.4–0.6). */
.toxic-cubes-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;                       /* выше #toxic-cubes-canvas (z-index:2) */
  background: rgba(16, 18, 24, 0.5);
  pointer-events: none;
}
#toxic-cubes-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0 6px rgba(184,255,60,0.04));
}

/* ── Типографика ── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}

p { line-height: 1.65; color: var(--text-dim); }

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

::selection {
  background: var(--accent-glow);
  color: var(--text);
}

/* Контейнер */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Eyebrow / технический лейбл */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}