* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

/* Кастомный курсор */
body {
  background: #000;
  overflow: hidden;
  cursor: url("cursor.cur"), auto;
}

/* Фон: лёгкий дрейф + плавное появление */
.background {
  position: fixed;
  inset: 0;
  background-image: url("background-swedish-win.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0;
  animation:
    bg-fade 1.5s ease-out forwards,
    bg-drift 14s ease-in-out infinite;
}

/* Блок кнопок: твои координаты + плавный fade-in */
.button-stack {
  position: absolute;
  top: 9%;                         /* твои значения */
  left: calc(50% - 240px);         /* твои значения */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  z-index: 10;

  opacity: 0;
  animation: stack-fade 1.5s ease-out forwards;
}

/* Кнопки */
.btn-img {
  width: 200px;
  height: auto;
  cursor: url("cursor.cur"), pointer;
  user-select: none;
  -webkit-user-drag: none;

  /* переменные для магнита и глубины */
  --mx: 0px;
  --my: 0px;
  --rot: 0deg;
  --scale: 1;
  --ty: 0px;

  transform:
    translate(var(--mx), var(--my))
    translateY(var(--ty))
    scale(var(--scale))
    rotate(var(--rot));

  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}

/* Лёгкое покачивание на hover */
.btn-img:hover {
  --rot: -2deg;
  filter: brightness(1.03);
}

/* Глубина при нажатии */
.btn-img:active {
  --rot: 0deg;
  --ty: 6px;
  --scale: 0.88;
  filter: brightness(0.9);
}

/* Неактивная CA */
.btn-disabled {
  opacity: 0.4;
  pointer-events: none;
  --mx: 0px;
  --my: 0px;
  --rot: 0deg;
  --scale: 1;
  --ty: 0px;
  filter: none !important;
}

/* Уведомление "CA Copied" */
.ca-copied-toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  height: 42px;             /* подгони под свою картинку при необходимости */
  width: auto;
  opacity: 0;
  pointer-events: none;
  z-index: 30;

  transition: opacity 0.25s ease;
}

/* Активное состояние уведомления */
.ca-copied-toast.visible {
  opacity: 1;
}

/* Анимация дрейфа фона */
@keyframes bg-drift {
  0%   { background-position: center; }
  50%  { background-position: calc(50% + 2px) calc(50% + 2px); }
  100% { background-position: center; }
}

/* Плавное появление фона */
@keyframes bg-fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Плавное появление блока с кнопками */
@keyframes stack-fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Мобилка */
@media (max-width: 768px) {
  .button-stack {
    top: 12%;
    left: calc(50% - 140px);
  }

  .btn-img {
    width: 150px;
  }

  .ca-copied-toast {
    bottom: 28px;
    height: 36px;
  }
}
