html,
body {
  margin: 0;
  background: #12082a;
}

#splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #12082a;
  transition: opacity 0.4s ease;
}

#splash.hide {
  opacity: 0;
  pointer-events: none;
}

#splash .emoji {
  font-size: 52px;
  animation: splash-bounce 1.2s ease-in-out infinite;
}

#splash .title {
  margin-top: 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 1px;
}

#splash .dots {
  margin-top: 18px;
  display: flex;
  gap: 8px;
}

#splash .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  animation: splash-dot 1s ease-in-out infinite;
}

#splash .dot:nth-child(2) { animation-delay: 0.15s; }
#splash .dot:nth-child(3) { animation-delay: 0.3s; }

/* ── Режим обновления ── */
#splash.updating .emoji {
  animation: splash-spin 2s linear infinite;
}

#splash.updating .dots {
  display: none;
}

#splash.updating .title {
  color: rgba(255, 215, 64, 0.85);
}

@keyframes splash-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes splash-dot {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

@keyframes splash-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Блокировка ландшафтного режима ──
   Показывается только на тач-устройствах (телефон/планшет) в горизонте.
   На десктопе не показываем — там ориентация не важна.
   position: fixed + inset: 0 → никогда не сдвигает контент.          */
#rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #12082a;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* hover:none + pointer:coarse = тач-устройство (телефон / планшет) */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
  #rotate-overlay {
    display: flex;
  }
}

#rotate-overlay .rotate-icon {
  font-size: 56px;
  animation: rotate-hint 2s ease-in-out infinite;
}

#rotate-overlay .rotate-text {
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  padding: 0 32px;
}

@keyframes rotate-hint {
  0%, 100% { transform: rotate(0deg); }
  30%       { transform: rotate(-25deg); }
  60%       { transform: rotate(-25deg); }
  80%       { transform: rotate(0deg); }
}