/* ===================================================== */
/* ============ ФОН ИГРЫ (картинка + затемнение) ======== */
/* ===================================================== */
/*
  Как настроить:
  - картинка:            --bg-image
  - сила затемнения:     --bg-dim-top (сверху) и --bg-dim-bottom (снизу), 0 = без затемнения, 1 = чёрный
  - прозрачность карточек: --bg-card / --bg-secondary (последнее число — непрозрачность)
  Файл подключается ПОСЛЕДНИМ, поэтому перебивает старые цвета фона.
*/

:root{
  --bg-image: url("assets/bg_farm.webp?v=1790314825466");
  --bg-dim-color: 22, 23, 44;      /* цвет затемнения (тёмно-синий, как у игры) */
  --bg-dim-top: .45;               /* сверху светлее — видно небо */
  --bg-dim-bottom: .78;            /* снизу темнее — там кнопки и текст */

  /* карточки становятся полупрозрачными, чтобы сквозь них чуть просвечивал фон */
  --bg-card:      rgba(30, 32, 58, .80);
  --bg-secondary: rgba(30, 32, 58, .55);
}

html{
  background: var(--bg-primary);   /* запасной цвет, пока картинка грузится */
}

body{
  background: transparent;
}

/* сама картинка: фиксирована под всем интерфейсом и не скроллится вместе с ним */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      rgba(var(--bg-dim-color), var(--bg-dim-top)),
      rgba(var(--bg-dim-color), var(--bg-dim-bottom))
    ),
    var(--bg-image) center / cover no-repeat;
}

/* шапка: полупрозрачная с размытием того, что под ней */
.header{
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}