:root{
  --mouth-top: 50.8%;
  --mouth-left: 50.3%;
}

/* Убираем белый фон автозаполнения */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: inherit !important;
  background-color: transparent !important;
  transition: background-color 5000s ease-in-out 0s; /* костыль для Chrome */
}

button {
  background: none;
  border: none;
  box-shadow: none;
  cursor: pointer;
}

body {
    background-image: url('../img/background/Spellhold_1.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center; /* <-- центрируем фон */
    
    color: white;
    font-family: "Norican", cursive, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 80dvh;
    margin: 0;
    padding: 20px;
    position: relative;
    box-sizing: border-box;
}

.norican-regular {
  font-family: "Norican", cursive;
  font-weight: 400;
  font-style: normal;
}


/* общий контейнер ворот */
.gates{
  
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
  z-index: 1;
  pointer-events: none;
  /* + 3D */
  perspective: 1100px;              /* ключ к глубине */
  perspective-origin: 50% 45%;      /* точка схода, можно подогнать */
  transform-style: preserve-3d;
}

.auth-container,
.regist-container {
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transform-origin: top center; /* <-- поворачиваем относительно верхнего края */
}
/* точка рта — абсолютная внутри ворот */
.gates #mouth-spot{
  position: absolute;
  top: var(--mouth-top) !important;
  left: var(--mouth-left) !important;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 10;
}

/* базовый стиль створок */
.tab-content1, .tab-content2 {	
  flex: 0 0 50vw;     /* половина экрана */
  height: 102dvh;
  background-repeat: no-repeat;
  background-size: auto 100%; 
  transition: transform 1.3s ease-in-out;
  overflow: hidden;
  pointer-events: none;
}

/* левая створка */
.tab-content2 {
  background-image: url('../img/games/wall_1.png');
  background-position: right center; /* стык – справа */
  margin-right: -0.75px;        
}

/* правая створка */
.tab-content1 {
  background-image: url('../img/games/wall_2.png');
  background-position: left center;  /* стык – слева */
  margin-left: -0.75px;              
}

/* анимация «разъезжаются» */
.tab-content2.open { transform: translateX(-70vw); }
.tab-content1.open { transform: translateX(70vw); }

.auth-container{
  position: fixed;
  bottom: -80%;
  /* было: left: 50%; transform: translateX(-50%); */
  left: 0;                 /* ново */
  right: 0;                /* ново */
  margin-left: auto;       /* ново */
  margin-right: auto;      /* ново */

  width: 70%;
  aspect-ratio: 3/4;
  background-image: url('../img/games/login_3.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 10;
  transition: bottom .7s ease-out;
  /* убери ЛЮБОЙ базовый transform здесь */
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform, opacity;
}

.auth-container.visible{ 
bottom: 15%; 
}


/* Поля — аккуратно на строчках */
.auth-container input[type="text"],
.auth-container input[type="password"] {
  position: absolute;
  width: 70%;       
  left: 50%;
  transform: translateX(-50%); 
  background: transparent;
  color: black;
  border: none;
  font-size: 20px;
  font-family: "Norican", cursive;
  text-align: center;
  padding: 5px 0;
  outline: none;
  box-shadow: none;
}


.auth-container input[type="text"] {
  top: 29%; /* немного ниже */
}

.auth-container input[type="password"] {
  top: 35%;
}

.auth-container.hide {
  transform: perspective(1000px) rotateX(80deg) scale(0.2);
  opacity: 0;
  transition: transform 1.5s ease-in, opacity 1s ease-in;
  transform-origin: center center;
  
}



/* Кнопка на печати */
.auth-button {
  position: absolute;
  left: 50%;     /* ближе к печати */
  top: 62%;   
transform: translateX(-50%);   /* ниже по центру печати */
  width: 55px;
  height: 55px; 
  
  border-radius: 50%;
  background-color: transparent;
  padding: 0;
  text-align: center;
  line-height: 60px;
  
  z-index: 11;
  animation: pulse 1.5s infinite;
}

/* регистрация */

.regist-container{
  position: fixed;
  bottom: -36%;
  /* было: left: 5%; transform: translateX(-50%); */
  left: 0;                 /* ново */
  right: 0;                /* ново */
  margin-left: auto;       /* ново */
  margin-right: auto;      /* ново */

  width: 70%;
  aspect-ratio: 3/4;
  background-image: url('../img/games/registered.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 9;
  transition: bottom .7s ease-out;
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform, opacity;
}

.regist-container.visible{ 
bottom: 15%; 
}


/* Поля — аккуратно на строчках */
.regist-container input[type="text"],
.regist-container input[type="password"] {
  position: absolute;
  width: 70%;       
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  color: black;
  border: none;
  font-size: 20px;
  font-family: "Norican", cursive;
  text-align: center;
  padding: 5px 0;
  outline: none;
  box-shadow: none;
}


.regist-container input[type="text"] {
  top: 27%; /* немного ниже */
}

.regist-container input[type="password"] {
  top: 35%;
}

.regist-container.hide {
  transform: perspective(1000px) rotateX(80deg) scale(0.2);
  opacity: 0;
  transition: transform 1.5s ease-in, opacity 1s ease-in;
  transform-origin: center center;
  
}



/* Кнопка на печати */
.regist-button {
  position: absolute;
  left: 50%;     /* ближе к печати */
  top: 67%;      /* ниже по центру печати */
 transform: translateX(-50%);
 width: 55px;
  height: 55px; 
  font-family: "Norican", cursive;
  color: aqua;
  border-radius: 50%;
  background-color: transparent;
  padding: 0;
  text-align: center;
  line-height: 60px;
  font-size: 14px;
  z-index: 9;
  animation: pulse 1.5s infinite;
}



/*глаза*/
.eyes-wrapper {
  position: absolute;      

  top: 43.5%;                
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 28px;
  z-index: 5;
  pointer-events: none;
}

.eye {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transition: background 0.4s ease, filter 0.4s ease;
}

.eye.eyes-green {
  background: lime;
  box-shadow: 0 0 40px lime;
  filter: drop-shadow(0 0 8px lime) brightness(1.5);
}

.eye.eyes-red {
  background: red;
  box-shadow: 0 0 40px red;
  filter: drop-shadow(0 0 8px red) brightness(1.5);
}

/* полёт в рот */
.auth-container.fly-in {
  animation: passFlyIn 1.6s ease-in forwards;
}

.regist-container.fly-in {
  animation: passFlyIn 1.6s ease-in forwards;
}
/* полёт обратно */
.auth-container.fly-out {
  animation: passFlyOut 1.6s ease-out forwards;
}

.regist-container.fly-out {
  animation: passFlyOut 1.6s ease-out forwards;
}

/* анимация */

@keyframes passFlyIn {
  0% {
    transform: translate3d(0,0,0) rotateX(0deg) scale(1);
    opacity: 1;
  }
  35% {
    transform: translate3d(0, -6dvh, 0) rotateX(75deg) scale(0.75);
    opacity: 1;
  }
  80% {
    transform: translate3d(var(--tx,0px), var(--ty,-60dvh), 110px)
               rotateX(80deg) scale(0.2);
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--tx,0px), var(--ty,-60dvh), 120px)
               rotateX(90deg) scale(0.08);
    opacity: 0;
  }
}

