/* ===== Hero-секция La2Era (адаптивная сцена с героем) ===== */

:root {
  --hero-gold: hsl(46 68% 47%);
  --hero-gold-hi: hsl(45 71% 73%);
  --hero-fg: hsl(41 49% 88%);
  --nav-height: 76px;
}

/* ---------- Первый экран ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: hsl(220 18% 6%);
}

/* Сцена заполняет весь блок (высота которого задаётся распоркой ниже).
   Верх сцены сдвинут ниже фиксированной навигации, чтобы шапка
   не перекрывала голову персонажа на маленьких экранах. */
.hero__scene {
  position: absolute;
  top: var(--nav-height, 76px);
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.hero__video.is-ready {
  opacity: 1;
}

.hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      hsl(222 20% 5% / 0.6) 0%,
      hsl(24 22% 7% / 0.3) 22%,
      hsl(210 30% 8% / 0.2) 40%,
      transparent 62%
    ),
    radial-gradient(
      50% 38% at 18% 24%,
      hsl(205 60% 44% / 0.07) 0%,
      transparent 70%
    ),
    radial-gradient(
      44% 32% at 84% 18%,
      hsl(30 55% 45% / 0.06) 0%,
      transparent 72%
    );
}

.hero__warm {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    46% 48% at 14% 74%,
    hsl(30 88% 52% / 0.12) 0%,
    transparent 72%
  );
}

/* Распорка держит высоту секции равной пропорциям видео */
.hero__spacer {
  width: 100%;
  aspect-ratio: 1920 / 860;
  pointer-events: none;
}

.hero__grid {
  position: absolute;
  inset: 0 0 auto 0;
  display: grid;
  gap: 16px;
  align-items: center;
  height: 100%;
  padding: 90px 0 70px;
  margin: 0 auto;
  width: calc(100% - 60px);
  max-width: 1240px;
}

@media (max-width: 1023px) {
  .hero__spacer {
    aspect-ratio: 4 / 3;
    min-height: 640px;
  }
  .hero__grid {
    padding: 80px 0 56px;
    align-content: center;
  }
  .hero__logo {
    height: 52px;
  }
  .flip-board {
    margin-top: 14px;
    padding: 10px 14px 8px;
  }
  .flip-board__cap {
    font-size: 11px;
    letter-spacing: 0.1em;
  }
  .flip-board__row {
    gap: 5px;
    margin-top: 8px;
  }
  .flip__card {
    width: 36px;
    height: 44px;
  }
  .flip__num {
    height: 44px;
    font-size: 21px;
  }
  .slogan {
    margin-top: 16px;
    height: 2.6em;
    padding: 10px 14px;
    font-size: 16px;
  }
  .btn-era {
    min-width: 220px;
    height: 54px;
    font-size: 16px;
    margin-top: 18px !important;
  }
  .scroll {
    display: none;
  }
}

@media (max-width: 767px) {
  .hero__spacer {
    aspect-ratio: 3 / 4;
  }
}

@media (min-width: 768px) {
  .hero__grid {
    grid-template-columns: 1fr minmax(0, 560px);
  }
}

@media (max-width: 1080px) {
  .hero__grid {
    width: calc(100% - 40px);
  }
}

@media (max-width: 640px) {
  .hero__grid {
    width: calc(100% - 30px);
  }
}

.hero__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .hero__col {
    align-items: flex-start;
    align-self: center;
  }
}

.hero__logo-link {
  position: absolute;
  top: 68px;
  left: max(30px, calc((100% - 1240px) / 2));
  z-index: 5;
}

@media (max-width: 1080px) {
  .hero__logo-link {
    left: 20px;
  }
}

@media (max-width: 640px) {
  .hero__logo-link {
    left: 15px;
  }
}

@media (min-width: 1024px) {
  .hero__logo-link {
    top: 78px;
  }
}

.hero__logo {
  height: 51px;
  width: auto;
  filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
  transition: opacity 0.3s ease-in-out;
}

.hero__logo-link:hover .hero__logo {
  opacity: 0.85;
}

@media (min-width: 768px) {
  .hero__logo {
    height: 62px;
  }
}

@media (min-width: 1024px) {
  .hero__logo {
    height: 74px;
  }
}

.hero__charwrap {
  display: none;
}

@media (min-width: 768px) {
  .hero__charwrap {
    display: flex;
    justify-content: center;
  }
}

.hero__fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  pointer-events: none;
  background: hsl(46 68% 47% / 0.35);
}

/* ---------- Печатающийся слоган ---------- */
.slogan {
  display: flex;
  align-items: center;
  margin: 24px 0 0;
  height: 2.9em;
  width: 100%;
  max-width: 560px;
  overflow: hidden;
  padding: 14px 20px;
  border-radius: 4px;
  border-left: 3px solid var(--hero-gold-hi);
  font-family: Cinzel, Georgia, serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--hero-gold-hi);
  text-align: center;
  background: linear-gradient(
    90deg,
    hsl(30 20% 5% / 0.55) 0%,
    hsl(30 20% 5% / 0.28) 62%,
    transparent 100%
  );
  text-shadow:
    0 0 10px hsl(45 75% 55% / 0.5),
    0 3px 16px rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(3px);
  animation: banner-in 0.6s ease-out both;
}

