#menu {
  padding: clamp(8px, 1.4vw, 20px);
}

#menu .menu-window,
#menu #accountPanel {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
}

#menu .main-menu,
#menu .level-menu,
#menu .world-studio {
  height: 100%;
  min-height: 0;
  gap: clamp(12px, 1.8dvh, 22px);
}

#menu .main-menu-layout {
  display: flex;
  width: min(1200px, 100%);
  min-height: 0;
  flex: 1;
  flex-direction: column;
  align-self: center;
}

#menu .account-entry,
#menu .menu-intro {
  width: min(1200px, 100%);
  align-self: center;
}

#menu .campaign-section {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}

#menu .rating-buttons {
  grid-template-rows: repeat(2, minmax(96px, 1fr));
  max-height: min(42dvh, 400px);
}

#menu .menu-actions {
  margin-top: 18px;
}

#menu .level-layout {
  min-height: 0;
  flex: 1;
}

#menu .level-choice {
  height: 100%;
  min-height: 0;
  max-height: none;
}

#menu .world-studio {
  width: 100%;
  max-height: none;
}

#menu .world-studio .world-library {
  max-height: none;
}

#menu .about-page {
  width: 100%;
  height: 100%;
  max-height: none;
}

@media (max-width: 760px) {
  #menu {
    padding: 8px;
  }

  #menu .main-menu,
  #menu .level-menu,
  #menu .world-studio {
    gap: 14px;
    padding: 16px;
  }

  #menu .rating-buttons {
    grid-template-rows: repeat(2, minmax(80px, 1fr));
    max-height: min(40dvh, 340px);
  }

  #menu .level-choice {
    min-height: 0;
  }
}

@media (max-width: 480px) {
  #menu .level-layout {
    flex: initial;
  }

  #menu .level-choice {
    min-height: 220px;
  }
}