/* ================= ВХОД НА СМЕНУ ================= */

.shift-screen {
  position: relative;
  height: 100vh;
  height: 100dvh; /* в Telegram 100vh бывает выше видимой области */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: var(--color-orange);
  overflow: hidden;
  transition: height 0.5s ease, padding 0.5s ease;
}

/* После входа на смену экран "сворачивается" не полностью, а до узкой
   полоски-шапки (см. welcome.css). */
.shift-screen--collapsed {
  height: 90px;
  padding: 0;
}

/* --- Плавающие фастфуд-эмодзи на фоне: появляются и исчезают ТОЛЬКО за
   краями экрана (никогда посреди), летят строго в сторону, откуда влетели
   (сверху -> вниз, слева -> направо и т.д.), не разворачиваясь. Скорость
   постоянная (linear, а не ease-in-out, чтобы не было ускорений/замедлений).
   Часть маршрутов - "волной" (плавный синусоидальный снос вбок при том же
   постоянном темпе движения по основной оси), часть - строго по прямой. */

.food-decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.food-decor span {
  position: absolute;
  display: block;
  opacity: 0.8;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
  will-change: transform;
}

/* Направление задаёт стартовый край (через left/top/right/bottom) - сама
   анимация двигает только по оси движения (translate), поэтому во время
   animation-delay (до старта) элемент благодаря animation-fill-mode:
   backwards уже стоит в НАЧАЛЬНОМ кадре анимации, то есть за кадром, а
   не появляется в произвольной точке экрана. */

.food-dir-ltr { top: var(--pos); left: 0;   animation-name: food-ltr; }
.food-dir-rtl { top: var(--pos); right: 0;  animation-name: food-rtl; }
.food-dir-ttb { left: var(--pos); top: 0;    animation-name: food-ttb; }
.food-dir-btt { left: var(--pos); bottom: 0; animation-name: food-btt; }

.food-dir-ltr-wave { top: var(--pos); left: 0;   animation-name: food-ltr-wave; }
.food-dir-rtl-wave { top: var(--pos); right: 0;  animation-name: food-rtl-wave; }
.food-dir-ttb-wave { left: var(--pos); top: 0;    animation-name: food-ttb-wave; }
.food-dir-btt-wave { left: var(--pos); bottom: 0; animation-name: food-btt-wave; }

/* Прямые маршруты - всего 2 опорные точки, движение строго по одной оси. */

@keyframes food-ltr {
  0%   { transform: translate(-15vw, 0); }
  100% { transform: translate(120vw, 0); }
}

@keyframes food-rtl {
  0%   { transform: translate(15vw, 0); }
  100% { transform: translate(-120vw, 0); }
}

@keyframes food-ttb {
  0%   { transform: translate(0, -15vh); }
  100% { transform: translate(0, 120vh); }
}

@keyframes food-btt {
  0%   { transform: translate(0, 15vh); }
  100% { transform: translate(0, -120vh); }
}

/* Волнообразные маршруты - опорные точки на основной оси расставлены РОВНО
   через равные промежутки (чтобы темп движения вперёд оставался постоянным),
   а по перпендикулярной оси значения идут синусоидой - получается волна без
   изменения скорости и без разворота основного направления. */

@keyframes food-ltr-wave {
  0%    { transform: translate(-15vw, 0); }
  12.5% { transform: translate(2vw, 4vh); }
  25%   { transform: translate(19vw, 6vh); }
  37.5% { transform: translate(36vw, 4vh); }
  50%   { transform: translate(53vw, 0); }
  62.5% { transform: translate(69vw, -4vh); }
  75%   { transform: translate(86vw, -6vh); }
  87.5% { transform: translate(103vw, -4vh); }
  100%  { transform: translate(120vw, 0); }
}

@keyframes food-rtl-wave {
  0%    { transform: translate(15vw, 0); }
  12.5% { transform: translate(-2vw, 4vh); }
  25%   { transform: translate(-19vw, 6vh); }
  37.5% { transform: translate(-36vw, 4vh); }
  50%   { transform: translate(-53vw, 0); }
  62.5% { transform: translate(-69vw, -4vh); }
  75%   { transform: translate(-86vw, -6vh); }
  87.5% { transform: translate(-103vw, -4vh); }
  100%  { transform: translate(-120vw, 0); }
}