@keyframes banner-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 768px) {
  .slogan {
    text-align: left;
  }
}

@media (min-width: 1024px) {
  .slogan {
    margin-top: 32px;
    height: 2.7em;
    font-size: 26px;
  }
}

.caret {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 4px;
  vertical-align: -0.12em;
  background: var(--hero-gold-hi);
  box-shadow: 0 0 12px hsl(45 80% 65% / 0.85);
  animation: caret 1s steps(1) infinite;
}

@keyframes caret {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

/* ---------- Перекидной календарь (обратный отсчёт) ---------- */
.flip-board {
  display: inline-block;
  margin-top: 20px;
  padding: 14px 18px 12px;
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    hsl(32 22% 10% / 0.6),
    hsl(30 18% 6% / 0.42)
  );
  box-shadow: 0 20px 48px -26px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
}

.flip-board[hidden] {
  display: none;
}

.flip-board__cap {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: hsl(41 49% 88% / 0.7);
}

.flip-board__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
}

.flip-board__sep {
  align-self: flex-start;
  margin-top: 12px;
  font-family: "Cinzel Decorative", Cinzel, serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: hsl(46 68% 47% / 0.5);
}

/* ---------- Надпись после окончания обратного отсчёта ---------- */
.countdown-over {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 14px 22px;
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    hsl(32 22% 10% / 0.6),
    hsl(30 18% 6% / 0.42)
  );
  box-shadow: 0 20px 48px -26px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  font-family: "Cinzel Decorative", Cinzel, serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: hsl(45 71% 73%);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.countdown-over::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: hsl(140 55% 50%);
  box-shadow: 0 0 10px 2px hsl(140 55% 50% / 0.65);
}

.countdown-over[hidden] {
  display: none;
}

.flip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.flip__label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: hsl(41 49% 88% / 0.6);
}

.flip__card {
  position: relative;
  width: 44px;
  height: 52px;
  perspective: 220px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 6px 14px -6px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px hsl(42 40% 62% / 0.22);
}

.flip__half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  background: linear-gradient(180deg, hsl(40 34% 84%) 0%, hsl(38 28% 74%) 100%);
}

.flip__half--top {
  top: 0;
  border-bottom: 1px solid hsl(34 22% 52% / 0.45);
}

.flip__half--bottom {
  bottom: 0;
  background: linear-gradient(180deg, hsl(38 26% 70%) 0%, hsl(36 24% 62%) 100%);
}

.flip__half--top .flip__num {
  top: 0;
}

.flip__half--bottom .flip__num {
  top: -100%;
}

.flip__num {
  position: absolute;
  left: 0;
  right: 0;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cinzel Decorative", Cinzel, Georgia, serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: hsl(28 42% 20%);
  text-shadow: 0 1px 0 hsl(42 60% 92% / 0.7);
}

.flip__leaf {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  backface-visibility: hidden;
}

.flip__leaf--front {
  top: 0;
  transform-origin: 50% 100%;
  background: linear-gradient(180deg, hsl(40 34% 84%) 0%, hsl(38 28% 74%) 100%);
  border-bottom: 1px solid hsl(34 22% 52% / 0.45);
  animation: leaf-fold 0.46s cubic-bezier(0.4, 0, 0.6, 1) forwards;
  z-index: 3;
}

.flip__leaf--front .flip__num {
  top: 0;
}

.flip__leaf--back {
  bottom: 0;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, hsl(38 26% 70%) 0%, hsl(36 24% 62%) 100%);
  transform: rotateX(90deg);
  animation: leaf-drop 0.46s cubic-bezier(0.4, 0, 0.6, 1) 0.23s forwards;
  z-index: 2;
}

.flip__leaf--back .flip__num {
  top: -100%;
}

.flip__hinge {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 4;
  background: hsl(30 20% 30% / 0.55);
  box-shadow: 0 1px 2px hsl(40 40% 96% / 0.35);
  pointer-events: none;
}

@keyframes leaf-fold {
  0% {
    transform: rotateX(0deg);
    filter: brightness(1);
  }
  100% {
    transform: rotateX(-90deg);
    filter: brightness(0.72);
  }
}

@keyframes leaf-drop {
  0% {
    transform: rotateX(90deg);
    filter: brightness(0.72);
  }
  100% {
    transform: rotateX(0deg);
    filter: brightness(1);
  }
}

