@font-face {
  font-family: "Luckybox Menu Icons";
  src: url("../vendor/fontawesome-free/webfonts/fa-solid-900.woff2") format("woff2");
  font-weight: 900;
  font-display: block;
}

html.lb-menu-open { overflow: hidden; }

.lb-menu {
  --lb-ink: #142b23;
  --lb-paper: #f6faef;
  --lb-lime: #dce9a0;
  --lb-gutter: clamp(18px, 6vw, 36px);
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  border: 0;
  padding: 0;
  color: var(--lb-paper);
  background: linear-gradient(145deg, rgb(31 63 51 / 95%), rgb(15 36 29 / 94%) 70%);
  color-scheme: dark;
}

.lb-menu[open] { display: flex; flex-direction: column; }
.lb-menu::backdrop { background: rgb(12 25 19 / 20%); }

@supports (backdrop-filter: blur(12px)) {
  .lb-menu {
    background: linear-gradient(145deg, rgb(31 63 51 / 89%), rgb(15 36 29 / 91%) 70%);
    backdrop-filter: blur(12px);
  }
}

.lb-menu__bar, .lb-menu__shortcuts {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-inline: max(var(--lb-gutter), env(safe-area-inset-left)) max(var(--lb-gutter), env(safe-area-inset-right));
  flex: 0 0 auto;
}

.lb-menu__bar {
  justify-content: space-between;
  padding-top: max(18px, env(safe-area-inset-top));
  padding-bottom: 14px;
}

.lb-menu__bar img {
  width: 116px;
  height: auto;
  filter: brightness(0) invert(.96);
}

.lb-menu__close {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--lb-lime);
  color: var(--lb-ink);
  font: 400 29px/1 sans-serif;
}

.lb-menu__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding-block: clamp(12px, 4dvh, 42px) 18px;
  padding-inline: max(var(--lb-gutter), env(safe-area-inset-left)) max(var(--lb-gutter), env(safe-area-inset-right));
}

.lb-menu__links {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 560px;
}

.lb-menu__links li + li { border-top: 1px solid rgb(230 244 222 / 27%); }

.lb-menu__links a {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
  min-height: clamp(52px, 8.4dvh, 82px);
  color: var(--lb-paper);
  text-decoration: none;
  font-size: clamp(1.3rem, 6vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
}

.lb-menu__links a[aria-current="page"], .lb-menu__links a:hover, .lb-menu__links a:active {
  color: var(--lb-lime);
}

.lb-menu__icon {
  justify-self: center;
  color: #bbd2c3;
  font: 900 15px/1 "Luckybox Menu Icons";
}

.lb-menu__arrow {
  justify-self: end;
  color: var(--lb-lime);
  font: 400 22px/1 sans-serif;
}

.lb-menu__shortcuts {
  justify-content: center;
  border-top: 1px solid rgb(230 244 222 / 30%);
  background: rgb(12 31 24 / 84%);
  padding-top: 14px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.lb-menu__shortcuts a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  gap: 8px;
  max-width: 274px;
  min-height: 50px;
  padding: 6px 8px;
  border: 1px solid var(--lb-lime);
  border-radius: 999px;
  background: var(--lb-lime);
  color: var(--lb-ink);
  text-align: center;
  text-decoration: none;
  font-size: clamp(.78rem, 3.6vw, .95rem);
  font-weight: 700;
  line-height: 1.2;
}

.lb-menu__shortcuts a + a { background: #f4f7ef; border-color: #f4f7ef; }
.lb-menu__shortcuts .lb-menu__icon { color: inherit; }
.lb-menu a:hover, .lb-menu a:focus-visible { text-decoration: none; }
.lb-menu__shortcuts a:hover { color: var(--lb-ink); }
.lb-menu :focus-visible { outline: 2px solid var(--lb-lime); outline-offset: 3px; }
.lb-menu__links a:focus-visible { outline-offset: -2px; }

@media (prefers-reduced-motion: no-preference) {
  .lb-menu[open] { animation: lb-menu-reveal 250ms ease-out both; }
  .lb-menu[open] .lb-menu__links li {
    animation: lb-menu-link-in 320ms cubic-bezier(.2,.85,.25,1) both;
  }
  .lb-menu[open] .lb-menu__links li:nth-child(2) { animation-delay: 25ms; }
  .lb-menu[open] .lb-menu__links li:nth-child(3) { animation-delay: 50ms; }
  .lb-menu[open] .lb-menu__links li:nth-child(4) { animation-delay: 75ms; }
  .lb-menu[open] .lb-menu__links li:nth-child(5) { animation-delay: 100ms; }
  .lb-menu[open] .lb-menu__links li:nth-child(6) { animation-delay: 125ms; }

  @keyframes lb-menu-reveal {
    from { opacity: .35; }
    to { opacity: 1; }
  }
  @keyframes lb-menu-link-in {
    from { opacity: .35; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}