@keyframes food-ttb-wave {
  0%    { transform: translate(0, -15vh); }
  12.5% { transform: translate(4vw, 2vh); }
  25%   { transform: translate(6vw, 19vh); }
  37.5% { transform: translate(4vw, 36vh); }
  50%   { transform: translate(0, 53vh); }
  62.5% { transform: translate(-4vw, 69vh); }
  75%   { transform: translate(-6vw, 86vh); }
  87.5% { transform: translate(-4vw, 103vh); }
  100%  { transform: translate(0, 120vh); }
}

@keyframes food-btt-wave {
  0%    { transform: translate(0, 15vh); }
  12.5% { transform: translate(4vw, -2vh); }
  25%   { transform: translate(6vw, -19vh); }
  37.5% { transform: translate(4vw, -36vh); }
  50%   { transform: translate(0, -53vh); }
  62.5% { transform: translate(-4vw, -69vh); }
  75%   { transform: translate(-6vw, -86vh); }
  87.5% { transform: translate(-4vw, -103vh); }
  100%  { transform: translate(0, -120vh); }
}

/* При успешном входе на смену все плавающие эмодзи резко улетают вверх
   вместе с кнопкой - !important нужен, чтобы перебить их собственные
   бесконечные анимации дрейфа (food-ltr/rtl/ttb/btt...), заданные через
   классы направления. */
.food-decor--fly span {
  animation: food-fly-away 0.6s cubic-bezier(0.55, 0, 1, 0.45) forwards !important;
}

@keyframes food-fly-away {
  to { transform: translateY(-150vh); opacity: 0; }
}

.shift-button {
  position: relative;
  z-index: 1;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: none;
  background: #2E2E2E;
  color: var(--color-white);
  font-weight: 900;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 0 #161616, 0 16px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.shift-button:active:not(.pressed) {
  transform: translateY(6px);
  box-shadow: 0 4px 0 #161616, 0 6px 12px rgba(0, 0, 0, 0.3);
}

.shift-button.pressed {
  transform: translateY(10px);
  box-shadow: 0 0 0 #161616, 0 4px 10px rgba(0, 0, 0, 0.25);
  opacity: 0.85;
  cursor: default;
}

.shift-button.shift-button--fly {
  /* Та же кривая и длительность, что у food-fly-away - иначе разный темп
     ease/ease-in создаёт ощущение, что кнопка улетает раньше остальных,
     хотя обе анимации стартуют в один момент. */
  transition: transform 0.6s cubic-bezier(0.55, 0, 1, 0.45), opacity 0.6s cubic-bezier(0.55, 0, 1, 0.45);
  transform: translateY(-160vh);
  opacity: 0;
}

.shift-card {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--color-white);
  padding: 28px 32px;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity 0.4s ease, transform 0.4s ease;
  min-width: 240px;
  min-height: 240px;
  max-width: 320px;
  width: calc(100% - 48px);
}

.shift-card--visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.shift-card--fade {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
}

.auth-text--error {
  color: var(--color-red);
  line-height: 1.4;
  text-align: center;
}

.shift-retry {
  padding: 10px 22px;
  border-radius: 12px;
  border: 2px solid var(--color-black);
  background: var(--color-white);
  color: var(--color-black);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.shift-question {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-black);
  text-align: center;
}

.shift-choices {
  display: flex;
  gap: 12px;
  width: 100%;
}

.shift-choices--column {
  flex-direction: column;
}

.shift-choice {
  flex: 1;
  padding: 14px 18px;
  border-radius: 14px;
  border: none;
  background: var(--color-orange);
  color: var(--color-black);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22), 0 6px 10px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.shift-choice:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.22), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.shift-choice--outline {
  background: var(--color-white);
  border: 2px solid var(--color-black);
  color: var(--color-black);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15), 0 6px 10px rgba(0, 0, 0, 0.08);
}

.shift-choice--outline:active {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.06);
}

.shift-choice--day {
  background: #FFD54A;
  color: var(--color-black);
}

.shift-choice--night {
  background: #1B1F3B;
  color: var(--color-white);
}

.shift-choice--role-alt {
  background: var(--color-black);
  color: var(--color-white);
}

/* Список ТП (только для администратора, когда рядом нет точки) - в две колонки. */
.shift-choices--grid {
  flex-wrap: wrap;
}

.shift-choices--grid .shift-choice {
  flex: 1 1 calc(50% - 6px);
}

/* Сообщения об ошибке приходят с бэкенда с переносами строк. */
#error-text {
  white-space: pre-line;
}