/* ═══════════════════════════════════════════════════════════════
   ГЛАВНОЕ МЕНЮ — фиолетово-розовая палитра под стиль бою/диалогу
   ═══════════════════════════════════════════════════════════════ */

:root {
  --menu-violet: #b88be3;
  --menu-pink:   #ff5fa8;
  --menu-glow-soft: rgba(184, 139, 227, 0.45);
  --menu-glow-strong: rgba(220, 130, 230, 0.7);
}

/* ── ЛОГО ── */
/* лого — каменная плашка в стиле кнопок меню */
.logo {
  width: min(860px, 92vw);
  aspect-ratio: 1215 / 516;
  background: url('../img/logo_title.png?v=2') center / contain no-repeat;
  font-size: 0;
  color: transparent;
  margin: 0 auto 10px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.6)) drop-shadow(0 0 20px rgba(190, 120, 255, 0.3));
  display: block;
}

/* сабтайтл «Rocky's Path» — орнаментальный, в общей стилистике (как дивайдеры/эйброу) */
.subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.46em;
  text-indent: 0.46em;            /* компенсация трекинга, чтобы текст был по центру */
  text-transform: uppercase;
  color: rgba(232, 205, 255, 0.82);
  text-shadow: 0 0 14px rgba(190, 120, 255, 0.45), 0 1px 2px rgba(0,0,0,0.6);
  margin: 2px auto 16px;
  width: min(560px, 90vw);
  white-space: nowrap;
}
/* фланкирующие линии */
.subtitle::before,
.subtitle::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 140, 255, 0.55), transparent);
}
/* ромбы-акценты по краям текста (как ♦ в дивайдере) */
.subtitle .sub-gem {
  flex: none;
  font-size: 9px;
  letter-spacing: 0;
  text-indent: 0;
  color: var(--menu-pink, #ff5fa8);
  text-shadow: 0 0 8px rgba(255, 95, 168, 0.6);
}

/* ── список кнопок ── */
.menu {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 380px;
}

.plate {
  position: relative;
  background: rgba(10, 5, 20, 0.85);
  border: 2px solid rgba(180, 100, 255, 0.55);
  padding: 22px 24px;
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.25em;
  color: #e8d4ff;
  text-align: center;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(220, 180, 255, 0.08),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    0 4px 14px rgba(0,0,0,0.6),
    0 0 14px rgba(180, 80, 255, 0.18),
    0 0 28px rgba(255, 60, 160, 0.08);
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 3px;
}

/* "заклёпки" по углам — теперь фиолетово-розовые "огоньки" */
.plate::before, .plate::after,
.plate .rivet-bl, .plate .rivet-br {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  background: radial-gradient(circle,
    #ffd0f0 0%,
    var(--menu-pink) 40%,
    var(--menu-violet) 100%);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--menu-glow-soft);
}
.plate::before { top: 8px; left: 10px; }
.plate::after  { top: 8px; right: 10px; }
.plate .rivet-bl { bottom: 8px; left: 10px; }
.plate .rivet-br { bottom: 8px; right: 10px; }

.plate:hover:not(.disabled) {
  border-color: var(--menu-pink);
  color: #fff;
  transform: translateY(-1px);
  background: #22132e;
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 230, 0.15),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    0 6px 22px rgba(0,0,0,0.6),
    0 0 22px rgba(255, 60, 168, 0.35),
    0 0 44px rgba(160, 80, 255, 0.18);
  text-shadow: 0 0 10px var(--menu-glow-strong);
}

.plate.disabled {
  cursor: not-allowed;
  opacity: 0.4;
  color: rgba(220, 180, 255, 0.5);
  border-color: rgba(200, 140, 255, 0.15);
}

.plate .sub {
  display: block;
  font-size: 10px;
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: rgba(220, 180, 255, 0.4);
  margin-top: 6px;
  text-transform: uppercase;
}

/* ── PNG кнопки меню ── */
#btn-story,
#btn-rocky,
#btn-city,
#btn-leaderboard,
#btn-shop,
#btn-tutorial {
  height: 72px;
  padding: 0;
  font-size: 0;
  background-color: transparent;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* убрать заклёпки и любые рамки/фон у кнопок меню */
.menu .plate::before,
.menu .plate::after,
.menu .plate .rivet-bl,
.menu .plate .rivet-br {
  display: none !important;
}

#btn-story       { background-image: url('../img/btn_story.png'); }
#btn-rocky       { background-image: url('../img/btn_rocky.png'); }
#btn-city        { background-image: url('../img/btn_city.png'); }
#btn-leaderboard { background-image: url('../img/btn_leaderboard.png'); }
#btn-shop        { background-image: url('../img/btn_shop.png'); }
#btn-tutorial    { background-image: url('../img/btn_tutorial.png'); }

#btn-city,
#btn-leaderboard,
#btn-shop {
  height: 72px;
}

/* hover эффект — только подсветка картинки, без рамки/подложки */
#btn-story:hover,
#btn-rocky:hover,
#btn-tutorial:hover {
  filter: brightness(1.18) saturate(1.2) drop-shadow(0 0 14px rgba(220, 80, 200, 0.55));
  transform: translateY(-2px);
  box-shadow: none;
  background-color: transparent;
  border-color: transparent;
}