/* ---------- Кнопка «Начать игру» ---------- */
.btn-era {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  min-width: 268px;
  height: 64px;
  padding: 0 40px;
  font-family: Cinzel, Georgia, serif;
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #3b3225;
  cursor: pointer;
  text-shadow:
    0 -1px 0 rgba(80, 62, 26, 0.55),
    0 1px 0 rgba(255, 250, 232, 0.95),
    0 2px 2px rgba(255, 252, 240, 0.4);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
  transition:
    filter 0.22s,
    transform 0.15s;
}

.btn-era::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 6px;
  background: linear-gradient(
    180deg,
    #f7ecc9 0%,
    #e2c988 20%,
    #caa85e 52%,
    #9d7c34 82%,
    #7a5f27 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 232, 0.9),
    inset 0 -2px 4px rgba(90, 68, 24, 0.5),
    inset 0 0 0 1px rgba(120, 94, 40, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.45);
}

.btn-era::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 19px;
  height: 19px;
  transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, #e8d29a 0%, #a8823a 45%, #5f4718 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 246, 220, 0.35),
    0 3px 7px rgba(0, 0, 0, 0.45);
}

.btn-era:hover {
  filter: drop-shadow(0 0 24px rgba(245, 218, 150, 0.5))
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5)) brightness(1.06);
}

.btn-era:active {
  transform: translateY(1px);
}

/* ---------- Подсказка прокрутки ---------- */
.scroll {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  transform: translateX(-50%);
}

.scroll__line {
  position: relative;
  width: 1px;
  height: 46px;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    transparent 0%,
    hsl(45 60% 62% / 0.35) 40%,
    hsl(45 60% 62% / 0.5) 100%
  );
}

.scroll__dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 12px;
  margin-left: -1px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, hsl(45 95% 78%));
  box-shadow: 0 0 10px hsl(42 90% 65% / 0.9);
  animation: fall 2.4s ease-in-out infinite;
}

.scroll__gem {
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #f6e7b4 0%, #c19b3f 60%, #6d5320 100%);
  box-shadow: 0 0 12px hsl(42 85% 58% / 0.55);
  transition: all 0.25s;
}

.scroll:hover .scroll__gem {
  transform: rotate(45deg) scale(1.25);
  box-shadow: 0 0 22px hsl(42 90% 62% / 0.9);
}

@keyframes fall {
  0% {
    transform: translateY(-14px);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    transform: translateY(46px);
    opacity: 0;
  }
}

/* ---------- Старая кнопка «Начать игру» внутри hero ---------- */
.hero__start {
  margin: 28px 0 0 !important;
}

@media (min-width: 768px) {
  .hero__start {
    margin-left: 0 !important;
  }
}

@media (max-width: 767px) {
  .hero__start {
    margin: 18px auto 0 !important;
  }
}

/* ---------- Цельный фиксированный хедер с меню ---------- */
.navigation {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  width: 100%;
  background: hsl(220 18% 5% / 0.55);
  border-bottom: 1px solid hsl(46 68% 47% / 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow 0.3s;
}

.navigation.is-solid {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.navigation .content-area {
  height: auto;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 20px;
  max-width: 1400px;
}

@media (min-width: 1024px) {
  .navigation .content-area {
    padding: 18px 64px;
  }
}

/* ---------- Новая выпадашка языка (из демо) ---------- */
.lang-wrap {
  position: relative;
  margin-left: 8px;
}

.lang {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  color: hsl(41 49% 88%);
}

.lang__caret {
  width: 14px;
  height: 14px;
  color: hsl(41 49% 88% / 0.7);
  transition: transform 0.2s;
}

.lang.is-open .lang__caret {
  transform: rotate(180deg);
}

.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  z-index: 50;
  min-width: 168px;
  padding: 6px;
  border-radius: 10px;
  background: linear-gradient(
    180deg,
    hsl(32 22% 10% / 0.98),
    hsl(30 18% 6% / 0.98)
  );
  box-shadow:
    0 18px 42px -14px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px hsl(45 60% 62% / 0.22);
  backdrop-filter: blur(14px);
}

.lang-menu[hidden] {
  display: none;
}

.lang-menu::before {
  content: "";
  position: absolute;
  right: 18px;
  top: -5px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: hsl(32 22% 10%);
  box-shadow: -1px -1px 0 hsl(45 60% 62% / 0.22);
}

.lang-menu__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  color: hsl(41 40% 82%);
  transition: all 0.2s;
  text-decoration: none;
}

.lang-menu__item span:not(.lang__flag) {
  flex: 1;
  text-align: left;
}

.lang-menu__item:hover {
  background: hsl(42 32% 18% / 0.7);
  color: hsl(45 71% 73%);
}

.lang-menu__item.is-active {
  color: hsl(45 71% 73%);
  background: hsl(42 32% 16% / 0.5);
}

.lang-menu__check {
  width: 14px;
  height: 14px;
  color: hsl(46 68% 47%);
  opacity: 0;
}

.lang-menu__item.is-active .lang-menu__check {
  opacity: 1;
}

.lang__flag {
  flex: none;
  display: flex;
  overflow: hidden;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.lang__flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}