.compact-nav { display:none;position:relative;flex:1;min-width:0;align-items:center; }
.main-nav.nav-measure { display:flex!important;position:fixed!important;visibility:hidden!important;width:max-content!important;max-width:none!important; }
.main-nav a[href="#/"] { order:1; }
.main-nav a[href="#/library"] { order:2; }
.main-nav a[href="#/projects"] { order:3; }
.main-nav a[href="#/map"] { order:4; }
.main-nav a[href="#/games"] { order:5; }
.main-nav a[href="#/news"] { order:6; }
.topbar { min-height:46px;padding-block:5px; }

.topbar.nav-compact .main-nav { display:none; }
.topbar.nav-compact .compact-nav { display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); }

.compact-nav>a,
.compact-menu-toggle {
  min-height:34px;
  padding:4px clamp(8px,1.2vw,18px);
  border:0;
  border-left:1px solid #766a60;
  background:transparent;
  color:inherit;
  font:clamp(12px,1.2vw,17px) Consolas,"Courier New",monospace;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:100%;
}

.compact-nav-icon { width:15px;height:15px;flex:0 0 15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.compact-menu-wrap { position:relative;width:100%;border-left:1px solid #766a60; }
.compact-menu-toggle { border-left:0; }
.compact-nav a:hover,
.compact-nav a[aria-current=page],
.compact-menu-toggle:hover,
.compact-menu-toggle.active { color:#fff3dc;text-decoration:underline;text-underline-offset:5px; }
.compact-menu-toggle:focus-visible,
.compact-nav a:focus-visible { outline:3px solid #b7d3a1;outline-offset:2px; }

.compact-menu {
  position:absolute;
  z-index:100;
  top:calc(100% + 7px);
  right:0;
  width:max-content;
  min-width:190px;
  max-width:min(320px,calc(100vw - 24px));
  padding:6px;
  border:1px solid #7e705f;
  background:#292929f7;
  box-shadow:5px 5px 0 #171614;
}

.compact-menu[hidden] { display:none; }
.compact-menu a { display:block;min-height:44px;padding:12px 14px;text-decoration:none;white-space:nowrap; }
.compact-menu a:hover,
.compact-menu a:focus-visible,
.compact-menu a[aria-current=page] { background:#4b4d3d;color:#fff; }

@media(max-width:900px){
  .topbar { padding:4px 8px;gap:2px 4px; }
  .compact-nav { order:3;flex-basis:100%; }
  .compact-nav>.compact-home { border-left:0; }
}

@media(max-width:380px){
  .compact-nav>a,
  .compact-menu-toggle { padding-inline:4px;font-size:12px;gap:3px; }
}