/* FUFA 26 — экспериментальные варианты главного меню (?menu=1 / ?menu=3).
   Пока статичные макеты для выбора направления. Текст временно захардкожен
   (не через i18n) — это design-разведка, гейтится debug-параметром. Когда
   вариант утвердим — перенесём строки в i18n.js и навесим переходы.
   Фон — CSS-градиенты-«заглушки»; реальный арт можно подложить через
   --mv-art (см. .mv1-bg / .mv3-bg). */

/* ===== Общий каркас варианта меню ===== */
.menu-v {
  /* перебиваем дефолтный .screen: тут свой фон и раскладка по углам */
  background: #07090f;
  padding: 0;
  overflow: hidden;
  font-family: "Oswald", "Arial Narrow", "Arial Black", system-ui, sans-serif;
  /* отступы от краёв с учётом выреза/нижней панели Telegram и safe-area iOS */
  --mv-edge: clamp(18px, 3.4vw, 48px);
  --mv-top: calc(clamp(16px, 3vw, 44px) + var(--tg-top, 0px) + env(safe-area-inset-top, 0px));
  --mv-bot: calc(clamp(16px, 3vw, 38px) + var(--tg-bot, 0px) + env(safe-area-inset-bottom, 0px));
}
.menu-v-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.menu-v * { box-sizing: border-box; }

