/* The header every public page shares: the logo home, the guides, About, and the way into the game.
   It sticks to the top of the window, and gains an edge once the page scrolls under it.
   On a phone the guides and About fold into a full-screen menu, a popover so it needs no script. */
:root { --nav-h: 64px; scroll-padding-top: var(--nav-h); }
.top { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid transparent; background: var(--bg, #1b1b1b); font-size: 14px; font-weight: 600; }
@supports (animation-timeline: scroll()) {
  .top { animation: nav-edge linear both; animation-timeline: scroll(); animation-range: 0 48px; }
  @keyframes nav-edge { to { border-bottom-color: #2e2e2e; } }
}
.top > .nav-row { display: flex; align-items: center; gap: 22px; min-height: var(--nav-h); }
.top .home { margin-right: auto; }
.top .home img { display: block; width: auto; height: 26px; }
.top .links { display: flex; gap: 22px; }
.top .links a { color: #aaaaaa; text-decoration: none; }
.top .links a:hover, .top .links a[aria-current="page"] { color: #f2eee5; }
.top .links a[aria-current="page"] { text-decoration: underline; text-decoration-color: #c999e6; text-decoration-thickness: 2px; text-underline-offset: 8px; }

.nav-play { display: inline-block; padding: 8px 18px; border: 1px solid #c26d42; border-radius: 999px; background: linear-gradient(#e67b3b, #df6834 40%, #d8a055); box-shadow: inset 0 1px 0 #ffe1a3; color: white; text-decoration: none; font-weight: 700; white-space: nowrap; }
.nav-play:hover { filter: brightness(1.08); }
.nav-play:focus-visible { outline: 2px solid #ffe1a3; outline-offset: 3px; }

.menu-button { display: none; place-items: center; width: 40px; height: 40px; margin-right: -8px; padding: 0; border: 0; border-radius: 8px; background: none; color: #f2eee5; cursor: pointer; }
.menu-button:focus-visible { outline: 2px solid #c999e6; }

.menu { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0 var(--gutter, 16px) 32px; border: 0; background: #1b1b1b; color: #f2eee5; font-weight: 700;
  flex-direction: column; opacity: 0; transition: opacity 0.2s ease, overlay 0.2s allow-discrete, display 0.2s allow-discrete; }
.menu:popover-open { display: flex; opacity: 1; }
@starting-style { .menu:popover-open { opacity: 0; } }
.menu-bar { display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-h); }
.menu-bar img { display: block; width: auto; height: 26px; }
.menu-links { display: flex; flex-direction: column; padding-top: 40px; }
.menu-links a { padding: 8px 0; color: #f2eee5; text-decoration: none; font-size: 34px; line-height: 1.15; letter-spacing: -0.02em;
  opacity: 0; translate: 0 14px; transition: opacity 0.3s ease, translate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.menu-links a[aria-current="page"] { color: #c999e6; }
.menu-links a:nth-child(2) { transition-delay: 0.04s; }
.menu-links a:nth-child(3) { transition-delay: 0.08s; }
.menu-links a:nth-child(4) { transition-delay: 0.12s; }
.menu:popover-open .menu-links a { opacity: 1; translate: 0; }
@starting-style { .menu:popover-open .menu-links a { opacity: 0; translate: 0 14px; } }
.menu .nav-play { margin-top: auto; padding: 16px; text-align: center; font-size: 17px; }
html:has(.menu:popover-open) { overflow: hidden; }

@media (max-width: 720px) {
  .top > .nav-row { gap: 12px; }
  .top .links { display: none; }
  .menu-button { display: grid; }
}
@media (min-width: 721px) {
  .menu { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .menu, .menu-links a { transition-duration: 0.01s; transition-delay: 0s; translate: none; }
}