/* The ☰ button and its slide-out menu, shared by the site and the arcade. The popover attribute opens it with no script, and brings tapping outside and Esc for free. */
.menu-btn{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border-radius:10px;cursor:pointer;background:var(--x-0a2039-a88);border:1px solid var(--x-f3c35a-a40);box-shadow:0 3px 0 var(--x-3a2a08),0 8px 16px var(--x-000000-a35);transition:background .15s,border-color .15s}
.menu-btn:hover{background:var(--x-143a63-a95);border-color:var(--gold-400)}
.burger{display:grid;gap:5px;width:22px}
.burger i{display:block;height:2px;background:var(--gold-300);border-radius:2px}

.side-menu{position:fixed;inset:0 auto 0 0;width:min(320px,86vw);height:100dvh;max-height:none;margin:0;box-sizing:border-box;padding:calc(12px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));flex-direction:column;gap:10px;overflow-y:auto;color:var(--cream);text-align:left;font-family:var(--font-ui);background:linear-gradient(180deg,var(--x-102f52),var(--x-06121f) 70%);border:0;border-right:2px solid var(--gold-600);box-shadow:0 0 40px var(--x-000000-a60);transform:translateX(-100%);transition:transform .22s var(--ease-out),overlay .22s allow-discrete,display .22s allow-discrete}
.side-menu:popover-open{display:flex;transform:none}
@starting-style{.side-menu:popover-open{transform:translateX(-100%)}}
.side-menu::backdrop{background:var(--x-030b16-a62)}

.side-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--x-f3c35a-a30)}
.side-brand{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--gold-300);font:700 22px/1 var(--font-display);letter-spacing:.14em;text-decoration:none}
.side-brand img{width:40px;height:43px;object-fit:contain}
.side-x{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:10px;cursor:pointer;color:var(--gold-300);font:700 26px/1 var(--font-ui);background:var(--x-0a2039-a80);border:1px solid var(--x-f3c35a-a35)}
.side-x:hover{color:var(--cream);border-color:var(--gold-400)}
.side-who{margin:2px 2px 0;color:var(--x-d6e2ef);font-size:15px;overflow-wrap:anywhere}

.side-links,.side-foot{display:flex;flex-direction:column;gap:8px}
.side-foot{margin-top:auto;padding-top:14px}
.side-foot form{margin:0}
.side-link{display:flex;align-items:center;box-sizing:border-box;width:100%;min-height:52px;padding:0 16px;border-radius:12px;cursor:pointer;color:var(--cream);font:700 15px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;background:linear-gradient(180deg,var(--x-1d4e80-a75),var(--x-0a2039-a90));border:1px solid var(--x-f3c35a-a28);box-shadow:0 4px 0 var(--x-030b16-a85);transition:transform .12s var(--ease-out),border-color .12s}
.side-link:hover{transform:translateY(-2px);border-color:var(--gold-400)}
.side-link:active{transform:translateY(3px);box-shadow:0 1px 0 var(--x-030b16-a85)}
.side-link[aria-current="page"]{color:var(--gold-300);border-color:var(--gold-400)}
.side-link.quiet{background:none;box-shadow:none}
.side-link.small{min-height:44px;font:600 14px/1.25 var(--font-ui);letter-spacing:0;text-transform:none}
.side-menu [hidden]{display:none}

.side-pin{margin-inline-start:auto;min-height:44px;padding-inline:.65rem;border:1px solid var(--x-f3c35a-a35);border-radius:.5rem;color:var(--cream);background:var(--x-0a2039-a80)}
.side-pin[aria-pressed=true]{border-color:var(--gold-400)}
@media (min-width:1024px){
  body[data-drawer-pinned]{padding-left:var(--drawer-width,16rem)}
  [data-drawer-pinned] [data-site-drawer]{display:flex;width:var(--drawer-width,16rem);transform:none;box-shadow:none;transition:none;z-index:20}
  [data-drawer-pinned] .esa-menu .menu-btn{display:none}
}

/* A browser from before popovers (2023): the links just sit at the top of the page. The arcade keeps its Home link instead: see menus.css. */
@supports not selector(:popover-open){
  .menu-btn,.side-x{display:none}
  .side-menu{position:static;display:flex;width:auto;height:auto;transform:none;border-right:0;box-shadow:none}
  .side-foot{margin-top:0}
}
@media (prefers-reduced-motion:reduce){.side-menu,.side-link,.menu-btn{transition:none}}