/* затемняющая виньетка поверх фонового арта — читаемость UI */
.mv-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ===== Переключатель языка (общий, использует .lang-btn из style.css) ===== */
.mvx-lang { display: flex; gap: 6px; }
.menu-v .lang-btn {
  font-family: inherit;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 5px 10px;
  color: #aeb8d4;
  background: rgba(16, 20, 32, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  box-shadow: none;
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.menu-v .lang-btn:hover { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.menu-v .lang-btn.active { background: #ffd200; color: #15110a; border-color: #fff; }
.menu-v.mv3 .lang-btn.active { background: #b6f23a; }

/* верх-право: язык + профиль одним кластером (вариант 1) */
.mvx-topright {
  position: absolute;
  top: var(--mv-top);
  right: var(--mv-edge);
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ===== Профиль игрока (общий чип; в v1 живёт внутри .mvx-topright) ===== */
.mvx-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mvx-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #20283c;
  border: 2px solid rgba(255, 255, 255, 0.5);
  display: flex; align-items: center; justify-content: center;
  color: #aeb8d4;
  flex: 0 0 auto;
}
.mvx-avatar svg { width: 22px; height: 22px; }
.mvx-profile-info { line-height: 1.2; }
.mvx-profile-name {
  font-size: 15px; font-weight: 700; letter-spacing: 1px; color: #fff;
}
.mvx-profile-rating {
  font-size: 11px; letter-spacing: 1.5px; color: #aeb8d4; font-weight: 600;
}
.mvx-star { color: #ffd23a; }

/* ===== Кнопки меню (общая база, вертикальный стек слева) ===== */
.mvx-buttons {
  position: absolute;
  left: var(--mv-edge);
  bottom: calc(var(--mv-bot) + 54px);
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: clamp(240px, 30vw, 320px);
}
.mvx-btn {
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 11px 16px;
  text-align: left;
  color: #fff;
  background: rgba(16, 20, 32, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 4px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background 0.12s, transform 0.06s, border-color 0.12s;
}
.mvx-btn:hover { background: rgba(28, 34, 52, 0.88); border-left-color: #ffd23a; }
.mvx-btn:active { transform: translateY(1px); }
.mvx-btn-ico {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: currentColor;
}
.mvx-btn-ico svg { width: 100%; height: 100%; }
.mvx-btn-text { display: flex; flex-direction: column; line-height: 1.15; }
.mvx-btn-text b { font-size: 16px; font-weight: 700; letter-spacing: 1.5px; }
.mvx-btn-text i {
  font-style: normal; font-size: 10.5px; letter-spacing: 1px;
  color: #97a2bf; text-transform: lowercase; margin-top: 2px;
}

/* CTA «ИГРАТЬ СЕЙЧАС» — жёлтый, крупнее */
.mvx-btn-cta {
  background: #ffd200;
  color: #15110a;
  border: 1px solid #ffe372;
  border-left: 4px solid #fff;
  padding: 14px 18px;
  box-shadow: 0 6px 22px rgba(255, 210, 0, 0.22);
}
.mvx-btn-cta:hover { background: #ffdd33; border-left-color: #fff; }
.mvx-btn-cta .mvx-btn-text b { font-size: 19px; letter-spacing: 2px; }
.mvx-btn-cta .mvx-btn-text i { color: #5a4a12; }
.mvx-btn-cta .mvx-btn-ico { color: #15110a; }

/* ===== Нижние круглые иконки (settings/stats/help/trophy) ===== */
.mvx-tools {
  position: absolute;
  left: var(--mv-edge);
  bottom: var(--mv-bot);
  display: flex;
  gap: 11px;
}
.mvx-icon-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: #c2cae0;
  background: rgba(16, 20, 32, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.mvx-icon-btn:hover { color: #fff; border-color: #ffd23a; background: rgba(28, 34, 52, 0.9); }
.mvx-icon-btn svg { width: 18px; height: 18px; }

/* =========================================================
   ВАРИАНТ 1 — «двор, быстро и понятно»
   ========================================================= */
.mv1-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* фоновый арт: ночной двор (assets/menu/yard.png). Градиент сверху —
     лёгкая тонировка, чтобы фото лучше легло в палитру меню. */
  background:
    radial-gradient(120% 80% at 70% 18%, rgba(120, 70, 130, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(20, 16, 40, 0.12) 0%, transparent 40%),
    url("../assets/menu/yard.png");
  background-size: cover;
  background-position: center 38%;
}
.mv1 .mv-scrim {
  background:
    linear-gradient(90deg, rgba(7, 9, 15, 0.78) 0%, rgba(7, 9, 15, 0.42) 38%, transparent 62%),
    linear-gradient(0deg, rgba(7, 9, 15, 0.6) 0%, transparent 40%);
}

.mv1-logo {
  position: absolute;
  top: var(--mv-top);
  left: var(--mv-edge);
}
.mv1-logo-title {
  font-size: clamp(64px, 11vw, 132px);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: 2px;
  color: #d7dbe6;
  /* «бетонный» объём */
  text-shadow:
    0 2px 0 #8a90a0,
    0 5px 0 #4a4f60,
    0 10px 18px rgba(0, 0, 0, 0.6);
}
.mv1-logo-sub {
  margin-top: 6px;
  font-size: clamp(13px, 1.6vw, 19px);
  font-weight: 600;
  letter-spacing: 3px;
  color: #e6e9f2;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.mv1-version {
  position: absolute;
  right: var(--mv-edge);
  bottom: var(--mv-bot);
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.4);
}

/* =========================================================
   ВАРИАНТ 3 — «улица, друзья и вызов»
   ========================================================= */
.mv3-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* фоновый арт: ночная улица с компанией (assets/menu/street.png). */
  background:
    radial-gradient(70% 45% at 50% 4%, rgba(255, 240, 200, 0.1), transparent 60%),
    url("../assets/menu/street.png");
  background-size: cover;
  background-position: center 40%;
}
.mv3 .mv-scrim {
  background:
    linear-gradient(90deg, rgba(6, 8, 14, 0.82) 0%, rgba(6, 8, 14, 0.45) 40%, transparent 64%),
    linear-gradient(0deg, rgba(6, 8, 14, 0.55) 0%, transparent 42%);
}

/* граффити-лого FUFA: жёлто-зелёный спрей с обводкой */
.mv3-logo {
  position: absolute;
  top: var(--mv-top);
  left: var(--mv-edge);
}

/* язык в варианте 3 — отдельным блоком в правом верхнем углу (над бумажкой) */
.mv3-lang {
  position: absolute;
  top: var(--mv-top);
  right: var(--mv-edge);
}
.mv3-logo-title {
  font-size: clamp(60px, 10.5vw, 124px);
  font-weight: 800;
  font-style: italic;
  line-height: 0.85;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #eaff5a 0%, #b6f23a 55%, #57c61e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2px rgba(10, 20, 6, 0.85);
  filter: drop-shadow(0 4px 0 rgba(20, 40, 10, 0.8)) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6));
  transform: rotate(-2deg);
}
.mv3-logo-sub {
  margin-top: 8px;
  font-size: clamp(13px, 1.6vw, 19px);
  font-weight: 600;
  letter-spacing: 3px;
  color: #eef1f7;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

/* CTA варианта 3 — кислотный жёлто-зелёный, со скосом «оторванного» уголка */
.mv3 .mvx-btn-cta {
  background: linear-gradient(135deg, #eaff4f 0%, #b6f23a 100%);
  color: #14210a;
  border-color: #f2ff8a;
  box-shadow: 0 6px 22px rgba(160, 230, 50, 0.28);
  clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%);
}
.mv3 .mvx-btn-cta:hover { background: linear-gradient(135deg, #f0ff6a 0%, #c6ff4a 100%); }
.mv3 .mvx-btn-cta .mvx-btn-text i { color: #2c4012; }
.mv3 .mvx-btn-cta .mvx-btn-ico { color: #14210a; }
.mv3 .mvx-btn:hover { border-left-color: #b6f23a; }

/* «бумажка на скотче» с рейтингом (верх-право, под переключателем языка) */
.mv3-note {
  position: absolute;
  top: calc(var(--mv-top) + 34px);
  right: var(--mv-edge);
  width: 168px;
  padding: 14px 16px 12px;
  background: linear-gradient(180deg, #f4efe2 0%, #e8e0cc 100%);
  color: #1c1a14;
  transform: rotate(3deg);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
  font-family: "Courier New", monospace;
}
/* кусок скотча сверху */
.mv3-note::before {
  content: "";
  position: absolute;
  top: -12px; left: 50%;
  width: 64px; height: 22px;
  transform: translateX(-50%) rotate(-4deg);
  background: rgba(220, 230, 235, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.mv3-note-name {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 15px; letter-spacing: 1px;
  margin-bottom: 8px;
}
.mv3-note-crown { color: #d8a400; }
.mv3-note-row {
  display: flex; justify-content: space-between;
  font-size: 12px; letter-spacing: 0.5px;
  padding: 2px 0;
}
.mv3-note-row span:first-child { color: #5a5648; }
.mv3-note-row b { font-weight: 700; }
.mv3-note-row .mv3-streak { color: #2f8a2f; }

/* подпись от руки «БРОСАЙ ВЫЗОВ ДРУЗЬЯМ!» (низ-право) */
.mv3-tagline {
  position: absolute;
  right: var(--mv-edge);
  bottom: var(--mv-bot);
  text-align: right;
  font-family: "Bradley Hand", "Segoe Script", "Comic Sans MS", cursive;
  font-size: clamp(15px, 2vw, 22px);
  font-weight: 700;
  color: #eef1f7;
  line-height: 1.05;
  transform: rotate(-3deg);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
.mv3-tagline .mv3-tagline-accent { color: #b6f23a; }

/* ===================== АДАПТИВ / МОБИЛКА =====================
   На тач-устройствах меню показывается в ландшафте (портрет перекрыт
   #rotate-notice), поэтому ключевой кейс — невысокий ландшафт телефона.
   Цель: всё помещается без скролла, фон-арт держит фокус на сцене. */

/* Узкое окно (десктоп-портрет / планшет): ужимаем логотип и кнопки. */
@media (max-width: 760px) {
  .menu-v { --mv-edge: clamp(12px, 3vw, 28px); }
  .mvx-buttons { width: min(62vw, 280px); }
  .mv1-logo-title, .mv3-logo-title { font-size: clamp(46px, 15vw, 92px); }
  .mv3-note { width: 140px; padding: 11px 13px 10px; }
}

/* Низкий ландшафт (телефон горизонтально): компактная раскладка. */
@media (max-height: 480px) {
  .menu-v { --mv-edge: clamp(12px, 2.6vw, 24px); }

  .mv1-logo-title, .mv3-logo-title { font-size: clamp(40px, 13.5vh, 74px); }
  .mv1-logo-sub, .mv3-logo-sub { font-size: 11px; letter-spacing: 2px; margin-top: 4px; }

  .mvx-buttons {
    width: clamp(196px, 40vw, 258px);
    gap: 7px;
    bottom: calc(var(--mv-bot) + 46px);
  }
  .mvx-btn { padding: 7px 12px; gap: 10px; }
  .mvx-btn-ico { width: 18px; height: 18px; }
  .mvx-btn-text b { font-size: 13px; letter-spacing: 1px; }
  .mvx-btn-text i { font-size: 9.5px; margin-top: 1px; }
  .mvx-btn-cta { padding: 9px 13px; }
  .mvx-btn-cta .mvx-btn-text b { font-size: 15px; }

  .mvx-icon-btn { width: 34px; height: 34px; }
  .mvx-icon-btn svg { width: 15px; height: 15px; }

  .mvx-avatar { width: 32px; height: 32px; }
  .mvx-avatar svg { width: 18px; height: 18px; }
  .mvx-profile-name { font-size: 13px; }
  .mvx-profile-rating { font-size: 10px; }
  .mvx-topright { gap: 10px; }

  .mv3-note { width: 132px; padding: 10px 12px 8px; transform: rotate(2deg); }
  .mv3-note-name { font-size: 13px; margin-bottom: 5px; }
  .mv3-note-row { font-size: 11px; padding: 1px 0; }
  .mv3-tagline { font-size: clamp(13px, 3.4vh, 18px); }
}

/* Очень низкий ландшафт (≤360px высоты, мелкие телефоны): прячем
   второстепенный декор (бумажка/тэглайн/версия), чтобы не налезало. */
@media (max-height: 360px) {
  .mvx-buttons { bottom: calc(var(--mv-bot) + 42px); }
  .mv3-note, .mv3-tagline, .mv1-version { display: none; }
}

/* На узком ландшафте смещаем фокус фона к сцене (игроки/компания —
   правее центра), чтобы при кропе по бокам они не уезжали за край. */
@media (max-aspect-ratio: 16 / 10) {
  .mv1-bg { background-position: 62% 40%; }
  .mv3-bg { background-position: 60% 42%; }
}