/* Меню паузы (Esc) — в стиле первого экрана «Район держится» (front-menu.css): тот же фон, шрифт и янтарный акцент.
   Перекрывает старые правила #menu из style.css, hud.css и acity.css. */
#menu.pause-shell {
  --pause-amber: #eeb662;
  --pause-paper: #f0e8d9;
  inset: 0;
  display: none;
  padding: 0;
  place-items: initial;
  background:
    linear-gradient(90deg, rgba(4, 10, 14, 0.92), rgba(4, 10, 14, 0.7) 42%, rgba(4, 10, 14, 0.35)),
    linear-gradient(0deg, rgba(4, 10, 14, 0.75), transparent 45%),
    url('/assets/menu/neighborhood-dusk.jpg') 65% 60% / cover no-repeat,
    #091219;
  color: var(--pause-paper);
  font-family: Arial, Helvetica, sans-serif;
  z-index: 40 !important;
  overflow: auto;
}
#menu.pause-shell.open { display: block; }
#menu.pause-shell .pause-side {
  margin: max(7vh, calc(24px + var(--safe-t, 0px))) 0 90px calc(4.5vw + var(--safe-l, 0px));
  width: min(520px, 86vw);
}
#menu.pause-shell .pause-eyebrow { font-size: 11px; letter-spacing: 0.2em; font-weight: 700; color: var(--pause-amber); }
#menu.pause-shell .pause-wordmark {
  font-family: Impact, 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(54px, 6.4vw, 108px);
  line-height: 0.91;
  letter-spacing: -0.035em;
  margin: 18px 0 14px;
  color: var(--pause-paper);
}
#menu.pause-shell .pause-wordmark span { color: var(--pause-amber); }
#menu.pause-shell .pause-tagline { margin: 0 0 4vh; font-size: 15px; color: #c2c3bd; }
#menu.pause-shell .pause-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
#menu.pause-shell .pause-nav button {
  position: relative;
  min-height: 46px;
  padding: 6px 0 6px 18px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #c2c3bd;
  font: 400 clamp(18px, 1.7vw, 24px) Arial, Helvetica, sans-serif;
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
}
#menu.pause-shell .pause-nav button::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  background: var(--pause-amber);
  transform: translateY(-50%);
  transition: height 0.15s;
}
#menu.pause-shell .pause-nav button:hover,
#menu.pause-shell .pause-nav button:focus-visible { color: var(--pause-paper); background: none; outline: none; }
#menu.pause-shell .pause-nav button:hover::before,
#menu.pause-shell .pause-nav button:focus-visible::before { height: 60%; }
#menu.pause-shell .pause-nav .pause-primary { color: var(--pause-amber); font-weight: 700; margin-bottom: 8px; }
#menu.pause-shell .pause-nav .pause-primary:hover { color: #f6cb88; }
#menu.pause-shell .pause-nav .pause-primary span { margin-left: 6px; }
#menu.pause-shell .pause-nav .pause-quiet { margin-top: 14px; font-size: 15px; color: #8f948f; letter-spacing: 0.08em; }
#menu.pause-shell .pause-hint {
  position: absolute;
  right: calc(4.5vw + var(--safe-r, 0px));
  bottom: calc(28px + var(--safe-b, 0px));
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.19em;
  color: #9aa09b;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  #menu.pause-shell .pause-side { margin: calc(20px + var(--safe-t, 0px)) 6vw 80px; width: 88vw; }
  #menu.pause-shell .pause-wordmark { font-size: clamp(48px, 15vw, 84px); }
  #menu.pause-shell .pause-hint { display: none; }
}
/* Старые правила acity.css красят #menu-close по двум ID — перекрываем тем же весом */
#menu.pause-shell #menu-close { background: none; box-shadow: none; color: var(--pause-amber); }
#menu.pause-shell #menu-close:hover { background: none; color: #f6cb88; }