@keyframes passFlyOut {
  0% {
    transform: translate3d(var(--tx,0px), var(--ty,-60dvh), 120px)
               rotateX(90deg) scale(0.08);
    opacity: 1;
  }
  65% {
    transform: translate3d(0, -6dvh, 0) rotateX(65deg) scale(0.55);
    opacity: 1;
  }
  100% {
    transform: translate3d(0,0,0) rotateX(0deg) scale(1);
    opacity: 1;
  }
}

/* переключатель */
/* === Toggle ("Регистрация"/"Пропуск") — always clickable === */
.register-wrapper{
  position: fixed;                 /* не зависит от разметки вокруг */
  right: 0px;
  bottom: 0px;
  z-index: 10000;                  /* выше любых табов/глаз/порталов */
  pointer-events: none;            /* контейнер клики НЕ ловит */
}

.register-button{
  pointer-events: auto;            /* клики идут именно на кнопку */
  width: 400px;
  height: 56px;
  border: none;
  cursor: pointer; 
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  outline: none;
}

/* Если нужна иконка — псевдоэлемент (чтобы текст не был обязателен) */
.register-button::before{
  content: "";                    /* заменишь на фон-иконку при желании */
  font: 800 20px/56px system-ui, sans-serif;
  display: block;
  text-align: center;
  letter-spacing: .5px;
  color: #e6e6e6;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* На всякий — убедимся, что слои под кнопкой не перекрывают её */
.gates, .tab-content1, .tab-content2, .eyes-wrapper{
  z-index: auto;                   /* либо что-то < 10000, если у тебя задано */
}




@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 62, 62, 0.7);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(255, 62, 62, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 62, 62, 0);
  }
}

/* Улучшаем базу: пусть есть цвет для currentColor */
.eye.eyes-green { color: lime; }
.eye.eyes-red   { color: red;  }

/* Дадим движку подсказку: будет анимиться */
.eye { will-change: transform, filter, opacity, box-shadow; }

/* Мягкая вспышка с блюром и слоями тени */
@keyframes eyes-flash {
  0% {
    opacity: 0.35;
    transform: scale(1);
    filter: brightness(1.2) drop-shadow(0 0 3px currentColor);
    box-shadow:
      0 0 0   0   currentColor,
      0 0 6px 2px rgba(255,255,255,.2);
  }
  28% {
    opacity: 1;
    transform: scale(1.55);
    filter: brightness(5.5) drop-shadow(0 0 24px currentColor);
    box-shadow:
      0 0 10px 4px currentColor,
      0 0 24px 12px rgba(255,255,255,.35),
      0 0 64px 28px rgba(255,255,255,.18);
  }
  55% {
    opacity: 0.75;
    transform: scale(1.35);
    filter: brightness(3.2) drop-shadow(0 0 14px currentColor);
    box-shadow:
      0 0 6px 2px currentColor,
      0 0 18px 10px rgba(255,255,255,.28),
      0 0 42px 20px rgba(255,255,255,.12);
  }
  75% {
    opacity: 0.45;
    transform: scale(1.15);
    filter: brightness(1.9) drop-shadow(0 0 8px currentColor);
    box-shadow:
      0 0 3px 1px currentColor,
      0 0 10px 6px rgba(255,255,255,.18);
  }
  100% {
    opacity: 0.18;
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 2px currentColor);
    box-shadow:
      0 0 1px 0 currentColor,
      0 0 4px 2px rgba(255,255,255,.12);
  }
}

/* Запуск вспышки */
.eye.flash {
  animation: eyes-flash 1.15s cubic-bezier(.22,.61,.21,.98) forwards;
}